@import url("/fonts/fonts.css"); /* self-hosted: no visitor data is sent to Google */
/* ==========================================================================
   KNOW BRAINER — kb-ui.css  ·  "Ember Hour" component system  (v0.4, font chosen: Fraunces)
   Replaces the former Voltage and Velvet sheet: same .vlt-* class names, new skin.
   Fonts: Fraunces (display), Figtree (body and every numeral), DM Mono (room code and TV join code only).
   @font-face rules live in fonts/fonts.css (self-hosted, CSP font-src 'self'); this file only names the families.

   COLOUR ROLES (binding)
     coral  = action (primary buttons, links, selected-before-reveal, focus ring)
     amber  = points and CORRECT only, plus Noodle's lens (the timer ring). Nothing else.
     berry  = wrong, urgency (timer low) and destructive. #C42A60 under text, #FF7FA6 as text / thin rings.
     cream  = neutral and "ready" (--ready): answered, locked in, seated, joined. Never amber before the reveal.
   SIGNATURE PAIR: the lens that counts down (.vlt-timer) and the bubble that talks (.vlt-say, Noodle only).
   Correct / wrong never rely on colour alone: icon and label always travel with the fill.
   ========================================================================== */

@property --vlt-p { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ---------- 1. TOKENS ---------- */
:root {
  /* brand (locked) */
  --plum: #170E17; --mulberry: #2B1A2B; --coral: #FF6F59; --berry: #D6336C; --amber: #FFB627; --cream: #FFF1E4;
  /* derived neutrals */
  --plum-deep: #0F080F;            /* hard under-shadows */
  --mulberry-2: #3A2539;           /* raised surface, hover */
  --mulberry-3: #4D3249;           /* tracks, keys, strong borders */
  --cream-dim: #C9B3B6;            /* secondary text (8.3:1 on mulberry) */
  --cream-faint: #A8939C;          /* placeholders (5.7:1 on mulberry) */
  --disabled: #A89488;             /* disabled text on mulberry-2 (3.6:1) */
  /* derived hues */
  --coral-hi: #FF8A77;
  --berry-strong: #C42A60;         /* fill under cream text (4.9:1) */
  --berry-lt: #FF7FA6;             /* text and thin rings on plum (8.0:1) */
  --amber-hi: #FFC650;
  --cream-hi: #FFFFFF; --cream-lip: #A89488;
  /* semantic roles */
  --c-bg: var(--plum); --c-surface: var(--mulberry); --c-surface-2: var(--mulberry-2); --c-surface-3: var(--mulberry-3);
  --c-text: var(--cream); --c-text-dim: var(--cream-dim); --c-text-faint: var(--cream-faint); --c-on-light: var(--plum);
  --c-action: var(--coral); --c-points: var(--amber); --c-correct: var(--amber); --c-wrong: var(--berry-strong); --c-urgent: var(--berry-lt); --c-destructive: var(--berry-strong);
  --ready: var(--cream);           /* answered / locked in / seated / joined: cream + check, never amber */
  --t-action: var(--coral); --t-wrong: var(--berry-lt); --t-info: var(--cream-dim); --t-warn: var(--berry-lt); --t-ok: var(--amber);
  --c-focus: var(--coral);
  --line: rgba(255, 241, 228, .14); --line-strong: rgba(255, 241, 228, .32); --line-dark: rgba(15, 8, 15, .85);
  /* control boundaries (field, switch, seg, stepper, dropzone, ghost button): cream at .45 = 3.6:1 on mulberry, WCAG 1.4.11 */
  --line-ctl: rgba(255, 241, 228, .45); --line-ctl-hover: rgba(255, 241, 228, .65);
  --dim: .6;                       /* opacity of de-emphasised answers / options / locked tiles (about 5.8:1 for cream text) */
  /* ONE label style (.vlt-label): Figtree 800, tracked caps. Pages use the class, or these tokens for local labels. TV raises --label-fs to 22px. */
  --label-fs: 13px; --label-fw: 800; --label-ls: .08em; --label-lh: 1.2; --label-color: var(--cream-dim);
  /* team palette: all in-world, plum text on every chip >= 4.5:1, min distance 8.9 dE2000 (CIEDE2000) across normal, deuteranopia and protanopia */
  --team-1: #FF6F59; --team-2: #FFF1E4; --team-3: #FF7FA6; --team-4: #D9B99B; --team-5: #A98BD0; --team-6: #FFC2D6; --team-7: #D4A9E6; --team-8: #B7746A;
  /* font families (display is switched below) */
  --font-body: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Consolas, monospace;   /* room code + TV join code ONLY */
  /* type scale */
  --fs-xs: 13px; --fs-sm: 14px; --fs-md: 16px; --fs-answer: 18px; --fs-lg: 20px; --fs-q: 22px; --fs-card: 24px; --fs-xl: 26px; --fs-2xl: 34px; --fs-3xl: 46px; --fs-4xl: 64px; --fs-5xl: 88px;
  --lh-snug: 1.25; --lh-body: 1.5;
  --min-fs: 0px;                   /* .vlt-tv raises this to 22px: the floor for every text style */
  /* spacing (4-pt) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  /* radius */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --r-say: 18px;
  /* elevation: one lip rule for every hue = 3px, plum-deep at 55% over the fill */
  --lip-h: 3px;
  --sh-card: 0 1px 0 rgba(255, 241, 228, .06) inset, 0 10px 28px rgba(8, 3, 8, .45);
  --sh-pop: 0 24px 60px rgba(8, 3, 8, .65);
  --sh-sticker: 5px 5px 0 var(--coral);
  --glow-gold: 0 0 28px rgba(255, 182, 39, .28); --glow-volt: 0 0 28px rgba(255, 111, 89, .32);
  --glow-hot: 0 0 28px rgba(214, 51, 108, .4); --glow-green: 0 0 28px rgba(255, 182, 39, .32);
  --focus: 3px solid var(--c-focus);
  /* motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 600ms; --dur-5: 900ms; --dur-6: 1600ms; --dur-breath: 4s;
  --stagger: 90ms;                 /* reveal stagger between answers */
  --dur-reveal: 600ms; --dur-correct: 520ms; --dur-wrong: 420ms; --dur-podium: 900ms; --dur-confetti: 1600ms;
  --confetti-1: #FF6F59; --confetti-2: #FFB627; --confetti-3: #FFF1E4;   /* three colours, win / podium only */
  /* z-index */
  --z-tabbar: 50; --z-backdrop: 100; --z-pause: 170; --z-drawer: 150; --z-toast: 200; --z-tip: 300;
  --vlt-scale: 1;
  color-scheme: dark;
}
.vlt-tv { --vlt-scale: 1.4; --min-fs: 22px; --fs-xs: 22px; --fs-sm: 22px; --fs-md: 22.4px; --label-fs: 22px; }
.vlt-scale-sm { --vlt-scale: .86; }

/* ---------- 2. DISPLAY FONT: Fraunces, SOFT 100, WONK 0, opsz 60, wght 700 (wordmark 800) ----------
   The shipped woff2 already has those axes pinned (fonts/fonts.css); the variation settings below keep the same look if a full variable file is served instead. */
:root { --font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", Georgia, serif; --display-weight: 700; --display-tracking: -.01em; --display-vs: "SOFT" 100, "WONK" 0, "opsz" 60; --display-lh: 1.1; --display-ws: .05em; --wordmark-weight: 800; --wordmark-tracking: 0; }

/* ---------- 3. LEGACY ALIASES (inline var(--gold) etc. in page-local CSS keeps working) ---------- */
:root {
  --curtain: var(--mulberry); --curtain-deep: var(--plum); --curtain-black: var(--plum-deep);
  --curtain-hi: var(--mulberry-3); --curtain-face: var(--mulberry-2); --curtain-lo: var(--mulberry); --curtain-lip: var(--plum-deep);
  --gold: var(--amber); --gold-hi: var(--amber-hi); --gold-lo: #E8A21C; --gold-lip: color-mix(in srgb, var(--plum-deep) 55%, var(--amber)); --gold-dim: #D9A02A;
  --volt: var(--coral); --volt-hi: var(--coral-hi); --volt-lo: #E85F4A; --volt-lip: color-mix(in srgb, var(--plum-deep) 55%, var(--coral));      /* old "picked/power" cyan -> coral (action) */
  --volt-hot: var(--berry-lt); --hot-hi: #FF9DBC; --hot-lo: var(--berry-strong); --hot-lip: color-mix(in srgb, var(--plum-deep) 55%, var(--berry-strong));
  --green: var(--amber); --green-hi: var(--amber-hi); --green-lo: #E8A21C; --green-lip: color-mix(in srgb, var(--plum-deep) 55%, var(--amber));    /* old "correct" green -> amber (correct only) */
  --cream-lo: #E7D3C4;
  --ink: var(--plum); --on-gold: var(--plum);
  --surface-1: rgba(23, 14, 23, .72); --surface-2: var(--mulberry); --surface-well: rgba(15, 8, 15, .62);
  --text: var(--cream); --text-dim: var(--cream-dim);
  --font-marquee: var(--font-display); --font-chrome: var(--font-body);
  --marq: var(--font-marquee); --disp: var(--font-display); --body: var(--font-body); --mono: var(--font-mono);
  /* teamHue() sets --face / --face-hi / --face-lo / --on-face inline on a tile; with none set, a tile head is cream on mulberry-3 */
}

/* ---------- 4. BASE ---------- */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(.vlt-page) {
  margin: 0; min-height: 100dvh; color: var(--c-text); font-family: var(--font-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; font-synthesis: none;
  background: radial-gradient(900px 520px at 50% -14%, rgba(255, 111, 89, .11), transparent 65%), radial-gradient(700px 420px at 0% 100%, rgba(214, 51, 108, .16), transparent 65%), var(--plum);
  background-attachment: fixed;
}
:where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"]), .kb-logo):focus-visible { outline: var(--focus); outline-offset: 3px; }   /* plain links, .linkbtn, .kb-logo: same ring as every vlt control; :where keeps specificity at 0,1,0 so cream-surface and input overrides still win */
:where([class*="vlt-"]):focus-visible, .is-focus { outline: var(--focus); outline-offset: 3px; }
.kb-logo:focus-visible { border-radius: var(--r-sm); }
.vlt-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 5. TYPE ---------- */
.vlt-wordmark, .vlt-display, .vlt-h1, .vlt-h2, .vlt-headline {
  font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: var(--display-vs); font-synthesis: none;
  letter-spacing: var(--display-tracking); word-spacing: var(--display-ws); line-height: var(--display-lh); margin: 0; color: var(--cream); text-wrap: balance;
}
.vlt-wordmark { font-size: clamp(28px, 9.5vw, 96px); font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-tracking); word-spacing: 0; line-height: 1; white-space: nowrap; }
.vlt-wordmark span, .vlt-wordmark b { color: var(--coral); font-weight: inherit; }
.vlt-display { font-size: clamp(var(--fs-2xl), 8vw, var(--fs-4xl)); }
.vlt-h1 { font-size: calc(var(--fs-2xl) * var(--vlt-scale)); }
.vlt-h2 { font-size: calc(var(--fs-xl) * var(--vlt-scale)); }
.vlt-headline { font-size: clamp(var(--fs-xl), 9vw, var(--fs-3xl)); }
.vlt-h3 { margin: 0; font: 800 calc(var(--fs-lg) * var(--vlt-scale))/var(--lh-snug) var(--font-body); color: var(--cream); }
.vlt-chrome { font-family: var(--font-body); font-weight: 800; letter-spacing: .01em; }
/* ONE tracked-caps label style: eyebrow, field label, nav label, table head, kicker, tile head, tab... */
.vlt-label, .vlt-eyebrow, .vlt-field__label, .vlt-nav-label, .vlt-lb-head, .vlt-progress-label, .vlt-counter__label, .vlt-ribbon__kicker, .vlt-sticker__tab, .vlt-timer__label, .vlt-buzzer__state, .vlt-tile__head {
  font-family: var(--font-body); font-weight: var(--label-fw); font-size: max(var(--label-fs), var(--min-fs)); line-height: var(--label-lh); letter-spacing: var(--label-ls); text-transform: uppercase;
}
.vlt-label { margin: 0; color: var(--label-color); }
.vlt-eyebrow { margin: 0; color: var(--cream-dim); }
.vlt-num { font-family: var(--font-body); font-weight: 800; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
.vlt-mono { font-family: var(--font-mono); font-weight: 500; font-synthesis: none; }   /* DM Mono ships 500 only: never fake bold on <b>/<strong> */
.vlt-muted { color: var(--c-text-dim); }
.vlt-dim { opacity: var(--dim); }
.vlt-text-gold, .vlt-text-accent, .vlt-text-ok, .vlt-text-green { color: var(--t-ok); }
.vlt-text-volt, .vlt-text-info { color: var(--t-info); }
.vlt-text-hot, .vlt-text-secondary, .vlt-text-bad { color: var(--t-wrong); }
.vlt-text-primary { color: var(--t-action); } .vlt-text-warn { color: var(--t-warn); }

/* ---------- 6. ICON ---------- */
.vlt-icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; stroke: currentColor; --vlt-icon-fill: none; --vlt-icon-stroke: 2; }
.vlt-icon--fill { --vlt-icon-fill: currentColor; } .vlt-icon--bold { --vlt-icon-stroke: 2.6; }
.vlt-icon--sm { width: .9em; height: .9em; } .vlt-icon--lg { width: 1.6em; height: 1.6em; } .vlt-icon--xl { width: 2.4em; height: 2.4em; }

/* ---------- 7. BUTTON ---------- */
.vlt-btn {
  --btn-fs: var(--fs-md);
  --hue: var(--coral); --hue-hi: var(--coral-hi); --lip: var(--coral); --on-hue: var(--plum); --hue-text: var(--t-action);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em; max-width: 100%;
  min-height: max(44px, 2.75em); margin: 0; padding: .68em 1.3em;
  font: 800 max(calc(var(--btn-fs) * var(--vlt-scale)), var(--min-fs))/1.1 var(--font-body); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  color: var(--on-hue); background: var(--hue); border: 0; border-radius: var(--r-md); cursor: pointer; user-select: none;
  box-shadow: 0 var(--lip-h) 0 color-mix(in srgb, var(--plum-deep) 55%, var(--hue));
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-2);
  -webkit-tap-highlight-color: transparent;
}
.vlt-btn:hover, .vlt-btn.is-hover { background: var(--hue-hi); transform: translateY(-1px); box-shadow: 0 calc(var(--lip-h) + 1px) 0 color-mix(in srgb, var(--plum-deep) 55%, var(--hue-hi)); }
.vlt-btn:active, .vlt-btn.is-active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--plum-deep) 55%, var(--hue)); }
.vlt-btn .vlt-icon { width: 1.2em; height: 1.2em; --vlt-icon-stroke: 2.6; }
.vlt-btn--ghost, .vlt-btn--info, .vlt-btn--warn { color: var(--cream); background: transparent; box-shadow: inset 0 0 0 2px var(--line-ctl); }
.vlt-btn--info { color: var(--cream-dim); } .vlt-btn--warn { color: var(--berry-lt); box-shadow: inset 0 0 0 2px rgba(255, 127, 166, .5); }
.vlt-btn--ghost:hover, .vlt-btn--ghost.is-hover, .vlt-btn--info:hover, .vlt-btn--warn:hover { background: rgba(255, 241, 228, .08); box-shadow: inset 0 0 0 2px currentColor; transform: none; }
.vlt-btn--ghost:active, .vlt-btn--ghost.is-active, .vlt-btn--info:active, .vlt-btn--warn:active { transform: scale(.98); background: rgba(255, 241, 228, .14); box-shadow: inset 0 0 0 2px currentColor; }
.vlt-btn--sm { --btn-fs: var(--fs-sm); --lip-h: 2px; padding: .62em 1em; border-radius: var(--r-sm); }
.vlt-btn--lg { --btn-fs: var(--fs-lg); border-radius: var(--r-lg); }
.vlt-btn--xl { --btn-fs: var(--fs-xl); --lip-h: 4px; padding: .6em 1.5em; border-radius: var(--r-lg); }
.vlt-btn--block { display: flex; width: 100%; white-space: normal; text-wrap: balance; line-height: 1.15; }
.vlt-btn--icon { padding: 0; width: max(44px, 2.75em); }
.vlt-btn[disabled], .vlt-btn[aria-disabled="true"], .vlt-btn.is-disabled { cursor: not-allowed; color: var(--disabled); background: var(--mulberry-2); transform: none; box-shadow: 0 var(--lip-h) 0 var(--mulberry); }
.vlt-btn--ghost[disabled], .vlt-btn--ghost.is-disabled { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.vlt-btn.is-loading { color: transparent; pointer-events: none; }
.vlt-btn.is-loading > * { visibility: hidden; }
.vlt-btn.is-loading::after { content: ""; position: absolute; width: 1.1em; height: 1.1em; border-radius: 50%; border: .18em solid var(--on-hue); border-right-color: transparent; animation: vlt-spin .8s linear infinite; }
.vlt-btn--ghost.is-loading::after { border-color: var(--cream); border-right-color: transparent; }

/* ---------- 8. PILL, RIBBON (legacy flat label), STARS, READY, LENS ---------- */
.vlt-pill {
  --hue: var(--cream); --hue-hi: var(--cream-hi); --lip: var(--cream-lip); --on-hue: var(--plum); --hue-text: var(--cream);
  display: inline-flex; align-items: center; gap: .45em; max-width: 100%; min-width: 0; padding: .42em .95em; border-radius: var(--r-pill);
  font: 800 max(calc(13px * var(--vlt-scale)), var(--min-fs))/1.1 var(--font-body); letter-spacing: .02em; white-space: nowrap;
  color: var(--hue-text); background: color-mix(in srgb, var(--hue) 13%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hue) 55%, transparent);
}
.vlt-pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
button.vlt-pill, a.vlt-pill, .vlt-pill[role="button"] { min-height: 44px; margin: 0; border: 0; cursor: pointer; justify-content: center; text-decoration: none; }   /* interactive pills: 44px tap height */
.vlt-pill--solid { color: var(--on-hue); background: var(--hue); box-shadow: none; }
.vlt-pill--sm { font-size: max(calc(13px * var(--vlt-scale)), var(--min-fs)); padding: .36em .8em; }
.vlt-pill--lg { font-size: max(calc(18px * var(--vlt-scale)), var(--min-fs)); padding: .5em 1.15em; }
.vlt-pill .vlt-icon { width: 1.1em; height: 1.1em; }

.vlt-ribbon {   /* legacy name; now a flat label, no tails, no lip */
  --hue: var(--coral); --hue-hi: var(--coral-hi); --lip: var(--coral); --on-hue: var(--plum); --hue-text: var(--t-action);
  position: relative; display: inline-block; color: var(--on-hue);
  font: var(--display-weight) calc(22px * var(--vlt-scale))/1 var(--font-display); font-variation-settings: var(--display-vs); font-synthesis: none; letter-spacing: var(--display-tracking); word-spacing: var(--display-ws); text-align: center;
}
.vlt-ribbon__band { display: block; padding: .55em 1.1em .5em; border-radius: 10px 10px 10px 2px; white-space: nowrap; background: var(--hue); }
.vlt-ribbon__kicker { display: block; margin-bottom: .45em; font-size: max(.5em, var(--min-fs)); opacity: .85; }
.vlt-ribbon--sm { font-size: calc(var(--fs-sm) * var(--vlt-scale)); } .vlt-ribbon--lg { font-size: calc(34px * var(--vlt-scale)); }

.vlt-stars { display: inline-flex; align-items: flex-end; justify-content: center; gap: .08em; font-size: calc(44px * var(--vlt-scale)); line-height: 0; }
.vlt-star { width: 1em; height: 1em; color: rgba(255, 241, 228, .22); --vlt-icon-fill: currentColor; --vlt-icon-stroke: 1.5; }
.vlt-stars > .vlt-star:nth-child(2) { width: 1.3em; height: 1.3em; transform: translateY(-.22em); }
.vlt-star.is-on { color: var(--amber); }
.vlt-stars--animate .vlt-star.is-on { animation: vlt-star-in 520ms var(--ease-spring) both; }
.vlt-stars--animate .vlt-star:nth-child(2) { animation-delay: 180ms; } .vlt-stars--animate .vlt-star:nth-child(3) { animation-delay: 360ms; }
.vlt-stars--sm { font-size: calc(22px * var(--vlt-scale)); }

.vlt-ready { display: inline-flex; align-items: center; gap: .45em; font: 800 max(calc(14px * var(--vlt-scale)), var(--min-fs))/1 var(--font-body); color: var(--ready); white-space: nowrap; }   /* answered / locked in / seated */
.vlt-ready::before { content: ""; flex: none; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--ready) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23170E17' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 68% no-repeat; }
.vlt-lens { display: inline-block; position: relative; width: .42em; height: .42em; border: .09em solid var(--amber); border-radius: 50%; vertical-align: .2em; }   /* the wordmark / app-icon mark */
.vlt-lens::after { content: ""; position: absolute; inset: -.09em; border-radius: 50%; background: conic-gradient(from 289deg, rgba(255, 241, 228, .6) 0 22deg, transparent 22deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .09em - 1px), #000 calc(100% - .09em)); mask: radial-gradient(farthest-side, transparent calc(100% - .09em - 1px), #000 calc(100% - .09em)); }

/* ---------- 9. NOODLE: bubble + hero ---------- */
.vlt-say {   /* the ONLY speech bubble in the system: Noodle's line */
  position: relative; display: block; width: fit-content; max-width: min(100%, 30ch); margin: 0 0 14px; padding: .7em 1em; border-radius: var(--r-say);
  font: 700 max(calc(16px * var(--vlt-scale)), var(--min-fs))/1.35 var(--font-body); color: var(--plum); background: var(--cream);
}
.vlt-say::after { content: ""; position: absolute; left: 20px; bottom: -11px; width: 14px; height: 12px; background: var(--cream); clip-path: polygon(0 0, 100% 0, 0 100%); }
.vlt-say--right::after { left: auto; right: 20px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.vlt-say--center::after { left: calc(50% - 7px); }   /* tail below, centred: Noodle sits under the bubble */
.vlt-say--up { margin: 14px 0 0; }
.vlt-say--up::after { left: calc(50% - 7px); bottom: auto; top: -11px; clip-path: polygon(0 100%, 100% 100%, 50% 0); }   /* tail above, centred: Noodle sits over the bubble */
/* side tail: Noodle beside the bubble, tail on the edge nearest him, low on the edge like the default tail. --side = Noodle on the left, --side-right = Noodle on the right. --say-tail (default 16px from the bottom) moves it; add .vlt-say--mid to centre it. */
.vlt-say--side, .vlt-say--side-right { margin: 0; --say-tail: 16px; }
.vlt-say--side::after, .vlt-say--side-right::after { top: auto; bottom: var(--say-tail); width: 12px; height: 14px; }
.vlt-say--side::after { left: -9px; right: auto; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.vlt-say--side-right::after { left: auto; right: -9px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.vlt-say--mid::after { top: calc(50% - 7px); bottom: auto; }
.vlt-say--mid.vlt-say--side::after { clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.vlt-say--mid.vlt-say--side-right::after { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.vlt-hero { --hero-size: 220px; position: relative; display: grid; place-items: center; width: var(--hero-size); max-width: 100%; aspect-ratio: 1; margin-inline: auto; }
.vlt-hero img { display: block; width: 100%; height: 100%; object-fit: contain; }   /* transparent cut-out: no mask, no ground */
.vlt-hero--sm { --hero-size: 120px; } .vlt-hero--lg { --hero-size: 320px; } .vlt-hero--xl { --hero-size: 440px; }
.vlt-hero--float img { animation: vlt-float 6s ease-in-out infinite; }

/* ---------- 10. MODAL, BACKDROP, DRAWER, NAV ---------- */
.vlt-backdrop {
  position: fixed; inset: 0; z-index: var(--z-backdrop); display: grid; place-items: center; padding: 16px;
  background: rgba(15, 8, 15, .76); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-2), visibility 0s linear var(--dur-2);
}
.vlt-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-2), visibility 0s; }
.vlt-modal {
  --hue: var(--coral); --hue-hi: var(--coral-hi); --lip: var(--coral); --on-hue: var(--plum); --hue-text: var(--t-action);
  position: relative; width: min(100%, var(--modal-w, 440px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: auto; margin: 0; padding: 0 0 22px;
  color: var(--cream); font-size: calc(16px * var(--vlt-scale)); background: var(--mulberry); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-pop);
}
.vlt-modal::before { content: ""; display: block; height: 6px; background: var(--hue); }
.vlt-backdrop.is-open .vlt-modal, dialog.vlt-modal[open] { animation: vlt-pop var(--dur-3) var(--ease-spring) both; }
dialog.vlt-modal::backdrop { background: rgba(15, 8, 15, .76); backdrop-filter: blur(5px); }
.vlt-modal__head { display: flex; align-items: center; gap: .6em; padding: 18px 16px 4px 24px; }
.vlt-modal__title { order: 1; flex: 1; margin: 0; font: var(--display-weight) 1.5em/var(--display-lh) var(--font-display); font-variation-settings: var(--display-vs); font-synthesis: none; letter-spacing: var(--display-tracking); word-spacing: var(--display-ws); color: var(--cream); }
.vlt-modal__close { order: 2; flex: none; display: grid; place-items: center; width: max(44px, 2.4em); height: max(44px, 2.4em); padding: 0; cursor: pointer; color: var(--cream); background: var(--mulberry-2); border: 0; border-radius: 50%; transition: background var(--dur-1), transform var(--dur-1) var(--ease-out); }
.vlt-modal__close:hover { background: var(--mulberry-3); } .vlt-modal__close:active { transform: scale(.92); }
.vlt-modal__close .vlt-icon { width: 1.1em; height: 1.1em; --vlt-icon-stroke: 2.6; }
.vlt-modal__hero { display: block; width: 40%; margin: 8px auto -6px; }
.vlt-modal__body { padding: 12px 24px 0; line-height: var(--lh-body); color: var(--cream); }
.vlt-modal__foot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; padding: 22px 24px 4px; }
.vlt-modal--wide { --modal-w: 640px; }
@media (max-width: 480px) { .vlt-modal__foot { flex-direction: column-reverse; } .vlt-modal__foot .vlt-btn { width: 100%; min-height: 56px; } }

.vlt-sidebar { display: flex; flex-direction: column; gap: 8px; width: var(--sidebar-w, 264px); min-height: 100%; padding: 22px 14px; font-size: calc(var(--fs-md) * var(--vlt-scale)); background: var(--plum); border-right: 1px solid var(--line); }
.vlt-nav { display: grid; gap: 4px; }
.vlt-nav-item { display: flex; align-items: center; gap: .75em; width: 100%; min-height: 44px; padding: .6em .9em; margin: 0; text-align: left; text-decoration: none; cursor: pointer;
  font: 700 1em/1.2 var(--font-body); color: var(--cream-dim); background: none; border: 0; border-radius: var(--r-sm); transition: background var(--dur-2), color var(--dur-2); }
.vlt-nav-item:hover, .vlt-nav-item.is-hover { color: var(--cream); background: rgba(255, 241, 228, .07); }
.vlt-nav-item.is-active, .vlt-nav-item[aria-current="page"] { color: var(--cream); background: rgba(255, 111, 89, .15); box-shadow: inset 3px 0 0 var(--coral); }
.vlt-nav-item.is-active .vlt-icon, .vlt-nav-item[aria-current="page"] .vlt-icon { color: var(--coral); }
.vlt-nav-label { padding: 14px .9em 4px; color: var(--cream-dim); }
.vlt-drawer { position: fixed; z-index: var(--z-drawer); top: 0; bottom: 0; right: 0; width: min(88vw, 400px); display: flex; flex-direction: column; color: var(--cream);
  background: var(--mulberry); border-left: 1px solid var(--line-strong); box-shadow: -24px 0 60px rgba(8, 3, 8, .6);
  transform: translateX(105%); visibility: hidden; transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
.vlt-drawer--left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line-strong); transform: translateX(-105%); }
.vlt-drawer--bottom { top: auto; left: 0; width: auto; max-height: 86dvh; border-left: 0; border-top: 1px solid var(--line-strong); border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(105%); padding-bottom: env(safe-area-inset-bottom); }
.vlt-drawer--bottom::before { content: ""; align-self: center; width: 44px; height: 5px; margin-top: 10px; border-radius: var(--r-pill); background: var(--mulberry-3); }
.vlt-drawer.is-open { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out), visibility 0s; }
.vlt-drawer__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px 22px; border-bottom: 1px solid var(--line); }
.vlt-drawer__title { flex: 1; margin: 0; font: var(--display-weight) calc(22px * var(--vlt-scale))/1.1 var(--font-display); font-variation-settings: var(--display-vs); font-synthesis: none; letter-spacing: var(--display-tracking); word-spacing: var(--display-ws); color: var(--cream); }
.vlt-drawer__body { flex: 1; overflow: auto; padding: 18px 22px; }
.vlt-drawer__foot { display: flex; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--line); }
.vlt-drawer.is-static, .vlt-modal.is-static { position: relative; inset: auto; transform: none; visibility: visible; width: 100%; max-width: 100%; animation: none; }   /* preview helper */

/* ---------- 11. CARD, TILE, STICKER, CHECK ---------- */
.vlt-card { --card-pad: 20px; position: relative; padding: var(--card-pad); color: var(--cream); background: var(--mulberry); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.vlt-card--square { border-radius: var(--r-lg); }   /* legacy no-op: cards are plain now */
.vlt-card--frame { border: 2px solid var(--coral); box-shadow: 0 0 0 5px rgba(255, 111, 89, .16), var(--sh-card); }
.vlt-card--inset { background: var(--plum); box-shadow: inset 0 2px 8px rgba(8, 3, 8, .55); }
.vlt-card--glow { border-color: rgba(255, 111, 89, .55); box-shadow: var(--sh-card), var(--glow-volt); }   /* coral: emphasis is an action cue, not points */
.vlt-card--tight { --card-pad: 12px; }
.vlt-card__title { margin: 0 0 .45em; font: var(--display-weight) calc(var(--fs-card) * var(--vlt-scale))/var(--display-lh) var(--font-display); font-variation-settings: var(--display-vs); font-synthesis: none; letter-spacing: var(--display-tracking); word-spacing: var(--display-ws); color: var(--cream); }

.vlt-tile {
  --hue: var(--face, var(--mulberry-3)); --hue-hi: var(--face-hi, #5C3F58); --lip: var(--plum-deep); --on-hue: var(--on-face, var(--cream)); --hue-text: var(--cream);
  position: relative; display: flex; flex-direction: column; overflow: hidden; margin: 0; padding: 0; text-align: center; color: var(--cream);
  font: 600 max(calc(var(--fs-sm) * var(--vlt-scale)), var(--min-fs))/1.3 var(--font-body); background: var(--mulberry); border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2);
}
.vlt-tile__head { padding: .5em .7em; color: var(--on-hue); background: var(--hue); }
.vlt-tile__body { flex: 1; display: grid; place-items: center; align-content: center; gap: .45em; padding: .9em .8em 1em; }
.vlt-tile__foot { padding: 0 .7em .8em; }
.vlt-tile--wide { grid-column: 1 / -1; }
button.vlt-tile, a.vlt-tile { cursor: pointer; text-decoration: none; }
button.vlt-tile:hover, a.vlt-tile:hover, .vlt-tile.is-hover { transform: translateY(-3px); border-color: var(--line-strong); }
button.vlt-tile:active, a.vlt-tile:active, .vlt-tile.is-active { transform: translateY(1px); }
.vlt-tile.is-selected, .vlt-tile[aria-pressed="true"] { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 111, 89, .35); }
.vlt-tile.is-locked, .vlt-tile.is-disabled { opacity: var(--dim); filter: saturate(.4); cursor: not-allowed; }

.vlt-sticker {   /* restrained: tilt <= 1.5deg, celebratory use only */
  --hue: var(--cream); --hue-hi: var(--cream-hi); --lip: var(--coral); --on-hue: var(--plum); --hue-text: var(--cream); --tilt: 0deg;
  position: relative; padding: 22px 20px 20px; color: var(--on-hue); background: var(--hue); border-radius: var(--r-md); box-shadow: 5px 5px 0 var(--lip); transform: rotate(var(--tilt));
  font: 500 calc(var(--fs-md) * var(--vlt-scale))/1.45 var(--font-body); transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out);
}
.vlt-sticker--tilt-l { --tilt: -1.5deg; } .vlt-sticker--tilt-r { --tilt: 1.5deg; }
a.vlt-sticker, button.vlt-sticker, label.vlt-sticker { cursor: pointer; text-align: left; text-decoration: none; }
a.vlt-sticker:hover, button.vlt-sticker:hover, label.vlt-sticker:hover { transform: rotate(0) translate(-2px, -2px); box-shadow: 8px 8px 0 var(--lip); }
a.vlt-sticker:active, button.vlt-sticker:active, label.vlt-sticker:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--lip); }
.vlt-sticker__tab { position: absolute; top: -.95em; left: 50%; transform: translateX(-50%); padding: .32em .9em; white-space: nowrap; color: var(--cream); background: var(--plum); border-radius: var(--r-pill); }
.vlt-sticker__title { margin: 0 0 .6em; font: var(--display-weight) 1.35em/1.1 var(--font-display); font-variation-settings: var(--display-vs); font-synthesis: none; letter-spacing: var(--display-tracking); word-spacing: var(--display-ws); }
.vlt-check { display: flex; align-items: center; gap: .75em; min-height: 44px; cursor: pointer; font: inherit; }
.vlt-check__input {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 26px; height: 26px; margin: 0; cursor: pointer;
  border: 2.5px solid currentColor; border-radius: 7px; background: transparent center / 72% no-repeat;
  transition: background-color var(--dur-1), border-color var(--dur-1), transform var(--dur-2) var(--ease-spring);
}
.vlt-check__input::after { content: ""; position: absolute; inset: -10px; }   /* 46 x 46 hit area */
.vlt-check__input[type="radio"] { border-radius: 50%; }
.vlt-check__input:checked { background-color: var(--coral); border-color: var(--coral); transform: scale(1.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23170E17' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.vlt-check__input[type="radio"]:checked { background-image: radial-gradient(circle, var(--plum) 0 30%, transparent 33%); }
.vlt-check__input[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- 12. TAB BAR, DOT, COUNTER ---------- */
.vlt-tabbar { display: flex; justify-content: space-around; align-items: flex-end; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--mulberry); border-top: 1px solid var(--line); box-shadow: 0 -10px 28px rgba(8, 3, 8, .4); }
.vlt-tabbar--fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar); }
.vlt-tab {
  --hue: var(--coral); --on-hue: var(--plum);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; min-height: 56px; padding: 0; margin: 0;
  font: 700 max(calc(var(--fs-xs) * var(--vlt-scale)), var(--min-fs))/1 var(--font-body); letter-spacing: .02em; text-decoration: none; color: var(--cream-dim); background: none; border: 0; cursor: pointer; transition: color var(--dur-2);
}
.vlt-tab::before { content: ""; position: absolute; top: -8px; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--hue); transform: scaleX(0); transition: transform var(--dur-2) var(--ease-out); }
.vlt-tab__icon { display: grid; place-items: center; width: 3em; height: 2.4em; color: inherit; transition: transform var(--dur-2) var(--ease-spring); }
.vlt-tab__icon .vlt-icon { width: 1.9em; height: 1.9em; --vlt-icon-stroke: 2.2; }
.vlt-tab:hover, .vlt-tab.is-hover { color: var(--cream); }
.vlt-tab:active .vlt-tab__icon { transform: scale(.92); }
.vlt-tab.is-active, .vlt-tab[aria-current="page"], .vlt-tab[aria-selected="true"] { color: var(--hue); }
.vlt-tab.is-active::before, .vlt-tab[aria-current="page"]::before, .vlt-tab[aria-selected="true"]::before { transform: scaleX(1); }
.vlt-dot { position: absolute; top: -4px; right: 8px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; font: 800 var(--fs-xs)/1 var(--font-body); color: var(--cream); background: var(--berry-strong); border: 2px solid var(--mulberry); border-radius: var(--r-pill); }
.vlt-dot:empty { min-width: 14px; width: 14px; height: 14px; padding: 0; }

.vlt-counter {   /* score chip: value + outlined line icon, no coin */
  --hue: var(--amber); --hue-hi: var(--amber-hi); --lip: var(--amber); --on-hue: var(--plum); --hue-text: var(--t-ok);
  display: inline-flex; align-items: center; gap: .5em; height: 2.2em; padding: 0 .95em 0 .6em; font-size: calc(18px * var(--vlt-scale)); color: var(--cream);
  background: var(--mulberry-2); border-radius: var(--r-pill);
}
.vlt-counter__icon { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; color: var(--hue-text); box-shadow: inset 0 0 0 2px var(--hue); }
.vlt-counter__icon .vlt-icon { width: .85em; height: .85em; --vlt-icon-stroke: 1.75; }
.vlt-counter__value { font: 800 1.1em/1 var(--font-body); font-variant-numeric: tabular-nums lining-nums; color: var(--cream); }
.vlt-counter__label { font-size: max(.62em, var(--min-fs)); color: var(--cream-dim); }
.vlt-counter--sm { font-size: calc(14px * var(--vlt-scale)); } .vlt-counter--lg { font-size: calc(26px * var(--vlt-scale)); }

/* ---------- 13. LEADERBOARD + TV PLATE ---------- */
.vlt-lb { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; font-size: calc(16px * var(--vlt-scale)); }
.vlt-lb-head { display: grid; grid-template-columns: 2.2em 2.4em 1fr auto; gap: .75em; padding: 0 1em .2em .5em; color: var(--cream-dim); }
.vlt-lb-row {
  display: grid; grid-template-columns: 2.2em 2.4em minmax(0, 1fr) auto auto; align-items: center; gap: .75em; padding: .5em 1em .5em .5em; color: var(--cream);
  background: var(--mulberry); border: 1.5px solid transparent; border-radius: var(--r-md); transition: transform var(--dur-4) var(--ease-spring), background var(--dur-2), border-color var(--dur-2);
}
.vlt-lb-row__rank { display: grid; place-items: center; width: 2em; height: 2em; justify-self: center; border-radius: 50%; font: 800 1.05em/1 var(--font-body); font-variant-numeric: tabular-nums lining-nums; color: var(--cream-dim); }
.vlt-lb-row[data-rank="1"] .vlt-lb-row__rank { color: var(--plum); background: var(--amber); }   /* rank 1 only */
.vlt-lb-row__avatar { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; overflow: hidden; font: 800 max(.9em, var(--min-fs))/1 var(--font-body); color: var(--plum); background: var(--av, var(--team-1)); }
.vlt-lb-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.vlt-lb-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 1.05em; }
.vlt-lb-row__sub { display: block; font: 600 max(.78em, var(--min-fs))/1.3 var(--font-body); color: var(--cream-dim); overflow: hidden; text-overflow: ellipsis; }
.vlt-lb-row__badge { display: flex; gap: .3em; align-items: center; color: var(--cream-dim); }
.vlt-lb-row__pts { font: 800 1.45em/1 var(--font-body); font-variant-numeric: tabular-nums lining-nums; color: var(--cream); text-align: right; min-width: 2.5em; }
.vlt-lb-row__delta { display: block; font: 800 max(.5em, var(--min-fs))/1.2 var(--font-body); font-variant-numeric: tabular-nums lining-nums; color: var(--cream); }
.vlt-lb-row__delta.is-neg { color: var(--t-wrong); }
.vlt-lb-row.is-me { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, var(--mulberry)); }
.vlt-lb-row.is-leader { background: color-mix(in srgb, var(--amber) 12%, var(--mulberry)); box-shadow: inset 6px 0 0 var(--amber); }
.vlt-lb-row.is-leader .vlt-lb-row__pts { color: var(--amber); }
.vlt-tv .vlt-lb-row__name { font-size: 1.3em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; hyphens: none; line-height: 1.1; } .vlt-tv .vlt-lb-row__pts { font-size: 1.6em; }   /* TV: team names wrap to 2 lines before they truncate */
.vlt-teamname { min-width: 0; overflow: hidden; overflow-wrap: break-word; hyphens: none; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }   /* the one team-name rule: wrap at spaces, max 2 lines, ellipsis last (put the full name in title / aria-label) */

.vlt-plate {   /* TV team plate, 216px: fits 26-char names on two lines */
  --pc: var(--team-1);
  position: relative; display: grid; gap: 4px; width: 216px; min-height: 96px; padding: 12px 14px; color: var(--cream); background: var(--mulberry); border: 3px solid transparent; border-radius: var(--r-md);
  box-shadow: inset 0 5px 0 var(--pc);
}
.vlt-plate__name { margin: 4px 0 0; font: 800 max(24px, var(--min-fs))/1.12 var(--font-body); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; hyphens: none; }   /* wrap at spaces, never mid-word */
.vlt-plate__score { font: 800 max(20px, var(--min-fs))/1 var(--font-body); font-variant-numeric: tabular-nums lining-nums; color: var(--cream-dim); }
.vlt-plate.is-ready { border-color: var(--ready); } .vlt-plate.is-ready::after { content: ""; position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--ready) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23170E17' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 68% no-repeat; }
.vlt-plate.is-ready .vlt-plate__name { padding-right: 34px; }
.vlt-plate.is-buzzed { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 16%, var(--mulberry)); }

/* ---------- 14. ANSWERS ---------- */
.vlt-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; width: 100%; }
.vlt-answers--stack { grid-template-columns: 1fr; }
.vlt-answers--stack .vlt-answer { min-height: 64px; }
.vlt-answer {
  --key-bg: var(--mulberry-3); --key-fg: var(--cream);
  position: relative; overflow: hidden; display: flex; align-items: center; gap: .75em; width: 100%; min-height: max(56px, 3.5em); margin: 0; padding: .65em 1em .65em .65em;
  font: 700 max(calc(var(--fs-answer) * var(--vlt-scale)), var(--min-fs))/1.25 var(--font-body); text-align: left; color: var(--cream); cursor: pointer;
  background: var(--mulberry); border: 2px solid var(--line); border-radius: var(--r-md); box-shadow: 0 3px 0 var(--plum-deep);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), opacity var(--dur-2), background-color var(--dur-2), border-color var(--dur-2);
}
.vlt-answer:hover:not([disabled]), .vlt-answer.is-hover { background: var(--mulberry-2); border-color: var(--line-strong); }
.vlt-answer:active:not([disabled]), .vlt-answer.is-active { transform: translateY(2px); box-shadow: 0 1px 0 var(--plum-deep); }
.vlt-answer[disabled] { cursor: default; }
.vlt-answer__key { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: .55em; font: 800 1em/1 var(--font-body); color: var(--key-fg); background: var(--key-bg); }
.vlt-answer__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vlt-answer__mark { flex: none; display: none; width: 1.6em; height: 1.6em; }
.vlt-answer__tag { flex: none; margin-left: auto; font-size: max(calc(14px * var(--vlt-scale)), var(--min-fs)); }
/* tap = lock immediately (matches play.html). is-picked is only the ~120ms press flash; is-locked is the resting state. */
.vlt-answer.is-picked, .vlt-answer.is-locked { --key-bg: var(--coral); --key-fg: var(--plum); background: color-mix(in srgb, var(--coral) 24%, var(--mulberry)); border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral), 0 3px 0 var(--plum-deep); }
.vlt-answer.is-locked { cursor: default; }
.vlt-answer.is-correct { --key-bg: var(--plum); --key-fg: var(--amber); color: var(--plum); background: var(--amber); border-color: var(--amber); box-shadow: 0 3px 0 color-mix(in srgb, var(--plum-deep) 55%, var(--amber)); animation: vlt-correct var(--dur-correct) var(--ease-spring) both, vlt-ring var(--dur-5) var(--ease-out) both; }
.vlt-answer.is-wrong { --key-bg: var(--plum); --key-fg: var(--berry-lt); color: var(--cream); background: var(--berry-strong); border-color: var(--berry-lt); box-shadow: 0 3px 0 color-mix(in srgb, var(--plum-deep) 55%, var(--berry-strong)); animation: vlt-shake var(--dur-wrong) var(--ease-out) both; }
.vlt-answer.is-missed { --key-fg: var(--cream-dim); color: var(--cream-dim); background: transparent; border: 2px dashed var(--berry-lt); box-shadow: none; }   /* you did not answer */
.vlt-answer.is-correct .vlt-answer__mark, .vlt-answer.is-wrong .vlt-answer__mark { display: block; animation: vlt-mark-pop 320ms var(--ease-spring) 80ms both; }
.vlt-answer.is-dim, .vlt-answer.is-disabled { opacity: var(--dim); filter: saturate(.5); cursor: default; }
.vlt-answer--compact { min-height: 44px; padding: .45em .8em .45em .45em; font-size: max(calc(var(--fs-sm) * var(--vlt-scale)), var(--min-fs)); }

/* ---------- 15. BUZZER ---------- */
.vlt-buzzer {   /* default = armed */
  --hue: var(--coral); --size: min(74vw, 300px);
  position: relative; isolation: isolate; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; width: var(--size); height: var(--size); margin: 0 0 12px; padding: 0; cursor: pointer;
  font: var(--display-weight) calc(var(--size) * .17)/1 var(--font-display); font-variation-settings: var(--display-vs); font-synthesis: none; letter-spacing: var(--display-tracking); color: var(--plum);
  background: var(--hue); border: 0; border-radius: 50%; box-shadow: 0 10px 0 color-mix(in srgb, var(--plum-deep) 55%, var(--hue)), 0 22px 40px rgba(8, 3, 8, .5);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-2); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
@media (max-height: 700px) { .vlt-buzzer { --size: min(54vw, 210px); } }
.vlt-buzzer::before { content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 50%; border: 3px solid var(--hue); opacity: .5; animation: vlt-ring-pulse 1.2s ease-out infinite; }
.vlt-buzzer:active, .vlt-buzzer.is-active { transform: translateY(8px); box-shadow: 0 2px 0 color-mix(in srgb, var(--plum-deep) 55%, var(--hue)), 0 8px 18px rgba(8, 3, 8, .5); }
.vlt-buzzer__state { color: inherit; opacity: .85; font-size: max(calc(var(--size) * .06), 13px); }
.vlt-buzzer.is-sent { --hue: var(--cream); animation: none; } .vlt-buzzer.is-sent::before { display: none; }   /* tapped, waiting for the server: "You buzzed" */
.vlt-buzzer.is-out { cursor: not-allowed; color: var(--cream-dim); background: var(--mulberry); transform: none; box-shadow: none; outline: 3px dashed var(--berry-lt); outline-offset: 6px; }   /* locked out this question */
.vlt-buzzer.is-out::before { display: none; }
.vlt-buzzer[disabled], .vlt-buzzer.is-dead { cursor: not-allowed; color: var(--cream-dim); background: var(--mulberry-2); transform: none; box-shadow: 0 6px 0 var(--mulberry); }
.vlt-buzzer[disabled]::before, .vlt-buzzer.is-dead::before { display: none; }

/* ---------- 16. TIMER (the lens) ---------- */
.vlt-timer {
  --size: calc(76px * var(--vlt-scale)); --ring-w: 13%; --c: var(--amber); --track: rgba(255, 241, 228, .12); --rim: calc(var(--size) * .045); --rim-c: var(--mulberry-3);
  position: relative; display: grid; place-items: center; flex: none; width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--plum); box-shadow: 0 0 0 var(--rim) var(--rim-c); transition: --vlt-p 250ms linear;
}
.vlt-timer::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--vlt-p) * 1turn), var(--track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w) - 1px), #000 calc(100% - var(--ring-w))); mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w) - 1px), #000 calc(100% - var(--ring-w))); }
.vlt-timer::after { content: ""; position: absolute; inset: calc(var(--rim) * -1); border-radius: 50%; pointer-events: none;   /* the lens glint: 22deg cream arc at 10 o'clock on the rim */
  background: conic-gradient(from 289deg, rgba(255, 241, 228, .55) 0 22deg, transparent 22deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--rim) - 1px), #000 calc(100% - var(--rim))); mask: radial-gradient(farthest-side, transparent calc(100% - var(--rim) - 1px), #000 calc(100% - var(--rim))); }
.vlt-timer__num { position: relative; font: 800 calc(var(--size) * .46)/1 var(--font-body); color: var(--cream); font-variant-numeric: tabular-nums lining-nums; }
.vlt-timer__label { position: absolute; bottom: 17%; font-size: max(calc(var(--size) * .1), var(--min-fs)); letter-spacing: .08em; color: var(--cream-dim); }
.vlt-timer.is-low { --c: var(--berry-lt); --ring-w: 17%; --track: rgba(255, 127, 166, .22); --rim-c: var(--berry-lt); }
.vlt-timer.is-low .vlt-timer__num { color: var(--berry-lt); animation: vlt-tick 1s ease-in-out infinite; }
.vlt-timer.is-paused { --c: var(--cream-dim); } .vlt-timer.is-done { --c: var(--mulberry-3); }
.vlt-timer--sm { --size: calc(46px * var(--vlt-scale)); } .vlt-timer--lg { --size: calc(120px * var(--vlt-scale)); } .vlt-timer--xl { --size: calc(180px * var(--vlt-scale)); --ring-w: 10%; }
.vlt-timer--sm .vlt-timer__num { font-size: calc(var(--size) * .5); }

/* ---------- 17. PROGRESS, METER ---------- */
.vlt-progress { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; height: calc(12px * var(--vlt-scale)); }
.vlt-progress > li { flex: 1; min-width: 4px; border-radius: var(--r-pill); background: var(--mulberry-3); transition: background var(--dur-3), transform var(--dur-3); }
.vlt-progress > li.is-done { background: var(--cream-dim); }
.vlt-progress > li.is-current { background: var(--coral); transform: scaleY(1.3); }
.vlt-progress > li.is-correct { background: var(--amber); }
.vlt-progress > li.is-wrong { background: var(--berry); }
.vlt-progress--lg { height: calc(20px * var(--vlt-scale)); }
.vlt-progress-label { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: 6px; color: var(--cream-dim); }
.vlt-progress-label b { color: var(--cream); font-weight: 800; }
.vlt-meter { position: relative; height: calc(14px * var(--vlt-scale)); border-radius: var(--r-pill); background: var(--mulberry-3); overflow: hidden; }
.vlt-meter__fill { height: 100%; width: calc(var(--vlt-p) * 100%); min-width: 0; border-radius: var(--r-pill); background: var(--m, var(--coral)); transition: width var(--dur-4) var(--ease-out); }
.vlt-meter--primary { --m: var(--coral); } .vlt-meter--accent, .vlt-meter--ok { --m: var(--amber); } .vlt-meter--info, .vlt-meter--volt { --m: var(--cream-dim); }
.vlt-meter--secondary, .vlt-meter--bad, .vlt-meter--hot, .vlt-meter--warn { --m: var(--berry); }

/* ---------- 18. FIELDS ---------- */
.vlt-field { display: grid; gap: 7px; align-content: start; font-size: calc(16px * var(--vlt-scale)); }
.vlt-field__label { color: var(--cream-dim); }
.vlt-field__control { display: flex; align-items: center; gap: .6em; min-height: 52px; padding: 0 .35em 0 1em; color: var(--cream-dim); background: var(--plum); border: 2px solid var(--line-ctl); border-radius: var(--r-md); transition: border-color var(--dur-2), color var(--dur-2); }
.vlt-field__control:has(.vlt-input--code) { min-height: 64px; }
.vlt-field__control:hover, .vlt-field__control.is-hover { border-color: var(--line-ctl-hover); }
.vlt-field__control:focus-within, .vlt-field__control.is-focus { border-color: var(--coral); color: var(--coral); outline: 3px solid var(--coral); outline-offset: 2px; }
.vlt-field__control--area { align-items: flex-start; border-radius: var(--r-lg); padding-top: .2em; padding-right: 1em; }
.vlt-input { flex: 1; min-width: 0; width: 100%; margin: 0; padding: .8em .6em .8em 0; appearance: none; -webkit-appearance: none; font: 500 1em/1.3 var(--font-body); color: var(--cream); background: transparent; border: 0; outline: 0; }
.vlt-input:focus-visible { outline: none; }
.vlt-input::placeholder { color: var(--cream-faint); }
.vlt-input:-webkit-autofill { -webkit-text-fill-color: var(--cream); -webkit-box-shadow: 0 0 0 40px var(--mulberry) inset; caret-color: var(--cream); }
textarea.vlt-input { resize: vertical; min-height: 6em; line-height: 1.5; }
select.vlt-input { cursor: pointer; padding-right: 2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF1E4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .6em center / 1.1em no-repeat; }
select.vlt-input option { background: var(--mulberry); color: var(--cream); }
.vlt-input--code { text-align: center; font: 500 2em/1 var(--font-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--cream); padding-left: .3em; }   /* room code: the one place DM Mono lives */
.vlt-field__hint { margin: 0; font-size: max(.85em, var(--min-fs)); line-height: 1.4; color: var(--cream-dim); }
.vlt-field.is-invalid .vlt-field__control, .vlt-field__control:has([aria-invalid="true"]) { border-color: var(--berry-lt); color: var(--berry-lt); }
.vlt-field.is-invalid .vlt-field__hint { color: var(--t-wrong); }
.vlt-field.is-disabled .vlt-field__control, .vlt-field__control:has(:disabled) { opacity: .5; background: var(--mulberry); cursor: not-allowed; }
.vlt-pw__toggle { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--cream-dim); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.vlt-pw__toggle:hover { color: var(--cream); background: rgba(255, 241, 228, .08); }
.vlt-pw__toggle .vlt-pw__hide, .vlt-pw__toggle[aria-pressed="true"] .vlt-pw__show { display: none; }
.vlt-pw__toggle[aria-pressed="true"] .vlt-pw__hide { display: block; }

/* ---------- 19. SEGMENTED, STEPPER, SWITCH, DROPZONE ---------- */
.vlt-seg { display: inline-flex; gap: 4px; max-width: 100%; padding: 4px; border-radius: var(--r-pill); background: var(--plum); box-shadow: inset 0 0 0 2px var(--line-ctl); font-size: calc(var(--fs-sm) * var(--vlt-scale)); }
.vlt-seg > button { min-height: 44px; min-width: 0; padding: .5em 1.1em; border: 0; border-radius: var(--r-pill); cursor: pointer; font: 800 1em/1 var(--font-body); color: var(--cream-dim); background: transparent; transition: color var(--dur-2), background var(--dur-2); }
.vlt-seg > button:hover, .vlt-seg > button.is-hover { color: var(--cream); background: rgba(255, 241, 228, .08); }
.vlt-seg > button[aria-pressed="true"], .vlt-seg > button.is-active { color: var(--plum); background: var(--coral); }
@media (max-width: 400px) { .vlt-seg > button { padding-inline: .7em; } }
.vlt-stepper { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: var(--r-pill); background: var(--plum); box-shadow: inset 0 0 0 2px var(--line-ctl); font-size: calc(var(--fs-md) * var(--vlt-scale)); }
.vlt-stepper > button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--plum); background: var(--coral); box-shadow: 0 2px 0 color-mix(in srgb, var(--plum-deep) 55%, var(--coral)); transition: transform var(--dur-1), background var(--dur-1); }
.vlt-stepper > button:hover, .vlt-stepper > button.is-hover { background: var(--coral-hi); }
.vlt-stepper > button:active, .vlt-stepper > button.is-active { transform: translateY(2px); box-shadow: 0 0 0 var(--coral); }
.vlt-stepper > button[disabled] { color: var(--disabled); background: var(--mulberry-2); box-shadow: 0 2px 0 var(--mulberry); cursor: not-allowed; }
.vlt-stepper__value { min-width: 2.4em; text-align: center; font: 800 1.4em/1 var(--font-body); color: var(--cream); font-variant-numeric: tabular-nums lining-nums; }
.vlt-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 52px; height: 44px; margin: 0; cursor: pointer; background: transparent; border: 0; }   /* 52 x 44 hit area, 52 x 30 visual */
.vlt-switch::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 30px; border-radius: var(--r-pill); background: var(--plum); box-shadow: inset 0 0 0 2px var(--line-ctl); transition: background var(--dur-2), box-shadow var(--dur-2); }
.vlt-switch::after { content: ""; position: absolute; top: 12px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream-dim); transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2); }
.vlt-switch:checked::before { background: var(--coral); box-shadow: none; } .vlt-switch:checked::after { transform: translateX(22px); background: var(--plum); }
.vlt-switch[disabled] { opacity: .4; cursor: not-allowed; }
.vlt-dropzone { display: grid; place-items: center; gap: 10px; padding: 28px 20px; text-align: center; cursor: pointer; color: var(--cream-dim); font-size: calc(var(--fs-sm) * var(--vlt-scale));
  border: 2px dashed var(--line-ctl); border-radius: var(--r-lg); background: transparent; transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease-out); }
.vlt-dropzone:hover, .vlt-dropzone:focus-within, .vlt-dropzone.is-hover { border-color: var(--coral); color: var(--cream); }
.vlt-dropzone.is-dragover { border-style: solid; border-color: var(--coral); background: rgba(255, 111, 89, .09); transform: scale(1.01); }
.vlt-dropzone .vlt-icon { width: 2.2em; height: 2.2em; color: var(--coral); }

/* ---------- 20. TOAST ---------- */
.vlt-toasts { position: fixed; z-index: var(--z-toast); top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 440px); pointer-events: none; }
.vlt-toasts.is-static { position: static; transform: none; width: 100%; pointer-events: auto; }
.vlt-toast {
  --hue: var(--cream); --hue-hi: var(--cream-hi); --lip: var(--cream-lip); --on-hue: var(--plum); --hue-text: var(--cream);
  pointer-events: auto; display: flex; align-items: center; gap: .7em; padding: .55em 1.1em .55em .55em; color: var(--cream); font: 600 max(calc(var(--fs-md) * var(--vlt-scale)), var(--min-fs))/1.35 var(--font-body);
  background: var(--mulberry-2); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 10px; box-shadow: var(--sh-pop), inset 0 0 0 1.5px var(--line); animation: vlt-toast-in var(--dur-3) var(--ease-spring) both;
}
.vlt-toast--bad, .vlt-toast--warn, .vlt-toast--ok { background: color-mix(in srgb, var(--hue) 16%, var(--mulberry-2)); box-shadow: var(--sh-pop), inset 0 0 0 1.5px color-mix(in srgb, var(--hue) 55%, transparent); }
.vlt-toast__icon { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; color: var(--on-hue); background: var(--hue); }
.vlt-toast__icon .vlt-icon { --vlt-icon-stroke: 2.6; }
.vlt-toast__text { flex: 1; min-width: 0; }
.vlt-toast.is-leaving { animation: vlt-toast-out var(--dur-2) var(--ease-out) forwards; }

/* ---------- 21. PAUSE, DOCK, FLASH, CODE TILES, HINT, MISC ---------- */
.vlt-pause { position: fixed; inset: 0; z-index: var(--z-pause); display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: rgba(23, 14, 23, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.vlt-pause.is-static { position: relative; inset: auto; z-index: auto; min-height: 420px; border-radius: var(--r-xl); }
.vlt-pause__title { margin: 0; font: var(--display-weight) var(--fs-3xl)/var(--display-lh) var(--font-display); font-variation-settings: var(--display-vs); font-synthesis: none; letter-spacing: var(--display-tracking); word-spacing: var(--display-ws); color: var(--cream); }
.vlt-pause__sub { margin: 0; max-width: 32ch; font: 600 var(--fs-md)/1.4 var(--font-body); color: var(--cream-dim); }
.vlt-pause__dots { display: flex; gap: 8px; } .vlt-pause__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); animation: vlt-breath 1.6s ease-in-out infinite; } .vlt-pause__dots i:nth-child(2) { animation-delay: .2s; } .vlt-pause__dots i:nth-child(3) { animation-delay: .4s; }
.vlt-tv .vlt-pause__title { font-size: 132px; } .vlt-tv .vlt-pause__sub { font-size: var(--fs-2xl); }
.vlt-dock { position: sticky; bottom: 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--plum) 38%); }
.vlt-dock > * { max-width: 420px; margin-inline: auto; }
.vlt-scorebar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: var(--mulberry); border-top: 1px solid var(--line); }
.vlt-flash { position: fixed; inset: 0; z-index: var(--z-pause); pointer-events: none; opacity: 0; }
.vlt-flash.is-on { animation: vlt-flash var(--dur-4) ease-out both; }
.vlt-flash--ok { background: radial-gradient(circle at 50% 62%, rgba(255, 182, 39, .45), transparent 70%); }
.vlt-flash--bad { background: radial-gradient(circle at 50% 62%, rgba(214, 51, 108, .42), transparent 70%); }
.vlt-codetiles { display: flex; flex-wrap: wrap; gap: 12px; }
.vlt-codetiles span { display: grid; place-items: center; width: 96px; height: 116px; border-radius: 18px; font: 500 88px/1 var(--font-mono); color: var(--plum); background: var(--cream); box-shadow: 0 6px 0 var(--cream-lip); }   /* TV join code */
.vlt-codetiles.is-sm span { width: 64px; height: 76px; font-size: var(--fs-3xl); border-radius: 12px; box-shadow: 0 4px 0 var(--cream-lip); }
.vlt-hint { display: flex; align-items: center; gap: .5em; margin: 0; font: 700 max(calc(var(--fs-md) * var(--vlt-scale)), var(--min-fs))/1.35 var(--font-body); color: var(--cream); }
.vlt-hint .vlt-icon { color: var(--coral); }
.vlt-bulbs { display: flex; flex-wrap: nowrap; min-width: 0; max-width: 100%; contain: inline-size; justify-content: center; gap: 10px; overflow: hidden; pointer-events: none; }   /* restyled: win/podium confetti dots, 3 colours */
.vlt-bulb { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--confetti-1); }
.vlt-bulb:nth-child(3n+2) { background: var(--confetti-2); } .vlt-bulb:nth-child(3n+3) { background: var(--confetti-3); width: 6px; height: 6px; margin-top: 1.5px; }
.vlt-avatar { display: inline-grid; place-items: center; flex: none; width: calc(40px * var(--vlt-scale)); height: calc(40px * var(--vlt-scale)); border-radius: 50%; font: 800 max(calc(var(--fs-sm) * var(--vlt-scale)), var(--min-fs))/1 var(--font-body); color: var(--plum); background: var(--av, var(--team-1)); }
.vlt-team-1, .vlt-team-2, .vlt-team-3, .vlt-team-4, .vlt-team-5, .vlt-team-6, .vlt-team-7, .vlt-team-8 { --on-face: var(--plum); }
.vlt-team-1 { --av: var(--team-1); --face: var(--team-1); } .vlt-team-2 { --av: var(--team-2); --face: var(--team-2); } .vlt-team-3 { --av: var(--team-3); --face: var(--team-3); } .vlt-team-4 { --av: var(--team-4); --face: var(--team-4); }
.vlt-team-5 { --av: var(--team-5); --face: var(--team-5); } .vlt-team-6 { --av: var(--team-6); --face: var(--team-6); } .vlt-team-7 { --av: var(--team-7); --face: var(--team-7); } .vlt-team-8 { --av: var(--team-8); --face: var(--team-8); }
.vlt-divider { height: 0; margin: var(--sp-5) 0; border: 0; border-top: 2px dotted var(--line-strong); }
.vlt-spinner { display: inline-block; width: 1.2em; height: 1.2em; border-radius: 50%; border: .18em solid var(--coral); border-right-color: transparent; animation: vlt-spin .8s linear infinite; vertical-align: -.2em; }
.vlt-stack { display: flex; flex-direction: column; gap: var(--gap, var(--sp-4)); }
.vlt-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--sp-3)); }
.vlt-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }

/* focus ring on cream surfaces: coral is only 2.3:1 there, so use plum */
.vlt-sticker:focus-visible, .vlt-sticker :focus-visible, .vlt-say :focus-visible { outline-color: var(--plum); }
/* lining figures wherever the display face sets text (Young Serif has lnum; the `font` shorthand resets it, so repeat after the shorthands) */
.vlt-wordmark, .vlt-display, .vlt-h1, .vlt-h2, .vlt-headline, .vlt-ribbon, .vlt-modal__title, .vlt-drawer__title, .vlt-card__title, .vlt-sticker__title, .vlt-buzzer, .vlt-pause__title { font-variant-numeric: lining-nums; }

/* ---------- 22. HUE MODIFIERS (declared LAST so they win over component defaults; consume --hue / --hue-hi / --lip / --on-hue / --hue-text) ---------- */
.vlt-btn--primary, .vlt-pill--primary, .vlt-ribbon--primary, .vlt-modal--primary, .vlt-tile--primary, .vlt-tab--primary, .vlt-counter--primary, .vlt-toast--primary, .vlt-sticker--primary, .vlt-hue-primary
  { --hue: var(--coral); --hue-hi: var(--coral-hi); --lip: var(--coral); --on-hue: var(--plum); --hue-text: var(--t-action); }
.vlt-btn--secondary, .vlt-pill--secondary, .vlt-ribbon--secondary, .vlt-modal--secondary, .vlt-tile--secondary, .vlt-tab--secondary, .vlt-counter--secondary, .vlt-toast--secondary, .vlt-sticker--secondary, .vlt-hue-secondary,
.vlt-btn--bad, .vlt-pill--bad, .vlt-ribbon--bad, .vlt-modal--bad, .vlt-tile--bad, .vlt-tab--bad, .vlt-counter--bad, .vlt-toast--bad, .vlt-sticker--bad, .vlt-hue-bad,
.vlt-btn--hot, .vlt-pill--hot, .vlt-ribbon--hot, .vlt-modal--hot, .vlt-tile--hot, .vlt-tab--hot, .vlt-counter--hot, .vlt-toast--hot, .vlt-sticker--hot, .vlt-hue-hot
  { --hue: var(--berry-strong); --hue-hi: #D63B72; --lip: var(--berry-strong); --on-hue: var(--cream); --hue-text: var(--t-wrong); }
.vlt-btn--accent, .vlt-pill--accent, .vlt-ribbon--accent, .vlt-modal--accent, .vlt-tile--accent, .vlt-tab--accent, .vlt-counter--accent, .vlt-toast--accent, .vlt-sticker--accent, .vlt-hue-accent,
.vlt-btn--ok, .vlt-pill--ok, .vlt-ribbon--ok, .vlt-modal--ok, .vlt-tile--ok, .vlt-tab--ok, .vlt-counter--ok, .vlt-toast--ok, .vlt-sticker--ok, .vlt-hue-ok,
.vlt-btn--gold, .vlt-pill--gold, .vlt-ribbon--gold, .vlt-modal--gold, .vlt-tile--gold, .vlt-tab--gold, .vlt-counter--gold, .vlt-toast--gold, .vlt-sticker--gold, .vlt-hue-gold,
.vlt-btn--green, .vlt-pill--green, .vlt-ribbon--green, .vlt-modal--green, .vlt-tile--green, .vlt-tab--green, .vlt-counter--green, .vlt-toast--green, .vlt-sticker--green, .vlt-hue-green
  { --hue: var(--amber); --hue-hi: var(--amber-hi); --lip: var(--amber); --on-hue: var(--plum); --hue-text: var(--t-ok); }   /* amber: points and correct ONLY */
.vlt-btn--info, .vlt-pill--info, .vlt-ribbon--info, .vlt-modal--info, .vlt-tile--info, .vlt-tab--info, .vlt-counter--info, .vlt-toast--info, .vlt-sticker--info, .vlt-hue-info,
.vlt-btn--volt, .vlt-pill--volt, .vlt-ribbon--volt, .vlt-modal--volt, .vlt-tile--volt, .vlt-tab--volt, .vlt-counter--volt, .vlt-toast--volt, .vlt-sticker--volt, .vlt-hue-volt
  { --hue: var(--cream-dim); --hue-hi: var(--cream); --lip: var(--cream-dim); --on-hue: var(--plum); --hue-text: var(--t-info); }
.vlt-btn--warn, .vlt-pill--warn, .vlt-ribbon--warn, .vlt-modal--warn, .vlt-tile--warn, .vlt-tab--warn, .vlt-counter--warn, .vlt-toast--warn, .vlt-sticker--warn, .vlt-hue-warn
  { --hue: var(--berry-lt); --hue-hi: #FF9DBC; --lip: var(--berry-lt); --on-hue: var(--plum); --hue-text: var(--t-warn); }
.vlt-btn--neutral, .vlt-pill--neutral, .vlt-ribbon--neutral, .vlt-modal--neutral, .vlt-tile--neutral, .vlt-tab--neutral, .vlt-counter--neutral, .vlt-toast--neutral, .vlt-sticker--neutral, .vlt-hue-neutral,
.vlt-btn--cream, .vlt-pill--cream, .vlt-ribbon--cream, .vlt-modal--cream, .vlt-tile--cream, .vlt-tab--cream, .vlt-counter--cream, .vlt-toast--cream, .vlt-sticker--cream, .vlt-hue-cream,
.vlt-toast--ready, .vlt-pill--ready
  { --hue: var(--cream); --hue-hi: var(--cream-hi); --lip: var(--cream-lip); --on-hue: var(--plum); --hue-text: var(--cream); }
.vlt-btn--surface, .vlt-pill--surface, .vlt-ribbon--surface, .vlt-modal--surface, .vlt-tile--surface, .vlt-tab--surface, .vlt-counter--surface, .vlt-toast--surface, .vlt-sticker--surface, .vlt-hue-surface,
.vlt-btn--curtain, .vlt-pill--curtain, .vlt-ribbon--curtain, .vlt-modal--curtain, .vlt-tile--curtain, .vlt-tab--curtain, .vlt-counter--curtain, .vlt-toast--curtain, .vlt-sticker--curtain, .vlt-hue-curtain
  { --hue: var(--mulberry-3); --hue-hi: #5C3F58; --lip: var(--plum-deep); --on-hue: var(--cream); --hue-text: var(--cream); }

/* ---------- 23. KEYFRAMES ---------- */
@keyframes vlt-breath { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes vlt-spin { to { transform: rotate(360deg); } }
@keyframes vlt-pop { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes vlt-star-in { 0% { opacity: 0; transform: scale(.2) rotate(-30deg); } 100% { opacity: 1; } }
@keyframes vlt-correct { 0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } }
@keyframes vlt-ring { 0% { box-shadow: 0 3px 0 color-mix(in srgb, var(--plum-deep) 55%, var(--amber)), 0 0 0 8px color-mix(in srgb, var(--amber) 35%, transparent); } 100% { box-shadow: 0 3px 0 color-mix(in srgb, var(--plum-deep) 55%, var(--amber)), 0 0 0 8px color-mix(in srgb, var(--amber) 0%, transparent); } }
@keyframes vlt-mark-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes vlt-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes vlt-tick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes vlt-toast-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vlt-toast-out { to { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes vlt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes vlt-ring-pulse { 0% { transform: scale(.96); opacity: .55; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes vlt-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }                         /* reveal / list rows: use with --ease-expo, 550ms, + var(--stagger) per item */
@keyframes vlt-podium { from { transform: translateY(100%); } to { transform: none; } }                                                  /* podium columns: --dur-podium, --ease-expo */
@keyframes vlt-confetti { 0% { transform: translateY(-10vh) rotate(0); opacity: 1; } 100% { transform: translateY(100vh) rotate(540deg); opacity: 0; } }   /* JS-spawned pieces use --confetti-1..3, --dur-confetti */
@keyframes vlt-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 24. REDUCED MOTION: state changes stay, movement goes ---------- */
@media (prefers-reduced-motion: reduce) {
  [class*="vlt-"], [class*="vlt-"]::before, [class*="vlt-"]::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .vlt-hero--float img, .vlt-timer.is-low .vlt-timer__num, .vlt-buzzer::before, .vlt-pause__dots i, .vlt-answer.is-wrong { animation: none !important; }
  .vlt-spinner, .vlt-btn.is-loading::after { animation: none !important; border-style: dotted; border-right-color: var(--coral); }   /* static dots instead of a spinning ring */
  .vlt-btn.is-loading::after { border-color: var(--on-hue); }
  .vlt-timer.is-low { --ring-w: 20%; }   /* urgency stays visible without the pulse */
}

/* ---------- RESKIN PHASE 1: brand lockup images (A2 one-line in headers, A1 stacked in hero spots) ----------
   Markup: <a class="kb-logo" href="/"><img class="kb-logo-img" src="/img/brand/lockup-a2-transparent-for-plum.svg" alt="Know Brainer" width="220" height="73"></a>
   Size with --logo-w (A2 min 220px, A1 min 200px). The -for-cream lockups were removed as unused; they live in design/system/logo/final if a light ground returns. */
.kb-logo { display: block; margin: 0; line-height: 0; text-decoration: none; }
.kb-logo-img { display: block; width: var(--logo-w, 220px); max-width: 100%; height: auto; margin-inline: auto; }
.kb-logo--hero { --logo-w: min(76vw, 360px); }

/* Plain text links (no class) on the dark ground: coral + underline, never browser blue. Coral on plum ≈ 6.9:1. */
.vlt-page a:not([class]){color:var(--coral); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px}
.vlt-page a:not([class]):hover{text-decoration-thickness:2px}