/* Custom pixel-perfect styles */
.pixel-perfect {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.pixelated {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.pixel-border {
    border-style: solid;
    border-image: none;
}

.pixel-text {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.8);
}

/* Custom scrollbar for pixel theme */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #374151;
    border: 2px solid #4B5563;
}

::-webkit-scrollbar-thumb {
    background: #6B7280;
    border: 1px solid #374151;
}

::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* Button hover effects */
button:hover {
    transform: translateY(-1px);
}

button:active {
    transform: translateY(0px);
}

/* Protest animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.shake {
    animation: shake 0.5s infinite;
}

/* Progress bar animation */
@keyframes progress-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(34, 197, 94, 0.5); }
    50% { box-shadow: 0 0 15px rgba(34, 197, 94, 0.8); }
}

.progress-bar {
    animation: progress-glow 2s infinite;
}

/* Retro game feel */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: #111827;
    font-family: 'Courier New', monospace;
    overflow: hidden;
}

/* Disable text selection for game elements */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Custom focus styles for accessibility */
button:focus, 
button:focus-visible {
    outline: 2px solid #FBBF24;
    outline-offset: 2px;
}

/* Loading states for images */
img[src*="retrodiffusion"] {
    background: #374151;
    background-image: 
        linear-gradient(45deg, #4B5563 25%, transparent 25%),
        linear-gradient(-45deg, #4B5563 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #4B5563 75%),
        linear-gradient(-45deg, transparent 75%, #4B5563 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    animation: loading 2s linear infinite;
}

@keyframes loading {
    0% { background-position: 0 0, 0 8px, 8px -8px, -8px 0px; }
    100% { background-position: 16px 0, 16px 8px, 24px -8px, 8px 0px; }
}