feat: implement mobile-first responsive design for speed memory quiz

Browse Source

Convert all CSS-in-JS responsive objects to mobile-first inline styles to eliminate CSS specificity conflicts and ensure no-scrolling mobile experience across all game phases.

Key improvements:
- Setup phase: mobile-friendly 2-column difficulty grid with optimized spacing
- Display phase: compact progress indicators and mobile-sized abacus container
- Input phase: responsive stats section with flexWrap and mobile button sizing
- Results phase: optimized card grids with mobile-first dimensions
- All phases: replaced color tokens with hex values, reduced font sizes and padding for mobile

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

...

This commit is contained in:

Thomas Hallock

2025-09-28 10:01:10 -05:00

parent ad444e108f

commit 13efc4d070

1 changed files with 295 additions and 349 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

644

apps/web/src/app/games/memory-quiz/page.tsx

File diff suppressed because it is too large Load Diff