/* ============================================================
   Schach-Arena · feste Tokens (Premium-Umbau, Look A, PLAN 1.2/1.3/1.6)
   Hier stehen nur Werte, die KEIN Theme aendern darf: Abstaende, Groessen,
   Brettfarben je html[data-brett], Farbschema je html[data-modus] und die
   Bruecke fuer die alten Variablen. Farben, Schriften, Radien, Schatten und
   Kurven setzt das Theme (css/themes/<id>.css). tests/thema.test.mjs prueft,
   dass ein Theme keinen dieser Werte anfasst.
   Reihenfolge: tokens.css -> themes/<id>.css -> board.css -> app.css -> ...
   ============================================================ */

:root {
  /* 4er-Raster */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px;
  /* Seitenrand, Rand neben dem Brett auf dem Handy, kleinste Tippflaeche */
  --rand: 28px;
  --rand-brett-handy: 10px;
  --tipp: 44px;
  --reiter-hoehe: 44px;
  /* Kopfzeilen: Hauptseiten und Partie */
  --kopf-hoehe: 82px;
  --kopf-hoehe-partie: 76px;
  /* Animationstempo (js/bewegung.js setzt es: langsam 1.5, normal 1, schnell 0.6, aus 0) */
  --tempo: 1;
}
@media (max-width: 700px) {
  :root { --rand: 16px; --kopf-hoehe: 64px; --kopf-hoehe-partie: 52px; }
}

/* Farbschema der Bedienelemente (Scrollbalken, Formulare) passend zum Modus, ohne JavaScript */
:root { color-scheme: light; }
:root[data-modus="dunkel"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root[data-modus="system"] { color-scheme: dark; }
}

/* ---------- Brettfarben (Flos Einstellung, unabhaengig vom Theme) ----------
   Feldfarben bleiben exakt wie bisher; dazu die Markierungen aus Entwurf A je Brett (--auswahl-kante: die helle
   Innenkante von Auswahl, Vorschau und Zielfeld unter dem Finger, A "Runde 2"). */
:root, html[data-brett="nacht"] {
  --feld-hell: #e4e8f6; --feld-dunkel: #7c87b6;
  --zuletzt: rgba(255, 178, 46, .5); --auswahl: rgba(28, 34, 92, .26); --punkt: rgba(28, 30, 60, .2);
  --auswahl-kante: rgba(255, 255, 255, .82);
}
html[data-brett="gruen"] {
  --feld-hell: #eeeed2; --feld-dunkel: #769656;
  --zuletzt: rgba(255, 196, 46, .55); --auswahl: rgba(24, 58, 12, .24); --punkt: rgba(20, 30, 10, .2);
  --auswahl-kante: rgba(255, 255, 255, .82);
}
html[data-brett="holz"] {
  --feld-hell: #f0d9b5; --feld-dunkel: #b58863;
  --zuletzt: rgba(255, 170, 40, .5); --auswahl: rgba(84, 46, 14, .24); --punkt: rgba(50, 30, 10, .2);
  --auswahl-kante: rgba(255, 255, 255, .82);
}
/* Labor (Flo 31.10.2026, nur das Erfinder-Konto, js/labor.js): Kuerbis (Halloween), Frost, Marmor, Nussbaum, Thron */
html[data-brett="kuerbis"] {
  --feld-hell: #f6c27e; --feld-dunkel: #8a62b3;
  --zuletzt: rgba(255, 214, 92, .55); --auswahl: rgba(30, 10, 40, .3); --punkt: rgba(30, 10, 40, .26);
  --auswahl-kante: rgba(255, 240, 210, .85);
}
html[data-brett="frost"] {
  --feld-hell: #eef5fa; --feld-dunkel: #86a9c6;
  --zuletzt: rgba(255, 190, 70, .5); --auswahl: rgba(20, 50, 90, .24); --punkt: rgba(20, 40, 70, .2);
  --auswahl-kante: rgba(255, 255, 255, .85);
}
html[data-brett="marmor"] {
  --feld-hell: #edeae4; --feld-dunkel: #8f8a84;
  --zuletzt: rgba(255, 180, 50, .5); --auswahl: rgba(40, 36, 32, .24); --punkt: rgba(30, 28, 26, .2);
  --auswahl-kante: rgba(255, 255, 255, .82);
}
html[data-brett="nussbaum"] {
  --feld-hell: #e6c49b; --feld-dunkel: #7a4b2c;
  --zuletzt: rgba(255, 176, 46, .5); --auswahl: rgba(60, 30, 10, .28); --punkt: rgba(50, 25, 8, .22);
  --auswahl-kante: rgba(255, 245, 230, .82);
}
html[data-brett="thron"] {
  --feld-hell: #f2e2ae; --feld-dunkel: #b0812a;
  --zuletzt: rgba(255, 240, 160, .55); --auswahl: rgba(70, 44, 6, .26); --punkt: rgba(60, 38, 6, .22);
  --auswahl-kante: rgba(255, 252, 235, .85);
}
/* Welten-Bretter (Labor, Flo 31.10.2026 nach den Themen-Brettern bei chess.com: "Schau mal wie cool die Designs sind"):
   je Welt ein Brett mit leichter, eigener Struktur je Feld (--feld-muster-hell/-dunkel, css/board.css). Spaeter (Flos Entscheidung) erspielbar ueber den Endgegner der Welt. */
html[data-brett="acker"] {
  --feld-hell: #eedcaa; --feld-dunkel: #7f9a4e;
  --zuletzt: rgba(255, 214, 80, .55); --auswahl: rgba(40, 52, 10, .28); --punkt: rgba(34, 44, 10, .24);
  --auswahl-kante: rgba(255, 255, 255, .85);
  --feld-muster-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg stroke='rgba%28150%2C112%2C40%2C.22%29' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M14 22l9 3M58 16l8 4M30 58l9-2M72 64l7 4M18 86l8-3M80 34l6 3'/%3E%3C/g%3E%3C/svg%3E");
  --feld-muster-dunkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='rgba%2840%2C56%2C12%2C.2%29' stroke-width='3.2'%3E%3Cpath d='M0 22q25-6 50 0t50 0M0 52q25-6 50 0t50 0M0 82q25-6 50 0t50 0'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-brett="moos"] {
  --feld-hell: #dfe7c9; --feld-dunkel: #567d4b;
  --zuletzt: rgba(255, 220, 90, .55); --auswahl: rgba(16, 40, 14, .3); --punkt: rgba(16, 36, 12, .24);
  --auswahl-kante: rgba(255, 255, 255, .85);
  --feld-muster-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='rgba%28110%2C140%2C70%2C.14%29'%3E%3Ccircle cx='22' cy='26' r='5'/%3E%3Ccircle cx='70' cy='18' r='3.5'/%3E%3Ccircle cx='56' cy='70' r='6'/%3E%3Ccircle cx='16' cy='78' r='3'/%3E%3Ccircle cx='86' cy='56' r='4'/%3E%3C/g%3E%3C/svg%3E");
  --feld-muster-dunkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='rgba%2820%2C48%2C18%2C.2%29'%3E%3Ccircle cx='24' cy='30' r='14'/%3E%3Ccircle cx='74' cy='66' r='17'/%3E%3C/g%3E%3Cg fill='rgba%28180%2C214%2C140%2C.14%29'%3E%3Ccircle cx='70' cy='22' r='9'/%3E%3Ccircle cx='22' cy='78' r='10'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-brett="pflaster"] {
  --feld-hell: #e8dfcf; --feld-dunkel: #7d8795;
  --zuletzt: rgba(255, 196, 70, .55); --auswahl: rgba(24, 30, 42, .28); --punkt: rgba(20, 26, 36, .22);
  --auswahl-kante: rgba(255, 255, 255, .85);
  --feld-muster-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='rgba%28130%2C108%2C72%2C.13%29' stroke-width='2'%3E%3Crect x='6' y='6' width='40' height='38' rx='12'/%3E%3Crect x='54' y='8' width='40' height='36' rx='12'/%3E%3Crect x='8' y='54' width='38' height='40' rx='12'/%3E%3Crect x='54' y='54' width='40' height='40' rx='12'/%3E%3C/g%3E%3C/svg%3E");
  --feld-muster-dunkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='rgba%2824%2C30%2C42%2C.17%29' stroke-width='2.2'%3E%3Crect x='6' y='6' width='40' height='38' rx='12'/%3E%3Crect x='54' y='8' width='40' height='36' rx='12'/%3E%3Crect x='8' y='54' width='38' height='40' rx='12'/%3E%3Crect x='54' y='54' width='40' height='40' rx='12'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-brett="brandung"] {
  --feld-hell: #f3e7cc; --feld-dunkel: #4f93a6;
  --zuletzt: rgba(255, 210, 90, .55); --auswahl: rgba(10, 50, 62, .28); --punkt: rgba(8, 40, 50, .24);
  --auswahl-kante: rgba(255, 255, 255, .85);
  --feld-muster-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='rgba%28176%2C140%2C84%2C.22%29'%3E%3Ccircle cx='18' cy='20' r='1.8'/%3E%3Ccircle cx='62' cy='14' r='1.4'/%3E%3Ccircle cx='40' cy='46' r='1.6'/%3E%3Ccircle cx='82' cy='40' r='1.8'/%3E%3Ccircle cx='24' cy='74' r='1.4'/%3E%3Ccircle cx='70' cy='80' r='1.8'/%3E%3Ccircle cx='50' cy='90' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --feld-muster-dunkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='rgba%28255%2C255%2C255%2C.2%29' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 34q10-8 20 0t20 0M52 70q10-8 20 0t20 0'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-brett="tiefsee"] {
  --feld-hell: #d2e4ec; --feld-dunkel: #3c6a8c;
  --zuletzt: rgba(255, 210, 90, .55); --auswahl: rgba(10, 24, 40, .3); --punkt: rgba(8, 20, 34, .26);
  --auswahl-kante: rgba(255, 255, 255, .85);
  --feld-muster-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='rgba%2860%2C110%2C140%2C.18%29' stroke-width='1.6'%3E%3Ccircle cx='24' cy='70' r='5'/%3E%3Ccircle cx='34' cy='54' r='3'/%3E%3Ccircle cx='76' cy='28' r='4'/%3E%3C/g%3E%3C/svg%3E");
  --feld-muster-dunkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='rgba%28225%2C245%2C255%2C.2%29' stroke-width='2'%3E%3Ccircle cx='26' cy='74' r='7'/%3E%3Ccircle cx='38' cy='52' r='4'/%3E%3Ccircle cx='44' cy='36' r='2.5'/%3E%3Ccircle cx='74' cy='30' r='5'/%3E%3C/g%3E%3C/svg%3E");
}
:root {
  --hinweis: rgba(76, 110, 245, .34);
  /* Flos eigene Pfeile und Marken: das Theme setzt --pfeil-nutzer/--marke-nutzer hell und dunkel, hier der Rueckfall */
  --pfeil-nutzer: rgba(230, 126, 34, .82); --marke-nutzer: rgba(230, 126, 34, .45);
  --vorzug-start: rgba(70, 87, 120, .34);
  --vorzug-ziel: rgba(204, 72, 32, .36);
  --schach: rgba(226, 60, 60, .85);
  /* Schatten der Figuren und Abzeichen auf dem Brett (fest wie die Brettfarben): ruhend, angehoben, gezogen */
  --schatten-figur: 0 2px 1.5px rgba(10, 12, 30, .28);
  --schatten-figur-hoch: 0 6px 5px rgba(10, 12, 30, .26);
  --schatten-figur-zieh: 0 8px 10px rgba(0, 0, 0, .3);
  --schatten-abzeichen: 0 2px 3px rgba(0, 0, 0, .3);
}

/* ---------- Bruecke: alte Variablen auf die neuen Tokens ----------
   Damit nicht umgebaute Screens lesbar bleiben und board.css seine Vertrags-Variablen behaelt.
   Entfernt wird sie im letzten Paket (U10), sobald grep keine Nutzung mehr findet. */
:root {
  --ui-bg: var(--grund); --ui-flaeche: var(--flaeche); --ui-flaeche-2: var(--flaeche-2);
  --ui-text: var(--text); --ui-gedimmt: var(--text-2); --ui-rand: var(--linie); --ui-rand-stark: var(--linie-2);
  --stern: var(--gold); --schlecht: var(--warn); --eval-weiss: var(--balken-weiss); --eval-schwarz: var(--balken-schwarz);
  --schrift-display: var(--display); --radius: var(--r-m); --tap: var(--tipp);
  /* Neon-Reste ruhig stellen, bis ihr Abschnitt geloescht ist */
  --neon-cyan: var(--text-2); --neon-violett: var(--text-2); --neon-pink: var(--akzent); --neon-orange: var(--akzent);
  --neon-verlauf: linear-gradient(var(--linie-2), var(--linie-2)); --neon-rahmen: linear-gradient(var(--linie-2), var(--linie-2));
}

/* Zahlen ueberall mit gleich breiten Ziffern */
.zahl { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Bewegung aus (Einstellung oder "weniger Bewegung" des Geraets: js/bewegung.js setzt dann
   html[data-bewegung="aus"]) ----------
   Wirkt wie die prefers-reduced-motion-Bloecke, aber auf alle festen CSS-Animationen und Uebergaenge. Fast keine
   Dauer und ein Durchlauf statt animation: none, damit animationend und transitionend weiter kommen. */
html[data-bewegung="aus"] *, html[data-bewegung="aus"] *::before, html[data-bewegung="aus"] *::after {
  animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; transition-delay: 0s !important;
}