/* ─────────────────────────────────────────────────────────────────────────
   Tall Tales & Favorite Things — shared design system
   Palette and type come straight from the party invitation:
   midnight ink, champagne gold, plum and emerald smoke, ivory type.
   ───────────────────────────────────────────────────────────────────────── */

@font-face { font-family: "Bodoni Moda"; src: url("../fonts/BodoniModa-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/BodoniModa-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url("../fonts/Yellowtail-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root, [data-theme] {
  /* Roles keep the invitation's names; themes.css re-colors them.
     gold = accent, ivory = text, ink = surfaces, plum/emerald = atmosphere.
     Channels (r g b) let translucent tints follow the theme. */
  --ink-rgb: 15 11 18;
  --ink-2-rgb: 23 17 27;
  --ivory-rgb: 243 234 219;
  --gold-rgb: 217 174 82;
  --gold-hi-rgb: 242 212 137;
  --gold-lo-rgb: 156 122 47;
  --plum-rgb: 75 33 97;
  --plum-hi-rgb: 122 58 154;
  --emerald-rgb: 30 90 69;
  --emerald-hi-rgb: 47 138 102;
  --bad-rgb: 224 86 106;
  --t0-hi-rgb: 226 71 93;

  --ink: rgb(var(--ink-rgb));
  --ink-0: #050307;
  --ink-2: rgb(var(--ink-2-rgb));
  --ink-3: #221a28;
  --line: rgb(var(--gold-rgb) / 0.28);
  --gold: rgb(var(--gold-rgb));
  --gold-hi: rgb(var(--gold-hi-rgb));
  --gold-lo: rgb(var(--gold-lo-rgb));
  --accent-deep: #b88a33;
  --on-accent: #1c1306;
  --ivory: rgb(var(--ivory-rgb));
  --ivory-dim: rgb(var(--ivory-rgb) / 0.66);
  --ivory-faint: rgb(var(--ivory-rgb) / 0.38);
  --plum: rgb(var(--plum-rgb));
  --plum-hi: rgb(var(--plum-hi-rgb));
  --emerald: rgb(var(--emerald-rgb));
  --emerald-hi: rgb(var(--emerald-hi-rgb));
  --ruby: #c0283f;
  --good: #3fbf86;
  --bad: rgb(var(--bad-rgb));
  --bad-ink: #ffb3bf;
  --streak: #ffb35c;
  --card-ink: #3b2d44; /* the ivory QR card */
  --card-ink-dim: #5a4a63;
  --card-accent: var(--plum);
  --confetti: #f2d489, #d9ae52, #8e52b8, #2fa275, #f3eadb, #e2475d;

  /* Answer tiles: four classic paint jobs */
  --t0: #b8243a; --t0-hi: rgb(var(--t0-hi-rgb)); --t0-ink: #fff6ee;  /* A · Candy Apple */
  --t1: #c9973c; --t1-hi: #f0cd7a; --t1-ink: #1a1208;  /* B · Champagne   */
  --t2: #17684a; --t2-hi: #2fa275; --t2-ink: #effff6;  /* C · Racing Green */
  --t3: #5e2a82; --t3-hi: #8e52b8; --t3-ink: #faf2ff;  /* D · Mystic Plum */

  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Montserrat", "Avenir Next", system-ui, -apple-system, sans-serif;
  --script: "Yellowtail", "Snell Roundhand", cursive;
  --display: var(--serif); /* headlines, avatar initials, tile letters */
  --display-opsz: "opsz" 36;
  --display-track: -0.015em;
  --radius-btn: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-feature-settings: "lnum" 1, "tnum" 1;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:where(button, a, [role="radio"], [tabindex]):focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* ── Atmosphere: smoke, vignette, film grain ─────────────────────────────── */

/* Sized to the *large* viewport so the background also paints behind mobile
   Safari's floating toolbar instead of leaving a black strip there. */
.atmos { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; overflow: hidden; }
.atmos::before, .atmos::after {
  content: ""; position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%;
  filter: blur(40px); opacity: 0.55; will-change: transform;
}
.atmos::before {
  left: -38vmax; top: -30vmax;
  background: radial-gradient(closest-side, rgb(var(--plum-hi-rgb) / 0.55), rgb(var(--plum-rgb) / 0.25) 55%, transparent);
  animation: drift-a 26s var(--ease-in-out) infinite alternate;
}
.atmos::after {
  right: -40vmax; bottom: -42vmax;
  background: radial-gradient(closest-side, rgb(var(--emerald-hi-rgb) / 0.45), rgb(var(--emerald-rgb) / 0.2) 55%, transparent);
  animation: drift-b 30s var(--ease-in-out) infinite alternate;
}
@keyframes drift-a { to { transform: translate(8vmax, 6vmax) scale(1.08); } }
@keyframes drift-b { to { transform: translate(-7vmax, -5vmax) scale(1.1); } }

.grain {
  position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.9s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(1%, 3%); }
}

/* ── Type ─────────────────────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--sans); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.32em; color: var(--gold); font-size: 0.75rem;
}
.display { font-family: var(--display); font-weight: 800; font-variation-settings: var(--display-opsz); letter-spacing: var(--display-track); line-height: 0.92; color: var(--gold-hi); }
.script { font-family: var(--script); font-weight: 400; color: var(--gold); line-height: 1; }
.italic { font-family: var(--serif); font-style: italic; font-weight: 500; }
/* Bodoni's display cut has hairlines that vanish on projectors, so questions
   and stories set "opsz" 16 (the sturdier text cut). Numbers use Montserrat:
   Bodoni's 1 reads as an I from across a room. Single letters (avatar
   initials, A–D) use "opsz" 6: in the display cut the A's hairline vanishes
   and it reads as a Λ. */

.gold-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-hi) 50%, var(--gold) 82%, transparent);
}

/* ── Deco corner frame (the invitation's gold brackets) ──────────────────── */

.deco {
  --c: var(--gold); --s: 22px; --w: 1.5px; --bg: transparent;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--s) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--s) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--s) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--s) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--s) no-repeat,
    var(--bg);
}

/* ── Paint chips (player avatars) ────────────────────────────────────────── */

.chip {
  --size: 40px;
  width: var(--size); height: var(--size); flex: none; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 6; font-size: calc(var(--size) * 0.5); line-height: 1;
  color: var(--chip-ink, #fff);
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 70% 85%, var(--p2), transparent 70%),
    linear-gradient(150deg, var(--p1), var(--p2));
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.35),
    inset 0 2px 2px rgba(255, 255, 255, 0.25),
    0 0 0 1.5px rgb(var(--gold-rgb) / 0.55),
    0 6px 16px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.chip span { transform: translateY(0.04em); }
[data-paint="candy"]   { --p1: #f0475b; --p2: #7e0a1c; }
[data-paint="grabber"] { --p1: #4aa3ff; --p2: #0f3f8a; }
[data-paint="orange"]  { --p1: #ff9a4a; --p2: #b23d06; }
[data-paint="mystic"]  { --p1: #9a4fd0; --p2: #15584a; }
[data-paint="green"]   { --p1: #35a77a; --p2: #0b3b2a; }
[data-paint="gold"]    { --p1: #f6dc94; --p2: #9c7a2f; --chip-ink: #2a1d07; }
[data-paint="white"]   { --p1: #ffffff; --p2: #b9b2a4; --chip-ink: #2a2230; }
[data-paint="black"]   { --p1: #4a4150; --p2: var(--ink-0); --chip-ink: var(--gold-hi); }
[data-paint="turquoise"] { --p1: #5fd6cc; --p2: #11726f; }
[data-paint="pink"]    { --p1: #ff9cc6; --p2: #c23a7a; }
[data-paint="lime"]    { --p1: #c6f25a; --p2: #4f8f12; --chip-ink: #1c2a06; }
[data-paint="yellow"]  { --p1: #ffe867; --p2: #d49a00; --chip-ink: #2a1f00; }
[data-paint="coral"]   { --p1: #ff9a85; --p2: #d2452f; }
[data-paint="maroon"]  { --p1: #a8344d; --p2: #3e0a17; }
[data-paint="brittany"] { --p1: #b9daf2; --p2: #4f86b3; --chip-ink: #0f2436; }
[data-paint="silver"]  { --p1: #eef1f4; --p2: #8c949e; --chip-ink: #1e252d; }
.chip[data-paint="gold"], .chip[data-paint="white"], .chip[data-paint="lime"], .chip[data-paint="yellow"], .chip[data-paint="brittany"], .chip[data-paint="silver"] { text-shadow: none; }

/* ── Buttons & pills ─────────────────────────────────────────────────────── */

.btn {
  --h: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; white-space: nowrap;
  height: var(--h); padding: 0 1.6em; border-radius: var(--radius-btn);
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--accent-deep));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 -2px 0 rgba(0, 0, 0, 0.2) inset, 0 10px 28px rgb(var(--gold-rgb) / 0.28);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s, filter 0.18s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn:disabled { filter: grayscale(0.7) brightness(0.6); cursor: not-allowed; }
.btn.ghost {
  color: var(--ivory); background: rgb(var(--ivory-rgb) / 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
}

.pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.45em 1em; border-radius: 999px;
  font-family: var(--sans); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-hi); background: rgb(var(--gold-rgb) / 0.1); box-shadow: inset 0 0 0 1px var(--line);
}
.pill.fast { color: #fff; background: var(--t0); box-shadow: 0 0 24px rgb(var(--t0-hi-rgb) / 0.5); }
.pill.double { color: var(--on-accent); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 0 24px rgb(var(--gold-hi-rgb) / 0.45); }

/* Checkered flag strip */
.checker {
  --sq: 10px;
  background:
    conic-gradient(var(--ivory) 25%, var(--ink) 0 50%, var(--ivory) 0 75%, var(--ink) 0) 0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2);
  opacity: 0.9;
}

/* ── Answer tiles (shared look) ──────────────────────────────────────────── */

.tile {
  --c: var(--t0); --hi: var(--t0-hi); --tink: var(--t0-ink);
  position: relative; display: flex; align-items: center; text-align: left; overflow: hidden;
  color: var(--tink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 46%),
    linear-gradient(135deg, var(--hi), var(--c) 62%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 0 rgba(0, 0, 0, 0.22),
    0 12px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s var(--ease-out), opacity 0.35s, filter 0.35s, box-shadow 0.35s;
}
.tile[data-i="1"] { --c: var(--t1); --hi: var(--t1-hi); --tink: var(--t1-ink); }
.tile[data-i="2"] { --c: var(--t2); --hi: var(--t2-hi); --tink: var(--t2-ink); }
.tile[data-i="3"] { --c: var(--t3); --hi: var(--t3-hi); --tink: var(--t3-ink); }
.tile .letter {
  flex: none; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 6; line-height: 1;
  background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
}
.tile[data-i="1"] .letter { background: rgba(255, 255, 255, 0.28); box-shadow: inset 0 0 0 1.5px rgba(26, 18, 8, 0.4); }
/* Tiles painted in the color they name (question.swatches) */
.tile.swatch .letter { background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.tile.swatch.light .letter { background: rgba(255, 255, 255, 0.4); box-shadow: inset 0 0 0 1.5px rgba(21, 19, 15, 0.45); }
.tile.swatch:not(.light):not(.is-right) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 12px 30px rgba(0, 0, 0, 0.35); }
.tile .text { font-weight: 650; line-height: 1.18; position: relative; z-index: 1; }
/* The sheen that sweeps across a tile when it appears */
.tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  transform: translateX(-120%);
}
.tile.sheen::after { animation: sheen 1.1s var(--ease-out) forwards; }
@keyframes sheen { to { transform: translateX(120%); } }

.tile.is-dim { opacity: 0.42; filter: saturate(0.35) brightness(0.8); }
.tile.is-right {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 3px var(--gold-hi),
    0 0 40px rgb(var(--gold-hi-rgb) / 0.55),
    0 14px 36px rgba(0, 0, 0, 0.4);
  animation: pop 0.6s var(--ease-spring);
}
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } }

.check {
  display: grid; place-items: center; border-radius: 50%; flex: none;
  background: var(--gold-hi); color: var(--ink);
  box-shadow: 0 0 0 4px rgb(var(--gold-hi-rgb) / 0.25);
}
.check svg { width: 58%; height: 58%; }

/* ── Motion utilities ────────────────────────────────────────────────────── */

.view { position: absolute; inset: 0; }
.view.enter { animation: view-in 0.6s var(--ease-out) both; }
.view.leave { animation: view-out 0.35s ease-in both; pointer-events: none; }
@keyframes view-in { from { opacity: 0; transform: translateY(14px) scale(0.995); } to { opacity: 1; transform: none; } }
@keyframes view-out { to { opacity: 0; transform: translateY(-10px); } }

.rise { animation: rise 0.7s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.fade { animation: fade 0.8s ease both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.zoom-in { animation: zoom-in 0.7s var(--ease-spring) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes zoom-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* Odometer wheels */
.odo { display: inline-flex; gap: 0.08em; }
.odo .wheel {
  position: relative; overflow: hidden; height: 1.12em; width: 0.78em;
  border-radius: 0.1em; background: linear-gradient(180deg, var(--ink-0), var(--ink-3) 45%, var(--ink-3) 55%, var(--ink-0));
  box-shadow: inset 0 0 0 1px rgb(var(--gold-rgb) / 0.35), inset 0 0.12em 0.2em rgba(0, 0, 0, 0.8), inset 0 -0.12em 0.2em rgba(0, 0, 0, 0.8);
}
.odo .reel { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; transition: transform 1.4s var(--ease-out); }
.odo .reel span { height: 1.12em; display: grid; place-items: center; font-family: var(--sans); font-weight: 800; color: var(--gold-hi); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}