@import url("/fonts/fonts.css"); /* self-hosted: no visitor data is sent to Google */
/* ==========================================================================
   KNOW BRAINER — vlt-ui.css  ·  "Voltage & Velvet" component library
   One <link rel="stylesheet" href="/vlt-ui.css"> per page (fonts come with it).
   Living styleguide: /ui-kit.html   ·   Icons: /icons.svg (Lucide, ISC)

   TYPE SYSTEM (binding for every page — 4 families + Monoton):
     --font-marquee  Monoton         the KNOW BRAINER wordmark ONLY. Never body, never numbers.
     --font-chrome   Bungee          game chrome: buttons, pills, ribbons, tab labels, modal/tile
                                     header strips, answer letter keys. Vegas signage face — always
                                     short UPPERCASE strings (≤ 3 words). Never paragraphs.
     --font-display  Anton           numerals + headlines: scores, timers, ranks, team names on TV,
                                     screen titles. Condensed, projector-legible.
     --font-body     Hanken Grotesk  all reading text: questions, answers, inputs, descriptions.
     --font-mono     Space Mono      instrument labels: eyebrows, field labels, room codes, meta data.
     Legacy aliases kept for existing pages: --marq --disp --body --mono.

   SEMANTIC COLOUR (never swap): gold = points/primary · volt cyan = watts/power/focus/"picked" ·
   hot magenta = wrong/sabotage/danger · green = correct ONLY · cream = neutral text.

   SCALE: every component's base size = Npx × var(--vlt-scale). Put .vlt-tv on the 1280×720 TV
   stage (scale 1.4, read from 3 m) and .vlt-scale-sm for dense host/admin panels. Size modifiers
   (--sm / --lg / --xl) multiply on top. Internals are em-based so they follow.

   MOTION (Council v1): ambient = bulbs breathing 3.6 s ease-in-out, brightness 92↔108 %; nothing
   ambient faster than 1 Hz; no strobes; transform/opacity/filter only; prefers-reduced-motion
   disables it all (bottom of file).

   HUE MODIFIERS: --gold --volt --hot --green --cream --curtain work on .vlt-btn .vlt-pill
   .vlt-ribbon .vlt-modal .vlt-tile .vlt-tab .vlt-counter .vlt-toast .vlt-sticker (and .vlt-hue-*
   on anything). They set --face-hi/--face/--face-lo/--lip/--on-face, which the bevels consume.

   PASSWORD TOGGLE (pages own the JS — paste once):
     document.querySelectorAll('.vlt-pw__toggle').forEach(b=>b.addEventListener('click',()=>{
       const i=b.closest('.vlt-field__control').querySelector('input'),show=i.type==='password';
       i.type=show?'text':'password';b.setAttribute('aria-pressed',String(show));
       b.setAttribute('aria-label',show?'Hide password':'Show password');}));
   ========================================================================== */

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

:root {
  /* palette — existing names, do not rename */
  --curtain: #5C0A0A; --curtain-deep: #3A0606; --curtain-black: #180101;
  --gold: #F4C542; --gold-dim: #C9A237; --cream: #FCE7C8; --cream-dim: #B8A387;
  --volt: #35E0F0; --volt-hot: #FF3D7F; --ink: #140303; --green: #7CE38B;
  /* bevel ramps (hi → face → lo, lip = the darker 3D underside) */
  --gold-hi: #FFE38F;  --gold-lo: #DDA526;  --gold-lip: #8E5B0C;
  --volt-hi: #A4F7FD;  --volt-lo: #17B4C6;  --volt-lip: #0B6670;
  --hot-hi: #FF92B8;   --hot-lo: #DE1F63;   --hot-lip: #860C38;
  --green-hi: #C2F8C8; --green-lo: #4CC160; --green-lip: #22773A;
  --cream-hi: #FFF8EC; --cream-lo: #E9CB9F; --cream-lip: #8F6C3E;
  --curtain-hi: #94201F; --curtain-face: #6E1111; --curtain-lo: #4D0909; --curtain-lip: #210202;
  /* surfaces & lines */
  --surface-1: rgba(20, 3, 3, .72); --surface-2: #2A0404; --surface-well: rgba(10, 1, 1, .62);
  --line: rgba(244, 197, 66, .26); --line-strong: rgba(244, 197, 66, .55); --line-dark: rgba(10, 1, 1, .85);
  --text: var(--cream); --text-dim: var(--cream-dim); --on-gold: var(--ink);
  /* type */
  --font-marquee: "Monoton", cursive;
  --font-chrome: "Bungee", "Anton", system-ui, sans-serif;
  --font-display: "Anton", "Bungee", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, Consolas, monospace;
  --marq: var(--font-marquee); --disp: var(--font-display); --body: var(--font-body); --mono: var(--font-mono);
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px; --fs-2xl: 40px; --fs-3xl: 56px; --fs-4xl: 80px;
  /* spacing / radius */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;
  /* depth */
  --lip-h: 6px;
  --sh-card: inset 0 1px 0 rgba(255, 230, 160, .12), 0 12px 32px rgba(0, 0, 0, .42);
  --sh-pop: 0 24px 60px rgba(0, 0, 0, .6);
  --sh-sticker: 6px 6px 0 var(--ink);
  --glow-gold: 0 0 24px rgba(244, 197, 66, .45); --glow-volt: 0 0 24px rgba(53, 224, 240, .5);
  --glow-hot: 0 0 24px rgba(255, 61, 127, .5); --glow-green: 0 0 24px rgba(124, 227, 139, .5);
  --focus: 3px solid var(--volt);
  /* motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 600ms; --dur-breath: 3.6s;
  --vlt-scale: 1;
  color-scheme: dark;
}
.vlt-tv { --vlt-scale: 1.4; }
.vlt-scale-sm { --vlt-scale: .86; }

/* ---------- base (zero specificity; pages may override) ---------- */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(.vlt-page) {
  margin: 0; min-height: 100dvh; color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(244, 197, 66, .13), transparent 62%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 22px, rgba(0, 0, 0, .14) 34px, rgba(255, 200, 170, .025) 52px, rgba(0, 0, 0, 0) 64px),
    linear-gradient(180deg, var(--curtain) 0%, var(--curtain-deep) 55%, var(--curtain-black) 100%);
  background-attachment: fixed; background-color: var(--curtain-deep);
}
:where([class*="vlt-"]):focus-visible { outline: var(--focus); outline-offset: 3px; }
.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; }

/* ---------- typography helpers ---------- */
.vlt-wordmark { font-family: var(--font-marquee); font-weight: 400; color: var(--gold); line-height: .95; letter-spacing: .03em;
  font-size: clamp(40px, 9vw, 96px); text-shadow: 0 0 4px rgba(244, 197, 66, .9), 0 0 24px rgba(244, 197, 66, .5), 0 0 64px rgba(244, 197, 66, .25); }
.vlt-display, .vlt-h1, .vlt-h2, .vlt-h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .015em; line-height: 1; margin: 0; color: var(--gold); }
.vlt-h1 { font-size: calc(var(--fs-2xl) * var(--vlt-scale)); }
.vlt-h2 { font-size: calc(var(--fs-xl) * var(--vlt-scale)); }
.vlt-h3 { font-size: calc(var(--fs-lg) * var(--vlt-scale)); color: var(--cream); }
.vlt-chrome { font-family: var(--font-chrome); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.vlt-eyebrow { font-family: var(--font-mono); font-size: calc(var(--fs-xs) * var(--vlt-scale)); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--volt); }
.vlt-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.vlt-mono { font-family: var(--font-mono); }
.vlt-muted { color: var(--text-dim); }
.vlt-text-gold { color: var(--gold); } .vlt-text-volt { color: var(--volt); } .vlt-text-hot { color: var(--volt-hot); } .vlt-text-green { color: var(--green); }

/* ---------- 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; }

/* ---------- 1. bevelled button (3D lip) ---------- */
.vlt-btn {
  --btn-fs: 18px; --lip-h: 6px;
  --face-hi: var(--gold-hi); --face: var(--gold); --face-lo: var(--gold-lo); --lip: var(--gold-lip); --on-face: var(--ink);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: max(44px, 2.7em); padding: .74em 1.45em .68em; margin: 0;
  font-family: var(--font-chrome); font-size: calc(var(--btn-fs) * var(--vlt-scale)); font-weight: 400; line-height: 1; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--on-face); cursor: pointer; user-select: none;
  border: 2px solid var(--line-dark); border-radius: .8em;
  background: linear-gradient(180deg, var(--face-hi) 0%, var(--face) 46%, var(--face-lo) 100%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 var(--lip-h) 0 var(--lip), 0 calc(var(--lip-h) + 6px) 16px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), filter var(--dur-2);
  -webkit-tap-highlight-color: transparent;
}
.vlt-btn::before { /* gloss cap */
  content: ""; position: absolute; z-index: -1; inset: 3px .55em auto; height: 42%; border-radius: .6em .6em 1.2em 1.2em;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none;
}
.vlt-btn:hover { filter: brightness(1.07) saturate(1.05); }
.vlt-btn:active { transform: translateY(calc(var(--lip-h) - 1px)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14), 0 1px 0 var(--lip), 0 3px 8px rgba(0, 0, 0, .4); }
.vlt-btn .vlt-icon { width: 1.15em; height: 1.15em; --vlt-icon-stroke: 2.6; }
.vlt-btn--curtain, .vlt-btn--hot { text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.vlt-btn--ghost { --on-face: var(--cream); background: rgba(20, 3, 3, .35); border-color: var(--line-strong); box-shadow: none; text-shadow: none; }
.vlt-btn--ghost::before { display: none; }
.vlt-btn--ghost:hover { background: rgba(244, 197, 66, .1); border-color: var(--gold); filter: none; }
.vlt-btn--ghost:active { transform: scale(.97); box-shadow: none; }
.vlt-btn--sm { --btn-fs: 14px; --lip-h: 4px; padding: .7em 1.1em .64em; }
.vlt-btn--lg { --btn-fs: 23px; --lip-h: 7px; }
.vlt-btn--xl { --btn-fs: 32px; --lip-h: 9px; border-radius: .7em; padding: .7em 1.6em .64em; }
.vlt-btn--block { display: flex; width: 100%; }
.vlt-btn--icon { padding: 0; width: max(44px, 2.7em); }
.vlt-btn[disabled], .vlt-btn[aria-disabled="true"] { cursor: not-allowed; filter: grayscale(.75) brightness(.62); transform: none; box-shadow: 0 3px 0 var(--lip); }
.vlt-btn.is-loading { color: transparent; text-shadow: none; pointer-events: none; }
.vlt-btn.is-loading::after { content: ""; position: absolute; width: 1.1em; height: 1.1em; border-radius: 50%; border: .18em solid var(--on-face); border-right-color: transparent; animation: vlt-spin .8s linear infinite; }

/* ---------- 2. pill badge ---------- */
.vlt-pill {
  --face-hi: var(--gold-hi); --face: var(--gold); --face-lo: var(--gold-lo); --lip: var(--gold-lip); --on-face: var(--ink);
  display: inline-flex; align-items: center; gap: .45em; padding: .46em 1em .4em; border-radius: var(--r-pill);
  font-family: var(--font-chrome); font-size: calc(13px * var(--vlt-scale)); line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--face); background: rgba(20, 3, 3, .72); border: 2px solid var(--face);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), 0 2px 0 rgba(0, 0, 0, .35);
}
.vlt-pill--solid { color: var(--on-face); background: linear-gradient(180deg, var(--face-hi), var(--face) 55%, var(--face-lo)); border-color: var(--line-dark); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 3px 0 var(--lip); }
.vlt-pill--sm { font-size: calc(10px * var(--vlt-scale)); padding: .45em .8em .38em; }
.vlt-pill--lg { font-size: calc(18px * var(--vlt-scale)); padding: .5em 1.2em .44em; }
.vlt-pill .vlt-icon { width: 1.1em; height: 1.1em; }

/* ---------- 3. ribbon banner + stars ---------- */
.vlt-ribbon {
  --face-hi: var(--gold-hi); --face: var(--gold); --face-lo: var(--gold-lo); --lip: var(--gold-lip); --on-face: var(--ink);
  position: relative; isolation: isolate; display: inline-block; padding: 0 1.5em; color: var(--on-face);
  font-family: var(--font-chrome); font-size: calc(22px * var(--vlt-scale)); line-height: 1; letter-spacing: .05em; text-transform: uppercase; text-align: center;
}
.vlt-ribbon::before, .vlt-ribbon::after { /* tails: notched ends + darker fold where they tuck under the band */
  content: ""; position: absolute; z-index: 0; top: .5em; bottom: -.5em; width: 2.3em;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35));
}
.vlt-ribbon::before { left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, .75em 50%); background: linear-gradient(270deg, var(--lip) 0 .8em, var(--face-lo) .8em); }
.vlt-ribbon::after { right: 0; clip-path: polygon(0 0, 100% 0, calc(100% - .75em) 50%, 100% 100%, 0 100%); background: linear-gradient(90deg, var(--lip) 0 .8em, var(--face-lo) .8em); }
.vlt-ribbon__band {
  position: relative; z-index: 1; display: block; padding: .55em 1.25em .48em; border-radius: .2em; white-space: nowrap;
  background: linear-gradient(180deg, var(--face-hi), var(--face) 52%, var(--face-lo));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .16), 0 4px 10px rgba(0, 0, 0, .35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
.vlt-ribbon__kicker { display: block; font-family: var(--font-mono); font-weight: 700; font-size: .42em; letter-spacing: .28em; margin-bottom: .35em; opacity: .8; text-shadow: none; }
.vlt-ribbon--sm { font-size: calc(15px * 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(252, 231, 200, .2); --vlt-icon-fill: currentColor; --vlt-icon-stroke: 1.5; filter: drop-shadow(0 .06em 0 rgba(0, 0, 0, .5)); }
.vlt-stars > .vlt-star:nth-child(2) { width: 1.3em; height: 1.3em; transform: translateY(-.22em); }
.vlt-star.is-on { color: var(--gold); filter: drop-shadow(0 .06em 0 var(--gold-lip)) drop-shadow(0 0 .22em rgba(244, 197, 66, .55)); }
.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)); }

/* ---------- 4. modal (header strip + close) & backdrop ---------- */
.vlt-backdrop {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(12, 1, 1, .74); 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 {
  --face-hi: var(--gold-hi); --face: var(--gold); --face-lo: var(--gold-lo); --lip: var(--gold-lip); --on-face: var(--ink);
  position: relative; width: min(100%, var(--modal-w, 440px)); max-height: calc(100dvh - 32px); overflow: auto; margin: 0; padding: 0 0 22px;
  color: var(--cream); font-size: calc(16px * var(--vlt-scale));
  background: linear-gradient(180deg, #4C0A0A 0%, var(--curtain-deep) 42%, var(--ink) 100%);
  border: 3px solid var(--line-dark); border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 2px rgba(244, 197, 66, .32), inset 0 3px 0 2px rgba(255, 228, 150, .14), 0 10px 0 var(--curtain-black), var(--sh-pop);
}
.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(12, 1, 1, .74); backdrop-filter: blur(5px); }
.vlt-modal__head {
  display: flex; align-items: center; gap: .5em; margin: 14px 14px 0; padding: .3em .3em .3em 1em; min-height: 3em; border-radius: var(--r-pill);
  font-family: var(--font-chrome); font-size: 1.05em; letter-spacing: .06em; text-transform: uppercase; color: var(--on-face);
  background: linear-gradient(180deg, var(--face-hi), var(--face) 55%, var(--face-lo));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 4px 0 var(--lip);
}
.vlt-modal__head:has(.vlt-modal__close) { padding-left: calc(max(44px, 2.4em) + .3em); }
.vlt-modal__title { flex: 1; margin: 0; font: inherit; text-align: center; line-height: 1.1; }
.vlt-modal__close {
  flex: none; display: grid; place-items: center; width: max(44px, 2.4em); height: max(44px, 2.4em); padding: 0; cursor: pointer;
  color: var(--ink); background: radial-gradient(circle at 50% 35%, #FFFFFF, var(--cream) 60%, var(--cream-lo)); border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .4); transition: transform var(--dur-1) var(--ease-out);
}
.vlt-modal__close:hover { transform: rotate(90deg); } .vlt-modal__close:active { transform: scale(.9); }
.vlt-modal__close .vlt-icon { width: 1.1em; height: 1.1em; --vlt-icon-stroke: 3; }
.vlt-modal__hero { display: block; width: 46%; margin: 8px auto -6px; }
.vlt-modal__body { padding: 20px 24px 0; line-height: 1.55; }
.vlt-modal__foot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 22px 24px 4px; }
.vlt-modal--wide { --modal-w: 640px; }

/* ---------- 5. card / panel ---------- */
.vlt-card { --card-pad: 20px; position: relative; padding: var(--card-pad); color: var(--cream); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(76, 10, 10, .6), rgba(20, 3, 3, .9)); border: 2px solid var(--line); box-shadow: var(--sh-card); }
.vlt-card--frame { /* Raid Rush glossy bevelled frame */
  border: 2px solid var(--gold-hi);
  box-shadow: 0 0 0 2px var(--gold-lip), 0 0 0 5px var(--ink), inset 0 0 0 2px rgba(20, 3, 3, .9), inset 0 4px 0 2px rgba(255, 228, 150, .16), 0 16px 34px rgba(0, 0, 0, .55);
}
.vlt-card--inset { background: var(--surface-well); border: 1px solid rgba(0, 0, 0, .5); box-shadow: inset 0 3px 10px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 230, 160, .07); }
.vlt-card--glow { border-color: var(--line-strong); box-shadow: var(--sh-card), var(--glow-gold); }
.vlt-card--tight { --card-pad: 12px; }
.vlt-card__title { margin: 0 0 .4em; font-family: var(--font-display); font-weight: 400; font-size: calc(24px * var(--vlt-scale)); text-transform: uppercase; color: var(--gold); line-height: 1; }

/* ---------- 6. tile with header strip ---------- */
.vlt-tile {
  --face-hi: var(--volt-hi); --face: var(--volt); --face-lo: var(--volt-lo); --lip: var(--volt-lip); --on-face: var(--ink);
  position: relative; display: flex; flex-direction: column; overflow: hidden; margin: 0; padding: 0; text-align: center; color: var(--cream);
  font: 600 calc(15px * var(--vlt-scale))/1.3 var(--font-body);
  background: linear-gradient(180deg, #520B0B, #2A0404); border: 2px solid var(--line-dark); border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 160, .1), 0 5px 0 var(--curtain-black), 0 10px 20px rgba(0, 0, 0, .35);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), filter var(--dur-2);
}
.vlt-tile__head { padding: .5em .7em .42em; font-family: var(--font-chrome); font-size: .78em; letter-spacing: .07em; text-transform: uppercase; color: var(--on-face);
  background: linear-gradient(180deg, var(--face-hi), var(--face) 60%, var(--face-lo)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16); }
.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; }
button.vlt-tile, a.vlt-tile { cursor: pointer; text-decoration: none; }
button.vlt-tile:hover, a.vlt-tile:hover { transform: translateY(-3px); }
button.vlt-tile:active, a.vlt-tile:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(255, 230, 160, .1), 0 2px 0 var(--curtain-black); }
.vlt-tile.is-selected, .vlt-tile[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--gold), 0 5px 0 var(--gold-lip), var(--glow-gold); }
.vlt-tile.is-locked { filter: grayscale(.7) brightness(.7); cursor: not-allowed; }
.vlt-tile.is-locked .vlt-tile__body > * { opacity: .55; }

/* ---------- 7. sticker card + round checklist inputs ---------- */
.vlt-sticker {
  --face-hi: var(--gold-hi); --face: var(--gold); --face-lo: var(--gold-lo); --lip: var(--gold-lip); --on-face: var(--ink); --tilt: 0deg;
  position: relative; padding: 22px 20px 20px; color: var(--on-face); background: var(--face);
  border: 3px solid var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-sticker); transform: rotate(var(--tilt));
  font: 500 calc(15px * 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.8deg; } .vlt-sticker--tilt-r { --tilt: 1.6deg; }
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(--ink); }
a.vlt-sticker:active, button.vlt-sticker:active, label.vlt-sticker:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.vlt-sticker__tab { position: absolute; top: -.95em; left: 50%; transform: translateX(-50%); padding: .3em .9em; white-space: nowrap;
  font: 700 .72em/1 var(--font-mono); letter-spacing: .06em; color: var(--ink); background: var(--cream-hi); border: 2px solid var(--ink); border-radius: var(--r-pill); }
.vlt-sticker__title { display: flex; align-items: center; gap: .7em; margin: 0 0 .7em; font-family: var(--font-chrome); font-size: 1.25em; line-height: 1; text-transform: uppercase; }
.vlt-sticker__title::before, .vlt-sticker__title::after { content: ""; flex: 1; height: .38em; border-block: 3px solid currentColor; opacity: .85; }
.vlt-check { display: flex; align-items: center; gap: .75em; min-height: 44px; cursor: pointer; font: inherit; }
.vlt-check__input {
  appearance: none; -webkit-appearance: none; flex: none; width: 1.6em; height: 1.6em; margin: 0; cursor: pointer;
  border: 2.5px solid currentColor; border-radius: 50%; background: rgba(255, 255, 255, .14) center / 70% no-repeat;
  transition: background-color var(--dur-1), transform var(--dur-2) var(--ease-spring);
}
.vlt-check__input:checked { background-color: var(--ink); transform: scale(1.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4C542' 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(--gold) 0 38%, transparent 40%); }
.vlt-check__input:focus-visible { outline: var(--focus); outline-offset: 3px; }

/* ---------- 8. bottom tab bar ---------- */
.vlt-tabbar { display: flex; justify-content: space-around; align-items: flex-end; gap: 6px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(46, 5, 5, .97), rgba(20, 3, 3, .99)); border-top: 2px solid var(--line); box-shadow: 0 -12px 30px rgba(0, 0, 0, .45); }
.vlt-tabbar--fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; }
.vlt-tab {
  --face-hi: var(--curtain-hi); --face: var(--curtain-face); --face-lo: var(--curtain-lo); --lip: var(--curtain-lip); --on-face: var(--cream);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; min-height: 56px; padding: 0; margin: 0;
  font-family: var(--font-chrome); font-size: calc(10px * var(--vlt-scale)); letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  color: var(--cream-dim); background: none; border: 0; cursor: pointer; transition: transform var(--dur-2) var(--ease-spring), color var(--dur-2);
}
.vlt-tab__icon { display: grid; place-items: center; width: 4.6em; height: 4.4em; border-radius: 1.2em; color: var(--on-face); border: 2px solid var(--line-dark);
  background: linear-gradient(180deg, var(--face-hi), var(--face) 55%, var(--face-lo));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .42), 0 4px 0 var(--lip); filter: saturate(.55) brightness(.78); transition: filter var(--dur-2); }
.vlt-tab__icon .vlt-icon { width: 2.3em; height: 2.3em; --vlt-icon-stroke: 2.4; }
.vlt-tab:hover .vlt-tab__icon { filter: saturate(.85) brightness(.92); }
.vlt-tab.is-active, .vlt-tab[aria-current="page"], .vlt-tab[aria-selected="true"] { color: var(--gold); transform: translateY(-4px); }
.vlt-tab.is-active .vlt-tab__icon, .vlt-tab[aria-current="page"] .vlt-tab__icon, .vlt-tab[aria-selected="true"] .vlt-tab__icon { filter: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .42), 0 4px 0 var(--lip), 0 0 18px rgba(244, 197, 66, .35); }
.vlt-dot { position: absolute; top: -6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center;
  font: 400 9px/1 var(--font-chrome); letter-spacing: .04em; color: var(--ink); background: var(--volt-hot); border: 2px solid var(--ink); border-radius: var(--r-pill); }
.vlt-dot:empty { min-width: 14px; width: 14px; height: 14px; padding: 0; }

/* ---------- 9. resource counter ---------- */
.vlt-counter {
  --face-hi: var(--gold-hi); --face: var(--gold); --face-lo: var(--gold-lo); --lip: var(--gold-lip); --on-face: var(--ink);
  display: inline-flex; align-items: center; gap: .5em; height: 2.2em; padding: 0 .9em 0 0; margin-left: .3em;
  font-size: calc(18px * var(--vlt-scale)); color: var(--cream);
  background: rgba(20, 3, 3, .75); border: 2px solid var(--line-dark); border-radius: var(--r-pill); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 230, 160, .08);
}
.vlt-counter__icon { display: grid; place-items: center; width: 2.25em; height: 2.25em; margin-left: -.35em; border-radius: 50%; color: var(--on-face); border: 2px solid var(--ink);
  background: radial-gradient(circle at 50% 30%, var(--face-hi), var(--face) 55%, var(--face-lo)); box-shadow: 0 3px 0 var(--lip); }
.vlt-counter__icon .vlt-icon { width: 1.15em; height: 1.15em; --vlt-icon-stroke: 2.6; }
.vlt-counter__value { font-family: var(--font-display); font-size: 1.15em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--face); }
.vlt-counter__label { font: 700 .55em/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cream-dim); }
.vlt-counter--sm { font-size: calc(14px * var(--vlt-scale)); } .vlt-counter--lg { font-size: calc(26px * var(--vlt-scale)); }

/* ---------- 10. leaderboard ---------- */
.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.4em 2.6em 1fr auto; gap: .75em; padding: 0 1em .2em .5em;
  font: 700 .66em/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim); }
.vlt-lb-row {
  display: grid; grid-template-columns: 2.4em 2.6em minmax(0, 1fr) auto auto; align-items: center; gap: .75em; padding: .5em 1em .5em .5em; color: var(--cream);
  background: linear-gradient(90deg, rgba(86, 12, 12, .82), rgba(42, 4, 4, .82)); border: 2px solid var(--line-dark); border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255, 230, 160, .09), 0 4px 0 var(--curtain-black);
  transition: transform var(--dur-4) var(--ease-spring), box-shadow var(--dur-2), background var(--dur-2);
}
.vlt-lb-row__rank { display: grid; place-items: center; width: 2em; height: 2em; justify-self: center; border-radius: 50%;
  font-family: var(--font-display); font-size: 1.15em; line-height: 1; color: var(--cream-dim); }
.vlt-lb-row[data-rank="1"] .vlt-lb-row__rank, .vlt-lb-row[data-rank="2"] .vlt-lb-row__rank, .vlt-lb-row[data-rank="3"] .vlt-lb-row__rank {
  color: var(--ink); border: 2px solid var(--ink); background: radial-gradient(circle at 50% 30%, var(--m-hi), var(--m) 55%, var(--m-lo)); box-shadow: 0 3px 0 var(--m-lip); }
.vlt-lb-row[data-rank="1"] { --m-hi: var(--gold-hi); --m: var(--gold); --m-lo: var(--gold-lo); --m-lip: var(--gold-lip); }
.vlt-lb-row[data-rank="2"] { --m-hi: #FFFFFF; --m: #D9D4CC; --m-lo: #A9A196; --m-lip: #5E574D; }
.vlt-lb-row[data-rank="3"] { --m-hi: #F7C29A; --m: #D98B52; --m-lo: #B0642F; --m-lip: #5F3013; }
.vlt-lb-row__avatar { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; overflow: hidden;
  font: 400 .9em/1 var(--font-chrome); color: var(--ink); background: var(--av, var(--volt)); border: 2px solid var(--ink); box-shadow: 0 0 0 2px rgba(255, 230, 160, .22); }
.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: 700; font-size: 1.05em; }
.vlt-lb-row__sub { display: block; font: 400 .7em/1.3 var(--font-mono); letter-spacing: .08em; color: var(--cream-dim); overflow: hidden; text-overflow: ellipsis; }
.vlt-lb-row__badge { display: flex; gap: .3em; align-items: center; color: var(--volt); }
.vlt-lb-row__pts { font-family: var(--font-display); font-size: 1.45em; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; text-align: right; min-width: 2.5em; }
.vlt-lb-row__delta { display: block; font: 700 .48em/1.2 var(--font-mono); color: var(--green); letter-spacing: .04em; }
.vlt-lb-row__delta.is-neg { color: var(--volt-hot); }
.vlt-lb-row.is-leader .vlt-lb-row__badge { color: var(--gold); }
.vlt-lb-row.is-me { border-color: var(--volt); box-shadow: 0 0 0 2px rgba(53, 224, 240, .3), 0 4px 0 var(--volt-lip); }
.vlt-lb-row.is-leader { background: linear-gradient(90deg, rgba(244, 197, 66, .3), rgba(86, 12, 12, .85) 60%); border-color: var(--gold-lip); box-shadow: inset 0 1px 0 rgba(255, 230, 160, .2), 0 4px 0 var(--gold-lip), var(--glow-gold); }

/* ---------- 11. answer tiles A/B/C/D ---------- */
.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-answer {
  --key-hi: var(--gold-hi); --key: var(--gold); --key-lo: var(--gold-lo); --key-lip: var(--gold-lip); --a-lip: var(--curtain-black);
  position: relative; overflow: hidden; display: flex; align-items: center; gap: .75em; width: 100%; min-height: max(56px, 3.5em); margin: 0; padding: .7em 1em .7em .7em;
  font: 600 calc(17px * var(--vlt-scale))/1.25 var(--font-body); text-align: left; color: var(--cream); cursor: pointer;
  background: linear-gradient(180deg, #5E0D0D, #3B0707); border: 2px solid var(--line-dark); border-radius: var(--r-md);
  box-shadow: inset 0 2px 0 rgba(255, 230, 160, .13), 0 5px 0 var(--a-lip), 0 9px 18px rgba(0, 0, 0, .35);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), opacity var(--dur-2), filter var(--dur-2), background var(--dur-2);
}
.vlt-answer:hover:not([disabled]) { filter: brightness(1.1); }
.vlt-answer:active:not([disabled]) { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 230, 160, .13), 0 1px 0 var(--a-lip); }
.vlt-answer[disabled] { cursor: default; }
.vlt-answer__key { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: .5em; border: 2px solid var(--ink);
  font: 400 1.05em/1 var(--font-chrome); color: var(--ink); background: linear-gradient(180deg, var(--key-hi), var(--key) 55%, var(--key-lo)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--key-lip); }
.vlt-answer__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vlt-answer__mark { flex: none; display: none; width: 1.4em; height: 1.4em; }
.vlt-answer.is-picked { --key-hi: var(--volt-hi); --key: var(--volt); --key-lo: var(--volt-lo); --key-lip: var(--volt-lip); --a-lip: var(--volt-lip);
  background: linear-gradient(180deg, #0F4E57, #0A3037); border-color: var(--volt); box-shadow: 0 0 0 3px rgba(53, 224, 240, .28), 0 5px 0 var(--a-lip), var(--glow-volt); }
.vlt-answer.is-correct { --key-hi: var(--cream-hi); --key: var(--cream); --key-lo: var(--cream-lo); --key-lip: var(--green-lip); --a-lip: var(--green-lip);
  color: var(--ink); background: linear-gradient(180deg, var(--green-hi), var(--green) 50%, var(--green-lo)); border-color: var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 5px 0 var(--a-lip), var(--glow-green); animation: vlt-correct 520ms var(--ease-spring) both; }
.vlt-answer.is-wrong { --key-hi: var(--hot-hi); --key: var(--volt-hot); --key-lo: var(--hot-lo); --key-lip: var(--hot-lip); --a-lip: var(--hot-lip);
  background: linear-gradient(180deg, #74102F, #4A0A1E); border-color: var(--volt-hot); animation: vlt-shake 420ms var(--ease-out) both; }
.vlt-answer.is-correct .vlt-answer__mark, .vlt-answer.is-wrong .vlt-answer__mark { display: block; }
.vlt-answer.is-dim { opacity: .38; filter: saturate(.45); }
.vlt-answer--compact { min-height: 44px; padding: .45em .8em .45em .45em; font-size: calc(15px * var(--vlt-scale)); }

/* ---------- 12. timer ring ---------- */
.vlt-timer {
  --size: calc(76px * var(--vlt-scale)); --ring-w: 13%; --c: var(--volt); --track: rgba(252, 231, 200, .1);
  position: relative; display: grid; place-items: center; flex: none; width: var(--size); height: var(--size); border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #4A0909, var(--ink) 75%);
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(244, 197, 66, .3), 0 4px 0 4px var(--curtain-black), 0 10px 22px rgba(0, 0, 0, .45);
  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)));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 60%, transparent)); transition: filter var(--dur-2); }
.vlt-timer__num { position: relative; font-family: var(--font-display); font-size: calc(var(--size) * .42); line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; }
.vlt-timer__label { position: absolute; bottom: 21%; font: 700 calc(var(--size) * .085)/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim); }
.vlt-timer.is-low { --c: var(--volt-hot); }
.vlt-timer.is-low .vlt-timer__num { color: var(--volt-hot); animation: vlt-tick 1s ease-in-out infinite; }
.vlt-timer.is-paused { --c: var(--gold-dim); }
.vlt-timer.is-done { --c: var(--cream-dim); }
.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%; }

/* ---------- 13. segmented progress + glossy meter ---------- */
.vlt-progress { list-style: none; display: flex; gap: 4px; margin: 0; padding: 4px; height: calc(18px * var(--vlt-scale)); border-radius: var(--r-pill);
  background: var(--surface-well); border: 1px solid rgba(0, 0, 0, .55); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 230, 160, .08); }
.vlt-progress > li { flex: 1; min-width: 4px; border-radius: var(--r-pill); background: rgba(252, 231, 200, .1); transition: background var(--dur-3), box-shadow var(--dur-3); }
.vlt-progress > li.is-done { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo)); }
.vlt-progress > li.is-current { background: linear-gradient(180deg, var(--volt-hi), var(--volt) 50%, var(--volt-lo)); box-shadow: 0 0 10px rgba(53, 224, 240, .6); }
.vlt-progress > li.is-correct { background: linear-gradient(180deg, var(--green-hi), var(--green) 50%, var(--green-lo)); }
.vlt-progress > li.is-wrong { background: linear-gradient(180deg, var(--hot-hi), var(--volt-hot) 50%, var(--hot-lo)); }
.vlt-progress--lg { height: calc(26px * var(--vlt-scale)); }
.vlt-progress-label { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: 6px;
  font: 700 calc(11px * var(--vlt-scale))/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim); }
.vlt-progress-label b { color: var(--gold); font-weight: 700; }
.vlt-meter { position: relative; height: calc(18px * var(--vlt-scale)); padding: 3px; border-radius: var(--r-pill); background: var(--surface-well); border: 1px solid rgba(0, 0, 0, .55); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6); }
.vlt-meter__fill { position: relative; height: 100%; width: calc(var(--vlt-p) * 100%); min-width: 0; border-radius: var(--r-pill); overflow: hidden;
  background: linear-gradient(180deg, var(--m-hi, var(--gold-hi)), var(--m, var(--gold)) 50%, var(--m-lo, var(--gold-lo))); transition: width var(--dur-4) var(--ease-out); }
.vlt-meter__fill::after { content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 32%; border-radius: var(--r-pill); background: rgba(255, 255, 255, .45); }
.vlt-meter--volt { --m-hi: var(--volt-hi); --m: var(--volt); --m-lo: var(--volt-lo); } .vlt-meter--hot { --m-hi: var(--hot-hi); --m: var(--volt-hot); --m-lo: var(--hot-lo); }

/* ---------- 14. fields: pill input w/ leading icon, password toggle, select, code ---------- */
.vlt-field { display: grid; gap: 7px; align-content: start; font-size: calc(16px * var(--vlt-scale)); }
.vlt-field__label { font: 700 .7em/1.2 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim); }
.vlt-field__control {
  display: flex; align-items: center; gap: .6em; min-height: 52px; padding: 0 .35em 0 1.1em; color: var(--cream-dim);
  background: linear-gradient(180deg, rgba(10, 1, 1, .8), rgba(46, 5, 5, .8)); border: 2px solid var(--line); border-radius: var(--r-pill);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .5); transition: border-color var(--dur-2), box-shadow var(--dur-2), color var(--dur-2);
}
.vlt-field__control:focus-within { border-color: var(--volt); color: var(--volt); box-shadow: inset 0 3px 7px rgba(0, 0, 0, .5), 0 0 0 3px rgba(53, 224, 240, .28); }
.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: rgba(252, 231, 200, .5); }
.vlt-input:-webkit-autofill { -webkit-text-fill-color: var(--cream); -webkit-box-shadow: 0 0 0 40px #2A0404 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='%23F4C542' 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(--surface-2); color: var(--cream); }
.vlt-input--code { text-align: center; font: 700 1.7em/1 var(--font-mono); letter-spacing: .38em; text-transform: uppercase; color: var(--gold); padding-left: .38em; }
.vlt-field__hint { margin: 0; font-size: .82em; 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(--volt-hot); color: var(--volt-hot); box-shadow: inset 0 3px 7px rgba(0, 0, 0, .5), 0 0 0 3px rgba(255, 61, 127, .22); }
.vlt-field.is-invalid .vlt-field__hint { color: var(--volt-hot); }
.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(252, 231, 200, .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; }

/* ---------- 15. segmented control, stepper, switch, dropzone (builder screens) ---------- */
.vlt-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface-well); border: 1px solid rgba(0, 0, 0, .55); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55); font-size: calc(13px * var(--vlt-scale)); }
.vlt-seg > button { min-height: 40px; padding: .5em 1.1em .44em; border: 0; border-radius: var(--r-pill); cursor: pointer; font: 400 1em/1 var(--font-chrome); letter-spacing: .05em; text-transform: uppercase; color: var(--cream-dim); background: transparent; transition: color var(--dur-2), background var(--dur-2); }
.vlt-seg > button:hover { color: var(--cream); }
.vlt-seg > button[aria-pressed="true"], .vlt-seg > button.is-active { color: var(--ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 2px 0 var(--gold-lip); }
.vlt-stepper { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-well); border: 1px solid rgba(0, 0, 0, .55); font-size: calc(16px * var(--vlt-scale)); }
.vlt-stepper > button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--line-dark); border-radius: 50%; cursor: pointer; color: var(--ink);
  background: radial-gradient(circle at 50% 30%, var(--gold-hi), var(--gold) 60%, var(--gold-lo)); box-shadow: 0 3px 0 var(--gold-lip); transition: transform var(--dur-1); }
.vlt-stepper > button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-lip); }
.vlt-stepper > button[disabled] { filter: grayscale(.8) brightness(.6); cursor: not-allowed; }
.vlt-stepper__value { min-width: 2.4em; text-align: center; font-family: var(--font-display); font-size: 1.4em; color: var(--gold); font-variant-numeric: tabular-nums; }
.vlt-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 52px; height: 30px; margin: 0; cursor: pointer; border-radius: var(--r-pill);
  background: var(--surface-well); border: 2px solid var(--line); transition: background var(--dur-2), border-color var(--dur-2); }
.vlt-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--cream-dim); box-shadow: 0 2px 0 rgba(0, 0, 0, .4); transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2); }
.vlt-switch:checked { background: rgba(53, 224, 240, .22); border-color: var(--volt); }
.vlt-switch:checked::after { transform: translateX(22px); background: var(--volt); }
.vlt-dropzone { display: grid; place-items: center; gap: 10px; padding: 28px 20px; text-align: center; cursor: pointer; color: var(--cream-dim); font-size: calc(15px * var(--vlt-scale));
  border: 3px dashed var(--line-strong); border-radius: var(--r-lg); background: rgba(10, 1, 1, .4); transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease-out); }
.vlt-dropzone:hover, .vlt-dropzone:focus-within { border-color: var(--gold); color: var(--cream); }
.vlt-dropzone.is-dragover { border-style: solid; border-color: var(--volt); background: rgba(53, 224, 240, .08); transform: scale(1.01); }
.vlt-dropzone .vlt-icon { width: 2.2em; height: 2.2em; color: var(--gold); }

/* ---------- 16. toast ---------- */
.vlt-toasts { position: fixed; z-index: 200; 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-toast {
  --face-hi: var(--gold-hi); --face: var(--gold); --face-lo: var(--gold-lo); --lip: var(--gold-lip); --on-face: var(--ink);
  pointer-events: auto; display: flex; align-items: center; gap: .7em; padding: .5em 1.1em .5em .5em; color: var(--cream);
  font: 600 calc(15px * var(--vlt-scale))/1.35 var(--font-body);
  background: linear-gradient(180deg, #3D0707, #1C0202); border: 2px solid var(--ink); border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px var(--face), 0 4px 0 var(--lip), 0 14px 30px rgba(0, 0, 0, .5); animation: vlt-toast-in var(--dur-3) var(--ease-spring) both;
}
.vlt-toast__icon { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; color: var(--on-face); background: radial-gradient(circle at 50% 30%, var(--face-hi), var(--face) 60%, var(--face-lo)); }
.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; }

/* ---------- 17. sidebar & drawer ---------- */
.vlt-sidebar { display: flex; flex-direction: column; gap: 8px; width: var(--sidebar-w, 264px); min-height: 100%; padding: 22px 14px; font-size: calc(15px * var(--vlt-scale));
  background: linear-gradient(180deg, rgba(48, 5, 5, .96), rgba(20, 3, 3, .98)); border-right: 2px 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: 600 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 { color: var(--cream); background: rgba(244, 197, 66, .08); }
.vlt-nav-item.is-active, .vlt-nav-item[aria-current="page"] { color: var(--gold); background: rgba(244, 197, 66, .14); box-shadow: inset 3px 0 0 var(--gold); }
.vlt-nav-label { padding: 14px .9em 4px; font: 700 .66em/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--cream-dim); opacity: .8; }
.vlt-drawer {
  position: fixed; z-index: 150; top: 0; bottom: 0; right: 0; width: min(88vw, 400px); display: flex; flex-direction: column; color: var(--cream);
  background: linear-gradient(180deg, #3E0707, var(--ink)); border-left: 2px solid var(--line); box-shadow: -24px 0 60px rgba(0, 0, 0, .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: 2px solid var(--line); transform: translateX(-105%); }
.vlt-drawer--bottom { top: auto; left: 0; width: auto; max-height: 86dvh; border-left: 0; border-top: 2px 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: rgba(252, 231, 200, .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: 400 calc(20px * var(--vlt-scale))/1 var(--font-display); text-transform: uppercase; color: var(--gold); }
.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); }

/* ---------- 18. hero art, bulbs, avatar, divider, spinner, layout ---------- */
.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::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 197, 66, .22), transparent); }
.vlt-hero img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: radial-gradient(closest-side, #000 64%, transparent 100%); mask-image: radial-gradient(closest-side, #000 64%, transparent 100%); }
.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; }
.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; }
.vlt-bulb { position: relative; flex: none; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255, 251, 220, .75) 0 6%, rgba(255, 240, 180, 0) 20%), radial-gradient(circle at 50% 58%, #FFEE9E 0 14%, #F5C948 34%, #B07914 70%, #3A2107 100%);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .55), 0 0 0 1px rgba(15, 3, 3, .85), 0 0 8px 1px rgba(244, 197, 66, .5), 0 0 18px 3px rgba(244, 197, 66, .22);
  animation: vlt-breath var(--dur-breath) ease-in-out infinite; }
.vlt-bulb:nth-child(3n+2) { animation-delay: -1.2s; } .vlt-bulb:nth-child(3n+3) { animation-delay: -2.4s; }
.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: 400 calc(15px * var(--vlt-scale))/1 var(--font-chrome); color: var(--ink); background: var(--av, var(--volt)); border: 2px solid var(--ink); box-shadow: 0 0 0 2px rgba(255, 230, 160, .22); }
.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(--gold); 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; }

/* ---------- hue modifiers (keep LAST among component rules so they win) ---------- */
.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
  { --face-hi: var(--gold-hi); --face: var(--gold); --face-lo: var(--gold-lo); --lip: var(--gold-lip); --on-face: var(--ink); }
.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
  { --face-hi: var(--volt-hi); --face: var(--volt); --face-lo: var(--volt-lo); --lip: var(--volt-lip); --on-face: var(--ink); }
.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
  { --face-hi: var(--hot-hi); --face: var(--volt-hot); --face-lo: var(--hot-lo); --lip: var(--hot-lip); --on-face: var(--ink); }
.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
  { --face-hi: var(--green-hi); --face: var(--green); --face-lo: var(--green-lo); --lip: var(--green-lip); --on-face: var(--ink); }
.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
  { --face-hi: var(--cream-hi); --face: var(--cream); --face-lo: var(--cream-lo); --lip: var(--cream-lip); --on-face: var(--ink); }
.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
  { --face-hi: var(--curtain-hi); --face: var(--curtain-face); --face-lo: var(--curtain-lo); --lip: var(--curtain-lip); --on-face: var(--cream); }
.vlt-pill--curtain { color: var(--cream); border-color: var(--line-strong); }

/* ---------- keyframes ---------- */
@keyframes vlt-breath { 0%, 100% { filter: brightness(.92); } 50% { filter: brightness(1.08); } }
@keyframes vlt-spin { to { transform: rotate(360deg); } }
@keyframes vlt-pop { from { opacity: 0; transform: translateY(14px) scale(.94); } 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.04); } 100% { transform: scale(1); } }
@keyframes vlt-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 50% { transform: translateX(6px); } 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); } }

/* ---------- 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-bulb, .vlt-hero--float img, .vlt-timer.is-low .vlt-timer__num { animation: none !important; }
  .vlt-btn.is-loading::after, .vlt-spinner { animation: vlt-spin 1.6s linear infinite !important; }
}
/* Stars with .vlt-stars--animate keep their final state when motion is reduced: the 1ms run still ends at opacity 1. */

/* Long labels never spill out of a button: cap the width, and full-width buttons may wrap onto two lines. */
.vlt-btn { max-width: 100%; }
.vlt-btn--block { white-space: normal; text-wrap: balance; line-height: 1.15; }

/* Phones: pills holding long text (e.g. an email address) shrink with an ellipsis; modals never exceed the screen. */
.vlt-pill { max-width: 100%; min-width: 0; }
.vlt-pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vlt-modal { max-width: calc(100vw - 32px); }
.vlt-seg { max-width: 100%; }
.vlt-seg > button { min-width: 0; }
@media (max-width: 400px) { .vlt-seg > button { padding-inline: .7em; letter-spacing: .02em; } }