/* TriviaRush Live 4.1.1 — TikTok-first Broadcast V2 shell.
   One stable 1080x1920 composition: compact music, global phase header,
   3/4-width game canvas, data-driven gift rail, readable energy strip,
   and an intentionally empty lower chat region. */

:root{
  --tr-shell-x:40px;
  --tr-shell-w:1000px;
  --tr-music-y:60px;
  --tr-music-h:170px;
  --tr-phase-y:250px;
  --tr-phase-h:84px;
  --tr-game-y:360px;
  --tr-game-w:740px;
  --tr-gift-x:800px;
  --tr-gift-w:240px;
  --tr-game-h:640px;
  --tr-scene-scale:.7613168724; /* 740 / legacy 972 */
  --tr-scene-scale-expanded:.82;
  --tr-energy-y:1110px;
  --tr-energy-h:82px;
  --tr-chat-clear-y:1210px;
}

/* Header: now-playing only. Viewer queue remains operational in Mission Control,
   but the broadcast header is deliberately light and phone-readable. */
#broadcast-stage .broadcast-header-music{
  left:var(--tr-shell-x)!important;
  top:var(--tr-music-y)!important;
  width:var(--tr-shell-w)!important;
  height:var(--tr-music-h)!important;
  display:block!important;
  border-radius:28px!important;
  border:2px solid rgba(56,236,146,.38)!important;
  background:linear-gradient(145deg,rgba(7,23,47,.97),rgba(6,13,31,.98))!important;
  box-shadow:0 0 28px rgba(56,236,146,.08),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#broadcast-stage .broadcast-header-music>.music-now{
  width:100%;height:100%;padding:26px 30px 22px!important;border:0!important;
  background:radial-gradient(circle at 16% 22%,rgba(39,230,255,.09),transparent 42%)!important;
}
#broadcast-stage .broadcast-header-music>.music-queue{display:none!important}
#broadcast-stage .music-now-kicker{font-size:18px!important}
#broadcast-stage .music-now-title{font-size:46px!important;margin-top:8px!important}
#broadcast-stage .music-now-title.is-long{font-size:40px!important}
#broadcast-stage .music-now-title.is-very-long{font-size:34px!important}
#broadcast-stage .music-now-meta{font-size:18px!important;margin-top:7px!important}

/* Runtime 4.1.11 — Audio Trivia header containment hotfix.
   Legacy Audio Trivia presentation CSS used a 122px broadcast header before the
   TikTok-first shell existed. That selector was more specific than the global
   shell rule and could collapse the 170px Now Playing card, clipping the title
   and metadata at the top of Audio Trivia. Keep Audio Trivia on the canonical
   music-header geometry just like every other game type. */
#broadcast-stage[data-scene="AUDIO_TRIVIA"] .broadcast-header-music{
  height:var(--tr-music-h)!important;
  min-height:var(--tr-music-h)!important;
  max-height:var(--tr-music-h)!important;
}
#broadcast-stage[data-scene="AUDIO_TRIVIA"] .broadcast-header-music>.music-now{
  height:100%!important;
  padding:26px 30px 22px!important;
}

/* New full-width game/phase header. */
.broadcast-game-header{
  position:absolute;left:var(--tr-shell-x);top:var(--tr-phase-y);width:var(--tr-shell-w);height:var(--tr-phase-h);
  z-index:24;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) auto;align-items:center;gap:20px;
  padding:0 24px;border:2px solid rgba(56,236,146,.52);border-radius:24px;
  background:linear-gradient(100deg,rgba(5,43,51,.96),rgba(8,20,45,.97));
  box-shadow:0 10px 28px rgba(0,0,0,.22),0 0 25px rgba(56,236,146,.08);overflow:hidden;
}
.broadcast-game-header::before{content:"";position:absolute;inset:0 auto 0 0;width:7px;background:linear-gradient(180deg,#38ec92,#27e6ff)}
.broadcast-game-title{min-width:0;color:#45efa0;font-size:35px;font-weight:950;line-height:1;letter-spacing:.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.broadcast-game-progress{min-width:0;color:#f8fbff;font-size:23px;font-weight:900;line-height:1;white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis}
.broadcast-game-state{min-width:156px;height:54px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 12px 0 16px;border:1px solid rgba(255,212,91,.62);border-radius:18px;color:#ffd45b;background:rgba(255,212,91,.07);font-size:18px;font-weight:950;line-height:1;white-space:nowrap}
.broadcast-game-state[data-tone="open"]{color:#56f1a8;border-color:rgba(86,241,168,.56);background:rgba(86,241,168,.07)}
.broadcast-game-state[data-tone="warning"]{color:#ffe45f;border-color:rgba(255,228,95,.6);background:rgba(255,228,95,.08)}
.broadcast-game-state[data-tone="final"]{color:#ff9b42;border-color:rgba(255,155,66,.68);background:rgba(255,155,66,.1)}
.broadcast-game-state[data-tone="reveal"]{color:#77f4b2;border-color:rgba(119,244,178,.58);background:rgba(119,244,178,.08)}

.broadcast-game-timer{--timer-angle:360deg;position:relative;width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(currentColor var(--timer-angle),rgba(255,255,255,.12) 0);font-size:17px;font-weight:1000;font-variant-numeric:tabular-nums;isolation:isolate}
.broadcast-game-timer::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#08162b;z-index:-1}
.broadcast-game-state[data-countdown-state="final"] .broadcast-game-timer{color:#ff5968;animation:tr-final-countdown-pulse .72s ease-in-out infinite alternate}
.broadcast-game-state[data-countdown-state="warning"] .broadcast-game-timer{color:#ffe45f}
.broadcast-game-state[data-countdown-state="open"] .broadcast-game-timer{color:#56f1a8}
.broadcast-game-state[data-countdown-state="final"]{color:#ff5968!important;border-color:rgba(255,89,104,.72)!important;background:rgba(255,89,104,.1)!important}
.broadcast-game-state[data-countdown-state="warning"]{color:#ffe45f!important;border-color:rgba(255,228,95,.66)!important;background:rgba(255,228,95,.08)!important}
@keyframes tr-final-countdown-pulse{to{transform:scale(1.08);filter:drop-shadow(0 0 9px rgba(255,89,104,.65))}}

/* Persistent game-card background, behind legacy scene renderers. */
.broadcast-game-frame{
  position:absolute;left:var(--tr-shell-x);top:var(--tr-game-y);width:var(--tr-game-w);height:var(--tr-game-h);z-index:7;
  border:2px solid rgba(56,236,146,.44);border-radius:30px;
  background:radial-gradient(circle at 50% 18%,rgba(39,230,255,.08),transparent 48%),linear-gradient(155deg,rgba(7,29,44,.72),rgba(5,13,31,.76));
  box-shadow:0 14px 36px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035);pointer-events:none;
}

/* Category lane. Game scenes already reserve the legacy metadata row at the
   top of their fitted canvas; Runtime 4.1.1 uses that otherwise-empty lane for
   the real question category. This keeps category copy physically above the
   question/answers and, with a higher stacking level, prevents answer cards from
   painting over it during scene-entry choreography. */
.broadcast-category-banner{
  position:absolute;left:var(--tr-shell-x);top:calc(var(--tr-game-y) + 5px);width:var(--tr-game-w);height:39px;z-index:28;
  display:flex;align-items:center;gap:14px;padding:0 18px;border:1px solid rgba(255,212,91,.34);border-radius:14px;
  background:linear-gradient(90deg,rgba(39,30,17,.95),rgba(8,20,41,.97));
  box-shadow:0 0 18px rgba(255,212,91,.09),inset 0 1px 0 rgba(255,255,255,.035);
  opacity:0;transform:translateY(26px);pointer-events:none;overflow:hidden;
  transition:opacity 440ms ease 280ms,transform 620ms var(--ease-enter) 280ms;
}
.broadcast-category-banner[hidden]{display:none!important}
.broadcast-category-banner.is-visible{opacity:1;transform:none}
.broadcast-category-kicker{flex:0 0 auto;color:#a8b7d8;font-size:15px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.broadcast-category-value{min-width:0;display:block;color:var(--color-gold);font-size:22px;font-weight:950;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#broadcast-stage.reduced-motion .broadcast-category-banner,.reduce-motion .broadcast-category-banner{transition:none!important}
@media (prefers-reduced-motion:reduce){.broadcast-category-banner{transition:none!important}}

/* Existing game renderers were authored on a 972x778 canvas. Runtime 4.1.1
   mounts each renderer inside a neutral fit wrapper so scaling never competes
   with a game's own transforms/animations. The renderer's internal geometry and
   text-fitting logic remain untouched. */
#broadcast-stage .broadcast-scene-fit-root{
  position:absolute;left:var(--tr-shell-x);top:var(--tr-game-y);width:972px;height:778px;
  transform:scale(var(--tr-scene-scale));transform-origin:top left;z-index:10;overflow:visible;
}
#broadcast-stage .broadcast-scene-fit-root>*{left:0!important;top:0!important}

/* Preserve the legacy show-package/premium scene choreography on the nested
   renderer while keeping scale on the neutral wrapper. */
#broadcast-stage[data-phase-family="warning"] .broadcast-scene-fit-root>section{filter:drop-shadow(0 0 20px rgba(255,217,92,.09))}
#broadcast-stage[data-phase-family="final"] .broadcast-scene-fit-root>section{filter:drop-shadow(0 0 28px rgba(255,50,80,.2))}
#broadcast-stage .broadcast-scene-fit-root>section{animation:show-scene-enter .52s cubic-bezier(.22,1,.36,1) both}
#broadcast-stage.premium-scene-enter .broadcast-scene-fit-root>section{animation:premium-scene-enter .62s cubic-bezier(.2,.85,.2,1) both}
#broadcast-stage.premium-reveal-impact .broadcast-scene-fit-root>section{animation:premium-reveal-impact 1.55s cubic-bezier(.18,.82,.22,1) both}
#broadcast-stage.reduced-motion .broadcast-scene-fit-root>section{animation:none!important}
#broadcast-stage.high-readability .broadcast-scene-fit-root>section{filter:none!important}

/* Hide repeated in-scene metadata; the global header now owns this information.
   Their original vertical space is intentionally retained to avoid destabilizing
   each game's battle-tested internal geometry. */
#broadcast-stage :is(.classic-meta-row,.free-response-meta-row,.word-scramble-meta-row,.missing-letters-meta-row,.rapid-recall-meta,.category-blitz-meta,.word-ladder-meta,.hidden-word-meta,.who-am-i-meta,.password-meta,.finish-phrase-meta,.before-after-meta,.odd-one-out-meta,.tot-meta-row,.hl-meta-row,.cw-meta-row,.wager-meta-row,.audio-trivia-meta-row,.image-trivia-meta-row,.spot-meta,.word-rush-meta-row,.reveal-headline){visibility:hidden!important}

/* Old bottom production UI is audience-hostile on a phone. */
#broadcast-stage .host-support-panel,#broadcast-stage .status-rail{display:none!important}

/* Data-driven public gift rail. No heading: the cards themselves explain the action. */
.gift-action-rail{
  position:absolute;left:var(--tr-gift-x);top:var(--tr-game-y);width:var(--tr-gift-w);height:var(--tr-game-h);z-index:25;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;
}
.gift-action-rail[hidden]{display:none!important}
.gift-action-card{
  min-height:108px;display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:11px;padding:12px 12px 12px 10px;
  border:1.5px solid rgba(56,236,146,.42);border-radius:20px;background:linear-gradient(145deg,rgba(7,27,49,.96),rgba(4,14,32,.98));
  box-shadow:0 9px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.035);overflow:hidden;
}
.gift-action-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:rgba(56,236,146,.09);font-size:38px;line-height:1;filter:drop-shadow(0 0 8px rgba(56,236,146,.16))}
.gift-action-image{width:100%;height:100%;display:block;object-fit:contain;border-radius:12px}
.gift-action-copy{min-width:0;display:grid;gap:5px;align-content:center}
.gift-action-name{color:#fff;font-size:19px;font-weight:950;line-height:1.03;overflow-wrap:anywhere}
.gift-action-effect{color:#45efa0;font-size:16px;font-weight:850;line-height:1.08;overflow-wrap:anywhere}
.gift-action-rule{color:#91a5ca;font-size:12px;font-weight:800;line-height:1.05}
#broadcast-stage[data-gift-rail="hidden"] .broadcast-game-frame{width:var(--tr-shell-w)}
#broadcast-stage[data-gift-rail="hidden"] .broadcast-scene-fit-root{left:141px;transform:scale(var(--tr-scene-scale-expanded))}

/* Audience Energy: slim, readable, and in its own lane. */
#broadcast-stage .engagement-energy,
#broadcast-stage[data-scene="AUDIO_TRIVIA"] .engagement-energy,
#broadcast-stage[data-scene="ODD_ONE_OUT"] .engagement-energy,
#broadcast-stage[data-scene="STANDBY"] .engagement-energy,
#broadcast-stage[data-scene="SAFE_STANDBY"] .engagement-energy,
#broadcast-stage[data-scene="LOBBY"] .engagement-energy,
#broadcast-stage[data-scene="ROUND_INTRO"] .engagement-energy{
  left:var(--tr-shell-x)!important;top:var(--tr-energy-y)!important;width:var(--tr-shell-w)!important;height:var(--tr-energy-h)!important;
  display:grid!important;grid-template-columns:220px minmax(0,1fr) 150px!important;gap:18px!important;padding:0 22px!important;
  border:2px solid rgba(187,82,255,.48)!important;border-radius:22px!important;
  background:linear-gradient(100deg,rgba(21,15,54,.95),rgba(34,13,51,.94))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28),0 0 24px rgba(187,82,255,.1)!important;opacity:1!important;z-index:30!important;
}
#broadcast-stage .engagement-energy-label{font-size:22px!important;gap:9px!important;color:#fff!important;letter-spacing:.055em!important}
#broadcast-stage .engagement-energy-label b{font-size:30px!important;color:#ff73c6!important}
#broadcast-stage .engagement-energy-track{height:16px!important;border:1px solid rgba(190,120,255,.28);background:rgba(255,255,255,.1)!important}
#broadcast-stage .engagement-energy-count{font-size:20px!important;text-align:right!important}
#broadcast-stage .engagement-energy-count span{font-size:12px!important}

/* Temporary audience alerts live above Energy and never inside the chat reserve. */
#broadcast-stage .engagement-card,
#broadcast-stage .engagement-card[data-type="vibe"],
#broadcast-stage .engagement-card[data-major="true"],
#broadcast-stage .engagement-card[data-type="milestone"]{
  left:90px!important;top:1015px!important;bottom:auto!important;width:900px!important;height:78px!important;min-height:78px!important;
  grid-template-columns:52px minmax(0,1fr) 44px!important;gap:12px!important;padding:7px 14px!important;border-radius:18px!important;
}
#broadcast-stage .engagement-card .engagement-avatar{width:48px!important;height:48px!important;font-size:22px!important;border-width:2px!important}
#broadcast-stage .engagement-card .engagement-label{font-size:11px!important}
#broadcast-stage .engagement-card .engagement-name{font-size:23px!important;margin-top:1px!important}
#broadcast-stage .engagement-card .engagement-detail{font-size:13px!important;margin-top:2px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#broadcast-stage .engagement-card .engagement-icon{width:42px!important;height:42px!important;border-radius:12px!important;font-size:24px!important}
#broadcast-stage .supporter-spotlight,#broadcast-stage .engagement-sponsor,#broadcast-stage .broadcast-moment{display:none!important}
#broadcast-stage .engagement-particles{bottom:auto!important;top:1042px!important}

/* The lower screen is deliberately left blank for TikTok comments and controls. */
#broadcast-stage #tiktok-interaction-reserve{top:var(--tr-chat-clear-y)!important;height:740px!important;background:linear-gradient(180deg,rgba(2,4,10,0),rgba(2,3,10,.34) 70%,rgba(2,3,10,.62))!important}
#broadcast-stage .stage-horizon{top:1045px!important;opacity:.35!important}

/* Pre-show/branding scenes may use the full left card, but never the chat reserve. */
#broadcast-stage[data-scene="STANDBY"] .gift-action-rail,
#broadcast-stage[data-scene="SAFE_STANDBY"] .gift-action-rail,
#broadcast-stage[data-scene="LOBBY"] .gift-action-rail{opacity:.92}

/* Accessibility */
.reduced-motion .gift-action-card,.reduce-motion .gift-action-card,.reduced-motion .broadcast-game-state[data-countdown-state="final"] .broadcast-game-timer{animation:none!important;transition:none!important}
.high-readability .broadcast-game-header,.high-readability .broadcast-game-frame,.high-readability .gift-action-card,.high-readability .engagement-energy{background:#071226!important;box-shadow:none!important;border-color:rgba(255,255,255,.62)!important}

@media (prefers-reduced-motion:reduce){.gift-action-card,.broadcast-game-state[data-countdown-state="final"] .broadcast-game-timer{animation:none!important;transition:none!important}}