/* Grundstil fuer js/board.js (Premium-Umbau U6, Look A "Modern und klar").
   Nutzt nur die Vertrags-Variablen (mit Ersatzwerten), css/app.css darf alles ueberschreiben. Laden vor css/app.css.
   Lagen: alles, was auf einem Feld sitzt, bekommt left/top in Prozent aus board.js (keine calc(var(--x) * ...)-
   Rechnung im Browser, WebKit rundete anders). Animiert werden nur transform und opacity; die Kurven und Dauern
   kommen aus den Tokens (--gleiten, --feder, --feder-hupf, --d-*), mit Ersatz, wenn sie fehlen (Demo-Seite). */

.brett {
  /* Ersatzwerte, falls das Design (noch) nichts setzt */
  --b-hell: var(--feld-hell, #e4e8f6);
  --b-dunkel: var(--feld-dunkel, #7c87b6);
  --b-zuletzt: var(--zuletzt, rgba(118, 206, 255, .5));
  --b-auswahl: var(--auswahl, rgba(28, 34, 92, .26));
  --b-hinweis: var(--hinweis, rgba(76, 110, 245, .34));
  --b-schach: var(--schach, rgba(226, 60, 60, .85));
  --b-punkt: var(--punkt, rgba(28, 30, 60, .2));
  --b-pfeil-nutzer: var(--pfeil-nutzer, rgba(230, 126, 34, .82));
  --b-marke-nutzer: var(--marke-nutzer, rgba(230, 126, 34, .45));
  --b-kante: var(--auswahl-kante, rgba(255, 255, 255, .82));   /* helle Innenkante von Auswahl, Vorschau, Ziel unter dem Finger */
  --b-gleiten: var(--gleiten, cubic-bezier(.16, 1, .3, 1));
  --b-feder: var(--feder, cubic-bezier(.34, 1.36, .64, 1));
  --b-hupf: var(--feder-hupf, cubic-bezier(.34, 1.7, .5, 1));
  --b-sanft: var(--sanft, cubic-bezier(.65, 0, .35, 1));
  --b-d-xs: var(--d-xs, 120ms);
  --b-d-m: var(--d-m, 320ms);
  --b-d-l: var(--d-l, 520ms);
  /* Stellschrauben fuer das Design */
  --brett-radius: var(--r-brett, 12px);
  --brett-dauer: 300ms;         /* setzt board.js je Zug (Gleitdauer mal Tempo) */
  --brett-zieh-maus: 1;         /* Vergroesserung der gezogenen Figur */
  --brett-zieh-finger: 1.35;
  --koord-rand: 12px;           /* Streifen fuer die Koordinaten bei Lage "rand" (ausserhalb, im Sockel) */

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* kein overflow: hidden, sonst werden Rand-Koordinaten und Nutzer-Pfeile am Rand abgeschnitten */
}
.brett.greifbar { cursor: grab; }
.brett.zieht { cursor: grabbing; }
.brett.malt { cursor: crosshair; }
/* Nichts im Brett geht per Transition ueber, auch nicht bei "Bewegung aus" (html[data-bewegung="aus"] * in tokens.css
   macht aus jeder Eigenschaft eine 0,01-ms-Transition; left/top einer Figur muessen aber sofort gelten, sonst steht
   sie einen Frame lang falsch). Zustaende mit eigener Transition (.angehoben, .kippt, .geht) setzen ihre Eigenschaft selbst. */
.brett, .brett * { transition-property: none; }

/* ---------- Felder (absolut, Lage in Prozent aus board.js) ---------- */
.brett-felder {
  position: absolute;
  inset: 0;
  /* Eigener Stapelkontext (z-index 0): alle Ueberlagerungen (.lage, Flos Marken) liegen UNTER den Figuren (z 2) wie in
     A. container-type bildet in Chromium keinen Stapelkontext, ohne z-index lagen Auswahl und Schach-Hof ueber der Figur. */
  z-index: 0;
  container-type: inline-size;  /* cqw = Prozent der Brettbreite (Koordinaten, Ringe) */
  border-radius: var(--brett-radius);
  overflow: hidden;
  /* Dauerhaft eigene Ebene (Flo-Video iPad 06.11.2026): beim Bot-Zug blendet .lage.zuletzt per Animation ein, und
     iOS-Safari baute dafuer die abgerundete Clip-Ebene um; etwa 4 Frames lang fehlten alle Felder (nur Figuren und
     Zug-Toenung sichtbar). Mit fester Ebene wird sie nicht mehr auf- und abgebaut. Regel in tests/board.test.mjs. */
  transform: translateZ(0);
}
.brett .feld { position: absolute; width: 12.5%; height: 12.5%; }
.brett .feld.h { background: var(--b-hell); }
.brett .feld.d { background: var(--b-dunkel); }
/* Bretter mit Struktur (Welten-Bretter, css/tokens.css): je Feld eine leichte Zeichnung ueber der Farbe */
.brett .feld.h { background-image: var(--feld-muster-hell, none); background-size: 100% 100%; }
.brett .feld.d { background-image: var(--feld-muster-dunkel, none); background-size: 100% 100%; }

/* Koordinaten, Lage "ecke": klein in der Feldecke, Zahlen oben links, Buchstaben unten rechts (PLAN 2.5 Regel 4) */
.brett .koord {
  position: absolute;
  font-family: var(--schrift, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-weight: 700;
  line-height: 1;
  font-size: 11px;
  font-size: clamp(10px, 2.4cqw, 12px);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.brett .koord.zahl { top: 2px; left: 3px; }
.brett .koord.buchst { bottom: 1px; right: 3px; }
/* Feld unten rechts: das Brett-Eck ist abgerundet (--brett-radius), der Buchstabe rueckt nur nach oben ins Rund. Nicht
   nach links: dort stuende er hinter dem Fuss der Figur (Turm auf h1), auf dem Handy unsichtbar. */
.brett .feld .koord.buchst.ecke { bottom: calc(1px + var(--brett-radius) * .15); }
.brett .feld.h .koord { color: var(--b-dunkel); }
.brett .feld.d .koord { color: var(--b-hell); }

/* Koordinaten, Lage "rand": ausserhalb der Felder im Sockel (der Sockel bekommt links und unten --koord-rand Platz,
   css/app.css .brett-rahmen:has(> .brett.koord-rand)) */
.brett-koord-rand { position: absolute; inset: 0; pointer-events: none; }
.brett-koord-rand:empty { display: none; }
.brett-koord-rand .koord {
  display: grid;
  place-items: center;
  font-size: 10.5px;
  color: var(--text-2, #6E6A63);
}
.brett-koord-rand .koord.zahl { left: calc(-1 * var(--koord-rand)); width: var(--koord-rand); height: 12.5%; }
.brett-koord-rand .koord.buchst { top: 100%; width: 12.5%; height: var(--koord-rand); }

/* ---------- Ueberlagerungen (unter den Figuren; z-index nur fuer die Reihenfolge untereinander, .brett-felder kapselt) ---------- */
.brett-lagen { position: absolute; inset: 0; pointer-events: none; }
.brett .lage { position: absolute; width: 12.5%; height: 12.5%; }
/* Flo 30.10. abends: "damit man sehen kann, was der letzte Zug vom Bot war": warmes Bernstein mit Ring auf jedem Brett */
.brett .lage.zuletzt { background: var(--b-zuletzt); z-index: 1; animation: brett-ein var(--b-d-m) var(--b-sanft) both;
  box-shadow: inset 0 0 0 max(2px, .45cqw) var(--zuletzt-rand, rgba(232, 128, 0, .8)); }
.brett .lage[class*="mark-"] { z-index: 2; }
.brett .lage.schach {
  z-index: 3;
  /* ruhiger Hof wie in A: voll in der Mitte, weich auslaufend, bevor er den Feldrand erreicht */
  background: radial-gradient(circle at 50% 55%, var(--b-schach) 0, transparent 68%);
  animation: brett-ein var(--b-d-m) var(--b-sanft) both;
}
/* Auswahl: ruhige Abdunklung mit heller Innenkante (A, Runde 2) */
.brett .lage.auswahl { background: var(--b-auswahl); z-index: 4; box-shadow: inset 0 0 0 max(3px, .55cqw) var(--b-kante); }
/* Zug bestaetigen: das Ziel leuchtet in der warmen Toenung des letzten Zugs, mit heller Innenkante */
.brett .lage.vorschau { background: var(--b-zuletzt); z-index: 4; box-shadow: inset 0 0 0 max(3px, .55cqw) var(--b-kante); }
/* Zielpunkte als weiche Scheiben, federn gestaffelt ein (--v aus board.js) */
.brett .lage.ziel { z-index: 5; }
.brett .lage.ziel::after {
  content: "";
  position: absolute;
  inset: 37%;
  border-radius: 50%;
  background: var(--b-punkt);
  animation: brett-punkt var(--b-d-m) var(--b-hupf) var(--v, 0ms) both;
}
/* Schlagziele als Ringecken */
.brett .lage.ziel.schlag::after {
  inset: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 0 0, var(--b-punkt) 0 22%, transparent 23%),
    radial-gradient(circle at 100% 0, var(--b-punkt) 0 22%, transparent 23%),
    radial-gradient(circle at 0 100%, var(--b-punkt) 0 22%, transparent 23%),
    radial-gradient(circle at 100% 100%, var(--b-punkt) 0 22%, transparent 23%);
}
/* Turm auf Koenig: der eigene Turm ist ein Ziel (Rochade), kein Schlag */
.brett .lage.ziel.rochade::after { inset: 37%; border-radius: 50%; background: var(--b-punkt); }
.brett .lage.ueber {
  z-index: 6;
  box-shadow: inset 0 0 0 max(3px, .6cqw) var(--b-kante);
}

/* Markierungen ueber markiere(felder, art) */
.brett .lage.mark-hinweis { background: var(--b-hinweis); }
.brett .lage.mark-auswahl { background: var(--b-auswahl); }
.brett .lage.mark-zuletzt { background: var(--b-zuletzt); }
.brett .lage.mark-fehler { background: var(--schlecht, #e5675e); opacity: .45; }
.brett .lage.mark-gut { background: var(--gut, #46cf7e); opacity: .45; }
.brett .lage.mark-vorzug-start { background: var(--vorzug-start); }
.brett .lage.mark-vorzug-ziel { background: var(--vorzug-ziel); }
.brett .lage.mark-bewertung {
  box-shadow: inset 0 0 0 max(3px, .55cqw) var(--akzent, #CC4820);
  animation: brett-puls 1s ease-in-out infinite;
}
.brett .lage.mark-k-brillant { background: var(--k-brillant, #7A4FD6); opacity: .45; }
.brett .lage.mark-k-stark { background: var(--k-stark, #2F67D8); opacity: .45; }
.brett .lage.mark-k-bester { background: var(--k-bester, #14936A); opacity: .45; }
.brett .lage.mark-k-exzellent { background: var(--k-exzellent, #5E9C4E); opacity: .45; }
.brett .lage.mark-k-gut { background: var(--k-gut, #7F928A); opacity: .45; }
.brett .lage.mark-k-buch { background: var(--k-buch, #A07A52); opacity: .45; }
.brett .lage.mark-k-ungenau { background: var(--k-ungenau, #D6A21C); opacity: .45; }
.brett .lage.mark-k-fehler { background: var(--k-fehler, #DD7A2A); opacity: .45; }
.brett .lage.mark-k-verpasst { background: var(--k-verpasst, #B4468F); opacity: .45; }
.brett .lage.mark-k-patzer { background: var(--k-patzer, #BC2A4C); opacity: .45; }
.brett .lage.mark-k-erzwungen { background: var(--k-erzwungen, #878E9E); opacity: .45; }

/* ---------- Figuren (Lage per left/top, Gleiten per transform aus board.js) ---------- */
.brett > .figur {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  z-index: 2;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* gewaehlte Figur steht leicht angehoben (A); weicher Schatten statt Leuchten. Die Feder gilt nur beim Anheben:
   ohne die Klasse (Zug, Aufrichten nach dem Koenigsfall, setzeStellung ohne Animation) steht die Figur sofort. */
.brett > .figur.angehoben {
  z-index: 3;
  transition: transform var(--b-d-xs) var(--b-feder);
  transform: translateY(-5%) scale(1.09);
  filter: drop-shadow(var(--schatten-figur-hoch, 0 6px 5px rgba(10, 12, 30, .26)));
}
.brett > .figur.gleitet { z-index: 3; transition: none; }
.brett > .figur.gezogen {
  z-index: 9;
  transition: none;
  transform-origin: 50% 50%;
  will-change: transform;
  filter: drop-shadow(var(--schatten-figur-zieh, 0 8px 10px rgba(0, 0, 0, .3)));
}
.brett > .figur.geht {
  z-index: 1;
  opacity: 0;
  transition: opacity var(--brett-dauer) var(--b-sanft);
}
.brett > .figur.kommt { animation: brett-ein var(--brett-dauer) var(--b-sanft); }
/* verdeckt: die Figur unter dem umgewandelten Bauern und, bei Zug bestaetigen, alles, was die Vorschau schlagen wuerde */
.brett > .figur.verdeckt { opacity: 0; }
/* Zug bestaetigen: die Figur steht halb durchsichtig auf dem Ziel */
.brett > .figur.vorschau { z-index: 3; opacity: .55; }

/* ---------- Pfeile: Coach (brett-pfeile) und Flos eigene (brett-nutzer) ---------- */
.brett-pfeile, .brett-nutzer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}
.brett-pfeile .pfeil { opacity: .82; }
.brett-nutzer { z-index: 4; }
/* Flos Marken faerben das Feld, nicht die Figur: eigene Ebene in .brett-felder, unter den Figuren (ueber Zug-Toenung und
   mark-*, unter Auswahl und Zielpunkten) */
.brett-nutzer.brett-marken { z-index: 2; }
.brett-nutzer .pfeil { color: var(--b-pfeil-nutzer); opacity: .9; animation: brett-ein var(--b-d-xs) var(--b-sanft) both; }
.brett-nutzer .marke { fill: var(--b-marke-nutzer); animation: brett-ein var(--b-d-xs) var(--b-sanft) both; }
.brett-nutzer .vorschau { opacity: .55; animation: none; }

/* ---------- W0+a: Striche (Mattnetz) und Koenigsfall ---------- */
/* im Brett ueber den Figuren, in einer Effekt-Ebene ueber deren ganzer Flaeche (gleiche Lage wie die Felder) */
.brett-striche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
  overflow: visible;
}
.brett-striche .strich { animation: strich-ein .16s ease-out var(--v, 0ms) both; }
.brett-striche .strich-zug { transform-box: fill-box; transform-origin: 0% 50%; animation: strich-zug .22s ease-out var(--v, 0ms) both; }
.brett-striche .strich-marke { transform-box: fill-box; transform-origin: 50% 50%; animation: strich-marke .2s ease-out var(--v, 0ms) both; }
.brett-striche.still .strich, .brett-striche.still .strich-zug, .brett-striche.still .strich-marke { animation: none; }
@keyframes strich-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes strich-zug { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes strich-marke { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.brett > .figur.kippt {
  transform: rotate(var(--kipp-winkel, -78deg));
  transform-origin: 50% 88%;
  transition: transform .45s cubic-bezier(.5, 0, .75, .4);
}
.brett > .figur.kippt.langsam { transition-duration: 1.4s; }

/* ---------- Abzeichen (Zug-Klassen-Symbol): federt ein, bleibt in der Brett-Box ---------- */
.brett > .abzeichen-ort {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  min-width: 20px;
  min-height: 20px;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(var(--schatten-abzeichen, 0 2px 3px rgba(0, 0, 0, .3)));
}
.brett > .abzeichen-ort > svg { display: block; width: 100%; height: 100%; }
.brett > .abzeichen-ort.plopp { animation: brett-plopp var(--b-d-l) var(--b-hupf) both; }
/* Zug bestaetigen: die Vorschau verlaesst oder schlaegt das Feld des Abzeichens (visibility, die Animation setzt opacity) */
.brett > .abzeichen-ort.verdeckt { visibility: hidden; }
/* Unscharf, Daneben, Verschenkt, Weit daneben: ruhig einblenden, kein Wackeln (A: Patzer ruhig) */
.brett > .abzeichen-ort.plopp.k-ungenau, .brett > .abzeichen-ort.plopp.k-fehler,
.brett > .abzeichen-ort.plopp.k-verpasst, .brett > .abzeichen-ort.plopp.k-patzer { animation: brett-ruhig var(--b-d-m) var(--b-sanft) both; }

/* ---------- Nummern (Vorzug-Kette): kleine Zahl oben links am Feld, ueber den Figuren, ohne Leuchten ---------- */
.brett-nummern { position: absolute; inset: 0; z-index: 5; pointer-events: none; container-type: inline-size; }
.brett-nummern .nummer { position: absolute; width: 12.5%; height: 12.5%; }
.brett-nummern .nummer > span {
  position: absolute; top: 5%; left: 5%;
  min-width: 34%; height: 34%; padding: 0 6%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--akzent, #CC4820); color: var(--auf-akzent, #FFFFFF);
  font: 700 max(10px, 1.9cqw)/1 var(--schrift, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
}

/* ---------- Umwandlung ---------- */
.brett-umwandlung {
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: var(--brett-radius);
  background: var(--schleier, rgba(28, 24, 18, .44));
}
.brett-umwandlung[hidden] { display: none; }
.umwandlung-wahl {
  position: absolute;
  width: 12.5%;
  height: 50%;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-s, 10px);
  overflow: hidden;
  background: var(--flaeche, #FFFFFF);
  box-shadow: var(--s3, 0 10px 30px rgba(0, 0, 0, .35)), 0 0 0 1px var(--linie-2, rgba(28, 25, 20, .14));
  animation: brett-ein var(--b-d-xs) var(--b-sanft);
}
.umwandlung-figur {
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  background: var(--flaeche, #FFFFFF);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: none;
}
.umwandlung-figur + .umwandlung-figur { border-top: 1px solid var(--linie, rgba(28, 25, 20, .08)); }
.umwandlung-figur:active { background: var(--flaeche-3, #F1EEE8); }
.umwandlung-figur:focus-visible { outline: var(--fokus, 2.5px solid #CC4820); outline-offset: -3px; }
.umwandlung-figur img { width: 92%; height: 92%; pointer-events: none; }

/* ---------- Animationen (nur transform und opacity) ---------- */
@keyframes brett-ein { from { opacity: 0; } }
@keyframes brett-puls { 50% { opacity: .35; } }
@keyframes brett-punkt { from { transform: scale(0); opacity: 0; } }
@keyframes brett-plopp { from { transform: scale(0) rotate(-35deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes brett-ruhig { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .brett-striche .strich, .brett-striche .strich-zug, .brett-striche .strich-marke { animation: none; }
  /* !important gegen die 0,01 ms aus html[data-bewegung="aus"] (bewegung.js setzt das bei Systemwunsch ebenfalls) */
  .brett > .figur.kippt { transition: none; transition-duration: 0s !important; }
  .brett > .figur { transition: none; }
  .brett > .abzeichen-ort.plopp, .brett .lage.ziel::after, .brett .lage.zuletzt, .brett .lage.schach, .brett-nutzer .pfeil, .brett-nutzer .marke { animation-duration: 1ms; animation-delay: 0s; }
  .brett .lage.mark-bewertung { animation: none; }
}