:root {
  --font-ui: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gruen: #36b05a; --blau: #3d7bd9; --rot: #d2463a;
  --ease: cubic-bezier(.4,0,.2,1);
}
#stage[data-ansicht="papier"] {
  --p-bg:#131c2e; --p-bg2:#1d2a43; --p-rand:#d9b26a; --p-tx:#f3ecdc; --p-mu:#aab3c4; --p-chip:#28385a; --p-zeile:#0d1424;
  --ak:#c8402c; --ak-tx:#fff6ea; --ak-schrift:#f2967a; --font-titel: Georgia, 'Times New Roman', serif;
  --s1:#1a1612; --s2:#f4eee0;
}
#stage[data-ansicht="buehne"] {
  --p-bg:#160d09; --p-bg2:#24150f; --p-rand:#c9a14a; --p-tx:#f4e8cf; --p-mu:#bba98a; --p-chip:#3a2418; --p-zeile:#0e0806;
  --ak:#d8692a; --ak-tx:#fff4e6; --ak-schrift:#ffab73; --font-titel: Georgia, 'Times New Roman', serif;
  --s1:#1a1612; --s2:#f4eee0;
}
:root[data-theme="light"] #stage[data-ansicht="papier"] {
  --p-bg:#e3e6ec; --p-bg2:#eceef3; --p-rand:#8a6a2c; --p-tx:#1b2232; --p-mu:#4a5468; --p-chip:#d3d9e4; --p-zeile:#dde1e9;
  --ak:#b2321f; --ak-tx:#fff6ea; --ak-schrift:#a12d1a;
}
:root[data-theme="light"] #stage[data-ansicht="buehne"] {
  --p-bg:#ece2d2; --p-bg2:#f2eadd; --p-rand:#8a6420; --p-tx:#2a1a10; --p-mu:#6a5440; --p-chip:#e0d2bc; --p-zeile:#e6dac6;
  --ak:#b8541c; --ak-tx:#fff6ea; --ak-schrift:#a24a16;
}

:where(html, html *) { scrollbar-width:thin; scrollbar-color:var(--p-rand, #c9a253) var(--p-zeile, #120c0a); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:var(--p-zeile, #120c0a); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:var(--p-rand, #c9a253); border-radius:5px; border:2px solid transparent; background-clip:padding-box; }

* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:#07080b; overflow:hidden; touch-action:manipulation; }
body { color:var(--p-tx); font-family:var(--font-ui); -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
input[type="text"] { font:inherit; font-size:16px; }
.sgzi { width:1em; height:1em; vertical-align:-.15em; }

#wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
#stage { position:relative; box-sizing:content-box; width:800px; height:600px; flex:none; transform-origin:50% 50%; overflow:hidden;
  border-radius:12px; border:2px solid var(--p-rand); box-shadow:0 25px 50px -12px rgba(0,0,0,.7); color:var(--p-tx); }
#stage.hoch { width:552px; height:1010px; }
#kulisse { position:absolute; inset:0; z-index:0; }
#kulisse svg { display:block; width:100%; height:100%; }
#kulisse::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 35% 50%, transparent 40%, rgba(0,0,0,.35)); }
:root[data-theme="light"] #kulisse::after { background:radial-gradient(ellipse at 35% 50%, transparent 45%, rgba(255,255,255,.18)); }
:root[data-theme="light"] #stage { box-shadow:0 25px 50px -12px rgba(40,40,30,.35); }
:root[data-theme="light"] .ovl { background:rgba(60,60,50,.35); }
:root[data-theme="light"] #lobby { background:linear-gradient(var(--p-bg2), var(--p-bg)); }

#partie { position:absolute; inset:0; z-index:1; display:flex; }
#stage.hoch #partie { flex-direction:column; }
#brettspalte { width:552px; height:600px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:6px 0; }
#brettfeld { position:relative; width:552px; height:516px; display:flex; align-items:center; justify-content:center; }
#brett { width:516px; height:516px; display:block; overflow:visible; touch-action:none; cursor:pointer; }
#brettfeld::before { content:""; position:absolute; left:4px; top:30px; bottom:30px; width:5px; border-radius:3px; background:transparent; transition:background .3s; }
#brettfeld.dran-ich::before { background:var(--gruen); box-shadow:0 0 8px var(--gruen); }
#brettfeld.dran-gegner::before { background:var(--blau); box-shadow:0 0 8px var(--blau); }
#hinweisband { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5; padding:10px 26px; border-radius:10px;
  background:rgba(10,8,6,.82); border:1px solid var(--ak); font-family:var(--font-titel); font-size:20px; font-weight:700; letter-spacing:.06em;
  color:var(--p-tx); box-shadow:0 8px 24px rgba(0,0,0,.6); pointer-events:none; white-space:nowrap; }

.leiste { width:516px; height:32px; display:flex; align-items:center; gap:9px; padding:0 8px 0 6px; border-radius:9px;
  background:linear-gradient(var(--p-bg2), var(--p-bg)); border:1px solid color-mix(in srgb, var(--p-rand) 45%, transparent);
  box-shadow:0 4px 10px rgba(0,0,0,.45); font-size:14px; }
.leiste.dran { border-color:var(--ak); box-shadow:0 0 0 1px var(--ak), 0 4px 10px rgba(0,0,0,.45); }
.lstein { width:24px; height:24px; flex:none; display:grid; place-items:center; }
.lvorrat { display:flex; gap:4px; flex:none; }
.lvorrat .vr { display:flex; align-items:center; gap:1px; font-size:12px; font-weight:700; font-family:var(--font-mono); color:var(--p-tx); }
.lvorrat .vr em { font-style:normal; min-width:9px; }
.lvorrat .vr.leer { opacity:.35; }
.chip { display:block; flex:none; }
.lname { font-family:var(--font-titel); font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.luhr { font-family:var(--font-mono); font-weight:800; font-size:16px; min-width:64px; text-align:center; padding:2px 6px;
  border-radius:6px; background:rgba(0,0,0,.4); }
.luhr.aus { color:var(--p-mu); }
.leiste.dran .luhr:not(.aus) { background:var(--ak); color:var(--ak-tx); }
.luhr.knapp { color:#ffd27a; }
.luhr.kritisch { background:var(--rot) !important; color:#fff !important; animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:.55; } }

#brett .neu { animation:fallen .42s cubic-bezier(.3,1.4,.5,1); transform-box:fill-box; transform-origin:center; }
@keyframes fallen { from { transform:translateY(-26px) scale(1.3); } to { transform:none; } }
#brett .ueber { filter:drop-shadow(0 0 6px #fff8); }
#brett .geist, #brett .totemgeist { pointer-events:none; }
#brett .ziel, #brett .lege { animation:puls 1.3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; pointer-events:none; }
#brett .ziel.an, #brett .lege.an { animation:none; }
@keyframes puls { 50% { transform:scale(.86); } }
#brett .ringfeld { pointer-events:none; }
#brett .wt-puls { animation:puls 1.1s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
#brett .wt-plus { animation:steigen .9s var(--ease) forwards; transform-box:fill-box; transform-origin:center; pointer-events:none; }
@keyframes steigen { from { transform:translateY(16px) scale(.6); } to { transform:none; } }

#wahl { position:absolute; z-index:6; padding:8px 10px 9px; border-radius:12px; background:linear-gradient(var(--p-bg2), var(--p-bg));
  border:1.5px solid var(--p-rand); box-shadow:0 12px 28px rgba(0,0,0,.55); text-align:center; }
.wa-titel { font-family:var(--font-titel); font-weight:700; font-size:14px; margin-bottom:6px; }
.wa-reihe { display:flex; gap:6px; }
.wa-reihe button { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 5px 5px; border-radius:10px; background:var(--p-chip);
  border:1px solid color-mix(in srgb, var(--p-rand) 40%, transparent); min-width:56px; }
.wa-reihe button b { font-family:var(--font-titel); font-size:15px; line-height:1; }
.wa-reihe button span { font-size:11.5px; color:var(--p-mu); font-weight:600; }
.wa-reihe button:hover:not(:disabled) { border-color:var(--ak); filter:brightness(1.12); }
.wa-reihe button:disabled { opacity:.32; cursor:default; }
.wa-ab { margin-top:7px; font-size:12px; color:var(--p-mu); padding:4px 10px; border-radius:8px; background:var(--p-zeile); }
#wertung { position:absolute; left:50%; top:6px; transform:translateX(-50%); z-index:5; min-width:330px; max-width:500px; padding:8px 14px 9px;
  border-radius:12px; background:rgba(10,12,12,.86); border:1.5px solid var(--p-rand); box-shadow:0 10px 26px rgba(0,0,0,.55); text-align:center; color:#f4efe2; cursor:pointer;
  animation:herein .35s var(--ease); }
@keyframes herein { from { transform:translate(-50%,-16px); } to { transform:translateX(-50%); } }
#wertung.unten { top:auto; bottom:6px; }
.wt-kopf { font-size:12.5px; color:#d8d2c2; }
.wt-reihe { display:flex; align-items:center; justify-content:center; gap:10px; margin:3px 0; }
.wt-reihe b { font-family:var(--font-titel); font-size:30px; min-width:38px; }
.wt-reihe i { font-style:normal; font-size:22px; color:#bdb6a6; }
.wt-seite { display:flex; align-items:center; gap:5px; font-weight:700; font-size:13.5px; }
.wt-fuss { font-size:13px; font-weight:700; color:#ffd98a; min-height:17px; }

#konsole { width:248px; flex:none; display:flex; flex-direction:column; gap:6px; padding:10px 10px 8px; min-height:0;
  background:linear-gradient(var(--p-bg2), var(--p-bg)); border-left:2px solid var(--p-rand); }
#stage.hoch #konsole { width:552px; height:410px; border-left:0; border-top:2px solid var(--p-rand); }
.k-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.k-logo { font-family:var(--font-titel); font-weight:700; font-size:18px; letter-spacing:3px; color:var(--p-rand); }
.k-modus { font-size:11px; color:var(--p-mu); text-align:right; min-width:0; line-height:1.25; }
#zugstreifen { height:6px; flex:none; border-radius:3px; background:var(--gruen); transition:background .3s; }
#zugstreifen.blau { background:var(--blau); }
#zugstreifen.aus { background:var(--p-chip); }
.k-status { font-weight:700; font-size:14px; text-align:center; min-height:19px; }
.k-status.ok { color:var(--ak-schrift); }
.k-regel { font-size:11px; color:var(--p-mu); text-align:center; margin-top:-4px; }
.k-blocklabel { font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--p-mu); text-transform:uppercase; }
.k-zugliste { flex:1; min-height:40px; overflow-y:auto; background:var(--p-zeile); border-radius:8px; padding:5px 8px;
  font-family:var(--font-mono); font-size:12px; display:grid; grid-template-columns:26px 1fr 1fr; align-content:start; row-gap:2px; }
.zl-leer { grid-column:1 / -1; color:var(--p-mu); font-family:var(--font-ui); }
.zl-nr { color:var(--p-mu); }
.zl-1, .zl-2 { display:flex; align-items:center; gap:5px; cursor:pointer; border-radius:4px; white-space:nowrap; }
.zl-1:hover, .zl-2:hover { background:var(--p-chip); }
.zl-1::before, .zl-2::before { content:""; width:9px; height:9px; border-radius:50%; flex:none; }
.zl-1::before { background:var(--s1); }
.zl-2::before { background:var(--s2); }
.zl-letzt { color:var(--ak-schrift); font-weight:800; }
.k-blaettern { display:flex; align-items:center; gap:4px; }
.k-blaettern button { width:28px; height:24px; border-radius:6px; background:var(--p-chip); display:grid; place-items:center; color:var(--p-tx); }
.k-blaettern button svg { width:14px; height:14px; }
.k-blaettern span { flex:1; text-align:center; font-size:11.5px; color:var(--p-mu); }
.k-blaettern.aktiv span { color:var(--ak-schrift); font-weight:700; }
.k-auftrag { font-size:14px; line-height:1.3; color:var(--p-tx); background:var(--p-zeile); border-left:3px solid var(--ak); border-radius:6px; padding:5px 8px; }
.k-ring { display:flex; align-items:center; gap:4px 10px; flex-wrap:wrap; font-size:12.5px; background:var(--p-zeile); border-radius:7px; padding:4px 8px; }
.k-ring .rg-t { font-size:11px; color:var(--p-mu); font-weight:700; letter-spacing:.04em; width:100%; }
.k-ring .rg-s { display:flex; align-items:center; gap:4px; }
.k-ring .rg-s b { font-family:var(--font-mono); font-size:14px; color:var(--ak-schrift); }
.k-erklaer { display:flex; gap:6px; align-items:flex-start; font-size:11.5px; line-height:1.35; color:var(--p-mu); }
.k-erklaer .chip { margin-top:1px; }
.k-reihe { display:flex; gap:6px; }
.k-reihe .kb { flex:1; }
.k-chat { height:54px; flex:none; overflow-y:auto; background:var(--p-zeile); border-radius:7px; padding:4px 7px; font-size:12px; line-height:1.35; }
#gchattext b { color:var(--ak-schrift); }
.k-chatin { width:100%; padding:5px 8px; border-radius:7px; background:var(--p-zeile); border:1px solid color-mix(in srgb, var(--p-rand) 40%, transparent); color:var(--p-tx); outline:none; }
.k-chatin:focus { border-color:var(--ak); }
.k-schnell { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.k-schnell button { padding:3px 4px; border-radius:6px; background:var(--p-chip); font-size:11.5px; color:var(--p-mu); }
.k-schnell button:hover:not(:disabled) { color:var(--p-tx); }
.k-schnell button:disabled { opacity:.4; }
.k-knoepfe { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
#stage.hoch .k-knoepfe { grid-template-columns:repeat(4, 1fr); }
.k-breit { grid-column:1 / -1; }
.kb { min-height:30px; padding:5px 8px; border-radius:9px; background:var(--p-chip); border:1px solid color-mix(in srgb, var(--p-rand) 45%, transparent);
  font-weight:700; font-size:12.5px; color:var(--p-tx); transition:filter .15s, transform .1s; }
.kb:hover:not(:disabled) { filter:brightness(1.18); }
.kb:active:not(:disabled) { transform:translateY(1px); }
.kb:disabled { opacity:.4; cursor:default; }
.kb-voll { background:var(--ak); color:var(--ak-tx); border-color:transparent; }
.kb-rot { color:#ffb3a8; }
:root[data-theme="light"] .kb-rot { color:#a3261c; }
.kb.an { outline:2px solid var(--ak); }
.k-leiste { display:flex; align-items:center; justify-content:space-between; }
.kb-hw { padding:5px 10px; border-radius:7px; background:var(--p-chip); font-weight:800; font-size:12px; letter-spacing:.06em; color:var(--p-tx); }
.k-icons { display:flex; gap:4px; }
.kb-ic { width:30px; height:30px; border-radius:8px; background:var(--p-chip); display:grid; place-items:center; color:var(--p-tx); }
.kb-ic svg { width:17px; height:17px; }
.kb-ic.aus { color:var(--p-mu); opacity:.7; }

#lobby { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; padding:12px 14px;
  background:linear-gradient(color-mix(in srgb, var(--p-bg2) 88%, transparent), color-mix(in srgb, var(--p-bg) 93%, transparent)); }
.lo-kopf { display:flex; align-items:center; gap:10px; padding-bottom:9px; margin-bottom:10px; border-bottom:1px solid color-mix(in srgb, var(--p-rand) 45%, transparent); }
.lo-logo { font-family:var(--font-titel); font-size:22px; font-weight:700; letter-spacing:.18em; color:var(--p-rand); }
.lo-raum { font-size:12px; color:var(--p-mu); }
.lo-ich { margin-left:auto; font-size:12px; color:var(--p-mu); white-space:nowrap; }
.lo-ich b { color:var(--p-tx); }
.lo-kopf-r { display:flex; align-items:center; gap:5px; margin-left:10px; }
.lo-kopf-r .kb { white-space:nowrap; }
#lo-nurchat.an { outline:2px solid var(--ak); }
.lo-mitte { flex:1; min-height:0; display:flex; gap:12px; }
.lo-chat { flex:1; min-width:0; display:flex; flex-direction:column; }
.lo-spieler { width:236px; flex:none; display:flex; flex-direction:column; }
.lo-label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--p-mu); margin-bottom:5px; }
#chatwin { flex:1 1 0; min-height:90px; overflow-y:auto; background:var(--p-zeile); border-radius:8px; padding:6px 9px; font-size:13px; line-height:1.45; }
#chattext .nm { color:var(--ak-schrift); font-weight:700; cursor:pointer; }
#chattext .nm:hover { text-decoration:underline; }
#chattext .sys { color:var(--p-mu); font-style:italic; }
#chattext .pm { color:var(--p-rand); }
#chatin, #pmin { margin-top:7px; padding:6px 9px; border-radius:8px; background:var(--p-zeile); border:1px solid color-mix(in srgb, var(--p-rand) 40%, transparent); color:var(--p-tx); outline:none; }
#chatin:focus, #pmin:focus { border-color:var(--ak); }
.lo-start { flex:1 1 0; min-height:0; display:flex; flex-direction:column; margin-top:12px; }
.lo-kacheln { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:8px; }
.lo-kachel { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; padding:10px 14px; text-align:left; }
.lo-kachel b { display:flex; align-items:center; gap:8px; font-size:15px; font-family:var(--font-titel); }
.lo-kachel b svg { width:18px; height:18px; }
.lo-kachel small { font-size:12px; font-weight:400; line-height:1.35; opacity:.85; }
.lo-tabs { display:flex; gap:4px; margin-bottom:6px; }
.lo-tabs button { flex:1; padding:5px 4px; border-radius:7px; background:var(--p-chip); font-size:12px; font-weight:700; color:var(--p-mu); }
.lo-tabs button.an { background:var(--ak); color:var(--ak-tx); }
.lo-tab { flex:1; min-height:0; display:flex; flex-direction:column; }
#ulist, .lo-liste { flex:1; min-height:0; overflow-y:auto; background:var(--p-zeile); border-radius:8px; padding:3px; }
.it { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:6px; font-size:13px; cursor:pointer; }
.it:hover { background:var(--p-chip); }
.it .elo, .it .rang { font-size:11.5px; color:var(--p-mu); }
.it .elo { margin-left:auto; }
.it .rang { min-width:22px; }
.it.me { color:var(--ak-schrift); cursor:default; }
.it.me:hover { background:none; }
.it.spielt { color:var(--p-mu); cursor:default; }
.it.spielt:hover { background:none; }
.it .pk { width:7px; height:7px; border-radius:50%; background:var(--gruen); flex:none; }
.it.spielt .pk { background:var(--p-mu); }
.lo-hinweis { margin:6px 2px 0; font-size:11px; color:var(--p-mu); line-height:1.35; }
#stage.hoch .lo-raum { display:none; }
#stage.hoch .lo-mitte { flex-direction:column; }
#stage.hoch .lo-chat { flex:1.7 1 0; min-height:0; }
#stage.hoch .lo-spieler { width:auto; flex:1 1 0; min-height:0; }

.ovl { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; background:rgba(5,6,9,.55); padding:16px; }
.karte { width:380px; max-width:100%; max-height:100%; overflow:auto; background:linear-gradient(var(--p-bg2), var(--p-bg)); border:1.5px solid var(--p-rand);
  border-radius:14px; padding:16px 20px; box-shadow:0 20px 50px rgba(0,0,0,.6); text-align:center; }
.karte h2 { font-family:var(--font-titel); margin:0 0 8px; font-size:20px; }
.karte-breit { width:580px; text-align:left; }
.kh { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.kh h2 { margin:0; }
.kx { width:30px; height:30px; border-radius:8px; background:var(--p-chip); font-size:16px; }
.kb-text { font-size:14px; line-height:1.5; color:var(--p-tx); }
.kb-text h3 { font-family:var(--font-titel); color:var(--p-rand); font-size:15px; margin:20px 0 4px; }
.kb-text h3:first-child { margin-top:0; }
.kb-text p { margin:4px 0; }
.vs-karte { width:470px; text-align:left; }
.vs-label { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--p-mu); margin:8px 0 4px; }
.vs-liste { display:flex; flex-wrap:wrap; gap:4px; }
.vs-liste button { padding:4px 10px; border-radius:16px; background:var(--p-chip); border:1px solid color-mix(in srgb, var(--p-rand) 40%, transparent); font-weight:700; font-size:12.5px; }
.vs-liste button span { font-weight:400; font-size:11px; opacity:.75; margin-left:4px; }
.vs-liste button.ich { background:var(--ak); color:var(--ak-tx); border-color:transparent; }
.vs-liste button.gegner { box-shadow:0 0 0 2px var(--gruen); }
.vs-liste button:disabled { opacity:.35; cursor:default; }
.vs-liste.gesperrt { opacity:.35; pointer-events:none; }
.vs-doppel { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.vs-farbe { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0 2px; padding:6px 8px; border-radius:9px; background:var(--p-zeile); font-size:13px; }
.vs-info { font-size:12px; color:var(--p-mu); min-height:18px; margin:9px 0 2px; line-height:1.4; }
.vs-info b { color:var(--p-tx); }
.vs-knoepfe { display:flex; gap:8px; margin-top:10px; }
.vs-knoepfe .kb { flex:1; min-height:36px; }
.pop-karte p { margin:0; font-size:14px; line-height:1.5; color:var(--p-mu); }
#pop-btns { display:flex; gap:8px; margin-top:14px; }
#pop-btns button { flex:1; padding:8px 12px; border-radius:9px; font-weight:700; font-size:13px; }
#pop-btns .ja { background:var(--ak); color:var(--ak-tx); }
#pop-btns .nein { background:var(--p-chip); border:1px solid color-mix(in srgb, var(--p-rand) 45%, transparent); }
#ende-stein { display:flex; justify-content:center; gap:4px; margin:2px auto 8px; }
#ende-unter { color:var(--p-mu); margin:0 0 10px; }
.ende-stand { display:grid; grid-template-columns:1fr auto; gap:3px 14px; text-align:left; font-size:13.5px; background:var(--p-zeile); border-radius:9px; padding:9px 12px; }
.ende-stand b { text-align:right; font-family:var(--font-mono); }
#ende-btns { flex-direction:column; }
#ende-btns button { width:100%; }
.ar-tabs { margin:4px 0 10px; }
.archiv-liste { display:flex; flex-direction:column; gap:5px; max-height:380px; overflow-y:auto; }
.ar-z { display:grid; grid-template-columns:1fr auto; gap:2px 10px; text-align:left; padding:7px 10px; border-radius:8px; background:var(--p-zeile); border-left:4px solid var(--p-mu); }
.ar-z.sieg { border-left-color:var(--gruen); }
.ar-z.nied { border-left-color:var(--rot); }
.ar-z b { font-size:13.5px; }
.ar-z span { font-size:12px; color:var(--p-mu); grid-column:1; }
.ar-z em { font-size:11.5px; color:var(--p-mu); font-style:normal; grid-row:1; grid-column:2; }
.statistik { max-height:400px; overflow-y:auto; font-size:13px; }
.st-kopf { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin-bottom:10px; }
.st-kopf div { background:var(--p-zeile); border-radius:8px; padding:7px 4px; text-align:center; }
.st-kopf b { display:block; font-size:18px; color:var(--ak-schrift); }
.st-kopf span { font-size:11px; color:var(--p-mu); }
.st-block { margin-top:10px; }
.st-block h3 { font-family:var(--font-titel); font-size:14px; margin:0 0 6px; color:var(--p-rand); }
.st-block h3 small { font-family:var(--font-ui); font-size:11px; color:var(--p-mu); font-weight:400; }
.st-zeile { display:grid; grid-template-columns:90px 1fr 120px; align-items:center; gap:8px; margin:4px 0; }
.st-balken { display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--p-zeile); }
.st-balken i.s, .st-form i.s { background:var(--gruen); }
.st-balken i.r, .st-form i.r { background:var(--p-mu); }
.st-balken i.n, .st-form i.n { background:var(--rot); }
.st-balken i.leer { flex:1; }
.st-w { font-size:11.5px; color:var(--p-mu); text-align:right; }
.st-form { display:flex; gap:4px; }
.st-form i { width:22px; height:22px; border-radius:5px; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:800; color:#fff; }
.st-spalten { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.st-li { display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid var(--p-chip); }
.st-li em { font-style:normal; color:var(--p-mu); }
.st-klein { font-size:11.5px; color:var(--p-mu); margin:6px 0 0; }
.ei-zeile { display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:start; padding:9px 0; border-bottom:1px solid var(--p-chip); }
.ei-zeile > span { font-weight:700; font-size:13px; padding-top:4px; }
.ei-wahl { display:flex; flex-wrap:wrap; gap:4px; }
.ei-wahl button { padding:4px 10px; border-radius:16px; background:var(--p-chip); font-size:12.5px; font-weight:700; }
.ei-wahl button.an { background:var(--ak); color:var(--ak-tx); }
.ei-hinweis { font-size:12px; color:var(--p-mu); margin:10px 0 0; }

#note { position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:30; padding:7px 14px; border-radius:9px;
  background:var(--p-bg); border:1px solid var(--ak); font-size:13.5px; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.5); pointer-events:none; }

#stage.hoch .kb, #stage.hoch .lo-tabs button, #stage.hoch .kb-hw { min-height:38px; }
#stage.hoch .kb-ic { width:42px; height:40px; }
#stage.hoch .k-blaettern button { width:44px; height:38px; }
#stage.hoch .k-schnell button { min-height:36px; }
#stage.hoch .lo-kopf-r .kb { min-height:38px; }
#stage.hoch .vs-liste button, #stage.hoch .ei-wahl button, #stage.hoch .wa-ab { min-height:38px; }
#stage.hoch .kx { width:42px; height:40px; }
.kx svg { width:16px; height:16px; }

#stage.hoch #konsole { gap:5px; padding:8px 10px 6px; }
#stage.hoch .k-blocklabel { display:none; }
#stage.hoch #b-totem { grid-column:auto; }
#stage.hoch .k-zugliste { min-height:30px; }
#stage.hoch .k-ring .rg-t { width:auto; margin-right:4px; }

#brett .neu { animation-duration:var(--fall, .42s); }
.wa-reihe button.vor { border-color:var(--ak); box-shadow:0 0 0 2px var(--ak); }
.wa-reihe button.einzig { background:color-mix(in srgb, var(--ak) 28%, var(--p-chip)); }
.wa-tipp { font-size:11px; color:var(--p-mu); margin-top:5px; }
.k-knoepfe .kb.an { outline:none; border-color:var(--ak); color:var(--ak-schrift); }
#en-zurueck { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:19; display:flex; gap:10px; padding:8px 10px;
  border-radius:14px; background:rgba(0,0,0,.74); box-shadow:0 6px 20px rgba(0,0,0,.55); }
#en-zurueck .kb { min-height:36px; padding:6px 14px; white-space:nowrap; }
#stage:not(.hoch) #en-zurueck { left:276px; }
.lo-breit { grid-column:1 / -1; }
.zl-fehler { text-decoration:underline wavy var(--rot); text-underline-offset:3px; }
.zl-fehler i { font-style:normal; color:var(--rot); font-weight:800; margin-left:1px; }
.rt-erkl { font-size:13px; color:var(--p-mu); line-height:1.45; margin:0 0 10px; }
.rt-tag { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
.rt-tk { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:10px; background:var(--p-zeile); border-left:4px solid var(--ak); }
.rt-tk b { font-family:var(--font-titel); font-size:16px; color:var(--p-rand); }
.rt-tk span { font-size:12px; color:var(--p-mu); }
.rt-tk em { font-style:normal; font-size:13px; font-weight:700; color:var(--ak-schrift); }
.rt-tk .kb { margin-top:4px; min-height:34px; }
.rt-liste { max-height:150px; overflow-y:auto; background:var(--p-zeile); border-radius:10px; padding:6px 10px; font-size:12.5px; }
.rt-liste div { display:grid; grid-template-columns:24px 1fr auto; gap:6px; padding:2px 0; border-bottom:1px solid var(--p-chip); }
.rt-liste div.me { color:var(--ak-schrift); font-weight:700; }
.rt-liste span, .rt-liste em { color:var(--p-mu); font-style:normal; }
.rt-stufe { margin-top:10px; }
.rt-stufe h3 { font-family:var(--font-titel); font-size:14px; margin:0 0 6px; color:var(--p-rand); }
.rt-stufe h3 small { font-family:var(--font-ui); font-size:11px; color:var(--p-mu); font-weight:400; margin-left:6px; }
.rt-nummern { display:grid; grid-template-columns:repeat(10, 1fr); gap:5px; }
.rt-nummern button { min-height:32px; border-radius:8px; background:var(--p-chip); font-weight:700; font-size:13px; border:1px solid color-mix(in srgb, var(--p-rand) 35%, transparent); }
.rt-nummern button:hover { filter:brightness(1.18); }
.rt-nummern button.ok { background:var(--gruen); color:#fff; border-color:transparent; }
.rt-nummern button.hilfe { box-shadow:inset 0 0 0 2px var(--gruen); }
.an-kurve { width:100%; height:auto; display:block; border-radius:10px; overflow:hidden; }
.an-kurve .an-oben { fill:color-mix(in srgb, var(--s1) 14%, var(--p-zeile)); }
.an-kurve .an-unten { fill:color-mix(in srgb, var(--s2) 14%, var(--p-zeile)); }
.an-kurve .an-null { stroke:var(--p-mu); stroke-width:1; stroke-dasharray:4 4; }
.an-kurve .an-flaeche { fill:var(--ak); opacity:.18; }
.an-kurve .an-linie { fill:none; stroke:var(--ak-schrift); stroke-width:2.4; stroke-linejoin:round; }
.an-kurve .an-punkt { fill:var(--rot); stroke:#fff; stroke-width:2; cursor:pointer; }
.an-kurve .an-txt { font-size:11px; fill:var(--p-mu); font-family:var(--font-ui); }
.an-fort { height:8px; border-radius:4px; background:var(--p-zeile); overflow:hidden; margin-top:6px; }
.an-fort i { display:block; height:100%; background:var(--ak); transition:width .2s; }
.an-liste { display:flex; flex-direction:column; gap:5px; max-height:220px; overflow-y:auto; margin-top:8px; }
.an-liste button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:6px 10px; border-radius:8px; background:var(--p-zeile); border-left:4px solid var(--rot); }
.an-liste button b { font-size:13px; }
.an-liste button span { font-size:12px; color:var(--p-mu); }
.an-liste button:hover { filter:brightness(1.15); }
#stage.hoch .rt-tag { grid-template-columns:1fr; }
#stage.hoch .rt-nummern button, #stage.hoch .an-liste button { min-height:40px; }
#stage.hoch #en-zurueck .kb, #stage.hoch .wa-reihe button { min-height:44px; }

@media (pointer: coarse) {
  .kb, .kb-hw, .lo-tabs button, .vs-liste button, .ei-wahl button, .wa-ab, .k-schnell button { min-height:38px; }
  .kb-ic, .kx { min-width:42px; height:40px; }
  .k-blaettern button { width:44px; height:38px; }
  .wa-reihe { gap:8px; }
  .wa-reihe button { min-width:64px; min-height:76px; padding:6px 8px 7px; }
  .wa-tipp { display:none; }
  .rt-nummern button, .an-liste button, #pop-btns button, #ende-btns button, #en-zurueck .kb { min-height:42px; }
}

#brettspalte { padding:4px 0; }
.leiste { height:44px; gap:7px; }
#brettfeld { height:500px; }
#brett { width:496px; height:496px; }
.lname { flex:0 1 auto; max-width:150px; font-size:13.5px; }
.lhand { flex:1; min-width:0; display:flex; align-items:center; gap:2px; overflow:hidden; }
.lhand .hd { position:relative; width:38px; height:40px; flex:none; display:grid; place-items:center; border-radius:7px; touch-action:manipulation; }
.lhand .hd:hover { background:color-mix(in srgb, var(--p-rand) 18%, transparent); }
.lhand .hd.an { background:color-mix(in srgb, var(--ak) 40%, transparent); box-shadow:0 0 0 2px var(--ak); }
.lhand .hd em { position:absolute; right:-1px; bottom:0; min-width:15px; padding:0 3px; border-radius:7px; background:var(--ak); color:var(--ak-tx);
  font:800 11px/15px var(--font-mono); font-style:normal; text-align:center; }
.lhand .hd-leer { font-size:11.5px; color:var(--p-mu); padding-left:4px; white-space:nowrap; }
.lstein { width:22px; height:22px; }
.sstein { display:block; overflow:visible; }
.marke { display:inline-block; vertical-align:-3px; flex:none; }
#brett .st { cursor:pointer; }
#brett .dreh { animation:dreh .45s var(--ease); transform-box:fill-box; transform-origin:center; }
@keyframes dreh { 0% { transform:scaleX(1); } 50% { transform:scaleX(.05); } 100% { transform:scaleX(1); } }
#brett .ziel { animation:puls 1.3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
#brett .tipp { animation:puls 1.3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
#flieger { position:absolute; inset:0; z-index:15; pointer-events:none; overflow:hidden; }
#flieger .flug { position:absolute; left:0; top:0; filter:drop-shadow(4px 8px 6px rgba(0,0,0,.45)); will-change:transform; }
#flieger .flug.zieh { opacity:.92; }
#meldungen { position:absolute; left:50%; top:8px; transform:translateX(-50%); z-index:7; width:440px; display:flex; flex-direction:column; gap:5px; pointer-events:none; }
.meldung { padding:7px 12px; border-radius:10px; background:rgba(12,10,8,.86); border:1px solid var(--p-rand); color:#f6efe0; font-size:13.5px; line-height:1.35;
  box-shadow:0 8px 20px rgba(0,0,0,.5); text-align:center; animation:mein .3s var(--ease); transition:transform .35s, opacity .35s; }
.meldung.weg { transform:translateY(-10px); opacity:0; }
@keyframes mein { from { transform:translateY(-12px); } to { transform:none; } }
#status { height:19px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.k-auftrag { height:68px; overflow:hidden; font-size:14px; line-height:1.3; }
#konsole.lern .k-auftrag { height:132px; }
#stage.hoch #konsole.lern .k-auftrag { height:76px; }
.k-lage { height:46px; overflow:hidden; font-size:11.5px; line-height:1.35; color:var(--p-mu); background:var(--p-zeile); border-radius:7px; padding:3px 8px; }
.k-lage.leer { background:transparent; }
.k-lage b { color:var(--ak-schrift); }
.k-lage b.rot { color:#ff8a7a; }
:root[data-theme="light"] .k-lage b.rot { color:#b02a1c; }
.k-erklaer { height:31px; overflow:hidden; }
.zl-1::before, .zl-2::before { border:1px solid var(--p-mu); }
.ende-stand b.klein { font-family:var(--font-ui); font-size:12px; font-weight:600; text-align:right; }
#ende-stein { align-items:center; }
.wa-reihe button { min-width:92px; }
.wa-reihe button b { font-size:13.5px; }
.lernliste { display:grid; grid-template-columns:1fr 1fr; gap:6px; max-height:420px; overflow-y:auto; }
.ln { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:8px 10px; border-radius:9px; background:var(--p-zeile); border-left:4px solid var(--p-mu); min-height:44px; }
.ln b { font-family:var(--font-titel); font-size:14px; }
.ln span { font-size:12px; color:var(--p-mu); }
.ln em { font-style:normal; font-size:11.5px; font-weight:700; color:var(--gruen); }
.ln.ok { border-left-color:var(--gruen); }
.ln.mini { grid-column:1 / -1; border-left-color:var(--ak); }
.ln:hover { filter:brightness(1.15); }
.lo-kacheln { grid-template-columns:1fr 1fr; }
.zugbild { display:block; margin-top:4px; }
#stage.hoch .k-knoepfe { grid-template-columns:repeat(4, 1fr); }
#stage.hoch #brettspalte { height:600px; }
#stage.hoch .lernliste { grid-template-columns:1fr; }
#stage.hoch #meldungen { width:500px; }
#stage.hoch .lhand .hd { width:42px; height:42px; }
@media (pointer: coarse) {
  .lhand .hd { width:42px; height:42px; }
  .ln { min-height:48px; }
}
#stage.hoch .kb, #stage.hoch .kb-hw { font-size:14px; min-height:44px; }
#stage.hoch .lhand .hd-leer, #stage.hoch .k-modus, #stage.hoch .zl-leer, #stage.hoch .k-blaettern span, #stage.hoch .k-zugliste { font-size:13.5px; }
#stage.hoch .k-lage, #stage.hoch .k-erklaer { font-size:13.5px; }
#stage.hoch .k-lage { height:40px; }
#stage.hoch .k-erklaer { height:20px; white-space:nowrap; text-overflow:ellipsis; }
#stage.hoch .k-auftrag { height:58px; }
#stage.hoch .k-zugliste { min-height:28px; }
#stage.hoch .lname { font-size:15px; }

.zl-kanji { font-family:'Yu Mincho','Hiragino Mincho ProN','Noto Serif CJK JP',serif; font-size:13px; }
.lo-kacheln { grid-template-columns:1fr 1fr; }
#lo-leiter small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.lo-start { flex:1.9 1 0; }
.lo-kachel { padding:6px 12px; gap:3px; overflow:hidden; }
.lo-kachel small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
#lo-leiter small { white-space:normal; }
#kulisse .k-svg, #kulisse .k-bild { position:absolute; inset:0; width:100%; height:100%; }
#kulisse .k-bild { display:block; object-fit:cover; }