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/BuyCoinsScreen.tsx

@@ -116,8 +116,6 @@ export function BuyCoinsScreen() {
           )
         }
       />
-      <p className="text-center text-cream/50 text-xs mb-4">{t("buy.note")}</p>
-
       {gained != null && (
         <div className="mb-4 text-center text-teal-300 font-bold glass rounded-xl py-2 flex items-center justify-center gap-1.5">
           +{fmt(gained)} <Coins className="size-4 text-gold-400" />
@@ -128,30 +126,39 @@ export function BuyCoinsScreen() {
         <div className="mb-4 text-center text-cream/80 text-sm glass rounded-xl py-2">{msg}</div>
       )}
 
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 pb-6">
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 pb-6">
         {packs.map((p) => (
           <button
             key={p.id}
             disabled={busy !== null}
             onClick={() => buy(p)}
             className={cn(
-              "glass rounded-2xl p-4 pt-5 flex flex-col items-center gap-1 relative hover:bg-navy-800/80 transition disabled:opacity-60",
-              p.tag && "ring-2 ring-gold-400/50"
+              "panel rounded-3xl p-3 pt-6 flex flex-col items-center gap-2 relative transition disabled:opacity-60 active:scale-[0.98]",
+              p.tag && "ring-2 ring-gold-400/60"
             )}
           >
             {p.tag && (
-              <span className="absolute -top-2 rounded-full btn-gold text-[10px] font-bold px-2 py-0.5">
+              <span className="absolute -top-2.5 rounded-full btn-gold text-[10px] font-black px-2.5 py-0.5 shadow">
                 {p.tag === "best" ? t("buy.best") : p.tag === "starter" ? t("buy.starter") : t("buy.popular")}
               </span>
             )}
-            <Coins className="size-7 text-gold-400" />
-            <span className="text-xl font-black gold-text">{fmt(p.coins + p.bonus)}</span>
-            {p.bonus > 0 && (
-              <span className="text-[10px] text-teal-300">
+            {/* coin pile */}
+            <div
+              className="grid size-16 place-items-center rounded-2xl text-4xl"
+              style={{ background: "radial-gradient(circle at 50% 35%, rgba(241,218,138,.28), rgba(212,175,55,.10))" }}
+            >
+              🪙
+            </div>
+            <span className="text-xl font-black gold-text leading-none">{fmt(p.coins + p.bonus)}</span>
+            {p.bonus > 0 ? (
+              <span className="rounded-full bg-teal-500/15 text-teal-300 text-[10px] font-bold px-2 py-0.5">
                 +{fmt(p.bonus)} {t("buy.bonus")}
               </span>
+            ) : (
+              <span className="h-[18px]" />
             )}
-            <span className="mt-1 text-sm font-bold text-cream">
+            {/* price = buy CTA */}
+            <span className="btn-gold mt-1 w-full rounded-xl py-2 text-sm font-black text-center">
               {fmt(p.priceToman)} {t("buy.toman")}
             </span>
           </button>

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