:root {
  --font-ui: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-k: Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --buehne-a:#4a1c1a; --buehne-b:#160707;
  --vorhang-a:#8d1c20; --vorhang-b:#5c0e12;
  --gold:#d9aa4c; --gold-hell:#f3d48a; --gold-dunkel:#8c6420;
  --kon-a:#3a1714; --kon-b:#1d0b09; --kon-rand:#7a4a2c;
  --feld:#2a1210; --feld-rand:#6b3a2c; --text:#f4e6d2; --text-2:#d9c3a8; --text-3:#a8907a;
  --brett-a:#6a2a18; --brett-b:#3e160c; --linie:#d9aa4c; --fluss:#2f6f6a; --welle:#bfe3d8;
  --ok:#7fd8a4; --gefahr:#ff7b6b; --dran:#ffd36a; --gegner:#7fb4ff;
  --knopf-a:#f3d48a; --knopf-b:#d9aa4c; --knopf-text:#2a1608;
  --sh-lg:0 10px 18px -4px rgba(0,0,0,.55); --sh-in:inset 0 2px 4px rgba(0,0,0,.5);
  --ease:cubic-bezier(.4,0,.2,1);
}
html[data-ansicht="probe"] {
  --buehne-a:#efe2c8; --buehne-b:#d9c6a2; --vorhang-a:#b8423c; --vorhang-b:#93302b;
  --gold:#9b6a1e; --gold-hell:#7a4f10; --gold-dunkel:#c9a46a;
  --kon-a:#f6efe1; --kon-b:#eadfc8; --kon-rand:#c9ad84;
  --feld:#fbf6ea; --feld-rand:#d4bf9c; --text:#2b1a10; --text-2:#5a4330; --text-3:#66503e;
  --brett-a:#f0dfba; --brett-b:#e2c995; --linie:#7a2418; --fluss:#9cc9c0; --welle:#3f7d74;
  --ok:#1f7a4a; --gefahr:#b3261e; --dran:#b07a10; --gegner:#2d5fa8;
  --knopf-a:#f0dcaa; --knopf-b:#ddb977; --knopf-text:#2a1608;
}
html[data-ansicht="probe"] .kb:not(.kb-gruen):not(.kb-rot) { background:var(--feld); }
html[data-ansicht="lack"] {
  --buehne-a:#2a2018; --buehne-b:#120d08; --vorhang-a:#3b2c1f; --vorhang-b:#2a1f16;
  --kon-a:#2b2118; --kon-b:#16100b; --kon-rand:#6b5136;
  --brett-a:#e2bf7e; --brett-b:#c99d58; --linie:#3a2210; --fluss:#c6a160; --welle:#6b4a22;
}

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

* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:#0a0404; overflow:hidden; touch-action:manipulation; }
html[data-ansicht="probe"], html[data-ansicht="probe"] body { background:#d8c8aa; }
body { color:var(--text); 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 { font:inherit; }
i[data-ic] { display:inline-flex; width:1.15em; height:1.15em; vertical-align:-.2em; margin-right:.35em; }
i[data-ic] svg, .kb-ic svg { width:100%; height:100%; }

#wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
#stage { position:relative; width:960px; height:680px; flex:none; transform-origin:50% 50%; overflow:hidden; border-radius:12px;
  background:radial-gradient(ellipse at 38% 30%, var(--buehne-a) 0%, var(--buehne-b) 100%);
  border:2px solid var(--gold-dunkel); box-shadow:0 25px 50px -12px rgba(0,0,0,.7); }

#partie { position:absolute; inset:0; display:flex; }
#brettspalte { position:relative; width:620px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px 12px; }
#brettspalte::before, #brettspalte::after { content:''; position:absolute; top:0; bottom:0; width:26px; pointer-events:none;
  background:repeating-linear-gradient(90deg, var(--vorhang-a) 0 9px, var(--vorhang-b) 9px 15px, var(--vorhang-a) 15px 20px);
  box-shadow:inset 0 0 18px rgba(0,0,0,.55); }
#brettspalte::before { left:0; border-radius:0 0 26px 0; } #brettspalte::after { right:0; border-radius:0 0 0 26px; }

.leiste { position:relative; z-index:2; width:540px; height:34px; flex:none; display:flex; align-items:center; gap:8px; padding:0 10px;
  background:linear-gradient(to bottom, var(--kon-a), var(--kon-b)); border:1px solid var(--kon-rand); border-radius:8px;
  box-shadow:var(--sh-in); font-size:13px; color:var(--text-2); }
.leiste.dran { border-color:var(--dran); box-shadow:0 0 10px rgba(255,211,106,.35), var(--sh-in); }
.lfarbe { width:16px; height:16px; border-radius:50%; flex:none; border:2px solid #c8963a; background:radial-gradient(circle at 35% 30%, #fbf0d6, #d9b980); }
.lfarbe.s { border-color:#a7adb5; background:radial-gradient(circle at 35% 30%, #5a4c44, #1d1714); }
.lname { font-weight:700; color:var(--text); white-space:nowrap; max-width:190px; overflow:hidden; text-overflow:ellipsis; }
.lelo { font-size:11.5px; color:var(--text-3); flex:none; font-variant-numeric:tabular-nums; }
.lschlag { flex:1; min-width:0; height:24px; display:flex; align-items:center; gap:1px; overflow:hidden; }
.lschlag .mini { width:20px; height:20px; flex:none; display:block; }
.lschlag .mini svg { width:100%; height:100%; display:block; }
.lschlag .plus { font-size:12px; color:var(--gold-hell); font-weight:700; margin-left:4px; }
.luhr { flex:none; min-width:64px; text-align:center; font:800 16px var(--font-mono); font-variant-numeric:tabular-nums; color:var(--gold-hell);
  background:rgba(0,0,0,.55); border:1px solid var(--gold-dunkel); border-radius:6px; padding:2px 7px; box-shadow:var(--sh-in); }
html[data-ansicht="probe"] .luhr { background:#fffaf0; }
.luhr.knapp { color:#ffb4a8; border-color:#ff7b6b; background:rgba(110,10,10,.65); }
.luhr.kritisch { animation:pochen .9s ease-in-out infinite; }
.luhr.aus { color:var(--text-3); }

#brettrahmen { position:relative; z-index:1; width:530px; height:584px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:16px; padding:6px; background:linear-gradient(145deg, var(--gold-hell), var(--gold-dunkel)); box-shadow:var(--sh-lg); }
#brettrahmen::before { content:''; position:absolute; inset:-5px; border-radius:20px; pointer-events:none; border:3px solid transparent; transition:border-color .3s, box-shadow .3s; }
#brettrahmen.dran-ich::before { border-color:#3fbf6a; box-shadow:0 0 14px rgba(63,191,106,.55); }
#brettrahmen.dran-gegner::before { border-color:#3f7fd8; box-shadow:0 0 12px rgba(63,127,216,.45); }
#brett { position:relative; width:518px; height:572px; border-radius:11px; overflow:hidden; touch-action:none;
  background:linear-gradient(to bottom, var(--brett-a), var(--brett-b)); box-shadow:inset 0 0 40px rgba(0,0,0,.45); }
#linien { position:absolute; inset:0; width:100%; height:100%; display:block; }
#punkte, #flugebene { position:absolute; inset:0; }
#flugebene { pointer-events:none; z-index:6; }

.pt { position:absolute; width:10.87%; height:9.8%; transform:translate(-50%, -50%); display:flex; align-items:center; justify-content:center; }
.pt .st { width:88%; aspect-ratio:1; position:relative; z-index:2; transition:transform 120ms var(--ease); filter:drop-shadow(1px 2px 2px rgba(0,0,0,.35)); }
.pt .st svg { width:100%; height:100%; display:block; }
.pt.klickbar { cursor:pointer; }
.pt.gewaehlt .st { transform:translateY(-4px) scale(1.06); filter:drop-shadow(2px 7px 5px rgba(0,0,0,.45)); }
.pt.gewaehlt::before { content:''; position:absolute; width:96%; aspect-ratio:1; border-radius:50%; box-shadow:0 0 0 3px var(--dran), 0 0 14px rgba(255,211,106,.8); z-index:1; }
.pt.letzter::after { content:''; position:absolute; width:98%; aspect-ratio:1; border-radius:50%; border:2px dashed rgba(255,211,106,.75); z-index:1; pointer-events:none; }
.pt.schach .st { animation:schachpuls 1s ease-in-out infinite; }
@keyframes schachpuls { 0%,100% { filter:drop-shadow(0 0 0 rgba(255,60,40,0)); } 50% { filter:drop-shadow(0 0 10px rgba(255,60,40,.95)); } }
.pt .ziel { position:absolute; z-index:3; pointer-events:none; border-radius:50%; }
.pt .ziel.leer { width:26%; aspect-ratio:1; background:rgba(127,216,164,.85); box-shadow:0 0 0 2px rgba(0,0,0,.35); }
.pt .ziel.schlag { width:96%; aspect-ratio:1; border:4px solid rgba(255,123,107,.9); }
.pt .ziel.vor { width:24%; aspect-ratio:1; background:rgba(127,180,255,.8); }
.pt .sperre { position:absolute; z-index:3; width:30%; aspect-ratio:1; border-radius:50%; background:rgba(150,40,30,.85); pointer-events:none;
  display:flex; align-items:center; justify-content:center; }
.pt .sperre::before, .pt .sperre::after { content:''; position:absolute; width:70%; height:2.5px; background:#fff; border-radius:2px; transform:rotate(45deg); }
.pt .sperre::after { transform:rotate(-45deg); }
.pt.blocker::after { content:''; position:absolute; width:100%; aspect-ratio:1; border-radius:50%; border:3px dashed #ff7b6b; z-index:4; pointer-events:none; }
.pt.angreifer::after { content:''; position:absolute; width:104%; aspect-ratio:1; border-radius:50%; border:3px solid #ff5a45; box-shadow:0 0 12px rgba(255,90,69,.8); z-index:4; pointer-events:none; animation:pochen 1s ease-in-out infinite; }
.pt.gefahr::before { content:''; position:absolute; width:100%; aspect-ratio:1; border-radius:50%; box-shadow:0 0 0 3px #ff9d2e, 0 0 12px rgba(255,157,46,.85); z-index:1; animation:pochen 1.4s ease-in-out infinite; }
.pt .ziel.leer.riskant { background:rgba(255,157,46,.95); }
.pt .ziel.schlag.riskant { border-color:rgba(255,157,46,.95); }
.riskant-hinweis { color:#ff9d2e; font-weight:700; }
html[data-ansicht="probe"] .riskant-hinweis { color:#b4590a; }
.pt.rat-von::before, .pt.rat-nach::before { content:''; position:absolute; width:100%; aspect-ratio:1; border-radius:50%; box-shadow:0 0 0 3px #7fd8a4, 0 0 14px rgba(127,216,164,.9); z-index:1; }

.flieger { position:absolute; transform:translate(-50%, -50%); pointer-events:none; transition:left .34s var(--ease), top .34s var(--ease); z-index:7; }
.flieger .st { width:100%; height:100%; filter:drop-shadow(3px 9px 6px rgba(0,0,0,.5)); }
.flieger .st svg { width:100%; height:100%; display:block; }
.abgang { position:absolute; transform:translate(-50%, -50%); pointer-events:none; z-index:5; }
.abgang.los { animation:verbeugung .8s var(--ease) forwards; }
.abgang svg { width:100%; height:100%; display:block; }
@keyframes verbeugung { 0% { opacity:1; transform:translate(-50%,-50%) rotate(0) scale(1); } 40% { opacity:1; transform:translate(-50%,-38%) rotate(-12deg) scale(.95); }
  100% { opacity:0; transform:translate(-50%,-10%) rotate(-24deg) scale(.6); } }

#meldungen { position:absolute; left:18px; right:18px; top:44%; z-index:8; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
.meldung { max-width:440px; padding:9px 14px; border-radius:10px; background:rgba(28,10,8,.93); border:1px solid var(--gold); color:#ffe6a8;
  font-size:15px; line-height:1.35; text-align:center; box-shadow:0 8px 22px rgba(0,0,0,.55); animation:mein .25s var(--ease); }
.meldung.warn { border-color:#ff7b6b; color:#ffd4cc; }
.meldung.ok { border-color:#7fd8a4; color:#d8ffe6; }
.meldung.weg { opacity:0; transition:opacity .5s; }
@keyframes mein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.ziehgeist { position:fixed; z-index:9999; pointer-events:none; transform:translate(-50%, -60%); filter:drop-shadow(3px 10px 7px rgba(0,0,0,.5)); }
.ziehgeist svg { width:100%; height:100%; display:block; }
.pt.zieht .st { opacity:.3; }

#zeitwahl { position:absolute; inset:6px; z-index:10; display:flex; align-items:center; justify-content:center; border-radius:12px;
  background:rgba(14,5,4,.82); backdrop-filter:blur(3px); }
html[data-ansicht="probe"] #zeitwahl { background:rgba(240,228,206,.86); }
.uw-box { width:470px; max-height:96%; overflow-y:auto; background:linear-gradient(to bottom, var(--kon-a), var(--kon-b)); border:2px solid var(--gold);
  border-radius:14px; padding:12px 14px; text-align:center; box-shadow:0 20px 40px rgba(0,0,0,.6); }
.uw-titel { display:block; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); margin:6px 0 6px; }
.zw-gegner, .zw-liste { display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; }
.zw-liste.fuenf { grid-template-columns:repeat(5, 1fr); }
.zw-gegner button, .zw-liste button, .zw-einsatz-liste button { min-height:44px; padding:5px 3px; border-radius:8px; background:var(--feld); border:1px solid var(--feld-rand);
  font-size:13.5px; font-weight:700; color:var(--text); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.15; }
.zw-gegner button span, .zw-liste button span { font-size:11.5px; font-weight:400; color:var(--text-3); }
.zw-gegner button.ich, .zw-liste button.ich, .zw-einsatz-liste button.ich { border-color:var(--dran); box-shadow:0 0 0 2px var(--dran) inset; }
.zw-liste button.gegner, .zw-einsatz-liste button.gegner { outline:2px dashed var(--gegner); outline-offset:-5px; }
.zw-einsatz-liste button:disabled { opacity:.4; cursor:default; }
.zw-einsatz { display:flex; align-items:center; gap:8px; margin-top:6px; text-align:left; }
.zw-einsatz > span { width:104px; flex:none; font-size:12.5px; color:var(--text-2); }
.zw-einsatz-liste { flex:1; display:flex; gap:4px; }
.zw-einsatz-liste button { flex:1; min-height:40px; font-size:12.5px; }
.zw-info { height:52px; margin:8px 0 4px; font-size:13px; line-height:1.35; color:var(--text-2); overflow:hidden; }
.zw-unten { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.zw-farbe { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2); }
.zw-farbe button { min-height:40px; padding:4px 10px; border-radius:8px; background:var(--feld); border:1px solid var(--feld-rand); color:var(--text); font-size:12.5px; }
.zw-los { min-height:44px; padding:6px 20px; border-radius:10px; font-weight:800; font-size:15px; color:var(--knopf-text); background:linear-gradient(to bottom, var(--knopf-a), var(--knopf-b)); box-shadow:var(--sh-lg); }

#en-zurueck { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:9; display:flex; gap:8px; padding:6px; border-radius:12px;
  background:rgba(20,8,6,.88); border:1px solid var(--gold); }
#en-zurueck .kb { min-height:44px; padding:6px 14px; font-size:13.5px; }

#konsole { width:336px; flex:none; display:flex; flex-direction:column; padding:10px; gap:0;
  background:linear-gradient(to bottom, var(--kon-a), var(--kon-b)); border-left:2px solid var(--kon-rand); }
.k-kopf { text-align:center; margin-bottom:6px; }
.k-logo { display:block; font:800 17px var(--font-k); letter-spacing:.12em; color:var(--gold-hell); text-shadow:0 1px 0 rgba(0,0,0,.5); }
.k-modus { display:block; height:17px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; color:var(--text-2); margin-top:2px; }
.k-status { height:38px; flex:none; display:flex; align-items:center; justify-content:center; padding:4px 8px; overflow:hidden;
  background:rgba(0,0,0,.45); border:2px solid var(--gold-dunkel); border-radius:8px; font-weight:800; font-size:15px; color:var(--gold-hell); text-align:center; box-shadow:var(--sh-in); }
html[data-ansicht="probe"] .k-status { background:#fffaf0; }
.k-status.schach { color:#ffb4a8; border-color:#ff7b6b; background:rgba(110,10,10,.6); animation:pochen 1.1s ease-in-out infinite; }
.k-status.ok { color:var(--ok); }
@keyframes pochen { 0%,100% { opacity:1; } 50% { opacity:.6; } }
.k-lage { height:80px; flex:none; margin:6px 0; padding:5px 8px; overflow:hidden; border-radius:8px; background:var(--feld); border:1px solid var(--feld-rand);
  font-size:14px; line-height:1.38; color:var(--text-2); }
.k-lage b { color:var(--text); }
.k-blocklabel { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin:0 0 3px 2px; }
.k-zugliste { flex:1; min-height:0; overflow-y:auto; background:var(--feld); border:1px solid var(--feld-rand); border-radius:8px; padding:4px; font-family:var(--font-mono); font-size:13px; }
.zl-leer { color:var(--text-3); font-size:12.5px; padding:6px 2px; text-align:center; }
.zl { display:grid; grid-template-columns:30px 1fr 1fr; gap:2px; padding:1px 2px; border-radius:4px; }
.zl:nth-child(odd) { background:rgba(255,255,255,.04); }
.zl .nr { color:var(--text-3); text-align:right; padding-right:4px; }
.zl .r, .zl .s { padding:0 4px; border-radius:4px; cursor:pointer; }
.zl .r { color:#ffb3a3; } .zl .s { color:var(--text-2); }
html[data-ansicht="probe"] .zl .r { color:#a8231b; }
.zl .jetzt { background:rgba(255,211,106,.22); color:var(--gold-hell); font-weight:700; }
.rae-kopf { font:700 12px var(--font-ui); color:var(--gold-hell); padding:4px; }
.rae-liste .zl { grid-template-columns:24px 1fr auto; }
.ser-werte { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:4px 0; font-family:var(--font-ui); }
.ser-werte div { background:rgba(0,0,0,.25); border-radius:6px; padding:5px; text-align:center; }
.ser-werte b { display:block; font-size:17px; color:var(--gold-hell); font-variant-numeric:tabular-nums; }
.ser-werte span { font-size:11.5px; color:var(--text-3); }
.ser-hinweis { font:12px/1.35 var(--font-ui); color:var(--text-3); margin:6px 2px; }
.k-blaettern { display:flex; align-items:center; gap:4px; margin-top:5px; height:40px; flex:none; }
.k-blaettern button { width:44px; height:40px; border-radius:7px; background:var(--feld); border:1px solid var(--feld-rand); display:flex; align-items:center; justify-content:center; color:var(--text); }
.k-blaettern button svg { width:18px; height:18px; }
.k-blaettern span { flex:1; text-align:center; font-size:12.5px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.k-blaettern.aktiv span { color:var(--gold-hell); font-weight:700; }
.k-nachspiel { display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; margin-top:6px; }

.k-chat { height:62px; overflow-y:auto; background:var(--feld); border:1px solid var(--feld-rand); border-radius:7px; padding:4px; margin-bottom:3px; font-size:12px; line-height:1.35; }
#gchattext b { color:var(--gold-hell); }
.k-chatin { width:100%; margin-bottom:5px; background:var(--feld); border:1px solid var(--feld-rand); border-radius:6px; padding:5px 7px; font-size:16px; color:var(--text); outline:none; }
.k-schnell { display:grid; grid-template-columns:repeat(4, 1fr); gap:3px; margin-bottom:4px; }
.k-schnell button { min-height:32px; border-radius:6px; background:var(--feld); border:1px solid var(--feld-rand); font-size:11.5px; color:var(--text-2); }
.k-schnell button:disabled { opacity:.45; }

.k-knoepfe { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:8px 0 6px; }
.kb { min-height:40px; padding:6px 6px; border-radius:8px; font-weight:700; font-size:13.5px; color:var(--text);
  background:linear-gradient(to bottom, rgba(255,255,255,.12), rgba(0,0,0,.18)), var(--feld); border:1px solid var(--feld-rand); box-shadow:0 2px 4px rgba(0,0,0,.35);
  transition:transform 120ms var(--ease), background 120ms; }
.kb:hover { border-color:var(--gold); }
.kb:active { transform:translateY(2px); }
.kb:disabled { opacity:.45; cursor:default; transform:none; }
.kb-gruen { background:linear-gradient(to bottom, #2c7a4c, #174a2c); border-color:#64c48c; color:#f2fff6; }
.kb-rot { background:linear-gradient(to bottom, #a32a24, #5c1210); border-color:#e06a5c; color:#ffe4de; }
.kb.an { border-color:var(--dran); box-shadow:0 0 0 2px var(--dran) inset; }
.k-leiste { display:flex; justify-content:space-between; align-items:center; gap:4px; padding-top:7px; border-top:1px solid var(--kon-rand); }
.kb-hw { min-height:40px; padding:4px 12px; border-radius:8px; font-weight:700; font-size:13px; color:var(--knopf-text); background:linear-gradient(to bottom, var(--knopf-a), var(--knopf-b)); }
.k-icons { display:flex; gap:4px; }
.kb-ic { width:42px; height:40px; padding:9px; border-radius:8px; background:var(--feld); border:1px solid var(--feld-rand); color:var(--text-2); display:inline-flex; align-items:center; justify-content:center; }
.kb-ic.aus { opacity:.5; }

.ovl { position:absolute; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(12,4,3,.84); backdrop-filter:blur(5px); }
html[data-ansicht="probe"] .ovl { background:rgba(230,216,190,.86); }
.karte { width:100%; max-width:420px; max-height:94%; display:flex; flex-direction:column; align-items:center; text-align:center; padding:18px;
  background:linear-gradient(to bottom, var(--kon-a), var(--kon-b)); border:2px solid var(--gold); border-radius:16px; box-shadow:0 25px 50px rgba(0,0,0,.6); }
.karte-breit { max-width:600px; align-items:stretch; text-align:left; }
.kh { display:flex; justify-content:space-between; align-items:center; padding-bottom:8px; border-bottom:1px solid var(--kon-rand); margin-bottom:10px; }
.kh h2 { margin:0; font:700 19px var(--font-k); color:var(--gold-hell); }
.kx { width:44px; height:40px; padding:10px; border-radius:8px; color:var(--text-2); }
.kx:hover { background:var(--feld); }
.kb-text { overflow-y:auto; font-size:14px; line-height:1.55; color:var(--text-2); padding-right:6px; }
.kb-text h3 { font:700 15px var(--font-k); color:var(--gold-hell); margin:14px 0 4px; }
.kb-text h3:first-child { margin-top:0; }
.kb-text p { margin:0 0 7px; } .kb-text b { color:var(--text); } .kb-text ul { margin:0 0 7px; padding-left:20px; }
#pop-titel { margin:0 0 6px; font:700 19px var(--font-k); color:var(--gold-hell); }
#pop-text { margin:0 0 12px; font-size:14px; line-height:1.45; color:var(--text-2); }
#pop-btns { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
#pop-btns button { min-height:44px; padding:6px 16px; border-radius:10px; font-weight:700; font-size:14px; }
#pop-btns .ja { background:linear-gradient(to bottom, var(--knopf-a), var(--knopf-b)); color:var(--knopf-text); }
#pop-btns .nein { background:var(--feld); border:1px solid var(--feld-rand); color:var(--text); }
#ende-icon { width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:8px; border:3px solid; padding:12px; }
#ende-icon svg { width:100%; height:100%; }
#ende-icon.sieg { border-color:var(--gold); color:var(--gold-hell); background:rgba(217,170,76,.15); }
#ende-icon.remis { border-color:var(--text-3); color:var(--text-2); }
#ende-icon.pleite { border-color:#e06a5c; color:#ffb4a8; background:rgba(160,30,20,.18); }
#ende-titel { margin:0; font:800 22px var(--font-k); letter-spacing:.04em; color:var(--text); }
#ende-unter { margin:6px 0 0; font-size:14px; line-height:1.45; color:var(--text-2); }
.ende-stand { margin-top:10px; width:100%; padding:8px 10px; border-radius:9px; background:var(--feld); border:1px solid var(--feld-rand); font-size:13px; line-height:1.5; color:var(--text-2); text-align:left; }
.ende-stand b { color:var(--text); }
#ende-btns { width:100%; display:flex; flex-direction:column; gap:7px; margin-top:14px; }
#ende-btns button { min-height:44px; border-radius:10px; font-weight:700; font-size:14px; }
#ende-btns .haupt { background:linear-gradient(to bottom, var(--knopf-a), var(--knopf-b)); color:var(--knopf-text); }
#ende-btns .neben { background:var(--feld); border:1px solid var(--feld-rand); color:var(--text); }

.ei-zeile { display:flex; align-items:center; gap:10px; margin:8px 0; }
.ei-zeile > span { width:120px; flex:none; font-size:13.5px; color:var(--text-2); }
.ei-wahl { flex:1; display:flex; flex-wrap:wrap; gap:5px; }
.ei-wahl button { min-height:40px; padding:5px 10px; border-radius:8px; background:var(--feld); border:1px solid var(--feld-rand); font-size:13px; color:var(--text); }
.ei-wahl button.an { border-color:var(--dran); box-shadow:0 0 0 2px var(--dran) inset; }
.ei-steine { display:flex; gap:6px; padding:4px 0 4px 130px; }
.ei-steine span { width:46px; height:46px; display:block; }
.ei-steine svg { width:100%; height:100%; display:block; }
.ei-hinweis { font-size:13px; line-height:1.45; color:var(--text-3); margin:6px 0; }

.rw-tag { width:100%; min-height:56px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 12px; border-radius:10px; text-align:left;
  background:linear-gradient(to bottom, #3f9a64, #1f5e3a); border:1px solid #64c48c; color:#effff4; margin-bottom:8px; }
.rw-tag b { font-size:15px; } .rw-tag span { font-size:12.5px; opacity:.85; }
.rw-stufen { display:grid; grid-template-columns:1fr; gap:6px; overflow-y:auto; }
.rw-stufe { min-height:50px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px; padding:6px 12px; border-radius:10px; text-align:left;
  background:var(--feld); border:1px solid var(--feld-rand); color:var(--text); }
.rw-stufe b { font-size:14.5px; } .rw-stufe span { font-size:12.5px; color:var(--text-3); grid-column:1; }
.rw-stufe em { grid-row:1 / span 2; grid-column:2; font-style:normal; font-weight:800; font-size:14px; color:var(--gold-hell); font-variant-numeric:tabular-nums; }
.schul-liste { display:grid; grid-template-columns:1fr 1fr; gap:6px; overflow-y:auto; }
.schul-liste button { min-height:54px; display:flex; align-items:center; gap:9px; padding:6px 10px; border-radius:10px; text-align:left; background:var(--feld); border:1px solid var(--feld-rand); color:var(--text); }
.schul-liste button .sl-st { width:38px; height:38px; flex:none; }
.schul-liste button .sl-st svg { width:100%; height:100%; display:block; }
.schul-liste button b { display:block; font-size:14px; } .schul-liste button small { font-size:12px; color:var(--text-3); }
.schul-liste button.fertig { border-color:#64c48c; }

.archiv-liste { overflow-y:auto; display:flex; flex-direction:column; gap:5px; max-height:420px; }
.ar-z { min-height:48px; display:grid; grid-template-columns:1fr auto; gap:1px 8px; padding:6px 10px; border-radius:9px; text-align:left; background:var(--feld); border:1px solid var(--feld-rand); color:var(--text); }
.ar-z b { font-size:14px; } .ar-z span { font-size:12.5px; color:var(--text-3); grid-column:1; } .ar-z em { grid-row:1 / span 2; grid-column:2; align-self:center; font-style:normal; font-size:12.5px; color:var(--text-3); }
.ar-z.sieg { border-left:4px solid #64c48c; } .ar-z.nied { border-left:4px solid #e06a5c; } .ar-z.rem { border-left:4px solid var(--text-3); }
.ar-tabs { margin-bottom:8px; }
.statistik { overflow-y:auto; max-height:430px; font-size:13px; color:var(--text-2); }
.st-kopf { display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; margin-bottom:8px; }
.st-kopf div { background:var(--feld); border-radius:8px; padding:6px; text-align:center; }
.st-kopf b { display:block; font-size:18px; color:var(--gold-hell); } .st-kopf span { font-size:11.5px; color:var(--text-3); }
.st-block h3 { font:700 14px var(--font-k); color:var(--gold-hell); margin:10px 0 4px; } .st-block h3 small { font:400 11.5px var(--font-ui); color:var(--text-3); }
.st-zeile { display:grid; grid-template-columns:90px 1fr 120px; align-items:center; gap:6px; margin:3px 0; }
.st-balken { height:14px; display:flex; border-radius:7px; overflow:hidden; background:var(--feld); }
.st-balken i { display:block; } .st-balken .s { background:#4caf73; } .st-balken .r { background:#9a8a78; } .st-balken .n { background:#c9564a; } .st-balken .leer { flex:1; }
.st-form { display:flex; gap:3px; } .st-form i { width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:12px; color:#fff; }
.st-form .s { background:#4caf73; } .st-form .r { background:#9a8a78; } .st-form .n { background:#c9564a; }
.st-klein { font-size:12px; color:var(--text-3); }

#lobby { position:absolute; inset:0; display:flex; flex-direction:column; padding:12px; gap:10px; }
.lo-kopf { display:flex; align-items:center; gap:12px; height:52px; flex:none; padding:0 10px; border-radius:12px;
  background:linear-gradient(to bottom, var(--knopf-a), var(--knopf-b)); color:var(--knopf-text); box-shadow:var(--sh-lg); }
.lo-logo { font:800 22px var(--font-k); letter-spacing:.12em; }
.lo-raum { font-size:13.5px; font-style:italic; }
.lo-ich { flex:1; text-align:right; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lo-kopf-r { display:flex; gap:5px; }
.lo-kopf .kb { min-height:38px; background:rgba(255,255,255,.35); border-color:rgba(42,22,8,.4); color:#2a1608; font-size:13px; }
.lo-kopf .kb.an { box-shadow:0 0 0 2px #2a1608 inset; }
.lo-kopf .kb-ic { background:rgba(255,255,255,.35); border-color:rgba(42,22,8,.4); color:#2a1608; }
.lo-mitte { flex:1; min-height:0; display:flex; gap:10px; }
.lo-chat { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.lo-label { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
#chatwin { flex:1; min-height:60px; overflow-y:auto; padding:7px 9px; border-radius:10px; background:var(--feld); border:1px solid var(--feld-rand); font-size:13.5px; line-height:1.45; }
#chattext .nm { color:var(--gold-hell); font-weight:700; cursor:pointer; } #chattext .sys { color:var(--text-3); font-style:italic; } #chattext .pm { color:#c6a8ff; }
#chatin, #pmin { width:100%; padding:7px 10px; border-radius:9px; background:var(--feld); border:1px solid var(--feld-rand); color:var(--text); font-size:16px; outline:none; }
.lo-start { flex:none; }
.lo-kacheln { display:grid; grid-template-columns:repeat(3, 1fr); gap:7px; }
.lo-kachel { min-height:70px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; padding:8px 10px; text-align:left; }
.lo-kachel b { font-size:14.5px; display:flex; align-items:center; } .lo-kachel small { font-size:12px; font-weight:400; opacity:.85; line-height:1.3; }
.lo-spieler { width:290px; flex:none; display:flex; flex-direction:column; gap:6px; min-height:0; }
.lo-tabs { display:flex; gap:4px; }
.lo-tabs button { flex:1; min-height:40px; border-radius:9px; background:var(--feld); border:1px solid var(--feld-rand); font-size:13px; font-weight:700; color:var(--text-2); }
.lo-tabs button.an { border-color:var(--gold); color:var(--gold-hell); }
.lo-tab { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
#ulist, #livelist, #elolist { display:flex; flex-direction:column; gap:4px; }
.it { min-height:42px; display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:9px; background:var(--feld); border:1px solid var(--feld-rand); font-size:14px; cursor:pointer; }
.it.me { border-color:var(--gold); cursor:default; } .it.spielt { opacity:.6; cursor:default; }
.it .pk { width:10px; height:10px; border-radius:50%; background:#64c48c; flex:none; } .it.spielt .pk { background:#e0a24a; }
.it .elo, .it .rang { margin-left:auto; color:var(--text-3); font-variant-numeric:tabular-nums; font-size:13px; } .it .rang { margin-left:0; width:24px; }
.lo-hinweis { font-size:12.5px; color:var(--text-3); margin:6px 2px; }

#note { position:absolute; left:0; right:0; top:50%; text-align:center; font-size:15px; color:var(--text); z-index:60; }

#stage.hoch { width:440px; height:990px; }
#stage.hoch #partie { flex-direction:column; }
#stage.hoch #brettspalte { width:auto; height:578px; flex:none; padding:6px 6px; gap:4px; }
#stage.hoch #brettspalte::before, #stage.hoch #brettspalte::after { width:10px; }
#stage.hoch .leiste { width:424px; height:36px; font-size:13px; }
#stage.hoch .lname { max-width:140px; }
#stage.hoch #brettrahmen { width:428px; height:484px; padding:5px; }
#stage.hoch #brett { width:418px; height:474px; }
#stage.hoch #konsole { width:auto; flex:1; min-height:0; border-left:0; border-top:2px solid var(--kon-rand); padding:8px; }
#stage.hoch .k-kopf { display:none; }
#stage.hoch .k-status { height:40px; font-size:15px; }
#stage.hoch .k-lage { height:58px; margin:5px 0; font-size:14px; line-height:1.24; }
#stage.hoch .k-blocklabel { display:none; }
#stage.hoch .k-zugliste { min-height:44px; }
#stage.hoch .k-knoepfe { grid-template-columns:repeat(4, 1fr); margin:6px 0 5px; }
#stage.hoch .kb { min-height:54px; font-size:14px; }
#stage.hoch .kb-ic { width:56px; height:54px; padding:14px; }
#stage.hoch .kb-hw { min-height:54px; }
#stage.hoch .k-blaettern { height:54px; } #stage.hoch .k-blaettern button { width:60px; height:54px; }
#stage.hoch .k-chat { height:30px; }
#stage.hoch .k-chatin { height:36px; }
#stage.hoch .k-schnell { display:none; }
#stage.hoch .k-nachspiel .kb { min-height:54px; }
#stage.hoch .lo-tabs button, #stage.hoch .zw-gegner button, #stage.hoch .zw-liste button, #stage.hoch .zw-einsatz-liste button, #stage.hoch .zw-farbe button, #stage.hoch .zw-los, #stage.hoch .ei-wahl button, #stage.hoch #pop-btns button, #stage.hoch #ende-btns button, #stage.hoch .kx, #stage.hoch #en-zurueck .kb { min-height:54px; }
#stage.hoch .kx { width:56px; }
#stage.hoch .lo-kopf .kb, #stage.hoch .lo-kopf .kb-ic { min-height:54px; }
#stage.hoch .it { min-height:54px; }
#stage.hoch .rw-stufe, #stage.hoch .schul-liste button, #stage.hoch .ar-z, #stage.hoch .rw-tag { min-height:58px; }
#stage.hoch .uw-box { width:410px; padding:10px; }
#stage.hoch .zw-einsatz > span { width:88px; }
#stage.hoch #lobby { padding:8px; }
#stage.hoch .lo-kopf { height:auto; min-height:52px; flex-wrap:wrap; padding:6px 8px; gap:6px; }
#stage.hoch .lo-raum, #stage.hoch .lo-ich { display:none; }
#stage.hoch .lo-kopf-r { margin-left:auto; }
#stage.hoch .lo-mitte { flex-direction:column; }
#stage.hoch .lo-chat { flex:1.8 1 0; min-height:0; }
#stage.hoch .lo-kacheln { grid-template-columns:1fr 1fr; }
#stage.hoch .lo-kachel { min-height:62px; }
#stage.hoch .lo-spieler { width:auto; flex:1 1 0; }
#stage.hoch .karte-breit { max-width:420px; }
#stage.hoch .schul-liste { grid-template-columns:1fr; }
#stage.hoch .ei-zeile { flex-direction:column; align-items:stretch; gap:4px; } #stage.hoch .ei-zeile > span { width:auto; } #stage.hoch .ei-steine { padding-left:0; }
#stage.hoch .st-zeile { grid-template-columns:70px 1fr 100px; }
#stage.hoch .kinfo { width:330px; }
#stage.hoch #meldungen { top:40%; }
#stage.quer { width:860px; height:440px; }
#stage.quer #brettspalte { width:400px; padding:4px 8px; gap:3px; }
#stage.quer #brettspalte::before, #stage.quer #brettspalte::after { width:8px; }
#stage.quer .leiste { width:384px; height:30px; font-size:12.5px; }
#stage.quer .lname { max-width:210px; }
#stage.quer .luhr { font-size:14px; min-width:56px; }
#stage.quer #brettrahmen { width:336px; height:366px; padding:4px; }
#stage.quer #brett { width:328px; height:358px; }
#stage.quer #konsole { width:auto; flex:1; min-width:0; padding:6px 8px; }
#stage.quer .k-kopf, #stage.quer .k-blocklabel { display:none; }
#stage.quer .k-status { height:34px; font-size:14px; }
#stage.quer .k-lage { height:52px; margin:5px 0; font-size:14px; line-height:1.22; }
#stage.quer .k-zugliste { min-height:30px; }
#stage.quer .k-blaettern { height:54px; margin-top:4px; } #stage.quer .k-blaettern button { width:60px; height:54px; }
#stage.quer .k-knoepfe { grid-template-columns:repeat(4, 1fr); margin:5px 0 4px; }
#stage.quer .kb, #stage.quer .kb-hw { min-height:54px; }
#stage.quer .kb-ic { width:56px; height:54px; padding:14px; }
#stage.quer .k-chat { height:30px; } #stage.quer .k-chatin { height:36px; } #stage.quer .k-schnell { display:none; }
#stage.quer .uw-box { width:380px; padding:8px; }
#stage.quer .zw-gegner button, #stage.quer .zw-liste button, #stage.quer .zw-einsatz-liste button, #stage.quer .zw-farbe button, #stage.quer .zw-los { min-height:40px; }
#stage.quer #lobby { padding:8px; gap:6px; }
#stage.quer .lo-kopf { height:46px; } #stage.quer .lo-raum { display:none; }
#stage.quer .lo-kacheln { gap:5px; } #stage.quer .lo-kachel { min-height:58px; padding:5px 8px; } #stage.quer .lo-kachel small { display:none; }
#stage.quer .lo-spieler { width:250px; }
#stage.quer .lo-tabs button, #stage.quer .it, #stage.quer .lo-kopf .kb, #stage.quer .lo-kopf .kb-ic { min-height:54px; }
#stage.quer #meldungen { top:38%; } #stage.quer .meldung { font-size:14px; }
@media (pointer: coarse) {
  .kb, .kb-hw, .kb-ic, .lo-tabs button, .ei-wahl button, .zw-einsatz-liste button, .k-blaettern button { min-height:44px; }
  .k-schnell button { min-height:40px; }
}
@media (prefers-reduced-motion: reduce) { .flieger { transition:none; } .abgang { animation:none; opacity:0; } }