/* ========================================
   THEMES.CSS — 10 Visual Themes
   ======================================== */

/* ===== 1. LIGHT ===== */
.theme-light {
  color-scheme: light;
  --bg-primary: #f5f3f0;
  --bg-secondary: #eae6e1;
  --bg-hover: #e0dbd5;
  --text-primary: #1a1714;
  --text-secondary: #5c5550;
  --text-muted: #9a938c;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-text: #ffffff;
  --accent-glow: rgba(37, 99, 235, 0.18);
  --border-color: #d8d3cc;
  --card-bg: #ffffff;
  --card-border: #e8e3dd;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.06);
  --input-bg: #faf9f7;
  --score-color-a: #1e40af;
  --score-color-b: #b91c1c;
  --score-bg: #ffffff;
  --score-shadow: 0 4px 24px rgba(0,0,0,0.08);
  --score-glow: none;
  --set-active-bg: var(--accent);
  --set-active-text: #fff;
  --set-bg: #eae6e1;
  --set-text: #7a746e;
  --serve-color: #e67e22;
  --header-bg: rgba(255,255,255,0.85);
  --header-border: #e8e3dd;
  --display-bg: #f5f3f0;
  --btn-secondary-bg: #eee9e4;
  --btn-secondary-text: #3d3832;
  --btn-secondary-hover: #e0dbd5;
  --overlay-bg: rgba(245,243,240,0.92);
}

/* ===== 2. DARK ===== */
.theme-dark {
  color-scheme: dark;
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-hover: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #475569;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-text: #ffffff;
  --accent-glow: rgba(59, 130, 246, 0.25);
  --border-color: #334155;
  --card-bg: #1e293b;
  --card-border: #334155;
  --card-shadow: 0 4px 20px rgba(0,0,0,0.3);
  --input-bg: #0f172a;
  --score-color-a: #60a5fa;
  --score-color-b: #f87171;
  --score-bg: #1e293b;
  --score-shadow: 0 4px 30px rgba(0,0,0,0.4);
  --score-glow: none;
  --set-active-bg: var(--accent);
  --set-active-text: #fff;
  --set-bg: #334155;
  --set-text: #94a3b8;
  --serve-color: #fbbf24;
  --header-bg: #1e293b;
  --header-border: #334155;
  --display-bg: #0f172a;
  --btn-secondary-bg: #1e293b;
  --btn-secondary-text: #e2e8f0;
  --btn-secondary-hover: #334155;
  --overlay-bg: rgba(15,23,42,0.92);
}

/* ===== 3. OLED BLACK ===== */
.theme-oled {
  color-scheme: dark;
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-hover: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-muted: #555555;
  --accent: #22d3ee;
  --accent-hover: #67e8f9;
  --accent-text: #000000;
  --accent-glow: rgba(34, 211, 238, 0.2);
  --border-color: #1a1a1a;
  --card-bg: #0a0a0a;
  --card-border: #1a1a1a;
  --card-shadow: none;
  --input-bg: #0a0a0a;
  --score-color-a: #22d3ee;
  --score-color-b: #f472b6;
  --score-bg: #000000;
  --score-shadow: none;
  --score-glow: none;
  --set-active-bg: var(--accent);
  --set-active-text: #000;
  --set-bg: #1a1a1a;
  --set-text: #777;
  --serve-color: #fbbf24;
  --header-bg: #000000;
  --header-border: #1a1a1a;
  --display-bg: #000000;
  --btn-secondary-bg: #0a0a0a;
  --btn-secondary-text: #e0e0e0;
  --btn-secondary-hover: #1a1a1a;
  --overlay-bg: rgba(0,0,0,0.95);
}

/* ===== 4. LED SCOREBOARD ===== */
.theme-led {
  color-scheme: dark;
  --bg-primary: #000000;
  --bg-secondary: #050505;
  --bg-hover: #111111;
  --text-primary: #cccccc;
  --text-secondary: #999999;
  --text-muted: #555555;
  --accent: #00ff41;
  --accent-hover: #33ff66;
  --accent-text: #000000;
  --accent-glow: rgba(0, 255, 65, 0.2);
  --border-color: #222222;
  --card-bg: #0a0a0a;
  --card-border: #222222;
  --card-shadow: none;
  --input-bg: #0a0a0a;
  --score-color-a: #ff3333;
  --score-color-b: #33ff66;
  --score-bg: #000000;
  --score-shadow: none;
  --score-glow: 0 0 10px currentColor, 0 0 25px currentColor;
  --set-active-bg: #ff3333;
  --set-active-text: #fff;
  --set-bg: #1a1a1a;
  --set-text: #666;
  --serve-color: #ffdd00;
  --header-bg: #050505;
  --header-border: #1a1a1a;
  --display-bg: #050505;
  --btn-secondary-bg: #111111;
  --btn-secondary-text: #bbb;
  --btn-secondary-hover: #1a1a1a;
  --overlay-bg: rgba(0,0,0,0.97);
}

/* LED dot matrix background */
.theme-led .display-page {
  background-image: radial-gradient(circle, #0d0d0d 1px, transparent 1px);
  background-size: 6px 6px;
}

.theme-led .score-number {
  text-shadow: 0 0 8px currentColor, 0 0 20px currentColor;
}

.theme-led .d-set-score {
  color: #ffdd00;
  text-shadow: 0 0 8px rgba(255,221,0,0.5);
}

/* ===== 5. NEON CYBERPUNK ===== */
.theme-neon {
  color-scheme: dark;
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-hover: #1a1a2a;
  --text-primary: #e0e0ff;
  --text-secondary: #8888aa;
  --text-muted: #44445a;
  --accent: #f0abfc;
  --accent-hover: #e879f9;
  --accent-text: #000000;
  --accent-glow: rgba(240, 171, 252, 0.25);
  --border-color: #2a2a3a;
  --card-bg: #16162a;
  --card-border: #2a2a3a;
  --card-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
  --input-bg: #0f0f1a;
  --score-color-a: #22d3ee;
  --score-color-b: #f472b6;
  --score-bg: #0c0c18;
  --score-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
  --score-glow: 0 0 10px currentColor, 0 0 30px currentColor;
  --set-active-bg: #a855f7;
  --set-active-text: #fff;
  --set-bg: #1a1a2e;
  --set-text: #6b6b8a;
  --serve-color: #fde047;
  --header-bg: #0d0d16;
  --header-border: #2a2a3a;
  --display-bg: #0a0a0f;
  --btn-secondary-bg: #1a1a28;
  --btn-secondary-text: #c0c0e0;
  --btn-secondary-hover: #222238;
  --overlay-bg: rgba(10,10,15,0.95);
}

.theme-neon .score-number {
  text-shadow: 0 0 10px currentColor, 0 0 30px currentColor, 0 0 60px currentColor;
}

.theme-neon .card,
.theme-neon .op-panel,
.theme-neon .op-overview,
.theme-neon .op-history,
.theme-neon .settings-panel,
.theme-neon .confirm-dialog {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Grid lines effect */
.theme-neon .display-page::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(139,92,246,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

/* ===== 6. STADIUM JUMBOTRON ===== */
.theme-stadium {
  color-scheme: dark;
  --bg-primary: #0c1445;
  --bg-secondary: #111b52;
  --bg-hover: #1a2466;
  --text-primary: #ffffff;
  --text-secondary: #a0b0d0;
  --text-muted: #5a6a8a;
  --accent: #fbbf24;
  --accent-hover: #f59e0b;
  --accent-text: #000000;
  --accent-glow: rgba(251, 191, 36, 0.25);
  --border-color: #1a2560;
  --card-bg: #0f1950;
  --card-border: #1a2560;
  --card-shadow: 0 4px 30px rgba(0,0,0,0.4);
  --input-bg: #0c1445;
  --score-color-a: #ffffff;
  --score-color-b: #ffffff;
  --score-bg: #0b1240;
  --score-shadow: 0 0 40px rgba(251, 191, 36, 0.15);
  --score-glow: none;
  --set-active-bg: #fbbf24;
  --set-active-text: #000;
  --set-bg: #1a2560;
  --set-text: #6a7aaa;
  --serve-color: #fbbf24;
  --header-bg: #0e1748;
  --header-border: #1a2560;
  --display-bg: radial-gradient(ellipse at center, #111b52 0%, #0c1445 50%, #060a2a 100%);
  --btn-secondary-bg: #111b52;
  --btn-secondary-text: #d0d8f0;
  --btn-secondary-hover: #1a2466;
  --overlay-bg: rgba(12,20,69,0.95);
}

.theme-stadium .display-page::before {
  content: '';
  position: fixed;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(251,191,36,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.theme-stadium .card,
.theme-stadium .op-panel,
.theme-stadium .op-overview,
.theme-stadium .op-history,
.theme-stadium .settings-panel,
.theme-stadium .confirm-dialog {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ===== 7. RETRO ARCADE ===== */
.theme-retro {
  color-scheme: dark;
  --bg-primary: #1a1c2c;
  --bg-secondary: #262840;
  --bg-hover: #333558;
  --text-primary: #f4f4f4;
  --text-secondary: #a0a0b8;
  --text-muted: #5a5a72;
  --accent: #f77622;
  --accent-hover: #ff9944;
  --accent-text: #000000;
  --accent-glow: rgba(247, 118, 34, 0.25);
  --border-color: #333558;
  --card-bg: #262840;
  --card-border: #3c3e5a;
  --card-shadow: 4px 4px 0 rgba(0,0,0,0.4);
  --input-bg: #1a1c2c;
  --score-color-a: #5fcde4;
  --score-color-b: #f77622;
  --score-bg: #1a1c2c;
  --score-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  --score-glow: none;
  --set-active-bg: #3cc66c;
  --set-active-text: #000;
  --set-bg: #333558;
  --set-text: #8888a0;
  --serve-color: #ffcd33;
  --header-bg: #262840;
  --header-border: #3c3e5a;
  --display-bg: #1a1c2c;
  --btn-secondary-bg: #262840;
  --btn-secondary-text: #d0d0e0;
  --btn-secondary-hover: #333558;
  --overlay-bg: rgba(26,28,44,0.95);
}

.theme-retro .card {
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
}

.theme-retro .btn {
  border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.theme-retro .btn:active {
  box-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  transform: translate(2px, 2px);
}


/* ===== 8. GRADIENT FLAME ===== */
.theme-flame {
  color-scheme: dark;
  --bg-primary: #1a0000;
  --bg-secondary: #2a0a0a;
  --bg-hover: #3a1515;
  --text-primary: #fff5f0;
  --text-secondary: #d4a090;
  --text-muted: #7a4a3a;
  --accent: #f97316;
  --accent-hover: #fb923c;
  --accent-text: #000000;
  --accent-glow: rgba(249, 115, 22, 0.3);
  --border-color: #3a1515;
  --card-bg: #2a0c0c;
  --card-border: #4a1a1a;
  --card-shadow: 0 4px 30px rgba(249, 115, 22, 0.1);
  --input-bg: #1f0808;
  --score-color-a: #fbbf24;
  --score-color-b: #fb923c;
  --score-bg: #1a0505;
  --score-shadow: 0 0 40px rgba(249, 115, 22, 0.2);
  --score-glow: 0 0 20px rgba(249,115,22,0.4);
  --set-active-bg: #ef4444;
  --set-active-text: #fff;
  --set-bg: #3a1515;
  --set-text: #8a5a4a;
  --serve-color: #fbbf24;
  --header-bg: #1a0505;
  --header-border: #3a1515;
  --display-bg: #1a0000;
  --btn-secondary-bg: #2a0a0a;
  --btn-secondary-text: #e8c0b0;
  --btn-secondary-hover: #3a1515;
  --overlay-bg: rgba(26,0,0,0.95);
}

.theme-flame .display-page {
  background: #1a0000;
}

.theme-flame .score-number {
  color: #fbbf24;
  text-shadow: 0 0 20px rgba(249,115,22,0.5);
}


/* ===== 9. GLASSMORPHISM ===== */
.theme-glass {
  color-scheme: dark;
  --bg-primary: #0f1923;
  --bg-secondary: #162230;
  --bg-hover: #1d2d3d;
  --text-primary: #e8edf2;
  --text-secondary: #8a9bb0;
  --text-muted: #4a5d72;
  --accent: #38bdf8;
  --accent-hover: #7dd3fc;
  --accent-text: #000000;
  --accent-glow: rgba(56,189,248,0.2);
  --border-color: #243447;
  --card-bg: #152535;
  --card-border: #243447;
  --card-shadow: 0 4px 24px rgba(0,0,0,0.25);
  --input-bg: #121e2b;
  --score-color-a: #ffffff;
  --score-color-b: #ffffff;
  --score-bg: #131f2c;
  --score-shadow: 0 8px 32px rgba(0,0,0,0.2);
  --score-glow: none;
  --set-active-bg: var(--accent);
  --set-active-text: #000;
  --set-bg: #1c3040;
  --set-text: #5a7a92;
  --serve-color: #fbbf24;
  --header-bg: #121c28;
  --header-border: #243447;
  --display-bg: #0f1923;
  --btn-secondary-bg: #162535;
  --btn-secondary-text: #c0cdd8;
  --btn-secondary-hover: #1d3045;
  --overlay-bg: rgba(10,18,28,0.95);
}

/* Subtle top edge for glass panel feel */
.theme-glass .card,
.theme-glass .op-panel,
.theme-glass .op-overview,
.theme-glass .op-history,
.theme-glass .settings-panel,
.theme-glass .d-theme-popup {
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ===== 10. TROPICAL ===== */
.theme-tropical {
  color-scheme: dark;
  --bg-primary: #064e3b;
  --bg-secondary: #065f46;
  --bg-hover: #047857;
  --text-primary: #ffffff;
  --text-secondary: #a0d8c8;
  --text-muted: #5a9a88;
  --accent: #fbbf24;
  --accent-hover: #f59e0b;
  --accent-text: #000000;
  --accent-glow: rgba(251,191,36,0.3);
  --border-color: #0a6b50;
  --card-bg: #0a5c43;
  --card-border: #0d7558;
  --card-shadow: 0 4px 20px rgba(0,0,0,0.15);
  --input-bg: #084d38;
  --score-color-a: #fbbf24;
  --score-color-b: #34d399;
  --score-bg: #064e3b;
  --score-shadow: 0 4px 20px rgba(0,0,0,0.2);
  --score-glow: none;
  --set-active-bg: #f472b6;
  --set-active-text: #fff;
  --set-bg: #0d6b4e;
  --set-text: #6aaa98;
  --serve-color: #fbbf24;
  --header-bg: #065240;
  --header-border: #0a6b50;
  --display-bg: #064e3b;
  --btn-secondary-bg: #065f46;
  --btn-secondary-text: #ffffff;
  --btn-secondary-hover: #047857;
  --overlay-bg: rgba(6,78,59,0.95);
}

.theme-tropical .display-page {
  background: #064e3b;
}