/* ===== SoulKeeper - Übergang Himmel → Level 1 ==========================
   Level-Einblendung und Countdown liegen als Overlays über #story (nicht
   in #story-track), damit ihre Sichtbarkeit rein zeitgesteuert ist und
   unabhängig von der Kamerafahrt-Position bleibt. */

.level-einblendung {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2.2s ease;
    overflow-y: auto;
    /* "safe center": zentriert wie bisher, WEICHT aber auf Start-Ausrichtung
       aus, sobald der Inhalt (z.B. mit Statistik-Tabelle, siehe
       js/statistik.js) höher als der Viewport ist - verhindert, dass Inhalt
       oben unsichtbar abgeschnitten wird (Bugreport: Tabelle "verschwunden",
       Knopf noch da), ohne den Normalfall (passt locker in den Viewport) zu
       verändern. Erste Zeile ist der Fallback für Browser ohne "safe"-
       Unterstützung - bleibt dort beim bisherigen reinen center. */
    justify-content: center;
    justify-content: safe center;
}

.level-einblendung--sichtbar {
    opacity: 1;
}

/* Einheitlicher Pixel-Look (Press Start 2P) wie Titel/Countdown - vorher
   noch Cinzel/Metamorphous, dadurch wirkte die Schrift uneinheitlich. */

.level-einblendung-nummer {
    margin: 0 0 0.8rem;
    font-size: clamp(0.6rem, calc(1.6 * var(--uw)), 0.85rem);
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.level-einblendung-name {
    margin: 0;
    font-weight: 400;
    font-size: clamp(1.3rem, calc(5 * var(--uw)), 2.6rem);
    letter-spacing: 0.02em;
    color: #ddd4c8;
    text-shadow:
        3px 3px 0 #000,
        0 0 20px var(--accent),
        0 0 42px var(--accent);
}

.level-einblendung-untertitel {
    margin: 1rem 0 0;
    font-weight: 400;
    font-size: clamp(0.55rem, calc(1.8 * var(--uw)), 0.85rem);
    letter-spacing: 0.08em;
    color: var(--text-dim);
    line-height: 1.6;
}

/* Statistik-Tabelle + "Weiter"-Knopf auf dem "Geschafft"-Bildschirm (siehe
   js/statistik.js) - standardmäßig versteckt (nur bei aktivem
   Statistik-Schalter sichtbar). Der Elternrahmen .level-einblendung hat
   pointer-events:none (Punkt oben, für den reinen Zeitablauf gedacht) -
   beide neuen Elemente brauchen deshalb ihr eigenes pointer-events:auto,
   damit der Knopf klickbar bleibt bzw. die Tabelle bei Bedarf scrollbar
   ist. Tabellen-Optik selbst kommt unverändert aus den bestehenden
   .spielwerte-*-Klassen (css/menues.css) - kein zweites Tabellen-Design. */
.victory-statistik {
    margin-top: 1.2rem;
    width: min(94%, calc(50 * var(--uw)));
    max-height: calc(34 * var(--uh));
    overflow-y: auto;
    pointer-events: auto;
}

.victory-weiter-knopf {
    margin-top: 1.2rem;
    pointer-events: auto;
}

/* ===== Top-10-Ergebnis (siehe js/top10-highscore.js) - eigene Feier-Box
   auf dem "Geschafft"-Bildschirm. Gleiches pointer-events:auto-Muster wie
   .victory-statistik/.victory-weiter-knopf oben (der Elternrahmen
   .level-einblendung hat pointer-events:none). ===== */
.top10-box {
    margin-top: 1.4rem;
    padding: 1rem 1.4rem;
    width: min(92%, calc(37.5 * var(--uw)));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    background: var(--panel-bg);
    border: 1px solid var(--accent);
    border-radius: 6px;
    box-shadow: 0 0 24px var(--accent);
    pointer-events: auto;
}

.top10-titel {
    margin: 0;
    font-size: clamp(0.65rem, calc(2 * var(--uw)), 0.9rem);
    color: var(--accent-bright);
    text-shadow: 0 0 12px var(--accent);
}

.top10-punkte {
    margin: 0;
    font-size: clamp(0.8rem, calc(2.6 * var(--uw)), 1.2rem);
    color: var(--text);
}

.top10-schwierigkeit {
    margin: 0;
    font-size: clamp(0.55rem, calc(1.6 * var(--uw)), 0.75rem);
    color: var(--text-dim);
    letter-spacing: 0.05em;
}

.top10-weiter-knopf {
    margin-top: 0.6rem;
}

/* Retro-pixeliges Feuerwerk (Vorgabe: "deutlich sichtbar") - Bursts aus
   scharfkantigen Quadraten statt runder Partikel/Verläufe, passend zum
   Pixel-Look des restlichen Spiels. Eigenständiges Overlay-Element
   (#top10-feuerwerk in index.html, Geschwister von #level1-victory-
   einblendung), z-index UNTER .level-einblendung (4) - liegt also hinter
   Text/Box, bleibt dadurch überall dort sichtbar, wo die Einblendung
   selbst keinen deckenden Hintergrund hat. */
.top10-feuerwerk {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

.top10-feuerwerk-burst {
    position: absolute;
    width: 0;
    height: 0;
}

.top10-feuerwerk-pixel {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    animation: top10-pixel-flug 0.9s ease-out forwards;
}

@keyframes top10-pixel-flug {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy));
        opacity: 0;
    }
}

/* ===== Finale Spielauswertung (siehe js/endauswertung.js) - eigenes,
   von #level1-victory-einblendung unabhängiges Overlay, dieselbe
   .level-einblendung-Fade-Basis oben. Inhalt komplett von js/
   endauswertung.js gerendert, wiederverwendet dafür unverändert die
   bestehenden .spielwerte-*-Klassen (css/menues.css) - kein zweites
   Tabellen-Design. Gleiches pointer-events:auto-Muster wie
   .victory-statistik/.top10-box oben (Elternrahmen hat pointer-events:none). */
.endauswertung-box {
    margin-top: 1rem;
    width: min(94%, calc(50 * var(--uw)));
    max-height: calc(62 * var(--uh));
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: auto;
}

.endauswertung-weiter-knopf {
    margin-top: 1.2rem;
    pointer-events: auto;
}

.endauswertung-abschluss {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.2rem;
    padding: 0.9rem 1.2rem;
    background: var(--panel-bg);
    border: 1px solid var(--accent);
    border-radius: 6px;
    box-shadow: 0 0 24px var(--accent);
}

.endauswertung-gesamtscore {
    margin: 0;
    font-size: clamp(0.8rem, calc(2.6 * var(--uw)), 1.2rem);
    color: var(--text);
}

.endauswertung-platz {
    margin: 0;
    font-size: clamp(0.6rem, calc(1.9 * var(--uw)), 0.85rem);
    color: var(--accent-bright);
    text-shadow: 0 0 12px var(--accent);
    text-align: center;
}

/* Platz 1-3 (Vorgabe: "deutliche Anzeige des erreichten Platzes") -
   deutlich größer + sanft pulsierend, zusammen mit dem wiederverwendeten
   #top10-feuerwerk (siehe js/endauswertung.js/js/top10-highscore.js). */
.endauswertung-platz--top3 {
    font-size: clamp(0.9rem, calc(3.2 * var(--uw)), 1.5rem);
    animation: endauswertung-platz-puls 1.4s ease-in-out infinite;
}

@keyframes endauswertung-platz-puls {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* ===== Countdown ===== */

.countdown-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    /* Fadenkreuz-Cursor (Vorgabe: "soll sich ändern, sobald der Countdown
       erscheint") - deckt den kompletten Sichtbereich ab (position:absolute
       + inset:0 relativ zu #story, das exakt 100vh/100vw groß ist), zeigt
       hier deshalb schon VOR dem eigentlichen Gameplay-Start das
       Fadenkreuz. Immer die Pistolen-Variante: js/level1-/level2-/level3-
       gameplay.js setzen die Waffe beim jeweiligen starte() ohnehin
       synchron auf 'pistole' zurück (siehe waehleWaffe('pistole') dort),
       bevor überhaupt ein Countdown für dieses Level läuft - der Wert hier
       stimmt dadurch immer, ganz ohne die Countdown-Komponente
       levelspezifisch zu machen (sie ist bewusst level-agnostisch, siehe
       js/main.js: starteCountdown/window.SoulKeeperCountdown). Gilt auch
       für Level 3s zweiten Countdown ("LETZTES GEFECHT" vor dem
       Bosskampf), derselbe Mechanismus, keine Sonderbehandlung nötig. */
    cursor: var(--cursor-pistole);
}

.countdown-zahl {
    font-size: clamp(1.3rem, calc(5 * var(--uw)), 2.6rem);
    color: var(--accent-bright);
    text-shadow: 0 0 30px var(--accent), 0 0 70px rgba(0, 0, 0, 0.8);
}

.countdown-zahl--puls {
    animation: countdown-puls 1.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes countdown-puls {
    0%   { transform: scale(0.4); opacity: 0; }
    15%  { transform: scale(1.15); opacity: 1; }
    30%  { transform: scale(1); opacity: 1; }
    80%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.92); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .level-einblendung {
        transition: none;
    }
    .top10-feuerwerk-pixel {
        animation: none;
        opacity: 0;
    }
    .countdown-zahl--puls {
        animation: none;
    }
    .endauswertung-platz--top3 {
        animation: none;
    }
}