/* ---------- Theme definitions ---------- */
:root,
[data-theme="dark"] {
  --color-bg: #121213;
  --color-surface: #1a1a1b;
  --color-text: #ffffff;
  --color-text-dim: #9aa0a6;
  --color-border: #3a3a3c;
  --color-border-strong: #565758;
  --color-accent: #538d4e;

  --color-correct: #538d4e;
  --color-present: #b59f3b;
  --color-absent: #3a3a3c;
  --key-text-on-color: #ffffff;

  --color-key-bg: #818384;
  --color-key-text: #ffffff;
  --color-modal-overlay: rgba(0, 0, 0, 0.6);
  --color-danger: #d24949;
}

/* ---------- OLED Black ---------- */
[data-theme="oled"] {
  --color-bg: #000000;
  --color-surface: #0a0a0c;
  --color-text: #f5f5f7;
  --color-text-dim: #86868b;
  --color-border: #222226;
  --color-border-strong: #3d3d42;
  --color-accent: #3fb950;

  --color-correct: #2ea043;
  --color-present: #d29922;
  --color-absent: #16161a;
  --key-text-on-color: #ffffff;

  --color-key-bg: #1c1c21;
  --color-key-text: #f5f5f7;
  --color-modal-overlay: rgba(0, 0, 0, 0.86);
  --color-danger: #f85149;
}

[data-theme="light"] {
  --color-bg: #ffffff;
  --color-surface: #f4f5f6;
  --color-text: #1a1a1b;
  --color-text-dim: #626466;
  --color-border: #d3d6da;
  --color-border-strong: #878a8c;
  --color-accent: #6aaa64;

  --color-correct: #6aaa64;
  --color-present: #c9b458;
  --color-absent: #787c7e;
  --key-text-on-color: #ffffff;

  --color-key-bg: #d3d6da;
  --color-key-text: #1a1a1b;
  --color-modal-overlay: rgba(0, 0, 0, 0.4);
  --color-danger: #d24949;
}

/* ---------- Neon Standard ---------- */
[data-theme="neon-standard"] {
  --color-on-accent: #000000;
  --color-bg: #0d0e12;
  --color-surface: #15161d;
  --color-text: #ffffff;
  --color-text-dim: #8e95a5;
  --color-border: #2a2d3a;
  --color-border-strong: #3f4458;
  --color-accent: #39ff14;

  --color-correct: #39ff14;
  --color-present: #ffe600;
  --color-absent: #1a1c24;
  --key-text-on-color: #000000;

  --color-key-bg: #222530;
  --color-key-text: #ffffff;
  --color-modal-overlay: rgba(0, 0, 0, 0.8);
  --color-danger: #ff3366;
}

html[data-theme="neon-standard"] .tile.correct {
  box-shadow: 0 0 12px #39ff14, inset 0 0 4px #39ff14 !important;
}
html[data-theme="neon-standard"] .tile.present {
  box-shadow: 0 0 12px #ffe600, inset 0 0 4px #ffe600 !important;
}

/* ---------- Neon City ---------- */
[data-theme="neon-city"] {
  --color-on-accent: #0b071e;
  --color-bg: #0b071e;
  --color-surface: #140e33;
  --color-text: #00e5ff;
  --color-text-dim: #9955ff;
  --color-border: #362a5c;
  --color-border-strong: #8b00ff;
  --color-accent: #00e5ff;

  --color-correct: #8b00ff;
  --color-present: #150f37;
  --color-absent: #150f37;
  --key-text-on-color: #00e5ff;

  --color-key-bg: #1e1542;
  --color-key-text: #00e5ff;
  --color-modal-overlay: rgba(5, 2, 20, 0.85);
  --color-danger: #ff007f;
}

/* Base Tile Styling (Dark Indigo Box with Cyan Text) */
html[data-theme="neon-city"] .tile {
  background: #181238 !important;
  border: 2px solid #362a5c !important;
  color: #bb55ff !important;
  border-radius: 8px !important;
}

/* Filled (Typing before submit) */
html[data-theme="neon-city"] .tile.filled {
  border-color: #00e5ff !important;
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.4) !important;
  color: #00e5ff !important;
}

/* Correct Spot (Purple Background + Cyan Border & Glow + Cyan Text) */
html[data-theme="neon-city"] .tile.correct {
  background: #7a00e6 !important;
  border: 2px solid #00e5ff !important;
  box-shadow: 0 0 12px #00e5ff, inset 0 0 6px #00e5ff !important;
  color: #ffffff !important;
  font-weight: 800;
}

/* Present Spot (Dark Background + Yellow Neon Border & Yellow Glow + Yellow Text) */
html[data-theme="neon-city"] .tile.present {
  background: #150f37 !important;
  border: 2px solid #ffff00 !important;
  box-shadow: 0 0 12px #ffff00, inset 0 0 4px #ffff00 !important;
  color: #ffff00 !important;
  font-weight: 800;
}

/* Absent Spot (Dark Fill + Faint Purple Outline) */
html[data-theme="neon-city"] .tile.absent {
  background: #110b2b !important;
  border: 2px solid #2d2050 !important;
  color: #3e3263 !important;
  box-shadow: none !important;
}

/* ---------- Neon City Keyboard ---------- */
html[data-theme="neon-city"] .key {
  background: #1a123d !important;
  color: #00e5ff !important;
  border: 1px solid #3a2b6e !important;
  border-radius: 6px !important;
  box-shadow: 0 0 4px rgba(139, 0, 255, 0.2) !important;
}

/* Keyboard - Correct Keys (Glowing Purple & Cyan) */
html[data-theme="neon-city"] .key.correct {
  background: #7a00e6 !important;
  color: #ffffff !important;
  border: 1px solid #00e5ff !important;
  box-shadow: 0 0 10px #00e5ff !important;
}

/* Keyboard - Present Keys (Glowing Yellow) */
html[data-theme="neon-city"] .key.present {
  background: #150f37 !important;
  color: #ffff00 !important;
  border: 1px solid #ffff00 !important;
  box-shadow: 0 0 10px #ffff00 !important;
}

/* Keyboard - Absent/Eliminated Keys */
html[data-theme="neon-city"] .key.absent {
  background: #0d0824 !important;
  color: #3e3263 !important;
  border-color: #1e153b !important;
  opacity: 0.5;
  box-shadow: none !important;
}

/* ---------- Neon 80s ---------- */
[data-theme="neon80s"] {
  --color-bg: #050810;
  --color-surface: #0c1226;
  --color-text: #00d9ff;
  --color-text-dim: #ff007f;
  --color-border: #1a2440;
  --color-border-strong: #00d9ff;
  --color-accent: #ff6b00;

  --color-correct: #ff6b00;
  --color-present: #00d9ff;
  --color-absent: #0c1226;
  --key-text-on-color: #050810;

  --color-key-bg: #141c38;
  --color-key-text: #00d9ff;
  --color-modal-overlay: rgba(0, 0, 0, 0.85);
  --color-danger: #ff3b3b;
}

html[data-theme="neon80s"] .tile {
  border: 2px solid #00d9ff !important;
  box-shadow: 0 0 6px #00d9ff !important;
  color: #00d9ff !important;
}

html[data-theme="neon80s"] .tile.correct {
  border: 2px solid #ff007f !important;
  box-shadow: 0 0 12px #ff6b00, 0 0 6px #ff007f !important;
  background: #ff6b00 !important;
  color: #050810 !important;
  font-weight: 800;
}

html[data-theme="neon80s"] .tile.present {
  border: 2px solid #ff6b00 !important;
  box-shadow: 0 0 12px #00d9ff !important;
  background: #00d9ff !important;
  color: #050810 !important;
  font-weight: 800;
}

html[data-theme="neon80s"] .tile.absent {
  border: 2px solid #00d9ff !important;
  box-shadow: 0 0 4px #00d9ff !important;
  color: #00d9ff !important;
  background: #0c1226 !important;
  opacity: 0.8;
}

html[data-theme="neon80s"] .key {
  border: 1px solid #00d9ff !important;
  box-shadow: 0 0 4px rgba(0, 217, 255, 0.3) !important;
}

html[data-theme="neon80s"] .key.correct {
  background: #ff6b00 !important;
  color: #050810 !important;
  border-color: #ff007f !important;
  box-shadow: 0 0 8px #ff6b00 !important;
}

html[data-theme="neon80s"] .key.present {
  background: #00d9ff !important;
  color: #050810 !important;
  border-color: #ff6b00 !important;
  box-shadow: 0 0 8px #00d9ff !important;
}

html[data-theme="neon80s"] .key.absent {
  background: #0c1226 !important;
  color: #2c3d66 !important;
  border-color: #1a2440 !important;
  opacity: 0.5;
  box-shadow: none !important;
}

/* ---------- Synthwave ---------- */
[data-theme="synthwave"] {
  --color-bg: #0d0221;
  --color-surface: #1a0b34;
  --color-text: #f5e9ff;
  --color-text-dim: #a68fd6;
  --color-border: #3a1f66;
  --color-border-strong: #ff2ec4;
  --color-accent: #ff2ec4;

  --color-correct: #00fff0;
  --color-present: #ff2ec4;
  --color-absent: #150a2b;
  --key-text-on-color: #0d0221;

  --color-key-bg: #2a1750;
  --color-key-text: #f5e9ff;
  --color-modal-overlay: rgba(0, 0, 0, 0.7);
  --color-danger: #ff4d6d;
}

/* Base Tile Styling */
html[data-theme="synthwave"] .tile {
  background: #1a0b34 !important;
  border: 2px solid #3a1f66 !important;
  color: #a68fd6 !important;
  border-radius: 8px !important;
}

/* Filled (Typing before submit) */
html[data-theme="synthwave"] .tile.filled {
  border-color: #ff2ec4 !important;
  box-shadow: 0 0 6px rgba(255, 46, 196, 0.4) !important;
  color: #f5e9ff !important;
}

/* Correct Spot (Cyan Fill + Hot Pink Glow Border) */
html[data-theme="synthwave"] .tile.correct {
  background: #00fff0 !important;
  border: 2px solid #ff2ec4 !important;
  box-shadow: 0 0 12px #ff2ec4, inset 0 0 4px #00fff0 !important;
  color: #0d0221 !important;
  font-weight: 800;
}

/* Present Spot (Hot Pink Fill + Cyan Glow Border) */
html[data-theme="synthwave"] .tile.present {
  background: #ff2ec4 !important;
  border: 2px solid #00fff0 !important;
  box-shadow: 0 0 12px #00fff0, inset 0 0 4px #ff2ec4 !important;
  color: #ffffff !important;
  font-weight: 800;
}

/* Absent Spot (Darkened Purple Box) */
html[data-theme="synthwave"] .tile.absent {
  background: #120726 !important;
  border: 2px solid #28124d !important;
  color: #4d3175 !important;
  box-shadow: none !important;
}

/* ---------- Synthwave Keyboard ---------- */
html[data-theme="synthwave"] .key {
  background: #1f0f3d !important;
  color: #f5e9ff !important;
  border: 1px solid #3a1f66 !important;
  border-radius: 6px !important;
  box-shadow: 0 0 4px rgba(255, 46, 196, 0.2) !important;
}

/* Keyboard - Correct Keys (Cyan Fill + Pink Glow) */
html[data-theme="synthwave"] .key.correct {
  background: #00fff0 !important;
  color: #0d0221 !important;
  border: 1px solid #ff2ec4 !important;
  box-shadow: 0 0 10px #ff2ec4 !important;
}

/* Keyboard - Present Keys (Pink Fill + Cyan Glow) */
html[data-theme="synthwave"] .key.present {
  background: #ff2ec4 !important;
  color: #ffffff !important;
  border: 1px solid #00fff0 !important;
  box-shadow: 0 0 10px #00fff0 !important;
}

/* Keyboard - Absent/Eliminated Keys (Dark & Dimmed) */
html[data-theme="synthwave"] .key.absent {
  background: #120726 !important;
  color: #4d3175 !important;
  border-color: #231242 !important;
  opacity: 0.45 !important;
  box-shadow: none !important;
}

/* ---------- Christmas ---------- */
[data-theme="christmas"] {
  --color-bg: #0b2410;
  --color-surface: #123018;
  --color-text: #fdf6f0;
  --color-text-dim: #a8c9ac;
  --color-border: #1f4726;
  --color-border-strong: #2e5c37;
  --color-accent: #c41e3a;

  --color-correct: #2e7d32;
  --color-present: #c41e3a;
  --color-absent: #5a121d;
  --key-text-on-color: #ffffff;

  --color-key-bg: #1f4726;
  --color-key-text: #fdf6f0;
  --color-modal-overlay: rgba(0, 0, 0, 0.65);
  --color-danger: #c41e3a;
}

html[data-theme="christmas"] .tile {
  border: 2px solid #1f4726 !important;
}

html[data-theme="christmas"] .tile.correct {
  background: #2e7d32 !important;
  border: 2px solid #c41e3a !important;
  box-shadow: 0 0 8px #c41e3a !important;
  color: #ffffff !important;
}

html[data-theme="christmas"] .tile.present {
  background: #c41e3a !important;
  border: 2px solid #2e7d32 !important;
  box-shadow: 0 0 8px #2e7d32 !important;
  color: #ffffff !important;
}

html[data-theme="christmas"] .tile.absent {
  background: #123018 !important;
  border: 2px solid #5a121d !important;
  color: #a8c9ac !important;
}

html[data-theme="christmas"] .key.present {
  background: #c41e3a !important;
  color: #ffffff !important;
}

html[data-theme="christmas"] .key.absent {
  background: #123018 !important;
  border: 2px solid #5a121d !important;
  color: #a8c9ac !important;
}

/* ---------- Spooky ---------- */
[data-theme="spooky"] {
  --color-bg: #060a08;
  --color-surface: #0d140f;
  --color-text: #dff5e1;
  --color-text-dim: #7fa88a;
  --color-border: #1c2e20;
  --color-border-strong: #2c452f;
  --color-accent: #7cb342;

  --color-correct: #4f7942;
  --color-present: #5e3a7e;
  --color-absent: #2a1838; /* Dark Purple for eliminated letters */
  --key-text-on-color: #ffffff;

  --color-key-bg: #1c2e20;
  --color-key-text: #dff5e1;
  --color-modal-overlay: rgba(0, 0, 0, 0.75);
  --color-danger: #c94f4f;
}

html[data-theme="spooky"] .tile {
  border: 2px solid #1c2e20 !important;
}

html[data-theme="spooky"] .tile.correct {
  background: #4f7942 !important; /* Green tile */
  border: 2px solid #5e3a7e !important; /* Purple outline on Green tile */
  box-shadow: 0 0 8px #5e3a7e !important;
  color: #ffffff !important;
}

html[data-theme="spooky"] .tile.present {
  background: #5e3a7e !important; /* Purple tile */
  border: 2px solid #4f7942 !important; /* Green outline on Purple tile */
  box-shadow: 0 0 8px #4f7942 !important;
  color: #ffffff !important;
}

html[data-theme="spooky"] .tile.absent {
  background: #0d140f !important;
  border: 2px solid #2a1838 !important;
  color: #7fa88a !important;
}

html[data-theme="spooky"] .key.present {
  background: #5e3a7e !important;
  color: #ffffff !important;
}

html[data-theme="spooky"] .key.absent {
  background: #0d140f !important;
  border: 2px solid #2a1838 !important;
  color: #7fa88a !important;
}

/* ---------- 3D Glossy Bubblegum ---------- */
/* Light glossy-candy palette (dark text on pale tiles/keys) instead of the
   original dark-navy set, so the vibrant pastel background photo reads at
   near-full brightness instead of needing a heavy dark scrim to keep white
   text legible. */
[data-theme="bubblegum-3d"] {
  --color-bg: #fff6fb;
  --color-surface: #fffaf7;
  --color-text: #4a2c46;
  --color-text-dim: #9b7898;
  --color-border: #f3c6de;
  --color-border-strong: #ff8fc0;
  --color-accent: #ff6fae;

  --color-correct: #6fdcc7;
  --color-present: #ff8fc0;
  --color-absent: #ecd9e6;
  --key-text-on-color: #3a1f38;

  --color-key-bg: #ffeef6;
  --color-key-text: #4a2c46;
  --color-modal-overlay: rgba(74, 44, 70, 0.55);
  --color-danger: #ff4d7a;
}

html[data-theme="bubblegum-3d"] .tile {
  border-radius: 12px !important;
  border-width: 1px !important;
}
html[data-theme="bubblegum-3d"] .tile.correct,
html[data-theme="bubblegum-3d"] .tile.present {
  box-shadow: inset -2px -3px 5px rgba(0, 0, 0, 0.3), inset 2px 2px 5px rgba(255, 255, 255, 0.7) !important;
  font-weight: 800;
}

/* ---------- Ocean ---------- */
[data-theme="ocean"] {
  --color-on-accent: #041421;
  --color-bg: #041421;
  --color-surface: #0a2236;
  --color-text: #e0f7fc;
  --color-text-dim: #5c9ebb;
  --color-border: #133957;
  --color-border-strong: #00f0ff;
  --color-accent: #00f0ff;

  --color-correct: #0b3859;
  --color-present: #082e38;
  --color-absent: #06111a;
  --key-text-on-color: #00f0ff;

  --color-key-bg: #0c2b42;
  --color-key-text: #e0f7fc;
  --color-modal-overlay: rgba(2, 10, 18, 0.85);
  --color-danger: #ff5252;
}

/* Base Tile Styling */
html[data-theme="ocean"] .tile {
  background: #0a2236 !important;
  border: 2px solid #133957 !important;
  color: #5c9ebb !important;
  border-radius: 8px !important;
}

/* Filled (Typing before submit) */
html[data-theme="ocean"] .tile.filled {
  border-color: #00f0ff !important;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4) !important;
  color: #e0f7fc !important;
}

/* Correct Spot (Bioluminescent Cyan Glowing Box) */
html[data-theme="ocean"] .tile.correct {
  background: #0b3859 !important;
  border: 2px solid #00f0ff !important;
  box-shadow: 0 0 14px #00f0ff, inset 0 0 6px #00f0ff !important;
  color: #ffffff !important;
  font-weight: 800;
}

/* Present Spot (Seafoam Green Glowing Box) */
html[data-theme="ocean"] .tile.present {
  background: #082e38 !important;
  border: 2px solid #20b2aa !important;
  box-shadow: 0 0 12px #20b2aa, inset 0 0 4px #20b2aa !important;
  color: #a8f5e9 !important;
  font-weight: 800;
}

/* Absent Spot (Dark Deep-Trench Box) */
html[data-theme="ocean"] .tile.absent {
  background: #06111a !important;
  border: 2px solid #0d2233 !important;
  color: #2a4d6c !important;
  box-shadow: none !important;
}

/* ---------- Ocean Keyboard ---------- */
html[data-theme="ocean"] .key {
  background: #0d2b42 !important;
  color: #e0f7fc !important;
  border: 1px solid #1a4263 !important;
  border-radius: 6px !important;
  box-shadow: 0 0 4px rgba(0, 240, 255, 0.2) !important;
}

/* Keyboard - Correct Keys (Cyan Glow) */
html[data-theme="ocean"] .key.correct {
  background: #0b3859 !important;
  color: #ffffff !important;
  border: 1px solid #00f0ff !important;
  box-shadow: 0 0 10px #00f0ff !important;
}

/* Keyboard - Present Keys (Seafoam Glow) */
html[data-theme="ocean"] .key.present {
  background: #082e38 !important;
  color: #a8f5e9 !important;
  border: 1px solid #20b2aa !important;
  box-shadow: 0 0 10px #20b2aa !important;
}

/* Keyboard - Absent/Eliminated Keys (Dark & Faded) */
html[data-theme="ocean"] .key.absent {
  background: #050d14 !important;
  color: #2a4d6c !important;
  border-color: #0c1a26 !important;
  opacity: 0.45 !important;
  box-shadow: none !important;
}

/* ---------- Sunset ---------- */
/* Built around the user's reference photo: blazing red-orange sky over a
   long pier, golden sun at the horizon, electric-blue surf, navy sea.
   Correct = ocean blue (the sky's complement), present = golden sun,
   absent = deep sea navy; coral-orange accents echo the clouds. */
[data-theme="sunset"] {
  --color-bg: #0b1828;
  --color-surface: #11243a;
  --color-text: #fff3e6;
  --color-text-dim: #c9b3a4;
  --color-border: #2b4a6a;
  --color-border-strong: #f0643a;
  --color-accent: #f0643a;
  --color-on-accent: #1a0905;

  --color-correct: #1f8fd0;
  --color-present: #f5b335;
  --color-absent: #0d1d30;
  --key-text-on-color: #1a1205;

  --color-key-bg: #10243a;
  --color-key-text: #fff3e6;
  --color-modal-overlay: rgba(5, 10, 18, 0.82);
  --color-danger: #ff5c5c;
  --bee-center: #f5b335;
  --bee-center-text: #1a1205;
}

html[data-theme="sunset"] .tile {
  background: rgba(11, 26, 44, 0.84) !important;
  border: 2px solid #2b4a6a !important;
  border-radius: 7px !important;
  color: #fff3e6 !important;
}
html[data-theme="sunset"] .tile.filled {
  border-color: #ff8a5c !important;
  box-shadow: 0 0 8px rgba(240, 100, 58, 0.5) !important;
}
html[data-theme="sunset"] .tile.correct {
  background: linear-gradient(160deg, #3bb0ec, #1468a8) !important;
  border: 2px solid #9fe3ff !important;
  box-shadow: 0 0 14px rgba(59, 176, 236, 0.6), inset 0 0 6px rgba(159, 227, 255, 0.45) !important;
  color: #ffffff !important;
  font-weight: 800;
}
html[data-theme="sunset"] .tile.present {
  background: linear-gradient(160deg, #ffd166, #e8962a) !important;
  border: 2px solid #fff0b8 !important;
  box-shadow: 0 0 14px rgba(255, 196, 80, 0.65), inset 0 0 6px rgba(255, 240, 184, 0.5) !important;
  color: #1a1205 !important;
  font-weight: 800;
}
html[data-theme="sunset"] .tile.absent {
  background: #0a1626 !important;
  border: 2px solid #182c44 !important;
  color: #5d7690 !important;
  box-shadow: none !important;
}
html[data-theme="sunset"] .key {
  background: #10243a !important;
  color: #fff3e6 !important;
  border: 1px solid #2f5072 !important;
  border-radius: 7px !important;
  box-shadow: 0 0 4px rgba(240, 100, 58, 0.12) !important;
}
html[data-theme="sunset"] .key.correct {
  background: #1f8fd0 !important;
  color: #ffffff !important;
  border-color: #9fe3ff !important;
  box-shadow: 0 0 10px rgba(59, 176, 236, 0.55) !important;
}
html[data-theme="sunset"] .key.present {
  background: #f5b335 !important;
  color: #1a1205 !important;
  border-color: #fff0b8 !important;
  box-shadow: 0 0 10px rgba(255, 196, 80, 0.55) !important;
}
html[data-theme="sunset"] .key.absent {
  background: #081320 !important;
  color: #5d7690 !important;
  border-color: #142538 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* ---------- Forest ---------- */
/* Built around the user's reference art: a misty night forest split by a
   glowing magenta river, with teal will-o'-wisp lights in the trees.
   Correct = teal glow, present = magenta river glow, absent = the dark
   blue-green of the pines. */
[data-theme="forest"] {
  --color-bg: #020c10;
  --color-surface: #0a1a20;
  --color-text: #e8f4f2;
  --color-text-dim: #93b4bf;
  --color-border: #1c3440;
  --color-border-strong: #3a6a7a;
  --color-accent: #f236c1;
  --color-on-accent: #1a0418;

  --color-correct: #17b89f;
  --color-present: #e232b8;
  --color-absent: #081419;
  --key-text-on-color: #03100f;

  --color-key-bg: #0b1c22;
  --color-key-text: #e8f4f2;
  --color-modal-overlay: rgba(1, 6, 9, 0.82);
  --color-danger: #ff5c7a;
  --bee-center: #f236c1;
  --bee-center-text: #1a0418;
}

html[data-theme="forest"] .tile {
  background: rgba(8, 22, 28, 0.86) !important;
  border: 2px solid #1f3a46 !important;
  border-radius: 7px !important;
  color: #e8f4f2 !important;
}
html[data-theme="forest"] .tile.filled {
  border-color: #3ff0d8 !important;
  box-shadow: 0 0 8px rgba(63, 240, 216, 0.45) !important;
}
html[data-theme="forest"] .tile.correct {
  background: linear-gradient(160deg, #22d6b8, #0f8f7c) !important;
  border: 2px solid #8ffff0 !important;
  box-shadow: 0 0 14px rgba(63, 240, 216, 0.6), inset 0 0 6px rgba(143, 255, 240, 0.45) !important;
  color: #021614 !important;
  font-weight: 800;
}
html[data-theme="forest"] .tile.present {
  background: linear-gradient(160deg, #f65ad0, #b81f95) !important;
  border: 2px solid #ffb3ec !important;
  box-shadow: 0 0 16px rgba(242, 54, 193, 0.7), inset 0 0 6px rgba(255, 179, 236, 0.45) !important;
  color: #ffffff !important;
  font-weight: 800;
}
html[data-theme="forest"] .tile.absent {
  background: #061117 !important;
  border: 2px solid #122630 !important;
  color: #4f6d78 !important;
  box-shadow: none !important;
}
html[data-theme="forest"] .key {
  background: #0b1c22 !important;
  color: #e8f4f2 !important;
  border: 1px solid #1f3a46 !important;
  border-radius: 7px !important;
  box-shadow: 0 0 4px rgba(63, 240, 216, 0.12) !important;
}
html[data-theme="forest"] .key.correct {
  background: #17b89f !important;
  color: #021614 !important;
  border-color: #8ffff0 !important;
  box-shadow: 0 0 10px rgba(63, 240, 216, 0.55) !important;
}
html[data-theme="forest"] .key.present {
  background: #e232b8 !important;
  color: #ffffff !important;
  border-color: #ffb3ec !important;
  box-shadow: 0 0 10px rgba(242, 54, 193, 0.6) !important;
}
html[data-theme="forest"] .key.absent {
  background: #050e13 !important;
  color: #5a7682 !important;
  border-color: #122630 !important;
  box-shadow: none !important;
  opacity: 1;
}

/* ---------- Halloween ---------- */
/* Built around the user's reference art: painted haunted house under an
   orange moon, violet sky, grinning jack-o'-lanterns. Correct = glowing
   pumpkin orange, present = haunted violet, absent = night indigo, with
   candle-yellow edges like the lit windows. */
[data-theme="halloween"] {
  --color-bg: #0e0a24;
  --color-surface: #191138;
  --color-text: #fbeedc;
  --color-text-dim: #c3a9d6;
  --color-border: #3a2a66;
  --color-border-strong: #f59a2a;
  --color-accent: #f5891f;
  --color-on-accent: #1a0c05;

  --color-correct: #f07a1c;
  --color-present: #8e44c4;
  --color-absent: #130d2c;
  --key-text-on-color: #1a0c05;

  --color-key-bg: #1e1442;
  --color-key-text: #fbeedc;
  --color-modal-overlay: rgba(8, 5, 22, 0.84);
  --color-danger: #ff5a5a;
  --bee-center: #f5891f;
  --bee-center-text: #1a0c05;
}

html[data-theme="halloween"] .tile {
  background: rgba(22, 14, 50, 0.88) !important;
  border: 2px solid #3a2a66 !important;
  border-radius: 7px !important;
  color: #fbeedc !important;
}
html[data-theme="halloween"] .tile.filled {
  border-color: #f5c542 !important;
  box-shadow: 0 0 8px rgba(245, 197, 66, 0.45) !important;
}
html[data-theme="halloween"] .tile.correct {
  background: linear-gradient(160deg, #ffa244, #d9560f) !important;
  border: 2px solid #ffd76a !important;
  box-shadow: 0 0 16px rgba(255, 150, 40, 0.7), inset 0 0 8px rgba(255, 215, 106, 0.55) !important;
  color: #1a0c05 !important;
  font-weight: 800;
}
html[data-theme="halloween"] .tile.present {
  background: linear-gradient(160deg, #a45ad8, #5e2a96) !important;
  border: 2px solid #d4a8ff !important;
  box-shadow: 0 0 14px rgba(164, 90, 216, 0.65), inset 0 0 6px rgba(212, 168, 255, 0.45) !important;
  color: #ffffff !important;
  font-weight: 800;
}
html[data-theme="halloween"] .tile.absent {
  background: #0f0a24 !important;
  border: 2px solid #22184a !important;
  color: #6c5c94 !important;
  box-shadow: none !important;
}
html[data-theme="halloween"] .key {
  background: #1e1442 !important;
  color: #fbeedc !important;
  border: 1px solid #3a2a66 !important;
  border-radius: 7px !important;
  box-shadow: 0 0 4px rgba(245, 137, 31, 0.12) !important;
}
html[data-theme="halloween"] .key.correct {
  background: #f07a1c !important;
  color: #1a0c05 !important;
  border-color: #ffd76a !important;
  box-shadow: 0 0 10px rgba(255, 150, 40, 0.6) !important;
}
html[data-theme="halloween"] .key.present {
  background: #8e44c4 !important;
  color: #ffffff !important;
  border-color: #d4a8ff !important;
  box-shadow: 0 0 10px rgba(164, 90, 216, 0.55) !important;
}
html[data-theme="halloween"] .key.absent {
  background: #0c0820 !important;
  color: #6c5c94 !important;
  border-color: #1d1540 !important;
  box-shadow: none !important;
  opacity: 1;
}

/* ---------- Retro Terminal ---------- */
/* Green-phosphor CRT: monospace everything, glowing text, scanlines (see
   the background rule below). Correct = solid lit block, present = dim
   block with a dashed outline, absent = unlit. */
[data-theme="terminal"] {
  --color-bg: #000000;
  --color-surface: #031003;
  --color-text: #33ff33;
  --color-text-dim: #22b022;
  --color-border: #0f3d0f;
  --color-border-strong: #1f8f1f;
  --color-accent: #33ff33;
  --color-on-accent: #000000;

  --color-correct: #33ff33;
  --color-present: #1f9c1f;
  --color-absent: #000000;
  --key-text-on-color: #000000;

  --color-key-bg: #031003;
  --color-key-text: #33ff33;
  --color-modal-overlay: rgba(0, 0, 0, 0.88);
  --color-danger: #ff3333;
  --bee-center: #33ff33;
  --bee-center-text: #000000;
}

html[data-theme="terminal"] body {
  font-family: "Courier New", Consolas, "Lucida Console", ui-monospace, monospace;
  text-shadow: 0 0 4px rgba(51, 255, 51, 0.45);
}
html[data-theme="terminal"] .tile {
  background: rgba(0, 10, 0, 0.88) !important;
  border: 2px solid #0f5a0f !important;
  border-radius: 0 !important;
  color: #33ff33 !important;
}
html[data-theme="terminal"] .tile.filled {
  border-color: #33ff33 !important;
  box-shadow: 0 0 8px rgba(51, 255, 51, 0.5) !important;
}
html[data-theme="terminal"] .tile.correct {
  background: #33ff33 !important;
  border: 2px solid #9dff9d !important;
  box-shadow: 0 0 14px rgba(51, 255, 51, 0.7) !important;
  color: #000000 !important;
  text-shadow: none;
  font-weight: 800;
}
html[data-theme="terminal"] .tile.present {
  background: #0d400d !important;
  border: 2px dashed #33ff33 !important;
  box-shadow: 0 0 8px rgba(51, 255, 51, 0.35) !important;
  color: #8dff8d !important;
  font-weight: 800;
}
html[data-theme="terminal"] .tile.absent {
  background: #000000 !important;
  border: 2px solid #0a260a !important;
  color: #186818 !important;
  box-shadow: none !important;
  text-shadow: none;
}
html[data-theme="terminal"] .key {
  background: #031003 !important;
  color: #33ff33 !important;
  border: 1px solid #1a661a !important;
  border-radius: 2px !important;
}
html[data-theme="terminal"] .key.correct {
  background: #33ff33 !important;
  color: #000000 !important;
  text-shadow: none;
  box-shadow: 0 0 8px rgba(51, 255, 51, 0.6) !important;
}
html[data-theme="terminal"] .key.present {
  background: #0d400d !important;
  color: #8dff8d !important;
  border: 1px dashed #33ff33 !important;
}
html[data-theme="terminal"] .key.absent {
  background: #000000 !important;
  color: #1f7a1f !important;
  border-color: #0a260a !important;
  text-shadow: none;
  opacity: 1;
}

/* ---------- Bubblegum (2D) ---------- */
/* Flat cartoon candy: everything is a "sticker" - white or pastel fill,
   bold plum outline, hard drop shadow. */
[data-theme="bubblegum"] {
  --color-bg: #fff0f6;
  --color-surface: #ffffff;
  --color-text: #5a2a52;
  --color-text-dim: #9a6892;
  --color-border: #e9bcd6;
  --color-border-strong: #5a2a52;
  --color-accent: #ff6fb0;
  --color-on-accent: #ffffff;

  --color-correct: #8fd9a8;
  --color-present: #ffd479;
  --color-absent: #ddd3e6;
  --key-text-on-color: #4a2c45;

  --color-key-bg: #ffffff;
  --color-key-text: #5a2a52;
  --color-modal-overlay: rgba(90, 42, 82, 0.4);
  --color-danger: #e0556f;
}

/* Scalloped cloud behind the title row. Drawn here rather than in the
   background art so it lines up with the header at every screen size and
   never reaches the control buttons below it. */
html[data-theme="bubblegum"] .title-row {
  position: relative;
  background: #ffffff;
  margin: -0.35rem -0.6rem 0.45rem;
  padding: 0.35rem 0.6rem 0.1rem;
}
html[data-theme="bubblegum"] .title-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 9px;
  background: radial-gradient(circle at 11px 0, #ffffff 0 8px, #5a2a52 8.5px 10.5px, transparent 11px) 0 0 / 22px 11px repeat-x;
  pointer-events: none;
}
html[data-theme="bubblegum"] .app-header {
  border-bottom-color: transparent;
}
html[data-theme="bubblegum"] .tile {
  background: #ffffff !important;
  border: 3px solid #5a2a52 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 0 #5a2a52 !important;
  color: #5a2a52 !important;
}
html[data-theme="bubblegum"] .tile.correct {
  background: #8fd9a8 !important;
  color: #3a1f38 !important;
  font-weight: 800;
}
html[data-theme="bubblegum"] .tile.present {
  background: #ffd479 !important;
  color: #3a1f38 !important;
  font-weight: 800;
}
html[data-theme="bubblegum"] .tile.absent {
  background: #ddd3e6 !important;
  color: #8a6f86 !important;
}
html[data-theme="bubblegum"] .key {
  background: #ffffff !important;
  color: #5a2a52 !important;
  border: 2.5px solid #5a2a52 !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 0 #5a2a52 !important;
}
html[data-theme="bubblegum"] .key:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #5a2a52 !important;
}
html[data-theme="bubblegum"] .key.correct {
  background: #8fd9a8 !important;
  color: #3a1f38 !important;
}
html[data-theme="bubblegum"] .key.present {
  background: #ffd479 !important;
  color: #3a1f38 !important;
}
html[data-theme="bubblegum"] .key.absent {
  background: #ddd3e6 !important;
  color: #9a869a !important;
  opacity: 0.85;
}

/* ---------- Art Deco ---------- */
/* 1920s black-and-gold: sharp corners, gold hairline frames, a gold
   correct tile with an inner double-line, emerald present tiles. */
[data-theme="art-deco"] {
  --color-bg: #07090d;
  --color-surface: #0f151c;
  --color-text: #f3e6c4;
  --color-text-dim: #b3a172;
  --color-border: #3a3322;
  --color-border-strong: #d4af37;
  --color-accent: #d4af37;
  --color-on-accent: #0b0f14;

  --color-correct: #d4af37;
  --color-present: #1f6f63;
  --color-absent: #0b0f14;
  --key-text-on-color: #0b0f14;

  --color-key-bg: #0f151c;
  --color-key-text: #e8d5a3;
  --color-modal-overlay: rgba(3, 4, 6, 0.85);
  --color-danger: #d9534f;
  --bee-center: #d4af37;
  --bee-center-text: #0b0f14;
}

html[data-theme="art-deco"] body {
  font-family: Futura, "Century Gothic", "Avenir Next", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
}
html[data-theme="art-deco"] .app-title {
  letter-spacing: 0.3em;
  color: #e8c860;
}
html[data-theme="art-deco"] .tile {
  background: rgba(11, 15, 20, 0.9) !important;
  border: 1px solid #6b5a2a !important;
  border-radius: 0 !important;
  color: #f3e6c4 !important;
}
html[data-theme="art-deco"] .tile.filled {
  border-color: #d4af37 !important;
  box-shadow: inset 0 0 0 3px #0b0f14, inset 0 0 0 4px rgba(212, 175, 55, 0.6) !important;
}
html[data-theme="art-deco"] .tile.correct {
  background: linear-gradient(160deg, #f3dc8a, #d4af37 50%, #9c7a22) !important;
  border: 1px solid #f3dc8a !important;
  box-shadow: inset 0 0 0 3px #e8c860, inset 0 0 0 4px #0b0f14, 0 0 10px rgba(212, 175, 55, 0.45) !important;
  color: #0b0f14 !important;
  font-weight: 800;
}
html[data-theme="art-deco"] .tile.present {
  background: linear-gradient(160deg, #23806f, #14524a) !important;
  border: 1px solid #d4af37 !important;
  box-shadow: inset 0 0 0 3px #1c6a5e, inset 0 0 0 4px #d4af37 !important;
  color: #f3e6c4 !important;
  font-weight: 800;
}
html[data-theme="art-deco"] .tile.absent {
  background: #090c10 !important;
  border: 1px solid #221f16 !important;
  color: #5c5440 !important;
  box-shadow: none !important;
}
html[data-theme="art-deco"] .key {
  background: #0f151c !important;
  color: #e8d5a3 !important;
  border: 1px solid #6b5a2a !important;
  border-radius: 0 !important;
  letter-spacing: 0.05em;
}
html[data-theme="art-deco"] .key.correct {
  background: linear-gradient(160deg, #f3dc8a, #b8902a) !important;
  color: #0b0f14 !important;
  border-color: #f3dc8a !important;
}
html[data-theme="art-deco"] .key.present {
  background: #1f6f63 !important;
  color: #f3e6c4 !important;
  border-color: #d4af37 !important;
}
html[data-theme="art-deco"] .key.absent {
  background: #07090d !important;
  color: #6e6650 !important;
  border-color: #221f16 !important;
  opacity: 1;
}

/* ---------- Tropical ---------- */
/* Lagoon at dusk: deep teal, palm-leaf green correct tiles, mango present
   tiles, rounded "pebble" tiles. */
[data-theme="tropical"] {
  --color-bg: #073a44;
  --color-surface: #0b4a55;
  --color-text: #f2fffb;
  --color-text-dim: #9fd6cf;
  --color-border: #1d6b72;
  --color-border-strong: #4fd1c5;
  --color-accent: #1fc7b6;
  --color-on-accent: #04262b;

  --color-correct: #34b86b;
  --color-present: #ff9f2e;
  --color-absent: #0a2f36;
  --key-text-on-color: #ffffff;

  --color-key-bg: #12707a;
  --color-key-text: #f2fffb;
  --color-modal-overlay: rgba(2, 24, 28, 0.7);
  --color-danger: #ff5f6d;
  --bee-center: #ff9f2e;
  --bee-center-text: #3a1a00;
}
html[data-theme="tropical"] .tile,
html[data-theme="tropical"] .key {
  border-radius: 12px !important;
}
html[data-theme="tropical"] .tile.correct,
html[data-theme="tropical"] .tile.present {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

/* ---------- Desert ---------- */
/* Sunset over the mesas: dark plum-brown base, sage cactus correct,
   golden sand present, terracotta accents. */
[data-theme="desert"] {
  --color-bg: #26121f;
  --color-surface: #351a29;
  --color-text: #fbeedd;
  --color-text-dim: #d3a98c;
  --color-border: #5a3040;
  --color-border-strong: #c47a52;
  --color-accent: #e07a3a;
  --color-on-accent: #2a1208;

  --color-correct: #6f9a4f;
  --color-present: #d9a441;
  --color-absent: #1c0d17;
  --key-text-on-color: #ffffff;

  --color-key-bg: #6b3a3e;
  --color-key-text: #fbeedd;
  --color-modal-overlay: rgba(20, 8, 16, 0.75);
  --color-danger: #e2553c;
  --bee-center: #e07a3a;
  --bee-center-text: #2a1208;
}
html[data-theme="desert"] .tile,
html[data-theme="desert"] .key {
  border-radius: 3px !important;
}

/* ---------- Dessert ---------- */
/* Bakery case: cream base, chocolate text, pistachio correct, caramel
   present, strawberry accent, soft rounded tiles. */
[data-theme="dessert"] {
  --color-bg: #fde2e6;
  --color-surface: #ffffff;
  --color-text: #4a2a1a;
  --color-text-dim: #8a6450;
  --color-border: #ecd5c0;
  --color-border-strong: #b98a6a;
  --color-accent: #ff6f9c;
  --color-on-accent: #ffffff;

  --color-correct: #8cc06a;
  --color-present: #e7a64a;
  --color-absent: #d9c8b6;
  --key-text-on-color: #3a1f12;

  --color-key-bg: #ffffff;
  --color-key-text: #4a2a1a;
  --color-modal-overlay: rgba(74, 42, 26, 0.4);
  --color-danger: #d9475f;
  --bee-center: #ff8fb4;
  --bee-center-text: #4a2a1a;
}
html[data-theme="dessert"] .tile,
html[data-theme="dessert"] .key {
  border-radius: 14px !important;
}
html[data-theme="dessert"] .key {
  box-shadow: 0 2px 0 #e2c3a6;
}
html[data-theme="dessert"] .tile.absent,
html[data-theme="dessert"] .key.absent {
  color: #8a6f5c !important;
}

/* Respect system preference until user picks explicitly */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg: #ffffff;
    --color-surface: #f4f5f6;
    --color-text: #1a1a1b;
    --color-text-dim: #626466;
    --color-border: #d3d6da;
    --color-border-strong: #878a8c;
    --color-accent: #6aaa64;
    --color-correct: #6aaa64;
    --color-present: #c9b458;
    --color-absent: #787c7e;
    --key-text-on-color: #ffffff;
    --color-key-bg: #d3d6da;
    --color-key-text: #1a1a1b;
    --color-modal-overlay: rgba(0, 0, 0, 0.4);
    --color-danger: #d24949;
  }
}

/* ---------- Base ---------- */
:root {
  --tile-gap: 7px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Helvetica Neue", Arial, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* ---------- Theme background images ---------- */
/* Tiles and keys always paint a solid theme color, so they stay readable
   no matter what's behind them. The header title, timer, and icon buttons
      sit directly on the page background with no box of their own, so each
   image below is paired with a scrim tuned to that image's brightness (dark
   for a dark image + light theme text, light for a bright image + dark
   theme text) to keep that text legible while still letting the art show
   through. */
[data-theme="ocean"] body,
[data-theme="christmas"] body,
[data-theme="spooky"] body,
[data-theme="bubblegum-3d"] body,
[data-theme="sunset"] body,
[data-theme="neon-standard"] body,
[data-theme="neon-city"] body,
[data-theme="neon80s"] body,
[data-theme="synthwave"] body,
[data-theme="forest"] body,
[data-theme="halloween"] body,
[data-theme="terminal"] body,
[data-theme="bubblegum"] body,
[data-theme="art-deco"] body,
[data-theme="tropical"] body,
[data-theme="desert"] body,
[data-theme="dessert"] body {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: var(--color-bg);
}

/* All the art above is portrait-framed for phones. `cover` on a wide/short
   desktop window forces the image to stretch to the viewport's width, which
   pushes most of a tall image's height off-screen — often leaving just a
   sliver of sky or wall instead of the actual scene. Past this breakpoint
   (viewport wider than it is tall) we switch to `contain` instead, so the
   whole image is always visible, letterboxed left/right against the theme's
   own background color rather than cropped. */
@media (min-aspect-ratio: 1/1) {
  [data-theme="ocean"] body,
  [data-theme="christmas"] body,
  [data-theme="spooky"] body,
  [data-theme="bubblegum-3d"] body,
  [data-theme="sunset"] body,
  [data-theme="neon-standard"] body,
  [data-theme="neon-city"] body,
  [data-theme="neon80s"] body,
  [data-theme="synthwave"] body,
  [data-theme="forest"] body,
  [data-theme="halloween"] body,
  [data-theme="terminal"] body,
  [data-theme="bubblegum"] body,
  [data-theme="art-deco"] body,
  [data-theme="tropical"] body,
  [data-theme="desert"] body,
  [data-theme="dessert"] body {
    background-size: contain;
    background-position: center top;
  }
}

[data-theme="ocean"] body {
  background-image:
    linear-gradient(180deg, rgba(2, 10, 18, 0.75) 0%, rgba(2, 10, 18, 0.42) 25%, rgba(2, 10, 18, 0.32) 100%),
    url("images/themes/ocean.jpg");
}

[data-theme="christmas"] body {
  /* User-supplied photo: log cabin at Christmas with a fireplace, lit
     tree and snowy window. A darker band behind the header; a lighter
     warm-dark wash elsewhere so the glow still shows through. */
  background-image:
    linear-gradient(180deg, rgba(14, 8, 4, 0.65) 0%, rgba(14, 8, 4, 0.35) 12%, rgba(14, 8, 4, 0.3) 100%),
    url("images/themes/christmas.webp");
}

[data-theme="spooky"] body {
  background-image:
    linear-gradient(rgba(2, 4, 3, 0.42), rgba(2, 4, 3, 0.42)),
    url("images/themes/spooky.jpg");
}

[data-theme="bubblegum-3d"] body {
  /* Tiles/keys and body text switched to a dark-on-light palette for this
     theme (see the theme block above), so the image no longer needs a dark
     scrim to keep text legible — just a faint warm-white wash to keep the
     header text crisp without muting the candy colors. */
  background-image:
    linear-gradient(rgba(255, 250, 252, 0.15), rgba(255, 250, 252, 0.15)),
    url("images/themes/bubblegum-3d.jpg");
}

[data-theme="sunset"] body {
  /* User-supplied reference photo: red-orange sunset over a pier, golden
     horizon, electric-blue surf. The sky behind the header is bright, so
     it gets a darker band there; the rest only a light wash. */
  background-image:
    linear-gradient(180deg, rgba(10, 6, 14, 0.62) 0%, rgba(10, 6, 14, 0.3) 14%, rgba(10, 6, 14, 0.14) 40%, rgba(10, 6, 14, 0.2) 100%),
    url("images/themes/sunset.webp");
}

[data-theme="neon-standard"] body {
  /* User-supplied reference art: green/gold neon tubing along a brick
     room's ceiling corner. The glow sits right at the top of the image,
     which lines up with center-top positioning under the header. */
  background-image:
    linear-gradient(rgba(2, 4, 2, 0.25), rgba(2, 4, 2, 0.25)),
    url("images/themes/neon-standard.webp");
}

[data-theme="neon-city"] body {
  /* User-supplied reference art: wireframe cyberpunk street lined with
     glowing cyan/magenta/gold skyscrapers, in the theme's palette. */
  background-image:
    linear-gradient(rgba(3, 1, 12, 0.25), rgba(3, 1, 12, 0.25)),
    url("images/themes/neon-city.webp");
}

[data-theme="neon80s"] body {
  /* User-supplied reference art: retro arcade row (Pac-Man, Galaga,
     Centipede cabinets) under a magenta/cyan neon ceiling, with retro
     sneakers, boomboxes, and a Rubik's cube scattered on the floor. */
  background-image:
    linear-gradient(rgba(2, 3, 8, 0.25), rgba(2, 3, 8, 0.25)),
    url("images/themes/neon80s.webp");
}

[data-theme="synthwave"] body {
  /* User-supplied reference art: outrun sunset grid in the theme's
     pink/cyan/purple palette. */
  background-image:
    linear-gradient(rgba(4, 1, 14, 0.22), rgba(4, 1, 14, 0.22)),
    url("images/themes/synthwave.webp");
}

[data-theme="forest"] body {
  /* User-supplied reference art: misty night forest with a glowing
     magenta river and teal lights. The top of the image is pale fog, so
     it gets a darker band behind the header text. */
  background-image:
    linear-gradient(180deg, rgba(1, 8, 12, 0.72) 0%, rgba(1, 8, 12, 0.38) 16%, rgba(1, 8, 12, 0.22) 100%),
    url("images/themes/forest.webp");
}

[data-theme="halloween"] body {
  /* User-supplied reference art: painted haunted house, orange moon,
     violet sky, jack-o'-lanterns. Light top wash keeps the header crisp. */
  background-image:
    linear-gradient(180deg, rgba(8, 5, 22, 0.6) 0%, rgba(8, 5, 22, 0.25) 14%, rgba(8, 5, 22, 0.18) 100%),
    url("images/themes/halloween.webp");
}

[data-theme="terminal"] body {
  /* Hand-built SVG CRT screen (boot log, hex dump, vignette) under a CSS
     scanline layer, so the lines stay crisp at any screen size. */
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px),
    url("images/themes/terminal.svg");
}

[data-theme="bubblegum"] body {
  /* Hand-built SVG: flat cartoon bubbles, sprinkles, scalloped cloud
     band, candy-stripe wave. Light image + dark text, so no dark scrim. */
  background-image: url("images/themes/bubblegum.svg");
}

[data-theme="art-deco"] body {
  /* Hand-built SVG: gold sunburst fan, double frame lines with chevrons,
     stepped skyline with lit windows. */
  /* Darker band behind the header so the title doesn't sit on the fan. */
  background-image:
    linear-gradient(180deg, rgba(3, 4, 6, 0.8) 0, rgba(3, 4, 6, 0.35) 90px, rgba(3, 4, 6, 0.12) 220px),
    url("images/themes/art-deco.svg");
}

[data-theme="tropical"] body {
  /* User-supplied photo: palm beach over turquoise water. The bright sky
     behind the header gets a darker band so the white title stays crisp. */
  background-image:
    linear-gradient(180deg, rgba(4, 40, 60, 0.6) 0%, rgba(4, 40, 60, 0.3) 12%, rgba(4, 40, 60, 0.15) 40%, rgba(4, 40, 60, 0.2) 100%),
    url("images/themes/tropical.webp");
}

[data-theme="desert"] body {
  /* User-supplied photo: saguaros and dunes under a pale blue sky. Light
     image, so a warm dark band at the top for the header text and a
     light scrim elsewhere. */
  background-image:
    linear-gradient(180deg, rgba(38, 18, 31, 0.7) 0%, rgba(38, 18, 31, 0.35) 12%, rgba(38, 18, 31, 0.2) 40%, rgba(38, 18, 31, 0.3) 100%),
    url("images/themes/desert.webp");
}

[data-theme="dessert"] body {
  /* User-supplied illustration: pastel cakes and strawberries. Light
     image + dark text, so just a soft cream wash to calm it under text. */
  background-image:
    linear-gradient(180deg, rgba(255, 244, 246, 0.88) 0, rgba(255, 244, 246, 0.6) 110px, rgba(255, 240, 244, 0.35) 220px, rgba(255, 240, 244, 0.35) 100%),
    url("images/themes/dessert.webp");
}


button {
  font-family: inherit;
}

/* ---------- Header ---------- */
.app-header {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

/* Title row: side button groups in equal-width columns so the title stays
   centered no matter how many buttons sit on each side. */
.title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.header-side {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.header-side-end {
  justify-content: flex-end;
}

a.icon-btn {
  text-decoration: none;
  font-size: 1.25rem;
}

.controls-row {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.app-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.05rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.icon-btn:hover,
.icon-btn:active {
  background: var(--color-surface);
}

.length-toggle {
  display: flex;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  overflow: hidden;
}

.len-btn {
  background: none;
  border: none;
  color: var(--color-text);
  padding: 0.28rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.len-btn.active {
  background: var(--color-accent);
  color: var(--color-on-accent, #fff);
}

.mode-toggle {
  display: flex;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  overflow: hidden;
}

.mode-btn {
  background: none;
  border: none;
  color: var(--color-text);
  padding: 0.28rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.mode-btn.active {
  background: var(--color-accent);
  color: var(--color-on-accent, #fff);
}

/* ---------- Board ---------- */
.game-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  min-height: 0;
  gap: 0.4rem;
}

.daily-timer {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-dim);
  letter-spacing: 0.04em;
}

.board {
  display: grid;
  gap: var(--tile-gap);
  width: 100%;
  max-width: 360px;
  flex: 0 0 auto;
  margin: 0 auto;
  align-content: center;
}

/* fitBoard() in wordly.js sets --tile-size; letters scale with the tile. */
.board .tile {
  font-size: calc(var(--tile-size, 62px) * 0.44);
}

.name-gate {
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 1.5rem;
}

.name-gate h2 {
  margin-top: 0;
}

.name-gate p {
  color: var(--color-text-dim);
  font-size: 0.9rem;
}

.board-row {
  display: grid;
  gap: var(--tile-gap);
  grid-auto-flow: column;
  min-height: 0;
}

.tile {
  aspect-ratio: 1 / 1;
  min-height: 0;
  min-width: 0;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 6vw, 1.8rem);
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  color: var(--color-text);
  user-select: none;
  transition: transform 0.15s ease, opacity 0.2s ease;
}

/* Rows not yet reached fade out (whatever theme background is behind the
   board shows through), so the row you're actively guessing on stands out.
   Already-submitted rows and the row you're currently typing in are
   untouched — this only ever targets empty, not-yet-played rows. */
.row-pending .tile {
  opacity: 0.28;
}

.tile.filled {
  border-color: var(--color-border-strong);
}

.tile.pop {
  animation: pop 0.1s ease;
}

@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.tile.flip {
  animation: flip 0.5s ease forwards;
}

@keyframes flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  51% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}

.tile.correct,
.tile.present {
  color: var(--key-text-on-color);
  border-color: transparent;
}

.tile.absent {
  color: var(--color-text);
  border-color: transparent;
}

.tile.correct { background: var(--color-correct); }
.tile.present { background: var(--color-present); }
.tile.absent { background: var(--color-absent); }

.board-row.shake {
  animation: shake 0.4s ease;
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

.board-row.win .tile {
  animation: bounce 0.5s ease;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-18%); }
  50% { transform: translateY(0); }
}

/* ---------- Keyboard ---------- */
.keyboard-wrap {
  flex-shrink: 0;
  padding: 0.3rem 0.3rem calc(0.35rem + env(safe-area-inset-bottom));
}

.keyboard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 500px;
  margin: 0 auto;
}

.keyboard-row {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.key {
  flex: 1;
  max-width: 44px;
  min-width: 24px;
  height: 46px;
  border: none;
  border-radius: 4px;
  background: var(--color-key-bg);
  color: var(--color-key-text);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.key:active {
  filter: brightness(0.85);
}

.key.wide {
  flex: 1.6;
  max-width: 70px;
  font-size: 0.65rem;
}

.key.correct { background: var(--color-correct); color: var(--key-text-on-color); }
.key.present { background: var(--color-present); color: var(--key-text-on-color); }
.key.absent {
  background: var(--color-bg) !important;
  color: var(--color-text-dim) !important;
  border: 1px dashed var(--color-border) !important;
  box-shadow: none !important;
  opacity: 0.28 !important;
  filter: saturate(0.2) brightness(0.72);
  transform: scale(0.95);
}

html[data-theme="light"] .key.absent,
html[data-theme="dessert"] .key.absent,
html[data-theme="bubblegum"] .key.absent {
  background: var(--color-surface) !important;
  color: var(--color-text-dim) !important;
  border: 1px dashed var(--color-border-strong) !important;
  opacity: 0.34 !important;
  filter: grayscale(0.8);
}

/* ---------- Toast ---------- */
.toast-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  background: var(--color-text);
  color: var(--color-bg);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  animation: toast-in 0.15s ease, toast-out 0.15s ease 1.1s forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  to { opacity: 0; }
}

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
}

.hidden {
  display: none !important;
}

.modal {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 360px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}

.modal-wide {
  max-width: 480px;
}

.modal h2 {
  margin-top: 0;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.5rem;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
}

.help-list {
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

.example-row {
  display: grid;
  grid-template-columns: repeat(5, 32px);
  gap: 4px;
  margin: 0.5rem 0 0.25rem;
}

.example-row .tile {
  font-size: 1rem;
  border-radius: 3px;
}

.example-text {
  font-size: 0.85rem;
  color: var(--color-text-dim);
  margin-top: 0;
}

.theme-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-size: 1rem;
  text-align: left;
}

.theme-option.active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.theme-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--color-border-strong);
}

.result-word {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.result-countdown {
  color: var(--color-text-dim);
  font-size: 0.9rem;
  margin-top: -0.25rem;
}

.result-stats {
  display: flex;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.result-stat {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.result-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-dim);
}

.result-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
}

.text-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.text-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.leaderboard-tabs {
  display: flex;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  overflow: hidden;
  width: fit-content;
  margin-bottom: 1rem;
}

.lb-tab {
  background: none;
  border: none;
  color: var(--color-text);
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.lb-tab.active {
  background: var(--color-accent);
  color: var(--color-on-accent, #fff);
}

.leaderboard-content {
  overflow-x: auto;
}

.lb-status {
  color: var(--color-text-dim);
  font-size: 0.9rem;
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.lb-table th,
.lb-table td {
  padding: 0.5rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.lb-table th {
  color: var(--color-text-dim);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.primary-btn {
  background: var(--color-accent);
  color: var(--color-on-accent, #fff);
  border: none;
  border-radius: 6px;
  padding: 0.7rem 1.2rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  margin-top: 0.5rem;
}

/* ---------- Small screens ---------- */
@media (max-width: 380px) {
  .app-title {
    font-size: 1.05rem;
  }
  .key {
    font-size: 0.75rem;
  }
  .controls-row {
    gap: 0.3rem;
  }
}

/* ---------- Short viewports ---------- */
@media (max-height: 700px) {
  .app-header {
    padding: 0.3rem 0.6rem;
    gap: 0.25rem;
  }
  .game-main {
    padding: 0.3rem;
    gap: 0.2rem;
  }
  .daily-timer {
    font-size: 0.85rem;
  }
  :root {
    --tile-gap: 5px;
  }
  .keyboard-wrap {
    padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom));
  }
  .keyboard {
    gap: 4px;
  }
  .key {
    height: 42px;
  }
  .tile {
    font-size: clamp(0.9rem, 5.5vw, 1.6rem);
  }
}

@media (max-height: 580px) {
  .app-title {
    font-size: 1rem;
  }
  .icon-btn {
    width: 1.7rem;
    height: 1.7rem;
    font-size: 0.95rem;
  }
  .key {
    height: 36px;
    font-size: 0.7rem;
  }
  :root {
    --tile-gap: 4px;
  }
  .tile {
    font-size: clamp(0.8rem, 5vw, 1.4rem);
  }
}