/* タイトルと同じ織り地に、レコード盤と収録曲の紙面を重ねる。 */
.music-pages { display: none; }
#music-room {
    position: fixed;
    inset: 0;
    z-index: 200;
    overflow: auto;
    padding: clamp(16px, 3vw, 36px);
    color: var(--arcade-ink);
    font: 500 14px/1.5 'Zen Maru Gothic', sans-serif;
}
#music-room[hidden] { display: none; }
#music-room [hidden] { display: none !important; }
#music-room button, #music-room input { font: inherit; }
#music-room button { cursor: pointer; }
#music-room :is(button, input, [tabindex]):focus-visible { outline: 3px solid #962d49; outline-offset: 3px; }
/* キャラ曲を再生しているあいだだけ、対局のリーチ背景（軸色と流れる模様）を画面いっぱいに敷く。
   模様は .riichi-field-pattern をそのまま借りるので、対局側を直せば音楽室も揃う。 */
.music-field { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--riichi-main); opacity: 0; transition: opacity 420ms ease; }
#music-room.is-playing .music-field { opacity: .88; }
#music-room.is-playing .music-field[data-character="kiyotaka_photo"] { opacity: 1; }
.music-shell { position: relative; z-index: 1; width: min(1140px, 100%); margin: auto; }
.music-header { display: flex; align-items: center; gap: 30px; margin-bottom: 22px; padding: 12px 22px; min-height: 92px; border-block: 1px solid #eed395; background: var(--select-diamond), #962d49; color: #fff8e9; box-shadow: 4px 4px 0 #8c411e33; }
.music-heading-copy { margin-right: auto; }
.music-heading-copy p { font-size: 11px; letter-spacing: .18em; margin: 0; color: #eed395; }
.music-heading-copy h1 { margin: 0; font: 400 34px/1.4 'KeinannMaruPOPjp', sans-serif; }
.music-header-note { margin: 0; text-align: right; font-family: 'KeinannMaruPOPjp', sans-serif; font-size: 19px; }
.music-header-note span { display: block; margin-top: 4px; font: 500 12px/1.5 'Zen Maru Gothic', sans-serif; color: #f1d8c4; }
.music-layout { display: grid; grid-template-columns: minmax(320px, .95fr) minmax(360px, 1.2fr); gap: 24px; align-items: start; }
.music-player { padding: 22px; background: #fffaf1; border: 1px solid #a88865; border-top: 4px solid #962d49; box-shadow: 5px 5px 0 #81563b25; }
.music-turntable { position: relative; overflow: hidden; height: clamp(180px, 27vh, 260px); display: grid; place-items: center; background: var(--select-diamond), linear-gradient(135deg, #402e32, #241d23); border: 1px solid #a88865; box-shadow: inset 0 0 0 6px #ffffff07; }
.music-disc-caption { position: absolute; top: 10px; left: 12px; color: #cfb994; letter-spacing: .13em; font-size: 9px; }
.music-record { position: relative; width: clamp(150px, 22vh, 216px); aspect-ratio: 1; border-radius: 50%; box-shadow: 4px 9px 12px #0008; }
/* 元の陰影に軸色を30%重ね、溝と光沢を残す。外周はキャラの差し色。 */
.music-record-grooves { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(var(--music-record-tint, transparent), var(--music-record-tint, transparent)), conic-gradient(from 30deg, #111014, #595052 20%, #181419 29%, #111014 49%, #5b5150 69%, #171418 80%, #111014); animation: musicDiscSpin 16s linear infinite paused; }
.music-record-grooves::after { content: ''; position: absolute; inset: 3px; border-radius: inherit; background: repeating-radial-gradient(circle, transparent 0 2px, #c0aa8419 3px, #0005 4px); border: 1px solid var(--music-record-rim, #c9a45c60); }
.music-record-art { position: absolute; inset: 27%; overflow: hidden; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--music-record-label-rim, #d7b774); background: var(--music-accent, #962d49); color: #fff8e9; box-shadow: 0 0 0 5px var(--music-record-inner-ring, #22191d); font: 400 36px/1 'KeinannMaruPOPjp', sans-serif; }
.music-record-art img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; background: var(--music-accent); }
/* 写真の余白を外し、顔と差し出した手を中央の円に収める。 */
.music-record-art[data-character="kichi"] img { width: 190%; height: auto; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -41%); }
.music-record-art[data-character="kiyotaka_photo"] img { width: 240%; height: auto; max-width: none; left: 50%; top: 50%; transform: translate(-45%, -31%); }
/* 支点・長さは盤の直径から決める。小さい画面でも針先が外周とラベルの間に載る。 */
.music-tonearm { position: absolute; width: 10px; height: 67%; top: 10%; left: 100%; border: 2px solid #d9bd89; border-radius: 8px; background: #a1845b; transform-origin: center 8px; transform: rotate(26deg); box-shadow: 2px 2px 3px #0008; }
.music-tonearm::before { content: ''; position: absolute; width: 19px; height: 19px; top: -8px; left: -6px; border-radius: 50%; border: 3px solid #cfb078; background: #574646; }
.music-tonearm::after { content: ''; position: absolute; height: 23px; width: 12px; left: -3px; bottom: -9px; border: 2px solid #cfb078; background: #442d31; }
.is-playing .music-record-grooves { animation-play-state: running; }
.music-turntable-light { position: absolute; bottom: 14px; left: 14px; width: 6px; height: 6px; border-radius: 50%; background: #8c7058; }
.is-playing .music-turntable-light { background: #f5d69b; box-shadow: 0 0 8px #f5d69b; }
.music-turntable-sign { position: absolute; right: 12px; bottom: 10px; color: #baa384; font-size: 8px; letter-spacing: .12em; }
.music-now { margin: 18px 0 6px; }
.music-kicker { margin: 0; color: #94603e; font-size: 11px; letter-spacing: .15em; }
.music-now h2 { margin: 3px 0; font: 400 clamp(23px, 2.3vw, 30px)/1.4 'KeinannMaruPOPjp', sans-serif; }
#music-track-subtitle { margin: 0; min-height: 21px; color: #796254; font-size: 12px; }
#music-room input[type=range] { min-width: 0; height: 32px; padding: 0; accent-color: #962d49; cursor: pointer; background: transparent; }
.music-timeline input { display: block; width: 100%; }
.music-timeline > div { display: flex; justify-content: space-between; color: #796254; font-variant-numeric: tabular-nums; font-size: 12px; }
.music-transport { display: flex; gap: 8px; margin-top: 14px; }
.music-button { min-height: 44px; padding: 7px 12px; border: 1px solid #b49a86; background: #f8edd8; color: #482c34; border-radius: 2px; white-space: nowrap; transition: background 150ms; }
.music-button:hover { background: #eed7ac; }
.music-button:active { transform: translateY(1px); }
.music-back { background: #702139; border-color: #d7a67c; color: #fff8e9; }
.music-back:hover { background: #582132; }
#music-room .music-header :focus-visible { outline-color: #fff8e9; }
.music-step { width: 44px; padding: 10px; flex-shrink: 0; }
.music-step svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.music-play { flex: 1; background: #962d49; color: #fff8e9; border-color: #702139; min-width: 115px; }
.music-play:hover { background: #702139; }
.music-settings { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.music-toggle { font-size: 12px !important; padding: 5px 8px; }
.music-toggle[aria-pressed=true] { border-color: #962d49; color: #962d49; background: #f5dfe1; box-shadow: inset 0 -3px #962d49; }
.music-volume { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; }
.music-volume input { width: 100%; flex: 1; }
.music-volume output { width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.music-status { min-height: 18px; margin: 12px 0 0; color: #796254; font-size: 12px; }
.music-library { min-width: 0; display: flex; flex-direction: column; height: calc(100dvh - 190px); min-height: 450px; max-height: 760px; background: #fffaf1; border: 1px solid #a88865; box-shadow: 5px 5px 0 #81563b25; }
.music-library-heading { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; }
.music-library-heading h2 { margin: 0; font: 400 22px/1.4 'KeinannMaruPOPjp', sans-serif; }
#music-count { color: #796254; font-size: 12px; }
.music-library-tools { padding: 0 20px 14px; border-bottom: 1px solid #dbc6a5; }
.music-filters { display: flex; gap: 5px; margin-bottom: 12px; }
.music-filters button { min-height: 44px; flex: 1; border: 1px solid #c6ac8f; color: #796254; background: #f8edd8; border-radius: 2px; }
.music-filters button:hover { background: #eed7ac; }
.music-filters button[aria-pressed=true] { background: #962d49; color: #fff8e9; border-color: #702139; box-shadow: inset 0 -3px #eed395; }
#music-search { display: block; width: 100%; min-height: 44px; border: 1px solid #baa181; border-radius: 2px; padding: 8px 12px; color: #482c34; background: #fff; }
#music-search::placeholder { color: #89715e; }
.music-track-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #b18b60 #f5e8d0; scrollbar-width: thin; padding: 5px 9px; }
#music-tracks { list-style: none; margin: 0; padding: 0; }
#music-tracks li + li { border-top: 1px solid #eadac5; }
.music-track { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 9px 11px; border: 1px solid transparent; border-left: 3px solid transparent; background: transparent; color: #482c34; text-align: left; }
.music-track:hover { background: #f7ecd7; }
.music-track[aria-pressed=true] { border-color: #cba078; border-left-color: #962d49; background: #f7e6d5; }
.music-track-number { width: 23px; color: #96734f; font-size: 12px; font-variant-numeric: tabular-nums; }
.music-track-art { position: relative; overflow: hidden; display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border: 1px solid #b08b62; background: var(--track-color); color: #fff8e9; font: 400 25px/1 'KeinannMaruPOPjp', sans-serif; }
.music-track-art img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; background: var(--track-color); }
.music-track-copy { min-width: 0; flex: 1; }
.music-track-copy strong { display: block; font-weight: 700; font-size: 16px; }
.music-track-copy small { display: block; color: #796254; font-size: 11px; margin-top: 3px; }
.music-track-state { color: #962d49; font-size: 12px; white-space: nowrap; }
#music-empty { padding: 36px 12px; color: #796254; text-align: center; }
@keyframes musicDiscSpin { to { transform: rotate(360deg); } }
@media (max-width: 800px) {
    #music-room { padding: 14px; }
    .music-header { gap: 18px; padding: 10px 14px; margin-bottom: 16px; }
    .music-layout { gap: 16px; grid-template-columns: minmax(290px, .95fr) minmax(290px, 1fr); }
    .music-player { padding: 16px; }
    .music-header-note { display: none; }
    .music-settings { gap: 10px; flex-wrap: wrap; }
    .music-volume { flex-basis: 140px; }
    .music-track { gap: 8px; padding-inline: 5px; }
    .music-library-tools { padding-inline: 14px; }
}
@media (max-width: 640px) {
    .music-layout { grid-template-columns: minmax(0, 1fr); }
    .music-header { min-height: 76px; }
    .music-heading-copy { margin: 0 0 0 auto; text-align: right; }
    .music-heading-copy h1 { font-size: 28px; }
    .music-player { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; }
    .music-player > :not(.music-turntable):not(.music-now) { grid-column: 1 / -1; }
    .music-turntable { height: 112px; }
    .music-record { width: 84px; }
    .music-record-art { font-size: 22px; }
    .music-disc-caption, .music-turntable-sign, .music-turntable-light { display: none; }
    .music-now { margin: 0; align-self: center; }
    .music-now h2 { font-size: 22px; }
    .music-library { height: 520px; min-height: 0; }
    #music-room input[type=range] { height: 44px; }
    .music-transport { margin-top: 10px; gap: 6px; }
    .music-transport .music-button { padding-inline: 8px; }
    .music-play { min-width: 0; font-size: 13px !important; }
    .music-status { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .music-record-grooves { animation: none; }
    .music-tonearm, .music-button { transition: none; }
    .music-field { transition: none; }
}
@media (min-width: 641px) and (max-height: 700px) {
    #music-room { padding: 18px; }
    .music-header { min-height: 72px; padding-block: 8px; margin-bottom: 16px; }
    .music-player { padding: 16px; }
    .music-turntable { height: 145px; }
    .music-disc-caption { display: none; }
    .music-record { width: 124px; }
    .music-now { margin-top: 12px; }
    .music-transport { margin-top: 10px; }
    .music-settings, .music-status { margin-top: 8px; }
    .music-library { height: calc(100dvh - 142px); min-height: 300px; }
}

/* 携帯版は一覧と再生の2ページ。901px以上の紙面・配置には上乗せしない。 */
@media (max-width: 900px) {
    #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));
    }
    .music-shell { height: 100%; min-height: 620px; display: flex; flex-direction: column; gap: 8px; }
    .music-header { flex: none; min-height: 64px; margin: 0; padding: 8px 14px; gap: 12px; }
    .music-heading-copy h1 { font-size: 26px; }
    .music-heading-copy p { font-size: 10px; }
    .music-header-note { display: none; }
    .music-pages { display: flex; flex: none; gap: 6px; }
    .music-pages .music-button { flex: 1; }
    .music-pages [aria-pressed=true] { color: #fff8e9; background: #962d49; border-color: #702139; box-shadow: inset 0 -3px #eed395; }
    .music-layout { flex: 1; min-height: 0; display: block; }
    #music-room[data-music-page=library] .music-player,
    #music-room[data-music-page=player] .music-library { display: none; }
    .music-library { height: 100%; min-height: 0; max-height: none; }
    .music-library-heading { padding: 14px 16px 10px; }
    .music-library-tools { padding: 0 16px 12px; }
    .music-filters { margin-bottom: 8px; }
    #music-search { font-size: 16px; }
    .music-track { min-height: 68px; gap: 8px; padding: 8px 5px; }
    .music-track-copy small { font-size: 12px; }
    .music-track-copy strong { overflow-wrap: anywhere; }
    .music-track-number { width: 20px; flex-shrink: 0; }
    .music-track-art { width: 44px; height: 44px; }

    .music-player {
        position: relative; isolation: isolate; height: 100%; padding: 0 12px;
        display: grid; grid-template-columns: 44px 44px minmax(64px, 1fr) 44px 44px;
        grid-template-rows: minmax(180px, 1fr) auto auto 64px 52px auto;
        column-gap: 6px; background: transparent; border: 0; box-shadow: none;
    }
    /* 下半分だけ既存のクリーム色の紙を敷き、盤の後ろは背景を見せる。 */
    .music-player::before {
        content: ''; grid-column: 1 / -1; grid-row: 2 / 7; z-index: -1;
        margin-inline: -12px; background: #fffaf1; border: 1px solid #a88865;
        border-top: 3px solid #962d49; box-shadow: 4px 4px 0 #81563b25;
    }
    #music-room .music-player > :is(.music-now, .music-timeline, .music-status) { grid-column: 1 / -1; }
    #music-room .music-player > .music-turntable {
        grid-column: 1 / -1; grid-row: 1; height: auto; min-height: 0; margin-inline: -12px;
        background: transparent; border: 0; box-shadow: none;
    }
    .music-record { width: min(65vw, 30dvh, 310px); }
    .music-record-art { font-size: 36px; }
    .music-disc-caption, .music-turntable-sign, .music-turntable-light { display: none; }
    #music-room .music-player > .music-timeline { grid-row: 2; padding-top: 3px; }
    #music-room input[type=range] { height: 44px; }
    .music-timeline > div { margin-top: -6px; font-size: 12px; }
    #music-room .music-player > .music-now { grid-row: 3; text-align: center; margin: 10px 0 4px; align-self: center; }
    .music-now h2 { font-size: clamp(22px, 6vw, 30px); margin-block: 2px; overflow-wrap: anywhere; }
    .music-kicker { font-size: 11px; }
    #music-track-subtitle { font-size: 13px; }
    .music-transport, .music-settings { display: contents; }
    #music-repeat { grid-column: 1; grid-row: 4; }
    #music-previous { grid-column: 2; grid-row: 4; }
    #music-play { grid-column: 3; grid-row: 4; min-width: 0; width: 100%; min-height: 52px; font-size: 0 !important; padding-inline: 2px; }
    #music-play::before { content: '▶'; font-size: 24px; }
    #music-play[data-busy=true]::before { content: 'Ⅱ'; }
    #music-next { grid-column: 4; grid-row: 4; }
    #music-shuffle { grid-column: 5; grid-row: 4; }
    .music-transport .music-button, .music-settings .music-button { align-self: center; }
    .music-mode-label { display: none; }
    #music-repeat, #music-shuffle { width: 44px; padding: 5px; font-size: 23px !important; }
    .music-volume { grid-column: 1 / -1; grid-row: 5; gap: 6px; align-self: center; font-size: 12px; }
    #music-room .music-player > .music-status { grid-row: 6; font-size: 12px; text-align: center; margin: 0; padding: 3px 0 10px; }
    /* 音楽室だけ1/2サイズ。距離と周期を同時に縮めて流れる速さを保つ。
       対局の位相合わせ（RiichiField.driftDelay）はこの1枚には使わない。 */
    .music-field .riichi-field-pattern {
        --riichi-pattern-width: 250.1851165px;
        --riichi-pattern-height: 1300px;
        animation-duration: 18.389632s, 204.919068s;
    }
}