/* Music control: a speaker button with a small panel (mute switch, volume, credits). */
.wh-sound {
    position: fixed; z-index: 85;
    left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 8px;
    font-family: "Montserrat", system-ui, sans-serif;
}
.page-game .wh-sound { bottom: auto; top: calc(64px + 12px); left: 12px; }
body.scene-open .wh-sound { top: auto; bottom: 86px; }
.wh-sound__btn {
    position: relative; display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    color: #ffe2a3; background: rgba(14, 10, 7, .82);
    border: 1px solid rgba(247, 181, 74, .5); border-radius: 50%; cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: border-color .2s ease, transform .2s ease;
}
.wh-sound__btn:hover, .wh-sound__btn:focus-visible, .wh-sound.is-open .wh-sound__btn { border-color: #f7b54a; transform: translateY(-1px); }
.wh-sound__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wh-sound__x { display: none; }
.wh-sound.is-muted .wh-sound__waves { display: none; }
.wh-sound.is-muted .wh-sound__x { display: inline; }
.wh-sound.is-muted .wh-sound__btn { color: #cdb79a; }
.wh-sound.is-waiting .wh-sound__btn::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 2px solid rgba(255, 226, 163, .7);
    animation: wh-sound-pulse 1.6s ease-out infinite;
}
@keyframes wh-sound-pulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

.wh-sound__panel {
    position: absolute; left: 0; bottom: calc(100% + 10px);
    width: min(290px, calc(100vw - 28px));
    padding: 14px 16px;
    color: #fff4e3; background: rgba(16, 11, 7, .96);
    border: 1px solid rgba(247, 181, 74, .45); border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 30px rgba(255, 140, 40, .15);
}
.page-game .wh-sound__panel { bottom: auto; top: calc(100% + 10px); }
body.scene-open .wh-sound__panel { top: auto; bottom: calc(100% + 10px); }
.wh-sound__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wh-sound__label { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f7b54a; }
.wh-sound__switch {
    display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer;
    font: 700 .8rem "Montserrat", system-ui, sans-serif; color: #fff4e3;
}
.wh-sound__switch span {
    position: relative; width: 44px; height: 26px; border-radius: 26px;
    background: rgba(255, 255, 255, .14); transition: background .2s ease;
}
.wh-sound__switch span::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff4e3; transition: transform .2s ease;
}
.wh-sound__switch[aria-checked="true"] span { background: linear-gradient(90deg, #f2a43b, #ffd27a); }
.wh-sound__switch[aria-checked="true"] span::after { transform: translateX(18px); background: #1b120a; }
.wh-sound__switch:focus-visible span { outline: 2px solid #ffe2a3; outline-offset: 2px; }
.wh-sound__vol { display: grid; gap: 8px; margin-top: 14px; }
.wh-sound__vol input { width: 100%; accent-color: #f7b54a; height: 28px; }
.wh-sound__now { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(247, 181, 74, .18); display: grid; gap: 2px; }
.wh-sound__now em { font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #cdb79a; }
.wh-sound__now strong { font-size: .88rem; line-height: 1.3; }
.wh-sound__now span { font-size: .76rem; color: #cdb79a; }
.wh-sound__credits-btn {
    margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer;
    font: 600 .76rem "Montserrat", system-ui, sans-serif; color: #ffe2a3; text-decoration: underline;
}
.wh-sound__credits { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-height: 180px; overflow-y: auto; font-size: .7rem; line-height: 1.45; color: #cdb79a; }
.wh-sound__credits a { color: #ffe2a3; }
@media (prefers-reduced-motion: reduce) { .wh-sound.is-waiting .wh-sound__btn::after { animation: none; } }
@media (max-width: 860px) {
    body.scene-open .wh-sound { top: max(14px, env(safe-area-inset-top)); bottom: auto; left: 50%; transform: translateX(-50%); }
    body.scene-open .wh-sound__panel { top: calc(100% + 10px); bottom: auto; left: 50%; transform: translateX(-50%); }
}
body.reader-open .wh-sound { top: auto; bottom: max(18px, env(safe-area-inset-bottom)); left: 16px; transform: none; }
body.reader-open .wh-sound__panel { top: auto; bottom: calc(100% + 10px); left: 0; transform: none; }
.page-trivia-game .wh-sound { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); }
.page-trivia-game .wh-sound__panel { top: auto; bottom: calc(100% + 10px); }

/* Song picker: a fixed grid so the menu never spills out of the panel (iPhone sizes menus to their text) */
.wh-sound__song { display: grid; gap: 8px; margin-top: 14px; min-width: 0; }
.wh-sound__skip { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 6px; min-width: 0; }
.wh-sound__skip select {
    width: 100%; min-width: 0; max-width: 100%; height: 38px; margin: 0; padding: 0 30px 0 10px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    -webkit-appearance: none; appearance: none;
    font: 600 .8rem "Montserrat", system-ui, sans-serif; color: #fff4e3;
    background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23f7b54a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 14px 14px;
    border: 1px solid rgba(247, 181, 74, .4); border-radius: 10px; cursor: pointer;
}
.wh-sound__skip select:focus-visible { outline: 2px solid #ffe2a3; outline-offset: 1px; }
.wh-sound__skip select option { color: #1b120a; background: #fff4e3; }
.wh-sound__nav { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; color: #1b120a; background: #f7b54a; border: 0; border-radius: 10px; cursor: pointer; }
.wh-sound__nav:hover, .wh-sound__nav:focus-visible { background: #ffe2a3; }
.wh-sound__nav svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* Now playing: shown beside the button while the panel is closed */
.wh-sound__tag {
    display: inline-flex; align-items: center; gap: 9px; min-width: 0;
    max-width: min(250px, calc(100vw - 96px)); height: 34px; padding: 0 14px 0 11px;
    color: #fff4e3; text-align: left; cursor: pointer;
    background: rgba(14, 10, 7, .82); border: 1px solid rgba(247, 181, 74, .38); border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font: 600 .72rem/1.15 "Montserrat", system-ui, sans-serif;
}
.wh-sound__tag[hidden] { display: none; }
.wh-sound__tag:hover, .wh-sound__tag:focus-visible { border-color: #f7b54a; }
.wh-sound__tag-text { display: grid; min-width: 0; }
.wh-sound__tag-text b, .wh-sound__tag-text span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wh-sound__tag-text b { font-weight: 700; color: #ffe2a3; }
.wh-sound__tag-text span { font-size: .66rem; font-weight: 600; color: #cdb79a; }
.wh-sound__eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 13px; height: 13px; flex: none; }
.wh-sound__eq i { flex: 1; height: 35%; border-radius: 1px; background: #f7b54a; }
.wh-sound.is-playing .wh-sound__eq i { animation: wh-eq 1s ease-in-out infinite; }
.wh-sound.is-playing .wh-sound__eq i:nth-child(2) { animation-delay: -.45s; }
.wh-sound.is-playing .wh-sound__eq i:nth-child(3) { animation-delay: -.2s; }
@keyframes wh-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .wh-sound.is-playing .wh-sound__eq i { animation: none; height: 70%; } }
body.reader-open .wh-sound__tag, body.scene-open .wh-sound__tag { display: none; }

/* Computers: a roomier panel */
@media (min-width: 861px) {
    .wh-sound__panel { width: 330px; padding: 16px 18px; }
    .wh-sound__tag { max-width: 300px; }
}
.wh-sound__panel { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; }