:root {
  --bg: #fff8e7;
  --ink: #1f2440;
  --muted: #5b6185;
  --card: #ffffff;
  --primary: #5b5bf7;
  --pink: #ff5d8f;
  --orange: #ff9f1c;
  --teal: #12c2b3;
  --good: #2ecc71;
  --bad: #ff4d4d;
  --radius: 20px;
  --shadow: 0 6px 0 rgba(31, 36, 64, 0.12), 0 12px 24px rgba(31, 36, 64, 0.08);
  /* Semantic colours used by the game pages' inline styles (dark overrides below). */
  --shade: 31, 36, 64; /* rgb triplet for rgba(var(--shade), a) shadows */
  --on-accent: #fff;
  --primary-dark: #3b3bc4;
  --teal-dark: #0c8d82;
  --good-ink: #1f9e55;
  --bad-ink: #c43434;
  --target: #c0392b;
  --border: #c9ccf5;
  --border-soft: #e0e3ff;
  --divider: #e3e5fb;
  --surface-2: #f4f5ff;
  --surface-3: #eef0ff;
  --win-bg: #d9fbe7;
  --swatch-border: rgba(0, 0, 0, 0.15);
  --ocean: #bfe9ff;
  --ocean-soft: #dff3ff;
  --land: #fff3c4;
  --land-muted: #f4f1e8;
  --land-inactive: #ece6d2;
  --land-soft: #cfd3ea;
  --land-stroke: #8a8fb3;
  --highlight: #ffd166;
  --flash: #b8ffd2;
  --hint: #9be7b4;
  --pin-guess: #e8453c;
  --capital-dot: #ffd23f;
  --start: #3d8bff;
  --start-ink: #2f6fe4;
  --end: #a259ff;
  --end-ink: #b04ad8;
  --yellow: #ffc93c;
  --red: #ff5c5c;
  --heat-1: #ffffcc;
  --heat-2: #fd8d3c;
  --heat-3: #800026;
  --orange-dark: #d17f0a;
  --primary-soft: #8e7bff;
  --good-bg: #d4f7e1;
  --good-deep: #17713d;
  --bad-bg: #ffe1e1;
  --bad-deep: #b02a2a;
  --miss: #ff8a8a;
  --amber: #ffb800;
  --magenta: #ff6ec7;
  /* style.css's own component colours. */
  --blob-1: #ffe1ec;
  --blob-2: #d9f7f3;
  --blob-3: #e3e3ff;
  --answer-bg: #eef0ff;
  --answer-hover: #e0e3ff;
  --answer-shadow: #c9ccf5;
  --kbd-bg: #fff;
  --kbd-border: #c9ccf5;
  --daily-from: #e8453c;
  --daily-done-from: #1fa463;
  --daily-btn-bg: #fff;
  --daily-btn-ink: #e8453c;
  --daily-done-ink: #1fa463;
  --chip-bg: #f1f1f6;
  --chip-played-bg: #fff4cc;
  --chip-played-ink: #7a5a00;
  --error-bg: #ffe5e5;
  --error-ink: #a01f1f;
  --notice-bg: #fff4d6;
  --good-shadow: #1f9e55;
  --bad-shadow: #c43434;
  --accent-mystery: #e8453c;
  --accent-higher: #8e44ad;
  --accent-border: #2f6fe4;
  --accent-neighbours: #e67e22;
  --accent-match: #d63384;
  --accent-pin: #c0392b;
  --accent-weekly: #16a085;
  --accent-learn: #27ae60;
  /* Geo Connections group colours (easiest → hardest) and their text colour. */
  --conn-yellow: #f9df6d;
  --conn-green: #a0c35a;
  --conn-blue: #b0c4ef;
  --conn-purple: #ba81c5;
  --conn-ink: #1f2440;
  --conn-selected: #5a5e7a;
  font-family: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Dark palette. Applied via <html data-theme="dark"> (inline head script + theme toggle in common.js). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1530;
  --ink: #eef0ff;
  --muted: #a3a9d6;
  --card: #1c2348;
  --primary: #8080ff;
  --pink: #ff6f9c;
  --orange: #ffad3d;
  --teal: #22d3c3;
  --good: #3ddc84;
  --bad: #ff6b6b;
  --shadow: 0 6px 0 rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.3);
  --shade: 0, 0, 0;
  --on-accent: #fff;
  --primary-dark: #4a4ad0;
  --teal-dark: #0e8f84;
  --good-ink: #5ee39a;
  --bad-ink: #ff8a8a;
  --target: #ff7a6b;
  --border: #3a4280;
  --border-soft: #2e3670;
  --divider: #2a3160;
  --surface-2: #232b55;
  --surface-3: #272f5e;
  --win-bg: #17402e;
  --swatch-border: rgba(255, 255, 255, 0.25);
  --ocean: #12305a;
  --ocean-soft: #152a50;
  --land: #3a4a7a;
  --land-muted: #2c3560;
  --land-inactive: #252c50;
  --land-stroke: #6a73b0;
  --land-soft: #3a4370;
  --highlight: #c99a2e;
  --flash: #2f9e66;
  --hint: #2f8a58;
  --pin-guess: #ff5a4f;
  --capital-dot: #ffd23f;
  --start: #4d94ff;
  --start-ink: #7fb2ff;
  --end: #a86bff;
  --end-ink: #d08bf0;
  --yellow: #e0ac1f;
  --red: #e84f4f;
  --orange-dark: #b86a00;
  --primary-soft: #6a5ae0;
  --good-bg: #17402e;
  --good-deep: #7ef0b0;
  --bad-bg: #4a1f2a;
  --bad-deep: #ffa3a3;
  --miss: #b8505a;
  --blob-1: rgba(255, 93, 143, 0.12);
  --blob-2: rgba(18, 194, 179, 0.1);
  --blob-3: rgba(128, 128, 255, 0.14);
  --answer-bg: #2a2d4a;
  --answer-hover: #353a60;
  --answer-shadow: #171a33;
  --kbd-bg: #232b55;
  --kbd-border: #3a4280;
  --daily-from: #c4372f;
  --daily-done-from: #17804d;
  --daily-btn-bg: #1c2348;
  --daily-btn-ink: #ff8a7a;
  --daily-done-ink: #5ee39a;
  --chip-bg: #232b55;
  --chip-played-bg: #4a3c10;
  --chip-played-ink: #ffd76a;
  --error-bg: #4a1f2a;
  --error-ink: #ffa3a3;
  --notice-bg: #3d3214;
  --good-shadow: #17713d;
  --bad-shadow: #9a2a2a;
  --conn-yellow: #c9a92c;
  --conn-green: #6f9a34;
  --conn-blue: #5d7fc9;
  --conn-purple: #9a5fae;
  --conn-ink: #0f1530;
  --conn-selected: #c3c7ea;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, var(--blob-1) 0, transparent 35%),
    radial-gradient(circle at 90% 20%, var(--blob-2) 0, transparent 35%),
    radial-gradient(circle at 50% 100%, var(--blob-3) 0, transparent 45%),
    var(--bg);
}

a { color: var(--primary); }

.container { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }

.site-header { text-align: center; padding: 24px 16px 8px; }
.logo {
  margin: 0;
  font-size: clamp(2.6rem, 9vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--teal), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo a { color: inherit; text-decoration: none; }
.tagline { margin: 4px 0 0; color: var(--muted); font-size: 1.15rem; }

.stats-link { display: inline-block; margin-top: 10px; padding: 6px 14px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-weight: 800; text-decoration: none; }
.stats-link:hover, .stats-link:focus-visible { transform: translateY(-2px); }

.back { display: inline-block; margin-bottom: 12px; font-weight: 700; text-decoration: none; }

/* Today's Daily banner */
.daily-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--daily-from), var(--orange) 55%, var(--yellow));
  color: #fff;
  box-shadow: var(--shadow);
}
.daily-banner p { margin: 0; }
.daily-kicker { font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; }
.daily-banner .daily-progress { margin-top: -6px; font-weight: 700; font-size: 0.95rem; }
.daily-progress:empty { display: none; }
.daily-banner .daily-countdown { font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.daily-banner.all-done { background: linear-gradient(120deg, var(--daily-done-from), var(--good) 55%, var(--yellow)); box-shadow: var(--shadow), 0 0 0 3px var(--yellow); }
.daily-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: calc(var(--radius) - 6px);
  background: rgba(255, 255, 255, 0.14);
}
.daily-game-emoji { font-size: 2.2rem; line-height: 1; }
.daily-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.daily-name { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9; }
.daily-status { font-size: 1.2rem; font-weight: 900; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); }
.daily-sub { font-weight: 600; opacity: 0.95; }
.daily-streak {
  align-self: flex-start;
  margin-top: 6px !important;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  font-weight: 800;
}
.daily-banner .daily-play { flex-shrink: 0; text-decoration: none; background: var(--daily-btn-bg); color: var(--daily-btn-ink); box-shadow: 0 4px 0 rgba(31, 36, 64, 0.2); }
.daily-banner .daily-share { align-self: center; background: var(--daily-btn-bg); color: var(--daily-btn-ink); box-shadow: 0 4px 0 rgba(31, 36, 64, 0.2); }
.daily-banner .daily-share[hidden] { display: none; }
.daily-banner.all-done .daily-share { color: var(--daily-done-ink); }
.daily-row[data-state="done"] .daily-play { background: rgba(255, 255, 255, 0.25); color: #fff; }
.weekly-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-radius: calc(var(--radius) - 6px);
  border: 2px dashed rgba(255, 255, 255, 0.35);
  font-weight: 700;
}
.weekly-row-play { flex-shrink: 0; padding: 4px 14px; border-radius: 999px; font-weight: 800; text-decoration: none; background: var(--daily-btn-bg); color: var(--daily-btn-ink); }
.weekly-row-play[hidden] { display: none; }
@media (max-width: 560px) {
  .daily-banner { padding: 16px; }
  .daily-banner { gap: 8px; }
  .daily-row { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .daily-status { font-size: 1.1rem; }
  .daily-game-emoji { font-size: 1.8rem; }
  .daily-banner .daily-play { flex-basis: 100%; text-align: center; }
}

/* Category filter chips above the game cards */
.card-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.filter-chip {
  padding: 8px 16px;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.filter-chip:hover { border-color: var(--primary); }
.filter-chip[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-accent);
}
.surprise-btn {
  margin-left: auto;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--yellow));
  color: var(--on-accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s;
}
.surprise-btn:hover { transform: translateY(-2px) rotate(-2deg); }
.surprise-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.card-filters + .cards { margin-top: 16px; }
.cards .card[hidden] { display: none; }

/* Game cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  border-top: 8px solid var(--accent, var(--primary));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover, .card:focus-visible { transform: translateY(-4px) rotate(-0.5deg); }
.card:active { transform: translateY(2px); }
.card .emoji { font-size: 3rem; line-height: 1; }
.card h2 { margin: 4px 0 0; font-size: 1.5rem; }
.card p { margin: 0; color: var(--muted); }
.card .play {
  margin-top: auto;
  align-self: flex-start;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--accent, var(--primary));
  color: #fff;
  font-weight: 800;
}
.card .best {
  margin-top: auto;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}
.card .best + .play { margin-top: 0; }
.card .best.played {
  background: var(--chip-played-bg);
  color: var(--chip-played-ink);
}
.card.flags { --accent: var(--pink); }
.card.capitals { --accent: var(--orange); }
.card.map { --accent: var(--teal); }
.card.mystery { --accent: var(--accent-mystery); }
.card.shape { --accent: var(--primary); }
.card.higher { --accent: var(--accent-higher); }
.card.border { --accent: var(--accent-border); }
.card.neighbours { --accent: var(--accent-neighbours); }
.card.speed { --accent: var(--orange); }
.card.match { --accent: var(--accent-match); }
.card.flagle { --accent: var(--magenta); }
.card.pin { --accent: var(--accent-pin); }
.card.weekly { --accent: var(--accent-weekly); }
.card.rank { --accent: var(--teal); }
.card.learn { --accent: var(--accent-learn); }
.card.connections { --accent: var(--conn-purple); }

/* HUD */
.hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 20px;
}
.hud .pill {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-weight: 800;
}
.hud .pill span { color: var(--primary); }
.hud .streak.hot span { color: var(--orange); }

/* Question + answers */
.panel {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
}
.question { font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 800; margin: 0 0 16px; }
.answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.btn, .answer {
  font: inherit;
  font-weight: 800;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.2s ease;
}
.answer {
  min-height: 64px;
  padding: 14px 16px;
  font-size: 1.15rem;
  background: var(--answer-bg);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--answer-shadow);
}
.answer:hover:not(:disabled) { background: var(--answer-hover); transform: translateY(-2px); }
.answer:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--answer-shadow); }
.answer:disabled { cursor: default; }
/* Keyboard shortcut badge (number key) on answer buttons; hidden on touch devices. */
.answer[data-key] { position: relative; }
.answer[data-key]::before {
  content: attr(data-key);
  position: absolute; top: 6px; left: 8px;
  min-width: 1.3em; padding: 0 4px;
  font: 700 0.7rem/1.4 ui-monospace, monospace;
  color: var(--muted); background: var(--kbd-bg); border: 1px solid var(--kbd-border); border-radius: 5px;
}
.keys-hint { margin: 12px 0 0; color: var(--muted); font-size: 0.9rem; }
.keys-hint kbd { font: 700 0.85em ui-monospace, monospace; padding: 1px 6px; background: var(--kbd-bg); border: 1px solid var(--kbd-border); border-radius: 5px; }
@media (hover: none) {
  .answer[data-key]::before, .keys-hint { display: none; }
}
.btn {
  padding: 12px 24px;
  font-size: 1.1rem;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 0 var(--primary-dark);
}
.btn:hover { transform: translateY(-2px); }

/* Feedback */
.correct { background: var(--good) !important; color: #fff !important; box-shadow: 0 4px 0 var(--good-shadow) !important; animation: pop 0.35s ease; }
.wrong { background: var(--bad) !important; color: #fff !important; box-shadow: 0 4px 0 var(--bad-shadow) !important; animation: shake 0.4s ease; }
.flash-good { animation: flash-good 0.6s ease; }
.flash-bad { animation: flash-bad 0.6s ease; }

@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
@keyframes flash-good { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); } 100% { box-shadow: 0 0 0 24px rgba(46, 204, 113, 0); } }
/* New best score line pops in. */
.new-best { font-weight: 800; animation: best-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes best-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }

/* Confetti overlay created by celebrate() in common.js. */
.confetti { position: fixed; inset: 0; z-index: 999; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; }

@keyframes flash-bad { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); } 100% { box-shadow: 0 0 0 24px rgba(255, 77, 77, 0); } }

.error {
  padding: 16px;
  border-radius: 16px;
  background: var(--error-bg);
  color: var(--error-ink);
  font-weight: 700;
  text-align: center;
}

.site-footer { text-align: center; color: var(--muted); font-size: 0.9rem; padding: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--shadow);
  pointer-events: none;
  animation: toast-in 0.25s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* End-screen "Review your misses" chips linking to Learn */
.misses { margin: 16px auto 4px; max-width: 560px; }
.misses h3 { margin: 0 0 10px; font-size: 1.05rem; color: var(--muted); }
.misses ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.misses a {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border-radius: 999px; background: var(--card); box-shadow: var(--shadow);
  border: 2px solid color-mix(in srgb, var(--bad) 35%, transparent);
  color: var(--ink); font-weight: 700; text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.misses a:hover, .misses a:focus-visible { transform: translateY(-2px); border-color: var(--primary); }
.misses .fi { width: 1.4em; line-height: 1em; border-radius: 3px; flex: none; }
.misses small { color: var(--muted); font-weight: 600; }
.misses small::before { content: '· '; }
.misses-none { margin: 12px 0; font-weight: 800; color: var(--good); }

.sound-toggle, .theme-toggle {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.sound-toggle:hover, .sound-toggle:focus-visible, .theme-toggle:hover, .theme-toggle:focus-visible { transform: translateY(-2px); }
.theme-toggle { right: 60px; }
.toggles { display: inline-flex; align-items: center; }
.sound-toggle.inline, .theme-toggle.inline { position: static; width: 36px; height: 36px; margin-left: 8px; vertical-align: middle; }

/* Achievement badges (My Stats) */
.badges { margin-top: 20px; text-align: left; }
.badges-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.badges-head h2 { margin: 0; font-size: 1.4rem; }
.badges-count { color: var(--muted); font-weight: 800; }
.badges-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: calc(var(--radius) - 6px); text-align: center; }
.badge.earned { background: color-mix(in srgb, var(--orange) 18%, var(--card)); box-shadow: inset 0 0 0 2px var(--orange); }
.badge.locked { background: color-mix(in srgb, var(--muted) 8%, var(--card)); }
.badge-icon { font-size: 2rem; line-height: 1.1; }
.badge.locked .badge-icon { filter: grayscale(1); opacity: 0.4; }
.badge-name { font-weight: 900; color: var(--ink); }
.badge.locked .badge-name { color: var(--muted); }
.badge-hint { font-size: 0.8rem; font-weight: 600; color: var(--muted); }

/* Home: "New badge unlocked!" banner */
.badge-toast {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  margin: 0 0 16px; padding: 10px 14px 10px 18px;
  border-radius: 14px; background: var(--notice-bg); border: 2px solid var(--amber);
  font-weight: 800; animation: toast-in-top 0.3s ease;
}
.badge-toast span { flex: 1 1 auto; }
.badge-toast a { color: var(--ink); white-space: nowrap; }
.badge-toast-close {
  border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px;
}
@keyframes toast-in-top { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }