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/app.css

@@ -73,7 +73,7 @@
     --board-bg: #2a3330;
     --cell-bg: #222a27;
     --cell-line: #56655c;
-    --tile-bg: #d9c79a;
+    --tile-bg: #cdba88;
     --tile-edge: #b6a473;
     --tile-text: #20190d;
     --tile-pending: #d8b75e;

ui/src/game/Game.svelte

@@ -932,6 +932,10 @@
   // re-send and disable the 🤝).
   let friends = $state(new Set<string>());
   let requested = $state(new Set<string>());
+  // `requestedRobotSeats` are the seat indices of disguised-robot opponents already requested in
+  // THIS game: a robot request is recorded per game+seat (never the shared robot account), so the
+  // 🤝 disables for just this seat and never leaks across the requester's other games.
+  let requestedRobotSeats = $state(new Set<number>());
   // `blocked` are the opponents the viewer has blocked: their 🤝 and ✖️ controls disappear and
   // their name is struck. Derived from the server so it is correct across reloads and live-updates
   // on a user_blocked / user_unblocked event. `blockedRobotSeats` are the seat indices of blocked
@@ -952,7 +956,8 @@
     try {
       const [fl, out] = await Promise.all([gateway.friendsList(), gateway.friendsOutgoing()]);
       friends = new Set(fl.map((f) => f.accountId));
-      requested = new Set(out.map((f) => f.accountId));
+      requested = new Set(out.requests.map((f) => f.accountId));
+      requestedRobotSeats = new Set(out.robots.filter((r) => r.gameId === id).map((r) => r.seat));
     } catch {
       /* best-effort */
     }
@@ -981,14 +986,17 @@
   // caption update the instant the confirm fires) and roll back to the prior state if the command
   // fails to reach the server. The confirming user_blocked / user_added event then just reconciles
   // the same state in place (no flicker).
-  async function addFriend(accountId: string) {
-    const had = requested.has(accountId);
-    requested = new Set([...requested, accountId]);
+  async function addFriend(s: { accountId: string; seat: number }) {
+    // Optimistically mark this seat requested (disables the 🤝 for both a human and a disguised
+    // robot until the server confirms). The request carries the game id so a robot opponent is
+    // recorded as a per-game request pinned to this seat, not against the shared robot account.
+    const hadSeat = requestedRobotSeats.has(s.seat);
+    requestedRobotSeats = new Set([...requestedRobotSeats, s.seat]);
     try {
-      await gateway.friendRequest(accountId);
+      await gateway.friendRequest(s.accountId, id);
       showToast(t('friends.requestSent'));
     } catch (e) {
-      if (!had) requested = new Set([...requested].filter((id) => id !== accountId));
+      if (!hadSeat) requestedRobotSeats = new Set([...requestedRobotSeats].filter((x) => x !== s.seat));
       handleError(e);
     }
   }
@@ -1118,9 +1126,9 @@
             <span class="addfriend">
               <TapConfirm
                 label={t('friends.addFromGame')}
-                disabled={requested.has(s.accountId)}
+                disabled={requested.has(s.accountId) || requestedRobotSeats.has(s.seat)}
                 onConfirming={(v) => (addConfirm[s.seat] = v)}
-                onconfirm={() => addFriend(s.accountId)}
+                onconfirm={() => addFriend(s)}
               >
                 <span class="fico">🤝</span>
               </TapConfirm>

ui/src/gen/fbs/scrabblefb.ts

@@ -60,6 +60,7 @@ export { Profile } from './scrabblefb/profile.js';
 export { RedeemCodeRequest } from './scrabblefb/redeem-code-request.js';
 export { RedeemResult } from './scrabblefb/redeem-result.js';
 export { RobotBlockRef } from './scrabblefb/robot-block-ref.js';
+export { RobotFriendRef } from './scrabblefb/robot-friend-ref.js';
 export { SeatView } from './scrabblefb/seat-view.js';
 export { Session } from './scrabblefb/session.js';
 export { StateRequest } from './scrabblefb/state-request.js';

ui/src/gen/fbs/scrabblefb/outgoing-request-list.ts

@@ -3,6 +3,7 @@
 import * as flatbuffers from 'flatbuffers';
 
 import { AccountRef } from '../scrabblefb/account-ref.js';
+import { RobotFriendRef } from '../scrabblefb/robot-friend-ref.js';
 
 
 export class OutgoingRequestList {
@@ -33,8 +34,18 @@ requestsLength():number {
   return offset ? this.bb!.__vector_len(this.bb_pos + offset) : 0;
 }
 
+robots(index: number, obj?:RobotFriendRef):RobotFriendRef|null {
+  const offset = this.bb!.__offset(this.bb_pos, 6);
+  return offset ? (obj || new RobotFriendRef()).__init(this.bb!.__indirect(this.bb!.__vector(this.bb_pos + offset) + index * 4), this.bb!) : null;
+}
+
+robotsLength():number {
+  const offset = this.bb!.__offset(this.bb_pos, 6);
+  return offset ? this.bb!.__vector_len(this.bb_pos + offset) : 0;
+}
+
 static startOutgoingRequestList(builder:flatbuffers.Builder) {
-  builder.startObject(1);
+  builder.startObject(2);
 }
 
 static addRequests(builder:flatbuffers.Builder, requestsOffset:flatbuffers.Offset) {
@@ -53,14 +64,31 @@ static startRequestsVector(builder:flatbuffers.Builder, numElems:number) {
   builder.startVector(4, numElems, 4);
 }
 
+static addRobots(builder:flatbuffers.Builder, robotsOffset:flatbuffers.Offset) {
+  builder.addFieldOffset(1, robotsOffset, 0);
+}
+
+static createRobotsVector(builder:flatbuffers.Builder, data:flatbuffers.Offset[]):flatbuffers.Offset {
+  builder.startVector(4, data.length, 4);
+  for (let i = data.length - 1; i >= 0; i--) {
+    builder.addOffset(data[i]!);
+  }
+  return builder.endVector();
+}
+
+static startRobotsVector(builder:flatbuffers.Builder, numElems:number) {
+  builder.startVector(4, numElems, 4);
+}
+
 static endOutgoingRequestList(builder:flatbuffers.Builder):flatbuffers.Offset {
   const offset = builder.endObject();
   return offset;
 }
 
-static createOutgoingRequestList(builder:flatbuffers.Builder, requestsOffset:flatbuffers.Offset):flatbuffers.Offset {
+static createOutgoingRequestList(builder:flatbuffers.Builder, requestsOffset:flatbuffers.Offset, robotsOffset:flatbuffers.Offset):flatbuffers.Offset {
   OutgoingRequestList.startOutgoingRequestList(builder);
   OutgoingRequestList.addRequests(builder, requestsOffset);
+  OutgoingRequestList.addRobots(builder, robotsOffset);
   return OutgoingRequestList.endOutgoingRequestList(builder);
 }
 }

ui/src/gen/fbs/scrabblefb/robot-friend-ref.ts

@@ -0,0 +1,82 @@
+// automatically generated by the FlatBuffers compiler, do not modify
+
+import * as flatbuffers from 'flatbuffers';
+
+export class RobotFriendRef {
+  bb: flatbuffers.ByteBuffer|null = null;
+  bb_pos = 0;
+  __init(i:number, bb:flatbuffers.ByteBuffer):RobotFriendRef {
+  this.bb_pos = i;
+  this.bb = bb;
+  return this;
+}
+
+static getRootAsRobotFriendRef(bb:flatbuffers.ByteBuffer, obj?:RobotFriendRef):RobotFriendRef {
+  return (obj || new RobotFriendRef()).__init(bb.readInt32(bb.position()) + bb.position(), bb);
+}
+
+static getSizePrefixedRootAsRobotFriendRef(bb:flatbuffers.ByteBuffer, obj?:RobotFriendRef):RobotFriendRef {
+  bb.setPosition(bb.position() + flatbuffers.SIZE_PREFIX_LENGTH);
+  return (obj || new RobotFriendRef()).__init(bb.readInt32(bb.position()) + bb.position(), bb);
+}
+
+id():string|null
+id(optionalEncoding:flatbuffers.Encoding):string|Uint8Array|null
+id(optionalEncoding?:any):string|Uint8Array|null {
+  const offset = this.bb!.__offset(this.bb_pos, 4);
+  return offset ? this.bb!.__string(this.bb_pos + offset, optionalEncoding) : null;
+}
+
+displayName():string|null
+displayName(optionalEncoding:flatbuffers.Encoding):string|Uint8Array|null
+displayName(optionalEncoding?:any):string|Uint8Array|null {
+  const offset = this.bb!.__offset(this.bb_pos, 6);
+  return offset ? this.bb!.__string(this.bb_pos + offset, optionalEncoding) : null;
+}
+
+gameId():string|null
+gameId(optionalEncoding:flatbuffers.Encoding):string|Uint8Array|null
+gameId(optionalEncoding?:any):string|Uint8Array|null {
+  const offset = this.bb!.__offset(this.bb_pos, 8);
+  return offset ? this.bb!.__string(this.bb_pos + offset, optionalEncoding) : null;
+}
+
+seat():number {
+  const offset = this.bb!.__offset(this.bb_pos, 10);
+  return offset ? this.bb!.readInt32(this.bb_pos + offset) : 0;
+}
+
+static startRobotFriendRef(builder:flatbuffers.Builder) {
+  builder.startObject(4);
+}
+
+static addId(builder:flatbuffers.Builder, idOffset:flatbuffers.Offset) {
+  builder.addFieldOffset(0, idOffset, 0);
+}
+
+static addDisplayName(builder:flatbuffers.Builder, displayNameOffset:flatbuffers.Offset) {
+  builder.addFieldOffset(1, displayNameOffset, 0);
+}
+
+static addGameId(builder:flatbuffers.Builder, gameIdOffset:flatbuffers.Offset) {
+  builder.addFieldOffset(2, gameIdOffset, 0);
+}
+
+static addSeat(builder:flatbuffers.Builder, seat:number) {
+  builder.addFieldInt32(3, seat, 0);
+}
+
+static endRobotFriendRef(builder:flatbuffers.Builder):flatbuffers.Offset {
+  const offset = builder.endObject();
+  return offset;
+}
+
+static createRobotFriendRef(builder:flatbuffers.Builder, idOffset:flatbuffers.Offset, displayNameOffset:flatbuffers.Offset, gameIdOffset:flatbuffers.Offset, seat:number):flatbuffers.Offset {
+  RobotFriendRef.startRobotFriendRef(builder);
+  RobotFriendRef.addId(builder, idOffset);
+  RobotFriendRef.addDisplayName(builder, displayNameOffset);
+  RobotFriendRef.addGameId(builder, gameIdOffset);
+  RobotFriendRef.addSeat(builder, seat);
+  return RobotFriendRef.endRobotFriendRef(builder);
+}
+}

ui/src/lib/client.ts

@@ -22,6 +22,7 @@ import type {
   LinkResult,
   MatchResult,
   MoveResult,
+  OutgoingList,
   Profile,
   ProfileUpdate,
   PushEvent,
@@ -118,9 +119,12 @@ export interface GatewayClient {
   // --- friends ---
   friendsList(): Promise<AccountRef[]>;
   friendsIncoming(): Promise<AccountRef[]>;
-  /** Addressees the caller has already requested (pending or declined); cannot re-request. */
-  friendsOutgoing(): Promise<AccountRef[]>;
-  friendRequest(accountId: string): Promise<void>;
+  /** Addressees the caller has already requested (pending or declined; cannot re-request),
+   *  plus the per-game disguised-robot requests that keep the in-game 🤝 disabled by seat. */
+  friendsOutgoing(): Promise<OutgoingList>;
+  /** Send a friend request. A non-empty gameId marks an in-game request, so a disguised-robot
+   *  opponent is recorded as a per-game request rather than against the shared robot account. */
+  friendRequest(accountId: string, gameId?: string): Promise<void>;
   friendRespond(requesterId: string, accept: boolean): Promise<void>;
   friendCancel(accountId: string): Promise<void>;
   unfriend(accountId: string): Promise<void>;

ui/src/lib/codec.test.ts

@@ -256,7 +256,7 @@ describe('codec', () => {
     expect(gl.atGameLimit).toBe(true);
   });
 
-  it('decodes an OutgoingRequestList of account refs', () => {
+  it('decodes an OutgoingRequestList of account refs plus per-game robot requests', () => {
     const b = new Builder(128);
     const id = b.createString('o-1');
     const dn = b.createString('Pat');
@@ -264,11 +264,20 @@ describe('codec', () => {
     fb.AccountRef.addAccountId(b, id);
     fb.AccountRef.addDisplayName(b, dn);
     const ref = fb.AccountRef.endAccountRef(b);
-    const vec = fb.OutgoingRequestList.createRequestsVector(b, [ref]);
+    const reqVec = fb.OutgoingRequestList.createRequestsVector(b, [ref]);
+    const rid = b.createString('r-1');
+    const rdn = b.createString('Robbie');
+    const rgid = b.createString('g-1');
+    const robot = fb.RobotFriendRef.createRobotFriendRef(b, rid, rdn, rgid, 1);
+    const robVec = fb.OutgoingRequestList.createRobotsVector(b, [robot]);
     fb.OutgoingRequestList.startOutgoingRequestList(b);
-    fb.OutgoingRequestList.addRequests(b, vec);
+    fb.OutgoingRequestList.addRequests(b, reqVec);
+    fb.OutgoingRequestList.addRobots(b, robVec);
     b.finish(fb.OutgoingRequestList.endOutgoingRequestList(b));
-    expect(decodeOutgoingList(b.asUint8Array())).toEqual([{ accountId: 'o-1', displayName: 'Pat' }]);
+    expect(decodeOutgoingList(b.asUint8Array())).toEqual({
+      requests: [{ accountId: 'o-1', displayName: 'Pat' }],
+      robots: [{ id: 'r-1', displayName: 'Robbie', gameId: 'g-1', seat: 1 }],
+    });
   });
 
   it('encodes a TargetRequest', () => {

ui/src/lib/codec.ts

@@ -10,7 +10,9 @@ import type { PlacedTile } from './client';
 import type {
   AccountRef,
   BlockList,
+  OutgoingList,
   RobotBlockEntry,
+  RobotFriendRequestEntry,
   Banner,
   BannerCampaign,
   BestMove,
@@ -719,14 +721,25 @@ export function decodeIncomingList(buf: Uint8Array): AccountRef[] {
   return out;
 }
 
-export function decodeOutgoingList(buf: Uint8Array): AccountRef[] {
+export function decodeOutgoingList(buf: Uint8Array): OutgoingList {
   const l = fb.OutgoingRequestList.getRootAsOutgoingRequestList(new ByteBuffer(buf));
-  const out: AccountRef[] = [];
+  const requests: AccountRef[] = [];
   for (let i = 0; i < l.requestsLength(); i++) {
     const r = l.requests(i);
-    if (r) out.push(decodeAccountRef(r));
+    if (r) requests.push(decodeAccountRef(r));
   }
-  return out;
+  const robots: RobotFriendRequestEntry[] = [];
+  for (let i = 0; i < l.robotsLength(); i++) {
+    const r = l.robots(i);
+    if (r)
+      robots.push({
+        id: r.id() ?? '',
+        displayName: r.displayName() ?? '',
+        gameId: r.gameId() ?? '',
+        seat: r.seat(),
+      });
+  }
+  return { requests, robots };
 }
 
 export function decodeBlockList(buf: Uint8Array): BlockList {

ui/src/lib/lobbysort.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { gamePhase, groupGames, isMyTurn, shouldBlink } from './lobbysort';
+import { gamePhase, groupGames, isMyTurn, orderedSeats, scoreStanding, shouldBlink } from './lobbysort';
 import type { GameView, Seat } from './model';
 
 const ME = 'me';
@@ -118,6 +118,59 @@ describe('gamePhase', () => {
   });
 });
 
+describe('scoreStanding', () => {
+  const withScores = (status: GameView['status'], myScore: number, oppScore: number): GameView => ({
+    ...game('g', status, 0, 0),
+    seats: [
+      { ...seat(0, ME), score: myScore },
+      { ...seat(1, 'opp'), score: oppScore },
+    ],
+  });
+
+  it('greens a leading or tied active game, reds a losing one', () => {
+    expect(scoreStanding(withScores('active', 30, 10), ME)).toBe('win');
+    expect(scoreStanding(withScores('active', 10, 10), ME)).toBe('win'); // a tie counts as green
+    expect(scoreStanding(withScores('active', 5, 10), ME)).toBe('lose');
+  });
+
+  it('is null for any non-active game (open or finished)', () => {
+    expect(scoreStanding(withScores('finished', 30, 10), ME)).toBeNull();
+    expect(scoreStanding(withScores('open', 0, 0), ME)).toBeNull();
+  });
+
+  it('is null when the viewer is not seated or has no opponent', () => {
+    expect(scoreStanding(withScores('active', 30, 10), 'stranger')).toBeNull();
+    const solo: GameView = { ...game('g', 'active', 0, 0), seats: [{ ...seat(0, ME), score: 9 }] };
+    expect(scoreStanding(solo, ME)).toBeNull();
+  });
+
+  it('compares against the strongest opponent in a multiplayer game', () => {
+    const g3: GameView = {
+      ...game('g', 'active', 0, 0),
+      players: 3,
+      seats: [
+        { ...seat(0, ME), score: 40 },
+        { ...seat(1, 'a'), score: 35 },
+        { ...seat(2, 'b'), score: 50 }, // b is ahead -> losing
+      ],
+    };
+    expect(scoreStanding(g3, ME)).toBe('lose');
+  });
+});
+
+describe('orderedSeats', () => {
+  it('returns seats in seat-number order without mutating the source', () => {
+    const g: GameView = {
+      ...game('g', 'active', 0, 0),
+      seats: [seat(2, 'c'), seat(0, ME), seat(1, 'b')],
+    };
+    const src = g.seats;
+    expect(orderedSeats(g).map((s) => s.seat)).toEqual([0, 1, 2]);
+    expect(g.seats).toBe(src); // the source array is left untouched
+    expect(g.seats.map((s) => s.seat)).toEqual([2, 0, 1]);
+  });
+});
+
 describe('shouldBlink', () => {
   it('blinks on a transition into mine or finished', () => {
     expect(shouldBlink('theirs', 'mine')).toBe(true);

ui/src/lib/lobbysort.ts

@@ -12,6 +12,29 @@ export function isMyTurn(game: GameView, myId: string): boolean {
   return (game.status === 'active' || game.status === 'open') && !!me && game.toMove === me.seat;
 }
 
+/**
+ * scoreStanding colours the viewer's own score on an in-progress game: 'win' when leading or
+ * tied (green), 'lose' when trailing (red). It is null for any game that is not active (open or
+ * finished — finished games show the result emoji instead) or where myId is not seated against
+ * an opponent, so the lobby leaves those numbers in the muted default.
+ */
+export function scoreStanding(game: GameView, myId: string): 'win' | 'lose' | null {
+  if (game.status !== 'active') return null;
+  const me = game.seats.find((s) => s.accountId === myId);
+  if (!me) return null;
+  const others = game.seats.filter((s) => s.accountId && s.accountId !== myId).map((s) => s.score);
+  if (!others.length) return null;
+  return me.score >= Math.max(...others) ? 'win' : 'lose';
+}
+
+/**
+ * orderedSeats returns a game's seats in seat-number order (matching the over-the-board
+ * scoreboard), without mutating the source array.
+ */
+export function orderedSeats(game: GameView): GameView['seats'] {
+  return [...game.seats].sort((a, b) => a.seat - b.seat);
+}
+
 /** LobbyPhase is a game's lobby bucket — which of the three card sections it currently sits in. */
 export type LobbyPhase = 'mine' | 'theirs' | 'finished';
 

ui/src/lib/mock/client.ts

@@ -29,6 +29,7 @@ import type {
   LinkResult,
   MatchResult,
   MoveResult,
+  OutgoingList,
   Profile,
   ProfileUpdate,
   PushEvent,
@@ -527,10 +528,11 @@ export class MockGateway implements GatewayClient {
   async friendsIncoming(): Promise<AccountRef[]> {
     return this.incoming.map((f) => ({ ...f }));
   }
-  async friendsOutgoing(): Promise<AccountRef[]> {
-    return this.outgoing.map((f) => ({ ...f }));
+  async friendsOutgoing(): Promise<OutgoingList> {
+    // The mock models human outgoing requests only (no disguised robots); robots stays empty.
+    return { requests: this.outgoing.map((f) => ({ ...f })), robots: [] };
   }
-  async friendRequest(accountId: string): Promise<void> {
+  async friendRequest(accountId: string, _gameId?: string): Promise<void> {
     // The real backend requires a shared game; the mock records the outgoing request so
     // the game's "add to friends" item reads as sent across reloads.
     if (!this.outgoing.some((o) => o.accountId === accountId)) {

ui/src/lib/model.ts

@@ -225,6 +225,23 @@ export interface BlockList {
   robots: RobotBlockEntry[];
 }
 
+// RobotFriendRequestEntry is one per-game friend request to a disguised-robot opponent: a
+// per-game record (not a real account) carrying the game name the player saw and the
+// game/seat it was sent in, so the in-game card can re-mark that seat as already requested.
+export interface RobotFriendRequestEntry {
+  id: string;
+  displayName: string;
+  gameId: string;
+  seat: number;
+}
+
+// OutgoingList is the caller's outgoing friend requests: human addressees already requested
+// (pending or declined) plus the per-game disguised-robot requests.
+export interface OutgoingList {
+  requests: AccountRef[];
+  robots: RobotFriendRequestEntry[];
+}
+
 /** A freshly issued one-time friend code (the plaintext is returned once). */
 export interface FriendCode {
   code: string;

ui/src/lib/transport.ts

@@ -165,8 +165,8 @@ export function createTransport(baseUrl: string): GatewayClient {
     async friendsOutgoing() {
       return codec.decodeOutgoingList(await exec('friends.outgoing', codec.empty()));
     },
-    async friendRequest(accountId) {
-      await exec('friends.request', codec.encodeTarget(accountId));
+    async friendRequest(accountId, gameId) {
+      await exec('friends.request', codec.encodeTarget(accountId, gameId));
     },
     async friendRespond(requesterId, accept) {
       await exec('friends.respond', codec.encodeFriendRespond(requesterId, accept));

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