/* ==========================================================================
   KIT - the shared game-show components. Built only on tokens.css + fonts.css.
   Everything the three UI surfaces (site pages, streamer console, viewer/stage) reuse lives here.
   ========================================================================== */
.display, .h-display { font-family: var(--font-display); font-weight: 800; font-stretch: var(--stretch-display); line-height: var(--lh-tight); letter-spacing: -.01em; }
[lang="ar"] .display, :lang(ar) .display { font-stretch: 100%; letter-spacing: 0; line-height: 1.25; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---- BUZZER: the signature button. A chunky key with a pressable edge. ---- */
.buzz { --b-face: var(--grad-accent); --b-edge: var(--accent-deep); --b-ink: var(--on-accent);
  appearance: none; border: 0; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--touch); padding: .62em 1.25em; border-radius: var(--r-md);
  font: 800 var(--fs-base)/1 var(--font-display); font-stretch: 90%; letter-spacing: .005em; text-decoration: none; color: var(--b-ink);
  background: var(--b-face); box-shadow: 0 var(--buzzer-h) 0 var(--b-edge), 0 calc(var(--buzzer-h) + 8px) 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.55);
  transform: translateY(0); transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), filter var(--dur-2) var(--ease); margin-bottom: var(--buzzer-h); }
.buzz:hover { filter: brightness(1.07); }
.buzz:active, .buzz[aria-pressed="true"] { transform: translateY(calc(var(--buzzer-h) - 1px)); box-shadow: 0 1px 0 var(--b-edge), 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4); }
.buzz:focus-visible { outline: none; box-shadow: 0 var(--buzzer-h) 0 var(--b-edge), var(--focus); }
.buzz:disabled, .buzz[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); transform: none; }
.buzz.ok     { --b-face: linear-gradient(180deg,#86bf9b,#5fa77a 60%,#4a8c60); --b-edge: var(--ok-deep); --b-ink: #0b1a12; }
.buzz.bad    { --b-face: linear-gradient(180deg,#e0795f,#cd5c45 60%,#a8442f); --b-edge: var(--bad-deep); --b-ink: #1c0a08; }
.buzz.sky    { --b-face: linear-gradient(180deg,#7ea2e0,#4a7fd4 60%,#2a93ee); --b-edge: #1b5ea3; --b-ink: #06223f; }
.buzz.quiet  { --b-face: linear-gradient(180deg,var(--surface-3),var(--surface-2)); --b-edge: #0b0a0a; --b-ink: var(--text); box-shadow: 0 var(--buzzer-h) 0 var(--b-edge), 0 calc(var(--buzzer-h) + 8px) 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.12); }
.buzz.sm { min-height: 36px; padding: .45em .9em; font-size: var(--fs-sm); border-radius: var(--r-sm); --buzzer-h: 3px; }
.buzz.lg { min-height: 56px; padding: .8em 1.7em; font-size: var(--fs-md); border-radius: var(--r-lg); --buzzer-h: 7px; }
.buzz.block { display: flex; width: 100%; }
.buzz.team { --b-face: linear-gradient(180deg, color-mix(in srgb, var(--team, var(--team-1)) 78%, white), var(--team, var(--team-1))); --b-edge: color-mix(in srgb, var(--team, var(--team-1)) 55%, black); --b-ink: #140a08; }

/* ---- SET PIECE: panel with a lit top edge (replaces the generic card for hero areas) ---- */
.set { position: relative; background: linear-gradient(180deg, var(--surface-2), var(--surface) 38%); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); isolation: isolate; }
.set::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(205, 92, 69,.65), transparent); border-radius: inherit; opacity: .9; pointer-events: none; }
.set::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .035; mix-blend-mode: screen; border-radius: inherit; pointer-events: none; z-index: -1; }

/* ---- MARQUEE: row/ring of chasing bulbs. One orchestrated moment; use sparingly (timer, stage, winner). ---- */
.marquee { --bulb: 7px; --gap: 22px; position: relative; }
.marquee::before { content: ""; position: absolute; inset: -12px; border-radius: inherit; pointer-events: none; z-index: 0;
  --bulbimg: radial-gradient(circle closest-side, #f0c4b8 0 35%, rgba(205, 92, 69,.7) 55%, transparent 100%);
  background:
    var(--bulbimg) top left / var(--gap) var(--bulb) repeat-x,
    var(--bulbimg) bottom left / var(--gap) var(--bulb) repeat-x,
    var(--bulbimg) top left / var(--bulb) var(--gap) repeat-y,
    var(--bulbimg) top right / var(--bulb) var(--gap) repeat-y;
  animation: bulbs 1.1s steps(2, jump-none) infinite; }
@keyframes bulbs { 0% { filter: brightness(1); } 50% { filter: brightness(.55); } 100% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .marquee::before { animation: none; } }

/* ---- ON AIR badge ---- */
.onair { display: inline-flex; align-items: center; gap: .5em; padding: .3em .8em .3em .6em; border-radius: var(--r-pill); background: rgba(205, 92, 69,.14); color: #e8917c; font: 800 var(--fs-xs)/1 var(--font-display); letter-spacing: .06em; border: 1px solid rgba(205, 92, 69,.4); }
.onair::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #cd5c45; box-shadow: 0 0 10px #cd5c45; animation: pulse 1.6s ease-in-out infinite; }
.onair.off { background: var(--surface-2); color: var(--muted); border-color: var(--line); } .onair.off::before { background: var(--muted); box-shadow: none; animation: none; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .onair::before { animation: none; } }

/* ---- Tags / chips ---- */
.tag { display: inline-flex; align-items: center; gap: .4em; padding: .25em .7em; border-radius: var(--r-pill); font: 700 var(--fs-xs)/1.2 var(--font); background: var(--surface-3); color: var(--text-2); }
.tag.gold { background: var(--gold-soft); color: var(--gold-text); } .tag.ok { background: var(--ok-soft); color: var(--ok); } .tag.bad { background: var(--bad-soft); color: var(--bad); }
.tag.easy { background: var(--ok-soft); color: var(--ok); } .tag.medium { background: var(--warn-soft); color: var(--warn); } .tag.hard { background: var(--bad-soft); color: var(--bad); }

/* ---- Team swatch / avatar (colour comes from --team) ---- */
.avatar { --team: var(--team-1); inline-size: 2.5rem; aspect-ratio: 1; border-radius: 50%; display: inline-grid; place-items: center; flex: none; overflow: hidden;
  font: 800 1rem/1 var(--font-display); color: #140a08; background: linear-gradient(160deg, color-mix(in srgb, var(--team) 70%, white), var(--team)); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--team); }
.avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---- Score numerals: big, tabular, gold ---- */
.score { font: 800 var(--fs-2xl)/1 var(--font-display); font-stretch: 85%; font-variant-numeric: tabular-nums; color: var(--gold-text); text-shadow: 0 0 24px rgba(205, 92, 69,.25); }
.score.pop { animation: scorepop .5s var(--ease-spring); }
@keyframes scorepop { 0% { transform: scale(1); } 35% { transform: scale(1.28); color: #fff; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .score.pop { animation: none; } }

/* ---- Stage backdrop: spotlight + faint sunburst + grain (page background for stage/viewer) ---- */
.backdrop { background: var(--grad-stage), var(--bg); background-attachment: fixed; position: relative; }
.backdrop::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg at 50% -20%, rgba(205, 92, 69,.05) 0 5deg, transparent 5deg 15deg); -webkit-mask: radial-gradient(80% 70% at 50% 0%, #000, transparent 75%); mask: radial-gradient(80% 70% at 50% 0%, #000, transparent 75%); }

/* ---- Icons: use <svg class="i"><use href="/img/icons.svg#name"/></svg> ---- */
.i { inline-size: 1.15em; block-size: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.i.fill { fill: currentColor; stroke: none; }

.sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }