1.0.4

- Przeniesienie tytułu i wybieraka języka do nowego komponentu NavBar
- Integracja biblioteki flag-icons i mapowanie kodów języków na kraje
- Wdrożenie biblioteki ikon lucide-vue-next i zastąpienie wszystkich emoji ikonami SVG
- Implementacja pełnoekranowego, responsywnego menu mobilnego (hamburger menu)
- Przeniesienie przycisków akcji (Reset, Cofnij) do komponentu StatusPanel
- Nowy układ panelu statusu (połączone statystyki i akcje w jednym szklanym panelu)
- Usunięcie przestarzałych komponentów (GameActions, LevelSelector)
- Poprawki wizualne i stylowe (glassmorphism, animacje przejść)

.gitignore

@@ -4,3 +4,4 @@ dist
 .vscode
 .idea
 *.log
+dev-dist

dev-dist/registerSW.js

@@ -1 +0,0 @@
-if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })

dev-dist/sw.js

@@ -1,92 +0,0 @@
-/**
- * Copyright 2018 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *     http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// If the loader is already loaded, just stop.
-if (!self.define) {
-  let registry = {};
-
-  // Used for `eval` and `importScripts` where we can't get script URL by other means.
-  // In both cases, it's safe to use a global var because those functions are synchronous.
-  let nextDefineUri;
-
-  const singleRequire = (uri, parentUri) => {
-    uri = new URL(uri + ".js", parentUri).href;
-    return registry[uri] || (
-      
-        new Promise(resolve => {
-          if ("document" in self) {
-            const script = document.createElement("script");
-            script.src = uri;
-            script.onload = resolve;
-            document.head.appendChild(script);
-          } else {
-            nextDefineUri = uri;
-            importScripts(uri);
-            resolve();
-          }
-        })
-      
-      .then(() => {
-        let promise = registry[uri];
-        if (!promise) {
-          throw new Error(`Module ${uri} didn’t register its module`);
-        }
-        return promise;
-      })
-    );
-  };
-
-  self.define = (depsNames, factory) => {
-    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
-    if (registry[uri]) {
-      // Module is already loading or loaded.
-      return;
-    }
-    let exports = {};
-    const require = depUri => singleRequire(depUri, uri);
-    const specialDeps = {
-      module: { uri },
-      exports,
-      require
-    };
-    registry[uri] = Promise.all(depsNames.map(
-      depName => specialDeps[depName] || require(depName)
-    )).then(deps => {
-      factory(...deps);
-      return exports;
-    });
-  };
-}
-define(['./workbox-5a5d9309'], (function (workbox) { 'use strict';
-
-  self.skipWaiting();
-  workbox.clientsClaim();
-
-  /**
-   * The precacheAndRoute() method efficiently caches and responds to
-   * requests for URLs in the manifest.
-   * See https://goo.gl/S9QRab
-   */
-  workbox.precacheAndRoute([{
-    "url": "registerSW.js",
-    "revision": "3ca0b8505b4bec776b69afdba2768812"
-  }, {
-    "url": "index.html",
-    "revision": "0.vhao5e6obe8"
-  }], {});
-  workbox.cleanupOutdatedCaches();
-  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
-    allowlist: [/^\/$/]
-  }));
-
-}));

package.json

@@ -1,20 +1,26 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "fireworks-js": "^2.10.8",
+    "flag-icons": "^7.5.0",
+    "lucide-vue-next": "^0.563.0",
     "pinia": "^2.1.7",
     "vue": "^3.4.19"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^28.0.0",
     "vite": "^5.1.4",
-    "vite-plugin-pwa": "^0.20.5"
+    "vite-plugin-pwa": "^0.20.5",
+    "vitest": "^4.0.18"
   }
 }

src/App.vue

@@ -3,13 +3,13 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { usePuzzleStore } from './stores/puzzle';
 import { useI18n } from './composables/useI18n';
 import GameBoard from './components/GameBoard.vue';
-import LevelSelector from './components/LevelSelector.vue';
+import NavBar from './components/NavBar.vue';
 import StatusPanel from './components/StatusPanel.vue';
-import GameActions from './components/GameActions.vue';
 import GuidePanel from './components/GuidePanel.vue';
 import WinModal from './components/WinModal.vue';
 import CustomGameModal from './components/CustomGameModal.vue';
 import FixedBar from './components/FixedBar.vue';
+import ReloadPrompt from './components/ReloadPrompt.vue';
 
 // Main App Entry
 const store = usePuzzleStore();
@@ -22,88 +22,9 @@ const installDismissed = ref(false);
 const isCoarsePointer = ref(false);
 const isStandalone = ref(false);
 const themePreference = ref('system');
-const isLangOpen = ref(false);
+const appVersion = __APP_VERSION__;
-const langMenuRef = ref(null);
 let displayModeMedia = null;
 let prefersColorSchemeMedia = null;
-const flagModules = import.meta.glob('./assets/flags/*.svg', { eager: true, as: 'url' });
-const flagMap = Object.fromEntries(
-  Object.entries(flagModules).map(([path, url]) => [path.split('/').pop().replace('.svg', ''), url])
-);
-const flagAliases = {
-  'pt-br': 'pt',
-  'pt-pt': 'pt',
-  'fr-ca': 'fr',
-  'nl-be': 'nl',
-  'es-es': 'es',
-  'es-419': 'es',
-  'zh-hans': 'zh',
-  'zh-hant': 'zh'
-};
-const getFlagUrl = (code) => {
-  const base = flagAliases[code] || code;
-  return flagMap[base] || flagMap['globe'] || null;
-};
-
-const languageFlags = {
-  en: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#b22234"/><rect y="2" width="24" height="2" fill="#fff"/><rect y="6" width="24" height="2" fill="#fff"/><rect y="10" width="24" height="2" fill="#fff"/><rect y="14" width="24" height="2" fill="#fff"/><rect width="10" height="8" fill="#3c3b6e"/></svg>',
-  zh: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#de2910"/><circle cx="6" cy="5" r="2" fill="#ffde00"/></svg>',
-  hi: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#ffffff"/><rect width="24" height="5.33" fill="#ff9933"/><rect y="10.67" width="24" height="5.33" fill="#128807"/><circle cx="12" cy="8" r="2" fill="#000080"/></svg>',
-  es: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#aa151b"/><rect y="4" width="24" height="8" fill="#f1bf00"/></svg>',
-  fr: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="8" height="16" fill="#0055a4"/><rect x="8" width="8" height="16" fill="#ffffff"/><rect x="16" width="8" height="16" fill="#ef4135"/></svg>',
-  ar: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#006c35"/><rect y="11" width="24" height="3" fill="#ffffff"/></svg>',
-  bn: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#006a4e"/><circle cx="11" cy="8" r="4" fill="#f42a41"/></svg>',
-  ru: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#ffffff"/><rect y="5.33" width="24" height="5.33" fill="#0039a6"/><rect y="10.67" width="24" height="5.33" fill="#d52b1e"/></svg>',
-  pt: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="9" height="16" fill="#006600"/><rect x="9" width="15" height="16" fill="#ff0000"/><circle cx="9.5" cy="8" r="2.5" fill="#ffcc00"/></svg>',
-  ur: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#01411c"/><rect width="6" height="16" fill="#ffffff"/><circle cx="15" cy="8" r="3" fill="#ffffff"/></svg>',
-  pl: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#ffffff"/><rect y="8" width="24" height="8" fill="#dc143c"/></svg>',
-  de: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="5.33" fill="#000"/><rect y="5.33" width="24" height="5.33" fill="#dd0000"/><rect y="10.67" width="24" height="5.33" fill="#ffce00"/></svg>',
-  it: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="8" height="16" fill="#009246"/><rect x="8" width="8" height="16" fill="#ffffff"/><rect x="16" width="8" height="16" fill="#ce2b37"/></svg>',
-  nl: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="5.33" fill="#ae1c28"/><rect y="5.33" width="24" height="5.33" fill="#fff"/><rect y="10.67" width="24" height="5.33" fill="#21468b"/></svg>',
-  sv: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#006aa7"/><rect x="6" width="3" height="16" fill="#fecc00"/><rect y="7" width="24" height="3" fill="#fecc00"/></svg>',
-  da: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#c8102e"/><rect x="6" width="2" height="16" fill="#fff"/><rect y="7" width="24" height="2" fill="#fff"/></svg>',
-  fi: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#fff"/><rect x="6" width="3" height="16" fill="#003580"/><rect y="7" width="24" height="3" fill="#003580"/></svg>',
-  no: '<svg viewBox=\"0 0 24 16\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"16\" fill=\"#ba0c2f\"/><rect x=\"6\" width=\"2\" height=\"16\" fill=\"#fff\"/><rect y=\"7\" width=\"24\" height=\"2\" fill=\"#fff\"/><rect x=\"7\" width=\"1\" height=\"16\" fill=\"#00205b\"/><rect y=\"8\" width=\"24\" height=\"1\" fill=\"#00205b\"/></svg>',
-  cs: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="5.33" fill="#fff"/><rect y="5.33" width="24" height="5.33" fill="#11457e"/><rect y="10.67" width="24" height="5.33" fill="#d7141a"/></svg>',
-  sk: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="5.33" fill="#fff"/><rect y="5.33" width="24" height="5.33" fill="#0b4ea2"/><rect y="10.67" width="24" height="5.33" fill="#ee1c25"/></svg>',
-  hu: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="5.33" fill="#cd2a3e"/><rect y="5.33" width="24" height="5.33" fill="#fff"/><rect y="10.67" width="24" height="5.33" fill="#436f4d"/></svg>',
-  ro: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="8" height="16" fill="#002b7f"/><rect x="8" width="8" height="16" fill="#fcd116"/><rect x="16" width="8" height="16" fill="#ce1126"/></svg>',
-  bg: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="5.33" fill="#fff"/><rect y="5.33" width="24" height="5.33" fill="#00966e"/><rect y="10.67" width="24" height="5.33" fill="#d62612"/></svg>',
-  el: '<svg viewBox=\"0 0 24 16\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"16\" fill=\"#0d5eaf\"/><rect y=\"2\" width=\"24\" height=\"2\" fill=\"#fff\"/><rect y=\"6\" width=\"24\" height=\"2\" fill=\"#fff\"/><rect y=\"10\" width=\"24\" height=\"2\" fill=\"#fff\"/><rect y=\"14\" width=\"24\" height=\"2\" fill=\"#fff\"/></svg>',
-  uk: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="8" fill="#0057b8"/><rect y="8" width="24" height="8" fill="#ffd700"/></svg>',
-  be: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="8" height="16" fill="#000"/><rect x="8" width="8" height="16" fill="#fecc00"/><rect x="16" width="8" height="16" fill="#ed1c24"/></svg>',
-  sr: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="5.33" fill="#ed1c24"/><rect y="5.33" width="24" height="5.33" fill="#0b4ea2"/><rect y="10.67" width="24" height="5.33" fill="#fff"/></svg>',
-  hr: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="5.33" fill="#ff0000"/><rect y="5.33" width="24" height="5.33" fill="#fff"/><rect y="10.67" width="24" height="5.33" fill="#0000ff"/></svg>',
-  sl: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="5.33" fill="#fff"/><rect y="5.33" width="24" height="5.33" fill="#0038a8"/><rect y="10.67" width="24" height="5.33" fill="#d40000"/></svg>',
-  lt: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="5.33" fill="#ffb81c"/><rect y="5.33" width="24" height="5.33" fill="#006a44"/><rect y="10.67" width="24" height="5.33" fill="#c1272d"/></svg>',
-  lv: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="6" fill="#8b1a1a"/><rect y="6" width="24" height="4" fill="#fff"/><rect y="10" width="24" height="6" fill="#8b1a1a"/></svg>',
-  et: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="5.33" fill="#0072ce"/><rect y="5.33" width="24" height="5.33" fill="#000"/><rect y="10.67" width="24" height="5.33" fill="#fff"/></svg>',
-  ga: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="8" height="16" fill="#169b62"/><rect x="8" width="8" height="16" fill="#fff"/><rect x="16" width="8" height="16" fill="#ff883e"/></svg>',
-  is: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#003897"/><rect x="6" width="2" height="16" fill="#fff"/><rect y="7" width="24" height="2" fill="#fff"/><rect x="7" width="1" height="16" fill="#d72828"/><rect y="8" width="24" height="1" fill="#d72828"/></svg>',
-  mt: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="16" fill="#fff"/><rect x="12" width="12" height="16" fill="#cf142b"/></svg>',
-  sq: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#e41e20"/></svg>',
-  mk: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#d20000"/><circle cx="12" cy="8" r="3" fill="#ffe600"/></svg>',
-  bs: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#002f6c"/><rect y="10" width="24" height="6" fill="#fcd116"/></svg>',
-  tr: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#e30a17"/></svg>',
-  ca: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="2" fill="#f1c40f"/><rect y="2" width="24" height="2" fill="#e74c3c"/><rect y="4" width="24" height="2" fill="#f1c40f"/><rect y="6" width="24" height="2" fill="#e74c3c"/><rect y="8" width="24" height="2" fill="#f1c40f"/><rect y="10" width="24" height="2" fill="#e74c3c"/><rect y="12" width="24" height="2" fill="#f1c40f"/><rect y="14" width="24" height="2" fill="#e74c3c"/></svg>',
-  gl: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#ffffff"/><rect y="6" width="24" height="4" fill="#00a3e8"/></svg>',
-  cy: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="8" fill="#ffffff"/><rect y="8" width="24" height="8" fill="#007a3d"/></svg>',
-  gd: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#0065bd"/></svg>',
-  eu: '<svg viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="16" fill="#d52b1e"/><rect y="7" width="24" height="2" fill="#fff"/><rect x="11" width="2" height="16" fill="#fff"/><rect x="11" width="2" height="16" fill="#2e8b57"/></svg>'
-};
-
-const languages = computed(() => {
-  return locales.value
-    .map((code) => ({ code, label: t(`language.${code}`) }))
-    .sort((a, b) => a.label.localeCompare(b.label, locale.value));
-});
-
-const searchTerm = ref('');
-const filteredLanguages = computed(() => {
-  const q = searchTerm.value.trim().toLowerCase();
-  if (!q) return languages.value;
-  return languages.value.filter((l) => l.label.toLowerCase().includes(q) || l.code.includes(q));
-});
 
 const installLabel = computed(() => {
   return isCoarsePointer.value ? t('pwa.installMobile') : t('pwa.installDesktop');
@@ -165,24 +86,6 @@ const handleSystemThemeChange = () => {
   }
 };
 
-const selectLanguage = (value) => {
-  setLocale(value);
-  isLangOpen.value = false;
-};
-
-const handleOutsideClick = (event) => {
-  if (!langMenuRef.value) return;
-  if (!langMenuRef.value.contains(event.target)) {
-    isLangOpen.value = false;
-  }
-};
-
-const handleKeydown = (e) => {
-  if (e.key === 'Escape') {
-    isLangOpen.value = false;
-  }
-};
-
 onMounted(() => {
   if (!store.loadState()) {
     store.initGame(); // Inicjalizacja domyślnej gry jeśli brak zapisu
@@ -209,8 +112,6 @@ onMounted(() => {
     } else if (displayModeMedia?.addListener) {
       displayModeMedia.addListener(updateStandalone);
     }
-    document.addEventListener('click', handleOutsideClick);
-    document.addEventListener('keydown', handleKeydown);
   }
 });
 
@@ -228,73 +129,18 @@ onUnmounted(() => {
   } else if (displayModeMedia?.removeListener) {
     displayModeMedia.removeListener(updateStandalone);
   }
-  document.removeEventListener('click', handleOutsideClick);
-  document.removeEventListener('keydown', handleKeydown);
 });
 </script>
 
 <template>
   <main class="game-container">
+    <NavBar 
+      @open-custom="showCustomModal = true" 
+      @toggle-guide="showGuide = !showGuide"
+      @set-theme="setThemePreference"
+    />
     <FixedBar />
 
-    <header class="game-header">
-      <h1>{{ t('app.title') }}</h1>
-      <div class="header-toggles">
-        <div class="lang-dropdown" ref="langMenuRef">
-          <button
-            class="lang-trigger"
-            type="button"
-            :aria-label="t('language.label')"
-            :aria-expanded="isLangOpen"
-            @click="isLangOpen = !isLangOpen"
-          >
-            <span class="lang-flag">
-              <img v-if="getFlagUrl(locale)" :src="getFlagUrl(locale)" alt="" />
-              <span v-else v-html="languageFlags[locale]"></span>
-            </span>
-          </button>
-          <div v-if="isLangOpen" class="lang-menu">
-            <div class="lang-search">
-              <input
-                class="lang-search-input"
-                type="text"
-                :placeholder="t('language.searchPlaceholder')"
-                :aria-label="t('language.searchLabel')"
-                v-model="searchTerm"
-              />
-            </div>
-            <button
-              v-for="lang in filteredLanguages"
-              :key="lang.code"
-              class="lang-option"
-              :class="{ active: locale === lang.code }"
-              type="button"
-              @click="selectLanguage(lang.code)"
-            >
-              <span class="lang-flag">
-                <img v-if="getFlagUrl(lang.code)" :src="getFlagUrl(lang.code)" alt="" />
-                <span v-else v-html="languageFlags[lang.code]"></span>
-              </span>
-              <span class="lang-name">{{ lang.label }}</span>
-            </button>
-          </div>
-        </div>
-        <div class="theme-toggle">
-          <span class="theme-label">{{ t('theme.label') }}</span>
-          <button class="theme-btn" :class="{ active: themePreference === 'system' }" @click="setThemePreference('system')">
-            {{ t('theme.system') }}
-          </button>
-          <button class="theme-btn" :class="{ active: themePreference === 'light' }" @click="setThemePreference('light')">
-            {{ t('theme.light') }}
-          </button>
-          <button class="theme-btn" :class="{ active: themePreference === 'dark' }" @click="setThemePreference('dark')">
-            {{ t('theme.dark') }}
-          </button>
-        </div>
-      </div>
-      <div class="underline"></div>
-    </header>
-
     <div v-if="canInstall && !installDismissed" class="install-banner">
       <div class="install-text">{{ t('pwa.installTitle') }}</div>
       <div class="install-actions">
@@ -306,12 +152,6 @@ onUnmounted(() => {
     </div>
 
     <div class="game-layout">
-      <!-- Level Selection -->
-      <LevelSelector 
-        @open-custom="showCustomModal = true" 
-        @toggle-guide="showGuide = !showGuide"
-      />
-
       <!-- Guide Panel (Conditional) -->
       <transition name="fade">
           <GuidePanel v-if="showGuide" />
@@ -320,19 +160,21 @@ onUnmounted(() => {
       <!-- Status Panel (Time, Moves, Progress) -->
       <StatusPanel />
 
-      <!-- Game Actions (Reset, Random, Undo, Check) -->
-      <GameActions />
-
       <!-- Game Board -->
       <section class="board-section">
         <GameBoard />
       </section>
     </div>
 
+    <footer class="app-version">
+      v{{ appVersion }}
+    </footer>
+
     <!-- Modals Teleport -->
     <Teleport to="body">
       <WinModal v-if="store.isGameWon" />
       <CustomGameModal v-if="showCustomModal" @close="showCustomModal = false" />
+      <ReloadPrompt />
     </Teleport>
   </main>
 </template>
@@ -347,285 +189,77 @@ onUnmounted(() => {
   padding-bottom: 50px;
 }
 
-.game-header {
+.install-banner {
-  text-align: center;
+  background: var(--banner-bg);
-  margin-bottom: 30px;
+  border: 1px solid var(--banner-border);
-  margin-top: 40px;
+  border-radius: 8px;
-}
+  padding: 10px 20px;
-
+  display: flex;
-h1 {
+  justify-content: space-between;
-  font-size: 3.5rem;
+  align-items: center;
-  margin: 0;
+  width: 90%;
-  letter-spacing: 5px;
+  max-width: 600px;
-  font-weight: 300;
+  margin-bottom: 20px;
-  color: var(--text-strong);
+  box-shadow: var(--banner-shadow);
-  text-shadow: 0 0 20px var(--title-glow);
+}
-}
+
-
+.install-text {
-.underline {
+  color: var(--text-color);
-  width: 100px;
+}
-  height: 3px;
+
-  background: var(--primary-accent);
+.install-actions {
-  margin: 10px auto 0;
-  box-shadow: 0 0 10px var(--primary-accent);
-}
-
-.header-toggles {
   display: flex;
-  flex-wrap: wrap;
   gap: 10px;
   align-items: center;
-  justify-content: center;
-  margin-top: 12px;
 }
 
-.lang-dropdown {
+.install-close {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.lang-trigger {
-  background: var(--toggle-bg);
-  border: 1px solid var(--toggle-border);
-  box-shadow: var(--toggle-shadow);
-  border-radius: 999px;
-  width: 38px;
-  height: 38px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.lang-trigger:hover {
-  border-color: var(--toggle-hover-border);
-}
-
-.lang-menu {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  min-width: 170px;
-  background: var(--fixed-bar-bg);
-  border: 1px solid var(--fixed-bar-border);
-  box-shadow: var(--fixed-bar-shadow);
-  border-radius: 16px;
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  z-index: 10;
-  opacity: 1;
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
-.lang-search {
-  display: flex;
-  padding: 6px;
-}
-
-.lang-search-input {
-  width: 100%;
-  padding: 8px 10px;
-  border: 1px solid var(--toggle-btn-border);
-  border-radius: 10px;
-  background: var(--toggle-bg);
-  color: var(--text-strong);
-  outline: none;
-}
-
-.lang-option {
   background: transparent;
-  border: 1px solid var(--toggle-btn-border);
+  border: none;
-  color: var(--text-strong);
-  padding: 6px 10px;
-  border-radius: 12px;
-  font-size: 0.85rem;
-  letter-spacing: 0.5px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  text-align: left;
-}
-
-.lang-option:hover {
-  border-color: var(--toggle-hover-border);
-}
-
-.lang-option.active {
-  border-color: var(--primary-accent);
-  box-shadow: var(--toggle-active-shadow);
-}
-
-.lang-flag {
-  width: 24px;
-  height: 16px;
-  display: inline-flex;
-}
-
-.lang-flag svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-  border-radius: 2px;
-}
-
-.lang-name {
-  font-weight: 500;
-}
-
-.theme-toggle {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  padding: 6px 10px;
-  border-radius: 999px;
-  background: var(--toggle-bg);
-  border: 1px solid var(--toggle-border);
-  box-shadow: var(--toggle-shadow);
-}
-
-.theme-label {
-  font-size: 0.75rem;
-  letter-spacing: 1px;
-  text-transform: uppercase;
   color: var(--text-muted);
-}
+  font-size: 1.5rem;
-
-.theme-btn {
-  background: transparent;
-  border: 1px solid var(--toggle-btn-border);
-  color: var(--text-strong);
-  padding: 4px 10px;
-  border-radius: 999px;
-  font-size: 0.75rem;
-  letter-spacing: 1px;
   cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.theme-btn.active {
-  border-color: var(--primary-accent);
-  box-shadow: var(--toggle-active-shadow);
-}
-
-.theme-btn:hover {
-  border-color: var(--toggle-hover-border);
 }
 
 .game-layout {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  align-items: center;
+  gap: 20px;
   width: 100%;
-  max-width: 900px;
+  max-width: 1200px;
-  align-items: center;
+  padding: 0 20px;
 }
 
-.install-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px 16px;
-  border-radius: 16px;
-  background: var(--banner-bg);
-  border: 1px solid var(--banner-border);
-  box-shadow: var(--banner-shadow);
-  width: min(680px, 92vw);
-  margin: -10px 0 20px;
-}
-
-.install-text {
-  color: var(--text-secondary);
-  font-size: 0.95rem;
-  letter-spacing: 0.5px;
-}
-
-.install-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.install-btn {
-  padding: 8px 16px;
-  font-size: 0.85rem;
-}
-
-.install-close {
-  background: transparent;
-  border: 1px solid var(--toggle-btn-border);
-  color: var(--text-strong);
-  width: 32px;
-  height: 32px;
-  border-radius: 999px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.1rem;
-  line-height: 1;
-  transition: all 0.2s ease;
-}
-
-.install-close:hover {
-  border-color: var(--toggle-hover-border);
-}
-
-/* Remove old glass panel style from game-layout since we split it */
 .board-section {
   display: flex;
   justify-content: center;
-  margin-top: 10px;
+  width: 100%;
 }
 
-@media (max-width: 768px) {
+.fade-enter-active,
-  .game-header {
+.fade-leave-active {
-    margin-top: 20px;
+  transition: opacity 0.3s ease;
-    margin-bottom: 20px;
-  }
-  h1 {
-    font-size: 2.4rem;
-    letter-spacing: 3px;
-  }
-  .lang-menu {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100vw;
-    min-width: 0;
-    z-index: 1005;
-    max-height: none;
-    padding: 16px;
-    border-radius: 0;
-  }
-  .lang-search {
-    position: sticky;
-    top: 0;
-    padding: 8px 0 12px 0;
-    background: var(--fixed-bar-bg);
-  }
-  .lang-option {
-    font-size: 1rem;
-    padding: 10px 12px;
-  }
 }
 
-@media (max-width: 420px) {
+.fade-enter-from,
-  h1 {
+.fade-leave-to {
-    font-size: 2rem;
+  opacity: 0;
-    letter-spacing: 2px;
+}
-  }
+
-  .lang-menu {
+.app-version {
-    width: 100vw;
+  position: fixed;
-  }
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  padding: 10px;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  opacity: 0.8;
+  background: var(--panel-bg);
+  backdrop-filter: blur(5px);
+  border-top: 1px solid var(--panel-border);
+  z-index: 90;
 }
 </style>

src/components/Cell.vue

@@ -34,35 +34,30 @@ const clearLongPress = () => {
 
 const handlePointerDown = (e) => {
   if (e.pointerType === 'mouse') {
-    if (e.button === 0) emit('start-drag', props.r, props.c, false);
+    if (e.button === 0) emit('start-drag', props.r, props.c, false, false);
-    if (e.button === 2) emit('start-drag', props.r, props.c, true);
+    if (e.button === 2) emit('start-drag', props.r, props.c, true, false);
     return;
   }
-  longPressTriggered = false;
+  
-  clearLongPress();
+  // Touch logic
-  longPressTimer = setTimeout(() => {
+  const now = Date.now();
-    longPressTriggered = true;
+  if (now - lastTap < 300) {
-    emit('start-drag', props.r, props.c, true);
+    // Double tap -> X (Force)
-  }, 450);
+    emit('start-drag', props.r, props.c, true, true);
+    lastTap = 0;
+  } else {
+    // Single tap / Start drag -> Fill
+    emit('start-drag', props.r, props.c, false, false);
+    lastTap = now;
+  }
 };
 
 const handlePointerUp = (e) => {
-  if (e.pointerType === 'mouse') return;
+  // Handled in pointerdown
-  clearLongPress();
-  if (longPressTriggered) return;
-  const now = Date.now();
-  const isDoubleTap = now - lastTap < 300;
-  lastTap = now;
-  if (isDoubleTap) {
-    emit('start-drag', props.r, props.c, true);
-  } else {
-    emit('start-drag', props.r, props.c, false);
-  }
 };
 
 const handlePointerCancel = (e) => {
-  if (e.pointerType === 'mouse') return;
+  // Handled in pointerdown
-  clearLongPress();
 };
 </script>
 

src/components/GameActions.vue

@@ -1,48 +0,0 @@
-<script setup>
-import { usePuzzleStore } from '@/stores/puzzle';
-import { useI18n } from '@/composables/useI18n';
-
-const store = usePuzzleStore();
-const { t } = useI18n();
-
-function handleNewRandom() {
-    // If currently custom, regenerate custom.
-    // If not custom, switch to custom with current size? 
-    // Or maybe just re-init current level if it's not custom?
-    // "NOWA LOSOWA" implies random.
-    // If user is on Easy/Medium/Hard, "Random" might mean "Random predefined" or "Random generated".
-    // Let's assume it generates a new random grid of current size.
-    store.initCustomGame(store.size);
-}
-</script>
-
-<template>
-  <div class="game-actions">
-    <button class="btn-neon secondary" @click="store.resetGame">{{ t('actions.reset') }}</button>
-    <button class="btn-neon secondary" @click="handleNewRandom">{{ t('actions.random') }}</button>
-    <button class="btn-neon secondary" @click="store.undo">{{ t('actions.undo') }}</button>
-  </div>
-</template>
-
-<style scoped>
-.game-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
-  justify-content: center;
-  margin-bottom: 30px;
-}
-
-.btn-neon.secondary {
-  border-color: var(--button-secondary-border);
-  color: var(--button-secondary-text);
-  font-size: 0.9rem;
-  padding: 10px 25px;
-}
-
-.btn-neon.secondary:hover {
-  background: var(--button-secondary-hover-bg);
-  border-color: var(--button-secondary-hover-border);
-  color: var(--button-secondary-hover-text);
-}
-</style>

src/components/GameBoard.vue

@@ -15,6 +15,94 @@ const rowHintsRef = ref(null);
 const activeRow = ref(null);
 const activeCol = ref(null);
 const isFinePointer = ref(false);
+const scrollWrapper = ref(null);
+const scrollTrack = ref(null);
+const showScrollbar = ref(false);
+const thumbWidth = ref(20);
+const thumbLeft = ref(0);
+let isDraggingScroll = false;
+let dragStartX = 0;
+let dragStartLeft = 0;
+
+const checkScroll = () => {
+  const el = scrollWrapper.value;
+  if (!el) return;
+  const sw = el.scrollWidth;
+  const cw = el.clientWidth;
+  
+  // Only show custom scrollbar on mobile/tablet (width < 768px) and if content overflows
+  const isMobile = window.innerWidth <= 768;
+  showScrollbar.value = isMobile && (sw > cw + 1);
+  
+  if (showScrollbar.value) {
+    // Thumb width percentage = (viewport / total) * 100
+    const ratio = cw / sw;
+    thumbWidth.value = Math.max(10, ratio * 100);
+  }
+};
+
+const handleScroll = () => {
+  if (isDraggingScroll) return;
+  const el = scrollWrapper.value;
+  if (!el) return;
+  const sw = el.scrollWidth;
+  const cw = el.clientWidth;
+  const sl = el.scrollLeft;
+  const maxScroll = sw - cw;
+  if (maxScroll <= 0) return;
+  
+  // Map scroll position to thumb position (0 to 100 - thumbWidth)
+  const maxThumb = 100 - thumbWidth.value;
+  thumbLeft.value = (sl / maxScroll) * maxThumb;
+};
+
+const startScrollDrag = (e) => {
+  isDraggingScroll = true;
+  dragStartX = e.clientX || e.touches[0].clientX;
+  dragStartLeft = thumbLeft.value;
+  
+  document.addEventListener('mousemove', onScrollDrag);
+  document.addEventListener('mouseup', stopScrollDrag);
+  document.addEventListener('touchmove', onScrollDrag, { passive: false });
+  document.addEventListener('touchend', stopScrollDrag);
+};
+
+const onScrollDrag = (e) => {
+  if (!isDraggingScroll || !scrollTrack.value) return;
+  
+  const clientX = e.clientX || (e.touches ? e.touches[0].clientX : 0);
+  const deltaX = clientX - dragStartX;
+  const trackWidth = scrollTrack.value.offsetWidth;
+  
+  if (trackWidth === 0) return;
+  
+  // Calculate delta as percentage of track
+  const deltaPercent = (deltaX / trackWidth) * 100;
+  
+  // New thumb position
+  let newLeft = dragStartLeft + deltaPercent;
+  const maxThumb = 100 - thumbWidth.value;
+  newLeft = Math.max(0, Math.min(maxThumb, newLeft));
+  
+  thumbLeft.value = newLeft;
+  
+  // Sync scroll
+  const el = scrollWrapper.value;
+  if (el) {
+    const sw = el.scrollWidth;
+    const cw = el.clientWidth;
+    const maxScroll = sw - cw;
+    el.scrollLeft = (newLeft / maxThumb) * maxScroll;
+  }
+};
+
+const stopScrollDrag = () => {
+  isDraggingScroll = false;
+  document.removeEventListener('mousemove', onScrollDrag);
+  document.removeEventListener('mouseup', stopScrollDrag);
+  document.removeEventListener('touchmove', onScrollDrag);
+  document.removeEventListener('touchend', stopScrollDrag);
+};
 
 const getRowHintsWidth = () => {
   const el = rowHintsRef.value?.$el;
@@ -23,17 +111,27 @@ const getRowHintsWidth = () => {
 };
 
 const computeCellSize = () => {
-  const vw = Math.min(window.innerWidth, 900);
   const rootStyles = getComputedStyle(document.documentElement);
   const hintWidth = getRowHintsWidth();
   const gapRaw = rootStyles.getPropertyValue('--gap-size') || '2px';
   const gridPadRaw = rootStyles.getPropertyValue('--grid-padding') || '5px';
   const gap = parseFloat(gapRaw);
   const gridPad = parseFloat(gridPadRaw);
-  const bodyStyles = getComputedStyle(document.body);
+
-  const bodyPadding = parseFloat(bodyStyles.paddingLeft) + parseFloat(bodyStyles.paddingRight);
+  let containerWidth;
-  const availableForGrid = vw - bodyPadding - hintWidth;
+  if (scrollWrapper.value) {
+    containerWidth = scrollWrapper.value.clientWidth;
+  } else {
+    // Fallback if wrapper not ready: window width minus estimated padding
+    // Body padding (40) + Layout padding (40) = 80
+    containerWidth = window.innerWidth - 80;
+  }
+  
+  // Ensure we don't have negative space
+  const availableForGrid = Math.max(0, containerWidth - hintWidth);
+  
   const size = Math.floor((availableForGrid - gridPad * 2 - (store.size - 1) * gap) / store.size);
+  // Keep min 18, max 36
   cellSize.value = Math.max(18, Math.min(36, size));
 };
 
@@ -74,6 +172,7 @@ onMounted(() => {
   });
   isFinePointer.value = window.matchMedia('(pointer: fine)').matches;
   window.addEventListener('resize', computeCellSize);
+  window.addEventListener('resize', checkScroll);
   window.addEventListener('mouseup', handleGlobalMouseUp);
   window.addEventListener('pointerup', handleGlobalPointerUp);
   window.addEventListener('touchend', handleGlobalPointerUp, { passive: true });
@@ -81,6 +180,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', computeCellSize);
+  window.removeEventListener('resize', checkScroll);
   window.removeEventListener('mouseup', handleGlobalMouseUp);
   window.removeEventListener('pointerup', handleGlobalPointerUp);
   window.removeEventListener('touchend', handleGlobalPointerUp);
@@ -89,11 +189,12 @@ onUnmounted(() => {
 watch(() => store.size, async () => {
   await nextTick();
   computeCellSize();
+  checkScroll();
 });
 </script>
 
 <template>
-  <div class="game-board-wrapper">
+  <div class="game-board-wrapper" ref="scrollWrapper" @scroll="handleScroll">
     <div class="game-container" :style="{ '--cell-size': `${cellSize}px` }">
       <div class="corner-spacer"></div>
       
@@ -131,13 +232,39 @@ watch(() => store.size, async () => {
       </div>
     </div>
   </div>
+
+  <Teleport to="body">
+    <div v-if="showScrollbar" class="fixed-scroll-bar">
+      <div class="fixed-scroll-track" ref="scrollTrack" @pointerdown="startScrollDrag">
+        <div 
+          class="fixed-scroll-thumb" 
+          :style="{ width: `${thumbWidth}%`, left: `${thumbLeft}%` }"
+        ></div>
+      </div>
+    </div>
+  </Teleport>
 </template>
 
 <style scoped>
 .game-board-wrapper {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
+  overflow-x: auto;
+  width: 100%;
+  scrollbar-width: none; /* Hide default scrollbar */
+}
+
+/* Desktop: Remove scroll behavior to ensure full grid visibility */
+@media (min-width: 769px) {
+  .game-board-wrapper {
+    overflow-x: auto; /* Allow scrolling if grid is too large (e.g. 80x80) */
+    align-items: center; /* Center the grid on desktop */
+  }
+}
+
+.game-board-wrapper::-webkit-scrollbar {
+  display: none;
 }
 
 .game-container {
@@ -145,17 +272,24 @@ watch(() => store.size, async () => {
   grid-template-columns: auto auto;
   grid-template-rows: auto auto;
   gap: 0;
-  padding: 20px;
+  padding: 0;
-  background: rgba(0, 0, 0, 0.2);
+  background: transparent;
-  border-radius: 16px;
+  box-shadow: none;
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
   margin-top: 10px;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
 }
 
 .corner-spacer {
   height: auto; /* Adapts to Col Hints height */
 }
 
+/* Row Hints */
+.game-container > :nth-child(3) {
+  /* No special styles */
+}
+
 .grid {
   display: grid;
   gap: var(--gap-size);

src/components/GuidePanel.vue

@@ -35,8 +35,8 @@ const { t } = useI18n();
 
 <style scoped>
 .guide-panel {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--panel-bg);
-    border: 1px solid rgba(0, 242, 254, 0.3);
+    border: 1px solid var(--panel-border);
     border-radius: 12px;
     padding: 15px;
     margin-bottom: 20px;
@@ -46,6 +46,7 @@ const { t } = useI18n();
     flex-direction: column;
     align-items: center;
     backdrop-filter: blur(5px);
+    box-shadow: var(--panel-shadow);
 }
 
 .status-text {
@@ -53,7 +54,7 @@ const { t } = useI18n();
     text-align: center;
     margin-bottom: 10px;
     font-size: 0.9rem;
-    color: #ccc;
+    color: var(--text-muted);
     min-height: 20px;
     font-style: italic;
 }

src/components/Hints.vue

@@ -32,12 +32,13 @@ defineProps({
       v-for="(group, index) in hints" 
       :key="index" 
       class="hint-group"
-      :class="{ 'hint-alt': index % 2 !== 0, 'is-active': index === activeIndex }"
+      :class="{ 'is-active': index === activeIndex }"
     >
       <span 
         v-for="(num, idx) in group" 
         :key="idx" 
         class="hint-num"
+        :class="{ 'hint-alt': idx % 2 !== 0 }"
       >
         {{ num }}
       </span>
@@ -94,8 +95,8 @@ defineProps({
   padding: 2px;
 }
 
-/* Alternating Colors */
+/* Alternating Colors within the group */
-.hint-group.hint-alt .hint-num {
+.hint-num.hint-alt {
     color: var(--accent-cyan);
 }
 

src/components/LevelSelector.vue

@@ -1,67 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { usePuzzleStore } from '@/stores/puzzle';
-import { useI18n } from '@/composables/useI18n';
-
-const store = usePuzzleStore();
-const { t } = useI18n();
-
-const levels = computed(() => [
-  { id: 'easy', label: t('level.easy') },
-  { id: 'medium', label: t('level.medium') },
-  { id: 'hard', label: t('level.hard') }
-]);
-
-const emit = defineEmits(['open-custom', 'toggle-guide']);
-</script>
-
-<template>
-  <div class="level-selector">
-    <button 
-      v-for="lvl in levels" 
-      :key="lvl.id"
-      class="btn-neon" 
-      :class="{ active: store.currentLevelId === lvl.id }"
-      @click="store.initGame(lvl.id)"
-    >
-      {{ lvl.label }}
-    </button>
-    
-    <button 
-        class="btn-neon"
-        :class="{ active: store.currentLevelId === 'custom' }"
-        @click="emit('open-custom')"
-    >
-        {{ t('level.custom') }}
-    </button>
-
-    <button 
-        class="btn-neon guide-btn"
-        @click="emit('toggle-guide')"
-    >
-        {{ t('level.guide') }}
-    </button>
-  </div>
-</template>
-
-<style scoped>
-.level-selector {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
-  justify-content: center;
-  margin-bottom: 20px;
-}
-
-.btn-neon {
-  padding: 10px 20px;
-  border-radius: 20px;
-  text-transform: uppercase;
-  font-size: 0.9rem;
-  letter-spacing: 1px;
-}
-
-.guide-btn {
-  /* Specific styling for guide if needed */
-}
-</style>

src/components/NavBar.vue

@@ -0,0 +1,715 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { usePuzzleStore } from '@/stores/puzzle';
+import { useI18n } from '@/composables/useI18n';
+import { Gamepad2, Palette, CircleHelp, Sun, Moon, Menu, X, ChevronDown, ChevronUp, Monitor } from 'lucide-vue-next';
+
+const store = usePuzzleStore();
+const { t, locale, setLocale, locales } = useI18n();
+
+const emit = defineEmits(['open-custom', 'toggle-guide', 'set-theme']);
+
+const isGameOpen = ref(false);
+const isThemeOpen = ref(false);
+const isLangOpen = ref(false);
+const isMobileMenuOpen = ref(false);
+const langMenuRef = ref(null);
+const searchTerm = ref('');
+
+// Map language codes to country codes for flag-icons
+const langToCountry = {
+  en: 'gb',
+  zh: 'cn',
+  'zh-hant': 'tw',
+  hi: 'in',
+  es: 'es',
+  fr: 'fr',
+  ar: 'sa',
+  bn: 'bd',
+  ru: 'ru',
+  pt: 'pt',
+  ur: 'pk',
+  pl: 'pl',
+  de: 'de',
+  it: 'it',
+  nl: 'nl',
+  sv: 'se',
+  da: 'dk',
+  fi: 'fi',
+  no: 'no',
+  cs: 'cz',
+  sk: 'sk',
+  hu: 'hu',
+  ro: 'ro',
+  bg: 'bg',
+  el: 'gr',
+  uk: 'ua',
+  be: 'by',
+  sr: 'rs',
+  hr: 'hr',
+  sl: 'si',
+  lt: 'lt',
+  lv: 'lv',
+  et: 'ee',
+  ga: 'ie',
+  is: 'is',
+  mt: 'mt',
+  sq: 'al',
+  mk: 'mk',
+  bs: 'ba',
+  tr: 'tr',
+  ca: 'es-ct',
+  gl: 'es-ga',
+  cy: 'gb-wls',
+  gd: 'gb-sct',
+  eu: 'es-pv',
+  af: 'za',
+  am: 'et',
+  hy: 'am',
+  az: 'az',
+  my: 'mm',
+  km: 'kh',
+  ceb: 'ph',
+  fa: 'ir',
+  gu: 'in',
+  ht: 'ht',
+  he: 'il',
+  ig: 'ng',
+  ilo: 'ph',
+  id: 'id',
+  ja: 'jp',
+  jv: 'id',
+  kn: 'in',
+  kk: 'kz',
+  rw: 'rw',
+  rn: 'bi',
+  ko: 'kr',
+  ku: 'tr',
+  ckb: 'iq',
+  ky: 'kg',
+  lo: 'la',
+  ms: 'my',
+  mr: 'in',
+  mn: 'mn',
+  ne: 'np',
+  om: 'et',
+  ps: 'af',
+  pa: 'in',
+  so: 'so',
+  sw: 'tz',
+  tl: 'ph',
+  ta: 'in',
+  te: 'in',
+  th: 'th',
+  bo: 'cn',
+  ti: 'er',
+  uz: 'uz',
+  vi: 'vn',
+  wo: 'sn',
+  yo: 'ng',
+  'pt-br': 'br',
+  'pt-pt': 'pt',
+  'fr-ca': 'ca',
+  'nl-be': 'be',
+  'es-es': 'es',
+  'es-419': 'mx',
+  'zh-hant': 'tw',
+  'zh-hans': 'cn'
+};
+
+const getFlagClass = (code) => {
+  const countryCode = langToCountry[code] || code;
+  return `fi fi-${countryCode}`;
+};
+
+const languages = computed(() => {
+  return locales.value
+    .map((code) => ({ code, label: t(`language.${code}`) }))
+    .sort((a, b) => a.label.localeCompare(b.label, locale.value));
+});
+
+const filteredLanguages = computed(() => {
+  const q = searchTerm.value.trim().toLowerCase();
+  if (!q) return languages.value;
+  return languages.value.filter((l) => l.label.toLowerCase().includes(q) || l.code.includes(q));
+});
+
+const levels = computed(() => [
+  { id: 'easy', label: t('level.easy') },
+  { id: 'medium', label: t('level.medium') },
+  { id: 'hard', label: t('level.hard') }
+]);
+
+const closeMobileMenu = () => {
+  isMobileMenuOpen.value = false;
+};
+
+const toggleGameMenu = () => {
+  isGameOpen.value = !isGameOpen.value;
+  if (isGameOpen.value) {
+      isThemeOpen.value = false;
+      isLangOpen.value = false;
+  }
+};
+
+const toggleThemeMenu = () => {
+  isThemeOpen.value = !isThemeOpen.value;
+  if (isThemeOpen.value) {
+      isGameOpen.value = false;
+      isLangOpen.value = false;
+  }
+};
+
+const toggleLangMenu = () => {
+  isLangOpen.value = !isLangOpen.value;
+  if (isLangOpen.value) {
+      isGameOpen.value = false;
+      isThemeOpen.value = false;
+  }
+};
+
+const selectLevel = (id) => {
+  store.initGame(id);
+  isGameOpen.value = false;
+  closeMobileMenu();
+};
+
+const openCustom = () => {
+  emit('open-custom');
+  isGameOpen.value = false;
+  closeMobileMenu();
+};
+
+const setTheme = (theme) => {
+  emit('set-theme', theme);
+  isThemeOpen.value = false;
+  closeMobileMenu();
+};
+
+const selectLanguage = (value) => {
+  setLocale(value);
+  isLangOpen.value = false;
+  closeMobileMenu();
+};
+
+const toggleGuide = () => {
+    emit('toggle-guide');
+    closeMobileMenu();
+};
+
+// Close menus when clicking outside
+const closeMenus = (e) => {
+  if (isMobileMenuOpen.value) return; // Don't close desktop menus if mobile is open (handled separately)
+
+  if (!e.target.closest('.nav-dropdown')) {
+    isGameOpen.value = false;
+    isThemeOpen.value = false;
+    isLangOpen.value = false;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', closeMenus);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeMenus);
+});
+
+// Watch mobile menu to lock body scroll
+watch(isMobileMenuOpen, (val) => {
+    if (val) {
+        document.body.style.overflow = 'hidden';
+    } else {
+        document.body.style.overflow = '';
+    }
+});
+</script>
+
+<template>
+  <nav class="navbar">
+    <div class="nav-left">
+      <h1 class="app-title">{{ t('app.title') }}</h1>
+    </div>
+
+    <!-- Mobile Hamburger -->
+    <button class="btn-neon nav-btn icon-only mobile-only" @click="isMobileMenuOpen = true">
+        <Menu :size="24" />
+    </button>
+
+    <div class="nav-container desktop-only">
+      <!-- Game Menu -->
+      <div class="nav-dropdown">
+        <button class="btn-neon nav-btn" @click.stop="toggleGameMenu">
+          <Gamepad2 :size="18" /> {{ t('nav.newGame') }}
+        </button>
+        <transition name="slide-fade">
+          <div v-if="isGameOpen" class="dropdown-menu">
+            <button 
+              v-for="lvl in levels" 
+              :key="lvl.id"
+              class="dropdown-item"
+              @click="selectLevel(lvl.id)"
+            >
+              {{ lvl.label }}
+            </button>
+            <button class="dropdown-item" @click="openCustom">
+              {{ t('level.custom') }}
+            </button>
+          </div>
+        </transition>
+      </div>
+
+      <!-- Theme Menu -->
+      <div class="nav-dropdown">
+        <button class="btn-neon nav-btn" @click.stop="toggleThemeMenu">
+          <Palette :size="18" /> {{ t('theme.label') }}
+        </button>
+        <transition name="slide-fade">
+          <div v-if="isThemeOpen" class="dropdown-menu theme-menu">
+            <button class="dropdown-item" @click="setTheme('system')">
+              <Monitor :size="16" /> {{ t('theme.system') }}
+            </button>
+            <button class="dropdown-item" @click="setTheme('light')">
+              <Sun :size="16" /> {{ t('theme.light') }}
+            </button>
+            <button class="dropdown-item" @click="setTheme('dark')">
+              <Moon :size="16" /> {{ t('theme.dark') }}
+            </button>
+          </div>
+        </transition>
+      </div>
+
+      <!-- Guide Button -->
+      <button class="btn-neon nav-btn" @click="toggleGuide">
+        <CircleHelp :size="18" /> {{ t('nav.guide') }}
+      </button>
+
+      <!-- Language Menu -->
+      <div class="nav-dropdown">
+        <button class="btn-neon nav-btn icon-only flag-btn" @click.stop="toggleLangMenu">
+           <span class="lang-flag-current">
+              <span :class="getFlagClass(locale)"></span>
+           </span>
+        </button>
+        <transition name="slide-fade">
+          <div v-if="isLangOpen" class="dropdown-menu lang-menu-dropdown">
+            <div class="lang-search">
+              <input
+                class="lang-search-input"
+                type="text"
+                :placeholder="t('language.searchPlaceholder')"
+                v-model="searchTerm"
+                @click.stop
+              />
+            </div>
+            <div class="lang-list">
+              <button
+                v-for="lang in filteredLanguages"
+                :key="lang.code"
+                class="dropdown-item"
+                :class="{ active: locale === lang.code }"
+                @click="selectLanguage(lang.code)"
+              >
+                <span class="lang-flag-item">
+                  <span :class="getFlagClass(lang.code)"></span>
+                </span>
+                <span class="lang-name">{{ lang.label }}</span>
+              </button>
+            </div>
+          </div>
+        </transition>
+      </div>
+    </div>
+
+    <!-- Mobile Menu Overlay -->
+    <transition name="fade">
+        <div v-if="isMobileMenuOpen" class="mobile-menu-overlay">
+            <div class="mobile-menu-header">
+                <h2 class="mobile-title">{{ t('app.title') }}</h2>
+                <button class="btn-neon nav-btn icon-only close-btn" @click="closeMobileMenu">
+                    <X :size="24" />
+                </button>
+            </div>
+            
+            <div class="mobile-menu-items">
+                <!-- Mobile Game Menu -->
+                <div class="mobile-group">
+                    <button class="mobile-item-trigger" @click="toggleGameMenu">
+                        <span class="flex-center gap-10"><Gamepad2 :size="20" /> {{ t('nav.newGame') }}</span>
+                        <component :is="isGameOpen ? ChevronUp : ChevronDown" :size="16" />
+                    </button>
+                    <div v-if="isGameOpen" class="mobile-sub-menu">
+                         <button 
+                            v-for="lvl in levels" 
+                            :key="lvl.id"
+                            class="mobile-sub-item"
+                            @click="selectLevel(lvl.id)"
+                          >
+                            {{ lvl.label }}
+                          </button>
+                          <button class="mobile-sub-item" @click="openCustom">
+                            {{ t('level.custom') }}
+                          </button>
+                    </div>
+                </div>
+
+                <!-- Mobile Theme Menu -->
+                <div class="mobile-group">
+                    <button class="mobile-item-trigger" @click="toggleThemeMenu">
+                        <span class="flex-center gap-10"><Palette :size="20" /> {{ t('theme.label') }}</span>
+                        <component :is="isThemeOpen ? ChevronUp : ChevronDown" :size="16" />
+                    </button>
+                     <div v-if="isThemeOpen" class="mobile-sub-menu">
+                        <button class="mobile-sub-item" @click="setTheme('system')">
+                          <Monitor :size="16" /> {{ t('theme.system') }}
+                        </button>
+                        <button class="mobile-sub-item" @click="setTheme('light')">
+                          <Sun :size="16" /> {{ t('theme.light') }}
+                        </button>
+                        <button class="mobile-sub-item" @click="setTheme('dark')">
+                          <Moon :size="16" /> {{ t('theme.dark') }}
+                        </button>
+                     </div>
+                </div>
+
+                <!-- Mobile Guide -->
+                <div class="mobile-group">
+                    <button class="mobile-item-trigger" @click="toggleGuide">
+                         <span class="flex-center gap-10"><CircleHelp :size="20" /> {{ t('nav.guide') }}</span>
+                    </button>
+                </div>
+
+                 <!-- Mobile Language -->
+                <div class="mobile-group">
+                    <button class="mobile-item-trigger" @click="toggleLangMenu">
+                        <span class="flex-center gap-10">
+                             <span class="lang-flag-current mobile-flag">
+                                <span :class="getFlagClass(locale)"></span>
+                             </span>
+                             {{ t('language.label') }}
+                        </span>
+                        <component :is="isLangOpen ? ChevronUp : ChevronDown" :size="16" />
+                    </button>
+                    <div v-if="isLangOpen" class="mobile-sub-menu">
+                         <div class="lang-search mobile-search">
+                              <input
+                                class="lang-search-input"
+                                type="text"
+                                :placeholder="t('language.searchPlaceholder')"
+                                v-model="searchTerm"
+                                @click.stop
+                              />
+                         </div>
+                        <div class="lang-list mobile-lang-list">
+                             <button
+                                v-for="lang in filteredLanguages"
+                                :key="lang.code"
+                                class="mobile-sub-item"
+                                :class="{ active: locale === lang.code }"
+                                @click="selectLanguage(lang.code)"
+                              >
+                                <span class="lang-flag-item">
+                                  <span :class="getFlagClass(lang.code)"></span>
+                                </span>
+                                <span class="lang-name">{{ lang.label }}</span>
+                              </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </transition>
+  </nav>
+</template>
+
+<style scoped>
+.navbar {
+  width: 100%;
+  padding: 15px 30px;
+  background: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(0, 242, 254, 0.1);
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 100;
+  position: sticky;
+  top: 0;
+}
+
+.nav-left {
+  display: flex;
+  align-items: center;
+}
+
+.app-title {
+  font-size: 1.8rem;
+  margin: 0;
+  letter-spacing: 3px;
+  font-weight: 300;
+  color: var(--text-strong);
+  text-shadow: 0 0 10px var(--title-glow);
+}
+
+.nav-container {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+}
+
+.nav-dropdown {
+  position: relative;
+}
+
+.nav-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 20px;
+  font-size: 0.95rem;
+  min-width: 120px;
+  justify-content: center;
+}
+
+.nav-btn.icon-only {
+  min-width: auto;
+  padding: 8px 12px;
+}
+
+.nav-btn.flag-btn {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+}
+
+.nav-btn.flag-btn:hover {
+  background: transparent;
+  transform: scale(1.1);
+}
+
+.lang-flag-current img, .lang-flag-current svg {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  transition: box-shadow 0.3s ease;
+}
+
+.nav-btn.flag-btn:hover .lang-flag-current img,
+.nav-btn.flag-btn:hover .lang-flag-current svg {
+  box-shadow: 0 0 15px var(--primary-neon);
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 10px;
+  background: rgba(10, 10, 20, 0.95);
+  border: 1px solid var(--primary-neon);
+  border-radius: 8px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 150px;
+  box-shadow: 0 0 20px rgba(0, 242, 254, 0.2);
+  z-index: 1000;
+}
+
+.lang-menu-dropdown {
+  width: 250px;
+  right: 0;
+  left: auto;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.lang-search {
+  padding: 5px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  margin-bottom: 5px;
+}
+
+.lang-search-input {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  padding: 5px 10px;
+  border-radius: 4px;
+  outline: none;
+}
+
+.lang-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.dropdown-item {
+  background: transparent;
+  border: none;
+  color: #fff;
+  padding: 10px 15px;
+  cursor: pointer;
+  text-align: left;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  font-family: 'Segoe UI', sans-serif;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.dropdown-item:hover, .dropdown-item.active {
+  background: rgba(0, 242, 254, 0.15);
+  color: var(--primary-neon);
+}
+
+.icon {
+  font-size: 1.1rem;
+}
+
+.lang-flag-current img, .lang-flag-item img {
+  width: 24px;
+  height: 16px;
+  object-fit: cover;
+  border-radius: 2px;
+  display: block;
+}
+
+.lang-flag-current svg, .lang-flag-item svg {
+  width: 24px;
+  height: 16px;
+  display: block;
+}
+
+/* Helper */
+.flex-center { display: flex; align-items: center; }
+.gap-10 { gap: 10px; }
+
+/* Desktop/Mobile Visibility */
+.desktop-only { display: flex; }
+.mobile-only { display: none; }
+
+@media (max-width: 768px) {
+    .desktop-only { display: none; }
+    .mobile-only { display: flex; }
+    
+    .navbar {
+        padding: 10px 20px;
+    }
+}
+
+/* Mobile Overlay */
+.mobile-menu-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background: rgba(10, 10, 25, 0.98);
+    backdrop-filter: blur(20px);
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    overflow-y: auto;
+}
+
+.mobile-menu-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
+    flex-shrink: 0;
+}
+
+.mobile-title {
+    font-size: 1.8rem;
+    color: var(--primary-neon);
+    margin: 0;
+    letter-spacing: 3px;
+    font-weight: 300;
+}
+
+.mobile-menu-items {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    padding: 20px;
+}
+
+.mobile-group {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    padding-bottom: 10px;
+}
+
+.mobile-item-trigger {
+    background: transparent;
+    border: none;
+    color: #fff;
+    font-size: 1.2rem;
+    padding: 15px 0;
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.mobile-sub-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding-left: 15px;
+    padding-bottom: 10px;
+    animation: slideDown 0.3s ease-out;
+}
+
+.mobile-sub-item {
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    padding: 10px;
+    text-align: left;
+    font-size: 1rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    border-radius: 4px;
+}
+
+.mobile-sub-item:hover, .mobile-sub-item.active {
+    color: var(--primary-neon);
+    background: rgba(0, 242, 254, 0.1);
+}
+
+.mobile-flag {
+    margin-right: 5px;
+}
+
+@keyframes slideDown {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/components/ReloadPrompt.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { useRegisterSW } from 'virtual:pwa-register/vue'
+import { useI18n } from '@/composables/useI18n'
+
+const { t } = useI18n()
+
+const {
+  offlineReady,
+  needRefresh,
+  updateServiceWorker,
+} = useRegisterSW()
+
+const close = async () => {
+  offlineReady.value = false
+  needRefresh.value = false
+}
+</script>
+
+<template>
+  <div
+    v-if="offlineReady || needRefresh"
+    class="pwa-toast"
+    role="alert"
+  >
+    <div class="message">
+      <span v-if="offlineReady">
+        {{ t('pwa.offlineReady') }}
+      </span>
+      <span v-else>
+        {{ t('pwa.newContent') }}
+      </span>
+    </div>
+    <div class="buttons">
+      <button v-if="needRefresh" class="btn-neon small" @click="updateServiceWorker()">
+        {{ t('pwa.reload') }}
+      </button>
+      <button class="close-btn" @click="close">
+        {{ t('pwa.close') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pwa-toast {
+  position: fixed;
+  right: 0;
+  bottom: 60px; /* Above the footer */
+  margin: 16px;
+  padding: 15px;
+  border: 1px solid var(--banner-border);
+  background: var(--banner-bg);
+  border-radius: 12px;
+  z-index: 2000;
+  text-align: left;
+  box-shadow: var(--banner-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  backdrop-filter: blur(10px);
+  color: var(--text-color);
+  max-width: 320px;
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.message {
+  font-size: 0.95rem;
+  line-height: 1.4;
+}
+
+.buttons {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 5px;
+}
+
+.close-btn {
+    background: transparent;
+    border: 1px solid var(--text-muted);
+    color: var(--text-muted);
+    padding: 6px 12px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: all 0.2s;
+}
+
+.close-btn:hover {
+    border-color: var(--text-color);
+    color: var(--text-color);
+}
+
+.btn-neon.small {
+    padding: 6px 16px;
+    font-size: 0.85rem;
+}
+</style>

src/components/StatusPanel.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useTimer } from '@/composables/useTimer';
 import { useI18n } from '@/composables/useI18n';
+import { RotateCcw, RefreshCw, Eye, Undo } from 'lucide-vue-next';
 
 const store = usePuzzleStore();
 const { formatTime } = useTimer();
@@ -14,22 +15,38 @@ const progressText = computed(() => `${store.progressPercentage.toFixed(3)}%`);
 
 <template>
   <div class="status-panel glass-panel">
-    <div class="stat-item">
+    <div class="stats-group">
-      <span class="label">{{ t('status.time') }}</span>
+      <div class="stat-item">
-      <span class="value">{{ formattedTime }}</span>
+        <span class="label">{{ t('status.time') }}</span>
-    </div>
+        <span class="value">{{ formattedTime }}</span>
-    
-    <div class="stat-item">
-      <span class="label">{{ t('status.moves') }}</span>
-      <span class="value">{{ store.moves }}</span>
-    </div>
-    
-    <div class="stat-item">
-      <span class="label">{{ t('status.progress') }}</span>
-      <div class="progress-wrapper">
-         <span class="value small">{{ progressText }}</span>
-         <span class="eye-icon">👁️</span>
       </div>
+      
+      <div class="stat-item">
+        <span class="label">{{ t('status.moves') }}</span>
+        <span class="value">{{ store.moves }}</span>
+      </div>
+      
+      <div class="stat-item">
+        <span class="label">{{ t('status.progress') }}</span>
+        <div class="progress-wrapper">
+           <span class="value small">{{ progressText }}</span>
+           <button class="eye-btn" :title="t('status.progress')">
+             <Eye :size="20" />
+           </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="panel-separator"></div>
+
+    <div class="actions-group">
+      <button class="action-btn" @click="store.resetGame" :title="t('actions.reset')">
+        <RefreshCw :size="20" />
+      </button>
+      <div class="action-separator"></div>
+      <button class="action-btn" @click="store.undo" :title="t('actions.undo')">
+        <Undo :size="20" />
+      </button>
     </div>
   </div>
 </template>
@@ -37,9 +54,9 @@ const progressText = computed(() => `${store.progressPercentage.toFixed(3)}%`);
 <style scoped>
 .status-panel {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
-  align-items: center;
+  align-items: stretch;
-  padding: 20px 40px;
+  padding: 0;
   border-radius: 15px;
   background: var(--panel-bg);
   backdrop-filter: blur(10px);
@@ -47,7 +64,17 @@ const progressText = computed(() => `${store.progressPercentage.toFixed(3)}%`);
   box-shadow: var(--panel-shadow);
   margin-bottom: 30px;
   width: 100%;
-  max-width: 600px;
+  max-width: 650px;
+  overflow: hidden;
+  height: 90px;
+}
+
+.stats-group {
+  flex: 1;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 10px 20px;
 }
 
 .stat-item {
@@ -81,8 +108,56 @@ const progressText = computed(() => `${store.progressPercentage.toFixed(3)}%`);
   gap: 8px;
 }
 
-.eye-icon {
+.eye-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-strong);
   opacity: 0.7;
   cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  transition: opacity 0.2s;
+}
+
+.eye-btn:hover {
+  opacity: 1;
+  color: var(--primary-neon);
+}
+
+.panel-separator {
+  width: 1px;
+  background: rgba(255, 255, 255, 0.1);
+  margin: 10px 0;
+}
+
+.actions-group {
+  display: flex;
+  flex-direction: column;
+  width: 60px;
+}
+
+.action-btn {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--text-strong);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--primary-neon);
+}
+
+.action-separator {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.1);
+  width: 80%;
+  align-self: center;
 }
 </style>

src/components/WinModal.vue

@@ -409,6 +409,7 @@ p {
   display: block;
 }
 
+
 .share-download {
   align-self: center;
   padding: 8px 18px;

src/composables/useNonogram.js

@@ -8,7 +8,7 @@ export function useNonogram() {
   const dragMode = ref(null); // 'fill', 'empty', 'cross'
   const startCellState = ref(null);
 
-  const startDrag = (r, c, isRightClick = false) => {
+  const startDrag = (r, c, isRightClick = false, force = false) => {
     if (store.isGameWon) return;
     
     isDragging.value = true;
@@ -16,9 +16,7 @@ export function useNonogram() {
     
     if (isRightClick) {
         // Right click logic
-        // If current is 1 (filled), do nothing usually? Or ignore?
+        if (!force && current === 1) {
-        // Standard: Toggle 0 <-> 2
-        if (current === 1) {
             dragMode.value = null; // invalid drag start
             return;
         }

src/composables/useSolver.js

@@ -24,6 +24,7 @@ export function useSolver() {
             return;
         }
         if (isProcessing.value) return;
+        store.markGuideUsed();
         ensureWorker();
         isProcessing.value = true;
 

src/main.js

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
+import '/node_modules/flag-icons/css/flag-icons.min.css'
 import './styles/main.css'
 
 // Custom directive v-cell-hover (zgodnie z wymaganiami)
@@ -30,19 +31,3 @@ app.directive('cell-hover', vCellHover)
 
 app.mount('#app')
 
-if ('serviceWorker' in navigator) {
-  let refreshing = false
-  const triggerReload = () => {
-    if (refreshing) return
-    refreshing = true
-    window.location.reload()
-  }
-  navigator.serviceWorker.addEventListener('controllerchange', triggerReload)
-  const checkForUpdate = () => {
-    navigator.serviceWorker.getRegistration().then((registration) => registration?.update())
-  }
-  window.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible') checkForUpdate()
-  })
-  window.addEventListener('focus', checkForUpdate)
-}

src/stores/puzzle.js

@@ -63,6 +63,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
   const solution = ref([]);
   const playerGrid = ref([]); // 0: empty, 1: filled, 2: cross
   const isGameWon = ref(false);
+  const hasUsedGuide = ref(false);
   const size = ref(5);
   const startTime = ref(null);
   const elapsedTime = ref(0);
@@ -116,6 +117,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     
     resetGrid();
     isGameWon.value = false;
+    hasUsedGuide.value = false;
     elapsedTime.value = 0;
     startTimer();
   }
@@ -130,6 +132,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     
     resetGrid();
     isGameWon.value = false;
+    hasUsedGuide.value = false;
     elapsedTime.value = 0;
     startTimer();
   }
@@ -238,6 +241,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
         solution: solution.value,
         playerGrid: playerGrid.value,
         isGameWon: isGameWon.value,
+        hasUsedGuide: hasUsedGuide.value,
         elapsedTime: elapsedTime.value,
         moves: moves.value,
         history: history.value
@@ -316,6 +320,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     if (currentLevelId.value === 'custom') {
         resetGrid();
         isGameWon.value = false;
+        hasUsedGuide.value = false;
         elapsedTime.value = 0;
         startTimer();
         saveState();
@@ -324,6 +329,12 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     }
   }
 
+  function markGuideUsed() {
+    if (isGameWon.value) return;
+    hasUsedGuide.value = true;
+    saveState();
+  }
+
   function closeWinModal() {
     if (!isGameWon.value) return;
     isGameWon.value = false;
@@ -347,7 +358,9 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     loadState, // expose loadState
     moves,
     undo,
-    closeWinModal
+    closeWinModal,
+    hasUsedGuide,
+    markGuideUsed
   };
 
 });

src/styles/main.css

@@ -1,3 +1,5 @@
+@import './scrollbar.css';
+
 :root {
   /* --- Glassmorphism Design System --- */
   --bg-gradient: linear-gradient(135deg, #43C6AC 0%, #191654 100%);
@@ -52,6 +54,9 @@
   --scroll-track: rgba(0, 0, 0, 0.1);
   --scroll-thumb: rgba(255, 255, 255, 0.2);
   --scroll-thumb-hover: var(--accent-cyan);
+  --fixed-bar-bg: rgba(0, 0, 0, 0.85);
+  --fixed-bar-thumb: rgba(0, 242, 255, 0.5);
+  --fixed-bar-thumb-hover: rgba(0, 242, 255, 0.8);
   
   /* Rozmiary */
   --cell-size: 30px;
@@ -113,6 +118,9 @@
   --scroll-track: rgba(15, 23, 42, 0.08);
   --scroll-thumb: rgba(15, 23, 42, 0.2);
   --scroll-thumb-hover: #0ea5e9;
+  --fixed-bar-bg: rgba(248, 250, 255, 0.95);
+  --fixed-bar-thumb: rgba(14, 165, 233, 0.5);
+  --fixed-bar-thumb-hover: rgba(14, 165, 233, 0.8);
 }
 
 * {
@@ -121,6 +129,11 @@
   -webkit-user-select: none;
 }
 
+html {
+  overflow-x: hidden;
+  width: 100%;
+}
+
 body {
   margin: 0;
   padding: 20px;

src/styles/scrollbar.css

@@ -0,0 +1,54 @@
+
+/* Fixed Scroll Bar */
+.fixed-scroll-bar {
+  position: fixed;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 85%;
+  max-width: 400px;
+  height: 44px; /* Increased hit area */
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  opacity: 0;
+  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  pointer-events: none;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+.fixed-scroll-track {
+  width: 100%;
+  height: 14px; /* Increased visual thickness */
+  background: rgba(15, 23, 42, 0.4);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  border-radius: 7px;
+  position: relative;
+  pointer-events: auto;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.fixed-scroll-thumb {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background: var(--primary-accent);
+  border-radius: 7px;
+  cursor: grab;
+  box-shadow: 0 0 12px rgba(0, 242, 255, 0.5);
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+}
+
+.fixed-scroll-thumb:active {
+  cursor: grabbing;
+  background: #fff;
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
+}

src/utils/puzzleUtils.js

@@ -45,8 +45,8 @@ export function generateRandomGrid(size) {
     for (let i = 0; i < size; i++) {
         const row = [];
         for (let j = 0; j < size; j++) {
-            // ~50% chance of being filled
+            // ~25% empty cells
-            row.push(Math.random() > 0.5 ? 1 : 0);
+            row.push(Math.random() > 0.25 ? 1 : 0);
         }
         grid.push(row);
     }

src/utils/puzzleUtils.spec.js

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+import { calculateHints } from './puzzleUtils'
+
+describe('puzzleUtils', () => {
+  it('calculateHints correctly calculates hints for a simple grid', () => {
+    const grid = [
+      [1, 0, 1],
+      [1, 1, 1],
+      [0, 1, 0]
+    ]
+    // Row 0: 1, then space, then 1 -> [1, 1]
+    // Row 1: 1, 1, 1 -> [3]
+    // Row 2: space, 1, space -> [1]
+    
+    // Col 0: 1, 1, 0 -> [2]
+    // Col 1: 0, 1, 1 -> [2] ? Wait. Col 1 is 0, 1, 1. So space, 1, 1 -> [2].
+    // Let's trace col 1 manually:
+    // r0,c1 = 0
+    // r1,c1 = 1 -> count=1
+    // r2,c1 = 1 -> count=2
+    // end -> push 2.
+    // So Col 1 is [2].
+    
+    // Wait, my manual trace above for col 1:
+    // grid[0][1] is 0.
+    // grid[1][1] is 1.
+    // grid[2][1] is 1.
+    // Yes, [2].
+    
+    // Col 2: 1, 1, 0 -> [2].
+    
+    const expected = {
+      rowHints: [[1, 1], [3], [1]],
+      colHints: [[2], [2], [2]]
+    }
+    expect(calculateHints(grid)).toEqual(expected)
+  })
+
+  it('calculateHints handles empty rows/cols', () => {
+    const grid = [
+      [0, 0, 0],
+      [0, 0, 0],
+      [0, 0, 0]
+    ]
+    const expected = {
+      rowHints: [[0], [0], [0]],
+      colHints: [[0], [0], [0]]
+    }
+    expect(calculateHints(grid)).toEqual(expected)
+  })
+})

update_i18n_guide.cjs

@@ -0,0 +1,60 @@
+
+const fs = require('fs');
+
+const filePath = 'src/composables/useI18n.js';
+let content = fs.readFileSync(filePath, 'utf8');
+
+// 1. Add key to all language objects
+const lines = content.split('\n');
+const newLines = [];
+let insideLang = false;
+let currentLang = null;
+
+for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    
+    const langStartMatch = line.match(/^\s{2}(['"]?[\w-]+['"]?): \{/);
+    if (langStartMatch) {
+        insideLang = true;
+        currentLang = langStartMatch[1].replace(/['"]/g, '');
+    }
+    
+    if (insideLang && (line.trim() === '},' || line.trim() === '}')) {
+        let translation = 'GUIDE';
+        if (currentLang === 'pl') translation = 'PRZEWODNIK';
+        if (currentLang === 'es') translation = 'GUÍA';
+        if (currentLang === 'fr') translation = 'GUIDE';
+        if (currentLang === 'de') translation = 'ANLEITUNG';
+        if (currentLang === 'it') translation = 'GUIDA';
+        if (currentLang === 'pt' || currentLang === 'pt-br') translation = 'GUIA';
+        if (currentLang === 'ru') translation = 'РУКОВОДСТВО';
+        if (currentLang === 'zh') translation = '指南';
+        
+        // Ensure previous line has comma
+        if (newLines.length > 0) {
+            const lastLine = newLines[newLines.length - 1];
+            if (!lastLine.trim().endsWith(',') && !lastLine.trim().endsWith('{')) {
+                newLines[newLines.length - 1] = lastLine + ',';
+            }
+        }
+        
+        newLines.push(`    'nav.guide': '${translation}'`);
+        insideLang = false;
+        currentLang = null;
+    }
+    
+    newLines.push(line);
+}
+
+content = newLines.join('\n');
+
+// 2. Add to requiredKeys
+// Find "const requiredKeys = ["
+// We know it ends with 'nav.newGame' now.
+content = content.replace(
+    "'nav.newGame'",
+    "'nav.newGame','nav.guide'"
+);
+
+fs.writeFileSync(filePath, content);
+console.log('Updated useI18n.js with nav.guide');

vite.config.js

@@ -4,11 +4,18 @@ import { VitePWA } from 'vite-plugin-pwa'
 import path from 'path'
 
 export default defineConfig({
+  define: {
+    '__APP_VERSION__': JSON.stringify(process.env.npm_package_version)
+  },
   plugins: [
     vue(),
     VitePWA({
-      registerType: 'autoUpdate',
+      registerType: 'prompt',
       injectRegister: 'auto',
+      workbox: {
+        cleanupOutdatedCaches: true,
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,json,vue,txt,woff2}']
+      },
       devOptions: {
         enabled: true
       },

vitest.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  }
+})