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/online/InviteModal.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { Coins, Users } from "lucide-react";
+import { useEffect, useState } from "react";
+import { getService } from "@/lib/online/service";
+import { useOnlineStore } from "@/lib/online-store";
+import { useUIStore } from "@/lib/ui-store";
+import { useI18n } from "@/lib/i18n";
+import { sound } from "@/lib/sound";
+import type { RoomInvite } from "@/lib/online/types";
+
+/**
+ * Global incoming private-room invite. When a friend invites you, this pops up
+ * with accept/decline. Accepting joins their room (you appear as a real guest,
+ * never a bot) and opens the room screen.
+ */
+export function InviteModal() {
+  const { t } = useI18n();
+  const acceptInvite = useOnlineStore((s) => s.acceptInvite);
+  const declineInvite = useOnlineStore((s) => s.declineInvite);
+  const go = useUIStore((s) => s.go);
+  const [invite, setInvite] = useState<RoomInvite | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    const unsub = getService().onRoomInvite((i) => {
+      setInvite(i);
+      if (i) sound.play("notify");
+    });
+    return unsub;
+  }, []);
+
+  if (!invite) return null;
+
+  const accept = async () => {
+    if (busy) return;
+    setBusy(true);
+    try {
+      await acceptInvite();
+      go("room");
+    } finally {
+      setBusy(false);
+      setInvite(null);
+    }
+  };
+  const decline = async () => {
+    if (busy) return;
+    setBusy(true);
+    try {
+      await declineInvite();
+    } finally {
+      setBusy(false);
+      setInvite(null);
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="fixed inset-0 z-[80] flex items-center justify-center bg-navy-950/85 backdrop-blur-sm p-5"
+      >
+        <motion.div
+          initial={{ scale: 0.9, y: 20 }}
+          animate={{ scale: 1, y: 0 }}
+          transition={{ type: "spring", stiffness: 240, damping: 22 }}
+          className="glass rounded-3xl p-6 w-full max-w-xs text-center"
+        >
+          <div className="mx-auto grid size-14 place-items-center rounded-2xl btn-gold mb-3">
+            <Users className="size-6" />
+          </div>
+          <h2 className="gold-text text-lg font-black">{t("invite.title")}</h2>
+          <p className="text-cream/75 text-sm mt-2">{t("invite.body").replace("{name}", invite.hostName)}</p>
+          {invite.stake > 0 && (
+            <p className="mt-2 inline-flex items-center gap-1 text-gold-300 text-xs font-bold">
+              {invite.stake.toLocaleString()} <Coins className="size-3.5" />
+            </p>
+          )}
+          <div className="flex gap-2 mt-5">
+            <button onClick={decline} disabled={busy} className="flex-1 glass rounded-xl py-3 text-cream/70 disabled:opacity-60">
+              {t("invite.decline")}
+            </button>
+            <button onClick={accept} disabled={busy} className="flex-1 btn-gold rounded-xl py-3 font-bold disabled:opacity-60">
+              {t("invite.accept")}
+            </button>
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

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>