feat(rooms): real server-side private games with friend invites (no bot swap)

Private rooms were 100% client-simulated (the "friend" auto-accepted then bots
filled invited seats). Now they're server-authoritative over SignalR:

Server (GameManager.PrivateRooms + GameHub):
- Room registry with create/invite/accept/decline/addBot/clearSeat/start/leave.
- Invite pushes a `roomInvite` to that user (Clients.User); the seat stays
  "invited" (a pending guest with their real profile, resolved server-side) — it
  is NEVER replaced by a bot.
- StartPrivate refuses while any invite is pending; only EMPTY seats fill with
  bots. Then it spins up a live GameRoom and matchFound → both devices enter.
- Host leave / disconnect closes the room (roomClosed); members free their seat.

Client:
- signalr-service implements the room methods over the hub (+ room/roomInvite/
  roomClosed events, room mapping, onRoomInvite); mock keeps offline no-ops.
- online-store accept/declineInvite; RoomScreen blocks "Start" while an invite
  is pending and auto-enters the live game on matchFound (host + friend).
- New global InviteModal (accept/decline) + i18n (invite.*, room.waitAccept).

Addresses: (1) no bot replacement, (2) game waits for acceptance, (3) invited
friend shown as a pending guest with their name/avatar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/screens/RoomScreen.tsx

@@ -8,6 +8,7 @@ import { useGameStore } from "@/lib/game-store";
 import { useOnlineStore } from "@/lib/online-store";
 import { useUIStore } from "@/lib/ui-store";
 import { useI18n } from "@/lib/i18n";
+import { getService } from "@/lib/online/service";
 import { Friend, PresenceStatus, RoomSeat, avatarEmoji } from "@/lib/online/types";
 import { cn } from "@/lib/cn";
 
@@ -31,6 +32,7 @@ export function RoomScreen() {
   const startRoom = useOnlineStore((s) => s.startRoom);
   const leaveRoom = useOnlineStore((s) => s.leaveRoom);
   const newOnlineMatch = useGameStore((s) => s.newOnlineMatch);
+  const enterServerMatch = useGameStore((s) => s.enterServerMatch);
   const goGame = useUIStore((s) => s.goGame);
   const go = useUIStore((s) => s.go);
 
@@ -41,7 +43,22 @@ export function RoomScreen() {
     loadFriends();
   }, [loadFriends]);
 
+  // Live: when the host starts, the server sends matchFound to every human seat
+  // (host + accepted friends) → each device auto-enters the server-run game.
+  useEffect(() => {
+    const svc = getService();
+    if (!svc.live) return;
+    const unsub = svc.onMatchmaking((s) => {
+      if (s.phase === "ready") {
+        enterServerMatch(svc);
+        goGame("home");
+      }
+    });
+    return unsub;
+  }, [enterServerMatch, goGame]);
+
   if (!room) return null;
+  const hasPending = room.seats.some((s) => s.kind === "invited");
   const seat = (n: number) => room.seats.find((s) => s.seat === n)!;
   const statusLabel = (s: PresenceStatus) =>
     s === "online" ? t("friends.online") : s === "in-game" ? t("friends.inGame") : t("friends.offline");
@@ -64,6 +81,13 @@ export function RoomScreen() {
   };
 
   const start = async () => {
+    if (hasPending) return; // never start while a friend's invite is still pending
+    if (getService().live) {
+      // Server runs the match; it pushes matchFound → the effect above enters it.
+      await startRoom();
+      return;
+    }
+    // Offline mock: build a client-run match from the (bot-filled) seats.
     await startRoom();
     const r = useOnlineStore.getState().room!;
     const players = r.seats
@@ -136,11 +160,18 @@ export function RoomScreen() {
         </div>
       </div>
 
+      {hasPending && (
+        <p className="text-center text-[11px] text-gold-300/80 mt-5 -mb-2">{t("room.waitAccept")}</p>
+      )}
       <div className="flex gap-3 mt-7">
         <button onClick={leave} className="glass rounded-xl px-5 py-3 text-cream/70 hover:text-cream">
           {t("room.leave")}
         </button>
-        <button onClick={start} className="btn-gold flex-1 rounded-xl py-3 text-lg">
+        <button
+          onClick={start}
+          disabled={hasPending}
+          className="btn-gold flex-1 rounded-xl py-3 text-lg disabled:opacity-50 disabled:cursor-not-allowed"
+        >
           {t("room.start")}
         </button>
       </div>