:root {
  --sunny-1: #FFE8A3;
  --sunny-2: #FFC93C;
  --sunny-3: #FF9F1C;
  --mint-1: #C8F4E7;
  --mint-2: #6FE3C4;
  --mint-3: #2EC4B6;
  --blush-1: #FFE0EC;
  --blush-2: #FFADC6;
  --blush-3: #FF6B9D;
  --sky-1: #DCEEFF;
  --sky-2: #9AC8FF;
  --sky-3: #4E9BFF;
  --lav-1: #EDE1FF;
  --lav-2: #C9A6FF;
  --lav-3: #9B5DE5;
  --blue-1: #DCE8FF;
  --blue-2: #7FA8FF;
  --blue-3: #3D6FE0;
  --pink-1: #FFE3F1;
  --pink-2: #FF8FC7;
  --pink-3: #EC4899;

  /* RGB triplets for the "-3" accents, so effects like glows/shadows can use
     rgba(var(--blush-3-rgb), alpha) and stay in sync with the chosen theme
     (applyTheme() overwrites --blush-3-rgb the same way it overwrites
     --blush-2/--blush-3 below). */
  --sunny-3-rgb: 255, 159, 28;
  --mint-3-rgb: 46, 196, 182;
  --blush-3-rgb: 255, 107, 157;
  --sky-3-rgb: 78, 155, 255;
  --lav-3-rgb: 155, 93, 229;
  --blue-3-rgb: 61, 111, 224;
  --pink-3-rgb: 236, 72, 153;

  /* The site's actual "current accent" slot. Buttons, focus rings, links,
     and glows all read --accent-2/--accent-3/--accent-3-rgb rather than a
     specific hue's variables — that's what makes it possible to change the
     whole site's accent color in one place (right here) without touching
     the "Blush" game theme's own swatch/preview, which must keep showing
     real pink regardless of what the site default is.
     Per-game pages (dashboard/play/leaderboard) override these three at
     runtime via applyTheme() to match whatever theme that game's host
     picked; everywhere else (home, admin, legal, TV pairing) just uses
     this default. Currently set to the Blue family. */
  --accent-2: var(--blue-2);
  --accent-3: var(--blue-3);
  --accent-3-rgb: var(--blue-3-rgb);

  --ink: #2D2A32;
  --ink-soft: #6B6673;
  --paper: #FFFDF9;
  --paper-2: #FFF8EE;
  --line: rgba(45, 42, 50, 0.08);

  --shadow-sm: 0 2px 8px rgba(45, 42, 50, 0.06);
  --shadow-md: 0 8px 24px rgba(45, 42, 50, 0.10);
  --shadow-lg: 0 16px 48px rgba(45, 42, 50, 0.16);

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background-image:
    radial-gradient(circle at 8% 12%, var(--sunny-1) 0%, transparent 22%),
    radial-gradient(circle at 92% 8%, var(--blush-1) 0%, transparent 24%),
    radial-gradient(circle at 85% 90%, var(--mint-1) 0%, transparent 26%),
    radial-gradient(circle at 5% 85%, var(--sky-1) 0%, transparent 24%);
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: 'Fredoka', 'Poppins', sans-serif;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select {
  font-family: inherit;
  font-size: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  /* Both stops come from the same theme-controlled pair (see applyTheme() on
     each page), so they're always two distinct shades of whatever accent
     color is selected. Mixing in a hardcoded var(--sunny-3) here used to
     make this collapse to a flat color whenever the Sunny theme was picked,
     since --accent-3 gets reassigned to the same value as --sunny-3 then. */
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  color: white;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: var(--shadow-lg); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; filter: none; box-shadow: none; }

.btn-secondary {
  background: white;
  color: var(--ink);
  border: 2px solid var(--line);
}
.btn-secondary:hover { border-color: var(--accent-3); }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  padding: 10px 16px;
}
.btn-ghost:hover { color: var(--ink); }

.btn-danger {
  background: #FFF0F0;
  color: #D64545;
}
.btn-danger:hover { background: #FFE1E1; }

.card {
  background: var(--paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
}

.pill-mint { background: var(--mint-1); color: #1A7A6C; }
.pill-blush { background: var(--blush-1); color: #C43D6C; }
.pill-sunny { background: var(--sunny-1); color: #9A6200; }
.pill-sky { background: var(--sky-1); color: #2A6FBF; }
.pill-lav { background: var(--lav-1); color: #6B3AB8; }
.pill-blue { background: var(--blue-1); color: #2451B8; }
.pill-pink { background: var(--pink-1); color: #C22A78; }

.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }

@keyframes floatUp {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.7) translateY(30px); }
  60% { opacity: 1; transform: scale(1.03) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes confettiFall {
  from { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  to { transform: translateY(110vh) rotate(360deg); opacity: 0.9; }
}

@keyframes gentleBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-3-rgb, 61, 111, 224), 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(var(--accent-3-rgb, 61, 111, 224), 0); }
}