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

* {
    box-sizing: border-box;
}

.font-orbitron {
    font-family: 'Orbitron', monospace;
}

@keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.animate-scroll {
    animation: scroll 20s linear infinite;
}

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

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

@keyframes ping {
    0% { transform: scale(1); opacity: 1; }
    75%, 100% { transform: scale(2); opacity: 0; }
}

body {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(0, 255, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255, 0, 0, 0.1) 0%, transparent 50%),
        linear-gradient(45deg, rgba(0, 0, 0, 0.9) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 0, 0, 0.9) 25%, transparent 25%);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: 0 0, 50px 50px, 0 0, 10px 10px;
}

/* Glowing borders */
.border-green-500 {
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.border-red-600 {
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.7);
}

.border-yellow-600 {
    box-shadow: 0 0 8px rgba(202, 138, 4, 0.6);
}

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

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #22c55e;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #16a34a;
}

/* Custom input styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-track {
    background: #22c55e;
    height: 4px;
    border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #ef4444;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid #22c55e;
}

input[type="range"]::-moz-range-track {
    background: #22c55e;
    height: 4px;
    border-radius: 2px;
}

input[type="range"]::-moz-range-thumb {
    background: #ef4444;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid #22c55e;
    cursor: pointer;
}

/* Retro CRT effect */
@media (min-width: 768px) {
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        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;
        z-index: 1000;
    }
}