/* ===========================================================================
 * theme.css — Farben, Schrift, Grundeinstellungen.
 * Sportunabhängig: Season 2 erbt das alles unverändert.
 * ======================================================================== */

:root{
  --cyan:#22e5ff;
  --magenta:#ff2fd0;
  --gold:#ffc53d;
  --lime:#7dff5a;
  --red:#ff5a6e;

  --r-sm:9px; --r:13px; --r-lg:18px;
  --pad:16px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --font-display:'Chakra Petch', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- Dunkel (Standard) ---------- */
:root[data-theme="dark"]{
  --bg:#050810;
  --panel:#0a0f1e;
  --panel-2:#0d1428;
  /* Gemessen: #18223c auf --panel ergab 1,21:1 Kontrast — die Kanten der
     Kacheln waren rechnerisch nicht vorhanden. Das war die gemeinsame
     Ursache für „man sieht die Kästchen fast nicht" an mehreren Stellen.
     #2c3a60 bringt 1,71:1 — deutlich sichtbar, ohne Drahtgitter-Optik.
     --line-strong erreicht 3,03:1 und erfüllt damit die Anforderung für
     bedienbare Elemente (Knöpfe, Eingabefelder, Auswahlfelder). */
  --line:#2c3a60;
  --line-soft:#1b2440;
  --line-strong:#4d5f8d;
  --ink:#f1f4ff;
  /* Deutlich heller als vorher (#9aa7c4 / #7380a0). Vor dem Hintergrundbild
     verschwanden Fließtext und Beschriftungen förmlich. */
  --ink-dim:#bcc7e0;
  --ink-faint:#94a0bd;
  --shadow:0 14px 40px rgba(0,0,0,.5);
  --glow:.55;
  --bg-art:
    radial-gradient(1100px 620px at 78% -12%, rgba(255,47,208,.14), transparent 62%),
    radial-gradient(950px 540px at 12% 4%, rgba(34,229,255,.13), transparent 60%);
}

/* ---------- Hell ---------- */
:root[data-theme="light"]{
  /* Kein Weiß. Reines Weiß blendet vor dem Hintergrundbild und lässt die
     Kacheln schweben — ein kühles Grau hält das Bild ruhig zusammen. */
  /* Flächen und Hintergrund lagen bei 1,18:1 — die Kacheln schwammen im
     Hintergrund, statt darauf zu liegen. Reines Weiß bringt 1,51:1 Trennung
     UND hebt alle Akzentfarben von rund 4,9 auf rund 6,1:1. */
  --bg:#ccd2e0;
  --panel:#ffffff;
  --panel-2:#f3f6fb;
  /* #c3cad9 auf --panel: 1,43:1. Ebenfalls zu schwach. */
  --line:#a3adc2;
  --line-soft:#c7cedd;
  --line-strong:#74829d;   /* 3,36:1 auf --panel, 3,10:1 auf --panel-2 */
  --ink:#151c2c;
  --ink-dim:#454f66;
  --ink-faint:#5b6479;
  /* Gemessen auf --panel-2 (#e2e6ef): die alten Werte lagen alle zwischen
     3,8 und 4,2:1 und damit unter den 4,5:1, die normaler Text braucht.
     Je eine Stufe dunkler bringt alle über die Schwelle. */
  --cyan:#066a89;      /* 4,90:1 */
  --magenta:#b0158c;   /* 5,04:1 */
  --gold:#845b03;      /* 4,83:1 */
  --lime:#1d7026;      /* 4,94:1 */
  --red:#c22a3e;       /* 4,55:1 */
  --shadow:0 10px 30px rgba(20,30,60,.10);
  --glow:.16;
  /* Spielfeld bleibt in beiden Designs dunkel — dort gelten die Neonwerte */
  --pitch-ink:#e9eefc;
  --bg-art:
    radial-gradient(1000px 560px at 80% -10%, rgba(196,24,156,.07), transparent 60%),
    radial-gradient(900px 500px at 10% 2%, rgba(10,143,184,.08), transparent 60%);
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }

body{
  background:var(--bg);
  background-image:var(--bg-art);
  background-attachment:fixed;
  color:var(--ink);
  font:15.5px/1.62 var(--font-body);
  min-height:100vh;
  min-height:100dvh;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,.display{ font-family:var(--font-display); letter-spacing:.01em; margin:0 }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
input,select{ font:inherit; color:inherit }
a{ color:var(--cyan) }

/* Zahlen immer gleich breit — sonst zappeln Punktestände */
.ovr,.bp,.pts,.sc,.pt,.num,.who,.pid,
.sk .row b,.mini .sk3 b,.synmult{ font-family:var(--font-display); font-variant-numeric:tabular-nums }

:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; border-radius:6px }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}