Stage 7 polish (round 2): layout/zoom/tab-bar/hint/check fixes

- nav bar grows ONLY in game (other screens: minimal nav, content fills); tab bar always bottom
- tab bar: tighter icon/label spacing, bigger icons, hint badge on the icon corner
- board zoom reworked to width-based (real native scroll, fixes Safari/Chrome) + constant cqw labels; pinch & swipe-to-history dropped (conflict), double-tap kept, history via menu
- beginner bonus labels shrunk to fit cells
- Draw opens exchange directly (no confirm); confirm popovers restyled like the hamburger dropdown (vertical); removed the floating direction toggle
- pending tiles darker bg (no outline); last-word dark-tile highlight (static / 1s flash)
- check button disabled for <2/>15 chars, already-checked, or 5s cooldown
- global user-select:none (inputs exempt); docs updated; TODO-4 alphabet-on-wire

docs/UI_DESIGN.md

@@ -10,11 +10,12 @@ emoji glyphs. Tokens are CSS custom properties (`ui/src/app.css`), light/dark vi
 
 ## Layout shell (`components/Screen.svelte`)
 
-A mobile-app feel: the screen is a full-height flex column where the **nav bar grows**
-to absorb spare vertical space (its buttons stay top-aligned) and everything else —
-the announcement strip, the content, and the optional bottom tab bar — **pins to the
-bottom**, the strip directly above the content. Tall content scrolls within the content
-region. Every screen except Login uses `Screen`.
+A full-height flex column: the nav bar, the announcement strip, the content, and an
+optional bottom tab bar (the tab bar always sits at the screen bottom). On most screens
+the nav is minimal and the **content fills** between nav and tab bar. **Only in the
+game** (`growNav`) does the nav bar grow to absorb spare height (buttons top-aligned),
+pinning the board and controls to the **bottom** for thumb reach. Every screen except
+Login uses `Screen`.
 
 ## Navigation
 
@@ -31,12 +32,18 @@ region. Every screen except Login uses `Screen`.
 
 - **Tiles**: the letter sits in the **top-left** corner (offset a touch more than the
   value), the point value bottom-right; blanks show no value.
-- **Board zoom** (`Board.svelte`): a two-state zoom (full 15×15 ↔ ~9 cells) via
-  `transform: scale()` on an inner layer inside a **fixed-size viewport** (the page never
-  reflows; the viewport scrolls when zoomed), with a smooth transition. Cell/tile **text
-  lives in a counter-scaled layer** (`scale(1/z)`) sized in `cqw`, so labels stay a
-  constant size (relatively smaller at higher zoom). On touch, attempting to place a tile
-  auto-zooms in centred on the target; double-tap and pinch toggle.
+- **Board zoom** (`Board.svelte`): a two-state zoom (full 15×15 ↔ ~9 cells) by **growing
+  the board's width** inside a fixed-size viewport (a real layout change → native scroll
+  that works consistently across browsers; no `transform`, which broke scrolling
+  differently in Safari/Chrome). Labels are sized in `cqw` against the fixed viewport, so
+  they stay a constant size as the cells grow (relatively smaller at higher zoom).
+  **Double-tap** toggles zoom and, on touch, placing a tile auto-zooms in centred on the
+  target; the custom pinch and swipe-to-open-history gestures were dropped because they
+  fight native scroll — history opens from the menu.
+- **Highlights**: pending tiles use a slightly darker tile background (no outline). The
+  last completed word gets a dark tile background — static while it is the opponent's
+  turn (our word), and a 1 s flash when it is our turn (their word). While placing, only
+  the pending tiles are highlighted.
 - **Bonus-square labels** — a Settings choice (`boardlabels.ts`): `beginner` shows a
   split `3×` / `word` (localized слово/буква), `classic` a single `3W` / `3С`, `none`
   nothing. Default **beginner**.