:root {
    --bg-cream: #FFFBF0;
    --accent-blue: #2563EB;
    --accent-orange: #FF5733;
    --accent-yellow: #FFD700;
}

body {
    background-color: var(--bg-cream);
    background-image: radial-gradient(#000 1px, transparent 1px);
    background-size: 20px 20px;
    font-family: 'Space Grotesk', sans-serif;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

.archivo {
    font-family: 'Archivo Black', sans-serif;
}

.neo-box {
    border: 3px solid black;
    box-shadow: 4px 4px 0px black;
    transition: all 0.1s;
}

.neo-box:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px black;
}

/* Podium bars */
.podium-bar {
    border: 3px solid black;
    box-shadow: 4px 4px 0px black;
    border-radius: 8px 8px 0 0;
}

.hidden {
    display: none !important;
}

@keyframes slide-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slide-up 0.3s ease-out;
}

@keyframes pop-in {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-pop-in {
    animation: pop-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- REWARD SYSTEM --- */
.gold-btn {
    background: linear-gradient(45deg, #FFD700, #FDB931);
    border-color: #B8860B !important;
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% {
        transform: scale(1);
        box-shadow: 6px 6px 0px black;
    }

    50% {
        transform: scale(1.02);
        box-shadow: 8px 8px 0px black;
    }

    100% {
        transform: scale(1);
        box-shadow: 6px 6px 0px black;
    }
}

.flash-verde {
    animation: parpadeo-extremo 0.15s infinite;
}

@keyframes parpadeo-extremo {
    0% {
        background-color: #00FF00;
    }

    50% {
        background-color: #AFFF00;
    }

    100% {
        background-color: #00FF00;
    }
}

.animate-pulse-fast {
    animation: pulse-fast 0.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-fast {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

/* Alias for clarity in JS logic */
.active-green {
    animation: parpadeo-extremo 0.15s infinite;
}

/* --- PODIUM REDESIGN --- */
.podium-label-box {
    background: white;
    border: 3px solid black;
    padding: 4px 8px;
    /* Slightly more padding */
    transform: rotate(-2deg);
    box-shadow: 4px 4px 0px black;
    /* Updated to 4px */
    max-width: 90px;
    z-index: 20;
}

/* Progress Bar */
.progress-container {
    width: 100%;
    background: #000;
    height: 16px;
    border: 3px solid #000;
    border-radius: 8px;
    margin: 15px 0;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: #FFD700;
    width: 0%;
    transition: width 0.5s ease;
}

.medal-icon {
    font-size: 2rem;
    /* Larger medals */
    position: absolute;
    top: -20px;
    right: -12px;
    z-index: 30;
    filter: drop-shadow(2px 2px 0px black);
}

.vote-shadow {
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);
}