1.0.2

dev-dist/registerSW.js

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "vue-nonograms-solid",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-nonograms-solid",
-      "version": "1.0.0",
+      "version": "1.0.2",
       "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.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -21,6 +21,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,6 +165,10 @@ onUnmounted(() => {
       </section>
     </div>
 
+    <footer class="app-version">
+      v{{ appVersion }}
+    </footer>
+
     <!-- Modals Teleport -->
     <Teleport to="body">
       <WinModal v-if="store.isGameWon" />
@@ -183,8 +188,8 @@ onUnmounted(() => {
 }
 
 .install-banner {
-  background: rgba(0, 242, 254, 0.1);
+  background: var(--banner-bg);
-  border: 1px solid var(--primary-neon);
+  border: 1px solid var(--banner-border);
   border-radius: 8px;
   padding: 10px 20px;
   display: flex;
@@ -193,10 +198,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 +214,7 @@ onUnmounted(() => {
 .install-close {
   background: transparent;
   border: none;
-  color: #aaa;
+  color: var(--text-muted);
   font-size: 1.5rem;
   cursor: pointer;
 }
@@ -238,4 +244,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 === 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/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/NavBar.vue

@@ -20,6 +20,7 @@ const searchTerm = ref('');
 const langToCountry = {
   en: 'gb',
   zh: 'cn',
+  'zh-hant': 'tw',
   hi: 'in',
   es: 'es',
   fr: 'fr',
@@ -240,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">
@@ -281,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 -->
@@ -335,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">
@@ -375,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>
 
@@ -386,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>
@@ -607,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;
 }
 
@@ -622,22 +623,24 @@ watch(isMobileMenuOpen, (val) => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 40px;
+    padding: 10px 20px;
-    padding-bottom: 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/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

@@ -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

@@ -40,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);
 }
 
 * {

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);
     }

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
       },