1.0.3

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.eh0stsihuc8"
-  }], {});
-  workbox.cleanupOutdatedCaches();
-  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
-    allowlist: [/^\/$/]
-  }));
-
-}));

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-nonograms-solid",
-      "version": "1.0.0",
+      "version": "1.0.3",
       "dependencies": {
         "fireworks-js": "^2.10.8",
         "flag-icons": "^7.5.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -9,6 +9,7 @@ import GuidePanel from './components/GuidePanel.vue';
 import WinModal from './components/WinModal.vue';
 import CustomGameModal from './components/CustomGameModal.vue';
 import FixedBar from './components/FixedBar.vue';
+import ReloadPrompt from './components/ReloadPrompt.vue';
 
 // Main App Entry
 const store = usePuzzleStore();
@@ -21,6 +22,7 @@ const installDismissed = ref(false);
 const isCoarsePointer = ref(false);
 const isStandalone = ref(false);
 const themePreference = ref('system');
+const appVersion = __APP_VERSION__;
 let displayModeMedia = null;
 let prefersColorSchemeMedia = null;
 
@@ -164,10 +166,15 @@ onUnmounted(() => {
       </section>
     </div>
 
+    <footer class="app-version">
+      v{{ appVersion }}
+    </footer>
+
     <!-- Modals Teleport -->
     <Teleport to="body">
       <WinModal v-if="store.isGameWon" />
       <CustomGameModal v-if="showCustomModal" @close="showCustomModal = false" />
+      <ReloadPrompt />
     </Teleport>
   </main>
 </template>
@@ -183,8 +190,8 @@ onUnmounted(() => {
 }
 
 .install-banner {
-  background: rgba(0, 242, 254, 0.1);
-  border: 1px solid var(--primary-neon);
+  background: var(--banner-bg);
+  border: 1px solid var(--banner-border);
   border-radius: 8px;
   padding: 10px 20px;
   display: flex;
@@ -193,10 +200,11 @@ onUnmounted(() => {
   width: 90%;
   max-width: 600px;
   margin-bottom: 20px;
+  box-shadow: var(--banner-shadow);
 }
 
 .install-text {
-  color: #fff;
+  color: var(--text-color);
 }
 
 .install-actions {
@@ -208,7 +216,7 @@ onUnmounted(() => {
 .install-close {
   background: transparent;
   border: none;
-  color: #aaa;
+  color: var(--text-muted);
   font-size: 1.5rem;
   cursor: pointer;
 }
@@ -238,4 +246,20 @@ onUnmounted(() => {
 .fade-leave-to {
   opacity: 0;
 }
+
+.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 === 2) emit('start-drag', props.r, props.c, true);
+    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, false);
     return;
   }
-  longPressTriggered = false;
-  clearLongPress();
-  longPressTimer = setTimeout(() => {
-    longPressTriggered = true;
-    emit('start-drag', props.r, props.c, true);
-  }, 450);
+  
+  // Touch logic
+  const now = Date.now();
+  if (now - lastTap < 300) {
+    // Double tap -> X (Force)
+    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;
-  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);
-  }
+  // Handled in pointerdown
 };
 
 const handlePointerCancel = (e) => {
-  if (e.pointerType === 'mouse') return;
-  clearLongPress();
+  // Handled in pointerdown
 };
 </script>
 

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);
-  const availableForGrid = vw - bodyPadding - hintWidth;
+
+  let containerWidth;
+  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;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 16px;
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
   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);
-    border: 1px solid rgba(0, 242, 254, 0.3);
+    background: var(--panel-bg);
+    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/NavBar.vue

@@ -2,7 +2,7 @@
 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 } from 'lucide-vue-next';
+import { Gamepad2, Palette, CircleHelp, Sun, Moon, Menu, X, ChevronDown, ChevronUp, Monitor } from 'lucide-vue-next';
 
 const store = usePuzzleStore();
 const { t, locale, setLocale, locales } = useI18n();
@@ -20,6 +20,7 @@ const searchTerm = ref('');
 const langToCountry = {
   en: 'gb',
   zh: 'cn',
+  'zh-hant': 'tw',
   hi: 'in',
   es: 'es',
   fr: 'fr',
@@ -61,7 +62,59 @@ const langToCountry = {
   gl: 'es-ga',
   cy: 'gb-wls',
   gd: 'gb-sct',
-  eu: 'es-pv'
+  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) => {
@@ -188,7 +241,7 @@ watch(isMobileMenuOpen, (val) => {
       <!-- Game Menu -->
       <div class="nav-dropdown">
         <button class="btn-neon nav-btn" @click.stop="toggleGameMenu">
-          <Gamepad2 :size="18" /> NEW GAME
+          <Gamepad2 :size="18" /> {{ t('nav.newGame') }}
         </button>
         <transition name="slide-fade">
           <div v-if="isGameOpen" class="dropdown-menu">
@@ -210,15 +263,18 @@ watch(isMobileMenuOpen, (val) => {
       <!-- Theme Menu -->
       <div class="nav-dropdown">
         <button class="btn-neon nav-btn" @click.stop="toggleThemeMenu">
-          <Palette :size="18" /> Theme
+          <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" /> Light
+              <Sun :size="16" /> {{ t('theme.light') }}
             </button>
             <button class="dropdown-item" @click="setTheme('dark')">
-              <Moon :size="16" /> Dark
+              <Moon :size="16" /> {{ t('theme.dark') }}
             </button>
           </div>
         </transition>
@@ -226,7 +282,7 @@ watch(isMobileMenuOpen, (val) => {
 
       <!-- Guide Button -->
       <button class="btn-neon nav-btn" @click="toggleGuide">
-        <CircleHelp :size="18" /> GUIDE
+        <CircleHelp :size="18" /> {{ t('nav.guide') }}
       </button>
 
       <!-- Language Menu -->
@@ -280,7 +336,7 @@ watch(isMobileMenuOpen, (val) => {
                 <!-- Mobile Game Menu -->
                 <div class="mobile-group">
                     <button class="mobile-item-trigger" @click="toggleGameMenu">
-                        <span class="flex-center gap-10"><Gamepad2 :size="20" /> NEW GAME</span>
+                        <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">
@@ -301,15 +357,18 @@ watch(isMobileMenuOpen, (val) => {
                 <!-- Mobile Theme Menu -->
                 <div class="mobile-group">
                     <button class="mobile-item-trigger" @click="toggleThemeMenu">
-                        <span class="flex-center gap-10"><Palette :size="20" /> Theme</span>
+                        <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" /> Light
+                          <Sun :size="16" /> {{ t('theme.light') }}
                         </button>
                         <button class="mobile-sub-item" @click="setTheme('dark')">
-                          <Moon :size="16" /> Dark
+                          <Moon :size="16" /> {{ t('theme.dark') }}
                         </button>
                      </div>
                 </div>
@@ -317,7 +376,7 @@ watch(isMobileMenuOpen, (val) => {
                 <!-- Mobile Guide -->
                 <div class="mobile-group">
                     <button class="mobile-item-trigger" @click="toggleGuide">
-                         <span class="flex-center gap-10"><CircleHelp :size="20" /> GUIDE</span>
+                         <span class="flex-center gap-10"><CircleHelp :size="20" /> {{ t('nav.guide') }}</span>
                     </button>
                 </div>
 
@@ -328,7 +387,7 @@ watch(isMobileMenuOpen, (val) => {
                              <span class="lang-flag-current mobile-flag">
                                 <span :class="getFlagClass(locale)"></span>
                              </span>
-                             Language
+                             {{ t('language.label') }}
                         </span>
                         <component :is="isLangOpen ? ChevronUp : ChevronDown" :size="16" />
                     </button>
@@ -549,14 +608,14 @@ watch(isMobileMenuOpen, (val) => {
     position: fixed;
     top: 0;
     left: 0;
-    width: 100vw;
+    width: 100%;
     height: 100vh;
     background: rgba(10, 10, 25, 0.98);
     backdrop-filter: blur(20px);
     z-index: 10000;
     display: flex;
     flex-direction: column;
-    padding: 20px;
+    padding: 0;
     overflow-y: auto;
 }
 
@@ -564,22 +623,24 @@ watch(isMobileMenuOpen, (val) => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 40px;
-    padding-bottom: 20px;
+    padding: 10px 20px;
     border-bottom: 1px solid rgba(0, 242, 254, 0.2);
+    flex-shrink: 0;
 }
 
 .mobile-title {
-    font-size: 1.5rem;
+    font-size: 1.8rem;
     color: var(--primary-neon);
     margin: 0;
-    letter-spacing: 2px;
+    letter-spacing: 3px;
+    font-weight: 300;
 }
 
 .mobile-menu-items {
     display: flex;
     flex-direction: column;
     gap: 15px;
+    padding: 20px;
 }
 
 .mobile-group {

src/components/ReloadPrompt.vue

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

src/components/StatusPanel.vue

@@ -3,7 +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 } from 'lucide-vue-next';
+import { RotateCcw, RefreshCw, Eye, Undo } from 'lucide-vue-next';
 
 const store = usePuzzleStore();
 const { formatTime } = useTimer();
@@ -45,7 +45,7 @@ const progressText = computed(() => `${store.progressPercentage.toFixed(3)}%`);
       </button>
       <div class="action-separator"></div>
       <button class="action-btn" @click="store.undo" :title="t('actions.undo')">
-        <RotateCcw :size="20" />
+        <Undo :size="20" />
       </button>
     </div>
   </div>

src/components/WinModal.vue

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

src/composables/useI18n.js

@@ -42,6 +42,10 @@ const messages = {
     'pwa.installTitle': 'Zainstaluj aplikację i graj offline',
     'pwa.installMobile': 'Dodaj do ekranu głównego',
     'pwa.installDesktop': 'Zainstaluj na komputerze',
+    'pwa.offlineReady': 'Aplikacja gotowa do pracy offline',
+    'pwa.newContent': 'Dostępna nowa wersja, odśwież aby zaktualizować',
+    'pwa.reload': 'Odśwież',
+    'pwa.close': 'Zamknij',
     'language.label': 'Wybór języka',
     'language.pl': 'Polski',
     'language.en': 'Angielski',
@@ -92,7 +96,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',
@@ -135,6 +141,10 @@ const messages = {
     'pwa.installTitle': 'Install the app and play offline',
     'pwa.installMobile': 'Add to home screen',
     'pwa.installDesktop': 'Install on desktop',
+    'pwa.offlineReady': 'App ready to work offline',
+    'pwa.newContent': 'New content available, click on reload button to update',
+    'pwa.reload': 'Reload',
+    'pwa.close': 'Close',
     'language.label': 'Language selection',
     'language.pl': 'Polish',
     'language.en': 'English',
@@ -237,7 +247,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 +295,8 @@ const messages = {
     'language.label': '语言选择',
     'language.pl': '波兰语',
     'language.en': '英语',
-    'language.zh': '中文',
+    'language.zh': '中文 (简体)',
+    'language.zh-hant': '中文 (繁体)',
     'language.hi': '印地语',
     'language.es': '西班牙语',
     'language.fr': '法语',
@@ -297,7 +310,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 +435,9 @@ const messages = {
     'theme.light': 'हल्का',
     'theme.dark': 'गहरा',
     'language.searchLabel': 'भाषा खोजें',
-    'language.searchPlaceholder': 'भाषा का नाम लिखें...'
+    'language.searchPlaceholder': 'भाषा का नाम लिखें...',
+    'nav.newGame': 'नया खेल',
+    'nav.guide': 'गाइड'
   },
   es: {
     'app.title': 'Nonograms',
@@ -417,7 +497,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 +559,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 +621,9 @@ const messages = {
     'theme.light': 'فاتح',
     'theme.dark': 'داكن',
     'language.searchLabel': 'ابحث عن لغة',
-    'language.searchPlaceholder': 'اكتب اسم اللغة...'
+    'language.searchPlaceholder': 'اكتب اسم اللغة...',
+    'nav.newGame': 'لعبة جديدة',
+    'nav.guide': 'دليل'
   },
   bn: {
     'app.title': 'Nonograms',
@@ -597,7 +683,9 @@ const messages = {
     'theme.light': 'হালকা',
     'theme.dark': 'গাঢ়',
     'language.searchLabel': 'ভাষা অনুসন্ধান করুন',
-    'language.searchPlaceholder': 'ভাষার নাম লিখুন...'
+    'language.searchPlaceholder': 'ভাষার নাম লিখুন...',
+    'nav.newGame': 'নতুন খেলা',
+    'nav.guide': 'নির্দেশিকা'
   },
   ru: {
     'app.title': 'Nonograms',
@@ -657,7 +745,9 @@ const messages = {
     'theme.light': 'Светлая',
     'theme.dark': 'Тёмная',
     'language.searchLabel': 'Поиск языка',
-    'language.searchPlaceholder': 'Введите название языка...'
+    'language.searchPlaceholder': 'Введите название языка...',
+    'nav.newGame': 'НОВАЯ ИГРА',
+    'nav.guide': 'РУКОВОДСТВО'
   },
   pt: {
     'app.title': 'Nonograms',
@@ -717,7 +807,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 +869,9 @@ const messages = {
     'theme.light': 'ہلکا',
     'theme.dark': 'گہرا',
     'language.searchLabel': 'زبان تلاش کریں',
-    'language.searchPlaceholder': 'زبان کا نام درج کریں...'
+    'language.searchPlaceholder': 'زبان کا نام درج کریں...',
+    'nav.newGame': 'نیا کھیل',
+    'nav.guide': 'رہنما'
   }
   ,
   de: {
@@ -838,7 +932,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 +994,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 +1056,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 +1107,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 +1158,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 +1209,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 +1260,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 +1311,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 +1362,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 +1413,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 +1464,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 +1515,9 @@ const messages = {
     'theme.light': 'Светла',
     'theme.dark': 'Тъмна',
     'language.searchLabel': 'Търсене на език',
-    'language.searchPlaceholder': 'Въведете име на език...'
+    'language.searchPlaceholder': 'Въведете име на език...',
+    'nav.newGame': 'НОВА ИГРА',
+    'nav.guide': 'РЪКОВОДСТВО'
   },
   el: {
     'app.title': 'Nonograms',
@@ -1448,7 +1566,9 @@ const messages = {
     'theme.light': 'Ανοιχτό',
     'theme.dark': 'Σκούρο',
     'language.searchLabel': 'Αναζήτηση γλώσσας',
-    'language.searchPlaceholder': 'Πληκτρολογήστε όνομα γλώσσας...'
+    'language.searchPlaceholder': 'Πληκτρολογήστε όνομα γλώσσας...',
+    'nav.newGame': 'ΝΕΟ ΠΑΙΧΝΙΔΙ',
+    'nav.guide': 'ΟΔΗΓΟΣ'
   },
   uk: {
     'app.title': 'Nonograms',
@@ -1497,7 +1617,9 @@ const messages = {
     'theme.light': 'Світла',
     'theme.dark': 'Темна',
     'language.searchLabel': 'Пошук мови',
-    'language.searchPlaceholder': 'Введіть назву мови...'
+    'language.searchPlaceholder': 'Введіть назву мови...',
+    'nav.newGame': 'НОВА ГРА',
+    'nav.guide': 'ІНСТРУКЦІЯ'
   },
   be: {
     'app.title': 'Nonograms',
@@ -1546,7 +1668,9 @@ const messages = {
     'theme.light': 'Светлая',
     'theme.dark': 'Цёмная',
     'language.searchLabel': 'Пошук мовы',
-    'language.searchPlaceholder': 'Увядзіце назву мовы...'
+    'language.searchPlaceholder': 'Увядзіце назву мовы...',
+    'nav.newGame': 'НОВАЯ ГУЛЬНЯ',
+    'nav.guide': 'КІРАЎНІЦТВА'
   },
   sr: {
     'app.title': 'Nonograms',
@@ -1595,7 +1719,9 @@ const messages = {
     'theme.light': 'Светла',
     'theme.dark': 'Тамна',
     'language.searchLabel': 'Претрага језика',
-    'language.searchPlaceholder': 'Унесите назив језика...'
+    'language.searchPlaceholder': 'Унесите назив језика...',
+    'nav.newGame': 'НОВА ИГРА',
+    'nav.guide': 'ВОДИЧ'
   },
   hr: {
     'app.title': 'Nonograms',
@@ -1644,7 +1770,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 +1821,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 +1872,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 +1923,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 +1974,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 +2025,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 +2076,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 +2127,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 +2178,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 +2229,9 @@ const messages = {
     'theme.light': 'Светла',
     'theme.dark': 'Темна',
     'language.searchLabel': 'Пребарај јазик',
-    'language.searchPlaceholder': 'Внесете име на јазик...'
+    'language.searchPlaceholder': 'Внесете име на јазик...',
+    'nav.newGame': 'НОВА ИГРА',
+    'nav.guide': 'ВОДИЧ'
   },
   bs: {
     'app.title': 'Nonograms',
@@ -2134,7 +2280,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 +2331,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 +2382,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 +2433,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 +2484,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 +2535,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 +2586,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 +2637,9 @@ const messages = {
     'theme.light': 'ライト',
     'theme.dark': 'ダーク',
     'language.searchLabel': '言語を検索',
-    'language.searchPlaceholder': '言語名を入力...'
+    'language.searchPlaceholder': '言語名を入力...',
+    'nav.newGame': '新しいゲーム',
+    'nav.guide': 'ガイド'
   },
   ko: {
     'app.title': '노노그램',
@@ -2526,7 +2688,9 @@ const messages = {
     'theme.light': '라이트',
     'theme.dark': '다크',
     'language.searchLabel': '언어 검색',
-    'language.searchPlaceholder': '언어 이름 입력...'
+    'language.searchPlaceholder': '언어 이름 입력...',
+    'nav.newGame': '새 게임',
+    'nav.guide': '가이드'
   },
   id: {
     'app.title': 'Nonograms',
@@ -2575,7 +2739,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 +2790,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 +2841,9 @@ const messages = {
     'theme.light': 'สว่าง',
     'theme.dark': 'มืด',
     'language.searchLabel': 'ค้นหาภาษา',
-    'language.searchPlaceholder': 'พิมพ์ชื่อภาษา...'
+    'language.searchPlaceholder': 'พิมพ์ชื่อภาษา...',
+    'nav.newGame': 'เกมใหม่',
+    'nav.guide': 'คู่มือ'
   },
   ms: {
     'app.title': 'Nonograms',
@@ -2722,7 +2892,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 +2943,9 @@ const messages = {
     'theme.light': 'روشن',
     'theme.dark': 'تاریک',
     'language.searchLabel': 'جستجوی زبان',
-    'language.searchPlaceholder': 'نام زبان را بنویسید...'
+    'language.searchPlaceholder': 'نام زبان را بنویسید...',
+    'nav.newGame': 'بازی جدید',
+    'nav.guide': 'راهنما'
   },
   he: {
     'app.title': 'Nonograms',
@@ -2820,7 +2994,9 @@ const messages = {
     'theme.light': 'בהיר',
     'theme.dark': 'כהה',
     'language.searchLabel': 'חפש שפה',
-    'language.searchPlaceholder': 'הקלד שם שפה...'
+    'language.searchPlaceholder': 'הקלד שם שפה...',
+    'nav.newGame': 'משחק חדש',
+    'nav.guide': 'מדריך'
   },
   az: {
     'app.title': 'Nonograms',
@@ -2869,7 +3045,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 +3096,9 @@ const messages = {
     'theme.light': 'Լուսավոր',
     'theme.dark': 'Մութ',
     'language.searchLabel': 'Փնտրել լեզուն',
-    'language.searchPlaceholder': 'Գրեք լեզվի անունը...'
+    'language.searchPlaceholder': 'Գրեք լեզվի անունը...',
+    'nav.newGame': 'ՆՈՐ ԽԱՂ',
+    'nav.guide': 'ՈՒՂԵՑՈՒՅՑ'
   },
   uz: {
     'app.title': 'Nonograms',
@@ -2967,7 +3147,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 +3198,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 +3249,9 @@ const messages = {
     'theme.light': 'લાઇટ',
     'theme.dark': 'ડાર્ક',
     'language.searchLabel': 'ભાષા શોધો',
-    'language.searchPlaceholder': 'ભાષાનું નામ લખો...'
+    'language.searchPlaceholder': 'ભાષાનું નામ લખો...',
+    'nav.newGame': 'નવી રમત',
+    'nav.guide': 'માર્ગદર્શિકા'
   },
   kn: {
     'app.title': 'Nonograms',
@@ -3114,7 +3300,9 @@ const messages = {
     'theme.light': 'ಬೆಳಕು',
     'theme.dark': 'ಕತ್ತಲೆ',
     'language.searchLabel': 'ಭಾಷೆ ಹುಡುಕಿ',
-    'language.searchPlaceholder': 'ಭಾಷೆಯ ಹೆಸರನ್ನು ಟೈಪ್ ಮಾಡಿ...'
+    'language.searchPlaceholder': 'ಭಾಷೆಯ ಹೆಸರನ್ನು ಟೈಪ್ ಮಾಡಿ...',
+    'nav.newGame': 'ಹೊಸ ಆಟ',
+    'nav.guide': 'ಮಾರ್ಗದರ್ಶಿ'
   },
   mr: {
     'app.title': 'Nonograms',
@@ -3163,7 +3351,9 @@ const messages = {
     'theme.light': 'लाईट',
     'theme.dark': 'डार्क',
     'language.searchLabel': 'भाषा शोधा',
-    'language.searchPlaceholder': 'भाषेचे नाव लिहा...'
+    'language.searchPlaceholder': 'भाषेचे नाव लिहा...',
+    'nav.newGame': 'नवीन खेळ',
+    'nav.guide': 'मार्गदर्शक'
   },
   pa: {
     'app.title': 'Nonograms',
@@ -3212,7 +3402,9 @@ const messages = {
     'theme.light': 'ਲਾਈਟ',
     'theme.dark': 'ਡਾਰਕ',
     'language.searchLabel': 'ਭਾਸ਼ਾ ਖੋਜੋ',
-    'language.searchPlaceholder': 'ਭਾਸ਼ਾ ਦਾ ਨਾਮ ਲਿਖੋ...'
+    'language.searchPlaceholder': 'ਭਾਸ਼ਾ ਦਾ ਨਾਮ ਲਿਖੋ...',
+    'nav.newGame': 'ਨਵੀਂ ਖੇਡ',
+    'nav.guide': 'ਗਾਈਡ'
   },
   ta: {
     'app.title': 'Nonograms',
@@ -3261,7 +3453,9 @@ const messages = {
     'theme.light': 'வெளிச்சம்',
     'theme.dark': 'இருள்',
     'language.searchLabel': 'மொழியைத் தேடு',
-    'language.searchPlaceholder': 'மொழி பெயரை உள்ளிடவும்...'
+    'language.searchPlaceholder': 'மொழி பெயரை உள்ளிடவும்...',
+    'nav.newGame': 'புதிய விளையாட்டு',
+    'nav.guide': 'வழிகாட்டி'
   },
   te: {
     'app.title': 'Nonograms',
@@ -3310,7 +3504,9 @@ const messages = {
     'theme.light': 'లైట్',
     'theme.dark': 'డార్క్',
     'language.searchLabel': 'భాషను వెతకండి',
-    'language.searchPlaceholder': 'భాష పేరు టైప్ చేయండి...'
+    'language.searchPlaceholder': 'భాష పేరు టైప్ చేయండి...',
+    'nav.newGame': 'కొత్త ఆట',
+    'nav.guide': 'గైడ్'
   },
   ne: {
     'app.title': 'Nonograms',
@@ -3359,7 +3555,9 @@ const messages = {
     'theme.light': 'लाइट',
     'theme.dark': 'डार्क',
     'language.searchLabel': 'भाषा खोज्नुहोस्',
-    'language.searchPlaceholder': 'भाषाको नाम लेख्नुहोस्...'
+    'language.searchPlaceholder': 'भाषाको नाम लेख्नुहोस्...',
+    'nav.newGame': 'नयाँ खेल',
+    'nav.guide': 'गाइड'
   },
   my: {
     'app.title': 'Nonograms',
@@ -3408,7 +3606,9 @@ const messages = {
     'theme.light': 'အလင်း',
     'theme.dark': 'အမှောင်',
     'language.searchLabel': 'ဘာသာစကားရှာပါ',
-    'language.searchPlaceholder': 'ဘာသာစကားအမည်ရိုက်ထည့်ပါ...'
+    'language.searchPlaceholder': 'ဘာသာစကားအမည်ရိုက်ထည့်ပါ...',
+    'nav.newGame': 'ဂိမ်းအသစ်',
+    'nav.guide': 'လမ်းညွှန်'
   },
   km: {
     'app.title': 'Nonograms',
@@ -3457,7 +3657,9 @@ const messages = {
     'theme.light': 'ភ្លឺ',
     'theme.dark': 'ងងឹត',
     'language.searchLabel': 'ស្វែងរកភាសា',
-    'language.searchPlaceholder': 'វាយឈ្មោះភាសា...'
+    'language.searchPlaceholder': 'វាយឈ្មោះភាសា...',
+    'nav.newGame': 'ល្បែងថ្មី',
+    'nav.guide': 'ការណែនាំ'
   },
   lo: {
     'app.title': 'Nonograms',
@@ -3506,7 +3708,9 @@ const messages = {
     'theme.light': 'ແຈ້ງ',
     'theme.dark': 'ມືດ',
     'language.searchLabel': 'ຄົ້ນຫາພາສາ',
-    'language.searchPlaceholder': 'ພິມຊື່ພາສາ...'
+    'language.searchPlaceholder': 'ພິມຊື່ພາສາ...',
+    'nav.newGame': 'ເກມໃໝ່',
+    'nav.guide': 'ຄຳແນະນຳ'
   },
   mn: {
     'app.title': 'Nonograms',
@@ -3555,7 +3759,9 @@ const messages = {
     'theme.light': 'Гэгээтэй',
     'theme.dark': 'Харанхуй',
     'language.searchLabel': 'Хэл хайх',
-    'language.searchPlaceholder': 'Хэлний нэрийг бичнэ үү...'
+    'language.searchPlaceholder': 'Хэлний нэрийг бичнэ үү...',
+    'nav.newGame': 'ШИНЭ ТОГЛООМ',
+    'nav.guide': 'ЗААВАР'
   },
   bo: {
     'app.title': 'Nonograms',
@@ -3604,7 +3810,9 @@ const messages = {
     'theme.light': 'དཀར་པོ',
     'theme.dark': 'ནག་པོ',
     'language.searchLabel': 'སྐད་ཡིག་འཚོལ',
-    'language.searchPlaceholder': 'སྐད་ཡིག་གི་མིང་འབྲི...'
+    'language.searchPlaceholder': 'སྐད་ཡིག་གི་མིང་འབྲི...',
+    'nav.newGame': 'རྩེད་མོ་གསར་པ།',
+    'nav.guide': 'ལམ་སྟོན།'
   },
   af: {
     'app.title': 'Nonograms',
@@ -3653,7 +3861,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 +3912,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 +3963,9 @@ const messages = {
     'theme.light': 'ቀላል',
     'theme.dark': 'ጨለማ',
     'language.searchLabel': 'ቋንቋ ይፈልጉ',
-    'language.searchPlaceholder': 'የቋንቋ ስም ይተይቡ...'
+    'language.searchPlaceholder': 'የቋንቋ ስም ይተይቡ...',
+    'nav.newGame': 'አዲስ ጨዋታ',
+    'nav.guide': 'መመሪያ'
   },
   yo: {
     'app.title': 'Nonograms',
@@ -3800,7 +4014,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 +4065,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 +4116,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 +4167,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 +4218,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 +4269,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 +4320,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 +4371,9 @@ const messages = {
     'theme.light': 'ብሩህ',
     'theme.dark': 'ጸልማት',
     'language.searchLabel': 'ቋንቋ ድለ',
-    'language.searchPlaceholder': 'ስም ቋንቋ ጽሓፍ...'
+    'language.searchPlaceholder': 'ስም ቋንቋ ጽሓፍ...',
+    'nav.newGame': 'ሓatsush ጸወታ',
+    'nav.guide': 'መምርሒ'
   },
   ht: {
     'app.title': 'Nonograms',
@@ -4192,7 +4422,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 +4473,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 +4524,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 +4575,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 +4626,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 +4677,9 @@ const messages = {
     'theme.light': 'ڕووناک',
     'theme.dark': 'تاریک',
     'language.searchLabel': 'گەڕان بۆ زمان',
-    'language.searchPlaceholder': 'ناوی زمان بنووسە...'
+    'language.searchPlaceholder': 'ناوی زمان بنووسە...',
+    'nav.newGame': 'یاری نوێ',
+    'nav.guide': 'ڕێنمایی'
   },
   ps: {
     'app.title': 'Nonograms',
@@ -4486,7 +4728,9 @@ const messages = {
     'theme.light': 'رڼا',
     'theme.dark': 'تور',
     'language.searchLabel': 'ژبه وپلټئ',
-    'language.searchPlaceholder': 'د ژبې نوم ولیکئ...'
+    'language.searchPlaceholder': 'د ژبې نوم ولیکئ...',
+    'nav.newGame': 'نوې لوبه',
+    'nav.guide': 'لارښود'
   }
 };
 
@@ -4498,7 +4742,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 +4751,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 +4792,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?
-        // Standard: Toggle 0 <-> 2
-        if (current === 1) {
+        if (!force && 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

@@ -31,19 +31,3 @@ app.directive('cell-hover', vCellHover)
 
 app.mount('#app')
 
-if ('serviceWorker' in navigator) {
-  let refreshing = false
-  const triggerReload = () => {
-    if (refreshing) return
-    refreshing = true
-    window.location.reload()
-  }
-  navigator.serviceWorker.addEventListener('controllerchange', triggerReload)
-  const checkForUpdate = () => {
-    navigator.serviceWorker.getRegistration().then((registration) => registration?.update())
-  }
-  window.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible') checkForUpdate()
-  })
-  window.addEventListener('focus', checkForUpdate)
-}

src/stores/puzzle.js

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

src/styles/main.css

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

src/styles/scrollbar.css

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

src/utils/puzzleUtils.js

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

update_i18n_guide.cjs

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

vite.config.js

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