MEDIUM: Improve Touch Targets and Mobile Spacing for Accessibility

[nathanbangwa243]

Issue

Mobile touch interactions are suboptimal due to tight spacing and minimal button padding.

Current State

• Bingo board: .gap-1 (0.25rem = 4px) between squares
• Min button height: 44px (acceptable) but padding varies
• No explicit mobile breakpoints for responsive touch targets

Impact

• Difficult to tap accurately on small screens (< 600px width)
• Accidental adjacent square touches
• Button padding insufficient for thumbs (best practice: ≥ 12px)
• No active state animations for tactile feedback

WCAG Compliance

• WCAG 2.5.5 Target Size: Minimum 44x44px CSS pixels
• Mobile best practice: 48px+ spacing for touch targets

Recommended Implementation

• Add media query: @media (max-width: 640px) { .gap-1 { gap: 0.5rem; } }
• Ensure button padding minimum 12px on mobile
• Add scale-down animation on :active for tactile feedback
• Increase bingo square min-height to 64px on small screens
• Test on: iPhone SE (375px), Android 5" phones (360px)

Files to Update

• app/static/css/app.css (add mobile media queries)
• app/templates/components/bingo_board.html (verify button classes)
• app/templates/components/scavenger_list.html (verify button sizing)