/* Custom cyberpunk styling */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&display=swap');

* {
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
}

body {
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
}

/* Glow effects */
.glow-text {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
}

.glow-border {
    box-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF50, 0 0 30px #00FFFF30;
}

.glow-border-green {
    box-shadow: 0 0 10px #00FF00, 0 0 20px #00FF0050, 0 0 30px #00FF0030;
}

.glow-border-purple {
    box-shadow: 0 0 10px #8A2BE2, 0 0 20px #8A2BE250, 0 0 30px #8A2BE230;
}

.glow-border-pink {
    box-shadow: 0 0 10px #FF007F, 0 0 20px #FF007F50, 0 0 30px #FF007F30;
}

.glow-border-yellow {
    box-shadow: 0 0 10px #FFFF00, 0 0 20px #FFFF0050, 0 0 30px #FFFF0030;
}

.glow-border-top {
    box-shadow: 0 -5px 15px #00FFFF50;
}

.glow-red {
    box-shadow: 0 0 10px #FF0000, 0 0 15px #FF000080;
}

.glow-yellow {
    box-shadow: 0 0 10px #FFFF00, 0 0 15px #FFFF0080;
}

.glow-green {
    box-shadow: 0 0 10px #00FF00, 0 0 15px #00FF0080;
}

.glow-cyan {
    box-shadow: 0 0 10px #00FFFF, 0 0 15px #00FFFF80;
}

.glow-purple {
    box-shadow: 0 0 10px #8A2BE2, 0 0 15px #8A2BE280;
}

.glow-effect {
    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
}

.glow-input:focus {
    box-shadow: 0 0 10px #FF007F, 0 0 20px #FF007F50;
}

.glow-button {
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

.glow-button:hover {
    box-shadow: 0 0 15px currentColor, 0 0 25px currentColor, 0 0 35px currentColor;
}

/* Scanlines effect */
.scanlines {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 255, 0.03) 2px,
        rgba(0, 255, 255, 0.03) 4px
    );
    animation: scanlines 2s linear infinite;
}

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

/* Floating particles */
.floating-particle {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-10px) translateX(5px); }
    50% { transform: translateY(-20px) translateX(-5px); }
    75% { transform: translateY(-10px) translateX(10px); }
}

/* Reverse animation for counter-rotating elements */
.animation-reverse {
    animation-direction: reverse;
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #00FFFF;
    border-radius: 4px;
    box-shadow: 0 0 5px #00FFFF;
}

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

/* Progress bar glow animation */
.glow-effect {
    position: relative;
}

.glow-effect::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #00FFFF, #FF007F, #8A2BE2, #00FF00);
    border-radius: inherit;
    opacity: 0.3;
    filter: blur(4px);
    z-index: -1;
    animation: glow-rotate 3s linear infinite;
}

@keyframes glow-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Matrix rain effect enhancement */
.matrix-char {
    color: #00FF00;
    text-shadow: 0 0 5px #00FF00;
    animation: matrix-fall 8s linear infinite;
}

@keyframes matrix-fall {
    0% {
        opacity: 1;
        transform: translateY(-100vh);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh);
    }
}

/* Hologram effect */
@keyframes hologram {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Neural wave animation */
.neural-wave {
    animation: pulse-wave 2s ease-in-out infinite;
}

@keyframes pulse-wave {
    0%, 100% {
        stroke-dasharray: 0 1000;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 300 1000;
        stroke-dashoffset: -300;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    .text-lg {
        font-size: 1rem;
    }
    
    .text-xs {
        font-size: 0.6rem;
    }
}

/* Enhanced terminal cursor */
.terminal-cursor {
    background-color: #00FF00;
    animation: cursor-blink 1s infinite;
}

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

/* Energy bar special effects */
.energy-bar {
    background: linear-gradient(90deg, #FF0000 0%, #FFFF00 50%, #00FF00 100%);
    box-shadow: 0 0 10px currentColor;
}

/* Quantum particle effect */
.quantum-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #00FFFF;
    border-radius: 50%;
    animation: quantum-drift 10s infinite linear;
}

@keyframes quantum-drift {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(100px, -50px) rotate(90deg);
    }
    50% {
        transform: translate(-50px, -100px) rotate(180deg);
    }
    75% {
        transform: translate(-100px, 50px) rotate(270deg);
    }
    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}