/* ===================== HIGHER / LOWER (hl-) =====================
   One file, three surfaces — wall scoped under .screen-body, phone under
   .play-body, admin under #dash. Design tokens only; gold/orange appear
   exclusively inside the brand gradients (--grad-num / --ewc-grad).
   ================================================================= */

/* ------------------------------ WALL ------------------------------ */

/* Fitted audience canvas; Arena and EWC share geometry, not decorative chrome. */
.tb-shell[data-audience-game='higherlower'] .tb-hero-title > span { height:190px; min-height:190px; display:flex; align-items:center; justify-content:flex-start; overflow-wrap:anywhere; }
.tb-shell[data-mainboard-layout='ewc26'][data-audience-game='higherlower'] .tb-hero-title > span { justify-content:center; --tb-fit-max:240; }
.hb-round { display:grid; grid-template-rows:260px 330px 210px; gap:30px; }
.hb-heading { display:flex; flex-direction:column; gap:20px; min-width:0; min-height:0; }
.hb-phase { display:flex; align-items:center; height:48px; min-height:48px; font-size:36px; line-height:1.2; }
.hb-question { margin:0; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; text-align:center; font:650 92px/1.15 var(--tb-font); letter-spacing:-.03em; overflow-wrap:anywhere; unicode-bidi:plaintext; }
.hb-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; transition:opacity .4s,transform .4s; }
.hb-round[data-phase='intro'] .hb-choices { opacity:0; transform:translateY(24px); pointer-events:none; }
.hb-choice { position:relative; display:flex; align-items:center; gap:22px; padding:40px; background:linear-gradient(135deg,var(--tb-surface-top),var(--tb-surface)); border:1px solid var(--tb-border); border-radius:28px; min-width:0; overflow:hidden; transition:opacity .5s,border-color .5s,background .5s; }
.hb-arrow { width:100px; flex:none; color:var(--tb-blue); }
.hb-arrow svg { display:block; width:100%; fill:currentColor; }
.hb-choice-detail { display:flex; flex-direction:column; gap:16px; flex:1; min-width:0; }
.hb-word { display:flex; align-items:center; height:120px; font:650 90px/1.1 var(--tb-font); overflow-wrap:anywhere; }
.hb-outcome { display:flex; align-items:center; gap:12px; height:48px; font:600 30px/1.2 var(--tb-font); }
.hb-outcome .tb-check { width:32px; height:32px; flex:none; }
.hb-share { width:160px; height:120px; flex:none; display:flex; align-items:center; justify-content:flex-end; font:650 72px/1 var(--tb-font); }
.hb-share:empty { display:none; }
.hb-share-track { position:absolute; inset:auto 0 0; height:18px; background:rgba(0,0,0,.3); }
.hb-share-track > span { display:block; height:100%; background:var(--tb-blue); transform-origin:left; transition:transform .65s; }
.hb-choice.is-correct { border-color:var(--tb-blue); background:linear-gradient(135deg,var(--tb-correct-top),var(--tb-correct-base)); }
.hb-choice.is-wrong { opacity:.5; }
.hb-ledger { display:grid; grid-template-columns:560px minmax(0,1fr) 230px; align-items:center; gap:32px; border-top:1px solid var(--tb-border); padding-top:28px; }
.hb-pot { display:flex; flex-direction:column; min-width:0; }
.hb-pot-label { height:44px; display:flex; align-items:center; font:600 32px/1.3 var(--tb-font); color:var(--tb-white); unicode-bidi:plaintext; }
.hb-pot-number { height:122px; min-width:0; display:flex; align-items:center; font:650 104px/1 var(--tb-font); font-variant-numeric:tabular-nums; }
.hb-cue { min-width:0; }
.hb-bank-cue { display:flex; align-items:center; height:58px; font:600 44px/1.2 var(--tb-font); unicode-bidi:plaintext; }
.hb-bank-cue:empty { display:none; }
.hb-round .hb-rule { height:100px; display:flex; align-items:center; font:500 32px/1.35 var(--tb-font); color:var(--tb-white); margin:12px 0 0; unicode-bidi:plaintext; }
.hb-clock { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.hb-clock-number { font:600 76px/1 var(--tb-font); font-variant-numeric:tabular-nums; }
.hb-clock-label { height:78px; width:100%; display:flex; align-items:center; justify-content:center; font:600 30px/1.3 var(--tb-font); color:var(--tb-white); unicode-bidi:plaintext; }
.tb-shell[data-mainboard-layout='ewc26'] .hb-question { font-family:var(--tb-display); letter-spacing:0; }
.tb-shell[data-mainboard-layout='ewc26'] .hb-choice { border-radius:0; background:var(--tb-white); color:var(--tb-bg); border-color:var(--tb-white); }
.tb-shell[data-mainboard-layout='ewc26'] .hb-arrow { color:var(--tb-bg); }
.tb-shell[data-mainboard-layout='ewc26'] .hb-word { font-family:var(--tb-headline); letter-spacing:0; }
.tb-shell[data-mainboard-layout='ewc26'] .hb-choice.is-correct { background:var(--tb-white); }
.tb-shell[data-mainboard-layout='ewc26'] .hb-choice.is-correct::before { content:''; position:absolute; inset:0 0 auto; height:10px; background:var(--tb-highlight); }
.tb-shell[data-mainboard-layout='ewc26'] .hb-share-track { background:var(--tb-border); }
.tb-shell[data-mainboard-layout='ewc26'] .hb-share-track > span { background:var(--tb-bg); }
.tb-shell.is-arabic :is(.hb-question,.hb-word) { font-family:var(--tb-font); }
@media(prefers-reduced-motion:reduce) { .hb-choices,.hb-choice,.hb-share-track > span { transition:none; } }

/* Intro — round tease */
.screen-body .hl-intro {
  width: 100%; max-width: 1400px;
  display: flex; flex-direction: column; align-items: center;
  gap: 3.2vh; text-align: center;
}
.screen-body .hl-intro-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: calc(11 * var(--wt)); line-height: 0.92; letter-spacing: 0.004em;
}
.screen-body .hl-intro-statement {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: calc(5 * var(--wt)); line-height: 1.02; color: var(--text);
}

/* Asking / reveal */
.screen-body .hl-screen {
  width: 100%; max-width: 1500px;
  display: flex; flex-direction: column; align-items: center; gap: 2.6vh;
}
.screen-body .hl-statement {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: calc(6.8 * var(--wt)); line-height: 1.02; text-align: center; flex: 1; color: var(--text);
}

.screen-body .hl-meta { display: flex; flex-direction: column; align-items: center; gap: 0.7vh; }
.screen-body .hl-pot { display: flex; align-items: baseline; gap: 1.4vw; }
.screen-body .hl-pot-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 .hl-pot-num {
  font-family: var(--font-display); font-weight: 900; font-size: calc(6.6 * var(--wt)); line-height: 1;
  background: var(--grad-num);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.screen-body .hl-pot-sub {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.22em; font-size: calc(3.4 * var(--wt)); color: var(--text);
  animation: hlPulse 1.6s ease-in-out infinite;
}

/* Let-it-ride finale banner — solid-dark chip; the warm gradient is CLIPPED
   into the text (gold/orange never flat) with a drop-shadow, never a
   text-shadow, which would bleed through the transparent glyphs. */
.screen-body .hl-ride-banner {
  align-self: center; padding: 1.2vh 2.6vw; border-radius: 999px;
  background: rgba(var(--tint-ink), 0.84);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.7);
}
.screen-body .hl-ride-banner-text {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: calc(4 * var(--wt)); line-height: 1; letter-spacing: 0.08em;
  background: var(--grad-num);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
  animation: hlPulse 1.6s ease-in-out infinite;
}

.screen-body .hl-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4vh; width: 100%; }
.screen-body .hl-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1vh; min-height: 30vh; padding: 3vh;
  border-radius: 16px; color: var(--ewc-off-white);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s, opacity 0.3s;
}
.screen-body .hl-arrow { font-size: calc(7.5 * var(--wt)); line-height: 1; }
.screen-body .hl-word {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: calc(6 * var(--wt)); line-height: 1; letter-spacing: 0.02em;
}
.screen-body .hl-tile.dim { opacity: 0.22; }
.screen-body .hl-tile.correct {
  box-shadow: 0 0 0 6px var(--ewc-off-white), 0 0 38px -2px var(--success), 0 12px 30px -12px rgba(0, 0, 0, 0.7);
  transform: scale(1.02);
  animation: popIn 0.4s both;
}
/* Reveal stats — the % is the headline (huge, readable from the back row); the
   raw count rides beneath it as a quieter sub-figure. */
.screen-body .hl-tile-stats { display: flex; flex-direction: column; align-items: center; gap: 0.2vh; }
.screen-body .hl-tile-pct { font-family: var(--font-display); font-weight: 900; font-size: calc(8 * var(--wt)); line-height: 0.92; letter-spacing: 0.01em; }
.screen-body .hl-tile-count { font-family: var(--font-narrow); font-weight: 700; letter-spacing: 0.06em; font-size: calc(3.8 * var(--wt)); opacity: 0.8; font-variant-numeric: tabular-nums; }
.screen-body .hl-tile-bar {
  position: absolute; left: 0; bottom: 0; height: 14px;
  background: rgba(255, 255, 255, 0.72);
  transition: width 0.5s ease;
}

/* Light (championship) wall variant */
.screen-body.light .hl-statement,
.screen-body.light .hl-intro-statement,
.screen-body.light .hl-pot-sub { color: var(--ewc-charcoal); }

@keyframes hlPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ------------------------------ PHONE ------------------------------ */

.play-body .hl-ride-chip {
  align-self: center; margin-bottom: 12px; padding: 7px 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 13px; color: var(--text);
}

/* Finale warning — the pot rides ×2 or dies. Gradient-clipped text
   (drop-shadow, never text-shadow on background-clip:text). */
.play-body .hl-final-warn {
  align-self: center; text-align: center; margin-bottom: 12px; padding: 0 8px;
  font-family: var(--font-narrow); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 15px; line-height: 1.3;
  background: var(--grad-num);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  animation: hlPulse 1.6s ease-in-out infinite;
}

.play-body .hl-answers { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.play-body .hl-btn {
  /* flex:1 already grows the two buttons to fill the stage on tall phones; a
     high min-height forced them past a short viewport and clipped the locked-in
     banner. Keep a comfortable tap floor that can still shrink. */
  flex: 1; border: none; border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px; min-height: 72px; cursor: pointer;
  color: var(--ewc-off-white);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.6);
  transition: transform 0.1s ease, opacity 0.2s, filter 0.15s ease;
}
.play-body .hl-btn:active { transform: scale(0.96); }
.play-body .hl-btn-arrow { font-size: 34px; line-height: 1; }
.play-body .hl-btn-word {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 28px; line-height: 1; letter-spacing: 0.02em;
}
.play-body .hl-btn.chosen { outline: 4px solid var(--ewc-off-white); outline-offset: -4px; }
.play-body .hl-btn.dim { opacity: 0.3; filter: grayscale(0.4); }

/* Bank-or-risk reveal card */
.play-body .hl-bank-card {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 16px; padding: 12px;
}
.play-body .hl-bank-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 38px; color: var(--success);
}
.play-body .hl-bank-potrow { display: flex; align-items: baseline; gap: 10px; }
.play-body .hl-bank-potlabel {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 14px; color: var(--text-dim);
}
.play-body .hl-bank-pot {
  font-family: var(--font-display); font-weight: 900; font-size: 54px; line-height: 1;
  background: var(--grad-num);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.play-body .hl-bank-mult {
  font-family: var(--font-display); font-weight: 900; font-size: 28px; color: var(--text);
}
.play-body .hl-bank-btn { font-size: 19px; padding: 18px; max-width: 320px; }
.play-body .hl-bank-hint { color: var(--text-dim); font-size: 14px; max-width: 300px; line-height: 1.4; }

/* ------------------------------ ADMIN ------------------------------ */

#dash .hl-live { display: flex; flex-direction: column; gap: 6px; }

/* -------- WALL contrast hardening (busy KV background) -------------------
   The global stage scrim knocks the KV back, but this game's large text sits
   directly on the render with no panel behind it. Add a dark halo so the
   hero title, statement, question and pot number read crisply on the LED
   wall. Contrast only — matches the shared-scene fix; no layout/colour/size
   changes, wall-only (.screen-body scoped). */
.screen-body .hl-intro-statement,
.screen-body .hl-statement {
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7);
}

/* Gradient-clipped text (transparent fill): a text-shadow bleeds THROUGH the
   glyphs and muddies the gradient dark — use drop-shadow (composites the result)
   so the brand gradient stays bright. */
.screen-body .hl-intro-title { filter: drop-shadow(0 3px 16px rgba(0, 0, 0, 0.55)); }
.screen-body .hl-pot-num { text-shadow: none; }





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