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/Lobby.svelte

@@ -12,7 +12,7 @@
   import { badgeKind } from '../lib/unread';
   import { getLobby, setLobby } from '../lib/lobbycache';
   import { preloadGames } from '../lib/preload';
-  import { gamePhase, groupGames, shouldBlink, type LobbyPhase } from '../lib/lobbysort';
+  import { gamePhase, groupGames, orderedSeats, scoreStanding, shouldBlink, type LobbyPhase } from '../lib/lobbysort';
   import type { AccountRef, GameView, Invitation } from '../lib/model';
 
   let games = $state<GameView[]>([]);
@@ -130,11 +130,6 @@
       .map((s) => s.displayName)
       .join(', ');
   }
-  function scoreline(g: GameView): string {
-    const me = g.seats.find((s) => s.accountId === myId);
-    const opp = g.seats.filter((s) => s.accountId !== myId).map((s) => s.score);
-    return `${me?.score ?? 0} : ${opp.join(', ')}`;
-  }
 
   // Hiding a finished game. The delete action sits behind each finished row and is
   // revealed by swiping the row left (touch) or tapping its kebab (any pointer); the action is
@@ -271,7 +266,14 @@
                         <span class="who-name">{opponents(g) || '—'}</span>
                         {#if badge}<span class="unread-dot" class:nudge={badge === 'nudge'}></span>{/if}
                       </span>
-                      <span class="sub">{scoreline(g)}</span>
+                      <span class="sub scoreline"
+                        >{#each orderedSeats(g) as s, i (s.seat)}{#if i > 0}<span class="sep"> : </span
+                          >{/if}<span
+                            class="num"
+                            class:win={s.accountId === myId && scoreStanding(g, myId) === 'win'}
+                            class:lose={s.accountId === myId && scoreStanding(g, myId) === 'lose'}>{s.score}</span
+                          >{/each}</span
+                      >
                     </span>
                     <!-- Re-key on the per-card blink nonce so a repeat blink restarts the fade. -->
                     {#key blinkNonce.get(g.id) ?? 0}
@@ -476,6 +478,14 @@
     font-size: 0.85rem;
     color: var(--text-muted);
   }
+  /* The viewer's own number on an in-progress game: green when leading or tied, red when
+     losing. Other numbers and the separators keep the muted .sub colour; no bold. */
+  .num.win {
+    color: var(--ok);
+  }
+  .num.lose {
+    color: var(--danger);
+  }
   .emoji {
     font-size: 1.35rem;
     line-height: 1;

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;
   }