MEDIUM: Improve Mode Selection UI - Replace Dropdown with Visual Mode Cards

[nathanbangwa243]

Issue

Game mode selector is a plain dropdown with no descriptions. Users cannot understand what each mode offers before selecting it.

Current State

<select name="mode">
  <option value="bingo">Bingo</option>
  <option value="scavenger">Scavenger Hunt</option>
  <option value="card">Card Deck Shuffle</option>
</select>

Impact

• Low discoverability of features
• Users must trial-and-error to understand modes
• No visual indication of selected mode in-game
• Mobile users struggle with dropdown accessibility

Recommended Implementation

Replace dropdown with visual mode cards:

• Card layout showing mode name, icon/emoji, one-line description
• Selected state indicator (border, background, checkmark)
• Form submits on card click or button press
• In-game header shows current mode as badge or subheading

Mode Card Content

• Bingo: "Mark 5 in a row to win" 🎮
• Scavenger Hunt: "Check off all 24 items in your list" ✅
• Card Deck Shuffle: "Draw a random question and share" 🎰

Files to Update

• app/templates/components/start_screen.html (replace dropdown with cards)
• app/static/css/app.css (add card styling)
• app/templates/components/game_screen.html (add mode badge to header)
• app/templates/components/scavenger_list.html (add mode badge to header)
• app/templates/components/card_deck.html (add mode badge to header)