/* ══ KICKME THEME-PALETTEN ═══════════════════════════════════════════════════
   Wird von app.html UND index.html geladen → ein Theme an EINER Stelle pflegen.
   Neues Theme hinzufügen:
     1) Block kopieren, html[data-theme="NAME"] und Variablen setzen.
     2) In app.html → const THEMES {…} den Namen + Label ergänzen.
     3) In admin.html → <select id="themeSel"> eine <option> ergänzen.
   Variablen einer Palette:
     Hintergrund  → --pitch (+ --pitch2/3, --navy/2/3 = Flächen/Dropdowns)
     Text         → --text (Haupt), --text2 (sekundär)
     Akzent 1     → --gold (+ --gold2 dunkler)   ·  Akzent 2 → --cyan (+ --cyan2)
     Erfolg/Fehler→ --green / --red
     Chrome       → --sidebar-bg, --topbar-bg, --glow1/2, --live(+bg), --score, --popup-bg, --surface
     Glas/Rahmen  → --glass/2, --border/2   ·  Stat-Chips → --chip1..4
   Icon-Chips & Tönungen leiten sich automatisch via color-mix aus den Akzenten ab. */

/* Native Dropdown-Listen (z. B. Theme-Auswahl) plattformübergreifend lesbar machen
   (Windows rendert das Popup sonst weiß mit heller Schrift). */
select option { background: var(--popup-bg, #15202b); color: var(--text, #E8F5E9); }

/* ── Theme: Slate (Lavendel/Lila/Hellblau, dunkel) ── */
html[data-theme="slate"] {
  --pitch: #373B49; --pitch2: #424655; --pitch3: #4C5263;
  --navy: #373B49; --navy2: #424655; --navy3: #4C5263;
  --glass: rgba(255,255,255,0.05); --glass2: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.12); --border2: rgba(255,255,255,0.20);
  --text: #E7EBF5; --text2: #AAB1C6;
  --gold: #A0D2EB; --gold2: #83C1E3;
  --cyan: #D0BDF4; --cyan2: #B99FEC;
  --green-bright: #7ED39B; --green: #7ED39B; --red: #E58A93;
  --sidebar-bg: rgba(50,54,67,0.97); --topbar-bg: rgba(50,54,67,0.92);
  --glow1: rgba(160,210,235,0.10); --glow2: rgba(208,189,244,0.09);
  --live: #A0D2EB; --live-bg: rgba(160,210,235,0.10); --score: #E7EBF5; --popup-bg: #2E323F;
  --chip1: #A0D2EB; --chip2: #D0BDF4; --chip3: #7ED39B; --chip4: #E58A93;
  --surface: #424655;
}

/* ── Theme: Vibrant (Blau/Cyan/Pink, dunkel) ── */
html[data-theme="vibrant"] {
  --pitch: #08235A; --pitch2: #0C2C6B; --pitch3: #123681;
  --navy: #08235A; --navy2: #0C2C6B; --navy3: #123681;
  --glass: rgba(255,255,255,0.06); --glass2: rgba(255,255,255,0.10);
  --border: rgba(255,255,255,0.14); --border2: rgba(255,255,255,0.24);
  --text: #EAF1FF; --text2: #9FB6E2;
  --gold: #00DDFF; --gold2: #00B6D4;
  --cyan: #FF4D85; --cyan2: #FF1D58;
  --green-bright: #46E0A8; --green: #46E0A8; --red: #FF1D58;
  --sidebar-bg: rgba(6,26,72,0.97); --topbar-bg: rgba(6,26,72,0.92);
  --glow1: rgba(0,221,255,0.12); --glow2: rgba(255,29,88,0.10);
  --live: #00DDFF; --live-bg: rgba(0,221,255,0.10); --score: #FFF685; --popup-bg: #0C2C6B; --surface: #0C2C6B;
  --chip1: #00DDFF; --chip2: #FF4D85; --chip3: #FFF685; --chip4: #FF1D58;
}

/* ── Theme: Midnight (Indigo, Teal & Amber, dunkel) ── */
html[data-theme="midnight"] {
  --pitch: #14162B; --pitch2: #1C1F3A; --pitch3: #262A4A;
  --navy: #14162B; --navy2: #1C1F3A; --navy3: #262A4A;
  --glass: rgba(255,255,255,0.05); --glass2: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.12); --border2: rgba(255,255,255,0.20);
  --text: #E7E9F5; --text2: #9CA3CC;
  --gold: #5EEAD4; --gold2: #34D3BC;
  --cyan: #F2C14E; --cyan2: #E0A93A;
  --green-bright: #6EE7B7; --green: #6EE7B7; --red: #FB7185;
  --sidebar-bg: rgba(16,18,36,0.97); --topbar-bg: rgba(16,18,36,0.92);
  --glow1: rgba(94,234,212,0.10); --glow2: rgba(242,193,78,0.08);
  --live: #5EEAD4; --live-bg: rgba(94,234,212,0.10); --score: #E7E9F5; --popup-bg: #1C1F3A; --surface: #1C1F3A;
  --chip1: #5EEAD4; --chip2: #F2C14E; --chip3: #6EE7B7; --chip4: #FB7185;
}

/* ── Theme: Graphite (Anthrazit, klarer Blau-Akzent, minimal) ── */
html[data-theme="graphite"] {
  --pitch: #15171C; --pitch2: #1D2026; --pitch3: #262A31;
  --navy: #15171C; --navy2: #1D2026; --navy3: #262A31;
  --glass: rgba(255,255,255,0.05); --glass2: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.11); --border2: rgba(255,255,255,0.18);
  --text: #ECEEF1; --text2: #9AA1AC;
  --gold: #6AA8FF; --gold2: #4F90F0;
  --cyan: #8AB6FF; --cyan2: #6AA8FF;
  --green-bright: #5BD6A0; --green: #5BD6A0; --red: #F2768A;
  --sidebar-bg: rgba(20,22,27,0.97); --topbar-bg: rgba(20,22,27,0.92);
  --glow1: rgba(106,168,255,0.09); --glow2: rgba(106,168,255,0.05);
  --live: #6AA8FF; --live-bg: rgba(106,168,255,0.10); --score: #ECEEF1; --popup-bg: #1D2026; --surface: #1D2026;
  --chip1: #6AA8FF; --chip2: #8AB6FF; --chip3: #5BD6A0; --chip4: #F2768A;
}

/* ── Theme: Egypt (Sand & Night-Blue, dunkel) ── */
html[data-theme="egypt"] {
  --pitch: #12343B; --pitch2: #1B434B; --pitch3: #244E58;
  --navy: #12343B; --navy2: #1B434B; --navy3: #244E58;
  --glass: rgba(255,255,255,0.05); --glass2: rgba(255,255,255,0.09);
  --border: rgba(225,179,130,0.18); --border2: rgba(225,179,130,0.30);
  --text: #F2E6D0; --text2: #B6A789;
  --gold: #E1B382; --gold2: #C89666;
  --cyan: #7FB0B5; --cyan2: #5C9097;
  --green-bright: #9CCB8E; --green: #9CCB8E; --red: #E08A6B;
  --sidebar-bg: rgba(15,42,48,0.97); --topbar-bg: rgba(15,42,48,0.92);
  --glow1: rgba(225,179,130,0.10); --glow2: rgba(127,176,181,0.08);
  --live: #E1B382; --live-bg: rgba(225,179,130,0.10); --score: #F2E6D0; --popup-bg: #1B434B; --surface: #1B434B;
  --chip1: #E1B382; --chip2: #7FB0B5; --chip3: #9CCB8E; --chip4: #E08A6B;
}