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

ui/src/components/Header.svelte

@@ -2,10 +2,11 @@
   import type { Snippet } from 'svelte';
   import { navigate } from '../lib/router.svelte';
 
-  let { title, back, menu }: { title: string; back?: string; menu?: Snippet } = $props();
+  let { title, back, menu, grow = false }: { title: string; back?: string; menu?: Snippet; grow?: boolean } =
+    $props();
 </script>
 
-<header class="nav">
+<header class="nav" class:grow>
   <div class="bar">
     {#if back}
       <button class="icon back" onclick={() => back && navigate(back)} aria-label="Back">
@@ -20,10 +21,10 @@
 </header>
 
 <style>
-  /* The nav bar grows to fill the spare vertical space (buttons stay at the top), so
-     the rest of the screen pins to the bottom — a mobile-app layout. */
+  /* By default the nav bar is minimal and the content fills the screen. In the game
+     it grows (class `grow`) to push the board and controls to the bottom. */
   .nav {
-    flex: 1 1 auto;
+    flex: 0 0 auto;
     min-height: 52px;
     background: var(--bg-elev);
     border-bottom: 1px solid var(--border);
@@ -32,6 +33,9 @@
     user-select: none;
     -webkit-user-select: none;
   }
+  .nav.grow {
+    flex: 1 1 auto;
+  }
   .bar {
     display: flex;
     align-items: center;