feat(ui): move in-game status to the board — highlight, score badge, full-width rack

Remove the under-board status strip and relocate its signals:
- bag count -> a badge on the exchange/pass control + the foot of the move table
- whose-turn / win-lose -> a thin strip above the score plaques
- the tentative-move caption -> the board itself: staged tiles tint green (legal) or
  pink (illegal), the board tiles a formed word runs through go a shade darker, and an
  orange score badge sits on the main word (digit sized like a tile value, clamped on-board)

The word geometry (covered cells + badge anchor) is a new pure client-side helper
(ui/src/lib/formed.ts), independent of the move evaluator, so it works on the local or
network preview path alike; the badge's number still comes from the preview score.

Rack: a seven-column grid filling the tray width in both layouts — square, full-width
tiles — with the confirm control in the fixed 7th slot.

Settings: a touch-only "Zoom the board" toggle (default on, device-local) gates the
tile-placement auto-zoom; taking a hint while zoomed in now zooms out so the highlighted
hint word is never left off-screen.

Docs (FUNCTIONAL +_ru, UI_DESIGN, ARCHITECTURE) and e2e/unit tests updated.

ui/e2e/zoom.spec.ts

@@ -74,11 +74,11 @@ test.describe('touch placement', () => {
   });
 });
 
-// A hint taken while the board is ALREADY zoomed in must still scroll to the played word — the
-// zoom state does not change, so without an explicit recenter the board stays parked where the
-// player was looking (the reported rough edge). The mock hint plays at the centre star (7,7), so
-// zooming into the top-left corner first and then hinting must pan the board toward the centre.
-test('a hint recentres an already-zoomed board on the played word', async ({ page }) => {
+// A hint taken while the board is ALREADY zoomed in now zooms OUT to the whole board, so the played
+// word — highlighted while composing — is guaranteed visible rather than parked off-screen under the
+// old zoom (the owner changed this from the former recentre-on-the-word behaviour, so the word can
+// never be lost off-screen). The mock hint plays at the centre star (7,7).
+test('a hint zooms out an already-zoomed board so the played word is visible', async ({ page }) => {
   await page.goto('/');
   await page.getByRole('button', { name: /guest/i }).click();
   await page.getByRole('button', { name: /Ann/ }).click();
@@ -91,19 +91,17 @@ test('a hint recentres an already-zoomed board on the played word', async ({ pag
       el.click();
       el.click();
     });
-  const viewport = page.locator('.viewport.zoomed');
-  await expect(viewport).toBeVisible();
-  await page.waitForTimeout(400); // let the zoom-in settle near the top-left corner
-  const before = await viewport.evaluate((el) => ({ left: el.scrollLeft, top: el.scrollTop }));
+  await expect(page.locator('.viewport.zoomed')).toBeVisible();
 
   // Take a hint (the control confirms on a second tap), which plays at the centre.
   const hint = page.getByRole('button', { name: 'Hint' });
   await hint.click();
   await hint.click();
-  await page.waitForTimeout(300); // the board pans to the hint word
 
-  const after = await viewport.evaluate((el) => ({ left: el.scrollLeft, top: el.scrollTop }));
-  // The board panned from the top-left toward the centre word: both offsets grew.
-  expect(after.left).toBeGreaterThan(before.left + 20);
-  expect(after.top).toBeGreaterThan(before.top + 20);
+  // The board zoomed out — no zoomed viewport — with the hint's play staged (the confirm control
+  // shows). The mock hint plays on the centre star, which the seeded game already occupies, so the
+  // staged tile hides under the committed one; the confirm control is the reliable "a play is
+  // staged" signal.
+  await expect(page.locator('.viewport.zoomed')).toHaveCount(0);
+  await expect(page.locator('.make')).toBeVisible();
 });