:root {
    --p: #00ff41; /* Primärfarbe (Neon Green) */
    --bg: #030408;
    --pulse-col: #00ff41;
}

body {
    background-color: var(--bg);
    color: #e2e8f0;
    font-family: 'Rajdhani', sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
    /* Optional: Hintergrundbild Pfad anpassen */
    background-image: url('../assets/bg.png'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transition: filter 2s ease;
}

/* --- BASE FX --- */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(15px); z-index: -1; }
.scanlines { position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,0.3) 1px, rgba(0,0,0,0.3) 2px); pointer-events: none; z-index: 50; }

/* --- PANELS --- */
.panel {
    background: rgba(10, 15, 20, 0.5);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 2px solid var(--p);
    box-shadow: 0 25px 50px rgba(0,0,0,0.8);
    border-radius: 4px;
    position: relative;
    z-index: 10;
    transition: 0.4s;
}

/* --- NEW: GLITCH EFFECT (Kurzzeitiger Schock) --- */
.glitch-effect {
    animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    filter: contrast(1.5) brightness(1.2) sepia(1) hue-rotate(-50deg);
}

@keyframes shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* --- NEW: TOXIC STATE (Langzeit Kater) --- */
body.state-toxic::after {
    content: "";
    position: fixed; inset: 0;
    background: radial-gradient(circle, transparent 60%, rgba(255, 0, 60, 0.15));
    pointer-events: none; z-index: 90;
    backdrop-filter: blur(1px);
    animation: pulse-toxic 4s infinite ease-in-out;
}

body.state-toxic .panel {
    border-color: #501010 !important;
    box-shadow: 0 0 15px rgba(255, 0, 60, 0.1);
}

/* Gesundes Grün wird grau im Toxic State */
body.state-toxic .text-neon-green {
    color: #a0a0a0 !important;
    text-shadow: none;
}

@keyframes pulse-toxic {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* --- NEW: INTEGRITY BAR (Flackern bei Instabilität) --- */
.integrity-critical {
    background-color: #ff003c !important;
    box-shadow: 0 0 15px #ff003c !important;
    animation: bar-flicker 0.1s infinite;
}

@keyframes bar-flicker {
    0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; }
}

/* --- SCANNER --- */
.hologram-stage { position: relative; height: 480px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.scanner-bar { 
    position: absolute; left: 0; width: 100%; height: 2px; 
    background: var(--p); box-shadow: 0 0 15px var(--p), 0 0 30px var(--p);
    z-index: 20; animation: scanner 5s linear infinite;
}
.body-render { height: 90%; filter: drop-shadow(0 0 10px var(--p)); transition: 1s ease; opacity: 0.85; }
.heart-pulse { animation: heartbeat 3s infinite ease-in-out; }

/* --- BUTTONS --- */
.btn-monolith {
    background: rgba(0,255,65,0.05);
    border: 1px solid var(--p); color: var(--p);
    font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase;
    letter-spacing: 3px; cursor: pointer; transition: 0.3s;
}
.btn-monolith:hover { background: var(--p); color: #000; box-shadow: 0 0 30px var(--p); }

/* --- UI HELPERS --- */
.ticker-wrap { position: fixed; bottom: 0; left: 0; width: 100%; background: #000; border-top: 1px solid var(--p); height: 40px; z-index: 1000; overflow: hidden; display: flex; align-items: center; }
.ticker-content { white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--p); animation: ticker 45s linear infinite; font-weight: bold; }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.96); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: 0.4s; }
.modal-bg.active { opacity: 1; pointer-events: all; }
.repair-item { border-left: 3px solid #1a1a1a; padding-left: 12px; margin-bottom: 12px; transition: 0.8s; opacity: 0.2; }
.repair-active { border-left-color: var(--p); opacity: 1; color: var(--p); text-shadow: 0 0 5px var(--p); }

/* --- KEYFRAMES --- */
@keyframes scanner { 0% { top: 0%; } 100% { top: 100%; } }
@keyframes ticker { 0% { transform: translateX(100%); } 100% { transform: translateX(-200%); } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }