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>