1.8.1

package-lock.json

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

package.json

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

scripts/simulate_difficulty.js

@@ -0,0 +1,75 @@
+
+import fs from 'fs';
+import path from 'path';
+import { generateRandomGrid, calculateHints } from '../src/utils/puzzleUtils.js';
+import { solvePuzzle } from '../src/utils/solver.js';
+
+const OUTPUT_FILE = 'difficulty_simulation_results.json';
+const CSV_FILE = 'difficulty_simulation_results.csv';
+
+// Configuration
+const SIZES = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80]; // Steps of 5 up to 50, then 10
+const DENSITIES = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
+const SAMPLES_PER_POINT = 20; // Adjust based on time/accuracy needs
+
+console.log('Starting Monte Carlo Simulation for Nonogram Difficulty...');
+console.log(`Config: Sizes=${SIZES.length}, Densities=${DENSITIES.length}, Samples=${SAMPLES_PER_POINT}`);
+
+const results = [];
+const csvRows = ['size,density,avg_solved_percent,min_solved_percent,max_solved_percent,avg_time_ms'];
+
+const startTime = Date.now();
+
+for (const size of SIZES) {
+    for (const density of DENSITIES) {
+        let totalSolved = 0;
+        let minSolved = 100;
+        let maxSolved = 0;
+        let totalTime = 0;
+
+        process.stdout.write(`Simulating Size: ${size}x${size}, Density: ${density} ... `);
+
+        for (let i = 0; i < SAMPLES_PER_POINT; i++) {
+            const t0 = performance.now();
+            
+            // 1. Generate
+            const grid = generateRandomGrid(size, density);
+            const { rowHints, colHints } = calculateHints(grid);
+            
+            // 2. Solve
+            const { percentSolved } = solvePuzzle(rowHints, colHints);
+            
+            const t1 = performance.now();
+            
+            totalSolved += percentSolved;
+            minSolved = Math.min(minSolved, percentSolved);
+            maxSolved = Math.max(maxSolved, percentSolved);
+            totalTime += (t1 - t0);
+        }
+
+        const avgSolved = totalSolved / SAMPLES_PER_POINT;
+        const avgTime = totalTime / SAMPLES_PER_POINT;
+
+        results.push({
+            size,
+            density,
+            avgSolved,
+            minSolved,
+            maxSolved,
+            avgTime
+        });
+
+        csvRows.push(`${size},${density},${avgSolved.toFixed(2)},${minSolved.toFixed(2)},${maxSolved.toFixed(2)},${avgTime.toFixed(2)}`);
+        
+        console.log(`Avg Solved: ${avgSolved.toFixed(1)}%`);
+    }
+}
+
+const totalDuration = (Date.now() - startTime) / 1000;
+console.log(`Simulation complete in ${totalDuration.toFixed(1)}s`);
+
+// Save results
+fs.writeFileSync(OUTPUT_FILE, JSON.stringify(results, null, 2));
+fs.writeFileSync(CSV_FILE, csvRows.join('\n'));
+
+console.log(`Results saved to ${OUTPUT_FILE} and ${CSV_FILE}`);

src/App.vue

@@ -8,6 +8,7 @@ import StatusPanel from './components/StatusPanel.vue';
 import GuidePanel from './components/GuidePanel.vue';
 import WinModal from './components/WinModal.vue';
 import CustomGameModal from './components/CustomGameModal.vue';
+import SimulationView from './components/SimulationView.vue';
 import FixedBar from './components/FixedBar.vue';
 import ReloadPrompt from './components/ReloadPrompt.vue';
 
@@ -15,6 +16,7 @@ import ReloadPrompt from './components/ReloadPrompt.vue';
 const store = usePuzzleStore();
 const { t, locale, setLocale, locales } = useI18n();
 const showCustomModal = ref(false);
+const showSimulation = ref(false);
 const showGuide = ref(false);
 const deferredPrompt = ref(null);
 const canInstall = ref(false);
@@ -173,7 +175,8 @@ onUnmounted(() => {
     <!-- Modals Teleport -->
     <Teleport to="body">
       <WinModal v-if="store.isGameWon" />
-      <CustomGameModal v-if="showCustomModal" @close="showCustomModal = false" />
+      <CustomGameModal v-if="showCustomModal" @close="showCustomModal = false" @open-simulation="showSimulation = true" />
+      <SimulationView v-if="showSimulation" @close="showSimulation = false" />
       <ReloadPrompt />
     </Teleport>
   </main>

src/components/CustomGameModal.vue

@@ -1,14 +1,202 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useI18n } from '@/composables/useI18n';
+import { calculateDifficulty } from '@/utils/puzzleUtils';
+import { HelpCircle } from 'lucide-vue-next';
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close', 'open-simulation']);
 const store = usePuzzleStore();
 const { t } = useI18n();
 
 const customSize = ref(10);
+const fillRate = ref(50);
 const errorMsg = ref('');
+const difficultyCanvas = ref(null);
+const isDragging = ref(false);
+
+const drawMap = () => {
+  const canvas = difficultyCanvas.value;
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width;
+  const height = canvas.height;
+
+  // Clear
+  ctx.clearRect(0, 0, width, height);
+
+  // Draw Gradient Background
+  // Optimization: Create an image data once if static, but here it's small enough.
+  const imgData = ctx.createImageData(width, height);
+  const data = imgData.data;
+
+  // Ranges:
+  // X: Fill Rate 10% -> 90%
+  // Y: Size 5 -> 80
+  
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      // Map x, y to fillRate, size
+      // y=0 -> size 80 (top), y=height -> size 5 (bottom)
+      // x=0 -> fill 10%, x=width -> fill 90%
+      
+      const normalizedX = x / width;
+      const normalizedY = 1 - (y / height); // 0 at bottom, 1 at top
+      
+      const fRate = 0.1 + normalizedX * 0.8; // 0.1 to 0.9
+      const sSize = 5 + normalizedY * 75;    // 5 to 80
+      
+      const { value } = calculateDifficulty(fRate, sSize);
+      
+      // Color Mapping:
+      // Green (0%) -> Yellow (50%) -> Red (100%)
+      // Hue: 120 -> 0
+      const hue = 120 * (1 - value / 100);
+      
+      // Convert HSL to RGB (Simplified)
+      // Saturation 100%, Lightness 50%
+      const [r, g, b] = hslToRgb(hue / 360, 1, 0.5);
+      
+      const index = (y * width + x) * 4;
+      data[index] = r;
+      data[index + 1] = g;
+      data[index + 2] = b;
+      data[index + 3] = 255; // Alpha
+    }
+  }
+  ctx.putImageData(imgData, 0, 0);
+
+  // Draw current position
+  // Map current fillRate/size to x,y
+  // Fill: 10..90. Size: 5..80.
+  const currentFill = Math.max(10, Math.min(90, fillRate.value));
+  const currentSize = Math.max(5, Math.min(80, customSize.value));
+  
+  const posX = ((currentFill - 10) / 80) * width;
+  const posY = (1 - (currentSize - 5) / 75) * height;
+
+  // Draw Crosshair/Circle
+  ctx.beginPath();
+  ctx.arc(posX, posY, 6, 0, Math.PI * 2);
+  ctx.fillStyle = '#fff';
+  ctx.fill();
+  ctx.lineWidth = 2;
+  ctx.strokeStyle = '#000';
+  ctx.stroke();
+};
+
+const hslToRgb = (h, s, l) => {
+    let r, g, b;
+    if (s === 0) {
+        r = g = b = l; // achromatic
+    } else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
+            if (t < 1 / 2) return q;
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+};
+
+const updateFromEvent = (e) => {
+    const canvas = difficultyCanvas.value;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    
+    // Handle Touch or Mouse
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+    
+    let x = clientX - rect.left;
+    let y = clientY - rect.top;
+    
+    // Clamp
+    x = Math.max(0, Math.min(rect.width, x));
+    y = Math.max(0, Math.min(rect.height, y));
+    
+    // Reverse Map
+    // x / width -> fillRate (10..90)
+    // 1 - y / height -> size (5..80)
+    
+    const normalizedX = x / rect.width;
+    const normalizedY = 1 - (y / rect.height);
+    
+    const newFill = 10 + normalizedX * 80;
+    const newSize = 5 + normalizedY * 75;
+    
+    fillRate.value = Math.round(newFill);
+    customSize.value = Math.round(newSize);
+};
+
+const startDrag = (e) => {
+    isDragging.value = true;
+    updateFromEvent(e);
+    // Add global listeners for mouse to handle dragging outside canvas
+    window.addEventListener('mousemove', onDrag);
+    window.addEventListener('mouseup', stopDrag);
+};
+
+const onDrag = (e) => {
+    if (!isDragging.value) return;
+    updateFromEvent(e);
+};
+
+const stopDrag = () => {
+    isDragging.value = false;
+    window.removeEventListener('mousemove', onDrag);
+    window.removeEventListener('mouseup', stopDrag);
+};
+
+onUnmounted(() => {
+    window.removeEventListener('mousemove', onDrag);
+    window.removeEventListener('mouseup', stopDrag);
+});
+
+const showAdvanced = ref(false);
+
+const toggleAdvanced = () => {
+    showAdvanced.value = !showAdvanced.value;
+    if (showAdvanced.value) {
+        nextTick(drawMap);
+    }
+};
+
+onMounted(() => {
+  const savedSize = localStorage.getItem('nonograms_custom_size');
+  if (savedSize && !isNaN(savedSize)) {
+    customSize.value = Math.max(5, Math.min(80, Number(savedSize)));
+  }
+  
+  const savedFillRate = localStorage.getItem('nonograms_custom_fill_rate');
+  if (savedFillRate && !isNaN(savedFillRate)) {
+    fillRate.value = Math.max(10, Math.min(90, Number(savedFillRate)));
+  }
+  
+  // Don't draw map initially if hidden
+});
+
+watch([customSize, fillRate], () => {
+    if (showAdvanced.value) {
+        drawMap();
+    }
+});
+
+watch(customSize, (newVal) => {
+  localStorage.setItem('nonograms_custom_size', newVal);
+});
+
+watch(fillRate, (newVal) => {
+  localStorage.setItem('nonograms_custom_fill_rate', newVal);
+});
 
 const snapToStep = (value, step) => {
   const rounded = Math.round(value / step) * step;
@@ -19,6 +207,20 @@ const handleSnap = () => {
   customSize.value = snapToStep(Number(customSize.value), 5);
 };
 
+const difficultyInfo = computed(() => {
+  return calculateDifficulty(fillRate.value / 100, customSize.value);
+});
+
+const difficultyColor = computed(() => {
+  switch(difficultyInfo.value.level) {
+    case 'extreme': return '#ff3333';
+    case 'hardest': return '#ff9933';
+    case 'harder': return '#ffff33';
+    case 'easy': return '#33ff33';
+    default: return '#33ff33';
+  }
+});
+
 const confirm = () => {
   const size = parseInt(customSize.value);
   if (isNaN(size) || size < 5 || size > 80) {
@@ -26,7 +228,7 @@ const confirm = () => {
     return;
   }
   
-  store.initCustomGame(size);
+  store.initCustomGame(size, fillRate.value / 100);
   emit('close');
 };
 </script>
@@ -35,22 +237,77 @@ const confirm = () => {
   <div class="modal-overlay" @click.self="emit('close')">
     <div class="modal glass-panel">
       <h2>{{ t('custom.title') }}</h2>
-      <p>{{ t('custom.prompt') }}</p>
       
-      <div class="input-group">
-        <div class="range-value">{{ customSize }}</div>
-        <input 
-          type="range" 
-          v-model="customSize" 
-          min="5" 
-          max="80"
-          step="1"
-          @change="handleSnap"
-        />
-        <div class="range-scale">
-          <span>5</span>
-          <span>80</span>
+      <div class="modal-content">
+        <div class="sliders-section">
+          <div class="slider-container">
+            <p>{{ t('custom.prompt') }}</p>
+            <div class="input-group">
+              <div class="range-value">{{ customSize }}</div>
+              <input 
+                type="range" 
+                v-model="customSize" 
+                min="5" 
+                max="80"
+                step="1"
+                @change="handleSnap"
+              />
+              <div class="range-scale">
+                <span>5</span>
+                <span>80</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="slider-container">
+            <p>{{ t('custom.fillRate') }}</p>
+            <div class="input-group">
+              <div class="range-value">{{ fillRate }}%</div>
+              <input 
+                type="range" 
+                v-model="fillRate" 
+                min="10" 
+                max="90"
+                step="1"
+              />
+              <div class="range-scale">
+                <span>10%</span>
+                <span>90%</span>
+              </div>
+            </div>
+          </div>
         </div>
+
+        <div class="map-section" v-if="showAdvanced">
+            <canvas 
+                ref="difficultyCanvas" 
+                width="400" 
+                height="400"
+                @mousedown="startDrag"
+                @touchstart.prevent="startDrag"
+                @touchmove.prevent="onDrag"
+                @touchend="stopDrag"
+            ></canvas>
+        </div>
+      </div>
+
+      <div class="difficulty-indicator">
+        <div class="label-row">
+            <div class="label">{{ t('custom.difficulty') }}</div>
+            <button class="help-btn" @click="emit('open-simulation')" :title="t('custom.simulationHelp') || 'How is this calculated?'">
+                <HelpCircle class="icon-sm" />
+            </button>
+        </div>
+        <div class="difficulty-row">
+            <div class="level" :style="{ color: difficultyColor }">{{ t(`difficulty.${difficultyInfo.level}`) }}</div>
+            <div class="percentage" :style="{ color: difficultyColor }">({{ difficultyInfo.value }}%)</div>
+        </div>
+      </div>
+
+      <div class="advanced-toggle">
+          <button class="btn-text" @click="toggleAdvanced">
+              {{ showAdvanced ? 'Ukryj mapę trudności' : 'Pokaż mapę trudności' }}
+          </button>
       </div>
       
       <p v-if="errorMsg" class="error">{{ errorMsg }}</p>
@@ -82,11 +339,60 @@ const confirm = () => {
 .modal {
   padding: 40px;
   text-align: center;
-  max-width: 400px;
+  max-width: 800px;
   width: 90%;
   border: 1px solid var(--accent-cyan);
   box-shadow: 0 0 50px rgba(0, 242, 255, 0.2);
   animation: slideUp 0.3s ease;
+  transition: all 0.3s ease-in-out;
+}
+
+.modal-content {
+    display: flex;
+    flex-direction: row;
+    gap: 40px;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+@media (max-width: 700px) {
+    .modal-content {
+        flex-direction: column;
+        gap: 20px;
+    }
+}
+
+.sliders-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.map-section {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+canvas {
+    width: 400px;
+    height: 400px;
+    border: 2px solid var(--panel-border);
+    border-radius: 8px;
+    box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
+    cursor: crosshair;
+    background: #000;
+}
+
+@media (max-width: 600px) {
+    canvas {
+        width: 100%;
+        height: auto;
+        aspect-ratio: 1;
+    }
 }
 
 h2 {
@@ -102,6 +408,11 @@ p {
   margin-bottom: 20px;
 }
 
+.slider-container {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
 .input-group {
     margin-bottom: 20px;
     display: flex;
@@ -161,11 +472,107 @@ input[type="range"]::-moz-range-thumb {
     font-size: 0.85rem;
 }
 
+.difficulty-indicator {
+    margin: 20px 0 40px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+}
+
+.label-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.help-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    padding: 4px;
+    border-radius: 50%;
+    transition: color 0.3s, background 0.3s;
+}
+
+.help-btn:hover {
+    color: var(--accent-cyan);
+    background: rgba(0, 242, 255, 0.1);
+}
+
+.icon-sm {
+    width: 16px;
+    height: 16px;
+}
+
+.difficulty-row {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: baseline;
+    justify-content: center;
+    white-space: nowrap;
+    flex-wrap: nowrap;
+}
+
+.label {
+    font-size: 1rem;
+    color: var(--text-muted);
+}
+
+.level {
+    font-size: 1.4rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    line-height: 1.2;
+}
+
+.percentage {
+    font-size: 1rem;
+    font-weight: bold;
+}
+
+.difficulty-indicator .label {
+    color: var(--text-color);
+}
+
+.difficulty-indicator .value {
+    font-weight: bold;
+    text-transform: uppercase;
+    text-shadow: 0 0 10px currentColor;
+    transition: color 0.3s ease;
+    display: inline-block;
+    min-width: 120px; /* Reserve space for longest text */
+    text-align: left;
+}
+
 .error {
     color: #ff4d4d;
     font-size: 0.9rem;
 }
 
+.btn-text {
+    background: none;
+    border: none;
+    color: var(--accent-cyan);
+    font-size: 0.9rem;
+    cursor: pointer;
+    text-decoration: underline;
+    opacity: 0.8;
+    transition: opacity 0.3s;
+}
+
+.btn-text:hover {
+    opacity: 1;
+}
+
+.advanced-toggle {
+    margin-bottom: 10px;
+}
+
 .actions {
   display: flex;
   gap: 15px;

src/components/SimulationView.vue

@@ -0,0 +1,310 @@
+
+<script setup>
+import { ref, computed } from 'vue';
+import { generateRandomGrid, calculateHints } from '@/utils/puzzleUtils';
+import { solvePuzzle } from '@/utils/solver';
+import { X, Play, Square, RotateCcw } from 'lucide-vue-next';
+
+const emit = defineEmits(['close']);
+
+const SIZES = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50]; 
+const DENSITIES = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
+const SAMPLES_PER_POINT = 10; // Reduced for web performance demo
+
+const isRunning = ref(false);
+const progress = ref(0);
+const currentStatus = ref('Ready');
+const results = ref([]);
+const simulationSpeed = ref(1); // 1 = Normal, 2 = Fast (less render updates)
+
+let stopRequested = false;
+
+const startSimulation = async () => {
+    if (isRunning.value) return;
+    isRunning.value = true;
+    stopRequested = false;
+    results.value = [];
+    progress.value = 0;
+
+    const totalSteps = SIZES.length * DENSITIES.length;
+    let stepCount = 0;
+
+    for (const size of SIZES) {
+        for (const density of DENSITIES) {
+            if (stopRequested) {
+                currentStatus.value = 'Stopped';
+                isRunning.value = false;
+                return;
+            }
+
+            currentStatus.value = `Simulating ${size}x${size} @ ${(density * 100).toFixed(0)}%`;
+            
+            let totalSolved = 0;
+            
+            // Run samples
+            for (let i = 0; i < SAMPLES_PER_POINT; i++) {
+                const grid = generateRandomGrid(size, density);
+                const { rowHints, colHints } = calculateHints(grid);
+                const { percentSolved } = solvePuzzle(rowHints, colHints);
+                totalSolved += percentSolved;
+                
+                // Yield to UI every few samples to keep it responsive
+                if (i % 2 === 0) await new Promise(r => setTimeout(r, 0));
+            }
+
+            const avgSolved = totalSolved / SAMPLES_PER_POINT;
+            
+            results.value.unshift({
+                size,
+                density,
+                avgSolved: avgSolved.toFixed(1)
+            });
+
+            stepCount++;
+            progress.value = (stepCount / totalSteps) * 100;
+        }
+    }
+
+    isRunning.value = false;
+    currentStatus.value = 'Completed';
+};
+
+const stopSimulation = () => {
+    stopRequested = true;
+};
+
+const getRowColor = (solved) => {
+    if (solved >= 90) return 'color-easy';
+    if (solved >= 60) return 'color-harder';
+    if (solved >= 30) return 'color-hardest';
+    return 'color-extreme';
+};
+
+</script>
+
+<template>
+  <div class="modal-overlay" @click.self="emit('close')">
+    <div class="modal glass-panel">
+      <div class="header">
+        <h2>Difficulty Simulation</h2>
+        <button class="close-btn" @click="emit('close')">
+            <X />
+        </button>
+      </div>
+      
+      <div class="content">
+        <div class="controls">
+            <div class="status-bar">
+                <div class="status-text">{{ currentStatus }}</div>
+                <div class="progress-track">
+                    <div class="progress-fill" :style="{ width: progress + '%' }"></div>
+                </div>
+            </div>
+            
+            <div class="actions">
+                <button v-if="!isRunning" class="btn-neon" @click="startSimulation">
+                    <Play class="icon" /> Start Simulation
+                </button>
+                <button v-else class="btn-neon secondary" @click="stopSimulation">
+                    <Square class="icon" /> Stop
+                </button>
+            </div>
+        </div>
+
+        <div class="results-container">
+            <table class="results-table">
+                <thead>
+                    <tr>
+                        <th>Size</th>
+                        <th>Density</th>
+                        <th>Solved (Logic)</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(row, idx) in results" :key="idx" :class="getRowColor(row.avgSolved)">
+                        <td>{{ row.size }}x{{ row.size }}</td>
+                        <td>{{ (row.density * 100).toFixed(0) }}%</td>
+                        <td>{{ row.avgSolved }}%</td>
+                    </tr>
+                </tbody>
+            </table>
+            <div v-if="results.length === 0" class="empty-state">
+                Press Start to run Monte Carlo simulation
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--modal-overlay);
+  backdrop-filter: blur(5px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 3000;
+  animation: fadeIn 0.3s ease;
+}
+
+.modal {
+  padding: 30px;
+  width: 90%;
+  max-width: 600px;
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--accent-cyan);
+  box-shadow: 0 0 50px rgba(0, 242, 255, 0.2);
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+h2 {
+    color: var(--accent-cyan);
+    margin: 0;
+    font-size: 1.5rem;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 5px;
+}
+
+.close-btn:hover {
+    color: var(--text-color);
+}
+
+.content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    overflow: hidden;
+}
+
+.controls {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid var(--panel-border);
+}
+
+.status-bar {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.status-text {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+}
+
+.progress-track {
+    width: 100%;
+    height: 4px;
+    background: var(--panel-bg-strong);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: var(--accent-cyan);
+    transition: width 0.3s ease;
+}
+
+.actions {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.btn-neon {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    font-size: 0.9rem;
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+}
+
+.results-container {
+    flex: 1;
+    overflow-y: auto;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    padding: 10px;
+}
+
+.results-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;
+}
+
+.results-table th {
+    text-align: left;
+    padding: 8px;
+    color: var(--text-muted);
+    border-bottom: 1px solid var(--panel-border);
+    position: sticky;
+    top: 0;
+    background: var(--panel-bg);
+}
+
+.results-table td {
+    padding: 8px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.color-easy { color: #33ff33; }
+.color-harder { color: #ffff33; }
+.color-hardest { color: #ff9933; }
+.color-extreme { color: #ff3333; }
+
+.empty-state {
+    padding: 40px;
+    text-align: center;
+    color: var(--text-muted);
+    font-style: italic;
+}
+
+/* Scrollbar styling */
+.results-container::-webkit-scrollbar {
+  width: 8px;
+}
+
+.results-container::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.results-container::-webkit-scrollbar-thumb {
+  background: var(--panel-border);
+  border-radius: 4px;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+</style>

src/components/WinModal.vue

@@ -4,9 +4,8 @@ import { Fireworks } from 'fireworks-js';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useI18n } from '@/composables/useI18n';
 import { useTimer } from '@/composables/useTimer';
-import xIcon from '@/assets/brands/x.svg';
-import facebookIcon from '@/assets/brands/facebook.svg';
-import whatsappIcon from '@/assets/brands/whatsapp.svg';
+import { Download, FileCode } from 'lucide-vue-next';
+import { calculateDifficulty } from '@/utils/puzzleUtils';
 
 const store = usePuzzleStore();
 const { t } = useI18n();
@@ -42,30 +41,43 @@ const playFanfare = async () => {
     }
   }
   masterGain = audioContext.createGain();
-  masterGain.gain.value = 0.18;
+  masterGain.gain.value = 0.25; // Slightly louder but softer tone
   masterGain.connect(audioContext.destination);
-  const notes = [
-    { time: 0.0, dur: 0.18, freqs: [523.25, 659.25, 783.99] },
-    { time: 0.2, dur: 0.18, freqs: [587.33, 740.0, 880.0] },
-    { time: 0.4, dur: 0.22, freqs: [659.25, 830.61, 987.77] },
-    { time: 0.7, dur: 0.35, freqs: [698.46, 880.0, 1046.5] }
-  ];
+
   const now = audioContext.currentTime;
-  notes.forEach(({ time, dur, freqs }) => {
-    freqs.forEach((freq) => {
-      const osc = audioContext.createOscillator();
-      const gain = audioContext.createGain();
-      osc.type = 'triangle';
-      osc.frequency.value = freq;
-      gain.gain.setValueAtTime(0.0001, now + time);
-      gain.gain.linearRampToValueAtTime(0.8, now + time + 0.02);
-      gain.gain.exponentialRampToValueAtTime(0.0001, now + time + dur);
-      osc.connect(gain);
-      gain.connect(masterGain);
-      osc.start(now + time);
-      osc.stop(now + time + dur + 0.05);
-    });
-  });
+
+  const playNote = (freq, startTime, duration) => {
+    const osc = audioContext.createOscillator();
+    const gain = audioContext.createGain();
+    
+    // Mix of sine and triangle for a bell-like quality
+    osc.type = 'sine'; 
+    osc.frequency.value = freq;
+
+    // Envelope for elegant bell/chime sound
+    gain.gain.setValueAtTime(0, startTime);
+    gain.gain.linearRampToValueAtTime(0.4, startTime + 0.05); // Soft attack
+    gain.gain.exponentialRampToValueAtTime(0.01, startTime + duration); // Long release
+
+    osc.connect(gain);
+    gain.connect(masterGain);
+
+    osc.start(startTime);
+    osc.stop(startTime + duration + 0.1);
+  };
+
+  // C Major 7 Arpeggio sequence (C5, E5, G5, B5, C6) - Elegant & Uplifting
+  const sequence = [
+    { freq: 523.25, time: 0.0, dur: 0.8 }, // C5
+    { freq: 659.25, time: 0.1, dur: 0.8 }, // E5
+    { freq: 783.99, time: 0.2, dur: 0.8 }, // G5
+    { freq: 987.77, time: 0.3, dur: 0.8 }, // B5 (Maj7)
+    { freq: 1046.50, time: 0.4, dur: 2.0 }, // C6 (High C resolve)
+    // Add a bass root note at the end for fullness
+    { freq: 523.25, time: 0.4, dur: 2.0 }  // C5
+  ];
+
+  sequence.forEach(note => playNote(note.freq, now + note.time, note.dur));
 };
 
 const triggerVibration = () => {
@@ -88,8 +100,9 @@ const buildShareCanvas = () => {
   const padding = 28;
   const headerHeight = 64;
   const footerHeight = 28;
+  const infoHeight = 40; // New space for difficulty/guide info
   const width = boardSize + padding * 2;
-  const height = boardSize + padding * 2 + headerHeight + footerHeight;
+  const height = boardSize + padding * 2 + headerHeight + footerHeight + infoHeight;
   const scale = window.devicePixelRatio || 1;
   const canvas = document.createElement('canvas');
   canvas.width = width * scale;
@@ -109,6 +122,24 @@ const buildShareCanvas = () => {
   ctx.fillText(t('app.title'), padding, padding + 10);
   ctx.font = '600 16px "Segoe UI", sans-serif';
   ctx.fillText(`${t('win.time')} ${formattedTime.value}`, padding, padding + 34);
+  
+  // Difficulty & Density Info
+  const densityPercent = Math.round(store.currentDensity * 100);
+  const difficultyKey = calculateDifficulty(store.currentDensity);
+  let diffColor = '#33ff33';
+  if (difficultyKey === 'extreme') diffColor = '#ff3333';
+  else if (difficultyKey === 'hardest') diffColor = '#ff9933';
+  else if (difficultyKey === 'harder') diffColor = '#ffff33';
+  
+  const difficultyText = t(`difficulty.${difficultyKey}`);
+  ctx.font = '600 14px "Segoe UI", sans-serif';
+  
+  // Right aligned difficulty info
+  const diffLabel = `${t('win.difficulty')} ${difficultyText} (${densityPercent}%)`;
+  const diffWidth = ctx.measureText(diffLabel).width;
+  ctx.fillStyle = diffColor;
+  ctx.fillText(diffLabel, width - padding - diffWidth, padding + 34);
+
   const gridX = padding;
   const gridY = padding + headerHeight;
   ctx.fillStyle = 'rgba(255, 255, 255, 0.06)';
@@ -152,12 +183,144 @@ const buildShareCanvas = () => {
       }
     }
   }
+
+  // Guide Usage Info (Dirty Flag)
+  if (store.guideUsageCount > 0) {
+      ctx.fillStyle = '#ff4d4d';
+      ctx.font = '600 14px "Segoe UI", sans-serif';
+      
+      const totalCells = store.size * store.size;
+      const percent = Math.min(100, Math.round((store.guideUsageCount / totalCells) * 100));
+      const guideText = t('win.usedGuide', { count: store.guideUsageCount, percent });
+      
+      ctx.fillText(`⚠️ ${guideText}`, padding, height - padding - footerHeight + 10);
+  }
+
   ctx.fillStyle = 'rgba(255, 255, 255, 0.75)';
   ctx.font = '500 14px "Segoe UI", sans-serif';
   ctx.fillText(appUrl, padding, height - padding + 6);
   return canvas;
 };
 
+const buildShareSVG = () => {
+  const grid = store.playerGrid;
+  if (!grid || !grid.length) return null;
+  
+  const appUrl = 'https://nonograms.7u.pl/';
+  const size = store.size;
+  const maxBoard = 640;
+  const cellSize = Math.max(8, Math.floor(maxBoard / size));
+  const boardSize = cellSize * size;
+  const padding = 28;
+  const headerHeight = 64;
+  const footerHeight = 28;
+  const infoHeight = 40;
+  const width = boardSize + padding * 2;
+  const height = boardSize + padding * 2 + headerHeight + footerHeight + infoHeight;
+
+  // Colors
+  const bgGradientStart = '#1b2a4a';
+  const bgGradientEnd = '#0a1324';
+  const overlayColor = 'rgba(0, 0, 0, 0.35)';
+  const textColor = '#e8fbff';
+  const gridColor = 'rgba(255, 255, 255, 0.06)';
+  const gridLineColor = 'rgba(255, 255, 255, 0.12)';
+  const filledColor = '#00f2fe';
+  const crossColor = 'rgba(255, 255, 255, 0.5)';
+  const urlColor = 'rgba(255, 255, 255, 0.75)';
+
+  // Difficulty Logic
+  const densityPercent = Math.round(store.currentDensity * 100);
+  const diffInfo = calculateDifficulty(store.currentDensity, store.size);
+  const difficultyKey = diffInfo.level;
+  let diffColor = '#33ff33';
+  if (difficultyKey === 'extreme') diffColor = '#ff3333';
+  else if (difficultyKey === 'hardest') diffColor = '#ff9933';
+  else if (difficultyKey === 'harder') diffColor = '#ffff33';
+  const difficultyText = t(`difficulty.${difficultyKey}`);
+  const diffLabel = `${t('win.difficulty')} ${difficultyText} (${densityPercent}%)`;
+
+  let svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">`;
+  
+  // Background
+  svgContent += `
+    <defs>
+      <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="${bgGradientStart}"/>
+        <stop offset="100%" stop-color="${bgGradientEnd}"/>
+      </linearGradient>
+    </defs>
+    <rect width="100%" height="100%" fill="url(#bg)"/>
+    <rect x="12" y="12" width="${width - 24}" height="${height - 24}" fill="${overlayColor}"/>
+  `;
+
+  // Text: Title & Time
+  svgContent += `
+    <text x="${padding}" y="${padding + 28}" font-family="Segoe UI, sans-serif" font-weight="700" font-size="26" fill="${textColor}">${t('app.title')}</text>
+    <text x="${padding}" y="${padding + 56}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="16" fill="${textColor}">${t('win.time')} ${formattedTime.value}</text>
+  `;
+
+  // Text: Difficulty (Right Aligned - manual approx or end anchor)
+  svgContent += `
+    <text x="${width - padding}" y="${padding + 56}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="14" fill="${diffColor}" text-anchor="end">${diffLabel}</text>
+  `;
+
+  const gridX = padding;
+  const gridY = padding + headerHeight;
+
+  // Grid Background
+  svgContent += `<rect x="${gridX}" y="${gridY}" width="${boardSize}" height="${boardSize}" fill="${gridColor}"/>`;
+
+  // Grid Lines
+  let gridLines = '';
+  for (let i = 0; i <= size; i++) {
+    const pos = i * cellSize;
+    // Vertical
+    gridLines += `<line x1="${gridX + pos}" y1="${gridY}" x2="${gridX + pos}" y2="${gridY + boardSize}" stroke="${gridLineColor}" stroke-width="1"/>`;
+    // Horizontal
+    gridLines += `<line x1="${gridX}" y1="${gridY + pos}" x2="${gridX + boardSize}" y2="${gridY + pos}" stroke="${gridLineColor}" stroke-width="1"/>`;
+  }
+  svgContent += gridLines;
+
+  // Cells
+  let cells = '';
+  const lineWidth = Math.max(1.5, Math.floor(cellSize * 0.12));
+  
+  for (let r = 0; r < size; r++) {
+    for (let c = 0; c < size; c++) {
+      const state = grid[r]?.[c];
+      const cx = gridX + c * cellSize;
+      const cy = gridY + r * cellSize;
+      
+      if (state === 1) { // Filled
+        cells += `<rect x="${cx + 1}" y="${cy + 1}" width="${cellSize - 2}" height="${cellSize - 2}" fill="${filledColor}"/>`;
+      } else if (state === 2) { // Cross
+        const d = cellSize * 0.6;
+        const off = cellSize * 0.2;
+        cells += `
+          <path d="M${cx + off} ${cy + off} L${cx + off + d} ${cy + off + d} M${cx + off + d} ${cy + off} L${cx + off} ${cy + off + d}" 
+          stroke="${crossColor}" stroke-width="${lineWidth}" stroke-linecap="round"/>
+        `;
+      }
+    }
+  }
+  svgContent += cells;
+
+  // Guide Usage
+  if (store.guideUsageCount > 0) {
+      const totalCells = store.size * store.size;
+      const percent = Math.min(100, Math.round((store.guideUsageCount / totalCells) * 100));
+      const guideText = t('win.usedGuide', { count: store.guideUsageCount, percent });
+      svgContent += `<text x="${padding}" y="${height - padding - footerHeight + 10}" font-family="Segoe UI, sans-serif" font-weight="600" font-size="14" fill="#ff4d4d">⚠️ ${guideText}</text>`;
+  }
+
+  // URL
+  svgContent += `<text x="${padding}" y="${height - padding + 6}" font-family="Segoe UI, sans-serif" font-weight="500" font-size="14" fill="${urlColor}">${appUrl}</text>`;
+
+  svgContent += '</svg>';
+  return svgContent;
+};
+
 const canvasToBlob = (canvas) => new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), 'image/png'));
 
 const createShareBlob = async () => {
@@ -166,6 +329,20 @@ const createShareBlob = async () => {
   return canvasToBlob(canvas);
 };
 
+const downloadShareSVG = () => {
+  const svgString = buildShareSVG();
+  if (!svgString) return;
+  const blob = new Blob([svgString], { type: 'image/svg+xml' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `nonogram-${store.size}x${store.size}.svg`;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  URL.revokeObjectURL(url);
+};
+
 const downloadShareImage = async () => {
   const blob = await createShareBlob();
   if (!blob) return;
@@ -183,7 +360,7 @@ const buildShareUrl = (target, text, url) => {
   const encodedText = encodeURIComponent(text);
   const encodedUrl = encodeURIComponent(url);
   if (target === 'x') {
-    return `https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`;
+    return `https://x.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`;
   }
   if (target === 'facebook') {
     return `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}&quote=${encodedText}`;
@@ -197,29 +374,48 @@ const buildShareUrl = (target, text, url) => {
 const shareTo = async (target) => {
   if (shareInProgress.value) return;
   shareInProgress.value = true;
+  
+  const text = shareText.value;
+  const url = window.location.href;
+  const shareUrl = buildShareUrl(target, text, url);
+
   try {
-    const blob = await createShareBlob();
-    if (!blob) return;
-    const file = new File([blob], `nonogram-${store.size}x${store.size}.png`, { type: 'image/png' });
-    const text = shareText.value;
-    const url = window.location.href;
-    if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
-      await navigator.share({
-        files: [file],
-        text,
-        title: t('app.title'),
-        url
-      });
-      return;
+    // Try native share first if available (supports images)
+    if (navigator.share && navigator.canShare) {
+      const blob = await createShareBlob();
+      if (blob) {
+        const file = new File([blob], `nonogram-${store.size}x${store.size}.png`, { type: 'image/png' });
+        if (navigator.canShare({ files: [file] })) {
+          await navigator.share({
+            files: [file],
+            text,
+            title: t('app.title'),
+            url
+          });
+          return;
+        }
+      }
     }
-    await downloadShareImage();
-    const shareUrl = buildShareUrl(target, text, url);
-    if (shareUrl) {
-      window.open(shareUrl, '_blank', 'noopener');
+  } catch (error) {
+    if (error.name === 'AbortError') {
+      return; // User cancelled native share, do nothing
     }
+    // Other errors -> fall through to fallback
   } finally {
     shareInProgress.value = false;
   }
+
+  // Fallback: Direct Link + Download
+  // Open window immediately if possible (though we awaited above, so it might be blocked, 
+  // but we can't do much about it if we want to try native share first).
+  // Ideally, for Desktop, navigator.share is undefined so we skip the await above.
+  
+  if (shareUrl) {
+    window.open(shareUrl, '_blank', 'noopener');
+  }
+  
+  // Trigger download as "screenshot support"
+  downloadShareImage();
 };
 
 onMounted(() => {
@@ -279,19 +475,27 @@ onUnmounted(() => {
       <div class="share">
         <div class="share-title">{{ t('win.shareTitle') }}</div>
         <div class="share-buttons">
+          <!-- X (Twitter) -->
           <button class="btn-neon secondary share-btn" :disabled="shareInProgress" :aria-label="t('win.shareX')" @click="shareTo('x')">
-            <img :src="xIcon" alt="" class="share-icon" />
+            <svg viewBox="0 0 24 24" fill="currentColor" class="share-icon"><path d="M18.901 3H22l-7.21 8.26L23 21h-6.66L11.13 14.76 5.66 21H2.56l7.73-8.83L1 3h6.8l4.63 5.56L18.9 3h.001zm-1.2 15.9h1.77L6.44 5.1H4.44l13.26 13.8z"/></svg>
           </button>
+          <!-- Facebook -->
           <button class="btn-neon secondary share-btn" :disabled="shareInProgress" :aria-label="t('win.shareFacebook')" @click="shareTo('facebook')">
-            <img :src="facebookIcon" alt="" class="share-icon" />
+            <svg viewBox="0 0 24 24" fill="currentColor" class="share-icon"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.791-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
           </button>
+          <!-- WhatsApp -->
           <button class="btn-neon secondary share-btn" :disabled="shareInProgress" :aria-label="t('win.shareWhatsapp')" @click="shareTo('whatsapp')">
-            <img :src="whatsappIcon" alt="" class="share-icon" />
+            <svg viewBox="0 0 24 24" fill="currentColor" class="share-icon"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.008-.57-.008-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
+          </button>
+          <!-- Download Screenshot (Compact) -->
+          <button class="btn-neon secondary share-btn" :disabled="shareInProgress" :aria-label="t('win.shareDownload')" @click="downloadShareImage">
+            <Download :size="20" />
+          </button>
+          <!-- Download SVG (Compact) -->
+          <button class="btn-neon secondary share-btn" :disabled="shareInProgress" aria-label="Download SVG" @click="downloadShareSVG">
+            <FileCode :size="20" />
           </button>
         </div>
-        <button class="btn-neon secondary share-download" :disabled="shareInProgress" @click="downloadShareImage">
-          {{ t('win.shareDownload') }}
-        </button>
       </div>
 
       <div class="actions">

src/composables/useI18n.js

@@ -29,6 +29,12 @@ const messages = {
     'custom.cancel': 'Anuluj',
     'custom.start': 'Start',
     'custom.sizeError': 'Rozmiar musi być między 5 a 80!',
+    'custom.fillRate': 'Wypełnienie',
+    'custom.difficulty': 'Poziom trudności',
+    'difficulty.easy': 'Łatwy',
+    'difficulty.harder': 'Trudniejszy',
+    'difficulty.hardest': 'Najtrudniejszy',
+    'difficulty.extreme': 'Ekstremalny',
     'win.title': 'GRATULACJE!',
     'win.message': 'Rozwiązałeś zagadkę!',
     'win.time': 'Czas:',
@@ -39,6 +45,8 @@ const messages = {
     'win.shareFacebook': 'Facebook',
     'win.shareWhatsapp': 'WhatsApp',
     'win.shareDownload': 'Pobierz zrzut',
+    'win.difficulty': 'Poziom:',
+    'win.usedGuide': 'Podpowiedzi: {percent}% ({count})',
     'pwa.installTitle': 'Zainstaluj aplikację i graj offline',
     'pwa.installMobile': 'Dodaj do ekranu głównego',
     'pwa.installDesktop': 'Zainstaluj na komputerze',
@@ -128,6 +136,12 @@ const messages = {
     'custom.cancel': 'Cancel',
     'custom.start': 'Start',
     'custom.sizeError': 'Size must be between 5 and 80!',
+    'custom.fillRate': 'Fill Rate',
+    'custom.difficulty': 'Difficulty',
+    'difficulty.easy': 'Easy',
+    'difficulty.harder': 'Harder',
+    'difficulty.hardest': 'Hardest',
+    'difficulty.extreme': 'Extreme',
     'win.title': 'CONGRATULATIONS!',
     'win.message': 'You solved the puzzle!',
     'win.time': 'Time:',
@@ -138,6 +152,8 @@ const messages = {
     'win.shareFacebook': 'Facebook',
     'win.shareWhatsapp': 'WhatsApp',
     'win.shareDownload': 'Download screenshot',
+    'win.difficulty': 'Difficulty:',
+    'win.usedGuide': 'Hints: {percent}% ({count})',
     'pwa.installTitle': 'Install the app and play offline',
     'pwa.installMobile': 'Add to home screen',
     'pwa.installDesktop': 'Install on desktop',
@@ -279,9 +295,17 @@ const messages = {
     'custom.cancel': '取消',
     'custom.start': '开始',
     'custom.sizeError': '尺寸必须在 5 到 80 之间！',
+    'custom.fillRate': '填充率',
+    'custom.difficulty': '难度',
+    'difficulty.easy': '简单',
+    'difficulty.harder': '较难',
+    'difficulty.hardest': '最难',
+    'difficulty.extreme': '极限',
     'win.title': '恭喜！',
     'win.message': '你解开了谜题！',
     'win.time': '时间:',
+    'win.difficulty': '难度:',
+    'win.usedGuide': '使用指南: {count}',
     'win.playAgain': '再玩一次',
     'win.shareTitle': '分享你的结果',
     'win.shareText': '我在 {time} 内解开了 {size}x{size} 的数织！',
@@ -292,6 +316,10 @@ const messages = {
     'pwa.installTitle': '安装应用并离线游玩',
     'pwa.installMobile': '添加到主屏幕',
     'pwa.installDesktop': '安装到桌面',
+    'pwa.offlineReady': '应用已准备好离线工作',
+    'pwa.newContent': '有新内容可用，点击重新加载以更新',
+    'pwa.reload': '重新加载',
+    'pwa.close': '关闭',
     'language.label': '语言选择',
     'language.pl': '波兰语',
     'language.en': '英语',
@@ -355,6 +383,10 @@ const messages = {
     'pwa.installTitle': '安裝應用並離線遊玩',
     'pwa.installMobile': '添加到主屏幕',
     'pwa.installDesktop': '安裝到桌面',
+    'pwa.offlineReady': '應用程式已準備好離線工作',
+    'pwa.newContent': '有新內容可用，點擊重新加載以更新',
+    'pwa.reload': '重新加載',
+    'pwa.close': '關閉',
     'language.label': '語言選擇',
     'language.pl': '波蘭語',
     'language.en': '英語',
@@ -418,6 +450,10 @@ const messages = {
     'pwa.installTitle': 'ऐप इंस्टॉल करें और ऑफलाइन खेलें',
     'pwa.installMobile': 'होम स्क्रीन पर जोड़ें',
     'pwa.installDesktop': 'डेस्कटॉप पर इंस्टॉल करें',
+    'pwa.offlineReady': 'ऐप ऑफ़लाइन काम करने के लिए तैयार है',
+    'pwa.newContent': 'नई सामग्री उपलब्ध है, अपडेट करने के लिए रीलोड बटन पर क्लिक करें',
+    'pwa.reload': 'रीलोड',
+    'pwa.close': 'बंद करें',
     'language.label': 'भाषा चयन',
     'language.pl': 'पोलिश',
     'language.en': 'अंग्रेज़ी',
@@ -467,9 +503,17 @@ const messages = {
     'custom.cancel': 'Cancelar',
     'custom.start': 'Empezar',
     'custom.sizeError': '¡El tamaño debe estar entre 5 y 80!',
+    'custom.fillRate': 'Relleno',
+    'custom.difficulty': 'Dificultad',
+    'difficulty.easy': 'Fácil',
+    'difficulty.harder': 'Más difícil',
+    'difficulty.hardest': 'El más difícil',
+    'difficulty.extreme': 'Extremo',
     'win.title': '¡FELICIDADES!',
     'win.message': '¡Has resuelto el rompecabezas!',
     'win.time': 'Tiempo:',
+    'win.difficulty': 'Dificultad:',
+    'win.usedGuide': 'Guía usada: {count}',
     'win.playAgain': 'Jugar de nuevo',
     'win.shareTitle': 'Comparte tu resultado',
     'win.shareText': '¡Resolví un nonograma de {size}x{size} en {time}!',
@@ -480,6 +524,10 @@ const messages = {
     'pwa.installTitle': 'Instala la app y juega sin conexión',
     'pwa.installMobile': 'Agregar a la pantalla de inicio',
     'pwa.installDesktop': 'Instalar en el escritorio',
+    'pwa.offlineReady': 'Aplicación lista para trabajar sin conexión',
+    'pwa.newContent': 'Nuevo contenido disponible, haz clic en recargar para actualizar',
+    'pwa.reload': 'Recargar',
+    'pwa.close': 'Cerrar',
     'language.label': 'Selección de idioma',
     'language.pl': 'Polaco',
     'language.en': 'Inglés',
@@ -529,9 +577,17 @@ const messages = {
     'custom.cancel': 'Annuler',
     'custom.start': 'Démarrer',
     'custom.sizeError': 'La taille doit être entre 5 et 80 !',
+    'custom.fillRate': 'Remplissage',
+    'custom.difficulty': 'Difficulté',
+    'difficulty.easy': 'Facile',
+    'difficulty.harder': 'Plus difficile',
+    'difficulty.hardest': 'Le plus difficile',
+    'difficulty.extreme': 'Extrême',
     'win.title': 'FÉLICITATIONS !',
     'win.message': 'Vous avez résolu le puzzle !',
     'win.time': 'Temps:',
+    'win.difficulty': 'Difficulté :',
+    'win.usedGuide': 'Guide utilisé : {count}',
     'win.playAgain': 'Rejouer',
     'win.shareTitle': 'Partagez votre résultat',
     'win.shareText': 'J’ai résolu un nonogramme {size}x{size} en {time} !',
@@ -542,6 +598,10 @@ const messages = {
     'pwa.installTitle': 'Installez l’app et jouez hors ligne',
     'pwa.installMobile': 'Ajouter à l’écran d’accueil',
     'pwa.installDesktop': 'Installer sur le bureau',
+    'pwa.offlineReady': 'Application prête à fonctionner hors ligne',
+    'pwa.newContent': 'Nouveau contenu disponible, cliquez sur recharger pour mettre à jour',
+    'pwa.reload': 'Recharger',
+    'pwa.close': 'Fermer',
     'language.label': 'Choix de la langue',
     'language.pl': 'Polonais',
     'language.en': 'Anglais',
@@ -591,9 +651,17 @@ const messages = {
     'custom.cancel': 'إلغاء',
     'custom.start': 'ابدأ',
     'custom.sizeError': 'يجب أن يكون الحجم بين 5 و80!',
+    'custom.fillRate': 'معدل الملء',
+    'custom.difficulty': 'الصعوبة',
+    'difficulty.easy': 'سهل',
+    'difficulty.harder': 'أصعب',
+    'difficulty.hardest': 'الأصعب',
+    'difficulty.extreme': 'أقصى',
     'win.title': 'تهانينا!',
     'win.message': 'لقد حللت اللغز!',
     'win.time': 'الوقت:',
+    'win.difficulty': 'الصعوبة:',
+    'win.usedGuide': 'تم استخدام الدليل: {count}',
     'win.playAgain': 'العب مرة أخرى',
     'win.shareTitle': 'شارك نتيجتك',
     'win.shareText': 'حللت نونوغرام {size}x{size} في {time}!',
@@ -604,6 +672,10 @@ const messages = {
     'pwa.installTitle': 'ثبّت التطبيق والعب دون اتصال',
     'pwa.installMobile': 'أضف إلى الشاشة الرئيسية',
     'pwa.installDesktop': 'التثبيت على سطح المكتب',
+    'pwa.offlineReady': 'التطبيق جاهز للعمل دون اتصال',
+    'pwa.newContent': 'محتوى جديد متوفر، انقر على زر إعادة التحميل للتحديث',
+    'pwa.reload': 'إعادة تحميل',
+    'pwa.close': 'إغلاق',
     'language.label': 'اختيار اللغة',
     'language.pl': 'البولندية',
     'language.en': 'الإنجليزية',
@@ -666,6 +738,10 @@ const messages = {
     'pwa.installTitle': 'অ্যাপটি ইনস্টল করে অফলাইনে খেলুন',
     'pwa.installMobile': 'হোম স্ক্রিনে যোগ করুন',
     'pwa.installDesktop': 'ডেস্কটপে ইনস্টল করুন',
+    'pwa.offlineReady': 'অ্যাপটি অফলাইনে কাজ করার জন্য প্রস্তুত',
+    'pwa.newContent': 'নতুন কন্টেন্ট উপলব্ধ, আপডেট করতে রিলোড বাটনে ক্লিক করুন',
+    'pwa.reload': 'রিলোড',
+    'pwa.close': 'বন্ধ করুন',
     'language.label': 'ভাষা নির্বাচন',
     'language.pl': 'পোলিশ',
     'language.en': 'ইংরেজি',
@@ -715,9 +791,17 @@ const messages = {
     'custom.cancel': 'Отмена',
     'custom.start': 'Старт',
     'custom.sizeError': 'Размер должен быть от 5 до 80!',
+    'custom.fillRate': 'Заполнение',
+    'custom.difficulty': 'Сложность',
+    'difficulty.easy': 'Легкий',
+    'difficulty.harder': 'Сложный',
+    'difficulty.hardest': 'Очень сложный',
+    'difficulty.extreme': 'Экстремальный',
     'win.title': 'ПОЗДРАВЛЯЕМ!',
     'win.message': 'Вы решили головоломку!',
     'win.time': 'Время:',
+    'win.difficulty': 'Сложность:',
+    'win.usedGuide': 'Подсказок использовано: {count}',
     'win.playAgain': 'Сыграть снова',
     'win.shareTitle': 'Поделитесь результатом',
     'win.shareText': 'Я решил(а) нонограмму {size}x{size} за {time}!',
@@ -728,6 +812,10 @@ const messages = {
     'pwa.installTitle': 'Установите приложение и играйте офлайн',
     'pwa.installMobile': 'Добавить на главный экран',
     'pwa.installDesktop': 'Установить на компьютер',
+    'pwa.offlineReady': 'Приложение готово к работе офлайн',
+    'pwa.newContent': 'Доступен новый контент, нажмите перезагрузить для обновления',
+    'pwa.reload': 'Перезагрузить',
+    'pwa.close': 'Закрыть',
     'language.label': 'Выбор языка',
     'language.pl': 'Польский',
     'language.en': 'Английский',
@@ -790,6 +878,10 @@ const messages = {
     'pwa.installTitle': 'Instale o app e jogue offline',
     'pwa.installMobile': 'Adicionar à tela inicial',
     'pwa.installDesktop': 'Instalar no desktop',
+    'pwa.offlineReady': 'App pronto para funcionar offline',
+    'pwa.newContent': 'Novo conteúdo disponível, clique em recarregar para atualizar',
+    'pwa.reload': 'Recarregar',
+    'pwa.close': 'Fechar',
     'language.label': 'Seleção de idioma',
     'language.pl': 'Polonês',
     'language.en': 'Inglês',
@@ -852,6 +944,10 @@ const messages = {
     'pwa.installTitle': 'ایپ انسٹال کریں اور آف لائن کھیلیں',
     'pwa.installMobile': 'ہوم اسکرین پر شامل کریں',
     'pwa.installDesktop': 'ڈیسک ٹاپ پر انسٹال کریں',
+    'pwa.offlineReady': 'ایپ آف لائن کام کرنے کے لیے تیار ہے',
+    'pwa.newContent': 'نیا مواد دستیاب ہے، اپ ڈیٹ کرنے کے لیے ری لوڈ بٹن پر کلک کریں',
+    'pwa.reload': 'ری لوڈ',
+    'pwa.close': 'بند کریں',
     'language.label': 'زبان کا انتخاب',
     'language.pl': 'پولش',
     'language.en': 'انگریزی',
@@ -902,9 +998,17 @@ const messages = {
     'custom.cancel': 'Abbrechen',
     'custom.start': 'Start',
     'custom.sizeError': 'Die Größe muss zwischen 5 und 80 liegen!',
+    'custom.fillRate': 'Füllrate',
+    'custom.difficulty': 'Schwierigkeit',
+    'difficulty.easy': 'Einfach',
+    'difficulty.harder': 'Schwerer',
+    'difficulty.hardest': 'Am schwersten',
+    'difficulty.extreme': 'Extrem',
     'win.title': 'HERZLICHEN GLÜCKWUNSCH!',
     'win.message': 'Sie haben das Rätsel gelöst!',
     'win.time': 'Zeit:',
+    'win.difficulty': 'Schwierigkeit:',
+    'win.usedGuide': 'Hilfe benutzt: {count}',
     'win.playAgain': 'Erneut spielen',
     'win.shareTitle': 'Teilen Sie Ihr Ergebnis',
     'win.shareText': 'Ich habe ein {size}x{size} Nonogramm in {time} gelöst!',
@@ -915,6 +1019,10 @@ const messages = {
     'pwa.installTitle': 'App installieren und offline spielen',
     'pwa.installMobile': 'Zum Startbildschirm hinzufügen',
     'pwa.installDesktop': 'Auf dem Desktop installieren',
+    'pwa.offlineReady': 'App ist bereit für den Offline-Betrieb',
+    'pwa.newContent': 'Neuer Inhalt verfügbar, klicken Sie auf Neu laden zum Aktualisieren',
+    'pwa.reload': 'Neu laden',
+    'pwa.close': 'Schließen',
     'language.label': 'Sprachauswahl',
     'language.pl': 'Polnisch',
     'language.en': 'Englisch',
@@ -977,6 +1085,10 @@ const messages = {
     'pwa.installTitle': 'Installa l’app e gioca offline',
     'pwa.installMobile': 'Aggiungi alla schermata Home',
     'pwa.installDesktop': 'Installa sul desktop',
+    'pwa.offlineReady': 'App pronta per lavorare offline',
+    'pwa.newContent': 'Nuovo contenuto disponibile, clicca su ricarica per aggiornare',
+    'pwa.reload': 'Ricarica',
+    'pwa.close': 'Chiudi',
     'language.label': 'Selezione lingua',
     'language.pl': 'Polacco',
     'language.en': 'Inglese',
@@ -1039,6 +1151,10 @@ const messages = {
     'pwa.installTitle': 'Installeer de app en speel offline',
     'pwa.installMobile': 'Toevoegen aan beginscherm',
     'pwa.installDesktop': 'Installeren op desktop',
+    'pwa.offlineReady': 'App klaar voor offline gebruik',
+    'pwa.newContent': 'Nieuwe inhoud beschikbaar, klik op herladen om bij te werken',
+    'pwa.reload': 'Herladen',
+    'pwa.close': 'Sluiten',
     'language.label': 'Taalkeuze',
     'language.pl': 'Pools',
     'language.en': 'Engels',
@@ -1101,6 +1217,10 @@ const messages = {
     'pwa.installTitle': 'Installera appen och spela offline',
     'pwa.installMobile': 'Lägg till på hemskärm',
     'pwa.installDesktop': 'Installera på skrivbordet',
+    'pwa.offlineReady': 'Appen är redo att användas offline',
+    'pwa.newContent': 'Nytt innehåll tillgängligt, klicka på ladda om för att uppdatera',
+    'pwa.reload': 'Ladda om',
+    'pwa.close': 'Stäng',
     'language.label': 'Språkval',
     'theme.label': 'Tema',
     'theme.system': 'System',
@@ -1152,6 +1272,10 @@ const messages = {
     'pwa.installTitle': 'Installer appen og spil offline',
     'pwa.installMobile': 'Føj til hjemmeskærm',
     'pwa.installDesktop': 'Installer på desktop',
+    'pwa.offlineReady': 'Appen er klar til offline brug',
+    'pwa.newContent': 'Nyt indhold tilgængeligt, klik på genindlæs for at opdatere',
+    'pwa.reload': 'Genindlæs',
+    'pwa.close': 'Luk',
     'language.label': 'Sprogvalg',
     'theme.label': 'Tema',
     'theme.system': 'System',
@@ -1203,6 +1327,10 @@ const messages = {
     'pwa.installTitle': 'Asenna sovellus ja pelaa offline-tilassa',
     'pwa.installMobile': 'Lisää aloitusnäyttöön',
     'pwa.installDesktop': 'Asenna työpöydälle',
+    'pwa.offlineReady': 'Sovellus valmis offline-käyttöön',
+    'pwa.newContent': 'Uutta sisältöä saatavilla, päivitä napsauttamalla lataa uudelleen',
+    'pwa.reload': 'Lataa uudelleen',
+    'pwa.close': 'Sulje',
     'language.label': 'Kielen valinta',
     'theme.label': 'Teema',
     'theme.system': 'Järjestelmä',
@@ -1254,6 +1382,10 @@ const messages = {
     'pwa.installTitle': 'Installer appen og spill offline',
     'pwa.installMobile': 'Legg til på hjemskjerm',
     'pwa.installDesktop': 'Installer på desktop',
+    'pwa.offlineReady': 'Appen er klar for offline bruk',
+    'pwa.newContent': 'Nytt innhold tilgjengelig, klikk på last inn på nytt for å oppdatere',
+    'pwa.reload': 'Last inn på nytt',
+    'pwa.close': 'Lukk',
     'language.label': 'Språkvalg',
     'theme.label': 'Tema',
     'theme.system': 'System',
@@ -1305,6 +1437,10 @@ const messages = {
     'pwa.installTitle': 'Nainstalujte aplikaci a hrajte offline',
     'pwa.installMobile': 'Přidat na domovskou obrazovku',
     'pwa.installDesktop': 'Nainstalovat na desktop',
+    'pwa.offlineReady': 'Aplikace připravena k použití offline',
+    'pwa.newContent': 'Nový obsah k dispozici, klikněte na obnovit pro aktualizaci',
+    'pwa.reload': 'Obnovit',
+    'pwa.close': 'Zavřít',
     'language.label': 'Výběr jazyka',
     'theme.label': 'Téma',
     'theme.system': 'Systém',
@@ -1356,6 +1492,10 @@ const messages = {
     'pwa.installTitle': 'Nainštalujte aplikáciu a hrajte offline',
     'pwa.installMobile': 'Pridať na domovskú obrazovku',
     'pwa.installDesktop': 'Nainštalovať na desktop',
+    'pwa.offlineReady': 'Aplikácia pripravená na použitie offline',
+    'pwa.newContent': 'Nový obsah k dispozícii, kliknite na obnoviť pre aktualizáciu',
+    'pwa.reload': 'Obnoviť',
+    'pwa.close': 'Zavrieť',
     'language.label': 'Voľba jazyka',
     'theme.label': 'Téma',
     'theme.system': 'Systém',
@@ -1407,6 +1547,10 @@ const messages = {
     'pwa.installTitle': 'Telepítsd az alkalmazást és játssz offline',
     'pwa.installMobile': 'Hozzáadás a kezdőképernyőhöz',
     'pwa.installDesktop': 'Telepítés az asztalra',
+    'pwa.offlineReady': 'Az alkalmazás offline használatra kész',
+    'pwa.newContent': 'Új tartalom érhető el, kattintson az újratöltés gombra a frissítéshez',
+    'pwa.reload': 'Újratöltés',
+    'pwa.close': 'Bezárás',
     'language.label': 'Nyelvválasztás',
     'theme.label': 'Téma',
     'theme.system': 'Rendszer',
@@ -1458,6 +1602,10 @@ const messages = {
     'pwa.installTitle': 'Instalează aplicația și joacă offline',
     'pwa.installMobile': 'Adaugă pe ecranul principal',
     'pwa.installDesktop': 'Instalează pe desktop',
+    'pwa.offlineReady': 'Aplicația este gata de utilizare offline',
+    'pwa.newContent': 'Conținut nou disponibil, faceți clic pe reîncărcare pentru actualizare',
+    'pwa.reload': 'Reîncărcare',
+    'pwa.close': 'Închide',
     'language.label': 'Selectare limbă',
     'theme.label': 'Temă',
     'theme.system': 'Sistem',
@@ -1509,6 +1657,10 @@ const messages = {
     'pwa.installTitle': 'Инсталирай приложението и играй офлайн',
     'pwa.installMobile': 'Добави към начален екран',
     'pwa.installDesktop': 'Инсталирай на десктоп',
+    'pwa.offlineReady': 'Приложението е готово за работа офлайн',
+    'pwa.newContent': 'Налично е ново съдържание, щракнете върху презареждане за актуализация',
+    'pwa.reload': 'Презареди',
+    'pwa.close': 'Затвори',
     'language.label': 'Избор на език',
     'theme.label': 'Тема',
     'theme.system': 'Система',
@@ -1560,6 +1712,10 @@ const messages = {
     'pwa.installTitle': 'Εγκαταστήστε την εφαρμογή και παίξτε offline',
     'pwa.installMobile': 'Προσθήκη στην αρχική οθόνη',
     'pwa.installDesktop': 'Εγκατάσταση στην επιφάνεια εργασίας',
+    'pwa.offlineReady': 'Η εφαρμογή είναι έτοιμη για χρήση εκτός σύνδεσης',
+    'pwa.newContent': 'Διαθέσιμο νέο περιεχόμενο, κάντε κλικ στην επαναφόρτωση για ενημέρωση',
+    'pwa.reload': 'Επαναφόρτωση',
+    'pwa.close': 'Κλείσιμο',
     'language.label': 'Επιλογή γλώσσας',
     'theme.label': 'Θέμα',
     'theme.system': 'Σύστημα',
@@ -1611,6 +1767,10 @@ const messages = {
     'pwa.installTitle': 'Встановіть додаток і грайте офлайн',
     'pwa.installMobile': 'Додати на головний екран',
     'pwa.installDesktop': 'Встановити на комп’ютер',
+    'pwa.offlineReady': 'Додаток готовий до роботи офлайн',
+    'pwa.newContent': 'Доступний новий вміст, натисніть перезавантажити для оновлення',
+    'pwa.reload': 'Перезавантажити',
+    'pwa.close': 'Закрити',
     'language.label': 'Вибір мови',
     'theme.label': 'Тема',
     'theme.system': 'Система',
@@ -1662,6 +1822,10 @@ const messages = {
     'pwa.installTitle': 'Усталюйце дадатак і гуляйце офлайн',
     'pwa.installMobile': 'Дадаць на галоўны экран',
     'pwa.installDesktop': 'Усталяваць на камп’ютар',
+    'pwa.offlineReady': 'Дадатак гатовы да працы афлайн',
+    'pwa.newContent': 'Даступны новы кантэнт, націсніце перазагрузіць для абнаўлення',
+    'pwa.reload': 'Перазагрузіць',
+    'pwa.close': 'Закрыць',
     'language.label': 'Выбар мовы',
     'theme.label': 'Тэма',
     'theme.system': 'Сістэма',
@@ -1713,6 +1877,10 @@ const messages = {
     'pwa.installTitle': 'Инсталирајте апликацију и играјте офлајн',
     'pwa.installMobile': 'Додај на почетни екран',
     'pwa.installDesktop': 'Инсталирај на десктоп',
+    'pwa.offlineReady': 'Апликација спремна за рад ван мреже',
+    'pwa.newContent': 'Доступан је нови садржај, кликните на поново учитај за ажурирање',
+    'pwa.reload': 'Поново учитај',
+    'pwa.close': 'Затвори',
     'language.label': 'Избор језика',
     'theme.label': 'Тема',
     'theme.system': 'Систем',
@@ -1764,6 +1932,10 @@ const messages = {
     'pwa.installTitle': 'Instalirajte aplikaciju i igrajte offline',
     'pwa.installMobile': 'Dodaj na početni zaslon',
     'pwa.installDesktop': 'Instaliraj na desktop',
+    'pwa.offlineReady': 'Aplikacija spremna za rad izvan mreže',
+    'pwa.newContent': 'Dostupan je novi sadržaj, kliknite na ponovno učitaj za ažuriranje',
+    'pwa.reload': 'Ponovno učitaj',
+    'pwa.close': 'Zatvori',
     'language.label': 'Odabir jezika',
     'theme.label': 'Tema',
     'theme.system': 'Sustav',
@@ -1815,6 +1987,10 @@ const messages = {
     'pwa.installTitle': 'Namestite aplikacijo in igrajte brez povezave',
     'pwa.installMobile': 'Dodaj na začetni zaslon',
     'pwa.installDesktop': 'Namesti na namizje',
+    'pwa.offlineReady': 'Aplikacija pripravljena na delo brez povezave',
+    'pwa.newContent': 'Na voljo je nova vsebina, kliknite ponovno naloži za posodobitev',
+    'pwa.reload': 'Ponovno naloži',
+    'pwa.close': 'Zapri',
     'language.label': 'Izbira jezika',
     'theme.label': 'Tema',
     'theme.system': 'Sistem',
@@ -1866,6 +2042,10 @@ const messages = {
     'pwa.installTitle': 'Įdiekite programą ir žaiskite neprisijungę',
     'pwa.installMobile': 'Pridėti prie pradžios ekrano',
     'pwa.installDesktop': 'Įdiegti į darbalaukį',
+    'pwa.offlineReady': 'Programa paruošta darbui neprisijungus',
+    'pwa.newContent': 'Yra naujo turinio, spustelėkite įkelti iš naujo, kad atnaujintumėte',
+    'pwa.reload': 'Įkelti iš naujo',
+    'pwa.close': 'Uždaryti',
     'language.label': 'Kalbos pasirinkimas',
     'theme.label': 'Tema',
     'theme.system': 'Sistema',
@@ -1917,6 +2097,10 @@ const messages = {
     'pwa.installTitle': 'Instalējiet lietotni un spēlējiet bezsaistē',
     'pwa.installMobile': 'Pievienot sākuma ekrānam',
     'pwa.installDesktop': 'Instalēt uz darbvirsmas',
+    'pwa.offlineReady': 'Lietotne gatava darbam bezsaistē',
+    'pwa.newContent': 'Pieejams jauns saturs, noklikšķiniet uz pārlādēt, lai atjauninātu',
+    'pwa.reload': 'Pārlādēt',
+    'pwa.close': 'Aizvērt',
     'language.label': 'Valodas izvēle',
     'theme.label': 'Tēma',
     'theme.system': 'Sistēma',
@@ -1968,6 +2152,10 @@ const messages = {
     'pwa.installTitle': 'Installi rakendus ja mängi võrguühenduseta',
     'pwa.installMobile': 'Lisa avalehele',
     'pwa.installDesktop': 'Installi töölauale',
+    'pwa.offlineReady': 'Rakendus on võrguühenduseta kasutamiseks valmis',
+    'pwa.newContent': 'Uus sisu on saadaval, värskendamiseks klõpsake uuesti laadimist',
+    'pwa.reload': 'Laadi uuesti',
+    'pwa.close': 'Sulge',
     'language.label': 'Keele valik',
     'theme.label': 'Teema',
     'theme.system': 'Süsteem',
@@ -2019,6 +2207,10 @@ const messages = {
     'pwa.installTitle': 'Suiteáil an aip agus imir as líne',
     'pwa.installMobile': 'Cuir leis an scáileán baile',
     'pwa.installDesktop': 'Suiteáil ar an deasc',
+    'pwa.offlineReady': 'Aip réidh le húsáid as líne',
+    'pwa.newContent': 'Ábhar nua ar fáil, cliceáil ar athlódáil chun nuashonrú',
+    'pwa.reload': 'Athlódáil',
+    'pwa.close': 'Dún',
     'language.label': 'Rogha teanga',
     'theme.label': 'Téama',
     'theme.system': 'Córas',
@@ -2070,6 +2262,10 @@ const messages = {
     'pwa.installTitle': 'Settu upp appið og spilaðu án nettengingar',
     'pwa.installMobile': 'Bæta við heimaskjá',
     'pwa.installDesktop': 'Setja upp á skjáborði',
+    'pwa.offlineReady': 'Forrit tilbúið til notkunar án nettengingar',
+    'pwa.newContent': 'Nýtt efni í boði, smelltu á endurhlaða til að uppfæra',
+    'pwa.reload': 'Endurhlaða',
+    'pwa.close': 'Loka',
     'language.label': 'Val á tungumáli',
     'theme.label': 'Þema',
     'theme.system': 'Kerfi',
@@ -2121,6 +2317,10 @@ const messages = {
     'pwa.installTitle': 'Installa l-app u ilgħab offline',
     'pwa.installMobile': 'Żid mal-iskrin tad-dar',
     'pwa.installDesktop': 'Installa fuq id-desktop',
+    'pwa.offlineReady': 'App lesta biex taħdem offline',
+    'pwa.newContent': 'Kontenut ġdid disponibbli, ikklikkja fuq reload biex taġġorna',
+    'pwa.reload': 'Reload',
+    'pwa.close': 'Agħlaq',
     'language.label': 'Għażla tal-lingwa',
     'theme.label': 'Tema',
     'theme.system': 'Sistema',
@@ -2172,6 +2372,10 @@ const messages = {
     'pwa.installTitle': 'Instaloni aplikacionin dhe luani offline',
     'pwa.installMobile': 'Shto në ekranin kryesor',
     'pwa.installDesktop': 'Instalo në desktop',
+    'pwa.offlineReady': 'Aplikacioni gati për punë jashtë linje',
+    'pwa.newContent': 'Përmbajtje e re e disponueshme, klikoni ringarko për të përditësuar',
+    'pwa.reload': 'Ringarko',
+    'pwa.close': 'Mbyll',
     'language.label': 'Zgjedhja e gjuhës',
     'theme.label': 'Temë',
     'theme.system': 'Sistem',
@@ -2223,6 +2427,10 @@ const messages = {
     'pwa.installTitle': 'Инсталирај ја апликацијата и играј офлајн',
     'pwa.installMobile': 'Додај на почетен екран',
     'pwa.installDesktop': 'Инсталирај на десктоп',
+    'pwa.offlineReady': 'Апликацијата е подготвена за работа офлајн',
+    'pwa.newContent': 'Достапна е нова содржина, кликнете на вчитај повторно за ажурирање',
+    'pwa.reload': 'Вчитај повторно',
+    'pwa.close': 'Затвори',
     'language.label': 'Избор на јазик',
     'theme.label': 'Тема',
     'theme.system': 'Систем',
@@ -2274,6 +2482,10 @@ const messages = {
     'pwa.installTitle': 'Instalirajte aplikaciju i igrajte offline',
     'pwa.installMobile': 'Dodaj na početni zaslon',
     'pwa.installDesktop': 'Instaliraj na desktop',
+    'pwa.offlineReady': 'Aplikacija spremna za rad van mreže',
+    'pwa.newContent': 'Dostupan je novi sadržaj, kliknite na ponovo učitaj za ažuriranje',
+    'pwa.reload': 'Ponovo učitaj',
+    'pwa.close': 'Zatvori',
     'language.label': 'Izbor jezika',
     'theme.label': 'Tema',
     'theme.system': 'Sistem',
@@ -2325,6 +2537,10 @@ const messages = {
     'pwa.installTitle': 'Uygulamayı yükle ve çevrimdışı oyna',
     'pwa.installMobile': 'Ana ekrana ekle',
     'pwa.installDesktop': 'Masaüstüne yükle',
+    'pwa.offlineReady': 'Uygulama çevrimdışı çalışmaya hazır',
+    'pwa.newContent': 'Yeni içerik mevcut, güncellemek için yeniden yükleye tıklayın',
+    'pwa.reload': 'Yeniden yükle',
+    'pwa.close': 'Kapat',
     'language.label': 'Dil seçimi',
     'theme.label': 'Tema',
     'theme.system': 'Sistem',
@@ -2376,6 +2592,10 @@ const messages = {
     'pwa.installTitle': 'Instal·la l’app i juga sense connexió',
     'pwa.installMobile': 'Afegeix a la pantalla d’inici',
     'pwa.installDesktop': 'Instal·la al desktop',
+    'pwa.offlineReady': 'Aplicació llesta per treballar fora de línia',
+    'pwa.newContent': 'Nou contingut disponible, fes clic a recarregar per actualitzar',
+    'pwa.reload': 'Recarregar',
+    'pwa.close': 'Tancar',
     'language.label': 'Selecció d’idioma',
     'theme.label': 'Tema',
     'theme.system': 'Sistema',
@@ -2427,6 +2647,10 @@ const messages = {
     'pwa.installTitle': 'Instala a app e xoga sen conexión',
     'pwa.installMobile': 'Engadir á pantalla de inicio',
     'pwa.installDesktop': 'Instalar no escritorio',
+    'pwa.offlineReady': 'Aplicación lista para traballar sen conexión',
+    'pwa.newContent': 'Novo contido dispoñible, fai clic en recargar para actualizar',
+    'pwa.reload': 'Recargar',
+    'pwa.close': 'Pechar',
     'language.label': 'Selección de idioma',
     'theme.label': 'Tema',
     'theme.system': 'Sistema',
@@ -2478,6 +2702,10 @@ const messages = {
     'pwa.installTitle': 'Gosodwch yr app a chwarae all-lein',
     'pwa.installMobile': 'Ychwanegu at y sgrin gartref',
     'pwa.installDesktop': 'Gosod ar y bwrdd gwaith',
+    'pwa.offlineReady': 'Ap yn barod i weithio all-lein',
+    'pwa.newContent': 'Cynnwys newydd ar gael, cliciwch ail-lwytho i ddiweddaru',
+    'pwa.reload': 'Ail-lwytho',
+    'pwa.close': 'Cau',
     'language.label': 'Dewis iaith',
     'theme.label': 'Thema',
     'theme.system': 'System',
@@ -2529,6 +2757,10 @@ const messages = {
     'pwa.installTitle': 'Stàlaich an aplacaid agus cluich far loidhne',
     'pwa.installMobile': 'Cuir ri sgrìn-dachaigh',
     'pwa.installDesktop': 'Stàlaich air 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': 'Taghadh cànain',
     'theme.label': 'Cuspair',
     'theme.system': 'Siostam',
@@ -2580,6 +2812,10 @@ const messages = {
     'pwa.installTitle': 'Instalatu aplikazioa eta jokatu lineaz kanpo',
     'pwa.installMobile': 'Gehitu hasierako pantailara',
     'pwa.installDesktop': 'Instalatu mahaigainean',
+    'pwa.offlineReady': 'Aplikazioa lineaz kanpo lan egiteko prest',
+    'pwa.newContent': 'Eduki berria eskuragarri, sakatu birkargatu eguneratzeko',
+    'pwa.reload': 'Birkargatu',
+    'pwa.close': 'Itxi',
     'language.label': 'Hizkuntza hautaketa',
     'theme.label': 'Gai',
     'theme.system': 'Sistema',
@@ -2631,6 +2867,10 @@ const messages = {
     'pwa.installTitle': 'アプリをインストールしてオフラインでプレイ',
     'pwa.installMobile': 'ホーム画面に追加',
     'pwa.installDesktop': 'デスクトップにインストール',
+    'pwa.offlineReady': 'アプリはオフラインで使用可能です',
+    'pwa.newContent': '新しいコンテンツが利用可能です。更新するには再読み込みをクリックしてください',
+    'pwa.reload': '再読み込み',
+    'pwa.close': '閉じる',
     'language.label': '言語選択',
     'theme.label': 'テーマ',
     'theme.system': 'システム',
@@ -2682,6 +2922,10 @@ const messages = {
     'pwa.installTitle': '앱 설치하고 오프라인 플레이',
     'pwa.installMobile': '홈 화면에 추가',
     'pwa.installDesktop': '데스크탑에 설치',
+    'pwa.offlineReady': '앱이 오프라인에서 사용할 준비가 되었습니다',
+    'pwa.newContent': '새로운 콘텐츠를 사용할 수 있습니다. 업데이트하려면 새로 고침을 클릭하세요',
+    'pwa.reload': '새로 고침',
+    'pwa.close': '닫기',
     'language.label': '언어 선택',
     'theme.label': '테마',
     'theme.system': '시스템',
@@ -2733,6 +2977,10 @@ const messages = {
     'pwa.installTitle': 'Instal aplikasi dan main offline',
     'pwa.installMobile': 'Tambahkan ke layar utama',
     'pwa.installDesktop': 'Instal di desktop',
+    'pwa.offlineReady': 'Aplikasi siap bekerja offline',
+    'pwa.newContent': 'Konten baru tersedia, klik muat ulang untuk memperbarui',
+    'pwa.reload': 'Muat ulang',
+    'pwa.close': 'Tutup',
     'language.label': 'Pilih Bahasa',
     'theme.label': 'Tema',
     'theme.system': 'Sistem',
@@ -2784,6 +3032,10 @@ const messages = {
     'pwa.installTitle': 'Cài đặt ứng dụng và chơi ngoại tuyến',
     'pwa.installMobile': 'Thêm vào màn hình chính',
     'pwa.installDesktop': 'Cài đặt trên máy tính',
+    'pwa.offlineReady': 'Ứng dụng sẵn sàng hoạt động ngoại tuyến',
+    'pwa.newContent': 'Nội dung mới có sẵn, nhấp vào tải lại để cập nhật',
+    'pwa.reload': 'Tải lại',
+    'pwa.close': 'Đóng',
     'language.label': 'Chọn ngôn ngữ',
     'theme.label': 'Giao diện',
     'theme.system': 'Hệ thống',
@@ -2835,6 +3087,10 @@ const messages = {
     'pwa.installTitle': 'ติดตั้งแอปและเล่นออฟไลน์',
     'pwa.installMobile': 'เพิ่มลงในหน้าจอหลัก',
     'pwa.installDesktop': 'ติดตั้งบนเดสก์ท็อป',
+    'pwa.offlineReady': 'แอปพร้อมใช้งานแบบออฟไลน์',
+    'pwa.newContent': 'มีเนื้อหาใหม่ คลิกที่ปุ่มโหลดซ้ำเพื่ออัปเดต',
+    'pwa.reload': 'โหลดซ้ำ',
+    'pwa.close': 'ปิด',
     'language.label': 'เลือกภาษา',
     'theme.label': 'ธีม',
     'theme.system': 'ระบบ',
@@ -2886,6 +3142,10 @@ const messages = {
     'pwa.installTitle': 'Pasang aplikasi dan main di luar talian',
     'pwa.installMobile': 'Tambah ke skrin utama',
     'pwa.installDesktop': 'Pasang pada desktop',
+    'pwa.offlineReady': 'Aplikasi sedia untuk berfungsi di luar talian',
+    'pwa.newContent': 'Kandungan baharu tersedia, klik butang muat semula untuk mengemas kini',
+    'pwa.reload': 'Muat semula',
+    'pwa.close': 'Tutup',
     'language.label': 'Pilihan Bahasa',
     'theme.label': 'Tema',
     'theme.system': 'Sistem',
@@ -2937,6 +3197,10 @@ const messages = {
     'pwa.installTitle': 'نصب برنامه و بازی آفلاین',
     'pwa.installMobile': 'افزودن به صفحه اصلی',
     'pwa.installDesktop': 'نصب روی دسکتاپ',
+    'pwa.offlineReady': 'برنامه آماده کار آفلاین است',
+    'pwa.newContent': 'محتوای جدید موجود است، برای به‌روزرسانی بارگیری مجدد را کلیک کنید',
+    'pwa.reload': 'بارگیری مجدد',
+    'pwa.close': 'بستن',
     'language.label': 'انتخاب زبان',
     'theme.label': 'تم',
     'theme.system': 'سیستم',
@@ -2988,6 +3252,10 @@ const messages = {
     'pwa.installTitle': 'התקן אפליקציה ושחק אופליין',
     'pwa.installMobile': 'הוסף למסך הבית',
     'pwa.installDesktop': 'התקן בשולחן העבודה',
+    'pwa.offlineReady': 'האפליקציה מוכנה לעבודה במצב לא מקוון',
+    'pwa.newContent': 'תוכן חדש זמין, לחץ על כפתור רענן כדי לעדכן',
+    'pwa.reload': 'רענן',
+    'pwa.close': 'סגור',
     'language.label': 'בחירת שפה',
     'theme.label': 'ערכת נושא',
     'theme.system': 'מערכת',
@@ -3039,6 +3307,10 @@ const messages = {
     'pwa.installTitle': 'Tətbiqi quraşdır və oflayn oyna',
     'pwa.installMobile': 'Ana ekrana əlavə et',
     'pwa.installDesktop': 'Masaüstünə quraşdır',
+    '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': 'Dil seçimi',
     'theme.label': 'Mövzu',
     'theme.system': 'Sistem',
@@ -3090,6 +3362,10 @@ const messages = {
     'pwa.installTitle': 'Տեղադրեք և խաղացեք օֆլայն',
     'pwa.installMobile': 'Ավելացնել էկրանին',
     'pwa.installDesktop': 'Տեղադրել համակարգչում',
+    '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': 'Լեզվի ընտրություն',
     'theme.label': 'Թեմա',
     'theme.system': 'Համակարգ',
@@ -3141,6 +3417,10 @@ const messages = {
     'pwa.installTitle': 'Ilovani o‘rnating va oflayn o‘ynang',
     'pwa.installMobile': 'Bosh ekranga qo‘shish',
     'pwa.installDesktop': 'Ish stoliga o‘rnatish',
+    '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': 'Tilni tanlash',
     'theme.label': 'Mavzu',
     'theme.system': 'Tizim',
@@ -3192,6 +3472,10 @@ const messages = {
     'pwa.installTitle': 'Qosymşany ornatyp, oflain oinañyz',
     'pwa.installMobile': 'Basty ekranğa qosu',
     'pwa.installDesktop': 'Jūmys stolyna ornatu',
+    'pwa.offlineReady': 'Қолданба офлайн жұмыс істеуге дайын',
+    'pwa.newContent': 'Жаңа мазмұн қолжетімді, жаңарту үшін қайта жүктеу түймесін басыңыз',
+    'pwa.reload': 'Қайта жүктеу',
+    'pwa.close': 'Жабу',
     'language.label': 'Til tañdau',
     'theme.label': 'Taqyryp',
     'theme.system': 'Jüye',
@@ -3243,6 +3527,10 @@ const messages = {
     'pwa.installTitle': 'એપ્લિકેશન ઇન્સ્ટોલ કરો અને ઑફલાઇન રમો',
     'pwa.installMobile': 'હોમ સ્ક્રીનમાં ઉમેરો',
     'pwa.installDesktop': 'ડેસ્કટોપ પર ઇન્સ્ટોલ કરો',
+    'pwa.offlineReady': 'એપ્લિકેશન ઑફલાઇન કામ કરવા માટે તૈયાર છે',
+    'pwa.newContent': 'નવી સામગ્રી ઉપલબ્ધ છે, અપડેટ કરવા માટે રિકોડ બટન પર ક્લિક કરો',
+    'pwa.reload': 'રીલોડ',
+    'pwa.close': 'બંધ કરો',
     'language.label': 'ભાષા પસંદગી',
     'theme.label': 'થીમ',
     'theme.system': 'સિસ્ટમ',
@@ -3294,6 +3582,10 @@ const messages = {
     'pwa.installTitle': 'ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಾಪಿಸಿ ಮತ್ತು ಆಫ್‌ಲೈನ್ ಪ್ಲೇ ಮಾಡಿ',
     'pwa.installMobile': 'ಹೋಮ್ ಸ್ಕ್ರೀನ್‌ಗೆ ಸೇರಿಸಿ',
     'pwa.installDesktop': 'ಡೆಸ್ಕ್‌ಟಾಪ್‌ನಲ್ಲಿ ಸ್ಥಾಪಿಸಿ',
+    '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': 'ಭಾಷೆ ಆಯ್ಕೆ',
     'theme.label': 'ಥೀಮ್',
     'theme.system': 'ವ್ಯವಸ್ಥೆ',
@@ -3345,6 +3637,10 @@ const messages = {
     'pwa.installTitle': 'अॅप इन्स्टॉल करा आणि ऑफलाइन खेळा',
     'pwa.installMobile': 'होम स्क्रीनवर जोडा',
     'pwa.installDesktop': 'डेस्कटॉपवर इन्स्टॉल करा',
+    'pwa.offlineReady': 'अॅप ऑफलाइन कार्य करण्यासाठी तयार आहे',
+    'pwa.newContent': 'नवीन सामग्री उपलब्ध आहे, अपडेट करण्यासाठी रीलोड बटणावर क्लिक करा',
+    'pwa.reload': 'रीलोड',
+    'pwa.close': 'बंद करा',
     'language.label': 'भाषा निवड',
     'theme.label': 'थीम',
     'theme.system': 'सिस्टम',
@@ -3396,6 +3692,10 @@ const messages = {
     'pwa.installTitle': 'ਐਪ ਇੰਸਟਾਲ ਕਰੋ ਅਤੇ ਆਫਲਾਈਨ ਖੇਡੋ',
     'pwa.installMobile': 'ਹੋਮ ਸਕ੍ਰੀਨ ਤੇ ਜੋੜੋ',
     'pwa.installDesktop': 'ਡੈਸਕਟਾਪ ਤੇ ਇੰਸਟਾਲ ਕਰੋ',
+    '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': 'ਭਾਸ਼ਾ ਚੋਣ',
     'theme.label': 'ਥੀਮ',
     'theme.system': 'ਸਿਸਟਮ',
@@ -3447,6 +3747,10 @@ const messages = {
     'pwa.installTitle': 'செயலியை நிறுவி ஆஃப்லைனில் விளையாடுங்கள்',
     'pwa.installMobile': 'முகப்புத் திரையில் சேர்',
     'pwa.installDesktop': 'டெஸ்க்டாப்பில் நிறுவு',
+    'pwa.offlineReady': 'செயலி ஆஃப்லைனில் வேலை செய்யத் தயாராக உள்ளது',
+    'pwa.newContent': 'புதிய உள்ளடக்கம் கிடைக்கிறது, புதுப்பிக்க ரீலோட் பொத்தானைக் கிளிக் செய்யவும்',
+    'pwa.reload': 'ரீலோட்',
+    'pwa.close': 'மூடு',
     'language.label': 'மொழி தேர்வு',
     'theme.label': 'தீம்',
     'theme.system': 'அமைப்பு',
@@ -3498,6 +3802,10 @@ const messages = {
     'pwa.installTitle': 'యాప్‌ను ఇన్‌స్టాల్ చేయండి మరియు ఆఫ్‌లైన్‌లో ఆడండి',
     'pwa.installMobile': 'హోమ్ స్క్రీన్‌కు జోడించు',
     'pwa.installDesktop': 'డెస్క్‌టాప్‌లో ఇన్‌స్టాల్ చేయండి',
+    'pwa.offlineReady': 'యాప్ ఆఫ్‌లైన్‌లో పని చేయడానికి సిద్ధంగా ఉంది',
+    'pwa.newContent': 'కొత్త కంటెంట్ అందుబాటులో ఉంది, అప్‌డేట్ చేయడానికి రీలోడ్ బటన్‌పై క్లిక్ చేయండి',
+    'pwa.reload': 'రీలోడ్',
+    'pwa.close': 'మూసివేయి',
     'language.label': 'భాష ఎంపిక',
     'theme.label': 'థీమ్',
     'theme.system': 'సిస్టమ్',
@@ -3549,6 +3857,10 @@ const messages = {
     'pwa.installTitle': 'एप इन्स्टल गर्नुहोस् र अफलाइन खेल्नुहोस्',
     'pwa.installMobile': 'होम स्क्रिनमा थप्नुहोस्',
     'pwa.installDesktop': 'डेस्कटपमा इन्स्टल गर्नुहोस्',
+    'pwa.offlineReady': 'एप अफलाइन काम गर्न तयार छ',
+    'pwa.newContent': 'नयाँ सामग्री उपलब्ध छ, अपडेट गर्न रिलोड बटनमा क्लिक गर्नुहोस्',
+    'pwa.reload': 'रिलोड',
+    'pwa.close': 'बन्द गर्नुहोस्',
     'language.label': 'भाषा चयन',
     'theme.label': 'थिम',
     'theme.system': 'सिस्टम',
@@ -3600,6 +3912,10 @@ const messages = {
     'pwa.installTitle': 'အက်ပ်ထည့်သွင်းပြီး အော့ဖ်လိုင်းကစားပါ',
     'pwa.installMobile': 'ပင်မစာမျက်နှာသို့ထည့်ပါ',
     'pwa.installDesktop': 'ကွန်ပျူတာတွင်ထည့်ပါ',
+    'pwa.offlineReady': 'အက်ပ်သည် အော့ဖ်လိုင်းအလုပ်လုပ်ရန် အဆင်သင့်ဖြစ်နေပါပြီ',
+    'pwa.newContent': 'အကြောင်းအရာအသစ် ရရှိနိုင်ပါသည်၊ အပ်ဒိတ်လုပ်ရန် ပြန်လည်စတင်ရန် ခလုတ်ကို နှိပ်ပါ',
+    'pwa.reload': 'ပြန်လည်စတင်သည်',
+    'pwa.close': 'ပိတ်သည်',
     'language.label': 'ဘာသာစကား',
     'theme.label': 'အပြင်အဆင်',
     'theme.system': 'စနစ်',
@@ -3651,6 +3967,10 @@ const messages = {
     'pwa.installTitle': 'ដំឡើងកម្មវិធី ហើយលេងក្រៅបណ្តាញ',
     'pwa.installMobile': 'បន្ថែមទៅអេក្រង់ដើម',
     'pwa.installDesktop': 'ដំឡើងលើកុំព្យូទ័រ',
+    'pwa.offlineReady': 'កម្មវិធីរួចរាល់សម្រាប់ការងារក្រៅបណ្តាញ',
+    'pwa.newContent': 'មានមាតិកាថ្មី សូមចុចប៊ូតុងផ្ទុកឡើងវិញដើម្បីធ្វើបច្ចុប្បន្នភាព',
+    'pwa.reload': 'ផ្ទុកឡើងវិញ',
+    'pwa.close': 'បិទ',
     'language.label': 'ជ្រើសរើសភាសា',
     'theme.label': 'ស្បែក',
     'theme.system': 'ប្រព័ន្ធ',
@@ -3702,6 +4022,10 @@ const messages = {
     'pwa.installTitle': 'ຕິດຕັ້ງແອັບ ແລະຫຼິ້ນແບບອອບໄລນ໌',
     'pwa.installMobile': 'ເພີ່ມໃສ່ໜ້າຈໍຫຼັກ',
     'pwa.installDesktop': 'ຕິດຕັ້ງໃສ່ເດັສທັອບ',
+    'pwa.offlineReady': 'ແອັບພ້ອມທີ່ຈະເຮັດວຽກແບບອອບໄລນ໌',
+    'pwa.newContent': 'ມີເນື້ອຫາໃໝ່, ຄລິກປຸ່ມໂຫຼດຄືນໃໝ່ເພື່ອອັບເດດ',
+    'pwa.reload': 'ໂຫຼດຄືນໃໝ່',
+    'pwa.close': 'ປິດ',
     'language.label': 'ເລືອກພາສາ',
     'theme.label': 'ທີມ',
     'theme.system': 'ລະບົບ',
@@ -3753,6 +4077,10 @@ const messages = {
     'pwa.installTitle': 'Апп суулгаж, офлайн тоглох',
     'pwa.installMobile': 'Нүүр дэлгэцэнд нэмэх',
     'pwa.installDesktop': 'Десктопт суулгах',
+    'pwa.offlineReady': 'Апп офлайн ажиллахад бэлэн байна',
+    'pwa.newContent': 'Шинэ контент бэлэн байна, шинэчлэхийн тулд дахин ачаалах товчийг дарна уу',
+    'pwa.reload': 'Дахин ачаалах',
+    'pwa.close': 'Хаах',
     'language.label': 'Хэл сонгох',
     'theme.label': 'Загвар',
     'theme.system': 'Систем',
@@ -3804,6 +4132,10 @@ const messages = {
     'pwa.installTitle': 'ཨབ་དབོག་འཇུག་བྱས་ནས་དྲ་མེད་རྩེ',
     'pwa.installMobile': 'གཙོ་ངོས་སུ་སྣོན',
     'pwa.installDesktop': 'གློག་ཀླད་དུ་དབོག་འཇུག',
+    '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': 'སྐད་ཡིག་འདེམས་པ',
     'theme.label': 'བརྗོད་གཞི',
     'theme.system': 'མ་ལག',
@@ -3855,6 +4187,10 @@ const messages = {
     'pwa.installTitle': 'Installeer app en speel vanlyn',
     'pwa.installMobile': 'Voeg by tuisskerm',
     'pwa.installDesktop': 'Installeer op rekenaar',
+    'pwa.offlineReady': 'Toepassing gereed om vanlyn te werk',
+    'pwa.newContent': 'Nuwe inhoud beskikbaar, klik herlaai om op te dateer',
+    'pwa.reload': 'Herlaai',
+    'pwa.close': 'Maak toe',
     'language.label': 'Kies Taal',
     'theme.label': 'Tema',
     'theme.system': 'Stelsel',
@@ -3906,6 +4242,10 @@ const messages = {
     'pwa.installTitle': 'Sakinisha programu na cheza nje ya mtandao',
     'pwa.installMobile': 'Ongeza kwenye skrini ya nyumbani',
     'pwa.installDesktop': 'Sakinisha kwenye kompyuta',
+    'pwa.offlineReady': 'Programu tayari kufanya kazi nje ya mtandao',
+    'pwa.newContent': 'Maudhui mapya yanapatikana, bofya pakia upya ili kusasisha',
+    'pwa.reload': 'Pakia upya',
+    'pwa.close': 'Funga',
     'language.label': 'Chagua Lugha',
     'theme.label': 'Mandhari',
     'theme.system': 'Mfumo',
@@ -3957,6 +4297,10 @@ const messages = {
     'pwa.installTitle': 'መተግበሪያውን ይጫኑ እና ከመስመር ውጭ ይጫወቱ',
     'pwa.installMobile': 'ወደ መነሻ ገጽ አክል',
     'pwa.installDesktop': 'በኮምፒውተር ላይ ጫን',
+    'pwa.offlineReady': 'መተግበሪያው ከመስመር ውጭ ለመስራት ዝግጁ ነው',
+    'pwa.newContent': 'አዲስ ይዘት አለ፣ ለማዘመን ድጋሚ ጫን የሚለውን ይጫኑ',
+    'pwa.reload': 'ድጋሚ ጫን',
+    'pwa.close': 'ዝጋ',
     'language.label': 'ቋንቋ ይምረጡ',
     'theme.label': 'ገጽታ',
     'theme.system': 'ስርዓት',
@@ -4008,6 +4352,10 @@ const messages = {
     'pwa.installTitle': 'Fi sori ẹrọ app ati mu ṣiṣẹ offline',
     'pwa.installMobile': 'Fi kun si iboju ile',
     'pwa.installDesktop': 'Fi sori ẹrọ lori kọmputa',
+    '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': 'Yan Èdè',
     'theme.label': 'Àwọ̀',
     'theme.system': 'Ètò',
@@ -4059,6 +4407,10 @@ const messages = {
     'pwa.installTitle': 'Wụnye ngwa ma gwuo na-anọghị n\'ịntanetị',
     'pwa.installMobile': 'Tinye na ihuenyo mbụ',
     'pwa.installDesktop': 'Wụnye na kọmputa',
+    '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': 'Họrọ Asụsụ',
     'theme.label': 'Isiokwu',
     'theme.system': 'Sistemụ',
@@ -4110,6 +4462,10 @@ const messages = {
     'pwa.installTitle': 'Ku shub abka oo ciyaar offline',
     'pwa.installMobile': 'Ku dar shaashadda guriga',
     'pwa.installDesktop': 'Ku shub kombiyuutarka',
+    'pwa.offlineReady': 'Abka wuxuu diyaar u yahay inuu shaqeeyo offline',
+    'pwa.newContent': 'Waxyaabo cusub ayaa la heli karaa, guji badhanka reload si aad u cusbooneysiiso',
+    'pwa.reload': 'Dib u sooeli',
+    'pwa.close': 'Xir',
     'language.label': 'Dooro Luqad',
     'theme.label': 'Mawduuc',
     'theme.system': 'Nidaamka',
@@ -4161,6 +4517,10 @@ const messages = {
     'pwa.installTitle': 'Shyira porogaramu ukine udafite interineti',
     'pwa.installMobile': 'Ongeraho kuri ecran y\'ibanze',
     'pwa.installDesktop': 'Shyira kuri mudasobwa',
+    'pwa.offlineReady': 'Porogaramu yiteguye gukora idafite interineti',
+    'pwa.newContent': 'Ibirimo bishya birahari, kanda kuri reload kugirango uvugurure',
+    'pwa.reload': 'Ongera utangire',
+    'pwa.close': 'Funga',
     'language.label': 'Hitamo Ururimi',
     'theme.label': 'Insanganyamatsiko',
     'theme.system': 'Sisteme',
@@ -4212,6 +4572,10 @@ const messages = {
     'pwa.installTitle': 'Shira porogaramu ukine udafite interineti',
     'pwa.installMobile': 'Ongerako kuri ecran nkuru',
     'pwa.installDesktop': 'Shirako kuri mudasobwa',
+    'pwa.offlineReady': 'Porogaramu yiteguye gukora idafite interineti',
+    'pwa.newContent': 'Ibirimo bishya birahari, kanda kuri reload kugirango uvugurure',
+    'pwa.reload': 'Subiramwo',
+    'pwa.close': 'Ugara',
     'language.label': 'Hitamo Ururimi',
     'theme.label': 'Insanganyamatsiko',
     'theme.system': 'Sisitemu',
@@ -4263,6 +4627,10 @@ const messages = {
     'pwa.installTitle': 'Sampal aplikasioŋ bi te po offline',
     'pwa.installMobile': 'Yokk ci ekranu kër',
     'pwa.installDesktop': 'Sampal ci ordinatër',
+    'pwa.offlineReady': 'Application bi pare na ngir liggéey offline',
+    'pwa.newContent': 'Am na content bu bees, bës reload ngir yeesal',
+    'pwa.reload': 'Dugal aat',
+    'pwa.close': 'Tëj',
     'language.label': 'Tann Làkk',
     'theme.label': 'Theme',
     'theme.system': 'System',
@@ -4314,6 +4682,10 @@ const messages = {
     'pwa.installTitle': 'Appii fe\'iitii offline taphadhu',
     'pwa.installMobile': 'Iskirinii manaa irratti dabali',
     'pwa.installDesktop': 'Kompyuutara irratti fe\'i',
+    'pwa.offlineReady': 'Appichi offline hojjechuuf qophiidha',
+    'pwa.newContent': 'Qabiyyee haaraan ni jira, update gochuuf reload tuqi',
+    'pwa.reload': 'Deebisii fe\'i',
+    'pwa.close': 'Cufi',
     'language.label': 'Afaan Filadhu',
     'theme.label': 'Bifa',
     'theme.system': 'Sistimii',
@@ -4365,6 +4737,10 @@ const messages = {
     'pwa.installTitle': 'ኣፕ ጽዓን እሞ ብዘይ ኢንተርኔት ተጫወት',
     'pwa.installMobile': 'ናብ ሆም ስክሪን ወስኽ',
     'pwa.installDesktop': 'ኣብ ኮምፒተር ጽዓን',
+    'pwa.offlineReady': 'ኣፕ ብዘይ ኢንተርኔት ንምስራሕ ድሉው እዩ',
+    'pwa.newContent': 'ሓድሽ ትሕዝቶ ኣሎ፡ ንምሕዳስ reload ጠውቕ',
+    'pwa.reload': 'ደጊምካ ጽዓን',
+    'pwa.close': 'ዕጸው',
     'language.label': 'ቋንቋ ምረጽ',
     'theme.label': 'ቴማ',
     'theme.system': 'ሲስተም',
@@ -4416,6 +4792,10 @@ const messages = {
     'pwa.installTitle': 'Enstale aplikasyon an epi jwe offline',
     'pwa.installMobile': 'Ajoute sou ekran akeyi',
     'pwa.installDesktop': 'Enstale sou òdinatè',
+    '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': 'Chwazi Lang',
     'theme.label': 'Tèm',
     'theme.system': 'Sistèm',
@@ -4467,6 +4847,10 @@ const messages = {
     'pwa.installTitle': 'I-install ang app ug magdula offline',
     'pwa.installMobile': 'Idugang sa home screen',
     'pwa.installDesktop': 'I-install sa 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': 'Pagpili ug Pinulongan',
     'theme.label': 'Tema',
     'theme.system': 'Sistema',
@@ -4518,6 +4902,10 @@ const messages = {
     'pwa.installTitle': 'I-install ti app ken agay-ayam offline',
     'pwa.installMobile': 'Inayon iti home screen',
     'pwa.installDesktop': 'I-install iti desktop',
+    'pwa.offlineReady': 'Nakasagana ti app nga agtrabaho offline',
+    'pwa.newContent': 'Adda baro a linaon, i-klik ti reload button tapno ma-update',
+    'pwa.reload': 'I-reload',
+    'pwa.close': 'Ikkata',
     'language.label': 'Piliem ti Pagsasao',
     'theme.label': 'Tema',
     'theme.system': 'Sistema',
@@ -4569,6 +4957,10 @@ const messages = {
     'pwa.installTitle': 'Instal aplikasi lan main offline',
     'pwa.installMobile': 'Tambahake menyang layar utama',
     'pwa.installDesktop': 'Instal ing 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': 'Pilih Basa',
     'theme.label': 'Tema',
     'theme.system': 'Sistem',
@@ -4620,6 +5012,10 @@ const messages = {
     'pwa.installTitle': 'Serlêdanê saz bike û offline bilîze',
     'pwa.installMobile': 'Li ekrana malê zêde bike',
     'pwa.installDesktop': 'Li ser sermaseyê saz bike',
+    'pwa.offlineReady': 'Bername ji bo xebata offline amade ye',
+    'pwa.newContent': 'Naveroka nû heye, ji bo nûvekirinê pêl bişkoja reload bike',
+    'pwa.reload': 'Dîsa bar bike',
+    'pwa.close': 'Bigire',
     'language.label': 'Ziman Hilbijêre',
     'theme.label': 'Mijar',
     'theme.system': 'Pergal',
@@ -4671,6 +5067,10 @@ const messages = {
     'pwa.installTitle': 'ئەپەکە دابەزێنە و بەبێ ئینتەرنێت یاری بکە',
     'pwa.installMobile': 'زیادکردن بۆ شاشەی سەرەکی',
     'pwa.installDesktop': 'دابەزاندن بۆ سەر کۆمپیوتەر',
+    'pwa.offlineReady': 'ئەپەکە ئامادەیە بۆ کارکردن بەبێ ئینتەرنێت',
+    'pwa.newContent': 'ناوەرۆکی نوێ بەردەستە، کلیک لە دوگمەی نوێکردنەوە بکە بۆ نوێکردنەوە',
+    'pwa.reload': 'نوێکردنەوە',
+    'pwa.close': 'داخستن',
     'language.label': 'هەڵبژاردنی زمان',
     'theme.label': 'بابەت',
     'theme.system': 'سیستەم',
@@ -4722,6 +5122,10 @@ const messages = {
     'pwa.installTitle': 'اپلیکیشن نصب کړئ او آفلاین لوبه وکړئ',
     'pwa.installMobile': 'کور سکرین ته اضافه کړئ',
     'pwa.installDesktop': 'په ډیسکټاپ کې نصب کړئ',
+    'pwa.offlineReady': 'ایپ آفلاین کار کولو ته چمتو دی',
+    'pwa.newContent': 'نوي مینځپانګې شتون لري ، د تازه کولو لپاره د ریلوډ تڼۍ باندې کلیک وکړئ',
+    'pwa.reload': 'بیا پورته کول',
+    'pwa.close': 'بندول',
     'language.label': 'ژبه غوره کړئ',
     'theme.label': 'تیم',
     'theme.system': 'سیستم',

src/composables/useSolver.js

@@ -78,6 +78,9 @@ export function useSolver() {
             } else if (type === 'done') {
                 isProcessing.value = false;
                 pause();
+            } else if (type === 'stuck') {
+                isProcessing.value = false;
+                pause();
             } else {
                 isProcessing.value = false;
             }

src/stores/puzzle.js

@@ -64,6 +64,9 @@ export const usePuzzleStore = defineStore('puzzle', () => {
   const playerGrid = ref([]); // 0: empty, 1: filled, 2: cross
   const isGameWon = ref(false);
   const hasUsedGuide = ref(false);
+  const guideUsageCount = ref(0);
+  const currentDifficulty = ref(null); // 'easy', 'medium', 'hard', 'custom' or object { density: 0.5 }
+  const currentDensity = ref(0);
   const size = ref(5);
   const startTime = ref(null);
   const elapsedTime = ref(0);
@@ -118,23 +121,29 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     resetGrid();
     isGameWon.value = false;
     hasUsedGuide.value = false;
+    guideUsageCount.value = 0;
+    currentDensity.value = totalCellsToFill.value / (size.value * size.value);
     elapsedTime.value = 0;
     startTimer();
+    saveState();
   }
 
-  function initCustomGame(customSize) {
+  function initCustomGame(customSize, density = 0.5) {
     stopTimer();
     currentLevelId.value = 'custom';
     size.value = customSize;
     
     // Generate random grid
-    solution.value = generateRandomGrid(customSize);
+    solution.value = generateRandomGrid(customSize, density);
     
     resetGrid();
     isGameWon.value = false;
     hasUsedGuide.value = false;
+    guideUsageCount.value = 0;
+    currentDensity.value = density;
     elapsedTime.value = 0;
     startTimer();
+    saveState();
   }
 
   function resetGrid() {
@@ -242,6 +251,8 @@ export const usePuzzleStore = defineStore('puzzle', () => {
         playerGrid: playerGrid.value,
         isGameWon: isGameWon.value,
         hasUsedGuide: hasUsedGuide.value,
+        guideUsageCount: guideUsageCount.value,
+        currentDensity: currentDensity.value,
         elapsedTime: elapsedTime.value,
         moves: moves.value,
         history: history.value
@@ -259,6 +270,9 @@ export const usePuzzleStore = defineStore('puzzle', () => {
             solution.value = parsed.solution;
             playerGrid.value = parsed.playerGrid;
             isGameWon.value = parsed.isGameWon;
+            hasUsedGuide.value = parsed.hasUsedGuide || false;
+            guideUsageCount.value = parsed.guideUsageCount || 0;
+            currentDensity.value = parsed.currentDensity || 0;
             elapsedTime.value = parsed.elapsedTime || 0;
             moves.value = parsed.moves || 0;
             history.value = parsed.history || [];
@@ -275,44 +289,9 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     return false;
   }
   
-  function initGame(levelId = 'easy') {
-    // If init called without args and we have save, load it?
-    // User might want to start fresh if clicking buttons.
-    // Let's add explicit 'continue' logic or just auto-load on first run.
-    // For now, let's just stick to explicit init, but maybe load on mount if exists?
-    // The user didn't explicitly ask for "Continue", but "features from HTML".
-    // HTML usually auto-saves and loads.
-    
-    stopTimer();
-    currentLevelId.value = levelId;
-    
-    let puzzle = PUZZLES[levelId];
-    if (!puzzle) {
-        puzzle = PUZZLES['easy'];
-    }
-
-    size.value = puzzle.size;
-    solution.value = puzzle.grid;
-    
-    resetGrid();
-    isGameWon.value = false;
-    elapsedTime.value = 0;
-    startTimer();
-    saveState();
-  }
+  // Duplicate initGame removed
   
-  // Modify initCustomGame similarly
-  function initCustomGame(customSize) {
-    stopTimer();
-    currentLevelId.value = 'custom';
-    size.value = customSize;
-    solution.value = generateRandomGrid(customSize);
-    resetGrid();
-    isGameWon.value = false;
-    elapsedTime.value = 0;
-    startTimer();
-    saveState();
-  }
+  // Duplicate initCustomGame removed
 
   // Duplicate toggleCell/setCell removed
 
@@ -321,6 +300,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
         resetGrid();
         isGameWon.value = false;
         hasUsedGuide.value = false;
+        guideUsageCount.value = 0;
         elapsedTime.value = 0;
         startTimer();
         saveState();
@@ -332,6 +312,7 @@ export const usePuzzleStore = defineStore('puzzle', () => {
   function markGuideUsed() {
     if (isGameWon.value) return;
     hasUsedGuide.value = true;
+    guideUsageCount.value++;
     saveState();
   }
 
@@ -360,6 +341,8 @@ export const usePuzzleStore = defineStore('puzzle', () => {
     undo,
     closeWinModal,
     hasUsedGuide,
+    guideUsageCount,
+    currentDensity,
     markGuideUsed
   };
 

src/utils/puzzleUtils.js

@@ -40,15 +40,91 @@ export function calculateHints(grid) {
     return { rowHints, colHints };
 }
 
-export function generateRandomGrid(size) {
+export function generateRandomGrid(size, density = 0.5) {
     const grid = [];
     for (let i = 0; i < size; i++) {
         const row = [];
         for (let j = 0; j < size; j++) {
-            // ~25% empty cells
-            row.push(Math.random() > 0.25 ? 1 : 0);
+            row.push(Math.random() < density ? 1 : 0);
         }
         grid.push(row);
     }
     return grid;
 }
+
+export function calculateDifficulty(density, size = 10) {
+    // Data derived from Monte Carlo Simulation (Logical Solver)
+    // Format: { size: [solved_pct_at_0.1, ..., solved_pct_at_0.9] }
+    // Densities: 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9
+    const SIM_DATA = {
+        5:  [89, 74, 74, 81, 97, 98, 99, 100, 100],
+        10: [57, 20, 16, 54, 92, 100, 100, 100, 100],
+        15: [37, 10, 2, 12, 68, 100, 100, 100, 100],
+        20: [23, 3, 1, 2, 37, 100, 100, 100, 100],
+        25: [16, 0, 0, 1, 19, 99, 100, 100, 100],
+        30: [8, 0, 0, 0, 5, 99, 100, 100, 100],
+        35: [6, 0, 0, 0, 4, 91, 100, 100, 100],
+        40: [3, 0, 0, 0, 2, 91, 100, 100, 100],
+        45: [2, 0, 0, 0, 1, 82, 100, 100, 100],
+        50: [2, 0, 0, 0, 1, 73, 100, 100, 100],
+        60: [0, 0, 0, 0, 0, 35, 100, 100, 100],
+        70: [0, 0, 0, 0, 0, 16, 100, 100, 100],
+        80: [0, 0, 0, 0, 0, 1, 100, 100, 100]
+    };
+
+    // Helper to get interpolated value from array
+    const getSimulatedSolvedPct = (s, d) => {
+        // Find closest sizes
+        const sizes = Object.keys(SIM_DATA).map(Number).sort((a, b) => a - b);
+        let sLower = sizes[0];
+        let sUpper = sizes[sizes.length - 1];
+        
+        for (let i = 0; i < sizes.length - 1; i++) {
+            if (s >= sizes[i] && s <= sizes[i+1]) {
+                sLower = sizes[i];
+                sUpper = sizes[i+1];
+                break;
+            }
+        }
+        
+        // Clamp density to 0.1 - 0.9
+        const dClamped = Math.max(0.1, Math.min(0.9, d));
+        // Index in array: 0.1 -> 0, 0.9 -> 8
+        const dIndex = (dClamped - 0.1) * 10;
+        const dLowerIdx = Math.floor(dIndex);
+        const dUpperIdx = Math.ceil(dIndex);
+        const dFraction = dIndex - dLowerIdx;
+
+        // Bilinear Interpolation
+        
+        // 1. Interpolate Density for Lower Size
+        const rowLower = SIM_DATA[sLower];
+        const valLower = rowLower[dLowerIdx] * (1 - dFraction) + (rowLower[dUpperIdx] || rowLower[dLowerIdx]) * dFraction;
+        
+        // 2. Interpolate Density for Upper Size
+        const rowUpper = SIM_DATA[sUpper];
+        const valUpper = rowUpper[dLowerIdx] * (1 - dFraction) + (rowUpper[dUpperIdx] || rowUpper[dLowerIdx]) * dFraction;
+        
+        // 3. Interpolate Size
+        if (sLower === sUpper) return valLower;
+        const sFraction = (s - sLower) / (sUpper - sLower);
+        
+        return valLower * (1 - sFraction) + valUpper * sFraction;
+    };
+
+    const solvedPct = getSimulatedSolvedPct(size, density);
+    
+    // Difficulty Score: Inverse of Solved Percent
+    // 100% Solved -> 0 Difficulty
+    // 0% Solved -> 100 Difficulty
+    const value = Math.round(100 - solvedPct);
+    
+    // Thresholds
+    let level = 'easy';
+    if (value >= 90) level = 'extreme';     // < 10% Solved
+    else if (value >= 60) level = 'hardest'; // < 40% Solved
+    else if (value >= 30) level = 'harder';  // < 70% Solved
+    else level = 'easy';                     // > 70% Solved
+
+    return { level, value };
+}

src/utils/solver.js

@@ -0,0 +1,278 @@
+
+/**
+ * Represents the state of a cell in the solver.
+ * -1: Unknown
+ *  0: Empty
+ *  1: Filled
+ */
+
+/**
+ * Solves a single line (row or column) based on hints and current knowledge.
+ * Uses the "Left-Right Overlap" algorithm to find common filled cells.
+ * Also identifies definitely empty cells (reachable by no block).
+ * 
+ * @param {number[]} currentLine - Array of -1, 0, 1
+ * @param {number[]} hints - Array of block lengths
+ * @returns {number[]} - Updated line (or null if contradiction/impossible - though shouldn't happen for valid puzzles)
+ */
+function solveLine(currentLine, hints) {
+    const length = currentLine.length;
+    
+    // If no hints, all must be empty
+    if (hints.length === 0 || (hints.length === 1 && hints[0] === 0)) {
+        return Array(length).fill(0);
+    }
+
+    // Helper to check if a block can be placed at start index
+    const canPlace = (line, start, blockSize) => {
+        if (start + blockSize > line.length) return false;
+        // Check if any cell in block is 0 (Empty) -> Invalid
+        for (let i = start; i < start + blockSize; i++) {
+            if (line[i] === 0) return false;
+        }
+        // Check boundaries (must be separated by empty or edge)
+        if (start > 0 && line[start - 1] === 1) return false;
+        if (start + blockSize < line.length && line[start + blockSize] === 1) return false;
+        return true;
+    };
+
+    // 1. Calculate Left-Most Positions
+    const leftPositions = [];
+    let currentIdx = 0;
+    for (let hIndex = 0; hIndex < hints.length; hIndex++) {
+        const block = hints[hIndex];
+        // Find first valid position
+        while (currentIdx <= length - block) {
+            if (canPlace(currentLine, currentIdx, block)) {
+                // Verify we can fit remaining blocks
+                // Simple heuristic: do we have enough space? 
+                // A full recursive check is better but slower. 
+                // For "Logical Solver" we assume valid placement is possible if we respect current constraints.
+                // However, strictly, we need to know if there is *any* valid arrangement starting here.
+                // Let's use a recursive check with memoization for "can fit rest".
+                if (canFitRest(currentLine, currentIdx + block + 1, hints, hIndex + 1)) {
+                    leftPositions.push(currentIdx);
+                    currentIdx += block + 1; // Move past this block + 1 space
+                    break;
+                }
+            }
+            currentIdx++;
+        }
+        if (leftPositions.length <= hIndex) return null; // Impossible
+    }
+
+    // 2. Calculate Right-Most Positions (by reversing line and hints)
+    // This is symmetrical to Left-Most.
+    // Instead of implementing reverse logic, we can just reverse inputs, run left-most, and reverse back.
+    // But we need to respect the "currentLine" constraints which might be asymmetric.
+    
+    // Actually, "Right-Most" is just "Left-Most" on the reversed grid.
+    const reversedLine = [...currentLine].reverse();
+    const reversedHints = [...hints].reverse();
+    const rightPositionsReversed = [];
+    
+    currentIdx = 0;
+    for (let hIndex = 0; hIndex < reversedHints.length; hIndex++) {
+        const block = reversedHints[hIndex];
+        while (currentIdx <= length - block) {
+            if (canPlace(reversedLine, currentIdx, block)) {
+                if (canFitRest(reversedLine, currentIdx + block + 1, reversedHints, hIndex + 1)) {
+                    rightPositionsReversed.push(currentIdx);
+                    currentIdx += block + 1;
+                    break;
+                }
+            }
+            currentIdx++;
+        }
+        if (rightPositionsReversed.length <= hIndex) return null;
+    }
+    
+    // Convert reversed positions to actual indices
+    // index in reversed = length - 1 - (original_index + block_size - 1)
+    // original_start = length - 1 - (reversed_start + block_size - 1) = length - reversed_start - block_size
+    const rightPositions = rightPositionsReversed.map((rStart, i) => {
+        const block = reversedHints[i];
+        return length - rStart - block;
+    }).reverse();
+
+
+    // 3. Intersect
+    const newLine = [...currentLine];
+    
+    // Fill intersection
+    for (let i = 0; i < hints.length; i++) {
+        const l = leftPositions[i];
+        const r = rightPositions[i];
+        const block = hints[i];
+        
+        // If overlap exists: [r, l + block - 1]
+        // Example: Block 5. Left: 2, Right: 4.
+        // Left:  ..XXXXX...
+        // Right: ....XXXXX.
+        // Overlap:   ..XXX...
+        // Indices: max(l, r) to min(l+block, r+block) - 1 ?
+        // Range is [r, l + block - 1] (inclusive)
+        
+        if (r < l + block) {
+            for (let k = r; k < l + block; k++) {
+                newLine[k] = 1;
+            }
+        }
+    }
+
+    // Determine Empty cells?
+    // A cell is empty if it is not covered by ANY block in ANY valid configuration.
+    // This is harder with just L/R limits.
+    // However, we can use the "Simple Glue" logic:
+    // If a cell is outside the range [LeftLimit[i], RightLimit[i] + block] for ALL i, it's empty.
+    // Wait, indices are not strictly partitioned. Block 1 could be at 0 or 10.
+    // But logic dictates order.
+    // Range of block i is [LeftPositions[i], RightPositions[i] + hints[i]].
+    // If a cell k is not in ANY of these ranges, it is 0.
+    
+    // Mask of possible filled cells
+    const possibleFilled = Array(length).fill(false);
+    for (let i = 0; i < hints.length; i++) {
+        for (let k = leftPositions[i]; k < rightPositions[i] + hints[i]; k++) {
+            possibleFilled[k] = true;
+        }
+    }
+    
+    for (let k = 0; k < length; k++) {
+        if (!possibleFilled[k]) {
+            newLine[k] = 0;
+        }
+    }
+
+    return newLine;
+}
+
+// Memoized helper for checking if hints fit
+const memo = new Map();
+function canFitRest(line, startIndex, hints, hintIndex) {
+    // Optimization: If hints are empty, we just need to check if remaining line has no '1's
+    if (hintIndex >= hints.length) {
+        for (let i = startIndex; i < line.length; i++) {
+            if (line[i] === 1) return false;
+        }
+        return true;
+    }
+
+    // Key for memoization (primitive approach)
+    // In a full solver, we'd pass a cache. For single line, maybe overkill, but safe.
+    // let key = `${startIndex}-${hintIndex}`; 
+    // Skipping memo for now as line lengths are small (<80) and recursion depth is low.
+    
+    const remainingLen = line.length - startIndex;
+    // Min space needed: sum of hints + (hints.length - 1) spaces
+    // Calculate lazily or precalc?
+    let minSpace = 0;
+    for(let i=hintIndex; i<hints.length; i++) minSpace += hints[i] + (i < hints.length - 1 ? 1 : 0);
+    
+    if (remainingLen < minSpace) return false;
+
+    const block = hints[hintIndex];
+    // Try to find *any* valid placement for this block
+    // We only need ONE valid path to return true.
+    for (let i = startIndex; i <= line.length - minSpace; i++) { // Optimization on upper bound?
+         // Check placement
+         let valid = true;
+         // Block
+         for (let k = 0; k < block; k++) {
+             if (line[i+k] === 0) { valid = false; break; }
+         }
+         if (!valid) continue;
+         
+         // Boundary before (checked by loop start usually, but strictly:
+         if (i > 0 && line[i-1] === 1) valid = false; // Should have been handled by caller or skip
+         // Wait, the caller (loop) iterates i. 
+         // If i > startIndex, we implied space at i-1.
+         // If line[i-1] is 1, we can't place here if we skipped it.
+         // Actually, if we skip a '1', that's invalid.
+         // So we can't just skip '1's.
+         
+         // Correct logic:
+         // We iterate i. If we pass a '1' at index < i, that 1 is orphaned -> Invalid path.
+         // So we can only scan forward as long as we don't skip a '1'.
+         
+         let skippedOne = false;
+         for (let x = startIndex; x < i; x++) {
+             if (line[x] === 1) { skippedOne = true; break; }
+         }
+         if (skippedOne) break; // Cannot go further right, we left a 1 behind.
+         
+         // Boundary after
+         if (i + block < line.length && line[i+block] === 1) valid = false;
+         
+         if (valid) {
+             // Recurse
+             if (canFitRest(line, i + block + 1, hints, hintIndex + 1)) return true;
+         }
+    }
+    
+    return false;
+}
+
+
+/**
+ * Solves the puzzle using logical iteration.
+ * @param {number[][]} rowHints 
+ * @param {number[][]} colHints 
+ * @returns {object} { solvedGrid: number[][], percentSolved: number }
+ */
+export function solvePuzzle(rowHints, colHints) {
+    const rows = rowHints.length;
+    const cols = colHints.length;
+    
+    // Initialize grid with -1
+    let grid = Array(rows).fill(null).map(() => Array(cols).fill(-1));
+    
+    let changed = true;
+    let iterations = 0;
+    const MAX_ITER = 100; // Safety break
+    
+    while (changed && iterations < MAX_ITER) {
+        changed = false;
+        iterations++;
+        
+        // Rows
+        for (let r = 0; r < rows; r++) {
+            const newLine = solveLine(grid[r], rowHints[r]);
+            if (newLine) {
+                for (let c = 0; c < cols; c++) {
+                    if (grid[r][c] !== newLine[c]) {
+                        grid[r][c] = newLine[c];
+                        changed = true;
+                    }
+                }
+            }
+        }
+        
+        // Cols
+        for (let c = 0; c < cols; c++) {
+            const currentCol = grid.map(row => row[c]);
+            const newCol = solveLine(currentCol, colHints[c]);
+            if (newCol) {
+                for (let r = 0; r < rows; r++) {
+                    if (grid[r][c] !== newCol[r]) {
+                        grid[r][c] = newCol[r];
+                        changed = true;
+                    }
+                }
+            }
+        }
+    }
+    
+    // Calculate solved %
+    let solvedCount = 0;
+    for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+            if (grid[r][c] !== -1) solvedCount++;
+        }
+    }
+    
+    return {
+        solvedGrid: grid,
+        percentSolved: (solvedCount / (rows * cols)) * 100
+    };
+}

src/workers/solverWorker.js

@@ -5,7 +5,7 @@ const messages = {
     'worker.solved': 'Rozwiązane!',
     'worker.logicRow': 'Logika: Wiersz {row}, Kolumna {col} -> {state}',
     'worker.logicCol': 'Logika: Kolumna {col}, Wiersz {row} -> {state}',
-    'worker.guess': 'Zgadywanie: Wiersz {row}, Kolumna {col}',
+    'worker.stuck': 'Brak logicznego ruchu. Spróbuj zgadnąć lub cofnąć.',
     'worker.done': 'Koniec!',
     'worker.state.filled': 'Pełne',
     'worker.state.empty': 'Puste'
@@ -14,7 +14,7 @@ const messages = {
     'worker.solved': 'Solved!',
     'worker.logicRow': 'Logic: Row {row}, Column {col} -> {state}',
     'worker.logicCol': 'Logic: Column {col}, Row {row} -> {state}',
-    'worker.guess': 'Guessing: Row {row}, Column {col}',
+    'worker.stuck': 'No logical move found. Try guessing or undoing.',
     'worker.done': 'Done!',
     'worker.state.filled': 'Filled',
     'worker.state.empty': 'Empty'
@@ -91,15 +91,33 @@ const solveLineLogic = (lineState, hints) => {
       return result;
     }
     const len = hints[hintIndex];
+    // maxStart logic: we need enough space for this block (len) + subsequent blocks/gaps (suffixMin[hintIndex+1])
+    // suffixMin[hintIndex] = len + (m - hintIndex - 1) + suffixMin[hintIndex+1]
+    // Actually suffixMin[hintIndex] already includes everything needed from here to end.
+    // So if we place block at start, end is start + len.
+    // Total space needed is suffixMin[hintIndex].
+    // So start can go up to n - suffixMin[hintIndex].
     const maxStart = n - suffixMin[hintIndex];
+    
     for (let start = pos; start <= maxStart; start++) {
-      if (hasFilled(pos, start)) continue;
-      if (hasCross(start, start + len)) continue;
-      if (start + len < n && lineState[start + len] === 1) continue;
-      const nextPos = start + len < n ? start + len + 1 : start + len;
-      if (canPlaceSuffix(nextPos, hintIndex + 1)) {
-        memoSuffix[pos][hintIndex] = true;
-        return true;
+      if (hasFilled(pos, start)) continue; // Must be empty before this block
+      if (hasCross(start, start + len)) continue; // Block space must be free of crosses
+      
+      // If not the last block, we need a gap after
+      if (hintIndex < m - 1) {
+          if (start + len < n && lineState[start + len] === 1) continue; // Gap must not be filled
+          // We can assume gap is at start + len. Next block starts at least at start + len + 1
+          const nextPos = start + len + 1;
+          if (canPlaceSuffix(nextPos, hintIndex + 1)) {
+            memoSuffix[pos][hintIndex] = true;
+            return true;
+          }
+      } else {
+          // Last block
+          // Check if we can fill the rest with empty
+          if (hasFilled(start + len, n)) continue;
+          memoSuffix[pos][hintIndex] = true;
+          return true;
       }
     }
     memoSuffix[pos][hintIndex] = false;
@@ -115,16 +133,42 @@ const solveLineLogic = (lineState, hints) => {
       return result;
     }
     const len = hints[hintCount - 1];
-    const maxStart = pos - len;
+    
+    // Logic for prefix:
+    // We are placing the (hintCount-1)-th block ending at 'start + len' <= pos.
+    // So 'start' <= pos - len.
+    // But we also need to ensure there is space for previous blocks.
+    // However, the simple constraint is just iterating backwards.
+    
+    // maxStart: if this is the only block, maxStart = pos - len.
+    // If there are previous blocks, we need a gap before this block.
+    // So previous block ended at start - 1.
+    // Actually the recursive call will handle space check.
+    // But for the gap check:
+    // If we place block at 'start', we need lineState[start-1] != 1 (if start > 0).
+    // And we recursively check canPlacePrefix(start-1, count-1).
+    // But if start=0 and count > 1, impossible.
+    
+    const maxStart = pos - len; // Simplified, loop condition handles rest
+    
     for (let start = maxStart; start >= 0; start--) {
       if (hasCross(start, start + len)) continue;
-      if (start + len < pos && lineState[start + len] === 1) continue;
-      if (hasFilled(start + len, pos)) continue;
-      if (start > 0 && lineState[start - 1] === 1) continue;
-      const prevPos = start > 0 ? start - 1 : 0;
-      if (canPlacePrefix(prevPos, hintCount - 1)) {
-        memoPrefix[pos][hintCount] = true;
-        return true;
+      if (hasFilled(start + len, pos)) continue; // Must be empty after this block up to pos
+      
+      // Check gap before
+      if (hintCount > 1) {
+          if (start === 0) continue; // No space for previous blocks
+          if (lineState[start - 1] === 1) continue; // Gap must not be filled
+          const prevPos = start - 1;
+          if (canPlacePrefix(prevPos, hintCount - 1)) {
+            memoPrefix[pos][hintCount] = true;
+            return true;
+          }
+      } else {
+          // First block
+          if (hasFilled(0, start)) continue; // Before first block must be empty
+          memoPrefix[pos][hintCount] = true;
+          return true;
       }
     }
     memoPrefix[pos][hintCount] = false;
@@ -136,7 +180,14 @@ const solveLineLogic = (lineState, hints) => {
     const len = hints[i];
     const starts = [];
     for (let start = 0; start <= n - len; start++) {
-      if (!canPlacePrefix(start, i)) continue;
+      if (i === 0) {
+        if (!canPlacePrefix(start, 0)) continue;
+      } else {
+        if (start === 0) continue;
+        if (lineState[start - 1] === 1) continue;
+        if (!canPlacePrefix(start - 1, i)) continue;
+      }
+
       if (hasCross(start, start + len)) continue;
       if (start + len < n && lineState[start + len] === 1) continue;
       const nextPos = start + len < n ? start + len + 1 : start + len;
@@ -236,29 +287,9 @@ const handleStep = (playerGrid, solution, locale) => {
     }
   }
 
-  for (let r = 0; r < size; r++) {
-    for (let c = 0; c < size; c++) {
-      const current = playerGrid[r][c];
-      const target = solution[r][c];
-      let isCorrect = false;
-      if (target === 1 && current === 1) isCorrect = true;
-      if (target === 0 && current === 2) isCorrect = true;
-      if (target === 0 && current === 0) isCorrect = false;
-      if (target === 1 && current === 0) isCorrect = false;
-      if (!isCorrect) {
-        const newState = target === 1 ? 1 : 2;
-        return {
-          type: 'move',
-          r,
-          c,
-          state: newState,
-          statusText: t(locale, 'worker.guess', { row: r + 1, col: c + 1 })
-        };
-      }
-    }
-  }
-
-  return { type: 'done', statusText: t(locale, 'worker.done') };
+  // Check for guess logic - we want to avoid this unless strictly necessary
+  // If no logic move found, return 'stuck' instead of cheating
+  return { type: 'stuck', statusText: t(locale, 'worker.stuck') };
 };
 
 self.onmessage = (event) => {