@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Courier+Prime:wght@400;700&display=swap');

/* Custom CSS animations and effects */

.neon-text {
    text-shadow: 
        0 0 5px currentColor,
        0 0 10px currentColor,
        0 0 15px currentColor,
        0 0 20px #00ffff,
        0 0 35px #00ffff,
        0 0 40px #00ffff;
    animation: neon-flicker 2s infinite alternate;
}

.glow-text {
    text-shadow: 0 0 10px currentColor;
}

.glow-box {
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.3),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
}

.glow-red {
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
}

.glow-cyan {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.glow-pink {
    box-shadow: 0 0 15px rgba(255, 20, 147, 0.5);
}

.glow-green {
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
}

.glow-blue {
    box-shadow: 0 0 15px rgba(0, 100, 255, 0.5);
}

.glow-yellow {
    box-shadow: 0 0 15px rgba(255, 191, 0, 0.5);
}

.glow-purple {
    box-shadow: 0 0 15px rgba(147, 0, 211, 0.5);
}

.terminal-glow {
    box-shadow: 
        0 0 20px rgba(0, 255, 0, 0.3),
        inset 0 0 20px rgba(0, 255, 0, 0.1);
}

.scanlines {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 255, 0.03) 2px,
        rgba(0, 255, 255, 0.03) 4px
    );
    pointer-events: none;
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 191, 0, 0.3);
}

.joystick-knob {
    animation: joystick-idle 3s ease-in-out infinite;
}

@keyframes neon-flicker {
    0%, 100% {
        text-shadow: 
            0 0 5px currentColor,
            0 0 10px currentColor,
            0 0 15px currentColor,
            0 0 20px #00ffff,
            0 0 35px #00ffff,
            0 0 40px #00ffff;
    }
    50% {
        text-shadow: 
            0 0 2px currentColor,
            0 0 5px currentColor,
            0 0 8px currentColor,
            0 0 12px #00ffff,
            0 0 18px #00ffff,
            0 0 25px #00ffff;
    }
}

@keyframes joystick-idle {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
    25% { transform: translate(-50%, -50%) translate(3px, -2px); }
    50% { transform: translate(-50%, -50%) translate(-2px, 3px); }
    75% { transform: translate(-50%, -50%) translate(2px, 2px); }
}

/* CRT TV effect */
body {
    background: 
        radial-gradient(ellipse at center, 
            rgba(0, 0, 0, 0.9) 0%, 
            rgba(0, 0, 0, 1) 100%
        );
}

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

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

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #00ffff, #ff1493);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #ff1493, #00ffff);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .neon-text {
        font-size: 3rem !important;
    }
    
    .glow-text {
        font-size: 1.5rem !important;
    }
}

/* Hover effects for interactive elements */
button:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Add retro cursor */
* {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2300ffff' d='M0 0v16l4-4h4l4-4V0z'/%3E%3C/svg%3E"), auto;
}

button, a {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff1493' d='M0 0v16l4-4h4l4-4V0z'/%3E%3C/svg%3E"), pointer;
}