/* ==========================================================================
   LAST FAN STANDING (lf-) — all surfaces, scoped selectors.
   Wall: a shot-clock bar, one rail carrying the whole round (survivors · round ·
   clock-or-cull), the question, and an answer board that takes the rest of the
   screen. Phone: alive chip, survived / eliminated cards, spectator + champion
   states. Tokens only — no raw hexes beyond neutral/status rgba() consistent
   with the existing surfaces.
   ========================================================================== */

/* ============================ BIG SCREEN (wall) =========================== */

/* ONE COLUMN, FOUR ROWS — and the same four in both states.
   rail → question band → board → clock bar. The reveal changes values and
   colour, never geometry: a wall that reshuffles at the moment the answer lands
   makes 5000 people re-find everything at exactly the wrong time.

   What used to be here: a white "LAST FAN STANDING" pill, a second white pill
   for the round, a bordered card around the survivor count, a 120px countdown
   ring beside the question and an "N answers locked in" line — five stacked
   blocks above the board, three of them furniture, and the two live numbers
   (survivors, eliminated) rendered smaller than the game's own name. */
.screen-body .lf-screen {
  width: 100%; max-width: 1660px; height: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: stretch; gap: 1.6vh;
  min-height: 0;
}

/* ---- shot clock: a bar, not a ring ----
   Read peripherally — nobody has to focus on it to know time is running out,
   which is what let the ring leave the question's row and the question grow.
   It runs along the BOTTOM of the layout: at the top it sat shoulder-to-
   shoulder with the corner lockup and read as chrome rather than game. */
.screen-body .lf-clockbar {
  flex: 0 0 auto; height: 1.1vh; border-radius: 999px; overflow: hidden;
  background: rgba(var(--tint-ink), 0.72);
}
.screen-body .lf-clockbar-fill {
  height: 100%; width: 100%; border-radius: inherit;
  background: var(--grad-warm);
  transition: width 0.22s linear;
}
/* Urgency is a class on the screen wrapper — the bar and the clock digit sit
   at opposite ends of the layout and both colour from it. */
.screen-body .lf-screen.urgent .lf-clockbar-fill { background: var(--danger); }
.screen-body .lf-screen.revealed .lf-clockbar { opacity: 0.25; }
.screen-body .lf-screen.revealed .lf-clockbar-fill { width: 0 !important; }

/* ---- the rail: survivors · round · clock-or-cull ---- */
.screen-body .lf-rail {
  flex: 0 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 2vw; min-height: 13vh;
}
.screen-body .lf-alive { display: flex; align-items: center; gap: 1.4vw; justify-self: start; min-width: 0; }
.screen-body .lf-alive-num {
  font-family: var(--font-display); font-weight: 900; line-height: 0.84;
  font-size: calc(10 * var(--wt)); font-variant-numeric: tabular-nums;
  background: var(--grad-num); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.55));
}
.screen-body .lf-alive-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2vh; min-width: 0; }
.screen-body .lf-alive-label {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: calc(4.4 * var(--wt)); line-height: 1.04; color: var(--text);
}
.screen-body .lf-alive-of {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: calc(3.4 * var(--wt)); color: var(--text-dim);
}
/* The round is a word in the middle of the rail, not a white pill: it is the
   one thing here nobody needs to read from the back. */
.screen-body .lf-round {
  justify-self: center; min-width: 0;
  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-faint);
  white-space: nowrap;
}

/* The right cell: the clock while the question is open, the cull when it is
   answered. Same cell, same size, so the rail's shape never changes. */
.screen-body .lf-slot { justify-self: end; display: flex; align-items: center; min-width: 0; }
.screen-body .lf-clock, .screen-body .lf-elim { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2vh; }
.screen-body .lf-clock-num {
  font-family: var(--font-display); font-weight: 900; line-height: 0.9;
  font-size: calc(7.4 * var(--wt)); font-variant-numeric: tabular-nums; color: var(--text);
}
/* Small enough to read as a unit rather than a second number. */
.screen-body .lf-clock-unit { font-size: 0.46em; color: var(--text-dim); margin-left: 0.06em; }
.screen-body .lf-screen.urgent .lf-clock-num { color: var(--danger); }
.screen-body .lf-clock-sub {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: calc(3.4 * var(--wt)); color: var(--text-dim);
}
.screen-body .lf-clock-sub b { color: var(--text); }
/* The cull: a flat number in the status red, on the same baseline as the clock
   it replaced. It used to be a rotated outlined stamp — a big gesture at a
   small size, competing with the correct tile for the eye at the exact moment
   the correct tile has to win. */
.screen-body .lf-elim-num {
  font-family: var(--font-display); font-weight: 900; line-height: 0.9;
  font-size: calc(7.4 * var(--wt)); font-variant-numeric: tabular-nums; color: var(--danger);
  animation: lfCull 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both 0.45s;
}
.screen-body .lf-elim-label {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: calc(4.4 * var(--wt)); color: var(--danger);
  animation: fadeIn 0.4s both 0.45s;
}
.screen-body .lf-elim-label.survived { color: var(--success); }
@keyframes lfCull {
  0% { opacity: 0; transform: translateY(-0.8vh) scale(1.35); }
  100% { opacity: 1; transform: none; }
}
@keyframes fadeIn { from { opacity: 0; } }

/* ---- question band: a fixed height, so the board below never moves ---- */
.screen-body .lf-qband {
  flex: 0 0 auto; min-height: 17vh;
  display: flex; align-items: center; justify-content: center;
}
.screen-body .lf-q {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  line-height: 1.02; text-align: center; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7);
  transition: opacity 0.3s ease;
}
/* Type size steps by LENGTH so a short question is huge and a long one still
   fits the same band — the band's height is what keeps the board still. */
.screen-body .lf-q.xl { font-size: calc(8.2 * var(--wt)); }
.screen-body .lf-q.lg { font-size: calc(6.6 * var(--wt)); }
.screen-body .lf-q.md { font-size: calc(5.2 * var(--wt)); }
.screen-body .lf-q.sm { font-size: calc(4.4 * var(--wt)); }
/* On reveal nobody re-reads the question; it steps back so the board wins. */
.screen-body .lf-screen.revealed .lf-q { opacity: 0.72; }

/* ---- the board: everything that is left ----
   Row height comes from the BOARD, never from a tile's content, so every tile
   is mathematically equal. Two options and three options are one column of
   full-width rows: a 2-column grid left a hole in the fourth cell with three
   answers, and made a two-answer question into two near-empty squares. */
.screen-body .lf-board {
  flex: 1 1 auto; min-height: 0;
  grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 1.8vh;
}
.screen-body .lf-board.n2, .screen-body .lf-board.n3 { grid-template-columns: 1fr; }
/* Any odd count above three: the orphan spans the row instead of leaving a
   hole. A no-op for 2, 3 and 4, which is every count the server allows today. */
.screen-body .lf-board .q-option:last-child:nth-child(odd) { grid-column: 1 / -1; }
.screen-body .lf-board .q-option { min-height: 0; padding: 0 3vh; font-size: calc(5.6 * var(--wt)); }
.screen-body .lf-board.n2 .q-option { font-size: calc(6.4 * var(--wt)); }
.screen-body .lf-board.n4 .q-option { font-size: calc(5 * var(--wt)); }
/* One long answer sizes the whole board — mixed type sizes read as a mistake. */
.screen-body .lf-board.long .q-option { font-size: calc(4.4 * var(--wt)); }
.screen-body .lf-board.xlong .q-option { font-size: calc(3.6 * var(--wt)); }
.screen-body .lf-board .q-option .shape { font-size: 1.15em; }
.screen-body .lf-board .q-option .opt-count { font-size: 1.05em; }
/* Wrong answers step back by DRAINING, not by going transparent: colour out,
   brightness down, but the tile still covers the key visual behind it. At 0.4
   alpha over a lit KV the board grew holes — a face bled through one tile and
   an explosion through the next, which from the back rows reads as broken, not
   as "these are the wrong ones". They stay legible: "how many fell for it" is
   the second-best story on this screen. */
.screen-body .lf-screen.revealed .q-option.dim {
  opacity: 0.88; filter: grayscale(0.66) brightness(0.5) contrast(0.94);
  transition: opacity 0.28s ease, filter 0.28s ease;
}

/* The reveal is a SEQUENCE, not three things at once: wrong tiles step back,
   the right one lights up, the votes land, and last of all the survivor count
   falls. Each beat has the wall to itself. */
.screen-body .lf-screen.revealed .q-option.correct { animation-delay: 0.1s; }
.screen-body .lf-screen.revealed .opt-count { animation: fadeIn 0.4s both 0.35s; }
.screen-body .lf-screen.revealed .opt-bar { animation: lfBar 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both 0.35s; }
@keyframes lfBar { from { transform: scaleX(0); transform-origin: left; } }

/* Survivor number pop when the counter melts (patched, no rebuild). */
.screen-body .lf-pop { animation: lfNumPop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes lfNumPop { 0% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* ---- Round intro ----
   The card the crowd reads before the board arrives. It used to sit in the
   middle of the wall at two thirds the size of everything around it, under a
   white pill carrying the game's own name; from the back that was a small block
   of text floating in a lot of empty stage. Now it USES the stage: same width,
   same type ladder and the same big survivor numeral as the question screen, so
   the cut between them reads as one design. */
.screen-body .lf-intro {
  width: 100%; max-width: 1660px; height: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4.6vh; text-align: center;
}
/* Game name and round on ONE faint line: both are context, and neither is what
   anybody is here to read. */
.screen-body .lf-intro-kicker {
  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-faint);
}
.screen-body .lf-intro-q {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  line-height: 1.02; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7); max-width: 26ch;
}
/* Steps by length exactly like .lf-q — the question is the same object here. */
.screen-body .lf-intro-q.xl { font-size: calc(8.2 * var(--wt)); }
.screen-body .lf-intro-q.lg { font-size: calc(6.6 * var(--wt)); }
.screen-body .lf-intro-q.md { font-size: calc(5.2 * var(--wt)); }
.screen-body .lf-intro-q.sm { font-size: calc(4.4 * var(--wt)); }
.screen-body .lf-intro-standing { display: flex; align-items: center; gap: 1.4vw; }
.screen-body .lf-intro-num {
  font-family: var(--font-display); font-weight: 900; font-size: calc(10 * var(--wt)); line-height: 0.84;
  font-variant-numeric: tabular-nums;
  background: var(--grad-num); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.55));
}
.screen-body .lf-intro-label {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: calc(4.4 * var(--wt)); color: var(--text);
}
.screen-body .lf-intro-ready {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: calc(3.4 * var(--wt)); color: var(--text-dim);
}

/* ---- Winner finale ---- */
.screen-body .lf-winner { display: flex; flex-direction: column; align-items: center; gap: 2.6vh; text-align: center; max-width: 1500px; }
.screen-body .lf-winner-label {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.34em; font-size: calc(3.3 * var(--wt)); color: var(--text);
}
.screen-body .lf-winner-name {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(70px, 14vh, 180px); line-height: 0.92;
  background: var(--ewc-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: popIn 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.screen-body .lf-winner-name.multi { font-size: clamp(40px, 7.4vh, 96px); }
.screen-body .lf-winner-name.nobody { font-size: clamp(56px, 10vh, 140px); }
.screen-body .lf-winner-names { display: flex; flex-direction: column; gap: 1vh; }
.screen-body .lf-winner-sub {
  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-dim);
}

/* Light (championship) variant keeps type legible on the off-white render. */
.screen-body.light .lf-intro-q, .screen-body.light .lf-winner-label { color: var(--ewc-charcoal); }
.screen-body.light .lf-survivor-strip { background: rgba(var(--tint-on-accent), 0.05); border-color: rgba(var(--tint-on-accent), 0.1); }
.screen-body.light .lf-round-chip { color: var(--ewc-charcoal); background: rgba(var(--tint-on-accent), 0.06); }
.screen-body.light .lf-alive-label { color: var(--ewc-charcoal); }

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

.play-body .lf-chip {
  display: inline-flex; align-items: center; gap: 8px; align-self: center;
  margin: 0 auto 10px; padding: 6px 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 12px; color: var(--text);
  width: fit-content;
}
.play-body .lf-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }
.play-body .lf-chip.out { color: var(--text-dim); }
.play-body .lf-chip.out::before { background: var(--danger); box-shadow: none; }

/* Live survivor count pill (spectators + result cards). */
.play-body .lf-live-pill {
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: 6px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.play-body .lf-live-pill b {
  font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1;
  background: var(--grad-num); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.play-body .lf-live-pill span {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 12px; color: var(--text-dim);
}

.play-body .lf-out-round {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 14px; color: var(--text);
}

/* Champion emoji storm — celebratory rain over the champion card. */
.play-body .lf-champ { position: relative; overflow: hidden; }
.play-body .lf-storm { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.play-body .lf-storm span {
  position: absolute; top: -12%;
  animation-name: lfStormFall; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes lfStormFall { to { transform: translateY(115vh) rotate(320deg); } }

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

#dash .lf-sample-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 16px;
  background: rgba(247, 247, 247, 0.03);
  border: 1px solid var(--line-soft); border-radius: 12px;
}
#dash .lf-sample-note { color: var(--text-faint); font-size: 13px; flex: 1; min-width: 200px; }
#dash .lf-sample-note.ready { color: var(--text-dim); }
#dash .lf-live { display: flex; flex-direction: column; gap: 10px; }

/* ===================== WALL: KV contrast hardening ======================= */
/* Intro + winner text sits directly on the busy key visual with no panel
   backing — give the standalone titles/labels a soft dark halo so they read
   crisply. Contrast/legibility only; no layout, size or colour changes. */
.screen-body .lf-intro-round,
.screen-body .lf-intro-q,
.screen-body .lf-intro-num,
.screen-body .lf-intro-label,
.screen-body .lf-intro-ready,
.screen-body .lf-winner-label,
.screen-body .lf-winner-name,
.screen-body .lf-winner-sub {
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7);
}

/* text-shadow bleeds through background-clip:text glyphs and muddies the
   gradient — drop the shadow on the gradient-clipped members of the hardening
   block and use a drop-shadow filter (composites the rendered gradient, so it
   stays bright) for KV legibility instead. */
.screen-body .lf-winner-name, .screen-body .lf-intro-num, .screen-body .lf-intro-round {
  text-shadow: none; filter: drop-shadow(0 3px 16px rgba(0, 0, 0, 0.55));
}





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

/* Last Fan's full audience canvas. Palette and licensed faces follow the same
   mainboard tokens as Arena/EWC; no audience branding enters the console. */
body.lastfan-broadcast > :is(.kv-frame,.kv-vignette,.kv-chrome), body.lastfan-broadcast::before, body.lastfan-broadcast::after { visibility:hidden; }
body.lastfan-broadcast .screen-stage { inset:0; display:block; overflow:hidden; }
body.lastfan-broadcast .screen-stage::before { display:none; }
.screen-body .lfb-root { --lfb-scale:1; --lfb-fit-max:0; transform:translate(-50%,-50%) scale(var(--lfb-scale)); }
.screen-body .lfb-root [hidden] { display:none !important; }
.screen-body .lfb-root :is(h1,h2,h3,p) { margin:0; }
.screen-body .lfb-backdrop { position:absolute; inset:0; z-index:-3; background:radial-gradient(ellipse at 50% 40%,var(--tb-surface),var(--tb-bg) 72%); }
.screen-body .lfb-backdrop::before { content:''; position:absolute; inset:0; background:var(--lfb-stage-art,none) center/cover; opacity:.42; }
.screen-body .lfb-backdrop::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%,transparent, var(--tb-bg)); }
.screen-body .lfb-frame { position:absolute; inset:40px; border:1px solid var(--tb-border); border-radius:30px; z-index:-1; }
.screen-body .lfb-content { position:absolute; inset:88px 110px 78px; }
.screen-body .lfb-content > section { height:100%; min-width:0; min-height:0; }
.screen-body .lfb-kicker { font:600 24px/1.3 var(--tb-font); color:var(--tb-blue); }
.screen-body .lfb-heading { display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px; min-width:0; }
.screen-body .lfb-title { width:100%; height:164px; display:flex; align-items:center; justify-content:center; font:750 124px/1.05 var(--tb-font); letter-spacing:-.05em; overflow-wrap:anywhere; }
.screen-body .lfb-rule { font:450 30px/1.4 var(--tb-font); color:var(--tb-muted); overflow-wrap:anywhere; }
.screen-body .lfb-round { position:relative; display:grid; grid-template-rows:minmax(0,1fr) 172px 7px; gap:22px; }
/* The question, picture and answers are Trivia's components (tb-*), styled by
   the shared broadcast sheet in both layouts. Only the rows are Last Fan's,
   because the survivor band keeps its place underneath. Reading time makes
   the picture the hero; the JS flies the same element into the corner. */
.screen-body .lfb-qa { position:relative; display:grid; grid-template-rows:200px minmax(0,1fr); gap:28px; min-width:0; min-height:0; }
.screen-body .lfb-qa[data-phase='intro'] .tb-answer-waiting { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.screen-body .lfb-qa:not([data-phase='intro']) .tb-answers[data-entrance='immediate'] .tb-answer { animation-delay:calc(320ms + var(--answer-order) * 65ms); }
.screen-body .lfb-qa[data-phase='reveal'] .tb-answer-detail { opacity:1; }
.screen-body .lfb-qa.is-media-moving .tb-question-media { z-index:3; }
.screen-body .lfb-qa .tb-answer-waiting { flex-direction:column; gap:18px; }
.screen-body .lfb-wait-rule { font:400 28px/1.4 var(--tb-font); color:var(--tb-muted); text-align:center; }
.screen-body .lfb-qa.has-question-image .lfb-wait-rule { display:none; }
.screen-body .lfb-qa.has-question-image .tb-answer-waiting { justify-content:flex-end; }
.screen-body .lfb-qa.has-question-image .tb-read-prompt { height:58px; --tb-fit-max:44; --tb-fit-min:32; }
.screen-body .lfb-qa.has-question-image { grid-template-rows:236px minmax(0,1fr); }
.screen-body .lfb-qa.has-question-image .tb-question-block { padding-inline-start:434px; }
.screen-body .lfb-qa.has-answer-images { grid-template-rows:174px minmax(0,1fr); gap:26px; }
.screen-body .lfb-qa.has-long-answers { grid-template-rows:210px minmax(0,1fr); gap:24px; }
.screen-body .lfb-qa.has-question-image.has-answer-images { grid-template-rows:200px minmax(0,1fr); }
.screen-body .lfb-qa.has-question-image:is(.has-answer-images,.has-long-answers) .tb-question-media { width:320px; height:180px; }
.screen-body .lfb-qa.has-question-image:is(.has-answer-images,.has-long-answers) .tb-question-block { padding-inline-start:354px; }
.screen-body .lfb-qa.has-question-image[data-phase='intro'] { grid-template-rows:170px minmax(0,1fr); gap:24px; }
.screen-body .lfb-qa.has-question-image[data-phase='intro'] .tb-question-block { padding-inline-start:0; }
.screen-body .lfb-qa.has-question-image[data-phase='intro'] .tb-question { --tb-fit-max:82; }
.screen-body .lfb-qa.has-question-image[data-phase='intro'] .tb-question-media { left:50%; top:186px; width:760px; height:427.5px; transform:translateX(-50%); }
.screen-body .lfb-qa.has-question-image.is-image-only { grid-template-rows:250px minmax(0,1fr); gap:26px; }
.screen-body .lfb-qa.has-question-image.is-image-only .tb-question-copy { display:none; }
.screen-body .lfb-qa.has-question-image.is-image-only .tb-question-block { padding-inline-start:0; }
.screen-body .lfb-qa.has-question-image.is-image-only .tb-question-media { left:calc(50% - 222px); top:0; width:444px; height:249.75px; transform:none; }
.screen-body .lfb-qa.has-question-image.is-image-only[data-phase='intro'] { grid-template-rows:0 minmax(0,1fr); gap:24px; }
.screen-body .lfb-qa.has-question-image.is-image-only[data-phase='intro'] .tb-question-media { left:50%; top:30px; width:1000px; height:562.5px; transform:translateX(-50%); }
.screen-body .lfb-survival-side { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; min-width:0; height:100%; }
.screen-body .lfb-clock { display:flex; flex-direction:column; align-items:flex-end; gap:0; width:100%; min-width:0; font-variant-numeric:tabular-nums; }
.screen-body .lfb-clock-value { display:flex; align-items:center; justify-content:flex-end; width:100%; height:112px; font:800 86px/1 var(--tb-font); }
.screen-body .lfb-clock-value:empty { display:none; }
.screen-body .lfb-clock-label { display:flex; align-items:center; justify-content:flex-end; width:100%; height:40px; text-align:right; font:600 32px/1.2 var(--tb-font); color:var(--tb-muted); }
.screen-body .lfb-round-cue { position:absolute; inset:24px 0 201px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-24px); transition:opacity .35s,transform .55s cubic-bezier(.16,1,.3,1),visibility .35s; }
.screen-body .lfb-round-label { width:100%; height:88px; display:flex; align-items:center; justify-content:center; font:650 64px/1.2 var(--tb-font); text-transform:uppercase; }
.screen-body .lfb-round-number { width:100%; height:270px; display:flex; align-items:center; justify-content:center; font:800 220px/1 var(--tb-font); }
.screen-body .lfb-round.is-round-cue .lfb-round-cue { opacity:1; visibility:visible; transform:none; }
.screen-body .lfb-round :is(.lfb-qa,.lfb-survival) { transition:opacity .35s,transform .55s cubic-bezier(.16,1,.3,1),visibility .35s; }
.screen-body .lfb-round.is-round-cue :is(.lfb-qa,.lfb-survival) { opacity:0; visibility:hidden; transform:translateY(18px); }
.screen-body .lfb-survival { display:grid; grid-template-columns:300px minmax(0,1fr) 320px; align-items:center; gap:32px; border-top:1px solid var(--tb-border); padding-top:18px; min-width:0; min-height:0; }
.screen-body .lfb-survival-metric { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.screen-body .lfb-alive { display:flex; align-items:center; width:100%; height:104px; font:750 100px/1 var(--tb-font); font-variant-numeric:tabular-nums; letter-spacing:-.06em; }
.screen-body .lfb-standing { display:flex; align-items:center; width:100%; height:42px; font:600 34px/1.2 var(--tb-font); color:var(--tb-muted); }
.screen-body .lfb-elimination { font:650 42px/1.2 var(--tb-font); text-align:right; color:var(--tb-alert); overflow-wrap:anywhere; }
.screen-body .lfb-population { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; min-width:0; }
.screen-body .lfb-group-label { font:500 30px/1.2 var(--tb-font); color:var(--tb-muted); text-align:center; }
.screen-body .lfb-density { position:relative; display:grid; grid-template-columns:repeat(var(--lfb-columns,1),minmax(0,1fr)); grid-template-rows:repeat(var(--lfb-rows,1),minmax(0,1fr)); gap:6px; width:100%; max-width:calc(var(--lfb-columns,1) * 31px - 6px); height:calc(var(--lfb-rows,1) * 31px - 6px); overflow:hidden; contain:layout paint; }
.screen-body .lfb-density.is-individual { max-width:calc(var(--lfb-columns,1) * 48px - 6px); height:42px; }
.screen-body .lfb-cell { position:relative; display:block; border-radius:3px; background:var(--tb-border); overflow:hidden; }
.screen-body .lfb-cell-fill { display:block; width:100%; height:100%; background:var(--tb-blue); transform:scaleX(0); transform-origin:left; }
.screen-body .lfb-falling-layer { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.screen-body .lfb-falling-cell { position:absolute; display:block; background:var(--tb-alert); border-radius:3px; }
.screen-body .lfb-timer-track { background:var(--tb-border); overflow:hidden; border-radius:4px; }
.screen-body .lfb-timer-fill { display:block; height:100%; background:var(--tb-blue); transform-origin:left; transition:transform .2s linear; }
.screen-body .lfb-round.is-urgent .lfb-clock { color:var(--tb-alert); }
.screen-body .lfb-round.is-urgent .lfb-timer-fill { background:var(--tb-alert); }
.screen-body .lfb-lobby { display:grid; grid-template-columns:minmax(0,1fr) 560px; align-items:center; gap:90px; }
.screen-body .lfb-lobby-copy { display:flex; flex-direction:column; gap:36px; min-width:0; }
.screen-body .lfb-hero { display:flex; flex-direction:column; align-items:center; font:800 162px/1 var(--tb-font); letter-spacing:-.065em; text-align:center; }
.screen-body .lfb-hero > span { display:flex; align-items:center; justify-content:center; flex:none; width:100%; height:200px; white-space:nowrap; }
.screen-body .lfb-hero .tb-hero-accent { color:var(--tb-blue); }
.screen-body .lfb-join { background:var(--tb-qr-white); color:var(--tb-base); padding:38px; display:flex; flex-direction:column; gap:28px; align-items:center; border-radius:30px; }
.screen-body .lfb-join h2 { font:650 36px/1.2 var(--tb-font); text-align:center; }
.screen-body .lfb-qr { width:470px; height:470px; object-fit:contain; }
.screen-body .lfb-countdown { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px; }
.screen-body .lfb-countdown-value { --lfb-fit-max:480; height:620px; width:100%; display:flex; justify-content:center; align-items:center; font:800 480px/1.1 var(--tb-font); text-align:center; overflow-wrap:anywhere; }
.screen-body .lfb-winner, .screen-body .lfb-closing, .screen-body .lfb-award { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; text-align:center; }
.screen-body .lfb-winner-names { width:100%; max-height:430px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.screen-body .lfb-winner-name { width:100%; height:160px; display:flex; justify-content:center; align-items:center; font:750 150px/1.05 var(--tb-font); color:var(--tb-blue); letter-spacing:-.05em; overflow-wrap:anywhere; }
.screen-body .lfb-final-survivors { display:flex; align-items:center; justify-content:center; gap:25px; }
.screen-body .lfb-final-survivors strong { font:750 90px/1 var(--tb-font); }
.screen-body .lfb-final-survivors span { font:500 32px/1.2 var(--tb-font); }
.screen-body .lfb-results { display:flex; flex-direction:column; gap:32px; }
.screen-body .lfb-results .lfb-heading { gap:12px; }
.screen-body .lfb-results .lfb-title { height:105px; font-size:88px; }
.screen-body .lfb-ranking { display:grid; grid-auto-rows:minmax(0,1fr); padding:0; margin:0; list-style:none; flex:1; min-height:0; gap:10px; }
.screen-body .lfb-ranking-row { display:flex; align-items:center; gap:28px; background:var(--tb-surface); border:1px solid var(--tb-border); border-radius:10px; padding:8px 28px; min-height:0; }
.screen-body .lfb-rank { width:75px; flex:none; font:650 40px/1 var(--tb-font); color:var(--tb-muted); }
.screen-body .lfb-ranking-name { min-width:0; flex:1; height:100%; display:flex; align-items:center; font:600 50px/1.1 var(--tb-font); overflow-wrap:anywhere; }
.screen-body .lfb-score { font:650 40px/1.1 var(--tb-font); font-variant-numeric:tabular-nums; }
.screen-body .lfb-standby { position:absolute; inset:0; z-index:9; display:grid; place-items:center; font:650 90px/1.2 var(--tb-font); background:var(--tb-bg); }
.screen-body .lfb-root.is-arabic :is(h1,h2,.lfb-ranking-name,.lfb-rule,.lfb-wait-rule) { unicode-bidi:plaintext; line-height:1.3; letter-spacing:0; }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-backdrop::before { background-image:var(--tb-brand-art,none); opacity:.78; }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-backdrop::after { background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--tb-bg) 91%,transparent),color-mix(in srgb,var(--tb-bg) 42%,transparent)); }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] :is(.lfb-frame,.lfb-join,.lfb-ranking-row,.lfb-cell,.lfb-falling-cell) { border-radius:0; }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] :is(.lfb-title,.lfb-hero,.lfb-winner-name,.lfb-countdown-value,.lfb-alive,.lfb-clock-value,.lfb-round-number) { font-family:var(--tb-headline); font-weight:900; letter-spacing:0; }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-cell-fill { background:var(--tb-white); }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-falling-cell { background:var(--tb-highlight); }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-hero { --lfb-fit-max:280; }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-hero > span { height:260px; }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-hero .tb-hero-accent { background:var(--tb-brand-headline,var(--tb-highlight)) center/cover; background-clip:text; -webkit-background-clip:text; color:transparent; }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-winner-name { background:var(--tb-brand-headline,var(--tb-highlight)) center/cover; background-clip:text; -webkit-background-clip:text; color:transparent; }
.screen-body .lfb-root[data-mainboard-layout='ewc26'].is-arabic :is(.lfb-hero,.lfb-title,.lfb-winner-name,.lfb-countdown-value,.lfb-alive) { font-family:var(--tb-font); }
@media(prefers-reduced-motion:reduce) { .screen-body .lfb-root *, .screen-body .lfb-root *::before, .screen-body .lfb-root *::after { animation:none !important;transition:none !important; } }

/* Dedicated console additions, scoped to Last Fan. */
#dash #tab-lastfan .lf-title { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#dash #tab-lastfan .lf-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
#dash #tab-lastfan .lfs-header h1 { margin-top:7px; }
#dash #tab-lastfan .lfs-close { width:36px; height:36px; min-width:36px; padding:9px; }
#dash #tab-lastfan .lfs-close svg { width:18px; height:18px; }
#dash #tab-lastfan .lf-op-question-image { display:block; max-height:180px; max-width:100%; object-fit:contain; margin:12px 0; background:var(--surface); border-radius:6px; }
#dash #tab-lastfan .lf-op-answer-image { width:72px; height:54px; object-fit:contain; flex:none; background:var(--surface); border-radius:5px; }
#dash #tab-lastfan .lfs-answer-text { overflow-wrap:anywhere; unicode-bidi:plaintext; }
#dash #tab-lastfan .lfs-answer-count { white-space:nowrap; font-variant-numeric:tabular-nums; }
#dash #tab-lastfan .lf-phase-flow { display:flex; flex-wrap:wrap; list-style:none; margin:0 0 18px; padding:0; gap:6px; }
#dash #tab-lastfan .lf-phase-flow li { padding:6px 10px; border-radius:5px; background:var(--surface-2); color:var(--text-faint); font-size:11px; }
#dash #tab-lastfan .lf-phase-flow li.is-current { color:var(--text); background:var(--surface-3); box-shadow:inset 0 -2px var(--text-dim); }
#dash #tab-lastfan .lf-round-archive { --lf-round-inset:18px; --lf-round-indent:20px; display:grid; gap:0; margin-top:20px; border-top:1px solid var(--line); }
#dash #tab-lastfan .lf-round-detail { min-width:0; padding:0; border-bottom:1px solid var(--line-soft); font-size:12px; }
#dash #tab-lastfan .lf-round-detail:last-child { border-bottom:0; }
#dash #tab-lastfan .lf-round-detail > summary { display:grid; grid-template-columns:12px minmax(0,1fr); align-items:baseline; gap:8px; min-height:44px; padding:12px var(--lf-round-inset); list-style:none; cursor:pointer; color:var(--text-dim); line-height:1.6; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#dash #tab-lastfan .lf-round-detail > summary::-webkit-details-marker { display:none; }
#dash #tab-lastfan .lf-round-detail > summary::before { content:''; width:6px; height:6px; margin-left:2px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); }
#dash #tab-lastfan .lf-round-detail[open] > summary::before { transform:rotate(45deg); }
#dash #tab-lastfan .lf-round-detail > summary:hover { background:var(--surface-2); color:var(--text); }
#dash #tab-lastfan .lf-round-detail > summary:focus-visible { outline:2px solid var(--gold); outline-offset:-3px; border-radius:5px; }
#dash #tab-lastfan .lf-round-detail > :not(summary) { margin-left:calc(var(--lf-round-inset) + var(--lf-round-indent)); margin-right:var(--lf-round-inset); }
#dash #tab-lastfan .lf-round-detail > summary + * { margin-top:0; }
#dash #tab-lastfan .lf-round-detail > :last-child:not(summary) { margin-bottom:16px; }
#dash #tab-lastfan .lf-round-question { margin:12px 0; color:var(--text); overflow-wrap:anywhere; unicode-bidi:plaintext; }
#dash #tab-lastfan .lf-round-outcomes { display:flex; gap:15px; flex-wrap:wrap; color:var(--text-dim); margin:12px 0; }
#dash #tab-lastfan .lf-history-answer { display:flex; align-items:baseline; gap:12px; margin:8px 0; padding:6px 0; min-width:0; }
#dash #tab-lastfan .lf-history-answer > span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere; unicode-bidi:plaintext; }
#dash #tab-lastfan .lf-history-answer strong { white-space:nowrap; color:var(--text-dim); font-weight:500; }
#dash #tab-lastfan .lf-history-answer.is-correct { color:var(--success); }
#dash #tab-lastfan .lf-winner-list { overflow-wrap:anywhere; color:var(--text-dim); font-size:13px; }
@media(max-width:900px) { #dash #tab-lastfan .lfs-header { align-items:flex-start; flex-direction:column; } #dash #tab-lastfan .lf-header-actions { justify-content:flex-start; } }
@media(max-width:650px) { #dash #tab-lastfan .lfs-answer { flex-wrap:wrap; } #dash #tab-lastfan .lf-op-answer-image { margin-left:auto; } }
.play-body .lf-phone-question-image { display:block; max-width:100%; width:100%; max-height:190px; object-fit:contain; background:var(--surface-2); border-radius:12px; margin:10px 0; }
.play-body .lf-phone-answer-image { display:block; width:100%; max-height:115px; object-fit:contain; border-radius:6px; }
.play-body .answer-tile:has(.lf-phone-answer-image) { flex-wrap:wrap; min-height:130px; overflow-wrap:anywhere; }
.play-body .answer-tile:has(.lf-phone-answer-image) > span:nth-child(2) { flex:1; min-width:0; }
.play-body .lf-phone-unavailable { color:var(--text-dim); font-size:12px; }
@media(prefers-reduced-motion:reduce) { .play-body .lf-storm span { animation:none; } }
.screen-body .lfb-winner { gap:22px; }
.screen-body .lfb-winner > .lfb-heading, .screen-body .lfb-winner > .lfb-rule, .screen-body .lfb-final-survivors { flex:none; }
.screen-body .lfb-winner-names { flex:1 1 0; min-height:0; }
.screen-body .lfb-winner-names .lfb-winner-name { flex:1 1 0; min-height:0; max-height:180px; }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-winner-name { background-image:var(--tb-highlight); }
.screen-body .lfb-podium-scene { display:flex; flex-direction:column; gap:32px; }
.screen-body .lfb-podium { display:flex; align-items:flex-end; justify-content:center; gap:32px; flex:1; min-height:0; padding-top:30px; }
.screen-body .lfb-podium-column { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:20px; width:31%; height:100%; min-width:0; }
.screen-body .lfb-podium-name { width:100%; height:120px; display:flex; align-items:center; justify-content:center; text-align:center; overflow-wrap:anywhere; font:650 70px/1.15 var(--tb-font); }
.screen-body .lfb-podium-block { width:100%; height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; border:1px solid var(--tb-border); border-radius:20px 20px 0 0; background:var(--tb-surface); }
.screen-body .lfb-podium-block > strong { font:750 150px/1 var(--tb-font); color:var(--tb-blue); }
.screen-body .lfb-podium-column[data-place='1'] .lfb-podium-block { height:410px; }
.screen-body .lfb-podium-column[data-place='3'] .lfb-podium-block { height:250px; }
.screen-body .lfb-podium-prize { width:90%; height:70px; display:flex; align-items:center; justify-content:center; text-align:center; font:500 28px/1.2 var(--tb-font); overflow-wrap:anywhere; }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-podium-block { border-radius:0; background:var(--tb-white); color:var(--tb-bg); }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-podium-block > strong { color:var(--tb-bg); }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-podium-column[data-place='1'] .lfb-podium-block { border-top:9px solid transparent; border-image:var(--tb-highlight) 1; }
/* Long questions and rich answers remain reachable on small phones. */
.play-body .game-stage:has(.lf-chip) { overflow-y:auto; justify-content:flex-start; }
.play-body .game-stage:has(.lf-chip) .q-prompt { overflow-wrap:anywhere; unicode-bidi:plaintext; flex:none; }
.play-body .game-stage:has(.lf-chip) .answer-tile > span { max-width:100%; overflow-wrap:anywhere; unicode-bidi:plaintext; }
.play-body .answer-tile:has(.lf-phone-answer-image) { flex-wrap:nowrap; }
.play-body .answer-tile:has(.lf-phone-answer-image) > span:nth-child(2) { flex:0 1 auto; }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] :is(.lfb-title,.lfb-hero,.lfb-winner-name,.lfb-kicker) { text-transform:uppercase; }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-winner-name { background:none; color:var(--tb-white); }
.screen-body .lfb-root[data-mainboard-layout='ewc26'] .lfb-name-ink { max-width:100%; background:var(--tb-highlight); background-clip:text; -webkit-background-clip:text; color:transparent; }