.sound-page main {
  width: 100%;
  min-width: 0;
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
.sound-player {
  --ink: #382f27;
  --muted: #7e7160;
  --sound-wave-height: 5rem;
  --sound-marker: #9a805e;
  --sound-marker-active: #8d672d;
  position: relative;
  isolation: isolate;
  padding: 8px;
  border-radius: 1rem;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-float);
}
.sound-player::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 12px solid transparent;
  border-image: url("data/sprites/ui/dialog-frame.webp") 18 fill / 12px / 0 stretch;
  pointer-events: none;
}
.sound-player-heading { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid #d8cdbd; background: linear-gradient(90deg, #fff9eee8, #fff9eef5), url("data/sprites/scenes/concert-stage.webp") center / cover; border-radius: 0.5rem 0.5rem 0 0; }
.sound-mode-icon { width: 2.75rem; height: 2.75rem; object-fit: contain; flex: none; }
.sound-heading-text { flex: 1; min-width: 0; }
.sound-heading-text h1 { margin: 0 0 0.25rem; font: 700 var(--step-1) / 1.35 var(--font-sprite); }
.sound-stage { display: block; font-size: 0.75rem; color: var(--muted); }
.sound-length { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.sound-listening-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-areas: "play timeline" "tools tools"; align-items: start; gap: 0.25rem 1.25rem; padding: 1.25rem 1.5rem 0.75rem; }
.sound-play { grid-area: play; }
.sound-player .sound-play { position: relative; display: grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem; min-width: 0; min-height: 0; margin-top: 0.75rem; padding: 0; border: 0; border-radius: 50%; background: url("data/sprites/ui/button-circle-gold.webp") center / contain no-repeat; color: #674615; box-shadow: none; }
.sound-player .sound-play::before { display: none; }
#sound-play-icon { width: 1.25rem; height: 1.25rem; object-fit: contain; filter: brightness(0.4) sepia(1) saturate(2); }
.sound-player .sound-play:hover { filter: brightness(1.08); }
.sound-player .sound-play:active { transform: translateY(1px); }
.sound-player .sound-play[aria-pressed="true"] { box-shadow: 0 0 0 3px #81b2e366; }
.sound-timeline { grid-area: timeline; position: relative; flex: 1; min-width: 0; height: 7rem; margin-right: 1.25rem; }
#sound-waveform { display: block; width: 100%; height: var(--sound-wave-height); }
.sound-cutoff, .sound-playhead { position: absolute; top: 0.375rem; height: calc(var(--sound-wave-height) - 0.75rem); width: 3px; transform: translateX(-1.5px); background: var(--sound-marker-active); pointer-events: none; }
.sound-cutoff::before { content: ""; position: absolute; top: -3px; left: -2px; width: 7px; height: 7px; background: var(--sound-marker-active); border-radius: 50%; }
.sound-playhead { width: 2px; background: #3f83c7; z-index: 2; }
.sound-clips { position: absolute; inset: 0; list-style: none; padding: 0; margin: 0; }
.sound-clips li { position: absolute; left: var(--marker-left); top: 0; width: 0; height: 100%; color: var(--muted); white-space: nowrap; font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.sound-clips li::before { content: ""; position: absolute; left: 0; top: 0.375rem; height: calc(var(--sound-wave-height) - 0.75rem); border-left: 2px solid var(--sound-marker-active); transform: translateX(-1px); }
.sound-clips li::after { content: ""; position: absolute; left: 0; top: 0.25rem; width: 5px; height: 5px; border-radius: 1px; background: var(--sound-marker-active); transform: translateX(-50%); }
.sound-clips [data-unlocked="false"]::before { border-left: 1px dashed var(--sound-marker); }
.sound-clips [data-unlocked="false"]::after { background: var(--sound-marker); }
.sound-clips li span { position: absolute; bottom: 0; left: 0; transform: translateX(-50%); padding: 0.125rem; border-radius: 0.25rem; }
.sound-clips li span::before { content: ""; position: absolute; top: -12px; left: var(--guide-start); width: var(--guide-length); border-top: 1px solid var(--sound-marker); transform: rotate(var(--guide-angle)); transform-origin: left top; opacity: 0.5; }
.sound-clips .is-current { color: #6f4f20; font-weight: 700; }
.sound-clips .is-current span { background: #a79a8722; }
.sound-clips .is-current::before, .sound-clips .is-current::after { display: none; }
.sound-player-tools { grid-area: tools; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; }
.sound-volume-control { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1; font-size: 0.75rem; }
.sound-volume-control img { width: 1.25rem; height: 1.25rem; object-fit: contain; flex: none; }
.sound-volume-slider { position: relative; display: flex; align-items: center; flex: 1; width: clamp(5rem, 20vw, 12rem); max-width: 12rem; min-width: 3rem; height: 2.75rem; }
.sound-volume-control input { position: relative; width: 100%; height: 2.75rem; margin: 0; padding: 0; appearance: none; background: transparent; cursor: pointer; }
.sound-volume-control input::-webkit-slider-runnable-track { height: 0.875rem; border: 1px solid #777d91; border-radius: 1rem; background: linear-gradient(90deg, #6ca2fb var(--volume-fill), #7f8497 var(--volume-fill)); box-shadow: inset 0 2px 2px #36435b80; }
.sound-volume-control input::-moz-range-track { height: 0.875rem; border: 1px solid #777d91; border-radius: 1rem; background: linear-gradient(90deg, #6ca2fb var(--volume-fill), #7f8497 var(--volume-fill)); box-shadow: inset 0 2px 2px #36435b80; }
.sound-volume-control input::-webkit-slider-thumb { width: 1.875rem; height: 1.875rem; margin-top: -0.5625rem; border: 0; appearance: none; background: url("data/sprites/ui/volume-handle.webp") center / contain no-repeat; }
.sound-volume-control input::-moz-range-thumb { width: 1.875rem; height: 1.875rem; border: 0; background: url("data/sprites/ui/volume-handle.webp") center / contain no-repeat; }
.sound-volume-control output { min-width: 4ch; font-variant-numeric: tabular-nums; text-align: right; }
.sound-mute { position: relative; display: grid; place-items: center; flex: none; width: 3.25rem; height: 2.75rem; padding: 0; border: 0; background: transparent; cursor: pointer; isolation: isolate; }
.sound-mute::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 14px solid transparent; border-image: url("data/sprites/ui/button-primary.webp") 22 fill / 14px / 0 stretch; }
.sound-mute[aria-pressed="true"]::before { border-image-source: url("data/sprites/ui/button-secondary.webp"); }
.sound-mute:hover::before { filter: brightness(1.08); }
.sound-mute:active::before { filter: brightness(0.9); }
.sound-mute img { width: 1.625rem; height: 1.625rem; }
.sound-report-trigger { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; }
.sound-report-trigger img { width: 1.25rem; height: 1.25rem; object-fit: contain; }
.sound-report-trigger:disabled { opacity: 0.55; cursor: default; }
.sound-report-dialog { width: min(30rem, calc(100% - 2rem)); max-height: min(90vh, 42rem); padding: 0; border: 1px solid #d8cdbd; border-radius: 0.75rem; background: #fff9ee; color: #382f27; box-shadow: 0 1rem 3rem #0005; }
.sound-report-dialog::backdrop { background: #17182099; }
.sound-report-panel { display: grid; gap: 0.5rem; margin: 0; padding: 1.25rem; }
.sound-report-panel p { margin: 0; font-weight: 700; }
.sound-report-panel label { font-size: 0.75rem; }
.sound-report-panel select, .sound-report-panel textarea { box-sizing: border-box; width: 100%; padding: 0.5rem; border: 1px solid #bba88e; border-radius: 0.375rem; background: #fff; color: #382f27; font: inherit; }
.sound-report-panel select { min-height: 2.75rem; }
.sound-report-panel select[aria-invalid="true"] { border-color: var(--error); }
.sound-report-panel textarea { min-height: 4rem; resize: vertical; }
.sound-report-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.sound-report-actions button { min-height: 2.75rem; }
.sound-report-status { margin: 0 1.5rem 0.75rem; font-size: 0.8125rem; color: var(--ok-text); }
.sound-report-dialog .sound-report-status { margin: 0 1.25rem 1.25rem; }
.sound-report-status[hidden] { display: none; }
.sound-report-status.is-error { color: var(--error); font-weight: 600; }
.sound-attempts { margin-top: var(--sp-4); }
.sound-attempts.is-empty { justify-content: center; text-align: center; }
.sound-attempts.is-empty .missed-label { display: none; }
.sound-empty { margin: 0; color: var(--muted); font-size: 0.8125rem; }
.sound-history { list-style: none; margin: 0; padding: 0; }
.sound-history li { position: relative; }
.sound-attempt-number { display: none; }
.sound-history [data-verdict="hit"] { background: var(--hit); color: var(--hit-ink); border-color: var(--hit); }
.sound-history [data-verdict="hit"] .missed-name { text-decoration: none; color: inherit; }
.sound-history [data-verdict="skip"] { border-style: dashed; }
.sound-history [data-verdict="skip"] .missed-name { text-decoration: none; }
.sound-page .result-reopen { display: block; margin-inline: auto; }
.sound-page .result-reopen[hidden] { display: none; }
.sound-round-strip { display: flex; gap: 0.75rem; list-style: none; padding: 0; margin: 1rem 0 0.5rem; }
.sound-round-strip li { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-sunken); }
.sound-round-strip img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.sound-round-strip [data-verdict="miss"] img { filter: grayscale(0.75); opacity: 0.65; }
.sound-round-strip [data-verdict="miss"]::after { content: "×"; position: absolute; right: -0.25rem; bottom: -0.25rem; padding: 0 0.2rem; border-radius: 50%; background: var(--bg-raised); font: 700 1rem / 1 var(--font-ui); color: var(--muted); }
.sound-round-strip [data-verdict="hit"] { border: 2px solid var(--hit); }
.sound-round-strip [data-verdict="hit"]::after { content: "✓"; position: absolute; right: -0.25rem; bottom: -0.25rem; border-radius: 50%; padding: 0.1rem; background: var(--hit); color: var(--hit-ink); font: 700 0.75rem / 1 var(--font-ui); }
.sound-round-strip [data-verdict="skip"] { border-style: dashed; padding: 0.625rem; }
.sound-page .guess-meta { gap: 0.5rem; }
.sound-page .sound-game-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.sound-page .sound-skip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding: 0.4rem 0.75rem; }
.sound-skip img { width: 1rem; height: 1rem; object-fit: contain; }
.sound-page .guesses-left { white-space: nowrap; }
.sound-footer-note { text-align: center; color: var(--muted); font-size: var(--step--1); }
.sound-page #guess-box { margin-top: var(--sp-6); }
.sound-page #guess-box[hidden] { display: none; }
@media (max-width: 30rem) {
  .sound-page main { padding: 0.75rem 0.5rem calc(var(--bar-h, 8rem) + 1rem); }
  .sound-player { --sound-wave-height: 4rem; }
  .sound-player-heading { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2.75rem; column-gap: 0.625rem; row-gap: 0.25rem; padding: 0.625rem 0.75rem; }
  .sound-mode-icon { grid-row: 1 / 4; }
  .sound-mode-icon { width: 2rem; height: 2rem; }
  .sound-heading-text { display: contents; }
  .sound-heading-text h1 { font-size: 1rem; }
  .sound-heading-text h1 { grid-column: 2; }
  .sound-stage { grid-column: 2; white-space: nowrap; }
  .sound-length { grid-column: 2; grid-row: 3; padding: 0; font-size: 0.75rem; }
  .sound-listening-row { grid-template-columns: 3rem minmax(0, 1fr); grid-template-areas: "timeline timeline" "play tools"; align-items: center; gap: 0.625rem 0.375rem; padding: 0.75rem; }
  .sound-player .sound-play { width: 3rem; height: 3rem; margin: 0; align-self: start; }
  .sound-timeline { height: 5.75rem; }
  .sound-player-tools { gap: 0.25rem; }
  .sound-volume-control { gap: 0.25rem; }
  .sound-volume-control label, .sound-volume-control output { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .sound-volume-slider { width: auto; max-width: none; min-width: 0; }
  .sound-volume-control input::-webkit-slider-runnable-track { height: 0.625rem; }
  .sound-volume-control input::-moz-range-track { height: 0.625rem; }
  .sound-volume-control input::-webkit-slider-thumb { width: 1.5rem; height: 1.5rem; margin-top: -0.5rem; }
  .sound-volume-control input::-moz-range-thumb { width: 1.5rem; height: 1.5rem; }
  .sound-mute { width: 2.75rem; }
  .sound-game-actions { gap: 0.25rem; }
  .sound-report-trigger { grid-column: 3; grid-row: 1 / 4; }
  .sound-report-status { margin: 0 0.75rem 0.75rem; }
  .sound-clips li { font-size: 0.625rem; }
  .sound-page .guesses-left { font-size: 0.7rem; }
  .sound-page .sound-skip { font-size: 0.7rem; padding-inline: 0.5rem; }
  .sound-round-strip { gap: 0.5rem; }
  .sound-round-strip li { width: 2.25rem; height: 2.25rem; }
}

:root[data-theme="dark"] .sound-player {
  --ink: inherit;
  --muted: oklch(80% 0.025 65);
  --sound-marker: #b6a58b;
  --sound-marker-active: #e9c68d;
  --sound-wave-played: #80b8ed;
  --sound-wave-unlocked: #d7b988;
  --sound-wave-locked: #746959;
  background: var(--bg-raised);
}
:root[data-theme="dark"] .sound-player::before { filter: var(--sprite-panel-filter); }
:root[data-theme="dark"] .sound-player .sound-play { isolation: isolate; background: transparent; filter: none; }
:root[data-theme="dark"] .sound-player .sound-play::before { content: ""; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("data/sprites/ui/button-circle-gold.webp") center / contain no-repeat; filter: brightness(.75) saturate(.9); }
:root[data-theme="dark"] .sound-player .sound-play:hover::before { filter: brightness(.82) saturate(.9); }
:root[data-theme="dark"] .sound-player .sound-play:active::before { filter: brightness(.68) saturate(.9); }
:root[data-theme="dark"] #sound-play-icon { filter: brightness(1.5); }
:root[data-theme="dark"] .sound-player-heading { border-color: var(--line); background-image: linear-gradient(#302820e8, #302820e8), url("data/sprites/scenes/concert-stage.webp"); }
:root[data-theme="dark"] .sound-clips .is-current { color: #e9c68d; }
:root[data-theme="dark"] .sound-cutoff, :root[data-theme="dark"] .sound-cutoff::before { background: #e9c68d; }
:root[data-theme="dark"] .sound-playhead { background: #80b8ed; }
:root[data-theme="dark"] .sound-report-dialog { background: var(--bg-sunken); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .sound-report-panel select, :root[data-theme="dark"] .sound-report-panel textarea { background: var(--bg-raised); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .sound-report-panel select[aria-invalid="true"] { border-color: var(--error); }

:root[data-theme-variant="forest"] .sound-player { --muted: #d4d5c8; --sound-wave-played: #90b0ce; --sound-wave-unlocked: #dec18a; --sound-wave-locked: #706d55; }
:root[data-theme-variant="forest"] .sound-player-heading { background-image: linear-gradient(#252821ed, #252821ed), url("data/sprites/scenes/concert-stage.webp"); }
:root[data-theme-variant="forest"] .sound-player .sound-play::before { filter: brightness(.72) sepia(.25) saturate(.9); }
:root[data-theme-variant="forest"] .sound-player .sound-play:hover::before { filter: brightness(.79) sepia(.25) saturate(.9); }
:root[data-theme-variant="forest"] .sound-player .sound-play:active::before { filter: brightness(.65) sepia(.25) saturate(.9); }
:root[data-theme-variant="forest"] .sound-playhead { background: #90b0ce; }