/* Zuschauer-Ansicht — Farben als Variablen, helles und dunkles Schema, nur System-Schriften. */

:root {
  --grund: #eceef0;
  --grund-2: #e3e6e9;
  --flaeche: #fbfbfc;
  --flaeche-2: #f2f4f5;
  --linie: #d6dbdf;
  --tinte: #14191e;
  --tinte-2: #46505a;
  --tinte-3: #737d87;
  --akzent: #0b6e6a;
  --akzent-weich: rgb(11 110 106 / 0.11);
  --akzent-tinte: #ffffff;
  --gold: #b7791f;
  --schach: #c53b33;
  --feld-hell: #e7eaed;
  --feld-dunkel: #8496a7;
  --feld-zahl-hell: #6e8193;
  --feld-zahl-dunkel: #edf0f2;
  --zug-markierung: rgb(234 179 58 / 0.48);
  --fig-w: #fdfdfb;
  --fig-w-linie: #1a1e22;
  --fig-w-detail: #1a1e22;
  --fig-s: #252b31;
  --fig-s-linie: #0c0e10;
  --fig-s-detail: #dfe4e8;
  --fig-s-klein: #0c0e10;
  --schatten: 0 1px 2px rgb(20 25 30 / 0.06), 0 8px 24px -12px rgb(20 25 30 / 0.18);
  --brett-schatten: 0 2px 4px rgb(20 25 30 / 0.08), 0 24px 48px -24px rgb(20 25 30 / 0.35);
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052, "Book Antiqua", Georgia, serif;
  --schrift-zahl: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --rund: 14px;
  --rund-klein: 8px;
  --zug-dauer: 260ms;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #0e1114;
    --grund-2: #13171b;
    --flaeche: #171b20;
    --flaeche-2: #1d2228;
    --linie: #2a3138;
    --tinte: #e8ebee;
    --tinte-2: #aeb7bf;
    --tinte-3: #7f8a94;
    --akzent: #55b8ad;
    --akzent-weich: rgb(85 184 173 / 0.14);
    --akzent-tinte: #0b1413;
    --gold: #e0a94a;
    --schach: #ef6b61;
    --feld-hell: #b4bfc9;
    --feld-dunkel: #5b6e81;
    --feld-zahl-hell: #4f6274;
    --feld-zahl-dunkel: #d4dbe1;
    --zug-markierung: rgb(240 190 70 / 0.5);
    --fig-s-klein: #9aa4ad;
    --schatten: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px -14px rgb(0 0 0 / 0.6);
    --brett-schatten: 0 2px 6px rgb(0 0 0 / 0.35), 0 30px 60px -28px rgb(0 0 0 / 0.8);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --grund: #0e1114;
  --grund-2: #13171b;
  --flaeche: #171b20;
  --flaeche-2: #1d2228;
  --linie: #2a3138;
  --tinte: #e8ebee;
  --tinte-2: #aeb7bf;
  --tinte-3: #7f8a94;
  --akzent: #55b8ad;
  --akzent-weich: rgb(85 184 173 / 0.14);
  --akzent-tinte: #0b1413;
  --gold: #e0a94a;
  --schach: #ef6b61;
  --feld-hell: #b4bfc9;
  --feld-dunkel: #5b6e81;
  --feld-zahl-hell: #4f6274;
  --feld-zahl-dunkel: #d4dbe1;
  --zug-markierung: rgb(240 190 70 / 0.5);
  --schatten: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px -14px rgb(0 0 0 / 0.6);
  --brett-schatten: 0 2px 6px rgb(0 0 0 / 0.35), 0 30px 60px -28px rgb(0 0 0 / 0.8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--grund);
  color: var(--tinte);
  font: 400 15px/1.45 var(--schrift);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

h1, h2 { margin: 0; font-weight: 600; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------------ Gerüst */
.seite {
  max-width: 1720px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  gap: 14px;
}

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 4px;
}

.marke { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marke-zeichen { width: 34px; height: 34px; flex: none; }
.mz-grund { fill: var(--tinte); }
.mz-tau { fill: none; stroke: var(--grund); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.marke-text { display: flex; flex-direction: column; min-width: 0; }
.marke-name { font: 600 19px/1.1 var(--schrift-titel); letter-spacing: 0.01em; }
.marke-unter { font-size: 13px; color: var(--tinte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kopf-rechts { display: flex; align-items: center; gap: 10px; }

.live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinte-2);
}
.live-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--tinte-3); }
.live[data-art="laeuft"] .live-punkt { background: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.live[data-art="alt"] .live-punkt { background: var(--gold); }

.umschalter {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 999px;
}
.umschalter button {
  border: 0; background: transparent; cursor: pointer;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--tinte-3);
}
.umschalter button[aria-pressed="true"] { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }

.thema-knopf {
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--linie); background: var(--flaeche-2); border-radius: 50%;
}
.thema-knopf svg { width: 18px; height: 18px; }
.thema-knopf circle { fill: none; stroke: var(--tinte-2); stroke-width: 1.8; }
.thema-knopf path { fill: var(--tinte-2); }

button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Telefon: alles untereinander */
.buehne {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "oben" "brett" "unten" "zuege" "bilanz";
  align-content: start;
}
.brett-bereich { grid-area: brett; }
#karte-b { grid-area: oben; }
#karte-w { grid-area: unten; }
.zuege { grid-area: zuege; }
.bilanz { grid-area: bilanz; }

/* Mittlere Breite: Brett oben, Karten nebeneinander */
@media (min-width: 640px) and (max-width: 1023px) {
  .buehne {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "brett brett" "oben unten" "zuege bilanz";
    align-items: start;
  }
}

/* Großer Bildschirm: Brett groß links, rechts Karten, Züge, Bilanz */
@media (min-width: 1024px) {
  .buehne {
    --brett-groesse: min(calc(100dvh - 160px), calc(100vw - 32px - 380px - 28px), 1040px);
    grid-template-columns: var(--brett-groesse) minmax(320px, 440px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "brett oben"
      "brett unten"
      "brett zuege"
      "brett bilanz";
    justify-content: center;
    column-gap: 28px;
    align-items: start;
    height: calc(var(--brett-groesse) + 34px);
    flex: none;
  }
  .brett-bereich { align-self: start; }
  .zuege { align-self: stretch; min-height: 0; overflow: hidden; }
  .zuege .zugliste { max-height: none; flex: 1; min-height: 0; }
}

/* ------------------------------------------------------------------ Brett */
.partie-titel {
  font: 500 13px/1.2 var(--schrift);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin: 0 0 10px 2px;
}

.brett-rahmen {
  padding: clamp(6px, 1.1vmin, 12px);
  background: var(--flaeche);
  border-radius: var(--rund);
  box-shadow: var(--brett-schatten);
  border: 1px solid var(--linie);
}

.brett {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  container-type: inline-size;
}

.felder { position: absolute; inset: 0; display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr); }
.feld { position: relative; background: var(--feld-hell); }
.feld.dunkel { background: var(--feld-dunkel); }
.feld.markiert::after { content: ""; position: absolute; inset: 0; background: var(--zug-markierung); }
.feld.schach::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--schach) 70%, transparent) 0 32%, transparent 72%);
}
.feld .koord {
  position: absolute; font: 600 clamp(8px, 2.1cqi, 15px)/1 var(--schrift); z-index: 1;
  color: var(--feld-zahl-hell); user-select: none; pointer-events: none;
}
.feld.dunkel .koord { color: var(--feld-zahl-dunkel); }
.feld.hell .koord { color: var(--feld-zahl-hell); }
.koord.reihe { top: 5%; left: 6%; }
.koord.linie { bottom: 5%; right: 7%; }

.figuren { position: absolute; inset: 0; pointer-events: none; }
.figur {
  position: absolute;
  width: 12.5%; height: 12.5%;
  left: calc(var(--x) * 12.5%);
  top: calc(var(--y) * 12.5%);
  display: grid; place-items: center;
  will-change: transform;
}
.figur.zieht { transition: transform var(--zug-dauer) cubic-bezier(0.2, 0.7, 0.2, 1); }
.figur .fig { width: 88%; height: 88%; }

.fig g { stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.fig.fw g { fill: var(--fig-w); stroke: var(--fig-w-linie); }
.fig.fs g { fill: var(--fig-s); stroke: var(--fig-s-linie); }
.fig .d { fill: none; stroke-width: 3; }
.fig.fw .d { stroke: var(--fig-w-detail); }
.fig.fs .d { stroke: var(--fig-s-detail); }
.fig.fw .f { fill: var(--fig-w-detail); stroke: none; }
.fig.fs .f { fill: var(--fig-s-detail); stroke: none; }
.spieler-bild .fig.fs g, .beute .fig.fs g { stroke: var(--fig-s-klein); }
.figuren .fig { filter: drop-shadow(0 1.5px 1px rgb(0 0 0 / 0.22)); }

/* Ergebnis über dem Brett */
.ergebnis {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--grund) 42%, transparent);
  backdrop-filter: blur(2px) saturate(0.85);
}
.ergebnis[hidden] { display: none; }
.ergebnis-karte {
  min-width: min(78%, 420px);
  padding: clamp(16px, 4cqi, 34px) clamp(20px, 5cqi, 44px);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  text-align: center;
}
.ergebnis-zahl { font: 600 clamp(34px, 9cqi, 76px)/1 var(--schrift-titel); letter-spacing: 0.02em; }
.ergebnis-text { margin-top: 10px; font-size: clamp(16px, 2.8cqi, 22px); font-weight: 600; }
.ergebnis-grund { margin-top: 4px; color: var(--tinte-2); }
.ergebnis-weiter { margin-top: 14px; font-size: 13px; color: var(--tinte-3); font-variant-numeric: tabular-nums; }

.hinweis { margin: 10px 2px 0; color: var(--tinte-3); font-size: 13px; }

/* ------------------------------------------------------------------ Karten */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: 14px 16px;
  min-width: 0;
}
.karte h2 {
  font: 600 12px/1.2 var(--schrift);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-3);
}

.spieler {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: "bild name uhr" "bild info info" "beute beute beute";
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  position: relative;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.spieler[data-aktiv="ja"] { border-color: color-mix(in srgb, var(--akzent) 55%, var(--linie)); box-shadow: var(--schatten), 0 0 0 3px var(--akzent-weich); }
.spieler-bild {
  grid-area: bild; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--flaeche-2); border: 1px solid var(--linie);
}
.spieler-bild .fig { width: 34px; height: 34px; }
.spieler-name { grid-area: name; font: 600 17px/1.2 var(--schrift-titel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spieler-info { grid-area: info; font-size: 13px; color: var(--tinte-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 20px; }
.spieler-uhr { grid-area: uhr; font: 500 15px/1 var(--schrift-zahl); color: var(--tinte-3); }
.spieler[data-aktiv="ja"] .spieler-uhr { color: var(--tinte); }
.zustand { display: inline-flex; align-items: center; gap: 6px; color: var(--akzent); font-weight: 600; }
.zustand .punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: atmen 1.6s ease-in-out infinite; }
@keyframes atmen { 50% { opacity: 0.25; transform: scale(0.7); } }
.abzeichen {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--tinte-2); background: var(--flaeche-2); border: 1px solid var(--linie);
}
.fortschritt { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--flaeche-2); overflow: hidden; margin-top: 8px; }
.fortschritt i { display: block; height: 100%; width: 0; background: var(--akzent); border-radius: 3px; transition: width 400ms ease; }
.beute { grid-area: beute; display: flex; align-items: center; gap: 0; min-height: 22px; margin-top: 6px; }
.beute .fig { width: 22px; height: 22px; margin-right: -5px; }
.beute .plus { margin-left: 10px; font: 600 13px/1 var(--schrift-zahl); color: var(--tinte-2); }

/* Zugliste */
.zuege { display: flex; flex-direction: column; gap: 8px; }
.zugliste {
  list-style: none; margin: 0; padding: 0;
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  font: 400 14px/1.2 var(--schrift-zahl);
  scrollbar-width: thin;
}
.zugliste li {
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline; padding: 5px 4px; border-radius: 6px;
}
.zugliste li:nth-child(odd) { background: var(--flaeche-2); }
.zugliste .nr { color: var(--tinte-3); }
.zugliste .zug { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.zugliste .san { font-weight: 600; color: var(--tinte); }
.zugliste .zeit { font-size: 11.5px; color: var(--tinte-3); }
.zugliste .neu .san { color: var(--akzent); }
.zugliste .ab { font-size: 11px; color: var(--gold); font-weight: 600; }
.zugliste .leer { display: block; font-family: var(--schrift); color: var(--tinte-3); background: none; }

/* Bilanz */
.bilanz { display: flex; flex-direction: column; gap: 10px; }
.bilanz-kopf { display: flex; justify-content: space-between; align-items: baseline; }
.bilanz-zahl { font-size: 12px; color: var(--tinte-3); }
.bilanz-werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wert { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wert b { font: 600 28px/1 var(--schrift-titel); }
.wert span { font-size: 12px; color: var(--tinte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wert.mitte { text-align: center; }
.wert.rechts { text-align: right; }
.bilanz-balken { display: flex; height: 6px; border-radius: 6px; overflow: hidden; background: var(--flaeche-2); gap: 2px; }
.bilanz-balken i { display: block; height: 100%; }
.bilanz-balken .e { background: var(--akzent); }
.bilanz-balken .r { background: var(--tinte-3); opacity: 0.45; }
.bilanz-balken .m { background: var(--gold); }
.bilanz-letzte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.bilanz-letzte li {
  font: 600 11px/1 var(--schrift-zahl); padding: 5px 7px; border-radius: 6px;
  background: var(--flaeche-2); color: var(--tinte-2); border: 1px solid var(--linie);
}
.bilanz-letzte li.e { border-color: color-mix(in srgb, var(--akzent) 50%, var(--linie)); color: var(--akzent); }
.bilanz-letzte li.m { border-color: color-mix(in srgb, var(--gold) 50%, var(--linie)); color: var(--gold); }

/* Über Tau Chess — ruhige Einleitung unter der Bühne */
.ueber { margin: 28px 0 8px; padding: clamp(20px, 3vw, 36px); background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); box-shadow: var(--schatten); display: grid; gap: 14px; }
.ueber-kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.ueber-titel { font-family: var(--schrift-titel); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12;
  letter-spacing: -.01em; color: var(--tinte); text-wrap: balance; }
.ueber-lead { margin: 0; max-width: 68ch; font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.6; color: var(--tinte-2); }
.ueber-punkte { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 6px; }
.ueber-punkt { padding: 16px 18px; background: var(--flaeche-2); border-radius: var(--rund-klein); border-top: 3px solid var(--akzent); }
.ueber-punkt h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 650; color: var(--tinte); text-wrap: balance; }
.ueber-punkt p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tinte-2); }
.ueber-schluss { margin: 4px 0 0; font-family: var(--schrift-titel); font-style: italic; font-size: clamp(16px, 1.4vw, 19px); color: var(--tinte); }

.fuss { color: var(--tinte-3); font-size: 12.5px; padding: 4px 2px 0; }
.fuss p { margin: 0; max-width: 120ch; }
.fuss .recht { margin-top: 4px; }

/* Leinwand 16:9 und groß: etwas mehr Luft und größere Schrift */
@media (min-width: 1600px) and (min-height: 860px) {
  body { font-size: 16px; }
  .spieler-name { font-size: 20px; }
  .zugliste { font-size: 15.5px; }
  .wert b { font-size: 34px; }
}

/* Kleine Telefone */
@media (max-width: 420px) {
  .marke-unter { display: none; }
  .live #live-text { display: none; }
  .karte { padding: 12px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .figur.zieht { transition: none; }
  .zustand .punkt { animation: none; }
  .fortschritt i, .spieler { transition: none; }
}

/* Premiere: Countdown auf dem Brett */
.premiere-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.premiere-in { font-size: 14px; margin-top: 6px; opacity: .85; }
.premiere-zahl { font-variant-numeric: tabular-nums; }