/* ===== SoulKeeper - Szene 1: Himmel ================================= */

/* ===== Sterne ===== */
/* .stars-far nutzt den box-shadow-Trick (hunderte Punkte in einem
   einzigen Element - sehr performant). .stars-mid/.stars-near bestehen
   aus einzelnen, von js/stars.js erzeugten Elementen mit eigenem
   Funkel-Timing für spürbare Tiefe. */

.stars-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.stars-far {
    opacity: 0.55;
    animation: sterne-atmen 6s ease-in-out infinite;
}

.stars-mid .stern,
.stars-near .stern {
    position: absolute;
    border-radius: 50%;
    background: var(--star-color);
    animation: funkeln var(--funkel-dauer, 3.5s) ease-in-out infinite;
    animation-delay: var(--funkel-versatz, 0s);
}

.stars-near .stern {
    box-shadow: 0 0 4px rgba(242, 236, 226, 0.8);
}

@keyframes funkeln {
    0%, 100% { opacity: var(--funkel-min, 0.35); }
    50% { opacity: 1; }
}

@keyframes sterne-atmen {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
    .stars-far,
    .stars-mid .stern,
    .stars-near .stern {
        animation: none;
    }
}

/* ===== Sternschnuppen ===== */
/* Werden von js/stars.js in unregelmäßigen Abständen erzeugt und nach dem
   Flug wieder entfernt. --flug-x/--flug-y (Strecke) und --flug-dauer
   kommen als Inline-Werte pro Sternschnuppe von dort. */

.sternschnuppe {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.9);
    opacity: 0;
    animation: sternschnuppe-flug var(--flug-dauer, 1.2s) linear forwards;
}

.sternschnuppe::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    width: 110px;
    height: 1.5px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.85), transparent);
    transform: translateY(-50%) rotate(var(--schweif-winkel, 0deg));
    transform-origin: right center;
}

@keyframes sternschnuppe-flug {
    0%   { opacity: 0; transform: translate(0, 0); }
    8%   { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--flug-x, 300px), var(--flug-y, 160px)); }
}

@media (prefers-reduced-motion: reduce) {
    .sternschnuppe {
        display: none;
    }
}

/* ===== Durchgehender Verlauf über #himmel-hintergrund ===== */
/* Vorher: zwei getrennte Hintergründe (Himmel-Schwarz + eigener Verlauf
   in Level 1) - dadurch wirkte die Kamerafahrt wie das Verschieben eines
   reinen schwarzen Bildes statt eines Übergangs, und Level 1 hatte keine
   Sterne mehr. Jetzt: EIN Verlauf über die gesamte Track-Höhe, in
   vh-Einheiten (nicht %) verankert, damit er unabhängig von der Anzahl
   der Ebenen an der richtigen absoluten Position bleibt: die obersten
   80vh (= der sichtbare Himmel-Bereich) bleiben tiefschwarz mit Sternen,
   dann Übergang zur aktuellen Theme-Farbe bei genau 100vh (= Nahtstelle
   zu Level 1), die von dort bis zur Nahtstelle Level 1→Level 2 (200vh)
   durchgängig bleibt ("Oberwelt ... das bis unten durchgängig ist").
   Reagiert direkt auf Theme-Wechsel über die CSS-Variable, kein JS nötig.

   Ab 190vh (kurz vor der Nahtstelle zu Level 2 bei 200vh) Übergang zurück
   zu Schwarz statt der hellen Theme-Farbe: weder Level 1s vordere Ebene
   noch Level 2s Höhlenhintergrund decken ihre jeweilige Szene lückenlos
   bis zum allerletzten Pixel ab (Level 1: .level1-boden--vorne endet vor
   der Unterkante; Level 2: eigener Hintergrund startet erst bei 200vh) -
   ohne diesen Übergang schien an genau dieser Nahtstelle die helle
   Theme-Farbe durch und die beiden Ebenen wirkten "nicht zusammen".

   WICHTIG: der Zielwert bei 200vh ist --level2-hoehle-bg, NICHT
   --sky-black - beides ist zwar "fast schwarz", aber zwei unterschiedliche
   Farbwerte. Während der eigentlichen 4s-Kamerafahrt (nicht nur im
   Endzustand) ist an der Nahtstelle kurz sowohl dieser Verlauf als auch
   Level 2s eigener Hintergrund sichtbar - mit --sky-black gab es dort
   einen minimalen, aber sichtbaren Farbsprung zwischen zwei knapp
   unterschiedlichen Schwarztönen. Mit --level2-hoehle-bg ist die Farbe an
   der Nahtstelle exakt identisch, auch mid-transition. */
#himmel-hintergrund {
    background: linear-gradient(to bottom,
        var(--sky-black) 0,
        var(--sky-black) calc(80 * var(--uh)),
        var(--horizon-color) calc(100 * var(--uh)),
        var(--horizon-color) calc(190 * var(--uh)),
        var(--level2-hoehle-bg) calc(200 * var(--uh))
    );
    transition: background var(--theme-transition);
}

/* ===== Titel ===== */

.title-wrap {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
    transition: transform 1.4s ease, opacity 1.1s ease;
}

/* Nach PRESS START: Titel rückt nach oben, bildet den oberen Mittelpunkt,
   während unten die Dialogbox erscheint. */
.title-wrap--verschoben {
    transform: translateY(calc(-13 * var(--uh)));
}

/* Nach Ende der Story: Titel verschwindet, bevor die Kamerafahrt startet. */
.title-wrap--verschwindet {
    opacity: 0;
    transform: translateY(calc(-13 * var(--uh))) scale(0.96);
}

/* Wrapper nur für SadSoul + Titel-Schriftzug - shrink-wrappt sich auf
   die Breite von .game-title (einziges Kind im normalen Textfluss) und
   bildet eine eigene Stacking-Order, damit die Seele unabhängig vom Rest
   der Seite sicher HINTER dem Titel bleibt. */
.titel-mit-seele {
    position: relative;
    z-index: 0;
    display: inline-block;
}

.titel-mit-seele .game-title {
    position: relative;
    z-index: 2;
}

/* Ragt links aus dem Titel heraus, ihr rechter Rand verschwindet dabei
   unter den Buchstaben von "Descent" (z-index 1 < .game-title z-index 2) -
   wirkt so wie ein Hintergrundelement des Titel-Schriftzugs statt eines
   separaten Bildes daneben. Pixel-Art bleibt unangetastet (keine
   Glättung). */
.titel-seele {
    position: absolute;
    bottom: 15%;
    left: 0;
    z-index: 1;
    /* Am unteren Rand des Titels verankert (nicht vertikal zentriert) -
       wenn die Seele wächst, dehnt sie sich nur nach oben aus (viel freier
       Raum), statt nach unten in die Subtitle-Zeile hineinzuwachsen. */
    transform: translate(-65%, -15%);
    width: clamp(2.6rem, calc(7.5 * var(--uw)), 7.0rem);
    max-width: none;
    height: auto;
    aspect-ratio: 22 / 32;
    image-rendering: pixelated;
    pointer-events: none;
    opacity: 0.92;
}

.game-title {
    margin: 0;
    /* Pixelige Oldschool-Arcade-Schrift, dieselbe wie beim Countdown
       (css/uebergang.css) - dritter Anlauf nach Cinzel Decorative und
       Metamorphous, diesmal bewusst "wie beim Counter" statt gemeißelte
       Stein-Optik. */
    font-weight: 400;
    font-size: clamp(1.1rem, calc(3.6 * var(--uw)), 2.3rem);
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: #ddd4c8;
    text-shadow:
        3px 3px 0 #000,
        0 0 20px var(--accent),
        0 0 42px var(--accent);
    animation: titel-glimmen 5s ease-in-out infinite;
    transition: text-shadow var(--theme-transition);
}

@keyframes titel-glimmen {
    0%, 100% {
        text-shadow:
            3px 3px 0 #000,
            0 0 20px var(--accent),
            0 0 42px var(--accent);
    }
    50% {
        text-shadow:
            3px 3px 0 #000,
            0 0 28px var(--accent-bright),
            0 0 56px var(--accent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .game-title {
        animation: none;
    }
}

.game-subtitle {
    margin: 1rem 0 0;
    font-weight: 400;
    font-size: clamp(0.7rem, calc(2 * var(--uw)), 1.05rem);
    letter-spacing: 0.4em;
    text-indent: 0.4em; /* gleicht den Letter-Spacing-Nachlauf optisch aus */
    color: var(--text-dim);
    text-transform: uppercase;
}

/* ===== PRESS START ===== */

/* Höhe folgt ausschließlich Press Start/Start-Menü, unabhängig davon, ob
   gerade ein Panel (Highscore/Settings/Musikliste, siehe css/menues.css)
   absolut darin liegt - siehe index.html #aktions-slot. */
.aktions-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: clamp(2rem, calc(6 * var(--uh)), 3.5rem);
}

.btn-start {
    padding: 0.9rem 1.8rem;
    background: rgba(8, 6, 14, 0.7);
    border: 1px solid var(--accent-bright);
    border-radius: 4px;
    color: var(--text);
    font-weight: 400;
    letter-spacing: 0.15em;
    text-indent: 0.15em;
    text-transform: uppercase;
    font-size: clamp(0.6rem, calc(1.6 * var(--uw)), 0.8rem);
    cursor: pointer;
    box-shadow: 0 0 18px var(--accent);
    animation: start-puls 2.6s ease-in-out infinite;
    transition: box-shadow var(--theme-transition), border-color var(--theme-transition),
                background 0.2s ease, transform 0.15s ease;
}

.btn-start:hover {
    background: rgba(20, 14, 30, 0.85);
    transform: translateY(-2px);
}

.btn-start:active {
    transform: translateY(0);
}

.btn-start:disabled {
    opacity: 0.5;
    cursor: default;
    animation: none;
}

/* Nach Klick: blendet aus und verschwindet aus dem Layout, statt nur
   deaktiviert/ausgegraut stehen zu bleiben. */
.btn-start--ausgeblendet {
    opacity: 0 !important;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

@keyframes start-puls {
    0%, 100% { box-shadow: 0 0 12px var(--accent); }
    50%      { box-shadow: 0 0 28px var(--accent-bright); }
}

/* Kein Kürbis-Icon mehr (Punkt: passt sonst nicht zu den restlichen
   Kästen) - Name selbst übernimmt die Rolle des Labels (siehe
   .level1-hud-spieler in css/level1-gameplay.css: #player-name trägt
   zusätzlich die Klasse .level1-hud-label, liefert Font-Family/Größe/
   Farbe/Letter-Spacing). Hier nur noch Kürzung/Zentrierung, die für DIESES
   Element spezifisch bleibt (kein anderes Label ist je so lang). */
.player-name {
    max-width: 10rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Font-Family/Größe/Farbe kommen jetzt von der geteilten .level1-hud-wert-
   Klasse (index.html, css/level1-gameplay.css) - hier nur noch der wegen der
   Emoji-Reihe etwas großzügigere Zeichenabstand obendrauf. */
.player-herzen {
    letter-spacing: 0.1em;
}

/* ===== Theme-Umschalter (oben rechts) ===== */

.theme-switch {
    display: flex;
    gap: 0.4rem;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 0.4rem;
    backdrop-filter: blur(3px);
}

.theme-swatch {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.theme-swatch:hover {
    transform: scale(1.1);
}

.theme-swatch[aria-pressed="true"] {
    border-color: #fff;
}

.theme-swatch--purple { background: #7a4fd6; }
.theme-swatch--orange { background: #c9500f; }
.theme-swatch--grey   { background: #6b7280; }
.theme-swatch--white  { background: #e5e5ea; }

/* ===== Audio-Steuerung (unten rechts) ===== */

/* Liegt jetzt außerhalb von #story-track (siehe index.html, wie schon
   #dialog-box/#countdown-overlay/#level-einblendung) - position:fixed wäre
   hier ein Fallstrick gewesen: sobald #story-track per transform bewegt
   wird (Kamerafahrt zu Level 1), würde es selbst zum Bezugsrahmen für
   fixed-Nachfahren statt des Browser-Fensters, und die Steuerung würde
   trotzdem mitwandern. #story bewegt sich nie und deckt exakt den
   sichtbaren Viewport ab, position:absolute relativ dazu reicht also. */
.audio-controls {
    position: absolute;
    right: clamp(0.8rem, calc(2.5 * var(--uw)), 1.6rem);
    bottom: clamp(0.8rem, calc(2.5 * var(--uw)), 1.6rem);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    backdrop-filter: blur(3px);
}

.btn-mute {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
}

.btn-mute:hover {
    color: var(--text);
}

.volume-slider {
    width: 90px;
    accent-color: var(--accent-bright);
}

/* ===== Schmale Screens ===== */

@media (max-width: 560px) {
    .player-name {
        max-width: 7rem;
    }

    /* .audio-controls bleibt bewusst OHNE eigene Regel hier - sie soll
       immer unten rechts bleiben, auch auf schmalen Screens (vorher stand
       hier eine Regel, die sie stattdessen nach links verschoben hat -
       das war der gemeldete Bug). */
}