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

:root {
    --color-red: #CC0000;
    --color-black: #121212;
    --color-gold: #FFD700;
    --color-grey: #2A2A2A;
}

body {
    background-color: var(--color-black);
    color: white;
    font-family: 'Overpass Mono', monospace;
    overflow-x: hidden;
}

h1, h2, h3, .heading-font {
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 0.05em;
}

.constructivist-border {
    border: 4px solid var(--color-red);
    box-shadow: 8px 8px 0px var(--color-gold);
}

.constructivist-button {
    background-color: var(--color-red);
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-family: 'Bebas Neue', cursive;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    box-shadow: 4px 4px 0px var(--color-gold);
}

.constructivist-button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--color-gold);
    filter: brightness(1.1);
}

.constructivist-button:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px var(--color-gold);
}

.industrial-input {
    background: var(--color-grey);
    border-bottom: 3px solid var(--color-red);
    color: white;
    padding: 0.75rem;
    width: 100%;
    outline: none;
}

.industrial-input:focus {
    border-bottom-color: var(--color-gold);
}

.scoreboard-item {
    border-left: 8px solid var(--color-gold);
    background: linear-gradient(90deg, #222, #121212);
}

/* Animations */
@keyframes flicker {
    0% { opacity: 0.9; }
    5% { opacity: 0.4; }
    10% { opacity: 0.9; }
    15% { opacity: 0.3; }
    20% { opacity: 0.9; }
    100% { opacity: 1; }
}

.analyze-flicker {
    animation: flicker 1s infinite;
}

.bg-texture {
    background-image: radial-gradient(var(--color-grey) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.1;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
}