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

@@ -60,7 +60,8 @@ export function HomeScreen() {
     if (!isAuthed) return nav("auth");
     sound.init();
     sound.play("click");
-    await createRoom({ targetScore: 7, stake: 0, ranked: false });
+    // Private rooms cost 150 coins per player (stake → winner takes the pot).
+    await createRoom({ targetScore: 7, stake: 150, ranked: false });
     go("room");
   };
 

src/components/online/NotificationToaster.tsx

@@ -2,49 +2,60 @@
 
 import { AnimatePresence, motion } from "framer-motion";
 import { useEffect } from "react";
+import { X } from "lucide-react";
 import { openNotification, useNotifStore } from "@/lib/notification-store";
+import { useUIStore } from "@/lib/ui-store";
 import { useI18n } from "@/lib/i18n";
 
+/**
+ * Minimal, non-intrusive toast: a single-line chip pinned to the top corner.
+ * Tap the title to open it, tap ✕ (or swipe up) to dismiss, auto-hides after a
+ * few seconds. Never shown during a game so it can't disturb play.
+ */
 export function NotificationToaster() {
   const toast = useNotifStore((s) => s.lastToast);
   const dismiss = useNotifStore((s) => s.dismissToast);
+  const screen = useUIStore((s) => s.screen);
   const { locale } = useI18n();
 
   useEffect(() => {
     if (!toast) return;
-    const id = setTimeout(dismiss, 4000);
+    const id = setTimeout(dismiss, 3500);
     return () => clearTimeout(id);
   }, [toast, dismiss]);
 
+  if (screen === "game") return null;
+
   return (
     <AnimatePresence>
       {toast && (
         <motion.div
           key={toast.id}
-          initial={{ opacity: 0, y: -24 }}
+          initial={{ opacity: 0, y: -16 }}
           animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -24 }}
+          exit={{ opacity: 0, y: -16 }}
           drag="y"
           dragSnapToOrigin
           dragConstraints={{ top: 0, bottom: 0 }}
           onDragEnd={(_, info) => {
-            if (info.offset.y < -40) dismiss();
+            if (info.offset.y < -30) dismiss();
           }}
-          onClick={() => toast && openNotification(toast)}
+          className="fixed top-2 z-[60] ltr:right-2 rtl:left-2 safe-top pointer-events-none"
-          className="fixed top-3 inset-x-0 z-[60] flex justify-center px-4 pointer-events-none"
         >
-          <div className="glass rounded-2xl px-4 py-3 flex items-center gap-3 max-w-sm w-full pointer-events-auto shadow-xl cursor-pointer active:scale-[0.99] transition-transform">
+          <div className="glass rounded-xl ps-3 pe-1.5 py-1.5 flex items-center gap-2 w-max max-w-[80vw] pointer-events-auto shadow-lg">
-            <span className="text-2xl">{toast.icon}</span>
+            <span className="text-base shrink-0">{toast.icon}</span>
-            <div className="flex-1 min-w-0">
+            <button onClick={() => toast && openNotification(toast)} className="min-w-0 text-start">
-              <div className="text-sm font-semibold text-cream truncate">
+              <span className="block text-xs font-semibold text-cream truncate max-w-[44vw] sm:max-w-[220px]">
                 {locale === "fa" ? toast.titleFa : toast.titleEn}
-              </div>
+              </span>
-              {(toast.bodyFa || toast.bodyEn) && (
+            </button>
-                <div className="text-[11px] text-cream/55 truncate">
+            <button
-                  {locale === "fa" ? toast.bodyFa : toast.bodyEn}
+              onClick={dismiss}
-                </div>
+              aria-label="close"
-              )}
+              className="shrink-0 rounded-full p-1 text-cream/45 hover:text-cream hover:bg-navy-800/70 transition"
-            </div>
+            >
+              <X className="size-3.5" />
+            </button>
           </div>
         </motion.div>
       )}

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",
+              "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/50"
+              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" />
+            {/* coin pile */}
-            <span className="text-xl font-black gold-text">{fmt(p.coins + p.bonus)}</span>
+            <div
-            {p.bonus > 0 && (
+              className="grid size-16 place-items-center rounded-2xl text-4xl"
-              <span className="text-[10px] text-teal-300">
+              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
-        <motion.button
+        whileTap={{ scale: 0.985 }}
-          whileTap={{ scale: 0.985 }}
+        onClick={onRandom}
-          onClick={onRandom}
+        className="btn-gold w-full rounded-3xl p-5 flex items-center gap-4 text-start"
-          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]">
-          <span className="grid size-12 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
+          <Trophy className="size-6" />
-            <Trophy className="size-6" />
+        </span>
-          </span>
+        <span className="flex-1">
-          <span className="flex-1">
+          <span className="block text-lg font-black text-[#2a1f04]">{t("lobby.random")}</span>
-            <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 className="block text-xs text-[#2a1f04]/70">{t("lobby.randomDesc")}</span>
+        </span>
-          </span>
+        <span className="flex items-center gap-1 text-[#2a1f04] font-black">
-          <span className="flex items-center gap-1 text-[#2a1f04] font-black">
+          {entry}
-            {entry}
+          <Coins className="size-4" />
-            <Coins className="size-4" />
+        </span>
-          </span>
+      </motion.button>
-        </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>
     </ScreenShell>
   );
 }