/* =====================================================================
   Scribble Circuit — Oberfläche
   =====================================================================

   Wie Aufkleber auf einem Skizzenblock: helle Papierkarten mit dicker
   Tintenkante und hartem, versetztem Schatten. Markergelb als Signal,
   Rennrot und Blau für die beiden Hauptwege. Schrift: Rubik, der Titel
   in Permanent Marker.
   ===================================================================== */

:root{
  --tinte:#1d2433;
  --tinte-2:#2b3447;
  --papier:#fffdf6;
  --papier-2:#f3efe3;
  --matt:#6b7385;
  --gelb:#ffd23f;
  --rot:#e8402a;
  --blau:#2f7fe0;
  --gruen:#21a35b;
  --kante:2.5px solid var(--tinte);
  --schatten:4px 4px 0 var(--tinte);
  --schrift:"Rubik",system-ui,sans-serif;
  --marker:"Permanent Marker","Rubik",system-ui,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:#9fcbe9;color:var(--tinte);font-family:var(--schrift);font-size:15px;line-height:1.45;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
body.im-spiel{user-select:none;-webkit-user-select:none}

/* --- Bausteine --------------------------------------------------------- */

.kicker{margin:0;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--matt)}
.notiz{margin:0;color:var(--matt);font-size:13.5px}
.karte{background:var(--papier);border:var(--kante);border-radius:14px;box-shadow:var(--schatten)}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 16px;
  border:var(--kante);border-radius:11px;background:var(--papier);box-shadow:3px 3px 0 var(--tinte);
  font-weight:700;font-size:15px;white-space:nowrap;transition:transform .08s,box-shadow .08s,background-color .12s}
.knopf:hover{background:#fff}
.knopf:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinte)}
.knopf:focus-visible,.symbol:focus-visible,.wahl button:focus-visible,.code-felder input:focus-visible,.feld input:focus-visible,.farbfeld:focus-visible{outline:3px solid var(--blau);outline-offset:2px}
.knopf:disabled{opacity:.45;cursor:default;transform:none;box-shadow:3px 3px 0 var(--tinte)}
.knopf svg{width:19px;height:19px;flex:none}
.knopf.primaer{background:var(--gelb)}
.knopf.primaer:hover{background:#ffdb5e}
.knopf.primaer.blau{background:var(--blau);color:#fff}
.knopf.primaer.blau:hover{background:#4590eb}
.knopf.primaer.rot{background:var(--rot);color:#fff}
.knopf.primaer.rot:hover{background:#f05a45}
.knopf.primaer.rot svg{fill:var(--gelb);stroke:var(--tinte);stroke-width:1.6}
.chaos-titel{display:inline-flex;align-items:center;gap:10px}
.neu{display:inline-block;padding:1px 7px 2px;border:2px solid var(--tinte);border-radius:6px;background:var(--gelb);color:var(--tinte);
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-4deg)}
.knopf.gross{height:58px;font-size:18px;justify-content:space-between;padding:0 18px;border-radius:13px}
.knopf.klein{height:36px;padding:0 12px;font-size:13.5px;border-width:2px;box-shadow:2px 2px 0 var(--tinte)}
.knopf.leise{box-shadow:none;border-color:transparent;background:transparent;color:var(--tinte-2)}
.knopf.leise:hover{border-color:var(--tinte);background:var(--papier)}

.symbol{display:inline-grid;place-items:center;width:42px;height:42px;border:var(--kante);border-radius:11px;background:var(--papier);box-shadow:3px 3px 0 var(--tinte)}
.symbol svg{width:21px;height:21px}
[data-ton] .aus{display:none}
body.stumm [data-ton] .an{display:none}
body.stumm [data-ton] .aus{display:inline}

/* --- Ebenen (Start, Lobby) -------------------------------------------- */

.ebene{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;overflow:auto;
  padding:0 clamp(16px,4vw,56px) calc(env(safe-area-inset-bottom,0px) + 20px + var(--tastatur,0px))}
.ebene::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,253,246,.0) 0%,rgba(255,253,246,0) 40%,rgba(29,36,51,.18) 100%)}
.lobby::before{background:rgba(243,239,227,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

.leiste-oben{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 16px) 0 12px}
.luecke{flex:1}
.zurueck{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px 0 8px;border:var(--kante);border-radius:11px;
  background:var(--papier);box-shadow:3px 3px 0 var(--tinte);color:var(--tinte);text-decoration:none;font-weight:700;font-size:14px}
.zurueck svg{width:19px;height:19px}

/* Start */
.start-raster{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,400px);gap:clamp(24px,5vw,72px);align-items:center;padding:12px 0 24px}
.marke{max-width:620px;background:rgba(255,253,246,.9);border:var(--kante);border-radius:18px;box-shadow:6px 6px 0 var(--tinte);padding:clamp(18px,3vw,30px);transform:rotate(-.6deg)}
.titel{margin:8px 0 12px;font:400 clamp(46px,7.5vw,92px)/.92 var(--marker);letter-spacing:.01em;color:var(--tinte)}
.titel span{display:inline-block;color:var(--rot);transform:rotate(-2deg) translateX(.3em);
  background:linear-gradient(transparent 62%,var(--gelb) 62%,var(--gelb) 90%,transparent 90%)}
.unterzeile{margin:0 0 18px;font-size:16px;max-width:52ch;color:var(--tinte-2)}
.steuerung{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 20px;margin:0}
.steuerung div{display:flex;align-items:baseline;gap:8px}
.steuerung dt{font-weight:800;font-size:12.5px;padding:2px 7px;border:2px solid var(--tinte);border-radius:6px;background:#fff;white-space:nowrap}
.steuerung dd{margin:0;color:var(--matt);font-size:13.5px}

.tafel{display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--papier);border:var(--kante);border-radius:18px;box-shadow:6px 6px 0 var(--tinte);transform:rotate(.5deg)}
.feld{display:flex;flex-direction:column;gap:6px}
.feld-titel{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--matt)}
.feld input{height:46px;padding:0 14px;border:var(--kante);border-radius:11px;background:#fff;font-size:17px;font-weight:600}
.trenner{display:flex;align-items:center;gap:10px;margin:6px 0 0;color:var(--matt);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.trenner::before,.trenner::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--tinte) 0 6px,transparent 6px 11px);opacity:.35}
.beitreten{display:flex;gap:8px}
.code-felder{display:flex;gap:6px;flex:1}
.code-felder input{width:0;flex:1;min-width:0;height:48px;text-align:center;border:var(--kante);border-radius:10px;background:#fff;
  font:800 21px/1 var(--schrift);text-transform:uppercase}
.code-felder.falsch input{border-color:var(--rot);animation:wackeln .3s}
@keyframes wackeln{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.beitreten .knopf{height:48px}
.fehler{margin:0;min-height:1em;color:var(--rot);font-weight:600;font-size:14px}
.fehler:empty{display:none}

.fuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 12px;font-size:12.5px;
  background:rgba(255,253,246,.85);border:2px solid var(--tinte);border-radius:10px;align-self:flex-start}
.fuss a{color:var(--tinte);font-weight:600}
.fuss-notiz{color:var(--matt)}

/* --- Anleitung als Text unter dem Startmenü ------------------------------------
   .start-buehne füllt den Bildschirm bis auf einen Streifen von 56px, in dem der
   Kopf der Anleitung hervorschaut — Kopfleiste und Startmenü stehen also wie
   vorher, und man sieht, dass es darunter weitergeht. Ist das Menü höher als der
   Bildschirm (Handy), wächst die Bühne mit, und die Anleitung folgt darunter.
   Die Karte (.karte: Papier, Tintenkante, Schatten) steht links bündig wie die
   Titelkarte. Text, den das SEO-Werkzeug an der Markierung einsetzt
   (section.seo-text), sieht genauso aus. */

#menue{gap:16px}
.start-buehne{flex:none;width:100%;min-height:calc(100% - 56px);display:flex;flex-direction:column}
.info-text{flex:none;align-self:flex-start;width:min(760px,100%);padding:22px 26px 24px;display:grid;gap:12px;
  user-select:text;-webkit-user-select:text}
.info-text h2{margin:0;font:400 clamp(28px,3.6vw,38px)/1.1 var(--marker);color:var(--tinte)}
.info-text h3{margin:6px 0 0;font-size:19px;font-weight:800;line-height:1.2;color:var(--tinte)}
.info-text p{margin:0;font-size:15.5px;line-height:1.55;color:var(--tinte-2)}
.info-text a{color:var(--blau);font-weight:600}
.info-text :is(ul,ol){margin:0;padding-left:22px;display:grid;gap:6px;font-size:15.5px;line-height:1.5;color:var(--tinte-2)}
.info-text .seo-text{display:grid;gap:12px;margin-top:6px}
.info-tasten{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 20px}
.info-tasten div{display:flex;align-items:baseline;gap:8px}
.info-tasten dt{font-weight:800;font-size:13px;padding:2px 7px;border:2px solid var(--tinte);border-radius:6px;background:#fff;white-space:nowrap}
.info-tasten dd{margin:0;font-size:14.5px;color:var(--tinte-2)}

/* Lobby */
.lobby-raster{flex:1;display:grid;gap:18px;padding:8px 0 16px;width:100%;max-width:1180px;margin:0 auto;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);
  grid-template-areas:"einladung strecke spieler" "einstellungen strecke spieler" "fuss fuss fuss";align-content:start}
.einladung{grid-area:einladung;padding:18px}
.streckenkarte{grid-area:strecke;padding:16px;display:flex;flex-direction:column;gap:10px}
.spielerliste{grid-area:spieler;padding:16px}
.einstellungen{grid-area:einstellungen;padding:16px;display:flex;flex-direction:column;gap:10px}
.lobby-fuss{grid-area:fuss;display:flex;align-items:center;justify-content:flex-end;gap:16px}
.lobby h2{margin:0 0 6px;font-size:18px;font-weight:800;display:flex;align-items:baseline;gap:8px}
.zahl{color:var(--matt);font-weight:600;font-size:14px}

.code-gross{display:flex;gap:6px;margin:8px 0 12px}
.code-gross span{display:grid;place-items:center;width:46px;height:58px;border:var(--kante);border-radius:10px;background:#fff;
  font:400 32px/1 var(--marker);box-shadow:2px 2px 0 var(--tinte)}
.code-gross.wartet span{color:var(--matt)}
.code-gross.lokal span{width:auto;padding:0 16px;font-size:24px}
.einladung-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}

#lobbyKarte.leer-antippbar{cursor:pointer}
#lobbyKarte.leer-antippbar:hover,#lobbyKarte.leer-antippbar:focus-visible{border-color:#e0a800}
#lobbyKarte{width:100%;flex:1;min-height:240px;border-radius:10px;border:2px solid var(--tinte);
  background:#fbf9f2 repeating-linear-gradient(0deg,transparent 0 23px,rgba(80,130,200,.14) 23px 24px),
  repeating-linear-gradient(90deg,transparent 0 23px,rgba(80,130,200,.14) 23px 24px)}
.strecken-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.vorlagen{display:flex;flex-wrap:wrap;gap:4px}
body.gast [data-nur-gastgeber]{display:none!important}

#liste{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
#liste li{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 6px 4px 8px;border:2px solid var(--tinte);border-radius:10px;background:#fff}
.farbfeld{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--tinte);padding:0}
.farbfeld:not(:disabled){cursor:pointer;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--tinte)}
.farbfeld:disabled{cursor:default;opacity:1}
.spieler-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marken{display:flex;gap:4px;flex:1}
.marke-klein{font-size:11px;font-weight:700;padding:1px 6px;border-radius:6px;background:var(--papier-2);color:var(--tinte-2)}
.marke-klein.du{background:var(--gelb)}
.ping{color:var(--matt);font-size:12px;font-variant-numeric:tabular-nums}
.zeile-knopf{display:grid;place-items:center;width:30px;height:30px;border:none;border-radius:8px;background:transparent;color:var(--matt)}
.zeile-knopf:hover{background:var(--papier-2);color:var(--tinte)}
.zeile-knopf svg{width:16px;height:16px}

.einstellung{display:flex;flex-direction:column;gap:5px}
.einstellung > span{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--matt)}
.wahl{display:flex;flex-wrap:wrap;gap:0;border:2px solid var(--tinte);border-radius:10px;overflow:hidden;background:#fff;align-self:flex-start}
.wahl button{height:34px;padding:0 12px;border:none;border-right:2px solid var(--tinte);background:transparent;font-weight:600;font-size:14px}
.wahl button:last-child{border-right:none}
.wahl button[aria-pressed="true"]{background:var(--gelb);font-weight:800}
body.gast .einstellungen .wahl button{cursor:default}
.warten{margin:0;color:var(--tinte-2);font-weight:600;background:var(--papier);border:2px solid var(--tinte);border-radius:10px;padding:8px 12px}
body.gastgeber .lobby-fuss .warten{display:none}

/* --- Zeichenbrett ----------------------------------------------------- */

.brett{position:fixed;inset:0;z-index:20;background:#fbf9f2}
#brettCv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.brett-oben{position:absolute;left:16px;right:16px;top:calc(env(safe-area-inset-top,0px) + 14px);pointer-events:none;display:flex}
.brett-oben > div{background:rgba(255,253,246,.92);border:var(--kante);border-radius:12px;box-shadow:3px 3px 0 var(--tinte);padding:10px 14px;max-width:560px}
.brett-oben h2{margin:0;font:400 24px/1.1 var(--marker)}
.brett-tipp{margin:4px 0 0;font-size:13.5px;color:var(--tinte-2)}
.brett-unten{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;pointer-events:none}
.brett-unten > *{pointer-events:auto}
.brett-unten .einstellung{background:rgba(255,253,246,.92);border:2px solid var(--tinte);border-radius:12px;padding:6px 8px}
.brett-info{margin:0;font-weight:800;font-size:15px;background:rgba(255,253,246,.92);border:2px solid var(--tinte);border-radius:10px;padding:8px 12px}
.brett-info:empty{display:none}
.brett-info.fehler{color:var(--rot)}

/* --- HUD -------------------------------------------------------------- */

.hud{position:fixed;inset:0;z-index:4;pointer-events:none;
  --oben:calc(env(safe-area-inset-top,0px) + 14px);--unten:calc(env(safe-area-inset-bottom,0px) + 14px)}
.hud-links{position:absolute;left:16px;top:var(--oben);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.platz,.runde,.uhr,.tacho,.zeiten{background:rgba(255,253,246,.94);border:var(--kante);border-radius:12px;box-shadow:3px 3px 0 var(--tinte)}
.platz{padding:2px 14px 4px;font:italic 900 44px/1 var(--schrift)}
.platz span{font-size:20px;color:var(--matt)}
.runde{padding:6px 12px;font-weight:700;font-size:14px}
.runde b{font-size:18px;font-weight:900}
.hud-mitte{position:absolute;left:50%;top:var(--oben);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.uhr{padding:6px 16px;font:italic 800 28px/1 var(--schrift);font-variant-numeric:tabular-nums}
.schluss{background:var(--rot);color:#fff;font-weight:800;padding:4px 10px;border-radius:8px;border:2px solid var(--tinte)}
.hud-rechts{position:absolute;right:68px;top:var(--oben);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.zeiten{margin:0;padding:6px 12px;display:grid;gap:1px;min-width:150px}
.zeiten div{display:flex;justify-content:space-between;gap:14px}
.zeiten dt{color:var(--matt);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;align-self:center}
.zeiten dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.feed li{background:rgba(29,36,51,.82);color:#fff;font-size:13px;padding:4px 10px;border-radius:8px;transition:opacity .5s}
.feed li b{filter:brightness(1.3)}
.feed li.weg{opacity:0}
.hud-menue{position:absolute;right:16px;top:var(--oben);pointer-events:auto}
/* Reset-Knopf: nur auf Touchgeräten. Steht rechts neben dem Platz, ohne die Anzeigen zu verschieben. */
.hud-reset{display:none;position:absolute;left:100%;top:0;margin-left:10px;pointer-events:auto;align-items:center;gap:7px;height:44px;padding:0 14px;
  border:var(--kante);border-radius:12px;background:rgba(255,253,246,.94);box-shadow:3px 3px 0 var(--tinte);font:800 14px/1 var(--schrift);color:var(--tinte);white-space:nowrap}
.hud-reset svg{width:20px;height:20px;flex:none;stroke-width:2.6}
.hud-reset:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinte)}
@media (pointer:coarse){.hud-reset{display:inline-flex}}
.minikarte{position:absolute;left:16px;bottom:var(--unten);width:clamp(120px,17vw,190px);height:clamp(120px,17vw,190px);
  background:rgba(255,253,246,.55);border:var(--kante);border-radius:14px;box-shadow:3px 3px 0 var(--tinte)}
.tacho{position:absolute;right:16px;bottom:var(--unten);padding:6px 14px 8px;display:flex;align-items:baseline;gap:6px}
.tacho b{font:italic 900 46px/1 var(--schrift);font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:right}
.tacho span{font-weight:700;color:var(--matt)}
.meldung{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) scale(.9);opacity:0;transition:opacity .2s,transform .2s;
  text-align:center;font:italic 900 40px/1 var(--schrift);color:var(--tinte);
  background:var(--papier);border:var(--kante);border-radius:16px;box-shadow:5px 5px 0 var(--tinte);padding:12px 22px}
.meldung.an{opacity:1;transform:translate(-50%,-50%) scale(1)}
.meldung small{display:block;margin-top:6px;font:700 15px/1.2 var(--schrift);font-style:normal;color:var(--tinte-2)}
.meldung.gut{background:var(--gelb)}
.meldung.gross{font-size:72px;padding:14px 34px}
.falsch{position:absolute;left:50%;top:44%;transform:translateX(-50%);background:var(--rot);color:#fff;font:italic 900 26px/1 var(--schrift);
  padding:10px 18px;border:var(--kante);border-radius:12px;box-shadow:4px 4px 0 var(--tinte);animation:blinken .8s infinite}
@keyframes blinken{50%{opacity:.4}}
.zurueck-hinweis{position:absolute;left:50%;top:21%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--papier);border:var(--kante);border-radius:14px;box-shadow:4px 4px 0 var(--tinte);padding:12px 18px;pointer-events:auto;text-align:center}
.zurueck-hinweis b{font:italic 900 26px/1 var(--schrift)}
.zurueck-hinweis kbd{font:800 13px/1 var(--schrift);padding:3px 7px;border:2px solid var(--tinte);border-radius:6px;background:#fff}
@media (pointer:coarse){.zurueck-hinweis .nur-tasten{display:none}}
/* Strafzeit nach dem Zurücksetzen: an derselben Stelle wie der Hinweis, der solange verschwindet. */
.strafe{position:absolute;left:50%;top:21%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--papier);border:var(--kante);border-radius:14px;box-shadow:4px 4px 0 var(--tinte);padding:10px 22px;text-align:center}
.strafe span{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--rot)}
.strafe b{font:italic 900 30px/1 var(--schrift);font-variant-numeric:tabular-nums}
.loop-tipp{display:none}
.brett.loop-modus .loop-tipp{display:block}
.brett.loop-modus #brettCv{cursor:pointer}
#btnBrettLoop[aria-pressed="true"]{background:var(--gelb)}

/* Touch */
.touch{position:fixed;inset:auto 0 0 0;z-index:6;display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 14px calc(env(safe-area-inset-bottom,0px) + 14px);pointer-events:none;touch-action:none}
.touch-links,.touch-rechts{display:flex;gap:12px;align-items:flex-end;pointer-events:auto}
.touch-knopf{display:grid;place-items:center;width:78px;height:78px;border:var(--kante);border-radius:18px;background:rgba(255,253,246,.78);
  box-shadow:3px 3px 0 var(--tinte);touch-action:none;user-select:none;-webkit-user-select:none}
.touch-knopf svg{width:36px;height:36px;stroke-width:3}
.touch-knopf.gas{height:118px;background:rgba(255,210,63,.88)}
.touch-knopf.bremse{background:rgba(232,64,42,.8);color:#fff}
.touch-rechts{position:relative}
.touch-knopf.klein{position:absolute;left:0;bottom:calc(100% + 12px);width:78px;height:56px}
.touch-knopf.drift span{font:900 17px/1 var(--schrift);letter-spacing:.06em}
.touch-knopf.gedrueckt{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinte);filter:brightness(.9)}
/* Joystick statt Pfeilen: lenkt nur seitwärts, darum eine flache Bahn mit Knauf. */
.touch-stick{display:none;position:relative;width:168px;height:96px;border:var(--kante);border-radius:48px;
  background:rgba(255,253,246,.6);box-shadow:3px 3px 0 var(--tinte);touch-action:none;user-select:none;-webkit-user-select:none}
.touch-stick::before{content:"";position:absolute;left:50%;top:22px;bottom:22px;width:2px;margin-left:-1px;background:rgba(29,36,51,.25)}
.touch-stick-knauf{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border:var(--kante);border-radius:50%;
  background:rgba(255,253,246,.95);box-shadow:2px 2px 0 var(--tinte);transition:transform .12s ease-out;pointer-events:none}
.touch-stick.gedrueckt .touch-stick-knauf{transition:none;background:var(--gelb)}
.touch.stick .touch-stick{display:block}
.touch.stick .touch-knopf[data-knopf="links"],.touch.stick .touch-knopf[data-knopf="rechts"]{display:none}
@media (pointer:coarse){
  body.im-spiel .tacho{bottom:calc(var(--unten) + 200px)}
  body.im-spiel .minikarte{bottom:calc(var(--unten) + 96px);width:110px;height:110px}
}

/* --- Schirme (Ergebnis, Menü, Verbinden) ---------------------------------- */

.schirm,.hinweis-3d{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(29,36,51,.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.karte-klein{padding:22px;width:min(380px,100%);max-height:calc(100dvh - 32px);overflow:auto;display:flex;flex-direction:column;gap:12px;text-align:center}
.karte-klein h2{margin:0;font:400 28px/1.1 var(--marker)}
.spalte{display:flex;flex-direction:column;gap:9px}
.ergebnis{padding:22px;width:min(640px,100%);max-height:calc(100% - 16px);overflow:auto;display:flex;flex-direction:column;gap:12px}
.tafel-kopf h2{margin:0;font:400 34px/1.1 var(--marker)}
.tafel-unter{margin:4px 0 0;color:var(--matt);font-weight:600}
.tabelle{width:100%;border-collapse:separate;border-spacing:0 5px}
.tabelle th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--matt);padding:0 10px}
.tabelle td{padding:8px 10px;background:#fff;border-top:2px solid var(--tinte);border-bottom:2px solid var(--tinte);font-variant-numeric:tabular-nums;font-weight:600}
.tabelle td:first-child{border-left:2px solid var(--tinte);border-radius:10px 0 0 10px;font-weight:900;width:36px;text-align:center}
.tabelle td:last-child{border-right:2px solid var(--tinte);border-radius:0 10px 10px 0}
.tabelle tr.ich td{background:var(--gelb)}
.wer{display:inline-flex;align-items:center;gap:8px;font-weight:800}
.wer i{width:14px;height:14px;border-radius:50%;border:2px solid var(--tinte)}
.wer small{font-weight:600;color:var(--matt)}
.tafel-fuss{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center}
.tafel-fuss .warten{flex-basis:100%;text-align:center}
.tafel-fuss.gastgeber .warten{display:none}
.tafel-fuss:not(.gastgeber) [data-nur-gastgeber]{display:none}
.notiz:empty{display:none}

.laden{display:flex;gap:8px;justify-content:center}
.laden i{width:12px;height:12px;border-radius:50%;background:var(--tinte);animation:huepfen 1s infinite}
.laden i:nth-child(2){animation-delay:.15s}
.laden i:nth-child(3){animation-delay:.3s}
@keyframes huepfen{50%{transform:translateY(-8px)}}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:40;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--tinte);color:#fff;font-weight:600;padding:10px 16px;border-radius:10px;transition:opacity .2s,transform .2s}
.toast.an{opacity:1;transform:translate(-50%,0)}

/* --- Schmal --------------------------------------------------------------- */

@media (max-width:980px){
  .lobby-raster{grid-template-columns:1fr 1fr;grid-template-areas:"einladung spieler" "strecke strecke" "einstellungen einstellungen" "fuss fuss"}
  #lobbyKarte{min-height:220px}
}
@media (max-width:760px){
  .hud-reset{width:44px;padding:0;justify-content:center}
  .hud-reset span{display:none}
  .start-raster{grid-template-columns:1fr;align-items:start;gap:16px}
  .marke{transform:none}
  .tafel{transform:none}
  .steuerung{grid-template-columns:repeat(2,auto)}
  .lobby-raster{grid-template-columns:1fr;grid-template-areas:"einladung" "strecke" "spieler" "einstellungen" "fuss"}
  .lobby-fuss{flex-direction:column;align-items:stretch}
  .hud-rechts{right:66px}
  .zeiten{min-width:0;font-size:13px}
  .platz{font-size:34px}
  .uhr{font-size:22px}
  .meldung.gross{font-size:56px}
  .brett-unten .knopf{height:40px}
}
@media (max-width:520px){
  .touch-knopf{width:66px;height:66px}
  .touch-knopf.gas{height:104px}
  .touch-links,.touch-rechts{gap:10px}
  .touch-stick{width:150px;height:86px}
  .touch-stick-knauf{width:60px;height:60px;margin:-30px 0 0 -30px}
  .hud-mitte{top:calc(var(--oben) + 52px)}
  .zeiten{display:none}
  .marke .steuerung{display:none}
  .info-text{padding:18px 14px 20px}
  .info-text h2{font-size:26px}
  .info-tasten{grid-template-columns:1fr}
}
@media (pointer:coarse){
  .marke .steuerung{display:none}
}

/* --- Handy im Querformat: wenig Höhe, deshalb kompakter -------------------- */
/* In Safari bleiben im Querformat oft nur etwa 265 px Höhe. Anzeigen rücken in eine Reihe,
   der Tacho wandert neben die Pedale, die Minikarte schrumpft. */
@media (orientation:landscape) and (max-height:440px){
  .hud{--oben:calc(env(safe-area-inset-top,0px) + 8px);--unten:calc(env(safe-area-inset-bottom,0px) + 8px)}
  .hud-links{flex-direction:row;align-items:center;gap:8px;left:12px}
  .hud-reset{position:static;margin-left:0;height:38px;width:38px;padding:0;justify-content:center}
  .hud-reset span{display:none}
  .platz{padding:1px 10px 3px;font-size:30px;box-shadow:2px 2px 0 var(--tinte)}
  .platz span{font-size:15px}
  .runde{padding:4px 10px;font-size:12px}
  .runde b{font-size:15px}
  .uhr{padding:4px 12px;font-size:20px}
  .hud-rechts{right:58px;gap:4px}
  .zeiten{padding:4px 8px;font-size:11px;min-width:0}
  .zeiten dt{font-size:10px}
  #zeileRekord{display:none}
  .feed li{font-size:11px;padding:2px 8px}
  .hud-menue{right:12px}
  .hud-menue,.symbol{width:38px;height:38px}
  .touch-knopf{width:62px;height:62px}
  .touch-knopf.gas{height:92px}
  .touch-knopf.klein{width:66px;height:48px}
  .touch-knopf.drift span{font-size:14px}
  .touch-stick{width:148px;height:76px}
  .touch-stick-knauf{width:54px;height:54px;margin:-27px 0 0 -27px}
  .minikarte,body.im-spiel .minikarte{width:84px;height:84px;left:12px;bottom:calc(var(--unten) + 76px)}
  .tacho,body.im-spiel .tacho{bottom:var(--unten);right:160px;padding:2px 10px 4px}
  .tacho b{font-size:28px}
  .tacho span{font-size:12px}
}

/* --- Steuerung anpassen ---------------------------------------------------- */

#btnSteuerung{margin-top:14px}
.steuerung-karte{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto}
.steuerung-karte .tafel-kopf h2{font-size:28px}
.tasten-tabelle td{padding:4px 8px}
.tasten-tabelle td:first-child{width:auto;text-align:left;font-weight:700}
.taste{min-width:96px;height:36px;padding:0 10px;border:2px solid var(--tinte);border-radius:8px;background:var(--papier);
  font-weight:800;font-size:14px;box-shadow:2px 2px 0 var(--tinte)}
.taste.leer{color:var(--matt);font-weight:600}
.taste.wartet{background:var(--gelb);animation:blinken 1s infinite}
.steuerung-optionen{display:flex;flex-wrap:wrap;gap:14px 24px}
.steuerung-fuss{display:flex;justify-content:flex-end;gap:10px}
.touch.gespiegelt{flex-direction:row-reverse}
.touch.gespiegelt .touch-rechts{flex-direction:row-reverse}
.touch.gespiegelt .touch-knopf.klein{left:auto;right:0}

/* --- Chaos-Modus im Rennen --------------------------------------------------- */

.sterne-zahl{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 8px;background:var(--gelb);border:var(--kante);border-radius:12px;box-shadow:3px 3px 0 var(--tinte)}
.sterne-zahl svg{width:24px;height:24px;fill:#fff;stroke:var(--tinte);stroke-width:1.8}
.sterne-zahl b{font:italic 900 24px/1 var(--schrift);font-variant-numeric:tabular-nums;min-width:1.4ch}
.sterne-zahl.neu{animation:stern-hops .35s ease-out}
@keyframes stern-hops{0%{transform:scale(1)}35%{transform:scale(1.22) rotate(-4deg)}100%{transform:scale(1)}}
.item-slot{position:relative;display:grid;place-items:center;width:62px;height:62px;background:var(--papier);border:var(--kante);border-radius:14px;box-shadow:3px 3px 0 var(--tinte);transform:rotate(-2deg)}
.item-slot.leer{background:rgba(255,253,246,.55);border-style:dashed;box-shadow:none}
.item-slot .item-bild svg{width:36px;height:36px;stroke-width:2;color:var(--rot)}
.item-slot kbd{position:absolute;right:-10px;bottom:-9px;min-width:22px;padding:1px 5px;background:var(--tinte);color:#fff;border-radius:6px;font:700 11px/1.5 var(--schrift);text-align:center}
.item-slot.leer kbd{display:none}
.item-slot.neu{animation:stern-hops .35s ease-out}
.zustand{display:flex;flex-direction:column;gap:3px;padding:5px 10px 7px;background:rgba(255,253,246,.94);border:var(--kante);border-radius:12px;box-shadow:3px 3px 0 var(--tinte)}
.zustand span{font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--matt)}
.zustand i{display:block;width:96px;height:8px;border-radius:4px;background:rgba(29,36,51,.15);overflow:hidden}
.zustand b{display:block;height:100%;background:var(--gruen);transform-origin:left center;transition:transform .2s}
.zustand[data-stufe="mittel"] b{background:var(--gelb)}
.zustand[data-stufe="schlecht"] b{background:var(--rot)}
.touch-knopf.item{left:auto;right:0;background:rgba(255,253,246,.92);color:var(--rot)}
.touch.gespiegelt .touch-knopf.item{right:auto;left:0}
.touch-knopf.item svg{width:30px;height:30px;stroke-width:2.2}
.meldung.chaos{background:var(--rot);color:#fff}
.meldung.chaos small{color:#ffe9a8}
.mod-anzeige{background:#5b3fd1;color:#fff;font-weight:800;padding:4px 12px;border-radius:999px;border:2px solid var(--tinte);box-shadow:3px 3px 0 var(--tinte);white-space:nowrap;animation:mod-puls 1s ease-in-out infinite}
.mod-anzeige[data-art="eis"]{background:#2f7fe0}
.mod-anzeige[data-art="mond"]{background:#2b2560}
.mod-anzeige[data-art="turbo"]{background:#f08a24}
.mod-anzeige[data-art="spiegel"]{background:#ef6fb0}
.mod-anzeige[data-art="riesen"]{background:#21a35b}
.mod-anzeige[data-art="flipper"]{background:#9b4fd8}
@keyframes mod-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.mod-anzeige{animation:none}}
@media (max-width:700px){
  .sterne-zahl{padding:2px 8px 2px 6px}
  .sterne-zahl svg{width:18px;height:18px}
  .sterne-zahl b{font-size:18px}
  .item-slot{width:48px;height:48px;border-radius:11px}
  .item-slot .item-bild svg{width:28px;height:28px}
  .zustand{padding:3px 8px 5px}
  .zustand span{display:none}
  .zustand i{width:60px}
  .mod-anzeige{font-size:12px;padding:2px 9px}
}

/* --- Meine Strecken -------------------------------------------------- */
.slots-karte{width:min(720px,100%);max-height:calc(100dvh - 32px);overflow:auto}
.slots-karte .tafel-kopf h2{font-size:28px}
.slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.slots{grid-template-columns:repeat(2,1fr)}}
.slot{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px;border:2px solid var(--tinte);border-radius:12px;background:#fff}
.slot.leer{background:var(--papier-2);border-style:dashed}
.slot.aktiv{box-shadow:0 0 0 3px var(--gelb)}
.slot-bild{width:100%;height:96px;display:block;border-radius:8px;
  background:#fbf9f2 repeating-linear-gradient(0deg,transparent 0 15px,#e7e2d3 15px 16px),
  repeating-linear-gradient(90deg,transparent 0 15px,#e7e2d3 15px 16px)}
.slot.leer .slot-bild{background:transparent;height:40px}
.slot-text{display:flex;flex-direction:column;line-height:1.3}
.slot-text small{color:var(--matt);font-size:12.5px}
.slot-knoepfe{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.slot-knoepfe .knopf{flex:1 1 auto}
.slot-knoepfe .slot-weg{position:absolute;top:6px;right:6px;width:32px;height:32px;padding:0;background:rgba(255,253,246,.9)}
.slot-knoepfe .slot-weg svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.slot-knoepfe .knopf.sicher{background:var(--rot);color:#fff;border-color:var(--tinte);width:auto;padding:0 10px}
.slots-hinweis{margin:0;font-weight:700;min-height:1.45em}
.slots-hinweis.fehler{color:var(--rot)}
.slots-karte .steuerung-fuss{align-items:center}
.slots-notiz{margin:0 auto 0 0}