/* generated for page="game" from theme "light" (skin: cartoon) */

:root {
  --bg-mid: #DDA6C7;
  --bg-top: #E5BCD4;
  --blue: #6C7FE0;
  --board-bg: #1a2a3e;
  --danger: #FF4D4D;
  --dark-purple: #2A2B72;
  --gold: #F0CD87;
  --ink: #201C3D;
  --ok: #5AD08A;
  --paper: #DA95BC;
  --pink: #FF8FC4;
  --purple: #F0579E;
  --qr-bg: #FFFDF9;
  --surface: #FFFDF9;
  --page-image: none;
}

:root { --qr-quiet: 2; }

:root { --shadow: 3px 3px 0; }


@font-face { font-family: 'Figtree'; src: url('/assets/Figtree-Variable.woff2') format('woff2-variations'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/Poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/Poppins-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/Poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }


h1#title, .brand, #final-score, .name, #podium .p-tag, #podium .p-pts, .score, .pin-reveal .pin, .hud-value, #countdown, #leader h1, .msg {
  font-family: 'Figtree', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: none;
}
.kicker, .subtitle, .hud-label, .tag-label, .lead-divider, .place-label, #podium .p-label, #leader .seal, #qr-panel .scan-text, .hint, .pin-reveal .label {
  font-family: 'Figtree', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
body, .rules, .sub, .consent, .tagline {
  font-family: 'Poppins', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
button, button.btn, .btn-primary, #gate button, input.field, #controls button {
  font-family: 'Figtree', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: none;
}

html { color: var(--ink); }

body { color: var(--ink); zoom: 1; }

body {
  background:
    radial-gradient(ellipse 87% 88% at 50% -15%, var(--bg-top) 62%, transparent 62%),
    radial-gradient(ellipse 100% 80% at 50% 5%, var(--bg-mid) 62%, transparent 62%),
    var(--paper);
}

#stage { box-shadow: none; }
.overlay { background: color-mix(in srgb, var(--ink) 90%, transparent); color: var(--surface); }

/* SKIN: cartoon — component overrides that don't vary by switch or token.
 * Generated by /api/theme.css AFTER the token block, @font-face, type-role
 * rules, and the background/shadow/game-box switch blocks — so a rule here
 * at equal specificity to one of those wins the same cascade-order way it
 * wins over each page's own <style>. Everything here reads tokens (--ink,
 * --surface, --shadow, ...) so it follows whichever theme uses this skin.
 *
 * This is exactly theme-conference.css's old "COMPONENT OVERRIDES" section,
 * carved out: the parts that were switches (background shape, shadow style,
 * game-box light/dark, the reveal/editor "stay classic" hack) moved into the
 * generator and the theme JSON; this file is what's left — the actual
 * per-selector contrast/technique fixes, none of which vary by any of that.
 *
 * NONE of this ever targets #stage's surface, #game, #floaters, #tapzones,
 * #sound-toggle, #countdown, --board-bg, or the city editor's #pal/#map
 * canvas fills — those stay dark on purpose, in every theme, every skin. */

/* .brand and h1#title use pink->gold gradient-clip-text
   (background-clip:text; -webkit-text-fill-color:transparent) — legible on
   a dark box, nearly invisible on a light page. filter: drop-shadow(), NOT
   text-shadow: Chromium paints a text-shadow IN FRONT of a background-clip
   fill instead of behind it, reversing the apparent shadow direction.
   filter: drop-shadow() operates on the actual rendered pixels and
   composites correctly behind them. Uses var(--shadow), so it goes flat
   when the theme's shadowStyle is "none" (see the generator: --shadow
   becomes "0 0 0" there, an invisible zero-offset shadow) and vanishes
   automatically for pages assigned the "plain" skin, since this rule never
   applies there at all. */
.brand, h1#title { filter: drop-shadow(var(--shadow) var(--ink)); }

/* ==================================== game.html ======================== */

#combo-track { background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* Solid pastel card instead of a translucent glass tint — mixing toward
   --surface (near-white) rather than toward transparent, so the HUD boxes
   stay visually present against the light page instead of washing out. */
.hud-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 26%, var(--surface)),
                                       color-mix(in srgb, var(--c) 10%, var(--surface)));
}

button.btn {
  color: var(--surface);
  box-shadow: var(--shadow) var(--ink);
}
input.field {
  background: var(--surface);
  color: var(--ink);
}
/* 70%, not 45%: these placeholders are the name/email fields' only labels.
   45% measured 2.9:1 on --surface; 70% is about 6:1. */
input.field::placeholder { color: color-mix(in srgb, var(--ink) 70%, transparent); }

/* Deliberately flat, unlike button.btn above: a hard offset shadow read as
   sharp/harsh at the d-pad's small size and tight 8px grid gaps. No
   box-shadow override here, so the base stylesheet's flat #dpad button
   stays flat under every skin instead of the cartoon skin's generic
   var(--shadow) bleeding through. */
#dpad button {
  background: var(--surface);
  border: 2px solid color-mix(in srgb, var(--ink) 25%, transparent);
  color: var(--ink);
}

/* A light, near-white card. When the game box is dark (gameBoxStyle=dark),
   .overlay sets all its descendants' text to var(--surface) for contrast
   against ITS dark background — .prize-note needs its OWN dark text colour
   since its own card is light regardless of the box around it. */
.prize-note {
  background: color-mix(in srgb, var(--gold) 15%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  color: var(--ink);
}

/* #final-score keeps a shadow even on a dark game box — a big win/lose
   number reads fine on near-black either way. .prize-highlight (the
   rank-note text, e.g. "YOU'RE #3 — GET ON THE BOARD") does NOT: solid gold
   on a dark box is exactly the classic look, no fix needed. */
#final-score { text-shadow: var(--shadow) var(--ink); }

/* ============================================ display.html ============= */

#qr-panel { background: var(--paper); }
#leader { border-right: 2px solid var(--ink); }
#leader .row { background: color-mix(in srgb, var(--ink) 4%, transparent); }
#big-qr { border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }

/* Solid --gold text reads fine on near-black but is low contrast on this
   theme's pink page. Dark ink text instead of gold — same "dark text on a
   colourful tint" move used on the game page's .pill. #leader .seal is the
   "🔒 TOP 3 SEALED" badge; .row .tag.redacted and #podium .p-tag.redacted are
   the blacked-out player-tag placeholder in the #4-10 rows and the podium
   respectively — two different classes, each needs its own override at
   matching specificity to win the cascade. The podium version also needs
   -webkit-text-fill-color overridden alongside plain color — the page's own
   rule sets both to --gold, and the fill-colour is what Chromium paints. */
#leader .seal { color: var(--ink); }
.row .tag.redacted { color: var(--ink); }
#podium .p-pts { color: var(--ink); }
#podium .p-tag.redacted { color: var(--ink); -webkit-text-fill-color: var(--ink); }

/* This page stays flat: no box-shadow anywhere, even where the page's own
   CSS has one (the QR frames' classic blurred purple glow, left over unless
   explicitly cancelled — deleting an override isn't enough, the page's own
   rule just applies unchanged). #qr-panel .brand cancels the shared .brand
   shadow above specifically for this page's instance of it. */
#qr-panel .brand { filter: none; }
#big-qr .frame { box-shadow: none; }
#qr-panel .qr-frame { box-shadow: none; }

#podium {
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 32%, var(--surface)),
                                       color-mix(in srgb, var(--purple) 22%, var(--surface)));
  border: 2px solid var(--ink);
}
/* Redefining the same @keyframes name entirely replaces the classic one.
   The classic version pulses a colour glow, which reads as nothing on a
   light card; this pulses scale instead — a cartoon "breathe". */
@keyframes podium-glow {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* ============================================= session.html ============= */

.card {
  background: var(--surface);
  border: 2px solid var(--ink);
}
input[type=text], input[type=tel] {
  background: var(--surface);
  color: var(--ink);
}
.btn-primary { color: var(--surface); }
.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn-danger {
  background: color-mix(in srgb, var(--danger) 15%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}
.pin-reveal {
  background: color-mix(in srgb, var(--gold) 18%, var(--surface));
  border: 2px solid var(--gold);
}
.pin-reveal .pin { text-shadow: var(--shadow) var(--ink); }
.msg { text-shadow: var(--shadow) var(--ink); }
td { border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
#settings-grid input[type=number] {
  background: var(--surface);
  color: var(--ink);
}
/* GAP FIX: #settings-grid select (the city picker) has no styling at all in
   the page's own CSS — it renders unstyled native OS chrome otherwise. */
#settings-grid select {
  background: var(--surface);
  border: 1px solid var(--purple);
  border-radius: 6px;
  color: var(--ink);
  font-family: inherit;
}

/* ========================================= city-editor.html ============= */

header { background: var(--surface); border-bottom: 2px solid var(--ink); }
.sep { background: color-mix(in srgb, var(--ink) 15%, transparent); }
button, select {
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
}
button:hover { background: color-mix(in srgb, var(--ink) 10%, var(--surface)); }
button.on {
  border-color: var(--purple);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 50%, transparent);
}
button.warn { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
button.go {
  background: color-mix(in srgb, var(--ok) 20%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 55%, transparent);
}
aside { border-right: 2px solid var(--ink); background: var(--surface); }
.panel-head { border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.foot { border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.swatch { border: 1px solid var(--ink); }
#warns { border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.panel-head b, .warnc { text-shadow: var(--shadow) var(--ink); }


#leader { background-color: #F5B7D6; }