From 843b88a883fa19b6c23724f1a9a1c7c3075156af Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Wed, 3 Jun 2026 12:38:39 +0530
Subject: [PATCH 01/16] [RZA-260184-bugfix]: feat: add reusable virtual
 keyboard component

---
 src/components/VirtualKeyboard.astro | 398 +++++++++++++++++++++++++++
 1 file changed, 398 insertions(+)
 create mode 100644 src/components/VirtualKeyboard.astro

diff --git a/src/components/VirtualKeyboard.astro b/src/components/VirtualKeyboard.astro
new file mode 100644
index 00000000..85763990
--- /dev/null
+++ b/src/components/VirtualKeyboard.astro
@@ -0,0 +1,398 @@
+---
+// VirtualKeyboard.astro
+// - Sirf touch device (mobile/tablet) pe show hoga, desktop pe NAHI
+// - Shift toggle: lowercase ↔ UPPERCASE
+// - Arrow row removed
+// - Light/Dark mode auto + manual [data-theme]
+// - Drag handle se resize
+---
+
+<div id="vk-container" class="vk-container" style="display:none;">
+  <div class="vk-resize-handle" id="vk-resize-handle">
+    <div class="vk-handle-bar"></div>
+  </div>
+  <div class="vk-keyboard" id="vk-keyboard">
+    <div class="vk-row" id="vk-r0"></div>
+    <div class="vk-row" id="vk-r1"></div>
+    <div class="vk-row" id="vk-r2"></div>
+    <div class="vk-row" id="vk-r3"></div>
+  </div>
+</div>
+
+<script is:inline>
+  (function () {
+    // ── Layout: arrow row removed ──
+    const VK_LAYOUT = [
+      ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
+      ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
+      ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
+      ["\u21e7", "Z", "X", "C", "V", "B", "N", "M", "\u232b"]
+    ];
+
+    const SHIFT_KEY = "\u21e7"; // ⇧
+    const BACK_KEY = "\u232b"; // ⌫
+
+    let isCaps = false; // shift state
+
+    // ── Scale ──
+    let vkScale = parseFloat(localStorage.getItem("vk-scale") || "1");
+
+    function applyScale() {
+      const base = Math.min((window.innerWidth - 32) / 11, 46);
+      const ks = Math.round(base * vkScale);
+      const gap = Math.max(4, Math.round(ks * 0.12));
+      const h = Math.round(ks * 1.05);
+      const fs = Math.max(11, Math.round(ks * 0.42));
+      const root = document.documentElement;
+      root.style.setProperty("--vk-key-w", ks + "px");
+      root.style.setProperty("--vk-key-h", h + "px");
+      root.style.setProperty("--vk-gap", gap + "px");
+      root.style.setProperty("--vk-fz", fs + "px");
+      root.style.setProperty("--vk-fz-sm", Math.max(10, fs - 2) + "px");
+    }
+
+    // ── Update all letter buttons to current case ──
+    function updateCase() {
+      document.querySelectorAll(".vk-key[data-letter]").forEach((btn) => {
+        btn.textContent = isCaps ? btn.dataset.letter.toUpperCase() : btn.dataset.letter.toLowerCase();
+      });
+      // Shift button highlight
+      const shiftBtn = document.querySelector(".vk-key.vk-shift");
+      if (shiftBtn) shiftBtn.classList.toggle("vk-shift-on", isCaps);
+    }
+
+    function buildVK() {
+      VK_LAYOUT.forEach((row, ri) => {
+        const cont = document.getElementById("vk-r" + ri);
+        if (!cont) return;
+        cont.innerHTML = "";
+
+        row.forEach((k) => {
+          const btn = document.createElement("button");
+          const isShift = k === SHIFT_KEY;
+          const isBack = k === BACK_KEY;
+          const isLetter = /^[A-Z]$/.test(k);
+          const isNum = /^[0-9]$/.test(k);
+
+          // Classes
+          let cls = "vk-key";
+          if (isShift || isBack) cls += " vk-fn";
+          if (isShift) cls += " vk-shift";
+          btn.className = cls;
+          btn.setAttribute("type", "button");
+
+          // Store original letter for case toggling
+          if (isLetter) {
+            btn.dataset.letter = k;
+            btn.textContent = isCaps ? k.toUpperCase() : k.toLowerCase();
+          } else {
+            btn.textContent = k;
+          }
+
+          btn.addEventListener("pointerdown", (e) => {
+            e.preventDefault();
+
+            if (isShift) {
+              // Toggle caps
+              isCaps = !isCaps;
+              updateCase();
+              return;
+            }
+
+            btn.classList.add("vk-pressed");
+            setTimeout(() => btn.classList.remove("vk-pressed"), 120);
+
+            let realKey;
+            if (isBack) {
+              realKey = "Backspace";
+            } else if (isLetter) {
+              realKey = isCaps ? k.toUpperCase() : k.toLowerCase();
+            } else {
+              realKey = k;
+            }
+
+            document.dispatchEvent(new CustomEvent("virtualKeyPress", { detail: { key: realKey } }));
+            document.dispatchEvent(new KeyboardEvent("keydown", { key: realKey, bubbles: true, cancelable: true }));
+            document.dispatchEvent(new KeyboardEvent("keyup", { key: realKey, bubbles: true, cancelable: true }));
+          });
+
+          cont.appendChild(btn);
+        });
+      });
+
+      applyScale();
+      updateCase();
+    }
+
+    // ── Resize handle ──
+    function initResize() {
+      const handle = document.getElementById("vk-resize-handle");
+      if (!handle) return;
+      let startY = 0,
+        startScale = 1;
+
+      handle.addEventListener("pointerdown", (e) => {
+        e.preventDefault();
+        startY = e.clientY;
+        startScale = vkScale;
+        handle.setPointerCapture(e.pointerId);
+      });
+      handle.addEventListener("pointermove", (e) => {
+        if (e.buttons === 0) return;
+        const delta = startY - e.clientY;
+        vkScale = Math.min(1.6, Math.max(0.6, startScale + delta / 120));
+        localStorage.setItem("vk-scale", vkScale.toFixed(3));
+        applyScale();
+      });
+    }
+
+    let vkBuilt = false;
+
+    // ── Should keyboard be visible right now? ──
+    function shouldShowKbd() {
+      const isNarrow = window.innerWidth <= 1024;
+      const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+      const hasCoarse = window.matchMedia("(pointer: coarse)").matches;
+      return isNarrow || isMobileUA || hasCoarse;
+    }
+
+    // ── Show or hide based on current state ──
+    function syncKeyboard() {
+      const container = document.getElementById("vk-container");
+      if (!container) return;
+
+      if (shouldShowKbd()) {
+        if (!vkBuilt) {
+          buildVK();
+          initResize();
+          vkBuilt = true;
+        }
+        container.style.display = "flex";
+        applyScale();
+      } else {
+        container.style.display = "none";
+      }
+    }
+
+    // ── Listen to resize continuously ──
+    window.addEventListener("resize", syncKeyboard);
+
+    // ── First run ──
+    syncKeyboard();
+    document.addEventListener("astro:page-load", () => {
+      vkBuilt = false; // page change pe rebuild
+      syncKeyboard();
+    });
+  })();
+</script>
+
+<style is:global>
+  /* ── JS-driven size vars (fallback) ── */
+  :root {
+    --vk-key-w: 38px;
+    --vk-key-h: 40px;
+    --vk-gap: 5px;
+    --vk-fz: 16px;
+    --vk-fz-sm: 13px;
+    --vk-radius: 9px;
+    --vk-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
+  }
+
+  /* ── LIGHT MODE (default) ── */
+  :root {
+    --vk-bg: #d1d5db;
+    --vk-border-top: #b0b4bb;
+    --vk-shadow-box: 0 -2px 8px rgba(0, 0, 0, 0.12);
+    --vk-key-bg: #ffffff;
+    --vk-key-color: #000000;
+    --vk-key-shadow: #8a9099;
+    --vk-fn-bg: #adb5bd;
+    --vk-fn-color: #000000;
+    --vk-fn-shadow: #7a8088;
+    --vk-shift-on-bg: #4a9eff;
+    --vk-handle-bar: rgba(0, 0, 0, 0.25);
+    --vk-accent: #1a6bbf;
+  }
+
+  /* ── DARK MODE — system ── */
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --vk-bg: #1a1a1a;
+      --vk-border-top: #2e2e2e;
+      --vk-shadow-box: 0 -4px 20px rgba(0, 0, 0, 0.7);
+      --vk-key-bg: #2c2c2e;
+      --vk-key-color: #ffffff;
+      --vk-key-shadow: #000000;
+      --vk-fn-bg: #1c1c1e;
+      --vk-fn-color: #ffffff;
+      --vk-fn-shadow: #000000;
+      --vk-shift-on-bg: #3a8ef6;
+      --vk-handle-bar: rgba(255, 255, 255, 0.25);
+      --vk-accent: #3a8ef6;
+    }
+  }
+
+  /* ── DARK MODE — manual ── */
+  [data-theme="dark"] {
+    --vk-bg: #1a1a1a;
+    --vk-border-top: #2e2e2e;
+    --vk-shadow-box: 0 -4px 20px rgba(0, 0, 0, 0.7);
+    --vk-key-bg: #2c2c2e;
+    --vk-key-color: #ffffff;
+    --vk-key-shadow: #000000;
+    --vk-fn-bg: #1c1c1e;
+    --vk-fn-color: #ffffff;
+    --vk-fn-shadow: #000000;
+    --vk-shift-on-bg: #3a8ef6;
+    --vk-handle-bar: rgba(255, 255, 255, 0.25);
+    --vk-accent: #3a8ef6;
+  }
+
+  /* ── CONTAINER ── */
+  .vk-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 6px 14px;
+    background: var(--vk-bg);
+    border-top: 1px solid var(--vk-border-top);
+    box-shadow: var(--vk-shadow-box);
+    user-select: none;
+    -webkit-user-select: none;
+    box-sizing: border-box;
+    transition: background 0.2s;
+  }
+
+  /* ── RESIZE HANDLE ── */
+  .vk-resize-handle {
+    width: 100%;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: ns-resize;
+    touch-action: none;
+    flex-shrink: 0;
+  }
+  .vk-handle-bar {
+    width: 40px;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--vk-handle-bar);
+    transition:
+      background 0.2s,
+      width 0.15s;
+  }
+  .vk-resize-handle:active .vk-handle-bar {
+    width: 60px;
+    background: var(--vk-accent);
+  }
+
+  /* ── KEYBOARD WRAPPER ── */
+  .vk-keyboard {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vk-gap);
+    width: 100%;
+    max-width: 560px;
+    align-items: center;
+  }
+
+  /* ── ROW ── */
+  .vk-row {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    gap: var(--vk-gap);
+    width: 100%;
+  }
+
+  /* ── BASE KEY ── */
+  .vk-key {
+    flex: 0 0 var(--vk-key-w);
+    width: var(--vk-key-w);
+    height: var(--vk-key-h);
+    min-width: 0;
+    background: var(--vk-key-bg);
+    color: var(--vk-key-color);
+    border: none;
+    border-radius: var(--vk-radius);
+    font-size: var(--vk-fz);
+    font-weight: 400;
+    font-family: var(--vk-font);
+    letter-spacing: 0.01em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 1px 0 0.5px var(--vk-key-shadow);
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+    transition:
+      transform 0.07s ease,
+      opacity 0.07s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .vk-key::before {
+    content: "";
+    position: absolute;
+    inset: 0 0 55% 0;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 100%);
+    border-radius: var(--vk-radius) var(--vk-radius) 0 0;
+    pointer-events: none;
+  }
+
+  /* ── FUNCTION KEYS (Shift, Backspace) ── */
+  .vk-key.vk-fn {
+    flex: 0 0 calc(var(--vk-key-w) * 1.45);
+    width: calc(var(--vk-key-w) * 1.45);
+    font-size: var(--vk-fz-sm);
+    background: var(--vk-fn-bg);
+    color: var(--vk-fn-color);
+    box-shadow: 0 1px 0 0.5px var(--vk-fn-shadow);
+  }
+
+  /* ── SHIFT key: default = accent color icon ── */
+  .vk-key.vk-shift {
+    color: var(--vk-accent);
+    font-size: calc(var(--vk-fz-sm) * 1.1);
+    transition:
+      background 0.15s,
+      color 0.15s,
+      transform 0.07s,
+      opacity 0.07s;
+  }
+
+  /* ── SHIFT ON: blue filled background ── */
+  .vk-key.vk-shift.vk-shift-on {
+    background: var(--vk-shift-on-bg);
+    color: #ffffff;
+    box-shadow: 0 1px 0 0.5px rgba(0, 0, 0, 0.4);
+  }
+
+  /* ── PRESS FEEDBACK ── */
+  .vk-key:active,
+  .vk-key.vk-pressed {
+    transform: scale(0.88);
+    opacity: 0.72;
+    box-shadow: none;
+  }
+
+  /* ── PAGE BOTTOM PADDING ── */
+  @media (max-width: 1024px) {
+    body:has(#vk-container[style*="flex"]) .draw-wrapper,
+    body:has(#vk-container[style*="flex"]) .container__main,
+    body:has(#vk-container[style*="flex"]) .container__english,
+    body:has(#vk-container[style*="flex"]) .container__reader,
+    body:has(#vk-container[style*="flex"]) .tv {
+      padding-bottom: 260px !important;
+    }
+  }
+</style>

From 26eae303c0d1d9e70401983da9668709c1ecc246 Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Wed, 3 Jun 2026 16:46:50 +0530
Subject: [PATCH 02/16] [RZA-260184-bugfix1]: feat: integrate virtual keyboard
 in draw  game

---
 src/assets/styles/draw.css      | 2 +-
 src/assets/styles/header.css    | 2 +-
 src/assets/styles/landing.css   | 3 +--
 src/assets/styles/map/popup.css | 2 +-
 src/components/Popup.astro      | 2 +-
 src/pages/draw.astro            | 6 ++++--
 src/pages/games/[age].astro     | 2 +-
 7 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/assets/styles/draw.css b/src/assets/styles/draw.css
index 7b169a8b..f2f5a56f 100644
--- a/src/assets/styles/draw.css
+++ b/src/assets/styles/draw.css
@@ -336,4 +336,4 @@
 
 .controls {
   z-index: 100;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css
index 8bdee8a8..266664ff 100644
--- a/src/assets/styles/header.css
+++ b/src/assets/styles/header.css
@@ -650,4 +650,4 @@
 
 [data-theme="light"] .hero-search {
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/landing.css b/src/assets/styles/landing.css
index fcd98c21..23ef136a 100644
--- a/src/assets/styles/landing.css
+++ b/src/assets/styles/landing.css
@@ -682,7 +682,6 @@ footer {
    TOUCH DEVICES
 ══════════════════════════════════════ */
 @media (hover: none) and (pointer: coarse) {
-
   .category-card:hover,
   .game-card:hover,
   .cta-button:hover {
@@ -696,4 +695,4 @@ footer {
   .game-card:active {
     transform: scale(0.99);
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/map/popup.css b/src/assets/styles/map/popup.css
index bd4c4e19..5a41de65 100644
--- a/src/assets/styles/map/popup.css
+++ b/src/assets/styles/map/popup.css
@@ -137,4 +137,4 @@
     font-size: 1rem;
     padding: 0.7rem;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Popup.astro b/src/components/Popup.astro
index 8ae860ad..8e7aac73 100644
--- a/src/components/Popup.astro
+++ b/src/components/Popup.astro
@@ -58,4 +58,4 @@ import "@/assets/styles/map/popup.css";
       }
     }, 50);
   });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/pages/draw.astro b/src/pages/draw.astro
index d1472947..b8d698c6 100644
--- a/src/pages/draw.astro
+++ b/src/pages/draw.astro
@@ -3,6 +3,7 @@ import "@/assets/styles/draw.css";
 import Back from "@/components/BackButton.astro";
 import ControlsContainer from "@/components/ControllerContainer.astro";
 import DrawComponent from "@/components/DrawKeyboard.astro";
+import VirtualKeyboard from "@/components/VirtualKeyboard.astro";
 import MobileSplash from "@/components/MobileSplash.astro";
 import BaseLayout from "@/layouts/Base";
 
@@ -43,13 +44,13 @@ const meta = {
     align-items: center !important;
     gap: 0.25rem !important;
   }
-  /* Sirf draw page pe nav links right shift */
+  /* Only draw page pe nav links right shift */
   :global(.nav__links) {
     justify-content: flex-end !important;
     padding-right: 2rem !important;
   }
 
-  /* Sab control buttons same size */
+  /* all control buttons same size */
   :global(.control-button) {
     width: 2.2rem !important;
     height: 2.2rem !important;
@@ -147,4 +148,5 @@ const meta = {
   <ControlsContainer slot="header-right" />
   <Back />
   <DrawComponent />
+  <VirtualKeyboard />
 </BaseLayout>
diff --git a/src/pages/games/[age].astro b/src/pages/games/[age].astro
index 949e14a5..2e1fc52b 100644
--- a/src/pages/games/[age].astro
+++ b/src/pages/games/[age].astro
@@ -56,4 +56,4 @@ const meta = {
   :global([data-theme="dark"]) .page-header h2 {
     color: #e2f0ff;
   }
-</style>
\ No newline at end of file
+</style>

From 9e75b404d7abf2042d0c6e3fbe48f39239a11340 Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Wed, 3 Jun 2026 17:23:28 +0530
Subject: [PATCH 03/16] [RZA-260184-bugfix1]: feat: integrate virtual keyboard
 in alphabets playground game

---
 src/pages/alphabets/[alphabet]/playground.astro | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/alphabets/[alphabet]/playground.astro b/src/pages/alphabets/[alphabet]/playground.astro
index 1d369c34..426a4cdd 100644
--- a/src/pages/alphabets/[alphabet]/playground.astro
+++ b/src/pages/alphabets/[alphabet]/playground.astro
@@ -6,6 +6,7 @@ import BackButton from "@/components/BackButton.astro";
 import { DATASET } from "@/mappers/dataset";
 import SharePopover from "@/components/ShareButton.astro";
 import KeyboardTrigger from "@/components/KeyboardTrigger.astro";
+import VirtualKeyboard from "@/components/VirtualKeyboard.astro";
 
 import { capitalizeThis } from "@/utils/common";
 
@@ -58,6 +59,7 @@ const meta = {
       <div id="description" class="description"></div>
     </article>
   </div>
+  <VirtualKeyboard />
 </BaseLayout>
 
 <script is:inline define:vars={{ alphabetData: currentCategory.data, category: currentCategory.category }}>

From b16955e648b3ec746cfaff9ad0ad29df772de5a1 Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Wed, 3 Jun 2026 20:17:20 +0530
Subject: [PATCH 04/16] [RZA-260184-bugfix1]: feat: integrate virtual keyboard
 and fix button visibility in panel game

---
 src/pages/panel.astro | 365 +++++++++++++++++++++++++++---------------
 1 file changed, 237 insertions(+), 128 deletions(-)

diff --git a/src/pages/panel.astro b/src/pages/panel.astro
index e47e53c7..bf31ecd4 100644
--- a/src/pages/panel.astro
+++ b/src/pages/panel.astro
@@ -7,6 +7,7 @@ import SettingIcon from "@/assets/icons/settings.svg";
 import Back from "@/components/BackButton.astro";
 import SharePopover from "@/components/ShareButton.astro";
 import MobileSplash from "@/components/MobileSplash.astro";
+import VirtualKeyboard from "@/components/VirtualKeyboard.astro";
 
 const meta = {
   title: "Panel",
@@ -17,101 +18,129 @@ const meta = {
 
 <BaseLayout meta={meta}>
   <Back />
-  <MobileSplash stay={true} />
+  <MobileSplash stay={false} />
+
+  <!-- Desktop: header ke right slot mein sirf settings button -->
   <Fragment slot="header-right">
     <div class="right-header-buttons">
       <div class="settings-button-container">
         <button id="settingsButton" class="settings-button" aria-label="Open panel settings" data-tooltip="Settings">
           <SettingIcon class="settings-icon" />
         </button>
-        <div id="panelToolsPopover" class="panel-tools-popover" aria-hidden="true">
-          <h2 class="gradient-text">Panel Tools</h2>
-          <section id="option-box" class="panel__options">
-            <div class="controls" role="radiogroup" aria-labelledby="orientation-label">
-              <span id="orientation-label" class="sr-only">Panel Orientation</span>
-
-              <label class="vertical" for="vertical">
-                <input
-                  type="radio"
-                  class="orientation"
-                  name="orientation"
-                  id="vertical"
-                  value="X"
-                  aria-label="Vertical Orientation"
-                />
-                <span class="icon" aria-hidden="true">⇕</span>
-                <span class="sr-only">Vertical Orientation</span>
-              </label>
-
-              <label class="horizontal" for="horizontal">
-                <input
-                  type="radio"
-                  class="orientation"
-                  name="orientation"
-                  id="horizontal"
-                  value="Y"
-                  aria-label="Horizontal Orientation"
-                />
-                <span class="icon" aria-hidden="true">⇔</span>
-                <span class="sr-only">Horizontal Orientation</span>
-              </label>
-            </div>
-
-            <div class="controls" role="radiogroup" aria-labelledby="content-type-label">
-              <span id="content-type-label" class="sr-only">Panel Content Type</span>
-
-              <label class="alphabet" for="alphabet">
-                <input
-                  type="radio"
-                  class="content-type"
-                  name="content-type"
-                  id="alphabet"
-                  value="alphabet"
-                  aria-label="Alphabet Panel"
-                  checked
-                />
-                <span class="icon" aria-hidden="true">A-Z</span>
-                <span class="sr-only">Alphabet Panel</span>
-              </label>
-
-              <label class="numbers" for="numbers">
-                <input
-                  type="radio"
-                  class="content-type"
-                  name="content-type"
-                  id="numbers"
-                  value="numbers"
-                  aria-label="Numbers Panel"
-                />
-                <span class="icon" aria-hidden="true">0-9</span>
-                <span class="sr-only">Numbers Panel</span>
-              </label>
-            </div>
-
-            <div class="range__option">
-              <span id="min-range-value">10</span>
-              <input
-                type="range"
-                name="range"
-                id="range"
-                class="range__slider"
-                value="0"
-                min="10"
-                max="26"
-                title="Adjust panel size"
-              />
-              <span id="max-range-value">26</span>
-            </div>
-          </section>
-        </div>
       </div>
     </div>
+  </Fragment>
+
+  <!--
+    ✅ FIX: SharePopover aur Help SIRF EK BAAR render ho rahe hain.
+    #floating-panel-actions CSS se desktop aur mobile dono pe sahi jagah position hoga.
+    Pehle ye dono header slot + mobile-panel-buttons dono mein duplicate the,
+    jisse getElementById hamesha pehla (header wala, display:none) element pick karta tha
+    aur mobile pe kuch kaam nahi karta tha.
+  -->
+  <div id="floating-panel-actions" class="floating-panel-actions">
     <SharePopover />
     <Help
       title="Panel"
       description="Use arrow keys to navigate through letters/numbers. Up/down for vertical orientation, left/right for horizontal. Type any letter or number to jump to it. Adjust panel size with the slider."
     />
-  </Fragment>
+  </div>
+
+  <!-- Mobile-only: sirf settings button (Share + Help upar wale div mein hain already) -->
+  <div class="mobile-panel-buttons">
+    <div class="settings-button-container mobile-settings-container">
+      <button
+        id="mobileSettingsButton"
+        class="settings-button"
+        aria-label="Open panel settings"
+        data-tooltip="Settings"
+      >
+        <SettingIcon class="settings-icon" />
+      </button>
+    </div>
+  </div>
+
+  <!-- Popover body-level pe — desktop + mobile dono access kar sakein -->
+  <div id="panelToolsPopover" class="panel-tools-popover" aria-hidden="true">
+    <h2 class="gradient-text">Panel Tools</h2>
+    <section id="option-box" class="panel__options">
+      <div class="controls" role="radiogroup" aria-labelledby="orientation-label">
+        <span id="orientation-label" class="sr-only">Panel Orientation</span>
+
+        <label class="vertical" for="vertical">
+          <input
+            type="radio"
+            class="orientation"
+            name="orientation"
+            id="vertical"
+            value="X"
+            aria-label="Vertical Orientation"
+          />
+          <span class="icon" aria-hidden="true">⇕</span>
+          <span class="sr-only">Vertical Orientation</span>
+        </label>
+
+        <label class="horizontal" for="horizontal">
+          <input
+            type="radio"
+            class="orientation"
+            name="orientation"
+            id="horizontal"
+            value="Y"
+            aria-label="Horizontal Orientation"
+          />
+          <span class="icon" aria-hidden="true">⇔</span>
+          <span class="sr-only">Horizontal Orientation</span>
+        </label>
+      </div>
+
+      <div class="controls" role="radiogroup" aria-labelledby="content-type-label">
+        <span id="content-type-label" class="sr-only">Panel Content Type</span>
+
+        <label class="alphabet" for="alphabet">
+          <input
+            type="radio"
+            class="content-type"
+            name="content-type"
+            id="alphabet"
+            value="alphabet"
+            aria-label="Alphabet Panel"
+            checked
+          />
+          <span class="icon" aria-hidden="true">A-Z</span>
+          <span class="sr-only">Alphabet Panel</span>
+        </label>
+
+        <label class="numbers" for="numbers">
+          <input
+            type="radio"
+            class="content-type"
+            name="content-type"
+            id="numbers"
+            value="numbers"
+            aria-label="Numbers Panel"
+          />
+          <span class="icon" aria-hidden="true">0-9</span>
+          <span class="sr-only">Numbers Panel</span>
+        </label>
+      </div>
+
+      <div class="range__option">
+        <span id="min-range-value">10</span>
+        <input
+          type="range"
+          name="range"
+          id="range"
+          class="range__slider"
+          value="0"
+          min="10"
+          max="26"
+          title="Adjust panel size"
+        />
+        <span id="max-range-value">26</span>
+      </div>
+    </section>
+  </div>
 
   <article class="tv container__panel">
     <section class="scene">
@@ -120,7 +149,9 @@ const meta = {
       </letter-panel>
     </section>
   </article>
+  <VirtualKeyboard />
 </BaseLayout>
+
 <script>
   enum ArrowKeys {
     LEFT = "ArrowLeft",
@@ -134,7 +165,6 @@ const meta = {
     NUMBERS = "numbers"
   }
 
-  // Define the behaviour for our new type of HTML element.
   class LetterPanel extends HTMLElement {
     #panel: HTMLElement;
     #cellRange: HTMLInputElement;
@@ -182,7 +212,7 @@ const meta = {
             const target = e.target as HTMLInputElement;
             this.#orientation = target.value as "X" | "Y";
             this.changePanel();
-            target.blur(); //unfocus the radio button
+            target.blur();
           },
           false
         );
@@ -194,9 +224,9 @@ const meta = {
           (e: Event) => {
             const target = e.target as HTMLInputElement;
             this.#contentType = target.value as ContentType;
-            this.#selectedIndex = 0; // Reset index when content type changes
-            this.updateRangeAttributes(); // Update range limits
-            this.buildPanel(); // Rebuild panel with new content
+            this.#selectedIndex = 0;
+            this.updateRangeAttributes();
+            this.buildPanel();
             this.changePanel();
             target.blur();
           },
@@ -213,33 +243,48 @@ const meta = {
         this.buildPanel();
         this.changePanel();
       });
+
       this.#cellRange.addEventListener("change", () => {
-        // Add change event for final blur
         this.#cellRange.blur();
       });
 
       const panelToolsPopover = document.getElementById("panelToolsPopover");
       const settingsButton = document.getElementById("settingsButton");
-      // Panel tools logic
+      const mobileSettingsButton = document.getElementById("mobileSettingsButton");
+
+      // Shared toggle logic — desktop + mobile dono ke liye ek hi function
+      const togglePopover = (event: Event, btn: HTMLElement) => {
+        event.stopPropagation();
+        const isOpen = panelToolsPopover!.classList.contains("open");
+        panelToolsPopover!.classList.toggle("open", !isOpen);
+        btn.setAttribute("aria-expanded", String(!isOpen));
+        panelToolsPopover!.setAttribute("aria-hidden", String(isOpen));
+      };
+
       if (settingsButton && panelToolsPopover) {
-        settingsButton.addEventListener("click", (event) => {
-          event.stopPropagation();
-          const isOpen = panelToolsPopover.classList.contains("open");
-          panelToolsPopover.classList.toggle("open", !isOpen);
-          settingsButton.setAttribute("aria-expanded", String(!isOpen)); // Convert boolean to string
-          panelToolsPopover.setAttribute("aria-hidden", String(isOpen)); // Convert boolean to string
-        });
-
-        document.addEventListener("click", (event) => {
-          if (!panelToolsPopover.contains(event.target as Node) && !settingsButton.contains(event.target as Node)) {
-            if (panelToolsPopover.classList.contains("open")) {
-              settingsButton.setAttribute("aria-expanded", "false");
-              panelToolsPopover.setAttribute("aria-hidden", "true");
-              panelToolsPopover.classList.remove("open");
-            }
-          }
-        });
+        settingsButton.addEventListener("click", (event) => togglePopover(event, settingsButton));
+      }
+
+      if (mobileSettingsButton && panelToolsPopover) {
+        mobileSettingsButton.addEventListener("click", (event) => togglePopover(event, mobileSettingsButton));
       }
+
+      // Bahar click karne pe popover band ho jaaye
+      document.addEventListener("click", (event) => {
+        if (
+          panelToolsPopover &&
+          !panelToolsPopover.contains(event.target as Node) &&
+          !settingsButton?.contains(event.target as Node) &&
+          !mobileSettingsButton?.contains(event.target as Node)
+        ) {
+          if (panelToolsPopover.classList.contains("open")) {
+            settingsButton?.setAttribute("aria-expanded", "false");
+            mobileSettingsButton?.setAttribute("aria-expanded", "false");
+            panelToolsPopover.setAttribute("aria-hidden", "true");
+            panelToolsPopover.classList.remove("open");
+          }
+        }
+      });
     }
 
     updateRangeAttributes() {
@@ -248,16 +293,13 @@ const meta = {
         this.#cellRange.max = "26";
         this.#minRangeValueSpan.textContent = "10";
         this.#maxRangeValueSpan.textContent = "26";
-        // Ensure current value is within bounds
         if (Number(this.#cellRange.value) < 10) this.#cellRange.value = "10";
         if (Number(this.#cellRange.value) > 26) this.#cellRange.value = "26";
       } else {
-        // ContentType.NUMBERS
         this.#cellRange.min = "3";
         this.#cellRange.max = "10";
         this.#minRangeValueSpan.textContent = "3";
         this.#maxRangeValueSpan.textContent = "10";
-        // Ensure current value is within bounds
         if (Number(this.#cellRange.value) < 3) this.#cellRange.value = "3";
         if (Number(this.#cellRange.value) > 10) this.#cellRange.value = "10";
       }
@@ -281,10 +323,9 @@ const meta = {
         div.classList.add("panel__cell");
 
         if (this.#contentType === ContentType.ALPHABET) {
-          div.textContent = String.fromCodePoint(65 + i); // A to Z
+          div.textContent = String.fromCodePoint(65 + i);
         } else {
-          // ContentType.NUMBERS
-          div.textContent = String(i % 10); // 0-9, wraps around after 9
+          div.textContent = String(i % 10);
         }
 
         fragment.appendChild(div);
@@ -302,7 +343,7 @@ const meta = {
         cell.style.transform = transformString;
       });
       this.rotatePanel({ by: this.#orientation });
-      this.updateFrontCell(); // update front cell styling
+      this.updateFrontCell();
     }
 
     updateFrontCell() {
@@ -313,10 +354,8 @@ const meta = {
 
       cells.forEach((cell, index) => {
         cell.classList.remove("front");
-        // Calculate which cell should be "front" based on rotation
         const adjustedIndex = (index + normalizedIndex) % count;
         if (adjustedIndex === 0) {
-          // The cell that is currently at the 0-degree position (front)
           cell.classList.add("front");
         }
       });
@@ -367,26 +406,19 @@ const meta = {
           break;
         }
         default: {
-          // Handle character input (alphabets and numbers)
           const char = key.toUpperCase();
           if (this.#contentType === ContentType.ALPHABET) {
-            if (/^[A-Z]$/.test(key)) {
-              // A-Z (uppercase)
-              this.#selectedIndex = (65 - char.charCodeAt(0) + currentPanelSize) % currentPanelSize; // Calculate index relative to A
-            } else if (/^[a-z]$/.test(key)) {
-              // a-z (lowercase)
-              this.#selectedIndex = (97 - char.charCodeAt(0) + currentPanelSize) % currentPanelSize; // Calculate index relative to a
+            if (/^[A-Za-z]$/.test(key)) {
+              const letterIndex = char.charCodeAt(0) - 65;
+              this.#selectedIndex = (currentPanelSize - letterIndex) % currentPanelSize;
             } else {
-              // If not an alphabet, just move forward
               this.#selectedIndex++;
             }
           } else {
-            // ContentType.NUMBERS
             if (/^[0-9]$/.test(key)) {
-              // 0-9
-              this.#selectedIndex = (48 - char.charCodeAt(0) + currentPanelSize) % currentPanelSize; // Calculate index relative to 0
+              const digitIndex = char.charCodeAt(0) - 48;
+              this.#selectedIndex = (currentPanelSize - digitIndex) % currentPanelSize;
             } else {
-              // If not a number, just move forward
               this.#selectedIndex++;
             }
           }
@@ -396,6 +428,83 @@ const meta = {
       this.changePanel();
     }
   }
-  // Tell the browser to use our LetterPanel class for <letter-panel> elements.
+
   customElements.define("letter-panel", LetterPanel);
 </script>
+
+<style>
+  /*
+   * ✅ #floating-panel-actions:
+   * - Desktop: header ke right side mein fixed position (settings button ke baad)
+   * - Mobile: fixed, top-right corner mein (mobile-panel-buttons ke saath aligned)
+   * Sirf EK instance hai — duplicate nahi hai.
+   */
+
+  .floating-panel-actions {
+    position: fixed;
+    top: 12px;
+    right: 5.5rem; /* settings ke left me */
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    z-index: 9999;
+  }
+
+  /* Desktop layout */
+  @media (min-width: 769px) {
+    .right-header-buttons {
+      position: fixed;
+      top: 12px;
+      right: 12.5rem;
+      z-index: 9999;
+    }
+
+    /* Mobile-only settings button desktop pe hide */
+    .mobile-panel-buttons {
+      display: none;
+    }
+
+    /* Desktop popover position */
+    .panel-tools-popover {
+      position: fixed;
+      top: 60px;
+      right: 1rem;
+      z-index: 10000;
+    }
+  }
+
+  /* Mobile layout */
+  @media (max-width: 768px) {
+    /* Desktop header ke right-header-buttons mobile pe hide */
+    .right-header-buttons {
+      display: none;
+    }
+
+    /* Settings — sabse left (Share+Help ke left mein) */
+    /* Order: [Settings] [Share] [Help] */
+    .mobile-panel-buttons {
+      display: flex;
+      align-items: center;
+      position: fixed;
+      top: 98px;
+      right: 8rem; /* Share+Help dono ki width cover karne ke liye */
+      z-index: 9999;
+    }
+
+    /* Share + Help — right side pe */
+    .floating-panel-actions {
+      position: fixed;
+      top: 98px;
+      right: 0.7rem; /* sabse right corner */
+      z-index: 9999;
+    }
+
+    /* Mobile popover — buttons ke neeche */
+    .panel-tools-popover {
+      position: fixed;
+      top: 145px;
+      right: 0.7rem;
+      z-index: 10000;
+    }
+  }
+</style>

From 0ec34e8ff4a59f11aaf955d267b53b4a313da7bc Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Wed, 3 Jun 2026 20:41:28 +0530
Subject: [PATCH 05/16] [RZA-260184-bugfix1]: feat: integrate virtual keyboard
 in varnmala listen game

---
 src/pages/varnmala/listen.astro | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/varnmala/listen.astro b/src/pages/varnmala/listen.astro
index 6b3e9e20..7aefee0b 100644
--- a/src/pages/varnmala/listen.astro
+++ b/src/pages/varnmala/listen.astro
@@ -5,6 +5,7 @@ import BaseLayout from "@/layouts/Base";
 import BackButton from "@/components/BackButton.astro";
 import SharePopover from "@/components/ShareButton.astro";
 import KeyboardTrigger from "@/components/KeyboardTrigger.astro";
+import VirtualKeyboard from "@/components/VirtualKeyboard.astro";
 import Speaker from "@/components/Speaker.astro";
 
 const meta = {
@@ -33,6 +34,7 @@ const meta = {
   <section class="section--audio hide">
     <audio id="audioPlayer" controlslist="nodownload" controls autoplay></audio>
   </section>
+  <VirtualKeyboard />
 </BaseLayout>
 
 <script>

From c0f5ae4b6ac9e54c452b5917cc1d5a26330bfd98 Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Wed, 3 Jun 2026 20:45:43 +0530
Subject: [PATCH 06/16] [RZA-260184-bugfix1]: feat: integrate virtual keyboard
 in varnmala play  game

---
 src/pages/varnmala/play.astro | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/varnmala/play.astro b/src/pages/varnmala/play.astro
index 771ab6e5..edf8288f 100644
--- a/src/pages/varnmala/play.astro
+++ b/src/pages/varnmala/play.astro
@@ -5,6 +5,7 @@ import Help from "@/components/Help.astro";
 import BackButton from "@/components/BackButton.astro";
 import SharePopover from "@/components/ShareButton.astro";
 import KeyboardTrigger from "@/components/KeyboardTrigger.astro";
+import VirtualKeyboard from "@/components/VirtualKeyboard.astro";
 
 const meta = {
   title: "Varnmala • Hear & Play",
@@ -64,6 +65,7 @@ const meta = {
       <div class="letter">A</div>
     </article>
   </article>
+  <VirtualKeyboard />
 </BaseLayout>
 
 <script>

From 00a2dae5015241df439c222a6d89a918ff492dd4 Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Thu, 4 Jun 2026 15:48:15 +0530
Subject: [PATCH 07/16] [RZA-260184-bugfix1]: fix: improve back button layout
 on mobile devices

---
 src/assets/styles/header.css    |  2 +-
 src/components/Back.astro       | 59 ++++++++++++++++-----------------
 src/layouts/common/Header.astro | 19 +++++++++++
 3 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css
index 266664ff..9167eb05 100644
--- a/src/assets/styles/header.css
+++ b/src/assets/styles/header.css
@@ -187,7 +187,7 @@
     border-color 0.2s,
     box-shadow 0.2s;
   box-shadow: none;
-  width: 100%;
+
   box-sizing: border-box;
 }
 
diff --git a/src/components/Back.astro b/src/components/Back.astro
index e5604d83..74b47aaf 100644
--- a/src/components/Back.astro
+++ b/src/components/Back.astro
@@ -17,35 +17,14 @@
   </svg>
 </a>
 
-<script is:inline>
-  function align() {
-    const btn = document.querySelector(".back-btn");
-    const box = document.querySelector(".hero-search__box");
-    if (!btn || !box) return;
-    const r = box.getBoundingClientRect();
-    // button ko .hero-search__wrap se bahar move karo agar andar ho
-    if (btn.closest(".hero-search")) {
-      document.body.appendChild(btn);
-    }
-    btn.style.top = r.top + r.height / 2 - 22 + "px";
-  }
-
-  requestAnimationFrame(() => requestAnimationFrame(align));
-  window.addEventListener("resize", align);
-  window.addEventListener("scroll", align, { passive: true });
-  document.addEventListener("astro:page-load", () => requestAnimationFrame(() => requestAnimationFrame(align)));
-</script>
-
 <style is:global>
   .back-btn {
-    position: fixed;
-    left: 12px;
-    top: 92px;
-    width: 2.75rem;
-    height: 2.75rem;
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
+    width: 2.2rem;
+    height: 2.2rem;
     border-radius: 50%;
     text-decoration: none;
     background: white;
@@ -55,18 +34,36 @@
     transition:
       background 0.15s ease,
       transform 0.2s ease;
-    z-index: 1001;
   }
 
-  .back-btn:hover {
-    background: #ede9fe;
-    border-color: #7c3aed;
-    transform: scale(1.06);
+  /* ── Desktop: fixed left corner ── */
+  @media (min-width: 641px) {
+    .back-btn {
+      position: fixed;
+      left: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .back-btn:hover {
+      transform: translateY(-50%) scale(1.06);
+    }
+  }
+
+  /* ── Mobile: flex row mein search ke saath ── */
+  @media (max-width: 640px) {
+    .back-btn {
+      position: static;
+    }
+
+    .back-btn:hover {
+      transform: scale(1.06);
+    }
   }
 
   .back-btn svg {
-    width: 1.125rem;
-    height: 1.125rem;
+    width: 1rem;
+    height: 1rem;
     pointer-events: none;
   }
 
diff --git a/src/layouts/common/Header.astro b/src/layouts/common/Header.astro
index 880f703f..d363bd38 100755
--- a/src/layouts/common/Header.astro
+++ b/src/layouts/common/Header.astro
@@ -797,6 +797,25 @@ const allSearchItemsJSON = JSON.stringify(allSearchItems);
     background: #fef3c7 !important;
     color: #d97706 !important;
   }
+  @media (max-width: 768px) {
+    .hero-search__wrap {
+      display: flex !important;
+      align-items: center !important;
+      gap: 8px !important;
+      padding: 6px 12px !important;
+      max-width: 100% !important;
+    }
+
+    .hero-search__wrap > *:not(.hero-search__box):not(.hero-search__dropdown) {
+      flex-shrink: 0 !important;
+    }
+
+    .hero-search__box {
+      flex: 1 !important;
+      min-width: 0 !important;
+      width: auto !important;
+    }
+  }
 </style>
 
 <script is:inline define:vars={{ allSearchItemsJSON }}>

From 4ece6d858431dc5661f1b440e214f4334f37b838 Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Thu, 4 Jun 2026 15:49:32 +0530
Subject: [PATCH 08/16] [RZA-260184-bugfix1]: fix: resolve slider button
 visibility issue in gallery game

---
 src/assets/styles/cards/slider.css | 53 ++++++++++++++++++------------
 src/pages/gallery/slider.astro     | 13 +-------
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/assets/styles/cards/slider.css b/src/assets/styles/cards/slider.css
index da12760e..f8ab2350 100644
--- a/src/assets/styles/cards/slider.css
+++ b/src/assets/styles/cards/slider.css
@@ -25,6 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
 }
 
 .gallery-container {
@@ -53,18 +54,17 @@
 .gallery-controls {
   display: grid;
   grid-template-columns: var(--nav-button-size) 1fr var(--nav-button-size);
-  gap: 1%;
-  align-items: start;
-  /* align to top, buttons will self-align to image center */
-  margin-left: -4rem;
-  margin-right: -4rem;
+  gap: 0.5rem;
+  /* FIX: align-items center so buttons stay vertically centered with scroller */
+  align-items: center;
   position: relative;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .gallery-scroller {
   width: 100%;
   height: calc(var(--item-height) + 200px);
-  /* extra space for item-details below */
   overflow-x: auto;
   overflow-y: hidden;
   scroll-behavior: smooth;
@@ -72,6 +72,7 @@
   -webkit-overflow-scrolling: touch;
   cursor: grab;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 .gallery-scroller:active {
@@ -85,12 +86,10 @@
   height: 100%;
 }
 
-/* ✅ KEY FIX: buttons position themselves at center of image area only */
 .nav-button {
   width: var(--nav-button-size);
   height: var(--nav-button-size);
-  margin-top: calc(var(--item-height) / 2 - var(--nav-button-size) / 2 + 2rem);
-  /* center of image */
+  /* FIX: Removed margin-top calc — parent is now align-items:center so no manual offset needed */
   border-radius: 50%;
   background: rgba(129, 140, 248, 0.2);
   border: none;
@@ -101,6 +100,11 @@
   transition: all 0.2s ease;
   flex-shrink: 0;
   outline: none;
+  z-index: 10;
+  position: relative;
+  /* FIX: Ensure button never collapses on any screen */
+  min-width: var(--nav-button-size);
+  min-height: var(--nav-button-size);
 }
 
 .nav-button:hover {
@@ -230,7 +234,10 @@
   scrollbar-color: rgba(129, 140, 248, 0.6) rgba(0, 0, 0, 0.05);
 }
 
-/* Responsive adjustments */
+/* ===================== */
+/* RESPONSIVE FIXES      */
+/* ===================== */
+
 @media (max-width: 1600px) {
   :root {
     --item-width: 360px;
@@ -247,7 +254,7 @@
   }
 
   .gallery-page {
-    margin-left: 15%;
+    margin-left: 0;
   }
 }
 
@@ -263,7 +270,7 @@
   }
 
   .gallery-page {
-    margin-left: 15%;
+    margin-left: 0;
   }
 
   .letter {
@@ -277,23 +284,23 @@
 
 @media (max-width: 600px) {
   :root {
-    --item-width: 240px;
-    --item-height: 240px;
-    --item-gap: 20px;
+    --item-width: 220px;
+    --item-height: 220px;
+    --item-gap: 16px;
     --scrollbar-height: 4px;
     --nav-button-size: 36px;
   }
 
   .gallery-page {
-    margin-left: 15%;
+    margin-left: 0;
   }
 
   .gallery-wrapper {
-    padding: 1.5rem;
+    padding: 1rem 0.75rem;
   }
 
   .gallery-title {
-    font-size: 1.75rem;
+    font-size: 1.5rem;
   }
 
   .letter {
@@ -301,11 +308,15 @@
   }
 
   .item-desc {
-    font-size: 1.1rem;
+    font-size: 1rem;
   }
 
   .nav-button svg {
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
+  }
+
+  .gallery-controls {
+    gap: 0.25rem;
   }
 }
diff --git a/src/pages/gallery/slider.astro b/src/pages/gallery/slider.astro
index fe96dcfb..df9ca856 100644
--- a/src/pages/gallery/slider.astro
+++ b/src/pages/gallery/slider.astro
@@ -34,8 +34,8 @@ const entries = Object.entries(items);
 ---
 
 <BaseLayout meta={meta}>
+  <!-- FIX: Removed empty header-tools-wrapper div, Share and Help directly in slot -->
   <Fragment slot="header-right">
-    <div class="header-tools-wrapper"></div>
     <SharePopover />
     <Help title="Slider" description="Click images or use arrow keys to navigate. Active item shows details." />
   </Fragment>
@@ -107,17 +107,14 @@ const entries = Object.entries(items);
 
     // Navigation functions
     const navigateTo = (index) => {
-      // Validate index
       index = Math.max(0, Math.min(index, items.length - 1));
 
-      // Play sound based on navigation direction
       if (index < activeIndex) {
         sounds.snap.play().catch((error) => console.error("Error playing snap sound:", error));
       } else if (index > activeIndex) {
         sounds.pop.play().catch((error) => console.error("Error playing pop sound:", error));
       }
 
-      // Update active state
       items[activeIndex].classList.remove("active");
       details[activeIndex].style.opacity = "0";
       details[activeIndex].style.transform = "translateY(20px)";
@@ -128,7 +125,6 @@ const entries = Object.entries(items);
       details[activeIndex].style.opacity = "1";
       details[activeIndex].style.transform = "translateY(0)";
 
-      // Center the item
       items[activeIndex].scrollIntoView({
         behavior: "smooth",
         block: "nearest",
@@ -136,11 +132,9 @@ const entries = Object.entries(items);
       });
     };
 
-    // Navigation buttons
     prevBtn.addEventListener("click", () => navigateTo(activeIndex - 1));
     nextBtn.addEventListener("click", () => navigateTo(activeIndex + 1));
 
-    // Keyboard navigation for buttons
     prevBtn.addEventListener("keydown", (e) => {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
@@ -155,11 +149,8 @@ const entries = Object.entries(items);
       }
     });
 
-    // Click on items
     items.forEach((item, index) => {
       item.addEventListener("click", () => navigateTo(index));
-
-      // Keyboard navigation for items
       item.addEventListener("keydown", (e) => {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
@@ -168,7 +159,6 @@ const entries = Object.entries(items);
       });
     });
 
-    // Global keyboard navigation
     document.addEventListener("keydown", (e) => {
       if (e.key === "ArrowLeft") {
         e.preventDefault();
@@ -179,7 +169,6 @@ const entries = Object.entries(items);
       }
     });
 
-    // Convert vertical scroll to horizontal
     scroller.addEventListener(
       "wheel",
       (e) => {

From 9d33fad8fe032996aa98a54a528665d232746bd4 Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Thu, 4 Jun 2026 15:50:55 +0530
Subject: [PATCH 09/16] [RZA-260184-bugfix1]: fix: restore and enable draw game
 controls on mobile

---
 src/pages/draw.astro | 181 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 169 insertions(+), 12 deletions(-)

diff --git a/src/pages/draw.astro b/src/pages/draw.astro
index b8d698c6..ef1b0592 100644
--- a/src/pages/draw.astro
+++ b/src/pages/draw.astro
@@ -44,13 +44,12 @@ const meta = {
     align-items: center !important;
     gap: 0.25rem !important;
   }
-  /* Only draw page pe nav links right shift */
+
   :global(.nav__links) {
     justify-content: flex-end !important;
     padding-right: 2rem !important;
   }
 
-  /* all control buttons same size */
   :global(.control-button) {
     width: 2.2rem !important;
     height: 2.2rem !important;
@@ -68,7 +67,6 @@ const meta = {
     height: 0.9rem !important;
   }
 
-  /* Speaker — mute-button same size */
   :global(.mute-button) {
     width: 2.2rem !important;
     height: 2.2rem !important;
@@ -80,7 +78,6 @@ const meta = {
     font-size: 1rem !important;
   }
 
-  /* Help button same size */
   :global(.help) {
     width: 2.2rem !important;
     height: 2.2rem !important;
@@ -88,7 +85,6 @@ const meta = {
     padding: 0 !important;
   }
 
-  /* Select Voice  */
   :global(#voice-dropdown) {
     height: 2.2rem !important;
     font-size: 0.75rem !important;
@@ -97,16 +93,14 @@ const meta = {
     border: 1.5px solid var(--primary, #3b82f6) !important;
     background: transparent !important;
     cursor: pointer !important;
-    width: auto !important;
+    width: 5.5rem !important;
   }
 
-  /* SVG same size */
   :global(.controls-container svg) {
     width: 1rem !important;
     height: 1rem !important;
   }
 
-  /* Action group */
   :global(.action__group) {
     max-width: none !important;
     flex-wrap: nowrap !important;
@@ -123,7 +117,6 @@ const meta = {
     align-items: center !important;
   }
 
-  /* Share trigger button — exact class */
   :global(.share-trigger-button) {
     width: 2.2rem !important;
     height: 2.2rem !important;
@@ -133,16 +126,78 @@ const meta = {
   }
 
   :global(.share-trigger-button svg) {
-    width: 1rem !important;
-    height: 1rem !important;
+    width: 0.85rem !important;
+    height: 0.85rem !important;
   }
 
-  /* Theme toggle */
   :global(.theme-toggle) {
     width: 2.2rem !important;
     height: 2.2rem !important;
   }
+
+  :global(#keyboard-trigger) {
+    width: 2.2rem !important;
+    height: 2.2rem !important;
+  }
+
+  /* Mobile pe saare buttons aur icons same size */
+  @media (max-width: 640px) {
+    :global(.control-button),
+    :global(.mute-button),
+    :global(.help),
+    :global(#keyboard-trigger),
+    :global(.share-trigger-button),
+    :global(.theme-toggle) {
+      width: 2.2rem !important;
+      height: 2.2rem !important;
+      min-width: 2.2rem !important;
+      min-height: 2.2rem !important;
+      font-size: 0.85rem !important;
+      padding: 0 !important;
+    }
+
+    :global(.font-icon),
+    :global(.color-icon),
+    :global(.bg-icon),
+    :global(.mute-icon) {
+      font-size: 0.85rem !important;
+    }
+
+    :global(.img-icon) {
+      width: 0.85rem !important;
+      height: 0.85rem !important;
+    }
+
+    :global(.controls-container svg),
+    :global(.share-trigger-button svg),
+    :global(#keyboard-trigger svg) {
+      width: 0.85rem !important;
+      height: 0.85rem !important;
+    }
+
+    :global(#voice-dropdown) {
+      height: 2.2rem !important;
+      width: 5.5rem !important;
+      font-size: 0.7rem !important;
+    }
+
+    :global(.share-button-container) {
+      display: flex !important;
+      align-items: center !important;
+    }
+
+    /* Share popover — body level pe render hoga JS se */
+    :global(.share-popover.mobile-teleported) {
+      position: fixed !important;
+      z-index: 99999 !important;
+      left: 0.5rem !important;
+      right: 0.5rem !important;
+      max-width: calc(100vw - 1rem) !important;
+      top: auto !important;
+    }
+  }
 </style>
+
 <BaseLayout meta={meta}>
   <MobileSplash stay={true} />
   <ControlsContainer slot="header-right" />
@@ -150,3 +205,105 @@ const meta = {
   <DrawComponent />
   <VirtualKeyboard />
 </BaseLayout>
+
+<script>
+  function handleControlsPosition() {
+    const actionGroup = document.querySelector(".action__group") as HTMLElement | null;
+    const heroSearch = document.querySelector(".hero-search") as HTMLElement | null;
+    const content = document.getElementById("mainContent");
+    const vkContainer = document.getElementById("vk-container");
+
+    if (!actionGroup || !heroSearch) return;
+
+    if (window.innerWidth <= 640) {
+      const searchBottom = heroSearch.getBoundingClientRect().bottom;
+
+      actionGroup.style.display = "flex";
+      actionGroup.style.position = "fixed";
+      actionGroup.style.top = searchBottom + "px";
+      actionGroup.style.left = "0";
+      actionGroup.style.width = "100%";
+      actionGroup.style.background = "var(--background)";
+      actionGroup.style.padding = "0.4rem 0.5rem";
+      actionGroup.style.zIndex = "998";
+      actionGroup.style.borderBottom = "1px solid rgba(124,58,237,0.15)";
+      actionGroup.style.justifyContent = "flex-start";
+      actionGroup.style.flexWrap = "nowrap";
+      actionGroup.style.gap = "0.25rem";
+      actionGroup.style.boxSizing = "border-box";
+      actionGroup.style.overflowX = "auto";
+      actionGroup.style.overflowY = "visible";
+
+      // Theme toggle hide
+      const themeToggle = actionGroup.querySelector(".theme-toggle") as HTMLElement | null;
+      if (themeToggle) themeToggle.style.display = "none";
+
+      setTimeout(() => {
+        const spacer = document.getElementById("headerSpacer");
+        if (spacer) {
+          const stripBottom = actionGroup.getBoundingClientRect().bottom;
+          spacer.style.setProperty("height", stripBottom + "px", "important");
+        }
+        if (content && vkContainer) {
+          const vkH = vkContainer.getBoundingClientRect().height;
+          content.style.paddingBottom = vkH + 16 + "px";
+        }
+      }, 100);
+    } else {
+      actionGroup.style.cssText = "";
+      const themeToggle = actionGroup.querySelector(".theme-toggle") as HTMLElement | null;
+      if (themeToggle) themeToggle.style.display = "";
+      if (content) content.style.paddingBottom = "";
+    }
+  }
+
+  function fixSharePopover() {
+    if (window.innerWidth > 640) return;
+
+    const shareTrigger = document.getElementById("shareTrigger") as HTMLButtonElement | null;
+    const sharePopover = document.getElementById("sharePopover") as HTMLDivElement | null;
+    if (!shareTrigger || !sharePopover) return;
+
+    // Popover ko body mein move karo taaki overflow clip na ho
+    if (!sharePopover.classList.contains("mobile-teleported")) {
+      document.body.appendChild(sharePopover);
+      sharePopover.classList.add("mobile-teleported");
+    }
+
+    // Position update function
+    function updatePopoverPosition() {
+      if (!shareTrigger || !sharePopover) return;
+      const triggerRect = shareTrigger.getBoundingClientRect();
+      const spaceAbove = triggerRect.top;
+      const spaceBelow = window.innerHeight - triggerRect.bottom;
+
+      if (spaceAbove > spaceBelow) {
+        // Upar dikhao
+        sharePopover.style.bottom = window.innerHeight - triggerRect.top + 8 + "px";
+        sharePopover.style.top = "auto";
+      } else {
+        // Neeche dikhao
+        sharePopover.style.top = triggerRect.bottom + 8 + "px";
+        sharePopover.style.bottom = "auto";
+      }
+    }
+
+    shareTrigger.addEventListener("click", () => {
+      setTimeout(() => {
+        if (sharePopover.classList.contains("is-open")) {
+          updatePopoverPosition();
+        }
+      }, 10);
+    });
+  }
+
+  function init() {
+    handleControlsPosition();
+    fixSharePopover();
+  }
+
+  document.addEventListener("DOMContentLoaded", init);
+  window.addEventListener("resize", () => handleControlsPosition());
+  window.addEventListener("load", init);
+  document.addEventListener("astro:page-load", init);
+</script>

From ae50b15856ed8816ec5dff1d0690aa6ae38d91a2 Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Thu, 4 Jun 2026 20:44:29 +0530
Subject: [PATCH 10/16] [RZA-260184-bugfix1]: feat: add mobile toggle button
 for virtual keyboard visibility

---
 src/assets/styles/crossword2.css     | 253 +++++++++++++++++----------
 src/assets/styles/setting.css        |  42 ++---
 src/components/Puzzle2.astro         |   2 +
 src/components/Settings.astro        |   4 +-
 src/components/VirtualKeyboard.astro | 138 ++++++++++++---
 5 files changed, 297 insertions(+), 142 deletions(-)

diff --git a/src/assets/styles/crossword2.css b/src/assets/styles/crossword2.css
index bcf73a78..dfffed08 100644
--- a/src/assets/styles/crossword2.css
+++ b/src/assets/styles/crossword2.css
@@ -1,5 +1,4 @@
 :root {
-  /* Color Palette */
   --primary-color: #6366f1;
   --secondary-color: #06b6d4;
   --accent1-color: #f87171;
@@ -11,24 +10,20 @@
   --accent7-color: #f97316;
   --accent8-color: #38bdf8;
 
-  /* Text & Background */
   --text-color: #1e293b;
   --text-light: #64748b;
   --bg-color: #f8fafc;
   --bg-dark: #0f172a;
 
-  /* Effects */
   --border-radius: 16px;
   --box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
-  /* Stats */
   --stats-button-bg: #e2e8f0;
   --stats-button-text: #334155;
   --stats-button-border: #cbd5e1;
   --stats-button-hover: #818cf8;
 
-  /* Custom Word and Button Colors */
   --word-font-color: #0f172a;
   --word-found-color: #9ca3af;
   --stats-button-clicked: #4ade80;
@@ -45,7 +40,6 @@
   padding: 20px;
   box-sizing: border-box;
   touch-action: none;
-  /* Prevent default touch behaviors */
 }
 
 /* Puzzle Grid */
@@ -54,17 +48,14 @@
   gap: 12px;
   padding: 28px;
   border-radius: var(--border-radius);
-  box-shadow:
-    var(--box-shadow),
-    0 0 0 15px rgba(99, 102, 241, 0.08);
+  box-shadow: var(--box-shadow), 0 0 0 15px rgba(99, 102, 241, 0.08);
   margin: 0 auto;
   width: 100%;
   max-width: 600px;
   aspect-ratio: 1;
   border: 6px solid #f1f5f9;
-  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
+  grid-template-columns: repeat(8, 1fr);
   touch-action: none;
-  /* Critical for touch drag */
 }
 
 .grid__puzzle .cell {
@@ -75,7 +66,8 @@
   background: #f8fafc;
   border: 3px solid #e2e8f0;
   border-radius: 12px;
-  font-size: 3ch;
+  font-size: clamp(14px, 2.5vw, 22px);
+  overflow: hidden;
   font-weight: bold;
   color: var(--text-color);
   transition: var(--transition);
@@ -85,10 +77,8 @@
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-touch-callout: none;
-  /* Prevent long-press menu on iOS */
-  min-width: 40px;
-  min-height: 40px;
   touch-action: none;
+  line-height: 1;
 }
 
 .grid__puzzle .cell:active {
@@ -99,9 +89,7 @@
   transform: translateY(-3px);
   background: #eef2ff;
   border-color: var(--primary-color);
-  box-shadow:
-    0 0 16px 4px var(--primary-color),
-    0 8px 20px rgba(99, 102, 241, 0.15);
+  box-shadow: 0 0 16px 4px var(--primary-color), 0 8px 20px rgba(99, 102, 241, 0.15);
 }
 
 .grid__puzzle .cell.selected {
@@ -234,29 +222,38 @@ details:not([open]) summary::after {
   transform: scale(0.97);
 }
 
-/* Stats Components */
+/* Stats Container */
 .stats-container {
   display: flex;
-  gap: 14px;
-  margin: 32px 0;
+  gap: 8px;
+  margin: 20px 0;
   justify-content: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
+  overflow-x: auto;
+  padding: 4px 0;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.stats-container::-webkit-scrollbar {
+  display: none;
 }
 
 .stats-button {
   background: linear-gradient(135deg, var(--primary-color), var(--accent6-color));
   border: 2px solid transparent;
   border-radius: var(--border-radius);
-  padding: 14px 28px;
+  padding: 12px 20px;
   font-weight: 600;
   transition: var(--transition);
   color: white;
   position: relative;
   overflow: hidden;
-  min-width: 80px;
+  white-space: nowrap;
+  flex-shrink: 0;
   text-align: center;
-  font-size: clamp(12px, 2.5vw, 16px);
+  font-size: clamp(12px, 2vw, 16px);
 }
 
 .stats-button:hover {
@@ -273,12 +270,12 @@ details:not([open]) summary::after {
   background: linear-gradient(135deg, var(--accent1-color), var(--accent7-color));
 }
 
-/* Hint Button Styles */
+/* Hint Button */
 .hint-button {
   background: none;
   border: 2px solid var(--primary-color);
-  width: 60px;
-  height: 60px;
+  width: 50px;
+  height: 50px;
   cursor: pointer;
   transition: var(--transition);
   display: flex;
@@ -286,6 +283,7 @@ details:not([open]) summary::after {
   justify-content: center;
   border-radius: 12px;
   padding: 0;
+  flex-shrink: 0;
 }
 
 .hint-button:hover {
@@ -312,58 +310,106 @@ details:not([open]) summary::after {
   fill: #ff9800;
 }
 
-/* Responsive Styles */
-@media (max-width: 1024px) {
-  .grid__puzzle {
-    gap: 8px;
-    padding: 20px;
-    grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
-  }
+/* Action Buttons */
+.action-btn {
+  border: 2px solid transparent;
+  border-radius: var(--border-radius);
+  padding: 12px 20px;
+  font-weight: 600;
+  transition: var(--transition);
+  color: white;
+  overflow: hidden;
+  white-space: nowrap;
+  flex-shrink: 0;
+  text-align: center;
+  font-size: clamp(12px, 2vw, 16px);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
 
-  .grid__puzzle .cell {
-    font-size: 2.5ch;
-    border-width: 2px;
-    min-width: 35px;
-    min-height: 35px;
-  }
+.action-btn:active {
+  transform: scale(0.95);
+}
 
-  .stats-button {
-    padding: 12px 20px;
-    min-width: 70px;
-  }
+.btn-shuffle {
+  background: linear-gradient(135deg, #0ea5e9, #6366f1);
+}
 
-  .word-list {
-    gap: 10px;
-    padding: 12px;
-  }
+.btn-shuffle:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--box-shadow);
+  background: linear-gradient(135deg, #0284c7, #4f46e5);
+}
+
+.btn-new {
+  background: linear-gradient(135deg, #10b981, #06b6d4);
 }
 
+.btn-new:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--box-shadow);
+  background: linear-gradient(135deg, #059669, #0891b2);
+}
+
+/* =============================================
+   MOBILE FIXES — Letters must always be visible
+   ============================================= */
+
+/* Responsive — Tablet */
 @media (max-width: 768px) {
   .puzzle-container {
-    padding: 15px;
+    padding: 12px;
   }
 
   .grid__puzzle {
-    gap: 6px;
-    padding: 16px;
-    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
+    gap: 4px;
+    padding: 8px;
+    border-width: 3px;
+    max-width: 100%;
+
+    /* CHANGE THIS */
+    aspect-ratio: 1 !important;
+
+    grid-template-columns: repeat(8, 1fr) !important;
+    box-shadow: var(--box-shadow);
+    box-sizing: border-box;
+    width: 100%;
   }
 
   .grid__puzzle .cell {
-    font-size: 5vw;
+    /* Let the cell be as tall as it is wide via aspect-ratio */
+    min-height: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1 !important;
+    width: 100% !important;
+    height: auto !important;
+    /* Use container-relative sizing so letter never clips */
+    font-size: clamp(13px, 4.5vw, 20px);
     border-width: 2px;
-    min-width: 30px;
-    min-height: 30px;
     border-radius: 8px;
+    min-width: 0;
+    /* Ensure text never overflows */
+    overflow: hidden;
+    line-height: 1;
+    padding: 0;
   }
 
   .stats-button {
-    padding: 10px 16px;
+    padding: 10px 14px;
+  }
+
+  .action-btn {
+    padding: 10px 14px;
   }
 
   .hint-button {
-    width: 50px;
-    height: 50px;
+    width: 44px;
+    height: 44px;
   }
 
   details summary {
@@ -371,57 +417,82 @@ details:not([open]) summary::after {
   }
 }
 
+/* Responsive — Mobile */
 @media (max-width: 480px) {
   .puzzle-container {
-    padding: 10px;
+    padding: 6px;
   }
 
   .grid__puzzle {
     gap: 4px;
-    padding: 12px;
-    grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
-    border-width: 4px;
+    padding: 8px;
+    border-width: 3px;
+    max-width: 100%;
+
+    /* CHANGE THIS */
+    aspect-ratio: 1 !important;
+
+    grid-template-columns: repeat(8, 1fr) !important;
+    box-shadow: var(--box-shadow);
+    box-sizing: border-box;
+    width: 100%;
   }
 
   .grid__puzzle .cell {
-    font-size: 6vw;
-    border-width: 2px;
-    min-width: 25px;
-    min-height: 25px;
+    aspect-ratio: 1 !important;
+    width: 100% !important;
+    height: auto !important;
+    font-size: clamp(12px, calc((100vw - 60px) / 8 * 0.52), 18px);
+    border-width: 1.5px;
     border-radius: 6px;
+    min-width: 0;
+    min-height: 35px;
+    overflow: hidden;
+    line-height: 1;
+    padding: 0;
+    /* Force the text to render in the visual centre */
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .stats-container {
-    gap: 8px;
-    margin: 20px 0;
+    gap: 4px;
+    margin: 10px 0;
   }
 
   .stats-button {
-    padding: 8px 14px;
-    min-width: 70px;
-    font-size: 3.5vw;
+    padding: 7px 9px;
+    font-size: clamp(9px, 2.8vw, 12px);
+    border-radius: 10px;
+  }
+
+  .action-btn {
+    padding: 7px 9px;
+    font-size: clamp(9px, 2.8vw, 12px);
+    border-radius: 10px;
   }
 
   .hint-button {
-    width: 45px;
-    height: 45px;
+    width: 36px;
+    height: 36px;
   }
 
   .hint-button svg,
   .hint-button svg path {
-    max-width: 24px;
-    max-height: 24px;
+    max-width: 18px;
+    max-height: 18px;
   }
 
   details summary {
-    padding: 10px 16px;
-    font-size: 4.5vw;
+    padding: 10px 14px;
+    font-size: clamp(13px, 4vw, 16px);
   }
 
   details summary::after {
-    width: 24px;
-    height: 24px;
-    right: 16px;
+    width: 22px;
+    height: 22px;
+    right: 14px;
   }
 
   .word-list {
@@ -431,11 +502,11 @@ details:not([open]) summary::after {
 
   .word-list .word {
     padding: 6px 12px;
-    font-size: 3.5vw;
+    font-size: clamp(11px, 3.5vw, 14px);
   }
 }
 
-/* Accessibility improvements */
+/* Accessibility */
 @media (prefers-reduced-motion: reduce) {
   * {
     animation: none !important;
@@ -443,29 +514,29 @@ details:not([open]) summary::after {
   }
 }
 
-/* Landscape mode optimization for mobile */
+/* Landscape mobile */
 @media (max-width: 768px) and (orientation: landscape) {
   .puzzle-container {
     display: flex;
     flex-direction: column;
-    padding: 10px;
+    padding: 8px;
   }
 
   .grid__puzzle {
-    max-width: 50vh;
-    padding: 10px;
+    max-width: 45vh;
+    padding: 8px;
   }
 
   .stats-container {
-    margin: 15px 0;
+    margin: 10px 0;
   }
 
   details {
-    margin: 10px 0;
+    margin: 8px 0;
   }
 }
 
-/* High contrast mode support */
+/* High contrast */
 @media (prefers-contrast: high) {
   .grid__puzzle .cell {
     border-width: 3px;
@@ -475,4 +546,4 @@ details:not([open]) summary::after {
     border-color: #000;
     outline: 2px solid #fff;
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/setting.css b/src/assets/styles/setting.css
index e136d23d..27d97d3a 100644
--- a/src/assets/styles/setting.css
+++ b/src/assets/styles/setting.css
@@ -3,32 +3,34 @@
 
   .setting__trigger {
     position: fixed;
-    anchor-name: --setting;
-    display: flex;
-    justify-items: end;
-    justify-content: center;
-    top: 6rem;
+    top: 10rem;
+    /* 6rem → 8rem, navbar ke neeche aaye */
     right: 1.5rem;
-    width: max-content;
-    height: 3.5rem;
-    border-radius: 10%;
-    background-color: unset;
-    border: solid;
+    width: 2.8rem;
+    /* fixed size */
+    height: 2.8rem;
+    border-radius: 50%;
+    background-color: #7c3aed;
+    /* visible color */
+    border: none;
     cursor: pointer;
-    font-size: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+    /* baaki elements ke upar */
     transition: transform 330ms ease-in-out;
-
-    &::after {
-      outline: 1px solid slateblue;
-    }
+    font-size: 1rem;
+    /* sane default */
   }
 
   @media (max-width: 480px) {
     .setting__trigger {
-      font-size: 0.6rem;
-      width: 2.5rem;
-      height: 2.5rem;
-      margin-top: 12px;
+      top: 9rem;
+      right: 1rem;
+      width: 2.4rem;
+      height: 2.4rem;
+      font-size: 1rem;
     }
   }
 
@@ -148,4 +150,4 @@
       transform: scale(1.05) rotate(45deg);
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Puzzle2.astro b/src/components/Puzzle2.astro
index 4e2cc6a5..09f70015 100644
--- a/src/components/Puzzle2.astro
+++ b/src/components/Puzzle2.astro
@@ -22,6 +22,8 @@ import HintIcon from "@/assets/icons/hint.svg";
         <HintIcon />
       </div>
     </button>
+    <button id="shuffle" class="action-btn btn-shuffle">🔀 Shuffle</button>
+    <button id="new" class="action-btn btn-new">✨ New Puzzle</button>
   </div>
 
   <div id="grid" class="grid__puzzle"></div>
diff --git a/src/components/Settings.astro b/src/components/Settings.astro
index b3101eee..36d57d66 100644
--- a/src/components/Settings.astro
+++ b/src/components/Settings.astro
@@ -10,8 +10,8 @@ import "@/assets/styles/setting.css";
   <div class="setting__panel" id="panel" popover="hint">
     <div class="control__group">
       <button id="close" class="close" popovertarget="panel" popovertargetaction="hide">X</button>
-      <button id="new" class="add">New Puzzle</button>
-      <button id="shuffle" class="shuffle"> Shuffle </button>
+      <button id="s-new" class="add">New Puzzle</button>
+      <button id="s-shuffle" class="shuffle">Shuffle</button>
       <button id="clear" class="clear"> Clear </button>
       <select id="level" class="level">
         <option value="easy">Easy (Ages 3-5)</option>
diff --git a/src/components/VirtualKeyboard.astro b/src/components/VirtualKeyboard.astro
index 85763990..3eb35797 100644
--- a/src/components/VirtualKeyboard.astro
+++ b/src/components/VirtualKeyboard.astro
@@ -5,6 +5,7 @@
 // - Arrow row removed
 // - Light/Dark mode auto + manual [data-theme]
 // - Drag handle se resize
+// - Hide/Show toggle button (bottom-right floating)
 ---
 
 <div id="vk-container" class="vk-container" style="display:none;">
@@ -19,9 +20,13 @@
   </div>
 </div>
 
+<!-- Floating toggle button — sirf tab dikhega jab keyboard show hona chahiye -->
+<button id="vk-toggle-btn" class="vk-toggle-btn" style="display:none;" aria-label="Keyboard toggle">
+  <span class="vk-toggle-icon" id="vk-toggle-icon">⌨</span>
+</button>
+
 <script is:inline>
   (function () {
-    // ── Layout: arrow row removed ──
     const VK_LAYOUT = [
       ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
       ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
@@ -29,12 +34,12 @@
       ["\u21e7", "Z", "X", "C", "V", "B", "N", "M", "\u232b"]
     ];
 
-    const SHIFT_KEY = "\u21e7"; // ⇧
-    const BACK_KEY = "\u232b"; // ⌫
+    const SHIFT_KEY = "\u21e7";
+    const BACK_KEY = "\u232b";
 
-    let isCaps = false; // shift state
+    let isCaps = false;
+    let isHidden = false; // user ne hide kiya hai ya nahi
 
-    // ── Scale ──
     let vkScale = parseFloat(localStorage.getItem("vk-scale") || "1");
 
     function applyScale() {
@@ -51,12 +56,10 @@
       root.style.setProperty("--vk-fz-sm", Math.max(10, fs - 2) + "px");
     }
 
-    // ── Update all letter buttons to current case ──
     function updateCase() {
       document.querySelectorAll(".vk-key[data-letter]").forEach((btn) => {
         btn.textContent = isCaps ? btn.dataset.letter.toUpperCase() : btn.dataset.letter.toLowerCase();
       });
-      // Shift button highlight
       const shiftBtn = document.querySelector(".vk-key.vk-shift");
       if (shiftBtn) shiftBtn.classList.toggle("vk-shift-on", isCaps);
     }
@@ -72,16 +75,13 @@
           const isShift = k === SHIFT_KEY;
           const isBack = k === BACK_KEY;
           const isLetter = /^[A-Z]$/.test(k);
-          const isNum = /^[0-9]$/.test(k);
 
-          // Classes
           let cls = "vk-key";
           if (isShift || isBack) cls += " vk-fn";
           if (isShift) cls += " vk-shift";
           btn.className = cls;
           btn.setAttribute("type", "button");
 
-          // Store original letter for case toggling
           if (isLetter) {
             btn.dataset.letter = k;
             btn.textContent = isCaps ? k.toUpperCase() : k.toLowerCase();
@@ -93,7 +93,6 @@
             e.preventDefault();
 
             if (isShift) {
-              // Toggle caps
               isCaps = !isCaps;
               updateCase();
               return;
@@ -124,7 +123,6 @@
       updateCase();
     }
 
-    // ── Resize handle ──
     function initResize() {
       const handle = document.getElementById("vk-resize-handle");
       if (!handle) return;
@@ -146,9 +144,41 @@
       });
     }
 
+    // ── Toggle button logic ──
+    function updateToggleBtn() {
+      const btn = document.getElementById("vk-toggle-btn");
+      const icon = document.getElementById("vk-toggle-icon");
+      if (!btn || !icon) return;
+      if (isHidden) {
+        btn.classList.add("vk-toggle-collapsed");
+        icon.textContent = "⌨";
+        btn.setAttribute("aria-label", "Keyboard dikhayein");
+        btn.title = "Keyboard dikhayein";
+      } else {
+        btn.classList.remove("vk-toggle-collapsed");
+        icon.textContent = "✕";
+        btn.setAttribute("aria-label", "Keyboard chhupayein");
+        btn.title = "Keyboard chhupayein";
+      }
+    }
+
+    function initToggleBtn() {
+      const btn = document.getElementById("vk-toggle-btn");
+      if (!btn) return;
+      btn.addEventListener("pointerdown", (e) => {
+        e.preventDefault();
+        isHidden = !isHidden;
+        localStorage.setItem("vk-hidden", isHidden ? "1" : "0");
+        const container = document.getElementById("vk-container");
+        if (container) {
+          container.style.display = isHidden ? "none" : "flex";
+        }
+        updateToggleBtn();
+      });
+    }
+
     let vkBuilt = false;
 
-    // ── Should keyboard be visible right now? ──
     function shouldShowKbd() {
       const isNarrow = window.innerWidth <= 1024;
       const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
@@ -156,38 +186,41 @@
       return isNarrow || isMobileUA || hasCoarse;
     }
 
-    // ── Show or hide based on current state ──
     function syncKeyboard() {
       const container = document.getElementById("vk-container");
-      if (!container) return;
+      const toggleBtn = document.getElementById("vk-toggle-btn");
+      if (!container || !toggleBtn) return;
 
       if (shouldShowKbd()) {
+        // Pehli baar saved state restore karo
         if (!vkBuilt) {
+          isHidden = localStorage.getItem("vk-hidden") === "1";
           buildVK();
           initResize();
+          initToggleBtn();
           vkBuilt = true;
         }
-        container.style.display = "flex";
-        applyScale();
+        toggleBtn.style.display = "flex";
+        container.style.display = isHidden ? "none" : "flex";
+        updateToggleBtn();
+        if (!isHidden) applyScale();
       } else {
         container.style.display = "none";
+        toggleBtn.style.display = "none";
       }
     }
 
-    // ── Listen to resize continuously ──
     window.addEventListener("resize", syncKeyboard);
-
-    // ── First run ──
     syncKeyboard();
+
     document.addEventListener("astro:page-load", () => {
-      vkBuilt = false; // page change pe rebuild
+      vkBuilt = false;
       syncKeyboard();
     });
   })();
 </script>
 
 <style is:global>
-  /* ── JS-driven size vars (fallback) ── */
   :root {
     --vk-key-w: 38px;
     --vk-key-h: 40px;
@@ -198,7 +231,6 @@
     --vk-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
   }
 
-  /* ── LIGHT MODE (default) ── */
   :root {
     --vk-bg: #d1d5db;
     --vk-border-top: #b0b4bb;
@@ -212,9 +244,11 @@
     --vk-shift-on-bg: #4a9eff;
     --vk-handle-bar: rgba(0, 0, 0, 0.25);
     --vk-accent: #1a6bbf;
+    --vk-toggle-bg: #1a6bbf;
+    --vk-toggle-color: #ffffff;
+    --vk-toggle-collapsed-bg: #374151;
   }
 
-  /* ── DARK MODE — system ── */
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme="light"]) {
       --vk-bg: #1a1a1a;
@@ -229,10 +263,11 @@
       --vk-shift-on-bg: #3a8ef6;
       --vk-handle-bar: rgba(255, 255, 255, 0.25);
       --vk-accent: #3a8ef6;
+      --vk-toggle-bg: #3a8ef6;
+      --vk-toggle-collapsed-bg: #48484a;
     }
   }
 
-  /* ── DARK MODE — manual ── */
   [data-theme="dark"] {
     --vk-bg: #1a1a1a;
     --vk-border-top: #2e2e2e;
@@ -246,6 +281,8 @@
     --vk-shift-on-bg: #3a8ef6;
     --vk-handle-bar: rgba(255, 255, 255, 0.25);
     --vk-accent: #3a8ef6;
+    --vk-toggle-bg: #3a8ef6;
+    --vk-toggle-collapsed-bg: #48484a;
   }
 
   /* ── CONTAINER ── */
@@ -267,6 +304,53 @@
     transition: background 0.2s;
   }
 
+  /* ── FLOATING TOGGLE BUTTON ── */
+  .vk-toggle-btn {
+    position: fixed;
+    bottom: 18px;
+    right: 14px;
+    z-index: 10000;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: var(--vk-toggle-bg);
+    color: var(--vk-toggle-color);
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+    transition:
+      background 0.2s,
+      transform 0.15s;
+    padding: 0;
+  }
+
+  /* Keyboard visible hone pe button keyboard ke upar diktaa hai */
+  .vk-container[style*="flex"] ~ .vk-toggle-btn:not(.vk-toggle-collapsed) {
+    bottom: calc(var(--vk-keyboard-height, 220px) + 10px);
+  }
+
+  /* Jab keyboard hide ho to button neeche aata hai */
+  .vk-toggle-btn.vk-toggle-collapsed {
+    background: var(--vk-toggle-collapsed-bg);
+    bottom: 18px;
+  }
+
+  .vk-toggle-btn:active {
+    transform: scale(0.88);
+  }
+
+  .vk-toggle-icon {
+    line-height: 1;
+    pointer-events: none;
+    font-style: normal;
+  }
+
   /* ── RESIZE HANDLE ── */
   .vk-resize-handle {
     width: 100%;
@@ -349,7 +433,6 @@
     pointer-events: none;
   }
 
-  /* ── FUNCTION KEYS (Shift, Backspace) ── */
   .vk-key.vk-fn {
     flex: 0 0 calc(var(--vk-key-w) * 1.45);
     width: calc(var(--vk-key-w) * 1.45);
@@ -359,7 +442,6 @@
     box-shadow: 0 1px 0 0.5px var(--vk-fn-shadow);
   }
 
-  /* ── SHIFT key: default = accent color icon ── */
   .vk-key.vk-shift {
     color: var(--vk-accent);
     font-size: calc(var(--vk-fz-sm) * 1.1);
@@ -370,14 +452,12 @@
       opacity 0.07s;
   }
 
-  /* ── SHIFT ON: blue filled background ── */
   .vk-key.vk-shift.vk-shift-on {
     background: var(--vk-shift-on-bg);
     color: #ffffff;
     box-shadow: 0 1px 0 0.5px rgba(0, 0, 0, 0.4);
   }
 
-  /* ── PRESS FEEDBACK ── */
   .vk-key:active,
   .vk-key.vk-pressed {
     transform: scale(0.88);

From 07c40c340766724704028d66338ae0c9d41ecc4b Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Fri, 5 Jun 2026 12:00:21 +0530
Subject: [PATCH 11/16] [RZA-260184-bugfix1]: fix: remember mobile continuation
 preference and suppress repeated warning

---
 src/assets/styles/crossword2.css  | 289 +++++++----------
 src/assets/styles/setting.css     |   2 +-
 src/components/MobileSplash.astro |  24 +-
 src/components/Puzzle2.astro      | 502 +++++++++++++-----------------
 4 files changed, 337 insertions(+), 480 deletions(-)

diff --git a/src/assets/styles/crossword2.css b/src/assets/styles/crossword2.css
index dfffed08..97e2ca58 100644
--- a/src/assets/styles/crossword2.css
+++ b/src/assets/styles/crossword2.css
@@ -9,28 +9,20 @@
   --accent6-color: #818cf8;
   --accent7-color: #f97316;
   --accent8-color: #38bdf8;
-
   --text-color: #1e293b;
   --text-light: #64748b;
   --bg-color: #f8fafc;
   --bg-dark: #0f172a;
-
   --border-radius: 16px;
   --box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-  --stats-button-bg: #e2e8f0;
-  --stats-button-text: #334155;
-  --stats-button-border: #cbd5e1;
-  --stats-button-hover: #818cf8;
-
   --word-font-color: #0f172a;
   --word-found-color: #9ca3af;
   --stats-button-clicked: #4ade80;
   --stats-button-found: #facc15;
 }
 
-/* Main Layout */
+/* ── Layout ── */
 .puzzle-container {
   position: relative;
   width: 100%;
@@ -42,24 +34,25 @@
   touch-action: none;
 }
 
-/* Puzzle Grid */
+/* ── Grid ── */
 .grid__puzzle {
   display: grid;
-  gap: 12px;
-  padding: 28px;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 10px;
+  padding: 24px;
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow), 0 0 0 15px rgba(99, 102, 241, 0.08);
   margin: 0 auto;
   width: 100%;
-  max-width: 600px;
-  aspect-ratio: 1;
+  max-width: 560px;
   border: 6px solid #f1f5f9;
-  grid-template-columns: repeat(8, 1fr);
+  box-sizing: border-box;
   touch-action: none;
 }
 
+/* ── Cell — DESKTOP ── */
 .grid__puzzle .cell {
-  aspect-ratio: 1;
+  aspect-ratio: 1 / 1;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -67,18 +60,18 @@
   border: 3px solid #e2e8f0;
   border-radius: 12px;
   font-size: clamp(14px, 2.5vw, 22px);
-  overflow: hidden;
-  font-weight: bold;
+  font-weight: 700;
   color: var(--text-color);
   transition: var(--transition);
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   -webkit-touch-callout: none;
   touch-action: none;
   line-height: 1;
+  padding: 0;
+  min-width: 0;
+  min-height: 0;
 }
 
 .grid__puzzle .cell:active {
@@ -89,31 +82,30 @@
   transform: translateY(-3px);
   background: #eef2ff;
   border-color: var(--primary-color);
-  box-shadow: 0 0 16px 4px var(--primary-color), 0 8px 20px rgba(99, 102, 241, 0.15);
+  box-shadow: 0 0 16px 4px var(--primary-color), 0 8px 20px rgba(99, 102, 241, .15);
 }
 
 .grid__puzzle .cell.selected {
   background: var(--primary-color);
-  color: white;
+  color: #fff;
   transform: scale(1.08);
-  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
+  box-shadow: 0 8px 20px rgba(99, 102, 241, .4);
   animation: pulse 1.5s infinite alternate;
 }
 
 @keyframes pulse {
   from {
-    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
+    box-shadow: 0 8px 20px rgba(99, 102, 241, .4);
   }
 
   to {
-    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
+    box-shadow: 0 8px 25px rgba(99, 102, 241, .6);
   }
 }
 
 .grid__puzzle .cell[class*="word-color-"] {
-  color: rgb(243, 235, 235);
-  border-color: inherit;
-  box-shadow: inset 0px 1px 7px 0px rgba(0, 0, 0, 0.3);
+  color: #f3ebeb;
+  box-shadow: inset 0 1px 7px rgba(0, 0, 0, .3);
 }
 
 .grid__puzzle .cell.word-color-1 {
@@ -148,12 +140,12 @@
   background-color: var(--accent8-color);
 }
 
-/* Word List & Details */
+/* ── Details / Word List ── */
 details {
   width: 100%;
   border-radius: var(--border-radius);
-  background-color: rgba(99, 102, 241, 0.05);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+  background-color: rgba(99, 102, 241, .05);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
   margin: 20px 0;
   border-left: 4px solid var(--primary-color);
 }
@@ -166,9 +158,14 @@ details summary {
   align-items: center;
   gap: 12px;
   position: relative;
-  border-bottom: 2px solid rgba(99, 102, 241, 0.1);
+  border-bottom: 2px solid rgba(99, 102, 241, .1);
   margin-bottom: 12px;
   font-size: clamp(14px, 2.5vw, 18px);
+  list-style: none;
+}
+
+details summary::-webkit-details-marker {
+  display: none;
 }
 
 details summary::after {
@@ -184,10 +181,6 @@ details summary::after {
   transform: rotate(180deg);
 }
 
-details summary::-webkit-details-marker {
-  display: none;
-}
-
 details:not([open]) summary {
   border-bottom: none;
   margin-bottom: 0;
@@ -197,7 +190,6 @@ details:not([open]) summary::after {
   transform: rotate(0deg);
 }
 
-/* Word List */
 .word-list {
   display: flex;
   flex-wrap: wrap;
@@ -209,10 +201,10 @@ details:not([open]) summary::after {
   padding: 8px 16px;
   border-radius: 25px;
   font-weight: 600;
-  color: rgb(255, 255, 255);
+  color: #fff;
   background-color: rgb(62, 24, 255);
   transition: var(--transition);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, .1);
   font-size: clamp(12px, 3vw, 16px);
 }
 
@@ -222,7 +214,7 @@ details:not([open]) summary::after {
   transform: scale(0.97);
 }
 
-/* Stats Container */
+/* ── Stats ── */
 .stats-container {
   display: flex;
   gap: 8px;
@@ -246,22 +238,12 @@ details:not([open]) summary::after {
   border-radius: var(--border-radius);
   padding: 12px 20px;
   font-weight: 600;
-  transition: var(--transition);
   color: white;
-  position: relative;
-  overflow: hidden;
   white-space: nowrap;
   flex-shrink: 0;
-  text-align: center;
   font-size: clamp(12px, 2vw, 16px);
 }
 
-.stats-button:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--box-shadow);
-  background: linear-gradient(135deg, var(--accent2-color), var(--accent8-color));
-}
-
 .stats-button:nth-child(1) {
   background: linear-gradient(135deg, var(--primary-color), var(--accent6-color));
 }
@@ -270,25 +252,25 @@ details:not([open]) summary::after {
   background: linear-gradient(135deg, var(--accent1-color), var(--accent7-color));
 }
 
-/* Hint Button */
+/* ── Hint ── */
 .hint-button {
   background: none;
   border: 2px solid var(--primary-color);
   width: 50px;
   height: 50px;
   cursor: pointer;
-  transition: var(--transition);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   padding: 0;
   flex-shrink: 0;
+  transition: var(--transition);
 }
 
 .hint-button:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, .3);
 }
 
 .hint-button:active {
@@ -297,37 +279,30 @@ details:not([open]) summary::after {
 
 .hint-button.active {
   background: radial-gradient(circle, #fffacd 0%, #ffeb3b 100%);
-  box-shadow: 0 0 20px 5px rgba(255, 235, 59, 0.6);
+  box-shadow: 0 0 20px 5px rgba(255, 235, 59, .6);
   border-color: #ffd700;
 }
 
-.hint-button svg,
-.hint-button svg path {
-  transition: var(--transition);
-}
-
 .hint-button.active svg path {
   fill: #ff9800;
 }
 
-/* Action Buttons */
+/* ── Buttons ── */
 .action-btn {
   border: 2px solid transparent;
   border-radius: var(--border-radius);
   padding: 12px 20px;
   font-weight: 600;
-  transition: var(--transition);
   color: white;
-  overflow: hidden;
   white-space: nowrap;
   flex-shrink: 0;
-  text-align: center;
   font-size: clamp(12px, 2vw, 16px);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
+  transition: var(--transition);
 }
 
 .action-btn:active {
@@ -340,7 +315,6 @@ details:not([open]) summary::after {
 
 .btn-shuffle:hover {
   transform: translateY(-2px);
-  box-shadow: var(--box-shadow);
   background: linear-gradient(135deg, #0284c7, #4f46e5);
 }
 
@@ -350,143 +324,79 @@ details:not([open]) summary::after {
 
 .btn-new:hover {
   transform: translateY(-2px);
-  box-shadow: var(--box-shadow);
   background: linear-gradient(135deg, #059669, #0891b2);
 }
 
-/* =============================================
-   MOBILE FIXES — Letters must always be visible
-   ============================================= */
-
-/* Responsive — Tablet */
+/* ══════════════════════════════════════════
+   MOBILE — complete override
+   Cell size = (100vw - outer-pad - grid-pad - gaps) / 8
+   At 390px: (390 - 16 - 16 - 28) / 8 = 41px
+   Font ≈ 48% of 41px = ~20px  ✓
+   ══════════════════════════════════════════ */
 @media (max-width: 768px) {
   .puzzle-container {
-    padding: 12px;
-  }
-
-  .grid__puzzle {
-    gap: 4px;
     padding: 8px;
-    border-width: 3px;
-    max-width: 100%;
-
-    /* CHANGE THIS */
-    aspect-ratio: 1 !important;
-
-    grid-template-columns: repeat(8, 1fr) !important;
-    box-shadow: var(--box-shadow);
-    box-sizing: border-box;
-    width: 100%;
-  }
-
-  .grid__puzzle .cell {
-    /* Let the cell be as tall as it is wide via aspect-ratio */
-    min-height: 35px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    aspect-ratio: 1 !important;
-    width: 100% !important;
-    height: auto !important;
-    /* Use container-relative sizing so letter never clips */
-    font-size: clamp(13px, 4.5vw, 20px);
-    border-width: 2px;
-    border-radius: 8px;
-    min-width: 0;
-    /* Ensure text never overflows */
-    overflow: hidden;
-    line-height: 1;
-    padding: 0;
-  }
-
-  .stats-button {
-    padding: 10px 14px;
-  }
-
-  .action-btn {
-    padding: 10px 14px;
-  }
-
-  .hint-button {
-    width: 44px;
-    height: 44px;
-  }
-
-  details summary {
-    padding: 12px 20px;
-  }
-}
-
-/* Responsive — Mobile */
-@media (max-width: 480px) {
-  .puzzle-container {
-    padding: 6px;
   }
 
   .grid__puzzle {
-    gap: 4px;
-    padding: 8px;
+    /* Take full available width */
+    width: calc(100vw - 16px) !important;
+    max-width: calc(100vw - 16px) !important;
+    min-width: 0;
+    margin: 0 !important;
+    padding: 8px !important;
+    gap: 4px !important;
     border-width: 3px;
-    max-width: 100%;
-
-    /* CHANGE THIS */
-    aspect-ratio: 1 !important;
-
-    grid-template-columns: repeat(8, 1fr) !important;
-    box-shadow: var(--box-shadow);
+    border-radius: 12px;
     box-sizing: border-box;
-    width: 100%;
+    grid-template-columns: repeat(8, 1fr) !important;
+    /* height is determined by cells — do NOT set aspect-ratio on grid */
   }
 
   .grid__puzzle .cell {
-    aspect-ratio: 1 !important;
-    width: 100% !important;
-    height: auto !important;
-    font-size: clamp(12px, calc((100vw - 60px) / 8 * 0.52), 18px);
-    border-width: 1.5px;
-    border-radius: 6px;
+    /*
+      width of one cell (auto via 1fr, ~(100vw-60px)/8)
+      font = 48% of that
+    */
+    font-size: calc((100vw - 60px) / 8 * 0.48) !important;
+    aspect-ratio: 1 / 1;
+    border-radius: 6px !important;
+    border-width: 1.5px !important;
     min-width: 0;
-    min-height: 35px;
-    overflow: hidden;
+    min-height: 0;
     line-height: 1;
     padding: 0;
-    /* Force the text to render in the visual centre */
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
 
   .stats-container {
     gap: 4px;
-    margin: 10px 0;
+    margin: 8px 0;
   }
 
   .stats-button {
-    padding: 7px 9px;
-    font-size: clamp(9px, 2.8vw, 12px);
+    padding: 8px 10px;
+    font-size: 11px;
     border-radius: 10px;
   }
 
   .action-btn {
-    padding: 7px 9px;
-    font-size: clamp(9px, 2.8vw, 12px);
+    padding: 8px 10px;
+    font-size: 11px;
     border-radius: 10px;
   }
 
   .hint-button {
-    width: 36px;
-    height: 36px;
+    width: 38px;
+    height: 38px;
   }
 
-  .hint-button svg,
-  .hint-button svg path {
-    max-width: 18px;
-    max-height: 18px;
+  details {
+    margin: 8px 0;
   }
 
   details summary {
-    padding: 10px 14px;
-    font-size: clamp(13px, 4vw, 16px);
+    padding: 12px 16px;
+    font-size: 14px;
   }
 
   details summary::after {
@@ -506,37 +416,48 @@ details:not([open]) summary::after {
   }
 }
 
-/* Accessibility */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation: none !important;
-    transition: none !important;
+@media (max-width: 380px) {
+  .grid__puzzle {
+    gap: 3px !important;
+    padding: 6px !important;
   }
-}
 
-/* Landscape mobile */
-@media (max-width: 768px) and (orientation: landscape) {
-  .puzzle-container {
-    display: flex;
-    flex-direction: column;
-    padding: 8px;
+  .grid__puzzle .cell {
+    font-size: calc((100vw - 48px) / 8 * 0.50) !important;
+    border-radius: 4px !important;
+    border-width: 1px !important;
   }
 
-  .grid__puzzle {
-    max-width: 45vh;
-    padding: 8px;
+  .stats-button {
+    padding: 6px 7px;
+    font-size: 10px;
   }
 
-  .stats-container {
-    margin: 10px 0;
+  .action-btn {
+    padding: 6px 7px;
+    font-size: 10px;
   }
 
-  details {
-    margin: 8px 0;
+  .hint-button {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+@media (max-width:768px) and (orientation:landscape) {
+  .grid__puzzle {
+    max-width: 50vh !important;
+    padding: 6px !important;
   }
 }
 
-/* High contrast */
 @media (prefers-contrast: high) {
   .grid__puzzle .cell {
     border-width: 3px;
diff --git a/src/assets/styles/setting.css b/src/assets/styles/setting.css
index 27d97d3a..6493609f 100644
--- a/src/assets/styles/setting.css
+++ b/src/assets/styles/setting.css
@@ -150,4 +150,4 @@
       transform: scale(1.05) rotate(45deg);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/MobileSplash.astro b/src/components/MobileSplash.astro
index b9fda582..99991066 100644
--- a/src/components/MobileSplash.astro
+++ b/src/components/MobileSplash.astro
@@ -2,7 +2,6 @@
 import "@/assets/styles/mobile-splash.css";
 import { Image } from "astro:assets";
 import logoImage from "public/assets/images/abcd.png";
-const { stay = true } = Astro.props;
 ---
 
 <div id="mobile-splash-wrapper" class="container__splash">
@@ -19,26 +18,31 @@ const { stay = true } = Astro.props;
     </div>
   </div>
 </div>
-<script define:vars={{ stay }} is:inline>
+
+<style>
+  .mobile-splash-hidden {
+    display: none !important;
+  }
+</style>
+
+<script is:inline>
   const splashWrapper = document.getElementById("mobile-splash-wrapper");
   const continueBtn = document.getElementById("continue");
 
   if (window.innerWidth < 768) {
     const userHasConsent = localStorage.getItem("viewAsDesktop") === "true";
 
-    if (stay) {
-      splashWrapper.style.display = "flex"; // always show
+    if (userHasConsent) {
+      splashWrapper.classList.add("mobile-splash-hidden");
     } else {
-      if (!userHasConsent) {
-        splashWrapper.style.display = "flex"; // first time
-      } else {
-        splashWrapper.style.display = "none"; // skip next time
-      }
+      splashWrapper.style.display = "flex";
     }
 
     continueBtn?.addEventListener("click", () => {
       localStorage.setItem("viewAsDesktop", "true");
-      splashWrapper.style.display = "none";
+      splashWrapper.classList.add("mobile-splash-hidden");
     });
+  } else {
+    splashWrapper.classList.add("mobile-splash-hidden");
   }
 </script>
diff --git a/src/components/Puzzle2.astro b/src/components/Puzzle2.astro
index 09f70015..52df0ea0 100644
--- a/src/components/Puzzle2.astro
+++ b/src/components/Puzzle2.astro
@@ -29,43 +29,60 @@ import HintIcon from "@/assets/icons/hint.svg";
   <div id="grid" class="grid__puzzle"></div>
 
   <script type="module" is:inline>
-    const getRandomColor = () => {
-      const hue = Math.floor(Math.random() * 360);
-      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})`;
-    };
+    // ── Fallback data agar fetch fail ho ──
+    const FALLBACK_DATA = [
+      {
+        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"]
+      }
+    ];
 
     async function fetchCrosswordData() {
       try {
         const response = await fetch("/assets/json/cross.json");
-        if (!response.ok) {
-          throw new Error("Failed to fetch crossword data");
-        }
-        return await response.json();
+        if (!response.ok) throw new Error("HTTP " + response.status);
+        const data = await response.json();
+        if (!Array.isArray(data) || data.length === 0) throw new Error("Empty data");
+        console.log("cross.json loaded OK, sets:", data.length);
+        return data;
       } catch (error) {
-        console.error(error);
-        return [];
+        console.warn("cross.json fetch failed, using fallback:", error.message);
+        return FALLBACK_DATA;
       }
     }
 
+    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"
+    ];
+
+    const getRandomColor = () => {
+      const hue = Math.floor(Math.random() * 360);
+      return `hsla(${hue}, 85%, 72%, 0.75)`;
+    };
+
+    // ── Init after DOM + fetch ──
     document.addEventListener("DOMContentLoaded", async () => {
-      const crosswordData = await fetchCrosswordData();
-      const wordSets = crosswordData;
+      const wordSets = await fetchCrosswordData();
       let currentWordSetIndex = 0;
 
-      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: [],
@@ -82,71 +99,57 @@ import HintIcon from "@/assets/icons/hint.svg";
         wordColors: new Map()
       };
 
+      // ── Grid generation ──
       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]];
+        const [r1, c1] = cells[0];
+        const [r2, c2] = cells[cells.length - 1];
         return r1 === r2 ? "horizontal" : c1 === c2 ? "vertical" : "diagonal";
       }
 
-      // Check if selection is in a valid straight line (horizontal, vertical, or diagonal)
       function isValidLine(cells) {
         if (cells.length < 2) return true;
-
-        const [[r1, c1]] = [cells[0]];
-        const [[r2, c2]] = [cells[1]];
-
-        // Calculate direction from first two cells
-        const rowDiff = r2 - r1;
-        const colDiff = c2 - c1;
-
-        // Check if it's a valid direction (horizontal, vertical, or diagonal)
-        if (Math.abs(rowDiff) > 1 || Math.abs(colDiff) > 1) return false;
-        if (rowDiff === 0 && colDiff === 0) return false;
-
-        // Check if all subsequent cells follow the same direction
+        const [r1, c1] = cells[0];
+        const [r2, c2] = cells[1];
+        const dr = r2 - r1,
+          dc = c2 - c1;
+        if (Math.abs(dr) > 1 || Math.abs(dc) > 1 || (dr === 0 && dc === 0)) return false;
         for (let i = 2; i < cells.length; i++) {
-          const expectedRow = r1 + rowDiff * i;
-          const expectedCol = c1 + colDiff * i;
-
-          if (cells[i][0] !== expectedRow || cells[i][1] !== expectedCol) {
-            return false;
-          }
+          if (cells[i][0] !== r1 + dr * i || cells[i][1] !== c1 + dc * i) return false;
         }
-
         return true;
       }
 
-      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;
-
+      function canPlaceWord(grid, word, row, col, dr, dc) {
+        const last_r = row + dr * (word.length - 1);
+        const last_c = col + dc * (word.length - 1);
+        if (last_r < 0 || last_r >= state.size || last_c < 0 || last_c >= state.size) 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;
+          const cur = grid[row + dr * i][col + dc * i];
+          if (cur !== "" && cur !== word[i]) return false;
         }
         return true;
       }
 
       function placeWord(grid, word) {
         const directions = [
-          [0, 1], // horizontal
-          [1, 0], // vertical
-          [1, 1], // diagonal down-right
-          [1, -1] // diagonal down-left
+          [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 [dr, dc] = 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)) {
+          if (canPlaceWord(grid, word, row, col, dr, dc)) {
             const wordCells = [];
             for (let i = 0; i < word.length; i++) {
-              const r = row + dRow * i;
-              const c = col + dCol * i;
+              const r = row + dr * i,
+                c = col + dc * i;
               grid[r][c] = word[i];
               wordCells.push([r, c]);
             }
@@ -156,52 +159,21 @@ import HintIcon from "@/assets/icons/hint.svg";
         return { placed: false, cells: [], direction: null };
       }
 
-      function generateRandomColors() {
-        state.solutionColors.clear();
-
-        const helpColorPalette = [
-          "hsla(10, 90%, 75%, 0.75)",
-          "hsla(40, 90%, 75%, 0.75)",
-          "hsla(60, 90%, 75%, 0.75)",
-          "hsla(120, 90%, 75%, 0.75)",
-          "hsla(180, 90%, 75%, 0.75)",
-          "hsla(210, 90%, 75%, 0.75)",
-          "hsla(270, 90%, 75%, 0.75)",
-          "hsla(300, 90%, 75%, 0.75)",
-          "hsla(330, 90%, 75%, 0.75)",
-          "hsla(150, 90%, 75%, 0.75)",
-          "hsla(30, 90%, 75%, 0.75)",
-          "hsla(240, 90%, 75%, 0.75)"
-        ];
-
-        let colorIndex = 0;
-        state.solutions.forEach((solution) => {
-          state.solutionColors.set(solution.word, helpColorPalette[colorIndex % helpColorPalette.length]);
-          colorIndex++;
-        });
-      }
-
-      function resetPuzzle() {
-        generatePuzzleWithCurrentWordSet();
-      }
-
       function generatePuzzleWithCurrentWordSet() {
-        switch (state.difficulty) {
-          case "easy":
-            state.size = 8;
-            break;
-          case "medium":
-            state.size = 8;
-            break;
-          case "hard":
-            state.size = 8;
-            break;
+        state.size = 8;
+
+        // Build empty grid
+        const newGrid = [];
+        for (let i = 0; i < state.size; i++) {
+          newGrid.push([]);
+          for (let j = 0; j < state.size; j++) {
+            newGrid[i].push("");
+          }
         }
 
-        const newGrid = Array(state.size)
-          .fill()
-          .map(() => Array(state.size).fill(""));
         const words = state.currentWordSet[state.difficulty];
+        console.log("Generating puzzle with words:", words);
+
         state.solutions = [];
         state.wordColors.clear();
         state.matchedCells.clear();
@@ -212,12 +184,15 @@ import HintIcon from "@/assets/icons/hint.svg";
           if (result.placed) {
             state.solutions.push({ word, cells: result.cells, direction: result.direction });
             state.solutionColors.set(word, getRandomColor());
+          } else {
+            console.warn("Could not place word:", word);
           }
         });
 
+        // Fill empty cells
         for (let i = 0; i < state.size; i++) {
           for (let j = 0; j < state.size; j++) {
-            newGrid[i][j] = newGrid[i][j] || generateRandomLetter();
+            if (newGrid[i][j] === "") newGrid[i][j] = generateRandomLetter();
           }
         }
 
@@ -227,6 +202,7 @@ import HintIcon from "@/assets/icons/hint.svg";
         state.selectedCells = [];
         state.clickCount = 0;
 
+        console.log("Grid generated:", state.grid.length, "rows");
         updateDOM();
       }
 
@@ -236,262 +212,218 @@ import HintIcon from "@/assets/icons/hint.svg";
         generatePuzzleWithCurrentWordSet();
       }
 
-      function isValidNextCell(current, next) {
-        const [r1, c1] = current;
-        const [r2, c2] = next;
-        return Math.abs(r1 - r2) <= 1 && Math.abs(c1 - c2) <= 1;
+      function generateRandomColors() {
+        state.solutionColors.clear();
+        const palette = [
+          "hsla(10,90%,75%,.75)",
+          "hsla(40,90%,75%,.75)",
+          "hsla(120,90%,75%,.75)",
+          "hsla(180,90%,75%,.75)",
+          "hsla(210,90%,75%,.75)",
+          "hsla(270,90%,75%,.75)",
+          "hsla(300,90%,75%,.75)",
+          "hsla(330,90%,75%,.75)",
+          "hsla(150,90%,75%,.75)"
+        ];
+        let idx = 0;
+        state.solutions.forEach((s) => state.solutionColors.set(s.word, palette[idx++ % palette.length]));
+      }
+
+      function isValidNextCell(a, b) {
+        return Math.abs(a[0] - b[0]) <= 1 && Math.abs(a[1] - b[1]) <= 1;
       }
 
       function checkForWord(selection) {
         if (selection.length < 3) return false;
-
-        // Validate that selection forms a straight line
-        if (!isValidLine(selection)) {
-          return false;
-        }
-
+        if (!isValidLine(selection)) 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 (foundWord) {
-          state.foundWords.push(foundWord);
-          if (!state.wordColors.has(foundWord)) {
-            const colorIndex = state.wordColors.size % colorClasses.length;
-            state.wordColors.set(foundWord, colorClasses[colorIndex]);
-          }
-          state.matchedCells.set(foundWord, [...selection]);
+        const rev = word.split("").reverse().join("");
+        const list = state.currentWordSet[state.difficulty];
+        let found = null;
+        if (list.includes(word) && !state.foundWords.includes(word)) found = word;
+        else if (list.includes(rev) && !state.foundWords.includes(rev)) found = rev;
+        if (found) {
+          state.foundWords.push(found);
+          if (!state.wordColors.has(found))
+            state.wordColors.set(found, colorClasses[state.wordColors.size % colorClasses.length]);
+          state.matchedCells.set(found, [...selection]);
           return true;
         }
         return false;
       }
 
-      function getCellCoordinates(element) {
-        if (!element?.dataset?.coords) return null;
-        return element.dataset.coords.split("-").map(Number);
+      function getCellCoords(el) {
+        if (!el?.dataset?.coords) return null;
+        return el.dataset.coords.split("-").map(Number);
       }
 
+      // ── DOM update ──
       function updateDOM() {
-        const gridElement = document.getElementById("grid");
-        gridElement.innerHTML = "";
-        gridElement.style.gridTemplateColumns = `repeat(${state.size}, 1fr)`;
+        const gridEl = document.getElementById("grid");
+
+        // Only set display — let CSS handle grid-template-columns
+        // (inline gridTemplateColumns overrides the CSS custom-property-based mobile layout)
+        gridEl.style.display = "grid";
 
-        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}`;
+        gridEl.innerHTML = "";
 
-            const isSelected = state.selectedCells.some(([r, c]) => r === i && c === j);
+        state.grid.forEach((row, i) => {
+          row.forEach((letter, j) => {
+            const cell = document.createElement("div");
+            cell.className = "cell";
+            cell.textContent = letter;
+            cell.dataset.coords = `${i}-${j}`;
 
-            let matchedWord = null;
+            // Selected
+            if (state.selectedCells.some(([r, c]) => r === i && c === j)) cell.classList.add("selected");
+
+            // Matched word color
             for (const [word, cells] of state.matchedCells.entries()) {
               if (cells.some(([r, c]) => r === i && c === j)) {
-                matchedWord = word;
+                cell.classList.add("match");
+                const cc = state.wordColors.get(word);
+                if (cc) cell.classList.add(cc);
                 break;
               }
             }
 
+            // Solution hint
             if (state.showSolution) {
-              for (const solution of state.solutions) {
-                if (solution.cells.some(([r, c]) => r === i && c === j)) {
-                  const wordColor = state.solutionColors.get(solution.word);
-                  if (wordColor) {
-                    cellElement.style.backgroundColor = wordColor;
-                  }
+              for (const sol of state.solutions) {
+                if (sol.cells.some(([r, c]) => r === i && c === j)) {
+                  const sc = state.solutionColors.get(sol.word);
+                  if (sc) cell.style.backgroundColor = sc;
                   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);
-          })
-        );
+            gridEl.appendChild(cell);
+          });
+        });
 
         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]
+        document.getElementById("wordList").innerHTML = state.currentWordSet[state.difficulty]
           .map((word) => {
-            const isFound = state.foundWords.includes(word);
-            const colorClass = state.wordColors.get(word) || "";
-
-            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>`;
+            const found = state.foundWords.includes(word);
+            const cc = state.wordColors.get(word) || "";
+            const sc = state.showSolution ? state.solutionColors.get(word) : null;
+            const style = sc ? `style="background-color:${sc};"` : "";
+            return `<span class="word ${found ? "found " + cc : ""}" ${style}>${word}</span>`;
           })
           .join("");
 
-        // Update hint button visual state
-        const hintBtn = document.getElementById("solutionBtn");
-        if (state.showSolution) {
-          hintBtn.classList.add("active");
-        } else {
-          hintBtn.classList.remove("active");
-        }
+        document.getElementById("solutionBtn").classList.toggle("active", state.showSolution);
       }
 
-      function handleCellClick(e) {
-        const coords = getCellCoordinates(e.target);
-        if (!coords) return;
-
-        const isAlreadySelected = state.selectedCells.some(([r, c]) => r === coords[0] && c === coords[1]);
-
-        if (isAlreadySelected) {
-          return;
-        }
-
-        state.selectedCells.push(coords);
-        state.clickCount++;
-
-        updateDOM();
-      }
+      // ── Event handlers ──
+      const gridEl = document.getElementById("grid");
 
-      function handleDragStart(e) {
-        const coords = getCellCoordinates(e.target);
+      gridEl.addEventListener("mousedown", (e) => {
+        const coords = getCellCoords(e.target);
         if (!coords) return;
-
         state.isDragging = true;
         state.selectedCells = [coords];
         state.clickCount++;
         updateDOM();
-      }
+      });
 
-      function handleDragMove(e) {
+      gridEl.addEventListener("mousemove", (e) => {
         if (!state.isDragging) return;
-
-        // Get the correct coordinates for both mouse and touch events
-        let clientX, clientY;
-        if (e.type.includes("touch")) {
-          if (e.touches && e.touches.length > 0) {
-            clientX = e.touches[0].clientX;
-            clientY = e.touches[0].clientY;
-          } else {
-            return;
-          }
-        } else {
-          clientX = e.clientX;
-          clientY = e.clientY;
-        }
-
-        const element = document.elementFromPoint(clientX, clientY);
-        const coords = getCellCoordinates(element);
+        const coords = getCellCoords(e.target);
         if (!coords) return;
-
-        const lastCell = state.selectedCells[state.selectedCells.length - 1];
-        if (!lastCell || !isValidNextCell(lastCell, coords)) return;
-
+        const last = state.selectedCells[state.selectedCells.length - 1];
+        if (!last || !isValidNextCell(last, coords)) return;
         if (!state.selectedCells.some(([r, c]) => r === coords[0] && c === coords[1])) {
           state.selectedCells.push(coords);
           updateDOM();
         }
-      }
+      });
 
-      function handleDragEnd() {
+      document.addEventListener("mouseup", () => {
         if (!state.isDragging) return;
-
-        const wasWordFound = checkForWord(state.selectedCells);
-        state.isDragging = false;
-
-        if (!wasWordFound) {
-          state.selectedCells = [];
-        }
-
-        updateDOM();
-      }
-
-      function handleHelpButtonClick() {
-        generateRandomColors();
-        state.showSolution = !state.showSolution;
-        updateDOM();
-      }
-
-      function handleClearButtonClick() {
-        state.selectedCells = [];
-        state.foundWords = [];
-        state.matchedCells.clear();
-        state.wordColors.clear();
         state.isDragging = false;
-
+        if (!checkForWord(state.selectedCells)) state.selectedCells = [];
         updateDOM();
-      }
-
-      function handleDifficultyChange(e) {
-        state.difficulty = e.target.value;
-        generatePuzzleWithCurrentWordSet();
-      }
-
-      const gridElement = document.getElementById("grid");
-
-      // Click handler for sequential selection
-      gridElement.addEventListener("click", handleCellClick);
+      });
 
-      // Mouse events for desktop
-      gridElement.addEventListener("mousedown", handleDragStart);
-      gridElement.addEventListener("mousemove", handleDragMove);
-      document.addEventListener("mouseup", handleDragEnd);
-
-      // Touch events for mobile - with improved handling
-      gridElement.addEventListener(
+      gridEl.addEventListener(
         "touchstart",
         (e) => {
-          e.preventDefault(); // Prevent scrolling
-          handleDragStart(e);
+          e.preventDefault();
+          const t = e.touches[0];
+          const el = document.elementFromPoint(t.clientX, t.clientY);
+          const coords = getCellCoords(el);
+          if (!coords) return;
+          state.isDragging = true;
+          state.selectedCells = [coords];
+          state.clickCount++;
+          updateDOM();
         },
         { passive: false }
       );
 
-      gridElement.addEventListener(
+      gridEl.addEventListener(
         "touchmove",
         (e) => {
-          e.preventDefault(); // Prevent scrolling
-          handleDragMove(e);
+          e.preventDefault();
+          if (!state.isDragging) return;
+          const t = e.touches[0];
+          const el = document.elementFromPoint(t.clientX, t.clientY);
+          const coords = getCellCoords(el);
+          if (!coords) return;
+          const last = state.selectedCells[state.selectedCells.length - 1];
+          if (!last || !isValidNextCell(last, coords)) return;
+          if (!state.selectedCells.some(([r, c]) => r === coords[0] && c === coords[1])) {
+            state.selectedCells.push(coords);
+            updateDOM();
+          }
         },
         { passive: false }
       );
 
-      gridElement.addEventListener(
+      gridEl.addEventListener(
         "touchend",
         (e) => {
-          e.preventDefault(); // Prevent scrolling
-          handleDragEnd();
+          e.preventDefault();
+          if (!state.isDragging) return;
+          state.isDragging = false;
+          if (!checkForWord(state.selectedCells)) state.selectedCells = [];
+          updateDOM();
         },
         { passive: false }
       );
 
-      // Controls
-      document.getElementById("level").addEventListener("change", handleDifficultyChange);
+      document.getElementById("level").addEventListener("change", (e) => {
+        state.difficulty = e.target.value;
+        generatePuzzleWithCurrentWordSet();
+      });
+
       document.getElementById("new").addEventListener("click", generateNewPuzzle);
-      document.getElementById("shuffle").addEventListener("click", resetPuzzle);
-      document.getElementById("solutionBtn").addEventListener("click", handleHelpButtonClick);
-      document.getElementById("clear").addEventListener("click", handleClearButtonClick);
+      document.getElementById("shuffle").addEventListener("click", generatePuzzleWithCurrentWordSet);
+
+      document.getElementById("solutionBtn").addEventListener("click", () => {
+        generateRandomColors();
+        state.showSolution = !state.showSolution;
+        updateDOM();
+      });
+
+      document.getElementById("clear").addEventListener("click", () => {
+        state.selectedCells = [];
+        state.foundWords = [];
+        state.matchedCells.clear();
+        state.wordColors.clear();
+        state.isDragging = false;
+        updateDOM();
+      });
+
+      document.getElementById("s-new")?.addEventListener("click", generateNewPuzzle);
+      document.getElementById("s-shuffle")?.addEventListener("click", generatePuzzleWithCurrentWordSet);
 
-      // Initialize the first puzzle
+      // ── Start ──
       generatePuzzleWithCurrentWordSet();
     });
   </script>

From 9667b935cf4ecdf3a998364753f287d5f2e9f3c4 Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Fri, 5 Jun 2026 21:34:49 +0530
Subject: [PATCH 12/16] [RZA-260184-bugfix1]: fix: resolve hidden buttons and
 controls issues on mobile devices

---
 src/assets/styles/crossword2.css     |  34 ++++----
 src/assets/styles/header.css         |  68 +++++++++++-----
 src/assets/styles/panel.css          |  43 +++++-----
 src/assets/styles/share-button.css   |  37 ++++++++-
 src/components/KeyboardTrigger.astro | 117 ++++++++-------------------
 src/components/Speaker.astro         |  14 ++++
 src/layouts/common/Header.astro      |  16 ++++
 src/pages/draw.astro                 |  81 +++++++++++++++++--
 src/pages/panel.astro                |  33 +++-----
 9 files changed, 273 insertions(+), 170 deletions(-)

diff --git a/src/assets/styles/crossword2.css b/src/assets/styles/crossword2.css
index 97e2ca58..8ec1e8ab 100644
--- a/src/assets/styles/crossword2.css
+++ b/src/assets/styles/crossword2.css
@@ -41,7 +41,9 @@
   gap: 10px;
   padding: 24px;
   border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow), 0 0 0 15px rgba(99, 102, 241, 0.08);
+  box-shadow:
+    var(--box-shadow),
+    0 0 0 15px rgba(99, 102, 241, 0.08);
   margin: 0 auto;
   width: 100%;
   max-width: 560px;
@@ -82,30 +84,32 @@
   transform: translateY(-3px);
   background: #eef2ff;
   border-color: var(--primary-color);
-  box-shadow: 0 0 16px 4px var(--primary-color), 0 8px 20px rgba(99, 102, 241, .15);
+  box-shadow:
+    0 0 16px 4px var(--primary-color),
+    0 8px 20px rgba(99, 102, 241, 0.15);
 }
 
 .grid__puzzle .cell.selected {
   background: var(--primary-color);
   color: #fff;
   transform: scale(1.08);
-  box-shadow: 0 8px 20px rgba(99, 102, 241, .4);
+  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
   animation: pulse 1.5s infinite alternate;
 }
 
 @keyframes pulse {
   from {
-    box-shadow: 0 8px 20px rgba(99, 102, 241, .4);
+    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
   }
 
   to {
-    box-shadow: 0 8px 25px rgba(99, 102, 241, .6);
+    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
   }
 }
 
 .grid__puzzle .cell[class*="word-color-"] {
   color: #f3ebeb;
-  box-shadow: inset 0 1px 7px rgba(0, 0, 0, .3);
+  box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.3);
 }
 
 .grid__puzzle .cell.word-color-1 {
@@ -144,8 +148,8 @@
 details {
   width: 100%;
   border-radius: var(--border-radius);
-  background-color: rgba(99, 102, 241, .05);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
+  background-color: rgba(99, 102, 241, 0.05);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
   margin: 20px 0;
   border-left: 4px solid var(--primary-color);
 }
@@ -158,7 +162,7 @@ details summary {
   align-items: center;
   gap: 12px;
   position: relative;
-  border-bottom: 2px solid rgba(99, 102, 241, .1);
+  border-bottom: 2px solid rgba(99, 102, 241, 0.1);
   margin-bottom: 12px;
   font-size: clamp(14px, 2.5vw, 18px);
   list-style: none;
@@ -204,7 +208,7 @@ details:not([open]) summary::after {
   color: #fff;
   background-color: rgb(62, 24, 255);
   transition: var(--transition);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, .1);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
   font-size: clamp(12px, 3vw, 16px);
 }
 
@@ -270,7 +274,7 @@ details:not([open]) summary::after {
 
 .hint-button:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, .3);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
 }
 
 .hint-button:active {
@@ -279,7 +283,7 @@ details:not([open]) summary::after {
 
 .hint-button.active {
   background: radial-gradient(circle, #fffacd 0%, #ffeb3b 100%);
-  box-shadow: 0 0 20px 5px rgba(255, 235, 59, .6);
+  box-shadow: 0 0 20px 5px rgba(255, 235, 59, 0.6);
   border-color: #ffd700;
 }
 
@@ -423,7 +427,7 @@ details:not([open]) summary::after {
   }
 
   .grid__puzzle .cell {
-    font-size: calc((100vw - 48px) / 8 * 0.50) !important;
+    font-size: calc((100vw - 48px) / 8 * 0.5) !important;
     border-radius: 4px !important;
     border-width: 1px !important;
   }
@@ -451,7 +455,7 @@ details:not([open]) summary::after {
   }
 }
 
-@media (max-width:768px) and (orientation:landscape) {
+@media (max-width: 768px) and (orientation: landscape) {
   .grid__puzzle {
     max-width: 50vh !important;
     padding: 6px !important;
@@ -467,4 +471,4 @@ details:not([open]) summary::after {
     border-color: #000;
     outline: 2px solid #fff;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css
index 9167eb05..b322e584 100644
--- a/src/assets/styles/header.css
+++ b/src/assets/styles/header.css
@@ -521,7 +521,7 @@
 /* ── Mobile ── */
 @media (max-width: 640px) {
   .header {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr auto;
     padding: 0 1rem;
     min-height: 4rem;
     height: 4rem;
@@ -565,7 +565,47 @@
 
   .hero-search {
     top: 4rem;
-    padding: 0.75rem 1rem;
+    padding: 0.5rem 1rem 0;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .hero-search__wrap {
+    padding: 0.25rem 0 !important;
+  }
+
+  /* Mobile buttons bar — search ke niche */
+  .mobile-actions-bar {
+    display: flex !important;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.4rem;
+    padding: 0.4rem 0 0.5rem;
+    width: 100%;
+  }
+
+  .mobile-actions-bar .share-trigger-button {
+    width: 32px !important;
+    height: 32px !important;
+    padding: 0 !important;
+    min-width: 32px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+
+  .mobile-actions-bar .share-trigger-button svg {
+    width: 16px !important;
+    height: 16px !important;
+    margin: 0 !important;
+  }
+
+  .mobile-actions-bar .help {
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    padding: 0 !important;
+    font-size: 1rem !important;
   }
 
   .header-spacer {
@@ -593,9 +633,15 @@
   }
 }
 
+/* Desktop pe mobile-actions-bar hide */
+.mobile-actions-bar {
+  display: none;
+}
+
 /* ── Small Mobile ── */
 @media (max-width: 480px) {
   .header {
+    grid-template-columns: 1fr auto;
     padding: 0 0.75rem;
     min-height: 3.5rem;
     height: 3.5rem;
@@ -625,7 +671,7 @@
 
   .hero-search {
     top: 3.5rem;
-    padding: 0.625rem 0.75rem;
+    padding: 0.5rem 0.75rem 0;
   }
 
   .header-spacer {
@@ -636,18 +682,4 @@
     width: 85vw;
     padding: 1.25rem 1rem;
   }
-}
-
-.sidebar-mobile-wrapper {
-  width: 100%;
-  padding: 0 1rem;
-  margin-top: 1rem;
-}
-
-[data-theme="light"] .header {
-  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
-}
-
-[data-theme="light"] .hero-search {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/panel.css b/src/assets/styles/panel.css
index 44edbb67..30eefed9 100644
--- a/src/assets/styles/panel.css
+++ b/src/assets/styles/panel.css
@@ -68,7 +68,7 @@
     color: white;
   }
 
-  & input[type="radio"]:focus-visible + .icon {
+  & input[type="radio"]:focus-visible+.icon {
     outline: 2px solid var(--primary);
     outline-offset: 2px;
     position: absolute;
@@ -86,7 +86,7 @@
     display: none;
   }
 
-  & input[type="radio"]:checked + .icon {
+  & input[type="radio"]:checked+.icon {
     background: var(--primary);
     color: white;
   }
@@ -135,7 +135,7 @@
     perspective: 1000px;
     margin: auto;
 
-    & > letter-panel {
+    &>letter-panel {
       display: block;
       width: 100%;
       height: 100%;
@@ -274,19 +274,35 @@
   background: transparent;
   border: 1px solid var(--primary);
   color: var(--text-light);
-  padding: 0.6rem;
-  width: 50px;
-  height: 50px;
-  min-width: 40px;
+  padding: 0;
+  /* 0.6rem → 0 */
+  width: 44px;
+  /* 50px → 44px */
+  height: 44px;
+  /* 50px → 44px */
+  min-width: 44px;
+  /* 40px → 44px */
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
+  box-sizing: border-box;
+  /* add */
   transition: all var(--transition-speed) ease;
   cursor: pointer;
   margin-top: 0;
   font-size: 16px;
 }
+.settings-button .settings-icon {
+  width: 1.3em;
+  /* icon thoda bada */
+  height: 1.3em;
+  color: var(--primary);
+  fill: currentColor;
+  transition: fill var(--transition-speed) ease;
+  flex-shrink: 0;
+  pointer-events: none;
+}
 
 .settings-button:hover {
   transform: scale(1.05);
@@ -296,16 +312,6 @@
   transform: scale(0.98);
 }
 
-.settings-button .settings-icon {
-  width: 1.4em;
-  height: 1.4em;
-  color: var(--primary);
-  fill: currentColor;
-  transition: fill var(--transition-speed) ease;
-  flex-shrink: 0;
-  pointer-events: none;
-}
-
 .settings-button::after {
   content: attr(data-tooltip);
   position: absolute;
@@ -401,6 +407,7 @@
 
 /* === Responsiveness === */
 @media (max-width: 768px) {
+
   /* Header-right slot for mobile */
   [slot="header-right"] {
     justify-content: flex-end;
@@ -418,4 +425,4 @@
     max-width: 350px;
     transform: translateY(10px);
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/share-button.css b/src/assets/styles/share-button.css
index 31caee2e..4b548247 100644
--- a/src/assets/styles/share-button.css
+++ b/src/assets/styles/share-button.css
@@ -18,16 +18,28 @@
 .share-trigger-button {
   background-color: transparent;
   color: var(--primary);
-  padding: 10px;
-  width: 50px;
-  height: 50px;
+  padding: 0;
+  /* 10px → 0 */
+  width: 44px;
+  /* 50px → 44px */
+  height: 44px;
+  /* 50px → 44px */
   border: 1px solid var(--primary);
-  border-radius: 50px;
+  border-radius: 50%;
+  /* 50px → 50% */
   cursor: pointer;
   font-size: 16px;
   font-weight: 500;
   transition: all 0.2s ease-in-out;
   position: relative;
+  display: flex;
+  /* add */
+  align-items: center;
+  /* add */
+  justify-content: center;
+  /* add */
+  box-sizing: border-box;
+  /* add */
 }
 
 .share-trigger-button:hover {
@@ -224,3 +236,20 @@
 .copy-link-button:hover {
   background-color: #e0e0e0;
 }
+
+@media (max-width: 640px) {
+  .share-trigger-button {
+    width: 44px !important;
+    /* 32px → 44px */
+    height: 44px !important;
+    min-height: 44px !important;
+    max-height: 44px !important;
+    padding: 0 !important;
+  }
+
+  .share-trigger-button svg {
+    width: 18px !important;
+    /* 16px → 18px */
+    height: 18px !important;
+  }
+}
\ No newline at end of file
diff --git a/src/components/KeyboardTrigger.astro b/src/components/KeyboardTrigger.astro
index 30361561..0e19f32e 100644
--- a/src/components/KeyboardTrigger.astro
+++ b/src/components/KeyboardTrigger.astro
@@ -26,6 +26,20 @@ import KeyboardIcon from "@/assets/icons/KeyboardIcon.svg";
     transition: all 0.2s ease-in-out;
   }
 
+  @media (max-width: 640px) {
+    #keyboard-trigger {
+      width: 32px !important;
+      height: 32px !important;
+      min-width: 32px !important;
+      min-height: 32px !important;
+      padding: 0 !important;
+    }
+
+    #keyboard-trigger svg {
+      width: 16px !important;
+      height: 16px !important;
+    }
+  }
   #keyboard-trigger:hover {
     transform: translateY(-2px);
   }
@@ -37,96 +51,31 @@ import KeyboardIcon from "@/assets/icons/KeyboardIcon.svg";
   }
 </style>
 
-<script>
+<script is:inline>
   const showOnTouchElement = document.querySelector(".show_on_touch");
   const isTouchDevice = window.matchMedia("(hover: none), (pointer: coarse)").matches;
-  (showOnTouchElement as HTMLElement).style.display = isTouchDevice ? "flex" : "none";
-  let currentHiddenInput: HTMLInputElement | null = null;
-  let isKeyboardForcedOpen: boolean = false;
+  showOnTouchElement.style.display = isTouchDevice ? "flex" : "none";
 
-  function setButtonActiveState(isActive: boolean) {
-    const keyboardTrigger = document.getElementById("keyboard-trigger");
-    if (keyboardTrigger) {
-      if (isActive) {
-        keyboardTrigger.classList.add("active");
-        keyboardTrigger.setAttribute("aria-pressed", "true");
-      } else {
+  const keyboardTrigger = document.getElementById("keyboard-trigger");
+
+  if (keyboardTrigger) {
+    keyboardTrigger.addEventListener("click", () => {
+      // VirtualKeyboard ka toggle button click karo
+      const vkToggleBtn = document.getElementById("vk-toggle-btn");
+      if (vkToggleBtn) {
+        vkToggleBtn.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+      }
+
+      // Active state sync karo
+      const vkContainer = document.getElementById("vk-container");
+      const isVisible = vkContainer && vkContainer.style.display === "flex";
+      if (isVisible) {
         keyboardTrigger.classList.remove("active");
         keyboardTrigger.setAttribute("aria-pressed", "false");
+      } else {
+        keyboardTrigger.classList.add("active");
+        keyboardTrigger.setAttribute("aria-pressed", "true");
       }
-    }
-  }
-
-  function cleanupHiddenInputDOM() {
-    if (currentHiddenInput && document.body.contains(currentHiddenInput)) {
-      document.body.removeChild(currentHiddenInput);
-    }
-    currentHiddenInput = null;
-  }
-
-  function createAndFocusHiddenInput() {
-    if (currentHiddenInput) {
-      currentHiddenInput.blur();
-      cleanupHiddenInputDOM();
-    }
-
-    const hiddenInput = document.createElement("input");
-    hiddenInput.type = "text";
-    hiddenInput.style.position = "fixed";
-    hiddenInput.style.top = "-9999px";
-    hiddenInput.style.left = "-9999px";
-    hiddenInput.style.opacity = "0";
-    hiddenInput.style.height = "0";
-    hiddenInput.style.width = "0";
-    hiddenInput.style.pointerEvents = "none";
-    hiddenInput.id = "hidden-keyboard-input";
-
-    document.body.appendChild(hiddenInput);
-    currentHiddenInput = hiddenInput;
-
-    hiddenInput.addEventListener("blur", () => {
-      cleanupHiddenInputDOM();
     });
-
-    hiddenInput.focus();
-    isKeyboardForcedOpen = true;
-    setButtonActiveState(true);
   }
-
-  document.addEventListener("DOMContentLoaded", () => {
-    const keyboardTrigger = document.getElementById("keyboard-trigger");
-    setButtonActiveState(isKeyboardForcedOpen);
-
-    if (keyboardTrigger) {
-      keyboardTrigger.addEventListener("click", () => {
-        if (isKeyboardForcedOpen) {
-          if (currentHiddenInput) {
-            currentHiddenInput.blur();
-          }
-          isKeyboardForcedOpen = false;
-          setButtonActiveState(false);
-        } else {
-          createAndFocusHiddenInput();
-        }
-      });
-    }
-  });
-
-  document.addEventListener("focusin", (event) => {
-    const target = event.target as HTMLElement | null;
-
-    if (
-      isKeyboardForcedOpen &&
-      currentHiddenInput &&
-      document.body.contains(currentHiddenInput) &&
-      target !== currentHiddenInput &&
-      target !== document.getElementById("keyboard-trigger") &&
-      target &&
-      (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)
-    ) {
-      currentHiddenInput.blur();
-      isKeyboardForcedOpen = false;
-      setButtonActiveState(false);
-    }
-  });
 </script>
diff --git a/src/components/Speaker.astro b/src/components/Speaker.astro
index 0378d549..51091a31 100644
--- a/src/components/Speaker.astro
+++ b/src/components/Speaker.astro
@@ -51,6 +51,20 @@ declare global {
   .mute-icon {
     font-size: 1.5rem;
   }
+
+  @media (max-width: 640px) {
+    .mute-button {
+      width: 32px !important;
+      height: 32px !important;
+      padding: 0 !important;
+      min-width: 32px !important;
+      min-height: 32px !important;
+    }
+
+    .mute-icon {
+      font-size: 1rem !important;
+    }
+  }
 </style>
 
 <div class="speaker-controls">
diff --git a/src/layouts/common/Header.astro b/src/layouts/common/Header.astro
index d363bd38..85adec4d 100755
--- a/src/layouts/common/Header.astro
+++ b/src/layouts/common/Header.astro
@@ -276,6 +276,7 @@ const allSearchItemsJSON = JSON.stringify(allSearchItems);
     >
     </div>
   </div>
+  <div class="mobile-actions-bar" id="mobileActionsBar"></div>
 </div>
 
 <div class="header-spacer" id="headerSpacer"></div>
@@ -1179,7 +1180,22 @@ const allSearchItemsJSON = JSON.stringify(allSearchItems);
     initThemeToggle();
     initHamburger();
     updateSpacer();
+    moveMobileButtons();
+  }
+  function moveMobileButtons() {
+  if (window.innerWidth > 640) return;
+  const actionGroup = document.querySelector(".action__group");
+  const mobileBar = document.getElementById("mobileActionsBar");
+  if (!actionGroup || !mobileBar) return;
+
+  // Theme toggle chhod ke baaki sab move karo
+  Array.from(actionGroup.children).forEach((child) => {
+    if (!child.classList.contains("theme-toggle")) {
+      mobileBar.appendChild(child);
+    }
+  });
   }
+
   window.addEventListener("resize", updateSpacer);
 
   // Run immediately
diff --git a/src/pages/draw.astro b/src/pages/draw.astro
index ef1b0592..0f3260e1 100644
--- a/src/pages/draw.astro
+++ b/src/pages/draw.astro
@@ -186,6 +186,28 @@ const meta = {
       align-items: center !important;
     }
 
+    /* Theme toggle — mobile pe bilkul hide */
+    :global(.theme-toggle) {
+      display: none !important;
+      visibility: hidden !important;
+    }
+
+    /* ✅ FIX: Action group — mask bilkul hatao, pehla button poora dikhega */
+    :global(.action__group) {
+      overflow-x: auto !important;
+      overflow-y: visible !important;
+      scrollbar-width: none !important;
+      -ms-overflow-style: none !important;
+      scroll-behavior: smooth !important;
+      -webkit-mask-image: none !important;
+      mask-image: none !important;
+    }
+
+    /* Webkit scrollbar hide */
+    :global(.action__group::-webkit-scrollbar) {
+      display: none !important;
+    }
+
     /* Share popover — body level pe render hoga JS se */
     :global(.share-popover.mobile-teleported) {
       position: fixed !important;
@@ -224,19 +246,40 @@ const meta = {
       actionGroup.style.left = "0";
       actionGroup.style.width = "100%";
       actionGroup.style.background = "var(--background)";
-      actionGroup.style.padding = "0.4rem 0.5rem";
+      // ✅ FIX: Left padding 0.5rem — pehla button left edge se chipka na rahe
+      actionGroup.style.padding = "0.4rem 0rem 0.4rem 0.5rem";
       actionGroup.style.zIndex = "998";
       actionGroup.style.borderBottom = "1px solid rgba(124,58,237,0.15)";
       actionGroup.style.justifyContent = "flex-start";
       actionGroup.style.flexWrap = "nowrap";
-      actionGroup.style.gap = "0.25rem";
+      actionGroup.style.gap = "0.35rem";
       actionGroup.style.boxSizing = "border-box";
       actionGroup.style.overflowX = "auto";
       actionGroup.style.overflowY = "visible";
+      actionGroup.style.scrollbarWidth = "none";
+      actionGroup.style.scrollBehavior = "smooth";
+      // ✅ FIX: Mask bilkul hatao — pehla button ab poora visible rahega
+      actionGroup.style.webkitMaskImage = "none";
+      (actionGroup.style as any).maskImage = "none";
 
-      // Theme toggle hide
+      // Theme toggle — CSS se already hidden, JS se bhi ensure
       const themeToggle = actionGroup.querySelector(".theme-toggle") as HTMLElement | null;
-      if (themeToggle) themeToggle.style.display = "none";
+      if (themeToggle) {
+        themeToggle.style.display = "none";
+        themeToggle.style.visibility = "hidden";
+      }
+
+      // Hamburger ke saath overlap na ho — right padding
+      const hamburger = document.querySelector(".hamburger") as HTMLElement | null;
+      if (hamburger) {
+        const hamRect = hamburger.getBoundingClientRect();
+        actionGroup.style.paddingRight = window.innerWidth - hamRect.left + 8 + "px";
+      }
+
+      // Scroll to START (left) so first buttons are always visible
+      setTimeout(() => {
+        actionGroup.scrollLeft = 0;
+      }, 50);
 
       setTimeout(() => {
         const spacer = document.getElementById("headerSpacer");
@@ -249,10 +292,35 @@ const meta = {
           content.style.paddingBottom = vkH + 16 + "px";
         }
       }, 100);
+
+      // Touch scroll support — swipe left/right on toolbar
+      let touchStartX = 0;
+      let scrollStart = 0;
+
+      actionGroup.addEventListener(
+        "touchstart",
+        (e: TouchEvent) => {
+          touchStartX = e.touches[0].clientX;
+          scrollStart = actionGroup.scrollLeft;
+        },
+        { passive: true }
+      );
+
+      actionGroup.addEventListener(
+        "touchmove",
+        (e: TouchEvent) => {
+          const dx = touchStartX - e.touches[0].clientX;
+          actionGroup.scrollLeft = scrollStart + dx;
+        },
+        { passive: true }
+      );
     } else {
       actionGroup.style.cssText = "";
       const themeToggle = actionGroup.querySelector(".theme-toggle") as HTMLElement | null;
-      if (themeToggle) themeToggle.style.display = "";
+      if (themeToggle) {
+        themeToggle.style.display = "";
+        themeToggle.style.visibility = "";
+      }
       if (content) content.style.paddingBottom = "";
     }
   }
@@ -270,7 +338,6 @@ const meta = {
       sharePopover.classList.add("mobile-teleported");
     }
 
-    // Position update function
     function updatePopoverPosition() {
       if (!shareTrigger || !sharePopover) return;
       const triggerRect = shareTrigger.getBoundingClientRect();
@@ -278,11 +345,9 @@ const meta = {
       const spaceBelow = window.innerHeight - triggerRect.bottom;
 
       if (spaceAbove > spaceBelow) {
-        // Upar dikhao
         sharePopover.style.bottom = window.innerHeight - triggerRect.top + 8 + "px";
         sharePopover.style.top = "auto";
       } else {
-        // Neeche dikhao
         sharePopover.style.top = triggerRect.bottom + 8 + "px";
         sharePopover.style.bottom = "auto";
       }
diff --git a/src/pages/panel.astro b/src/pages/panel.astro
index bf31ecd4..860773d6 100644
--- a/src/pages/panel.astro
+++ b/src/pages/panel.astro
@@ -433,17 +433,11 @@ const meta = {
 </script>
 
 <style>
-  /*
-   * ✅ #floating-panel-actions:
-   * - Desktop: header ke right side mein fixed position (settings button ke baad)
-   * - Mobile: fixed, top-right corner mein (mobile-panel-buttons ke saath aligned)
-   * Sirf EK instance hai — duplicate nahi hai.
-   */
-
+  /* Floating panel actions — default (desktop) */
   .floating-panel-actions {
     position: fixed;
-    top: 12px;
-    right: 5.5rem; /* settings ke left me */
+    top: 28px; /* 12px → 28px */
+    right: 5.5rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -454,20 +448,18 @@ const meta = {
   @media (min-width: 769px) {
     .right-header-buttons {
       position: fixed;
-      top: 12px;
+      top: 28px; /* 12px → 28px */
       right: 12.5rem;
       z-index: 9999;
     }
 
-    /* Mobile-only settings button desktop pe hide */
     .mobile-panel-buttons {
       display: none;
     }
 
-    /* Desktop popover position */
     .panel-tools-popover {
       position: fixed;
-      top: 60px;
+      top: 80px; /* 60px → 80px */
       right: 1rem;
       z-index: 10000;
     }
@@ -475,34 +467,29 @@ const meta = {
 
   /* Mobile layout */
   @media (max-width: 768px) {
-    /* Desktop header ke right-header-buttons mobile pe hide */
     .right-header-buttons {
       display: none;
     }
 
-    /* Settings — sabse left (Share+Help ke left mein) */
-    /* Order: [Settings] [Share] [Help] */
     .mobile-panel-buttons {
       display: flex;
       align-items: center;
       position: fixed;
-      top: 98px;
-      right: 8rem; /* Share+Help dono ki width cover karne ke liye */
+      top: 112px; /* 98px → 112px */
+      right: 8rem;
       z-index: 9999;
     }
 
-    /* Share + Help — right side pe */
     .floating-panel-actions {
       position: fixed;
-      top: 98px;
-      right: 0.7rem; /* sabse right corner */
+      top: 112px; /* 98px → 112px */
+      right: 0.7rem;
       z-index: 9999;
     }
 
-    /* Mobile popover — buttons ke neeche */
     .panel-tools-popover {
       position: fixed;
-      top: 145px;
+      top: 160px; /* 145px → 160px */
       right: 0.7rem;
       z-index: 10000;
     }

From 4058047e313ddb12a6964ad45a07a5c2c5c547f0 Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Sun, 7 Jun 2026 09:49:56 +0530
Subject: [PATCH 13/16] [RZA-260184-bugfix1]: feat: add shuffle and new puzzle
 buttons and fix popup layout in crossword game

---
 src/assets/styles/crossword2.css   | 159 ++----
 src/assets/styles/header.css       |  38 +-
 src/assets/styles/panel.css        |  18 +-
 src/assets/styles/setting.css      | 179 +++----
 src/assets/styles/share-button.css |  29 +-
 src/components/Help.astro          |  12 +-
 src/components/Puzzle2.astro       | 755 +++++++++++++++--------------
 src/components/Settings.astro      |  57 ++-
 src/pages/crossword.astro          |   2 +
 src/pages/draw.astro               |   8 +-
 src/pages/panel.astro              |   4 +-
 11 files changed, 604 insertions(+), 657 deletions(-)

diff --git a/src/assets/styles/crossword2.css b/src/assets/styles/crossword2.css
index 8ec1e8ab..b0db0f2c 100644
--- a/src/assets/styles/crossword2.css
+++ b/src/assets/styles/crossword2.css
@@ -16,10 +16,6 @@
   --border-radius: 16px;
   --box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  --word-font-color: #0f172a;
-  --word-found-color: #9ca3af;
-  --stats-button-clicked: #4ade80;
-  --stats-button-found: #facc15;
 }
 
 /* ── Layout ── */
@@ -34,16 +30,14 @@
   touch-action: none;
 }
 
-/* ── Grid ── */
+/* ── Grid — DESKTOP ── */
 .grid__puzzle {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 10px;
   padding: 24px;
   border-radius: var(--border-radius);
-  box-shadow:
-    var(--box-shadow),
-    0 0 0 15px rgba(99, 102, 241, 0.08);
+  box-shadow: var(--box-shadow), 0 0 0 15px rgba(99, 102, 241, 0.08);
   margin: 0 auto;
   width: 100%;
   max-width: 560px;
@@ -76,17 +70,11 @@
   min-height: 0;
 }
 
-.grid__puzzle .cell:active {
-  transform: scale(0.95);
-}
-
 .grid__puzzle .cell:hover {
   transform: translateY(-3px);
   background: #eef2ff;
   border-color: var(--primary-color);
-  box-shadow:
-    0 0 16px 4px var(--primary-color),
-    0 8px 20px rgba(99, 102, 241, 0.15);
+  box-shadow: 0 0 16px 4px var(--primary-color), 0 8px 20px rgba(99, 102, 241, 0.15);
 }
 
 .grid__puzzle .cell.selected {
@@ -248,15 +236,10 @@ details:not([open]) summary::after {
   font-size: clamp(12px, 2vw, 16px);
 }
 
-.stats-button:nth-child(1) {
-  background: linear-gradient(135deg, var(--primary-color), var(--accent6-color));
-}
-
 .stats-button:nth-child(2) {
   background: linear-gradient(135deg, var(--accent1-color), var(--accent7-color));
 }
 
-/* ── Hint ── */
 .hint-button {
   background: none;
   border: 2px solid var(--primary-color);
@@ -272,15 +255,6 @@ details:not([open]) summary::after {
   transition: var(--transition);
 }
 
-.hint-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
-}
-
-.hint-button:active {
-  transform: scale(0.95);
-}
-
 .hint-button.active {
   background: radial-gradient(circle, #fffacd 0%, #ffeb3b 100%);
   box-shadow: 0 0 20px 5px rgba(255, 235, 59, 0.6);
@@ -291,7 +265,6 @@ details:not([open]) summary::after {
   fill: #ff9800;
 }
 
-/* ── Buttons ── */
 .action-btn {
   border: 2px solid transparent;
   border-radius: var(--border-radius);
@@ -309,67 +282,59 @@ details:not([open]) summary::after {
   transition: var(--transition);
 }
 
-.action-btn:active {
-  transform: scale(0.95);
-}
-
 .btn-shuffle {
   background: linear-gradient(135deg, #0ea5e9, #6366f1);
 }
 
-.btn-shuffle:hover {
-  transform: translateY(-2px);
-  background: linear-gradient(135deg, #0284c7, #4f46e5);
-}
-
 .btn-new {
   background: linear-gradient(135deg, #10b981, #06b6d4);
 }
 
-.btn-new:hover {
-  transform: translateY(-2px);
-  background: linear-gradient(135deg, #059669, #0891b2);
-}
-
-/* ══════════════════════════════════════════
-   MOBILE — complete override
-   Cell size = (100vw - outer-pad - grid-pad - gaps) / 8
-   At 390px: (390 - 16 - 16 - 28) / 8 = 41px
-   Font ≈ 48% of 41px = ~20px  ✓
-   ══════════════════════════════════════════ */
+/* ══════════════════════════════
+   MOBILE
+   ══════════════════════════════ */
 @media (max-width: 768px) {
   .puzzle-container {
     padding: 8px;
   }
 
   .grid__puzzle {
-    /* Take full available width */
+    display: grid !important;
+    grid-template-columns: repeat(8, 1fr) !important;
+    grid-template-rows: repeat(8, 1fr) !important;
+    gap: 3px !important;
+    padding: 6px !important;
+    border-width: 2px !important;
+    border-radius: 10px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
     width: calc(100vw - 16px) !important;
     max-width: calc(100vw - 16px) !important;
-    min-width: 0;
+    height: calc(100vw - 16px) !important;
     margin: 0 !important;
-    padding: 8px !important;
-    gap: 4px !important;
-    border-width: 3px;
-    border-radius: 12px;
-    box-sizing: border-box;
-    grid-template-columns: repeat(8, 1fr) !important;
-    /* height is determined by cells — do NOT set aspect-ratio on grid */
+    box-sizing: border-box !important;
   }
 
   .grid__puzzle .cell {
-    /*
-      width of one cell (auto via 1fr, ~(100vw-60px)/8)
-      font = 48% of that
-    */
-    font-size: calc((100vw - 60px) / 8 * 0.48) !important;
-    aspect-ratio: 1 / 1;
-    border-radius: 6px !important;
-    border-width: 1.5px !important;
-    min-width: 0;
-    min-height: 0;
-    line-height: 1;
-    padding: 0;
+    width: 100% !important;
+    height: 100% !important;
+    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;
+    font-weight: 700 !important;
+    color: var(--text-color) !important;
+    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 {
@@ -390,8 +355,8 @@ details:not([open]) summary::after {
   }
 
   .hint-button {
-    width: 38px;
-    height: 38px;
+    width: 36px;
+    height: 36px;
   }
 
   details {
@@ -420,31 +385,11 @@ details:not([open]) summary::after {
   }
 }
 
-@media (max-width: 380px) {
+@media (max-width: 768px) and (orientation: landscape) {
   .grid__puzzle {
-    gap: 3px !important;
-    padding: 6px !important;
-  }
-
-  .grid__puzzle .cell {
-    font-size: calc((100vw - 48px) / 8 * 0.5) !important;
-    border-radius: 4px !important;
-    border-width: 1px !important;
-  }
-
-  .stats-button {
-    padding: 6px 7px;
-    font-size: 10px;
-  }
-
-  .action-btn {
-    padding: 6px 7px;
-    font-size: 10px;
-  }
-
-  .hint-button {
-    width: 32px;
-    height: 32px;
+    width: calc(100vh - 16px) !important;
+    max-width: calc(100vh - 16px) !important;
+    height: calc(100vh - 16px) !important;
   }
 }
 
@@ -453,22 +398,4 @@ details:not([open]) summary::after {
     animation: none !important;
     transition: none !important;
   }
-}
-
-@media (max-width: 768px) and (orientation: landscape) {
-  .grid__puzzle {
-    max-width: 50vh !important;
-    padding: 6px !important;
-  }
-}
-
-@media (prefers-contrast: high) {
-  .grid__puzzle .cell {
-    border-width: 3px;
-  }
-
-  .grid__puzzle .cell.selected {
-    border-color: #000;
-    outline: 2px solid #fff;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css
index b322e584..9fbf3f8a 100644
--- a/src/assets/styles/header.css
+++ b/src/assets/styles/header.css
@@ -187,7 +187,6 @@
     border-color 0.2s,
     box-shadow 0.2s;
   box-shadow: none;
-
   box-sizing: border-box;
 }
 
@@ -491,6 +490,11 @@
   color: var(--subtext, var(--text));
 }
 
+/* Desktop pe mobile-actions-bar hide — PEHLE declare karo */
+.mobile-actions-bar {
+  display: none;
+}
+
 /* ── Tablet ── */
 @media (max-width: 1024px) {
   .header {
@@ -584,11 +588,20 @@
     width: 100%;
   }
 
+  .mobile-actions-bar .share-button-container {
+    display: inline-flex !important;
+    align-items: center !important;
+    line-height: 0 !important;
+  }
+
   .mobile-actions-bar .share-trigger-button {
     width: 32px !important;
     height: 32px !important;
-    padding: 0 !important;
     min-width: 32px !important;
+    min-height: 32px !important;
+    max-width: 32px !important;
+    max-height: 32px !important;
+    padding: 0 !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
@@ -600,13 +613,15 @@
     margin: 0 !important;
   }
 
-  .mobile-actions-bar .help {
-    width: 32px !important;
-    height: 32px !important;
-    min-width: 32px !important;
-    padding: 0 !important;
-    font-size: 1rem !important;
-  }
+ .mobile-actions-bar .help {
+   width: 32px !important;
+   height: 32px !important;
+   min-width: 32px !important;
+   min-height: 32px !important;
+   max-height: 32px !important;
+   padding: 0 !important;
+   font-size: 1rem !important;
+ }
 
   .header-spacer {
     height: 130px;
@@ -633,11 +648,6 @@
   }
 }
 
-/* Desktop pe mobile-actions-bar hide */
-.mobile-actions-bar {
-  display: none;
-}
-
 /* ── Small Mobile ── */
 @media (max-width: 480px) {
   .header {
diff --git a/src/assets/styles/panel.css b/src/assets/styles/panel.css
index 30eefed9..72814685 100644
--- a/src/assets/styles/panel.css
+++ b/src/assets/styles/panel.css
@@ -262,12 +262,14 @@
   }
 }
 
-/* Styles for the header-right section and the settings button/popover */
+/* Settings button container */
 .settings-button-container {
   position: relative;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  vertical-align: middle;
+  
 }
 
 .settings-button {
@@ -275,27 +277,22 @@
   border: 1px solid var(--primary);
   color: var(--text-light);
   padding: 0;
-  /* 0.6rem → 0 */
   width: 44px;
-  /* 50px → 44px */
   height: 44px;
-  /* 50px → 44px */
   min-width: 44px;
-  /* 40px → 44px */
+  min-height: 44px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  /* add */
   transition: all var(--transition-speed) ease;
   cursor: pointer;
-  margin-top: 0;
   font-size: 16px;
 }
+
 .settings-button .settings-icon {
   width: 1.3em;
-  /* icon thoda bada */
   height: 1.3em;
   color: var(--primary);
   fill: currentColor;
@@ -407,8 +404,6 @@
 
 /* === Responsiveness === */
 @media (max-width: 768px) {
-
-  /* Header-right slot for mobile */
   [slot="header-right"] {
     justify-content: flex-end;
     width: 100%;
@@ -417,7 +412,6 @@
     gap: 0.5rem;
   }
 
-  /* Popover positioning for smaller screens */
   .panel-tools-popover {
     right: 1rem;
     left: auto;
diff --git a/src/assets/styles/setting.css b/src/assets/styles/setting.css
index 6493609f..a30b6cbf 100644
--- a/src/assets/styles/setting.css
+++ b/src/assets/styles/setting.css
@@ -1,153 +1,90 @@
 .container__setting {
-  container: setting/inline-size;
 
   .setting__trigger {
     position: fixed;
-    top: 10rem;
-    /* 6rem → 8rem, navbar ke neeche aaye */
+    top: 12rem;
     right: 1.5rem;
     width: 2.8rem;
-    /* fixed size */
     height: 2.8rem;
     border-radius: 50%;
     background-color: #7c3aed;
-    /* visible color */
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 999;
-    /* baaki elements ke upar */
-    transition: transform 330ms ease-in-out;
-    font-size: 1rem;
-    /* sane default */
+    z-index: 1000;
+    transition: transform 330ms ease-in-out, background-color 330ms ease;
+
+    &.open {
+      background-color: rgb(106, 202, 119);
+      transform: scale(1.05) rotate(45deg);
+    }
   }
 
   @media (max-width: 480px) {
     .setting__trigger {
-      top: 9rem;
+      top: 11rem;
       right: 1rem;
       width: 2.4rem;
       height: 2.4rem;
-      font-size: 1rem;
     }
   }
 
   .setting__panel {
-    position: fixed;
-    position-anchor: --setting;
-    top: calc(anchor(bottom) + 15px);
-    right: calc(anchor(left) + 10px);
-    justify-self: anchor-center;
-    width: 20rem;
-    height: 20rem;
-    background-color: hwb(20 68% 16%);
-    border-radius: 4px;
-    padding: 0.74rem;
-    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-    color: color(xyz 0 0 1);
-
-    &::backdrop {
-      background-color: hsl(0 0% 10% / 0.5);
-      backdrop-filter: blur(2px);
-    }
-
-    .control__group {
-      display: grid;
-      grid-auto-flow: row;
-      gap: 0.5rem;
-      width: 20rem;
-    }
-
-    button,
-    select {
-      background-color: color(xyz 0.05 0.05 0.09);
-      color: white;
-      border: none;
-      padding: 1.5rem;
-      cursor: pointer;
-      transition: transform 300ms ease-in-out;
-      appearance: auto;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 10px;
-      font-weight: 600;
-      font-size: 1.5rem;
-      letter-spacing: 0.01em;
-      touch-action: pinch-zoom;
-      border-radius: 9px;
-
-      &:hover:not(.close) {
-        background-color: color(xyz 0.02 0.01 0.02);
-        transform: translateY(-3px);
-      }
-
-      &.close {
-        width: 2rem;
-        height: 3rem;
-        justify-self: end;
-        border-radius: 6px;
-
-        &:hover {
-          font-size: 30px;
-        }
-      }
-    }
+    display: none;
+    background: white;
+    border: 2px solid #e2e8f0;
+    border-radius: 1rem;
+    padding: 1rem;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
+    /* position/size JS se aayega */
+  }
 
-    &[popover] {
-      position: fixed;
-      inset: unset;
-      width: max-content;
-      /*height: fit-content;*/
-      right: 0;
-      bottom: 0;
-      margin: auto;
-      overflow: auto;
-      color: CanvasText;
-      background-color: Canvas;
-      padding: 1rem;
-      border: solid;
-      border-radius: 1rem;
-      opacity: 0;
-      visibility: hidden;
-      transition:
-        translate 0.7s ease-out,
-        display 0.7s ease-out allow-discrete,
-        overlay 0.7s ease-out allow-discrete,
-        height 0.5s ease-in-out;
-      translate: 0 -2rem;
+  .setting__backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: hsl(0 0% 10% / 0.4);
+    backdrop-filter: blur(2px);
+    z-index: 9998;
+  }
 
-      &:popover-open {
-        opacity: 1;
-        visibility: visible;
-        translate: 0 0;
-        top: 40px;
-        bottom: 0;
-        translate: 0 0;
-        min-height: 30rem;
-        justify-content: center;
+  .control__group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    width: 100%;
+  }
 
-        :where(button, select) {
-          background: linear-gradient(90deg, rgb(17, 255, 247) 0%, rgb(165 39 241) 100%);
-          transform: scaleZ(1) rotate(5deg);
-          border-radius: 7px;
-        }
-      }
+  .control__group button,
+  .control__group select {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0.9rem 1rem;
+    border: none;
+    border-radius: 9px;
+    font-weight: 700;
+    font-size: 1.1rem;
+    cursor: pointer;
+    color: white;
+    background: linear-gradient(90deg, rgb(17, 255, 247), rgb(165, 39, 241));
+    transition: transform 200ms ease, opacity 200ms ease;
+  }
 
-      @starting-style {
-        opacity: 0;
-        visibility: hidden;
-      }
-    }
+  .control__group button:hover {
+    opacity: 0.9;
+    transform: translateY(-2px);
   }
 
-  &:has(:popover-open) {
-    .setting__trigger {
-      background-color: rgb(106, 202, 119);
-      transform: scale(1.05) rotate(45deg);
-    }
+  .control__group .close {
+    width: 2.2rem;
+    height: 2.2rem;
+    padding: 0;
+    font-size: 1rem;
+    border-radius: 6px;
+    align-self: flex-end;
+    background: #334155;
+    flex-shrink: 0;
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/share-button.css b/src/assets/styles/share-button.css
index 4b548247..944da9d8 100644
--- a/src/assets/styles/share-button.css
+++ b/src/assets/styles/share-button.css
@@ -12,34 +12,28 @@
 
 .share-button-container {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
 }
 
 .share-trigger-button {
   background-color: transparent;
   color: var(--primary);
   padding: 0;
-  /* 10px → 0 */
   width: 44px;
-  /* 50px → 44px */
   height: 44px;
-  /* 50px → 44px */
   border: 1px solid var(--primary);
   border-radius: 50%;
-  /* 50px → 50% */
   cursor: pointer;
   font-size: 16px;
   font-weight: 500;
   transition: all 0.2s ease-in-out;
   position: relative;
   display: flex;
-  /* add */
   align-items: center;
-  /* add */
   justify-content: center;
-  /* add */
   box-sizing: border-box;
-  /* add */
 }
 
 .share-trigger-button:hover {
@@ -235,21 +229,4 @@
 
 .copy-link-button:hover {
   background-color: #e0e0e0;
-}
-
-@media (max-width: 640px) {
-  .share-trigger-button {
-    width: 44px !important;
-    /* 32px → 44px */
-    height: 44px !important;
-    min-height: 44px !important;
-    max-height: 44px !important;
-    padding: 0 !important;
-  }
-
-  .share-trigger-button svg {
-    width: 18px !important;
-    /* 16px → 18px */
-    height: 18px !important;
-  }
 }
\ No newline at end of file
diff --git a/src/components/Help.astro b/src/components/Help.astro
index 3b909594..b982d17a 100644
--- a/src/components/Help.astro
+++ b/src/components/Help.astro
@@ -61,17 +61,21 @@ const { title, description } = Astro.props;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     font-weight: 600;
-    padding: 1.5rem;
-    width: 2rem;
-    height: 2rem;
+    padding: 0;
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
+    min-height: 44px;
     color: var(--primary);
     border-radius: 50%;
     border: 1.5px solid var(--primary);
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     position: relative;
+    box-sizing: border-box;
+    vertical-align: middle;
   }
 
   .help::after {
diff --git a/src/components/Puzzle2.astro b/src/components/Puzzle2.astro
index 52df0ea0..f92dc3bd 100644
--- a/src/components/Puzzle2.astro
+++ b/src/components/Puzzle2.astro
@@ -27,404 +27,447 @@ import HintIcon from "@/assets/icons/hint.svg";
   </div>
 
   <div id="grid" class="grid__puzzle"></div>
+</div>
 
-  <script type="module" is:inline>
-    // ── Fallback data agar fetch fail ho ──
-    const FALLBACK_DATA = [
-      {
-        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"]
-      }
+<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"]
+    }
+  ];
+
+  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 getWordDirection(cells) {
+    var r1 = cells[0][0],
+      c1 = cells[0][1];
+    var r2 = cells[cells.length - 1][0],
+      c2 = cells[cells.length - 1][1];
+    return r1 === r2 ? "horizontal" : c1 === c2 ? "vertical" : "diagonal";
+  }
+
+  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]
     ];
-
-    async function fetchCrosswordData() {
-      try {
-        const response = await fetch("/assets/json/cross.json");
-        if (!response.ok) throw new Error("HTTP " + response.status);
-        const data = await response.json();
-        if (!Array.isArray(data) || data.length === 0) throw new Error("Empty data");
-        console.log("cross.json loaded OK, sets:", data.length);
-        return data;
-      } catch (error) {
-        console.warn("cross.json fetch failed, using fallback:", error.message);
-        return FALLBACK_DATA;
+    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("");
+    }
 
-    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"
-    ];
-
-    const getRandomColor = () => {
-      const hue = Math.floor(Math.random() * 360);
-      return `hsla(${hue}, 85%, 72%, 0.75)`;
-    };
-
-    // ── Init after DOM + fetch ──
-    document.addEventListener("DOMContentLoaded", async () => {
-      const wordSets = await fetchCrosswordData();
-      let currentWordSetIndex = 0;
-
-      let state = {
-        difficulty: "easy",
-        grid: [],
-        size: 8,
-        selectedCells: [],
-        foundWords: [],
-        isDragging: false,
-        showSolution: false,
-        solutions: [],
-        clickCount: 0,
-        matchedCells: new Map(),
-        currentWordSet: wordSets[0],
-        solutionColors: new Map(),
-        wordColors: new Map()
-      };
-
-      // ── Grid generation ──
-      function generateRandomLetter() {
-        return String.fromCharCode(65 + Math.floor(Math.random() * 26));
+    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());
       }
+    }
 
-      function getWordDirection(cells) {
-        const [r1, c1] = cells[0];
-        const [r2, c2] = cells[cells.length - 1];
-        return r1 === r2 ? "horizontal" : c1 === c2 ? "vertical" : "diagonal";
+    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;
+
+    // Grid size calculate karo
+    var gridSize, cellSize;
+    if (isMobile) {
+      if (isLandscape) {
+        gridSize = window.innerHeight - 16;
+      } else {
+        gridSize = window.innerWidth - 16;
       }
+      cellSize = Math.floor((gridSize - 12 - 7 * 3) / 8); // padding 6px each side + gaps
+
+      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 = "";
+    }
 
-      function isValidLine(cells) {
-        if (cells.length < 2) return true;
-        const [r1, c1] = cells[0];
-        const [r2, c2] = cells[1];
-        const dr = r2 - r1,
-          dc = c2 - c1;
-        if (Math.abs(dr) > 1 || Math.abs(dc) > 1 || (dr === 0 && dc === 0)) return false;
-        for (let i = 2; i < cells.length; i++) {
-          if (cells[i][0] !== r1 + dr * i || cells[i][1] !== c1 + dc * 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;
+
+        // Mobile pe cell size JS se set karo
+        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.webkitUserSelect = "none";
+          cell.style.touchAction = "none";
+          cell.style.overflow = "hidden";
         }
-        return true;
-      }
 
-      function canPlaceWord(grid, word, row, col, dr, dc) {
-        const last_r = row + dr * (word.length - 1);
-        const last_c = col + dc * (word.length - 1);
-        if (last_r < 0 || last_r >= state.size || last_c < 0 || last_c >= state.size) return false;
-        for (let i = 0; i < word.length; i++) {
-          const cur = grid[row + dr * i][col + dc * i];
-          if (cur !== "" && cur !== word[i]) return false;
-        }
-        return true;
-      }
-
-      function placeWord(grid, word) {
-        const directions = [
-          [0, 1],
-          [1, 0],
-          [1, 1],
-          [1, -1]
-        ];
-        for (let attempt = 0; attempt < 200; attempt++) {
-          const [dr, dc] = 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, dr, dc)) {
-            const wordCells = [];
-            for (let i = 0; i < word.length; i++) {
-              const r = row + dr * i,
-                c = col + dc * 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 generatePuzzleWithCurrentWordSet() {
-        state.size = 8;
-
-        // Build empty grid
-        const newGrid = [];
-        for (let i = 0; i < state.size; i++) {
-          newGrid.push([]);
-          for (let j = 0; j < state.size; j++) {
-            newGrid[i].push("");
+        if (iSel) {
+          cell.classList.add("selected");
+          if (isMobile) {
+            cell.style.background = "var(--primary-color)";
+            cell.style.color = "#fff";
           }
         }
 
-        const words = state.currentWordSet[state.difficulty];
-        console.log("Generating puzzle with words:", words);
-
-        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 });
-            state.solutionColors.set(word, getRandomColor());
-          } else {
-            console.warn("Could not place word:", word);
+        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;
+            }
           }
         });
 
-        // Fill empty cells
-        for (let i = 0; i < state.size; i++) {
-          for (let j = 0; j < state.size; j++) {
-            if (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;
-
-        console.log("Grid generated:", state.grid.length, "rows");
-        updateDOM();
-      }
-
-      function generateNewPuzzle() {
-        currentWordSetIndex = (currentWordSetIndex + 1) % wordSets.length;
-        state.currentWordSet = wordSets[currentWordSetIndex];
-        generatePuzzleWithCurrentWordSet();
-      }
-
-      function generateRandomColors() {
-        state.solutionColors.clear();
-        const palette = [
-          "hsla(10,90%,75%,.75)",
-          "hsla(40,90%,75%,.75)",
-          "hsla(120,90%,75%,.75)",
-          "hsla(180,90%,75%,.75)",
-          "hsla(210,90%,75%,.75)",
-          "hsla(270,90%,75%,.75)",
-          "hsla(300,90%,75%,.75)",
-          "hsla(330,90%,75%,.75)",
-          "hsla(150,90%,75%,.75)"
-        ];
-        let idx = 0;
-        state.solutions.forEach((s) => state.solutionColors.set(s.word, palette[idx++ % palette.length]));
+        gridEl.appendChild(cell);
       }
+    }
 
-      function isValidNextCell(a, b) {
-        return Math.abs(a[0] - b[0]) <= 1 && Math.abs(a[1] - b[1]) <= 1;
-      }
+    document.getElementById("clickCount").textContent = state.clickCount;
+    document.getElementById("foundCount").textContent = state.foundWords.length;
+    document.getElementById("totalWords").textContent = state.currentWordSet[state.difficulty].length;
+
+    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>";
+    }
+    document.getElementById("wordList").innerHTML = html;
+    document.getElementById("solutionBtn").classList.toggle("active", state.showSolution);
+  }
+
+  // ── Events ──
+  function setupEvents() {
+    var gridEl = document.getElementById("grid");
+
+    gridEl.addEventListener("mousedown", function (e) {
+      var coords = getCoords(e.target);
+      if (!coords) return;
+      state.isDragging = true;
+      state.selectedCells = [coords];
+      state.clickCount++;
+      renderDOM();
+    });
 
-      function checkForWord(selection) {
-        if (selection.length < 3) return false;
-        if (!isValidLine(selection)) return false;
-        const word = selection.map(([r, c]) => state.grid[r][c]).join("");
-        const rev = word.split("").reverse().join("");
-        const list = state.currentWordSet[state.difficulty];
-        let found = null;
-        if (list.includes(word) && !state.foundWords.includes(word)) found = word;
-        else if (list.includes(rev) && !state.foundWords.includes(rev)) found = rev;
-        if (found) {
-          state.foundWords.push(found);
-          if (!state.wordColors.has(found))
-            state.wordColors.set(found, colorClasses[state.wordColors.size % colorClasses.length]);
-          state.matchedCells.set(found, [...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 getCellCoords(el) {
-        if (!el?.dataset?.coords) return null;
-        return el.dataset.coords.split("-").map(Number);
       }
-
-      // ── DOM update ──
-      function updateDOM() {
-        const gridEl = document.getElementById("grid");
-
-        // Only set display — let CSS handle grid-template-columns
-        // (inline gridTemplateColumns overrides the CSS custom-property-based mobile layout)
-        gridEl.style.display = "grid";
-
-        gridEl.innerHTML = "";
-
-        state.grid.forEach((row, i) => {
-          row.forEach((letter, j) => {
-            const cell = document.createElement("div");
-            cell.className = "cell";
-            cell.textContent = letter;
-            cell.dataset.coords = `${i}-${j}`;
-
-            // Selected
-            if (state.selectedCells.some(([r, c]) => r === i && c === j)) cell.classList.add("selected");
-
-            // Matched word color
-            for (const [word, cells] of state.matchedCells.entries()) {
-              if (cells.some(([r, c]) => r === i && c === j)) {
-                cell.classList.add("match");
-                const cc = state.wordColors.get(word);
-                if (cc) cell.classList.add(cc);
-                break;
-              }
-            }
-
-            // Solution hint
-            if (state.showSolution) {
-              for (const sol of state.solutions) {
-                if (sol.cells.some(([r, c]) => r === i && c === j)) {
-                  const sc = state.solutionColors.get(sol.word);
-                  if (sc) cell.style.backgroundColor = sc;
-                  break;
-                }
-              }
-            }
-
-            gridEl.appendChild(cell);
-          });
-        });
-
-        document.getElementById("clickCount").textContent = state.clickCount;
-        document.getElementById("foundCount").textContent = state.foundWords.length;
-        document.getElementById("totalWords").textContent = state.currentWordSet[state.difficulty].length;
-
-        document.getElementById("wordList").innerHTML = state.currentWordSet[state.difficulty]
-          .map((word) => {
-            const found = state.foundWords.includes(word);
-            const cc = state.wordColors.get(word) || "";
-            const sc = state.showSolution ? state.solutionColors.get(word) : null;
-            const style = sc ? `style="background-color:${sc};"` : "";
-            return `<span class="word ${found ? "found " + cc : ""}" ${style}>${word}</span>`;
-          })
-          .join("");
-
-        document.getElementById("solutionBtn").classList.toggle("active", state.showSolution);
+      if (!already) {
+        state.selectedCells.push(coords);
+        renderDOM();
       }
+    });
 
-      // ── Event handlers ──
-      const gridEl = document.getElementById("grid");
+    document.addEventListener("mouseup", function () {
+      if (!state.isDragging) return;
+      state.isDragging = false;
+      if (!checkWord(state.selectedCells)) state.selectedCells = [];
+      renderDOM();
+    });
 
-      gridEl.addEventListener("mousedown", (e) => {
-        const coords = getCellCoords(e.target);
+    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++;
-        updateDOM();
-      });
+        renderDOM();
+      },
+      { passive: false }
+    );
 
-      gridEl.addEventListener("mousemove", (e) => {
+    gridEl.addEventListener(
+      "touchmove",
+      function (e) {
+        e.preventDefault();
         if (!state.isDragging) return;
-        const coords = getCellCoords(e.target);
+        var t = e.touches[0];
+        var el = document.elementFromPoint(t.clientX, t.clientY);
+        var coords = getCoords(el);
         if (!coords) return;
-        const last = state.selectedCells[state.selectedCells.length - 1];
-        if (!last || !isValidNextCell(last, coords)) return;
-        if (!state.selectedCells.some(([r, c]) => r === coords[0] && c === coords[1])) {
+        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);
-          updateDOM();
+          renderDOM();
         }
-      });
+      },
+      { passive: false }
+    );
 
-      document.addEventListener("mouseup", () => {
+    gridEl.addEventListener(
+      "touchend",
+      function (e) {
+        e.preventDefault();
         if (!state.isDragging) return;
         state.isDragging = false;
-        if (!checkForWord(state.selectedCells)) state.selectedCells = [];
-        updateDOM();
-      });
-
-      gridEl.addEventListener(
-        "touchstart",
-        (e) => {
-          e.preventDefault();
-          const t = e.touches[0];
-          const el = document.elementFromPoint(t.clientX, t.clientY);
-          const coords = getCellCoords(el);
-          if (!coords) return;
-          state.isDragging = true;
-          state.selectedCells = [coords];
-          state.clickCount++;
-          updateDOM();
-        },
-        { passive: false }
-      );
-
-      gridEl.addEventListener(
-        "touchmove",
-        (e) => {
-          e.preventDefault();
-          if (!state.isDragging) return;
-          const t = e.touches[0];
-          const el = document.elementFromPoint(t.clientX, t.clientY);
-          const coords = getCellCoords(el);
-          if (!coords) return;
-          const last = state.selectedCells[state.selectedCells.length - 1];
-          if (!last || !isValidNextCell(last, coords)) return;
-          if (!state.selectedCells.some(([r, c]) => r === coords[0] && c === coords[1])) {
-            state.selectedCells.push(coords);
-            updateDOM();
-          }
-        },
-        { passive: false }
-      );
-
-      gridEl.addEventListener(
-        "touchend",
-        (e) => {
-          e.preventDefault();
-          if (!state.isDragging) return;
-          state.isDragging = false;
-          if (!checkForWord(state.selectedCells)) state.selectedCells = [];
-          updateDOM();
-        },
-        { passive: false }
-      );
-
-      document.getElementById("level").addEventListener("change", (e) => {
-        state.difficulty = e.target.value;
-        generatePuzzleWithCurrentWordSet();
-      });
-
-      document.getElementById("new").addEventListener("click", generateNewPuzzle);
-      document.getElementById("shuffle").addEventListener("click", generatePuzzleWithCurrentWordSet);
-
-      document.getElementById("solutionBtn").addEventListener("click", () => {
-        generateRandomColors();
-        state.showSolution = !state.showSolution;
-        updateDOM();
-      });
-
-      document.getElementById("clear").addEventListener("click", () => {
-        state.selectedCells = [];
-        state.foundWords = [];
-        state.matchedCells.clear();
-        state.wordColors.clear();
-        state.isDragging = false;
-        updateDOM();
-      });
+        if (!checkWord(state.selectedCells)) state.selectedCells = [];
+        renderDOM();
+      },
+      { passive: false }
+    );
+
+    document.getElementById("level").addEventListener("change", function (e) {
+      state.difficulty = e.target.value;
+      generatePuzzle();
+    });
 
-      document.getElementById("s-new")?.addEventListener("click", generateNewPuzzle);
-      document.getElementById("s-shuffle")?.addEventListener("click", generatePuzzleWithCurrentWordSet);
+    document.getElementById("new").addEventListener("click", newPuzzle);
+    document.getElementById("shuffle").addEventListener("click", generatePuzzle);
 
-      // ── Start ──
-      generatePuzzleWithCurrentWordSet();
+    document.getElementById("solutionBtn").addEventListener("click", function () {
+      state.showSolution = !state.showSolution;
+      renderDOM();
     });
-  </script>
-</div>
+
+    document.getElementById("clear").addEventListener("click", function () {
+      state.selectedCells = [];
+      state.foundWords = [];
+      state.matchedCells = new Map();
+      state.wordColors = new Map();
+      state.isDragging = false;
+      renderDOM();
+    });
+
+    var sNew = document.getElementById("s-new");
+    var sShuffle = document.getElementById("s-shuffle");
+    if (sNew) sNew.addEventListener("click", newPuzzle);
+    if (sShuffle) sShuffle.addEventListener("click", generatePuzzle);
+  }
+
+  // ── Start — no async, no DOMContentLoaded needed ──
+  setupEvents();
+  generatePuzzle();
+
+  // cross.json load karo background mein — agar mile toh use karo
+  fetch("/assets/json/cross.json")
+    .then(function (r) {
+      return r.json();
+    })
+    .then(function (data) {
+      if (Array.isArray(data) && data.length > 0) {
+        WORD_SETS = data;
+        state.currentWordSet = WORD_SETS[0];
+        generatePuzzle();
+      }
+    })
+    .catch(function () {});
+</script>
diff --git a/src/components/Settings.astro b/src/components/Settings.astro
index 36d57d66..569a32da 100644
--- a/src/components/Settings.astro
+++ b/src/components/Settings.astro
@@ -4,15 +4,15 @@ import "@/assets/styles/setting.css";
 ---
 
 <div class="container__setting">
-  <button id="trigger" class="setting__trigger" popovertarget="panel" popovertargetaction="show">
+  <button id="trigger" class="setting__trigger">
     <SettingIcon />
   </button>
-  <div class="setting__panel" id="panel" popover="hint">
+  <div class="setting__panel" id="panel">
     <div class="control__group">
-      <button id="close" class="close" popovertarget="panel" popovertargetaction="hide">X</button>
+      <button id="close" class="close">✕</button>
       <button id="s-new" class="add">New Puzzle</button>
       <button id="s-shuffle" class="shuffle">Shuffle</button>
-      <button id="clear" class="clear"> Clear </button>
+      <button id="clear" class="clear">Clear</button>
       <select id="level" class="level">
         <option value="easy">Easy (Ages 3-5)</option>
         <option value="medium">Medium (Ages 5-6)</option>
@@ -20,4 +20,53 @@ import "@/assets/styles/setting.css";
       </select>
     </div>
   </div>
+  <div class="setting__backdrop" id="backdrop"></div>
 </div>
+
+<script is:inline>
+  (function () {
+    const trigger = document.getElementById("trigger");
+    const panel = document.getElementById("panel");
+    const backdrop = document.getElementById("backdrop");
+    const closeBtn = document.getElementById("close");
+    if (!trigger || !panel) return;
+
+    function openPanel() {
+      const rect = trigger.getBoundingClientRect();
+      const MARGIN = 8;
+      const PANEL_W = 260; // fixed width
+
+      // trigger ke right edge se left calculate karo
+      // panel ka right edge = trigger ka right edge
+      const leftPos = rect.right - PANEL_W;
+
+      panel.style.cssText = `
+        display: block;
+        position: fixed;
+        top: ${rect.bottom + MARGIN}px;
+        left: ${Math.max(MARGIN, leftPos)}px;
+        width: ${PANEL_W}px;
+        z-index: 9999;
+        max-height: 80vh;
+        overflow-y: auto;
+        box-sizing: border-box;
+      `;
+
+      backdrop.style.display = "block";
+      trigger.classList.add("open");
+    }
+
+    function closePanel() {
+      panel.style.display = "none";
+      backdrop.style.display = "none";
+      trigger.classList.remove("open");
+    }
+
+    trigger.addEventListener("click", () => (panel.style.display === "block" ? closePanel() : openPanel()));
+    if (closeBtn) closeBtn.addEventListener("click", closePanel);
+    if (backdrop) backdrop.addEventListener("click", closePanel);
+    window.addEventListener("resize", () => {
+      if (panel.style.display === "block") openPanel();
+    });
+  })();
+</script>
diff --git a/src/pages/crossword.astro b/src/pages/crossword.astro
index 9bff15cf..2cefda35 100644
--- a/src/pages/crossword.astro
+++ b/src/pages/crossword.astro
@@ -5,6 +5,7 @@ import Help from "@/components/Help.astro";
 import Puzzle2 from "@/components/Puzzle2.astro";
 import SharePopover from "@/components/ShareButton.astro";
 import BaseLayout from "@/layouts/Base";
+import MobileSplash from "@/components/MobileSplash.astro";
 
 const meta = {
   title: "Crossword",
@@ -14,6 +15,7 @@ const meta = {
 ---
 
 <BaseLayout meta={meta}>
+  <MobileSplash stay={true} />
   <Back />
   <Fragment slot="header-right">
     <SharePopover />
diff --git a/src/pages/draw.astro b/src/pages/draw.astro
index 0f3260e1..1ae2efe0 100644
--- a/src/pages/draw.astro
+++ b/src/pages/draw.astro
@@ -81,10 +81,14 @@ const meta = {
   :global(.help) {
     width: 2.2rem !important;
     height: 2.2rem !important;
-    font-size: 1rem !important;
+    min-width: 2.2rem !important; 
+    min-height: 2.2rem !important;
+    max-width: 2.2rem !important; 
+    max-height: 2.2rem !important;
+    font-size: 0.9rem !important;
     padding: 0 !important;
+    box-sizing: border-box !important;
   }
-
   :global(#voice-dropdown) {
     height: 2.2rem !important;
     font-size: 0.75rem !important;
diff --git a/src/pages/panel.astro b/src/pages/panel.astro
index 860773d6..adbb10f3 100644
--- a/src/pages/panel.astro
+++ b/src/pages/panel.astro
@@ -436,7 +436,7 @@ const meta = {
   /* Floating panel actions — default (desktop) */
   .floating-panel-actions {
     position: fixed;
-    top: 28px; /* 12px → 28px */
+    top: 18px; 
     right: 5.5rem;
     display: flex;
     align-items: center;
@@ -448,7 +448,7 @@ const meta = {
   @media (min-width: 769px) {
     .right-header-buttons {
       position: fixed;
-      top: 28px; /* 12px → 28px */
+      top: 18px; 
       right: 12.5rem;
       z-index: 9999;
     }

From 4168586f99d8ae8362e26db2cf93ef1da337d578 Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Tue, 9 Jun 2026 13:18:14 +0530
Subject: [PATCH 14/16] [RZA-260184-bugfix1]: fix: resolve draw game
 functionality issues

---
 src/pages/draw.astro | 75 ++++++++++++++++++++++++++------------------
 1 file changed, 45 insertions(+), 30 deletions(-)

diff --git a/src/pages/draw.astro b/src/pages/draw.astro
index 1ae2efe0..de481b4e 100644
--- a/src/pages/draw.astro
+++ b/src/pages/draw.astro
@@ -81,14 +81,15 @@ const meta = {
   :global(.help) {
     width: 2.2rem !important;
     height: 2.2rem !important;
-    min-width: 2.2rem !important; 
+    min-width: 2.2rem !important;
     min-height: 2.2rem !important;
-    max-width: 2.2rem !important; 
+    max-width: 2.2rem !important;
     max-height: 2.2rem !important;
     font-size: 0.9rem !important;
     padding: 0 !important;
     box-sizing: border-box !important;
   }
+
   :global(#voice-dropdown) {
     height: 2.2rem !important;
     font-size: 0.75rem !important;
@@ -134,11 +135,18 @@ const meta = {
     height: 0.85rem !important;
   }
 
-  :global(.theme-toggle) {
+  /* Sirf header wala theme toggle size fix — drawer wala affect nahi hoga */
+  :global(#headerThemeToggle) {
     width: 2.2rem !important;
     height: 2.2rem !important;
   }
 
+  /* Mobile drawer toggle — hamesha visible */
+  :global(#mobileThemeToggle) {
+    display: flex !important;
+    visibility: visible !important;
+  }
+
   :global(#keyboard-trigger) {
     width: 2.2rem !important;
     height: 2.2rem !important;
@@ -151,7 +159,7 @@ const meta = {
     :global(.help),
     :global(#keyboard-trigger),
     :global(.share-trigger-button),
-    :global(.theme-toggle) {
+    :global(#headerThemeToggle) {
       width: 2.2rem !important;
       height: 2.2rem !important;
       min-width: 2.2rem !important;
@@ -190,13 +198,7 @@ const meta = {
       align-items: center !important;
     }
 
-    /* Theme toggle — mobile pe bilkul hide */
-    :global(.theme-toggle) {
-      display: none !important;
-      visibility: hidden !important;
-    }
-
-    /* ✅ FIX: Action group — mask bilkul hatao, pehla button poora dikhega */
+    /* Action group — mask bilkul hatao */
     :global(.action__group) {
       overflow-x: auto !important;
       overflow-y: visible !important;
@@ -207,7 +209,6 @@ const meta = {
       mask-image: none !important;
     }
 
-    /* Webkit scrollbar hide */
     :global(.action__group::-webkit-scrollbar) {
       display: none !important;
     }
@@ -250,7 +251,6 @@ const meta = {
       actionGroup.style.left = "0";
       actionGroup.style.width = "100%";
       actionGroup.style.background = "var(--background)";
-      // ✅ FIX: Left padding 0.5rem — pehla button left edge se chipka na rahe
       actionGroup.style.padding = "0.4rem 0rem 0.4rem 0.5rem";
       actionGroup.style.zIndex = "998";
       actionGroup.style.borderBottom = "1px solid rgba(124,58,237,0.15)";
@@ -262,15 +262,14 @@ const meta = {
       actionGroup.style.overflowY = "visible";
       actionGroup.style.scrollbarWidth = "none";
       actionGroup.style.scrollBehavior = "smooth";
-      // ✅ FIX: Mask bilkul hatao — pehla button ab poora visible rahega
       actionGroup.style.webkitMaskImage = "none";
       (actionGroup.style as any).maskImage = "none";
 
-      // Theme toggle — CSS se already hidden, JS se bhi ensure
-      const themeToggle = actionGroup.querySelector(".theme-toggle") as HTMLElement | null;
-      if (themeToggle) {
-        themeToggle.style.display = "none";
-        themeToggle.style.visibility = "hidden";
+      // Sirf #headerThemeToggle hide karo — #mobileThemeToggle drawer mein safe hai
+      const headerThemeToggle = actionGroup.querySelector("#headerThemeToggle") as HTMLElement | null;
+      if (headerThemeToggle) {
+        headerThemeToggle.style.display = "none";
+        headerThemeToggle.style.visibility = "hidden";
       }
 
       // Hamburger ke saath overlap na ho — right padding
@@ -280,7 +279,6 @@ const meta = {
         actionGroup.style.paddingRight = window.innerWidth - hamRect.left + 8 + "px";
       }
 
-      // Scroll to START (left) so first buttons are always visible
       setTimeout(() => {
         actionGroup.scrollLeft = 0;
       }, 50);
@@ -288,8 +286,12 @@ const meta = {
       setTimeout(() => {
         const spacer = document.getElementById("headerSpacer");
         if (spacer) {
-          const stripBottom = actionGroup.getBoundingClientRect().bottom;
-          spacer.style.setProperty("height", stripBottom + "px", "important");
+          // actionGroup position:fixed hai — .bottom = viewport top se toolbar bottom tak
+          // Yahi exact spacer height honi chahiye
+          const toolbarBottom = actionGroup.getBoundingClientRect().bottom;
+          spacer.style.setProperty("height", toolbarBottom + "px", "important");
+          spacer.style.setProperty("margin", "0", "important");
+          spacer.style.setProperty("padding", "0", "important");
         }
         if (content && vkContainer) {
           const vkH = vkContainer.getBoundingClientRect().height;
@@ -297,7 +299,7 @@ const meta = {
         }
       }, 100);
 
-      // Touch scroll support — swipe left/right on toolbar
+      // Touch scroll support
       let touchStartX = 0;
       let scrollStart = 0;
 
@@ -319,12 +321,8 @@ const meta = {
         { passive: true }
       );
     } else {
+      // Desktop: sab styles reset
       actionGroup.style.cssText = "";
-      const themeToggle = actionGroup.querySelector(".theme-toggle") as HTMLElement | null;
-      if (themeToggle) {
-        themeToggle.style.display = "";
-        themeToggle.style.visibility = "";
-      }
       if (content) content.style.paddingBottom = "";
     }
   }
@@ -336,7 +334,6 @@ const meta = {
     const sharePopover = document.getElementById("sharePopover") as HTMLDivElement | null;
     if (!shareTrigger || !sharePopover) return;
 
-    // Popover ko body mein move karo taaki overflow clip na ho
     if (!sharePopover.classList.contains("mobile-teleported")) {
       document.body.appendChild(sharePopover);
       sharePopover.classList.add("mobile-teleported");
@@ -371,8 +368,26 @@ const meta = {
     fixSharePopover();
   }
 
+  // Header.astro ka updateSpacer draw page pe galat height set karta hai
+  // Isliye draw page apna spacer baad mein re-set karta hai
+  function overrideSpacer() {
+    if (window.innerWidth > 640) return;
+    const actionGroup = document.querySelector(".action__group") as HTMLElement | null;
+    const spacer = document.getElementById("headerSpacer");
+    if (!actionGroup || !spacer) return;
+    const toolbarBottom = actionGroup.getBoundingClientRect().bottom;
+    if (toolbarBottom > 0) {
+      spacer.style.setProperty("height", toolbarBottom + "px", "important");
+    }
+  }
+
   document.addEventListener("DOMContentLoaded", init);
   window.addEventListener("resize", () => handleControlsPosition());
-  window.addEventListener("load", init);
+  window.addEventListener("load", () => {
+    init();
+    setTimeout(overrideSpacer, 200);
+  });
   document.addEventListener("astro:page-load", init);
+  // Header updateSpacer ke baad apna spacer dobara set karo
+  window.addEventListener("load", () => setTimeout(overrideSpacer, 300));
 </script>

From 6c202f41e7fb6c6dbfb102e433fb565f24e1c3e6 Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Wed, 10 Jun 2026 11:10:34 +0530
Subject: [PATCH 15/16] [RZA-260184-bugfix1]: feat: add and integrate
 brand/Brand Address page

---
 public/assets/js/brand.js          |  419 +++++++++++
 src/assets/styles/brand.css        | 1045 ++++++++++++++++++++++++++++
 src/assets/styles/crossword2.css   |   10 +-
 src/assets/styles/header.css       |   20 +-
 src/assets/styles/panel.css        |    9 +-
 src/assets/styles/setting.css      |   11 +-
 src/assets/styles/share-button.css |    2 +-
 src/layouts/common/Header.astro    |   22 +-
 src/pages/brand.astro              |  154 ++++
 src/pages/panel.astro              |    4 +-
 10 files changed, 1660 insertions(+), 36 deletions(-)
 create mode 100644 public/assets/js/brand.js
 create mode 100644 src/assets/styles/brand.css
 create mode 100644 src/pages/brand.astro

diff --git a/public/assets/js/brand.js b/public/assets/js/brand.js
new file mode 100644
index 00000000..6ee68d45
--- /dev/null
+++ b/public/assets/js/brand.js
@@ -0,0 +1,419 @@
+// ===== BRAND DATA (6 Real Examples) =====
+const defaultBrands = [
+  {
+    name: "Apple",
+    tagline: "Think Different",
+    industry: "Technology",
+    founded: 1976,
+    hq: "Cupertino, California",
+    colors: ["#000000", "#ffffff", "#a2aaad"],
+    description:
+      "Apple Inc. is a global technology leader that designs, manufactures and sells smartphones, computers, tablets, wearables and services. Known for its iconic iPhone, Mac, iPad, and the App Store ecosystem.",
+    tags: ["tech", "innovation", "premium", "consumer electronics", "software"],
+    emoji: "🍎"
+  },
+  {
+    name: "Nike",
+    tagline: "Just Do It",
+    industry: "Sportswear & Lifestyle",
+    founded: 1964,
+    hq: "Beaverton, Oregon",
+    colors: ["#111111", "#fa5400", "#ffffff"],
+    description:
+      "Nike is the world's leading athletic footwear and apparel brand, inspiring athletes through innovative performance products and powerful storytelling.",
+    tags: ["fashion", "lifestyle", "sports", "footwear", "apparel"],
+    emoji: "✔️"
+  },
+  {
+    name: "Coca-Cola",
+    tagline: "Open Happiness",
+    industry: "Beverages",
+    founded: 1892,
+    hq: "Atlanta, Georgia",
+    colors: ["#f40009", "#ffffff", "#000000"],
+    description:
+      "The Coca-Cola Company is the world's largest beverage corporation, with over 500 brands sold in more than 200 countries.",
+    tags: ["food", "beverages", "fmcg", "global", "iconic"],
+    emoji: "🥤"
+  },
+  {
+    name: "Tesla",
+    tagline: "Accelerating the World's Transition to Sustainable Energy",
+    industry: "Electric Vehicles & Energy",
+    founded: 2003,
+    hq: "Austin, Texas",
+    colors: ["#cc0000", "#000000", "#ffffff"],
+    description:
+      "Tesla designs and manufactures electric vehicles, battery energy storage, solar panels and solar roof tiles.",
+    tags: ["auto", "tech", "ev", "innovation", "sustainability"],
+    emoji: "⚡"
+  },
+  {
+    name: "Louis Vuitton",
+    tagline: "The Art of Travel",
+    industry: "Luxury Fashion",
+    founded: 1854,
+    hq: "Paris, France",
+    colors: ["#b08850", "#1a1a1a", "#f5f0e8"],
+    description:
+      "Louis Vuitton is a French luxury fashion house and the flagship brand of LVMH. Famous for its LV monogram on luggage, handbags, and leather goods.",
+    tags: ["fashion", "luxury", "lifestyle", "premium", "heritage"],
+    emoji: "👜"
+  },
+  {
+    name: "Spotify",
+    tagline: "Music for Everyone",
+    industry: "Music & Streaming",
+    founded: 2006,
+    hq: "Stockholm, Sweden",
+    colors: ["#1db954", "#191414", "#ffffff"],
+    description:
+      "Spotify is the world's largest music streaming service with over 600 million users offering songs, podcasts, and audiobooks.",
+    tags: ["tech", "music", "streaming", "entertainment", "lifestyle"],
+    emoji: "🎵"
+  }
+];
+
+// ===== STATE =====
+let brands = JSON.parse(localStorage.getItem("brandvault_brands")) || [...defaultBrands];
+let currentFilter = "all";
+let currentSearch = "";
+let detailIndex = -1;
+
+// ===== TAG COLORS =====
+const tagColors = [
+  { bg: "rgba(99,102,241,0.18)", border: "rgba(99,102,241,0.5)", text: "#a78bfa" },
+  { bg: "rgba(6,182,212,0.15)", border: "rgba(6,182,212,0.5)", text: "#22d3ee" },
+  { bg: "rgba(244,114,182,0.15)", border: "rgba(244,114,182,0.5)", text: "#f472b6" },
+  { bg: "rgba(45,212,191,0.15)", border: "rgba(45,212,191,0.5)", text: "#2dd4bf" },
+  { bg: "rgba(251,191,36,0.15)", border: "rgba(251,191,36,0.4)", text: "#fbbf24" },
+  { bg: "rgba(52,211,153,0.15)", border: "rgba(52,211,153,0.4)", text: "#34d399" }
+];
+
+function getTagColor(tag) {
+  let hash = 0;
+  for (let c of tag) hash = (hash * 31 + c.charCodeAt(0)) % tagColors.length;
+  return tagColors[Math.abs(hash) % tagColors.length];
+}
+
+// ===== SAVE TO LOCALSTORAGE =====
+function save() {
+  localStorage.setItem("brandvault_brands", JSON.stringify(brands));
+}
+
+// ===== FILTER LOGIC =====
+function getFiltered() {
+  const q = currentSearch.toLowerCase().trim();
+  return brands.filter((b) => {
+    const matchTag = currentFilter === "all" || b.tags.some((t) => t.toLowerCase().includes(currentFilter));
+    const matchSearch =
+      !q ||
+      b.name.toLowerCase().includes(q) ||
+      (b.tagline || "").toLowerCase().includes(q) ||
+      (b.industry || "").toLowerCase().includes(q) ||
+      (b.description || "").toLowerCase().includes(q) ||
+      b.tags.some((t) => t.toLowerCase().includes(q));
+    return matchTag && matchSearch;
+  });
+}
+
+// ===== RENDER CARDS =====
+function renderCards() {
+  const grid = document.getElementById("brandGrid");
+  const noRes = document.getElementById("noResults");
+  const filtered = getFiltered();
+
+  grid.innerHTML = "";
+
+  if (filtered.length === 0) {
+    noRes.classList.remove("hidden");
+  } else {
+    noRes.classList.add("hidden");
+  }
+
+  filtered.forEach((brand, fi) => {
+    const realIdx = brands.indexOf(brand);
+    const card = document.createElement("div");
+    card.className = "brand-card";
+    card.style.animationDelay = `${fi * 0.06}s`;
+
+    const c1 = brand.colors[0] || "#6366f1";
+    const c2 = brand.colors[1] || "#06b6d4";
+
+    const tagsHTML = brand.tags
+      .slice(0, 4)
+      .map((t) => {
+        const col = getTagColor(t);
+        return `<span class="tag-pill" style="background:${col.bg};border-color:${col.border};color:${col.text}">${t}</span>`;
+      })
+      .join("");
+
+    const dotsHTML = brand.colors
+      .map((c) => `<span class="color-dot" style="background:${c}" title="${c}"></span>`)
+      .join("");
+
+    card.innerHTML = `
+      <div class="card-top">
+        <div class="brand-emoji" style="background:linear-gradient(135deg,${c1}33,${c2}44)">
+          ${brand.emoji || "🏷️"}
+        </div>
+        <div class="brand-info">
+          <div class="brand-name">${brand.name}</div>
+          <div class="brand-tagline">${brand.tagline || "—"}</div>
+        </div>
+      </div>
+      <div class="card-meta">
+        <div class="meta-item">
+          <span class="meta-label">Industry</span>
+          <span class="meta-value">${brand.industry || "—"}</span>
+        </div>
+        <div class="meta-item">
+          <span class="meta-label">Founded</span>
+          <span class="meta-value">${brand.founded || "—"}</span>
+        </div>
+        <div class="meta-item">
+          <span class="meta-label">HQ</span>
+          <span class="meta-value">${brand.hq || "—"}</span>
+        </div>
+      </div>
+      ${brand.description ? `<div class="brand-desc">${brand.description}</div>` : ""}
+      ${dotsHTML ? `<div class="color-dots">${dotsHTML}</div>` : ""}
+      <div class="card-tags">${tagsHTML}</div>
+      <div class="card-actions">
+        <button class="action-btn edit-btn" data-idx="${realIdx}">
+          <i class="fa-solid fa-pen"></i> Edit
+        </button>
+        <button class="action-btn del-btn" data-idx="${realIdx}">
+          <i class="fa-solid fa-trash"></i> Delete
+        </button>
+      </div>
+    `;
+
+    card.addEventListener("click", (e) => {
+      if (!e.target.closest(".card-actions")) openDetail(realIdx);
+    });
+
+    grid.appendChild(card);
+  });
+
+  // Action button listeners
+  document.querySelectorAll(".edit-btn").forEach((btn) => {
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      openEditModal(parseInt(btn.dataset.idx));
+    });
+  });
+  document.querySelectorAll(".del-btn").forEach((btn) => {
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      deleteBrand(parseInt(btn.dataset.idx));
+    });
+  });
+
+  updateStats();
+}
+
+// ===== STATS =====
+function updateStats() {
+  const filtered = getFiltered();
+  document.getElementById("totalCount").textContent = brands.length;
+  document.getElementById("visibleCount").textContent = filtered.length;
+  const allTags = new Set(brands.flatMap((b) => b.tags.map((t) => t.toLowerCase())));
+  document.getElementById("tagCount").textContent = allTags.size;
+}
+
+// ===== DETAIL MODAL =====
+function openDetail(idx) {
+  detailIndex = idx;
+  const b = brands[idx];
+  document.getElementById("detailTitle").textContent = b.name;
+
+  const c1 = b.colors[0] || "#6366f1";
+  const c2 = b.colors[1] || "#06b6d4";
+
+  const swatches = b.colors
+    .map((c) => `<div class="detail-color-swatch" style="background:${c}" title="${c}"></div>`)
+    .join("");
+
+  const tags = b.tags
+    .map((t) => {
+      const col = getTagColor(t);
+      return `<span class="tag-pill" style="background:${col.bg};border-color:${col.border};color:${col.text}">${t}</span>`;
+    })
+    .join("");
+
+  document.getElementById("detailBody").innerHTML = `
+    <div class="detail-hero">
+      <div class="detail-emoji" style="background:linear-gradient(135deg,${c1}44,${c2}55)">
+        ${b.emoji || "🏷️"}
+      </div>
+      <div>
+        <div class="detail-brand-name">${b.name}</div>
+        <div class="detail-tagline">${b.tagline || ""}</div>
+      </div>
+    </div>
+    <div class="detail-grid">
+      <div class="detail-field">
+        <div class="d-label">Industry</div>
+        <div class="d-value">${b.industry || "—"}</div>
+      </div>
+      <div class="detail-field">
+        <div class="d-label">Founded</div>
+        <div class="d-value">${b.founded || "—"}</div>
+      </div>
+      <div class="detail-field" style="grid-column:span 2">
+        <div class="d-label">Headquarters</div>
+        <div class="d-value">${b.hq || "—"}</div>
+      </div>
+    </div>
+    ${b.description ? `<div class="detail-desc">${b.description}</div>` : ""}
+    <div style="margin-bottom:10px;font-size:0.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)">Brand Colors</div>
+    <div class="detail-colors">${swatches}</div>
+    <div style="margin-bottom:10px;font-size:0.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)">Tags</div>
+    <div class="detail-tags">${tags}</div>
+  `;
+
+  document.getElementById("detailOverlay").classList.remove("hidden");
+}
+
+document.getElementById("closeDetail").addEventListener("click", () => {
+  document.getElementById("detailOverlay").classList.add("hidden");
+});
+document.getElementById("closeDetailBtn").addEventListener("click", () => {
+  document.getElementById("detailOverlay").classList.add("hidden");
+});
+document.getElementById("editFromDetail").addEventListener("click", () => {
+  document.getElementById("detailOverlay").classList.add("hidden");
+  openEditModal(detailIndex);
+});
+document.getElementById("detailOverlay").addEventListener("click", (e) => {
+  if (e.target === document.getElementById("detailOverlay"))
+    document.getElementById("detailOverlay").classList.add("hidden");
+});
+
+// ===== ADD / EDIT MODAL =====
+function openAddModal() {
+  document.getElementById("modalTitle").textContent = "Add New Brand";
+  document.getElementById("editIndex").value = -1;
+  clearForm();
+  document.getElementById("modalOverlay").classList.remove("hidden");
+}
+
+function openEditModal(idx) {
+  const b = brands[idx];
+  document.getElementById("modalTitle").textContent = "Edit Brand";
+  document.getElementById("editIndex").value = idx;
+  document.getElementById("brandName").value = b.name;
+  document.getElementById("brandTagline").value = b.tagline || "";
+  document.getElementById("brandIndustry").value = b.industry || "";
+  document.getElementById("brandFounded").value = b.founded || "";
+  document.getElementById("brandHQ").value = b.hq || "";
+  document.getElementById("brandColors").value = b.colors.join(", ");
+  document.getElementById("brandDesc").value = b.description || "";
+  document.getElementById("brandTags").value = b.tags.join(", ");
+  document.getElementById("brandEmoji").value = b.emoji || "";
+  document.getElementById("modalOverlay").classList.remove("hidden");
+}
+
+function clearForm() {
+  [
+    "brandName",
+    "brandTagline",
+    "brandIndustry",
+    "brandFounded",
+    "brandHQ",
+    "brandColors",
+    "brandDesc",
+    "brandTags",
+    "brandEmoji"
+  ].forEach((id) => (document.getElementById(id).value = ""));
+}
+
+function closeModal() {
+  document.getElementById("modalOverlay").classList.add("hidden");
+}
+
+document.getElementById("openModal").addEventListener("click", openAddModal);
+document.getElementById("closeModal").addEventListener("click", closeModal);
+document.getElementById("cancelModal").addEventListener("click", closeModal);
+document.getElementById("modalOverlay").addEventListener("click", (e) => {
+  if (e.target === document.getElementById("modalOverlay")) closeModal();
+});
+
+// ===== SAVE BRAND =====
+document.getElementById("saveBrand").addEventListener("click", () => {
+  const name = document.getElementById("brandName").value.trim();
+  if (!name) {
+    document.getElementById("brandName").focus();
+    document.getElementById("brandName").style.borderColor = "#f43f5e";
+    return;
+  }
+  document.getElementById("brandName").style.borderColor = "";
+
+  const rawColors = document.getElementById("brandColors").value;
+  const colors = rawColors
+    .split(",")
+    .map((c) => c.trim())
+    .filter((c) => c.match(/^#[0-9a-fA-F]{3,6}$/));
+
+  const brand = {
+    name,
+    tagline: document.getElementById("brandTagline").value.trim(),
+    industry: document.getElementById("brandIndustry").value.trim(),
+    founded: parseInt(document.getElementById("brandFounded").value) || null,
+    hq: document.getElementById("brandHQ").value.trim(),
+    colors: colors.length ? colors : ["#6366f1", "#06b6d4"],
+    description: document.getElementById("brandDesc").value.trim(),
+    tags: document
+      .getElementById("brandTags")
+      .value.split(",")
+      .map((t) => t.trim())
+      .filter(Boolean),
+    emoji: document.getElementById("brandEmoji").value.trim() || "🏷️"
+  };
+
+  const idx = parseInt(document.getElementById("editIndex").value);
+  if (idx === -1) {
+    brands.unshift(brand);
+  } else {
+    brands[idx] = brand;
+  }
+
+  save();
+  closeModal();
+  renderCards();
+});
+
+// ===== DELETE =====
+function deleteBrand(idx) {
+  if (confirm(`Delete "${brands[idx].name}"?`)) {
+    brands.splice(idx, 1);
+    save();
+    renderCards();
+  }
+}
+
+// ===== SEARCH =====
+const searchInput = document.getElementById("searchInput");
+searchInput.addEventListener("input", () => {
+  currentSearch = searchInput.value;
+  renderCards();
+});
+document.getElementById("clearSearch").addEventListener("click", () => {
+  searchInput.value = "";
+  currentSearch = "";
+  renderCards();
+});
+
+// ===== TAG FILTERS =====
+document.querySelectorAll(".tag-filter").forEach((btn) => {
+  btn.addEventListener("click", () => {
+    document.querySelectorAll(".tag-filter").forEach((b) => b.classList.remove("active"));
+    btn.classList.add("active");
+    currentFilter = btn.dataset.tag;
+    renderCards();
+  });
+});
+
+// ===== INIT =====
+renderCards();
diff --git a/src/assets/styles/brand.css b/src/assets/styles/brand.css
new file mode 100644
index 00000000..07a2793b
--- /dev/null
+++ b/src/assets/styles/brand.css
@@ -0,0 +1,1045 @@
+/* ===== ROOT VARIABLES — Centralized Color System ===== */
+:root {
+  /* Core palette */
+  --clr-bg-deep: #04071a;
+  --clr-bg-mid: #080d24;
+
+  /* Brand accent colors */
+  --clr-violet: #7c6ff7;
+  --clr-violet-light: #a78bfa;
+  --clr-cyan: #0fcfe8;
+  --clr-cyan-light: #67e8f9;
+  --clr-pink: #f06aab;
+  --clr-pink-light: #f9a8d4;
+  --clr-teal: #14d4bc;
+  --clr-amber: #fbbf24;
+  --clr-danger: #f43f5e;
+
+  /* Glass system */
+  --glass-bg: rgba(255, 255, 255, 0.042);
+  --glass-bg-hover: rgba(255, 255, 255, 0.072);
+  --glass-bg-strong: rgba(255, 255, 255, 0.1);
+  --glass-border: rgba(255, 255, 255, 0.09);
+  --glass-border-hover: rgba(124, 111, 247, 0.45);
+
+  /* Gradients */
+  --grad-primary: linear-gradient(135deg, var(--clr-violet), var(--clr-cyan));
+  --grad-accent: linear-gradient(135deg,
+      var(--clr-violet-light),
+      var(--clr-cyan-light),
+      var(--clr-pink-light));
+  --grad-card-shine: linear-gradient(135deg,
+      rgba(255, 255, 255, 0.05) 0%,
+      transparent 60%);
+
+  /* Text */
+  --text-primary: #eef2ff;
+  --text-secondary: #94a3c0;
+  --text-muted: #556080;
+
+  /* Shadows */
+  --shadow-card-hover:
+    0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 111, 247, 0.22);
+  --shadow-btn: 0 4px 20px rgba(124, 111, 247, 0.42);
+  --shadow-btn-hover: 0 8px 28px rgba(124, 111, 247, 0.65);
+  --shadow-glow-cyan: 0 0 28px rgba(15, 207, 232, 0.25);
+
+  /* Spacing & shape */
+  --radius: 18px;
+  --radius-sm: 10px;
+  --radius-xs: 6px;
+  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ===== RESET ===== */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: "DM Sans", sans-serif;
+  background: var(--clr-bg-deep);
+  color: var(--text-primary);
+  min-height: 100vh;
+  overflow-x: hidden;
+  line-height: 1.5;
+}
+
+/* ===== AURORA BACKGROUND ===== */
+.aurora-bg {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(ellipse 80% 60% at 18% 18%, rgba(124, 111, 247, 0.2) 0%, transparent 60%),
+    radial-gradient(ellipse 70% 70% at 82% 8%, rgba(15, 207, 232, 0.16) 0%, transparent 55%),
+    radial-gradient(ellipse 60% 55% at 62% 82%, rgba(168, 85, 247, 0.18) 0%, transparent 60%),
+    radial-gradient(ellipse 55% 45% at 8% 72%, rgba(20, 212, 188, 0.13) 0%, transparent 50%),
+    linear-gradient(180deg, var(--clr-bg-deep) 0%, var(--clr-bg-mid) 100%);
+}
+
+.blob {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(90px);
+  opacity: 0.5;
+  mix-blend-mode: screen;
+  animation: drift 20s ease-in-out infinite alternate;
+}
+
+.blob-1 {
+  width: 540px;
+  height: 440px;
+  background: radial-gradient(circle, var(--clr-violet), transparent 70%);
+  top: -12%;
+  left: -10%;
+  animation-duration: 22s;
+}
+
+.blob-2 {
+  width: 460px;
+  height: 400px;
+  background: radial-gradient(circle, var(--clr-cyan), transparent 70%);
+  top: 4%;
+  right: -6%;
+  animation-duration: 26s;
+  animation-delay: -6s;
+}
+
+.blob-3 {
+  width: 400px;
+  height: 360px;
+  background: radial-gradient(circle, #a855f7, transparent 70%);
+  bottom: 8%;
+  left: 18%;
+  animation-duration: 24s;
+  animation-delay: -3s;
+}
+
+.blob-4 {
+  width: 320px;
+  height: 320px;
+  background: radial-gradient(circle, var(--clr-teal), transparent 70%);
+  bottom: -6%;
+  right: 8%;
+  animation-duration: 20s;
+  animation-delay: -11s;
+}
+
+@keyframes drift {
+  0% {
+    transform: translate(0, 0) scale(1);
+  }
+
+  33% {
+    transform: translate(28px, -38px) scale(1.07);
+  }
+
+  66% {
+    transform: translate(-18px, 28px) scale(0.95);
+  }
+
+  100% {
+    transform: translate(14px, -18px) scale(1.04);
+  }
+}
+
+.shimmer-line {
+  position: absolute;
+  top: 33%;
+  left: -20%;
+  width: 140%;
+  height: 1px;
+  background: linear-gradient(90deg,
+      transparent,
+      rgba(124, 111, 247, 0.35),
+      rgba(15, 207, 232, 0.45),
+      rgba(168, 85, 247, 0.35),
+      transparent);
+  animation: shimmerMove 10s linear infinite;
+  opacity: 0.55;
+}
+
+@keyframes shimmerMove {
+  0% {
+    transform: translateX(-8%);
+  }
+
+  100% {
+    transform: translateX(8%);
+  }
+}
+
+.grain {
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
+  opacity: 0.3;
+}
+
+/* ===== HEADER ===== */
+.header {
+  position: relative;
+  z-index: 10;
+  text-align: center;
+  padding: 64px 24px 30px;
+}
+
+.header-inner {
+  display: inline-block;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  margin-bottom: 10px;
+}
+
+.logo-icon {
+  width: 54px;
+  height: 54px;
+  border-radius: 16px;
+  background: var(--grad-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  color: #fff;
+  flex-shrink: 0;
+  box-shadow: 0 0 28px rgba(124, 111, 247, 0.55), var(--shadow-glow-cyan);
+}
+
+.logo-text {
+  font-family: "Syne", sans-serif;
+  font-size: 2.7rem;
+  font-weight: 800;
+  letter-spacing: -1.5px;
+  background: var(--grad-accent);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.header-sub {
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  font-weight: 300;
+  letter-spacing: 0.6px;
+}
+
+/* ===== CONTROLS BAR ===== */
+.controls-bar {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 0 32px 20px;
+  flex-wrap: wrap;
+}
+
+.search-wrap {
+  position: relative;
+  flex: 1;
+  min-width: 240px;
+}
+
+.search-icon {
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  font-size: 14px;
+  pointer-events: none;
+}
+
+.search-input {
+  width: 100%;
+  padding: 13px 44px 13px 44px;
+  border-radius: var(--radius);
+  border: 1px solid var(--glass-border);
+  background: var(--glass-bg);
+  -webkit-backdrop-filter: blur(18px);
+  backdrop-filter: blur(18px);
+  color: var(--text-primary);
+  font-family: "DM Sans", sans-serif;
+  font-size: 0.95rem;
+  outline: none;
+  transition: var(--transition);
+}
+
+.search-input::placeholder {
+  color: var(--text-muted);
+}
+
+.search-input:focus {
+  border-color: var(--clr-cyan);
+  background: var(--glass-bg-hover);
+  box-shadow: 0 0 0 3px rgba(15, 207, 232, 0.13), var(--shadow-glow-cyan);
+}
+
+.clear-btn {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 15px;
+  padding: 4px 6px;
+  border-radius: var(--radius-xs);
+  transition: var(--transition);
+}
+
+.clear-btn:hover {
+  color: var(--clr-pink);
+}
+
+.filter-tags {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex-wrap: wrap;
+}
+
+.filter-label {
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  font-weight: 500;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+}
+
+.tag-filter {
+  padding: 7px 15px;
+  border-radius: 50px;
+  border: 1px solid var(--glass-border);
+  background: var(--glass-bg);
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: var(--transition);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  font-family: "DM Sans", sans-serif;
+}
+
+.tag-filter:hover {
+  background: var(--glass-bg-hover);
+  border-color: var(--clr-violet);
+  color: var(--clr-violet-light);
+}
+
+.tag-filter.active {
+  background: linear-gradient(135deg, rgba(124, 111, 247, 0.28), rgba(15, 207, 232, 0.22));
+  border-color: var(--clr-cyan);
+  color: var(--clr-cyan-light);
+  font-weight: 500;
+}
+
+.add-btn {
+  padding: 13px 26px;
+  border-radius: var(--radius);
+  border: none;
+  background: var(--grad-primary);
+  color: #fff;
+  font-family: "Syne", sans-serif;
+  font-weight: 700;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: var(--shadow-btn);
+  white-space: nowrap;
+}
+
+.add-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-btn-hover);
+  filter: brightness(1.1);
+}
+
+.add-btn:active {
+  transform: translateY(0);
+}
+
+/* ===== STATS BAR ===== */
+.stats-bar {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  gap: 14px;
+  padding: 0 32px 26px;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
+  border-radius: var(--radius-sm);
+  padding: 12px 26px;
+  min-width: 108px;
+  transition: var(--transition);
+}
+
+.stat:hover {
+  background: var(--glass-bg-hover);
+  border-color: var(--glass-border-hover);
+}
+
+.stat span {
+  font-family: "Syne", sans-serif;
+  font-size: 1.9rem;
+  font-weight: 800;
+  line-height: 1;
+  background: var(--grad-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.stat label {
+  font-size: 0.68rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 1.1px;
+  margin-top: 5px;
+}
+
+/* ===== BRAND GRID ===== */
+.brand-grid {
+  position: relative;
+  z-index: 10;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 22px;
+  padding: 0 32px 64px;
+}
+
+/* ===== BRAND CARD ===== */
+.brand-card {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius);
+  -webkit-backdrop-filter: blur(22px);
+  backdrop-filter: blur(22px);
+  padding: 26px;
+  cursor: pointer;
+  transition: var(--transition);
+  position: relative;
+  overflow: hidden;
+  animation: cardIn 0.45s ease both;
+}
+
+@keyframes cardIn {
+  from {
+    opacity: 0;
+    transform: translateY(22px) scale(0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.brand-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius);
+  background: var(--grad-card-shine);
+  pointer-events: none;
+}
+
+.brand-card::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 10%;
+  right: 10%;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(124, 111, 247, 0.5), rgba(15, 207, 232, 0.5), transparent);
+  opacity: 0;
+  transition: var(--transition);
+}
+
+.brand-card:hover {
+  transform: translateY(-7px);
+  border-color: var(--glass-border-hover);
+  box-shadow: var(--shadow-card-hover);
+  background: var(--glass-bg-hover);
+}
+
+.brand-card:hover::after {
+  opacity: 1;
+}
+
+.card-top {
+  display: flex;
+  align-items: flex-start;
+  gap: 15px;
+  margin-bottom: 16px;
+}
+
+.brand-emoji {
+  width: 58px;
+  height: 58px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26px;
+  flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.brand-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.brand-name {
+  font-family: "Syne", sans-serif;
+  font-size: 1.18rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.brand-tagline {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  font-style: italic;
+  font-weight: 300;
+  line-height: 1.4;
+}
+
+.card-meta {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.meta-label {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 1.1px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.meta-value {
+  font-size: 0.86rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.brand-desc {
+  font-size: 0.83rem;
+  color: var(--text-muted);
+  line-height: 1.65;
+  margin-bottom: 15px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.color-dots {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 14px;
+  align-items: center;
+}
+
+.color-dot {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.14);
+  flex-shrink: 0;
+  transition: var(--transition);
+}
+
+.color-dot:hover {
+  transform: scale(1.25);
+  border-color: rgba(255, 255, 255, 0.35);
+}
+
+.card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tag-pill {
+  padding: 4px 11px;
+  border-radius: 50px;
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.3px;
+  border: 1px solid;
+  transition: var(--transition);
+}
+
+.tag-pill:hover {
+  filter: brightness(1.2);
+}
+
+.card-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--glass-border);
+}
+
+.action-btn {
+  flex: 1;
+  padding: 9px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--glass-border);
+  background: var(--glass-bg);
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+  cursor: pointer;
+  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-family: "DM Sans", sans-serif;
+}
+
+.action-btn.edit-btn:hover {
+  background: rgba(124, 111, 247, 0.18);
+  border-color: var(--clr-violet);
+  color: var(--clr-violet-light);
+}
+
+.action-btn.del-btn:hover {
+  background: rgba(244, 63, 94, 0.18);
+  border-color: var(--clr-danger);
+  color: var(--clr-danger);
+}
+
+/* ===== NO RESULTS ===== */
+.no-results {
+  position: relative;
+  z-index: 10;
+  text-align: center;
+  padding: 90px 24px;
+  color: var(--text-muted);
+}
+
+.no-results i {
+  font-size: 3.2rem;
+  margin-bottom: 16px;
+  display: block;
+  opacity: 0.6;
+}
+
+/* ===== MODAL ===== */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(4, 7, 26, 0.82);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  animation: overlayIn 0.22s ease;
+}
+
+@keyframes overlayIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.modal-overlay.hidden {
+  display: none !important;
+}
+
+.modal-box {
+  background: rgba(8, 11, 32, 0.96);
+  border: 1px solid var(--glass-border);
+  border-radius: 24px;
+  width: 100%;
+  max-width: 560px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow:
+    0 24px 64px rgba(0, 0, 0, 0.72),
+    0 0 0 1px rgba(124, 111, 247, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  animation: modalSlide 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes modalSlide {
+  from {
+    transform: translateY(32px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.detail-box {
+  max-width: 680px;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 28px 28px 0;
+  margin-bottom: 22px;
+}
+
+.modal-header h2 {
+  font-family: "Syne", sans-serif;
+  font-size: 1.35rem;
+  font-weight: 700;
+  background: var(--grad-accent);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.modal-close {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 1px solid var(--glass-border);
+  background: var(--glass-bg);
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition);
+  font-size: 14px;
+}
+
+.modal-close:hover {
+  background: rgba(244, 63, 94, 0.18);
+  color: var(--clr-danger);
+  border-color: var(--clr-danger);
+}
+
+.modal-body {
+  padding: 0 28px;
+}
+
+.form-group {
+  margin-bottom: 17px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 1.1px;
+  color: var(--text-muted);
+  margin-bottom: 7px;
+  font-weight: 500;
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 12px 16px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--glass-border);
+  background: rgba(255, 255, 255, 0.038);
+  color: var(--text-primary);
+  font-family: "DM Sans", sans-serif;
+  font-size: 0.92rem;
+  outline: none;
+  transition: var(--transition);
+  resize: vertical;
+}
+
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+  color: var(--text-muted);
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  border-color: var(--clr-cyan);
+  background: var(--glass-bg-hover);
+  box-shadow: 0 0 0 3px rgba(15, 207, 232, 0.11);
+}
+
+.form-group textarea {
+  min-height: 82px;
+}
+
+.modal-footer {
+  display: flex;
+  gap: 12px;
+  padding: 22px 28px 28px;
+}
+
+.btn-cancel,
+.btn-save {
+  flex: 1;
+  padding: 13px;
+  border-radius: var(--radius-sm);
+  font-family: "Syne", sans-serif;
+  font-weight: 700;
+  font-size: 0.88rem;
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.btn-cancel {
+  border: 1px solid var(--glass-border);
+  background: var(--glass-bg);
+  color: var(--text-secondary);
+}
+
+.btn-cancel:hover {
+  background: var(--glass-bg-hover);
+  color: var(--text-primary);
+  border-color: var(--glass-border-hover);
+}
+
+.btn-save {
+  border: none;
+  background: var(--grad-primary);
+  color: #fff;
+  box-shadow: var(--shadow-btn);
+}
+
+.btn-save:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-btn-hover);
+  filter: brightness(1.08);
+}
+
+.btn-save:active {
+  transform: translateY(0);
+}
+
+/* ===== DETAIL BODY ===== */
+.detail-body {
+  padding: 0 28px;
+}
+
+.detail-hero {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 24px;
+  padding: 20px;
+  background: var(--glass-bg);
+  border-radius: var(--radius);
+  border: 1px solid var(--glass-border);
+}
+
+.detail-emoji {
+  width: 72px;
+  height: 72px;
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.detail-brand-name {
+  font-family: "Syne", sans-serif;
+  font-size: 1.55rem;
+  font-weight: 800;
+  color: var(--text-primary);
+}
+
+.detail-tagline {
+  color: var(--text-secondary);
+  font-style: italic;
+  font-size: 0.88rem;
+  margin-top: 5px;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  margin-bottom: 18px;
+}
+
+.detail-field {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  padding: 14px 16px;
+  transition: var(--transition);
+}
+
+.detail-field:hover {
+  background: var(--glass-bg-hover);
+}
+
+.detail-field .d-label {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 1.1px;
+  color: var(--text-muted);
+  margin-bottom: 5px;
+}
+
+.detail-field .d-value {
+  font-size: 0.9rem;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.detail-desc {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  padding: 16px;
+  margin-bottom: 16px;
+  color: var(--text-secondary);
+  font-size: 0.88rem;
+  line-height: 1.72;
+}
+
+.detail-colors {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.detail-color-swatch {
+  width: 38px;
+  height: 38px;
+  border-radius: 9px;
+  border: 2px solid rgba(255, 255, 255, 0.14);
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.detail-color-swatch:hover {
+  transform: scale(1.18);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.detail-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 18px;
+}
+
+/* ===== SCROLLBAR ===== */
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(124, 111, 247, 0.38);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(124, 111, 247, 0.65);
+}
+
+/* ===== UTILITY ===== */
+.hidden {
+  display: none !important;
+}
+
+/* ===== RESPONSIVE ===== */
+@media (max-width: 768px) {
+  .controls-bar {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0 16px 16px;
+  }
+
+  .filter-tags {
+    justify-content: flex-start;
+  }
+
+  .brand-grid {
+    grid-template-columns: 1fr;
+    padding: 0 16px 48px;
+  }
+
+  .stats-bar {
+    padding: 0 16px 18px;
+    gap: 10px;
+  }
+
+  .header {
+    padding: 44px 16px 22px;
+  }
+
+  .logo-text {
+    font-size: 2rem;
+  }
+
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .stat {
+    padding: 10px 16px;
+    min-width: 88px;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/crossword2.css b/src/assets/styles/crossword2.css
index b0db0f2c..c009cf4f 100644
--- a/src/assets/styles/crossword2.css
+++ b/src/assets/styles/crossword2.css
@@ -37,7 +37,9 @@
   gap: 10px;
   padding: 24px;
   border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow), 0 0 0 15px rgba(99, 102, 241, 0.08);
+  box-shadow:
+    var(--box-shadow),
+    0 0 0 15px rgba(99, 102, 241, 0.08);
   margin: 0 auto;
   width: 100%;
   max-width: 560px;
@@ -74,7 +76,9 @@
   transform: translateY(-3px);
   background: #eef2ff;
   border-color: var(--primary-color);
-  box-shadow: 0 0 16px 4px var(--primary-color), 0 8px 20px rgba(99, 102, 241, 0.15);
+  box-shadow:
+    0 0 16px 4px var(--primary-color),
+    0 8px 20px rgba(99, 102, 241, 0.15);
 }
 
 .grid__puzzle .cell.selected {
@@ -398,4 +402,4 @@ details:not([open]) summary::after {
     animation: none !important;
     transition: none !important;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css
index 9fbf3f8a..a8b55afb 100644
--- a/src/assets/styles/header.css
+++ b/src/assets/styles/header.css
@@ -613,15 +613,15 @@
     margin: 0 !important;
   }
 
- .mobile-actions-bar .help {
-   width: 32px !important;
-   height: 32px !important;
-   min-width: 32px !important;
-   min-height: 32px !important;
-   max-height: 32px !important;
-   padding: 0 !important;
-   font-size: 1rem !important;
- }
+  .mobile-actions-bar .help {
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    min-height: 32px !important;
+    max-height: 32px !important;
+    padding: 0 !important;
+    font-size: 1rem !important;
+  }
 
   .header-spacer {
     height: 130px;
@@ -692,4 +692,4 @@
     width: 85vw;
     padding: 1.25rem 1rem;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/panel.css b/src/assets/styles/panel.css
index 72814685..a3600ed7 100644
--- a/src/assets/styles/panel.css
+++ b/src/assets/styles/panel.css
@@ -68,7 +68,7 @@
     color: white;
   }
 
-  & input[type="radio"]:focus-visible+.icon {
+  & input[type="radio"]:focus-visible + .icon {
     outline: 2px solid var(--primary);
     outline-offset: 2px;
     position: absolute;
@@ -86,7 +86,7 @@
     display: none;
   }
 
-  & input[type="radio"]:checked+.icon {
+  & input[type="radio"]:checked + .icon {
     background: var(--primary);
     color: white;
   }
@@ -135,7 +135,7 @@
     perspective: 1000px;
     margin: auto;
 
-    &>letter-panel {
+    & > letter-panel {
       display: block;
       width: 100%;
       height: 100%;
@@ -269,7 +269,6 @@
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  
 }
 
 .settings-button {
@@ -419,4 +418,4 @@
     max-width: 350px;
     transform: translateY(10px);
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/setting.css b/src/assets/styles/setting.css
index a30b6cbf..84acc6bb 100644
--- a/src/assets/styles/setting.css
+++ b/src/assets/styles/setting.css
@@ -1,5 +1,4 @@
 .container__setting {
-
   .setting__trigger {
     position: fixed;
     top: 12rem;
@@ -14,7 +13,9 @@
     align-items: center;
     justify-content: center;
     z-index: 1000;
-    transition: transform 330ms ease-in-out, background-color 330ms ease;
+    transition:
+      transform 330ms ease-in-out,
+      background-color 330ms ease;
 
     &.open {
       background-color: rgb(106, 202, 119);
@@ -69,7 +70,9 @@
     cursor: pointer;
     color: white;
     background: linear-gradient(90deg, rgb(17, 255, 247), rgb(165, 39, 241));
-    transition: transform 200ms ease, opacity 200ms ease;
+    transition:
+      transform 200ms ease,
+      opacity 200ms ease;
   }
 
   .control__group button:hover {
@@ -87,4 +90,4 @@
     background: #334155;
     flex-shrink: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/share-button.css b/src/assets/styles/share-button.css
index 944da9d8..e9b40a8d 100644
--- a/src/assets/styles/share-button.css
+++ b/src/assets/styles/share-button.css
@@ -229,4 +229,4 @@
 
 .copy-link-button:hover {
   background-color: #e0e0e0;
-}
\ No newline at end of file
+}
diff --git a/src/layouts/common/Header.astro b/src/layouts/common/Header.astro
index 85adec4d..8dfbcc98 100755
--- a/src/layouts/common/Header.astro
+++ b/src/layouts/common/Header.astro
@@ -1183,17 +1183,17 @@ const allSearchItemsJSON = JSON.stringify(allSearchItems);
     moveMobileButtons();
   }
   function moveMobileButtons() {
-  if (window.innerWidth > 640) return;
-  const actionGroup = document.querySelector(".action__group");
-  const mobileBar = document.getElementById("mobileActionsBar");
-  if (!actionGroup || !mobileBar) return;
-
-  // Theme toggle chhod ke baaki sab move karo
-  Array.from(actionGroup.children).forEach((child) => {
-    if (!child.classList.contains("theme-toggle")) {
-      mobileBar.appendChild(child);
-    }
-  });
+    if (window.innerWidth > 640) return;
+    const actionGroup = document.querySelector(".action__group");
+    const mobileBar = document.getElementById("mobileActionsBar");
+    if (!actionGroup || !mobileBar) return;
+
+    // Theme toggle chhod ke baaki sab move karo
+    Array.from(actionGroup.children).forEach((child) => {
+      if (!child.classList.contains("theme-toggle")) {
+        mobileBar.appendChild(child);
+      }
+    });
   }
 
   window.addEventListener("resize", updateSpacer);
diff --git a/src/pages/brand.astro b/src/pages/brand.astro
new file mode 100644
index 00000000..96432e74
--- /dev/null
+++ b/src/pages/brand.astro
@@ -0,0 +1,154 @@
+---
+import "../assets/styles/brand.css";
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Brand Information Portal</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
+  </head>
+  <body>
+    <!-- Aurora Background -->
+    <div class="aurora-bg">
+      <div class="blob blob-1"></div>
+      <div class="blob blob-2"></div>
+      <div class="blob blob-3"></div>
+      <div class="blob blob-4"></div>
+      <div class="shimmer-line"></div>
+      <div class="grain"></div>
+    </div>
+
+    <!-- Header -->
+    <header class="header">
+      <div class="header-inner">
+        <div class="logo">
+          <span class="logo-icon"><i class="fa-solid fa-layer-group"></i></span>
+          <span class="logo-text">BrandVault</span>
+        </div>
+        <p class="header-sub">Your Brand Intelligence Hub</p>
+      </div>
+    </header>
+
+    <!-- Controls -->
+    <div class="controls-bar">
+      <div class="search-wrap">
+        <i class="fa-solid fa-magnifying-glass search-icon"></i>
+        <input type="text" id="searchInput" class="search-input" placeholder="Search brands, tags, industry..." />
+        <button class="clear-btn" id="clearSearch" title="Clear">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </div>
+      <div class="filter-tags" id="filterTags">
+        <span class="filter-label">Filter:</span>
+        <button class="tag-filter active" data-tag="all">All</button>
+        <button class="tag-filter" data-tag="tech">Tech</button>
+        <button class="tag-filter" data-tag="fashion">Fashion</button>
+        <button class="tag-filter" data-tag="food">Food</button>
+        <button class="tag-filter" data-tag="auto">Auto</button>
+        <button class="tag-filter" data-tag="lifestyle">Lifestyle</button>
+      </div>
+      <button class="add-btn" id="openModal">
+        <i class="fa-solid fa-plus"></i> Add Brand
+      </button>
+    </div>
+
+    <!-- Stats Bar -->
+    <div class="stats-bar">
+      <div class="stat"><span id="totalCount">0</span><label>Total Brands</label></div>
+      <div class="stat"><span id="visibleCount">0</span><label>Showing</label></div>
+      <div class="stat"><span id="tagCount">0</span><label>Unique Tags</label></div>
+    </div>
+
+    <!-- Brand Grid -->
+    <main class="brand-grid" id="brandGrid"></main>
+
+    <div class="no-results hidden" id="noResults">
+      <i class="fa-solid fa-ghost"></i>
+      <p>No brands found. Try a different search!</p>
+    </div>
+
+    <!-- Add / Edit Modal -->
+    <div class="modal-overlay hidden" id="modalOverlay">
+      <div class="modal-box">
+        <div class="modal-header">
+          <h2 id="modalTitle">Add New Brand</h2>
+          <button class="modal-close" id="closeModal"><i class="fa-solid fa-xmark"></i></button>
+        </div>
+        <div class="modal-body">
+          <input type="hidden" id="editIndex" value="-1" />
+          <div class="form-group">
+            <label>Brand Name *</label><input type="text" id="brandName" placeholder="e.g. Apple" />
+          </div>
+          <div class="form-group">
+            <label>Tagline</label><input type="text" id="brandTagline" placeholder="e.g. Think Different" />
+          </div>
+          <div class="form-group">
+            <label>Industry</label><input type="text" id="brandIndustry" placeholder="e.g. Technology" />
+          </div>
+          <div class="form-group">
+            <label>Founded Year</label><input
+              type="number"
+              id="brandFounded"
+              placeholder="e.g. 1976"
+              min="1800"
+              max="2030"
+            />
+          </div>
+          <div class="form-group">
+            <label>Headquarters</label><input type="text" id="brandHQ" placeholder="e.g. Cupertino, CA" />
+          </div>
+          <div class="form-group">
+            <label>Brand Colors (comma separated hex)</label><input
+              type="text"
+              id="brandColors"
+              placeholder="e.g. #000000, #ffffff"
+            />
+          </div>
+          <div class="form-group">
+            <label>Description</label><textarea id="brandDesc" rows="3" placeholder="Short brand description..."
+            ></textarea>
+          </div>
+          <div class="form-group">
+            <label>Tags (comma separated)</label><input
+              type="text"
+              id="brandTags"
+              placeholder="e.g. tech, innovation, premium"
+            />
+          </div>
+          <div class="form-group">
+            <label>Logo Emoji / Icon</label><input type="text" id="brandEmoji" placeholder="e.g. 🍎" maxlength="4" />
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn-cancel" id="cancelModal">Cancel</button>
+          <button class="btn-save" id="saveBrand">Save Brand</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Detail Modal -->
+    <div class="modal-overlay hidden" id="detailOverlay">
+      <div class="modal-box detail-box">
+        <div class="modal-header">
+          <h2 id="detailTitle">Brand Details</h2>
+          <button class="modal-close" id="closeDetail"><i class="fa-solid fa-xmark"></i></button>
+        </div>
+        <div class="detail-body" id="detailBody"></div>
+        <div class="modal-footer">
+          <button class="btn-cancel" id="editFromDetail">Edit Brand</button>
+          <button class="btn-save" id="closeDetailBtn">Close</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- JS from public/assets/js/ -->
+    <script src="/assets/js/brand.js" is:inline></script>
+  </body>
+</html>
diff --git a/src/pages/panel.astro b/src/pages/panel.astro
index adbb10f3..7965f132 100644
--- a/src/pages/panel.astro
+++ b/src/pages/panel.astro
@@ -436,7 +436,7 @@ const meta = {
   /* Floating panel actions — default (desktop) */
   .floating-panel-actions {
     position: fixed;
-    top: 18px; 
+    top: 18px;
     right: 5.5rem;
     display: flex;
     align-items: center;
@@ -448,7 +448,7 @@ const meta = {
   @media (min-width: 769px) {
     .right-header-buttons {
       position: fixed;
-      top: 18px; 
+      top: 18px;
       right: 12.5rem;
       z-index: 9999;
     }

From c8b1d27ee391f27f1944542859a47a95abacfa93 Mon Sep 17 00:00:00 2001
From: Shahid Jamal <shahidjamal5701@gmail.com>
Date: Thu, 11 Jun 2026 13:05:55 +0530
Subject: [PATCH 16/16] [RZA-260184]: feat: add clear button and new puzzle
 sets to crossword game

---
 src/assets/styles/crossword2.css |  13 ++-
 src/components/Puzzle2.astro     | 163 ++++++++++++++++++++++---------
 src/components/Settings.astro    |  21 +++-
 3 files changed, 149 insertions(+), 48 deletions(-)

diff --git a/src/assets/styles/crossword2.css b/src/assets/styles/crossword2.css
index c009cf4f..e3096166 100644
--- a/src/assets/styles/crossword2.css
+++ b/src/assets/styles/crossword2.css
@@ -286,10 +286,21 @@ details:not([open]) summary::after {
   transition: var(--transition);
 }
 
+.btn-clear {
+  background: linear-gradient(135deg, #f43f5e, #e11d48);
+}
+
+.btn-clear:hover {
+  background: linear-gradient(135deg, #e11d48, #be123c);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(244, 63, 94, 0.4);
+}
+
 .btn-shuffle {
   background: linear-gradient(135deg, #0ea5e9, #6366f1);
 }
 
+
 .btn-new {
   background: linear-gradient(135deg, #10b981, #06b6d4);
 }
@@ -402,4 +413,4 @@ details:not([open]) summary::after {
     animation: none !important;
     transition: none !important;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Puzzle2.astro b/src/components/Puzzle2.astro
index f92dc3bd..f42915eb 100644
--- a/src/components/Puzzle2.astro
+++ b/src/components/Puzzle2.astro
@@ -17,13 +17,14 @@ 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="shuffle" class="action-btn btn-shuffle">🔀 Shuffle</button>
+    <button id="new" class="action-btn btn-new">✨ New Puzzle</button>
     <button id="solutionBtn" class="hint-button" aria-label="Toggle hints">
       <div style="width: 28px; height: 28px;">
         <HintIcon />
       </div>
     </button>
-    <button id="shuffle" class="action-btn btn-shuffle">🔀 Shuffle</button>
-    <button id="new" class="action-btn btn-new">✨ New Puzzle</button>
+    <button id="main-clear" class="action-btn btn-clear">🗑️ Clear</button>
   </div>
 
   <div id="grid" class="grid__puzzle"></div>
@@ -31,20 +32,65 @@ import HintIcon from "@/assets/icons/hint.svg";
 
 <script is:inline>
   var WORD_SETS = [
+    // Set 1 — Animals
     {
       easy: ["CAT", "DOG", "SUN", "MOON", "STAR"],
       medium: ["APPLE", "GRAPE", "ORANGE", "BERRIES"],
       hard: ["WALRUS", "GIRAFFE", "PENGUIN", "DOLPHIN"]
     },
+    // Set 2 — Household
     {
       easy: ["HAT", "CAR", "BALL", "SHOE", "LAMP"],
       medium: ["CHERRY", "COCONUT", "PLUM", "MELON", "PEACH"],
       hard: ["OCTOPUS", "JACKAL", "WALRUS", "PEACOCK"]
     },
+    // Set 3 — Colors
     {
       easy: ["RED", "BLUE", "GREEN", "YELLOW", "PURPLE"],
       medium: ["BLACK", "WHITE", "BROWN", "ORANGE", "PINK"],
       hard: ["MAGENTA", "CYAN", "VIOLET", "MAROON"]
+    },
+    // Set 4 — Space
+    {
+      easy: ["SUN", "MARS", "MOON", "STAR", "COMET"],
+      medium: ["VENUS", "EARTH", "PLUTO", "ORBIT", "SOLAR"],
+      hard: ["JUPITER", "MERCURY", "NEPTUNE", "SATURN"]
+    },
+    // Set 5 — Food
+    {
+      easy: ["EGG", "MILK", "RICE", "CAKE", "SOUP"],
+      medium: ["BREAD", "SUGAR", "CREAM", "PASTA", "SPICE"],
+      hard: ["COOKIE", "BUTTER", "NOODLE", "MUFFIN"]
+    },
+    // Set 6 — Sports
+    {
+      easy: ["RUN", "JUMP", "SWIM", "KICK", "BOWL"],
+      medium: ["CHESS", "RUGBY", "DERBY", "SQUASH", "POLO"],
+      hard: ["CRICKET", "TENNIS", "HOCKEY", "BOXING"]
+    },
+    // Set 7 — Body
+    {
+      easy: ["ARM", "LEG", "EYE", "HAND", "KNEE"],
+      medium: ["HEART", "BRAIN", "SPINE", "NERVE", "LIVER"],
+      hard: ["MUSCLE", "KIDNEY", "STOMACH", "THROAT"]
+    },
+    // Set 8 — Travel
+    {
+      easy: ["MAP", "ROAD", "CITY", "TOWN", "PARK"],
+      medium: ["HOTEL", "TRAIN", "PLANE", "BEACH", "RIVER"],
+      hard: ["AIRPORT", "STATION", "HIGHWAY", "VILLAGE"]
+    },
+    // Set 9 — School
+    {
+      easy: ["PEN", "BOOK", "DESK", "BELL", "TEST"],
+      medium: ["CLASS", "GRADE", "STUDY", "ESSAY", "NOTES"],
+      hard: ["PENCIL", "LESSON", "SCIENCE", "HISTORY"]
+    },
+    // Set 10 — Weather
+    {
+      easy: ["SUN", "RAIN", "WIND", "SNOW", "HAIL"],
+      medium: ["CLOUD", "STORM", "FROST", "FOGGY", "SLEET"],
+      hard: ["THUNDER", "RAINBOW", "BLIZZARD", "CYCLONE"]
     }
   ];
 
@@ -215,7 +261,6 @@ import HintIcon from "@/assets/icons/hint.svg";
     var isMobile = window.innerWidth <= 768;
     var isLandscape = window.innerWidth > window.innerHeight;
 
-    // Grid size calculate karo
     var gridSize, cellSize;
     if (isMobile) {
       if (isLandscape) {
@@ -223,7 +268,7 @@ import HintIcon from "@/assets/icons/hint.svg";
       } else {
         gridSize = window.innerWidth - 16;
       }
-      cellSize = Math.floor((gridSize - 12 - 7 * 3) / 8); // padding 6px each side + gaps
+      cellSize = Math.floor((gridSize - 12 - 7 * 3) / 8);
 
       gridEl.style.display = "grid";
       gridEl.style.gridTemplateColumns = "repeat(8, " + cellSize + "px)";
@@ -251,7 +296,6 @@ import HintIcon from "@/assets/icons/hint.svg";
         cell.textContent = state.grid[i][j];
         cell.dataset.coords = i + "-" + j;
 
-        // Mobile pe cell size JS se set karo
         if (isMobile) {
           cell.style.width = cellSize + "px";
           cell.style.height = cellSize + "px";
@@ -314,27 +358,37 @@ import HintIcon from "@/assets/icons/hint.svg";
       }
     }
 
-    document.getElementById("clickCount").textContent = state.clickCount;
-    document.getElementById("foundCount").textContent = state.foundWords.length;
-    document.getElementById("totalWords").textContent = state.currentWordSet[state.difficulty].length;
-
-    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>";
+    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;
     }
-    document.getElementById("wordList").innerHTML = html;
-    document.getElementById("solutionBtn").classList.toggle("active", state.showSolution);
+
+    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);
@@ -425,45 +479,62 @@ import HintIcon from "@/assets/icons/hint.svg";
       { passive: false }
     );
 
-    document.getElementById("level").addEventListener("change", function (e) {
-      state.difficulty = e.target.value;
-      generatePuzzle();
-    });
+    // ── Null-safe button listeners ──
 
-    document.getElementById("new").addEventListener("click", newPuzzle);
-    document.getElementById("shuffle").addEventListener("click", generatePuzzle);
+    var levelEl = document.getElementById("level");
+    if (levelEl) {
+      levelEl.addEventListener("change", function (e) {
+        state.difficulty = e.target.value;
+        generatePuzzle();
+      });
+    }
 
-    document.getElementById("solutionBtn").addEventListener("click", function () {
-      state.showSolution = !state.showSolution;
-      renderDOM();
-    });
+    var newEl = document.getElementById("new");
+    if (newEl) newEl.addEventListener("click", newPuzzle);
 
-    document.getElementById("clear").addEventListener("click", function () {
-      state.selectedCells = [];
-      state.foundWords = [];
-      state.matchedCells = new Map();
-      state.wordColors = new Map();
-      state.isDragging = false;
-      renderDOM();
-    });
+    var shuffleEl = document.getElementById("shuffle");
+    if (shuffleEl) shuffleEl.addEventListener("click", generatePuzzle);
 
-    var sNew = document.getElementById("s-new");
-    var sShuffle = document.getElementById("s-shuffle");
-    if (sNew) sNew.addEventListener("click", newPuzzle);
-    if (sShuffle) sShuffle.addEventListener("click", generatePuzzle);
+    var solutionBtnEl = document.getElementById("solutionBtn");
+    if (solutionBtnEl) {
+      solutionBtnEl.addEventListener("click", function () {
+        state.showSolution = !state.showSolution;
+        renderDOM();
+      });
+    }
+
+    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.solutionColors = new Map();
+        state.isDragging = false;
+        state.showSolution = false;
+        renderDOM();
+      });
+    }
+
+    var sNewEl = document.getElementById("s-new");
+    if (sNewEl) sNewEl.addEventListener("click", newPuzzle);
+
+    var sShuffleEl = document.getElementById("s-shuffle");
+    if (sShuffleEl) sShuffleEl.addEventListener("click", generatePuzzle);
   }
 
-  // ── Start — no async, no DOMContentLoaded needed ──
-  setupEvents();
+  // ── Start ──
   generatePuzzle();
+  setupEvents();
 
-  // cross.json load karo background mein — agar mile toh use karo
+  // cross.json load karo background mein
   fetch("/assets/json/cross.json")
     .then(function (r) {
       return r.json();
     })
     .then(function (data) {
-      if (Array.isArray(data) && data.length > 0) {
+      if (Array.isArray(data) && data.length > WORD_SETS.length) {
         WORD_SETS = data;
         state.currentWordSet = WORD_SETS[0];
         generatePuzzle();
diff --git a/src/components/Settings.astro b/src/components/Settings.astro
index 569a32da..c59dec31 100644
--- a/src/components/Settings.astro
+++ b/src/components/Settings.astro
@@ -12,7 +12,7 @@ import "@/assets/styles/setting.css";
       <button id="close" class="close">✕</button>
       <button id="s-new" class="add">New Puzzle</button>
       <button id="s-shuffle" class="shuffle">Shuffle</button>
-      <button id="clear" class="clear">Clear</button>
+      <button id="s-clear" class="clear">Clear</button>
       <select id="level" class="level">
         <option value="easy">Easy (Ages 3-5)</option>
         <option value="medium">Medium (Ages 5-6)</option>
@@ -63,7 +63,26 @@ import "@/assets/styles/setting.css";
     }
 
     trigger.addEventListener("click", () => (panel.style.display === "block" ? closePanel() : openPanel()));
+    // Replace karo:
     if (closeBtn) closeBtn.addEventListener("click", closePanel);
+
+    const sClear = document.getElementById("s-clear");
+    if (sClear) {
+      sClear.addEventListener("click", function () {
+        closePanel();
+        // WordSearch state clear karo
+        if (typeof state !== "undefined") {
+          state.selectedCells = [];
+          state.foundWords = [];
+          state.matchedCells = new Map();
+          state.wordColors = new Map();
+          state.solutionColors = new Map();
+          state.isDragging = false;
+          state.showSolution = false;
+          if (typeof renderDOM === "function") renderDOM();
+        }
+      });
+    }
     if (backdrop) backdrop.addEventListener("click", closePanel);
     window.addEventListener("resize", () => {
       if (panel.style.display === "block") openPanel();