/* ===== SoulKeeper - Level 2 Gameplay ======================================
   Gegner (Skelett/Fledermaus/Spinne), Trefferboxen, Bonus-Totenkopf. Nutzt
   für Punkte/Timer/Waffenwahl/Game-Over/Sieg-Overlay bewusst dieselben
   HUD-Klassen wie Level 1 (siehe css/level1-gameplay.css - #level1-spiel-hud
   & Co. werden von js/level2-gameplay.js direkt wiederverwendet, nie
   gleichzeitig mit Level 1 aktiv). Die Boss-HP-Leiste (#level2-boss-leiste)
   nutzt ebenfalls die bestehenden .level1-hexe-leiste-Klassen (nur eigene
   ID+Label in index.html) - auch dafür ist hier keine eigene Regel nötig.
   Alles hier lebt innerhalb der neuen Anker-Container in #scene-unterwelt
   (siehe index.html: .level2-spielbereich*). */

/* ===== Tiefenebenen-Anker (analog Level 1s containerFuerTiefe, aber über
   z-index statt reiner DOM-Reihenfolge - css/level2.css nutzt bereits
   durchgehend z-index: Ebene 4 (inkl. Kristall) = 7, Ebene 5 (inkl.
   Kristall) = 8.
   Spawnraum-Korrektur: "hinten" (z:6) liegt hinter Ebene 4 UND Ebene 5 -
   trägt jetzt Skelett-MITTELBEREICH sowie alle Fledermäuse außer der
   "vorderen Ebene". "mitte"/"flug" (z:7) liegen dazwischen (vor dem
   Ebene-4-Kristall, hinter Ebene 5) - tragen Skelett-VORDERGRUND
   (js/level2-gameplay.js: containerFuerTier('nah') -> spielbereichMitte)
   sowie die frei fliegenden "vordere Ebene"-Fledermäuse. "nah" (z:9, vor
   Ebene 5) wird von Skeletten/Fledermäusen nicht mehr genutzt, bleibt aber
   für den Bonus-Totenkopf bestehen. Skelette in der Zone TIEFE (Punkte-
   klasse 'hinten') hängen NICHT an einem dieser Container, sondern direkt
   an .level2-hoehle mit individuellem z-index (siehe
   tiefeSkelettZIndex/erzeugeSkelett) - nur so lassen sie sich korrekt
   zwischen die einzeln gestaffelten Stalagmiten einsortieren (siehe
   css/level2.css: .level2-stalagmite-body.level2-stalagmite-*). ===== */
.level2-spielbereich {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
}

.level2-spielbereich--hinten {
    z-index: 6;
}

.level2-spielbereich--nah {
    z-index: 9;
}

/* ===== Fadenkreuz während des aktiven Gameplays (analog .level1-gameplay-aktiv) =====
   Styling jetzt gemeinsam mit Level 1/3 in css/base.css definiert (siehe
   dort, .level2-gameplay-aktiv, sowie css/level1-gameplay.css für den
   vollständigen Herleitungs-Kommentar zu diesem Muster). */

/* ===== Gegner-Grundgerüst (analog .l1-feind/.l1-feind-wackel/.l1-feind-svg) ===== */
.l2-feind {
    position: absolute;
    aspect-ratio: 1 / 1;
    /* Kein eigenes cursor:crosshair mehr - erbt das waffenabhängige
       Fadenkreuz von .level2-gameplay-aktiv, siehe dortiger Kommentar bzw.
       css/level1-gameplay.css: .l1-feind für die ausführliche Begründung. */
    pointer-events: auto;
    /* Korrektur: gilt für alle Kreaturen (Skelett/Fledermaus/Spinne) -
       explizite Absicherung gegen jede Transparenz/Verblassen, unabhängig
       davon, was darunter/davor liegt (siehe auch die z-index-Korrektur bei
       .level2-cave-hole-glow in css/level2.css). */
    opacity: 1;
    mix-blend-mode: normal;
}

.l2-feind-wackel {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center;
}

.l2-feind-svg {
    width: 100%;
    height: 100%;
}

.l2-feind-svg svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Silhouettengenaue Basis-Trefferlogik - Klicks registrieren nur auf
   tatsächlich gefüllten Pixeln (identische Technik wie Level 1). */
.l2-feind-svg svg * {
    pointer-events: visiblePainted;
}

/* Großzügigere Trefferbox über der Silhouette - Größe kommt schwierigkeits-
   abhängig als Inline-Style aus js/level2-gameplay.js (liveHitboxInsetProzent,
   live aus Level 1s KONFIG gelesen). */
.l2-feind-hitbox {
    position: absolute;
    inset: calc(-1 * max(22%, 20px));
    pointer-events: auto;
}

/* Debug-Sichtbarkeit der Trefferbox (?hitbox=1, siehe js/level2-gameplay.js:
   HITBOX_DEBUG) - identische Technik wie css/level1-gameplay.css
   (.l1-feind-hitbox--debug/.l1-feind-lp-debug). Nur zu Testzwecken, ohne den
   Parameter bleibt .l2-feind-hitbox wie gehabt unsichtbar. */
.l2-feind-hitbox--debug {
    background: rgba(160, 160, 160, 0.45);
    outline: 1px dashed rgba(255, 255, 255, 0.85);
}

/* LP-Debug-Anzeige (?hitbox=1): Styling jetzt gemeinsam in css/base.css:
   .feind-lp-debug (siehe dort) - js/level2-gameplay.js weist diese Klasse
   zusätzlich zu .l2-feind-lp-debug zu, das hier nur noch als
   querySelector-Hook dient, kein eigenes CSS mehr nötig. */

/* ===== Skelette: Lauf-Wackeln (analog l1-zombie-wackel) ===== */
@keyframes l2-skelett-wackel {
    0%   { transform: rotate(-4deg); }
    25%  { transform: rotate(4deg); }
    50%  { transform: rotate(-4deg); }
    75%  { transform: rotate(4deg); }
    100% { transform: rotate(-4deg); }
}

.l2-feind--skelett.l2-feind--bewegt .l2-feind-wackel {
    animation: l2-skelett-wackel 0.55s ease-in-out infinite;
}

/* Treffer-Flash (Pumpgun trifft, Skelett überlebt den Schuss) - identische
   Technik wie beim Zombie (siehe css/level1-gameplay.css:
   l1-zombie-treffer-flash), nur mit einem dezenten Rot statt Dunkelrot,
   damit die helle Skelett-Fläche nicht dunkel wird. */
@keyframes l2-skelett-treffer-flash {
    0%   { fill: #ffffff; }
    25%  { fill: #ffb3b3; }
    100% { fill: #ffffff; }
}

.l2-feind--skelett.l2-feind--treffer-flash .l2-feind-svg svg path {
    animation: l2-skelett-treffer-flash 0.35s ease-out;
}

/* ===== Fledermäuse: weiche vertikale Schwingung zusätzlich zur
   horizontalen Querung. Amplitude/Dauer kommen pro Instanz individuell über
   CSS-Custom-Properties aus js/level2-gameplay.js (erzeugeFledermaus). Der
   Glow ("in die Höhlenbeleuchtung integriert") ist jetzt fest ins SVG-Asset
   eingezeichnet statt per drop-shadow()-Filter - der frühere Dauerfilter
   musste bei jeder Positionsänderung (left-Transition) neu berechnet
   werden, spürbar teurer als das reine Neuzeichnen der Vektorfläche. ===== */
@keyframes l2-fledermaus-flug {
    0%   { transform: translateY(0); }
    100% { transform: translateY(var(--l2-fledermaus-amplitude, 6%)); }
}

.l2-feind--fledermaus .l2-feind-wackel {
    animation: l2-fledermaus-flug var(--l2-fledermaus-dauer, 2s) ease-in-out infinite alternate;
}

/* ===== Spinnen-Boss ===== */
@keyframes l2-spinne-wackel {
    0%   { transform: rotate(-3deg); }
    100% { transform: rotate(3deg); }
}

.l2-feind--spinne .l2-feind-wackel {
    animation: l2-spinne-wackel 0.5s ease-in-out infinite alternate;
}

/* Todesanimation - identische Technik wie Level 1s .l1-feind--hexe-tod:
   translate (Fall) und rotate (Drehung) auf zwei verschiedenen Elementen,
   sonst dreht sich die Fallrichtung während der Drehung mit (spiralförmiger
   statt geradliniger Fall). Position wird vor dem Hinzufügen dieser Klasse
   bereits eingefroren (px statt %, transition auf 'none' gesetzt, siehe
   friereGegnerPosition in js/level2-gameplay.js). Dauer/Drehwinkel kommen
   dynamisch aus js/level2-gameplay.js (--l2-spinne-tod-dauer/-grad, an die
   tatsächliche Länge des gewählten Todesschrei-Sounds gekoppelt). Bewusst
   OHNE Opacity-Fade - die Spinne bleibt beim Fallen voll sichtbar, bis sie
   den sichtbaren Bereich verlässt (#story hat overflow:hidden). */
.l2-feind--spinne-tod {
    transition: transform var(--l2-spinne-tod-dauer, 3s) linear;
    transform: translateY(calc(160 * var(--uh)));
}

.l2-feind--spinne-tod .l2-feind-wackel {
    animation: none;
    transition: transform var(--l2-spinne-tod-dauer, 3s) linear;
    transform: rotate(var(--l2-spinne-tod-grad, 1080deg));
}

/* ===== Abseil-Faden ===== */
/* Weißer Faden von der Decke zur Spinnenmitte - eigenes, unabhängiges
   Element (siehe erzeugeSpinnenfaden in js/level2-gameplay.js), KEIN Kind
   der Spinne: fällt dadurch beim Sterben nicht mit (siehe
   entferneSpinnenfaden/starteSpinnenTod). */
.l2-spinnenfaden {
    position: absolute;
    top: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55));
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
    transform: translateX(-50%);
    pointer-events: none;
}

/* ===== Punkte-Popup bei Treffer (analog .l1-punkte-popup) =====
   Styling jetzt gemeinsam mit Level 1/3 in css/base.css definiert (siehe
   dort, .l2-punkte-popup + @keyframes punkte-auf). */

/* ===== Bonus: fallender Totenkopf (js/bonus-skull.js, levelunabhängig) =====
   Dasselbe 💀-Emoji wie die HUD-Lebensanzeige (js/player.js) - deutlich
   sichtbarer Glow + sanftes Pulsieren macht ihn klar als schießbaren Bonus
   erkennbar (Punkt 9), ohne ein neues Grafik-Asset zu benötigen. */
.bonus-skull {
    font-size: clamp(1.8rem, calc(5 * var(--uw)), 3rem);
    line-height: 1;
    /* Kein eigenes cursor:crosshair mehr - erbt das waffenabhängige
       Fadenkreuz von .level1-/.level2-/.level3-gameplay-aktiv (der Bonus-
       Totenkopf ist levelunabhängig, siehe js/bonus-skull.js), siehe
       css/level1-gameplay.css: .l1-feind für die ausführliche Begründung. */
    user-select: none;
    filter: drop-shadow(0 0 10px var(--accent-bright)) drop-shadow(0 0 4px #fff);
    animation: l2-bonus-skull-puls 0.9s ease-in-out infinite alternate;
}

@keyframes l2-bonus-skull-puls {
    0%   { transform: scale(0.9); }
    100% { transform: scale(1.1); }
}