NONE OF THE buttons work

components/game-card.js

@@ -130,9 +130,9 @@ class GameCard extends HTMLElement {
             }
         }, 100);
     }
-
     addEventListeners() {
-        this.shadowRoot.addEventListener('click', () => {
+        this.shadowRoot.querySelector('.play-button').addEventListener('click', (e) => {
+            e.stopPropagation();
             const title = this.getAttribute('title');
             const color = this.getAttribute('color');
             
@@ -140,8 +140,7 @@ class GameCard extends HTMLElement {
             this.showGameOverlay(title, color);
         });
     }
-
-    showGameOverlay(title, color) {
+showGameOverlay(title, color) {
         const overlay = document.createElement('div');
         overlay.className = 'fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50';
         overlay.innerHTML = `

index.html

@@ -39,7 +39,7 @@
         <section id="game-modes" class="mb-12">
             <h2 class="text-3xl font-bold mb-6 border-b-2 border-green-600 pb-2">Game Modes</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition-all cursor-pointer" onclick="game.startQuickMatch('medium')">
+                <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition-all cursor-pointer" data-game-mode="quick-match" data-difficulty="medium">
                     <div class="flex items-center mb-4">
                         <i data-feather="zap" class="w-8 h-8 text-yellow-400 mr-3"></i>
                         <h3 class="text-xl font-bold">Quick Match</h3>
@@ -61,11 +61,11 @@
                     </div>
                 </div>
                 
-                <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition-all cursor-pointer" onclick="game.startQuickMatch('hard')">
+                <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition-all cursor-pointer" data-game-mode="quick-match" data-difficulty="hard">
                     </div>
                 </div>
                 
-                <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition-all cursor-pointer" onclick="game.startDailyChallenge()">
+                <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition-all cursor-pointer" data-game-mode="daily-challenge">
                     <div class="flex items-center mb-4">
                         <i data-feather="users" class="w-8 h-8 text-blue-400 mr-3"></i>
                         <h3 class="text-xl font-bold">Multiplayer</h3>
@@ -83,10 +83,10 @@
                     </div>
                 </div>
                 
-                <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition-all cursor-pointer" onclick="game.startTraining()">
+                <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition-all cursor-pointer" data-game-mode="training">
                     </div>
                 </div>
-            </div>
+</div>
         </section>
 <!-- Player Profile -->
         <section id="profile" class="mb-12 bg-gray-800 rounded-xl p-6">

script.js

@@ -125,6 +125,26 @@ document.addEventListener('DOMContentLoaded', () => {
             game.addXP(xp);
         }
     });
+
+    // Add click event listeners to game mode cards
+    document.querySelectorAll('[data-game-mode]').forEach(card => {
+        card.addEventListener('click', (e) => {
+            const gameMode = card.getAttribute('data-game-mode');
+            const difficulty = card.getAttribute('data-difficulty');
+            
+            switch(gameMode) {
+                case 'quick-match':
+                    startQuickMatch(difficulty);
+                    break;
+                case 'daily-challenge':
+                    startDailyChallenge();
+                    break;
+                case 'training':
+                    startTraining();
+                    break;
+            }
+        });
+    });
 });
 function startQuickMatch(difficulty) {
     // Simulate match and rewards based on difficulty