@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Orbitron', monospace;
            background: linear-gradient(135deg, #0c0c1a 0%, #1a0a2e 50%, #000 100%);
            color: #fff;
            overflow-x: hidden;
        }
        
        .navbar {
            display: flex; justify-content: space-between;
            padding: 1rem 2rem; 
            background: rgba(20, 0, 40, 0.95);
            backdrop-filter: blur(20px); 
            border-bottom: 1px solid rgba(120, 0, 255, 0.3);
            position: fixed; top: 0; width: 100%; z-index: 1000;
        }
        
        .logo { 
            font-size: 1.8rem; 
            font-weight: 900; 
            background: linear-gradient(45deg, #ff00ff, #00ffff);
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .nav-links { display: flex; align-items: center; }
        .nav-links a {
            color: #00ff88; text-decoration: none;
            margin: 0 2rem 0 0; font-weight: 700;
            font-size: 1.1rem; 
            position: relative;
            transition: all 0.3s;
        }
        .nav-links a::after {
            content: ''; position: absolute; width: 0; height: 2px;
            bottom: -5px; left: 0; background: linear-gradient(90deg, #ff00ff, #00ff88);
            transition: width 0.3s;
        }
        .nav-links a:hover::after { width: 100%; }
        .nav-links a:hover { text-shadow: 0 0 15px #00ff88; }
        
        .hero {
            text-align: center; padding: 10rem 2rem 6rem;
            background: linear-gradient(135deg, rgba(120,0,255,0.1), rgba(0,255,136,0.1));
            margin-top: 70px;
        }
        
        .title {
            font-size: clamp(1.5rem, 5vw, 3rem); 
            font-weight: 900;
            background: linear-gradient(45deg, #ff00ff, #00ffff, #00ff88, #ffaa00);
            background-size: 300% 300%;
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: neonShift 4s ease infinite, neonGlow 2s ease-in-out infinite alternate;
            margin-bottom: 1.5rem;
            text-shadow: 0 0 1px rgba(255,0,255,0.6);
        }
        
        @keyframes neonShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        @keyframes neonGlow {
            from { filter: drop-shadow(0 0 20px #ff00ff); }
            to { filter: drop-shadow(0 0 40px #00ffff); }
        }
        
        .subtitle { 
            font-size: 1.8rem; 
            opacity: 0.9; 
            font-weight: 400;
            background: linear-gradient(90deg, #00ff88, #ff00ff);
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent;
        }
        
        .games-grid {
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 2.5rem; 
            padding: 5rem 2rem; 
            max-width: 1600px; 
            margin: 0 auto;
        }
        
        .game-card {
            position: relative; 
            height: 300px; 
            border-radius: 25px;
            overflow: hidden; 
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            box-shadow: 0 20px 60px rgba(0,0,0,0.7);
            border: 2px solid rgba(120,0,255,0.3);
        }
        
        .game-card:hover {
            transform: translateY(-25px) scale(1.04);
            box-shadow: 0 40px 100px rgba(255,0,255,0.4);
            border: 2px solid rgba(255,0,255,0.8);
        }
        
        .game-card::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.7s;
        }
        .game-card:hover::before { left: 100%; }
        
        .game-card img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            transition: transform 0.6s; 
        }
        .game-card:hover img { transform: scale(1.15); }
        
        .card-overlay {
            position: absolute; 
            bottom: 0; left: 0; right: 0;
            background: linear-gradient(transparent 0%, rgba(12,12,26,0.95) 30%);
            padding: 3rem 2rem 2rem; 
            transform: translateY(100%);
            transition: all 0.6s ease;
        }
        .game-card:hover .card-overlay { transform: translateY(0); }
        
        .card-overlay h3 {
            font-size: 1.7rem; 
            margin-bottom: 1.2rem; 
            font-weight: 900;
            background: linear-gradient(45deg, #00ffff, #00ff88);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .best-player {
            background: linear-gradient(135deg, #ffd700, #ff6b6b, #4ecdc4);
            color: #000; 
            padding: 1rem 2rem; 
            border-radius: 30px;
            font-size: 1.1rem; 
            font-weight: 900; 
            margin-bottom: 1.8rem;
            box-shadow: 0 8px 30px rgba(255,215,0,0.6);
            display: inline-block; 
            animation: goldPulse 2s infinite;
            border: 2px solid rgba(255,255,255,0.3);
        }
        
        @keyframes goldPulse {
            0%, 100% { 
                box-shadow: 0 8px 30px rgba(255,215,0,0.6), 0 0 20px rgba(255,0,255,0.3);
            }
            50% { 
                box-shadow: 0 12px 40px rgba(255,215,0,0.9), 0 0 40px rgba(0,255,136,0.6);
            }
        }
        
        .btn {
            display: inline-block; 
            background: linear-gradient(45deg, #ff00ff, #00ffff);
            color: #000; 
            padding: 1.1rem 2.5rem; 
            text-decoration: none;
            border-radius: 50px; 
            font-weight: 900; 
            font-size: 1.1rem;
            transition: all 0.4s; 
            box-shadow: 0 8px 25px rgba(255,0,255,0.4);
            border: 2px solid rgba(255,255,255,0.2);
        }
        .btn:hover {
            box-shadow: 0 15px 40px rgba(0,255,136,0.6);
            transform: translateY(-4px) scale(1.08);
            background: linear-gradient(45deg, #00ffff, #00ff88);
        }
        
        .why-us {
            text-align: center; 
            padding: 8rem 2rem;
            background: rgba(26,10,46,0.5); 
            border-top: 1px solid rgba(120,0,255,0.4);
            border-bottom: 1px solid rgba(0,255,136,0.3);
        }
        
        .why-us h2 {
            font-size: 4rem; 
            margin-bottom: 4rem;
            background: linear-gradient(45deg, #ff00ff, #00ffff);
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: neonGlow 2s ease-in-out infinite alternate;
        }
        
        .features { 
            display: flex; 
            justify-content: center; 
            gap: 3.5rem; 
            flex-wrap: wrap; 
        }
        
        .feature {
            background: rgba(255,255,255,0.05); 
            padding: 2.5rem 3.5rem;
            border-radius: 25px; 
            backdrop-filter: blur(25px);
            border: 2px solid rgba(120,0,255,0.3);
            transition: all 0.5s; 
            font-weight: 700; 
            min-width: 250px;
            font-size: 1.2rem;
            position: relative;
            overflow: hidden;
        }
        
        .feature::before {
            content: ''; position: absolute; top: 0; left: -100%;
            width: 100%; height: 100%; 
            background: linear-gradient(90deg, transparent, rgba(0,255,136,0.2), transparent);
            transition: left 0.6s;
        }
        
        .feature:hover::before { left: 100%; }
        .feature:hover {
            background: rgba(0,255,136,0.15);
            box-shadow: 0 30px 80px rgba(0,255,136,0.4);
            transform: translateY(-15px);
            border-color: rgba(0,255,136,0.8);
        }
        
        @media (max-width: 768px) {
            .nav-links { flex-direction: column; gap: 1.2rem; }
            .games-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; padding: 3rem 1rem; }
            .features { flex-direction: column; align-items: center; gap: 2rem; }
            .hero { padding: 8rem 1rem 4rem; }
        }
        @media (max-width: 480px) { 
            .games-grid { grid-template-columns: 1fr; }
            .title { font-size: clamp(2.5rem, 12vw, 4rem); }
        }
        .pagination {
    text-align: center;
    margin: 40px 0;
}

.page-btn {
    display: inline-block;
    padding: 10px 15px;
    margin: 5px;
    background: #ff3c00;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
}

.page-btn:hover {
    background: #ff6a00;
}