/* ===== SoulKeeper - Design-Tokens ===================================
   Zentrale Farb-/Abstandswerte. Neue Ebenen (Level1-3) sollten ihre
   eigenen Sektions-Variablen nach diesem Muster ergänzen, statt Werte
   direkt in Selektoren zu hart zu kodieren. ===================== */

:root {
    /* Basis, themenunabhängig */
    --sky-black: #05050a;
    --star-color: #f2ece2;
    --text: #e8e2f0;
    --text-dim: #9a92ab;
    --panel-bg: rgba(10, 8, 16, 0.55);
    --panel-border: rgba(255, 255, 255, 0.12);

    /* Übergangsdauer für den weichen Theme-Wechsel */
    --theme-transition: 1.1s ease;

    /* Theme-Akzentfarbe - wird von [data-theme] unten überschrieben.
       Steuert Titel-Glow, Button-Glow, Theme-Schalter-Highlight. */
    --accent: #7a4fd6;
    --accent-bright: #a97bff;

    /* Warn-/Gefahren-Rot: muss laut Vorgabe an zwei unabhängigen Stellen in
       css/level1-gameplay.css identisch bleiben (Punkteziel-Rahmen +
       Lebensverlust-Blitz-Keyframes, siehe dort) - hier als eine
       Datenquelle statt zweier hartcodierter Kopien, themeunabhängig. */
    --danger-color: #ff2a2a;

    /* Perfekte Runde (Punktesystem Teil 3): Farbe des dauerhaft
       pulsierenden Scheins am Phasen-Punkte-Kasten, solange die
       Kreaturenphase noch fehlerfrei läuft (siehe
       css/level1-gameplay.css: .level1-hud-punkte-phase--perfekt,
       gesteuert von js/level1-gameplay.js/js/level2-gameplay.js).
       Bewusst themeunabhängig wie --danger-color und bewusst NICHT
       --accent/--danger: der Puls muss sich in JEDEM Theme von beiden
       Schwellenzuständen (rot = Ziel offen, Akzentfarbe = erreicht)
       klar unterscheiden, damit beide Aussagen gleichzeitig ablesbar
       bleiben. */
    --perfekt-color: #ffd21e;

    /* Pixel-Schrift: erbt sich bereits über `html, body` (siehe base.css)
       an praktisch jedes Element - die meisten Selektoren brauchen daher
       KEINE eigene font-family-Angabe. Diese Variable ist nur für die
       seltenen Fälle gedacht, in denen eine explizite Angabe wirklich
       nötig ist (z.B. innerhalb eines Elements mit abweichender geerbter
       Schrift). Ca. 45 redundante wortgleiche Wiederholungen wurden am
       2026-08-24 entfernt (siehe log/SK_SELF_CHECK_2026-08-23.md: SK-022) -
       einzige bewusste Ausnahme bleibt `.abspann-*` (VT323 statt Pixel-Font). */
    --font-pixel: 'Press Start 2P', monospace;

    /* Level 2 - Nahtstelle Himmel/Level1 -> Level 2 (siehe css/himmel.css,
       css/level1.css): die Höhle (css/level2.css) ist am oberen Rand der
       Szene durch Ebene 5 (deckendes Schwarz) und den auslaufenden
       Höhlenschein immer praktisch schwarz - bewusst themeunabhängig,
       damit an der Nahtstelle nie ein Farbsprung zwischen zwei knapp
       unterschiedlichen Schwarztönen entsteht. */
    --level2-hoehle-bg: #000000;

    /* ===== Fadenkreuz-Cursor (Schießphasen Level 1-3) =====
       Ersetzt den nativen `cursor: crosshair` durch ein eigenes SVG-
       Fadenkreuz je Waffe (Vorgabe, mit Referenzbild) - weiß mit dünnem
       schwarzen Rand (doppelter Stroke: schwarz breiter darunter, weiß
       schmaler darüber), damit es auf JEDER Szene (helle wie sehr dunkle
       Bereiche, alle drei Themes) lesbar bleibt. Bewusst themeunabhängig:
       eine `url("data:image/svg+xml,...")` ist eine einmal geparste
       Ressource, css var()-Werte des Themes ließen sich darin ohnehin nicht
       zur Laufzeit einsetzen.
       Geometrie ist 1:1 an TREFFER_RADIUS_PX gekoppelt (siehe
       js/level1-gameplay.js, von Level 2/3 übernommen - Maus-Werte, nicht
       die Touch-Werte, da Custom-Cursor auf Touch-Geräten ohnehin nicht
       gerendert werden): Pumpgun zeigt den Trefferradius (20px) als
       Kreisring um die Mitte, Pistole als kleinen gefüllten Punkt (5px).
       Cursor-Hotspot liegt exakt in der Bildmitte (--cursor-pumpgun: 24 24,
       --cursor-pistole: 16 16) - deckt sich mit der tatsächlichen
       Klickposition (event.clientX/Y), die Grafik zeigt dadurch ehrlich,
       wo genau ein Treffer zählt.
       Bugfix: die Canvas-Größe war anfangs deutlich größer (80x80/64x64,
       Dekor-Ring+Ticks weiter außen) - dicht am oberen/unteren
       Fensterrand konnte der Browser das Cursor-Bild dann nicht mehr
       vollständig rendern (nicht genug Platz zwischen Hotspot und
       Bildschirmkante) und fiel auf das native `crosshair`-Fallback-
       Schlüsselwort am Ende der url()-Liste zurück - sichtbar als "altes"
       Fadenkreuz in einem Streifen ganz oben/unten. Jetzt deutlich
       kompakter (48x48/32x32, Dekor-Ring dicht am Trefferradius-Kreis,
       Ticks nur noch 1.5-2px lang) - der Trefferradius-Kreis selbst bleibt
       exakt gleich groß (20px/5px), nur die rein dekorativen Außenteile
       wurden verkleinert. */
    --cursor-pumpgun: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2220%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2222%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%220.5%22%20x2%3D%2224%22%20y2%3D%222%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%2246%22%20x2%3D%2224%22%20y2%3D%2247.5%22%2F%3E%3Cline%20x1%3D%220.5%22%20y1%3D%2224%22%20x2%3D%222%22%20y2%3D%2224%22%2F%3E%3Cline%20x1%3D%2246%22%20y1%3D%2224%22%20x2%3D%2247.5%22%20y2%3D%2224%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2220%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2222%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%220.5%22%20x2%3D%2224%22%20y2%3D%222%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%2246%22%20x2%3D%2224%22%20y2%3D%2247.5%22%2F%3E%3Cline%20x1%3D%220.5%22%20y1%3D%2224%22%20x2%3D%222%22%20y2%3D%2224%22%2F%3E%3Cline%20x1%3D%2246%22%20y1%3D%2224%22%20x2%3D%2247.5%22%20y2%3D%2224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 24 24, crosshair;
    --cursor-pistole: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2213%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%221%22%20x2%3D%2216%22%20y2%3D%223%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%2229%22%20x2%3D%2216%22%20y2%3D%2231%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2216%22%20x2%3D%223%22%20y2%3D%2216%22%2F%3E%3Cline%20x1%3D%2229%22%20y1%3D%2216%22%20x2%3D%2231%22%20y2%3D%2216%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2213%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%221%22%20x2%3D%2216%22%20y2%3D%223%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%2229%22%20x2%3D%2216%22%20y2%3D%2231%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2216%22%20x2%3D%223%22%20y2%3D%2216%22%2F%3E%3Cline%20x1%3D%2229%22%20y1%3D%2216%22%20x2%3D%2231%22%20y2%3D%2216%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%225%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%224.2%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") 16 16, crosshair;
}

/* ----- Theme: Purple ----- */
[data-theme="purple"] {
    --accent: #7a4fd6;
    --accent-bright: #a97bff;
    --horizon-color: #3a1a5c;
    /* Level 1 - hintere Friedhofsebene: verbindliche Hex-Vorgabe, nicht
       durch ähnliche Werte ersetzen (siehe css/level1.css). */
    --level1-grau: #171126;
    /* Level 2 - Höhle (siehe css/level2.css): Ebene 4 (Felsformationen
       Vordergrund) und Ebene 2 (Höhlenwand-Maske) sind Fels-Grundfarben,
       --glow-color speist sowohl das zentrale Höhlenlicht als auch den
       Lochschein (per color-mix() zu helleren/dunkleren Stufen verrechnet
       statt fester Zwischenwerte). Pilze haben eine eigene, vom Glow
       leicht abgesetzte Farbe + Glow-Ton. Ebene 5, alle Schatten und die
       Kristalle bleiben bewusst themeunabhängig (siehe css/level2.css). */
    --level2-ebene4-color: #0D0714;
    --level2-ebene2-color: #170B26;
    --level2-glow-color: #7B3FA0;
    --level2-pilz-color: #B86BDB;
    --level2-pilz-glow-color: #713F91;
}

/* ----- Theme: Orange (Standard) -----
   Orange ist die Grundeinstellung der Website: der :root-Fallback greift auf
   jeder Seite ohne (oder mit unbekanntem) data-theme und deckt sich mit dem
   Startwert data-theme="orange" im Markup und STANDARD_THEME in
   sh/js/theme.js. Frueher stand hier Purple. */
:root,
[data-theme="orange"] {
    --accent: #c9500f;
    --accent-bright: #ff8a3d;
    --horizon-color: #6b2a0a;
    --level1-grau: #2A1A12;
    --level2-ebene4-color: #120804;
    --level2-ebene2-color: #241207;
    --level2-glow-color: #C85A18;
    --level2-pilz-color: #D98232;
    --level2-pilz-glow-color: #A85520;
}

/* ----- Theme: Grey ----- */
[data-theme="grey"] {
    --accent: #6b7280;
    --accent-bright: #a8b0bd;
    --horizon-color: #4a4e58;
    --level1-grau: #18202B;
    --level2-ebene4-color: #10161A;
    --level2-ebene2-color: #1B252C;
    --level2-glow-color: #B8D8E8;
    --level2-pilz-color: #B8D6D9;
    --level2-pilz-glow-color: #7FA6B3;
}

/* ----- Theme: White ----- */
[data-theme="white"] {
    --accent: #d0d0d8;
    --accent-bright: #ffffff;
    --horizon-color: #45454c;
    /* Felswände bewusst NICHT weiß, sondern gräulich (Vorgabe
       TODO-20260901-006) - dieselben Werte wie Theme Grey. */
    --level1-grau: #18202B;
    --level2-ebene4-color: #10161A;
    --level2-ebene2-color: #1B252C;
    --level2-glow-color: #E5E5EA;
    --level2-pilz-color: #D8D8DE;
    --level2-pilz-glow-color: #A0A0A8;
}

/* ===== Umgebungssteuerung (MAIN/DEV) =====
   data-umgebung wird ganz am Anfang von index.html per Inline-Skript auf
   <html> gesetzt (Pfaderkennung /main/ vs. /dev0/, siehe dortiger
   Kommentar). Elemente mit .dev-only (Seelenpfad/Spielwerte im Startmenü,
   Statistik/Highscore-Reset in den Settings, siehe index.html) bleiben nur
   in DEV sichtbar - reine Sichtbarkeitssteuerung, das jeweilige Element
   behält seine eigentliche display-Regel (z.B. .settings-zeile { display:
   flex }) unverändert, sobald data-umgebung="dev" ist. */
:root:not([data-umgebung="dev"]) .dev-only {
    display: none;
}