/* =============================================================================
   Schach — Seitenlayout
   -----------------------------------------------------------------------------
   Setzt Design/tokens.css und Design/components.css voraus (Schallkiste-
   Styleguide). Hier steht nur, was die Bausteine nicht abdecken: Kopfzeile,
   Anmeldung, Brett, Partie, Übersicht, Konten, Meldung. Nur var(--token);
   die Brettfarben sind aus Gold und Blau gemischt, keine eigenen Farben.
   ============================================================================= */

html { color-scheme: dark; }

:root {
  /* Brett: helle und dunkle Felder aus Marken-Gold, Figuren in Logo-Blau und Weiß. */
  --feld-hell:   color-mix(in oklab, var(--akzent) 55%, var(--text-titel));
  --feld-dunkel: color-mix(in oklab, var(--akzent) 72%, var(--grund));
  --figur-hell:  var(--text-stark);
  --figur-dunkel: var(--tinte);
  --markiert:    color-mix(in oklab, var(--akzent-warm) 32%, transparent);
  --ziel:        color-mix(in oklab, var(--tinte) 38%, transparent);
}

.boot { padding: var(--raum-7) 0; text-align: center; color: var(--text-leise); }

/* ---- Logo: Springer in Marken-Gold --------------------------------------- */
.logo { display: inline-flex; color: var(--akzent); flex: none; }
.logo svg { display: block; width: 40px; height: 40px; fill: currentColor; }

/* ---- Anmeldung ------------------------------------------------------------ */
.anmeldung { padding-top: var(--raum-7); }
.anmelde-kopf { display: grid; justify-items: center; gap: var(--raum-3); margin-bottom: var(--raum-6); text-align: center; }
.anmelde-kopf .logo svg { width: 72px; height: 72px; }
.anmelde-karte { max-width: 400px; margin: 0 auto; }
.anmelde-karte .hinweis { margin-bottom: var(--raum-2); }
@media (max-width: 560px) {
  .anmeldung { padding-top: var(--raum-5); }
  .anmelde-kopf .logo svg { width: 56px; height: 56px; }
  .anmelde-karte { padding: var(--raum-5); }
}

/* ---- Formulare in Karten: volle Kartenbreite ------------------------------ */
.karte .feld { max-width: none; }
.feld-fehler:empty { display: none; }
.schalter.breit { width: 100%; }
.schalter.gefahr { color: var(--schlecht-text); }
.schalter.gefahr:hover { color: var(--text-stark); border-color: var(--schlecht); }
.haken { display: flex; gap: var(--raum-2); align-items: center; min-height: var(--treffer-min); cursor: pointer; }
.haken input { accent-color: var(--akzent); width: 18px; height: 18px; }
.felder-2 { display: grid; gap: var(--raum-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
.karte-zahl { margin-left: auto; color: var(--text-leise); letter-spacing: 0.05em; }

/* ---- Kopfzeile ------------------------------------------------------------ */
.kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-4) var(--raum-6); }
.marke { display: flex; align-items: center; gap: var(--raum-3); color: inherit; }
.marke:hover, .marke:focus-visible { text-decoration: none; }
.marke-name {
  display: block;
  font-family: var(--schrift-display); font-weight: var(--gewicht-display);
  font-size: var(--text-titel-s); letter-spacing: 0.14em; line-height: var(--zeile-titel); color: var(--text-titel);
}
/* Navigation als Icons; der Name steht im Tooltip und für Screenreader. */
.navi { display: flex; align-items: center; gap: var(--raum-1); margin-left: auto; }
.navi a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--treffer-min); min-height: var(--treffer-min); padding: 0 var(--raum-2);
  color: var(--text-leise); border-bottom: 1px solid transparent;
  transition: color var(--uebergang);
}
.navi svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.navi a:hover { color: var(--text-stark); text-decoration: none; }
.navi a[aria-current='page'] { color: var(--akzent); border-bottom-color: var(--akzent); }
@media (max-width: 560px) {
  .marke .logo svg { width: 34px; height: 34px; }
  main .karte { padding: var(--raum-5) var(--raum-4); }
}

/* ---- Figuren ---------------------------------------------------------------
   Weiß: helle Füllung mit dunklem Rand; Schwarz: dunkle Füllung mit hellem Rand.
   paint-order legt den Rand unter die Füllung, damit die Form nicht dünner wirkt. */
.figur { display: block; overflow: visible; stroke-linejoin: round; paint-order: stroke; }
.figur-w { fill: var(--figur-hell); stroke: var(--figur-dunkel); stroke-width: 1.4px; }
.figur-b { fill: var(--figur-dunkel); stroke: var(--figur-hell); stroke-width: 0.9px; }

/* ---- Brett ----------------------------------------------------------------- */
.brett {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  width: 100%; aspect-ratio: 1;
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.brettfeld {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--feld-hell); color: var(--figur-dunkel); font: inherit; cursor: default;
}
.brettfeld.dunkel { background: var(--feld-dunkel); }
.brettfeld:focus-visible { outline-offset: -3px; z-index: 1; }
.brettfeld > .figur { position: relative; z-index: 1; width: 86%; height: 86%; pointer-events: none; }
.brettfeld.ziehbar { cursor: grab; touch-action: none; }
.brettfeld.ziel { cursor: pointer; }
.brettfeld.angehoben > .figur { opacity: 0.35; }

/* Markierungen als Schicht über dem Feld: letzter Zug, gewählte Figur, Schach. */
.brettfeld::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.brettfeld.zuletzt::before { background: var(--markiert); }
.brettfeld.gewaehlt::before { background: color-mix(in oklab, var(--akzent-warm) 55%, transparent); }
.brettfeld.drueber::before { box-shadow: inset 0 0 0 3px var(--akzent-warm); }
.brettfeld.im-schach::before { background: radial-gradient(circle, var(--akzent-warm) 0%, color-mix(in oklab, var(--akzent-warm) 50%, transparent) 45%, transparent 72%); }
/* Erlaubte Ziele: Punkt auf leeren Feldern, Ring um schlagbare Figuren. */
.brettfeld.ziel::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  width: 30%; height: 30%; border-radius: 50%; background: var(--ziel);
}
.brettfeld.ziel.schlag::after { width: 92%; height: 92%; background: none; box-shadow: inset 0 0 0 0.35rem var(--ziel); }

/* Koordinaten in den Ecken der Randfelder, in der Farbe des jeweils anderen Feldtons. */
.koord { position: absolute; z-index: 1; font-size: clamp(0.5rem, 1.6vw, 0.75rem); line-height: 1; pointer-events: none; font-weight: var(--gewicht-fett); }
.reihe-nr { top: 0.2em; left: 0.25em; }
.linie-nr { right: 0.25em; bottom: 0.15em; }
.brettfeld.hell .koord { color: var(--feld-dunkel); }
.brettfeld.dunkel .koord { color: var(--feld-hell); }

/* Beim Ziehen hängt die Figur am Zeiger. */
.geist { position: fixed; z-index: 80; pointer-events: none; }
.geist .figur { width: 100%; height: 100%; transform: scale(1.12); filter: drop-shadow(0 4px 6px color-mix(in oklab, var(--tinte) 60%, transparent)); }

/* Gegner hat gezogen: das Brett leuchtet kurz auf. */
@keyframes brett-neu { from { box-shadow: 0 0 0 3px var(--akzent); } to { box-shadow: 0 0 0 3px transparent; } }
.brett.neu { animation: brett-neu 1.2s ease-out; }

/* Umwandlung */
.umwandlung { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--raum-2); }
.umwandlung .schalter { display: grid; justify-items: center; gap: var(--raum-1); padding: var(--raum-2); background: var(--feld-hell); color: var(--tinte); }
.umwandlung .schalter:hover { border-color: var(--akzent-warm); color: var(--tinte); }
.umwandlung .figur { width: 100%; max-width: 64px; aspect-ratio: 1; height: auto; }

/* ---- Partie ------------------------------------------------------------------ */
.partie { display: grid; gap: var(--raum-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) {
  .partie { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
}
.partie-brett { display: grid; gap: var(--raum-2); width: 100%; max-width: min(640px, calc(100vh - 300px)); min-width: min(100%, 280px); margin: 0 auto; }
.spieler-leiste { display: flex; align-items: center; gap: var(--raum-2); min-height: 32px; flex-wrap: wrap; }
.spieler-leiste b { color: var(--text-stark); }
.farbpunkt { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid var(--akzent); }
.farbpunkt.w { background: var(--figur-hell); }
.farbpunkt.b { background: var(--figur-dunkel); }
.geschlagen { display: inline-flex; align-items: center; margin-left: auto; }
.geschlagen .figur { width: 20px; height: 20px; margin-left: -5px; stroke: none; }
/* Auf dunklem Grund: geschlagene schwarze Figuren grau statt fast unsichtbar. */
.geschlagen .figur-w { fill: var(--text-titel); }
.geschlagen .figur-b { fill: var(--text-leise); }
.geschlagen .figur:first-child { margin-left: 0; }
.vorsprung { margin-left: var(--raum-2); font-size: var(--text-klein); color: var(--text-leise); }
.blaettern { display: flex; align-items: center; gap: var(--raum-1); }
.blaettern .schalter { display: inline-flex; align-items: center; justify-content: center; min-width: var(--treffer-min); padding: 0; }
.blaettern .schalter svg { width: 22px; height: 22px; fill: currentColor; }
.blaettern .schalter:last-child { margin-left: auto; }
.blaettern-stand { flex: 1; min-width: 0; text-align: center; font-size: var(--text-klein); color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.partie-seite { gap: var(--raum-4); }
.partie-titel { font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-size: var(--text-titel-s); line-height: var(--zeile-titel); color: var(--text-titel); }
.partie-titel.dran { color: var(--akzent); }
.partie-status { display: grid; gap: var(--raum-2); }
.angebot { padding: var(--raum-3) var(--raum-4); border: 1px solid var(--akzent-warm); border-radius: var(--radius); background: var(--schlecht-tint); }
.angebot b { color: var(--text-stark); }

.zugliste {
  list-style: none; max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--linie-fein); border-bottom: 1px solid var(--linie-fein);
  font-variant-numeric: tabular-nums;
}
.zugliste li { display: grid; grid-template-columns: 3em 1fr 1fr; align-items: center; }
.zugliste li:nth-child(even) { background: var(--linie-hauch); }
.zug-nr { color: var(--text-leise); font-size: var(--text-klein); padding-left: var(--raum-1); }
.zug {
  font: inherit; text-align: left; color: var(--text); background: none; border: 0; border-radius: var(--radius);
  padding: var(--raum-1) var(--raum-2); cursor: pointer;
}
.zug:hover { color: var(--text-stark); }
.zug.aktuell { background: var(--akzent); color: var(--tinte); font-weight: var(--gewicht-fett); }
.zug-leer { display: block !important; padding: var(--raum-2); color: var(--text-leise); font-size: var(--text-klein); }
textarea.pgn { min-height: 12rem; font-size: var(--text-klein); }

/* ---- Übersicht -------------------------------------------------------------- */
.partie-liste { list-style: none; }
.partie-eintrag {
  display: flex; align-items: center; gap: var(--raum-4);
  padding: var(--raum-3) 0; border-bottom: 1px solid var(--linie-fein); color: inherit;
}
.partie-liste li:first-child .partie-eintrag { border-top: 1px solid var(--linie-fein); }
.partie-eintrag:hover, .partie-eintrag:focus-visible { text-decoration: none; }
.partie-eintrag:hover b { color: var(--akzent); }
.partie-eintrag-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.partie-eintrag b { color: var(--text-stark); overflow-wrap: anywhere; }
.partie-eintrag .konto-meta { margin-top: 0; }
.mini-brett { width: 72px; height: 72px; flex: none; border: 1px solid var(--linie); border-radius: var(--radius); }
.mini-brett .mini-hell { fill: var(--feld-hell); }
.mini-brett .mini-dunkel { fill: var(--feld-dunkel); }
.mini-brett .mini-zuletzt { fill: color-mix(in oklab, var(--akzent-warm) 45%, var(--feld-hell)); }
.mini-brett .figur-w { stroke-width: 2px; }
.mini-brett .figur-b { stroke-width: 1.4px; }
@media (max-width: 560px) {
  .mini-brett { width: 60px; height: 60px; }
  .partie-eintrag { gap: var(--raum-3); }
}

/* ---- Konto -------------------------------------------------------------------- */
.angemeldet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-4); justify-content: space-between; }
.angemeldet b { color: var(--text-stark); }
.konten { list-style: none; }
.konto {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--raum-3) var(--raum-4);
  padding: var(--raum-3) 0; border-bottom: 1px solid var(--linie-fein);
}
.konto:first-child { border-top: 1px solid var(--linie-fein); }
.konto b { color: var(--text-stark); }
.konto-meta { font-size: var(--text-mikro); color: var(--text-leise); margin-top: var(--raum-1); }

/* ---- Pop-up (Release Notes, Umwandlung, PGN) --------------------------------- */
.dialog {
  width: min(560px, calc(100% - 2 * var(--raum-4))); max-height: 85vh; margin: auto; padding: 0;
  border: 1px solid var(--linie); border-radius: var(--radius-gross);
  background: var(--flaeche); color: var(--text);
}
.dialog[open] { display: flex; flex-direction: column; }
.dialog::backdrop { background: color-mix(in oklab, var(--grund) 80%, transparent); }
.dialog-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-5); border-bottom: 1px solid var(--linie-fein);
}
.dialog-kopf h2 { margin: 0; font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-size: var(--text-titel-s); color: var(--text-titel); }
.dialog-inhalt { overflow-y: auto; overscroll-behavior: contain; padding: var(--raum-4) var(--raum-5) var(--raum-6); }
.release + .release { margin-top: var(--raum-5); padding-top: var(--raum-5); border-top: 1px solid var(--linie-fein); }
.release-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--raum-2) var(--raum-3); margin-bottom: var(--raum-2); }
.release-version { font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-size: var(--text-titel-s); color: var(--akzent); font-variant-numeric: tabular-nums; }
.release-datum { font-size: var(--text-mikro); letter-spacing: var(--sperr-label); text-transform: uppercase; color: var(--text-leise); }
.release ul { padding-left: var(--raum-5); display: grid; gap: var(--raum-2); }
.release li::marker { color: var(--akzent); }

/* ---- Meldung (kurze Rückmeldung unten) ---------------------------------------- */
.meldung {
  position: fixed; left: 50%; bottom: var(--raum-5); transform: translateX(-50%); z-index: 70;
  max-width: calc(100% - 2 * var(--raum-4));
  background: var(--flaeche-hoch); color: var(--text-stark);
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--raum-3) var(--raum-4); font-size: var(--text-klein);
}