/* Stuntbahn – Oberfläche. Quer- und Hochformat, Touch-Ziele ≥ 48 px, keine Wischgesten. */
* { box-sizing: border-box; }
/* Sichere Ränder (Notch/Kamerainsel, Gestenleiste) – als Variablen, damit Tests sie simulieren können */
:root { --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0e1116; color: #f3f4f6;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* dvh: sichtbare Höhe (Safari hochkant mit Adressleiste) = innerHeight des Renderers → kein Strecken */
/* Kein versehentlicher Zoom (n15): Spielfläche/Touch-Tasten „none“ (s. u.), Knöpfe/Karten/Listen „manipulation“
   (Tippen ja, Doppeltipp-Zoom nein, keine 300-ms-Verzögerung), Scrollbereiche „pan-y“ (senkrecht scrollen ja, Zoomen
   nein) – touch-action wirkt nur bis zum nächsten Scrollbereich, deshalb braucht jeder Scrollbereich seinen Wert.
   Eingaben ≥ 16 px Schrift (sonst zoomt iOS beim Antippen). */
button, a, label, select, input, textarea, .card, .trk, .chip, #replayui { touch-action: manipulation; }
#menu, #menu .col, #pause .card, #result .card, .sheetc, .sheetc .scroll { touch-action: pan-y; }
input, select, textarea { font-size: max(16px, 1em); }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui button, #ui .card, #ui input { pointer-events: auto; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }

.screen { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: max(12px, var(--sat)) max(16px, var(--sar)) max(12px, var(--sab)) max(16px, var(--sal)); }
.screen.show { display: flex; }
#loading { background: radial-gradient(ellipse at 50% 40%, #243142, #0b0e13); flex-direction: column; gap: 18px; pointer-events: auto; }
.logo { font-weight: 900; font-size: clamp(34px, 7vw, 64px); letter-spacing: 0.06em; font-style: italic; text-shadow: 0 3px 0 #000a, 0 0 24px #ff5a1f55; }
.logo b { color: #ff6a2a; }
#loading .bar { width: min(420px, 70vw); height: 8px; background: #ffffff22; border-radius: 4px; overflow: hidden; }
#loading .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff6a2a, #ffc23d); transition: width .25s; }
#loading p { margin: 0; opacity: .8; text-align: center; max-width: 80vw; }

.card { background: rgba(13, 17, 23, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid #ffffff1c; border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 30px #0008; }
#menu { gap: 14px; align-items: stretch; background: linear-gradient(90deg, #0b0e13cc 0%, #0b0e1366 45%, #0b0e13cc 100%); pointer-events: auto; }
#menu .col { display: flex; flex-direction: column; gap: 8px; justify-content: center; min-width: 0; }
#menu .left { flex: 1 1 46%; max-width: 480px; }
#menu .right { flex: 1 1 54%; max-width: 520px; }
.track .tname { font-size: 20px; font-weight: 800; }
/* Schwierigkeit + Schalter 3D/flach in einer Zeile (n19) */
.segrow { display: flex; gap: 8px; align-items: stretch; }
.segrow .seg { flex: 1 1 auto; min-width: 0; }
.segrow > button.flat { flex: 0 0 auto; white-space: nowrap; min-height: 48px; min-width: 48px; padding: 8px 12px; border-radius: 12px; background: #ffffff14; border: 1px solid #ffffff22; font-weight: 600; font-size: 15px; }
.segrow > button.flat.on { background: #ff6a2a; border-color: #ff9a6a; color: #fff; }
.segrow .seg.mode { flex: 0 0 auto; }   /* Streckenart (n22): flach / Hochstraße / Gelände (Symbole) */
.seg.mode > button { min-width: 48px; padding: 8px 4px; font-size: 19px; }
/* Streckenkarte mit Ebenen (n19): höher = heller, mit Schatten */
.track .tmap { float: right; width: 118px; height: 118px; margin: 0 0 4px 8px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.track .tmeta { opacity: .8; font-size: 14px; margin-top: 2px; }
.track .stunts { font-size: 20px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.track .bests { display: flex; gap: 12px; margin-top: 8px; font-size: 14px; opacity: .92; flex-wrap: wrap; }
.lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; margin-top: 4px; }
.hint { font-size: 13px; opacity: .85; line-height: 1.35; min-height: 2.6em; }
.row, .seg { display: flex; gap: 8px; flex-wrap: wrap; }
.row > button, .seg > button { flex: 1 1 0; min-height: 48px; min-width: 48px; padding: 8px 10px; border-radius: 12px; background: #ffffff14; border: 1px solid #ffffff22; font-weight: 600; font-size: 15px; white-space: nowrap; }
.seg { background: #00000044; padding: 4px; border-radius: 14px; }
.seg > button { background: transparent; border-color: transparent; }
.seg > button.on, .row > button.on { background: #ff6a2a; border-color: #ff9a6a; color: #fff; }
button:active { transform: translateY(1px); filter: brightness(1.1); }
button.big { min-height: 56px; border-radius: 14px; font-size: 20px; font-weight: 800; background: #ffffff1a; border: 1px solid #ffffff2a; padding: 10px 18px; }
button.go { background: linear-gradient(180deg, #ff7a36, #e24e10); border-color: #ffa070; box-shadow: 0 6px 18px #ff5a1f55; }
.sw { position: relative; }
.sw::before { content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: -2px; border: 1px solid #fff8; }

#hud { position: absolute; inset: 0; display: none; }
#hud.show { display: block; }
#hud .tl { position: absolute; top: max(10px, var(--sat)); left: max(14px, var(--sal)); text-shadow: 0 2px 4px #000c; }
#hud .time { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
#hud .best { font-size: 14px; opacity: .85; }
/* n34 KI-Gegner: Platz und Abstände unter der Zeit (TODO n34-Heavy: Größe/Lage hoch + quer am Bild abstimmen) */
#hud .gpos { display: none; margin-top: 4px; font-size: 15px; line-height: 1.25; }
#hud .gpos.show { display: block; }
#hud .gpos b { display: block; font-size: 20px; font-weight: 800; }
#hud .gpos i { display: block; font-style: normal; font-size: 13px; opacity: .9; font-variant-numeric: tabular-nums; }
#hud .gpos i.v { color: #ffd9a0; }
#hud .gpos i.h { color: #b9e6ff; }
#result .card > * { flex-shrink: 0; }   /* n34: lange Ergebnisse (Zieltabelle) scrollen statt Zeilen zu stauchen */
.gnote { font-size: 13px; opacity: .85; line-height: 1.35; text-align: center; }
.gtab { width: 100%; max-width: 420px; margin: 8px auto 2px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.gtab td { padding: 3px 6px; border-bottom: 1px solid #ffffff1a; }
.gtab td:nth-child(3), .gtab td:nth-child(4) { text-align: right; }
.gtab tr.me td { font-weight: 800; color: #ffe08a; }
.gtab .gnr { display: inline-block; min-width: 20px; padding: 0 4px; border-radius: 10px; text-align: center; color: #111; font-weight: 800; font-size: 12px; }
#hud .tc { position: absolute; top: max(12px, var(--sat)); left: 50%; transform: translateX(-50%); font-size: 18px; font-weight: 700; text-shadow: 0 2px 4px #000c; }
/* Schnell-Umschalter oben rechts: Zeile(n) von rechts, höchstens 4 je Zeile (hochkant 3) – Platz für weitere
   Knöpfe (die nächsten Zeilen wachsen nach unten); über der Touch-Fläche (z-index), fern von den Daumen */
#hud .tr { position: absolute; top: max(8px, var(--sat)); right: max(10px, var(--sar)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 2; }
#hud .rbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(4 * 52px + 3 * 8px); }
#hud .rb.line svg { width: 28px; height: 28px; vertical-align: middle; }
#hud .rb.line .x { display: none; }
#hud .rb.line.off svg { opacity: .55; } #hud .rb.line.off .x { display: inline; }
.seg.dis { opacity: .45; } .seg > button:disabled { cursor: not-allowed; }
.rb { width: 52px; height: 52px; border-radius: 14px; background: rgba(12, 16, 22, .6); border: 1px solid #ffffff2a; font-size: 22px; pointer-events: auto; }
#hud .speed { position: absolute; bottom: max(12px, var(--sab)); left: 50%; transform: translateX(-50%); text-shadow: 0 2px 6px #000; display: flex; align-items: baseline; gap: 6px; }
#hud .speed b { font-size: 40px; font-weight: 900; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
#hud .speed span { font-size: 14px; opacity: .8; }
/* G-Kräfte (n24): dezente Zahl neben Tempo und Gang (ab 4 G orange) */
#hud .gf { font-style: normal; font-size: 15px; font-weight: 800; opacity: .85; font-variant-numeric: tabular-nums; min-width: 4.2ch; }
#hud .gf:empty { display: none; }
#hud .gf.hi { color: #ffb347; opacity: 1; }
/* rundes G-Meter: Cockpit (auf der Instrumentenhutze), Replay und Kino-Replay (Einblendung mit km/h) */
#gmeter { position: absolute; display: none; pointer-events: none; z-index: 1; }
/* n39 Minikarte: nur Rahmen und Tippfläche, die Karte selbst zeichnet WebGL darunter (gfx/minikarte.js) */
#karte { position: absolute; display: none; z-index: 1; border-radius: 12px; pointer-events: auto; touch-action: none; cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(255, 255, 255, .17), 0 3px 12px rgba(0, 0, 0, .3); -webkit-tap-highlight-color: transparent; }
#karte.on { display: block; }
#gmeter.show { display: block; }
#hud .gear { font-style: normal; font-size: 16px; font-weight: 800; background: #ffffff22; border-radius: 6px; padding: 1px 6px; }
#hud .hint2 { position: absolute; top: max(48px, calc(var(--sat) + 40px)); left: 50%; transform: translateX(-50%); background: rgba(12, 16, 22, .62); border: 1px solid #ffffff22; border-radius: 10px; padding: 5px 12px; font-size: 15px; font-weight: 700; opacity: 0; transition: opacity .25s; pointer-events: none;
  /* nie unter die Knopfleiste oben rechts: schmales Querformat → zweizeilig */
  width: max-content; max-width: calc(100vw - 2 * (4 * 52px + 3 * 8px + max(10px, var(--sar)) + 14px)); text-align: center; }
#hud .hint2.show { opacity: 1; }
#hud .hint2.off { color: #ffd23d; border-color: #ffd23d66; }
/* Mittel, Bremshilfe „Hinweis“ (n14): kurz und deutlich an Bremspunkten */
#hud .hint2.lane { color: #9fe3ff; border-color: #9fe3ff66; }
/* Schanzen-Hinweis (Mittel n24): Absprung-Tempo, grün im Fenster, gelb zu langsam, rot zu schnell */
#hud .hint2.jok { color: #9dffa0; border-color: #7dff7a88; }
#hud .hint2.jlo { color: #ffd23d; border-color: #ffd23d88; }
#hud .hint2.jhi { color: #fff; background: rgba(200, 60, 20, .72); border-color: #ff8a5b; }
#hud .hint2.brake { color: #fff; background: rgba(200, 30, 20, .78); border-color: #ff6b5b; font-size: 17px; letter-spacing: .04em; transition: opacity .08s; }
#hud .assistTag { margin-right: 2px; font-size: 13px; opacity: .85; text-shadow: 0 1px 3px #000; pointer-events: none; }

#big { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%) scale(.9); font-size: clamp(34px, 8vw, 72px); font-weight: 900; font-style: italic; text-align: center; text-shadow: 0 4px 10px #000c; opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none; }
#big.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#big small { display: block; font-size: .42em; font-style: normal; opacity: .9; }
#big .dt { display: block; font-size: 1.7em; font-style: italic; text-shadow: 0 2px 8px #000e; } #big .dt.fast { color: #6cc8ff; } #big .dt.slow { color: #ff6a5a; }   /* n38 Zwischenzeit */
.splits { margin: 6px auto 2px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.splits th, .splits td { padding: 1px 7px; text-align: right; } .splits th { opacity: .7; font-weight: 600; }
.splits td.fast { color: #6cc8ff; font-weight: 800; } .splits td.slow { color: #ff7a6a; font-weight: 800; }
#big.go { color: #7dff7a; } #big.crash { color: #ff7a5a; font-size: clamp(26px, 5vw, 48px); } #big.cp { color: #ffd23d; font-size: clamp(26px, 5vw, 46px); }
#big.pen { color: #ffcf3d; font-size: clamp(44px, 10vw, 92px); } #big.pen small { color: #ffb49a; font-size: .38em; font-style: italic; }
#wipe { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease-out; background: radial-gradient(ellipse at 50% 45%, #fffdf4 0%, #e4f0ff 55%, #9fb6d4 100%); }
#wipe.in { opacity: .92; transition: opacity .18s ease-in; }
#hud .pen { font-size: 15px; font-weight: 800; color: #ffcf3d; }
/* n37 Stunt-Punkte: Summe unter der Zeit, Anzeige je Sprung oben mittig (über dem Auto, unter der Stunt-Ansage) */
#hud .sp { font-size: 14px; font-weight: 800; color: #9fe8ff; }
/* n38 Etappe 4 Drift-Turbo-Meter: Füllstand --m, rechte Hälfte = rote Zone (Bremse antippen) */
#hud .dtm { display: none; position: relative; width: 120px; height: 9px; margin-top: 5px; border-radius: 5px; overflow: hidden;
  background: linear-gradient(90deg, #ffffff22 0 50%, #ff4a3a55 50% 100%); box-shadow: 0 1px 4px #0008; }
#hud .dtm.on { display: block; }
#hud .dtm i { position: absolute; inset: 0 auto 0 0; width: calc(var(--m, 0) * 100%); background: #7dff7a; }
#hud .dtm.red i { background: #ff5a3a; box-shadow: 0 0 8px #ff5a3a; }
#hud .dtm.over { opacity: .35; }
#stuntpop { position: absolute; top: 21%; left: 50%; transform: translate(-50%, -6px) scale(.94); text-align: center; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; text-shadow: 0 2px 6px #000d; white-space: nowrap; }
#stuntpop.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#stuntpop b { display: block; font-size: clamp(20px, 4.2vw, 34px); font-weight: 900; font-style: italic; color: #fff; }
#stuntpop span { display: block; font-size: clamp(12px, 2.4vw, 16px); font-weight: 700; color: #dff4ff; }
#stuntpop i { display: block; font-size: clamp(24px, 5vw, 40px); font-weight: 900; font-style: normal; color: #7dff7a; }
#stuntpop.crash i { color: #ffb49a; } #stuntpop.live b { color: #9fe8ff; font-size: clamp(18px, 3.4vw, 28px); }
.rpen { text-align: center; color: #ffcf3d; font-weight: 800; font-size: 18px; }
.rpen.ok { color: #9dffa0; font-weight: 700; font-size: 15px; }
.track .bests .bmode { opacity: .7; font-size: 12px; align-self: center; }
.bests .oldp, .tbests .oldp { flex-basis: 100%; opacity: .55; font-size: 11px; }
#replayui .rinfo { text-align: center; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; margin-bottom: 6px; text-shadow: 0 2px 4px #000c; }
#toast { position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%); background: #000b; padding: 8px 14px; border-radius: 10px; opacity: 0; transition: opacity .2s; font-weight: 600; }
#toast.show { opacity: 1; }

/* Extras (Hüpfer 🦘 / Nitro 🔥): runde Knöpfe über den Daumen – Hüpfer links über den Lenktasten, Nitro rechts über
   GAS (mit Abstand, damit nichts versehentlich auslöst); ohne Touch unten rechts mit Tasten-Hinweis. Über der
   Touch-Fläche (z-index), auch im Cockpit und bei „Leicht“ (Bildschirmhälften). */
#hud .xb { position: absolute; z-index: 3; width: 60px; height: 60px; border-radius: 50%; pointer-events: auto; touch-action: none;
  background: radial-gradient(circle at 50% 38%, rgba(60, 66, 76, .78), rgba(12, 16, 22, .72)); border: 2px solid #ffffff55;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; transition: opacity .2s, filter .2s, border-color .2s;
  box-shadow: 0 3px 10px #0007; }
#hud .xb i { font-style: normal; font-size: 28px; line-height: 1; }
#hud .xb kbd { font: 700 10px/1 system-ui, sans-serif; opacity: .75; margin-top: 2px; }
body:not([data-touch="none"]) #hud .xb kbd { display: none; }
#hud .xb.hop { border-color: #7fd0ff99; }
#hud .xb.nitro { border-color: #ffa04a99; }
#hud .xb.empty, #hud .xb.lock { filter: grayscale(1); opacity: .38; box-shadow: none; }
#hud .xb.lock { opacity: .5; }
#hud .xb.off, #hud.noextras .xb { display: none; }
#hud .xb.press { transform: scale(.92); }
/* Nitro brennt: Ring zeigt die Restzeit */
/* Abklingzeit (15.10.2026): Ring füllt sich bis „bereit“, Symbol gedämpft */
#hud .xb.cool { opacity: .9; box-shadow: none; }
#hud .xb.cool i { filter: grayscale(.5); opacity: .8; }
#hud .xb.hop.cool { background: conic-gradient(#3f8fc8d9 calc(var(--p, 0) * 360deg), rgba(8, 10, 14, .86) 0); }
#hud .xb.nitro.cool { background: conic-gradient(#c8641ed9 calc(var(--p, 0) * 360deg), rgba(8, 10, 14, .86) 0); }
#hud .xb.cool::after { content: attr(data-s); position: absolute; right: 2px; bottom: 0; min-width: 18px; padding: 1px 4px; border-radius: 9px;
  background: rgba(8, 10, 14, .85); color: #fff; font: 800 13px/1.1 system-ui, sans-serif; text-align: center; pointer-events: none; }
/* n38 Vorrat aus Stunts: goldener Außenring (Anteil einer ganzen Ladezeit), voll = leuchtet */
#hud .xb.nitro.bank::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#ffd34a calc(var(--b, 0) * 360deg), #ffffff1f 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%); }
#hud .xb.nitro.full::before { box-shadow: 0 0 12px #ffd34acc; }
#stuntpop em { display: block; font-style: normal; font-size: clamp(13px, 2.6vw, 18px); font-weight: 800; color: #ffc46a; text-shadow: 0 1px 3px #000, 0 0 10px #000c; }
#stuntpop.calm span { color: #fff3b0; }
.rstunt { color: #9fe8ff; }
#hud .xb.nitro.on { border-color: #ffd08a; background: conic-gradient(#ff7a1acc calc(var(--p, 0) * 360deg), rgba(12, 16, 22, .72) 0); box-shadow: 0 0 18px #ff7a1a99; }
/* Auffüllen an Start/Ziel: kurz aufleuchten */
#hud .xb.glow { filter: none; opacity: 1; animation: xglow 1.2s ease-out; }
@keyframes xglow { 0% { box-shadow: 0 0 0 0 #ffe27aee; transform: scale(1.18); } 40% { box-shadow: 0 0 22px 8px #ffc23d99; transform: scale(1); } 100% { box-shadow: 0 3px 10px #0007; } }
/* Lage: Querformat mit Tasten bzw. Bildschirmhälften – über den Daumen-Tasten */
#hud .xb.hop { left: max(14px, var(--sal)); bottom: calc(max(14px, calc(var(--sab) + 6px)) + 86px * var(--tbk) + 26px); }
#hud .xb.nitro { right: max(14px, var(--sar)); bottom: calc(max(14px, calc(var(--sab) + 6px)) + 118px * var(--tbk) + 26px); }
/* ohne Touch (Desktop): unten rechts nebeneinander */
body[data-touch="none"] #hud .xb.nitro { right: max(18px, var(--sar)); bottom: max(18px, var(--sab)); }
body[data-touch="none"] #hud .xb.hop { left: auto; right: calc(max(18px, var(--sar)) + 72px); bottom: max(18px, var(--sab)); }
/* Nitro-Effekt: Tempo-Streifen vom Bildrand zur Mitte (billig statt Bewegungsunschärfe), leicht zitternd */
#boostfx { position: absolute; inset: 0; pointer-events: none; opacity: 0; overflow: hidden; }
#boostfx i { position: absolute; inset: -30%; display: block;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #fff0 0deg 2.4deg, #fff6ea99 2.9deg 3.3deg, #fff0 3.8deg 6.1deg);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #0000 45%, #000c 80%, #000 100%); mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #0000 45%, #000c 80%, #000 100%); }
#boostfx::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, #0000 55%, #ff6a1a44 100%); }
#boostfx.pure::after { display: none; }
#boostfx.on i { animation: zoomlines .14s steps(2) infinite; }
@keyframes zoomlines { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(1.7deg) scale(1.03); } }
#big.nitro { color: #ffb347; font-size: clamp(30px, 6vw, 56px); text-shadow: 0 0 18px #ff5a1a, 0 4px 10px #000c; }

#touch { position: absolute; inset: 0; display: none; pointer-events: none; }
#touch.show { display: block; }
#touch .half { position: absolute; top: 72px; bottom: 0; width: 50%; display: none; pointer-events: auto; touch-action: none; }
#touch.halves .half { display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(18px + var(--sab)); }
#touch .half.l { left: 0; } #touch .half.r { right: 0; }
#touch .half span { font-size: 34px; opacity: .35; text-shadow: 0 2px 6px #000; }
#touch .half.down span { opacity: .8; }
/* Tastengröße (n15, Optionen „Tastengröße“): Normal = bis 28.09.2026, Groß (Standard) +30 %, Riesig +50 % */
body { --tbk: 1.3; }
body[data-tbsize="normal"] { --tbk: 1; }
body[data-tbsize="riesig"] { --tbk: 1.5; }
body:not([data-touch="pads"]) { --tbk: 1; }   /* Leicht (Bildschirmhälften): Extras-Knöpfe bleiben, wo sie waren */
#touch .pad { position: absolute; bottom: max(14px, calc(var(--sab) + 6px)); display: none; gap: 12px; pointer-events: auto; touch-action: none; }
#touch.pads .pad { display: flex; }
/* Ränder: auch die 6 px breite Trefferfläche bleibt außerhalb von Notch/Gestenleiste */
#touch .pad.left { left: max(14px, calc(var(--sal) + 6px)); }
#touch .pad.right { right: max(14px, calc(var(--sar) + 6px)); align-items: flex-end; }
/* Trefferfläche 6 px größer als die sichtbare Taste: transparenter 6-px-Rand (Hintergrund nur innen, sichtbarer
   Rahmen als Innenschatten), negativer Rand hält das Layout → bei 12 px Abstand stoßen die Flächen aneinander */
#touch .tb { width: calc(86px * var(--tbk) + 12px); height: calc(86px * var(--tbk) + 12px); margin: -6px; border: 6px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 2px #ffffff44;
  border-radius: calc(22px * var(--tbk) + 6px); background-color: rgba(12, 16, 22, .45); display: flex; align-items: center; justify-content: center; font-size: calc(34px * var(--tbk)); font-weight: 800; touch-action: none; }
#touch .tb.gas { width: calc(104px * var(--tbk) + 12px); height: calc(118px * var(--tbk) + 12px); background-color: rgba(40, 140, 60, .45); font-size: calc(18px * var(--tbk)); }
#touch .tb.brake { width: calc(92px * var(--tbk) + 12px); height: calc(86px * var(--tbk) + 12px); background-color: rgba(160, 40, 30, .45); font-size: calc(15px * var(--tbk)); }
#touch .tb.down { background-color: rgba(255, 255, 255, .35); }
#touch.tilt .pad.left { display: none; }
/* Cockpit: analoge Instrumente statt Digital-Tempo; Lenk-Pfeile (Leicht) an die Ränder, weg von den Instrumenten */
body[data-cam="cockpit"]:not([data-cpi="hud"]) #hud .speed { display: none; }
/* Cockpit kompakt (n15, wenig Platz zwischen den Tasten): Gang als rundes Schild zwischen den Rundinstrumenten */
#cpgear { position: absolute; display: none; transform: translate(-50%, -50%); border-radius: 50%; background: #0b0d10ee; border: 2px solid #8d939b;
  color: #ff7a2a; font-weight: 800; align-items: center; justify-content: center; pointer-events: none; font-variant-numeric: tabular-nums; }
body[data-cam="cockpit"][data-cpi="compact"]:is([data-mode="race"], [data-mode="replay"]) #cpgear { display: flex; }
body[data-cam="cockpit"] #touch.halves .half.l { justify-content: flex-start; padding-left: max(24px, var(--sal)); }
body[data-cam="cockpit"] #touch.halves .half.r { justify-content: flex-end; padding-right: max(24px, var(--sar)); }
/* Replay im Cockpit: Leiste oben (Dachrahmen/Himmel), damit die Instrumente unten frei bleiben */
body[data-cam="cockpit"][data-mode="replay"] #replayui.show { top: 0; bottom: auto; display: flex; flex-direction: column-reverse; padding-top: max(8px, var(--sat)); padding-bottom: 14px; background: linear-gradient(180deg, #000b, #0000); }
body[data-cam="cockpit"][data-mode="replay"] #replayui .bar { margin: 8px 0 0; }

#pause .card, #result .card, .sheetc { width: min(560px, 94vw); display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - max(12px, var(--sat)) - max(12px, var(--sab))); max-height: calc(100dvh - max(12px, var(--sat)) - max(12px, var(--sab))); overflow-y: auto; }
#pause, #result, #sheet { background: #0008; pointer-events: auto; }
#sheet { z-index: 5; }   /* n35: Online-Zieltabelle/Lobby im Rennen über den HUD-Knöpfen (die haben z-index 2–3) */
h2 { margin: 0; font-size: 24px; }
.rtime { font-size: 48px; font-weight: 900; font-variant-numeric: tabular-nums; text-align: center; }
.rec { text-align: center; color: #ffd23d; font-weight: 800; font-size: 20px; }
.prev, .rmeta { text-align: center; opacity: .85; font-size: 14px; }
/* Leicht (n15): „Deine Zeit“ + letzte Zeiten statt Bestzeit */
.ryour { text-align: center; font-size: 15px; font-weight: 700; opacity: .8; margin-bottom: -8px; }
ol.times { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-variant-numeric: tabular-nums; }
ol.times li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 10px; border-radius: 8px; background: #ffffff0a; }
ol.times li span { opacity: .7; font-size: 13px; }
ol.times li.cur { background: #7dff7a1f; color: #c9ffc7; }
.track .bests .lastt { opacity: .8; }
.sheetc .scroll { overflow-y: auto; font-size: 15px; line-height: 1.45; }
.sheetc p { margin: 0 0 10px; }

#replayui { position: absolute; left: 0; right: 0; bottom: 0; display: none; padding: 8px max(12px, var(--sar)) max(10px, var(--sab)) max(12px, var(--sal)); background: linear-gradient(0deg, #000a, #0000); }
#replayui.show { display: block; }
#replayui .bar { height: 5px; background: #ffffff26; border-radius: 3px; margin-bottom: 8px; overflow: hidden; }
#replayui .bar i { display: block; height: 100%; width: 0; background: #ff6a2a; }
#replayui .btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#replayui button { min-height: 48px; min-width: 48px; padding: 6px 12px; border-radius: 12px; background: #0d1117cc; border: 1px solid #ffffff2a; font-weight: 600; pointer-events: auto; }
#replayui button.on { background: #ff6a2a; }
#replayui button i { font-style: normal; }


/* ---------- Hochformat (Handy hochkant) ----------
   Oben links Zeit, Checkpoint, Strafe, Bestzeit; oben rechts die Schnell-Umschalter (3 je Zeile, Pause in der
   Ecke) + Fahrhilfe; Stunt-Hinweis darunter. Unten die Daumen: Tasten in einer Reihe (Lenken links, Bremse/Gas
   rechts), Tempo darüber. Sichere Ränder oben (Notch/Insel) und unten (Gestenleiste) über --sat/--sab. */
@media (orientation: portrait) and (max-width: 700px) {
  #hud .tl { top: max(8px, var(--sat)); left: max(12px, var(--sal)); }
  #hud .time { font-size: 28px; line-height: 32px; margin-bottom: 22px; }
  #hud .tc { top: calc(max(8px, var(--sat)) + 33px); left: max(12px, var(--sal)); transform: none; font-size: 16px; line-height: 20px; }
  #hud .rbs { flex-wrap: wrap-reverse; max-width: calc(3 * 52px + 2 * 8px); }
  #hud .hint2 { top: calc(max(8px, var(--sat)) + 150px); max-width: calc(100vw - 24px); }
  #hud .speed { bottom: max(12px, var(--sab)); }
  /* Tasten: Tempo links über den Lenktasten (Mitte gehört dem Auto), Zahl über „km/h · Gang“ */
  body[data-touch="pads"] #hud .speed { left: calc(max(12px, var(--sal)) + 72px); transform: none; bottom: calc(max(12px, calc(var(--sab) + 6px)) + 80px * var(--tbk) + 8px); display: grid; grid-template-columns: auto auto auto; column-gap: 6px; align-items: center; }
  /* Extras hochkant: Hüpfer links über ◀, Nitro rechts über GAS (Tempo rückt neben den Hüpfer) */
  #hud .xb { width: 58px; height: 58px; }
  #hud .xb.hop { left: max(12px, var(--sal)); bottom: calc(max(12px, calc(var(--sab) + 6px)) + 96px * var(--tbk) + 22px); }
  #hud .xb.nitro { right: max(12px, var(--sar)); bottom: calc(max(12px, calc(var(--sab) + 6px)) + 96px * var(--tbk) + 22px); }
  body[data-touch="pads"] #hud .speed b { grid-column: 1 / 4; text-align: left; font-size: 34px; line-height: 1; }
  body[data-touch="pads"] #hud .gf { font-size: 13px; min-width: 0; }
  /* Leicht (Bildschirmhälften, Tempo unten mittig): G-Zahl über dem Tempo, damit die Zeile die Pfeile ◀ ▶ nicht erreicht */
  body:not([data-touch="pads"]) #hud .speed { position: absolute; }
  body:not([data-touch="pads"]) #hud .gf { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); min-width: 0; margin-bottom: -4px; }
  body[data-cam="cockpit"]:not([data-cpi="hud"]) #hud .speed { display: none; }   /* Cockpit: analoge Instrumente statt Digital-Tempo */
  #toast { bottom: auto; top: calc(max(8px, var(--sat)) + 196px); max-width: calc(100vw - 32px); text-align: center; }   /* über Auto/Instrumenten */
  #big { top: 34%; width: max-content; max-width: calc(100vw - 24px); }
  #stuntpop { top: calc(max(8px, var(--sat)) + 236px); max-width: calc(100vw - 24px); white-space: normal; }   /* n37: unter dem Toast, über dem Auto */
  #touch .half { top: calc(max(8px, var(--sat)) + 124px); }
  #touch .pad { bottom: max(12px, calc(var(--sab) + 6px)); gap: 12px; }
  #touch .pad.left { left: max(12px, calc(var(--sal) + 6px)); }
  #touch .pad.right { right: max(12px, calc(var(--sar) + 6px)); }
  /* vier Tasten in einer Reihe: Breite nach Tastengröße, höchstens so breit, dass zwischen Lenk- und Pedaltasten
     24 px bleiben (4,2 Teile = 3 × Lenken/Bremse + 1,2 × Gas); die Höhe wächst voll mit der Tastengröße */
  #touch .tb { width: calc(min(calc(clamp(60px, 17.5vw, 80px) * var(--tbk)), calc((100vw - 2 * max(12px, var(--sal)) - 48px) / 4.2)) + 12px); height: calc(80px * var(--tbk) + 12px); border-radius: 24px; font-size: calc(30px * var(--tbk)); }
  #touch .tb.gas { width: calc(min(calc(clamp(70px, 21vw, 92px) * var(--tbk)), calc((100vw - 2 * max(12px, var(--sal)) - 48px) / 3.5)) + 12px); height: calc(96px * var(--tbk) + 12px); font-size: calc(16px * var(--tbk)); }
  #touch .tb.brake { width: calc(min(calc(clamp(60px, 17.5vw, 80px) * var(--tbk)), calc((100vw - 2 * max(12px, var(--sal)) - 48px) / 4.2)) + 12px); height: calc(80px * var(--tbk) + 12px); font-size: min(calc(13px * var(--tbk)), 4vw); }
  body[data-cam="cockpit"] #touch.halves .half.l { padding-left: max(14px, var(--sal)); }
  body[data-cam="cockpit"] #touch.halves .half.r { padding-right: max(14px, var(--sar)); }
  /* Replay: Kameras + Steuerung als 4×2-Raster (Symbol über dem Namen) */
  #replayui .btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  #replayui button { min-width: 0; padding: 4px 2px; font-size: 12px; line-height: 1.15; }
  #replayui button i { display: block; font-size: 18px; }
  #replayui [data-a=rplay], #replayui [data-a=rslow], #replayui [data-a=rend] { font-size: 20px; }
  /* Bibliothek: Minikarte + Name oben, Knöpfe darunter über die volle Breite */
  .sheetc .trk { flex-wrap: wrap; }
  .sheetc .trk .ti { flex: 1 1 calc(100% - 100px); }
  .sheetc .trk .tbtn { flex: 1 1 100%; }
  .sheetc .trk .tbtn button { flex: 1 1 auto; }
  .row > button { white-space: normal; line-height: 1.15; }
  .sheetc .row > button { flex: 1 1 auto; min-width: calc(50% - 4px); }
}

/* Querformat-Handy (niedrig) */
@media (max-height: 540px) {
  #menu { gap: 10px; }
  .logo { font-size: 36px; }
  #menu .left .logo { font-size: 34px; }
  .track .tname { font-size: 17px; }
  .hint { font-size: 12px; min-height: 0; }
  /* n28: Fahrhilfe-Hinweis auf 3 Zeilen (Tippen = ganz), damit alle Knopfreihen rechts ins Bild passen */
  #menu .right { gap: 5px; }
  #menu .right .lbl { margin-top: 1px; font-size: 11px; }
  #menu .mhint:not(.open) { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
  .row > button, .seg > button { font-size: 14px; padding: 6px 8px; }
  button.big { min-height: 52px; font-size: 18px; }
  .row > button { white-space: normal; line-height: 1.15; }
  /* rechte Menüspalte scrollt, statt Hinweistext über die Knöpfe zu schieben */
  #menu .col { overflow-y: auto; justify-content: flex-start; }
  #menu .col > * { flex-shrink: 0; }
  #menu .left { justify-content: center; }
  .rtime { font-size: 38px; }
  #hud .time { font-size: 24px; }
  #hud .speed b { font-size: 32px; }
}
/* sehr niedriges Querformat (≤ 380 px, z. B. 740×360): Extras etwas kleiner und tiefer, damit sie auch unter
   zwei Zeilen Schnell-Umschaltern oben rechts frei bleiben (Abstand zu den Tasten weiter ≥ 16 px) */
@media (max-height: 380px) and (orientation: landscape) {
  body:not([data-touch="none"]) #hud .xb { width: 54px; height: 54px; }
  body:not([data-touch="none"]) #hud .xb i { font-size: 25px; }
  body:not([data-touch="none"]) #hud .xb.hop { bottom: calc(max(14px, calc(var(--sab) + 6px)) + 86px * var(--tbk) + 24px); }
  body:not([data-touch="none"]) #hud .xb.nitro { bottom: calc(max(14px, calc(var(--sab) + 6px)) + 118px * var(--tbk) + 24px); }
}
@media (max-width: 700px) and (orientation: portrait) {
  #menu { flex-direction: column; overflow-y: auto; justify-content: flex-start; }
}
.sheetc .row > button { white-space: normal; line-height: 1.15; }

/* Importierte Strecken (.TRK) */
.sheetc .trk { display: flex; gap: 10px; align-items: center; padding: 8px; margin: 6px 0; border-radius: 12px; background: #ffffff0d; border: 1px solid #ffffff18; }
.sheetc .trk.new { border-color: #ffc23d; box-shadow: 0 0 0 1px #ffc23d55; }
.sheetc .trk canvas { width: 84px; height: 84px; border-radius: 8px; flex: 0 0 auto; image-rendering: auto; background: #3d6a2c; }
.sheetc .trk .ti { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sheetc .trk .ti b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheetc .trk .ti small { opacity: .75; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheetc .trk .tbests { display: flex; gap: 10px; font-size: 13px; flex-wrap: wrap; opacity: .9; }
.sheetc .trk .tbtn { display: flex; gap: 6px; flex: 0 0 auto; }
.sheetc .trk .tbtn button { min-height: 48px; min-width: 48px; padding: 6px 12px; border-radius: 12px; background: #ffffff14; border: 1px solid #ffffff22; font-weight: 700; }
.sheetc .trk .tbtn button.go { background: linear-gradient(180deg, #ff7a36, #e24e10); border-color: #ffa070; }
.sheetc .impres { background: #10351c; border: 1px solid #3fae62; border-radius: 10px; padding: 8px 10px; font-weight: 600; }
.sheetc .impres .err { color: #ffb4a4; font-weight: 500; margin-top: 4px; }
.sheetc .impres.bad { background: #3a1714; border-color: #c2513f; }
.sheetc .hint b { color: #ffd9a6; }
@media (pointer: coarse) { .desk { display: none; } }
#drop { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: #0b0e13cc; border: 4px dashed #ff6a2a; z-index: 20; pointer-events: none; font-size: 30px; font-weight: 800; text-align: center; }
#drop small { display: block; font-size: 16px; opacity: .8; margin-top: 6px; }
body.dropping #drop { display: flex; }
@media (max-height: 540px) { .sheetc .trk canvas { width: 64px; height: 64px; } .sheetc .trk { padding: 6px; } }

/* Sammlung (eigene Strecken): eingeklappter Abschnitt, Strecke des Tages, Suche/Sortierung, Filter-Chips.
   Handy zuerst: Touch-Ziele ≥ 44 px, Eingaben 16 px (kein Zoom beim Antippen unter iOS) */
.sheetc .sam { margin: 8px 0 4px; border-radius: 14px; background: #ffffff08; border: 1px solid #ffc23d55; }
.sheetc .samhead { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: transparent; text-align: left; border-radius: 14px; }
.sheetc .samhead span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheetc .samhead b { font-size: 17px; }
.sheetc .samhead small { font-size: 13px; opacity: .8; font-weight: 400; }
.sheetc .samhead i { font-style: normal; font-size: 22px; opacity: .8; }
.sheetc .sambody { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 8px; }
.sheetc .sambody[hidden] { display: none; }
.sheetc .samday .trk { border-color: #ffc23d; box-shadow: 0 0 0 1px #ffc23d44; }
.sheetc .samlink { min-height: 0; margin: 0; }
.sheetc .samlink a { color: #ffd9a6; font-weight: 700; }
.sheetc .samctl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sheetc .samq { flex: 1 1 170px; min-width: 0; min-height: 48px; font: inherit; font-size: 16px; padding: 8px 12px; border-radius: 12px; border: 1px solid #ffffff33; background: #0d1117; color: #f3f4f6;
  -webkit-user-select: text; user-select: text; touch-action: manipulation; }
.sheetc .samsort { display: flex; align-items: center; gap: 6px; font-size: 14px; flex: 1 1 auto; }
.sheetc .samsort span { opacity: .75; }
.sheetc .samsel { flex: 1 1 auto; min-height: 48px; font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 12px; border: 1px solid #ffffff33; background: #0d1117; color: #f3f4f6; touch-action: manipulation; }
.sheetc .samcount { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.sheetc .samcount span { flex: 1 1 auto; opacity: .85; }
.sheetc .samcount button { min-height: 44px; padding: 6px 12px; border-radius: 12px; background: #ffffff14; border: 1px solid #ffffff22; font-weight: 700; font-size: 15px; }
.sheetc .samcount button.samfbtn.on { border-color: #ff9a6a; color: #ffd9a6; }
.sheetc .chips { display: flex; flex-direction: column; gap: 8px; }
.sheetc .chips[hidden] { display: none; }
.sheetc .cg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sheetc .cg > span { flex: 0 0 100%; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .65; }
.sheetc .chip { min-height: 44px; padding: 6px 12px; border-radius: 22px; background: #ffffff12; border: 1px solid #ffffff26; font-size: 15px; font-weight: 600; white-space: nowrap; }
.sheetc .chip.on { background: #ff6a2a; border-color: #ff9a6a; color: #fff; }
.sheetc .trk .tst { font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 8px; }

/* ---------- Kino-Replay nach dem Ziel (n18) ---------- */
/* Querformat: Kino-Balken oben/unten (2,39:1, mindestens 8,5 % je Balken), fahren ein; hochkant keine Balken – dort
   rahmen die Kameras das Auto fürs schmale Bild (cinecam.js). Ein neuer Tipp irgendwo überspringt. */
/* Zielshow (n27): Zeit groß, Bestzeit golden, Hinweis unten; der ganze Bildschirm nimmt den Tipp zum Überspringen */
#zshow { position: absolute; inset: 0; display: none; pointer-events: auto; touch-action: none; }
#zshow.show { display: block; }
#zshow .ztime { position: absolute; left: max(22px, calc(var(--sal) + 14px)); top: 64%; transform: translate(0, -10px) scale(.92); transform-origin: left center; font-size: clamp(36px, 8.5vw, 78px); font-weight: 900; font-style: italic; text-shadow: 0 0 22px #ff7a2a88, 0 4px 12px #000c; opacity: 0; transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .3, 1.3); white-space: nowrap; }
#zshow .zsub { position: absolute; left: max(26px, calc(var(--sal) + 18px)); top: calc(64% + clamp(40px, 8vw, 74px)); font-size: clamp(18px, 3.4vw, 30px); font-weight: 800; text-shadow: 0 2px 8px #000c; opacity: 0; transition: opacity .4s .25s; white-space: nowrap; }
#zshow .zhint { position: absolute; right: max(14px, var(--sar)); bottom: max(12px, calc(var(--sab) + 8px)); font-size: 14px; font-weight: 700; opacity: 0; transition: opacity .4s 1s; background: #0d1117aa; border: 1px solid #ffffff33; border-radius: 12px; padding: 8px 14px; }
#zshow.on .ztime { opacity: 1; transform: none; }
#zshow.on .zsub, #zshow.on .zhint { opacity: .95; }
#zshow.best .ztime, #zshow.best .zsub { color: #ffd23d; text-shadow: 0 0 26px #ffb02a, 0 4px 12px #000c; }
body[data-orient="hoch"] #zshow .ztime { top: 70%; left: 50%; transform: translate(-50%, -10px) scale(.92); transform-origin: center; }
body[data-orient="hoch"] #zshow.on .ztime { transform: translate(-50%, 0); }
body[data-orient="hoch"] #zshow .zsub { top: calc(70% + clamp(40px, 10vw, 60px)); left: 50%; transform: translateX(-50%); }
body[data-orient="hoch"] #zshow .zhint { right: 50%; transform: translateX(50%); }
#cine { position: absolute; inset: 0; display: none; pointer-events: auto; touch-action: none; }
#cine.show { display: block; }
#cine .lb { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .6s cubic-bezier(.2, .7, .2, 1); }
#cine .lb.top { top: 0; } #cine .lb.bot { bottom: 0; }
body[data-orient="quer"] #cine.on .lb { height: max(8.5%, calc((100% - 41.84vw) / 2)); }
#cine .ctag { position: absolute; top: max(10px, var(--sat)); left: max(14px, var(--sal)); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .75; text-shadow: 0 1px 3px #000; }
#cine .cbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ffffff1a; }
#cine .cbar i { display: block; height: 100%; width: 0; background: #ff6a2a; }
#cine .cskip { position: absolute; top: max(8px, var(--sat)); right: max(10px, var(--sar)); min-height: 48px; min-width: 48px; padding: 6px 14px; border-radius: 12px; background: #0d1117aa; border: 1px solid #ffffff33; font-weight: 700; font-size: 15px; }
#cine .cap { position: absolute; left: max(22px, calc(var(--sal) + 14px)); bottom: calc(max(8.5%, (100% - 41.84vw) / 2) + 14px); font-size: clamp(22px, 4.2vw, 40px); font-weight: 900; font-style: italic; letter-spacing: .01em;
  text-shadow: 0 3px 10px #000d; opacity: 0; transform: translateX(-24px); transition: opacity .35s, transform .5s cubic-bezier(.2, .7, .2, 1); pointer-events: none; max-width: calc(100vw - 44px); }
#cine .cap.show { opacity: 1; transform: none; }
#cine .cap.fin { color: #ffd23d; }
body[data-orient="hoch"] #cine .cap { left: 50%; bottom: calc(max(14%, var(--sab) + 70px)); transform: translate(-50%, 16px); text-align: center; width: max-content; font-size: clamp(22px, 7vw, 34px); }
body[data-orient="hoch"] #cine .cap.show { transform: translate(-50%, 0); }
body[data-orient="hoch"] #cine .cskip { top: auto; bottom: max(16px, calc(var(--sab) + 10px)); right: 50%; transform: translateX(50%); }
#cine.rec .ctag { color: #ff4a3a; opacity: 1; }
#cine .fanfg { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
/* Kulissen (n20): Landschafts-Auswahl */
.themegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.themegrid .themeopt { padding: 8px 10px; border-radius: 12px; background: #ffffff14; border: 1px solid #ffffff22; font-size: 15px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 3px; min-height: 64px; white-space: normal; line-height: 1.2; }
.themegrid .themeopt span { font-size: 12px; opacity: 0.8; font-weight: normal; }
.themegrid .themeopt.on { background: #ff6a2a; border-color: #ff9a6a; color: #fff; }
#menu .themebtn { white-space: normal; line-height: 1.2; }
#menu .tthema { opacity: 0.85; }
#menu .tmeta .nb { white-space: nowrap; }

/* n28 Deko: Ergebnis – Zeit springt herein, ein Glanz läuft einmal darüber; Bestzeit golden mit kurzem Leuchten.
   Einmalige CSS-Animationen (kein Dauer-Loop); „Bewegung reduzieren“ ohne */
#result .card.deko .rtime { background: linear-gradient(105deg, #fff 0%, #fff 42%, #ffe7b3 50%, #fff 58%, #fff 100%); background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: rpop .6s cubic-bezier(.2, 1.5, .4, 1) both, rshine 1.3s .45s ease-out both; }
#result .card.deko.gold .rtime { background-image: linear-gradient(105deg, #ffd23d 0%, #ffcf3a 40%, #fffbe8 50%, #ffcf3a 60%, #ffb02a 100%); filter: drop-shadow(0 0 14px #ffb02a88); }
#result .card.deko .rec { animation: rglow 1.1s .5s ease-in-out 2 both; }
#result .card.deko h2 { animation: rfade .4s ease-out both; }
@keyframes rpop { 0% { transform: scale(.72); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rshine { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@keyframes rglow { 0%, 100% { text-shadow: none; transform: scale(1); } 50% { text-shadow: 0 0 18px #ffb02a; transform: scale(1.06); } }
@keyframes rfade { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #result .card.deko .rtime, #result .card.deko .rec, #result .card.deko h2 { animation: none; } #result .card.deko .rtime { background-position: 50% 0; } }
/* n35 Online-Menü */
.onl { display: flex; flex-direction: column; gap: 10px; }
.onl p { margin: 0; line-height: 1.4; }
.onlab { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.onl input { font: inherit; font-size: 18px; padding: 10px 12px; border-radius: 12px; border: 1px solid #ffffff33; background: #00000055; color: #fff; min-height: 48px; }
.onjoin input { flex: 1 1 8em; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.oncode { text-align: center; font-size: 20px; }
.oncode b { display: block; font-size: 44px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.onqr { align-self: center; width: min(46vw, 200px); background: #fff; border-radius: 10px; padding: 4px; }
.onqr svg { display: block; width: 100%; height: auto; }
.onstr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 700; }
.onstr button { font-size: 14px; padding: 6px 10px; border-radius: 10px; background: #ffffff14; border: 1px solid #ffffff22; }
.onhin { font-size: 14px; background: #ffffff12; border-radius: 10px; padding: 6px 10px; }
.onlist td:nth-child(3), .onlist td:nth-child(5) { text-align: center; width: 2em; }
button.big.aus { opacity: .5; }
.onlinks, .onrechts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.onlook { display: flex; flex-direction: column; gap: 6px; }
.onsel { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.onsel span { flex: 0 0 6.5em; opacity: .8; }
.onsel select { flex: 1 1 auto; min-width: 0; min-height: 48px; font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 12px; border: 1px solid #ffffff33; background: #0d1117; color: #f3f4f6; touch-action: manipulation; }
/* quer (Handy): Lobby zweispaltig – links Code/QR/Teilen (bleibt stehen), rechts Mitglieder, Start/Bereit, Einstellungen */
@media (orientation: landscape) and (max-height: 600px) {
  #sheet .sheetc:has(.onlobby) { width: min(860px, 96vw); }
  .onlobby { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 14px; align-items: start; }
  .onlobby .onlinks { position: sticky; top: 0; }
  .onlobby .onlinks { gap: 8px; }
  .onlobby .oncode { font-size: 13px; }
  .onlobby .oncode b { font-size: 28px; }
  .onlobby .onqr { width: min(27vh, 112px); }
  .onlobby .onlinks .row > button { min-width: 0; padding: 8px 6px; font-size: 14px; }
}