Premium Mobile-First UX

The dual-mode app shell is the structural backbone. `useDeviceClass({ cutoff: 640 })` determines whether to render `BottomTabNav` or `SidebarNav` from a single `AppShell` component, with no route change or data remount when the viewport crosses the cutoff. The mobile shell exposes five slots — Home, Matches, Rankings, License, More — while the desktop shell uses a 260 px sidebar and a max-1024 px centred content column.

The home screen leads with the next match as a full-bleed hero: a LinearGradient from primary to secondary, a Fraunces display title, a live countdown, CalendarClock and MapPin meta and a sticky CTA. Below sit two MiniCards (License + Ranking), a recent-results strip and a discover/getting-started slot. Pull-to-refresh works on every primary view (Home, Matches, Rankings, License) using `RefreshControl` tinted with the primary colour, calling the same loader as the initial fetch so refresh behaviour is uniform.

The license tab is a fullscreen card with a hologram gradient ring (primary→secondary→accent), a Fraunces display title, a 220 px QrPlaceholder and status pin. `verifyLicense()` falls back to a signed JWT bundle from cache when offline, surfacing an explicit offline-verification banner. The QrPlaceholder renders a deterministic 25×25 SVG bitmap from the license payload using three QR finder patterns and an FNV-1a-seeded LCG — documented as not scannable; federation scanners read the visible license number — and is swappable for a real QR component without touching surrounding layout.

Rankings shows a "You are #N" highlight card above the leaderboard with current position, Movement (ArrowUp/Down/Minus) and a 56×18 SVG sparkline; every row carries position, name, club, movement and sparkline. The current-user row gets primary-tint background and border. Matches uses MatchRow components with Round badges, LIVE pins, W/L badges, CalendarClock+MapPin meta and chevron CTAs, separated into Upcoming and Recent.

More is the overflow surface with an identity card (avatar + tenant badges), a sign-in CTA for guests, grouped rows for Profile, Equipment, Discover, Search, Community, Weather and Settings, plus a logout at the bottom. Root-level OfflineBanner uses the new Banner primitive (variants info/success/warning/error/offline, optional icon, title, message, action and dismiss) and shows last-sync time plus a Sync-now CTA when pending writes exist. The tenant-branded ThemeProvider hooks `useTenantBranding()` into `activeTenantId` changes, fetching `/me/tenant-profile` and applying a theme via `applyTenantTheme()`, cached per tenant ID. Haptic feedback is gated per interaction via `useHaptics().fire('selection')` on taps and `'warning')` on logout, respecting both accessibility toggle and OS reduce-motion.