:root {
        --nx-bg-deep: #0a0a1a;
        --nx-orange: #f97316;
        --nx-pink: #ec4899;
        --nx-violet: #8b5cf6;
        --nx-text: #f1f5f9;
        --nx-gradient-sunset: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
    }

    #main-header.neon-header.nx-header {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        background: linear-gradient(180deg, #0f0f1c 0%, #0a0a1a 50%, #070710 100%) !important;
        border-bottom: 1px solid rgba(249, 115, 22, 0.18) !important;
        box-shadow:
            0 2px 0 rgba(0, 0, 0, 0.35) inset,
            0 8px 28px rgba(0, 0, 0, 0.55),
            0 0 48px rgba(249, 115, 22, 0.07) !important;
    }

    #main-header.neon-header.nx-header.scrolled {
        background: linear-gradient(180deg, #12121f 0%, #0a0a14 100%) !important;
        border-bottom-color: rgba(236, 72, 153, 0.22) !important;
        box-shadow:
            0 2px 0 rgba(0, 0, 0, 0.4) inset,
            0 10px 32px rgba(0, 0, 0, 0.6),
            0 0 36px rgba(139, 92, 246, 0.08) !important;
    }

    #main-header.neon-header.nx-header::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.55;
        background:
            radial-gradient(ellipse 100% 90% at 50% -30%, rgba(249, 115, 22, 0.14), transparent 55%),
            radial-gradient(ellipse 70% 50% at 85% 20%, rgba(236, 72, 153, 0.08), transparent 50%),
            radial-gradient(ellipse 60% 50% at 10% 30%, rgba(139, 92, 246, 0.06), transparent 50%);
    }

    #main-header.neon-header.nx-header .container {
        position: relative;
        z-index: 1;
    }

    #main-header.neon-header.nx-header .logo a {
        font-family: 'Space Grotesk', 'Inter', sans-serif;
        letter-spacing: 0.02em;
    }

    #main-header.neon-header.nx-header .logo .neon-text {
        color: transparent !important;
        background: linear-gradient(135deg, #ffffff 0%, #fed7aa 45%, #f97316 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: none !important;
        filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.25));
    }

    #main-header.neon-header.nx-header .logo .neon-text-red {
        background: var(--nx-gradient-sunset);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: none !important;
        filter: drop-shadow(0 0 14px rgba(236, 72, 153, 0.35));
    }

    #main-header.neon-header.nx-header .logo .fa-gamepad {
        color: #f97316 !important;
        filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.5));
    }

    #main-header.neon-header.nx-header .header-auth-btn--login {
        color: #ffedd5 !important;
        border-color: rgba(249, 115, 22, 0.5) !important;
        background: linear-gradient(165deg, rgba(20, 12, 8, 0.95) 0%, rgba(30, 15, 10, 0.9) 100%) !important;
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.35) inset,
            0 0 20px rgba(249, 115, 22, 0.12) !important;
    }

    #main-header.neon-header.nx-header .header-auth-btn--register {
        color: #fce7f3 !important;
        border-color: rgba(236, 72, 153, 0.5) !important;
        background: linear-gradient(165deg, rgba(28, 8, 22, 0.95) 0%, rgba(36, 10, 30, 0.92) 100%) !important;
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.35) inset,
            0 0 22px rgba(236, 72, 153, 0.14) !important;
    }

    @media (max-width: 1024px) {
        #main-header.neon-header.nx-header {
            background: linear-gradient(180deg, #12121f 0%, #0a0a1a 48%, #06060e 100%) !important;
            border-bottom: 1px solid rgba(249, 115, 22, 0.22) !important;
            box-shadow:
                0 2px 0 rgba(0, 0, 0, 0.35) inset,
                0 8px 28px rgba(0, 0, 0, 0.55),
                0 0 40px rgba(249, 115, 22, 0.08) !important;
        }
        #main-header.neon-header.nx-header.scrolled {
            background: linear-gradient(180deg, #14141f 0%, #0b0b14 100%) !important;
            border-bottom-color: rgba(236, 72, 153, 0.28) !important;
        }
        #main-header.neon-header.nx-header::before {
            background:
                radial-gradient(ellipse 120% 100% at 50% -25%, rgba(249, 115, 22, 0.16), transparent 58%),
                radial-gradient(ellipse 80% 60% at 75% 0%, rgba(236, 72, 153, 0.1), transparent 52%) !important;
            opacity: 0.65 !important;
        }
        .mobile-menu-ultra {
            background: linear-gradient(180deg, #12121c 0%, #0a0a14 100%) !important;
            border-right-color: rgba(249, 115, 22, 0.18) !important;
        }
    }

    /* ——— NEXUS: hamburguesa + drawer móvil (sobrescribe cyan legacy) ——— */
    @media (max-width: 1024px) {
        .neon-header.nx-header .mobile-menu-toggle,
        #main-header.nx-header .mobile-menu-toggle {
            background: rgba(18, 10, 20, 0.92) !important;
            border: 1px solid rgba(249, 115, 22, 0.45) !important;
            box-shadow: 0 0 20px rgba(249, 115, 22, 0.12) !important;
            color: #fdba74 !important;
            -webkit-tap-highlight-color: rgba(249, 115, 22, 0.25) !important;
        }
        .neon-header.nx-header .mobile-menu-toggle:hover,
        .neon-header.nx-header .mobile-menu-toggle:active,
        #main-header.nx-header .mobile-menu-toggle:hover,
        #main-header.nx-header .mobile-menu-toggle:active {
            background: rgba(30, 14, 24, 0.98) !important;
            border-color: rgba(236, 72, 153, 0.55) !important;
            box-shadow: 0 0 24px rgba(236, 72, 153, 0.2) !important;
        }
        .neon-header.nx-header .mobile-menu-toggle i,
        #main-header.nx-header .mobile-menu-toggle i {
            color: #fdba74 !important;
            filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.45)) !important;
        }

        .neon-header.nx-header .notification-mobile .notification-icon {
            background: rgba(18, 10, 20, 0.88) !important;
            border: 1px solid rgba(236, 72, 153, 0.35) !important;
        }
        .neon-header.nx-header .notification-mobile .notification-icon i {
            color: #f9a8d4 !important;
        }

        .mobile-menu-ultra {
            background: linear-gradient(180deg, #14121c 0%, #0a0812 55%, #06050c 100%) !important;
            border-right: 1px solid rgba(249, 115, 22, 0.2) !important;
            box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45) !important;
        }
        .mobile-menu-ultra::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(249, 115, 22, 0.55), rgba(236, 72, 153, 0.45)) !important;
        }
        .mobile-menu-ultra::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(249, 115, 22, 0.75), rgba(139, 92, 246, 0.5)) !important;
        }

        .mobile-menu-ultra .nav-link-ultra .link-border-glow {
            background: linear-gradient(135deg, #f97316, #ec4899, #8b5cf6) !important;
        }
        .mobile-menu-ultra .nav-link-ultra:hover {
            background: linear-gradient(90deg, rgba(249, 115, 22, 0.12) 0%, rgba(236, 72, 153, 0.1) 100%) !important;
            color: #fff !important;
            box-shadow: 0 8px 28px rgba(249, 115, 22, 0.18), inset 0 0 18px rgba(236, 72, 153, 0.08) !important;
        }
        .mobile-menu-ultra .nav-link-ultra.active {
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.18) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
            color: #ffedd5 !important;
            box-shadow: 0 8px 28px rgba(249, 115, 22, 0.25), inset 0 0 24px rgba(236, 72, 153, 0.12) !important;
        }

        .mobile-menu-ultra .link-icon-ultra {
            background: rgba(249, 115, 22, 0.1) !important;
            border: 1px solid rgba(249, 115, 22, 0.28) !important;
        }
        .mobile-menu-ultra .nav-link-ultra:hover .link-icon-ultra,
        .mobile-menu-ultra .nav-link-ultra.active .link-icon-ultra {
            background: rgba(236, 72, 153, 0.15) !important;
            border-color: rgba(236, 72, 153, 0.4) !important;
        }
        .mobile-menu-ultra .link-icon-ultra i {
            color: #fdba74 !important;
        }
        .mobile-menu-ultra .nav-link-ultra.active .link-icon-ultra i,
        .mobile-menu-ultra .nav-link-ultra:hover .link-icon-ultra i {
            color: #fce7f3 !important;
        }

        .mobile-menu-ultra .icon-bg-glow {
            background: #f97316 !important;
        }

        .mobile-menu-ultra .link-arrow-ultra {
            color: rgba(251, 191, 36, 0.75) !important;
        }
        .mobile-menu-ultra .nav-link-ultra:hover .link-arrow-ultra,
        .mobile-menu-ultra .nav-link-ultra.active .link-arrow-ultra {
            color: #fcd34d !important;
        }

        .mobile-menu-ultra.mobile-menu-drawer .sidebar-header-ultra {
            background: linear-gradient(180deg, #1a1420 0%, #120e18 100%) !important;
            border-bottom: 1px solid rgba(249, 115, 22, 0.15) !important;
        }
        .mobile-menu-ultra.mobile-menu-drawer .nav-group-header-ultra .header-content-ultra span {
            color: #a8a29e !important;
        }
        .mobile-menu-ultra.mobile-menu-drawer {
            background: linear-gradient(180deg, #15121a 0%, #0a0810 55%, #050408 100%) !important;
        }

        /* Gana a .mobile-menu-drawer .nav-link-ultra.active (cyan) */
        .mobile-menu-ultra.mobile-menu-drawer .nav-link-ultra.active {
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(139, 92, 246, 0.16) 100%) !important;
            border-color: rgba(249, 115, 22, 0.42) !important;
            color: #ffedd5 !important;
        }
        .mobile-menu-ultra.mobile-menu-drawer .link-icon-ultra i {
            color: #fdba74 !important;
        }
        .mobile-menu-ultra.mobile-menu-drawer .nav-link-ultra.active .link-icon-ultra i,
        .mobile-menu-ultra.mobile-menu-drawer .nav-link-ultra:hover .link-icon-ultra i {
            color: #fce7f3 !important;
        }
    }

    /* Tablet: reglas duplicadas con !important que antes forzaban cyan */
    @media (max-width: 1024px) and (min-width: 769px) {
        .neon-header.nx-header .mobile-menu-toggle {
            color: #fdba74 !important;
            border: 2px solid rgba(249, 115, 22, 0.4) !important;
            background: rgba(12, 8, 16, 0.75) !important;
        }
        .neon-header.nx-header .mobile-menu-toggle:hover {
            background: rgba(249, 115, 22, 0.12) !important;
            box-shadow: 0 0 18px rgba(249, 115, 22, 0.28) !important;
            border-color: rgba(236, 72, 153, 0.5) !important;
        }
    }