:root {
  --font-ui: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-zier: Georgia, 'Times New Roman', serif;

  --con-top:#1f2a1c; --con-mid:#182116; --con-bot:#111810;
  --con-edge:rgba(230,184,74,.42);
  --led-bg:#0c120b; --led-frame:#2b3a24;
  --panel-bg:#101710; --row-bg:#182116; --hair:#2f3f28;
  --slate-800:#1f2b1c; --slate-700:#2b3b26; --slate-600:#41573a; --slate-500:#6c8462; --slate-400:#a9b99d; --slate-300:#d5dfca;
  --n-100:#f7f5e8; --n-200:#ece9d7; --n-300:#d9d6c2; --n-400:#b0ad98; --n-500:#7f7d6a;

  --acc:#e6b84a; --acc-hell:#f7d98a;
  --ich:#2f9e5b; --ich-hell:#7ee0a2; --geg:#3b72c4; --geg-hell:#9cc3f5; --ok:#34d399; --info:#7dd3fc;
  --gefahr:#f43f5e; --gefahr-hell:#fb7185;

  --sh-sm: 0 1px 3px rgba(0,0,0,.35);
  --sh-md: 0 4px 6px -1px rgba(0,0,0,.4);
  --sh-lg: 0 10px 15px -3px rgba(0,0,0,.45);
  --sh-2xl: 0 25px 50px -12px rgba(0,0,0,.6);
  --sh-in: inset 0 2px 4px rgba(0,0,0,.5);
  --ease: cubic-bezier(.4,0,.2,1);
}


:where(html, html *) { scrollbar-width:thin; scrollbar-color:var(--acc) var(--row-bg); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:var(--row-bg); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:var(--acc); border-radius:5px; border:2px solid transparent; background-clip:padding-box; }

* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:#0a0f09; overflow:hidden; touch-action:manipulation; }
body { color:var(--n-100); 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; }
.sgzi { width:1.15em; height:1.15em; vertical-align:-.2em; flex:none; }

#wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
#stage { position:relative; width:1050px; height:700px; flex:none; transform-origin:50% 50%;
  background:#111a0f; border:2px solid var(--slate-700); border-radius:12px; overflow:hidden; box-shadow:var(--sh-2xl); }


#partie { position:absolute; inset:0; display:flex; }
#tisch { width:802px; flex:none; display:flex; flex-direction:column; gap:5px; padding:8px 10px;
  background:linear-gradient(180deg,#24331f 0%,#1a2617 45%,#14200f 100%); }

.leiste { height:28px; flex:none; display:flex; align-items:center; gap:8px; padding:0 9px;
  background:linear-gradient(to bottom,rgba(44,32,23,.95),rgba(22,15,10,.95)); border:1px solid var(--hair); border-radius:6px;
  box-shadow:var(--sh-in); font-family:var(--font-mono); font-size:11px; color:var(--slate-300); }
.leiste.dran { border-color:rgba(224,176,74,.8); box-shadow:0 0 10px rgba(224,176,74,.35), var(--sh-in); }
.lname { font-weight:700; color:var(--n-200); white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.lelo { font-size:11px; color:var(--slate-400); flex:none; }
.lzahl { flex:1; min-width:0; display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.lzahl .gross { font-size:15px; font-weight:900; color:var(--n-100); }
.lzahl .klein { font-size:11px; color:var(--slate-400); letter-spacing:.04em; }
.luhr { flex:none; font-size:14px; font-weight:900; letter-spacing:.06em; color:var(--acc); background:var(--led-bg);
  border:1px solid var(--led-frame); border-radius:4px; padding:1px 7px; box-shadow:var(--sh-in); min-width:58px; text-align:center; }
.luhr.knapp { color:var(--gefahr-hell); border-color:rgba(244,63,94,.7); background:rgba(76,5,25,.6); }
.luhr.aus { color:#b8a68a; }
.luhr.kritisch { animation:uhrblink .5s steps(2) infinite; }
@keyframes uhrblink { 50% { background:rgba(244,63,94,.85); color:#fff; } }

.lzahl .klein b { color:#6ee7b7; } .lzahl .klein b.minus { color:#fb7185; }


.gk { --kw:66px; --kh:96px; position:relative; flex:none; width:var(--kw); height:var(--kh); border-radius:6px; background:#fbf7ee;
  box-shadow:0 2px 5px rgba(0,0,0,.55); transition:transform .18s var(--ease), box-shadow .18s; }







@keyframes hinein { from { transform:translateY(-8px) scale(.97); } to { transform:none; } }
b.kf0 { color:#e7e2d6 !important; } b.kf1 { color:#5fd08c !important; } b.kf2 { color:#ff8b9a !important; } b.kf3 { color:#ffa45c !important; }

@keyframes dranblink { 50% { transform:scale(1.12); } }

@keyframes anrutschen { 0% { transform:translateY(-26px); } 100% { transform:none; } }

.lzahl .geber { padding:0 6px; border-radius:8px; border:1px solid #8a5a32; color:var(--acc-hell); font-size:11px; }
.lzahl .kaest { display:flex; gap:2px; }
.lzahl .kaest i { width:9px; height:9px; border:1.5px solid var(--acc); background:var(--acc); border-radius:2px; }
.lzahl .kaest em { font-style:normal; font-size:11px; color:var(--acc-hell); margin-left:2px; }
.lzahl .gross.zu { color:var(--acc-hell); text-decoration:underline; }

.k-block { background:var(--panel-bg); border:1px solid var(--hair); border-radius:5px; padding:4px 6px; margin-bottom:6px; box-shadow:var(--sh-in); font-size:12px; }
.k-block table { width:100%; border-collapse:collapse; }
.k-block th, .k-block td { padding:2px 4px; text-align:right; color:var(--n-200); white-space:nowrap; }
.k-block th:first-child { text-align:left; color:var(--slate-300); font-weight:600; }
.k-block tr:first-child th { color:var(--acc-hell); font-size:11.5px; max-width:80px; overflow:hidden; text-overflow:ellipsis; }
.k-block td { font:800 14px var(--font-zier); }
.k-block td small { font:600 11px var(--font-ui); color:var(--acc); }
.k-block tr.zu td { color:var(--acc-hell); }
.bl-x { margin-top:2px; font-size:11px; color:var(--slate-400); line-height:1.3; }
.kq { display:inline-block; width:8px; height:8px; margin:0 3px 0 1px; border-radius:2px; background:var(--acc); vertical-align:0; }

#flug { position:absolute; inset:0; pointer-events:none; z-index:40; }
#flug .gk { position:absolute; left:0; top:0; transition:transform .55s var(--ease); will-change:transform; transform-origin:50% 50%; }
.puls { animation:puls .8s var(--ease); }
@keyframes puls { 40% { transform:scale(1.12); box-shadow:0 0 16px rgba(242,194,122,.85); } }

#vorhang { position:absolute; inset:0; z-index:30; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(10,14,24,.97); }
.vh-box { width:330px; padding:18px; border-radius:14px; text-align:center; background:rgba(22,15,10,.95); border:2px solid var(--acc); box-shadow:var(--sh-2xl); }
.vh-box b { display:block; font:800 18px var(--font-zier); color:var(--acc-hell); margin-bottom:6px; }
.vh-box p { margin:0 0 6px; font-size:13px; color:var(--n-300); line-height:1.45; }

#en-zurueck { position:absolute; left:50%; bottom:11px; transform:translateX(-50%); z-index:25; display:flex; gap:8px; padding:6px; border-radius:12px;
  background:rgba(10,14,24,.92); border:1px solid var(--acc); box-shadow:var(--sh-2xl); }
#en-zurueck .kb { padding:6px 12px; white-space:nowrap; }
:root[data-theme="light"] #en-zurueck { background:linear-gradient(to bottom,#f4f6fa,#e2e8f1); color:#1d2536; }

.kinfo { position:absolute; z-index:72; width:300px; pointer-events:none; border-radius:12px; overflow:hidden; color:var(--n-200);
  background:linear-gradient(180deg,#1d2638,#0f1420); border:2px solid var(--acc); box-shadow:0 14px 34px rgba(0,0,0,.6); }
.kinfo .ki-kopf { display:flex; gap:11px; padding:10px; background:linear-gradient(135deg, var(--zf, #3a2c20), rgba(22,15,10,.92)); color:#f3f5fa; }
.kinfo .ki-kopf.kf0 { --zf:#3b3b3b; } .kinfo .ki-kopf.kf1 { --zf:#13793a; } .kinfo .ki-kopf.kf2 { --zf:#a0142c; } .kinfo .ki-kopf.kf3 { --zf:#b84c0c; }
.kinfo .ki-bild { flex:none; width:84px; height:116px; }
.kinfo .ki-bild .gk { --kw:84px; --kh:116px; }
.kinfo .ki-tt { min-width:0; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.kinfo .ki-titel { font:900 20px/1.1 var(--font-zier); color:#f6d896; }
.kinfo .ki-kat { font-size:12.5px; color:#e3e7ef; }
.kinfo .ki-gross { font:900 26px/1 var(--font-zier); color:#fff; margin-top:4px; }
.kinfo .ki-gross small { font:600 12px var(--font-ui); color:#e3e7ef; margin-left:4px; }
.kinfo .ki-zeilen { padding:7px 12px 3px; font-size:12.5px; }
.kinfo .ki-zeilen > div { display:flex; justify-content:space-between; gap:10px; padding:2px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.kinfo .ki-zeilen span { color:var(--slate-400); }
.kinfo .ki-zeilen b { text-align:right; color:var(--n-100); }
.kinfo .ki-regel { margin:4px 12px 8px; font-size:12.5px; line-height:1.4; color:var(--slate-300); }
.kinfo .ki-regel b { color:var(--n-100); }
.kinfo .ki-tipp { margin:0 10px 10px; padding:7px 9px; border-radius:8px; font-size:12.5px; line-height:1.35; color:var(--n-100); background:rgba(111,208,180,.14); border:1px solid rgba(111,208,180,.6); }
.kinfo .ki-tipp b { color:#fff; }
#stage.hoch .kinfo { width:420px; }
#stage.hoch .kinfo .ki-titel { font-size:26px; } #stage.hoch .kinfo .ki-kat, #stage.hoch .kinfo .ki-zeilen { font-size:16px; }
#stage.hoch .kinfo .ki-regel, #stage.hoch .kinfo .ki-tipp { font-size:15.5px; }
:root[data-theme="light"] .kinfo { background:linear-gradient(180deg,#f4f6fa,#e2e8f1); color:#1d2536; }
:root[data-theme="light"] .kinfo .ki-tipp b, :root[data-theme="light"] .kinfo .ki-regel b, :root[data-theme="light"] .kinfo .ki-zeilen b { color:#141a28; }

#stage .kb.an { background:linear-gradient(to bottom,#5e3f08,#332205); }
:root[data-theme="light"] #stage .kb.an { background:linear-gradient(to bottom,#f0d58f,#d9b25a); }


#vorspann { position:absolute; inset:0; z-index:28; display:flex; align-items:center; justify-content:center;
  background:rgba(16,11,7,.88); backdrop-filter:blur(3px); border-radius:10px; }
.vs-box { width:440px; background:linear-gradient(to bottom,#2c2017,#17110b); border:2px solid var(--acc); border-radius:12px; padding:10px 14px;
  text-align:center; box-shadow:var(--sh-2xl); }
.vs-titel { display:block; font-family:var(--font-mono); font-size:12px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; color:var(--acc-hell); margin-bottom:8px; }
.vs-label { display:block; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-300);
  text-align:left; margin:0 0 3px 2px; }
.vs-liste { display:grid; gap:5px; margin-bottom:6px; }
.vs-liste.fuenf { grid-template-columns:repeat(5,minmax(0,1fr)); }
.vs-liste.vier { grid-template-columns:repeat(4,minmax(0,1fr)); }
.vs-liste.zwei { grid-template-columns:repeat(2,minmax(0,1fr)); }
.vs-liste.drei { grid-template-columns:repeat(3,minmax(0,1fr)); }
.vs-liste button { min-width:0; padding:5px 3px; border-radius:8px; background:var(--slate-800); border:1px solid var(--slate-600); color:var(--n-200);
  font-family:var(--font-mono); font-size:11px; font-weight:700; transition:all 140ms var(--ease); text-align:center; }
.vs-liste button:hover { background:var(--slate-700); border-color:var(--info); }
.vs-liste button.ich { background:rgba(2,44,34,.6); border-color:var(--ok); color:#a7f3d0; }
.vs-liste button.gegner { box-shadow:inset 0 0 0 1px var(--acc); }
.vs-liste button:disabled { opacity:.35; cursor:not-allowed; }
.vs-liste button span { display:block; font-size:11px; font-weight:400; color:var(--slate-400); margin-top:1px; white-space:normal; }
.vs-liste button.ich span { color:#6ee7b7; }
.vs-info { margin:2px 0 0; font-size:11.5px; color:var(--slate-300); line-height:1.4; min-height:28px; }
.vs-info b { color:var(--acc-hell); }
.vs-kompakt { display:grid; gap:6px; margin:2px 0 8px; }
.vs-reihe { display:grid; grid-template-columns:60px 1fr; align-items:center; gap:6px; }
.vs-reihe .vs-label { margin:0; }
.vs-reihe .vs-liste { margin:0; }
.vs-farbe { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px; font-size:12px; color:var(--slate-300); }
.vs-farbe b { color:var(--acc-hell); }
.vs-farbe button { padding:5px 10px; border-radius:8px; background:var(--slate-800); border:1px solid var(--slate-600); color:var(--n-200); font-size:11.5px; font-weight:700; }
.vs-farbe button:hover { border-color:var(--info); }
.vs-los { display:block; width:100%; margin-top:8px; padding:9px 14px; border-radius:10px; font-weight:800; font-size:13px; color:#fff;
  background:linear-gradient(90deg,#047857,#0f766e); border:1px solid rgba(52,211,153,.5); box-shadow:var(--sh-lg); cursor:pointer; }
.vs-los:hover { filter:brightness(1.1); }

#konsole { width:244px; flex:none; display:flex; flex-direction:column; padding:8px; min-height:0;
  background:linear-gradient(to bottom,var(--con-top),var(--con-mid),var(--con-bot)); border-left:2px solid var(--con-edge); box-shadow:var(--sh-2xl); }
.k-kopf { text-align:center; margin-bottom:6px; }
.k-logo { display:block; font-family:var(--font-mono); font-size:13px; font-weight:900; letter-spacing:.14em; color:var(--acc-hell); text-shadow:0 0 10px rgba(224,176,74,.35); }
.k-modus { display:block; font-family:var(--font-mono); font-size:11px; color:var(--slate-300); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-regel { display:block; font-family:var(--font-mono); font-size:11px; color:var(--acc); margin-top:1px; }
.k-status { background:var(--led-bg); border:2px solid var(--led-frame); border-radius:5px; padding:5px 8px; font-family:var(--font-mono); font-size:12px;
  font-weight:700; color:var(--acc); text-align:center; box-shadow:var(--sh-in); margin-bottom:6px; min-height:30px; display:flex; align-items:center; justify-content:center; }
.k-status.pflicht { color:var(--gefahr-hell); border-color:rgba(244,63,94,.7); background:rgba(76,5,25,.55); }
.k-status.gruen { color:#6ee7b7; border-color:rgba(52,211,153,.7); background:rgba(2,44,34,.55); }
.k-status.ok { color:var(--ok); }
.k-blocklabel { font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-300); margin:0 0 3px 2px; }
.k-zugliste { flex:1; min-height:0; overflow-y:auto; background:var(--panel-bg); border:1px solid var(--hair); border-radius:5px; padding:4px; box-shadow:var(--sh-in);
  font-size:11.5px; line-height:1.35; }
.zl-leer { color:var(--slate-400); font-size:11px; padding:6px 2px; text-align:center; }
.zl { padding:2px 4px; border-radius:3px; color:var(--n-300); }
.zl:nth-child(odd) { background:var(--row-bg); }
.zl b { color:var(--n-100); }
.zl.kopf { color:var(--acc-hell); font-weight:800; background:rgba(224,176,74,.12); }
.zl.jetzt { outline:1px solid var(--acc); }
.zl.an { color:var(--n-100); }
.k-chat { height:50px; overflow-y:auto; background:var(--panel-bg); border:1px solid var(--hair); border-radius:5px; padding:4px; margin-bottom:3px; font-size:11px;
  line-height:1.35; box-shadow:var(--sh-in); }
#gchattext b { color:var(--info); font-weight:700; }
.k-chatin { width:100%; margin-bottom:5px; background:var(--led-bg); border:1px solid var(--hair); border-radius:4px; padding:4px 6px; font:12px var(--font-mono);
  color:var(--n-100); outline:none; }
.k-chatin:focus { border-color:var(--info); }
.k-schnell { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin:-2px 0 6px; }
.k-schnell button { padding:3px 4px; border-radius:6px; background:var(--slate-800); border:1px solid var(--slate-700); color:var(--slate-300); font-size:11px; font-weight:700; }
.k-schnell button:hover { border-color:var(--info); color:#fff; }
.k-knoepfe { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:5px 0 4px; }
.kb { padding:6px 4px; background:linear-gradient(to bottom,var(--slate-600),var(--slate-800)); border:1px solid rgba(165,151,182,.45); border-radius:5px;
  font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--n-200); box-shadow:var(--sh-md); transition:all 140ms var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.kb:hover { background:linear-gradient(to bottom,var(--slate-500),var(--slate-700)); }
.kb:active { transform:translateY(2px); }
.kb:disabled { opacity:.45; cursor:default; transform:none; }
.kb.an { background:linear-gradient(to bottom,#7a5410,#45300a); border-color:var(--acc); color:var(--acc-hell); }
.kb-rot { background:linear-gradient(to bottom,#9f1239,#4c0519); border-color:rgba(244,63,94,.5); color:#fecdd3; }
.kb-gruen { background:linear-gradient(to bottom,#047857,#065f46) !important; border-color:rgba(52,211,153,.5) !important; color:#fff !important; }
.k-leiste { display:flex; justify-content:space-between; align-items:center; gap:4px; padding-top:5px; border-top:1px solid rgba(165,151,182,.35); }
.kb-hw { padding:4px 8px; background:linear-gradient(to bottom,var(--slate-600),var(--slate-800)); border:1px solid rgba(165,151,182,.5); border-radius:4px;
  font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--n-200); box-shadow:var(--sh-md); }
.k-icons { display:flex; gap:4px; }
.kb-ic { min-width:26px; height:24px; padding:3px 5px; background:var(--slate-700); border:1px solid var(--con-edge); border-radius:4px; color:var(--n-300); font-size:12px;
  line-height:1; box-shadow:var(--sh-sm); display:inline-flex; align-items:center; justify-content:center; }
.kb-ic:hover { background:var(--slate-600); }
.kb-ic.aus { opacity:.45; }
.k-blaettern { display:grid; grid-template-columns:auto auto 1fr auto auto; gap:3px; align-items:center; margin:4px 0 2px; }
.k-blaettern button { padding:2px 7px; border-radius:5px; background:var(--slate-800); border:1px solid var(--slate-700); color:var(--slate-300); font-size:11px; display:inline-flex; align-items:center; }
.k-blaettern span { text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--slate-400); }
.k-nachspiel { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:4px 0; }

.ovl { position:absolute; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:rgba(8,6,4,.84);
  backdrop-filter:blur(6px); padding:20px; animation:auf 180ms var(--ease); }
@keyframes auf { from { transform:scale(.98); } to { transform:none; } }
.karte { width:100%; max-width:400px; background:linear-gradient(to bottom,#2c2017,#17110b); border:2px solid #6b4a1c; border-radius:14px; padding:20px;
  box-shadow:var(--sh-2xl); display:flex; flex-direction:column; align-items:center; text-align:center; max-height:92%; }
.karte-breit { max-width:540px; align-items:stretch; text-align:left; }
#ende-icon { width:58px; height:58px; border-radius:9999px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; border:2px solid; box-shadow:var(--sh-lg); }
#ende-icon .sgzi { width:30px; height:30px; }
#ende-icon.sieg { background:rgba(224,176,74,.18); border-color:var(--acc); color:var(--acc-hell); }
#ende-icon.remis { background:rgba(165,151,182,.2); border-color:var(--slate-400); color:var(--slate-300); }
#ende-icon.pleite { background:rgba(244,63,94,.18); border-color:var(--gefahr); color:var(--gefahr-hell); }
#ende-titel { margin:0; font-family:var(--font-zier); font-size:22px; font-weight:900; letter-spacing:.03em; }
#ende-unter { margin:6px 0 0; font-size:13px; color:var(--n-300); line-height:1.45; }
#ende-btns { width:100%; display:flex; flex-direction:column; gap:7px; margin-top:16px; }
#ende-btns button { width:100%; padding:9px 14px; border-radius:10px; font-weight:700; font-size:13px; }
#ende-btns .haupt { background:linear-gradient(90deg,#047857,#0f766e); color:#fff; box-shadow:var(--sh-lg); }
#ende-btns .neben { background:var(--slate-800); color:var(--n-200); border:1px solid var(--slate-600); }
.ende-stand { margin-top:12px; width:100%; display:flex; justify-content:center; gap:14px; font-family:var(--font-mono); font-size:12px; color:var(--slate-300); }
.ende-stand b { color:var(--acc-hell); }
.kh { display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; border-bottom:1px solid var(--hair); margin-bottom:12px; }
.kh h2 { margin:0; font-family:var(--font-zier); font-size:17px; color:var(--acc); }
.kx { padding:2px 8px; border-radius:6px; color:var(--n-400); font-size:15px; }
.kx:hover { background:var(--slate-800); color:#fff; }
.kb-text { overflow-y:auto; font-size:12.5px; line-height:1.6; color:var(--n-300); padding-right:4px; }
.kb-text h3 { font-family:var(--font-zier); font-size:14px; color:var(--acc); margin:14px 0 4px; }
.kb-text h3:first-child { margin-top:0; }
.kb-text p { margin:0 0 6px; }
.kb-text b { color:var(--n-100); }
.kb-text ul { margin:0 0 6px; padding-left:18px; }
.pop-karte { max-width:360px; }
.pop-karte h2 { margin:0 0 8px; font-family:var(--font-zier); font-size:17px; color:var(--acc); }
.pop-karte p { margin:0; font-size:13px; color:var(--n-300); line-height:1.5; }
#pop-btns { display:flex; gap:8px; margin-top:16px; width:100%; }
#pop-btns button { flex:1; padding:9px 12px; border-radius:9px; font-weight:700; font-size:12px; }
#pop-btns .ja { background:linear-gradient(90deg,#047857,#0f766e); color:#fff; }
#pop-btns .nein { background:var(--slate-800); color:var(--n-200); border:1px solid var(--slate-600); }
.ei-zeile { display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:start; padding:9px 0; border-bottom:1px solid var(--hair); }
.ei-zeile > span { font-family:var(--font-mono); font-size:11.5px; color:var(--slate-300); padding-top:6px; }
.ei-wahl { display:flex; flex-wrap:wrap; gap:6px; }
.ei-wahl button { padding:6px 10px; border-radius:8px; background:var(--slate-800); border:1px solid var(--slate-600); color:var(--n-200); font-size:11.5px; font-weight:700; }
.ei-wahl button.an { background:rgba(224,176,74,.18); border-color:var(--acc); color:var(--acc-hell); }
.ei-hinweis { margin:10px 0 0; font-size:11.5px; color:var(--slate-400); }
#note { position:absolute; left:0; right:0; top:50%; text-align:center; font-family:var(--font-mono); font-size:13px; color:#ddd; z-index:60; }

#lobby { position:absolute; inset:0; display:flex; flex-direction:column; padding:12px 14px;
  background:linear-gradient(rgba(16,11,7,.74),rgba(16,11,7,.9)), #2a1a0f linear-gradient(#24331f,#14200f) center / cover no-repeat; }
.lo-kopf { display:flex; align-items:center; gap:10px; padding-bottom:9px; margin-bottom:10px; border-bottom:1px solid var(--hair); }
.lo-logo { font-family:var(--font-zier); font-size:22px; font-weight:900; letter-spacing:.12em; color:var(--acc-hell); text-shadow:0 0 12px rgba(224,176,74,.35); }
.lo-raum { font-family:var(--font-mono); font-size:11px; color:var(--slate-400); }
.lo-ich { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--slate-300); white-space:nowrap; }
.lo-ich b { color:var(--info); }
.lo-kopf-r { display:flex; align-items:center; gap:5px; margin-left:12px; }
.lo-kopf-r .kb { padding:5px 10px; white-space:nowrap; }
.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:280px; flex:none; display:flex; flex-direction:column; }
.lo-label { font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-300); margin:0 0 4px 2px; }
#chatwin { flex:1 1 0; min-height:90px; overflow-y:auto; background:var(--panel-bg); border:1px solid var(--hair); border-radius:6px; padding:7px 9px;
  box-shadow:var(--sh-in); font-size:12px; line-height:1.45; color:var(--n-300); }
#chattext .nm { color:var(--info); font-weight:700; cursor:pointer; }
#chattext .sys { color:var(--slate-400); font-style:italic; }
#chattext .pm { color:var(--acc-hell); }
#chatin, #pmin { margin-top:7px; background:var(--led-bg); border:1px solid var(--hair); border-radius:5px; padding:7px 9px; font:12px var(--font-mono); color:var(--n-100); outline:none; }
#chatin:focus, #pmin:focus { border-color:var(--info); }
.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; cursor:pointer; }
.lo-kachel b { display:flex; align-items:center; gap:7px; font-size:14px; color:var(--n-100); }
.lo-kachel b i { display:inline-flex; }
.lo-kachel small { font-family:system-ui, sans-serif; font-size:11.5px; font-weight:400; line-height:1.35; color:var(--slate-300); }
.lo-kachel.kb-gruen small { color:#d1fae5; }
#ulist { flex:1; min-height:0; overflow-y:auto; background:var(--panel-bg); border:1px solid var(--hair); border-radius:6px; padding:3px; box-shadow:var(--sh-in); }
.it { display:flex; align-items:center; gap:6px; padding:5px 7px; border-radius:5px; font-family:var(--font-mono); font-size:12px; color:var(--n-200); cursor:pointer; }
.it:hover { background:var(--row-bg); }
.it .elo { margin-left:auto; font-size:11px; color:var(--slate-400); }
.it.me { color:var(--info); cursor:default; }
.it.spielt { color:var(--slate-500); cursor:default; }
.it .pk { width:7px; height:7px; border-radius:9999px; background:var(--ok); flex:none; }
.it.spielt .pk { background:var(--slate-600); }
.it .rang { width:22px; color:var(--acc-hell); font-size:11px; }
.it.live { cursor:pointer; }
.lo-hinweis { margin:6px 2px 0; font-size:11px; color:var(--slate-400); line-height:1.35; }
.lo-tabs { display:flex; gap:3px; margin-bottom:6px; }
.lo-tabs button { flex:1; padding:4px 6px; border-radius:6px; background:var(--slate-800); border:1px solid var(--slate-700); color:var(--slate-300); font-family:var(--font-mono);
  font-size:11px; font-weight:700; }
.lo-tabs button.an { background:rgba(224,176,74,.16); border-color:var(--acc); color:var(--acc-hell); }
.lo-tab { flex:1; min-height:0; display:flex; flex-direction:column; }
.lo-liste { flex:1; min-height:0; overflow-y:auto; background:var(--panel-bg); border:1px solid var(--hair); border-radius:6px; padding:4px; }
#lo-nurchat.an { background:linear-gradient(to bottom,#7a5410,#45300a); border-color:var(--acc); color:var(--acc-hell); }
#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; }

.archiv-liste { display:flex; flex-direction:column; gap:5px; overflow-y:auto; max-height:360px; }
.ar-z { display:grid; grid-template-columns:1fr auto; gap:2px 10px; text-align:left; padding:8px 10px; border-radius:8px; background:var(--slate-800);
  border:1px solid var(--slate-700); border-left:4px solid var(--slate-500); color:var(--n-200); }
.ar-z b { font-size:12px; } .ar-z span { grid-column:1; font-size:11px; color:var(--slate-400); }
.ar-z em { grid-row:1 / span 2; grid-column:2; align-self:center; font-style:normal; font-size:11px; color:var(--slate-400); }
.ar-z.sieg { border-left-color:var(--ok); } .ar-z.nied { border-left-color:var(--gefahr); } .ar-z.rem { border-left-color:var(--slate-400); }
.ar-tabs { margin-bottom:8px; }
.statistik { overflow-y:auto; max-height:380px; padding-right:2px; }
.st-kopf { display:grid; grid-template-columns:repeat(5, 1fr); gap:5px; margin-bottom:8px; }
.st-kopf div { background:var(--slate-800); border:1px solid var(--slate-700); border-radius:8px; padding:7px 4px; text-align:center; }
.st-kopf b { display:block; font:800 16px var(--font-mono); color:var(--acc-hell); }
.st-kopf span { font-size:11px; color:var(--slate-400); }
.st-block { background:rgba(37,27,51,.55); border:1px solid var(--slate-700); border-radius:8px; padding:8px 10px; margin-bottom:7px; }
.st-block h3 { margin:0 0 6px; font-size:12px; color:var(--n-200); }
.st-block h3 small { font-weight:400; color:var(--slate-400); margin-left:4px; }
.st-zeile { display:grid; grid-template-columns:90px 1fr 120px; align-items:center; gap:8px; margin:4px 0; font-size:11px; color:var(--slate-300); }
.st-balken { display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--slate-800); }
.st-balken i { display:block; } .st-balken i.s { background:#22c55e; } .st-balken i.r { background:#a597b6; } .st-balken i.n { background:#ef4444; } .st-balken i.leer { flex:1; }
.st-w { text-align:right; font-family:var(--font-mono); font-size:11px; }
.st-form { display:flex; gap:4px; }
.st-form i { width:22px; height:22px; border-radius:5px; display:flex; align-items:center; justify-content:center; font:800 11px var(--font-mono); font-style:normal; color:#0f172a; }
.st-form i.s { background:#22c55e; } .st-form i.r { background:#a597b6; } .st-form i.n { background:#ef4444; color:#fff; }
.st-klein { margin:6px 0 0; font-size:11px; color:var(--slate-400); }

#stage.hoch { width:440px; height:950px; }
#stage.hoch #partie { flex-direction:column; }
#stage.hoch #tisch { width:auto; height:680px; flex:none; padding:6px 8px; background-image:linear-gradient(#24331f,#14200f); }
#stage.hoch #konsole { width:auto; flex:1; min-height:0; }
#stage.hoch .k-knoepfe { grid-template-columns:repeat(3, 1fr); }
#stage.hoch .k-schnell { grid-template-columns:repeat(4, 1fr); }
#stage.hoch .k-chat { height:60px; }
#stage.hoch .lo-spieler { width:auto; }

:root[data-theme="light"] {
  --con-top:#efe6d6; --con-mid:#e6dcc9; --con-bot:#d8ccb6; --con-edge:rgba(110,70,30,.35);
  --led-bg:#f3ece0; --led-frame:#c9b89c; --panel-bg:#f1eadd; --row-bg:#e8dfcf; --hair:#cdbfa6;
  --slate-800:#e6dccb; --slate-700:#d6c9b3; --slate-600:#b9a789; --slate-500:#7a6a55; --slate-400:#5e5040; --slate-300:#45392c;
  --n-100:#1f160d; --n-200:#2a1f14; --n-300:#3a2d1f; --n-400:#4d3e2e; --n-500:#6a5a47;
  --acc:#8a4a14; --acc-hell:#7a3e0c; --info:#1a5fb4; --ok:#136f37; --gefahr-hell:#b4232f;
}
html[data-theme="light"], html[data-theme="light"] body { background:#ddd2bf; }
:root[data-theme="light"] #stage { background:#e9e4d2; }
:root[data-theme="light"] #tisch { background-color:#e2d5be; background-image:linear-gradient(rgba(244,236,222,.5),rgba(244,236,222,.5)), linear-gradient(#24331f,#14200f); }
:root[data-theme="light"] #stage.hoch #tisch { background-image:linear-gradient(rgba(244,236,222,.5),rgba(244,236,222,.5)), linear-gradient(#24331f,#14200f); }
:root[data-theme="light"] .leiste { background:linear-gradient(to bottom,#f4ede1,#e4d8c4); color:var(--n-300); }
:root[data-theme="light"] .vs-box, :root[data-theme="light"] .karte { background:linear-gradient(to bottom,#f6efe3,#e8dcc8); color:var(--n-200); }
:root[data-theme="light"] .zl.an { color:#1d2536; }
:root[data-theme="light"] .vs-liste button.ich { background:rgba(19,111,55,.15); color:#0f5a2c; }
:root[data-theme="light"] .vs-liste button.ich span { color:#0f5a2c; }
:root[data-theme="light"] #lobby { background:linear-gradient(rgba(244,236,222,.84),rgba(232,222,204,.92)), #e2d5be linear-gradient(#24331f,#14200f) center / cover no-repeat; }
:root[data-theme="light"] .kb { color:var(--n-200); background:linear-gradient(to bottom,#f4ede1,#e0d3bd); border-color:rgba(60,80,120,.35); }
:root[data-theme="light"] .kb.an { background:linear-gradient(to bottom,#f0d58f,#d9b25a); color:#3b2606; }
:root[data-theme="light"] .kb-rot { background:linear-gradient(to bottom,#f3c3c8,#e39aa3); color:#5d0f1a; }
:root[data-theme="light"] .kb-ic, :root[data-theme="light"] .kb-hw { background:#e6dccb; color:#1d2536; }
:root[data-theme="light"] .ovl { background:rgba(110,90,60,.42); }
:root[data-theme="light"] .lo-logo, :root[data-theme="light"] .k-logo { text-shadow:none; }
:root[data-theme="light"] #chattext .sys { color:#3d475b; }
:root[data-theme="light"] #ende-btns .neben, :root[data-theme="light"] #pop-btns .nein { color:#1d2536; }
:root[data-theme="light"] .k-status.gruen { color:#0f5a2c; background:rgba(19,111,55,.12); }
:root[data-theme="light"] .k-status.pflicht { color:#8f1a2b; background:rgba(195,56,74,.12); }
:root[data-theme="light"] .luhr { color:#7a4c06; }
:root[data-theme="light"] .luhr.aus { color:#5a6478; }
:root[data-theme="light"] #vorhang { background-color:rgba(240,232,218,.98); }
:root[data-theme="light"] .k-regel { color:#6b4006; }


:root[data-theme="light"] b.kf0 { color:#1b1b1b !important; } :root[data-theme="light"] b.kf1 { color:#0f6631 !important; }
:root[data-theme="light"] b.kf2 { color:#a00e26 !important; } :root[data-theme="light"] b.kf3 { color:#8a3805 !important; }
:root[data-theme="light"] .k-block td small { color:#8a4a14; }


#stage.hoch .kb, #stage.hoch .vs-farbe button { min-height:38px; }
#stage.hoch .kb-ic { min-width:44px; height:40px; }
#stage.hoch .kb-hw { min-height:38px; min-width:64px; }
#stage.hoch .k-schnell button { min-height:36px; }
@media (pointer: coarse) {
  .kb, .vs-farbe button { min-height:38px; }
  .kb-ic { min-width:44px; height:40px; }
  .kb-hw { min-height:38px; min-width:64px; }
  .k-schnell button { min-height:36px; }
}
.kb-gruen b, .kb-gruen small { color:#fff !important; }
.lo-tabs button { white-space:nowrap; }

.kx { display:inline-flex; align-items:center; justify-content:center; }
.kx .sgzi { width:16px; height:16px; }
#stage.hoch .kx, #stage.hoch .ei-wahl button, #stage.hoch #ende-btns button, #stage.hoch .vs-los, #stage.hoch #pop-btns button { min-height:40px; }
#stage.hoch .kx { min-width:44px; }
@media (pointer: coarse) {
  .kx, .ei-wahl button, #ende-btns button, .vs-los, #pop-btns button { min-height:40px; }
  .kx { min-width:44px; }
}

#einf { position:absolute; inset:0; z-index:26; display:flex; align-items:center; justify-content:center; padding:10px;
  background:rgba(16,11,7,.72); border-radius:10px; }
.ef-box { width:430px; max-height:100%; overflow-y:auto; padding:12px 16px; border-radius:14px; background:linear-gradient(to bottom,#2c2017,#17110b);
  border:2px solid var(--acc); box-shadow:var(--sh-2xl); animation:hinein .3s var(--ease); }
.ef-box > b { display:block; font:800 18px var(--font-zier); color:var(--acc-hell); margin-bottom:6px; text-align:center; }
#ef-text p { margin:0 0 7px; font-size:12.5px; line-height:1.45; color:var(--n-200); }
#ef-text b { color:var(--acc-hell); }
#ef-text .ef-wie { color:#a7f3d0; text-align:center; margin-top:4px; }
.ef-aus { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--slate-300); margin-top:4px; cursor:pointer; }
#ef-aus { width:18px; height:18px; margin:0; accent-color:var(--acc); flex:none; }
#stage.hoch .ef-box { width:auto; }
:root[data-theme="light"] .ef-box { background:linear-gradient(to bottom,#f6efe3,#e8dcc8); }
:root[data-theme="light"] #ef-text p { color:#1d2536; }
:root[data-theme="light"] #ef-text b { color:#6b4006; }
:root[data-theme="light"] #ef-text .ef-wie { color:#0f5a2c; }
:root[data-theme="light"] #einf { background:rgba(110,90,60,.4); }
:root[data-theme="light"] .lo-ich b { color:#0f4a8f; }
.ende-stand { flex-direction:column; align-items:center; gap:6px; text-align:center; line-height:1.5; }
.ende-stand small { font-size:11px; color:var(--slate-400); }

.vs-regeln { display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:12px; color:var(--slate-300); text-align:left; }
.vs-regeln .vs-label { margin:0; flex:none; }
#vs-regeltext { flex:1; min-width:0; color:var(--n-200); }
.vs-regeln button { flex:none; padding:5px 10px; border-radius:8px; background:var(--slate-800); border:1px solid var(--slate-600); color:var(--n-200); font-size:11.5px; font-weight:700; }
.vs-regeln button:hover { border-color:var(--info); }
#vs-regeluebernehmen { border-color:var(--acc); color:var(--acc-hell); }
.hr-knoepfe { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.hr-knoepfe .kb { padding:7px 14px; }
.bl-liste, .ende-liste { display:flex; flex-direction:column; gap:1px; margin-top:4px; font-size:12px; }
.sl-z { display:flex; justify-content:space-between; gap:10px; padding:1px 4px; border-radius:4px; }
.sl-z.me { background:rgba(242,194,122,.16); color:var(--acc-hell); }

.er-liste { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.er-z { display:flex; gap:7px; align-items:flex-start; padding:5px 7px; border-radius:7px; background:var(--slate-800); border:1px solid var(--slate-700); color:var(--slate-400); }
.er-z span { display:flex; flex-direction:column; min-width:0; }
.er-z b { font-size:12px; } .er-z small { font-size:11px; }
.er-z.an { color:var(--n-200); border-color:var(--acc); } .er-z.an .sgzi { color:var(--acc-hell); }
.ei-check { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--n-200); cursor:pointer; }
#ei-atmo { width:18px; height:18px; accent-color:var(--acc); margin:0; flex:none; }
#tisch { position:relative; }
#stage .kb-gruen b.kf0, #stage .kb-gruen b.kf1, #stage .kb-gruen b.kf2, #stage .kb-gruen b.kf3 { color:#fff !important; text-decoration:underline; }
#spruch { position:absolute; left:22px; top:44px; z-index:70; max-width:330px; padding:7px 12px 8px; border-radius:12px; pointer-events:none;
  background:#f6ead2; color:#2a1f14; font-size:13px; line-height:1.35; box-shadow:0 6px 18px rgba(0,0,0,.45); border:1px solid #c9a46a; }
#spruch b { display:block; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#8a5a1c; margin-bottom:1px; }
#spruch::before { content:''; position:absolute; left:22px; top:-7px; width:12px; height:12px; background:#f6ead2; border-left:1px solid #c9a46a; border-top:1px solid #c9a46a; transform:rotate(45deg); }
#spruch.an { animation:spruchRein .28s ease-out; }
@keyframes spruchRein { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
#ende-kurve { margin-top:12px; width:100%; }
.ek-kopf { display:flex; gap:14px; justify-content:center; font-size:11.5px; color:var(--slate-300); margin-bottom:4px; flex-wrap:wrap; }
.ek-kopf i { display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:5px; }
.ek-m1 { background:var(--acc-hell); } .ek-m2 { background:#7dd3fc; }
.ek-svg { width:100%; max-width:360px; height:auto; display:block; margin:0 auto; }
.ek-l1, .ek-l2 { fill:none; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.ek-l1 { stroke:var(--acc-hell); } .ek-l2 { stroke:#7dd3fc; }
.ek-p1 { fill:var(--acc-hell); } .ek-p2 { fill:#7dd3fc; }
.ek-ziel { stroke:var(--slate-400); stroke-dasharray:4 4; stroke-width:1; }
.ek-achse { stroke:var(--slate-600); stroke-width:1; }
.ek-zt { fill:var(--slate-400); font-size:12px; text-anchor:end; font-family:var(--font-mono); }
.ek-rt { fill:var(--slate-400); font-size:9px; text-anchor:middle; font-family:var(--font-mono); }
.ek-tab { margin:6px auto 0; border-collapse:collapse; font-size:11.5px; }
.ek-tab th, .ek-tab td { padding:2px 8px; text-align:center; color:var(--slate-300); }
.ek-tab th:first-child { text-align:left; color:var(--n-200); }
.ek-tab td { color:var(--n-100); font-weight:700; } .ek-tab td small { font-weight:400; color:var(--slate-400); }
.ek-x { margin:4px 0 0; font-size:11px; color:var(--slate-400); text-align:center; }
.lj-leiter { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin:4px 0; }
.lj-leiter i { width:16px; height:2px; background:var(--slate-600); }
.lj { padding:3px 9px; border-radius:12px; font-size:11.5px; border:1px solid var(--slate-600); color:var(--slate-400); }
.lj.an { border-color:var(--acc); color:var(--n-200); }
.lj.jetzt { background:var(--acc); color:#1a1208; font-weight:800; }
:root[data-theme="light"] .ek-l2 { stroke:#1a5fb4; } :root[data-theme="light"] .ek-p2 { fill:#1a5fb4; } :root[data-theme="light"] .ek-m2 { background:#1a5fb4; }
:root[data-theme="light"] .ek-tab td { color:#2a1f14; } :root[data-theme="light"] .ek-tab th:first-child { color:#2a1f14; }
#stage.hoch #spruch { top:44px; left:14px; max-width:300px; }
.ek-tab th, .ek-tab td { white-space:nowrap; }
.st-block h3 small { font-size:11px; }



#spieltisch { position:relative; flex:1; min-height:0; border-radius:10px; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 40% at 18% 8%, rgba(255,236,170,.10), transparent 70%),
    linear-gradient(180deg,#355a2a 0%,#2d4f24 30%,#2a4a22 70%,#22401c 100%);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.45); }
#spieltisch.dran-ich { box-shadow:inset 0 0 0 3px rgba(126,224,162,.75), inset 0 2px 10px rgba(0,0,0,.45); }
#spieltisch.dran-gegner { box-shadow:inset 0 0 0 3px rgba(156,195,245,.55), inset 0 2px 10px rgba(0,0,0,.45); }

#seile { position:absolute; left:6px; right:6px; top:4px; height:404px; display:grid; grid-template-columns:repeat(9, minmax(0,1fr)); gap:4px; }
#seile::before { content:''; position:absolute; left:-6px; right:-6px; top:168px; height:68px; border-radius:30px;
  background:linear-gradient(180deg,#8fd0e6 0%,#5aa8c9 45%,#3d86ab 100%);
  box-shadow:inset 0 6px 12px rgba(255,255,255,.35), inset 0 -8px 14px rgba(0,30,60,.35), 0 3px 8px rgba(0,0,0,.35); }
#seile::after { content:''; position:absolute; left:-6px; right:-6px; top:178px; height:48px; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(100deg, transparent 0 22px, rgba(255,255,255,.55) 22px 24px, transparent 24px 60px); animation:welle 6s linear infinite; }
@keyframes welle { from { background-position:0 0; } to { background-position:120px 0; } }
.seil { position:relative; z-index:1; border-radius:8px; }
.seil::before { content:''; position:absolute; left:50%; top:6px; bottom:6px; width:6px; margin-left:-3px; border-radius:3px; z-index:0;
  background:repeating-linear-gradient(45deg,#d8b67a 0 5px,#a98448 5px 10px); box-shadow:1px 2px 3px rgba(0,0,0,.45); }
.seil.zu::before { opacity:.35; }
.s-g, .s-i { position:absolute; left:0; right:0; height:164px; display:flex; align-items:center; gap:0; z-index:1; border-radius:8px; }
.s-g { top:0; flex-direction:column-reverse; justify-content:flex-start; padding-bottom:4px; }
.s-i { top:240px; flex-direction:column; justify-content:flex-start; padding-top:4px; }
.s-g .pk + .pk { margin-bottom:-6px; } .s-i .pk + .pk { margin-top:-6px; }
.s-m { position:absolute; left:0; right:0; top:164px; height:76px; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.seil.ziel .s-i { background:rgba(126,224,162,.16); box-shadow:inset 0 0 0 2px rgba(126,224,162,.85); cursor:pointer; }
.seil.ziel-mod { background:rgba(247,217,138,.12); box-shadow:inset 0 0 0 2px rgba(247,217,138,.8); cursor:pointer; }
.seil.ziel-g .s-g { background:rgba(126,224,162,.16); box-shadow:inset 0 0 0 2px rgba(126,224,162,.85); cursor:pointer; }
.seil.gewaehlt { box-shadow:0 0 0 2px var(--acc-hell); }
.seil.zuletzt .s-g { background:rgba(156,195,245,.12); }
.ft { position:absolute; left:0; right:0; text-align:center; font:800 11px/1.1 var(--font-ui); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.8); white-space:nowrap; pointer-events:none; }
.ft.o { top:2px; } .ft.u { bottom:2px; }
.ft.voll { color:var(--acc-hell); }
.ft i { font-style:normal; } .ft .kurz { display:none; }
#stage.hoch .ft .lang { display:none; } #stage.hoch .ft .kurz { display:inline; }
.mod { position:absolute; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#f3e6c2; color:#6b3d0c; box-shadow:0 2px 4px rgba(0,0,0,.4); }
.mod.seife { left:2px; } .mod.matsch { right:2px; background:#8a6a3c; color:#f3e6c2; }
.mod .sgzi { width:14px; height:14px; }

.wimpel { position:relative; width:40px; height:40px; padding:0; border-radius:50%; z-index:3; transition:transform .5s var(--ease), box-shadow .3s; }
.wimpel svg { position:absolute; inset:0; width:100%; height:100%; }
.wimpel circle { fill:url(#wg); fill:#e9d8a8; stroke:#6a4a12; stroke-width:2.2; }
.wimpel .wf { fill:#c9a24a; stroke:#5a3a10; stroke-width:1.6; stroke-linejoin:round; }
.wimpel b { position:absolute; right:0; bottom:0; min-width:16px; height:16px; padding:0 3px; border-radius:8px; background:#2a1f14; color:#f7d98a;
  font:800 11px/16px var(--font-ui); }
.wimpel.mein { transform:translateY(26px); } .wimpel.mein circle { fill:var(--ich); stroke:#0f4a28; } .wimpel.mein .wf { fill:#e9f8ee; }
.wimpel.sein { transform:translateY(-26px); } .wimpel.sein circle { fill:var(--geg); stroke:#173d73; } .wimpel.sein .wf { fill:#eef4ff; }
.wimpel.sicher { animation:sicher 1.3s ease-in-out infinite; }
.wimpel.sicher circle { fill:#f7d98a; stroke:#8a5a10; }
@keyframes sicher { 0%,100% { box-shadow:0 0 0 3px rgba(247,217,138,.9), 0 0 10px rgba(247,217,138,.6); } 50% { box-shadow:0 0 0 5px rgba(247,217,138,.5), 0 0 22px rgba(247,217,138,.9); } }
.wimpel.gefahr { box-shadow:0 0 0 3px rgba(156,195,245,.85); }
.wimpel.sel { outline:3px solid #fff; outline-offset:2px; }
.chance { position:absolute; top:-15px; left:50%; transform:translateX(-50%); font:800 11px var(--font-ui); color:#fff; background:rgba(0,0,0,.45);
  padding:0 4px; border-radius:6px; pointer-events:none; white-space:nowrap; }

.pk { --kw:74px; --kh:104px; position:relative; flex:none; width:var(--kw); height:var(--kh); border-radius:8px; overflow:hidden; color:var(--vt,#2a1d0c);
  background:radial-gradient(ellipse 80% 60% at 28% 20%, var(--vh,#f2e6c4) 0%, var(--vf,#d9c48f) 70%);
  border:2px solid rgba(0,0,0,.45); box-shadow:0 3px 7px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .18s var(--ease), box-shadow .18s; }
.pk::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.18;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.4) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); }
.pk .kw { position:absolute; left:4px; top:3px; padding:0 4px; border-radius:5px; background:var(--vf,#d9c48f); color:var(--vt,#2a1d0c); font:900 25px/1 var(--font-zier); z-index:1; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.pk .kz { position:absolute; right:5px; top:5px; z-index:1; }
.pk .kz .sgzi { width:20px; height:20px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.pk .fig { position:absolute; left:50%; bottom:20px; width:56px; height:62px; margin-left:-28px; }
.pk .kn { position:absolute; left:2px; right:2px; bottom:3px; text-align:center; font:700 11px/1.1 var(--font-ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pk.v3 .kw { text-shadow:none; }
.pk.fk { --vf:#e9dcae; --vh:#fbf2d6; color:#4a2408; border-color:#b0802a; }
.pk.fk.fa-mod { --vf:#cfe1b8; --vh:#eef6e0; color:#24400f; border-color:#6e8f3e; }
.pk.fk.fa-list { --vf:#e8c9b8; --vh:#f8e8de; color:#5a1d0c; border-color:#a4553a; }
.pk.fk .kz { left:50%; right:auto; top:24px; margin-left:-17px; }
.pk.fk .kz .sgzi { width:34px; height:34px; }
.pk.fk .kw { font-size:20px; }
.pk.fk .kn { bottom:16px; white-space:normal; line-height:1.05; font-size:11px; }
.pk.fk .ka { position:absolute; left:0; right:0; bottom:3px; text-align:center; font:600 11px var(--font-ui); opacity:.8; text-transform:uppercase; letter-spacing:.05em; }
.pk.rueck { background:repeating-linear-gradient(45deg,#2f6b3a 0 6px,#285c32 6px 12px); border-color:#163b1f; display:flex; align-items:center; justify-content:center; }
.pk.rueck.fest { background:repeating-linear-gradient(45deg,#b5873a 0 6px,#9c7230 6px 12px); border-color:#5a3a10; }
.pk.rueck .rk { width:60%; height:60%; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.15); color:#f2e6c4; }
.pk.rueck .rk .sgzi { width:60%; height:60%; }
.pk.klein { --kw:74px; --kh:36px; border-radius:6px; border-width:1.5px; }
.pk.klein .kw { left:6px; top:3px; font-size:22px; }
.pk.klein .kz { right:6px; top:7px; }
.pk.klein .kz .sgzi { width:19px; height:19px; }
.pk.klein.fk .kz { left:auto; right:6px; top:7px; margin:0; }
.pk.klein.fk .kz .sgzi { width:19px; height:19px; }
.pk.klein.neu { box-shadow:0 0 0 2px #fff, 0 0 12px rgba(255,255,255,.8); }
.pk.klein.wahl { cursor:pointer; box-shadow:0 0 0 2px rgba(126,224,162,.9), 0 3px 7px rgba(0,0,0,.45); }
.pk.klein.sel { box-shadow:0 0 0 3px #fff, 0 0 14px rgba(255,255,255,.9); }
.pk.unterwegs { visibility:hidden; }

#stapelreihe { position:absolute; left:6px; right:6px; top:412px; height:48px; display:flex; align-items:center; gap:6px; }
.stp { position:relative; height:46px; width:78px; flex:none; border-radius:8px; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12); color:var(--n-200); }
.stp .stp-k { position:absolute; left:6px; top:7px; width:22px; height:30px; border-radius:4px; border:1.5px solid #163b1f; box-shadow:2px 2px 0 #1d4a27, 4px 4px 0 #163b1f;
  background:repeating-linear-gradient(45deg,#2f6b3a 0 4px,#285c32 4px 8px); }
.stp.fest .stp-k { border-color:#5a3a10; box-shadow:2px 2px 0 #8a6224, 4px 4px 0 #5a3a10; background:repeating-linear-gradient(45deg,#b5873a 0 4px,#9c7230 4px 8px); }
.stp.abl .stp-k { background:#5b4a35; border-color:#2a1f14; box-shadow:none; transform:rotate(-8deg); }
.stp b { margin-left:26px; font:900 17px var(--font-zier); line-height:1; }
.stp small { margin-left:26px; font-size:11px; color:var(--slate-300); }
.stp.zieh { box-shadow:0 0 0 2px var(--ich-hell), 0 0 12px rgba(126,224,162,.6); cursor:pointer; animation:puls 1.4s ease-in-out infinite; }
.stp:disabled { opacity:.55; }
@keyframes puls { 0%,100% { transform:none; } 50% { transform:translateY(-2px); } }
#auftrag { flex:1; min-width:0; height:46px; display:flex; align-items:center; gap:8px; padding:0 10px; border-radius:8px; overflow:hidden;
  background:rgba(0,0,0,.28); font-size:14px; color:var(--n-200); }
#auftrag .wer { flex:none; font-weight:900; padding:2px 8px; border-radius:6px; }
#auftrag .wer.ich { background:#1f7440; color:#fff; } #auftrag .wer.gegner { background:#2a5aa0; color:#fff; }
#auftrag .was { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#auftrag.blink { animation:blink .9s 2; }
@keyframes blink { 50% { background:rgba(126,224,162,.35); } }
.ib { flex:none; height:34px; padding:0 10px; border-radius:7px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.18); color:var(--n-200); font-weight:700; font-size:12px; }
.ib:disabled { opacity:.45; }
#b-rat { color:var(--acc-hell); border-color:rgba(247,217,138,.5); }
#fragekasten { position:absolute; left:6px; right:6px; top:464px; height:44px; display:flex; align-items:center; gap:6px; overflow:hidden; }
#fragekasten .kb { height:38px; padding:0 12px; font-size:13px; font-weight:800; white-space:nowrap; }
#fragekasten .hinw { min-width:0; font-size:12px; line-height:1.25; color:var(--n-200); overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
#hand { position:absolute; left:6px; right:6px; top:512px; bottom:4px; display:flex; justify-content:center; align-items:center; gap:var(--gap,8px); }
#hand .pk { cursor:pointer; }
#hand .pk.wahl:hover { transform:translateY(-5px); }
#hand .pk.sel { transform:translateY(-12px); box-shadow:0 0 0 3px #fff, 0 10px 18px rgba(0,0,0,.5); }
#hand .pk.zu { filter:saturate(.35) brightness(.75); cursor:default; }
#hand .leer { color:var(--slate-300); font-size:13px; }

#meldungen { position:absolute; left:50%; top:96px; width:540px; margin-left:-270px; z-index:45; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.md { padding:8px 14px; border-radius:10px; background:rgba(22,30,18,.94); color:var(--n-100); font-size:13.5px; line-height:1.4; box-shadow:0 6px 16px rgba(0,0,0,.5);
  border:1px solid rgba(247,217,138,.45); animation:mdRein .25s var(--ease); transition:opacity .5s, transform .5s; }
.md b { color:var(--acc-hell); }
.md.gut { border-color:rgba(126,224,162,.8); } .md.weg { opacity:0; transform:translateY(-6px); }
.md .bw { display:block; margin-top:3px; font-size:12.5px; color:var(--n-300); }
@keyframes mdRein { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

#flug { position:absolute; inset:0; pointer-events:none; z-index:40; }
#flug .pk { position:absolute; left:0; top:0; transition:transform .55s var(--ease); will-change:transform; transform-origin:50% 50%; }
.flugteil { position:absolute; left:0; top:0; transition:transform .7s var(--ease), opacity .7s; }
.platsch { position:absolute; width:70px; height:40px; pointer-events:none; z-index:41; }
.platsch i { position:absolute; left:50%; bottom:0; width:8px; height:8px; border-radius:50%; background:#bfe6f5; animation:spritz .9s ease-out forwards; }
@keyframes spritz { from { transform:translate(-50%,0); opacity:1; } to { transform:translate(calc(-50% + var(--dx)), var(--dy)); opacity:0; } }
.knall { position:absolute; z-index:42; width:80px; text-align:center; font:900 20px var(--font-zier); color:var(--acc-hell); text-shadow:0 2px 4px rgba(0,0,0,.7);
  animation:knall 1s ease-out forwards; pointer-events:none; }
@keyframes knall { from { transform:scale(.6); opacity:0; } 20% { opacity:1; transform:scale(1.15); } to { transform:translateY(-26px); opacity:0; } }

.k-lage { height:118px; overflow-y:auto; background:var(--panel-bg); border:1px solid var(--hair); border-radius:5px; padding:5px 7px; margin-bottom:6px;
  box-shadow:var(--sh-in); font-size:11.5px; line-height:1.35; color:var(--n-300); }
.k-lage b { color:var(--n-100); } .k-lage .lg-t { display:block; font-weight:800; color:var(--acc-hell); margin-bottom:2px; }
.k-lage .ja { color:#7ee0a2; } .k-lage .nein { color:#fda4af; }
.lg-leer { color:var(--slate-400); }
.k-zugliste { font-size:11.5px; }

.li-karten { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-height:340px; overflow-y:auto; padding:4px; }
.lern-l { display:grid; grid-template-columns:1fr 1fr; gap:6px; width:100%; }
.lern-l button { text-align:left; padding:8px 10px; border-radius:8px; background:var(--slate-800); border:1px solid var(--slate-600); color:var(--n-200); }
.lern-l button b { display:block; } .lern-l button small { color:var(--slate-400); font-size:11.5px; }
.lern-l button.ok { border-color:var(--ok); } .lern-l button.ok b::after { content:' – gelöst'; color:var(--ok); font-weight:600; }

html[data-ansicht="regen"] { --con-top:#1c2328; --con-mid:#161c20; --con-bot:#101418; --panel-bg:#0f1418; --row-bg:#161c20; --hair:#2a343b;
  --slate-800:#1d252b; --slate-700:#28323a; --slate-600:#3c4a55; --acc:#c9b27a; --acc-hell:#e8d8a8; }
html[data-ansicht="regen"] #tisch { background:linear-gradient(180deg,#26302f,#1a2222); }
html[data-ansicht="regen"] #spieltisch { background:linear-gradient(180deg,#3b4e40 0%,#334538 50%,#2c3c31 100%); }
html[data-ansicht="regen"] #spieltisch::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:30; opacity:.22;
  background:repeating-linear-gradient(105deg, transparent 0 14px, rgba(220,235,245,.5) 14px 15px, transparent 15px 34px); animation:regen 1.2s linear infinite; }
@keyframes regen { from { background-position:0 0; } to { background-position:-30px 120px; } }
html[data-ansicht="regen"] #seile::before { background:linear-gradient(180deg,#8fa9b5 0%,#5f7f8f 50%,#4a6878 100%); }
html[data-ansicht="abend"] #spieltisch { background:
  radial-gradient(ellipse 70% 22% at 50% 0%, rgba(255,196,110,.22), transparent 70%),
  radial-gradient(ellipse 70% 22% at 50% 100%, rgba(255,170,90,.14), transparent 70%),
  linear-gradient(180deg,#24391d 0%,#1f331a 40%,#1a2d16 100%); }
html[data-ansicht="abend"] #spieltisch::before { content:''; position:absolute; left:0; right:0; top:0; height:14px; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 10px 8px, #ffb24a 0 4px, rgba(255,178,74,.35) 5px, transparent 8px) 0 0 / 46px 14px repeat-x,
  radial-gradient(circle at 33px 8px, #ff6f5a 0 4px, rgba(255,111,90,.35) 5px, transparent 8px) 0 0 / 46px 14px repeat-x;
  border-top:1px solid rgba(255,230,180,.35); }
html[data-ansicht="abend"] #seile::before { background:linear-gradient(180deg,#5e8fa8 0%,#3d6f8c 50%,#2c5672 100%); }
:root[data-theme="light"] #tisch { background:linear-gradient(180deg,#e6e8cf,#d6dcb8); }
:root[data-theme="light"] #spieltisch { background:radial-gradient(ellipse 60% 40% at 18% 8%, rgba(255,250,215,.6), transparent 70%), linear-gradient(180deg,#9cc77a 0%,#8fbd6c 40%,#86b464 100%); }
:root[data-theme="light"] #auftrag, :root[data-theme="light"] .stp, :root[data-theme="light"] .ib { background:rgba(250,246,230,.75); color:#24301c; border-color:rgba(60,80,40,.3); }
:root[data-theme="light"] .stp small { color:#4a5a3a; }
:root[data-theme="light"] #fragekasten .hinw { color:#1f2a16; }
:root[data-theme="light"] #hand .leer { color:#2a3a1c; }
:root[data-theme="light"] .md { background:rgba(248,244,228,.97); color:#1f2a16; border-color:rgba(138,90,16,.45); }
:root[data-theme="light"] .md b { color:#7a3e0c; } :root[data-theme="light"] .md .bw { color:#3a4a2c; }
:root[data-theme="light"] #b-rat { color:#7a3e0c; }
:root[data-theme="light"] .k-lage .ja { color:#0f6631; } :root[data-theme="light"] .k-lage .nein { color:#a00e26; }
:root[data-theme="light"] .lern-l button { background:#e6dccb; color:#1f2a16; }

#stage.hoch #tisch { height:700px; }
#stage.hoch #seile { left:3px; right:3px; height:330px; gap:2px; }
#stage.hoch #seile::before { top:130px; height:70px; }
#stage.hoch #seile::after { top:140px; height:50px; }
#stage.hoch .s-g, #stage.hoch .s-i { height:128px; }
#stage.hoch .s-m { top:128px; height:74px; }
#stage.hoch .s-i { top:202px; }
#stage.hoch .pk.klein { --kw:44px; --kh:30px; }
#stage.hoch .pk.klein .kw { font-size:18px; left:3px; top:3px; }
#stage.hoch .pk.klein .kz { right:2px; top:8px; } #stage.hoch .pk.klein .kz .sgzi { width:14px; height:14px; }
#stage.hoch .s-g .pk + .pk { margin-bottom:-4px; } #stage.hoch .s-i .pk + .pk { margin-top:-4px; }
#stage.hoch .wimpel { width:42px; height:42px; }
#stage.hoch .wimpel.mein { transform:translateY(24px); } #stage.hoch .wimpel.sein { transform:translateY(-24px); }
#stage.hoch .ft { font-size:10px; }
#stage.hoch .mod { width:18px; height:18px; margin-top:-9px; }
#stage.hoch #stapelreihe { top:336px; height:52px; gap:4px; flex-wrap:nowrap; }
#stage.hoch .stp { width:56px; height:48px; }
#stage.hoch .stp b { margin-left:24px; font-size:15px; } #stage.hoch .stp small { display:none; }
#stage.hoch #auftrag { height:48px; font-size:14px; line-height:1.1; padding:0 6px; }
#stage.hoch #auftrag .was { white-space:normal; line-height:1.15; }
#stage.hoch .ib { height:44px; padding:0 8px; }
#stage.hoch #b-kurz { display:none; }
#stage.hoch #fragekasten { top:392px; height:64px; flex-wrap:wrap; gap:4px; align-content:center; }
#stage.hoch #fragekasten .kb { height:42px; font-size:13px; max-width:210px; overflow:hidden; text-overflow:ellipsis; }
#stage.hoch #fragekasten .hinw { font-size:13px; }
#stage.hoch #hand { top:460px; }
#stage.hoch #hand .pk { --kw:60px; --kh:88px; }
#stage.hoch #hand .pk .kw { font-size:22px; } #stage.hoch #hand .pk .fig { width:48px; height:56px; margin-left:-24px; bottom:6px; }
#stage.hoch #hand .pk .kn { display:none; }
#stage.hoch #hand .pk.fk .kz .sgzi { width:26px; height:26px; } #stage.hoch #hand .pk.fk .kz { margin-left:-13px; top:22px; }
#stage.hoch #meldungen { width:420px; margin-left:-210px; top:60px; }
#stage.hoch .k-lage { height:96px; }
#stage.hoch .lern-l { grid-template-columns:1fr; }
@media (pointer: coarse) { .ib { min-height:40px; } .stp { min-height:44px; } }

.pk * { pointer-events:none; }
.wimpel svg, .wimpel b { pointer-events:none; }
#stage.hoch #tisch { height:630px; }
#stage.hoch #seile { height:300px; }
#stage.hoch #seile::before { top:114px; height:72px; } #stage.hoch #seile::after { top:124px; height:52px; }
#stage.hoch .s-g, #stage.hoch .s-i { height:112px; }
#stage.hoch .s-m { top:112px; height:76px; }
#stage.hoch .s-i { top:188px; }
#stage.hoch .wimpel { width:48px; height:48px; margin:0 -2px; }
#stage.hoch .wimpel.mein { transform:translateY(22px); } #stage.hoch .wimpel.sein { transform:translateY(-22px); }
#stage.hoch .ft { font-size:11px; }
#stage.hoch #stapelreihe { top:304px; height:50px; }
#stage.hoch #fragekasten { top:358px; height:62px; }
#stage.hoch #fragekasten .kb { height:48px; }
#stage.hoch #hand { top:424px; }
#stage.hoch .ib { min-width:50px; height:48px; }
#stage.hoch .stp { height:50px; }
#stage.hoch .pk .kn { font-size:11px; }
#stage.hoch #konsole { padding:6px 8px; }
#stage.hoch #k-stand-l, #stage.hoch #block { display:none; }
#stage.hoch .k-lage { height:84px; font-size:12px; }
#stage.hoch .k-zugliste { min-height:44px; }
#stage.hoch .k-knoepfe { grid-template-columns:repeat(3, 1fr); }
#stage.hoch .k-knoepfe .kb, #stage.hoch .kb-hw { min-height:48px; }
#stage.hoch .kb-ic { min-width:48px; height:48px; }
#stage.hoch .vs-liste button, #stage.hoch .vs-farbe button, #stage.hoch .vs-los, #stage.hoch .vs-uebern { min-height:48px; }
#stage.hoch .lo-tabs button, #stage.hoch .lo-kopf .kb, #stage.hoch .lo-kopf .kb-ic { min-height:48px; min-width:48px; }
#stage.hoch #chatin, #stage.hoch #pmin, #stage.hoch .k-chatin { min-height:48px; font-size:16px; }
#stage.hoch .lo-kachel { min-height:56px; }
.pk .kn { background:var(--vf,#d9c48f); color:var(--vt,#2a1d0c); border-radius:4px; margin:0 3px; padding:0 2px; left:3px; right:3px; }
.pk.fk .kn { background:none; }

:root[data-theme="light"] .lo-kopf-r .kb { color:#2a1f14; }
#vorspann, #einf { border-radius:10px; }
#stage.hoch #vorspann .vs-box { width:420px; max-height:930px; overflow-y:auto; }
#stage.hoch #einf .ef-box { width:420px; }
:root[data-theme="light"] .lo-kopf-r .kb { background:#efe6d6 !important; color:#2a1f14 !important; }
:root[data-theme="light"] .ft { color:#1f2a16; text-shadow:0 0 3px rgba(250,246,230,.9); }
:root[data-theme="light"] .ft.voll { color:#6b3a08; }
.seil .pk.klein { pointer-events:none; } .seil .pk.klein.wahl { pointer-events:auto; }
.seil.zu .ft { display:none; }
.stp.fest { width:92px; }

.ft .ch { font:900 12px var(--font-ui); color:#fff; background:rgba(0,0,0,.5); padding:0 5px; border-radius:7px; }
.ft .ch.plus { background:#1f7440; } .ft .ch.minus { background:#8f2a2a; }
#rundentafel { position:absolute; inset:0; z-index:44; display:flex; align-items:center; justify-content:center; background:rgba(10,16,10,.55); border-radius:10px; }
.rt-box { width:400px; max-width:calc(100% - 20px); padding:14px 16px; border-radius:14px; background:linear-gradient(to bottom,#26361f,#152012); border:2px solid var(--acc);
  box-shadow:var(--sh-2xl); color:var(--n-200); font-size:13.5px; line-height:1.45; text-align:center; }
.rt-titel { display:block; font:800 19px var(--font-zier); color:var(--acc-hell); margin-bottom:6px; }
.rt-tab { margin:8px auto; border-collapse:collapse; font-size:13px; }
.rt-tab th, .rt-tab td { padding:3px 10px; border-bottom:1px solid var(--hair); }
.rt-tab tr.sum th, .rt-tab tr.sum td { font-weight:900; color:var(--acc-hell); border-bottom:0; }
.rt-box small { display:block; color:var(--slate-300); font-size:12px; margin-bottom:6px; }
:root[data-theme="light"] .rt-box { background:linear-gradient(to bottom,#f6efe3,#e6dcc8); color:#1f2a16; }
:root[data-theme="light"] .rt-box small { color:#3a4a2c; }
.et-seile { display:flex !important; flex-wrap:wrap; gap:4px; justify-content:center; margin-top:6px; }
.et-seile i { font-style:normal; min-width:42px; padding:2px 5px; border-radius:7px; background:var(--slate-800); border:1px solid var(--slate-600); font-size:12px; color:var(--n-200); }
.et-seile i b { margin-right:3px; color:var(--slate-300); }
.et-seile i.ich { background:#1f7440; border-color:#2f9e5b; color:#fff; } .et-seile i.geg { background:#2a5aa0; border-color:#3b72c4; color:#fff; }
.et-seile i.ich b, .et-seile i.geg b { color:#e8f4ec; }
.ki-mann { display:flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; }
.ki-mann .pk.klein { --kw:76px; --kh:30px; pointer-events:none; }
.bl-x.rang { color:var(--acc-hell); font-weight:700; }

#kulisse { background-image:url('img/abend-q.webp?v=1'); }
#stage.hoch #kulisse { background-image:url('img/abend-h.webp?v=1'); }
html[data-ansicht="wiese"] #kulisse { background-image:url('img/wiese-q.webp?v=1'); }
html[data-ansicht="wiese"] #stage.hoch #kulisse { background-image:url('img/wiese-h.webp?v=1'); }
html[data-ansicht="regen"] #kulisse { background-image:url('img/regen-q.webp?v=1'); }
html[data-ansicht="regen"] #stage.hoch #kulisse { background-image:url('img/regen-h.webp?v=1'); }
#stage { --tisch-kante:#5a4026; --tisch-kante-hell:#8a6a3a; }
#stage #spieltisch.ort-tisch { background:radial-gradient(ellipse 70% 22% at 50% 0%, rgba(255,196,110,.2), transparent 70%), linear-gradient(rgba(16,30,12,.5), rgba(12,24,9,.6)), url('img/abend-wiese.webp?v=1') center / cover, #24391d; }
html[data-ansicht="regen"] #stage #spieltisch.ort-tisch { background:linear-gradient(rgba(22,32,30,.45), rgba(18,28,26,.55)), url('img/regen-wiese.webp?v=1') center / cover, #2c3c31; }
:root[data-theme="light"] #stage #spieltisch.ort-tisch { background:radial-gradient(ellipse 60% 40% at 18% 8%, rgba(255,250,215,.35), transparent 70%), linear-gradient(rgba(180,215,140,.38), rgba(160,200,120,.42)), url('img/wiese-wiese.webp?v=1') center / cover, #8fbd6c; }
#stage #spieltisch.ort-tisch.dran-ich { box-shadow:inset 0 0 0 3px rgba(126,224,162,.8), 0 0 0 5px var(--tisch-kante), 0 0 0 6px rgba(0,0,0,.5), 0 20px 36px rgba(0,0,0,.55); }
#stage #spieltisch.ort-tisch.dran-gegner { box-shadow:inset 0 0 0 3px rgba(156,195,245,.65), 0 0 0 5px var(--tisch-kante), 0 0 0 6px rgba(0,0,0,.5), 0 20px 36px rgba(0,0,0,.55); }
:root[data-theme="light"] #stage #spieltisch.ort-tisch.dran-ich { box-shadow:inset 0 0 0 3px rgba(40,140,80,.75), 0 0 0 5px var(--tisch-kante-hell), 0 18px 32px rgba(60,40,20,.35); }
:root[data-theme="light"] #stage #spieltisch.ort-tisch.dran-gegner { box-shadow:inset 0 0 0 3px rgba(60,110,190,.6), 0 0 0 5px var(--tisch-kante-hell), 0 18px 32px rgba(60,40,20,.35); }