1.0.2

- 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.2",
   "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,9 +3,8 @@ 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';
@@ -22,90 +21,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;
-  if (flagMap[base]) return flagMap[base];
-  if (languageFlags[code] || languageFlags[base]) return null;
-  return 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');
@@ -167,24 +85,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
@@ -211,8 +111,6 @@ onMounted(() => {
     } else if (displayModeMedia?.addListener) {
       displayModeMedia.addListener(updateStandalone);
     }
-    document.addEventListener('click', handleOutsideClick);
-    document.addEventListener('keydown', handleKeydown);
   }
 });
 
@@ -230,73 +128,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">
@@ -308,12 +151,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" />
@@ -322,15 +159,16 @@ 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" />
@@ -349,285 +187,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 {
-    width: 100vw;
-  }
 }
-</style>
+
+.app-version {
+  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/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;
 }
-</style>
+
+.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/useI18n.js

@@ -92,7 +92,9 @@ const messages = {
     'theme.light': 'Jasny',
     'theme.dark': 'Ciemny',
     'language.searchLabel': 'Wyszukaj język',
-    'language.searchPlaceholder': 'Wpisz nazwę języka...'
+    'language.searchPlaceholder': 'Wpisz nazwę języka...',
+    'nav.newGame': 'NOWA GRA',
+    'nav.guide': 'PRZEWODNIK'
   },
   en: {
     'app.title': 'Nonograms',
@@ -237,7 +239,9 @@ const messages = {
     'theme.light': 'Light',
     'theme.dark': 'Dark',
     'language.searchLabel': 'Search language',
-    'language.searchPlaceholder': 'Type language name...'
+    'language.searchPlaceholder': 'Type language name...',
+    'nav.newGame': 'NEW GAME',
+    'nav.guide': 'GUIDE'
   },
   zh: {
     'app.title': 'Nonograms',
@@ -283,7 +287,8 @@ const messages = {
     'language.label': '语言选择',
     'language.pl': '波兰语',
     'language.en': '英语',
-    'language.zh': '中文',
+    'language.zh': '中文 (简体)',
+    'language.zh-hant': '中文 (繁体)',
     'language.hi': '印地语',
     'language.es': '西班牙语',
     'language.fr': '法语',
@@ -297,7 +302,72 @@ const messages = {
     'theme.light': '浅色',
     'theme.dark': '深色',
     'language.searchLabel': '搜索语言',
-    'language.searchPlaceholder': '输入语言名称...'
+    'language.searchPlaceholder': '输入语言名称...',
+    'nav.newGame': '新游戏',
+    'nav.guide': '指南'
+  },
+  'zh-hant': {
+    'app.title': 'Nonograms',
+    'level.easy': '簡單 5X5',
+    'level.medium': '中等 10X10',
+    'level.hard': '困難 15X15',
+    'level.custom': '自定義',
+    'level.guide': '指南 ❓',
+    'actions.reset': '重置',
+    'actions.random': '新隨機',
+    'actions.undo': '撤銷',
+    'status.time': '時間',
+    'status.moves': '步數',
+    'status.progress': '進度',
+    'fixed.time': '時間:',
+    'fixed.progress': '進度:',
+    'fixed.hide': '隱藏',
+    'fixed.show': '顯示',
+    'guide.play': '開始',
+    'guide.pause': '暫停',
+    'guide.step': '步驟',
+    'guide.speed': '速度',
+    'guide.waiting': '等待...',
+    'guide.solved': '已解!',
+    'custom.title': '自定義遊戲',
+    'custom.prompt': '輸入網格大小 (5 - 80):',
+    'custom.cancel': '取消',
+    'custom.start': '開始',
+    'custom.sizeError': '尺寸必須在 5 到 80 之間！',
+    'win.title': '恭喜！',
+    'win.message': '你解開了謎題！',
+    'win.time': '時間:',
+    'win.playAgain': '再玩一次',
+    'win.shareTitle': '分享你的結果',
+    'win.shareText': '我在 {time} 內解開了 {size}x{size} 的數織！',
+    'win.shareX': 'X',
+    'win.shareFacebook': 'Facebook',
+    'win.shareWhatsapp': 'WhatsApp',
+    'win.shareDownload': '下載截圖',
+    'pwa.installTitle': '安裝應用並離線遊玩',
+    'pwa.installMobile': '添加到主屏幕',
+    'pwa.installDesktop': '安裝到桌面',
+    'language.label': '語言選擇',
+    'language.pl': '波蘭語',
+    'language.en': '英語',
+    'language.zh': '中文 (簡體)',
+    'language.zh-hant': '中文 (繁體)',
+    'language.hi': '印地語',
+    'language.es': '西班牙語',
+    'language.fr': '法語',
+    'language.ar': '阿拉伯語',
+    'language.bn': '孟加拉語',
+    'language.ru': '俄語',
+    'language.pt': '葡萄牙語',
+    'language.ur': '烏爾都語',
+    'theme.label': '主題',
+    'theme.system': '系統',
+    'theme.light': '淺色',
+    'theme.dark': '深色',
+    'language.searchLabel': '搜尋語言',
+    'language.searchPlaceholder': '輸入語言名稱...',
+    'nav.newGame': '新遊戲',
+    'nav.guide': '指南'
   },
   hi: {
     'app.title': 'Nonograms',
@@ -357,7 +427,9 @@ const messages = {
     'theme.light': 'हल्का',
     'theme.dark': 'गहरा',
     'language.searchLabel': 'भाषा खोजें',
-    'language.searchPlaceholder': 'भाषा का नाम लिखें...'
+    'language.searchPlaceholder': 'भाषा का नाम लिखें...',
+    'nav.newGame': 'नया खेल',
+    'nav.guide': 'गाइड'
   },
   es: {
     'app.title': 'Nonograms',
@@ -417,7 +489,9 @@ const messages = {
     'theme.light': 'Claro',
     'theme.dark': 'Oscuro',
     'language.searchLabel': 'Buscar idioma',
-    'language.searchPlaceholder': 'Escribe el nombre del idioma...'
+    'language.searchPlaceholder': 'Escribe el nombre del idioma...',
+    'nav.newGame': 'NUEVO JUEGO',
+    'nav.guide': 'GUÍA'
   },
   fr: {
     'app.title': 'Nonograms',
@@ -477,7 +551,9 @@ const messages = {
     'theme.light': 'Clair',
     'theme.dark': 'Sombre',
     'language.searchLabel': 'Rechercher une langue',
-    'language.searchPlaceholder': 'Tapez le nom de la langue...'
+    'language.searchPlaceholder': 'Tapez le nom de la langue...',
+    'nav.newGame': 'NOUVEAU JEU',
+    'nav.guide': 'GUIDE'
   },
   ar: {
     'app.title': 'Nonograms',
@@ -537,7 +613,9 @@ const messages = {
     'theme.light': 'فاتح',
     'theme.dark': 'داكن',
     'language.searchLabel': 'ابحث عن لغة',
-    'language.searchPlaceholder': 'اكتب اسم اللغة...'
+    'language.searchPlaceholder': 'اكتب اسم اللغة...',
+    'nav.newGame': 'لعبة جديدة',
+    'nav.guide': 'دليل'
   },
   bn: {
     'app.title': 'Nonograms',
@@ -597,7 +675,9 @@ const messages = {
     'theme.light': 'হালকা',
     'theme.dark': 'গাঢ়',
     'language.searchLabel': 'ভাষা অনুসন্ধান করুন',
-    'language.searchPlaceholder': 'ভাষার নাম লিখুন...'
+    'language.searchPlaceholder': 'ভাষার নাম লিখুন...',
+    'nav.newGame': 'নতুন খেলা',
+    'nav.guide': 'নির্দেশিকা'
   },
   ru: {
     'app.title': 'Nonograms',
@@ -657,7 +737,9 @@ const messages = {
     'theme.light': 'Светлая',
     'theme.dark': 'Тёмная',
     'language.searchLabel': 'Поиск языка',
-    'language.searchPlaceholder': 'Введите название языка...'
+    'language.searchPlaceholder': 'Введите название языка...',
+    'nav.newGame': 'НОВАЯ ИГРА',
+    'nav.guide': 'РУКОВОДСТВО'
   },
   pt: {
     'app.title': 'Nonograms',
@@ -717,7 +799,9 @@ const messages = {
     'theme.light': 'Claro',
     'theme.dark': 'Escuro',
     'language.searchLabel': 'Buscar idioma',
-    'language.searchPlaceholder': 'Digite o nome do idioma...'
+    'language.searchPlaceholder': 'Digite o nome do idioma...',
+    'nav.newGame': 'NOVO JOGO',
+    'nav.guide': 'GUIA'
   },
   ur: {
     'app.title': 'Nonograms',
@@ -777,7 +861,9 @@ const messages = {
     'theme.light': 'ہلکا',
     'theme.dark': 'گہرا',
     'language.searchLabel': 'زبان تلاش کریں',
-    'language.searchPlaceholder': 'زبان کا نام درج کریں...'
+    'language.searchPlaceholder': 'زبان کا نام درج کریں...',
+    'nav.newGame': 'نیا کھیل',
+    'nav.guide': 'رہنما'
   }
   ,
   de: {
@@ -838,7 +924,9 @@ const messages = {
     'theme.light': 'Hell',
     'theme.dark': 'Dunkel',
     'language.searchLabel': 'Sprache suchen',
-    'language.searchPlaceholder': 'Sprachname eingeben...'
+    'language.searchPlaceholder': 'Sprachname eingeben...',
+    'nav.newGame': 'NEUES SPIEL',
+    'nav.guide': 'ANLEITUNG'
   },
   it: {
     'app.title': 'Nonograms',
@@ -898,7 +986,9 @@ const messages = {
     'theme.light': 'Chiaro',
     'theme.dark': 'Scuro',
     'language.searchLabel': 'Cerca lingua',
-    'language.searchPlaceholder': 'Digita nome della lingua...'
+    'language.searchPlaceholder': 'Digita nome della lingua...',
+    'nav.newGame': 'NUOVO GIOCO',
+    'nav.guide': 'GUIDA'
   },
   nl: {
     'app.title': 'Nonograms',
@@ -958,7 +1048,9 @@ const messages = {
     'theme.light': 'Licht',
     'theme.dark': 'Donker',
     'language.searchLabel': 'Zoek taal',
-    'language.searchPlaceholder': 'Voer taalnaam in...'
+    'language.searchPlaceholder': 'Voer taalnaam in...',
+    'nav.newGame': 'NIEUW SPEL',
+    'nav.guide': 'HANDLEIDING'
   },
   sv: {
     'app.title': 'Nonograms',
@@ -1007,7 +1099,9 @@ const messages = {
     'theme.light': 'Ljust',
     'theme.dark': 'Mörkt',
     'language.searchLabel': 'Sök språk',
-    'language.searchPlaceholder': 'Skriv språknamn...'
+    'language.searchPlaceholder': 'Skriv språknamn...',
+    'nav.newGame': 'NYTT SPEL',
+    'nav.guide': 'GUIDE'
   },
   da: {
     'app.title': 'Nonograms',
@@ -1056,7 +1150,9 @@ const messages = {
     'theme.light': 'Lyst',
     'theme.dark': 'Mørkt',
     'language.searchLabel': 'Søg efter sprog',
-    'language.searchPlaceholder': 'Skriv sprogets navn...'
+    'language.searchPlaceholder': 'Skriv sprogets navn...',
+    'nav.newGame': 'NYT SPIL',
+    'nav.guide': 'VEJLEDNING'
   },
   fi: {
     'app.title': 'Nonograms',
@@ -1105,7 +1201,9 @@ const messages = {
     'theme.light': 'Vaalea',
     'theme.dark': 'Tumma',
     'language.searchLabel': 'Etsi kieltä',
-    'language.searchPlaceholder': 'Kirjoita kielen nimi...'
+    'language.searchPlaceholder': 'Kirjoita kielen nimi...',
+    'nav.newGame': 'UUSI PELI',
+    'nav.guide': 'OPAS'
   },
   no: {
     'app.title': 'Nonograms',
@@ -1154,7 +1252,9 @@ const messages = {
     'theme.light': 'Lyst',
     'theme.dark': 'Mørkt',
     'language.searchLabel': 'Søk etter språk',
-    'language.searchPlaceholder': 'Skriv språknavn...'
+    'language.searchPlaceholder': 'Skriv språknavn...',
+    'nav.newGame': 'NYTT SPILL',
+    'nav.guide': 'VEILEDER'
   },
   cs: {
     'app.title': 'Nonograms',
@@ -1203,7 +1303,9 @@ const messages = {
     'theme.light': 'Světlé',
     'theme.dark': 'Tmavé',
     'language.searchLabel': 'Hledat jazyk',
-    'language.searchPlaceholder': 'Zadejte název jazyka...'
+    'language.searchPlaceholder': 'Zadejte název jazyka...',
+    'nav.newGame': 'NOVÁ HRA',
+    'nav.guide': 'NÁVOD'
   },
   sk: {
     'app.title': 'Nonograms',
@@ -1252,7 +1354,9 @@ const messages = {
     'theme.light': 'Svetlý',
     'theme.dark': 'Tmavý',
     'language.searchLabel': 'Hľadať jazyk',
-    'language.searchPlaceholder': 'Zadajte názov jazyka...'
+    'language.searchPlaceholder': 'Zadajte názov jazyka...',
+    'nav.newGame': 'NOVÁ HRA',
+    'nav.guide': 'NÁVOD'
   },
   hu: {
     'app.title': 'Nonograms',
@@ -1301,7 +1405,9 @@ const messages = {
     'theme.light': 'Világos',
     'theme.dark': 'Sötét',
     'language.searchLabel': 'Nyelv keresése',
-    'language.searchPlaceholder': 'Írd be a nyelv nevét...'
+    'language.searchPlaceholder': 'Írd be a nyelv nevét...',
+    'nav.newGame': 'ÚJ JÁTÉK',
+    'nav.guide': 'ÚTMUTATÓ'
   },
   ro: {
     'app.title': 'Nonograms',
@@ -1350,7 +1456,9 @@ const messages = {
     'theme.light': 'Deschis',
     'theme.dark': 'Întunecat',
     'language.searchLabel': 'Caută limbă',
-    'language.searchPlaceholder': 'Introduceți numele limbii...'
+    'language.searchPlaceholder': 'Introduceți numele limbii...',
+    'nav.newGame': 'JOC NOU',
+    'nav.guide': 'GHID'
   },
   bg: {
     'app.title': 'Nonograms',
@@ -1399,7 +1507,9 @@ const messages = {
     'theme.light': 'Светла',
     'theme.dark': 'Тъмна',
     'language.searchLabel': 'Търсене на език',
-    'language.searchPlaceholder': 'Въведете име на език...'
+    'language.searchPlaceholder': 'Въведете име на език...',
+    'nav.newGame': 'НОВА ИГРА',
+    'nav.guide': 'РЪКОВОДСТВО'
   },
   el: {
     'app.title': 'Nonograms',
@@ -1448,7 +1558,9 @@ const messages = {
     'theme.light': 'Ανοιχτό',
     'theme.dark': 'Σκούρο',
     'language.searchLabel': 'Αναζήτηση γλώσσας',
-    'language.searchPlaceholder': 'Πληκτρολογήστε όνομα γλώσσας...'
+    'language.searchPlaceholder': 'Πληκτρολογήστε όνομα γλώσσας...',
+    'nav.newGame': 'ΝΕΟ ΠΑΙΧΝΙΔΙ',
+    'nav.guide': 'ΟΔΗΓΟΣ'
   },
   uk: {
     'app.title': 'Nonograms',
@@ -1497,7 +1609,9 @@ const messages = {
     'theme.light': 'Світла',
     'theme.dark': 'Темна',
     'language.searchLabel': 'Пошук мови',
-    'language.searchPlaceholder': 'Введіть назву мови...'
+    'language.searchPlaceholder': 'Введіть назву мови...',
+    'nav.newGame': 'НОВА ГРА',
+    'nav.guide': 'ІНСТРУКЦІЯ'
   },
   be: {
     'app.title': 'Nonograms',
@@ -1546,7 +1660,9 @@ const messages = {
     'theme.light': 'Светлая',
     'theme.dark': 'Цёмная',
     'language.searchLabel': 'Пошук мовы',
-    'language.searchPlaceholder': 'Увядзіце назву мовы...'
+    'language.searchPlaceholder': 'Увядзіце назву мовы...',
+    'nav.newGame': 'НОВАЯ ГУЛЬНЯ',
+    'nav.guide': 'КІРАЎНІЦТВА'
   },
   sr: {
     'app.title': 'Nonograms',
@@ -1595,7 +1711,9 @@ const messages = {
     'theme.light': 'Светла',
     'theme.dark': 'Тамна',
     'language.searchLabel': 'Претрага језика',
-    'language.searchPlaceholder': 'Унесите назив језика...'
+    'language.searchPlaceholder': 'Унесите назив језика...',
+    'nav.newGame': 'НОВА ИГРА',
+    'nav.guide': 'ВОДИЧ'
   },
   hr: {
     'app.title': 'Nonograms',
@@ -1644,7 +1762,9 @@ const messages = {
     'theme.light': 'Svijetla',
     'theme.dark': 'Tamna',
     'language.searchLabel': 'Pretraži jezik',
-    'language.searchPlaceholder': 'Unesite naziv jezika...'
+    'language.searchPlaceholder': 'Unesite naziv jezika...',
+    'nav.newGame': 'NOVA IGRA',
+    'nav.guide': 'VODIČ'
   },
   sl: {
     'app.title': 'Nonograms',
@@ -1693,7 +1813,9 @@ const messages = {
     'theme.light': 'Svetla',
     'theme.dark': 'Temna',
     'language.searchLabel': 'Iskanje jezika',
-    'language.searchPlaceholder': 'Vnesite ime jezika...'
+    'language.searchPlaceholder': 'Vnesite ime jezika...',
+    'nav.newGame': 'NOVA IGRA',
+    'nav.guide': 'VODNIK'
   },
   lt: {
     'app.title': 'Nonograms',
@@ -1742,7 +1864,9 @@ const messages = {
     'theme.light': 'Šviesi',
     'theme.dark': 'Tamsi',
     'language.searchLabel': 'Ieškoti kalbos',
-    'language.searchPlaceholder': 'Įveskite kalbos pavadinimą...'
+    'language.searchPlaceholder': 'Įveskite kalbos pavadinimą...',
+    'nav.newGame': 'NAUJAS ŽAIDIMAS',
+    'nav.guide': 'VADOVAS'
   },
   lv: {
     'app.title': 'Nonograms',
@@ -1791,7 +1915,9 @@ const messages = {
     'theme.light': 'Gaiša',
     'theme.dark': 'Tumša',
     'language.searchLabel': 'Meklēt valodu',
-    'language.searchPlaceholder': 'Ierakstiet valodas nosaukumu...'
+    'language.searchPlaceholder': 'Ierakstiet valodas nosaukumu...',
+    'nav.newGame': 'JAUNA SPĒLE',
+    'nav.guide': 'CEĻVEDIS'
   },
   et: {
     'app.title': 'Nonograms',
@@ -1840,7 +1966,9 @@ const messages = {
     'theme.light': 'Hele',
     'theme.dark': 'Tume',
     'language.searchLabel': 'Otsi keelt',
-    'language.searchPlaceholder': 'Sisesta keele nimi...'
+    'language.searchPlaceholder': 'Sisesta keele nimi...',
+    'nav.newGame': 'UUS MÄNG',
+    'nav.guide': 'JUHEND'
   },
   ga: {
     'app.title': 'Nonograms',
@@ -1889,7 +2017,9 @@ const messages = {
     'theme.light': 'Éadrom',
     'theme.dark': 'Dorcha',
     'language.searchLabel': 'Cuardaigh teanga',
-    'language.searchPlaceholder': 'Iontráil ainm teanga...'
+    'language.searchPlaceholder': 'Iontráil ainm teanga...',
+    'nav.newGame': 'CLUICHE NUA',
+    'nav.guide': 'TREOIR'
   },
   is: {
     'app.title': 'Nonograms',
@@ -1938,7 +2068,9 @@ const messages = {
     'theme.light': 'Ljóst',
     'theme.dark': 'Dökkt',
     'language.searchLabel': 'Leita að tungumáli',
-    'language.searchPlaceholder': 'Sláðu inn heiti tungumáls...'
+    'language.searchPlaceholder': 'Sláðu inn heiti tungumáls...',
+    'nav.newGame': 'NÝR LEIKUR',
+    'nav.guide': 'LEIÐBEININGAR'
   },
   mt: {
     'app.title': 'Nonograms',
@@ -1987,7 +2119,9 @@ const messages = {
     'theme.light': 'Ċar',
     'theme.dark': 'Skur',
     'language.searchLabel': 'Fittex lingwa',
-    'language.searchPlaceholder': 'Daħħal isem il-lingwa...'
+    'language.searchPlaceholder': 'Daħħal isem il-lingwa...',
+    'nav.newGame': 'LOGĦBA ĠDIDA',
+    'nav.guide': 'GWIDA'
   },
   sq: {
     'app.title': 'Nonograms',
@@ -2036,7 +2170,9 @@ const messages = {
     'theme.light': 'I hapur',
     'theme.dark': 'I errët',
     'language.searchLabel': 'Kërko gjuhë',
-    'language.searchPlaceholder': 'Shkruani emrin e gjuhës...'
+    'language.searchPlaceholder': 'Shkruani emrin e gjuhës...',
+    'nav.newGame': 'LOJË E RE',
+    'nav.guide': 'UDHËZUES'
   },
   mk: {
     'app.title': 'Nonograms',
@@ -2085,7 +2221,9 @@ const messages = {
     'theme.light': 'Светла',
     'theme.dark': 'Темна',
     'language.searchLabel': 'Пребарај јазик',
-    'language.searchPlaceholder': 'Внесете име на јазик...'
+    'language.searchPlaceholder': 'Внесете име на јазик...',
+    'nav.newGame': 'НОВА ИГРА',
+    'nav.guide': 'ВОДИЧ'
   },
   bs: {
     'app.title': 'Nonograms',
@@ -2134,7 +2272,9 @@ const messages = {
     'theme.light': 'Svijetla',
     'theme.dark': 'Tamna',
     'language.searchLabel': 'Pretraži jezik',
-    'language.searchPlaceholder': 'Unesite naziv jezika...'
+    'language.searchPlaceholder': 'Unesite naziv jezika...',
+    'nav.newGame': 'NOVA IGRA',
+    'nav.guide': 'VODIČ'
   },
   tr: {
     'app.title': 'Nonograms',
@@ -2183,7 +2323,9 @@ const messages = {
     'theme.light': 'Açık',
     'theme.dark': 'Koyu',
     'language.searchLabel': 'Dil ara',
-    'language.searchPlaceholder': 'Dil adını yazın...'
+    'language.searchPlaceholder': 'Dil adını yazın...',
+    'nav.newGame': 'YENİ OYUN',
+    'nav.guide': 'REHBER'
   },
   ca: {
     'app.title': 'Nonograms',
@@ -2232,7 +2374,9 @@ const messages = {
     'theme.light': 'Clar',
     'theme.dark': 'Fosc',
     'language.searchLabel': 'Cerca idioma',
-    'language.searchPlaceholder': 'Escriu el nom de l’idioma...'
+    'language.searchPlaceholder': 'Escriu el nom de l’idioma...',
+    'nav.newGame': 'NOVA PARTIDA',
+    'nav.guide': 'GUIA'
   },
   gl: {
     'app.title': 'Nonograms',
@@ -2281,7 +2425,9 @@ const messages = {
     'theme.light': 'Claro',
     'theme.dark': 'Escuro',
     'language.searchLabel': 'Buscar idioma',
-    'language.searchPlaceholder': 'Escribe o nome do idioma...'
+    'language.searchPlaceholder': 'Escribe o nome do idioma...',
+    'nav.newGame': 'NOVO XOGO',
+    'nav.guide': 'GUÍA'
   },
   cy: {
     'app.title': 'Nonograms',
@@ -2330,7 +2476,9 @@ const messages = {
     'theme.light': 'Golau',
     'theme.dark': 'Tywyll',
     'language.searchLabel': 'Chwilio am iaith',
-    'language.searchPlaceholder': 'Teipiwch enw iaith...'
+    'language.searchPlaceholder': 'Teipiwch enw iaith...',
+    'nav.newGame': 'GÊM NEWYDD',
+    'nav.guide': 'CANLLAW'
   },
   gd: {
     'app.title': 'Nonograms',
@@ -2379,7 +2527,9 @@ const messages = {
     'theme.light': 'Soilleir',
     'theme.dark': 'Dorcha',
     'language.searchLabel': 'Lorg cànan',
-    'language.searchPlaceholder': 'Cuir a-steach ainm cànain...'
+    'language.searchPlaceholder': 'Cuir a-steach ainm cànain...',
+    'nav.newGame': 'GEAMA ÙR',
+    'nav.guide': 'STIÙIREADH'
   },
   eu: {
     'app.title': 'Nonograms',
@@ -2428,7 +2578,9 @@ const messages = {
     'theme.light': 'Argi',
     'theme.dark': 'Ilun',
     'language.searchLabel': 'Bilatu hizkuntza',
-    'language.searchPlaceholder': 'Idatzi hizkuntzaren izena...'
+    'language.searchPlaceholder': 'Idatzi hizkuntzaren izena...',
+    'nav.newGame': 'JOKO BERRIA',
+    'nav.guide': 'GIDA'
   },
   ja: {
     'app.title': 'ノノグラム',
@@ -2477,7 +2629,9 @@ const messages = {
     'theme.light': 'ライト',
     'theme.dark': 'ダーク',
     'language.searchLabel': '言語を検索',
-    'language.searchPlaceholder': '言語名を入力...'
+    'language.searchPlaceholder': '言語名を入力...',
+    'nav.newGame': '新しいゲーム',
+    'nav.guide': 'ガイド'
   },
   ko: {
     'app.title': '노노그램',
@@ -2526,7 +2680,9 @@ const messages = {
     'theme.light': '라이트',
     'theme.dark': '다크',
     'language.searchLabel': '언어 검색',
-    'language.searchPlaceholder': '언어 이름 입력...'
+    'language.searchPlaceholder': '언어 이름 입력...',
+    'nav.newGame': '새 게임',
+    'nav.guide': '가이드'
   },
   id: {
     'app.title': 'Nonograms',
@@ -2575,7 +2731,9 @@ const messages = {
     'theme.light': 'Terang',
     'theme.dark': 'Gelap',
     'language.searchLabel': 'Cari bahasa',
-    'language.searchPlaceholder': 'Ketik nama bahasa...'
+    'language.searchPlaceholder': 'Ketik nama bahasa...',
+    'nav.newGame': 'PERMAINAN BARU',
+    'nav.guide': 'PANDUAN'
   },
   vi: {
     'app.title': 'Nonograms',
@@ -2624,7 +2782,9 @@ const messages = {
     'theme.light': 'Sáng',
     'theme.dark': 'Tối',
     'language.searchLabel': 'Tìm ngôn ngữ',
-    'language.searchPlaceholder': 'Nhập tên ngôn ngữ...'
+    'language.searchPlaceholder': 'Nhập tên ngôn ngữ...',
+    'nav.newGame': 'TRÒ CHƠI MỚI',
+    'nav.guide': 'HƯỚNG DẪN'
   },
   th: {
     'app.title': 'Nonograms',
@@ -2673,7 +2833,9 @@ const messages = {
     'theme.light': 'สว่าง',
     'theme.dark': 'มืด',
     'language.searchLabel': 'ค้นหาภาษา',
-    'language.searchPlaceholder': 'พิมพ์ชื่อภาษา...'
+    'language.searchPlaceholder': 'พิมพ์ชื่อภาษา...',
+    'nav.newGame': 'เกมใหม่',
+    'nav.guide': 'คู่มือ'
   },
   ms: {
     'app.title': 'Nonograms',
@@ -2722,7 +2884,9 @@ const messages = {
     'theme.light': 'Terang',
     'theme.dark': 'Gelap',
     'language.searchLabel': 'Cari bahasa',
-    'language.searchPlaceholder': 'Taip nama bahasa...'
+    'language.searchPlaceholder': 'Taip nama bahasa...',
+    'nav.newGame': 'PERMAINAN BARU',
+    'nav.guide': 'PANDUAN'
   },
   fa: {
     'app.title': 'Nonograms',
@@ -2771,7 +2935,9 @@ const messages = {
     'theme.light': 'روشن',
     'theme.dark': 'تاریک',
     'language.searchLabel': 'جستجوی زبان',
-    'language.searchPlaceholder': 'نام زبان را بنویسید...'
+    'language.searchPlaceholder': 'نام زبان را بنویسید...',
+    'nav.newGame': 'بازی جدید',
+    'nav.guide': 'راهنما'
   },
   he: {
     'app.title': 'Nonograms',
@@ -2820,7 +2986,9 @@ const messages = {
     'theme.light': 'בהיר',
     'theme.dark': 'כהה',
     'language.searchLabel': 'חפש שפה',
-    'language.searchPlaceholder': 'הקלד שם שפה...'
+    'language.searchPlaceholder': 'הקלד שם שפה...',
+    'nav.newGame': 'משחק חדש',
+    'nav.guide': 'מדריך'
   },
   az: {
     'app.title': 'Nonograms',
@@ -2869,7 +3037,9 @@ const messages = {
     'theme.light': 'Açıq',
     'theme.dark': 'Qaranlıq',
     'language.searchLabel': 'Dili axtar',
-    'language.searchPlaceholder': 'Dil adını yazın...'
+    'language.searchPlaceholder': 'Dil adını yazın...',
+    'nav.newGame': 'YENİ OYUN',
+    'nav.guide': 'BƏLƏDÇİ'
   },
   hy: {
     'app.title': 'Nonograms',
@@ -2918,7 +3088,9 @@ const messages = {
     'theme.light': 'Լուսավոր',
     'theme.dark': 'Մութ',
     'language.searchLabel': 'Փնտրել լեզուն',
-    'language.searchPlaceholder': 'Գրեք լեզվի անունը...'
+    'language.searchPlaceholder': 'Գրեք լեզվի անունը...',
+    'nav.newGame': 'ՆՈՐ ԽԱՂ',
+    'nav.guide': 'ՈՒՂԵՑՈՒՅՑ'
   },
   uz: {
     'app.title': 'Nonograms',
@@ -2967,7 +3139,9 @@ const messages = {
     'theme.light': 'Yorug‘',
     'theme.dark': 'Qorong‘u',
     'language.searchLabel': 'Tilni qidirish',
-    'language.searchPlaceholder': 'Til nomini yozing...'
+    'language.searchPlaceholder': 'Til nomini yozing...',
+    'nav.newGame': 'YANGI O\'YIN',
+    'nav.guide': 'QO\'LLANMA'
   },
   kk: {
     'app.title': 'Nonograms',
@@ -3016,7 +3190,9 @@ const messages = {
     'theme.light': 'Jaryq',
     'theme.dark': 'Qarañğy',
     'language.searchLabel': 'Tildi izdeu',
-    'language.searchPlaceholder': 'Til atauyn jaz...'
+    'language.searchPlaceholder': 'Til atauyn jaz...',
+    'nav.newGame': 'ЖАҢА ОЙЫН',
+    'nav.guide': 'НҰСҚАУЛЫҚ'
   },
   gu: {
     'app.title': 'Nonograms',
@@ -3065,7 +3241,9 @@ const messages = {
     'theme.light': 'લાઇટ',
     'theme.dark': 'ડાર્ક',
     'language.searchLabel': 'ભાષા શોધો',
-    'language.searchPlaceholder': 'ભાષાનું નામ લખો...'
+    'language.searchPlaceholder': 'ભાષાનું નામ લખો...',
+    'nav.newGame': 'નવી રમત',
+    'nav.guide': 'માર્ગદર્શિકા'
   },
   kn: {
     'app.title': 'Nonograms',
@@ -3114,7 +3292,9 @@ const messages = {
     'theme.light': 'ಬೆಳಕು',
     'theme.dark': 'ಕತ್ತಲೆ',
     'language.searchLabel': 'ಭಾಷೆ ಹುಡುಕಿ',
-    'language.searchPlaceholder': 'ಭಾಷೆಯ ಹೆಸರನ್ನು ಟೈಪ್ ಮಾಡಿ...'
+    'language.searchPlaceholder': 'ಭಾಷೆಯ ಹೆಸರನ್ನು ಟೈಪ್ ಮಾಡಿ...',
+    'nav.newGame': 'ಹೊಸ ಆಟ',
+    'nav.guide': 'ಮಾರ್ಗದರ್ಶಿ'
   },
   mr: {
     'app.title': 'Nonograms',
@@ -3163,7 +3343,9 @@ const messages = {
     'theme.light': 'लाईट',
     'theme.dark': 'डार्क',
     'language.searchLabel': 'भाषा शोधा',
-    'language.searchPlaceholder': 'भाषेचे नाव लिहा...'
+    'language.searchPlaceholder': 'भाषेचे नाव लिहा...',
+    'nav.newGame': 'नवीन खेळ',
+    'nav.guide': 'मार्गदर्शक'
   },
   pa: {
     'app.title': 'Nonograms',
@@ -3212,7 +3394,9 @@ const messages = {
     'theme.light': 'ਲਾਈਟ',
     'theme.dark': 'ਡਾਰਕ',
     'language.searchLabel': 'ਭਾਸ਼ਾ ਖੋਜੋ',
-    'language.searchPlaceholder': 'ਭਾਸ਼ਾ ਦਾ ਨਾਮ ਲਿਖੋ...'
+    'language.searchPlaceholder': 'ਭਾਸ਼ਾ ਦਾ ਨਾਮ ਲਿਖੋ...',
+    'nav.newGame': 'ਨਵੀਂ ਖੇਡ',
+    'nav.guide': 'ਗਾਈਡ'
   },
   ta: {
     'app.title': 'Nonograms',
@@ -3261,7 +3445,9 @@ const messages = {
     'theme.light': 'வெளிச்சம்',
     'theme.dark': 'இருள்',
     'language.searchLabel': 'மொழியைத் தேடு',
-    'language.searchPlaceholder': 'மொழி பெயரை உள்ளிடவும்...'
+    'language.searchPlaceholder': 'மொழி பெயரை உள்ளிடவும்...',
+    'nav.newGame': 'புதிய விளையாட்டு',
+    'nav.guide': 'வழிகாட்டி'
   },
   te: {
     'app.title': 'Nonograms',
@@ -3310,7 +3496,9 @@ const messages = {
     'theme.light': 'లైట్',
     'theme.dark': 'డార్క్',
     'language.searchLabel': 'భాషను వెతకండి',
-    'language.searchPlaceholder': 'భాష పేరు టైప్ చేయండి...'
+    'language.searchPlaceholder': 'భాష పేరు టైప్ చేయండి...',
+    'nav.newGame': 'కొత్త ఆట',
+    'nav.guide': 'గైడ్'
   },
   ne: {
     'app.title': 'Nonograms',
@@ -3359,7 +3547,9 @@ const messages = {
     'theme.light': 'लाइट',
     'theme.dark': 'डार्क',
     'language.searchLabel': 'भाषा खोज्नुहोस्',
-    'language.searchPlaceholder': 'भाषाको नाम लेख्नुहोस्...'
+    'language.searchPlaceholder': 'भाषाको नाम लेख्नुहोस्...',
+    'nav.newGame': 'नयाँ खेल',
+    'nav.guide': 'गाइड'
   },
   my: {
     'app.title': 'Nonograms',
@@ -3408,7 +3598,9 @@ const messages = {
     'theme.light': 'အလင်း',
     'theme.dark': 'အမှောင်',
     'language.searchLabel': 'ဘာသာစကားရှာပါ',
-    'language.searchPlaceholder': 'ဘာသာစကားအမည်ရိုက်ထည့်ပါ...'
+    'language.searchPlaceholder': 'ဘာသာစကားအမည်ရိုက်ထည့်ပါ...',
+    'nav.newGame': 'ဂိမ်းအသစ်',
+    'nav.guide': 'လမ်းညွှန်'
   },
   km: {
     'app.title': 'Nonograms',
@@ -3457,7 +3649,9 @@ const messages = {
     'theme.light': 'ភ្លឺ',
     'theme.dark': 'ងងឹត',
     'language.searchLabel': 'ស្វែងរកភាសា',
-    'language.searchPlaceholder': 'វាយឈ្មោះភាសា...'
+    'language.searchPlaceholder': 'វាយឈ្មោះភាសា...',
+    'nav.newGame': 'ល្បែងថ្មី',
+    'nav.guide': 'ការណែនាំ'
   },
   lo: {
     'app.title': 'Nonograms',
@@ -3506,7 +3700,9 @@ const messages = {
     'theme.light': 'ແຈ້ງ',
     'theme.dark': 'ມືດ',
     'language.searchLabel': 'ຄົ້ນຫາພາສາ',
-    'language.searchPlaceholder': 'ພິມຊື່ພາສາ...'
+    'language.searchPlaceholder': 'ພິມຊື່ພາສາ...',
+    'nav.newGame': 'ເກມໃໝ່',
+    'nav.guide': 'ຄຳແນະນຳ'
   },
   mn: {
     'app.title': 'Nonograms',
@@ -3555,7 +3751,9 @@ const messages = {
     'theme.light': 'Гэгээтэй',
     'theme.dark': 'Харанхуй',
     'language.searchLabel': 'Хэл хайх',
-    'language.searchPlaceholder': 'Хэлний нэрийг бичнэ үү...'
+    'language.searchPlaceholder': 'Хэлний нэрийг бичнэ үү...',
+    'nav.newGame': 'ШИНЭ ТОГЛООМ',
+    'nav.guide': 'ЗААВАР'
   },
   bo: {
     'app.title': 'Nonograms',
@@ -3604,7 +3802,9 @@ const messages = {
     'theme.light': 'དཀར་པོ',
     'theme.dark': 'ནག་པོ',
     'language.searchLabel': 'སྐད་ཡིག་འཚོལ',
-    'language.searchPlaceholder': 'སྐད་ཡིག་གི་མིང་འབྲི...'
+    'language.searchPlaceholder': 'སྐད་ཡིག་གི་མིང་འབྲི...',
+    'nav.newGame': 'རྩེད་མོ་གསར་པ།',
+    'nav.guide': 'ལམ་སྟོན།'
   },
   af: {
     'app.title': 'Nonograms',
@@ -3653,7 +3853,9 @@ const messages = {
     'theme.light': 'Lig',
     'theme.dark': 'Donker',
     'language.searchLabel': 'Soek taal',
-    'language.searchPlaceholder': 'Tik taalnaam...'
+    'language.searchPlaceholder': 'Tik taalnaam...',
+    'nav.newGame': 'NUWE SPEL',
+    'nav.guide': 'GIDS'
   },
   sw: {
     'app.title': 'Nonograms',
@@ -3702,7 +3904,9 @@ const messages = {
     'theme.light': 'Nyeupe',
     'theme.dark': 'Giza',
     'language.searchLabel': 'Tafuta lugha',
-    'language.searchPlaceholder': 'Andika jina la lugha...'
+    'language.searchPlaceholder': 'Andika jina la lugha...',
+    'nav.newGame': 'MCHEZO MPYA',
+    'nav.guide': 'MUONGOZO'
   },
   am: {
     'app.title': 'Nonograms',
@@ -3751,7 +3955,9 @@ const messages = {
     'theme.light': 'ቀላል',
     'theme.dark': 'ጨለማ',
     'language.searchLabel': 'ቋንቋ ይፈልጉ',
-    'language.searchPlaceholder': 'የቋንቋ ስም ይተይቡ...'
+    'language.searchPlaceholder': 'የቋንቋ ስም ይተይቡ...',
+    'nav.newGame': 'አዲስ ጨዋታ',
+    'nav.guide': 'መመሪያ'
   },
   yo: {
     'app.title': 'Nonograms',
@@ -3800,7 +4006,9 @@ const messages = {
     'theme.light': 'Fúyẹ́',
     'theme.dark': 'Dúdú',
     'language.searchLabel': 'Wá èdè',
-    'language.searchPlaceholder': 'Tẹ orukọ èdè...'
+    'language.searchPlaceholder': 'Tẹ orukọ èdè...',
+    'nav.newGame': 'ERE TITUN',
+    'nav.guide': 'ITỌSỌNA'
   },
   ig: {
     'app.title': 'Nonograms',
@@ -3849,7 +4057,9 @@ const messages = {
     'theme.light': 'Ọkụ',
     'theme.dark': 'Ọchịchịrị',
     'language.searchLabel': 'Chọọ asụsụ',
-    'language.searchPlaceholder': 'Pịnye aha asụsụ...'
+    'language.searchPlaceholder': 'Pịnye aha asụsụ...',
+    'nav.newGame': 'EGWUREGWU OHUU',
+    'nav.guide': 'NDUZI'
   },
   so: {
     'app.title': 'Nonograms',
@@ -3898,7 +4108,9 @@ const messages = {
     'theme.light': 'Iftiin',
     'theme.dark': 'Madoow',
     'language.searchLabel': 'Raadi luqad',
-    'language.searchPlaceholder': 'Qor magaca luqadda...'
+    'language.searchPlaceholder': 'Qor magaca luqadda...',
+    'nav.newGame': 'CIYAAR CUSUB',
+    'nav.guide': 'HAGAHA'
   },
   rw: {
     'app.title': 'Nonograms',
@@ -3947,7 +4159,9 @@ const messages = {
     'theme.light': 'Urumuri',
     'theme.dark': 'Umwijima',
     'language.searchLabel': 'Shakisha ururimi',
-    'language.searchPlaceholder': 'Andika izina ry\'ururimi...'
+    'language.searchPlaceholder': 'Andika izina ry\'ururimi...',
+    'nav.newGame': 'UMUKINO MUSHYA',
+    'nav.guide': 'IYOBORA'
   },
   rn: {
     'app.title': 'Nonograms',
@@ -3996,7 +4210,9 @@ const messages = {
     'theme.light': 'Umuco',
     'theme.dark': 'Umwijima',
     'language.searchLabel': 'Rondera ururimi',
-    'language.searchPlaceholder': 'Andika izina ry\'ururimi...'
+    'language.searchPlaceholder': 'Andika izina ry\'ururimi...',
+    'nav.newGame': 'UMUKINO MUSHYA',
+    'nav.guide': 'IYOBORA'
   },
   wo: {
     'app.title': 'Nonograms',
@@ -4045,7 +4261,9 @@ const messages = {
     'theme.light': 'Leer',
     'theme.dark': 'Lëndëm',
     'language.searchLabel': 'Seet làkk',
-    'language.searchPlaceholder': 'Bind turu làkk...'
+    'language.searchPlaceholder': 'Bind turu làkk...',
+    'nav.newGame': 'JEU BU BESS',
+    'nav.guide': 'GINDIT'
   },
   om: {
     'app.title': 'Nonograms',
@@ -4094,7 +4312,9 @@ const messages = {
     'theme.light': 'Ifaa',
     'theme.dark': 'Dukkana',
     'language.searchLabel': 'Afaan barbaadi',
-    'language.searchPlaceholder': 'Maqaa afaanii barreessi...'
+    'language.searchPlaceholder': 'Maqaa afaanii barreessi...',
+    'nav.newGame': 'TAPHA HAARAA',
+    'nav.guide': 'QAJEELE'
   },
   ti: {
     'app.title': 'Nonograms',
@@ -4143,7 +4363,9 @@ const messages = {
     'theme.light': 'ብሩህ',
     'theme.dark': 'ጸልማት',
     'language.searchLabel': 'ቋንቋ ድለ',
-    'language.searchPlaceholder': 'ስም ቋንቋ ጽሓፍ...'
+    'language.searchPlaceholder': 'ስም ቋንቋ ጽሓፍ...',
+    'nav.newGame': 'ሓatsush ጸወታ',
+    'nav.guide': 'መምርሒ'
   },
   ht: {
     'app.title': 'Nonograms',
@@ -4192,7 +4414,9 @@ const messages = {
     'theme.light': 'Klè',
     'theme.dark': 'Fènwa',
     'language.searchLabel': 'Chèche lang',
-    'language.searchPlaceholder': 'Ekri non lang lan...'
+    'language.searchPlaceholder': 'Ekri non lang lan...',
+    'nav.newGame': 'NOUVO JWÈT',
+    'nav.guide': 'GID'
   },
   ceb: {
     'app.title': 'Nonograms',
@@ -4241,7 +4465,9 @@ const messages = {
     'theme.light': 'Hayag',
     'theme.dark': 'Ngitngit',
     'language.searchLabel': 'Pangitaa ang pinulongan',
-    'language.searchPlaceholder': 'Isulat ang ngalan sa pinulongan...'
+    'language.searchPlaceholder': 'Isulat ang ngalan sa pinulongan...',
+    'nav.newGame': 'BAG-ONG DULA',
+    'nav.guide': 'GIYA'
   },
   ilo: {
     'app.title': 'Nonograms',
@@ -4290,7 +4516,9 @@ const messages = {
     'theme.light': 'Naraniag',
     'theme.dark': 'Nasipnget',
     'language.searchLabel': 'Biroken ti pagsasao',
-    'language.searchPlaceholder': 'I-type ti nagan ti pagsasao...'
+    'language.searchPlaceholder': 'I-type ti nagan ti pagsasao...',
+    'nav.newGame': 'BARO A AY-AYAM',
+    'nav.guide': 'GIYA'
   },
   jv: {
     'app.title': 'Nonograms',
@@ -4339,7 +4567,9 @@ const messages = {
     'theme.light': 'Padhang',
     'theme.dark': 'Peteng',
     'language.searchLabel': 'Goleki basa',
-    'language.searchPlaceholder': 'Ketik jeneng basa...'
+    'language.searchPlaceholder': 'Ketik jeneng basa...',
+    'nav.newGame': 'PERMAINAN ANYAR',
+    'nav.guide': 'PANDUAN'
   },
   ku: {
     'app.title': 'Nonograms',
@@ -4388,7 +4618,9 @@ const messages = {
     'theme.light': 'Ronahî',
     'theme.dark': 'Tarî',
     'language.searchLabel': 'Li ziman bigere',
-    'language.searchPlaceholder': 'Navê ziman binivîse...'
+    'language.searchPlaceholder': 'Navê ziman binivîse...',
+    'nav.newGame': 'LÎSTIKA NÛ',
+    'nav.guide': 'RÊBER'
   },
   ckb: {
     'app.title': 'Nonograms',
@@ -4437,7 +4669,9 @@ const messages = {
     'theme.light': 'ڕووناک',
     'theme.dark': 'تاریک',
     'language.searchLabel': 'گەڕان بۆ زمان',
-    'language.searchPlaceholder': 'ناوی زمان بنووسە...'
+    'language.searchPlaceholder': 'ناوی زمان بنووسە...',
+    'nav.newGame': 'یاری نوێ',
+    'nav.guide': 'ڕێنمایی'
   },
   ps: {
     'app.title': 'Nonograms',
@@ -4486,7 +4720,9 @@ const messages = {
     'theme.light': 'رڼا',
     'theme.dark': 'تور',
     'language.searchLabel': 'ژبه وپلټئ',
-    'language.searchPlaceholder': 'د ژبې نوم ولیکئ...'
+    'language.searchPlaceholder': 'د ژبې نوم ولیکئ...',
+    'nav.newGame': 'نوې لوبه',
+    'nav.guide': 'لارښود'
   }
 };
 
@@ -4498,7 +4734,8 @@ const requiredKeys = [
   'custom.start','custom.sizeError','win.title','win.message','win.time','win.playAgain',
   'win.shareTitle','win.shareText','win.shareX','win.shareFacebook','win.shareWhatsapp',
   'win.shareDownload','pwa.installTitle','pwa.installMobile','pwa.installDesktop',
-  'language.label','theme.label','theme.system','theme.light','theme.dark'
+  'language.label','theme.label','theme.system','theme.light','theme.dark',
+  'language.searchLabel','language.searchPlaceholder','nav.newGame','nav.guide'
 ];
 
 const supportedLocales = Object.keys(messages).filter(
@@ -4506,6 +4743,12 @@ const supportedLocales = Object.keys(messages).filter(
 );
 
 const detectLocale = () => {
+  if (typeof localStorage !== 'undefined') {
+    const saved = localStorage.getItem('locale');
+    if (saved && supportedLocales.includes(saved)) {
+      return saved;
+    }
+  }
   if (typeof navigator === 'undefined') return 'en';
   const browserLocale = (navigator.languages && navigator.languages[0]) || navigator.language || 'en';
   let short = browserLocale.toLowerCase().split('-')[0];
@@ -4541,6 +4784,9 @@ const t = (key, params) => {
 
 const setLocale = (value) => {
   locale.value = supportedLocales.includes(value) ? value : 'en';
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem('locale', locale.value);
+  }
   if (typeof document !== 'undefined') {
     document.documentElement.lang = locale.value;
     document.title = t('app.title');

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)
@@ -39,7 +40,11 @@ if ('serviceWorker' in navigator) {
   }
   navigator.serviceWorker.addEventListener('controllerchange', triggerReload)
   const checkForUpdate = () => {
-    navigator.serviceWorker.getRegistration().then((registration) => registration?.update())
+    navigator.serviceWorker.getRegistration().then((registration) => {
+      if (registration) {
+        registration.update()
+      }
+    })
   }
   window.addEventListener('visibilitychange', () => {
     if (document.visibilityState === 'visible') 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,19 @@ 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',
       injectRegister: 'auto',
+      workbox: {
+        cleanupOutdatedCaches: true,
+        skipWaiting: true,
+        clientsClaim: true,
+      },
       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')
+    }
+  }
+})