/* Overlay Background */
    .reel-overlay {
        display: none; 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100vw; 
        height: 100dvh; /* Dynamic height for mobile browsers */
        background: rgba(0,0,0,0.9); 
        z-index: 9999; 
        justify-content: center; 
        align-items: center;
        background: radial-gradient(circle, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.95) 100%);
    }

    /* The "Reel" Container */
    .reel-container {
        position: relative; 
        /* On mobile: fill screen. On desktop: 9/16 ratio */
        width: 100%; 
        height: 100%; 
        max-width: 450px; /* Standard Reel/TikTok width */
        max-height: 800px; /* Standard Reel/TikTok height */
        background: #000; 
        overflow: hidden;
    }

    /* Video scaling */
    video { 
        width: 100%; 
        height: 100%; 
        object-fit: cover; /* Ensures the video fills the 9:16 frame */
    }

    /* Mobile specific: Remove the max-constraints so it's truly full screen */
    @media (max-width: 500px) {
        .reel-container {
            max-width: 100%;
            max-height: 100%;
            border-radius: 0;
        }
        .reel-overlay {
            background: #000; /* Pure black on mobile for immersion */
        }
    }

    .reel-caption {
        position: absolute; 
        bottom: 30px; 
        left: 15px; 
        color: white;
        max-width: 80%; 
        text-shadow: 2px 2px 5px rgba(0,0,0,1);
        z-index: 10;
        font-weight: 400;
    }

    .close-x {
        position: absolute; 
        top: env(safe-area-inset-top, 20px); 
        right: 20px; 
        color: white;
        font-size: 30px; 
        cursor: pointer; 
        z-index: 10001;
        opacity: 0.8;
    }