Home menu UNO-style UX refactor (tactile, hero Play)

Keep the Persian-luxury palette, adopt casual card-game UX:
- New .press-3d primitive (solid underside that compresses on tap, reduced-motion
  aware) for tactile buttons.
- Home: a large glowing hero "Play online" button (Play icon + chevron), a
  tactile vs-computer card, and chunkier mode tiles with color-tinted icon chips
  (teal/sky/gold/rose). All handlers + i18n unchanged.

Verified: tsc + next build clean; web rebuilt :1500.

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

src/app/globals.css

@@ -59,6 +59,20 @@
   box-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
 }
 
+/* Tactile "3D press" buttons (casual card-game feel) — a solid underside that
+   compresses on tap. Pair with a bg/glass class for the face. */
+.press-3d {
+  box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.30), 0 8px 16px rgba(0, 0, 0, 0.28);
+  transition: transform 0.08s ease, box-shadow 0.08s ease;
+}
+.press-3d:active {
+  transform: translateY(4px);
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.30), 0 3px 8px rgba(0, 0, 0, 0.28);
+}
+@media (prefers-reduced-motion: reduce) {
+  .press-3d, .press-3d:active { transition: none; transform: none; }
+}
+
 /* HUD text stays legible over the dynamic felt/table (game-ui best practice). */
 .hud-shadow {
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.4);

src/components/HomeScreen.tsx

@@ -3,14 +3,16 @@
 import { motion } from "framer-motion";
 import {
   Bot,
+  ChevronLeft,
+  ChevronRight,
   Globe,
   LogIn,
   LogOut,
+  Play,
   ShoppingBag,
   Trophy,
   User,
   Users,
-  Wifi,
 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useGameStore } from "@/lib/game-store";
@@ -23,7 +25,7 @@ import { SUIT_SYMBOL } from "@/lib/hokm/types";
 import { TopBar } from "./online/TopBar";
 
 export function HomeScreen() {
-  const { t, toggle } = useI18n();
+  const { t, toggle, locale } = useI18n();
   const newMatch = useGameStore((s) => s.newMatch);
   const goGame = useUIStore((s) => s.goGame);
   const go = useUIStore((s) => s.go);
@@ -44,6 +46,7 @@ export function HomeScreen() {
   };
 
   const playOnline = () => nav(isAuthed ? "online" : "auth");
+  const Chevron = locale === "fa" ? ChevronLeft : ChevronRight;
 
   return (
     <main className="persian-pattern relative h-dvh w-full overflow-y-auto overscroll-contain safe-top safe-x safe-bottom">
@@ -57,7 +60,7 @@ export function HomeScreen() {
         <motion.div
           initial={{ opacity: 0, y: 16 }}
           animate={{ opacity: 1, y: 0 }}
-          className="flex flex-col items-center text-center mt-6 mb-7"
+          className="flex flex-col items-center text-center mt-5 mb-6"
         >
           <div className="size-16 rounded-2xl gold-border flex items-center justify-center bg-navy-900 mb-3 shadow-lg">
             <span className="gold-text text-4xl font-black leading-none">♠</span>
@@ -69,15 +72,33 @@ export function HomeScreen() {
           <OnlinePlayers />
         </motion.div>
 
-        {/* primary actions */}
+        {/* HERO: play online */}
-        <div className="space-y-3">
+        <div className="relative">
-          <PrimaryCard
+          {/* glow */}
-            icon={<Wifi className="size-6" />}
+          <div className="pointer-events-none absolute -inset-2 rounded-[28px] bg-gold-500/25 blur-2xl" />
-            title={t("menu.online")}
+          <motion.button
-            desc={t("menu.onlineDesc")}
+            initial={{ opacity: 0, y: 14 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.05 }}
+            whileTap={{ scale: 0.985 }}
             onClick={playOnline}
-            primary
+            className="press-3d btn-gold relative w-full rounded-3xl px-5 py-5 flex items-center gap-4 text-start"
-          />
+          >
+            <span className="grid size-14 shrink-0 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
+              <Play className="size-7" fill="currentColor" />
+            </span>
+            <span className="flex-1 min-w-0">
+              <span className="block text-2xl font-black text-[#2a1f04] leading-tight">
+                {t("menu.online")}
+              </span>
+              <span className="block text-xs text-[#2a1f04]/70">{t("menu.onlineDesc")}</span>
+            </span>
+            <Chevron className="size-6 text-[#2a1f04]/70 shrink-0" />
+          </motion.button>
+        </div>
+
+        {/* vs computer */}
+        <div className="mt-3">
           <PrimaryCard
             icon={<Bot className="size-6" />}
             title={t("menu.vsComputer")}
@@ -88,10 +109,10 @@ export function HomeScreen() {
 
         {/* tiles */}
         <div className="grid grid-cols-4 gap-2.5 mt-4">
-          <Tile icon={<User className="size-5" />} label={t("menu.profile")} onClick={() => nav("profile")} />
+          <Tile icon={<User className="size-5" />} label={t("menu.profile")} tint="teal" onClick={() => nav("profile")} />
-          <Tile icon={<Users className="size-5" />} label={t("menu.friends")} onClick={() => nav(isAuthed ? "friends" : "auth")} />
+          <Tile icon={<Users className="size-5" />} label={t("menu.friends")} tint="sky" onClick={() => nav(isAuthed ? "friends" : "auth")} />
-          <Tile icon={<Trophy className="size-5" />} label={t("menu.leaderboard")} onClick={() => nav("leaderboard")} />
+          <Tile icon={<Trophy className="size-5" />} label={t("menu.leaderboard")} tint="gold" onClick={() => nav("leaderboard")} />
-          <Tile icon={<ShoppingBag className="size-5" />} label={t("menu.shop")} onClick={() => nav("shop")} />
+          <Tile icon={<ShoppingBag className="size-5" />} label={t("menu.shop")} tint="rose" onClick={() => nav("shop")} />
         </div>
 
         <div className="flex-1" />
@@ -143,25 +164,22 @@ function PrimaryCard({
 }) {
   return (
     <motion.button
-      whileTap={{ scale: 0.98 }}
+      whileTap={{ scale: 0.985 }}
-      whileHover={{ y: -2 }}
       onClick={onClick}
       className={
-        "w-full rounded-2xl p-4 flex items-center gap-4 text-start transition " +
+        "press-3d w-full rounded-3xl px-5 py-4 flex items-center gap-4 text-start " +
-        (primary
+        (primary ? "btn-gold" : "glass")
-          ? "btn-gold"
-          : "glass hover:bg-navy-800/80")
       }
     >
       <span
         className={
-          "size-12 rounded-xl flex items-center justify-center shrink-0 " +
+          "grid size-12 shrink-0 place-items-center rounded-2xl " +
-          (primary ? "bg-black/15 text-[#2a1f04]" : "bg-navy-900 gold-border text-gold-400")
+          (primary ? "bg-black/15 text-[#2a1f04]" : "bg-teal-500/15 text-teal-300")
         }
       >
         {icon}
       </span>
-      <span>
+      <span className="flex-1">
         <span className={"block text-lg font-black " + (primary ? "text-[#2a1f04]" : "text-cream")}>
           {title}
         </span>
@@ -173,23 +191,34 @@ function PrimaryCard({
   );
 }
 
+const TILE_TINTS: Record<string, string> = {
+  teal: "bg-teal-500/15 text-teal-400",
+  sky: "bg-sky-500/15 text-sky-400",
+  gold: "bg-gold-500/15 text-gold-400",
+  rose: "bg-rose-500/15 text-rose-400",
+};
+
 function Tile({
   icon,
   label,
+  tint = "gold",
   onClick,
 }: {
   icon: React.ReactNode;
   label: string;
+  tint?: keyof typeof TILE_TINTS;
   onClick: () => void;
 }) {
   return (
     <motion.button
-      whileTap={{ scale: 0.95 }}
+      whileTap={{ scale: 0.94 }}
       onClick={onClick}
-      className="glass rounded-2xl py-3 flex flex-col items-center gap-1.5 hover:bg-navy-800/80 transition"
+      className="press-3d glass rounded-2xl py-3 flex flex-col items-center gap-2"
     >
-      <span className="text-gold-400">{icon}</span>
+      <span className={"grid size-10 place-items-center rounded-xl " + TILE_TINTS[tint]}>
-      <span className="text-[11px] text-cream/80">{label}</span>
+        {icon}
+      </span>
+      <span className="text-[11px] font-semibold text-cream/85">{label}</span>
     </motion.button>
   );
 }