# 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` | Penalty/hidden accents, borders, status dots |
| Alert strong | `#C1121F` | Error text on light backgrounds, and red fills under white text (Alert itself is only 4.0:1 on white) |
Team colours are user-chosen; pick text colour per team by contrast (white or Ink).

Type:
- **Big Shoulders** (Google Fonts; formerly "Big Shoulders Display") — 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.

### Buzzer (phone)
```
┌─────────────────────────┐
│        ● Lions          │
│       Bible quiz        │
│                         │
│       ╭─────────╮       │
│       │         │       │
│       │  Buzz   │       │
│       │         │       │
│       ╰─────────╯       │
│                         │
│  Ready. Tap to buzz in. │
└─────────────────────────┘
```
One round button in the team's colour, as big as the screen allows; it reacts on touch-down, not
on release. After buzzing it shows the team's place ("1st", "2nd"), then ✓ or ✗ once the host
marks the answer. While it's the team's turn to answer, and when it got it, the whole screen
turns the team's colour. Greyed out while there is no buzzer game.

On the scoreboard the buzzer is a banner in the answering team's colour above the standings:
"Lions buzzed!" with the waiting teams in small text, "Eagles to answer" when the turn passes,
"Eagles got it!" at the end. It pops in on each change; reduced motion shows it without the pop.

In the control room the answering team's row is highlighted (Floodlight) and carries the two
buttons "Got it +1" and "Wrong"; marked rows show ✓ / ✗ and an "Undo".

### On screen: questions, sounds, videos
```
┌──────────────────────────────────────────────────────────────┐
│ Worship Game Night                  Game 5 of 8: Bible quiz  │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │                  Who built the ark?                      │ │
│ │                      ▓ Noah ▓                            │ │
│ └──────────────────────────────────────────────────────────┘ │
│  1  ████ Lions                                         142   │
│  2  ████ Eagles                                        128   │
└──────────────────────────────────────────────────────────────┘
```
- Question: a bordered panel above the standings, text in Big Shoulders, sized down as it gets
  longer; an optional picture above the text. The revealed answer is a Floodlight block that
  pops in. The standings rows shrink to make room.
- Sound: a slim panel "♪ Listen…" ("Paused" while paused), with the answer under it once revealed.
- Video: fills the screen. The header and standings make way and the page padding shrinks; the
  timer, the buzzer banner and the footer stay.
- While the browser still blocks sound, a Floodlight note says "Sound is off — click “Turn sound on”".
- Control room: a list like the buzzer panel — the item on screen is highlighted (Floodlight),
  shown items carry a ✓, answers are visible to the host in small text.

## 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."