From 455a2d918f8e40b17157a760fa516a0f9a94a48e Mon Sep 17 00:00:00 2001
From: RecursiveZero <recursivezero@outlook.com>
Date: Tue, 4 Aug 2026 23:19:18 +0530
Subject: [PATCH 1/2] crossword mobile view enabled

---
 .vscode/dictionaries/project-words.txt        |    1 +
 .../styles/{crossword2.css => crossword.css}  |   20 +-
 src/components/Puzzle.astro                   | 1002 ++++++++++-------
 src/components/Puzzle2.astro                  |  641 -----------
 src/pages/crossword.astro                     |    8 +-
 5 files changed, 582 insertions(+), 1090 deletions(-)
 rename src/assets/styles/{crossword2.css => crossword.css} (96%)
 delete mode 100644 src/components/Puzzle2.astro

diff --git a/.vscode/dictionaries/project-words.txt b/.vscode/dictionaries/project-words.txt
index 8afd973c..6fd50a2b 100755
--- a/.vscode/dictionaries/project-words.txt
+++ b/.vscode/dictionaries/project-words.txt
@@ -120,6 +120,7 @@ waitlist
 webring
 werkzeug
 withastro
+wordsearch
 अक्टूबर
 अगस्त
 अप्रैल
diff --git a/src/assets/styles/crossword2.css b/src/assets/styles/crossword.css
similarity index 96%
rename from src/assets/styles/crossword2.css
rename to src/assets/styles/crossword.css
index 1c3369c6..9770a661 100644
--- a/src/assets/styles/crossword2.css
+++ b/src/assets/styles/crossword.css
@@ -27,7 +27,7 @@
   min-height: 100vh;
   padding: 20px;
   box-sizing: border-box;
-  touch-action: none;
+  touch-action: pan-y;
 }
 
 /* ── Top Controls (Word List ke upar) ── */
@@ -357,7 +357,6 @@ details:not([open]) summary::after {
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
-    background: #f8fafc !important;
     border: 1.5px solid #e2e8f0 !important;
     border-radius: 5px !important;
     font-size: calc((100vw - 40px) / 8 * 0.45) !important;
@@ -366,22 +365,7 @@ details:not([open]) summary::after {
     cursor: pointer !important;
     user-select: none !important;
     -webkit-user-select: none !important;
-    touch-action: none !important;
-    min-width: 0 !important;
-    min-height: 0 !important;
-    padding: 0 !important;
-    overflow: hidden !important;
-    box-sizing: border-box !important;
-  }
-
-  .stats-container {
-    gap: 4px;
-    margin: 8px 0;
-  }
-
-  .stats-button {
-    padding: 8px 10px;
-    font-size: 11px;
+    touch-action: manipulation !important;
     border-radius: 10px;
   }
 
diff --git a/src/components/Puzzle.astro b/src/components/Puzzle.astro
index 881c07e3..44154515 100644
--- a/src/components/Puzzle.astro
+++ b/src/components/Puzzle.astro
@@ -1,10 +1,94 @@
 ---
-import Settings from "@/components/Settings.astro";
 import HintIcon from "@/assets/icons/hint.svg";
 ---
 
+<style>
+  .level-dropdown-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .level-dropdown {
+    display: none;
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    background: #fff;
+    border: 1.5px solid #e2e8f0;
+    border-radius: 10px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    z-index: 999;
+    min-width: 140px;
+    overflow: hidden;
+  }
+
+  .level-dropdown.open {
+    display: block;
+  }
+
+  .level-option {
+    display: block;
+    width: 100%;
+    padding: 10px 16px;
+    background: none;
+    border: none;
+    text-align: left;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+    color: #1e293b;
+    transition: background 0.15s;
+  }
+
+  .level-option:hover {
+    background: #f1f5f9;
+  }
+
+  .level-option.active {
+    background: #e0f2fe;
+    color: #0284c7;
+  }
+
+  .level-arrow {
+    display: inline-block;
+    margin-left: 5px;
+    transition: transform 0.2s ease;
+    vertical-align: middle;
+    flex-shrink: 0;
+  }
+
+  #levelBtn.open .level-arrow {
+    transform: rotate(180deg);
+  }
+</style>
+
 <div class="puzzle-container">
-  <Settings />
+  <div class="top-controls">
+    <div class="level-dropdown-wrapper">
+      <button id="levelBtn" class="action-btn btn-level"
+        >⭐ Easy <svg
+          class="level-arrow"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg
+        ></button
+      >
+      <div class="level-dropdown" id="levelDropdown">
+        <button class="level-option" data-level="easy">⭐ Easy</button>
+        <button class="level-option" data-level="medium">🔥 Medium</button>
+        <button class="level-option" data-level="hard">💀 Hard</button>
+      </div>
+    </div>
+    <button id="new" class="action-btn btn-new">✨ New Puzzle</button>
+    <button id="shuffle" class="action-btn btn-shuffle">🔀 Shuffle</button>
+  </div>
+
   <details open>
     <summary>Word List</summary>
     <div class="word-list" id="wordList"></div>
@@ -17,486 +101,550 @@ import HintIcon from "@/assets/icons/hint.svg";
     <div class="stats-button">
       <span>Found: <span id="foundCount">0</span>/<span id="totalWords"></span></span>
     </div>
-    <button
-      id="solutionBtn"
-      style="
-      background: none;
-      border: none;
-      width: 60px;
-      height: 60px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 12px;
-      "
-      onclick="
-      this.classList.toggle('active');
-      const bulb = this.querySelector('svg path');
-      if (this.classList.contains('active')) {
-        bulb.setAttribute('fill', 'white');
-        bulb.setAttribute('fill', 'orange');
-        this.style.background = 'radial-gradient(circle, #fffacd 0%, #ffeb3b 100%)';
-        this.style.boxShadow = '0 0 20px 5px yellow';
-      } else {
-        bulb.setAttribute('fill', '#FFD700');
-        this.style.background = 'none';
-        this.style.boxShadow = '';
-      }
-      "
-    >
+    <button id="solutionBtn" class="hint-button" aria-label="Toggle hints">
       <div style="width: 28px; height: 28px;">
         <HintIcon />
       </div>
     </button>
+    <button id="main-clear" class="action-btn btn-clear">🗑️ Clear</button>
   </div>
 
   <div id="grid" class="grid__puzzle"></div>
+</div>
 
-  <script type="module" is:inline>
-    const getRandomColor = () => {
-      // Changing the color generation for better visibility in help mode
-      // Using more pastel colors with higher lightness and lower alpha
-      const hue = Math.floor(Math.random() * 360); // Random hue (0-359)
-      const saturation = 80 + Math.floor(Math.random() * 15);
-      const lightness = 70 + Math.floor(Math.random() * 15);
-      const alpha = 0.7;
-      return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
-    };
-
-    async function fetchCrosswordData() {
-      try {
-        const response = await fetch("/assets/json/cross.json");
-        if (!response.ok) {
-          throw new Error("Failed to fetch crossword data");
+<script is:inline>
+  var WORD_SETS = [
+    {
+      easy: ["CAT", "DOG", "SUN", "MOON", "STAR"],
+      medium: ["APPLE", "GRAPE", "ORANGE", "BERRIES"],
+      hard: ["WALRUS", "GIRAFFE", "PENGUIN", "DOLPHIN"]
+    },
+    {
+      easy: ["HAT", "CAR", "BALL", "SHOE", "LAMP"],
+      medium: ["CHERRY", "COCONUT", "PLUM", "MELON", "PEACH"],
+      hard: ["OCTOPUS", "JACKAL", "WALRUS", "PEACOCK"]
+    },
+    {
+      easy: ["RED", "BLUE", "GREEN", "YELLOW", "PURPLE"],
+      medium: ["BLACK", "WHITE", "BROWN", "ORANGE", "PINK"],
+      hard: ["MAGENTA", "CYAN", "VIOLET", "MAROON"]
+    },
+    {
+      easy: ["SUN", "MARS", "MOON", "STAR", "COMET"],
+      medium: ["VENUS", "EARTH", "PLUTO", "ORBIT", "SOLAR"],
+      hard: ["JUPITER", "MERCURY", "NEPTUNE", "SATURN"]
+    },
+    {
+      easy: ["EGG", "MILK", "RICE", "CAKE", "SOUP"],
+      medium: ["BREAD", "SUGAR", "CREAM", "PASTA", "SPICE"],
+      hard: ["COOKIE", "BUTTER", "NOODLE", "MUFFIN"]
+    },
+    {
+      easy: ["RUN", "JUMP", "SWIM", "KICK", "BOWL"],
+      medium: ["CHESS", "RUGBY", "DERBY", "SQUASH", "POLO"],
+      hard: ["CRICKET", "TENNIS", "HOCKEY", "BOXING"]
+    },
+    {
+      easy: ["ARM", "LEG", "EYE", "HAND", "KNEE"],
+      medium: ["HEART", "BRAIN", "SPINE", "NERVE", "LIVER"],
+      hard: ["MUSCLE", "KIDNEY", "STOMACH", "THROAT"]
+    },
+    {
+      easy: ["MAP", "ROAD", "CITY", "TOWN", "PARK"],
+      medium: ["HOTEL", "TRAIN", "PLANE", "BEACH", "RIVER"],
+      hard: ["AIRPORT", "STATION", "HIGHWAY", "VILLAGE"]
+    },
+    {
+      easy: ["PEN", "BOOK", "DESK", "BELL", "TEST"],
+      medium: ["CLASS", "GRADE", "STUDY", "ESSAY", "NOTES"],
+      hard: ["PENCIL", "LESSON", "SCIENCE", "HISTORY"]
+    },
+    {
+      easy: ["SUN", "RAIN", "WIND", "SNOW", "HAIL"],
+      medium: ["CLOUD", "STORM", "FROST", "FOGGY", "SLEET"],
+      hard: ["THUNDER", "RAINBOW", "BLIZZARD", "CYCLONE"]
+    }
+  ];
+
+  var DIFFICULTY_LABELS = {
+    easy: "⭐ Easy",
+    medium: "🔥 Medium",
+    hard: "💀 Hard"
+  };
+
+  var COLOR_CLASSES = [
+    "word-color-1",
+    "word-color-2",
+    "word-color-3",
+    "word-color-4",
+    "word-color-5",
+    "word-color-6",
+    "word-color-7",
+    "word-color-8"
+  ];
+
+  var currentWordSetIndex = 0;
+  var state = {
+    difficulty: "easy",
+    grid: [],
+    size: 8,
+    selectedCells: [],
+    foundWords: [],
+    isDragging: false,
+    showSolution: false,
+    solutions: [],
+    clickCount: 0,
+    matchedCells: new Map(),
+    currentWordSet: WORD_SETS[0],
+    solutionColors: new Map(),
+    wordColors: new Map()
+  };
+
+  function randomLetter() {
+    return String.fromCharCode(65 + Math.floor(Math.random() * 26));
+  }
+
+  function randomColor() {
+    return "hsla(" + Math.floor(Math.random() * 360) + ",85%,72%,0.75)";
+  }
+
+  function isValidLine(cells) {
+    if (cells.length < 2) return true;
+    var dr = cells[1][0] - cells[0][0],
+      dc = cells[1][1] - cells[0][1];
+    if (Math.abs(dr) > 1 || Math.abs(dc) > 1 || (dr === 0 && dc === 0)) return false;
+    for (var i = 2; i < cells.length; i++) {
+      if (cells[i][0] !== cells[0][0] + dr * i || cells[i][1] !== cells[0][1] + dc * i) return false;
+    }
+    return true;
+  }
+
+  function canPlace(grid, word, row, col, dr, dc) {
+    var lr = row + dr * (word.length - 1),
+      lc = col + dc * (word.length - 1);
+    if (lr < 0 || lr >= state.size || lc < 0 || lc >= state.size) return false;
+    for (var i = 0; i < word.length; i++) {
+      var cur = grid[row + dr * i][col + dc * i];
+      if (cur !== "" && cur !== word[i]) return false;
+    }
+    return true;
+  }
+
+  function placeWord(grid, word) {
+    var dirs = [
+      [0, 1],
+      [1, 0],
+      [1, 1],
+      [1, -1]
+    ];
+    for (var a = 0; a < 200; a++) {
+      var d = dirs[Math.floor(Math.random() * dirs.length)];
+      var row = Math.floor(Math.random() * state.size);
+      var col = Math.floor(Math.random() * state.size);
+      if (canPlace(grid, word, row, col, d[0], d[1])) {
+        var wordCells = [];
+        for (var i = 0; i < word.length; i++) {
+          var r = row + d[0] * i,
+            c = col + d[1] * i;
+          grid[r][c] = word[i];
+          wordCells.push([r, c]);
         }
-        return await response.json();
-      } catch (error) {
-        console.error(error);
-        return [];
+        return { placed: true, cells: wordCells };
       }
     }
-
-    document.addEventListener("DOMContentLoaded", async () => {
-      const crosswordData = await fetchCrosswordData();
-
-      // Use the imported JSON data for word sets.
-      const wordSets = crosswordData;
-      let currentWordSetIndex = 0;
-
-      // Function to generate random colors with good contrast
-
-      // Pre-generated color classes for found words
-      const colorClasses = [
-        "word-color-1",
-        "word-color-2",
-        "word-color-3",
-        "word-color-4",
-        "word-color-5",
-        "word-color-6",
-        "word-color-7",
-        "word-color-8"
-      ];
-
-      let state = {
-        difficulty: "easy",
-        grid: [],
-        size: 8,
-        selectedCells: [],
-        foundWords: [],
-        isDragging: false,
-        showSolution: false,
-        solutions: [],
-        clickCount: 0,
-        matchedCells: new Map(), // Changed to Map to store word-cells associations
-        currentWordSet: wordSets[0],
-        // We'll now store individual colors for each word in the solution
-        solutionColors: new Map(), // Map of word -> color
-        wordColors: new Map() // Track colors assigned to found words
-      };
-
-      function generateRandomLetter() {
-        return String.fromCharCode(65 + Math.floor(Math.random() * 26));
-      }
-
-      function getWordDirection(cells) {
-        const [[r1, c1], [r2, c2]] = [cells[0], cells[cells.length - 1]];
-        return r1 === r2 ? "horizontal" : c1 === c2 ? "vertical" : "diagonal";
+    return { placed: false, cells: [] };
+  }
+
+  function generatePuzzle() {
+    var newGrid = [];
+    for (var i = 0; i < state.size; i++) {
+      newGrid.push([]);
+      for (var j = 0; j < state.size; j++) newGrid[i].push("");
+    }
+    var words = state.currentWordSet[state.difficulty];
+    state.solutions = [];
+    state.wordColors = new Map();
+    state.matchedCells = new Map();
+    state.solutionColors = new Map();
+    for (var w = 0; w < words.length; w++) {
+      var res = placeWord(newGrid, words[w]);
+      if (res.placed) {
+        state.solutions.push({ word: words[w], cells: res.cells });
+        state.solutionColors.set(words[w], randomColor());
       }
+    }
+    for (var i = 0; i < state.size; i++)
+      for (var j = 0; j < state.size; j++) if (newGrid[i][j] === "") newGrid[i][j] = randomLetter();
+    state.grid = newGrid;
+    state.foundWords = [];
+    state.showSolution = false;
+    state.selectedCells = [];
+    state.clickCount = 0;
+    renderDOM();
+  }
+
+  function newPuzzle() {
+    currentWordSetIndex = (currentWordSetIndex + 1) % WORD_SETS.length;
+    state.currentWordSet = WORD_SETS[currentWordSetIndex];
+    generatePuzzle();
+  }
+
+  function isValidNext(a, b) {
+    return Math.abs(a[0] - b[0]) <= 1 && Math.abs(a[1] - b[1]) <= 1;
+  }
+
+  function checkWord(selection) {
+    if (selection.length < 3 || !isValidLine(selection)) return false;
+    var word = selection
+      .map(function (rc) {
+        return state.grid[rc[0]][rc[1]];
+      })
+      .join("");
+    var rev = word.split("").reverse().join("");
+    var list = state.currentWordSet[state.difficulty];
+    var found = null;
+    if (list.indexOf(word) >= 0 && state.foundWords.indexOf(word) < 0) found = word;
+    else if (list.indexOf(rev) >= 0 && state.foundWords.indexOf(rev) < 0) found = rev;
+    if (found) {
+      state.foundWords.push(found);
+      if (!state.wordColors.has(found))
+        state.wordColors.set(found, COLOR_CLASSES[state.wordColors.size % COLOR_CLASSES.length]);
+      state.matchedCells.set(found, selection.slice());
+      return true;
+    }
+    return false;
+  }
+
+  function getCoords(el) {
+    if (!el || !el.dataset || !el.dataset.coords) return null;
+    return el.dataset.coords.split("-").map(Number);
+  }
+
+  function renderDOM() {
+    var gridEl = document.getElementById("grid");
+    if (!gridEl) return;
+
+    var isMobile = window.innerWidth <= 768;
+    var isLandscape = window.innerWidth > window.innerHeight;
+    var gridSize, cellSize;
+
+    if (isMobile) {
+      var availableWidth = window.innerWidth - 24;
+      var availableHeight = window.innerHeight - 120;
+      var gap = 4;
+      var padding = 8;
+      gridSize = isLandscape ? Math.min(availableWidth, availableHeight) : availableWidth;
+      cellSize = Math.floor((gridSize - padding * 2 - gap * 7) / 8);
+      var finalSize = cellSize * 8 + gap * 7 + padding * 2;
+      gridEl.style.display = "grid";
+      gridEl.style.gridTemplateColumns = "repeat(8, " + cellSize + "px)";
+      gridEl.style.gridTemplateRows = "repeat(8, " + cellSize + "px)";
+      gridEl.style.width = finalSize + "px";
+      gridEl.style.height = finalSize + "px";
+      gridEl.style.gap = gap + "px";
+      gridEl.style.padding = padding + "px";
+      gridEl.style.margin = "0 auto";
+      gridEl.style.maxWidth = "100%";
+    } else {
+      gridEl.style.display = "grid";
+      gridEl.style.gridTemplateColumns = "repeat(8, 1fr)";
+      gridEl.style.gridTemplateRows = "";
+      gridEl.style.width = "";
+      gridEl.style.height = "";
+      gridEl.style.gap = "";
+      gridEl.style.padding = "";
+      gridEl.style.margin = "";
+      gridEl.style.maxWidth = "";
+    }
 
-      function canPlaceWord(grid, word, row, col, dRow, dCol) {
-        if (row + dRow * (word.length - 1) >= state.size || row + dRow * (word.length - 1) < 0) return false;
-        if (col + dCol * (word.length - 1) >= state.size || col + dCol * (word.length - 1) < 0) return false;
-
-        for (let i = 0; i < word.length; i++) {
-          const currentCell = grid[row + dRow * i][col + dCol * i];
-          if (currentCell && currentCell !== word[i]) return false;
+    gridEl.innerHTML = "";
+
+    for (var i = 0; i < state.grid.length; i++) {
+      for (var j = 0; j < state.grid[i].length; j++) {
+        var cell = document.createElement("div");
+        cell.className = "cell";
+        cell.textContent = state.grid[i][j];
+        cell.dataset.coords = i + "-" + j;
+
+        if (isMobile) {
+          cell.style.width = cellSize + "px";
+          cell.style.height = cellSize + "px";
+          cell.style.fontSize = Math.floor(cellSize * 0.45) + "px";
+          cell.style.display = "flex";
+          cell.style.justifyContent = "center";
+          cell.style.alignItems = "center";
+          cell.style.boxSizing = "border-box";
+          cell.style.border = "1.5px solid #e2e8f0";
+          cell.style.borderRadius = "6px";
+          cell.style.background = "#f8fafc";
+          cell.style.fontWeight = "700";
+          cell.style.color = "#1e293b";
+          cell.style.cursor = "pointer";
+          cell.style.userSelect = "none";
+          cell.style.overflow = "hidden";
         }
-        return true;
-      }
 
-      function placeWord(grid, word) {
-        const directions = [
-          [0, 1],
-          [1, 0],
-          [1, 1],
-          [1, -1]
-        ];
-        for (let attempt = 0; attempt < 200; attempt++) {
-          const [dRow, dCol] = directions[Math.floor(Math.random() * directions.length)];
-          const row = Math.floor(Math.random() * state.size);
-          const col = Math.floor(Math.random() * state.size);
-
-          if (canPlaceWord(grid, word, row, col, dRow, dCol)) {
-            const wordCells = [];
-            for (let i = 0; i < word.length; i++) {
-              const r = row + dRow * i;
-              const c = col + dCol * i;
-              grid[r][c] = word[i];
-              wordCells.push([r, c]);
-            }
-            return { placed: true, cells: wordCells, direction: getWordDirection(wordCells) };
+        var iSel = false;
+        for (var s = 0; s < state.selectedCells.length; s++) {
+          if (state.selectedCells[s][0] === i && state.selectedCells[s][1] === j) {
+            iSel = true;
+            break;
           }
         }
-        return { placed: false, cells: [], direction: null };
-      }
-
-      function generateRandomColors() {
-        // Clear existing solution colors
-        state.solutionColors.clear();
-
-        // Define a set of distinct, high-contrast colors for better help visibility
-        // Using a predefined palette for help mode instead of fully random colors
-        const helpColorPalette = [
-          "hsla(10, 90%, 75%, 0.75)", // Light red
-          "hsla(40, 90%, 75%, 0.75)", // Light amber
-          "hsla(60, 90%, 75%, 0.75)", // Light yellow
-          "hsla(120, 90%, 75%, 0.75)", // Light green
-          "hsla(180, 90%, 75%, 0.75)", // Light cyan
-          "hsla(210, 90%, 75%, 0.75)", // Light blue
-          "hsla(270, 90%, 75%, 0.75)", // Light purple
-          "hsla(300, 90%, 75%, 0.75)", // Light magenta
-          "hsla(330, 90%, 75%, 0.75)", // Light pink
-          "hsla(150, 90%, 75%, 0.75)", // Light teal
-          "hsla(30, 90%, 75%, 0.75)", // Light orange
-          "hsla(240, 90%, 75%, 0.75)" // Light indigo
-        ];
-
-        // Assign colors to words, trying to use different colors for adjacent words
-        let colorIndex = 0;
-        state.solutions.forEach((solution) => {
-          state.solutionColors.set(solution.word, helpColorPalette[colorIndex % helpColorPalette.length]);
-          colorIndex++;
-        });
-      }
-
-      function resetPuzzle() {
-        generatePuzzleWithCurrentWordSet();
-      }
-
-      function generatePuzzleWithCurrentWordSet() {
-        // Adjust grid size based on difficulty
-        // For now, we'll keep the grid size constant for all difficulties
-        // We can adjust this based on the difficulty level in the future
-        // change size according to needs
-        switch (state.difficulty) {
-          case "easy":
-            state.size = 8;
-            break;
-          case "medium":
-            state.size = 8;
-            break;
-          case "hard":
-            state.size = 8;
-            break;
+        if (iSel) {
+          cell.classList.add("selected");
+          if (isMobile) {
+            cell.style.background = "var(--primary-color)";
+            cell.style.color = "#fff";
+          }
         }
 
-        const newGrid = Array(state.size)
-          .fill()
-          .map(() => Array(state.size).fill(""));
-        const words = state.currentWordSet[state.difficulty];
-        state.solutions = [];
-        state.wordColors.clear();
-        state.matchedCells.clear();
-        state.solutionColors.clear();
-
-        words.forEach((word) => {
-          const result = placeWord(newGrid, word);
-          if (result.placed) {
-            state.solutions.push({ word, cells: result.cells, direction: result.direction });
-            // Assign a random color to each word solution
-            state.solutionColors.set(word, getRandomColor());
+        state.matchedCells.forEach(function (cells, word) {
+          for (var s = 0; s < cells.length; s++) {
+            if (cells[s][0] === i && cells[s][1] === j) {
+              cell.classList.add("match");
+              var cc = state.wordColors.get(word);
+              if (cc) cell.classList.add(cc);
+              break;
+            }
           }
         });
 
-        for (let i = 0; i < state.size; i++) {
-          for (let j = 0; j < state.size; j++) {
-            newGrid[i][j] = newGrid[i][j] || generateRandomLetter();
+        if (state.showSolution) {
+          for (var sol = 0; sol < state.solutions.length; sol++) {
+            var sc = state.solutions[sol];
+            for (var s = 0; s < sc.cells.length; s++) {
+              if (sc.cells[s][0] === i && sc.cells[s][1] === j) {
+                cell.style.backgroundColor = state.solutionColors.get(sc.word);
+                break;
+              }
+            }
           }
         }
 
-        state.grid = newGrid;
-        state.foundWords = [];
-        state.showSolution = false;
-        state.selectedCells = [];
-        state.clickCount = 0;
-
-        updateDOM();
-      }
-
-      function generateNewPuzzle() {
-        currentWordSetIndex = (currentWordSetIndex + 1) % wordSets.length;
-        state.currentWordSet = wordSets[currentWordSetIndex];
-        generatePuzzleWithCurrentWordSet();
+        gridEl.appendChild(cell);
       }
+    }
 
-      function isValidNextCell(current, next) {
-        const [r1, c1] = current;
-        const [r2, c2] = next;
-        return Math.abs(r1 - r2) <= 1 && Math.abs(c1 - c2) <= 1;
+    var clickCountEl = document.getElementById("clickCount");
+    var foundCountEl = document.getElementById("foundCount");
+    var totalWordsEl = document.getElementById("totalWords");
+    var wordListEl = document.getElementById("wordList");
+    var solutionBtnEl = document.getElementById("solutionBtn");
+
+    if (clickCountEl) clickCountEl.textContent = state.clickCount;
+    if (foundCountEl) foundCountEl.textContent = state.foundWords.length;
+    if (totalWordsEl) totalWordsEl.textContent = state.currentWordSet[state.difficulty].length;
+
+    if (wordListEl) {
+      var words = state.currentWordSet[state.difficulty];
+      var html = "";
+      for (var w = 0; w < words.length; w++) {
+        var word = words[w];
+        var found = state.foundWords.indexOf(word) >= 0;
+        var cc = state.wordColors.get(word) || "";
+        var sc = state.showSolution ? state.solutionColors.get(word) : null;
+        var style = sc ? ' style="background-color:' + sc + ';"' : "";
+        html += '<span class="word ' + (found ? "found " + cc : "") + '"' + style + ">" + word + "</span>";
       }
+      wordListEl.innerHTML = html;
+    }
 
-      function checkForWord(selection) {
-        if (selection.length < 3) return false;
-
-        const word = selection.map(([r, c]) => state.grid[r][c]).join("");
-        const reverseWord = word.split("").reverse().join("");
-        const currentWords = state.currentWordSet[state.difficulty];
-
-        let foundWord = null;
-        if (currentWords.includes(word) && !state.foundWords.includes(word)) {
-          foundWord = word;
-        } else if (currentWords.includes(reverseWord) && !state.foundWords.includes(reverseWord)) {
-          foundWord = reverseWord;
-        }
+    if (solutionBtnEl) solutionBtnEl.classList.toggle("active", state.showSolution);
+  }
+
+  // ── Events ──
+  function setupEvents() {
+    var gridEl = document.getElementById("grid");
+    if (!gridEl) return;
+
+    gridEl.addEventListener("mousedown", function (e) {
+      var coords = getCoords(e.target);
+      if (!coords) return;
+      state.isDragging = true;
+      state.selectedCells = [coords];
+      state.clickCount++;
+      renderDOM();
+    });
 
-        if (foundWord) {
-          state.foundWords.push(foundWord);
-          // Assign a color to the word
-          if (!state.wordColors.has(foundWord)) {
-            const colorIndex = state.wordColors.size % colorClasses.length;
-            state.wordColors.set(foundWord, colorClasses[colorIndex]);
-          }
-          // Store the cells associated with this word
-          state.matchedCells.set(foundWord, [...selection]); // Create a copy of the selection
-          return true;
+    gridEl.addEventListener("mousemove", function (e) {
+      if (!state.isDragging) return;
+      var coords = getCoords(e.target);
+      if (!coords) return;
+      var last = state.selectedCells[state.selectedCells.length - 1];
+      if (!last || !isValidNext(last, coords)) return;
+      var already = false;
+      for (var s = 0; s < state.selectedCells.length; s++) {
+        if (state.selectedCells[s][0] === coords[0] && state.selectedCells[s][1] === coords[1]) {
+          already = true;
+          break;
         }
-        return false;
       }
-
-      function getCellCoordinates(element) {
-        if (!element?.dataset?.coords) return null;
-        return element.dataset.coords.split("-").map(Number);
-      }
-
-      function updateDOM() {
-        const gridElement = document.getElementById("grid");
-        gridElement.innerHTML = "";
-        gridElement.style.gridTemplateColumns = `repeat(${state.size}, 1fr)`;
-
-        state.grid.forEach((row, i) =>
-          row.forEach((cell, j) => {
-            const cellElement = document.createElement("div");
-            cellElement.className = "cell";
-            cellElement.textContent = cell;
-            cellElement.dataset.coords = `${i}-${j}`;
-
-            const isSelected = state.selectedCells.some(([r, c]) => r === i && c === j);
-
-            // Find if this cell belongs to any found word
-            let matchedWord = null;
-            for (const [word, cells] of state.matchedCells.entries()) {
-              if (cells.some(([r, c]) => r === i && c === j)) {
-                matchedWord = word;
-                break;
-              }
-            }
-
-            // Check if this cell is part of a solution
-            if (state.showSolution) {
-              // Find which solution word this cell belongs to
-              for (const solution of state.solutions) {
-                if (solution.cells.some(([r, c]) => r === i && c === j)) {
-                  // Apply the unique color for this word
-                  const wordColor = state.solutionColors.get(solution.word);
-                  if (wordColor) {
-                    cellElement.style.backgroundColor = wordColor;
-                  }
-                  break;
-                }
-              }
-            }
-
-            if (isSelected) cellElement.classList.add("selected");
-            if (matchedWord) {
-              cellElement.classList.add("match");
-              const colorClass = state.wordColors.get(matchedWord);
-              if (colorClass) {
-                cellElement.classList.add(colorClass);
-              }
-            }
-
-            gridElement.appendChild(cellElement);
-          })
-        );
-
-        document.getElementById("clickCount").textContent = state.clickCount;
-        document.getElementById("foundCount").textContent = state.foundWords.length;
-        document.getElementById("totalWords").textContent = state.currentWordSet[state.difficulty].length;
-
-        const wordList = document.getElementById("wordList");
-        wordList.innerHTML = state.currentWordSet[state.difficulty]
-          .map((word) => {
-            const isFound = state.foundWords.includes(word);
-            const colorClass = state.wordColors.get(word) || "";
-
-            // For words in solution mode, set the background color directly
-            let style = "";
-            if (state.showSolution) {
-              const solutionColor = state.solutionColors.get(word);
-              if (solutionColor) {
-                style = `style="background-color: ${solutionColor};"`;
-              }
-            }
-
-            return `<span class="word ${isFound ? "found " + colorClass : ""}" ${style}>${word}</span>`;
-          })
-          .join("");
+      if (!already) {
+        state.selectedCells.push(coords);
+        renderDOM();
       }
+    });
 
-      function handleCellClick(e) {
-        const coords = getCellCoordinates(e.target);
-        if (!coords) return;
-
-        // Check if the cell is already selected
-        const isAlreadySelected = state.selectedCells.some(([r, c]) => r === coords[0] && c === coords[1]);
+    document.addEventListener("mouseup", function () {
+      if (!state.isDragging) return;
+      state.isDragging = false;
+      if (!checkWord(state.selectedCells)) state.selectedCells = [];
+      renderDOM();
+    });
 
-        if (isAlreadySelected) {
-          // If the cell is already selected, do nothing
-          return;
+    function addSelection(coords) {
+      if (!coords) return;
+      var last = state.selectedCells[state.selectedCells.length - 1];
+      if (!last || !isValidNext(last, coords)) return;
+      var already = false;
+      for (var s = 0; s < state.selectedCells.length; s++) {
+        if (state.selectedCells[s][0] === coords[0] && state.selectedCells[s][1] === coords[1]) {
+          already = true;
+          break;
         }
-
-        // Add the new cell to the selection
-        state.selectedCells.push(coords);
-        state.clickCount++;
-
-        // Update the DOM to reflect the new selection
-        updateDOM();
       }
-
-      function handleDragStart(e) {
-        const coords = getCellCoordinates(e.target);
-        if (!coords) return;
-
-        state.isDragging = true;
-        state.selectedCells = [coords];
-        state.clickCount++;
-        updateDOM();
+      if (!already) {
+        state.selectedCells.push(coords);
+        renderDOM();
       }
+    }
 
-      function handleDragMove(e) {
-        if (!state.isDragging) return;
+    function finishSelection() {
+      if (!state.isDragging) return;
+      state.isDragging = false;
+      if (!checkWord(state.selectedCells)) state.selectedCells = [];
+      renderDOM();
+    }
 
-        const element = document.elementFromPoint(
-          e.type.includes("touch") ? e.touches[0].clientX : e.clientX,
-          e.type.includes("touch") ? e.touches[0].clientY : e.clientY
-        );
+    gridEl.addEventListener("pointerdown", function (e) {
+      if (e.pointerType !== "touch" && e.pointerType !== "pen" && e.pointerType !== "mouse") return;
+      var coords = getCoords(e.target);
+      if (!coords) return;
+      e.preventDefault();
+      state.isDragging = true;
+      state.selectedCells = [coords];
+      state.clickCount++;
+      renderDOM();
+      gridEl.setPointerCapture(e.pointerId);
+    });
 
-        const coords = getCellCoordinates(element);
-        if (!coords) return;
+    gridEl.addEventListener("pointermove", function (e) {
+      if (!state.isDragging) return;
+      var coords = getCoords(document.elementFromPoint(e.clientX, e.clientY));
+      if (!coords) return;
+      addSelection(coords);
+    });
 
-        const lastCell = state.selectedCells[state.selectedCells.length - 1];
-        if (!lastCell || !isValidNextCell(lastCell, coords)) return;
+    gridEl.addEventListener("pointerup", function (e) {
+      finishSelection();
+      if (e.pointerId) gridEl.releasePointerCapture(e.pointerId);
+    });
 
-        if (!state.selectedCells.some(([r, c]) => r === coords[0] && c === coords[1])) {
-          state.selectedCells.push(coords);
-          updateDOM();
-        }
-      }
+    gridEl.addEventListener("pointercancel", function (e) {
+      state.isDragging = false;
+      state.selectedCells = [];
+      renderDOM();
+      if (e.pointerId) gridEl.releasePointerCapture(e.pointerId);
+    });
 
-      function handleDragEnd() {
-        if (!state.isDragging) return;
+    // ── Level dropdown ──
+    var levelBtn = document.getElementById("levelBtn");
+    var levelDropdown = document.getElementById("levelDropdown");
+
+    if (levelBtn && levelDropdown) {
+      levelBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        levelDropdown.classList.toggle("open");
+        levelBtn.classList.toggle("open", levelDropdown.classList.contains("open"));
+        // current level highlight karo
+        var opts = levelDropdown.querySelectorAll(".level-option");
+        opts.forEach(function (opt) {
+          opt.classList.toggle("active", opt.dataset.level === state.difficulty);
+        });
+      });
 
-        const wasWordFound = checkForWord(state.selectedCells);
-        state.isDragging = false;
+      levelDropdown.addEventListener("click", function (e) {
+        var opt = e.target.closest(".level-option");
+        if (!opt) return;
+        state.difficulty = opt.dataset.level;
+        levelBtn.innerHTML =
+          DIFFICULTY_LABELS[state.difficulty] +
+          ' <svg class="level-arrow" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>';
+        levelDropdown.classList.remove("open");
+        levelBtn.classList.remove("open");
+        generatePuzzle();
+      });
 
-        if (!wasWordFound) {
-          state.selectedCells = [];
-        }
+      // Bahar click karo to dropdown band ho
+      document.addEventListener("click", function () {
+        levelDropdown.classList.remove("open");
+        levelBtn.classList.remove("open");
+      });
+    }
 
-        updateDOM();
-      }
+    var newEl = document.getElementById("new");
+    if (newEl) newEl.addEventListener("click", newPuzzle);
 
-      // Function to handle help button click
-      function handleHelpButtonClick() {
-        // Generate new random colors for each word
-        generateRandomColors();
+    var shuffleEl = document.getElementById("shuffle");
+    if (shuffleEl) shuffleEl.addEventListener("click", generatePuzzle);
 
-        // Toggle solution display
+    var solutionBtnEl = document.getElementById("solutionBtn");
+    if (solutionBtnEl) {
+      solutionBtnEl.addEventListener("click", function () {
         state.showSolution = !state.showSolution;
+        renderDOM();
+      });
+    }
 
-        // Update the DOM
-        updateDOM();
-      }
-      function handleClearButtonClick() {
+    // Clear button — sirf progress reset karo, grid wahi rahe
+    var clearEl = document.getElementById("main-clear");
+    if (clearEl) {
+      clearEl.addEventListener("click", function () {
         state.selectedCells = [];
         state.foundWords = [];
-        state.matchedCells.clear();
-        state.wordColors.clear();
+        state.matchedCells = new Map();
+        state.wordColors = new Map();
         state.isDragging = false;
+        state.showSolution = false;
+        state.clickCount = 0;
+        renderDOM();
+      });
+    }
 
-        updateDOM();
-      }
+    // Settings component ke buttons (agar hain)
+    var sNewEl = document.getElementById("s-new");
+    if (sNewEl) sNewEl.addEventListener("click", newPuzzle);
+    var sShuffleEl = document.getElementById("s-shuffle");
+    if (sShuffleEl) sShuffleEl.addEventListener("click", generatePuzzle);
 
-      // Function to handle difficulty change
-      function handleDifficultyChange(e) {
+    // Settings dropdown (agar Settings component mein hai)
+    var levelEl = document.getElementById("level");
+    if (levelEl) {
+      levelEl.addEventListener("change", function (e) {
         state.difficulty = e.target.value;
-        generatePuzzleWithCurrentWordSet();
-      }
-
-      const gridElement = document.getElementById("grid");
-
-      // Add cell click handler for sequential selection
-      gridElement.addEventListener("click", handleCellClick);
-
-      // Add event listener for the Confirm Selection button
-      //document.getElementById("confirmSelectionBtn").addEventListener("click", handleConfirmSelection);
-
-      // Mouse events for drag selection setting
-      gridElement.addEventListener("mousedown", handleDragStart);
-      gridElement.addEventListener("mousemove", handleDragMove);
-      document.addEventListener("mouseup", handleDragEnd);
-
-      // Touch events
-      gridElement.addEventListener("touchstart", (e) => {
-        e.preventDefault();
-        handleDragStart(e);
-      });
-
-      gridElement.addEventListener(
-        "touchmove",
-        (e) => {
-          e.preventDefault();
-          handleDragMove(e);
-        },
-        { passive: false }
-      ); // insures responsive touch handling
-
-      gridElement.addEventListener("touchend", (e) => {
-        e.preventDefault();
-        handleDragEnd();
+        var levelBtn = document.getElementById("levelBtn");
+        if (levelBtn) levelBtn.textContent = DIFFICULTY_LABELS[state.difficulty];
+        generatePuzzle();
       });
-
-      // Controls
-      document.getElementById("level").addEventListener("change", handleDifficultyChange);
-      document.getElementById("new").addEventListener("click", generateNewPuzzle);
-      document.getElementById("shuffle").addEventListener("click", resetPuzzle);
-      document.getElementById("solutionBtn").addEventListener("click", handleHelpButtonClick);
-      document.getElementById("clear").addEventListener("click", handleClearButtonClick);
-
-      // Initialize the first puzzle
-      generatePuzzleWithCurrentWordSet();
-    });
-  </script>
-</div>
+    }
+  }
+
+  // ── Start ──
+  generatePuzzle();
+  setupEvents();
+
+  // cross.json — sirf tab override karo jab zyada sets hon
+  fetch("/assets/json/cross.json")
+    .then(function (r) {
+      return r.json();
+    })
+    .then(function (data) {
+      if (Array.isArray(data) && data.length > WORD_SETS.length) {
+        WORD_SETS = data;
+        state.currentWordSet = WORD_SETS[0];
+        generatePuzzle();
+      }
+    })
+    .catch(function () {});
+</script>
diff --git a/src/components/Puzzle2.astro b/src/components/Puzzle2.astro
deleted file mode 100644
index fafb37fb..00000000
--- a/src/components/Puzzle2.astro
+++ /dev/null
@@ -1,641 +0,0 @@
----
-import HintIcon from "@/assets/icons/hint.svg";
----
-
-<style>
-  .level-dropdown-wrapper {
-    position: relative;
-    display: inline-block;
-  }
-
-  .level-dropdown {
-    display: none;
-    position: absolute;
-    top: calc(100% + 6px);
-    left: 0;
-    background: #fff;
-    border: 1.5px solid #e2e8f0;
-    border-radius: 10px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-    z-index: 999;
-    min-width: 140px;
-    overflow: hidden;
-  }
-
-  .level-dropdown.open {
-    display: block;
-  }
-
-  .level-option {
-    display: block;
-    width: 100%;
-    padding: 10px 16px;
-    background: none;
-    border: none;
-    text-align: left;
-    font-size: 0.95rem;
-    font-weight: 600;
-    cursor: pointer;
-    color: #1e293b;
-    transition: background 0.15s;
-  }
-
-  .level-option:hover {
-    background: #f1f5f9;
-  }
-
-  .level-option.active {
-    background: #e0f2fe;
-    color: #0284c7;
-  }
-
-  .level-arrow {
-    display: inline-block;
-    margin-left: 5px;
-    transition: transform 0.2s ease;
-    vertical-align: middle;
-    flex-shrink: 0;
-  }
-
-  #levelBtn.open .level-arrow {
-    transform: rotate(180deg);
-  }
-</style>
-
-<div class="puzzle-container">
-  <div class="top-controls">
-    <div class="level-dropdown-wrapper">
-      <button id="levelBtn" class="action-btn btn-level"
-        >⭐ Easy <svg
-          class="level-arrow"
-          xmlns="http://www.w3.org/2000/svg"
-          width="12"
-          height="12"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="3"
-          stroke-linecap="round"
-          stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg
-        ></button
-      >
-      <div class="level-dropdown" id="levelDropdown">
-        <button class="level-option" data-level="easy">⭐ Easy</button>
-        <button class="level-option" data-level="medium">🔥 Medium</button>
-        <button class="level-option" data-level="hard">💀 Hard</button>
-      </div>
-    </div>
-    <button id="new" class="action-btn btn-new">✨ New Puzzle</button>
-    <button id="shuffle" class="action-btn btn-shuffle">🔀 Shuffle</button>
-  </div>
-
-  <details open>
-    <summary>Word List</summary>
-    <div class="word-list" id="wordList"></div>
-  </details>
-
-  <div class="stats-container">
-    <div class="stats-button">
-      <span>Clicks: <span id="clickCount">0</span></span>
-    </div>
-    <div class="stats-button">
-      <span>Found: <span id="foundCount">0</span>/<span id="totalWords"></span></span>
-    </div>
-    <button id="solutionBtn" class="hint-button" aria-label="Toggle hints">
-      <div style="width: 28px; height: 28px;">
-        <HintIcon />
-      </div>
-    </button>
-    <button id="main-clear" class="action-btn btn-clear">🗑️ Clear</button>
-  </div>
-
-  <div id="grid" class="grid__puzzle"></div>
-</div>
-
-<script is:inline>
-  var WORD_SETS = [
-    {
-      easy: ["CAT", "DOG", "SUN", "MOON", "STAR"],
-      medium: ["APPLE", "GRAPE", "ORANGE", "BERRIES"],
-      hard: ["WALRUS", "GIRAFFE", "PENGUIN", "DOLPHIN"]
-    },
-    {
-      easy: ["HAT", "CAR", "BALL", "SHOE", "LAMP"],
-      medium: ["CHERRY", "COCONUT", "PLUM", "MELON", "PEACH"],
-      hard: ["OCTOPUS", "JACKAL", "WALRUS", "PEACOCK"]
-    },
-    {
-      easy: ["RED", "BLUE", "GREEN", "YELLOW", "PURPLE"],
-      medium: ["BLACK", "WHITE", "BROWN", "ORANGE", "PINK"],
-      hard: ["MAGENTA", "CYAN", "VIOLET", "MAROON"]
-    },
-    {
-      easy: ["SUN", "MARS", "MOON", "STAR", "COMET"],
-      medium: ["VENUS", "EARTH", "PLUTO", "ORBIT", "SOLAR"],
-      hard: ["JUPITER", "MERCURY", "NEPTUNE", "SATURN"]
-    },
-    {
-      easy: ["EGG", "MILK", "RICE", "CAKE", "SOUP"],
-      medium: ["BREAD", "SUGAR", "CREAM", "PASTA", "SPICE"],
-      hard: ["COOKIE", "BUTTER", "NOODLE", "MUFFIN"]
-    },
-    {
-      easy: ["RUN", "JUMP", "SWIM", "KICK", "BOWL"],
-      medium: ["CHESS", "RUGBY", "DERBY", "SQUASH", "POLO"],
-      hard: ["CRICKET", "TENNIS", "HOCKEY", "BOXING"]
-    },
-    {
-      easy: ["ARM", "LEG", "EYE", "HAND", "KNEE"],
-      medium: ["HEART", "BRAIN", "SPINE", "NERVE", "LIVER"],
-      hard: ["MUSCLE", "KIDNEY", "STOMACH", "THROAT"]
-    },
-    {
-      easy: ["MAP", "ROAD", "CITY", "TOWN", "PARK"],
-      medium: ["HOTEL", "TRAIN", "PLANE", "BEACH", "RIVER"],
-      hard: ["AIRPORT", "STATION", "HIGHWAY", "VILLAGE"]
-    },
-    {
-      easy: ["PEN", "BOOK", "DESK", "BELL", "TEST"],
-      medium: ["CLASS", "GRADE", "STUDY", "ESSAY", "NOTES"],
-      hard: ["PENCIL", "LESSON", "SCIENCE", "HISTORY"]
-    },
-    {
-      easy: ["SUN", "RAIN", "WIND", "SNOW", "HAIL"],
-      medium: ["CLOUD", "STORM", "FROST", "FOGGY", "SLEET"],
-      hard: ["THUNDER", "RAINBOW", "BLIZZARD", "CYCLONE"]
-    }
-  ];
-
-  var DIFFICULTY_LABELS = {
-    easy: "⭐ Easy",
-    medium: "🔥 Medium",
-    hard: "💀 Hard"
-  };
-
-  var COLOR_CLASSES = [
-    "word-color-1",
-    "word-color-2",
-    "word-color-3",
-    "word-color-4",
-    "word-color-5",
-    "word-color-6",
-    "word-color-7",
-    "word-color-8"
-  ];
-
-  var currentWordSetIndex = 0;
-  var state = {
-    difficulty: "easy",
-    grid: [],
-    size: 8,
-    selectedCells: [],
-    foundWords: [],
-    isDragging: false,
-    showSolution: false,
-    solutions: [],
-    clickCount: 0,
-    matchedCells: new Map(),
-    currentWordSet: WORD_SETS[0],
-    solutionColors: new Map(),
-    wordColors: new Map()
-  };
-
-  function randomLetter() {
-    return String.fromCharCode(65 + Math.floor(Math.random() * 26));
-  }
-
-  function randomColor() {
-    return "hsla(" + Math.floor(Math.random() * 360) + ",85%,72%,0.75)";
-  }
-
-  function isValidLine(cells) {
-    if (cells.length < 2) return true;
-    var dr = cells[1][0] - cells[0][0],
-      dc = cells[1][1] - cells[0][1];
-    if (Math.abs(dr) > 1 || Math.abs(dc) > 1 || (dr === 0 && dc === 0)) return false;
-    for (var i = 2; i < cells.length; i++) {
-      if (cells[i][0] !== cells[0][0] + dr * i || cells[i][1] !== cells[0][1] + dc * i) return false;
-    }
-    return true;
-  }
-
-  function canPlace(grid, word, row, col, dr, dc) {
-    var lr = row + dr * (word.length - 1),
-      lc = col + dc * (word.length - 1);
-    if (lr < 0 || lr >= state.size || lc < 0 || lc >= state.size) return false;
-    for (var i = 0; i < word.length; i++) {
-      var cur = grid[row + dr * i][col + dc * i];
-      if (cur !== "" && cur !== word[i]) return false;
-    }
-    return true;
-  }
-
-  function placeWord(grid, word) {
-    var dirs = [
-      [0, 1],
-      [1, 0],
-      [1, 1],
-      [1, -1]
-    ];
-    for (var a = 0; a < 200; a++) {
-      var d = dirs[Math.floor(Math.random() * dirs.length)];
-      var row = Math.floor(Math.random() * state.size);
-      var col = Math.floor(Math.random() * state.size);
-      if (canPlace(grid, word, row, col, d[0], d[1])) {
-        var wordCells = [];
-        for (var i = 0; i < word.length; i++) {
-          var r = row + d[0] * i,
-            c = col + d[1] * i;
-          grid[r][c] = word[i];
-          wordCells.push([r, c]);
-        }
-        return { placed: true, cells: wordCells };
-      }
-    }
-    return { placed: false, cells: [] };
-  }
-
-  function generatePuzzle() {
-    var newGrid = [];
-    for (var i = 0; i < state.size; i++) {
-      newGrid.push([]);
-      for (var j = 0; j < state.size; j++) newGrid[i].push("");
-    }
-    var words = state.currentWordSet[state.difficulty];
-    state.solutions = [];
-    state.wordColors = new Map();
-    state.matchedCells = new Map();
-    state.solutionColors = new Map();
-    for (var w = 0; w < words.length; w++) {
-      var res = placeWord(newGrid, words[w]);
-      if (res.placed) {
-        state.solutions.push({ word: words[w], cells: res.cells });
-        state.solutionColors.set(words[w], randomColor());
-      }
-    }
-    for (var i = 0; i < state.size; i++)
-      for (var j = 0; j < state.size; j++) if (newGrid[i][j] === "") newGrid[i][j] = randomLetter();
-    state.grid = newGrid;
-    state.foundWords = [];
-    state.showSolution = false;
-    state.selectedCells = [];
-    state.clickCount = 0;
-    renderDOM();
-  }
-
-  function newPuzzle() {
-    currentWordSetIndex = (currentWordSetIndex + 1) % WORD_SETS.length;
-    state.currentWordSet = WORD_SETS[currentWordSetIndex];
-    generatePuzzle();
-  }
-
-  function isValidNext(a, b) {
-    return Math.abs(a[0] - b[0]) <= 1 && Math.abs(a[1] - b[1]) <= 1;
-  }
-
-  function checkWord(selection) {
-    if (selection.length < 3 || !isValidLine(selection)) return false;
-    var word = selection
-      .map(function (rc) {
-        return state.grid[rc[0]][rc[1]];
-      })
-      .join("");
-    var rev = word.split("").reverse().join("");
-    var list = state.currentWordSet[state.difficulty];
-    var found = null;
-    if (list.indexOf(word) >= 0 && state.foundWords.indexOf(word) < 0) found = word;
-    else if (list.indexOf(rev) >= 0 && state.foundWords.indexOf(rev) < 0) found = rev;
-    if (found) {
-      state.foundWords.push(found);
-      if (!state.wordColors.has(found))
-        state.wordColors.set(found, COLOR_CLASSES[state.wordColors.size % COLOR_CLASSES.length]);
-      state.matchedCells.set(found, selection.slice());
-      return true;
-    }
-    return false;
-  }
-
-  function getCoords(el) {
-    if (!el || !el.dataset || !el.dataset.coords) return null;
-    return el.dataset.coords.split("-").map(Number);
-  }
-
-  function renderDOM() {
-    var gridEl = document.getElementById("grid");
-    if (!gridEl) return;
-
-    var isMobile = window.innerWidth <= 768;
-    var isLandscape = window.innerWidth > window.innerHeight;
-    var gridSize, cellSize;
-
-    if (isMobile) {
-      gridSize = isLandscape ? window.innerHeight - 16 : window.innerWidth - 16;
-      cellSize = Math.floor((gridSize - 12 - 7 * 3) / 8);
-      gridEl.style.display = "grid";
-      gridEl.style.gridTemplateColumns = "repeat(8, " + cellSize + "px)";
-      gridEl.style.gridTemplateRows = "repeat(8, " + cellSize + "px)";
-      gridEl.style.width = cellSize * 8 + 7 * 3 + 12 + "px";
-      gridEl.style.height = cellSize * 8 + 7 * 3 + 12 + "px";
-      gridEl.style.gap = "3px";
-      gridEl.style.padding = "6px";
-    } else {
-      gridEl.style.display = "grid";
-      gridEl.style.gridTemplateColumns = "repeat(8, 1fr)";
-      gridEl.style.gridTemplateRows = "";
-      gridEl.style.width = "";
-      gridEl.style.height = "";
-      gridEl.style.gap = "";
-      gridEl.style.padding = "";
-    }
-
-    gridEl.innerHTML = "";
-
-    for (var i = 0; i < state.grid.length; i++) {
-      for (var j = 0; j < state.grid[i].length; j++) {
-        var cell = document.createElement("div");
-        cell.className = "cell";
-        cell.textContent = state.grid[i][j];
-        cell.dataset.coords = i + "-" + j;
-
-        if (isMobile) {
-          cell.style.width = cellSize + "px";
-          cell.style.height = cellSize + "px";
-          cell.style.fontSize = Math.floor(cellSize * 0.45) + "px";
-          cell.style.display = "flex";
-          cell.style.justifyContent = "center";
-          cell.style.alignItems = "center";
-          cell.style.boxSizing = "border-box";
-          cell.style.border = "1.5px solid #e2e8f0";
-          cell.style.borderRadius = "5px";
-          cell.style.background = "#f8fafc";
-          cell.style.fontWeight = "700";
-          cell.style.color = "#1e293b";
-          cell.style.cursor = "pointer";
-          cell.style.userSelect = "none";
-          cell.style.touchAction = "none";
-          cell.style.overflow = "hidden";
-        }
-
-        var iSel = false;
-        for (var s = 0; s < state.selectedCells.length; s++) {
-          if (state.selectedCells[s][0] === i && state.selectedCells[s][1] === j) {
-            iSel = true;
-            break;
-          }
-        }
-        if (iSel) {
-          cell.classList.add("selected");
-          if (isMobile) {
-            cell.style.background = "var(--primary-color)";
-            cell.style.color = "#fff";
-          }
-        }
-
-        state.matchedCells.forEach(function (cells, word) {
-          for (var s = 0; s < cells.length; s++) {
-            if (cells[s][0] === i && cells[s][1] === j) {
-              cell.classList.add("match");
-              var cc = state.wordColors.get(word);
-              if (cc) cell.classList.add(cc);
-              break;
-            }
-          }
-        });
-
-        if (state.showSolution) {
-          for (var sol = 0; sol < state.solutions.length; sol++) {
-            var sc = state.solutions[sol];
-            for (var s = 0; s < sc.cells.length; s++) {
-              if (sc.cells[s][0] === i && sc.cells[s][1] === j) {
-                cell.style.backgroundColor = state.solutionColors.get(sc.word);
-                break;
-              }
-            }
-          }
-        }
-
-        gridEl.appendChild(cell);
-      }
-    }
-
-    var clickCountEl = document.getElementById("clickCount");
-    var foundCountEl = document.getElementById("foundCount");
-    var totalWordsEl = document.getElementById("totalWords");
-    var wordListEl = document.getElementById("wordList");
-    var solutionBtnEl = document.getElementById("solutionBtn");
-
-    if (clickCountEl) clickCountEl.textContent = state.clickCount;
-    if (foundCountEl) foundCountEl.textContent = state.foundWords.length;
-    if (totalWordsEl) totalWordsEl.textContent = state.currentWordSet[state.difficulty].length;
-
-    if (wordListEl) {
-      var words = state.currentWordSet[state.difficulty];
-      var html = "";
-      for (var w = 0; w < words.length; w++) {
-        var word = words[w];
-        var found = state.foundWords.indexOf(word) >= 0;
-        var cc = state.wordColors.get(word) || "";
-        var sc = state.showSolution ? state.solutionColors.get(word) : null;
-        var style = sc ? ' style="background-color:' + sc + ';"' : "";
-        html += '<span class="word ' + (found ? "found " + cc : "") + '"' + style + ">" + word + "</span>";
-      }
-      wordListEl.innerHTML = html;
-    }
-
-    if (solutionBtnEl) solutionBtnEl.classList.toggle("active", state.showSolution);
-  }
-
-  // ── Events ──
-  function setupEvents() {
-    var gridEl = document.getElementById("grid");
-    if (!gridEl) return;
-
-    gridEl.addEventListener("mousedown", function (e) {
-      var coords = getCoords(e.target);
-      if (!coords) return;
-      state.isDragging = true;
-      state.selectedCells = [coords];
-      state.clickCount++;
-      renderDOM();
-    });
-
-    gridEl.addEventListener("mousemove", function (e) {
-      if (!state.isDragging) return;
-      var coords = getCoords(e.target);
-      if (!coords) return;
-      var last = state.selectedCells[state.selectedCells.length - 1];
-      if (!last || !isValidNext(last, coords)) return;
-      var already = false;
-      for (var s = 0; s < state.selectedCells.length; s++) {
-        if (state.selectedCells[s][0] === coords[0] && state.selectedCells[s][1] === coords[1]) {
-          already = true;
-          break;
-        }
-      }
-      if (!already) {
-        state.selectedCells.push(coords);
-        renderDOM();
-      }
-    });
-
-    document.addEventListener("mouseup", function () {
-      if (!state.isDragging) return;
-      state.isDragging = false;
-      if (!checkWord(state.selectedCells)) state.selectedCells = [];
-      renderDOM();
-    });
-
-    gridEl.addEventListener(
-      "touchstart",
-      function (e) {
-        e.preventDefault();
-        var t = e.touches[0];
-        var el = document.elementFromPoint(t.clientX, t.clientY);
-        var coords = getCoords(el);
-        if (!coords) return;
-        state.isDragging = true;
-        state.selectedCells = [coords];
-        state.clickCount++;
-        renderDOM();
-      },
-      { passive: false }
-    );
-
-    gridEl.addEventListener(
-      "touchmove",
-      function (e) {
-        e.preventDefault();
-        if (!state.isDragging) return;
-        var t = e.touches[0];
-        var el = document.elementFromPoint(t.clientX, t.clientY);
-        var coords = getCoords(el);
-        if (!coords) return;
-        var last = state.selectedCells[state.selectedCells.length - 1];
-        if (!last || !isValidNext(last, coords)) return;
-        var already = false;
-        for (var s = 0; s < state.selectedCells.length; s++) {
-          if (state.selectedCells[s][0] === coords[0] && state.selectedCells[s][1] === coords[1]) {
-            already = true;
-            break;
-          }
-        }
-        if (!already) {
-          state.selectedCells.push(coords);
-          renderDOM();
-        }
-      },
-      { passive: false }
-    );
-
-    gridEl.addEventListener(
-      "touchend",
-      function (e) {
-        e.preventDefault();
-        if (!state.isDragging) return;
-        state.isDragging = false;
-        if (!checkWord(state.selectedCells)) state.selectedCells = [];
-        renderDOM();
-      },
-      { passive: false }
-    );
-
-    // ── Level dropdown ──
-    var levelBtn = document.getElementById("levelBtn");
-    var levelDropdown = document.getElementById("levelDropdown");
-
-    if (levelBtn && levelDropdown) {
-      levelBtn.addEventListener("click", function (e) {
-        e.stopPropagation();
-        levelDropdown.classList.toggle("open");
-        levelBtn.classList.toggle("open", levelDropdown.classList.contains("open"));
-        // current level highlight karo
-        var opts = levelDropdown.querySelectorAll(".level-option");
-        opts.forEach(function (opt) {
-          opt.classList.toggle("active", opt.dataset.level === state.difficulty);
-        });
-      });
-
-      levelDropdown.addEventListener("click", function (e) {
-        var opt = e.target.closest(".level-option");
-        if (!opt) return;
-        state.difficulty = opt.dataset.level;
-        levelBtn.innerHTML =
-          DIFFICULTY_LABELS[state.difficulty] +
-          ' <svg class="level-arrow" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>';
-        levelDropdown.classList.remove("open");
-        levelBtn.classList.remove("open");
-        generatePuzzle();
-      });
-
-      // Bahar click karo to dropdown band ho
-      document.addEventListener("click", function () {
-        levelDropdown.classList.remove("open");
-        levelBtn.classList.remove("open");
-      });
-    }
-
-    var newEl = document.getElementById("new");
-    if (newEl) newEl.addEventListener("click", newPuzzle);
-
-    var shuffleEl = document.getElementById("shuffle");
-    if (shuffleEl) shuffleEl.addEventListener("click", generatePuzzle);
-
-    var solutionBtnEl = document.getElementById("solutionBtn");
-    if (solutionBtnEl) {
-      solutionBtnEl.addEventListener("click", function () {
-        state.showSolution = !state.showSolution;
-        renderDOM();
-      });
-    }
-
-    // Clear button — sirf progress reset karo, grid wahi rahe
-    var clearEl = document.getElementById("main-clear");
-    if (clearEl) {
-      clearEl.addEventListener("click", function () {
-        state.selectedCells = [];
-        state.foundWords = [];
-        state.matchedCells = new Map();
-        state.wordColors = new Map();
-        state.isDragging = false;
-        state.showSolution = false;
-        state.clickCount = 0;
-        renderDOM();
-      });
-    }
-
-    // Settings component ke buttons (agar hain)
-    var sNewEl = document.getElementById("s-new");
-    if (sNewEl) sNewEl.addEventListener("click", newPuzzle);
-    var sShuffleEl = document.getElementById("s-shuffle");
-    if (sShuffleEl) sShuffleEl.addEventListener("click", generatePuzzle);
-
-    // Settings dropdown (agar Settings component mein hai)
-    var levelEl = document.getElementById("level");
-    if (levelEl) {
-      levelEl.addEventListener("change", function (e) {
-        state.difficulty = e.target.value;
-        var levelBtn = document.getElementById("levelBtn");
-        if (levelBtn) levelBtn.textContent = DIFFICULTY_LABELS[state.difficulty];
-        generatePuzzle();
-      });
-    }
-  }
-
-  // ── Start ──
-  generatePuzzle();
-  setupEvents();
-
-  // cross.json — sirf tab override karo jab zyada sets hon
-  fetch("/assets/json/cross.json")
-    .then(function (r) {
-      return r.json();
-    })
-    .then(function (data) {
-      if (Array.isArray(data) && data.length > WORD_SETS.length) {
-        WORD_SETS = data;
-        state.currentWordSet = WORD_SETS[0];
-        generatePuzzle();
-      }
-    })
-    .catch(function () {});
-</script>
diff --git a/src/pages/crossword.astro b/src/pages/crossword.astro
index 8120740a..41fb2b0f 100644
--- a/src/pages/crossword.astro
+++ b/src/pages/crossword.astro
@@ -1,11 +1,11 @@
 ---
-import "@/assets/styles/crossword2.css";
+import "@/assets/styles/crossword.css";
 import Back from "@/components/BackButton.astro";
 import Help from "@/components/Help.astro";
-import Puzzle2 from "@/components/Puzzle2.astro";
+import MobileSplash from "@/components/MobileSplash.astro";
+import Puzzle from "@/components/Puzzle.astro";
 import SharePopover from "@/components/ShareButton.astro";
 import BaseLayout from "@/layouts/Base";
-import MobileSplash from "@/components/MobileSplash.astro";
 
 const meta = {
   title: "Word Search",
@@ -25,7 +25,7 @@ const meta = {
   </Fragment>
   <div class="wordsearch-page">
     <h1 class="wordsearch-title">🔍 Word Search</h1>
-    <Puzzle2 />
+    <Puzzle />
   </div>
 </BaseLayout>
 

From a54aab28aa994a9f2fa5bc2e88b7aa59a6e8f414 Mon Sep 17 00:00:00 2001
From: RecursiveZero <recursivezero@outlook.com>
Date: Tue, 4 Aug 2026 23:21:55 +0530
Subject: [PATCH 2/2] update patch version

---
 CHANGELOG.md      | 5 +++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 534972d0..e6e08131 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -52,6 +52,11 @@ Created Repo from template
 - Added Featured and Category section
 - Added a keyboard game.
 
+## [3.4.1] - Aug 04 2026
+
+- Crossword page redesign for mobile view
+- typing page added
+
 ### [Unreleased]
 
 Here we write upgrading notes for brands. It's a team effort to make them as straightforward as possible.
diff --git a/package-lock.json b/package-lock.json
index f48c9701..03f48221 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@recursivezero/abcd",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@recursivezero/abcd",
-      "version": "3.4.0",
+      "version": "3.4.1",
       "license": "MIT",
       "dependencies": {
         "@astrojs/check": "0.9.4",
diff --git a/package.json b/package.json
index 30d41c1e..88cf2efa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@recursivezero/abcd",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "A website for kids whio want to learn the alphabet in a fun and interactive way. It is built using Astro and TypeScript.",
   "homepage": "https://abcdkbd.com",
   "displayName": "abcd",