/* ── Schach — Marmor und Obsidian im Spielsaal ──────────────────────────────────────────────────────────────────────
   Eigene Optik (Memo „Spiele-Optik mit Wow“): dunkler Saal mit warmem Lichtkegel, Brett aus hellem Marmor und Obsidian in einem
   Nussbaumrahmen mit Messingkante, leicht nach hinten geneigt (CSS-3D) — die Figuren (WebP, aus 3D-Modellen gerendert, img/figuren;
   Herkunft ~/neo/entwurf/gamezone-fix/modelle/schach/)
   stehen darauf aufrecht und werfen Schatten. Markierungen: gewählte Figur, mögliche Züge (Punkt/Ring), letzter Zug, Schach.
   ÄNDERN: Neigung --neigung (Desktop/Handy unten), Feldgröße --f. Figurenhöhe je Art: .fig[data-t] unten. Farben in :root.
   Online-Bausteine (Freundesliste, Chat) erben die Farben über --on-* (_spiel/online.css).
   Schriften aus fonts.hirsing.eu: Playfair Display (Titel), Lato (Bedienung). */
@font-face { font-family: 'Playfair Display'; font-weight: 700; font-style: italic; font-display: swap; src: url('https://fonts.hirsing.eu/playfair-dispplay-v40-latin/playfair-display-v40-latin-700italic.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 400; font-display: swap; src: url('https://fonts.hirsing.eu/lato-v25-latin/lato-v25-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 700; font-display: swap; src: url('https://fonts.hirsing.eu/lato-v25-latin/lato-v25-latin-700.woff2') format('woff2'); }

:root {
  --saal: #14110e; --nuss: #4a2e1b; --nuss-hell: #6b4428; --messing: #c9a35a; --messing-hell: #f0d79a; --elfenbein: #f3ead8; --leise: #b9aa90;
  --marmor: #ece6da; --obsidian: #2b2730; --gruen: rgba(120, 220, 140, 0.9); --rot: #e2584b;
  --titel: 'Playfair Display', Georgia, serif; --sans: 'Lato', system-ui, sans-serif;
  --f: min(8.4vh, 6.6vw, 76px); --neigung: 26deg;
  --oben: max(12px, env(safe-area-inset-top)); --unten: max(12px, env(safe-area-inset-bottom)); --rand: max(14px, env(safe-area-inset-left));
  --on-grund: rgba(30, 22, 16, 0.97); --on-text: var(--elfenbein); --on-leise: var(--leise); --on-akzent: var(--messing-hell); --on-akzent-text: #2a1a08; --on-linie: rgba(201, 163, 90, 0.35);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--sans); color: var(--elfenbein); user-select: none; -webkit-user-select: none;
  background: radial-gradient(ellipse 60% 70% at 50% 40%, #3a2a1c 0%, #1d1611 55%, #0b0907 100%); }
button { font: inherit; color: inherit; cursor: pointer; }
.versteckt { display: none !important; }

/* ── Saal: Kopf, Brett mit Namen, Zugleiste ─────────────────────────────── */
.saal { position: fixed; inset: var(--oben) var(--rand) var(--unten); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
.kopf { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-left: 160px; }
.status { flex: 1; display: flex; align-items: center; gap: 10px; font-family: var(--titel); font-style: italic; font-size: clamp(18px, 2vw, 26px); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.farbpunkt { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--messing), 0 2px 6px rgba(0, 0, 0, 0.6); }
.farbpunkt.w { background: radial-gradient(circle at 35% 30%, #fff, #d9d1c2); } .farbpunkt.b { background: radial-gradient(circle at 35% 30%, #59525e, #151217); }
.status.denkt #status-text::after { content: ' …'; animation: denken 1.2s steps(3) infinite; }
@keyframes denken { 50% { opacity: 0.4; } }
.knoepfe { display: flex; gap: 8px; margin-left: auto; }
.rund { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(240, 215, 154, 0.4); background: rgba(30, 22, 16, 0.75); color: var(--messing-hell); }
.rund svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rund .strich-aus { display: none; } .rund.aus .strich-aus { display: inline; } .rund.aus .welle { display: none; }
body.im-menue .knoepfe, body.im-menue .leiste, body.im-menue .seite, body.im-menue .status { visibility: hidden; }
.tisch { transition: transform 0.5s ease; }
@media (min-width: 761px) and (min-aspect-ratio: 4/5) { body.im-menue .tisch { transform: translateX(min(18vw, 280px)); } }   /* Demo rechts neben der Startkarte */

.tisch { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.seite { width: calc(var(--f) * 8 + 40px); display: flex; align-items: center; gap: 10px; min-height: 28px; font-weight: 700; color: var(--leise); }
.seite .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.seite.dran .name { color: var(--messing-hell); }
.seite.dran .name::before { content: '● '; color: var(--messing); }
.geschlagen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0; min-height: 26px; }
.geschlagen img { height: 24px; width: auto; margin-right: -2px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.geschlagen b { margin-left: 10px; font-size: 13px; color: var(--messing-hell); }

/* ── Brett in 3D: Ebene geneigt, Figuren stehen aufrecht (Gegenneigung) ─── */
.brett-raum { perspective: 1400px; perspective-origin: 50% 20%; }
.brett-ebene { position: relative; width: calc(var(--f) * 8); height: calc(var(--f) * 8); transform-style: preserve-3d; transform: rotateX(var(--neigung)); margin: 14px 20px 24px; }
/* Rahmen: Nussbaum-Maserung (img/brett/nuss.webp, Krea) unter dem bisherigen Licht-Verlauf (jetzt halbdurchsichtig) */
.rahmen { position: absolute; inset: -20px; border-radius: 10px; transform: translateZ(-2px);
  background: linear-gradient(135deg, rgba(107, 68, 40, 0.35), rgba(74, 46, 27, 0.25) 40%, rgba(30, 18, 10, 0.6)), url('../img/brett/nuss.webp') center / 260px 260px, var(--nuss);
  box-shadow: inset 0 0 0 2px var(--messing), inset 0 0 0 4px #3a2414, 0 40px 60px rgba(0, 0, 0, 0.6), 0 12px 0 #24160c; }
.kanten { position: absolute; inset: 0; font-size: 11px; font-weight: 700; color: rgba(240, 215, 154, 0.75); }
.kanten span { position: absolute; width: var(--f); text-align: center; line-height: 20px; }
.kanten span.zahl { width: 20px; height: var(--f); line-height: var(--f); }
/* Goldader um das Spielfeld (31.10.): dunkle Fuge, feiner Messingstreif, dunkle Fuge — vorher nur box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5) */
.brett { position: absolute; inset: 0; display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px var(--messing), 0 0 0 4px rgba(40, 24, 10, 0.8); }
.feld { position: relative; }
/* vorher (bis 30.10.): flache Verläufe + gemeinsame SVG-Marmoradern
.feld.hell { background: radial-gradient(ellipse at 30% 20%, #fbf8f1, var(--marmor) 60%, #d8cfbf); }
.feld.dunkel { background: radial-gradient(ellipse at 30% 20%, #45404b, var(--obsidian) 60%, #1b181e); }
.brett::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.18; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.03' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.28 0 0 0 0 0.26 0 0 0 -1.6 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E") center / cover; }
*/
/* Steinfelder (31.10.2026): je Farbe eine Steintextur (Krea, img/brett/, 512 px) = Kachel aus 3 × 3 Feldern; jedes Feld zeigt per --tx/--ty
   einen anderen Ausschnitt (fest aus der Feldnummer: 3er- und 5er-Takt → keine sichtbare Wiederholung). Ausschnitt bleibt in der Kachel,
   darum muss die Textur nicht nahtlos sein. Obendrauf ein schwacher Lichtschimmer (oben-links), Grundfarbe als Rückfall. */
.feld { --tx: 0px; --ty: 0px; }
.feld:nth-child(3n+2) { --tx: calc(var(--f) * -1.05); } .feld:nth-child(3n) { --tx: calc(var(--f) * -2); }
.feld:nth-child(5n+2) { --ty: calc(var(--f) * -0.5); } .feld:nth-child(5n+3) { --ty: calc(var(--f) * -1.6); }
.feld:nth-child(5n+4) { --ty: calc(var(--f) * -1.1); } .feld:nth-child(5n) { --ty: calc(var(--f) * -2); }
.feld.hell { background: radial-gradient(ellipse at 30% 20%, rgba(255, 252, 244, 0.35), rgba(255, 252, 244, 0) 65%),
  url('../img/brett/marmor.webp') var(--tx) var(--ty) / calc(var(--f) * 3) calc(var(--f) * 3), var(--marmor); }
.feld.dunkel { background: radial-gradient(ellipse at 30% 20%, rgba(150, 130, 180, 0.16), rgba(150, 130, 180, 0) 65%),
  url('../img/brett/obsidian.webp') var(--tx) var(--ty) / calc(var(--f) * 3) calc(var(--f) * 3), var(--obsidian); }
.feld.letzt::before { content: ''; position: absolute; inset: 0; background: rgba(201, 163, 90, 0.38); }
.feld.gewaehlt::before { content: ''; position: absolute; inset: 0; background: rgba(240, 215, 154, 0.55); }
.feld.ziel::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(60, 150, 80, 0.55); }
.feld.ziel.schlag::after { width: 86%; height: 86%; background: none; border: 5px solid rgba(60, 150, 80, 0.6); }
.feld.ziel:hover::after { background: rgba(60, 170, 90, 0.8); }
.feld.schach { box-shadow: inset 0 0 calc(var(--f) * 0.35) var(--rot), inset 0 0 0 3px var(--rot); }
.brett.waehlbar .feld { cursor: pointer; }

/* Figuren: Lage in der Brettebene über --x/--y (0–7), aufrecht durch Gegenneigung um die Unterkante */
.figuren { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.fig { position: absolute; left: 0; top: 0; width: var(--f); height: var(--f); transform-style: preserve-3d;
  transform: translate(calc(var(--x) * var(--f)), calc(var(--y) * var(--f))); transition: transform 0.26s cubic-bezier(.3, .7, .3, 1); }
.fig img { position: absolute; left: 50%; bottom: 14%; height: calc(var(--f) * var(--h, 1)); width: auto; transform-origin: 50% 100%;
  transform: translateX(-50%) rotateX(calc(var(--neigung) * -1)); filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.45));
  pointer-events: auto; cursor: pointer; }   /* klickbar: der Kopf einer hohen Figur ragt über das Feld dahinter — der Klick gilt ihrem Feld */
.fig::before { content: ''; position: absolute; left: 18%; right: 18%; bottom: 8%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45), transparent 70%); }
.fig[data-t="p"] { --h: 0.82; } .fig[data-t="r"] { --h: 0.95; } .fig[data-t="n"] { --h: 1.08; } .fig[data-t="b"] { --h: 1.16; } .fig[data-t="q"] { --h: 1.22; } .fig[data-t="k"] { --h: 1.32; }
.fig.hebt img { transform: translateX(-50%) rotateX(calc(var(--neigung) * -1)) translateY(-10%); filter: drop-shadow(0 14px 8px rgba(0, 0, 0, 0.5)) brightness(1.08); }
.fig.weg { opacity: 0; transition: opacity 0.25s; }

/* ── Zugleiste ──────────────────────────────────────────────────────────── */
.leiste { display: flex; align-items: center; gap: 10px; min-height: 40px; justify-content: center; }
.leisten-knopf { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(240, 215, 154, 0.35); background: rgba(30, 22, 16, 0.7); font-weight: 700; }
.leisten-knopf svg { width: 16px; height: 16px; fill: none; stroke: var(--messing-hell); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leisten-knopf:disabled { opacity: 0.4; cursor: default; }
.zuege { display: flex; gap: 10px; max-width: min(640px, 60vw); overflow-x: auto; margin: 0; padding: 4px 0; list-style: none; scrollbar-width: none; font-size: 14px; color: var(--leise); white-space: nowrap; }
.zuege li b { color: var(--messing); margin-right: 4px; font-weight: 400; }
.zuege li:last-child { color: var(--elfenbein); }

/* ── Meldung ────────────────────────────────────────────────────────────── */
.meldung { position: fixed; left: 50%; top: 18%; z-index: 30; transform: translate(-50%, -10px); padding: 10px 26px; border-radius: 999px; pointer-events: none;
  background: rgba(30, 22, 16, 0.92); border: 1px solid rgba(240, 215, 154, 0.5); color: var(--messing-hell); font-family: var(--titel); font-style: italic; font-size: 24px; opacity: 0; transition: opacity .25s, transform .25s; }
.meldung.an { opacity: 1; transform: translate(-50%, 0); }

/* ── Startbildschirm (Norm sb-*) ───────────────────────────────────────── */
.ebene { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
/* padding-top: Startkarte bleibt unter der GameZone-Pille, wenn sie bei niedriger Fensterhöhe die volle Höhe braucht (Prüfung 30.10.) */
.sb { justify-content: flex-start; padding-top: 60px; padding-left: clamp(16px, 7vw, 110px); background: linear-gradient(90deg, rgba(14, 10, 7, 0.95) 0%, rgba(14, 10, 7, 0.78) 38%, rgba(14, 10, 7, 0.1) 72%); }
.sb-karte { width: min(500px, calc(100% + 40px)); max-height: 100%; overflow-y: auto; padding: 8px 24px 24px; margin: 0 -20px; scrollbar-width: none; }
.sb-vortitel { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--messing); }
.sb-titel { margin: 4px 0 0; font-family: var(--titel); font-style: italic; font-weight: 700; font-size: clamp(60px, 8vw, 112px); line-height: 1;
  background: linear-gradient(180deg, #fff6dc, var(--messing-hell) 45%, var(--messing)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-unterzeile { margin: 10px 0 22px; color: var(--leise); font-size: 16px; font-family: var(--titel); font-style: italic; }
.sb-gruppe { margin: 0 0 13px; }
.sb-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--messing-hell); margin-bottom: 6px; opacity: 0.85; }
.sb-wahl { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 245, 220, 0.05); border: 1px solid rgba(201, 163, 90, 0.3); }
.sb-wahl button { flex: 1; min-height: 38px; padding: 6px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--leise); font-weight: 700; }
.sb-wahl button:hover { color: var(--elfenbein); }
.sb-wahl button.an { background: linear-gradient(180deg, var(--messing-hell), var(--messing)); color: #2a1a08; }
.sb-namen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sb-namen input { min-width: 0; padding: 9px 14px; border: 1px solid rgba(201, 163, 90, 0.3); border-radius: 999px; background: rgba(255, 245, 220, 0.06); color: var(--elfenbein); font: inherit; font-weight: 700; }
.sb-namen input::placeholder { color: var(--leise); font-weight: 400; }
.sb-start { width: 100%; margin: 8px 0 14px; padding: 14px; border: 0; border-radius: 999px; font-family: var(--titel); font-style: italic; font-weight: 700; font-size: 26px; color: #2a1a08;
  background: linear-gradient(180deg, #fff1c8, var(--messing-hell) 40%, var(--messing)); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.sb-start:disabled { filter: grayscale(0.7); opacity: 0.6; cursor: default; }
.sb-hilfe { border: 1px solid rgba(201, 163, 90, 0.25); border-radius: 14px; padding: 10px 14px; font-size: 14px; color: var(--leise); background: rgba(255, 245, 220, 0.03); }
.sb-hilfe summary { color: var(--elfenbein); font-weight: 700; cursor: pointer; }
.sb-hilfe p { margin: 8px 0 0; line-height: 1.5; }
.sb-hilfe h2, .sb-hilfe h3, .sb-hilfe h4 { color: var(--elfenbein); }
.sb-sprache { margin-top: 12px; background: none; border: 1px solid rgba(201, 163, 90, 0.35); border-radius: 999px; padding: 6px 14px; color: var(--leise); font-size: 13px; }

/* ── Karten: Pause, Ende, Umwandlung ───────────────────────────────────── */
#ende, #pause, #umwandlung { background: rgba(8, 6, 4, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.karte { width: min(420px, 100%); max-height: 100%; overflow-y: auto; padding: 24px 26px; text-align: center; border-radius: 18px;
  background: radial-gradient(ellipse at 50% 0%, #3b2a1b, #1b140e); border: 1px solid rgba(240, 215, 154, 0.45); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.karte h2 { margin: 0 0 10px; font-family: var(--titel); font-style: italic; font-size: 34px; color: var(--messing-hell); }
.karte p { margin: 6px 0; color: var(--leise); line-height: 1.45; }
.karte a { color: var(--messing-hell); }
.knopf-gross { display: block; width: 100%; margin-top: 16px; padding: 12px; border: 0; border-radius: 999px; font-family: var(--titel); font-style: italic; font-weight: 700; font-size: 22px; color: #2a1a08;
  background: linear-gradient(180deg, var(--messing-hell), var(--messing)); }
.knopf-leise { display: block; width: 100%; margin-top: 8px; padding: 9px; border: 1px solid rgba(240, 215, 154, 0.3); border-radius: 999px; background: none; color: var(--leise); }
.knopf-leise[hidden], .knopf-gross[hidden] { display: none; }
.umwandlung-wahl { display: flex; justify-content: center; gap: 10px; }
.umwandlung-wahl button { width: 72px; height: 96px; border-radius: 14px; border: 1px solid rgba(240, 215, 154, 0.4); background: rgba(255, 245, 220, 0.06); display: grid; place-items: end center; padding: 6px; }
.umwandlung-wahl button:hover { background: rgba(240, 215, 154, 0.18); }
.umwandlung-wahl img { max-height: 82px; max-width: 60px; }

/* ── Handy ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  :root { --f: min(10.6vw, 7vh); --neigung: 16deg; }
  .kopf { padding-left: 0; padding-top: 50px; }
  .knoepfe { position: fixed; top: var(--oben); right: var(--rand); }
  .status { font-size: 18px; }
  .brett-ebene { margin: 10px 14px 16px; }
  .rahmen { inset: -12px; } .kanten { display: none; }
  .seite { width: calc(var(--f) * 8 + 24px); }
  .zuege { max-width: 60vw; }
  .sb { justify-content: center; align-items: flex-end; padding: 16px; background: linear-gradient(180deg, rgba(14, 10, 7, 0.25) 0%, rgba(14, 10, 7, 0.95) 45%); }
  .sb-titel { font-size: 64px; }
  .sb-wahl button { font-size: 14px; padding: 6px 4px; }
}
@media (max-height: 560px) and (min-aspect-ratio: 4/5) {
  :root { --f: min(9.6vh, 6vw); --neigung: 14deg; }
  .saal { grid-template-columns: 1fr auto; grid-template-rows: auto minmax(0, 1fr); }
  .tisch { grid-row: 1 / 3; grid-column: 1; }
  .leiste { grid-column: 2; flex-direction: column; } .zuege { flex-direction: column; max-height: 50vh; }
  .sb-karte { width: min(560px, 100%); }
}
@media (prefers-reduced-motion: reduce) { .fig { transition-duration: 0.01s; } }

/* Hintergrundbild (Micha 30.10.: Startbild nicht leer, echte Illustration; Krea 2, ~/neo/werkzeug/gamezone/gpu/hg-bilder.py).
   Eigene Ebene hinter allem: im Menü kräftig, im Spiel abgedunkelt und leicht unscharf, damit das Feld vorn bleibt.
   Hochformat-Fenster bekommen hg-hoch. 3D-Spiele machen das in der Szene (_spiel/hintergrund.js). */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 9, 7, 0.15), rgba(11, 9, 7, 0.5)), url('../img/hg-quer.webp') center / cover no-repeat;
  transition: opacity .6s ease, filter .6s ease; }
body:not(.im-menue)::before { opacity: 0.4; filter: blur(3px) saturate(0.85); }
@media (max-aspect-ratio: 9/10) { body::before { background-image: linear-gradient(180deg, rgba(11, 9, 7, 0.2), rgba(11, 9, 7, 0.6)), url('../img/hg-hoch.webp'); } }