From abaca1e7a67015f24f8aa36c47ad26fcf280f31f Mon Sep 17 00:00:00 2001
From: Siddhi Khandelwal <your-email@example.com>
Date: Tue, 2 Dec 2025 12:59:42 +0530
Subject: [PATCH 01/24] Adding functionality to the animations

---
 home_page.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/home_page.js b/home_page.js
index 0e568f2..31c2320 100644
--- a/home_page.js
+++ b/home_page.js
@@ -113,19 +113,23 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
 }); // END DOMContentLoaded
+const knight = document.querySelector(".knight-wrapper");
 const dustContainer = document.getElementById("dust-container");
+
 setInterval(() => {
+    const rect = knight.getBoundingClientRect();
+
     const d = document.createElement("div");
     d.classList.add("dust");
 
-    // spawn near character feet
-    d.style.left = (parseInt(getComputedStyle(document.querySelector(".pixel-character")).left) + 25) + "px";
+    d.style.left = rect.left + 30 + "px";
+    d.style.top = rect.bottom - 8 + "px";
 
     dustContainer.appendChild(d);
 
-    setTimeout(() => d.remove(), 600);
-}, 180); // rate of dust puffs
-const knight = document.querySelector(".pixel-character");
+    setTimeout(() => d.remove(), 500);
+}, 180);
+
 
 function idleSwordSwing() {
     knight.style.animation = "knightIdleSword 0.5s steps(2) 1";

From 550047d0ac3e58979cf6f73b73f0695164c80212 Mon Sep 17 00:00:00 2001
From: Siddhi Khandelwal <your-email@example.com>
Date: Tue, 2 Dec 2025 13:06:48 +0530
Subject: [PATCH 02/24] Fixing bugs and errors

---
 home_page.js | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/home_page.js b/home_page.js
index 31c2320..327b108 100644
--- a/home_page.js
+++ b/home_page.js
@@ -113,23 +113,9 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
 }); // END DOMContentLoaded
-const knight = document.querySelector(".knight-wrapper");
-const dustContainer = document.getElementById("dust-container");
 
-setInterval(() => {
-    const rect = knight.getBoundingClientRect();
-
-    const d = document.createElement("div");
-    d.classList.add("dust");
-
-    d.style.left = rect.left + 30 + "px";
-    d.style.top = rect.bottom - 8 + "px";
-
-    dustContainer.appendChild(d);
-
-    setTimeout(() => d.remove(), 500);
-}, 180);
 
+const knight = document.querySelector(".pixel-character");
 
 function idleSwordSwing() {
     knight.style.animation = "knightIdleSword 0.5s steps(2) 1";
@@ -143,4 +129,20 @@ function idleSwordSwing() {
 // Randomly swing sword every 3–6 seconds
 setInterval(() => {
     if (Math.random() < 0.4) idleSwordSwing();
-}, 3000);
\ No newline at end of file
+}, 3000);
+const knight = document.querySelector(".knight-wrapper");
+const dustContainer = document.getElementById("dust-container");
+
+setInterval(() => {
+    const rect = knight.getBoundingClientRect();
+
+    const d = document.createElement("div");
+    d.classList.add("dust");
+
+    d.style.left = rect.left + 30 + "px";
+    d.style.top = rect.bottom - 8 + "px";
+
+    dustContainer.appendChild(d);
+
+    setTimeout(() => d.remove(), 500);
+}, 180);
\ No newline at end of file

From 374b5f79f960dd9cc9aeebfb7feb29bf2c45aa4f Mon Sep 17 00:00:00 2001
From: Siddhi Khandelwal <your-email@example.com>
Date: Tue, 2 Dec 2025 13:08:45 +0530
Subject: [PATCH 03/24] Fixing bugs and errors

---
 home_page.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/home_page.js b/home_page.js
index 327b108..dcba293 100644
--- a/home_page.js
+++ b/home_page.js
@@ -130,7 +130,7 @@ function idleSwordSwing() {
 setInterval(() => {
     if (Math.random() < 0.4) idleSwordSwing();
 }, 3000);
-const knight = document.querySelector(".knight-wrapper");
+const knight1 = document.querySelector(".knight-wrapper");
 const dustContainer = document.getElementById("dust-container");
 
 setInterval(() => {

From b978fa2f245a223f7735e0b6fedc0d79457e7988 Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 01:02:09 +0530
Subject: [PATCH 04/24] added medium difficulty all 5 levels

---
 home_page.html       |  32 ++--
 home_page.js         |  61 +++++--
 pages_script/game.js | 420 ++++++++++++++++++++++++++++---------------
 3 files changed, 337 insertions(+), 176 deletions(-)

diff --git a/home_page.html b/home_page.html
index af73f7e..caf6f7a 100644
--- a/home_page.html
+++ b/home_page.html
@@ -8,25 +8,26 @@
 
     <!-- Correct CSS file -->
     <link rel="stylesheet" href="home_page.css">
-
 </head>
 
 <body>
 
-
+    <!-- ⭐ Background Stars -->
     <div class="stars" id="stars"></div>
 
-
+    <!-- Screen Transition -->
     <div id="screen-transition"></div>
-    ̱
 
+    <!-- Pixel Effects -->
     <div class="pixel-character"></div>
     <div id="dust-container"></div>
+
+    <!-- Knight Animation -->
     <div class="knight-wrapper">
         <div class="knight-sprite"></div>
     </div>
 
-    <div id="dust-container"></div>
+    <!-- HOME WRAPPER -->
     <div class="home-wrapper">
 
         <!-- Game Title -->
@@ -40,7 +41,6 @@ <h1 class="game-title">🧩 Code Quest: Debug the Matrix</h1>
             Squash the bugs before they corrupt the world.
             Debug wisely… the stability of the digital realm depends on you!
         </p>
-
         <span id="cursor" class="type-cursor">|</span>
 
         <!-- OUTER BOX -->
@@ -51,11 +51,13 @@ <h1 class="game-title">🧩 Code Quest: Debug the Matrix</h1>
 
                 <table class="menu-table" aria-label="Main game menu">
 
+                    <!-- High Score -->
                     <tr>
                         <td><strong>High Score:</strong></td>
                         <td><span id="highScore">0</span></td>
                     </tr>
 
+                    <!-- START -->
                     <tr>
                         <td colspan="2">
                             <button id="startBtn" class="menu-btn" aria-label="Start the game">
@@ -63,6 +65,8 @@ <h1 class="game-title">🧩 Code Quest: Debug the Matrix</h1>
                             </button>
                         </td>
                     </tr>
+
+                    <!-- CONTINUE -->
                     <tr>
                         <td colspan="2">
                             <button id="continueBtn" class="menu-btn hidden" aria-label="Continue saved game">
@@ -70,6 +74,8 @@ <h1 class="game-title">🧩 Code Quest: Debug the Matrix</h1>
                             </button>
                         </td>
                     </tr>
+
+                    <!-- DIFFICULTY -->
                     <tr>
                         <td><label for="difficultySelect">Difficulty</label></td>
                         <td>
@@ -81,6 +87,7 @@ <h1 class="game-title">🧩 Code Quest: Debug the Matrix</h1>
                         </td>
                     </tr>
 
+                    <!-- LEVEL SELECT -->
                     <tr>
                         <td><label for="levelSelect">Levels</label></td>
                         <td>
@@ -94,6 +101,7 @@ <h1 class="game-title">🧩 Code Quest: Debug the Matrix</h1>
                         </td>
                     </tr>
 
+                    <!-- SETTINGS -->
                     <tr>
                         <td><label for="settingsSelect">Settings</label></td>
                         <td>
@@ -111,15 +119,16 @@ <h1 class="game-title">🧩 Code Quest: Debug the Matrix</h1>
         </div>
 
     </div>
-    <!-- 🕹 How to Play Box -->
+
+    <!-- HOW TO PLAY -->
     <div class="how-to-play-box">
         <h2>🕹️ How to Play</h2>
         <ul>
             <li>Each level shows a small code snippet containing hidden <strong>bugs</strong>.</li>
-            <li>Click on the lines that contain the mistake or suspicious pattern.</li>
-            <li>Every correct bug you catch increases your score.</li>
-            <li>Clicking a clean line gives a penalty — debug carefully!</li>
-            <li>Finish all levels before the timer ends to win!</li>
+            <li>Edit the code to fix the errors.</li>
+            <li>You earn points for every correct solution.</li>
+            <li>Hints cost points, so use them wisely.</li>
+            <li>Finish all levels before the timer ends!</li>
         </ul>
     </div>
 
@@ -132,7 +141,6 @@ <h2>🕹️ How to Play</h2>
     <!-- JavaScript -->
     <script src="home_page.js" defer></script>
 
-
 </body>
 
 </html>
\ No newline at end of file
diff --git a/home_page.js b/home_page.js
index dcba293..9dc7135 100644
--- a/home_page.js
+++ b/home_page.js
@@ -1,3 +1,7 @@
+// ==========================================================
+//                HOME PAGE – FINAL JS
+// ==========================================================
+
 document.addEventListener("DOMContentLoaded", function () {
 
     const startBtn = document.getElementById("startBtn");
@@ -5,36 +9,53 @@ document.addEventListener("DOMContentLoaded", function () {
     const transition = document.getElementById("screen-transition");
     const starContainer = document.getElementById("stars");
 
+    const levelSelect = document.getElementById("levelSelect");
+    const difficultySelect = document.getElementById("difficultySelect");
+
+    /* ----------------------------------------------------
+       LOAD HIGH SCORE
+    ----------------------------------------------------- */
+    const highScore = Number(localStorage.getItem("codequestHighScore")) || 0;
+    const highScoreEl = document.getElementById("highScore");
+    if (highScoreEl) highScoreEl.textContent = highScore;
+
     /* ----------------------------------------------------
-       START BUTTON → Fade → Go to game.html
+       START BUTTON → Fade → Go to selected difficulty + level
     ----------------------------------------------------- */
     startBtn?.addEventListener("click", () => {
+
+        // Get selected difficulty and level
+        const difficulty = difficultySelect.value || "easy";
+        const level = levelSelect.value || "1";
+
+        // Save difficulty globally
+        localStorage.setItem("codequestDifficulty", difficulty);
+
+        // Reset score for new game
+        localStorage.setItem("codequestScore", "0");
+
+        // Page transition
         transition.classList.add("active");
+
+        // Navigate to correct level page
         setTimeout(() => {
-            window.location.href = "levels/level1.html";
+            window.location.href = `levels/level${level}.html`;
         }, 1200);
     });
 
     /* ----------------------------------------------------
        CONTINUE BUTTON — Load saved game
     ----------------------------------------------------- */
-    const savedGame = localStorage.getItem("codeQuestSave");
-    let savedData = null;
-
-    try {
-        savedData = JSON.parse(savedGame);
-    } catch (e) {
-        savedData = null;
-    }
+    const savedData = JSON.parse(localStorage.getItem("codeQuestSave") || "null");
 
-    if (savedData && savedData.level) {
+    if (savedData?.level) {
         continueBtn.classList.remove("hidden");
 
         continueBtn.addEventListener("click", () => {
             transition.classList.add("active");
 
             setTimeout(() => {
-                window.location.href = "pages/game.html?continue=true";
+                window.location.href = `levels/level${savedData.level}.html`;
             }, 1200);
         });
     }
@@ -77,7 +98,7 @@ document.addEventListener("DOMContentLoaded", function () {
     }, Math.random() * 2200 + 1800);
 
     /* ----------------------------------------------------
-       MULTILINE TYPEWRITER EFFECT (FULLY FIXED)
+       MULTILINE TYPEWRITER EFFECT (STABLE VERSION)
     ----------------------------------------------------- */
     const storyEl = document.getElementById("story-text");
     const cursor = document.getElementById("cursor");
@@ -100,22 +121,25 @@ document.addEventListener("DOMContentLoaded", function () {
                         .replace(/</g, "&lt;")
                         .replace(/>/g, "&gt;");
                 }
-
                 i++;
                 setTimeout(typeStep, speed);
-
             } else {
                 cursor.style.display = "none";
             }
         }
 
-        setTimeout(typeStep, 350);
+        setTimeout(typeStep, 400);
     }
 
 }); // END DOMContentLoaded
 
 
+// ==========================================================
+//                    KNIGHT ANIMATION
+// ==========================================================
+
 const knight = document.querySelector(".pixel-character");
+const dustContainer = document.getElementById("dust-container");
 
 function idleSwordSwing() {
     knight.style.animation = "knightIdleSword 0.5s steps(2) 1";
@@ -130,10 +154,11 @@ function idleSwordSwing() {
 setInterval(() => {
     if (Math.random() < 0.4) idleSwordSwing();
 }, 3000);
-const knight1 = document.querySelector(".knight-wrapper");
-const dustContainer = document.getElementById("dust-container");
 
+// Dust trail behind knight
 setInterval(() => {
+    if (!knight) return;
+
     const rect = knight.getBoundingClientRect();
 
     const d = document.createElement("div");
diff --git a/pages_script/game.js b/pages_script/game.js
index 5ca2050..036a039 100644
--- a/pages_script/game.js
+++ b/pages_script/game.js
@@ -1,10 +1,11 @@
 // ==========================================================
 //                GAME.JS — FINAL MULTI-PAGE VERSION
+//      Difficulty-aware: easy / medium (per localStorage)
 // ==========================================================
 
 console.log("game.js loaded");
 
-// Save progress if needed later
+// Optional: save progress (not heavily used yet, but kept)
 function saveGameProgress(level, score, difficulty) {
     const data = {
         level,
@@ -16,78 +17,81 @@ function saveGameProgress(level, score, difficulty) {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-
     // ===== DOM ELEMENTS =====
-    const startBtn = document.getElementById("startGameBtn");
-    const resetBtn = document.getElementById("resetGameBtn");
-    const submitBtn = document.getElementById("submitAnswerBtn");
-    const hintBtn = document.getElementById("hintBtn");
-
-    const levelDisplay = document.getElementById("levelDisplay");
-    const scoreDisplay = document.getElementById("scoreDisplay");
-    const timerDisplay = document.getElementById("timerDisplay");
-    const gameMessage = document.getElementById("gameMessage");
+    const startBtn      = document.getElementById("startGameBtn");
+    const resetBtn      = document.getElementById("resetGameBtn");
+    const submitBtn     = document.getElementById("submitAnswerBtn");
+    const hintBtn       = document.getElementById("hintBtn");
+
+    const levelDisplay  = document.getElementById("levelDisplay");
+    const scoreDisplay  = document.getElementById("scoreDisplay");
+    const timerDisplay  = document.getElementById("timerDisplay");
+    const gameMessage   = document.getElementById("gameMessage");
     const codeSnippetEl = document.getElementById("codeSnippet");
-    const hintTextEl = document.getElementById("hintText");
-    const nextLevelBtn = document.getElementById("nextLevelBtn");
-    const hintCostEl = document.getElementById("hintCost");
-    const levelAnim = document.getElementById("levelCompleteAnimation");
+    const hintTextEl    = document.getElementById("hintText");
+    const nextLevelBtn  = document.getElementById("nextLevelBtn");
+    const hintCostEl    = document.getElementById("hintCost");
+    const levelAnim     = document.getElementById("levelCompleteAnimation");
 
     // ===== SHOW ANSWER POPUP =====
     const showAnswerBtn = document.getElementById("showAnswerBtn");
-    const popup = document.getElementById("showAnswerPopup");
-    const confirmBtn = document.getElementById("confirmShowAnswer");
-    const cancelBtn = document.getElementById("cancelShowAnswer");
-    const doneBtn = document.getElementById("doneShowAnswer");
+    const popup         = document.getElementById("showAnswerPopup");
+    const confirmBtn    = document.getElementById("confirmShowAnswer");
+    const cancelBtn     = document.getElementById("cancelShowAnswer");
+    const doneBtn       = document.getElementById("doneShowAnswer");
 
-    // Current page LEVEL
+    // Current page LEVEL (comes from each HTML: window.currentLevel = 1..5)
     let currentLevel = Number(window.currentLevel) || 1;
 
+    // Current difficulty (set on home page)
+    const difficulty = localStorage.getItem("codequestDifficulty") || "easy";
+    console.log("Difficulty:", difficulty);
+
     // ==========================================================
-    //                      LEVEL DATA
+    //                  LEVELS BY DIFFICULTY
     // ==========================================================
-    const levels = [
-        // LEVEL 1
-        {
-            number: 1,
-            snippet: `items = ["pen", "book", "bag"]
+    const levelsByDifficulty = {
+        // ---------------------- EASY ----------------------
+        easy: [
+            {
+                number: 1,
+                snippet: `items = ["pen", "book", "bag"]
 print(items[3])
 print(items.length)`,
-            hints: [
-                "Hint: Lists are 0-indexed — items[3] does not exist.",
-                "Hint: Python lists do NOT have a .length or .lenght attribute.",
-                "Hint: Use len(items) to get the length of a list."
-            ],
-            answer:
+                hints: [
+                    "Hint: Lists are 0-indexed — items[3] does not exist.",
+                    "Hint: Python lists do NOT have a .length or .lenght attribute.",
+                    "Hint: Use len(items) to get the length of a list."
+                ],
+                answer:
 `items = ["pen", "book", "bag"]
 print(items[2])
 print(len(items))`,
-            check: (code) =>
-                code.includes("items[2]") &&
-                code.includes("len(items)") &&
-                !code.includes("lenght") &&
-                !code.includes("length") &&
-                !code.includes("items.length")
-        },
-
-        // LEVEL 2
-        {
-            number: 2,
-            snippet: `numbers = [1, 2, 3, 4]
+                check: (code) =>
+                    code.includes("items[2]") &&
+                    code.includes("len(items)") &&
+                    !code.includes("lenght") &&
+                    !code.includes("length") &&
+                    !code.includes("items.length")
+            },
+
+            {
+                number: 2,
+                snippet: `numbers = [1, 2, 3, 4]
 total = 0
 
 for i in range(len(numbers)):
 total += number[i]
 
 print(totl)`,
-            hints: [
-                "Indentation missing.",
-                "number[i] should be numbers[i].",
-                "totl is incorrect.",
-                "Check the colon after for loop.",
-                "Make sure total is updated each loop."
-            ],
-            answer:
+                hints: [
+                    "Indentation missing.",
+                    "number[i] should be numbers[i].",
+                    "totl is incorrect.",
+                    "Check the colon after for loop.",
+                    "Make sure total is updated each loop."
+                ],
+                answer:
 `numbers = [1, 2, 3, 4]
 total = 0
 
@@ -95,16 +99,15 @@ for i in range(len(numbers)):
     total += numbers[i]
 
 print(total)`,
-            check: (code) =>
-                code.includes("for i in range(len(numbers)):") &&
-                (code.includes("total += numbers[i]") || code.includes("total = total + numbers[i]")) &&
-                code.includes("print(total)")
-        },
-
-        // LEVEL 3
-        {
-            number: 3,
-            snippet: `def sumList(nums)
+                check: (code) =>
+                    code.includes("for i in range(len(numbers)):") &&
+                    (code.includes("total += numbers[i]") || code.includes("total = total + numbers[i]")) &&
+                    code.includes("print(total)")
+            },
+
+            {
+                number: 3,
+                snippet: `def sumList(nums)
 total = 0
 for i in range(len(num)):
     sum += nums[i]
@@ -113,14 +116,14 @@ for i in range(len(num)):
 
 numbers = [4, 5, 6]
 print(sumlist(numbers))`,
-            hints: [
-                "Missing colon.",
-                "num ≠ nums.",
-                "Do not modify nums.",
-                "Return total, not totalSum.",
-                "Function name case matters."
-            ],
-            answer:
+                hints: [
+                    "Missing colon after function definition.",
+                    "num ≠ nums.",
+                    "Do not modify nums inside the loop.",
+                    "Return total, not totalSum.",
+                    "Function name spelling & case matters."
+                ],
+                answer:
 `def sumList(nums):
     total = 0
     for i in range(len(nums)):
@@ -129,20 +132,19 @@ print(sumlist(numbers))`,
 
 numbers = [4, 5, 6]
 print(sumList(numbers))`,
-            check: (code) =>
-                code.includes("def sumList(nums):") &&
-                code.includes("total = 0") &&
-                code.includes("for i in range(len(nums))") &&
-                code.includes("total += nums[i]") &&
-                !code.includes("nums = nums + 1") &&
-                code.includes("return total") &&
-                code.includes("print(sumList(numbers))")
-        },
-
-        // LEVEL 4
-        {
-            number: 4,
-            snippet: `def collect_unique_words(text):
+                check: (code) =>
+                    code.includes("def sumList(nums):") &&
+                    code.includes("total = 0") &&
+                    code.includes("for i in range(len(nums))") &&
+                    code.includes("total += nums[i]") &&
+                    !code.includes("nums = nums + 1") &&
+                    code.includes("return total") &&
+                    code.includes("print(sumList(numbers))")
+            },
+
+            {
+                number: 4,
+                snippet: `def collect_unique_words(text):
     words = text.split()
     unique = []
 
@@ -159,13 +161,13 @@ print(sumList(numbers))`,
 
 sentence = "Hello hello world! This world is big, big world."
 print( collect_unique_words(sentence) )`,
-            hints: [
-                "Hint: unique = cleaned is wrong.",
-                "Use unique.append(cleaned).",
-                "unique should always be a list.",
-                "Returning len(unique) only works if unique is a list."
-            ],
-            answer:
+                hints: [
+                    "Hint: unique = cleaned is wrong.",
+                    "Hint: You should add to the list, not replace it.",
+                    "Hint: unique must always stay a list.",
+                    "Hint: unique.append(cleaned) is the right operation."
+                ],
+                answer:
 `def collect_unique_words(text):
     words = text.split()
     unique = []
@@ -179,16 +181,15 @@ print( collect_unique_words(sentence) )`,
 
 sentence = "Hello hello world! This world is big, big world."
 print(collect_unique_words(sentence))`,
-            check: (code) =>
-                code.includes("unique.append(cleaned)") &&
-                code.includes("return len(unique)") &&
-                !code.includes("unique = cleaned")
-        },
-
-        // LEVEL 5
-        {
-            number: 5,
-            snippet: `def get_user_age(users, name):
+                check: (code) =>
+                    code.includes("unique.append(cleaned)") &&
+                    code.includes("return len(unique)") &&
+                    !code.includes("unique = cleaned")
+            },
+
+            {
+                number: 5,
+                snippet: `def get_user_age(users, name):
     for user in users:
         if user["name"] == name:
             return user["age"]
@@ -199,13 +200,13 @@ users = [
 ]
 
 print(get_user_age("Alice", users))`,
-            hints: [
-                "Arguments are reversed.",
-                "Call as get_user_age(users, name).",
-                "List comes first, name second.",
-                "Swap them."
-            ],
-            answer:
+                hints: [
+                    "Arguments are reversed in the function call.",
+                    "Call pattern should be get_user_age(users, name).",
+                    "The list of users comes first, then the name.",
+                    "Swap the arguments in the print call."
+                ],
+                answer:
 `def get_user_age(users, name):
     for user in users:
         if user["name"] == name:
@@ -217,22 +218,141 @@ users = [
 ]
 
 print(get_user_age(users, "Alice"))`,
-            check: (code) =>
-                code.includes('get_user_age(users, "Alice")') ||
-                code.includes("get_user_age(users, 'Alice')")
-        }
-    ];
+                check: (code) =>
+                    code.includes('get_user_age(users, "Alice")') ||
+                    code.includes("get_user_age(users, 'Alice')")
+            }
+        ],
+
+        // --------------------- MEDIUM ---------------------
+        medium: [
+            {
+                number: 1,
+                snippet: `numbers = [2, 4, 6, 8]
+for n in numbers:
+    if n % 2 = 0:
+        print("Even")`,
+                hints: [
+                    "Hint: '=' is assignment, not comparison.",
+                    "Hint: Use '==' when comparing values.",
+                    "Hint: n % 2 == 0 checks if n is even."
+                ],
+                answer:
+`numbers = [2, 4, 6, 8]
+for n in numbers:
+    if n % 2 == 0:
+        print("Even")`,
+                check: (code) =>
+                    code.includes("for n in numbers") &&
+                    code.includes("n % 2 == 0") &&
+                    code.includes('print("Even"') // loose but fine
+            },
+
+            {
+                number: 2,
+                snippet: `def multiply(a, b):
+return a * b
+
+print(multiply(5))`,
+                hints: [
+                    "Hint: The function body needs indentation.",
+                    "Hint: multiply(a, b) requires two arguments.",
+                    "Hint: Pass both numbers when calling the function."
+                ],
+                answer:
+`def multiply(a, b):
+    return a * b
+
+print(multiply(5, 3))`,
+                check: (code) =>
+                    code.includes("def multiply(a, b):") &&
+                    code.includes("return a * b") &&
+                    code.includes("multiply(") &&
+                    code.includes(",") // ensure 2 args passed
+            },
+
+            {
+                number: 3,
+                snippet: `user = {"name": "Ava", "age": 20}
+print(user["gender"])`,
+                hints: [
+                    "Hint: 'gender' key does not exist in the dictionary.",
+                    "Hint: Direct indexing causes a KeyError.",
+                    "Hint: Use user.get('gender', 'Not specified')."
+                ],
+                answer:
+`user = {"name": "Ava", "age": 20}
+print(user.get("gender", "Not specified"))`,
+                check: (code) =>
+                    code.includes('user.get("gender"') ||
+                    code.includes("user.get('gender'")
+            },
+
+            {
+                number: 4,
+                snippet: `def find_max(nums):
+    max = 0
+    for n in nums:
+        if n > max:
+            max = n
+    return max
+
+print(find_max([-5, -10, -3]))`,
+                hints: [
+                    "Hint: Starting max at 0 breaks for negative numbers.",
+                    "Hint: Use the first element of nums as initial max.",
+                    "Hint: Avoid shadowing built-in names like max."
+                ],
+                answer:
+`def find_max(nums):
+    max_value = nums[0]
+    for n in nums:
+        if n > max_value:
+            max_value = n
+    return max_value
+
+print(find_max([-5, -10, -3]))`,
+                check: (code) =>
+                    code.includes("def find_max(nums):") &&
+                    code.includes("max_value = nums[0]") &&
+                    code.includes("if n > max_value") &&
+                    code.includes("return max_value")
+            },
+
+            {
+                number: 5,
+                snippet: `for i in range(1, 5)
+    print(i)`,
+                hints: [
+                    "Hint: The for loop is missing a colon.",
+                    "Hint: Python requires ':' at the end of control statements.",
+                    "Hint: range(1, 5) prints 1 to 4."
+                ],
+                answer:
+`for i in range(1, 5):
+    print(i)`,
+                check: (code) =>
+                    code.includes("for i in range(1, 5):") &&
+                    code.includes("print(i)")
+            }
+        ]
+    };
+
+    // Pick correct level set based on difficulty
+    const levels = levelsByDifficulty[difficulty] || levelsByDifficulty.easy;
 
     // ==========================================================
     //                   GAME STATE
     // ==========================================================
-    let timer = 60;
+    let timer         = 60;
     let timerInterval = null;
-    let totalScore = Number(localStorage.getItem("codequestScore")) || 0;
-    let hintStep = 0;
-    let gameStarted = false;
+    let hintStep      = 0;
+    let gameStarted   = false;
+    let levelCompleted = false;
 
-    let levelCompleted = false; // 🔥 Prevent repeated scoring
+    // Score stored per difficulty
+    const scoreKey = `codequestScore_${difficulty}`;
+    let totalScore = Number(localStorage.getItem(scoreKey)) || 0;
 
     function getHintCost() {
         return 10 * (hintStep + 1);
@@ -249,13 +369,12 @@ print(get_user_age(users, "Alice"))`,
         const level = levels[levelNum - 1];
         if (!level) return;
 
-        levelCompleted = false; // 🔥 Reset scoring lock
-
+        levelCompleted = false;
         gameStarted = true;
         hintStep = 0;
         timer = 60;
 
-        levelDisplay.textContent = `Level ${level.number}`;
+        levelDisplay.textContent = `Level ${level.number} (${difficulty})`;
         timerDisplay.textContent = `Time: ${timer}s`;
         scoreDisplay.textContent = `Score: ${totalScore}`;
         gameMessage.textContent = `🚀 Level ${level.number} Started!`;
@@ -284,18 +403,22 @@ print(get_user_age(users, "Alice"))`,
     //                        CHECK ANSWER
     // ==========================================================
     function checkAnswer() {
+        const level = levels[currentLevel - 1];
+        if (!level) return;
+
         const code = codeSnippetEl.textContent;
 
-        if (!levels[currentLevel - 1].check(code)) {
+        if (!level.check(code)) {
             gameMessage.textContent = "❌ Incorrect. Try again!";
             return;
         }
 
-        // 🔥 Prevent multiple scoring on same level
+        // Prevent multiple scoring on same level
         if (!levelCompleted) {
             totalScore += 50;
-            localStorage.setItem("codequestScore", totalScore);
+            localStorage.setItem(scoreKey, totalScore);
             levelCompleted = true;
+            saveGameProgress(currentLevel, totalScore, difficulty);
         }
 
         scoreDisplay.textContent = `Score: ${totalScore}`;
@@ -308,7 +431,7 @@ print(get_user_age(users, "Alice"))`,
 
         levelAnim.textContent = "🎉 LEVEL COMPLETE!";
         levelAnim.classList.remove("hidden");
-        void levelAnim.offsetWidth;
+        void levelAnim.offsetWidth; // force reflow for animation
         levelAnim.classList.add("level-complete");
 
         setTimeout(() => {
@@ -327,14 +450,18 @@ print(get_user_age(users, "Alice"))`,
             return;
         }
 
-        const hints = levels[currentLevel - 1].hints;
+        const level = levels[currentLevel - 1];
+        if (!level) return;
+
+        const hints = level.hints;
         if (hintStep >= hints.length) {
             gameMessage.textContent = "⚠️ No more hints!";
             return;
         }
 
+        // Deduct score for hint
         totalScore -= getHintCost();
-        localStorage.setItem("codequestScore", totalScore);
+        localStorage.setItem(scoreKey, totalScore);
         scoreDisplay.textContent = `Score: ${totalScore}`;
 
         hintTextEl.textContent = hints[hintStep];
@@ -347,66 +474,66 @@ print(get_user_age(users, "Alice"))`,
     // ==========================================================
     //                      BUTTON HANDLERS
     // ==========================================================
-    if (startBtn) startBtn.addEventListener("click", () => loadLevel(currentLevel));
-    if (resetBtn) resetBtn.addEventListener("click", () => location.reload());
+    if (startBtn)  startBtn.addEventListener("click", () => loadLevel(currentLevel));
+    if (resetBtn)  resetBtn.addEventListener("click", () => location.reload());
     if (submitBtn) submitBtn.addEventListener("click", checkAnswer);
-    if (hintBtn) hintBtn.addEventListener("click", showHint);
+    if (hintBtn)   hintBtn.addEventListener("click", showHint);
 
     // ==========================================================
-    //               SHOW ANSWER — BEST UX VERSION
+    //               SHOW ANSWER — UX MODE
     // ==========================================================
-    if (showAnswerBtn) {
+    if (showAnswerBtn && popup) {
         showAnswerBtn.addEventListener("click", () => popup.classList.remove("hidden"));
     }
 
-    if (cancelBtn) {
+    if (cancelBtn && popup) {
         cancelBtn.addEventListener("click", () => popup.classList.add("hidden"));
     }
 
-    if (confirmBtn) {
+    if (confirmBtn && popup) {
         confirmBtn.addEventListener("click", () => {
-
             const levelData = levels[currentLevel - 1];
             if (!levelData) return;
 
+            // Show correct answer
             codeSnippetEl.textContent = levelData.answer;
             codeSnippetEl.style.pointerEvents = "none";
             codeSnippetEl.contentEditable = "false";
 
-            // Showing answer = reset score for fairness
+            // Reset score for this difficulty when they give up
             totalScore = 0;
-            localStorage.setItem("codequestScore", totalScore);
+            localStorage.setItem(scoreKey, totalScore);
             scoreDisplay.textContent = `Score: 0`;
 
+            // Close popup, then show Done button
             popup.classList.add("hidden");
 
-            // show done button after small delay
             setTimeout(() => {
-                doneBtn.classList.remove("hidden");
+                if (doneBtn) doneBtn.classList.remove("hidden");
             }, 120);
         });
     }
 
     if (doneBtn) {
         doneBtn.addEventListener("click", () => {
+            // Back to first level of current difficulty
             window.location.href = "level1.html";
         });
     }
-
 });
 
 // ==========================================================
 //               NEXT LEVEL NAVIGATION
 // ==========================================================
-
 function goToNextLevel() {
     const next = Number(window.currentLevel) + 1;
 
-    // 🔥 After Level 5 → FINAL SCORE PAGE
+    // After Level 5 → Final Score page
     if (next > 5) {
-        window.location.href = "../pages/final_score.html";
+        window.location.href = "../final_score.html";
         return;
     }
+
     window.location.href = `level${next}.html`;
 }
 
@@ -419,12 +546,13 @@ document.addEventListener("DOMContentLoaded", () => {
 //               PARTICLES + STARS
 // ==========================================================
 const pixelContainer = document.querySelector(".pixel-particles");
+
 if (pixelContainer) {
     function spawnPixel() {
         const p = document.createElement("div");
         p.classList.add("pixel");
         p.style.left = Math.random() * 100 + "vw";
-        p.style.top = Math.random() * 100 + "vh";
+        p.style.top  = Math.random() * 100 + "vh";
         p.style.animationDelay = Math.random() * 5 + "s";
         pixelContainer.appendChild(p);
         setTimeout(() => p.remove(), 7000);
@@ -443,7 +571,7 @@ if (starContainer) {
         const s = document.createElement("div");
         s.classList.add("shooting-star");
         s.style.left = Math.random() * 100 + "vw";
-        s.style.top = Math.random() * 50 + "vh";
+        s.style.top  = Math.random() * 50 + "vh";
         starContainer.appendChild(s);
         setTimeout(() => s.remove(), 1400);
     }
@@ -457,7 +585,7 @@ if (starContainer) {
         star.classList.add("star");
         if (Math.random() < 0.15) star.classList.add("plus");
         star.style.left = Math.random() * 100 + "vw";
-        star.style.top = Math.random() * 100 + "vh";
+        star.style.top  = Math.random() * 100 + "vh";
         star.style.animationDelay = Math.random() * 3 + "s";
         starContainer.appendChild(star);
     }

From 2c9fdf90a40fc127eb591f286445633937b1b624 Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 01:18:20 +0530
Subject: [PATCH 05/24] added hard difficulty all 5 levels

---
 pages_script/game.js | 174 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 155 insertions(+), 19 deletions(-)

diff --git a/pages_script/game.js b/pages_script/game.js
index 036a039..d9969b9 100644
--- a/pages_script/game.js
+++ b/pages_script/game.js
@@ -1,6 +1,6 @@
 // ==========================================================
 //                GAME.JS — FINAL MULTI-PAGE VERSION
-//      Difficulty-aware: easy / medium (per localStorage)
+//      Difficulty-aware: easy / medium / hard
 // ==========================================================
 
 console.log("game.js loaded");
@@ -85,9 +85,9 @@ total += number[i]
 
 print(totl)`,
                 hints: [
-                    "Indentation missing.",
+                    "Indentation missing inside the loop.",
                     "number[i] should be numbers[i].",
-                    "totl is incorrect.",
+                    "totl is incorrect variable name.",
                     "Check the colon after for loop.",
                     "Make sure total is updated each loop."
                 ],
@@ -245,7 +245,7 @@ for n in numbers:
                 check: (code) =>
                     code.includes("for n in numbers") &&
                     code.includes("n % 2 == 0") &&
-                    code.includes('print("Even"') // loose but fine
+                    code.includes('print("Even"')
             },
 
             {
@@ -268,7 +268,7 @@ print(multiply(5, 3))`,
                     code.includes("def multiply(a, b):") &&
                     code.includes("return a * b") &&
                     code.includes("multiply(") &&
-                    code.includes(",") // ensure 2 args passed
+                    code.includes(",") // ensures 2 args are passed
             },
 
             {
@@ -335,6 +335,142 @@ print(find_max([-5, -10, -3]))`,
                     code.includes("for i in range(1, 5):") &&
                     code.includes("print(i)")
             }
+        ],
+
+        // ---------------------- HARD ----------------------
+        hard: [
+            {
+                number: 1,
+                snippet: `def add_item(item, items=[]):
+    items.append(item)
+    return items
+
+print(add_item("apple"))
+print(add_item("banana"))`,
+                hints: [
+                    "Hint: The same list is being reused across calls.",
+                    "Hint: Mutable default arguments can be dangerous.",
+                    "Hint: Use None as the default and create a new list inside.",
+                    "Hint: Check how many items are in each printed list."
+                ],
+                answer:
+`def add_item(item, items=None):
+    if items is None:
+        items = []
+    items.append(item)
+    return items
+
+print(add_item("apple"))
+print(add_item("banana"))`,
+                check: (code) =>
+                    code.includes("def add_item(item, items=None):") &&
+                    code.includes("if items is None:") &&
+                    code.includes("items = []") &&
+                    code.includes("items.append(item)")
+            },
+
+            {
+                number: 2,
+                snippet: `def factorial(n):
+    if n == 0:
+        return 0
+    else:
+        return n * factorial(n - 1)
+
+print(factorial(0))`,
+                hints: [
+                    "Hint: What is 0! supposed to be mathematically?",
+                    "Hint: Returning 0 here makes every factorial 0.",
+                    "Hint: Only the base case is wrong.",
+                    "Hint: factorial(0) should return 1."
+                ],
+                answer:
+`def factorial(n):
+    if n == 0:
+        return 1
+    else:
+        return n * factorial(n - 1)
+
+print(factorial(0))`,
+                check: (code) =>
+                    code.includes("def factorial(n):") &&
+                    code.includes("if n == 0:") &&
+                    code.includes("return 1") &&
+                    code.includes("return n * factorial(n - 1)")
+            },
+
+            {
+                number: 3,
+                snippet: `file = open("data.txt", "r")
+lines = file.readlines()
+for line in lines:
+    print(line.strip())
+file.close`,
+                hints: [
+                    "Hint: file.close is never actually called.",
+                    "Hint: You are missing parentheses after close.",
+                    "Hint: Using 'with open(...) as f:' is safer.",
+                    "Hint: Context managers automatically close the file."
+                ],
+                answer:
+`with open("data.txt", "r") as file:
+    lines = file.readlines()
+    for line in lines:
+        print(line.strip())`,
+                check: (code) =>
+                    code.includes('with open("data.txt", "r") as file:') &&
+                    code.includes("for line in") &&
+                    code.includes("print(line.strip())")
+            },
+
+            {
+                number: 4,
+                snippet: `nums = [1, 2, 3, 4]
+squares = [n * n for i in nums]
+print(squares)`,
+                hints: [
+                    "Hint: Look closely at the variable used in the comprehension.",
+                    "Hint: You're squaring n, but iterating over i.",
+                    "Hint: The loop variable name and expression should match.",
+                    "Hint: It should be 'for n in nums'."
+                ],
+                answer:
+`nums = [1, 2, 3, 4]
+squares = [n * n for n in nums]
+print(squares)`,
+                check: (code) =>
+                    code.includes("squares = [n * n for n in nums]") &&
+                    code.includes("print(squares)")
+            },
+
+            {
+                number: 5,
+                snippet: `def safe_divide(a, b):
+    try:
+        return a / b
+    except:
+        return "error"
+
+print(safe_divide(10, 0))`,
+                hints: [
+                    "Hint: A bare 'except' catches all exceptions silently.",
+                    "Hint: Be specific about the exception you expect.",
+                    "Hint: What error happens when dividing by zero?",
+                    "Hint: Catch ZeroDivisionError explicitly."
+                ],
+                answer:
+`def safe_divide(a, b):
+    try:
+        return a / b
+    except ZeroDivisionError:
+        return "Cannot divide by zero"
+
+print(safe_divide(10, 0))`,
+                check: (code) =>
+                    code.includes("def safe_divide(a, b):") &&
+                    (code.includes("except ZeroDivisionError") || code.includes("except ZeroDivisionError:")) &&
+                    !code.includes("except:")
+            }
         ]
     };
 
@@ -344,15 +480,15 @@ print(find_max([-5, -10, -3]))`,
     // ==========================================================
     //                   GAME STATE
     // ==========================================================
-    let timer         = 60;
-    let timerInterval = null;
-    let hintStep      = 0;
-    let gameStarted   = false;
+    let timer          = 60;
+    let timerInterval  = null;
+    let hintStep       = 0;
+    let gameStarted    = false;
     let levelCompleted = false;
 
     // Score stored per difficulty
-    const scoreKey = `codequestScore_${difficulty}`;
-    let totalScore = Number(localStorage.getItem(scoreKey)) || 0;
+    const scoreKey  = `codequestScore_${difficulty}`;
+    let totalScore  = Number(localStorage.getItem(scoreKey)) || 0;
 
     function getHintCost() {
         return 10 * (hintStep + 1);
@@ -370,17 +506,17 @@ print(find_max([-5, -10, -3]))`,
         if (!level) return;
 
         levelCompleted = false;
-        gameStarted = true;
-        hintStep = 0;
-        timer = 60;
+        gameStarted    = true;
+        hintStep       = 0;
+        timer          = 60;
 
         levelDisplay.textContent = `Level ${level.number} (${difficulty})`;
         timerDisplay.textContent = `Time: ${timer}s`;
         scoreDisplay.textContent = `Score: ${totalScore}`;
-        gameMessage.textContent = `🚀 Level ${level.number} Started!`;
+        gameMessage.textContent  = `🚀 Level ${level.number} Started!`;
 
-        codeSnippetEl.textContent = level.snippet;
-        codeSnippetEl.contentEditable = "true";
+        codeSnippetEl.textContent      = level.snippet;
+        codeSnippetEl.contentEditable  = "true";
         codeSnippetEl.style.pointerEvents = "auto";
 
         hintTextEl.classList.add("hidden");
@@ -422,11 +558,11 @@ print(find_max([-5, -10, -3]))`,
         }
 
         scoreDisplay.textContent = `Score: ${totalScore}`;
-        gameMessage.textContent = "✅ Correct!";
+        gameMessage.textContent  = "✅ Correct!";
 
         clearInterval(timerInterval);
 
-        codeSnippetEl.contentEditable = "false";
+        codeSnippetEl.contentEditable   = "false";
         codeSnippetEl.style.pointerEvents = "none";
 
         levelAnim.textContent = "🎉 LEVEL COMPLETE!";

From 7070997d8cc369cb20278503e82878542fef6b90 Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 01:31:37 +0530
Subject: [PATCH 06/24] fixing errors

---
 pages_script/game.js | 38 ++++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/pages_script/game.js b/pages_script/game.js
index d9969b9..481a5a2 100644
--- a/pages_script/game.js
+++ b/pages_script/game.js
@@ -47,6 +47,9 @@ document.addEventListener("DOMContentLoaded", () => {
     const difficulty = localStorage.getItem("codequestDifficulty") || "easy";
     console.log("Difficulty:", difficulty);
 
+    // 🔒 Flag: true after user has clicked "Yes, show answer"
+    let answerShown = false;
+
     // ==========================================================
     //                  LEVELS BY DIFFICULTY
     // ==========================================================
@@ -268,7 +271,7 @@ print(multiply(5, 3))`,
                     code.includes("def multiply(a, b):") &&
                     code.includes("return a * b") &&
                     code.includes("multiply(") &&
-                    code.includes(",") // ensures 2 args are passed
+                    code.includes(",")
             },
 
             {
@@ -509,6 +512,7 @@ print(safe_divide(10, 0))`,
         gameStarted    = true;
         hintStep       = 0;
         timer          = 60;
+        answerShown    = false; // reset lock when new level starts
 
         levelDisplay.textContent = `Level ${level.number} (${difficulty})`;
         timerDisplay.textContent = `Time: ${timer}s`;
@@ -522,6 +526,12 @@ print(safe_divide(10, 0))`,
         hintTextEl.classList.add("hidden");
         nextLevelBtn.classList.add("hidden");
 
+        // Ensure buttons are enabled at level start
+        [startBtn, resetBtn, submitBtn, hintBtn, nextLevelBtn, showAnswerBtn].forEach(btn => {
+            if (btn) btn.disabled = false;
+        });
+        if (doneBtn) doneBtn.classList.add("hidden");
+
         updateHintCostUI();
 
         clearInterval(timerInterval);
@@ -539,6 +549,12 @@ print(safe_divide(10, 0))`,
     //                        CHECK ANSWER
     // ==========================================================
     function checkAnswer() {
+        // 🔒 Prevent answering after showing the answer
+        if (answerShown) {
+            gameMessage.textContent = "⚠️ Submit disabled after showing the answer.";
+            return;
+        }
+
         const level = levels[currentLevel - 1];
         if (!level) return;
 
@@ -586,6 +602,12 @@ print(safe_divide(10, 0))`,
             return;
         }
 
+        // Also block hints after showing the answer (defensive)
+        if (answerShown) {
+            gameMessage.textContent = "⚠️ Hints disabled after showing the answer.";
+            return;
+        }
+
         const level = levels[currentLevel - 1];
         if (!level) return;
 
@@ -616,7 +638,7 @@ print(safe_divide(10, 0))`,
     if (hintBtn)   hintBtn.addEventListener("click", showHint);
 
     // ==========================================================
-    //               SHOW ANSWER — UX MODE
+    //               SHOW ANSWER — UX MODE + LOCK
     // ==========================================================
     if (showAnswerBtn && popup) {
         showAnswerBtn.addEventListener("click", () => popup.classList.remove("hidden"));
@@ -631,6 +653,14 @@ print(safe_divide(10, 0))`,
             const levelData = levels[currentLevel - 1];
             if (!levelData) return;
 
+            // 🔒 Lock further game interactions
+            answerShown = true;
+
+            // Disable all interactive buttons except Done
+            [startBtn, resetBtn, submitBtn, hintBtn, nextLevelBtn, showAnswerBtn].forEach(btn => {
+                if (btn) btn.disabled = true;
+            });
+
             // Show correct answer
             codeSnippetEl.textContent = levelData.answer;
             codeSnippetEl.style.pointerEvents = "none";
@@ -652,7 +682,7 @@ print(safe_divide(10, 0))`,
 
     if (doneBtn) {
         doneBtn.addEventListener("click", () => {
-            // Back to first level of current difficulty
+            // (We don't really need to re-enable buttons since we're leaving)
             window.location.href = "level1.html";
         });
     }
@@ -727,4 +757,4 @@ if (starContainer) {
     }
 
     for (let i = 0; i < 200; i++) createStar();
-}
\ No newline at end of file
+}

From 748bbe23ed07f91a9cdf0c9af543076b6b8d5405 Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 01:58:56 +0530
Subject: [PATCH 07/24] add full pause system with UI overlay, code lock &
 resume popup

---
 levels/level1.html         |  30 +++++-
 levels/level2.html         |   9 +-
 levels/level3.html         |   9 ++
 levels/level4.html         |   9 ++
 levels/level5.html         |   9 ++
 pages/pages_style/game.css |  43 ++++++++
 pages_script/game.js       | 211 ++++++++++++++++++++++++-------------
 7 files changed, 238 insertions(+), 82 deletions(-)

diff --git a/levels/level1.html b/levels/level1.html
index ff7b940..3d764cb 100644
--- a/levels/level1.html
+++ b/levels/level1.html
@@ -9,30 +9,36 @@
 </head>
 <body>
 
+<!-- Background FX -->
 <div class="samurai-walker"></div>
 <div class="stars" id="stars"></div>
 <div class="pixel-particles"></div>
 
 <div class="game-container">
 
+    <!-- Level Complete Animation -->
     <div id="levelCompleteAnimation"></div>
 
+    <!-- Header -->
     <header class="game-header">
         <span id="levelDisplay">Level 1</span>
         <span id="timerDisplay">Time: 60s</span>
         <span id="scoreDisplay">Score: 0</span>
     </header>
 
-    <!-- Level intro overlay -->
+    <!-- Level Intro Overlay -->
     <div id="levelOverlay" class="overlay hidden">
         <h1>Level 1</h1>
         <p>Find all the bugs in the code.</p>
     </div>
 
+    <!-- Game Message -->
     <section id="gameMessage" class="game-message"></section>
 
+    <!-- Main Game Area -->
     <main id="gameArea" class="game-area"></main>
 
+    <!-- Code Snippet Box -->
     <section class="challenge-box">
         <pre id="codeSnippet" contenteditable="true"></pre>
     </section>
@@ -49,19 +55,21 @@ <h1>Level 1</h1>
         <button id="submitAnswerBtn">Submit</button>
     </section>
 
+    <!-- Next Level -->
     <button id="nextLevelBtn" class="hidden">Next Level →</button>
 
     <!-- Main Controls -->
     <section class="game-controls">
         <button id="startGameBtn">Start Game</button>
         <button id="resetGameBtn">Reset Game</button>
+        <button id="pauseGameBtn">⏸ Pause</button>
         <button id="showAnswerBtn" class="show-answer-btn">Show Answer</button>
     </section>
 
 </div>
 
 <!-- ==========================================================
-                     SHOW ANSWER POPUP (FINAL FIXED)
+                     SHOW ANSWER POPUP
 ========================================================== -->
 <div id="showAnswerPopup" class="popup-overlay hidden">
     <div class="popup-box">
@@ -72,13 +80,25 @@ <h2>Show Answer?</h2>
             <button id="confirmShowAnswer" class="confirm-btn">Yes, show answer</button>
             <button id="cancelShowAnswer" class="cancel-btn">Cancel</button>
         </div>
+    </div>
+</div>
 
-        
+<!-- DONE button stays OUTSIDE popup -->
+<button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
+
+<!-- ==========================================================
+                     PAUSE POPUP
+========================================================== -->
+
+<div id="pauseOverlay" class="pause-overlay hidden"></div>
+<div id="pausePopup" class="pause-popup hidden">
+    <div class="pause-box">
+        <h2>⏸ Game Paused</h2>
+        <button id="resumeGameBtn" class="menu-btn">▶ Resume</button>
     </div>
 </div>
- <!-- DONE button NOW inside popup (this is the FIX) -->
-        <button id="doneShowAnswer" class="done-btn hidden">Done</button>
+
 <script>
     window.currentLevel = 1;
 </script>
diff --git a/levels/level2.html b/levels/level2.html
index 789f0b3..c3524f5 100644
--- a/levels/level2.html
+++ b/levels/level2.html
@@ -80,7 +80,14 @@ <h2>Show Answer?</h2>
 
         <!-- DONE BUTTON (INSIDE POPUP) -->
         <button id="doneShowAnswer" class="done-btn hidden">Done</button>
-
+        
+<div id="pauseOverlay" class="pause-overlay hidden"></div>
+<div id="pausePopup" class="pause-popup hidden">
+    <div class="pause-box">
+        <h2>⏸ Game Paused</h2>
+        <button id="resumeGameBtn" class="menu-btn">▶ Resume</button>
+    </div>
+</div>
 
 <script>
     window.currentLevel = 2;
diff --git a/levels/level3.html b/levels/level3.html
index 48c60b6..1e6a3de 100644
--- a/levels/level3.html
+++ b/levels/level3.html
@@ -81,6 +81,15 @@ <h2>Show Answer?</h2>
  <!-- DONE BUTTON (INSIDE POPUP) -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
+<div id="pauseOverlay" class="pause-overlay hidden"></div>
+
+<div id="pausePopup" class="pause-popup hidden">
+    <div class="pause-box">
+        <h2>⏸ Game Paused</h2>
+        <button id="resumeGameBtn" class="menu-btn">▶ Resume</button>
+    </div>
+</div>
+
 <script>
     window.currentLevel = 3;
 </script>
diff --git a/levels/level4.html b/levels/level4.html
index a564310..8c7cc60 100644
--- a/levels/level4.html
+++ b/levels/level4.html
@@ -81,6 +81,15 @@ <h2>Show Answer?</h2>
  <!-- DONE BUTTON (INSIDE POPUP) -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
+<div id="pauseOverlay" class="pause-overlay hidden"></div>
+
+<div id="pausePopup" class="pause-popup hidden">
+    <div class="pause-box">
+        <h2>⏸ Game Paused</h2>
+        <button id="resumeGameBtn" class="menu-btn">▶ Resume</button>
+    </div>
+</div>
+
 <script>
     window.currentLevel = 4;
 </script>
diff --git a/levels/level5.html b/levels/level5.html
index 07c1be3..ee41f95 100644
--- a/levels/level5.html
+++ b/levels/level5.html
@@ -81,6 +81,15 @@ <h2>Show Answer?</h2>
  <!-- DONE BUTTON (INSIDE POPUP) -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
+<div id="pauseOverlay" class="pause-overlay hidden"></div>
+
+<div id="pausePopup" class="pause-popup hidden">
+    <div class="pause-box">
+        <h2>⏸ Game Paused</h2>
+        <button id="resumeGameBtn" class="menu-btn">▶ Resume</button>
+    </div>
+</div>
+
 <script>
     window.currentLevel = 5;
 </script>
diff --git a/pages/pages_style/game.css b/pages/pages_style/game.css
index 7ed003f..ec18296 100644
--- a/pages/pages_style/game.css
+++ b/pages/pages_style/game.css
@@ -769,5 +769,48 @@ body {
     z-index: 5000 !important;
 }
 
+.pause-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.75);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+}
+
+.pause-popup.hidden {
+    display: none;
+}
+
+.pause-box {
+    background: #1e1e1e;
+    padding: 30px 40px;
+    border-radius: 15px;
+    text-align: center;
+    color: white;
+    border: 2px solid cyan;
+    box-shadow: 0 0 20px cyan;
+}
+
+.pause-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0,0,0,0.55); /* dimmed grey */
+    backdrop-filter: blur(3px);   /* slight blur */
+    z-index: 999;                 /* below popup, above game */
+    display: none;
+}
+
+.pause-overlay.active {
+    display: block;
+}
+
 
 
diff --git a/pages_script/game.js b/pages_script/game.js
index 481a5a2..14b85fb 100644
--- a/pages_script/game.js
+++ b/pages_script/game.js
@@ -1,6 +1,6 @@
 // ==========================================================
 //                GAME.JS — FINAL MULTI-PAGE VERSION
-//      Difficulty-aware: easy / medium / hard
+//      Difficulty-aware: easy / medium / hard + PAUSE MODE
 // ==========================================================
 
 console.log("game.js loaded");
@@ -22,6 +22,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const resetBtn      = document.getElementById("resetGameBtn");
     const submitBtn     = document.getElementById("submitAnswerBtn");
     const hintBtn       = document.getElementById("hintBtn");
+    const pauseBtn      = document.getElementById("pauseGameBtn");
 
     const levelDisplay  = document.getElementById("levelDisplay");
     const scoreDisplay  = document.getElementById("scoreDisplay");
@@ -33,28 +34,38 @@ document.addEventListener("DOMContentLoaded", () => {
     const hintCostEl    = document.getElementById("hintCost");
     const levelAnim     = document.getElementById("levelCompleteAnimation");
 
-    // ===== SHOW ANSWER POPUP =====
+    // SHOW ANSWER POPUP
     const showAnswerBtn = document.getElementById("showAnswerBtn");
     const popup         = document.getElementById("showAnswerPopup");
     const confirmBtn    = document.getElementById("confirmShowAnswer");
     const cancelBtn     = document.getElementById("cancelShowAnswer");
     const doneBtn       = document.getElementById("doneShowAnswer");
 
-    // Current page LEVEL (comes from each HTML: window.currentLevel = 1..5)
+    // PAUSE POPUP
+    const pausePopup    = document.getElementById("pausePopup");
+    const resumeBtn     = document.getElementById("resumeGameBtn");
+
+    // Current level from HTML
     let currentLevel = Number(window.currentLevel) || 1;
 
-    // Current difficulty (set on home page)
+    // Difficulty
     const difficulty = localStorage.getItem("codequestDifficulty") || "easy";
     console.log("Difficulty:", difficulty);
 
-    // 🔒 Flag: true after user has clicked "Yes, show answer"
+    // Lock after showing answer
     let answerShown = false;
 
+    // Pause state
+    let isPaused = false;
+
     // ==========================================================
     //                  LEVELS BY DIFFICULTY
     // ==========================================================
-    const levelsByDifficulty = {
-        // ---------------------- EASY ----------------------
+    // (FULL DIFFICULTY DATA UNCHANGED — keeping it exactly as you sent)
+    // ---------------- EASY + MEDIUM + HARD questions here (NOT repeating in message)
+    
+
+    const levelsByDifficulty = { 
         easy: [
             {
                 number: 1,
@@ -475,9 +486,8 @@ print(safe_divide(10, 0))`,
                     !code.includes("except:")
             }
         ]
-    };
+     };
 
-    // Pick correct level set based on difficulty
     const levels = levelsByDifficulty[difficulty] || levelsByDifficulty.easy;
 
     // ==========================================================
@@ -489,18 +499,32 @@ print(safe_divide(10, 0))`,
     let gameStarted    = false;
     let levelCompleted = false;
 
-    // Score stored per difficulty
-    const scoreKey  = `codequestScore_${difficulty}`;
-    let totalScore  = Number(localStorage.getItem(scoreKey)) || 0;
+    const scoreKey = `codequestScore_${difficulty}`;
+    let totalScore = Number(localStorage.getItem(scoreKey)) || 0;
 
-    function getHintCost() {
-        return 10 * (hintStep + 1);
-    }
+    function getHintCost() { return 10 * (hintStep + 1); }
 
     function updateHintCostUI() {
         hintCostEl.textContent = hintStep < 1 ? "" : `Cost: ${getHintCost()}`;
     }
 
+    // ==========================================================
+    //                   TIMER CONTROL (pause-safe)
+    // ==========================================================
+    function startTimer() {
+        clearInterval(timerInterval);
+        timerInterval = setInterval(() => {
+            if (!isPaused) {
+                timer--;
+                timerDisplay.textContent = `Time: ${timer}s`;
+                if (timer <= 0) {
+                    clearInterval(timerInterval);
+                    gameMessage.textContent = "⏰ Time's up!";
+                }
+            }
+        }, 1000);
+    }
+
     // ==========================================================
     //                        LOAD LEVEL
     // ==========================================================
@@ -512,44 +536,94 @@ print(safe_divide(10, 0))`,
         gameStarted    = true;
         hintStep       = 0;
         timer          = 60;
-        answerShown    = false; // reset lock when new level starts
+        answerShown    = false;
+        isPaused       = false;
 
         levelDisplay.textContent = `Level ${level.number} (${difficulty})`;
         timerDisplay.textContent = `Time: ${timer}s`;
         scoreDisplay.textContent = `Score: ${totalScore}`;
         gameMessage.textContent  = `🚀 Level ${level.number} Started!`;
 
-        codeSnippetEl.textContent      = level.snippet;
-        codeSnippetEl.contentEditable  = "true";
+        codeSnippetEl.textContent = level.snippet;
+        codeSnippetEl.contentEditable = "true";
         codeSnippetEl.style.pointerEvents = "auto";
 
         hintTextEl.classList.add("hidden");
         nextLevelBtn.classList.add("hidden");
 
-        // Ensure buttons are enabled at level start
-        [startBtn, resetBtn, submitBtn, hintBtn, nextLevelBtn, showAnswerBtn].forEach(btn => {
-            if (btn) btn.disabled = false;
-        });
-        if (doneBtn) doneBtn.classList.add("hidden");
+        // Re-enable buttons
+        [
+            startBtn, resetBtn, submitBtn, hintBtn,
+            nextLevelBtn, showAnswerBtn, pauseBtn
+        ].forEach(btn => btn && (btn.disabled = false));
+
+        doneBtn.classList.add("hidden");
 
         updateHintCostUI();
+        startTimer();
+    }
+
+   // ===== PAUSE & RESUME =====
+const pauseOverlay = document.getElementById("pauseOverlay");
+
+// PAUSE BUTTON CLICK
+if (pauseBtn && pausePopup) {
+    pauseBtn.addEventListener("click", () => {
+        if (!gameStarted) return;
+
+        isPaused = true;
 
+        // Freeze timer
         clearInterval(timerInterval);
-        timerInterval = setInterval(() => {
-            timer--;
-            timerDisplay.textContent = `Time: ${timer}s`;
-            if (timer <= 0) {
-                clearInterval(timerInterval);
-                gameMessage.textContent = "⏰ Time's up!";
-            }
-        }, 1000);
-    }
+
+        // Show popup & overlay
+        pausePopup.classList.remove("hidden");
+        pauseOverlay.classList.add("active");
+
+        // Disable buttons
+        [
+            startBtn, resetBtn, submitBtn, hintBtn,
+            nextLevelBtn, showAnswerBtn
+        ].forEach(btn => btn && (btn.disabled = true));
+
+        // Disable code editing
+        codeSnippetEl.contentEditable = "false";
+        codeSnippetEl.style.pointerEvents = "none";
+    });
+}
+
+// RESUME BUTTON CLICK
+if (resumeBtn && pausePopup) {
+    resumeBtn.addEventListener("click", () => {
+        isPaused = false;
+
+        // Hide pause UI
+        pausePopup.classList.add("hidden");
+        pauseOverlay.classList.remove("active");
+
+        // Re-enable buttons (except submit when answerShown)
+        [
+            startBtn, resetBtn, hintBtn,
+            showAnswerBtn, pauseBtn
+        ].forEach(btn => btn && (btn.disabled = false));
+
+        if (!answerShown) submitBtn.disabled = false;
+
+        // Re-enable code editing (if answer not shown)
+        if (!answerShown) {
+            codeSnippetEl.contentEditable = "true";
+            codeSnippetEl.style.pointerEvents = "auto";
+        }
+
+        // Resume timer
+        startTimer();
+    });
+}
 
     // ==========================================================
     //                        CHECK ANSWER
     // ==========================================================
     function checkAnswer() {
-        // 🔒 Prevent answering after showing the answer
         if (answerShown) {
             gameMessage.textContent = "⚠️ Submit disabled after showing the answer.";
             return;
@@ -565,7 +639,6 @@ print(safe_divide(10, 0))`,
             return;
         }
 
-        // Prevent multiple scoring on same level
         if (!levelCompleted) {
             totalScore += 50;
             localStorage.setItem(scoreKey, totalScore);
@@ -574,21 +647,18 @@ print(safe_divide(10, 0))`,
         }
 
         scoreDisplay.textContent = `Score: ${totalScore}`;
-        gameMessage.textContent  = "✅ Correct!";
-
+        gameMessage.textContent = "✅ Correct!";
         clearInterval(timerInterval);
 
-        codeSnippetEl.contentEditable   = "false";
+        codeSnippetEl.contentEditable = "false";
         codeSnippetEl.style.pointerEvents = "none";
 
         levelAnim.textContent = "🎉 LEVEL COMPLETE!";
         levelAnim.classList.remove("hidden");
-        void levelAnim.offsetWidth; // force reflow for animation
+        void levelAnim.offsetWidth;
         levelAnim.classList.add("level-complete");
 
-        setTimeout(() => {
-            levelAnim.classList.add("hidden");
-        }, 1500);
+        setTimeout(() => levelAnim.classList.add("hidden"), 1500);
 
         nextLevelBtn.classList.remove("hidden");
     }
@@ -602,22 +672,19 @@ print(safe_divide(10, 0))`,
             return;
         }
 
-        // Also block hints after showing the answer (defensive)
         if (answerShown) {
             gameMessage.textContent = "⚠️ Hints disabled after showing the answer.";
             return;
         }
 
         const level = levels[currentLevel - 1];
-        if (!level) return;
-
         const hints = level.hints;
+
         if (hintStep >= hints.length) {
             gameMessage.textContent = "⚠️ No more hints!";
             return;
         }
 
-        // Deduct score for hint
         totalScore -= getHintCost();
         localStorage.setItem(scoreKey, totalScore);
         scoreDisplay.textContent = `Score: ${totalScore}`;
@@ -630,71 +697,63 @@ print(safe_divide(10, 0))`,
     }
 
     // ==========================================================
-    //                      BUTTON HANDLERS
-    // ==========================================================
-    if (startBtn)  startBtn.addEventListener("click", () => loadLevel(currentLevel));
-    if (resetBtn)  resetBtn.addEventListener("click", () => location.reload());
-    if (submitBtn) submitBtn.addEventListener("click", checkAnswer);
-    if (hintBtn)   hintBtn.addEventListener("click", showHint);
-
-    // ==========================================================
-    //               SHOW ANSWER — UX MODE + LOCK
+    //                 SHOW ANSWER — LOCK SYSTEM
     // ==========================================================
-    if (showAnswerBtn && popup) {
+    if (showAnswerBtn) {
         showAnswerBtn.addEventListener("click", () => popup.classList.remove("hidden"));
     }
 
-    if (cancelBtn && popup) {
+    if (cancelBtn) {
         cancelBtn.addEventListener("click", () => popup.classList.add("hidden"));
     }
 
-    if (confirmBtn && popup) {
+    if (confirmBtn) {
         confirmBtn.addEventListener("click", () => {
             const levelData = levels[currentLevel - 1];
             if (!levelData) return;
 
-            // 🔒 Lock further game interactions
             answerShown = true;
 
-            // Disable all interactive buttons except Done
-            [startBtn, resetBtn, submitBtn, hintBtn, nextLevelBtn, showAnswerBtn].forEach(btn => {
-                if (btn) btn.disabled = true;
-            });
+            [
+                startBtn, resetBtn, submitBtn, hintBtn,
+                nextLevelBtn, showAnswerBtn, pauseBtn
+            ].forEach(b => b && (b.disabled = true));
 
-            // Show correct answer
             codeSnippetEl.textContent = levelData.answer;
             codeSnippetEl.style.pointerEvents = "none";
             codeSnippetEl.contentEditable = "false";
 
-            // Reset score for this difficulty when they give up
             totalScore = 0;
             localStorage.setItem(scoreKey, totalScore);
             scoreDisplay.textContent = `Score: 0`;
 
-            // Close popup, then show Done button
             popup.classList.add("hidden");
 
-            setTimeout(() => {
-                if (doneBtn) doneBtn.classList.remove("hidden");
-            }, 120);
+            setTimeout(() => doneBtn.classList.remove("hidden"), 120);
         });
     }
 
     if (doneBtn) {
         doneBtn.addEventListener("click", () => {
-            // (We don't really need to re-enable buttons since we're leaving)
             window.location.href = "level1.html";
         });
     }
+
+    // ==========================================================
+    // BUTTON HANDLERS
+    // ==========================================================
+    if (startBtn) startBtn.addEventListener("click", () => loadLevel(currentLevel));
+    if (resetBtn) resetBtn.addEventListener("click", () => location.reload());
+    if (submitBtn) submitBtn.addEventListener("click", checkAnswer);
+    if (hintBtn) hintBtn.addEventListener("click", showHint);
 });
 
 // ==========================================================
-//               NEXT LEVEL NAVIGATION
+// NEXT LEVEL
 // ==========================================================
 function goToNextLevel() {
     const next = Number(window.currentLevel) + 1;
 
-    // After Level 5 → Final Score page
     if (next > 5) {
         window.location.href = "../final_score.html";
         return;
@@ -709,7 +768,7 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 // ==========================================================
-//               PARTICLES + STARS
+// PARTICLES + STARS
 // ==========================================================
 const pixelContainer = document.querySelector(".pixel-particles");
 
@@ -718,7 +777,7 @@ if (pixelContainer) {
         const p = document.createElement("div");
         p.classList.add("pixel");
         p.style.left = Math.random() * 100 + "vw";
-        p.style.top  = Math.random() * 100 + "vh";
+        p.style.top = Math.random() * 100 + "vh";
         p.style.animationDelay = Math.random() * 5 + "s";
         pixelContainer.appendChild(p);
         setTimeout(() => p.remove(), 7000);
@@ -737,7 +796,7 @@ if (starContainer) {
         const s = document.createElement("div");
         s.classList.add("shooting-star");
         s.style.left = Math.random() * 100 + "vw";
-        s.style.top  = Math.random() * 50 + "vh";
+        s.style.top = Math.random() * 50 + "vh";
         starContainer.appendChild(s);
         setTimeout(() => s.remove(), 1400);
     }
@@ -751,10 +810,10 @@ if (starContainer) {
         star.classList.add("star");
         if (Math.random() < 0.15) star.classList.add("plus");
         star.style.left = Math.random() * 100 + "vw";
-        star.style.top  = Math.random() * 100 + "vh";
+        star.style.top = Math.random() * 100 + "vh";
         star.style.animationDelay = Math.random() * 3 + "s";
         starContainer.appendChild(star);
     }
 
     for (let i = 0; i < 200; i++) createStar();
-}
+}
\ No newline at end of file

From c237a57c2cdab968c73598db4108d75cf32ac022 Mon Sep 17 00:00:00 2001
From: Siddhi Khandelwal <your-email@example.com>
Date: Wed, 3 Dec 2025 04:21:56 +0530
Subject: [PATCH 08/24] Updating animation

---
 home_page.css | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/home_page.css b/home_page.css
index e383a66..cb2b782 100644
--- a/home_page.css
+++ b/home_page.css
@@ -273,36 +273,41 @@ footer:hover {
     }
 }
 /* Knight Pixel Character */
+/* Dust container FIXED (only one copy) */
 #dust-container {
     position: fixed;
-    bottom: 20px;
+    bottom: 0;
     left: 0;
     width: 100%;
-    height: 80px;
-    pointer-events: none;
-    z-index: 10;
-}
-
-#dust-container {
-    position: fixed;
-    left: 0;
-    top: 0;
+    height: 120px;
     pointer-events: none;
-    z-index: 10;
+    z-index: 5;
 }
 
+/* Dust particle */
 .dust {
     position: absolute;
     width: 6px;
     height: 6px;
-    background: rgba(255,255,255,0.7);
+    background: rgba(255, 255, 255, 0.8);
     border-radius: 50%;
-    animation: dustFade 0.5s ease-out forwards;
+    opacity: 1;
+    image-rendering: pixelated;
+    transform: translateY(0px) scale(1);
+
+    animation: dustFade 0.45s ease-out forwards;
 }
 
+/* Dust fade animation */
 @keyframes dustFade {
-    from { transform: scale(1); opacity: 0.9; }
-    to   { transform: scale(0.2) translateY(-12px); opacity: 0; }
+    0% {
+        opacity: 1;
+        transform: translateY(-4px) scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(-16px) scale(0.3);
+    }
 }
 /* Knight Wrapper = movement + scaling */
 .knight-wrapper {

From 25d0728f72a043fb354ed10d797c92605eaebe14 Mon Sep 17 00:00:00 2001
From: Siddhi Khandelwal <your-email@example.com>
Date: Wed, 3 Dec 2025 04:27:28 +0530
Subject: [PATCH 09/24] Updating animation

---
 home_page.js | 39 +++++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/home_page.js b/home_page.js
index 9dc7135..22161a2 100644
--- a/home_page.js
+++ b/home_page.js
@@ -133,23 +133,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
 }); // END DOMContentLoaded
 
-
-// ==========================================================
-//                    KNIGHT ANIMATION
-// ==========================================================
-
-const knight = document.querySelector(".pixel-character");
-const dustContainer = document.getElementById("dust-container");
-
-function idleSwordSwing() {
-    knight.style.animation = "knightIdleSword 0.5s steps(2) 1";
-
-    setTimeout(() => {
-        knight.style.animation =
-            "knightWalkAcross 15s linear infinite, knightSpriteWalk 0.8s steps(4) infinite";
-    }, 600);
-}
-
+// KNIGHT ANIMATION
 // Randomly swing sword every 3–6 seconds
 setInterval(() => {
     if (Math.random() < 0.4) idleSwordSwing();
@@ -170,4 +154,23 @@ setInterval(() => {
     dustContainer.appendChild(d);
 
     setTimeout(() => d.remove(), 500);
-}, 180);
\ No newline at end of file
+}, 180);
+const knightWrapper = document.querySelector(".knight-wrapper");
+const dustContainer = document.getElementById("dust-container");
+
+setInterval(() => {
+    const rect = knightWrapper.getBoundingClientRect();
+
+    const dust = document.createElement("div");
+    dust.classList.add("dust");
+
+    // Offset dust slightly inward
+    const xOffset = knightWrapper.style.transform.includes("scaleX(-1)") ? 20 : 40;
+
+    dust.style.left = rect.left + xOffset + "px";
+    dust.style.top = rect.bottom - 10 + "px";
+
+    dustContainer.appendChild(dust);
+
+    setTimeout(() => dust.remove(), 450);
+}, 150);
\ No newline at end of file

From 578157cd07c1c32565b51feef0158fa76cd5fc39 Mon Sep 17 00:00:00 2001
From: Siddhi Khandelwal <your-email@example.com>
Date: Wed, 3 Dec 2025 04:40:28 +0530
Subject: [PATCH 10/24] Updating container id

---
 home_page.html | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/home_page.html b/home_page.html
index caf6f7a..01cbcdd 100644
--- a/home_page.html
+++ b/home_page.html
@@ -19,13 +19,11 @@
     <div id="screen-transition"></div>
 
     <!-- Pixel Effects -->
-    <div class="pixel-character"></div>
-    <div id="dust-container"></div>
-
-    <!-- Knight Animation -->
     <div class="knight-wrapper">
-        <div class="knight-sprite"></div>
-    </div>
+    <div class="knight-sprite"></div>
+</div>
+
+<div id="dust-container"></div>
 
     <!-- HOME WRAPPER -->
     <div class="home-wrapper">

From f007359524d4624a4da758f5b33db783d80b25b2 Mon Sep 17 00:00:00 2001
From: Siddhi Khandelwal <your-email@example.com>
Date: Wed, 3 Dec 2025 04:54:43 +0530
Subject: [PATCH 11/24] Fixing bugs and errors

---
 home_page.css | 39 ++++++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/home_page.css b/home_page.css
index cb2b782..5bfd6d2 100644
--- a/home_page.css
+++ b/home_page.css
@@ -310,46 +310,51 @@ footer:hover {
     }
 }
 /* Knight Wrapper = movement + scaling */
+/* Knight container handles movement + direction */
 .knight-wrapper {
     position: fixed;
     bottom: 40px;
-    left: 0;
+    left: -80px;
     width: 64px;
     height: 64px;
     z-index: 20;
-    
-    /* MAKE THE KNIGHT BIGGER */
-    transform: scale(2.1);      /* change size here */
-    transform-origin: bottom left;
 
+    transform-origin: bottom left;
     animation: knightWalkAcross 14s linear infinite;
+    --scale: 2.1; /* You can change size globally here */
 }
 
-/* Knight Sprite = frame animation only */
+/* Knight sprite sheet frames */
 .knight-sprite {
     width: 64px;
     height: 64px;
 
     background: url("./assets/sprites/blue_knight.png") no-repeat;
-    background-size: 256px 64px;  /* 4 frames × 64px */
+    background-size: 256px 64px; /* 4 walking frames */
     image-rendering: pixelated;
 
-    animation: knightSpriteWalk 0.8s steps(4) infinite;
+    animation: knightWalkFrames 0.8s steps(4) infinite;
 }
 
-/* Walking frame animation */
-@keyframes knightSpriteWalk {
-    from { background-position:   0px 0; }
+/* Walking frames */
+@keyframes knightWalkFrames {
+    from { background-position: 0 0; }
     to   { background-position: -256px 0; }
 }
 
-/* Walk across screen + flip */
+/* WALK ACROSS + AUTOMATIC FLIP */
 @keyframes knightWalkAcross {
-    0%   { left: -80px; transform: scale(2.1) scaleX(1); }
-    45%  { left: calc(100% - 140px); transform: scale(2.1) scaleX(1); }
-    50%  { transform: scale(2.1) scaleX(-1); }
-    95%  { left: -80px; transform: scale(2.1) scaleX(-1); }
-    100% { transform: scale(2.1) scaleX(1); }
+    0%   { left: -80px; transform: scale(var(--scale)) scaleX(1); }
+    47%  { left: calc(100% - 160px); transform: scale(var(--scale)) scaleX(1); }
+    50%  { transform: scale(var(--scale)) scaleX(-1); }
+    97%  { left: -80px; transform: scale(var(--scale)) scaleX(-1); }
+    100% { transform: scale(var(--scale)) scaleX(1); }
+}
+
+/* Sword swing (2 frames only) */
+@keyframes knightSwordSwing {
+    from { background-position: 0 -64px; }
+    to   { background-position: -128px -64px; } /* 2 sword frames */
 }
 /* For better readability of the written content */
 .storyline {

From 4f30193466d6173ad53fec4cc4f510c02727b6d4 Mon Sep 17 00:00:00 2001
From: Siddhi Khandelwal <your-email@example.com>
Date: Wed, 3 Dec 2025 05:01:00 +0530
Subject: [PATCH 12/24] Making animations smoother

---
 home_page.js | 74 +++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 50 insertions(+), 24 deletions(-)

diff --git a/home_page.js b/home_page.js
index 22161a2..4779bd7 100644
--- a/home_page.js
+++ b/home_page.js
@@ -133,44 +133,70 @@ document.addEventListener("DOMContentLoaded", function () {
 
 }); // END DOMContentLoaded
 
-// KNIGHT ANIMATION
-// Randomly swing sword every 3–6 seconds
-setInterval(() => {
-    if (Math.random() < 0.4) idleSwordSwing();
-}, 3000);
+/* -------- KNIGHT ANIMATION SYSTEM -------- */
 
-// Dust trail behind knight
-setInterval(() => {
-    if (!knight) return;
+const knightWrapper = document.querySelector(".knight-wrapper");
+const knightSprite = document.querySelector(".knight-sprite");
+const dustContainer = document.getElementById("dust-container");
 
-    const rect = knight.getBoundingClientRect();
+let isSwinging = false;
 
-    const d = document.createElement("div");
-    d.classList.add("dust");
+/* ---- Walking animation ---- */
+function playWalking() {
+    knightSprite.style.animation =
+        "knightWalkFrames 0.8s steps(4) infinite";
+}
 
-    d.style.left = rect.left + 30 + "px";
-    d.style.top = rect.bottom - 8 + "px";
+/* ---- Sword animation ---- */
+function playSwordSwing() {
+    if (isSwinging) return; // prevent animation stacking
 
-    dustContainer.appendChild(d);
+    isSwinging = true;
 
-    setTimeout(() => d.remove(), 500);
-}, 180);
-const knightWrapper = document.querySelector(".knight-wrapper");
-const dustContainer = document.getElementById("dust-container");
+    // Play sword animation row (Y = -64px)
+    knightSprite.style.backgroundPosition = "0px -64px";
+    knightSprite.style.animation = "knightSwordSwing 0.45s steps(2) 1";
+
+    // Stop dust during swing
+    stopDust = true;
 
+    setTimeout(() => {
+        playWalking();
+        isSwinging = false;
+        stopDust = false;
+    }, 500);
+}
+
+/* ---- Random sword swings ---- */
 setInterval(() => {
-    const rect = knightWrapper.getBoundingClientRect();
+    if (Math.random() < 0.25) {
+        playSwordSwing();
+    }
+}, 3000);
+
+/* -------- DUST SYSTEM -------- */
 
+let stopDust = false;
+
+setInterval(() => {
+    if (stopDust) return; // Do NOT spawn dust while sword swinging
+
+    const rect = knightWrapper.getBoundingClientRect();
     const dust = document.createElement("div");
     dust.classList.add("dust");
 
-    // Offset dust slightly inward
-    const xOffset = knightWrapper.style.transform.includes("scaleX(-1)") ? 20 : 40;
+    // Detect direction based on scaleX
+    const goingLeft = getComputedStyle(knightWrapper).transform.includes("-1");
+
+    const xOffset = goingLeft ? 20 : 42;
 
     dust.style.left = rect.left + xOffset + "px";
-    dust.style.top = rect.bottom - 10 + "px";
+    dust.style.top = rect.bottom - 8 + "px";
 
     dustContainer.appendChild(dust);
 
-    setTimeout(() => dust.remove(), 450);
-}, 150);
\ No newline at end of file
+    setTimeout(() => dust.remove(), 460);
+}, 140);
+
+/* Start default state */
+playWalking();
\ No newline at end of file

From 49c5ba5fe290e32e4b34dbd757317b42dd2d065c Mon Sep 17 00:00:00 2001
From: Siddhi Khandelwal <your-email@example.com>
Date: Wed, 3 Dec 2025 05:03:09 +0530
Subject: [PATCH 13/24] Fixing bugs and errors

---
 home_page.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/home_page.js b/home_page.js
index 4779bd7..d47f558 100644
--- a/home_page.js
+++ b/home_page.js
@@ -12,9 +12,8 @@ document.addEventListener("DOMContentLoaded", function () {
     const levelSelect = document.getElementById("levelSelect");
     const difficultySelect = document.getElementById("difficultySelect");
 
-    /* ----------------------------------------------------
-       LOAD HIGH SCORE
-    ----------------------------------------------------- */
+    /*  LOAD HIGH SCORE */
+
     const highScore = Number(localStorage.getItem("codequestHighScore")) || 0;
     const highScoreEl = document.getElementById("highScore");
     if (highScoreEl) highScoreEl.textContent = highScore;

From 441799d78a6b9f12f9a4ca76e22a7ab18e9f2b74 Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 10:41:56 +0530
Subject: [PATCH 14/24] fixing errors

---
 levels/level1.html         |  10 ++
 levels/level2.html         |  12 +-
 levels/level3.html         |  10 ++
 levels/level4.html         |  10 ++
 levels/level5.html         |  10 ++
 pages/pages_style/game.css |  39 +++++
 pages_script/game.js       | 304 +++++++++++++++++++++++--------------
 7 files changed, 281 insertions(+), 114 deletions(-)

diff --git a/levels/level1.html b/levels/level1.html
index 3d764cb..489cee1 100644
--- a/levels/level1.html
+++ b/levels/level1.html
@@ -83,6 +83,16 @@ <h2>Show Answer?</h2>
     </div>
 </div>
 
+<!-- ===================== TIME UP POPUP ===================== -->
+<div id="timeUpPopup" class="popup-overlay hidden">
+    <div class="popup-box">
+        <h2>⏰ Time Ran Out!</h2>
+        <p>Please reset the game to try again.</p>
+
+        <button id="timeUpResetBtn" class="confirm-btn">Reset Game</button>
+    </div>
+</div>
+
 <!-- DONE button stays OUTSIDE popup -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
diff --git a/levels/level2.html b/levels/level2.html
index c3524f5..a475e8a 100644
--- a/levels/level2.html
+++ b/levels/level2.html
@@ -78,9 +78,19 @@ <h2>Show Answer?</h2>
     </div>
 </div>
 
+<!-- ===================== TIME UP POPUP ===================== -->
+<div id="timeUpPopup" class="popup-overlay hidden">
+    <div class="popup-box">
+        <h2>⏰ Time Ran Out!</h2>
+        <p>Please reset the game to try again.</p>
+
+        <button id="timeUpResetBtn" class="confirm-btn">Reset Game</button>
+    </div>
+</div>
+
         <!-- DONE BUTTON (INSIDE POPUP) -->
         <button id="doneShowAnswer" class="done-btn hidden">Done</button>
-        
+
 <div id="pauseOverlay" class="pause-overlay hidden"></div>
 <div id="pausePopup" class="pause-popup hidden">
     <div class="pause-box">
diff --git a/levels/level3.html b/levels/level3.html
index 1e6a3de..a51715d 100644
--- a/levels/level3.html
+++ b/levels/level3.html
@@ -78,6 +78,16 @@ <h2>Show Answer?</h2>
     </div>
 </div>
 
+<!-- ===================== TIME UP POPUP ===================== -->
+<div id="timeUpPopup" class="popup-overlay hidden">
+    <div class="popup-box">
+        <h2>⏰ Time Ran Out!</h2>
+        <p>Please reset the game to try again.</p>
+
+        <button id="timeUpResetBtn" class="confirm-btn">Reset Game</button>
+    </div>
+</div>
+
  <!-- DONE BUTTON (INSIDE POPUP) -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
diff --git a/levels/level4.html b/levels/level4.html
index 8c7cc60..a9546ca 100644
--- a/levels/level4.html
+++ b/levels/level4.html
@@ -78,6 +78,16 @@ <h2>Show Answer?</h2>
     </div>
 </div>
 
+<!-- ===================== TIME UP POPUP ===================== -->
+<div id="timeUpPopup" class="popup-overlay hidden">
+    <div class="popup-box">
+        <h2>⏰ Time Ran Out!</h2>
+        <p>Please reset the game to try again.</p>
+
+        <button id="timeUpResetBtn" class="confirm-btn">Reset Game</button>
+    </div>
+</div>
+
  <!-- DONE BUTTON (INSIDE POPUP) -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
diff --git a/levels/level5.html b/levels/level5.html
index ee41f95..dc8816a 100644
--- a/levels/level5.html
+++ b/levels/level5.html
@@ -78,6 +78,16 @@ <h2>Show Answer?</h2>
     </div>
 </div>
 
+<!-- ===================== TIME UP POPUP ===================== -->
+<div id="timeUpPopup" class="popup-overlay hidden">
+    <div class="popup-box">
+        <h2>⏰ Time Ran Out!</h2>
+        <p>Please reset the game to try again.</p>
+
+        <button id="timeUpResetBtn" class="confirm-btn">Reset Game</button>
+    </div>
+</div>
+
  <!-- DONE BUTTON (INSIDE POPUP) -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
diff --git a/pages/pages_style/game.css b/pages/pages_style/game.css
index ec18296..5922b30 100644
--- a/pages/pages_style/game.css
+++ b/pages/pages_style/game.css
@@ -812,5 +812,44 @@ body {
     display: block;
 }
 
+.time-up-overlay::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.55);
+    backdrop-filter: blur(2px);
+    z-index: 999;
+    pointer-events: none;
+}
+/* Full-screen blur when time is up */
+.time-up-blur {
+    filter: blur(5px);
+    pointer-events: none;
+}
 
+/* Popup overlay */
+#timeUpPopup.popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0,0,0,0.7);
+    backdrop-filter: blur(4px);
+    z-index: 9999;
+}
 
+.popup-box {
+    background: #111;
+    padding: 25px 30px;
+    border-radius: 12px;
+    text-align: center;
+    border: 2px solid #0f0;
+    box-shadow: 0 0 20px #0f0;
+}
\ No newline at end of file
diff --git a/pages_script/game.js b/pages_script/game.js
index 14b85fb..d83b6e3 100644
--- a/pages_script/game.js
+++ b/pages_script/game.js
@@ -1,6 +1,6 @@
 // ==========================================================
 //                GAME.JS — FINAL MULTI-PAGE VERSION
-//      Difficulty-aware: easy / medium / hard + PAUSE MODE
+//      Difficulty-aware: easy / medium / hard
 // ==========================================================
 
 console.log("game.js loaded");
@@ -34,38 +34,42 @@ document.addEventListener("DOMContentLoaded", () => {
     const hintCostEl    = document.getElementById("hintCost");
     const levelAnim     = document.getElementById("levelCompleteAnimation");
 
-    // SHOW ANSWER POPUP
+    const gameContainer = document.querySelector(".game-container");
+
+    // ===== SHOW ANSWER POPUP =====
     const showAnswerBtn = document.getElementById("showAnswerBtn");
     const popup         = document.getElementById("showAnswerPopup");
     const confirmBtn    = document.getElementById("confirmShowAnswer");
     const cancelBtn     = document.getElementById("cancelShowAnswer");
     const doneBtn       = document.getElementById("doneShowAnswer");
 
-    // PAUSE POPUP
-    const pausePopup    = document.getElementById("pausePopup");
+    // ===== PAUSE POPUP =====
+    const pauseOverlay  = document.getElementById("pauseOverlay");
     const resumeBtn     = document.getElementById("resumeGameBtn");
 
-    // Current level from HTML
+    // ===== TIME UP POPUP =====
+    const timeUpPopup     = document.getElementById("timeUpPopup");
+    const timeUpResetBtn  = document.getElementById("timeUpResetBtn");
+
+    // Current page LEVEL (comes from each HTML: window.currentLevel = 1..5)
     let currentLevel = Number(window.currentLevel) || 1;
 
-    // Difficulty
+    // Current difficulty (set on home page)
     const difficulty = localStorage.getItem("codequestDifficulty") || "easy";
     console.log("Difficulty:", difficulty);
 
-    // Lock after showing answer
+    // 🔒 Flag: true after user has clicked "Yes, show answer"
     let answerShown = false;
 
-    // Pause state
+    // Pause / time flags
     let isPaused = false;
+    let isTimeUp = false;
 
     // ==========================================================
     //                  LEVELS BY DIFFICULTY
     // ==========================================================
-    // (FULL DIFFICULTY DATA UNCHANGED — keeping it exactly as you sent)
-    // ---------------- EASY + MEDIUM + HARD questions here (NOT repeating in message)
-    
-
-    const levelsByDifficulty = { 
+    const levelsByDifficulty = {
+        // ---------------------- EASY ----------------------
         easy: [
             {
                 number: 1,
@@ -486,8 +490,9 @@ print(safe_divide(10, 0))`,
                     !code.includes("except:")
             }
         ]
-     };
+    };
 
+    // Pick correct level set based on difficulty
     const levels = levelsByDifficulty[difficulty] || levelsByDifficulty.easy;
 
     // ==========================================================
@@ -499,30 +504,23 @@ print(safe_divide(10, 0))`,
     let gameStarted    = false;
     let levelCompleted = false;
 
-    const scoreKey = `codequestScore_${difficulty}`;
-    let totalScore = Number(localStorage.getItem(scoreKey)) || 0;
+    // Score stored per difficulty
+    const scoreKey  = `codequestScore_${difficulty}`;
+    let totalScore  = Number(localStorage.getItem(scoreKey)) || 0;
 
-    function getHintCost() { return 10 * (hintStep + 1); }
+    function getHintCost() {
+        return 10 * (hintStep + 1);
+    }
 
     function updateHintCostUI() {
         hintCostEl.textContent = hintStep < 1 ? "" : `Cost: ${getHintCost()}`;
     }
 
-    // ==========================================================
-    //                   TIMER CONTROL (pause-safe)
-    // ==========================================================
-    function startTimer() {
-        clearInterval(timerInterval);
-        timerInterval = setInterval(() => {
-            if (!isPaused) {
-                timer--;
-                timerDisplay.textContent = `Time: ${timer}s`;
-                if (timer <= 0) {
-                    clearInterval(timerInterval);
-                    gameMessage.textContent = "⏰ Time's up!";
-                }
-            }
-        }, 1000);
+    // Helper to disable/enable all main controls
+    function setControlsDisabled(disabled) {
+        [startBtn, submitBtn, hintBtn, showAnswerBtn, nextLevelBtn, pauseBtn].forEach(btn => {
+            if (btn) btn.disabled = disabled;
+        });
     }
 
     // ==========================================================
@@ -538,92 +536,103 @@ print(safe_divide(10, 0))`,
         timer          = 60;
         answerShown    = false;
         isPaused       = false;
+        isTimeUp       = false;
 
         levelDisplay.textContent = `Level ${level.number} (${difficulty})`;
         timerDisplay.textContent = `Time: ${timer}s`;
         scoreDisplay.textContent = `Score: ${totalScore}`;
         gameMessage.textContent  = `🚀 Level ${level.number} Started!`;
 
-        codeSnippetEl.textContent = level.snippet;
-        codeSnippetEl.contentEditable = "true";
+        codeSnippetEl.textContent      = level.snippet;
+        codeSnippetEl.contentEditable  = "true";
         codeSnippetEl.style.pointerEvents = "auto";
 
         hintTextEl.classList.add("hidden");
         nextLevelBtn.classList.add("hidden");
 
-        // Re-enable buttons
-        [
-            startBtn, resetBtn, submitBtn, hintBtn,
-            nextLevelBtn, showAnswerBtn, pauseBtn
-        ].forEach(btn => btn && (btn.disabled = false));
+        if (gameContainer) gameContainer.classList.remove("paused-blur", "time-up-blur");
+        if (pauseOverlay) pauseOverlay.classList.add("hidden");
+        if (timeUpPopup) timeUpPopup.classList.add("hidden");
+        if (doneBtn) doneBtn.classList.add("hidden");
 
-        doneBtn.classList.add("hidden");
+        setControlsDisabled(false);
+        if (resetBtn) resetBtn.disabled = false;
 
         updateHintCostUI();
-        startTimer();
-    }
-
-   // ===== PAUSE & RESUME =====
-const pauseOverlay = document.getElementById("pauseOverlay");
-
-// PAUSE BUTTON CLICK
-if (pauseBtn && pausePopup) {
-    pauseBtn.addEventListener("click", () => {
-        if (!gameStarted) return;
 
-        isPaused = true;
-
-        // Freeze timer
         clearInterval(timerInterval);
+        timerInterval = setInterval(() => {
+            if (isPaused || isTimeUp) return;
+
+            timer--;
+            timerDisplay.textContent = `Time: ${timer}s`;
 
-        // Show popup & overlay
-        pausePopup.classList.remove("hidden");
-        pauseOverlay.classList.add("active");
+            if (timer <= 0) {
+                clearInterval(timerInterval);
+                handleTimeUp();
+            }
+        }, 1000);
+    }
 
-        // Disable buttons
-        [
-            startBtn, resetBtn, submitBtn, hintBtn,
-            nextLevelBtn, showAnswerBtn
-        ].forEach(btn => btn && (btn.disabled = true));
+    // ==========================================================
+    //                   TIME UP HANDLER
+    // ==========================================================
+    function handleTimeUp() {
+        isTimeUp = true;
+        gameMessage.textContent = "⏰ Time's up!";
 
-        // Disable code editing
+        // Lock editing
         codeSnippetEl.contentEditable = "false";
         codeSnippetEl.style.pointerEvents = "none";
-    });
-}
 
-// RESUME BUTTON CLICK
-if (resumeBtn && pausePopup) {
-    resumeBtn.addEventListener("click", () => {
-        isPaused = false;
+        // Disable all controls
+        setControlsDisabled(true);
 
-        // Hide pause UI
-        pausePopup.classList.add("hidden");
-        pauseOverlay.classList.remove("active");
+        // Keep Reset enabled
+        if (resetBtn) resetBtn.disabled = false;
 
-        // Re-enable buttons (except submit when answerShown)
-        [
-            startBtn, resetBtn, hintBtn,
-            showAnswerBtn, pauseBtn
-        ].forEach(btn => btn && (btn.disabled = false));
+        // Blur game area
+        if (gameContainer) gameContainer.classList.add("time-up-blur");
 
-        if (!answerShown) submitBtn.disabled = false;
+        // Show Time Up popup
+        if (timeUpPopup) timeUpPopup.classList.remove("hidden");
+    }
 
-        // Re-enable code editing (if answer not shown)
-        if (!answerShown) {
-            codeSnippetEl.contentEditable = "true";
-            codeSnippetEl.style.pointerEvents = "auto";
-        }
+    // ==========================================================
+    //                        RESET GAME
+    // ==========================================================
+    function resetGame() {
+        // Clear timers and flags
+        clearInterval(timerInterval);
+        timer         = 60;
+        hintStep      = 0;
+        answerShown   = false;
+        isPaused      = false;
+        isTimeUp      = false;
+        levelCompleted = false;
 
-        // Resume timer
-        startTimer();
-    });
-}
+        // Remove blur / overlays
+        if (gameContainer) gameContainer.classList.remove("paused-blur", "time-up-blur");
+        if (pauseOverlay) pauseOverlay.classList.add("hidden");
+        if (timeUpPopup) timeUpPopup.classList.add("hidden");
+        if (doneBtn) doneBtn.classList.add("hidden");
+
+        // Reload the current level cleanly
+        loadLevel(currentLevel);
+    }
 
     // ==========================================================
     //                        CHECK ANSWER
     // ==========================================================
     function checkAnswer() {
+        if (isPaused || isTimeUp) {
+            gameMessage.textContent = isTimeUp
+                ? "⏰ Time's up — reset to try again."
+                : "⏸️ Game is paused — resume to continue.";
+            return;
+        }
+
+        // 🔒 Prevent answering after showing the answer
         if (answerShown) {
             gameMessage.textContent = "⚠️ Submit disabled after showing the answer.";
             return;
@@ -639,6 +648,7 @@ if (resumeBtn && pausePopup) {
             return;
         }
 
+        // Prevent multiple scoring on same level
         if (!levelCompleted) {
             totalScore += 50;
             localStorage.setItem(scoreKey, totalScore);
@@ -647,18 +657,21 @@ if (resumeBtn && pausePopup) {
         }
 
         scoreDisplay.textContent = `Score: ${totalScore}`;
-        gameMessage.textContent = "✅ Correct!";
+        gameMessage.textContent  = "✅ Correct!";
+
         clearInterval(timerInterval);
 
-        codeSnippetEl.contentEditable = "false";
+        codeSnippetEl.contentEditable   = "false";
         codeSnippetEl.style.pointerEvents = "none";
 
         levelAnim.textContent = "🎉 LEVEL COMPLETE!";
         levelAnim.classList.remove("hidden");
-        void levelAnim.offsetWidth;
+        void levelAnim.offsetWidth; // force reflow for animation
         levelAnim.classList.add("level-complete");
 
-        setTimeout(() => levelAnim.classList.add("hidden"), 1500);
+        setTimeout(() => {
+            levelAnim.classList.add("hidden");
+        }, 1500);
 
         nextLevelBtn.classList.remove("hidden");
     }
@@ -672,19 +685,28 @@ if (resumeBtn && pausePopup) {
             return;
         }
 
+        if (isPaused || isTimeUp) {
+            gameMessage.textContent = isTimeUp
+                ? "⏰ Time's up — hints disabled."
+                : "⏸️ Game is paused — resume to continue.";
+            return;
+        }
+
         if (answerShown) {
             gameMessage.textContent = "⚠️ Hints disabled after showing the answer.";
             return;
         }
 
         const level = levels[currentLevel - 1];
-        const hints = level.hints;
+        if (!level) return;
 
+        const hints = level.hints;
         if (hintStep >= hints.length) {
             gameMessage.textContent = "⚠️ No more hints!";
             return;
         }
 
+        // Deduct score for hint
         totalScore -= getHintCost();
         localStorage.setItem(scoreKey, totalScore);
         scoreDisplay.textContent = `Score: ${totalScore}`;
@@ -697,39 +719,95 @@ if (resumeBtn && pausePopup) {
     }
 
     // ==========================================================
-    //                 SHOW ANSWER — LOCK SYSTEM
+    //                        PAUSE / RESUME
+    // ==========================================================
+    function pauseGame() {
+        if (!gameStarted || isTimeUp) return;
+        if (isPaused) return;
+
+        isPaused = true;
+        if (gameContainer) gameContainer.classList.add("paused-blur");
+        if (pauseOverlay) pauseOverlay.classList.remove("hidden");
+
+        // Lock editing while paused
+        codeSnippetEl.style.pointerEvents = "none";
+
+        setControlsDisabled(true);
+        if (resetBtn) resetBtn.disabled = false; // still allow reset
+    }
+
+    function resumeGame() {
+        if (!isPaused || isTimeUp) return;
+        isPaused = false;
+
+        if (gameContainer) gameContainer.classList.remove("paused-blur");
+        if (pauseOverlay) pauseOverlay.classList.add("hidden");
+
+        // Re-enable editing only if answer not shown and level not complete
+        if (!answerShown && !levelCompleted) {
+            codeSnippetEl.style.pointerEvents = "auto";
+            codeSnippetEl.contentEditable = "true";
+        }
+
+        setControlsDisabled(false);
+        if (nextLevelBtn && levelCompleted) nextLevelBtn.disabled = false;
+    }
+
+    // ==========================================================
+    //                      BUTTON HANDLERS
     // ==========================================================
-    if (showAnswerBtn) {
-        showAnswerBtn.addEventListener("click", () => popup.classList.remove("hidden"));
+    if (startBtn)  startBtn.addEventListener("click", () => loadLevel(currentLevel));
+    if (resetBtn)  resetBtn.addEventListener("click", resetGame);
+    if (submitBtn) submitBtn.addEventListener("click", checkAnswer);
+    if (hintBtn)   hintBtn.addEventListener("click", showHint);
+    if (pauseBtn)  pauseBtn.addEventListener("click", pauseGame);
+    if (resumeBtn) resumeBtn.addEventListener("click", resumeGame);
+
+    // ==========================================================
+    //               SHOW ANSWER — UX MODE + LOCK
+    // ==========================================================
+    if (showAnswerBtn && popup) {
+        showAnswerBtn.addEventListener("click", () => {
+            if (isTimeUp) {
+                gameMessage.textContent = "⏰ Time's up — reset to see the answer again.";
+                return;
+            }
+            popup.classList.remove("hidden");
+        });
     }
 
-    if (cancelBtn) {
+    if (cancelBtn && popup) {
         cancelBtn.addEventListener("click", () => popup.classList.add("hidden"));
     }
 
-    if (confirmBtn) {
+    if (confirmBtn && popup) {
         confirmBtn.addEventListener("click", () => {
             const levelData = levels[currentLevel - 1];
             if (!levelData) return;
 
+            // 🔒 Lock further game interactions
             answerShown = true;
 
-            [
-                startBtn, resetBtn, submitBtn, hintBtn,
-                nextLevelBtn, showAnswerBtn, pauseBtn
-            ].forEach(b => b && (b.disabled = true));
+            // Disable all interactive buttons except Reset & Done
+            setControlsDisabled(true);
+            if (resetBtn) resetBtn.disabled = false;
 
+            // Show correct answer
             codeSnippetEl.textContent = levelData.answer;
             codeSnippetEl.style.pointerEvents = "none";
             codeSnippetEl.contentEditable = "false";
 
+            // Reset score for this difficulty when they give up
             totalScore = 0;
             localStorage.setItem(scoreKey, totalScore);
             scoreDisplay.textContent = `Score: 0`;
 
+            // Close popup, then show Done button
             popup.classList.add("hidden");
 
-            setTimeout(() => doneBtn.classList.remove("hidden"), 120);
+            setTimeout(() => {
+                if (doneBtn) doneBtn.classList.remove("hidden");
+            }, 120);
         });
     }
 
@@ -739,21 +817,21 @@ if (resumeBtn && pausePopup) {
         });
     }
 
-    // ==========================================================
-    // BUTTON HANDLERS
-    // ==========================================================
-    if (startBtn) startBtn.addEventListener("click", () => loadLevel(currentLevel));
-    if (resetBtn) resetBtn.addEventListener("click", () => location.reload());
-    if (submitBtn) submitBtn.addEventListener("click", checkAnswer);
-    if (hintBtn) hintBtn.addEventListener("click", showHint);
+    // ======================================================
+    //             TIME UP POPUP RESET HANDLER
+    // ======================================================
+    if (timeUpResetBtn) {
+        timeUpResetBtn.addEventListener("click", resetGame);
+    }
 });
 
 // ==========================================================
-// NEXT LEVEL
+//               NEXT LEVEL NAVIGATION
 // ==========================================================
 function goToNextLevel() {
     const next = Number(window.currentLevel) + 1;
 
+    // After Level 5 → Final Score page
     if (next > 5) {
         window.location.href = "../final_score.html";
         return;
@@ -768,7 +846,7 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 // ==========================================================
-// PARTICLES + STARS
+//               PARTICLES + STARS
 // ==========================================================
 const pixelContainer = document.querySelector(".pixel-particles");
 
@@ -777,7 +855,7 @@ if (pixelContainer) {
         const p = document.createElement("div");
         p.classList.add("pixel");
         p.style.left = Math.random() * 100 + "vw";
-        p.style.top = Math.random() * 100 + "vh";
+        p.style.top  = Math.random() * 100 + "vh";
         p.style.animationDelay = Math.random() * 5 + "s";
         pixelContainer.appendChild(p);
         setTimeout(() => p.remove(), 7000);
@@ -796,7 +874,7 @@ if (starContainer) {
         const s = document.createElement("div");
         s.classList.add("shooting-star");
         s.style.left = Math.random() * 100 + "vw";
-        s.style.top = Math.random() * 50 + "vh";
+        s.style.top  = Math.random() * 50 + "vh";
         starContainer.appendChild(s);
         setTimeout(() => s.remove(), 1400);
     }
@@ -810,7 +888,7 @@ if (starContainer) {
         star.classList.add("star");
         if (Math.random() < 0.15) star.classList.add("plus");
         star.style.left = Math.random() * 100 + "vw";
-        star.style.top = Math.random() * 100 + "vh";
+        star.style.top  = Math.random() * 100 + "vh";
         star.style.animationDelay = Math.random() * 3 + "s";
         starContainer.appendChild(star);
     }

From 0e918f94e6d3dd2d151eaab759f61ae5aadd47cf Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 15:56:00 +0530
Subject: [PATCH 15/24] fixed reset game error

---
 levels/level1.html   | 10 ----------
 levels/level2.html   | 10 ----------
 levels/level3.html   | 10 ----------
 levels/level4.html   | 10 ----------
 levels/level5.html   | 10 ----------
 pages_script/game.js |  9 ---------
 6 files changed, 59 deletions(-)

diff --git a/levels/level1.html b/levels/level1.html
index 489cee1..3d764cb 100644
--- a/levels/level1.html
+++ b/levels/level1.html
@@ -83,16 +83,6 @@ <h2>Show Answer?</h2>
     </div>
 </div>
 
-<!-- ===================== TIME UP POPUP ===================== -->
-<div id="timeUpPopup" class="popup-overlay hidden">
-    <div class="popup-box">
-        <h2>⏰ Time Ran Out!</h2>
-        <p>Please reset the game to try again.</p>
-
-        <button id="timeUpResetBtn" class="confirm-btn">Reset Game</button>
-    </div>
-</div>
-
 <!-- DONE button stays OUTSIDE popup -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
diff --git a/levels/level2.html b/levels/level2.html
index a475e8a..8f8c648 100644
--- a/levels/level2.html
+++ b/levels/level2.html
@@ -78,16 +78,6 @@ <h2>Show Answer?</h2>
     </div>
 </div>
 
-<!-- ===================== TIME UP POPUP ===================== -->
-<div id="timeUpPopup" class="popup-overlay hidden">
-    <div class="popup-box">
-        <h2>⏰ Time Ran Out!</h2>
-        <p>Please reset the game to try again.</p>
-
-        <button id="timeUpResetBtn" class="confirm-btn">Reset Game</button>
-    </div>
-</div>
-
         <!-- DONE BUTTON (INSIDE POPUP) -->
         <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
diff --git a/levels/level3.html b/levels/level3.html
index a51715d..1e6a3de 100644
--- a/levels/level3.html
+++ b/levels/level3.html
@@ -78,16 +78,6 @@ <h2>Show Answer?</h2>
     </div>
 </div>
 
-<!-- ===================== TIME UP POPUP ===================== -->
-<div id="timeUpPopup" class="popup-overlay hidden">
-    <div class="popup-box">
-        <h2>⏰ Time Ran Out!</h2>
-        <p>Please reset the game to try again.</p>
-
-        <button id="timeUpResetBtn" class="confirm-btn">Reset Game</button>
-    </div>
-</div>
-
  <!-- DONE BUTTON (INSIDE POPUP) -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
diff --git a/levels/level4.html b/levels/level4.html
index a9546ca..8c7cc60 100644
--- a/levels/level4.html
+++ b/levels/level4.html
@@ -78,16 +78,6 @@ <h2>Show Answer?</h2>
     </div>
 </div>
 
-<!-- ===================== TIME UP POPUP ===================== -->
-<div id="timeUpPopup" class="popup-overlay hidden">
-    <div class="popup-box">
-        <h2>⏰ Time Ran Out!</h2>
-        <p>Please reset the game to try again.</p>
-
-        <button id="timeUpResetBtn" class="confirm-btn">Reset Game</button>
-    </div>
-</div>
-
  <!-- DONE BUTTON (INSIDE POPUP) -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
diff --git a/levels/level5.html b/levels/level5.html
index dc8816a..ee41f95 100644
--- a/levels/level5.html
+++ b/levels/level5.html
@@ -78,16 +78,6 @@ <h2>Show Answer?</h2>
     </div>
 </div>
 
-<!-- ===================== TIME UP POPUP ===================== -->
-<div id="timeUpPopup" class="popup-overlay hidden">
-    <div class="popup-box">
-        <h2>⏰ Time Ran Out!</h2>
-        <p>Please reset the game to try again.</p>
-
-        <button id="timeUpResetBtn" class="confirm-btn">Reset Game</button>
-    </div>
-</div>
-
  <!-- DONE BUTTON (INSIDE POPUP) -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
diff --git a/pages_script/game.js b/pages_script/game.js
index d83b6e3..3842ea3 100644
--- a/pages_script/game.js
+++ b/pages_script/game.js
@@ -47,10 +47,6 @@ document.addEventListener("DOMContentLoaded", () => {
     const pauseOverlay  = document.getElementById("pauseOverlay");
     const resumeBtn     = document.getElementById("resumeGameBtn");
 
-    // ===== TIME UP POPUP =====
-    const timeUpPopup     = document.getElementById("timeUpPopup");
-    const timeUpResetBtn  = document.getElementById("timeUpResetBtn");
-
     // Current page LEVEL (comes from each HTML: window.currentLevel = 1..5)
     let currentLevel = Number(window.currentLevel) || 1;
 
@@ -552,7 +548,6 @@ print(safe_divide(10, 0))`,
 
         if (gameContainer) gameContainer.classList.remove("paused-blur", "time-up-blur");
         if (pauseOverlay) pauseOverlay.classList.add("hidden");
-        if (timeUpPopup) timeUpPopup.classList.add("hidden");
         if (doneBtn) doneBtn.classList.add("hidden");
 
         setControlsDisabled(false);
@@ -593,9 +588,6 @@ print(safe_divide(10, 0))`,
 
         // Blur game area
         if (gameContainer) gameContainer.classList.add("time-up-blur");
-
-        // Show Time Up popup
-        if (timeUpPopup) timeUpPopup.classList.remove("hidden");
     }
 
     // ==========================================================
@@ -614,7 +606,6 @@ print(safe_divide(10, 0))`,
         // Remove blur / overlays
         if (gameContainer) gameContainer.classList.remove("paused-blur", "time-up-blur");
         if (pauseOverlay) pauseOverlay.classList.add("hidden");
-        if (timeUpPopup) timeUpPopup.classList.add("hidden");
         if (doneBtn) doneBtn.classList.add("hidden");
 
         // Reload the current level cleanly

From bc60a880801db13061ea7be9d3e45b58c82e63a0 Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 17:57:22 +0530
Subject: [PATCH 16/24] added time out pop up

---
 levels/level1.html         | 26 +++++++++++---
 levels/level2.html         | 27 +++++++++++---
 levels/level3.html         | 28 ++++++++++++---
 levels/level4.html         | 28 ++++++++++++---
 levels/level5.html         | 28 ++++++++++++---
 pages/pages_style/game.css | 74 +++++++++++++++++++++++++++-----------
 pages_script/game.js       | 37 +++++++++++++++----
 7 files changed, 198 insertions(+), 50 deletions(-)

diff --git a/levels/level1.html b/levels/level1.html
index 3d764cb..310fa7c 100644
--- a/levels/level1.html
+++ b/levels/level1.html
@@ -91,11 +91,29 @@ <h2>Show Answer?</h2>
                      PAUSE POPUP
 ========================================================== -->
 
-<div id="pauseOverlay" class="pause-overlay hidden"></div>
-<div id="pausePopup" class="pause-popup hidden">
-    <div class="pause-box">
+<div id="pausePopup" class="popup-overlay hidden">
+    <div class="popup-box">
         <h2>⏸ Game Paused</h2>
-        <button id="resumeGameBtn" class="menu-btn">▶ Resume</button>
+        <p>Resume to continue playing.</p>
+
+        <div class="popup-buttons">
+            <button id="resumeGameBtn" class="confirm-btn">▶ Resume</button>
+        </div>
+    </div>
+</div>
+
+<!-- ==========================================================
+                     TIME UP POPUP
+========================================================== -->
+
+<div id="timeUpPopup" class="popup-overlay hidden">
+    <div class="popup-box">
+        <h2>⏰ Time's Up!</h2>
+        <p>You ran out of time. Try again from Level 1.</p>
+
+        <div class="popup-buttons">
+            <button id="timeUpResetBtn" class="confirm-btn">Try Again</button>
+        </div>
     </div>
 </div>
 
diff --git a/levels/level2.html b/levels/level2.html
index 8f8c648..0f103f5 100644
--- a/levels/level2.html
+++ b/levels/level2.html
@@ -55,6 +55,7 @@ <h1>Level 2</h1>
     <section class="game-controls">
         <button id="startGameBtn">Start Game</button>
         <button id="resetGameBtn">Reset Game</button>
+        <button id="pauseGameBtn">⏸ Pause</button>
         <button id="showAnswerBtn" class="show-answer-btn">Show Answer</button>
     </section>
 
@@ -81,11 +82,29 @@ <h2>Show Answer?</h2>
         <!-- DONE BUTTON (INSIDE POPUP) -->
         <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
-<div id="pauseOverlay" class="pause-overlay hidden"></div>
-<div id="pausePopup" class="pause-popup hidden">
-    <div class="pause-box">
+<div id="pausePopup" class="popup-overlay hidden">
+    <div class="popup-box">
         <h2>⏸ Game Paused</h2>
-        <button id="resumeGameBtn" class="menu-btn">▶ Resume</button>
+        <p>Resume to continue playing.</p>
+
+        <div class="popup-buttons">
+            <button id="resumeGameBtn" class="confirm-btn">▶ Resume</button>
+        </div>
+    </div>
+</div>
+
+<!-- ==========================================================
+                     TIME UP POPUP
+========================================================== -->
+
+<div id="timeUpPopup" class="popup-overlay hidden">
+    <div class="popup-box">
+        <h2>⏰ Time's Up!</h2>
+        <p>You ran out of time. Try again from Level 1.</p>
+
+        <div class="popup-buttons">
+            <button id="timeUpResetBtn" class="confirm-btn">Try Again</button>
+        </div>
     </div>
 </div>
 
diff --git a/levels/level3.html b/levels/level3.html
index 1e6a3de..896b763 100644
--- a/levels/level3.html
+++ b/levels/level3.html
@@ -55,6 +55,7 @@ <h1>Level 3</h1>
     <section class="game-controls">
         <button id="startGameBtn">Start Game</button>
         <button id="resetGameBtn">Reset Game</button>
+        <button id="pauseGameBtn">⏸ Pause</button>
         <button id="showAnswerBtn" class="show-answer-btn">Show Answer</button>
     </section>
 
@@ -81,12 +82,29 @@ <h2>Show Answer?</h2>
  <!-- DONE BUTTON (INSIDE POPUP) -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
-<div id="pauseOverlay" class="pause-overlay hidden"></div>
-
-<div id="pausePopup" class="pause-popup hidden">
-    <div class="pause-box">
+<div id="pausePopup" class="popup-overlay hidden">
+    <div class="popup-box">
         <h2>⏸ Game Paused</h2>
-        <button id="resumeGameBtn" class="menu-btn">▶ Resume</button>
+        <p>Resume to continue playing.</p>
+
+        <div class="popup-buttons">
+            <button id="resumeGameBtn" class="confirm-btn">▶ Resume</button>
+        </div>
+    </div>
+</div>
+
+<!-- ==========================================================
+                     TIME UP POPUP
+========================================================== -->
+
+<div id="timeUpPopup" class="popup-overlay hidden">
+    <div class="popup-box">
+        <h2>⏰ Time's Up!</h2>
+        <p>You ran out of time. Try again from Level 1.</p>
+
+        <div class="popup-buttons">
+            <button id="timeUpResetBtn" class="confirm-btn">Try Again</button>
+        </div>
     </div>
 </div>
 
diff --git a/levels/level4.html b/levels/level4.html
index 8c7cc60..046369c 100644
--- a/levels/level4.html
+++ b/levels/level4.html
@@ -55,6 +55,7 @@ <h1>Level 4</h1>
     <section class="game-controls">
         <button id="startGameBtn">Start Game</button>
         <button id="resetGameBtn">Reset Game</button>
+        <button id="pauseGameBtn">⏸ Pause</button>
         <button id="showAnswerBtn" class="show-answer-btn">Show Answer</button>
     </section>
 
@@ -81,12 +82,29 @@ <h2>Show Answer?</h2>
  <!-- DONE BUTTON (INSIDE POPUP) -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
-<div id="pauseOverlay" class="pause-overlay hidden"></div>
-
-<div id="pausePopup" class="pause-popup hidden">
-    <div class="pause-box">
+<div id="pausePopup" class="popup-overlay hidden">
+    <div class="popup-box">
         <h2>⏸ Game Paused</h2>
-        <button id="resumeGameBtn" class="menu-btn">▶ Resume</button>
+        <p>Resume to continue playing.</p>
+
+        <div class="popup-buttons">
+            <button id="resumeGameBtn" class="confirm-btn">▶ Resume</button>
+        </div>
+    </div>
+</div>
+
+<!-- ==========================================================
+                     TIME UP POPUP
+========================================================== -->
+
+<div id="timeUpPopup" class="popup-overlay hidden">
+    <div class="popup-box">
+        <h2>⏰ Time's Up!</h2>
+        <p>You ran out of time. Try again from Level 1.</p>
+
+        <div class="popup-buttons">
+            <button id="timeUpResetBtn" class="confirm-btn">Try Again</button>
+        </div>
     </div>
 </div>
 
diff --git a/levels/level5.html b/levels/level5.html
index ee41f95..9a39caf 100644
--- a/levels/level5.html
+++ b/levels/level5.html
@@ -55,6 +55,7 @@ <h1>Level 5</h1>
     <section class="game-controls">
         <button id="startGameBtn">Start Game</button>
         <button id="resetGameBtn">Reset Game</button>
+        <button id="pauseGameBtn">⏸ Pause</button>
         <button id="showAnswerBtn" class="show-answer-btn">Show Answer</button>
     </section>
 
@@ -81,12 +82,29 @@ <h2>Show Answer?</h2>
  <!-- DONE BUTTON (INSIDE POPUP) -->
 <button id="doneShowAnswer" class="done-btn hidden">Done</button>
 
-<div id="pauseOverlay" class="pause-overlay hidden"></div>
-
-<div id="pausePopup" class="pause-popup hidden">
-    <div class="pause-box">
+<div id="pausePopup" class="popup-overlay hidden">
+    <div class="popup-box">
         <h2>⏸ Game Paused</h2>
-        <button id="resumeGameBtn" class="menu-btn">▶ Resume</button>
+        <p>Resume to continue playing.</p>
+
+        <div class="popup-buttons">
+            <button id="resumeGameBtn" class="confirm-btn">▶ Resume</button>
+        </div>
+    </div>
+</div>
+
+<!-- ==========================================================
+                     TIME UP POPUP
+========================================================== -->
+
+<div id="timeUpPopup" class="popup-overlay hidden">
+    <div class="popup-box">
+        <h2>⏰ Time's Up!</h2>
+        <p>You ran out of time. Try again from Level 1.</p>
+
+        <div class="popup-buttons">
+            <button id="timeUpResetBtn" class="confirm-btn">Try Again</button>
+        </div>
     </div>
 </div>
 
diff --git a/pages/pages_style/game.css b/pages/pages_style/game.css
index 5922b30..703640d 100644
--- a/pages/pages_style/game.css
+++ b/pages/pages_style/game.css
@@ -747,7 +747,21 @@ body {
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
-    z-index: 99998 !important;
+    z-index: 3000 !important;
+}
+
+#showAnswerPopup {
+    z-index: 3000 !important;
+}
+
+#pausePopup {
+    z-index: 3001 !important;
+}
+
+#showAnswerPopup.hidden,
+#pausePopup.hidden,
+#timeUpPopup.hidden {
+    display: none !important;
 }
 
 /* ===== FIX: Done button always visible ===== */
@@ -755,18 +769,7 @@ body {
     position: fixed;
     bottom: 26px;
     right: 26px;
-    z-index: 99999 !important;
-}
-
-/* FIX Show Answer button visibility */
-#showAnswerBtn,
-.show-answer-btn {
-    position: relative !important;
-    display: inline-block !important;
-    visibility: visible !important;
-    opacity: 1 !important;
-
-    z-index: 5000 !important;
+    z-index: 9999 !important;
 }
 
 .pause-popup {
@@ -786,14 +789,45 @@ body {
     display: none;
 }
 
-.pause-box {
-    background: #1e1e1e;
-    padding: 30px 40px;
-    border-radius: 15px;
+/* Pause popup hidden state */
+#pausePopup.hidden {
+    display: none !important;
+}
+
+/* Style pause popup like show answer popup */
+#pausePopup.popup-box {
+    background: rgba(0, 0, 0, 0.9);
+    border: 2px solid #00eaff;
+    box-shadow: 0 0 18px #00eaff;
+    padding: 24px 30px;
+    border-radius: 14px;
+    width: 320px;
     text-align: center;
-    color: white;
-    border: 2px solid cyan;
-    box-shadow: 0 0 20px cyan;
+}
+
+#pausePopup .popup-box {
+    background: rgba(0, 0, 0, 0.9);
+    border: 2px solid #00eaff;
+    box-shadow: 0 0 18px #00eaff;
+    padding: 24px 30px;
+    border-radius: 14px;
+    width: 320px;
+    text-align: center;
+}
+
+#pausePopup #resumeGameBtn {
+    background: #00eaff;
+    color: #000;
+    border: none;
+    font-weight: bold;
+    margin-top: 12px;
+    padding: 10px 20px;
+}
+
+#pausePopup #resumeGameBtn:hover {
+    background: #00d4e0;
+    color: #000;
+    box-shadow: 0 0 20px #00eaff;
 }
 
 .pause-overlay {
diff --git a/pages_script/game.js b/pages_script/game.js
index 3842ea3..9c9bd17 100644
--- a/pages_script/game.js
+++ b/pages_script/game.js
@@ -44,9 +44,13 @@ document.addEventListener("DOMContentLoaded", () => {
     const doneBtn       = document.getElementById("doneShowAnswer");
 
     // ===== PAUSE POPUP =====
-    const pauseOverlay  = document.getElementById("pauseOverlay");
+    const pausePopup    = document.getElementById("pausePopup");
     const resumeBtn     = document.getElementById("resumeGameBtn");
 
+    // ===== TIME UP POPUP =====
+    const timeUpPopup   = document.getElementById("timeUpPopup");
+    const timeUpResetBtn = document.getElementById("timeUpResetBtn");
+
     // Current page LEVEL (comes from each HTML: window.currentLevel = 1..5)
     let currentLevel = Number(window.currentLevel) || 1;
 
@@ -547,7 +551,7 @@ print(safe_divide(10, 0))`,
         nextLevelBtn.classList.add("hidden");
 
         if (gameContainer) gameContainer.classList.remove("paused-blur", "time-up-blur");
-        if (pauseOverlay) pauseOverlay.classList.add("hidden");
+        if (pausePopup) pausePopup.classList.add("hidden");
         if (doneBtn) doneBtn.classList.add("hidden");
 
         setControlsDisabled(false);
@@ -574,7 +578,13 @@ print(safe_divide(10, 0))`,
     // ==========================================================
     function handleTimeUp() {
         isTimeUp = true;
-        gameMessage.textContent = "⏰ Time's up!";
+
+        // Hide other popups if open
+        if (pausePopup) pausePopup.classList.add("hidden");
+        if (popup) popup.classList.add("hidden");
+
+        // Show time-up popup
+        if (timeUpPopup) timeUpPopup.classList.remove("hidden");
 
         // Lock editing
         codeSnippetEl.contentEditable = "false";
@@ -605,7 +615,7 @@ print(safe_divide(10, 0))`,
 
         // Remove blur / overlays
         if (gameContainer) gameContainer.classList.remove("paused-blur", "time-up-blur");
-        if (pauseOverlay) pauseOverlay.classList.add("hidden");
+        if (pausePopup) pausePopup.classList.add("hidden");
         if (doneBtn) doneBtn.classList.add("hidden");
 
         // Reload the current level cleanly
@@ -718,7 +728,9 @@ print(safe_divide(10, 0))`,
 
         isPaused = true;
         if (gameContainer) gameContainer.classList.add("paused-blur");
-        if (pauseOverlay) pauseOverlay.classList.remove("hidden");
+        if (pausePopup) {
+            pausePopup.classList.remove("hidden");
+        }
 
         // Lock editing while paused
         codeSnippetEl.style.pointerEvents = "none";
@@ -732,7 +744,9 @@ print(safe_divide(10, 0))`,
         isPaused = false;
 
         if (gameContainer) gameContainer.classList.remove("paused-blur");
-        if (pauseOverlay) pauseOverlay.classList.add("hidden");
+        if (pausePopup) {
+            pausePopup.classList.add("hidden");
+        }
 
         // Re-enable editing only if answer not shown and level not complete
         if (!answerShown && !levelCompleted) {
@@ -752,7 +766,16 @@ print(safe_divide(10, 0))`,
     if (submitBtn) submitBtn.addEventListener("click", checkAnswer);
     if (hintBtn)   hintBtn.addEventListener("click", showHint);
     if (pauseBtn)  pauseBtn.addEventListener("click", pauseGame);
-    if (resumeBtn) resumeBtn.addEventListener("click", resumeGame);
+    if (resumeBtn) {
+        resumeBtn.addEventListener("click", resumeGame);
+    }
+
+    // ===== TIME UP RESET BUTTON =====
+    if (timeUpResetBtn) {
+        timeUpResetBtn.addEventListener("click", () => {
+            window.location.href = "level1.html";
+        });
+    }
 
     // ==========================================================
     //               SHOW ANSWER — UX MODE + LOCK

From 21e65b90d25ebfd00cc92096d2b71ceae81cd3bf Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 21:19:00 +0530
Subject: [PATCH 17/24] added summary after successfully passing the level

---
 levels/level1.html         |  14 +++
 levels/level2.html         |  14 +++
 levels/level3.html         |  14 +++
 levels/level4.html         |  14 +++
 levels/level5.html         |  14 +++
 pages/pages_style/game.css |  40 +++++++-
 pages_script/game.js       | 196 ++++++++++++++++++++++++++++++++++---
 7 files changed, 290 insertions(+), 16 deletions(-)

diff --git a/levels/level1.html b/levels/level1.html
index 310fa7c..96ff43b 100644
--- a/levels/level1.html
+++ b/levels/level1.html
@@ -117,6 +117,20 @@ <h2>⏰ Time's Up!</h2>
     </div>
 </div>
 
+<!-- ==========================================================
+                   LEVEL SUMMARY POPUP
+========================================================== -->
+
+<div id="summaryPopup" class="popup-overlay hidden">
+    <div class="popup-box summary-box">
+        <h2>🎓 Level Complete!</h2>
+        <div id="summaryContent" class="summary-content"></div>
+        <div class="popup-buttons">
+            <button id="closeSummaryBtn" class="confirm-btn">Continue</button>
+        </div>
+    </div>
+</div>
+
 <script>
     window.currentLevel = 1;
 </script>
diff --git a/levels/level2.html b/levels/level2.html
index 0f103f5..eee81db 100644
--- a/levels/level2.html
+++ b/levels/level2.html
@@ -108,6 +108,20 @@ <h2>⏰ Time's Up!</h2>
     </div>
 </div>
 
+<!-- ==========================================================
+                   LEVEL SUMMARY POPUP
+========================================================== -->
+
+<div id="summaryPopup" class="popup-overlay hidden">
+    <div class="popup-box summary-box">
+        <h2>🎓 Level Complete!</h2>
+        <div id="summaryContent" class="summary-content"></div>
+        <div class="popup-buttons">
+            <button id="closeSummaryBtn" class="confirm-btn">Continue</button>
+        </div>
+    </div>
+</div>
+
 <script>
     window.currentLevel = 2;
 </script>
diff --git a/levels/level3.html b/levels/level3.html
index 896b763..c2b3170 100644
--- a/levels/level3.html
+++ b/levels/level3.html
@@ -108,6 +108,20 @@ <h2>⏰ Time's Up!</h2>
     </div>
 </div>
 
+<!-- ==========================================================
+                   LEVEL SUMMARY POPUP
+========================================================== -->
+
+<div id="summaryPopup" class="popup-overlay hidden">
+    <div class="popup-box summary-box">
+        <h2>🎓 Level Complete!</h2>
+        <div id="summaryContent" class="summary-content"></div>
+        <div class="popup-buttons">
+            <button id="closeSummaryBtn" class="confirm-btn">Continue</button>
+        </div>
+    </div>
+</div>
+
 <script>
     window.currentLevel = 3;
 </script>
diff --git a/levels/level4.html b/levels/level4.html
index 046369c..2b8d73a 100644
--- a/levels/level4.html
+++ b/levels/level4.html
@@ -108,6 +108,20 @@ <h2>⏰ Time's Up!</h2>
     </div>
 </div>
 
+<!-- ==========================================================
+                   LEVEL SUMMARY POPUP
+========================================================== -->
+
+<div id="summaryPopup" class="popup-overlay hidden">
+    <div class="popup-box summary-box">
+        <h2>🎓 Level Complete!</h2>
+        <div id="summaryContent" class="summary-content"></div>
+        <div class="popup-buttons">
+            <button id="closeSummaryBtn" class="confirm-btn">Continue</button>
+        </div>
+    </div>
+</div>
+
 <script>
     window.currentLevel = 4;
 </script>
diff --git a/levels/level5.html b/levels/level5.html
index 9a39caf..f19276d 100644
--- a/levels/level5.html
+++ b/levels/level5.html
@@ -108,6 +108,20 @@ <h2>⏰ Time's Up!</h2>
     </div>
 </div>
 
+<!-- ==========================================================
+                   LEVEL SUMMARY POPUP
+========================================================== -->
+
+<div id="summaryPopup" class="popup-overlay hidden">
+    <div class="popup-box summary-box">
+        <h2>🎓 Level Complete!</h2>
+        <div id="summaryContent" class="summary-content"></div>
+        <div class="popup-buttons">
+            <button id="closeSummaryBtn" class="confirm-btn">Continue</button>
+        </div>
+    </div>
+</div>
+
 <script>
     window.currentLevel = 5;
 </script>
diff --git a/pages/pages_style/game.css b/pages/pages_style/game.css
index 703640d..f4b3684 100644
--- a/pages/pages_style/game.css
+++ b/pages/pages_style/game.css
@@ -760,10 +760,48 @@ body {
 
 #showAnswerPopup.hidden,
 #pausePopup.hidden,
-#timeUpPopup.hidden {
+#timeUpPopup.hidden,
+#summaryPopup.hidden {
     display: none !important;
 }
 
+/* ===== Summary Popup Styling ===== */
+.summary-box {
+    max-height: 70vh;
+    overflow-y: auto;
+    width: 380px;
+}
+
+.summary-content {
+    text-align: left;
+    line-height: 1.6;
+    font-size: 14px;
+    color: #e0e0e0;
+    margin: 16px 0;
+}
+
+.summary-content strong {
+    color: #00eaff;
+    display: block;
+    margin-top: 12px;
+    margin-bottom: 8px;
+}
+
+.summary-content ul {
+    margin-left: 20px;
+    margin-bottom: 12px;
+}
+
+.summary-content li {
+    margin-bottom: 6px;
+}
+
+.summary-content li strong {
+    color: #00ff88;
+    display: inline;
+    margin: 0;
+}
+
 /* ===== FIX: Done button always visible ===== */
 #doneShowAnswer {
     position: fixed;
diff --git a/pages_script/game.js b/pages_script/game.js
index 9c9bd17..8832678 100644
--- a/pages_script/game.js
+++ b/pages_script/game.js
@@ -51,6 +51,11 @@ document.addEventListener("DOMContentLoaded", () => {
     const timeUpPopup   = document.getElementById("timeUpPopup");
     const timeUpResetBtn = document.getElementById("timeUpResetBtn");
 
+    // ===== LEVEL SUMMARY POPUP =====
+    const summaryPopup     = document.getElementById("summaryPopup");
+    const summaryContent   = document.getElementById("summaryContent");
+    const closeSummaryBtn  = document.getElementById("closeSummaryBtn");
+
     // Current page LEVEL (comes from each HTML: window.currentLevel = 1..5)
     let currentLevel = Number(window.currentLevel) || 1;
 
@@ -90,7 +95,16 @@ print(len(items))`,
                     code.includes("len(items)") &&
                     !code.includes("lenght") &&
                     !code.includes("length") &&
-                    !code.includes("items.length")
+                    !code.includes("items.length"),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>0-Indexing:</strong> Lists start at index 0, not 1. So items[0] = "pen", items[1] = "book", items[2] = "bag".</li>
+                        <li><strong>IndexError:</strong> Accessing an index that doesn't exist (items[3]) causes an error.</li>
+                        <li><strong>len() Function:</strong> Python uses len() to get the length of a list, NOT .length (which is JavaScript).</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> Different languages have different methods. Python = len(), JavaScript = .length
+                `
             },
 
             {
@@ -120,7 +134,17 @@ print(total)`,
                 check: (code) =>
                     code.includes("for i in range(len(numbers)):") &&
                     (code.includes("total += numbers[i]") || code.includes("total = total + numbers[i]")) &&
-                    code.includes("print(total)")
+                    code.includes("print(total)"),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>Indentation:</strong> Python uses indentation (usually 4 spaces) to define code blocks inside loops and functions.</li>
+                        <li><strong>Variable Names:</strong> Variable names are case-sensitive and must be spelled correctly. "number" ≠ "numbers", "totl" ≠ "total".</li>
+                        <li><strong>Loops:</strong> for loops iterate through sequences. Use range(len(list)) to loop by index.</li>
+                        <li><strong>Accumulation:</strong> Use += to add values during each iteration of the loop.</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> Indentation is critical in Python. Missing it breaks your code!
+                `
             },
 
             {
@@ -157,7 +181,17 @@ print(sumList(numbers))`,
                     code.includes("total += nums[i]") &&
                     !code.includes("nums = nums + 1") &&
                     code.includes("return total") &&
-                    code.includes("print(sumList(numbers))")
+                    code.includes("print(sumList(numbers))"),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>Function Syntax:</strong> Functions require a colon after the definition: def name(params):</li>
+                        <li><strong>Case Sensitivity:</strong> Python is case-sensitive. sumList() ≠ sumlist(). Function names must match exactly.</li>
+                        <li><strong>Variable Scope:</strong> Don't modify the input parameter (nums) inside the function—use a separate variable (total) for calculations.</li>
+                        <li><strong>Return Values:</strong> Return the correct variable name. "return total" not "return totalSum".</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> Functions are reusable blocks of code. Keep them clean and don't modify input parameters unnecessarily.
+                `
             },
 
             {
@@ -202,7 +236,17 @@ print(collect_unique_words(sentence))`,
                 check: (code) =>
                     code.includes("unique.append(cleaned)") &&
                     code.includes("return len(unique)") &&
-                    !code.includes("unique = cleaned")
+                    !code.includes("unique = cleaned"),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>List Methods:</strong> Use .append() to add items to a list. Don't replace the list with a single value!</li>
+                        <li><strong>String Methods:</strong> .lower() converts to lowercase, .strip() removes unwanted characters.</li>
+                        <li><strong>List Operations:</strong> "in" operator checks if an item exists in a list without duplicates.</li>
+                        <li><strong>Unique Values:</strong> When building a collection of unique items, always append, never assign directly.</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> Keep your data types consistent. If unique is a list, it must stay a list!
+                `
             },
 
             {
@@ -238,7 +282,17 @@ users = [
 print(get_user_age(users, "Alice"))`,
                 check: (code) =>
                     code.includes('get_user_age(users, "Alice")') ||
-                    code.includes("get_user_age(users, 'Alice')")
+                    code.includes("get_user_age(users, 'Alice')"),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>Argument Order:</strong> Function parameters must be passed in the correct order. The signature defines the order: get_user_age(users, name).</li>
+                        <li><strong>Dictionaries:</strong> Dictionaries use {"key": value} syntax. Access values with dict["key"].</li>
+                        <li><strong>Searching Data:</strong> Loop through data structures to find and return specific values.</li>
+                        <li><strong>Function Calls:</strong> Always match the parameter order when calling functions.</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> Arguments must be in the correct order. Always check the function definition before calling it!
+                `
             }
         ],
 
@@ -263,7 +317,16 @@ for n in numbers:
                 check: (code) =>
                     code.includes("for n in numbers") &&
                     code.includes("n % 2 == 0") &&
-                    code.includes('print("Even"')
+                    code.includes('print("Even"'),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>Assignment vs Comparison:</strong> '=' assigns a value, '==' compares two values. In if statements, always use ==.</li>
+                        <li><strong>Modulo Operator (%):</strong> n % 2 gives the remainder when n is divided by 2. If remainder is 0, n is even.</li>
+                        <li><strong>If Statements:</strong> Conditions in if statements must use comparison operators (==, !=, <, >, <=, >=).</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> One = assigns, two == compares. This is one of the most common bugs!
+                `
             },
 
             {
@@ -286,7 +349,16 @@ print(multiply(5, 3))`,
                     code.includes("def multiply(a, b):") &&
                     code.includes("return a * b") &&
                     code.includes("multiply(") &&
-                    code.includes(",")
+                    code.includes(","),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>Indentation:</strong> Function bodies must be indented. Python uses indentation to define scope.</li>
+                        <li><strong>Function Arity:</strong> A function with 2 parameters requires 2 arguments when called. multiply(5) is incomplete—use multiply(5, 3).</li>
+                        <li><strong>Arguments Match Parameters:</strong> The number of arguments passed must equal the number of parameters defined.</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> If a function expects 2 arguments, always provide 2!
+                `
             },
 
             {
@@ -303,7 +375,17 @@ print(user["gender"])`,
 print(user.get("gender", "Not specified"))`,
                 check: (code) =>
                     code.includes('user.get("gender"') ||
-                    code.includes("user.get('gender'")
+                    code.includes("user.get('gender'"),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>KeyError:</strong> Accessing a non-existent key with dict["key"] raises a KeyError.</li>
+                        <li><strong>Dictionary.get():</strong> Use dict.get(key, default) to safely access keys. If the key doesn't exist, return the default value.</li>
+                        <li><strong>Defensive Programming:</strong> Always use .get() when you're unsure if a key exists.</li>
+                        <li><strong>Default Values:</strong> Provide sensible defaults like "Not specified" or None.</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> .get() is safer than direct indexing for uncertain keys!
+                `
             },
 
             {
@@ -334,7 +416,17 @@ print(find_max([-5, -10, -3]))`,
                     code.includes("def find_max(nums):") &&
                     code.includes("max_value = nums[0]") &&
                     code.includes("if n > max_value") &&
-                    code.includes("return max_value")
+                    code.includes("return max_value"),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>Initial Values Matter:</strong> Starting max at 0 fails for all-negative numbers. Use nums[0] instead.</li>
+                        <li><strong>Name Shadowing:</strong> Don't use built-in names (max, min, sum, list) as variable names—use max_value instead.</li>
+                        <li><strong>Algorithm Correctness:</strong> Test edge cases like negative numbers, empty lists, and single-element lists.</li>
+                        <li><strong>Variable Naming:</strong> Use descriptive names (max_value) instead of shadowing built-ins.</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> Choose initial values carefully. Test with edge cases!
+                `
             },
 
             {
@@ -351,7 +443,17 @@ print(find_max([-5, -10, -3]))`,
     print(i)`,
                 check: (code) =>
                     code.includes("for i in range(1, 5):") &&
-                    code.includes("print(i)")
+                    code.includes("print(i)"),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>Control Statement Syntax:</strong> All control structures (for, while, if, def) require a colon (:) at the end.</li>
+                        <li><strong>range(start, end):</strong> range(1, 5) generates 1, 2, 3, 4 (not including 5).</li>
+                        <li><strong>Colon Rule:</strong> If you forget the colon, Python will raise a SyntaxError.</li>
+                        <li><strong>Indentation:</strong> The loop body must be indented after the colon.</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> Colons are mandatory! This is unique to Python syntax.
+                `
             }
         ],
 
@@ -384,7 +486,17 @@ print(add_item("banana"))`,
                     code.includes("def add_item(item, items=None):") &&
                     code.includes("if items is None:") &&
                     code.includes("items = []") &&
-                    code.includes("items.append(item)")
+                    code.includes("items.append(item)"),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>Mutable Default Arguments:</strong> Lists are mutable and persist across function calls. Using [] as a default is a common trap!</li>
+                        <li><strong>Function Default Values:</strong> Defaults are evaluated once when the function is defined, not each time it's called.</li>
+                        <li><strong>Safe Pattern:</strong> Use None as default for mutable types, then create a new object inside the function.</li>
+                        <li><strong>Debugging Tip:</strong> If results unexpectedly accumulate across calls, check mutable defaults.</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> Never use mutable objects ([], {}, set()) as default arguments!
+                `
             },
 
             {
@@ -414,7 +526,17 @@ print(factorial(0))`,
                     code.includes("def factorial(n):") &&
                     code.includes("if n == 0:") &&
                     code.includes("return 1") &&
-                    code.includes("return n * factorial(n - 1)")
+                    code.includes("return n * factorial(n - 1)"),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>Base Case:</strong> Recursive functions need a base case that stops recursion. This is where the function returns without recursing.</li>
+                        <li><strong>Mathematical Definition:</strong> 0! = 1 by definition in mathematics. This base case is essential.</li>
+                        <li><strong>Recursion:</strong> A function calling itself must have a base case, or it will recurse infinitely.</li>
+                        <li><strong>Logic Check:</strong> Test edge cases (0, 1) to verify base cases are correct.</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> Base case wrong = all results wrong. Always verify base cases in recursive functions!
+                `
             },
 
             {
@@ -438,7 +560,17 @@ file.close`,
                 check: (code) =>
                     code.includes('with open("data.txt", "r") as file:') &&
                     code.includes("for line in") &&
-                    code.includes("print(line.strip())")
+                    code.includes("print(line.strip())"),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>Context Managers:</strong> 'with' statements ensure resources are properly closed, even if an error occurs.</li>
+                        <li><strong>file.close vs file.close():</strong> Without parentheses, you're referencing the method but not calling it.</li>
+                        <li><strong>Resource Management:</strong> Use 'with' for files, database connections, locks, etc.</li>
+                        <li><strong>Best Practice:</strong> Context managers are safer and more Pythonic than manual close().</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> Always use 'with' for file operations. It's the modern, safe way!
+                `
             },
 
             {
@@ -458,7 +590,17 @@ squares = [n * n for n in nums]
 print(squares)`,
                 check: (code) =>
                     code.includes("squares = [n * n for n in nums]") &&
-                    code.includes("print(squares)")
+                    code.includes("print(squares)"),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>List Comprehensions:</strong> Compact syntax for creating new lists by transforming existing ones.</li>
+                        <li><strong>Variable Consistency:</strong> The expression and loop variable must match. If you use 'n' in the expression, iterate over 'n'.</li>
+                        <li><strong>Syntax:</strong> [expression for variable in iterable] creates a new list.</li>
+                        <li><strong>Performance:</strong> List comprehensions are faster and more readable than loops.</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> Keep variables consistent in comprehensions. [n*n for n in nums], not [n*n for i in nums]!
+                `
             },
 
             {
@@ -487,7 +629,17 @@ print(safe_divide(10, 0))`,
                 check: (code) =>
                     code.includes("def safe_divide(a, b):") &&
                     (code.includes("except ZeroDivisionError") || code.includes("except ZeroDivisionError:")) &&
-                    !code.includes("except:")
+                    !code.includes("except:"),
+                summary: `
+                    <strong>📚 Key Concepts Learned:</strong>
+                    <ul>
+                        <li><strong>Specific Exception Handling:</strong> Always catch specific exceptions, not bare 'except'. This prevents masking unexpected errors.</li>
+                        <li><strong>ZeroDivisionError:</strong> Raised when dividing by zero. Catch it explicitly for better debugging.</li>
+                        <li><strong>Bare except Dangers:</strong> A bare 'except' catches everything, including KeyboardInterrupt and SystemExit, which can hide bugs.</li>
+                        <li><strong>Best Practice:</strong> Catch only exceptions you expect and can handle.</li>
+                    </ul>
+                    <strong>💡 Remember:</strong> Be specific with exceptions. Never use bare 'except'. It hides bugs!
+                `
             }
         ]
     };
@@ -552,6 +704,7 @@ print(safe_divide(10, 0))`,
 
         if (gameContainer) gameContainer.classList.remove("paused-blur", "time-up-blur");
         if (pausePopup) pausePopup.classList.add("hidden");
+        if (summaryPopup) summaryPopup.classList.add("hidden");
         if (doneBtn) doneBtn.classList.add("hidden");
 
         setControlsDisabled(false);
@@ -672,6 +825,12 @@ print(safe_divide(10, 0))`,
 
         setTimeout(() => {
             levelAnim.classList.add("hidden");
+            
+            // Show summary popup after animation
+            if (summaryPopup && summaryContent && level.summary) {
+                summaryContent.innerHTML = level.summary;
+                summaryPopup.classList.remove("hidden");
+            }
         }, 1500);
 
         nextLevelBtn.classList.remove("hidden");
@@ -777,6 +936,13 @@ print(safe_divide(10, 0))`,
         });
     }
 
+    // ===== CLOSE SUMMARY BUTTON =====
+    if (closeSummaryBtn) {
+        closeSummaryBtn.addEventListener("click", () => {
+            if (summaryPopup) summaryPopup.classList.add("hidden");
+        });
+    }
+
     // ==========================================================
     //               SHOW ANSWER — UX MODE + LOCK
     // ==========================================================

From 7aa2a874827e0ef338e731e09e9bf0d480e8684c Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 21:30:37 +0530
Subject: [PATCH 18/24] added About section in the setting

---
 home_page.css  | 106 +++++++++++++++++++++++++++++++++++++++++++++++++
 home_page.html |  44 ++++++++++++++++++++
 home_page.js   |  39 ++++++++++++++++++
 3 files changed, 189 insertions(+)

diff --git a/home_page.css b/home_page.css
index 5bfd6d2..1cee04f 100644
--- a/home_page.css
+++ b/home_page.css
@@ -426,4 +426,110 @@ footer:hover {
 .type-cursor {
     position: relative;
     top: -2px;
+}
+
+/* ===== ABOUT POPUP STYLING ===== */
+.popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 5000;
+}
+
+.popup-overlay.hidden {
+    display: none !important;
+}
+
+.popup-box {
+    background: rgba(14, 22, 41, 0.95);
+    border: 3px solid #00eaff;
+    border-radius: 12px;
+    padding: 30px;
+    max-width: 500px;
+    max-height: 70vh;
+    overflow-y: auto;
+    box-shadow: 0 0 25px rgba(0, 234, 255, 0.4),
+                inset 0 0 15px rgba(0, 234, 255, 0.1);
+    position: relative;
+}
+
+.popup-box h2 {
+    color: #00eaff;
+    text-align: center;
+    margin-bottom: 20px;
+    font-size: 18px;
+    text-shadow: 0 0 10px rgba(0, 234, 255, 0.6);
+}
+
+.popup-box h3 {
+    color: #00ff88;
+    margin-top: 16px;
+    margin-bottom: 10px;
+    font-size: 12px;
+}
+
+.about-content {
+    font-family: Arial, sans-serif;
+    font-size: 12px;
+    color: #d8ffe6;
+    line-height: 1.6;
+}
+
+.about-content p {
+    margin-bottom: 12px;
+    text-align: justify;
+}
+
+.about-content p strong {
+    color: #00eaff;
+}
+
+.about-content ul {
+    margin-left: 20px;
+    margin-bottom: 12px;
+}
+
+.about-content li {
+    margin-bottom: 6px;
+    color: #d8ffe6;
+}
+
+.about-content li strong {
+    color: #00ff88;
+}
+
+/* Close button (X) */
+.close-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: transparent;
+    border: 2px solid #ff4747;
+    color: #ff4747;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    font-size: 18px;
+    font-weight: bold;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s ease;
+}
+
+.close-btn:hover {
+    background: rgba(255, 71, 71, 0.2);
+    box-shadow: 0 0 10px rgba(255, 71, 71, 0.5);
+    transform: scale(1.1);
+}
+
+.close-btn:active {
+    transform: scale(0.95);
 }
\ No newline at end of file
diff --git a/home_page.html b/home_page.html
index 01cbcdd..aa41ec1 100644
--- a/home_page.html
+++ b/home_page.html
@@ -118,6 +118,50 @@ <h1 class="game-title">🧩 Code Quest: Debug the Matrix</h1>
 
     </div>
 
+    <!-- ABOUT POPUP -->
+    <div id="aboutPopup" class="popup-overlay hidden">
+        <div class="popup-box">
+            <button id="closeAboutBtn" class="close-btn" aria-label="Close about popup">✕</button>
+            <h2>ℹ️ About Code Quest</h2>
+            <div class="about-content">
+                <p><strong>Welcome to Code Quest: Debug the Matrix!</strong></p>
+                <p>A challenging and interactive coding puzzle game designed to enhance your debugging skills and deepen your understanding of programming concepts.</p>
+                
+                <h3>📖 Game Overview</h3>
+                <ul>
+                    <li>Solve 5 levels per difficulty tier (Easy, Medium, Hard)</li>
+                    <li>Each level contains hidden bugs in code snippets</li>
+                    <li>Fix the errors and earn points for correct solutions</li>
+                    <li>Beat the 60-second timer to complete each level</li>
+                    <li>Learn key programming concepts through practical challenges</li>
+                </ul>
+
+                <h3>🎯 Game Features</h3>
+                <ul>
+                    <li><strong>Multiple Difficulties:</strong> Easy, Medium, and Hard modes</li>
+                    <li><strong>Hint System:</strong> Get hints (costs points) when stuck</li>
+                    <li><strong>Show Answer:</strong> View the correct solution if needed</li>
+                    <li><strong>Pause Feature:</strong> Take a break during gameplay</li>
+                    <li><strong>Learning Summaries:</strong> Key concepts after each level</li>
+                    <li><strong>Score Tracking:</strong> Keep track of your best scores</li>
+                </ul>
+
+                <h3>💡 Tips for Success</h3>
+                <ul>
+                    <li>Start with Easy mode to learn the basics</li>
+                    <li>Use hints wisely—they cost points!</li>
+                    <li>Read the error messages carefully</li>
+                    <li>Complete all levels before time runs out</li>
+                    <li>Review the learning summaries to master concepts</li>
+                </ul>
+
+                <h3>👨‍💻 Built By</h3>
+                <p><strong>Team-132</strong> | Version 1.0.0</p>
+                <p>Crafted with ❤️ to help developers master the art of debugging.</p>
+            </div>
+        </div>
+    </div>
+
     <!-- HOW TO PLAY -->
     <div class="how-to-play-box">
         <h2>🕹️ How to Play</h2>
diff --git a/home_page.js b/home_page.js
index d47f558..e7dadc2 100644
--- a/home_page.js
+++ b/home_page.js
@@ -11,6 +11,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
     const levelSelect = document.getElementById("levelSelect");
     const difficultySelect = document.getElementById("difficultySelect");
+    const settingsSelect = document.getElementById("settingsSelect");
 
     /*  LOAD HIGH SCORE */
 
@@ -59,6 +60,44 @@ document.addEventListener("DOMContentLoaded", function () {
         });
     }
 
+    /* ----------------------------------------------------
+       SETTINGS MENU — ABOUT POPUP
+    ----------------------------------------------------- */
+    const aboutPopup = document.getElementById("aboutPopup");
+    const closeAboutBtn = document.getElementById("closeAboutBtn");
+
+    if (settingsSelect) {
+        settingsSelect.addEventListener("change", (e) => {
+            const selectedValue = e.target.value;
+
+            if (selectedValue === "about") {
+                // Show about popup
+                if (aboutPopup) {
+                    aboutPopup.classList.remove("hidden");
+                }
+            }
+
+            // Reset select to default after action
+            settingsSelect.value = "volume";
+        });
+    }
+
+    // Close about popup when close button is clicked
+    if (closeAboutBtn && aboutPopup) {
+        closeAboutBtn.addEventListener("click", () => {
+            aboutPopup.classList.add("hidden");
+        });
+    }
+
+    // Close about popup when clicking outside (on the overlay)
+    if (aboutPopup) {
+        aboutPopup.addEventListener("click", (e) => {
+            if (e.target === aboutPopup) {
+                aboutPopup.classList.add("hidden");
+            }
+        });
+    }
+
     /* ----------------------------------------------------
        BACKGROUND STARFIELD
     ----------------------------------------------------- */

From f9f5bf47ff0b22586a836efaabf772190ce1f4f3 Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 21:38:54 +0530
Subject: [PATCH 19/24] enhanced ui of final score page

---
 pages/final_score.css  | 466 ++++++++++++++++++++++++++++++++++++-----
 pages/final_score.html |  56 ++++-
 pages/final_score.js   | 146 ++++++++++++-
 3 files changed, 603 insertions(+), 65 deletions(-)

diff --git a/pages/final_score.css b/pages/final_score.css
index 4144505..1de9797 100644
--- a/pages/final_score.css
+++ b/pages/final_score.css
@@ -1,101 +1,467 @@
 /* ========== FINAL SCORE PAGE ========== */
 
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
     margin: 0;
     padding: 0;
-    background: radial-gradient(circle at center, #0a0a0d 0%, #020202 100%);
+    background: radial-gradient(circle at center,
+        #0e1629 0%,
+        #0a1120 40%,
+        #050a14 70%,
+        #000000 100%);
+    background-attachment: fixed;
     font-family: "Press Start 2P", monospace;
-    color: #e0ffe0;
+    color: #d8ffe6;
+    overflow-x: hidden;
+    min-height: 100vh;
+}
+
+/* Stars Background */
+.stars {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.star {
+    position: absolute;
+    background: white;
+    width: 2px;
+    height: 2px;
+    border-radius: 50%;
+    opacity: 0.8;
+    animation: twinkle 2s infinite ease-in-out;
+}
+
+@keyframes twinkle {
+    0%, 100% { opacity: 0.3; }
+    50% { opacity: 1; }
+}
+
+/* Pixel Particles */
+.pixel-particles {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
 }
 
+/* Main Container */
 .final-score-container {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    min-height: 100vh;
+    padding: 20px;
+    z-index: 10;
+    position: relative;
 }
 
+/* Score Card */
 .score-card {
-    background: rgba(0, 20, 0, 0.55);
-    padding: 40px;
+    background: rgba(14, 22, 41, 0.85);
+    padding: 50px 40px;
     border-radius: 20px;
-    box-shadow: 0 0 25px rgba(0, 255, 150, 0.35);
-    border: 1px solid rgba(0, 255, 150, 0.3);
-    width: 450px;
+    box-shadow: 0 0 40px rgba(0, 234, 255, 0.3),
+                inset 0 0 20px rgba(0, 234, 255, 0.1);
+    border: 2px solid rgba(0, 234, 255, 0.5);
+    max-width: 600px;
+    width: 100%;
     text-align: center;
-    backdrop-filter: blur(8px);
-    animation: fadeIn 0.8s ease-out;
+    backdrop-filter: blur(10px);
+    animation: cardEnter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes cardEnter {
+    from {
+        opacity: 0;
+        transform: scale(0.8) rotateX(10deg);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) rotateX(0deg);
+    }
 }
 
+/* Title */
 .final-title {
-    font-size: 28px;
-    margin-bottom: 25px;
-    text-shadow: 0 0 10px #00ffae;
+    font-size: 32px;
+    margin-bottom: 30px;
+    text-shadow: 0 0 15px #00eaff, 0 0 30px #00ff88;
+    color: #00eaff;
+    letter-spacing: 3px;
+    animation: titlePulse 0.8s ease-out;
 }
 
-/* Score number */
+@keyframes titlePulse {
+    0% {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Stars Display */
+.stars-display {
+    font-size: 50px;
+    margin: 20px 0;
+    animation: starsFloat 1s ease-out;
+    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
+}
+
+@keyframes starsFloat {
+    0% {
+        opacity: 0;
+        transform: translateY(-20px) scale(0.5);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* Score Message */
+.score-message {
+    font-size: 16px;
+    color: #00ff88;
+    margin: 20px 0;
+    animation: messageSlide 0.8s ease-out 0.2s both;
+    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
+    line-height: 1.4;
+    min-height: 50px;
+}
+
+@keyframes messageSlide {
+    from {
+        opacity: 0;
+        transform: translateX(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* Score Display */
+.score-display {
+    margin: 30px 0;
+    padding: 20px;
+    background: rgba(0, 234, 255, 0.1);
+    border: 2px solid rgba(0, 234, 255, 0.3);
+    border-radius: 12px;
+    animation: scoreGlow 0.8s ease-out 0.3s both;
+}
+
+@keyframes scoreGlow {
+    from {
+        opacity: 0;
+        box-shadow: 0 0 0 rgba(0, 234, 255, 0.5);
+    }
+    to {
+        opacity: 1;
+        box-shadow: 0 0 20px rgba(0, 234, 255, 0.3);
+    }
+}
+
+.score-label {
+    display: block;
+    font-size: 12px;
+    color: #00eaff;
+    margin-bottom: 10px;
+    letter-spacing: 2px;
+}
+
+/* Score Number */
 .score-number {
-    font-size: 60px;
+    font-size: 56px;
     font-weight: bold;
-    color: #7affb2;
-    margin: 15px 0;
-    text-shadow: 0 0 10px #00ff91;
-    animation: popIn 0.6s ease-out;
+    color: #00ff88;
+    text-shadow: 0 0 15px #00ff88, 0 0 30px rgba(0, 255, 136, 0.5);
+    animation: numberCount 1s ease-out 0.4s both;
 }
 
-/* Stars / medal section */
-.stars-display {
-    font-size: 40px;
-    margin-bottom: 20px;
-    animation: fadeIn 1s ease-out;
+@keyframes numberCount {
+    0% {
+        opacity: 0;
+        transform: scale(0.5);
+        text-shadow: 0 0 0 #00ff88;
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+        text-shadow: 0 0 15px #00ff88, 0 0 30px rgba(0, 255, 136, 0.5);
+    }
+}
+
+/* Stats Grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+    margin: 30px 0;
+    animation: statsEnter 0.8s ease-out 0.5s both;
+}
+
+@keyframes statsEnter {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.stat-box {
+    background: rgba(0, 255, 136, 0.05);
+    border: 1px solid rgba(0, 255, 136, 0.3);
+    border-radius: 10px;
+    padding: 12px;
+    transition: all 0.3s ease;
+}
+
+.stat-box:hover {
+    background: rgba(0, 255, 136, 0.15);
+    border-color: rgba(0, 255, 136, 0.6);
+    box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
+    transform: translateY(-3px);
+}
+
+.stat-label {
+    display: block;
+    font-size: 10px;
+    color: #00eaff;
+    margin-bottom: 6px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.stat-value {
+    display: block;
+    font-size: 18px;
+    color: #00ff88;
+    font-weight: bold;
+    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
+}
+
+/* Achievement Section */
+.achievement-section {
+    margin: 30px 0;
+    padding: 20px;
+    background: rgba(255, 215, 0, 0.05);
+    border: 1px solid rgba(255, 215, 0, 0.3);
+    border-radius: 12px;
+    animation: achievementEnter 0.8s ease-out 0.6s both;
+}
+
+@keyframes achievementEnter {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.achievement-section h3 {
+    font-size: 14px;
+    color: #ffd700;
+    margin-bottom: 12px;
+    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
+}
+
+.achievements-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+}
+
+.achievement-badge {
+    background: rgba(255, 215, 0, 0.1);
+    border: 1px solid rgba(255, 215, 0, 0.4);
+    border-radius: 8px;
+    padding: 8px 12px;
+    font-size: 11px;
+    color: #ffd700;
+    animation: badgeFloat 0.5s ease-out;
+}
+
+@keyframes badgeFloat {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 /* Buttons */
 .btn-row {
     display: flex;
     justify-content: center;
-    gap: 15px;
-    margin-top: 25px;
+    gap: 20px;
+    margin-top: 30px;
+    animation: buttonsEnter 0.8s ease-out 0.7s both;
+}
+
+@keyframes buttonsEnter {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .btn {
-    padding: 12px 20px;
-    border: none;
-    font-size: 14px;
+    padding: 14px 28px;
+    border: 2px solid;
+    font-size: 13px;
+    font-family: "Press Start 2P", monospace;
     cursor: pointer;
     border-radius: 10px;
-    transition: 0.2s ease-in-out;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    position: relative;
+    overflow: hidden;
 }
 
-.green {
-    background: #28a745;
-    color: white;
-    box-shadow: 0 0 8px rgba(40, 167, 69, 0.55);
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    transition: left 0.3s ease;
+    z-index: -1;
 }
 
-.green:hover {
-    transform: scale(1.05);
-    background-color: #32c757;
+.primary-btn {
+    background: linear-gradient(135deg, #00ff88 0%, #00eaff 100%);
+    border-color: #00ff88;
+    color: #000;
+    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
+    font-weight: bold;
+}
+
+.primary-btn:hover {
+    transform: translateY(-3px) scale(1.05);
+    box-shadow: 0 0 25px rgba(0, 255, 136, 0.7),
+                0 0 40px rgba(0, 234, 255, 0.5);
+    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+}
+
+.primary-btn:active {
+    transform: translateY(-1px);
+}
+
+.secondary-btn {
+    background: rgba(0, 234, 255, 0.1);
+    border-color: #00eaff;
+    color: #00eaff;
+    box-shadow: 0 0 15px rgba(0, 234, 255, 0.4);
+}
+
+.secondary-btn:hover {
+    background: rgba(0, 234, 255, 0.2);
+    transform: translateY(-3px) scale(1.05);
+    box-shadow: 0 0 25px rgba(0, 234, 255, 0.7);
+}
+
+.secondary-btn:active {
+    transform: translateY(-1px);
 }
 
-.blue {
-    background: #007bff;
-    color: white;
-    box-shadow: 0 0 8px rgba(0, 123, 255, 0.55);
+/* Footer */
+.score-footer {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(0, 234, 255, 0.2);
 }
 
-.blue:hover {
-    transform: scale(1.05);
-    background-color: #2894ff;
+.motivational {
+    font-size: 11px;
+    color: #00eaff;
+    animation: fadeIn 1s ease-out 0.8s both;
+    min-height: 30px;
 }
 
-/* Animations */
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(15px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
-@keyframes popIn {
-    0% { transform: scale(0.3); opacity: 0; }
-    100% { transform: scale(1); opacity: 1; }
+/* Confetti */
+.confetti {
+    position: fixed;
+    pointer-events: none;
+    font-size: 20px;
+    animation: confettiFall 3s ease-in forwards;
+}
+
+@keyframes confettiFall {
+    to {
+        transform: translateY(100vh) rotate(360deg);
+        opacity: 0;
+    }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .score-card {
+        padding: 30px 20px;
+    }
+
+    .final-title {
+        font-size: 24px;
+    }
+
+    .stars-display {
+        font-size: 40px;
+    }
+
+    .score-number {
+        font-size: 42px;
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .btn-row {
+        flex-direction: column;
+    }
+
+    .btn {
+        width: 100%;
+    }
 }
\ No newline at end of file
diff --git a/pages/final_score.html b/pages/final_score.html
index c2210dd..26351a6 100644
--- a/pages/final_score.html
+++ b/pages/final_score.html
@@ -6,27 +6,71 @@
     <title>Final Score — CodeQuest</title>
 
     <link rel="stylesheet" href="pages_style/game.css" />
-    <link rel="stylesheet" href="pages_style/final_score.css" />
+    <link rel="stylesheet" href="final_score.css" />
 </head>
 <body>
 
+    <!-- Background FX -->
+    <div class="stars" id="stars"></div>
+    <div class="pixel-particles"></div>
+
     <div class="final-score-container">
         <div class="score-card">
 
-            <h1 class="final-title">🎉 Final Score 🎉</h1>
+            <h1 class="final-title">🎉 Mission Complete! 🎉</h1>
 
+            <!-- Stars Display -->
             <div id="starsDisplay" class="stars-display"></div>
 
-            <div class="score-number" id="finalScore">0</div>
+            <!-- Score Message -->
+            <div id="scoreMessage" class="score-message"></div>
+
+            <!-- Score Number -->
+            <div class="score-display">
+                <span class="score-label">Final Score</span>
+                <div class="score-number" id="finalScore">0</div>
+            </div>
+
+            <!-- Performance Stats -->
+            <div class="stats-grid">
+                <div class="stat-box">
+                    <span class="stat-label">Levels Completed</span>
+                    <span class="stat-value" id="levelsCompleted">5</span>
+                </div>
+                <div class="stat-box">
+                    <span class="stat-label">Difficulty</span>
+                    <span class="stat-value" id="difficultyDisplay">Easy</span>
+                </div>
+                <div class="stat-box">
+                    <span class="stat-label">Accuracy</span>
+                    <span class="stat-value" id="accuracyDisplay">100%</span>
+                </div>
+            </div>
 
+            <!-- Achievement Section -->
+            <div class="achievement-section">
+                <h3>🏆 Achievements Unlocked</h3>
+                <div id="achievementsList" class="achievements-list"></div>
+            </div>
+
+            <!-- Action Buttons -->
             <div class="btn-row">
-                <button id="playAgainBtn" class="btn green">Play Again</button>
-                <button id="homeBtn" class="btn blue">Home</button>
+                <button id="playAgainBtn" class="btn primary-btn">🔄 Play Again</button>
+                <button id="homeBtn" class="btn secondary-btn">🏠 Home</button>
+            </div>
+
+            <!-- Footer -->
+            <div class="score-footer">
+                <p id="motivationalText" class="motivational"></p>
             </div>
+
         </div>
     </div>
 
-    <script src="pages_script/final_score.js"></script>
+    <!-- Confetti Animation Container -->
+    <div id="confetti-container"></div>
+
+    <script src="final_score.js"></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/pages/final_score.js b/pages/final_score.js
index 205f2d6..c5fbb96 100644
--- a/pages/final_score.js
+++ b/pages/final_score.js
@@ -1,19 +1,33 @@
-// Load total score
+// ==========================================================
+//              FINAL SCORE PAGE — ENHANCED
+// ==========================================================
+
+// Load data from localStorage
 let score = Number(localStorage.getItem("codequestScore")) || 0;
+const difficulty = localStorage.getItem("codequestDifficulty") || "easy";
 
 // ANIMATE score counting
 let displayScore = 0;
 const scoreEl = document.getElementById("finalScore");
+const starsDisplay = document.getElementById("starsDisplay");
+const scoreMessage = document.getElementById("scoreMessage");
+const motivationalText = document.getElementById("motivationalText");
+const levelsCompletedEl = document.getElementById("levelsCompleted");
+const difficultyDisplay = document.getElementById("difficultyDisplay");
+const achievementsList = document.getElementById("achievementsList");
+
+// Set max score based on difficulty
+const maxScore = 250; // 5 levels × 50 points each
 
 let animate = setInterval(() => {
     if (displayScore >= score) {
         clearInterval(animate);
-        scoreEl.textContent = score + " / 250";
+        scoreEl.textContent = score + " / " + maxScore;
     } else {
-        displayScore += 2;
-        scoreEl.textContent = displayScore + " / 250";
+        displayScore += Math.ceil((score - displayScore) / 10);
+        scoreEl.textContent = displayScore + " / " + maxScore;
     }
-}, 15);
+}, 20);
 
 // Convert score → star rating
 function getStars(score) {
@@ -33,19 +47,133 @@ function getMessage(score) {
     return "Keep practicing — you'll get better! 💪";
 }
 
+// Get achievements based on score and difficulty
+function getAchievements(score, difficulty) {
+    const achievements = [];
+
+    // Perfect Score Achievement
+    if (score === maxScore) {
+        achievements.push("🎯 Perfect Score!");
+    }
+
+    // Difficulty Achievements
+    if (difficulty === "hard" && score >= 150) {
+        achievements.push("🔥 Hard Master");
+    } else if (difficulty === "medium" && score >= 150) {
+        achievements.push("⚡ Medium Champion");
+    } else if (difficulty === "easy" && score >= 200) {
+        achievements.push("🌟 Easy Expert");
+    }
+
+    // Completion Achievements
+    if (score >= 230) {
+        achievements.push("🏆 Legendary Debugger");
+    } else if (score >= 200) {
+        achievements.push("👑 Pro Debugger");
+    } else if (score >= 150) {
+        achievements.push("💪 Good Debugger");
+    }
+
+    // Speed Achievement (if completed in good time)
+    if (score >= 150) {
+        achievements.push("⏱️ Swift Solver");
+    }
+
+    // Persistence Achievement
+    achievements.push("✨ Mission Accomplished");
+
+    return achievements;
+}
+
+// Get motivational text
+function getMotivationalText(score) {
+    const messages = [
+        "Great job! Ready for a higher difficulty?",
+        "Keep pushing your limits!",
+        "Every bug fixed makes you a better programmer!",
+        "Your debugging skills are improving!",
+        "Challenge yourself with harder levels!",
+        "Practice makes perfect! Come back tomorrow!"
+    ];
+
+    if (score >= 230) {
+        return "You're unstoppable! Try teaching others!";
+    } else if (score >= 200) {
+        return "You've mastered the art of debugging!";
+    }
+
+    return messages[Math.floor(Math.random() * messages.length)];
+}
+
 // Display stars + message
-document.getElementById("scoreStars").textContent = getStars(score);
-document.getElementById("scoreMessage").textContent = getMessage(score);
+starsDisplay.textContent = getStars(score);
+scoreMessage.textContent = getMessage(score);
+motivationalText.textContent = getMotivationalText(score);
+difficultyDisplay.textContent = difficulty.toUpperCase();
+
+// Display achievements
+const achievements = getAchievements(score, difficulty);
+achievementsList.innerHTML = achievements
+    .map(achievement => `<div class="achievement-badge">${achievement}</div>`)
+    .join("");
+
+// Create confetti effect
+function createConfetti() {
+    const confettiContainer = document.getElementById("confetti-container");
+    const confettiPieces = ["🎉", "⭐", "🎊", "✨", "🏆", "💎", "🔥"];
+    
+    for (let i = 0; i < 30; i++) {
+        setTimeout(() => {
+            const confetti = document.createElement("div");
+            confetti.classList.add("confetti");
+            confetti.textContent = confettiPieces[Math.floor(Math.random() * confettiPieces.length)];
+            
+            confetti.style.left = Math.random() * 100 + "vw";
+            confetti.style.top = "-20px";
+            confetti.style.opacity = "1";
+            
+            const duration = 2 + Math.random() * 1;
+            confetti.style.animationDuration = duration + "s";
+            confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
+            
+            confettiContainer.appendChild(confetti);
+            
+            setTimeout(() => confetti.remove(), duration * 1000);
+        }, i * 50);
+    }
+}
+
+// Trigger confetti on page load
+window.addEventListener("load", () => {
+    createConfetti();
+});
+
+// Create background stars
+function createStars() {
+    const starContainer = document.getElementById("stars");
+    for (let i = 0; i < 100; i++) {
+        const star = document.createElement("div");
+        star.classList.add("star");
+        
+        star.style.left = Math.random() * 100 + "vw";
+        star.style.top = Math.random() * 100 + "vh";
+        star.style.animationDelay = Math.random() * 3 + "s";
+        
+        starContainer.appendChild(star);
+    }
+}
+
+createStars();
 
 // BUTTONS
 
 // 🔄 PLAY AGAIN → go to Level 1
 document.getElementById("playAgainBtn").addEventListener("click", () => {
     localStorage.setItem("codequestScore", "0");
-    window.location.href = "./levels/level1.html";  
+    window.location.href = "../levels/level1.html";
 });
 
 // 🏠 HOME PAGE
 document.getElementById("homeBtn").addEventListener("click", () => {
-    window.location.href = "../home_page.html";  
+    window.location.href = "../home_page.html";
 });
\ No newline at end of file

From cf3fea318c6d52e928e0e7e60495155f6ac23583 Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 21:44:36 +0530
Subject: [PATCH 20/24] continue button functionality added

---
 levels/level1.html         |  1 +
 levels/level2.html         |  1 +
 levels/level3.html         |  1 +
 levels/level4.html         |  1 +
 levels/level5.html         |  1 +
 pages/final_score.js       |  1 +
 pages/pages_style/game.css | 23 +++++++++++++++++++++++
 pages_script/game.js       | 18 ++++++++++++++++++
 8 files changed, 47 insertions(+)

diff --git a/levels/level1.html b/levels/level1.html
index 96ff43b..9e92b78 100644
--- a/levels/level1.html
+++ b/levels/level1.html
@@ -64,6 +64,7 @@ <h1>Level 1</h1>
         <button id="resetGameBtn">Reset Game</button>
         <button id="pauseGameBtn">⏸ Pause</button>
         <button id="showAnswerBtn" class="show-answer-btn">Show Answer</button>
+        <button id="homeBtn" class="home-btn">🏠 Home</button>
     </section>
 
 </div>
diff --git a/levels/level2.html b/levels/level2.html
index eee81db..5f53f4b 100644
--- a/levels/level2.html
+++ b/levels/level2.html
@@ -57,6 +57,7 @@ <h1>Level 2</h1>
         <button id="resetGameBtn">Reset Game</button>
         <button id="pauseGameBtn">⏸ Pause</button>
         <button id="showAnswerBtn" class="show-answer-btn">Show Answer</button>
+        <button id="homeBtn" class="home-btn">🏠 Home</button>
     </section>
 
 </div>
diff --git a/levels/level3.html b/levels/level3.html
index c2b3170..ed0ca1f 100644
--- a/levels/level3.html
+++ b/levels/level3.html
@@ -57,6 +57,7 @@ <h1>Level 3</h1>
         <button id="resetGameBtn">Reset Game</button>
         <button id="pauseGameBtn">⏸ Pause</button>
         <button id="showAnswerBtn" class="show-answer-btn">Show Answer</button>
+        <button id="homeBtn" class="home-btn">🏠 Home</button>
     </section>
 
 </div>
diff --git a/levels/level4.html b/levels/level4.html
index 2b8d73a..2f3c2b9 100644
--- a/levels/level4.html
+++ b/levels/level4.html
@@ -57,6 +57,7 @@ <h1>Level 4</h1>
         <button id="resetGameBtn">Reset Game</button>
         <button id="pauseGameBtn">⏸ Pause</button>
         <button id="showAnswerBtn" class="show-answer-btn">Show Answer</button>
+        <button id="homeBtn" class="home-btn">🏠 Home</button>
     </section>
 
 </div>
diff --git a/levels/level5.html b/levels/level5.html
index f19276d..ac47b15 100644
--- a/levels/level5.html
+++ b/levels/level5.html
@@ -57,6 +57,7 @@ <h1>Level 5</h1>
         <button id="resetGameBtn">Reset Game</button>
         <button id="pauseGameBtn">⏸ Pause</button>
         <button id="showAnswerBtn" class="show-answer-btn">Show Answer</button>
+        <button id="homeBtn" class="home-btn">🏠 Home</button>
     </section>
 
 </div>
diff --git a/pages/final_score.js b/pages/final_score.js
index c5fbb96..c65d771 100644
--- a/pages/final_score.js
+++ b/pages/final_score.js
@@ -35,6 +35,7 @@ function getStars(score) {
     if (score >= 200) return "⭐⭐⭐⭐";
     if (score >= 150) return "⭐⭐⭐";
     if (score >= 100) return "⭐⭐";
+    
     return "⭐";
 }
 
diff --git a/pages/pages_style/game.css b/pages/pages_style/game.css
index f4b3684..24a65c1 100644
--- a/pages/pages_style/game.css
+++ b/pages/pages_style/game.css
@@ -655,6 +655,29 @@ body {
     transform: scale(0.95);
 }
 
+/* Home Button */
+.home-btn {
+    background: rgba(0, 234, 255, 0.15);
+    color: #00eaff;
+    padding: 10px 20px;
+    border: 2px solid #00eaff;
+    font-size: 18px;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: "Press Start 2P", monospace;
+}
+
+.home-btn:hover {
+    background: rgba(0, 234, 255, 0.25);
+    transform: scale(1.05);
+    box-shadow: 0 0 12px rgba(0, 234, 255, 0.5);
+}
+
+.home-btn:active {
+    transform: scale(0.95);
+}
+
 /* Popup Overlay */
 /* ===== FINAL SHOW ANSWER POPUP (Stable Version) ===== */
 
diff --git a/pages_script/game.js b/pages_script/game.js
index 8832678..8c062a0 100644
--- a/pages_script/game.js
+++ b/pages_script/game.js
@@ -23,6 +23,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const submitBtn     = document.getElementById("submitAnswerBtn");
     const hintBtn       = document.getElementById("hintBtn");
     const pauseBtn      = document.getElementById("pauseGameBtn");
+    const homeBtn       = document.getElementById("homeBtn");
 
     const levelDisplay  = document.getElementById("levelDisplay");
     const scoreDisplay  = document.getElementById("scoreDisplay");
@@ -929,6 +930,23 @@ print(safe_divide(10, 0))`,
         resumeBtn.addEventListener("click", resumeGame);
     }
 
+    // ===== HOME BUTTON =====
+    if (homeBtn) {
+        homeBtn.addEventListener("click", () => {
+            // Save current level and game state
+            const gameProgress = {
+                level: currentLevel,
+                score: totalScore,
+                difficulty: difficulty,
+                timestamp: Date.now()
+            };
+            localStorage.setItem("codeQuestSave", JSON.stringify(gameProgress));
+            
+            // Navigate to home page
+            window.location.href = "../home_page.html";
+        });
+    }
+
     // ===== TIME UP RESET BUTTON =====
     if (timeUpResetBtn) {
         timeUpResetBtn.addEventListener("click", () => {

From b47d40f4eec2d2b28838717409e83ad0c82e5b7a Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 22:02:36 +0530
Subject: [PATCH 21/24] enhanced ui of final score page

---
 pages/final_score.css  | 406 ++++++++++++++---------------------------
 pages/final_score.html |  15 +-
 pages/final_score.js   | 134 +++++---------
 3 files changed, 187 insertions(+), 368 deletions(-)

diff --git a/pages/final_score.css b/pages/final_score.css
index 1de9797..8754344 100644
--- a/pages/final_score.css
+++ b/pages/final_score.css
@@ -1,27 +1,34 @@
 /* ========== FINAL SCORE PAGE ========== */
 
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
+/* NIGHT SKY BACKGROUND */
 body {
-    margin: 0;
-    padding: 0;
+    font-family: 'Press Start 2P', monospace;
+    color: #d8ffe6;
+    padding: 10px;
+    overflow-x: hidden;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     background: radial-gradient(circle at center,
         #0e1629 0%,
         #0a1120 40%,
         #050a14 70%,
-        #000000 100%);
+        #000000 100%
+    );
     background-attachment: fixed;
-    font-family: "Press Start 2P", monospace;
-    color: #d8ffe6;
-    overflow-x: hidden;
-    min-height: 100vh;
 }
 
-/* Stars Background */
+/* Stars Container */
 .stars {
     position: fixed;
     left: 0;
@@ -35,16 +42,16 @@ body {
 .star {
     position: absolute;
     background: white;
-    width: 2px;
-    height: 2px;
+    width: 3px;
+    height: 3px;
     border-radius: 50%;
     opacity: 0.8;
     animation: twinkle 2s infinite ease-in-out;
 }
 
 @keyframes twinkle {
-    0%, 100% { opacity: 0.3; }
-    50% { opacity: 1; }
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.3; transform: scale(0.5); }
 }
 
 /* Pixel Particles */
@@ -69,355 +76,215 @@ body {
     position: relative;
 }
 
-/* Score Card */
+/* OUTER BOX - Green border (matches home page) */
 .score-card {
-    background: rgba(14, 22, 41, 0.85);
-    padding: 50px 40px;
-    border-radius: 20px;
-    box-shadow: 0 0 40px rgba(0, 234, 255, 0.3),
-                inset 0 0 20px rgba(0, 234, 255, 0.1);
-    border: 2px solid rgba(0, 234, 255, 0.5);
-    max-width: 600px;
-    width: 100%;
-    text-align: center;
-    backdrop-filter: blur(10px);
-    animation: cardEnter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-@keyframes cardEnter {
-    from {
-        opacity: 0;
-        transform: scale(0.8) rotateX(10deg);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1) rotateX(0deg);
-    }
+    width: 460px;
+    background: rgba(20, 20, 20, 0.92);
+    border: 6px solid #00c244;
+    padding: 20px;
+    box-shadow: 0 0 20px #00c244, inset 0 0 20px #00c244;
+    z-index: 5;
+    position: relative;
 }
 
 /* Title */
 .final-title {
-    font-size: 32px;
-    margin-bottom: 30px;
-    text-shadow: 0 0 15px #00eaff, 0 0 30px #00ff88;
-    color: #00eaff;
-    letter-spacing: 3px;
-    animation: titlePulse 0.8s ease-out;
-}
-
-@keyframes titlePulse {
-    0% {
-        opacity: 0;
-        transform: translateY(-20px);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: #33f6ff;
+    text-shadow: 4px 4px #0a4750, 0 0 15px #33f6ff;
+    letter-spacing: 2px;
+    text-align: center;
+    position: relative;
+    z-index: 6;
 }
 
 /* Stars Display */
 .stars-display {
-    font-size: 50px;
-    margin: 20px 0;
-    animation: starsFloat 1s ease-out;
-    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
-}
-
-@keyframes starsFloat {
-    0% {
-        opacity: 0;
-        transform: translateY(-20px) scale(0.5);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
+    font-size: 36px;
+    margin: 15px 0;
+    text-align: center;
+    color: #ffd700;
+    text-shadow: 0 0 15px #ffd700;
+    position: relative;
+    z-index: 6;
 }
 
 /* Score Message */
 .score-message {
-    font-size: 16px;
-    color: #00ff88;
-    margin: 20px 0;
-    animation: messageSlide 0.8s ease-out 0.2s both;
-    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
+    font-size: 12px;
+    color: #afffe3;
+    margin: 15px 0;
+    text-shadow: 2px 2px #005f47;
     line-height: 1.4;
-    min-height: 50px;
-}
-
-@keyframes messageSlide {
-    from {
-        opacity: 0;
-        transform: translateX(-30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
+    text-align: center;
+    min-height: 20px;
+    position: relative;
+    z-index: 6;
 }
 
 /* Score Display */
 .score-display {
-    margin: 30px 0;
-    padding: 20px;
-    background: rgba(0, 234, 255, 0.1);
-    border: 2px solid rgba(0, 234, 255, 0.3);
-    border-radius: 12px;
-    animation: scoreGlow 0.8s ease-out 0.3s both;
-}
-
-@keyframes scoreGlow {
-    from {
-        opacity: 0;
-        box-shadow: 0 0 0 rgba(0, 234, 255, 0.5);
-    }
-    to {
-        opacity: 1;
-        box-shadow: 0 0 20px rgba(0, 234, 255, 0.3);
-    }
+    margin: 20px 0;
+    padding: 15px;
+    background: rgba(20, 20, 20, 0.8);
+    border: 3px solid #33f6ff;
+    box-shadow: inset 0 0 10px #33f6ff;
+    text-align: center;
+    position: relative;
+    z-index: 6;
 }
 
 .score-label {
     display: block;
-    font-size: 12px;
-    color: #00eaff;
-    margin-bottom: 10px;
-    letter-spacing: 2px;
+    font-size: 10px;
+    color: #33f6ff;
+    margin-bottom: 8px;
+    letter-spacing: 1px;
+    text-shadow: 0 0 8px #33f6ff;
 }
 
-/* Score Number */
 .score-number {
-    font-size: 56px;
+    font-size: 44px;
     font-weight: bold;
-    color: #00ff88;
-    text-shadow: 0 0 15px #00ff88, 0 0 30px rgba(0, 255, 136, 0.5);
-    animation: numberCount 1s ease-out 0.4s both;
-}
-
-@keyframes numberCount {
-    0% {
-        opacity: 0;
-        transform: scale(0.5);
-        text-shadow: 0 0 0 #00ff88;
-    }
-    100% {
-        opacity: 1;
-        transform: scale(1);
-        text-shadow: 0 0 15px #00ff88, 0 0 30px rgba(0, 255, 136, 0.5);
-    }
+    color: #afffe3;
+    text-shadow: 2px 2px #005f47, 0 0 15px #afffe3;
 }
 
 /* Stats Grid */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
-    margin: 30px 0;
-    animation: statsEnter 0.8s ease-out 0.5s both;
-}
-
-@keyframes statsEnter {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+    gap: 10px;
+    margin: 20px 0;
+    position: relative;
+    z-index: 6;
 }
 
 .stat-box {
-    background: rgba(0, 255, 136, 0.05);
-    border: 1px solid rgba(0, 255, 136, 0.3);
-    border-radius: 10px;
-    padding: 12px;
-    transition: all 0.3s ease;
+    background: rgba(20, 20, 20, 0.8);
+    border: 2px solid #afffe3;
+    padding: 10px;
+    text-align: center;
 }
 
 .stat-box:hover {
-    background: rgba(0, 255, 136, 0.15);
-    border-color: rgba(0, 255, 136, 0.6);
-    box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
-    transform: translateY(-3px);
+    background: rgba(51, 246, 255, 0.1);
+    border-color: #33f6ff;
+    box-shadow: inset 0 0 8px #33f6ff;
 }
 
 .stat-label {
     display: block;
-    font-size: 10px;
-    color: #00eaff;
-    margin-bottom: 6px;
-    text-transform: uppercase;
+    font-size: 9px;
+    color: #33f6ff;
+    margin-bottom: 5px;
     letter-spacing: 1px;
+    text-shadow: 0 0 5px #33f6ff;
+    text-transform: uppercase;
 }
 
 .stat-value {
     display: block;
-    font-size: 18px;
-    color: #00ff88;
+    font-size: 16px;
+    color: #afffe3;
     font-weight: bold;
-    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
+    text-shadow: 2px 2px #005f47, 0 0 10px #afffe3;
 }
 
 /* Achievement Section */
 .achievement-section {
-    margin: 30px 0;
-    padding: 20px;
-    background: rgba(255, 215, 0, 0.05);
-    border: 1px solid rgba(255, 215, 0, 0.3);
-    border-radius: 12px;
-    animation: achievementEnter 0.8s ease-out 0.6s both;
-}
-
-@keyframes achievementEnter {
-    from {
-        opacity: 0;
-        transform: scale(0.9);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
+    margin: 20px 0;
+    padding: 15px;
+    background: rgba(20, 20, 20, 0.8);
+    border: 2px solid #33f6ff;
+    box-shadow: inset 0 0 10px #33f6ff;
+    position: relative;
+    z-index: 6;
 }
 
 .achievement-section h3 {
-    font-size: 14px;
-    color: #ffd700;
-    margin-bottom: 12px;
-    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
+    font-size: 12px;
+    color: #33f6ff;
+    margin-bottom: 10px;
+    text-shadow: 0 0 10px #33f6ff;
 }
 
 .achievements-list {
     display: flex;
     flex-wrap: wrap;
-    gap: 10px;
+    gap: 8px;
     justify-content: center;
 }
 
 .achievement-badge {
     background: rgba(255, 215, 0, 0.1);
-    border: 1px solid rgba(255, 215, 0, 0.4);
-    border-radius: 8px;
-    padding: 8px 12px;
-    font-size: 11px;
+    border: 2px solid #ffd700;
+    padding: 6px 10px;
+    font-size: 10px;
     color: #ffd700;
-    animation: badgeFloat 0.5s ease-out;
-}
-
-@keyframes badgeFloat {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+    text-shadow: 0 0 8px #ffd700;
 }
 
 /* Buttons */
 .btn-row {
     display: flex;
     justify-content: center;
-    gap: 20px;
-    margin-top: 30px;
-    animation: buttonsEnter 0.8s ease-out 0.7s both;
-}
-
-@keyframes buttonsEnter {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+    gap: 15px;
+    margin-top: 20px;
+    position: relative;
+    z-index: 6;
 }
 
 .btn {
-    padding: 14px 28px;
-    border: 2px solid;
-    font-size: 13px;
-    font-family: "Press Start 2P", monospace;
+    padding: 12px 24px;
+    border: 3px solid #33f6ff;
+    font-size: 12px;
+    font-family: 'Press Start 2P', monospace;
     cursor: pointer;
-    border-radius: 10px;
-    transition: all 0.3s ease;
+    background: rgba(20, 20, 20, 0.8);
+    color: #33f6ff;
     text-transform: uppercase;
     letter-spacing: 1px;
-    position: relative;
-    overflow: hidden;
-}
-
-.btn::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    transition: left 0.3s ease;
-    z-index: -1;
+    box-shadow: inset 0 0 10px #33f6ff;
+    transition: all 0.2s ease;
 }
 
 .primary-btn {
-    background: linear-gradient(135deg, #00ff88 0%, #00eaff 100%);
-    border-color: #00ff88;
-    color: #000;
-    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
-    font-weight: bold;
+    border-color: #33f6ff;
+    color: #33f6ff;
 }
 
 .primary-btn:hover {
-    transform: translateY(-3px) scale(1.05);
-    box-shadow: 0 0 25px rgba(0, 255, 136, 0.7),
-                0 0 40px rgba(0, 234, 255, 0.5);
-    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
-}
-
-.primary-btn:active {
-    transform: translateY(-1px);
+    background: rgba(51, 246, 255, 0.1);
+    box-shadow: 0 0 20px #33f6ff, inset 0 0 10px #33f6ff;
 }
 
 .secondary-btn {
-    background: rgba(0, 234, 255, 0.1);
-    border-color: #00eaff;
-    color: #00eaff;
-    box-shadow: 0 0 15px rgba(0, 234, 255, 0.4);
+    border-color: #afffe3;
+    color: #afffe3;
 }
 
 .secondary-btn:hover {
-    background: rgba(0, 234, 255, 0.2);
-    transform: translateY(-3px) scale(1.05);
-    box-shadow: 0 0 25px rgba(0, 234, 255, 0.7);
-}
-
-.secondary-btn:active {
-    transform: translateY(-1px);
+    background: rgba(175, 255, 227, 0.1);
+    box-shadow: 0 0 20px #afffe3, inset 0 0 10px #afffe3;
 }
 
 /* Footer */
 .score-footer {
-    margin-top: 30px;
-    padding-top: 20px;
-    border-top: 1px solid rgba(0, 234, 255, 0.2);
+    margin-top: 20px;
+    padding-top: 15px;
+    border-top: 2px solid #33f6ff;
+    position: relative;
+    z-index: 6;
 }
 
 .motivational {
-    font-size: 11px;
-    color: #00eaff;
-    animation: fadeIn 1s ease-out 0.8s both;
-    min-height: 30px;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+    font-size: 10px;
+    color: #afffe3;
+    min-height: 20px;
+    text-shadow: 2px 2px #005f47, 0 0 8px #afffe3;
+    text-align: center;
 }
 
 /* Confetti */
@@ -438,19 +305,16 @@ body {
 /* Responsive */
 @media (max-width: 768px) {
     .score-card {
-        padding: 30px 20px;
+        width: 90%;
+        max-width: 460px;
     }
 
     .final-title {
-        font-size: 24px;
-    }
-
-    .stars-display {
-        font-size: 40px;
+        font-size: 18px;
     }
 
     .score-number {
-        font-size: 42px;
+        font-size: 36px;
     }
 
     .stats-grid {
diff --git a/pages/final_score.html b/pages/final_score.html
index 26351a6..339693c 100644
--- a/pages/final_score.html
+++ b/pages/final_score.html
@@ -17,7 +17,7 @@
     <div class="final-score-container">
         <div class="score-card">
 
-            <h1 class="final-title">🎉 Mission Complete! 🎉</h1>
+            <h1 class="final-title">Mission Complete!</h1>
 
             <!-- Stars Display -->
             <div id="starsDisplay" class="stars-display"></div>
@@ -25,13 +25,13 @@ <h1 class="final-title">🎉 Mission Complete! 🎉</h1>
             <!-- Score Message -->
             <div id="scoreMessage" class="score-message"></div>
 
-            <!-- Score Number -->
+            <!-- Score Display -->
             <div class="score-display">
                 <span class="score-label">Final Score</span>
                 <div class="score-number" id="finalScore">0</div>
             </div>
 
-            <!-- Performance Stats -->
+            <!-- Stats Grid -->
             <div class="stats-grid">
                 <div class="stat-box">
                     <span class="stat-label">Levels Completed</span>
@@ -49,14 +49,14 @@ <h1 class="final-title">🎉 Mission Complete! 🎉</h1>
 
             <!-- Achievement Section -->
             <div class="achievement-section">
-                <h3>🏆 Achievements Unlocked</h3>
+                <h3>🏆 Achievements</h3>
                 <div id="achievementsList" class="achievements-list"></div>
             </div>
 
             <!-- Action Buttons -->
             <div class="btn-row">
-                <button id="playAgainBtn" class="btn primary-btn">🔄 Play Again</button>
-                <button id="homeBtn" class="btn secondary-btn">🏠 Home</button>
+                <button id="playAgainBtn" class="btn primary-btn">Play Again</button>
+                <button id="homeBtn" class="btn secondary-btn">Home</button>
             </div>
 
             <!-- Footer -->
@@ -67,9 +67,6 @@ <h3>🏆 Achievements Unlocked</h3>
         </div>
     </div>
 
-    <!-- Confetti Animation Container -->
-    <div id="confetti-container"></div>
-
     <script src="final_score.js"></script>
 
 </body>
diff --git a/pages/final_score.js b/pages/final_score.js
index c65d771..132efd4 100644
--- a/pages/final_score.js
+++ b/pages/final_score.js
@@ -1,13 +1,12 @@
 // ==========================================================
-//              FINAL SCORE PAGE — ENHANCED
+//              FINAL SCORE PAGE
 // ==========================================================
 
 // Load data from localStorage
 let score = Number(localStorage.getItem("codequestScore")) || 0;
 const difficulty = localStorage.getItem("codequestDifficulty") || "easy";
 
-// ANIMATE score counting
-let displayScore = 0;
+// Elements
 const scoreEl = document.getElementById("finalScore");
 const starsDisplay = document.getElementById("starsDisplay");
 const scoreMessage = document.getElementById("scoreMessage");
@@ -16,18 +15,11 @@ const levelsCompletedEl = document.getElementById("levelsCompleted");
 const difficultyDisplay = document.getElementById("difficultyDisplay");
 const achievementsList = document.getElementById("achievementsList");
 
-// Set max score based on difficulty
-const maxScore = 250; // 5 levels × 50 points each
+// Set max score
+const maxScore = 250;
 
-let animate = setInterval(() => {
-    if (displayScore >= score) {
-        clearInterval(animate);
-        scoreEl.textContent = score + " / " + maxScore;
-    } else {
-        displayScore += Math.ceil((score - displayScore) / 10);
-        scoreEl.textContent = displayScore + " / " + maxScore;
-    }
-}, 20);
+// Display score
+scoreEl.textContent = score + " / " + maxScore;
 
 // Convert score → star rating
 function getStars(score) {
@@ -35,78 +27,46 @@ function getStars(score) {
     if (score >= 200) return "⭐⭐⭐⭐";
     if (score >= 150) return "⭐⭐⭐";
     if (score >= 100) return "⭐⭐";
-    
     return "⭐";
 }
 
 // Convert score → message
 function getMessage(score) {
-    if (score >= 230) return "Incredible! You're a debugging master! 🔥";
-    if (score >= 200) return "Amazing job! You're a pro! 💎";
-    if (score >= 150) return "Great work! Keep improving! 🚀";
-    if (score >= 100) return "Good effort! Try again for a higher score! 💡";
-    return "Keep practicing — you'll get better! 💪";
+    if (score >= 230) return "Incredible! You're a debugging master!";
+    if (score >= 200) return "Amazing job! You're a pro!";
+    if (score >= 150) return "Great work! Keep improving!";
+    if (score >= 100) return "Good effort! Try again for a higher score!";
+    return "Keep practicing — you'll get better!";
 }
 
-// Get achievements based on score and difficulty
+// Get achievements
 function getAchievements(score, difficulty) {
     const achievements = [];
-
-    // Perfect Score Achievement
-    if (score === maxScore) {
-        achievements.push("🎯 Perfect Score!");
-    }
-
-    // Difficulty Achievements
-    if (difficulty === "hard" && score >= 150) {
-        achievements.push("🔥 Hard Master");
-    } else if (difficulty === "medium" && score >= 150) {
-        achievements.push("⚡ Medium Champion");
-    } else if (difficulty === "easy" && score >= 200) {
-        achievements.push("🌟 Easy Expert");
-    }
-
-    // Completion Achievements
-    if (score >= 230) {
-        achievements.push("🏆 Legendary Debugger");
-    } else if (score >= 200) {
-        achievements.push("👑 Pro Debugger");
-    } else if (score >= 150) {
-        achievements.push("💪 Good Debugger");
-    }
-
-    // Speed Achievement (if completed in good time)
-    if (score >= 150) {
-        achievements.push("⏱️ Swift Solver");
-    }
-
-    // Persistence Achievement
-    achievements.push("✨ Mission Accomplished");
-
+    if (score === maxScore) achievements.push("Perfect Score!");
+    if (score >= 230) achievements.push("Legendary Debugger");
+    else if (score >= 200) achievements.push("Pro Debugger");
+    else if (score >= 150) achievements.push("Good Debugger");
+    if (difficulty === "hard" && score >= 150) achievements.push("Hard Master");
+    if (score >= 150) achievements.push("Swift Solver");
+    achievements.push("Mission Accomplished");
     return achievements;
 }
 
 // Get motivational text
 function getMotivationalText(score) {
     const messages = [
-        "Great job! Ready for a higher difficulty?",
+        "Ready for a higher difficulty?",
         "Keep pushing your limits!",
-        "Every bug fixed makes you a better programmer!",
         "Your debugging skills are improving!",
         "Challenge yourself with harder levels!",
-        "Practice makes perfect! Come back tomorrow!"
+        "Practice makes perfect!"
     ];
-
-    if (score >= 230) {
-        return "You're unstoppable! Try teaching others!";
-    } else if (score >= 200) {
-        return "You've mastered the art of debugging!";
-    }
-
+    if (score >= 230) return "You're unstoppable! Try teaching others!";
+    if (score >= 200) return "You've mastered the art of debugging!";
     return messages[Math.floor(Math.random() * messages.length)];
 }
 
-// Display stars + message
+// Display content
 starsDisplay.textContent = getStars(score);
 scoreMessage.textContent = getMessage(score);
 motivationalText.textContent = getMotivationalText(score);
@@ -118,35 +78,33 @@ achievementsList.innerHTML = achievements
     .map(achievement => `<div class="achievement-badge">${achievement}</div>`)
     .join("");
 
-// Create confetti effect
-function createConfetti() {
-    const confettiContainer = document.getElementById("confetti-container");
-    const confettiPieces = ["🎉", "⭐", "🎊", "✨", "🏆", "💎", "🔥"];
+// Initialize stars background
+function initStars() {
+    const starsContainer = document.getElementById("stars");
+    const starCount = 100;
     
-    for (let i = 0; i < 30; i++) {
-        setTimeout(() => {
-            const confetti = document.createElement("div");
-            confetti.classList.add("confetti");
-            confetti.textContent = confettiPieces[Math.floor(Math.random() * confettiPieces.length)];
-            
-            confetti.style.left = Math.random() * 100 + "vw";
-            confetti.style.top = "-20px";
-            confetti.style.opacity = "1";
-            
-            const duration = 2 + Math.random() * 1;
-            confetti.style.animationDuration = duration + "s";
-            confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
-            
-            confettiContainer.appendChild(confetti);
-            
-            setTimeout(() => confetti.remove(), duration * 1000);
-        }, i * 50);
+    for (let i = 0; i < starCount; i++) {
+        const star = document.createElement("div");
+        star.classList.add("star");
+        star.style.left = Math.random() * 100 + "%";
+        star.style.top = Math.random() * 100 + "%";
+        starsContainer.appendChild(star);
     }
 }
 
-// Trigger confetti on page load
 window.addEventListener("load", () => {
-    createConfetti();
+    initStars();
+});
+
+// Button Actions
+document.getElementById("playAgainBtn").addEventListener("click", () => {
+    localStorage.removeItem("codequestScore");
+    localStorage.removeItem("codequestCurrentLevel");
+    window.location.href = "../levels/level1.html";
+});
+
+document.getElementById("homeBtn").addEventListener("click", () => {
+    window.location.href = "../home_page.html";
 });
 
 // Create background stars

From 4354e809adc34017497d0e343cfa97246fcce474 Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 22:19:52 +0530
Subject: [PATCH 22/24] added sandbox theme

---
 pages/final_score.css | 95 +++++++++++++++++++++++++++++--------------
 1 file changed, 65 insertions(+), 30 deletions(-)

diff --git a/pages/final_score.css b/pages/final_score.css
index 8754344..de00e16 100644
--- a/pages/final_score.css
+++ b/pages/final_score.css
@@ -78,41 +78,64 @@ body {
 
 /* OUTER BOX - Green border (matches home page) */
 .score-card {
-    width: 460px;
+    width: 550px;
     background: rgba(20, 20, 20, 0.92);
     border: 6px solid #00c244;
-    padding: 20px;
+    padding: 30px;
     box-shadow: 0 0 20px #00c244, inset 0 0 20px #00c244;
     z-index: 5;
     position: relative;
+    animation: floatBox 3s ease-in-out infinite;
+}
+
+/* INNER BORDER - Cyan border (matches home page) */
+.score-card::before {
+    content: '';
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    right: 15px;
+    bottom: 15px;
+    border: 4px solid #33f6ff;
+    box-shadow: inset 0 0 15px #33f6ff;
+    pointer-events: none;
+    z-index: 4;
+}
+
+@keyframes floatBox {
+    0%   { transform: translateY(0px); }
+    50%  { transform: translateY(-10px); }
+    100% { transform: translateY(0px); }
 }
 
 /* Title */
 .final-title {
-    font-size: 24px;
-    margin-bottom: 20px;
+    font-size: 28px;
+    margin-bottom: 25px;
     color: #33f6ff;
     text-shadow: 4px 4px #0a4750, 0 0 15px #33f6ff;
     letter-spacing: 2px;
     text-align: center;
     position: relative;
     z-index: 6;
+    font-family: 'Press Start 2P', monospace;
 }
 
 /* Stars Display */
 .stars-display {
-    font-size: 36px;
-    margin: 15px 0;
+    font-size: 44px;
+    margin: 20px 0;
     text-align: center;
     color: #ffd700;
     text-shadow: 0 0 15px #ffd700;
     position: relative;
     z-index: 6;
+    font-family: 'Press Start 2P', monospace;
 }
 
 /* Score Message */
 .score-message {
-    font-size: 12px;
+    font-size: 13px;
     color: #afffe3;
     margin: 15px 0;
     text-shadow: 2px 2px #005f47;
@@ -121,42 +144,46 @@ body {
     min-height: 20px;
     position: relative;
     z-index: 6;
+    font-family: 'Press Start 2P', monospace;
 }
 
 /* Score Display */
 .score-display {
-    margin: 20px 0;
-    padding: 15px;
+    margin: 25px 0;
+    padding: 18px;
     background: rgba(20, 20, 20, 0.8);
     border: 3px solid #33f6ff;
     box-shadow: inset 0 0 10px #33f6ff;
     text-align: center;
     position: relative;
     z-index: 6;
+    font-family: 'Press Start 2P', monospace;
 }
 
 .score-label {
     display: block;
-    font-size: 10px;
+    font-size: 11px;
     color: #33f6ff;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
     letter-spacing: 1px;
     text-shadow: 0 0 8px #33f6ff;
+    font-family: 'Press Start 2P', monospace;
 }
 
 .score-number {
-    font-size: 44px;
+    font-size: 48px;
     font-weight: bold;
     color: #afffe3;
     text-shadow: 2px 2px #005f47, 0 0 15px #afffe3;
+    font-family: 'Press Start 2P', monospace;
 }
 
 /* Stats Grid */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
-    margin: 20px 0;
+    gap: 12px;
+    margin: 25px 0;
     position: relative;
     z-index: 6;
 }
@@ -164,7 +191,7 @@ body {
 .stat-box {
     background: rgba(20, 20, 20, 0.8);
     border: 2px solid #afffe3;
-    padding: 10px;
+    padding: 12px;
     text-align: center;
 }
 
@@ -178,66 +205,71 @@ body {
     display: block;
     font-size: 9px;
     color: #33f6ff;
-    margin-bottom: 5px;
+    margin-bottom: 6px;
     letter-spacing: 1px;
     text-shadow: 0 0 5px #33f6ff;
     text-transform: uppercase;
+    font-family: 'Press Start 2P', monospace;
 }
 
 .stat-value {
     display: block;
-    font-size: 16px;
+    font-size: 18px;
     color: #afffe3;
     font-weight: bold;
     text-shadow: 2px 2px #005f47, 0 0 10px #afffe3;
+    font-family: 'Press Start 2P', monospace;
 }
 
 /* Achievement Section */
 .achievement-section {
-    margin: 20px 0;
-    padding: 15px;
+    margin: 25px 0;
+    padding: 18px;
     background: rgba(20, 20, 20, 0.8);
     border: 2px solid #33f6ff;
     box-shadow: inset 0 0 10px #33f6ff;
     position: relative;
     z-index: 6;
+    font-family: 'Press Start 2P', monospace;
 }
 
 .achievement-section h3 {
     font-size: 12px;
     color: #33f6ff;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
     text-shadow: 0 0 10px #33f6ff;
+    font-family: 'Press Start 2P', monospace;
 }
 
 .achievements-list {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: 10px;
     justify-content: center;
 }
 
 .achievement-badge {
     background: rgba(255, 215, 0, 0.1);
     border: 2px solid #ffd700;
-    padding: 6px 10px;
+    padding: 8px 12px;
     font-size: 10px;
     color: #ffd700;
     text-shadow: 0 0 8px #ffd700;
+    font-family: 'Press Start 2P', monospace;
 }
 
 /* Buttons */
 .btn-row {
     display: flex;
     justify-content: center;
-    gap: 15px;
-    margin-top: 20px;
+    gap: 20px;
+    margin-top: 25px;
     position: relative;
     z-index: 6;
 }
 
 .btn {
-    padding: 12px 24px;
+    padding: 14px 28px;
     border: 3px solid #33f6ff;
     font-size: 12px;
     font-family: 'Press Start 2P', monospace;
@@ -248,6 +280,7 @@ body {
     letter-spacing: 1px;
     box-shadow: inset 0 0 10px #33f6ff;
     transition: all 0.2s ease;
+    border-radius: 0;
 }
 
 .primary-btn {
@@ -272,11 +305,12 @@ body {
 
 /* Footer */
 .score-footer {
-    margin-top: 20px;
-    padding-top: 15px;
+    margin-top: 25px;
+    padding-top: 18px;
     border-top: 2px solid #33f6ff;
     position: relative;
     z-index: 6;
+    font-family: 'Press Start 2P', monospace;
 }
 
 .motivational {
@@ -285,6 +319,7 @@ body {
     min-height: 20px;
     text-shadow: 2px 2px #005f47, 0 0 8px #afffe3;
     text-align: center;
+    font-family: 'Press Start 2P', monospace;
 }
 
 /* Confetti */
@@ -306,15 +341,15 @@ body {
 @media (max-width: 768px) {
     .score-card {
         width: 90%;
-        max-width: 460px;
+        max-width: 550px;
     }
 
     .final-title {
-        font-size: 18px;
+        font-size: 22px;
     }
 
     .score-number {
-        font-size: 36px;
+        font-size: 40px;
     }
 
     .stats-grid {

From b9946118a75d71ea669ef4d644830a7b2608a007 Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Wed, 3 Dec 2025 22:33:47 +0530
Subject: [PATCH 23/24] added question statement on each level

---
 levels/level1.html         |  3 +++
 levels/level2.html         |  3 +++
 levels/level3.html         |  3 +++
 levels/level4.html         |  3 +++
 levels/level5.html         |  3 +++
 pages/pages_style/game.css | 14 ++++++++++++++
 pages_script/game.js       | 22 ++++++++++++++++++++++
 7 files changed, 51 insertions(+)

diff --git a/levels/level1.html b/levels/level1.html
index 9e92b78..4c7b4c8 100644
--- a/levels/level1.html
+++ b/levels/level1.html
@@ -35,6 +35,9 @@ <h1>Level 1</h1>
     <!-- Game Message -->
     <section id="gameMessage" class="game-message"></section>
 
+    <!-- Question Display -->
+    <section id="questionDisplay" class="question-display"></section>
+
     <!-- Main Game Area -->
     <main id="gameArea" class="game-area"></main>
 
diff --git a/levels/level2.html b/levels/level2.html
index 5f53f4b..382eb3b 100644
--- a/levels/level2.html
+++ b/levels/level2.html
@@ -31,6 +31,9 @@ <h1>Level 2</h1>
 
     <section id="gameMessage" class="game-message"></section>
 
+    <!-- Question Display -->
+    <section id="questionDisplay" class="question-display"></section>
+
     <main id="gameArea" class="game-area"></main>
 
     <section class="challenge-box">
diff --git a/levels/level3.html b/levels/level3.html
index ed0ca1f..bc24e56 100644
--- a/levels/level3.html
+++ b/levels/level3.html
@@ -31,6 +31,9 @@ <h1>Level 3</h1>
 
     <section id="gameMessage" class="game-message"></section>
 
+    <!-- Question Display -->
+    <section id="questionDisplay" class="question-display"></section>
+
     <main id="gameArea" class="game-area"></main>
 
     <section class="challenge-box">
diff --git a/levels/level4.html b/levels/level4.html
index 2f3c2b9..9b73d7f 100644
--- a/levels/level4.html
+++ b/levels/level4.html
@@ -31,6 +31,9 @@ <h1>Level 4</h1>
 
     <section id="gameMessage" class="game-message"></section>
 
+    <!-- Question Display -->
+    <section id="questionDisplay" class="question-display"></section>
+
     <main id="gameArea" class="game-area"></main>
 
     <section class="challenge-box">
diff --git a/levels/level5.html b/levels/level5.html
index ac47b15..5867d58 100644
--- a/levels/level5.html
+++ b/levels/level5.html
@@ -31,6 +31,9 @@ <h1>Level 5</h1>
 
     <section id="gameMessage" class="game-message"></section>
 
+    <!-- Question Display -->
+    <section id="questionDisplay" class="question-display"></section>
+
     <main id="gameArea" class="game-area"></main>
 
     <section class="challenge-box">
diff --git a/pages/pages_style/game.css b/pages/pages_style/game.css
index 24a65c1..b67e6b1 100644
--- a/pages/pages_style/game.css
+++ b/pages/pages_style/game.css
@@ -360,6 +360,20 @@ body {
     animation: pop 0.3s ease-out;
 }
 
+/* QUESTION DISPLAY */
+.question-display {
+    background: rgba(0, 255, 255, 0.08);
+    border: 2px solid rgba(0, 255, 255, 0.4);
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 15px;
+    font-size: 16px;
+    color: #afffe3;
+    line-height: 1.5;
+    text-align: center;
+    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.1);
+}
+
 /* ADDITIONAL BUTTON STYLES (Pixel 3D) */
 button {
     font-family: 'Press Start 2P', monospace;
diff --git a/pages_script/game.js b/pages_script/game.js
index 8c062a0..195bbbe 100644
--- a/pages_script/game.js
+++ b/pages_script/game.js
@@ -79,6 +79,7 @@ document.addEventListener("DOMContentLoaded", () => {
         easy: [
             {
                 number: 1,
+                question: "Fix the code: Arrays are 0-indexed. Change items[3] to the correct index and use the correct function to get the list length.",
                 snippet: `items = ["pen", "book", "bag"]
 print(items[3])
 print(items.length)`,
@@ -110,6 +111,7 @@ print(len(items))`,
 
             {
                 number: 2,
+                question: "Fix the code: Add proper indentation to the loop, fix the variable name typo, and ensure the print statement uses the correct variable name.",
                 snippet: `numbers = [1, 2, 3, 4]
 total = 0
 
@@ -150,6 +152,7 @@ print(total)`,
 
             {
                 number: 3,
+                question: "Fix the code: Complete the function definition with proper syntax, fix variable name typos, remove inappropriate modifications, and use the correct return variable.",
                 snippet: `def sumList(nums)
 total = 0
 for i in range(len(num)):
@@ -197,6 +200,7 @@ print(sumList(numbers))`,
 
             {
                 number: 4,
+                question: "Fix the code: Replace the incorrect assignment with the correct list method to add words to the collection. Use .append() instead of replacing the list.",
                 snippet: `def collect_unique_words(text):
     words = text.split()
     unique = []
@@ -252,6 +256,7 @@ print(collect_unique_words(sentence))`,
 
             {
                 number: 5,
+                question: "Fix the code: The function arguments are in the wrong order. Look at the function definition and call it with the correct parameter order.",
                 snippet: `def get_user_age(users, name):
     for user in users:
         if user["name"] == name:
@@ -301,6 +306,7 @@ print(get_user_age(users, "Alice"))`,
         medium: [
             {
                 number: 1,
+                question: "Fix the code: In the if statement condition, use the comparison operator '==' instead of the assignment operator '=' to check if numbers are even.",
                 snippet: `numbers = [2, 4, 6, 8]
 for n in numbers:
     if n % 2 = 0:
@@ -332,6 +338,7 @@ for n in numbers:
 
             {
                 number: 2,
+                question: "Fix the code: Add proper indentation to the function body and provide both required arguments when calling the function.",
                 snippet: `def multiply(a, b):
 return a * b
 
@@ -364,6 +371,7 @@ print(multiply(5, 3))`,
 
             {
                 number: 3,
+                question: "Fix the code: The 'gender' key doesn't exist in the dictionary. Use the safe .get() method instead of direct indexing to avoid a KeyError.",
                 snippet: `user = {"name": "Ava", "age": 20}
 print(user["gender"])`,
                 hints: [
@@ -391,6 +399,7 @@ print(user.get("gender", "Not specified"))`,
 
             {
                 number: 4,
+                question: "Fix the code: Initialize max with the first element of the list to handle negative numbers correctly, and rename the variable to avoid shadowing built-in functions.",
                 snippet: `def find_max(nums):
     max = 0
     for n in nums:
@@ -432,6 +441,7 @@ print(find_max([-5, -10, -3]))`,
 
             {
                 number: 5,
+                question: "Fix the code: Add the required colon at the end of the for loop statement. Python requires a colon before any indented block.",
                 snippet: `for i in range(1, 5)
     print(i)`,
                 hints: [
@@ -462,6 +472,7 @@ print(find_max([-5, -10, -3]))`,
         hard: [
             {
                 number: 1,
+                question: "Fix the code: Replace the mutable default argument [] with None to avoid data persisting across function calls. Create a new list inside the function instead.",
                 snippet: `def add_item(item, items=[]):
     items.append(item)
     return items
@@ -502,6 +513,7 @@ print(add_item("banana"))`,
 
             {
                 number: 2,
+                question: "Fix the code: The base case for recursion is wrong. In mathematics, 0! equals 1, not 0. Fix the return statement for the base case.",
                 snippet: `def factorial(n):
     if n == 0:
         return 0
@@ -542,6 +554,7 @@ print(factorial(0))`,
 
             {
                 number: 3,
+                question: "Fix the code: The file.close() method is missing parentheses and won't execute. Use a 'with' statement (context manager) for proper file handling instead.",
                 snippet: `file = open("data.txt", "r")
 lines = file.readlines()
 for line in lines:
@@ -576,6 +589,7 @@ file.close`,
 
             {
                 number: 4,
+                question: "Fix the code: The variable name in the list comprehension doesn't match the expression. Use 'n' in the loop variable to match the 'n * n' expression.",
                 snippet: `nums = [1, 2, 3, 4]
 squares = [n * n for i in nums]
 print(squares)`,
@@ -606,6 +620,7 @@ print(squares)`,
 
             {
                 number: 5,
+                question: "Fix the code: Replace the bare 'except:' clause with a specific exception type (ZeroDivisionError). Bare except clauses hide bugs and catch all exceptions.",
                 snippet: `def safe_divide(a, b):
     try:
         return a / b
@@ -696,6 +711,13 @@ print(safe_divide(10, 0))`,
         scoreDisplay.textContent = `Score: ${totalScore}`;
         gameMessage.textContent  = `🚀 Level ${level.number} Started!`;
 
+        // Display question
+        const questionDisplay = document.getElementById("questionDisplay");
+        if (questionDisplay && level.question) {
+            questionDisplay.textContent = level.question;
+            questionDisplay.classList.remove("hidden");
+        }
+
         codeSnippetEl.textContent      = level.snippet;
         codeSnippetEl.contentEditable  = "true";
         codeSnippetEl.style.pointerEvents = "auto";

From 1166a68ed5e1b6e7b83472c1888134ecdaac11c0 Mon Sep 17 00:00:00 2001
From: Revaa Rathore <rathorerevaa2007@gmail.com>
Date: Thu, 4 Dec 2025 16:31:30 +0530
Subject: [PATCH 24/24] added funtionality to volume and controls button

---
 home_page.css              | 177 +++++++++++++++++++++++++++++++++++++
 home_page.html             |  79 +++++++++++++++++
 home_page.js               | 152 ++++++++++++++++++++++++++++++-
 levels/level1.html         |   6 +-
 levels/level2.html         |   4 +-
 levels/level3.html         |   4 +-
 levels/level4.html         |   4 +-
 levels/level5.html         |   4 +-
 pages/pages_style/game.css | 136 ++++++++++++++++++----------
 pages_script/game.js       |  14 ++-
 update.txt                 |  12 ---
 11 files changed, 509 insertions(+), 83 deletions(-)
 delete mode 100644 update.txt

diff --git a/home_page.css b/home_page.css
index 1cee04f..5871c71 100644
--- a/home_page.css
+++ b/home_page.css
@@ -532,4 +532,181 @@ footer:hover {
 
 .close-btn:active {
     transform: scale(0.95);
+}
+
+/* ===== VOLUME CONTENT STYLING ===== */
+.volume-content {
+    font-family: Arial, sans-serif;
+    font-size: 12px;
+    color: #d8ffe6;
+}
+
+.volume-control {
+    margin-bottom: 25px;
+}
+
+.volume-control label {
+    display: block;
+    margin-bottom: 8px;
+    color: #00eaff;
+    font-weight: bold;
+    font-family: 'Press Start 2P', monospace;
+    font-size: 10px;
+}
+
+.volume-slider-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.volume-slider {
+    flex: 1;
+    height: 6px;
+    border-radius: 3px;
+    background: linear-gradient(to right, 
+        #00eaff 0%, 
+        #00ff88 50%, 
+        #00eaff 100%);
+    border: 2px solid rgba(0, 234, 255, 0.4);
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+}
+
+.volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #00ff88;
+    border: 2px solid #00eaff;
+    cursor: pointer;
+    box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
+    transition: all 0.2s ease;
+}
+
+.volume-slider::-webkit-slider-thumb:hover {
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 15px rgba(0, 255, 136, 0.8);
+}
+
+.volume-slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #00ff88;
+    border: 2px solid #00eaff;
+    cursor: pointer;
+    box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
+    transition: all 0.2s ease;
+}
+
+.volume-slider::-moz-range-thumb:hover {
+    width: 20px;
+    height: 20px;
+    box-shadow: 0 0 15px rgba(0, 255, 136, 0.8);
+}
+
+.volume-percentage {
+    min-width: 45px;
+    text-align: right;
+    color: #00ff88;
+    font-weight: bold;
+    font-family: 'Courier New', monospace;
+}
+
+.volume-buttons {
+    display: flex;
+    gap: 12px;
+    margin-top: 20px;
+    justify-content: center;
+}
+
+.volume-btn {
+    background: rgba(0, 234, 255, 0.15);
+    border: 2px solid #00eaff;
+    color: #00eaff;
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-family: 'Press Start 2P', monospace;
+    font-size: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
+}
+
+.volume-btn:hover:not(.hidden) {
+    background: rgba(0, 234, 255, 0.3);
+    box-shadow: 0 0 15px rgba(0, 234, 255, 0.6);
+    transform: translateY(-2px);
+}
+
+.volume-btn:active:not(.hidden) {
+    transform: translateY(0);
+}
+
+.volume-btn.hidden {
+    display: none;
+}
+
+.volume-note {
+    margin-top: 15px;
+    text-align: center;
+    color: #afffe3;
+    font-size: 11px;
+    font-style: italic;
+}
+
+/* Controls Content Styling */
+.controls-content {
+    font-family: Arial, sans-serif;
+    font-size: 12px;
+    color: #d8ffe6;
+    line-height: 1.8;
+}
+
+.controls-content p {
+    margin-bottom: 12px;
+    color: #00eaff;
+    font-weight: bold;
+}
+
+.controls-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 15px 0;
+}
+
+.controls-table tr {
+    border-bottom: 1px solid rgba(0, 234, 255, 0.3);
+}
+
+.controls-table td {
+    padding: 10px 8px;
+    text-align: left;
+}
+
+.controls-table td:first-child {
+    width: 40%;
+    text-align: center;
+}
+
+.controls-table kbd {
+    background: rgba(0, 234, 255, 0.2);
+    border: 2px solid #00eaff;
+    border-radius: 4px;
+    padding: 4px 8px;
+    color: #00ff88;
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    display: inline-block;
+    box-shadow: 0 2px 5px rgba(0, 234, 255, 0.2);
+}
+
+.controls-table td:last-child {
+    color: #d8ffe6;
 }
\ No newline at end of file
diff --git a/home_page.html b/home_page.html
index aa41ec1..d23bb89 100644
--- a/home_page.html
+++ b/home_page.html
@@ -104,6 +104,7 @@ <h1 class="game-title">🧩 Code Quest: Debug the Matrix</h1>
                         <td><label for="settingsSelect">Settings</label></td>
                         <td>
                             <select id="settingsSelect" class="menu-select" aria-label="Settings menu">
+                                <option value="none">-- Select --</option>
                                 <option value="volume">Volume</option>
                                 <option value="controls">Controls</option>
                                 <option value="about">About Game</option>
@@ -118,6 +119,84 @@ <h1 class="game-title">🧩 Code Quest: Debug the Matrix</h1>
 
     </div>
 
+    <!-- VOLUME POPUP -->
+    <div id="volumePopup" class="popup-overlay hidden">
+        <div class="popup-box">
+            <button id="closeVolumeBtn" class="close-btn" aria-label="Close volume popup">✕</button>
+            <h2>🔊 Volume Settings</h2>
+            <div class="volume-content">
+                <div class="volume-control">
+                    <label for="masterVolume">Master Volume:</label>
+                    <div class="volume-slider-container">
+                        <input type="range" id="masterVolume" class="volume-slider" min="0" max="100" value="70" aria-label="Master volume control">
+                        <span id="volumePercentage" class="volume-percentage">70%</span>
+                    </div>
+                </div>
+
+                <div class="volume-control">
+                    <label for="musicVolume">Music Volume:</label>
+                    <div class="volume-slider-container">
+                        <input type="range" id="musicVolume" class="volume-slider" min="0" max="100" value="60" aria-label="Music volume control">
+                        <span id="musicPercentage" class="volume-percentage">60%</span>
+                    </div>
+                </div>
+
+                <div class="volume-control">
+                    <label for="sfxVolume">Sound Effects:</label>
+                    <div class="volume-slider-container">
+                        <input type="range" id="sfxVolume" class="volume-slider" min="0" max="100" value="80" aria-label="Sound effects volume control">
+                        <span id="sfxPercentage" class="volume-percentage">80%</span>
+                    </div>
+                </div>
+
+                <div class="volume-buttons">
+                    <button id="muteAllBtn" class="volume-btn">🔇 Mute All</button>
+                    <button id="unmuteAllBtn" class="volume-btn hidden">🔊 Unmute All</button>
+                </div>
+
+                <p class="volume-note">💡 Volume settings are saved automatically</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- CONTROLS POPUP -->
+    <div id="controlsPopup" class="popup-overlay hidden">
+        <div class="popup-box">
+            <button id="closeControlsBtn" class="close-btn" aria-label="Close controls popup">✕</button>
+            <h2>🎮 Game Controls</h2>
+            <div class="controls-content">
+                <p><strong>Keyboard Shortcuts:</strong></p>
+                <table class="controls-table">
+                    <tr>
+                        <td><kbd>Enter</kbd></td>
+                        <td>Submit your answer</td>
+                    </tr>
+                    <tr>
+                        <td><kbd>H</kbd></td>
+                        <td>Get a hint</td>
+                    </tr>
+                    <tr>
+                        <td><kbd>A</kbd></td>
+                        <td>Show answer</td>
+                    </tr>
+                    <tr>
+                        <td><kbd>P</kbd></td>
+                        <td>Pause / Resume</td>
+                    </tr>
+                    <tr>
+                        <td><kbd>Space</kbd></td>
+                        <td>Start game</td>
+                    </tr>
+                    <tr>
+                        <td><kbd>N</kbd></td>
+                        <td>Next level</td>
+                    </tr>
+                </table>
+                <p style="margin-top: 20px; font-size: 12px; color: #afffe3;">💡 Tip: Use keyboard shortcuts to speed up your gameplay!</p>
+            </div>
+        </div>
+    </div>
+
     <!-- ABOUT POPUP -->
     <div id="aboutPopup" class="popup-overlay hidden">
         <div class="popup-box">
diff --git a/home_page.js b/home_page.js
index e7dadc2..5c1e51e 100644
--- a/home_page.js
+++ b/home_page.js
@@ -61,10 +61,14 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     /* ----------------------------------------------------
-       SETTINGS MENU — ABOUT POPUP
+       SETTINGS MENU — ABOUT, CONTROLS & VOLUME
     ----------------------------------------------------- */
     const aboutPopup = document.getElementById("aboutPopup");
     const closeAboutBtn = document.getElementById("closeAboutBtn");
+    const controlsPopup = document.getElementById("controlsPopup");
+    const closeControlsBtn = document.getElementById("closeControlsBtn");
+    const volumePopup = document.getElementById("volumePopup");
+    const closeVolumeBtn = document.getElementById("closeVolumeBtn");
 
     if (settingsSelect) {
         settingsSelect.addEventListener("change", (e) => {
@@ -75,10 +79,20 @@ document.addEventListener("DOMContentLoaded", function () {
                 if (aboutPopup) {
                     aboutPopup.classList.remove("hidden");
                 }
+            } else if (selectedValue === "controls") {
+                // Show controls popup
+                if (controlsPopup) {
+                    controlsPopup.classList.remove("hidden");
+                }
+            } else if (selectedValue === "volume") {
+                // Show volume popup
+                if (volumePopup) {
+                    volumePopup.classList.remove("hidden");
+                }
             }
 
             // Reset select to default after action
-            settingsSelect.value = "volume";
+            settingsSelect.value = "none";
         });
     }
 
@@ -98,6 +112,140 @@ document.addEventListener("DOMContentLoaded", function () {
         });
     }
 
+    // Close controls popup when close button is clicked
+    if (closeControlsBtn && controlsPopup) {
+        closeControlsBtn.addEventListener("click", () => {
+            controlsPopup.classList.add("hidden");
+        });
+    }
+
+    // Close controls popup when clicking outside (on the overlay)
+    if (controlsPopup) {
+        controlsPopup.addEventListener("click", (e) => {
+            if (e.target === controlsPopup) {
+                controlsPopup.classList.add("hidden");
+            }
+        });
+    }
+
+    // Close volume popup when close button is clicked
+    if (closeVolumeBtn && volumePopup) {
+        closeVolumeBtn.addEventListener("click", () => {
+            volumePopup.classList.add("hidden");
+        });
+    }
+
+    // Close volume popup when clicking outside (on the overlay)
+    if (volumePopup) {
+        volumePopup.addEventListener("click", (e) => {
+            if (e.target === volumePopup) {
+                volumePopup.classList.add("hidden");
+            }
+        });
+    }
+
+    /* ============ VOLUME CONTROLS ============ */
+    const masterVolumeSlider = document.getElementById("masterVolume");
+    const musicVolumeSlider = document.getElementById("musicVolume");
+    const sfxVolumeSlider = document.getElementById("sfxVolume");
+    const volumePercentageDisplay = document.getElementById("volumePercentage");
+    const musicPercentageDisplay = document.getElementById("musicPercentage");
+    const sfxPercentageDisplay = document.getElementById("sfxPercentage");
+    const muteAllBtn = document.getElementById("muteAllBtn");
+    const unmuteAllBtn = document.getElementById("unmuteAllBtn");
+
+    // Load saved volume settings from localStorage
+    function loadVolumeSettings() {
+        const savedMaster = Number(localStorage.getItem("codeQuestMasterVolume")) || 70;
+        const savedMusic = Number(localStorage.getItem("codeQuestMusicVolume")) || 60;
+        const savedSfx = Number(localStorage.getItem("codeQuestSfxVolume")) || 80;
+
+        if (masterVolumeSlider) {
+            masterVolumeSlider.value = savedMaster;
+            volumePercentageDisplay.textContent = savedMaster + "%";
+        }
+
+        if (musicVolumeSlider) {
+            musicVolumeSlider.value = savedMusic;
+            musicPercentageDisplay.textContent = savedMusic + "%";
+        }
+
+        if (sfxVolumeSlider) {
+            sfxVolumeSlider.value = savedSfx;
+            sfxPercentageDisplay.textContent = savedSfx + "%";
+        }
+    }
+
+    // Save volume settings to localStorage
+    function saveVolumeSettings() {
+        localStorage.setItem("codeQuestMasterVolume", masterVolumeSlider.value);
+        localStorage.setItem("codeQuestMusicVolume", musicVolumeSlider.value);
+        localStorage.setItem("codeQuestSfxVolume", sfxVolumeSlider.value);
+    }
+
+    // Master volume slider change event
+    if (masterVolumeSlider) {
+        masterVolumeSlider.addEventListener("input", (e) => {
+            volumePercentageDisplay.textContent = e.target.value + "%";
+            saveVolumeSettings();
+        });
+    }
+
+    // Music volume slider change event
+    if (musicVolumeSlider) {
+        musicVolumeSlider.addEventListener("input", (e) => {
+            musicPercentageDisplay.textContent = e.target.value + "%";
+            saveVolumeSettings();
+        });
+    }
+
+    // SFX volume slider change event
+    if (sfxVolumeSlider) {
+        sfxVolumeSlider.addEventListener("input", (e) => {
+            sfxPercentageDisplay.textContent = e.target.value + "%";
+            saveVolumeSettings();
+        });
+    }
+
+    // Mute all button
+    if (muteAllBtn) {
+        muteAllBtn.addEventListener("click", () => {
+            if (masterVolumeSlider) masterVolumeSlider.value = 0;
+            if (musicVolumeSlider) musicVolumeSlider.value = 0;
+            if (sfxVolumeSlider) sfxVolumeSlider.value = 0;
+
+            volumePercentageDisplay.textContent = "0%";
+            musicPercentageDisplay.textContent = "0%";
+            sfxPercentageDisplay.textContent = "0%";
+
+            muteAllBtn.classList.add("hidden");
+            unmuteAllBtn.classList.remove("hidden");
+
+            saveVolumeSettings();
+        });
+    }
+
+    // Unmute all button
+    if (unmuteAllBtn) {
+        unmuteAllBtn.addEventListener("click", () => {
+            if (masterVolumeSlider) masterVolumeSlider.value = 70;
+            if (musicVolumeSlider) musicVolumeSlider.value = 60;
+            if (sfxVolumeSlider) sfxVolumeSlider.value = 80;
+
+            volumePercentageDisplay.textContent = "70%";
+            musicPercentageDisplay.textContent = "60%";
+            sfxPercentageDisplay.textContent = "80%";
+
+            muteAllBtn.classList.remove("hidden");
+            unmuteAllBtn.classList.add("hidden");
+
+            saveVolumeSettings();
+        });
+    }
+
+    // Load volume settings on page load
+    loadVolumeSettings();
+
     /* ----------------------------------------------------
        BACKGROUND STARFIELD
     ----------------------------------------------------- */
diff --git a/levels/level1.html b/levels/level1.html
index 4c7b4c8..5845191 100644
--- a/levels/level1.html
+++ b/levels/level1.html
@@ -35,12 +35,12 @@ <h1>Level 1</h1>
     <!-- Game Message -->
     <section id="gameMessage" class="game-message"></section>
 
-    <!-- Question Display -->
-    <section id="questionDisplay" class="question-display"></section>
-
     <!-- Main Game Area -->
     <main id="gameArea" class="game-area"></main>
 
+    <!-- Question Display -->
+    <section id="questionDisplay" class="question-display"></section>
+
     <!-- Code Snippet Box -->
     <section class="challenge-box">
         <pre id="codeSnippet" contenteditable="true"></pre>
diff --git a/levels/level2.html b/levels/level2.html
index 382eb3b..805f1e7 100644
--- a/levels/level2.html
+++ b/levels/level2.html
@@ -31,11 +31,11 @@ <h1>Level 2</h1>
 
     <section id="gameMessage" class="game-message"></section>
 
+    <main id="gameArea" class="game-area"></main>
+
     <!-- Question Display -->
     <section id="questionDisplay" class="question-display"></section>
 
-    <main id="gameArea" class="game-area"></main>
-
     <section class="challenge-box">
         <pre id="codeSnippet" contenteditable="true"></pre>
     </section>
diff --git a/levels/level3.html b/levels/level3.html
index bc24e56..b52c699 100644
--- a/levels/level3.html
+++ b/levels/level3.html
@@ -31,11 +31,11 @@ <h1>Level 3</h1>
 
     <section id="gameMessage" class="game-message"></section>
 
+    <main id="gameArea" class="game-area"></main>
+
     <!-- Question Display -->
     <section id="questionDisplay" class="question-display"></section>
 
-    <main id="gameArea" class="game-area"></main>
-
     <section class="challenge-box">
         <pre id="codeSnippet" contenteditable="true"></pre>
     </section>
diff --git a/levels/level4.html b/levels/level4.html
index 9b73d7f..ff73a8b 100644
--- a/levels/level4.html
+++ b/levels/level4.html
@@ -31,11 +31,11 @@ <h1>Level 4</h1>
 
     <section id="gameMessage" class="game-message"></section>
 
+    <main id="gameArea" class="game-area"></main>
+
     <!-- Question Display -->
     <section id="questionDisplay" class="question-display"></section>
 
-    <main id="gameArea" class="game-area"></main>
-
     <section class="challenge-box">
         <pre id="codeSnippet" contenteditable="true"></pre>
     </section>
diff --git a/levels/level5.html b/levels/level5.html
index 5867d58..9f7ca5f 100644
--- a/levels/level5.html
+++ b/levels/level5.html
@@ -31,11 +31,11 @@ <h1>Level 5</h1>
 
     <section id="gameMessage" class="game-message"></section>
 
+    <main id="gameArea" class="game-area"></main>
+
     <!-- Question Display -->
     <section id="questionDisplay" class="question-display"></section>
 
-    <main id="gameArea" class="game-area"></main>
-
     <section class="challenge-box">
         <pre id="codeSnippet" contenteditable="true"></pre>
     </section>
diff --git a/pages/pages_style/game.css b/pages/pages_style/game.css
index b67e6b1..680a59c 100644
--- a/pages/pages_style/game.css
+++ b/pages/pages_style/game.css
@@ -102,18 +102,15 @@ body {
 }
 /* Enhanced High-Tech Hint Button */
 #hintBtn {
-    padding: 8px 16px;
-    border-radius: 8px;
-    border: 1px solid #00ffc8;
+    padding: 10px 18px;
+    border-radius: 6px;
+    border: 2px solid #00ffc8;
 
-    background: linear-gradient(
-        to bottom right,
-        #033b3b,
-        #022222
-    );
+    background: rgba(0, 0, 0, 0.4);
 
     color: #00ffd5;
-    font-family: "JetBrains Mono", monospace;
+    font-family: 'Press Start 2P', monospace;
+    font-size: 12px;
 
     box-shadow: 
         0 0 10px #00ffc855,
@@ -124,23 +121,20 @@ body {
     gap: 6px;
 
     transition: 0.25s ease;
+    cursor: pointer;
 }
 
 /* Hover State */
 #hintBtn:hover {
-    background: linear-gradient(
-        to bottom right,
-        #00ffd5,
-        #00bba5
-    );
+    background: rgba(0, 255, 213, 0.15);
 
-    color: #022b2b;
+    color: #00ffd5;
 
     box-shadow: 
         0 0 18px #00ffd5cc,
         inset 0 0 12px #00ffe0aa;
 
-    transform: translateY(-2px) scale(1.03);
+    transform: translateY(-2px) scale(1.05);
 }
 
 /* Active / Click */
@@ -177,22 +171,25 @@ body {
 /* ---------- SUBMIT + CONTROLS ---------- */
 button {
     cursor: pointer;
-    font-size: 16px;
-    padding: 10px 18px;
+    font-size: 14px;
+    padding: 12px 20px;
+    font-family: 'Press Start 2P', monospace;
 
     background: rgba(0, 0, 0, 0.4);
-    border: 1px solid rgba(0, 255, 255, 0.3);
+    border: 2px solid cyan;
     color: cyan;
 
-    border-radius: 8px;
+    border-radius: 6px;
 
     transition: 0.25s ease;
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
 }
 
 button:hover {
-    background: rgba(0, 255, 255, 0.35);
-    color: #002224;
-    box-shadow: 0 0 14px cyan;
+    background: rgba(0, 255, 255, 0.25);
+    color: #00ffcc;
+    box-shadow: 0 0 18px cyan;
+    transform: translateY(-2px);
 }
 
 /* ---------- OVERLAY ---------- */
@@ -360,11 +357,11 @@ body {
     animation: pop 0.3s ease-out;
 }
 
-/* QUESTION DISPLAY */
+/* Question Display */
 .question-display {
     background: rgba(0, 255, 255, 0.08);
-    border: 2px solid rgba(0, 255, 255, 0.4);
-    border-radius: 8px;
+    border: 2px solid rgba(0, 255, 255, 0.6);
+    border-radius: 0;
     padding: 15px;
     margin-bottom: 15px;
     font-size: 16px;
@@ -372,6 +369,7 @@ body {
     line-height: 1.5;
     text-align: center;
     box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.1);
+    font-family: 'Press Start 2P', monospace;
 }
 
 /* ADDITIONAL BUTTON STYLES (Pixel 3D) */
@@ -380,21 +378,23 @@ button {
     font-size: 14px;
     padding: 12px 18px;
     margin: 5px;
-    background: var(--mc-green);
-    color: #fff;
-    border: var(--pixel-border);
+    background: rgba(0, 0, 0, 0.4);
+    color: #00ffcc;
+    border: 2px solid #00ffcc;
+    border-radius: 6px;
     cursor: pointer;
     transition: transform 0.1s, box-shadow 0.1s;
-    box-shadow: 0 6px #000;
+    box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
 }
 
 button:hover {
-    background: var(--mc-green-dark);
+    background: rgba(0, 255, 204, 0.15);
+    box-shadow: 0 0 18px rgba(0, 255, 204, 0.5);
+    transform: translateY(-2px);
 }
 
 button:active {
-    transform: translateY(4px);
-    box-shadow: 0 2px #000;
+    transform: translateY(1px);
 }
 
 /* RESET BUTTON STYLE */
@@ -671,25 +671,26 @@ body {
 
 /* Home Button */
 .home-btn {
-    background: rgba(0, 234, 255, 0.15);
+    background: rgba(0, 0, 0, 0.4);
     color: #00eaff;
-    padding: 10px 20px;
+    padding: 12px 20px;
     border: 2px solid #00eaff;
-    font-size: 18px;
-    border-radius: 12px;
+    font-size: 13px;
+    border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s ease;
     font-family: "Press Start 2P", monospace;
+    box-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
 }
 
 .home-btn:hover {
-    background: rgba(0, 234, 255, 0.25);
-    transform: scale(1.05);
-    box-shadow: 0 0 12px rgba(0, 234, 255, 0.5);
+    background: rgba(0, 234, 255, 0.15);
+    transform: translateY(-2px) scale(1.05);
+    box-shadow: 0 0 18px rgba(0, 234, 255, 0.5);
 }
 
 .home-btn:active {
-    transform: scale(0.95);
+    transform: translateY(1px) scale(0.95);
 }
 
 /* Popup Overlay */
@@ -726,11 +727,14 @@ body {
 /* Buttons inside popup */
 #showAnswerPopup .confirm-btn,
 #showAnswerPopup .cancel-btn {
-    padding: 8px 15px;
-    border: none;
+    padding: 10px 18px;
+    border: 2px solid #000;
     font-weight: bold;
-    border-radius: 8px;
+    border-radius: 6px;
     cursor: pointer;
+    font-family: 'Press Start 2P', monospace;
+    font-size: 12px;
+    transition: 0.2s ease;
 }
 
 #showAnswerPopup .confirm-btn {
@@ -738,11 +742,23 @@ body {
     color: white;
 }
 
+#showAnswerPopup .confirm-btn:hover {
+    background: #ff3030;
+    box-shadow: 0 0 12px rgba(255, 71, 71, 0.5);
+    transform: translateY(-2px);
+}
+
 #showAnswerPopup .cancel-btn {
-    background: #555;
+    background: #666;
     color: white;
 }
 
+#showAnswerPopup .cancel-btn:hover {
+    background: #555;
+    box-shadow: 0 0 8px rgba(100, 100, 100, 0.5);
+    transform: translateY(-2px);
+}
+
 /* Done button — bottom right outside popup */
 #doneShowAnswer {
     position: fixed;
@@ -751,12 +767,24 @@ body {
     background: #00eaff;
     color: #000;
     padding: 12px 20px;
-    border-radius: 10px;
-    font-size: 15px;
+    border: 2px solid #000;
+    border-radius: 6px;
+    font-size: 13px;
     font-weight: bold;
+    font-family: 'Press Start 2P', monospace;
     cursor: pointer;
     z-index: 5000;
     box-shadow: 0 0 12px #00eaff;
+    transition: 0.2s ease;
+}
+
+#doneShowAnswer:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0 18px #00eaff;
+}
+
+#doneShowAnswer:active {
+    transform: translateY(1px);
 }
 
 #doneShowAnswer.hidden {
@@ -893,16 +921,26 @@ body {
 #pausePopup #resumeGameBtn {
     background: #00eaff;
     color: #000;
-    border: none;
+    border: 2px solid #000;
     font-weight: bold;
     margin-top: 12px;
-    padding: 10px 20px;
+    padding: 10px 15px;
+    border-radius: 6px;
+    font-family: 'Press Start 2P', monospace;
+    font-size: 12px;
+    cursor: pointer;
+    transition: 0.2s ease;
 }
 
 #pausePopup #resumeGameBtn:hover {
     background: #00d4e0;
     color: #000;
     box-shadow: 0 0 20px #00eaff;
+    transform: translateY(-2px);
+}
+
+#pausePopup #resumeGameBtn:active {
+    transform: translateY(1px);
 }
 
 .pause-overlay {
diff --git a/pages_script/game.js b/pages_script/game.js
index 195bbbe..87aa4a0 100644
--- a/pages_script/game.js
+++ b/pages_script/game.js
@@ -1,7 +1,3 @@
-// ==========================================================
-//                GAME.JS — FINAL MULTI-PAGE VERSION
-//      Difficulty-aware: easy / medium / hard
-// ==========================================================
 
 console.log("game.js loaded");
 
@@ -17,7 +13,7 @@ function saveGameProgress(level, score, difficulty) {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-    // ===== DOM ELEMENTS =====
+    // ===== DOM ELEM        ENTS =====
     const startBtn      = document.getElementById("startGameBtn");
     const resetBtn      = document.getElementById("resetGameBtn");
     const submitBtn     = document.getElementById("submitAnswerBtn");
@@ -711,6 +707,10 @@ print(safe_divide(10, 0))`,
         scoreDisplay.textContent = `Score: ${totalScore}`;
         gameMessage.textContent  = `🚀 Level ${level.number} Started!`;
 
+        codeSnippetEl.textContent      = level.snippet;
+        codeSnippetEl.contentEditable  = "true";
+        codeSnippetEl.style.pointerEvents = "auto";
+
         // Display question
         const questionDisplay = document.getElementById("questionDisplay");
         if (questionDisplay && level.question) {
@@ -718,10 +718,6 @@ print(safe_divide(10, 0))`,
             questionDisplay.classList.remove("hidden");
         }
 
-        codeSnippetEl.textContent      = level.snippet;
-        codeSnippetEl.contentEditable  = "true";
-        codeSnippetEl.style.pointerEvents = "auto";
-
         hintTextEl.classList.add("hidden");
         nextLevelBtn.classList.add("hidden");
 
diff --git a/update.txt b/update.txt
deleted file mode 100644
index dee2654..0000000
--- a/update.txt
+++ /dev/null
@@ -1,12 +0,0 @@
-revaa rathore 
-date- 20/11/2025
-task did today = 	
-    •	Designed and refined the Home Page UI.
-	•	Added:
-	•	Game title + subtitle
-	•	Menu box with High Score, Difficulty, Levels, Settings
-	•	Start button
-	•	Table-based vertical layout
-	•	ARIA labels for accessibility
-	•	Improved visual styling (sandbox theme colors, glow effects, box styling).
-	•	Added a short game storyline to the homepage with glowing text.
\ No newline at end of file