/**
 * QUIZFUSSBALL — Modul-Layout (Fach: quiz)
 *
 * Reines Modul-Layout dieses Spiels. Header/Navigation/Vollbild/Settings
 * kommen aus global/ui (injectUI + SettingsBuilder) — hier bewusst NICHT
 * nachgebaut. Auch keine bare `button{}`-Regel: die würde sonst die globalen
 * Nav-/Settings-Buttons mit übersteuern.
 *
 * SKALIERUNG: Alle Maße sind relativ (vh/vw/vmin/clamp) statt fester Pixel.
 * Dadurch passt sich das ganze Spielfeld automatisch der Fenstergröße an —
 * der Browser rechnet die Prozente selbst, keine JS-Größenlogik nötig. Das
 * Layout ist eine Flex-Spalte über die volle Viewport-Höhe: Kopfzeile oben,
 * Stadion füllt den Rest (flex:1), Anzeige/Steuerung nehmen ihre Eigenhöhe.
 *
 * FUSSBALL-OPTIK: Der Ball (#soccerBall) liegt als eigene Ebene über dem Feld
 * und wird per Web-Animations-API im Bogen (Pass) zwischen den Schritt-Punkten
 * bewegt — die Positionen berechnet JS aus den Zellen-Mitten (cellCenter()).
 * Tor = Konfetti + Netz-Beben + Jubel-Banner. Die ovale Pferderennbahn bleibt
 * unverändert (absolute Positionen aus der Container-Größe, siehe *.js).
 */

/* Volle Höhe als Flex-Spalte: header → scoreboard → undo → stadium(flex:1) → controls.
   overflow:hidden verhindert Scrollen; das Stadion absorbiert den Rest. */
html, body { height: 100%; }
body {
    background-color: #1b5e20; /* Startwert Fußball; im Pferdemodus per JS auf Sand gesetzt */
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Die global gebaute Kopfzeile bleibt oben in ihrer Eigenhöhe. Sie hat global
   KEINE Fläche (s. ui.css) — der dunkelgrüne Seitenhintergrund scheint also
   durch; hier wird nur die Schriftfarbe hell gesetzt (Titel + Pfeil). */
.header { flex: 0 0 auto; }
:root { --header-title-color: #fff; }

/* --- SCOREBOARD-REIHE (Anzeigetafel + Team-Knöpfe links/rechts) --- */
.scoreboard-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2.5vw, 48px);
    margin: clamp(6px, 1.4vh, 20px) auto clamp(4px, 1vh, 10px) auto;
    flex: 0 0 auto;
}
.scoreboard-row .scoreboard { margin: 0; }

/* --- ANZEIGETAFEL --- */
.scoreboard {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 4vw, 60px);
    font-size: clamp(28px, 7vh, 88px);
    font-weight: bold;
    background: linear-gradient(180deg, #14202b, #0a1119);
    border: clamp(3px, 0.6vh, 6px) solid rgba(255,255,255,0.9);
    border-radius: 18px;
    padding: clamp(6px, 1.4vh, 22px) clamp(20px, 3vw, 50px);
    width: fit-content;
    margin: 0 auto;
    flex: 0 0 auto;
    box-shadow: 0 10px 26px rgba(0,0,0,0.4), inset 0 0 18px rgba(0,0,0,0.6);
}
/* --- PFERDEMODUS: Anzeigetafel HOCHKANT am rechten Rand ---
   Im Pferderennen ist oben mittig kein Platz nötig (die Bahn füllt das Feld),
   darum wandert die ganze Reihe als fixe Spalte an den rechten Rand:
   Rot oben → Tafel hochkant → Blau unten. Der Trikot-Generator sitzt oben
   LINKS, steht ihr also nicht mehr im Weg (früher hing die Spalte unter dem
   Trikot). 🔴 Die Spalte wird als GANZES (Rot-Knopf + Tafel + Blau-Knopf)
   senkrecht MITTIG in der Bühne unter der Kopfzeile ausgerichtet — Bezug ist
   die globale `--stage-height` (= 100dvh − Kopfzeile), nicht das Fenster. */
body.horse-mode .scoreboard-row {
    position: fixed;
    top: calc(var(--header-height, 56px) + var(--stage-height, 100dvh) / 2);
    transform: translateY(-50%);
    right: clamp(6px, 1.5vw, 16px);
    left: auto;
    margin: 0;
    z-index: 15;
    flex-direction: column;
    gap: clamp(8px, 1.6vh, 22px);
    /* Trikot-Breite → die Spalte steht mittig unter dem Trikot */
    width: clamp(84px, 14vh, 180px);
}
body.horse-mode .scoreboard {
    flex-direction: column;
    justify-content: space-between;
    /* Schmaler als das Trikot, dafür deutlich höher (hochkant-Optik). */
    gap: clamp(8px, 1.8vh, 22px);
    font-size: clamp(24px, 5vh, 56px);
    padding: clamp(24px, 5vh, 64px) clamp(2px, 0.4vw, 6px);
    width: 50%;
}
body.horse-mode .score-separator {
    font-size: clamp(20px, 4vh, 44px);
    margin: 0;
    line-height: 0.6;
}
body.horse-mode .attack-btn {
    font-size: clamp(26px, 5vh, 52px);
    width: clamp(48px, 9vh, 86px);
    height: clamp(48px, 9vh, 86px);
}

.score-red  { color: #ff5b5b; text-shadow: 0 0 12px rgba(255,82,82,0.7); }
.score-blue { color: #6bb8ff; text-shadow: 0 0 12px rgba(100,181,246,0.7); }
.score-separator {
    font-size: clamp(30px, 7.5vh, 96px);
    font-weight: bold;
    margin: 0 clamp(8px, 1.5vw, 20px);
    color: rgba(255,255,255,0.85);
}

/* --- TEAM-KNÖPFE (Angriff): runde Team-Badges, die zum Antippen einladen --- */
.red-btn, .blue-btn {
    border: none;
    color: white;
    cursor: pointer;
}
.attack-btn {
    font-size: clamp(34px, 7vh, 74px);
    width: clamp(60px, 12vh, 122px);
    height: clamp(60px, 12vh, 122px);
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.1s ease;
}
.red-btn {
    background: radial-gradient(circle at 35% 28%, #ff9a8f, #d32f2f 78%);
    box-shadow: 0 9px 0 #8f1e1e, 0 12px 20px rgba(0,0,0,0.42);
}
.blue-btn {
    background: radial-gradient(circle at 35% 28%, #8fc0ff, #1976d2 78%);
    box-shadow: 0 9px 0 #0f3f74, 0 12px 20px rgba(0,0,0,0.42);
}
.attack-btn:active { transform: translateY(7px); }
.red-btn:active  { box-shadow: 0 2px 0 #8f1e1e, 0 4px 10px rgba(0,0,0,0.4); }
.blue-btn:active { box-shadow: 0 2px 0 #0f3f74, 0 4px 10px rgba(0,0,0,0.4); }

/* --- ZWEITRANG-STEUERUNG (Undo) --- */
/* Rückgängig ist jetzt ein freistehender runder Seiten-Knopf oben links
   (globaler `SideButtons`-Baustein, `.side-btn` in global/ui/ui.css) — genau
   wie der 🔄-Knopf daneben. Deshalb KEINE modul-eigene Optik mehr hier
   (frühere `.secondary-controls`/`.undo-btn` sind entfernt). */

/* --- STADION / FELD --- */
/* flex:1 → füllt die verbleibende Höhe; min-height:0 erlaubt Schrumpfen. */
.stadium {
    flex: 1 1 0;
    min-height: 0;
    width: 96%;
    max-width: 1600px;
    margin: clamp(6px, 1.2vh, 20px) auto clamp(6px, 1.5vh, 22px) auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

.stadium.sand-bg {
    /* Keine eigene Sandfläche mehr und kein weißer Rahmen — sichtbar ist allein
       die sandfarbene Bahn auf dem Seitenhintergrund. */
    background: none;
    border: none;
    padding: clamp(10px, 2vh, 25px);
}

.stadium.football-bg {
    /* Außerhalb der Auslinie (Tor-Zonen) einfarbiger Rasen — das gestreifte
       Muster liegt NUR innerhalb der weißen Linien (siehe ::before). */
    background:
        radial-gradient(120% 120% at 50% 50%, rgba(255,255,255,0.10), rgba(0,0,0,0.28)),
        #2e7d32;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.35);
}

/* Tor-Beben-Ruckler beim Treffer (kurz, per JS-Klasse). */
.stadium.shake { animation: stadiumShake 0.5s ease; }
@keyframes stadiumShake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-6px, 3px); }
    40% { transform: translate(6px, -3px); }
    60% { transform: translate(-4px, 2px); }
    80% { transform: translate(4px, -2px); }
}

/* Feld-Aussenlinie */
.stadium.football-bg::before {
    content: "";
    position: absolute;
    /* Auslinie links/rechts an die Tor-Vorderkante (--goal-depth) → das Netz
       steht in der Zone dahinter (zwischen Linie und Stadionrand). */
    inset: 8px var(--goal-depth);
    border: 6px solid rgba(255,255,255,0.92);
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
    /* Rasenmuster: 17 Streifen à 6% — die Prozente beziehen sich auf DIESE
       Fläche (Innenkante der Auslinie), das Muster füllt also exakt das Feld.
       Um 1% versetzt, damit Streifen 9 mittig auf der Mittellinie sitzt. */
    background: repeating-linear-gradient(90deg, #2e7d32 -1% 5%, #379a3d 5% 11%);
    background-clip: padding-box;
}

/* --- STRAFRAUM (Fußball) wie auf einem echten Feld ---
   Großer Strafraum + kleiner Torraum (beide eckig, zur Torlinie hin offen) +
   Elfmeterpunkt + Strafraumbogen („D"). --pen-w = Tiefe des großen Strafraums;
   Elfmeterpunkt und Bogen leiten ihre Position daraus ab. */
/* --goal-depth = Tiefe der Tor-Zone HINTER der Auslinie (= Netzbreite). Auslinie
   und Strafraum verankern links/rechts daran, damit das Netz dahinter Platz hat. */
.stadium { --pen-w: clamp(78px, 13vw, 208px); --goal-depth: clamp(22px, 3.5vw, 54px); }

.penalty-area {
    position: absolute;
    top: 20%;
    bottom: 20%;
    width: var(--pen-w);
    border: 5px solid rgba(255,255,255,0.9);
    pointer-events: none;
    z-index: 1;
}
.penalty-left  { left: var(--goal-depth);  border-left: none;  }
.penalty-right { right: var(--goal-depth); border-right: none; }

/* Kleiner Torraum (5-Meter-Raum): näher am Tor, schmaler und flacher. */
.goal-area {
    position: absolute;
    top: 36%;
    bottom: 36%;
    width: clamp(34px, 5.5vw, 92px);
    border: 5px solid rgba(255,255,255,0.9);
    pointer-events: none;
    z-index: 1;
}
.goal-area-left  { left: var(--goal-depth);  border-left: none;  }
.goal-area-right { right: var(--goal-depth); border-right: none; }

/* Elfmeterpunkt: mittig, gut zwei Drittel in den Strafraum hinein. */
.penalty-spot {
    position: absolute;
    top: 50%;
    width: clamp(6px, 0.9vh, 11px);
    height: clamp(6px, 0.9vh, 11px);
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.penalty-spot-left  { left:  calc(var(--goal-depth) + var(--pen-w) * 0.62); transform: translate(-50%, -50%); }
.penalty-spot-right { right: calc(var(--goal-depth) + var(--pen-w) * 0.62); transform: translate( 50%, -50%); }

/* Strafraumbogen („D"): sitzt auf der Aussenkante des Strafraums und wölbt sich
   ins Feld hinaus. Halb-Ellipse (breit + flach) → nur der Bogen, Sehne offen. */
.penalty-arc {
    position: absolute;
    top: 50%;
    height: 24%;
    width: clamp(16px, 2.6vw, 42px);
    border: 5px solid rgba(255,255,255,0.9);
    pointer-events: none;
    z-index: 1;
}
.penalty-arc-left {
    left: calc(var(--goal-depth) + var(--pen-w));
    transform: translateY(-50%);
    border-left: none;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}
.penalty-arc-right {
    right: calc(var(--goal-depth) + var(--pen-w));
    transform: translateY(-50%);
    border-right: none;
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
}

/* --- TORE MIT NETZ (Fußball) --- */
.pitch-goal {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--goal-depth);          /* Netz füllt die Tor-Zone hinter der Auslinie */
    height: clamp(120px, 34vh, 360px);
    z-index: 7; /* über der Ball-Ebene (6) → das Netz liegt VOR dem Ball */
    display: block;
}
/* Tor bündig an den Stadionrand → das Netz steht hinter der Auslinie, der Ball
   fliegt (ballPoint) in die Netzmitte und liegt damit hinter dem Netz. */
.goal-left  { left: 0; }
.goal-right { right: 0; }
.goal-net {
    width: 100%;
    height: 100%;
    border: 5px solid #fff;
    border-radius: 6px;
    background:
        repeating-linear-gradient(0deg,  rgba(255,255,255,0.55) 0 2px, transparent 2px 11px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 2px, transparent 2px 11px),
        rgba(255,255,255,0.06);
}
.goal-left  .goal-net { border-color: #ff5b5b; transform-origin: left center; }
.goal-right .goal-net { border-color: #6bb8ff; transform-origin: right center; }
.pitch-goal.bulge .goal-net { animation: netBulge 0.6s ease-out; }
@keyframes netBulge {
    0%, 100% { transform: scaleX(1); }
    40%      { transform: scaleX(1.55); }
}

/* --- SCHRITT-FELD (Fußball, linear) --- */
/* Das Grid liefert die gleichmäßig verteilten Schritt-Positionen; JS liest die
   Zellen-Mitten aus und bewegt den Ball dazwischen. Symmetrisch um die Mittel-
   linie → beide Teams brauchen gleich viele Schritte bis zum Tor. */
.field {
    display: grid;
    height: 100%;
    grid-auto-rows: 1fr;
}
.field.inactive { display: none !important; }

.cell {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    min-height: 0;
    border: none;
}
.step-dot {
    width: clamp(8px, 1.5vh, 18px);
    height: clamp(8px, 1.5vh, 18px);
    border-radius: 50%;
    background: rgba(255,255,255,0.28);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.10);
}
.cell-mid .step-dot { background: rgba(255,255,255,0.55); }

/* --- BALL + BODENSCHATTEN (eigene Ebene über dem Feld) --- */
.ball-layer {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}
.soccer-ball {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(38px, 7vh, 96px);
    height: clamp(38px, 7vh, 96px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(34px, 6.4vh, 90px);
    line-height: 1;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.45));
    will-change: transform;
    z-index: 2;
    pointer-events: auto; /* Ball per Ziehen verschiebbar (Autoren-Modus) */
    cursor: grab;
    touch-action: none;
}
.soccer-ball.ball-dragging { cursor: grabbing; }
.ball-shadow {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(32px, 6vh, 82px);
    height: clamp(12px, 2.2vh, 28px);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.45), rgba(0,0,0,0) 70%);
    border-radius: 50%;
    will-change: transform, opacity;
    z-index: 1;
}

/* --- EFFEKT-EBENE (Konfetti beim Tor) --- */
.fx-layer {
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    overflow: hidden;
}
.confetti {
    position: absolute;
    width: clamp(8px, 1.4vh, 14px);
    height: clamp(12px, 2vh, 20px);
    border-radius: 2px;
    opacity: 0;
    animation: confettiFly 1.4s ease-out forwards;
}
@keyframes confettiFly {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--dx), calc(var(--dy) + 260px)) rotate(var(--rot)); opacity: 0; }
}

/* --- SPIELER-KROKODILE (reine Deko, nur Fußball) --- */
/* Zwei Mannschaften à 5 Krokodile stehen auf ihrer Feldhälfte und „passen" sich
   optisch den Ball zu; im Tor je ein schwarzes Torwart-Krokodil (wird nicht
   angespielt, nur Deko). Positionen als Prozent → skalieren mit dem Feld. Die
   Basis-Grafik schaut nach rechts: Rot (greift nach rechts) bleibt so, Blau und
   der rechte Torwart werden gespiegelt (.croc-flip). Ebene liegt zwischen Feld
   und Ball (z-index 4 < Ball 6), damit der Ball vor den Krokodilen fliegt. */
.players-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}
.croc {
    position: absolute;
    width: clamp(54px, 10vh, 138px);
    aspect-ratio: 508 / 672;
    transform: translate(-50%, -50%);
    pointer-events: none; /* reine Deko — nicht anfassbar */
}
.croc.croc-flip { transform: translate(-50%, -50%) scaleX(-1); }
/* Das Gleiten zur neuen Aufstellung läuft NICHT mehr über eine left/top-
   Transition (die löst pro Frame Layout aus → ruckelte), sondern über eine
   GPU-Transform-Animation per FLIP in layoutCrocs(). Die Klasse .crocs-live
   (via JS erst nach der ersten Aufstellung gesetzt) schaltet das Gleiten frei;
   ohne sie springen die Krokodile ohne Animation an ihre Position. */
/* TEMPORÄRE Nummer 1–5 auf jedem Feld-Krokodil (Referenz, später entfernen).
   Liegt im .croc-img → bewegt/wippt exakt mit. Bei gespiegelten (blauen)
   Krokodilen die Schrift zurückdrehen, damit die Ziffer lesbar bleibt. */
.croc-num {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    font-size: clamp(14px, 2.8vh, 32px);
    font-weight: 900;
    color: #fff;
    -webkit-text-stroke: 1.2px rgba(0,0,0,0.85);
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
    z-index: 2;
}
.croc-flip .croc-num { transform: translate(-50%, -50%) scaleX(-1); }

/* Innen sitzt das Bild + die leichte Wipp-Animation (translateY) — getrennt vom
   Spiegeln außen, damit sich scaleX und Animation nicht in die Quere kommen. */
.croc-img {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    filter: drop-shadow(0 6px 6px rgba(0,0,0,0.4));
    animation: crocBob 3.2s ease-in-out infinite;
}
@keyframes crocBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.croc-red    .croc-img { background-image: url("../../../../pictures/crocodiles/crocodileredjersey.png"); }
.croc-blue   .croc-img { background-image: url("../../../../pictures/crocodiles/crocodilebluejersey.png"); }
.croc-keeper .croc-img { background-image: url("../../../../pictures/crocodiles/crocodileblackjersey.png"); }

/* Fussball-only-Ebenen im Pferdemodus komplett ausblenden (Horse unverändert). */
.pitch-goal, .ball-layer, .fx-layer, .players-layer,
.penalty-area, .goal-area, .penalty-spot, .penalty-arc { display: none; }
.stadium.football-bg .pitch-goal,
.stadium.football-bg .ball-layer,
.stadium.football-bg .fx-layer,
.stadium.football-bg .players-layer,
.stadium.football-bg .penalty-area,
.stadium.football-bg .goal-area,
.stadium.football-bg .penalty-spot,
.stadium.football-bg .penalty-arc { display: block; }

/* --- PFERDERENNBAHN (Oval) — UNVERÄNDERT --- */
/* height:100% → füllt das Stadion; Zellgröße/Positionen rechnet JS aus dem Container. */
.race-track {
    display: grid;
    position: relative;
    margin: 0 auto;
    gap: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Keine Sandfläche unter der Bahn — sonst verschwindet die (ebenfalls
       sandfarbene) Ellipse darin. Sichtbar ist allein der breite Bahn-Strich. */
    background: none;
    border: none;
    border-radius: 12px;
}
.race-track.inactive {
    display: none !important;
}
/* Die Bahn-Ellipse läuft durch die Mittelpunkte aller Positionen (JS setzt
   cx/cy/rx/ry passend zur Positions-Rechnung). */
/* 🔴 Eigene Compositing-Ebene (translateZ): die Bahn besteht aus SEHR breiten,
   halbtransparenten Strichen (weiße Ellipse bis 280px, Laufbahn ~200px). Ohne
   eigene Ebene müsste der Browser diese Fläche neu rastern, sobald ein Pferd
   darüber gleitet — pro Frame, das kostet auf Tablets sichtbar FPS. So wird sie
   EINMAL gerastert und danach nur noch zusammengesetzt. */
.race-oval {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    transform: translateZ(0);
}
/* Die Bahn selbst ist der breite Strich — jetzt in Sandfarbe statt weiß
   (die frühere Sandfläche unter der Bahn ist weg). */
.race-oval ellipse {
    fill: none;
    stroke: #e0c097;
    stroke-width: clamp(120px, 24vh, 280px); /* 20× der ursprünglichen Strichstärke */
}
/* Hilfs-Ellipsen: 10 px unter (Rot) bzw. über (Blau) der weißen Bahn.
   🔴 UNSICHTBAR: Sie sind reine Spur-Geometrie (Pferde/Haltepunkte rechnen mit
   ihnen weiter) — gezeichnet werden sie nicht mehr. */
/* Die zwei Hilfs-Ellipsen (Rot außen / Blau innen) sind die SPUREN, auf denen die
   Pferde laufen — im Spiel unsichtbar, im DEBUG-Modus (Strg/Cmd+D, globale Klasse
   `debug-mode` am <html>, s. `window.DebugMode` in ui.js) sichtbar, zusammen mit
   den nummerierten Haltepunkten `.race-mark`. So lässt sich prüfen, ob Punkte und
   Pferde wirklich auf ihrer Linie sitzen. */
.race-oval .race-guide { stroke-width: 4px; display: none; }
html.debug-mode .race-oval .race-guide { display: inline; }
.race-oval .race-guide-red { stroke: #e53935; }
.race-oval .race-guide-blue { stroke: #1e88e5; }

/* Positionen sind nur noch unsichtbare Marker der Spiel-Logik — keine Punkte
   mehr; sichtbar ist allein Start/Ziel. */
.race-cell {
    position: absolute;
    /* Größe wird in JS gesetzt (aus Container abgeleitet); Fallback hier. */
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 4vh, 40px);
    z-index: 2;
    pointer-events: none;
}
.race-cell.race-start {
    font-size: clamp(22px, 4vh, 44px);
    line-height: 1;
}

/* Haltepunkte je Spur (außen Rot, innen Blau), in Laufrichtung nummeriert.
   🔴 IM SPIEL UNSICHTBAR (die Bahn wirkt dadurch aufgeräumt), im DEBUG-Modus
   sichtbar (Strg/Cmd+D → `html.debug-mode`, s. `window.DebugMode` in ui.js):
   dann zeigen sie zusammen mit den Hilfs-Ellipsen, wohin die Pferde laufen. */
.race-mark {
    display: none !important;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    width: clamp(20px, 3.4vh, 34px);
    height: clamp(20px, 3.4vh, 34px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(11px, 1.8vh, 17px);
    font-weight: bold;
    background: rgba(255,255,255,0.85);
    z-index: 2;
    pointer-events: none;
}
html.debug-mode .race-mark { display: flex !important; }
.race-mark-red { color: #b71c1c; border: 2px solid #e53935; }
.race-mark-blue { color: #0d47a1; border: 2px solid #1e88e5; }

/* Pferd = eigenes Element auf der Ellipse; JS setzt nur transform (GPU). */
.horse-piece {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1;
    /* Größe kommt aus JS (--horse-size = Zellgröße der Bahn), damit der
       Bahn-Randabstand sie einrechnen kann. */
    font-size: var(--horse-size, clamp(48px, 10vh, 112px));
    pointer-events: none;
    will-change: transform;
}
.horse-piece .horse-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.3em;
}

.horse-red { color: #e53935; z-index: 4; }
.horse-blue { color: #1e88e5; z-index: 3; }

/* --- LINIEN --- */
.middle-line {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: clamp(4px, 0.8vw, 8px);
    background: rgba(255,255,255,0.92);
    transform: translateX(-50%);
    z-index: 1;
}
.center-circle {
    position: absolute;
    width: clamp(120px, 26vh, 320px);
    height: clamp(120px, 26vh, 320px);
    border: clamp(4px, 0.8vh, 8px) solid rgba(255,255,255,0.92);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.center-circle::after {
    content: "";
    position: absolute;
    width: clamp(8px, 1.4vh, 14px);
    height: clamp(8px, 1.4vh, 14px);
    background: rgba(255,255,255,0.92);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --- TRIKOT-GENERATOR (fix oben LINKS, direkt neben den Seiten-Knöpfen) --- */
/* Steht in BEIDEN Modi (Fußball wie Pferderennen) rechts neben der Knopf-Spalte
   🔄/↩️ (globale `.side-btn`, linker Rand 12px + Knopfbreite `--side-btn-size`).
   Aus der Feldmitte weggeholt, damit er das Spielfeld nicht verdeckt. */
.controls {
    position: fixed;
    /* SICHTBARES Trikot auf Höhe der Seiten-Knöpfe: Startpunkt ist deren Abstand
       unter der Kopfzeile (12px, wie `--side-btn-offset` in ui.css — die Variable
       lebt AUF `.side-btn` und ist hier nicht erbbar, darum nachgerechnet; bei
       eingeklappter Leiste gilt dieselbe Ausnahme wie dort, s. unten). Davon geht der leere
       Streifen ab, den `background-size: contain` über dem Trikot lässt — das
       Bild ist quer (1070×872), die Box hochkant, also bleibt oben/unten je
       (BoxHöhe − BoxBreite/1.227)/2 frei. Ohne diesen Abzug säße die Box zwar
       richtig, das Trikot aber sichtbar zu tief. */
    top: calc(var(--header-height, 56px) + 12px - clamp(24px, 3.8vh, 51px));
    /* 12px = linker Rand der Seiten-Knöpfe (`.side-btn` in ui.css) */
    left: calc(12px + var(--side-btn-size, 44px) + clamp(8px, 1.4vw, 18px));
    right: auto;
    bottom: auto;
    transform: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(20px, 5vw, 50px);
    margin: 0;
    z-index: 15;
    pointer-events: none; /* Feld dahinter bleibt frei; nur das Trikot fängt Klicks */
}
/* Eingeklappte Kopfzeile (Vollbild/Pfeil): die Seiten-Knöpfe rücken global an
   den Bildschirmrand (`--side-btn-offset: 12px`) — das Trikot geht mit. */
html.header-collapsed .controls {
    top: calc(12px - clamp(24px, 3.8vh, 51px));
}
.control, #middleJersey { pointer-events: auto; }
.control { text-align: center; }

/* Generator-Trikot */
#middleJersey {
    width: clamp(84px, 14vh, 180px);
    height: clamp(116px, 19vh, 248px);
    background-image: url("../../../../pictures/jerseys/jerseywhite.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: clamp(42px, 7.5vh, 108px);
    font-weight: bold;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,0.4));
    transition: transform 0.12s ease;
    animation: jerseyIdle 3.4s ease-in-out infinite;
    /* Das Trikot wackelt DAUERHAFT (auch im Pferdemodus) und trägt einen
       Schlagschatten — ohne eigene Ebene würde der Filter in jedem Frame neu
       gerechnet. */
    will-change: transform;
}
/* Unsichtbarer Rahmen um das SICHTBARE Trikot: das Bild ist quer (1070×872), die
   Box hochkant → `background-size: contain` lässt oben/unten je ~20 % frei. Das
   Tutorial-Highlight zielt auf dieses Element statt auf die Box, sonst umschließt
   der Ring auch den leeren Streifen und wirkt viel zu groß. */
.jersey-frame {
    position: absolute;
    top: 20%; bottom: 20%; left: 3%; right: 3%;
    pointer-events: none;
}
#middleJersey:active { transform: scale(0.96); }
#middleJersey.rolling { animation: jerseyRoll 0.45s ease-in-out; }
@keyframes jerseyIdle {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate(1.5deg); }
}
@keyframes jerseyRoll {
    0%, 100% { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(-6deg) scale(1.04); }
    50% { transform: rotate(6deg) scale(1.06); }
    80% { transform: rotate(-4deg) scale(1.04); }
}
/* Kein weißer Kasten hinter der Zahl mehr — das Trikot ist selbst weiß, der
   Kasten ragte über den Trikot-Rand hinaus. */
#middleJersey span {
    position: relative;
    z-index: 1;
}
/* Zahlen in der globalen Zahlenschrift (Buchstaben bleiben UI-Schrift) */
#middleJersey span.jersey-num,
.jersey-big span.jersey-num,
#joNumber { font-family: var(--math-font); }

/* --- TRIKOT GROSS (Overlay über der ganzen Seite) --- */
/* Klick aufs kleine Trikot → alles dunkelt ab, das Trikot steht groß in der
   Mitte, links die zwei Generator-Knöpfe. Liegt über der Kopfzeile (z-index
   1000), damit wirklich der GANZE Rest abgedunkelt ist. */
.jersey-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.68);
}
.jersey-overlay.open { display: flex; }
/* Die Bühne ist so breit wie das Trikot → das Trikot steht exakt in der
   Bildschirmmitte; die Knöpfe hängen absolut LINKS daneben und verschieben es
   deshalb nicht. */
.jo-stage {
    position: relative;
    display: flex;
    align-items: center;
}
.jo-picks {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: clamp(16px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vh, 22px);
}
/* Knöpfe im Stil des Rückgängig-Knopfes (weißer Rahmen auf dunklem Grund) */
.jo-pick {
    font-size: clamp(16px, 2.6vh, 26px);
    font-weight: bold;
    color: white;
    background: rgba(0,0,0,0.45);
    border: 3px solid white;
    border-radius: 14px;
    padding: clamp(10px, 1.8vh, 18px) clamp(14px, 2.2vw, 26px);
    cursor: pointer;
    white-space: nowrap;
}
.jo-pick:active { transform: translateY(3px); }
/* gerade gewählter Generator */
.jo-pick.active { background: #1b5e20; border-color: #a5d6a7; }

/* Das große Trikot: Box im Seitenverhältnis des Bildes (1070×872) — dadurch
   kein leerer Rand wie beim kleinen, hochkant gerechneten Trikot. */
.jersey-big {
    width: min(52vh, 58vw);
    aspect-ratio: 1070 / 872;
    background-image: url("../../../../pictures/jerseys/jerseywhite.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: min(26vh, 29vw);
    font-weight: bold;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    filter: drop-shadow(0 14px 20px rgba(0,0,0,0.5));
    animation: jerseyIdle 3.4s ease-in-out infinite;
}
.jersey-big.rolling { animation: jerseyRoll 0.45s ease-in-out; }
.jersey-big span { position: relative; z-index: 1; }

/* Hochkant/schmal: Knöpfe unter das Trikot statt daneben (dann wieder im Fluss,
   das Trikot rutscht dabei bewusst etwas nach oben). */
@media (max-aspect-ratio: 3/4) {
    .jo-stage { flex-direction: column; }
    .jo-picks {
        position: static;
        transform: none;
        margin: clamp(16px, 3vh, 32px) 0 0 0;
        flex-direction: row;
    }
}

/* --- ANIMATIONEN (Tor-Jubel + Schuss) --- */
.goal-animation {
    position: fixed;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(64px, 14vh, 150px);
    font-weight: 900;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 6px 0 rgba(0,0,0,0.35), 0 0 30px rgba(255,213,79,0.9);
    opacity: 0;
    pointer-events: none;
    animation: goalPop 1.8s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
    z-index: 9999;
}
@keyframes goalPop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-8deg); }
    18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(4deg); }
    30%  { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
    80%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%, -58%) scale(1.1) rotate(0deg); }
}

/* Fliegendes Team-Emoji — nur noch im Pferdemodus genutzt (shoot()). */
.shot {
    position: fixed;
    font-size: clamp(100px, 20vh, 240px);
    animation: shotAnim 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 9998;
}
@keyframes shotAnim {
    0% { transform: translate(0,0) scale(1) rotate(0deg); opacity: 1; }
    25% { transform: translate(200px, -100px) scale(1.2) rotate(15deg); opacity: 1; }
    50% { transform: translate(400px, -200px) scale(1) rotate(-10deg); opacity: 1; }
    75% { transform: translate(500px, -250px) scale(0.8) rotate(5deg); opacity: 1; }
    100% { transform: translate(600px, -300px) scale(0.6) rotate(0deg); opacity: 0; }
}

/* --- SIEGER-ANIMATION PFERDERENNEN (Zieleinlauf) -------------------------
   Kommt ein Pferd im Ziel an, legt sich für HORSE_WIN_MS ein Overlay über die
   Seite: eine große schwenkende Zielflagge, davor das Pferd auf einer Scheibe
   in der Farbe des punktenden Teams. Reine Deko (`pointer-events:none`),
   z-index über der Trikot-Groß-Ansicht (1200), damit nichts davorliegt. */
.horse-win {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%,
        rgba(0,0,0,0.45), rgba(0,0,0,0.18) 60%, rgba(0,0,0,0) 82%);
    animation: hwFade 2s ease forwards;
}
@keyframes hwFade {
    0% { opacity: 0; }
    12% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* Die Flagge schwenkt um ihre Stange (links unten) — erst Aufploppen, danach
   dauerhaftes Wehen. */
.horse-win .hw-flag {
    font-size: clamp(160px, 40vh, 380px);
    line-height: 1;
    transform-origin: 12% 85%;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.45));
    animation: hwPop .5s cubic-bezier(.2,1.4,.4,1) both,
               hwWave 1.1s ease-in-out .5s infinite alternate;
}
@keyframes hwPop {
    from { transform: scale(.3) rotate(-25deg); opacity: 0; }
    to   { transform: scale(1) rotate(-6deg); opacity: 1; }
}
@keyframes hwWave {
    from { transform: rotate(-9deg) skewX(6deg) scale(1); }
    to   { transform: rotate(9deg) skewX(-6deg) scale(1.05); }
}

/* Das Pferd galoppiert von links herein und wippt dann auf der Stelle.
   Die Scheibe darunter trägt die Teamfarbe (das Emoji selbst lässt sich nicht
   einfärben). */
.horse-win .hw-horse {
    position: absolute;
    left: 50%;
    top: 62%;
    width: clamp(120px, 27vh, 280px);
    height: clamp(120px, 27vh, 280px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(70px, 17vh, 170px);
    line-height: 1;
    border-radius: 50%;
    border: clamp(4px, 0.8vh, 9px) solid #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    animation: hwGallop .7s cubic-bezier(.2,.9,.3,1) both,
               hwBob .5s ease-in-out .7s infinite alternate;
}
.horse-win-red  .hw-horse { background: #e53935; }
.horse-win-blue .hw-horse { background: #1e88e5; }
@keyframes hwGallop {
    from { transform: translate(-50%, -50%) translateX(-70vw) rotate(-8deg); opacity: 0; }
    60%  { opacity: 1; }
    to   { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
}
@keyframes hwBob {
    from { transform: translate(-50%, -50%) translateY(0) rotate(-3deg); }
    to   { transform: translate(-50%, -50%) translateY(-14px) rotate(3deg); }
}

/* ---------- HOCHKANT-SPERRE (nur Mobilgeräte) ----------
   Das Spielfeld (Fußball wie Pferdebahn) rechnet mit einem BREITEN Fenster —
   hochkant auf Handy/Tablet bleibt davon nichts Spielbares übrig. Statt zu
   raten, welches Gerät das ist, entscheidet allein die Media-Query:
   `hover: none` + `pointer: coarse` = Touch ohne Maus (Handy/Tablet), Laptops
   und PCs mit schmalem Fenster sind damit ausgenommen. `html.rotate-ok` setzt
   der Knopf „Trotzdem öffnen" (dismissRotateGate) für diesen Seitenaufruf. */
.rotate-gate { display: none; }
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
    html:not(.rotate-ok) .rotate-gate {
        display: flex;
        position: fixed;
        inset: 0;
        /* über Kopfzeile (1000) und Trikot-Groß-Ansicht (1200) */
        z-index: 3000;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 28px;
        padding: 32px 28px 84px;
        box-sizing: border-box;
        background: #f7f7f7;
        color: #3a3a3a;
        text-align: center;
    }
    /* Der Rest der Seite darf nicht durchscheinen/mitscrollen */
    html:not(.rotate-ok) body { overflow: hidden; }
}
.rotate-gate-icon {
    width: min(46vw, 220px);
    height: auto;
    color: #1b5e20;
}
.rotate-gate-text {
    margin: 0;
    max-width: 22em;
    font-size: clamp(17px, 4.6vw, 24px);
    line-height: 1.35;
}
/* Klein und unten links — bewusst unauffällig: der Weg ist das Drehen. */
.rotate-gate-skip {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 14px;
    color: #666;
    background: #fff;
    border: 2px solid #d5d5d5;
    border-radius: 10px;
    cursor: pointer;
}