/* Custom apocalypse styling */
.grain-overlay {
    background: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 90% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
        url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.03"/></svg>');
    animation: grain 8s steps(8) infinite;
}

@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 35%); }
    90% { transform: translate(-10%, 10%); }
}

.alert-pulse {
    animation: alertPulse 2s ease-in-out infinite alternate;
}

@keyframes alertPulse {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.005); }
}

/* Glitch effect for critical moments */
.glitch {
    animation: glitch 0.3s linear infinite;
}

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

/* Smooth transitions for resource bars */
.transition-all {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button hover effects */
button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

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

button:disabled {
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

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

::-webkit-scrollbar-track {
    background: #374151;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #6B7280;
    border-radius: 4px;
}

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

/* Mobile optimizations */
@media (max-width: 768px) {
    .grain-overlay {
        animation: none; /* Reduce animation on mobile for performance */
    }
}

/* Text glow for important elements */
.text-glow {
    text-shadow: 0 0 10px currentColor;
}

/* Settlement background fade */
.bg-fade {
    background: linear-gradient(
        180deg,
        rgba(45, 45, 45, 0.9) 0%,
        rgba(45, 45, 45, 0.95) 50%,
        rgba(45, 45, 45, 1) 100%
    );
}