:root{
  --serif:"Noto Serif",Georgia,"Times New Roman",serif;
  --bg:#f7f7f4; --panel:#ffffff; --panel2:#f1f1ec; --line:#e2e1da;
  --ink:#191917; --muted:#8e8e85; --faint:#b8b8ae;
  --cell:#efeee8; --grid:#d7d6cd; --boardborder:#d2d1c8;
  --accent:#191917; --hover:#efeee8;
  --markB:#191917; --markW:#cfcfc6;
  --stoneB:#161616; --stoneB-ink:#e9e9e3; --stoneB-edge:#161616;
  --stoneW:#fbfbf8; --stoneW-ink:#2a2a26; --stoneW-edge:#d4d4cb;
  --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='98' fill='white' stroke='%23191917' stroke-width='3'/%3E%3Cpath d='M100 2 a49 49 0 0 1 0 98 a49 49 0 0 0 0 98 a98 98 0 0 1 0-196 z' fill='%23191917'/%3E%3Ccircle cx='100' cy='51' r='15' fill='%23191917'/%3E%3Ccircle cx='100' cy='149' r='15' fill='white'/%3E%3C/svg%3E");
}
:root[data-theme="dark"]{
  --serif:"Noto Serif",Georgia,"Times New Roman",serif;
  --bg:#0e0e0e; --panel:#161616; --panel2:#1c1c1c; --line:#2b2b2b;
  --ink:#ededea; --muted:#82827b; --faint:#4a4a45;
  --cell:#1a1a1a; --grid:#2c2c2c; --boardborder:#2c2c2c;
  --accent:#ededea; --hover:#1f1f1f;
  --markB:#5a5a5a; --markW:#ededea;
  --stoneB:#0c0c0c; --stoneB-ink:#c9c9c4; --stoneB-edge:#3a3a3a;
  --stoneW:#f4f4f0; --stoneW-ink:#181818; --stoneW-edge:#f4f4f0;
  --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='98' fill='%23141414' stroke='%23ededea' stroke-width='3'/%3E%3Cpath d='M100 2 a49 49 0 0 1 0 98 a49 49 0 0 0 0 98 a98 98 0 0 1 0-196 z' fill='%23ededea'/%3E%3Ccircle cx='100' cy='51' r='15' fill='%23ededea'/%3E%3Ccircle cx='100' cy='149' r='15' fill='%23141414'/%3E%3C/svg%3E");
}

/* --- Hell/Dunkel- & Punkte/Zahlen-Umschalter --- */
.headerToggles{margin-left:auto;display:flex;gap:8px}
.themetoggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--serif);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  padding:7px 12px;border-radius:2px;border:1px solid var(--line);background:transparent;
  color:var(--ink);cursor:pointer;transition:background .12s,border-color .12s}
.themetoggle:hover{background:var(--hover);border-color:var(--accent)}
.themetoggle svg{display:block}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);min-height:100vh;
  padding:34px 16px 56px;-webkit-font-smoothing:antialiased;font-weight:400}
.wrap{max-width:1000px;margin:0 auto}
header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px}
h1{font-size:23px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:13px}
h1 .dot{font-size:0;width:23px;height:23px;display:inline-block;background-repeat:no-repeat;
  background-position:center;background-size:contain;background-image:var(--mark)}
.sub{color:var(--muted);font-size:11.5px;letter-spacing:.1em}

.scoreboard{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.score{flex:1;min-width:150px;background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:13px 15px 13px 19px;position:relative;overflow:hidden;transition:border-color .2s}
.score::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.score.s1::before{background:var(--markB)}
.score.s2::before{background:var(--markW)}
.score.active{border-color:var(--accent)}
.score .name{font-size:11px;letter-spacing:.08em;font-weight:600;text-transform:uppercase}
.score .fields{font-size:34px;font-weight:300;color:var(--ink);line-height:1.2}
.score .meta{font-size:11px;color:var(--muted)}
.score .turnlabel{position:absolute;right:13px;top:13px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);opacity:0;transition:opacity .2s}
.score.active .turnlabel{opacity:1}

.stage{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.boardcol{flex:1 1 420px;min-width:300px}
.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:1px;
  background:var(--grid);border:1px solid var(--boardborder);border-radius:2px;padding:1px;aspect-ratio:1/1}
.cell{background:var(--cell);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  position:relative;user-select:none;cursor:default}
.cell.target{cursor:pointer}
.cell.target::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;
  opacity:.16;transition:opacity .15s,transform .15s}
.cell.target.b::after{background:var(--markB)}
.cell.target.w::after{background:var(--markW)}
.cell.target:hover::after{opacity:.42}
.cell.target.over::after{opacity:.72;transform:scale(1.12)}

.stone{width:82%;height:82%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:clamp(11px,2.6vw,18px);font-weight:400}
.stone.b{background:var(--stoneB);color:var(--stoneB-ink);box-shadow:inset 0 0 0 1px var(--stoneB-edge)}
.stone.w{background:var(--stoneW);color:var(--stoneW-ink);box-shadow:inset 0 0 0 1px var(--stoneW-edge)}
.cell.just .stone{animation:drop .3s ease}
@keyframes drop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}

.sidecol{flex:1 1 320px;min-width:270px;display:flex;flex-direction:column;gap:14px}
.hint{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:13px 15px;
  font-size:13.5px;line-height:1.55;min-height:58px;display:flex;align-items:center;color:var(--muted)}
.hint b{color:var(--ink);font-weight:600}
.hint.flash{border-color:var(--accent)}
.hint.win{border-color:var(--accent);color:var(--ink)}

.handlabel{display:flex;justify-content:space-between;align-items:baseline}
.handlabel .t{font-size:11px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.handlabel .who{font-weight:600;font-size:13px}

.drawzone{display:flex;justify-content:center;padding:8px 0}
.token{width:148px;height:148px;border-radius:50%;position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.token.b{background:var(--stoneB);color:var(--stoneB-ink);box-shadow:inset 0 0 0 1px var(--stoneB-edge)}
.token.w{background:var(--stoneW);color:var(--stoneW-ink);box-shadow:inset 0 0 0 1px var(--stoneW-edge)}
.token.empty{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.token .ori{position:absolute;top:24px;font-size:20px;opacity:.7}
.token .val{font-size:52px;font-weight:300;line-height:1}
.token .nm{position:absolute;bottom:28px;font-size:12px;letter-spacing:.05em;opacity:.85}
.token .ds{font-size:11px}

.controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
button{font-family:var(--serif);font-weight:500;font-size:12px;letter-spacing:.05em;border-radius:2px;
  padding:9px 15px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;
  transition:background .12s,border-color .12s}
button:hover{background:var(--hover)}
button:disabled{opacity:.4;cursor:default}
button.ghost{border-color:var(--line)}
button.seal{border-color:var(--accent);color:var(--ink)}
button.seal:disabled{color:var(--muted);border-color:var(--line)}
.ministone{width:46px;height:46px;min-width:0;border-radius:50%;border:none;padding:0;
  font-family:var(--serif);font-size:20px;font-weight:400;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .1s,opacity .15s}
.ministone:hover{transform:translateY(-2px)}
.ministone.b{background:var(--stoneB);color:var(--stoneB-ink);box-shadow:inset 0 0 0 1px var(--stoneB-edge)}
.ministone.w{background:var(--stoneW);color:var(--stoneW-ink);box-shadow:inset 0 0 0 1px var(--stoneW-edge)}
.ministone.active{outline:2px solid var(--accent);outline-offset:2px}
.ministone:disabled{opacity:.3;cursor:default;transform:none}
.log{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:11px 13px;
  font-size:12px;color:var(--muted);max-height:108px;overflow:auto;line-height:1.75}
.log .turn{color:var(--ink)} .log .cap{color:var(--accent);font-weight:600}

details.rules{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:4px 15px}
details.rules summary{cursor:pointer;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:10px 0;list-style:none}
details.rules summary::-webkit-details-marker{display:none}
details.rules summary::before{content:"+  ";color:var(--muted)}
details.rules[open] summary::before{content:"\2013  "}
.rules p{font-size:12.5px;color:var(--muted);line-height:1.65;padding:4px 0 11px}
.rules b{color:var(--ink);font-weight:600}

.modebar{display:flex;align-items:center;gap:8px;margin:-6px 0 20px}
.modebar .ml{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.modebtn{font-family:var(--serif);font-size:11px;font-weight:500;letter-spacing:.05em;padding:6px 15px;
  border-radius:2px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:background .12s}
.modebtn:hover{background:var(--hover)}
.modebtn.active{border-color:var(--accent);background:var(--hover)}

.palette{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.palstone{position:relative;width:60px;height:60px;border-radius:50%;border:none;padding:0;cursor:pointer;
  font-family:var(--serif);font-weight:400;display:flex;align-items:center;justify-content:center;transition:transform .1s}
.palstone:hover{transform:translateY(-2px)}
.palstone.b{background:var(--stoneB);color:var(--stoneB-ink);box-shadow:inset 0 0 0 1px var(--stoneB-edge)}
.palstone.w{background:var(--stoneW);color:var(--stoneW-ink);box-shadow:inset 0 0 0 1px var(--stoneW-edge)}
.palstone.sel{outline:2px solid var(--accent);outline-offset:2px}
.palstone:disabled{opacity:.3;cursor:default;transform:none}
.palstone .pv{font-size:25px;line-height:1}
.palstone .pc{position:absolute;bottom:-5px;right:-5px;min-width:19px;height:19px;border-radius:10px;
  background:var(--bg);border:1px solid var(--line);color:var(--ink);font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;padding:0 4px}

.hand-panel{display:flex;flex-direction:column;gap:10px;width:100%}
.hand-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);
  border-radius:2px;background:var(--panel);opacity:.55;transition:opacity .15s,box-shadow .15s}
.hand-row.active{opacity:1;box-shadow:inset 0 0 0 1px var(--accent)}
.hrlabel{font-family:var(--serif);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);width:52px;flex:0 0 52px}
.hslots{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hsep{width:1px;height:34px;background:var(--line);margin:0 2px}
.hslot{position:relative;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-weight:400;font-size:19px;border:none}
.hslot.b{background:var(--stoneB);color:var(--stoneB-ink);box-shadow:inset 0 0 0 1px var(--stoneB-edge)}
.hslot.w{background:var(--stoneW);color:var(--stoneW-ink);box-shadow:inset 0 0 0 1px var(--stoneW-edge)}
.hslot.queued{opacity:.45;transform:scale(.9)}
.hslot.front.playable,.hslot.sturm.playable{cursor:pointer}
.hslot.implied{outline:2px solid var(--accent);outline-offset:2px}
.hslot.playable:hover{transform:translateY(-2px)}
.hslot.sel{outline:2px solid var(--accent);outline-offset:2px}
.hslot.sturm{font-size:17px}
.hslot.off{opacity:.3}
.hslot.empty{background:none;box-shadow:none;border:1px dashed var(--line)}
.hslot.back{background:var(--panel2);color:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.hslot.back::after{content:"";position:absolute;width:28%;height:28%;border-radius:50%;
  background:var(--muted);opacity:.45}

.nav{padding:7px 14px;font-size:15px;line-height:1}
.nav:disabled{opacity:.3;cursor:default}
.navinfo{font-size:11px;letter-spacing:.05em;color:var(--muted);align-self:center}
.navinfo.review{color:var(--accent);font-weight:600}

/* --- Online-Lobby --- */
.netbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-10px 0 18px}
.netbar .nl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.netinput{font-family:var(--serif);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 10px;width:118px;border-radius:2px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink)}
.netinput::placeholder{color:var(--muted);letter-spacing:.06em;text-transform:none}
.netstatus{font-size:11.5px;color:var(--muted);margin-left:4px}
.netstatus b{color:var(--accent);font-weight:600;letter-spacing:.12em}
.modebtn:disabled,.netinput:disabled{opacity:.4;cursor:default}

/* --- Handwahl: alle Handsteine wählbar --- */
.hslot.playable{cursor:pointer}
.hslot.queued.playable{opacity:1;transform:none}

/* --- Schach-Koordinaten am Brett --- */
.boardframe{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 6px;align-items:stretch}
.boardframe > .board{grid-column:2;grid-row:1}
.ranks{grid-column:1;grid-row:1;display:grid;grid-template-rows:repeat(8,1fr)}
.files{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(8,1fr)}
.ranks span,.files span{display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:11px;color:var(--muted);user-select:none;letter-spacing:.04em}

/* --- Match-Popup (Best-of-3 gegen CPU) --- */
.modal-overlay{position:fixed;inset:0;background:rgba(10,10,8,.5);display:flex;
  align-items:center;justify-content:center;z-index:60;padding:20px;animation:fadeIn .15s ease}
.modal-overlay[hidden]{display:none}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:28px 26px 24px;max-width:340px;width:100%;text-align:center;
  box-shadow:0 18px 48px rgba(0,0,0,.28);animation:pop .18s ease}
@keyframes pop{0%{transform:scale(.94);opacity:0}100%{transform:scale(1);opacity:1}}
.modal-title{font-size:15px;font-weight:600;letter-spacing:.05em;margin-bottom:12px;color:var(--ink)}
.modal-body{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:20px}
.modal-body b{color:var(--ink);font-weight:600}
.modal-actions{display:flex;gap:10px}
.modal-actions button{flex:1}

/* --- Würfel-Punkte statt Ziffer auf den Steinen --- */
/* em-basiert statt Prozent-Höhe: braucht keine "definierte Höhe" beim Elternelement, dadurch robust */
.pips{display:inline-grid;grid-template-columns:repeat(3,0.5em);grid-template-rows:repeat(3,0.5em)}
.pips .pip{width:0.4em;height:0.4em;margin:auto;border-radius:50%;background:currentColor}
.pips .tl{grid-column:1;grid-row:1}
.pips .tr{grid-column:3;grid-row:1}
.pips .bl{grid-column:1;grid-row:3}
.pips .br{grid-column:3;grid-row:3}
.pips .c{grid-column:2;grid-row:2}
.pipnum{line-height:1}
.token .val{display:flex;align-items:center;justify-content:center}
.palstone .pv{display:flex;align-items:center;justify-content:center}

.matchdots{display:flex;gap:11px;justify-content:center;margin-bottom:16px}
.matchdots .dot{width:17px;height:17px;border-radius:50%;background:var(--panel2);border:1px solid var(--line)}
.matchdots .dot.b{background:var(--stoneB);border-color:var(--stoneB);box-shadow:inset 0 0 0 2px var(--stoneB-ink)}
.matchdots .dot.w{background:var(--stoneW);box-shadow:inset 0 0 0 1px var(--stoneW-edge)}
.matchdots .dot.draw{background:var(--muted);border-color:var(--muted)}
/* App-promo column (left of the board): funnels players to the ranked mobile app */
.appcol{flex:0 0 190px;min-width:160px;display:flex;flex-direction:column;gap:12px;
  align-items:center;text-align:center;border:1px solid var(--line);padding:16px 14px}
.appcol .app-logo-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;line-height:0}
.appcol .app-logo{width:92px;height:92px;object-fit:contain;display:block}
.appcol .app-title{font-family:var(--serif);font-size:16px;letter-spacing:.04em;color:var(--ink)}
.appcol .app-msg{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0}
.appcol .app-badges{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center}
.appcol .store-badge{display:block}
.appcol .store-badge img{height:40px;width:auto;display:block}
@media(max-width:760px){ .appcol{flex-direction:row;flex-wrap:wrap;justify-content:center} .appcol .app-msg{flex:1 1 200px} }

/* Hide the old "coming soon" store badges — the left app column is the single funnel now */
#promo-apps{display:none}

/* Site footer (privacy link) */
.sitefoot{max-width:1000px;margin:26px auto 10px;padding-top:14px;border-top:1px solid var(--line);text-align:center}
.sitefoot a{color:var(--muted);font-size:12.5px;letter-spacing:.03em;text-decoration:none}
.sitefoot a:hover{color:var(--ink);text-decoration:underline}