/* ============ GUESS THE PLAY ('clip') — styles for all three surfaces ============
   Prefix: cl- · wall scoped under .screen-body · phone under .play-body ·
   admin under #dash. Tokens only — gold/orange appear exclusively inside the
   brand gradients (progress fills use --grad-warm); everything else off-white. */

/* ================================ WALL ================================ */

.screen-body .cl-head { display: flex; align-items: center; gap: 2vw; }
.screen-body .cl-clip-count {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: calc(3.1 * var(--wt)); color: var(--text); opacity: 0.9;
}

/* ---- Watch phase: near-full-stage video ---- */
.screen-body .cl-watch {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 2vh;
  min-height: 0;
}
.screen-body .cl-video-shell {
  position: relative; flex: 1; width: 100%; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 7, 0.9);                    /* dark letterbox */
  border: 1px solid var(--line-soft);
  box-shadow: 0 26px 80px -30px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  --notch: 3.2vh;                                     /* hero-sized cut corner */
}
.screen-body .cl-video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Warm watch-window progress (energy gradient — meters only, per brand). */
.screen-body .cl-progress {
  width: min(1100px, 82%); height: 0.9vh; border-radius: 999px;
  background: rgba(247, 247, 247, 0.12); overflow: hidden; flex-shrink: 0;
}
.screen-body .cl-progress-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: var(--grad-warm);
  transition: width 0.25s linear;
}

/* Autoplay-with-sound fallback pill. */
.screen-body .cl-sound-pill {
  position: absolute; right: 2vh; bottom: 2vh; z-index: 3;
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: calc(2.9 * var(--wt)); color: var(--text);
  background: rgba(var(--tint-ink), 0.85); border: 1px solid rgba(247, 247, 247, 0.4);
  border-radius: 999px; padding: 1vh 2vh; cursor: pointer;
  animation: popIn 0.35s both;
}
.screen-body .cl-sound-pill:hover { background: rgba(var(--tint-on-accent), 0.95); }

/* ---- Freeze / payoff layout: frozen frame left, question + options right ---- */
.screen-body .cl-quiz {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.4vw;
  width: 100%; height: 100%; min-height: 0; align-items: stretch;
}
.screen-body .cl-quiz-left { display: flex; flex-direction: column; gap: 1.8vh; min-height: 0; }
.screen-body .cl-quiz-right {
  display: flex; flex-direction: column; gap: 2.4vh;
  justify-content: center; min-width: 0;
}
.screen-body .cl-q-top { display: flex; align-items: center; gap: 1.4vw; }
/* The shared timer ring is absolute left:0 by default — inside this UNPOSITIONED
   flex row it escapes to the stage's left edge and lands ON the video. Make it
   a normal in-flow flex item beside the question (the pixel pattern). */
/* relative (NOT static): stays in flow AND remains the containing block for the
   absolutely-positioned .ring-num inside — static would let the number escape. */
.screen-body .cl-q-top .q-ring { position: relative; left: auto; top: auto; transform: none; flex-shrink: 0; }
.screen-body .cl-q-text {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: calc(4.4 * var(--wt)); line-height: 1.02; color: var(--text); flex: 1;
}

/* The STOP moment — white flash + FREEZE stamp over the key frame. */
.screen-body .cl-flash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(247, 247, 247, 0.9);
  animation: clFlash 0.55s ease-out forwards;
}
@keyframes clFlash { from { opacity: 0.9; } to { opacity: 0; } }
.screen-body .cl-freeze-stamp {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4vh;
  animation: clStampIn 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both,
             clStampOut 0.6s ease 2.6s forwards;   /* pops, then clears the frame */
}
.screen-body .cl-freeze-word {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: calc(10.5 * var(--wt)); line-height: 0.9; letter-spacing: 0.02em; color: var(--text);
  padding: 1.2vh 3.4vh; border: 0.6vh solid var(--text);
  background: rgba(var(--tint-ink), 0.55);
  transform: rotate(-3deg);
  text-shadow: 0 12px 55px rgba(0, 0, 0, 0.75);
}
.screen-body .cl-freeze-sub {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: calc(2.9 * var(--wt)); color: var(--text);
  background: rgba(var(--tint-ink), 0.6); padding: 0.8vh 1.8vh;
  transform: rotate(-3deg); max-width: 82%; text-align: center;
}
@keyframes clStampIn {
  0% { opacity: 0; transform: scale(1.8); }
  55% { opacity: 1; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes clStampOut { to { opacity: 0; } }

/* Option tiles (crowd colours from OPTION_COLORS, set inline). */
.screen-body .cl-options { display: flex; flex-direction: column; gap: 1.8vh; width: 100%; }
.screen-body .cl-option {
  display: flex; align-items: center; gap: 18px;
  padding: 2.3vh 2.6vh; border-radius: 14px;
  font-size: calc(3.4 * var(--wt)); font-weight: 700; color: var(--ewc-off-white);
  position: relative; overflow: hidden;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s, opacity 0.3s;
  animation: fadeUp 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.screen-body .cl-option .cl-shape { font-size: calc(3.9 * var(--wt)); }
.screen-body .cl-option .cl-opt-text { flex: 1; min-width: 0; }
.screen-body .cl-option .cl-count { font-family: var(--font-display); font-weight: 900; font-size: calc(3.4 * var(--wt)); opacity: 0.95; }
.screen-body .cl-option .cl-bar {
  position: absolute; left: 0; bottom: 0; height: 6px;
  background: rgba(247, 247, 247, 0.6); transition: width 0.5s ease;
}
.screen-body .cl-option.dim { opacity: 0.25; }
/* Milky ring + green glow so the correct tile reads even when it's the green option. */
.screen-body .cl-option.correct {
  box-shadow: 0 0 0 5px var(--ewc-off-white), 0 0 36px -2px var(--success), 0 12px 30px -12px rgba(0, 0, 0, 0.7);
  transform: scale(1.02);
}
.screen-body .cl-answered { color: var(--text-dim); font-size: calc(2.9 * var(--wt)); font-weight: 600; }
.screen-body .cl-answered b { color: var(--text); font-family: var(--font-display); font-weight: 900; font-size: calc(3.2 * var(--wt)); }

/* Light (championship) variant keeps legibility. */
.screen-body.light .cl-q-text, .screen-body.light .cl-clip-count { color: var(--ewc-charcoal); }
.screen-body.light .cl-answered b { color: var(--ewc-charcoal); }

/* ================================ PHONE ================================ */

.play-body .cl-eye-icon { font-size: 56px; line-height: 1; animation: clPeek 2.6s ease-in-out infinite; }
@keyframes clPeek {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Mini watch-window progress under the "eyes on the big screen" card. */
.play-body .cl-mini {
  width: 78%; max-width: 300px; height: 8px; border-radius: 999px;
  background: var(--surface-3); overflow: hidden; position: relative;
}
.play-body .cl-mini-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: var(--grad-warm);
  transition: width 0.25s linear;
}
/* Manual flow: no deadline — a drifting shimmer instead of a fill. */
.play-body .cl-mini.hold .cl-mini-fill { width: 38%; animation: clHold 1.5s ease-in-out infinite alternate; }
@keyframes clHold {
  from { transform: translateX(-40%); }
  to { transform: translateX(210%); }
}

/* ================================ ADMIN ================================ */

#dash .cl-round {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
/* Gap between the rounds list (cards, or the dashed empty state) and the
   Add-clip/Load-sample toolbar right below it — they touched with 0 clips. */
#dash #clRoundsList { margin-bottom: 12px; }
#dash .cl-round-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#dash .cl-round-num {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 16px; letter-spacing: 0.04em; color: var(--text);
}
#dash .cl-round-spacer { flex: 1; }
#dash .cl-video-row { display: flex; gap: 8px; align-items: stretch; }
#dash .cl-video-row input { flex: 1; min-width: 0; }
#dash .cl-video-row .btn { flex-shrink: 0; white-space: nowrap; }
#dash .cl-opts { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
#dash .cl-opt-row { display: flex; align-items: center; gap: 10px; width: 100%; }
/* Size/paint comes from the theme's custom radios (18px circle; green when picked via admin.css). */
#dash .cl-opt-row input[type="radio"] { flex-shrink: 0; margin: 0; cursor: pointer; }
#dash .cl-opt-row input[type="text"] { flex: 1; min-width: 0; }
#dash .cl-opt-shape { width: 20px; text-align: center; color: var(--text-dim); flex-shrink: 0; }
#dash .cl-live .live-q { margin-bottom: 6px; }

/* ===================== WALL CONTRAST HARDENING (busy KV) ===================== */
/* Big GEAR titles / labels that sit directly on the dramatic key visual with no
   panel behind them read weakly over its warm detail. The stage scrim knocks the
   KV back, but these standalone text elements still need a dark halo. Append-only,
   .screen-body-scoped — contrast only, no layout/size/colour change. Panels/tiles
   here are already solid (video shell 0.9, option fills opaque) so they're left. */
.screen-body .cl-q-text,
.screen-body .cl-clip-count {
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7);
}
.screen-body .cl-answered {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* ---------- Question + counter (audit) ----------
   The question read as a caption over its own answers (4.4vh against 3.4vh
   tiles). Free vertically: .cl-q-top is a centred flex row that is not what
   sets the column height. The locked-in counter hung flush left against the
   tile edge while the same string is optically centred in every other
   module. */
.screen-body .cl-q-text { font-size: calc(5.4 * var(--wt)); }
.screen-body .cl-quiz-right .cl-answered { text-align: center; }



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

/* Clip-specific data in the shared operator workspace. Media stays on Mainboard. */
#dash #tab-clip .lfs-question-empty { display:block; min-height:0; padding:0; }
#dash #tab-clip .lfs-question-empty h2 { margin-top:6px; font-size:20px; }
#dash #tab-clip .lfs-empty-copy > p { margin-bottom:16px; }
#dash #tab-clip .cl-media-state { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:12px; margin:16px 0; border:1px solid var(--line); border-radius:6px; background:var(--bg); font-size:12px; }
#dash #tab-clip .cl-media-state i { color:var(--text-dim); }
#dash #tab-clip .cl-media-state strong { font-weight:550; }
#dash #tab-clip .cl-phase-flow { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:18px 0 0; font-size:11px; color:var(--text-dim); }
#dash #tab-clip .cl-phase-flow li { padding:7px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); }
#dash #tab-clip .cl-phase-flow .is-current { color:var(--text); background:var(--surface-3); border-color:var(--line-strong); }
#dash #tab-clip .lfs-round-actions { flex-wrap:wrap; }
#dash #tab-clip .lfs-round-link { overflow-wrap:anywhere; }
#dash #tab-clip .media-title { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
#dash #tab-clip .media-title > .lfs-eyebrow { flex-basis:100%; }
#dash #tab-clip .lfs-close { width:36px; height:36px; min-width:36px; padding:0; }