/* ============================================================
   Weltraumrennen (Quiz) — zwei Teams rechnen gleichzeitig,
   links Rot, rechts Blau, in der Mitte fliegen die Raketen.

   Skalierung: die Bühne nimmt genau `--stage-height` (globale Quelle),
   alle Maße sind fluide über `min(vw, vh)` — keine festen px-Schriften,
   damit es auch auf kleinen Fenstern/Smartphones passt.
   ============================================================ */

:root {
    /* EINE Maßeinheit für das ganze Modul: die kleinere Fensterkante.
       Alles Weitere leitet sich daraus ab. */
    --wr-u: min(1vw, 1.6vh);
    --wr-red: var(--red-main, #e74c3c);
    --wr-blue: var(--blue-main, #3498db);
    --wr-green: var(--green-main, #27ae60);
    /* Die Kopfzeile hat global keine Fläche (s. ui.css) — der Sternenhimmel
       scheint durch, deshalb Titel + Ein-/Ausklapp-Pfeil hell. */
    --header-title-color: #fff;
}

body {
    background: #070b1c;
    overflow: hidden;
}

/* ---------- Bühne: drei Bereiche ----------
   🔴 BEWUSSTE ÖRTLICHE AUSNAHME von der globalen Regel „beim Einklappen der
   Kopfzeile bleibt der Inhalt stehen": hier soll das Spielfeld den frei
   werdenden Platz mitnehmen und bis ganz nach oben wachsen. Der Selektor ist
   deshalb über `:has(.wr-stage)` fest auf DIESE Seite begrenzt — für alle
   anderen Module gilt die globale Regel unverändert weiter. */
body:has(.wr-stage) {
    transition: padding-top 0.25s ease; /* gleiche Frist wie die Leiste selbst */
}

html.header-collapsed body:has(.wr-stage) {
    padding-top: 0;
}

html.header-collapsed .wr-stage {
    height: 100dvh;
}


.wr-stage {
    height: var(--stage-height);
    transition: height 0.25s ease;
    display: flex;
    align-items: stretch;
    gap: calc(var(--wr-u) * 0.8);
    padding: calc(var(--wr-u) * 0.8);
    box-sizing: border-box;
    overflow: hidden;
}

.wr-side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--wr-u) * 0.8);
    border-radius: calc(var(--wr-u) * 1.6);
    padding: calc(var(--wr-u) * 0.9);
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
}

.wr-side-red {
    border-color: color-mix(in srgb, var(--wr-red) 55%, transparent);
    background: radial-gradient(circle at 50% 0%, rgba(231, 76, 60, 0.18), rgba(255, 255, 255, 0.04));
}

.wr-side-blue {
    border-color: color-mix(in srgb, var(--wr-blue) 55%, transparent);
    background: radial-gradient(circle at 50% 0%, rgba(52, 152, 219, 0.18), rgba(255, 255, 255, 0.04));
}

/* ---------- Aufgabe oben ---------- */
.wr-task {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    border-radius: calc(var(--wr-u) * 1.2);
    background: rgba(8, 12, 32, 0.55);
}

.wr-task-text {
    font-family: var(--math-font);
    font-size: calc(var(--wr-u) * 7);
    line-height: 1;
    color: #fff;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Beim Aufgabenwechsel kurz einfliegen lassen */
.wr-task.wr-task-in .wr-task-text {
    animation: wr-task-in 0.35s ease-out;
}

@keyframes wr-task-in {
    from {
        opacity: 0;
        transform: translateY(calc(var(--wr-u) * -2));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Antworten unten ---------- */
.wr-answers {
    flex: 0 0 auto;
    display: flex;
    gap: calc(var(--wr-u) * 0.8);
}

.wr-answer {
    flex: 1 1 0;
    min-width: 0;
    padding: calc(var(--wr-u) * 1.4) calc(var(--wr-u) * 0.4);
    border: none;
    border-radius: calc(var(--wr-u) * 1.2);
    /* Farbe kommt von der Seite (rot links, blau rechts — s. unten). */
    color: #fff;
    font-family: var(--math-font);
    font-size: calc(var(--wr-u) * 4.2);
    line-height: 1;
    cursor: pointer;
    /* Multitouch: keine Doppeltipp-Zoom-Verzögerung, kein Halte-Menü, kein
       grauer Tipp-Schleier — beide Teams tippen gleichzeitig. */
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 calc(var(--wr-u) * 0.5) 0 rgba(0, 0, 0, 0.35);
    transition:
        transform 0.12s ease,
        background 0.15s ease,
        box-shadow 0.12s ease;
}

/* `wr-press` = der Druck-Effekt per Finger (das JS setzt ihn, weil
   `pointerdown` mit `preventDefault` kein `:active` auslöst). */
.wr-answer:active,
.wr-answer.wr-press {
    transform: translateY(calc(var(--wr-u) * 0.4));
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.35);
}

/* Die Antwortkarten tragen die Farbe IHRER Mannschaft — so ist auf einen Blick
   klar, welche drei Karten zu welcher Aufgabe gehören. */
.wr-side-red .wr-answer {
    background: var(--wr-red);
}

.wr-side-blue .wr-answer {
    background: var(--wr-blue);
}

/* Richtig: kurz grün. Falsch: rot und dreimal aufblinken (danach erst wieder
   klickbar — die Sperre setzt das JS über .wr-answers.wr-locked). */
/* 🔴 Mit `.wr-side-*` davor, weil die Team-Farbe oben dieselbe Spezifität
   hätte und später im Stylesheet stünde — die Rückmeldung muss gewinnen.
   Falsch ist im roten Team dunkelrot, damit es sich von der Grundfarbe abhebt. */
.wr-side-red .wr-answer.wr-right,
.wr-side-blue .wr-answer.wr-right {
    background: var(--wr-green);
}

.wr-side-red .wr-answer.wr-wrong,
.wr-side-blue .wr-answer.wr-wrong {
    background: #8e1c12;
    animation: wr-blink 0.3s steps(1, end) 3;
}

@keyframes wr-blink {
    0%,
    49% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0.25;
    }
}

.wr-answers.wr-locked .wr-answer {
    pointer-events: none;
}

/* ---------- Mitte: Weltall ----------
   Die Mitte bekommt bewusst den größten Anteil: dort passiert das Rennen,
   die beiden Team-Spalten teilen sich den Rest. */
.wr-field {
    flex: 0 1 auto;
    width: clamp(160px, 44%, 820px);
    position: relative;
    border-radius: calc(var(--wr-u) * 1.6);
    overflow: hidden;
    background: linear-gradient(180deg, #05081a 0%, #0d1740 55%, #1a1150 100%);
}

.wr-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.wr-lanes {
    position: absolute;
    inset: 0;
    display: flex;
}

.wr-lane {
    position: relative;
    flex: 1 1 0;
}

/* ---------- „Weltall überall" (Schalter im ⚙️-Menü) ----------
   🔴 Der Sternenhimmel liegt dann als FESTE Vollbild-Ebene hinter der ganzen
   Seite (das JS hängt `#wr-sky` dafür an den `<body>` um — ein `position:fixed`
   innerhalb von `.wr-field` wäre von dessen `overflow:hidden` abhängig und
   damit zerbrechlich), und die farbigen Team-Flächen werden durchsichtig, damit
   Sterne und Planeten am ganzen Fenster vorbeiziehen. */
.wr-sky-full {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.wr-stage {
    position: relative;
    z-index: 1;
}

html.wr-space-full .wr-side {
    background: none;
    border-color: transparent;
}

html.wr-space-full .wr-field {
    background: none;
    overflow: visible;
}

/* Auch die Aufgabenfläche verschwindet komplett — die Zahlen stehen direkt im
   All (sie sind weiß auf dunklem Himmel und bleiben dadurch gut lesbar). */
html.wr-space-full .wr-task {
    background: none;
}

/* ---------- Rakete ---------- */
.wr-rocket {
    position: absolute;
    left: 50%;
    bottom: 16%;
    width: 46%;
    max-width: calc(var(--wr-u) * 9);
    /* Der Schub kommt per JS als --wr-lift (px, negativ = nach oben).
       Die Mitte über translateX, nicht über margin-left: der Prozentwert
       bezöge sich auf die Bahn, nicht auf die (per max-width gedeckelte)
       Raketenbreite — die Rakete stünde dann bei kleinen Bahnen versetzt. */
    transform: translateX(-50%) translateY(var(--wr-lift, 0px));
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wr-rocket svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 calc(var(--wr-u) * 1.2) rgba(255, 255, 255, 0.25));
}

/* Das Wackeln erzeugt den Eindruck, dass die Rakete dauerhaft fliegt. */
.wr-rocket-body {
    position: relative;
    transform-origin: 50% 85%;
}

.wr-running .wr-rocket-body {
    animation: wr-wobble 1.6s ease-in-out infinite;
}

.wr-lane-blue .wr-rocket-body {
    animation-delay: -0.7s;
}

@keyframes wr-wobble {
    0% {
        transform: translateX(-4%) rotate(-2.6deg);
    }
    50% {
        transform: translateX(4%) rotate(2.6deg);
    }
    100% {
        transform: translateX(-4%) rotate(-2.6deg);
    }
}

.wr-hull {
    fill: #e8eef7;
}

.wr-foot {
    fill: #b9c6d8;
}

.wr-window {
    fill: #7fd7ff;
    stroke: #b9c6d8;
    stroke-width: 3;
}

.wr-lane-red .wr-nose,
.wr-lane-red .wr-fin {
    fill: var(--wr-red);
}

.wr-lane-blue .wr-nose,
.wr-lane-blue .wr-fin {
    fill: var(--wr-blue);
}

/* Flamme: sitzt unter dem Rumpf und flackert */
.wr-flame {
    position: absolute;
    left: 50%;
    top: 78%;
    width: 34%;
    height: 42%;
    margin-left: -17%;
    border-radius: 50% 50% 45% 45%;
    background: radial-gradient(circle at 50% 20%, #fff6c9 0%, #ffcc33 35%, #ff7a18 70%, rgba(255, 60, 0, 0) 100%);
    transform-origin: 50% 0%;
    opacity: 0;
}

.wr-running .wr-flame {
    opacity: 1;
    animation: wr-flame 0.18s ease-in-out infinite alternate;
}

@keyframes wr-flame {
    from {
        transform: scaleY(0.8) scaleX(0.9);
    }
    to {
        transform: scaleY(1.25) scaleX(1.05);
    }
}

/* Schub-Zustände: das JS setzt --wr-lift und wechselt nur die Zeitkurve —
   ein Schub nach oben, danach fällt die Rakete langsam auf ihre Position
   zurück, weil der Schub zu Ende ist. */
.wr-rocket.wr-boost {
    transition: transform 1.45s cubic-bezier(0.05, 0.75, 0.3, 1);
}

.wr-rocket.wr-fallback {
    transition: transform 2.2s cubic-bezier(0.35, 0, 0.3, 1);
}

/* Sieg: beschleunigt oben aus dem Bild heraus */
.wr-rocket.wr-exit {
    transition: transform 1.2s cubic-bezier(0.45, 0, 0.9, 0.4);
}

.wr-rocket.wr-exit .wr-flame {
    animation-duration: 0.06s;
    transform: scaleY(2.4);
}

.wr-rocket.wr-dip {
    transition: transform 0.35s ease-in;
}

.wr-rocket.wr-boost .wr-flame {
    animation-duration: 0.08s;
    transform: scaleY(1.8);
}

/* ---------- Trefferzähler je Bahn ---------- */
.wr-count {
    position: absolute;
    left: 50%;
    bottom: calc(var(--wr-u) * 0.6);
    transform: translateX(-50%);
    font-family: var(--math-font);
    font-size: calc(var(--wr-u) * 2.4);
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border-radius: calc(var(--wr-u) * 1.2);
    padding: 0 calc(var(--wr-u) * 1.2);
}

.wr-lane-red .wr-count {
    box-shadow: inset 0 0 0 2px var(--wr-red);
}

.wr-lane-blue .wr-count {
    box-shadow: inset 0 0 0 2px var(--wr-blue);
}

/* Punktverlust bei falscher Antwort: der Zähler blitzt rot auf, darüber
   steigt eine „−1“ hoch. Beides kurz — es darf das Spiel nicht aufhalten. */
.wr-count-loss {
    animation: wrCountLoss 0.6s ease;
}

@keyframes wrCountLoss {
    0%,
    100% {
        transform: translateX(-50%) scale(1);
        background: rgba(0, 0, 0, 0.45);
    }
    30% {
        transform: translateX(-50%) scale(1.3);
        background: var(--wr-red);
    }
}

.wr-loss {
    position: absolute;
    left: 50%;
    bottom: calc(var(--wr-u) * 3.2);
    font-family: var(--math-font);
    font-size: calc(var(--wr-u) * 3);
    font-weight: 800;
    color: #ff6b6b;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    animation: wrLoss 0.9s ease-out forwards;
}

@keyframes wrLoss {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.6);
    }
    25% {
        opacity: 1;
        transform: translate(-50%, -25%) scale(1.15);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -170%) scale(1);
    }
}

/* ---------- Start-/Siegerfenster ---------- */
.wr-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 7, 20, 0.78);
}

.wr-overlay.wr-hidden {
    display: none;
}

/* Feuerwerk-Ebene: volle Fläche, liegt hinter der Karte und ist nur beim
   Sieg da. Nimmt keine Klicks an, damit „Noch einmal" bedienbar bleibt. */
.wr-fw {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
}

.wr-overlay.wr-won .wr-fw {
    display: block;
}

/* 🔴 Die Karte ist NUR noch das Siegerfenster (Titel + „Noch einmal") — ein
   Start-Fenster gibt es nicht mehr, dort steht allein der Play-Knopf. */
.wr-card {
    display: none;
}

.wr-overlay.wr-won .wr-card {
    display: block;
    background: rgba(16, 26, 60, 0.82);
}

/* ---------- Play-Knopf: groß in der Bildmitte ---------- */
.wr-play {
    position: relative;
    width: calc(var(--wr-u) * 22);
    height: calc(var(--wr-u) * 22);
    border: none;
    border-radius: 50%;
    background: var(--wr-green);
    color: #fff;
    font-size: calc(var(--wr-u) * 9);
    line-height: 1;
    padding: 0 0 0 calc(var(--wr-u) * 1); /* das ▶ wirkt sonst links lastig */
    cursor: pointer;
    box-shadow:
        0 calc(var(--wr-u) * 0.9) 0 rgba(0, 0, 0, 0.4),
        0 0 calc(var(--wr-u) * 6) rgba(39, 174, 96, 0.55);
    animation: wr-play-pulse 1.8s ease-in-out infinite;
}

.wr-play:active {
    transform: translateY(calc(var(--wr-u) * 0.6));
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
}

@keyframes wr-play-pulse {
    0%,
    100% {
        box-shadow:
            0 calc(var(--wr-u) * 0.9) 0 rgba(0, 0, 0, 0.4),
            0 0 calc(var(--wr-u) * 4) rgba(39, 174, 96, 0.45);
    }
    50% {
        box-shadow:
            0 calc(var(--wr-u) * 0.9) 0 rgba(0, 0, 0, 0.4),
            0 0 calc(var(--wr-u) * 10) rgba(39, 174, 96, 0.75);
    }
}

/* Während Countdown und Sieg ist der Play-Knopf weg. */
.wr-overlay.wr-counting .wr-play,
.wr-overlay.wr-won .wr-play {
    display: none;
}

/* ---------- Countdown 3 · 2 · 1 ---------- */
.wr-cd {
    display: none;
    font-family: var(--math-font);
    font-size: calc(var(--wr-u) * 26);
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 calc(var(--wr-u) * 4) rgba(126, 215, 255, 0.8);
}

.wr-overlay.wr-counting .wr-cd {
    display: block;
    /* Je Zahl neu gestartet (das JS entfernt/setzt die Klasse) */
    animation: wr-cd-pop 0.85s ease-out;
}

@keyframes wr-cd-pop {
    0% {
        opacity: 0;
        transform: scale(2.2);
    }
    22% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0.25;
        transform: scale(0.75);
    }
}

.wr-card {
    position: relative;
    max-width: min(86vw, 620px);
    text-align: center;
    padding: calc(var(--wr-u) * 3);
    border-radius: calc(var(--wr-u) * 2);
    background: #101a3c;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    color: #fff;
}

/* Siegerrakete groß in der Bildmitte — erst nachdem sie oben aus dem
   Spielfeld geflogen ist (JS setzt .wr-won auf dem Overlay). */
.wr-card-rocket {
    position: relative;
    width: calc(var(--wr-u) * 14);
    margin: 0 auto calc(var(--wr-u) * 1.6);
    display: none;
}

.wr-overlay.wr-won .wr-card-rocket {
    display: block;
    animation: wr-arrive 0.7s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.wr-card-rocket svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 calc(var(--wr-u) * 2) rgba(255, 255, 255, 0.4));
}

.wr-card-rocket .wr-flame {
    opacity: 1;
    animation: wr-flame 0.18s ease-in-out infinite alternate;
}

.wr-overlay.wr-won-red .wr-nose,
.wr-overlay.wr-won-red .wr-fin {
    fill: var(--wr-red);
}

.wr-overlay.wr-won-blue .wr-nose,
.wr-overlay.wr-won-blue .wr-fin {
    fill: var(--wr-blue);
}

@keyframes wr-arrive {
    from {
        opacity: 0;
        transform: translateY(40%) scale(0.4);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.wr-card-title {
    font-family: var(--ui-font);
    font-size: calc(var(--wr-u) * 4);
    font-weight: 900;
    margin-bottom: calc(var(--wr-u) * 1.4);
}

.wr-card-btn {
    font-family: var(--ui-font);
    font-size: calc(var(--wr-u) * 2.6);
    font-weight: 800;
    color: #fff;
    background: var(--wr-green);
    border: none;
    border-radius: calc(var(--wr-u) * 1.2);
    padding: calc(var(--wr-u) * 1.2) calc(var(--wr-u) * 3.4);
    cursor: pointer;
    box-shadow: 0 calc(var(--wr-u) * 0.5) 0 rgba(0, 0, 0, 0.4);
}

.wr-card-btn:active {
    transform: translateY(calc(var(--wr-u) * 0.4));
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .wr-running .wr-rocket-body,
    .wr-running .wr-flame {
        animation: none;
    }
}