/* === Type system ===========================================================
   Fraunces — variable serif, used at large optical sizes for display copy.
   JetBrains Mono — monospace labels (round badges, URLs, ordinals).
   The SOFT / WONK axes ramp up with the rounds so the type itself heats up. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=JetBrains+Mono:wght@300..700&display=swap");

:root {
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* SVG grain — applied at low opacity to every round. Adds film texture. */
  --grain: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
}

/* Default (lobby / no round) — midnight party, neutral but rich. */
body {
  --paper: #0e0a1f;
  --ink: #f6efe3;
  --accent: #ffb74d;
  --accent-soft: #c1a3ff;
  --rule: rgba(246, 239, 227, 0.18);
  --halo: radial-gradient(ellipse at 50% 0%, rgba(255, 183, 77, 0.18), transparent 55%);
  --fr-soft: 30;
  --fr-wonk: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 14, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk);
  transition: background 700ms ease, color 700ms ease;
}

/* Round 1 — Warm-up: cocktail bar at dusk. Refined, faintly chilled blue. */
body[data-round="1"] {
  --paper: #e9eef5;
  --ink: #0f2030;
  --accent: #c47339;            /* hint of copper — warmth peeking through */
  --accent-soft: #6a98ad;
  --rule: rgba(15, 32, 48, 0.18);
  --halo: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(106, 152, 173, 0.32), transparent 65%);
  --fr-soft: 20;
  --fr-wonk: 0;
}

/* Round 2 — Heating Up: midday sun, warm spice. Deep peach, vermillion. */
body[data-round="2"] {
  --paper: #ffc78a;
  --ink: #4a0e02;
  --accent: #d62203;
  --accent-soft: #8a3309;
  --rule: rgba(74, 14, 2, 0.28);
  --halo:
    radial-gradient(ellipse 75% 75% at 90% 110%, rgba(214, 34, 3, 0.42), transparent 60%),
    radial-gradient(ellipse 60% 60% at 10% -10%, rgba(255, 178, 102, 0.55), transparent 65%);
  --fr-soft: 60;
  --fr-wonk: 0.4;
}

/* Round 3 — Burning Hot: speakeasy red light, oxblood velvet, ember bloom. */
body[data-round="3"] {
  --paper: #1d0408;
  --ink: #ffd4c1;
  --accent: #ff3a1e;
  --accent-soft: #b32418;
  --rule: rgba(255, 212, 193, 0.22);
  --halo: radial-gradient(ellipse 90% 70% at 50% 110%, rgba(255, 60, 30, 0.55), transparent 55%);
  --fr-soft: 100;
  --fr-wonk: 1;
}

body { background: var(--paper); color: var(--ink); }

/* Atmosphere layer: halo wash + film grain on every body. Sits behind content. */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background: var(--halo);
  z-index: 0;
  transition: background 700ms ease;
}
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background-image: var(--grain);
  background-size: 200px 200px;
  opacity: 0.08;
  mix-blend-mode: overlay;
  z-index: 0;
}

/* Round-3 only: pulsing ember bloom on top of the halo. */
body[data-round="3"]::before {
  animation: ember 4.2s ease-in-out infinite alternate;
}
@keyframes ember {
  from { background-position: 50% 105%; filter: saturate(1.05); }
  to   { background-position: 52% 115%; filter: saturate(1.4) brightness(1.06); }
}

/* All headings track the round's wonk/soft. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "SOFT" var(--fr-soft), "WONK" var(--fr-wonk);
  letter-spacing: -0.01em;
  margin: 0;
}