:root{
  --grund:#0f1117; --flaeche:#171a23; --flaeche2:#1f2330; --rand:#2a2f3e;
  --tinte:#e8e9f0; --tinte2:#a9adbd; --akzent:#9d8cff;
  --s1:#ffb454; --s2:#5ec8ff; --brett:#2b3350; --loch:#0f1117; --radius:16px;
}
@media (prefers-color-scheme: light){
  :root{ --grund:#f4f4f9; --flaeche:#fff; --flaeche2:#ececf5; --rand:#dcdde8; --tinte:#15171f; --tinte2:#5a5f70; --akzent:#5b46e0; --brett:#3b4a8a; --loch:#f4f4f9; }
}
*{box-sizing:border-box}
html{color-scheme:dark light}
body{margin:0;background:var(--grund);color:var(--tinte);font:17px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;min-height:100dvh;display:flex;flex-direction:column}
a{color:var(--akzent)}
.kopf{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;max-width:720px;width:100%;margin:0 auto}
.marke{font-weight:800;font-size:1.15em;text-decoration:none;color:var(--tinte)}
.marke .klein{font-weight:500;margin-left:6px}
.klein{color:var(--tinte2);font-size:.9em}
.raumanzeige{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--flaeche2);padding:6px 10px;border-radius:999px;letter-spacing:.12em}
main{flex:1;max-width:720px;width:100%;margin:0 auto;padding:8px 16px 24px}
.karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:22px}
h1{margin:0 0 8px;font-size:2rem}
.lead{margin:0 0 18px;color:var(--tinte2)}
.feld{display:block;margin-bottom:14px}
.feld span{display:block;font-size:.9em;color:var(--tinte2);margin-bottom:4px}
input{width:100%;font:inherit;padding:12px 14px;border-radius:12px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte)}
input:focus{outline:2px solid var(--akzent);outline-offset:1px}
#codefeld{text-transform:uppercase;letter-spacing:.15em;font-family:ui-monospace,Menlo,Consolas,monospace}
.reihe{display:flex;gap:10px;margin:10px 0;flex-wrap:wrap}
.reihe.mitte{justify-content:center;margin-top:16px}
.beitritt input{flex:1;min-width:140px}
.knopf{font:inherit;font-weight:600;border:0;border-radius:999px;padding:12px 20px;background:var(--akzent);color:#fff;cursor:pointer}
.knopf:disabled{opacity:.5;cursor:default}
.knopf.leise{background:var(--flaeche2);color:var(--tinte)}
.fehler{color:#ff7a7a;margin:8px 0 0}
.anzeige{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:8px 0 14px}
.spielerkarte{display:flex;align-items:center;gap:8px;background:var(--flaeche);border:1px solid var(--rand);border-radius:12px;padding:8px 10px;min-width:0}
.spielerkarte.dran{border-color:var(--akzent);box-shadow:0 0 0 2px color-mix(in srgb,var(--akzent) 35%,transparent)}
.spielerkarte.ich .sname::after{content:" (du)";color:var(--tinte2);font-weight:400}
.sname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.punkte{font-variant-numeric:tabular-nums;color:var(--tinte2)}
.stein{width:18px;height:18px;border-radius:50%;flex:none}
.stein.s1{background:var(--s1)} .stein.s2{background:var(--s2)}
.status{text-align:center;font-weight:600;min-width:110px}
.brett{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(4px,1.2vw,8px);background:var(--brett);padding:clamp(6px,1.5vw,12px);border-radius:var(--radius);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.zelle{aspect-ratio:1;border-radius:50%;background:var(--loch);position:relative;transition:transform .12s}
.zelle.s1{background:var(--s1)} .zelle.s2{background:var(--s2)}
.zelle.gewinn{box-shadow:0 0 0 4px #fff inset}
.zelle.neu{animation:fallen .28s cubic-bezier(.2,.8,.3,1.1)}
@keyframes fallen{from{transform:translateY(-220%)}to{transform:none}}
.brett.meinzug .zelle{cursor:pointer}
.brett.meinzug .spalte-hover{background:color-mix(in srgb,var(--akzent) 45%,var(--loch))}
.warten{text-align:center;color:var(--tinte2);margin-top:14px}
.warten strong{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.15em;color:var(--tinte)}
.fuss{max-width:720px;width:100%;margin:0 auto;padding:12px 16px 28px;color:var(--tinte2);font-size:.9em}
@media (max-width:480px){ .anzeige{grid-template-columns:1fr 1fr} .status{grid-column:1/-1;order:-1} }

/* ---- Dashboard ---- */
.buehne{padding:18px 0 8px}
.spiele{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:12px 0 24px}
.spiel{display:block;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:18px;color:var(--tinte);text-decoration:none}
a.spiel:hover{border-color:var(--akzent)}
.spiel h2{margin:12px 0 6px;font-size:1.3rem}
.spiel p{margin:0 0 10px;color:var(--tinte2)}
.spiel.bald{opacity:.7}
.etikett{display:inline-block;background:var(--flaeche2);border-radius:999px;padding:4px 10px;font-size:.85em;color:var(--tinte2)}
.vorschau{height:110px;border-radius:12px;background:var(--flaeche2);display:grid;place-items:center}
.vorschau.vg{grid-template-columns:repeat(6,1fr);gap:6px;padding:12px;background:var(--brett)}
.vorschau.vg span{width:100%;aspect-ratio:1;border-radius:50%;background:var(--loch)}
.vorschau.vg span:nth-child(7){background:var(--s1)} .vorschau.vg span:nth-child(8){background:var(--s2)} .vorschau.vg span:nth-child(9){background:var(--s1)} .vorschau.vg span:nth-child(2){background:var(--s2)} .vorschau.vg span:nth-child(3){background:var(--s1)}
.vorschau.emw{grid-template-columns:repeat(4,1fr);padding:0 26px}
.vorschau.emw i{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.25)}
.vorschau.emw .r{background:#e5533d} .vorschau.emw .g{background:#3fb950} .vorschau.emw .y{background:#f2c037} .vorschau.emw .b{background:#3d8bfd}
.vorschau.leer{font-size:2.4rem;color:var(--tinte2)}

.kopfrechts{display:flex;align-items:center;gap:8px}
.klangknopf{font:inherit;font-size:1.1em;border:1px solid var(--rand);background:var(--flaeche);border-radius:999px;width:38px;height:38px;cursor:pointer;line-height:1}
.klangknopf:hover{background:var(--flaeche2)}
.banner{position:fixed;left:50%;top:18%;transform:translate(-50%,0);background:var(--flaeche);border:1px solid var(--akzent);border-radius:16px;padding:14px 22px;font-weight:800;font-size:1.3em;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);animation:bannerauf .4s cubic-bezier(.2,.8,.3,1.1);z-index:5;pointer-events:none}
@keyframes bannerauf{from{opacity:0;transform:translate(-50%,-20px) scale(.9)}to{opacity:1;transform:translate(-50%,0)}}
.banner.weg{animation:bannerweg .4s forwards}
@keyframes bannerweg{to{opacity:0;transform:translate(-50%,-10px)}}