@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono:wght@400&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #00ff00;
    --secondary-color: #003300;
    --accent-color: #00aa00;
}

body {
    background: #000;
    font-family: 'Share Tech Mono', monospace;
    color: var(--primary-color);
    overflow: hidden;
    height: 100vh;
    background-image: 
        radial-gradient(circle at 25% 25%, var(--secondary-color) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, var(--secondary-color) 0%, transparent 50%),
        linear-gradient(90deg, transparent 50%, rgba(0, 255, 0, 0.03) 50%);
    background-size: 100px 100px, 150px 150px, 2px 2px;
    animation: backgroundShift 20s infinite linear;
}

@keyframes backgroundShift {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 100px 100px, -150px -150px, 2px 2px; }
}

#terminal {
    width: 95vw;
    height: 95vh;
    margin: 2.5vh auto;
    background: rgba(0, 20, 0, 0.9);
    border: 3px solid var(--primary-color);
    border-radius: 0;
    box-shadow: 
        0 0 50px var(--primary-color),
        inset 0 0 50px rgba(0, 255, 0, 0.1);
    backdrop-filter: blur(2px);
    position: relative;
    overflow: hidden;
}

#terminal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 255, 0, 0.03) 2px,
            rgba(0, 255, 0, 0.03) 4px
        );
    pointer-events: none;
    animation: scanlines 2s infinite linear;
}

@keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

.terminal-header {
    background: #003300;
    padding: 8px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #00ff00;
    text-transform: uppercase;
    font-weight: bold;
}

.terminal-title {
    color: #ff0000;
    text-shadow: 0 0 10px #ff0000;
    animation: titleGlitch 3s infinite;
}

@keyframes titleGlitch {
    0%, 98% { text-shadow: 0 0 10px #ff0000; }
    99% { text-shadow: -2px 0 #ff0000, 2px 0 #00ffff; }
}

.terminal-controls {
    display: flex;
    gap: 10px;
}

.terminal-controls span {
    background: #002200;
    padding: 2px 8px;
    border: 1px solid #00ff00;
    cursor: pointer;
    transition: all 0.2s;
}

.terminal-controls span:hover {
    background: #00ff00;
    color: #000;
}

.terminal-body {
    height: calc(100% - 50px);
    padding: 20px;
    position: relative;
}

.boot-sequence {
    font-size: 14px;
    line-height: 1.8;
}

.boot-line {
    margin: 5px 0;
    opacity: 0;
    transform: translateX(-20px);
    animation: bootLine 1s forwards;
}

.boot-line:nth-child(1) { animation-delay: 0.5s; }
.boot-line:nth-child(2) { animation-delay: 1.5s; }
.boot-line:nth-child(3) { animation-delay: 2.5s; }
.boot-line:nth-child(4) { 
    animation-delay: 3.5s;
    color: #ff0000;
    text-shadow: 0 0 10px #ff0000;
}

@keyframes bootLine {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.main-interface {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ascii-art {
    text-align: center;
    margin-bottom: 20px;
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00;
    animation: pulse 2s infinite;
}

.ascii-art pre {
    font-size: 8px;
    line-height: 1;
    margin: 0;
    color: inherit;
    text-shadow: inherit;
    font-family: inherit;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.status-bar {
    display: flex;
    justify-content: space-between;
    background: #001100;
    border: 1px solid #00ff00;
    padding: 8px 15px;
    margin-bottom: 20px;
    font-size: 12px;
}

.status-item {
    position: relative;
}

.command-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.output-area {
    flex: 1;
    background: #000a00;
    border: 1px solid #00ff00;
    padding: 15px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 15px;
    max-height: 300px;
    min-height: 200px;
}

.output-line {
    margin: 3px 0;
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}

.output-line:nth-child(1) { animation-delay: 4.5s; }
.output-line:nth-child(2) { animation-delay: 4.8s; }
.output-line:nth-child(3) { animation-delay: 5.1s; }

@keyframes fadeIn {
    to { opacity: 1; }
}

.input-area {
    display: flex;
    align-items: center;
    background: #000a00;
    border: 1px solid #00ff00;
    padding: 10px 15px;
    font-size: 14px;
}

.prompt {
    color: #ffff00;
    margin-right: 10px;
    text-shadow: 0 0 5px #ffff00;
}

#commandInput {
    background: transparent;
    border: none;
    color: #00ff00;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    flex: 1;
    margin-right: 5px;
}

.cursor {
    color: #00ff00;
}

.blink {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.system-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.info-block {
    background: #001a00;
    border: 1px solid #00ff00;
    padding: 15px;
}

.info-block h3 {
    color: #ffff00;
    margin-bottom: 10px;
    text-shadow: 0 0 5px #ffff00;
    font-size: 12px;
}

.matrix-text {
    font-size: 10px;
    line-height: 1.2;
    height: 80px;
    overflow: hidden;
}

.breach-log {
    font-size: 11px;
}

.log-entry {
    margin: 3px 0;
    color: #ff6600;
    text-shadow: 0 0 3px #ff6600;
}

.glitch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
        linear-gradient(90deg, transparent 50%, rgba(255, 0, 0, 0.01) 50%),
        linear-gradient(0deg, transparent 50%, rgba(0, 255, 0, 0.01) 50%);
    background-size: 3px 3px, 5px 5px;
    animation: glitchMove 0.2s infinite linear;
    opacity: 0;
}

@keyframes glitchMove {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 1px); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, -1px); }
    100% { transform: translate(1px, 1px); }
}

.glitch-active {
    animation: glitchFlash 0.1s infinite;
}

@keyframes glitchFlash {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.1; }
}

/* Brutal accent colors */
.error-text { color: #ff0000; text-shadow: 0 0 10px #ff0000; }
.warning-text { color: #ffff00; text-shadow: 0 0 10px #ffff00; }
.success-text { color: #00ff00; text-shadow: 0 0 10px #00ff00; }
.info-text { color: #00ffff; text-shadow: 0 0 10px #00ffff; }

/* Glitter Effects */
.glitter-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.glitter-particle {
    position: absolute;
    top: -50px;
    animation: glitterFall 4s linear forwards;
    text-shadow: 0 0 10px currentColor;
    filter: drop-shadow(0 0 5px currentColor);
}

@keyframes glitterFall {
    0% {
        transform: translateY(-50px) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg) scale(0.5);
        opacity: 0;
    }
}

/* Enhanced glitch effects */
body.background-glitch {
    animation: backgroundGlitch 0.5s ease-in-out;
}

@keyframes backgroundGlitch {
    0% { filter: hue-rotate(0deg) saturate(1); }
    25% { filter: hue-rotate(90deg) saturate(2); }
    50% { filter: hue-rotate(180deg) saturate(0.5); }
    75% { filter: hue-rotate(270deg) saturate(2); }
    100% { filter: hue-rotate(360deg) saturate(1); }
}

/* Poetry Animation: Glitter in the Cables, Glitch in the Heart */
.cable-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 8888;
}

.cable-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #00ff00 20%,
        #00ff00 80%,
        transparent 100%
    );
    box-shadow: 0 0 10px #00ff00;
    animation: cableGlow 2s ease-in-out infinite alternate;
    opacity: 0;
    animation: cableAppear 0.5s ease-out forwards;
}

@keyframes cableAppear {
    from { 
        opacity: 0;
        transform: scaleX(0);
    }
    to { 
        opacity: 0.8;
        transform: scaleX(1);
    }
}

@keyframes cableGlow {
    0% { box-shadow: 0 0 5px #00ff00; }
    100% { box-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00; }
}

.cable-glitter {
    position: absolute;
    font-size: 12px;
    color: #ffd700;
    text-shadow: 0 0 10px currentColor;
    animation: glitterFlow 2s linear forwards;
    z-index: 8889;
}

@keyframes glitterFlow {
    0% {
        left: -20px;
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
        transform: scale(1.5) rotate(360deg);
    }
}

.heart-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9000;
    pointer-events: none;
}

.glitch-heart {
    font-size: 60px;
    position: relative;
    animation: heartPulse 0.8s ease-in-out infinite;
}

.glitch-heart-copy {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 60px;
    animation: heartGlitch 0.3s ease-in-out infinite;
}

.glitch-copy-0 {
    animation-delay: 0s;
    transform: translate(-3px, 0);
}

.glitch-copy-1 {
    animation-delay: 0.1s;
    transform: translate(3px, -2px);
}

.glitch-copy-2 {
    animation-delay: 0.2s;
    transform: translate(-2px, 2px);
}

@keyframes heartPulse {
    0%, 100% { 
        transform: scale(1);
        filter: hue-rotate(0deg);
    }
    50% { 
        transform: scale(1.1);
        filter: hue-rotate(30deg);
    }
}

@keyframes heartGlitch {
    0% { 
        opacity: 0.8;
        transform: translate(0, 0) scale(1);
    }
    25% { 
        opacity: 0.4;
        transform: translate(-5px, 2px) scale(0.95);
    }
    50% { 
        opacity: 0.6;
        transform: translate(3px, -3px) scale(1.05);
    }
    75% { 
        opacity: 0.3;
        transform: translate(-2px, -1px) scale(0.98);
    }
    100% { 
        opacity: 0.8;
        transform: translate(0, 0) scale(1);
    }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #000;
    border: 1px solid #00ff00;
}

::-webkit-scrollbar-thumb {
    background: #003300;
    border: 1px solid #00ff00;
}

::-webkit-scrollbar-thumb:hover {
    background: #00ff00;
}

/* Particle Trails */
.particle-trail {
    position: fixed;
    pointer-events: none;
    color: var(--primary-color);
    font-size: 10px;
    opacity: 0.8;
    z-index: 1000;
    text-shadow: 0 0 5px var(--primary-color);
    animation: particleTrailFade 3s ease-out forwards;
}

@keyframes particleTrailFade {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* Special Particle Effects */
@keyframes specialParticle {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.1) rotate(720deg) translateY(-100px);
    }
}

/* Brutalist Effects */
.geometric-overlay {
    position: fixed;
    background: var(--primary-color);
    opacity: 0.1;
    pointer-events: none;
    z-index: 2000;
    animation: geometricFlash 1s ease-out forwards;
    border: 2px solid var(--primary-color);
}

@keyframes geometricFlash {
    0% {
        opacity: 0.3;
        transform: scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 0.1;
        transform: scale(1) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(1.5) rotate(360deg);
    }
}

.text-glitch {
    animation: textGlitch 0.5s ease-in-out;
}

@keyframes textGlitch {
    0% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
    20% {
        transform: translate(-2px, 2px);
        filter: hue-rotate(90deg);
    }
    40% {
        transform: translate(-2px, -2px);
        filter: hue-rotate(180deg);
    }
    60% {
        transform: translate(2px, 2px);
        filter: hue-rotate(270deg);
    }
    80% {
        transform: translate(2px, -2px);
        filter: hue-rotate(360deg);
    }
    100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
}

.system-warning {
    position: fixed;
    background: rgba(255, 0, 0, 0.8);
    color: #fff;
    padding: 10px 20px;
    border: 2px solid #ff0000;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    z-index: 9999;
    animation: warningFlash 3s ease-in-out forwards;
    text-shadow: 0 0 10px #ff0000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    pointer-events: none;
}

@keyframes warningFlash {
    0%, 100% { opacity: 1; }
    10%, 30%, 50%, 70%, 90% { opacity: 0.7; }
    20%, 40%, 60%, 80% { opacity: 1; }
}

.brutalist-shape {
    position: fixed;
    background: var(--primary-color);
    opacity: 0.2;
    pointer-events: none;
    z-index: 1500;
    animation: brutalShape 2s ease-out forwards;
}

.shape-rectangle {
    width: 100px;
    height: 60px;
    border: 3px solid var(--primary-color);
}

.shape-triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 80px solid var(--primary-color);
    background: transparent;
}

.shape-line {
    width: 150px;
    height: 4px;
    background: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
}

@keyframes brutalShape {
    0% {
        opacity: 0.4;
        transform: scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 0.2;
        transform: scale(1) rotate(90deg);
    }
    100% {
        opacity: 0;
        transform: scale(1.2) rotate(180deg);
    }
}

/* Enhanced Terminal Elements */
.terminal-header {
    background: var(--secondary-color);
    border-bottom: 2px solid var(--primary-color);
}

.status-bar {
    border: 1px solid var(--primary-color);
    background: var(--secondary-color);
}

.output-area, .input-area, .info-block {
    border: 1px solid var(--primary-color);
}

.ascii-art, .terminal-title, .success-text {
    text-shadow: 0 0 10px var(--primary-color);
}

/* Theme-aware glows */
.success-text {
    color: var(--primary-color);
    text-shadow: 0 0 10px var(--primary-color);
}

/* Additional brutalist touches */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(45deg, transparent 48%, var(--primary-color) 49%, var(--primary-color) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, var(--primary-color) 49%, var(--primary-color) 51%, transparent 52%);
    background-size: 20px 20px, 25px 25px;
    opacity: 0.02;
    pointer-events: none;
    z-index: 1;
    animation: brutalistPattern 30s linear infinite;
}

@keyframes brutalistPattern {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 20px 20px, -25px 25px; }
}

/* VISUAL MADNESS EFFECTS */

/* Screen Shake */
.screen-shake {
    animation: screenShake 1s ease-in-out;
}

@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-10px); }
    20% { transform: translateX(10px); }
    30% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    50% { transform: translateX(-6px); }
    60% { transform: translateX(6px); }
    70% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
    90% { transform: translateX(-2px); }
}

/* CRT Monitor Effects */
.crt-monitor {
    filter: contrast(1.2) brightness(1.1);
}

.crt-monitor::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
    z-index: 10000;
}

.crt-monitor #terminal {
    border-radius: 20px / 30px;
    transform: perspective(1000px) rotateX(0.5deg);
}

/* Realistic Moving Scanlines */
.realistic-scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 255, 0, 0.05) 2px,
            rgba(0, 255, 0, 0.05) 4px
        );
    pointer-events: none;
    z-index: 5000;
    animation: realisticScanlines 3s infinite linear;
}

@keyframes realisticScanlines {
    0% { transform: translateY(0px); }
    100% { transform: translateY(8px); }
}

/* Neon Underglow Pulse */
.neon-pulse {
    box-shadow: 
        0 0 50px var(--primary-color),
        0 0 100px var(--primary-color),
        0 0 150px var(--primary-color),
        inset 0 0 50px rgba(0, 255, 0, 0.1) !important;
}

/* Matrix Rain Background */
.matrix-rain-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

.matrix-column {
    position: absolute;
    top: -100px;
    display: flex;
    flex-direction: column;
    animation: matrixFall linear;
}

@keyframes matrixFall {
    0% { transform: translateY(-100px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

.matrix-char {
    color: var(--primary-color);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    text-shadow: 0 0 5px var(--primary-color);
    opacity: 0;
    animation: matrixCharFade 0.5s ease-in-out forwards;
}

@keyframes matrixCharFade {
    0% { opacity: 0; }
    100% { opacity: 0.8; }
}

/* Corruption Effects */
.corrupted-text {
    color: #ff0066 !important;
    text-shadow: 
        -1px 0 #00ffff, 
        1px 0 #ff0000,
        0 0 10px #ff0066 !important;
    animation: corruptionGlitch 0.3s infinite;
}

@keyframes corruptionGlitch {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.bitmap-corruption {
    position: fixed;
    background: repeating-linear-gradient(
        45deg,
        #ff0066,
        #ff0066 2px,
        #00ffff 2px,
        #00ffff 4px,
        #ffff00 4px,
        #ffff00 6px
    );
    opacity: 0.7;
    pointer-events: none;
    z-index: 8000;
    animation: bitmapCorruption 3s ease-out forwards;
    filter: blur(1px);
    mix-blend-mode: difference;
}

@keyframes bitmapCorruption {
    0% {
        opacity: 0.8;
        filter: blur(0px);
    }
    50% {
        opacity: 0.4;
        filter: blur(3px);
    }
    100% {
        opacity: 0;
        filter: blur(5px);
    }
}

/* Geometric Masks */
.geometric-mask {
    position: fixed;
    background: #000;
    z-index: 9000;
    pointer-events: none;
    animation: geometricMaskSlice 1s ease-out forwards;
    border: 2px solid var(--primary-color);
    box-shadow: 
        0 0 20px var(--primary-color),
        inset 0 0 20px var(--primary-color);
}

@keyframes geometricMaskSlice {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    20% {
        opacity: 0.9;
        transform: scale(1);
    }
    80% {
        opacity: 0.9;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

/* Enhanced Glitch Effects */
#terminal.glitch-active {
    animation: terminalGlitch 0.5s ease-in-out;
}

@keyframes terminalGlitch {
    0%, 100% { 
        transform: translateX(0) scale(1);
        filter: hue-rotate(0deg);
    }
    20% { 
        transform: translateX(-5px) scale(0.98);
        filter: hue-rotate(90deg);
    }
    40% { 
        transform: translateX(5px) scale(1.02);
        filter: hue-rotate(180deg);
    }
    60% { 
        transform: translateX(-3px) scale(0.99);
        filter: hue-rotate(270deg);
    }
    80% { 
        transform: translateX(3px) scale(1.01);
        filter: hue-rotate(360deg);
    }
}

/* Typography Corruption */
.text-corruption-active {
    animation: textCorruption 2s ease-in-out infinite;
}

@keyframes textCorruption {
    0%, 100% { 
        filter: none;
        transform: translateX(0);
    }
    10% { 
        filter: blur(1px) contrast(200%);
        transform: translateX(-2px);
    }
    20% { 
        filter: blur(0px) contrast(150%) hue-rotate(90deg);
        transform: translateX(2px);
    }
    30% { 
        filter: blur(2px) contrast(100%);
        transform: translateX(-1px);
    }
    40% { 
        filter: blur(0px) contrast(180%) hue-rotate(180deg);
        transform: translateX(1px);
    }
}

/* Typewriter Effect Enhancements */
.typewriter-cursor {
    animation: typewriterCursor 1s infinite;
}

@keyframes typewriterCursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Phosphor Glow Effects */
.terminal-header, .status-bar, .output-area, .input-area {
    box-shadow: 
        0 0 10px rgba(0, 255, 0, 0.3),
        inset 0 0 10px rgba(0, 255, 0, 0.1);
}

/* Advanced Brutalist Overlays */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 0, 0, 0.02) 25%,
            transparent 50%,
            rgba(0, 255, 255, 0.02) 75%,
            transparent 100%
        );
    pointer-events: none;
    z-index: 50;
    animation: colorShift 10s infinite alternate;
}

@keyframes colorShift {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* Industrial Noise Simulation */
body.industrial-noise::before {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.01) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.01) 0%, transparent 50%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/><feColorMatrix in="SourceGraphic" type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.02"/></svg>');
}

/* SYSTEM CRASH AND REBOOT EFFECTS */

/* Blue Screen of Death */
.blue-screen-crash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0052CC;
    color: white;
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    padding: 50px;
    z-index: 99999;
    box-sizing: border-box;
    overflow: hidden;
    animation: blueScreenFlicker 0.5s ease-in;
}

@keyframes blueScreenFlicker {
    0% { 
        opacity: 0;
        background: #000;
    }
    20% { 
        opacity: 0.5;
        background: #002266;
    }
    50% { 
        opacity: 0.8;
        background: #0033AA;
    }
    100% { 
        opacity: 1;
        background: #0052CC;
    }
}

.crash-message {
    margin: 8px 0;
    animation: crashMessageAppear 0.3s ease-out forwards;
    opacity: 0;
}

@keyframes crashMessageAppear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.crash-progress {
    margin-top: 50px;
    width: 300px;
}

.progress-bar {
    width: 0%;
    height: 20px;
    background: white;
    border: 2px solid #333;
    transition: width 0.3s ease;
    position: relative;
}

.progress-text {
    margin-top: 10px;
    font-size: 12px;
}

/* Reboot Sequence */
.reboot-sequence {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    color: #00AA00;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    padding: 30px;
    z-index: 99999;
    box-sizing: border-box;
    overflow: hidden;
    animation: rebootStart 1s ease-in;
}

@keyframes rebootStart {
    0% { 
        opacity: 0;
        background: #0052CC;
    }
    50% { 
        opacity: 0.5;
        background: #000033;
    }
    100% { 
        opacity: 1;
        background: #000;
    }
}

.boot-message {
    margin: 5px 0;
    animation: bootMessageAppear 0.4s ease-out forwards;
    opacity: 0;
    font-family: 'Courier New', monospace;
}

@keyframes bootMessageAppear {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.corrupted-boot {
    color: #FF3333 !important;
    text-shadow: 0 0 10px #FF3333;
    animation: corruptedBootGlitch 0.5s infinite;
}

@keyframes corruptedBootGlitch {
    0%, 100% { 
        transform: translateX(0);
        filter: hue-rotate(0deg);
    }
    25% { 
        transform: translateX(-2px);
        filter: hue-rotate(90deg);
    }
    75% { 
        transform: translateX(2px);
        filter: hue-rotate(270deg);
    }
}

/* Corrupted ASCII Banner */
.corrupted-banner {
    animation: bannerCorruption 2s infinite;
    color: #FF6600 !important;
    text-shadow: 
        -2px 0 #FF0000, 
        2px 0 #00FFFF,
        0 0 10px #FF6600 !important;
}

@keyframes bannerCorruption {
    0%, 100% { 
        filter: hue-rotate(0deg) contrast(1);
        transform: scale(1);
    }
    25% { 
        filter: hue-rotate(90deg) contrast(1.5);
        transform: scale(0.98);
    }
    50% { 
        filter: hue-rotate(180deg) contrast(0.8);
        transform: scale(1.02);
    }
    75% { 
        filter: hue-rotate(270deg) contrast(1.3);
        transform: scale(0.99);
    }
}

/* Fade out animation for overlays */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Enhanced crash effects */
.blue-screen-crash::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.1) 2px,
            rgba(255, 255, 255, 0.1) 4px
        );
    pointer-events: none;
    animation: staticNoise 0.1s infinite linear;
}

@keyframes staticNoise {
    0% { transform: translateY(0px); }
    100% { transform: translateY(4px); }
}

/* System recovery styling */
.output-line:has(.error-text:contains("SYSTEM RECOVERY")) {
    animation: recoveryPulse 1s ease-in-out infinite;
}

@keyframes recoveryPulse {
    0%, 100% { 
        background: rgba(255, 0, 0, 0.1);
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
    }
    50% { 
        background: rgba(255, 0, 0, 0.2);
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    }
}

/* NEW COMMAND EFFECTS */

/* 404 Site Broken Effect */
.site-404-broken {
    animation: site404Glitch 0.5s infinite;
    filter: contrast(2) hue-rotate(180deg);
}

@keyframes site404Glitch {
    0%, 100% { 
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    25% { 
        transform: translateX(-10px) scale(0.95);
        opacity: 0.8;
    }
    75% { 
        transform: translateX(10px) scale(1.05);
        opacity: 0.6;
    }
}

/* Static Noise Overlay */
.noise-static-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 99999;
    overflow: hidden;
    animation: staticFlicker 0.1s infinite;
}

.noise-text {
    color: #ffffff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    line-height: 0.8;
    margin: 0;
    white-space: pre;
    animation: staticScroll 0.5s infinite linear;
}

@keyframes staticFlicker {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.7; }
}

@keyframes staticScroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* Dream Sequence Styling */
.dream-text {
    color: #ff69b4;
    text-shadow: 
        0 0 10px #ff69b4,
        0 0 20px #ff69b4,
        0 0 30px #ff69b4;
    font-style: italic;
    animation: dreamPulse 3s ease-in-out infinite;
    line-height: 1.6;
}

@keyframes dreamPulse {
    0%, 100% { 
        opacity: 0.8;
        transform: scale(1);
        filter: blur(0px);
    }
    50% { 
        opacity: 1;
        transform: scale(1.02);
        filter: blur(1px);
    }
}

/* Echo Distortion Effects */
.echo-text {
    animation: echoFade 2s ease-out forwards;
}

.echo-level-1 {
    color: #aaffaa;
    text-shadow: 0 0 5px #aaffaa;
}

.echo-level-2 {
    color: #aaff00;
    text-shadow: 0 0 8px #aaff00;
    animation: echoDistort1 2s ease-out forwards;
}

.echo-level-3 {
    color: #ffaa00;
    text-shadow: 0 0 12px #ffaa00;
    animation: echoDistort2 2s ease-out forwards;
}

.echo-level-4 {
    color: #ff0000;
    text-shadow: 0 0 15px #ff0000;
    animation: echoCorrupt 2s ease-out forwards;
}

@keyframes echoFade {
    0% { opacity: 1; }
    100% { opacity: 0.6; }
}

@keyframes echoDistort1 {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

@keyframes echoDistort2 {
    0%, 100% { 
        transform: translateX(0) scale(1);
        filter: blur(0px);
    }
    25% { 
        transform: translateX(-5px) scale(0.98);
        filter: blur(1px);
    }
    75% { 
        transform: translateX(5px) scale(1.02);
        filter: blur(1px);
    }
}

@keyframes echoCorrupt {
    0% { 
        transform: scale(1);
        filter: blur(0px) hue-rotate(0deg);
    }
    25% { 
        transform: scale(0.9);
        filter: blur(2px) hue-rotate(90deg);
    }
    50% { 
        transform: scale(1.1);
        filter: blur(3px) hue-rotate(180deg);
    }
    75% { 
        transform: scale(0.95);
        filter: blur(2px) hue-rotate(270deg);
    }
    100% { 
        transform: scale(1);
        filter: blur(1px) hue-rotate(360deg);
    }
}

/* ASCII Flames */
.flame-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 8000;
    pointer-events: none;
    overflow: hidden;
}

.flame-line {
    position: absolute;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    white-space: pre;
    text-shadow: 0 0 10px currentColor;
    animation: flameFlicker 0.3s infinite;
}

.massive-flame {
    font-size: 14px;
    font-weight: bold;
    text-shadow: 
        0 0 20px currentColor,
        0 0 40px currentColor,
        0 0 60px currentColor;
    animation: 
        flameFlicker 0.2s infinite,
        flameDance 1s infinite ease-in-out,
        flameRise 8s linear forwards;
}

@keyframes flameFlicker {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) contrast(1);
    }
    25% { 
        opacity: 0.9;
        transform: scale(1.02);
        filter: brightness(1.3) contrast(1.2);
    }
    50% { 
        opacity: 0.8;
        transform: scale(1.05);
        filter: brightness(1.5) contrast(0.8);
    }
    75% { 
        opacity: 0.95;
        transform: scale(0.98);
        filter: brightness(1.2) contrast(1.1);
    }
}

@keyframes flameDance {
    0%, 100% { 
        transform: translateX(0) rotate(0deg);
    }
    25% { 
        transform: translateX(-10px) rotate(-2deg);
    }
    75% { 
        transform: translateX(10px) rotate(2deg);
    }
}

@keyframes flameRise {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.8);
    }
    10% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateY(-20px) scale(1);
    }
    100% {
        opacity: 1;
        transform: translateY(-20px) scale(1);
    }
}

@keyframes flameExtinguish {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
        filter: brightness(0.5) hue-rotate(30deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
        filter: brightness(0) hue-rotate(60deg);
    }
}

/* Fire Particles */
.fire-particle {
    position: fixed;
    pointer-events: none;
    z-index: 8001;
    font-size: 12px;
    animation: fireParticleFloat 4s ease-out forwards;
}

@keyframes fireParticleFloat {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
        opacity: 0.8;
        transform: translateY(-50px) rotate(90deg) scale(1.2);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-100px) rotate(180deg) scale(0.8);
    }
    75% {
        opacity: 0.3;
        transform: translateY(-150px) rotate(270deg) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-200px) rotate(360deg) scale(0.5);
    }
}

/* Heat Distortion Effect */
.heat-distortion {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: 
        radial-gradient(
            circle at 50% 100%, 
            rgba(255, 100, 0, 0.1) 0%, 
            rgba(255, 200, 0, 0.05) 30%, 
            transparent 70%
        );
    z-index: 7999;
    pointer-events: none;
    animation: heatWave 2s infinite ease-in-out;
}

@keyframes heatWave {
    0%, 100% {
        transform: translateY(0) scaleY(1);
        filter: blur(0px);
    }
    25% {
        transform: translateY(-5px) scaleY(1.02);
        filter: blur(1px);
    }
    50% {
        transform: translateY(5px) scaleY(0.98);
        filter: blur(2px);
    }
    75% {
        transform: translateY(-3px) scaleY(1.01);
        filter: blur(1px);
    }
}

/* Ghost/Phantom Typing */
.ghost-message {
    border-left: 3px solid #666666;
    padding-left: 10px;
    margin: 5px 0;
    background: rgba(102, 102, 102, 0.1);
}

.ghost-text {
    color: #666666;
    text-shadow: 0 0 5px #666666;
    font-style: italic;
    animation: ghostFlicker 2s infinite;
    position: relative;
}

.ghost-text::after {
    content: '█';
    animation: ghostCursor 1s infinite;
    color: #666666;
    margin-left: 2px;
}

@keyframes ghostFlicker {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.3; }
}

@keyframes ghostCursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Enhanced 404 Effects */
.site-404-broken::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 0, 0, 0.1) 10px,
            rgba(255, 0, 0, 0.1) 20px
        );
    pointer-events: none;
    z-index: 1;
    animation: brokenPattern 2s infinite linear;
}

@keyframes brokenPattern {
    0% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(20px) translateY(-20px); }
}

/* Trace Command Styling */
.output-line:contains("GLITTER DIMENSION") {
    animation: glitterDimension 2s infinite;
}

@keyframes glitterDimension {
    0%, 100% { 
        transform: scale(1);
        filter: hue-rotate(0deg);
    }
    25% { 
        transform: scale(1.02);
        filter: hue-rotate(90deg);
    }
    50% { 
        transform: scale(1.01);
        filter: hue-rotate(180deg);
    }
    75% { 
        transform: scale(1.03);
        filter: hue-rotate(270deg);
    }
}

/* Dream State Visual Enhancement */
.dream-text::before {
    content: '✨ ';
    animation: dreamSparkle 1s infinite;
}

.dream-text::after {
    content: ' ✨';
    animation: dreamSparkle 1s infinite reverse;
}

@keyframes dreamSparkle {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* Command Input Enhancements */
#commandInput:focus {
    box-shadow: 0 0 10px var(--primary-color);
    outline: none;
}

/* Progressive Visual Corruption */
.terminal-corrupting {
    animation: terminalCorruption 5s ease-in-out infinite;
}

@keyframes terminalCorruption {
    0%, 100% { 
        filter: none;
        transform: scale(1);
    }
    25% { 
        filter: contrast(1.2) hue-rotate(30deg);
        transform: scale(0.99);
    }
    50% { 
        filter: contrast(0.8) hue-rotate(180deg) blur(1px);
        transform: scale(1.01);
    }
    75% { 
        filter: contrast(1.5) hue-rotate(270deg);
        transform: scale(0.98);
    }
}

/* RANDOMIZED EVENT EFFECTS */

/* Transmission Text Styling */
.transmission-text {
    color: #ffaa00;
    text-shadow: 0 0 10px #ffaa00;
    font-family: 'Courier New', monospace;
    animation: transmissionPulse 2s ease-in-out infinite;
    border-left: 3px solid #ffaa00;
    padding-left: 10px;
    margin: 2px 0;
    background: rgba(255, 170, 0, 0.05);
}

@keyframes transmissionPulse {
    0%, 100% { 
        opacity: 1;
        text-shadow: 0 0 10px #ffaa00;
    }
    50% { 
        opacity: 0.7;
        text-shadow: 0 0 20px #ffaa00, 0 0 30px #ffaa00;
    }
}

/* System Malfunction Text */
.malfunction-text {
    color: #ff3300;
    text-shadow: 0 0 8px #ff3300;
    animation: malfunctionGlitch 0.3s infinite;
    background: rgba(255, 51, 0, 0.1);
    padding: 2px 5px;
    margin: 1px 0;
    border-left: 2px solid #ff3300;
}

@keyframes malfunctionGlitch {
    0%, 90% { 
        transform: translateX(0);
        filter: hue-rotate(0deg);
    }
    10% { 
        transform: translateX(-2px);
        filter: hue-rotate(45deg);
    }
}

/* Phantom Message Styling */
.phantom-line {
    border-left: 3px solid #444444;
    padding-left: 8px;
    margin: 3px 0;
    background: rgba(68, 68, 68, 0.08);
}

.phantom-text {
    color: #888888;
    text-shadow: 0 0 5px #888888;
    font-style: italic;
    animation: phantomFlicker 3s infinite;
}

.phantom-text::after {
    content: '█';
    animation: phantomCursor 1s infinite;
    color: #888888;
    margin-left: 2px;
}

@keyframes phantomFlicker {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

@keyframes phantomCursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Corruption Text */
.corruption-text {
    color: #ff00ff;
    text-shadow: 
        -1px 0 #00ffff, 
        1px 0 #ff0000,
        0 0 10px #ff00ff;
    animation: corruptionFlicker 1s infinite;
}

@keyframes corruptionFlicker {
    0%, 100% { 
        transform: translateX(0);
        filter: hue-rotate(0deg);
    }
    25% { 
        transform: translateX(-1px);
        filter: hue-rotate(90deg);
    }
    75% { 
        transform: translateX(1px);
        filter: hue-rotate(270deg);
    }
}

/* System Warning Text */
.system-warning-text {
    color: #ffff00;
    text-shadow: 0 0 15px #ffff00;
    font-weight: bold;
    animation: warningPulse 1s ease-in-out infinite;
    background: rgba(255, 255, 0, 0.1);
    padding: 5px 10px;
    border: 1px solid #ffff00;
    margin: 5px 0;
    display: inline-block;
}

@keyframes warningPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 255, 0, 0.3);
    }
    50% { 
        transform: scale(1.02);
        box-shadow: 0 0 20px rgba(255, 255, 0, 0.6);
    }
}

/* Dimension Text */
.dimension-text {
    color: #9900ff;
    text-shadow: 0 0 15px #9900ff;
    animation: dimensionShift 2s ease-in-out;
    font-weight: bold;
}

@keyframes dimensionShift {
    0%, 100% { 
        transform: scale(1);
        filter: hue-rotate(0deg);
    }
    25% { 
        transform: scale(1.1);
        filter: hue-rotate(90deg);
    }
    50% { 
        transform: scale(0.9);
        filter: hue-rotate(180deg);
    }
    75% { 
        transform: scale(1.05);
        filter: hue-rotate(270deg);
    }
}

/* Temporary Corruption Effect */
.temporary-corruption {
    animation: temporaryCorruption 5s ease-in-out;
}

@keyframes temporaryCorruption {
    0%, 100% { 
        filter: none;
        transform: scale(1);
    }
    10% { 
        filter: contrast(2) hue-rotate(180deg) invert(0.1);
        transform: scale(0.99);
    }
    20% { 
        filter: contrast(0.5) hue-rotate(90deg) saturate(2);
        transform: scale(1.01);
    }
    30% { 
        filter: contrast(1.5) hue-rotate(270deg) blur(1px);
        transform: scale(0.98);
    }
    40% { 
        filter: contrast(3) hue-rotate(45deg) invert(0.2);
        transform: scale(1.02);
    }
    50% { 
        filter: contrast(0.3) hue-rotate(315deg) saturate(0.5);
        transform: scale(0.97);
    }
    60% { 
        filter: contrast(2.5) hue-rotate(135deg) blur(2px);
        transform: scale(1.03);
    }
    70% { 
        filter: contrast(0.8) hue-rotate(225deg) invert(0.1);
        transform: scale(0.99);
    }
    80% { 
        filter: contrast(1.8) hue-rotate(60deg) saturate(1.5);
        transform: scale(1.01);
    }
    90% { 
        filter: contrast(1.2) hue-rotate(300deg) blur(0.5px);
        transform: scale(0.995);
    }
}

/* Enhanced Ghost Message Effects */
.ghost-message.phantom-line {
    border-left-color: #444444;
    animation: phantomLineGlow 4s ease-in-out infinite;
}

@keyframes phantomLineGlow {
    0%, 100% { 
        border-left-color: #444444;
        box-shadow: none;
    }
    50% { 
        border-left-color: #888888;
        box-shadow: -5px 0 10px rgba(136, 136, 136, 0.3);
    }
}

/* Event Notification Styling */
.event-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(255, 0, 0, 0.9);
    color: white;
    padding: 10px 15px;
    border: 2px solid #ff0000;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    z-index: 10000;
    animation: eventNotification 4s ease-out forwards;
    text-shadow: 0 0 10px #ff0000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}

@keyframes eventNotification {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    10% {
        opacity: 1;
        transform: translateX(0);
    }
    90% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-100px);
    }
}

/* Enhanced Glitch Effects for Events */
.event-glitch-active {
    animation: eventGlitch 0.3s ease-in-out;
}

@keyframes eventGlitch {
    0%, 100% { 
        transform: translateX(0) scale(1);
        filter: hue-rotate(0deg) contrast(1);
    }
    20% { 
        transform: translateX(-8px) scale(0.95);
        filter: hue-rotate(120deg) contrast(2);
    }
    40% { 
        transform: translateX(8px) scale(1.05);
        filter: hue-rotate(240deg) contrast(0.5);
    }
    60% { 
        transform: translateX(-4px) scale(0.98);
        filter: hue-rotate(60deg) contrast(1.8);
    }
    80% { 
        transform: translateX(4px) scale(1.02);
        filter: hue-rotate(300deg) contrast(0.8);
    }
}

/* NARRATIVE & VISUAL SPECTACLE EFFECTS */

/* Void Command - Consuming Darkness */
.void-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 99998;
    pointer-events: none;
}

.void-circle {
    position: absolute;
    width: 0;
    height: 0;
    background: radial-gradient(circle, #000000 0%, transparent 70%);
    border-radius: 50%;
    animation: voidExpand 6s ease-out forwards;
}

@keyframes voidExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        width: 150vmax;
        height: 150vmax;
        margin-left: -75vmax;
        margin-top: -75vmax;
        opacity: 0.9;
    }
}

.void-complete {
    background: #000000 !important;
}

@keyframes voidSnap {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.void-text {
    color: #000000;
    background: #ffffff;
    text-shadow: none;
    font-weight: bold;
    padding: 2px 5px;
    animation: voidPulse 2s ease-in-out infinite;
}

@keyframes voidPulse {
    0%, 100% { 
        color: #000000;
        background: #ffffff;
    }
    50% { 
        color: #ffffff;
        background: #000000;
    }
}

/* Virus Command - Spreading Corruption */
.virus-infected {
    animation: virusInfection 2s ease-in-out infinite;
    background: rgba(255, 0, 0, 0.1) !important;
    border-left: 3px solid #ff0000 !important;
}

@keyframes virusInfection {
    0%, 100% {
        background: rgba(255, 0, 0, 0.1) !important;
        color: inherit;
    }
    25% {
        background: rgba(255, 0, 0, 0.3) !important;
        color: #ff0000;
    }
    50% {
        background: rgba(255, 0, 0, 0.2) !important;
        color: #aa0000;
    }
    75% {
        background: rgba(255, 0, 0, 0.4) !important;
        color: #ff3333;
    }
}

.virus-cleaning {
    animation: virusCleaning 2s ease-out forwards;
}

@keyframes virusCleaning {
    0% {
        background: rgba(255, 0, 0, 0.4) !important;
        color: #ff0000;
    }
    50% {
        background: rgba(0, 255, 0, 0.3) !important;
        color: #00ff00;
    }
    100% {
        background: transparent !important;
        color: inherit;
        border-left: none !important;
    }
}

.virus-text {
    color: #ff0000;
    text-shadow: 0 0 10px #ff0000;
    animation: virusSpread 1s ease-in-out infinite;
    font-weight: bold;
}

@keyframes virusSpread {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Quantum Command - Phase Shifting */
.quantum-phase {
    animation: quantumPhase 3s ease-in-out infinite;
}

@keyframes quantumPhase {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
    25% {
        opacity: 0.3;
        transform: scale(0.95);
        filter: blur(2px);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
        filter: blur(1px);
    }
    75% {
        opacity: 0.1;
        transform: scale(0.9);
        filter: blur(3px);
    }
}

.quantum-collapse {
    animation: quantumCollapse 1s ease-out forwards;
}

@keyframes quantumCollapse {
    0% {
        opacity: 0.1;
        transform: scale(0.5);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
}

.quantum-text {
    color: #9900ff;
    text-shadow: 0 0 15px #9900ff;
    animation: quantumUncertainty 2s ease-in-out infinite;
}

@keyframes quantumUncertainty {
    0%, 100% {
        opacity: 1;
        transform: translateX(0);
    }
    33% {
        opacity: 0.3;
        transform: translateX(-5px);
    }
    66% {
        opacity: 0.8;
        transform: translateX(5px);
    }
}

/* Entity Summoning Effects */
.entity-text {
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 20px currentColor;
    animation: entityManifestation 3s ease-out;
}

@keyframes entityManifestation {
    0% {
        opacity: 0;
        transform: scale(0.1) rotate(360deg);
        filter: blur(10px);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2) rotate(180deg);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}

.entity-message {
    font-style: italic;
    text-shadow: 0 0 10px currentColor;
    animation: entitySpeak 2s ease-in-out;
    border-left: 3px solid currentColor;
    padding-left: 10px;
    margin: 5px 0;
}

@keyframes entitySpeak {
    0%, 100% {
        opacity: 1;
        transform: translateX(0);
    }
    50% {
        opacity: 0.7;
        transform: translateX(5px);
    }
}

/* Portal Effects */
.portal-text {
    color: #9900ff;
    text-shadow: 0 0 20px #9900ff;
    font-weight: bold;
    animation: portalEnergy 2s ease-in-out infinite;
}

@keyframes portalEnergy {
    0%, 100% {
        text-shadow: 0 0 20px currentColor;
        transform: scale(1);
    }
    50% {
        text-shadow: 
            0 0 30px currentColor,
            0 0 40px currentColor,
            0 0 50px currentColor;
        transform: scale(1.02);
    }
}

/* Portal Dimensional Effects */
.matrix-rain-active {
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 20px,
            rgba(0, 255, 0, 0.1) 20px,
            rgba(0, 255, 0, 0.1) 22px
        );
    animation: matrixRain 2s linear infinite;
}

@keyframes matrixRain {
    0% { background-position: 0 0; }
    100% { background-position: 0 100px; }
}

.neon-pulse-active {
    animation: neonPulse 3s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% {
        box-shadow: 
            0 0 20px var(--primary-color),
            inset 0 0 20px rgba(255, 0, 153, 0.1);
    }
    50% {
        box-shadow: 
            0 0 40px var(--primary-color),
            inset 0 0 40px rgba(255, 0, 153, 0.3);
    }
}

.void-ambience {
    background: 
        radial-gradient(
            circle at 25% 25%, 
            rgba(0, 0, 0, 0.8) 0%, 
            transparent 50%
        ),
        radial-gradient(
            circle at 75% 75%, 
            rgba(0, 0, 0, 0.8) 0%, 
            transparent 50%
        );
}

.quantum-flux {
    animation: quantumFlux 4s ease-in-out infinite;
}

@keyframes quantumFlux {
    0%, 100% {
        filter: hue-rotate(0deg) saturate(1);
    }
    25% {
        filter: hue-rotate(90deg) saturate(1.5);
    }
    50% {
        filter: hue-rotate(180deg) saturate(0.5);
    }
    75% {
        filter: hue-rotate(270deg) saturate(2);
    }
}

.fire-ambience {
    background: 
        radial-gradient(
            circle at 50% 100%, 
            rgba(255, 50, 0, 0.1) 0%, 
            transparent 50%
        );
    animation: fireAmbience 2s ease-in-out infinite;
}

@keyframes fireAmbience {
    0%, 100% {
        background: 
            radial-gradient(
                circle at 50% 100%, 
                rgba(255, 50, 0, 0.1) 0%, 
                transparent 50%
            );
    }
    50% {
        background: 
            radial-gradient(
                circle at 50% 100%, 
                rgba(255, 100, 0, 0.2) 0%, 
                transparent 60%
            );
    }
}

/* Decryption Effects */
.decrypt-text {
    color: #00ffff;
    text-shadow: 0 0 15px #00ffff;
    font-weight: bold;
}

.encrypted-text {
    color: #ffaa00;
    font-family: 'Courier New', monospace;
    background: rgba(255, 170, 0, 0.1);
    padding: 5px;
    border: 1px solid #ffaa00;
    animation: encryptedPulse 2s ease-in-out infinite;
}

@keyframes encryptedPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.decrypted-text {
    color: #00ff00;
    text-shadow: 0 0 15px #00ff00;
    font-weight: bold;
    background: rgba(0, 255, 0, 0.1);
    padding: 5px;
    border: 1px solid #00ff00;
    animation: decryptedReveal 2s ease-out;
}

@keyframes decryptedReveal {
    0% {
        opacity: 0;
        transform: scale(0.8);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
}

@keyframes selfDestruct {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1);
        color: #ff0000;
        text-shadow: 0 0 20px #ff0000;
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* Nightmare Mode - Ultimate Chaos */
.nightmare-active {
    animation: nightmareReality 1s ease-in-out infinite;
    position: relative;
}

.nightmare-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: 
        repeating-linear-gradient(
            45deg,
            rgba(255, 0, 0, 0.1) 0%,
            rgba(255, 0, 0, 0.1) 10px,
            rgba(0, 0, 0, 0.3) 10px,
            rgba(0, 0, 0, 0.3) 20px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(0, 255, 0, 0.05) 0%,
            rgba(0, 255, 0, 0.05) 15px,
            rgba(0, 0, 255, 0.05) 15px,
            rgba(0, 0, 255, 0.05) 30px
        );
    z-index: 1000;
    pointer-events: none;
    animation: nightmareOverlay 2s linear infinite;
}

@keyframes nightmareReality {
    0%, 100% {
        filter: 
            contrast(1) 
            hue-rotate(0deg) 
            saturate(1) 
            brightness(1);
        transform: scale(1);
    }
    10% {
        filter: 
            contrast(3) 
            hue-rotate(90deg) 
            saturate(2) 
            brightness(0.5);
        transform: scale(0.98);
    }
    25% {
        filter: 
            contrast(0.5) 
            hue-rotate(180deg) 
            saturate(0.5) 
            brightness(2);
        transform: scale(1.02);
    }
    50% {
        filter: 
            contrast(2) 
            hue-rotate(270deg) 
            saturate(3) 
            brightness(0.8);
        transform: scale(0.99);
    }
    75% {
        filter: 
            contrast(0.8) 
            hue-rotate(45deg) 
            saturate(0.2) 
            brightness(1.5);
        transform: scale(1.01);
    }
    90% {
        filter: 
            contrast(4) 
            hue-rotate(315deg) 
            saturate(1.5) 
            brightness(0.3);
        transform: scale(0.97);
    }
}

@keyframes nightmareOverlay {
    0% {
        opacity: 0.3;
        transform: translateX(0) translateY(0);
    }
    25% {
        opacity: 0.7;
        transform: translateX(-20px) translateY(10px);
    }
    50% {
        opacity: 0.4;
        transform: translateX(15px) translateY(-5px);
    }
    75% {
        opacity: 0.8;
        transform: translateX(-10px) translateY(20px);
    }
    100% {
        opacity: 0.3;
        transform: translateX(0) translateY(0);
    }
}

.nightmare-text {
    color: #ff0000;
    text-shadow: 
        0 0 10px #ff0000,
        0 0 20px #ff0000,
        0 0 30px #ff0000;
    font-weight: bold;
    animation: nightmareMessage 1s ease-in-out infinite;
}

@keyframes nightmareMessage {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: hue-rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-2deg);
        filter: hue-rotate(90deg);
    }
    50% {
        transform: scale(0.9) rotate(2deg);
        filter: hue-rotate(180deg);
    }
    75% {
        transform: scale(1.05) rotate(-1deg);
        filter: hue-rotate(270deg);
    }
}