word/MOBILE_SETUP.md

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