/* ═══════════════════════════════════════════════════════════
   GAMORIO THEME SYSTEM v2
   Overrides existing CSS vars (--cr, --dk, --d2, etc.)
   10 Themes × Light/Dark = 20 color schemes
   ═══════════════════════════════════════════════════════════ */

/* ── New vars (extend :root) ── */
:root {
  --cr-dark: #8b0000;
  --cr-rgb: 214,45,32;
  --header-bg: rgba(15,15,18,.95);
}

/* ════════════════════════════════════════
   1. AQUA BREEZE (Default) – Teal + Blue
   ════════════════════════════════════════ */
[data-theme="aqua-breeze"][data-mode="dark"] {
  --cr:#0d9488; --cr-dark:#0f766e; --cr-rgb:13,148,136; --r2:#14b8a6;
  --dk:#0c1117; --d2:#111920; --d3:#182028; --d4:#1f2833;
  --bd:rgba(255,255,255,.07); --tx:#e0e8ed; --mu:#6b8898;
  --go:#f0c060; --gn:#27ae60; --bl:#38bdf8; --pu:#a78bfa; --or:#fb923c;
  --header-bg:rgba(12,17,23,.95);
}
[data-theme="aqua-breeze"][data-mode="light"] {
  --cr:#0d9488; --cr-dark:#0f766e; --cr-rgb:13,148,136; --r2:#14b8a6;
  --dk:#f0f7f6; --d2:#ffffff; --d3:#e0eeec; --d4:#ccdeda;
  --bd:rgba(0,50,40,.08); --tx:#0f1f1c; --mu:#4d6e68;
  --go:#b8860b; --gn:#15803d; --bl:#2563eb; --pu:#7c3aed; --or:#ea580c;
  --header-bg:rgba(240,247,246,.96);
}

/* ════════════════════════════════════════
   2. MIDNIGHT TIDE – Deep Navy + Blue
   ════════════════════════════════════════ */
[data-theme="midnight-tide"][data-mode="dark"] {
  --cr:#2563eb; --cr-dark:#1d4ed8; --cr-rgb:37,99,235; --r2:#3b82f6;
  --dk:#080c1a; --d2:#0e1428; --d3:#151c32; --d4:#1c253e;
  --bd:rgba(255,255,255,.07); --tx:#dde4f0; --mu:#6878a0;
  --go:#fbbf24; --gn:#34d399; --bl:#60a5fa; --pu:#a78bfa; --or:#fb923c;
  --header-bg:rgba(8,12,26,.95);
}
[data-theme="midnight-tide"][data-mode="light"] {
  --cr:#2563eb; --cr-dark:#1d4ed8; --cr-rgb:37,99,235; --r2:#3b82f6;
  --dk:#eef2ff; --d2:#ffffff; --d3:#dbeafe; --d4:#bfdbfe;
  --bd:rgba(30,40,80,.08); --tx:#0f172a; --mu:#475985;
  --go:#b8860b; --gn:#059669; --bl:#2563eb; --pu:#7c3aed; --or:#ea580c;
  --header-bg:rgba(238,242,255,.96);
}

/* ════════════════════════════════════════
   3. WARM COAST – Sand + Terracotta
   ════════════════════════════════════════ */
[data-theme="warm-coast"][data-mode="dark"] {
  --cr:#b8813a; --cr-dark:#96652e; --cr-rgb:184,129,58; --r2:#d4a574;
  --dk:#131008; --d2:#1a160e; --d3:#221e14; --d4:#2c261c;
  --bd:rgba(255,255,255,.07); --tx:#ede6d8; --mu:#8a7e68;
  --go:#fbbf24; --gn:#34d399; --bl:#38bdf8; --pu:#c084fc; --or:#fb923c;
  --header-bg:rgba(19,16,8,.95);
}
[data-theme="warm-coast"][data-mode="light"] {
  --cr:#b8813a; --cr-dark:#96652e; --cr-rgb:184,129,58; --r2:#d4a574;
  --dk:#faf6f0; --d2:#ffffff; --d3:#f0e8dc; --d4:#e0d4c2;
  --bd:rgba(80,50,10,.08); --tx:#1a1408; --mu:#6b5d48;
  --go:#b8860b; --gn:#15803d; --bl:#2563eb; --pu:#7c3aed; --or:#ea580c;
  --header-bg:rgba(250,246,240,.96);
}

/* ════════════════════════════════════════
   4. GRADIENT WAVE – Cyan + Gradient Nav
   ════════════════════════════════════════ */
[data-theme="gradient-wave"][data-mode="dark"] {
  --cr:#0891b2; --cr-dark:#0e7490; --cr-rgb:8,145,178; --r2:#22d3ee;
  --dk:#0a1015; --d2:#10181e; --d3:#162028; --d4:#1e2a34;
  --bd:rgba(255,255,255,.07); --tx:#e0eaf0; --mu:#6888a0;
  --go:#fbbf24; --gn:#34d399; --bl:#38bdf8; --pu:#a78bfa; --or:#fb923c;
  --header-bg:linear-gradient(90deg,rgba(8,145,178,.9),rgba(14,116,144,.95),rgba(6,95,120,.9));
}
[data-theme="gradient-wave"][data-mode="light"] {
  --cr:#0891b2; --cr-dark:#0e7490; --cr-rgb:8,145,178; --r2:#22d3ee;
  --dk:#f0f9fb; --d2:#ffffff; --d3:#e0f2f5; --d4:#c4e4ec;
  --bd:rgba(0,60,80,.08); --tx:#0c1820; --mu:#4a6878;
  --go:#b8860b; --gn:#059669; --bl:#0284c7; --pu:#7c3aed; --or:#ea580c;
  --header-bg:linear-gradient(90deg,rgba(8,145,178,.92),rgba(14,116,144,.96),rgba(6,95,120,.92));
}

/* ════════════════════════════════════════
   5. OASIS – Emerald Green
   ════════════════════════════════════════ */
[data-theme="oasis"][data-mode="dark"] {
  --cr:#059669; --cr-dark:#047857; --cr-rgb:5,150,105; --r2:#10b981;
  --dk:#0a1210; --d2:#101a16; --d3:#16221e; --d4:#1e2c26;
  --bd:rgba(255,255,255,.07); --tx:#dceee6; --mu:#68988a;
  --go:#fbbf24; --gn:#34d399; --bl:#38bdf8; --pu:#a78bfa; --or:#fb923c;
  --header-bg:rgba(10,18,16,.95);
}
[data-theme="oasis"][data-mode="light"] {
  --cr:#059669; --cr-dark:#047857; --cr-rgb:5,150,105; --r2:#10b981;
  --dk:#f0faf5; --d2:#ffffff; --d3:#dcf0e6; --d4:#c0e0d0;
  --bd:rgba(0,60,30,.08); --tx:#0a1a12; --mu:#4a7a64;
  --go:#b8860b; --gn:#15803d; --bl:#2563eb; --pu:#7c3aed; --or:#ea580c;
  --header-bg:rgba(240,250,245,.96);
}

/* ════════════════════════════════════════
   6. NORDIC SLATE – Cool Gray + Teal
   ════════════════════════════════════════ */
[data-theme="nordic-slate"][data-mode="dark"] {
  --cr:#64748b; --cr-dark:#475569; --cr-rgb:100,116,139; --r2:#94a3b8;
  --dk:#0e1118; --d2:#141820; --d3:#1c2028; --d4:#242a34;
  --bd:rgba(255,255,255,.06); --tx:#e2e8f0; --mu:#64748b;
  --go:#fbbf24; --gn:#14b8a6; --bl:#38bdf8; --pu:#a78bfa; --or:#fb923c;
  --header-bg:rgba(14,17,24,.95);
}
[data-theme="nordic-slate"][data-mode="light"] {
  --cr:#64748b; --cr-dark:#475569; --cr-rgb:100,116,139; --r2:#94a3b8;
  --dk:#f1f5f9; --d2:#ffffff; --d3:#e2e8f0; --d4:#cbd5e1;
  --bd:rgba(0,0,40,.07); --tx:#0f172a; --mu:#475569;
  --go:#b8860b; --gn:#0d9488; --bl:#2563eb; --pu:#7c3aed; --or:#ea580c;
  --header-bg:rgba(241,245,249,.96);
}

/* ════════════════════════════════════════
   7. CRIMSON BLAZE – Red (Classic Style)
   ════════════════════════════════════════ */
[data-theme="crimson-blaze"][data-mode="dark"] {
  --cr:#dc2626; --cr-dark:#991b1b; --cr-rgb:220,38,38; --r2:#ef4444;
  --dk:#0f0f12; --d2:#161619; --d3:#1e1e24; --d4:#26262e;
  --bd:rgba(255,255,255,.07); --tx:#e8e8ed; --mu:#7878a0;
  --go:#f0c060; --gn:#27ae60; --bl:#3a7bd5; --pu:#9b59b6; --or:#e67e22;
  --header-bg:rgba(15,15,18,.95);
}
[data-theme="crimson-blaze"][data-mode="light"] {
  --cr:#dc2626; --cr-dark:#991b1b; --cr-rgb:220,38,38; --r2:#ef4444;
  --dk:#f5f0f0; --d2:#ffffff; --d3:#f0e4e4; --d4:#e0d0d0;
  --bd:rgba(60,0,0,.08); --tx:#1a0f0f; --mu:#6b5555;
  --go:#b8860b; --gn:#15803d; --bl:#2563eb; --pu:#7c3aed; --or:#ea580c;
  --header-bg:rgba(245,240,240,.96);
}

/* ════════════════════════════════════════
   8. CYBERPUNK NEON – Pink + Purple
   ════════════════════════════════════════ */
[data-theme="cyberpunk-neon"][data-mode="dark"] {
  --cr:#ec4899; --cr-dark:#be185d; --cr-rgb:236,72,153; --r2:#f472b6;
  --dk:#0e0a14; --d2:#14101c; --d3:#1c1628; --d4:#261e34;
  --bd:rgba(255,255,255,.07); --tx:#f0e4f0; --mu:#8868a0;
  --go:#fbbf24; --gn:#34d399; --bl:#38bdf8; --pu:#a78bfa; --or:#fb923c;
  --header-bg:rgba(14,10,20,.95);
}
[data-theme="cyberpunk-neon"][data-mode="light"] {
  --cr:#ec4899; --cr-dark:#be185d; --cr-rgb:236,72,153; --r2:#f472b6;
  --dk:#fdf2f8; --d2:#ffffff; --d3:#fce7f3; --d4:#f0c8e0;
  --bd:rgba(60,0,40,.08); --tx:#1a0a14; --mu:#7a4868;
  --go:#b8860b; --gn:#059669; --bl:#2563eb; --pu:#7c3aed; --or:#ea580c;
  --header-bg:rgba(253,242,248,.96);
}

/* ════════════════════════════════════════
   9. GOLDEN EMPIRE – Amber + Gold
   ════════════════════════════════════════ */
[data-theme="golden-empire"][data-mode="dark"] {
  --cr:#d97706; --cr-dark:#b45309; --cr-rgb:217,119,6; --r2:#f59e0b;
  --dk:#12100a; --d2:#1a1610; --d3:#221e14; --d4:#2e281c;
  --bd:rgba(255,255,255,.07); --tx:#f0e8d8; --mu:#8a8068;
  --go:#fbbf24; --gn:#34d399; --bl:#38bdf8; --pu:#a78bfa; --or:#fb923c;
  --header-bg:rgba(18,16,10,.95);
}
[data-theme="golden-empire"][data-mode="light"] {
  --cr:#d97706; --cr-dark:#b45309; --cr-rgb:217,119,6; --r2:#f59e0b;
  --dk:#fefbf0; --d2:#ffffff; --d3:#fdf2d0; --d4:#f0e0b0;
  --bd:rgba(80,50,0,.08); --tx:#1a1408; --mu:#6b5d38;
  --go:#92640a; --gn:#15803d; --bl:#2563eb; --pu:#7c3aed; --or:#ea580c;
  --header-bg:rgba(254,251,240,.96);
}

/* ════════════════════════════════════════
   10. FOREST MOSS – Green + Earth
   ════════════════════════════════════════ */
[data-theme="forest-moss"][data-mode="dark"] {
  --cr:#16a34a; --cr-dark:#15803d; --cr-rgb:22,163,74; --r2:#22c55e;
  --dk:#0a120c; --d2:#101a14; --d3:#16221a; --d4:#1e2c22;
  --bd:rgba(255,255,255,.07); --tx:#dceee0; --mu:#689878;
  --go:#fbbf24; --gn:#34d399; --bl:#38bdf8; --pu:#a78bfa; --or:#fb923c;
  --header-bg:rgba(10,18,12,.95);
}
[data-theme="forest-moss"][data-mode="light"] {
  --cr:#16a34a; --cr-dark:#15803d; --cr-rgb:22,163,74; --r2:#22c55e;
  --dk:#f0faf2; --d2:#ffffff; --d3:#dcf0e0; --d4:#c0e0c8;
  --bd:rgba(0,50,10,.08); --tx:#0a1a0e; --mu:#4a7a50;
  --go:#b8860b; --gn:#15803d; --bl:#2563eb; --pu:#7c3aed; --or:#ea580c;
  --header-bg:rgba(240,250,242,.96);
}

/* ════════════════════════════════════════
   LIGHT MODE – Global overrides
   (non-var rules for light mode)
   ════════════════════════════════════════ */
[data-mode="light"] .lgrid { opacity: .03; }
[data-mode="light"] .okgame { background: linear-gradient(135deg, var(--d3), var(--d4)); }
[data-mode="light"] header { background: var(--header-bg); }
[data-mode="light"] .tile { box-shadow: 0 2px 5px rgba(0,0,0,.15); }
[data-mode="light"] .mob-draw { background: var(--d2); }
[data-mode="light"] .mob-ov { background: rgba(0,0,0,.4); }
[data-mode="light"] .fcard:hover { box-shadow: 0 10px 28px rgba(0,0,0,.1); }