/* ===== RESPONSIVE CSS FOR INDEX.HTML ===== */
/* Mobile First Approach with Progressive Enhancement */

/* Base responsive adjustments for video element */
@media (max-width: 1920px) {
    /* Large desktop adjustments */
    #splashVideo {
        object-position: center center;
    }
}

@media (max-width: 1440px) {
    /* Standard desktop adjustments */
    #splashVideo {
        object-position: center 30%;
    }
}

@media (max-width: 1200px) {
    /* Small desktop/large tablet adjustments */
    #splashVideo {
        object-position: center 35%;
    }
}

@media (max-width: 1024px) {
    /* Tablet landscape adjustments */
    #splashVideo {
        object-position: center 40%;
    }
    
    #unmuteBtn {
        bottom: 25px;
        right: 25px;
        padding: 14px 22px;
        font-size: 15px;
        min-width: 110px;
    }
}

@media (max-width: 768px) {
    /* Tablet portrait adjustments */
    #splashVideo {
        object-position: center 45%;
    }
    
    #unmuteBtn {
        bottom: 20px;
        right: 20px;
        padding: 12px 20px;
        font-size: 14px;
        min-width: 100px;
        border-radius: 28px;
    }
}

@media (max-width: 480px) {
    /* Mobile landscape adjustments */
    #splashVideo {
        object-position: center 50%;
        height: 100vh !important;
    }
    
    #unmuteBtn {
        bottom: 15px;
        right: 15px;
        padding: 10px 16px;
        font-size: 12px;
        min-width: 90px;
        border-radius: 25px;
    }
}

@media (max-width: 375px) {
    /* Small mobile adjustments */
    #splashVideo {
        object-position: center 55%;
    }
    
    #unmuteBtn {
        bottom: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 11px;
        min-width: 80px;
        border-radius: 22px;
    }
}

@media (max-width: 320px) {
    /* Extra small mobile adjustments */
    #splashVideo {
        object-position: center 60%;
    }
    
    #unmuteBtn {
        bottom: 10px;
        right: 10px;
        padding: 7px 12px;
        font-size: 10px;
        min-width: 70px;
        border-radius: 20px;
    }
}

/* Orientation specific adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    /* Mobile landscape orientation */
    #splashVideo {
        object-position: center 25%;
    }
    
    #unmuteBtn {
        bottom: 15px;
        right: 15px;
        padding: 10px 16px;
        font-size: 12px;
        min-width: 90px;
    }
}

/* High DPI/Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #splashVideo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    #unmuteBtn {
        transition: none;
    }
    
    #unmuteBtn:hover {
        transform: none;
    }
    
    #unmuteBtn:active {
        transform: none;
    }
}



/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    #unmuteBtn:hover {
        transform: none;
        opacity: 1;
    }
    
    #unmuteBtn:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

/* Print styles */
@media print {
    #splashVideo {
        display: none !important;
    }
    
    #unmuteBtn {
        display: none !important;
    }
    
    body::before {
        content: "SNACC - Snack Coin Collector";
        display: block;
        text-align: center;
        font-size: 24px;
        margin-top: 50px;
        color: black;
    }
}

/* Very large screens (4K and above) */
@media (min-width: 2560px) {
    #splashVideo {
        object-position: center 20%;
    }
    
    #unmuteBtn {
        bottom: 40px;
        right: 40px;
        padding: 20px 30px;
        font-size: 18px;
        min-width: 140px;
        border-radius: 35px;
    }
}

/* Foldable devices support */
@media (max-width: 768px) and (max-height: 500px) {
    #splashVideo {
        object-position: center 30%;
    }
    
    #unmuteBtn {
        bottom: 8px;
        right: 8px;
        padding: 6px 10px;
        font-size: 10px;
        min-width: 70px;
        border-radius: 18px;
    }
}

/* Emergency fallback for very small viewports */
@media (max-width: 240px) {
    #splashVideo {
        object-position: center 65%;
    }
    
    #unmuteBtn {
        bottom: 5px;
        right: 5px;
        padding: 5px 8px;
        font-size: 9px;
        min-width: 60px;
        border-radius: 15px;
    }
}

/* Loading state improvements for slow connections */
@media (prefers-reduced-data: reduce) {
    #splashVideo {
        autoplay: false;
    }
    
    #unmuteBtn::before {
        content: "▶ Play Video";
    }
}

/* Support for devices with notch/cutout */
@supports(padding: max(0px)) {
    #unmuteBtn {
        right: max(15px, env(safe-area-inset-right));
        bottom: max(15px, env(safe-area-inset-bottom));
    }
}

/* Support for variable fonts if available */
@supports (font-variation-settings: normal) {
    #unmuteBtn {
        font-variation-settings: "wght" 700;
    }
}

/* Backup for browsers that don't support video */
#splashVideo:not([src]) {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Neon 80s', sans-serif;
    font-size: 18px;
    text-align: center;
}

#splashVideo:not([src])::before {
    content: "Video not supported or failed to load";
}

/* Performance optimizations for low-end devices */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    #splashVideo {
        display: none;
    }
    
}