:root {
    --pixel-bg: #f0f4f8;
    --pixel-primary: #4f46e5;
    --pixel-accent: #f43f5e;
    --pixel-success: #10b981;
    --pixel-dark: #1e293b;
}

body {
    font-family: 'Press Start 2P', cursive;
    image-rendering: pixelated;
    -webkit-font-smoothing: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1e293b; 
}
::-webkit-scrollbar-thumb {
    background: #475569; 
    border-radius: 4px;
}

/* CRT Scanlines */
.scanlines {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.1) 50%,
        rgba(0,0,0,0.1)
    );
    background-size: 100% 4px;
    animation: scanline 10s linear infinite;
    opacity: 0.6;
}

/* Retro Button */
.btn-pixel {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem; /* 14px */
    text-transform: uppercase;
    padding: 1rem;
    background-color: var(--pixel-primary);
    color: white;
    border: 4px solid var(--pixel-dark);
    box-shadow: 4px 4px 0px var(--pixel-dark);
    transition: transform 0.1s, box-shadow 0.1s;
    cursor: pointer;
}

.btn-pixel:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--pixel-dark);
}

.btn-pixel.secondary {
    background-color: #64748b;
}

.btn-pixel.danger {
    background-color: var(--pixel-accent);
}

.btn-pixel.success {
    background-color: var(--pixel-success);
}

.btn-pixel.locked {
    background-color: #334155;
    color: #64748b;
    cursor: not-allowed;
    filter: grayscale(1);
}

/* Animations */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.animate-shake {
    animation: shake 0.5s;
}

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

.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes pulse-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.animate-pulse-scale {
    animation: pulse-scale 2s infinite;
}

/* Progress Bar Pixelated */
.progress-bar-container {
    border: 4px solid var(--pixel-dark);
    background: #1e293b;
    padding: 2px;
}
.progress-bar-fill {
    height: 100%;
    background: var(--pixel-success);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}