/* Blutflecken-Fläche /
#blood-canvas-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/ --- Glitcheffekte --- /

/ Bildschirmwackeln /
body.glitch-active {
    animation: screen-shake 0.15s infinite;
}

/ Färbt den Bildschirm rot ein/
.glitch-flash {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 9997;
    display: none;
    background-color: rgba(189, 10, 10, 0.15); 
}
body.glitch-active .glitch-flash {
    display: block;
}

/ Störungsbalken /
.glitch-bar {
    position: fixed; left: 0; width: 100%; pointer-events: none;
    z-index: 9999;
    display: none;

    / Schwarz-Rot-Verlauf im Balken /
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.4) 0%, 
        var(--neon-red) 15%, 
        #000000 50%, 
        var(--neon-red) 85%, 
        rgba(0, 0, 0, 0.4) 100%
    );
    / Leuchteffekt nach außen, dunkler Schatten nach innen /
    box-shadow: 0 0 25px var(--neon-red), inset 0 0 15px #000000;
}

/ Flackern der Störungsbalken /
body.glitch-active .glitch-bar {
    display: block;
    animation: bar-flicker 0.08s infinite;
}

/ Animation: Flackern der Störungsbalken /
@keyframes bar-flicker {
    0% { filter: brightness(150%) contrast(150%); transform: scaleY(1); }
    50% { filter: brightness(40%) contrast(90%); transform: scaleY(1.3); }
    100% { filter: brightness(180%) contrast(160%); transform: scaleY(0.8); }
}

/ Animation: Bildschirmwackeln */
@keyframes screen-shake {
    0% { transform: translate(0, 0) skewX(0deg); }
    20% { transform: translate(-8px, 5px) skewX(-3deg); filter: hue-rotate(10deg); } 
    40% { transform: translate(6px, -4px) skewX(4deg); }
    60% { transform: translate(-5px, -2px) skewX(-1deg); filter: brightness(1.3); } 
    80% { transform: translate(7px, 6px) skewX(2deg); }
    100% { transform: translate(0, 0) skewX(0deg); }
}