Restructure game-action-bar to 3-column layout

Problem

Current .game-action-bar layout is not mobile-optimized and doesn't provide clear structure for different selection types.

Solution

Restructure .game-action-bar to responsive 3-column CSS Grid:

Column 1: Preset Selection

• Move existing preset grid to vertical list format
• Add gear icon (⚙️) placeholder (disabled) for future settings
• Presets: fewer colors | 98 original | bigger board | etc.

Column 2: Opponent Selection

• Create opponent selection area
• Options: AI | hot seat | play with friends
• Foundation for AI personality picker

Column 3: Play & Info

• Move Play button here
• Display user name + match ID above button
• Clean call-to-action area

Acceptance Criteria

• [x] CSS Grid 3-column responsive layout
• [x] Preset selection moved to Column 1 (works on mobile)
• [x] Opponent selection in Column 2
• [x] Play button + info in Column 3
• [x] Layout works on mobile and desktop
• [x] Existing preset selection functionality preserved

Technical Notes

• Mobile-first CSS Grid with proper breakpoints
• Preserve existing Vue reactivity for preset selection
• .game-action-bar-container class to be restructured
• Test responsive behavior thoroughly

Parent: #22091
Depends on: #22092 (match panel removal)