/* おへやの音楽: 画面のすみの、小さなレコードプレーヤー */
body.has-bgm { padding-bottom: 76px; }
.bgm-bar { position: fixed; right: 16px; bottom: 14px; z-index: 60; width: min(420px, calc(100% - 32px)); font-size: .8rem; color: var(--ink); }
.bgm-deck { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: var(--card); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }

/* ターンテーブルとレコード */
.bgm-turntable { position: relative; width: 46px; height: 46px; flex: none; background: #0d1822; border: 2px solid var(--ink); overflow: hidden; }
.bgm-slot { position: absolute; inset: 3px; transition: transform .3s steps(4), opacity .3s steps(4); }
.bgm-rec { --c: #8fd6f8; width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(circle, #0d1822 0 2px, var(--c) 2.5px 8px, transparent 8.5px),
    conic-gradient(from 20deg, rgba(255,255,255,.28) 0 18deg, transparent 18deg 180deg, rgba(255,255,255,.18) 180deg 198deg, transparent 198deg),
    repeating-radial-gradient(circle, #1b2733 0 1px, #27384a 1px 2px);
  box-shadow: inset 0 0 0 2px #05090d; }
.bgm-rec .lbl { display: none; }
.bgm-bar.on .bgm-rec { animation: bgm-spin 1.2s steps(8) infinite; }
@keyframes bgm-spin { to { transform: rotate(360deg); } }
.bgm-arm { position: absolute; right: 2px; top: 2px; width: 4px; height: 22px; background: #c9d6e0; transform-origin: 50% 2px; transform: rotate(-38deg); transition: transform .25s steps(3); }
.bgm-arm::after { content: ""; position: absolute; left: -2px; bottom: -3px; width: 8px; height: 5px; background: #c9d6e0; }
.bgm-bar.on .bgm-arm { transform: rotate(14deg); }
.bgm-bar.swap-out .bgm-slot { transform: translateX(-120%) rotate(-120deg); opacity: 0; }
.bgm-bar.swap-out .bgm-arm { transform: rotate(-38deg); }
.bgm-bar.swap-in .bgm-slot { animation: bgm-in .34s steps(4); }
@keyframes bgm-in { from { transform: translateX(120%) rotate(120deg); opacity: 0; } }

/* ボタン */
.bgm-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; flex: none; color: var(--ink); background: var(--card); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; }
.bgm-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.bgm-btn svg { width: 14px; height: 14px; }
.bgm-play { color: #fff; background: var(--ink); box-shadow: 2px 2px 0 var(--blue); }
.bgm-play[aria-pressed="true"] { background: var(--blue); box-shadow: 2px 2px 0 var(--ink); }
.bgm-pick[aria-expanded="true"] { background: var(--blue-soft); }
.bgm-mute[aria-pressed="true"] { color: #d9559f; }
.bgm-btn:focus-visible, .bgm-disc:focus-visible, .bgm-auto:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.bgm-info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.bgm-info small { font: .66rem ui-monospace, Consolas, monospace; color: var(--blue); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bgm-info b { font: .86rem var(--dot, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 音量スライダー: 四角いつまみと、区切りのあるドットのみぞ */
.bgm-bar input[type="range"] { --fill: 60%; -webkit-appearance: none; appearance: none; width: 78px; flex: none; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.bgm-bar input[type="range"]::-webkit-slider-runnable-track { height: 10px; border: 2px solid var(--ink); box-sizing: border-box;
  background: repeating-linear-gradient(90deg, transparent 0 6px, var(--card) 6px 8px), linear-gradient(90deg, var(--blue) 0 var(--fill), var(--blue-soft) var(--fill)); }
.bgm-bar input[type="range"]::-moz-range-track { height: 6px; border: 2px solid var(--ink);
  background: repeating-linear-gradient(90deg, transparent 0 6px, var(--card) 6px 8px), linear-gradient(90deg, var(--blue) 0 var(--fill), var(--blue-soft) var(--fill)); }
.bgm-bar input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 18px; margin-top: -6px; background: var(--card); border: 2px solid var(--ink); border-radius: 0; box-shadow: 2px 2px 0 var(--ink); }
.bgm-bar input[type="range"]::-moz-range-thumb { width: 6px; height: 14px; background: var(--card); border: 2px solid var(--ink); border-radius: 0; box-shadow: 2px 2px 0 var(--ink); }
.bgm-bar input[type="range"]:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.bgm-bar.muted input[type="range"] { opacity: .45; }

/* レコードえらび（24色の盤） */
.bgm-tray { position: absolute; right: 0; bottom: calc(100% + 10px); width: 100%; box-sizing: border-box; padding: 10px; background: var(--card); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.bgm-tray-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bgm-tray-head b { font: .86rem var(--dot, inherit); }
.bgm-auto { padding: 3px 8px; font: .74rem var(--dot, inherit); color: var(--ink); background: var(--card); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; }
.bgm-auto:disabled { opacity: .4; cursor: default; box-shadow: none; }
.bgm-discs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.bgm-disc { --c: #8fd6f8; position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, #0d1822 0 8%, var(--c) 9% 38%, #1b2733 39% 41%, #27384a 42% 47%, #1b2733 48% 51%, #27384a 52% 70%, #0d1822 71%);
  transition: transform .12s steps(2); }
.bgm-disc span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 .58rem ui-monospace, Consolas, monospace; color: #fff; text-shadow: 1px 1px 0 #0d1822; }
.bgm-disc i { display: none; }
.bgm-disc:hover { transform: translateY(-3px); }
.bgm-disc[aria-current="true"] { outline: 2px solid var(--ink); outline-offset: 2px; transform: translateY(-3px); }
.bgm-tray-note { margin: 8px 0 0; font-size: .7rem; color: var(--sub); }

@media (min-width: 1000px) {
  body.has-bgm.bgm-top { padding-bottom: 0; }
  .room-main .top { position: relative; padding-right: 440px; }
  .room-main .top .bgm-bar { position: absolute; right: 10px; top: 14px; bottom: auto; }
  .room-main .top .bgm-tray { top: calc(100% + 10px); bottom: auto; }
}
@media (max-width: 520px) {
  .bgm-bar { right: 8px; bottom: 8px; width: calc(100% - 16px); }
  .bgm-bar input[type="range"] { width: 56px; }
  .bgm-discs { grid-template-columns: repeat(8, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .bgm-bar.on .bgm-rec { animation: none; }
  .bgm-slot, .bgm-arm { transition: none; }
}