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, 66 insertions, 0 deletions

diff --git a/web/src/theme.js b/web/src/theme.js
new file mode 100644
index 0000000..686572b
--- /dev/null
+++ b/web/src/theme.js
@@ -0,0 +1,66 @@
+export const Theme = { Light: 'light', Dark: 'dark' };
+
+// Full theme catalog for the gallery. Light/Dark stay the two the corner
+// toggle button cycles between; the rest are only reachable from the
+// gallery, matching how most typing sites treat "light vs dark" as the
+// quick switch and everything else as a deliberate pick.
+export const THEMES = [
+    { id: 'dark', label: 'Dark', dark: true, primary: '#00ff9d' },
+    { id: 'light', label: 'Light', dark: false, primary: '#067a4e' },
+    { id: 'dracula', label: 'Dracula', dark: true, primary: '#bd93f9' },
+    { id: 'nord', label: 'Nord', dark: true, primary: '#88c0d0' },
+    { id: 'solarized', label: 'Solarized', dark: true, primary: '#268bd2' },
+    { id: 'gruvbox', label: 'Gruvbox', dark: true, primary: '#fabd2f' },
+    { id: 'monokai', label: 'Monokai', dark: true, primary: '#a6e22e' },
+];
+
+export function isDarkTheme(id) {
+    return THEMES.find(t => t.id === id)?.dark ?? true;
+}
+
+const STORAGE_KEY = 'theme';
+const listeners = new Set();
+
+let theme = localStorage.getItem(STORAGE_KEY) || Theme.Dark;
+
+// The custom cursor is a per-theme accent, not a fixed brand mark - a
+// hardcoded color would sit oddly on Dracula/Nord/etc, so it's regenerated
+// from each theme's own primary color instead. Plus-reticle crosshair, not a
+// circle - the rest of the UI (buttons, icons.js's angular sun/moon) is all
+// sharp corners, and a round cursor read as off-brand next to it. The gap at
+// the center (arms don't meet) is what makes it read as a scope reticle
+// rather than a plain plus sign.
+function cursorDataUri(color) {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10 1V8 M10 12V19 M1 10H8 M12 10H19" stroke="${color}" stroke-width="1.6"/><rect x="9.3" y="9.3" width="1.4" height="1.4" fill="${color}"/></svg>`;
+    return `url("data:image/svg+xml;base64,${btoa(svg)}") 10 10, auto`;
+}
+
+function apply(value) {
+    document.documentElement.setAttribute('data-theme', value);
+    if (document.body) {
+        const t = THEMES.find(x => x.id === value);
+        document.body.style.cursor = cursorDataUri(t ? t.primary : '#00ff9d');
+    }
+}
+apply(theme);
+
+export function getTheme() {
+    return theme;
+}
+
+export function setTheme(id) {
+    if (!THEMES.some(t => t.id === id)) return;
+    theme = id;
+    localStorage.setItem(STORAGE_KEY, theme);
+    apply(theme);
+    for (const fn of listeners) fn(theme);
+}
+
+export function toggleTheme() {
+    setTheme(theme === Theme.Light ? Theme.Dark : Theme.Light);
+}
+
+export function onThemeChange(fn) {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+}