body {
            background-color: #000000;
            color: #ffffff;
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
        }

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

        ::-webkit-scrollbar-track {
            background: transparent;
        }

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

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Hide scrollbar for horizontal rows */
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        .fade-in { animation: fadeIn 0.4s ease-out forwards; }

        @keyframes spin {
            100% { transform: rotate(360deg); }
        }
        .animate-spin { animation: spin 1s linear infinite; }

        /* Skeleton shimmer */
        @keyframes shimmer {
            0%   { background-position: -700px 0; }
            100% { background-position:  700px 0; }
        }
        .skeleton {
            background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
            background-size: 700px 100%;
            animation: shimmer 1.4s infinite linear;
            border-radius: 6px;
        }
        .skeleton-card {
            aspect-ratio: 2/3;
            border-radius: 6px;
            overflow: hidden;
        }

        /* ── Intro Animation ────────────────────────────────── */
        #intro-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        /* Phase 1: logo appears */
        @keyframes introLogoIn {
            0%   { opacity: 0; transform: scale(0.72) translateY(16px); filter: blur(12px); }
            35%  { opacity: 1; transform: scale(1.04) translateY(0);    filter: blur(0); }
            55%  { transform: scale(1); }
            75%  { opacity: 1; transform: scale(1.02); }
            100% { opacity: 0; transform: scale(1.18); filter: blur(4px); }
        }
        #intro-logo {
            position: relative;
            font-size: clamp(3.5rem, 12vw, 9rem);
            font-weight: 900;
            letter-spacing: -0.04em;
            color: #E50914;
            animation: introLogoIn 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            text-shadow:
                0 0 40px rgba(229,9,20,0.9),
                0 0 80px rgba(229,9,20,0.5),
                0 0 160px rgba(229,9,20,0.25);
        }
        /* Shine streak across the logo */
        @keyframes introShine {
            0%   { left: -120%; }
            100% { left: 160%; }
        }
        #intro-logo::after {
            content: '';
            position: absolute;
            top: -10%;
            left: -120%;
            width: 60%;
            height: 120%;
            background: linear-gradient(105deg,
                transparent 20%,
                rgba(255,255,255,0.18) 50%,
                transparent 80%);
            transform: skewX(-15deg);
            animation: introShine 0.9s 0.5s ease-in-out forwards;
        }
        /* Phase 2: whole overlay fades out */
        @keyframes introOverlayOut {
            0%   { opacity: 1; }
            100% { opacity: 0; }
        }
        #intro-overlay.fade-out {
            animation: introOverlayOut 0.55s ease-out forwards;
            pointer-events: none;
        }
        /* Subtle radial purple bloom behind logo */
        #intro-bloom {
            position: absolute;
            width: min(700px, 90vw);
            height: min(700px, 90vw);
            border-radius: 50%;
            background: radial-gradient(circle,
                rgba(229,9,20,0.35) 0%,
                rgba(229,9,20,0.08) 50%,
                transparent 70%);
            animation: introLogoIn 2.6s cubic-bezier(0.22,1,0.36,1) forwards;
            pointer-events: none;
        }

        /* Safe area padding for mobile bottom nav */
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            .pb-safe {
                padding-bottom: env(safe-area-inset-bottom);
            }
        }

        /* Video Player Range Styling */
        input[type=range] {
            -webkit-appearance: none;
            background: rgba(255, 255, 255, 0.2);
            height: 4px;
            border-radius: 2px;
            outline: none;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #E50914;
            cursor: pointer;
            transition: transform 0.1s;
        }

        input[type=range]::-webkit-slider-thumb:hover {
            transform: scale(1.3);
        }