Add multiplayer bots, typing languages, and rework the UI layout

Multiplayer
- Quick match: POST /api/multiplayer/quickmatch returns whichever room is
  still filling, or opens one. Players never see a room code; joining by
  code stays for racing specific people.
- Bots fill quick-match rooms after a short wait so a new game is never an
  empty lobby. They only ever join quick-match rooms, never a room opened
  by code. One or two per room, drawn from separate ~40 and ~80 WPM tiers so
  two bots are never near each other's pace, and they stall to correct
  mistakes rather than typing a clean straight line.
- Live player count via GET /api/multiplayer/online, shown on the
  Multiplayer control and under the main menu's Multiplayer button.
- Per-racer colours: you are the theme accent, opponents take distinct hues
  that stay the same from lobby to race.
- The countdown no longer holds the room lock for its full three seconds,
  which is what reset clients mid-countdown.

Typing languages
- 16 languages for the generated-word modes, each with its own
  high-frequency vocabulary rather than a translation of the English list.
- Picker in the top-right rail; non-English uses its own list at every
  difficulty tier instead of falling back to English words.

Fix UTF-8 accuracy in the game core
- update_game_state mixed byte and character counts: total_characters_typed
  accumulated byte-length deltas while total_correct_characters compared a
  char index against that byte count. Equal on ASCII, so it went unnoticed;
  a correctly typed Spanish passage scored 6%. The old byte slicing would
  also have panicked if an index landed inside a multi-byte character.
  Rewritten char-based, with regression tests.

Programming mode
- Replaced prose about programming with real code: 26 syntax-highlighted
  snippets across JavaScript, Python, Rust, C/Go/Java and shell. Single-line
  by necessity, since the typing input is a single-line field.

Layout and readability
- One icon rail arrangement on every screen: Settings/Store under the
  wordmark, Language/Theme/Friends/Account top-right, Stats/Leaderboard/
  Multiplayer bottom-right.
- Main menu: mode picker moved out of the Single Player button, which it was
  notching a divider through and pushing the label off-centre.
- Escape returns to the menu, closing any open popover first, and confirms
  before abandoning a live race.
- Split --text-color and --sub-color per theme; they shared one value that
  measured 3.65:1 against the background, below the 4.5:1 body-text floor.
- Semantic colours used in exactly one place each: gold for a personal best,
  amber for the race countdown and the mobile-result badge.
- Passage now sits in the same place on the typing and end screens, and its
  column is a whole number of characters wide so wrapping cannot leave a
  permanent gap on the right.
- End screen: keystrokes and a correct/wrong/extra/missed split, attribution
  carried over from the typing screen, and a graph with a separate error
  axis, axis titles including seconds, and smoothed lines.

1 files changed, 70 insertions, 0 deletions

diff --git a/web/src/themeButton.js b/web/src/themeButton.js
new file mode 100644
index 0000000..81ac64e
--- /dev/null
+++ b/web/src/themeButton.js
@@ -0,0 +1,70 @@
+import { getTheme, setTheme, toggleTheme, onThemeChange, THEMES } from './theme.js';
+import { themeIcon } from './screens/icons.js';
+import { escapeHtml } from './util.js';
+import { attachTooltips } from './tooltip.js';
+
+const HOLD_MS = 450;
+
+// Every screen showed a theme button advertising "Hold for more themes" in
+// its tooltip, but only the main menu actually wired up the hold gesture --
+// everywhere else it was a plain click-only toggle, so the tooltip was
+// lying. One shared implementation instead of six copies of the same
+// click/hold/popover logic, so the behavior can't drift out of sync again.
+export function renderThemeButton(root) {
+    const wrap = document.createElement('div');
+    wrap.className = 'theme-control';
+    wrap.innerHTML = `
+        <button class="theme-toggle" data-tooltip="Hold for more themes" aria-label="Toggle theme"></button>
+        <div class="theme-gallery-popover" hidden>
+            <div class="theme-gallery">
+                ${THEMES.map(t => `
+                    <button class="theme-swatch${getTheme() === t.id ? ' active' : ''}" data-theme-id="${t.id}">
+                        <span class="theme-swatch-preview" data-swatch="${t.id}"></span>
+                        <span class="theme-swatch-label">${escapeHtml(t.label)}</span>
+                    </button>
+                `).join('')}
+            </div>
+        </div>
+    `;
+    root.appendChild(wrap);
+    attachTooltips(wrap);
+
+    const button = wrap.querySelector('.theme-toggle');
+    const popover = wrap.querySelector('.theme-gallery-popover');
+    const paint = () => { button.innerHTML = themeIcon(getTheme()); };
+    paint();
+    const unsubscribeTheme = onThemeChange(paint);
+
+    let holdTimer = null;
+    let heldOpen = false;
+    button.addEventListener('pointerdown', () => {
+        heldOpen = false;
+        holdTimer = setTimeout(() => { heldOpen = true; popover.hidden = false; }, HOLD_MS);
+    });
+    const cancelHold = () => clearTimeout(holdTimer);
+    button.addEventListener('pointerup', cancelHold);
+    button.addEventListener('pointerleave', cancelHold);
+    button.addEventListener('click', () => {
+        if (heldOpen) { heldOpen = false; return; }
+        toggleTheme();
+    });
+
+    wrap.querySelectorAll('.theme-swatch').forEach(swatch => {
+        swatch.addEventListener('click', () => {
+            setTheme(swatch.dataset.themeId);
+            wrap.querySelectorAll('.theme-swatch').forEach(b => b.classList.toggle('active', b === swatch));
+            popover.hidden = true;
+        });
+    });
+
+    const handleOutsideClick = e => {
+        if (!popover.hidden && !wrap.contains(e.target)) popover.hidden = true;
+    };
+    document.addEventListener('click', handleOutsideClick);
+
+    return () => {
+        unsubscribeTheme();
+        document.removeEventListener('click', handleOutsideClick);
+        wrap.remove();
+    };
+}