1.9.14

2026-02-12 15:02:47 +01:00
28 changed files with 199 additions and 3779 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,7 @@
-.gpg/
 node_modules
+dist
 .DS_Store
+.vscode
+.idea
+*.log
+dev-dist
--- a/README.md
+++ b/README.md
@@ -8,6 +8,4 @@ Nonograms is a modern, fast, and accessible logic puzzle game (also known as Pic
 - Difficulty simulation and guide to learn solving strategies
 - Shareable puzzles and persistent progress

-![Nonograms Application Screenshot](public/screenshot.png)
-
 Play online at https://nonograms.7u.pl or install as a PWA for an app-like experience.
--- a/check_i18n.js
+++ b/check_i18n.js
@@ -0,0 +1,37 @@
+
+const fs = require('fs');
+
+const fileContent = fs.readFileSync('src/composables/useI18n.js', 'utf8');
+
+// Extract the messages object
+const match = fileContent.match(/const messages = ({[\s\S]*?});/);
+if (!match) {
+  console.error('Could not find messages object');
+  process.exit(1);
+}
+
+// We need to make the string valid JS to eval it.
+// It seems the content inside `const messages = { ... };` is valid JS object notation.
+// But we need to be careful about imports or other things if we were to `eval` the whole file.
+// We'll just `eval` the object part.
+
+const messagesStr = match[1];
+const messages = eval(`(${messagesStr})`);
+
+const enKeys = Object.keys(messages.en);
+const languages = Object.keys(messages);
+
+const missing = {};
+
+languages.forEach(lang => {
+  if (lang === 'en') return;
+  
+  const langKeys = Object.keys(messages[lang]);
+  const missingKeys = enKeys.filter(k => !langKeys.includes(k));
+  
+  if (missingKeys.length > 0) {
+    missing[lang] = missingKeys;
+  }
+});
+
+console.log(JSON.stringify(missing, null, 2));
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -1,92 +0,0 @@
-/**
- * Copyright 2018 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *     http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// If the loader is already loaded, just stop.
-if (!self.define) {
-  let registry = {};
-
-  // Used for `eval` and `importScripts` where we can't get script URL by other means.
-  // In both cases, it's safe to use a global var because those functions are synchronous.
-  let nextDefineUri;
-
-  const singleRequire = (uri, parentUri) => {
-    uri = new URL(uri + ".js", parentUri).href;
-    return registry[uri] || (
-      
-        new Promise(resolve => {
-          if ("document" in self) {
-            const script = document.createElement("script");
-            script.src = uri;
-            script.onload = resolve;
-            document.head.appendChild(script);
-          } else {
-            nextDefineUri = uri;
-            importScripts(uri);
-            resolve();
-          }
-        })
-      
-      .then(() => {
-        let promise = registry[uri];
-        if (!promise) {
-          throw new Error(`Module ${uri} didn’t register its module`);
-        }
-        return promise;
-      })
-    );
-  };
-
-  self.define = (depsNames, factory) => {
-    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
-    if (registry[uri]) {
-      // Module is already loading or loaded.
-      return;
-    }
-    let exports = {};
-    const require = depUri => singleRequire(depUri, uri);
-    const specialDeps = {
-      module: { uri },
-      exports,
-      require
-    };
-    registry[uri] = Promise.all(depsNames.map(
-      depName => specialDeps[depName] || require(depName)
-    )).then(deps => {
-      factory(...deps);
-      return exports;
-    });
-  };
-}
-define(['./workbox-7a5e81cd'], (function (workbox) { 'use strict';
-
-  self.addEventListener('message', event => {
-    if (event.data && event.data.type === 'SKIP_WAITING') {
-      self.skipWaiting();
-    }
-  });
-
-  /**
-   * The precacheAndRoute() method efficiently caches and responds to
-   * requests for URLs in the manifest.
-   * See https://goo.gl/S9QRab
-   */
-  workbox.precacheAndRoute([{
-    "url": "index.html",
-    "revision": "0.0dmrmul42fg"
-  }], {});
-  workbox.cleanupOutdatedCaches();
-  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
-    allowlist: [/^\/$/]
-  }));
-
-}));
--- a/dev-dist/workbox-7a5e81cd.js
+++ b/dev-dist/workbox-7a5e81cd.js
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/nonograms.svg" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="apple-touch-icon" href="/nonograms.svg" />
    <link rel="mask-icon" href="/nonograms.svg" color="#00f2fe" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nonograms Pro - Vue 3 SOLID</title>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "vue-nonograms-solid",
-  "version": "1.12.5",
+  "version": "1.9.14",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "vue-nonograms-solid",
-      "version": "1.12.5",
+      "version": "1.9.14",
      "dependencies": {
        "fireworks-js": "^2.10.8",
        "flag-icons": "^7.5.0",
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
  "name": "vue-nonograms-solid",
-  "version": "1.12.5",
+  "version": "1.9.14",
  "homepage": "https://nonograms.7u.pl/",
  "type": "module",
  "scripts": {
-    "dev": "vite --host",
+    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest"
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/nonograms.svg
+++ b/public/nonograms.svg
@@ -1,44 +1,28 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
-  <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#43C6AC"/>
-      <stop offset="1" stop-color="#191654"/>
-    </linearGradient>
-    <linearGradient id="cell" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#00f2fe"/>
-      <stop offset="1" stop-color="#4facfe"/>
-    </linearGradient>
-    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
-    </filter>
-  </defs>
-  
-  <!-- Main Background -->
-  <rect width="192" height="192" rx="42" fill="url(#bg)"/>
-  
-  <!-- Console Screen Background -->
-  <rect x="26" y="26" width="140" height="140" rx="16" fill="rgba(0,10,30,0.5)" stroke="rgba(0,242,254,0.2)" stroke-width="1.5"/>
-
-  <!-- Letter N built from Nonogram cells -->
-  <g fill="url(#cell)" filter="url(#glow)">
-    <!-- Left Column -->
-    <rect x="38" y="38" width="20" height="20" rx="4"/>
-    <rect x="38" y="62" width="20" height="20" rx="4"/>
-    <rect x="38" y="86" width="20" height="20" rx="4"/>
-    <rect x="38" y="110" width="20" height="20" rx="4"/>
-    <rect x="38" y="134" width="20" height="20" rx="4"/>
-    
-    <!-- Diagonal -->
-    <rect x="62" y="62" width="20" height="20" rx="4"/>
-    <rect x="86" y="86" width="20" height="20" rx="4"/>
-    <rect x="110" y="110" width="20" height="20" rx="4"/>
-    
-    <!-- Right Column -->
-    <rect x="134" y="38" width="20" height="20" rx="4"/>
-    <rect x="134" y="62" width="20" height="20" rx="4"/>
-    <rect x="134" y="86" width="20" height="20" rx="4"/>
-    <rect x="134" y="110" width="20" height="20" rx="4"/>
-    <rect x="134" y="134" width="20" height="20" rx="4"/>
+  <rect width="192" height="192" fill="#0b0f1f"/>
+  <g transform="translate(24,24)">
+    <rect x="0" y="0" width="144" height="144" rx="16" fill="#121639" stroke="#00f2fe" stroke-width="4"/>
+    <g stroke="#00f2fe" stroke-width="2">
+      <line x1="24" y1="0" x2="24" y2="144"/>
+      <line x1="48" y1="0" x2="48" y2="144"/>
+      <line x1="72" y1="0" x2="72" y2="144"/>
+      <line x1="96" y1="0" x2="96" y2="144"/>
+      <line x1="120" y1="0" x2="120" y2="144"/>
+      <line x1="0" y1="24" x2="144" y2="24"/>
+      <line x1="0" y1="48" x2="144" y2="48"/>
+      <line x1="0" y1="72" x2="144" y2="72"/>
+      <line x1="0" y1="96" x2="144" y2="96"/>
+      <line x1="0" y1="120" x2="144" y2="120"/>
+    </g>
+    <g fill="#00f2fe">
+      <rect x="6" y="6" width="18" height="18" rx="3"/>
+      <rect x="54" y="30" width="18" height="18" rx="3"/>
+      <rect x="102" y="78" width="18" height="18" rx="3"/>
+      <rect x="30" y="126" width="18" height="18" rx="3"/>
+    </g>
+    <g fill="#ffffff">
+      <path d="M36 40 h16 v64 h-16 z"/>
+      <path d="M52 40 h16 l32 48 v-48 h16 v64 h-16 l-32 -48 v48 h-16 z"/>
+    </g>
  </g>
 </svg>
--- a/public/pwa-192x192.png
+++ b/public/pwa-192x192.png
--- a/public/pwa-192x192.svg
+++ b/public/pwa-192x192.svg
@@ -8,37 +8,17 @@
      <stop offset="0" stop-color="#00f2fe"/>
      <stop offset="1" stop-color="#4facfe"/>
    </linearGradient>
-    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
-    </filter>
  </defs>
-  
-  <!-- Main Background -->
-  <rect width="192" height="192" rx="42" fill="url(#bg)"/>
-  
-  <!-- Console Screen Background -->
-  <rect x="26" y="26" width="140" height="140" rx="16" fill="rgba(0,10,30,0.5)" stroke="rgba(0,242,254,0.2)" stroke-width="1.5"/>
-
-  <!-- Letter N built from Nonogram cells -->
-  <g fill="url(#cell)" filter="url(#glow)">
-    <!-- Left Column -->
-    <rect x="38" y="38" width="20" height="20" rx="4"/>
-    <rect x="38" y="62" width="20" height="20" rx="4"/>
-    <rect x="38" y="86" width="20" height="20" rx="4"/>
-    <rect x="38" y="110" width="20" height="20" rx="4"/>
-    <rect x="38" y="134" width="20" height="20" rx="4"/>
-    
-    <!-- Diagonal -->
-    <rect x="62" y="62" width="20" height="20" rx="4"/>
-    <rect x="86" y="86" width="20" height="20" rx="4"/>
-    <rect x="110" y="110" width="20" height="20" rx="4"/>
-    
-    <!-- Right Column -->
-    <rect x="134" y="38" width="20" height="20" rx="4"/>
-    <rect x="134" y="62" width="20" height="20" rx="4"/>
-    <rect x="134" y="86" width="20" height="20" rx="4"/>
-    <rect x="134" y="110" width="20" height="20" rx="4"/>
-    <rect x="134" y="134" width="20" height="20" rx="4"/>
+  <rect width="192" height="192" rx="28" fill="url(#bg)"/>
+  <rect x="28" y="28" width="136" height="136" rx="14" fill="rgba(0,0,0,0.35)"/>
+  <g fill="url(#cell)">
+    <rect x="48" y="48" width="20" height="20" rx="4"/>
+    <rect x="76" y="48" width="20" height="20" rx="4"/>
+    <rect x="104" y="48" width="20" height="20" rx="4"/>
+    <rect x="48" y="76" width="20" height="20" rx="4"/>
+    <rect x="104" y="76" width="20" height="20" rx="4"/>
+    <rect x="48" y="104" width="20" height="20" rx="4"/>
+    <rect x="76" y="104" width="20" height="20" rx="4"/>
+    <rect x="104" y="104" width="20" height="20" rx="4"/>
  </g>
 </svg>
--- a/public/pwa-512x512.png
+++ b/public/pwa-512x512.png
--- a/public/pwa-512x512.svg
+++ b/public/pwa-512x512.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 192 192">
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#43C6AC"/>
@@ -8,37 +8,17 @@
      <stop offset="0" stop-color="#00f2fe"/>
      <stop offset="1" stop-color="#4facfe"/>
    </linearGradient>
-    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
-      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
-    </filter>
  </defs>
-  
-  <!-- Main Background -->
-  <rect width="192" height="192" rx="42" fill="url(#bg)"/>
-  
-  <!-- Console Screen Background -->
-  <rect x="26" y="26" width="140" height="140" rx="16" fill="rgba(0,10,30,0.5)" stroke="rgba(0,242,254,0.2)" stroke-width="1.5"/>
-
-  <!-- Letter N built from Nonogram cells -->
-  <g fill="url(#cell)" filter="url(#glow)">
-    <!-- Left Column -->
-    <rect x="38" y="38" width="20" height="20" rx="4"/>
-    <rect x="38" y="62" width="20" height="20" rx="4"/>
-    <rect x="38" y="86" width="20" height="20" rx="4"/>
-    <rect x="38" y="110" width="20" height="20" rx="4"/>
-    <rect x="38" y="134" width="20" height="20" rx="4"/>
-    
-    <!-- Diagonal -->
-    <rect x="62" y="62" width="20" height="20" rx="4"/>
-    <rect x="86" y="86" width="20" height="20" rx="4"/>
-    <rect x="110" y="110" width="20" height="20" rx="4"/>
-    
-    <!-- Right Column -->
-    <rect x="134" y="38" width="20" height="20" rx="4"/>
-    <rect x="134" y="62" width="20" height="20" rx="4"/>
-    <rect x="134" y="86" width="20" height="20" rx="4"/>
-    <rect x="134" y="110" width="20" height="20" rx="4"/>
-    <rect x="134" y="134" width="20" height="20" rx="4"/>
+  <rect width="512" height="512" rx="80" fill="url(#bg)"/>
+  <rect x="74" y="74" width="364" height="364" rx="40" fill="rgba(0,0,0,0.35)"/>
+  <g fill="url(#cell)">
+    <rect x="138" y="138" width="54" height="54" rx="10"/>
+    <rect x="214" y="138" width="54" height="54" rx="10"/>
+    <rect x="290" y="138" width="54" height="54" rx="10"/>
+    <rect x="138" y="214" width="54" height="54" rx="10"/>
+    <rect x="290" y="214" width="54" height="54" rx="10"/>
+    <rect x="138" y="290" width="54" height="54" rx="10"/>
+    <rect x="214" y="290" width="54" height="54" rx="10"/>
+    <rect x="290" y="290" width="54" height="54" rx="10"/>
  </g>
 </svg>
--- a/public/screenshot.png
+++ b/public/screenshot.png
--- a/scripts/generate-icons.js
+++ b/scripts/generate-icons.js
@@ -1,42 +0,0 @@
-import sharp from 'sharp';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const INPUT_FILE = path.join(__dirname, '../public/nonograms.svg');
-const OUTPUT_DIR = path.join(__dirname, '../public');
-
-async function generateIcons() {
-  console.log('Generating icons from ' + INPUT_FILE);
-
-  try {
-    // 192x192
-    await sharp(INPUT_FILE)
-      .resize(192, 192)
-      .png()
-      .toFile(path.join(OUTPUT_DIR, 'pwa-192x192.png'));
-    console.log('Created pwa-192x192.png');
-
-    // 512x512
-    await sharp(INPUT_FILE)
-      .resize(512, 512)
-      .png()
-      .toFile(path.join(OUTPUT_DIR, 'pwa-512x512.png'));
-    console.log('Created pwa-512x512.png');
-
-    // Apple Touch Icon (180x180)
-    await sharp(INPUT_FILE)
-      .resize(180, 180)
-      .png()
-      .toFile(path.join(OUTPUT_DIR, 'apple-touch-icon.png'));
-    console.log('Created apple-touch-icon.png');
-    
-  } catch (err) {
-    console.error('Error generating icons:', err);
-    process.exit(1);
-  }
-}
-
-generateIcons();
--- a/scripts/simulate_difficulty.js
+++ b/scripts/simulate_difficulty.js
@@ -1,38 +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 SIZES = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80];
+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_SMALL = 100; // For size <= 25
-const SAMPLES_LARGE = 30;  // For size > 25
+const SAMPLES_PER_POINT = 20; // Adjust based on time/accuracy needs

-const results = {};
+console.log('Starting Monte Carlo Simulation for Nonogram Difficulty...');
+console.log(`Config: Sizes=${SIZES.length}, Densities=${DENSITIES.length}, Samples=${SAMPLES_PER_POINT}`);

-console.log('Starting Monte Carlo Simulation...');
+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) {
-    const samples = size <= 25 ? SAMPLES_SMALL : SAMPLES_LARGE;
-    const rowData = [];
-    
    for (const density of DENSITIES) {
        let totalSolved = 0;
+        let minSolved = 100;
+        let maxSolved = 0;
+        let totalTime = 0;

-        for (let i = 0; i < samples; i++) {
+        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 avg = Math.round(totalSolved / samples);
-        rowData.push(avg);
+        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)}%`);
    }
-    results[size] = rowData;
-    console.log(`  Size ${size}: [${rowData.join(', ')}]`);
 }

-const duration = (Date.now() - startTime) / 1000;
-console.log(`\nSimulation Complete in ${duration.toFixed(2)}s. Result JSON:`);
-console.log(JSON.stringify(results, null, 4));
+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}`);
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,7 +23,6 @@ const canInstall = ref(false);
 const installDismissed = ref(false);
 const isCoarsePointer = ref(false);
 const isStandalone = ref(false);
-const isIos = ref(false);
 const themePreference = ref('system');
 const appVersion = __APP_VERSION__;
 let displayModeMedia = null;
@@ -110,8 +109,6 @@ onMounted(() => {
  }
  if (typeof window !== 'undefined') {
    isCoarsePointer.value = window.matchMedia('(pointer: coarse)').matches;
-    const ua = navigator.userAgent.toLowerCase();
-    isIos.value = /ipad|iphone|ipod/.test(ua) || (ua.includes('mac') && navigator.maxTouchPoints > 1);
    const storedTheme = typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null;
    if (storedTheme === 'light' || storedTheme === 'dark' || storedTheme === 'system') {
      themePreference.value = storedTheme;
@@ -163,13 +160,10 @@ onUnmounted(() => {
    />
    <FixedBar />

-    <div v-if="(canInstall || (isIos && !isStandalone)) && !installDismissed" class="install-banner">
-      <div class="install-text">
-        <span v-if="isIos && !isStandalone">{{ t('pwa.installIos') }}</span>
-        <span v-else>{{ t('pwa.installTitle') }}</span>
-      </div>
+    <div v-if="canInstall && !installDismissed" class="install-banner">
+      <div class="install-text">{{ t('pwa.installTitle') }}</div>
      <div class="install-actions">
-        <button v-if="!isIos" class="btn-neon secondary install-btn" @click="handleInstall">
+        <button class="btn-neon secondary install-btn" @click="handleInstall">
          {{ installLabel }}
        </button>
        <button class="install-close" @click="installDismissed = true">×</button>
--- a/src/components/Cell.vue
+++ b/src/components/Cell.vue
@@ -43,30 +43,21 @@ const handlePointerDown = (e) => {
  const now = Date.now();
  if (now - lastTap < 300) {
    // Double tap -> X (Force)
-    clearLongPress();
    emit('start-drag', props.r, props.c, true, true);
    lastTap = 0;
  } else {
    // Single tap / Start drag -> Fill
    emit('start-drag', props.r, props.c, false, false);
    lastTap = now;
-
-    // Start Long Press Timer
-    clearLongPress();
-    longPressTimer = setTimeout(() => {
-        if (navigator.vibrate) navigator.vibrate(50);
-        // Switch to Cross (Right click logic, force=true to overwrite the just-placed Fill)
-        emit('start-drag', props.r, props.c, true, true);
-    }, 500);
  }
 };

 const handlePointerUp = (e) => {
-  clearLongPress();
+  // Handled in pointerdown
 };

 const handlePointerCancel = (e) => {
-  clearLongPress();
+  // Handled in pointerdown
 };
 </script>

--- a/src/components/CustomGameModal.vue
+++ b/src/components/CustomGameModal.vue
@@ -340,20 +340,12 @@ const confirm = () => {
  text-align: center;
  max-width: 800px;
  width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
  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;
 }

-@media (max-width: 768px), (max-height: 600px) {
-  .modal {
-    padding: 20px;
-  }
-}
-
 .modal-content {
    display: flex;
    flex-direction: row;
--- a/src/components/GameBoard.vue
+++ b/src/components/GameBoard.vue
@@ -27,28 +27,17 @@ let dragStartLeft = 0;
 const checkScroll = () => {
  const el = scrollWrapper.value;
  if (!el) return;
-  
-  const content = el.firstElementChild;
-  const contentWidth = content ? content.offsetWidth : el.scrollWidth;
  const sw = el.scrollWidth;
  const cw = el.clientWidth;
  
  // Only show custom scrollbar on mobile/tablet (width < 768px) and if content overflows
  const isMobile = window.innerWidth <= 768;
-  // Use contentWidth to check for overflow, as scrollWidth might be misleading
-  showScrollbar.value = isMobile && (contentWidth > cw + 1);
+  showScrollbar.value = isMobile && (sw > cw + 1);
  
  if (showScrollbar.value) {
    // Thumb width percentage = (viewport / total) * 100
-    // Use contentWidth for more accurate ratio
-    const ratio = cw / contentWidth;
+    const ratio = cw / sw;
    thumbWidth.value = Math.max(10, ratio * 100);
-    
-    // Hide if content fits or almost fits (prevent useless scrollbar)
-    // Increased tolerance to 95%
-    if (ratio >= 0.95) {
-      showScrollbar.value = false;
-    }
  }
 };

@@ -186,38 +175,21 @@ const handleGridLeave = () => {
  activeCol.value = null;
 };

-const handleResize = () => {
-  computeCellSize();
-  checkScroll();
-  // Re-check after potential layout animation/transition
-  setTimeout(() => {
-    computeCellSize();
-    checkScroll();
-  }, 300);
-};
-
 onMounted(() => {
  nextTick(() => {
    computeCellSize();
-    checkScroll();
-    // Extra check for slow layout/font loading or orientation changes
-    setTimeout(() => {
-      computeCellSize();
-      checkScroll();
-    }, 300);
  });
  isFinePointer.value = window.matchMedia('(pointer: fine)').matches;
-  
-  window.addEventListener('resize', handleResize);
-  window.addEventListener('orientationchange', handleResize);
+  window.addEventListener('resize', computeCellSize);
+  window.addEventListener('resize', checkScroll);
  window.addEventListener('mouseup', handleGlobalMouseUp);
  window.addEventListener('pointerup', handleGlobalPointerUp);
  window.addEventListener('touchend', handleGlobalPointerUp, { passive: true });
 });

 onUnmounted(() => {
-  window.removeEventListener('resize', handleResize);
-  window.removeEventListener('orientationchange', handleResize);
+  window.removeEventListener('resize', computeCellSize);
+  window.removeEventListener('resize', checkScroll);
  window.removeEventListener('mouseup', handleGlobalMouseUp);
  window.removeEventListener('pointerup', handleGlobalPointerUp);
  window.removeEventListener('touchend', handleGlobalPointerUp);
@@ -227,10 +199,6 @@ watch(() => store.size, async () => {
  await nextTick();
  computeCellSize();
  checkScroll();
-  setTimeout(() => {
-    computeCellSize();
-    checkScroll();
-  }, 300);
 });
 </script>

@@ -304,7 +272,6 @@ watch(() => store.size, async () => {
    min-width: 100%;
    margin: 0 auto; /* Center the wrapper safely */
    align-items: flex-start; /* Prevent cropping when centered */
-    padding-right: 40px;
  }
  
  .game-container {
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -321,10 +321,8 @@ watch(isMobileMenuOpen, (val) => {
        </transition>
      </div>
    </div>
-  </nav>

    <!-- Mobile Menu Overlay -->
-  <Teleport to="body">
    <transition name="fade">
        <div v-if="isMobileMenuOpen" class="mobile-menu-overlay">
            <div class="mobile-menu-header">
@@ -422,7 +420,7 @@ watch(isMobileMenuOpen, (val) => {
            </div>
        </div>
    </transition>
-  </Teleport>
+  </nav>
 </template>

 <style scoped>
--- a/src/components/SimulationView.vue
+++ b/src/components/SimulationView.vue
@@ -9,9 +9,9 @@ import { X, Play, Square, RotateCcw } from 'lucide-vue-next';
 const emit = defineEmits(['close']);
 const { t } = useI18n();

-const SIZES = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80]; 
+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 = 50; // Increased for better accuracy
+const SAMPLES_PER_POINT = 10; // Reduced for web performance demo

 const isRunning = ref(false);
 const progress = ref(0);
--- a/src/components/WinModal.vue
+++ b/src/components/WinModal.vue
@@ -215,8 +215,6 @@ onUnmounted(() => {
  width: fit-content;
  max-width: min(92vw, 560px);
  min-width: 280px;
-  max-height: 90vh;
-  overflow-y: auto;
  border: 1px solid var(--primary-accent);
  box-shadow: 0 0 50px rgba(0, 242, 255, 0.2);
  animation: slideUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -225,12 +223,6 @@ onUnmounted(() => {
  overflow-wrap: anywhere;
 }

-@media (max-width: 768px), (max-height: 600px) {
-  .modal {
-    padding: 20px;
-  }
-}
-
 h2 {
  font-size: 2.5rem;
  color: var(--primary-accent);
--- a/src/composables/useI18n.js
+++ b/src/composables/useI18n.js
@@ -50,7 +50,6 @@ const messages = {
    'pwa.installTitle': 'Zainstaluj aplikację i graj offline',
    'pwa.installMobile': 'Dodaj do ekranu głównego',
    'pwa.installDesktop': 'Zainstaluj na komputerze',
-    'pwa.installIos': 'Aby zainstalować: kliknij Udostępnij i wybierz "Dodaj do ekranu głównego"',
    'pwa.offlineReady': 'Aplikacja gotowa do pracy offline',
    'pwa.newContent': 'Dostępna nowa wersja, odśwież aby zaktualizować',
    'pwa.reload': 'Odśwież',
@@ -224,7 +223,6 @@ const messages = {
    'pwa.installTitle': 'Install the app and play offline',
    'pwa.installMobile': 'Add to home screen',
    'pwa.installDesktop': 'Install on desktop',
-    'pwa.installIos': 'To install: tap Share and select "Add to Home Screen"',
    'pwa.offlineReady': 'App ready to work offline',
    'pwa.newContent': 'New content available, click on reload button to update',
    'pwa.reload': 'Reload',
--- a/src/utils/puzzleUtils.js
+++ b/src/utils/puzzleUtils.js
@@ -63,20 +63,21 @@ export function generateRandomGrid(size, density = 0.5) {
 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: [86, 73, 74, 80, 88, 98, 99, 99, 100],
-        10: [57, 22, 19, 44, 86, 99, 100, 100, 100],
-        15: [37, 7, 2, 12, 70, 99, 100, 100, 100],
-        20: [23, 3, 0, 3, 40, 99, 100, 100, 100],
-        25: [13, 1, 0, 1, 19, 99, 100, 100, 100],
-        30: [8, 1, 0, 0, 4, 100, 100, 100, 100],
-        35: [5, 0, 0, 0, 3, 99, 100, 100, 100],
-        40: [3, 0, 0, 0, 1, 96, 100, 100, 100],
-        45: [2, 0, 0, 0, 1, 83, 100, 100, 100],
-        50: [1, 0, 0, 0, 0, 62, 100, 100, 100],
-        60: [0, 0, 0, 0, 0, 18, 100, 100, 100],
-        70: [0, 0, 0, 0, 0, 14, 100, 100, 100],
-        80: [0, 0, 0, 0, 0, 4, 100, 100, 100]
+        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],
+        71: [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
@@ -121,32 +122,17 @@ export function calculateDifficulty(density, size = 10) {

    const solvedPct = getSimulatedSolvedPct(size, density);
    
-    let value;
-    let level;
+    // Difficulty Score: Inverse of Solved Percent
+    // 100% Solved -> 0 Difficulty
+    // 0% Solved -> 100 Difficulty
+    const value = Math.round(100 - solvedPct);
    
-    // "Hardest" threshold is 99% solvability.
-    if (solvedPct < 99) {
-        // Extreme: Requires guessing
-        level = 'extreme';
-        // Map 0-99% solved to value 85-100
-        value = 85 + ((99 - solvedPct) / 99) * 15;
-    } else {
-        // Solvable (>= 99%)
-        // Density factor: 0.5 is hardest (1), 0.1/0.9 is easiest (0.2)
-        const densityFactor = 1 - 2 * Math.abs(density - 0.5);
+    // 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

-        // Complexity based on Size and Density
-        // Max size 80.
-        // Formula: size * (0.4 + 0.6 * densityFactor)
-        // Max: 80 * 1 = 80.
-        const complexity = size * (0.4 + 0.6 * densityFactor);
-        
-        value = Math.min(85, complexity);
-        
-        if (value < 25) level = 'easy';
-        else if (value < 55) level = 'harder';
-        else level = 'hardest';
-    }
-
-    return { level, value: Math.round(value) };
+    return { level, value };
 }
--- a/src/utils/shareUtils.js
+++ b/src/utils/shareUtils.js
@@ -227,11 +227,7 @@ export function buildShareSVG(data, t, formattedTime) {
  }

  // URL
-  svgContent += `
-    <a href="${appUrl}" target="_blank">
-      <text x="${padding}" y="${height - padding + 6}" font-family="Segoe UI, sans-serif" font-weight="500" font-size="14" fill="${urlColor}" style="text-decoration: underline; cursor: pointer;">${appUrl}</text>
-    </a>
-  `;
+  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;
--- a/vite.config.js
+++ b/vite.config.js
@@ -31,14 +31,14 @@ export default defineConfig({
        theme_color: '#00f2fe',
        icons: [
          {
-            src: '/pwa-192x192.png',
+            src: '/pwa-192x192.svg',
            sizes: '192x192',
-            type: 'image/png'
+            type: 'image/svg+xml'
          },
          {
-            src: '/pwa-512x512.png',
+            src: '/pwa-512x512.svg',
            sizes: '512x512',
-            type: 'image/png'
+            type: 'image/svg+xml'
          }
        ]
      }
@@ -48,8 +48,5 @@ export default defineConfig({
    alias: {
      '@': path.resolve(__dirname, './src')
    }
-  },
-  server: {
-    allowedHosts: true
  }
 })