:root{
  --clr-brett-hell:rgb(238,233,214);
  --clr-brett-dunkel:color-mix(in srgb,rgb(0,145,0) 62%,var(--clr-brett-hell));
  --font:"Recursive",ui-sans-serif,system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
body{margin:0;background:var(--clr-background);color:var(--clr-text);font-family:var(--font);font-size:16px;line-height:1.45;
  font-variation-settings:"CASL" 0,"MONO" 0;
  padding:calc(16px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  -webkit-tap-highlight-color:transparent;transition:background-color .35s ease,color .35s ease}
button{font:inherit;color:inherit}
.wrap{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:18px}

/* Kopf: Titel einfarbig, jeder Buchstabe eine Stufe leichter (Black → Light); beim Laden und beim Hover läuft eine Welle
   von links nach rechts: erst dünn, dann dick, dann zurück auf die eigene Stufe;
   daneben die drei Modi als Pills (wie die Toolbox), rechts Bestenliste und Hell/Dunkel */
.kopf{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding-right:124px;min-height:40px}
h1{margin:0;font-size:2.1rem;cursor:default;line-height:1;letter-spacing:-.01em;display:flex;align-items:baseline}
h1 span{font-weight:var(--w);animation:welle 1.4s cubic-bezier(.45,0,.25,1) calc(.25s + var(--i) * 90ms) both}
h1.nochmal span{animation-name:welle2}
@keyframes welle{0%{font-weight:var(--w)}35%{font-weight:300}70%{font-weight:1000}100%{font-weight:var(--w)}}
@keyframes welle2{0%{font-weight:var(--w)}35%{font-weight:300}70%{font-weight:1000}100%{font-weight:var(--w)}}
/* Icons immer rechts oben, egal wie der Kopf umbricht */
.kopf-icons{position:absolute;top:0;right:-8px;display:flex}
.icon{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:none;cursor:pointer;padding:0}
.icon:hover{color:var(--clr-primary)}
.icon svg{width:22px;height:22px;transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
.icon.spin svg{transform:rotate(180deg)}
.modi{display:flex;gap:6px;flex-wrap:wrap;order:3;width:calc(100% + 124px);margin-right:-124px}
@media (min-width:640px){.modi{order:0;width:auto;margin-right:0}}
.modus[hidden]{display:none}
.modus{display:flex;flex-direction:column;gap:16px}

/* Aufgabe / Eröffnungsname groß, Nebeninfos klein und versal */
.titel{margin:0;font-size:1.7rem;line-height:1.05;font-weight:750;letter-spacing:-.015em;text-wrap:balance}
.klein{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.zeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.zahlen{font-variant-numeric:tabular-nums}
.msg{min-height:1.45em;font-weight:500}
.msg.gut{color:var(--clr-primary)} .msg.schlecht{color:var(--clr-error)}

/* Seiten am Brett: Schwarz oben, Weiß unten; der Punkt zeigt, wer am Zug ist */
.seite{display:flex;align-items:center;gap:8px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.seite i{width:9px;height:9px;border-radius:50%;border:1px solid currentColor;display:inline-block}
.seite.am-zug i{background:var(--clr-primary);border-color:var(--clr-primary)}
.seite .letzter{margin-left:auto;font-family:var(--font);font-variation-settings:"MONO" 1;text-transform:none;letter-spacing:0;font-size:.9rem}

/* Brett */
.brett{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:100%;aspect-ratio:1;
  user-select:none;-webkit-user-select:none;touch-action:none}
.feld{position:relative;border:0;padding:0;margin:0;min-width:0;min-height:0;overflow:hidden;display:grid;place-items:center;cursor:pointer;background:var(--clr-brett-hell);color:#1B1B1B}
.feld.d{background:var(--clr-brett-dunkel)}
.feld:focus-visible{outline:3px solid var(--clr-text);outline-offset:-3px;z-index:3}
.feld .k{position:absolute;font-size:.62rem;line-height:1;font-variation-settings:"MONO" 1;pointer-events:none}
.feld .k.r{left:3px;top:3px} .feld .k.l{right:3px;bottom:2px}
.feld svg.figur{position:absolute;left:22.5%;top:22.5%;width:55%;height:55%;pointer-events:none;z-index:1;transition:transform .1s ease-out}
/* letzter Zug: gelbliches Grün, Ausgangsfeld heller und durchscheinender, Zielfeld kräftiger */
.feld{--gelbgruen:color-mix(in srgb,var(--clr-primary) 45%,rgb(235,215,0))}
.feld.zug-von::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--gelbgruen) 35%,transparent)}
.feld.zug-nach::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--gelbgruen) 70%,transparent)}
.feld.wahl::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px #1B1B1B}
.feld.wahl svg.figur{transform:scale(1.08)}
.feld.ziel::after{content:"";position:absolute;width:26%;height:26%;border-radius:50%;background:rgba(27,27,27,.45);z-index:2}
.feld.ziel.schlag::after{width:86%;height:86%;background:none;border:2px solid rgba(27,27,27,.55)}
.feld.tipp::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px #fff;animation:puls 1s ease 2}
.feld.falsch::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--clr-error)}
.feld.schach svg.figur{filter:drop-shadow(0 0 6px var(--clr-error))}
@keyframes puls{50%{box-shadow:inset 0 0 0 6px #fff}}
/* gezogene Figur folgt dem Finger */
.flug{position:fixed;left:0;top:0;pointer-events:none;z-index:50;will-change:transform}
.flug svg{width:55%;height:55%;margin:22.5%;display:block;transform:scale(1.15)}
.flug.zurueck{transition:transform .22s cubic-bezier(.2,.9,.3,1)}
.feld.quelle svg.figur{opacity:.25}

/* Notation groß als Typografie */
.notation{margin:0;font-size:1.6rem;line-height:1.25;font-weight:350;font-variation-settings:"MONO" 1;min-height:1.25em;word-spacing:.05em}
.notation .nr{font-weight:300;font-size:.6em;vertical-align:.25em;margin-right:.15em}
.notation .z{white-space:nowrap}
.notation .m.neu{color:var(--clr-primary);font-weight:700}
#er-notation .m{cursor:pointer}
#er-notation .m:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
/* Steuerleiste über dem Brett und Blättern: Pfeile ← → aus Recursive (recursive-pfeile.woff2, Feld Custom-css) */
.leiste{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px}
.blaettern-leiste{display:flex;gap:4px;margin-left:auto}
.blaettern-leiste button{border:0;background:none;width:40px;height:36px;cursor:pointer;font-size:1.2rem;line-height:1;font-variation-settings:"MONO" 1}
.blaettern-leiste button:hover:not(:disabled){color:var(--clr-primary)}
.blaettern-leiste button:active:not(:disabled){transform:scale(.94)}
.blaettern-leiste button:disabled{opacity:.3;cursor:default}
.notation .offen{font-weight:300}

/* Schalter: Text mit Linie darunter, keine Kästen */
.knoepfe{display:flex;gap:6px 22px;flex-wrap:wrap;align-items:center}
.knoepfe.rechts{justify-content:flex-end}
.knopf{border:0;border-bottom:1px solid currentColor;background:none;padding:6px 0 3px;cursor:pointer;font-size:1rem}
.knopf:hover{color:var(--clr-primary)}
.knopf:active{transform:scale(.97)}
.knopf.haupt{font-weight:750;border-bottom-width:2px}
.knopf:disabled{opacity:.35;cursor:default}
.wahl-liste{display:flex;gap:4px 16px;flex-wrap:wrap}
.wahl-liste[hidden]{display:none}
.wahl-liste button{border:0;background:none;padding:2px 0;cursor:pointer;font-size:.95rem;border-bottom:1px solid transparent}
.wahl-liste button[aria-pressed="true"]{font-weight:750;border-bottom-color:var(--clr-primary)}
.wahl-liste button:hover{color:var(--clr-primary)}
button:focus-visible{outline:2px solid var(--clr-primary);outline-offset:3px}

/* Damenfeld: bedrohte Felder schraffiert, Konflikte rot */
.damen .feld.t::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(27,27,27,.38) 0 1px,transparent 1px 6px)}
.damen .feld.c svg.figur{filter:drop-shadow(0 0 5px var(--clr-error))}
.balken{height:1px;background:var(--clr-text);position:relative}
.balken i{position:absolute;left:0;top:-1px;height:3px;background:var(--clr-primary);width:0;transition:width .4s}
.gefunden{display:flex;flex-wrap:wrap;gap:8px}
.mini{display:grid;width:48px;height:48px;cursor:pointer;border:0;padding:0}
.mini i{background:var(--clr-brett-hell)} .mini i.d{background:var(--clr-brett-dunkel)} .mini i.q{background:#1B1B1B}
.regeln{margin:0;font-size:.92rem;max-width:62ch}
h2{margin:6px 0 0;font-size:1.05rem;font-weight:750}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Bestenliste */
.sheet{position:fixed;inset:0;z-index:30}
.sheet[hidden]{display:none}
.backdrop{opacity:0;transition:opacity .3s ease}
.panel{position:absolute;margin:0 auto;max-width:440px;overflow:auto;overscroll-behavior:contain;
  left:calc(15px + env(safe-area-inset-left));right:calc(15px + env(safe-area-inset-right));bottom:calc(15px + env(safe-area-inset-bottom));
  max-height:calc(100% - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding:8px 20px 20px;
  transform:translateY(calc(100% + 40px));opacity:.6;will-change:transform;
  transition:transform .3s cubic-bezier(.4,0,1,1),opacity .3s ease}
.sheet.open .backdrop{opacity:1}
.sheet.open .panel{transform:none;opacity:1;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.grip{width:38px;height:5px;border-radius:3px;background:currentColor;margin:4px auto 6px}
.panel-head{display:flex;align-items:center;justify-content:space-between;touch-action:none}
.panel h2{margin:0;font-size:1.05rem;font-weight:750}
.panel-head .icon{margin-right:-10px}
#score{padding:6px 0 14px;display:grid;gap:8px}
#score[hidden]{display:none}
#score p{margin:0;font-weight:500}
#scoreForm{display:flex;gap:12px;align-items:center}
#scoreForm[hidden]{display:none}
#scoreName{flex:1;min-width:0;font:500 16px var(--font);color:var(--clr-text);background:transparent;border:0;border-bottom:2px solid var(--clr-text);padding:8px 0;border-radius:0;outline:none}
#scoreName:focus{border-color:var(--clr-primary)}
#scoreForm button{font:800 .95rem var(--font);color:var(--clr-primary);background:none;border:0;padding:8px 0;cursor:pointer}
#scoreForm button:disabled{opacity:.4}
#topList{list-style:none;margin:4px 0 0;padding:0;counter-reset:n}
#topList li{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--clr-text);font-variant-numeric:tabular-nums;counter-increment:n}
#topList li::before{content:counter(n);width:1.4em;font-size:.8rem}
#topList li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#topList li i{font-style:normal;font-size:.8rem}
#topList li b{font-weight:750;min-width:3ch;text-align:right}
#topList li.new,#topList li.new::before{color:var(--clr-primary)}
#topList li:last-child{border-bottom:0}
/* Toast von oben */
.toast{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:min(560px,calc(100% - 32px));text-align:center;text-wrap:balance}
.toast button{border:0;background:none;color:inherit;font:inherit;font-weight:800;padding:0;cursor:pointer;border-bottom:1.5px solid currentColor;white-space:nowrap}

/* Eröffnung wählen: das Auswahlfeld ist zugleich die Überschrift, als runde Pill mit Pfeil nach unten (wie bei Apple),
   links; die Liste ist die des Systems (iPhone: Auswahlrad) */
.auswahl{position:relative;display:inline-flex;min-width:0;max-width:100%}
.auswahl select{-webkit-appearance:none;appearance:none;font:inherit;color:var(--clr-text);background:none;
  border:1px solid currentColor;border-radius:999px;padding:.22em 1.55em .26em .65em;margin:0;cursor:pointer;max-width:100%;text-overflow:ellipsis}
.auswahl select:hover,.auswahl:hover::after{color:var(--clr-primary)}
.auswahl select:focus{outline:none}
.auswahl select:focus-visible{box-shadow:0 0 0 2px var(--clr-background),0 0 0 4px var(--clr-primary)}
.auswahl::after{content:"";position:absolute;right:.7em;top:50%;width:.3em;height:.3em;margin-top:-.24em;
  border-right:.06em solid currentColor;border-bottom:.06em solid currentColor;transform:rotate(45deg);pointer-events:none}
.auswahl select option{font-size:1rem;font-weight:400}

/* geschlagene Figuren hinter dem Namen, klein; gleiche Figuren rücken zusammen; dahinter der Vorsprung */
.beute{display:inline-flex;align-items:center;margin-left:4px;text-transform:none;letter-spacing:0}
.beute svg.figur{width:1.35em;height:1.35em;margin-left:-.55em}
.beute svg.figur:first-child{margin-left:0}
.beute svg.figur.neue-art{margin-left:-.1em}
.beute .plus{margin-left:.35em;font-size:.82rem;font-weight:600;font-variation-settings:"MONO" 1}

/* Bewertungsbalken: Weiß links, Schwarz rechts, zusammen 100 %; daneben die Zahl (Bauerneinheiten aus Sicht von Weiß) */
.bewertung{display:flex;align-items:center;gap:10px;margin-top:10px}
.balken-wert{--weiss:50%;flex:1;height:8px;border:1px solid var(--clr-text);background:#1B1B1B;position:relative;overflow:hidden}
.balken-wert::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--weiss);background:#fff;transition:width .45s cubic-bezier(.2,.9,.3,1)}
.bewertung output{min-width:3.6em;text-align:right;font-size:.85rem;font-weight:600;font-variation-settings:"MONO" 1;font-variant-numeric:tabular-nums}

/* Buch-Symbol neben der Eröffnung (grün) und die Karte mit den Erklärungen */
.titel-gruppe{display:inline-flex;align-items:center;gap:6px;min-width:0}
.icon.buch{color:var(--clr-primary)}
.icon.buch[hidden]{display:none}
.buch svg{width:24px;height:24px;transition:transform .2s cubic-bezier(.2,.9,.3,1.2)}
.buch:hover{color:var(--clr-primary-accent)}
.buch:active svg{transform:scale(.9)}
.buch-idee{margin:8px 0 14px;font-size:1rem;line-height:1.45}
.buch-zuege{list-style:none;margin:0;padding:0}
.buch-zuege li{display:grid;grid-template-columns:5.2em 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--clr-text);font-size:.92rem;line-height:1.4}
.buch-zuege li b{font-variation-settings:"MONO" 1;font-weight:700;font-size:1rem}
.buch-zuege li.gespielt b{color:var(--clr-primary)}
.buch-zuege li.jetzt{background:color-mix(in srgb,var(--clr-primary) 8%,transparent)}
.buch-zuege li.jetzt b::after{content:" ←";font-weight:400}

/* Damenfeld: Vorrat der acht Damen oben links (gesetzte blass) */
.vorrat{display:flex;gap:1px;flex-wrap:nowrap}
.vorrat svg.figur{width:22px;height:22px;transition:opacity .25s ease,transform .25s cubic-bezier(.2,.9,.3,1.3)}
.vorrat svg.figur.gesetzt{opacity:.22;transform:scale(.85)}
@media (max-width:420px){.vorrat svg.figur{width:17px;height:17px}}

/* Seitenwahl als Icons (König weiß / schwarz / beide): gleiche Zeilenhöhe, gleiche Linie und Abstände wie die
   Textknöpfe daneben (.knopf), die Figur so hoch wie Großbuchstaben mit Oberlänge */
.seiten-wahl{gap:6px 22px;align-items:center}
.seiten-wahl button{display:inline-flex;align-items:flex-end;font-size:1rem;line-height:1.45;padding:6px 0 3px;border-bottom:1px solid transparent}
.seiten-wahl button[aria-pressed="true"]{border-bottom:2px solid var(--clr-primary);padding-bottom:2px}
.seiten-wahl button svg.figur{width:1.45em;height:1.45em;margin:0 -.2em;transition:transform .2s cubic-bezier(.2,.9,.3,1.3)}
.seiten-wahl button svg.figur + svg.figur{margin-left:-.45em}
.seiten-wahl button:hover svg.figur{transform:translateY(-2px)}

/* Reiter in der Bestenliste: kleine Pills wie das Menü */
.top-tabs{display:flex;gap:6px;margin:8px 0 6px;flex-wrap:wrap}
.top-tabs button{border:1px solid currentColor;border-radius:999px;background:none;cursor:pointer;font-size:.8rem;padding:.2rem .7rem .24rem}
.top-tabs button:hover{color:var(--clr-primary)}
.top-tabs button[aria-selected="true"]{background:var(--clr-text);color:var(--clr-background);border-color:var(--clr-text);font-weight:700}

/* Figuren neben dem Brett (Vorrat, geschlagene Figuren, Seitenwahl): Farben aus Schrift und Grund statt fest,
   im Dark Mode werden schwarze Figuren also hell und weiße dunkel mit heller Kontur */
.aussen svg.figur .fs{fill:var(--clr-text);stroke:var(--clr-text)}
.aussen svg.figur .fs .i{stroke:var(--clr-background)}
.aussen svg.figur .fw{fill:var(--clr-background);stroke:var(--clr-text)}
.aussen svg.figur .fw .i{stroke:var(--clr-text)}

/* Dark Mode: Rest */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .buch:hover{color:var(--clr-primary)}}
:root[data-theme="dark"] .buch:hover{color:var(--clr-primary)}

.buch-zuege a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.buch-zuege a:hover{color:var(--clr-primary)}
#tk-info .schwer{font-size:inherit;letter-spacing:.08em;font-variant-numeric:tabular-nums}
#tk-aufgabe{transition:font-weight .4s ease}

/* Code-Pill der Aufgabe (wie bei Kugelfeld): antippen teilt den Link #taktik/<Code> */
.tk-rechts{display:inline-flex;align-items:center;gap:10px}
.code-pill{font:600 .78rem var(--font);font-variation-settings:"MONO" 1;letter-spacing:.06em;color:inherit;background:none;border:1px solid currentColor;border-radius:999px;padding:.15rem .6rem .18rem;cursor:pointer;text-transform:none}
.code-pill::after{content:" ↗";font-variation-settings:"MONO" 0}
.code-pill:hover{color:var(--clr-primary)}
.code-pill:active{transform:scale(.96)}