inital-release

public/mobile.css

@@ -113,9 +113,9 @@ body {
 .grid-section {
   flex: 1;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
-  padding: 5px;
+  padding: 5px 5px 0 5px;
   overflow: hidden;
   background: #f8f9fa;
 }

public/mobile.js

@@ -100,10 +100,10 @@ class MobileCrosswordGame {
   }
 
   calculateCellSize(rows, cols) {
-    // Mobile-specific calculation
+    // Mobile-specific calculation - maximize grid size
     const headerHeight = 50
     const progressHeight = 35
-    const controlsHeight = 75
+    const controlsHeight = 70
     const padding = 16
 
     const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - padding
@@ -114,8 +114,18 @@ class MobileCrosswordGame {
 
     let cellSize = Math.min(maxFromHeight, maxFromWidth)
 
-    // Constrain to 30-42px for mobile readability
-    cellSize = Math.max(30, Math.min(42, cellSize))
+    // 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
   }

public/redirect.js

@@ -11,20 +11,27 @@
 
   // Detect device type
   const width = window.innerWidth
-  const isMobileDevice = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
-  const isTabletDevice = /iPad|Android/i.test(navigator.userAgent) && !isMobileDevice
+  const height = window.innerHeight
+  const userAgent = navigator.userAgent
+
+  // Better mobile detection
+  const isMobilePhone = /Android.*Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)
+  const isTabletDevice = /iPad|Android(?!.*Mobile)/i.test(userAgent)
 
   let targetPage = null
 
   // Determine target page based on device and screen size
-  if (width < 600 || (isMobileDevice && width < 768)) {
-    // Mobile: < 600px or mobile device < 768px
+  if (isMobilePhone && width < 768) {
+    // Mobile phones: detected mobile device < 768px
     targetPage = 'mobile.html'
-  } else if (width >= 600 && width < 1024) {
-    // Tablet: 600-1024px
+  } else if (width < 500) {
+    // Small screens: force mobile
+    targetPage = 'mobile.html'
+  } else if (isTabletDevice || (width >= 500 && width < 1200)) {
+    // Tablets: iPad/Android tablet OR 500-1200px
     targetPage = 'tablet.html'
   } else {
-    // Desktop: >= 1024px
+    // Desktop: >= 1200px
     targetPage = 'index.html'
   }
 

public/tablet.js

@@ -95,7 +95,7 @@ class TabletCrosswordGame {
     const headerHeight = 70
     const progressHeight = 50
     const sidebarWidth = 180
-    const padding = 60 // 15px on each side x2
+    const padding = 60 // Total padding
 
     const availableHeight = window.innerHeight - headerHeight - progressHeight - padding
     const availableWidth = window.innerWidth - sidebarWidth - padding
@@ -105,8 +105,20 @@ class TabletCrosswordGame {
 
     let cellSize = Math.min(maxFromHeight, maxFromWidth)
 
-    // Tablet range: 50-90px for good visibility and touch
-    cellSize = Math.max(50, Math.min(90, cellSize))
+    // 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
   }