[Epic] Game Setup UI Overhaul

Game Setup UI Overhaul

Problem

Current game setup UI has critical mobile UX issues:

• Match panel table causes vertical scroll on mobile devices
• Layout is cramped and not mobile-first
• Board headers lack important game state info (score, steps)
• No UI foundation for AI difficulty selection

Solution

Restructure the game setup flow with mobile-first design:

Phase 1: Remove Match Panel (Priority)

• Remove .match-panel table that shows game slots (#2b78597c, etc.)
• Fixes mobile scroll issues immediately

Phase 2: 3-Column Layout Restructure

Restructure .game-action-bar to 3 columns:

• Column 1: Preset list (vertical) + gear icon placeholder
• Column 2: Opponent selection (AI/hot seat/mix)
• Column 3: Play button + user/match ID

Phase 3: Enhanced Board Headers

Board headers take on more responsibility:

• Player name + player type (AI difficulty display)
• Live score + step count
• Foundation for AI selector dropdown

Phase 4: AI Difficulty Selector

• Dropdown in board header or opponent column
• Select from: Rookie, Strategist, Grandmaster
• Lock at match creation (not mid-game)

Success Criteria

• [x] No vertical scroll on mobile game setup
• [x] Clean 3-column responsive layout
• [x] Board headers show all game state
• [x] Foundation ready for AI personality selection

Technical Notes

• Mobile-first CSS Grid layout
• Preserve existing preset selection UX
• Board headers get score/steps from game state
• AI selector UI only (backend integration separate)

Related: #1491 (difficulty analyzer foundation)