# Style System Findings

Primary styling lives in `src/styles.css`. It imports Tailwind v4 but most visible design is hand-written CSS.

Important repo convention:

- `styles.css` is append-only by convention.
- Do not redesign from the first match of a selector. Later rules override earlier rules.
- Examples: early base tokens start near `src/styles.css:3`, but important later board/HUD/mobile overrides appear much lower in the file.

Core tokens:

- `--paper`: warm page background
- `--paper-raised`: light raised card/tile paper
- `--ink`: primary dark text
- `--ink-muted`: secondary text
- `--rule`: borders and dividers
- `--rule-strong`: gold accent border
- `--green` and `--green-edge`: solved/correct and positive scoring
- `--yellow`: present/partial-match state
- `--shadow`: soft lifted tile/card shadow

Visual identity:

- Warm paper, muted ink, quiet borders.
- Serif titles and tile letters.
- Game UI feels closer to a printed newspaper puzzle than a glossy arcade game.
- Apple/orchard flavor exists, but is subtle: title emoji, shared apple SVG, bonus bough, account card apple, green/yellow/red accents.

Typography:

- Root font uses Inter/system sans.
- Brand, tiles, scores, overlays, and many expressive labels use Georgia or Iowan-style serif stacks.
- `Hud` title uses an editorial serif treatment.
- Tiles use Georgia with high weight and tight square placement.

Layout:

- App shell centers the game vertically.
- Mobile uses `100dvh`, safe-area padding, and constrained play width.
- Board and HUD share `--play-width`.
- The leaderboard currently overlays the blurred game, rather than replacing it.

Tile colors:

- `tile--absent`: raised cream paper
- `tile--present`: yellow/gold
- `tile--correct`: green
- `tile--selected`: ink outline and stronger shadow

Dialog/card system:

- `victory-overlay` and `victory-card` are reused by victory, loss, confirm, and bonus rescue flows.
- `leaderboard-overlay` and `leaderboard-card` have their own specialized styling.
- `account-card` has more orchard-specific polish: hero apple, glow, cream ring, warm card.
- In dark theme, account and leaderboard cards intentionally reset to a light card palette for readability.

Leaderboard styling:

- The leaderboard card is a raised paper card with a thin green/yellow top stripe.
- Header uses small uppercase eyebrow `SWAPPLE SCORES` and a large serif `Leaderboard`.
- Rows are ordered, tall, and scannable.
- First place uses a gold rank chip and subtle gold background.
- Current player highlighting exists in CSS, but current matching is display-name based.
- On iPhone live data, the modal nearly fills the width but still reads as a card, with internal row scroll.

Design-system gaps:

- Focus-visible styling is weak or inconsistent for icon, action, form, and modal buttons.
- Leaderboard has UI affordance for ranges in the API but no visible range control.
- There are leftover CSS rules for older leaderboard submit/current panels that current component markup does not appear to render.
- The modal layering can produce a "card floating over blurred board" feel. For mobile leaderboard-first design, this may undersell the importance of the leaderboard.