# SmashDay redesign — "Season Mode"

A ground-up UX for SmashDay: every feature and workflow of the current product,
re-thought and rebuilt as a clickable, responsive HTML prototype. No backend, no
framework — each screen is a real page with realistic data, walkable end-to-end
from `index.html`.

*(v1 of this prototype was a light, editorial theme — "Clubhouse & Floodlight".
v2 replaced the skin wholesale with the sports-game direction below; the layouts,
flows, and product laws carried over unchanged.)*

## The one idea

The app should feel like the menu system of a modern sports game — EA FC / NBA 2K
season mode — because that is exactly what a tournament *is*: a season with
fixtures, a table, a squad, and match nights. So:

- **Warm ember-charcoal gradient ground** with two slow, drifting stadium-light
  glows behind everything.
- **Gradient panel cards** with hairline light strokes and soft depth.
- **Volt numerals** (`#ff5c1a` — the original SmashDay court-line orange — glowing, italic, counting up on load) for the one
  number each surface is about — scores, money, the public code.
- **Floodlit courtside surfaces** are still their own place: the deepest, most
  glowing panels in the system, so "live" reads as somewhere you *go*.
- **Full-showtime motion**: staggered card entrances, shine sweeps on primary
  buttons, pulsing LIVE dots, count-up figures — all of it stopping under
  `prefers-reduced-motion`, and the public page still prints as a plain paper
  draw sheet.

## Colour discipline

| System | Treatment | Why |
|---|---|---|
| Action | the SmashDay orange, gradient to amber on solids | a single "this does something" colour |
| Energy | volt, glowing | big figures, the code, XP-style highlights — never body text |
| LIVE | crimson, always with the word or pulsing dot | the broadcast convention, reserved |
| Status | panel surface + coloured edge rail + a sentence | colour never carries meaning alone |
| Teams | 8 vivid hues with glows, dark ink | categorical — identity, not rank |
| Skill levels | bright ordinal ramp, dark ink, positional | rank, survives renames |
| Roles | line-work only (borders/text, never fills) | jobs are labels, not factions |

## Type

**Kanit** (heavy true italics) — display, uppercase-italic for mastheads and every
big numeral: the jersey-and-broadcast voice. **Chakra Petch** — HUD labels:
eyebrows, table headers, the LIVE chip. **Inter** — body and table numerals
(tabular figures). **Spline Sans Mono** — the two artifact-objects: the public
code and capability links.

## What changed beyond the skin (from the original app)

1. **Reversals got a first-class UI.** The log has always supported
   `collection.reversed` / `expense.reversed`, but no screen ever offered it.
   Money has "Reverse…" on every ledger row, with the append-only story told
   plainly: *"A reversal is a new entry that cancels this one. Nothing is ever
   deleted."*
2. **The two unbuilt screens are designed ahead of build.** "On court" (the
   referee's working view) and "What I owe" (a player's dues) exist as full
   designs, each flagged *designed ahead of build*.
3. **Navigation is grouped by tempo** — Now / Play / People / Team league /
   Money / Admin — filtered per role; the shell keeps the tournament switcher,
   the person-and-role row, and the three-state sync strip on every screen.
4. **The public page pins its tabs to the phone's bottom edge**, stays printable
   as the draw sheet, and keeps the freshness gauge that admits staleness.
5. Every product law is preserved: peek-then-accept links, save-this-link as the
   loudest object, honest refusals per role, honest "not built" panels, two-step
   destructive actions that name their consequence, grade-locked pickers,
   phone numbers behind per-row reveal, nothing personal on public surfaces.

## Driving the prototype

Open `index.html`. Every page carries a floating **UX ▸** control (bottom right):

- **Viewing as** — organizer, co-organizer, treasurer, referee, captain, player,
  spectator. The menu, in-page affordances, and refusal screens all follow.
  `?as=captain` on any URL deep-links a role.
- **Sync state** — saved / pending / refused, shown in the shell on every screen.
- **Screen state** — each screen's named states (e.g. claim: offered → granted →
  taken → revoked → network-broke).

The prototype bar, and everything it does, is scaffolding — not part of the design.