Mobile parity audit — every state touch-reachable

> **Skills:** TypeScript · mobile testing · DevTools debugging · responsive CSS
> **Time:** ~8 hours
> **Good for:** QA-minded engineers · mobile-first devs · iPad / phone Star Wars readers
> **Difficulty:** Beginner-friendly to Intermediate

---

## Context

The desktop layout has been the development focus. The mobile layout exists
(`md:hidden` branch in `AppShell`, `DatapadDrawer` for the bottom sheet) but
hasn't been systematically validated.

## Goal

Test every interactive state at 375px width. Document failures. Fix.

## Where to start

States to verify:
- Galaxy view: orbit + zoom on touch, planet click, Atlas toggle, plot-route mode
- Timeline view: scrubber drag on touch, era marker visibility, faction
territory legibility
- Lineage view: 3D force-graph touch handling
- Datapad drawer: peek/expand, scroll inside, Crawl button, pivot buttons
- Search palette: keyboard alternatives via mobile UI
- Holo-stage: full-bleed on mobile (no clipped overlays)
- Opening crawl: skip controls reachable

Test at 375px (iPhone SE), 414px (iPhone Pro Max), 768px (iPad portrait).

## Acceptance criteria

- A list of issues found, with severity (P0 = blocking, P1 = degraded, P2 = nit)
- All P0s fixed
- A "mobile checklist" doc added under `docs/`
- No new horizontal scrollbars on the chrome (canvas can pan)

Start in the AppShell `md:hidden` branch and `DatapadDrawer`, then exercise every listed state at 375px, 414px, and 768px using touch and DevTools. Record P0/P1/P2 failures, fix all P0 issues, add the mobile checklist under `docs/`, and verify that chrome has no new horizontal scrollbar while canvas panning remains allowed.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.