UX batch: lobby trim, private stake, coin shop, minimal toast

- Lobby: remove private-room CTA (it's on Home now) → fits without scroll.
- Home: private rooms now cost 150 coins/player (stake 150).
- Buy Coins: drop the "secure payment" note; redesign packs as game-shop coin
  boxes (coin pile + amount + gold buy-price CTA), 2/3/4-col responsive.
- Notifications: minimal single-line corner toast, explicit ✕ close, hidden
  during play so it never disturbs the game.

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

src/components/screens/OnlineLobbyScreen.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { Coins, Lock, Trophy, Users } from "lucide-react";
+import { Coins, Lock, Trophy } from "lucide-react";
 import { useState } from "react";
 import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
 import { CoinsPill } from "@/components/online/CoinsPill";
@@ -32,7 +32,6 @@ function guardActiveMatch(): boolean {
 
 export function OnlineLobbyScreen() {
   const { t, locale } = useI18n();
-  const createRoom = useOnlineStore((s) => s.createRoom);
   const startMatchmaking = useOnlineStore((s) => s.startMatchmaking);
   const go = useUIStore((s) => s.go);
   const profile = useSessionStore((s) => s.profile);
@@ -43,13 +42,6 @@ export function OnlineLobbyScreen() {
   const entry = league.entry;
   const lockedLeague = level < league.minLevel;
 
-  // Private rooms with friends are free.
-  const onCreate = async () => {
-    if (guardActiveMatch()) return;
-    await createRoom({ targetScore: 7, stake: 0, ranked: false });
-    go("room");
-  };
-
   // Ranked random always costs the entry (you stake it).
   const onRandom = async () => {
     if (guardActiveMatch()) return;
@@ -123,40 +115,23 @@ export function OnlineLobbyScreen() {
         )}
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-2">
-        <motion.button
-          whileTap={{ scale: 0.985 }}
-          onClick={onRandom}
-          className="btn-gold w-full rounded-3xl p-5 flex items-center gap-4 text-start"
-        >
-          <span className="grid size-12 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
-            <Trophy className="size-6" />
-          </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
-          whileTap={{ scale: 0.985 }}
-          onClick={onCreate}
-          className="press-3d panel w-full rounded-3xl p-5 flex items-center gap-4 text-start"
-        >
-          <span className="grid size-12 place-items-center rounded-2xl bg-teal-500/15 text-teal-300">
-            <Users className="size-6" />
-          </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>
+      <motion.button
+        whileTap={{ scale: 0.985 }}
+        onClick={onRandom}
+        className="btn-gold w-full rounded-3xl p-5 flex items-center gap-4 text-start"
+      >
+        <span className="grid size-12 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
+          <Trophy className="size-6" />
+        </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>
     </ScreenShell>
   );
 }