/* ── Extra themes ──
   Each theme sets the colour variables used everywhere, plus the home-screen
   background. Dark themes also get [data-mode="dark"] (set in js/ui.js), which
   applies the shared dark-mode tweaks in the other stylesheets.
   To add a theme: copy a block here and add it to THEMES in js/ui.js. */

/* ── Rose (light) ── */
[data-theme="rose"] {
  --blue: #e11d48; --blue-dark: #9f1239; --purple: #fb7185;
  --card-bg: #fff1f3; --card-border: #fecdd3; --body-bg: #fff8f9;
  --text: #4c0519; --text-secondary: #be123c;
  --shadow: 0 4px 24px rgba(225,29,72,0.1); --shadow-lg: 0 8px 40px rgba(225,29,72,0.18);
}
[data-theme="rose"] .unit-select-bg { background: linear-gradient(135deg, #2a0410 0%, #881337 45%, #e11d48 100%); }
[data-theme="rose"] .unit-select-bg::before { background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(251,113,133,0.45) 0%, transparent 60%); }
[data-theme="rose"] .tagline { color: #fda4af; }
[data-theme="rose"] .progress-bar-fill { background: linear-gradient(90deg, #e11d48, #fb7185); }

/* ── Mint (light) ── */
[data-theme="mint"] {
  --blue: #0d9488; --blue-dark: #115e59; --purple: #2dd4bf;
  --card-bg: #effcf9; --card-border: #b7ebe1; --body-bg: #f6fefc;
  --text: #134e4a; --text-secondary: #0f766e;
  --shadow: 0 4px 24px rgba(13,148,136,0.1); --shadow-lg: 0 8px 40px rgba(13,148,136,0.18);
}
[data-theme="mint"] .unit-select-bg { background: linear-gradient(135deg, #022c22 0%, #115e59 45%, #14b8a6 100%); }
[data-theme="mint"] .unit-select-bg::before { background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(94,234,212,0.4) 0%, transparent 60%); }
[data-theme="mint"] .tagline { color: #99f6e4; }
[data-theme="mint"] .progress-bar-fill { background: linear-gradient(90deg, #0d9488, #5eead4); }

/* ── Lavender (light) ── */
[data-theme="lavender"] {
  --blue: #7c3aed; --blue-dark: #5b21b6; --purple: #a78bfa;
  --card-bg: #f6f3ff; --card-border: #ddd6fe; --body-bg: #fbfaff;
  --text: #2e1065; --text-secondary: #6d28d9;
  --shadow: 0 4px 24px rgba(124,58,237,0.1); --shadow-lg: 0 8px 40px rgba(124,58,237,0.18);
}
[data-theme="lavender"] .unit-select-bg { background: linear-gradient(135deg, #1e0b3b 0%, #4c1d95 45%, #8b5cf6 100%); }
[data-theme="lavender"] .unit-select-bg::before { background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(196,181,253,0.45) 0%, transparent 60%); }
[data-theme="lavender"] .tagline { color: #ddd6fe; }
[data-theme="lavender"] .progress-bar-fill { background: linear-gradient(90deg, #7c3aed, #c4b5fd); }

/* ── High Contrast (light, extra readable) ── */
[data-theme="contrast"] {
  --blue: #0033cc; --blue-dark: #001a66; --purple: #6600cc;
  --card-bg: #ffffff; --card-border: #000000; --body-bg: #ffffff;
  --text: #000000; --text-secondary: #222222;
  --green-bg: #006600; --green-text: #ffffff; --red-bg: #b00000; --red-text: #ffffff;
  --shadow: none; --shadow-lg: 0 0 0 2px #000;
}
[data-theme="contrast"] .unit-select-bg { background: #000; }
[data-theme="contrast"] .unit-select-bg::before { background: none; }
[data-theme="contrast"] .tagline { color: #ffdd00; }
[data-theme="contrast"] .choice-btn,
[data-theme="contrast"] .word-display-card,
[data-theme="contrast"] .game-hub-card { border-width: 2px; }
[data-theme="contrast"] .progress-bar-fill { background: #0033cc; }

/* ── Slate (dark) ── */
[data-theme="slate"] {
  --blue: #60a5fa; --blue-dark: #2563eb; --purple: #818cf8;
  --card-bg: #1e293b; --card-border: #334155; --body-bg: #0f172a;
  --text: #e2e8f0; --text-secondary: #94a3b8;
  --shadow: 0 4px 24px rgba(0,0,0,0.35); --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
}
[data-theme="slate"] .unit-select-bg { background: linear-gradient(135deg, #020617 0%, #0f172a 45%, #1e3a5f 100%); }
[data-theme="slate"] .unit-select-bg::before { background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(96,165,250,0.3) 0%, transparent 60%); }
[data-theme="slate"] .tagline { color: #93c5fd; }
[data-theme="slate"] .next-btn, [data-theme="slate"] .restart-btn { color: #0f172a; }

/* ── Neon (dark) ── */
[data-theme="neon"] {
  --blue: #22d3ee; --blue-dark: #0891b2; --purple: #e879f9;
  --card-bg: #120a24; --card-border: #2e1a52; --body-bg: #07030f;
  --text: #f5f3ff; --text-secondary: #c4b5fd;
  --shadow: 0 0 24px rgba(34,211,238,0.12); --shadow-lg: 0 0 40px rgba(232,121,249,0.2);
}
[data-theme="neon"] .unit-select-bg { background: linear-gradient(135deg, #07030f 0%, #1a0533 50%, #031b2e 100%); }
[data-theme="neon"] .unit-select-bg::before { background: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(232,121,249,0.35) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 90% 100%, rgba(34,211,238,0.3) 0%, transparent 60%); }
[data-theme="neon"] .tagline { color: #22d3ee; text-shadow: 0 0 10px rgba(34,211,238,0.7); }
[data-theme="neon"] .next-btn, [data-theme="neon"] .restart-btn { color: #07030f; }
[data-theme="neon"] .big-word { text-shadow: 0 0 18px rgba(232,121,249,0.45); }
[data-theme="neon"] .progress-bar-fill { background: linear-gradient(90deg, #22d3ee, #e879f9); box-shadow: 0 0 10px rgba(34,211,238,0.6); }

/* ── Coffee (dark) ── */
[data-theme="coffee"] {
  --blue: #f0a54e; --blue-dark: #a8622a; --purple: #ffd27a; /* bright caramel: filled buttons stand out on the dark brown */
  --card-bg: #2a211b; --card-border: #3d3027; --body-bg: #1b1511;
  --text: #f3e9dc; --text-secondary: #bfa58a;
  --shadow: 0 4px 24px rgba(0,0,0,0.35); --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
}
[data-theme="coffee"] .unit-select-bg { background: linear-gradient(135deg, #120c08 0%, #2b1d14 50%, #4a3222 100%); }
[data-theme="coffee"] .unit-select-bg::before { background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(212,163,115,0.3) 0%, transparent 60%); }
[data-theme="coffee"] .tagline { color: #e9c46a; }
[data-theme="coffee"] .next-btn, [data-theme="coffee"] .restart-btn { color: #1b1511; }

/* ── Retro terminal (dark) ── */
[data-theme="retro"] {
  --blue: #33ff66; --blue-dark: #11aa33; --purple: #ffcc00;
  --card-bg: #0a160d; --card-border: #1d3b24; --body-bg: #050b06;
  --text: #b6ffc4; --text-secondary: #5fcf78;
  --font-serif: 'IBM Plex Mono', monospace; --font-body: 'IBM Plex Mono', monospace;
  --shadow: 0 0 20px rgba(51,255,102,0.08); --shadow-lg: 0 0 40px rgba(51,255,102,0.15);
}
[data-theme="retro"] .unit-select-bg { background: #050b06; }
[data-theme="retro"] .unit-select-bg::before { background: repeating-linear-gradient(0deg, rgba(51,255,102,0.04) 0 2px, transparent 2px 4px); }
[data-theme="retro"] .tagline { color: #33ff66; }
[data-theme="retro"] .next-btn, [data-theme="retro"] .restart-btn { color: #050b06; }
[data-theme="retro"] .big-word { text-shadow: 0 0 12px rgba(51,255,102,0.5); }

/* ── Chess board + pieces per theme ──
   Light keeps the classic wooden board (defaults in games.css). */
[data-theme="dark"] {
  --board-light: #b9c2c9; --board-dark: #6d7d8b; --board-frame: #2b3238; --board-coord: rgba(20, 25, 30, 0.6);
  --board-last-light: #d8d48a; --board-last-dark: #a8a35a; --board-select: #a78bfa;
}
[data-theme="ocean"] {
  --board-light: #dcecf7; --board-dark: #4d8fc0; --board-frame: #1f5f8b; --board-coord: rgba(3, 4, 94, 0.55);
  --board-last-light: #b6f0f2; --board-last-dark: #3fb6c4; --board-select: #03045e;
}
[data-theme="forest"] {
  --board-light: #eeeed2; --board-dark: #769656; --board-frame: #4b6a35; --board-coord: rgba(27, 67, 50, 0.6);
  --board-last-light: #f6f669; --board-last-dark: #baca44; --board-select: #1b4332;
}
[data-theme="sunset"] {
  --board-light: #ffe4e6; --board-dark: #e46a7c; --board-frame: #9f1239; --board-coord: rgba(89, 13, 34, 0.55);
  --board-last-light: #ffd27a; --board-last-dark: #f2a65a; --board-select: #590d22;
}
[data-theme="sand"] {
  --board-light: #f3e2c3; --board-dark: #c19a6b; --board-frame: #8b5e3c; --board-coord: rgba(61, 43, 31, 0.55);
  --board-last-light: #f7e08a; --board-last-dark: #d9b75a; --board-select: #3d2b1f;
}
[data-theme="midnight"] {
  --board-light: #5b3a96; --board-dark: #2d1457; --board-frame: #12002b; --board-coord: rgba(224, 170, 255, 0.6);
  --board-last-light: #7c4fc4; --board-last-dark: #4b2391; --board-select: #e0aaff;
  --piece-white: #f3e8ff; --piece-black: #12002b; --piece-black-edge: #c77dff; --piece-black-glow: 0 0 8px rgba(199, 125, 255, 0.55);
}
[data-theme="rose"] {
  --board-light: #ffe4e9; --board-dark: #e8798f; --board-frame: #9f1239; --board-coord: rgba(76, 5, 25, 0.5);
  --board-last-light: #fecdd3; --board-last-dark: #f43f5e; --board-select: #4c0519;
}
[data-theme="mint"] {
  --board-light: #e0f7f3; --board-dark: #4fb3a3; --board-frame: #115e59; --board-coord: rgba(19, 78, 74, 0.55);
  --board-last-light: #c7f9cc; --board-last-dark: #2dd4bf; --board-select: #134e4a;
}
[data-theme="lavender"] {
  --board-light: #ece6ff; --board-dark: #9b82d9; --board-frame: #5b21b6; --board-coord: rgba(46, 16, 101, 0.55);
  --board-last-light: #ddd6fe; --board-last-dark: #8b5cf6; --board-select: #2e1065;
}
[data-theme="contrast"] {
  --board-light: #ffffff; --board-dark: #8a8a8a; --board-frame: #000000; --board-coord: #000000;
  --board-last-light: #ffe066; --board-last-dark: #d4a900; --board-select: #0033cc;
}
[data-theme="slate"] {
  --board-light: #8ea2bb; --board-dark: #4b5d78; --board-frame: #1e293b; --board-coord: rgba(15, 23, 42, 0.7);
  --board-last-light: #a5c8f0; --board-last-dark: #3b82c4; --board-select: #60a5fa;
}
[data-theme="neon"] {
  --board-light: #241650; --board-dark: #120a2a; --board-frame: #22d3ee; --board-coord: rgba(34, 211, 238, 0.6);
  --board-last-light: #3a2a7a; --board-last-dark: #2a1d5c; --board-select: #e879f9;
  --piece-white: #e0fbff; --piece-white-edge: #0891b2; --piece-white-glow: 0 0 10px rgba(34, 211, 238, 0.85);
  --piece-black: #f5b6ff; --piece-black-edge: #86198f; --piece-black-glow: 0 0 10px rgba(232, 121, 249, 0.85);
}
[data-theme="coffee"] {
  --board-light: #d9c3a5; --board-dark: #8b6b4a; --board-frame: #3d3027; --board-coord: rgba(27, 21, 17, 0.6);
  --board-last-light: #e9c46a; --board-last-dark: #b8893c; --board-select: #f3e9dc;
}
[data-theme="retro"] {
  --board-light: #12331c; --board-dark: #071a0d; --board-frame: #33ff66; --board-coord: rgba(51, 255, 102, 0.6);
  --board-last-light: #1f5a30; --board-last-dark: #164524; --board-select: #ffcc00;
  --piece-white: #b6ffc4; --piece-white-edge: #0a3d18; --piece-white-glow: 0 0 8px rgba(51, 255, 102, 0.8);
  --piece-black: #062010; --piece-black-edge: #33ff66; --piece-black-glow: 0 0 6px rgba(51, 255, 102, 0.6);
}

/* ── Christmas (dark) — the default theme in December (see data/seasons.js) ── */
[data-theme="christmas"] {
  --blue: #dc2626; --blue-dark: #b91c1c; --purple: #16a34a;
  --card-bg: #12291f; --card-border: #1f4434; --body-bg: #0b1f17;
  --text: #f4efe6; --text-secondary: #b9cfc0;
  --green-bg: #14361f; --green-text: #a7f3c0;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 40px rgba(220, 38, 38, 0.18);
  --board-light: #f4efe6; --board-dark: #1f6b45; --board-frame: #7f1d1d; --board-coord: rgba(11, 31, 23, 0.7);
  --board-last-light: #fde68a; --board-last-dark: #d4a73a; --board-select: #ef4444;
  --piece-white: #ffffff; --piece-white-edge: #0b1f17;
  --piece-black: #7f1d1d; --piece-black-edge: #fde68a; --piece-black-glow: 0 0 8px rgba(253, 230, 138, 0.5);
}
[data-theme="christmas"] .unit-select-bg { background: linear-gradient(170deg, #04120c 0%, #0b2a1d 50%, #3a0d0d 100%); }
[data-theme="christmas"] .unit-select-bg::before {
  background: radial-gradient(ellipse 80% 55% at 50% 110%, rgba(220, 38, 38, 0.28) 0%, transparent 60%),
              radial-gradient(ellipse 60% 40% at 15% 0%, rgba(250, 204, 21, 0.16) 0%, transparent 60%);
}
[data-theme="christmas"] .tagline { color: #facc15; text-shadow: 0 0 10px rgba(250, 204, 21, 0.45); }
[data-theme="christmas"] .next-btn, [data-theme="christmas"] .restart-btn { color: #fff; }
[data-theme="christmas"] .progress-bar-fill { background: linear-gradient(90deg, #dc2626, #16a34a); }
[data-theme="christmas"] .logo-book-svg path:first-of-type { fill: #b91c1c; }
[data-theme="christmas"] .next-test-icon { background: #b91c1c; }
[data-theme="christmas"] .next-test-tag, [data-theme="christmas"] .wotd-tag { color: #facc15; }

/* ── Thanksgiving (light) — the default theme Nov 15–30 (see data/seasons.js) ── */
[data-theme="thanksgiving"] {
  --blue: #b45309; --blue-dark: #8a3f06; --purple: #9f1239;
  --card-bg: #fffaf2; --card-border: #ecd9bd; --body-bg: #fdf6ec;
  --text: #3b2414; --text-secondary: #8a5a2b;
  --shadow: 0 4px 24px rgba(120, 63, 4, 0.1); --shadow-lg: 0 8px 40px rgba(159, 18, 57, 0.14);
  --board-light: #f6e3c3; --board-dark: #b5703a; --board-frame: #5c2e12; --board-coord: rgba(59, 36, 20, 0.6);
  --board-last-light: #f8c97a; --board-last-dark: #d08a3e; --board-select: #9f1239;
  --piece-white: #fffaf2; --piece-white-edge: #5c2e12;
  --piece-black: #4a1d0c; --piece-black-edge: #f8c97a;
}
[data-theme="thanksgiving"] .unit-select-bg { background: linear-gradient(160deg, #2a130a 0%, #5a2010 45%, #8a3f06 100%); }
[data-theme="thanksgiving"] .unit-select-bg::before {
  background: radial-gradient(ellipse 80% 55% at 50% 110%, rgba(245, 158, 11, 0.32) 0%, transparent 60%),
              radial-gradient(ellipse 60% 40% at 90% 0%, rgba(190, 18, 60, 0.28) 0%, transparent 60%);
}
[data-theme="thanksgiving"] .tagline { color: #fbbf24; }
[data-theme="thanksgiving"] #screen-main .tagline { color: #b45309; } /* on the cream game header */
[data-theme="thanksgiving"] .progress-bar-fill { background: linear-gradient(90deg, #b45309, #be123c); }
/* Home-screen accents that are purple in every other theme */
[data-theme="thanksgiving"] .logo-book-svg path:first-of-type { fill: #b45309; }
[data-theme="thanksgiving"] .next-test-icon { background: #b45309; }
[data-theme="thanksgiving"] .next-test-tag, [data-theme="thanksgiving"] .wotd-tag { color: #fbbf24; }

/* ── Halloween (dark) — the default theme in October (see data/seasons.js) ── */
[data-theme="halloween"] {
  --blue: #f97316; --blue-dark: #c2410c; --purple: #a855f7;
  --card-bg: #1f1226; --card-border: #3b2147; --body-bg: #120a16;
  --text: #fde8d0; --text-secondary: #d6a77a;
  --green-bg: #14361f; --green-text: #a7f3c0;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 40px rgba(249, 115, 22, 0.18);
  --board-light: #f4a259; --board-dark: #4a2462; --board-frame: #1a0a1f; --board-coord: rgba(26, 10, 31, 0.7);
  --board-last-light: #ffd166; --board-last-dark: #7a3f9a; --board-select: #a3e635;
  --piece-white: #fff7ed; --piece-white-edge: #1a0a1f;
  --piece-black: #140816; --piece-black-edge: #f97316; --piece-black-glow: 0 0 8px rgba(249, 115, 22, 0.55);
}
[data-theme="halloween"] .unit-select-bg { background: linear-gradient(160deg, #07030a 0%, #1d0b2a 45%, #3b1206 100%); }
[data-theme="halloween"] .unit-select-bg::before {
  background: radial-gradient(ellipse 80% 55% at 50% 110%, rgba(249, 115, 22, 0.35) 0%, transparent 60%),
              radial-gradient(ellipse 60% 40% at 10% 0%, rgba(168, 85, 247, 0.3) 0%, transparent 60%);
}
[data-theme="halloween"] .tagline { color: #fb923c; text-shadow: 0 0 12px rgba(249, 115, 22, 0.6); }
[data-theme="halloween"] .logo { text-shadow: 0 0 24px rgba(249, 115, 22, 0.55); }
[data-theme="halloween"] .next-btn, [data-theme="halloween"] .restart-btn { color: #1a0a1f; }
[data-theme="halloween"] .progress-bar-fill { background: linear-gradient(90deg, #f97316, #a855f7); }
[data-theme="halloween"] .big-word { text-shadow: 0 0 16px rgba(249, 115, 22, 0.35); }