UNO refactor (stage 1): emerald felt theme + kit + full Home redesign

- Theme: retint to lit emerald card-table felt + gold (body radial felt, green
  glass panels). New component kit in globals.css: glossy chunky 3D btn-gold +
  btn-green, .panel, .ribbon. Card backs pinned to classic navy.
- Home fully redesigned UNO-style: nav rail + branding + two big 3D play
  buttons (gold online / green-glass vs-computer) + speed toggle; dropped the
  redundant 4 tiles (the rail covers them). Fits landscape (short: variants).

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

src/app/globals.css

@@ -7,26 +7,34 @@
 @custom-variant tall (@media (min-height: 700px));
 
 /*
-  FlatRender Hokm — "Persian Luxury" theme.
+  Barg-e Vasat — "Emerald Felt" theme (UNO-style, on-brand).
-  Deep navy/teal table, gold filigree accents, geometric motifs.
+  Lit emerald card-table felt + gold; dark-green glass panels, glossy 3D buttons.
+  The `navy-*` token names are kept (used app-wide) but now map to deep GREEN
+  surfaces — retinting here recolors every surface cohesively.
 */
 
 :root {
-  --navy-950: #060c1f;
+  --navy-950: #062a18;  /* deepest surface */
-  --navy-900: #0a142e;
+  --navy-900: #0a3b25;  /* panel base */
-  --navy-800: #0e1c3f;
+  --navy-800: #114e2e;  /* raised surface */
-  --navy-700: #14274f;
+  --navy-700: #1c7a4a;  /* accent surface */
-  --teal-700: #0d6b6b;
+  --teal-700: #0d6b5c;
   --teal-500: #14b8a6;
   --teal-400: #2dd4bf;
-  --gold-600: #b8860b;
+  --gold-600: #9a6f0d;
   --gold-500: #d4af37;
   --gold-400: #e6c659;
   --gold-300: #f1da8a;
-  --cream: #f5ecd6;
+  --cream: #f6efdd;
+
+  --felt-center: #1c7a4a; /* lit table center */
+  --felt-mid: #114e2e;
+  --felt-edge: #07301c;
+  --green-btn: #2faa55;
+  --green-btn-lo: #1c6e36;
 
   --background: var(--navy-950);
-  --foreground: #eef2f8;
+  --foreground: #f3f7ef;
 }
 
 @theme inline {
@@ -101,9 +109,8 @@ body {
 
 body {
   background:
-    radial-gradient(1200px 800px at 50% -10%, rgba(20, 184, 166, 0.12), transparent 60%),
+    radial-gradient(120% 90% at 50% 18%, var(--felt-center) 0%, var(--felt-mid) 52%, var(--felt-edge) 100%),
-    radial-gradient(900px 700px at 50% 120%, rgba(212, 175, 55, 0.08), transparent 55%),
+    radial-gradient(900px 700px at 50% 120%, rgba(212, 175, 55, 0.10), transparent 55%);
-    var(--navy-950);
   color: var(--foreground);
   font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
@@ -139,25 +146,56 @@ body {
 }
 
 .glass {
-  background: rgba(10, 20, 46, 0.72);
+  background: rgba(6, 42, 25, 0.78);
   backdrop-filter: blur(14px);
-  border: 1px solid rgba(212, 175, 55, 0.18);
+  border: 1px solid rgba(212, 175, 55, 0.22);
 }
 
-.btn-gold {
+/* ── UNO-style component kit ────────────────────────────────────────── */
-  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
+
-  color: #2a1f04;
+/* Chunky rounded panel: dark-green glass, gold hairline, inner top highlight. */
+.panel {
+  background: rgba(6, 42, 25, 0.82);
+  border: 1.5px solid rgba(212, 175, 55, 0.30);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 28px rgba(0, 0, 0, 0.34);
+  backdrop-filter: blur(8px);
+}
+
+/* Banner ribbon header (e.g. «زندگیِ حکم»). */
+.ribbon {
+  background: linear-gradient(180deg, var(--navy-700), var(--navy-900));
+  border: 1.5px solid var(--gold-500);
+  color: var(--gold-300);
   font-weight: 700;
-  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
+  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
-  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
 }
-.btn-gold:hover {
+
-  transform: translateY(-1px);
+/* Glossy, chunky 3D gold button (own solid underside — no press-3d needed). */
-  filter: brightness(1.05);
+.btn-gold {
-  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  background: linear-gradient(180deg, var(--gold-300), var(--gold-400) 45%, var(--gold-500));
+  color: #2a1f04;
+  font-weight: 800;
+  box-shadow: 0 6px 0 0 var(--gold-600), 0 9px 16px rgba(0, 0, 0, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.55);
+  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
 }
+.btn-gold:hover { filter: brightness(1.04); }
 .btn-gold:active {
-  transform: translateY(0);
+  transform: translateY(4px);
+  box-shadow: 0 2px 0 0 var(--gold-600), 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.5);
+}
+
+/* Glossy, chunky 3D green button (UNO secondary actions). */
+.btn-green {
+  background: linear-gradient(180deg, #6bd98a, var(--green-btn));
+  color: #08220f;
+  font-weight: 800;
+  box-shadow: 0 6px 0 0 var(--green-btn-lo), 0 9px 16px rgba(0, 0, 0, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.4);
+  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
+}
+.btn-green:hover { filter: brightness(1.04); }
+.btn-green:active {
+  transform: translateY(4px);
+  box-shadow: 0 2px 0 0 var(--green-btn-lo), 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.4);
 }
 
 /* Card face */
@@ -169,7 +207,7 @@ body {
 .card-back {
   background:
     repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.22) 0 6px, transparent 6px 12px),
-    linear-gradient(160deg, var(--navy-700), var(--navy-900));
+    linear-gradient(160deg, #14274f, #0a142e);
   border: 1px solid rgba(212, 175, 55, 0.45);
   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(212, 175, 55, 0.25);
 }

src/components/HomeScreen.tsx

@@ -9,10 +9,6 @@ import {
   LogIn,
   LogOut,
   Play,
-  ShoppingBag,
-  Trophy,
-  User,
-  Users,
 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Zap } from "lucide-react";
@@ -27,6 +23,7 @@ import { SPEED_TARGET_SCORE } from "@/lib/online/gamification";
 import { SUIT_SYMBOL } from "@/lib/hokm/types";
 import { cn } from "@/lib/cn";
 import { TopBar } from "./online/TopBar";
+import { NavRail } from "./online/NavRail";
 
 export function HomeScreen() {
   const { t, toggle, locale } = useI18n();
@@ -73,116 +70,104 @@ export function HomeScreen() {
   const Chevron = locale === "fa" ? ChevronLeft : ChevronRight;
 
   return (
-    <main className="persian-pattern relative h-dvh w-full overflow-y-auto landscape:overflow-hidden overscroll-contain safe-top safe-x safe-bottom">
+    <main className="persian-pattern relative h-dvh w-full overflow-hidden overscroll-contain safe-top safe-x flex flex-col landscape:flex-row">
       <FloatingSuits />
-      <div className="relative z-10 mx-auto w-full max-w-md landscape:max-w-5xl p-4 sm:p-6 flex flex-col min-h-dvh landscape:min-h-0 landscape:h-dvh">
-        <div className="pt-1">
-          <TopBar />
-        </div>
 
-        {/* content: single column (portrait) → two columns (landscape) */}
+      {/* content */}
-        <div className="flex-1 flex flex-col min-h-0 landscape:flex-row landscape:items-stretch landscape:justify-center landscape:gap-6">
+      <div className="relative z-10 flex-1 min-h-0 flex flex-col p-4 sm:p-5">
+        <TopBar />
 
-        {/* ===== column A: branding + play actions ===== */}
+        {/* hero: branding + play actions (stacked portrait, side-by-side landscape) */}
-        <div className="flex flex-col landscape:flex-1 landscape:max-w-md landscape:justify-center landscape:min-h-0">
+        <div className="flex-1 min-h-0 flex flex-col items-center justify-center gap-6 short:gap-4 landscape:flex-row landscape:gap-10">
-
+          {/* branding */}
-        {/* logo */}
+          <motion.div
-        <motion.div
+            initial={{ opacity: 0, y: 14 }}
-          initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
-          animate={{ opacity: 1, y: 0 }}
+            className="flex flex-col items-center landscape:items-start"
-          className="flex flex-col items-center mt-4 mb-5 sm:mt-6 sm:mb-7 landscape:mt-0 landscape:mb-3"
+          >
-        >
+            <div className="flex items-center gap-3">
-          {/* logo + title on one row (no overflow); subtitle beneath the title */}
+              <div className="size-14 sm:size-16 short:size-11 shrink-0 rounded-2xl gold-border flex items-center justify-center bg-navy-900 shadow-lg">
-          <div className="flex items-center gap-3">
+                <span className="gold-text text-3xl sm:text-4xl short:text-2xl font-black leading-none">♠</span>
-            <div className="size-12 sm:size-14 short:size-10 shrink-0 rounded-2xl gold-border flex items-center justify-center bg-navy-900 shadow-lg">
+              </div>
-              <span className="gold-text text-3xl short:text-2xl font-black leading-none">♠</span>
+              <div className="text-start">
+                <h1 className="gold-text text-4xl sm:text-5xl short:text-3xl font-black tracking-tight leading-none">
+                  {t("app.title")}
+                </h1>
+                <p className="text-cream/65 mt-2 text-sm leading-none">{t("app.subtitle")}</p>
+              </div>
             </div>
-            <div className="text-start">
+            <div className="mt-4 short:mt-2">
-              <h1 className="gold-text text-3xl sm:text-4xl short:text-2xl font-black tracking-tight leading-none">
+              <OnlinePlayers />
-                {t("app.title")}
-              </h1>
-              <p className="text-cream/60 mt-1.5 text-xs sm:text-sm leading-none">{t("app.subtitle")}</p>
             </div>
-          </div>
+          </motion.div>
-          <div className="mt-3 short:mt-1.5">
-            <OnlinePlayers />
-          </div>
-        </motion.div>
 
-        {/* HERO: play online */}
+          {/* play actions */}
-        <div className="relative">
+          <motion.div
-          {/* glow */}
-          <div className="pointer-events-none absolute -inset-2 rounded-[28px] bg-gold-500/25 blur-2xl" />
-          <motion.button
             initial={{ opacity: 0, y: 14 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.05 }}
-            whileTap={{ scale: 0.985 }}
+            className="w-full max-w-sm landscape:max-w-xs flex flex-col gap-3 short:gap-2"
-            onClick={playOnline}
-            className="press-3d btn-gold relative w-full rounded-3xl px-5 py-4 sm:py-5 short:py-2.5 flex items-center gap-4 short:gap-3 text-start"
           >
-            <span className="grid size-12 sm:size-14 short:size-10 shrink-0 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
+            <button
-              <Play className="size-7 short:size-5" fill="currentColor" />
+              onClick={playOnline}
-            </span>
+              className="btn-gold w-full rounded-3xl px-5 py-4 short:py-2.5 flex items-center gap-4 short:gap-3 text-start"
-            <span className="flex-1 min-w-0">
+            >
-              <span className="block text-xl sm:text-2xl short:text-lg font-black text-[#2a1f04] leading-tight truncate">
+              <span className="grid size-12 short:size-9 shrink-0 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
-                {t("menu.online")}
+                <Play className="size-6 short:size-5" fill="currentColor" />
               </span>
-              <span className="block text-xs text-[#2a1f04]/70 truncate">{t("menu.onlineDesc")}</span>
+              <span className="flex-1 min-w-0">
-            </span>
+                <span className="block text-xl short:text-lg font-black text-[#2a1f04] leading-tight truncate">
-            <Chevron className="size-6 text-[#2a1f04]/70 shrink-0" />
+                  {t("menu.online")}
-          </motion.button>
+                </span>
-        </div>
+                <span className="block text-xs text-[#2a1f04]/70 truncate">{t("menu.onlineDesc")}</span>
-
+              </span>
-        {/* vs computer */}
+              <Chevron className="size-6 text-[#2a1f04]/70 shrink-0" />
-        <div className="mt-3 short:mt-2">
-          <PrimaryCard
-            icon={<Bot className="size-6" />}
-            title={t("menu.vsComputer")}
-            desc={speed ? t("speed.desc") : t("menu.vsComputerDesc")}
-            onClick={playVsComputer}
-          />
-          {/* Normal / Speed mode picker */}
-          <div className="mt-2 short:mt-1.5 glass rounded-2xl p-1 flex gap-1">
-            <button
-              onClick={() => setSpeed(false)}
-              className={cn(
-                "flex-1 rounded-xl py-2 short:py-1.5 text-xs font-bold transition flex items-center justify-center gap-1.5",
-                !speed ? "btn-gold" : "text-cream/60 hover:text-cream"
-              )}
-            >
-              {t("speed.normal")}
             </button>
+
             <button
-              onClick={() => setSpeed(true)}
+              onClick={playVsComputer}
-              className={cn(
+              className="press-3d panel w-full rounded-3xl px-5 py-4 short:py-2.5 flex items-center gap-4 short:gap-3 text-start text-cream"
-                "flex-1 rounded-xl py-2 short:py-1.5 text-xs font-bold transition flex items-center justify-center gap-1.5",
-                speed ? "btn-gold" : "text-cream/60 hover:text-cream"
-              )}
             >
-              <Zap className={cn("size-3.5", speed && "fill-current")} />
+              <span className="grid size-12 short:size-9 shrink-0 place-items-center rounded-2xl bg-teal-500/15 text-teal-300">
-              {t("speed.label")}
+                <Bot className="size-6 short:size-5" />
+              </span>
+              <span className="flex-1 min-w-0">
+                <span className="block text-lg short:text-base font-black leading-tight truncate">
+                  {t("menu.vsComputer")}
+                </span>
+                <span className="block text-xs text-cream/55 truncate">
+                  {speed ? t("speed.desc") : t("menu.vsComputerDesc")}
+                </span>
+              </span>
             </button>
-          </div>
-        </div>
-        {/* ===== end column A ===== */}
-        </div>
 
-        {/* ===== column B: tiles + footer ===== */}
+            {/* Normal / Speed mode picker */}
-        <div className="flex flex-col landscape:flex-1 landscape:max-w-sm landscape:justify-center landscape:min-h-0">
+            <div className="panel rounded-2xl p-1 flex gap-1">
-
+              <button
-        {/* tiles */}
+                onClick={() => setSpeed(false)}
-        <div className="grid grid-cols-4 gap-2.5 mt-3 sm:mt-4 landscape:mt-0">
+                className={cn(
-          <Tile icon={<User className="size-5" />} label={t("menu.profile")} tint="teal" onClick={() => nav("profile")} />
+                  "flex-1 rounded-xl py-2 short:py-1.5 text-xs font-bold transition flex items-center justify-center gap-1.5",
-          <Tile icon={<Users className="size-5" />} label={t("menu.friends")} tint="sky" onClick={() => nav(isAuthed ? "friends" : "auth")} />
+                  !speed ? "btn-gold" : "text-cream/60 hover:text-cream"
-          <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")} tint="rose" onClick={() => nav("shop")} />
+              >
+                {t("speed.normal")}
+              </button>
+              <button
+                onClick={() => setSpeed(true)}
+                className={cn(
+                  "flex-1 rounded-xl py-2 short:py-1.5 text-xs font-bold transition flex items-center justify-center gap-1.5",
+                  speed ? "btn-gold" : "text-cream/60 hover:text-cream"
+                )}
+              >
+                <Zap className={cn("size-3.5", speed && "fill-current")} />
+                {t("speed.label")}
+              </button>
+            </div>
+          </motion.div>
         </div>
 
-        <div className="flex-1 landscape:hidden" />
-
         {/* footer */}
-        <div className="flex items-center justify-between gap-2 pt-4 sm:pt-6 pb-2 landscape:pt-0 landscape:mt-4">
+        <div className="flex items-center justify-between gap-2 pt-2 short:pt-1">
           {isAuthed ? (
             <button
               onClick={signOut}
@@ -208,89 +193,13 @@ export function HomeScreen() {
             {t("home.lang")}
           </button>
         </div>
-        {/* ===== end column B ===== */}
-        </div>
-        {/* ===== end content columns ===== */}
-        </div>
       </div>
+
+      <NavRail />
     </main>
   );
 }
 
-function PrimaryCard({
-  icon,
-  title,
-  desc,
-  onClick,
-  primary,
-}: {
-  icon: React.ReactNode;
-  title: string;
-  desc: string;
-  onClick: () => void;
-  primary?: boolean;
-}) {
-  return (
-    <motion.button
-      whileTap={{ scale: 0.985 }}
-      onClick={onClick}
-      className={
-        "press-3d w-full rounded-3xl px-5 py-4 short:py-2.5 flex items-center gap-4 short:gap-3 text-start " +
-        (primary ? "btn-gold" : "glass")
-      }
-    >
-      <span
-        className={
-          "grid size-12 short:size-10 shrink-0 place-items-center rounded-2xl " +
-          (primary ? "bg-black/15 text-[#2a1f04]" : "bg-teal-500/15 text-teal-300")
-        }
-      >
-        {icon}
-      </span>
-      <span className="flex-1">
-        <span className={"block text-lg font-black " + (primary ? "text-[#2a1f04]" : "text-cream")}>
-          {title}
-        </span>
-        <span className={"block text-xs " + (primary ? "text-[#2a1f04]/70" : "text-cream/55")}>
-          {desc}
-        </span>
-      </span>
-    </motion.button>
-  );
-}
-
-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.94 }}
-      onClick={onClick}
-      className="press-3d glass rounded-2xl py-3 flex flex-col items-center gap-2"
-    >
-      <span className={"grid size-10 place-items-center rounded-xl " + TILE_TINTS[tint]}>
-        {icon}
-      </span>
-      <span className="text-[11px] font-semibold text-cream/85">{label}</span>
-    </motion.button>
-  );
-}
-
 function OnlinePlayers() {
   const { t, locale } = useI18n();
   const [count, setCount] = useState<number | null>(null);