feat(stats): show the best move word per game variant

Replace the single "best move" number on the statistics screen with a
full-width per-variant breakdown: the highest-scoring play in each variant
the player has played, drawn as game tiles (a wildcard shows its letter but
no value), with the words and scores right-aligned to shared edges.

- backend: new account_best_move table (PK account_id+variant) keeping the
  main word as JSON tiles {letter,value,blank}; captured at game finish in
  buildStats (blank flags taken from every placed blank — equivalent to the
  final board), upserted in the finish transaction and replaced only by a
  strictly higher-scoring play. Guest/honest-AI games still record nothing.
  GetStats + statsDTO expose best_moves.
- wire: StatsView gains best_moves:[BestMoveView{variant,score,word:[BestMoveTile]}]
  (trailing, backward-compatible); gateway encodeStats + UI codec updated.
- ui: new WordTiles component (board's tile look, fixed px size); Stats.svelte
  drops the maxWord card and adds the full-width best-move card (catalogue
  order, empty variants omitted).
- docs: ARCHITECTURE §9 + schema, FUNCTIONAL (+ru), UI_DESIGN.

Tests: mainWordTiles unit + buildStats end-to-end (inttest) + gateway and UI
codec round-trips (incl. a blank tile) + e2e.

ui/src/screens/Stats.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import Screen from '../components/Screen.svelte';
+  import WordTiles from '../components/WordTiles.svelte';
   import { app, handleError } from '../lib/app.svelte';
   import { gateway } from '../lib/gateway';
   import { t, type MessageKey } from '../lib/i18n/index.svelte';
   import { gamesPlayed, winRate } from '../lib/stats';
-  import type { Stats } from '../lib/model';
+  import { ALL_VARIANTS, variantNameKey } from '../lib/variants';
+  import type { BestMove, Stats } from '../lib/model';
 
   let stats = $state<Stats | null>(null);
 
@@ -27,10 +29,17 @@
           { key: 'stats.played', value: gamesPlayed(stats) },
           { key: 'stats.winRate', value: `${winRate(stats)}%` },
           { key: 'stats.maxGame', value: stats.maxGamePoints },
-          { key: 'stats.maxWord', value: stats.maxWordPoints },
         ]
       : [],
   );
+
+  // The best move is shown as a full-width breakdown with the word itself, one row per
+  // variant the player has played, in catalogue order (the backend lists only non-empty
+  // variants). It replaces the former single "best move" number card.
+  const ORDER = ALL_VARIANTS.map((v) => v.id);
+  const bestMoves = $derived<BestMove[]>(
+    stats ? [...stats.bestMoves].sort((a, b) => ORDER.indexOf(a.variant) - ORDER.indexOf(b.variant)) : [],
+  );
 </script>
 
 <Screen title={t('stats.title')} back="/">
@@ -46,6 +55,18 @@
           </div>
         {/each}
       </div>
+      {#if bestMoves.length > 0}
+        <div class="card bestmove">
+          <span class="lbl">{t('stats.maxWord')}</span>
+          <div class="rows">
+            {#each bestMoves as bm (bm.variant)}
+              <span class="variant">{t(variantNameKey(bm.variant))}</span>
+              <span class="wordcell"><WordTiles word={bm.word} /></span>
+              <span class="score">{bm.score}</span>
+            {/each}
+          </div>
+        </div>
+      {/if}
     {/if}
   </div>
 </Screen>
@@ -79,4 +100,33 @@
     color: var(--text-muted);
     font-size: 0.85rem;
   }
+  .bestmove {
+    margin-top: 12px;
+    gap: 12px;
+  }
+  /* One grid for all rows so columns align across them: variant on the left, the word
+     tiles right-aligned to a shared edge, the score right-aligned in its own column. */
+  .rows {
+    display: grid;
+    /* minmax(0, 1fr) lets the word column shrink below its tiles' intrinsic width on a
+       narrow screen (the cell then scrolls) instead of overlapping the variant label. */
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    row-gap: 12px;
+    column-gap: 8px;
+  }
+  .variant {
+    color: var(--text-muted);
+    font-size: 0.95rem;
+  }
+  .wordcell {
+    justify-self: end;
+    min-width: 0;
+    overflow-x: auto;
+  }
+  .score {
+    justify-self: end;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+  }
 </style>