Responsive Design

WEFA must work on iPhone SE (375px) and iPad Air (820px). Touch-first, no hover-only interactions.

Target Devices

Device	Width	Considerations
iPhone SE	375px	Minimum supported width
iPhone 15	393px	Primary phone target
iPad Air (portrait)	820px	Primary tablet target
iPad Air (landscape)	1180px	Secondary tablet target

Touch Targets

All interactive elements must be at least 44x44px per Apple Human Interface Guidelines.

Bottom tab bar: 56px height on phone, 64px on tablet.

Typography

• 16px minimum on all input fields (prevents iOS Safari zoom on focus)
• Body text should be readable at arm's length on tablet

Safe Areas

Use env(safe-area-inset-*) for content positioning to respect notches and home indicators:

padding-bottom: env(safe-area-inset-bottom);
padding-top: env(safe-area-inset-top);

Layout Rules

• Full-width cards on phone, max-width constrained on tablet
• Bottom sheets should not exceed 80% of viewport height
• Camera/AR views are always full-screen
• Game boards scale to fit available width while maintaining aspect ratio

Performance Targets

• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s
• Total Bundle Size: monitor for large chunks
• 3D assets loaded lazily, never blocking initial render

AR Considerations

• WebXR AR only available on Android Chrome
• iPad and desktop always get non-AR 3D canvas fallback
• Never show AR-only UI or block features behind AR availability