* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
        }

        /* Accessibility: visible focus ring for keyboard users */
        :focus-visible {
            outline: 2px solid rgba(139, 92, 246, 0.7);
            outline-offset: 2px;
        }

        :root {
            --red: #ff0040;
            --orange: #ff6600;
            --yellow: #ffcc00;
            --green: #00ff00;
            --cyan: #00ffff;
            --blue: #0066ff;
            --purple: #9900ff;
            --dark: #0d0d0d;
            /* Performance animation speed */
            --anim-fast: 0.15s;
            --anim-normal: 0.3s;
            --anim-slow: 0.5s;
        }
        
        /* 🚀 PERFORMANCE: Reduce animations on low-power devices */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }
        
        /* 🚀 PERFORMANCE: Optimized animations (not disabled) */
        /* Use CSS containment for animated elements */
        .powerup, .particle, .orb, .loading-orb {
            contain: layout style;
        }
        
        /* Disable only the most expensive effects */
        .scanline {
            display: none !important;
        }
        
        /* Optimize backdrop-filter (expensive) - reduce quality */
        .backdrop-blur,
        [style*="backdrop-filter"] {
            backdrop-filter: blur(5px) !important;
            -webkit-backdrop-filter: blur(5px) !important;
        }
        
        /* 🚀 PERFORMANCE: GPU acceleration for smooth animations */
        .game-card, .console-card, .showcase-card, .live-card, 
        nav, .modal, .popup, .hero-content, .loading-screen {
            transform: translateZ(0);
            backface-visibility: hidden;
            will-change: transform, opacity;
        }
        
        /* 🚀 PERFORMANCE: Pause animations when not visible */
        .paused-animation *, 
        .paused-animation *::before, 
        .paused-animation *::after {
            animation-play-state: paused !important;
        }

        /* 🚀 EMULATOR PERFORMANCE MODE — Kill ALL heavy effects on parent page */
        body.emulator-performance-mode *:not(#emulatorModal):not(#emulatorModal *) {
            animation: none !important;
            animation-play-state: paused !important;
            transition: none !important;
        }
        body.emulator-performance-mode *:not(#emulatorModal):not(#emulatorModal *)::before,
        body.emulator-performance-mode *:not(#emulatorModal):not(#emulatorModal *)::after {
            animation: none !important;
            transition: none !important;
        }
        /* Kill backdrop-filter globally during gameplay — very GPU expensive */
        body.emulator-performance-mode *:not(#emulatorModal):not(#emulatorModal *) {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            filter: none !important;
        }
        /* Hide heavy decorative elements behind emulator */
        body.emulator-performance-mode .hero-section,
        body.emulator-performance-mode .bg-animation,
        body.emulator-performance-mode .grid-overlay,
        body.emulator-performance-mode .powerup,
        body.emulator-performance-mode .particle,
        body.emulator-performance-mode .orb,
        body.emulator-performance-mode .loading-orb,
        body.emulator-performance-mode .scanline,
        body.emulator-performance-mode #heroPlasmaCanvas,
        body.emulator-performance-mode #heroLightningCanvas,
        body.emulator-performance-mode #heroParticlesCanvas {
            display: none !important;
            visibility: hidden !important;
        }
        /* Reduce will-change overhead — browser allocates GPU layers for these */
        body.emulator-performance-mode *:not(#emulatorModal):not(#emulatorModal *) {
            will-change: auto !important;
        }

        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
            /* Prevent pull-to-refresh on mobile */
            overscroll-behavior-y: contain;
        }
        
        /* ==================== CUSTOM SCROLLBAR - GLOBAL ==================== */
        /* Webkit browsers (Chrome, Safari, Edge, Opera) */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        
        ::-webkit-scrollbar-track {
            background: linear-gradient(180deg, 
                rgba(13, 13, 13, 0.95) 0%, 
                rgba(20, 10, 25, 0.95) 50%,
                rgba(13, 13, 13, 0.95) 100%);
            border-radius: 10px;
            border: 1px solid rgba(255, 0, 64, 0.1);
        }
        
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, 
                var(--red) 0%, 
                var(--orange) 50%, 
                var(--red) 100%);
            border-radius: 10px;
            border: 2px solid rgba(13, 13, 13, 0.8);
            box-shadow: 
                inset 0 0 6px rgba(255, 255, 255, 0.2),
                0 0 10px rgba(255, 0, 64, 0.3);
            transition: all 0.3s ease;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, 
                var(--orange) 0%, 
                var(--yellow) 50%, 
                var(--orange) 100%);
            box-shadow: 
                inset 0 0 8px rgba(255, 255, 255, 0.3),
                0 0 20px rgba(255, 102, 0, 0.5);
        }
        
        ::-webkit-scrollbar-thumb:active {
            background: linear-gradient(180deg, 
                var(--yellow) 0%, 
                #fff 50%, 
                var(--yellow) 100%);
        }
        
        ::-webkit-scrollbar-corner {
            background: rgba(13, 13, 13, 0.95);
        }
        
        /* Firefox */
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--red) rgba(13, 13, 13, 0.95);
        }
        
        /* Scrollbar for specific containers with custom styles */
        .profile-modal-content::-webkit-scrollbar,
        .user-profile-content::-webkit-scrollbar,
        .modal-content::-webkit-scrollbar {
            width: 8px;
        }
        
        .profile-modal-content::-webkit-scrollbar-track,
        .user-profile-content::-webkit-scrollbar-track,
        .modal-content::-webkit-scrollbar-track {
            background: linear-gradient(180deg, 
                rgba(0, 0, 0, 0.4) 0%, 
                rgba(255, 0, 64, 0.05) 50%,
                rgba(0, 0, 0, 0.4) 100%);
            border-radius: 8px;
            margin: 8px 0;
        }
        
        .profile-modal-content::-webkit-scrollbar-thumb,
        .user-profile-content::-webkit-scrollbar-thumb,
        .modal-content::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, 
                rgba(255, 0, 64, 0.8) 0%, 
                rgba(255, 102, 0, 0.9) 50%, 
                rgba(255, 0, 64, 0.8) 100%);
            border-radius: 8px;
            border: 2px solid transparent;
            background-clip: padding-box;
        }
        
        .profile-modal-content::-webkit-scrollbar-thumb:hover,
        .user-profile-content::-webkit-scrollbar-thumb:hover,
        .modal-content::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, 
                var(--orange) 0%, 
                var(--yellow) 50%, 
                var(--orange) 100%);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #0d0d0d;
            color: white;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            /* Prevent pull-to-refresh on mobile */
            overscroll-behavior-y: contain;
            text-rendering: optimizeLegibility;
            font-size: 16px;
            line-height: 1.6;
            letter-spacing: 0.02em;
            padding-top: 0 !important;
            margin-top: 0 !important;
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }

        /* GPU Acceleration for animations */
        .console-item,
        .console-launch-btn,
        .game-btn,
        .nav-menu,
        .back-to-top {
            will-change: transform;
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        /* Reduce motion for users who prefer it */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* Enhanced pixel background with glow */
        .pixel-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            background: 
                linear-gradient(0deg, transparent 24%, rgba(255, 0, 64, 0.05) 25%, rgba(255, 0, 64, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 0, 64, 0.05) 75%, rgba(255, 0, 64, 0.05) 76%, transparent 77%, transparent),
                linear-gradient(90deg, transparent 24%, rgba(255, 0, 64, 0.05) 25%, rgba(255, 0, 64, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 0, 64, 0.05) 75%, rgba(255, 0, 64, 0.05) 76%, transparent 77%, transparent);
            background-size: 50px 50px;
            background-color: #0d0d0d;
        }

        /* Animated gradient overlay - DISABLED FOR PERFORMANCE */
        .gradient-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background: 
                radial-gradient(circle at 20% 30%, rgba(255, 0, 64, 0.1) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(255, 102, 0, 0.1) 0%, transparent 40%);
            pointer-events: none;
            opacity: 0.7;
            /* animation: gradientPulse 8s ease-in-out infinite; DISABLED */
        }

        /* DISABLED FOR PERFORMANCE
        @keyframes gradientPulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
        */

        /* Scan line effect - COMPLETELY DISABLED FOR PERFORMANCE */
        .scanline {
            display: none !important;
            /* position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--red), transparent);
            z-index: 9999;
            animation: scan 4s linear infinite;
            box-shadow: 0 0 20px var(--red);
            pointer-events: none; */
        }

        /* DISABLED FOR PERFORMANCE
        @keyframes scan {
            0% { transform: translateY(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(100vh); opacity: 0; }
        }
        */

        /* Navigation with enhanced effects */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 0.6rem 3%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            background: linear-gradient(180deg, rgba(13, 13, 13, 0.98) 0%, rgba(13, 13, 13, 0.95) 100%);
            border-bottom: 2px solid var(--red);
            box-shadow: 
                0 4px 20px rgba(255, 0, 64, 0.3),
                inset 0 -2px 8px rgba(255, 0, 64, 0.15);
            transition: all 0.3s;
            gap: 1rem;
            height: 60px;
        }

        nav.scrolled {
            padding: 0.5rem 3%;
            background: rgba(13, 13, 13, 0.99);
            box-shadow: 
                0 6px 30px rgba(255, 0, 64, 0.5),
                inset 0 -2px 8px rgba(255, 0, 64, 0.2);
        }

        .logo {
            font-family: 'Black Ops One', cursive;
            font-size: 1.2rem;
            letter-spacing: 2px;
            color: var(--red);
            text-shadow: 
                2px 2px 0 var(--orange),
                0 0 20px var(--red);
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
            white-space: nowrap;
            cursor: pointer;
        }

        .logo:hover {
            transform: scale(1.02);
            text-shadow: 
                2px 2px 0 var(--orange),
                0 0 30px var(--red);
        }

        .logo-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--red), var(--orange));
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            /* animation: pulse 2s ease-in-out infinite; DISABLED FOR PERFORMANCE */
            box-shadow: 0 0 10px var(--red);
        }

        /* DISABLED FOR PERFORMANCE
        @keyframes pulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 10px var(--red); }
            50% { transform: scale(1.05); box-shadow: 0 0 20px var(--orange); }
        }
        */

        .nav-menu {
            display: flex;
            gap: 0.3rem;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .nav-menu li a {
            color: white;
            text-decoration: none;
            font-family: 'Russo One', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            transition: all 0.3s;
            padding: 0.5rem 0.8rem;
            border-radius: 6px;
            background: transparent;
            border: 1px solid transparent;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .nav-menu li a:hover {
            color: var(--yellow);
            background: rgba(255, 0, 64, 0.15);
            border-color: rgba(255, 0, 64, 0.5);
            transform: translateY(-2px);
        }

        .nav-menu li a.active {
            color: var(--yellow);
            background: rgba(255, 0, 64, 0.2);
            border-color: var(--red);
        }

        .nav-menu li a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--red), var(--orange));
            transition: all 0.3s;
            transform: translateX(-50%);
        }

        .nav-menu li a:hover::after {
            width: 80%;
        }

        /* Auth Button - Animated */
        .auth-btn {
            position: relative;
            background: linear-gradient(135deg, var(--red), var(--orange));
            border: none;
            padding: 0.5rem 1rem;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.3s;
            box-shadow: 0 3px 12px rgba(255, 0, 64, 0.4);
            white-space: nowrap;
        }

        .auth-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }

        .auth-btn:hover::before {
            left: 100%;
        }

        .auth-btn:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 5px 20px rgba(255, 0, 64, 0.5);
        }

        .auth-btn-text {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .auth-btn-icon {
            font-size: 0.9rem;
            /* animation: bounce 1s ease-in-out infinite; DISABLED FOR PERFORMANCE */
        }

        /* DISABLED FOR PERFORMANCE
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-2px); }
        }
        */

        /* Navbar Right Area - Compact Container */
        .navbar-right-area {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
        }

        /* Favorites Button in Navbar */
        .nav-favorites-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, rgba(255, 204, 0, 0.15), rgba(255, 102, 0, 0.1));
            border: 1.5px solid var(--yellow);
            padding: 0.4rem 0.9rem;
            color: var(--yellow);
            font-family: 'Russo One', sans-serif;
            font-size: 0.7rem;
            cursor: pointer;
            border-radius: 20px;
            transition: all 0.3s;
            white-space: nowrap;
            position: relative;
        }

        .nav-favorites-btn:hover {
            background: linear-gradient(135deg, rgba(255, 204, 0, 0.25), rgba(255, 102, 0, 0.2));
            border-color: var(--orange);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 204, 0, 0.3);
        }

        .nav-fav-icon {
            font-size: 1rem;
            /* animation: favPulse 2s ease-in-out infinite; DISABLED FOR PERFORMANCE */
        }

        /* DISABLED FOR PERFORMANCE
        @keyframes favPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }
        */

        .nav-fav-text {
            font-weight: 600;
            letter-spacing: 1px;
            font-size: 0.7rem;
        }

        .nav-fav-count {
            display: none;
        }

        /* Subscribe Button - Premium Gold */
        .nav-subscribe-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
            border: 1.5px solid #ffd700;
            padding: 0.4rem 0.9rem;
            color: #ffd700;
            font-family: 'Russo One', sans-serif;
            font-size: 0.7rem;
            cursor: pointer;
            border-radius: 20px;
            transition: all 0.3s;
            white-space: nowrap;
            position: relative;
            overflow: hidden;
        }

        .nav-subscribe-btn:hover {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.2));
            border-color: #ffaa00;
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(255, 215, 0, 0.35);
        }

        .nav-subscribe-btn .subscribe-icon {
            font-size: 0.9rem;
        }

        .nav-subscribe-btn .subscribe-text {
            font-weight: 600;
            letter-spacing: 1px;
        }

        .nav-subscribe-btn .subscribe-badge {
            background: linear-gradient(135deg, #ffd700, #ff8c00);
            color: #1a1a2e;
            font-size: 0.55rem;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 8px;
            letter-spacing: 0.5px;
        }

        /* User logged in button */
        .user-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(255, 255, 255, 0.08);
            border: 1.5px solid var(--red);
            padding: 0.35rem 0.8rem;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.7rem;
            cursor: pointer;
            border-radius: 20px;
            transition: all 0.3s;
            white-space: nowrap;
        }

        .user-btn:hover {
            background: rgba(255, 0, 64, 0.25);
            border-color: var(--orange);
            transform: translateY(-1px);
        }

        .user-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--red), var(--orange));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            overflow: hidden;
            flex-shrink: 0;
        }

        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        /* Profile Dropdown */
        .profile-dropdown {
            position: fixed;
            top: 65px;
            right: 15px;
            background: rgba(13, 13, 13, 0.98);
            border: 2px solid var(--red);
            border-radius: 12px;
            padding: 0.4rem;
            min-width: 200px;
            z-index: 10005;
            box-shadow: 0 12px 40px rgba(255, 0, 64, 0.5);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px) scale(0.95);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(15px);
        }

        .profile-dropdown.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }
        
        .dropdown-header {
            padding: 0.7rem 0.9rem;
            border-bottom: 1px solid rgba(255,0,64,0.3);
            margin-bottom: 0.4rem;
        }
        
        .dropdown-user-name {
            font-family: 'Russo One', sans-serif;
            color: var(--yellow);
            font-size: 0.85rem;
        }
        
        .dropdown-user-email {
            font-size: 0.7rem;
            color: rgba(255,255,255,0.5);
            margin-top: 2px;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0.65rem 0.9rem;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.8rem;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.2s;
        }

        .dropdown-item:hover {
            background: rgba(255, 0, 64, 0.2);
            color: var(--yellow);
        }
        
        .dropdown-item.logout-item {
            color: #ff6b6b;
        }
        
        .dropdown-item.logout-item:hover {
            background: rgba(255, 107, 107, 0.2);
            color: #ff4444;
        }

        .dropdown-item-icon {
            font-size: 1rem;
        }

        .dropdown-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--red), transparent);
            margin: 0.4rem 0;
        }

        /* Language Selector - Compact */
        .language-selector {
            position: relative;
            display: flex;
            align-items: center;
        }

        .language-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            background: rgba(255, 255, 255, 0.08);
            border: 1.5px solid var(--red);
            padding: 0.35rem 0.6rem;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.65rem;
            cursor: pointer;
            border-radius: 15px;
            transition: all 0.3s;
        }

        .language-btn:hover {
            background: rgba(255, 0, 64, 0.2);
            border-color: var(--orange);
        }

        .language-btn .flag {
            font-size: 0.9rem;
        }

        .language-dropdown {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            background: rgba(13, 13, 13, 0.98);
            border: 2px solid var(--red);
            border-radius: 10px;
            padding: 0.25rem;
            min-width: 110px;
            z-index: 1002;
            box-shadow: 0 10px 25px rgba(255, 0, 64, 0.3);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition: all 0.25s;
        }

        .language-dropdown.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .language-option {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0.5rem 0.7rem;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.75rem;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.2s;
        }

        .language-option:hover {
            background: rgba(255, 0, 64, 0.2);
            color: var(--yellow);
        }

        .language-option.active {
            background: rgba(255, 0, 64, 0.3);
            color: var(--yellow);
        }
        
        /* Admin Toggle Button - Compact */
        .admin-toggle-btn {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            box-shadow: 0 3px 10px rgba(251, 191, 36, 0.4);
            position: relative;
            z-index: 100;
        }
        
        .admin-toggle-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(251, 191, 36, 0.6);
        }

        /* Admin Sidebar (Right Side) */
        .admin-sidebar {
            position: fixed;
            top: 0;
            right: -450px;
            width: 450px;
            max-width: 450px;
            height: 100vh;
            background: linear-gradient(180deg, rgba(13, 13, 13, 0.99) 0%, rgba(20, 0, 0, 0.98) 100%);
            border-left: 3px solid var(--red);
            z-index: 10003;
            transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow-y: auto;
            box-shadow: -10px 0 50px rgba(255, 0, 64, 0.4);
        }

        .admin-sidebar.open {
            right: 0;
        }

        .admin-sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10002;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all 0.3s;
        }

        .admin-sidebar-overlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        /* Admin Form Select Styles */
        .admin-form-select {
            width: 100%;
            padding: 0.8rem;
            background: #1a1a1a !important;
            border: 2px solid var(--red);
            color: white !important;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff0040' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: right 10px center !important;
            background-size: 20px !important;
        }

        .admin-form-select:focus {
            outline: none;
            border-color: var(--yellow);
            box-shadow: 0 0 10px rgba(255, 0, 64, 0.3);
        }

        .admin-form-select option {
            background: #1a1a1a !important;
            color: white !important;
            padding: 12px !important;
            font-size: 1rem;
        }

        .admin-form-select option:hover,
        .admin-form-select option:focus,
        .admin-form-select option:checked {
            background: linear-gradient(135deg, var(--red), var(--orange)) !important;
            color: white !important;
        }

        /* Chat Login Overlay - Animated Version */
        .chat-login-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(165deg, rgba(13, 13, 20, 0.97), rgba(26, 10, 21, 0.98));
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 100;
            border-radius: 22px;
            overflow: hidden;
            animation: overlayFadeIn 0.5s ease;
        }
        
        .chat-login-overlay::before {
            content: '';
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse at 30% 20%, rgba(255, 0, 64, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
            pointer-events: none;
        }
        
        .chat-login-overlay::after {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='1' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");
            background-size: 50px 50px;
            opacity: 0.5;
            pointer-events: none;
            animation: patternMove 20s linear infinite;
        }
        
        @keyframes overlayFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes patternMove {
            0% { background-position: 0 0; }
            100% { background-position: 50px 50px; }
        }
        
        .chat-login-overlay .login-icon {
            font-size: 5rem;
            margin-bottom: 1.5rem;
            animation: loginIconFloat 3s ease-in-out infinite;
            filter: drop-shadow(0 0 30px rgba(255, 0, 64, 0.5));
            position: relative;
            z-index: 1;
        }
        
        @keyframes loginIconFloat {
            0%, 100% { 
                transform: translateY(0) rotate(-5deg) scale(1); 
                filter: drop-shadow(0 0 20px rgba(255, 0, 64, 0.4));
            }
            25% { 
                transform: translateY(-15px) rotate(0deg) scale(1.05); 
                filter: drop-shadow(0 0 35px rgba(255, 102, 0, 0.5));
            }
            50% { 
                transform: translateY(-8px) rotate(5deg) scale(1.02); 
                filter: drop-shadow(0 0 25px rgba(99, 102, 241, 0.5));
            }
            75% { 
                transform: translateY(-12px) rotate(-3deg) scale(1.03); 
                filter: drop-shadow(0 0 30px rgba(255, 0, 64, 0.45));
            }
        }

        .chat-login-overlay h3 {
            font-family: 'Black Ops One', 'Russo One', sans-serif;
            color: #fff;
            margin-bottom: 0.8rem;
            font-size: 1.4rem;
            text-shadow: 0 0 30px rgba(255, 0, 64, 0.5);
            position: relative;
            z-index: 1;
            background: linear-gradient(135deg, #fff, #ffd700, #ff6b6b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: titleShimmer 3s ease-in-out infinite;
        }
        
        @keyframes titleShimmer {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.3); }
        }

        .chat-login-overlay p {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 1.5rem;
            font-size: 0.95rem;
            text-align: center;
            padding: 0 2rem;
            line-height: 1.6;
            position: relative;
            z-index: 1;
        }

        .chat-login-btn {
            background: linear-gradient(135deg, #ff0040, #ff6600, #ff0040);
            background-size: 200% 100%;
            border: 2px solid rgba(255, 215, 0, 0.5);
            color: white;
            padding: 1rem 2.5rem;
            font-family: 'Russo One', sans-serif;
            font-size: 1rem;
            cursor: pointer;
            border-radius: 30px;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            z-index: 1;
            overflow: hidden;
            box-shadow: 
                0 8px 30px rgba(255, 0, 64, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            animation: btnPulse 2s ease-in-out infinite;
        }
        
        .chat-login-btn::before {
            content: '';
            position: absolute;
            inset: -50%;
            background: linear-gradient(transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg) translateY(-100%);
            transition: transform 0.6s ease;
        }
        
        @keyframes btnPulse {
            0%, 100% { 
                box-shadow: 0 8px 30px rgba(255, 0, 64, 0.4);
                background-position: 0% 50%;
            }
            50% { 
                box-shadow: 0 8px 50px rgba(255, 0, 64, 0.6), 0 0 30px rgba(255, 102, 0, 0.3);
                background-position: 100% 50%;
            }
        }

        .chat-login-btn:hover {
            transform: scale(1.1) translateY(-3px);
            box-shadow: 
                0 15px 50px rgba(255, 0, 64, 0.6),
                0 0 60px rgba(255, 102, 0, 0.3);
            border-color: #ffd700;
        }
        
        .chat-login-btn:hover::before {
            transform: rotate(45deg) translateY(100%);
        }
        
        .chat-login-btn:active {
            transform: scale(0.98);
        }

        /* ============================================
           AUTH MODAL - GAMING DESIGN v2.0
           ============================================ */
        
        @keyframes authModalSlideIn {
            0% {
                opacity: 0;
                transform: scale(0.86) translateY(40px);
                filter: blur(6px);
            }
            60% {
                filter: blur(0);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
                filter: blur(0);
            }
        }

        @keyframes authOverlayFade {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes authBorderSpin {
            to { transform: rotate(360deg); }
        }

        @keyframes authContentRise {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes authGlow {
            0%, 100% { box-shadow: 0 0 20px rgba(255, 0, 64, 0.5), 0 0 40px rgba(255, 102, 0, 0.3); }
            50% { box-shadow: 0 0 40px rgba(255, 0, 64, 0.8), 0 0 80px rgba(255, 102, 0, 0.5); }
        }
        
        @keyframes authPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }
        
        @keyframes authShine {
            0% { left: -100%; }
            100% { left: 200%; }
        }
        
        @keyframes floatParticle {
            0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
            50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
        }
        
        @keyframes borderGlow {
            0%, 100% { border-color: var(--red); }
            33% { border-color: var(--orange); }
            66% { border-color: var(--yellow); }
        }
        
        .auth-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, rgba(20, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.98) 100%);
            z-index: 99999;
            justify-content: center;
            align-items: center;
            overflow-y: auto;
            padding: 16px;
            box-sizing: border-box;
            backdrop-filter: blur(10px);
        }

        @supports (height: 100dvh) {
            .auth-modal-overlay {
                height: 100dvh;
            }
        }

        .auth-modal-overlay.active {
            display: flex !important;
            animation: authOverlayFade 0.35s ease both;
        }
        
        /* Floating particles background - DISABLED FOR PERFORMANCE */
        .auth-modal-overlay::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(2px 2px at 20% 30%, rgba(255, 0, 64, 0.5) 50%, transparent 50%),
                radial-gradient(2px 2px at 40% 70%, rgba(255, 102, 0, 0.4) 50%, transparent 50%),
                radial-gradient(2px 2px at 60% 20%, rgba(255, 204, 0, 0.3) 50%, transparent 50%);
            /* animation: floatParticle 8s ease-in-out infinite; DISABLED */
            pointer-events: none;
        }

        .auth-modal {
            background:
                linear-gradient(160deg, rgba(22, 8, 14, 0.92), rgba(12, 5, 9, 0.94));
            border: 1px solid rgba(255, 102, 0, 0.25);
            padding: 2.5rem;
            max-width: 440px;
            width: 100%;
            position: relative;
            border-radius: 24px;
            margin: auto;
            box-sizing: border-box;
            animation: authModalSlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
            overflow: hidden;
            backdrop-filter: blur(24px) saturate(140%);
            -webkit-backdrop-filter: blur(24px) saturate(140%);
            box-shadow:
                0 30px 80px rgba(0, 0, 0, 0.65),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset,
                0 1px 0 rgba(255, 255, 255, 0.08) inset;
        }

        /* Animated gradient halo behind the modal */
        .auth-modal::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 26px;
            padding: 2px;
            background: conic-gradient(from 0deg, var(--red), var(--orange), var(--yellow), var(--orange), var(--red));
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
            opacity: 0.7;
            pointer-events: none;
        }

        /* Soft top glow */
        .auth-modal::after {
            content: '';
            position: absolute;
            top: -40%;
            left: 50%;
            transform: translateX(-50%);
            width: 120%;
            height: 60%;
            background: radial-gradient(ellipse at center, rgba(255, 102, 0, 0.18), transparent 70%);
            pointer-events: none;
        }

        .auth-modal > *:not(.auth-modal-shine) {
            position: relative;
            z-index: 1;
        }
        
        /* Shine effect */
        .auth-modal-shine {
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            animation: authShine 4s ease-in-out infinite;
            pointer-events: none;
        }

        .auth-modal button,
        .auth-modal input {
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            min-height: 48px;
        }
        
        .auth-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255, 0, 64, 0.2);
            border: 2px solid var(--red);
            color: var(--red);
            font-size: 1.5rem;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .auth-close:hover {
            background: var(--red);
            color: white;
            transform: rotate(90deg) scale(1.1);
        }
        
        .auth-logo {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .auth-logo h2 {
            font-family: 'Black Ops One', cursive;
            font-size: 3rem;
            background: linear-gradient(135deg, var(--red), var(--orange), var(--yellow), var(--orange));
            background-size: 300% 300%;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradientShift 5s ease infinite;
            text-shadow: none;
            margin: 0;
            letter-spacing: 2px;
        }
        
        .auth-logo-subtitle {
            font-family: 'Barlow Condensed', sans-serif;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
            margin-top: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 3px;
        }
        
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        .auth-tabs {
            display: flex;
            gap: 0;
            margin-bottom: 2rem;
            background: rgba(255, 0, 64, 0.08);
            border-radius: 30px;
            padding: 5px;
            border: 1px solid rgba(255, 0, 64, 0.22);
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
        }
        
        .auth-tab {
            flex: 1;
            padding: 1rem 1.5rem;
            background: transparent;
            border: none;
            color: rgba(255, 255, 255, 0.55);
            font-family: 'Russo One', sans-serif;
            font-size: 1rem;
            cursor: pointer;
            border-radius: 25px;
            transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            position: relative;
            overflow: hidden;
        }
        
        .auth-tab:hover:not(.active) {
            color: white;
            background: rgba(255, 0, 64, 0.14);
        }
        
        .auth-tab.active {
            background: linear-gradient(135deg, var(--red), var(--orange));
            color: white;
            box-shadow: 0 6px 22px rgba(255, 0, 64, 0.45);
            transform: translateY(-1px);
        }
        
        .auth-content {
            display: none;
        }
        
        .auth-content.active {
            display: block;
            animation: authContentRise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        
        .auth-google-btn {
            width: 100%;
            padding: 1rem 1.5rem;
            background: linear-gradient(135deg, #ffffff, #f5f5f5);
            border: 2px solid #4285F4;
            color: #333;
            font-family: 'Russo One', sans-serif;
            font-size: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 1.5rem;
            border-radius: 12px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .auth-google-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(66, 133, 244, 0.4);
        }
        
        .auth-google-btn:active {
            transform: scale(0.98);
        }
        
        .auth-google-btn svg {
            width: 24px;
            height: 24px;
        }
        
        .auth-divider {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin: 1.5rem 0;
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.85rem;
            font-family: 'Barlow Condensed', sans-serif;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        .auth-divider::before,
        .auth-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 0, 64, 0.5), transparent);
        }
        
        .auth-input-group {
            position: relative;
            margin-bottom: 1.2rem;
        }
        
        .auth-input {
            width: 100%;
            padding: 1rem 1rem 1rem 3rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 0, 64, 0.28);
            border-radius: 14px;
            color: white;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }
        
        .auth-input:focus {
            outline: none;
            border-color: var(--orange);
            background: rgba(255, 102, 0, 0.08);
            box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15), 0 0 24px rgba(255, 102, 0, 0.18);
        }
        
        .auth-input::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }
        
        .auth-input-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.2rem;
            opacity: 0.6;
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .auth-input:focus + .auth-input-icon,
        .auth-input-group:focus-within .auth-input-icon {
            opacity: 1;
            transform: translateY(-50%) scale(1.12);
        }
        
        .auth-forgot {
            text-align: right;
            margin: -0.5rem 0 1.2rem;
        }
        
        .auth-forgot-btn {
            background: none;
            border: none;
            color: var(--yellow);
            cursor: pointer;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 0.9rem;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .auth-forgot-btn:hover {
            color: var(--orange);
            text-decoration: underline;
        }
        
        .auth-submit-btn {
            width: 100%;
            padding: 1.2rem;
            background: linear-gradient(135deg, var(--red), var(--orange));
            border: none;
            border-radius: 12px;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 1.1rem;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .auth-submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }
        
        .auth-submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(255, 0, 64, 0.5);
        }
        
        .auth-submit-btn:hover::before {
            left: 100%;
        }
        
        .auth-submit-btn:active {
            transform: scale(0.98);
        }
        
        .auth-submit-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }
        
        /* Loading spinner */
        .auth-loading {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .auth-loading.active {
            display: flex;
        }
        
        .auth-spinner {
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Auth Error Container Styles */
        .auth-error-container {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
            border: 1px solid rgba(239, 68, 68, 0.5);
            border-radius: 10px;
            padding: 12px 15px;
            margin-bottom: 15px;
            animation: errorShake 0.5s ease;
        }
        
        @keyframes errorShake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }
        
        .auth-error-message {
            color: #ef4444;
            font-size: 0.9rem;
            font-weight: 500;
            text-align: center;
            line-height: 1.4;
        }
        
        .auth-error-reset-btn {
            display: block;
            width: 100%;
            margin-top: 10px;
            padding: 8px 15px;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15));
            border: 1px solid rgba(239, 68, 68, 0.4);
            border-radius: 8px;
            color: #fca5a5;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .auth-error-reset-btn:hover {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.25));
            border-color: rgba(239, 68, 68, 0.6);
            color: white;
        }

        /* Mobile Touch Improvements */
        @media (max-width: 768px) {
            .auth-modal-overlay.active {
                align-items: flex-start;
                padding-top: 16px;
                padding-bottom: 16px;
            }

            .auth-modal {
                width: 95% !important;
                max-width: 400px !important;
                padding: 1.5rem !important;
                max-height: 90vh;
                overflow-y: auto;
                border-radius: 15px;
            }

            .auth-logo h2 {
                font-size: 2.2rem !important;
            }

            .auth-input {
                font-size: 16px !important; /* Prevents zoom on iOS */
            }
            
            .auth-tab {
                padding: 0.8rem 1rem;
                font-size: 0.9rem;
            }
        }

        /* Games Modal - Mobile Optimized */
        .games-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.98);
            z-index: 99000 !important;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .games-modal[style*="display: block"],
        .games-modal[style*="display:block"] {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        .games-modal-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
            min-height: 100%;
        }

        @media (max-width: 768px) {
            .games-modal-container {
                padding: 1rem;
            }
            
            .games-modal-header {
                flex-direction: column;
                gap: 1rem;
            }
            
            .games-modal-title {
                font-size: 1.5rem !important;
            }
            
            .games-modal-content {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 0.8rem !important;
            }
            
            #gamesModalClose {
                padding: 0.8rem 1.5rem !important;
                font-size: 1rem !important;
            }
            
            .game-card-item {
                min-height: 200px;
            }
        }

        @media (max-width: 480px) {
            .games-modal-content {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 0.5rem !important;
            }
            
            .game-card-item img {
                height: 120px !important;
            }
        }

        /* Admin Toggle Button - styles defined in navbar section above */

        /* Mobile menu toggle */
        .mobile-menu-btn {
            display: none;
            background: transparent;
            border: 2px solid var(--red);
            color: var(--red);
            font-size: 1.2rem;
            padding: 0.4rem 0.8rem;
            cursor: pointer;
            transition: all 0.3s;
            border-radius: 8px;
        }

        .mobile-menu-btn:hover {
            background: var(--red);
            color: white;
        }

        /* Search bar */
        .search-container {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .search-box {
            position: relative;
        }

        .search-input {
            background: rgba(255, 0, 64, 0.08);
            border: 2px solid rgba(255, 0, 64, 0.4);
            padding: 0.6rem 1rem 0.6rem 2.5rem;
            color: white;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 1rem;
            width: 200px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 25px;
            backdrop-filter: blur(8px);
        }

        .search-input:focus {
            outline: none;
            width: 280px;
            border-color: var(--orange);
            box-shadow: 0 0 20px rgba(255, 102, 0, 0.3), inset 0 0 12px rgba(255, 102, 0, 0.05);
            background: rgba(255, 0, 64, 0.12);
        }

        .search-input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .search-icon {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--red);
        }

        /* Discord Button - Clean */
        .discord-nav-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: #5865F2;
            border: none;
            border-radius: 25px;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.85rem;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 10px;
        }

        .discord-nav-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(88, 101, 242, 0.5);
            background: #7289DA;
        }

        .discord-icon {
            width: 20px;
            height: 20px;
        }

        .discord-text {
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .discord-pulse {
            display: none;
        }

        /* Discord button mobile */
        @media (max-width: 768px) {
            .discord-nav-btn {
                padding: 6px 12px;
                font-size: 0.75rem;
            }
            .discord-icon {
                width: 16px;
                height: 16px;
            }
            .discord-text {
                display: none;
            }
        }

        /* Buy Me a Coffee Button - Clean */
        .coffee-nav-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: linear-gradient(135deg, #FFDD00, #FF813F);
            border: none;
            border-radius: 25px;
            color: #000;
            font-family: 'Russo One', sans-serif;
            font-size: 0.85rem;
            font-weight: 700;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 10px;
        }

        .coffee-nav-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(255, 129, 63, 0.5);
            background: linear-gradient(135deg, #FF813F, #FFDD00);
        }

        .coffee-icon {
            font-size: 20px;
        }

        .coffee-text {
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .coffee-pulse {
            display: none;
        }

        /* Coffee button mobile */
        @media (max-width: 768px) {
            .coffee-nav-btn {
                padding: 6px 12px;
                font-size: 0.75rem;
            }
            .coffee-icon {
                font-size: 18px;
            }
            .coffee-text {
                display: none;
            }
        }

        /* Hero with enhanced visuals - CORRIGIDO */
        .hero {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            min-height: 100dvh;
            height: auto;
            padding: 0 4%;
            margin: -340px 0 0 0 !important;
            padding-top: 340px;
            padding-bottom: 60px;
            z-index: 10;
            overflow: visible;
            will-change: auto;
            background: 
                radial-gradient(ellipse 80% 50% at 50% 20%, rgba(255, 0, 64, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse 60% 40% at 80% 50%, rgba(255, 102, 0, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse 70% 50% at 20% 80%, rgba(255, 60, 100, 0.12) 0%, transparent 50%),
                linear-gradient(180deg, 
                    rgba(13, 13, 13, 1) 0%, 
                    rgba(30, 10, 20, 0.98) 30%,
                    rgba(20, 8, 15, 0.99) 60%,
                    rgba(13, 13, 13, 1) 100%);
        }

        /* When top banners are visible */
        body:has(.site-banner:not(.hidden)) .hero {
            height: calc(100vh + 50px);
        }

        /* Power-up particles - smoother animations */
        .powerups {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            overflow: hidden;
            will-change: transform;
        }

        /* 🚀 DISABLED FOR PERFORMANCE - Powerups hidden */
        .powerup {
            display: none !important; /* Hidden for performance */
            position: absolute;
            font-size: 1.8rem;
            opacity: 0;
            /* animation: powerupFloat 15s linear infinite; DISABLED */
            contain: layout style;
        }

        .powerup:nth-child(1) { left: 15%; animation-delay: 0s; }
        .powerup:nth-child(2) { left: 45%; animation-delay: 5s; }
        .powerup:nth-child(3) { left: 75%; animation-delay: 10s; }
        .powerup:nth-child(4), .powerup:nth-child(5) { display: none; }

        @keyframes powerupFloat {
            0% { transform: translateY(100vh); opacity: 0; }
            5% { opacity: 0.3; }
            95% { opacity: 0.3; }
            100% { transform: translateY(-100vh); opacity: 0; }
        }

        /* Animated particles - DISABLED FOR PERFORMANCE */
        .hero-particles {
            display: none !important; /* Hidden for performance */
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            overflow: hidden;
        }

        /* 🚀 DISABLED: Particles hidden for performance */
        .particle {
            display: none !important;
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--red);
            border-radius: 50%;
            opacity: 0;
            /* animation: particleRise 12s linear infinite; DISABLED */
            contain: layout style;
        }

        .particle:nth-child(1) { left: 15%; animation-delay: 0s; }
        .particle:nth-child(2) { left: 40%; animation-delay: 4s; }
        .particle:nth-child(3) { left: 65%; animation-delay: 8s; }
        .particle:nth-child(4) { left: 85%; animation-delay: 2s; }
        /* Hide extra particles for performance */
        .particle:nth-child(5), .particle:nth-child(6), .particle:nth-child(7), .particle:nth-child(8) { display: none; }

        @keyframes particleRise {
            0% { transform: translateY(100vh); opacity: 0; }
            10% { opacity: 0.6; }
            90% { opacity: 0.4; }
            100% { transform: translateY(-100vh); opacity: 0; }
        }

        /* 🚀 OPTIMIZED: Static grid with better visibility */
        .hero-grid {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-image: 
                linear-gradient(rgba(255, 0, 64, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 0, 64, 0.04) 1px, transparent 1px);
            background-size: 50px 50px;
            pointer-events: none;
            opacity: 0.6;
            mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
            -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
        }

        /* Grid animation removed for performance */

        /* Glowing orbs */
        .hero-orbs {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            overflow: hidden;
        }

        /* Orbs with subtle animation */
        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.2;
            animation: orbFloat 15s ease-in-out infinite;
            contain: layout style;
        }

        .orb-1 {
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255, 0, 64, 0.4), transparent 70%);
            top: 5%;
            left: 5%;
            animation-delay: 0s;
        }

        .orb-2 {
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(255, 102, 0, 0.35), transparent 70%);
            top: 40%;
            right: 0%;
            animation-delay: 5s;
        }

        .orb-3 {
            width: 350px;
            height: 350px;
            background: radial-gradient(circle, rgba(255, 200, 50, 0.25), transparent 70%);
            bottom: 10%;
            left: 25%;
            animation-delay: 10s;
        }

        /* 🚀 OPTIMIZED: Smooth opacity and transform animation */
        @keyframes orbFloat {
            0%, 100% { opacity: 0.15; transform: scale(1) translate(0, 0); }
            25% { opacity: 0.25; transform: scale(1.05) translate(10px, -10px); }
            50% { opacity: 0.3; transform: scale(1.1) translate(0, 10px); }
            75% { opacity: 0.2; transform: scale(1.02) translate(-10px, 0); }
        }

        /* ============================================ */
        /* HERO LAYOUT - Vertical with Panels Below    */
        /* ============================================ */
        .hero-layout-vertical {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0;
            position: relative;
            z-index: 2;
            margin-top: -200px;
        }

        @media (max-width: 1024px) {
            .hero-layout-vertical {
                gap: 1.5rem;
                margin-top: -140px;
            }
        }

        /* Hero Content Centered at Top */
        .hero-content-centered {
            text-align: center;
            max-width: 700px;
            animation: heroReveal 0.8s ease-out;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0;
            position: relative;
            z-index: 2;
        }

        /* ============================================ */
        /* HERO TOP ROW: Top Played | PLAY NOW | Top Players */
        /* ============================================ */
        .hero-top-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            width: 100%;
            max-width: 1500px;
        }

        .hero-side-panel {
            flex: 0 0 340px;
            max-width: 380px;
            max-height: 520px;
            opacity: 0;
            transform: translateY(30px);
            animation: panelSlideIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            display: flex;
            flex-direction: column;
        }
        .hero-side-panel .last-games-list,
        .hero-side-panel .top-players-list {
            flex: 1;
            max-height: 460px;
            overflow-y: auto;
        }
        .hero-side-panel.last-games-panel {
            animation-delay: 0.2s;
        }
        .hero-side-panel.top-players-panel {
            animation-delay: 0.4s;
        }

        .hero-top-row .hero-content-centered {
            flex: 0 1 auto;
            min-width: 0;
        }

        @media (max-width: 1200px) {
            .hero-top-row {
                gap: 1.2rem;
            }
            .hero-side-panel {
                flex: 0 0 300px;
                max-width: 320px;
            }
        }

        @media (max-width: 1024px) {
            .hero-top-row {
                flex-direction: column;
                align-items: center;
                gap: 1.5rem;
            }
            .hero-top-row .hero-content-centered {
                order: -1;
            }
            .hero-side-panel {
                flex: none;
                width: 100%;
                max-width: 500px;
                max-height: 480px;
            }
            .hero-side-panel .last-games-list,
            .hero-side-panel .top-players-list {
                max-height: 420px;
            }
        }

        @media (max-width: 480px) {
            .hero-side-panel {
                max-width: 100%;
                max-height: 400px;
            }
            .hero-side-panel .last-games-list,
            .hero-side-panel .top-players-list {
                max-height: 340px;
            }
        }

        /* Three Panels Row */
        .hero-panels-row {
            display: flex;
            justify-content: center;
            gap: 1.2rem;
            width: 100%;
            max-width: 1400px;
        }

        @media (max-width: 1200px) {
            .hero-panels-row {
                flex-wrap: wrap;
                gap: 1rem;
            }
        }

        @media (max-width: 1024px) {
            .hero-panels-row {
                flex-direction: column;
                align-items: center;
                gap: 1.5rem;
            }
        }

        /* ============================================ */
        /* HERO MULTIPLAYER PANEL - Gaming Design      */
        /* ============================================ */
        .hero-multiplayer-panel {
            flex: 1 1 380px;
            max-width: 420px;
            width: 450px;
            min-height: 320px;
            max-height: 360px;
            background: linear-gradient(145deg, rgba(15, 10, 25, 0.98), rgba(5, 0, 15, 0.99));
            border: 2px solid transparent;
            border-radius: 24px;
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            box-shadow: 
                0 30px 60px rgba(0, 0, 0, 0.7),
                0 0 0 1px rgba(0, 212, 255, 0.5),
                0 0 80px rgba(0, 212, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
            z-index: 2;
            animation: panelFloat 4s ease-in-out infinite;
            animation-delay: 0.5s;
        }

        /* Cyan/Blue Border Glow Effect for Multiplayer */
        .hero-multiplayer-panel::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(
                135deg,
                #00d4ff 0%,
                #0066ff 25%,
                #00ffcc 50%,
                #0066ff 75%,
                #00d4ff 100%
            );
            border-radius: 22px;
            z-index: -1;
            opacity: 0.9;
            animation: rgbBorderGlow 4s ease-in-out infinite;
            background-size: 200% 200%;
        }
        
        .hero-multiplayer-panel::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(145deg, rgba(15, 10, 25, 0.98), rgba(5, 0, 15, 0.99));
            border-radius: 18px;
            z-index: -1;
        }

        @media (max-width: 1024px) {
            .hero-multiplayer-panel {
                flex: 0 0 auto;
                width: 100%;
                max-width: 450px;
                min-height: 280px;
                max-height: 320px;
            }
        }

        @media (max-width: 768px) {
            .hero-multiplayer-panel {
                width: 100%;
                max-width: 100%;
                min-height: 260px;
                max-height: 300px;
            }
        }

        /* Multiplayer Panel Header */
        .hero-multiplayer-header {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 102, 255, 0.1));
            border-bottom: 1px solid rgba(0, 212, 255, 0.2);
        }
        
        .hero-multiplayer-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), rgba(0, 102, 255, 0.5), transparent);
        }

        .hero-panel-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            position: relative;
        }

        .hero-panel-title {
            font-family: 'Black Ops One', cursive;
            font-size: 1rem;
            color: white;
            letter-spacing: 2px;
            flex: 1;
            text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
        }

        .hero-multiplayer-dot {
            width: 12px;
            height: 12px;
            background: #00d4ff;
            border-radius: 50%;
            box-shadow: 
                0 0 10px #00d4ff,
                0 0 20px rgba(0, 212, 255, 0.5);
            animation: liveDotPulse 1.5s ease-in-out infinite;
            position: relative;
        }
        
        .hero-multiplayer-dot::after {
            content: '';
            position: absolute;
            inset: -4px;
            border: 2px solid rgba(0, 212, 255, 0.3);
            border-radius: 50%;
            animation: liveDotRing 1.5s ease-out infinite;
        }

        .hero-multiplayer-count {
            background: linear-gradient(135deg, #00d4ff, #0066ff);
            padding: 5px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: bold;
            color: white;
            box-shadow: 
                0 4px 15px rgba(0, 212, 255, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .hero-multiplayer-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .hero-multiplayer-empty {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
            padding: 2rem;
            text-align: center;
            background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
        }
        
        .hero-multiplayer-empty svg {
            filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
            opacity: 0.4;
        }

        .hero-multiplayer-empty p {
            font-family: 'Russo One', sans-serif;
            font-size: 1rem;
            margin: 0;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 1px;
        }

        .hero-multiplayer-btn {
            padding: 12px 28px;
            background: linear-gradient(135deg, #00d4ff, #0066ff);
            border: none;
            border-radius: 25px;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-top: 10px;
            box-shadow: 
                0 4px 20px rgba(0, 212, 255, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
        }
        
        .hero-multiplayer-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }
        
        .hero-multiplayer-btn:hover::before {
            left: 100%;
        }

        .hero-multiplayer-btn:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 
                0 8px 30px rgba(0, 212, 255, 0.5),
                0 0 20px rgba(0, 212, 255, 0.3);
        }

        /* Multiplayer Room Card in Hero Panel */
        .hero-multiplayer-room {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 102, 255, 0.05));
            border-radius: 12px;
            margin: 8px;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid rgba(0, 212, 255, 0.2);
        }

        .hero-multiplayer-room:hover {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 102, 255, 0.1));
            border-color: rgba(0, 212, 255, 0.4);
            transform: translateX(5px);
        }

        .hero-multiplayer-room-cover {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            object-fit: cover;
            border: 2px solid rgba(0, 212, 255, 0.3);
        }

        .hero-multiplayer-room-info {
            flex: 1;
        }

        .hero-multiplayer-room-name {
            font-family: 'Russo One', sans-serif;
            font-size: 0.9rem;
            color: white;
            margin-bottom: 4px;
        }

        .hero-multiplayer-room-game {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.5);
        }

        .hero-multiplayer-room-players {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 0.8rem;
            color: #00d4ff;
        }

        .hero-multiplayer-rooms-list {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
        }

        .hero-multiplayer-rooms-list::-webkit-scrollbar {
            width: 4px;
        }

        .hero-multiplayer-rooms-list::-webkit-scrollbar-track {
            background: rgba(0, 212, 255, 0.1);
            border-radius: 2px;
        }

        .hero-multiplayer-rooms-list::-webkit-scrollbar-thumb {
            background: rgba(0, 212, 255, 0.3);
            border-radius: 2px;
        }

        /* Multiplayer Room Card Styles */
        .hero-multiplayer-room-card {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            transition: all 0.3s;
        }

        .hero-mp-cover-container {
            flex: 1;
            position: relative;
            background: linear-gradient(135deg, #0a0510 0%, #0a1525 100%);
            overflow: hidden;
            min-height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-mp-cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
            z-index: 1;
        }

        .hero-mp-cover-placeholder {
            font-size: 4rem;
            opacity: 0.3;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .hero-mp-cover-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.8) 100%);
            z-index: 2;
        }

        .hero-mp-status-waiting,
        .hero-mp-status-playing {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 6px 12px;
            border-radius: 20px;
            font-family: 'Russo One', sans-serif;
            font-size: 0.7rem;
            z-index: 5;
            animation: statusPulse 2s ease-in-out infinite;
        }

        .hero-mp-status-waiting {
            background: linear-gradient(135deg, #ffcc00, #ff9900);
            color: #000;
            box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
        }

        .hero-mp-status-playing {
            background: linear-gradient(135deg, #00ff88, #00cc66);
            color: #000;
            box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
        }

        @keyframes statusPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .hero-mp-players-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 6px 12px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.9), rgba(0, 102, 255, 0.9));
            border-radius: 20px;
            font-family: 'Russo One', sans-serif;
            font-size: 0.75rem;
            color: white;
            z-index: 5;
            box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
        }

        .hero-mp-room-info {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 102, 255, 0.05));
            border-top: 1px solid rgba(0, 212, 255, 0.2);
        }

        .hero-mp-host-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid rgba(0, 212, 255, 0.5);
            object-fit: cover;
            flex-shrink: 0;
        }

        .hero-mp-host-initial {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #00d4ff, #0066ff);
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 1.1rem;
            font-weight: bold;
        }

        .hero-mp-room-details {
            flex: 1;
            min-width: 0;
        }

        .hero-mp-room-name {
            font-family: 'Russo One', sans-serif;
            font-size: 0.95rem;
            color: white;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .hero-mp-game-name {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.5);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .hero-mp-join-btn {
            padding: 10px 20px;
            background: linear-gradient(135deg, #00d4ff, #0066ff);
            border: none;
            border-radius: 20px;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
        }

        .hero-mp-join-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(0, 212, 255, 0.5);
        }

        /* Navigation for multiplayer carousel */
        .hero-mp-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: rgba(0, 212, 255, 0.2);
            border: 2px solid rgba(0, 212, 255, 0.3);
            border-radius: 50%;
            color: white;
            font-size: 1.1rem;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s;
            backdrop-filter: blur(5px);
        }

        .hero-mp-nav:hover {
            background: rgba(0, 212, 255, 0.4);
            border-color: rgba(0, 212, 255, 0.6);
            transform: translateY(-50%) scale(1.1);
        }

        .hero-mp-nav-prev {
            left: 12px;
        }

        .hero-mp-nav-next {
            right: 12px;
        }

        .hero-mp-dots {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 10;
        }

        .hero-mp-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s;
        }

        .hero-mp-dot.active {
            background: #00d4ff;
            box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
            transform: scale(1.3);
        }

        .hero-mp-dot:hover {
            background: rgba(0, 212, 255, 0.6);
        }

        /* Legacy layout support */
        .hero-layout {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4rem;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0;
            position: relative;
            z-index: 2;
            margin-top: -180px;
        }

        @media (max-width: 1024px) {
            .hero-layout {
                flex-direction: column;
                gap: 2rem;
                align-items: center;
                padding: 0;
                margin-top: -120px;
            }
        }

        .hero-content {
            text-align: center;
            flex: 1;
            max-width: 600px;
            animation: heroReveal 0.8s ease-out;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0;
            position: relative;
            z-index: 2;
        }

        /* ============================================ */
        /* HERO LIVE PANEL - Premium Gaming Design     */
        /* ============================================ */
        .hero-live-panel {
            flex: 1 1 380px;
            max-width: 420px;
            min-height: 320px;
            max-height: 360px;
            background: linear-gradient(145deg, rgba(15, 10, 25, 0.98), rgba(5, 0, 15, 0.99));
            border: 2px solid transparent;
            border-radius: 24px;
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            box-shadow: 
                0 30px 60px rgba(0, 0, 0, 0.7),
                0 0 0 1px rgba(255, 0, 64, 0.5),
                0 0 80px rgba(255, 0, 64, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
            z-index: 2;
            animation: panelFloat 4s ease-in-out infinite;
        }
        
        /* ============================================ */
        /* HERO LAUNCHER PANEL - PSP/PS2 Design        */
        /* ============================================ */
        .hero-launcher-panel {
            flex: 1 1 380px;
            max-width: 420px;
            min-height: 320px;
            max-height: 360px;
            background: linear-gradient(145deg, rgba(15, 10, 25, 0.98), rgba(5, 0, 15, 0.99));
            border: 2px solid transparent;
            border-radius: 24px;
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            box-shadow: 
                0 30px 60px rgba(0, 0, 0, 0.7),
                0 0 0 1px rgba(168, 85, 247, 0.5),
                0 0 80px rgba(168, 85, 247, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
            z-index: 2;
            animation: panelFloat 4s ease-in-out infinite;
            animation-delay: 1s;
        }
        
        /* Purple Border Glow Effect for Launcher */
        .hero-launcher-panel::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(
                135deg,
                #a855f7 0%,
                #6366f1 25%,
                #8b5cf6 50%,
                #6366f1 75%,
                #a855f7 100%
            );
            border-radius: 22px;
            z-index: -1;
            opacity: 0.9;
            animation: rgbBorderGlow 4s ease-in-out infinite;
            background-size: 200% 200%;
        }
        
        .hero-launcher-panel::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(145deg, rgba(15, 10, 25, 0.98), rgba(5, 0, 15, 0.99));
            border-radius: 18px;
            z-index: -1;
        }
        
        /* Launcher Header */
        .hero-launcher-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px 20px;
            background: linear-gradient(90deg, rgba(168, 85, 247, 0.15), transparent);
            border-bottom: 1px solid rgba(168, 85, 247, 0.2);
        }
        
        .hero-launcher-dot {
            width: 10px;
            height: 10px;
            background: #a855f7;
            border-radius: 50%;
            animation: launcherPulse 2s ease-in-out infinite;
            box-shadow: 0 0 10px #a855f7, 0 0 20px rgba(168, 85, 247, 0.5);
        }
        
        @keyframes launcherPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(0.9); }
        }
        
        .hero-launcher-title {
            font-family: 'Russo One', sans-serif;
            font-size: 1rem;
            color: #fff;
            letter-spacing: 1px;
        }
        
        .hero-launcher-badge {
            background: linear-gradient(135deg, #a855f7, #6366f1);
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.65rem;
            font-weight: 700;
            color: white;
            letter-spacing: 0.5px;
        }
        
        /* Download button in header */
        .hero-download-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            background: linear-gradient(135deg, #00d4ff, #7b2ff7);
            border-radius: 8px;
            text-decoration: none;
            font-size: 0.7rem;
            font-weight: 600;
            color: white;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(123, 47, 247, 0.3);
            white-space: nowrap;
        }
        
        .hero-download-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(123, 47, 247, 0.5);
        }
        
        .hero-launcher-count {
            margin-left: auto;
            background: linear-gradient(135deg, #a855f7, #6366f1);
            padding: 4px 12px;
            border-radius: 12px;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: white;
        }
        
        /* Launcher Content */
        .hero-launcher-content {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .hero-launcher-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            gap: 10px;
            text-align: center;
            color: rgba(255, 255, 255, 0.5);
        }
        
        .hero-launcher-empty svg {
            opacity: 0.4;
            animation: floatIcon 3s ease-in-out infinite;
        }
        
        @keyframes floatIcon {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        
        .hero-launcher-empty p {
            font-family: 'Russo One', sans-serif;
            font-size: 0.9rem;
            margin: 0;
        }
        
        .hero-launcher-btn {
            background: linear-gradient(135deg, #a855f7, #6366f1);
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 12px;
            font-family: 'Russo One', sans-serif;
            font-size: 0.8rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            margin-top: 10px;
        }
        
        .hero-launcher-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 25px rgba(168, 85, 247, 0.5);
        }
        
        /* Launcher Player Card */
        .hero-launcher-player {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px;
            background: rgba(168, 85, 247, 0.1);
            border: 1px solid rgba(168, 85, 247, 0.2);
            border-radius: 12px;
            transition: all 0.3s ease;
        }
        
        .hero-launcher-player:hover {
            background: rgba(168, 85, 247, 0.2);
            border-color: rgba(168, 85, 247, 0.4);
        }
        
        .hero-launcher-player-cover {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }
        
        .hero-launcher-player-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .hero-launcher-player-live {
            position: absolute;
            bottom: 2px;
            left: 2px;
            background: rgba(255, 0, 0, 0.9);
            padding: 2px 5px;
            border-radius: 4px;
            font-size: 0.5rem;
            font-weight: 700;
            color: white;
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        .hero-launcher-player-info {
            flex: 1;
            min-width: 0;
        }
        
        .hero-launcher-player-name {
            font-weight: 600;
            color: #fff;
            font-size: 0.85rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .hero-launcher-player-game {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.75rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .hero-launcher-player-console {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.65rem;
            font-weight: 600;
        }
        
        .hero-launcher-player-console.psp {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }
        
        .hero-launcher-player-console.ps2 {
            background: linear-gradient(135deg, #11998e, #38ef7d);
            color: white;
        }

        @keyframes panelFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }
        
        /* RGB Border Glow Effect */
        .hero-live-panel::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(
                135deg,
                #ff0040 0%,
                #ff6600 25%,
                #ffcc00 50%,
                #ff6600 75%,
                #ff0040 100%
            );
            border-radius: 22px;
            z-index: -1;
            opacity: 0.9;
            animation: rgbBorderGlow 4s ease-in-out infinite;
            background-size: 200% 200%;
        }
        
        .hero-live-panel::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(145deg, rgba(15, 10, 25, 0.98), rgba(5, 0, 15, 0.99));
            border-radius: 18px;
            z-index: -1;
        }
        
        @keyframes rgbBorderGlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @media (max-width: 1024px) {
            .hero-live-panel {
                flex: 0 0 auto;
                width: 100%;
                max-width: 450px;
                min-height: 280px;
                max-height: 320px;
            }
            
            .hero-multiplayer-panel {
                flex: 0 0 auto;
                width: 100%;
                max-width: 450px;
                min-height: 280px;
                max-height: 320px;
            }
            
            .hero {
                min-height: auto;
                padding: 0 4% 40px;
                padding-top: calc(60px + 1rem);
                margin-top: 0 !important;
            }
            
            body:has(.site-banner:not(.hidden)) .hero {
                padding-top: calc(60px + 50px + 1rem);
            }
            
            .hero-live-nav {
                width: 35px;
                height: 35px;
                font-size: 1rem;
            }
            
            .hero-live-nav-prev {
                left: -18px;
            }
            
            .hero-live-nav-next {
                right: -18px;
            }
            
            .hero-mp-nav {
                width: 35px;
                height: 35px;
                font-size: 1rem;
            }
            
            .hero-panels-row {
                flex-direction: column;
                align-items: center;
            }
        }

        @media (max-width: 768px) {
            .hero {
                padding: 0 4% 40px;
                padding-top: calc(60px + 1rem);
                margin-top: 0 !important;
                min-height: auto;
            }
            
            .hero-content {
                max-width: 100%;
            }
            
            .hero-content-centered {
                max-width: 100%;
            }
            
            .hero-live-panel {
                width: 100%;
                max-width: 100%;
                min-height: 260px;
                max-height: 300px;
            }
            
            .hero-multiplayer-panel {
                width: 100%;
                max-width: 100%;
                min-height: 260px;
                max-height: 300px;
            }
            
            .hero-live-nav {
                width: 32px;
                height: 32px;
                font-size: 0.9rem;
            }
            
            .hero-live-nav-prev {
                left: 8px;
            }
            
            .hero-live-nav-next {
                right: 8px;
            }
            
            .hero-mp-nav {
                width: 32px;
                height: 32px;
                font-size: 0.9rem;
            }
            
            .hero-mp-nav-prev {
                left: 8px;
            }
            
            .hero-mp-nav-next {
                right: 8px;
            }
            
            .hero-live-stream-info {
                padding: 12px 14px;
            }
            
            .hero-live-stream-game {
                font-size: 0.9rem;
            }
            
            .hero-live-stream-user {
                font-size: 0.75rem;
            }
            
            .hero-mp-room-info {
                padding: 10px 12px;
            }
            
            .hero-mp-room-name {
                font-size: 0.85rem;
            }
            
            .hero-mp-game-name {
                font-size: 0.7rem;
            }
            
            .hero-title {
                font-size: 3rem;
            }
            
            .hero-panels-row {
                gap: 1rem;
            }
        }

        /* ============================================================ */
        /* HERO PANELS — PREMIUM REDESIGN V3                         */
        /* ============================================================ */

        /* ── BASE: All three panels ──────────────────────────────── */
        .hero-multiplayer-panel,
        .hero-live-panel,
        .hero-launcher-panel {
            background: linear-gradient(160deg, rgba(12,8,24,0.97) 0%, rgba(6,2,16,0.99) 50%, rgba(10,6,22,0.98) 100%) !important;
            border-radius: 22px !important;
            overflow: hidden;
            min-height: 340px;
            max-height: 380px;
            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1), filter 0.6s ease;
            will-change: transform, box-shadow;
        }
        .hero-multiplayer-panel:hover,
        .hero-live-panel:hover,
        .hero-launcher-panel:hover {
            transform: translateY(-12px) scale(1.02) !important;
            filter: brightness(1.05);
        }

        /* ── Animated conic border — SHARED ──────────────────────── */
        .hero-multiplayer-panel::before,
        .hero-live-panel::before,
        .hero-launcher-panel::before {
            border-radius: 22px !important;
            animation: v3BorderRotate 4s linear infinite !important;
            opacity: 0.9 !important;
        }
        @keyframes v3BorderRotate {
            0%   { background-position: 0% 50%; filter: hue-rotate(0deg); }
            50%  { background-position: 100% 50%; filter: hue-rotate(15deg); }
            100% { background-position: 0% 50%; filter: hue-rotate(0deg); }
        }

        .hero-multiplayer-panel::after,
        .hero-live-panel::after,
        .hero-launcher-panel::after {
            border-radius: 20px !important;
            background: linear-gradient(160deg, rgba(12,8,24,0.97) 0%, rgba(6,2,16,0.99) 50%, rgba(10,6,22,0.98) 100%) !important;
        }

        /* ── MULTIPLAYER — Electric Cyan theme ───────────────────── */
        .hero-multiplayer-panel {
            box-shadow:
                0 0 0 1px rgba(0,212,255,0.4),
                0 0 40px rgba(0,212,255,0.12),
                0 20px 50px rgba(0,0,0,0.7),
                inset 0 1px 0 rgba(0,212,255,0.15),
                inset 0 -40px 60px rgba(0,212,255,0.02) !important;
            animation: v3FloatCyan 7s ease-in-out infinite !important;
        }
        .hero-multiplayer-panel:hover {
            box-shadow:
                0 0 0 1px rgba(0,212,255,0.8),
                0 0 60px rgba(0,212,255,0.25),
                0 0 120px rgba(0,212,255,0.08),
                0 30px 80px rgba(0,0,0,0.8),
                inset 0 1px 0 rgba(0,212,255,0.2),
                inset 0 -60px 80px rgba(0,212,255,0.04) !important;
        }
        .hero-multiplayer-panel::before {
            background: linear-gradient(
                270deg,
                #00d4ff 0%, #0088ff 15%, #00ffd5 30%, #0044ff 50%, #00d4ff 65%, #00ffd5 80%, #0088ff 100%
            ) !important;
            background-size: 300% 300% !important;
        }
        @keyframes v3FloatCyan {
            0%, 100% { transform: translateY(0px); }
            33%      { transform: translateY(-5px); }
            66%      { transform: translateY(-3px); }
        }

        /* ── LIVE NOW — Crimson Fire theme ───────────────────────── */
        .hero-live-panel {
            box-shadow:
                0 0 0 1px rgba(255,0,64,0.4),
                0 0 40px rgba(255,0,64,0.12),
                0 20px 50px rgba(0,0,0,0.7),
                inset 0 1px 0 rgba(255,0,64,0.15),
                inset 0 -40px 60px rgba(255,0,64,0.02) !important;
            animation: v3FloatRed 7s ease-in-out infinite !important;
            animation-delay: 0.5s !important;
        }
        .hero-live-panel:hover {
            box-shadow:
                0 0 0 1px rgba(255,0,64,0.8),
                0 0 60px rgba(255,0,64,0.25),
                0 0 120px rgba(255,0,64,0.08),
                0 30px 80px rgba(0,0,0,0.8),
                inset 0 1px 0 rgba(255,0,64,0.2),
                inset 0 -60px 80px rgba(255,0,64,0.04) !important;
        }
        .hero-live-panel::before {
            background: linear-gradient(
                270deg,
                #ff0040 0%, #ff4400 15%, #ff8800 30%, #ff0055 50%, #ff0040 65%, #ff6600 80%, #ff0040 100%
            ) !important;
            background-size: 300% 300% !important;
        }
        @keyframes v3FloatRed {
            0%, 100% { transform: translateY(0px); }
            33%      { transform: translateY(-5px); }
            66%      { transform: translateY(-3px); }
        }

        /* ── LAUNCHER — Violet Plasma theme ──────────────────────── */
        .hero-launcher-panel {
            box-shadow:
                0 0 0 1px rgba(168,85,247,0.4),
                0 0 40px rgba(168,85,247,0.12),
                0 20px 50px rgba(0,0,0,0.7),
                inset 0 1px 0 rgba(168,85,247,0.15),
                inset 0 -40px 60px rgba(168,85,247,0.02) !important;
            animation: v3FloatPurple 7s ease-in-out infinite !important;
            animation-delay: 1s !important;
        }
        .hero-launcher-panel:hover {
            box-shadow:
                0 0 0 1px rgba(168,85,247,0.8),
                0 0 60px rgba(168,85,247,0.25),
                0 0 120px rgba(168,85,247,0.08),
                0 30px 80px rgba(0,0,0,0.8),
                inset 0 1px 0 rgba(168,85,247,0.2),
                inset 0 -60px 80px rgba(168,85,247,0.04) !important;
        }
        .hero-launcher-panel::before {
            background: linear-gradient(
                270deg,
                #a855f7 0%, #7c3aed 15%, #c084fc 30%, #6366f1 50%, #a855f7 65%, #818cf8 80%, #a855f7 100%
            ) !important;
            background-size: 300% 300% !important;
        }
        @keyframes v3FloatPurple {
            0%, 100% { transform: translateY(0px); }
            33%      { transform: translateY(-5px); }
            66%      { transform: translateY(-3px); }
        }

        /* ── Header shimmer sweep on hover ───────────────────────── */
        .hero-multiplayer-header,
        .hero-live-header,
        .hero-launcher-header {
            position: relative;
            padding: 16px 20px !important;
            overflow: hidden;
        }
        .hero-multiplayer-header::before,
        .hero-live-header::before,
        .hero-launcher-header::before {
            content: '' !important;
            position: absolute !important;
            top: 0; left: -100%; right: 0; bottom: 0;
            width: 200%;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 55%, transparent 100%);
            pointer-events: none;
            transition: transform 0.8s ease;
            transform: translateX(-100%);
            z-index: 3;
            border-radius: 0;
            border: none !important;
        }
        .hero-multiplayer-panel:hover .hero-multiplayer-header::before,
        .hero-live-panel:hover .hero-live-header::before,
        .hero-launcher-panel:hover .hero-launcher-header::before {
            transform: translateX(50%) !important;
        }

        /* ── Header glow separator lines ─────────────────────────── */
        .hero-multiplayer-header::after {
            background: linear-gradient(90deg, transparent 0%, rgba(0,212,255,0.9) 15%, rgba(0,255,213,0.7) 50%, rgba(0,102,255,0.9) 85%, transparent 100%) !important;
            height: 2px !important;
            box-shadow: 0 0 12px rgba(0,212,255,0.5), 0 0 30px rgba(0,212,255,0.2) !important;
        }
        .hero-live-header::after {
            background: linear-gradient(90deg, transparent 0%, rgba(255,0,64,0.9) 15%, rgba(255,140,0,0.7) 50%, rgba(255,0,64,0.9) 85%, transparent 100%) !important;
            height: 2px !important;
            box-shadow: 0 0 12px rgba(255,0,64,0.5), 0 0 30px rgba(255,0,64,0.2) !important;
        }
        .hero-launcher-header {
            position: relative;
        }
        .hero-launcher-header::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, rgba(168,85,247,0.9) 15%, rgba(192,132,252,0.7) 50%, rgba(99,102,241,0.9) 85%, transparent 100%);
            box-shadow: 0 0 12px rgba(168,85,247,0.5), 0 0 30px rgba(168,85,247,0.2);
        }

        /* ── Title text glow — enhanced ──────────────────────────── */
        .hero-panel-title {
            text-shadow:
                0 0 10px rgba(0,212,255,0.7),
                0 0 30px rgba(0,212,255,0.3),
                0 0 60px rgba(0,212,255,0.1) !important;
            font-size: 0.95rem !important;
            letter-spacing: 3px;
            font-family: 'Black Ops One', 'Russo One', cursive !important;
        }
        .hero-live-title {
            text-shadow:
                0 0 10px rgba(255,0,64,0.7),
                0 0 30px rgba(255,0,64,0.3),
                0 0 60px rgba(255,0,64,0.1) !important;
            font-size: 0.95rem !important;
            letter-spacing: 3px !important;
        }
        .hero-launcher-title {
            text-shadow:
                0 0 10px rgba(168,85,247,0.7),
                0 0 30px rgba(168,85,247,0.3),
                0 0 60px rgba(168,85,247,0.1) !important;
            font-size: 0.95rem !important;
            letter-spacing: 3px !important;
            font-family: 'Black Ops One', 'Russo One', cursive !important;
        }

        /* ── Content area — radial mesh + dot grid ───────────────── */
        .hero-multiplayer-content {
            position: relative;
            background-image:
                radial-gradient(circle at 50% 0%, rgba(0,212,255,0.06) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(0,102,255,0.03) 0%, transparent 40%),
                radial-gradient(circle 1px at center, rgba(0,212,255,0.08) 0%, transparent 1px) !important;
            background-size: 100% 100%, 100% 100%, 20px 20px !important;
        }
        .hero-live-content {
            position: relative;
            background-image:
                radial-gradient(circle at 50% 0%, rgba(255,0,64,0.06) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(255,100,0,0.03) 0%, transparent 40%),
                radial-gradient(circle 1px at center, rgba(255,0,64,0.08) 0%, transparent 1px) !important;
            background-size: 100% 100%, 100% 100%, 20px 20px !important;
        }
        .hero-launcher-content {
            position: relative;
            background-image:
                radial-gradient(circle at 50% 0%, rgba(168,85,247,0.06) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(99,102,241,0.03) 0%, transparent 40%),
                radial-gradient(circle 1px at center, rgba(168,85,247,0.08) 0%, transparent 1px) !important;
            background-size: 100% 100%, 100% 100%, 20px 20px !important;
        }

        /* ── Status dots — ring pulse ────────────────────────────── */
        .hero-multiplayer-dot {
            width: 10px !important;
            height: 10px !important;
            box-shadow: 0 0 10px #00d4ff, 0 0 20px rgba(0,212,255,0.4) !important;
            position: relative !important;
        }
        .hero-multiplayer-dot::after {
            content: '' !important;
            position: absolute !important;
            inset: -5px !important;
            border: 2px solid rgba(0,212,255,0.3) !important;
            border-radius: 50% !important;
            animation: v3DotRing 2s ease-out infinite !important;
        }
        .hero-live-dot {
            width: 10px !important;
            height: 10px !important;
            box-shadow: 0 0 10px #ff0040, 0 0 20px rgba(255,0,64,0.4) !important;
        }
        .hero-launcher-dot {
            width: 10px !important;
            height: 10px !important;
            box-shadow: 0 0 10px #a855f7, 0 0 20px rgba(168,85,247,0.4) !important;
            position: relative !important;
        }
        .hero-launcher-dot::after {
            content: '' !important;
            position: absolute !important;
            inset: -5px !important;
            border: 2px solid rgba(168,85,247,0.3) !important;
            border-radius: 50% !important;
            animation: v3DotRing 2s ease-out infinite !important;
        }
        @keyframes v3DotRing {
            0% { transform: scale(1); opacity: 0.6; }
            100% { transform: scale(2.5); opacity: 0; }
        }

        /* ── Count badges — premium glass ─────────────────────────── */
        .hero-multiplayer-count {
            background: rgba(0,212,255,0.12) !important;
            border: 1px solid rgba(0,212,255,0.3) !important;
            backdrop-filter: blur(12px) !important;
            box-shadow: 0 4px 16px rgba(0,212,255,0.15), inset 0 1px 0 rgba(255,255,255,0.08) !important;
            animation: v3CountPulse 3s ease-in-out infinite !important;
            padding: 5px 14px !important;
            border-radius: 20px !important;
            font-family: 'Space Grotesk', monospace !important;
            font-weight: 700 !important;
            font-size: 0.85rem !important;
            color: #00d4ff !important;
        }
        .hero-live-count {
            background: rgba(255,0,64,0.12) !important;
            border: 1px solid rgba(255,0,64,0.3) !important;
            backdrop-filter: blur(12px) !important;
            box-shadow: 0 4px 16px rgba(255,0,64,0.15), inset 0 1px 0 rgba(255,255,255,0.08) !important;
            animation: v3CountPulse 3s ease-in-out infinite !important;
            animation-delay: 0.3s !important;
            color: #ff4060 !important;
        }
        .hero-launcher-count {
            background: rgba(168,85,247,0.12) !important;
            border: 1px solid rgba(168,85,247,0.3) !important;
            backdrop-filter: blur(12px) !important;
            box-shadow: 0 4px 16px rgba(168,85,247,0.15), inset 0 1px 0 rgba(255,255,255,0.08) !important;
            animation: v3CountPulse 3s ease-in-out infinite !important;
            animation-delay: 0.6s !important;
            color: #c084fc !important;
        }
        @keyframes v3CountPulse {
            0%,100% { box-shadow: 0 4px 16px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.08); }
            50%     { box-shadow: 0 4px 24px rgba(255,255,255,0.12), 0 0 8px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.12); }
        }

        /* ── Buttons — solid gradient with shine sweep ───────────── */
        .hero-multiplayer-btn {
            background: linear-gradient(135deg, rgba(0,212,255,0.25) 0%, rgba(0,102,255,0.3) 100%) !important;
            border: 1px solid rgba(0,212,255,0.5) !important;
            backdrop-filter: blur(12px);
            box-shadow: 0 6px 24px rgba(0,212,255,0.2), inset 0 1px 0 rgba(255,255,255,0.12) !important;
            border-radius: 16px !important;
            padding: 13px 30px;
            font-size: 0.78rem !important;
            letter-spacing: 3px !important;
            text-transform: uppercase;
            position: relative !important;
            overflow: hidden !important;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
        }
        .hero-multiplayer-btn::before {
            content: '' !important;
            position: absolute !important;
            top: 0 !important; left: -100% !important;
            width: 100% !important; height: 100% !important;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent) !important;
            transition: left 0.6s ease !important;
        }
        .hero-multiplayer-btn:hover::before {
            left: 100% !important;
        }
        .hero-multiplayer-btn:hover {
            background: linear-gradient(135deg, rgba(0,212,255,0.4) 0%, rgba(0,102,255,0.45) 100%) !important;
            box-shadow: 0 8px 32px rgba(0,212,255,0.35), 0 0 24px rgba(0,212,255,0.15), inset 0 1px 0 rgba(255,255,255,0.15) !important;
            border-color: rgba(0,212,255,0.7) !important;
            transform: translateY(-2px) !important;
        }

        .hero-live-start-btn {
            background: linear-gradient(135deg, rgba(255,0,64,0.25), rgba(255,100,0,0.3)) !important;
            border: 1px solid rgba(255,0,64,0.5) !important;
            backdrop-filter: blur(12px);
            box-shadow: 0 6px 24px rgba(255,0,64,0.2), inset 0 1px 0 rgba(255,255,255,0.12) !important;
            border-radius: 16px !important;
        }

        .hero-launcher-download-cta {
            background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(99,102,241,0.3)) !important;
            border: 1px solid rgba(168,85,247,0.5) !important;
            backdrop-filter: blur(12px);
            box-shadow: 0 6px 24px rgba(168,85,247,0.2), inset 0 1px 0 rgba(255,255,255,0.12) !important;
            border-radius: 16px !important;
            padding: 13px 30px !important;
            font-size: 0.78rem !important;
            letter-spacing: 3px !important;
            text-transform: uppercase !important;
            font-family: 'Russo One', sans-serif !important;
            color: white !important;
            text-decoration: none !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 8px !important;
            cursor: pointer !important;
            position: relative !important;
            overflow: hidden !important;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
        }
        .hero-launcher-download-cta::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
            transition: left 0.6s ease;
        }
        .hero-launcher-download-cta:hover::before {
            left: 100%;
        }
        .hero-launcher-download-cta:hover {
            background: linear-gradient(135deg, rgba(168,85,247,0.4), rgba(99,102,241,0.45)) !important;
            box-shadow: 0 8px 32px rgba(168,85,247,0.35), 0 0 24px rgba(168,85,247,0.15) !important;
            border-color: rgba(168,85,247,0.7) !important;
            transform: translateY(-2px) !important;
        }

        /* ── Empty state SVGs — animated glow ────────────────────── */
        .hero-multiplayer-empty svg {
            filter: drop-shadow(0 0 20px rgba(0,212,255,0.3)) drop-shadow(0 0 40px rgba(0,212,255,0.1)) !important;
            opacity: 0.5 !important;
            animation: v3IconFloat 4s ease-in-out infinite !important;
        }
        .hero-live-empty svg {
            filter: drop-shadow(0 0 20px rgba(255,0,64,0.3)) drop-shadow(0 0 40px rgba(255,0,64,0.1)) !important;
            opacity: 0.5 !important;
            animation: v3IconFloat 4s ease-in-out infinite 0.3s !important;
        }
        .hero-launcher-empty svg {
            filter: drop-shadow(0 0 20px rgba(168,85,247,0.3)) drop-shadow(0 0 40px rgba(168,85,247,0.1)) !important;
            opacity: 0.5 !important;
            animation: v3IconFloat 4s ease-in-out infinite 0.6s !important;
        }
        @keyframes v3IconFloat {
            0%, 100% { transform: translateY(0) scale(1); }
            50%      { transform: translateY(-8px) scale(1.05); }
        }

        /* ── Empty text — gradient fade ──────────────────────────── */
        .hero-multiplayer-empty p {
            font-family: 'Russo One', sans-serif !important;
            font-size: 0.95rem !important;
            background: linear-gradient(135deg, rgba(0,212,255,0.7), rgba(0,170,255,0.5)) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            letter-spacing: 1.5px !important;
        }
        .hero-live-empty p {
            font-family: 'Russo One', sans-serif !important;
            font-size: 0.95rem !important;
            background: linear-gradient(135deg, rgba(255,0,64,0.7), rgba(255,120,0,0.5)) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            letter-spacing: 1.5px !important;
        }
        .hero-launcher-empty p {
            font-family: 'Russo One', sans-serif !important;
            font-size: 0.95rem !important;
            background: linear-gradient(135deg, rgba(168,85,247,0.7), rgba(120,100,255,0.5)) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            letter-spacing: 1.5px !important;
        }

        /* ── Subtitle text ───────────────────────────────────────── */
        .hero-multiplayer-empty span[style],
        .hero-live-empty span[style],
        .hero-launcher-empty span[style] {
            color: rgba(255,255,255,0.25) !important;
            font-size: 0.7rem !important;
        }

        /* ── Waiting text — scanning line ────────────────────────── */
        .hero-empty-waiting {
            font-family: 'Space Grotesk', monospace !important;
            font-size: 0.58rem !important;
            letter-spacing: 5px !important;
            text-transform: uppercase;
            color: rgba(255,255,255,0.2) !important;
            position: relative !important;
            padding: 4px 0 !important;
            overflow: hidden !important;
            animation: v3WaitingScan 4s ease-in-out infinite !important;
        }
        .hero-empty-waiting::after {
            content: '' !important;
            position: absolute !important;
            bottom: 0 !important; left: 0 !important;
            width: 100% !important; height: 1px !important;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
            animation: v3ScanLine 2.5s linear infinite !important;
        }
        @keyframes v3WaitingScan {
            0%, 100% { opacity: 0.15; }
            50%      { opacity: 0.4; }
        }
        @keyframes v3ScanLine {
            0%   { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        /* ── Download button in launcher header ──────────────────── */
        .hero-download-btn {
            background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(99,102,241,0.1)) !important;
            border: 1px solid rgba(168,85,247,0.3) !important;
            border-radius: 10px !important;
            backdrop-filter: blur(8px);
            box-shadow: 0 2px 10px rgba(168,85,247,0.12);
            padding: 5px 12px !important;
            font-size: 0.68rem !important;
            transition: all 0.3s ease !important;
        }
        .hero-download-btn:hover {
            background: linear-gradient(135deg, rgba(168,85,247,0.3), rgba(99,102,241,0.2)) !important;
            box-shadow: 0 4px 20px rgba(168,85,247,0.3);
            transform: scale(1.05) !important;
        }

        /* ── Launcher badge — glass pill ─────────────────────────── */
        .hero-launcher-badge {
            background: rgba(168,85,247,0.12) !important;
            border: 1px solid rgba(168,85,247,0.25) !important;
            backdrop-filter: blur(8px) !important;
            font-size: 0.6rem !important;
            letter-spacing: 1px !important;
            padding: 3px 10px !important;
            border-radius: 8px !important;
        }

        /* ── Panel canvas layers ─────────────────────────────────── */
        .hero-canvas.hero-canvas-mp,
        .hero-canvas.hero-canvas-live,
        .hero-canvas.hero-canvas-launcher {
            display: block !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            pointer-events: none !important;
            z-index: 1 !important;
            opacity: 0.7 !important;
        }

        /* Ensure panel children layer above canvas */
        .hero-panel-header,
        .hero-multiplayer-header,
        .hero-live-header,
        .hero-launcher-header,
        .hero-multiplayer-content,
        .hero-live-content,
        .hero-launcher-content {
            position: relative;
            z-index: 2;
        }

        /* ── Inner glow orbs — ambient light ─────────────────────── */
        .hero-multiplayer-content::after {
            content: '' !important;
            position: absolute !important;
            bottom: -30px !important; right: -30px !important;
            width: 120px !important; height: 120px !important;
            background: radial-gradient(circle, rgba(0,212,255,0.08) 0%, transparent 70%) !important;
            border-radius: 50% !important;
            pointer-events: none !important;
            z-index: 1 !important;
        }
        .hero-live-content::after {
            content: '' !important;
            position: absolute !important;
            bottom: -30px !important; right: -30px !important;
            width: 120px !important; height: 120px !important;
            background: radial-gradient(circle, rgba(255,0,64,0.08) 0%, transparent 70%) !important;
            border-radius: 50% !important;
            pointer-events: none !important;
            z-index: 1 !important;
        }
        .hero-launcher-content::after {
            content: '' !important;
            position: absolute !important;
            bottom: -30px !important; right: -30px !important;
            width: 120px !important; height: 120px !important;
            background: radial-gradient(circle, rgba(168,85,247,0.08) 0%, transparent 70%) !important;
            border-radius: 50% !important;
            pointer-events: none !important;
            z-index: 1 !important;
        }

        .hero-live-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.15), rgba(255, 100, 0, 0.1));
            border-bottom: 1px solid rgba(255, 0, 64, 0.2);
            position: relative;
        }
        
        .hero-live-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 0, 64, 0.5), rgba(255, 100, 0, 0.5), transparent);
        }

        .hero-live-dot {
            width: 12px;
            height: 12px;
            background: #ff0040;
            border-radius: 50%;
            box-shadow: 
                0 0 10px #ff0040,
                0 0 20px rgba(255, 0, 64, 0.5);
            animation: liveDotPulse 1.5s ease-in-out infinite;
            position: relative;
        }
        
        .hero-live-dot::after {
            content: '';
            position: absolute;
            inset: -4px;
            border: 2px solid rgba(255, 0, 64, 0.3);
            border-radius: 50%;
            animation: liveDotRing 1.5s ease-out infinite;
        }

        @keyframes liveDotPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(0.85); }
        }
        
        @keyframes liveDotRing {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(2); opacity: 0; }
        }

        .hero-live-title {
            font-family: 'Black Ops One', cursive;
            font-size: 1.1rem;
            color: white;
            letter-spacing: 3px;
            flex: 1;
            text-shadow: 0 0 10px rgba(255, 0, 64, 0.3);
        }

        .hero-live-count {
            background: linear-gradient(135deg, var(--red), var(--orange));
            padding: 5px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: bold;
            color: white;
            box-shadow: 
                0 4px 15px rgba(255, 0, 64, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .hero-live-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: visible;
        }

        .hero-live-empty {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
            padding: 2rem;
            text-align: center;
            background: radial-gradient(ellipse at center, rgba(255, 0, 64, 0.05) 0%, transparent 70%);
        }
        
        .hero-live-empty svg {
            filter: drop-shadow(0 0 10px rgba(255, 0, 64, 0.3));
            opacity: 0.4;
        }

        .hero-live-empty p {
            font-family: 'Russo One', sans-serif;
            font-size: 1rem;
            margin: 0;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 1px;
        }

        .hero-live-start-btn {
            display: none !important;
            padding: 12px 28px;
            background: linear-gradient(135deg, var(--red), var(--orange));
            border: none;
            border-radius: 25px;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-top: 10px;
            box-shadow: 
                0 4px 20px rgba(255, 0, 64, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
        }
        
        .hero-live-start-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }
        
        .hero-live-start-btn:hover::before {
            left: 100%;
        }

        .hero-live-start-btn:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 
                0 8px 30px rgba(255, 0, 64, 0.5),
                0 0 20px rgba(255, 0, 64, 0.3);
        }

        /* Live Stream Video Container */
        .hero-live-stream {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: visible;
        }

        /* Video Container - Premium Design */
        .hero-live-video-container {
            flex: 1;
            position: relative;
            background: linear-gradient(135deg, #0a0510 0%, #1a0a20 100%);
            overflow: hidden;
            min-height: 220px;
        }
        
        /* Game Cover as Background (shows while video loads) */
        .hero-live-cover-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: blur(2px) brightness(0.5);
            z-index: 0;
        }
        
        .hero-live-video-container::before {
            content: '';
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse at 30% 30%, rgba(255, 0, 64, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 70%, rgba(255, 100, 0, 0.08) 0%, transparent 50%);
            pointer-events: none;
            z-index: 1;
        }
        
        .hero-live-stream video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: transparent;
            position: absolute;
            inset: 0;
            z-index: 2;
        }
        
        /* Video Wrapper - Shows real-time gameplay */
        .hero-live-video-wrapper {
            flex: 1;
            position: relative;
            background: linear-gradient(135deg, #0a0510 0%, #1a0a20 100%);
            overflow: hidden;
            min-height: 220px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .hero-live-video-wrapper::before {
            content: '';
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse at center, rgba(255, 0, 64, 0.08) 0%, transparent 60%);
            pointer-events: none;
            z-index: 1;
        }
        
        /* Real-time video stream */
        .hero-live-video-wrapper video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
            z-index: 3;
        }
        
        /* Cover as fullscreen background (fallback when no video) */
        .hero-live-cover-bg-full {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
            filter: brightness(0.85) contrast(1.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 2;
        }
        
        .hero-live-stream:hover .hero-live-cover-bg-full {
            transform: scale(1.05);
            filter: brightness(1) contrast(1.1);
        }
        
        /* Small cover thumbnail in corner */
        .hero-live-cover-thumb {
            position: absolute;
            bottom: 12px;
            right: 12px;
            width: 60px;
            height: 80px;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            z-index: 10;
            transition: all 0.3s ease;
            background: #111;
        }
        
        .hero-live-cover-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .hero-live-stream:hover .hero-live-cover-thumb {
            transform: scale(1.1);
            border-color: var(--orange);
            box-shadow: 0 6px 20px rgba(255, 100, 0, 0.4);
        }
        
        /* Game Cover Container - Premium Design */
        .hero-live-cover-container {
            flex: 1;
            position: relative;
            background: linear-gradient(135deg, #0a0510 0%, #1a0a20 100%);
            overflow: visible;
            min-height: 220px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .hero-live-cover-container::before {
            content: '';
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse at center, rgba(255, 0, 64, 0.08) 0%, transparent 60%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 1;
        }
        
        .hero-live-cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
            filter: brightness(0.85) contrast(1.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .hero-live-stream:hover .hero-live-cover {
            transform: scale(1.05);
            filter: brightness(1) contrast(1.1);
        }
        
        .hero-live-cover-placeholder {
            font-size: 5rem;
            opacity: 0.15;
            filter: drop-shadow(0 0 30px rgba(255, 0, 64, 0.3));
        }
        
        /* Live/Playing Badges - Premium Gaming Style */
        .hero-live-badge-live {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 6px 14px;
            background: linear-gradient(135deg, #ff0040, #cc0030);
            border-radius: 6px;
            font-family: 'Black Ops One', cursive;
            font-size: 0.75rem;
            color: white;
            letter-spacing: 2px;
            z-index: 10;
            box-shadow: 
                0 4px 15px rgba(255, 0, 64, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            animation: badgePulse 2s ease-in-out infinite;
        }
        
        .hero-live-badge-playing {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 6px 14px;
            background: linear-gradient(135deg, #00c853, #00a040);
            border-radius: 6px;
            font-family: 'Black Ops One', cursive;
            font-size: 0.75rem;
            color: white;
            letter-spacing: 1px;
            z-index: 10;
            box-shadow: 
                0 4px 15px rgba(0, 200, 83, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        
        .hero-live-console-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 5px 12px;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            font-family: 'Russo One', sans-serif;
            font-size: 0.65rem;
            color: rgba(255, 255, 255, 0.8);
            letter-spacing: 1px;
            text-transform: uppercase;
            z-index: 10;
        }
        
        @keyframes badgePulse {
            0%, 100% { box-shadow: 0 4px 15px rgba(255, 0, 64, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
            50% { box-shadow: 0 4px 25px rgba(255, 0, 64, 0.7), 0 0 30px rgba(255, 0, 64, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
        }

        /* Info Bar - Premium Gaming Design */
        .hero-live-stream-info {
            position: relative;
            padding: 14px 16px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(10, 5, 20, 0.95) 100%);
            display: flex;
            align-items: center;
            gap: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .hero-live-stream-info::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 0, 64, 0.3), rgba(255, 100, 0, 0.3), transparent);
        }

        .hero-live-stream-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid var(--red);
            box-shadow: 0 0 15px rgba(255, 0, 64, 0.3);
            object-fit: cover;
        }

        .hero-live-stream-details {
            flex: 1;
            overflow: hidden;
        }

        .hero-live-stream-game {
            font-family: 'Russo One', sans-serif;
            font-size: 0.95rem;
            color: white;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            margin-bottom: 2px;
        }

        .hero-live-stream-user {
            font-size: 0.8rem;
            color: var(--orange);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .hero-live-stream-user::before {
            content: '●';
            font-size: 0.5rem;
            color: #00c853;
        }

        .hero-live-stream-viewers {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Watch Button Overlay */
        .hero-live-stream::after {
            content: '▶ WATCH';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            padding: 12px 24px;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.9), rgba(255, 100, 0, 0.9));
            border-radius: 30px;
            font-family: 'Black Ops One', cursive;
            font-size: 0.9rem;
            color: white;
            letter-spacing: 2px;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
            z-index: 20;
            box-shadow: 0 8px 30px rgba(255, 0, 64, 0.5);
        }
        
        /* Portuguese override for watch button */
        html[lang="pt"] .hero-live-stream::after,
        body.lang-pt .hero-live-stream::after {
            content: '▶ ASSISTIR';
        }
        
        .hero-live-stream:hover::after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        /* Connecting State - Premium */
        .hero-live-connecting {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
            height: 100%;
            min-height: 220px;
            background: radial-gradient(ellipse at center, rgba(255, 0, 64, 0.05) 0%, transparent 70%);
        }
        
        .hero-live-connecting span {
            font-family: 'Russo One', sans-serif;
            color: rgba(255, 255, 255, 0.5);
            letter-spacing: 2px;
            font-size: 0.85rem;
        }

        .hero-live-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(255, 0, 64, 0.1);
            border-top-color: var(--red);
            border-right-color: var(--orange);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            box-shadow: 0 0 20px rgba(255, 0, 64, 0.2);
        }
        
        /* Cover Overlay Effect */
        .hero-live-cover-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, 
                transparent 0%,
                transparent 40%,
                rgba(0, 0, 0, 0.3) 70%,
                rgba(0, 0, 0, 0.7) 100%
            );
            pointer-events: none;
            z-index: 2;
        }
        
        /* Online Status Badge */
        .hero-live-stream-status {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(0, 200, 83, 0.1);
            border-radius: 20px;
            font-size: 0.75rem;
            color: #00c853;
            border: 1px solid rgba(0, 200, 83, 0.3);
            font-family: 'Russo One', sans-serif;
            letter-spacing: 1px;
        }
        
        .hero-status-online {
            width: 8px;
            height: 8px;
            background: #00c853;
            border-radius: 50%;
            box-shadow: 0 0 8px #00c853;
            animation: statusPulse 2s ease-in-out infinite;
        }
        
        @keyframes statusPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(0.8); }
        }
        
        /* Multiple Streams Counter */
        .hero-live-more-streams {
            position: absolute;
            bottom: 70px;
            right: 12px;
            padding: 6px 12px;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            font-family: 'Russo One', sans-serif;
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.8);
            letter-spacing: 1px;
            z-index: 15;
        }

        /* ============================================================ */
        /* MOBILE FIX: Override V3 premium panel sizing on small screens */
        /* Must come AFTER V3 block to win in the cascade                */
        /* ============================================================ */
        @media (max-width: 1024px) {
            .hero-multiplayer-panel,
            .hero-live-panel,
            .hero-launcher-panel {
                flex: 0 0 auto;
                width: 100%;
                max-width: 450px;
                min-height: 260px;
                max-height: 320px;
            }
            .hero-multiplayer-panel:hover,
            .hero-live-panel:hover,
            .hero-launcher-panel:hover {
                transform: translateY(-4px) scale(1.01) !important;
            }
        }

        @media (max-width: 768px) {
            .hero-multiplayer-panel,
            .hero-live-panel,
            .hero-launcher-panel {
                width: 100%;
                max-width: 100%;
                min-height: 220px;
                max-height: 280px;
            }
            .hero-multiplayer-panel:hover,
            .hero-live-panel:hover,
            .hero-launcher-panel:hover {
                transform: none !important;
            }
            .hero-panels-row {
                gap: 0.8rem;
            }
            .hero-top-row {
                gap: 1rem;
            }
            .hero-side-panel {
                max-height: 350px;
            }
            .hero-side-panel .last-games-list,
            .hero-side-panel .top-players-list {
                max-height: 280px;
            }
            /* Reduce heavy effects on mobile */
            .hero-multiplayer-panel::before,
            .hero-live-panel::before,
            .hero-launcher-panel::before {
                animation: none !important;
            }
        }

        @media (max-width: 480px) {
            .hero-multiplayer-panel,
            .hero-live-panel,
            .hero-launcher-panel {
                min-height: 200px;
                max-height: 260px;
                border-radius: 16px !important;
            }
            .hero-multiplayer-panel::after,
            .hero-live-panel::after,
            .hero-launcher-panel::after {
                border-radius: 14px !important;
            }
            .hero-multiplayer-header,
            .hero-live-header,
            .hero-launcher-header {
                padding: 12px 14px !important;
            }
            .hero-live-title,
            .hero-launcher-title,
            .hero-panel-title {
                font-size: 0.85rem !important;
            }
            .hero-multiplayer-empty svg,
            .hero-live-empty svg,
            .hero-launcher-empty svg {
                width: 48px !important;
                height: 48px !important;
            }
            .hero-multiplayer-empty p,
            .hero-live-empty p,
            .hero-launcher-empty p {
                font-size: 0.8rem !important;
            }
            .hero-empty-waiting {
                font-size: 0.5rem !important;
                letter-spacing: 3px !important;
            }
            .hero-multiplayer-btn,
            .hero-live-start-btn,
            .hero-launcher-download-cta {
                padding: 10px 20px !important;
                font-size: 0.7rem !important;
                letter-spacing: 2px !important;
            }
            .hero-launcher-header {
                flex-wrap: wrap;
                gap: 6px !important;
            }
            .hero-download-btn {
                font-size: 0.6rem !important;
                padding: 4px 8px !important;
            }
        }

        /* Touch device: disable hover lift on panels */
        @media (hover: none) and (pointer: coarse) {
            .hero-multiplayer-panel:hover,
            .hero-live-panel:hover,
            .hero-launcher-panel:hover {
                transform: none !important;
                filter: none !important;
            }
            .hero-multiplayer-panel:active,
            .hero-live-panel:active,
            .hero-launcher-panel:active {
                transform: scale(0.99) !important;
            }
        }

        /* ========================================
           HERO LIVE CAROUSEL - Navigate Streams
           ======================================== */
        .hero-live-carousel {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: visible;
        }

        .hero-live-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.9), rgba(200, 0, 50, 0.9));
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 30;
            transition: all 0.3s ease;
            color: white;
            font-size: 1.1rem;
            box-shadow: 0 4px 15px rgba(255, 0, 64, 0.5);
        }

        .hero-live-nav:hover {
            background: linear-gradient(135deg, rgba(255, 50, 100, 1), rgba(255, 0, 64, 1));
            border-color: white;
            transform: translateY(-50%) scale(1.15);
            box-shadow: 0 6px 25px rgba(255, 0, 64, 0.7);
        }

        .hero-live-nav-prev {
            left: -20px;
        }

        .hero-live-nav-next {
            right: -20px;
        }

        .hero-live-nav.hidden {
            display: none;
        }

        /* Dots Indicator */
        .hero-live-dots {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 25;
            padding: 6px 14px;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .hero-live-dot {
            width: 10px;
            height: 10px;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .hero-live-dot:hover {
            background: rgba(255, 255, 255, 0.7);
            transform: scale(1.2);
        }

        .hero-live-dot.active {
            background: #ff0040;
            box-shadow: 0 0 12px rgba(255, 0, 64, 0.8);
            transform: scale(1.25);
            position: relative;
            overflow: hidden;
        }

        /* Progress animation for active dot */
        .hero-live-dot.active::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            animation: dotProgress 8s linear infinite;
            transform-origin: center;
        }

        @keyframes dotProgress {
            0% { transform: scale(0); opacity: 1; }
            100% { transform: scale(1.5); opacity: 0; }
        }

        /* Auto-slide progress bar */
        .hero-live-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: rgba(255, 255, 255, 0.1);
            z-index: 30;
            overflow: hidden;
        }

        .hero-live-progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #ff0040, #ff6600);
            box-shadow: 0 0 10px rgba(255, 0, 64, 0.5);
            transition: none;
        }

        .hero-live-progress-bar.animating {
            width: 100%;
            transition: width 60s linear;
        }

        /* Stream Counter Badge */
        .hero-live-stream-counter {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 5px 12px;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            font-family: 'Russo One', sans-serif;
            font-size: 0.7rem;
            color: white;
            letter-spacing: 1px;
            z-index: 15;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .hero-live-stream-counter span {
            color: #ff0040;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        @keyframes heroReveal {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .hero-badge {
            display: inline-block;
            padding: 1rem 3rem;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.9), rgba(255, 107, 0, 0.9));
            border: 1px solid rgba(255, 215, 0, 0.5);
            font-family: 'Russo One', sans-serif;
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 2.5rem;
            box-shadow: 0 4px 30px rgba(255, 0, 64, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
            border-radius: 50px;
            position: relative;
            overflow: hidden;
            animation: badgeFloat 3s ease-in-out infinite;
        }
        
        .hero-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: badgeSweep 3s ease-in-out infinite;
        }

        @keyframes badgeFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
        }
        
        @keyframes badgeSweep {
            0% { left: -100%; }
            50%, 100% { left: 100%; }
        }

        .hero-title {
            font-family: 'Black Ops One', cursive;
            font-size: clamp(3.5rem, 15vw, 12rem);
            line-height: 0.9;
            margin-bottom: 1.5rem;
            letter-spacing: 6px;
            text-transform: uppercase;
            text-shadow: 
                3px 3px 0 var(--orange),
                6px 6px 0 var(--yellow),
                9px 9px 0 rgba(0, 0, 0, 0.4),
                0 0 50px var(--red);
            /* animation: titleFloat 6s ease-in-out infinite; DISABLED FOR PERFORMANCE */
        }

        .hero-title-sub {
            display: block;
            font-size: clamp(1.2rem, 4vw, 3rem);
            letter-spacing: 8px;
            color: rgba(255, 255, 255, 0.6);
            text-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
            margin-top: 0.3rem;
        }

        /* DISABLED FOR PERFORMANCE - title float animation
        @keyframes titleFloat {
            0%, 100% { 
                transform: translateY(0); 
                text-shadow: 3px 3px 0 var(--orange), 6px 6px 0 var(--yellow), 9px 9px 0 rgba(0, 0, 0, 0.4), 0 0 40px var(--red); 
            }
            50% { 
                transform: translateY(-8px); 
                text-shadow: 3px 3px 0 var(--orange), 6px 6px 0 var(--yellow), 12px 12px 0 rgba(0, 0, 0, 0.3), 0 0 60px var(--red); 
            }
        }
        */

        .title-word {
            display: block;
            background: linear-gradient(180deg, var(--red) 0%, var(--orange) 50%, var(--yellow) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-subtitle {
            font-family: 'Russo One', sans-serif;
            font-size: 1.8rem;
            color: white;
            margin-bottom: 3rem;
            letter-spacing: 4px;
            text-transform: uppercase;
            text-shadow: 
                2px 2px 4px rgba(0, 0, 0, 0.8),
                0 0 30px var(--orange);
            animation: subtitleGlow 3s ease-in-out infinite;
        }

        @keyframes subtitleGlow {
            0%, 100% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 25px var(--orange); }
            50% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 40px var(--orange), 0 0 60px rgba(255, 102, 0, 0.5); }
        }

        /* ========================================== */
        /* HERO ULTRA EFFECTS - DISABLED FOR PERFORMANCE */
        /* ========================================== */
        .hero-canvas {
            display: none !important; /* 🚀 DISABLED - canvas animations are too heavy */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        /* 🚀 DISABLED FOR PERFORMANCE - Static gradient instead of animated */
        .hero-animated-bg {
            /* Hidden to avoid color banding; keeps layout unaffected */
            display: none !important;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: 
                radial-gradient(circle at 30% 20%, rgba(255, 0, 100, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(255, 100, 0, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 50% 80%, rgba(150, 0, 255, 0.05) 0%, transparent 50%);
            /* animation: heroBgShift 12s ease-in-out infinite; DISABLED */
            pointer-events: none;
            z-index: 0;
        }

        /* DISABLED FOR PERFORMANCE
        @keyframes heroBgShift {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.15) rotate(5deg); }
        }
        */

        /* 🚀 DISABLED FOR PERFORMANCE - Static scanlines, no animation */
        .hero-scanlines {
            display: none !important; /* Completely hidden for performance */
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: repeating-linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.08),
                rgba(0, 0, 0, 0.08) 1px,
                transparent 1px,
                transparent 3px
            );
            pointer-events: none;
            /* animation: scanlineMove 6s linear infinite; DISABLED */
            z-index: 2;
        }

        /* DISABLED FOR PERFORMANCE
        @keyframes scanlineMove {
            0% { transform: translateY(0); }
            100% { transform: translateY(6px); }
        }
        */

        .hero-vignette {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.7);
            pointer-events: none;
            z-index: 3;
        }

        /* Title with glitch effect - ANIMATION DISABLED FOR PERFORMANCE */
        .title-word {
            display: block;
            background: linear-gradient(180deg, 
                #ff9d00 0%, 
                #ff6b00 25%,
                #ff3d00 50%, 
                #ff1744 75%,
                #c41e00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
            filter: 
                drop-shadow(0 0 25px rgba(255, 69, 0, 0.9))
                drop-shadow(0 0 50px rgba(255, 23, 68, 0.7));
            /* animation: titlePulse 4s ease-in-out infinite; DISABLED FOR PERFORMANCE */
        }

        /* DISABLED FOR PERFORMANCE - drop-shadow animations are expensive
        @keyframes titlePulse {
            0%, 100% {
                filter: 
                    drop-shadow(0 0 20px rgba(255, 69, 0, 0.8))
                    drop-shadow(0 0 40px rgba(255, 23, 68, 0.6));
            }
            50% {
                filter: 
                    drop-shadow(0 0 30px rgba(255, 69, 0, 1))
                    drop-shadow(0 0 60px rgba(255, 23, 68, 0.9))
                    drop-shadow(0 0 80px rgba(255, 157, 0, 0.5));
            }
        }
        */

        /* ========================================== */
        /* SHOWCASE SECTION - MOST PLAYED & LIVE NOW */
        /* ========================================== */
        .showcase-section {
            position: relative;
            padding: 4rem 5%;
            background: linear-gradient(180deg, 
                rgba(10, 5, 15, 1) 0%,
                rgba(15, 8, 20, 1) 50%,
                rgba(10, 5, 15, 1) 100%);
            z-index: 10;
        }

        .showcase-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            max-width: 1600px;
            margin: 0 auto;
        }

        @media (max-width: 1024px) {
            .showcase-container {
                grid-template-columns: 1fr;
            }
        }

        .showcase-panel {
            background: rgba(15, 10, 20, 0.9);
            border: 2px solid rgba(255, 100, 0, 0.3);
            border-radius: 20px;
            padding: 1.5rem;
            backdrop-filter: blur(20px);
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }

        .showcase-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow));
        }

        .showcase-panel:hover {
            border-color: rgba(255, 100, 0, 0.6);
            box-shadow: 0 10px 50px rgba(255, 100, 0, 0.2);
        }

        .panel-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .panel-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 100, 0, 0.15);
            border-radius: 12px;
            position: relative;
        }

        .panel-icon.live-icon .live-dot {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 10px;
            height: 10px;
            background: #ff0040;
            border-radius: 50%;
            animation: liveDotPulse 1.5s ease-in-out infinite;
        }

        @keyframes liveDotPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.3); opacity: 0.7; }
        }

        .panel-title {
            font-family: 'Russo One', sans-serif;
            font-size: 1.3rem;
            color: white;
            letter-spacing: 2px;
            flex: 1;
        }

        .panel-badge {
            padding: 0.4rem 1rem;
            background: linear-gradient(135deg, rgba(255, 100, 0, 0.3), rgba(255, 50, 0, 0.3));
            border: 1px solid rgba(255, 100, 0, 0.5);
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 1px;
            color: var(--orange);
        }

        .panel-badge.live-badge {
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.3), rgba(255, 0, 100, 0.3));
            border-color: rgba(255, 0, 64, 0.5);
            color: #ff4466;
            animation: liveBadgePulse 2s ease-in-out infinite;
        }

        @keyframes liveBadgePulse {
            0%, 100% { box-shadow: 0 0 10px rgba(255, 0, 64, 0.3); }
            50% { box-shadow: 0 0 20px rgba(255, 0, 64, 0.6); }
        }

        .panel-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3rem;
            color: rgba(255, 255, 255, 0.6);
            gap: 1rem;
        }

        .panel-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255, 100, 0, 0.2);
            border-top-color: var(--orange);
            border-radius: 50%;
            animation: panelSpin 1s linear infinite;
        }

        @keyframes panelSpin {
            to { transform: rotate(360deg); }
        }

        /* Most Played Grid - PREMIUM 6 CARDS LAYOUT v4 */
        .most-played-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 2;
        }

        /* Desktop - 3 columns, #1 spans 2 */
        @media (min-width: 1200px) {
            .most-played-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 1.6rem;
            }
        }
        
        /* Tablet - 2 columns, #1 spans 2 */
        @media (min-width: 768px) and (max-width: 1199px) {
            .most-played-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.2rem;
                padding: 0 1.5rem;
            }
        }

        /* Mobile - 2 columns */
        @media (max-width: 767px) {
            .most-played-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
                padding: 0 1rem;
            }
        }

        /* Small Mobile - 2 columns tighter */
        @media (max-width: 480px) {
            .most-played-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.8rem;
                padding: 0 0.75rem;
            }
        }

        .most-played-item {
            position: relative;
            aspect-ratio: 1/1;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }

        .most-played-item:hover {
            transform: translateY(-2px) scale(1.02);
            border-color: var(--orange);
            box-shadow: 0 6px 20px rgba(255, 100, 0, 0.4);
            z-index: 10;
        }

        .most-played-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .most-played-item:hover img {
            transform: scale(1.1);
        }

        .most-played-rank {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 16px;
            height: 16px;
            background: linear-gradient(135deg, var(--red), var(--orange));
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Black Ops One', cursive;
            font-size: 0.5rem;
            color: white;
            z-index: 2;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
        }

        .most-played-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 0.3rem;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }

        .most-played-item:hover .most-played-info {
            opacity: 1;
            transform: translateY(0);
        }

        .most-played-name {
            font-size: 0.5rem;
            font-weight: 600;
            color: white;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .most-played-plays {
            font-size: 0.45rem;
            color: var(--orange);
        }

        /* Live Now Grid */
        .live-now-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            min-height: 300px;
        }

        @media (max-width: 768px) {
            .live-now-grid {
                grid-template-columns: 1fr;
            }
        }

        .live-stream-card {
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border: 2px solid rgba(255, 0, 64, 0.3);
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .live-stream-card:hover {
            border-color: rgba(255, 0, 64, 0.8);
            box-shadow: 0 10px 40px rgba(255, 0, 64, 0.3);
            transform: translateY(-3px);
        }

        .live-stream-video {
            width: 100%;
            aspect-ratio: 16/9;
            background: #000;
            position: relative;
        }

        .live-stream-video video,
        .live-stream-video iframe {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .live-stream-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.1), rgba(100, 0, 150, 0.1));
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
        }

        .live-stream-placeholder svg {
            margin-bottom: 0.5rem;
            opacity: 0.5;
        }

        .live-badge-overlay {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 0.3rem 0.8rem;
            background: rgba(255, 0, 64, 0.9);
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 700;
            color: white;
            display: flex;
            align-items: center;
            gap: 5px;
            animation: livePulse 2s ease-in-out infinite;
        }

        .live-badge-overlay::before {
            content: '';
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
            animation: liveDotBlink 1s ease-in-out infinite;
        }

        @keyframes liveDotBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        @keyframes livePulse {
            0%, 100% { box-shadow: 0 0 10px rgba(255, 0, 64, 0.5); }
            50% { box-shadow: 0 0 20px rgba(255, 0, 64, 0.8); }
        }

        .live-stream-info {
            padding: 0.8rem;
            background: rgba(0, 0, 0, 0.6);
        }

        .live-stream-game {
            font-weight: 700;
            font-size: 0.9rem;
            color: white;
            margin-bottom: 0.3rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .live-stream-user {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.7);
        }

        .live-stream-user img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid var(--orange);
        }

        .live-stream-viewers {
            font-size: 0.7rem;
            color: var(--orange);
            margin-left: auto;
        }

        .no-streams-message {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3rem;
            text-align: center;
            color: rgba(255, 255, 255, 0.5);
        }

        .no-streams-message svg {
            width: 60px;
            height: 60px;
            opacity: 0.3;
            margin-bottom: 1rem;
        }

        .no-streams-message p {
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .no-streams-message .start-stream-btn {
            padding: 0.6rem 1.5rem;
            background: linear-gradient(135deg, var(--red), var(--orange));
            border: none;
            border-radius: 8px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .no-streams-message .start-stream-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(255, 100, 0, 0.4);
        }

        /* ===== SHOWCASE HORIZONTAL SCROLL - ENHANCED ===== */
        .showcase-games-scroll {
            display: flex;
            gap: 1.2rem;
            overflow-x: auto;
            padding: 1rem 0.5rem 1.5rem 0.5rem;
            scrollbar-width: thin;
            scrollbar-color: var(--orange) rgba(255,255,255,0.1);
            perspective: 1000px;
        }

        .showcase-games-scroll::-webkit-scrollbar {
            height: 6px;
        }

        .showcase-games-scroll::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.1);
            border-radius: 3px;
        }

        .showcase-games-scroll::-webkit-scrollbar-thumb {
            background: linear-gradient(90deg, var(--red), var(--orange));
            border-radius: 3px;
        }

        .showcase-game-card {
            flex: 0 0 auto;
            width: 120px;
            position: relative;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
            animation: cardSlideIn 0.6s ease-out backwards;
        }

        .showcase-game-card:nth-child(1) { animation-delay: 0.1s; }
        .showcase-game-card:nth-child(2) { animation-delay: 0.2s; }
        .showcase-game-card:nth-child(3) { animation-delay: 0.3s; }
        .showcase-game-card:nth-child(4) { animation-delay: 0.4s; }
        .showcase-game-card:nth-child(5) { animation-delay: 0.5s; }
        .showcase-game-card:nth-child(6) { animation-delay: 0.6s; }

        @keyframes cardSlideIn {
            from {
                opacity: 0;
                transform: translateY(30px) rotateX(-10deg);
            }
            to {
                opacity: 1;
                transform: translateY(0) rotateX(0);
            }
        }

        .showcase-game-card:hover {
            transform: translateY(-12px) scale(1.08) rotateY(5deg);
            z-index: 10;
        }

        .showcase-game-cover {
            width: 100%;
            aspect-ratio: 3/4;
            border-radius: 12px;
            overflow: hidden;
            border: 2px solid rgba(255,100,0,0.3);
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            position: relative;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: linear-gradient(145deg, rgba(20,10,30,1), rgba(10,5,15,1));
        }

        .showcase-game-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(45deg, transparent, rgba(255,100,0,0), transparent, rgba(255,215,0,0.3));
            border-radius: 14px;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.4s ease;
            animation: shimmerCard 3s linear infinite;
            background-size: 400% 400%;
        }

        @keyframes shimmerCard {
            0% { background-position: 100% 0%; }
            100% { background-position: -100% 0%; }
        }

        .showcase-game-card:hover::before {
            opacity: 1;
        }

        .showcase-game-card:hover .showcase-game-cover {
            border-color: var(--orange);
            box-shadow: 
                0 15px 40px rgba(255,100,0,0.4),
                0 0 30px rgba(255,100,0,0.2),
                inset 0 0 20px rgba(255,255,255,0.1);
        }

        .showcase-game-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
        }

        .showcase-game-card:hover .showcase-game-cover img {
            transform: scale(1.15);
            filter: brightness(1.1) saturate(1.2);
        }

        /* Glowing overlay on hover */
        .showcase-game-cover::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                135deg,
                transparent 30%,
                rgba(255, 100, 0, 0.1) 50%,
                transparent 70%
            );
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .showcase-game-card:hover .showcase-game-cover::after {
            opacity: 1;
            animation: glowPulse 2s ease-in-out infinite;
        }

        @keyframes glowPulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        .showcase-game-rank {
            position: absolute;
            top: -10px;
            left: -10px;
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--red), var(--orange));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Black Ops One', cursive;
            font-size: 1rem;
            font-weight: bold;
            color: white;
            z-index: 3;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            transition: all 0.3s ease;
            border: 2px solid rgba(255,255,255,0.2);
        }

        .showcase-game-card:hover .showcase-game-rank {
            transform: scale(1.15) rotate(-5deg);
            box-shadow: 0 6px 20px rgba(255,100,0,0.6);
        }

        .showcase-game-rank.rank-1 {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            animation: goldGlow 2s ease-in-out infinite;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
        }

        @keyframes goldGlow {
            0%, 100% { box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5); }
            50% { box-shadow: 0 4px 25px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.4); }
        }

        .showcase-game-rank.rank-2 {
            background: linear-gradient(135deg, #E8E8E8, #B8B8B8);
            animation: silverGlow 2.5s ease-in-out infinite;
        }

        @keyframes silverGlow {
            0%, 100% { box-shadow: 0 4px 15px rgba(200, 200, 200, 0.4); }
            50% { box-shadow: 0 4px 20px rgba(220, 220, 220, 0.7); }
        }

        .showcase-game-rank.rank-3 {
            background: linear-gradient(135deg, #CD7F32, #B87333);
            animation: bronzeGlow 3s ease-in-out infinite;
        }

        @keyframes bronzeGlow {
            0%, 100% { box-shadow: 0 4px 15px rgba(205, 127, 50, 0.4); }
            50% { box-shadow: 0 4px 20px rgba(205, 127, 50, 0.7); }
        }

        .showcase-game-plays {
            position: absolute;
            bottom: 8px;
            right: 8px;
            padding: 4px 10px;
            background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(30,10,20,0.9));
            border-radius: 6px;
            font-size: 0.7rem;
            color: var(--orange);
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 4px;
            border: 1px solid rgba(255,100,0,0.3);
            backdrop-filter: blur(4px);
            transition: all 0.3s ease;
        }

        .showcase-game-card:hover .showcase-game-plays {
            background: linear-gradient(135deg, rgba(255,100,0,0.9), rgba(255,50,0,0.9));
            color: white;
            border-color: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }

        /* Fire animation for plays counter */
        .showcase-game-plays::before {
            content: '';
            width: 6px;
            height: 6px;
            background: var(--orange);
            border-radius: 50%;
            animation: firePulse 1s ease-in-out infinite;
        }

        @keyframes firePulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(0.8); }
        }

        /* Console badge on hover */
        .showcase-game-console {
            position: absolute;
            top: 8px;
            right: 8px;
            padding: 3px 8px;
            background: rgba(0,0,0,0.85);
            border-radius: 4px;
            font-size: 0.55rem;
            color: #888;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            opacity: 0;
            transform: translateY(-5px);
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .showcase-game-card:hover .showcase-game-console {
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== LIVE NOW REALTIME - ENHANCED ===== */
        .live-now-realtime {
            min-height: 280px;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* Animated background for Live Now panel */
        .live-now-panel::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 80%, rgba(255, 0, 64, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 80% 20%, rgba(255, 0, 100, 0.03) 0%, transparent 40%);
            pointer-events: none;
            z-index: 0;
        }

        .live-now-panel > * {
            position: relative;
            z-index: 1;
        }

        .no-live-message {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: rgba(255,255,255,0.5);
            padding: 2rem;
            animation: fadeInUp 0.6s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .no-live-message svg {
            margin-bottom: 1rem;
            opacity: 0.4;
            /* animation removed for performance */
        }

        .no-live-message p {
            font-family: 'Russo One', sans-serif;
            font-size: 1rem;
            margin-bottom: 0.3rem;
        }

        .no-live-sub {
            font-size: 0.8rem !important;
            opacity: 0.7;
            margin-bottom: 1.5rem !important;
        }

        .start-stream-btn-showcase {
            padding: 0.8rem 1.8rem;
            background: linear-gradient(135deg, var(--red), var(--orange));
            border: none;
            border-radius: 10px;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.9rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255,0,64,0.3);
        }

        .start-stream-btn-showcase:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255,0,64,0.4);
        }

        .btn-icon {
            font-size: 1.1rem;
        }

        /* Live Stream Cards in Showcase - Enhanced */
        .live-streams-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            perspective: 1000px;
        }

        @media (max-width: 600px) {
            .live-streams-grid {
                grid-template-columns: 1fr;
            }
        }

        .live-showcase-card {
            position: relative;
            background: linear-gradient(145deg, rgba(20,5,25,0.9), rgba(10,0,15,0.95));
            border: 2px solid rgba(255,0,64,0.4);
            border-radius: 14px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
            contain: layout style;
        }

        /* Animation delays removed for performance */

        .live-showcase-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(45deg, rgba(255,0,64,0.3), transparent 50%, rgba(255,0,100,0.3));
            border-radius: 16px;
            opacity: 0;
            z-index: -1;
            transition: opacity 0.3s ease;
            /* animation removed for performance */
        }

        .live-showcase-card:hover {
            border-color: var(--red);
            box-shadow: 0 10px 30px rgba(255,0,64,0.3);
            transform: translateY(-3px);
        }

        .live-showcase-card:hover::before {
            opacity: 1;
        }

        .live-showcase-video {
            width: 100%;
            aspect-ratio: 16/9;
            background: linear-gradient(135deg, #0a0005, #150010);
            position: relative;
            overflow: hidden;
        }

        /* Loading spinner while connecting to stream */
        .live-showcase-video.connecting::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 28px;
            height: 28px;
            margin: -14px 0 0 -14px;
            border: 3px solid rgba(255,0,64,0.2);
            border-top-color: rgba(255,0,64,0.8);
            border-radius: 50%;
            z-index: 4;
            animation: showcaseSpinner 0.8s linear infinite;
            pointer-events: none;
        }

        @keyframes showcaseSpinner {
            to { transform: rotate(360deg); }
        }

        /* Video starts hidden, fades in when stream arrives */
        .live-showcase-video video {
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .live-showcase-video video.stream-active {
            opacity: 1;
        }

        .live-showcase-video::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.8) 100%);
            z-index: 2;
            pointer-events: none;
        }

        .live-showcase-video video,
        .live-showcase-video img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .live-showcase-card:hover .live-showcase-video video,
        .live-showcase-card:hover .live-showcase-video img {
            transform: scale(1.05);
        }

        .live-showcase-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 5px 12px;
            background: linear-gradient(135deg, rgba(255,0,64,0.95), rgba(200,0,50,0.95));
            border-radius: 6px;
            font-size: 0.7rem;
            font-weight: bold;
            color: white;
            display: flex;
            align-items: center;
            gap: 6px;
            animation: livePulse 2s ease-in-out infinite;
            z-index: 5;
            box-shadow: 0 2px 10px rgba(255,0,64,0.5);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .live-showcase-badge::before {
            content: '';
            width: 8px;
            height: 8px;
            background: white;
            border-radius: 50%;
            animation: liveDotBlink 1s ease-in-out infinite;
        }

        .live-showcase-info {
            padding: 1rem;
            background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 3;
            transform: translateY(0);
            transition: all 0.3s ease;
        }

        .live-showcase-card:hover .live-showcase-info {
            padding-bottom: 1.2rem;
        }

        .live-showcase-game {
            font-weight: bold;
            font-size: 0.9rem;
            color: white;
            margin-bottom: 0.4rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            transition: color 0.3s ease;
        }

        .live-showcase-card:hover .live-showcase-game {
            color: var(--orange);
        }

        .live-showcase-user {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.75rem;
            color: rgba(255,255,255,0.85);
        }

        .live-showcase-user img {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid var(--orange);
            box-shadow: 0 0 8px rgba(255,100,0,0.3);
            transition: all 0.3s ease;
        }

        .live-showcase-card:hover .live-showcase-user img {
            border-color: var(--yellow);
            transform: scale(1.1);
            box-shadow: 0 0 12px rgba(255,215,0,0.5);
        }

        .live-showcase-viewers {
            margin-left: auto;
            color: var(--orange);
            font-size: 0.75rem;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 3px 8px;
            background: rgba(255,100,0,0.15);
            border-radius: 10px;
            border: 1px solid rgba(255,100,0,0.3);
            transition: all 0.3s ease;
        }

        .live-showcase-card:hover .live-showcase-viewers {
            background: rgba(255,100,0,0.3);
            border-color: rgba(255,100,0,0.5);
        }

        /* Playing Now indicator animation */
        .live-showcase-playing {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 3px;
            z-index: 5;
        }

        .live-showcase-playing span {
            width: 4px;
            height: 16px;
            background: var(--orange);
            border-radius: 2px;
            animation: audioWave 1s ease-in-out infinite;
        }

        .live-showcase-playing span:nth-child(1) { animation-delay: 0s; }
        .live-showcase-playing span:nth-child(2) { animation-delay: 0.2s; }
        .live-showcase-playing span:nth-child(3) { animation-delay: 0.4s; }
        .live-showcase-playing span:nth-child(4) { animation-delay: 0.6s; }

        @keyframes audioWave {
            0%, 100% { height: 6px; opacity: 0.5; }
            50% { height: 16px; opacity: 1; }
        }

        /* Connection status indicator */
        .live-connection-status {
            position: absolute;
            bottom: 50px;
            right: 10px;
            padding: 4px 8px;
            background: rgba(0,0,0,0.7);
            border-radius: 4px;
            font-size: 0.6rem;
            color: #4ade80;
            display: flex;
            align-items: center;
            gap: 4px;
            z-index: 5;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .live-showcase-card:hover .live-connection-status {
            opacity: 1;
        }

        .live-connection-status::before {
            content: '';
            width: 6px;
            height: 6px;
            background: #4ade80;
            border-radius: 50%;
            animation: statusPulse 1.5s ease-in-out infinite;
        }

        @keyframes statusPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        /* Playing badge (for players not streaming) */
        .live-showcase-badge.playing-badge {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(22, 163, 74, 0.95));
            box-shadow: 0 2px 10px rgba(34, 197, 94, 0.5);
        }

        .live-showcase-badge.playing-badge::before {
            background: #bbf7d0;
            animation: playingDotPulse 0.8s ease-in-out infinite;
        }

        @keyframes playingDotPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.3); }
        }

        /* Player card styling (not streaming) */
        .live-showcase-card.player-card {
            border-color: rgba(34, 197, 94, 0.4);
            cursor: default;
        }

        .live-showcase-card.player-card:hover {
            border-color: rgba(34, 197, 94, 0.7);
            box-shadow: 
                0 15px 40px rgba(34, 197, 94, 0.3),
                0 0 60px rgba(34, 197, 94, 0.15);
        }

        .live-showcase-card.player-card::before {
            background: linear-gradient(45deg, rgba(34, 197, 94, 0.5), transparent 40%, transparent 60%, rgba(34, 197, 94, 0.5));
        }

        .live-showcase-card.player-card .live-showcase-playing span {
            background: #22c55e;
        }

        .live-showcase-card.player-card .live-showcase-user img {
            border-color: #22c55e;
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
        }

        .live-showcase-card.player-card:hover .live-showcase-user img {
            border-color: #4ade80;
            box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
        }

        .live-showcase-card.player-card:hover .live-showcase-game {
            color: #4ade80;
        }

        /* Console badge in user info */
        .live-showcase-console {
            margin-left: auto;
            padding: 2px 8px;
            background: rgba(255,255,255,0.1);
            border-radius: 4px;
            font-size: 0.65rem;
            color: rgba(255,255,255,0.7);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .hero-cta {
            display: flex;
            gap: 2rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        .hero-cta-with-support {
            gap: 1.25rem;
            align-items: stretch;
        }

        .game-btn {
            padding: 1.3rem 3.5rem;
            font-family: 'Russo One', sans-serif;
            font-size: 1.15rem;
            text-transform: uppercase;
            letter-spacing: 3px;
            border: none;
            cursor: pointer;
            position: relative;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-decoration: none;
            display: inline-block;
            font-weight: 700;
            border-radius: 12px;
            overflow: hidden;
            will-change: transform;
        }

        .game-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.25);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .game-btn:hover::before {
            width: 350px;
            height: 350px;
        }

        .game-btn-primary {
            background: linear-gradient(135deg, var(--red), var(--orange));
            color: white;
            border: 2px solid rgba(255, 215, 0, 0.6);
            box-shadow: 
                0 8px 35px rgba(255, 0, 64, 0.5),
                inset 0 1px 0 rgba(255,255,255,0.3);
        }

        .game-btn-primary:hover {
            transform: translateY(-4px) scale(1.03);
            box-shadow: 
                0 15px 50px rgba(255, 0, 64, 0.7),
                0 0 0 4px rgba(255, 0, 64, 0.2);
        }

        .game-btn-secondary {
            background: rgba(255, 255, 255, 0.05);
            color: var(--yellow);
            border: 2px solid var(--yellow);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(255, 204, 0, 0.2);
            backdrop-filter: blur(10px);
        }

        .game-btn-secondary:hover {
            background: var(--yellow);
            color: var(--dark);
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 20px 50px rgba(255, 204, 0, 0.5);
        }

        /* Animated Launcher Download Button */
        .game-btn-launcher-animated {
            background: linear-gradient(135deg, #7c3aed, #6366f1, #a855f7);
            color: #fff;
            border: 2px solid rgba(168, 85, 247, 0.5);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            overflow: hidden;
            position: relative;
            text-decoration: none;
        }
        .game-btn-launcher-animated:hover {
            transform: translateY(-4px) scale(1.03);
            box-shadow: 0 15px 40px rgba(139, 92, 246, 0.6);
            border-color: rgba(168, 85, 247, 0.8);
        }
        .launcher-icon {
            font-size: 1.1em;
            flex-shrink: 0;
        }
        .launcher-animated-text {
            display: inline-flex;
            flex-direction: column;
            height: 1.4em;
            overflow: hidden;
            position: relative;
        }
        .launcher-text-line {
            display: block;
            height: 1.4em;
            line-height: 1.4em;
            white-space: nowrap;
            font-weight: 700;
            font-size: 0.85rem;
            letter-spacing: 1px;
            animation: launcherTextScroll 4s ease-in-out infinite;
        }
        @keyframes launcherTextScroll {
            0%, 40% { transform: translateY(0); }
            50%, 90% { transform: translateY(-100%); }
            100% { transform: translateY(0); }
        }
        .game-btn-launcher-animated::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
            animation: launcherShine 3s ease-in-out infinite;
        }
        @keyframes launcherShine {
            0%, 100% { left: -100%; }
            50% { left: 100%; }
        }

        .hero-support {
            width: auto;
            margin: 0;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .hero-support-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.65rem;
            min-width: 220px;
            min-height: 75px;
            padding: 0.75rem 1.15rem;
            border-radius: 999px;
            border: 1px solid rgba(255, 198, 83, 0.64);
            background: linear-gradient(135deg, #ffd166 0%, #ff8a4c 48%, #ff4f7b 100%);
            color: #1a0b08;
            font-family: 'Russo One', sans-serif;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            line-height: 1;
            text-transform: uppercase;
            text-decoration: none;
            overflow: hidden;
            box-shadow: 0 10px 26px rgba(255, 126, 77, 0.28), inset 0 1px 0 rgba(255,255,255,0.45);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }

        .hero-support-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.26), transparent);
            transform: translateX(-120%);
            animation: heroSupportShine 4s ease-in-out infinite;
        }

        .hero-support-btn:hover {
            transform: translateY(-3px) scale(1.02);
            border-color: rgba(255, 221, 122, 0.9);
            box-shadow: 0 16px 36px rgba(255, 126, 77, 0.42), 0 0 0 3px rgba(255, 198, 83, 0.14);
        }

        .hero-support-icon,
        .hero-support-copy,
        .hero-support-title,
        .hero-support-subtitle {
            position: relative;
            z-index: 1;
        }

        .hero-support-icon {
            font-size: 1.05rem;
        }

        .hero-support-copy {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.22rem;
            text-align: left;
        }

        .hero-support-title,
        .hero-support-subtitle {
            white-space: nowrap;
        }

        .hero-support-subtitle {
            font-size: 0.56rem;
            letter-spacing: 1px;
            color: rgba(26, 11, 8, 0.72);
        }

        @keyframes heroSupportShine {
            0%, 72%, 100% { transform: translateX(-120%); }
            84% { transform: translateX(120%); }
        }

        /* Enhanced Stats Banner */
        .stats-banner {
            position: relative;
            padding: 4rem 5%;
            background: linear-gradient(135deg, var(--red), var(--orange), var(--yellow));
            z-index: 10;
            clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
            margin: 3rem 0;
            box-shadow: 
                0 10px 50px rgba(255, 0, 64, 0.5),
                inset 0 5px 30px rgba(255, 255, 255, 0.2);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 3rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .stat-card {
            text-align: center;
            background: rgba(0, 0, 0, 0.4);
            padding: 2rem;
            border: 3px solid rgba(255, 255, 255, 0.4);
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .stat-card:hover::before {
            top: -100%;
            left: 100%;
        }

        .stat-card:hover {
            transform: scale(1.1) translateY(-5px);
            border-color: white;
            background: rgba(0, 0, 0, 0.6);
            box-shadow: 0 10px 40px rgba(255, 255, 255, 0.3);
        }

        .stat-num {
            font-family: 'Black Ops One', cursive;
            font-size: 5rem;
            color: white;
            text-shadow: 
                3px 3px 6px rgba(0, 0, 0, 0.8),
                0 0 30px rgba(255, 255, 255, 0.5);
            line-height: 1;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1;
        }

        .stat-label {
            font-family: 'Russo One', sans-serif;
            font-size: 1.2rem;
            color: white;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            z-index: 1;
        }

        /* ============================================ */
        /* HOMEPAGE PANELS: Top Played + Top Players   */
        /* (Now inside hero-top-row)                   */
        /* ============================================ */

        /* Panel entrance animations */
        .last-games-panel,
        .top-players-panel {
            opacity: 0;
            transform: translateY(30px);
            animation: panelSlideIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
        .last-games-panel {
            animation-delay: 0.1s;
        }
        .top-players-panel {
            animation-delay: 0.3s;
        }
        @keyframes panelSlideIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Panel item stagger entrance */
        .last-game-item,
        .top-player-item {
            opacity: 0;
            animation: itemFadeIn 0.4s ease forwards;
        }
        @keyframes itemFadeIn {
            to { opacity: 1; }
        }
        .last-game-item:nth-child(1), .top-player-item:nth-child(1) { animation-delay: 0.3s; }
        .last-game-item:nth-child(2), .top-player-item:nth-child(2) { animation-delay: 0.38s; }
        .last-game-item:nth-child(3), .top-player-item:nth-child(3) { animation-delay: 0.46s; }
        .last-game-item:nth-child(4), .top-player-item:nth-child(4) { animation-delay: 0.54s; }
        .last-game-item:nth-child(5), .top-player-item:nth-child(5) { animation-delay: 0.62s; }
        .last-game-item:nth-child(6), .top-player-item:nth-child(6) { animation-delay: 0.70s; }
        .last-game-item:nth-child(7), .top-player-item:nth-child(7) { animation-delay: 0.78s; }
        .last-game-item:nth-child(8), .top-player-item:nth-child(8) { animation-delay: 0.86s; }
        .last-game-item:nth-child(9), .top-player-item:nth-child(9) { animation-delay: 0.94s; }
        .last-game-item:nth-child(10), .top-player-item:nth-child(10) { animation-delay: 1.02s; }

        /* --- Left Panel: Top Played Games --- */
        .last-games-panel {
            min-width: 0;
            background: linear-gradient(145deg, rgba(15, 10, 30, 0.95), rgba(5, 0, 15, 0.98));
            border: 2px solid transparent;
            border-image: linear-gradient(135deg, rgba(255, 100, 0, 0.5), rgba(255, 0, 64, 0.3), rgba(255, 100, 0, 0.2)) 1;
            border-radius: 20px;
            border-image: none;
            border-color: rgba(255, 100, 0, 0.25);
            overflow: hidden;
            position: relative;
        }
        .last-games-panel::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 22px;
            padding: 2px;
            background: linear-gradient(135deg, rgba(255, 100, 0, 0.5), rgba(255, 0, 64, 0.3), rgba(255, 100, 0, 0.15));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        .last-games-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px 20px 12px;
            background: linear-gradient(135deg, rgba(255, 100, 0, 0.12), rgba(255, 0, 64, 0.08));
            border-bottom: 1px solid rgba(255, 100, 0, 0.15);
        }
        .last-games-header .panel-icon {
            font-size: 1.2rem;
        }
        .last-games-header .panel-title {
            font-family: 'Black Ops One', 'Russo One', cursive;
            font-size: 0.95rem;
            color: #ff6a00;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        .last-games-header .panel-badge {
            margin-left: auto;
            background: linear-gradient(135deg, #ff6a00, #ff0040);
            color: white;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            letter-spacing: 1px;
            font-family: 'Russo One', sans-serif;
        }
        .last-games-list {
            display: flex;
            flex-direction: column;
            gap: 0;
            overflow-y: auto;
            padding: 8px 0;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 100, 0, 0.3) transparent;
        }
        .last-games-list::-webkit-scrollbar {
            width: 4px;
        }
        .last-games-list::-webkit-scrollbar-thumb {
            background: rgba(255, 100, 0, 0.3);
            border-radius: 4px;
        }
        .last-game-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 10px 20px;
            cursor: pointer;
            transition: all 0.25s ease;
            position: relative;
        }
        .last-game-item:hover {
            background: linear-gradient(90deg, rgba(255, 100, 0, 0.1), transparent);
        }
        .last-game-item:hover .lg-cover img {
            transform: scale(1.08);
            box-shadow: 0 4px 20px rgba(255, 100, 0, 0.3);
        }
        .last-game-item .lg-rank {
            width: 24px;
            font-family: 'Black Ops One', cursive;
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.25);
            text-align: center;
            flex-shrink: 0;
        }
        .last-game-item:nth-child(1) .lg-rank { color: #ff6a00; text-shadow: 0 0 10px rgba(255, 106, 0, 0.5); }
        .last-game-item:nth-child(2) .lg-rank { color: #ff4444; }
        .last-game-item:nth-child(3) .lg-rank { color: #ff6666; }
        .last-game-item .lg-cover {
            width: 50px;
            height: 66px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
            border: 2px solid rgba(255, 100, 0, 0.2);
            position: relative;
            background: linear-gradient(135deg, rgba(255, 100, 0, 0.08), rgba(255, 0, 64, 0.05));
        }
        .last-game-item .lg-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .last-game-item .lg-cover .lg-new-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            background: linear-gradient(135deg, #ff0040, #ff6a00);
            color: white;
            font-size: 0.5rem;
            font-weight: 800;
            padding: 1px 5px;
            border-radius: 0 6px 0 6px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .last-game-item .lg-info {
            flex: 1;
            min-width: 0;
        }
        .last-game-item .lg-name {
            font-family: 'Russo One', sans-serif;
            font-size: 0.82rem;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 3px;
        }
        .last-game-item .lg-console {
            font-size: 0.68rem;
            color: rgba(255, 255, 255, 0.4);
            font-weight: 500;
            letter-spacing: 0.5px;
        }
        .last-game-item .lg-date {
            font-size: 0.6rem;
            color: rgba(255, 100, 0, 0.6);
            flex-shrink: 0;
            font-weight: 500;
        }
        .last-games-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 50px 20px;
            color: rgba(255, 255, 255, 0.3);
            gap: 10px;
        }
        .last-games-empty .empty-icon {
            font-size: 2.5rem;
            opacity: 0.5;
        }

        /* --- Right Panel: Top Players Ranking --- */
        .top-players-panel {
            min-width: 0;
            background: linear-gradient(145deg, rgba(15, 10, 30, 0.95), rgba(5, 0, 15, 0.98));
            border-radius: 20px;
            overflow: hidden;
            position: relative;
        }
        .top-players-panel::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 22px;
            padding: 2px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.5), rgba(123, 47, 247, 0.3), rgba(0, 212, 255, 0.15));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        .top-players-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px 20px 12px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(123, 47, 247, 0.06));
            border-bottom: 1px solid rgba(0, 212, 255, 0.15);
        }
        .top-players-header .panel-icon {
            font-size: 1.2rem;
        }
        .top-players-header .panel-title {
            font-family: 'Black Ops One', 'Russo One', cursive;
            font-size: 0.95rem;
            color: #00d4ff;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        .top-players-header .panel-badge {
            margin-left: auto;
            background: linear-gradient(135deg, #00d4ff, #7b2ff7);
            color: white;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            letter-spacing: 1px;
            font-family: 'Russo One', sans-serif;
        }
        .top-players-list {
            display: flex;
            flex-direction: column;
            gap: 0;
            overflow-y: auto;
            padding: 6px 0;
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 212, 255, 0.3) transparent;
        }
        .top-players-list::-webkit-scrollbar {
            width: 4px;
        }
        .top-players-list::-webkit-scrollbar-thumb {
            background: rgba(0, 212, 255, 0.3);
            border-radius: 4px;
        }
        .top-player-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 20px;
            cursor: pointer;
            transition: all 0.25s ease;
            position: relative;
        }
        .top-player-item:hover {
            background: linear-gradient(90deg, rgba(0, 212, 255, 0.08), transparent);
        }
        .top-player-item:hover .tp-avatar img {
            transform: scale(1.1);
            box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
        }
        .top-player-item .tp-rank {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Black Ops One', cursive;
            font-size: 0.85rem;
            border-radius: 8px;
            flex-shrink: 0;
            color: rgba(255, 255, 255, 0.35);
            background: rgba(255, 255, 255, 0.03);
        }
        .top-player-item:nth-child(1) .tp-rank {
            background: linear-gradient(135deg, #ffd700, #ffaa00);
            color: #1a1a2e;
            font-weight: 900;
            box-shadow: 0 2px 12px rgba(255, 215, 0, 0.4);
        }
        .top-player-item:nth-child(2) .tp-rank {
            background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
            color: #1a1a2e;
            font-weight: 900;
            box-shadow: 0 2px 8px rgba(192, 192, 192, 0.3);
        }
        .top-player-item:nth-child(3) .tp-rank {
            background: linear-gradient(135deg, #cd7f32, #b8690e);
            color: #1a1a2e;
            font-weight: 900;
            box-shadow: 0 2px 8px rgba(205, 127, 50, 0.3);
        }
        .top-player-item .tp-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            border: 2px solid rgba(0, 212, 255, 0.25);
            position: relative;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(123, 47, 247, 0.08));
        }
        .top-player-item:nth-child(1) .tp-avatar { border-color: rgba(255, 215, 0, 0.5); }
        .top-player-item:nth-child(2) .tp-avatar { border-color: rgba(192, 192, 192, 0.4); }
        .top-player-item:nth-child(3) .tp-avatar { border-color: rgba(205, 127, 50, 0.4); }
        .top-player-item .tp-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .top-player-item .tp-avatar .tp-avatar-emoji {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
        }
        .top-player-item .tp-avatar .tp-online-dot {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            background: #2ed573;
            border-radius: 50%;
            border: 2px solid #0a0a1a;
        }
        .top-player-item .tp-info {
            flex: 1;
            min-width: 0;
        }
        .top-player-item .tp-name {
            font-family: 'Russo One', sans-serif;
            font-size: 0.82rem;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .top-player-item .tp-name .tp-verified {
            color: #00d4ff;
            font-size: 0.7rem;
        }
        .top-player-item .tp-name .tp-admin-badge {
            background: linear-gradient(135deg, #ff0040, #ff6a00);
            color: white;
            font-size: 0.5rem;
            padding: 1px 5px;
            border-radius: 4px;
            font-family: 'Russo One', sans-serif;
            letter-spacing: 0.5px;
        }
        .top-player-item .tp-stats {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.68rem;
            color: rgba(255, 255, 255, 0.4);
        }
        .top-player-item .tp-stats .tp-level {
            color: #00d4ff;
            font-weight: 600;
        }
        .top-player-item .tp-stats .tp-hours {
            color: rgba(255, 255, 255, 0.35);
        }
        .top-player-item .tp-stats .tp-games-count {
            color: rgba(255, 255, 255, 0.3);
        }
        .top-player-item .tp-rank-tier {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }
        .top-player-item .tp-rank-tier .tp-tier-icon {
            font-size: 1.1rem;
        }
        .top-player-item .tp-rank-tier .tp-tier-name {
            font-size: 0.55rem;
            color: rgba(255, 255, 255, 0.35);
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .top-players-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 50px 20px;
            color: rgba(255, 255, 255, 0.3);
            gap: 10px;
        }
        .top-players-empty .empty-icon {
            font-size: 2.5rem;
            opacity: 0.5;
        }

        /* Homepage Panels Responsive (now inside hero) */
        @media (max-width: 900px) {
            .last-games-list,
            .top-players-list {
                max-height: 320px;
            }
        }
        @media (max-width: 480px) {
            .last-game-item,
            .top-player-item {
                padding: 8px 14px;
            }
            .last-game-item .lg-cover {
                width: 42px;
                height: 56px;
            }
            .top-player-item .tp-avatar {
                width: 36px;
                height: 36px;
            }
        }

        /* ============================================ */
        /* HERO IMPROVEMENTS - Enhanced Panels & Stats */
        /* ============================================ */

        /* --- Panel Footer Links --- */
        .panel-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            cursor: pointer;
            transition: all 0.3s ease;
            gap: 8px;
            text-decoration: none;
        }
        .panel-footer:hover {
            background: rgba(255, 255, 255, 0.04);
        }
        .panel-footer .footer-text {
            font-family: 'Russo One', sans-serif;
            font-size: 0.72rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: letter-spacing 0.3s ease;
        }
        .panel-footer:hover .footer-text {
            letter-spacing: 3px;
        }
        .panel-footer .footer-arrow {
            font-size: 0.8rem;
            transition: transform 0.3s ease;
        }
        .panel-footer:hover .footer-arrow {
            transform: translateX(4px);
        }
        .last-games-panel .panel-footer {
            border-top-color: rgba(255, 100, 0, 0.12);
        }
        .last-games-panel .panel-footer .footer-text {
            color: rgba(255, 100, 0, 0.6);
        }
        .last-games-panel .panel-footer:hover .footer-text {
            color: #ff6a00;
        }
        .last-games-panel .panel-footer .footer-arrow {
            color: rgba(255, 100, 0, 0.4);
        }
        .last-games-panel .panel-footer:hover {
            background: linear-gradient(90deg, rgba(255, 100, 0, 0.06), transparent);
        }
        .top-players-panel .panel-footer {
            border-top-color: rgba(0, 212, 255, 0.12);
        }
        .top-players-panel .panel-footer .footer-text {
            color: rgba(0, 212, 255, 0.6);
        }
        .top-players-panel .panel-footer:hover .footer-text {
            color: #00d4ff;
        }
        .top-players-panel .panel-footer .footer-arrow {
            color: rgba(0, 212, 255, 0.4);
        }
        .top-players-panel .panel-footer:hover {
            background: linear-gradient(90deg, rgba(0, 212, 255, 0.06), transparent);
        }

        /* --- Play Count Progress Bar --- */
        .lg-plays-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .lg-plays-bar-bg {
            width: 40px;
            height: 4px;
            background: rgba(255, 100, 0, 0.12);
            border-radius: 2px;
            overflow: hidden;
            flex-shrink: 0;
        }
        .lg-plays-bar-fill {
            height: 100%;
            border-radius: 2px;
            background: linear-gradient(90deg, #ff6a00, #ff0040);
            transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .last-game-item:nth-child(1) .lg-plays-bar-fill { background: linear-gradient(90deg, #ffd700, #ff6a00); }
        .last-game-item:nth-child(2) .lg-plays-bar-fill { background: linear-gradient(90deg, #ff4444, #ff6a00); }
        .last-game-item:nth-child(3) .lg-plays-bar-fill { background: linear-gradient(90deg, #ff6666, #ff4444); }

        /* --- First Place Enhancement --- */
        .last-game-item:nth-child(1) {
            background: linear-gradient(90deg, rgba(255, 215, 0, 0.06), transparent);
        }
        .top-player-item:nth-child(1) {
            background: linear-gradient(90deg, rgba(255, 215, 0, 0.06), transparent);
        }

        /* --- Hero Stats Row --- */
        .hero-stats-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2.5rem;
            margin-bottom: 2rem;
            padding: 16px 32px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 16px;
            backdrop-filter: blur(8px);
            animation: heroReveal 0.8s ease-out 0.5s both;
        }
        .hero-stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }
        .hero-stat-number {
            font-family: 'Black Ops One', cursive;
            font-size: 1.6rem;
            background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }
        .hero-stat-label {
            font-family: 'Russo One', sans-serif;
            font-size: 0.6rem;
            color: rgba(255, 255, 255, 0.35);
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        .hero-stat-divider {
            width: 1px;
            height: 30px;
            background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.15), transparent);
        }
        @media (max-width: 600px) {
            .hero-stats-row {
                gap: 1.2rem;
                padding: 12px 20px;
            }
            .hero-stat-number {
                font-size: 1.2rem;
            }
            .hero-stat-label {
                font-size: 0.5rem;
            }
        }

        /* --- Enhanced Empty States for Bottom Panels --- */
        .hero-empty-waiting {
            font-family: 'Russo One', sans-serif;
            font-size: 0.65rem;
            color: rgba(255, 255, 255, 0.2);
            letter-spacing: 3px;
            text-transform: uppercase;
            animation: waitingPulse 2s ease-in-out infinite;
        }
        @keyframes waitingPulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.7; }
        }
        .hero-multiplayer-empty .hero-empty-waiting { color: rgba(0, 212, 255, 0.3); }
        .hero-live-empty .hero-empty-waiting { color: rgba(255, 0, 64, 0.3); }
        .hero-launcher-empty .hero-empty-waiting { color: rgba(168, 85, 247, 0.3); }

        /* Status dot inactive (grey when 0) */
        .hero-multiplayer-dot.inactive,
        .hero-live-dot.inactive,
        .hero-launcher-dot.inactive {
            background: rgba(255, 255, 255, 0.2) !important;
            box-shadow: none !important;
            animation: none !important;
        }
        .hero-multiplayer-dot.inactive::after,
        .hero-live-dot.inactive::after,
        .hero-launcher-dot.inactive::after {
            display: none !important;
        }

        /* Launcher empty state download button */
        .hero-launcher-download-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: linear-gradient(135deg, #a855f7, #6366f1);
            border: none;
            border-radius: 12px;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.75rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s ease;
            margin-top: 6px;
            box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3);
        }
        .hero-launcher-download-cta:hover {
            transform: translateY(-2px) scale(1.03);
            box-shadow: 0 8px 30px rgba(168, 85, 247, 0.5);
        }

        /* --- Top Player #1 Crown Effect --- */
        .top-player-item:nth-child(1) .tp-avatar::before {
            content: '👑';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.7rem;
            z-index: 3;
            filter: drop-shadow(0 1px 3px rgba(255, 215, 0, 0.5));
        }

        /* Sections Order Wrapper - Flexbox to reorder sections */
        .sections-order-wrapper {
            display: flex;
            flex-direction: column;
        }

        /* Enhanced Features Section */
        .features-section {
            position: relative;
            padding: 6rem 5%;
            background: linear-gradient(180deg, transparent, rgba(255, 0, 64, 0.08), transparent);
            z-index: 10;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2.5rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .feature-box {
            background: rgba(13, 13, 13, 0.9);
            border: 3px solid var(--orange);
            padding: 2.5rem;
            text-align: center;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            border-radius: 15px;
        }

        .feature-box::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent 40%, rgba(255, 102, 0, 0.2) 50%, transparent 60%);
            transform: rotate(45deg);
            transition: all 0.6s;
        }

        .feature-box:hover::before {
            top: -100%;
            left: 100%;
        }

        .feature-box::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, transparent 50%, var(--orange) 50%);
            transition: all 0.3s;
        }

        .feature-box:hover {
            transform: translateY(-10px);
            border-color: var(--red);
            box-shadow: 
                0 20px 50px rgba(255, 102, 0, 0.5),
                inset 0 0 30px rgba(255, 0, 64, 0.2);
        }

        .feature-box:hover::after {
            width: 60px;
            height: 60px;
        }

        .feature-icon-wrapper {
            font-size: 4rem;
            margin-bottom: 1.5rem;
            display: inline-block;
            filter: drop-shadow(0 5px 15px rgba(255, 102, 0, 0.6));
            transition: all 0.4s;
        }

        .feature-box:hover .feature-icon-wrapper {
            transform: scale(1.2) rotateY(360deg);
            filter: drop-shadow(0 10px 30px rgba(255, 0, 64, 0.8));
        }

        .feature-heading {
            font-family: 'Black Ops One', cursive;
            font-size: 1.6rem;
            color: var(--yellow);
            margin-bottom: 1rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-shadow: 0 0 20px var(--yellow);
        }

        .feature-desc {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.7;
            font-size: 1rem;
            font-weight: 600;
        }

        /* ============================================
           CONSOLE SECTION - PREMIUM REDESIGN v3.0
           ============================================ */
        .consoles-section {
            position: relative;
            padding: 5rem 3%;
            z-index: 10;
            overflow: hidden;
        }

        /* Decorative background accents */
        .consoles-section::before {
            content: '';
            position: absolute;
            top: -200px;
            left: 50%;
            transform: translateX(-50%);
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(255, 0, 64, 0.06) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        .section-header {
            text-align: center;
            margin-bottom: 3.5rem;
            position: relative;
            z-index: 1;
        }

        .section-label {
            font-family: 'Russo One', sans-serif;
            font-size: 0.85rem;
            color: var(--orange);
            letter-spacing: 5px;
            text-transform: uppercase;
            margin-bottom: 0.8rem;
            display: inline-block;
            padding: 0.4rem 1.5rem;
            border: 1px solid rgba(255, 102, 0, 0.3);
            border-radius: 30px;
            background: rgba(255, 102, 0, 0.05);
        }

        .section-heading {
            font-family: 'Black Ops One', cursive;
            font-size: clamp(2.2rem, 6vw, 4.2rem);
            background: linear-gradient(135deg, #fff 0%, var(--red) 40%, var(--orange) 70%, var(--yellow) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.8rem;
            letter-spacing: 4px;
            text-transform: uppercase;
            filter: drop-shadow(0 2px 10px rgba(255, 0, 64, 0.3));
        }

        .section-subtext {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 500;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* Grid Layout - Responsive & Clean */
        .consoles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(190px, 45%), 1fr));
            gap: 1.25rem;
            max-width: 1500px;
            margin: 0 auto;
            padding: 0 1rem;
            position: relative;
            z-index: 1;
        }

        @media (min-width: 768px) {
            .consoles-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                gap: 1.5rem;
            }
        }

        @media (min-width: 1200px) {
            .consoles-grid {
                grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
                gap: 1.75rem;
            }
        }

        /* Console Card - Glassmorphism Style */
        .console-item {
            background: linear-gradient(165deg, rgba(25, 15, 30, 0.85) 0%, rgba(15, 8, 20, 0.95) 100%);
            border: 1px solid rgba(255, 60, 80, 0.25);
            border-radius: 20px;
            padding: 1.8rem 1.2rem 1.4rem;
            position: relative;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                        border-color 0.4s ease;
            overflow: hidden;
            cursor: pointer;
            text-align: center;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),
                        inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        /* Top gradient accent line */
        .console-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--orange), var(--red));
            background-size: 200% 100%;
            opacity: 0.7;
            transition: opacity 0.4s ease;
            border-radius: 20px 20px 0 0;
        }

        /* Ambient glow on hover */
        .console-item::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120%;
            height: 120%;
            transform: translate(-50%, -50%);
            background: radial-gradient(ellipse, rgba(255, 60, 80, 0.12) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
            z-index: 0;
        }

        .console-item:hover {
            transform: translateY(-10px);
            border-color: rgba(255, 102, 0, 0.5);
            box-shadow: 
                0 20px 50px rgba(255, 0, 64, 0.25),
                0 8px 25px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .console-item:hover::before {
            opacity: 1;
            animation: cardTopGlow 2s linear infinite;
        }

        @keyframes cardTopGlow {
            0% { background-position: 0% 0; }
            100% { background-position: 200% 0; }
        }

        .console-item:hover::after {
            opacity: 1;
        }

        /* Year Tag - Minimal Pill */
        .console-year-tag {
            position: absolute;
            top: 14px;
            right: 14px;
            padding: 0.25rem 0.65rem;
            background: rgba(255, 0, 64, 0.15);
            border: 1px solid rgba(255, 0, 64, 0.35);
            font-family: 'Russo One', sans-serif;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 1px;
            border-radius: 20px;
            color: var(--orange);
            backdrop-filter: blur(5px);
            z-index: 2;
        }

        .console-item:hover .console-year-tag {
            background: rgba(255, 102, 0, 0.2);
            border-color: rgba(255, 102, 0, 0.5);
            color: var(--yellow);
        }

        /* Console Icon Container */
        .console-icon-box {
            width: 100%;
            height: 110px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.2rem;
            position: relative;
            z-index: 1;
            border-radius: 12px;
            background: radial-gradient(ellipse at center, rgba(255, 60, 80, 0.06) 0%, transparent 70%);
        }

        /* LAUNCHER ONLY Badge - Clean Minimal Design */
        .launcher-only-badge {
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 30, 60, 0.85);
            color: #00d4ff;
            font-family: 'Russo One', sans-serif;
            font-size: 0.48rem;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            white-space: nowrap;
            z-index: 10;
            border: 1px solid rgba(0, 212, 255, 0.4);
            box-shadow: 0 0 10px rgba(0, 212, 255, 0.15);
            animation: launcherGlow 3s ease-in-out infinite;
            backdrop-filter: blur(8px);
        }

        /* NEW Badge for Arcade - Clean Neon Green */
        .new-badge {
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(5, 35, 15, 0.85);
            color: #00ff88;
            font-family: 'Russo One', sans-serif;
            font-size: 0.55rem;
            padding: 3px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 2px;
            white-space: nowrap;
            z-index: 10;
            border: 1px solid rgba(0, 255, 136, 0.4);
            box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
            animation: newBadgeGlow 2.5s ease-in-out infinite;
            backdrop-filter: blur(8px);
        }

        @keyframes newBadgeGlow {
            0%, 100% { 
                box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
                border-color: rgba(0, 255, 136, 0.4);
                text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
            }
            50% { 
                box-shadow: 0 0 18px rgba(0, 255, 136, 0.35);
                border-color: rgba(0, 255, 136, 0.6);
                text-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
            }
        }

        .launcher-only-badge::before {
            content: '';
            display: none;
        }

        @keyframes launcherGlow {
            0%, 100% { 
                box-shadow: 0 0 10px rgba(0, 212, 255, 0.15);
                border-color: rgba(0, 212, 255, 0.4);
            }
            50% { 
                box-shadow: 0 0 15px rgba(0, 212, 255, 0.25);
                border-color: rgba(0, 212, 255, 0.6);
            }
        }

        @keyframes launcherIcon {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        /* Subtle corner indicator for launcher consoles - DISABLED */
        /*
        .console-item[data-console="PS2"]::before,
        .console-item[data-console="PSP"]::before {
            content: '🖥️';
            position: absolute;
            top: 8px;
            right: 8px;
            font-size: 0.9rem;
            opacity: 0.8;
            z-index: 5;
            filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
            animation: desktopPulse 3s ease-in-out infinite;
        }
        */

        @keyframes desktopPulse {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.1); opacity: 1; }
        }

        .console-icon-box img {
            max-width: 100%;
            max-height: 100px;
            width: auto;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0 4px 15px rgba(255, 0, 64, 0.3));
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
            background: transparent !important;
            border-radius: 8px;
        }

        /* Remove opaque dark backgrounds from CDN/unprocessed console logos */
        .console-item[data-console="SNES"] .console-icon-box img,
        .console-item[data-console="GBA"] .console-icon-box img,
        .console-item[data-console="Genesis"] .console-icon-box img,
        .console-item[data-console="PS1"] .console-icon-box img,
        .console-item[data-console="GameGear"] .console-icon-box img,
        .console-item[data-console="PS2"] .console-icon-box img {
            mix-blend-mode: lighten;
        }

        /* Invert dark logos for visibility on dark card backgrounds */
        .console-item[data-console="NDS"] .console-icon-box img,
        .console-item[data-console="PSP"] .console-icon-box img {
            filter: invert(1) drop-shadow(0 4px 15px rgba(0, 212, 255, 0.4));
        }

        .console-item[data-console="NDS"]:hover .console-icon-box img,
        .console-item[data-console="PSP"]:hover .console-icon-box img {
            filter: invert(1) drop-shadow(0 8px 25px rgba(0, 212, 255, 0.6)) brightness(1.1);
        }

        .console-item:hover .console-icon-box img {
            transform: scale(1.15) translateY(-4px);
            filter: drop-shadow(0 8px 25px rgba(255, 102, 0, 0.5)) brightness(1.1);
        }

        .console-item:hover .console-icon-box {
            background: radial-gradient(ellipse at center, rgba(255, 102, 0, 0.1) 0%, transparent 70%);
        }

        .console-title {
            font-family: 'Black Ops One', cursive;
            font-size: 1.15rem;
            text-align: center;
            margin-bottom: 0.3rem;
            letter-spacing: 2px;
            color: #fff;
            text-shadow: none;
            text-transform: uppercase;
            position: relative;
            z-index: 1;
            transition: color 0.3s ease;
        }

        .console-item:hover .console-title {
            color: var(--yellow);
        }

        .console-subtitle {
            text-align: center;
            font-family: 'Russo One', sans-serif;
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.4);
            margin-bottom: 1.2rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            position: relative;
            z-index: 1;
        }

        .console-item:hover .console-subtitle {
            color: rgba(255, 255, 255, 0.6);
        }

        .console-text {
            display: none;
        }

        .console-info-grid {
            display: none;
        }

        /* Play Button - Modern Rounded */
        .console-launch-btn {
            width: 100%;
            padding: 0.75rem 1rem;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.9), rgba(255, 102, 0, 0.9));
            border: none;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 2px;
            cursor: pointer;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            text-transform: uppercase;
            border-radius: 12px;
            position: relative;
            z-index: 1;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            min-height: 44px;
            box-shadow: 0 4px 15px rgba(255, 0, 64, 0.3);
        }

        .console-launch-btn::before {
            content: none;
        }

        .console-launch-btn::after {
            content: none;
        }

        .console-launch-btn:hover {
            background: linear-gradient(135deg, var(--orange), var(--yellow));
            transform: scale(1.04);
            box-shadow: 0 6px 25px rgba(255, 102, 0, 0.5);
            color: var(--dark);
        }

        .game-count-badge {
            display: inline-block;
            padding: 0.15rem 0.55rem;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 20px;
            font-size: 0.65rem;
            margin-left: 0.4rem;
            color: var(--yellow);
            border: 1px solid rgba(255, 204, 0, 0.2);
        }

        .info-text {
            font-family: 'Russo One', sans-serif;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 0.5rem;
        }

        /* Play Button - Card Override */
        .console-item .console-launch-btn {
            width: 100%;
            padding: 0.75rem 1rem;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.9), rgba(255, 102, 0, 0.9));
            border: none;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            clip-path: none;
            box-shadow: 0 4px 15px rgba(255, 0, 64, 0.3);
            position: relative;
            overflow: hidden;
            border-radius: 12px;
        }

        .console-launch-btn::before {
            content: '▶ ';
            margin-right: 6px;
            font-size: 0.75rem;
        }

        .console-launch-btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s ease;
        }

        .console-launch-btn:hover::after {
            left: 100%;
        }

        .console-launch-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(255, 102, 0, 0.5);
            background: linear-gradient(135deg, var(--orange), var(--yellow));
            color: var(--dark);
        }

        /* Enhanced Features */
        .features-section {
            position: relative;
            padding: 8rem 5%;
            background: linear-gradient(180deg, transparent, rgba(255, 0, 64, 0.08), transparent);
            z-index: 10;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 3rem;
            max-width: 1600px;
            margin: 0 auto;
        }

        .feature-box {
            background: rgba(13, 13, 13, 0.9);
            border: 3px solid var(--orange);
            padding: 3rem;
            text-align: center;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .feature-box::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent 40%, rgba(255, 102, 0, 0.2) 50%, transparent 60%);
            transform: rotate(45deg);
            transition: all 0.6s;
        }

        .feature-box:hover::before {
            top: -100%;
            left: 100%;
        }

        .feature-box::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, transparent 50%, var(--orange) 50%);
            transition: all 0.3s;
        }

        .feature-box:hover {
            transform: translateY(-10px);
            border-color: var(--red);
            box-shadow: 
                0 20px 50px rgba(255, 102, 0, 0.5),
                inset 0 0 30px rgba(255, 0, 64, 0.2);
        }

        .feature-box:hover::after {
            width: 60px;
            height: 60px;
        }

        .feature-icon-wrapper {
            font-size: 5rem;
            margin-bottom: 1.5rem;
            display: inline-block;
            filter: drop-shadow(0 5px 15px rgba(255, 102, 0, 0.6));
            transition: all 0.4s;
        }

        .feature-box:hover .feature-icon-wrapper {
            transform: scale(1.2) rotateY(360deg);
            filter: drop-shadow(0 10px 30px rgba(255, 0, 64, 0.8));
        }

        .feature-heading {
            font-family: 'Black Ops One', cursive;
            font-size: 2rem;
            color: var(--yellow);
            margin-bottom: 1rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-shadow: 0 0 20px var(--yellow);
        }

        .feature-desc {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.7;
            font-size: 1.1rem;
            font-weight: 600;
        }

        /* Enhanced Footer */
        footer {
            position: relative;
            padding: 3rem 5% 1rem;
            background: linear-gradient(180deg, transparent, rgba(13, 13, 13, 0.98));
            border-top: 3px solid var(--red);
            box-shadow: 0 -5px 30px rgba(255, 0, 64, 0.3);
            z-index: 10;
            margin-bottom: 0 !important;
        }

        .footer-grid {
            max-width: 1600px;
            margin: 0 auto 1.5rem;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 2rem;
        }

        .footer-brand h3 {
            font-family: 'Black Ops One', cursive;
            font-size: 3rem;
            color: var(--red);
            margin-bottom: 1rem;
            letter-spacing: 3px;
            text-shadow: 
                2px 2px 0 var(--orange),
                0 0 30px var(--red);
        }

        .footer-brand p {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.8;
            margin-bottom: 2rem;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .social-icons {
            display: flex;
            gap: 1rem;
        }

        .social-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 0, 64, 0.12);
            border: 2px solid rgba(255, 0, 64, 0.35);
            border-radius: 50%;
            font-size: 1.3rem;
            color: white;
            text-decoration: none;
            transition: all 0.3s;
            box-shadow: none;
        }

        .social-icon:hover {
            transform: translateY(-4px);
            background: linear-gradient(135deg, var(--red), var(--orange));
            border-color: var(--orange);
            box-shadow: 0 8px 25px rgba(255, 0, 64, 0.45);
        }

        .footer-col h4 {
            font-family: 'Russo One', sans-serif;
            font-size: 1.5rem;
            color: var(--orange);
            margin-bottom: 1.5rem;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .footer-list {
            list-style: none;
        }

        .footer-list li {
            margin-bottom: 1rem;
        }

        .footer-list a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 600;
            transition: all 0.3s;
            position: relative;
        }

        .footer-list a::before {
            content: '▸';
            position: absolute;
            left: -15px;
            opacity: 0;
            transition: all 0.3s;
            color: var(--red);
        }

        .footer-list a:hover {
            color: var(--red);
            padding-left: 20px;
            text-shadow: 0 0 10px var(--red);
        }

        .footer-list a:hover::before {
            left: 0;
            opacity: 1;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 1rem;
            padding-bottom: 0;
            border-top: 2px solid var(--red);
            color: rgba(255, 255, 255, 0.6);
            font-size: 1rem;
            font-weight: 600;
        }

        .footer-bottom p:last-child {
            margin-bottom: 0;
        }

        /* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--red), var(--orange));
            border: 2px solid rgba(255, 204, 0, 0.5);
            color: white;
            font-size: 1.3rem;
            cursor: pointer;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(255, 0, 64, 0.4);
        }

        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top:hover {
            transform: scale(1.1) translateY(-4px);
            box-shadow: 0 8px 30px rgba(255, 0, 64, 0.6);
            border-color: var(--yellow);
        }

        /* ============================================ */
        /* PREMIUM CINEMATIC GATE v2.0                 */
        /* ============================================ */
        .loading-screen {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #050510;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            overflow: hidden;
        }

        /* Animated perspective grid floor */
        .loading-screen::before {
            content: '';
            position: absolute;
            top: 40%; left: -50%;
            width: 200%; height: 120%;
            background-image:
                linear-gradient(rgba(255, 0, 64, 0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 0, 64, 0.06) 1px, transparent 1px);
            background-size: 50px 50px;
            transform: perspective(400px) rotateX(65deg);
            transform-origin: center top;
            animation: gridScroll 8s linear infinite;
            pointer-events: none;
        }

        @keyframes gridScroll {
            0% { background-position: 0 0; }
            100% { background-position: 0 50px; }
        }

        /* Scanlines overlay */
        .loading-screen::after {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.06),
                rgba(0, 0, 0, 0.06) 1px,
                transparent 1px,
                transparent 3px
            );
            pointer-events: none;
            z-index: 1;
        }

        .loading-screen.hidden {
            pointer-events: none;
            visibility: hidden;
        }

        /* Ambient orbs */
        .loading-orbs {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }

        .loading-orb {
            position: absolute;
            border-radius: 50%;
            animation: orbFloat 10s ease-in-out infinite;
            will-change: opacity;
        }

        .loading-orb-1 {
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(255, 0, 64, 0.12), transparent 70%);
            top: -10%; left: -10%;
        }

        .loading-orb-2 {
            width: 350px; height: 350px;
            background: radial-gradient(circle, rgba(255, 100, 0, 0.10), transparent 70%);
            bottom: -10%; right: -10%;
            animation-delay: 3s;
        }

        .loading-orb-3 {
            width: 280px; height: 280px;
            background: radial-gradient(circle, rgba(160, 0, 255, 0.08), transparent 70%);
            top: 35%; left: 50%;
            animation-delay: 6s;
        }

        @keyframes orbFloat {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.15); }
        }

        /* Floating particles container */
        .loading-particles {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: 2;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            will-change: transform;
        }

        @keyframes particleRise {
            0% { transform: translateY(100vh) scale(0); opacity: 0; }
            15% { opacity: 1; }
            85% { opacity: 0.6; }
            100% { transform: translateY(-20vh) scale(0.8); opacity: 0; }
        }

        /* Site Banners (Maintenance & Announcement) */
        .site-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            padding: 12px 20px;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 600;
            animation: slideDown 0.4s ease-out;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
        .site-banner.hidden {
            display: none !important;
        }
        .site-banner .banner-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .site-banner .banner-icon {
            font-size: 1.2rem;
        }
        .site-banner .banner-text {
            flex: 1;
            text-align: left;
        }
        .site-banner .banner-close {
            background: rgba(255,255,255,0.2);
            border: none;
            color: inherit;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .site-banner .banner-close:hover {
            background: rgba(255,255,255,0.3);
        }
        .maintenance-banner {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #000;
            border-bottom: 2px solid #fbbf24;
            box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
        }
        .announcement-banner {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            color: #fff;
            border-bottom: 2px solid #60a5fa;
            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
        }
        .announcement-banner.style-success {
            background: linear-gradient(135deg, #10b981, #059669);
            border-bottom-color: #34d399;
            box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
        }
        .announcement-banner.style-warning {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            border-bottom-color: #fbbf24;
            box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
            color: #000;
        }
        .announcement-banner.style-promo {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            border-bottom-color: #a78bfa;
            box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
        }
        .announcement-banner.style-update {
            background: linear-gradient(135deg, #06b6d4, #0891b2);
            border-bottom-color: #22d3ee;
            box-shadow: 0 4px 20px rgba(6, 182, 212, 0.4);
        }
        .announcement-banner.style-event {
            background: linear-gradient(135deg, #ec4899, #db2777);
            border-bottom-color: #f472b6;
            box-shadow: 0 4px 20px rgba(236, 72, 153, 0.4);
        }
        .announcement-banner .banner-content {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .announcement-banner .banner-icon {
            font-size: 1.3rem;
            animation: bounce 1s ease infinite;
        }
        .announcement-banner .banner-link {
            color: #ffd700;
            text-decoration: underline;
            font-weight: 600;
            margin-left: 8px;
            transition: opacity 0.2s;
        }
        .announcement-banner .banner-link:hover {
            opacity: 0.8;
        }
        .announcement-banner.style-warning .banner-link {
            color: #1e40af;
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }
        @keyframes slideInPreview {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideDown {
            from { transform: translateY(-100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        /* Push content down when banners are visible */
        body:has(.site-banner:not(.hidden)) .header,
        body:has(.site-banner:not(.hidden)) nav {
            margin-top: 50px;
        }

        /* ===== GATE DOORS ===== */
        .gate-left, .gate-right {
            position: fixed;
            top: 0;
            width: 50%;
            height: 100%;
            z-index: 10001;
            overflow: hidden;
            will-change: transform;
            transition: transform 1.3s cubic-bezier(0.7, 0, 0.3, 1);
        }

        .gate-left {
            left: 0;
            background: linear-gradient(135deg, #08040e 0%, #10061a 50%, #08040e 100%);
            border-right: 3px solid rgba(255, 0, 64, 0.7);
            box-shadow: 6px 0 50px rgba(255, 0, 64, 0.4);
            transform: translateX(0);
        }

        .gate-right {
            right: 0;
            background: linear-gradient(225deg, #08040e 0%, #10061a 50%, #08040e 100%);
            border-left: 3px solid rgba(255, 0, 64, 0.7);
            box-shadow: -6px 0 50px rgba(255, 0, 64, 0.4);
            transform: translateX(0);
        }

        /* Circuit trace pattern overlay */
        .gate-left::before, .gate-right::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255, 0, 64, 0.04) 60px, rgba(255, 0, 64, 0.04) 61px),
                repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255, 0, 64, 0.04) 60px, rgba(255, 0, 64, 0.04) 61px);
            animation: circuitBreathe 5s ease-in-out infinite;
        }

        @keyframes circuitBreathe {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        /* Glowing inner edge */
        .gate-left::after {
            content: '';
            position: absolute;
            right: 0; top: 0;
            width: 80px; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 0, 64, 0.1));
            pointer-events: none;
        }

        .gate-right::after {
            content: '';
            position: absolute;
            left: 0; top: 0;
            width: 80px; height: 100%;
            background: linear-gradient(-90deg, transparent, rgba(255, 0, 64, 0.1));
            pointer-events: none;
        }

        /* Giant emblem letters on gates */
        .gate-emblem {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-family: 'Black Ops One', cursive;
            font-size: 12rem;
            color: transparent;
            -webkit-text-stroke: 2px rgba(255, 0, 64, 0.06);
            user-select: none;
            pointer-events: none;
            opacity: 0.6;
            animation: emblemPulse 4s ease-in-out infinite;
        }

        .gate-left .gate-emblem { right: 10%; }
        .gate-right .gate-emblem { left: 10%; }

        @keyframes emblemPulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.7; -webkit-text-stroke-color: rgba(255, 0, 64, 0.1); }
        }

        /* Animated scan lines */
        .gate-pattern {
            position: absolute;
            inset: 0;
            overflow: hidden;
        }

        .gate-pattern-line {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 64, 0.5) 20%, rgba(255, 100, 0, 0.6) 50%, rgba(255, 0, 64, 0.5) 80%, transparent 100%);
            animation: gateScan 3.5s linear infinite;
            opacity: 0;
            box-shadow: 0 0 10px rgba(255, 0, 64, 0.3);
        }

        @keyframes gateScan {
            0% { top: -2px; opacity: 0; }
            5% { opacity: 0.8; }
            95% { opacity: 0.8; }
            100% { top: 100%; opacity: 0; }
        }

        /* Spark particles at gate edges */
        .gate-sparks {
            position: absolute;
            top: 0;
            height: 100%;
            width: 20px;
            pointer-events: none;
        }

        .gate-left .gate-sparks { right: -4px; }
        .gate-right .gate-sparks { left: -4px; }

        .spark {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #ffaa00;
            border-radius: 50%;
            box-shadow: 0 0 8px #ff6600, 0 0 20px rgba(255, 0, 64, 0.6);
            animation: sparkFloat 2.5s ease-in-out infinite;
        }

        @keyframes sparkFloat {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
            25% { transform: translate(-6px, -15px) scale(1.4); opacity: 0.5; }
            50% { transform: translate(3px, -8px) scale(0.6); opacity: 1; }
            75% { transform: translate(-4px, 5px) scale(1.2); opacity: 0.4; }
        }

        /* Center energy seam between gates */
        .gate-center-burst {
            position: fixed;
            left: 50%;
            top: 0;
            width: 4px;
            height: 100%;
            transform: translateX(-50%);
            background: linear-gradient(180deg,
                transparent 5%,
                rgba(255, 100, 0, 0.3) 25%,
                rgba(255, 255, 255, 0.6) 50%,
                rgba(255, 100, 0, 0.3) 75%,
                transparent 95%
            );
            z-index: 10004;
            opacity: 0;
            box-shadow: 0 0 20px rgba(255, 100, 0, 0.5), 0 0 40px rgba(255, 0, 64, 0.3);
            animation: seamPulse 2.5s ease-in-out infinite;
        }

        @keyframes seamPulse {
            0%, 100% { opacity: 0.2; width: 4px; }
            50% { opacity: 0.6; width: 6px; }
        }

        /* Lightning */
        .gate-lightning {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 10003;
        }

        .lightning-bolt {
            position: absolute;
            width: 3px;
            height: 0;
            background: linear-gradient(180deg,
                transparent 0%,
                rgba(255, 220, 150, 0.5) 20%,
                rgba(255, 255, 255, 0.95) 50%,
                rgba(255, 220, 150, 0.5) 80%,
                transparent 100%
            );
            opacity: 0;
            box-shadow: 0 0 12px #fff, 0 0 25px rgba(255, 180, 80, 0.7);
        }

        .lightning-bolt.active {
            animation: lightningFlash 0.12s ease-out forwards;
        }

        @keyframes lightningFlash {
            0% { height: 0; opacity: 0; }
            25% { height: 100%; opacity: 1; }
            100% { height: 100%; opacity: 0; }
        }

        /* ===== LOADING CONTENT ===== */
        .loading-content {
            position: relative;
            z-index: 10002;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            animation: contentHover 5s ease-in-out infinite;
        }

        @keyframes contentHover {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        /* Triple ring spinner */
        .loading-ring {
            position: relative;
            width: 170px;
            height: 170px;
            margin-bottom: 2.5rem;
        }

        .loading-ring-outer {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 4px solid transparent;
            border-top: 4px solid #ff0040;
            border-right: 4px solid rgba(255, 100, 0, 0.4);
            animation: spinClockwise 2s linear infinite;
            filter: drop-shadow(0 0 12px rgba(255, 0, 64, 0.8));
        }

        .loading-ring-middle {
            position: absolute;
            inset: 20px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-bottom: 3px solid #ff6600;
            border-left: 3px solid rgba(255, 170, 0, 0.4);
            animation: spinClockwise 1.4s linear infinite reverse;
            filter: drop-shadow(0 0 8px rgba(255, 100, 0, 0.6));
        }

        .loading-ring-inner {
            position: absolute;
            inset: 40px;
            border-radius: 50%;
            border: 2px solid transparent;
            border-top: 2px solid #ffaa00;
            border-bottom: 2px solid rgba(255, 200, 0, 0.3);
            animation: spinClockwise 0.9s linear infinite;
            filter: drop-shadow(0 0 6px rgba(255, 170, 0, 0.5));
        }

        @keyframes spinClockwise {
            to { transform: rotate(360deg); }
        }

        .loading-ring-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: iconBreath 2s ease-in-out infinite;
        }

        .loading-ring-center svg {
            width: 50px;
            height: 50px;
            filter: drop-shadow(0 0 18px rgba(255, 100, 0, 0.9));
        }

        @keyframes iconBreath {
            0%, 100% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.12); }
        }

        /* Logo with animated gradient */
        .loading-logo {
            font-family: 'Black Ops One', cursive;
            font-size: 3.2rem;
            letter-spacing: 10px;
            background: linear-gradient(90deg, #ffcc00, #ff6600, #ff0040, #ff6600, #ffcc00);
            background-size: 400% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.3rem;
            position: relative;
            animation: logoWave 4s ease-in-out infinite, logoGlow 2.5s ease-in-out infinite;
            text-align: center;
        }

        /* Chromatic glitch lines */
        .loading-logo::before,
        .loading-logo::after {
            content: 'OLDGAMES';
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            font-family: inherit;
            font-size: inherit;
            letter-spacing: inherit;
            background: inherit;
            background-size: inherit;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            opacity: 0;
        }

        .loading-logo::before {
            animation: glitchTop 3s ease-in-out infinite;
            clip-path: inset(0 0 60% 0);
            color: #ff0040;
        }

        .loading-logo::after {
            animation: glitchBottom 3s ease-in-out infinite;
            clip-path: inset(60% 0 0 0);
            color: #00ffff;
        }

        @keyframes logoWave {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes logoGlow {
            0%, 100% { filter: drop-shadow(0 0 15px rgba(255, 100, 0, 0.5)); }
            50% { filter: drop-shadow(0 0 35px rgba(255, 0, 64, 0.9)) drop-shadow(0 0 60px rgba(255, 100, 0, 0.3)); }
        }

        @keyframes glitchTop {
            0%, 90%, 100% { opacity: 0; transform: translate(0); }
            92% { opacity: 0.8; transform: translate(-3px, -1px); }
            94% { opacity: 0; }
            96% { opacity: 0.6; transform: translate(2px, 1px); }
            98% { opacity: 0; }
        }

        @keyframes glitchBottom {
            0%, 88%, 100% { opacity: 0; transform: translate(0); }
            90% { opacity: 0.7; transform: translate(3px, 1px); }
            93% { opacity: 0; }
            95% { opacity: 0.5; transform: translate(-2px, -1px); }
            97% { opacity: 0; }
        }

        /* Subtitle */
        .loading-subtitle {
            font-family: 'Orbitron', 'Russo One', sans-serif;
            font-size: 0.65rem;
            letter-spacing: 8px;
            color: rgba(255, 255, 255, 0.3);
            text-transform: uppercase;
            margin-bottom: 2rem;
            animation: subtitleFade 3s ease-in-out infinite;
        }

        @keyframes subtitleFade {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.7; letter-spacing: 10px; }
        }

        /* Sleek progress bar */
        .loading-bar-container {
            width: 280px;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .loading-percentage {
            font-family: 'Orbitron', 'Russo One', sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
            color: #ff6600;
            text-align: center;
            margin-bottom: 0.7rem;
            letter-spacing: 5px;
            text-shadow: 0 0 20px rgba(255, 100, 0, 0.8);
        }

        .loading-bar {
            height: 3px;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 3px;
            overflow: visible;
            position: relative;
            box-shadow: 0 0 8px rgba(255, 0, 64, 0.15);
        }

        .loading-progress {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #ff0040, #ff6600, #ffcc00);
            border-radius: 3px;
            transition: width 0.1s ease-out;
            position: relative;
            box-shadow: 0 0 12px rgba(255, 100, 0, 0.6), 0 0 25px rgba(255, 0, 64, 0.3);
        }

        /* Glowing dot at progress tip */
        .loading-progress::after {
            content: '';
            position: absolute;
            right: -5px;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ffcc00;
            box-shadow: 0 0 8px #ffcc00, 0 0 20px rgba(255, 100, 0, 0.8);
            animation: tipPulse 1s ease-in-out infinite;
        }

        @keyframes tipPulse {
            0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.8; }
            50% { transform: translateY(-50%) scale(1.4); opacity: 1; }
        }

        @keyframes progressShine {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* Loading status text */
        .loading-text {
            font-family: 'Orbitron', 'Russo One', sans-serif;
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 6px;
            text-transform: uppercase;
        }

        .loading-text-dots {
            display: inline-block;
            animation: dotsAnimate 1.5s step-end infinite;
        }

        @keyframes dotsAnimate {
            0%, 25% { opacity: 0.3; }
            50% { opacity: 0.6; }
            75%, 100% { opacity: 1; }
        }

        /* ===== GATE OPENING SEQUENCE ===== */
        .loading-screen.gate-open {
            background: transparent !important;
        }

        .loading-screen.gate-open::before,
        .loading-screen.gate-open::after {
            opacity: 0;
            transition: opacity 0.3s;
        }

        .loading-screen.gate-open .gate-left {
            transform: translateX(-105%) !important;
            transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .loading-screen.gate-open .gate-right {
            transform: translateX(105%) !important;
            transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .loading-screen.gate-open .loading-content {
            opacity: 0;
            transform: scale(0.7);
            transition: all 0.25s ease-out;
        }

        .loading-screen.gate-open .loading-particles {
            opacity: 0;
            transition: opacity 0.3s;
        }

        .loading-screen.gate-open .loading-orbs {
            opacity: 0;
            transition: opacity 0.2s;
        }

        .loading-screen.gate-open .gate-lightning {
            opacity: 0;
            transition: opacity 0.3s;
        }

        .loading-screen.gate-open .gate-center-burst {
            animation: burstExpand 0.7s ease-out forwards !important;
        }

        @keyframes burstExpand {
            0% { opacity: 0.8; width: 6px; }
            30% { opacity: 1; width: 30px; box-shadow: 0 0 40px #fff, 0 0 80px rgba(255, 100, 0, 0.6); }
            100% { opacity: 0; width: 150px; }
        }

        /* Game Card Animations */
        @keyframes gameCardFadeIn {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes gameCardGlow {
            0%, 100% {
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            }
            50% {
                box-shadow: 0 8px 32px rgba(255, 0, 64, 0.3), 0 0 20px rgba(255, 100, 0, 0.2);
            }
        }

        .game-card-item {
            animation: gameCardFadeIn 0.5s ease-out backwards;
        }

        .game-card-item:nth-child(1) { animation-delay: 0.05s; }
        .game-card-item:nth-child(2) { animation-delay: 0.1s; }
        .game-card-item:nth-child(3) { animation-delay: 0.15s; }
        .game-card-item:nth-child(4) { animation-delay: 0.2s; }
        .game-card-item:nth-child(5) { animation-delay: 0.25s; }
        .game-card-item:nth-child(6) { animation-delay: 0.3s; }
        .game-card-item:nth-child(7) { animation-delay: 0.35s; }
        .game-card-item:nth-child(8) { animation-delay: 0.4s; }
        .game-card-item:nth-child(9) { animation-delay: 0.45s; }
        .game-card-item:nth-child(10) { animation-delay: 0.5s; }

        @keyframes shimmer {
            0% {
                background-position: -200% center;
            }
            100% {
                background-position: 200% center;
            }
        }

        /* Game Search Modal */
        .search-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(13, 13, 13, 0.95);
            z-index: 9999;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 15vh;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }

        .search-modal.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-search-box {
            width: 90%;
            max-width: 600px;
        }

        .modal-search-input {
            width: 100%;
            padding: 1.5rem 2rem;
            font-size: 1.5rem;
            background: rgba(255, 0, 64, 0.1);
            border: 3px solid var(--red);
            color: white;
            font-family: 'Barlow Condensed', sans-serif;
            transition: all 0.3s;
        }

        .modal-search-input:focus {
            outline: none;
            border-color: var(--orange);
            box-shadow: 0 0 30px rgba(255, 102, 0, 0.5);
        }

        .search-results {
            background: rgba(13, 13, 13, 0.95);
            border: 2px solid var(--red);
            border-top: none;
            max-height: 400px;
            overflow-y: auto;
        }

        .search-result-item {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid rgba(255, 0, 64, 0.3);
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .search-result-item:hover {
            background: rgba(255, 0, 64, 0.2);
        }

        .search-result-item span {
            font-family: 'Russo One', sans-serif;
            font-size: 1.1rem;
        }

        .close-modal {
            position: absolute;
            top: 30px;
            right: 30px;
            font-size: 2rem;
            color: var(--red);
            cursor: pointer;
            transition: all 0.3s;
        }

        .close-modal:hover {
            transform: rotate(90deg);
            color: var(--orange);
        }

        /* Newsletter Section */
        .newsletter-section {
            position: relative;
            padding: 5rem 5%;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.1), rgba(255, 102, 0, 0.08));
            border-top: 2px solid rgba(255, 0, 64, 0.4);
            border-bottom: 2px solid rgba(255, 0, 64, 0.4);
            z-index: 10;
            text-align: center;
            overflow: hidden;
        }

        .newsletter-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(ellipse at 30% 50%, rgba(255, 0, 64, 0.08) 0%, transparent 50%),
                        radial-gradient(ellipse at 70% 50%, rgba(255, 102, 0, 0.06) 0%, transparent 50%);
            pointer-events: none;
        }

        .newsletter-title {
            font-family: 'Black Ops One', cursive;
            font-size: 2.5rem;
            color: var(--yellow);
            margin-bottom: 0.8rem;
            text-shadow: 0 0 20px rgba(255, 204, 0, 0.3);
            position: relative;
        }

        .newsletter-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.15rem;
            margin-bottom: 2rem;
            font-weight: 500;
            position: relative;
        }

        .newsletter-form {
            display: flex;
            justify-content: center;
            gap: 0;
            flex-wrap: wrap;
            max-width: 550px;
            margin: 0 auto;
            position: relative;
        }

        .newsletter-input {
            flex: 1;
            min-width: 280px;
            padding: 1rem 1.5rem;
            background: rgba(0, 0, 0, 0.5);
            border: 2px solid rgba(255, 0, 64, 0.4);
            border-right: none;
            color: white;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 1rem;
            transition: all 0.3s;
            border-radius: 30px 0 0 30px;
            backdrop-filter: blur(8px);
        }

        .newsletter-input:focus {
            outline: none;
            border-color: var(--orange);
            box-shadow: 0 0 15px rgba(255, 102, 0, 0.25);
        }

        .newsletter-btn {
            padding: 1rem 2rem;
            background: linear-gradient(135deg, var(--red), var(--orange));
            border: 2px solid transparent;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            border-radius: 0 30px 30px 0;
        }

        .newsletter-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 0, 64, 0.5);
            background: linear-gradient(135deg, var(--orange), var(--red));
        }

        @media (max-width: 600px) {
            .newsletter-input {
                border-radius: 25px;
                border-right: 2px solid rgba(255, 0, 64, 0.4);
                min-width: 100%;
                margin-bottom: 0.8rem;
            }
            .newsletter-btn {
                border-radius: 25px;
                width: 100%;
            }
        }


        /* ============================================
           🌟 ULTRA MODERN STORE SYSTEM - GLASSMORPHISM
        ============================================ */
        .store-section {
            padding: 5rem 5%;
            background: linear-gradient(180deg, 
                rgba(139, 92, 246, 0.12) 0%, 
                rgba(236, 72, 153, 0.08) 30%,
                rgba(255, 102, 0, 0.06) 60%,
                transparent 100%);
            position: relative;
            overflow: hidden;
        }

        /* Animated background particles */
        .store-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                var(--purple) 20%, 
                var(--pink) 40%, 
                var(--orange) 60%, 
                var(--yellow) 80%,
                transparent 100%);
            animation: storeShimmer 3s ease-in-out infinite;
            background-size: 200% 100%;
        }

        .store-section::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            pointer-events: none;
            animation: storePulse 8s ease-in-out infinite;
        }

        @keyframes storeShimmer {
            0%, 100% { background-position: -200% 0; }
            50% { background-position: 200% 0; }
        }

        @keyframes storePulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
            50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }
        }

        .store-header {
            text-align: center;
            margin-bottom: 3.5rem;
            position: relative;
            z-index: 2;
        }

        .store-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 0.6rem 2rem;
            background: linear-gradient(135deg, var(--purple), var(--pink), var(--orange));
            background-size: 200% 200%;
            animation: badgeGradient 4s ease infinite;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 700;
            margin-bottom: 1.2rem;
            box-shadow: 
                0 5px 30px rgba(139, 92, 246, 0.5),
                0 0 40px rgba(236, 72, 153, 0.3),
                inset 0 1px 0 rgba(255,255,255,0.3);
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        @keyframes badgeGradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .store-title {
            font-family: 'Black Ops One', cursive;
            font-size: clamp(2.5rem, 6vw, 4rem);
            background: linear-gradient(135deg, var(--purple), var(--pink), var(--orange), var(--yellow));
            background-size: 300% 300%;
            animation: titleGradient 6s ease infinite;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.8rem;
            text-shadow: 0 0 60px rgba(139, 92, 246, 0.5);
            filter: drop-shadow(0 2px 10px rgba(139, 92, 246, 0.3));
        }

        @keyframes titleGradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .store-subtitle {
            color: rgba(255,255,255,0.7);
            font-size: 1.2rem;
            max-width: 650px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* Store Categories - Glassmorphism Pills */
        .store-categories {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2.5rem;
            flex-wrap: wrap;
            position: relative;
            z-index: 2;
        }

        .store-category-btn {
            padding: 0.8rem 2rem;
            background: rgba(255,255,255,0.06);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 2px solid rgba(255,255,255,0.15);
            border-radius: 30px;
            color: rgba(255,255,255,0.8);
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .store-category-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        .store-category-btn:hover::before {
            left: 100%;
        }

        .store-category-btn:hover {
            background: rgba(139, 92, 246, 0.25);
            border-color: var(--purple);
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
        }

        .store-category-btn.active {
            background: linear-gradient(135deg, var(--purple), var(--pink));
            border-color: transparent;
            color: #fff;
            box-shadow: 
                0 8px 30px rgba(139, 92, 246, 0.5),
                0 0 0 3px rgba(139, 92, 246, 0.2),
                inset 0 1px 0 rgba(255,255,255,0.2);
            transform: translateY(-2px);
        }

        /* Store Grid */
        .store-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1500px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        /* ========================================
           🎯 ULTRA PREMIUM Store Product Card
           ======================================== */
        .store-product {
            background: linear-gradient(145deg, 
                rgba(30, 30, 45, 0.95) 0%, 
                rgba(20, 20, 35, 0.98) 100%);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 2px solid rgba(139, 92, 246, 0.15);
            border-radius: 28px;
            overflow: visible;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            cursor: pointer;
            position: relative;
            box-shadow: 
                0 10px 40px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.03),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        
        /* Animated gradient border */
        .store-product::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, 
                var(--purple), 
                var(--pink), 
                var(--orange), 
                var(--yellow),
                var(--purple));
            background-size: 400% 400%;
            border-radius: 30px;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.5s;
            animation: borderFlow 6s ease infinite;
        }
        
        @keyframes borderFlow {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        /* Glow effect behind card */
        .store-product::after {
            content: '';
            position: absolute;
            top: 20%;
            left: 10%;
            width: 80%;
            height: 80%;
            background: radial-gradient(ellipse, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
            filter: blur(40px);
            z-index: -2;
            opacity: 0;
            transition: opacity 0.5s;
        }

        .store-product:hover {
            transform: translateY(-15px) scale(1.02);
            border-color: transparent;
            box-shadow: 
                0 30px 80px rgba(139, 92, 246, 0.4),
                0 15px 40px rgba(236, 72, 153, 0.2),
                0 0 100px rgba(139, 92, 246, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .store-product:hover::before {
            opacity: 1;
        }

        .store-product:hover::after {
            opacity: 1;
        }
        
        /* Floating sparkles on hover */
        .store-product .sparkle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
            z-index: 10;
        }
        
        .store-product:hover .sparkle {
            animation: sparkleFloat 2s ease-out infinite;
        }
        
        .sparkle:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
        .sparkle:nth-child(2) { top: 30%; right: 15%; animation-delay: 0.3s; }
        .sparkle:nth-child(3) { bottom: 40%; left: 10%; animation-delay: 0.6s; }
        .sparkle:nth-child(4) { top: 50%; right: 25%; animation-delay: 0.9s; }
        
        @keyframes sparkleFloat {
            0% { opacity: 0; transform: translateY(0) scale(0); }
            20% { opacity: 1; transform: translateY(-5px) scale(1); }
            100% { opacity: 0; transform: translateY(-30px) scale(0); }
        }

        .store-product.featured {
            border-color: rgba(255, 102, 0, 0.4);
            box-shadow: 
                0 15px 50px rgba(255, 102, 0, 0.3),
                0 0 100px rgba(255, 102, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
        
        .store-product.featured::before {
            background: linear-gradient(45deg, var(--orange), var(--yellow), var(--red), var(--orange));
            opacity: 0.6;
            animation: borderFlow 4s ease infinite;
        }
        
        .store-product.featured::after {
            background: radial-gradient(ellipse, rgba(255, 102, 0, 0.4) 0%, transparent 70%);
            opacity: 0.5;
        }
        
        /* Featured ribbon */
        .featured-ribbon {
            position: absolute;
            top: 20px;
            right: -40px;
            background: linear-gradient(135deg, var(--orange), var(--yellow));
            color: #000;
            padding: 8px 50px;
            font-size: 0.7rem;
            font-weight: 800;
            transform: rotate(45deg);
            z-index: 20;
            box-shadow: 0 4px 20px rgba(255, 102, 0, 0.6);
            text-transform: uppercase;
            letter-spacing: 1px;
            animation: ribbonPulse 2s ease-in-out infinite;
        }
        
        @keyframes ribbonPulse {
            0%, 100% { box-shadow: 0 4px 20px rgba(255, 102, 0, 0.6); }
            50% { box-shadow: 0 4px 35px rgba(255, 102, 0, 0.9); }
        }

        /* Product Image Container - Premium */
        .product-image-container {
            position: relative;
            width: 100%;
            aspect-ratio: 16/10;
            background: linear-gradient(135deg, 
                rgba(139, 92, 246, 0.3) 0%, 
                rgba(236, 72, 153, 0.25) 50%,
                rgba(255, 102, 0, 0.2) 100%);
            overflow: hidden;
            border-radius: 26px 26px 0 0;
        }
        
        /* Animated background for image container */
        .product-image-container::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, 
                transparent 30%, 
                rgba(255, 255, 255, 0.05) 50%, 
                transparent 70%);
            background-size: 200% 200%;
            animation: imageShine 4s ease-in-out infinite;
            z-index: 3;
            pointer-events: none;
        }
        
        @keyframes imageShine {
            0%, 100% { background-position: -100% -100%; }
            50% { background-position: 200% 200%; }
        }

        .product-image-container::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: linear-gradient(to top, rgba(20, 20, 35, 1) 0%, transparent 100%);
            z-index: 2;
            pointer-events: none;
        }

        .product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
            filter: brightness(0.95) saturate(1.1);
        }

        .store-product:hover .product-image {
            transform: scale(1.12) rotate(1deg);
            filter: brightness(1.15) saturate(1.3);
        }

        /* Ultra Modern Product Badges */
        .product-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            padding: 8px 18px;
            border-radius: 30px;
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            z-index: 5;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .product-badge.new {
            background: linear-gradient(135deg, #10B981, #34D399);
            color: #fff;
            box-shadow: 
                0 6px 25px rgba(16, 185, 129, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
            animation: badgeFloat 3s ease-in-out infinite, newGlow 2s ease-in-out infinite;
        }
        
        @keyframes newGlow {
            0%, 100% { box-shadow: 0 6px 25px rgba(16, 185, 129, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
            50% { box-shadow: 0 6px 40px rgba(16, 185, 129, 0.9), 0 0 20px rgba(16, 185, 129, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
        }

        .product-badge.sale {
            background: linear-gradient(135deg, #EF4444, #F87171);
            color: #fff;
            box-shadow: 
                0 6px 25px rgba(239, 68, 68, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
            animation: salePulse 1s ease-in-out infinite, saleShake 3s ease-in-out infinite;
        }

        @keyframes salePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.08); }
        }
        
        @keyframes saleShake {
            0%, 90%, 100% { transform: rotate(0); }
            92% { transform: rotate(-3deg); }
            94% { transform: rotate(3deg); }
            96% { transform: rotate(-3deg); }
            98% { transform: rotate(3deg); }
        }

        .product-badge.animated {
            background: linear-gradient(135deg, var(--purple), var(--pink), var(--orange));
            background-size: 300% 300%;
            animation: badgeRainbow 3s ease-in-out infinite, badgeFloat 2s ease-in-out infinite;
            color: #fff;
            box-shadow: 
                0 6px 30px rgba(139, 92, 246, 0.7),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }
        
        @keyframes badgeRainbow {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        @keyframes badgeFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }
        
        /* Price tag on image */
        .product-price-tag {
            position: absolute;
            bottom: 15px;
            right: 15px;
            padding: 10px 18px;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            border: 1px solid rgba(255, 102, 0, 0.3);
            z-index: 5;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .product-price-tag .price-value {
            font-family: 'Black Ops One', cursive;
            font-size: 1.2rem;
            background: linear-gradient(135deg, var(--orange), var(--yellow));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .product-price-tag .price-icon {
            font-size: 1rem;
            animation: coinBounce 2s ease-in-out infinite;
        }
        
        @keyframes coinBounce {
            0%, 100% { transform: translateY(0) rotate(0); }
            25% { transform: translateY(-3px) rotate(-10deg); }
            75% { transform: translateY(-3px) rotate(10deg); }
        }

        /* Product Info - Premium Glassmorphism */
        .product-info {
            padding: 1.5rem;
            position: relative;
            z-index: 2;
            background: transparent;
        }
        
        /* Category with animated dot */
        .product-category {
            font-size: 0.7rem;
            color: var(--purple);
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 2px;
            margin-bottom: 0.8rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .product-category::before {
            content: '';
            width: 8px;
            height: 8px;
            background: linear-gradient(135deg, var(--purple), var(--pink));
            border-radius: 50%;
            animation: categoryPulse 2s ease-in-out infinite;
            box-shadow: 0 0 10px var(--purple);
        }

        @keyframes categoryPulse {
            0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px var(--purple); }
            50% { opacity: 0.6; transform: scale(0.7); box-shadow: 0 0 20px var(--purple); }
        }

        .product-name {
            font-family: 'Russo One', sans-serif;
            font-size: 1.2rem;
            color: #fff;
            margin-bottom: 0.7rem;
            line-height: 1.35;
            transition: all 0.4s;
            position: relative;
        }
        
        .product-name::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--purple), var(--pink));
            transition: width 0.4s;
        }

        .store-product:hover .product-name {
            color: var(--purple);
            text-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
        }
        
        .store-product:hover .product-name::after {
            width: 60%;
        }

        .product-description {
            font-size: 0.9rem;
            color: rgba(255,255,255,0.55);
            margin-bottom: 1.3rem;
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-price-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 1.2rem;
            border-top: 1px solid rgba(139, 92, 246, 0.15);
        }

        .product-price {
            font-family: 'Black Ops One', cursive;
            font-size: 1.5rem;
            background: linear-gradient(135deg, var(--orange), var(--yellow), var(--orange));
            background-size: 200% 200%;
            animation: priceGlow 3s ease-in-out infinite;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: flex;
            align-items: center;
            gap: 8px;
            filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.5));
        }
        
        @keyframes priceGlow {
            0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.5)); }
            50% { background-position: 100% 50%; filter: drop-shadow(0 0 20px rgba(255, 102, 0, 0.8)); }
        }

        .product-price .coin-icon {
            font-size: 1.3rem;
            filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
            animation: coinSpin3D 3s ease-in-out infinite;
        }

        @keyframes coinSpin3D {
            0%, 100% { transform: rotateY(0deg) scale(1); }
            25% { transform: rotateY(90deg) scale(1.1); }
            50% { transform: rotateY(180deg) scale(1); }
            75% { transform: rotateY(270deg) scale(1.1); }
        }

        .product-price-old {
            font-size: 0.9rem;
            color: rgba(255,255,255,0.4);
            text-decoration: line-through;
            margin-left: 10px;
            -webkit-text-fill-color: rgba(255,255,255,0.4);
            position: relative;
        }
        
        .product-price-old::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 2px;
            background: #EF4444;
            transform: rotate(-5deg);
        }

        /* Ultra Modern Buy Button */
        .product-buy-btn {
            padding: 12px 28px;
            background: linear-gradient(135deg, var(--purple), var(--pink));
            background-size: 200% 200%;
            border: none;
            border-radius: 30px;
            color: #fff;
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            box-shadow: 
                0 8px 25px rgba(139, 92, 246, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        
        /* Shine effect on button */
        .product-buy-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.4), 
                transparent);
            transition: left 0.6s;
        }

        .product-buy-btn:hover::before {
            left: 100%;
        }
        
        /* Ripple effect */
        .product-buy-btn::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 33px;
            border: 2px solid rgba(139, 92, 246, 0.5);
            opacity: 0;
            transition: all 0.4s;
        }

        .product-buy-btn:hover {
            transform: translateY(-4px) scale(1.05);
            background-position: 100% 0;
            box-shadow: 
                0 15px 40px rgba(139, 92, 246, 0.6),
                0 0 60px rgba(139, 92, 246, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        
        .product-buy-btn:hover::after {
            opacity: 1;
            animation: btnRipple 1s ease-out infinite;
        }
        
        @keyframes btnRipple {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(1.15); opacity: 0; }
        }

        .product-buy-btn:active {
            transform: translateY(-2px) scale(1.02);
        }

        .product-buy-btn.purchased {
            background: linear-gradient(135deg, #10B981, #34D399);
            pointer-events: none;
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
        }

        .product-buy-btn.purchased::after {
            content: '✓';
            margin-left: 8px;
            animation: checkBounce 0.5s ease-out;
        }
        
        @keyframes checkBounce {
            0% { transform: scale(0); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        
        /* Quick action buttons on hover */
        .product-quick-actions {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            gap: 15px;
            z-index: 10;
            opacity: 0;
            transition: all 0.4s;
        }
        
        .store-product:hover .product-quick-actions {
            opacity: 1;
        }
        
        .quick-action-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        }
        
        .quick-action-btn:hover {
            background: var(--purple);
            transform: scale(1.15);
            box-shadow: 0 6px 30px rgba(139, 92, 246, 0.6);
        }
        
        .quick-action-btn.view-btn:hover { background: var(--purple); }
        .quick-action-btn.cart-btn:hover { background: var(--orange); }
        .quick-action-btn.fav-btn:hover { background: var(--pink); }
        
        /* ========== STORE RESPONSIVE STYLES ========== */
        @media (max-width: 1200px) {
            .store-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 900px) {
            .store-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
            
            .store-product {
                border-radius: 22px;
            }
            
            .product-image-container {
                border-radius: 20px 20px 0 0;
            }
            
            .featured-ribbon {
                font-size: 0.6rem;
                padding: 6px 40px;
                right: -45px;
            }
        }
        
        @media (max-width: 600px) {
            .store-section {
                padding: 3rem 4%;
            }
            
            .store-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .store-categories {
                gap: 0.6rem;
            }
            
            .store-category-btn {
                padding: 0.6rem 1.2rem;
                font-size: 0.8rem;
            }
            
            .product-info {
                padding: 1.2rem;
            }
            
            .product-name {
                font-size: 1.05rem;
            }
            
            .product-price {
                font-size: 1.3rem;
            }
            
            .product-buy-btn {
                padding: 10px 20px;
                font-size: 0.75rem;
            }
            
            .product-quick-actions {
                gap: 10px;
            }
            
            .quick-action-btn {
                width: 42px;
                height: 42px;
                font-size: 1rem;
            }
            
            .sparkle {
                display: none;
            }
        }

        /* Product Info - OLD STYLES (kept for backwards compatibility) */
        .product-info-old {
            padding: 1.5rem;
            position: relative;
            z-index: 2;
            background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
        }

        .product-category-old::before {
            content: '';
            width: 6px;
            height: 6px;
            background: var(--purple);
            border-radius: 50%;
            animation: categoryDot 2s ease-in-out infinite;
        }

        @keyframes categoryDot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.8); }
        }

        .product-name {
            font-family: 'Russo One', sans-serif;
            font-size: 1.15rem;
            color: #fff;
            margin-bottom: 0.6rem;
            line-height: 1.3;
            transition: color 0.3s;
        }

        .store-product:hover .product-name {
            color: var(--purple);
        }

        .product-description {
            font-size: 0.9rem;
            color: rgba(255,255,255,0.6);
            margin-bottom: 1.2rem;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-price-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 1rem;
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        .product-price {
            font-family: 'Russo One', sans-serif;
            font-size: 1.4rem;
            background: linear-gradient(135deg, var(--orange), var(--yellow));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .product-price .coin-icon {
            font-size: 1.2rem;
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
            animation: coinSpin 3s linear infinite;
        }

        @keyframes coinSpin {
            0%, 100% { transform: rotateY(0deg); }
            50% { transform: rotateY(180deg); }
        }

        .product-price-old {
            font-size: 0.9rem;
            color: rgba(255,255,255,0.4);
            text-decoration: line-through;
            margin-left: 8px;
            -webkit-text-fill-color: rgba(255,255,255,0.4);
        }

        /* Ultra Modern Buy Button */
        .product-buy-btn {
            padding: 10px 24px;
            background: linear-gradient(135deg, var(--purple), var(--pink));
            border: none;
            border-radius: 25px;
            color: #fff;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .product-buy-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }

        .product-buy-btn:hover::before {
            left: 100%;
        }

        .product-buy-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 
                0 10px 30px rgba(139, 92, 246, 0.5),
                0 0 0 3px rgba(139, 92, 246, 0.2);
        }

        .product-buy-btn:active {
            transform: translateY(-1px) scale(1.02);
        }

        .product-buy-btn.purchased {
            background: linear-gradient(135deg, #10B981, #059669);
            pointer-events: none;
        }

        .product-buy-btn.purchased::after {
            content: '✓';
            margin-left: 6px;
        }

        /* Product Modal */
        .product-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
            z-index: 10001;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .product-modal-overlay.active {
            display: flex;
        }

        .product-modal {
            background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
            border: 2px solid rgba(139, 92, 246, 0.3);
            border-radius: 25px;
            max-width: 900px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
        }

        .product-modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.1);
            border: none;
            border-radius: 50%;
            color: #fff;
            font-size: 1.2rem;
            cursor: pointer;
            z-index: 2;
            transition: all 0.3s ease;
        }

        .product-modal-close:hover {
            background: #EF4444;
            transform: rotate(90deg);
        }

        .product-modal-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }

        @media (max-width: 768px) {
            .product-modal-content {
                grid-template-columns: 1fr;
            }
        }

        .product-modal-image {
            position: relative;
            border-radius: 25px 0 0 25px;
            overflow: hidden;
        }

        @media (max-width: 768px) {
            .product-modal-image {
                border-radius: 25px 25px 0 0;
                max-height: 300px;
            }
        }

        .product-modal-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-modal-details {
            padding: 2rem;
            display: flex;
            flex-direction: column;
        }

        .product-modal-category {
            color: var(--purple);
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 0.5rem;
        }

        .product-modal-title {
            font-family: 'Black Ops One', cursive;
            font-size: 1.8rem;
            color: #fff;
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .product-modal-description {
            color: rgba(255,255,255,0.7);
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 1.5rem;
            flex-grow: 1;
        }

        .product-modal-features {
            margin-bottom: 1.5rem;
        }

        .product-modal-features h4 {
            color: var(--orange);
            font-size: 0.9rem;
            margin-bottom: 0.8rem;
        }

        .product-modal-features ul {
            list-style: none;
            padding: 0;
        }

        .product-modal-features li {
            color: rgba(255,255,255,0.6);
            font-size: 0.9rem;
            padding: 5px 0;
            padding-left: 20px;
            position: relative;
        }

        .product-modal-features li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #10B981;
        }

        .product-modal-price-section {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 1.5rem;
        }

        .product-modal-price {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .product-modal-price-current {
            font-family: 'Black Ops One', cursive;
            font-size: 2.5rem;
            background: linear-gradient(135deg, var(--orange), var(--yellow));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .product-modal-price-old {
            font-size: 1.2rem;
            color: rgba(255,255,255,0.4);
            text-decoration: line-through;
        }

        .product-modal-buy-btn {
            width: 100%;
            padding: 15px 30px;
            background: linear-gradient(135deg, var(--purple), var(--pink));
            border: none;
            border-radius: 15px;
            color: #fff;
            font-family: 'Russo One', sans-serif;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .product-modal-buy-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.5);
        }

        /* Admin Store Panel */
        .admin-store-btn {
            position: fixed;
            bottom: 100px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--purple), var(--pink));
            border: none;
            border-radius: 50%;
            color: #fff;
            font-size: 1.3rem;
            cursor: pointer;
            z-index: 9998;
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 25px rgba(139, 92, 246, 0.5);
            transition: all 0.3s ease;
        }

        .admin-store-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 35px rgba(139, 92, 246, 0.7);
        }

        .admin-store-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
            z-index: 10002;
            display: none;
            overflow-y: auto;
            padding: 20px;
        }

        .admin-store-modal.active {
            display: block;
        }

        .admin-store-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .admin-store-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid rgba(139, 92, 246, 0.3);
        }

        .admin-store-title {
            font-family: 'Black Ops One', cursive;
            font-size: 2rem;
            background: linear-gradient(135deg, var(--purple), var(--pink));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .admin-store-close {
            width: 45px;
            height: 45px;
            background: rgba(255,255,255,0.1);
            border: none;
            border-radius: 50%;
            color: #fff;
            font-size: 1.3rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .admin-store-close:hover {
            background: #EF4444;
        }

        .admin-store-actions {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .admin-add-product-btn {
            padding: 12px 25px;
            background: linear-gradient(135deg, #10B981, #059669);
            border: none;
            border-radius: 12px;
            color: #fff;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .admin-add-product-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(16, 185, 129, 0.4);
        }

        .admin-products-list {
            display: grid;
            gap: 1rem;
        }

        .admin-product-item {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 15px;
            padding: 1rem;
            display: grid;
            grid-template-columns: 80px 1fr auto;
            gap: 1rem;
            align-items: center;
        }

        .admin-product-thumb {
            width: 80px;
            height: 60px;
            border-radius: 10px;
            object-fit: cover;
            background: rgba(139, 92, 246, 0.2);
        }

        .admin-product-info h4 {
            color: #fff;
            font-size: 1rem;
            margin-bottom: 0.3rem;
        }

        .admin-product-info p {
            color: rgba(255,255,255,0.5);
            font-size: 0.85rem;
        }

        .admin-product-actions {
            display: flex;
            gap: 0.5rem;
        }

        .admin-product-edit,
        .admin-product-delete {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .admin-product-edit {
            background: rgba(139, 92, 246, 0.2);
            color: var(--purple);
        }

        .admin-product-edit:hover {
            background: var(--purple);
            color: #fff;
        }

        .admin-product-delete {
            background: rgba(239, 68, 68, 0.2);
            color: #EF4444;
        }

        .admin-product-delete:hover {
            background: #EF4444;
            color: #fff;
        }

        /* Product Form Modal */
        .product-form-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 10003;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .product-form-modal.active {
            display: flex;
        }

        .product-form-container {
            background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
            border: 2px solid rgba(139, 92, 246, 0.3);
            border-radius: 25px;
            max-width: 600px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            padding: 2rem;
        }

        .product-form-title {
            font-family: 'Russo One', sans-serif;
            font-size: 1.5rem;
            color: #fff;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .product-form-group {
            margin-bottom: 1.2rem;
        }

        .product-form-label {
            display: block;
            color: rgba(255,255,255,0.8);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        .product-form-input,
        .product-form-textarea,
        .product-form-select {
            width: 100%;
            padding: 12px 15px;
            background: rgba(255,255,255,0.05);
            border: 2px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            color: #fff;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .product-form-input:focus,
        .product-form-textarea:focus,
        .product-form-select:focus {
            outline: none;
            border-color: var(--purple);
            background: rgba(139, 92, 246, 0.1);
        }

        .product-form-textarea {
            min-height: 100px;
            resize: vertical;
        }

        .product-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .product-form-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }

        .product-form-checkbox input {
            width: 20px;
            height: 20px;
            accent-color: var(--purple);
        }

        .product-form-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .product-form-cancel,
        .product-form-save {
            flex: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .product-form-cancel {
            background: rgba(255,255,255,0.1);
            color: #fff;
        }

        .product-form-cancel:hover {
            background: rgba(255,255,255,0.2);
        }

        .product-form-save {
            background: linear-gradient(135deg, var(--purple), var(--pink));
            color: #fff;
        }

        .product-form-save:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(139, 92, 246, 0.5);
        }

        .store-empty {
            text-align: center;
            padding: 4rem 2rem;
            color: rgba(255,255,255,0.5);
        }

        .store-empty-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        /* Achievements/Badges Section */
        .achievements-bar {
            position: relative;
            padding: 3rem 5%;
            background: rgba(0, 0, 0, 0.5);
            border-top: 2px solid var(--orange);
            border-bottom: 2px solid var(--orange);
            z-index: 10;
        }

        .achievements-title {
            text-align: center;
            font-family: 'Russo One', sans-serif;
            color: var(--orange);
            margin-bottom: 2rem;
            letter-spacing: 3px;
        }

        .achievements-track {
            display: flex;
            justify-content: center;
            gap: 3rem;
            flex-wrap: wrap;
        }

        .achievement-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s;
            cursor: pointer;
        }

        .achievement-badge:hover {
            transform: scale(1.2);
        }

        .badge-icon {
            font-size: 3rem;
            filter: drop-shadow(0 0 10px var(--orange));
        }

        .badge-name {
            font-family: 'Russo One', sans-serif;
            font-size: 0.8rem;
            color: var(--yellow);
            text-transform: uppercase;
        }

        /* Tooltip */
        [data-tooltip] {
            position: relative;
        }

        [data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            padding: 0.5rem 1rem;
            background: var(--dark);
            border: 2px solid var(--red);
            color: white;
            font-size: 0.9rem;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            z-index: 100;
        }

        [data-tooltip]:hover::after {
            opacity: 1;
            visibility: visible;
            bottom: calc(100% + 10px);
        }

        /* Profile Avatar in Nav */
        .profile-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 3px solid var(--red);
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--red), var(--orange));
            margin-left: 1rem;
        }

        .profile-avatar:hover {
            transform: scale(1.1);
            border-color: var(--yellow);
            box-shadow: 0 0 20px rgba(255, 204, 0, 0.5);
        }

        .profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }

        .profile-avatar img.active {
            display: block;
        }

        .profile-avatar span {
            font-size: 1.5rem;
        }

        .profile-avatar img.active + span {
            display: none;
        }

        /* Profile Modal */
        .profile-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(13, 13, 13, 0.95);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            padding: 2rem;
        }

        .profile-modal.active {
            opacity: 1;
            visibility: visible;
        }

        /* ==================== DISCORD-STYLE PROFILE CARD SYSTEM ==================== */
        
        /* Profile Card Container */
        .profile-card-wrapper {
            position: relative;
            background: #1a1f2e;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            min-height: 400px;
            margin-bottom: 20px;
        }

        .profile-card-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
            z-index: 2;
        }

        /* Profile Banner - Canvas Animation Area */
        .profile-banner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
        }

        .banner-animation-canvas {
            width: 100%;
            height: 100%;
        }

        /* Profile Content Overlay */
        .profile-card-content {
            position: relative;
            padding: 60px 40px 40px;
            z-index: 3;
            background: linear-gradient(180deg, 
                rgba(10, 14, 26, 0) 0%, 
                rgba(10, 14, 26, 0.6) 25%,
                rgba(15, 20, 35, 0.85) 50%, 
                rgba(20, 25, 40, 0.95) 100%);
            opacity: 0;
            animation: profileFadeIn 0.8s ease-out forwards;
            animation-delay: 0.3s;
        }

        @keyframes profileFadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Profile Header Layout */
        .profile-card-header {
            display: flex;
            gap: 30px;
            align-items: flex-start;
            margin-bottom: 30px;
        }

        .profile-card-left {
            flex-shrink: 0;
        }

        .profile-card-right {
            flex: 1;
            padding-top: 20px;
        }

        /* Profile Avatar with Animated Border */
        .profile-avatar-container {
            position: relative;
            width: 140px;
            height: 140px;
            margin-bottom: 15px;
        }

        .profile-avatar-wrapper {
            position: relative;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            border: 8px solid #0a0e1a;
            overflow: hidden;
            background: #2a3142;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8);
        }

        .profile-avatar-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-border-canvas {
            position: absolute;
            top: -8px;
            left: -8px;
            width: 156px;
            height: 156px;
            border-radius: 50%;
            z-index: -1;
        }

        .avatar-status {
            position: absolute;
            bottom: 8px;
            right: 8px;
            width: 32px;
            height: 32px;
            background: #43b581;
            border: 4px solid #0a0e1a;
            border-radius: 50%;
            z-index: 10;
        }

        /* Profile Name and Badges */
        .profile-name-section {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .profile-display-name {
            font-size: 32px;
            font-weight: 700;
            color: white;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'Russo One', sans-serif;
        }

        .verified-badge {
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
            animation: verifiedPulse 3s ease-in-out infinite;
        }

        @keyframes verifiedPulse {
            0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
            50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.4); }
        }

        .admin-badge {
            background: linear-gradient(135deg, #ffd700, #ffed4e);
            color: #000;
            padding: 6px 14px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 5px;
            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.5);
            animation: adminGlow 2s ease-in-out infinite;
        }

        @keyframes adminGlow {
            0%, 100% { box-shadow: 0 4px 12px rgba(255, 215, 0, 0.5); }
            50% { box-shadow: 0 4px 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.4); }
        }

        /* Profile Badges Grid */
        .profile-badges-grid {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .badge-item {
            width: 48px;
            height: 48px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            position: relative;
        }

        .badge-item:hover {
            transform: translateY(-4px);
            border-color: rgba(102, 126, 234, 0.5);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        }

        .badge-item.legendary { background: linear-gradient(135deg, #f39c12, #e74c3c); border-color: #f39c12; }
        .badge-item.epic { background: linear-gradient(135deg, #9b59b6, #8e44ad); border-color: #9b59b6; }
        .badge-item.rare { background: linear-gradient(135deg, #3498db, #2980b9); border-color: #3498db; }

        /* Tooltip for badges */
        .badge-item::after {
            content: attr(title);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-8px);
            background: rgba(0, 0, 0, 0.9);
            color: #fff;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .badge-item:hover::after { opacity: 1; }

        /* Profile Email */
        .profile-email-text {
            color: #b9bbbe;
            font-size: 15px;
            margin-bottom: 8px;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
        }

        /* Online Status */
        .online-status {
            color: #43b581;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .online-dot {
            width: 10px;
            height: 10px;
            background: #43b581;
            border-radius: 50%;
            animation: onlinePulse 2s infinite;
            box-shadow: 0 0 10px #43b581;
        }

        @keyframes onlinePulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.2); }
        }

        /* Profile Stats */
        .profile-stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 25px;
        }

        .profile-stat-item {
            background: rgba(255, 255, 255, 0.05);
            padding: 15px;
            border-radius: 12px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .profile-stat-item:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(102, 126, 234, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
        }

        .profile-stat-value {
            font-size: 24px;
            font-weight: 700;
            color: #667eea;
            display: block;
            margin-bottom: 5px;
            text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
            font-family: 'Russo One', sans-serif;
        }

        .profile-stat-label {
            font-size: 12px;
            color: #b9bbbe;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Player Level Section */
        .profile-level-section {
            background: rgba(255, 255, 255, 0.05);
            padding: 15px;
            border-radius: 12px;
            margin-bottom: 15px;
            border: 1px solid rgba(255, 215, 0, 0.2);
        }

        .level-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .level-badge {
            font-family: 'Black Ops One', cursive;
            font-size: 16px;
            color: #ffd700;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }

        .level-rank {
            background: linear-gradient(135deg, #00d4ff, #7b68ee);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            color: #fff;
        }

        .xp-bar-container {
            background: rgba(0, 0, 0, 0.4);
            border-radius: 10px;
            height: 10px;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .xp-bar {
            height: 100%;
            background: linear-gradient(90deg, #ffd700, #ff6b6b);
            border-radius: 10px;
            transition: width 0.5s ease;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }

        .xp-text {
            font-size: 12px;
            color: #b9bbbe;
            text-align: center;
        }

        /* Recent Games */
        .profile-recent-games {
            background: rgba(255, 255, 255, 0.03);
            padding: 15px;
            border-radius: 12px;
            margin-bottom: 15px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .recent-games-title {
            font-size: 13px;
            font-weight: 700;
            color: #b9bbbe;
            margin-bottom: 12px;
            text-transform: uppercase;
        }

        .recent-games-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .recent-game-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
            transition: all 0.2s ease;
        }

        .recent-game-item:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: translateX(5px);
        }

        .recent-game-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--red), var(--orange));
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .recent-game-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .recent-game-name {
            font-weight: 600;
            color: #fff;
            font-size: 14px;
        }

        .recent-game-time {
            font-size: 12px;
            color: #72767d;
        }

        /* Favorite Consoles */
        .profile-favorite-consoles {
            background: rgba(255, 255, 255, 0.03);
            padding: 15px;
            border-radius: 12px;
            margin-bottom: 15px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .favorite-consoles-title {
            font-size: 13px;
            font-weight: 700;
            color: #b9bbbe;
            margin-bottom: 12px;
            text-transform: uppercase;
        }

        .favorite-consoles-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .favorite-console-badge {
            padding: 8px 14px;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.2), rgba(255, 102, 0, 0.2));
            border: 1px solid rgba(255, 0, 64, 0.3);
            border-radius: 20px;
            font-size: 13px;
            color: #fff;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .favorite-console-badge:hover {
            transform: scale(1.05);
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.4), rgba(255, 102, 0, 0.4));
        }

        /* Trophy Showcase */
        .profile-trophies {
            background: rgba(255, 255, 255, 0.03);
            padding: 15px;
            border-radius: 12px;
            margin-bottom: 15px;
            border: 1px solid rgba(255, 215, 0, 0.15);
        }

        .trophies-title {
            font-size: 13px;
            font-weight: 700;
            color: #ffd700;
            margin-bottom: 12px;
            text-transform: uppercase;
        }

        .trophies-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .trophy-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-radius: 8px;
            transition: all 0.2s ease;
        }

        .trophy-item:hover {
            transform: scale(1.03);
        }

        .trophy-item.gold {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .trophy-item.silver {
            background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(169, 169, 169, 0.1));
            border: 1px solid rgba(192, 192, 192, 0.3);
        }

        .trophy-item.bronze {
            background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(139, 90, 43, 0.1));
            border: 1px solid rgba(205, 127, 50, 0.3);
        }

        .trophy-item.rare {
            background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(75, 0, 130, 0.1));
            border: 1px solid rgba(138, 43, 226, 0.3);
        }

        .trophy-icon {
            font-size: 24px;
        }

        .trophy-name {
            font-size: 12px;
            color: #dcddde;
            font-weight: 600;
        }

        /* Profile About Section */
        .profile-about-section {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }

        .profile-about-title {
            font-size: 14px;
            font-weight: 700;
            color: #b9bbbe;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .profile-about-text {
            color: #dcddde;
            line-height: 1.6;
            font-size: 14px;
        }

        /* Profile Action Buttons */
        .profile-card-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .profile-card-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'Russo One', sans-serif;
        }

        .profile-card-btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
        }

        .profile-card-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }

        .profile-card-btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .profile-card-btn-secondary:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .profile-card-btn-gold {
            background: linear-gradient(135deg, #ffd700, #ffed4e);
            color: #000;
            font-weight: 700;
        }

        .profile-card-btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
        }

        /* Member Since */
        .member-since-text {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #b9bbbe;
            font-size: 13px;
            margin-top: 15px;
        }

        /* ==================== ANIMATION SHOP SYSTEM ==================== */

        .animation-shop-section {
            margin-top: 30px;
        }

        .shop-section-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            background-size: 200% 200%;
            animation: gradientShift 3s ease infinite;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            font-family: 'Black Ops One', cursive;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .shop-section-subtitle {
            color: #b9bbbe;
            margin-bottom: 30px;
            text-align: center;
            font-size: 16px;
        }

        /* Animation Cards Grid */
        .animation-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        /* Animation Card */
        .animation-card {
            background: #1a1f2e;
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
        }

        .animation-card:hover {
            transform: translateY(-5px);
            border-color: #667eea;
            box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);
        }

        .animation-card.active-animation {
            border-color: #ffd700;
            box-shadow: 0 12px 40px rgba(255, 215, 0, 0.4);
        }

        .animation-card.active-animation::before {
            content: '✓ ACTIVE';
            position: absolute;
            top: 10px;
            left: 10px;
            background: linear-gradient(135deg, #ffd700, #ffed4e);
            color: #000;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            z-index: 15;
            animation: activePulse 2s infinite;
        }

        @keyframes activePulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.05); }
        }

        /* Animation Preview Canvas */
        .animation-preview-area {
            position: relative;
            height: 180px;
            overflow: hidden;
        }

        .animation-preview-canvas {
            width: 100%;
            height: 100%;
        }

        /* Rarity Badge */
        .rarity-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 5px 12px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            z-index: 10;
        }

        .rarity-common { background: #95a5a6; }
        .rarity-rare { background: #3498db; }
        .rarity-epic { background: #9b59b6; }
        .rarity-legendary { background: linear-gradient(135deg, #f39c12, #e74c3c); }
        .rarity-mythic { background: linear-gradient(135deg, #00f2fe, #4facfe); }

        /* Animation Info */
        .animation-info {
            padding: 20px;
        }

        .animation-name {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 8px;
            font-family: 'Russo One', sans-serif;
            color: white;
        }

        .animation-description {
            color: #b9bbbe;
            font-size: 13px;
            margin-bottom: 15px;
            line-height: 1.4;
        }

        .animation-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .animation-price {
            font-size: 20px;
            font-weight: 700;
            color: #43b581;
            font-family: 'Russo One', sans-serif;
        }

        .price-dollar {
            font-size: 14px;
            color: #ffd700;
        }

        /* Buy Button */
        .buy-animation-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Russo One', sans-serif;
            font-size: 12px;
        }

        .buy-animation-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }

        .buy-animation-btn.owned {
            background: #43b581;
            cursor: default;
        }

        .buy-animation-btn.owned:hover {
            transform: none;
            box-shadow: none;
        }

        .buy-animation-btn.active-btn {
            background: linear-gradient(135deg, #ffd700, #ffed4e);
            color: #000;
        }

        /* Demo Modal */
        .demo-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100000;
        }

        .demo-modal-overlay.active {
            display: flex;
        }

        .demo-modal {
            background: #1a1f2e;
            border-radius: 16px;
            max-width: 500px;
            width: 90%;
            overflow: hidden;
            border: 2px solid #667eea;
            box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4);
        }

        .demo-preview-area {
            height: 300px;
            position: relative;
        }

        .demo-canvas {
            width: 100%;
            height: 100%;
        }

        .demo-info {
            padding: 25px;
            text-align: center;
        }

        .demo-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 10px;
            font-family: 'Black Ops One', cursive;
            color: white;
        }

        .demo-description {
            color: #b9bbbe;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .demo-price {
            font-size: 28px;
            font-weight: 700;
            color: #ffd700;
            margin-bottom: 20px;
            font-family: 'Russo One', sans-serif;
        }

        .demo-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        .demo-btn {
            padding: 12px 30px;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Russo One', sans-serif;
            border: none;
        }

        .demo-btn-buy {
            background: linear-gradient(135deg, #ffd700, #ffed4e);
            color: #000;
        }

        .demo-btn-buy:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
        }

        .demo-btn-close {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .demo-btn-close:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Mobile Responsive for Profile Card */
        @media (max-width: 768px) {
            .profile-card-header {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .profile-card-left {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .profile-card-right {
                width: 100%;
            }

            .profile-name-section {
                justify-content: center;
            }

            .profile-stats-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .profile-card-buttons {
                flex-direction: column;
                width: 100%;
            }

            .profile-card-btn {
                width: 100%;
                justify-content: center;
            }

            .animation-cards-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ==================== END DISCORD-STYLE PROFILE ==================== */

        /* Legacy Profile Effect Wrapper (for compatibility) */
        .profile-effect-wrapper {
            position: relative;
            width: 200px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
        }

        /* Background Effect Layer (behind avatar) - LARGER for visibility */
        .profile-bg-effect {
            position: absolute;
            width: 220%;
            height: 220%;
            left: -60%;
            top: -60%;
            pointer-events: none;
            z-index: 0;
        }

        /* Border Effect Layer (around avatar) */
        .profile-border-effect {
            position: absolute;
            width: 110%;
            height: 110%;
            left: -5%;
            top: -5%;
            border-radius: 50%;
            pointer-events: none;
            z-index: 2;
        }

        /* ========== PROFILE BORDER EFFECT CLASSES ========== */
        .profile-border-effect.border-rainbow-spin {
            background: conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000) !important;
            animation: glowRotate 1.5s linear infinite !important;
            filter: blur(12px) !important;
            opacity: 1 !important;
            box-shadow: 0 0 30px rgba(255, 0, 255, 0.5), 0 0 60px rgba(0, 255, 255, 0.3);
        }
        
        .profile-border-effect.border-neon-pulse {
            background: linear-gradient(45deg, #00f0ff, #ff00ff, #00f0ff) !important;
            animation: borderNeonPulse 1.5s ease-in-out infinite !important;
            filter: blur(14px) !important;
            opacity: 1 !important;
            box-shadow: 0 0 30px #00f0ff, 0 0 60px #ff00ff;
        }
        
        @keyframes borderNeonPulse {
            0%, 100% { opacity: 0.8; transform: scale(1); box-shadow: 0 0 30px #00f0ff, 0 0 60px #ff00ff; }
            50% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 50px #ff00ff, 0 0 100px #00f0ff; }
        }
        
        .profile-border-effect.border-fire-ring {
            background: conic-gradient(from 0deg, #ff4500, #ff8c00, #ffd700, #ff8c00, #ff4500) !important;
            animation: glowRotate 1.5s linear infinite, borderFireFlicker 0.5s ease-in-out infinite !important;
            filter: blur(15px) !important;
            opacity: 1 !important;
            box-shadow: 0 0 40px rgba(255, 69, 0, 0.8), 0 0 80px rgba(255, 140, 0, 0.5);
        }
        
        @keyframes borderFireFlicker {
            0%, 100% { filter: blur(15px) brightness(1); }
            50% { filter: blur(18px) brightness(1.3); }
        }
        
        .profile-border-effect.border-frost {
            background: conic-gradient(from 0deg, #00bfff, #87ceeb, #ffffff, #87ceeb, #00bfff) !important;
            animation: glowRotate 3s linear infinite reverse !important;
            filter: blur(14px) !important;
            opacity: 1 !important;
            box-shadow: 0 0 40px rgba(135, 206, 235, 0.8), 0 0 80px rgba(0, 191, 255, 0.5);
        }
        
        .profile-border-effect.border-electric {
            background: conic-gradient(from 0deg, transparent 0deg, #00ff88 20deg, transparent 40deg, transparent 90deg, #00ff88 110deg, transparent 130deg, transparent 180deg, #00ff88 200deg, transparent 220deg, transparent 270deg, #00ff88 290deg, transparent 310deg, transparent 360deg) !important;
            animation: borderElectricSpark 0.5s linear infinite !important;
            filter: blur(10px) !important;
            opacity: 1 !important;
            box-shadow: 0 0 50px rgba(0, 255, 136, 0.8);
        }
        
        @keyframes borderElectricSpark {
            0% { transform: rotate(0deg); filter: blur(10px) brightness(1); }
            50% { filter: blur(12px) brightness(1.8); }
            100% { transform: rotate(360deg); filter: blur(10px) brightness(1); }
        }
        
        .profile-border-effect.border-golden-crown {
            background: conic-gradient(from 0deg, #ffd700 0deg, #ffec8b 30deg, #ffd700 60deg, #b8860b 90deg, #ffd700 120deg, #ffec8b 150deg, #ffd700 180deg, #b8860b 210deg, #ffd700 240deg, #ffec8b 270deg, #ffd700 300deg, #b8860b 330deg, #ffd700 360deg) !important;
            animation: glowRotate 3s linear infinite !important;
            filter: blur(12px) !important;
            opacity: 1 !important;
            box-shadow: 0 0 50px rgba(255, 215, 0, 0.9), 0 0 100px rgba(255, 215, 0, 0.5);
        }
        
        .profile-border-effect.border-plasma {
            background: conic-gradient(from 0deg, #ff00ff, #00ffff, #ff00ff, #ffff00, #ff00ff) !important;
            animation: glowRotate 1s linear infinite !important;
            filter: blur(18px) !important;
            opacity: 1 !important;
            box-shadow: 0 0 40px rgba(255, 0, 255, 0.8), 0 0 80px rgba(0, 255, 255, 0.5);
        }
        
        .profile-border-effect.border-diamond {
            background: conic-gradient(from 0deg, #e0ffff, #b0e0e6, #ffffff, #b0e0e6, #e0ffff) !important;
            animation: glowRotate 4s linear infinite, borderDiamondSparkle 1.5s ease-in-out infinite !important;
            filter: blur(12px) !important;
            opacity: 1 !important;
            box-shadow: 0 0 50px rgba(224, 255, 255, 0.9), 0 0 100px rgba(176, 224, 230, 0.6);
        }
        
        @keyframes borderDiamondSparkle {
            0%, 100% { opacity: 0.8; filter: blur(12px) brightness(1); }
            50% { opacity: 1; filter: blur(10px) brightness(1.5); }
        }
        
        .profile-border-effect.border-nebula-ring {
            background: conic-gradient(from 0deg, #8b00ff, #ff1493, #00bfff, #8b00ff) !important;
            animation: glowRotate 5s linear infinite !important;
            filter: blur(20px) !important;
            opacity: 1 !important;
            box-shadow: 0 0 50px rgba(139, 0, 255, 0.8), 0 0 100px rgba(255, 20, 147, 0.5);
        }
        
        .profile-border-effect.border-ion-core {
            background: radial-gradient(circle, #00ff00 0%, #00ffff 50%, #0000ff 100%) !important;
            animation: borderIonPulse 1s ease-in-out infinite !important;
            filter: blur(15px) !important;
            opacity: 1 !important;
            box-shadow: 0 0 40px rgba(0, 255, 0, 0.8), 0 0 80px rgba(0, 255, 255, 0.5);
        }
        
        @keyframes borderIonPulse {
            0%, 100% { transform: scale(0.95); opacity: 0.8; }
            50% { transform: scale(1.08); opacity: 1; }
        }

        /* Foreground Particles Layer */
        .profile-particle-effect {
            position: absolute;
            width: 300%;
            height: 300%;
            left: -100%;
            top: -100%;
            pointer-events: none;
            z-index: 3;
        }

        /* ========== MEGA BACKGROUND EFFECTS ========== */
        
        /* 🌌 COSMIC NEBULA - Epic space background */
        .bg-cosmic-void {
            background: 
                radial-gradient(ellipse at 30% 20%, rgba(138, 43, 226, 0.8) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(0, 191, 255, 0.6) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(255, 20, 147, 0.4) 0%, transparent 60%),
                linear-gradient(180deg, #0a0015 0%, #1a0a2e 50%, #0d001a 100%);
            border-radius: 50%;
            animation: cosmicNebula 8s ease-in-out infinite;
            filter: blur(8px);
        }
        
        .bg-cosmic-void::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(2px 2px at 20% 30%, white, transparent),
                radial-gradient(2px 2px at 40% 70%, white, transparent),
                radial-gradient(3px 3px at 60% 20%, rgba(255,255,255,0.8), transparent),
                radial-gradient(2px 2px at 80% 60%, white, transparent),
                radial-gradient(3px 3px at 10% 80%, rgba(255,255,255,0.9), transparent),
                radial-gradient(2px 2px at 90% 40%, white, transparent),
                radial-gradient(2px 2px at 50% 10%, white, transparent),
                radial-gradient(3px 3px at 30% 90%, rgba(255,255,255,0.7), transparent);
            animation: twinkleStars 3s ease-in-out infinite;
        }

        @keyframes cosmicNebula {
            0%, 100% { 
                transform: scale(1) rotate(0deg);
                filter: blur(8px) brightness(1);
            }
            50% { 
                transform: scale(1.1) rotate(5deg);
                filter: blur(10px) brightness(1.3);
            }
        }

        @keyframes twinkleStars {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }

        /* 💜 NEON CYBERPUNK - Intense neon glow */
        .bg-neon-glow {
            background: 
                radial-gradient(ellipse at center, rgba(0, 255, 255, 0.5) 0%, transparent 40%),
                radial-gradient(ellipse at 20% 80%, rgba(255, 0, 255, 0.6) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(0, 255, 128, 0.4) 0%, transparent 50%),
                linear-gradient(45deg, #000428, #004e92, #000428);
            border-radius: 50%;
            animation: neonPulse 2s ease-in-out infinite;
            filter: blur(12px);
            box-shadow: 
                0 0 60px rgba(0, 255, 255, 0.8),
                0 0 120px rgba(255, 0, 255, 0.5),
                inset 0 0 60px rgba(0, 255, 255, 0.3);
        }

        @keyframes neonPulse {
            0%, 100% { 
                transform: scale(1);
                box-shadow: 0 0 60px rgba(0, 255, 255, 0.8), 0 0 120px rgba(255, 0, 255, 0.5);
            }
            50% { 
                transform: scale(1.15);
                box-shadow: 0 0 100px rgba(255, 0, 255, 0.9), 0 0 180px rgba(0, 255, 255, 0.7);
            }
        }

        /* 🌅 SUNSET FIRE - Warm gradient explosion */
        .bg-sunset-aura {
            background: 
                radial-gradient(ellipse at 30% 30%, rgba(255, 165, 0, 0.9) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 70%, rgba(255, 69, 0, 0.8) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(255, 20, 60, 0.7) 0%, transparent 60%),
                linear-gradient(135deg, #ff416c 0%, #ff4b2b 50%, #ffaa00 100%);
            border-radius: 50%;
            animation: sunsetBurst 4s ease-in-out infinite;
            filter: blur(15px);
            box-shadow: 0 0 80px rgba(255, 100, 0, 0.7);
        }

        @keyframes sunsetBurst {
            0%, 100% { transform: scale(1) rotate(0deg); filter: blur(15px) brightness(1); }
            50% { transform: scale(1.2) rotate(10deg); filter: blur(20px) brightness(1.4); }
        }

        /* 💎 MYSTIC PURPLE - Magical purple aura */
        .bg-mystic-purple {
            background: 
                radial-gradient(ellipse at 25% 25%, rgba(186, 85, 211, 0.9) 0%, transparent 45%),
                radial-gradient(ellipse at 75% 75%, rgba(138, 43, 226, 0.8) 0%, transparent 45%),
                radial-gradient(ellipse at 50% 50%, rgba(255, 0, 255, 0.5) 0%, transparent 50%),
                linear-gradient(180deg, #1a0033 0%, #4a0080 50%, #2d0066 100%);
            border-radius: 50%;
            animation: mysticSwirl 6s linear infinite;
            filter: blur(12px);
            box-shadow: 
                0 0 60px rgba(138, 43, 226, 0.8),
                0 0 120px rgba(186, 85, 211, 0.5);
        }

        @keyframes mysticSwirl {
            0% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.15); }
            100% { transform: rotate(360deg) scale(1); }
        }

        /* 💚 MATRIX CODE - Digital rain effect */
        .bg-matrix-digital {
            background: 
                radial-gradient(ellipse at center, rgba(0, 255, 65, 0.4) 0%, transparent 60%),
                linear-gradient(180deg, #001100 0%, #003300 50%, #001100 100%);
            border-radius: 50%;
            animation: matrixGlow 2s ease-in-out infinite;
            filter: blur(10px);
            box-shadow: 
                0 0 80px rgba(0, 255, 65, 0.7),
                0 0 40px rgba(0, 255, 65, 0.5) inset;
        }

        .bg-matrix-digital::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: 
                repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 10px,
                    rgba(0, 255, 65, 0.1) 10px,
                    rgba(0, 255, 65, 0.1) 20px
                );
            animation: matrixScan 1.5s linear infinite;
        }

        @keyframes matrixGlow {
            0%, 100% { box-shadow: 0 0 80px rgba(0, 255, 65, 0.7), 0 0 40px rgba(0, 255, 65, 0.5) inset; }
            50% { box-shadow: 0 0 120px rgba(0, 255, 65, 1), 0 0 60px rgba(0, 255, 65, 0.8) inset; }
        }

        @keyframes matrixScan {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }

        /* 👑 GOLDEN PRESTIGE - Luxury gold effect */
        .bg-golden-prestige {
            background: 
                radial-gradient(ellipse at 30% 30%, rgba(255, 215, 0, 0.9) 0%, transparent 40%),
                radial-gradient(ellipse at 70% 70%, rgba(255, 193, 7, 0.8) 0%, transparent 40%),
                radial-gradient(ellipse at 50% 50%, rgba(255, 165, 0, 0.6) 0%, transparent 50%),
                linear-gradient(135deg, #2a1f00 0%, #4d3800 50%, #1f1600 100%);
            border-radius: 50%;
            animation: goldenShine 3s ease-in-out infinite;
            filter: blur(12px);
            box-shadow: 
                0 0 80px rgba(255, 215, 0, 0.8),
                0 0 160px rgba(255, 193, 7, 0.5);
        }

        @keyframes goldenShine {
            0%, 100% { 
                transform: scale(1);
                filter: blur(12px) brightness(1);
            }
            50% { 
                transform: scale(1.15);
                filter: blur(15px) brightness(1.5);
            }
        }

        /* 🔥 INFERNO FLAME - Epic fire effect */
        .bg-inferno-flame {
            background: 
                radial-gradient(ellipse at 50% 80%, rgba(255, 69, 0, 1) 0%, transparent 50%),
                radial-gradient(ellipse at 30% 60%, rgba(255, 140, 0, 0.9) 0%, transparent 40%),
                radial-gradient(ellipse at 70% 60%, rgba(255, 165, 0, 0.8) 0%, transparent 40%),
                radial-gradient(ellipse at 50% 40%, rgba(255, 0, 0, 0.7) 0%, transparent 50%),
                linear-gradient(180deg, #1a0000 0%, #330000 50%, #1a0000 100%);
            border-radius: 50%;
            animation: flameRage 1.2s ease-in-out infinite alternate;
            filter: blur(15px);
            box-shadow: 
                0 0 100px rgba(255, 69, 0, 0.9),
                0 -30px 80px rgba(255, 165, 0, 0.6);
        }

        @keyframes flameRage {
            0% { 
                transform: scale(1) translateY(0);
                filter: blur(15px) brightness(1);
            }
            100% { 
                transform: scale(1.1) translateY(-10px);
                filter: blur(18px) brightness(1.3);
            }
        }

        /* ❄️ FROST ICE - Frozen crystal effect */
        .bg-frost-ice {
            background: 
                radial-gradient(ellipse at 30% 30%, rgba(135, 206, 250, 0.9) 0%, transparent 40%),
                radial-gradient(ellipse at 70% 70%, rgba(0, 191, 255, 0.8) 0%, transparent 40%),
                radial-gradient(ellipse at 50% 50%, rgba(173, 216, 230, 0.7) 0%, transparent 50%),
                linear-gradient(135deg, #001a33 0%, #004466 50%, #001a33 100%);
            border-radius: 50%;
            animation: frostCrystal 4s ease-in-out infinite;
            filter: blur(12px);
            box-shadow: 
                0 0 80px rgba(135, 206, 250, 0.8),
                0 0 40px rgba(255, 255, 255, 0.5) inset;
        }

        .bg-frost-ice::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(3px 3px at 20% 20%, rgba(255,255,255,0.9), transparent),
                radial-gradient(4px 4px at 80% 30%, rgba(255,255,255,0.8), transparent),
                radial-gradient(3px 3px at 30% 80%, rgba(255,255,255,0.9), transparent),
                radial-gradient(5px 5px at 70% 70%, rgba(255,255,255,0.7), transparent);
            animation: iceSparkle 2s ease-in-out infinite;
        }

        @keyframes frostCrystal {
            0%, 100% { transform: scale(1); filter: blur(12px) brightness(1); }
            50% { transform: scale(1.1); filter: blur(15px) brightness(1.2); }
        }

        @keyframes iceSparkle {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }

        /* 🌁 SYNTHWAVE DREAM - Neon grid horizon */
        .bg-synthwave-dream {
            border-radius: 50%;
            background: linear-gradient(180deg, #17002c 0%, #320042 50%, #03010a 100%);
            filter: blur(10px);
            animation: synthwavePulse 6s ease-in-out infinite;
            box-shadow:
                0 0 70px rgba(255, 0, 128, 0.6),
                0 0 120px rgba(0, 188, 255, 0.35);
            position: relative;
            overflow: hidden;
        }

        .bg-synthwave-dream::before {
            content: '';
            position: absolute;
            inset: 5%;
            background:
                repeating-linear-gradient(0deg, rgba(255, 0, 128, 0.4), rgba(255, 0, 128, 0.4) 2px, transparent 2px, transparent 10px),
                repeating-linear-gradient(90deg, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.3) 2px, transparent 2px, transparent 14px);
            animation: synthwaveGrid 8s linear infinite;
        }

        @keyframes synthwavePulse {
            0%, 100% { transform: scale(1); filter: blur(10px) brightness(1); }
            50% { transform: scale(1.1); filter: blur(12px) brightness(1.25); }
        }

        @keyframes synthwaveGrid {
            0% { transform: translateY(0); }
            100% { transform: translateY(20px); }
        }

        /* 🌙 LUNAR HALO - Celestial moon aura */
        .bg-lunar-halo {
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(173, 216, 230, 0.3) 55%, transparent 75%),
                linear-gradient(180deg, #02040c 0%, #081526 100%);
            box-shadow:
                0 0 60px rgba(173, 216, 230, 0.6),
                0 0 90px rgba(135, 206, 235, 0.4);
            animation: lunarGlow 7s ease-in-out infinite;
            position: relative;
        }

        .bg-lunar-halo::before {
            content: '';
            position: absolute;
            inset: 18%;
            border-radius: 50%;
            border: 2px solid rgba(135, 206, 235, 0.4);
            animation: lunarOrbit 10s linear infinite;
        }

        @keyframes lunarGlow {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.25); }
        }

        @keyframes lunarOrbit {
            0% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.05); }
            100% { transform: rotate(360deg) scale(1); }
        }

        /* ========== ANIMATED BORDER EFFECTS ========== */

        /* 🌈 RAINBOW SPIN - Rotating rainbow border */
        .border-rainbow-spin {
            background: conic-gradient(from 0deg, 
                #ff0000, #ff8000, #ffff00, #00ff00, 
                #00ffff, #0080ff, #8000ff, #ff00ff, #ff0000);
            border-radius: 50%;
            animation: rainbowSpin 2s linear infinite;
            box-shadow: 
                0 0 30px rgba(255, 0, 255, 0.5),
                0 0 60px rgba(0, 255, 255, 0.3);
        }

        .border-rainbow-spin::before {
            content: '';
            position: absolute;
            inset: 6px;
            background: #1a1a1a;
            border-radius: 50%;
        }

        @keyframes rainbowSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 💗 NEON PULSE - Pulsing neon border */
        .border-neon-pulse {
            background: linear-gradient(45deg, #00f0ff, #ff00ff, #00f0ff);
            border-radius: 50%;
            animation: neonBorderPulse 1.5s ease-in-out infinite;
            box-shadow: 
                0 0 20px #00f0ff,
                0 0 40px #ff00ff,
                0 0 60px #00f0ff;
        }

        .border-neon-pulse::before {
            content: '';
            position: absolute;
            inset: 5px;
            background: #1a1a1a;
            border-radius: 50%;
        }

        @keyframes neonBorderPulse {
            0%, 100% { 
                box-shadow: 0 0 20px #00f0ff, 0 0 40px #ff00ff, 0 0 60px #00f0ff;
                transform: scale(1);
            }
            50% { 
                box-shadow: 0 0 40px #ff00ff, 0 0 80px #00f0ff, 0 0 120px #ff00ff;
                transform: scale(1.05);
            }
        }

        /* ⚡ ELECTRIC - Electric spark border */
        .border-electric {
            background: conic-gradient(from 0deg,
                transparent 0deg, #00ff88 20deg, transparent 40deg,
                transparent 90deg, #00ff88 110deg, transparent 130deg,
                transparent 180deg, #00ff88 200deg, transparent 220deg,
                transparent 270deg, #00ff88 290deg, transparent 310deg);
            border-radius: 50%;
            animation: electricSpark 0.8s linear infinite;
            box-shadow: 0 0 40px rgba(0, 255, 136, 0.6);
        }

        .border-electric::before {
            content: '';
            position: absolute;
            inset: 5px;
            background: #1a1a1a;
            border-radius: 50%;
        }

        @keyframes electricSpark {
            0% { transform: rotate(0deg); filter: brightness(1); }
            50% { filter: brightness(1.5); }
            100% { transform: rotate(360deg); filter: brightness(1); }
        }

        /* 👑 GOLDEN CROWN - Luxury gold border */
        .border-golden-crown {
            background: conic-gradient(from 0deg,
                #ffd700 0deg, #ffec8b 30deg, #ffd700 60deg,
                #b8860b 90deg, #ffd700 120deg, #ffec8b 150deg,
                #ffd700 180deg, #b8860b 210deg, #ffd700 240deg,
                #ffec8b 270deg, #ffd700 300deg, #b8860b 330deg, #ffd700 360deg);
            border-radius: 50%;
            animation: goldenRotate 4s linear infinite;
            box-shadow: 
                0 0 40px rgba(255, 215, 0, 0.8),
                0 0 80px rgba(255, 215, 0, 0.4);
        }

        .border-golden-crown::before {
            content: '';
            position: absolute;
            inset: 6px;
            background: #1a1a1a;
            border-radius: 50%;
        }

        @keyframes goldenRotate {
            0% { transform: rotate(0deg); filter: brightness(1); }
            50% { filter: brightness(1.3); }
            100% { transform: rotate(360deg); filter: brightness(1); }
        }

        /* 💎 DIAMOND - Sparkling diamond border */
        .border-diamond {
            background: conic-gradient(from 0deg,
                rgba(255,255,255,1) 0deg, transparent 15deg,
                rgba(255,255,255,0.8) 45deg, transparent 60deg,
                rgba(255,255,255,1) 90deg, transparent 105deg,
                rgba(255,255,255,0.8) 135deg, transparent 150deg,
                rgba(255,255,255,1) 180deg, transparent 195deg,
                rgba(255,255,255,0.8) 225deg, transparent 240deg,
                rgba(255,255,255,1) 270deg, transparent 285deg,
                rgba(255,255,255,0.8) 315deg, transparent 330deg,
                rgba(255,255,255,1) 360deg);
            border-radius: 50%;
            animation: diamondSparkle 2s linear infinite;
            box-shadow: 
                0 0 30px rgba(255, 255, 255, 0.8),
                0 0 60px rgba(200, 200, 255, 0.5);
        }

        .border-diamond::before {
            content: '';
            position: absolute;
            inset: 5px;
            background: #1a1a1a;
            border-radius: 50%;
        }

        @keyframes diamondSparkle {
            0% { transform: rotate(0deg); filter: brightness(1) contrast(1); }
            25% { filter: brightness(1.5) contrast(1.2); }
            50% { filter: brightness(1) contrast(1); }
            75% { filter: brightness(1.5) contrast(1.2); }
            100% { transform: rotate(360deg); filter: brightness(1) contrast(1); }
        }

        /* 🔥 FIRE RING - Blazing fire border */
        .border-fire-ring {
            background: conic-gradient(from 0deg,
                #ff4500, #ff6b35, #ff8c00, #ffaa00, 
                #ff8c00, #ff6b35, #ff4500, #ff2200,
                #ff4500, #ff6b35, #ff8c00, #ffaa00,
                #ff8c00, #ff6b35, #ff4500);
            border-radius: 50%;
            animation: fireRingSpin 1.5s linear infinite;
            box-shadow: 
                0 0 40px rgba(255, 69, 0, 0.9),
                0 0 80px rgba(255, 140, 0, 0.6);
        }

        .border-fire-ring::before {
            content: '';
            position: absolute;
            inset: 6px;
            background: #1a1a1a;
            border-radius: 50%;
        }

        @keyframes fireRingSpin {
            0% { transform: rotate(0deg) scale(1); filter: brightness(1); }
            50% { transform: rotate(180deg) scale(1.02); filter: brightness(1.3); }
            100% { transform: rotate(360deg) scale(1); filter: brightness(1); }
        }

        /* ❄️ FROST - Ice crystal border */
        .border-frost {
            background: conic-gradient(from 0deg,
                #87ceeb, #b0e0e6, #e0ffff, #ffffff,
                #e0ffff, #b0e0e6, #87ceeb, #4682b4,
                #87ceeb, #b0e0e6, #e0ffff, #ffffff,
                #e0ffff, #b0e0e6, #87ceeb);
            border-radius: 50%;
            animation: frostGlow 3s ease-in-out infinite;
            box-shadow: 
                0 0 30px rgba(135, 206, 235, 0.8),
                0 0 60px rgba(176, 224, 230, 0.5);
        }

        .border-frost::before {
            content: '';
            position: absolute;
            inset: 5px;
            background: #1a1a1a;
            border-radius: 50%;
        }

        @keyframes frostGlow {
            0%, 100% { 
                box-shadow: 0 0 30px rgba(135, 206, 235, 0.8), 0 0 60px rgba(176, 224, 230, 0.5);
                filter: brightness(1);
            }
            50% { 
                box-shadow: 0 0 50px rgba(135, 206, 235, 1), 0 0 100px rgba(176, 224, 230, 0.8);
                filter: brightness(1.2);
            }
        }

        /* 🌊 PLASMA - Plasma wave border */
        .border-plasma {
            background: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff, #00ffff, #ff00ff);
            background-size: 200% 100%;
            border-radius: 50%;
            animation: plasmaWave 3s linear infinite;
            box-shadow: 
                0 0 30px rgba(255, 0, 255, 0.6),
                0 0 60px rgba(0, 255, 255, 0.4);
        }

        .border-plasma::before {
            content: '';
            position: absolute;
            inset: 5px;
            background: #1a1a1a;
            border-radius: 50%;
        }

        @keyframes plasmaWave {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        /* 🔮 ION CORE - Energetic plasma ring */
        .border-ion-core {
            background: conic-gradient(from 0deg, #00f0ff, #7f7cff, #ff00ff, #00f0ff);
            border-radius: 50%;
            animation: ionCoreSpin 4s linear infinite;
            box-shadow:
                0 0 40px rgba(0, 240, 255, 0.5),
                0 0 80px rgba(255, 0, 255, 0.3);
        }

        .border-ion-core::before {
            content: '';
            position: absolute;
            inset: 6px;
            background: #0f111c;
            border-radius: 50%;
        }

        @keyframes ionCoreSpin {
            0% { transform: rotate(0deg); filter: brightness(1); }
            50% { filter: brightness(1.3); }
            100% { transform: rotate(360deg); filter: brightness(1); }
        }

        /* 🌠 NEBULA RING - Cosmic orbit border */
        .border-nebula-ring {
            background: conic-gradient(from 0deg, rgba(255, 215, 0, 0.9), rgba(255, 69, 0, 0.7), rgba(103, 58, 183, 0.7), rgba(255, 215, 0, 0.9));
            border-radius: 50%;
            animation: nebulaRingOrbit 6s ease-in-out infinite;
            box-shadow:
                0 0 50px rgba(255, 69, 0, 0.6),
                0 0 90px rgba(103, 58, 183, 0.4);
        }

        .border-nebula-ring::before {
            content: '';
            position: absolute;
            inset: 8px;
            background: #05060b;
            border-radius: 50%;
        }

        @keyframes nebulaRingOrbit {
            0% { transform: rotate(0deg) scale(1); filter: brightness(1); }
            50% { transform: rotate(180deg) scale(1.05); filter: brightness(1.25); }
            100% { transform: rotate(360deg) scale(1); filter: brightness(1); }
        }

        /* ========== EFFECTS SELECTION UI ========== */

        .effects-section {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 2rem;
            border: 2px solid rgba(255, 0, 64, 0.3);
        }

        .effects-section-title {
            font-family: 'Russo One', sans-serif;
            font-size: 1.2rem;
            color: var(--yellow);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .effects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 1rem;
        }

        .effect-item {
            background: rgba(20, 20, 20, 0.8);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            position: relative;
        }

        .effect-item:hover {
            border-color: var(--cyan);
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2);
        }

        .effect-item.selected {
            border-color: var(--yellow);
            background: rgba(255, 204, 0, 0.1);
        }

        .effect-item.locked {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .effect-item.locked::after {
            content: '🔒';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            opacity: 0.8;
        }

        .effect-preview {
            width: 70px;
            height: 70px;
            margin: 0 auto 0.8rem;
            border-radius: 50%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .effect-preview-inner {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: linear-gradient(135deg, #333, #555);
            z-index: 1;
            position: relative;
        }

        .effect-preview .effect-preview-sample {
            position: absolute;
            width: 140%;
            height: 140%;
            left: -20%;
            top: -20%;
            border-radius: 50%;
            opacity: 0.9;
            z-index: 0;
            pointer-events: none;
        }

        .effect-preview .profile-border-effect.effect-preview-sample {
            width: 110%;
            height: 110%;
            left: -5%;
            top: -5%;
        }

        .effect-name {
            font-family: 'Russo One', sans-serif;
            font-size: 0.75rem;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .effect-price {
            font-size: 0.7rem;
            color: var(--yellow);
            margin-top: 0.3rem;
        }

        .effect-owned {
            font-size: 0.7rem;
            color: #4ade80;
            margin-top: 0.3rem;
        }

        /* Effect Type Tabs */
        .effect-type-tabs {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .effect-type-tab {
            padding: 0.6rem 1.2rem;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            color: rgba(255, 255, 255, 0.7);
            font-family: 'Russo One', sans-serif;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.3s;
        }

        .effect-type-tab:hover {
            background: rgba(255, 0, 64, 0.2);
            border-color: var(--red);
        }

        .effect-type-tab.active {
            background: linear-gradient(135deg, var(--red), var(--orange));
            border-color: var(--yellow);
            color: white;
        }

        /* Active Effect Display */
        .active-effects-display {
            background: rgba(0, 240, 255, 0.05);
            border: 2px solid rgba(0, 240, 255, 0.2);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .active-effect-badge {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(0, 0, 0, 0.4);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.85rem;
        }

        .active-effect-badge .effect-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--cyan);
        }

        .clear-effects-btn {
            padding: 0.5rem 1rem;
            background: transparent;
            border: 2px solid rgba(255, 100, 100, 0.5);
            color: #ff6b6b;
            border-radius: 20px;
            cursor: pointer;
            font-family: 'Russo One', sans-serif;
            font-size: 0.75rem;
            transition: all 0.3s;
        }

        .clear-effects-btn:hover {
            background: rgba(255, 100, 100, 0.2);
            border-color: #ff6b6b;
        }

        /* ==================== END PROFILE EFFECTS ==================== */

        .profile-modal-content {
            background: linear-gradient(165deg, rgba(10, 10, 18, 0.99), rgba(16, 8, 24, 0.99), rgba(12, 6, 18, 0.99));
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            position: relative;
            width: 100%;
            max-width: 960px;
            max-height: 92vh;
            overflow-y: auto;
            animation: profileModalSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 
                0 0 0 1px rgba(255, 0, 64, 0.15),
                0 30px 100px rgba(0, 0, 0, 0.85),
                0 0 80px rgba(255, 0, 64, 0.08);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
        }
        
        .profile-modal-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 220px;
            background: linear-gradient(180deg, 
                rgba(255, 0, 64, 0.1) 0%, 
                rgba(139, 92, 246, 0.06) 40%,
                transparent 100%);
            pointer-events: none;
            z-index: 0;
            border-radius: 24px 24px 0 0;
        }
        
        .profile-modal-content::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                var(--red) 20%, 
                var(--orange) 40%, 
                var(--yellow) 50%, 
                var(--orange) 60%, 
                var(--red) 80%, 
                transparent 100%);
            background-size: 200% 100%;
            animation: borderGlow 4s linear infinite;
        }
        
        @keyframes borderGlow {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        @keyframes profileModalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-40px) scale(0.92);
                filter: blur(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        .close-profile-modal {
            position: absolute;
            top: 16px;
            right: 16px;
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.45);
            cursor: pointer;
            z-index: 10;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .close-profile-modal:hover {
            color: #ff4444;
            background: rgba(255, 68, 68, 0.12);
            border-color: rgba(255, 68, 68, 0.3);
            transform: rotate(90deg) scale(1.05);
            box-shadow: 0 4px 15px rgba(255, 68, 68, 0.2);
        }

        /* ---- Profile Modal Titlebar ---- */
        .profile-modal-titlebar {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 20px 24px 0;
            position: relative;
            z-index: 2;
        }

        .profile-modal-titlebar-icon {
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.15), rgba(255, 102, 0, 0.1));
            border: 1px solid rgba(255, 0, 64, 0.25);
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(255, 0, 64, 0.15);
        }

        .profile-modal-titlebar-text {
            font-family: 'Black Ops One', cursive;
            font-size: 1.35rem;
            margin: 0;
            background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.8));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 0.5px;
        }

        .profile-modal-titlebar-badge {
            padding: 4px 10px;
            background: linear-gradient(135deg, rgba(255, 204, 0, 0.15), rgba(255, 102, 0, 0.1));
            border: 1px solid rgba(255, 204, 0, 0.3);
            border-radius: 6px;
            font-family: 'Russo One', sans-serif;
            font-size: 0.65rem;
            color: #ffcc00;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

        /* ---- Profile Tabs - Segmented Control ---- */
        /* ==================== ENHANCED PROFILE TABS ==================== */
        .profile-tabs {
            display: flex;
            border-bottom: none;
            padding: 16px 24px 0;
            position: relative;
            z-index: 2;
            background: transparent;
            margin: 0;
            border-radius: 0;
            overflow: visible;
            backdrop-filter: none;
            gap: 0;
        }
        
        .profile-tabs::before,
        .profile-tabs::after {
            display: none;
        }

        .profile-tabs-track {
            display: flex;
            gap: 4px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 14px;
            padding: 4px;
            position: relative;
            width: 100%;
            max-width: 360px;
        }

        .profile-tab-indicator {
            position: absolute;
            top: 4px;
            left: 4px;
            width: calc(50% - 6px);
            height: calc(100% - 8px);
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.2), rgba(255, 102, 0, 0.15));
            border: 1px solid rgba(255, 0, 64, 0.3);
            border-radius: 10px;
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 0;
            box-shadow: 0 2px 12px rgba(255, 0, 64, 0.15);
        }

        .profile-tab {
            flex: 1;
            padding: 0.75rem 1rem;
            background: transparent;
            border: none;
            border-radius: 10px;
            color: rgba(255, 255, 255, 0.5);
            font-family: 'Russo One', sans-serif;
            font-size: 0.82rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            overflow: visible;
            backdrop-filter: none;
        }
        
        .profile-tab::before,
        .profile-tab::after {
            display: none;
        }

        .profile-tab-icon {
            font-size: 0.95rem;
        }

        .profile-tab:hover {
            color: rgba(255, 255, 255, 0.8);
            background: transparent;
            border-color: transparent;
            transform: none;
            box-shadow: none;
        }
        
        .profile-tab:hover::before {
            left: -100%;
        }

        .profile-tab.active {
            color: #fff;
            background: transparent;
            border: none;
            box-shadow: none;
            transform: none;
            text-shadow: 0 0 20px rgba(255, 0, 64, 0.3);
        }
        
        .profile-tab.active::after {
            display: none;
        }

        /* Profile Tab Content */
        .profile-tab-content {
            display: none;
            padding: 1.5rem 24px 1.5rem;
        }

        .profile-tab-content.active {
            display: block;
            animation: tabFadeIn 0.3s ease;
        }
        
        @keyframes tabFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .profile-layout {
            display: grid;
            grid-template-columns: minmax(0, 55%) minmax(0, 45%);
            gap: 2rem;
        }

        .profile-editor {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .profile-live-preview {
            background: linear-gradient(165deg, 
                rgba(13, 17, 23, 0.9), 
                rgba(25, 12, 30, 0.9));
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 20px;
            padding: 1.5rem;
            box-shadow: 
                0 20px 50px rgba(0, 0, 0, 0.4),
                inset 0 0 40px rgba(255, 0, 64, 0.02);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
        }

        .profile-live-preview::before {
            content: '';
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse at top left, rgba(255, 0, 64, 0.1), transparent 50%),
                radial-gradient(ellipse at bottom right, rgba(139, 92, 246, 0.08), transparent 50%);
            opacity: 0.8;
            pointer-events: none;
        }
        
        .profile-live-preview::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 0, 64, 0.3), 
                rgba(255, 102, 0, 0.5), 
                rgba(255, 0, 64, 0.3), 
                transparent);
        }

        .preview-header {
            position: relative;
            z-index: 1;
            margin-bottom: 1rem;
        }

        .preview-header h3 {
            font-family: 'Russo One', sans-serif;
            margin: 0;
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.7);
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .preview-header p {
            margin: 0.4rem 0 0;
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.82rem;
            line-height: 1.4;
        }

        .profile-preview-card {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.08);
            min-height: 320px;
            background: linear-gradient(165deg, rgba(10, 14, 26, 0.95), rgba(20, 10, 25, 0.95));
            box-shadow: 
                0 20px 50px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.05),
                inset 0 0 40px rgba(0, 0, 0, 0.3);
            z-index: 1;
            transition: all 0.4s ease;
        }
        
        .profile-preview-card:hover {
            transform: translateY(-5px);
            box-shadow: 
                0 30px 70px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(255, 0, 64, 0.15),
                inset 0 0 40px rgba(0, 0, 0, 0.3);
        }

        .preview-banner {
            position: relative;
            height: 160px;
            overflow: hidden;
        }
        
        .preview-banner::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(to top, rgba(10, 14, 26, 1), transparent);
            pointer-events: none;
        }

        .preview-banner .banner-animation-canvas {
            display: block;
            width: 100%;
            height: 160px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
        }

        .preview-avatar-stack {
            position: absolute;
            bottom: -45px;
            left: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            z-index: 5;
        }

        .avatar-status-pill {
            align-self: flex-start;
            background: linear-gradient(135deg, rgba(67, 181, 129, 0.2), rgba(67, 181, 129, 0.1));
            color: #43b581;
            padding: 0.4rem 1rem;
            border-radius: 999px;
            font-size: 0.78rem;
            border: 1px solid rgba(67, 181, 129, 0.4);
            font-weight: 600;
            box-shadow: 
                0 10px 25px rgba(67, 181, 129, 0.2),
                inset 0 0 10px rgba(67, 181, 129, 0.1);
            backdrop-filter: blur(10px);
        }

        .profile-effect-wrapper.mini {
            transform: scale(0.72);
            transform-origin: left bottom;
        }

        .profile-picture.mini {
            width: 120px;
            height: 120px;
            border-width: 3px;
        }

        .preview-body {
            padding: 70px 1.5rem 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1.1rem;
            position: relative;
        }
        
        .preview-body::before {
            content: '';
            position: absolute;
            top: 20px;
            right: 20px;
            width: 80px;
            height: 80px;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent 70%);
            border-radius: 50%;
            animation: previewGlow 4s ease-in-out infinite;
            pointer-events: none;
        }
        
        @keyframes previewGlow {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }

        .preview-name-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.6rem;
        }
        
        .preview-name-row > div {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .preview-display-name {
            font-size: 1.7rem;
            font-family: 'Black Ops One', cursive;
            color: #fff;
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
            letter-spacing: 0.5px;
        }
        
        .verified-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            background: linear-gradient(135deg, #43b581, #3ca374);
            border-radius: 50%;
            font-size: 0.75rem;
            color: white;
            box-shadow: 0 3px 10px rgba(67, 181, 129, 0.4);
        }
        
        .admin-badge {
            padding: 0.3rem 0.7rem;
            background: linear-gradient(135deg, #ff6b35, #f7931a);
            border-radius: 20px;
            font-size: 0.7rem;
            font-family: 'Russo One', sans-serif;
            color: #000;
            box-shadow: 0 3px 10px rgba(255, 107, 53, 0.4);
        }

        .preview-share-btn {
            border: none;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            color: #fff;
            width: 40px;
            height: 40px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .preview-share-btn:hover {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
        }

        .preview-email {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.88rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .preview-level-row {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            flex-wrap: wrap;
        }
        
        .preview-level-row .level-badge {
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
            background: linear-gradient(135deg, #ffd700, #ff9500);
            color: #000;
            font-family: 'Russo One', sans-serif;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.35);
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        
        .preview-level-row .level-rank {
            padding: 0.4rem 0.9rem;
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 107, 53, 0.1));
            border: 1px solid rgba(255, 107, 53, 0.4);
            border-radius: 8px;
            font-size: 0.82rem;
            color: #ff6b35;
            font-family: 'Russo One', sans-serif;
        }

        .xp-bar-container.slim {
            height: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 999px;
            overflow: hidden;
            background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(255,255,255,0.03));
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
        }

        .xp-bar-container.slim .xp-bar {
            border: none;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow));
            box-shadow: 0 0 15px rgba(255, 102, 0, 0.4);
        }

        .preview-about {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 14px;
            padding: 1.1rem;
            backdrop-filter: blur(5px);
        }

        .preview-about-title {
            font-size: 0.72rem;
            letter-spacing: 0.12em;
            color: rgba(255, 255, 255, 0.5);
            margin-bottom: 0.4rem;
            text-transform: uppercase;
            font-family: 'Russo One', sans-serif;
        }

        .preview-about p {
            margin: 0;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .preview-active-effects {
            position: relative;
            z-index: 1;
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }
        
        .active-effect-badge {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.9rem;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            font-size: 0.78rem;
            color: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(5px);
        }
        
        .active-effect-badge .effect-dot {
            width: 8px;
            height: 8px;
            background: linear-gradient(135deg, var(--orange), var(--yellow));
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(255, 102, 0, 0.5);
        }
        
        .clear-effects-btn {
            padding: 0.5rem 1rem;
            background: linear-gradient(145deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08));
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 10px;
            color: #ef4444;
            font-size: 0.78rem;
            font-family: 'Russo One', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: auto;
        }
        
        .clear-effects-btn:hover {
            background: linear-gradient(145deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.15));
            border-color: #ef4444;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2);
        }

        .preview-footer {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.82rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .preview-customize-btn {
            border: none;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.15), rgba(255, 102, 0, 0.12));
            border: 1px solid rgba(255, 0, 64, 0.3);
            color: white;
            padding: 0.55rem 1.3rem;
            border-radius: 10px;
            font-family: 'Russo One', sans-serif;
            font-size: 0.78rem;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .preview-customize-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
            transition: left 0.5s ease;
        }

        .preview-customize-btn:hover {
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.25), rgba(255, 102, 0, 0.2));
            border-color: rgba(255, 0, 64, 0.5);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 0, 64, 0.2);
        }
        
        .preview-customize-btn:hover::before {
            left: 100%;
        }

        /* ==================== MY PROFILE PREVIEW CARD (Like User Profile Modal) ==================== */
        .my-profile-preview-card {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid rgba(255, 0, 64, 0.2);
            background: linear-gradient(165deg, rgba(10, 14, 26, 0.98), rgba(20, 10, 25, 0.98));
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        .my-profile-bg-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .my-profile-header {
            position: relative;
            z-index: 1;
            text-align: center;
            padding: 25px 20px 15px;
            background: linear-gradient(180deg, transparent, rgba(10, 14, 26, 0.9));
        }

        .my-profile-avatar-wrapper {
            position: relative;
            width: 110px;
            height: 110px;
            margin: 0 auto 15px;
        }

        .my-profile-avatar-glow {
            position: absolute;
            width: 130px;
            height: 130px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: conic-gradient(from 0deg, #ff0040, #ff6600, #ffaa00, #ff6600, #ff0040);
            filter: blur(15px);
            opacity: 0.6;
            z-index: 0;
        }

        .my-profile-avatar-glow[class*="border-"] {
            animation: glowRotate 3s linear infinite;
            opacity: 0.8;
        }

        .my-profile-avatar-frame {
            position: relative;
            width: 110px;
            height: 110px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff0040, #ff6600);
            padding: 4px;
            box-shadow: 0 0 30px rgba(255, 0, 64, 0.4);
            z-index: 1;
        }

        .my-profile-avatar-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
            background: #1a1a2e;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .my-profile-avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .my-profile-avatar-placeholder {
            font-size: 50px;
        }

        .my-profile-online-dot {
            position: absolute;
            bottom: 5px;
            right: 5px;
            width: 20px;
            height: 20px;
            background: #43b581;
            border: 3px solid #1a1a2e;
            border-radius: 50%;
            z-index: 2;
        }

        .my-profile-username {
            font-family: 'Black Ops One', cursive;
            font-size: 1.4rem;
            color: #fff;
            margin: 0 0 5px;
            text-shadow: 0 0 20px rgba(255, 0, 64, 0.3);
        }

        .my-profile-badges {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 10px;
        }

        .my-badge-verified {
            width: 22px;
            height: 22px;
            background: linear-gradient(135deg, #43b581, #3ca374);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: white;
        }

        .my-badge-admin {
            padding: 3px 10px;
            background: linear-gradient(135deg, #ff6b35, #f7931a);
            border-radius: 20px;
            font-size: 10px;
            font-weight: bold;
            color: #000;
        }

        .my-profile-status {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 15px;
        }

        .my-status-dot {
            width: 8px;
            height: 8px;
            background: #43b581;
            border-radius: 50%;
        }

        .my-status-separator {
            color: rgba(255, 255, 255, 0.4);
        }

        .my-profile-rank-row {
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .my-rank-card {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .my-rank-card.level {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 107, 107, 0.2));
            border: 1px solid rgba(255, 215, 0, 0.3);
            color: #ffd700;
        }

        .my-rank-card.tier {
            background: linear-gradient(135deg, rgba(255, 102, 0, 0.2), rgba(255, 0, 64, 0.2));
            border: 1px solid rgba(255, 102, 0, 0.3);
            color: #ff6600;
        }

        .my-profile-xp {
            padding: 10px 20px;
            text-align: right;
        }

        .my-xp-bar {
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 5px;
        }

        .my-xp-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff0040, #ff6600, #ffaa00);
            border-radius: 10px;
            width: 35%;
            transition: width 0.5s ease;
        }

        .my-xp-text {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.6);
        }

        .my-xp-text span:first-child {
            color: #ff6600;
            font-weight: bold;
        }

        .my-profile-stats {
            display: flex;
            justify-content: center;
            gap: 15px;
            padding: 15px 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .my-stat-card {
            text-align: center;
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            min-width: 70px;
        }

        .my-stat-icon {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }

        .my-stat-value {
            font-family: 'Russo One', sans-serif;
            font-size: 1.1rem;
            color: #fff;
        }

        .my-stat-label {
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
        }

        .my-profile-member {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            padding: 12px;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.02);
        }

        .my-profile-about {
            padding: 15px 20px 20px;
        }

        .my-about-header {
            font-size: 0.85rem;
            font-weight: 600;
            color: #ff6600;
            margin-bottom: 10px;
        }

        .my-about-chat-preview {
            display: flex;
            gap: 12px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .my-chat-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff0040, #ff6600);
            flex-shrink: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .my-chat-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .my-chat-content {
            flex: 1;
        }

        .my-chat-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }

        .my-chat-name {
            font-weight: 600;
            font-size: 0.85rem;
            color: #fff;
        }

        .my-chat-time {
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.4);
        }

        .my-chat-message {
            margin: 0;
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.4;
        }
        
        /* 💎 Border Effect Classes for My Profile Avatar Glow */
        .my-profile-avatar-glow.border-rainbow-spin {
            width: 130px !important;
            height: 130px !important;
            background: conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000) !important;
            animation: borderGlowRotate 1.2s linear infinite !important;
            filter: blur(15px) !important;
            opacity: 1 !important;
        }
        
        .my-profile-avatar-glow.border-neon-pulse {
            width: 130px !important;
            height: 130px !important;
            background: linear-gradient(45deg, #00f0ff, #ff00ff, #00f0ff) !important;
            background-size: 200% 200%;
            animation: borderNeonPulse 1.5s ease-in-out infinite !important;
            filter: blur(18px) !important;
            opacity: 1 !important;
        }
        
        .my-profile-avatar-glow.border-fire-ring {
            width: 130px !important;
            height: 130px !important;
            background: conic-gradient(from 0deg, #ff4500, #ff8c00, #ffd700, #ff8c00, #ff4500) !important;
            animation: borderGlowRotate 1s linear infinite !important;
            filter: blur(18px) !important;
            opacity: 1 !important;
        }
        
        .my-profile-avatar-glow.border-frost {
            width: 130px !important;
            height: 130px !important;
            background: conic-gradient(from 0deg, #00bfff, #87ceeb, #ffffff, #e0ffff, #87ceeb, #00bfff) !important;
            animation: borderGlowRotate 2.5s linear infinite reverse !important;
            filter: blur(18px) !important;
            opacity: 1 !important;
        }
        
        .my-profile-avatar-glow.border-electric {
            width: 130px !important;
            height: 130px !important;
            background: conic-gradient(from 0deg, transparent 0deg, #00ff88 15deg, #ffff00 30deg, transparent 45deg, transparent 90deg, #00ff88 105deg, #ffff00 120deg, transparent 135deg, transparent 180deg, #00ff88 195deg, #ffff00 210deg, transparent 225deg, transparent 270deg, #00ff88 285deg, #ffff00 300deg, transparent 315deg) !important;
            animation: borderElectricSpark 0.2s linear infinite !important;
            filter: blur(12px) !important;
            opacity: 1 !important;
        }
        
        .my-profile-avatar-glow.border-golden-crown {
            width: 130px !important;
            height: 130px !important;
            background: conic-gradient(from 0deg, #ffd700 0deg, #ffec8b 30deg, #fff8dc 60deg, #ffd700 90deg, #b8860b 120deg, #ffd700 150deg, #ffec8b 180deg, #fff8dc 210deg, #ffd700 240deg, #b8860b 270deg, #ffd700 300deg, #ffec8b 330deg, #ffd700 360deg) !important;
            animation: borderGoldRotate 2.5s linear infinite !important;
            filter: blur(16px) !important;
            opacity: 1 !important;
        }
        
        .my-profile-avatar-glow.border-plasma {
            width: 130px !important;
            height: 130px !important;
            background: conic-gradient(from 0deg, #ff00ff, #00ffff, #ff00ff, #ffff00, #ff00ff) !important;
            animation: borderGlowRotate 0.8s linear infinite !important;
            filter: blur(20px) !important;
            opacity: 1 !important;
        }
        
        .my-profile-avatar-glow.border-diamond {
            width: 130px !important;
            height: 130px !important;
            background: conic-gradient(from 0deg, #e0ffff, #ffffff, #b0e0e6, #ffffff, #e0ffff, #ffffff, #b0e0e6, #ffffff, #e0ffff) !important;
            animation: borderDiamondSparkle 3s linear infinite !important;
            filter: blur(14px) !important;
            opacity: 1 !important;
        }
        
        .my-profile-avatar-glow.border-nebula-ring {
            width: 130px !important;
            height: 130px !important;
            background: conic-gradient(from 0deg, #8b00ff, #ff1493, #00bfff, #8b00ff) !important;
            animation: borderGlowRotate 4s linear infinite !important;
            filter: blur(22px) !important;
            opacity: 1 !important;
        }
        
        .my-profile-avatar-glow.border-ion-core {
            width: 130px !important;
            height: 130px !important;
            background: radial-gradient(circle, #00ffff, #0080ff, #0000ff, transparent) !important;
            animation: borderIonPulse 2s ease-in-out infinite !important;
            filter: blur(18px) !important;
            opacity: 1 !important;
        }
        
        @keyframes borderIonPulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
            50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
        }
        /* ==================== END MY PROFILE PREVIEW CARD ==================== */

        @media (max-width: 1100px) {
            .profile-layout {
                grid-template-columns: 1fr;
            }

            .profile-live-preview {
                order: -1;
            }
        }

        /* ==================== ENHANCED PROFILE HEADER ==================== */
        .profile-header {
            display: flex;
            gap: 1.5rem;
            align-items: center;
            margin-bottom: 1.5rem;
            padding: 1.5rem;
            background: linear-gradient(145deg, 
                rgba(255, 0, 64, 0.06) 0%, 
                rgba(255, 102, 0, 0.04) 50%,
                rgba(139, 92, 246, 0.03) 100%);
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }
        
        .profile-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--orange), var(--red));
            background-size: 200% 100%;
            animation: headerShimmer 4s linear infinite;
        }
        
        .profile-header::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 102, 0, 0.08) 0%, transparent 50%);
            animation: headerPulse 6s ease-in-out infinite;
            pointer-events: none;
        }
        
        @keyframes headerShimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        @keyframes headerPulse {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.1); }
        }

        .profile-picture-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            position: relative;
            z-index: 2;
        }

        .profile-picture {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 4px solid transparent;
            background: linear-gradient(#0a0a0f, #0a0a0f) padding-box,
                        linear-gradient(135deg, var(--red), var(--orange), var(--yellow), var(--orange), var(--red)) border-box;
            background-size: 100% 100%, 300% 300%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            box-shadow: 
                0 0 40px rgba(255, 0, 64, 0.35),
                0 0 80px rgba(255, 102, 0, 0.15),
                0 15px 50px rgba(0, 0, 0, 0.5),
                inset 0 0 30px rgba(255, 0, 64, 0.1);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            animation: none;
        }
        
        /* Only animate border when user has special effect */
        .profile-picture.has-border-effect {
            animation: avatarBorderRotate 6s linear infinite;
        }
        
        @keyframes avatarBorderRotate {
            0% { background-position: 100% 100%, 0% 50%; }
            50% { background-position: 100% 100%, 100% 50%; }
            100% { background-position: 100% 100%, 0% 50%; }
        }
        
        .profile-picture:hover {
            transform: scale(1.08) rotate(2deg);
            box-shadow: 
                0 0 60px rgba(255, 0, 64, 0.5),
                0 0 100px rgba(255, 102, 0, 0.25),
                0 20px 60px rgba(0, 0, 0, 0.6),
                inset 0 0 40px rgba(255, 0, 64, 0.15);
        }

        .profile-picture img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
            transition: transform 0.5s ease;
        }
        
        .profile-picture:hover img {
            transform: scale(1.1);
        }

        .profile-picture img.active {
            display: block;
        }

        .profile-placeholder {
            font-size: 5rem;
            animation: floatAvatar 4s ease-in-out infinite;
            filter: drop-shadow(0 0 20px rgba(255, 102, 0, 0.5));
        }
        
        @keyframes floatAvatar {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-8px) rotate(2deg); }
            75% { transform: translateY(-4px) rotate(-2deg); }
        }

        .profile-picture img.active + .profile-placeholder {
            display: none;
        }

        .upload-btn {
            padding: 0.85rem 1.6rem;
            background: linear-gradient(135deg, var(--red), var(--orange));
            border: none;
            border-radius: 30px;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 
                0 5px 20px rgba(255, 0, 64, 0.35),
                0 0 0 0 rgba(255, 0, 64, 0.4);
            position: relative;
            overflow: hidden;
        }
        
        .upload-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
            transition: left 0.6s ease;
        }

        .upload-btn:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 
                0 10px 35px rgba(255, 0, 64, 0.5),
                0 0 0 4px rgba(255, 0, 64, 0.15);
        }
        
        .upload-btn:hover::before {
            left: 100%;
        }
        
        .avatar-gallery-btn {
            padding: 0.8rem 1.4rem;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9);
            border: none;
            border-radius: 30px;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 
                0 5px 20px rgba(139, 92, 246, 0.35),
                0 0 0 0 rgba(139, 92, 246, 0.4);
            position: relative;
            overflow: hidden;
        }
        
        .avatar-gallery-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.6s ease;
        }
        
        .avatar-gallery-btn:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 
                0 10px 35px rgba(139, 92, 246, 0.5),
                0 0 0 4px rgba(139, 92, 246, 0.15);
        }
        
        .avatar-gallery-btn:hover::before {
            left: 100%;
        }

        .remove-photo-btn {
            padding: 0.65rem 1.1rem;
            background: transparent;
            border: 2px solid rgba(255, 68, 68, 0.4);
            border-radius: 25px;
            color: rgba(255, 68, 68, 0.8);
            font-family: 'Russo One', sans-serif;
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .remove-photo-btn:hover {
            background: linear-gradient(135deg, #ff4444, #cc0000);
            border-color: #ff4444;
            color: white;
            box-shadow: 
                0 5px 20px rgba(255, 68, 68, 0.4),
                0 0 0 3px rgba(255, 68, 68, 0.15);
            transform: translateY(-2px);
        }

        .profile-info {
            flex: 1;
            position: relative;
            z-index: 2;
        }

        .profile-level {
            display: flex;
            align-items: center;
            gap: 1.2rem;
            margin-bottom: 1.2rem;
            flex-wrap: wrap;
        }

        .level-badge {
            padding: 0.7rem 1.6rem;
            background: linear-gradient(135deg, var(--yellow), var(--orange), #ff6b35);
            color: var(--dark);
            font-family: 'Black Ops One', cursive;
            font-size: 1.5rem;
            border-radius: 14px;
            box-shadow: 
                0 5px 25px rgba(255, 204, 0, 0.4),
                0 0 0 3px rgba(255, 204, 0, 0.2),
                inset 0 -3px 0 rgba(0,0,0,0.2);
            animation: levelGlow 3s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }
        
        .level-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            animation: levelShine 3s linear infinite;
        }
        
        @keyframes levelGlow {
            0%, 100% { 
                box-shadow: 0 5px 25px rgba(255, 204, 0, 0.4), 0 0 0 3px rgba(255, 204, 0, 0.2), inset 0 -3px 0 rgba(0,0,0,0.2);
            }
            50% { 
                box-shadow: 0 5px 40px rgba(255, 204, 0, 0.6), 0 0 0 5px rgba(255, 204, 0, 0.3), inset 0 -3px 0 rgba(0,0,0,0.2);
            }
        }
        
        @keyframes levelShine {
            0% { left: -100%; }
            50%, 100% { left: 200%; }
        }

        .level-title {
            font-family: 'Russo One', sans-serif;
            font-size: 1.15rem;
            color: var(--orange);
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: 
                0 0 20px rgba(255, 102, 0, 0.5),
                0 0 40px rgba(255, 102, 0, 0.25);
            background: linear-gradient(135deg, var(--orange), var(--yellow));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .profile-xp {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .xp-bar {
            width: 100%;
            height: 18px;
            background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(255,255,255,0.05));
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(255, 0, 64, 0.25);
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
        }

        .xp-progress {
            height: 100%;
            background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--orange));
            background-size: 200% 100%;
            border-radius: 12px;
            transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 
                0 0 20px rgba(255, 102, 0, 0.5),
                inset 0 1px 0 rgba(255,255,255,0.3);
            position: relative;
            animation: xpGradient 3s linear infinite;
        }
        
        @keyframes xpGradient {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }
        
        .xp-progress::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
            animation: xpShine 2.5s ease-in-out infinite;
        }
        
        @keyframes xpShine {
            0% { transform: translateX(-100%); }
            50%, 100% { transform: translateX(100%); }
        }

        .xp-text {
            font-family: 'Russo One', sans-serif;
            font-size: 0.9rem;
            color: rgba(255, 204, 0, 0.9);
            text-align: right;
            text-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
        }

        /* ==================== ENHANCED PROFILE FORM ==================== */
        .profile-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.3rem;
        }

        /* ---- Form Sections ---- */
        .form-section {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .form-section-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 2px;
        }

        .form-section-icon {
            font-size: 1rem;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.12), rgba(255, 102, 0, 0.08));
            border: 1px solid rgba(255, 0, 64, 0.2);
            border-radius: 8px;
            flex-shrink: 0;
        }

        .form-section-title {
            font-family: 'Russo One', sans-serif;
            font-size: 0.78rem;
            color: rgba(255, 255, 255, 0.6);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            white-space: nowrap;
        }

        .form-section-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(255, 0, 64, 0.2), transparent);
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            position: relative;
        }

        .form-group label {
            font-family: 'Russo One', sans-serif;
            font-size: 0.78rem;
            color: rgba(255, 255, 255, 0.55);
            text-transform: uppercase;
            letter-spacing: 1.2px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
        }
        
        .form-group:focus-within label {
            color: var(--orange);
            transform: translateX(3px);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: 0.85rem 1.1rem;
            background: rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            color: white;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: rgba(255, 255, 255, 0.25);
            font-style: italic;
        }

        .form-group input:hover,
        .form-group select:hover,
        .form-group textarea:hover {
            border-color: rgba(255, 255, 255, 0.15);
            background: rgba(0, 0, 0, 0.45);
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: rgba(255, 102, 0, 0.5);
            box-shadow: 
                0 0 0 3px rgba(255, 102, 0, 0.08),
                0 0 20px rgba(255, 102, 0, 0.08);
            background: rgba(0, 0, 0, 0.5);
        }

        .form-group select {
            cursor: pointer;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23ff6600' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1.2rem center;
            padding-right: 3rem;
            background-color: #1a0a1f !important;
        }

        /* Custom Dropdown Styles */
        .custom-dropdown {
            position: relative;
            width: 100%;
        }

        .custom-dropdown select {
            display: none !important;
        }

        .custom-dropdown-trigger {
            padding: 1rem 1.2rem;
            padding-right: 3rem;
            background: linear-gradient(145deg, rgba(0, 0, 0, 0.5), rgba(20, 10, 25, 0.4));
            border: 2px solid rgba(255, 0, 64, 0.2);
            border-radius: 14px;
            color: white;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 1.02rem;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            user-select: none;
        }

        .custom-dropdown-trigger::after {
            content: '';
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #ff6600;
            transition: transform 0.3s ease;
            position: absolute;
            right: 1.2rem;
        }

        .custom-dropdown.open .custom-dropdown-trigger::after {
            transform: rotate(180deg);
        }

        .custom-dropdown-trigger:hover {
            border-color: rgba(255, 0, 64, 0.4);
            background: linear-gradient(145deg, rgba(0, 0, 0, 0.6), rgba(30, 15, 35, 0.5));
            box-shadow: 0 5px 20px rgba(255, 0, 64, 0.1);
        }

        .custom-dropdown.open .custom-dropdown-trigger {
            border-color: var(--orange);
            box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.1), 0 0 30px rgba(255, 102, 0, 0.15);
        }

        .custom-dropdown-trigger .placeholder {
            color: rgba(255, 255, 255, 0.4);
            font-style: italic;
        }

        .custom-dropdown-menu {
            position: absolute;
            top: calc(100% + 5px);
            left: 0;
            right: 0;
            background: linear-gradient(180deg, #1a0a1f 0%, #0d0510 100%);
            border: 2px solid rgba(255, 102, 0, 0.4);
            border-radius: 14px;
            max-height: 300px;
            overflow-y: auto;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 0, 64, 0.2);
        }

        .custom-dropdown.open .custom-dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .custom-dropdown-menu::-webkit-scrollbar {
            width: 8px;
        }

        .custom-dropdown-menu::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
        }

        .custom-dropdown-menu::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #ff0040, #ff6600);
            border-radius: 4px;
        }

        .custom-dropdown-group {
            padding: 8px 12px;
            background: linear-gradient(90deg, rgba(255, 102, 0, 0.2), transparent);
            color: #ff6600;
            font-weight: bold;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-top: 1px solid rgba(255, 102, 0, 0.3);
            margin-top: 5px;
        }

        .custom-dropdown-group:first-child {
            margin-top: 0;
            border-top: none;
        }

        .custom-dropdown-item {
            padding: 12px 16px;
            color: #fff;
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 1px solid rgba(255, 0, 64, 0.1);
        }

        .custom-dropdown-item:hover {
            background: linear-gradient(90deg, rgba(255, 0, 64, 0.3), rgba(255, 102, 0, 0.2));
            padding-left: 20px;
        }

        .custom-dropdown-item.selected {
            background: linear-gradient(90deg, #ff0040, #ff6600);
            color: #fff;
            font-weight: bold;
        }

        .custom-dropdown-item:last-child {
            border-bottom: none;
        }

        .form-group select option {
            background: #1a0a1f !important;
            color: #fff !important;
            padding: 12px 16px !important;
            font-size: 1rem;
            border-bottom: 1px solid rgba(255, 0, 64, 0.2);
        }

        .form-group select option:hover,
        .form-group select option:focus,
        .form-group select option:checked {
            background: linear-gradient(135deg, #ff0040, #ff6600) !important;
            color: #fff !important;
        }

        .form-group select option:disabled {
            color: rgba(255, 255, 255, 0.4) !important;
            font-style: italic;
        }

        .form-group select optgroup {
            background: #0d0510 !important;
            color: #ff6600 !important;
            font-weight: bold;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 8px 12px !important;
            border-top: 2px solid rgba(255, 102, 0, 0.5);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 80px;
            line-height: 1.5;
        }

        /* Settings Section */
        .settings-section {
            margin-bottom: 2.5rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid rgba(255, 0, 255, 0.2);
            position: relative;
        }

        .settings-section::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100px;
            height: 2px;
            background: linear-gradient(90deg, #00f5ff, #ff00ff);
        }

        .settings-title {
            font-family: 'Black Ops One', cursive;
            font-size: 1.4rem;
            background: linear-gradient(135deg, #ffcc00, #ff6600);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .settings-title::before {
            content: '⚙️';
            font-size: 1.2rem;
        }

        .setting-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.2rem 1.5rem;
            background: linear-gradient(145deg, rgba(0, 0, 0, 0.4), rgba(20, 20, 40, 0.6));
            border: 1px solid rgba(0, 245, 255, 0.15);
            border-radius: 12px;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .setting-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 3px;
            height: 100%;
            background: linear-gradient(180deg, #00f5ff, #ff00ff);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .setting-item:hover {
            background: linear-gradient(145deg, rgba(0, 245, 255, 0.08), rgba(255, 0, 255, 0.08));
            border-color: rgba(0, 245, 255, 0.4);
            transform: translateX(5px);
            box-shadow: 0 5px 25px rgba(0, 245, 255, 0.15);
        }

        .setting-item:hover::before {
            opacity: 1;
        }

        .setting-info {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .setting-name {
            font-family: 'Russo One', sans-serif;
            font-size: 1rem;
            color: white;
            letter-spacing: 0.5px;
        }

        .setting-desc {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.4;
        }

        /* Toggle Switch */
        .toggle-switch {
            position: relative;
            width: 60px;
            height: 30px;
            cursor: pointer;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 30px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .toggle-slider::before {
            content: '';
            position: absolute;
            width: 22px;
            height: 22px;
            left: 2px;
            top: 2px;
            background: linear-gradient(135deg, #ffffff, #e0e0e0);
            border-radius: 50%;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .toggle-switch input:checked + .toggle-slider {
            background: linear-gradient(135deg, #00f5ff, #ff00ff);
            border-color: transparent;
            box-shadow: 0 0 20px rgba(0, 245, 255, 0.5);
        }

        .toggle-switch input:checked + .toggle-slider::before {
            transform: translateX(30px);
            background: linear-gradient(135deg, #ffffff, #ffcc00);
            box-shadow: 0 2px 15px rgba(255, 204, 0, 0.5);
        }

        .setting-select {
            padding: 0.6rem 1.2rem;
            background: rgba(0, 0, 0, 0.5);
            border: 2px solid rgba(0, 245, 255, 0.3);
            border-radius: 8px;
            color: white;
            font-family: 'Barlow Condensed', sans-serif;
            cursor: pointer;
            transition: all 0.3s;
        }

        .setting-select:hover, .setting-select:focus {
            border-color: #00f5ff;
            box-shadow: 0 0 15px rgba(0, 245, 255, 0.3);
        }

        .setting-range {
            width: 120px;
            accent-color: #00f5ff;
            cursor: pointer;
        }

        .range-value {
            font-family: 'Russo One', sans-serif;
            color: #00f5ff;
            min-width: 50px;
            text-align: right;
            text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
        }

        .remap-btn {
            width: 100%;
            padding: 1.2rem;
            background: linear-gradient(135deg, #00f5ff, #ff00ff);
            border: none;
            border-radius: 12px;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            margin-top: 1rem;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .remap-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }

        .remap-btn:hover::before {
            left: 100%;
        }

        .remap-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(0, 245, 255, 0.5);
        }

        .danger-zone {
            margin-top: 2rem;
            padding: 1.8rem;
            background: linear-gradient(145deg, rgba(255, 0, 0, 0.08), rgba(100, 0, 0, 0.15));
            border: 2px solid rgba(255, 68, 68, 0.5);
            border-radius: 16px;
            position: relative;
        }

        .danger-zone::before {
            content: '⚠️';
            position: absolute;
            top: -12px;
            left: 20px;
            background: #1a0a1a;
            padding: 0 10px;
            font-size: 1.2rem;
        }

        .danger-zone h4 {
            font-family: 'Russo One', sans-serif;
            color: #ff4444;
            margin-bottom: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .danger-btn {
            padding: 0.9rem 1.8rem;
            background: transparent;
            border: 2px solid rgba(255, 68, 68, 0.6);
            border-radius: 10px;
            color: #ff6b6b;
            font-family: 'Russo One', sans-serif;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            margin-right: 1rem;
            margin-bottom: 0.5rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .danger-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: linear-gradient(135deg, #ff4444, #ff6b6b);
            transition: width 0.3s;
            z-index: -1;
        }

        .danger-btn:hover::before {
            width: 100%;
        }

        .danger-btn:hover {
            color: white;
            border-color: #ff4444;
            box-shadow: 0 5px 20px rgba(255, 68, 68, 0.4);
        }

        .danger-btn.delete-account-btn {
            background: linear-gradient(135deg, #8B0000, #DC143C);
            border-color: #FF4444;
            color: white;
            margin-top: 1rem;
            display: block;
            width: 100%;
            text-align: center;
        }

        .danger-btn.delete-account-btn:hover {
            background: linear-gradient(135deg, #B22222, #FF4444);
            box-shadow: 0 8px 30px rgba(255, 0, 0, 0.5);
            transform: scale(1.02);
        }

        /* Stats Tab - Enhanced Premium Design */
        .stats-overview {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .stat-box {
            background: linear-gradient(165deg, rgba(0, 0, 0, 0.7), rgba(15, 15, 35, 0.9));
            border: 2px solid transparent;
            border-radius: 20px;
            padding: 1.5rem 1rem;
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            backdrop-filter: blur(10px);
        }

        .stat-box::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 20px;
            padding: 2px;
            background: linear-gradient(135deg, #ff0040, #ff6600, #00f5ff, #ff00ff, #ff0040);
            background-size: 400% 400%;
            animation: statBorderGlow 6s ease infinite;
            -webkit-mask: linear-gradient(#fff 0%, #fff 100%) content-box, linear-gradient(#fff 0%, #fff 100%);
            mask: linear-gradient(#fff 0%, #fff 100%) content-box, linear-gradient(#fff 0%, #fff 100%);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        @keyframes statBorderGlow {
            0%, 100% { background-position: 0% 50%; }
            25% { background-position: 50% 100%; }
            50% { background-position: 100% 50%; }
            75% { background-position: 50% 0%; }
        }

        .stat-box::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 102, 0, 0.1) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.4s;
        }

        .stat-box:hover::after {
            opacity: 1;
        }

        .stat-box:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 15px 40px rgba(255, 102, 0, 0.4), 0 0 30px rgba(255, 0, 64, 0.3);
        }

        .stat-box .stat-icon {
            font-size: 2.8rem;
            display: block;
            margin-bottom: 0.8rem;
            filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.5));
            transition: transform 0.3s;
        }

        .stat-box:hover .stat-icon {
            transform: scale(1.2);
        }

        .stat-box .stat-value {
            font-family: 'Black Ops One', cursive;
            font-size: 2.2rem;
            background: linear-gradient(135deg, #ffcc00, #ff6600);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: block;
            text-shadow: none;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        }

        .stat-box .stat-label {
            font-family: 'Russo One', sans-serif;
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.8);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 0.3rem;
        }

        .recent-games, .favorite-consoles {
            background: linear-gradient(165deg, rgba(0, 0, 0, 0.6), rgba(15, 15, 35, 0.85));
            border: 2px solid transparent;
            border-radius: 20px;
            padding: 1.8rem;
            margin-bottom: 1.5rem;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        .recent-games::before, .favorite-consoles::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 20px;
            padding: 2px;
            background: linear-gradient(135deg, #ff0040, #ff6600, #00f5ff);
            background-size: 200% 200%;
            animation: sectionBorderGlow 5s ease infinite;
            -webkit-mask: linear-gradient(#fff 0%, #fff 100%) content-box, linear-gradient(#fff 0%, #fff 100%);
            mask: linear-gradient(#fff 0%, #fff 100%) content-box, linear-gradient(#fff 0%, #fff 100%);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        @keyframes sectionBorderGlow {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .recent-games h3, .favorite-consoles h3 {
            font-family: 'Russo One', sans-serif;
            font-size: 1.1rem;
            background: linear-gradient(135deg, #ff6600, #ffcc00, #00f5ff);
            background-size: 200% 200%;
            animation: titleGradient 4s ease infinite;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            position: relative;
            padding-left: 16px;
        }

        @keyframes titleGradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .recent-games h3::before, .favorite-consoles h3::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, #ff0040, #ff6600);
            border-radius: 2px;
        }

        .recent-game-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: linear-gradient(145deg, rgba(0, 0, 0, 0.6), rgba(20, 20, 40, 0.8));
            border: 1px solid rgba(255, 0, 64, 0.3);
            border-radius: 14px;
            margin-bottom: 0.8rem;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }

        .recent-game-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.1), transparent);
            transform: translateX(-100%);
            transition: transform 0.5s ease;
        }

        .recent-game-item:hover::before {
            transform: translateX(100%);
        }

        .recent-game-item:hover {
            background: linear-gradient(145deg, rgba(255, 0, 64, 0.15), rgba(255, 102, 0, 0.1));
            border-color: rgba(255, 102, 0, 0.6);
            transform: translateX(8px) scale(1.01);
            box-shadow: 0 8px 25px rgba(255, 0, 64, 0.3), 0 0 20px rgba(255, 102, 0, 0.2);
        }

        .recent-game-item .game-cover-container {
            width: 50px;
            height: 65px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
            background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
            border: 2px solid rgba(255, 102, 0, 0.3);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .recent-game-item .game-cover-container::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.3));
            pointer-events: none;
        }

        .recent-game-item .game-cover-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .recent-game-item:hover .game-cover-container img {
            transform: scale(1.1);
        }

        .recent-game-item .game-cover-container .cover-placeholder {
            font-size: 1.6rem;
            color: rgba(255, 102, 0, 0.6);
        }

        .recent-game-item .game-icon {
            font-size: 2rem;
            width: 50px;
            height: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
            border: 2px solid rgba(255, 102, 0, 0.3);
            border-radius: 8px;
            flex-shrink: 0;
        }

        .recent-game-item .game-details {
            flex: 1;
            min-width: 0;
        }

        .recent-game-item .game-name {
            font-family: 'Russo One', sans-serif;
            display: block;
            font-size: 0.95rem;
            color: #fff;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 4px;
        }

        .recent-game-item .game-console {
            font-size: 0.8rem;
            color: var(--orange);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .recent-game-item .game-console::before {
            content: '•';
            color: var(--red);
        }

        .recent-game-item .game-time {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);
            font-weight: 500;
            background: rgba(0, 0, 0, 0.3);
            padding: 4px 10px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            white-space: nowrap;
        }

        .console-bar {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0.8rem;
            padding: 0.6rem 1rem;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .console-bar:hover {
            background: rgba(255, 102, 0, 0.1);
            transform: translateX(4px);
        }

        .console-bar .console-name {
            font-family: 'Russo One', sans-serif;
            min-width: 80px;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.9);
        }

        .usage-bar {
            flex: 1;
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .usage-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--red), var(--orange), #ffcc00);
            border-radius: 10px;
            transition: width 0.6s ease;
            box-shadow: 0 0 10px rgba(255, 102, 0, 0.5);
        }

        .usage-percent {
            font-family: 'Russo One', sans-serif;
            color: var(--orange);
            min-width: 45px;
            font-size: 0.85rem;
            text-align: right;
        }

        /* Profile Actions */
        .profile-actions {
            display: flex;
            gap: 1rem;
            padding: 1.2rem 24px 1.5rem;
            background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
        }

        .profile-actions::before {
            content: '';
            position: absolute;
            top: 0;
            left: 24px;
            right: 24px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
        }

        .save-profile-btn {
            flex: 1;
            padding: 0.9rem 2rem;
            background: linear-gradient(135deg, #ff0040, #ff6600);
            border: none;
            border-radius: 12px;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(255, 0, 64, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .save-btn-icon, .logout-btn-icon {
            font-size: 1.1rem;
        }

        .save-profile-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .save-profile-btn:hover::before {
            left: 100%;
        }

        .save-profile-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(255, 0, 64, 0.45);
        }

        .save-profile-btn:active {
            transform: translateY(0);
        }

        .logout-btn {
            padding: 0.9rem 1.5rem;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: rgba(255, 255, 255, 0.6);
            font-family: 'Russo One', sans-serif;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .logout-btn:hover {
            border-color: rgba(255, 68, 68, 0.4);
            color: #ff6b6b;
            background: rgba(255, 68, 68, 0.08);
        }

        .logout-btn:active {
            transform: translateY(0);
        }

        /* Responsive for Profile Modal */
        @media (max-width: 768px) {
            .profile-modal-content {
                max-height: 95vh;
                border-radius: 16px;
            }

            .profile-modal-titlebar {
                padding: 16px 16px 0;
            }

            .profile-tabs {
                padding: 12px 16px 0;
            }

            .profile-tabs-track {
                max-width: 100%;
            }

            .profile-tab-content {
                padding: 1rem 16px;
            }

            .profile-header {
                flex-direction: column;
                text-align: center;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .stats-overview {
                grid-template-columns: repeat(2, 1fr);
            }

            .setting-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .profile-actions {
                flex-direction: column;
                padding: 1rem 16px 1.2rem;
            }
        }

        /* Responsive */
        @media (max-width: 1200px) {
            .consoles-grid {
                grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
                gap: 1.2rem;
            }

            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            nav {
                padding: 0.8rem 3%;
                gap: 0.5rem;
            }

            .logo {
                font-size: 1rem;
            }

            .nav-menu {
                position: fixed !important;
                top: 0 !important;
                left: -100% !important;
                width: 85% !important;
                max-width: 320px !important;
                height: 100vh !important;
                height: 100dvh !important;
                background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%) !important;
                flex-direction: column !important;
                justify-content: flex-start !important;
                align-items: stretch !important;
                padding-top: 80px !important;
                padding-bottom: 20px !important;
                gap: 0 !important;
                transition: left 0.3s ease !important;
                border-right: 3px solid #FF2D55 !important;
                display: flex !important;
                visibility: hidden !important;
                opacity: 1 !important;
                pointer-events: none !important;
                overflow-y: auto !important;
                box-shadow: 5px 0 30px rgba(0, 0, 0, 0.8) !important;
                z-index: 49999 !important;
            }

            .nav-menu.active {
                left: 0 !important;
                visibility: visible !important;
                pointer-events: auto !important;
            }

            .nav-menu li {
                width: 100% !important;
                border-bottom: 1px solid rgba(255, 45, 85, 0.2) !important;
                list-style: none !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            .nav-menu li a {
                font-size: 1.2rem !important;
                font-weight: 600 !important;
                padding: 20px 28px !important;
                display: flex !important;
                align-items: center !important;
                gap: 12px !important;
                width: 100% !important;
                color: #ffffff !important;
                text-decoration: none !important;
                pointer-events: auto !important;
                cursor: pointer !important;
                -webkit-tap-highlight-color: rgba(255, 45, 85, 0.3) !important;
                touch-action: manipulation !important;
                -webkit-touch-callout: none !important;
                user-select: none !important;
                position: relative !important;
                z-index: 50001 !important;
                min-height: 60px !important;
                box-sizing: border-box !important;
                background: transparent !important;
                transition: background 0.15s ease, color 0.15s ease !important;
                text-transform: uppercase !important;
                letter-spacing: 1px !important;
            }
            
            .nav-menu li a:hover,
            .nav-menu li a:active,
            .nav-menu li a.active {
                background: rgba(255, 45, 85, 0.25) !important;
                color: #FF2D55 !important;
            }
            
            .nav-menu li a:active {
                background: rgba(255, 45, 85, 0.5) !important;
                transform: scale(0.98) !important;
            }

            .mobile-menu-btn {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                font-size: 1.8rem !important;
                width: 48px !important;
                height: 48px !important;
                padding: 0 !important;
                z-index: 50000 !important;
                position: relative !important;
                background: #FF2D55 !important;
                border: none !important;
                color: white !important;
                border-radius: 10px !important;
                cursor: pointer !important;
                pointer-events: auto !important;
                -webkit-tap-highlight-color: transparent !important;
                box-shadow: 0 4px 15px rgba(255, 45, 85, 0.4) !important;
            }
            
            .mobile-menu-btn:active {
                background: #cc2445 !important;
                color: white !important;
                transform: scale(0.92) !important;
            }
            
            /* Mobile Menu Overlay */
            .mobile-menu-overlay {
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                height: 100dvh;
                background: rgba(0, 0, 0, 0.85);
                z-index: 49998;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
                pointer-events: none;
                -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
            }
            
            .mobile-menu-overlay.active {
                opacity: 1 !important;
                visibility: visible !important;
                pointer-events: auto !important;
            }

            /* Hide old nav-menu on mobile */
            .nav-menu {
                display: none !important;
            }

            /* ========== NEW MOBILE MENU STYLES ========== */
            .new-mobile-menu {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                height: 100dvh;
                background: linear-gradient(135deg, #1a0a0a 0%, #0d0d0d 50%, #1a0505 100%);
                z-index: 90000;
                display: none;
                flex-direction: column;
                opacity: 0;
                visibility: hidden;
                transform: translateX(-100%);
                transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .new-mobile-menu.active {
                display: flex !important;
                opacity: 1 !important;
                visibility: visible !important;
                transform: translateX(0) !important;
            }

            .new-mobile-menu-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px 24px;
                border-bottom: 2px solid #FF2D55;
                background: rgba(255, 45, 85, 0.1);
            }

            .new-mobile-logo {
                font-size: 1.5rem;
                font-weight: 800;
                color: #FF2D55;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .new-mobile-logo .logo-icon {
                font-size: 1.2rem;
            }

            .new-mobile-close {
                width: 44px;
                height: 44px;
                border: none;
                background: #FF2D55;
                color: white;
                font-size: 1.5rem;
                border-radius: 12px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s ease;
            }

            .new-mobile-close:active {
                transform: scale(0.9);
                background: #cc2244;
            }

            .new-mobile-menu-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding: 20px 16px;
                gap: 8px;
                overflow-y: auto;
            }

            .new-mobile-link {
                display: flex;
                align-items: center;
                gap: 16px;
                padding: 18px 20px;
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 45, 85, 0.2);
                border-radius: 16px;
                color: white;
                text-decoration: none;
                font-size: 1.1rem;
                font-weight: 600;
                transition: all 0.2s ease;
                position: relative;
            }

            .new-mobile-link:active {
                background: rgba(255, 45, 85, 0.3);
                transform: scale(0.98);
                border-color: #FF2D55;
            }

            .new-mobile-icon {
                font-size: 1.5rem;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(255, 45, 85, 0.15);
                border-radius: 12px;
            }

            .new-mobile-text {
                flex: 1;
                text-transform: uppercase;
                letter-spacing: 1px;
            }

            .new-mobile-badge {
                padding: 4px 10px;
                border-radius: 20px;
                font-size: 0.7rem;
                font-weight: 700;
                text-transform: uppercase;
            }

            .new-mobile-badge.live {
                background: #00ff88;
                color: #000;
                animation: pulse-badge 1.5s infinite;
            }

            @keyframes pulse-badge {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.6; }
            }

            .new-mobile-menu-footer {
                display: flex;
                gap: 12px;
                padding: 20px 16px;
                border-top: 1px solid rgba(255, 45, 85, 0.2);
            }

            .new-mobile-social {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 14px;
                border-radius: 12px;
                text-decoration: none;
                font-weight: 600;
                font-size: 0.9rem;
                transition: all 0.2s ease;
            }

            .new-mobile-social.discord {
                background: #5865F2;
                color: white;
            }

            .new-mobile-social.coffee {
                background: #FFDD00;
                color: #000;
            }

            .new-mobile-social:active {
                transform: scale(0.95);
            }
            /* ========== END NEW MOBILE MENU ========== */

            /* ========== MOBILE GAMES MODAL ========== */
            .mobile-games-modal {
                position: fixed !important;
                inset: 0 !important;
                width: 100% !important;
                height: 100vh !important;
                max-width: 100% !important;
                max-height: 100vh !important;
                background: linear-gradient(180deg, #0a0a0f 0%, #1a0a15 50%, #0d0d12 100%);
                z-index: 99000 !important;
                display: none !important;
                flex-direction: column;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
                pointer-events: none;
                margin: 0 !important;
                padding: 0 !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
            }

            .mobile-games-modal.active {
                display: flex !important;
                opacity: 1 !important;
                visibility: visible !important;
                pointer-events: auto !important;
            }

            .mobile-games-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 16px 20px;
                background: linear-gradient(135deg, rgba(255, 45, 85, 0.15), rgba(255, 102, 0, 0.1));
                border-bottom: 2px solid #FF2D55;
                flex-shrink: 0;
            }

            .mobile-games-title {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .mobile-games-title .console-icon {
                font-size: 2rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .mobile-games-title h2 {
                font-family: 'Black Ops One', cursive;
                font-size: 1.3rem;
                color: #FF2D55;
                margin: 0;
            }

            .mobile-games-title .game-count {
                font-size: 0.75rem;
                color: rgba(255, 255, 255, 0.6);
                font-family: 'Russo One', sans-serif;
            }

            .mobile-games-close {
                width: 44px;
                height: 44px;
                border: none;
                background: #FF2D55;
                color: white;
                font-size: 1.5rem;
                border-radius: 12px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s ease;
                -webkit-tap-highlight-color: transparent;
            }

            .mobile-games-close:active {
                transform: scale(0.9);
                background: #cc2244;
            }

            .mobile-games-search {
                padding: 12px 16px;
                background: rgba(0, 0, 0, 0.3);
                border-bottom: 1px solid rgba(255, 45, 85, 0.2);
                flex-shrink: 0;
            }

            .mobile-games-search input {
                width: 100%;
                padding: 14px 16px;
                background: rgba(255, 255, 255, 0.08);
                border: 2px solid rgba(255, 102, 0, 0.3);
                border-radius: 12px;
                color: white;
                font-size: 1rem;
                font-family: 'Russo One', sans-serif;
                outline: none;
                -webkit-appearance: none;
                appearance: none;
            }

            .mobile-games-search input::placeholder {
                color: rgba(255, 255, 255, 0.4);
            }

            .mobile-games-search input:focus {
                border-color: #FF6600;
                background: rgba(255, 255, 255, 0.12);
            }

            .mobile-games-grid {
                flex: 1;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                padding: 16px;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
                align-content: start;
            }

            .mobile-game-card {
                background: linear-gradient(145deg, rgba(30, 20, 35, 0.9), rgba(20, 15, 25, 0.95));
                border: 1px solid rgba(255, 45, 85, 0.2);
                border-radius: 12px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                transition: all 0.2s ease;
                -webkit-tap-highlight-color: transparent;
            }

            .mobile-game-card:active {
                transform: scale(0.97);
                border-color: #FF2D55;
            }

            .mobile-game-cover {
                width: 100%;
                aspect-ratio: 4/3;
                object-fit: cover;
                background: rgba(0, 0, 0, 0.5);
            }

            .mobile-game-info {
                padding: 10px;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .mobile-game-name {
                font-family: 'Russo One', sans-serif;
                font-size: 0.75rem;
                color: white;
                line-height: 1.3;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                min-height: 2.6em;
            }

            .mobile-game-actions {
                display: flex;
                gap: 8px;
            }

            .mobile-game-play {
                flex: 1;
                padding: 10px;
                background: linear-gradient(135deg, #FF2D55, #FF6600);
                border: none;
                border-radius: 8px;
                color: white;
                font-family: 'Russo One', sans-serif;
                font-size: 0.8rem;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                min-height: 44px;
                -webkit-tap-highlight-color: transparent;
            }

            .mobile-game-play:active {
                transform: scale(0.95);
                filter: brightness(0.9);
            }

            .mobile-game-fav {
                width: 44px;
                height: 44px;
                background: rgba(255, 204, 0, 0.15);
                border: 2px solid #FFCC00;
                border-radius: 8px;
                color: #FFCC00;
                font-size: 1.1rem;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                -webkit-tap-highlight-color: transparent;
            }

            .mobile-game-fav:active {
                transform: scale(0.9);
                background: rgba(255, 204, 0, 0.3);
            }

            .mobile-game-fav.favorited {
                background: #FFCC00;
                color: #000;
            }

            .mobile-games-empty {
                grid-column: 1 / -1;
                text-align: center;
                padding: 40px 20px;
                color: rgba(255, 255, 255, 0.5);
            }

            .mobile-games-empty .empty-icon {
                font-size: 3rem;
                margin-bottom: 15px;
            }

            .mobile-games-loading {
                grid-column: 1 / -1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 60px 20px;
                gap: 15px;
            }

            .mobile-games-loading .spinner {
                width: 40px;
                height: 40px;
                border: 3px solid rgba(255, 45, 85, 0.2);
                border-top-color: #FF2D55;
                border-radius: 50%;
                animation: spin 0.8s linear infinite;
            }

            @keyframes spin {
                to { transform: rotate(360deg); }
            }
            /* ========== END MOBILE GAMES MODAL ========== */

            /* ========== STORE MODAL MOBILE STYLES ========== */
            #storeModal {
                padding: 0 !important;
            }
            
            #storeModal > div {
                padding: 12px !important;
                max-width: 100% !important;
            }
            
            /* Store Header Mobile */
            #storeModal > div > div:first-child {
                padding: 12px 15px !important;
                margin-bottom: 15px !important;
                flex-direction: column !important;
                gap: 12px !important;
                text-align: center !important;
            }
            
            #storeModal h2 {
                font-size: 1.4rem !important;
            }
            
            #storeModal > div > div:first-child > div:first-child p {
                font-size: 0.8rem !important;
            }
            
            #storeModal > div > div:first-child button {
                position: absolute !important;
                top: 10px !important;
                right: 10px !important;
                width: 40px !important;
                height: 40px !important;
                font-size: 1.2rem !important;
            }
            
            /* Store Grid - Stack on Mobile */
            #storeModal > div > div:nth-child(2) {
                display: flex !important;
                flex-direction: column !important;
                gap: 20px !important;
            }
            
            /* Preview Section Mobile */
            #storeModal > div > div:nth-child(2) > div:first-child {
                position: relative !important;
                top: 0 !important;
                width: 100% !important;
            }
            
            #storePreviewContainer {
                height: 250px !important;
            }
            
            #storePreviewAvatar {
                width: 70px !important;
                height: 70px !important;
                font-size: 35px !important;
            }
            
            #storePreviewName {
                font-size: 1.2rem !important;
            }
            
            /* Category Tabs Mobile */
            #storeModal .store-tab,
            #storeModal [data-store-tab] {
                padding: 10px 14px !important;
                font-size: 0.75rem !important;
                flex: 1 !important;
                min-width: auto !important;
                text-align: center !important;
            }
            
            /* Store Items Grid Mobile */
            #storeTabBackgrounds,
            #storeTabBorders,
            #storeTabEffects,
            #storeTabChatEffects,
            .store-tab-content {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 10px !important;
            }
            
            /* Store Item Cards Mobile */
            .store-item {
                padding: 10px !important;
            }
            
            .store-item > div:first-child {
                height: 80px !important;
            }
            
            .store-item h4 {
                font-size: 0.85rem !important;
                margin-bottom: 3px !important;
            }
            
            .store-item p {
                font-size: 0.7rem !important;
                margin-bottom: 6px !important;
                display: -webkit-box !important;
                -webkit-line-clamp: 1 !important;
                line-clamp: 1 !important;
                -webkit-box-orient: vertical !important;
                overflow: hidden !important;
            }
            
            .store-item span {
                font-size: 0.65rem !important;
                padding: 3px 8px !important;
            }
            /* ========== END STORE MODAL MOBILE ========== */

            /* ========== PROFILE MODAL MOBILE STYLES ========== */
            #profileModal {
                padding: 10px !important;
            }
            
            .profile-modal-content {
                padding: 15px !important;
                max-height: 90vh !important;
                overflow-y: auto !important;
            }
            
            .profile-header {
                flex-direction: column !important;
                text-align: center !important;
                gap: 15px !important;
            }
            
            .profile-avatar-section {
                margin-right: 0 !important;
            }
            
            .profile-avatar {
                width: 80px !important;
                height: 80px !important;
            }
            
            .profile-info h2 {
                font-size: 1.3rem !important;
            }
            
            .profile-stats {
                justify-content: center !important;
                flex-wrap: wrap !important;
            }
            
            .profile-tabs {
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                gap: 5px !important;
                padding-bottom: 5px !important;
            }
            
            .profile-tab-btn {
                padding: 8px 12px !important;
                font-size: 0.75rem !important;
                white-space: nowrap !important;
            }
            
            .profile-section-title {
                font-size: 1rem !important;
            }
            
            .profile-actions {
                flex-direction: column !important;
                gap: 10px !important;
            }
            
            .profile-actions button {
                width: 100% !important;
            }
            /* ========== END PROFILE MODAL MOBILE ========== */

            /* ========== OTHER MODALS MOBILE ========== */
            .modal-content,
            .subscription-modal-content {
                width: 95% !important;
                max-width: 100% !important;
                margin: 10px !important;
                padding: 15px !important;
                max-height: 90vh !important;
                overflow-y: auto !important;
            }
            /* ========== END OTHER MODALS ========== */

            .search-container {
                display: none !important;
            }
            
            /* Navbar compact mobile */
            nav {
                padding: 10px 12px !important;
            }
            
            .navbar-right-area {
                gap: 6px !important;
            }
            
            .discord-nav-btn,
            .coffee-nav-btn {
                display: none !important;
            }

            .auth-btn {
                padding: 0.4rem 0.8rem !important;
                font-size: 0.7rem !important;
            }

            .nav-favorites-btn {
                padding: 0.3rem 0.6rem !important;
            }

            .nav-favorites-btn span:not(.nav-fav-icon):not(.nav-fav-count) {
                display: none;
            }

            .nav-fav-count {
                font-size: 0.6rem !important;
                padding: 1px 4px !important;
                min-width: 16px !important;
            }

            .hero {
                min-height: auto;
                padding: 70px 4% 30px;
                margin-top: 0 !important;
            }

            .hero-content {
                padding-top: 10px;
            }

            .hero-title {
                font-size: clamp(2.2rem, 14vw, 4.5rem);
                letter-spacing: 3px;
                text-shadow: 
                    2px 2px 0 var(--orange),
                    4px 4px 0 var(--yellow),
                    6px 6px 0 rgba(0, 0, 0, 0.4),
                    0 0 30px var(--red);
            }

            .hero-subtitle {
                font-size: 0.95rem;
                letter-spacing: 2px;
                margin-bottom: 1.5rem;
            }

            .hero-badge {
                font-size: 0.65rem;
                padding: 0.5rem 1.2rem;
                letter-spacing: 1.5px;
                margin-bottom: 1rem;
            }

            .hero-cta {
                flex-direction: column;
                gap: 0.8rem;
                align-items: center;
            }

            .hero-cta-with-support {
                gap: 0.65rem;
            }

            .game-btn {
                width: 100%;
                max-width: 220px;
                padding: 0.9rem 1.5rem;
                font-size: 0.85rem;
                letter-spacing: 1.5px;
            }

            .hero-support {
                width: min(100%, 260px);
                margin: 0;
            }

            .hero-support-btn {
                width: 100%;
                min-width: 0;
                min-height: 52px;
                padding: 0.68rem 1rem;
                font-size: 0.72rem;
                letter-spacing: 1px;
            }

            .hero-support-subtitle {
                font-size: 0.5rem;
                letter-spacing: 0.8px;
            }
            
            /* Reduce animation intensity on mobile */
            .hero-title {
                animation: none;
            }
            
            .hero-subtitle {
                animation: none;
            }
            
            .hero-badge {
                animation: none;
            }

            .consoles-section,
            .features-section {
                padding: 3rem 2%;
            }

            .section-heading {
                font-size: clamp(1.8rem, 8vw, 3rem);
            }

            .section-subtext {
                font-size: 0.8rem;
                letter-spacing: 1px;
            }

            .section-label {
                font-size: 0.65rem;
                padding: 0.3rem 1rem;
                letter-spacing: 3px;
            }

            .section-header {
                margin-bottom: 2rem;
            }

            .consoles-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.75rem;
                padding: 0 0.5rem;
            }

            .console-item {
                padding: 1.2rem 0.8rem 1rem;
                border-radius: 16px;
            }

            .console-item:hover {
                transform: translateY(-5px);
            }

            .console-icon-box {
                height: 65px;
                margin-bottom: 0.8rem;
            }

            .console-icon-box img {
                max-height: 65px;
            }

            .console-title {
                font-size: 0.85rem;
                letter-spacing: 1px;
            }

            .console-subtitle {
                font-size: 0.6rem;
                margin-bottom: 0.7rem;
            }

            .console-year-tag {
                padding: 0.2rem 0.45rem;
                font-size: 0.5rem;
                top: 8px;
                right: 8px;
            }

            .console-launch-btn {
                padding: 0.55rem 0.7rem;
                font-size: 0.65rem;
                letter-spacing: 1px;
                border-radius: 10px;
            }

            .game-count-badge {
                font-size: 0.6rem;
                padding: 0.15rem 0.4rem;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .back-to-top {
                bottom: 15px;
                right: 15px;
                width: 45px;
                height: 45px;
                font-size: 1.2rem;
            }

            /* Hide game icons on mobile */
            .game-icons,
            .powerups {
                display: none;
            }
        }

        /* Small phones */
        @media (max-width: 480px) {
            nav {
                padding: 0.6rem 2%;
            }

            .logo {
                font-size: 0.85rem;
            }

            .auth-btn {
                padding: 0.3rem 0.6rem !important;
                font-size: 0.65rem !important;
            }

            .hero {
                min-height: auto;
                padding: 65px 4% 25px;
                margin-top: 0 !important;
            }
            
            .hero-content {
                padding-top: 5px;
            }

            .hero-title {
                font-size: clamp(1.8rem, 12vw, 3rem);
                letter-spacing: 2px;
                line-height: 1;
                text-shadow: 
                    2px 2px 0 var(--orange),
                    3px 3px 0 var(--yellow),
                    4px 4px 0 rgba(0, 0, 0, 0.4),
                    0 0 20px var(--red);
            }
            
            .hero-subtitle {
                font-size: 0.8rem;
                letter-spacing: 1.5px;
            }
            
            .hero-badge {
                font-size: 0.55rem;
                padding: 0.4rem 1rem;
                letter-spacing: 1px;
            }
            
            .game-btn {
                max-width: 180px;
                padding: 0.8rem 1.2rem;
                font-size: 0.75rem;
            }

            .consoles-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.8rem;
            }

            .console-item {
                padding: 0.8rem;
            }

            .console-icon-box {
                height: 50px;
                margin-bottom: 0.6rem;
            }

            .console-icon-box img {
                max-height: 50px;
            }

            .console-title {
                font-size: 0.8rem;
            }

            .console-subtitle {
                font-size: 0.6rem;
            }

            .console-launch-btn {
                padding: 0.5rem 0.6rem;
                font-size: 0.65rem;
            }

            .section-heading {
                font-size: clamp(1.5rem, 7vw, 2.5rem);
            }
        }

        /* Landscape mobile */
        @media (max-height: 500px) and (orientation: landscape) {
            .hero {
                min-height: auto;
                padding: 60px 4% 20px;
                margin-top: 0 !important;
            }

            .hero-content {
                padding-top: 5px;
            }
        }

        /* Tablet */
        @media (min-width: 769px) and (max-width: 1024px) {
            .consoles-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 1.2rem;
            }

            .console-item {
                padding: 1.2rem;
            }

            .console-icon-box {
                height: 70px;
            }

            .console-title {
                font-size: 1.1rem;
            }
        }

        /* Large desktop */
        @media (min-width: 1400px) {
            .consoles-grid {
                grid-template-columns: repeat(6, 1fr);
                max-width: 1600px;
            }
        }

        /* Touch device optimizations */
        @media (hover: none) and (pointer: coarse) {
            .console-item:hover {
                transform: none;
            }

            .console-item:active {
                transform: scale(0.98);
                border-color: var(--orange);
            }

            .console-launch-btn:hover {
                transform: none;
            }

            .console-launch-btn:active {
                transform: scale(0.95);
                background: linear-gradient(135deg, var(--orange), var(--yellow));
            }
        }

        /* ============================================
           LIVE STREAMS PANEL SYSTEM
        ============================================ */
        
        /* Live Dot Indicator - CSS only, no emoji */
        .live-dot-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #EF4444;
            border-radius: 50%;
            margin-right: 8px;
            animation: liveDotPulse 1.5s ease-in-out infinite;
            box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
        }
        
        @keyframes liveDotPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.7; }
        }
        
        /* Banner icons - CSS only */
        .banner-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }
        
        .banner-icon.maintenance-icon::before {
            content: '';
            width: 18px;
            height: 18px;
            background: currentColor;
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            -webkit-mask-size: contain;
        }
        
        .banner-icon.announcement-icon::before {
            content: '';
            width: 18px;
            height: 18px;
            background: currentColor;
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E");
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E");
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            -webkit-mask-size: contain;
        }
        
        /* Live Streams Toggle Button - Fixed Left */
        .live-streams-toggle {
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 9998;
            background: linear-gradient(135deg, #EF4444, #DC2626);
            border: none;
            border-radius: 0 12px 12px 0;
            padding: 15px 12px;
            cursor: pointer;
            box-shadow: 0 5px 25px rgba(239, 68, 68, 0.5);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .live-streams-toggle:hover {
            padding-left: 20px;
            box-shadow: 0 8px 35px rgba(239, 68, 68, 0.7);
        }

        .live-streams-toggle.has-streams {
            animation: liveButtonPulse 2s ease-in-out infinite;
        }

        @keyframes liveButtonPulse {
            0%, 100% { box-shadow: 0 5px 25px rgba(239, 68, 68, 0.5); }
            50% { box-shadow: 0 5px 35px rgba(239, 68, 68, 0.8), 0 0 20px rgba(239, 68, 68, 0.4); }
        }

        .live-toggle-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .live-toggle-icon svg {
            width: 22px;
            height: 22px;
        }

        .live-toggle-dot {
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            animation: liveDotBlink 1s ease-in-out infinite;
        }

        @keyframes liveDotBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        .live-toggle-count {
            background: #fff;
            color: #EF4444;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 10px;
            min-width: 20px;
            text-align: center;
        }

        .live-toggle-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            color: white;
            font-family: 'Russo One', sans-serif;
            font-size: 0.7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* Live Streams Panel */
        .live-streams-panel {
            position: fixed;
            left: -400px;
            top: 0;
            width: 380px;
            height: 100vh;
            background: linear-gradient(180deg, rgba(13, 13, 13, 0.98), rgba(30, 0, 0, 0.95));
            border-right: 3px solid #EF4444;
            z-index: 9999;
            transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            box-shadow: 10px 0 50px rgba(239, 68, 68, 0.3);
        }

        .live-streams-panel.open {
            left: 0;
        }

        .live-streams-panel-header {
            position: sticky;
            top: 0;
            background: linear-gradient(180deg, rgba(13, 13, 13, 0.99), rgba(13, 13, 13, 0.95));
            padding: 20px;
            border-bottom: 2px solid rgba(239, 68, 68, 0.3);
            z-index: 10;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .live-streams-title {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .live-streams-title h3 {
            font-family: 'Black Ops One', cursive;
            font-size: 1.3rem;
            color: white;
            margin: 0;
        }

        .live-badge-header {
            display: flex;
            align-items: center;
            gap: 6px;
            background: #EF4444;
            padding: 4px 10px;
            border-radius: 15px;
            font-size: 0.7rem;
            font-weight: 700;
            color: white;
        }

        .live-badge-dot {
            width: 8px;
            height: 8px;
            background: white;
            border-radius: 50%;
            animation: liveDotBlink 1s ease-in-out infinite;
        }

        .close-live-panel {
            background: rgba(239, 68, 68, 0.2);
            border: 2px solid #EF4444;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-live-panel:hover {
            background: #EF4444;
            transform: rotate(90deg);
        }

        .live-streams-content {
            padding: 15px;
        }

        .live-stream-card {
            background: rgba(239, 68, 68, 0.08);
            border: 2px solid rgba(239, 68, 68, 0.3);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .multiplayer-room-card {
            border-color: rgba(16, 185, 129, 0.4);
            background: rgba(16, 185, 129, 0.08);
        }

        .multiplayer-room-card:hover {
            border-color: rgba(16, 185, 129, 0.8);
            background: rgba(16, 185, 129, 0.15);
            box-shadow: 0 5px 20px rgba(16, 185, 129, 0.35);
        }

        .multiplayer-badge-panel {
            margin-left: auto;
            background: rgba(16, 185, 129, 0.15);
            border: 1px solid rgba(16, 185, 129, 0.4);
            border-radius: 50px;
            padding: 6px 12px;
            font-size: 0.8rem;
            font-weight: 600;
            color: #34d399;
        }

        .live-stream-card:hover {
            border-color: #EF4444;
            background: rgba(239, 68, 68, 0.15);
            transform: translateX(5px);
            box-shadow: 0 5px 20px rgba(239, 68, 68, 0.3);
        }

        .live-stream-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .live-streamer-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: linear-gradient(135deg, #EF4444, var(--orange));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            border: 2px solid #EF4444;
            overflow: hidden;
        }

        .live-streamer-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .live-streamer-info {
            flex: 1;
        }

        .live-streamer-name {
            font-family: 'Russo One', sans-serif;
            font-size: 0.95rem;
            color: white;
            margin-bottom: 2px;
        }

        .live-stream-time {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.5);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .live-stream-game {
            background: rgba(0, 0, 0, 0.4);
            border-radius: 8px;
            padding: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .live-game-cover {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            background: linear-gradient(135deg, var(--red), var(--orange));
            object-fit: cover;
        }

        .live-game-info {
            flex: 1;
        }

        .live-game-name {
            font-size: 0.9rem;
            font-weight: 600;
            color: white;
            margin-bottom: 3px;
        }

        .live-game-console {
            font-size: 0.75rem;
            color: #EF4444;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .live-watch-btn {
            background: linear-gradient(135deg, #EF4444, #DC2626);
            border: none;
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .live-watch-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(239, 68, 68, 0.5);
        }

        .no-streams-message {
            text-align: center;
            padding: 40px 20px;
            color: rgba(255, 255, 255, 0.5);
        }

        .no-streams-icon {
            font-size: 4rem;
            margin-bottom: 15px;
            opacity: 0.5;
        }

        .no-streams-text {
            font-family: 'Russo One', sans-serif;
            font-size: 1rem;
            margin-bottom: 8px;
        }

        .no-streams-subtext {
            font-size: 0.85rem;
        }

        /* ========================================
           LIVE STREAMS CAROUSEL / NAVIGATION
           ======================================== */
        .streams-list-container {
            max-height: calc(100vh - 150px);
            overflow-y: auto;
            padding: 5px;
        }

        .streams-count-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), transparent);
            border-radius: 10px;
            margin-bottom: 10px;
            border: 1px solid rgba(239, 68, 68, 0.15);
        }

        .streams-count-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .streams-count-badge {
            background: linear-gradient(135deg, #EF4444, #DC2626);
            color: white;
            font-weight: 700;
            font-size: 0.85rem;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);
        }

        .streams-count-text {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.75rem;
        }

        .streams-nav-dots {
            display: flex;
            gap: 5px;
        }

        .stream-nav-dot {
            width: 8px;
            height: 8px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s;
        }

        .stream-nav-dot:hover,
        .stream-nav-dot.active {
            background: #EF4444;
            transform: scale(1.15);
        }

        .stream-card-featured {
            position: relative;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(255, 100, 50, 0.05));
            border: 1px solid rgba(239, 68, 68, 0.4);
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 10px;
            transition: all 0.3s ease;
        }

        .stream-card-featured:hover {
            border-color: #EF4444;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.25);
        }

        .stream-card-featured .stream-thumbnail-large {
            width: 100%;
            height: 100px;
            object-fit: cover;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(255, 100, 50, 0.15));
            position: relative;
        }

        .stream-card-featured .live-badge-overlay {
            position: absolute;
            top: 8px;
            left: 8px;
            display: flex;
            align-items: center;
            gap: 4px;
            background: rgba(239, 68, 68, 0.95);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.65rem;
            font-weight: 700;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
        }

        .stream-card-featured .live-badge-dot {
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
            animation: liveDotBlink 1s infinite;
        }

        .stream-card-featured .viewers-badge-overlay {
            position: absolute;
            top: 8px;
            right: 8px;
            display: flex;
            align-items: center;
            gap: 4px;
            background: rgba(0, 0, 0, 0.75);
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            color: white;
            backdrop-filter: blur(8px);
        }

        .stream-card-featured .stream-card-content {
            padding: 10px;
        }

        .stream-card-featured .streamer-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .stream-card-featured .streamer-avatar-large {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #EF4444, #FF6B35);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: 700;
            color: white;
            border: 2px solid #EF4444;
            overflow: hidden;
            flex-shrink: 0;
        }

        .stream-card-featured .streamer-avatar-large img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .stream-card-featured .streamer-details {
            flex: 1;
            min-width: 0;
        }

        .stream-card-featured .streamer-name-large {
            font-family: 'Russo One', sans-serif;
            font-size: 0.85rem;
            color: white;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .stream-card-featured .online-status {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.7rem;
            color: #10B981;
        }

        .stream-card-featured .online-status::before {
            content: '';
            width: 6px;
            height: 6px;
            background: #10B981;
            border-radius: 50%;
        }

        .stream-card-featured .game-info-row {
            background: rgba(0, 0, 0, 0.25);
            border-radius: 8px;
            padding: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stream-card-featured .game-cover-small {
            width: 36px;
            height: 48px;
            border-radius: 4px;
            object-fit: cover;
            background: linear-gradient(135deg, #333, #222);
        }

        .stream-card-featured .game-details {
            flex: 1;
            min-width: 0;
        }

        .stream-card-featured .game-name-large {
            font-size: 0.8rem;
            font-weight: 600;
            color: white;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 3px;
        }

        .stream-card-featured .game-console-tag {
            display: inline-block;
            background: rgba(239, 68, 68, 0.2);
            color: #EF4444;
            font-size: 0.6rem;
            padding: 2px 8px;
            border-radius: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .stream-card-featured .watch-btn-large {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            margin-top: 8px;
            padding: 8px 14px;
            background: linear-gradient(135deg, #EF4444, #DC2626);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .stream-card-featured .watch-btn-large:hover {
            background: linear-gradient(135deg, #FF5555, #EF4444);
            transform: scale(1.02);
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
        }

        /* Streams Section Divider */
        .streams-section-divider {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 15px 0;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.8rem;
        }

        .streams-section-divider::before,
        .streams-section-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        }

        /* ========================================
           LIVE STREAM WATCH MODAL - IMPROVED
           ======================================== */
        .live-watch-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.97);
            z-index: 10001;
            display: none;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .live-watch-modal.active {
            display: flex;
        }

        .live-watch-container {
            width: 100%;
            max-width: 1400px;
            height: 90vh;
            max-height: 900px;
            background: linear-gradient(135deg, rgba(13, 13, 13, 0.98), rgba(30, 0, 0, 0.95));
            border: 3px solid #EF4444;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 80px rgba(239, 68, 68, 0.4);
            display: flex;
            flex-direction: column;
        }

        .live-watch-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: linear-gradient(90deg, rgba(239, 68, 68, 0.15), rgba(0, 0, 0, 0.5));
            border-bottom: 2px solid rgba(239, 68, 68, 0.3);
            flex-shrink: 0;
        }

        .live-watch-info {
            display: flex;
            align-items: center;
            gap: 15px;
            flex: 1;
            min-width: 0;
        }

        .live-badge-header {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.3));
            padding: 6px 14px;
            border-radius: 20px;
            border: 2px solid #EF4444;
            font-size: 0.8rem;
            font-weight: 700;
            color: white;
            text-transform: uppercase;
            letter-spacing: 1px;
            animation: liveBadgePulse 2s infinite;
        }

        @keyframes liveBadgePulse {
            0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }
            50% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.8); }
        }

        .live-badge-dot {
            width: 10px;
            height: 10px;
            background: #EF4444;
            border-radius: 50%;
            animation: liveDotBlink 1s infinite;
        }

        @keyframes liveDotBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        .live-watch-streamer {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .live-streamer-name {
            font-family: 'Russo One', sans-serif;
            font-size: 1.1rem;
            color: white;
        }

        .live-game-console {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.7);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .live-watch-close {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: white;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.4rem;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .live-watch-close:hover {
            background: #EF4444;
            border-color: #EF4444;
            transform: rotate(90deg);
        }

        /* Main Content Area */
        .live-watch-main {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

        /* Video Player Section */
        .live-watch-video-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .live-watch-player {
            flex: 1;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            /* Prevent white flash during transitions */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Ensure black background on all platforms */
            min-height: 200px;
        }

        .live-watch-player video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #000;
            /* Prevent flashing during stream updates */
            transition: none;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transform: translateZ(0);
            will-change: contents;
            /* Mobile-specific fixes - playsinline is HTML attribute, not CSS */
            /* Force GPU acceleration */
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        
        .live-watch-player #videoContainer {
            width: 100%;
            height: 100%;
            background: #000;
            position: relative;
            /* Ensure container fills parent */
            min-height: inherit;
        }

        .live-watch-placeholder {
            text-align: center;
            color: rgba(255, 255, 255, 0.5);
            padding: 40px;
        }

        .live-watch-placeholder-icon {
            font-size: 5rem;
            margin-bottom: 15px;
            animation: placeholderPulse 2s infinite;
        }

        @keyframes placeholderPulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.1); opacity: 1; }
        }

        .live-watch-placeholder-text {
            font-size: 1.1rem;
            margin-bottom: 10px;
        }

        .live-watch-placeholder-sub {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.4);
        }

        /* Quality Indicator inside player */
        .live-quality-indicator {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.8);
            padding: 8px 14px;
            border-radius: 10px;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 8px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .quality-status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #22C55E;
        }

        .quality-status-dot.connecting {
            background: #F59E0B;
            animation: liveDotBlink 1s infinite;
        }

        .quality-status-dot.error {
            background: #EF4444;
        }

        /* Footer with stream info and controls */
        .live-watch-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(239, 68, 68, 0.1));
            border-top: 1px solid rgba(239, 68, 68, 0.2);
            flex-shrink: 0;
        }

        .live-watch-streamer-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .live-watch-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 3px solid #EF4444;
            object-fit: cover;
            box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
        }

        .live-watch-streamer-details {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .live-watch-streamer-name {
            font-weight: 700;
            font-size: 1rem;
            color: white;
        }

        .live-watch-game-info {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.7);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .live-watch-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .live-action-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 18px;
            border-radius: 25px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }

        .live-action-btn.p2p {
            background: linear-gradient(135deg, #22C55E, #16A34A);
            color: white;
        }

        .live-action-btn.live {
            background: linear-gradient(135deg, #EF4444, #DC2626);
            color: white;
            animation: liveButtonPulse 2s infinite;
        }

        @keyframes liveButtonPulse {
            0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
            50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6); }
        }

        .live-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }

        /* Chat Section */
        .live-watch-chat-section {
            width: 380px;
            min-width: 320px;
            max-width: 400px;
            background: linear-gradient(180deg, rgba(20, 10, 15, 0.98), rgba(10, 5, 8, 0.98));
            border-left: 2px solid rgba(239, 68, 68, 0.3);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .live-watch-chat-header {
            padding: 15px 18px;
            background: linear-gradient(90deg, rgba(239, 68, 68, 0.15), rgba(255, 102, 0, 0.08));
            border-bottom: 1px solid rgba(239, 68, 68, 0.3);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .live-watch-chat-title {
            font-size: 1rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .live-watch-viewers {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);
            background: rgba(0, 0, 0, 0.3);
            padding: 4px 10px;
            border-radius: 10px;
        }

        .live-watch-chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }

        /* ========== LIVE WATCH CHAT MESSAGE STYLES ========== */
        .live-watch-chat-container .stream-chat-messages {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 12px 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            scroll-behavior: smooth;
        }

        /* Custom scrollbar for chat */
        .live-watch-chat-container .stream-chat-messages::-webkit-scrollbar {
            width: 6px;
        }

        .live-watch-chat-container .stream-chat-messages::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 3px;
        }

        .live-watch-chat-container .stream-chat-messages::-webkit-scrollbar-thumb {
            background: rgba(239, 68, 68, 0.4);
            border-radius: 3px;
        }

        .live-watch-chat-container .stream-chat-messages::-webkit-scrollbar-thumb:hover {
            background: rgba(239, 68, 68, 0.6);
        }

        /* Message box inside live watch modal */
        .live-watch-chat-container .chat-message-box {
            display: flex;
            gap: 10px;
            padding: 10px 12px;
            margin: 0;
            background: rgba(255, 255, 255, 0.04);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.2s ease;
            position: relative;
            overflow: visible;
            flex-shrink: 0;
        }

        .live-watch-chat-container .chat-message-box:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        /* Avatar in live watch chat */
        .live-watch-chat-container .chat-msg-avatar {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
        }

        .live-watch-chat-container .chat-msg-avatar img,
        .live-watch-chat-container .chat-msg-avatar .chat-avatar-border {
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
        }

        /* Content area - CRITICAL: allow text to wrap */
        .live-watch-chat-container .chat-msg-content {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }

        /* Header with name and time */
        .live-watch-chat-container .chat-msg-header {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 4px;
        }

        .live-watch-chat-container .chat-msg-name {
            font-weight: 600;
            font-size: 13px;
            color: #fff;
            cursor: pointer;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .live-watch-chat-container .chat-msg-name:hover {
            color: #EF4444;
        }

        .live-watch-chat-container .chat-msg-name.admin {
            color: #ffd700;
        }

        /* Admin/Streamer tags */
        .live-watch-chat-container .chat-admin-tag {
            background: linear-gradient(135deg, #ffd700, #ffa500);
            color: #000;
            padding: 2px 6px;
            border-radius: 8px;
            font-size: 9px;
            font-weight: bold;
            flex-shrink: 0;
        }

        .live-watch-chat-container .chat-streamer-tag {
            background: linear-gradient(135deg, #22C55E, #16A34A);
            color: #fff;
            padding: 2px 6px;
            border-radius: 8px;
            font-size: 9px;
            font-weight: bold;
            flex-shrink: 0;
        }

        .live-watch-chat-container .chat-msg-time {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.35);
            margin-left: auto;
            flex-shrink: 0;
        }

        /* CRITICAL FIX: Message text - full visibility */
        .live-watch-chat-container .chat-msg-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 13px;
            line-height: 1.5;
            word-wrap: break-word;
            word-break: break-word;
            overflow-wrap: break-word;
            white-space: pre-wrap;
            max-width: 100%;
        }

        /* Own message styling */
        .live-watch-chat-container .chat-message-box.own-message {
            background: rgba(102, 126, 234, 0.15);
            border-color: rgba(102, 126, 234, 0.35);
        }

        /* Admin message styling */
        .live-watch-chat-container .chat-message-box.admin-message {
            border-left: 3px solid #ffd700;
            background: rgba(255, 215, 0, 0.1);
        }

        /* Welcome message */
        .live-watch-chat-container .chat-welcome-message {
            text-align: center;
            padding: 15px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Input area */
        .live-watch-chat-container .stream-chat-input-area {
            padding: 12px;
            background: rgba(0, 0, 0, 0.4);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }

        .live-watch-chat-container .stream-chat-input {
            flex: 1;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 10px 16px;
            color: white;
            font-size: 13px;
            outline: none;
            transition: all 0.2s ease;
        }

        .live-watch-chat-container .stream-chat-input:focus {
            border-color: rgba(239, 68, 68, 0.5);
            background: rgba(255, 255, 255, 0.12);
        }

        .live-watch-chat-container .stream-chat-input::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        .live-watch-chat-container .stream-chat-send-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #EF4444, #DC2626);
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .live-watch-chat-container .stream-chat-send-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
        }

        .live-watch-chat-container .stream-chat-send-btn:active {
            transform: scale(0.95);
        }

        /* Chat messages override */
        .live-watch-chat-container .stream-chat {
            position: relative !important;
            width: 100% !important;
            height: 100% !important;
            max-width: none !important;
            max-height: none !important;
            border: none !important;
            border-radius: 0 !important;
            background: transparent !important;
        }

        .live-watch-chat-container .stream-chat-header {
            display: none !important;
        }

        .live-chat-loading {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 15px;
            color: rgba(255, 255, 255, 0.5);
        }

        .live-chat-spinner {
            width: 35px;
            height: 35px;
            border: 3px solid rgba(239, 68, 68, 0.3);
            border-top-color: #EF4444;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Responsive for watch modal */
        @media (max-width: 1024px) {
            .live-watch-chat-section {
                width: 320px;
                min-width: 300px;
                max-width: 350px;
            }

            .live-watch-chat-container .chat-msg-name {
                max-width: 100px;
            }

            .live-watch-chat-container .chat-msg-text {
                font-size: 12px;
            }
        }

        @media (max-width: 900px) {
            .live-watch-container {
                height: 95vh;
                max-height: none;
            }

            .live-watch-main {
                flex-direction: column;
            }

            .live-watch-chat-section {
                width: 100%;
                min-width: auto;
                max-width: none;
                height: 45%;
                min-height: 250px;
                border-left: none;
                border-top: 2px solid rgba(239, 68, 68, 0.3);
            }

            .live-watch-chat-container .chat-msg-avatar {
                width: 32px;
                height: 32px;
            }

            .live-watch-chat-container .chat-msg-avatar img,
            .live-watch-chat-container .chat-msg-avatar .chat-avatar-border {
                width: 32px !important;
                height: 32px !important;
                min-width: 32px !important;
            }

            .live-watch-chat-container .chat-message-box {
                padding: 8px 10px;
                gap: 8px;
            }

            .live-watch-chat-container .chat-msg-text {
                font-size: 12px;
                line-height: 1.4;
            }

            .live-watch-video-section {
                height: 60%;
            }

            .live-watch-footer {
                flex-wrap: wrap;
                gap: 10px;
                padding: 12px 15px;
            }

            .live-watch-actions {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 600px) {
            .live-watch-modal {
                padding: 5px;
            }

            .live-watch-container {
                height: 100vh;
                height: 100dvh;
                max-height: none;
                border-radius: 0;
                border: none;
            }

            .live-watch-header {
                padding: 10px 12px;
            }

            .live-badge-header {
                padding: 4px 10px;
                font-size: 0.7rem;
            }

            .live-watch-streamer-info {
                flex-wrap: wrap;
            }

            .live-action-btn {
                padding: 8px 14px;
                font-size: 0.8rem;
            }

            .live-watch-video-section {
                height: 50%;
                min-height: 200px;
            }

            .live-watch-chat-section {
                height: 50%;
                min-height: 180px;
            }

            .live-watch-footer {
                padding: 8px 10px;
                gap: 6px;
            }

            .live-watch-close {
                width: 36px;
                height: 36px;
                font-size: 1.2rem;
            }
        }

        @media (max-width: 400px) {
            .live-watch-modal {
                padding: 0;
            }

            .live-watch-header {
                padding: 8px 10px;
            }

            .live-streamer-name {
                font-size: 0.85rem;
            }

            .live-game-console {
                font-size: 0.7rem;
            }

            .live-watch-streamer-name {
                font-size: 0.85rem;
            }

            .live-watch-game-info {
                font-size: 0.7rem;
            }

            .live-watch-avatar {
                width: 32px;
                height: 32px;
            }
        }

        /* Panel overlay for mobile */
        .live-panel-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 9998;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }

        .live-panel-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        body.live-panel-open {
            overflow: hidden;
        }

        @media (max-width: 768px) {
            .live-streams-panel {
                width: 100%;
                left: -100%;
            }

            .live-streams-toggle {
                bottom: 100px;
                top: auto;
                transform: none;
                border-radius: 0 12px 12px 0;
            }
        }

        /* Chat Message Avatar Fix */
        .chat-message-avatar {
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            flex-shrink: 0 !important;
            border-radius: 50% !important;
            overflow: hidden !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: linear-gradient(135deg, var(--red), var(--orange)) !important;
        }

        .chat-message-avatar img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            border-radius: 50% !important;
        }

        .chat-message-username {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .chat-message-username:hover {
            color: var(--red) !important;
            text-decoration: underline;
        }

        /* ========== CHAT MESSAGE BOX STYLES ========== */
        .chat-message-box {
            display: flex;
            gap: 10px;
            padding: 10px 12px;
            margin: 4px 0;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        /* Special Effects canvas overlay (Store: "Special Effects") */
        .chat-message-box .chat-special-effect-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .chat-message-box .chat-msg-avatar,
        .chat-message-box .chat-msg-content {
            position: relative;
            z-index: 2;
        }
        
        .chat-message-box:hover {
            background: rgba(255, 255, 255, 0.06);
        }
        
        .chat-message-box.own-message {
            background: rgba(102, 126, 234, 0.12);
            border-color: rgba(102, 126, 234, 0.3);
        }
        
        .chat-message-box.admin-message {
            border-left: 3px solid #ffd700;
            background: rgba(255, 215, 0, 0.08);
        }
        
        .chat-msg-avatar {
            flex-shrink: 0;
            cursor: pointer;
        }
        
        .chat-msg-content {
            flex: 1;
            min-width: 0;
        }
        
        .chat-msg-header {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 4px;
        }
        
        .chat-msg-name {
            font-weight: 600;
            color: #fff;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .chat-msg-name:hover {
            color: var(--red);
            text-decoration: underline;
        }
        
        .chat-msg-name.admin {
            color: #ffd700;
        }
        
        .chat-admin-tag {
            background: linear-gradient(135deg, #ffd700, #ffa500);
            color: #000;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: bold;
        }
        
        .chat-msg-time {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.4);
            margin-left: auto;
        }
        
        .chat-msg-text {
            color: rgba(255, 255, 255, 0.9);
            word-break: break-word;
            line-height: 1.5;
            font-size: 14px;
        }
        
        /* ========== 💠 ULTRA CHAT EFFECT STYLES (Buyable from Store) ========== */
        
        /* 💫 Neon Glow Effect - Ultra Enhanced */
        .chat-message-box.chat-effect-neon,
        .chat-demo-message.chat-effect-neon {
            border: 2px solid #00ffff !important;
            box-shadow: 
                0 0 15px rgba(0, 255, 255, 0.5), 
                0 0 30px rgba(0, 255, 255, 0.25),
                inset 0 0 25px rgba(0, 255, 255, 0.08) !important;
            animation: neonPulse 2s ease-in-out infinite;
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.12), rgba(0, 200, 255, 0.08), rgba(0,50,80,0.3)) !important;
            position: relative;
            overflow: hidden;
        }
        
        .chat-message-box.chat-effect-neon::before,
        .chat-demo-message.chat-effect-neon::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);
            animation: neonSweep 3s linear infinite;
            pointer-events: none;
            z-index: 0;
        }
        
        .chat-message-box.chat-effect-neon::after,
        .chat-demo-message.chat-effect-neon::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #00ffff, transparent);
            animation: neonLineMove 2s linear infinite;
        }
        
        @keyframes neonPulse {
            0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.25), inset 0 0 25px rgba(0, 255, 255, 0.08); }
            50% { box-shadow: 0 0 30px rgba(0, 255, 255, 0.8), 0 0 60px rgba(0, 255, 255, 0.4), inset 0 0 35px rgba(0, 255, 255, 0.15); }
        }
        
        @keyframes neonSweep {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        @keyframes neonLineMove {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        /* 🔥 Fire Effect - Ultra Enhanced */
        .chat-message-box.chat-effect-fire,
        .chat-demo-message.chat-effect-fire {
            border: 2px solid #ff4500 !important;
            background: linear-gradient(180deg, 
                rgba(255, 69, 0, 0.25) 0%, 
                rgba(255, 140, 0, 0.18) 40%, 
                rgba(255, 200, 0, 0.1) 80%,
                rgba(0,0,0,0.2) 100%) !important;
            box-shadow: 
                0 0 20px rgba(255, 69, 0, 0.5),
                0 0 40px rgba(255, 140, 0, 0.25),
                inset 0 -20px 30px rgba(255, 69, 0, 0.2) !important;
            animation: fireGlow 1.2s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }
        
        .chat-message-box.chat-effect-fire::before,
        .chat-demo-message.chat-effect-fire::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #ff4500, #ff8c00, #ffd700, #ff8c00, #ff4500);
            background-size: 200% 100%;
            animation: fireWave 0.8s linear infinite;
            pointer-events: none;
            filter: blur(1px);
        }
        
        .chat-message-box.chat-effect-fire::after,
        .chat-demo-message.chat-effect-fire::after {
            content: '🔥';
            position: absolute;
            bottom: -5px;
            right: 10px;
            font-size: 18px;
            opacity: 0.8;
            animation: fireEmoji 1.5s ease-in-out infinite;
            filter: drop-shadow(0 0 10px rgba(255, 69, 0, 0.8));
        }
        
        @keyframes fireGlow {
            0%, 100% { box-shadow: 0 0 20px rgba(255, 69, 0, 0.5), 0 0 40px rgba(255, 140, 0, 0.25), inset 0 -20px 30px rgba(255, 69, 0, 0.2) !important; }
            50% { box-shadow: 0 0 35px rgba(255, 140, 0, 0.7), 0 0 60px rgba(255, 200, 0, 0.35), inset 0 -25px 40px rgba(255, 69, 0, 0.3) !important; }
        }
        
        @keyframes fireWave {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }
        
        @keyframes fireEmoji {
            0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
            50% { transform: translateY(-5px) scale(1.1); opacity: 1; }
        }
        
        /* ❄️ Ice Effect - Ultra Enhanced */
        .chat-message-box.chat-effect-ice,
        .chat-demo-message.chat-effect-ice {
            border: 2px solid #87ceeb !important;
            background: linear-gradient(180deg, 
                rgba(135, 206, 235, 0.25) 0%, 
                rgba(173, 216, 230, 0.18) 50%, 
                rgba(200, 230, 255, 0.12) 100%) !important;
            box-shadow: 
                0 0 25px rgba(135, 206, 235, 0.5),
                0 0 50px rgba(200, 230, 255, 0.25),
                inset 0 0 30px rgba(255, 255, 255, 0.1) !important;
            position: relative;
            overflow: hidden;
        }
        
        .chat-message-box.chat-effect-ice::before,
        .chat-demo-message.chat-effect-ice::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(135, 206, 235, 0.2) 100%);
            animation: iceShimmer 4s ease-in-out infinite;
            pointer-events: none;
        }
        
        .chat-message-box.chat-effect-ice::after,
        .chat-demo-message.chat-effect-ice::after {
            content: '❄️';
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 14px;
            opacity: 0.7;
            animation: iceFloat 3s ease-in-out infinite;
            filter: drop-shadow(0 0 8px rgba(135, 206, 235, 0.8));
        }
        
        @keyframes iceShimmer {
            0%, 100% { opacity: 0.5; transform: translateX(0); }
            50% { opacity: 1; transform: translateX(10px); }
        }
        
        @keyframes iceFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-3px) rotate(15deg); }
        }
        
        /* 🌈 Rainbow Effect - Ultra Enhanced */
        .chat-message-box.chat-effect-rainbow,
        .chat-demo-message.chat-effect-rainbow {
            border: 3px solid transparent !important;
            background: linear-gradient(rgba(26, 26, 46, 0.95), rgba(26, 26, 46, 0.95)) padding-box,
                        linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000) border-box !important;
            animation: rainbowBorder 2s linear infinite;
            background-size: 300% 100%;
            box-shadow: 
                0 0 20px rgba(255, 100, 100, 0.4),
                0 0 40px rgba(100, 255, 100, 0.2),
                0 0 60px rgba(100, 100, 255, 0.2) !important;
            position: relative;
            overflow: hidden;
        }
        
        .chat-message-box.chat-effect-rainbow::before,
        .chat-demo-message.chat-effect-rainbow::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, 
                rgba(255,0,0,0.1), 
                rgba(255,127,0,0.1), 
                rgba(255,255,0,0.1), 
                rgba(0,255,0,0.1), 
                rgba(0,0,255,0.1), 
                rgba(139,0,255,0.1), 
                rgba(255,0,0,0.1));
            animation: rainbowRotate 6s linear infinite;
            pointer-events: none;
        }
        
        .chat-message-box.chat-effect-rainbow::after,
        .chat-demo-message.chat-effect-rainbow::after {
            content: '🌈';
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 14px;
            animation: rainbowEmoji 2s ease-in-out infinite;
        }
        
        @keyframes rainbowBorder {
            0% { background-position: 0% 50%; }
            100% { background-position: 300% 50%; }
        }
        
        @keyframes rainbowRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes rainbowEmoji {
            0%, 100% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.2); opacity: 1; }
        }
        
        /* 🌟 Gold Effect - Ultra Enhanced */
        .chat-message-box.chat-effect-gold,
        .chat-demo-message.chat-effect-gold {
            border: 2px solid #ffd700 !important;
            background: linear-gradient(135deg, 
                rgba(255, 215, 0, 0.25) 0%, 
                rgba(218, 165, 32, 0.18) 50%, 
                rgba(255, 215, 0, 0.12) 100%) !important;
            box-shadow: 
                0 0 30px rgba(255, 215, 0, 0.5),
                0 0 60px rgba(218, 165, 32, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
            position: relative;
            overflow: hidden;
        }
        
        .chat-message-box.chat-effect-gold::before,
        .chat-demo-message.chat-effect-gold::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), rgba(255, 255, 255, 0.3), transparent);
            animation: goldShine 2.5s ease-in-out infinite;
            pointer-events: none;
        }
        
        .chat-message-box.chat-effect-gold::after,
        .chat-demo-message.chat-effect-gold::after {
            content: '👑';
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 14px;
            animation: crownBounce 2s ease-in-out infinite;
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
        }
        
        @keyframes goldShine {
            0% { left: -100%; }
            50%, 100% { left: 150%; }
        }
        
        @keyframes crownBounce {
            0%, 100% { transform: translateY(0) rotate(-5deg); }
            50% { transform: translateY(-3px) rotate(5deg); }
        }
        
        /* 🌌 Plasma Effect - Ultra Enhanced */
        .chat-message-box.chat-effect-plasma,
        .chat-demo-message.chat-effect-plasma {
            border: 2px solid #ff00ff !important;
            background: linear-gradient(135deg, 
                rgba(255, 0, 255, 0.2) 0%, 
                rgba(0, 255, 255, 0.18) 50%, 
                rgba(255, 0, 255, 0.15) 100%) !important;
            box-shadow: 
                0 0 25px rgba(255, 0, 255, 0.5),
                0 0 50px rgba(0, 255, 255, 0.25) !important;
            animation: plasmaShift 2s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }
        
        .chat-message-box.chat-effect-plasma::before,
        .chat-demo-message.chat-effect-plasma::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, 
                rgba(255, 0, 255, 0.3), 
                rgba(0, 255, 255, 0.3), 
                rgba(255, 0, 255, 0.3));
            animation: plasmaRotate 4s linear infinite;
            pointer-events: none;
            opacity: 0.5;
        }
        
        .chat-message-box.chat-effect-plasma::after,
        .chat-demo-message.chat-effect-plasma::after {
            content: '⚡';
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 14px;
            animation: plasmaEmoji 1.5s ease-in-out infinite;
            filter: drop-shadow(0 0 8px rgba(255, 0, 255, 0.8));
        }
        
        @keyframes plasmaShift {
            0%, 100% { 
                box-shadow: 0 0 25px rgba(255, 0, 255, 0.5), 0 0 50px rgba(0, 255, 255, 0.25) !important;
                border-color: #ff00ff !important;
            }
            50% { 
                box-shadow: 0 0 25px rgba(0, 255, 255, 0.5), 0 0 50px rgba(255, 0, 255, 0.25) !important;
                border-color: #00ffff !important;
            }
        }
        
        @keyframes plasmaRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes plasmaEmoji {
            0%, 100% { transform: scale(1); filter: hue-rotate(0deg) drop-shadow(0 0 8px rgba(255, 0, 255, 0.8)); }
            50% { transform: scale(1.2); filter: hue-rotate(180deg) drop-shadow(0 0 12px rgba(0, 255, 255, 0.8)); }
        }
        
        /* 🌌 Galaxy Effect - Ultra Enhanced */
        .chat-message-box.chat-effect-galaxy,
        .chat-demo-message.chat-effect-galaxy {
            border: 2px solid #8b5cf6 !important;
            background: linear-gradient(135deg, 
                rgba(139, 92, 246, 0.25) 0%, 
                rgba(59, 130, 246, 0.18) 40%, 
                rgba(236, 72, 153, 0.15) 80%,
                rgba(139, 92, 246, 0.1) 100%) !important;
            box-shadow: 
                0 0 30px rgba(139, 92, 246, 0.5),
                0 0 60px rgba(59, 130, 246, 0.25),
                0 0 90px rgba(236, 72, 153, 0.15) !important;
            position: relative;
            overflow: hidden;
        }
        
        .chat-message-box.chat-effect-galaxy::before,
        .chat-demo-message.chat-effect-galaxy::before {
            content: '✨';
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 14px;
            animation: starTwinkle 1.5s ease-in-out infinite;
            pointer-events: none;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
        }
        
        .chat-message-box.chat-effect-galaxy::after,
        .chat-demo-message.chat-effect-galaxy::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at 20% 80%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
                        radial-gradient(ellipse at 80% 20%, rgba(236, 72, 153, 0.25) 0%, transparent 50%);
            animation: galaxyPulse 4s ease-in-out infinite;
            pointer-events: none;
        }
        
        @keyframes starTwinkle {
            0%, 100% { opacity: 0.5; transform: scale(0.8) rotate(0deg); }
            50% { opacity: 1; transform: scale(1.3) rotate(180deg); }
        }
        
        @keyframes galaxyPulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }
        
        /* 🤖 Cyber Effect - Ultra Enhanced */
        .chat-message-box.chat-effect-cyber,
        .chat-demo-message.chat-effect-cyber {
            border: 2px solid #00ff41 !important;
            background: linear-gradient(180deg, 
                rgba(0, 255, 65, 0.15) 0%, 
                rgba(0, 200, 50, 0.1) 50%, 
                rgba(0, 100, 25, 0.08) 100%) !important;
            box-shadow: 
                0 0 20px rgba(0, 255, 65, 0.4),
                0 0 40px rgba(0, 200, 50, 0.2),
                inset 0 0 20px rgba(0, 255, 65, 0.05) !important;
            position: relative;
            overflow: hidden;
        }
        
        .chat-message-box.chat-effect-cyber::before,
        .chat-demo-message.chat-effect-cyber::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, #00ff41, #00ff88, #00ff41, transparent);
            animation: cyberScan 1.5s linear infinite;
            pointer-events: none;
            box-shadow: 0 0 15px rgba(0, 255, 65, 0.8);
        }
        
        .chat-message-box.chat-effect-cyber::after,
        .chat-demo-message.chat-effect-cyber::after {
            content: '🤖';
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 14px;
            animation: cyberEmoji 2s ease-in-out infinite;
            filter: drop-shadow(0 0 8px rgba(0, 255, 65, 0.8));
        }
        
        @keyframes cyberScan {
            0% { opacity: 0.3; transform: translateX(-100%); }
            50% { opacity: 1; }
            100% { opacity: 0.3; transform: translateX(100%); }
        }
        
        @keyframes cyberEmoji {
            0%, 100% { transform: translateY(0); opacity: 0.7; }
            50% { transform: translateY(-3px); opacity: 1; }
        }

        /* 🟩 Matrix Effect - Based on chateffects */
        .chat-message-box.chat-effect-matrix,
        .chat-demo-message.chat-effect-matrix {
            border: 2px solid #00ff00 !important;
            background: rgba(0, 20, 0, 0.92) !important;
            box-shadow: 0 0 18px rgba(0, 255, 0, 0.35), inset 0 0 18px rgba(0, 255, 0, 0.08) !important;
            position: relative;
            overflow: hidden;
        }

        .chat-message-box.chat-effect-matrix::before,
        .chat-demo-message.chat-effect-matrix::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                180deg,
                rgba(0, 255, 0, 0.10) 0px,
                rgba(0, 255, 0, 0.02) 2px,
                transparent 6px,
                transparent 10px
            );
            opacity: 0.6;
            animation: matrixScan 1.8s linear infinite;
            pointer-events: none;
        }

        .chat-message-box.chat-effect-matrix::after,
        .chat-demo-message.chat-effect-matrix::after {
            content: '⌁';
            position: absolute;
            top: 6px;
            right: 10px;
            font-size: 14px;
            color: #00ff41;
            text-shadow: 0 0 10px rgba(0, 255, 65, 0.8);
            animation: matrixFlicker 0.12s linear infinite;
            pointer-events: none;
        }

        .chat-message-box.chat-effect-matrix .chat-msg-name,
        .chat-demo-message.chat-effect-matrix .chat-msg-name {
            color: #00ff41 !important;
            font-family: 'Courier New', monospace;
            text-shadow: 0 0 10px rgba(0, 255, 65, 0.65);
        }

        .chat-message-box.chat-effect-matrix .chat-msg-text,
        .chat-demo-message.chat-effect-matrix .chat-msg-text {
            color: rgba(0, 255, 65, 0.92) !important;
            font-family: 'Courier New', monospace;
        }

        @keyframes matrixScan {
            0% { transform: translateY(-30%); }
            100% { transform: translateY(30%); }
        }

        @keyframes matrixFlicker {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }

        /* 🕶️ Shadow Effect - Based on chateffects */
        .chat-message-box.chat-effect-shadow,
        .chat-demo-message.chat-effect-shadow {
            border: 2px solid #1a1a2e !important;
            background: linear-gradient(135deg, rgba(20, 20, 30, 0.95), rgba(10, 10, 15, 0.95)) !important;
            box-shadow: 0 0 35px rgba(0, 0, 0, 0.8), inset 0 0 22px rgba(0, 0, 0, 0.55) !important;
            position: relative;
            overflow: hidden;
            animation: shadowPulse 3s ease-in-out infinite;
        }

        .chat-message-box.chat-effect-shadow::after,
        .chat-demo-message.chat-effect-shadow::after {
            content: '🕶️';
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 14px;
            opacity: 0.7;
            filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
            pointer-events: none;
        }

        @keyframes shadowPulse {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.15); }
        }

        /* ⚡ Lightning Effect - Based on chateffects */
        .chat-message-box.chat-effect-lightning,
        .chat-demo-message.chat-effect-lightning {
            border: 2px solid #ffff00 !important;
            background: rgba(30, 30, 50, 0.92) !important;
            box-shadow: 0 0 12px rgba(255, 255, 0, 0.5), inset 0 0 18px rgba(255, 255, 255, 0.06) !important;
            position: relative;
            overflow: hidden;
            animation: chatLightningFlash 0.35s ease-in-out infinite;
        }

        .chat-message-box.chat-effect-lightning::before,
        .chat-demo-message.chat-effect-lightning::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 0, 0.9), transparent);
            animation: lightningSweep 1.1s linear infinite;
            pointer-events: none;
        }

        .chat-message-box.chat-effect-lightning::after,
        .chat-demo-message.chat-effect-lightning::after {
            content: '⚡';
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 14px;
            animation: lightningEmoji 0.35s ease-in-out infinite;
            filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.9));
            pointer-events: none;
        }

        @keyframes chatLightningFlash {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.35); }
        }

        @keyframes lightningSweep {
            0% { transform: translateX(-100%); opacity: 0.35; }
            50% { opacity: 1; }
            100% { transform: translateX(100%); opacity: 0.35; }
        }

        @keyframes lightningEmoji {
            0%, 100% { transform: scale(1); opacity: 0.75; }
            50% { transform: scale(1.15); opacity: 1; }
        }
        
        /* Rainbow text animation for chat effects */
        @keyframes rainbowText {
            0% { filter: hue-rotate(0deg); }
            100% { filter: hue-rotate(360deg); }
        }
        
        /* Chat demo message styling */
        .chat-demo-message {
            transition: all 0.3s ease;
        }
        
        .chat-effect-item:hover .chat-demo-message {
            transform: scale(1.02);
        }
        
        .chat-effect-item.selected .chat-demo-message {
            transform: scale(1.02);
            filter: brightness(1.1);
        }
        
        /* ========== 💎 ULTRA CHAT AVATAR BORDER EFFECTS ========== */
        .chat-avatar-border, .online-avatar-border {
            position: relative;
            border-radius: 50%;
            padding: 3px;
            transition: all 0.3s ease;
        }
        
        .chat-avatar-border:hover, .online-avatar-border:hover {
            transform: scale(1.1);
        }
        
        .chat-avatar-border img, .online-avatar-border img,
        .chat-avatar-border > div, .online-avatar-border > div {
            position: relative;
            z-index: 1;
            border-radius: 50%;
        }
        
        /* 🌈 Rainbow Border - Ultra */
        .avatar-border-rainbow {
            background: conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000);
            animation: avatarBorderRotate 1.5s linear infinite;
            box-shadow: 0 0 15px rgba(255, 100, 100, 0.6), 0 0 30px rgba(100, 255, 100, 0.3);
        }
        
        .avatar-border-rainbow:hover {
            box-shadow: 0 0 25px rgba(255, 100, 100, 0.8), 0 0 50px rgba(100, 255, 100, 0.5);
        }
        
        /* 💠 Neon Border - Ultra */
        .avatar-border-neon {
            background: linear-gradient(45deg, #00ffff, #ff00ff, #00ffff);
            background-size: 200% 200%;
            animation: avatarNeonPulse 1.5s ease-in-out infinite, avatarNeonGradient 3s linear infinite;
            box-shadow: 0 0 12px #00ffff, 0 0 25px rgba(0, 255, 255, 0.6), 0 0 40px rgba(255, 0, 255, 0.3);
        }
        
        @keyframes avatarNeonGradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        /* 🔥 Fire Border - Ultra */
        .avatar-border-fire {
            background: conic-gradient(from 0deg, #ff4500, #ff8c00, #ffd700, #ff8c00, #ff4500);
            animation: avatarBorderRotate 1s linear infinite, avatarFireFlicker 0.3s ease-in-out infinite;
            box-shadow: 0 0 15px rgba(255, 69, 0, 0.7), 0 0 30px rgba(255, 140, 0, 0.5);
        }
        
        @keyframes avatarFireFlicker {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.3); }
        }
        
        /* ❄️ Frost/Ice Border - Ultra */
        .avatar-border-frost {
            background: conic-gradient(from 0deg, #00bfff, #87ceeb, #ffffff, #e0ffff, #87ceeb, #00bfff);
            animation: avatarBorderRotate 2.5s linear infinite reverse;
            box-shadow: 0 0 15px rgba(135, 206, 235, 0.7), 0 0 30px rgba(0, 191, 255, 0.4);
        }
        
        /* 🌟 Gold Border - Ultra */
        .avatar-border-gold {
            background: conic-gradient(from 0deg, #ffd700, #ffec8b, #fff8dc, #ffec8b, #daa520, #ffd700);
            animation: avatarBorderRotate 3s linear infinite, avatarGoldShine 2s ease-in-out infinite;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.7), 0 0 30px rgba(218, 165, 32, 0.5);
        }
        
        @keyframes avatarGoldShine {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.4); }
        }
        
        /* ⚡ Electric Border - Ultra */
        .avatar-border-electric {
            background: conic-gradient(from 0deg, transparent 0deg, #00ff88 15deg, transparent 30deg, transparent 90deg, #ffff00 105deg, transparent 120deg, transparent 180deg, #00ff88 195deg, transparent 210deg, transparent 270deg, #ffff00 285deg, transparent 300deg);
            animation: avatarElectricSpin 0.3s linear infinite;
            box-shadow: 0 0 15px rgba(255, 255, 0, 0.8), 0 0 30px rgba(0, 255, 136, 0.5);
        }
        
        @keyframes avatarElectricSpin {
            0% { transform: rotate(0deg); filter: brightness(1); }
            50% { filter: brightness(1.8); }
            100% { transform: rotate(360deg); filter: brightness(1); }
        }
        
        /* 🌌 Plasma Border - Ultra */
        .avatar-border-plasma {
            background: conic-gradient(from 0deg, #ff00ff, #00ffff, #ff00ff, #ffff00, #ff00ff);
            animation: avatarBorderRotate 1s linear infinite;
            box-shadow: 0 0 15px rgba(255, 0, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.4);
        }
        
        /* 💎 Diamond Border - Ultra */
        .avatar-border-diamond {
            background: conic-gradient(from 0deg, #e0ffff, #ffffff, #b0e0e6, #ffffff, #e0ffff, #ffffff, #b0e0e6, #ffffff, #e0ffff);
            animation: avatarBorderRotate 4s linear infinite, avatarDiamondSparkle 1.5s ease-in-out infinite;
            box-shadow: 0 0 20px rgba(224, 255, 255, 0.8), 0 0 40px rgba(176, 224, 230, 0.5);
        }
        
        /* 💠 Ion Border - Ultra */
        .avatar-border-ion {
            background: radial-gradient(circle, #00ff00 0%, #00ffff 40%, #0088ff 70%, #0000ff 100%);
            animation: avatarIonPulse 0.8s ease-in-out infinite;
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.6), 0 0 30px rgba(0, 255, 255, 0.4);
        }
        
        /* 🌌 Nebula Border - Ultra */
        .avatar-border-nebula {
            background: conic-gradient(from 0deg, #8b00ff, #ff1493, #00bfff, #8b00ff);
            animation: avatarBorderRotate 6s linear infinite;
            box-shadow: 0 0 15px rgba(139, 0, 255, 0.5);
        }
        
        @keyframes avatarBorderRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes avatarNeonPulse {
            0%, 100% { box-shadow: 0 0 8px #00ffff, 0 0 15px rgba(0, 255, 255, 0.5); }
            50% { box-shadow: 0 0 15px #00ffff, 0 0 25px rgba(0, 255, 255, 0.8); }
        }
        
        @keyframes avatarElectricFlicker {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        
        @keyframes avatarDiamondSparkle {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.3); }
        }
        
        @keyframes avatarIonPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        /* ========== LIVE CHAT CONTAINER - ANIMATED VERSION ========== */
        .live-chat {
            display: none;
            position: fixed;
            bottom: 90px;
            right: 20px;
            width: 420px;
            max-width: 90vw;
            height: 580px;
            background: linear-gradient(165deg, #0d0d14 0%, #1a0a15 30%, #0f0a18 60%, #0a0a0f 100%);
            border: 2px solid transparent;
            background-clip: padding-box;
            z-index: 10000;
            border-radius: 24px;
            overflow: hidden;
            flex-direction: column;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                        opacity 0.3s ease,
                        box-shadow 0.4s ease;
            animation: chatAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        .live-chat::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 26px;
            padding: 2px;
            background: linear-gradient(135deg, #ff0040, #ff6600, #ff0040, #6366f1);
            background-size: 300% 300%;
            animation: borderGradient 4s ease infinite;
            -webkit-mask: linear-gradient(#fff 0%, #fff 100%) content-box, linear-gradient(#fff 0%, #fff 100%);
            mask: linear-gradient(#fff 0%, #fff 100%) content-box, linear-gradient(#fff 0%, #fff 100%);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            z-index: -1;
        }
        
        .live-chat::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 24px;
            box-shadow: 
                0 0 60px rgba(255, 0, 64, 0.3),
                0 30px 100px rgba(0, 0, 0, 0.8),
                inset 0 0 100px rgba(255, 0, 64, 0.05);
            pointer-events: none;
            z-index: 0;
        }
        
        @keyframes chatAppear {
            0% { 
                opacity: 0; 
                transform: translateY(30px) scale(0.9);
            }
            100% { 
                opacity: 1; 
                transform: translateY(0) scale(1);
            }
        }
        
        @keyframes borderGradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        .live-chat-bg-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            opacity: 0.5;
        }
        
        .live-chat-bg-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(ellipse at top right, rgba(255, 0, 64, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at bottom left, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
                linear-gradient(180deg, rgba(10, 10, 15, 0.4) 0%, rgba(10, 10, 15, 0.7) 50%, rgba(10, 10, 15, 0.9) 100%);
            z-index: 1;
            pointer-events: none;
        }
        
        /* Chat Header - Glassmorphism Style */
        .chat-header {
            position: relative;
            z-index: 10;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.95), rgba(255, 80, 0, 0.9));
            padding: 18px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: move;
            border-bottom: none;
            overflow: hidden;
        }
        
        .chat-header::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.15) 50%, transparent 60%);
            background-size: 300% 100%;
            animation: headerShine 4s ease-in-out infinite;
        }
        
        @keyframes headerShine {
            0%, 100% { background-position: 200% 0; }
            50% { background-position: -100% 0; }
        }
        
        .chat-header-glow {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #ffd700, #ff6600, #ff0040, #6366f1, #ff0040, #ff6600, #ffd700, transparent);
            background-size: 200% 100%;
            animation: headerGlow 3s linear infinite;
        }
        
        @keyframes headerGlow {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        .chat-title {
            font-family: 'Black Ops One', 'Russo One', cursive;
            font-size: 1.15rem;
            color: white;
            margin: 0;
            text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
            letter-spacing: 1.5px;
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .chat-title-icon {
            font-size: 1.3rem;
            animation: chatIconPulse 2s ease-in-out infinite;
        }
        
        @keyframes chatIconPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }
        
        .chat-header-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        
        .online-badge {
            background: rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(15px);
            padding: 8px 14px;
            border-radius: 25px;
            font-size: 0.8rem;
            font-weight: 600;
            border: 1px solid rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            gap: 6px;
            animation: badgePulse 3s ease-in-out infinite;
        }
        
        .online-badge .online-dot-anim {
            width: 8px;
            height: 8px;
            background: #43b581;
            border-radius: 50%;
            animation: dotPulse 1.5s ease-in-out infinite;
            box-shadow: 0 0 10px #43b581;
        }
        
        @keyframes dotPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.3); opacity: 0.7; }
        }
        
        @keyframes badgePulse {
            0%, 100% { box-shadow: 0 0 0 rgba(67, 181, 129, 0); }
            50% { box-shadow: 0 0 15px rgba(67, 181, 129, 0.3); }
        }
        
        .chat-btn {
            background: rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 1.1rem;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .chat-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: scale(1.15) rotate(5deg);
            border-color: rgba(255, 255, 255, 0.3);
        }
        
        /* Chat Tabs - Animated */
        .chat-tabs {
            position: relative;
            z-index: 10;
            display: flex;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            padding: 0 10px;
        }
        
        .chat-tab {
            flex: 1;
            padding: 16px 10px;
            background: transparent;
            border: none;
            border-bottom: 3px solid transparent;
            color: rgba(255, 255, 255, 0.45);
            cursor: pointer;
            font-family: 'Russo One', sans-serif;
            font-size: 0.85rem;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
        }
        
        .chat-tab::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #ff0040, #ff6600);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            transform: translateX(-50%);
            border-radius: 3px 3px 0 0;
        }
        
        .chat-tab:hover {
            color: rgba(255, 255, 255, 0.85);
            background: rgba(255, 255, 255, 0.05);
        }
        
        .chat-tab:hover::before {
            width: 50%;
        }
        
        .chat-tab.active {
            color: #fff;
            background: linear-gradient(180deg, rgba(255, 0, 64, 0.12), transparent);
        }
        
        .chat-tab.active::before {
            width: 100%;
            box-shadow: 0 0 20px rgba(255, 0, 64, 0.5);
        }
        
        .tab-icon {
            font-size: 1.1rem;
            transition: transform 0.3s ease;
        }
        
        .chat-tab:hover .tab-icon {
            transform: scale(1.2);
        }
        
        .chat-tab.active .tab-icon {
            animation: tabIconBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        @keyframes tabIconBounce {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        
        /* Chat Content - Enhanced */
        .chat-content {
            position: relative;
            z-index: 10;
            flex: 1;
            overflow-y: auto;
            padding: 18px;
            display: none;
            flex-direction: column;
            gap: 14px;
            scroll-behavior: smooth;
        }
        
        .chat-content.active {
            display: flex;
            animation: contentFadeIn 0.4s ease;
        }
        
        @keyframes contentFadeIn {
            0% { opacity: 0; transform: translateY(10px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        
        /* Modern Scrollbar for Chat */
        .chat-content::-webkit-scrollbar {
            width: 8px;
        }
        
        .chat-content::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
        }
        
        .chat-content::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #ff0040, #ff6600, #6366f1);
            border-radius: 10px;
            border: 2px solid transparent;
            background-clip: padding-box;
        }
        
        .chat-content::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #ff3366, #ff8833, #818cf8);
        }
        
        .messages-list, .online-users-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .chat-welcome {
            text-align: center;
            color: rgba(255, 255, 255, 0.5);
            padding: 50px 25px;
            animation: welcomeFadeIn 0.8s ease;
        }
        
        @keyframes welcomeFadeIn {
            0% { opacity: 0; transform: scale(0.9); }
            100% { opacity: 1; transform: scale(1); }
        }
        
        .welcome-icon {
            font-size: 4rem;
            margin-bottom: 18px;
            animation: welcomeBounce 2s ease-in-out infinite, welcomeGlow 3s ease-in-out infinite;
            filter: drop-shadow(0 0 20px rgba(255, 0, 64, 0.5));
        }
        
        @keyframes welcomeBounce {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-12px) rotate(-5deg); }
            75% { transform: translateY(-5px) rotate(5deg); }
        }
        
        @keyframes welcomeGlow {
            0%, 100% { filter: drop-shadow(0 0 15px rgba(255, 0, 64, 0.4)); }
            50% { filter: drop-shadow(0 0 30px rgba(255, 102, 0, 0.6)); }
        }
        
        .welcome-sub {
            font-size: 0.85rem;
            opacity: 0.6;
            margin-top: 10px;
        }
        
        /* Chat Input - Neon Style */
        /* ─── Chat Date Separator ─── */
        .chat-date-separator {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 10px 0;
            color: rgba(255,255,255,0.35);
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }
        .chat-date-separator::before,
        .chat-date-separator::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,0,64,0.25), transparent);
        }
        .chat-date-separator span {
            background: rgba(255,0,64,0.12);
            border: 1px solid rgba(255,0,64,0.2);
            padding: 3px 10px;
            border-radius: 20px;
            white-space: nowrap;
        }

        /* ─── Message Time with Date ─── */
        .chat-msg-time {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }
        .chat-msg-date {
            font-size: 0.68rem;
            color: rgba(255,255,255,0.35);
            font-weight: 500;
        }
        .chat-msg-hour {
            font-size: 0.68rem;
            color: rgba(255,255,255,0.4);
        }
        .chat-msg-date + .chat-msg-hour::before {
            content: '·';
            margin-right: 4px;
            color: rgba(255,255,255,0.2);
        }

        /* ─── Emoji Picker Button ─── */
        .emoji-picker-btn {
            background: rgba(255,255,255,0.07);
            border: 1.5px solid rgba(255,255,255,0.12);
            color: white;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            padding: 0;
        }
        .emoji-picker-btn:hover {
            background: rgba(255,0,64,0.18);
            border-color: rgba(255,0,64,0.45);
            transform: scale(1.12) rotate(8deg);
            box-shadow: 0 0 18px rgba(255,0,64,0.3);
        }

        /* ─── Emoji Picker Panel ─── */
        .emoji-picker-panel {
            position: absolute;
            bottom: 100%;
            left: 0;
            right: 0;
            margin-bottom: 8px;
            background: linear-gradient(160deg, #13111a 0%, #1a0f1e 100%);
            border: 1.5px solid rgba(255,0,64,0.25);
            border-radius: 18px;
            overflow: hidden;
            box-shadow:
                0 -8px 40px rgba(0,0,0,0.7),
                0 0 0 1px rgba(255,255,255,0.04),
                inset 0 1px 0 rgba(255,255,255,0.06);
            z-index: 100;
            flex-direction: column;
            animation: emojiPickerIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
        }
        @keyframes emojiPickerIn {
            from { opacity: 0; transform: translateY(12px) scale(0.96); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* ─── Emoji Picker Header ─── */
        .emoji-picker-header {
            padding: 10px 10px 0;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .emoji-search-wrapper {
            position: relative;
            margin-bottom: 8px;
        }
        .emoji-search-icon {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.85rem;
            pointer-events: none;
            opacity: 0.6;
        }
        .emoji-search {
            width: 100%;
            padding: 9px 12px 9px 34px;
            background: rgba(255,255,255,0.06);
            border: 1.5px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            color: #fff;
            font-size: 0.85rem;
            outline: none;
            box-sizing: border-box;
            transition: border-color 0.2s;
        }
        .emoji-search:focus {
            border-color: rgba(255,0,64,0.5);
            background: rgba(255,255,255,0.09);
        }
        .emoji-search::placeholder { color: rgba(255,255,255,0.3); }

        /* ─── Emoji Category Bar ─── */
        .emoji-cat-bar {
            display: flex;
            gap: 2px;
            padding: 6px 0 0;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .emoji-cat-bar::-webkit-scrollbar { display: none; }
        .emoji-cat-btn {
            background: transparent;
            border: none;
            padding: 5px 8px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.15rem;
            transition: all 0.2s ease;
            flex-shrink: 0;
            border-bottom: 2px solid transparent;
            line-height: 1;
        }
        .emoji-cat-btn:hover { background: rgba(255,255,255,0.08); transform: scale(1.1); }
        .emoji-cat-btn.active {
            background: rgba(255,0,64,0.15);
            border-bottom-color: #ff0040;
        }

        /* ─── Emoji Grid ─── */
        .emoji-grid {
            max-height: 200px;
            overflow-y: auto;
            padding: 8px 10px 10px;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,0,64,0.4) transparent;
        }
        .emoji-grid::-webkit-scrollbar { width: 4px; }
        .emoji-grid::-webkit-scrollbar-track { background: transparent; }
        .emoji-grid::-webkit-scrollbar-thumb { background: rgba(255,0,64,0.4); border-radius: 4px; }

        .emoji-section-title {
            font-size: 0.68rem;
            font-weight: 700;
            color: rgba(255,255,255,0.4);
            letter-spacing: 0.8px;
            text-transform: uppercase;
            margin-bottom: 6px;
            padding-bottom: 3px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .emoji-items {
            display: flex;
            flex-wrap: wrap;
            gap: 1px;
            margin-bottom: 4px;
        }
        .emoji-item {
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 1.3rem;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
            line-height: 1;
        }
        .emoji-item:hover {
            background: rgba(255,255,255,0.1);
            transform: scale(1.2);
        }

        .chat-input-container {
            position: relative;
            z-index: 10;
            padding: 18px;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255, 0, 64, 0.2);
        }
        
        .chat-input-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 0, 64, 0.5), rgba(255, 102, 0, 0.5), transparent);
        }
        
        .chat-input-wrapper {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        
        .chat-input {
            flex: 1;
            padding: 16px 22px;
            background: rgba(255, 255, 255, 0.06);
            border: 2px solid rgba(255, 0, 64, 0.25);
            color: white;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 1rem;
            border-radius: 30px;
            outline: none;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        .chat-input:focus {
            border-color: #ff0040;
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 
                0 0 0 4px rgba(255, 0, 64, 0.15),
                0 0 30px rgba(255, 0, 64, 0.2),
                inset 0 0 20px rgba(255, 0, 64, 0.05);
            transform: scale(1.02);
        }
        
        .chat-input::placeholder {
            color: rgba(255, 255, 255, 0.35);
            transition: color 0.3s ease;
        }
        
        .chat-input:focus::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        
        .send-btn {
            background: linear-gradient(135deg, #ff0040, #ff6600);
            border: none;
            color: white;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.4rem;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 
                0 6px 25px rgba(255, 0, 64, 0.4),
                inset 0 -2px 10px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }
        
        .send-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            filter: grayscale(0.5);
            transform: none !important;
        }
        
        .send-btn:disabled:hover {
            transform: none !important;
            box-shadow: 
                0 6px 25px rgba(255, 0, 64, 0.4),
                inset 0 -2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .send-btn::before {
            content: '';
            position: absolute;
            inset: -50%;
            background: linear-gradient(transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg) translateY(-100%);
            transition: transform 0.6s ease;
        }
        
        .send-btn:hover {
            transform: scale(1.15) rotate(10deg);
            box-shadow: 
                0 10px 40px rgba(255, 0, 64, 0.6),
                0 0 60px rgba(255, 102, 0, 0.3);
        }
        
        .send-btn:hover::before {
            transform: rotate(45deg) translateY(100%);
        }
        
        .send-btn:active {
            transform: scale(0.95);
        }

        /* Live chat composer polish - keeps emoji control inside the input */
        .live-chat .chat-input-wrapper {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 54px;
            gap: 12px;
            align-items: center;
            position: relative;
        }

        .live-chat .chat-input {
            width: 100%;
            min-width: 0;
            padding-left: 56px;
            box-sizing: border-box;
        }

        .live-chat .emoji-picker-btn {
            appearance: none;
            -webkit-appearance: none;
            position: absolute !important;
            left: 11px;
            top: 50%;
            z-index: 3;
            width: 34px !important;
            height: 34px !important;
            min-width: 34px !important;
            min-height: 34px !important;
            padding: 0 !important;
            margin: 0 !important;
            border: 0 !important;
            border-radius: 50% !important;
            background: rgba(255, 255, 255, 0.08) !important;
            color: #fff !important;
            box-shadow: none !important;
            outline: none;
            cursor: pointer;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
            font-size: 1.18rem !important;
            line-height: 1 !important;
            transform: translateY(-50%);
            transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }

        .live-chat .emoji-picker-btn:hover,
        .live-chat .emoji-picker-btn:focus-visible {
            background: rgba(255, 0, 64, 0.22) !important;
            box-shadow: 0 0 18px rgba(255, 0, 64, 0.28) !important;
            transform: translateY(-50%) scale(1.08);
        }

        .live-chat .emoji-picker-panel {
            left: 18px;
            right: 18px;
            bottom: calc(100% - 4px);
            max-height: 320px;
            border-radius: 14px;
        }

        .live-chat .emoji-cat-btn,
        .live-chat .emoji-item {
            appearance: none;
            -webkit-appearance: none;
            font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
            color: inherit;
            box-shadow: none;
        }

        .live-chat .chat-msg-datetime {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            width: fit-content;
            max-width: 100%;
            margin: 0 0 7px;
            padding: 3px 8px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.62);
            font-size: 0.72rem;
            font-weight: 600;
            line-height: 1.2;
        }

        .live-chat .chat-msg-datetime span + span::before {
            content: '•';
            margin-right: 7px;
            color: rgba(255, 255, 255, 0.28);
        }

        .live-chat .chat-msg-time .chat-msg-hour {
            font-size: 0.72rem;
            color: rgba(255, 255, 255, 0.52);
        }

        @media (max-width: 520px) {
            .live-chat .chat-input-wrapper {
                grid-template-columns: minmax(0, 1fr) 50px;
                gap: 10px;
            }

            .live-chat .emoji-picker-panel {
                left: 12px;
                right: 12px;
                max-height: 300px;
            }
        }
        
        /* Online Users List Styles - Enhanced Animated */
        .online-user-card {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 0, 64, 0.05));
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            margin-bottom: 8px;
            position: relative;
            overflow: hidden;
        }
        
        .online-user-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.1), rgba(99, 102, 241, 0.1));
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        
        .online-user-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: left 0.6s ease;
        }
        
        .online-user-card:hover {
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.12), rgba(99, 102, 241, 0.08));
            border-color: rgba(255, 0, 64, 0.4);
            transform: translateX(8px) scale(1.02);
            box-shadow: 
                0 8px 30px rgba(255, 0, 64, 0.25),
                0 0 0 1px rgba(255, 0, 64, 0.2);
        }
        
        .online-user-card:hover::before {
            opacity: 1;
        }
        
        .online-user-card:hover::after {
            left: 100%;
        }
        
        .online-avatar-wrapper {
            position: relative;
            flex-shrink: 0;
        }
        
        .online-avatar-img {
            border-radius: 50%;
            object-fit: cover;
            background: linear-gradient(135deg, #667eea, #764ba2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .online-user-card:hover .online-avatar-img {
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(255, 0, 64, 0.4);
        }
        
        .online-avatar-fallback {
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            transition: transform 0.3s ease;
        }
        
        .online-user-card:hover .online-avatar-fallback {
            transform: scale(1.1) rotate(5deg);
        }
        
        .online-dot {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 14px;
            height: 14px;
            background: #43b581;
            border-radius: 50%;
            border: 3px solid #0a0a0f;
            animation: onlinePulse 2s ease-in-out infinite;
            box-shadow: 0 0 10px #43b581;
        }
        
        @keyframes onlinePulse {
            0%, 100% { 
                transform: scale(1); 
                box-shadow: 0 0 5px #43b581;
            }
            50% { 
                transform: scale(1.2); 
                box-shadow: 0 0 15px #43b581, 0 0 25px rgba(67, 181, 129, 0.5);
            }
        }
        
        .online-user-info {
            flex: 1;
            min-width: 0;
            position: relative;
            z-index: 1;
        }
        
        .online-user-name {
            display: block;
            color: #fff;
            font-weight: 600;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: color 0.3s ease, transform 0.3s ease;
        }
        
        .online-user-card:hover .online-user-name {
            color: #ff6b6b;
            transform: translateX(3px);
        }
        
        .online-user-name.admin {
            color: #ffd700;
            font-weight: 700;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }
        
        .online-status {
            display: block;
            font-size: 11px;
            color: #43b581;
            margin-top: 2px;
            position: relative;
            z-index: 1;
        }
        
        /* Status when playing a game */
        .online-status.playing {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #ff6b35;
            font-weight: 500;
        }
        
        .online-status.playing .playing-icon {
            font-size: 10px;
            animation: controller-bounce 1s ease-in-out infinite;
        }
        
        .online-status.playing .playing-game {
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .online-console {
            display: block;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.4);
            margin-top: 1px;
        }
        
        /* User card when playing */
        .online-user-card.is-playing {
            background: rgba(255, 107, 53, 0.08);
            border-left: 2px solid #ff6b35;
        }
        
        .online-user-card.is-playing:hover {
            background: rgba(255, 107, 53, 0.15);
        }
        
        /* Playing indicator dot */
        .online-dot.playing {
            background: #ff6b35;
            box-shadow: 0 0 6px #ff6b35;
            animation: pulse-playing 1.5s ease-in-out infinite;
        }
        
        @keyframes controller-bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-2px); }
        }
        
        @keyframes pulse-playing {
            0%, 100% { 
                box-shadow: 0 0 4px #ff6b35;
                transform: scale(1);
            }
            50% { 
                box-shadow: 0 0 8px #ff6b35, 0 0 12px rgba(255, 107, 53, 0.5);
                transform: scale(1.1);
            }
        }
        
        .online-arrow {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.3);
            transition: all 0.3s;
        }
        
        .online-user-card:hover .online-arrow {
            color: #ff0040;
            transform: translateX(3px);
        }

        .live-chat.minimized {
            max-height: 80px;
            overflow: hidden;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .live-chat.minimized .chat-tabs,
        .live-chat.minimized .chat-content,
        .live-chat.minimized .chat-input-container,
        .live-chat.minimized .chat-login-overlay {
            display: none !important;
        }

        .chat-user-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 0, 64, 0.08));
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            transition: all 0.25s ease;
            cursor: pointer;
            position: relative;
        }

        .chat-user-card:hover {
            border-color: var(--red);
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.12), rgba(255, 102, 0, 0.12));
            transform: translateX(4px);
            box-shadow: 0 15px 35px rgba(255, 0, 64, 0.2);
        }

        .chat-message-card {
            align-items: flex-start;
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.08), rgba(0, 0, 0, 0.4));
        }

        .chat-message-card.bot-message {
            border-color: rgba(6, 182, 212, 0.6);
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(15, 23, 42, 0.7));
        }

        .chat-message-card.own {
            border-color: rgba(34, 197, 94, 0.6);
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(0, 0, 0, 0.5));
        }

        .chat-user-avatar {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
            border: 2px solid rgba(255, 255, 255, 0.12);
            background: linear-gradient(135deg, var(--red), var(--orange));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
        }

        .chat-user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .chat-avatar-advanced {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            color: #fff;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
        }

        .chat-avatar-emoji {
            font-size: 1.5rem;
        }

        .chat-message-body {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .chat-message-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .chat-username-btn,
        .chat-user-name {
            background: none;
            border: none;
            color: var(--yellow);
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            padding: 0;
            font-family: inherit;
        }

        .chat-username-btn:hover,
        .chat-user-name:hover {
            color: var(--red);
            text-decoration: underline;
        }

        .chat-message-text {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.5;
            word-break: break-word;
        }

        .chat-admin-badge,
        .chat-bot-badge {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 2px 6px;
            border-radius: 6px;
            font-weight: 700;
        }

        .chat-admin-badge {
            background: linear-gradient(135deg, #fcd34d, #f97316);
            color: #000;
            box-shadow: 0 0 10px rgba(249, 115, 22, 0.35);
        }

        .chat-bot-badge {
            background: linear-gradient(135deg, #06b6d4, #3b82f6);
            color: #fff;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.35);
        }

        .chat-status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
            background: #22c55e;
            flex-shrink: 0;
        }

        .chat-status-dot.offline {
            background: #64748b;
            box-shadow: 0 0 6px rgba(100, 116, 139, 0.5);
        }

        .chat-status-dot.bot {
            background: #0ea5e9;
            box-shadow: 0 0 8px rgba(14, 165, 233, 0.6);
        }

        .chat-user-status-text {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.7);
        }

        /* ═══════════════════════════════════════════════════════════════════════════
           🎮 NEW CHAT SYSTEM v2.0 STYLES - Modern Gaming Aesthetic
           ═══════════════════════════════════════════════════════════════════════════ */

        /* Chat Message Container */
        .chat-message {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.3));
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 16px;
            margin-bottom: 10px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .chat-message::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: linear-gradient(180deg, var(--red), var(--orange));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .chat-message:hover {
            border-color: rgba(255, 0, 64, 0.3);
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.08), rgba(0, 0, 0, 0.4));
            transform: translateX(4px);
        }

        .chat-message:hover::before {
            opacity: 1;
        }

        /* Bot Message Style */
        .chat-message.bot-message {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(15, 23, 42, 0.6));
            border-color: rgba(6, 182, 212, 0.3);
        }

        .chat-message.bot-message::before {
            background: linear-gradient(180deg, #06b6d4, #3b82f6);
            opacity: 1;
        }

        /* Own Message Style */
        .chat-message.own-message {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(0, 0, 0, 0.4));
            border-color: rgba(34, 197, 94, 0.3);
        }

        .chat-message.own-message::before {
            background: linear-gradient(180deg, #22c55e, #10b981);
            opacity: 1;
        }

        /* Chat Avatar */
        .chat-avatar {
            position: relative;
            flex-shrink: 0;
        }

        .chat-avatar .avatar-container {
            border: 2px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .chat-message:hover .chat-avatar .avatar-container {
            border-color: var(--red);
            box-shadow: 0 4px 20px rgba(255, 0, 64, 0.3);
        }

        /* Status Indicator */
        .status-indicator {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 3px solid var(--bg-color);
            transition: all 0.3s ease;
        }

        .status-indicator.online {
            background: #22c55e;
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
            animation: pulse-green 2s infinite;
        }

        .status-indicator.offline {
            background: #64748b;
            box-shadow: none;
        }

        .status-indicator.bot {
            background: linear-gradient(135deg, #06b6d4, #3b82f6);
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
            animation: pulse-blue 2s infinite;
        }

        @keyframes pulse-green {
            0%, 100% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.6); }
            50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.9); }
        }

        @keyframes pulse-blue {
            0%, 100% { box-shadow: 0 0 10px rgba(6, 182, 212, 0.6); }
            50% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.9); }
        }

        /* Chat Content - Only apply flex styles when active (avoids overriding display:none) */
        .chat-content.active {
            flex: 1;
            min-width: 0;
            flex-direction: column;
            gap: 6px;
        }

        .chat-header {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .chat-username {
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--yellow);
            cursor: pointer;
            transition: all 0.2s ease;
            text-shadow: 0 0 10px rgba(250, 204, 21, 0.3);
        }

        .chat-username:hover {
            color: var(--red);
            text-shadow: 0 0 15px rgba(255, 0, 64, 0.5);
        }

        .chat-time {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.4);
            margin-left: auto;
        }

        .chat-text {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            word-break: break-word;
            font-size: 0.95rem;
        }

        /* Badges */
        .admin-badge,
        .bot-badge {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            padding: 3px 8px;
            border-radius: 8px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .admin-badge {
            background: linear-gradient(135deg, #fcd34d, #f97316);
            color: #000;
            box-shadow: 0 2px 10px rgba(249, 115, 22, 0.4), inset 0 1px 0 rgba(255,255,255,0.3);
            animation: glow-gold 3s ease-in-out infinite;
        }

        @keyframes glow-gold {
            0%, 100% { box-shadow: 0 2px 10px rgba(249, 115, 22, 0.4); }
            50% { box-shadow: 0 2px 20px rgba(249, 115, 22, 0.7), 0 0 30px rgba(252, 211, 77, 0.3); }
        }

        .bot-badge {
            background: linear-gradient(135deg, #06b6d4, #3b82f6);
            color: #fff;
            box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
        }

        .admin-badge-small {
            font-size: 0.8rem;
            filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.5));
        }

        /* Online Users List */
        .online-user-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .online-user-item:hover {
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.1), rgba(0, 0, 0, 0.3));
            border-color: rgba(255, 0, 64, 0.3);
            transform: translateX(4px);
        }

        .online-user-avatar {
            position: relative;
            flex-shrink: 0;
        }

        .online-user-avatar .status-dot {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid var(--bg-color);
        }

        .online-user-avatar .status-dot.online {
            background: #22c55e;
            box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
        }

        .online-user-info {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .online-user-name {
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.9rem;
        }

        /* Empty States */
        .chat-empty-state,
        .online-empty-state {
            text-align: center;
            color: rgba(255, 255, 255, 0.5);
            padding: 2rem;
        }

        .chat-empty-state p,
        .online-empty-state p {
            margin: 0;
            font-size: 0.9rem;
        }

        /* Effects / Store Cards */
        .effect-card {
            display: grid;
            grid-template-columns: 120px 1fr;
            gap: 12px;
            padding: 12px;
            background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0,0,0,0.35));
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 14px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.35);
        }

        .effect-preview {
            width: 100%;
            height: 100px;
            border-radius: 12px;
            overflow: hidden;
        }

        .effect-info { display: flex; flex-direction: column; gap: 6px; }
        .effect-name { font-weight: 700; color: #fff; font-size: 1rem; }
        .effect-desc { color: rgba(255,255,255,0.6); font-size: 0.85rem; }
        .effect-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .effect-price { color: var(--yellow); font-weight: 700; }
        .effect-btn {
            background: linear-gradient(135deg, var(--red), var(--orange));
            border: none;
            color: #fff;
            padding: 8px 14px;
            border-radius: 10px;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .effect-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(255,0,64,0.35); }
        .effect-btn.active { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 10px 20px rgba(34,197,94,0.35); }

        /* User Profile Modal (view other users) - IMPROVED DESIGN */
        .user-profile-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 100001;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(20px);
            padding: 20px;
            box-sizing: border-box;
        }

        .user-profile-modal.active {
            display: flex;
        }

        .user-profile-content {
            width: 100%;
            max-width: 420px;
            max-height: 90vh;
            background: #0d0d0d;
            border-radius: 16px;
            overflow: hidden;
            overflow-y: auto;
            box-shadow: 
                0 0 0 1px rgba(255, 0, 64, 0.4),
                0 25px 60px rgba(0, 0, 0, 0.8),
                0 0 80px rgba(255, 0, 64, 0.15);
            animation: profileModalIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
        }

        .user-profile-content::-webkit-scrollbar {
            width: 5px;
        }

        .user-profile-content::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.5);
        }

        .user-profile-content::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--red), var(--orange));
            border-radius: 3px;
        }

        @keyframes profileModalIn {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(30px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* ========== AVATAR GALLERY STYLES ========== */
        .avatar-gallery-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 100002;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(20px);
            padding: 20px;
            box-sizing: border-box;
        }
        
        .avatar-gallery-modal.active {
            display: flex;
        }
        
        .avatar-gallery-content {
            width: 100%;
            max-width: 600px;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            background: linear-gradient(145deg, #0d0d0d 0%, #1a1a2e 100%);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 
                0 0 0 2px rgba(255, 102, 0, 0.5),
                0 30px 80px rgba(0, 0, 0, 0.9),
                0 0 100px rgba(255, 102, 0, 0.2);
            animation: avatarModalIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        @keyframes avatarModalIn {
            from {
                opacity: 0;
                transform: scale(0.8) translateY(30px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        .avatar-gallery-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            background: linear-gradient(90deg, rgba(255,102,0,0.15), rgba(255,0,64,0.15));
            border-bottom: 1px solid rgba(255, 102, 0, 0.3);
        }
        
        .avatar-gallery-header h2 {
            font-family: 'Black Ops One', cursive;
            font-size: 1.5rem;
            background: linear-gradient(135deg, #ff6600, #ff0040);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0;
        }
        
        .avatar-gallery-close {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: #fff;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .avatar-gallery-close:hover {
            background: #ff0040;
            transform: rotate(90deg);
        }
        
        .avatar-preview-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 24px;
            background: rgba(0, 0, 0, 0.3);
        }
        
        .avatar-preview-container {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6600, #ff0040);
            padding: 4px;
            box-shadow: 
                0 0 30px rgba(255, 102, 0, 0.4),
                0 0 60px rgba(255, 0, 64, 0.2);
            animation: avatarPreviewGlow 2s ease-in-out infinite;
        }
        
        @keyframes avatarPreviewGlow {
            0%, 100% { box-shadow: 0 0 30px rgba(255, 102, 0, 0.4), 0 0 60px rgba(255, 0, 64, 0.2); }
            50% { box-shadow: 0 0 40px rgba(255, 102, 0, 0.6), 0 0 80px rgba(255, 0, 64, 0.4); }
        }
        
        .avatar-preview-container img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            background: #1a1a2e;
        }
        
        .avatar-preview-name {
            margin-top: 12px;
            font-size: 1rem;
            color: #fff;
            font-weight: 600;
        }
        
        .avatar-category-tabs {
            display: flex;
            gap: 8px;
            padding: 12px 20px;
            overflow-x: auto;
            background: rgba(0, 0, 0, 0.2);
            border-bottom: none;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .avatar-category-tabs::-webkit-scrollbar {
            height: 4px;
        }
        
        .avatar-category-tabs::-webkit-scrollbar-thumb {
            background: #ff6600;
            border-radius: 2px;
        }
        
        .avatar-tab {
            padding: 10px 14px;
            border-radius: 50%;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.1);
            color: #aaa;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .avatar-category-label {
            text-align: center;
            padding: 6px 0 2px;
            font-size: 0.85rem;
            font-weight: 700;
            color: #ff6600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        
        .avatar-tab:hover {
            background: rgba(255, 102, 0, 0.2);
            color: #fff;
        }
        
        .avatar-tab.active {
            background: linear-gradient(135deg, #ff6600, #ff0040);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 4px 15px rgba(255, 102, 0, 0.4);
        }
        
        .avatar-gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            padding: 20px;
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .avatar-gallery-grid::-webkit-scrollbar {
            width: 6px;
        }
        
        .avatar-gallery-grid::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 3px;
        }
        
        .avatar-gallery-grid::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #ff6600, #ff0040);
            border-radius: 3px;
        }
        
        .avatar-item {
            aspect-ratio: 1;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            background: linear-gradient(135deg, #1a1a2e, #0d0d0d);
            padding: 3px;
            border: 2px solid transparent;
        }
        
        .avatar-item img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .avatar-item:hover {
            transform: scale(1.1);
            border-color: rgba(255, 102, 0, 0.5);
            box-shadow: 0 0 20px rgba(255, 102, 0, 0.4);
        }
        
        .avatar-item.selected {
            border-color: #ff6600;
            box-shadow: 0 0 25px rgba(255, 102, 0, 0.6);
        }
        
        .avatar-item.selected::after {
            content: '✓';
            position: absolute;
            bottom: -5px;
            right: -5px;
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, #22c55e, #16a34a);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #fff;
            font-weight: bold;
            box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
        }
        
        .avatar-item.locked {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .avatar-item.locked::before {
            content: '🔒';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            z-index: 2;
        }
        
        .avatar-rarity {
            position: absolute;
            top: -5px;
            left: -5px;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
        }
        
        .avatar-rarity.common { background: #666; color: #fff; }
        .avatar-rarity.rare { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; }
        .avatar-rarity.epic { background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; }
        .avatar-rarity.legendary { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #000; }
        
        .avatar-gallery-actions {
            display: flex;
            gap: 12px;
            padding: 20px;
            flex: 0 0 auto;
            background: rgba(0, 0, 0, 0.3);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: calc(20px + env(safe-area-inset-bottom));
        }
        
        .avatar-cancel-btn, .avatar-select-btn {
            flex: 1;
            padding: 14px 24px;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
        }
        
        .avatar-cancel-btn {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }
        
        .avatar-cancel-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .avatar-select-btn {
            background: linear-gradient(135deg, #ff6600, #ff0040);
            color: #fff;
            box-shadow: 0 4px 15px rgba(255, 102, 0, 0.4);
        }
        
        .avatar-select-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 102, 0, 0.5);
        }
        
        .avatar-select-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* ========== MODERN GAMING PROFILE MODAL STYLES ========== */
        .user-profile-content {
            position: relative;
            overflow-y: auto;
            overflow-x: hidden;
            max-height: 90vh;
            background: linear-gradient(180deg, #0a0a0f 0%, #12121a 50%, #0d0d14 100%);
            border: 1px solid rgba(255, 0, 64, 0.3);
            box-shadow: 
                0 0 60px rgba(255, 0, 64, 0.15),
                0 25px 80px rgba(0, 0, 0, 0.8),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        
        /* Modern Gaming Scrollbar for Profile Modal */
        .user-profile-content::-webkit-scrollbar {
            width: 8px;
        }
        
        .user-profile-content::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
        }
        
        .user-profile-content::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #ff0040, #ff6600);
            border-radius: 10px;
            border: 2px solid transparent;
            background-clip: padding-box;
            box-shadow: 0 0 10px rgba(255, 0, 64, 0.5);
        }
        
        .user-profile-content::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #ff3366, #ff8833);
            box-shadow: 0 0 15px rgba(255, 0, 64, 0.8);
        }
        
        /* Firefox scrollbar */
        .user-profile-content {
            scrollbar-width: thin;
            scrollbar-color: #ff0040 rgba(0, 0, 0, 0.3);
        }
        
        .user-profile-bg-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            opacity: 0.6;
        }

        /* Store-bought CSS backgrounds applied to viewed-profile modal.
           Reuses the same `bg-*` classes as the avatar effect, but
           overrides their avatar-scoped sizing/shape so they cover the
           entire modal instead of being cropped behind the avatar. */
        .user-profile-bg-effect {
            position: absolute;
            inset: 0;
            width: 100%;
            min-height: 100%;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
            opacity: 1;
        }
        .user-profile-bg-effect[class*=" bg-"],
        .user-profile-bg-effect[class^="bg-"] {
            border-radius: 0 !important;
            left: 0 !important;
            top: 0 !important;
            width: 100% !important;
            height: 100% !important;
            /* Avatar effects use heavy blur + scale animations that look
               broken at modal scale. Neutralize them so the gradient
               actually fills the panel cleanly. */
            filter: none !important;
            animation: none !important;
            transform: none !important;
            box-shadow: none !important;
            background-size: cover, cover, cover, cover !important;
            background-repeat: no-repeat !important;
        }
        .user-profile-bg-effect::before {
            border-radius: 0 !important;
            width: 100% !important;
            height: 100% !important;
            inset: 0 !important;
            animation: twinkleStars 4s ease-in-out infinite !important;
        }
        
        .profile-bg-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                180deg, 
                rgba(10, 10, 15, 0.4) 0%,
                rgba(10, 10, 15, 0.7) 20%,
                rgba(10, 10, 15, 0.85) 40%,
                rgba(10, 10, 15, 0.95) 100%
            );
            z-index: 1;
            pointer-events: none;
        }
        
        .user-profile-close-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .user-profile-close-btn:hover {
            background: rgba(255, 0, 64, 0.8);
            color: #fff;
            transform: rotate(90deg);
            border-color: transparent;
        }
        
        /* Profile Header Section */
        .profile-header-section {
            position: relative;
            z-index: 10;
            padding: 40px 24px 24px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            overflow: visible;
        }
        
        /* Avatar Wrapper with Hexagon Effect - ENHANCED */
        #userProfileModal .profile-avatar-wrapper {
            position: relative;
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible !important;
        }
        
        /* 💎 Base Profile Avatar Glow - Static by default */
        .profile-avatar-glow {
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #ff0040, #ff6600, #ffaa00, #ff6600, #ff0040);
            animation: none;
            filter: blur(12px);
            opacity: 0.6;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 0;
            pointer-events: none;
            transition: all 0.3s ease;
        }
        
        /* Base glow when no effect is applied - STATIC */
        .profile-avatar-glow:not([class*="border-"]) {
            background: conic-gradient(from 0deg, #ff0040, #ff6600, #ffaa00, #ff6600, #ff0040);
            animation: none;
            filter: blur(10px);
            opacity: 0.5;
        }
        
        /* Only rotate when a special border effect class is added */
        .profile-avatar-glow[class*="border-"] {
            animation: glowRotate 3s linear infinite;
            opacity: 0.8;
        }
        
        @keyframes glowRotate {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        .profile-avatar-hexagon {
            position: relative;
            width: 130px;
            height: 130px;
            background: linear-gradient(135deg, #ff0040, #ff6600);
            border-radius: 50%;
            padding: 5px;
            box-shadow: 
                0 0 30px rgba(255, 0, 64, 0.5),
                0 10px 40px rgba(0, 0, 0, 0.5);
            z-index: 2;
        }
        
        .profile-avatar-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
            background: #1a1a2e;
        }
        
        .profile-avatar-inner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .profile-online-indicator {
            position: absolute;
            bottom: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            background: #43b581;
            border: 4px solid #0a0a0f;
            border-radius: 50%;
            z-index: 3;
            box-shadow: 0 0 15px rgba(67, 181, 129, 0.6);
            animation: onlinePulse 2s ease-in-out infinite;
        }
        
        @keyframes onlinePulse {
            0%, 100% { box-shadow: 0 0 15px rgba(67, 181, 129, 0.6); }
            50% { box-shadow: 0 0 25px rgba(67, 181, 129, 0.9); }
        }
        
        /* Username Section */
        .profile-username-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        
        .profile-username {
            font-family: 'Black Ops One', 'Russo One', cursive;
            font-size: 1.8rem;
            color: #fff;
            margin: 0;
            text-shadow: 0 2px 20px rgba(255, 0, 64, 0.5);
            letter-spacing: 1px;
        }
        
        .profile-badges {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .badge-verified {
            display: none;
            background: linear-gradient(135deg, #5865f2, #7289da);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 12px;
            color: #fff;
            font-weight: 600;
        }
        
        .badge-admin {
            display: none;
            background: linear-gradient(135deg, #ffd700, #ff8c00);
            padding: 5px 12px;
            border-radius: 6px;
            font-size: 12px;
            color: #000;
            font-weight: 700;
            box-shadow: 0 2px 15px rgba(255, 215, 0, 0.4);
            animation: adminGlow 2s ease-in-out infinite;
        }
        
        @keyframes adminGlow {
            0%, 100% { box-shadow: 0 2px 15px rgba(255, 215, 0, 0.4); }
            50% { box-shadow: 0 2px 25px rgba(255, 215, 0, 0.7); }
        }
        
        /* Status Row */
        .profile-status-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            backdrop-filter: blur(10px);
        }
        
        .status-dot {
            width: 10px;
            height: 10px;
            background: #43b581;
            border-radius: 50%;
            animation: statusBlink 2s ease-in-out infinite;
        }
        
        @keyframes statusBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .status-text {
            color: #43b581;
            font-size: 13px;
            font-weight: 600;
        }
        
        .status-activity {
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
        }
        
        /* Rank Cards */
        .profile-rank-cards {
            display: flex;
            gap: 12px;
            margin-top: 8px;
        }
        
        .rank-card {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 13px;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .rank-card:hover {
            transform: translateY(-3px);
        }
        
        .level-card {
            background: linear-gradient(135deg, rgba(255, 0, 64, 0.2), rgba(255, 102, 0, 0.2));
            border: 1px solid rgba(255, 0, 64, 0.3);
            color: #ff6600;
        }
        
        .tier-card {
            background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), rgba(255, 215, 0, 0.2));
            border: 1px solid rgba(205, 127, 50, 0.3);
            color: #ffd700;
        }
        
        .rank-icon {
            font-size: 16px;
        }
        
        /* XP Section */
        .profile-xp-section {
            position: relative;
            z-index: 10;
            padding: 0 24px 20px;
        }
        
        .xp-bar-container {
            position: relative;
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            overflow: hidden;
        }
        
        .xp-bar-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #ff0040, #ff6600, #ffaa00);
            border-radius: 10px;
            transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        
        .xp-bar-shine {
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: xpShine 2s infinite;
        }
        
        @keyframes xpShine {
            0% { left: -100%; }
            100% { left: 200%; }
        }
        
        .xp-text {
            display: flex;
            justify-content: flex-end;
            gap: 4px;
            margin-top: 6px;
            font-size: 11px;
        }
        
        .xp-current { color: #ff6600; font-weight: 600; }
        .xp-separator { color: rgba(255,255,255,0.3); }
        .xp-max { color: rgba(255,255,255,0.5); }
        
        /* Stats Grid */
        .profile-stats-grid {
            position: relative;
            z-index: 10;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            padding: 0 24px 20px;
        }
        
        .stat-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 16px 12px;
            text-align: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .stat-card:hover {
            background: rgba(255, 0, 64, 0.1);
            border-color: rgba(255, 0, 64, 0.3);
            transform: translateY(-4px);
        }
        
        .stat-icon {
            font-size: 24px;
            margin-bottom: 8px;
        }
        
        .stat-value {
            font-family: 'Russo One', sans-serif;
            font-size: 1.5rem;
            color: #fff;
            font-weight: 700;
        }
        
        .stat-label {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 4px;
        }
        
        /* Info Container */
        .profile-info-container {
            position: relative;
            z-index: 10;
            padding: 0 24px 24px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        /* Member Badge */
        .profile-member-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 10px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
            line-height: 1.4;
        }
        
        .member-icon { font-size: 14px; }

        .member-text {
            min-width: 0;
        }

        #userProfileHours {
            font-size: clamp(1rem, 4vw, 1.35rem);
            line-height: 1.15;
            white-space: nowrap;
        }
        
        /* Profile Cards */
        .profile-card {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 16px;
            padding: 16px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.3s;
        }
        
        .profile-card:hover {
            border-color: rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.05);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .card-icon { font-size: 16px; }
        
        .card-title {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255, 255, 255, 0.7);
        }
        
        .card-content {
            color: rgba(255, 255, 255, 0.9);
            font-size: 13px;
            line-height: 1.5;
            margin: 0;
        }
        
        /* Specific Card Styles */
        .about-card {
            border-left: 3px solid #ff0040;
            padding: 12px;
        }
        
        .about-card .card-title { color: #ff6b6b; }
        
        /* Profile Chat Demo Style */
        .profile-chat-demo {
            margin-top: 8px;
        }
        
        .profile-chat-demo .chat-message-box {
            background: rgba(255, 255, 255, 0.03);
            transition: all 0.3s ease;
        }

        .activity-card {
            border-left: 3px solid #22c55e;
        }

        .activity-card .card-title { color: #4ade80; }

        .activity-day-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .activity-day-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            background: rgba(34, 197, 94, 0.06);
            border: 1px solid rgba(34, 197, 94, 0.14);
            border-radius: 10px;
        }

        .activity-day-main {
            min-width: 0;
        }

        .activity-day-date {
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .activity-day-meta {
            color: rgba(255, 255, 255, 0.45);
            font-size: 10px;
            margin-top: 3px;
        }

        .activity-day-time {
            color: #4ade80;
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
            text-align: right;
        }
        
        .trophy-card {
            border-left: 3px solid #ffd700;
        }
        
        .trophy-card .card-title { color: #ffd700; }
        
        .trophy-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .trophy-item {
            padding: 6px 12px;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.1));
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 8px;
            font-size: 11px;
            color: #ffd700;
            font-weight: 600;
        }
        
        .consoles-card {
            border-left: 3px solid #ff0040;
        }
        
        .consoles-card .card-title { color: #ff6b6b; }
        
        .consoles-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .console-tag {
            padding: 6px 12px;
            background: rgba(255, 0, 64, 0.1);
            border: 1px solid rgba(255, 0, 64, 0.2);
            border-radius: 8px;
            font-size: 11px;
            color: #ff6b6b;
            font-weight: 600;
        }
        
        .games-card {
            border-left: 3px solid #00d4ff;
        }
        
        .games-card .card-title { color: #00d4ff; }
        
        .games-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .game-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px;
            background: rgba(0, 212, 255, 0.05);
            border-radius: 10px;
            transition: all 0.3s;
        }
        
        .game-item:hover {
            background: rgba(0, 212, 255, 0.1);
        }
        
        .game-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #00d4ff, #7b68ee);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        
        /* Game Cover Thumbnail for Profile Recent Games */
        .game-cover-thumb {
            width: 42px;
            height: 56px;
            background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(0, 212, 255, 0.3);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            position: relative;
        }
        
        .game-cover-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .game-item:hover .game-cover-thumb img {
            transform: scale(1.1);
        }
        
        .game-cover-thumb .cover-fallback {
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            background: linear-gradient(135deg, #00d4ff20, #7b68ee20);
        }
        
        .game-info {
            flex: 1;
        }
        
        .game-name {
            color: #fff;
            font-weight: 600;
            font-size: 12px;
        }
        
        .game-meta {
            color: rgba(255, 255, 255, 0.4);
            font-size: 10px;
        }
        
        .no-games {
            color: rgba(255, 255, 255, 0.4);
            font-size: 12px;
            text-align: center;
            padding: 16px;
        }
        
        /* 💎 Border Effect Classes for Avatar - ULTRA ENHANCED */
        .profile-avatar-glow.border-rainbow-spin {
            width: 160px !important;
            height: 160px !important;
            background: conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000) !important;
            animation: borderGlowRotate 1.2s linear infinite !important;
            filter: blur(15px) !important;
            opacity: 1 !important;
            box-shadow: 
                0 0 40px rgba(255, 0, 0, 0.6), 
                0 0 60px rgba(255, 127, 0, 0.4), 
                0 0 80px rgba(0, 255, 0, 0.3),
                0 0 100px rgba(0, 0, 255, 0.2);
        }
        
        .profile-avatar-glow.border-neon-pulse {
            width: 160px !important;
            height: 160px !important;
            background: linear-gradient(45deg, #00f0ff, #ff00ff, #00f0ff) !important;
            background-size: 200% 200%;
            animation: borderNeonPulse 1.5s ease-in-out infinite !important;
            filter: blur(18px) !important;
            opacity: 1 !important;
            box-shadow: 0 0 40px #00f0ff, 0 0 80px #ff00ff, 0 0 120px rgba(0, 240, 255, 0.3);
        }
        
        @keyframes borderGlowRotate {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        @keyframes borderNeonPulse {
            0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); background-position: 0% 50%; }
            50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); background-position: 100% 50%; }
        }
        
        .profile-avatar-glow.border-fire-ring {
            width: 160px !important;
            height: 160px !important;
            background: conic-gradient(from 0deg, #ff4500, #ff8c00, #ffd700, #ff8c00, #ff4500) !important;
            animation: borderGlowRotate 1s linear infinite !important;
            filter: blur(18px) !important;
            opacity: 1 !important;
            box-shadow: 
                0 0 50px rgba(255, 69, 0, 0.9), 
                0 0 100px rgba(255, 140, 0, 0.6),
                0 0 150px rgba(255, 200, 0, 0.3);
        }
        
        .profile-avatar-glow.border-frost {
            width: 160px !important;
            height: 160px !important;
            background: conic-gradient(from 0deg, #00bfff, #87ceeb, #ffffff, #e0ffff, #87ceeb, #00bfff) !important;
            animation: borderGlowRotate 2.5s linear infinite reverse !important;
            filter: blur(18px) !important;
            opacity: 1 !important;
            box-shadow: 
                0 0 50px rgba(135, 206, 235, 0.9), 
                0 0 100px rgba(0, 191, 255, 0.6),
                0 0 150px rgba(200, 230, 255, 0.3);
        }
        
        .profile-avatar-glow.border-electric {
            width: 160px !important;
            height: 160px !important;
            background: conic-gradient(from 0deg, transparent 0deg, #00ff88 15deg, #ffff00 30deg, transparent 45deg, transparent 90deg, #00ff88 105deg, #ffff00 120deg, transparent 135deg, transparent 180deg, #00ff88 195deg, #ffff00 210deg, transparent 225deg, transparent 270deg, #00ff88 285deg, #ffff00 300deg, transparent 315deg) !important;
            animation: borderElectricSpark 0.2s linear infinite !important;
            filter: blur(12px) !important;
            opacity: 1 !important;
            box-shadow: 
                0 0 60px rgba(0, 255, 136, 0.9), 
                0 0 120px rgba(255, 255, 0, 0.5);
        }
        
        @keyframes borderElectricSpark {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        .profile-avatar-glow.border-golden-crown {
            width: 160px !important;
            height: 160px !important;
            background: conic-gradient(from 0deg, #ffd700 0deg, #ffec8b 30deg, #fff8dc 60deg, #ffd700 90deg, #b8860b 120deg, #ffd700 150deg, #ffec8b 180deg, #fff8dc 210deg, #ffd700 240deg, #b8860b 270deg, #ffd700 300deg, #ffec8b 330deg, #ffd700 360deg) !important;
            animation: borderGoldRotate 2.5s linear infinite !important;
            filter: blur(16px) !important;
            opacity: 1 !important;
            box-shadow: 
                0 0 60px rgba(255, 215, 0, 1), 
                0 0 120px rgba(218, 165, 32, 0.6),
                0 0 180px rgba(255, 215, 0, 0.3);
        }
        
        @keyframes borderGoldRotate {
            0% { transform: translate(-50%, -50%) rotate(0deg); filter: blur(16px) brightness(1); }
            50% { filter: blur(20px) brightness(1.3); }
            100% { transform: translate(-50%, -50%) rotate(360deg); filter: blur(16px) brightness(1); }
        }
        
        .profile-avatar-glow.border-plasma {
            width: 160px !important;
            height: 160px !important;
            background: conic-gradient(from 0deg, #ff00ff, #00ffff, #ff00ff, #ffff00, #ff00ff) !important;
            animation: borderGlowRotate 0.8s linear infinite !important;
            filter: blur(20px) !important;
            opacity: 1 !important;
            box-shadow: 
                0 0 50px rgba(255, 0, 255, 0.9), 
                0 0 100px rgba(0, 255, 255, 0.6),
                0 0 150px rgba(255, 255, 0, 0.3);
        }
        
        .profile-avatar-glow.border-diamond {
            width: 160px !important;
            height: 160px !important;
            background: conic-gradient(from 0deg, #e0ffff, #ffffff, #b0e0e6, #ffffff, #e0ffff, #ffffff, #b0e0e6, #ffffff, #e0ffff) !important;
            animation: borderDiamondSparkle 3s linear infinite !important;
            filter: blur(14px) !important;
            opacity: 1 !important;
            box-shadow: 
                0 0 60px rgba(224, 255, 255, 1), 
                0 0 120px rgba(176, 224, 230, 0.7),
                0 0 180px rgba(255, 255, 255, 0.4);
        }
        
        @keyframes borderDiamondSparkle {
            0% { transform: translate(-50%, -50%) rotate(0deg); filter: blur(14px) brightness(1); }
            25% { filter: blur(12px) brightness(1.5); }
            50% { transform: translate(-50%, -50%) rotate(180deg); filter: blur(16px) brightness(1.2); }
            100% { transform: translate(-50%, -50%) rotate(360deg); filter: blur(14px) brightness(1); }
        }
        
        .profile-avatar-glow.border-nebula-ring {
            width: 160px !important;
            height: 160px !important;
            background: conic-gradient(from 0deg, #8b00ff, #ff1493, #00bfff, #8b00ff) !important;
            animation: borderGlowRotate 4s linear infinite !important;
            filter: blur(22px) !important;
            opacity: 1 !important;
            box-shadow: 
                0 0 60px rgba(139, 0, 255, 0.9), 
                0 0 120px rgba(255, 20, 147, 0.6),
                0 0 180px rgba(0, 191, 255, 0.3);
        }
        
        .profile-avatar-glow.border-ion-core {
            width: 160px !important;
            height: 160px !important;
            background: radial-gradient(circle, #00ff00 0%, #00ffff 40%, #0088ff 70%, #0000ff 100%) !important;
            animation: borderIonPulse 0.6s ease-in-out infinite !important;
            filter: blur(18px) !important;
            opacity: 1 !important;
            box-shadow: 
                0 0 50px rgba(0, 255, 0, 0.9), 
                0 0 100px rgba(0, 255, 255, 0.6),
                0 0 150px rgba(0, 0, 255, 0.3);
        }
        
        @keyframes borderIonPulse {
            0%, 100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.8; }
            50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
        }
        
        .avatar-gallery-btn {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            border: none;
            color: #fff;
            padding: 10px 16px;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 8px;
        }
        
        .avatar-gallery-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.5);
        }
        
        @media (max-width: 500px) {
            .avatar-gallery-modal {
                padding: 0;
            }
            .avatar-gallery-content {
                max-height: 100dvh;
                height: 100dvh;
                border-radius: 0;
            }
            .avatar-gallery-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
            }
            .avatar-preview-section {
                padding: 14px;
            }
            .avatar-preview-container {
                width: 84px;
                height: 84px;
            }
            .avatar-category-tabs {
                gap: 6px;
            }
            .avatar-tab {
                padding: 8px;
                width: 40px;
                height: 40px;
                font-size: 1.1rem;
            }
        }

        .user-profile-banner {
            height: 140px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
        }

        .user-profile-banner canvas {
            width: 100%;
            height: 100%;
            display: block;
            opacity: 0.7;
        }
        
        /* Full modal background canvas - covers entire modal */
        .user-profile-bg-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            opacity: 0.8;
        }
        
        .user-profile-body {
            position: relative;
            z-index: 1;
            background: transparent;
        }

        .user-profile-avatar-wrapper {
            position: absolute;
            bottom: -60px;
            left: 30px;
            z-index: 10;
        }

        .user-profile-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 6px solid #0d1117;
            object-fit: cover;
            background: linear-gradient(135deg, var(--red), var(--orange));
            box-shadow: 
                0 0 0 4px rgba(255, 0, 64, 0.5),
                0 0 40px rgba(255, 0, 64, 0.5),
                0 15px 50px rgba(0, 0, 0, 0.6);
            animation: avatarPulse 2s ease-in-out infinite;
            display: block;
        }

        @keyframes avatarPulse {
            0%, 100% { box-shadow: 0 0 0 3px rgba(255, 0, 64, 0.5), 0 0 30px rgba(255, 0, 64, 0.4), 0 10px 40px rgba(0, 0, 0, 0.5); }
            50% { box-shadow: 0 0 0 5px rgba(255, 102, 0, 0.6), 0 0 50px rgba(255, 102, 0, 0.5), 0 10px 40px rgba(0, 0, 0, 0.5); }
        }

        .user-profile-body {
            padding: 75px 25px 25px;
        }

        .user-profile-name {
            font-family: 'Russo One', sans-serif;
            font-size: 1.6rem;
            color: white;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-profile-status {
            color: #43b581;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .user-profile-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin: 20px 0;
            padding: 20px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
        }

        .user-profile-stats::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: statsShine 3s infinite;
        }

        @keyframes statsShine {
            0% { left: -100%; }
            50%, 100% { left: 100%; }
        }

        .user-profile-stat {
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .user-profile-stat-value {
            font-family: 'Black Ops One', cursive;
            font-size: 1.8rem;
            background: linear-gradient(135deg, var(--yellow), var(--orange));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
            animation: statGlow 2s ease-in-out infinite;
        }

        @keyframes statGlow {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.2); }
        }

        .user-profile-stat-label {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.7);
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 1px;
        }

        .user-profile-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.5);
            border: none;
            color: white;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.2s ease;
        }

        .user-profile-close:hover {
            background: var(--red);
            transform: scale(1.1);
        }


/* ═══════════════════════════════════════════════════════════════
   ADMIN BADGE — CANONICAL DEFINITION (2026-05-27)
   ═══════════════════════════════════════════════════════════════
   Earlier in this file there are three competing `.admin-badge`
   blocks (lines 10611, 12833, 19840) with different gradients,
   paddings and animations. Whichever ones cascade last "won" by
   accident, which made the badge look different on the profile
   card vs the chat list vs the leaderboard. This block is the
   source of truth — gold gradient, drop-shadow, subtle glow.
*/
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ffd700, #f97316);
    color: #1a0e02;
    font-family: 'Russo One', 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid rgba(255, 215, 0, 0.55);
    box-shadow:
        0 2px 12px rgba(249, 115, 22, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    animation: ogAdminGlow 3s ease-in-out infinite;
}
.admin-badge::before {
    content: '👑';
    font-size: 0.85em;
    line-height: 1;
}
.admin-badge.admin-badge--small {
    padding: 2px 6px;
    font-size: 0.6rem;
    border-radius: 5px;
}
@keyframes ogAdminGlow {
    0%, 100% { box-shadow: 0 2px 12px rgba(249, 115, 22, 0.45), inset 0 1px 0 rgba(255,255,255,0.35); }
    50%      { box-shadow: 0 4px 24px rgba(249, 115, 22, 0.75), 0 0 36px rgba(255, 215, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.4); }
}

/* Avatar accent ring for admins so they stand out everywhere
   (chat list, online list, profile cards). The previous code
   added the ring inline only in some places. */
.user-avatar.is-admin,
.online-avatar-wrapper.is-admin .online-avatar,
.chat-avatar.is-admin {
    box-shadow: 0 0 0 2px #ffd700, 0 0 14px rgba(255, 215, 0, 0.55);
    border-color: #ffd700 !important;
}