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

diff --git a/web/src/topRail.js b/web/src/topRail.js
new file mode 100644
index 0000000..b6b50d7
--- /dev/null
+++ b/web/src/topRail.js
@@ -0,0 +1,114 @@
+import { LANGUAGE_ICON, FRIENDS_ICON } from './screens/icons.js';
+import { LANGUAGES, languageLabel } from './languages.js';
+import { getSettings, updateSettings } from './settings.js';
+import { renderThemeButton } from './themeButton.js';
+import { getUser, onAuthChange } from './auth.js';
+import { onCountsChange, getCounts } from './counts.js';
+import { attachTooltips } from './tooltip.js';
+import { escapeHtml } from './util.js';
+
+// The top-right cluster: the typing language, the theme, and who you are --
+// Friends sits directly beside the account control because the two are the
+// same thing, your identity and who it connects you to. These are the app's own chrome --
+// they belong together and away from the bottom rail's per-screen
+// navigation. Screens with their own top-right controls (the typing screen's
+// Restart and Zen Finish) pass them in as `extras` so everything shares one
+// row instead of each fixed-positioning itself into a collision.
+export function renderTopRail(root, { onShowAccount, onShowFriends, extras = [] } = {}) {
+    const wrap = document.createElement('div');
+    wrap.className = 'top-rail';
+    root.appendChild(wrap);
+
+    for (const el of extras) wrap.appendChild(el);
+
+    const langGroup = document.createElement('div');
+    langGroup.className = 'lang-group';
+    langGroup.innerHTML = `
+        <button class="corner-icon-button" data-action="lang" aria-label="Typing language" data-tooltip="Typing language">${LANGUAGE_ICON}</button>
+        <div class="lang-popover" hidden>
+            <div class="lang-heading">Typing language</div>
+            ${LANGUAGES.map(l => `
+                <button class="lang-item" data-lang="${escapeHtml(l.id)}">${escapeHtml(l.label)}</button>
+            `).join('')}
+            <div class="lang-note">Applies to Words, Timed, Zen and Practice.</div>
+        </div>
+    `;
+    wrap.appendChild(langGroup);
+
+    const cleanupTheme = renderThemeButton(wrap);
+
+    const friends = document.createElement('div');
+    friends.className = 'friends-control';
+    if (onShowFriends) {
+        friends.innerHTML = `<button class="corner-icon-button has-badge" data-action="rail-friends" aria-label="Friends" data-tooltip="Friends">${FRIENDS_ICON}<span class="rail-badge" data-badge="friends" hidden></span></button>`;
+    }
+    wrap.appendChild(friends);
+
+    const auth = document.createElement('div');
+    auth.className = 'auth-control';
+    wrap.appendChild(auth);
+
+    attachTooltips(wrap);
+
+    // Language ------------------------------------------------------------
+    const langPopover = langGroup.querySelector('.lang-popover');
+    function paintLang() {
+        const current = getSettings().language || 'en';
+        langGroup.querySelectorAll('.lang-item').forEach(item => {
+            item.classList.toggle('active', item.dataset.lang === current);
+        });
+        langGroup.querySelector('[data-action="lang"]').dataset.tooltip = `Typing language: ${languageLabel(current)}`;
+    }
+    paintLang();
+    langGroup.querySelector('[data-action="lang"]').addEventListener('click', e => {
+        e.stopPropagation();
+        langPopover.hidden = !langPopover.hidden;
+    });
+    langGroup.querySelectorAll('.lang-item').forEach(item => {
+        item.addEventListener('click', () => {
+            updateSettings({ language: item.dataset.lang });
+            paintLang();
+            langPopover.hidden = true;
+        });
+    });
+
+    // Identity ------------------------------------------------------------
+    function paintAuth() {
+        const user = getUser();
+        auth.innerHTML = user
+            ? `<button class="top-rail-link signed-in" data-action="account" data-tooltip="Your account">${escapeHtml(user.username)}</button>`
+            : `<button class="top-rail-link" data-action="signin" data-tooltip="Sign in to save stats and join the leaderboard">Sign In</button>
+               <button class="top-rail-link accent" data-action="signup" data-tooltip="Create an account">Sign Up</button>`;
+        attachTooltips(auth);
+        auth.querySelectorAll('button').forEach(btn => {
+            btn.addEventListener('click', () => onShowAccount?.());
+        });
+    }
+    paintAuth();
+    const unsubscribeAuth = onAuthChange(paintAuth);
+
+    // Friends ------------------------------------------------------------
+    const friendsBtn = friends.querySelector('[data-action="rail-friends"]');
+    if (friendsBtn) friendsBtn.addEventListener('click', onShowFriends);
+    const friendsBadge = friends.querySelector('[data-badge="friends"]');
+    function paintCounts({ friends: friendCount }) {
+        if (!friendsBadge) return;
+        friendsBadge.hidden = !friendCount;
+        friendsBadge.textContent = String(friendCount);
+    }
+    paintCounts(getCounts());
+    const unsubscribeCounts = onCountsChange(paintCounts);
+
+    const handleOutsideClick = e => {
+        if (!langPopover.hidden && !langGroup.contains(e.target)) langPopover.hidden = true;
+    };
+    document.addEventListener('click', handleOutsideClick);
+
+    return () => {
+        unsubscribeCounts();
+        document.removeEventListener('click', handleOutsideClick);
+        unsubscribeAuth();
+        cleanupTheme();
+        wrap.remove();
+    };
+}