# UI_GUIDE.md

## Pages
| File | Purpose | Auth |
|---|---|---|
| `index.html` | Landing: title, tagline, Login/Register buttons | public |
| `register.html` / `login.html` | forms | public |
| `create-hero.html` | name + class picker with class descriptions | needs login, no hero |
| `game.html` | main dashboard (see layout) | needs login + hero |
| `shop.html` | buy/sell tabs | needs hero |
| `leaderboard.html` | tabs: Level / Gold / Kills | public |

Auth guard on the client: on page load call `/api/auth/me`; redirect as needed. (Server still enforces — client redirect is UX only.)

## game.html layout
```
┌ Header: logo • hero name • Lv • gold • Logout
├ Left column:  Hero card (HP bar, XP bar, Energy bar + regen timer), stats, unspent points [+]
├ Centre:       Tabs → Hunt | Expedition | Inventory
│               Hunt: zone cards (locked ones greyed with "Reach Lv X")
│               Combat log panel: replays rounds with short delay, then shows summary
└ Right column: Equipment slots (weapon/armor/trinket), recent combat history
```
Mobile (< 700px): single column; tabs become a bottom nav.

## Theme: "Ember & Parchment" (dark fantasy)
CSS variables in `theme.css`:
```
--bg: #14110f;  --panel: #211b17;  --panel-2: #2c231d;
--text: #eadfce; --muted: #a59a8a;
--accent: #e2822b (ember orange); --accent-2: #f2c14e (gold);
--danger: #c0392b; --success: #4f9d69; --info: #4a7fb0;
--border: #3a2f27;
Rarity: common #b8b0a3, uncommon #5fb36b, rare #4a8fe0, epic #a45ee0, legendary #f2a23a
```
Fonts: system serif stack for headings (`Georgia, 'Times New Roman', serif`), system sans for body. No external font/CDN requests (CSP + offline friendly).

## Components (build once in components.css)
`.panel`, `.btn` (+ `.btn-primary`, `.btn-danger`, `:disabled`), `.bar` with `.bar-fill` (hp/xp/energy variants), `.tabs`, `.card`, `.toast`, `.tooltip`, `.badge` (rarity), `.table`, `.modal`.

## UX rules
- Every action button shows a loading state and is disabled while the request is in flight (prevents double-clicks).
- Show energy cost on the button: `Hunt (5⚡)`. Disable if not enough energy, and say why.
- Errors → toast from `error.message`. Successes → toast or inline result.
- Numbers formatted with thousands separators.
- Countdowns update every second client-side but **re-sync with the server** after each API call.
- Accessible basics: labels on inputs, buttons are `<button>`, colour is not the only signal, focus outlines kept.
- No images required: use emoji/CSS shapes for icons if no art is available (⚔️ 🛡️ 💍 🧪 ⚡ 💰).

## Copy tone
Short, flavourful, never longer than 2 lines. e.g. "A Meadow Wolf lunges from the tall grass!"