mobile-desktop-tablet

Dockerfile.desktop

@@ -0,0 +1,9 @@
+# Simple static site image: serve the contents of /public with nginx
+FROM nginx:alpine
+WORKDIR /usr/share/nginx/html
+
+# Copy static files
+COPY desktop/ ./
+
+# Provide custom nginx.conf for clean URLs
+COPY nginx.conf /etc/nginx/conf.d/default.conf

Dockerfile.mobile

@@ -0,0 +1,9 @@
+# Simple static site image: serve the contents of /public with nginx
+FROM nginx:alpine
+WORKDIR /usr/share/nginx/html
+
+# Copy static files
+COPY mobile/ ./
+
+# Provide custom nginx.conf for clean URLs
+COPY nginx.conf /etc/nginx/conf.d/default.conf

Dockerfile.tablet

@@ -0,0 +1,9 @@
+# Simple static site image: serve the contents of /public with nginx
+FROM nginx:alpine
+WORKDIR /usr/share/nginx/html
+
+# Copy static files
+COPY tablet/ ./
+
+# Provide custom nginx.conf for clean URLs
+COPY nginx.conf /etc/nginx/conf.d/default.conf

MOBILE_SETUP.md

@@ -0,0 +1,55 @@
+# Mobile vs Desktop Setup
+
+The crossword puzzle now has separate optimized versions for mobile and desktop/tablet devices.
+
+## Files
+
+### Mobile Version (< 768px width)
+- **mobile.html** - Simplified mobile-optimized layout
+- **mobile.css** - Mobile-first CSS with compact design
+- **mobile.js** - Simplified game logic optimized for touch
+
+### Desktop/Tablet Version (>= 768px width)
+- **index.html** - Full-featured desktop layout
+- **styles_v5.css** - Desktop/tablet responsive CSS
+- **game.js** - Full game logic with advanced features
+
+### Shared Files
+- **puzzleData.js** - Puzzle data used by both versions
+- **redirect.js** - Automatic device detection and redirection
+
+## How It Works
+
+1. User visits the site (index.html or mobile.html)
+2. `redirect.js` detects device type
+3. Automatically redirects to appropriate version:
+   - Mobile devices → mobile.html
+   - Desktop/tablet → index.html
+
+## Key Differences
+
+### Mobile Version Features:
+- Compact header (50px)
+- Simplified controls
+- Touch-optimized grid (30-42px cells)
+- Minimal padding for maximum grid space
+- Single-column layout
+- Streamlined UI
+
+### Desktop Version Features:
+- Full header with stats
+- Larger grid (40-120px cells)
+- More detailed UI elements
+- Better spacing and padding
+- Advanced features
+
+## Testing
+
+To test mobile version on desktop:
+1. Open browser dev tools
+2. Toggle device emulation
+3. Refresh page - should auto-redirect to mobile.html
+
+To force a specific version:
+- Mobile: Go directly to `/mobile.html`
+- Desktop: Go directly to `/index.html`

desktop/game.js

@@ -217,7 +217,7 @@ class KruiswoordProGame {
           },
           {
             word     : 'VLIEG',
-            clue     : 'Insect →',
+            clue     : 'Insect',
             startRow : 2,
             startCol : 0,
             direction: 'horizontal',
@@ -238,6 +238,54 @@ class KruiswoordProGame {
     this.updateProgress()
   }
 
+  calculateOptimalCellSize(rows, cols) {
+    // Get available viewport space with mobile-specific adjustments
+    const isMobile = window.innerWidth < 768
+    const headerHeight = isMobile ? 70 : 80
+    const progressHeight = isMobile ? 50 : 60
+    const controlsHeight = isMobile ? 100 : 120
+    const gridPadding = isMobile ? 5 : 10 // padding inside grid-container
+    const sectionPadding = isMobile ? 5 : 20 // padding of puzzle-section
+    const mainPadding = isMobile ? 10 : 20 // game-main padding
+    const totalPadding = (gridPadding * 2) + (sectionPadding * 2) + (mainPadding * 2) + (isMobile ? 20 : 0)
+    const gap = isMobile ? 1 : 2
+
+    const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - totalPadding
+    const availableWidth = window.innerWidth - totalPadding
+
+    // Calculate max cell size based on available space
+    // Account for gaps between cells
+    const totalGapHeight = (rows - 1) * gap
+    const totalGapWidth = (cols - 1) * gap
+
+    const maxCellFromHeight = (availableHeight - totalGapHeight) / rows
+    const maxCellFromWidth = (availableWidth - totalGapWidth) / cols
+
+    // Use the smaller dimension
+    let cellSize = Math.floor(Math.min(maxCellFromHeight, maxCellFromWidth))
+
+    // Set min/max bounds based on device - more conservative on mobile
+    const minSize = isMobile ? 28 : 40
+    const maxSize = isMobile ? 45 : 120
+    cellSize = Math.max(minSize, Math.min(maxSize, cellSize))
+
+    console.log('Grid calculation:', {
+      isMobile,
+      viewportWidth: window.innerWidth,
+      availableWidth,
+      availableHeight,
+      rows,
+      cols,
+      maxCellFromWidth,
+      maxCellFromHeight,
+      finalCellSize: cellSize,
+      totalGridWidth: cols * cellSize + totalGapWidth + (gridPadding * 2),
+      totalPadding
+    })
+
+    return cellSize
+  }
+
   renderGrid() {
     if (!this.currentPuzzle) return
 
@@ -250,13 +298,17 @@ class KruiswoordProGame {
     const rows = grid.length
     const cols = Math.max(...grid.map(row => row.length)) + 1
 
-    // FIXED: Larger sizing for desktop/tablet
+    // Calculate available space and determine optimal cell size
-    const cellSize = this.isTablet ? (window.innerWidth > 1024 ? 80 : 65) : 50
+    const cellSize = this.calculateOptimalCellSize(rows, cols)
+
+    const isMobile = window.innerWidth < 768
+    const gap = isMobile ? 1 : 2
 
     this.gridElement.style.gridTemplateColumns = `repeat(${ cols }, ${ cellSize }px)`
     this.gridElement.style.gridTemplateRows = `repeat(${ rows }, ${ cellSize }px)`
-    this.gridElement.style.gap = '2px'
+    this.gridElement.style.gap = `${gap}px`
     this.gridElement.style.justifyContent = 'center'
+    this.gridElement.style.margin = '0 auto'
 
     // Create grid cells with clue column
     for (let row = 0; row < rows; row++) {
@@ -303,12 +355,18 @@ class KruiswoordProGame {
       const clueText = document.createElement('div')
       clueText.className = 'clue-text'
       clueText.textContent = clueData.clue
-      clueText.style.fontSize = this.isTablet ? '11px' : '9px'
+
+      // Responsive font sizing based on cell size
+      const fontSize = Math.max(7, Math.min(12, cellSize / 6))
+      clueText.style.fontSize = `${fontSize}px`
+      clueText.style.lineHeight = '1.1'
+      clueText.style.padding = '2px'
 
       const arrow = document.createElement('div')
       arrow.className = 'arrow arrow-right'
       arrow.textContent = '→'
-      arrow.style.fontSize = this.isTablet ? '20px' : '16px'
+      const arrowSize = Math.max(12, Math.min(24, cellSize / 3))
+      arrow.style.fontSize = `${arrowSize}px`
 
       cellDiv.appendChild(clueText)
       cellDiv.appendChild(arrow)
@@ -340,12 +398,18 @@ class KruiswoordProGame {
         const clueText = document.createElement('div')
         clueText.className = 'clue-text'
         clueText.textContent = clueData.clue
-        clueText.style.fontSize = this.isTablet ? '11px' : '9px'
+
+        // Responsive font sizing based on cell size
+        const fontSize = Math.max(7, Math.min(12, cellSize / 6))
+        clueText.style.fontSize = `${fontSize}px`
+        clueText.style.lineHeight = '1.1'
+        clueText.style.padding = '2px'
 
         const arrow = document.createElement('div')
         arrow.className = 'arrow arrow-right'
         arrow.textContent = '→'
-        arrow.style.fontSize = this.isTablet ? '20px' : '16px'
+        const arrowSize = Math.max(12, Math.min(24, cellSize / 3))
+        arrow.style.fontSize = `${arrowSize}px`
 
         cellDiv.appendChild(clueText)
         cellDiv.appendChild(arrow)
@@ -363,8 +427,9 @@ class KruiswoordProGame {
         input.dataset.row = row
         input.dataset.col = col
 
-        // Larger font sizing for desktop/tablet
+        // Responsive font sizing based on cell size
-        input.style.fontSize = this.isTablet ? '32px' : '24px'
+        const inputFontSize = Math.max(16, Math.min(36, cellSize * 0.5))
+        input.style.fontSize = `${inputFontSize}px`
 
         // Add existing answer if available
         const key = `${ row }-${ col }`

desktop/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Kruiswoord Pro: Zweedse puzzel</title>
-  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="styles_v5.css">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
 </head>
 <body>

desktop/styles_v5.css

@@ -170,16 +170,49 @@ body {
   border-radius: 15px;
   padding: 20px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  position: relative;
+}
+
+@media (max-width: 768px) {
+  .game-main {
+    padding: 10px;
+    gap: 10px;
+  }
+
+  .puzzle-section {
+    padding: 5px;
+    border-radius: 10px;
+    overflow: hidden;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 
 /* Crossword Grid */
 .grid-container {
   display: grid;
-  gap: 1px;
+  gap: 2px;
   background: #cbd5e0;
   padding: 10px;
   border-radius: 10px;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin: 0 auto;
+  width: fit-content;
+  max-width: 100%;
+}
+
+@media (max-width: 768px) {
+  .grid-container {
+    padding: 5px;
+    gap: 1px;
+    width: fit-content;
+    margin: 0 auto;
+    display: grid;
+    place-items: center;
+  }
 }
 
 .grid-cell {
@@ -503,10 +536,7 @@ body {
     font-size: 18px;
   }
 
-  .grid-cell {
+  /* Grid cell sizes are now set dynamically by JavaScript */
-    width: 35px;
-    height: 35px;
-  }
 
   .input-cell input {
     font-size: 16px;

docker-compose.yml

@@ -1,25 +1,129 @@
 services:
-  word:
+  # 1) Desktop site
+  puzzle-desk:
     build:
-      context: /opt/apps/word
+      context: /opt/apps/puzzle
-      dockerfile: Dockerfile
+      dockerfile: Dockerfile.desktop
-    container_name: word
+    container_name: puzzle-desk
     restart: unless-stopped
-    networks:
+    networks: [ traefik_net ]
-      - traefik_net
+    volumes:
-      - default
+      - /opt/apps/puzzle/desk:/usr/share/nginx/html:ro
     labels:
       - "traefik.enable=true"
-      - "traefik.http.routers.word.rule=Host(`word.appmodel.nl`)"
+      - "traefik.http.routers.puzzle-desk.rule=Host(`desk-puzzle.appmodel.nl`)"
-      - "traefik.http.routers.word.entrypoints=websecure"
+      - "traefik.http.routers.puzzle-desk.entrypoints=websecure"
-      - "traefik.http.routers.word.tls=true"
+      - "traefik.http.routers.puzzle-desk.tls=true"
-      - "traefik.http.services.word.loadbalancer.server.port=80"
+      - "traefik.http.routers.puzzle-desk.tls.certresolver=letsencrypt"
-      - "traefik.http.routers.word-http.rule=Host(`word.appmodel.nl`)"
+      - "traefik.http.services.puzzle-desk.loadbalancer.server.port=80"
-      - "traefik.http.routers.word-http.entrypoints=web"
+      - "traefik.http.routers.puzzle-desk-http.rule=Host(`desk-puzzle.appmodel.nl`)"
-      - "traefik.http.routers.word-http.middlewares=word-https"
+      - "traefik.http.routers.puzzle-desk-http.entrypoints=web"
-      - "traefik.http.middlewares.word-https.redirectscheme.scheme=https"
+      - "traefik.http.routers.puzzle-desk-http.middlewares=redirect-to-https@file"
-      - "traefik.http.routers.auction.tls.certresolver=letsencrypt"
+
-      - "traefik.http.middlewares.word-https.redirectscheme.permanent=true"
+  # 2) Tablet site
+  puzzle-tab:
+    build:
+      context: /opt/apps/puzzle
+      dockerfile: Dockerfile.tablet
+    container_name: puzzle-tab
+    restart: unless-stopped
+    networks: [ traefik_net ]
+    volumes:
+      - /opt/apps/puzzle/tab:/usr/share/nginx/html:ro
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.puzzle-tab.rule=Host(`tab-puzzle.appmodel.nl`)"
+      - "traefik.http.routers.puzzle-tab.entrypoints=websecure"
+      - "traefik.http.routers.puzzle-tab.tls=true"
+      - "traefik.http.routers.puzzle-tab.tls.certresolver=letsencrypt"
+      - "traefik.http.services.puzzle-tab.loadbalancer.server.port=80"
+      - "traefik.http.routers.puzzle-tab-http.rule=Host(`tab-puzzle.appmodel.nl`)"
+      - "traefik.http.routers.puzzle-tab-http.entrypoints=web"
+      - "traefik.http.routers.puzzle-tab-http.middlewares=redirect-to-https@file"
+
+  # 3) Mobile site
+  puzzle-mobile:
+    build:
+      context: /opt/apps/puzzle
+      dockerfile: Dockerfile.mobile
+    container_name: puzzle-mobile
+    restart: unless-stopped
+    networks: [ traefik_net ]
+    volumes:
+      - /opt/apps/puzzle/mobile:/usr/share/nginx/html:ro
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.puzzle-mobile.rule=Host(`mobile-puzzle.appmodel.nl`)"
+      - "traefik.http.routers.puzzle-mobile.entrypoints=websecure"
+      - "traefik.http.routers.puzzle-mobile.tls=true"
+      - "traefik.http.routers.puzzle-mobile.tls.certresolver=letsencrypt"
+      - "traefik.http.services.puzzle-mobile.loadbalancer.server.port=80"
+      - "traefik.http.routers.puzzle-mobile-http.rule=Host(`mobile-puzzle.appmodel.nl`)"
+      - "traefik.http.routers.puzzle-mobile-http.entrypoints=web"
+      - "traefik.http.routers.puzzle-mobile-http.middlewares=redirect-to-https@file"
+
+  # 4) Entry domain: puzzle.appmodel.nl -> redirect to the right subdomain by User-Agent
+  # (this container never really serves content; it just hosts the redirect routers/middlewares)
+  puzzle-entry:
+    build:
+      context: /opt/apps/puzzle
+      dockerfile: Dockerfile
+    container_name: puzzle-entry
+    restart: unless-stopped
+    networks: [ traefik_net ]
+    labels:
+      - "traefik.enable=true"
+
+      # Redirect middlewares (302 while testing; switch to true for 301)
+      - "traefik.http.middlewares.pz-redir-mobile.redirectregex.regex=^https?://puzzle\\.appmodel\\.nl/(.*)"
+      - "traefik.http.middlewares.pz-redir-mobile.redirectregex.replacement=https://mobile-puzzle.appmodel.nl/$$1"
+      - "traefik.http.middlewares.pz-redir-mobile.redirectregex.permanent=false"
+
+      - "traefik.http.middlewares.pz-redir-tab.redirectregex.regex=^https?://puzzle\\.appmodel\\.nl/(.*)"
+      - "traefik.http.middlewares.pz-redir-tab.redirectregex.replacement=https://tab-puzzle.appmodel.nl/$$1"
+      - "traefik.http.middlewares.pz-redir-tab.redirectregex.permanent=false"
+
+      - "traefik.http.middlewares.pz-redir-desk.redirectregex.regex=^https?://puzzle\\.appmodel\\.nl/(.*)"
+      - "traefik.http.middlewares.pz-redir-desk.redirectregex.replacement=https://desk-puzzle.appmodel.nl/$$1"
+      - "traefik.http.middlewares.pz-redir-desk.redirectregex.permanent=false"
+
+      # HTTPS routers (priority matters)
+      - "traefik.http.routers.pz-mobile.rule=Host(`puzzle.appmodel.nl`) && HeadersRegexp(`User-Agent`,`(?i)(mobi|iphone|ipod|windows phone|android.*mobile)`)"
+      - "traefik.http.routers.pz-mobile.entrypoints=websecure"
+      - "traefik.http.routers.pz-mobile.priority=100"
+      - "traefik.http.routers.pz-mobile.middlewares=pz-redir-mobile"
+      - "traefik.http.routers.pz-mobile.tls=true"
+      - "traefik.http.routers.pz-mobile.tls.certresolver=letsencrypt"
+
+      - "traefik.http.routers.pz-tab.rule=Host(`puzzle.appmodel.nl`) && HeadersRegexp(`User-Agent`,`(?i)(ipad|tablet|kindle|silk|android(?!.*mobile))`)"
+      - "traefik.http.routers.pz-tab.entrypoints=websecure"
+      - "traefik.http.routers.pz-tab.priority=90"
+      - "traefik.http.routers.pz-tab.middlewares=pz-redir-tab"
+      - "traefik.http.routers.pz-tab.tls=true"
+      - "traefik.http.routers.pz-tab.tls.certresolver=letsencrypt"
+
+      - "traefik.http.routers.pz-desk.rule=Host(`puzzle.appmodel.nl`)"
+      - "traefik.http.routers.pz-desk.entrypoints=websecure"
+      - "traefik.http.routers.pz-desk.priority=10"
+      - "traefik.http.routers.pz-desk.middlewares=pz-redir-desk"
+      - "traefik.http.routers.pz-desk.tls=true"
+      - "traefik.http.routers.pz-desk.tls.certresolver=letsencrypt"
+
+      # Optional: HTTP routers too (prevents extra hop via your http-catchall)
+      - "traefik.http.routers.pz-mobile-http.rule=Host(`puzzle.appmodel.nl`) && HeadersRegexp(`User-Agent`,`(?i)(mobi|iphone|ipod|windows phone|android.*mobile)`)"
+      - "traefik.http.routers.pz-mobile-http.entrypoints=web"
+      - "traefik.http.routers.pz-mobile-http.priority=100"
+      - "traefik.http.routers.pz-mobile-http.middlewares=pz-redir-mobile"
+
+      - "traefik.http.routers.pz-tab-http.rule=Host(`puzzle.appmodel.nl`) && HeadersRegexp(`User-Agent`,`(?i)(ipad|tablet|kindle|silk|android(?!.*mobile))`)"
+      - "traefik.http.routers.pz-tab-http.entrypoints=web"
+      - "traefik.http.routers.pz-tab-http.priority=90"
+      - "traefik.http.routers.pz-tab-http.middlewares=pz-redir-tab"
+
+      - "traefik.http.routers.pz-desk-http.rule=Host(`puzzle.appmodel.nl`)"
+      - "traefik.http.routers.pz-desk-http.entrypoints=web"
+      - "traefik.http.routers.pz-desk-http.priority=10"
+      - "traefik.http.routers.pz-desk-http.middlewares=pz-redir-desk"
 
 networks:
   traefik_net:

mobile/404.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Page Not Found</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    * {
+      line-height: 1.2;
+      margin: 0;
+    }
+
+    html {
+      color: #888;
+      display: table;
+      font-family: sans-serif;
+      height: 100%;
+      text-align: center;
+      width: 100%;
+    }
+
+    body {
+      display: table-cell;
+      vertical-align: middle;
+      margin: 2em auto;
+    }
+
+    h1 {
+      color: #555;
+      font-size: 2em;
+      font-weight: 400;
+    }
+
+    p {
+      margin: 0 auto;
+      width: 280px;
+    }
+
+    @media only screen and (max-width: 280px) {
+
+      body,
+      p {
+        width: 95%;
+      }
+
+      h1 {
+        font-size: 1.5em;
+        margin: 0 0 0.3em;
+      }
+
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Page Not Found</h1>
+  <p>Sorry, but the page you were trying to view does not exist.</p>
+</body>
+
+</html>
+<!-- IE needs 512+ bytes: https://docs.microsoft.com/archive/blogs/ieinternals/friendly-http-error-pages -->

mobile/game.js

@@ -0,0 +1,954 @@
+// Kruiswoord Pro Game Logic - Fixed Version with Tablet Support and Correct Hints
+class KruiswoordProGame {
+  constructor() {
+    this.currentLevel = 1
+    this.coins = 100
+    this.hints = 3
+    this.currentPuzzle = null
+    this.userAnswers = {}
+    this.selectedCell = null
+    this.gridElement = document.getElementById('crosswordGrid')
+    this.isTablet = window.innerWidth >= 768
+
+    this.initializeGame()
+    this.setupEventListeners()
+    this.loadPuzzle(this.currentLevel)
+
+    // Handle window resize for tablet/desktop
+    window.addEventListener('resize', () => {
+      this.handleResize()
+    })
+  }
+
+  handleResize() {
+    const wasTablet = this.isTablet
+    this.isTablet = window.innerWidth >= 768
+
+    if (wasTablet !== this.isTablet && this.currentPuzzle) {
+      this.renderGrid() // Re-render for different screen size
+    }
+  }
+
+  initializeGame() {
+    this.updateUI()
+    this.setupTabletStyles()
+  }
+
+  setupTabletStyles() {
+    if (this.isTablet) {
+      document.body.classList.add('tablet-mode')
+    } else {
+      document.body.classList.remove('tablet-mode')
+    }
+  }
+
+  setupEventListeners() {
+    // Menu controls
+    document.getElementById('menuBtn').addEventListener('click', () => {
+      document.getElementById('sideMenu').classList.add('active')
+    })
+
+    document.getElementById('closeMenu').addEventListener('click', () => {
+      document.getElementById('sideMenu').classList.remove('active')
+    })
+
+    // Game controls
+    document.getElementById('checkBtn').addEventListener('click', () => {
+      this.checkAnswers()
+    })
+
+    document.getElementById('clearBtn').addEventListener('click', () => {
+      this.clearGrid()
+    })
+
+    document.getElementById('revealLetterBtn').addEventListener('click', () => {
+      this.showHintModal()
+    })
+
+    document.getElementById('skipBtn').addEventListener('click', () => {
+      this.skipPuzzle()
+    })
+
+    // Hint modal
+    document.getElementById('useHintBtn').addEventListener('click', () => {
+      this.useHint()
+    })
+
+    document.getElementById('cancelHintBtn').addEventListener('click', () => {
+      this.hideHintModal()
+    })
+
+    // Success modal
+    document.getElementById('nextPuzzleBtn').addEventListener('click', () => {
+      this.nextPuzzle()
+    })
+
+    document.getElementById('closeModalBtn').addEventListener('click', () => {
+      this.hideSuccessModal()
+    })
+
+    // Menu items
+    document.getElementById('dailyPuzzle').addEventListener('click', () => {
+      this.loadDailyPuzzle()
+    })
+
+    document.getElementById('levelSelect').addEventListener('click', () => {
+      this.showLevelSelect()
+    })
+
+    // Keyboard navigation
+    document.addEventListener('keydown', (e) => {
+      this.handleKeyboardInput(e)
+    })
+  }
+
+  // Load puzzles from external puzzleData.js
+  getDutchPuzzles() {
+    // Use puzzles from puzzleData.js if available
+    if (typeof DUTCH_PUZZLES !== 'undefined') {
+      return {
+        1: DUTCH_PUZZLES.level1,
+        2: DUTCH_PUZZLES.level2,
+        3: DUTCH_PUZZLES.level3
+      }
+    }
+
+    // Fallback puzzles
+    return {
+      1: {
+        grid      : [
+          ['H', 'A', 'A', 'S'],
+          ['#', '#', '#', '#'],
+          ['V', 'L', 'I', 'E', 'G'],
+          ['#', '#', '#', '#', '#']
+        ],
+        words     : [
+          {
+            word     : 'HAAS',
+            clue     : 'Snel dier',
+            startRow : 0,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'HAAS'
+          },
+          {
+            word     : 'VLIEG',
+            clue     : 'Insect',
+            startRow : 2,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'VLIEG'
+          }
+        ],
+        difficulty: 1
+      },
+      2: {
+        grid      : [
+          ['B', 'O', 'M', 'E', 'N'],
+          ['#', '#', '#', '#', '#'],
+          ['H', 'O', 'N', 'D', 'E'],
+          ['#', '#', '#', '#', '#']
+        ],
+        words     : [
+          {
+            word     : 'BOMEN',
+            clue     : 'Planten →',
+            startRow : 0,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'BOMEN'
+          },
+          {
+            word     : 'HONDE',
+            clue     : 'Huisdieren →',
+            startRow : 2,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'HONDE'
+          }
+        ],
+        difficulty: 2
+      },
+      3: {
+        grid      : [
+          ['R', 'E', 'G', 'E', 'N'],
+          ['#', '#', '#', '#', '#'],
+          ['S', 'N', 'E', 'E', 'U'],
+          ['#', '#', '#', '#', '#']
+        ],
+        words     : [
+          {
+            word     : 'REGEN',
+            clue     : 'Valt uit de lucht →',
+            startRow : 0,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'REGEN'
+          },
+          {
+            word     : 'SNEEU',
+            clue     : 'Witte vlokken →',
+            startRow : 2,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'SNEEU'
+          }
+        ],
+        difficulty: 3
+      },
+      // Tablet-optimized larger puzzles
+      4: {
+        grid           : [
+          ['H', 'A', 'A', 'S', '#', '#'],
+          ['#', '#', '#', 'T', '#', '#'],
+          ['V', 'L', 'I', 'E', 'G', '#'],
+          ['#', '#', '#', 'S', '#', '#'],
+          ['#', '#', '#', '#', '#', '#'],
+          ['#', '#', '#', '#', '#', '#']
+        ],
+        words          : [
+          {
+            word     : 'HAAS',
+            clue     : 'Snel dier →',
+            startRow : 0,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'HAAS'
+          },
+          {
+            word     : 'VLIEG',
+            clue     : 'Insect',
+            startRow : 2,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'VLIEG'
+          }
+        ],
+        difficulty     : 2,
+        tabletOptimized: true
+      }
+    }
+  }
+
+  loadPuzzle(level) {
+    const puzzles = this.getDutchPuzzles()
+    this.currentPuzzle = puzzles[level] || puzzles[1]
+    this.renderGrid()
+    this.userAnswers = {}
+    this.updateProgress()
+  }
+
+  calculateOptimalCellSize(rows, cols) {
+    // Get available viewport space with mobile-specific adjustments
+    const isMobile = window.innerWidth < 768
+    const headerHeight = isMobile ? 70 : 80
+    const progressHeight = isMobile ? 50 : 60
+    const controlsHeight = isMobile ? 100 : 120
+    const gridPadding = isMobile ? 5 : 10 // padding inside grid-container
+    const sectionPadding = isMobile ? 5 : 20 // padding of puzzle-section
+    const mainPadding = isMobile ? 10 : 20 // game-main padding
+    const totalPadding = (gridPadding * 2) + (sectionPadding * 2) + (mainPadding * 2) + (isMobile ? 20 : 0)
+    const gap = isMobile ? 1 : 2
+
+    const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - totalPadding
+    const availableWidth = window.innerWidth - totalPadding
+
+    // Calculate max cell size based on available space
+    // Account for gaps between cells
+    const totalGapHeight = (rows - 1) * gap
+    const totalGapWidth = (cols - 1) * gap
+
+    const maxCellFromHeight = (availableHeight - totalGapHeight) / rows
+    const maxCellFromWidth = (availableWidth - totalGapWidth) / cols
+
+    // Use the smaller dimension
+    let cellSize = Math.floor(Math.min(maxCellFromHeight, maxCellFromWidth))
+
+    // Set min/max bounds based on device - more conservative on mobile
+    const minSize = isMobile ? 28 : 40
+    const maxSize = isMobile ? 45 : 120
+    cellSize = Math.max(minSize, Math.min(maxSize, cellSize))
+
+    console.log('Grid calculation:', {
+      isMobile,
+      viewportWidth: window.innerWidth,
+      availableWidth,
+      availableHeight,
+      rows,
+      cols,
+      maxCellFromWidth,
+      maxCellFromHeight,
+      finalCellSize: cellSize,
+      totalGridWidth: cols * cellSize + totalGapWidth + (gridPadding * 2),
+      totalPadding
+    })
+
+    return cellSize
+  }
+
+  renderGrid() {
+    if (!this.currentPuzzle) return
+
+    const grid = this.currentPuzzle.grid
+    const words = this.currentPuzzle.words
+
+    this.gridElement.innerHTML = ''
+
+    // Set grid dimensions - add 1 column for clue cells on the left
+    const rows = grid.length
+    const cols = Math.max(...grid.map(row => row.length)) + 1
+
+    // Calculate available space and determine optimal cell size
+    const cellSize = this.calculateOptimalCellSize(rows, cols)
+
+    const isMobile = window.innerWidth < 768
+    const gap = isMobile ? 1 : 2
+
+    this.gridElement.style.gridTemplateColumns = `repeat(${ cols }, ${ cellSize }px)`
+    this.gridElement.style.gridTemplateRows = `repeat(${ rows }, ${ cellSize }px)`
+    this.gridElement.style.gap = `${gap}px`
+    this.gridElement.style.justifyContent = 'center'
+    this.gridElement.style.margin = '0 auto'
+
+    // Create grid cells with clue column
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        if (col === 0) {
+          // First column is for clues
+          const clueData = this.getClueForRow(row, words)
+          const cellElement = this.createClueCell(row, clueData, cellSize)
+          this.gridElement.appendChild(cellElement)
+        } else {
+          // Remaining columns are the actual grid (offset by 1)
+          const gridCol = col - 1
+          const cellValue = grid[row] && grid[row][gridCol] ? grid[row][gridCol] : '#'
+          const cellElement = this.createCellElement(cellValue, row, gridCol, words, cellSize)
+          this.gridElement.appendChild(cellElement)
+        }
+      }
+    }
+
+    this.attachCellListeners()
+  }
+
+  getClueForRow(row, words) {
+    // Find horizontal word that starts in this row
+    for (const word of words) {
+      if (word.direction === 'horizontal' && word.startRow === row) {
+        return {
+          clue: word.clue,
+          direction: 'horizontal'
+        }
+      }
+    }
+    return null
+  }
+
+  createClueCell(row, clueData, cellSize) {
+    const cellDiv = document.createElement('div')
+    cellDiv.className = 'grid-cell clue-cell'
+    cellDiv.style.width = `${ cellSize }px`
+    cellDiv.style.height = `${ cellSize }px`
+
+    if (clueData) {
+      // Has a clue for this row
+      const clueText = document.createElement('div')
+      clueText.className = 'clue-text'
+      clueText.textContent = clueData.clue
+
+      // Responsive font sizing based on cell size
+      const fontSize = Math.max(7, Math.min(12, cellSize / 6))
+      clueText.style.fontSize = `${fontSize}px`
+      clueText.style.lineHeight = '1.1'
+      clueText.style.padding = '2px'
+
+      const arrow = document.createElement('div')
+      arrow.className = 'arrow arrow-right'
+      arrow.textContent = '→'
+      const arrowSize = Math.max(12, Math.min(24, cellSize / 3))
+      arrow.style.fontSize = `${arrowSize}px`
+
+      cellDiv.appendChild(clueText)
+      cellDiv.appendChild(arrow)
+    } else {
+      // Empty clue cell
+      cellDiv.classList.add('blocked-cell')
+    }
+
+    return cellDiv
+  }
+
+  createCellElement(cellValue, row, col, words, cellSize) {
+    const cellDiv = document.createElement('div')
+    cellDiv.className = 'grid-cell'
+    cellDiv.dataset.row = row
+    cellDiv.dataset.col = col
+
+    // FIXED: Set consistent sizing
+    cellDiv.style.width = `${ cellSize }px`
+    cellDiv.style.height = `${ cellSize }px`
+
+    if (cellValue === '#') {
+      // Check if this is a clue cell (before second word in row)
+      const clueData = this.getClueForPosition(row, col, words)
+      if (clueData) {
+        // This is a clue cell for the second word
+        cellDiv.classList.add('clue-cell')
+
+        const clueText = document.createElement('div')
+        clueText.className = 'clue-text'
+        clueText.textContent = clueData.clue
+
+        // Responsive font sizing based on cell size
+        const fontSize = Math.max(7, Math.min(12, cellSize / 6))
+        clueText.style.fontSize = `${fontSize}px`
+        clueText.style.lineHeight = '1.1'
+        clueText.style.padding = '2px'
+
+        const arrow = document.createElement('div')
+        arrow.className = 'arrow arrow-right'
+        arrow.textContent = '→'
+        const arrowSize = Math.max(12, Math.min(24, cellSize / 3))
+        arrow.style.fontSize = `${arrowSize}px`
+
+        cellDiv.appendChild(clueText)
+        cellDiv.appendChild(arrow)
+      } else {
+        // Regular blocked cell
+        cellDiv.classList.add('blocked-cell')
+      }
+    } else {
+      // Letter cell - create input
+      if (this.isPartOfWord(row, col, words)) {
+        cellDiv.classList.add('input-cell')
+        const input = document.createElement('input')
+        input.type = 'text'
+        input.maxLength = 1
+        input.dataset.row = row
+        input.dataset.col = col
+
+        // Responsive font sizing based on cell size
+        const inputFontSize = Math.max(16, Math.min(36, cellSize * 0.5))
+        input.style.fontSize = `${inputFontSize}px`
+
+        // Add existing answer if available
+        const key = `${ row }-${ col }`
+        if (this.userAnswers[key]) {
+          input.value = this.userAnswers[key]
+        }
+
+        cellDiv.appendChild(input)
+      } else {
+        // Empty cell that's not part of any word
+        cellDiv.classList.add('blocked-cell')
+      }
+    }
+
+    return cellDiv
+  }
+
+  // FIXED: Check if cell is part of any word
+  isPartOfWord(row, col, words) {
+    for (const word of words) {
+      if (word.direction === 'horizontal') {
+        if (row === word.startRow && col >= word.startCol && col < word.startCol + word.answer.length) {
+          return true
+        }
+      } else if (word.direction === 'vertical') {
+        if (col === word.startCol && row >= word.startRow && row < word.startRow + word.answer.length) {
+          return true
+        }
+      }
+    }
+    return false
+  }
+
+  getClueForPosition(row, col, words) {
+    for (const word of words) {
+      if (word.direction === 'horizontal') {
+        // Horizontal clue appears one cell to the left of word start
+        if (word.startRow === row && word.startCol - 1 === col) {
+          return {
+            clue     : word.clue,
+            direction: word.direction
+          }
+        }
+      } else if (word.direction === 'vertical') {
+        // Vertical clue appears one cell above word start
+        if (word.startRow - 1 === row && word.startCol === col) {
+          return {
+            clue     : word.clue,
+            direction: word.direction
+          }
+        }
+      }
+    }
+    return null
+  }
+
+  attachCellListeners() {
+    const inputs = this.gridElement.querySelectorAll('input')
+
+    inputs.forEach(input => {
+      input.addEventListener('input', (e) => {
+        this.handleInput(e)
+      })
+
+      input.addEventListener('focus', (e) => {
+        this.selectCell(e.target)
+      })
+
+      input.addEventListener('click', (e) => {
+        this.selectCell(e.target)
+      })
+    })
+  }
+
+  handleInput(e) {
+    const input = e.target
+    const value = input.value.toUpperCase()
+    input.value = value
+
+    const row = parseInt(input.dataset.row)
+    const col = parseInt(input.dataset.col)
+    const key = `${ row }-${ col }`
+
+    this.userAnswers[key] = value
+
+    // FIXED: Smart navigation to next cell in the same word
+    if (value && value.length === 1) {
+      this.moveToNextInWord(input, row, col)
+    }
+
+    this.updateProgress()
+  }
+
+  // FIXED: Navigate to next cell in the same word, not just any next input
+  moveToNextInWord(currentInput, row, col) {
+    const currentWord = this.findWordContainingCell(row, col)
+    if (!currentWord) {
+      this.moveToNextCell(currentInput)
+      return
+    }
+
+    let nextRow = row
+    let nextCol = col
+
+    if (currentWord.direction === 'horizontal') {
+      nextCol++
+    } else {
+      nextRow++
+    }
+
+    // Check if next position is still in the same word
+    const nextInput = this.gridElement.querySelector(`input[data-row="${ nextRow }"][data-col="${ nextCol }"]`)
+    if (nextInput && this.isPartOfWord(nextRow, nextCol, this.currentPuzzle.words)) {
+      nextInput.focus()
+      nextInput.select()
+    } else {
+      // End of word, move to next available input
+      this.moveToNextCell(currentInput)
+    }
+  }
+
+  findWordContainingCell(row, col) {
+    for (const word of this.currentPuzzle.words) {
+      if (word.direction === 'horizontal') {
+        if (row === word.startRow && col >= word.startCol && col < word.startCol + word.answer.length) {
+          return word
+        }
+      } else if (word.direction === 'vertical') {
+        if (col === word.startCol && row >= word.startRow && row < word.startRow + word.answer.length) {
+          return word
+        }
+      }
+    }
+    return null
+  }
+
+  selectCell(input) {
+    // Remove previous selection
+    document.querySelectorAll('.grid-cell').forEach(cell => {
+      cell.classList.remove('active')
+    })
+
+    // Add selection to current cell
+    input.parentElement.classList.add('active')
+    this.selectedCell = input
+  }
+
+  // FIXED: Better navigation that respects word boundaries
+  moveToNextCell(currentInput) {
+    const inputs = Array.from(this.gridElement.querySelectorAll('input'))
+    const currentIndex = inputs.indexOf(currentInput)
+
+    if (currentIndex !== -1 && currentIndex < inputs.length - 1) {
+      const nextInput = inputs[currentIndex + 1]
+      nextInput.focus()
+      nextInput.select()
+    }
+  }
+
+  handleKeyboardInput(e) {
+    if (!this.selectedCell) return
+
+    const inputs = Array.from(this.gridElement.querySelectorAll('input'))
+    const currentIndex = inputs.indexOf(this.selectedCell)
+
+    if (currentIndex === -1) return
+
+    let targetIndex = currentIndex
+
+    switch (e.key) {
+    case 'ArrowUp':
+      const currentRow = parseInt(this.selectedCell.dataset.row)
+      const currentCol = parseInt(this.selectedCell.dataset.col)
+      const targetInput = this.findInputAbove(currentRow, currentCol)
+      if (targetInput) {
+        targetInput.focus()
+        targetInput.select()
+      }
+      break
+    case 'ArrowDown':
+      const targetInputDown = this.findInputBelow(currentRow, currentCol)
+      if (targetInputDown) {
+        targetInputDown.focus()
+        targetInputDown.select()
+      }
+      break
+    case 'ArrowLeft':
+      if (currentIndex > 0) {
+        targetIndex--
+        inputs[targetIndex].focus()
+        inputs[targetIndex].select()
+      }
+      break
+    case 'ArrowRight':
+      if (currentIndex < inputs.length - 1) {
+        targetIndex++
+        inputs[targetIndex].focus()
+        inputs[targetIndex].select()
+      }
+      break
+    case 'Backspace':
+      this.selectedCell.value = ''
+      const row = parseInt(this.selectedCell.dataset.row)
+      const col = parseInt(this.selectedCell.dataset.col)
+      delete this.userAnswers[`${ row }-${ col }`]
+      this.updateProgress()
+      break
+    }
+  }
+
+  findInputAbove(row, col) {
+    for (let r = row - 1; r >= 0; r--) {
+      const input = this.gridElement.querySelector(`input[data-row="${ r }"][data-col="${ col }"]`)
+      if (input) return input
+    }
+    return null
+  }
+
+  findInputBelow(row, col) {
+    const maxRow = Math.max(...Array.from(this.gridElement.querySelectorAll('input')).map(input => parseInt(input.dataset.row)))
+    for (let r = row + 1; r <= maxRow; r++) {
+      const input = this.gridElement.querySelector(`input[data-row="${ r }"][data-col="${ col }"]`)
+      if (input) return input
+    }
+    return null
+  }
+
+  checkAnswers() {
+    let correct = 0
+    let total = 0
+
+    const inputs = this.gridElement.querySelectorAll('input')
+    inputs.forEach(input => {
+      const row = parseInt(input.dataset.row)
+      const col = parseInt(input.dataset.col)
+      const key = `${ row }-${ col }`
+      const userAnswer = input.value.toUpperCase()
+
+      const correctAnswer = this.findCorrectAnswer(row, col)
+
+      if (correctAnswer) {
+        total++
+        if (userAnswer === correctAnswer) {
+          correct++
+          input.parentElement.classList.add('correct')
+          input.parentElement.classList.remove('incorrect')
+        } else if (userAnswer) {
+          input.parentElement.classList.add('incorrect')
+          input.parentElement.classList.remove('correct')
+        }
+      }
+    })
+
+    const percentage = total > 0 ? Math.round((correct / total) * 100) : 0
+
+    if (percentage === 100) {
+      this.showSuccess()
+    } else {
+      this.showFeedback(`Je hebt ${ correct } van de ${ total } letters correct (${ percentage }%)`)
+    }
+  }
+
+  findCorrectAnswer(row, col) {
+    for (const word of this.currentPuzzle.words) {
+      if (word.direction === 'horizontal') {
+        if (word.startRow === row && col >= word.startCol && col < word.startCol + word.answer.length) {
+          const letterIndex = col - word.startCol
+          return word.answer[letterIndex]
+        }
+      } else if (word.direction === 'vertical') {
+        if (word.startCol === col && row >= word.startRow && row < word.startRow + word.answer.length) {
+          const letterIndex = row - word.startRow
+          return word.answer[letterIndex]
+        }
+      }
+    }
+    return null
+  }
+
+  clearGrid() {
+    if (confirm('Weet je zeker dat je alle ingevulde letters wilt wissen?')) {
+      const inputs = this.gridElement.querySelectorAll('input')
+      inputs.forEach(input => {
+        input.value = ''
+        input.parentElement.classList.remove('correct', 'incorrect')
+      })
+
+      this.userAnswers = {}
+      this.updateProgress()
+      this.showFeedback('Raster gewist')
+    }
+  }
+
+  showHintModal() {
+    if (this.hints <= 0) {
+      this.showFeedback('Je hebt geen hints meer. Verdien hints door puzzels op te lossen!', 'error')
+      return
+    }
+
+    document.getElementById('hintModal').classList.add('active')
+  }
+
+  hideHintModal() {
+    document.getElementById('hintModal').classList.remove('active')
+  }
+
+  useHint() {
+    if (this.hints <= 0) return
+
+    const inputs = this.gridElement.querySelectorAll('input')
+    const emptyInputs = Array.from(inputs).filter(input => !input.value)
+
+    if (emptyInputs.length === 0) {
+      this.showFeedback('Alle letters zijn al ingevuld!', 'info')
+      this.hideHintModal()
+      return
+    }
+
+    // Randomly select an empty cell
+    const randomInput = emptyInputs[Math.floor(Math.random() * emptyInputs.length)]
+    const row = parseInt(randomInput.dataset.row)
+    const col = parseInt(randomInput.dataset.col)
+    const correctAnswer = this.findCorrectAnswer(row, col)
+
+    if (correctAnswer) {
+      randomInput.value = correctAnswer
+      const key = `${ row }-${ col }`
+      this.userAnswers[key] = correctAnswer
+
+      this.hints--
+      this.updateUI()
+      this.updateProgress()
+      this.showFeedback('Letter onthuld!')
+      this.hideHintModal()
+
+      // Check if puzzle is complete
+      this.checkIfComplete()
+    }
+  }
+
+  checkIfComplete() {
+    const inputs = this.gridElement.querySelectorAll('input')
+    let allFilled = true
+
+    inputs.forEach(input => {
+      if (!input.value) {
+        allFilled = false
+      }
+    })
+
+    if (allFilled) {
+      setTimeout(() => this.checkAnswers(), 500)
+    }
+  }
+
+  showSuccess() {
+    // Award rewards
+    this.coins += 50
+    this.hints += 1
+    this.updateUI()
+
+    document.getElementById('successModal').classList.add('active')
+  }
+
+  hideSuccessModal() {
+    document.getElementById('successModal').classList.remove('active')
+  }
+
+  nextPuzzle() {
+    this.hideSuccessModal()
+    this.currentLevel++
+    this.loadPuzzle(this.currentLevel)
+    this.showFeedback(`Niveau ${ this.currentLevel } geladen!`)
+  }
+
+  skipPuzzle() {
+    if (confirm('Weet je zeker dat je deze puzzel wilt overslaan?')) {
+      this.currentLevel++
+      this.loadPuzzle(this.currentLevel)
+      this.showFeedback('Puzzel overgeslagen')
+    }
+  }
+
+  loadDailyPuzzle() {
+    this.showFeedback('Dagelijkse puzzel wordt geladen...')
+    // Implement daily puzzle logic
+    document.getElementById('sideMenu').classList.remove('active')
+  }
+
+  showLevelSelect() {
+    this.showFeedback('Niveau selectie komt binnenkort!')
+    document.getElementById('sideMenu').classList.remove('active')
+  }
+
+  updateProgress() {
+    const inputs = this.gridElement.querySelectorAll('input')
+    let filled = 0
+    let total = 0
+
+    inputs.forEach(input => {
+      const row = parseInt(input.dataset.row)
+      const col = parseInt(input.dataset.col)
+      const correctAnswer = this.findCorrectAnswer(row, col)
+
+      if (correctAnswer) {
+        total++
+        if (input.value) {
+          filled++
+        }
+      }
+    })
+
+    const progress = total > 0 ? Math.round((filled / total) * 100) : 0
+
+    document.getElementById('progressFill').style.width = `${ progress }%`
+    document.getElementById('progressText').textContent = `${ progress }% voltooid`
+  }
+
+  updateUI() {
+    document.getElementById('coinsCount').textContent = this.coins
+    document.querySelector('.hint-count').textContent = this.hints
+    document.querySelector('.level-number').textContent = `Niveau ${ this.currentLevel }`
+  }
+
+  showFeedback(message, type = 'info') {
+    const feedback = document.createElement('div')
+    feedback.className = `feedback feedback-${ type }`
+    feedback.textContent = message
+
+    feedback.style.cssText = `
+            position: fixed;
+            top: 100px;
+            right: 20px;
+            padding: 15px 20px;
+            border-radius: 8px;
+            color: white;
+            font-weight: 600;
+            z-index: 1000;
+            animation: slideIn 0.3s ease;
+            max-width: 300px;
+            word-wrap: break-word;
+        `
+
+    switch (type) {
+    case 'error':
+      feedback.style.background = 'linear-gradient(135deg, #f56565, #e53e3e)'
+      break
+    case 'success':
+      feedback.style.background = 'linear-gradient(135deg, #48bb78, #38a169)'
+      break
+    default:
+      feedback.style.background = 'linear-gradient(135deg, #4299e1, #3182ce)'
+    }
+
+    document.body.appendChild(feedback)
+
+    setTimeout(() => {
+      feedback.style.animation = 'slideOut 0.3s ease'
+      setTimeout(() => {
+        if (feedback.parentNode) {
+          feedback.parentNode.removeChild(feedback)
+        }
+      }, 300)
+    }, 3000)
+  }
+}
+
+// Add CSS animations and tablet styles
+const style = document.createElement('style')
+style.textContent = `
+    @keyframes slideIn {
+        from { transform: translateX(100%); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+
+    @keyframes slideOut {
+        from { transform: translateX(0); opacity: 1; }
+        to { transform: translateX(100%); opacity: 0; }
+    }
+
+    /* Tablet Mode Styles */
+    .tablet-mode .grid-container {
+        max-width: 90vw;
+        margin: 0 auto;
+    }
+
+    .tablet-mode .puzzle-section {
+        padding: 30px;
+    }
+
+    @media (min-width: 768px) {
+        .app-container {
+            max-width: 100vw;
+        }
+
+        .game-main {
+            padding: 30px;
+        }
+
+        .bottom-controls {
+            max-width: 600px;
+            margin: 0 auto;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .grid-container {
+            transform: scale(1.1);
+            transform-origin: center;
+        }
+
+        .puzzle-section {
+            min-height: 70vh;
+        }
+    }
+`
+document.head.appendChild(style)
+
+// Initialize game when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  const game = new KruiswoordProGame()
+})

mobile/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 192 192"><path fill="#e08524" d="M75.3 73.4H18.4l45.3 34.3L48.3 163l46.1-32.3 48.2 34.6-16.9-58.3 44.9-33.6H115l-20.5-55-19.2 55z"/><path d="m96.7 18.8 18.2 8.2 16.5 44.3h-15.1L96.7 18.8zm-47 146 18.7 9.9 42.6-29.9-16.5-11.4-44.8 31.4zm79.1-56.8 17.4 9.4 18.6 60.1-19.7-11.3-16.3-58.2z"/><path d="m173.1 74.3 17.8 9.2-44.7 34-17.4-9.4 44.3-33.8z"/></svg>

mobile/index.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Kruiswoord Pro - Mobile</title>
+  <link rel="stylesheet" href="mobile.css">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+</head>
+<body>
+<div class="mobile-container">
+  <!-- Compact Header -->
+  <header class="mobile-header">
+    <button class="menu-icon" id="menuBtn">
+      <i class="fas fa-bars"></i>
+    </button>
+    <div class="header-info">
+      <span class="level">Niveau <span id="levelNum">1</span></span>
+      <div class="resources">
+        <span class="coins"><i class="fas fa-coins"></i> <span id="coinsCount">100</span></span>
+        <span class="hints"><i class="fas fa-lightbulb"></i> <span id="hintsCount">3</span></span>
+      </div>
+    </div>
+  </header>
+
+  <!-- Compact Progress -->
+  <div class="progress-compact">
+    <div class="progress-bar">
+      <div class="progress-fill" id="progressFill"></div>
+    </div>
+    <span class="progress-text" id="progressText">0%</span>
+  </div>
+
+  <!-- Grid Section -->
+  <div class="grid-section">
+    <div class="grid-wrapper" id="crosswordGrid">
+      <!-- Grid generated by JS -->
+    </div>
+  </div>
+
+  <!-- Compact Controls -->
+  <div class="mobile-controls">
+    <button class="control-btn" id="checkBtn">
+      <i class="fas fa-check"></i>
+      <span>Check</span>
+    </button>
+    <button class="control-btn" id="clearBtn">
+      <i class="fas fa-eraser"></i>
+      <span>Wis</span>
+    </button>
+    <button class="control-btn hint" id="hintBtn">
+      <i class="fas fa-eye"></i>
+      <span>Hint</span>
+    </button>
+    <button class="control-btn" id="skipBtn">
+      <i class="fas fa-forward"></i>
+      <span>Skip</span>
+    </button>
+  </div>
+
+  <!-- Simple Menu -->
+  <div class="side-menu" id="sideMenu">
+    <div class="menu-header">
+      <h3>Menu</h3>
+      <button class="close-menu" id="closeMenu">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+    <div class="menu-items">
+      <button class="menu-item" id="dailyPuzzle">
+        <i class="fas fa-calendar-day"></i> Dagelijkse Puzzel
+      </button>
+      <button class="menu-item" id="levelSelect">
+        <i class="fas fa-layer-group"></i> Kies Niveau
+      </button>
+    </div>
+  </div>
+
+  <!-- Success Modal -->
+  <div class="modal" id="successModal">
+    <div class="modal-content">
+      <div class="success-icon">
+        <i class="fas fa-trophy"></i>
+      </div>
+      <h2>Gefeliciteerd!</h2>
+      <p>+50 Munten | +1 Hint</p>
+      <button class="btn-primary" id="nextBtn">Volgende</button>
+    </div>
+  </div>
+
+  <!-- Hint Modal -->
+  <div class="modal" id="hintModal">
+    <div class="modal-content">
+      <h3>Hint Gebruiken?</h3>
+      <p>Kost 1 hint</p>
+      <div class="modal-btns">
+        <button class="btn-primary" id="useHintBtn">Ja</button>
+        <button class="btn-secondary" id="cancelHintBtn">Nee</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="puzzleData.js"></script>
+<script src="mobile.js"></script>
+</body>
+</html>

mobile/mobile.css

@@ -0,0 +1,403 @@
+/* Mobile-First Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  overflow-x: hidden;
+  touch-action: manipulation;
+}
+
+.mobile-container {
+  width: 100vw;
+  height: 100vh;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Compact Header */
+.mobile-header {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: white;
+  padding: 8px 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  flex-shrink: 0;
+}
+
+.menu-icon {
+  background: rgba(255,255,255,0.2);
+  border: none;
+  color: white;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.header-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.level {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.resources {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+}
+
+.coins, .hints {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: rgba(255,255,255,0.2);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+/* Compact Progress */
+.progress-compact {
+  background: #f8f9fa;
+  padding: 6px 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 1px solid #e9ecef;
+  flex-shrink: 0;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 6px;
+  background: #e9ecef;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #48bb78, #38a169);
+  width: 0%;
+  transition: width 0.3s ease;
+}
+
+.progress-text {
+  font-size: 11px;
+  font-weight: 600;
+  color: #4a5568;
+  min-width: 35px;
+}
+
+/* Grid Section - Optimized for Mobile */
+.grid-section {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 5px 5px 0 5px;
+  overflow: hidden;
+  background: #f8f9fa;
+}
+
+.grid-wrapper {
+  display: grid;
+  background: #a0aec0;
+  padding: 3px;
+  border-radius: 6px;
+  gap: 1px;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.grid-cell {
+  background: white;
+  border: 1px solid #cbd5e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.grid-cell.clue-cell {
+  background: linear-gradient(135deg, #4a5568, #2d3748);
+  color: white;
+  padding: 2px;
+  font-size: 7px;
+  font-weight: 600;
+  line-height: 1.1;
+  text-align: left;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+
+.clue-text {
+  font-size: 7px;
+  line-height: 1.1;
+  word-wrap: break-word;
+  width: 100%;
+  z-index: 1;
+}
+
+.arrow {
+  position: absolute;
+  color: #4299e1;
+  font-weight: bold;
+  font-size: 12px;
+}
+
+.arrow-right {
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.grid-cell.blocked-cell {
+  background: #2d3748;
+  border-color: #2d3748;
+}
+
+.grid-cell.input-cell {
+  background: white;
+}
+
+.grid-cell.input-cell.active {
+  background: #ebf8ff;
+  border-color: #3182ce;
+  box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.3);
+}
+
+.grid-cell.correct {
+  background: #c6f6d5;
+  border-color: #48bb78;
+}
+
+.grid-cell.incorrect {
+  background: #fed7d7;
+  border-color: #f56565;
+}
+
+.grid-cell input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  text-align: center;
+  font-weight: bold;
+  color: #2d3748;
+  text-transform: uppercase;
+  font-size: inherit;
+  outline: none;
+}
+
+/* Mobile Controls */
+.mobile-controls {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+  padding: 8px;
+  background: white;
+  border-top: 1px solid #e9ecef;
+  flex-shrink: 0;
+}
+
+.control-btn {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 10px;
+  transition: transform 0.2s;
+}
+
+.control-btn:active {
+  transform: scale(0.95);
+}
+
+.control-btn i {
+  font-size: 16px;
+}
+
+.control-btn.hint {
+  background: linear-gradient(135deg, #ed8936, #dd6b20);
+}
+
+/* Side Menu */
+.side-menu {
+  position: fixed;
+  top: 0;
+  left: -250px;
+  width: 250px;
+  height: 100vh;
+  background: white;
+  box-shadow: 2px 0 10px rgba(0,0,0,0.2);
+  transition: left 0.3s ease;
+  z-index: 1000;
+}
+
+.side-menu.active {
+  left: 0;
+}
+
+.menu-header {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: white;
+  padding: 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.close-menu {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.menu-items {
+  padding: 10px 0;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 15px;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.2s;
+}
+
+.menu-item:active {
+  background: #f8f9fa;
+}
+
+.menu-item i {
+  width: 18px;
+  color: #4facfe;
+}
+
+/* Modals */
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.6);
+  z-index: 2000;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
+
+.modal.active {
+  display: flex;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 16px;
+  padding: 24px;
+  text-align: center;
+  max-width: 320px;
+  width: 100%;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+}
+
+.success-icon {
+  font-size: 48px;
+  color: #48bb78;
+  margin-bottom: 12px;
+}
+
+.modal-content h2 {
+  color: #2d3748;
+  margin-bottom: 8px;
+  font-size: 20px;
+}
+
+.modal-content h3 {
+  color: #2d3748;
+  margin-bottom: 12px;
+  font-size: 18px;
+}
+
+.modal-content p {
+  color: #4a5568;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.modal-btns {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #48bb78, #38a169);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 20px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+  flex: 1;
+}
+
+.btn-secondary {
+  background: #e2e8f0;
+  color: #4a5568;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 20px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+  flex: 1;
+}
+
+.btn-primary:active,
+.btn-secondary:active {
+  transform: scale(0.98);
+}

mobile/mobile.js

@@ -0,0 +1,452 @@
+// Mobile-Optimized Crossword Game
+class MobileCrosswordGame {
+  constructor() {
+    this.currentLevel = 1
+    this.coins = 100
+    this.hints = 3
+    this.currentPuzzle = null
+    this.userAnswers = {}
+    this.selectedCell = null
+    this.gridElement = document.getElementById('crosswordGrid')
+
+    this.init()
+  }
+
+  init() {
+    this.loadPuzzle(this.currentLevel)
+    this.setupEventListeners()
+    this.updateUI()
+  }
+
+  setupEventListeners() {
+    // Menu
+    document.getElementById('menuBtn').addEventListener('click', () => {
+      document.getElementById('sideMenu').classList.add('active')
+    })
+    document.getElementById('closeMenu').addEventListener('click', () => {
+      document.getElementById('sideMenu').classList.remove('active')
+    })
+
+    // Controls
+    document.getElementById('checkBtn').addEventListener('click', () => this.checkAnswers())
+    document.getElementById('clearBtn').addEventListener('click', () => this.clearGrid())
+    document.getElementById('hintBtn').addEventListener('click', () => this.showHintModal())
+    document.getElementById('skipBtn').addEventListener('click', () => this.skipPuzzle())
+
+    // Modals
+    document.getElementById('useHintBtn').addEventListener('click', () => this.useHint())
+    document.getElementById('cancelHintBtn').addEventListener('click', () => this.hideHintModal())
+    document.getElementById('nextBtn').addEventListener('click', () => this.nextPuzzle())
+
+    // Menu items
+    document.getElementById('dailyPuzzle').addEventListener('click', () => {
+      this.showFeedback('Dagelijkse puzzel komt binnenkort!')
+      document.getElementById('sideMenu').classList.remove('active')
+    })
+    document.getElementById('levelSelect').addEventListener('click', () => {
+      this.showFeedback('Niveau selectie komt binnenkort!')
+      document.getElementById('sideMenu').classList.remove('active')
+    })
+  }
+
+  loadPuzzle(level) {
+    // Use puzzles from puzzleData.js
+    if (typeof DUTCH_PUZZLES !== 'undefined') {
+      this.currentPuzzle = DUTCH_PUZZLES[`level${level}`] || DUTCH_PUZZLES.level1
+    }
+
+    this.userAnswers = {}
+    this.renderGrid()
+    this.updateProgress()
+    this.updateUI()
+  }
+
+  renderGrid() {
+    if (!this.currentPuzzle) return
+
+    const grid = this.currentPuzzle.grid
+    const words = this.currentPuzzle.words
+
+    this.gridElement.innerHTML = ''
+
+    // Calculate grid dimensions (add 1 column for clues)
+    const rows = grid.length
+    const cols = Math.max(...grid.map(row => row.length)) + 1
+
+    // Calculate optimal cell size for mobile
+    const cellSize = this.calculateCellSize(rows, cols)
+
+    // Set grid styles
+    this.gridElement.style.gridTemplateColumns = `repeat(${cols}, ${cellSize}px)`
+    this.gridElement.style.gridTemplateRows = `repeat(${rows}, ${cellSize}px)`
+
+    // Create grid cells
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        if (col === 0) {
+          // First column: clue cells
+          const clueData = this.getClueForRow(row, words)
+          this.gridElement.appendChild(this.createClueCell(clueData, cellSize))
+        } else {
+          // Data columns
+          const gridCol = col - 1
+          const cellValue = grid[row]?.[gridCol] || '#'
+          this.gridElement.appendChild(this.createCell(cellValue, row, gridCol, words, cellSize))
+        }
+      }
+    }
+
+    this.attachCellListeners()
+  }
+
+  calculateCellSize(rows, cols) {
+    // Mobile-specific calculation - maximize grid size
+    const headerHeight = 50
+    const progressHeight = 35
+    const controlsHeight = 70
+    const padding = 16
+
+    const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - padding
+    const availableWidth = window.innerWidth - padding
+
+    const maxFromHeight = Math.floor(availableHeight / rows)
+    const maxFromWidth = Math.floor(availableWidth / cols)
+
+    let cellSize = Math.min(maxFromHeight, maxFromWidth)
+
+    // Allow larger cells on mobile - 32-50px range
+    cellSize = Math.max(32, Math.min(50, cellSize))
+
+    console.log('Mobile grid:', {
+      availableHeight,
+      availableWidth,
+      rows,
+      cols,
+      cellSize,
+      totalGridHeight: rows * cellSize,
+      totalGridWidth: cols * cellSize
+    })
+
+    return cellSize
+  }
+
+  getClueForRow(row, words) {
+    return words.find(w => w.direction === 'horizontal' && w.startRow === row)
+  }
+
+  createClueCell(clueData, cellSize) {
+    const cell = document.createElement('div')
+    cell.className = 'grid-cell clue-cell'
+    cell.style.width = `${cellSize}px`
+    cell.style.height = `${cellSize}px`
+
+    if (clueData) {
+      const text = document.createElement('div')
+      text.className = 'clue-text'
+      text.textContent = clueData.clue
+
+      const arrow = document.createElement('div')
+      arrow.className = 'arrow arrow-right'
+      arrow.textContent = '→'
+
+      cell.appendChild(text)
+      cell.appendChild(arrow)
+    } else {
+      cell.classList.add('blocked-cell')
+    }
+
+    return cell
+  }
+
+  createCell(value, row, col, words, cellSize) {
+    const cell = document.createElement('div')
+    cell.className = 'grid-cell'
+    cell.style.width = `${cellSize}px`
+    cell.style.height = `${cellSize}px`
+    cell.dataset.row = row
+    cell.dataset.col = col
+
+    if (value === '#') {
+      // Check if it's a clue cell for second word
+      const clueData = this.getClueAtPosition(row, col, words)
+      if (clueData) {
+        cell.classList.add('clue-cell')
+
+        const text = document.createElement('div')
+        text.className = 'clue-text'
+        text.textContent = clueData.clue
+
+        const arrow = document.createElement('div')
+        arrow.className = 'arrow arrow-right'
+        arrow.textContent = '→'
+
+        cell.appendChild(text)
+        cell.appendChild(arrow)
+      } else {
+        cell.classList.add('blocked-cell')
+      }
+    } else {
+      // Input cell
+      cell.classList.add('input-cell')
+      const input = document.createElement('input')
+      input.type = 'text'
+      input.maxLength = 1
+      input.setAttribute('inputmode', 'text')
+      input.dataset.row = row
+      input.dataset.col = col
+
+      const fontSize = Math.max(14, Math.min(22, cellSize * 0.5))
+      input.style.fontSize = `${fontSize}px`
+
+      const key = `${row}-${col}`
+      if (this.userAnswers[key]) {
+        input.value = this.userAnswers[key]
+      }
+
+      cell.appendChild(input)
+    }
+
+    return cell
+  }
+
+  getClueAtPosition(row, col, words) {
+    for (const word of words) {
+      if (word.direction === 'horizontal' && word.startRow === row && word.startCol - 1 === col) {
+        return word
+      }
+    }
+    return null
+  }
+
+  attachCellListeners() {
+    const inputs = this.gridElement.querySelectorAll('input')
+
+    inputs.forEach(input => {
+      input.addEventListener('input', (e) => this.handleInput(e))
+      input.addEventListener('focus', (e) => this.selectCell(e.target))
+    })
+  }
+
+  handleInput(e) {
+    const input = e.target
+    const value = input.value.toUpperCase()
+    input.value = value
+
+    const row = parseInt(input.dataset.row)
+    const col = parseInt(input.dataset.col)
+    const key = `${row}-${col}`
+
+    this.userAnswers[key] = value
+
+    if (value && value.length === 1) {
+      this.moveToNextCell(input)
+    }
+
+    this.updateProgress()
+  }
+
+  selectCell(input) {
+    document.querySelectorAll('.grid-cell.input-cell').forEach(cell => {
+      cell.classList.remove('active')
+    })
+    input.parentElement.classList.add('active')
+    this.selectedCell = input
+  }
+
+  moveToNextCell(currentInput) {
+    const inputs = Array.from(this.gridElement.querySelectorAll('input'))
+    const currentIndex = inputs.indexOf(currentInput)
+
+    if (currentIndex !== -1 && currentIndex < inputs.length - 1) {
+      const nextInput = inputs[currentIndex + 1]
+      nextInput.focus()
+    }
+  }
+
+  checkAnswers() {
+    let correct = 0
+    let total = 0
+
+    const inputs = this.gridElement.querySelectorAll('input')
+    inputs.forEach(input => {
+      const row = parseInt(input.dataset.row)
+      const col = parseInt(input.dataset.col)
+      const userAnswer = input.value.toUpperCase()
+      const correctAnswer = this.getCorrectAnswer(row, col)
+
+      if (correctAnswer) {
+        total++
+        const cell = input.parentElement
+        if (userAnswer === correctAnswer) {
+          correct++
+          cell.classList.add('correct')
+          cell.classList.remove('incorrect')
+        } else if (userAnswer) {
+          cell.classList.add('incorrect')
+          cell.classList.remove('correct')
+        }
+      }
+    })
+
+    const percentage = total > 0 ? Math.round((correct / total) * 100) : 0
+
+    if (percentage === 100) {
+      this.showSuccess()
+    } else {
+      this.showFeedback(`${correct}/${total} correct (${percentage}%)`)
+    }
+  }
+
+  getCorrectAnswer(row, col) {
+    for (const word of this.currentPuzzle.words) {
+      if (word.direction === 'horizontal') {
+        if (word.startRow === row && col >= word.startCol && col < word.startCol + word.answer.length) {
+          return word.answer[col - word.startCol]
+        }
+      } else if (word.direction === 'vertical') {
+        if (word.startCol === col && row >= word.startRow && row < word.startRow + word.answer.length) {
+          return word.answer[row - word.startRow]
+        }
+      }
+    }
+    return null
+  }
+
+  clearGrid() {
+    if (confirm('Alles wissen?')) {
+      this.userAnswers = {}
+      const inputs = this.gridElement.querySelectorAll('input')
+      inputs.forEach(input => {
+        input.value = ''
+        input.parentElement.classList.remove('correct', 'incorrect')
+      })
+      this.updateProgress()
+      this.showFeedback('Gewist')
+    }
+  }
+
+  showHintModal() {
+    if (this.hints <= 0) {
+      this.showFeedback('Geen hints meer!')
+      return
+    }
+    document.getElementById('hintModal').classList.add('active')
+  }
+
+  hideHintModal() {
+    document.getElementById('hintModal').classList.remove('active')
+  }
+
+  useHint() {
+    if (this.hints <= 0) return
+
+    const inputs = Array.from(this.gridElement.querySelectorAll('input'))
+    const emptyInputs = inputs.filter(input => !input.value)
+
+    if (emptyInputs.length === 0) {
+      this.showFeedback('Alles al ingevuld!')
+      this.hideHintModal()
+      return
+    }
+
+    const randomInput = emptyInputs[Math.floor(Math.random() * emptyInputs.length)]
+    const row = parseInt(randomInput.dataset.row)
+    const col = parseInt(randomInput.dataset.col)
+    const correctAnswer = this.getCorrectAnswer(row, col)
+
+    if (correctAnswer) {
+      randomInput.value = correctAnswer
+      this.userAnswers[`${row}-${col}`] = correctAnswer
+
+      this.hints--
+      this.updateUI()
+      this.updateProgress()
+      this.showFeedback('Letter onthuld!')
+      this.hideHintModal()
+    }
+  }
+
+  showSuccess() {
+    this.coins += 50
+    this.hints += 1
+    this.updateUI()
+    document.getElementById('successModal').classList.add('active')
+  }
+
+  nextPuzzle() {
+    document.getElementById('successModal').classList.remove('active')
+    this.currentLevel++
+    this.loadPuzzle(this.currentLevel)
+    this.showFeedback(`Niveau ${this.currentLevel}`)
+  }
+
+  skipPuzzle() {
+    if (confirm('Overslaan?')) {
+      this.currentLevel++
+      this.loadPuzzle(this.currentLevel)
+      this.showFeedback('Overgeslagen')
+    }
+  }
+
+  updateProgress() {
+    const inputs = this.gridElement.querySelectorAll('input')
+    let filled = 0
+    let total = 0
+
+    inputs.forEach(input => {
+      total++
+      if (input.value) filled++
+    })
+
+    const progress = total > 0 ? Math.round((filled / total) * 100) : 0
+    document.getElementById('progressFill').style.width = `${progress}%`
+    document.getElementById('progressText').textContent = `${progress}%`
+  }
+
+  updateUI() {
+    document.getElementById('coinsCount').textContent = this.coins
+    document.getElementById('hintsCount').textContent = this.hints
+    document.getElementById('levelNum').textContent = this.currentLevel
+  }
+
+  showFeedback(message) {
+    // Simple alert for mobile
+    const feedback = document.createElement('div')
+    feedback.style.cssText = `
+      position: fixed;
+      top: 60px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(0,0,0,0.8);
+      color: white;
+      padding: 10px 20px;
+      border-radius: 20px;
+      font-size: 14px;
+      z-index: 9999;
+      animation: fadeInOut 2s ease;
+    `
+    feedback.textContent = message
+    document.body.appendChild(feedback)
+
+    setTimeout(() => {
+      feedback.remove()
+    }, 2000)
+  }
+}
+
+// Add fade animation
+const style = document.createElement('style')
+style.textContent = `
+  @keyframes fadeInOut {
+    0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
+    20% { opacity: 1; transform: translateX(-50%) translateY(0); }
+    80% { opacity: 1; transform: translateX(-50%) translateY(0); }
+    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
+  }
+`
+document.head.appendChild(style)
+
+// Initialize game
+document.addEventListener('DOMContentLoaded', () => {
+  new MobileCrosswordGame()
+})

mobile/puzzleData.js

@@ -0,0 +1,244 @@
+// Level 4 - 9x8 (Nature & Daily Words)
+const level1 = {
+  grid: [
+    ['B','O','M','E','N','#','Z','O','N'],
+    ['H','A','A','S','#','D','O','R','P'],
+    ['H','O','N','D','#','O','P','E','N'],
+    ['W','I','N','D','#','N','E','S','T'],
+    ['W','O','L','K','#','D','U','I','F'],
+    ['S','T','E','R','#','E','E','N','D'],
+    ['M','A','A','N','#','R','E','U','S'],
+    ['R','E','G','E','N','#','V','I','S']
+  ],
+  words: [
+    // horizontaal
+    { word: 'BOMEN', clue: 'Planten', startRow: 0, startCol: 0, direction: 'horizontal', answer: 'BOMEN' },
+    { word: 'ZON',   clue: 'Ster aan de hemel', startRow: 0, startCol: 6, direction: 'horizontal', answer: 'ZON' },
+
+    { word: 'HAAS',  clue: 'Snel dier', startRow: 1, startCol: 0, direction: 'horizontal', answer: 'HAAS' },
+    { word: 'DORP',  clue: 'Kleine plaats', startRow: 1, startCol: 5, direction: 'horizontal', answer: 'DORP' },
+
+    { word: 'HOND',  clue: 'Huisdier', startRow: 2, startCol: 0, direction: 'horizontal', answer: 'HOND' },
+    { word: 'OPEN',  clue: 'Niet dicht', startRow: 2, startCol: 5, direction: 'horizontal', answer: 'OPEN' },
+
+    { word: 'WIND',  clue: 'Luchtbeweging', startRow: 3, startCol: 0, direction: 'horizontal', answer: 'WIND' },
+    { word: 'NEST',  clue: 'Thuis van een vogel', startRow: 3, startCol: 5, direction: 'horizontal', answer: 'NEST' },
+
+    { word: 'WOLK',  clue: 'In de lucht', startRow: 4, startCol: 0, direction: 'horizontal', answer: 'WOLK' },
+    { word: 'DUIF',  clue: 'Stadsvogel', startRow: 4, startCol: 5, direction: 'horizontal', answer: 'DUIF' },
+
+    { word: 'STER',  clue: 'Hemellichaam', startRow: 5, startCol: 0, direction: 'horizontal', answer: 'STER' },
+    { word: 'EEND',  clue: 'Watervogel', startRow: 5, startCol: 5, direction: 'horizontal', answer: 'EEND' },
+
+    { word: 'MAAN',  clue: 'Nachthemel', startRow: 6, startCol: 0, direction: 'horizontal', answer: 'MAAN' },
+    { word: 'REUS',  clue: 'Gigant', startRow: 6, startCol: 5, direction: 'horizontal', answer: 'REUS' },
+
+    { word: 'REGEN', clue: 'Valt uit de lucht', startRow: 7, startCol: 0, direction: 'horizontal', answer: 'REGEN' },
+    { word: 'VIS',   clue: 'Zwemt in water', startRow: 7, startCol: 6, direction: 'horizontal', answer: 'VIS' },
+
+    // verticaal (spine)
+    { word: 'DONDER', clue: 'Weerverschijnsel', startRow: 1, startCol: 5, direction: 'vertical', answer: 'DONDER' }
+  ],
+  difficulty: 3,
+  rewards: { coins: 125, stars: 4, hints: 1 }
+};
+
+// Dutch Swedish-style Crossword Puzzles Database
+const DUTCH_PUZZLES = {
+  // Level 1 - Easy
+  level1,
+  level0: {
+    grid: [
+      ['#','#', '#', '#', '#'],
+      ['#','H', 'A', 'A', 'S'],
+      ['#','#', '#', '#', 'T'],
+      ['#','V', 'L', 'I', 'E', 'G'],
+      ['#','#', '#', '#', 'S']
+    ],
+    words: [
+      {
+        word: 'HAAS',
+        clue: 'Snel dier',
+        startRow: 0,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'HAAS'
+      },
+      {
+        word: 'VLIEG',
+        clue: 'Insect',
+        startRow: 2,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'VLIEG'
+      },
+      {
+        word: 'AT',
+        clue: 'Kleine woord',
+        startRow: 0,
+        startCol: 2,
+        direction: 'vertical',
+        answer: 'AT'
+      }
+    ],
+    difficulty: 1,
+    rewards: { coins: 50, stars: 3, hints: 1 }
+  },
+
+  // Level 2 - Medium Easy
+  level2: {
+    grid: [
+      ['B', 'O', 'M', 'E', 'N'],
+      ['#', '#', '#', '#', 'D'],
+      ['H', 'O', 'N', 'D', 'E'],
+      ['#', '#', '#', '#', 'R']
+    ],
+    words: [
+      {
+        word: 'BOMEN',
+        clue: 'Planten',
+        startRow: 0,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'BOMEN'
+      },
+      {
+        word: 'HONDE',
+        clue: 'Huisdieren',
+        startRow: 2,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'HONDE'
+      },
+      {
+        word: 'NE',
+        clue: 'Nee afkorting',
+        startRow: 0,
+        startCol: 4,
+        direction: 'vertical',
+        answer: 'NE'
+      }
+    ],
+    difficulty: 2,
+    rewards: { coins: 75, stars: 3, hints: 1 }
+  },
+
+  // Level 3 - Weather Theme
+  level3: {
+    grid: [
+      ['R', 'E', 'G', 'E', 'N'],
+      ['#', '#', '#', '#', 'B'],
+      ['S', 'N', 'E', 'E', 'U'],
+      ['#', '#', '#', '#', 'W']
+    ],
+    words: [
+      {
+        word: 'REGEN',
+        clue: 'Valt uit de lucht',
+        startRow: 0,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'REGEN'
+      },
+      {
+        word: 'SNEEU',
+        clue: 'Witte vlokken',
+        startRow: 2,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'SNEEU'
+      },
+      {
+        word: 'NB',
+        clue: 'Nota bene',
+        startRow: 0,
+        startCol: 4,
+        direction: 'vertical',
+        answer: 'NB'
+      }
+    ],
+    difficulty: 3,
+    rewards: { coins: 100, stars: 3, hints: 1 }
+  },
+
+  // Daily Puzzle Template
+  daily: {
+    grid: [
+      ['Z', 'O', 'N', 'N', 'E'],
+      ['#', '#', '#', '#', 'D'],
+      ['M', 'A', 'A', 'N', 'D'],
+      ['#', '#', '#', '#', 'G']
+    ],
+    words: [
+      {
+        word: 'ZONNE',
+        clue: 'Daglicht',
+        startRow: 0,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'ZONNE'
+      },
+      {
+        word: 'MAAND',
+        clue: 'Tijdseenheid',
+        startRow: 2,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'MAAND'
+      },
+      {
+        word: 'ND',
+        clue: 'Noord',
+        startRow: 0,
+        startCol: 4,
+        direction: 'vertical',
+        answer: 'ND'
+      }
+    ],
+    difficulty: 2,
+    rewards: { coins: 150, stars: 5, hints: 2 },
+    dailyBonus: true
+  }
+};
+
+// Word Database for hints and validation
+const DUTCH_WORD_DATABASE = {
+  animals: [
+    { word: 'HAAS', clue: 'Snel dier' },
+    { word: 'HOND', clue: 'Huisdier' },
+    { word: 'KAT', clue: 'Katachtige' },
+    { word: 'VLIEG', clue: 'Insect' },
+    { word: 'VIS', clue: 'Zwemt in water' },
+    { word: 'MUIS', clue: 'Klein dier' },
+    { word: 'PAARD', clue: 'Rijdier' },
+    { word: 'KIP', clue: 'Legt eieren' },
+    { word: 'EEL', clue: 'Lang dier' }
+  ],
+  nature: [
+    { word: 'BOMEN', clue: 'Planten' },
+    { word: 'REGEN', clue: 'Valt uit de lucht' },
+    { word: 'SNEEU', clue: 'Witte vlokken' },
+    { word: 'DONDER', clue: 'Weer verschijnsel' },
+    { word: 'BLIKSEM', clue: 'Lichtflits' },
+    { word: 'MAAND', clue: 'Satelliet' },
+    { word: 'STER', clue: 'Hemellichaam' },
+    { word: 'WOLK', clue: 'Watten in lucht' },
+    { word: 'WIND', clue: 'Luchtbeweging' },
+    { word: 'ZON', clue: 'Ster' }
+  ],
+  common: [
+    { word: 'AT', clue: 'Kleine woord' },
+    { word: 'NE', clue: 'Nee afkorting' },
+    { word: 'NB', clue: 'Nota bene' },
+    { word: 'ND', clue: 'Noord' },
+    { word: 'EN', clue: 'En' },
+    { word: 'ER', clue: 'Er' },
+    { word: 'IN', clue: 'In' },
+    { word: 'OP', clue: 'Op' }
+  ]
+};
+
+// Export for use in game logic
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { DUTCH_PUZZLES, DUTCH_WORD_DATABASE };
+}

nginx.conf

@@ -10,9 +10,14 @@ server {
         try_files $uri $uri.html $uri/ =404;
     }
 
-    # Optional: Redirect .html URLs to clean URLs
+    # Don't redirect mobile.html to allow device-specific routing
-    if ($request_uri ~ ^/(.*)\.html(\?|$)) {
+    # Skip the .html redirect for mobile.html and index.html
-        return 301 /$1$2;
+    location = /mobile.html {
+        try_files /mobile.html =404;
+    }
+
+    location = /index.html {
+        try_files /index.html =404;
     }
 
     # Gzip compression for better performance

tablet/404.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Page Not Found</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    * {
+      line-height: 1.2;
+      margin: 0;
+    }
+
+    html {
+      color: #888;
+      display: table;
+      font-family: sans-serif;
+      height: 100%;
+      text-align: center;
+      width: 100%;
+    }
+
+    body {
+      display: table-cell;
+      vertical-align: middle;
+      margin: 2em auto;
+    }
+
+    h1 {
+      color: #555;
+      font-size: 2em;
+      font-weight: 400;
+    }
+
+    p {
+      margin: 0 auto;
+      width: 280px;
+    }
+
+    @media only screen and (max-width: 280px) {
+
+      body,
+      p {
+        width: 95%;
+      }
+
+      h1 {
+        font-size: 1.5em;
+        margin: 0 0 0.3em;
+      }
+
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Page Not Found</h1>
+  <p>Sorry, but the page you were trying to view does not exist.</p>
+</body>
+
+</html>
+<!-- IE needs 512+ bytes: https://docs.microsoft.com/archive/blogs/ieinternals/friendly-http-error-pages -->

tablet/game.js

@@ -0,0 +1,954 @@
+// Kruiswoord Pro Game Logic - Fixed Version with Tablet Support and Correct Hints
+class KruiswoordProGame {
+  constructor() {
+    this.currentLevel = 1
+    this.coins = 100
+    this.hints = 3
+    this.currentPuzzle = null
+    this.userAnswers = {}
+    this.selectedCell = null
+    this.gridElement = document.getElementById('crosswordGrid')
+    this.isTablet = window.innerWidth >= 768
+
+    this.initializeGame()
+    this.setupEventListeners()
+    this.loadPuzzle(this.currentLevel)
+
+    // Handle window resize for tablet/desktop
+    window.addEventListener('resize', () => {
+      this.handleResize()
+    })
+  }
+
+  handleResize() {
+    const wasTablet = this.isTablet
+    this.isTablet = window.innerWidth >= 768
+
+    if (wasTablet !== this.isTablet && this.currentPuzzle) {
+      this.renderGrid() // Re-render for different screen size
+    }
+  }
+
+  initializeGame() {
+    this.updateUI()
+    this.setupTabletStyles()
+  }
+
+  setupTabletStyles() {
+    if (this.isTablet) {
+      document.body.classList.add('tablet-mode')
+    } else {
+      document.body.classList.remove('tablet-mode')
+    }
+  }
+
+  setupEventListeners() {
+    // Menu controls
+    document.getElementById('menuBtn').addEventListener('click', () => {
+      document.getElementById('sideMenu').classList.add('active')
+    })
+
+    document.getElementById('closeMenu').addEventListener('click', () => {
+      document.getElementById('sideMenu').classList.remove('active')
+    })
+
+    // Game controls
+    document.getElementById('checkBtn').addEventListener('click', () => {
+      this.checkAnswers()
+    })
+
+    document.getElementById('clearBtn').addEventListener('click', () => {
+      this.clearGrid()
+    })
+
+    document.getElementById('revealLetterBtn').addEventListener('click', () => {
+      this.showHintModal()
+    })
+
+    document.getElementById('skipBtn').addEventListener('click', () => {
+      this.skipPuzzle()
+    })
+
+    // Hint modal
+    document.getElementById('useHintBtn').addEventListener('click', () => {
+      this.useHint()
+    })
+
+    document.getElementById('cancelHintBtn').addEventListener('click', () => {
+      this.hideHintModal()
+    })
+
+    // Success modal
+    document.getElementById('nextPuzzleBtn').addEventListener('click', () => {
+      this.nextPuzzle()
+    })
+
+    document.getElementById('closeModalBtn').addEventListener('click', () => {
+      this.hideSuccessModal()
+    })
+
+    // Menu items
+    document.getElementById('dailyPuzzle').addEventListener('click', () => {
+      this.loadDailyPuzzle()
+    })
+
+    document.getElementById('levelSelect').addEventListener('click', () => {
+      this.showLevelSelect()
+    })
+
+    // Keyboard navigation
+    document.addEventListener('keydown', (e) => {
+      this.handleKeyboardInput(e)
+    })
+  }
+
+  // Load puzzles from external puzzleData.js
+  getDutchPuzzles() {
+    // Use puzzles from puzzleData.js if available
+    if (typeof DUTCH_PUZZLES !== 'undefined') {
+      return {
+        1: DUTCH_PUZZLES.level1,
+        2: DUTCH_PUZZLES.level2,
+        3: DUTCH_PUZZLES.level3
+      }
+    }
+
+    // Fallback puzzles
+    return {
+      1: {
+        grid      : [
+          ['H', 'A', 'A', 'S'],
+          ['#', '#', '#', '#'],
+          ['V', 'L', 'I', 'E', 'G'],
+          ['#', '#', '#', '#', '#']
+        ],
+        words     : [
+          {
+            word     : 'HAAS',
+            clue     : 'Snel dier',
+            startRow : 0,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'HAAS'
+          },
+          {
+            word     : 'VLIEG',
+            clue     : 'Insect',
+            startRow : 2,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'VLIEG'
+          }
+        ],
+        difficulty: 1
+      },
+      2: {
+        grid      : [
+          ['B', 'O', 'M', 'E', 'N'],
+          ['#', '#', '#', '#', '#'],
+          ['H', 'O', 'N', 'D', 'E'],
+          ['#', '#', '#', '#', '#']
+        ],
+        words     : [
+          {
+            word     : 'BOMEN',
+            clue     : 'Planten →',
+            startRow : 0,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'BOMEN'
+          },
+          {
+            word     : 'HONDE',
+            clue     : 'Huisdieren →',
+            startRow : 2,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'HONDE'
+          }
+        ],
+        difficulty: 2
+      },
+      3: {
+        grid      : [
+          ['R', 'E', 'G', 'E', 'N'],
+          ['#', '#', '#', '#', '#'],
+          ['S', 'N', 'E', 'E', 'U'],
+          ['#', '#', '#', '#', '#']
+        ],
+        words     : [
+          {
+            word     : 'REGEN',
+            clue     : 'Valt uit de lucht →',
+            startRow : 0,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'REGEN'
+          },
+          {
+            word     : 'SNEEU',
+            clue     : 'Witte vlokken →',
+            startRow : 2,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'SNEEU'
+          }
+        ],
+        difficulty: 3
+      },
+      // Tablet-optimized larger puzzles
+      4: {
+        grid           : [
+          ['H', 'A', 'A', 'S', '#', '#'],
+          ['#', '#', '#', 'T', '#', '#'],
+          ['V', 'L', 'I', 'E', 'G', '#'],
+          ['#', '#', '#', 'S', '#', '#'],
+          ['#', '#', '#', '#', '#', '#'],
+          ['#', '#', '#', '#', '#', '#']
+        ],
+        words          : [
+          {
+            word     : 'HAAS',
+            clue     : 'Snel dier →',
+            startRow : 0,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'HAAS'
+          },
+          {
+            word     : 'VLIEG',
+            clue     : 'Insect',
+            startRow : 2,
+            startCol : 0,
+            direction: 'horizontal',
+            answer   : 'VLIEG'
+          }
+        ],
+        difficulty     : 2,
+        tabletOptimized: true
+      }
+    }
+  }
+
+  loadPuzzle(level) {
+    const puzzles = this.getDutchPuzzles()
+    this.currentPuzzle = puzzles[level] || puzzles[1]
+    this.renderGrid()
+    this.userAnswers = {}
+    this.updateProgress()
+  }
+
+  calculateOptimalCellSize(rows, cols) {
+    // Get available viewport space with mobile-specific adjustments
+    const isMobile = window.innerWidth < 768
+    const headerHeight = isMobile ? 70 : 80
+    const progressHeight = isMobile ? 50 : 60
+    const controlsHeight = isMobile ? 100 : 120
+    const gridPadding = isMobile ? 5 : 10 // padding inside grid-container
+    const sectionPadding = isMobile ? 5 : 20 // padding of puzzle-section
+    const mainPadding = isMobile ? 10 : 20 // game-main padding
+    const totalPadding = (gridPadding * 2) + (sectionPadding * 2) + (mainPadding * 2) + (isMobile ? 20 : 0)
+    const gap = isMobile ? 1 : 2
+
+    const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - totalPadding
+    const availableWidth = window.innerWidth - totalPadding
+
+    // Calculate max cell size based on available space
+    // Account for gaps between cells
+    const totalGapHeight = (rows - 1) * gap
+    const totalGapWidth = (cols - 1) * gap
+
+    const maxCellFromHeight = (availableHeight - totalGapHeight) / rows
+    const maxCellFromWidth = (availableWidth - totalGapWidth) / cols
+
+    // Use the smaller dimension
+    let cellSize = Math.floor(Math.min(maxCellFromHeight, maxCellFromWidth))
+
+    // Set min/max bounds based on device - more conservative on mobile
+    const minSize = isMobile ? 28 : 40
+    const maxSize = isMobile ? 45 : 120
+    cellSize = Math.max(minSize, Math.min(maxSize, cellSize))
+
+    console.log('Grid calculation:', {
+      isMobile,
+      viewportWidth: window.innerWidth,
+      availableWidth,
+      availableHeight,
+      rows,
+      cols,
+      maxCellFromWidth,
+      maxCellFromHeight,
+      finalCellSize: cellSize,
+      totalGridWidth: cols * cellSize + totalGapWidth + (gridPadding * 2),
+      totalPadding
+    })
+
+    return cellSize
+  }
+
+  renderGrid() {
+    if (!this.currentPuzzle) return
+
+    const grid = this.currentPuzzle.grid
+    const words = this.currentPuzzle.words
+
+    this.gridElement.innerHTML = ''
+
+    // Set grid dimensions - add 1 column for clue cells on the left
+    const rows = grid.length
+    const cols = Math.max(...grid.map(row => row.length)) + 1
+
+    // Calculate available space and determine optimal cell size
+    const cellSize = this.calculateOptimalCellSize(rows, cols)
+
+    const isMobile = window.innerWidth < 768
+    const gap = isMobile ? 1 : 2
+
+    this.gridElement.style.gridTemplateColumns = `repeat(${ cols }, ${ cellSize }px)`
+    this.gridElement.style.gridTemplateRows = `repeat(${ rows }, ${ cellSize }px)`
+    this.gridElement.style.gap = `${gap}px`
+    this.gridElement.style.justifyContent = 'center'
+    this.gridElement.style.margin = '0 auto'
+
+    // Create grid cells with clue column
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        if (col === 0) {
+          // First column is for clues
+          const clueData = this.getClueForRow(row, words)
+          const cellElement = this.createClueCell(row, clueData, cellSize)
+          this.gridElement.appendChild(cellElement)
+        } else {
+          // Remaining columns are the actual grid (offset by 1)
+          const gridCol = col - 1
+          const cellValue = grid[row] && grid[row][gridCol] ? grid[row][gridCol] : '#'
+          const cellElement = this.createCellElement(cellValue, row, gridCol, words, cellSize)
+          this.gridElement.appendChild(cellElement)
+        }
+      }
+    }
+
+    this.attachCellListeners()
+  }
+
+  getClueForRow(row, words) {
+    // Find horizontal word that starts in this row
+    for (const word of words) {
+      if (word.direction === 'horizontal' && word.startRow === row) {
+        return {
+          clue: word.clue,
+          direction: 'horizontal'
+        }
+      }
+    }
+    return null
+  }
+
+  createClueCell(row, clueData, cellSize) {
+    const cellDiv = document.createElement('div')
+    cellDiv.className = 'grid-cell clue-cell'
+    cellDiv.style.width = `${ cellSize }px`
+    cellDiv.style.height = `${ cellSize }px`
+
+    if (clueData) {
+      // Has a clue for this row
+      const clueText = document.createElement('div')
+      clueText.className = 'clue-text'
+      clueText.textContent = clueData.clue
+
+      // Responsive font sizing based on cell size
+      const fontSize = Math.max(7, Math.min(12, cellSize / 6))
+      clueText.style.fontSize = `${fontSize}px`
+      clueText.style.lineHeight = '1.1'
+      clueText.style.padding = '2px'
+
+      const arrow = document.createElement('div')
+      arrow.className = 'arrow arrow-right'
+      arrow.textContent = '→'
+      const arrowSize = Math.max(12, Math.min(24, cellSize / 3))
+      arrow.style.fontSize = `${arrowSize}px`
+
+      cellDiv.appendChild(clueText)
+      cellDiv.appendChild(arrow)
+    } else {
+      // Empty clue cell
+      cellDiv.classList.add('blocked-cell')
+    }
+
+    return cellDiv
+  }
+
+  createCellElement(cellValue, row, col, words, cellSize) {
+    const cellDiv = document.createElement('div')
+    cellDiv.className = 'grid-cell'
+    cellDiv.dataset.row = row
+    cellDiv.dataset.col = col
+
+    // FIXED: Set consistent sizing
+    cellDiv.style.width = `${ cellSize }px`
+    cellDiv.style.height = `${ cellSize }px`
+
+    if (cellValue === '#') {
+      // Check if this is a clue cell (before second word in row)
+      const clueData = this.getClueForPosition(row, col, words)
+      if (clueData) {
+        // This is a clue cell for the second word
+        cellDiv.classList.add('clue-cell')
+
+        const clueText = document.createElement('div')
+        clueText.className = 'clue-text'
+        clueText.textContent = clueData.clue
+
+        // Responsive font sizing based on cell size
+        const fontSize = Math.max(7, Math.min(12, cellSize / 6))
+        clueText.style.fontSize = `${fontSize}px`
+        clueText.style.lineHeight = '1.1'
+        clueText.style.padding = '2px'
+
+        const arrow = document.createElement('div')
+        arrow.className = 'arrow arrow-right'
+        arrow.textContent = '→'
+        const arrowSize = Math.max(12, Math.min(24, cellSize / 3))
+        arrow.style.fontSize = `${arrowSize}px`
+
+        cellDiv.appendChild(clueText)
+        cellDiv.appendChild(arrow)
+      } else {
+        // Regular blocked cell
+        cellDiv.classList.add('blocked-cell')
+      }
+    } else {
+      // Letter cell - create input
+      if (this.isPartOfWord(row, col, words)) {
+        cellDiv.classList.add('input-cell')
+        const input = document.createElement('input')
+        input.type = 'text'
+        input.maxLength = 1
+        input.dataset.row = row
+        input.dataset.col = col
+
+        // Responsive font sizing based on cell size
+        const inputFontSize = Math.max(16, Math.min(36, cellSize * 0.5))
+        input.style.fontSize = `${inputFontSize}px`
+
+        // Add existing answer if available
+        const key = `${ row }-${ col }`
+        if (this.userAnswers[key]) {
+          input.value = this.userAnswers[key]
+        }
+
+        cellDiv.appendChild(input)
+      } else {
+        // Empty cell that's not part of any word
+        cellDiv.classList.add('blocked-cell')
+      }
+    }
+
+    return cellDiv
+  }
+
+  // FIXED: Check if cell is part of any word
+  isPartOfWord(row, col, words) {
+    for (const word of words) {
+      if (word.direction === 'horizontal') {
+        if (row === word.startRow && col >= word.startCol && col < word.startCol + word.answer.length) {
+          return true
+        }
+      } else if (word.direction === 'vertical') {
+        if (col === word.startCol && row >= word.startRow && row < word.startRow + word.answer.length) {
+          return true
+        }
+      }
+    }
+    return false
+  }
+
+  getClueForPosition(row, col, words) {
+    for (const word of words) {
+      if (word.direction === 'horizontal') {
+        // Horizontal clue appears one cell to the left of word start
+        if (word.startRow === row && word.startCol - 1 === col) {
+          return {
+            clue     : word.clue,
+            direction: word.direction
+          }
+        }
+      } else if (word.direction === 'vertical') {
+        // Vertical clue appears one cell above word start
+        if (word.startRow - 1 === row && word.startCol === col) {
+          return {
+            clue     : word.clue,
+            direction: word.direction
+          }
+        }
+      }
+    }
+    return null
+  }
+
+  attachCellListeners() {
+    const inputs = this.gridElement.querySelectorAll('input')
+
+    inputs.forEach(input => {
+      input.addEventListener('input', (e) => {
+        this.handleInput(e)
+      })
+
+      input.addEventListener('focus', (e) => {
+        this.selectCell(e.target)
+      })
+
+      input.addEventListener('click', (e) => {
+        this.selectCell(e.target)
+      })
+    })
+  }
+
+  handleInput(e) {
+    const input = e.target
+    const value = input.value.toUpperCase()
+    input.value = value
+
+    const row = parseInt(input.dataset.row)
+    const col = parseInt(input.dataset.col)
+    const key = `${ row }-${ col }`
+
+    this.userAnswers[key] = value
+
+    // FIXED: Smart navigation to next cell in the same word
+    if (value && value.length === 1) {
+      this.moveToNextInWord(input, row, col)
+    }
+
+    this.updateProgress()
+  }
+
+  // FIXED: Navigate to next cell in the same word, not just any next input
+  moveToNextInWord(currentInput, row, col) {
+    const currentWord = this.findWordContainingCell(row, col)
+    if (!currentWord) {
+      this.moveToNextCell(currentInput)
+      return
+    }
+
+    let nextRow = row
+    let nextCol = col
+
+    if (currentWord.direction === 'horizontal') {
+      nextCol++
+    } else {
+      nextRow++
+    }
+
+    // Check if next position is still in the same word
+    const nextInput = this.gridElement.querySelector(`input[data-row="${ nextRow }"][data-col="${ nextCol }"]`)
+    if (nextInput && this.isPartOfWord(nextRow, nextCol, this.currentPuzzle.words)) {
+      nextInput.focus()
+      nextInput.select()
+    } else {
+      // End of word, move to next available input
+      this.moveToNextCell(currentInput)
+    }
+  }
+
+  findWordContainingCell(row, col) {
+    for (const word of this.currentPuzzle.words) {
+      if (word.direction === 'horizontal') {
+        if (row === word.startRow && col >= word.startCol && col < word.startCol + word.answer.length) {
+          return word
+        }
+      } else if (word.direction === 'vertical') {
+        if (col === word.startCol && row >= word.startRow && row < word.startRow + word.answer.length) {
+          return word
+        }
+      }
+    }
+    return null
+  }
+
+  selectCell(input) {
+    // Remove previous selection
+    document.querySelectorAll('.grid-cell').forEach(cell => {
+      cell.classList.remove('active')
+    })
+
+    // Add selection to current cell
+    input.parentElement.classList.add('active')
+    this.selectedCell = input
+  }
+
+  // FIXED: Better navigation that respects word boundaries
+  moveToNextCell(currentInput) {
+    const inputs = Array.from(this.gridElement.querySelectorAll('input'))
+    const currentIndex = inputs.indexOf(currentInput)
+
+    if (currentIndex !== -1 && currentIndex < inputs.length - 1) {
+      const nextInput = inputs[currentIndex + 1]
+      nextInput.focus()
+      nextInput.select()
+    }
+  }
+
+  handleKeyboardInput(e) {
+    if (!this.selectedCell) return
+
+    const inputs = Array.from(this.gridElement.querySelectorAll('input'))
+    const currentIndex = inputs.indexOf(this.selectedCell)
+
+    if (currentIndex === -1) return
+
+    let targetIndex = currentIndex
+
+    switch (e.key) {
+    case 'ArrowUp':
+      const currentRow = parseInt(this.selectedCell.dataset.row)
+      const currentCol = parseInt(this.selectedCell.dataset.col)
+      const targetInput = this.findInputAbove(currentRow, currentCol)
+      if (targetInput) {
+        targetInput.focus()
+        targetInput.select()
+      }
+      break
+    case 'ArrowDown':
+      const targetInputDown = this.findInputBelow(currentRow, currentCol)
+      if (targetInputDown) {
+        targetInputDown.focus()
+        targetInputDown.select()
+      }
+      break
+    case 'ArrowLeft':
+      if (currentIndex > 0) {
+        targetIndex--
+        inputs[targetIndex].focus()
+        inputs[targetIndex].select()
+      }
+      break
+    case 'ArrowRight':
+      if (currentIndex < inputs.length - 1) {
+        targetIndex++
+        inputs[targetIndex].focus()
+        inputs[targetIndex].select()
+      }
+      break
+    case 'Backspace':
+      this.selectedCell.value = ''
+      const row = parseInt(this.selectedCell.dataset.row)
+      const col = parseInt(this.selectedCell.dataset.col)
+      delete this.userAnswers[`${ row }-${ col }`]
+      this.updateProgress()
+      break
+    }
+  }
+
+  findInputAbove(row, col) {
+    for (let r = row - 1; r >= 0; r--) {
+      const input = this.gridElement.querySelector(`input[data-row="${ r }"][data-col="${ col }"]`)
+      if (input) return input
+    }
+    return null
+  }
+
+  findInputBelow(row, col) {
+    const maxRow = Math.max(...Array.from(this.gridElement.querySelectorAll('input')).map(input => parseInt(input.dataset.row)))
+    for (let r = row + 1; r <= maxRow; r++) {
+      const input = this.gridElement.querySelector(`input[data-row="${ r }"][data-col="${ col }"]`)
+      if (input) return input
+    }
+    return null
+  }
+
+  checkAnswers() {
+    let correct = 0
+    let total = 0
+
+    const inputs = this.gridElement.querySelectorAll('input')
+    inputs.forEach(input => {
+      const row = parseInt(input.dataset.row)
+      const col = parseInt(input.dataset.col)
+      const key = `${ row }-${ col }`
+      const userAnswer = input.value.toUpperCase()
+
+      const correctAnswer = this.findCorrectAnswer(row, col)
+
+      if (correctAnswer) {
+        total++
+        if (userAnswer === correctAnswer) {
+          correct++
+          input.parentElement.classList.add('correct')
+          input.parentElement.classList.remove('incorrect')
+        } else if (userAnswer) {
+          input.parentElement.classList.add('incorrect')
+          input.parentElement.classList.remove('correct')
+        }
+      }
+    })
+
+    const percentage = total > 0 ? Math.round((correct / total) * 100) : 0
+
+    if (percentage === 100) {
+      this.showSuccess()
+    } else {
+      this.showFeedback(`Je hebt ${ correct } van de ${ total } letters correct (${ percentage }%)`)
+    }
+  }
+
+  findCorrectAnswer(row, col) {
+    for (const word of this.currentPuzzle.words) {
+      if (word.direction === 'horizontal') {
+        if (word.startRow === row && col >= word.startCol && col < word.startCol + word.answer.length) {
+          const letterIndex = col - word.startCol
+          return word.answer[letterIndex]
+        }
+      } else if (word.direction === 'vertical') {
+        if (word.startCol === col && row >= word.startRow && row < word.startRow + word.answer.length) {
+          const letterIndex = row - word.startRow
+          return word.answer[letterIndex]
+        }
+      }
+    }
+    return null
+  }
+
+  clearGrid() {
+    if (confirm('Weet je zeker dat je alle ingevulde letters wilt wissen?')) {
+      const inputs = this.gridElement.querySelectorAll('input')
+      inputs.forEach(input => {
+        input.value = ''
+        input.parentElement.classList.remove('correct', 'incorrect')
+      })
+
+      this.userAnswers = {}
+      this.updateProgress()
+      this.showFeedback('Raster gewist')
+    }
+  }
+
+  showHintModal() {
+    if (this.hints <= 0) {
+      this.showFeedback('Je hebt geen hints meer. Verdien hints door puzzels op te lossen!', 'error')
+      return
+    }
+
+    document.getElementById('hintModal').classList.add('active')
+  }
+
+  hideHintModal() {
+    document.getElementById('hintModal').classList.remove('active')
+  }
+
+  useHint() {
+    if (this.hints <= 0) return
+
+    const inputs = this.gridElement.querySelectorAll('input')
+    const emptyInputs = Array.from(inputs).filter(input => !input.value)
+
+    if (emptyInputs.length === 0) {
+      this.showFeedback('Alle letters zijn al ingevuld!', 'info')
+      this.hideHintModal()
+      return
+    }
+
+    // Randomly select an empty cell
+    const randomInput = emptyInputs[Math.floor(Math.random() * emptyInputs.length)]
+    const row = parseInt(randomInput.dataset.row)
+    const col = parseInt(randomInput.dataset.col)
+    const correctAnswer = this.findCorrectAnswer(row, col)
+
+    if (correctAnswer) {
+      randomInput.value = correctAnswer
+      const key = `${ row }-${ col }`
+      this.userAnswers[key] = correctAnswer
+
+      this.hints--
+      this.updateUI()
+      this.updateProgress()
+      this.showFeedback('Letter onthuld!')
+      this.hideHintModal()
+
+      // Check if puzzle is complete
+      this.checkIfComplete()
+    }
+  }
+
+  checkIfComplete() {
+    const inputs = this.gridElement.querySelectorAll('input')
+    let allFilled = true
+
+    inputs.forEach(input => {
+      if (!input.value) {
+        allFilled = false
+      }
+    })
+
+    if (allFilled) {
+      setTimeout(() => this.checkAnswers(), 500)
+    }
+  }
+
+  showSuccess() {
+    // Award rewards
+    this.coins += 50
+    this.hints += 1
+    this.updateUI()
+
+    document.getElementById('successModal').classList.add('active')
+  }
+
+  hideSuccessModal() {
+    document.getElementById('successModal').classList.remove('active')
+  }
+
+  nextPuzzle() {
+    this.hideSuccessModal()
+    this.currentLevel++
+    this.loadPuzzle(this.currentLevel)
+    this.showFeedback(`Niveau ${ this.currentLevel } geladen!`)
+  }
+
+  skipPuzzle() {
+    if (confirm('Weet je zeker dat je deze puzzel wilt overslaan?')) {
+      this.currentLevel++
+      this.loadPuzzle(this.currentLevel)
+      this.showFeedback('Puzzel overgeslagen')
+    }
+  }
+
+  loadDailyPuzzle() {
+    this.showFeedback('Dagelijkse puzzel wordt geladen...')
+    // Implement daily puzzle logic
+    document.getElementById('sideMenu').classList.remove('active')
+  }
+
+  showLevelSelect() {
+    this.showFeedback('Niveau selectie komt binnenkort!')
+    document.getElementById('sideMenu').classList.remove('active')
+  }
+
+  updateProgress() {
+    const inputs = this.gridElement.querySelectorAll('input')
+    let filled = 0
+    let total = 0
+
+    inputs.forEach(input => {
+      const row = parseInt(input.dataset.row)
+      const col = parseInt(input.dataset.col)
+      const correctAnswer = this.findCorrectAnswer(row, col)
+
+      if (correctAnswer) {
+        total++
+        if (input.value) {
+          filled++
+        }
+      }
+    })
+
+    const progress = total > 0 ? Math.round((filled / total) * 100) : 0
+
+    document.getElementById('progressFill').style.width = `${ progress }%`
+    document.getElementById('progressText').textContent = `${ progress }% voltooid`
+  }
+
+  updateUI() {
+    document.getElementById('coinsCount').textContent = this.coins
+    document.querySelector('.hint-count').textContent = this.hints
+    document.querySelector('.level-number').textContent = `Niveau ${ this.currentLevel }`
+  }
+
+  showFeedback(message, type = 'info') {
+    const feedback = document.createElement('div')
+    feedback.className = `feedback feedback-${ type }`
+    feedback.textContent = message
+
+    feedback.style.cssText = `
+            position: fixed;
+            top: 100px;
+            right: 20px;
+            padding: 15px 20px;
+            border-radius: 8px;
+            color: white;
+            font-weight: 600;
+            z-index: 1000;
+            animation: slideIn 0.3s ease;
+            max-width: 300px;
+            word-wrap: break-word;
+        `
+
+    switch (type) {
+    case 'error':
+      feedback.style.background = 'linear-gradient(135deg, #f56565, #e53e3e)'
+      break
+    case 'success':
+      feedback.style.background = 'linear-gradient(135deg, #48bb78, #38a169)'
+      break
+    default:
+      feedback.style.background = 'linear-gradient(135deg, #4299e1, #3182ce)'
+    }
+
+    document.body.appendChild(feedback)
+
+    setTimeout(() => {
+      feedback.style.animation = 'slideOut 0.3s ease'
+      setTimeout(() => {
+        if (feedback.parentNode) {
+          feedback.parentNode.removeChild(feedback)
+        }
+      }, 300)
+    }, 3000)
+  }
+}
+
+// Add CSS animations and tablet styles
+const style = document.createElement('style')
+style.textContent = `
+    @keyframes slideIn {
+        from { transform: translateX(100%); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+
+    @keyframes slideOut {
+        from { transform: translateX(0); opacity: 1; }
+        to { transform: translateX(100%); opacity: 0; }
+    }
+
+    /* Tablet Mode Styles */
+    .tablet-mode .grid-container {
+        max-width: 90vw;
+        margin: 0 auto;
+    }
+
+    .tablet-mode .puzzle-section {
+        padding: 30px;
+    }
+
+    @media (min-width: 768px) {
+        .app-container {
+            max-width: 100vw;
+        }
+
+        .game-main {
+            padding: 30px;
+        }
+
+        .bottom-controls {
+            max-width: 600px;
+            margin: 0 auto;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .grid-container {
+            transform: scale(1.1);
+            transform-origin: center;
+        }
+
+        .puzzle-section {
+            min-height: 70vh;
+        }
+    }
+`
+document.head.appendChild(style)
+
+// Initialize game when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  const game = new KruiswoordProGame()
+})

tablet/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 192 192"><path fill="#e08524" d="M75.3 73.4H18.4l45.3 34.3L48.3 163l46.1-32.3 48.2 34.6-16.9-58.3 44.9-33.6H115l-20.5-55-19.2 55z"/><path d="m96.7 18.8 18.2 8.2 16.5 44.3h-15.1L96.7 18.8zm-47 146 18.7 9.9 42.6-29.9-16.5-11.4-44.8 31.4zm79.1-56.8 17.4 9.4 18.6 60.1-19.7-11.3-16.3-58.2z"/><path d="m173.1 74.3 17.8 9.2-44.7 34-17.4-9.4 44.3-33.8z"/></svg>

tablet/index.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kruiswoord Pro</title>
+  <link rel="stylesheet" href="tablet.css">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+</head>
+<body>
+<div class="tablet-container">
+  <!-- Header -->
+  <header class="tablet-header">
+    <button class="menu-btn" id="menuBtn">
+      <i class="fas fa-bars"></i>
+    </button>
+    <div class="header-center">
+      <h1>Kruiswoord Pro</h1>
+      <span class="level">Niveau <span id="levelNum">1</span></span>
+    </div>
+    <div class="header-right">
+      <div class="stat">
+        <i class="fas fa-coins"></i>
+        <span id="coinsCount">100</span>
+      </div>
+      <div class="stat">
+        <i class="fas fa-lightbulb"></i>
+        <span id="hintsCount">3</span>
+      </div>
+    </div>
+  </header>
+
+  <!-- Main Content Area -->
+  <div class="main-content">
+    <!-- Grid Section (Left/Center) -->
+    <div class="grid-area">
+      <div class="progress-bar-container">
+        <div class="progress-bar">
+          <div class="progress-fill" id="progressFill"></div>
+        </div>
+        <span class="progress-text" id="progressText">0%</span>
+      </div>
+
+      <div class="grid-section">
+        <div class="grid-wrapper" id="crosswordGrid">
+          <!-- Grid generated by JS -->
+        </div>
+      </div>
+    </div>
+
+    <!-- Controls Sidebar (Right) -->
+    <div class="controls-sidebar">
+      <button class="control-btn primary" id="checkBtn">
+        <i class="fas fa-check-circle"></i>
+        <span>Controleren</span>
+      </button>
+
+      <button class="control-btn" id="clearBtn">
+        <i class="fas fa-eraser"></i>
+        <span>Wissen</span>
+      </button>
+
+      <button class="control-btn hint" id="hintBtn">
+        <i class="fas fa-eye"></i>
+        <span>Hint</span>
+      </button>
+
+      <button class="control-btn" id="skipBtn">
+        <i class="fas fa-forward"></i>
+        <span>Overslaan</span>
+      </button>
+    </div>
+  </div>
+
+  <!-- Side Menu -->
+  <div class="side-menu" id="sideMenu">
+    <div class="menu-header">
+      <h3>Menu</h3>
+      <button class="close-menu" id="closeMenu">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+    <div class="menu-items">
+      <button class="menu-item" id="dailyPuzzle">
+        <i class="fas fa-calendar-day"></i>
+        <span>Dagelijkse Puzzel</span>
+      </button>
+      <button class="menu-item" id="levelSelect">
+        <i class="fas fa-layer-group"></i>
+        <span>Kies Niveau</span>
+      </button>
+    </div>
+  </div>
+
+  <!-- Success Modal -->
+  <div class="modal" id="successModal">
+    <div class="modal-content">
+      <div class="success-icon">
+        <i class="fas fa-trophy"></i>
+      </div>
+      <h2>Gefeliciteerd!</h2>
+      <p>+50 Munten | +1 Hint</p>
+      <button class="btn-primary" id="nextBtn">Volgende Puzzel</button>
+    </div>
+  </div>
+
+  <!-- Hint Modal -->
+  <div class="modal" id="hintModal">
+    <div class="modal-content">
+      <h3>Hint Gebruiken?</h3>
+      <p>Kost 1 hint</p>
+      <div class="modal-btns">
+        <button class="btn-primary" id="useHintBtn">Ja</button>
+        <button class="btn-secondary" id="cancelHintBtn">Nee</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="puzzleData.js"></script>
+<script src="tablet.js"></script>
+</body>
+</html>

tablet/puzzleData.js

@@ -0,0 +1,244 @@
+// Level 4 - 9x8 (Nature & Daily Words)
+const level1 = {
+  grid: [
+    ['B','O','M','E','N','#','Z','O','N'],
+    ['H','A','A','S','#','D','O','R','P'],
+    ['H','O','N','D','#','O','P','E','N'],
+    ['W','I','N','D','#','N','E','S','T'],
+    ['W','O','L','K','#','D','U','I','F'],
+    ['S','T','E','R','#','E','E','N','D'],
+    ['M','A','A','N','#','R','E','U','S'],
+    ['R','E','G','E','N','#','V','I','S']
+  ],
+  words: [
+    // horizontaal
+    { word: 'BOMEN', clue: 'Planten', startRow: 0, startCol: 0, direction: 'horizontal', answer: 'BOMEN' },
+    { word: 'ZON',   clue: 'Ster aan de hemel', startRow: 0, startCol: 6, direction: 'horizontal', answer: 'ZON' },
+
+    { word: 'HAAS',  clue: 'Snel dier', startRow: 1, startCol: 0, direction: 'horizontal', answer: 'HAAS' },
+    { word: 'DORP',  clue: 'Kleine plaats', startRow: 1, startCol: 5, direction: 'horizontal', answer: 'DORP' },
+
+    { word: 'HOND',  clue: 'Huisdier', startRow: 2, startCol: 0, direction: 'horizontal', answer: 'HOND' },
+    { word: 'OPEN',  clue: 'Niet dicht', startRow: 2, startCol: 5, direction: 'horizontal', answer: 'OPEN' },
+
+    { word: 'WIND',  clue: 'Luchtbeweging', startRow: 3, startCol: 0, direction: 'horizontal', answer: 'WIND' },
+    { word: 'NEST',  clue: 'Thuis van een vogel', startRow: 3, startCol: 5, direction: 'horizontal', answer: 'NEST' },
+
+    { word: 'WOLK',  clue: 'In de lucht', startRow: 4, startCol: 0, direction: 'horizontal', answer: 'WOLK' },
+    { word: 'DUIF',  clue: 'Stadsvogel', startRow: 4, startCol: 5, direction: 'horizontal', answer: 'DUIF' },
+
+    { word: 'STER',  clue: 'Hemellichaam', startRow: 5, startCol: 0, direction: 'horizontal', answer: 'STER' },
+    { word: 'EEND',  clue: 'Watervogel', startRow: 5, startCol: 5, direction: 'horizontal', answer: 'EEND' },
+
+    { word: 'MAAN',  clue: 'Nachthemel', startRow: 6, startCol: 0, direction: 'horizontal', answer: 'MAAN' },
+    { word: 'REUS',  clue: 'Gigant', startRow: 6, startCol: 5, direction: 'horizontal', answer: 'REUS' },
+
+    { word: 'REGEN', clue: 'Valt uit de lucht', startRow: 7, startCol: 0, direction: 'horizontal', answer: 'REGEN' },
+    { word: 'VIS',   clue: 'Zwemt in water', startRow: 7, startCol: 6, direction: 'horizontal', answer: 'VIS' },
+
+    // verticaal (spine)
+    { word: 'DONDER', clue: 'Weerverschijnsel', startRow: 1, startCol: 5, direction: 'vertical', answer: 'DONDER' }
+  ],
+  difficulty: 3,
+  rewards: { coins: 125, stars: 4, hints: 1 }
+};
+
+// Dutch Swedish-style Crossword Puzzles Database
+const DUTCH_PUZZLES = {
+  // Level 1 - Easy
+  level1,
+  level0: {
+    grid: [
+      ['#','#', '#', '#', '#'],
+      ['#','H', 'A', 'A', 'S'],
+      ['#','#', '#', '#', 'T'],
+      ['#','V', 'L', 'I', 'E', 'G'],
+      ['#','#', '#', '#', 'S']
+    ],
+    words: [
+      {
+        word: 'HAAS',
+        clue: 'Snel dier',
+        startRow: 0,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'HAAS'
+      },
+      {
+        word: 'VLIEG',
+        clue: 'Insect',
+        startRow: 2,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'VLIEG'
+      },
+      {
+        word: 'AT',
+        clue: 'Kleine woord',
+        startRow: 0,
+        startCol: 2,
+        direction: 'vertical',
+        answer: 'AT'
+      }
+    ],
+    difficulty: 1,
+    rewards: { coins: 50, stars: 3, hints: 1 }
+  },
+
+  // Level 2 - Medium Easy
+  level2: {
+    grid: [
+      ['B', 'O', 'M', 'E', 'N'],
+      ['#', '#', '#', '#', 'D'],
+      ['H', 'O', 'N', 'D', 'E'],
+      ['#', '#', '#', '#', 'R']
+    ],
+    words: [
+      {
+        word: 'BOMEN',
+        clue: 'Planten',
+        startRow: 0,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'BOMEN'
+      },
+      {
+        word: 'HONDE',
+        clue: 'Huisdieren',
+        startRow: 2,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'HONDE'
+      },
+      {
+        word: 'NE',
+        clue: 'Nee afkorting',
+        startRow: 0,
+        startCol: 4,
+        direction: 'vertical',
+        answer: 'NE'
+      }
+    ],
+    difficulty: 2,
+    rewards: { coins: 75, stars: 3, hints: 1 }
+  },
+
+  // Level 3 - Weather Theme
+  level3: {
+    grid: [
+      ['R', 'E', 'G', 'E', 'N'],
+      ['#', '#', '#', '#', 'B'],
+      ['S', 'N', 'E', 'E', 'U'],
+      ['#', '#', '#', '#', 'W']
+    ],
+    words: [
+      {
+        word: 'REGEN',
+        clue: 'Valt uit de lucht',
+        startRow: 0,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'REGEN'
+      },
+      {
+        word: 'SNEEU',
+        clue: 'Witte vlokken',
+        startRow: 2,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'SNEEU'
+      },
+      {
+        word: 'NB',
+        clue: 'Nota bene',
+        startRow: 0,
+        startCol: 4,
+        direction: 'vertical',
+        answer: 'NB'
+      }
+    ],
+    difficulty: 3,
+    rewards: { coins: 100, stars: 3, hints: 1 }
+  },
+
+  // Daily Puzzle Template
+  daily: {
+    grid: [
+      ['Z', 'O', 'N', 'N', 'E'],
+      ['#', '#', '#', '#', 'D'],
+      ['M', 'A', 'A', 'N', 'D'],
+      ['#', '#', '#', '#', 'G']
+    ],
+    words: [
+      {
+        word: 'ZONNE',
+        clue: 'Daglicht',
+        startRow: 0,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'ZONNE'
+      },
+      {
+        word: 'MAAND',
+        clue: 'Tijdseenheid',
+        startRow: 2,
+        startCol: 0,
+        direction: 'horizontal',
+        answer: 'MAAND'
+      },
+      {
+        word: 'ND',
+        clue: 'Noord',
+        startRow: 0,
+        startCol: 4,
+        direction: 'vertical',
+        answer: 'ND'
+      }
+    ],
+    difficulty: 2,
+    rewards: { coins: 150, stars: 5, hints: 2 },
+    dailyBonus: true
+  }
+};
+
+// Word Database for hints and validation
+const DUTCH_WORD_DATABASE = {
+  animals: [
+    { word: 'HAAS', clue: 'Snel dier' },
+    { word: 'HOND', clue: 'Huisdier' },
+    { word: 'KAT', clue: 'Katachtige' },
+    { word: 'VLIEG', clue: 'Insect' },
+    { word: 'VIS', clue: 'Zwemt in water' },
+    { word: 'MUIS', clue: 'Klein dier' },
+    { word: 'PAARD', clue: 'Rijdier' },
+    { word: 'KIP', clue: 'Legt eieren' },
+    { word: 'EEL', clue: 'Lang dier' }
+  ],
+  nature: [
+    { word: 'BOMEN', clue: 'Planten' },
+    { word: 'REGEN', clue: 'Valt uit de lucht' },
+    { word: 'SNEEU', clue: 'Witte vlokken' },
+    { word: 'DONDER', clue: 'Weer verschijnsel' },
+    { word: 'BLIKSEM', clue: 'Lichtflits' },
+    { word: 'MAAND', clue: 'Satelliet' },
+    { word: 'STER', clue: 'Hemellichaam' },
+    { word: 'WOLK', clue: 'Watten in lucht' },
+    { word: 'WIND', clue: 'Luchtbeweging' },
+    { word: 'ZON', clue: 'Ster' }
+  ],
+  common: [
+    { word: 'AT', clue: 'Kleine woord' },
+    { word: 'NE', clue: 'Nee afkorting' },
+    { word: 'NB', clue: 'Nota bene' },
+    { word: 'ND', clue: 'Noord' },
+    { word: 'EN', clue: 'En' },
+    { word: 'ER', clue: 'Er' },
+    { word: 'IN', clue: 'In' },
+    { word: 'OP', clue: 'Op' }
+  ]
+};
+
+// Export for use in game logic
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { DUTCH_PUZZLES, DUTCH_WORD_DATABASE };
+}

tablet/tablet-app.css

@@ -0,0 +1,471 @@
+/* Full-Screen Tablet App */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+  background: #1a202c;
+  touch-action: manipulation;
+  user-select: none;
+}
+
+.app-fullscreen {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  overflow: hidden;
+}
+
+/* Header */
+.app-header {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  padding: 10px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+  flex-shrink: 0;
+}
+
+.icon-btn {
+  background: rgba(255,255,255,0.2);
+  border: none;
+  color: white;
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.header-info {
+  flex: 1;
+  text-align: center;
+}
+
+.level-text {
+  color: white;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.header-stats {
+  display: flex;
+  gap: 10px;
+}
+
+.stat-item {
+  background: rgba(255,255,255,0.2);
+  padding: 8px 12px;
+  border-radius: 20px;
+  color: white;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Progress Bar */
+.progress-bar-wrapper {
+  background: rgba(255,255,255,0.95);
+  padding: 8px 15px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 8px;
+  background: #e9ecef;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #48bb78, #38a169);
+  width: 0%;
+  transition: width 0.3s ease;
+}
+
+.progress-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: #4a5568;
+  min-width: 50px;
+}
+
+/* Grid Container */
+.grid-container-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 15px;
+  overflow: hidden;
+  background: rgba(255,255,255,0.95);
+}
+
+.crossword-grid {
+  display: grid;
+  background: #a0aec0;
+  padding: 6px;
+  border-radius: 10px;
+  gap: 2px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
+}
+
+/* Grid Cells */
+.grid-cell {
+  background: white;
+  border: 2px solid #cbd5e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  font-weight: bold;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.grid-cell.clue-cell {
+  background: linear-gradient(135deg, #4a5568, #2d3748);
+  color: white;
+  padding: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.2;
+  text-align: left;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  overflow: hidden;
+  cursor: default;
+  pointer-events: none;
+}
+
+.clue-text {
+  font-size: 10px;
+  line-height: 1.2;
+  word-wrap: break-word;
+  width: 100%;
+}
+
+.arrow {
+  position: absolute;
+  color: #4299e1;
+  font-weight: bold;
+  font-size: 18px;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.grid-cell.blocked-cell {
+  background: #2d3748;
+  border-color: #2d3748;
+  cursor: default;
+}
+
+.grid-cell.letter-cell {
+  background: white;
+  font-size: 28px;
+  color: #2d3748;
+  cursor: pointer;
+}
+
+.grid-cell.letter-cell:hover {
+  background: #f7fafc;
+  border-color: #4299e1;
+}
+
+.grid-cell.letter-cell.active {
+  background: #ebf8ff;
+  border-color: #3182ce;
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.4);
+}
+
+.grid-cell.letter-cell.highlighted {
+  background: #fef5e7;
+  border-color: #f39c12;
+}
+
+.grid-cell.letter-cell.correct {
+  background: #c6f6d5;
+  border-color: #48bb78;
+  animation: correctPulse 0.5s ease;
+}
+
+.grid-cell.letter-cell.incorrect {
+  background: #fed7d7;
+  border-color: #f56565;
+  animation: shake 0.4s ease;
+}
+
+@keyframes correctPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
+@keyframes wordComplete {
+  0% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7); }
+  100% { box-shadow: 0 0 0 20px rgba(72, 187, 120, 0); }
+}
+
+.word-complete {
+  animation: wordComplete 0.8s ease;
+}
+
+/* On-Screen Keyboard */
+.keyboard-area {
+  background: #2d3748;
+  padding: 12px 10px 10px 10px;
+  flex-shrink: 0;
+  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
+}
+
+.keyboard-row {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.key-btn {
+  background: linear-gradient(135deg, #4a5568, #2d3748);
+  border: none;
+  color: white;
+  min-width: 50px;
+  height: 52px;
+  border-radius: 8px;
+  font-size: 20px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.key-btn:active {
+  transform: scale(0.95);
+  background: linear-gradient(135deg, #667eea, #764ba2);
+}
+
+.key-btn.key-action {
+  background: linear-gradient(135deg, #ed8936, #dd6b20);
+  min-width: 60px;
+}
+
+.key-btn.key-del {
+  background: linear-gradient(135deg, #fc8181, #f56565);
+  min-width: 60px;
+}
+
+.keyboard-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+  justify-content: center;
+}
+
+.action-btn {
+  background: linear-gradient(135deg, #48bb78, #38a169);
+  border: none;
+  color: white;
+  padding: 14px 28px;
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s;
+}
+
+.action-btn:active {
+  transform: scale(0.97);
+}
+
+.action-btn.secondary {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+}
+
+/* Side Menu */
+.side-menu {
+  position: fixed;
+  top: 0;
+  left: -300px;
+  width: 300px;
+  height: 100vh;
+  background: white;
+  box-shadow: 2px 0 15px rgba(0,0,0,0.3);
+  transition: left 0.3s ease;
+  z-index: 1000;
+}
+
+.side-menu.active {
+  left: 0;
+}
+
+.menu-header {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: white;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.menu-header h3 {
+  font-size: 20px;
+}
+
+.close-menu {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.menu-items {
+  padding: 15px 0;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 18px 20px;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background 0.2s;
+}
+
+.menu-item:active {
+  background: #f8f9fa;
+}
+
+.menu-item i {
+  width: 24px;
+  color: #4facfe;
+  font-size: 20px;
+}
+
+/* Modal */
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.7);
+  z-index: 2000;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal.active {
+  display: flex;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 20px;
+  padding: 40px;
+  text-align: center;
+  max-width: 450px;
+  width: 90%;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
+}
+
+.success-icon {
+  font-size: 80px;
+  color: #48bb78;
+  margin-bottom: 20px;
+  animation: bounce 1s ease;
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
+  40% { transform: translateY(-20px); }
+  60% { transform: translateY(-10px); }
+}
+
+.modal-content h2 {
+  color: #2d3748;
+  margin-bottom: 12px;
+  font-size: 28px;
+}
+
+.modal-content p {
+  color: #4a5568;
+  margin-bottom: 24px;
+  font-size: 18px;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #48bb78, #38a169);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  padding: 16px 32px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 18px;
+  box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
+}
+
+.btn-primary:active {
+  transform: scale(0.98);
+}
+
+/* Toast Notification */
+.toast {
+  position: fixed;
+  top: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0,0,0,0.9);
+  color: white;
+  padding: 14px 28px;
+  border-radius: 25px;
+  font-size: 16px;
+  font-weight: 600;
+  z-index: 9999;
+  animation: toastFade 2.5s ease;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+}
+
+@keyframes toastFade {
+  0%, 100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
+  15%, 85% { opacity: 1; transform: translateX(-50%) translateY(0); }
+}

tablet/tablet-app.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <title>Kruiswoord Pro</title>
+ <!-- <script src="redirect2.js"></script>-->
+  <link rel="stylesheet" href="tablet-app.css">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+</head>
+<body>
+<div class="app-fullscreen">
+  <!-- Header -->
+  <header class="app-header">
+    <button class="icon-btn" id="menuBtn">
+      <i class="fas fa-bars"></i>
+    </button>
+    <div class="header-info">
+      <span class="level-text">Niveau <span id="levelNum">1</span></span>
+    </div>
+    <div class="header-stats">
+      <div class="stat-item">
+        <i class="fas fa-coins"></i>
+        <span id="coinsCount">100</span>
+      </div>
+      <div class="stat-item">
+        <i class="fas fa-lightbulb"></i>
+        <span id="hintsCount">3</span>
+      </div>
+    </div>
+  </header>
+
+  <!-- Progress -->
+  <div class="progress-bar-wrapper">
+    <div class="progress-bar">
+      <div class="progress-fill" id="progressFill"></div>
+    </div>
+    <span class="progress-text" id="progressText">0%</span>
+  </div>
+
+  <!-- Grid Area -->
+  <div class="grid-container-wrapper">
+    <div class="crossword-grid" id="crosswordGrid">
+      <!-- Generated by JS -->
+    </div>
+  </div>
+
+  <!-- On-Screen Keyboard -->
+  <div class="keyboard-area">
+    <div class="keyboard-row">
+      <button class="key-btn">Q</button>
+      <button class="key-btn">W</button>
+      <button class="key-btn">E</button>
+      <button class="key-btn">R</button>
+      <button class="key-btn">T</button>
+      <button class="key-btn">Y</button>
+      <button class="key-btn">U</button>
+      <button class="key-btn">I</button>
+      <button class="key-btn">O</button>
+      <button class="key-btn">P</button>
+    </div>
+    <div class="keyboard-row">
+      <button class="key-btn">A</button>
+      <button class="key-btn">S</button>
+      <button class="key-btn">D</button>
+      <button class="key-btn">F</button>
+      <button class="key-btn">G</button>
+      <button class="key-btn">H</button>
+      <button class="key-btn">J</button>
+      <button class="key-btn">K</button>
+      <button class="key-btn">L</button>
+    </div>
+    <div class="keyboard-row">
+      <button class="key-btn key-action" id="hintKey">
+        <i class="fas fa-lightbulb"></i>
+      </button>
+      <button class="key-btn">Z</button>
+      <button class="key-btn">X</button>
+      <button class="key-btn">C</button>
+      <button class="key-btn">V</button>
+      <button class="key-btn">B</button>
+      <button class="key-btn">N</button>
+      <button class="key-btn">M</button>
+      <button class="key-btn key-action key-del" id="delKey">
+        <i class="fas fa-backspace"></i>
+      </button>
+    </div>
+    <div class="keyboard-actions">
+      <button class="action-btn" id="checkBtn">
+        <i class="fas fa-check"></i> Controleren
+      </button>
+      <button class="action-btn secondary" id="clearBtn">
+        <i class="fas fa-eraser"></i> Wissen
+      </button>
+    </div>
+  </div>
+
+  <!-- Side Menu -->
+  <div class="side-menu" id="sideMenu">
+    <div class="menu-header">
+      <h3>Menu</h3>
+      <button class="close-menu" id="closeMenu">
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+    <div class="menu-items">
+      <button class="menu-item" id="newGame">
+        <i class="fas fa-play"></i> Nieuw Spel
+      </button>
+      <button class="menu-item" id="dailyPuzzle">
+        <i class="fas fa-calendar-day"></i> Dagelijkse Puzzel
+      </button>
+      <button class="menu-item" id="levelSelect">
+        <i class="fas fa-layer-group"></i> Kies Niveau
+      </button>
+    </div>
+  </div>
+
+  <!-- Success Modal -->
+  <div class="modal" id="successModal">
+    <div class="modal-content">
+      <div class="success-icon">
+        <i class="fas fa-trophy"></i>
+      </div>
+      <h2>Gefeliciteerd!</h2>
+      <p>+50 Munten | +1 Hint</p>
+      <button class="btn-primary" id="nextBtn">Volgende Puzzel</button>
+    </div>
+  </div>
+</div>
+
+<script src="puzzleData.js"></script>
+<script src="tablet-app.js"></script>
+</body>
+</html>

tablet/tablet-app.js

@@ -0,0 +1,657 @@
+// Full-Featured Tablet Crossword App
+class TabletCrosswordApp {
+  constructor() {
+    this.currentLevel = 1
+    this.coins = 100
+    this.hints = 3
+    this.currentPuzzle = null
+    this.userAnswers = {}
+    this.selectedCell = null
+    this.selectedWord = null
+    this.gridElement = document.getElementById('crosswordGrid')
+    this.cells = []
+
+    this.init()
+  }
+
+  init() {
+    this.loadGameState()
+    this.loadPuzzle(this.currentLevel)
+    this.setupEventListeners()
+    this.updateUI()
+    this.enableFullscreen()
+  }
+
+  enableFullscreen() {
+    // Request fullscreen on first interaction
+    document.addEventListener('click', () => {
+      if (document.documentElement.requestFullscreen && !document.fullscreenElement) {
+        document.documentElement.requestFullscreen().catch(() => {})
+      }
+    }, { once: true })
+  }
+
+  setupEventListeners() {
+    // Menu
+    document.getElementById('menuBtn').addEventListener('click', () => {
+      document.getElementById('sideMenu').classList.add('active')
+    })
+    document.getElementById('closeMenu').addEventListener('click', () => {
+      document.getElementById('sideMenu').classList.remove('active')
+    })
+
+    // On-screen keyboard
+    document.querySelectorAll('.key-btn').forEach(btn => {
+      if (!btn.id) {
+        btn.addEventListener('click', () => {
+          const letter = btn.textContent.trim()
+          this.handleLetterInput(letter)
+        })
+      }
+    })
+
+    document.getElementById('delKey').addEventListener('click', () => this.handleDelete())
+    document.getElementById('hintKey').addEventListener('click', () => this.useHintForCurrentWord())
+
+    // Actions
+    document.getElementById('checkBtn').addEventListener('click', () => this.checkAllAnswers())
+    document.getElementById('clearBtn').addEventListener('click', () => this.clearGrid())
+
+    // Menu items
+    document.getElementById('newGame').addEventListener('click', () => this.newGame())
+    document.getElementById('dailyPuzzle').addEventListener('click', () => {
+      this.showToast('Dagelijkse puzzel komt binnenkort!')
+      document.getElementById('sideMenu').classList.remove('active')
+    })
+    document.getElementById('levelSelect').addEventListener('click', () => {
+      this.showToast('Niveau selectie komt binnenkort!')
+      document.getElementById('sideMenu').classList.remove('active')
+    })
+
+    document.getElementById('nextBtn').addEventListener('click', () => this.nextPuzzle())
+
+    // Prevent accidental zoom/scroll
+    document.addEventListener('gesturestart', e => e.preventDefault())
+    document.addEventListener('gesturechange', e => e.preventDefault())
+  }
+
+  loadPuzzle(level) {
+    if (typeof DUTCH_PUZZLES !== 'undefined') {
+      this.currentPuzzle = DUTCH_PUZZLES[`level${level}`] || DUTCH_PUZZLES.level1
+    }
+
+    this.renderGrid()
+    this.updateProgress()
+    this.updateUI()
+  }
+
+  renderGrid() {
+    if (!this.currentPuzzle) return
+
+    const grid = this.currentPuzzle.grid
+    const words = this.currentPuzzle.words
+
+    this.gridElement.innerHTML = ''
+    this.cells = []
+
+    const rows = grid.length
+    const cols = Math.max(...grid.map(row => row.length)) + 1
+    const cellSize = this.calculateCellSize(rows, cols)
+
+    this.gridElement.style.gridTemplateColumns = `repeat(${cols}, ${cellSize}px)`
+    this.gridElement.style.gridTemplateRows = `repeat(${rows}, ${cellSize}px)`
+
+    // Create cells
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        if (col === 0) {
+          const clueData = this.getClueForRow(row, words)
+          this.gridElement.appendChild(this.createClueCell(clueData, cellSize))
+        } else {
+          const gridCol = col - 1
+          const cellValue = grid[row]?.[gridCol] || '#'
+          const cell = this.createCell(cellValue, row, gridCol, words, cellSize)
+          this.gridElement.appendChild(cell)
+
+          if (cell.classList.contains('letter-cell')) {
+            this.cells.push({ element: cell, row, col: gridCol })
+          }
+        }
+      }
+    }
+  }
+
+  calculateCellSize(rows, cols) {
+    const headerHeight = 66
+    const progressHeight = 40
+    const keyboardHeight = 230
+    const padding = 30
+
+    const availableHeight = window.innerHeight - headerHeight - progressHeight - keyboardHeight - padding
+    const availableWidth = window.innerWidth - padding
+
+    const maxFromHeight = Math.floor(availableHeight / rows)
+    const maxFromWidth = Math.floor(availableWidth / cols)
+
+    let cellSize = Math.min(maxFromHeight, maxFromWidth)
+    cellSize = Math.max(50, Math.min(75, cellSize))
+
+    return cellSize
+  }
+
+  getClueForRow(row, words) {
+    return words.find(w => w.direction === 'horizontal' && w.startRow === row)
+  }
+
+  createClueCell(clueData, cellSize) {
+    const cell = document.createElement('div')
+    cell.className = 'grid-cell clue-cell'
+    cell.style.width = `${cellSize}px`
+    cell.style.height = `${cellSize}px`
+
+    if (clueData) {
+      const text = document.createElement('div')
+      text.className = 'clue-text'
+      text.textContent = clueData.clue
+
+      const arrow = document.createElement('div')
+      arrow.className = 'arrow'
+      arrow.textContent = '→'
+
+      cell.appendChild(text)
+      cell.appendChild(arrow)
+    } else {
+      cell.classList.add('blocked-cell')
+    }
+
+    return cell
+  }
+
+  createCell(value, row, col, words, cellSize) {
+    const cell = document.createElement('div')
+    cell.className = 'grid-cell'
+    cell.style.width = `${cellSize}px`
+    cell.style.height = `${cellSize}px`
+    cell.dataset.row = row
+    cell.dataset.col = col
+
+    if (value === '#') {
+      const clueData = this.getClueAtPosition(row, col, words)
+      if (clueData) {
+        cell.classList.add('clue-cell')
+        const text = document.createElement('div')
+        text.className = 'clue-text'
+        text.textContent = clueData.clue
+        const arrow = document.createElement('div')
+        arrow.className = 'arrow'
+        arrow.textContent = '→'
+        cell.appendChild(text)
+        cell.appendChild(arrow)
+      } else {
+        cell.classList.add('blocked-cell')
+      }
+    } else {
+      cell.classList.add('letter-cell')
+      const key = `${row}-${col}`
+      cell.textContent = this.userAnswers[key] || ''
+
+      // Click to select and highlight word
+      cell.addEventListener('click', () => {
+        this.selectCell(cell, row, col)
+        this.highlightWord(row, col)
+      })
+    }
+
+    return cell
+  }
+
+  getClueAtPosition(row, col, words) {
+    for (const word of words) {
+      if (word.direction === 'horizontal' && word.startRow === row && word.startCol - 1 === col) {
+        return word
+      }
+    }
+    return null
+  }
+
+  selectCell(cell, row, col) {
+    this.cells.forEach(c => c.element.classList.remove('active'))
+    cell.classList.add('active')
+    this.selectedCell = { element: cell, row, col }
+  }
+
+  highlightWord(row, col) {
+    // Clear previous highlights
+    this.cells.forEach(c => c.element.classList.remove('highlighted'))
+
+    // Find word containing this cell
+    const word = this.findWordContainingCell(row, col)
+    if (!word) return
+
+    this.selectedWord = word
+
+    // Highlight all cells in this word
+    if (word.direction === 'horizontal') {
+      for (let c = word.startCol; c < word.startCol + word.answer.length; c++) {
+        const cellData = this.cells.find(cell => cell.row === word.startRow && cell.col === c)
+        if (cellData) {
+          cellData.element.classList.add('highlighted')
+        }
+      }
+    } else {
+      for (let r = word.startRow; r < word.startRow + word.answer.length; r++) {
+        const cellData = this.cells.find(cell => cell.row === r && cell.col === word.startCol)
+        if (cellData) {
+          cellData.element.classList.add('highlighted')
+        }
+      }
+    }
+  }
+
+  findWordContainingCell(row, col) {
+    for (const word of this.currentPuzzle.words) {
+      if (word.direction === 'horizontal') {
+        if (word.startRow === row && col >= word.startCol && col < word.startCol + word.answer.length) {
+          return word
+        }
+      } else if (word.direction === 'vertical') {
+        if (word.startCol === col && row >= word.startRow && row < word.startRow + word.answer.length) {
+          return word
+        }
+      }
+    }
+    return null
+  }
+
+  handleLetterInput(letter) {
+    if (!this.selectedCell) {
+      // Auto-select first empty cell
+      const firstEmpty = this.cells.find(c => !c.element.textContent)
+      if (firstEmpty) {
+        this.selectCell(firstEmpty.element, firstEmpty.row, firstEmpty.col)
+        this.highlightWord(firstEmpty.row, firstEmpty.col)
+      } else {
+        return
+      }
+    }
+
+    const { element, row, col } = this.selectedCell
+    element.textContent = letter
+    const key = `${row}-${col}`
+    this.userAnswers[key] = letter
+
+    this.saveGameState()
+    this.updateProgress()
+
+    // Check if word is complete
+    this.checkWordComplete()
+
+    // Move to next cell in word
+    this.moveToNextInWord()
+  }
+
+  handleDelete() {
+    if (!this.selectedCell) return
+
+    const { element, row, col } = this.selectedCell
+
+    if (element.textContent) {
+      // Delete current cell
+      element.textContent = ''
+      const key = `${row}-${col}`
+      delete this.userAnswers[key]
+      element.classList.remove('correct', 'incorrect')
+    } else {
+      // Move to previous cell and delete
+      this.moveToPreviousInWord()
+      if (this.selectedCell) {
+        const { element: prevElement, row: prevRow, col: prevCol } = this.selectedCell
+        prevElement.textContent = ''
+        const key = `${prevRow}-${prevCol}`
+        delete this.userAnswers[key]
+        prevElement.classList.remove('correct', 'incorrect')
+      }
+    }
+
+    this.saveGameState()
+    this.updateProgress()
+  }
+
+  moveToNextInWord() {
+    if (!this.selectedCell || !this.selectedWord) return
+
+    const { row, col } = this.selectedCell
+    const word = this.selectedWord
+
+    let nextRow = row
+    let nextCol = col
+
+    if (word.direction === 'horizontal') {
+      nextCol++
+      if (nextCol >= word.startCol + word.answer.length) return
+    } else {
+      nextRow++
+      if (nextRow >= word.startRow + word.answer.length) return
+    }
+
+    const nextCell = this.cells.find(c => c.row === nextRow && c.col === nextCol)
+    if (nextCell) {
+      this.selectCell(nextCell.element, nextCell.row, nextCell.col)
+    }
+  }
+
+  moveToPreviousInWord() {
+    if (!this.selectedCell || !this.selectedWord) return
+
+    const { row, col } = this.selectedCell
+    const word = this.selectedWord
+
+    let prevRow = row
+    let prevCol = col
+
+    if (word.direction === 'horizontal') {
+      prevCol--
+      if (prevCol < word.startCol) return
+    } else {
+      prevRow--
+      if (prevRow < word.startRow) return
+    }
+
+    const prevCell = this.cells.find(c => c.row === prevRow && c.col === prevCol)
+    if (prevCell) {
+      this.selectCell(prevCell.element, prevCell.row, prevCell.col)
+    }
+  }
+
+  checkWordComplete() {
+    if (!this.selectedWord) return
+
+    const word = this.selectedWord
+    let userWord = ''
+    let allFilled = true
+
+    if (word.direction === 'horizontal') {
+      for (let c = word.startCol; c < word.startCol + word.answer.length; c++) {
+        const key = `${word.startRow}-${c}`
+        const letter = this.userAnswers[key]
+        if (!letter) {
+          allFilled = false
+          break
+        }
+        userWord += letter
+      }
+    } else {
+      for (let r = word.startRow; r < word.startRow + word.answer.length; r++) {
+        const key = `${r}-${word.startCol}`
+        const letter = this.userAnswers[key]
+        if (!letter) {
+          allFilled = false
+          break
+        }
+        userWord += letter
+      }
+    }
+
+    if (allFilled) {
+      // Auto-validate word
+      if (userWord === word.answer) {
+        this.animateWordSuccess(word)
+      } else {
+        this.animateWordError(word)
+      }
+    }
+  }
+
+  animateWordSuccess(word) {
+    const cells = []
+
+    if (word.direction === 'horizontal') {
+      for (let c = word.startCol; c < word.startCol + word.answer.length; c++) {
+        const cellData = this.cells.find(cell => cell.row === word.startRow && cell.col === c)
+        if (cellData) cells.push(cellData.element)
+      }
+    } else {
+      for (let r = word.startRow; r < word.startRow + word.answer.length; r++) {
+        const cellData = this.cells.find(cell => cell.row === r && cell.col === word.startCol)
+        if (cellData) cells.push(cellData.element)
+      }
+    }
+
+    cells.forEach((cell, index) => {
+      setTimeout(() => {
+        cell.classList.remove('incorrect', 'highlighted')
+        cell.classList.add('correct', 'word-complete')
+
+        setTimeout(() => {
+          cell.classList.remove('word-complete')
+        }, 800)
+      }, index * 100)
+    })
+
+    this.showToast('Correct! 🎉')
+    this.checkPuzzleComplete()
+  }
+
+  animateWordError(word) {
+    const cells = []
+
+    if (word.direction === 'horizontal') {
+      for (let c = word.startCol; c < word.startCol + word.answer.length; c++) {
+        const cellData = this.cells.find(cell => cell.row === word.startRow && cell.col === c)
+        if (cellData) cells.push(cellData.element)
+      }
+    } else {
+      for (let r = word.startRow; r < word.startRow + word.answer.length; r++) {
+        const cellData = this.cells.find(cell => cell.row === r && cell.col === word.startCol)
+        if (cellData) cells.push(cellData.element)
+      }
+    }
+
+    cells.forEach(cell => {
+      cell.classList.remove('correct')
+      cell.classList.add('incorrect')
+
+      setTimeout(() => {
+        cell.classList.remove('incorrect')
+      }, 1000)
+    })
+
+    this.showToast('Probeer opnieuw')
+  }
+
+  checkPuzzleComplete() {
+    const allCorrect = this.cells.every(cell => {
+      const row = cell.row
+      const col = cell.col
+      const key = `${row}-${col}`
+      const userAnswer = this.userAnswers[key]
+      const correctAnswer = this.getCorrectAnswer(row, col)
+      return userAnswer === correctAnswer
+    })
+
+    if (allCorrect) {
+      setTimeout(() => this.showSuccess(), 500)
+    }
+  }
+
+  checkAllAnswers() {
+    this.cells.forEach(cell => {
+      const row = cell.row
+      const col = cell.col
+      const key = `${row}-${col}`
+      const userAnswer = this.userAnswers[key]
+      const correctAnswer = this.getCorrectAnswer(row, col)
+
+      if (userAnswer === correctAnswer) {
+        cell.element.classList.add('correct')
+        cell.element.classList.remove('incorrect')
+      } else if (userAnswer) {
+        cell.element.classList.add('incorrect')
+        cell.element.classList.remove('correct')
+      }
+    })
+
+    this.checkPuzzleComplete()
+  }
+
+  getCorrectAnswer(row, col) {
+    for (const word of this.currentPuzzle.words) {
+      if (word.direction === 'horizontal') {
+        if (word.startRow === row && col >= word.startCol && col < word.startCol + word.answer.length) {
+          return word.answer[col - word.startCol]
+        }
+      } else if (word.direction === 'vertical') {
+        if (word.startCol === col && row >= word.startRow && row < word.startRow + word.answer.length) {
+          return word.answer[row - word.startRow]
+        }
+      }
+    }
+    return null
+  }
+
+  useHintForCurrentWord() {
+    if (this.hints <= 0) {
+      this.showToast('Geen hints meer!')
+      return
+    }
+
+    if (!this.selectedWord) {
+      this.showToast('Selecteer eerst een woord')
+      return
+    }
+
+    const word = this.selectedWord
+    const emptyCells = []
+
+    if (word.direction === 'horizontal') {
+      for (let c = word.startCol; c < word.startCol + word.answer.length; c++) {
+        const key = `${word.startRow}-${c}`
+        if (!this.userAnswers[key]) {
+          emptyCells.push({ row: word.startRow, col: c, letter: word.answer[c - word.startCol] })
+        }
+      }
+    } else {
+      for (let r = word.startRow; r < word.startRow + word.answer.length; r++) {
+        const key = `${r}-${word.startCol}`
+        if (!this.userAnswers[key]) {
+          emptyCells.push({ row: r, col: word.startCol, letter: word.answer[r - word.startRow] })
+        }
+      }
+    }
+
+    if (emptyCells.length === 0) {
+      this.showToast('Woord al compleet!')
+      return
+    }
+
+    const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)]
+    const key = `${randomCell.row}-${randomCell.col}`
+    this.userAnswers[key] = randomCell.letter
+
+    const cellData = this.cells.find(c => c.row === randomCell.row && c.col === randomCell.col)
+    if (cellData) {
+      cellData.element.textContent = randomCell.letter
+    }
+
+    this.hints--
+    this.updateUI()
+    this.saveGameState()
+    this.showToast('Hint gebruikt!')
+    this.checkWordComplete()
+  }
+
+  clearGrid() {
+    if (confirm('Alles wissen?')) {
+      this.userAnswers = {}
+      this.cells.forEach(cell => {
+        cell.element.textContent = ''
+        cell.element.classList.remove('correct', 'incorrect', 'highlighted')
+      })
+      this.saveGameState()
+      this.updateProgress()
+      this.showToast('Gewist')
+    }
+  }
+
+  newGame() {
+    if (confirm('Nieuw spel starten?')) {
+      this.currentLevel = 1
+      this.userAnswers = {}
+      this.loadPuzzle(1)
+      this.saveGameState()
+      document.getElementById('sideMenu').classList.remove('active')
+      this.showToast('Nieuw spel gestart!')
+    }
+  }
+
+  showSuccess() {
+    this.coins += 50
+    this.hints += 1
+    this.updateUI()
+    this.saveGameState()
+    document.getElementById('successModal').classList.add('active')
+  }
+
+  nextPuzzle() {
+    document.getElementById('successModal').classList.remove('active')
+    this.currentLevel++
+    this.userAnswers = {}
+    this.loadPuzzle(this.currentLevel)
+    this.saveGameState()
+    this.showToast(`Niveau ${this.currentLevel}`)
+  }
+
+  updateProgress() {
+    const total = this.cells.length
+    const filled = Object.keys(this.userAnswers).length
+    const progress = total > 0 ? Math.round((filled / total) * 100) : 0
+
+    document.getElementById('progressFill').style.width = `${progress}%`
+    document.getElementById('progressText').textContent = `${progress}%`
+  }
+
+  updateUI() {
+    document.getElementById('coinsCount').textContent = this.coins
+    document.getElementById('hintsCount').textContent = this.hints
+    document.getElementById('levelNum').textContent = this.currentLevel
+  }
+
+  showToast(message) {
+    const toast = document.createElement('div')
+    toast.className = 'toast'
+    toast.textContent = message
+    document.body.appendChild(toast)
+
+    setTimeout(() => {
+      toast.remove()
+    }, 2500)
+  }
+
+  // LocalStorage - Game State Persistence
+  saveGameState() {
+    const state = {
+      currentLevel: this.currentLevel,
+      coins: this.coins,
+      hints: this.hints,
+      userAnswers: this.userAnswers,
+      timestamp: Date.now()
+    }
+    localStorage.setItem('crosswordGameState', JSON.stringify(state))
+  }
+
+  loadGameState() {
+    const saved = localStorage.getItem('crosswordGameState')
+    if (saved) {
+      const state = JSON.parse(saved)
+      this.currentLevel = state.currentLevel || 1
+      this.coins = state.coins || 100
+      this.hints = state.hints || 3
+      this.userAnswers = state.userAnswers || {}
+    }
+  }
+}
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+  new TabletCrosswordApp()
+})

tablet/tablet.css

@@ -0,0 +1,442 @@
+/* Tablet-Optimized Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  height: 100vh;
+  overflow: hidden;
+}
+
+.tablet-container {
+  width: 100vw;
+  height: 100vh;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Header */
+.tablet-header {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: white;
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  flex-shrink: 0;
+}
+
+.menu-btn {
+  background: rgba(255,255,255,0.2);
+  border: none;
+  color: white;
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.menu-btn:hover {
+  background: rgba(255,255,255,0.3);
+}
+
+.header-center {
+  text-align: center;
+}
+
+.header-center h1 {
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 2px;
+}
+
+.level {
+  font-size: 14px;
+  font-weight: 600;
+  opacity: 0.9;
+}
+
+.header-right {
+  display: flex;
+  gap: 12px;
+}
+
+.stat {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(255,255,255,0.2);
+  padding: 8px 14px;
+  border-radius: 20px;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+/* Main Content - Side by Side Layout */
+.main-content {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  background: #f8f9fa;
+}
+
+/* Grid Area (Left) */
+.grid-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+  overflow: hidden;
+}
+
+.progress-bar-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+  flex-shrink: 0;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 10px;
+  background: #e9ecef;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #48bb78, #38a169);
+  width: 0%;
+  transition: width 0.3s ease;
+}
+
+.progress-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: #4a5568;
+  min-width: 50px;
+}
+
+.grid-section {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: white;
+  border-radius: 12px;
+  padding: 15px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.grid-wrapper {
+  display: grid;
+  background: #a0aec0;
+  padding: 6px;
+  border-radius: 8px;
+  gap: 2px;
+}
+
+.grid-cell {
+  background: white;
+  border: 1px solid #cbd5e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  font-weight: bold;
+}
+
+.grid-cell.clue-cell {
+  background: linear-gradient(135deg, #4a5568, #2d3748);
+  color: white;
+  padding: 3px;
+  font-size: 9px;
+  font-weight: 600;
+  line-height: 1.2;
+  text-align: left;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.clue-text {
+  font-size: 9px;
+  line-height: 1.2;
+  word-wrap: break-word;
+  width: 100%;
+}
+
+.arrow {
+  position: absolute;
+  color: #4299e1;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.arrow-right {
+  right: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.grid-cell.blocked-cell {
+  background: #2d3748;
+  border-color: #2d3748;
+}
+
+.grid-cell.input-cell {
+  background: white;
+  transition: all 0.2s;
+}
+
+.grid-cell.input-cell:hover {
+  background: #f7fafc;
+  border-color: #4299e1;
+}
+
+.grid-cell.input-cell.active {
+  background: #ebf8ff;
+  border-color: #3182ce;
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3);
+}
+
+.grid-cell.correct {
+  background: #c6f6d5;
+  border-color: #48bb78;
+}
+
+.grid-cell.incorrect {
+  background: #fed7d7;
+  border-color: #f56565;
+}
+
+.grid-cell input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  text-align: center;
+  font-weight: bold;
+  color: #2d3748;
+  text-transform: uppercase;
+  font-size: inherit;
+  outline: none;
+}
+
+/* Controls Sidebar (Right) */
+.controls-sidebar {
+  width: 180px;
+  background: white;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  border-left: 1px solid #e9ecef;
+  flex-shrink: 0;
+}
+
+.control-btn {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  padding: 16px 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+  transition: all 0.3s;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+}
+
+.control-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.control-btn:active {
+  transform: translateY(0);
+}
+
+.control-btn i {
+  font-size: 24px;
+}
+
+.control-btn.primary {
+  background: linear-gradient(135deg, #48bb78, #38a169);
+}
+
+.control-btn.hint {
+  background: linear-gradient(135deg, #ed8936, #dd6b20);
+}
+
+/* Side Menu */
+.side-menu {
+  position: fixed;
+  top: 0;
+  left: -280px;
+  width: 280px;
+  height: 100vh;
+  background: white;
+  box-shadow: 2px 0 15px rgba(0,0,0,0.2);
+  transition: left 0.3s ease;
+  z-index: 1000;
+}
+
+.side-menu.active {
+  left: 0;
+}
+
+.menu-header {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: white;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.close-menu {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.menu-items {
+  padding: 15px 0;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 15px 20px;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background 0.2s;
+}
+
+.menu-item:hover {
+  background: #f8f9fa;
+}
+
+.menu-item i {
+  width: 20px;
+  color: #4facfe;
+}
+
+/* Modals */
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.6);
+  z-index: 2000;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
+
+.modal.active {
+  display: flex;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 20px;
+  padding: 30px;
+  text-align: center;
+  max-width: 400px;
+  width: 100%;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+}
+
+.success-icon {
+  font-size: 64px;
+  color: #48bb78;
+  margin-bottom: 16px;
+}
+
+.modal-content h2 {
+  color: #2d3748;
+  margin-bottom: 10px;
+  font-size: 24px;
+}
+
+.modal-content h3 {
+  color: #2d3748;
+  margin-bottom: 16px;
+  font-size: 20px;
+}
+
+.modal-content p {
+  color: #4a5568;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+
+.modal-btns {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #48bb78, #38a169);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  padding: 14px 24px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 16px;
+  flex: 1;
+  transition: transform 0.2s;
+}
+
+.btn-secondary {
+  background: #e2e8f0;
+  color: #4a5568;
+  border: none;
+  border-radius: 10px;
+  padding: 14px 24px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 16px;
+  flex: 1;
+  transition: transform 0.2s;
+}
+
+.btn-primary:hover,
+.btn-secondary:hover {
+  transform: scale(1.02);
+}

tablet/tablet.js

@@ -0,0 +1,476 @@
+// Tablet-Optimized Crossword Game
+class TabletCrosswordGame {
+  constructor() {
+    this.currentLevel = 1
+    this.coins = 100
+    this.hints = 3
+    this.currentPuzzle = null
+    this.userAnswers = {}
+    this.selectedCell = null
+    this.gridElement = document.getElementById('crosswordGrid')
+
+    this.init()
+  }
+
+  init() {
+    this.loadPuzzle(this.currentLevel)
+    this.setupEventListeners()
+    this.updateUI()
+  }
+
+  setupEventListeners() {
+    document.getElementById('menuBtn').addEventListener('click', () => {
+      document.getElementById('sideMenu').classList.add('active')
+    })
+    document.getElementById('closeMenu').addEventListener('click', () => {
+      document.getElementById('sideMenu').classList.remove('active')
+    })
+
+    document.getElementById('checkBtn').addEventListener('click', () => this.checkAnswers())
+    document.getElementById('clearBtn').addEventListener('click', () => this.clearGrid())
+    document.getElementById('hintBtn').addEventListener('click', () => this.showHintModal())
+    document.getElementById('skipBtn').addEventListener('click', () => this.skipPuzzle())
+
+    document.getElementById('useHintBtn').addEventListener('click', () => this.useHint())
+    document.getElementById('cancelHintBtn').addEventListener('click', () => this.hideHintModal())
+    document.getElementById('nextBtn').addEventListener('click', () => this.nextPuzzle())
+
+    document.getElementById('dailyPuzzle').addEventListener('click', () => {
+      this.showFeedback('Dagelijkse puzzel komt binnenkort!')
+      document.getElementById('sideMenu').classList.remove('active')
+    })
+    document.getElementById('levelSelect').addEventListener('click', () => {
+      this.showFeedback('Niveau selectie komt binnenkort!')
+      document.getElementById('sideMenu').classList.remove('active')
+    })
+  }
+
+  loadPuzzle(level) {
+    if (typeof DUTCH_PUZZLES !== 'undefined') {
+      this.currentPuzzle = DUTCH_PUZZLES[`level${level}`] || DUTCH_PUZZLES.level1
+    }
+
+    this.userAnswers = {}
+    this.renderGrid()
+    this.updateProgress()
+    this.updateUI()
+  }
+
+  renderGrid() {
+    if (!this.currentPuzzle) return
+
+    const grid = this.currentPuzzle.grid
+    const words = this.currentPuzzle.words
+
+    this.gridElement.innerHTML = ''
+
+    const rows = grid.length
+    const cols = Math.max(...grid.map(row => row.length)) + 1
+
+    // Tablet-specific calculation - fill available space
+    const cellSize = this.calculateCellSize(rows, cols)
+
+    this.gridElement.style.gridTemplateColumns = `repeat(${cols}, ${cellSize}px)`
+    this.gridElement.style.gridTemplateRows = `repeat(${rows}, ${cellSize}px)`
+
+    // Create grid cells
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        if (col === 0) {
+          const clueData = this.getClueForRow(row, words)
+          this.gridElement.appendChild(this.createClueCell(clueData, cellSize))
+        } else {
+          const gridCol = col - 1
+          const cellValue = grid[row]?.[gridCol] || '#'
+          this.gridElement.appendChild(this.createCell(cellValue, row, gridCol, words, cellSize))
+        }
+      }
+    }
+
+    this.attachCellListeners()
+  }
+
+  calculateCellSize(rows, cols) {
+    // Tablet layout: sidebar is 180px, header is ~70px, progress is ~50px, padding is 30px each side
+    const headerHeight = 70
+    const progressHeight = 50
+    const sidebarWidth = 180
+    const padding = 60 // Total padding
+
+    const availableHeight = window.innerHeight - headerHeight - progressHeight - padding
+    const availableWidth = window.innerWidth - sidebarWidth - padding
+
+    const maxFromHeight = Math.floor(availableHeight / rows)
+    const maxFromWidth = Math.floor(availableWidth / cols)
+
+    let cellSize = Math.min(maxFromHeight, maxFromWidth)
+
+    // Tablet range: 45-80px for better fit and touch
+    cellSize = Math.max(45, Math.min(80, cellSize))
+
+    console.log('Tablet grid:', {
+      screenWidth: window.innerWidth,
+      screenHeight: window.innerHeight,
+      availableHeight,
+      availableWidth,
+      rows,
+      cols,
+      cellSize,
+      totalGridHeight: rows * cellSize,
+      totalGridWidth: cols * cellSize
+    })
+
+    return cellSize
+  }
+
+  getClueForRow(row, words) {
+    return words.find(w => w.direction === 'horizontal' && w.startRow === row)
+  }
+
+  createClueCell(clueData, cellSize) {
+    const cell = document.createElement('div')
+    cell.className = 'grid-cell clue-cell'
+    cell.style.width = `${cellSize}px`
+    cell.style.height = `${cellSize}px`
+
+    if (clueData) {
+      const text = document.createElement('div')
+      text.className = 'clue-text'
+      text.textContent = clueData.clue
+
+      const arrow = document.createElement('div')
+      arrow.className = 'arrow arrow-right'
+      arrow.textContent = '→'
+
+      cell.appendChild(text)
+      cell.appendChild(arrow)
+    } else {
+      cell.classList.add('blocked-cell')
+    }
+
+    return cell
+  }
+
+  createCell(value, row, col, words, cellSize) {
+    const cell = document.createElement('div')
+    cell.className = 'grid-cell'
+    cell.style.width = `${cellSize}px`
+    cell.style.height = `${cellSize}px`
+    cell.dataset.row = row
+    cell.dataset.col = col
+
+    if (value === '#') {
+      const clueData = this.getClueAtPosition(row, col, words)
+      if (clueData) {
+        cell.classList.add('clue-cell')
+
+        const text = document.createElement('div')
+        text.className = 'clue-text'
+        text.textContent = clueData.clue
+
+        const arrow = document.createElement('div')
+        arrow.className = 'arrow arrow-right'
+        arrow.textContent = '→'
+
+        cell.appendChild(text)
+        cell.appendChild(arrow)
+      } else {
+        cell.classList.add('blocked-cell')
+      }
+    } else {
+      cell.classList.add('input-cell')
+      const input = document.createElement('input')
+      input.type = 'text'
+      input.maxLength = 1
+      input.dataset.row = row
+      input.dataset.col = col
+
+      const fontSize = Math.max(20, Math.min(36, cellSize * 0.5))
+      input.style.fontSize = `${fontSize}px`
+
+      const key = `${row}-${col}`
+      if (this.userAnswers[key]) {
+        input.value = this.userAnswers[key]
+      }
+
+      cell.appendChild(input)
+    }
+
+    return cell
+  }
+
+  getClueAtPosition(row, col, words) {
+    for (const word of words) {
+      if (word.direction === 'horizontal' && word.startRow === row && word.startCol - 1 === col) {
+        return word
+      }
+    }
+    return null
+  }
+
+  attachCellListeners() {
+    const inputs = this.gridElement.querySelectorAll('input')
+
+    inputs.forEach(input => {
+      input.addEventListener('input', (e) => this.handleInput(e))
+      input.addEventListener('focus', (e) => this.selectCell(e.target))
+      input.addEventListener('click', (e) => this.selectCell(e.target))
+    })
+
+    // Keyboard navigation
+    document.addEventListener('keydown', (e) => this.handleKeyboard(e))
+  }
+
+  handleInput(e) {
+    const input = e.target
+    const value = input.value.toUpperCase()
+    input.value = value
+
+    const row = parseInt(input.dataset.row)
+    const col = parseInt(input.dataset.col)
+    const key = `${row}-${col}`
+
+    this.userAnswers[key] = value
+
+    if (value && value.length === 1) {
+      this.moveToNextCell(input)
+    }
+
+    this.updateProgress()
+  }
+
+  selectCell(input) {
+    document.querySelectorAll('.grid-cell.input-cell').forEach(cell => {
+      cell.classList.remove('active')
+    })
+    input.parentElement.classList.add('active')
+    this.selectedCell = input
+  }
+
+  moveToNextCell(currentInput) {
+    const inputs = Array.from(this.gridElement.querySelectorAll('input'))
+    const currentIndex = inputs.indexOf(currentInput)
+
+    if (currentIndex !== -1 && currentIndex < inputs.length - 1) {
+      const nextInput = inputs[currentIndex + 1]
+      nextInput.focus()
+    }
+  }
+
+  handleKeyboard(e) {
+    if (!this.selectedCell) return
+
+    const inputs = Array.from(this.gridElement.querySelectorAll('input'))
+    const currentIndex = inputs.indexOf(this.selectedCell)
+
+    if (currentIndex === -1) return
+
+    switch (e.key) {
+      case 'ArrowRight':
+        if (currentIndex < inputs.length - 1) {
+          inputs[currentIndex + 1].focus()
+        }
+        e.preventDefault()
+        break
+      case 'ArrowLeft':
+        if (currentIndex > 0) {
+          inputs[currentIndex - 1].focus()
+        }
+        e.preventDefault()
+        break
+      case 'Backspace':
+        if (!this.selectedCell.value && currentIndex > 0) {
+          inputs[currentIndex - 1].focus()
+        }
+        break
+    }
+  }
+
+  checkAnswers() {
+    let correct = 0
+    let total = 0
+
+    const inputs = this.gridElement.querySelectorAll('input')
+    inputs.forEach(input => {
+      const row = parseInt(input.dataset.row)
+      const col = parseInt(input.dataset.col)
+      const userAnswer = input.value.toUpperCase()
+      const correctAnswer = this.getCorrectAnswer(row, col)
+
+      if (correctAnswer) {
+        total++
+        const cell = input.parentElement
+        if (userAnswer === correctAnswer) {
+          correct++
+          cell.classList.add('correct')
+          cell.classList.remove('incorrect')
+        } else if (userAnswer) {
+          cell.classList.add('incorrect')
+          cell.classList.remove('correct')
+        }
+      }
+    })
+
+    const percentage = total > 0 ? Math.round((correct / total) * 100) : 0
+
+    if (percentage === 100) {
+      this.showSuccess()
+    } else {
+      this.showFeedback(`${correct}/${total} correct (${percentage}%)`)
+    }
+  }
+
+  getCorrectAnswer(row, col) {
+    for (const word of this.currentPuzzle.words) {
+      if (word.direction === 'horizontal') {
+        if (word.startRow === row && col >= word.startCol && col < word.startCol + word.answer.length) {
+          return word.answer[col - word.startCol]
+        }
+      } else if (word.direction === 'vertical') {
+        if (word.startCol === col && row >= word.startRow && row < word.startRow + word.answer.length) {
+          return word.answer[row - word.startRow]
+        }
+      }
+    }
+    return null
+  }
+
+  clearGrid() {
+    if (confirm('Alles wissen?')) {
+      this.userAnswers = {}
+      const inputs = this.gridElement.querySelectorAll('input')
+      inputs.forEach(input => {
+        input.value = ''
+        input.parentElement.classList.remove('correct', 'incorrect')
+      })
+      this.updateProgress()
+      this.showFeedback('Gewist')
+    }
+  }
+
+  showHintModal() {
+    if (this.hints <= 0) {
+      this.showFeedback('Geen hints meer!')
+      return
+    }
+    document.getElementById('hintModal').classList.add('active')
+  }
+
+  hideHintModal() {
+    document.getElementById('hintModal').classList.remove('active')
+  }
+
+  useHint() {
+    if (this.hints <= 0) return
+
+    const inputs = Array.from(this.gridElement.querySelectorAll('input'))
+    const emptyInputs = inputs.filter(input => !input.value)
+
+    if (emptyInputs.length === 0) {
+      this.showFeedback('Alles al ingevuld!')
+      this.hideHintModal()
+      return
+    }
+
+    const randomInput = emptyInputs[Math.floor(Math.random() * emptyInputs.length)]
+    const row = parseInt(randomInput.dataset.row)
+    const col = parseInt(randomInput.dataset.col)
+    const correctAnswer = this.getCorrectAnswer(row, col)
+
+    if (correctAnswer) {
+      randomInput.value = correctAnswer
+      this.userAnswers[`${row}-${col}`] = correctAnswer
+
+      this.hints--
+      this.updateUI()
+      this.updateProgress()
+      this.showFeedback('Letter onthuld!')
+      this.hideHintModal()
+    }
+  }
+
+  showSuccess() {
+    this.coins += 50
+    this.hints += 1
+    this.updateUI()
+    document.getElementById('successModal').classList.add('active')
+  }
+
+  nextPuzzle() {
+    document.getElementById('successModal').classList.remove('active')
+    this.currentLevel++
+    this.loadPuzzle(this.currentLevel)
+    this.showFeedback(`Niveau ${this.currentLevel}`)
+  }
+
+  skipPuzzle() {
+    if (confirm('Overslaan?')) {
+      this.currentLevel++
+      this.loadPuzzle(this.currentLevel)
+      this.showFeedback('Overgeslagen')
+    }
+  }
+
+  updateProgress() {
+    const inputs = this.gridElement.querySelectorAll('input')
+    let filled = 0
+    let total = 0
+
+    inputs.forEach(input => {
+      total++
+      if (input.value) filled++
+    })
+
+    const progress = total > 0 ? Math.round((filled / total) * 100) : 0
+    document.getElementById('progressFill').style.width = `${progress}%`
+    document.getElementById('progressText').textContent = `${progress}%`
+  }
+
+  updateUI() {
+    document.getElementById('coinsCount').textContent = this.coins
+    document.getElementById('hintsCount').textContent = this.hints
+    document.getElementById('levelNum').textContent = this.currentLevel
+  }
+
+  showFeedback(message) {
+    const feedback = document.createElement('div')
+    feedback.style.cssText = `
+      position: fixed;
+      top: 90px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(0,0,0,0.85);
+      color: white;
+      padding: 12px 24px;
+      border-radius: 24px;
+      font-size: 16px;
+      font-weight: 600;
+      z-index: 9999;
+      animation: fadeInOut 2.5s ease;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    `
+    feedback.textContent = message
+    document.body.appendChild(feedback)
+
+    setTimeout(() => {
+      feedback.remove()
+    }, 2500)
+  }
+}
+
+// Animation
+const style = document.createElement('style')
+style.textContent = `
+  @keyframes fadeInOut {
+    0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
+    15% { opacity: 1; transform: translateX(-50%) translateY(0); }
+    85% { opacity: 1; transform: translateX(-50%) translateY(0); }
+    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
+  }
+`
+document.head.appendChild(style)
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+  new TabletCrosswordGame()
+})