/* 彩虹橋小窗台：音樂盒（2026-11-11）。腳本：room-music.js。面板外框沿用 room-msg.css 的 .rm-msg／.rm-msg-box，格子沿用 room-gift.css 的 .rm-gift-h */

/* 右上角的播放／停止鈕（插在 .rm-fab 裡）；[hidden] 要自己寫，.rm-fab-btn 的 display 會蓋過它 */
.rm-mb-btn[hidden] { display: none; }
.rm-mb-btn.is-on { color: #f2c46d; background: rgba(29, 20, 17, .85); }

/* 窗台前緣的小標籤（曲名／發條秒數／提示）；位置由 JS 每格投影，不接受點擊 */
.rm-mb-tag {
    position: absolute; z-index: 4; transform: translate(-50%, 0); pointer-events: none;
    max-width: 14rem; padding: .22rem .65rem; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: .74rem; letter-spacing: .03em; color: #fbe7c4; background: rgba(29, 20, 17, .62);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.rm-mb-tag[hidden] { display: none; }
.rm-mb-tag.is-on { color: #2a1808; background: rgba(242, 196, 109, .92); }

/* 設定視窗：蓋在場景上，但背景要淡，才看得到「點了就換上窗台」的預覽。桌機靠右、手機是底部面板（高度壓低，不蓋住窗台） */
.rm-music { background: rgba(10, 5, 3, .18); -webkit-tap-highlight-color: transparent; }
.rm-music-box { max-height: 58vh; max-height: 58dvh; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 768px) {
    .rm-music { align-items: center; justify-content: flex-end; padding-right: 1.2rem; }
    .rm-music-box { max-height: calc(100vh - 3rem); max-height: calc(100dvh - 3rem); width: min(23rem, 38vw); }   /* 窄一點，盒子才不會被蓋住 */
}
.rm-mb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: .3rem; }
.rm-mb-grid.is-kind { grid-template-columns: repeat(var(--n, 3), 1fr); }   /* 選項個數由 JS 設（沒放盒子時只有 2 個） */
.rm-mb-chip {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 2.6rem; padding: .5rem .4rem;
    border-radius: .8rem; cursor: pointer; text-align: center; color: var(--rm-text); font: inherit;
    background: rgba(255, 235, 200, .06); border: 1px solid rgba(224, 178, 122, .3);
    -webkit-tap-highlight-color: transparent;
}
.rm-mb-chip b { font-size: .88rem; font-weight: 700; line-height: 1.35; }
.rm-mb-chip small { font-size: .7rem; line-height: 1.4; color: var(--rm-dim); }
.rm-mb-chip .material-icons { font-size: 1.3rem; color: var(--rm-gold); }
.rm-mb-chip:hover { background: rgba(255, 235, 200, .12); }
.rm-mb-chip:focus, .rm-mb-chip:focus-visible, .rm-mb-aud:focus, .rm-mb-aud:focus-visible { outline: none; }
.rm-mb-chip.is-on { background: var(--rm-gold); border-color: var(--rm-gold); color: #2a1808; }
.rm-mb-chip.is-on small, .rm-mb-chip.is-on .material-icons { color: #4a3016; }
.rm-mb-rest { transition: opacity .2s; }
.rm-mb-rest.is-off { opacity: .35; pointer-events: none; }
.rm-mb-tracks { display: flex; flex-direction: column; gap: .4rem; }
.rm-mb-gh { margin: .5rem 0 .1rem; font-size: .76rem; letter-spacing: .08em; color: var(--rm-dim); }
.rm-mb-gh:first-child { margin-top: 0; }
.rm-mb-row { display: flex; gap: .4rem; align-items: stretch; }
.rm-mb-chip.is-track { flex: 1; min-width: 0; flex-direction: row; justify-content: flex-start; text-align: left; padding: .5rem .8rem; }
.rm-mb-aud {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .15rem; padding: 0 .75rem; border-radius: .8rem; cursor: pointer; font: inherit; font-size: .78rem;
    color: var(--rm-gold-soft); background: transparent; border: 1px solid rgba(224, 178, 122, .38); -webkit-tap-highlight-color: transparent;
}
.rm-mb-aud .material-icons { font-size: 1.1rem; }
.rm-mb-aud:hover, .rm-mb-aud.is-on { background: rgba(255, 235, 200, .14); }
.rm-mb-aud.is-on { color: #f2c46d; border-color: #f2c46d; }
.rm-music .rm-msg-foot { margin-top: .9rem; }
.rm-music .rm-count { flex: 1; }