# 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`