/* music.html（ホーム画面に置く音楽室）だけの上乗せ。対局側の見た目には触らない。 */

/* 戻る先が無いので、タイトルへの導線は畳む。要素そのものは MusicRoom が触るので残す。 */
.music-app .music-back { display: none; }
/* 戻るボタンが消えても、見出しは左に置いたままにする（狭い幅では右寄せになる指定を戻す）。 */
.music-app .music-heading-copy { margin: 0 auto 0 0; text-align: left; }

/* 引っぱっても画面ごと動かさない（アプリとして開いたときの手ざわり）。
   ⚠ 余白（padding）はここで指定しない。css/musicroom.css の @media が safe-area 込みで
      持っているので、上書きすると携帯版の組みが崩れる。 */
.music-app #music-room { overscroll-behavior: contain; }
.music-app { -webkit-tap-highlight-color: transparent; }

@media (max-width: 900px) {
    .music-app #music-room {
        padding: calc(12px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
    }
}

/* 曲を端末へ取り込んでいる間の帯。画面の下に浮かせ、2ページ構成のどちらにも乗る。
   中身は js/musicapp.js が組み立てる（HTML は index.html と同じに保つため）。 */
.music-shelf {
    position: fixed;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(520px, calc(100% - 24px));
    padding: 8px 12px;
    border: 1px solid #a88865;
    background: #2b1b22f2;
    color: #fff8e9;
    font-size: 12px;
    box-shadow: 0 3px 10px #0006;
}
.music-shelf[hidden] { display: none; }
.music-shelf-text { flex: 1; min-width: 0; margin: 0; }
.music-shelf-bar { flex: none; width: 88px; height: 6px; background: #ffffff2e; }
.music-shelf-bar[hidden] { display: none; }
.music-shelf-bar span { display: block; width: 0; height: 100%; background: #eed395; transition: width 200ms linear; }
.music-shelf-button { flex: none; min-height: 32px; padding: 4px 10px; font-size: 11px !important; }
@media (prefers-reduced-motion: reduce) {
    .music-shelf-bar span { transition: none; }
}