*{box-sizing:border-box;margin:0;padding:0}
html{--f:"Schibsted Grotesk",system-ui,-apple-system,sans-serif}
[data-licht="hell"]{
  --flaeche:#F1F0EB; --gruppe:#FFFFFF; --trenn:rgba(15,15,12,.085);
  --text:#16161A; --leise:#6C6C74; --sehrleise:#A0A0A7;
  --akzent:#146B4C; --akzent-flaeche:#E7F1EC; --knopf-text:#FFFFFF;
  --st1:#FDFBF6; --st2:#F5F1E6; --st3:#EDE7D9; --st-kante:rgba(90,75,40,.18); --gravur:#2C2B27;
  --brett:#E3E1DA; --leer:#EDEBE5;
  --p2b:#D4E2E8; --p3b:#B2CAD5; --p2w:#EED8D6; --p3w:#E0BAAB; --auf-p:#4B4A45;
}
[data-licht="dunkel"]{
  --flaeche:#0C0C0E; --gruppe:#18181B; --trenn:rgba(255,255,255,.10);
  --text:#F4F4F2; --leise:#9A998F; --sehrleise:#67665F;
  --akzent:#4EB287; --akzent-flaeche:#10241C; --knopf-text:#05201A;
  --st1:#F8F2E5; --st2:#EFE7D5; --st3:#E4DBC5; --st-kante:rgba(50,40,15,.28); --gravur:#332F27;
  --brett:#17171A; --leer:#202024;
  --p2b:#26343B; --p3b:#2E434C; --p2w:#3B2E34; --p3w:#472F27; --auf-p:rgba(244,244,242,.74);
}
body{font-family:var(--f);background:var(--flaeche);color:var(--text);font-size:16px;
 line-height:1.45;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;min-height:100vh;
 -webkit-tap-highlight-color:transparent}
.b{max-width:430px;margin:0 auto;padding:0 20px 46px}
.kopf{display:flex;align-items:center;justify-content:space-between;padding:26px 0 22px}
.marke{font:800 34px/1 var(--f);letter-spacing:-.05em}
.marke span{color:var(--akzent)}
.ich{min-width:44px;height:44px;padding:0 14px;border-radius:22px;display:flex;align-items:center;
 justify-content:center;background:var(--gruppe);color:var(--leise);font:600 14px/1 var(--f);border:0;cursor:pointer}
.gruppe{background:var(--gruppe);border-radius:16px;padding:18px;margin-bottom:12px}
.etikett{font:500 13px/1 var(--f);color:var(--leise);margin:26px 2px 10px}
.fahne{display:inline-block;background:var(--akzent-flaeche);color:var(--akzent);
 font:600 13px/1 var(--f);padding:8px 13px;border-radius:99px;margin-bottom:20px}
.bild{width:44px;height:44px;border-radius:50%;flex:none;overflow:hidden;display:grid;place-items:center;
 background:var(--akzent-flaeche);color:var(--akzent);font:600 16px/1 var(--f)}
.bild img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.gegner{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.g-name{font:600 18px/1.2 var(--f);letter-spacing:-.025em}
.g-zeit{font:400 14px/1.3 var(--f);color:var(--leise);margin-top:2px}
.stand{display:flex;gap:10px;margin-bottom:22px}
.sb{flex:1}
.sb-wer{font:500 13px/1 var(--f);color:var(--leise);margin-bottom:8px}
.sb-zahl{font:600 38px/1 var(--f);font-variant-numeric:tabular-nums;letter-spacing:-.045em}
.pf{color:var(--akzent);font-size:11px}
.rest{font:400 14px/1.4 var(--f);color:var(--leise);padding-top:20px;border-top:1px solid var(--trenn);margin-bottom:22px}
.rest b{color:var(--text);font-weight:600}
.knopf{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;
 border:0;cursor:pointer;background:var(--akzent);color:var(--knopf-text);font:600 17px/1 var(--f);
 border-radius:14px;letter-spacing:-.015em}
.knopf:disabled{opacity:.45;cursor:default}
.knopf.still{background:var(--akzent-flaeche);color:var(--akzent)}
.z{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--trenn);
 min-height:48px;text-decoration:none;color:inherit;cursor:pointer;background:none;border-left:0;border-right:0;
 border-top:0;width:100%;text-align:left;font:inherit}
.z:last-child{border-bottom:0}
.z .bild{width:38px;height:38px;font-size:15px;display:grid}
.z-m{flex:1;min-width:0;display:block}
.z-name{display:block;font:600 16px/1.25 var(--f);letter-spacing:-.02em}
.z-info{display:block;font:400 13px/1.3 var(--f);color:var(--leise);margin-top:2px}
.z-info.amzug{color:var(--akzent);font-weight:500}
.z-stand{font:500 16px/1 var(--f);font-variant-numeric:tabular-nums;color:var(--leise);white-space:nowrap}
.pfeil{color:var(--sehrleise);font-size:19px;flex:none}
/* Brett */
.bkopf{display:flex;gap:12px;margin-bottom:18px}
.chip{flex:1;padding:14px 16px;border-radius:14px;background:var(--gruppe)}
.chip.aktiv{background:var(--akzent-flaeche)}
.chip-n{font:500 13px/1 var(--f);color:var(--leise);margin-bottom:7px;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}
.chip.aktiv .chip-n{color:var(--akzent)}
.chip-z{font:600 28px/1 var(--f);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
#brett{display:grid;grid-template-columns:repeat(15,1fr);gap:1.5px;background:var(--brett);
 padding:4px;border-radius:10px;margin-bottom:18px;touch-action:manipulation}
.f{aspect-ratio:1;display:grid;place-items:center;background:var(--leer);
 font:600 8px/1 var(--f);color:var(--auf-p);border-radius:2px;cursor:pointer;border:0;padding:0}
.f.p2b{background:var(--p2b)}.f.p3b{background:var(--p3b)}
.f.p2w{background:var(--p2w)}.f.p3w{background:var(--p3w)}.f.mitte{background:var(--p2w)}
.f.ziel{outline:2px solid var(--akzent);outline-offset:-2px}
.stein{position:relative;display:inline-flex;align-items:center;justify-content:center;
 font-weight:600;text-transform:uppercase;color:var(--gravur);user-select:none;flex:none;
 letter-spacing:-.025em;background:linear-gradient(180deg,var(--st1) 0%,var(--st2) 58%,var(--st3) 100%);
 text-shadow:0 1px 0 rgba(255,255,255,.7);border:0;cursor:pointer;font-family:var(--f);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1.5px 0 var(--st-kante)}
.stein .w{position:absolute;right:.2em;bottom:.06em;font-size:.32em;font-weight:600;opacity:.5}
.f .stein{width:100%;height:100%;font-size:min(2.5vw,11px);border-radius:2px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.f .stein .w{display:none}
.f.neu{background:var(--akzent)}
.f.neu .stein{transform:scale(.84)}
.leiste{display:flex;gap:2px;justify-content:center;padding:16px 1px;background:var(--gruppe);
 border-radius:16px;margin-bottom:16px;min-height:76px;flex-wrap:wrap}
.leiste .stein{flex:none;width:48px;height:48px;font-size:24px;border-radius:24%}
.leiste .stein.gewaehlt{outline:3px solid var(--akzent);outline-offset:2px}
.leiste .stein.weg{opacity:.25;pointer-events:none}
.akt{display:flex;gap:10px;margin-bottom:14px}
.akt .knopf{flex:1;min-height:52px;font-size:16px}
.knopf .p{font-variant-numeric:tabular-nums;opacity:.7}
.hinweis{font:400 14px/1.45 var(--f);color:var(--leise);text-align:center;min-height:2.9em}
.hinweis.fehler{color:#B5462F}
[data-licht="dunkel"] .hinweis.fehler{color:#E88B72}
.laden{text-align:center;color:var(--leise);padding:60px 0}
.leerbild{display:block;width:70%;max-width:230px;margin:8px auto 18px;image-rendering:pixelated}
.familie{display:block;width:100%;margin:0 0 8px;image-rendering:pixelated}
.jubel{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);z-index:20}
.jubel img{width:74%;max-width:330px;image-rendering:pixelated}
.jubel div{position:absolute;bottom:16%;color:#fff;font:700 26px/1 var(--f);letter-spacing:-.03em}
:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}

/* ── Startbildschirm ─────────────────────────────────── */
#splash{position:fixed;inset:0;z-index:50;display:grid;place-items:center;
 background:#146B4C;transition:opacity .5s ease;overflow:hidden}
#splash img{position:relative;width:82%;max-width:430px;image-rendering:pixelated;
 animation:reinzoomen 1.5s cubic-bezier(.16,1,.3,1) both}
@keyframes reinzoomen{0%{transform:scale(.3);opacity:0}
 55%{opacity:1}100%{transform:scale(1);opacity:1}}
#splash.weg{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  #splash img{animation:none}
  #splash{transition:none}
}
/* ── Größere Marke, wie im Mockup ────────────────────── */
.marke{font:800 34px/1 var(--f);letter-spacing:-.05em}
.ich{width:46px;min-width:46px;height:46px;padding:0;border-radius:50%;overflow:hidden;
 background:var(--akzent-flaeche)}
.ich img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
/* ── Bild oben auf der Startseite ────────────────────── */
.titelbild{display:block;width:100%;max-width:340px;margin:0 auto 6px;image-rendering:pixelated}
/* ── Duell-Anzeige mit großen Zahlen ─────────────────── */
.duell{display:flex;align-items:flex-end;gap:8px;margin-bottom:18px}
.dz{flex:1}
.dz-wer{font:500 13px/1 var(--f);color:var(--leise);margin-bottom:6px}
.dz-zahl{font:800 46px/.9 var(--f);font-variant-numeric:tabular-nums;letter-spacing:-.06em}
.dz.fuehrt .dz-zahl{color:var(--akzent)}
.gegen{font:600 15px/1 var(--f);color:var(--sehrleise);padding-bottom:10px}
/* ── Runde Bilder in Listen und Brettkopf ────────────── */
.avatar{width:46px;height:46px;border-radius:50%;flex:none;overflow:hidden;
 background:var(--akzent-flaeche);display:grid;place-items:center;
 font:600 16px/1 var(--f);color:var(--akzent)}
.avatar img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.z .avatar{width:46px;height:46px}
.chip{display:flex;align-items:center;gap:10px}
.chip .avatar{width:38px;height:38px;font-size:14px}
.chip-t{min-width:0}
.chip.aktiv{box-shadow:inset 0 0 0 2px var(--akzent)}
.z-name{font:700 17px/1.2 var(--f);letter-spacing:-.03em}
.fahne{display:inline-flex;align-items:center;background:var(--akzent);color:var(--knopf-text);
 font:700 12px/1 var(--f);letter-spacing:.05em;text-transform:uppercase;padding:9px 13px}
.gruppe{border-radius:20px;padding:20px}
.etikett{font:600 12px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;margin:26px 4px 10px}
/* ── Partie-Ende ─────────────────────────────────────── */
.sieg{text-align:center;padding:24px 20px}
.sieg img{width:60%;max-width:190px;image-rendering:pixelated;margin-bottom:14px}
.sieg .gross{font:800 38px/1 var(--f);letter-spacing:-.05em;margin-bottom:6px}
.sieg .klein{font:500 15px/1.3 var(--f);color:var(--leise)}
.tz{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--trenn)}
.tz:last-child{border-bottom:0}
.tz .avatar{width:40px;height:40px}
.tz-n{flex:1;font:600 16px/1 var(--f)}
.tz-p{font:700 19px/1 var(--f);font-variant-numeric:tabular-nums}
.tz.ich .tz-n,.tz.ich .tz-p{color:var(--akzent)}

/* ── Duell über dem Brett: beide Figuren stehen sich gegenüber ── */
.duellkopf{display:flex;align-items:flex-end;gap:8px;background:var(--gruppe);
 border-radius:20px;padding:14px 12px 10px;margin-bottom:16px}
.dk{flex:1;text-align:center;min-width:0}
.dk-figur{height:104px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:6px}
.dk-figur img{max-height:104px;max-width:100%;image-rendering:pixelated;
 filter:grayscale(.55) opacity(.5);transition:filter .25s}
.dk.dran .dk-figur img{filter:none}
.dk-name{font:600 13px/1 var(--f);color:var(--leise);white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.dk.dran .dk-name{color:var(--akzent);font-weight:700}
.dk-punkte{font:800 30px/1 var(--f);font-variant-numeric:tabular-nums;letter-spacing:-.05em}
.dk.dran .dk-punkte{color:var(--akzent)}
.dk-mitte{flex:none;padding-bottom:34px;font:600 15px/1 var(--f);color:var(--sehrleise)}
/* Figuren in der Partieliste */
.z .figur{width:52px;height:64px;flex:none;display:flex;align-items:flex-end;justify-content:center}
.z .figur img{max-height:64px;max-width:52px;image-rendering:pixelated}
.z{padding:12px 0}
/* Wenn ein Bild fehlt, erscheint der Anfangsbuchstabe des Namens */
.avatar:empty::after,.figur:empty::after,.dk-figur:empty::after{
  content:attr(data-buchstabe);font:600 16px/1 var(--f);color:var(--akzent)}
.avatar,.figur{position:relative}
.figur:empty::after{font-size:20px}
.familienbild{display:block;width:100%;margin:4px 0 2px;image-rendering:pixelated}
.held{text-align:center;padding:24px 18px}
.held-w{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.held-w .stein{width:34px;height:34px;font-size:18px;border-radius:24%}
.held-w .stein .w{display:none}
.held-p{font:500 15px/1 var(--f);color:var(--leise)}
.held-p b{color:var(--text);font-weight:700}
.zahlen{display:flex;gap:12px;margin-bottom:12px}
.zk{flex:1;background:var(--gruppe);border-radius:20px;padding:20px}
.zk-w{font:800 34px/1 var(--f);font-variant-numeric:tabular-nums;letter-spacing:-.05em;margin-bottom:6px}
.zk.gross .zk-w{font-size:54px;color:var(--akzent)}
.zk-n{font:400 13px/1.35 var(--f);color:var(--leise)}
/* Figur in kleinen Zeilen — Bestenliste, Endtabelle, Fortsetzen-Karte */
.figur.klein{width:46px;height:62px;flex:none;display:flex;align-items:flex-end;justify-content:center}
.figur.klein img{max-height:62px;max-width:46px;image-rendering:pixelated;object-fit:contain}
.gegner .figur.klein{width:60px;height:82px}
.gegner .figur.klein img{max-height:82px;max-width:60px}
.tz{padding:10px 0}
.tz .figur.klein{width:42px;height:56px}
.tz .figur.klein img{max-height:56px;max-width:42px}

/* Wortmarke als Bild statt als Schrift (Ben, 30.08.) */
img.marke{height:42px;width:auto;image-rendering:pixelated;display:block;margin:18px 0 4px}
/* Auf der Startseite fast ueber die ganze Breite (Ben, 30.08.) */
img.marke.gross{height:auto;width:100%;max-width:100%;margin:6px 0 18px}
.kopf{padding:12px 0 2px;justify-content:flex-end;min-height:0}
/* Startseite: Familienbild groß, darunter der Knopfstapel */
.familienbild.gross{width:100%;margin:2px 0 22px}
.knopfstapel{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.knopfstapel .knopf{min-height:60px;font-size:18px}
.knopf .p{font-weight:600;opacity:.75;font-size:15px}
.leiser{display:block;width:100%;min-height:48px;border:0;background:none;cursor:pointer;
 color:var(--leise);font:500 15px/1 var(--f);text-decoration:underline;text-underline-offset:4px}
.unterknopf{font:500 14px/1.3 var(--f);color:var(--leise);text-align:center;margin:-4px 0 4px}

.frage{font:700 24px/1.25 var(--f);letter-spacing:-.035em;margin:24px 4px 16px}
.z-stand.vorn{color:var(--akzent);font-weight:700}
/* Textfeld (Name aendern) und Figurenauswahl */
.feld{width:100%;min-height:58px;border-radius:16px;border:2px solid var(--trenn);
 background:var(--flaeche);color:var(--text);font:600 18px/1 var(--f);padding:0 18px}
.feld:focus{border-color:var(--akzent);outline:none}
.figurwahl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fw{border:2px solid var(--trenn);border-radius:14px;background:var(--gruppe);
 padding:8px 4px;cursor:pointer;min-height:150px}
.fw[aria-pressed="true"]{border-color:var(--akzent);background:var(--akzent-flaeche)}
.fw-bild{display:flex;align-items:flex-end;justify-content:center;height:126px}
.fw-bild img{max-height:126px;max-width:100%;image-rendering:pixelated}

/* ── Beitritt: auf den eigenen Namen tippen ────────────────────────── */
/* Zwei Spalten statt drei — die Figuren sind hoch, und das Tippziel soll
   deutlich ueber den geforderten 48 px liegen (Zielgruppe 45+). */
.namenwahl{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.nw{position:relative;border:2px solid var(--trenn);border-radius:18px;background:var(--gruppe);
 padding:12px 6px 10px;cursor:pointer;min-height:170px;display:flex;flex-direction:column;
 align-items:center;justify-content:flex-end;gap:8px;color:var(--text);font:inherit}
.nw:active{border-color:var(--akzent);background:var(--akzent-flaeche)}
.nw-bild{display:flex;align-items:flex-end;justify-content:center;height:118px}
.nw-bild img{max-height:118px;max-width:100%;image-rendering:pixelated}
.nw-name{font:700 19px/1 var(--f);letter-spacing:-.03em}
/* Vergeben: die Figur tritt zurueck, die Auskunft nicht — sonst steht im
   Dunkelmodus ein graues Etikett auf grauem Grund. */
.nw[disabled]{cursor:default;background:transparent;border-style:dashed}
.nw[disabled] .nw-bild img{filter:grayscale(1);opacity:.34}
.nw[disabled] .nw-name{color:var(--sehrleise)}
.nw-weg{position:absolute;top:9px;left:50%;transform:translateX(-50%);white-space:nowrap;
 background:var(--gruppe);color:var(--leise);border:1px solid var(--trenn);
 border-radius:10px;padding:5px 10px;font:600 12px/1 var(--f);letter-spacing:.02em}

/* Kopfknopf traegt die eigene Figur und fuehrt in die Einstellungen */
.ich.figurknopf{background:var(--gruppe);display:flex;align-items:flex-end;justify-content:center;
 padding:0;overflow:hidden}
.ich.figurknopf img{width:100%;height:112%;object-fit:contain;object-position:bottom;
 image-rendering:pixelated}
.figur.gross{width:100%;height:150px;display:flex;align-items:flex-end;justify-content:center}
.figur.gross img{max-height:150px;image-rendering:pixelated}

/* ── Einstellungen ─────────────────────────────────────────────────── */
.wahl{display:flex;gap:10px}
.probe{flex:1;border:2px solid var(--trenn);border-radius:14px;padding:14px 12px;cursor:pointer;
 background:transparent;text-align:left;font:inherit;color:var(--text);display:block;min-height:48px}
.probe[aria-pressed="true"]{border-color:var(--akzent);background:var(--akzent-flaeche)}
.probe-bild{height:52px;border-radius:9px;margin-bottom:11px;display:flex;align-items:center;
 justify-content:center;gap:4px}
.probe-bild.h{background:#F1F0EB}.probe-bild.d{background:#0C0C0E}
.probe-stein{width:22px;height:22px;border-radius:5px;font:600 12px/22px var(--f);text-align:center;
 color:#2C2B27;background:linear-gradient(180deg,#FDFBF6,#EDE7D9)}
.probe-name{display:block;font:600 15px/1 var(--f);letter-spacing:-.02em}
.probe-sub{display:block;font:400 13px/1.3 var(--f);color:var(--leise);margin-top:4px}
.re-name{display:block;font:600 16px/1.2 var(--f)}