:root{ --rot:#e5533d; --gruen:#3fb950; --gelb:#f2c037; --blau:#3d8bfd; --feld:#ffffff; --feldrand:#c9ccd8; }
@media (prefers-color-scheme: dark){ :root{ --feld:#2a2f3e; --feldrand:#3a4052; } }
.spielerliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:6px 0 10px}
.sp{display:flex;align-items:center;gap:8px;background:var(--flaeche);border:1px solid var(--rand);border-radius:12px;padding:8px 10px;min-width:0}
.sp.dran{border-color:var(--akzent);box-shadow:0 0 0 2px color-mix(in srgb,var(--akzent) 35%,transparent)}
.sp.ich .sname::after{content:" (du)";color:var(--tinte2);font-weight:400}
.sp .punkt{width:16px;height:16px;border-radius:50%;flex:none}
.sp .stext{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.sp .sname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp .unter{font-size:.78em;color:var(--tinte2);white-space:nowrap}
.sp .siege{color:var(--tinte2);font-variant-numeric:tabular-nums}
.steuerung{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:14px auto 6px;max-width:min(92vw,640px);min-height:88px;background:var(--flaeche);border:1px solid var(--rand);border-radius:16px;padding:10px 14px}
.steuerung .wuerfel[hidden]{display:grid;visibility:hidden}
.steuertext{min-width:0}
.status{font-weight:600}
.knopf.gross{padding:14px 22px;font-size:1.05em}
@media (max-width:480px){ .steuerung{grid-template-columns:auto 1fr} .steuerung .knopf{grid-column:1/-1;justify-self:stretch} }
.wuerfel{width:72px;height:72px;border-radius:16px;background:#fff;border:1px solid #c9ccd8;box-shadow:inset 0 -6px 0 rgba(0,0,0,.08),0 6px 16px -8px rgba(0,0,0,.5);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:10px;gap:0}
.wuerfel i{display:block;width:100%;height:100%;border-radius:50%;background:#1a1d27;transform:scale(.62);visibility:hidden}
.wuerfel[data-w="1"] i:nth-child(5),.wuerfel[data-w="2"] i:nth-child(3),.wuerfel[data-w="2"] i:nth-child(7),.wuerfel[data-w="3"] i:nth-child(3),.wuerfel[data-w="3"] i:nth-child(5),.wuerfel[data-w="3"] i:nth-child(7),.wuerfel[data-w="4"] i:nth-child(1),.wuerfel[data-w="4"] i:nth-child(3),.wuerfel[data-w="4"] i:nth-child(7),.wuerfel[data-w="4"] i:nth-child(9),.wuerfel[data-w="5"] i:nth-child(1),.wuerfel[data-w="5"] i:nth-child(3),.wuerfel[data-w="5"] i:nth-child(5),.wuerfel[data-w="5"] i:nth-child(7),.wuerfel[data-w="5"] i:nth-child(9),.wuerfel[data-w="6"] i:nth-child(1),.wuerfel[data-w="6"] i:nth-child(3),.wuerfel[data-w="6"] i:nth-child(4),.wuerfel[data-w="6"] i:nth-child(6),.wuerfel[data-w="6"] i:nth-child(7),.wuerfel[data-w="6"] i:nth-child(9){visibility:visible}
.wuerfel.rollt{animation:rollen .5s cubic-bezier(.2,.8,.3,1.1)}
@keyframes rollen{0%{transform:rotate(-90deg) scale(.6)}60%{transform:rotate(15deg) scale(1.08)}100%{transform:none}}
.brett{position:relative;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);gap:1px;aspect-ratio:1;max-width:min(92vw,640px);margin:0 auto;background:var(--rand);border:2px solid var(--rand);border-radius:12px;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.z{background:var(--flaeche);position:relative}
.z.bahn{background:var(--feld)}
.z.sicher::after{content:"★";position:absolute;inset:0;display:grid;place-items:center;font-size:min(2.4vw,14px);color:var(--feldrand);pointer-events:none;z-index:0}
.z.hof.rot{background:color-mix(in srgb,var(--rot) 28%,var(--flaeche))} .z.hof.gruen{background:color-mix(in srgb,var(--gruen) 28%,var(--flaeche))} .z.hof.gelb{background:color-mix(in srgb,var(--gelb) 30%,var(--flaeche))} .z.hof.blau{background:color-mix(in srgb,var(--blau) 28%,var(--flaeche))}
.z.heim.rot,.z.start.rot{background:color-mix(in srgb,var(--rot) 55%,var(--feld))} .z.heim.gruen,.z.start.gruen{background:color-mix(in srgb,var(--gruen) 55%,var(--feld))} .z.heim.gelb,.z.start.gelb{background:color-mix(in srgb,var(--gelb) 60%,var(--feld))} .z.heim.blau,.z.start.blau{background:color-mix(in srgb,var(--blau) 55%,var(--feld))}
.z.ziel{background:var(--flaeche2)}
.z.zielfach.rot{background:color-mix(in srgb,var(--rot) 35%,var(--flaeche2))} .z.zielfach.gruen{background:color-mix(in srgb,var(--gruen) 35%,var(--flaeche2))} .z.zielfach.gelb{background:color-mix(in srgb,var(--gelb) 40%,var(--flaeche2))} .z.zielfach.blau{background:color-mix(in srgb,var(--blau) 35%,var(--flaeche2))}
.z.zielfach .fig{inset:14%}
.fig.mehr::after{font-size:.8em;min-width:1.5em}
.fig{position:absolute;inset:12%;z-index:2;border-radius:50%;box-shadow:inset 0 -18% 0 rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.4);display:grid;place-items:center;font-size:min(2.6vw,13px);font-weight:800;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.5)}
.fig.rot{background:var(--rot)} .fig.gruen{background:var(--gruen)} .fig.gelb{background:var(--gelb)} .fig.blau{background:var(--blau)}
.fig.mehr::after{content:attr(data-n);position:absolute;right:-6%;top:-6%;background:#fff;color:#000;font-size:.75em;border-radius:50%;width:1.4em;height:1.4em;display:grid;place-items:center}
.fig.moeglich{cursor:pointer;outline:3px solid var(--akzent);outline-offset:1px;animation:pulsen 1s infinite alternate}
@keyframes pulsen{from{transform:scale(1)}to{transform:scale(1.12)}}
.z.hof .fig{inset:16%}
.z.platz::before{content:"";position:absolute;inset:10%;border-radius:50%;background:var(--feld);box-shadow:inset 0 2px 6px rgba(0,0,0,.25);border:2px dashed color-mix(in srgb,var(--tinte) 25%,transparent)}
.z.platz.rot::before{border-color:var(--rot)} .z.platz.gruen::before{border-color:var(--gruen)} .z.platz.gelb::before{border-color:var(--gelb)} .z.platz.blau::before{border-color:var(--blau)}
.z.hofinnen{background:color-mix(in srgb,var(--feld) 55%,transparent)}
.letzter{text-align:left;color:var(--tinte2);font-size:.9em;min-height:1.3em;margin:4px 0 0}
.regeln{margin-top:14px;color:var(--tinte2)} .regeln summary{cursor:pointer;color:var(--tinte)} .regeln li{margin:6px 0}

.fig.gewaehlt{outline:3px solid #fff;box-shadow:0 0 0 5px var(--akzent),inset 0 -18% 0 rgba(0,0,0,.28);animation:none;transform:scale(1.12)}
.z.zielfeld{box-shadow:inset 0 0 0 3px var(--akzent)}
.z.zielfeld.schlag{box-shadow:inset 0 0 0 3px #ff5a5a}
.zielmarke{position:absolute;inset:12%;z-index:3;border-radius:50%;opacity:.55;border:3px dashed #fff;cursor:pointer;animation:zielpuls 1s infinite alternate}
.zielmarke.rot{background:var(--rot)} .zielmarke.gruen{background:var(--gruen)} .zielmarke.gelb{background:var(--gelb)} .zielmarke.blau{background:var(--blau)}
@keyframes zielpuls{from{transform:scale(.92)}to{transform:scale(1.06)}}

/* Sichere Felder: goldener Grund mit Stern; eine Figur darauf trägt einen
   goldenen Schutzring, damit man die Sicherheit auch mit Figur sieht. */
.z.sicher{background:color-mix(in srgb,#f2c037 30%,var(--feld))}
.z.sicher::after{color:color-mix(in srgb,#b8860b 70%,var(--feld));font-size:min(3.2vw,18px)}
.z.sicher .fig{box-shadow:0 0 0 2px #fff,0 0 0 4px #e0a800,inset 0 -18% 0 rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.4)}
.z.sicher .fig.moeglich{outline-offset:5px}
.regeln .gold{color:#e0a800;font-weight:600}

/* Der Läufer: eine Figur, die über das Brett hüpft. */
.fig.laeufer{position:absolute;inset:auto;z-index:6;pointer-events:none;transition:left .13s ease-in-out,top .13s ease-in-out}
.fig.laeufer.hopst{animation:hopf .13s ease-in-out}
@keyframes hopf{50%{transform:scale(1.25) translateY(-18%)}}
.fig.laeufer.flieht{transition:left .4s cubic-bezier(.3,.7,.4,1),top .4s cubic-bezier(.3,.7,.4,1);opacity:.85}
.fig.unsichtbar{visibility:hidden}