/* ===================== GUESS THE SOUND (sd-) =====================
   A mystery game sound plays over the arena speakers (from the wall page);
   the crowd guesses on their phones. Scopes: .screen-body (wall),
   .play-body (phone), #dash (admin). Tokens only — gold/orange appear
   exclusively inside gradients (the equalizer is --grad-warm energy). */

/* ------------------------- Big screen (LED wall) ------------------------- */
.screen-body .sd-audio { display: none; }

.screen-body .sd-listen-block {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2.6vh;
  min-width: 0;
}
.screen-body .sd-listen {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: calc(8 * var(--wt)); line-height: 0.92; letter-spacing: 0.01em;
  color: var(--text); text-align: center;
}

/* Equalizer — the warm energy gradient dancing to the mystery sound.
   (Energy meter use — the one sanctioned home for orange.) */
.screen-body .sd-eq {
  display: flex; align-items: flex-end; gap: 0.5vw;
  height: 13vh; width: min(52vw, 980px);
}
.screen-body .sd-eq span {
  flex: 1; height: 100%; border-radius: 4px;
  background: var(--grad-warm);
  transform-origin: bottom; transform: scaleY(0.16);
  animation: sdEq 0.8s ease-in-out infinite;
  opacity: 0.92;
  box-shadow: 0 0 20px -8px var(--orange-glow);
}
@keyframes sdEq {
  0%, 100% { transform: scaleY(0.16); }
  50% { transform: scaleY(1); }
}

/* Difficulty tier pill — quiet off-white page furniture. */
.screen-body .sd-tier {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: calc(3.5 * var(--wt)); color: var(--text);
  padding: 0.9vh 2vh; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
}
.screen-body .sd-tier-chip {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: calc(3.5 * var(--wt)); color: var(--text);
  padding: 0.9vh 2.2vh; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
}

/* Intro tease */
.screen-body .sd-intro-ear { font-size: calc(9.5 * var(--wt)); line-height: 1; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.5)); }

/* Reveal: the answer pops in the gentle number gradient (host-answer pattern). */
.screen-body .sd-reveal-head { display: flex; flex-direction: column; align-items: center; gap: 1.4vh; text-align: center; }
.screen-body .sd-reveal-label {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3em; font-size: calc(3.5 * var(--wt)); color: var(--text-dim);
}
.screen-body .sd-answer {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: calc(6.6 * var(--wt)); line-height: 0.96;
  background: var(--grad-num); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: popIn 0.4s both;
}

/* Autoplay-policy fallback (dev browser; OBS/kiosk autoplay fine). */
.screen-body .sd-unlock {
  position: absolute; left: 50%; top: -1.2vh; transform: translateX(-50%);
  z-index: 5; cursor: pointer;
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: calc(3.5 * var(--wt)); color: var(--text);
  background: rgba(var(--tint-ink), 0.92); border: 1px solid var(--line);
  border-radius: 999px; padding: 1.2vh 2.6vh;
  box-shadow: 0 0 30px -8px var(--orange-glow);
  animation: popIn 0.3s both;
}
.screen-body .sd-unlock:hover { border-color: rgba(247, 247, 247, 0.5); }

/* Light (championship) variant keeps everything legible on off-white. */
.screen-body.light .sd-listen { color: var(--ewc-charcoal); }
.screen-body.light .sd-tier,
.screen-body.light .sd-tier-chip { color: var(--ewc-charcoal); background: rgba(var(--tint-on-accent), 0.05); border-color: rgba(var(--tint-on-accent), 0.2); }

/* ------------------------------ Phone (play) ----------------------------- */
.play-body .sd-play-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 12px; padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  color: var(--text-dim); font-weight: 600; font-size: 14px; text-align: center;
  animation: fadeUp 0.35s both;
}

/* ------------------------------ Admin (#dash) ---------------------------- */
#dash .sd-round {
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--surface-2);
  padding: 14px; margin-bottom: 12px;
}
/* Builder toolbar sits directly under the last round card — the card's own
   12px margin-bottom provides the gap (no ad-hoc top margin).
   Dolnego marginesu tez NIE ma: pudelko konfiguracji domyka sie samo swoja
   rynna (16 px paddingu + 1 px ramki = 17 px pod ostatnim wierszem, tak konczy
   sie 21 z 23 pudelek w konsoli). Kiedy toolbar dokladal do tego wlasne 16 px,
   ta jedna sekcja miala pod trescia 33 px pustej tasmy — dwa razy szersza niz
   sasiadka „Content sets" w tej samej kolumnie. Zmierzone: 33 → 17 px. */
#dash #sdRoundsBox + .row-inline { margin: 0; }
#dash .sd-round-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#dash .sd-round-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 15px; letter-spacing: 0.03em; color: var(--text);
}
#dash .sd-spacer { flex: 1; }
#dash .sd-tier-wrap { width: 190px; flex-shrink: 0; }

#dash .sd-audio-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
#dash .sd-audio-row input[type="text"] { flex: 1; min-width: 220px; width: auto; }
#dash .sd-preview { width: 100%; height: 36px; margin: 0 0 10px; color-scheme: dark; border-radius: var(--radius-sm); }
#dash .sd-preview[hidden] { display: none; }

#dash .sd-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 980px) { #dash .sd-opts { grid-template-columns: 1fr; } }
#dash .sd-opt { display: flex; align-items: center; gap: 8px; }
#dash .sd-opt input[type="text"] { flex: 1; width: auto; }

#dash .sd-live .live-q { display: flex; align-items: center; gap: 8px; }

/* ---------------- Wall contrast hardening (busy bg3 KV) -----------------
   Additive, .screen-body-scoped. The global stage scrim knocks the KV back,
   but these text-holding tier pills are translucent (0.4) and the panel-less
   LISTEN title + reveal answer float straight on the render — lift them so
   they read as crisply as the shared scenes. Contrast only; no layout/logic. */
.screen-body .sd-tier,
.screen-body .sd-tier-chip { background: rgba(var(--tint-ink), 0.9); }

.screen-body .sd-listen { text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7); }
.screen-body .sd-reveal-head { text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7); }
/* the reveal-head shadow must NOT inherit onto the gradient-clipped answer — it
   bleeds through background-clip:text glyphs and muddies the gradient. */
.screen-body .sd-answer { text-shadow: none; }

/* Light (championship) render is off-white — no dark shadow needed there. */
.screen-body.light .sd-listen,
.screen-body.light .sd-reveal-head { text-shadow: none; }

/* The equaliser is the hero: it is the ONLY thing telling the arena a sound
   is playing, and it was a 13vh strip in a scene leaving ~22vh of stage
   unused above and below. */
.screen-body .sd-eq { height: 19vh; }



/* Operator round control and server-backed history. */
#dash #tab-sound .sd-op { display: grid; gap: 14px; min-width: 0; font: 400 12px/1.5 var(--font-body); }
#dash #tab-sound .sd-op-flow { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 6px; }
#dash #tab-sound .sd-op-flow li { padding: 4px 9px; border-radius: 5px; background: var(--surface-2); color: var(--text-faint); }
#dash #tab-sound .sd-op-flow li.is-current { color: var(--text); background: var(--surface-3); box-shadow: inset 0 -2px var(--gold); }
#dash #tab-sound .sd-op-flow li.is-done { color: var(--text-dim); }
#dash #tab-sound .sd-op-current { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; padding: 14px; background: var(--surface); min-width: 0; }
#dash #tab-sound .sd-op-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
#dash #tab-sound .sd-op-heading span { color: var(--text-dim); }
#dash #tab-sound .sd-op-question { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; margin-bottom: 10px; white-space: pre-wrap; }
#dash #tab-sound .sd-op-body { display: grid; gap: 12px; }
#dash #tab-sound .sd-op-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: 10px 16px; margin: 0; padding: 0; }
#dash #tab-sound .sd-op-metrics dt { font-size: 11px; color: var(--text-faint); }
#dash #tab-sound .sd-op-metrics dd { margin: 3px 0 0; color: var(--text); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
#dash #tab-sound .sd-op-split { display: grid; gap: 8px; }
#dash #tab-sound .sd-op-option-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 3px; }
#dash #tab-sound .sd-op-option-head span { min-width: 0; overflow-wrap: anywhere; }
#dash #tab-sound .sd-op-option-head b { flex: none; font-weight: 450; font-variant-numeric: tabular-nums; color: var(--text-dim); }
#dash #tab-sound .sd-op-option.is-correct .sd-op-option-head span { color: var(--success); }
#dash #tab-sound .sd-op-track { height: 5px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
#dash #tab-sound .sd-op-track > span { display: block; height: 100%; background: var(--gold); transition: width 160ms linear; }
#dash #tab-sound .sd-op-progress { display: grid; gap: 5px; color: var(--text-dim); }
#dash #tab-sound .sd-op-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#dash #tab-sound .sd-op-actions .btn { height: auto; min-height: 34px; white-space: normal; text-align: left; }
#dash #tab-sound .sd-op-history { min-width: 0; border-top: 1px solid var(--line); padding-top: 12px; }
#dash #tab-sound .sd-op-history h4 { margin: 0 0 8px; font: 500 12px/1.5 var(--font-body); color: var(--text-dim); }
#dash #tab-sound .sd-op-empty { margin: 0; color: var(--text-faint); }
#dash #tab-sound .sd-op-round { padding: 0; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
#dash #tab-sound .sd-op-round summary { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; cursor: pointer; }
#dash #tab-sound .sd-op-round summary b { font-weight: 500; flex: 1; }
#dash #tab-sound .sd-op-round summary span { color: var(--text-faint); }
#dash #tab-sound .sd-op-round summary::before { content: '›'; color: var(--text-faint); }
#dash #tab-sound .sd-op-round[open] summary::before { content: '⌄'; }
#dash #tab-sound .sd-op-round summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#dash #tab-sound .sd-op-round > .sd-op-body { padding-bottom: 14px; }
#dash #tab-sound .sd-op-history-question { margin-bottom: 10px; color: var(--text-dim); overflow-wrap: anywhere; }
#dash #tab-sound .sd-op-image { display: block; width: 80px; height: 64px; object-fit: contain; margin-bottom: 10px; border-radius: 6px; background: var(--bg); }
#dash #tab-sound .sd-op-media { display: block; margin-bottom: 10px; color: var(--text-dim); }
#dash #tab-sound .sd-op-survivors { margin: 0; }
#dash #tab-sound .sd-op-survivors figcaption { margin-bottom: 8px; color: var(--text-dim); }
#dash #tab-sound .sd-op-chart { display: flex; align-items: end; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
#dash #tab-sound .sd-op-chart > div { display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 3px; min-width: 22px; flex: 1; }
#dash #tab-sound .sd-op-chart span { width: 100%; max-width: 28px; background: var(--gold); border-radius: 3px 3px 0 0; }
#dash #tab-sound .sd-op-chart b, #dash #tab-sound .sd-op-chart small { font-size: 10px; font-weight: 400; color: var(--text-faint); }
@media (prefers-reduced-motion: reduce) { #dash #tab-sound .sd-op-track > span { transition: none; } }

/* Operator Sound workspace: shared lfs-* components own the layout. */
#dash #tab-sound .sd-empty-content { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
#dash #tab-sound .sd-empty-content p { margin:0; }
#dash #tab-sound .sd-workspace-audio { display:none; }
#dash #tab-sound .sd-live-audio { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 0; }
#dash #tab-sound .sd-player-tools.sd-audience-volume { min-width:0; flex-basis:auto; }
#dash #tab-sound .sd-playback-note { margin:18px 0 6px; }
#dash #tab-sound .sd-final-copy { margin:18px 0; }
#dash #tab-sound [data-lfs-value="playback"] { font-size:19px; line-height:1.3; }
#dash #tab-sound .media-title { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
#dash #tab-sound .media-title > .lfs-eyebrow { flex-basis:100%; }
#dash #tab-sound .lfs-close { width:36px; height:36px; min-width:36px; padding:0; }