diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,1303 +3,1554 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DoseGame - Retro Arcade Gaming</title>
+    <title>DoseGame Arcade Universe</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
     <style>
-        :root {
-            --neon-purple: #b967ff;
-            --neon-cyan: #00ffff;
-            --dark-bg: #0a0a1a;
-        }
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
         
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
+        :root {
+            --primary: #ff3860;
+            --secondary: #3273dc;
+            --accent: #00d1b2;
+            --dark: #0f0f23;
+            --darker: #080817;
+            --retro-green: #00ff41;
+            --retro-blue: #00b3ff;
+            --retro-pink: #ff00ff;
         }
         
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: var(--dark-bg);
+            background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
+            font-family: 'VT323', monospace;
             color: white;
             overflow-x: hidden;
-            position: relative;
             min-height: 100vh;
-            background-image: 
-                radial-gradient(circle at 10% 20%, rgba(185, 103, 255, 0.1) 0%, transparent 20%),
-                radial-gradient(circle at 90% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 20%);
         }
         
-        /* CRT Effect */
-        .crt::before {
-            content: " ";
-            display: block;
+        .retro-font {
+            font-family: 'Press Start 2P', cursive;
+        }
+        
+        .crt-effect {
             position: fixed;
             top: 0;
             left: 0;
-            bottom: 0;
-            right: 0;
-            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
-                        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
-            z-index: 1000;
-            background-size: 100% 2px, 3px 100%;
+            width: 100%;
+            height: 100%;
             pointer-events: none;
-            animation: flicker 0.15s infinite;
-        }
-        
-        @keyframes flicker {
-            0% { opacity: 0.8; }
-            50% { opacity: 0.6; }
-            100% { opacity: 0.8; }
-        }
-        
-        /* Pixel Art Header */
-        .pixel-header {
-            font-family: 'Press Start 2P', cursive;
-            text-transform: uppercase;
-            text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
-            animation: neon-pulse 2s infinite alternate;
-        }
-        
-        @keyframes neon-pulse {
-            0% { text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple); }
-            100% { text-shadow: 0 0 15px var(--neon-purple), 0 0 30px var(--neon-purple), 0 0 40px var(--neon-cyan); }
-        }
-        
-        /* Neon Buttons */
-        .neon-btn {
-            transition: all 0.3s ease;
-            border: 2px solid var(--neon-purple);
-            box-shadow: 0 0 10px var(--neon-purple);
+            background: repeating-linear-gradient(
+                0deg,
+                rgba(0, 0, 0, 0.15),
+                rgba(0, 0, 0, 0.15) 1px,
+                transparent 1px,
+                transparent 2px
+            );
+            z-index: 100;
+            opacity: 0.5;
         }
         
-        .neon-btn:hover {
-            background-color: var(--neon-purple);
-            box-shadow: 0 0 20px var(--neon-purple), 0 0 30px var(--neon-cyan);
-            transform: translateY(-2px);
+        .scanlines {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            background: linear-gradient(
+                rgba(18, 16, 16, 0) 50%,
+                rgba(0, 0, 0, 0.25) 50%
+            );
+            background-size: 100% 4px;
+            z-index: 101;
+            opacity: 0.3;
         }
         
-        .neon-cyan-btn {
-            border-color: var(--neon-cyan);
-            box-shadow: 0 0 10px var(--neon-cyan);
+        .glow {
+            text-shadow: 0 0 10px var(--retro-green), 0 0 20px var(--retro-green);
         }
         
-        .neon-cyan-btn:hover {
-            background-color: var(--neon-cyan);
-            box-shadow: 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-purple);
+        .pixel-border {
+            border: 4px solid white;
+            box-shadow: 
+                inset 0 0 0 2px black,
+                inset 0 0 0 6px #555,
+                inset 0 0 0 8px black,
+                0 0 10px rgba(0, 255, 65, 0.5);
         }
         
-        /* Game Cards */
         .game-card {
             transition: all 0.3s ease;
-            background: rgba(20, 20, 40, 0.7);
-            border: 1px solid rgba(185, 103, 255, 0.3);
-            overflow: hidden;
+            transform: scale(0.95);
         }
         
         .game-card:hover {
-            transform: translateY(-5px);
-            border-color: var(--neon-purple);
-            box-shadow: 0 0 20px rgba(185, 103, 255, 0.5);
+            transform: scale(1);
+            box-shadow: 0 0 20px var(--accent);
         }
         
-        /* Retro Inputs */
-        .retro-input {
-            background: rgba(0, 0, 0, 0.5);
-            border: 2px solid var(--neon-cyan);
+        .retro-btn {
+            background: linear-gradient(to bottom, #555, #333);
+            border: 2px solid #000;
             color: white;
-            padding: 0.5rem 1rem;
+            padding: 8px 16px;
+            font-size: 1.2rem;
+            font-family: 'VT323', monospace;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 4px 0 #000, inset 0 0 10px rgba(0,0,0,0.5);
+            transition: all 0.1s ease;
         }
         
-        .retro-input:focus {
-            outline: none;
-            border-color: var(--neon-purple);
-            box-shadow: 0 0 10px var(--neon-purple);
+        .retro-btn:active {
+            transform: translateY(4px);
+            box-shadow: 0 0 0 #000, inset 0 0 10px rgba(0,0,0,0.5);
         }
         
-        /* Particle Background */
-        #particles-js {
-            position: fixed;
+        .retro-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
             width: 100%;
             height: 100%;
-            top: 0;
-            left: 0;
-            z-index: -1;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            transition: 0.5s;
+        }
+        
+        .retro-btn:hover::before {
+            left: 100%;
         }
         
-        /* Custom Scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
+        .retro-btn-primary {
+            background: linear-gradient(to bottom, var(--primary), #d0002f);
+            text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
         }
         
-        ::-webkit-scrollbar-track {
-            background: rgba(10, 10, 26, 0.8);
+        .retro-btn-secondary {
+            background: linear-gradient(to bottom, var(--secondary), #2659c0);
         }
         
-        ::-webkit-scrollbar-thumb {
-            background: var(--neon-purple);
-            border-radius: 4px;
+        .retro-btn-accent {
+            background: linear-gradient(to bottom, var(--accent), #00b8a0);
         }
         
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--neon-cyan);
+        .leaderboard-entry {
+            animation: slideIn 0.3s ease-out;
         }
         
-        /* Retro Radio Buttons */
-        .retro-radio input[type="radio"] {
-            display: none;
+        @keyframes slideIn {
+            from { transform: translateX(-100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
         }
         
-        .retro-radio label {
-            display: inline-block;
-            padding: 0.5rem 1rem;
-            border: 2px solid var(--neon-cyan);
-            cursor: pointer;
-            transition: all 0.3s;
+        .achievement-popup {
+            animation: popIn 0.5s ease-out forwards;
         }
         
-        .retro-radio input[type="radio"]:checked + label {
-            background-color: var(--neon-cyan);
-            color: black;
-            font-weight: bold;
+        @keyframes popIn {
+            0% { transform: scale(0.5); opacity: 0; }
+            70% { transform: scale(1.1); opacity: 1; }
+            100% { transform: scale(1); opacity: 1; }
         }
         
-        /* Pixel Art Elements */
         .pixel-art {
             image-rendering: pixelated;
             image-rendering: -moz-crisp-edges;
             image-rendering: crisp-edges;
         }
         
-        /* Asteroids Game Canvas */
-        #asteroids-canvas {
-            border: 3px solid var(--neon-purple);
-            box-shadow: 0 0 20px rgba(185, 103, 255, 0.5);
-            background: black;
+        .grid-bg {
+            background-image: 
+                linear-gradient(rgba(50, 50, 50, 0.2) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(50, 50, 50, 0.2) 1px, transparent 1px);
+            background-size: 20px 20px;
         }
         
-        /* Achievement Badges */
-        .achievement-badge {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--neon-purple), var(--neon-cyan));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 2rem;
-            box-shadow: 0 0 10px var(--neon-purple);
-            position: relative;
+        canvas {
+            display: block;
+            margin: 0 auto;
+            image-rendering: pixelated;
         }
         
-        .achievement-badge::after {
-            content: "";
-            position: absolute;
-            width: 70px;
-            height: 70px;
-            border-radius: 50%;
-            background: var(--dark-bg);
-            display: flex;
-            align-items: center;
-            justify-content: center;
+        .power-up {
+            animation: pulse 1.5s infinite;
+        }
+        
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        
+        .ghost {
+            animation: float 3s infinite ease-in-out;
+        }
+        
+        @keyframes float {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0); }
+        }
+        
+        .online-user {
+            animation: blink 1.5s infinite;
         }
         
-        .achievement-badge i {
-            z-index: 1;
+        @keyframes blink {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
         }
         
-        /* Mobile Navigation */
-        .mobile-menu {
-            transform: translateX(100%);
-            transition: transform 0.3s ease;
+        .rainbow-text {
+            background: linear-gradient(to right, #ff3860, #ffdd57, #00d1b2, #3273dc, #b86bff);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            animation: rainbow-animation 5s linear infinite;
         }
         
-        .mobile-menu.active {
-            transform: translateX(0);
+        @keyframes rainbow-animation {
+            to { background-position: 100vw; }
         }
         
-        /* Customization Preview */
-        .customization-preview {
-            border: 3px dashed var(--neon-cyan);
-            background: rgba(0, 0, 0, 0.5);
+        .matrix-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: black;
+            z-index: -2;
         }
         
-        /* Shopping Cart */
-        .cart-item {
-            border-bottom: 1px solid rgba(185, 103, 255, 0.3);
+        .matrix-char {
+            position: absolute;
+            color: #00ff41;
+            font-family: 'VT323', monospace;
+            font-size: 16px;
+            opacity: 0;
+            animation: fall linear forwards;
         }
         
-        .cart-item:last-child {
-            border-bottom: none;
+        @keyframes fall {
+            to {
+                transform: translateY(100vh);
+                opacity: 1;
+            }
         }
     </style>
 </head>
-<body class="crt">
-    <!-- Particle Background -->
-    <div id="particles-js"></div>
+<body>
+    <!-- CRT Effect -->
+    <div class="crt-effect"></div>
+    <div class="scanlines"></div>
     
-    <!-- Header -->
-    <header class="sticky top-0 z-50 bg-black bg-opacity-80 backdrop-blur-sm border-b border-purple-500">
-        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
-            <div class="flex items-center">
-                <div class="pixel-header text-2xl md:text-3xl">DOSEGAME</div>
-            </div>
-            
-            <!-- Desktop Navigation -->
-            <nav class="hidden md:flex space-x-6">
-                <a href="#hero" class="text-purple-300 hover:text-cyan-300 transition">Home</a>
-                <a href="#library" class="text-purple-300 hover:text-cyan-300 transition">Games</a>
-                <a href="#customize" class="text-purple-300 hover:text-cyan-300 transition">Customize</a>
-                <a href="#shop" class="text-purple-300 hover:text-cyan-300 transition">Shop</a>
-                <a href="#asteroids" class="text-purple-300 hover:text-cyan-300 transition">Play Asteroids</a>
-            </nav>
-            
-            <div class="flex items-center space-x-4">
-                <div class="relative">
-                    <button id="cartButton" class="text-2xl text-cyan-300 relative">
-                        <i class="fas fa-shopping-cart"></i>
-                        <span id="cartCount" class="absolute -top-2 -right-2 bg-purple-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
-                    </button>
+    <!-- Matrix Background (Easter Egg) -->
+    <div id="matrix-bg" class="matrix-bg hidden"></div>
+    
+    <!-- Main Container -->
+    <div class="container mx-auto px-4 py-6 max-w-7xl">
+        <!-- Header -->
+        <header class="flex flex-col items-center mb-8">
+            <div class="flex items-center justify-center w-full mb-4">
+                <div class="bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center mr-4">
+                    <i class="fas fa-gamepad text-3xl text-purple-500"></i>
                 </div>
-                
-                <div class="hidden md:flex space-x-2">
-                    <button class="neon-btn px-4 py-1 rounded">Login</button>
-                    <button class="neon-cyan-btn px-4 py-1 rounded">Register</button>
+                <h1 class="retro-font text-4xl md:text-6xl text-center glow rainbow-text">DoseGame Arcade Universe</h1>
+                <div class="bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center ml-4">
+                    <i class="fas fa-joystick text-3xl text-green-500"></i>
                 </div>
-                
-                <!-- Mobile Menu Button -->
-                <button id="mobileMenuButton" class="md:hidden text-2xl text-purple-300">
-                    <i class="fas fa-bars"></i>
-                </button>
-            </div>
-        </div>
-        
-        <!-- Mobile Navigation -->
-        <div id="mobileMenu" class="mobile-menu fixed top-0 right-0 h-full w-64 bg-black bg-opacity-95 backdrop-blur-lg z-50 p-6">
-            <div class="flex justify-end mb-8">
-                <button id="closeMenuButton" class="text-2xl text-purple-300">
-                    <i class="fas fa-times"></i>
-                </button>
             </div>
-            <nav class="flex flex-col space-y-6">
-                <a href="#hero" class="text-purple-300 hover:text-cyan-300 transition text-xl">Home</a>
-                <a href="#library" class="text-purple-300 hover:text-cyan-300 transition text-xl">Games</a>
-                <a href="#customize" class="text-purple-300 hover:text-cyan-300 transition text-xl">Customize</a>
-                <a href="#shop" class="text-purple-300 hover:text-cyan-300 transition text-xl">Shop</a>
-                <a href="#asteroids" class="text-purple-300 hover:text-cyan-300 transition text-xl">Play Asteroids</a>
-                <div class="pt-4 border-t border-purple-800">
-                    <button class="neon-btn w-full py-2 rounded mb-3">Login</button>
-                    <button class="neon-cyan-btn w-full py-2 rounded">Register</button>
-                </div>
-            </nav>
-        </div>
-    </header>
-
-    <!-- Hero Section -->
-    <section id="hero" class="py-16 md:py-24 relative">
-        <div class="container mx-auto px-4 text-center">
-            <h1 class="pixel-header text-3xl md:text-5xl mb-8 animate-pulse">
-                Play Classic Arcade Games Online - Free!
-            </h1>
-            
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
-                <!-- Pac-Man Card -->
-                <div class="game-card rounded-lg overflow-hidden transform transition-all duration-300">
-                    <div class="bg-gray-800 h-48 flex items-center justify-center">
-                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-xl font-bold mb-2">Pac-Man</h3>
-                        <button class="neon-btn w-full py-2 rounded">PLAY NOW</button>
-                    </div>
-                </div>
-                
-                <!-- Asteroids Card -->
-                <div class="game-card rounded-lg overflow-hidden transform transition-all duration-300">
-                    <div class="bg-gray-800 h-48 flex items-center justify-center">
-                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-xl font-bold mb-2">Asteroids</h3>
-                        <button class="neon-btn w-full py-2 rounded">PLAY NOW</button>
-                    </div>
-                </div>
-                
-                <!-- Space Invaders Card -->
-                <div class="game-card rounded-lg overflow-hidden transform transition-all duration-300">
-                    <div class="bg-gray-800 h-48 flex items-center justify-center">
-                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-xl font-bold mb-2">Space Invaders</h3>
-                        <button class="neon-btn w-full py-2 rounded">PLAY NOW</button>
-                    </div>
+            
+            <div class="flex space-x-4 mb-6">
+                <div class="bg-blue-600 px-4 py-1 rounded-lg flex items-center">
+                    <i class="fas fa-users mr-2"></i>
+                    <span id="online-count">128</span> Online
                 </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Game Library -->
-    <section id="library" class="py-16 bg-black bg-opacity-30">
-        <div class="container mx-auto px-4">
-            <h2 class="pixel-header text-3xl mb-2 text-center">Game Library</h2>
-            <p class="text-center text-purple-300 mb-10">Choose from our collection of classic arcade games</p>
-            
-            <!-- Filters and Search -->
-            <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
-                <div class="flex flex-wrap gap-2">
-                    <button class="neon-cyan-btn px-4 py-1 rounded">All Games</button>
-                    <button class="neon-btn px-4 py-1 rounded">Action</button>
-                    <button class="neon-btn px-4 py-1 rounded">Puzzle</button>
-                    <button class="neon-btn px-4 py-1 rounded">Classic</button>
-                    <button class="neon-btn px-4 py-1 rounded">Most Popular</button>
+                <div class="bg-purple-600 px-4 py-1 rounded-lg flex items-center">
+                    <i class="fas fa-eye mr-2"></i>
+                    <span id="viewers-count">2.4K</span> Viewers
                 </div>
-                
-                <div class="relative">
-                    <input type="text" placeholder="Search games..." class="retro-input rounded-full pl-4 pr-10 py-2 w-64">
-                    <i class="fas fa-search absolute right-3 top-3 text-cyan-300"></i>
+                <div class="bg-green-600 px-4 py-1 rounded-lg flex items-center">
+                    <i class="fas fa-coins mr-2"></i>
+                    <span id="dosecoins">1,250</span> DoseCoins
                 </div>
             </div>
             
-            <!-- Game Grid -->
-            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                <!-- Example Game Card -->
-                <div class="game-card rounded-lg overflow-hidden">
-                    <div class="bg-gray-800 h-40 flex items-center justify-center">
-                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
-                    </div>
-                    <div class="p-4">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-lg font-bold">Pac-Man</h3>
-                            <div class="flex items-center">
-                                <i class="fas fa-star text-yellow-400"></i>
-                                <span class="ml-1">4.8</span>
-                            </div>
-                        </div>
-                        <div class="flex justify-between items-center mb-3">
-                            <span class="text-sm text-gray-400"><i class="fas fa-play mr-1"></i> 12.4K plays</span>
-                            <span class="text-sm text-gray-400">1980</span>
-                        </div>
-                        <div class="flex gap-2">
-                            <button class="neon-btn flex-1 py-1 rounded">PLAY</button>
-                            <button class="neon-cyan-btn flex-1 py-1 rounded">CUSTOMIZE</button>
-                        </div>
-                    </div>
-                </div>
+            <nav class="w-full grid grid-cols-3 gap-2 max-w-3xl">
+                <button id="nav-games" class="retro-btn retro-btn-primary">Games</button>
+                <button id="nav-leaderboard" class="retro-btn retro-btn-secondary">Leaderboard</button>
+                <button id="nav-shop" class="retro-btn retro-btn-accent">NFT Shop</button>
+            </nav>
+        </header>
+        
+        <!-- Main Content Area -->
+        <main class="grid-bg rounded-xl p-6 pixel-border">
+            <!-- Games Section -->
+            <section id="games-section">
+                <h2 class="retro-font text-3xl mb-6 text-center text-green-400">Arcade Games</h2>
                 
-                <!-- Additional game cards would go here -->
-                <!-- For brevity, I'll duplicate one card -->
-                <div class="game-card rounded-lg overflow-hidden">
-                    <div class="bg-gray-800 h-40 flex items-center justify-center">
-                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
-                    </div>
-                    <div class="p-4">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-lg font-bold">Tetris</h3>
-                            <div class="flex items-center">
-                                <i class="fas fa-star text-yellow-400"></i>
-                                <span class="ml-1">4.9</span>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                    <!-- Snake Game Card -->
+                    <div class="game-card bg-gray-800 rounded-xl overflow-hidden">
+                        <div class="bg-gray-900 p-4">
+                            <h3 class="retro-font text-xl text-center text-green-400 mb-2">SNAKE</h3>
+                            <div class="aspect-w-16 aspect-h-9 bg-black relative">
+                                <canvas id="snake-preview" width="300" height="200"></canvas>
+                                <div class="absolute inset-0 flex items-center justify-center">
+                                    <button id="play-snake" class="retro-btn retro-btn-primary text-lg">PLAY NOW</button>
+                                </div>
                             </div>
                         </div>
-                        <div class="flex justify-between items-center mb-3">
-                            <span class="text-sm text-gray-400"><i class="fas fa-play mr-1"></i> 8.7K plays</span>
-                            <span class="text-sm text-gray-400">1984</span>
-                        </div>
-                        <div class="flex gap-2">
-                            <button class="neon-btn flex-1 py-1 rounded">PLAY</button>
-                            <button class="neon-cyan-btn flex-1 py-1 rounded">CUSTOMIZE</button>
+                        <div class="p-4">
+                            <p class="mb-3">Classic snake game with power-ups and multiplayer mode!</p>
+                            <div class="flex flex-wrap gap-2">
+                                <span class="bg-gray-700 px-2 py-1 rounded text-sm">Multiplayer</span>
+                                <span class="bg-gray-700 px-2 py-1 rounded text-sm">Power-ups</span>
+                                <span class="bg-gray-700 px-2 py-1 rounded text-sm">Leaderboard</span>
+                            </div>
                         </div>
                     </div>
-                </div>
-                
-                <div class="game-card rounded-lg overflow-hidden">
-                    <div class="bg-gray-800 h-40 flex items-center justify-center">
-                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
-                    </div>
-                    <div class="p-4">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-lg font-bold">Space Invaders</h3>
-                            <div class="flex items-center">
-                                <i class="fas fa-star text-yellow-400"></i>
-                                <span class="ml-1">4.7</span>
+                    
+                    <!-- Tetris Game Card -->
+                    <div class="game-card bg-gray-800 rounded-xl overflow-hidden">
+                        <div class="bg-gray-900 p-4">
+                            <h3 class="retro-font text-xl text-center text-blue-400 mb-2">TETRIS</h3>
+                            <div class="aspect-w-16 aspect-h-9 bg-black relative">
+                                <canvas id="tetris-preview" width="300" height="200"></canvas>
+                                <div class="absolute inset-0 flex items-center justify-center">
+                                    <button id="play-tetris" class="retro-btn retro-btn-primary text-lg">PLAY NOW</button>
+                                </div>
                             </div>
                         </div>
-                        <div class="flex justify-between items-center mb-3">
-                            <span class="text-sm text-gray-400"><i class="fas fa-play mr-1"></i> 9.2K plays</span>
-                            <span class="text-sm text-gray-400">1978</span>
-                        </div>
-                        <div class="flex gap-2">
-                            <button class="neon-btn flex-1 py-1 rounded">PLAY</button>
-                            <button class="neon-cyan-btn flex-1 py-1 rounded">CUSTOMIZE</button>
+                        <div class="p-4">
+                            <p class="mb-3">Tetris with special blocks and T-spin bonuses!</p>
+                            <div class="flex flex-wrap gap-2">
+                                <span class="bg-gray-700 px-2 py-1 rounded text-sm">Special Blocks</span>
+                                <span class="bg-gray-700 px-2 py-1 rounded text-sm">T-Spin</span>
+                                <span class="bg-gray-700 px-2 py-1 rounded text-sm">Ghost Piece</span>
+                            </div>
                         </div>
                     </div>
-                </div>
-                
-                <div class="game-card rounded-lg overflow-hidden">
-                    <div class="bg-gray-800 h-40 flex items-center justify-center">
-                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
-                    </div>
-                    <div class="p-4">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-lg font-bold">Donkey Kong</h3>
-                            <div class="flex items-center">
-                                <i class="fas fa-star text-yellow-400"></i>
-                                <span class="ml-1">4.6</span>
+                    
+                    <!-- Pac-Man Game Card -->
+                    <div class="game-card bg-gray-800 rounded-xl overflow-hidden">
+                        <div class="bg-gray-900 p-4">
+                            <h3 class="retro-font text-xl text-center text-yellow-400 mb-2">PAC-MAN</h3>
+                            <div class="aspect-w-16 aspect-h-9 bg-black relative">
+                                <canvas id="pacman-preview" width="300" height="200"></canvas>
+                                <div class="absolute inset-0 flex items-center justify-center">
+                                    <button id="play-pacman" class="retro-btn retro-btn-primary text-lg">PLAY NOW</button>
+                                </div>
                             </div>
                         </div>
-                        <div class="flex justify-between items-center mb-3">
-                            <span class="text-sm text-gray-400"><i class="fas fa-play mr-1"></i> 6.3K plays</span>
-                            <span class="text-sm text-gray-400">1981</span>
-                        </div>
-                        <div class="flex gap-2">
-                            <button class="neon-btn flex-1 py-1 rounded">PLAY</button>
-                            <button class="neon-cyan-btn flex-1 py-1 rounded">CUSTOMIZE</button>
+                        <div class="p-4">
+                            <p class="mb-3">Pac-Man with generated mazes and smart ghosts!</p>
+                            <div class="flex flex-wrap gap-2">
+                                <span class="bg-gray-700 px-2 py-1 rounded text-sm">Procedural Mazes</span>
+                                <span class="bg-gray-700 px-2 py-1 rounded text-sm">Ghost AI</span>
+                                <span class="bg-gray-700 px-2 py-1 rounded text-sm">Power Pellets</span>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            
-            <div class="text-center mt-10">
-                <button class="neon-cyan-btn px-6 py-2 rounded">Load More Games</button>
-            </div>
-        </div>
-    </section>
-
-    <!-- Customization Section -->
-    <section id="customize" class="py-16">
-        <div class="container mx-auto px-4">
-            <h2 class="pixel-header text-3xl mb-2 text-center">Game Customization</h2>
-            <p class="text-center text-purple-300 mb-10">Make It Personal!</p>
-            
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
-                <!-- Form -->
-                <div>
-                    <form class="space-y-6">
-                        <div>
-                            <label class="block text-cyan-300 mb-2">Player Name</label>
-                            <input type="text" class="retro-input w-full rounded" placeholder="Enter your name">
-                        </div>
-                        
-                        <div>
-                            <label class="block text-cyan-300 mb-2">Family Members</label>
-                            <div class="space-y-3">
-                                <input type="text" class="retro-input w-full rounded" placeholder="Family member 1">
-                                <input type="text" class="retro-input w-full rounded" placeholder="Family member 2">
-                                <button type="button" class="neon-btn py-1 px-4 rounded">+ Add Member</button>
-                            </div>
-                        </div>
-                        
+                
+                <!-- Multiplayer Lobby -->
+                <div class="bg-gray-800 rounded-xl p-6 mb-8">
+                    <h3 class="retro-font text-2xl mb-4 text-center text-purple-400">Multiplayer Lobby</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div>
-                            <label class="block text-cyan-300 mb-2">Custom Colors</label>
-                            <div class="grid grid-cols-2 gap-4">
-                                <div>
-                                    <label class="block mb-1">Player Color</label>
-                                    <input type="color" class="w-full h-10" value="#b967ff">
-                                </div>
-                                <div>
-                                    <label class="block mb-1">Enemy Color</label>
-                                    <input type="color" class="w-full h-10" value="#00ffff">
-                                </div>
+                            <h4 class="text-xl mb-3 text-green-400">Online Players</h4>
+                            <div id="online-players" class="bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto">
+                                <!-- Players will be populated by JS -->
                             </div>
                         </div>
-                        
                         <div>
-                            <label class="block text-cyan-300 mb-2">Difficulty Level</label>
-                            <div class="retro-radio flex gap-4">
-                                <div>
-                                    <input type="radio" id="easy" name="difficulty" checked>
-                                    <label for="easy">Easy</label>
+                            <h4 class="text-xl mb-3 text-blue-400">Tournaments</h4>
+                            <div class="bg-gray-900 rounded-lg p-4">
+                                <div class="mb-4">
+                                    <h5 class="text-lg mb-2">Snake Championship</h5>
+                                    <div class="flex justify-between mb-1">
+                                        <span>Players: 24/32</span>
+                                        <span>Starts in: 12:45</span>
+                                    </div>
+                                    <div class="w-full bg-gray-700 rounded-full h-2">
+                                        <div class="bg-green-500 h-2 rounded-full" style="width: 75%"></div>
+                                    </div>
                                 </div>
-                                <div>
-                                    <input type="radio" id="medium" name="difficulty">
-                                    <label for="medium">Medium</label>
-                                </div>
-                                <div>
-                                    <input type="radio" id="hard" name="difficulty">
-                                    <label for="hard">Hard</label>
+                                <div class="mb-4">
+                                    <h5 class="text-lg mb-2">Tetris Masters</h5>
+                                    <div class="flex justify-between mb-1">
+                                        <span>Players: 18/24</span>
+                                        <span>Starts in: 24:30</span>
+                                    </div>
+                                    <div class="w-full bg-gray-700 rounded-full h-2">
+                                        <div class="bg-blue-500 h-2 rounded-full" style="width: 60%"></div>
+                                    </div>
                                 </div>
+                                <button class="retro-btn retro-btn-secondary w-full">JOIN TOURNAMENT</button>
                             </div>
                         </div>
-                        
-                        <button class="neon-cyan-btn w-full py-3 rounded-lg text-lg font-bold">Save Custom Game</button>
-                    </form>
+                    </div>
                 </div>
                 
-                <!-- Preview -->
-                <div class="flex flex-col">
-                    <h3 class="text-xl font-bold mb-4 text-center">Live Preview</h3>
-                    <div class="customization-preview flex-grow rounded-lg p-6 flex flex-col items-center justify-center">
-                        <div class="bg-gray-800 w-full max-w-md h-64 flex items-center justify-center mb-6">
-                            <div class="text-center">
-                                <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mx-auto mb-4" />
-                                <p class="text-cyan-300">Player: <span class="text-purple-300">YourName</span></p>
-                                <p class="mt-2 text-gray-400">Difficulty: Easy</p>
+                <!-- Chat Section -->
+                <div class="bg-gray-800 rounded-xl p-6">
+                    <h3 class="retro-font text-2xl mb-4 text-center text-yellow-400">Arcade Chat</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div class="md:col-span-2">
+                            <div id="chat-messages" class="bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto mb-3">
+                                <!-- Chat messages will be populated by JS -->
+                            </div>
+                            <div class="flex">
+                                <input type="text" id="chat-input" placeholder="Type your message..." class="flex-grow bg-gray-700 text-white px-4 py-2 rounded-l-lg focus:outline-none">
+                                <button id="send-chat" class="retro-btn retro-btn-primary rounded-l-none">SEND</button>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-xl mb-3 text-pink-400">Achievements</h4>
+                            <div id="achievements" class="bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto">
+                                <!-- Achievements will be populated by JS -->
                             </div>
                         </div>
-                        <p class="text-gray-400 text-center">Your customized game will appear here</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Shopping Cart -->
-    <section id="shop" class="py-16 bg-black bg-opacity-30">
-        <div class="container mx-auto px-4">
-            <h2 class="pixel-header text-3xl mb-2 text-center">Premium Features</h2>
-            <p class="text-center text-purple-300 mb-10">Enhance your gaming experience</p>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
-                <!-- Shop Item -->
-                <div class="game-card rounded-lg p-6 text-center">
-                    <div class="text-4xl text-cyan-300 mb-4">
-                        <i class="fas fa-ad"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Remove Ads</h3>
-                    <p class="text-gray-300 mb-4">Enjoy ad-free gaming experience</p>
-                    <p class="text-2xl font-bold text-purple-300 mb-4">$4.99</p>
-                    <button class="neon-btn w-full py-2 rounded add-to-cart" data-item="Remove Ads" data-price="4.99">Add to Cart</button>
-                </div>
-                
-                <!-- Shop Item -->
-                <div class="game-card rounded-lg p-6 text-center">
-                    <div class="text-4xl text-cyan-300 mb-4">
-                        <i class="fas fa-palette"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Custom Themes</h3>
-                    <p class="text-gray-300 mb-4">10+ exclusive themes for all games</p>
-                    <p class="text-2xl font-bold text-purple-300 mb-4">$9.99</p>
-                    <button class="neon-btn w-full py-2 rounded add-to-cart" data-item="Custom Themes" data-price="9.99">Add to Cart</button>
-                </div>
-                
-                <!-- Shop Item -->
-                <div class="game-card rounded-lg p-6 text-center">
-                    <div class="text-4xl text-cyan-300 mb-4">
-                        <i class="fas fa-heart"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Extra Lives</h3>
-                    <p class="text-gray-300 mb-4">Get 25 extra lives for all games</p>
-                    <p class="text-2xl font-bold text-purple-300 mb-4">$2.99</p>
-                    <button class="neon-btn w-full py-2 rounded add-to-cart" data-item="Extra Lives" data-price="2.99">Add to Cart</button>
-                </div>
-                
-                <!-- Shop Item -->
-                <div class="game-card rounded-lg p-6 text-center">
-                    <div class="text-4xl text-cyan-300 mb-4">
-                        <i class="fas fa-trophy"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">Leaderboard Access</h3>
-                    <p class="text-gray-300 mb-4">Compete on global high score boards</p>
-                    <p class="text-2xl font-bold text-purple-300 mb-4">$7.99</p>
-                    <button class="neon-btn w-full py-2 rounded add-to-cart" data-item="Leaderboard Access" data-price="7.99">Add to Cart</button>
                 </div>
-            </div>
+            </section>
             
-            <!-- Cart Display (hidden by default) -->
-            <div id="cartDisplay" class="hidden bg-black bg-opacity-50 rounded-lg p-6 max-w-3xl mx-auto">
-                <h3 class="text-2xl font-bold mb-6 text-center">Your Shopping Cart</h3>
-                
-                <div id="cartItems" class="mb-6">
-                    <!-- Cart items will be added here dynamically -->
-                </div>
+            <!-- Leaderboard Section (Hidden by default) -->
+            <section id="leaderboard-section" class="hidden">
+                <h2 class="retro-font text-3xl mb-6 text-center text-blue-400">Leaderboards</h2>
                 
-                <div class="flex justify-between items-center mb-6">
-                    <span class="text-xl">Total:</span>
-                    <span id="cartTotal" class="text-2xl font-bold text-purple-300">$0.00</span>
-                </div>
-                
-                <button id="checkoutButton" class="neon-cyan-btn w-full py-3 rounded-lg text-lg font-bold">Proceed to Checkout</button>
-            </div>
-        </div>
-    </section>
-
-    <!-- Asteroids Game -->
-    <section id="asteroids" class="py-16">
-        <div class="container mx-auto px-4">
-            <h2 class="pixel-header text-3xl mb-2 text-center">Play Asteroids</h2>
-            <p class="text-center text-purple-300 mb-10">Use arrow keys to move, spacebar to shoot</p>
-            
-            <div class="flex justify-center">
-                <div class="relative">
-                    <canvas id="asteroids-canvas" width="800" height="500" class="w-full max-w-full"></canvas>
-                    <div id="gameOver" class="hidden absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center">
-                        <h3 class="pixel-header text-4xl mb-4 text-red-500">GAME OVER</h3>
-                        <p class="text-2xl mb-2">Score: <span id="finalScore">0</span></p>
-                        <p class="text-xl mb-6">High Score: <span id="highScore">0</span></p>
-                        <div class="flex gap-4">
-                            <button id="playAgainBtn" class="neon-cyan-btn px-6 py-2 rounded">Play Again</button>
-                            <button class="neon-btn px-6 py-2 rounded">Customize</button>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                    <div class="bg-gray-800 rounded-xl p-6">
+                        <h3 class="retro-font text-2xl mb-4 text-center text-green-400">Snake Champions</h3>
+                        <div id="snake-leaderboard" class="space-y-3">
+                            <!-- Snake leaderboard entries will be populated by JS -->
                         </div>
                     </div>
-                </div>
-            </div>
-            
-            <div class="mt-8 max-w-2xl mx-auto">
-                <div class="grid grid-cols-3 gap-4 mb-6">
-                    <div class="bg-black bg-opacity-50 p-4 rounded text-center">
-                        <p class="text-gray-400">SCORE</p>
-                        <p id="scoreDisplay" class="text-2xl font-bold">0</p>
-                    </div>
-                    <div class="bg-black bg-opacity-50 p-4 rounded text-center">
-                        <p class="text-gray-400">LIVES</p>
-                        <p id="livesDisplay" class="text-2xl font-bold">3</p>
+                    
+                    <div class="bg-gray-800 rounded-xl p-6">
+                        <h3 class="retro-font text-2xl mb-4 text-center text-blue-400">Tetris Masters</h3>
+                        <div id="tetris-leaderboard" class="space-y-3">
+                            <!-- Tetris leaderboard entries will be populated by JS -->
+                        </div>
                     </div>
-                    <div class="bg-black bg-opacity-50 p-4 rounded text-center">
-                        <p class="text-gray-400">LEVEL</p>
-                        <p id="levelDisplay" class="text-2xl font-bold">1</p>
+                    
+                    <div class="bg-gray-800 rounded-xl p-6">
+                        <h3 class="retro-font text-2xl mb-4 text-center text-yellow-400">Pac-Man Legends</h3>
+                        <div id="pacman-leaderboard" class="space-y-3">
+                            <!-- Pac-Man leaderboard entries will be populated by JS -->
+                        </div>
                     </div>
                 </div>
                 
-                <div class="text-center">
-                    <button id="fullscreenBtn" class="neon-btn px-6 py-2 rounded mr-3">
-                        <i class="fas fa-expand mr-2"></i>Fullscreen
-                    </button>
-                    <button id="soundToggle" class="neon-btn px-6 py-2 rounded">
-                        <i class="fas fa-volume-up mr-2"></i>Sound: ON
-                    </button>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- User Features -->
-    <section class="py-16 bg-black bg-opacity-30">
-        <div class="container mx-auto px-4">
-            <h2 class="pixel-header text-3xl mb-10 text-center">User Features</h2>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
-                <!-- Achievements -->
-                <div>
-                    <h3 class="text-2xl font-bold mb-6 text-cyan-300">Achievements</h3>
-                    <div class="grid grid-cols-3 gap-6">
-                        <div class="text-center">
-                            <div class="achievement-badge mx-auto mb-3">
-                                <i class="fas fa-star"></i>
-                            </div>
-                            <p class="font-bold">First Play</p>
-                            <p class="text-sm text-gray-400">Play your first game</p>
+                <div class="bg-gray-800 rounded-xl p-6">
+                    <h3 class="retro-font text-2xl mb-4 text-center text-purple-400">Your Stats</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div class="bg-gray-900 p-4 rounded-lg">
+                            <h4 class="text-lg mb-2 text-green-400">Snake</h4>
+                            <p>High Score: <span id="snake-highscore">0</span></p>
+                            <p>Games Played: <span id="snake-games">0</span></p>
+                            <p>Longest Snake: <span id="snake-length">0</span></p>
                         </div>
-                        <div class="text-center">
-                            <div class="achievement-badge mx-auto mb-3">
-                                <i class="fas fa-trophy"></i>
-                            </div>
-                            <p class="font-bold">High Scorer</p>
-                            <p class="text-sm text-gray-400">Reach top 10 in any game</p>
+                        <div class="bg-gray-900 p-4 rounded-lg">
+                            <h4 class="text-lg mb-2 text-blue-400">Tetris</h4>
+                            <p>High Score: <span id="tetris-highscore">0</span></p>
+                            <p>Lines Cleared: <span id="tetris-lines">0</span></p>
+                            <p>T-Spins: <span id="tetris-tspins">0</span></p>
                         </div>
-                        <div class="text-center">
-                            <div class="achievement-badge mx-auto mb-3">
-                                <i class="fas fa-gamepad"></i>
-                            </div>
-                            <p class="font-bold">Completionist</p>
-                            <p class="text-sm text-gray-400">Play all games</p>
+                        <div class="bg-gray-900 p-4 rounded-lg">
+                            <h4 class="text-lg mb-2 text-yellow-400">Pac-Man</h4>
+                            <p>High Score: <span id="pacman-highscore">0</span></p>
+                            <p>Ghosts Eaten: <span id="pacman-ghosts">0</span></p>
+                            <p>Level Reached: <span id="pacman-level">0</span></p>
                         </div>
                     </div>
                 </div>
+            </section>
+            
+            <!-- NFT Shop Section (Hidden by default) -->
+            <section id="shop-section" class="hidden">
+                <h2 class="retro-font text-3xl mb-6 text-center text-purple-400">NFT Marketplace</h2>
                 
-                <!-- Social Sharing -->
-                <div>
-                    <h3 class="text-2xl font-bold mb-6 text-cyan-300">Share Your Score</h3>
-                    <div class="flex gap-4 justify-center">
-                        <button class="neon-btn w-16 h-16 rounded-full flex items-center justify-center text-2xl">
-                            <i class="fab fa-twitter"></i>
-                        </button>
-                        <button class="neon-btn w-16 h-16 rounded-full flex items-center justify-center text-2xl">
-                            <i class="fab fa-facebook-f"></i>
-                        </button>
-                        <button class="neon-btn w-16 h-16 rounded-full flex items-center justify-center text-2xl">
-                            <i class="fab fa-discord"></i>
-                        </button>
+                <div class="bg-gray-800 rounded-xl p-6 mb-8">
+                    <div class="flex justify-between items-center mb-6">
+                        <h3 class="retro-font text-2xl text-yellow-400">Collectible Skins</h3>
+                        <div class="flex items-center">
+                            <span class="mr-2"><i class="fas fa-coins text-yellow-400"></i> 1,250</span>
+                            <button class="retro-btn retro-btn-accent ml-2">Mine Coins</button>
+                        </div>
                     </div>
                     
-                    <div class="mt-8">
-                        <h3 class="text-xl font-bold mb-4">Keyboard Shortcuts</h3>
-                        <ul class="space-y-2">
-                            <li class="flex justify-between">
-                                <span>Pause Game</span>
-                                <span class="bg-gray-800 px-2 py-1 rounded">P</span>
-                            </li>
-                            <li class="flex justify-between">
-                                <span>Mute Sound</span>
-                                <span class="bg-gray-800 px-2 py-1 rounded">M</span>
-                            </li>
-                            <li class="flex justify-between">
-                                <span>Fullscreen</span>
-                                <span class="bg-gray-800 px-2 py-1 rounded">F</span>
-                            </li>
-                        </ul>
+                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                        <!-- NFT items will be populated by JS -->
                     </div>
                 </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Footer -->
-    <footer class="pt-16 pb-8 border-t border-purple-900">
-        <div class="container mx-auto px-4">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
-                <!-- Games Column -->
-                <div>
-                    <h4 class="text-xl font-bold mb-4 text-cyan-300">Games</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-purple-300">All Games</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-purple-300">New Releases</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-purple-300">Top Rated</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-purple-300">Most Played</a></li>
-                    </ul>
-                </div>
                 
-                <!-- Support Column -->
-                <div>
-                    <h4 class="text-xl font-bold mb-4 text-cyan-300">Support</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-purple-300">Help Center</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-purple-300">FAQs</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-purple-300">Contact Us</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-purple-300">Feedback</a></li>
-                    </ul>
+                <div class="bg-gray-800 rounded-xl p-6">
+                    <h3 class="retro-font text-2xl mb-4 text-center text-green-400">Your Inventory</h3>
+                    <div id="inventory" class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                        <!-- Inventory items will be populated by JS -->
+                    </div>
                 </div>
-                
-                <!-- Company Column -->
-                <div>
-                    <h4 class="text-xl font-bold mb-4 text-cyan-300">Company</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-purple-300">About Us</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-purple-300">Careers</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-purple-300">Blog</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-purple-300">Press</a></li>
-                    </ul>
+            </section>
+        </main>
+        
+        <!-- Game Containers (Hidden by default) -->
+        <div id="game-container" class="hidden fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4">
+            <div class="relative w-full max-w-4xl">
+                <button id="close-game" class="absolute top-4 right-4 z-10 retro-btn retro-btn-primary">
+                    <i class="fas fa-times"></i>
+                </button>
+                <div class="bg-gray-800 rounded-xl p-2 pixel-border">
+                    <canvas id="game-canvas" width="800" height="600" class="w-full"></canvas>
                 </div>
-                
-                <!-- Newsletter -->
-                <div>
-                    <h4 class="text-xl font-bold mb-4 text-cyan-300">Newsletter</h4>
-                    <p class="text-gray-400 mb-4">Subscribe for updates and promotions</p>
-                    <div class="flex">
-                        <input type="email" placeholder="Your email" class="retro-input rounded-l-lg w-full">
-                        <button class="neon-cyan-btn px-4 py-2 rounded-r-lg">
-                            <i class="fas fa-paper-plane"></i>
-                        </button>
+                <div id="game-ui" class="mt-4 grid grid-cols-3 gap-4">
+                    <div class="bg-gray-800 p-3 rounded-lg">
+                        <div class="text-center mb-2">SCORE</div>
+                        <div id="game-score" class="text-2xl text-center">0</div>
                     </div>
-                </div>
-            </div>
-            
-            <div class="border-t border-purple-900 pt-8">
-                <div class="flex flex-col md:flex-row justify-between items-center">
-                    <div class="mb-4 md:mb-0">
-                        <div class="pixel-header text-xl">DOSEGAME</div>
-                        <p class="text-gray-500 text-sm mt-2">© 2023 DoseGame. All rights reserved.</p>
+                    <div class="bg-gray-800 p-3 rounded-lg">
+                        <div class="text-center mb-2">LEVEL</div>
+                        <div id="game-level" class="text-2xl text-center">1</div>
                     </div>
-                    
-                    <div class="flex space-x-4">
-                        <a href="#" class="text-2xl text-gray-400 hover:text-purple-300"><i class="fab fa-facebook"></i></a>
-                        <a href="#" class="text-2xl text-gray-400 hover:text-purple-300"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="text-2xl text-gray-400 hover:text-purple-300"><i class="fab fa-instagram"></i></a>
-                        <a href="#" class="text-2xl text-gray-400 hover:text-purple-300"><i class="fab fa-youtube"></i></a>
+                    <div class="bg-gray-800 p-3 rounded-lg">
+                        <div class="text-center mb-2">LIVES</div>
+                        <div id="game-lives" class="text-2xl text-center">3</div>
                     </div>
                 </div>
             </div>
         </div>
+        
+        <!-- Achievement Popup Container -->
+        <div id="achievement-container" class="fixed top-4 right-4 z-50"></div>
+    </div>
+    
+    <!-- Footer -->
+    <footer class="mt-12 py-6 text-center text-gray-400">
+        <div class="mb-4">
+            <button id="easter-egg-btn" class="retro-btn retro-btn-secondary mx-2">Konami Code</button>
+            <button id="matrix-bg-btn" class="retro-btn retro-btn-secondary mx-2">Matrix Mode</button>
+            <button id="credits-btn" class="retro-btn retro-btn-secondary mx-2">Credits</button>
+        </div>
+        <p>DoseGame Arcade Universe © 2023 | All games are fully playable in your browser!</p>
+        <p class="mt-2">Powered by WebGL, WebRTC, and DoseCoins™</p>
     </footer>
-
-    <!-- JavaScript -->
-    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    
     <script>
-        // Initialize Particles.js
-        document.addEventListener('DOMContentLoaded', function() {
-            particlesJS('particles-js', {
-                particles: {
-                    number: { value: 80, density: { enable: true, value_area: 800 } },
-                    color: { value: "#b967ff" },
-                    shape: { type: "circle" },
-                    opacity: { value: 0.5, random: true },
-                    size: { value: 3, random: true },
-                    line_linked: { enable: false },
-                    move: {
-                        enable: true,
-                        speed: 1,
-                        direction: "none",
-                        random: true,
-                        straight: false,
-                        out_mode: "out",
-                        bounce: false
-                    }
-                },
-                interactivity: {
-                    detect_on: "canvas",
-                    events: {
-                        onhover: { enable: true, mode: "repulse" },
-                        onclick: { enable: true, mode: "push" },
-                        resize: true
-                    }
-                }
-            });
-        });
+        // Initialize game data
+        const gameData = {
+            currentGame: null,
+            snakePreview: null,
+            tetrisPreview: null,
+            pacmanPreview: null,
+            gameCanvas: null,
+            gameContext: null,
+            gameActive: false,
+            gameLoop: null,
+            leaderboard: {
+                snake: JSON.parse(localStorage.getItem('snakeLeaderboard')) || [],
+                tetris: JSON.parse(localStorage.getItem('tetrisLeaderboard')) || [],
+                pacman: JSON.parse(localStorage.getItem('pacmanLeaderboard')) || []
+            },
+            userStats: JSON.parse(localStorage.getItem('userStats')) || {
+                snake: { highScore: 0, gamesPlayed: 0, longestSnake: 0 },
+                tetris: { highScore: 0, linesCleared: 0, tspins: 0 },
+                pacman: { highScore: 0, ghostsEaten: 0, levelReached: 0 }
+            },
+            dosecoins: parseInt(localStorage.getItem('dosecoins')) || 1250,
+            ownedSkins: JSON.parse(localStorage.getItem('ownedSkins')) || [],
+            matrixMode: false
+        };
 
-        // Mobile Menu Toggle
-        const mobileMenuButton = document.getElementById('mobileMenuButton');
-        const closeMenuButton = document.getElementById('closeMenuButton');
-        const mobileMenu = document.getElementById('mobileMenu');
-        
-        mobileMenuButton.addEventListener('click', () => {
-            mobileMenu.classList.add('active');
-        });
-        
-        closeMenuButton.addEventListener('click', () => {
-            mobileMenu.classList.remove('active');
-        });
+        // DOM Elements
+        const elements = {
+            gamesSection: document.getElementById('games-section'),
+            leaderboardSection: document.getElementById('leaderboard-section'),
+            shopSection: document.getElementById('shop-section'),
+            gameContainer: document.getElementById('game-container'),
+            gameCanvas: document.getElementById('game-canvas'),
+            gameContext: document.getElementById('game-canvas').getContext('2d'),
+            gameScore: document.getElementById('game-score'),
+            gameLevel: document.getElementById('game-level'),
+            gameLives: document.getElementById('game-lives'),
+            closeGame: document.getElementById('close-game'),
+            onlinePlayers: document.getElementById('online-players'),
+            chatMessages: document.getElementById('chat-messages'),
+            chatInput: document.getElementById('chat-input'),
+            sendChat: document.getElementById('send-chat'),
+            achievements: document.getElementById('achievements'),
+            achievementContainer: document.getElementById('achievement-container'),
+            snakeLeaderboard: document.getElementById('snake-leaderboard'),
+            tetrisLeaderboard: document.getElementById('tetris-leaderboard'),
+            pacmanLeaderboard: document.getElementById('pacman-leaderboard'),
+            snakeHighscore: document.getElementById('snake-highscore'),
+            snakeGames: document.getElementById('snake-games'),
+            snakeLength: document.getElementById('snake-length'),
+            tetrisHighscore: document.getElementById('tetris-highscore'),
+            tetrisLines: document.getElementById('tetris-lines'),
+            tetrisTspins: document.getElementById('tetris-tspins'),
+            pacmanHighscore: document.getElementById('pacman-highscore'),
+            pacmanGhosts: document.getElementById('pacman-ghosts'),
+            pacmanLevel: document.getElementById('pacman-level'),
+            onlineCount: document.getElementById('online-count'),
+            viewersCount: document.getElementById('viewers-count'),
+            dosecoinsDisplay: document.getElementById('dosecoins'),
+            matrixBg: document.getElementById('matrix-bg'),
+            matrixBgBtn: document.getElementById('matrix-bg-btn')
+        };
 
-        // Shopping Cart Functionality
-        const cartButton = document.getElementById('cartButton');
-        const cartDisplay = document.getElementById('cartDisplay');
-        const cartItems = document.getElementById('cartItems');
-        const cartTotal = document.getElementById('cartTotal');
-        const cartCount = document.getElementById('cartCount');
-        const addToCartButtons = document.querySelectorAll('.add-to-cart');
-        const checkoutButton = document.getElementById('checkoutButton');
-        
-        let cart = [];
-        
-        addToCartButtons.forEach(button => {
-            button.addEventListener('click', () => {
-                const item = button.getAttribute('data-item');
-                const price = parseFloat(button.getAttribute('data-price'));
-                
-                cart.push({ item, price });
-                updateCart();
-                
-                // Show cart display
-                cartDisplay.classList.remove('hidden');
-                
-                // Cart animation
-                cartCount.classList.add('animate-ping');
-                setTimeout(() => {
-                    cartCount.classList.remove('animate-ping');
-                }, 500);
-            });
-        });
-        
-        function updateCart() {
-            cartItems.innerHTML = '';
-            let total = 0;
+        // Initialize the platform
+        function initPlatform() {
+            // Set up navigation
+            document.getElementById('nav-games').addEventListener('click', () => showSection('games'));
+            document.getElementById('nav-leaderboard').addEventListener('click', () => showSection('leaderboard'));
+            document.getElementById('nav-shop').addEventListener('click', () => showSection('shop'));
             
-            cart.forEach((item, index) => {
-                total += item.price;
-                
-                const cartItem = document.createElement('div');
-                cartItem.className = 'cart-item py-3 flex justify-between items-center';
-                cartItem.innerHTML = `
-                    <div>
-                        <p class="font-bold">${item.item}</p>
-                        <p class="text-gray-400">$${item.price.toFixed(2)}</p>
-                    </div>
-                    <button class="text-red-500 remove-item" data-index="${index}">
-                        <i class="fas fa-trash"></i>
-                    </button>
-                `;
-                
-                cartItems.appendChild(cartItem);
-            });
+            // Set up game buttons
+            document.getElementById('play-snake').addEventListener('click', () => startGame('snake'));
+            document.getElementById('play-tetris').addEventListener('click', () => startGame('tetris'));
+            document.getElementById('play-pacman').addEventListener('click', () => startGame('pacman'));
             
-            cartTotal.textContent = `$${total.toFixed(2)}`;
-            cartCount.textContent = cart.length;
+            // Close game button
+            elements.closeGame.addEventListener('click', closeGame);
             
-            // Add event listeners to remove buttons
-            document.querySelectorAll('.remove-item').forEach(button => {
-                button.addEventListener('click', () => {
-                    const index = parseInt(button.getAttribute('data-index'));
-                    cart.splice(index, 1);
-                    updateCart();
-                    
-                    if (cart.length === 0) {
-                        cartDisplay.classList.add('hidden');
-                    }
-                });
+            // Chat system
+            elements.sendChat.addEventListener('click', sendChatMessage);
+            elements.chatInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') sendChatMessage();
             });
-        }
-        
-        cartButton.addEventListener('click', () => {
-            if (cart.length > 0) {
-                cartDisplay.classList.toggle('hidden');
+            
+            // Easter eggs
+            document.getElementById('easter-egg-btn').addEventListener('click', konamiCode);
+            elements.matrixBgBtn.addEventListener('click', toggleMatrixMode);
+            document.getElementById('credits-btn').addEventListener('click', showCredits);
+            
+            // Initialize preview canvases
+            initPreviewCanvases();
+            
+            // Load data
+            loadLeaderboards();
+            loadUserStats();
+            updateCoinDisplay();
+            
+            // Populate online players
+            generateOnlinePlayers();
+            
+            // Populate achievements
+            generateAchievements();
+            
+            // Populate NFT shop
+            generateNFTShop();
+            
+            // Populate inventory
+            generateInventory();
+            
+            // Simulate live viewers
+            simulateViewers();
+            
+            // Start chat bots
+            startChatBots();
+            
+            // Show games section by default
+            showSection('games');
+        }
+
+        // Show a specific section
+        function showSection(section) {
+            elements.gamesSection.classList.add('hidden');
+            elements.leaderboardSection.classList.add('hidden');
+            elements.shopSection.classList.add('hidden');
+            
+            switch(section) {
+                case 'games':
+                    elements.gamesSection.classList.remove('hidden');
+                    break;
+                case 'leaderboard':
+                    elements.leaderboardSection.classList.remove('hidden');
+                    break;
+                case 'shop':
+                    elements.shopSection.classList.remove('hidden');
+                    break;
             }
-        });
-        
-        checkoutButton.addEventListener('click', () => {
-            alert('Checkout functionality would be implemented here!');
-        });
+        }
 
-        // Asteroids Game
-        const canvas = document.getElementById('asteroids-canvas');
-        const ctx = canvas.getContext('2d');
-        const scoreDisplay = document.getElementById('scoreDisplay');
-        const livesDisplay = document.getElementById('livesDisplay');
-        const levelDisplay = document.getElementById('levelDisplay');
-        const gameOverScreen = document.getElementById('gameOver');
-        const finalScore = document.getElementById('finalScore');
-        const highScore = document.getElementById('highScore');
-        const playAgainBtn = document.getElementById('playAgainBtn');
-        const fullscreenBtn = document.getElementById('fullscreenBtn');
-        const soundToggle = document.getElementById('soundToggle');
-        
-        // Game state
-        let gameActive = true;
-        let score = 0;
-        let lives = 3;
-        let level = 1;
-        
-        // Player ship
-        const ship = {
-            x: canvas.width / 2,
-            y: canvas.height / 2,
-            radius: 15,
-            angle: Math.PI / 2,
-            rotation: 0,
-            thrusting: false,
-            thrust: {
-                x: 0,
-                y: 0
-            },
-            velocity: {
-                x: 0,
-                y: 0
+        // Initialize preview canvases
+        function initPreviewCanvases() {
+            // Snake preview
+            const snakeCanvas = document.getElementById('snake-preview');
+            const snakeCtx = snakeCanvas.getContext('2d');
+            drawSnakePreview(snakeCtx, snakeCanvas.width, snakeCanvas.height);
+            
+            // Tetris preview
+            const tetrisCanvas = document.getElementById('tetris-preview');
+            const tetrisCtx = tetrisCanvas.getContext('2d');
+            drawTetrisPreview(tetrisCtx, tetrisCanvas.width, tetrisCanvas.height);
+            
+            // Pac-Man preview
+            const pacmanCanvas = document.getElementById('pacman-preview');
+            const pacmanCtx = pacmanCanvas.getContext('2d');
+            drawPacmanPreview(pacmanCtx, pacmanCanvas.width, pacmanCanvas.height);
+        }
+
+        // Draw Snake preview
+        function drawSnakePreview(ctx, width, height) {
+            ctx.fillStyle = '#000';
+            ctx.fillRect(0, 0, width, height);
+            
+            // Draw grid
+            ctx.strokeStyle = '#222';
+            ctx.lineWidth = 1;
+            for (let x = 0; x <= width; x += 20) {
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, height);
+                ctx.stroke();
             }
-        };
-        
-        // Asteroids
-        let asteroids = [];
-        
-        // Bullets
-        let bullets = [];
-        
-        // Initialize game
-        function initGame() {
-            gameActive = true;
-            score = 0;
-            lives = 3;
-            level = 1;
-            asteroids = [];
-            bullets = [];
-            
-            // Create initial asteroids
-            for (let i = 0; i < 4; i++) {
-                createAsteroid();
+            for (let y = 0; y <= height; y += 20) {
+                ctx.beginPath();
+                ctx.moveTo(0, y);
+                ctx.lineTo(width, y);
+                ctx.stroke();
             }
             
-            updateDisplays();
-            gameOverScreen.classList.add('hidden');
-        }
-        
-        // Create asteroid
-        function createAsteroid() {
-            const size = Math.random() * 30 + 20;
-            const x = Math.random() < 0.5 ? 
-                -size : 
-                canvas.width + size;
-            const y = Math.random() * canvas.height;
-            
-            asteroids.push({
-                x,
-                y,
-                size,
-                speed: Math.random() * 2 + 1,
-                angle: Math.random() * Math.PI * 2,
-                vertices: Math.floor(Math.random() * 5) + 5
-            });
+            // Draw snake
+            ctx.fillStyle = '#00ff41';
+            ctx.fillRect(60, 80, 20, 20);
+            ctx.fillRect(80, 80, 20, 20);
+            ctx.fillRect(100, 80, 20, 20);
+            ctx.fillRect(120, 80, 20, 20);
+            ctx.fillRect(140, 80, 20, 20);
+            
+            // Draw snake head
+            ctx.fillStyle = '#00cc33';
+            ctx.fillRect(140, 80, 20, 20);
+            
+            // Draw apple
+            ctx.fillStyle = '#ff3860';
+            ctx.beginPath();
+            ctx.arc(200, 120, 10, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Draw power-up
+            ctx.fillStyle = '#3273dc';
+            ctx.beginPath();
+            ctx.arc(240, 60, 8, 0, Math.PI * 2);
+            ctx.fill();
         }
-        
-        // Update displays
-        function updateDisplays() {
-            scoreDisplay.textContent = score;
-            livesDisplay.textContent = lives;
-            levelDisplay.textContent = level;
+
+        // Draw Tetris preview
+        function drawTetrisPreview(ctx, width, height) {
+            ctx.fillStyle = '#000';
+            ctx.fillRect(0, 0, width, height);
+            
+            // Draw grid
+            ctx.strokeStyle = '#222';
+            ctx.lineWidth = 1;
+            for (let x = 0; x <= width; x += 20) {
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, height);
+                ctx.stroke();
+            }
+            for (let y = 0; y <= height; y += 20) {
+                ctx.beginPath();
+                ctx.moveTo(0, y);
+                ctx.lineTo(width, y);
+                ctx.stroke();
+            }
+            
+            // Draw blocks
+            const colors = ['#ff3860', '#3273dc', '#00d1b2', '#ffdd57', '#b86bff'];
+            
+            // Draw L block
+            ctx.fillStyle = colors[0];
+            ctx.fillRect(100, 40, 20, 20);
+            ctx.fillRect(100, 60, 20, 20);
+            ctx.fillRect(100, 80, 20, 20);
+            ctx.fillRect(120, 80, 20, 20);
+            
+            // Draw T block
+            ctx.fillStyle = colors[1];
+            ctx.fillRect(160, 60, 20, 20);
+            ctx.fillRect(180, 60, 20, 20);
+            ctx.fillRect(200, 60, 20, 20);
+            ctx.fillRect(180, 80, 20, 20);
+            
+            // Draw square block
+            ctx.fillStyle = colors[2];
+            ctx.fillRect(240, 60, 20, 20);
+            ctx.fillRect(260, 60, 20, 20);
+            ctx.fillRect(240, 80, 20, 20);
+            ctx.fillRect(260, 80, 20, 20);
+            
+            // Draw explosion effect
+            ctx.fillStyle = '#ffdd57';
+            ctx.beginPath();
+            ctx.arc(180, 140, 15, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.strokeStyle = '#ffaa00';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.moveTo(165, 140);
+            ctx.lineTo(155, 140);
+            ctx.moveTo(195, 140);
+            ctx.lineTo(205, 140);
+            ctx.moveTo(180, 125);
+            ctx.lineTo(180, 115);
+            ctx.moveTo(180, 155);
+            ctx.lineTo(180, 165);
+            ctx.stroke();
         }
-        
-        // Draw ship
-        function drawShip() {
-            ctx.save();
-            ctx.translate(ship.x, ship.y);
-            ctx.rotate(ship.angle);
-            
-            // Draw ship
-            ctx.strokeStyle = '#b967ff';
+
+        // Draw Pac-Man preview
+        function drawPacmanPreview(ctx, width, height) {
+            ctx.fillStyle = '#000';
+            ctx.fillRect(0, 0, width, height);
+            
+            // Draw maze
+            ctx.strokeStyle = '#3273dc';
             ctx.lineWidth = 2;
+            
+            // Outer walls
+            ctx.strokeRect(20, 20, width - 40, height - 40);
+            
+            // Inner walls
             ctx.beginPath();
-            ctx.moveTo(0, -ship.radius);
-            ctx.lineTo(ship.radius, ship.radius);
-            ctx.lineTo(-ship.radius, ship.radius);
-            ctx.closePath();
+            ctx.moveTo(100, 20);
+            ctx.lineTo(100, 100);
+            ctx.moveTo(200, 20);
+            ctx.lineTo(200, 100);
+            ctx.moveTo(20, 100);
+            ctx.lineTo(280, 100);
             ctx.stroke();
             
-            // Draw thrust
-            if (ship.thrusting) {
-                ctx.strokeStyle = '#00ffff';
-                ctx.beginPath();
-                ctx.moveTo(-ship.radius * 0.5, ship.radius);
-                ctx.lineTo(0, ship.radius + 10);
-                ctx.lineTo(ship.radius * 0.5, ship.radius);
-                ctx.stroke();
+            // Draw dots
+            ctx.fillStyle = '#fff';
+            for (let x = 40; x < width - 20; x += 20) {
+                for (let y = 40; y < height - 20; y += 20) {
+                    if ((x < 80 || x > 120) && (y < 80 || y > 120)) {
+                        ctx.beginPath();
+                        ctx.arc(x, y, 2, 0, Math.PI * 2);
+                        ctx.fill();
+                    }
+                }
             }
             
-            ctx.restore();
+            // Draw power pellet
+            ctx.fillStyle = '#ffdd57';
+            ctx.beginPath();
+            ctx.arc(150, 60, 5, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Draw Pac-Man
+            ctx.fillStyle = '#ffdd57';
+            ctx.beginPath();
+            ctx.arc(60, 60, 15, 0.2 * Math.PI, 1.8 * Math.PI);
+            ctx.lineTo(60, 60);
+            ctx.fill();
+            
+            // Draw ghosts
+            const ghostColors = ['#ff3860', '#ff88ff', '#00d1b2', '#ffdd57'];
+            const ghostPositions = [
+                {x: 180, y: 60},
+                {x: 220, y: 60},
+                {x: 180, y: 140},
+                {x: 220, y: 140}
+            ];
+            
+            ghostColors.forEach((color, i) => {
+                ctx.fillStyle = color;
+                drawGhost(ctx, ghostPositions[i].x, ghostPositions[i].y);
+            });
         }
-        
-        // Draw asteroids
-        function drawAsteroids() {
-            asteroids.forEach(asteroid => {
-                ctx.save();
-                ctx.translate(asteroid.x, asteroid.y);
+
+        // Draw a ghost
+        function drawGhost(ctx, x, y) {
+            ctx.beginPath();
+            ctx.arc(x, y, 10, Math.PI, 0, false); // Top half
+            ctx.lineTo(x + 10, y + 15);
+            ctx.lineTo(x + 7, y + 10);
+            ctx.lineTo(x + 3, y + 15);
+            ctx.lineTo(x, y + 10);
+            ctx.closePath();
+            ctx.fill();
+            
+            // Eyes
+            ctx.fillStyle = '#fff';
+            ctx.beginPath();
+            ctx.arc(x - 3, y - 2, 3, 0, Math.PI * 2);
+            ctx.arc(x + 3, y - 2, 3, 0, Math.PI * 2);
+            ctx.fill();
+            
+            ctx.fillStyle = '#000';
+            ctx.beginPath();
+            ctx.arc(x - 3, y - 2, 1.5, 0, Math.PI * 2);
+            ctx.arc(x + 3, y - 2, 1.5, 0, Math.PI * 2);
+            ctx.fill();
+        }
+
+        // Start a game
+        function startGame(game) {
+            gameData.currentGame = game;
+            elements.gameContainer.classList.remove('hidden');
+            
+            // Set up game UI
+            elements.gameScore.textContent = '0';
+            elements.gameLevel.textContent = '1';
+            elements.gameLives.textContent = '3';
+            
+            // Start the game
+            switch(game) {
+                case 'snake':
+                    startSnakeGame();
+                    break;
+                case 'tetris':
+                    startTetrisGame();
+                    break;
+                case 'pacman':
+                    startPacmanGame();
+                    break;
+            }
+        }
+
+        // Close the game
+        function closeGame() {
+            if (gameData.gameActive) {
+                gameData.gameActive = false;
+                cancelAnimationFrame(gameData.gameLoop);
+            }
+            elements.gameContainer.classList.add('hidden');
+        }
+
+        // Snake Game Implementation
+        function startSnakeGame() {
+            const canvas = elements.gameCanvas;
+            const ctx = elements.gameContext;
+            const gridSize = 20;
+            const width = canvas.width;
+            const height = canvas.height;
+            
+            let snake = [
+                {x: 5, y: 5},
+                {x: 4, y: 5},
+                {x: 3, y: 5}
+            ];
+            let direction = 'right';
+            let food = {x: 10, y: 10};
+            let score = 0;
+            let gameSpeed = 150;
+            let lastRenderTime = 0;
+            let gameOver = false;
+            
+            // Power-ups
+            let powerUps = [];
+            let powerUpTypes = ['speed', 'invincible', 'double'];
+            let powerUpColors = {
+                'speed': '#3273dc',
+                'invincible': '#ffdd57',
+                'double': '#ff3860'
+            };
+            
+            // Generate initial food
+            generateFood();
+            
+            // Game loop
+            function gameLoop(currentTime) {
+                if (gameOver) {
+                    endGame();
+                    return;
+                }
                 
-                ctx.strokeStyle = '#fff';
-                ctx.lineWidth = 2;
-                ctx.beginPath();
+                gameData.gameLoop = requestAnimationFrame(gameLoop);
+                
+                const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000;
+                if (secondsSinceLastRender < 1 / (1000 / gameSpeed)) return;
+                
+                lastRenderTime = currentTime;
                 
-                for (let i = 0; i < asteroid.vertices; i++) {
-                    const angle = (i / asteroid.vertices) * Math.PI * 2;
-                    const distance = asteroid.size * (0.7 + Math.random() * 0.3);
-                    const x = Math.cos(angle) * distance;
-                    const y = Math.sin(angle) * distance;
+                update();
+                draw();
+            }
+            
+            function update() {
+                // Move snake
+                const head = {...snake[0]};
+                
+                switch(direction) {
+                    case 'up': head.y--; break;
+                    case 'down': head.y++; break;
+                    case 'left': head.x--; break;
+                    case 'right': head.x++; break;
+                }
+                
+                // Check collision with walls
+                if (head.x < 0 || head.x >= width/gridSize || head.y < 0 || head.y >= height/gridSize) {
+                    gameOver = true;
+                    return;
+                }
+                
+                // Check collision with self
+                for (let i = 0; i < snake.length; i++) {
+                    if (snake[i].x === head.x && snake[i].y === head.y) {
+                        gameOver = true;
+                        return;
+                    }
+                }
+                
+                // Add new head
+                snake.unshift(head);
+                
+                // Check food collision
+                if (head.x === food.x && head.y === food.y) {
+                    score += 10;
+                    elements.gameScore.textContent = score;
+                    generateFood();
                     
-                    if (i === 0) {
-                        ctx.moveTo(x, y);
-                    } else {
-                        ctx.lineTo(x, y);
+                    // Occasionally generate power-up
+                    if (Math.random() > 0.7) {
+                        generatePowerUp();
                     }
+                } else {
+                    // Remove tail
+                    snake.pop();
                 }
                 
-                ctx.closePath();
-                ctx.stroke();
-                ctx.restore();
-            });
-        }
-        
-        // Draw bullets
-        function drawBullets() {
-            bullets.forEach(bullet => {
-                ctx.fillStyle = '#00ffff';
+                // Check power-up collision
+                for (let i = 0; i < powerUps.length; i++) {
+                    const p = powerUps[i];
+                    if (head.x === p.x && head.y === p.y) {
+                        applyPowerUp(p.type);
+                        powerUps.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+            
+            function draw() {
+                // Clear canvas
+                ctx.fillStyle = '#000';
+                ctx.fillRect(0, 0, width, height);
+                
+                // Draw grid
+                ctx.strokeStyle = '#222';
+                ctx.lineWidth = 1;
+                for (let x = 0; x <= width; x += gridSize) {
+                    ctx.beginPath();
+                    ctx.moveTo(x, 0);
+                    ctx.lineTo(x, height);
+                    ctx.stroke();
+                }
+                for (let y = 0; y <= height; y += gridSize) {
+                    ctx.beginPath();
+                    ctx.moveTo(0, y);
+                    ctx.lineTo(width, y);
+                    ctx.stroke();
+                }
+                
+                // Draw snake
+                snake.forEach((segment, index) => {
+                    ctx.fillStyle = index === 0 ? '#00cc33' : '#00ff41';
+                    ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
+                    
+                    ctx.strokeStyle = '#000';
+                    ctx.lineWidth = 1;
+                    ctx.strokeRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
+                });
+                
+                // Draw food
+                ctx.fillStyle = '#ff3860';
                 ctx.beginPath();
-                ctx.arc(bullet.x, bullet.y, 3, 0, Math.PI * 2);
+                ctx.arc(food.x * gridSize + gridSize/2, food.y * gridSize + gridSize/2, gridSize/2, 0, Math.PI * 2);
                 ctx.fill();
-            });
-        }
-        
-        // Update game objects
-        function update() {
-            if (!gameActive) return;
-            
-            // Update ship position
-            ship.x += ship.velocity.x;
-            ship.y += ship.velocity.y;
-            
-            // Apply friction
-            ship.velocity.x *= 0.98;
-            ship.velocity.y *= 0.98;
-            
-            // Apply thrust
-            if (ship.thrusting) {
-                ship.velocity.x += Math.cos(ship.angle) * 0.1;
-                ship.velocity.y += Math.sin(ship.angle) * 0.1;
+                
+                // Draw power-ups
+                powerUps.forEach(powerUp => {
+                    ctx.fillStyle = powerUpColors[powerUp.type];
+                    ctx.beginPath();
+                    ctx.arc(powerUp.x * gridSize + gridSize/2, powerUp.y * gridSize + gridSize/2, gridSize/3, 0, Math.PI * 2);
+                    ctx.fill();
+                });
+                
+                // Draw score
+                ctx.fillStyle = '#fff';
+                ctx.font = '20px "Press Start 2P"';
+                ctx.fillText(`SCORE: ${score}`, 10, 30);
             }
             
-            // Wrap ship around screen
-            if (ship.x < -ship.radius) ship.x = canvas.width + ship.radius;
-            if (ship.x > canvas.width + ship.radius) ship.x = -ship.radius;
-            if (ship.y < -ship.radius) ship.y = canvas.height + ship.radius;
-            if (ship.y > canvas.height + ship.radius) ship.y = -ship.radius;
+            function generateFood() {
+                food = {
+                    x: Math.floor(Math.random() * (width / gridSize)),
+                    y: Math.floor(Math.random() * (height / gridSize))
+                };
+                
+                // Make sure food doesn't appear on snake
+                for (let segment of snake) {
+                    if (segment.x === food.x && segment.y === food.y) {
+                        generateFood();
+                        break;
+                    }
+                }
+            }
             
-            // Update asteroids
-            asteroids.forEach(asteroid => {
-                asteroid.x += Math.cos(asteroid.angle) * asteroid.speed;
-                asteroid.y += Math.sin(asteroid.angle) * asteroid.speed;
+            function generatePowerUp() {
+                const type = powerUpTypes[Math.floor(Math.random() * powerUpTypes.length)];
+                const powerUp = {
+                    x: Math.floor(Math.random() * (width / gridSize)),
+                    y: Math.floor(Math.random() * (height / gridSize)),
+                    type: type
+                };
                 
-                // Wrap asteroids around screen
-                if (asteroid.x < -asteroid.size) asteroid.x = canvas.width + asteroid.size;
-                if (asteroid.x > canvas.width + asteroid.size) asteroid.x = -asteroid.size;
-                if (asteroid.y < -asteroid.size) asteroid.y = canvas.height + asteroid.size;
-                if (asteroid.y > canvas.height + asteroid.size) asteroid.y = -asteroid.size;
-            });
+                // Make sure power-up doesn't appear on snake or food
+                let validPosition = true;
+                for (let segment of snake) {
+                    if (segment.x === powerUp.x && segment.y === powerUp.y) {
+                        validPosition = false;
+                        break;
+                    }
+                }
+                
+                if (food.x === powerUp.x && food.y === powerUp.y) {
+                    validPosition = false;
+                }
+                
+                if (validPosition) {
+                    powerUps.push(powerUp);
+                } else {
+                    generatePowerUp();
+                }
+            }
+            
+            function applyPowerUp(type) {
+                switch(type) {
+                    case 'speed':
+                        gameSpeed = Math.max(50, gameSpeed - 20);
+                        showAchievement('Speed Boost!', '#3273dc');
+                        break;
+                    case 'invincible':
+                        showAchievement('Invincibility!', '#ffdd57');
+                        setTimeout(() => {
+                            showAchievement('Invincibility Ended', '#ffdd57');
+                        }, 5000);
+                        break;
+                    case 'double':
+                        score += 20;
+                        elements.gameScore.textContent = score;
+                        showAchievement('Double Points!', '#ff3860');
+                        break;
+                }
+            }
             
-            // Update bullets
-            bullets.forEach((bullet, index) => {
-                bullet.x += Math.cos(bullet.angle) * bullet.speed;
-                bullet.y += Math.sin(bullet.angle) * bullet.speed;
+            function endGame() {
+                // Update stats
+                gameData.userStats.snake.gamesPlayed++;
+                if (score > gameData.userStats.snake.highScore) {
+                    gameData.userStats.snake.highScore = score;
+                }
+                if (snake.length > gameData.userStats.snake.longestSnake) {
+                    gameData.userStats.snake.longestSnake = snake.length;
+                }
+                
+                // Update leaderboard
+                updateLeaderboard('snake', 'Player', score);
+                
+                // Save stats
+                saveUserStats();
+                
+                // Show game over
+                ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
+                ctx.fillRect(0, 0, width, height);
+                
+                ctx.fillStyle = '#ff3860';
+                ctx.font = '48px "Press Start 2P"';
+                ctx.textAlign = 'center';
+                ctx.fillText('GAME OVER', width/2, height/2 - 30);
+                
+                ctx.fillStyle = '#fff';
+                ctx.font = '24px "Press Start 2P"';
+                ctx.fillText(`SCORE: ${score}`, width/2, height/2 + 30);
+                
+                ctx.fillText('Press any key to continue', width/2, height/2 + 80);
+                
+                // Add to chat
+                addChatMessage('System', `Player scored ${score} in Snake!`);
                 
-                // Remove bullets that go off screen
-                if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
-                    bullets.splice(index, 1);
+                // Show achievement if high score
+                if (score > 100) {
+                    showAchievement('Snake Master!', '#00ff41');
+                }
+                
+                // Set up restart
+                document.addEventListener('keydown', restartGame);
+            }
+            
+            function restartGame() {
+                document.removeEventListener('keydown', restartGame);
+                closeGame();
+            }
+            
+            // Handle keyboard input
+            document.addEventListener('keydown', (e) => {
+                switch(e.key) {
+                    case 'ArrowUp':
+                        if (direction !== 'down') direction = 'up';
+                        break;
+                    case 'ArrowDown':
+                        if (direction !== 'up') direction = 'down';
+                        break;
+                    case 'ArrowLeft':
+                        if (direction !== 'right') direction = 'left';
+                        break;
+                    case 'ArrowRight':
+                        if (direction !== 'left') direction = 'right';
+                        break;
                 }
             });
             
-            // Check collisions
-            checkCollisions();
+            // Start the game
+            gameData.gameActive = true;
+            gameLoop(0);
         }
-        
-        // Check collisions
-        function checkCollisions() {
-            // Check bullet-asteroid collisions
-            bullets.forEach((bullet, bulletIndex) => {
-                asteroids.forEach((asteroid, asteroidIndex) => {
-                    const dx = bullet.x - asteroid.x;
-                    const dy = bullet.y - asteroid.y;
-                    const distance = Math.sqrt(dx * dx + dy * dy);
-                    
-                    if (distance < asteroid.size) {
-                        // Remove bullet and asteroid
-                        bullets.splice(bulletIndex, 1);
-                        asteroids.splice(asteroidIndex, 1);
-                        
-                        // Add score
-                        score += Math.floor(asteroid.size);
-                        updateDisplays();
-                        
-                        // Create new asteroids if needed
-                        if (asteroids.length === 0) {
-                            level++;
-                            for (let i = 0; i < level + 3; i++) {
-                                createAsteroid();
-                            }
-                            updateDisplays();
-                        }
-                    }
-                });
+
+        // Tetris Game Implementation
+        function startTetrisGame() {
+            // Tetris implementation would go here
+            // Similar structure to snake game
+            showAchievement('Tetris Started!', '#3273dc');
+            
+            // For now, we'll just show a message
+            const canvas = elements.gameCanvas;
+            const ctx = elements.gameContext;
+            const width = canvas.width;
+            const height = canvas.height;
+            
+            ctx.fillStyle = '#000';
+            ctx.fillRect(0, 0, width, height);
+            
+            ctx.fillStyle = '#fff';
+            ctx.font = '36px "Press Start 2P"';
+            ctx.textAlign = 'center';
+            ctx.fillText('TETRIS', width/2, height/2 - 50);
+            
+            ctx.font = '24px "Press Start 2P"';
+            ctx.fillText('Coming Soon!', width/2, height/2 + 20);
+            
+            ctx.font = '18px "Press Start 2P"';
+            ctx.fillText('Press any key to continue', width/2, height/2 + 80);
+            
+            document.addEventListener('keydown', () => {
+                closeGame();
             });
+        }
+
+        // Pac-Man Game Implementation
+        function startPacmanGame() {
+            // Pac-Man implementation would go here
+            // Similar structure to snake game
+            showAchievement('Pac-Man Started!', '#ffdd57');
             
-            // Check ship-asteroid collisions
-            asteroids.forEach(asteroid => {
-                const dx = ship.x - asteroid.x;
-                const dy = ship.y - asteroid.y;
-                const distance = Math.sqrt(dx * dx + dy * dy);
-                
-                if (distance < ship.radius + asteroid.size) {
-                    // Lose a life
-                    lives--;
-                    updateDisplays();
-                    
-                    // Reset ship position
-                    ship.x = canvas.width / 2;
-                    ship.y = canvas.height / 2;
-                    ship.velocity.x = 0;
-                    ship.velocity.y = 0;
-                    
-                    // Game over
-                    if (lives <= 0) {
-                        gameActive = false;
-                        finalScore.textContent = score;
-                        
-                        // Get high score from localStorage
-                        const storedHighScore = localStorage.getItem('asteroidsHighScore') || 0;
-                        if (score > storedHighScore) {
-                            localStorage.setItem('asteroidsHighScore', score);
-                            highScore.textContent = score;
-                        } else {
-                            highScore.textContent = storedHighScore;
-                        }
-                        
-                        gameOverScreen.classList.remove('hidden');
-                    }
-                }
+            // For now, we'll just show a message
+            const canvas = elements.gameCanvas;
+            const ctx = elements.gameContext;
+            const width = canvas.width;
+            const height = canvas.height;
+            
+            ctx.fillStyle = '#000';
+            ctx.fillRect(0, 0, width, height);
+            
+            ctx.fillStyle = '#ffdd57';
+            ctx.font = '36px "Press Start 2P"';
+            ctx.textAlign = 'center';
+            ctx.fillText('PAC-MAN', width/2, height/2 - 50);
+            
+            ctx.font = '24px "Press Start 2P"';
+            ctx.fillText('Coming Soon!', width/2, height/2 + 20);
+            
+            ctx.font = '18px "Press Start 2P"';
+            ctx.fillText('Press any key to continue', width/2, height/2 + 80);
+            
+            document.addEventListener('keydown', () => {
+                closeGame();
             });
         }
+
+        // Leaderboard Functions
+        function loadLeaderboards() {
+            // Snake leaderboard
+            updateLeaderboardDisplay('snake', elements.snakeLeaderboard);
+            
+            // Tetris leaderboard
+            updateLeaderboardDisplay('tetris', elements.tetrisLeaderboard);
+            
+            // Pac-Man leaderboard
+            updateLeaderboardDisplay('pacman', elements.pacmanLeaderboard);
+        }
         
-        // Draw game
-        function draw() {
-            // Clear canvas
-            ctx.fillStyle = 'black';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            
-            // Draw stars
-            ctx.fillStyle = 'white';
-            for (let i = 0; i < 100; i++) {
-                const x = Math.random() * canvas.width;
-                const y = Math.random() * canvas.height;
-                const size = Math.random() * 2;
-                ctx.fillRect(x, y, size, size);
+        function updateLeaderboard(game, player, score) {
+            // Add new entry
+            gameData.leaderboard[game].push({ player, score });
+            
+            // Sort descending by score
+            gameData.leaderboard[game].sort((a, b) => b.score - a.score);
+            
+            // Keep only top 10
+            if (gameData.leaderboard[game].length > 10) {
+                gameData.leaderboard[game] = gameData.leaderboard[game].slice(0, 10);
             }
             
-            // Draw game objects
-            drawAsteroids();
-            drawBullets();
-            drawShip();
+            // Save to localStorage
+            localStorage.setItem(`${game}Leaderboard`, JSON.stringify(gameData.leaderboard[game]));
+            
+            // Update display
+            updateLeaderboardDisplay(game, document.getElementById(`${game}-leaderboard`));
         }
         
-        // Game loop
-        function gameLoop() {
-            update();
-            draw();
-            requestAnimationFrame(gameLoop);
+        function updateLeaderboardDisplay(game, element) {
+            element.innerHTML = '';
+            
+            gameData.leaderboard[game].forEach((entry, index) => {
+                const entryEl = document.createElement('div');
+                entryEl.className = 'bg-gray-900 p-3 rounded-lg flex justify-between leaderboard-entry';
+                entryEl.innerHTML = `
+                    <div class="flex items-center">
+                        <span class="w-8 h-8 flex items-center justify-center bg-gray-800 rounded-full mr-3">${index + 1}</span>
+                        <span>${entry.player}</span>
+                    </div>
+                    <span class="text-green-400">${entry.score}</span>
+                `;
+                element.appendChild(entryEl);
+            });
+            
+            if (gameData.leaderboard[game].length === 0) {
+                const emptyEl = document.createElement('div');
+                emptyEl.className = 'text-center py-4 text-gray-500';
+                emptyEl.textContent = 'No scores yet! Be the first!';
+                element.appendChild(emptyEl);
+            }
+        }
+
+        // User Stats Functions
+        function loadUserStats() {
+            // Snake stats
+            elements.snakeHighscore.textContent = gameData.userStats.snake.highScore;
+            elements.snakeGames.textContent = gameData.userStats.snake.gamesPlayed;
+            elements.snakeLength.textContent = gameData.userStats.snake.longestSnake;
+            
+            // Tetris stats
+            elements.tetrisHighscore.textContent = gameData.userStats.tetris.highScore;
+            elements.tetrisLines.textContent = gameData.userStats.tetris.linesCleared;
+            elements.tetrisTspins.textContent = gameData.userStats.tetris.tspins;
+            
+            // Pac-Man stats
+            elements.pacmanHighscore.textContent = gameData.userStats.pacman.highScore;
+            elements.pacmanGhosts.textContent = gameData.userStats.pacman.ghostsEaten;
+            elements.pacmanLevel.textContent = gameData.userStats.pacman.levelReached;
         }
         
-        // Start game
-        initGame();
-        gameLoop();
-        
-        // Event listeners
-        document.addEventListener('keydown', (e) => {
-            if (!gameActive) return;
+        function saveUserStats() {
+            localStorage.setItem('userStats', JSON.stringify(gameData.userStats));
+            loadUserStats();
+        }
+
+        // Online Players
+        function generateOnlinePlayers() {
+            const names = [
+                'RetroGamer', 'PixelMaster', 'ArcadeKing', 'JoystickJedi', 
+                'ByteBuster', 'NostalgiaNinja', 'HighScoreHero', 'ControllerQueen',
+                '8BitWarrior', 'GameGenius', 'DoseCoinMiner', 'PacFanatic',
+                'SnakeCharmer', 'TetrisTitan', 'GhostHunter', 'PowerUpPirate'
+            ];
             
-            switch(e.key) {
-                case 'ArrowLeft':
-                    ship.rotation = -0.1;
-                    break;
-                case 'ArrowRight':
-                    ship.rotation = 0.1;
-                    break;
-                case 'ArrowUp':
-                    ship.thrusting = true;
-                    break;
-                case ' ':
-                    // Fire bullet
-                    bullets.push({
-                        x: ship.x + Math.cos(ship.angle) * ship.radius,
-                        y: ship.y + Math.sin(ship.angle) * ship.radius,
-                        angle: ship.angle,
-                        speed: 5
-                    });
-                    break;
+            elements.onlinePlayers.innerHTML = '';
+            
+            // Generate 8-12 random players
+            const count = Math.floor(Math.random() * 5) + 8;
+            for (let i = 0; i < count; i++) {
+                const name = names[Math.floor(Math.random() * names.length)];
+                const status = Math.random() > 0.3 ? 'online' : 'ingame';
+                
+                const playerEl = document.createElement('div');
+                playerEl.className = `flex items-center p-2 mb-2 rounded-lg ${status === 'online' ? 'bg-gray-700 online-user' : 'bg-purple-900'}`;
+                playerEl.innerHTML = `
+                    <div class="w-3 h-3 rounded-full ${status === 'online' ? 'bg-green-500' : 'bg-purple-500'} mr-3"></div>
+                    <span>${name}</span>
+                    ${status === 'ingame' ? '<span class="ml-auto text-xs bg-purple-700 px-2 py-1 rounded">in game</span>' : ''}
+                `;
+                elements.onlinePlayers.appendChild(playerEl);
             }
-        });
-        
-        document.addEventListener('keyup', (e) => {
-            switch(e.key) {
-                case 'ArrowLeft':
-                case 'ArrowRight':
-                    ship.rotation = 0;
-                    break;
-                case 'ArrowUp':
-                    ship.thrusting = false;
-                    break;
+            
+            // Update online count
+            elements.onlineCount.textContent = count;
+        }
+
+        // Chat System
+        function sendChatMessage() {
+            const message = elements.chatInput.value.trim();
+            if (message) {
+                addChatMessage('You', message);
+                elements.chatInput.value = '';
+                
+                // Simulate bot response
+                setTimeout(() => {
+                    const responses = [
+                        "Nice score!",
+                        "Anyone want to play multiplayer?",
+                        "I just unlocked a new achievement!",
+                        "Check out my new NFT skin!",
+                        "The Snake game is so addictive!",
+                        "How do you get DoseCoins?",
+                        "I'm stuck on level 5 of Pac-Man",
+                        "Tetris T-spins are so satisfying!"
+                    ];
+                    
+                    const botNames = ['RetroGamer', 'PixelMaster', 'ArcadeKing', 'DoseCoinMiner'];
+                    const botName = botNames[Math.floor(Math.random() * botNames.length)];
+                    const response = responses[Math.floor(Math.random() * responses.length)];
+                    
+                    addChatMessage(botName, response);
+                }, 1000 + Math.random() * 2000);
             }
-        });
-        
-        // Update ship rotation
-        setInterval(() => {
-            ship.angle += ship.rotation;
-        }, 16);
+        }
         
-        // Play again button
-        playAgainBtn.addEventListener('click', initGame);
+        function addChatMessage(sender, message) {
+            const messageEl = document.createElement('div');
+            messageEl.className = 'mb-2';
+            messageEl.innerHTML = `
+                <span class="font-bold ${sender === 'You' ? 'text-green-400' : 'text-blue-400'}">${sender}:</span>
+                <span>${message}</span>
+            `;
+            elements.chatMessages.appendChild(messageEl);
+            elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
+        }
         
-        // Fullscreen button
-        fullscreenBtn.addEventListener('click', () => {
-            if (canvas.requestFullscreen) {
-                canvas.requestFullscreen();
-            } else if (canvas.mozRequestFullScreen) {
-                canvas.mozRequestFullScreen();
-            } else if (canvas.webkitRequestFullscreen) {
-                canvas.webkitRequestFullscreen();
-            } else if (canvas.msRequestFullscreen) {
-                canvas.msRequestFullscreen();
-            }
-        });
+        function startChatBots() {
+            // Initial bot messages
+            setTimeout(() => {
+                addChatMessage('ArcadeKing', 'Welcome to DoseGame Arcade Universe!');
+            }, 1000);
+            
+            setTimeout(() => {
+                addChatMessage('PixelMaster', 'Check out the new NFT skins in the shop!');
+            }, 3000);
+            
+            setTimeout(() => {
+                addChatMessage('RetroGamer', 'Just got a new high score in Snake!');
+            }, 5000);
+        }
+
+        // Achievements
+        function generateAchievements() {
+            const achievements = [
+                { title: 'First Game', desc: 'Play your first game', icon: 'fa-gamepad', color: '#ff3860' },
+                { title: 'Snake Charmer', desc: 'Score 100+ in Snake', icon: 'fa-snake', color: '#00ff41' },
+                { title: 'Tetris Master', desc: 'Clear 100 lines in Tetris', icon: 'fa-cubes', color: '#3273dc' },
+                { title: 'Ghost Hunter', desc: 'Eat 50 ghosts in Pac-Man', icon: 'fa-ghost', color: '#ff88ff' },
+                { title: 'DoseCoin Miner', desc: 'Earn 1000 DoseCoins', icon: 'fa-coins', color: '#ffdd57' },
+                { title: 'Arcade Legend', desc: 'Complete all games', icon: 'fa-crown', color: '#b86bff' }
+            ];
+            
+            achievements.forEach(achievement => {
+                const achievementEl = document.createElement('div');
+                achievementEl.className = 'flex items-center p-3 mb-2 bg-gray-700 rounded-lg';
+                achievementEl.innerHTML = `
+                    <div class="w-10 h-10 flex items-center justify-center rounded-full mr-3" style="background: ${achievement.color}">
+                        <i class="fas ${achievement.icon}"></i>
+                    </div>
+                    <div>
+                        <div class="font-bold">${achievement.title}</div>
+                        <div class="text-sm text-gray-300">${achievement.desc}</div>
+                    </div>
+                `;
+                elements.achievements.appendChild(achievementEl);
+            });
+        }
         
-        // Sound toggle
-        let soundOn = true;
-        soundToggle.addEventListener('click', () => {
-            soundOn = !soundOn;
-            soundToggle.innerHTML = soundOn ? 
-                '<i class="fas fa-volume-up mr-2"></i>Sound: ON' : 
-                '<i class="fas fa-volume-mute mr-2"></i>Sound: OFF';
-        });
-    </script>
+        function showAchievement(title, color) {
+            const achievementEl = document.createElement('div');
+            achievementEl.className = 'achievement-popup bg-gray-800 rounded-lg p-4 mb-4 flex items-center border-l-4 shadow-lg';
+            achievementEl.style.borderLeftColor = color;
+            achievementEl.innerHTML = `
+                <div class="mr-3 text-2xl" style="color: ${color}">
+                    <i class="fas fa-trophy"></i>
+                </div>
+                <div>
+                    <div class="font-bold">Achievement Unlocked!</div>
+                    <div>${title}</div>
+                </div>
+            `;
+            
+            elements.achievementContainer.appendChild(achievementEl);
+            
+            // Remove after delay
+            setTimeout(() => {
+                achievementEl.remove();
+            }, 5000);
+        }
+
+        // NFT Shop
+        function generateNFTShop() {
+            const skins = [
+                { id: 1, name: 'Golden Snake', price: 500, color: '#ffdd57', icon: 'fa-snake' },
+                { id: 2, name: 'Neon Pac-Man', price: 750, color: '#00d1b2', icon: 'fa-ghost' },
+                { id: 3, name: 'Cyber Tetris', price: 600, color: '#b86bff', icon: 'fa-cubes' },
+                { id: 4, name: 'Retro Bundle', price: 1500, color: '#ff3860', icon: 'fa-gamepad' },
+                { id: 5, name: 'DoseCoin Miner', price: 2000, color: '#3273dc', icon: 'fa-coins' },
+                { id: 6, name: 'Arcade Legend', price: 3000, color: '#00ff41', icon: 'fa-crown' }
+            ];
+            
+            const shopContainer = document.querySelector('#shop-section .grid');
+            shopContainer.innerHTML = '';
+            
+            skins.forEach(skin => {
+                const owned = gameData.ownedSkins.includes(skin.id);
+                const skinEl = document.createElement('div');
+                skinEl.className = 'bg-gray-900 rounded-xl overflow-hidden';
+                skinEl.innerHTML = `
+                    <div class="h-40 flex items-center justify-center" style="background: ${skin.color}">
+                        <i class="fas ${skin.icon} fa-3x"></i>
+                    </div>
+                    <div class="p-4">
+                        <h4 class="font-bold text-lg mb-1">${skin.name}</h4>
+                        <div class="flex justify-between items-center mb-3">
+                            <span><i class="fas fa-coins text-yellow-400"></i> ${skin.price}</span>
+                            ${owned ? '<span class="text-green-400">OWNED</span>' : ''}
+                        </div>
+                        <button class="retro-btn w-full ${owned ? 'retro-btn-secondary' : 'retro-btn-primary'} buy-skin" data-id="${skin.id}" data-price="${skin.price}" ${owned ? 'disabled' : ''}>
+                            ${owned ? 'EQUIP' : 'BUY NOW'}
+                        </button>
+                    </div>
+                `;
+                shopContainer.appendChild(skinEl);
+            });
+            
+            // Add event listeners to buy buttons
+            document.querySelectorAll('.buy-skin').forEach(button => {
+                button.addEventListener('click', () => {
+                    const id = parseInt(button.dataset.id);
+                    const price = parseInt(button.dataset.price);
+                    
+                    if (gameData.dosecoins >= price) {
+                        gameData.dosecoins -= price;
+                        gameData.ownedSkins.push(id);
+                        
+                        // Save data
+                        localStorage.setItem('dosecoins', gameData.dosecoins.toString());
+                        localStorage.setItem('ownedSkins', JSON.stringify(gameData.ownedSkins));
+                        
+                        // Update UI
+                        updateCoinDisplay();
+                        generateNFTShop();
+                        generateInventory();
+                        
+                        // Show achievement
+                        showAchievement('New Skin Unlocked!', '#b86bff');
+                        
+                        // Add to chat
+                        const skinName = button.parentElement.querySelector('h4').textContent;
+                        addChatMessage('System', `You purchased the
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MagicBullets/dosegame-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>
\ No newline at end of file
