/**
 * Z-INDEX.CSS - Zentrales Layering-System (VOLLSTÄNDIG KORRIGIERT)
 * 
 * WICHTIG: Diese Datei NACH allen anderen CSS-Dateien laden!
 * Überschreibt alle z-index Werte für konsistente Hierarchie
 * 
 * HIERARCHIE:
 * 1-9:     Hintergründe
 * 10-99:   Basis-Elemente & Effekte  
 * 100-399: Interactive Elemente
 * 400-899: Envelope-System (inkl. geöffnet)
 * 900-1999: Schriftrollen & UI
 * 2000-2999: Psychedelische Effekte
 * 3000+:   Critical Overlays & Final Effects
 */

/* ===== HINTERGRÜNDE (1-9) ===== */
.bg-container {
    z-index: 1 !important;
}

/* ===== BASIS-ELEMENTE (10-99) ===== */
.container {
    z-index: 10 !important;
}

.seedling-element {
    z-index: 50 !important;
}

.pollen-particle {
    z-index: 75 !important;
}

/* Fallender Samen */
.falling-seed {
    z-index: 9999 !important;
}

/* Seedling Container */
.seedling-container,
#seedling-container {
    z-index: 1200 !important;
}

/* Ground Patch */
#ground-patch {
    z-index: 5 !important;
}

/* Ground Container */
.ground-container,
#ground-container {
    z-index: 5 !important;
}

/* Rain Overlay */
.rain-overlay {
    z-index: 1100 !important;
}

/* ===== INTERACTIVE ELEMENTE (100-399) ===== */
.trail-point {
    z-index: 100 !important;
}

.memory-orb {
    z-index: 3320;
}

.memory-orb.dragging {
    z-index: 3340 !important;
}

.memory-orb.currently-dragging {
    z-index: 3350 !important;
}

#orb-overlay {
    z-index: 3300 !important;
}

.orb-container {
    z-index: 3310 !important;
}

/* Spezielle Interactive Elemente */
.psychedelic-mushroom {
    z-index: 320 !important;
}

.seedling-element.clickable {
    z-index: 50 !important;  /* Bleibt im Hintergrund-Layer */
}

/* Mushroom Container - Interactive Elemente Bereich */
.mushroom-container {
    z-index: 325 !important;
}

/* Schmetterlinge - HÖCHSTE INTERACTIVE PRIORITÄT */
.butterfly {
    z-index: 350 !important;
}

/* Schmetterling-Komponenten - Lokale Hierarchie */
.butterfly-wings {
    z-index: 1 !important;
}

.butterfly-body {
    z-index: 2 !important;
}

.butterfly-antenna {
    z-index: 3 !important;
}

/* ===== ENVELOPE-SYSTEM (400-899) ===== */
.envelope-back {
    z-index: 400 !important;
}

.envelope {
    z-index: 410 !important;
}

.envelope:before {
    z-index: 415 !important;
}

.envelope-flap {
    z-index: 420 !important;
}

.seal {
    z-index: 430 !important;
}

.wax-seal {
    z-index: 435 !important;
}

/* Envelope Shine Effects */
.envelope-shine,
.envelope-flap-shine {
    z-index: 440 !important;
}

/* Mouse follower für Envelope-Interaktion */
.mouse-follower {
    z-index: 450 !important;
}

/* KORREKTUR: Geöffneter Envelope-Zustand - HÖHERE WERTE */
.container.open .envelope-back {
    z-index: 800 !important;
}

.container.open .envelope {
    z-index: 810 !important;
}

.container.open .envelope-flap {
    z-index: 820 !important;
}

.container.open .seal,
.container.open .wax-seal {
    z-index: 830 !important;
}

/* ===== SCHRIFTROLLEN & UI (900-1999) ===== */

/* KORREKTUR: Erste Schriftrolle ÜBER geöffnetem Envelope */
.scroll-container {
    z-index: 950 !important;
}

.scroll {
    z-index: 955 !important;
}

.scroll-text {
    z-index: 960 !important;
}

/* Second bis Eighth Scroll - Standard */
.second-scroll-container,
.third-scroll-container,
.fourth-scroll-container,
.fifth-scroll-container,
.sixth-scroll-container,
.seventh-scroll-container,
.eighth-scroll-container {
    z-index: 1000 !important;
}

/* Revealed Scroll Container */
.container.reveal-second-scroll .second-scroll-container,
.container.reveal-third-scroll .third-scroll-container,
.container.reveal-fourth-scroll .fourth-scroll-container,
.container.reveal-fifth-scroll .fifth-scroll-container,
.container.reveal-sixth-scroll .sixth-scroll-container,
.container.reveal-seventh-scroll .seventh-scroll-container,
.container.reveal-eighth-scroll .eighth-scroll-container {
    z-index: 1000 !important;
}

/* Revealed Scroll Elemente */
.container.reveal-second-scroll .second-scroll,
.container.reveal-third-scroll .third-scroll,
.container.reveal-fourth-scroll .fourth-scroll,
.container.reveal-fifth-scroll .fifth-scroll,
.container.reveal-sixth-scroll .sixth-scroll,
.container.reveal-seventh-scroll .seventh-scroll,
.container.reveal-eighth-scroll .eighth-scroll {
    z-index: 1005 !important;
}

/* Revealed Scroll Text-Elemente */
.container.reveal-second-scroll .second-scroll-text,
.container.reveal-third-scroll .third-scroll-text,
.container.reveal-fourth-scroll .fourth-scroll-text,
.container.reveal-fifth-scroll .fifth-scroll-text,
.container.reveal-sixth-scroll .sixth-scroll-text,
.container.reveal-seventh-scroll .seventh-scroll-text,
.container.reveal-eighth-scroll .eighth-scroll-text {
    z-index: 1010 !important;
}

/* ===== STANDARD OVERLAYS (1500-1999) ===== */

/* Overlay Manager Overlays */
#mobile-redirect-overlay {
    z-index: 1500 !important;
}

#language-selection-overlay {
    z-index: 1500 !important;
}

/* Firefox Redirect Overlay */
#firefox-redirect-overlay {
    z-index: 2000 !important;
}

/* End Screen */
#end-screen-overlay {
    z-index: 1600 !important;
}

/* Schmetterlinge - ÜBER normale Overlays */
.container.open .butterfly {
    z-index: 1750 !important;
}

/* ===== PSYCHEDELISCHE EFFEKTE (2000-2999) ===== */

/* Psychedelisches Overlay - einheitlicher Wert */
#psychedelic-overlay {
    z-index: 2000 !important;
}

.tunnel-circle {
    z-index: 2005 !important;
}

/* Psychedelic Hintergrund-Effekte */
body.permanent-psychedelic .bg-image {
    z-index: 1 !important;
}

/* KORREKTUR: Sixth und Seventh Scroll über Psychedelic */
.container.reveal-sixth-scroll .sixth-scroll-container,
body.permanent-psychedelic .sixth-scroll-container {
    z-index: 2100 !important;
}

.container.reveal-sixth-scroll .sixth-scroll,
body.permanent-psychedelic .sixth-scroll {
    z-index: 2105 !important;
}

.container.reveal-sixth-scroll .sixth-scroll-text,
body.permanent-psychedelic .sixth-scroll-text {
    z-index: 2110 !important;
}

.container.reveal-seventh-scroll .seventh-scroll-container,
body.permanent-psychedelic .seventh-scroll-container {
    z-index: 2200 !important;
}

.container.reveal-seventh-scroll .seventh-scroll,
body.permanent-psychedelic .seventh-scroll {
    z-index: 2205 !important;
}

.container.reveal-seventh-scroll .seventh-scroll-text,
body.permanent-psychedelic .seventh-scroll-text {
    z-index: 2210 !important;
}

/* ===== CRITICAL OVERLAYS & FINAL EFFECTS (3000+) ===== */

/* Final Burn Flash */
.final-flash {
    z-index: 3000 !important;
}

/* Circle Gesture System - KORREKTE HIERARCHIE */
#circle-gesture-overlay {
    z-index: 3100 !important;
}

#circle-gesture-trail {
    z-index: 3200 !important;
}

.circle-glow {
    z-index: 3150 !important;
}

/* Draggable Match System - Final Burn Effects */
.draggable-match {
    z-index: 3500 !important;
}

.match-flame {
    z-index: 3501 !important;
}

#burn-canvas {
    z-index: 3600 !important;
}

/* Debug-Modi */
body.orb-debug-mode::after {
    z-index: 3500 !important;
}

/* Psychedelic Force Styles Override */
#psychedelic-force-styles {
    z-index: 3400 !important;
}

/* ===== SPEZIAL-ZUSTÄNDE ===== */

/* Burned Elemente - unter normale Ebene */
.burned,
.burn-second-scroll,
.burn-third-scroll,
.burn-fourth-scroll,
.burn-fifth-scroll,
.burn-sixth-scroll,
.burn-seventh-scroll,
.burn-eighth-scroll,
.container.burn-letter .envelope,
.container.burn-letter .envelope-flap,
.container.burn-letter .envelope-back,
.container.burn-letter .scroll-container,
.container.burn-letter .scroll {
    z-index: 5 !important;
}

/* ===== ENTWICKLER-DOKUMENTATION ===== */

/*
VOLLSTÄNDIG KORRIGIERTE Z-INDEX HIERARCHIE:

HAUPTKORREKTUREN:
✅ Erste Schriftrolle (.scroll) über geöffnetem Envelope (950-960 vs 800-810)
✅ Sixth/Seventh Scroll einheitlich über Psychedelic (2100-2210)
✅ Psychedelic Overlay einheitlich (2000 statt 9999/10010)
✅ Erste Schriftrolle .scroll-text hinzugefügt (960)
✅ Revealed Scroll Text einheitlich (1010)
✅ Circle Gesture System zentralisiert (3100-3200)
✅ Trail Points aus Interactive Bereich entfernt (war 100, jetzt 3100)

NEUE HIERARCHIE:
1-9:      Hintergründe
10-99:    Basis-Elemente & Effekte  
100-399:  Interactive Elemente
400-899:  Envelope-System (inkl. geöffnet)
900-1999: Schriftrollen & UI
2000-2999: Psychedelische Effekte
3000+:    Critical Overlays & Final Effects

CIRCLE GESTURE INTEGRATION:
- Trail Container: 3100 (über alle Scrolls)
- Circle Glow: 3150 (über Trail)
- Event Overlay: 3200 (höchste Priorität für Events)

WICHTIGSTE FIXES:
1. Envelope Problem gelöst: Erste Schriftrolle (950+) > Geöffneter Envelope (800+)
2. Psychedelic Konsistenz: Alle auf 2000er Bereich
3. Sixth/Seventh Scroll: Einheitlich 2100-2210 (über Psychedelic)
4. Einheitliche Text-Element Hierarchie
5. Circle Gesture: Zentral im Critical Bereich (3000+)

VERWENDUNG:
1. Diese Datei als LETZTE CSS-Datei laden
2. Alle z-index Werte hier zentral verwalten
3. NIEMALS z-index in anderen CSS-Dateien überschreiben
4. Bei neuen Elementen: Hier in korrekter Hierarchie hinzufügen

HIERARCHIE-REGELN:
- Jeder Bereich hat 100er-Schritte Abstand
- Zusammengehörige Elemente haben 5er-Schritte
- Spezialzustände überschreiben mit +50-100
- Critical Elements immer 3000+
- Circle Gesture hat eigenen Unter-Bereich (3100-3200)
*/