2048.css

@@ -1,3 +1,4 @@
+
 * {
     margin: 0;
     padding: 0;
@@ -5,10 +6,9 @@
 }
 
 body {
-    background: radial-gradient(circle at 20% 20%, #3b0066, #0c001a 70%);
+    background: radial-gradient(circle at center, #0a0a0a, #000);
-    background-size: 100% 100%;
+    background-size: 300% 300%;
-    background-attachment: fixed;
+    animation: bgMove 15s infinite alternate;
-    
     font-family: 'Poppins', sans-serif;
     color: white;
     text-align: center;
@@ -20,63 +20,14 @@ body {
     justify-content: center;
     padding: 10px;
     overflow: hidden;
-    position: relative;
 }
 
-/* ADDED: Animated Grid Pattern (optional, bisa dihapus kalau ga suka) */
+@keyframes bgMove {
-body::before {
+    0% { background-position: 0% 30%; }
-    content: '';
+    50% { background-position: 50% 70%; }
-    position: fixed;
+    100% { background-position: 100% 30%; }
-    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
 ====================== */
@@ -1295,85 +1246,6 @@ 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
@@ -1639,4 +1511,3 @@ h1 {
         font-size: 11px;
     }
 }
-

2048.html

@@ -51,7 +51,6 @@
           <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"
@@ -63,7 +62,6 @@
         >
           <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,318 +1,66 @@
-(function() {
+// Neon Particles Animation - Optimized for Academic Project
-    'use strict';
+const particlesContainer = document.getElementById('particles');
+const particleCount = 25; // Reduced for better performance
 
-    // ==================== DOM ELEMENTS ====================
+function createParticle() {
-    const elements = {
+  const particle = document.createElement('div');
-        logo: null,
+  particle.className = 'particle';
-        authBtn: null,
-        playBtn: null,
-        leaderboardBtn: null,
-        heroTitle: null,
-        heroSubtitle: null,
-        logoutOverlay: null,
-        logoutFailedOverlay: null
-    };
   
-    // ==================== INITIALIZE ====================
+  // Random position
-    function init() {
+  particle.style.left = Math.random() * 100 + '%';
-        if (document.readyState === 'loading') {
+  particle.style.top = Math.random() * 100 + '%';
-            document.addEventListener('DOMContentLoaded', initAll);
+  
-        } else {
+  // Random animation duration
-            initAll();
+  const duration = 20 + Math.random() * 20;
-        }
+  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);
 }
 
-    function initAll() {
+// Create particles
-        try {
+for (let i = 0; i < particleCount; i++) {
-            // Cache DOM elements
+  createParticle();
-            cacheElements();
-            
-            // Validate elements
-            if (!validateElements()) {
-                console.error('Some required elements are missing');
-                return;
 }
 
-            // Setup event listeners
+// Add CSS animation dynamically
-            setupEventListeners();
+const style = document.createElement('style');
-            
+style.textContent = `
-            // Initialize smooth scroll
+  @keyframes floatParticle {
-            initSmoothScroll();
+    0%, 100% {
-            
+      transform: translate(0, 0) scale(1);
-            // Check login status and update button
+      opacity: 0.3;
-            updateAuthButton();
+    }
-            
+    25% {
-            console.log('✅ Homepage initialized successfully');
+      transform: translate(15px, -25px) scale(1.1);
-        } catch (error) {
+      opacity: 0.6;
-            console.error('Error initializing homepage:', error);
+    }
+    50% {
+      transform: translate(-10px, -50px) scale(0.9);
+      opacity: 0.4;
+    }
+    75% {
+      transform: translate(20px, -35px) scale(1.05);
+      opacity: 0.5;
     }
   }
-    
+`;
-    // ==================== CACHE ELEMENTS ====================
+document.head.appendChild(style);
-    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');
-    }
-    
-    // ==================== VALIDATE ELEMENTS ====================
-    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 ====================
-    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&display=swap');
+@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');
 
 * {
   margin: 0;
@@ -13,6 +13,8 @@ body {
   overflow-x: hidden;
   min-height: 100vh;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 /* Animated Background Grid */
@@ -24,10 +26,10 @@ body::before {
   width: 100%;
   height: 100%;
   background-image: 
-    linear-gradient(rgba(0, 234, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(rgba(0, 234, 255, 0.04) 2px, transparent 2px),
-    linear-gradient(90deg, rgba(255, 0, 255, 0.03) 1px, transparent 1px);
+    linear-gradient(90deg, rgba(255, 0, 255, 0.04) 2px, transparent 2px);
-  background-size: 50px 50px;
+  background-size: 60px 60px;
-  animation: gridMove 20s linear infinite;
+  animation: gridMove 25s linear infinite;
   z-index: 1;
   pointer-events: none;
 }
@@ -37,7 +39,77 @@ body::before {
     transform: translate(0, 0);
   }
   100% {
-    transform: translate(50px, 50px);
+    transform: translate(60px, 60px);
+  }
+}
+
+/* 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);
   }
 }
 
@@ -54,23 +126,31 @@ body::before {
 
 .particle {
   position: absolute;
-  width: 6px;
+  width: 8px;
-  height: 6px;
+  height: 8px;
   border-radius: 50%;
   background: radial-gradient(circle, #00ffff, #0099ff);
-  box-shadow: 0 0 15px #00eaff, 0 0 30px #0088ff;
+  box-shadow: 0 0 20px #00eaff, 0 0 40px #0088ff;
   pointer-events: none;
-  animation: particleFloat 8s ease-in-out infinite;
+  animation: particleFloat 10s ease-in-out infinite;
 }
 
 @keyframes particleFloat {
   0%, 100% {
-    transform: translateY(0) translateX(0) scale(1);
+    transform: translateY(0) translateX(0) scale(1) rotate(0deg);
-    opacity: 0.8;
+    opacity: 0.7;
+  }
+  25% {
+    transform: translateY(-40px) translateX(20px) scale(1.3) rotate(90deg);
+    opacity: 1;
   }
   50% {
-    transform: translateY(-30px) translateX(15px) scale(1.2);
+    transform: translateY(-20px) translateX(-15px) scale(0.9) rotate(180deg);
-    opacity: 1;
+    opacity: 0.8;
+  }
+  75% {
+    transform: translateY(10px) translateX(30px) scale(1.1) rotate(270deg);
+    opacity: 0.9;
   }
 }
 
@@ -82,14 +162,14 @@ header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: rgba(20, 0, 40, 0.7);
+  background: rgba(20, 0, 40, 0.75);
-  backdrop-filter: blur(15px);
+  backdrop-filter: blur(20px);
-  border-bottom: 3px solid rgba(0, 234, 255, 0.4);
+  border-bottom: 3px solid rgba(0, 234, 255, 0.5);
-  box-shadow: 0 4px 30px rgba(0, 234, 255, 0.2);
+  box-shadow: 0 4px 40px rgba(0, 234, 255, 0.25);
 }
 
 .logo {
-  font-size: 36px;
+  font-size: 42px;
   font-weight: 900;
   font-family: 'Orbitron', sans-serif;
   background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
@@ -97,10 +177,16 @@ header {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  letter-spacing: 5px;
+  letter-spacing: 6px;
   text-transform: uppercase;
   animation: gradientShift 4s ease infinite;
-  filter: drop-shadow(0 0 20px rgba(0, 234, 255, 0.6));
+  filter: drop-shadow(0 0 25px rgba(0, 234, 255, 0.7));
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+
+.logo:hover {
+  transform: scale(1.05);
 }
 
 @keyframes gradientShift {
@@ -138,28 +224,28 @@ header {
   width: 0;
   height: 0;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.25);
   transform: translate(-50%, -50%);
   transition: width 0.6s, height 0.6s;
 }
 
 .btn:hover::before {
-  width: 300px;
+  width: 350px;
-  height: 300px;
+  height: 350px;
 }
 
 .btn-primary {
   background: linear-gradient(135deg, #00eaff, #ff00ff);
   color: #fff;
   font-weight: 900;
-  box-shadow: 0 6px 30px rgba(0, 217, 255, 0.5);
+  box-shadow: 0 6px 35px rgba(0, 217, 255, 0.6);
   position: relative;
   z-index: 1;
 }
 
 .btn-primary:hover {
-  box-shadow: 0 10px 45px rgba(0, 217, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.6);
+  box-shadow: 0 12px 50px rgba(0, 217, 255, 0.9), 0 0 35px rgba(255, 0, 255, 0.7);
-  transform: translateY(-4px) scale(1.05);
+  transform: translateY(-4px) scale(1.08);
 }
 
 /* Hero Section */
@@ -167,29 +253,42 @@ header {
   position: relative;
   z-index: 10;
   text-align: center;
-  padding: 140px 20px 120px;
+  padding: 80px 20px 60px;
-  max-width: 1100px;
+  max-width: 1200px;
   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: 140px;
+  font-size: 160px;
   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: 18px;
+  letter-spacing: 20px;
   text-transform: uppercase;
   animation: titleAnimation 6s ease-in-out infinite, titleGlow 3s ease-in-out infinite alternate;
-  line-height: 1.1;
+  line-height: 1;
   position: relative;
+  z-index: 2;
 }
 
-.hero-title::after {
+.hero-title::before {
   content: '2048';
   position: absolute;
   top: 0;
@@ -199,12 +298,66 @@ header {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  filter: blur(20px);
+  filter: blur(30px);
-  opacity: 0.5;
+  opacity: 0.6;
   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%;
@@ -212,64 +365,86 @@ header {
   }
   50% {
     background-position: 100% 50%;
-    transform: scale(1.02);
+    transform: scale(1.03);
   }
 }
 
 @keyframes titleGlow {
   0% {
-    filter: drop-shadow(0 0 25px rgba(0, 234, 255, 0.7)) 
+    filter: drop-shadow(0 0 30px rgba(0, 234, 255, 0.8)) 
-            drop-shadow(0 0 50px rgba(0, 234, 255, 0.5));
+            drop-shadow(0 0 60px rgba(0, 234, 255, 0.6));
   }
   100% {
-    filter: drop-shadow(0 0 40px rgba(255, 0, 255, 0.9)) 
+    filter: drop-shadow(0 0 45px rgba(255, 0, 255, 1)) 
-            drop-shadow(0 0 80px rgba(255, 0, 255, 0.6));
+            drop-shadow(0 0 90px rgba(255, 0, 255, 0.7));
   }
 }
 
 @keyframes titleBlur {
   0% {
-    opacity: 0.3;
+    opacity: 0.4;
   }
   100% {
-    opacity: 0.7;
+    opacity: 0.8;
   }
 }
 
+/* Subtitle with Word Animation */
 .hero-subtitle {
-  font-size: 24px;
+  font-size: 28px;
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba(255, 255, 255, 0.85);
-  margin-bottom: 55px;
+  margin-bottom: 60px;
-  font-weight: 400;
+  font-weight: 500;
-  letter-spacing: 6px;
+  letter-spacing: 7px;
   text-transform: uppercase;
-  font-family: 'Exo 2', sans-serif;
+  font-family: 'Rajdhani', sans-serif;
-  animation: subtitleFade 2s ease-in-out infinite alternate;
-}
-
-@keyframes subtitleFade {
-  0% {
-    opacity: 0.7;
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(-3px);
-  }
-}
-
-.cta-buttons {
   display: flex;
-  gap: 25px;
+  gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
-  animation: buttonsSlideUp 1s ease-out;
+}
+
+.subtitle-word {
+  display: inline-block;
+  animation: wordFloat 3s ease-in-out infinite;
+}
+
+.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% {
+    transform: translateY(-8px);
+  }
+}
+
+/* CTA Buttons */
+.cta-buttons {
+  display: flex;
+  gap: 30px;
+  justify-content: center;
+  flex-wrap: wrap;
+  animation: buttonsSlideUp 1.2s ease-out;
+  margin-bottom: 80px;
 }
 
 @keyframes buttonsSlideUp {
   from {
     opacity: 0;
-    transform: translateY(30px);
+    transform: translateY(40px);
   }
   to {
     opacity: 1;
@@ -278,9 +453,9 @@ header {
 }
 
 .btn-cta {
-  padding: 18px 45px;
+  padding: 20px 50px;
-  font-size: 19px;
+  font-size: 20px;
-  border-radius: 15px;
+  border-radius: 18px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 3px;
@@ -289,6 +464,18 @@ 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 {
@@ -298,9 +485,9 @@ header {
   left: -50%;
   width: 200%;
   height: 200%;
-  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.35), transparent);
   transform: rotate(45deg);
-  animation: buttonShine 3s infinite;
+  animation: buttonShine 4s infinite;
 }
 
 @keyframes buttonShine {
@@ -314,24 +501,100 @@ header {
 
 .btn-play {
   background: linear-gradient(135deg, #ff00ff, #ff0066);
-  box-shadow: 0 6px 35px rgba(255, 0, 255, 0.6);
+  box-shadow: 0 8px 40px rgba(255, 0, 255, 0.7);
   color: #fff;
 }
 
 .btn-play:hover {
-  transform: translateY(-5px) scale(1.08);
+  transform: translateY(-6px) scale(1.1);
-  box-shadow: 0 12px 50px rgba(255, 0, 255, 0.9), 0 0 40px rgba(255, 0, 102, 0.7);
+  box-shadow: 0 15px 60px rgba(255, 0, 255, 1), 0 0 50px rgba(255, 0, 102, 0.8);
 }
 
 .btn-leaderboard {
   background: linear-gradient(135deg, #ffd700, #ffaa00);
   color: #0c001a;
-  box-shadow: 0 6px 35px rgba(255, 215, 0, 0.6);
+  box-shadow: 0 8px 40px rgba(255, 215, 0, 0.7);
 }
 
 .btn-leaderboard:hover {
-  transform: translateY(-5px) scale(1.08);
+  transform: translateY(-6px) scale(1.1);
-  box-shadow: 0 12px 50px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 170, 0, 0.7);
+  box-shadow: 0 15px 60px rgba(255, 215, 0, 1), 0 0 50px rgba(255, 170, 0, 0.8);
+}
+
+/* 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 */
@@ -339,69 +602,29 @@ footer {
   position: relative;
   z-index: 10;
   text-align: center;
-  padding: 50px 20px;
+  padding: 40px 20px;
-  margin-top: 150px;
+  margin-top: auto;
-  background: rgba(20, 0, 40, 0.7);
+  background: rgba(20, 0, 40, 0.75);
-  backdrop-filter: blur(15px);
+  backdrop-filter: blur(20px);
-  border-top: 3px solid rgba(0, 234, 255, 0.4);
+  border-top: 3px solid rgba(0, 234, 255, 0.5);
-  box-shadow: 0 -4px 30px rgba(0, 234, 255, 0.2);
+  box-shadow: 0 -4px 40px rgba(0, 234, 255, 0.25);
 }
 
 footer p {
-  color: rgba(255, 255, 255, 0.65);
+  color: rgba(255, 255, 255, 0.7);
   font-size: 15px;
   font-family: 'Exo 2', sans-serif;
-  letter-spacing: 1.5px;
+  letter-spacing: 2px;
-}
-
-/* Floating Decoration Elements */
-.hero::before {
-  content: '';
-  position: absolute;
-  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: 1200px) {
+  .hero-title {
+    font-size: 130px;
+    letter-spacing: 16px;
+  }
+}
+
 @media (max-width: 1024px) {
   .hero-title {
     font-size: 110px;
@@ -409,85 +632,146 @@ footer p {
   }
   
   .hero-subtitle {
-    font-size: 20px;
+    font-size: 24px;
+    letter-spacing: 5px;
+  }
+
+  .stat-card {
+    min-width: 130px;
+    padding: 20px 30px;
+  }
+
+  .stat-number {
+    font-size: 40px;
   }
 }
 
 @media (max-width: 768px) {
   header {
-    padding: 20px 25px;
+    padding: 20px 30px;
-    flex-direction: column;
-    gap: 15px;
   }
 
   .logo {
-    font-size: 28px;
+    font-size: 32px;
-    letter-spacing: 3px;
+    letter-spacing: 4px;
   }
 
   .hero {
-    padding: 100px 20px 80px;
+    padding: 60px 20px 40px;
   }
 
   .hero-title {
-    font-size: 80px;
+    font-size: 85px;
-    letter-spacing: 8px;
+    letter-spacing: 10px;
   }
 
   .hero-subtitle {
-    font-size: 18px;
+    font-size: 20px;
-    letter-spacing: 3px;
+    letter-spacing: 4px;
+    margin-bottom: 50px;
   }
 
   .btn-cta {
-    padding: 16px 38px;
+    padding: 18px 40px;
-    font-size: 17px;
+    font-size: 18px;
   }
 
-  footer {
+  .stats-container {
-    margin-top: 100px;
+    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;
+  }
+
   .hero {
-    padding: 70px 15px 60px;
+    padding: 50px 15px 35px;
   }
 
   .hero-title {
-    font-size: 60px;
+    font-size: 64px;
-    letter-spacing: 5px;
+    letter-spacing: 6px;
   }
 
   .hero-subtitle {
-    font-size: 15px;
+    font-size: 16px;
-    letter-spacing: 2px;
+    letter-spacing: 3px;
-    margin-bottom: 45px;
+    margin-bottom: 40px;
+    gap: 8px;
   }
 
   .btn-cta {
-    padding: 15px 32px;
+    padding: 16px 35px;
-    font-size: 16px;
+    font-size: 17px;
     letter-spacing: 2px;
   }
 
+  .btn-icon {
+    font-size: 20px;
+  }
+
   .cta-buttons {
-    gap: 18px;
+    gap: 20px;
+    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: 48px;
+    font-size: 52px;
-    letter-spacing: 4px;
+    letter-spacing: 5px;
   }
 
   .hero-subtitle {
     font-size: 14px;
+    letter-spacing: 2px;
   }
 
   .btn-cta {
-    padding: 14px 28px;
+    padding: 14px 30px;
-    font-size: 15px;
+    font-size: 16px;
+  }
+
+  .stat-number {
+    font-size: 28px;
+  }
+}
+
+/* Center All Content */
+@media (min-height: 800px) {
+  .hero {
+    min-height: calc(100vh - 250px);
   }
 }

Homepage.html

@@ -28,8 +28,6 @@
     </div>
   </section>
 
-  <!-- Footer -->
-  
 
   <script src="Animation_Homepage.js"></script>
 </body>