/* RoboKart. Die Plattform bindet diese Datei auf jeder Seite ein, deshalb hängt jede Regel an einer kart-Klasse.

   Das Brett (docs/robokart-vertrag.md, 10.2): 3D-Fläche und Minikarte zeichnet das Bundle (robokart.bundle.js),
   die Live-Felder (Zeit, Rundenzeit, Tempo, Abstand) füllt es je Bild. Das DOM hier zeigt nur, was sich selten
   ändert: Runde, Countdown, Aufstellung, Menü, Zielkarte. Die Zustände, die das Bundle setzt, lesen die Selektoren
   hier nur: data-kart-ready und data-kart-quality an der Wurzel, data-active und --kart-stick-ox/oy/x/y an Sticks
   und Knöpfen, data-show am Hinweis, data-sign am Abstand. Die Phase steht als Klasse kart-phase-N an der Wurzel
   (0 Laden, 1 Aufstellung, 2 Countdown, 3 Rennen, 4 Pause, 5 Ziel), kart-touch sagt, dass ein Finger lenkt. */

/* ---------- Hülle auf der Raumseite ---------- */

/* Die Partie füllt die Fläche unter der Kopfzeile randlos (app.css, .content > .play): Rand und Rollen bringt die
   Hülle selbst mit wie die Tische der anderen Spiele, 16 px zu jeder Seite. Sonst stießen Überschrift, "Zum Brett"
   und Startuhr an den Rand, und eine lange Hülle (Aufstellung und letztes Ergebnis) würde unten abgeschnitten. */
.kart-shell {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    box-sizing: border-box;
    padding: 12px 16px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.kart-shell h2 { margin: 0; }
.kart-shell-options { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .35rem; }
.kart-shell-options li { padding: .15rem .55rem; border-radius: 999px; background: var(--surface-2); font-size: .8rem; color: var(--muted); }
.kart-shell-state { margin: 0; }
/* Startuhr (Online-Vertrag 1.4): "Start in 23 s", darunter wer dann zuschaut. */
.kart-shell-clock { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
.kart-shell-clock strong { font-variant-numeric: tabular-nums; }

.kart-shell-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0; }
.kart-shell-stats > div { padding: .45rem .6rem; border-radius: var(--radius, 10px); background: var(--surface-2); }
.kart-shell-stats dt { font-size: .75rem; color: var(--muted); }
.kart-shell-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.kart-shell-runs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.kart-shell-runs li { display: flex; align-items: center; gap: .5rem; padding: .3rem .55rem; border-radius: var(--radius, 10px); background: var(--surface-2); font-size: .9rem; }
.kart-shell-run-no { color: var(--muted); min-width: 4.2rem; }
.kart-shell-run-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.kart-shell-runs li.bad .kart-shell-run-time { font-weight: 400; color: var(--muted); }
.kart-shell-badge { margin-left: auto; padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; background: var(--surface-3, var(--surface-2)); color: var(--muted); }
.kart-shell-empty { margin: 0; }

.kart-shell-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .25rem; }
.kart-shell-grid li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .3rem .55rem; border-radius: var(--radius, 10px); background: var(--surface-2); font-size: .9rem; }
.kart-shell-grid li.cpu { color: var(--muted); }
.kart-shell-grid-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kart-shell-grid .kart-shell-badge { margin-left: 0; }
.kart-shell-badge.on { color: var(--text, inherit); }
.kart-shell-badge.off { opacity: .75; }
.kart-shell-sub { margin: .3rem 0 0; font-size: 1rem; }
.kart-shell-results .kart-shell-run-no { min-width: 1.6rem; }
.kart-shell-points { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }

.kart-shell-end { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.kart-shell-end p { flex: 1 1 100%; margin: 0; }
.kart-shell-end-ask { align-self: flex-start; }

/* ---------- Regeln im Katalog ---------- */

.kart-rules h3 { margin: 1rem 0 .3rem; font-size: 1rem; }
.kart-rules ul { margin: 0; padding-left: 1.2rem; }
.kart-rules li { margin: .2rem 0; }

/* ---------- Brett: Wurzel und 3D-Fläche ---------- */

.kart-board {
    position: fixed;
    inset: 0;
    /* Die sichtbare Höhe, auch wenn die Adressleiste des Handys ein- und ausfährt. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    background: #0b1322;
    color: var(--kart-ink);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 15px;
    line-height: 1.25;

    /* Ränder hinter Notch und Home-Indikator, wie beim Maulwurf-Brett. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --kart-ink: #eef3fb;
    --kart-muted: #97a6c2;
    --kart-glass: rgba(9, 14, 26, .74);
    --kart-line: rgba(255, 255, 255, .1);
    --kart-accent: #4fc3dd;
    --kart-accent-ink: #04212b;
    --kart-warn: #F2B822;
    --kart-red: #E8423A;
    --kart-ok: #5fd68a;
    --kart-gold: #FFD24A;
    --kart-ghost: #8FD3FF;
    --kart-blur: blur(8px);
}

/* Auf der kleinsten Qualitätsstufe kostet das Glas zu viel: dann liegen Pillen und Karten einfach dunkel. */
.kart-board[data-kart-quality="2"] { --kart-blur: none; --kart-glass: rgba(9, 14, 26, .88); }

.kart-view {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 20%, #1c2c4d, #080d1c 70%);
    touch-action: none;
}

.kart-view > canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Knöpfe im Brett ---------- */

/* Die Plattform gestaltet jeden <button>; im Brett gilt das hier. Die Farben hängen an Variablen, damit auch die
   Hover-Regel der Plattform nichts überschreibt. */
.kart-board button {
    margin: 0;
    font: inherit;
    font-family: inherit;
    letter-spacing: normal;
    background: var(--kart-btn-bg, var(--kart-glass));
    border: 1px solid var(--kart-btn-line, var(--kart-line));
    color: var(--kart-btn-ink, var(--kart-ink));
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.kart-board button:hover:not(:disabled) {
    background: var(--kart-btn-bg, var(--kart-glass));
    border-color: var(--kart-btn-line, var(--kart-line));
    filter: brightness(1.12);
}

.kart-board button:focus-visible,
.kart-board a:focus-visible {
    outline: 2px solid var(--kart-accent);
    outline-offset: 2px;
    box-shadow: none;
}

.kart-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 999px;
    background: var(--kart-glass);
    border: 1px solid var(--kart-line);
    color: var(--kart-ink);
    backdrop-filter: var(--kart-blur);
    -webkit-backdrop-filter: var(--kart-blur);
    text-decoration: none;
}

/* Trefferfläche mindestens 48 px: der sichtbare Knopf bleibt 44 px, der unsichtbare Rand fängt den Finger. */
.kart-icon-btn::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; }

.kart-icon-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kart-icon-btn.off { color: var(--kart-muted); }

.kart-cta,
.kart-secondary,
.kart-toggle,
.kart-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.kart-board .kart-cta,
.kart-status .kart-cta {
    --kart-btn-bg: var(--kart-accent);
    --kart-btn-line: var(--kart-accent);
    --kart-btn-ink: var(--kart-accent-ink);
    background: var(--kart-accent);
    border: 1px solid var(--kart-accent);
    color: var(--kart-accent-ink);
    font-size: 17px;
    /* Die Knopf-Regel oben setzt "font: inherit" und damit auch das Gewicht zurück; hier kommt es wieder. */
    font-weight: 800;
}

.kart-board .kart-secondary { --kart-btn-bg: rgba(255, 255, 255, .08); --kart-btn-line: rgba(255, 255, 255, .18); font-weight: 700; }

.kart-board .kart-toggle {
    --kart-btn-bg: rgba(255, 255, 255, .06);
    --kart-btn-line: rgba(255, 255, 255, .16);
    min-height: 48px;
    padding: 0 14px;
    font-weight: 600;
    font-size: 14px;
}

.kart-board .kart-toggle.on,
.kart-board .kart-toggle[aria-pressed="true"] {
    --kart-btn-bg: rgba(79, 195, 221, .22);
    --kart-btn-line: var(--kart-accent);
    --kart-btn-ink: #dff7fd;
}

.kart-board .kart-toggle[aria-pressed="true"]::before { content: "✓"; font-weight: 800; color: var(--kart-accent); }

.kart-link { color: var(--kart-muted); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 0 8px; }
.kart-link:hover { color: var(--kart-ink); }

/* ---------- Kopfleiste ---------- */

.kart-top {
    position: absolute;
    top: calc(8px + var(--safe-top));
    left: calc(8px + var(--safe-left));
    right: calc(8px + var(--safe-right));
    display: flex;
    align-items: flex-start;
    gap: 8px;
    z-index: 3;
    pointer-events: none;
}

.kart-top a,
.kart-top button { pointer-events: auto; }

.kart-lap,
.kart-clock {
    display: flex;
    flex-direction: column;
    padding: 5px 12px 6px;
    border-radius: 14px;
    background: var(--kart-glass);
    border: 1px solid var(--kart-line);
    backdrop-filter: var(--kart-blur);
    -webkit-backdrop-filter: var(--kart-blur);
    font-variant-numeric: tabular-nums;
}

.kart-lap-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--kart-muted); }
.kart-lap-value { font-size: 22px; font-weight: 800; line-height: 1.1; }
.kart-lap-of { font-size: 15px; font-weight: 600; color: var(--kart-muted); }

.kart-clock { min-width: 96px; }
.kart-clock-race { font-size: 22px; font-weight: 800; line-height: 1.1; }
.kart-clock-lap { font-size: 13px; color: var(--kart-muted); }
.kart-clock-delta { font-size: 14px; font-weight: 700; }
.kart-clock-delta:empty,
.kart-clock-lap:empty { display: none; }
[data-kart-live="abstand"][data-sign="plus"] { color: #ff8f86; }
[data-kart-live="abstand"][data-sign="minus"] { color: var(--kart-ok); }

.kart-top-tools { display: flex; gap: 8px; margin-left: auto; }

/* Rennmodus (docs/robokart-vertrag-online.md, 7.13): Platz und Rennende-Uhr setzt das Bundle als Text. */
.kart-place {
    display: flex;
    flex-direction: column;
    padding: 5px 12px 6px;
    border-radius: 14px;
    background: var(--kart-glass);
    border: 1px solid var(--kart-line);
    backdrop-filter: var(--kart-blur);
    -webkit-backdrop-filter: var(--kart-blur);
    font-variant-numeric: tabular-nums;
}
.kart-place-value { font-size: 22px; font-weight: 800; line-height: 1.1; }
.kart-place-num:empty::before { content: "–"; }
/* Die Rennende-Uhr steht nicht in der Kopfleiste: Dort machte die zweite Zeile die Uhr so hoch, dass die Pillen darunter
   sie verdeckten, und im eigenen Ziel ist die Kopfleiste verborgen. Sie ist eine Pille in der Reihe unter der
   Kopfleiste (.kart-end) bzw. eine Zeile der Zielkarte (.kart-race-end); leer ist sie weg. */
.kart-end { color: var(--kart-warn); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kart-race-end { font-weight: 700; color: var(--kart-warn); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kart-end:empty, .kart-race-end:empty { display: none; }

/* Namensschilder: Lage (style.transform) und data-show setzt das Bundle, hier steht nur das Aussehen. */
.kart-tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.kart-tag {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    padding: 1px 8px 2px;
    border-radius: 999px;
    background: rgba(8, 14, 26, .72);
    border: 1px solid var(--kart-line);
    color: var(--kart-ink);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    will-change: transform;
}
.kart-tag[data-show="1"] { visibility: visible; }
.kart-tag-cpu { color: var(--kart-muted); font-weight: 600; }

/* Runde, Zeiten und Pause erst ab dem Countdown; vorher zeigt die Kranfahrt die Strecke. Im Ziel stehen Zeit und
   Runden genauer auf der Zielkarte; oben bleiben nur Rückweg und Ton. */
.kart-phase-0 .kart-lap, .kart-phase-0 .kart-clock, .kart-phase-0 .kart-place,
.kart-phase-1 .kart-lap, .kart-phase-1 .kart-clock, .kart-phase-1 .kart-place,
.kart-phase-5 .kart-lap, .kart-phase-5 .kart-clock, .kart-phase-5 .kart-place { visibility: hidden; }
.kart-board:not(.kart-phase-2):not(.kart-phase-3) .kart-pause { visibility: hidden; }

/* ---------- Minikarte und Tempo ---------- */

.kart-minimap {
    position: absolute;
    top: calc(62px + var(--safe-top));
    right: calc(10px + var(--safe-right));
    width: 132px;
    height: 132px;
    border-radius: 14px;
    background: rgba(9, 14, 26, .42);
    pointer-events: none;
    z-index: 2;
}

.kart-speed {
    position: absolute;
    left: 50%;
    bottom: calc(12px + var(--safe-bottom));
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    pointer-events: none;
    z-index: 2;
}

.kart-speed span { font-size: 34px; font-weight: 800; }
.kart-speed small { font-size: 13px; color: var(--kart-muted); }
.kart-speed span:empty + small { display: none; }

/* Im Laden gibt es noch nichts zu sehen, in der Aufstellung fährt die Kranfahrt; im Ziel liegt dort die Zielkarte
   (der Auslauf fährt dahinter weiter, sein Tempo interessiert niemanden). */
.kart-phase-0 .kart-minimap, .kart-phase-0 .kart-speed,
.kart-phase-1 .kart-speed,
.kart-phase-5 .kart-minimap, .kart-phase-5 .kart-speed { visibility: hidden; }

/* Probefahrt mit Autopilot: ein kleines Schild über dem Tempo. Karten liegen darüber. */
.kart-autopilot {
    position: absolute;
    left: 50%;
    bottom: calc(58px + var(--safe-bottom));
    transform: translateX(-50%);
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(242, 184, 34, .2);
    border: 1px solid rgba(242, 184, 34, .45);
    color: var(--kart-warn);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

/* Im Ziel trägt die Zielkarte das Schild selbst. */
.kart-phase-5 .kart-autopilot { visibility: hidden; }

/* Hoch ist die 3D-Fläche schmal: die Minikarte nimmt weniger davon. */
@media (orientation: portrait) and (max-width: 520px) {
    .kart-minimap { width: 104px; height: 104px; }
}

/* ---------- Touch-Bedienfeld ---------- */

.kart-pad { display: none; }

.kart-touch .kart-pad {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* In Laden, Aufstellung, Pause und Ziel lenkt niemand: dann gehört der Tipp dem Bild (Start) oder der Karte. Nur
   unsichtbar, nicht weg; das Bundle erkennt die Lage-Variante an display. */
.kart-touch.kart-phase-0 .kart-pad,
.kart-touch.kart-phase-1 .kart-pad,
.kart-touch.kart-phase-4 .kart-pad,
.kart-touch.kart-phase-5 .kart-pad { visibility: hidden; }

/* Zuschauer (docs/robokart-vertrag-online.md, 7.9) lenken nie und haben kein Menü: kein Bedienfeld, kein Pausenknopf.
   Unsichtbares nimmt keine Finger an, ein Tipp geht an das Bild und schaltet das Kameraziel. */
.kart-spectating .kart-pad,
.kart-spectating .kart-pause { visibility: hidden; }

.kart-stick { box-sizing: border-box; touch-action: none; pointer-events: auto; }

/* Quer: die linken 45 % sind der schwebende Stick. Der Ursprung liegt dort, wo der Daumen aufsetzt
   (--kart-stick-ox/oy, px innerhalb dieser Fläche), der Knauf folgt um --kart-stick-x/y. Ohne Finger steht ein
   blasser Hinweis unten links. */
.kart-stick-float {
    position: absolute;
    left: 0;
    top: calc(70px + var(--safe-top));
    bottom: 0;
    width: 45%;
}

.kart-stick-float .kart-stick-ring,
.kart-stick-float .kart-stick-knob {
    position: absolute;
    left: var(--kart-stick-ox, calc(96px + var(--safe-left)));
    top: var(--kart-stick-oy, calc(100% - 110px - var(--safe-bottom)));
    border-radius: 50%;
    pointer-events: none;
}

.kart-stick-float .kart-stick-ring {
    width: 128px;
    height: 128px;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, .22);
    background: rgba(9, 14, 26, .22);
    opacity: .55;
}

.kart-stick-float .kart-stick-knob {
    width: 56px;
    height: 56px;
    transform: translate(calc(-50% + var(--kart-stick-x, 0px)), calc(-50% + var(--kart-stick-y, 0px)));
    background: rgba(238, 243, 251, .28);
    border: 2px solid rgba(255, 255, 255, .4);
    opacity: .55;
}

.kart-stick-float[data-active="1"] .kart-stick-ring,
.kart-stick-float[data-active="1"] .kart-stick-knob { opacity: 1; }
.kart-stick-float[data-active="1"] .kart-stick-knob { background: rgba(79, 195, 221, .55); border-color: var(--kart-accent); }

/* Hoch: der feste Lenkschieber; der Knauf wandert waagrecht um --kart-stick-x, höchstens 64 px je Seite (voller
   Einschlag). Die Schiene zeigt genau diesen Weg; die Fläche zum Greifen ist breiter. */
.kart-stick-fixed { display: none; }

.kart-stick-fixed .kart-stick-rail {
    position: absolute;
    left: calc(50% - 64px);
    right: calc(50% - 64px);
    top: 50%;
    height: 14px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    pointer-events: none;
}

/* Die Mitte des Schiebers: bis 8 px daneben lenkt er nicht (Totzone). */
.kart-stick-fixed .kart-stick-rail::after {
    content: "";
    position: absolute;
    left: calc(50% - 8px);
    width: 16px;
    top: -5px;
    bottom: -5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .14);
}

.kart-stick-fixed .kart-stick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    transform: translate(calc(-50% + var(--kart-stick-x, 0px)), -50%);
    background: rgba(238, 243, 251, .24);
    border: 2px solid rgba(255, 255, 255, .4);
    pointer-events: none;
}

.kart-stick-fixed[data-active="1"] .kart-stick-knob { background: rgba(79, 195, 221, .55); border-color: var(--kart-accent); }

/* Rechts unten: Drift (88 px), darüber Item (64 px), am Rand Bremse (56 px); ohne Auto-Gas noch Gas. */
.kart-pad-buttons {
    position: absolute;
    right: calc(14px + var(--safe-right));
    bottom: calc(14px + var(--safe-bottom));
    width: 230px;
    height: 180px;
    pointer-events: none;
}

.kart-board .kart-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0;
    border-radius: 50%;
    --kart-btn-bg: rgba(9, 14, 26, .5);
    --kart-btn-line: rgba(255, 255, 255, .28);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    pointer-events: auto;
    touch-action: none;
    transition: transform 70ms ease-out;
}

.kart-board .kart-btn[data-active="1"] {
    --kart-btn-bg: rgba(79, 195, 221, .5);
    --kart-btn-line: var(--kart-accent);
    transform: scale(.93);
}

.kart-btn-drift { width: 88px; height: 88px; right: 68px; bottom: 0; }
.kart-btn-item { width: 64px; height: 64px; right: 80px; bottom: 104px; }
.kart-btn-brake { width: 56px; height: 56px; right: 0; bottom: 8px; }
.kart-board .kart-btn-brake { font-size: 10.5px; letter-spacing: 0; }
.kart-btn-gas { width: 64px; height: 64px; right: 0; bottom: 84px; }
.kart-board .kart-btn-item { color: var(--kart-muted); }

/* Rückblick (nur mit Finger): kein Fahrknopf, sondern ein Blick; deshalb eckig mit Bild und Wort. Er hängt am
   Bedienfeld, nicht an der Knopfgruppe. Quer steht er in deren Ecke links oben, links neben Item und über dem
   Drift (Knopfgruppe: rechts 14 px, unten 14 px; darin rechts 158 px, unten 112 px), fern vom Daumenweg zum Drift
   und vom Lenkstick in den linken 45 %. */
.kart-btn-look { width: 72px; height: 56px; right: calc(172px + var(--safe-right)); bottom: calc(126px + var(--safe-bottom)); }

.kart-board .kart-btn-look {
    flex-direction: column;
    gap: 2px;
    border-radius: 16px;
    font-size: 10px;
    letter-spacing: 0;
    color: var(--kart-muted);
}

.kart-btn-look svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kart-board .kart-btn-look[data-active="1"] { color: var(--kart-ink); }
.kart-btn-label { line-height: 1; pointer-events: none; }

@media (orientation: portrait) {
    /* Hoch: 3D in den oberen 60 %, darunter das Bedienfeld mit dem festen Lenkschieber. */
    .kart-touch .kart-view { bottom: 40%; }
    .kart-touch .kart-speed { bottom: calc(40% + 10px); }
    .kart-touch .kart-autopilot { bottom: calc(40% + 56px); }

    /* Zuschauer haben kein Bedienfeld: das Bild über die ganze Höhe. */
    .kart-touch.kart-spectating .kart-view { bottom: 0; }
    .kart-touch.kart-spectating .kart-speed { bottom: calc(12px + var(--safe-bottom)); }
    .kart-touch.kart-spectating .kart-autopilot { bottom: calc(58px + var(--safe-bottom)); }

    .kart-touch .kart-pad {
        top: 60%;
        background: linear-gradient(#0e1729, #0a1120);
        border-top: 1px solid var(--kart-line);
    }

    .kart-touch .kart-stick-float { display: none; }

    .kart-touch .kart-stick-fixed {
        display: block;
        position: absolute;
        left: calc(18px + var(--safe-left));
        top: 50%;
        width: 46%;
        height: 96px;
        transform: translateY(-50%);
    }

    .kart-touch .kart-pad-buttons { top: 50%; bottom: auto; transform: translateY(-50%); width: 200px; height: 172px; }

    /* Countdown und Hinweis in die Mitte der 3D-Fläche, nicht des ganzen Schirms. */
    .kart-touch .kart-countdown { top: 30%; font-size: min(24vmin, 150px); }
    .kart-touch .kart-notice[data-show="1"] { top: 30%; }
    .kart-touch.kart-spectating .kart-countdown { top: 38%; }
    .kart-touch.kart-spectating .kart-notice[data-show="1"] { top: 42%; }
    .kart-touch .kart-btn-drift { right: 64px; bottom: 0; }
    .kart-touch .kart-btn-item { right: 76px; bottom: 100px; }

    /* Rückblick über dem Bedienfeld, rechts unten in der 3D-Fläche: 10 px über dessen Kante, so dass er weder den
       Lenkschieber noch die Knopfgruppe berührt, egal wie hoch das Bedienfeld ist. */
    .kart-touch .kart-btn-look { top: -66px; bottom: auto; right: calc(14px + var(--safe-right)); }
}

/* ---------- Countdown und Banner ---------- */

.kart-countdown {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    font-size: min(28vmin, 180px);
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 0 6px 30px rgba(0, 0, 0, .55);
    pointer-events: none;
    z-index: 4;
    animation: kart-count 1s ease-out both;
}

.kart-countdown.go { color: var(--kart-ok); animation: kart-go 1s ease-out forwards; }

@keyframes kart-count {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
    18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: .9; transform: translate(-50%, -50%) scale(.96); }
}

@keyframes kart-go {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}

.kart-banner {
    position: absolute;
    left: 50%;
    top: calc(70px + var(--safe-top));
    transform: translateX(-50%);
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--kart-warn);
    color: #1a1200;
    font-weight: 800;
    font-size: 17px;
    pointer-events: none;
    z-index: 4;
    animation: kart-banner 2.8s ease-out forwards;
}

/* Hoch ist die Kopfleiste voll und rechts steht die Minikarte: das Banner kommt darunter. */
@media (orientation: portrait) {
    .kart-banner { top: calc(172px + var(--safe-top)); }
}

@keyframes kart-banner {
    0% { opacity: 0; transform: translate(-50%, -10px); }
    10% { opacity: 1; transform: translate(-50%, 0); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* Falsche Richtung: steht, solange die Engine das Flag setzt, mitten im Bild über dem Kart und unter den Pillen.
   Ohne Flag ist das Element leer und unsichtbar, bleibt aber da (Screenreader). */
.kart-wrongway {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--kart-red);
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
    pointer-events: none;
    z-index: 4;
    opacity: 0;
}

.kart-wrongway.on { opacity: 1; animation: kart-wrongway 1s ease-in-out infinite alternate; }

@keyframes kart-wrongway {
    from { transform: translate(-50%, -50%) scale(1); }
    to { transform: translate(-50%, -50%) scale(1.06); }
}

/* Hoch: in die Mitte der 3D-Fläche wie der Countdown. Flach quer über Item und Rückblick. */
@media (orientation: portrait) {
    .kart-touch .kart-wrongway { top: 34%; }
}

@media (orientation: landscape) and (max-height: 340px) {
    .kart-wrongway { top: 36%; }
}

/* Die eben beendete Runde, unter Runde und Uhr; nach gut drei Sekunden ist sie wieder weg. */
.kart-split {
    position: absolute;
    top: calc(84px + var(--safe-top));
    left: calc(60px + var(--safe-left));
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 12px;
    background: var(--kart-glass);
    border: 1px solid var(--kart-line);
    backdrop-filter: var(--kart-blur);
    -webkit-backdrop-filter: var(--kart-blur);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    z-index: 3;
    animation: kart-split 3.4s ease-out forwards;
}

.kart-split-lap { font-size: 12px; color: var(--kart-muted); text-transform: uppercase; letter-spacing: .06em; }
.kart-split-time { font-size: 17px; font-weight: 800; }
.kart-split-best { font-size: 12px; font-weight: 800; color: var(--kart-ok); }
.kart-split.best { border-color: rgba(95, 214, 138, .55); }
.kart-split.best .kart-split-time { color: var(--kart-ok); }

/* Hoch und schmal steht rechts oben die Minikarte: die Rundenzeit kommt mittig unter das Banner. */
@media (orientation: portrait) and (max-width: 520px) {
    .kart-split { top: calc(222px + var(--safe-top)); left: 0; right: 0; width: max-content; margin: 0 auto; }
}

@keyframes kart-split {
    0% { opacity: 0; transform: translateY(-6px); }
    8% { opacity: 1; transform: none; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------- Karten: Aufstellung, Menü, Ziel, Status ---------- */

.kart-scrim {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));
    z-index: 5;
    pointer-events: none;
}

.kart-scrim > .kart-card { pointer-events: auto; }
.kart-menu-scrim, .kart-status-scrim { background: rgba(4, 8, 16, .55); pointer-events: auto; }
.kart-status-scrim { z-index: 6; }

.kart-card {
    box-sizing: border-box;
    width: min(440px, 100%);
    max-height: 100%;
    overflow: auto;
    padding: 18px 20px;
    border-radius: 20px;
    background: var(--kart-glass);
    border: 1px solid var(--kart-line);
    backdrop-filter: var(--kart-blur);
    -webkit-backdrop-filter: var(--kart-blur);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    text-align: center;
    animation: kart-card .22s ease-out both;
}

@keyframes kart-card {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.kart-card h2 { margin: 0 0 12px; font-size: 22px; }
.kart-card p { margin: 0 0 10px; }

.kart-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--kart-accent) !important; font-weight: 700; }
.kart-hint, .kart-keys, .kart-status-detail { font-size: 13px; color: var(--kart-muted); }
.kart-tip { font-size: 13px; color: var(--kart-muted); margin-top: 8px !important; }
.kart-tip b { color: var(--kart-warn); }
.kart-keys { margin-top: 10px !important; line-height: 1.5; }
.kart-status-text { font-size: 18px; font-weight: 700; }
.kart-status-detail { word-break: break-word; }

/* Die Aufstellung lässt die Kranfahrt frei: die Karte sitzt unten. */
.kart-setup { place-items: end center; }
.kart-setup-card { width: min(420px, 100%); }
.kart-board .kart-go { min-width: 180px; min-height: 56px; font-size: 21px; font-weight: 800; margin: 4px 0 6px; }

.kart-portrait-hint { display: none; font-size: 13px; color: var(--kart-warn); }
@media (orientation: portrait) { .kart-portrait-hint { display: block; } }

.kart-ghosts { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kart-ghosts li { display: flex; align-items: baseline; gap: 8px; padding: 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 14px; }
.kart-ghost-kind { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.kart-ghosts li.record .kart-ghost-kind { color: var(--kart-gold); }
.kart-ghosts li.own .kart-ghost-kind { color: var(--kart-ghost); }
.kart-ghost-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kart-ghost-time { font-variant-numeric: tabular-nums; font-weight: 700; }

.kart-assists { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 10px 0 4px; }
.kart-assists-title { flex: 1 1 100%; font-size: 12px; color: var(--kart-muted); }

.kart-menu { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.kart-menu-actions { display: flex; gap: 8px; }
.kart-menu-actions > * { flex: 1; }
.kart-menu .kart-assists { margin: 6px 0 0; }
.kart-menu-sound { align-self: center; }
.kart-menu .kart-link { align-self: center; }

/* Die Zielkarte lässt die Kopfleiste frei. Auf flachen Schirmen (Handy quer) steht die Zusammenfassung links,
   Rundentabelle und Geister rechts, damit nichts rollen muss; die Karte sitzt dort zwischen Rückweg und Ton. */
.kart-finish-scrim { padding-top: calc(64px + var(--safe-top)); }
.kart-finish { width: min(420px, 100%); }

@media (max-height: 480px) and (orientation: landscape) {
    .kart-finish-scrim {
        padding: calc(8px + var(--safe-top)) calc(62px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(62px + var(--safe-left));
    }
    .kart-finish.detailed {
        width: min(680px, 100%);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
        grid-template-areas: "summary detail" "actions actions";
        column-gap: 18px;
        align-items: center;
    }
    .kart-finish-summary { grid-area: summary; }
    .kart-finish-detail { grid-area: detail; }
    .kart-finish .kart-laps { margin: 0 0 6px; }
    .kart-finish-actions { grid-area: actions; margin-top: 8px; }
    .kart-finish .kart-keys { display: none; }
}
.kart-finish-time { font-size: 44px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; margin-bottom: 4px !important; }
.kart-finish.timeout .kart-finish-time { color: var(--kart-muted); }
.kart-finish-status { font-weight: 700; }
.kart-finish-status.wait { color: var(--kart-muted); }
.kart-finish-status.ok { color: var(--kart-ok); }
.kart-finish-status.bad { color: #ff8f86; }
.kart-finish-status.kart-finish-probe { color: var(--kart-muted); }
.kart-finish-best { color: var(--kart-gold); font-weight: 800; }
.kart-finish-meta { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 10px; }
.kart-finish-place { font-weight: 700; }
.kart-badge { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(242, 184, 34, .18); color: var(--kart-warn); }
.kart-badge.off { background: rgba(255, 255, 255, .08); color: var(--kart-muted); }

/* Startaufstellung, Ziel und Ergebnis im Rennmodus (7.11 Nr. 2 und 4). */
.kart-race-card { width: min(460px, 100%); }
.kart-race-note { font-weight: 700; color: var(--kart-warn); }
.kart-race-sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--kart-muted); margin: 6px 0 4px !important; }
.kart-race-grid,
.kart-race-results { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.kart-race-grid li,
.kart-race-results li { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 14px; }
.kart-race-grid li.mine,
.kart-race-results li.mine { background: rgba(255, 255, 255, .12); font-weight: 700; }
.kart-race-start,
.kart-race-rank { min-width: 1.6em; color: var(--kart-muted); font-variant-numeric: tabular-nums; }
.kart-race-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--kart-seat, #888); }
.kart-race-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kart-race-ready { color: var(--kart-ok); font-weight: 900; }
.kart-race-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.kart-race-points { min-width: 2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--kart-muted); }
.kart-race-wait { color: var(--kart-muted); font-weight: 700; min-height: 1.3em; }
/* Startuhr (1.4): "Start in 23 s" über dem Knopf, darunter der Hinweis für alle, die noch nicht bereit sind. */
.kart-card .kart-race-clock { margin: 2px 0 4px; font-size: 18px; font-weight: 800; color: var(--kart-warn); font-variant-numeric: tabular-nums; }
.kart-card .kart-race-clock-hint { margin: 0 0 6px; font-size: 13px; color: var(--kart-muted); }
/* Eine Trennung hat das eigene Bereit gelöscht (1.3): die Bitte, sich noch einmal zu melden, direkt über dem Knopf. */
.kart-card .kart-race-lost { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--kart-warn); }
.kart-race-laps { font-size: 13px; color: var(--kart-muted); font-variant-numeric: tabular-nums; }
/* "Platz 1 · 1:46,654" auf der eigenen Zielkarte bleibt eine Zeile. Die Zeile ist rund 8,1 em breit (Roboto 7,3,
   Noto Sans 8,1), die Karte innen höchstens 380 px und sonst 100vw − 64 px (Rand der Fläche 2 × 12, der Karte 2 × 20):
   Die Schrift ist deshalb ein Neuntel davon, höchstens 44 px, hochkant bei 390 px rund 36 px. Quer auf flachen
   Schirmen begrenzt die Höhe (8,7vh, bei 390 px rund 34 px wie die übrigen Zielzeiten). */
.kart-race-finish .kart-race-finish-time { white-space: nowrap; font-size: min(44px, calc((min(100vw, 444px) - 64px) / 9), 8.7vh); }
/* Die Ergebnisliste rollt nie für sich: 8 Zeilen passen hoch wie quer (13.9 Nr. 12); wird es zu eng, rollt die Karte. */
.kart-board .kart-ready { min-width: 180px; min-height: 56px; font-size: 21px; font-weight: 800; margin: 4px 0 6px; }
/* Startfrist (1.4): wer nicht am Brett ist; Grund des Rennendes über dem Ergebnis (1.11). */
.kart-race-absent { font-size: 13px; color: var(--kart-muted); margin: 0 0 8px !important; }
.kart-race-reason { font-size: 13px; font-weight: 700; color: var(--kart-muted); margin: -2px 0 6px !important; }

/* Handy quer: die Startaufstellung zweispaltig, damit "Bereit" ohne Rollen zu sehen ist. Mit letztem Ergebnis steht
   "Nochmal" oben, und die Karte rollt als Ganzes (keine Liste mit eigenem Rollbalken in der rollenden Karte).
   Die Ergebniskarte: links alle 8 Plätze, rechts Runden und Knöpfe. */
@media (max-height: 480px) and (orientation: landscape) {
    /* Links bleibt der Rückweg frei (8 + 44 px), rechts Ton und der in der Aufstellung verborgene Pausenknopf
       (8 + 44 + 8 + 44 px): Sonst läge die Karte bei 667 × 375 über dem Tonknopf. Ziel und Ergebnis brauchen die
       Breite für die Liste; sie beginnen deshalb unter der Kopfleiste (8 + 44 px) und rollen, wenn es nicht reicht. */
    .kart-race .kart-setup { padding-left: calc(62px + var(--safe-left)); padding-right: calc(112px + var(--safe-right)); }
    .kart-race .kart-finish-scrim { padding-top: calc(58px + var(--safe-top)); }
    .kart-race-card { width: min(600px, 100%); }
    .kart-race-card .kart-race-grid { display: grid; grid-template-columns: 1fr 1fr; }
    /* Läuft die Startuhr, sagen sie und die Zeile unter "Bereit" schon, wie es losgeht: Der lange Hinweis fällt weg,
       sonst lägen "Zurück in den Raum" bei 667 × 375 unter dem Rand der Karte. */
    .kart-race-clocked > .kart-hint { display: none; }
    .kart-race-grid li, .kart-race-results li { padding: 3px 10px; }
    .kart-race-result {
        width: min(720px, 100%);
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        column-gap: 18px;
        align-items: center;
    }
    .kart-race-result .kart-race-results { margin-bottom: 0; }
    .kart-race-result-side .kart-race-laps { margin-top: 0; }
    /* Die Karte füllt hier die Höhe: der reine Hinweis des Emulators läge über der Aufstellung. Warnungen bleiben. */
    .kart-board:has(.kart-scrim) .kart-lag { display: none; }
}

/* Handy hoch: im Rennen steht der Platz mit in der Kopfleiste; enger, damit Ton und Pause nicht abgeschnitten werden. */
@media (max-width: 420px) {
    .kart-race .kart-top { gap: 6px; }
    .kart-race .kart-lap, .kart-race .kart-place, .kart-race .kart-clock { padding-left: 8px; padding-right: 8px; }
    .kart-race .kart-clock { min-width: 80px; }
}

/* 360 px (viele Androids): noch enger, ohne das statische "/8" am Platz; sonst ragt der Pausenknopf über den Rand. */
@media (max-width: 380px) {
    .kart-race .kart-top, .kart-race .kart-top-tools { gap: 4px; }
    .kart-race .kart-lap, .kart-race .kart-place, .kart-race .kart-clock { padding-left: 6px; padding-right: 6px; }
    .kart-race .kart-clock { min-width: 0; }
    .kart-race .kart-place .kart-lap-of { display: none; }
}

.kart-laps { width: 100%; border-collapse: collapse; margin: 4px 0 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.kart-laps th, .kart-laps td { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--kart-line); }
.kart-laps thead th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--kart-muted); }
.kart-laps tr.best td { color: var(--kart-ok); font-weight: 700; }
.kart-sectors { color: var(--kart-muted); }

/* Gegen die Geister: Rekord gold, eigene Bestzeit hellblau wie auf der Strecke; + (langsamer) rot, − grün. */
.kart-versus { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kart-versus li { display: flex; align-items: baseline; gap: 8px; padding: 4px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 14px; font-variant-numeric: tabular-nums; }
.kart-versus li.record .kart-ghost-kind { color: var(--kart-gold); }
.kart-versus li.own .kart-ghost-kind { color: var(--kart-ghost); }
.kart-versus-time { flex: 1; text-align: left; color: var(--kart-muted); }
.kart-versus-delta { font-weight: 800; }
.kart-versus-delta.plus { color: #ff8f86; }
.kart-versus-delta.minus { color: var(--kart-ok); }

.kart-finish-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; }
.kart-finish-actions .kart-cta { min-width: 160px; }
.kart-finish-links { display: flex; flex-wrap: wrap; justify-content: center; }
.kart-finish-actions .kart-link { padding: 0 8px; }
.kart-finish-actions .kart-keys { flex: 1 1 100%; margin: 2px 0 0 !important; }
/* Auf der Ergebniskarte stehen Startuhr, Hinweis und "Warte auf …" je in einer eigenen Zeile über bzw. unter "Nochmal",
   auch hochkant, wo sonst die Uhr neben den Knopf rutschte. */
.kart-finish-actions .kart-race-clock,
.kart-finish-actions .kart-race-clock-hint,
.kart-finish-actions .kart-race-lost,
.kart-finish-actions .kart-race-wait { flex: 1 1 100%; }

.kart-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 4px auto 10px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .15);
    border-top-color: var(--kart-accent);
    animation: kart-spin .9s linear infinite;
}

@keyframes kart-spin { to { transform: rotate(360deg); } }

/* ---------- Pillen, Hinweis, Debug ---------- */

/* Verbindung und Meldung oben unter der Kopfleiste, untereinander und mittig. Nie im Daumenbereich: unten liegen
   Lenkschieber, Stick, Drift und Bremse. Die Pillen nehmen keine Finger an, nur ihre Knöpfe; ein Tipp auf den Text
   geht an das, was darunter liegt. */
.kart-pills {
    position: absolute;
    top: calc(64px + var(--safe-top));
    left: calc(16px + var(--safe-left));
    right: calc(16px + var(--safe-right));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    z-index: 7;
}

/* Handy hoch im Rennen: die Pillen lassen die Spalte der Minikarte frei (104 px an 10 px Rand), auch den Ring um das
   Kameraziel der Zuschauer. */
@media (orientation: portrait) and (max-width: 520px) {
    .kart-race .kart-pills { right: calc(124px + var(--safe-right)); }
}

.kart-pill {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(460px, 100%);
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--kart-glass);
    border: 1px solid var(--kart-line);
    backdrop-filter: var(--kart-blur);
    -webkit-backdrop-filter: var(--kart-blur);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}

.kart-conn { color: var(--kart-warn); pointer-events: none; }

/* Die Verbindung hat aufgegeben: nur der Knopf "Neu verbinden" nimmt Finger an, die Pille selbst nicht. */
.kart-conn-lost { padding-right: 6px; }
.kart-board .kart-pill-action {
    min-height: 48px;
    margin: -8px 0;
    padding: 0 14px;
    border-radius: 999px;
    --kart-btn-bg: rgba(242, 184, 34, .18);
    --kart-btn-line: rgba(242, 184, 34, .55);
    --kart-btn-ink: var(--kart-warn);
    font-weight: 700;
    white-space: nowrap;
    pointer-events: auto;
}

.kart-error { border-color: rgba(232, 66, 58, .5); pointer-events: none; }

/* Zuschauer im Rennen (7.9): Kameraziel und wie man weiterschaltet. Die Pille nimmt keine Finger an; ein Tipp geht an
   das Bild darunter und schaltet dort (Kommando 1). */
.kart-spectator { flex-wrap: wrap; justify-content: center; row-gap: 2px; text-align: center; }
.kart-pill-hint { font-size: 13px; font-weight: 500; color: var(--kart-muted); }
/* Wer beim Ablauf der Startuhr nicht bereit war (1.4): der Satz über die ganze Breite, darunter Kamera und Umschalten. */
.kart-sitting-out { border-radius: 18px; }
.kart-sitting-out-text { flex: 1 1 100%; }

/* Netzemulator (7.12): gewollte Verzögerung, kein Fehler. */
.kart-lag { font-size: 13px; color: var(--kart-accent); }
.kart-board .kart-pill-close { min-width: 48px; min-height: 48px; margin: -8px -10px -8px 0; padding: 0; border: 0; border-radius: 50%; font-size: 20px; pointer-events: auto; }

/* Nur für Screenreader: im Baum und vorgelesen, aber nicht zu sehen. */
.kart-sr,
.kart-notice:not([data-show="1"]) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

/* Der Hinweis des Bundles bleibt auch leer im Baum (kein display: none): so wird "Grafik wird neu geladen …"
   angesagt, sobald das Bundle den Text setzt. */
.kart-notice[data-show="1"] {
    display: block;
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 48px);
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--kart-glass);
    border: 1px solid var(--kart-line);
    font-weight: 700;
    text-align: center;
    z-index: 8;
    pointer-events: none;
}

.kart-debug {
    position: absolute;
    left: calc(8px + var(--safe-left));
    bottom: calc(8px + var(--safe-bottom));
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .62);
    color: #cfe3ff;
    font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre;
    pointer-events: none;
    z-index: 9;
}

.kart-debug:empty { display: none; }

/* ---------- Kleine Schirme ---------- */

@media (max-height: 420px) {
    .kart-minimap { width: 104px; height: 104px; top: calc(58px + var(--safe-top)); }
    .kart-finish-time { font-size: 34px; }
    .kart-card { padding: 12px 16px; }
    .kart-laps { font-size: 12px; }
}

@media (max-width: 420px) {
    .kart-clock { min-width: 84px; }
    .kart-lap-value, .kart-clock-race { font-size: 19px; }
}

/* 320 px (iPhone SE der ersten Reihe, kleine Androids): sonst schiebt die Kopfleiste den Pausenknopf über den Rand.
   Das Wort "Runde" liest nur noch der Screenreader. */
@media (max-width: 359px) {
    .kart-top, .kart-top-tools { gap: 4px; }
    .kart-lap, .kart-clock { padding: 4px 8px 5px; }
    .kart-clock { min-width: 0; }
    .kart-lap-value, .kart-clock-race { font-size: 17px; }
    .kart-clock-delta { font-size: 13px; }
    .kart-lap-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Wenig Bewegung: nichts springt oder wächst, Countdown und Banner blenden nur ein und aus. */
@media (prefers-reduced-motion: reduce) {
    .kart-countdown { animation: none; }
    .kart-countdown.go, .kart-banner, .kart-split { animation-name: kart-fade-out; animation-timing-function: linear; }
    .kart-wrongway.on { animation: none; }
    .kart-card { animation: none; }
    .kart-spinner { animation-duration: 2.5s; }
    .kart-board .kart-btn { transition: none; }
}

@keyframes kart-fade-out {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}


/* ---------- Items im Rennen (docs/robokart-vertrag-items.md, 8.1, 8.4) ----------
   Itemplatz und Warnung zeigen das Kameraziel. Was sie zeigen, setzt der Renderer je Bild an [data-kart-item] und am
   Item-Knopf: data-item ("" oder turbo, dreifach, niet, drohne, mine, oel, schild, emp, kabel, wuerfel für den noch
   unbekannten Wurf), data-rolling ("1" mit Kopf-Bit 128), data-charges ("2", "3" oder leer) und --kart-item-ring
   (0 bis 1: Kabel vor Schild, mit "nur Turbo" die Roulette). An [data-kart-item-warn] setzt er data-show="1". Blazor
   rendert an diesen Elementen weder style noch eines dieser Attribute. Die Symbole sind Linienzeichnungen in eigenen
   Farben: kein Fragezeichen, kein Blitz, nichts, das wie ein fremdes Item aussieht. */

.kart-items {
    --kart-icon-turbo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23eef3fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='15' height='10' rx='2'/%3E%3Cpath d='M18 10.5h2.5v3H18'/%3E%3Cpath d='M7.5 9.5l2.5 2.5-2.5 2.5M11.5 9.5l2.5 2.5-2.5 2.5' stroke='%234fc3dd'/%3E%3C/g%3E%3C/svg%3E");
    --kart-icon-dreifach: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23eef3fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='13' height='5' rx='1.5'/%3E%3Crect x='4' y='9.5' width='13' height='5' rx='1.5'/%3E%3Crect x='4' y='16' width='13' height='5' rx='1.5'/%3E%3Cpath d='M17 5h2.5M17 12h2.5M17 18.5h2.5'/%3E%3Cpath d='M7.5 5.5h4M7.5 12h4M7.5 18.5h4' stroke='%234fc3dd'/%3E%3C/g%3E%3C/svg%3E");
    --kart-icon-niet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23eef3fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6.5' width='4.5' height='11' rx='1'/%3E%3Cpath d='M8 9.5h9.5l3 2.5-3 2.5H8'/%3E%3Cpath d='M12 9.5l-1.2 5M15.2 9.5l-1.2 5' stroke='%234fc3dd'/%3E%3C/g%3E%3C/svg%3E");
    --kart-icon-drohne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23eef3fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='5.5' r='3'/%3E%3Ccircle cx='18.5' cy='5.5' r='3'/%3E%3Ccircle cx='5.5' cy='18.5' r='3'/%3E%3Ccircle cx='18.5' cy='18.5' r='3'/%3E%3Cpath d='M8 8l2.5 2.5M16 8l-2.5 2.5M8 16l2.5-2.5M16 16l-2.5-2.5'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='1.2'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23ff6b5e' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    --kart-icon-mine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23eef3fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='18' rx='8.5' ry='3'/%3E%3Cpath d='M8 4v6.5a4 4 0 0 0 8 0V4'/%3E%3Cpath d='M8 6.5h2.5M13.5 6.5H16' stroke='%234fc3dd'/%3E%3Ccircle cx='12' cy='18' r='1' fill='%234fc3dd' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    --kart-icon-oel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23eef3fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c2.5 3.6 5 6.2 5 9a5 5 0 0 1-10 0c0-2.8 2.5-5.4 5-9z'/%3E%3Cpath d='M3.5 20.5c2-1.3 4-1.3 6 0s4 1.3 6 0 4-1.3 5 0' stroke='%234fc3dd'/%3E%3C/g%3E%3C/svg%3E");
    --kart-icon-schild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23eef3fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8.5 4.8v9.4L12 21.5l-8.5-4.8V7.3z'/%3E%3Cpath d='M12 7.5l3.8 2.2v4.6L12 16.5l-3.8-2.2V9.7z' stroke='%234fc3dd'/%3E%3C/g%3E%3C/svg%3E");
    --kart-icon-emp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23eef3fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%234fc3dd' stroke='none'/%3E%3Cpath d='M8 8.5a5 5 0 0 0 0 7M16 8.5a5 5 0 0 1 0 7' stroke='%234fc3dd'/%3E%3Cpath d='M5 5.5a9.5 9.5 0 0 0 0 13M19 5.5a9.5 9.5 0 0 1 0 13'/%3E%3C/g%3E%3C/svg%3E");
    --kart-icon-kabel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23eef3fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3l2.5 5 2.5-5'/%3E%3Cpath d='M6 8c0 7 12 3 12 9' stroke='%234fc3dd'/%3E%3Cpath d='M15.5 21l2.5-4 2.5 4'/%3E%3C/g%3E%3C/svg%3E");
    --kart-icon-wuerfel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23eef3fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8.5 4.7v9.6L12 21.5l-8.5-4.7V7.2z'/%3E%3Cpath d='M3.5 7.2l8.5 4.7 8.5-4.7M12 11.9v9.6'/%3E%3Cpath d='M6 10.6v3.2l2.3 1.3M15.5 13.2l2.6-1.4V9.6' stroke='%234fc3dd'/%3E%3Ccircle cx='8.3' cy='15.1' r='.9' fill='%234fc3dd' stroke='none'/%3E%3Ccircle cx='18.1' cy='9.6' r='.9' fill='%234fc3dd' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    --kart-icon-roulette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 216 24'%3E%3Cg fill='none' stroke='%23eef3fb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 0)'%3E%3Crect x='3' y='7' width='15' height='10' rx='2'/%3E%3Cpath d='M18 10.5h2.5v3H18'/%3E%3Cpath d='M7.5 9.5l2.5 2.5-2.5 2.5M11.5 9.5l2.5 2.5-2.5 2.5' stroke='%234fc3dd'/%3E%3C/g%3E%3Cg transform='translate(24 0)'%3E%3Crect x='4' y='3' width='13' height='5' rx='1.5'/%3E%3Crect x='4' y='9.5' width='13' height='5' rx='1.5'/%3E%3Crect x='4' y='16' width='13' height='5' rx='1.5'/%3E%3Cpath d='M17 5h2.5M17 12h2.5M17 18.5h2.5'/%3E%3Cpath d='M7.5 5.5h4M7.5 12h4M7.5 18.5h4' stroke='%234fc3dd'/%3E%3C/g%3E%3Cg transform='translate(48 0)'%3E%3Crect x='3.5' y='6.5' width='4.5' height='11' rx='1'/%3E%3Cpath d='M8 9.5h9.5l3 2.5-3 2.5H8'/%3E%3Cpath d='M12 9.5l-1.2 5M15.2 9.5l-1.2 5' stroke='%234fc3dd'/%3E%3C/g%3E%3Cg transform='translate(72 0)'%3E%3Ccircle cx='5.5' cy='5.5' r='3'/%3E%3Ccircle cx='18.5' cy='5.5' r='3'/%3E%3Ccircle cx='5.5' cy='18.5' r='3'/%3E%3Ccircle cx='18.5' cy='18.5' r='3'/%3E%3Cpath d='M8 8l2.5 2.5M16 8l-2.5 2.5M8 16l2.5-2.5M16 16l-2.5-2.5'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='1.2'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23ff6b5e' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(96 0)'%3E%3Cellipse cx='12' cy='18' rx='8.5' ry='3'/%3E%3Cpath d='M8 4v6.5a4 4 0 0 0 8 0V4'/%3E%3Cpath d='M8 6.5h2.5M13.5 6.5H16' stroke='%234fc3dd'/%3E%3Ccircle cx='12' cy='18' r='1' fill='%234fc3dd' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(120 0)'%3E%3Cpath d='M12 3c2.5 3.6 5 6.2 5 9a5 5 0 0 1-10 0c0-2.8 2.5-5.4 5-9z'/%3E%3Cpath d='M3.5 20.5c2-1.3 4-1.3 6 0s4 1.3 6 0 4-1.3 5 0' stroke='%234fc3dd'/%3E%3C/g%3E%3Cg transform='translate(144 0)'%3E%3Cpath d='M12 2.5l8.5 4.8v9.4L12 21.5l-8.5-4.8V7.3z'/%3E%3Cpath d='M12 7.5l3.8 2.2v4.6L12 16.5l-3.8-2.2V9.7z' stroke='%234fc3dd'/%3E%3C/g%3E%3Cg transform='translate(168 0)'%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%234fc3dd' stroke='none'/%3E%3Cpath d='M8 8.5a5 5 0 0 0 0 7M16 8.5a5 5 0 0 1 0 7' stroke='%234fc3dd'/%3E%3Cpath d='M5 5.5a9.5 9.5 0 0 0 0 13M19 5.5a9.5 9.5 0 0 1 0 13'/%3E%3C/g%3E%3Cg transform='translate(192 0)'%3E%3Cpath d='M3.5 3l2.5 5 2.5-5'/%3E%3Cpath d='M6 8c0 7 12 3 12 9' stroke='%234fc3dd'/%3E%3Cpath d='M15.5 21l2.5-4 2.5 4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Itemplatz: oben links, er spiegelt die Minikarte rechts. Er fängt keine Berührung; der schwebende Lenkstick links
   bleibt bedienbar. */
.kart-item-slot {
    position: absolute;
    top: calc(62px + var(--safe-top));
    left: calc(10px + var(--safe-left));
    width: 72px;
    height: 72px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(9, 14, 26, .42);
    border: 1px solid var(--kart-line);
    pointer-events: none;
    z-index: 2;
}

.kart-item-icon {
    width: 72%;
    height: 72%;
    background: no-repeat center / contain;
}

.kart-item-slot[data-item="turbo"] .kart-item-icon { background-image: var(--kart-icon-turbo); }
.kart-item-slot[data-item="dreifach"] .kart-item-icon { background-image: var(--kart-icon-dreifach); }
.kart-item-slot[data-item="niet"] .kart-item-icon { background-image: var(--kart-icon-niet); }
.kart-item-slot[data-item="drohne"] .kart-item-icon { background-image: var(--kart-icon-drohne); }
.kart-item-slot[data-item="mine"] .kart-item-icon { background-image: var(--kart-icon-mine); }
.kart-item-slot[data-item="oel"] .kart-item-icon { background-image: var(--kart-icon-oel); }
.kart-item-slot[data-item="schild"] .kart-item-icon { background-image: var(--kart-icon-schild); }
.kart-item-slot[data-item="emp"] .kart-item-icon { background-image: var(--kart-icon-emp); }
.kart-item-slot[data-item="kabel"] .kart-item-icon { background-image: var(--kart-icon-kabel); }
.kart-item-slot[data-item="wuerfel"] .kart-item-icon { background-image: var(--kart-icon-wuerfel); }

/* Roulette: Die Symbole laufen durch (neun Bilder, 0,72 s je Umlauf), solange Bit 128 steht, auch über die 1,2 s
   hinaus, wenn das Item im Brett noch unbekannt ist. */
.kart-item-slot[data-rolling="1"] .kart-item-icon {
    background-image: var(--kart-icon-roulette);
    background-size: 900% 100%;
    background-position: 0 0;
    animation: kart-item-roll .72s steps(9) infinite;
}

@keyframes kart-item-roll {
    from { background-position: 0 0; }
    to { background-position: 112.5% 0; }
}

/* Nur Turbo: Es gibt nur ein Item. Die Roulette zeigt den Turbo-Akku, der Ring lädt sich auf. */
.kart-items-turbo .kart-item-slot[data-rolling="1"] .kart-item-icon {
    background-image: var(--kart-icon-turbo);
    background-size: contain;
    background-position: center;
    animation: none;
    opacity: .6;
}

/* Ladering: Kabel vor Schild, mit "nur Turbo" die Roulette; 0 zeigt nichts. */
.kart-item-slot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: conic-gradient(var(--kart-accent) calc(var(--kart-item-ring, 0) * 1turn), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    pointer-events: none;
}

/* Ladungen des Dreifach-Akkus. */
.kart-item-slot[data-charges="2"]::before,
.kart-item-slot[data-charges="3"]::before {
    content: attr(data-charges);
    position: absolute;
    right: 4px;
    bottom: 2px;
    font-size: 13px;
    font-weight: 800;
    color: var(--kart-accent);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/* Während der Roulette stehen keine Ladungen da: Ist der Wurf schon bekannt, verriete eine 3 den Dreifach-Akku. */
.kart-item-slot[data-rolling="1"]::before { content: none; }

/* Warnung "Suchdrohne!": unter dem Itemplatz, nur solange der Renderer data-show="1" setzt. */
.kart-item-warn {
    position: absolute;
    top: calc(62px + 72px + 6px + var(--safe-top));
    left: calc(10px + var(--safe-left));
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(232, 66, 58, .22);
    border: 1px solid rgba(232, 66, 58, .6);
    color: #ff8f86;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    visibility: hidden;
}

.kart-item-warn[data-show="1"] { visibility: visible; }

/* In Laden, Aufstellung und Ziel gibt es nichts einzusetzen. */
.kart-phase-0 .kart-item-slot, .kart-phase-0 .kart-item-warn[data-show="1"],
.kart-phase-1 .kart-item-slot, .kart-phase-1 .kart-item-warn[data-show="1"],
.kart-phase-5 .kart-item-slot, .kart-phase-5 .kart-item-warn[data-show="1"] { visibility: hidden; }

/* Item-Knopf: mit data-item das Symbol statt des Worts; leer und während der Roulette gedämpft. */
.kart-items .kart-btn-item[data-item]:not([data-item=""]) { color: transparent; }

.kart-items .kart-btn-item[data-item]:not([data-item=""])::before {
    content: "";
    position: absolute;
    inset: 20%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

.kart-items .kart-btn-item[data-item="turbo"]::before { background-image: var(--kart-icon-turbo); }
.kart-items .kart-btn-item[data-item="dreifach"]::before { background-image: var(--kart-icon-dreifach); }
.kart-items .kart-btn-item[data-item="niet"]::before { background-image: var(--kart-icon-niet); }
.kart-items .kart-btn-item[data-item="drohne"]::before { background-image: var(--kart-icon-drohne); }
.kart-items .kart-btn-item[data-item="mine"]::before { background-image: var(--kart-icon-mine); }
.kart-items .kart-btn-item[data-item="oel"]::before { background-image: var(--kart-icon-oel); }
.kart-items .kart-btn-item[data-item="schild"]::before { background-image: var(--kart-icon-schild); }
.kart-items .kart-btn-item[data-item="emp"]::before { background-image: var(--kart-icon-emp); }
.kart-items .kart-btn-item[data-item="kabel"]::before { background-image: var(--kart-icon-kabel); }
.kart-items .kart-btn-item[data-item="wuerfel"]::before { background-image: var(--kart-icon-wuerfel); }

/* Während der Roulette verrät der Knopf das Item nicht, auch wenn der Wurf schon im Schnappschuss stand: Er zeigt den
   Datenwürfel, mit "nur Turbo" den Turbo-Akku (es gibt dort nur ihn), so wie der Itemplatz bei wenig Bewegung. */
.kart-items .kart-btn-item[data-rolling="1"]::before { background-image: var(--kart-icon-wuerfel); }
.kart-items-turbo .kart-btn-item[data-rolling="1"]::before { background-image: var(--kart-icon-turbo); }

.kart-items .kart-btn-item:not([data-item]),
.kart-items .kart-btn-item[data-item=""],
.kart-items .kart-btn-item[data-rolling="1"] { opacity: .5; }

/* Ohne Items (Zeitfahren, Rennen mit "Items: Aus") wirkt der Item-Knopf nicht: Er bleibt (8.1), aber noch stärker
   gedämpft als ein leerer Itemplatz, damit er nicht wie ein bedienbarer Knopf aussieht (Regeln: "im Rennen mit Items
   der Item-Knopf"). */
.kart-board:not(.kart-items) .kart-btn-item { opacity: .35; }

/* Pillen: Am Rechner und quer rücken sie mit Items nach rechts, damit sie den Itemplatz nicht verdecken. Hoch rückt
   nichts: Dort liegt der Itemplatz unten, und die Pille "Verbindung verloren" mit "Neu verbinden" bräuchte die Breite. */
.kart-items:not(.kart-touch) .kart-pills { left: calc(90px + var(--safe-left)); }

@media (orientation: landscape) {
    /* Touch quer: 56 px, darunter die Warnung. */
    .kart-touch .kart-item-slot { width: 56px; height: 56px; border-radius: 12px; }
    .kart-touch .kart-item-warn { top: calc(62px + 56px + 6px + var(--safe-top)); }
    /* Rechts lassen sie die Spalte der Minikarte frei (104 px an 10 px Rand): Der Rücken nach rechts schöbe eine
       breite Pille wie "Hier fahren" bei 667 × 375 sonst in sie hinein. Ohne Abstand dazu, damit die Mitte nicht so
       weit nach links rückt, dass die zweite Pille die Warnung unter dem Itemplatz verdeckt. */
    .kart-touch.kart-items .kart-pills { left: calc(74px + var(--safe-left)); right: calc(114px + var(--safe-right)); }
}

@media (orientation: landscape) and (max-height: 340px) {
    /* Sehr flach (568 × 320): 48 px und höher. Die Pillen bleiben links der Knöpfe (Rückblick reicht bis 244 px vom
       rechten Rand), sonst läge der Schließen-Knopf der Fehlerpille auf dem Item-Knopf (Plan, "Offen"). */
    .kart-touch .kart-item-slot { top: calc(52px + var(--safe-top)); width: 48px; height: 48px; border-radius: 10px; }
    .kart-touch .kart-item-warn { top: calc(52px + 48px + 6px + var(--safe-top)); }
    .kart-touch.kart-items .kart-pills { left: calc(66px + var(--safe-left)); }
    .kart-touch.kart-race .kart-pills { right: calc(250px + var(--safe-right)); }
    /* So flach reicht eine Pille links bis unter die Warnung (etwa "Du schaust zu" der Zuschauer, die immer steht).
       Die Warnung gilt nur Sekunden und ist dringend: Sie liegt dann über der Pille, deren Knöpfe rechts frei bleiben
       (die Warnung fängt keine Berührung). Unter Menü, Karte oder Statuskarte bleibt sie darunter wie der Itemplatz. */
    .kart-touch.kart-items:not(:has(.kart-scrim)) .kart-item-warn {
        z-index: 8;
        background: linear-gradient(rgba(232, 66, 58, .22), rgba(232, 66, 58, .22)), rgba(9, 14, 26, .9);
    }
}

@media (orientation: portrait) {
    /* Touch hoch: unten links in der 3D-Fläche, spiegelt den Rückblick-Knopf rechts unten; das Tempo in der Mitte
       bleibt frei. Die Warnung steht 6 px darüber. */
    .kart-touch .kart-item-slot {
        top: auto;
        bottom: calc(40% + 10px);
        left: calc(10px + var(--safe-left));
        width: 56px;
        height: 56px;
        border-radius: 12px;
    }

    .kart-touch .kart-item-warn { top: auto; bottom: calc(40% + 72px); }

    /* Zuschauer hoch: Das Bild geht über die ganze Höhe. */
    .kart-touch.kart-spectating .kart-item-slot { bottom: calc(12px + var(--safe-bottom)); }
    .kart-touch.kart-spectating .kart-item-warn { bottom: calc(74px + var(--safe-bottom)); }
}

/* Hoch bis 380 px Breite bleiben den Pillen neben der Minikarte nur 220 px (360 px Breite): etwas kleiner, damit
   "Verbindung verloren" samt "Neu verbinden" nicht über den Rand läuft (Items-Vertrag 11.5, Browserprobe hoch). */
@media (orientation: portrait) and (max-width: 380px) {
    .kart-race .kart-pill { padding: 8px 10px; gap: 6px; font-size: 13px; }
    .kart-race .kart-conn-lost { padding-right: 5px; }
    .kart-board.kart-race .kart-pill-action { padding: 0 10px; }
}

/* 320 px (iPhone SE der ersten Reihe): Auch kompakt bleiben neben der Minikarte nur 180 px. Dann steht der Knopf unter
   dem Text, statt über den Rand der Pille zu laufen. */
@media (orientation: portrait) and (max-width: 340px) {
    .kart-race .kart-conn-lost,
    .kart-race .kart-other-window { flex-wrap: wrap; justify-content: center; row-gap: 10px; border-radius: 18px; text-align: center; }
    .kart-race .kart-conn-lost { padding-right: 10px; }
}

/* Wenig Bewegung: Die Roulette steht still und zeigt den Datenwürfel. */
@media (prefers-reduced-motion: reduce) {
    .kart-item-slot[data-rolling="1"] .kart-item-icon {
        background-image: var(--kart-icon-wuerfel);
        background-size: contain;
        background-position: center;
        animation: none;
    }

    .kart-items-turbo .kart-item-slot[data-rolling="1"] .kart-item-icon { background-image: var(--kart-icon-turbo); }
}