Rework the end screen figures, mode picker, corners and race view

End screen
- Every figure is now a dim label directly over its value, the two centred on
  each other, grouped by what they qualify: RAW and PB under WPM, ERR and
  CONSISTENCY under ACC, KEYSTROKES and CHARACTERS either side of TIME. The
  row is a grid so TIME sits on the graph's exact centre line rather than
  drifting with its neighbours' widths.
- Errors go back onto the wpm line. Their own y axis implied a magnitude a
  mistake does not have; what matters is when one happened.
- Graph hover reads "wpm ... raw ... time" - the figures first, the second
  they happened in as the qualifier.

Mode picker
- Opens from the Single Player button itself, and choosing a mode starts it:
  picking what to type and starting it are one action. The control has now
  been a chevron notched into that button, a caption between the two buttons,
  a pill above them and a chip row below them; as the button's own menu it
  needs no separate real estate at all.

Corners
- Settings and Store move to the bottom-left. The top-left is the wordmark's
  alone.
- The global racer count is gone from the home screen - it is not something
  you can act on there. The Friends control carries "N online" instead, which
  is.
- Presence: users gain a last_seen column, touched at most once a minute per
  active user on any authenticated request, and the friends list reports who
  has been seen inside a five-minute window.

Multiplayer race view
- The standings move to the middle of the screen, the space the end screen's
  graph occupies, and now include your own row rather than opponents only.
  Pinned to the top-left corner they put what you are racing against in your
  peripheral vision and left out the one bar you most need to see.

Programming mode
- Snippets carry an explanation of what the code does. Shown under the passage
  while you type in single player; in multiplayer that space belongs to the
  standings, so it waits for the end screen, where it appears either way.

2 files changed, 10 insertions, 2 deletions

diff --git a/web/tests/test_account_and_store.py b/web/tests/test_account_and_store.py
index ce1b9c9..f7c219c 100644
--- a/web/tests/test_account_and_store.py
+++ b/web/tests/test_account_and_store.py
@@ -40,7 +40,11 @@ def run():
             # typing screen itself, not just in the store's own UI.
             page.click('[data-action="menu"]')
             page.wait_for_timeout(300)
-            page.click('[data-action="start"]')
+            # Single Player opens the mode picker; choosing a mode starts the
+            # test. It used to start the last-used mode on one click.
+            page.click('[data-action="pick-mode"]')
+            page.wait_for_selector('.sp-popover .mode-popover-item[data-mode="quotes"]', timeout=10000)
+            page.click('.sp-popover .mode-popover-item[data-mode="quotes"]')
             page.wait_for_timeout(500)
             caret_color = page.evaluate(
                 "() => getComputedStyle(document.querySelector('.typing-game')).getPropertyValue('--caret-color').trim()"
diff --git a/web/tests/test_typing_flow.py b/web/tests/test_typing_flow.py
index 251ff56..44bdc28 100644
--- a/web/tests/test_typing_flow.py
+++ b/web/tests/test_typing_flow.py
@@ -19,7 +19,11 @@ def run():
             # asserting on the exact source casing.
             assert "typerpunk" in page.locator(".main-menu h1").inner_text().lower()
 
-            page.click('[data-action="start"]')
+            # Single Player opens the mode picker; choosing a mode starts the
+            # test. It used to start the last-used mode on one click.
+            page.click('[data-action="pick-mode"]')
+            page.wait_for_selector('.sp-popover .mode-popover-item[data-mode="quotes"]', timeout=10000)
+            page.click('.sp-popover .mode-popover-item[data-mode="quotes"]')
             page.wait_for_selector(".typing-game", timeout=10000)
 
             input_el = page.locator(".typing-input")