# Trivia Rush — Mobile UI Kit

Hi-fi click-thru of the Trivia Rush mobile app, in an iOS frame. Open `index.html`.

## Flow

`Splash → Login → Categorías → Pregunta (×N) → [Racha takeover at 3] → Resumen → Ranking`

Use the side panel to jump to any screen.

## Files

- `index.html` — App shell + screen router with iOS device frame.
- `kit.css` — Shared button styles, animations, screen scaffolding.
- `Screens1.jsx` — `<SplashScreen>`, `<LoginScreen>`
- `Screens2.jsx` — `<CategorySelectScreen>`, `<BottomNav>`, `CATEGORIES` data
- `Screens3.jsx` — `<QuestionScreen>` (live timer, answer feedback), `<StreakScreen>`, `QUESTIONS` data
- `Screens4.jsx` — `<SummaryScreen>`, `<LeaderboardScreen>`
- `ios-frame.jsx` — iPhone bezel starter component

## Design conformance

All screens consume tokens from `../../colors_and_type.css`. The four answer pills use the answer-slot colors (A=yellow, B=pink, C=cyan, D=mint). Buttons use hard offset shadows (`--hard-violet`, etc) for the arcade feel. Motion uses `tr-bounce-in`, `tr-pulse`, `tr-shake`, `tr-float` keyframes.

## Caveats

- **No real backend** — questions are inline, leaderboard is mocked.
- The Android frame is not yet wired up — the same screens work in `<AndroidFrame>` when needed.