/* ============================================
   Atom Rush - Retro CRT Effects
   Scanlines, glow, vignette, and arcade feel
   ============================================ */

/* CRT Container Effect - promote to layer for smoother compositing */
.crt {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

/* Subtle barrel distortion effect via pseudo-element */
.crt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(
            ellipse at center,
            transparent 0%,
            transparent 70%,
            rgba(0, 0, 0, 0.15) 100%
        );
    pointer-events: none;
    z-index: 10000;
}

/* Vignette effect - subtle for better readability */
.crt::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(
            ellipse at center,
            transparent 0%,
            transparent 60%,
            rgba(0, 0, 0, 0.3) 100%
        );
    pointer-events: none;
    z-index: 9999;
}

/* Scanlines Overlay - on own layer to avoid repainting content */
.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.05) 0px,
        rgba(0, 0, 0, 0.05) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
    z-index: 10001;
    animation: scanlineMove 10s linear infinite;
    will-change: transform;
    transform: translateZ(0);
}

/* Subtle scanline movement */
@keyframes scanlineMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(3px); }
}

/* RGB Chromatic Aberration on hover elements - subtle */
.crt-aberration {
    text-shadow:
        -0.5px 0 rgba(255, 0, 0, 0.2),
        0.5px 0 rgba(0, 255, 255, 0.2);
}

/* Phosphor glow effect for text - subtle for readability */
.glow-text {
    text-shadow: 
        0 0 3px currentColor,
        0 0 6px currentColor;
}

/* Neon glow for accent elements */
.neon-glow {
    box-shadow: 
        0 0 5px var(--accent-primary),
        0 0 10px var(--accent-primary),
        0 0 20px var(--accent-primary),
        0 0 40px var(--accent-primary);
}

/* Flicker effect for certain elements */
.flicker {
    animation: flicker 0.15s infinite;
}

@keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: 0.95; }
    100% { opacity: 1; }
}

/* Simple fade-in on load (no scale to avoid flicker) */
@keyframes screenOn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.screen-on {
    animation: screenOn 0.25s ease-out forwards;
}

/* Retro button press effect */
.menu-btn {
    position: relative;
    box-shadow: 
        0 4px 0 #000,
        0 0 10px rgba(0, 0, 0, 0.3);
    transition: all 0.1s ease;
}

.menu-btn:active {
    box-shadow: 
        0 1px 0 #000,
        0 0 5px rgba(0, 0, 0, 0.3);
    transform: translateY(3px);
}

/* Pixel border effect */
.pixel-border {
    border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAADklEQVQI12NgYGD4z4AHAAT2AO3f3TfYAAAAAElFTkSuQmCC') 1 repeat;
}

/* Grid background pattern */
.grid-bg {
    background-image: 
        linear-gradient(rgba(50, 50, 80, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 50, 80, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Retro panel styling */
.retro-panel {
    background: linear-gradient(
        180deg,
        rgba(30, 30, 50, 0.95) 0%,
        rgba(20, 20, 35, 0.95) 100%
    );
    border: 3px solid;
    border-color: #4a4a6a #1a1a2a #1a1a2a #4a4a6a;
    box-shadow: 
        inset 2px 2px 0 rgba(255, 255, 255, 0.1),
        inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}

/* Glow pulse for highlights */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 
            0 0 5px var(--accent-primary),
            0 0 10px var(--accent-primary);
    }
    50% {
        box-shadow: 
            0 0 10px var(--accent-primary),
            0 0 20px var(--accent-primary),
            0 0 30px var(--accent-primary);
    }
}

.glow-pulse {
    animation: glowPulse 1s ease-in-out infinite;
}

/* Error screen shake */
@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.screen-shake {
    animation: screenShake 0.3s ease-in-out;
}

/* Error flash effect */
@keyframes errorFlash {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(255, 50, 50, 0.3); }
}

.error-flash {
    animation: errorFlash 0.2s ease-in-out;
}

/* Success effect */
@keyframes successPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.success-pop {
    animation: successPop 0.3s ease-out;
}

/* Tile drop effect */
@keyframes tileDrop {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.tile-drop {
    animation: tileDrop 0.15s ease-out;
}

/* Row/column highlight for assists */
@keyframes highlightPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.assist-highlight {
    animation: highlightPulse 0.35s ease-in-out 2;
}

/* Cell pulse for Tier 2 assist */
@keyframes cellPulse {
    0% {
        box-shadow: 0 0 0 0 var(--accent-primary);
        opacity: 0.5;
    }
    50% {
        box-shadow: 0 0 20px 10px var(--accent-primary);
        opacity: 1;
    }
    100% {
        box-shadow: 0 0 0 0 var(--accent-primary);
        opacity: 0.5;
    }
}

.cell-pulse {
    animation: cellPulse 0.5s ease-in-out;
}

/* Pixel particle burst */
@keyframes pixelBurst {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(2) rotate(180deg);
        opacity: 0;
    }
}

/* Retro timer display */
.timer-display {
    font-family: var(--font-terminal);
    letter-spacing: 2px;
    background: #000;
    padding: 8px 16px;
    border: 2px inset #333;
    color: var(--accent-primary);
    text-shadow: 
        0 0 5px var(--accent-primary),
        0 0 10px var(--accent-primary);
}

/* Arcade insert coin blink */
@keyframes insertCoin {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.blink {
    animation: insertCoin 1s step-end infinite;
}

/* Gradient text for titles */
.gradient-text {
    background: linear-gradient(
        180deg,
        #fff 0%,
        var(--accent-primary) 50%,
        #00aa77 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Holographic shimmer */
@keyframes holographic {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.holographic {
    background: linear-gradient(
        90deg,
        var(--accent-primary),
        var(--accent-secondary),
        var(--accent-primary)
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holographic 3s ease-in-out infinite;
}

/* Static noise overlay (subtle) */
.static-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.02;
    pointer-events: none;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlMAKysrKysv5KIYAAAASUlEQVQ4y2NgQAX/GZH5DAwMzAIIfIiBgYFRAIEvwMDAwCiAwFdgYGBgFETgqzAwMDAKIfBVGBgYGIUR+GoMDAyMIgh8DQYAowcHJFWyGfAAAAAASUVORK5CYII=');
    animation: staticNoise 0.2s steps(10) infinite;
}

@keyframes staticNoise {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}