feat(social): per-game friend request to disguised robots + lobby/stats/tile cosmetics

Functional: the in-game add-friend handshake aimed at an auto-match opponent who is
secretly a pooled robot now records the request per (game, seat) in a new
robot_friend_requests table -- never against the shared robot account -- mirroring the
robot_blocks pattern. The shared account stays out of friendships, the "requested" state
is pinned to the seat (not leaked across the player's other games), the robot ignores it,
and a background reaper drops the row 7 days after its game finishes. The outgoing-requests
list carries these per-game rows so the seat control stays disabled across reloads. No
withdraw UI, per owner decision.

Cosmetics:
- Lobby: an in-progress game tints the viewer's own score number green when leading or
  tied, red when trailing (reusing --ok/--danger); scores now render in seat-number order,
  matching the over-the-board scoreboard.
- Stats: the per-variant best move is laid out on two lines -- the variant label, then the
  score (right-aligned in its column) and the word tiles (left-aligned) below it.
- Dark theme: the played-tile background is a touch darker so a player-placed tile reads
  with more contrast (light theme unchanged).

Docs (ARCHITECTURE, FUNCTIONAL + _ru mirror, backend README, UI_DESIGN) updated in the
same change.

ui/src/screens/Stats.svelte

@@ -72,8 +72,8 @@
           <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>
+              <span class="wordcell"><WordTiles word={bm.word} /></span>
             {/each}
           </div>
         </div>
@@ -115,23 +115,30 @@
     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. */
+  /* Two lines per variant: the variant label on its own line, then the score and the word
+     tiles below it. One shared grid so the score column aligns across all rows — the score
+     right-aligned in its column, the word left-aligned. */
   .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;
+    /* score column (sized to the widest score) then the word; minmax(0, 1fr) lets the word
+       shrink below its tiles' intrinsic width on a narrow screen (the cell then scrolls). */
+    grid-template-columns: auto minmax(0, 1fr);
     align-items: center;
-    row-gap: 12px;
+    row-gap: 4px;
     column-gap: 8px;
   }
   .variant {
+    grid-column: 1 / -1;
     color: var(--text-muted);
     font-size: 0.95rem;
   }
+  /* Extra space above each variant after the first, separating the variant blocks while the
+     variant-to-score gap stays tight (row-gap). */
+  .variant:not(:first-child) {
+    margin-top: 10px;
+  }
   .wordcell {
-    justify-self: end;
+    justify-self: start;
     min-width: 0;
     overflow-x: auto;
   }