/* --- 1. CORE RESET & VIEWPORT --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
    width: 100vw; height: 100vh;
    background-color: #02040A; /* Tiefes All als Grundfarbe */
    overflow: hidden;
    font-family: 'Rajdhani', sans-serif;
    color: #fff;
}

#viewport {
    position: relative; width: 100%; height: 100%; overflow: hidden;
}

/* --- 2. DIE GIGANTISCHE WELTKARTE --- */
#world-map {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 35000px;
    
    /* Sterne + Gigantischer 30.000px Farbverlauf für die Übergänge */
    background-image: 
        /* Sterne - Ebene 1 (Viele kleine weiße Punkte) */
        radial-gradient(1px 1px at 20% 30%, #ffffff, transparent),
        radial-gradient(1px 1px at 70% 60%, #ffffff, transparent),
        /* Sterne - Ebene 2 (Mittlere, leicht bläuliche Sterne) */
        radial-gradient(2px 2px at 40% 80%, rgba(0, 240, 255, 0.6), transparent),
        radial-gradient(2px 2px at 80% 20%, rgba(255, 255, 255, 0.7), transparent),
        /* Sterne - Ebene 3 (Seltene, etwas größere Leuchtpunkte) */
        radial-gradient(2.5px 2.5px at 10% 90%, rgba(255, 200, 200, 0.8), transparent),
        radial-gradient(2.5px 2.5px at 90% 10%, rgba(255, 255, 255, 0.8), transparent),
        
        /* Der Farbnebel, der die Bilder miteinander verbindet */
        linear-gradient(to top, 
            #0a192f 0%,     /* Start: Himmelsblau (Erde) */
            #02040A 8%,     /* Fade to Black (Sternenraum) */
            #05252b 13%,    /* Peak: Cyan (Mond) */
            #02040A 20%,    /* Fade to Black */
            #290b05 28%,    /* Peak: Rostrot (Mars) */
            #02040A 40%,    /* Fade to Black */
            #2e1f04 50%,    /* Peak: Gold (Jupiter/Sonne) */
            #02040A 62%,    /* Fade to Black */
            #19042b 73%,    /* Peak: Dunkelviolett (Schwarzes Loch) */
            #02040A 83%,    /* Fade to Black */
            #230630 90%,    /* Peak: Magenta/Cyan (Galaxie) */
            #02040A 100%    /* Ende: Tiefes Schwarz */
        );

    /* Größen für die wiederholenden Sternenmuster und 100% für den Nebel */
    background-size: 
        250px 250px, 
        300px 300px, 
        400px 400px, 
        450px 450px, 
        600px 600px, 
        700px 700px, 
        100% 100%;

    background-color: #02040A;
    transition: transform 50s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}
/* --- 3. DIE 6 BILD-ZONEN (Pixel-Art Poster) --- */
.zone {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto; /* Zwingt das Element, sich exakt an das Bildformat anzupassen */
    display: block;
}

/* ZONE 1: Startrampe (0 km) */
#zone-1 {
    bottom: 0; 
    z-index: 6;
    /* Verblasst butterweich an den oberen 20% des BILDES */
    -webkit-mask-image: linear-gradient(teNameo top, black 80%, transparent 100%);
    mask-image: linear-gradient(to top, black 80%, transparent 100%);
}

/* ZONE 2: Mond */
#zone-2 {
    bottom: 2500px; 
    z-index: 5;
    /* Verblasst an den oberen UND unteren 20% ins Unendliche */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* ZONE 3: Mars */
#zone-3 {
    bottom: 7500px; 
    z-index: 4;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* ZONE 4: Jupiter & Sonne */
#zone-4 {
    bottom: 15000px; 
    z-index: 3;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* ZONE 5: Interstellarer Raum (Gateway zum Finale) bei 19.500 km */
#zone-5 {
    bottom: 22500px; 
    z-index: 2;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* ZONE 6: Die Singularität (Finale!) bei 25.000 km */
#zone-6 {
    bottom: 29500px; 
    z-index: 1;
    /* Verblasst am unteren Rand, bleibt nach oben hin pechschwarz unendlich */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%, black 100%);
    mask-image: linear-gradient(to top, transparent 0%, black 20%, black 100%);
}

/* --- 4. DIE RAKETE (Fest im Sichtfenster) --- */
#rocket {
    position: absolute; 
    left: 72%; 
    bottom: 183px; 
    width: 100px; 
    height: auto; 
    z-index: 10;
    transition: bottom 20s cubic-bezier(0.22, 1, 0.36, 1), left 4s ease-in-out, width 4s ease-in-out;
    animation: rocket-hover 3s ease-in-out infinite;
}

/* Kombinierte Keyframes: Hält die Rakete mittig (-50%) UND lässt sie schweben */
@keyframes rocket-hover {
    0% { transform: translateX(-50%) translateY(0px); }
    50% { transform: translateX(-50%) translateY(-6px); }
    100% { transform: translateX(-50%) translateY(0px); }
}

#rocket-sprite {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.6)) 
            drop-shadow(0px 0px 15px rgba(0, 240, 255, 0.2));
}

#exhaust {
    position: absolute; 
    top: 90%; /* Hängt den Strahl fest an die Düse */
    bottom: auto !important; /* FIX: Blockiert alte bottom-Befehle aus JS oder CSS komplett */
    left: 50%; 
    transform: translateX(-50%); 
    width: 14px; 
    height: 0px; 
    background: linear-gradient(to bottom, #00F0FF, transparent);
    border-radius: 50px; 
    opacity: 0.9; 
    transition: height 0.2s ease; /* Bleibt bei der schnellen 0.2s Zündung */
    z-index: -1; 
}

/* --- 5. HUD & KONSOLE (Glassmorphism-Design verkleinert) --- */
.hud-container { position: absolute; top: 25px; z-index: 20; }
#hud-left { left: 25px; }
#hud-right { right: 25px; }

.hud-panel {
    max-width: 200px; /* Blockiert das Ausdehnen nach links in die Mitte */
    background: rgba(10, 25, 48, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 240, 255, 0.2); border-radius: 6px; 
    padding: 6px 12px; /* Von 12px 20px deutlich verschlankt */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

.hud-label {
    font-family: 'Rajdhani', sans-serif; font-size: 9px; /* Von 11px auf 10px */
    font-weight: 700; color: #8B9BB4; letter-spacing: 1.5px; margin-bottom: 2px;
}

#altitude-display, #timer-display {
    font-family: 'Orbitron', sans-serif; 
    font-size: 16px; /* Von 28px auf 20px reduziert */
    font-weight: 900; color: #fff; text-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

.unit { font-size: 11px; color: #00F0FF; }

#status-message { 
    font-family: 'Orbitron', sans-serif; 
    font-size: 9px; /* Von 14px auf 11px reduziert */
    color: #00F0FF; 
    margin-top: 6px !important;
    
    white-space: normal; 
    line-height: 1.5; /* Gibt dem mehrzeiligen Text etwas Luft zum Atmen */
    word-wrap: break-word;
}
#hud-left .hud-panel { border-left: 3px solid #00F0FF; }
.status-panel { border-right: 3px solid #00F0FF; text-align: right; }

.hud-label {
    font-family: 'Rajdhani', sans-serif; font-size: 11px; /* Kleinerer Label-Text */
    font-weight: 700; color: #8B9BB4; letter-spacing: 1.5px; margin-bottom: 3px;
}
#altitude-display {
    font-family: 'Orbitron', sans-serif; 
    font-size: 28px; /* Von 42px auf 28px verkleinert */
    font-weight: 900; color: #fff; text-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}
.unit { font-size: 14px; color: #00F0FF; }
#status-message { font-family: 'Orbitron', sans-serif; font-size: 14px; color: #00F0FF; } /* Von 18px verkleinert */

#command-console {
    position: absolute; bottom: 0; left: 0; width: 100vw;
    background: rgba(2, 4, 10, 0.85); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 240, 255, 0.3); 
    padding: 12px 30px; /* Konsole schlanker gemacht */
    z-index: 20;
}
/* --- OPTION 1: TOP-CENTER BOARD (Kompakt) --- */
#question-container {
    position: absolute; 
    top: 25px; 
    left: 50%; 
    transform: translateX(-50%);
    background: rgba(10, 25, 48, 0.4); 
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 240, 255, 0.2); border-radius: 6px; 
    padding: 10px 25px; /* Padding reduziert */
    display: flex; align-items: center; justify-content: center; gap: 12px;
    z-index: 20; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    font-family: 'Rajdhani', sans-serif; 
    font-size: 18px; /* Schrift etwas verkleinert */
    font-weight: 700; color: #fff; 
    letter-spacing: 1.5px; text-align: center; 
    white-space: normal; /* Erlaubt dynamische Zeilenumbrüche */
    max-width: 55vw; /* Blockiert das Überlappen mit dem linken/rechten HUD */
}

#question-container .pulse-dot { min-width: 6px; } /* Verhindert, dass der Punkt gestaucht wird */
#command-console { padding: 12px 30px; }
.pulse-dot {
    width: 6px; height: 6px; background: #00FF66; border-radius: 50%;
    box-shadow: 0 0 8px #00FF66; animation: pulse 2s infinite;
}
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

#input-row { display: flex; gap: 15px; align-items: stretch; }
.input-wrapper {
    flex-grow: 1; display: flex; align-items: center; background: rgba(10, 25, 48, 0.6);
    border: 1px solid rgba(0, 240, 255, 0.3); border-radius: 4px; padding: 0 15px;
}
.input-prefix { font-family: 'Orbitron', sans-serif; color: #00F0FF; font-size: 16px; margin-right: 10px; }
input {
    flex-grow: 1; background: transparent; border: none; color: #fff;
    font-size: 15px; /* Eingabetext von 24px auf 18px verkleinert */
    font-family: 'Orbitron', sans-serif; outline: none; height: 35px; /* Feldhöhe reduziert */
}
button {
    background: #00F0FF; color: #02040A; border: none; border-radius: 4px; padding: 0 25px;
    font-size: 14px; font-family: 'Orbitron', sans-serif; font-weight: 900;
    cursor: pointer; transition: 0.2s; text-transform: uppercase;
}
button:hover { background: #fff; box-shadow: 0 0 20px rgba(0, 240, 255, 0.6); }

/* --- 6. GAMEPLAY UI (Timer & Skip Button) --- */
#timer-display {
    font-family: 'Orbitron', sans-serif; 
    font-size: 28px; 
    font-weight: 900; 
    color: #FF5500; 
    text-shadow: 0 0 15px rgba(255, 85, 0, 0.4);
}

/* Wenn die Zeit knapp wird, pulsiert der Timer rot */
.timer-warning {
    color: #FF0044 !important;
    text-shadow: 0 0 20px rgba(255, 0, 68, 0.8) !important;
    animation: timer-pulse 1s infinite;
}
@keyframes timer-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

#skip-btn {
    background: transparent;
    color: #FF5500;
    border: 1px solid #FF5500;
    box-shadow: none;
}
#skip-btn:hover {
    background: #FF5500;
    color: #02040A;
    box-shadow: 0 0 20px rgba(255, 85, 0, 0.6);
}
#skip-btn:disabled {
    border-color: #555; color: #555; cursor: not-allowed;
    background: transparent; box-shadow: none;
}

/* --- 7. MISSION REPORT OVERLAY --- */
#mission-report {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(2, 4, 10, 0.7);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 100;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.5s ease;
}

#mission-report.show {
    opacity: 1;
    pointer-events: all;
}

.report-panel {
    background: rgba(10, 25, 48, 0.8);
    border: 1px solid rgba(0, 240, 255, 0.4);
    border-radius: 8px; padding: 40px 60px;
    text-align: center;
    box-shadow: 0 10px 50px rgba(0,0,0,0.8);
    transform: translateY(30px);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#mission-report.show .report-panel { transform: translateY(0); }

#report-title {
    font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700;
    color: #8B9BB4; letter-spacing: 4px; margin-bottom: 15px;
}

#report-status {
    font-family: 'Orbitron', sans-serif; font-size: 36px; font-weight: 900;
    margin-bottom: 10px; text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.report-score {
    font-family: 'Rajdhani', sans-serif; font-size: 22px; color: #fff;
    margin-bottom: 30px; letter-spacing: 2px;
}
#report-altitude { color: #00F0FF; font-weight: 700; font-size: 32px; }

#restart-btn {
    background: transparent; color: #00F0FF;
    border: 2px solid #00F0FF; padding: 15px 40px;
    font-size: 18px; letter-spacing: 2px;
}
#restart-btn:hover {
    background: #00F0FF; color: #02040A;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
}

/* --- 8. ZONE MARKERS (Sci-Fi Milestones) --- */
.zone-marker {
    position: absolute;
    right: 0; 
    width: 35vw; /* Die Linie geht nur zu 35% in den Bildschirm hinein */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Zwingt den Text nach ganz rechts */
    z-index: 10; /* Liegt optisch über den Planetenbildern */
}

.zone-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #00F0FF;
    letter-spacing: 5px;
    margin-bottom: 6px;
    padding-right: 30px; /* Hält etwas Abstand zum rechten Bildschirmrand */
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
}

.zone-line {
    width: 100%;
    height: 2px;
    /* Der magische Fade-Effekt: Von Cyan (Rechts) zu Unsichtbar (Links) */
    background: linear-gradient(to left, rgba(0, 240, 255, 0.9) 0%, transparent 100%);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

/* Anpassung für das End-Menü */
.report-zone {
    font-family: 'Rajdhani', sans-serif; 
    font-size: 20px; 
    color: #8B9BB4;
    margin-bottom: 30px; 
    letter-spacing: 2px;
}
#report-zone-name {
    color: #00FF66; 
    font-weight: 700;
}

/* --- 9. SUBTLE ERROR FEEDBACK --- */
.input-error {
    animation: input-shake 0.4s ease-in-out;
    border-color: #FF0044 !important;
    box-shadow: 0 0 15px rgba(255, 0, 68, 0.5) !important;
}

@keyframes input-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-3px); }
}

/* --- 10. START SCREEN --- */
#start-screen {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 200; 
    display: flex; justify-content: center; align-items: center;
    transition: opacity 1.5s ease-in-out, visibility 1.5s;
    
    /* NEU: Metallisch-Transparenter Look (Dark Frosted Glass) */
    background: rgba(10, 20, 35, 0.85); /* Dunkler, bläulicher Stahl-Ton */
    backdrop-filter: blur(15px); /* Macht den Hintergrund unscharf */
    -webkit-backdrop-filter: blur(15px);
}

#start-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.start-content {
    display: flex; flex-direction: column; align-items: center; gap: 40px;
    text-align: center;
}

#game-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 7vw; /* Skaliert mit der Bildschirmbreite */
    font-weight: 900;
    color: #fff;
    letter-spacing: 15px;
    margin: 0;
    text-shadow: 0 0 40px rgba(0, 240, 255, 0.4);
}

#game-tagline {
    font-family: 'Rajdhani', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #8B9BB4;
    letter-spacing: 8px;
    margin: 0;
}

#ascend-btn {
    background: transparent;
    color: #00FF66;
    border: 2px solid #00FF66;
    padding: 15px 60px;
    font-size: 22px;
    letter-spacing: 6px;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.2);
    margin-top: 20px;
}

#ascend-btn:hover {
    background: #00FF66;
    color: #02040A;
    box-shadow: 0 0 40px rgba(0, 255, 102, 0.6);
    transform: scale(1.05);
}

/* --- 11. SHARE BUTTON --- */
#share-btn {
    background: transparent;
    color: #00F0FF;
    border: 2px solid #00F0FF;
    padding: 15px 40px;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-top: 15px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
    transition: all 0.3s ease;
}

#share-btn:hover {
    background: #00F0FF;
    color: #02040A;
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.6);
    transform: scale(1.05);
}

/* --- 12. MOBILE OPTIMIZATION (SINGULARITY STYLE) --- */
@media (max-width: 768px) {
    /* 1. Start Screen Titel */
    #game-title { 
        font-size: 10vw !important; 
        letter-spacing: 2px !important; 
    }
    #game-tagline { 
        font-size: 12px !important; 
    }

    /* 2. HUDs: Kompakt in die oberen Ecken */
    #hud-left {
        transform: scale(0.65) !important;
        transform-origin: top left !important;
        top: 10px !important;
        left: 10px !important;
    }
    #hud-right {
        transform: scale(0.65) !important;
        transform-origin: top right !important;
        top: 10px !important;
        right: 10px !important;
        max-width: 140px !important;
    }

    /* 3. Frage-Container: Direkt unter KM-Anzeige, stoppt vor dem Timer */
    #question-container {
        background: rgba(10, 20, 35, 0.6) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(0, 240, 255, 0.3) !important;
        border-radius: 4px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
        
        /* Positionierung: Direkt unter dem linken HUD */
        top: 70px !important; /* Exakt unter die KM-Anzeige gezogen */
        left: 10px !important; /* Bündig mit dem linken Rand */
        transform: none !important;
        
        /* Dynamische Breite und Höhe */
        width: calc(100% - 135px) !important; /* Nimmt maximalen Platz ein, lässt 135px für das rechte HUD frei */
        max-width: none !important; 
        height: auto !important; /* Wächst bei langen Fragen automatisch nach unten */
        min-height: 35px !important;
        
        padding: 8px 12px !important;
        display: flex !important;
        align-items: center !important; /* Zentriert Text und Punkt vertikal */
        justify-content: flex-start !important;
    }
    
    .pulse-dot {
        margin-right: 8px !important;
        flex-shrink: 0 !important;
        width: 6px !important;
        height: 6px !important;
    }
    
    #question-display {
        font-size: 10px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        text-align: left !important;
    }

    /* 4. Konsole unten (Sauber und ohne Doppel-Rechteck) */
    #command-console {
        bottom: 0 !important;
        width: 100% !important;
        padding: 8px !important; 
        background: rgba(2, 4, 10, 0.95) !important;
        border-top: 1px solid rgba(0, 240, 255, 0.5) !important;
    }
    
    #input-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        height: 40px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        gap: 6px !important; 
    }

    .input-prefix {
        display: none !important;
    }

    .input-wrapper {
        flex: 1 1 auto !important; 
        margin: 0 !important;
        height: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    #answer-input {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        font-size: 16px !important;
        padding: 0 8px !important;
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        text-align: left !important;
        outline: none !important;
    }

    #answer-input::placeholder {
        font-size: 10px !important; 
        letter-spacing: 1px !important;
    }

    .button-container-mobile {
        display: flex !important;
        flex: 0 0 auto !important;
        gap: 6px !important;
    }

    #skip-btn, #launch-btn {
        height: 100% !important;
        margin: 0 !important;
        border-radius: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
    
    #skip-btn {
        padding: 0 6px !important;
        font-size: 9px !important;
        border: 1px solid rgba(255, 85, 0, 0.5) !important;
        color: #FF5500 !important;
    }
    
    #launch-btn {
        padding: 0 8px !important;
        font-size: 10px !important;
        border: 1px solid rgba(0, 240, 255, 0.8) !important;
        background: rgba(0, 240, 255, 0.1) !important;
        color: #00F0FF !important;
    }

    /* 5. Rakete für Mobile (Erlaubt die Flug-Animation!) */
    #rocket {
        /* 1. Größe zwingend für Handys anpassen */
        width: 12vw !important; 
        height: auto !important; 
        
        /* 2. Startposition auf der Rampe (WICHTIG: OHNE !important!) 
           Dadurch kann dein Spiel/JavaScript diese Werte im Flug verändern. */
        bottom: 55px; /* Diesen Wert anpassen, bis sie vertikal auf der Rampe aufsetzt */
        
        /* Falls sie horizontal noch nicht perfekt auf der Rampe steht, 
           kannst du sie hier verschieben (ebenfalls ohne !important): */
        /* right: 20%; */ 
    }

    /* 6. Startbildschirm Mobile-Fix */
    #start-screen .start-content {
        gap: 25px !important; /* Abstand zwischen den Elementen verringern */
        padding: 0 15px !important; /* Verhindert, dass Elemente den Rand berühren */
    }
    #game-title { 
        font-size: 8.5vw !important; /* Skaliert sich automatisch perfekt zur Bildschirmbreite */
        letter-spacing: 2px !important; 
        line-height: 1.2 !important; /* Falls das Wort umbricht, klebt es nicht aneinander */
        white-space: nowrap !important;
    }
    #game-tagline { 
        font-size: 11px !important; 
        letter-spacing: 2px !important; 
    }
    #ascend-btn {
        padding: 10px 40px !important;
        font-size: 16px !important;
        letter-spacing: 4px !important;
    }

    /* 7. Mission Report Overlay Mobile-Fix */
    .report-panel {
        padding: 20px 15px !important; /* Deutlich kompakter als am Desktop (vorher 40px 60px) */
        width: 90% !important; /* Nimmt 90% der Bildschirmbreite ein */
        max-width: 320px !important;
        border-radius: 6px !important;
    }
    #report-title {
        font-size: 12px !important;
        letter-spacing: 2px !important;
        margin-bottom: 10px !important;
    }
    #report-status {
        font-size: 24px !important; /* Von 36px stark reduziert */
        margin-bottom: 5px !important;
    }
    .report-score {
        font-size: 16px !important; /* Von 22px reduziert */
        margin-bottom: 15px !important;
    }
    #report-altitude {
        font-size: 24px !important; /* Von 32px reduziert */
    }
    .report-zone {
        font-size: 14px !important; /* Von 20px reduziert */
        margin-bottom: 20px !important;
    }
    
    /* Endbildschirm-Buttons skalieren und nebeneinander/kompakt stapeln */
    #restart-btn, #share-btn {
        width: 100% !important; /* Beide Buttons nehmen die volle Panel-Breite ein */
        padding: 12px 0 !important;
        font-size: 14px !important;
        letter-spacing: 1px !important;
        margin: 5px 0 !important; /* Kleiner Abstand zwischen den Buttons */
    }
}

/* --- 13. GAME FEEL: SCREEN SHAKE & PARTICLES --- */

/* Der unsichtbare Behälter am Fuß der Rakete */
#particle-container {
    position: absolute;
    top: 90%; 
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 10px;
    z-index: -2; /* Hinter dem normalen Triebwerksstrahl */
}

/* Die Grundform der Funken (Bewegung und Farbe kommen über JavaScript) */
.particle {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    pointer-events: none; /* Blockiert keine Klicks */
    z-index: -2;
}

/* --- 14. THE SINGULARITY EFFECTS --- */

/* Der unwiderstehliche Sog ins Schwarze Loch */
@keyframes event-horizon-pull {
    0% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 1; filter: blur(0px); }
    /* Zieht sie nur noch minimal nach oben (20px) für einen Ruck-Effekt */
    40% { transform: translateX(-50%) translateY(-20px) scale(0.6) rotate(180deg); opacity: 0.8; filter: blur(1px); }
    /* Fällt exakt in der Mitte auf Größe 0 zusammen */
    100% { transform: translateX(-50%) translateY(0px) scale(0) rotate(1080deg); opacity: 0; filter: blur(4px); }
}

.sucked-in {
    /* Überschreibt die normale Hover-Animation zwingend */
    animation: event-horizon-pull 4s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards !important;
}

/* Der visuelle Zusammenbruch der Bordsysteme */
@keyframes hud-glitch {
    0% { transform: translate(0); opacity: 1; filter: drop-shadow(0 0 0 transparent); }
    20% { transform: translate(-2px, 1px); opacity: 0.8; color: #FF0044; }
    40% { transform: translate(2px, -1px); opacity: 1; text-shadow: 2px 0 #FF0044, -2px 0 #00F0FF; }
    60% { transform: translate(-1px, 2px); opacity: 0.9; }
    80% { transform: translate(1px, -2px); opacity: 1; color: #fff; }
    100% { transform: translate(0); opacity: 1; }
}

.system-failure {
    animation: hud-glitch 0.2s infinite !important;
    border-color: #FF0044 !important;
}

/* --- 15. THE EVENT HORIZON STRUGGLE --- */

/* Die Kommandozentrale bebt */
@keyframes hud-panic {
    0% { transform: translate(2px, 1px) rotate(0deg); }
    20% { transform: translate(-3px, -2px) rotate(-1deg); border-color: #FF5500; }
    40% { transform: translate(3px, 2px) rotate(1deg); }
    60% { transform: translate(-2px, -1px) rotate(0deg); }
    80% { transform: translate(2px, 2px) rotate(-1deg); border-color: #FF0044; }
    100% { transform: translate(-1px, -2px) rotate(1deg); }
}
.hud-panic {
    animation: hud-panic 0.2s infinite;
}

/* Die Rakete kämpft gegen den Sog (Spurenwechsel / Turbulenz) */
@keyframes rocket-turbulence {
    0% { transform: translateX(-50%) rotate(0deg); }
    20% { transform: translateX(-90%) rotate(-8deg); }
    40% { transform: translateX(-10%) rotate(8deg); }
    60% { transform: translateX(-70%) rotate(-4deg); }
    80% { transform: translateX(-30%) rotate(4deg); }
    100% { transform: translateX(-50%) rotate(0deg); }
}
.turbulence {
    animation: rocket-turbulence 0.4s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

/* Der finale Fall ins Zentrum */
.sucked-in {
    animation: final-pull 2.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards !important;
}
@keyframes final-pull {
    0% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 1; filter: blur(0px); }
    30% { transform: translateX(-50%) translateY(-10px) scale(0.6) rotate(180deg); opacity: 0.8; }
    100% { transform: translateX(-50%) translateY(0) scale(0) rotate(1080deg); opacity: 0; filter: blur(5px); }
}