/* Scanlines CSS - Provides a retro CRT scanline effect */

#scanline-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 999999 !important;
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.075) 0px, rgba(255, 255, 255, 0.075) 1px, transparent 1px, transparent 8px) !important;
    mix-blend-mode: normal !important;
    opacity: 0.8 !important;
    content: "" !important;
}

/* Color enhancement overlay to make colors more vibrant */
#color-enhance-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 999998 !important; /* Below scanlines */
    background: transparent !important;
    mix-blend-mode: overlay !important; /* Enhances contrast and saturation */
    opacity: 0.4 !important; /* Increased effect */
    filter: saturate(1.45) contrast(1.4) !important; /* Significantly increased saturation and contrast */
    content: "" !important;
}

/* Fallback for browsers that don't support mix-blend-mode */
@supports not (mix-blend-mode: normal) {
    #scanline-overlay {
        background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.075) 0px, rgba(255, 255, 255, 0.075) 1px, transparent 1px, transparent 8px) !important;
        opacity: 0.8 !important;
    }
    
    #color-enhance-overlay {
        background: transparent !important;
        opacity: 0.3 !important;
        filter: saturate(1.4) contrast(1.35) !important;
    }
}

/* Mobile devices: thinner lines */
@media (max-width: 768px) {
    #scanline-overlay {
        background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.075) 0px, rgba(255, 255, 255, 0.075) 1px, transparent 1px, transparent 6px) !important;
    }
}

/* Canvas container to properly position the overlay */
#gameCanvas {
    position: relative !important;
}