/* ZAP, Labor-Look.
   Alle Farben stehen als Variablen oben. Hell-Modus = dieselben Variablen mit anderen Werten (.light).
   Aufbau: Tokens, Grundlage, Spiel (HUD, Anzeigen, Brett), Sheets (Menü, Ergebnis), weitere Bildschirme, Splash, Effekte. */

/* ===== Schriften (selbst gehostet, OFL-Lizenz in fonts/). Nur genutzte Schnitte. ===== */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(./fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(./fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(./fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(./fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(./fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(./fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(./fonts/ibm-plex-sans-condensed-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(./fonts/ibm-plex-sans-condensed-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(./fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(./fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url(./fonts/share-tech-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== Tokens ===== */
:root{
  --f-text:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --f-cond:'IBM Plex Sans Condensed','IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --f-seg:'Share Tech Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Flächen */
  --bg:#070807;           /* Grund */
  --panel:#0C0F0E;        /* ganze Seiten */
  --sheet:#101312;        /* Sheets, Karten, Knoten */
  --input-bg:#0A0C0B;     /* Felder, Segment-Schalter */
  --btn:#151917;          /* normale Knöpfe */
  --dim:rgba(3,4,4,.72);  /* Abdunkelung hinter Sheets */
  --dim-cd:rgba(3,4,4,.86);   /* Abdunkelung hinter dem Wettkampf-Countdown */

  /* Linien */
  --line:#1F2522;         /* feine Trenner, leere Zeitbalken */
  --line-2:#262C29;       /* Sheet-Rand */
  --line-3:#2C3330;       /* Knöpfe, Knoten */
  --rail:#1C211F;         /* Schienen am Brettrand */
  --dot:#1F2522;          /* Punktraster */
  --grab:#323936;

  /* Text */
  --text:#F2F4F3;
  --text-2:#E9ECEA;
  --text-3:#C9CFCC;
  --muted:#8E9692;
  --muted-2:#6B7470;      /* nur für Dekoration, zu blass für Text */
  --muted-3:#7E8783;      /* blasser Text, mindestens 4,5:1 */

  /* Kupfer (Akzent) */
  --copper:#E0915A;
  --copper-text:#E0915A;  /* Kupfer als Schriftfarbe (im Hellen dunkler) */
  --copper-ink:#170B04;   /* Schrift auf Kupfer */
  --trace:#3A2A1E;        /* dunkle Leiterbahn */
  --ring:#5C4330;         /* Ring der Anschlusspunkte */
  --copper-glow:rgba(224,145,90,.22);
  --copper-halo:rgba(224,145,90,.18);
  --copper-row:rgba(224,145,90,.10);

  /* Signalfarben */
  --green:#6FF0A6;
  --red:#FF5A4F;
  --red-2:#FF7A70;
  --pulse:#B8FFD6;

  /* Siebensegment */
  --seg-bg:#0B0B0B;
  --seg-border:#232826;
  --seg-red:#FF3B30;
  --seg-red-glow:rgba(255,59,48,.45);
  --seg-ghost:#1E1010;
  --seg-dim:#3A1512;
  --seg-green:#5EE59A;
  --seg-green-glow:rgba(94,229,154,.45);
  --seg-ghost-ok:#0F1E16;
  --seg-dim-ok:#123322;

  /* Batterie, Zeitleiste */
  --bat-border:#3A423E;
  --track:#1F2522;

  --safe-top:max(env(safe-area-inset-top, 54px), 14px);
  --safe-bottom:max(env(safe-area-inset-bottom, 34px), 14px);
}
.light{
  --bg:#F2F4F2;
  --panel:#F7F8F7;
  --sheet:#FFFFFF;
  --input-bg:#F4F6F5;
  --btn:#F1F3F2;
  --dim:rgba(20,26,23,.40);
  --dim-cd:rgba(242,244,242,.8);

  --line:#DDE2DF;
  --line-2:#D2D8D5;
  --line-3:#BCC4C0;
  --rail:#DCE1DE;
  --dot:#C9D0CC;
  --grab:#C3CAC6;

  --text:#0E1311;
  --text-2:#161C1A;
  --text-3:#333D39;
  --muted:#4F5A55;
  --muted-2:#8A938F;
  --muted-3:#5A6560;

  --copper:#E0915A;
  --copper-text:#A24F1B;
  --copper-ink:#170B04;
  --trace:#EBD2BF;
  --ring:#D9A988;
  --copper-glow:rgba(224,145,90,.30);
  --copper-halo:rgba(224,145,90,.25);
  --copper-row:rgba(224,145,90,.14);

  --green:#0B7F45;
  --red:#D3271D;
  --red-2:#C0271D;
  --pulse:#0A9A52;

  --seg-bg:#FFFFFF;
  --seg-border:#D5DAD7;
  --seg-red:#D6231A;
  --seg-red-glow:rgba(214,35,26,.25);
  --seg-ghost:#F3E3E1;
  --seg-dim:#E6C3BF;
  --seg-green:#0A8F4A;
  --seg-green-glow:rgba(10,143,74,.25);
  --seg-ghost-ok:#DDEFE5;
  --seg-dim-ok:#B7DEC7;

  --bat-border:#A4ADA9;
  --track:#D9DEDB;
}

/* ===== Grundlage ===== */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text-2);font-family:var(--f-text);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{display:flex;justify-content:center}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.hidden{display:none !important}
.mono{font-family:var(--f-mono)}
.cond{font-family:var(--f-cond)}
.app{position:relative;width:100%;max-width:430px;height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:var(--safe-top) 0 var(--safe-bottom);background:var(--bg)}
@media (min-width:520px){.app{border-inline:1px solid var(--line)}}

/* ===== Spiel: HUD ===== */
.gbar{position:sticky;top:calc(-1 * var(--safe-top));z-index:5;flex:none;margin-top:calc(-1 * var(--safe-top));padding:var(--safe-top) 0 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.ghud{display:flex;align-items:center;gap:8px;padding:0 16px 2px 4px;flex:none}
.gib{flex:0 0 48px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0;background:none;border:0;border-radius:24px;color:var(--text-3);cursor:pointer}
.gib:hover{background:var(--copper-row)}
.gib-txt{display:none;font:600 13px/1 var(--f-text);padding:0 12px;white-space:nowrap}
.gib.wk{flex:0 0 auto;width:auto;border:1px solid var(--line-3);border-radius:10px;margin-left:12px}
.gib.wk svg{display:none}
.gib.wk .gib-txt{display:inline}
.gm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gm b{font:700 20px/1.1 var(--f-cond);color:var(--text)}
.gm span{font:400 11px var(--f-mono);color:var(--muted);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.gs{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.gs b{font:700 28px/1 var(--f-cond);font-variant-numeric:tabular-nums;color:var(--text)}
.gs-k{font:400 11px var(--f-mono);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.gs-up{position:absolute;top:0;right:100%;margin-right:10px;white-space:nowrap;font:600 14px/28px var(--f-mono);color:var(--green);text-shadow:0 0 8px var(--seg-green-glow);letter-spacing:.04em}
.gs-up.minus{color:var(--red-2);text-shadow:none}
.gs-up.zeig{animation:flash 1.5s ease-out both}
@keyframes flash{0%{opacity:0;transform:translateY(-4px)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}

/* Zeitleiste: 10 Balken + Restzeit */
.gtime{display:flex;align-items:center;gap:10px;padding:8px 20px 0;flex:none}
.gtime i{flex:1;height:5px;border-radius:3px;background:var(--track)}
.gtime i.on{background:var(--copper);box-shadow:0 0 6px var(--copper-glow)}
.gtime i.low{background:var(--red);box-shadow:none}
.gtime-t{min-width:34px;text-align:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.gtime-t.low{color:var(--red-2)}


/* Zeile mit Anzeige: Beschriftung | Siebensegment | Beschriftung */
.gunit{display:flex;align-items:center;justify-content:center;gap:14px;flex:none}
.gunit-ziel{margin-top:16px}
.gunit .k{width:78px;font:400 11px var(--f-mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.gunit .k.r{display:flex;justify-content:flex-end;text-align:right}
.gunit .seg + .k-erg{color:var(--muted)}
.gunit .seg.ok + .k-erg{color:var(--green)}

/* Siebensegment: dunkle "888" dahinter, helle Ziffern darüber */
.seg{position:relative;display:inline-block;white-space:nowrap;background:var(--seg-bg);border:1px solid var(--seg-border);border-radius:10px;padding:4px 10px;font:400 40px/1 var(--f-seg);letter-spacing:.06em}
.seg .gh{color:var(--seg-ghost)}
.seg .v{position:absolute;left:10px;top:4px;color:var(--seg-red);text-shadow:0 0 10px var(--seg-red-glow)}
.seg .v .d{color:var(--seg-dim);text-shadow:none}
.seg.ok .gh{color:var(--seg-ghost-ok)}
.seg.ok .v{color:var(--seg-green);text-shadow:0 0 10px var(--seg-green-glow)}
.seg.ok .v .d{color:var(--seg-dim-ok)}
.seg.ok{animation:blitz .7s ease-out}
@keyframes blitz{0%{transform:scale(1.12);filter:brightness(1.8)}100%{transform:scale(1);filter:none}}

/* Kleine Batterie links neben ERGEBNIS */
.gbat{position:relative;display:inline-flex;gap:2px;padding:3px;margin-right:5px;border:1.5px solid var(--bat-border);border-radius:5px}
.gbat::after{content:"";position:absolute;right:-6px;top:50%;width:3px;height:8px;margin-top:-4px;border-radius:0 2px 2px 0;background:var(--bat-border)}
.gbat i{width:6px;height:14px;border-radius:1.5px;background:var(--track)}
.gbat i.on{background:var(--green);box-shadow:0 0 5px var(--seg-green-glow)}
.gbat i.low{background:var(--red);box-shadow:0 0 5px rgba(255,90,79,.5)}

/* ===== Spiel: Brett ===== */
.board{position:relative;flex:0 1 400px;height:400px;min-height:300px;margin:auto 0;display:flex;align-items:stretch;touch-action:none}
.rail{position:absolute;top:8px;bottom:8px;width:2px;border-radius:1px;background:var(--rail)}
.rail-left{left:20px}
.rail-right{right:20px}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.wires path{fill:none;stroke-linecap:round}
.wires .glow{stroke:var(--copper-glow);stroke-width:7}
.wires .draht{stroke:var(--copper);stroke-width:2.2}
.wires .vorschau{stroke:var(--copper);stroke-width:2;stroke-dasharray:5 4}
.wires .puls{stroke:var(--pulse);filter:drop-shadow(0 0 4px var(--green))}
.col{flex:1;display:flex;flex-direction:column;justify-content:space-around;z-index:2;min-height:0}
.col-left{align-items:flex-start;padding-left:42px}
.col-right{align-items:flex-end;padding-right:42px}
.center-dots{position:absolute;left:calc(50% - 54px);width:108px;top:-4.75px;height:409.5px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(9,1fr);pointer-events:none;z-index:0}
.center-dots i{width:2.2px;height:2.2px;border-radius:50%;background:var(--dot);justify-self:center;align-self:center}

.node-left,.node-right{position:relative;flex:none;width:64px;height:64px;padding:0;display:grid;place-items:center;background:var(--sheet);border:1.5px solid var(--line-3);color:var(--text);font:700 32px/1 var(--f-cond);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;transition:border-color .15s,box-shadow .15s,transform .08s}
.node-left{border-radius:14px}
.node-right{border-radius:50%}
.node-left::before,.node-right::before{content:"";position:absolute;inset:-8px}   /* größere Trefferfläche */
.node-left:active,.node-right:active{transform:scale(.97)}
.node-left.connected,.node-right.connected{border-color:var(--copper)}
.node-left.selected,.node-right.selected,.node-left.drag-hover,.node-right.drag-hover{border-color:var(--copper);box-shadow:0 0 0 4px var(--copper-halo),0 0 18px var(--copper-glow)}
.port{position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--sheet);border:1.5px solid var(--ring);transition:background .15s,border-color .15s}
.node-left .port{right:-6px}
.node-right .port{left:-6px}
.connected .port,.selected .port,.drag-hover .port{background:var(--copper);border-color:var(--copper)}
.sym{width:28px;height:28px;display:grid;place-items:center;color:var(--text)}
.sym svg{width:100%;height:100%}
.sym svg line{stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sym-x2 svg line{stroke-width:2}

/* ===== Sheets: gemeinsame Bausteine ===== */
.sheet{width:100%;max-width:430px;background:var(--sheet);border-top:1px solid var(--line-2);border-radius:20px 20px 0 0;display:flex;flex-direction:column;color:var(--text-2)}
.grab{width:40px;height:4px;border-radius:2px;background:var(--grab);margin:10px auto 2px;flex:none}
.head{display:flex;align-items:flex-start;justify-content:space-between;padding:12px 8px 14px 20px}
.crumb{min-height:14px;font:400 11px var(--f-mono);color:var(--copper-text);letter-spacing:.04em;text-transform:uppercase}
.head h1,.menu-titel{margin:4px 0 0;font:700 28px/1.05 var(--f-cond);color:var(--text)}
.ib{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:24px;color:var(--muted);padding:0;cursor:pointer}
.ib:hover{background:var(--copper-row);color:var(--text)}
.sec{padding:14px 20px 6px 54px;font:400 11px var(--f-mono);color:var(--muted-3);letter-spacing:.06em;text-transform:uppercase}

/* Kupfer-Leiterbahn mit Knoten */
.trace{position:relative}
.trace::before{content:"";position:absolute;left:27px;top:0;bottom:0;width:2px;background:var(--trace)}
.it{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:54px;padding:0 18px 0 54px;background:transparent;border:0;border-radius:0;color:var(--text-3);font:500 16px var(--f-text);text-align:left;text-decoration:none;cursor:pointer}
.it::before{content:"";position:absolute;left:21px;top:50%;width:10px;height:10px;margin-top:-7px;border-radius:50%;border:2px solid var(--ring);background:var(--sheet)}
.it:hover{background:var(--copper-row)}
.it:focus-visible{outline-offset:-2px}
.it.on{color:var(--text);background:linear-gradient(90deg,var(--copper-row),transparent 70%)}
.it.on::before{background:var(--copper);border-color:var(--copper);box-shadow:0 0 0 4px var(--copper-halo),0 0 12px var(--copper)}
.it .m{font:400 13px var(--f-mono);color:var(--muted-3);white-space:nowrap}
.it.on .m{color:var(--copper-text)}
.it .ch{color:var(--muted-2);font-size:18px}
.it.menu-gold,.it.menu-gold .opt-name{color:var(--copper-text)}

/* Umschalter, z. B. 3 | 4 Paare */
.seg2{display:flex;gap:3px;padding:3px;background:var(--input-bg);border:1px solid var(--line-2);border-radius:8px}
.seg2 .paare-opt{position:relative;min-width:34px;min-height:30px;height:30px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted-3);font:400 13px var(--f-mono);cursor:pointer}
.seg2 .paare-opt::after{content:"";position:absolute;inset:-7px -2px}   /* Trefferfläche mindestens 44px */
.seg2 .paare-opt.active{background:var(--copper);color:var(--copper-ink);font-weight:600}
.paare-zeile{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:6px 20px 6px 54px;cursor:pointer}
.paare-zeile .opt-name{font:500 16px var(--f-text);color:var(--text-3)}

/* Knöpfe */
.btn,.gta-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:0 14px;border-radius:10px;border:1px solid var(--line-3);background:var(--btn);color:var(--text-2);font:600 16px var(--f-text);text-align:center;text-decoration:none;cursor:pointer}
.btn:hover,.gta-btn:hover{border-color:var(--muted-2)}
.btn:active,.gta-btn:active{transform:scale(.98)}
.btn.pri,.gta-btn-gold{background:var(--copper);border-color:var(--copper);color:var(--copper-ink);font:700 19px var(--f-cond);min-height:56px}
.btn.pri:hover,.gta-btn-gold:hover{filter:brightness(1.08);border-color:var(--copper)}
.gta-btn-ghost{background:transparent;color:var(--muted)}
.gta-btn-ghost:hover{color:var(--text)}
.btn:disabled,.gta-btn:disabled{opacity:.4;cursor:not-allowed}
.btns{display:flex;flex-direction:column;gap:10px;padding:14px 20px 26px}
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1;min-width:0}

.note{margin:6px 20px 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.stat{display:flex;align-items:baseline;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--line)}
.stat .k{font:400 12px var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.stat .v{display:flex;align-items:center;gap:10px;font:700 24px var(--f-cond);color:var(--text);font-variant-numeric:tabular-nums}
.badge{font:600 11px var(--f-mono);color:var(--copper-ink);background:var(--copper);border-radius:4px;padding:3px 6px;text-transform:uppercase}
.led{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--seg-green-glow)}
.led.aus{background:var(--red);box-shadow:0 0 8px rgba(255,90,79,.8)}

/* ===== Menü ===== */
.mode-overlay{position:fixed;inset:0;z-index:25;display:flex;align-items:flex-end;justify-content:center;background:var(--dim)}
.mode-overlay .mode-card{max-height:calc(100dvh - var(--safe-top));overflow-y:auto}
.mode-overlay:not(.hidden) .mode-card{animation:hoch .22s ease-out}
.sheet-fuss{flex:none;height:max(26px,env(safe-area-inset-bottom,0px))}
.opt-name{font:500 16px var(--f-text)}

/* ===== Ergebnis-Sheet ===== */
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:var(--dim)}
.modal-card{max-height:calc(100dvh - var(--safe-top));overflow-y:auto}
.modal:not(.hidden) .modal-card{animation:hoch .24s ease-out}
.m-status{display:flex;align-items:center;gap:10px;padding:14px 20px 4px}
.m-kicker{font-size:12px;letter-spacing:.06em;color:var(--green);text-transform:uppercase}
.m-kicker.aus{color:var(--red-2)}
.m-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding:6px 20px 16px}
.modal-title{min-width:0;font:700 32px/1.05 var(--f-cond);color:var(--text)}
.modal-card .btns{padding-bottom:max(26px,env(safe-area-inset-bottom,0px))}
.m-punkte{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.m-punkte-k{font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.modal-text{margin-top:12px}
.modal-rang{min-height:0;margin-top:4px;font-weight:600;color:var(--copper-text)}
.modal-rang:empty{display:none}
@keyframes hoch{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes einblenden{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.modal:not(.hidden),.mode-overlay:not(.hidden),.screen:not(.hidden){animation:fadein .2s ease-out}
.screen:not(.hidden) .screen-card{animation:einblenden .26s ease-out}

.toast{position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 12px);transform:translateX(-50%);z-index:70;max-width:calc(100vw - 32px);padding:10px 16px;background:var(--sheet);color:var(--text-2);border:1px solid var(--line-3);border-radius:10px;font-size:13px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.45)}

/* ===== Weitere Bildschirme (Stufe 1: nur Tokens und Schriften, Neugestaltung folgt) ===== */
.screen{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;overflow-y:auto;background:var(--dim);backdrop-filter:blur(6px)}
.screen-card,.mode-card{position:relative;width:100%;max-width:440px;max-height:calc(100dvh - 32px);overflow-y:auto;display:flex;flex-direction:column;background:var(--sheet);border:1px solid var(--line-2);border-radius:16px}
.screen-card{gap:10px;padding:18px;box-shadow:0 16px 40px rgba(0,0,0,.45)}
.mode-overlay .mode-card{max-width:430px;border-radius:20px 20px 0 0;border-width:1px 0 0}
.screen-title{margin:0;font:700 26px/1.1 var(--f-cond);color:var(--text);text-align:center}
.screen-text{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted);text-align:center}
.mode-sub{margin:0;font:400 11px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:center}
.screen .mode-sub{margin-bottom:0}
.feld{display:block;width:100%;min-height:52px;padding:10px 14px;background:var(--input-bg);border:1px solid var(--line-3);border-radius:10px;color:var(--text);font:400 17px var(--f-text)}
.feld:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px var(--copper-halo)}
.feld-code{text-align:center;text-transform:uppercase;letter-spacing:.35em;font:600 20px var(--f-mono);padding-left:calc(14px + .35em)}
.feld-fehler{min-height:16px;font-size:13px;line-height:1.35;color:var(--red-2);text-align:center}
.code-form{display:flex;flex-direction:column;gap:8px}
.trenner{display:flex;align-items:center;gap:10px;font:400 11px var(--f-mono);letter-spacing:.14em;color:var(--muted-3);text-transform:uppercase}
.trenner::before,.trenner::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* Umschalter-Pillen (Bestenliste, Lobby) */
.paare-row{display:flex;gap:6px}
.paare-row .paare-opt,.lobby-modi .paare-opt{flex:1;min-width:0}
.screen .paare-opt{min-height:44px;padding:4px 8px;background:var(--btn);border:1px solid var(--line-3);border-radius:10px;color:var(--muted);font:500 13px var(--f-text);cursor:pointer}
.screen .paare-opt.active{border-color:var(--copper);color:var(--text);box-shadow:0 0 0 1px var(--copper) inset}
.paare-opt:disabled{cursor:default;opacity:.6}
.paare-opt.active:disabled{opacity:1}

/* Bestenliste */
.tabs{display:flex;gap:6px}
.tab{flex:1;min-width:0;min-height:44px;padding:4px 2px;background:var(--btn);border:1px solid var(--line-3);border-radius:10px;color:var(--muted);font:500 12px var(--f-text);cursor:pointer}
.tab:hover{border-color:var(--muted-2)}
.tab.active{border-color:var(--copper);color:var(--text);box-shadow:0 0 0 1px var(--copper) inset}
.best-status{min-height:16px;font-size:12px;line-height:1.35;color:var(--muted);text-align:center}

/* Lobby */
.raumcode{font:600 38px/1.1 var(--f-mono);letter-spacing:.3em;padding-left:.3em;text-align:center;color:var(--text);text-shadow:0 0 14px var(--copper-glow)}
.spieler-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.spieler{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;background:var(--input-bg);border:1px solid var(--line-3);border-radius:10px;font-size:14px;font-weight:600;color:var(--text-2)}
.spieler.ich{border-color:var(--copper)}
.sp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.krone{color:var(--copper-text);font-size:18px}
.lobby-banner{padding:10px 12px;border:1px solid var(--copper);background:var(--copper-row);border-radius:10px;color:var(--copper-text);font-size:13px;line-height:1.4;text-align:center}
.lobby-modi{display:flex;gap:6px}
.lobby-desc,.lobby-hinweis{min-height:16px;font-size:12.5px;line-height:1.4;color:var(--muted);text-align:center}
.lobby-hinweis{color:var(--text-3)}

/* Countdown */
.countdown{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--dim-cd)}
.countdown.los{pointer-events:none;background:transparent;animation:fadeout .6s ease-out .1s forwards}
.countdown.los .countdown-titel{visibility:hidden}
@keyframes fadeout{to{opacity:0}}
@keyframes zaehlen{0%{transform:scale(2.2);opacity:0}25%{transform:scale(1);opacity:1}100%{transform:scale(.8);opacity:.25}}

/* Wettkampf-Ergebnis */
.konfetti-box{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.konfetti-box i{position:absolute;top:-14px;width:7px;height:12px;animation:fallen var(--dauer,2.4s) linear var(--delay,0s) forwards}
@keyframes fallen{to{transform:translate3d(var(--dx,0),110vh,0) rotate(720deg)}}
.erg-gewinner{min-height:20px;text-align:center;font:700 22px var(--f-cond);color:var(--copper-text);text-shadow:0 0 14px var(--copper-glow);animation:glimmen 1.4s ease-in-out infinite alternate}
@keyframes glimmen{from{text-shadow:0 0 6px var(--copper-glow)}to{text-shadow:0 0 20px var(--copper)}}
.erg-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.erg-zeile{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;min-height:50px;padding:6px 12px;background:var(--input-bg);border:1px solid var(--line-3);border-radius:10px;font-size:14px;color:var(--text-2)}
.erg-zeile.ich{border-color:var(--copper)}
.erg-zeile.gold{border-color:var(--copper);background:var(--copper-row);box-shadow:0 0 14px var(--copper-glow)}
.erg-zeile .pl{font:700 16px var(--f-mono);color:var(--copper-text)}
.erg-zeile .nm{min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.erg-zeile small{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.erg-wert{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

/* Konto-Bildschirm (Kopf und Listenzeilen im Menü-Stil) */
#authScreen{z-index:42}
.menu-zu{flex:none}

/* ===== Splash ===== */
.splash{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;align-items:center;overflow:hidden;cursor:pointer;transition:opacity .35s;padding:var(--safe-top) 0 var(--safe-bottom)}
.splash.aus{opacity:0;pointer-events:none}
.splash-inner{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:0 24px;position:relative}
.sp-status{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted-3);letter-spacing:.08em;text-transform:uppercase}
.sp-logo{display:flex;align-items:center;gap:6px;color:var(--copper)}
.splash-logo{font:700 clamp(72px,28vw,112px)/.9 var(--f-cond);letter-spacing:-.01em;color:var(--text);animation:flackern 1.5s steps(1) both}
.sp-bolt{flex:none;height:clamp(52px,19vw,76px);width:auto;filter:drop-shadow(0 0 10px var(--copper-glow))}
.sp-zig{display:flex;align-items:center;gap:8px;width:220px;color:var(--copper)}
.sp-zig i{flex:1;height:2px;background:var(--trace)}
.sp-def{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:-8px;animation:fadein .6s ease-out .5s both}
.sp-aussprache{font-size:20px;letter-spacing:.04em;color:var(--text-3)}
.sp-def .mono{font-size:11.5px;color:var(--muted-3);text-align:center}
.splash-tipp{flex:none;padding-bottom:16px;font-size:13px;color:var(--copper-text);animation:fadein .6s ease-out .9s both}
@keyframes flackern{0%{opacity:0}8%{opacity:1}12%{opacity:.15}16%{opacity:1}30%{opacity:.55}34%{opacity:1}60%{opacity:.8}62%{opacity:1}100%{opacity:1}}
.splash-funken{position:absolute;left:50%;top:50%;width:0;height:0}
.splash-funken i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--copper);box-shadow:0 0 6px 2px var(--copper-glow);opacity:0;animation:funke var(--dauer,700ms) ease-out var(--delay,0ms) infinite}
@keyframes funke{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

/* ===== Effekte ===== */
.schwebe{position:absolute;left:50%;bottom:100%;font:700 22px var(--f-cond);letter-spacing:.04em;pointer-events:none;white-space:nowrap;z-index:6;transform:translateX(-50%);animation:schweben 1s ease-out forwards}
.schwebe.plus{color:var(--green);text-shadow:0 0 10px var(--seg-green-glow)}
.schwebe.minus{color:var(--red-2)}
@keyframes schweben{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-46px) scale(1)}}
.funken{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:6}
.funken i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--pulse);box-shadow:0 0 6px 2px var(--seg-green-glow);animation:burst .7s ease-out forwards}
@keyframes burst{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.pop{animation:pop .3s cubic-bezier(.2,1.5,.4,1) backwards}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}

/* Weniger Bewegung: keine Animationen */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .splash-funken,.funken,.konfetti-box{display:none}
}