Economy: free vs paid games + buy-coins page; friends remove confirmation

- Coins only matter for ranked: free games (vs computer / private friend rooms)
  cost nothing; random ranked requires an entry (stake), gated by balance →
  routes to buy-coins when short
- Buy Coins page (CoinPack/getCoinPacks/buyCoins; mock credits now, real
  Zarinpal/IDPay TODO); TopBar coins → buy; lobby create-room is Free
- Friends: removed instant red ✕ delete; UserMinus → inline confirm before remove

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

src/components/screens/OnlineLobbyScreen.tsx

@@ -5,52 +5,72 @@ import { Coins, Trophy, Users } from "lucide-react";
 import { useState } from "react";
 import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
 import { useOnlineStore } from "@/lib/online-store";
+import { useSessionStore } from "@/lib/session-store";
 import { useUIStore } from "@/lib/ui-store";
 import { useI18n } from "@/lib/i18n";
 import { cn } from "@/lib/cn";
 
-const STAKES = [0, 100, 500, 1000];
+const ENTRIES = [100, 500, 1000];
 
 export function OnlineLobbyScreen() {
   const { t } = useI18n();
   const createRoom = useOnlineStore((s) => s.createRoom);
   const startMatchmaking = useOnlineStore((s) => s.startMatchmaking);
   const go = useUIStore((s) => s.go);
-  const [stake, setStake] = useState(100);
+  const coins = useSessionStore((s) => s.profile?.coins ?? 0);
+  const [entry, setEntry] = useState(100);
 
+  // Private rooms with friends are free.
   const onCreate = async () => {
-    await createRoom({ targetScore: 7, stake, ranked: false });
+    await createRoom({ targetScore: 7, stake: 0, ranked: false });
     go("room");
   };
+
+  // Ranked random always costs the entry (you stake it).
   const onRandom = async () => {
-    await startMatchmaking({ ranked: true, stake });
+    if (coins < entry) {
+      go("buycoins");
+      return;
+    }
+    await startMatchmaking({ ranked: true, stake: entry });
     go("matchmaking");
   };
 
   return (
     <ScreenShell>
-      <ScreenHeader title={t("lobby.title")} />
+      <ScreenHeader
+        title={t("lobby.title")}
+        right={
+          <span className="glass rounded-full px-3 py-1.5 text-xs font-bold text-gold-300 flex items-center gap-1">
+            <Coins className="size-3.5 text-gold-400" />
+            {coins.toLocaleString()}
+          </span>
+        }
+      />
 
-      {/* stake */}
+      {/* entry (only for ranked) */}
       <div className="glass rounded-2xl p-4 mb-4">
         <div className="flex items-center gap-1.5 text-sm text-cream/70 mb-2.5">
           <Coins className="size-4 text-gold-400" />
-          {t("room.stake")}
+          {t("lobby.entry")}
         </div>
         <div className="flex gap-2">
-          {STAKES.map((s) => (
+          {ENTRIES.map((s) => (
             <button
               key={s}
-              onClick={() => setStake(s)}
+              onClick={() => setEntry(s)}
               className={cn(
                 "flex-1 rounded-xl py-2.5 text-sm font-bold transition",
-                stake === s ? "btn-gold" : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
+                entry === s ? "btn-gold" : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
               )}
             >
-              {s === 0 ? t("common.free") : s.toLocaleString()}
+              {s.toLocaleString()}
             </button>
           ))}
         </div>
+        {coins < entry && (
+          <p className="text-rose-300 text-xs mt-2 text-center">{t("lobby.needCoins")}</p>
+        )}
       </div>
 
       <div className="space-y-3">
@@ -63,10 +83,14 @@ export function OnlineLobbyScreen() {
           <span className="size-12 rounded-xl bg-black/15 flex items-center justify-center text-[#2a1f04]">
             <Trophy className="size-6" />
           </span>
-          <span>
+          <span className="flex-1">
             <span className="block text-lg font-black text-[#2a1f04]">{t("lobby.random")}</span>
             <span className="block text-xs text-[#2a1f04]/70">{t("lobby.randomDesc")}</span>
           </span>
+          <span className="flex items-center gap-1 text-[#2a1f04] font-black">
+            {entry}
+            <Coins className="size-4" />
+          </span>
         </motion.button>
 
         <motion.button
@@ -78,10 +102,11 @@ export function OnlineLobbyScreen() {
           <span className="size-12 rounded-xl bg-navy-900 gold-border flex items-center justify-center text-gold-400">
             <Users className="size-6" />
           </span>
-          <span>
+          <span className="flex-1">
             <span className="block text-lg font-black text-cream">{t("lobby.createRoom")}</span>
             <span className="block text-xs text-cream/55">{t("lobby.createDesc")}</span>
           </span>
+          <span className="text-teal-300 font-bold text-sm">{t("lobby.free")}</span>
         </motion.button>
       </div>
     </ScreenShell>