# UI & design direction

## Concept: "Sports-hall scoreboard at a worship night"
Chunky, legible-from-the-back numbers; team colours do the shouting; everything else stays calm.
Spend the boldness in ONE place: the scoreboard's rank-change moment. Admin + judge UIs are quiet and functional.

## Tokens
| Name | Hex | Use |
|---|---|---|
| Stage | `#1B1640` | Scoreboard background (deep indigo, not black) |
| Floodlight | `#FFD23F` | Leader highlight, focus rings on scoreboard |
| Chalk | `#F5F7FA` | Admin/judge background |
| Ink | `#14213D` | Primary text on light |
| Signal | `#2EC4B6` | Saved/connected state |
| Alert | `#E63946` | Errors, penalties, hidden state |
Team colours are user-chosen; pick text colour per team by contrast (white or Ink).

Type:
- **Big Shoulders Display** (Google Fonts) — scoreboard numbers, team names, game titles. Tabular numbers.
- **Atkinson Hyperlegible** — all body/UI text (readable on phones + projector).
Sentence case everywhere. No all-caps labels.

## Screens

### Scoreboard (16:9)
```
┌──────────────────────────────────────────────────────────────┐
│ Worship Game Night                     Game 3 of 8: Karaoke  │
│                                                              │
│  1  ████ Lions                                         142   │
│  2  ████ Eagles                                        128   │
│  3  ████ Sharks                                        120   │
│  4  ████ Wolves                                         97   │
│                                                              │
│                                            ● live    ⛶       │
└──────────────────────────────────────────────────────────────┘
```
- Each row: rank, colour bar (full-height block in team colour), name, total. Row height scales with team count to fill the screen.
- Leader row gets a Floodlight outline.
- On update: rows slide to new positions (FLIP animation, ~600ms), changed totals count up. Respect `prefers-reduced-motion` (instant swap).
- Hidden: team colour blocks in alphabetical order, totals replaced by a single centred message "Scores are hidden — final reveal soon".
- Reveal mode: rows appear bottom-up, one per admin click, with a short drum-roll pause effect (visual only).

### Admin control room (desktop/laptop)
```
┌ Games ─────────┐┌ Karaoke · live ───────────────────────┐┌ Scoreboard ─────┐
│ ✓ Name that... ││ [Prev] [Next]   Spotlight: [Lions ▾]  ││ (●Visible)Frozen│
│ ✓ Guess lyric  ││                                       ││   Hidden        │
│ ▶ Karaoke      ││ Team   Pitch Energy Lyrics Stage Crowd││ [Open] [Reveal] │
│ ○ Charades     ││ Lions   4.3   5.0    3.7   4.0   4.7  ││                 │
│ ○ Bible quiz   ││ Eagles  …                             │├ Bonus ──────────┤
│                ││ Judges: Eben ✓✓✓✓  Melissa ✓✓✗✗       ││ Lions +1 +5 +10 │
│                ││ Notes (only you): …                   ││ …               │
└────────────────┘└───────────────────────────────────────┘└─────────────────┘
```
Collapses to stacked panels on tablet.

### Judge (phone)
```
┌─────────────────────────┐
│ Karaoke                 │
│ Judging as Melissa      │
│ ▸ Judge notes           │
├─────────────────────────┤
│ ★ Now: Lions            │
│ Pitch                   │
│ [1][2][3][4][5]         │
│ Energy                  │
│ [1][2][3][4][5]         │
│ …              Saved ✓  │
├─────────────────────────┤
│ Eagles …                │
└─────────────────────────┘
```
Selected block filled in team colour. Tap the selected block again to clear.

## Copy
Plain verbs: "Next game", "Hide scores", "Freeze scores", "Show scores", "Add bonus", "Copy judge link".
Errors say what happened + what to do: "This link has been turned off. Ask the host for a new one."