2048

2048.css

@@ -1,4 +1,3 @@
-
 * {
     margin: 0;
     padding: 0;
@@ -6,9 +5,10 @@
 }
 
 body {
-    background: radial-gradient(circle at center, #0a0a0a, #000);
+    background: radial-gradient(circle at 20% 20%, #3b0066, #0c001a 70%);
-    background-size: 300% 300%;
+    background-size: 100% 100%;
-    animation: bgMove 15s infinite alternate;
+    background-attachment: fixed;
+    
     font-family: 'Poppins', sans-serif;
     color: white;
     text-align: center;
@@ -20,14 +20,63 @@ body {
     justify-content: center;
     padding: 10px;
     overflow: hidden;
+    position: relative;
 }
 
-@keyframes bgMove {
+/* ADDED: Animated Grid Pattern (optional, bisa dihapus kalau ga suka) */
-    0% { background-position: 0% 30%; }
+body::before {
-    50% { background-position: 50% 70%; }
+    content: '';
-    100% { background-position: 100% 30%; }
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        linear-gradient(rgba(0, 234, 255, 0.02) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 0, 255, 0.02) 1px, transparent 1px);
+    background-size: 40px 40px;
+    animation: gridMove 25s linear infinite;
+    z-index: 0;
+    pointer-events: none;
 }
 
+@keyframes gridMove {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(40px, 40px);
+    }
+}
+
+/* ADDED: Floating gradient blobs for depth */
+body::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        radial-gradient(ellipse at 10% 20%, rgba(0, 234, 255, 0.08), transparent 50%),
+        radial-gradient(ellipse at 90% 80%, rgba(255, 0, 255, 0.08), transparent 50%),
+        radial-gradient(ellipse at 50% 50%, rgba(138, 43, 226, 0.05), transparent 60%);
+    filter: blur(60px);
+    animation: blobFloat 20s ease-in-out infinite;
+    z-index: 0;
+    pointer-events: none;
+}
+
+@keyframes blobFloat {
+    0%, 100% {
+        transform: translate(0, 0) scale(1);
+        opacity: 0.6;
+    }
+    50% {
+        transform: translate(30px, -30px) scale(1.1);
+        opacity: 0.8;
+    }
+}
 /* ======================
    GAME CONTAINER
 ====================== */
@@ -1246,6 +1295,85 @@ h1 {
     will-change: transform, opacity;
     filter: blur(1px) drop-shadow(0 0 8px rgba(255,255,255,0.1));
 }
+/* ==========================
+   ENHANCED BACKGROUND EFFECTS
+
+/* Update .particles styling */
+.particles {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background:
+      radial-gradient(circle at 20% 30%, rgba(0,234,255,0.15), transparent 40%),
+      radial-gradient(circle at 80% 70%, rgba(255,0,90,0.15), transparent 40%),
+      radial-gradient(circle at 50% 50%, rgba(140,0,255,0.12), transparent 50%),
+      radial-gradient(circle at 10% 85%, rgba(0,255,200,0.1), transparent 50%),
+      radial-gradient(circle at 90% 15%, rgba(255,0,255,0.13), transparent 40%);
+    filter: blur(50px) brightness(110%);
+    animation: particlesFloat 18s ease-in-out infinite alternate;
+}
+
+@keyframes particlesFloat {
+    0%   { 
+        transform: translateY(0px) translateX(0px); 
+        opacity: 0.8;
+    }
+    50%  { 
+        transform: translateY(-25px) translateX(15px); 
+        opacity: 1;
+    }
+    100% { 
+        transform: translateY(-40px) translateX(-20px); 
+        opacity: 0.8;
+    }
+}
+
+/* Enhanced Starfield */
+.starfield {
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.starfield span {
+    position: absolute;
+    width: 3px;
+    height: 3px;
+    background: rgba(0,255,255,0.7);
+    border-radius: 50%;
+    filter: blur(1.5px);
+    box-shadow: 0 0 8px rgba(0, 234, 255, 0.6);
+    animation: starMove linear infinite;
+}
+
+@keyframes starMove {
+    0% { 
+        transform: translateY(0); 
+        opacity: 0.7; 
+    }
+    100% { 
+        transform: translateY(-750px); 
+        opacity: 0; 
+    }
+}
+
+/* Enhanced Cursor Light */
+.cursor-light {
+    position: absolute;
+    width: 280px;
+    height: 280px;
+    background: radial-gradient(circle, rgba(0,255,255,0.2), rgba(255,0,255,0.15) 50%, transparent 70%);
+    border-radius: 50%;
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    filter: blur(50px);
+    mix-blend-mode: screen;
+    opacity: 0.5;
+    transition: opacity 0.3s ease;
+}
 
 /* ==========================
    RESPONSIVE DESIGN
@@ -1511,3 +1639,4 @@ h1 {
         font-size: 11px;
     }
 }
+

2048.html

@@ -51,6 +51,7 @@
           <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
           <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
         </svg>
+
         <!-- Icon Low Sound (mostly muted) -->
         <svg
           class="sound-low"
@@ -62,6 +63,7 @@
         >
           <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
         </svg>
+        
         <!-- Icon Muted (all OFF) -->
         <svg
           class="sound-muted"

Animation_Homepage.js

@@ -1,66 +1,318 @@
-// Neon Particles Animation - Optimized for Academic Project
+(function() {
-const particlesContainer = document.getElementById('particles');
+    'use strict';
-const particleCount = 25; // Reduced for better performance
     
-function createParticle() {
+    // ==================== DOM ELEMENTS ====================
-  const particle = document.createElement('div');
+    const elements = {
-  particle.className = 'particle';
+        logo: null,
+        authBtn: null,
+        playBtn: null,
+        leaderboardBtn: null,
+        heroTitle: null,
+        heroSubtitle: null,
+        logoutOverlay: null,
+        logoutFailedOverlay: null
+    };
     
-  // Random position
+    // ==================== INITIALIZE ====================
-  particle.style.left = Math.random() * 100 + '%';
+    function init() {
-  particle.style.top = Math.random() * 100 + '%';
+        if (document.readyState === 'loading') {
-  
+            document.addEventListener('DOMContentLoaded', initAll);
-  // Random animation duration
+        } else {
-  const duration = 20 + Math.random() * 20;
+            initAll();
-  particle.style.animationDuration = duration + 's';
+        }
-  
-  // Random delay
-  particle.style.animationDelay = Math.random() * 10 + 's';
-  
-  // Random size variation (smaller)
-  const size = 3 + Math.random() * 3;
-  particle.style.width = size + 'px';
-  particle.style.height = size + 'px';
-  
-  // Random colors (neon theme)
-  const colors = [
-    'radial-gradient(circle, #00ffff, #0099ff)',
-    'radial-gradient(circle, #ff00ff, #cc00ff)',
-    'radial-gradient(circle, #00ff99, #00cc77)'
-  ];
-  particle.style.background = colors[Math.floor(Math.random() * colors.length)];
-  
-  // Add floating animation
-  particle.style.animation = `floatParticle ${duration}s ease-in-out infinite`;
-  
-  particlesContainer.appendChild(particle);
-}
-
-// Create particles
-for (let i = 0; i < particleCount; i++) {
-  createParticle();
-}
-
-// Add CSS animation dynamically
-const style = document.createElement('style');
-style.textContent = `
-  @keyframes floatParticle {
-    0%, 100% {
-      transform: translate(0, 0) scale(1);
-      opacity: 0.3;
     }
-    25% {
+    
-      transform: translate(15px, -25px) scale(1.1);
+    function initAll() {
-      opacity: 0.6;
+        try {
+            // Cache DOM elements
+            cacheElements();
+            
+            // Validate elements
+            if (!validateElements()) {
+                console.error('Some required elements are missing');
+                return;
+            }
+            
+            // Setup event listeners
+            setupEventListeners();
+            
+            // Initialize smooth scroll
+            initSmoothScroll();
+            
+            // Check login status and update button
+            updateAuthButton();
+            
+            console.log('✅ Homepage initialized successfully');
+        } catch (error) {
+            console.error('Error initializing homepage:', error);
+        }
     }
-    50% {
+    
-      transform: translate(-10px, -50px) scale(0.9);
+    // ==================== CACHE ELEMENTS ====================
-      opacity: 0.4;
+    function cacheElements() {
+        elements.logo = document.querySelector('.logo');
+        elements.authBtn = document.getElementById('auth-button');
+        elements.playBtn = document.querySelector('a[href="2048.html"]');
+        elements.leaderboardBtn = document.querySelector('a[href="leaderboard.html"]');
+        elements.heroTitle = document.querySelector('.hero-title');
+        elements.heroSubtitle = document.querySelector('.hero-subtitle');
+        elements.logoutOverlay = document.getElementById('logout-overlay');
+        elements.logoutFailedOverlay = document.getElementById('logout-failed-overlay');
     }
-    75% {
+    
-      transform: translate(20px, -35px) scale(1.05);
+    // ==================== VALIDATE ELEMENTS ====================
-      opacity: 0.5;
+    function validateElements() {
+        const requiredElements = ['logo', 'authBtn', 'playBtn'];
+        const missingElements = requiredElements.filter(key => !elements[key]);
+        
+        if (missingElements.length > 0) {
+            console.warn('Missing elements:', missingElements);
+            return false;
+        }
+        
+        return true;
     }
-  }
+    
-`;
+    // ==================== UPDATE AUTH BUTTON ====================
-document.head.appendChild(style);
+    function updateAuthButton() {
+        // Cek dari localStorage (authToken & username) atau sessionStorage
+        const authToken = localStorage.getItem('authToken');
+        const username = localStorage.getItem('username');
+        const loggedInUser = sessionStorage.getItem('loggedInUser');
+        
+        if (authToken || username || loggedInUser) {
+            // User is logged in - show LOGOUT button
+            elements.authBtn.textContent = 'LOGOUT';
+            elements.authBtn.classList.add('logout-mode');
+        } else {
+            // User is not logged in - show LOGIN button
+            elements.authBtn.textContent = 'LOGIN';
+            elements.authBtn.classList.remove('logout-mode');
+        }
+    }
+    
+    // ==================== EVENT LISTENERS ====================
+    function setupEventListeners() {
+        // Logo click - reload page
+        if (elements.logo) {
+            elements.logo.addEventListener('click', handleLogoClick);
+        }
+        
+        // Auth button (Login/Logout)
+        if (elements.authBtn) {
+            elements.authBtn.addEventListener('click', handleAuthClick);
+        }
+        
+        // Play button
+        if (elements.playBtn) {
+            elements.playBtn.addEventListener('click', handlePlayClick);
+        }
+        
+        // Leaderboard button
+        if (elements.leaderboardBtn) {
+            elements.leaderboardBtn.addEventListener('click', handleLeaderboardClick);
+        }
+        
+        // Keyboard shortcuts
+        document.addEventListener('keydown', handleKeyPress);
+        
+        // Window events
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('beforeunload', handleBeforeUnload);
+    }
+    
+    // ==================== EVENT HANDLERS ====================
+    function handleLogoClick(e) {
+        e.preventDefault();
+        window.location.href = 'Homepage.html';
+    }
+    
+    function handleAuthClick(e) {
+        // Cek dari localStorage atau sessionStorage
+        const authToken = localStorage.getItem('authToken');
+        const username = localStorage.getItem('username');
+        const loggedInUser = sessionStorage.getItem('loggedInUser');
+        
+        if (authToken || username || loggedInUser) {
+            // User is logged in - perform logout
+            handleLogout();
+        } else {
+            // User is not logged in - go to login page
+            window.location.href = 'Login.html';
+        }
+    }
+    
+    async function handleLogout() {
+        try {
+            // Panggil PHP untuk hapus session
+            const response = await fetch("http://localhost/Kelompok06_2048/Logout.php", {
+                method: "POST"
+            });
+            
+            const data = await response.json();
+            
+            // Hapus token & username dari localStorage
+            localStorage.removeItem("authToken");
+            localStorage.removeItem("username");
+            
+            // Hapus juga dari sessionStorage (jika ada)
+            sessionStorage.removeItem('loggedInUser');
+            sessionStorage.removeItem('showTutorial');
+            
+            // Show success modal
+            if (elements.logoutOverlay) {
+                elements.logoutOverlay.style.display = 'flex';
+                
+                // Auto close after 2 seconds and redirect to homepage
+                setTimeout(() => {
+                    elements.logoutOverlay.style.display = 'none';
+                    window.location.href = "Homepage.html";
+                }, 2000);
+            }
+        } catch (error) {
+            console.error('Logout failed:', error);
+            
+            // Tetap hapus data lokal meski server error
+            localStorage.removeItem("authToken");
+            localStorage.removeItem("username");
+            sessionStorage.removeItem('loggedInUser');
+            sessionStorage.removeItem('showTutorial');
+            
+            // Show error modal
+            if (elements.logoutFailedOverlay) {
+                elements.logoutFailedOverlay.style.display = 'flex';
+                
+                // Auto close after 2.5 seconds and redirect anyway
+                setTimeout(() => {
+                    elements.logoutFailedOverlay.style.display = 'none';
+                    window.location.href = "Homepage.html";
+                }, 2500);
+            }
+        }
+    }
+    
+    function handlePlayClick(e) {
+        // Allow default behavior (navigate to 2048.html)
+        console.log('Starting game...');
+    }
+    
+    function handleLeaderboardClick(e) {
+        // Allow default behavior (navigate to leaderboard.html)
+        console.log('Opening leaderboard...');
+    }
+    
+    function handleKeyPress(e) {
+        // Press 'P' to play
+        if (e.key === 'p' || e.key === 'P') {
+            if (elements.playBtn) {
+                elements.playBtn.click();
+            }
+        }
+        
+        // Press 'L' for login/logout
+        if (e.key === 'l' || e.key === 'L') {
+            if (elements.authBtn) {
+                elements.authBtn.click();
+            }
+        }
+        
+        // Press 'B' for leaderboard
+        if (e.key === 'b' || e.key === 'B') {
+            if (elements.leaderboardBtn) {
+                elements.leaderboardBtn.click();
+            }
+        }
+    }
+    
+    function handleResize() {
+        // Handle responsive behavior if needed
+        const width = window.innerWidth;
+        
+        if (width < 768) {
+            console.log('Mobile view');
+        } else if (width < 1024) {
+            console.log('Tablet view');
+        } else {
+            console.log('Desktop view');
+        }
+    }
+    
+    function handleBeforeUnload(e) {
+        // Cleanup before page unload
+        console.log('Page unloading...');
+    }
+    
+    // ==================== SMOOTH SCROLL ====================
+    function initSmoothScroll() {
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                const href = this.getAttribute('href');
+                if (href === '#' || !href) return;
+                
+                e.preventDefault();
+                const target = document.querySelector(href);
+                
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+    }
+    
+    // ==================== UTILITY FUNCTIONS ====================
+    function checkBrowserSupport() {
+        const features = {
+            localStorage: typeof(Storage) !== 'undefined',
+            flexbox: CSS.supports('display', 'flex'),
+            grid: CSS.supports('display', 'grid')
+        };
+        
+        console.log('Browser support:', features);
+        return features;
+    }
+    
+    function isMobile() {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    }
+    
+    // ==================== PUBLIC API ====================
+    window.Homepage = {
+        init: initAll,
+        isMobile: isMobile,
+        checkSupport: checkBrowserSupport,
+        updateAuthButton: updateAuthButton
+    };
+    
+    // ==================== CLEANUP ====================
+    window.cleanupHomepage = function() {
+        // Remove event listeners
+        if (elements.logo) {
+            elements.logo.removeEventListener('click', handleLogoClick);
+        }
+        
+        if (elements.authBtn) {
+            elements.authBtn.removeEventListener('click', handleAuthClick);
+        }
+        
+        if (elements.playBtn) {
+            elements.playBtn.removeEventListener('click', handlePlayClick);
+        }
+        
+        if (elements.leaderboardBtn) {
+            elements.leaderboardBtn.removeEventListener('click', handleLeaderboardClick);
+        }
+        
+        document.removeEventListener('keydown', handleKeyPress);
+        window.removeEventListener('resize', handleResize);
+        window.removeEventListener('beforeunload', handleBeforeUnload);
+        
+        console.log('Homepage cleaned up');
+    };
+    
+    // Start initialization
+    init();
+    
+})();

Homepage.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@400;700;900&family=Rajdhani:wght@500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@400;700;900&display=swap');
 
 * {
   margin: 0;
@@ -13,8 +13,6 @@ body {
   overflow-x: hidden;
   min-height: 100vh;
   position: relative;
-  display: flex;
-  flex-direction: column;
 }
 
 /* Animated Background Grid */
@@ -26,10 +24,10 @@ body::before {
   width: 100%;
   height: 100%;
   background-image: 
-    linear-gradient(rgba(0, 234, 255, 0.04) 2px, transparent 2px),
+    linear-gradient(rgba(0, 234, 255, 0.03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 0, 255, 0.04) 2px, transparent 2px);
+    linear-gradient(90deg, rgba(255, 0, 255, 0.03) 1px, transparent 1px);
-  background-size: 60px 60px;
+  background-size: 50px 50px;
-  animation: gridMove 25s linear infinite;
+  animation: gridMove 20s linear infinite;
   z-index: 1;
   pointer-events: none;
 }
@@ -39,77 +37,7 @@ body::before {
     transform: translate(0, 0);
   }
   100% {
-    transform: translate(60px, 60px);
+    transform: translate(50px, 50px);
-  }
-}
-
-/* Floating Orbs */
-.orb {
-  position: fixed;
-  border-radius: 50%;
-  filter: blur(80px);
-  opacity: 0.3;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.orb-1 {
-  width: 400px;
-  height: 400px;
-  background: radial-gradient(circle, #00eaff, transparent);
-  top: 10%;
-  left: 5%;
-  animation: float1 15s ease-in-out infinite;
-}
-
-.orb-2 {
-  width: 500px;
-  height: 500px;
-  background: radial-gradient(circle, #ff00ff, transparent);
-  top: 50%;
-  right: 10%;
-  animation: float2 18s ease-in-out infinite;
-}
-
-.orb-3 {
-  width: 350px;
-  height: 350px;
-  background: radial-gradient(circle, #ffd700, transparent);
-  bottom: 10%;
-  left: 50%;
-  animation: float3 20s ease-in-out infinite;
-}
-
-@keyframes float1 {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-  }
-  33% {
-    transform: translate(50px, -80px) scale(1.1);
-  }
-  66% {
-    transform: translate(-30px, 50px) scale(0.9);
-  }
-}
-
-@keyframes float2 {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-  }
-  33% {
-    transform: translate(-60px, 70px) scale(1.15);
-  }
-  66% {
-    transform: translate(40px, -40px) scale(0.95);
-  }
-}
-
-@keyframes float3 {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-  }
-  50% {
-    transform: translate(80px, -60px) scale(1.2);
   }
 }
 
@@ -126,31 +54,23 @@ body::before {
 
 .particle {
   position: absolute;
-  width: 8px;
+  width: 6px;
-  height: 8px;
+  height: 6px;
   border-radius: 50%;
   background: radial-gradient(circle, #00ffff, #0099ff);
-  box-shadow: 0 0 20px #00eaff, 0 0 40px #0088ff;
+  box-shadow: 0 0 15px #00eaff, 0 0 30px #0088ff;
   pointer-events: none;
-  animation: particleFloat 10s ease-in-out infinite;
+  animation: particleFloat 8s ease-in-out infinite;
 }
 
 @keyframes particleFloat {
   0%, 100% {
-    transform: translateY(0) translateX(0) scale(1) rotate(0deg);
+    transform: translateY(0) translateX(0) scale(1);
-    opacity: 0.7;
-  }
-  25% {
-    transform: translateY(-40px) translateX(20px) scale(1.3) rotate(90deg);
-    opacity: 1;
-  }
-  50% {
-    transform: translateY(-20px) translateX(-15px) scale(0.9) rotate(180deg);
     opacity: 0.8;
   }
-  75% {
+  50% {
-    transform: translateY(10px) translateX(30px) scale(1.1) rotate(270deg);
+    transform: translateY(-30px) translateX(15px) scale(1.2);
-    opacity: 0.9;
+    opacity: 1;
   }
 }
 
@@ -162,14 +82,14 @@ header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: rgba(20, 0, 40, 0.75);
+  background: rgba(20, 0, 40, 0.7);
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(15px);
-  border-bottom: 3px solid rgba(0, 234, 255, 0.5);
+  border-bottom: 3px solid rgba(0, 234, 255, 0.4);
-  box-shadow: 0 4px 40px rgba(0, 234, 255, 0.25);
+  box-shadow: 0 4px 30px rgba(0, 234, 255, 0.2);
 }
 
 .logo {
-  font-size: 42px;
+  font-size: 36px;
   font-weight: 900;
   font-family: 'Orbitron', sans-serif;
   background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
@@ -177,16 +97,10 @@ header {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  letter-spacing: 6px;
+  letter-spacing: 5px;
   text-transform: uppercase;
   animation: gradientShift 4s ease infinite;
-  filter: drop-shadow(0 0 25px rgba(0, 234, 255, 0.7));
+  filter: drop-shadow(0 0 20px rgba(0, 234, 255, 0.6));
-  cursor: pointer;
-  transition: transform 0.3s ease;
-}
-
-.logo:hover {
-  transform: scale(1.05);
 }
 
 @keyframes gradientShift {
@@ -224,28 +138,28 @@ header {
   width: 0;
   height: 0;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.25);
+  background: rgba(255, 255, 255, 0.2);
   transform: translate(-50%, -50%);
   transition: width 0.6s, height 0.6s;
 }
 
 .btn:hover::before {
-  width: 350px;
+  width: 300px;
-  height: 350px;
+  height: 300px;
 }
 
 .btn-primary {
   background: linear-gradient(135deg, #00eaff, #ff00ff);
   color: #fff;
   font-weight: 900;
-  box-shadow: 0 6px 35px rgba(0, 217, 255, 0.6);
+  box-shadow: 0 6px 30px rgba(0, 217, 255, 0.5);
   position: relative;
   z-index: 1;
 }
 
 .btn-primary:hover {
-  box-shadow: 0 12px 50px rgba(0, 217, 255, 0.9), 0 0 35px rgba(255, 0, 255, 0.7);
+  box-shadow: 0 10px 45px rgba(0, 217, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.6);
-  transform: translateY(-4px) scale(1.08);
+  transform: translateY(-4px) scale(1.05);
 }
 
 /* Hero Section */
@@ -253,42 +167,29 @@ header {
   position: relative;
   z-index: 10;
   text-align: center;
-  padding: 80px 20px 60px;
+  padding: 140px 20px 120px;
-  max-width: 1200px;
+  max-width: 1100px;
   margin: 0 auto;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-}
-
-/* Title Wrapper with Rings */
-.title-wrapper {
-  position: relative;
-  display: inline-block;
-  margin-bottom: 35px;
 }
 
 .hero-title {
-  font-size: 160px;
+  font-size: 140px;
   font-weight: 900;
+  margin-bottom: 25px;
   font-family: 'Orbitron', sans-serif;
   background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
   background-size: 200% 200%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  letter-spacing: 20px;
+  letter-spacing: 18px;
   text-transform: uppercase;
   animation: titleAnimation 6s ease-in-out infinite, titleGlow 3s ease-in-out infinite alternate;
-  line-height: 1;
+  line-height: 1.1;
   position: relative;
-  z-index: 2;
 }
 
-.hero-title::before {
+.hero-title::after {
   content: '2048';
   position: absolute;
   top: 0;
@@ -298,66 +199,12 @@ header {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  filter: blur(30px);
+  filter: blur(20px);
-  opacity: 0.6;
+  opacity: 0.5;
   z-index: -1;
   animation: titleBlur 3s ease-in-out infinite alternate;
 }
 
-/* Rings Around Title */
-.title-rings {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.ring {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  border-radius: 50%;
-  border: 2px solid;
-  transform: translate(-50%, -50%);
-  opacity: 0.3;
-}
-
-.ring-1 {
-  width: 120%;
-  height: 120%;
-  border-color: #00eaff;
-  animation: ringPulse 4s ease-in-out infinite;
-}
-
-.ring-2 {
-  width: 140%;
-  height: 140%;
-  border-color: #ff00ff;
-  animation: ringPulse 4s ease-in-out infinite 0.5s;
-}
-
-.ring-3 {
-  width: 160%;
-  height: 160%;
-  border-color: #ffd700;
-  animation: ringPulse 4s ease-in-out infinite 1s;
-}
-
-@keyframes ringPulse {
-  0%, 100% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 0.3;
-  }
-  50% {
-    transform: translate(-50%, -50%) scale(1.1);
-    opacity: 0.6;
-  }
-}
-
 @keyframes titleAnimation {
   0%, 100% {
     background-position: 0% 50%;
@@ -365,86 +212,64 @@ header {
   }
   50% {
     background-position: 100% 50%;
-    transform: scale(1.03);
+    transform: scale(1.02);
   }
 }
 
 @keyframes titleGlow {
   0% {
-    filter: drop-shadow(0 0 30px rgba(0, 234, 255, 0.8)) 
+    filter: drop-shadow(0 0 25px rgba(0, 234, 255, 0.7)) 
-            drop-shadow(0 0 60px rgba(0, 234, 255, 0.6));
+            drop-shadow(0 0 50px rgba(0, 234, 255, 0.5));
   }
   100% {
-    filter: drop-shadow(0 0 45px rgba(255, 0, 255, 1)) 
+    filter: drop-shadow(0 0 40px rgba(255, 0, 255, 0.9)) 
-            drop-shadow(0 0 90px rgba(255, 0, 255, 0.7));
+            drop-shadow(0 0 80px rgba(255, 0, 255, 0.6));
   }
 }
 
 @keyframes titleBlur {
   0% {
-    opacity: 0.4;
+    opacity: 0.3;
   }
   100% { 
-    opacity: 0.8;
+    opacity: 0.7;
   }
 }
 
-/* Subtitle with Word Animation */
 .hero-subtitle {
-  font-size: 28px;
+  font-size: 24px;
-  color: rgba(255, 255, 255, 0.85);
+  color: rgba(255, 255, 255, 0.8);
-  margin-bottom: 60px;
+  margin-bottom: 55px;
-  font-weight: 500;
+  font-weight: 400;
-  letter-spacing: 7px;
+  letter-spacing: 6px;
   text-transform: uppercase;
-  font-family: 'Rajdhani', sans-serif;
+  font-family: 'Exo 2', sans-serif;
-  display: flex;
+  animation: subtitleFade 2s ease-in-out infinite alternate;
-  gap: 12px;
-  justify-content: center;
-  flex-wrap: wrap;
 }
 
-.subtitle-word {
+@keyframes subtitleFade {
-  display: inline-block;
+  0% {
-  animation: wordFloat 3s ease-in-out infinite;
+    opacity: 0.7;
-}
-
-.subtitle-word:nth-child(1) { animation-delay: 0s; }
-.subtitle-word:nth-child(2) { animation-delay: 0.2s; }
-.subtitle-word:nth-child(3) { animation-delay: 0.4s; }
-.subtitle-word:nth-child(4) { animation-delay: 0.6s; }
-.subtitle-word:nth-child(5) { 
-  animation-delay: 0.8s;
-  background: linear-gradient(135deg, #ffd700, #ffaa00);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  font-weight: 700;
-}
-
-@keyframes wordFloat {
-  0%, 100% {
     transform: translateY(0);
   }
-  50% {
+  100% {
-    transform: translateY(-8px);
+    opacity: 1;
+    transform: translateY(-3px);
   }
 }
 
-/* CTA Buttons */
 .cta-buttons {
   display: flex;
-  gap: 30px;
+  gap: 25px;
   justify-content: center;
   flex-wrap: wrap;
-  animation: buttonsSlideUp 1.2s ease-out;
+  animation: buttonsSlideUp 1s ease-out;
-  margin-bottom: 80px;
 }
 
 @keyframes buttonsSlideUp {
   from {
     opacity: 0;
-    transform: translateY(40px);
+    transform: translateY(30px);
   }
   to {
     opacity: 1;
@@ -453,9 +278,9 @@ header {
 }
 
 .btn-cta {
-  padding: 20px 50px;
+  padding: 18px 45px;
-  font-size: 20px;
+  font-size: 19px;
-  border-radius: 18px;
+  border-radius: 15px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 3px;
@@ -464,18 +289,6 @@ header {
   position: relative;
   overflow: hidden;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.btn-icon {
-  font-size: 24px;
-  transition: transform 0.3s ease;
-}
-
-.btn-cta:hover .btn-icon {
-  transform: scale(1.3) rotate(15deg);
 }
 
 .btn-cta::after {
@@ -485,9 +298,9 @@ header {
   left: -50%;
   width: 200%;
   height: 200%;
-  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.35), transparent);
+  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
   transform: rotate(45deg);
-  animation: buttonShine 4s infinite;
+  animation: buttonShine 3s infinite;
 }
 
 @keyframes buttonShine {
@@ -501,100 +314,24 @@ header {
 
 .btn-play {
   background: linear-gradient(135deg, #ff00ff, #ff0066);
-  box-shadow: 0 8px 40px rgba(255, 0, 255, 0.7);
+  box-shadow: 0 6px 35px rgba(255, 0, 255, 0.6);
   color: #fff;
 }
 
 .btn-play:hover {
-  transform: translateY(-6px) scale(1.1);
+  transform: translateY(-5px) scale(1.08);
-  box-shadow: 0 15px 60px rgba(255, 0, 255, 1), 0 0 50px rgba(255, 0, 102, 0.8);
+  box-shadow: 0 12px 50px rgba(255, 0, 255, 0.9), 0 0 40px rgba(255, 0, 102, 0.7);
 }
 
 .btn-leaderboard {
   background: linear-gradient(135deg, #ffd700, #ffaa00);
   color: #0c001a;
-  box-shadow: 0 8px 40px rgba(255, 215, 0, 0.7);
+  box-shadow: 0 6px 35px rgba(255, 215, 0, 0.6);
 }
 
 .btn-leaderboard:hover {
-  transform: translateY(-6px) scale(1.1);
+  transform: translateY(-5px) scale(1.08);
-  box-shadow: 0 15px 60px rgba(255, 215, 0, 1), 0 0 50px rgba(255, 170, 0, 0.8);
+  box-shadow: 0 12px 50px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 170, 0, 0.7);
-}
-
-/* Stats Container */
-.stats-container {
-  display: flex;
-  gap: 40px;
-  justify-content: center;
-  flex-wrap: wrap;
-  animation: statsSlideUp 1.5s ease-out;
-}
-
-@keyframes statsSlideUp {
-  from {
-    opacity: 0;
-    transform: translateY(50px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.stat-card {
-  background: rgba(30, 0, 50, 0.6);
-  border: 2px solid rgba(0, 234, 255, 0.4);
-  border-radius: 20px;
-  padding: 25px 40px;
-  text-align: center;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  backdrop-filter: blur(15px);
-  min-width: 150px;
-  position: relative;
-  overflow: hidden;
-}
-
-.stat-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.2), transparent);
-  transition: left 0.6s ease;
-}
-
-.stat-card:hover::before {
-  left: 100%;
-}
-
-.stat-card:hover {
-  transform: translateY(-10px) scale(1.05);
-  border-color: #00eaff;
-  box-shadow: 0 15px 45px rgba(0, 234, 255, 0.5);
-  background: rgba(30, 0, 50, 0.8);
-}
-
-.stat-number {
-  font-size: 48px;
-  font-weight: 900;
-  font-family: 'Orbitron', sans-serif;
-  background: linear-gradient(135deg, #00eaff, #ff00ff);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 10px;
-  line-height: 1;
-}
-
-.stat-label {
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.7);
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  font-family: 'Rajdhani', sans-serif;
-  font-weight: 600;
 }
 
 /* Footer */
@@ -602,29 +339,69 @@ footer {
   position: relative;
   z-index: 10;
   text-align: center;
-  padding: 40px 20px;
+  padding: 50px 20px;
-  margin-top: auto;
+  margin-top: 150px;
-  background: rgba(20, 0, 40, 0.75);
+  background: rgba(20, 0, 40, 0.7);
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(15px);
-  border-top: 3px solid rgba(0, 234, 255, 0.5);
+  border-top: 3px solid rgba(0, 234, 255, 0.4);
-  box-shadow: 0 -4px 40px rgba(0, 234, 255, 0.25);
+  box-shadow: 0 -4px 30px rgba(0, 234, 255, 0.2);
 }
 
 footer p {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.65);
   font-size: 15px;
   font-family: 'Exo 2', sans-serif;
-  letter-spacing: 2px;
+  letter-spacing: 1.5px;
 }
 
-/* Responsive */
+/* Floating Decoration Elements */
-@media (max-width: 1200px) {
+.hero::before {
-  .hero-title {
+  content: '';
-    font-size: 130px;
+  position: absolute;
-    letter-spacing: 16px;
+  top: 50%;
+  left: -100px;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, rgba(0, 234, 255, 0.15), transparent);
+  border-radius: 50%;
+  filter: blur(60px);
+  animation: floatLeft 8s ease-in-out infinite;
+  z-index: -1;
+}
+
+.hero::after {
+  content: '';
+  position: absolute;
+  top: 30%;
+  right: -100px;
+  width: 350px;
+  height: 350px;
+  background: radial-gradient(circle, rgba(255, 0, 255, 0.15), transparent);
+  border-radius: 50%;
+  filter: blur(60px);
+  animation: floatRight 10s ease-in-out infinite;
+  z-index: -1;
+}
+
+@keyframes floatLeft {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(30px, -30px) scale(1.1);
   }
 }
 
+@keyframes floatRight {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(-30px, 30px) scale(1.1);
+  }
+}
+
+/* Responsive */
 @media (max-width: 1024px) {
   .hero-title {
     font-size: 110px;
@@ -632,146 +409,85 @@ footer p {
   }
   
   .hero-subtitle {
-    font-size: 24px;
+    font-size: 20px;
-    letter-spacing: 5px;
-  }
-
-  .stat-card {
-    min-width: 130px;
-    padding: 20px 30px;
-  }
-
-  .stat-number {
-    font-size: 40px;
   }
 }
 
 @media (max-width: 768px) {
   header {
-    padding: 20px 30px;
+    padding: 20px 25px;
-  }
+    flex-direction: column;
-
+    gap: 15px;
-  .logo {
-    font-size: 32px;
-    letter-spacing: 4px;
-  }
-
-  .hero {
-    padding: 60px 20px 40px;
-  }
-
-  .hero-title {
-    font-size: 85px;
-    letter-spacing: 10px;
-  }
-
-  .hero-subtitle {
-    font-size: 20px;
-    letter-spacing: 4px;
-    margin-bottom: 50px;
-  }
-
-  .btn-cta {
-    padding: 18px 40px;
-    font-size: 18px;
-  }
-
-  .stats-container {
-    gap: 25px;
-  }
-
-  .stat-card {
-    min-width: 120px;
-    padding: 18px 25px;
-  }
-
-  .stat-number {
-    font-size: 36px;
-  }
-}
-
-@media (max-width: 480px) {
-  header {
-    padding: 18px 20px;
   }
 
   .logo {
     font-size: 28px;
+    letter-spacing: 3px;
   }
 
   .hero {
-    padding: 50px 15px 35px;
+    padding: 100px 20px 80px;
   }
 
   .hero-title {
-    font-size: 64px;
+    font-size: 80px;
-    letter-spacing: 6px;
+    letter-spacing: 8px;
   }
 
   .hero-subtitle {
-    font-size: 16px;
+    font-size: 18px;
     letter-spacing: 3px;
-    margin-bottom: 40px;
-    gap: 8px;
   }
 
   .btn-cta {
-    padding: 16px 35px;
+    padding: 16px 38px;
     font-size: 17px;
+  }
+
+  footer {
+    margin-top: 100px;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero {
+    padding: 70px 15px 60px;
+  }
+
+  .hero-title {
+    font-size: 60px;
+    letter-spacing: 5px;
+  }
+
+  .hero-subtitle {
+    font-size: 15px;
+    letter-spacing: 2px;
+    margin-bottom: 45px;
+  }
+
+  .btn-cta {
+    padding: 15px 32px;
+    font-size: 16px;
     letter-spacing: 2px;
   }
 
-  .btn-icon {
-    font-size: 20px;
-  }
-
   .cta-buttons {
-    gap: 20px;
+    gap: 18px;
-    margin-bottom: 60px;
-  }
-
-  .stats-container {
-    gap: 20px;
-  }
-
-  .stat-card {
-    min-width: 100px;
-    padding: 15px 20px;
-  }
-
-  .stat-number {
-    font-size: 32px;
-  }
-
-  .stat-label {
-    font-size: 12px;
   }
 }
 
 @media (max-width: 360px) {
   .hero-title {
-    font-size: 52px;
+    font-size: 48px;
-    letter-spacing: 5px;
+    letter-spacing: 4px;
   }
 
   .hero-subtitle {
     font-size: 14px;
-    letter-spacing: 2px;
   }
 
   .btn-cta {
-    padding: 14px 30px;
+    padding: 14px 28px;
-    font-size: 16px;
+    font-size: 15px;
-  }
-
-  .stat-number {
-    font-size: 28px;
-  }
-}
-
-/* Center All Content */
-@media (min-height: 800px) {
-  .hero {
-    min-height: calc(100vh - 250px);
   }
 }