fix(ui): recentre the board on a hint taken while already zoomed in

The board only scrolled to the hint's word when the hint also toggled zoom (the
zoom-out case): the recenter effect tracked `zoomed` and read `focus` untracked,
so a hint taken while ALREADY zoomed in — no zoom change — never recentred and
the board stayed parked where the player was looking.

Add a `recenter` nonce the hint bumps; the board's scroll effect tracks it and,
when it fires without a zoom toggle, pans straight to `focus` (the board width is
stable, so the width-driven zoom tween has nothing to ride). Placing a 2nd+ tile
or hovering a dragged tile still set `focus` without the nonce, so the board
never jumps on those — the original no-jump intent is preserved.

e2e: zoom into the corner, then hint (the mock plays at the centre) — the board
pans toward the centre. Verified RED without the fix (both engines), GREEN with.

ui/e2e/zoom.spec.ts

@@ -52,3 +52,37 @@ test('zoomed board clamps overscroll at the edge', async ({ page }) => {
   expect(ob.x).toBe('none');
   expect(ob.y).toBe('none');
 });
+
+// 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 }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: /guest/i }).click();
+  await page.getByRole('button', { name: /Ann/ }).click();
+
+  // Zoom into the top-left cell (far from the centre where the hint lands).
+  await page
+    .locator('[data-cell]:not(.filled)')
+    .first()
+    .evaluate((el: HTMLElement) => {
+      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 }));
+
+  // 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);
+});