Spaces:

mlmihjaz
/

anycoder-b4b3fbe5

Running

App Files Files Community

mlmihjaz commited on Jan 19

Commit

3071b2e

verified ·

1 Parent(s): 9c109bf

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +774 -470

index.html CHANGED Viewed

@@ -4,12 +4,12 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AlphaPop & Chat - Interactive Learning</title>
   <!-- Import Google Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;700&display=swap"
     rel="stylesheet">
   <!-- FontAwesome for Icons -->
@@ -17,21 +17,39 @@
   <style>
     :root {
-      --primary-color: #6C63FF;
-      --secondary-color: #FF6584;
-      --accent-color: #43D9AD;
-      --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-      --glass-bg: rgba(255, 255, 255, 0.9);
-      --glass-border: rgba(255, 255, 255, 0.5);
-      --text-dark: #2D3436;
-      --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
-      --chat-bg: #ffffff;
     }
     * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
     }
     body {
@@ -41,28 +59,36 @@
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      color: var(--text-dark);
     }
-    /* Header Section */
     header {
-      padding: 1rem 2rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      background: rgba(255, 255, 255, 0.95);
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
       z-index: 100;
     }
     .logo {
       font-family: 'Fredoka', sans-serif;
-      font-size: 1.5rem;
       font-weight: 700;
-      color: var(--primary-color);
       display: flex;
       align-items: center;
-      gap: 10px;
     }
     .header-actions {
@@ -71,191 +97,310 @@
       align-items: center;
     }
-    .chat-trigger {
-      background: var(--primary-color);
-      color: white;
       border: none;
-      width: 40px;
-      height: 40px;
       border-radius: 50%;
       cursor: pointer;
       display: flex;
       justify-content: center;
       align-items: center;
-      transition: transform 0.2s;
-      box-shadow: 0 4px 10px rgba(108, 99, 255, 0.3);
     }
-    .chat-trigger:hover {
-      transform: scale(1.1);
     }
-    .anycoder-link {
-      font-size: 0.9rem;
-      font-weight: 600;
-      color: var(--text-dark);
       text-decoration: none;
-      padding: 0.5rem 1rem;
-      background: #f0f0f0;
-      border-radius: 20px;
-      transition: all 0.3s ease;
     }
-    .anycoder-link:hover {
-      background: var(--primary-color);
-      color: white;
       transform: translateY(-2px);
     }
-    /* Main Game Area */
     main {
       flex: 1;
       display: flex;
-      flex-direction: column;
       justify-content: center;
       align-items: center;
       position: relative;
       padding: 1rem;
     }
-    /* Game Container */
     .game-board {
-      background: var(--glass-bg);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
-      border: 1px solid var(--glass-border);
-      border-radius: 30px;
-      padding: 2rem;
-      width: 90%;
-      max-width: 600px;
       box-shadow: var(--shadow-lg);
       text-align: center;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      min-height: 500px;
-      justify-content: space-between;
       transition: transform 0.3s ease, filter 0.3s ease;
     }
     .game-board.blurred {
-      filter: blur(5px);
       pointer-events: none;
     }
     /* Progress Bar */
-    .progress-container {
       width: 100%;
-      height: 10px;
-      background: #e0e0e0;
-      border-radius: 10px;
       margin-bottom: 2rem;
       overflow: hidden;
     }
-    .progress-bar {
       height: 100%;
       width: 0%;
-      background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
       border-radius: 10px;
-      transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
-    /* Letter Display */
-    .letter-display {
       font-family: 'Fredoka', sans-serif;
-      font-size: 10rem;
       font-weight: 700;
-      color: var(--primary-color);
-      text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
-      cursor: default;
-      user-select: none;
-      position: relative;
-      z-index: 2;
       transition: color 0.3s;
     }
-    /* Image Container */
-    .image-container {
-      width: 180px;
-      height: 180px;
       border-radius: 20px;
       overflow: hidden;
       background: #fff;
-      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
       border: 4px solid white;
-      display: flex;
-      justify-content: center;
-      align-items: center;
       opacity: 0;
-      transform: scale(0.8);
-      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-      margin-top: 1rem;
     }
-    .image-container.visible {
       opacity: 1;
       transform: scale(1);
     }
-    .image-container img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
-    /* Status Text */
-    .status-text {
-      font-size: 1.2rem;
-      color: #636e72;
-      margin-top: 1rem;
-      font-weight: 600;
     }
-    .hint-text {
-      font-size: 0.9rem;
-      color: #b2bec3;
-      margin-top: 0.5rem;
     }
     /* Buttons */
-    .controls {
-      margin-top: 2rem;
-    }
-    .btn {
-      background: var(--primary-color);
       color: white;
       border: none;
-      padding: 1rem 2.5rem;
-      font-size: 1.2rem;
-      border-radius: 50px;
       cursor: pointer;
       font-family: 'Fredoka', sans-serif;
-      box-shadow: 0 5px 15px rgba(108, 99, 255, 0.4);
-      transition: all 0.2s ease;
       display: inline-flex;
       align-items: center;
       gap: 10px;
     }
-    .btn:hover {
       transform: translateY(-3px);
-      box-shadow: 0 8px 20px rgba(108, 99, 255, 0.5);
     }
-    .btn:active {
-      transform: translateY(1px);
     }
-    /* --- CHAT UI STYLES --- */
-    .chat-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      background: rgba(0, 0, 0, 0.4);
       z-index: 200;
       display: flex;
       justify-content: center;
@@ -265,39 +410,39 @@
       transition: all 0.3s ease;
     }
-    .chat-overlay.active {
       opacity: 1;
       visibility: visible;
     }
-    .chat-window {
       width: 90%;
       max-width: 500px;
-      height: 70vh;
       background: white;
-      border-radius: 20px;
-      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      transform: translateY(50px);
-      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }
-    .chat-overlay.active .chat-window {
       transform: translateY(0);
     }
-    .chat-header {
-      background: var(--primary-color);
-      color: white;
-      padding: 1rem;
       display: flex;
-      align-items: center;
       justify-content: space-between;
     }
-    .chat-header h3 {
       font-family: 'Fredoka', sans-serif;
       display: flex;
       align-items: center;
@@ -308,57 +453,53 @@
       background: none;
       border: none;
       color: white;
-      font-size: 1.2rem;
       cursor: pointer;
       opacity: 0.8;
     }
-    .close-chat:hover {
-      opacity: 1;
-    }
-    .chat-messages {
       flex: 1;
-      padding: 1rem;
       overflow-y: auto;
-      background: #f9f9f9;
       display: flex;
       flex-direction: column;
-      gap: 10px;
     }
-    .message {
-      max-width: 80%;
-      padding: 10px 15px;
-      border-radius: 15px;
       font-size: 0.95rem;
-      line-height: 1.4;
       position: relative;
-      animation: slideUp 0.3s ease;
     }
-    @keyframes slideUp {
-      from { transform: translateY(10px); opacity: 0; }
-      to { transform: translateY(0); opacity: 1; }
     }
-    .message.bot {
       background: white;
-      color: var(--text-dark);
-      border-bottom-left-radius: 2px;
       align-self: flex-start;
       box-shadow: 0 2px 5px rgba(0,0,0,0.05);
     }
-    .message.user {
-      background: var(--primary-color);
       color: white;
-      border-bottom-right-radius: 2px;
       align-self: flex-end;
       box-shadow: 0 2px 5px rgba(108, 99, 255, 0.2);
     }
-    .chat-input-area {
       padding: 1rem;
       background: white;
       border-top: 1px solid #eee;
@@ -366,27 +507,27 @@
       gap: 10px;
     }
-    .chat-input-area input {
       flex: 1;
-      padding: 10px 15px;
       border: 2px solid #eee;
-      border-radius: 25px;
       outline: none;
       font-family: 'Nunito', sans-serif;
       transition: border-color 0.2s;
     }
-    .chat-input-area input:focus {
-      border-color: var(--primary-color);
     }
     .send-btn {
-      background: var(--primary-color);
-      color: white;
-      border: none;
-      width: 40px;
-      height: 40px;
       border-radius: 50%;
       cursor: pointer;
       display: flex;
       justify-content: center;
@@ -395,33 +536,11 @@
     }
     .send-btn:hover {
-      background: var(--secondary-color);
-    }
-    /* Animations */
-    @keyframes popIn {
-      0% { transform: scale(0); opacity: 0; }
-      60% { transform: scale(1.2); opacity: 1; }
-      100% { transform: scale(1); opacity: 1; }
-    }
-    @keyframes shake {
-      0%, 100% { transform: translateX(0); }
-      25% { transform: translateX(-10px) rotate(-5deg); color: var(--secondary-color); }
-      75% { transform: translateX(10px) rotate(5deg); color: var(--secondary-color); }
-    }
-    @keyframes float {
-      0%, 100% { transform: translateY(0px); }
-      50% { transform: translateY(-10px); }
     }
-    .anim-pop { animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
-    .anim-shake { animation: shake 0.4s ease-in-out; }
-    .anim-float { animation: float 3s ease-in-out infinite; }
-    /* Confetti Canvas */
-    #confetti-canvas {
       position: absolute;
       top: 0;
       left: 0;
@@ -431,17 +550,30 @@
       z-index: 50;
     }
-    /* Responsive */
-    @media (max-width: 768px) {
-      .letter-display { font-size: 7rem; }
-      .game-board { width: 95%; padding: 1.5rem; }
-      .image-container { width: 140px; height: 140px; }
     }
-    @media (max-width: 480px) {
-      .letter-display { font-size: 5rem; }
-      .header-actions .anycoder-link span { display: none; }
-      .header-actions .anycoder-link { padding: 0.5rem; }
     }
   </style>
 </head>
@@ -449,350 +581,522 @@
 <body>
   <header>
-    <div class="logo">
-      <i class="fa-solid fa-shapes"></i>
       <span>AlphaPop</span>
-    </div>
     <div class="header-actions">
-      <button class="chat-trigger" onclick="toggleChat()" title="Talk to me">
         <i class="fa-solid fa-comment-dots"></i>
       </button>
-      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
-        <span>Built with anycoder</span>
       </a>
     </div>
   </header>
   <main>
-    <canvas id="confetti-canvas"></canvas>
     <div class="game-board" id="gameBoard">
-      <!-- Progress -->
-      <div class="progress-container">
-        <div class="progress-bar" id="progressBar"></div>
       </div>
-      <!-- Game Area -->
-      <div id="gameArea" style="display: none; flex-direction: column; align-items: center; width: 100%;">
-        <div class="letter-display anim-pop" id="letterDisplay">A</div>
-        <div class="image-container" id="imageContainer">
-          <img id="letterImage" src="" alt="Letter Image">
         </div>
-        <div class="status-text" id="statusText">Press the 'A' key!</div>
-        <div class="hint-text"><i class="fa-solid fa-volume-high"></i> Sound On</div>
-      </div>
-      <!-- Start Screen -->
-      <div id="startScreen" style="text-align: center;">
-        <div class="logo" style="justify-content: center; font-size: 3rem; margin-bottom: 1rem; color: var(--primary-color);">
-          <i class="fa-solid fa-keyboard"></i>
         </div>
-        <h2 style="margin-bottom: 1rem; font-size: 1.8rem;">Ready to type?</h2>
-        <p style="margin-bottom: 2rem; color: #636e72;">Press the matching key to hear the sound and see the picture!</p>
-        <button class="btn" onclick="startGame()">Start Game <i class="fa-solid fa-play"></i></button>
-        <div style="margin-top: 10px;">
-            <button class="btn" style="background: transparent; color: var(--primary-color); box-shadow: none; border: 2px solid var(--primary-color); font-size: 1rem; padding: 0.8rem 1.5rem;" onclick="toggleChat()">
-                <i class="fa-solid fa-comments"></i> Talk to Me First
-            </button>
         </div>
       </div>
       <!-- End Screen -->
-      <div id="endScreen" style="display: none; text-align: center;">
-        <i class="fa-solid fa-trophy" style="font-size: 4rem; color: #f1c40f; margin-bottom: 1rem; animation: float 2s infinite;"></i>
-        <h2 style="margin-bottom: 1rem; font-size: 2rem;">Great Job!</h2>
-        <p style="margin-bottom: 2rem; color: #636e72;">You completed the alphabet.</p>
-        <button class="btn" onclick="startGame()">Play Again <i class="fa-solid fa-rotate-right"></i></button>
       </div>
     </div>
   </main>
-  <!-- Chat Interface Overlay -->
-  <div class="chat-overlay" id="chatOverlay">
-    <div class="chat-window">
-      <div class="chat-header">
         <h3><i class="fa-solid fa-robot"></i> AlphaBot</h3>
-        <button class="close-chat" onclick="toggleChat()"><i class="fa-solid fa-xmark"></i></button>
       </div>
-      <div class="chat-messages" id="chatMessages">
-        <div class="message bot">Hello! I'm AlphaBot. I can talk to you! Try saying "Hello" or ask me about the game.</div>
       </div>
-      <div class="chat-input-area">
-        <input type="text" id="chatInput" placeholder="Type a message..." onkeypress="handleChatEnter(event)">
-        <button class="send-btn" onclick="sendMessage()"><i class="fa-solid fa-paper-plane"></i></button>
       </div>
     </div>
   </div>
   <script>
-    // --- Game Configuration & State ---
-    const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split('');
-    let currentIndex = 0;
-    let isGameActive = false;
-    let isChatOpen = false;
-    // DOM Elements
-    const startScreen = document.getElementById('startScreen');
-    const endScreen = document.getElementById('endScreen');
-    const gameArea = document.getElementById('gameArea');
-    const gameBoard = document.getElementById('gameBoard');
-    const letterDisplay = document.getElementById('letterDisplay');
-    const statusText = document.getElementById('statusText');
-    const imageContainer = document.getElementById('imageContainer');
-    const letterImage = document.getElementById('letterImage');
-    const progressBar = document.getElementById('progressBar');
-    // Chat Elements
-    const chatOverlay = document.getElementById('chatOverlay');
-    const chatMessages = document.getElementById('chatMessages');
-    const chatInput = document.getElementById('chatInput');
-    // --- Chat Logic ---
-    function toggleChat() {
-        isChatOpen = !isChatOpen;
-        if (isChatOpen) {
-            chatOverlay.classList.add('active');
-            gameBoard.classList.add('blurred');
-            chatInput.focus();
         } else {
-            chatOverlay.classList.remove('active');
-            gameBoard.classList.remove('blurred');
-            // Return focus to game if active
-            if(isGameActive) gameBoard.focus();
         }
-    }
-    function handleChatEnter(e) {
-        if (e.key === 'Enter') sendMessage();
-    }
-    function sendMessage() {
-        const text = chatInput.value.trim();
-        if (!text) return;
-        // Add User Message
-        addMessage(text, 'user');
-        chatInput.value = '';
-        // Generate Bot Response
-        const reply = getBotResponse(text);
-        // Simulate typing delay
-        setTimeout(() => {
-            addMessage(reply, 'bot');
-            speakText(reply); // Speak the reply
-        }, 600);
-    }
-    function addMessage(text, sender) {
-        const div = document.createElement('div');
-        div.className = `message ${sender}`;
-        div.textContent = text;
-        chatMessages.appendChild(div);
-        chatMessages.scrollTop = chatMessages.scrollHeight;
-    }
-    function getBotResponse(input) {
-        const lower = input.toLowerCase();
-        if (lower.includes('hello') || lower.includes('hi')) {
-            return "Hi there! Are you ready to learn the alphabet?";
-        } else if (lower.includes('play') || lower.includes('game')) {
-            return "Close this chat and click 'Start Game' to begin! You can also type letters like 'A' or 'B' here to hear them.";
-        } else if (lower.includes('name')) {
-            return "I am AlphaBot, your friendly coding assistant.";
-        } else if (lower.includes('help')) {
-            return "I can help you practice letters. Just type a letter, or close the chat to play the typing game.";
-        } else if (/^[a-z]$/.test(lower)) {
-            // If user types a single letter
-            return `You typed ${input.toUpperCase()}. Good job!`;
-        } else {
-            const randomReplies = [
-                "That's interesting!",
-                "Tell me more!",
-                "I'm listening.",
-                "Can you teach me a new word?",
-                "Let's get back to learning soon!"
-            ];
-            return randomReplies[Math.floor(Math.random() * randomReplies.length)];
         }
-    }
-    // --- Speech Synthesis (Shared) ---
-    function speakText(text) {
-        if ('speechSynthesis' in window) {
-            window.speechSynthesis.cancel();
-            const utterance = new SpeechSynthesisUtterance(text);
-            utterance.lang = 'en-US';
-            utterance.rate = 1.0;
-            utterance.pitch = 1.0;
-            window.speechSynthesis.speak(utterance);
         }
-    }
-    function speakLetter(letter) {
-        speakText(letter); // Reuse the main speak function
-    }
-    // --- Game Logic ---
-    function startGame() {
-        currentIndex = 0;
-        isGameActive = true;
-        startScreen.style.display = 'none';
-        endScreen.style.display = 'none';
-        gameArea.style.display = 'flex';
-        // Close chat if open
-        if(isChatOpen) toggleChat();
-        updateLevel();
-    }
-    function updateLevel() {
-        if (currentIndex >= alphabet.length) {
-            endGame();
-            return;
         }
-        const currentLetter = alphabet[currentIndex];
-        // Reset Animations
-        letterDisplay.classList.remove('anim-pop', 'anim-shake');
-        void letterDisplay.offsetWidth;
-        letterDisplay.classList.add('anim-pop');
-        letterDisplay.textContent = currentLetter;
-        statusText.textContent = `Press the '${currentLetter}' key!`;
-        imageContainer.classList.remove('visible');
-        const progress = (currentIndex / alphabet.length) * 100;
-        progressBar.style.width = `${progress}%`;
-        speakLetter(currentLetter);
-    }
-    function handleInput(e) {
-        // If chat is open, don't process game keys
-        if (isChatOpen) return;
-        if (!isGameActive) return;
-        const key = e.key.toUpperCase();
-        const targetLetter = alphabet[currentIndex];
-        if (!/^[A-Z]$/.test(key)) return;
-        if (key === targetLetter) {
-            onCorrectPress(targetLetter);
         } else {
-            onWrongPress();
         }
-    }
-    function onCorrectPress(letter) {
-        speakLetter(letter);
-        // Random Image Placeholder
-        const randomId = Math.floor(Math.random() * 1000);
-        const imgUrl = `https://picsum.photos/seed/${letter}${randomId}/300/300`;
-        letterImage.src = imgUrl;
-        letterImage.onload = () => {
-            imageContainer.classList.add('visible');
-        };
-        if(letterImage.complete) imageContainer.classList.add('visible');
-        letterDisplay.style.color = "var(--accent-color)";
-        statusText.textContent = "Great!";
-        statusText.style.color = "var(--accent-color)";
-        fireConfetti(0.5);
         setTimeout(() => {
-            currentIndex++;
-            letterDisplay.style.color = "var(--primary-color)";
-            statusText.style.color = "#636e72";
-            updateLevel();
-        }, 1500);
-    }
-    function onWrongPress() {
-        letterDisplay.classList.remove('anim-shake');
-        void letterDisplay.offsetWidth;
-        letterDisplay.classList.add('anim-shake');
-        statusText.textContent = "Oops, try again!";
-        statusText.style.color = "var(--secondary-color)";
-        speakLetter(alphabet[currentIndex]);
-    }
-    function endGame() {
-        isGameActive = false;
-        gameArea.style.display = 'none';
-        endScreen.style.display = 'block';
-        progressBar.style.width = '100%';
-        fireConfetti(1.0);
-        speakText("Great job! You finished the game!");
-    }
-    // Event Listeners
-    window.addEventListener('keydown', handleInput);
-    // --- Confetti Logic ---
-    const canvas = document.getElementById('confetti-canvas');
-    const ctx = canvas.getContext('2d');
-    let particles = [];
-    function resizeCanvas() {
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
-    }
-    window.addEventListener('resize', resizeCanvas);
-    resizeCanvas();
-    function fireConfetti(intensity = 1.0) {
-        const particleCount = 100 * intensity;
-        const colors = ['#FF6584', '#6C63FF', '#43D9AD', '#FFD93D', '#FF8C00'];
-        for (let i = 0; i < particleCount; i++) {
-            particles.push({
-                x: canvas.width / 2,
-                y: canvas.height / 2 + 50,
-                vx: (Math.random() - 0.5) * 20 * intensity,
-                vy: (Math.random() - 1) * 20 * intensity,
-                size: Math.random() * 8 + 4,
-                color: colors[Math.floor(Math.random() * colors.length)],
-                life: 100,
-                gravity: 0.5
-            });
         }
-        if(particles.length <= particleCount) requestAnimationFrame(updateConfetti);
-    }
-    function updateConfetti() {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        for (let i = 0; i < particles.length; i++) {
-            let p = particles[i];
-            p.x += p.vx;
-            p.y += p.vy;
-            p.vy += p.gravity;
-            p.life--;
-            ctx.fillStyle = p.color;
-            ctx.beginPath();
-            ctx.rect(p.x, p.y, p.size, p.size);
-            ctx.fill();
         }
-        particles = particles.filter(p => p.life > 0);
-        if (particles.length > 0) {
-            requestAnimationFrame(updateConfetti);
         }
-    }
-  </script>
-</body>
-</html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AlphaPop Adventure - Typing & Spelling</title>
   <!-- Import Google Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;600;800&display=swap"
     rel="stylesheet">
   <!-- FontAwesome for Icons -->
   <style>
     :root {
+      /* Palette */
+      --primary: #6C63FF;
+      --primary-dark: #5a52d5;
+      --secondary: #FF6584;
+      --accent: #43D9AD;
+      --accent-dark: #32b08b;
+      --warning: #FFD93D;
+      --dark: #2D3436;
+      --light: #f5f7fa;
+      /* Gradients & Backgrounds */
+      --bg-gradient: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
+      --header-gradient: linear-gradient(90deg, #ffffff 0%, #f0f2f5 100%);
+      --card-bg: rgba(255, 255, 255, 0.95);
+      /* Effects */
+      --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
+      --shadow-lg: 0 15px 35px rgba(108, 99, 255, 0.15);
+      --glass-border: 1px solid rgba(255, 255, 255, 0.6);
+      --blur: blur(12px);
+      --radius-lg: 24px;
+      --radius-btn: 50px;
+      /* Transitions */
+      --trans-fast: 0.2s ease;
+      --trans-bounce: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }
     * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
+      -webkit-tap-highlight-color: transparent;
     }
     body {
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      color: var(--dark);
     }
+    /* --- Header --- */
     header {
+      padding: 0.8rem 2rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
+      background: var(--header-gradient);
+      box-shadow: var(--shadow-sm);
       z-index: 100;
+      backdrop-filter: blur(5px);
     }
     .logo {
       font-family: 'Fredoka', sans-serif;
+      font-size: 1.6rem;
       font-weight: 700;
+      color: var(--primary);
       display: flex;
       align-items: center;
+      gap: 12px;
+      text-decoration: none;
+    }
+    .logo i {
+      background: rgba(108, 99, 255, 0.1);
+      padding: 10px;
+      border-radius: 12px;
     }
     .header-actions {
       align-items: center;
     }
+    .icon-btn {
+      background: white;
+      color: var(--primary);
       border: none;
+      width: 44px;
+      height: 44px;
       border-radius: 50%;
       cursor: pointer;
       display: flex;
       justify-content: center;
       align-items: center;
+      font-size: 1.1rem;
+      transition: var(--trans-fast);
+      box-shadow: var(--shadow-sm);
     }
+    .icon-btn:hover {
+      transform: translateY(-2px);
+      background: var(--primary);
+      color: white;
+      box-shadow: 0 5px 15px rgba(108, 99, 255, 0.3);
     }
+    .anycoder-badge {
+      font-size: 0.85rem;
+      font-weight: 700;
+      color: var(--dark);
       text-decoration: none;
+      padding: 0.5rem 1.2rem;
+      background: white;
+      border-radius: var(--radius-btn);
+      border: 2px solid #eee;
+      transition: var(--trans-fast);
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
+    .anycoder-badge:hover {
+      border-color: var(--primary);
+      color: var(--primary);
       transform: translateY(-2px);
     }
+    /* --- Main Layout --- */
     main {
       flex: 1;
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
       padding: 1rem;
     }
+    /* --- Game Board --- */
     .game-board {
+      background: var(--card-bg);
+      backdrop-filter: var(--blur);
+      -webkit-backdrop-filter: var(--blur);
+      border: var(--glass-border);
+      border-radius: var(--radius-lg);
+      padding: 2.5rem;
+      width: 95%;
+      max-width: 700px;
       box-shadow: var(--shadow-lg);
       text-align: center;
+      position: relative;
+      overflow: hidden;
       transition: transform 0.3s ease, filter 0.3s ease;
     }
     .game-board.blurred {
+      filter: blur(8px);
       pointer-events: none;
     }
+    /* Mode Switcher */
+    .mode-switch {
+      display: flex;
+      background: #f0f0f5;
+      padding: 5px;
+      border-radius: var(--radius-btn);
+      margin: 0 auto 2rem auto;
+      width: fit-content;
+      position: relative;
+    }
+    .mode-btn {
+      background: transparent;
+      border: none;
+      padding: 10px 25px;
+      border-radius: var(--radius-btn);
+      font-family: 'Nunito', sans-serif;
+      font-weight: 700;
+      color: #888;
+      cursor: pointer;
+      z-index: 2;
+      transition: color 0.3s ease;
+      font-size: 1rem;
+    }
+    .mode-btn.active {
+      color: white;
+    }
+    .switch-bg {
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      width: calc(50% - 5px);
+      height: calc(100% - 10px);
+      background: var(--primary);
+      border-radius: var(--radius-btn);
+      transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      z-index: 1;
+    }
     /* Progress Bar */
+    .progress-wrapper {
       width: 100%;
       margin-bottom: 2rem;
+    }
+    .progress-track {
+      width: 100%;
+      height: 12px;
+      background: #eee;
+      border-radius: 10px;
       overflow: hidden;
     }
+    .progress-fill {
       height: 100%;
       width: 0%;
+      background: linear-gradient(90deg, var(--secondary), var(--primary));
       border-radius: 10px;
+      transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
+    /* Game Display Area */
+    .display-area {
+      min-height: 250px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 1rem;
+    }
+    /* Letter Mode Styles */
+    .big-letter {
       font-family: 'Fredoka', sans-serif;
+      font-size: 9rem;
       font-weight: 700;
+      color: var(--primary);
+      text-shadow: 4px 4px 0px rgba(108, 99, 255, 0.1);
+      line-height: 1;
       transition: color 0.3s;
     }
+    /* Word Mode Styles */
+    .word-container {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+    .letter-box {
+      font-family: 'Fredoka', sans-serif;
+      font-size: 3.5rem;
+      font-weight: 700;
+      width: 60px;
+      height: 80px;
+      border-bottom: 4px solid #ddd;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #ccc;
+      transition: all 0.3s;
+      text-transform: uppercase;
+    }
+    .letter-box.active {
+      border-bottom-color: var(--primary);
+      color: var(--primary);
+      transform: translateY(-5px);
+      animation: bounce 1s infinite;
+    }
+    .letter-box.completed {
+      color: var(--accent-dark);
+      border-bottom-color: var(--accent);
+    }
+    @keyframes bounce {
+      0%, 100% { transform: translateY(-5px); }
+      50% { transform: translateY(0); }
+    }
+    /* Image Display */
+    .image-wrapper {
+      width: 200px;
+      height: 200px;
       border-radius: 20px;
       overflow: hidden;
       background: #fff;
+      box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
       border: 4px solid white;
+      margin: 0 auto;
       opacity: 0;
+      transform: scale(0.9);
+      transition: all 0.5s var(--trans-bounce);
     }
+    .image-wrapper.visible {
       opacity: 1;
       transform: scale(1);
     }
+    .image-wrapper img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
+    /* Feedback Text */
+    .status-msg {
+      font-size: 1.4rem;
+      font-weight: 700;
+      color: var(--dark);
+      margin-top: 1.5rem;
+      min-height: 2rem;
     }
+    .sub-status {
+      font-size: 1rem;
+      color: #888;
+      font-weight: 600;
     }
     /* Buttons */
+    .btn-main {
+      background: var(--primary);
       color: white;
       border: none;
+      padding: 1rem 3rem;
+      font-size: 1.3rem;
+      border-radius: var(--radius-btn);
       cursor: pointer;
       font-family: 'Fredoka', sans-serif;
+      box-shadow: 0 8px 20px rgba(108, 99, 255, 0.3);
+      transition: var(--trans-fast);
+      margin-top: 1rem;
       display: inline-flex;
       align-items: center;
       gap: 10px;
     }
+    .btn-main:hover {
+      background: var(--primary-dark);
       transform: translateY(-3px);
+      box-shadow: 0 12px 25px rgba(108, 99, 255, 0.4);
+    }
+    .btn-secondary {
+      background: transparent;
+      color: var(--primary);
+      border: 2px solid var(--primary);
+      padding: 0.8rem 2rem;
+      font-size: 1rem;
+      border-radius: var(--radius-btn);
+      cursor: pointer;
+      font-family: 'Fredoka', sans-serif;
+      font-weight: 600;
+      margin-top: 10px;
+      transition: var(--trans-fast);
+    }
+    .btn-secondary:hover {
+      background: rgba(108, 99, 255, 0.05);
     }
+    /* Screens */
+    .screen {
+      display: none;
+      width: 100%;
+      height: 100%;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
     }
+    .screen.active {
+      display: flex;
+    }
+    /* Chat Overlay */
+    .chat-modal {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
+      background: rgba(0, 0, 0, 0.5);
       z-index: 200;
       display: flex;
       justify-content: center;
       transition: all 0.3s ease;
     }
+    .chat-modal.open {
       opacity: 1;
       visibility: visible;
     }
+    .chat-box {
       width: 90%;
       max-width: 500px;
+      height: 75vh;
       background: white;
+      border-radius: 24px;
+      box-shadow: 0 25px 50px rgba(0,0,0,0.25);
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      transform: translateY(30px);
+      transition: transform 0.3s var(--trans-bounce);
     }
+    .chat-modal.open .chat-box {
       transform: translateY(0);
     }
+    .chat-top {
+      background: var(--primary);
+      padding: 1rem 1.5rem;
       display: flex;
       justify-content: space-between;
+      align-items: center;
+      color: white;
     }
+    .chat-top h3 {
       font-family: 'Fredoka', sans-serif;
       display: flex;
       align-items: center;
       background: none;
       border: none;
       color: white;
+      font-size: 1.4rem;
       cursor: pointer;
       opacity: 0.8;
     }
+    .chat-body {
       flex: 1;
+      padding: 1.5rem;
       overflow-y: auto;
+      background: #f8f9fa;
       display: flex;
       flex-direction: column;
+      gap: 12px;
     }
+    .msg {
+      max-width: 85%;
+      padding: 12px 18px;
+      border-radius: 18px;
       font-size: 0.95rem;
+      line-height: 1.5;
       position: relative;
+      animation: slideIn 0.3s ease;
     }
+    @keyframes slideIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
     }
+    .msg.bot {
       background: white;
+      color: var(--dark);
+      border-bottom-left-radius: 4px;
       align-self: flex-start;
       box-shadow: 0 2px 5px rgba(0,0,0,0.05);
     }
+    .msg.user {
+      background: var(--primary);
       color: white;
+      border-bottom-right-radius: 4px;
       align-self: flex-end;
       box-shadow: 0 2px 5px rgba(108, 99, 255, 0.2);
     }
+    .chat-footer {
       padding: 1rem;
       background: white;
       border-top: 1px solid #eee;
       gap: 10px;
     }
+    .chat-footer input {
       flex: 1;
+      padding: 12px 20px;
       border: 2px solid #eee;
+      border-radius: 30px;
       outline: none;
       font-family: 'Nunito', sans-serif;
       transition: border-color 0.2s;
     }
+    .chat-footer input:focus {
+      border-color: var(--primary);
     }
     .send-btn {
+      width: 45px;
+      height: 45px;
       border-radius: 50%;
+      border: none;
+      background: var(--primary);
+      color: white;
       cursor: pointer;
       display: flex;
       justify-content: center;
     }
     .send-btn:hover {
+      background: var(--secondary);
     }
+    /* Canvas */
+    #confetti {
       position: absolute;
       top: 0;
       left: 0;
       z-index: 50;
     }
+    /* Animations */
+    .shake {
+      animation: shake 0.4s ease;
+    }
+    @keyframes shake {
+      0%, 100% { transform: translateX(0); }
+      25% { transform: translateX(-10px); color: var(--secondary); }
+      75% { transform: translateX(10px); color: var(--secondary); }
     }
+    /* Responsive */
+    @media (max-width: 600px) {
+      .game-board {
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+        border: none;
+      }
+      .big-letter { font-size: 6rem; }
+      .letter-box { width: 40px; height: 60px; font-size: 2rem; }
+      .logo span { display: none; }
+      header { padding: 0.8rem 1rem; }
+      .mode-btn { padding: 8px 16px; font-size: 0.9rem; }
     }
   </style>
 </head>
 <body>
   <header>
+    <a href="#" class="logo">
+      <i class="fa-solid fa-rocket"></i>
       <span>AlphaPop</span>
+    </a>
     <div class="header-actions">
+      <button class="icon-btn" onclick="app.toggleChat()" title="Talk to AlphaBot">
         <i class="fa-solid fa-comment-dots"></i>
       </button>
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge">
+        <i class="fa-solid fa-code"></i> Built with anycoder
       </a>
     </div>
   </header>
   <main>
+    <canvas id="confetti"></canvas>
     <div class="game-board" id="gameBoard">
+      <!-- Start Screen -->
+      <div id="startScreen" class="screen active">
+        <div style="font-size: 4rem; color: var(--primary); margin-bottom: 1rem;">
+          <i class="fa-solid fa-gamepad"></i>
+        </div>
+        <h1 style="font-family: 'Fredoka'; font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--dark);">Ready to Play?</h1>
+        <p style="color: #666; font-size: 1.1rem; margin-bottom: 2rem;">Choose a mode to start learning!</p>
+        <div style="display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 300px;">
+          <button class="btn-main" onclick="app.startGame('letter')">
+            <i class="fa-solid fa-a"></i> Letter Mode
+          </button>
+          <button class="btn-secondary" onclick="app.startGame('word')">
+            <i class="fa-solid fa-spell-check"></i> Word Mode
+          </button>
+          <button class="btn-secondary" style="border: none; color: #666;" onclick="app.toggleChat()">
+            <i class="fa-solid fa-robot"></i> Talk to AlphaBot first
+          </button>
+        </div>
       </div>
+      <!-- Play Screen -->
+      <div id="playScreen" class="screen">
+        <!-- Mode Switcher (Visible during gameplay) -->
+        <div class="mode-switch">
+          <div class="switch-bg" id="switchBg"></div>
+          <button class="mode-btn active" id="btnModeLetter" onclick="app.switchMode('letter')">Letters</button>
+          <button class="mode-btn" id="btnModeWord" onclick="app.switchMode('word')">Words</button>
         </div>
+        <div class="progress-wrapper">
+          <div class="progress-track">
+            <div class="progress-fill" id="progressBar"></div>
+          </div>
         </div>
+        <div class="display-area">
+          <!-- Letter Mode Elements -->
+          <div id="letterModeUI" style="display: flex; flex-direction: column; align-items: center;">
+            <div class="big-letter" id="bigLetter">A</div>
+          </div>
+          <!-- Word Mode Elements -->
+          <div id="wordModeUI" style="display: none; flex-direction: column; align-items: center;">
+            <div class="word-container" id="wordContainer">
+              <!-- Letter boxes injected here -->
+            </div>
+          </div>
+          <!-- Shared Image -->
+          <div class="image-wrapper" id="imageWrapper">
+            <img id="gameImage" src="" alt="Success Image">
+          </div>
         </div>
+        <div class="status-msg" id="statusMsg">Press 'A'</div>
+        <div class="sub-status"><i class="fa-solid fa-volume-high"></i> Sound Enabled</div>
       </div>
       <!-- End Screen -->
+      <div id="endScreen" class="screen">
+        <i class="fa-solid fa-trophy" style="font-size: 5rem; color: var(--warning); margin-bottom: 1rem; animation: bounce 2s infinite;"></i>
+        <h2 style="font-family: 'Fredoka'; font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--dark);">Awesome!</h2>
+        <p style="color: #666; margin-bottom: 2rem;">You completed the level.</p>
+        <button class="btn-main" onclick="app.startGame(app.currentMode)">
+          Play Again <i class="fa-solid fa-rotate-right"></i>
+        </button>
+        <button class="btn-secondary" onclick="app.showStartScreen()">Main Menu</button>
       </div>
     </div>
   </main>
+  <!-- Chat Modal -->
+  <div class="chat-modal" id="chatModal">
+    <div class="chat-box">
+      <div class="chat-top">
         <h3><i class="fa-solid fa-robot"></i> AlphaBot</h3>
+        <button class="close-chat" onclick="app.toggleChat()"><i class="fa-solid fa-xmark"></i></button>
       </div>
+      <div class="chat-body" id="chatBody">
+        <div class="msg bot">Hello! I'm AlphaBot. I can help you learn! Try typing "Hello" or ask me how to play.</div>
       </div>
+      <div class="chat-footer">
+        <input type="text" id="chatInput" placeholder="Type a message..." onkeypress="app.handleChatKey(event)">
+        <button class="send-btn" onclick="app.sendChatMessage()"><i class="fa-solid fa-paper-plane"></i></button>
       </div>
     </div>
   </div>
   <script>
+    /**
+     * AlphaPop Application Logic
+     * Handles Game State, UI Updates, Speech, and Chat
+     */
+    const app = {
+      // State
+      alphabet: "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(''),
+      words: ["CAT", "DOG", "SUN", "CAR", "BEE", "FOX", "OWL", "PIG", "COW", "BAT", "HAT", "MAP", "JAM", "PAN", "VAN"],
+      currentMode: 'letter', // 'letter' || 'word'
+      currentIndex: 0,
+      letterIndex: 0, // For word mode tracking
+      isPlaying: false,
+      isChatOpen: false,
+      isProcessingInput: false, // Debounce visual feedback
+      // DOM Elements
+      ui: {
+        startScreen: document.getElementById('startScreen'),
+        playScreen: document.getElementById('playScreen'),
+        endScreen: document.getElementById('endScreen'),
+        gameBoard: document.getElementById('gameBoard'),
+        // Game UI
+        letterModeUI: document.getElementById('letterModeUI'),
+        wordModeUI: document.getElementById('wordModeUI'),
+        bigLetter: document.getElementById('bigLetter'),
+        wordContainer: document.getElementById('wordContainer'),
+        imageWrapper: document.getElementById('imageWrapper'),
+        gameImage: document.getElementById('gameImage'),
+        statusMsg: document.getElementById('statusMsg'),
+        progressBar: document.getElementById('progressBar'),
+        // Mode Switcher
+        switchBg: document.getElementById('switchBg'),
+        btnModeLetter: document.getElementById('btnModeLetter'),
+        btnModeWord: document.getElementById('btnModeWord'),
+        // Chat
+        chatModal: document.getElementById('chatModal'),
+        chatBody: document.getElementById('chatBody'),
+        chatInput: document.getElementById('chatInput')
+      },
+      init() {
+        // Global Key Listener
+        window.addEventListener('keydown', (e) => this.handleGlobalKey(e));
+        // Resize Canvas
+        window.addEventListener('resize', () => this.resizeCanvas());
+        this.resizeCanvas();
+        // Setup Speech Synthesis (preload voices)
+        window.speechSynthesis.getVoices();
+      },
+      /* --- Navigation --- */
+      showStartScreen() {
+        this.isPlaying = false;
+        this.ui.startScreen.classList.add('active');
+        this.ui.playScreen.classList.remove('active');
+        this.ui.endScreen.classList.remove('active');
+        this.closeChat();
+      },
+      startGame(mode) {
+        this.currentMode = mode;
+        this.currentIndex = 0;
+        this.isPlaying = true;
+        this.isProcessingInput = false;
+        // UI Reset
+        this.ui.startScreen.classList.remove('active');
+        this.ui.endScreen.classList.remove('active');
+        this.ui.playScreen.classList.add('active');
+        this.updateModeSwitcherUI();
+        this.loadLevel();
+      },
+      switchMode(mode) {
+        if (this.currentMode === mode) return;
+        this.startGame(mode); // Restart with new mode
+      },
+      /* --- Game Logic --- */
+      loadLevel() {
+        // Reset Visuals
+        this.ui.imageWrapper.classList.remove('visible');
+        this.ui.statusMsg.style.color = 'var(--dark)';
+        this.ui.statusMsg.textContent = "...";
+        // Update Progress
+        const total = this.currentMode === 'letter' ? this.alphabet.length : this.words.length;
+        const progress = (this.currentIndex / total) * 100;
+        this.ui.progressBar.style.width = `${progress}%`;
+        // Setup specific mode UI
+        if (this.currentMode === 'letter') {
+          this.setupLetterLevel();
         } else {
+          this.setupWordLevel();
         }
+      },
+      setupLetterLevel() {
+        this.ui.letterModeUI.style.display = 'flex';
+        this.ui.wordModeUI.style.display = 'none';
+        const letter = this.alphabet[this.currentIndex];
+        this.ui.bigLetter.textContent = letter;
+        this.ui.statusMsg.textContent = `Press the '${letter}' key!`;
+        this.speak(`Find the letter ${letter}`);
+      },
+      setupWordLevel() {
+        this.ui.letterModeUI.style.display = 'none';
+        this.ui.wordModeUI.style.display = 'flex';
+        this.letterIndex = 0;
+        const word = this.words[this.currentIndex];
+        this.ui.wordContainer.innerHTML = ''; // Clear previous
+        // Create letter boxes
+        for (let i = 0; i < word.length; i++) {
+          const box = document.createElement('div');
+          box.className = 'letter-box';
+          box.textContent = word[i];
+          box.id = `box-${i}`;
+          this.ui.wordContainer.appendChild(box);
+        }
+        this.updateWordHighlight();
+        this.speak(`Let's spell ${word}`);
+      },
+      updateWordHighlight() {
+        const word = this.words[this.currentIndex];
+        const boxes = this.ui.wordContainer.children;
+        // Reset all
+        for (let box of boxes) {
+          box.className = 'letter-box';
         }
+        // Highlight current
+        const currentBox = document.getElementById(`box-${this.letterIndex}`);
+        if (currentBox) {
+          currentBox.classList.add('active');
         }
+        // Mark completed
+        for(let i=0; i<this.letterIndex; i++) {
+          const completedBox = document.getElementById(`box-${i}`);
+          if(completedBox) completedBox.classList.add('completed');
+        }
+        this.ui.statusMsg.textContent = `Type '${word[this.letterIndex]}'`;
+      },
+      handleInput(key) {
+        if (!this.isPlaying || this.isProcessingInput || this.isChatOpen) return;
+        const upperKey = key.toUpperCase();
+        let target = '';
+        if (this.currentMode === 'letter') {
+          target = this.alphabet[this.currentIndex];
+        } else {
+          target = this.words[this.currentIndex][this.letterIndex];
+        }
+        if (upperKey === target) {
+          this.handleCorrect(target);
+        } else {
+          this.handleWrong();
         }
+      },
+      handleCorrect(char) {
+        this.isProcessingInput = true;
+        this.speak(char);
+        const isLetterMode = this.currentMode === 'letter';
+        const isWordComplete = !isLetterMode && (this.letterIndex === this.words[this.currentIndex].length - 1);
+        // Visual Feedback
+        this.ui.statusMsg.textContent = "Correct!";
+        this.ui.statusMsg.style.color = "var(--accent-dark)";
+        if (isLetterMode) {
+          this.ui.bigLetter.style.color = "var(--accent-dark)";
+          this.showImage(char);
+        } else {
+          // Update Word UI
+          const box = document.getElementById(`box-${this.letterIndex}`);
+          if(box) {
+            box.classList.remove('active');
+            box.classList.add('completed');
+          }
+          if (isWordComplete) {
+            this.showImage(this.words[this.currentIndex]);
+          }
+        }
+        // Fire Particles
+        this.fireConfetti(isWordComplete || isLetterMode ? 1.5 : 0.5);
+        setTimeout(() => {
+          if (isLetterMode) {
+            this.ui.bigLetter.style.color = "var(--primary)";
+            this.nextLevel();
+          } else {
+            if (isWordComplete) {
+              this.nextLevel();
+            } else {
+              this.letterIndex++;
+              this.updateWordHighlight();
+              this.isProcessingInput = false;
+            }
+          }
+        }, 1200);
+      },
+      handleWrong() {
+        this.speak("Try again");
+        if (this.currentMode === 'letter') {
+          this.ui.bigLetter.classList.remove('shake');
+          void this.ui.bigLetter.offsetWidth; // trigger reflow
+          this.ui.bigLetter.classList.add('shake');
+        } else {
+           const box = document.getElementById(`box-${this.letterIndex}`);
+           if(box) {
+             box.classList.remove('shake');
+             void box.offsetWidth;
+             box.classList.add('shake');
+           }
+        }
+        this.ui.statusMsg.textContent = "Oops, try again!";
+        this.ui.statusMsg.style.color = "var(--secondary)";
+      },
+      showImage(seed) {
+        // Use Picsum with seed to get consistent random images
+        const url = `https://picsum.photos/seed/${seed}/400/400`;
+        this.ui.gameImage.src = url;
+        this.ui.gameImage.onload = () => {
+          this.ui.imageWrapper.classList.add('visible');
+        };
+      },
+      nextLevel() {
+        const total = this.currentMode === 'letter' ? this.alphabet.length : this.words.length;
+        this.currentIndex++;
+        this.isProcessingInput = false;
+        if (this.currentIndex >= total) {
+          this.gameOver();
         } else {
+          this.loadLevel();
         }
+      },
+      gameOver() {
+        this.isPlaying = false;
+        this.ui.playScreen.classList.remove('active');
+        this.ui.endScreen.classList.add('active');
+        this.ui.progressBar.style.width = '100%';
+        this.fireConfetti(3.0);
+        this.speak("Amazing work! You finished the game!");
+      },
+      updateModeSwitcherUI() {
+        if (this.currentMode === 'letter') {
+          this.ui.switchBg.style.transform = 'translateX(0)';
+          this.ui.btnModeLetter.classList.add('active');
+          this.ui.btnModeWord.classList.remove('active');
+        } else {
+          this.ui.switchBg.style.transform = 'translateX(100%)';
+          this.ui.btnModeLetter.classList.remove('active');
+          this.ui.btnModeWord.classList.add('active');
+        }
+      },
+      /* --- Chat System --- */
+      toggleChat() {
+        this.isChatOpen = !this.isChatOpen;
+        if (this.isChatOpen) {
+          this.ui.chatModal.classList.add('open');
+          this.ui.gameBoard.classList.add('blurred');
+          this.ui.chatInput.focus();
+        } else {
+          this.ui.chatModal.classList.remove('open');
+          this.ui.gameBoard.classList.remove('blurred');
+        }
+      },
+      handleChatKey(e) {
+        if (e.key === 'Enter') this.sendChatMessage();
+      },
+      sendChatMessage() {
+        const text = this.ui.chatInput.value.trim();
+        if (!text) return;
+        // User Msg
+        this.addMsg(text, 'user');
+        this.ui.chatInput.value = '';
+        // Bot Response
         setTimeout(() => {
+          const reply = this.getBotResponse(text);
+          this.addMsg(reply, 'bot');
+          this.speak(reply);
+        }, 600);
+      },
+      addMsg(text, type) {
+        const div = document.createElement('div');
+        div.className = `msg ${type}`;
+        div.textContent = text;
+        this.ui.chatBody.appendChild(div);
+        this.ui.chatBody.scrollTop = this.ui.chatBody.scrollHeight;
+      },
+      getBotResponse(input) {
+        const lower = input.toLowerCase();
+        if (lower.includes('hello') || lower.includes('hi')) return "Hi there! Ready to learn some letters and words?";
+        if (lower.includes('how are you')) return "I'm a robot, so I'm always functioning at 100%!";
+        if (lower.includes('play') || lower.includes('game')) return "If you are in Letter Mode, press the key you see. In Word Mode, type the whole word!";
+        if (lower.includes('letter')) return "Letter Mode helps you learn individual keys A through Z.";
+        if (lower.includes('word')) return "Word Mode is harder. You have to spell words like 'CAT' or 'DOG'.";
+        if (lower.includes('help')) return "Just type the letters on your keyboard that match the screen!";
+        // Check for single letters
+        if (/^[a-z]$/.test(lower)) {
+          return `You typed ${input.toUpperCase()}! That is correct.`;
         }
+        const jokes = [
+          "Why did the computer go to the doctor? Because it had a virus!",
+          "I love teaching you, you are a fast typer!",
+          "Keep going, you are doing great!",
+          "Did you know? The alphabet has 26 letters!"
+        ];
+        return jokes[Math.floor(Math.random() * jokes.length)];
+      },
+      /* --- Utilities --- */
+      handleGlobalKey(e) {
+        // Input handling is routed here
+        this.handleInput(e.key);
+      },
+      speak(text) {
+        if ('speechSynthesis' in window) {
+          window.speechSynthesis.cancel(); // Stop previous
+          const utterance = new SpeechSynthesisUtterance(text);
+          utterance.rate = 1.0;
+          utterance.pitch = 1.1; // Slightly higher pitch for "kid friendly" vibe
+          window.speechSynthesis.speak(utterance);
         }
+      },
+      /* --- Confetti System --- */
+      canvas: null,
+      ctx: null,
+      particles: [],
+      resizeCanvas() {
+        this.canvas = document.getElementById('confetti');
+        this.ctx = this.canvas.getContext('2d');
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+      },
+      fireConfetti(intensity = 1.0) {
+        const count = 100 * intensity;
+        const colors = ['#FF6584', '#6C63FF', '#43D9AD', '#FFD93D', '#FF8C00'];
+        for (let i = 0; i < count; i++) {
+          this.particles.push({
+            x: window.innerWidth / 2,
+            y: window.innerHeight / 2,
+            vx: (Math.random() - 0.5) * 20 * intensity,
+            vy: (Math.random() - 1) * 20 * intensity,
+            size: Math.random() * 8 + 4,
+            color: colors[Math.floor(Math.random() * colors.length)],
+            life: 100,
+            gravity: 0.5
+          });
         }
+        if (this.particles.length <= count) requestAnimationFrame(() => this.updateConfetti());
+      },
+      updateConfetti() {
+        if (!this.ctx) return;
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        for (let i = 0; i < this.particles.length; i++) {
+          let p = this.particles[i];
+          p.x += p.vx;