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/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) */}
-        <div className="flex-1 flex flex-col min-h-0 landscape:flex-row landscape:items-stretch landscape:justify-center landscape:gap-6">
+      {/* content */}
+      <div className="relative z-10 flex-1 min-h-0 flex flex-col p-4 sm:p-5">
+        <TopBar />
 
-        {/* ===== column A: branding + play actions ===== */}
-        <div className="flex flex-col landscape:flex-1 landscape:max-w-md landscape:justify-center landscape:min-h-0">
-
-        {/* logo */}
-        <motion.div
-          initial={{ opacity: 0, y: 16 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="flex flex-col items-center mt-4 mb-5 sm:mt-6 sm:mb-7 landscape:mt-0 landscape:mb-3"
-        >
-          {/* logo + title on one row (no overflow); subtitle beneath the title */}
-          <div className="flex items-center gap-3">
-            <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">
-              <span className="gold-text text-3xl short:text-2xl font-black leading-none">♠</span>
+        {/* hero: branding + play actions (stacked portrait, side-by-side landscape) */}
+        <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 */}
+          <motion.div
+            initial={{ opacity: 0, y: 14 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="flex flex-col items-center landscape:items-start"
+          >
+            <div className="flex items-center gap-3">
+              <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">
+                <span className="gold-text text-3xl sm:text-4xl short:text-2xl font-black leading-none">♠</span>
+              </div>
+              <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">
-              <h1 className="gold-text text-3xl sm:text-4xl short:text-2xl font-black tracking-tight leading-none">
-                {t("app.title")}
-              </h1>
-              <p className="text-cream/60 mt-1.5 text-xs sm:text-sm leading-none">{t("app.subtitle")}</p>
+            <div className="mt-4 short:mt-2">
+              <OnlinePlayers />
             </div>
-          </div>
-          <div className="mt-3 short:mt-1.5">
-            <OnlinePlayers />
-          </div>
-        </motion.div>
+          </motion.div>
 
-        {/* HERO: play online */}
-        <div className="relative">
-          {/* glow */}
-          <div className="pointer-events-none absolute -inset-2 rounded-[28px] bg-gold-500/25 blur-2xl" />
-          <motion.button
+          {/* play actions */}
+          <motion.div
             initial={{ opacity: 0, y: 14 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.05 }}
-            whileTap={{ scale: 0.985 }}
-            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"
+            className="w-full max-w-sm landscape:max-w-xs flex flex-col gap-3 short:gap-2"
           >
-            <span className="grid size-12 sm:size-14 short:size-10 shrink-0 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
-              <Play className="size-7 short:size-5" fill="currentColor" />
-            </span>
-            <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">
-                {t("menu.online")}
+            <button
+              onClick={playOnline}
+              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="grid size-12 short:size-9 shrink-0 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
+                <Play className="size-6 short:size-5" fill="currentColor" />
               </span>
-              <span className="block text-xs text-[#2a1f04]/70 truncate">{t("menu.onlineDesc")}</span>
-            </span>
-            <Chevron className="size-6 text-[#2a1f04]/70 shrink-0" />
-          </motion.button>
-        </div>
-
-        {/* vs computer */}
-        <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")}
+              <span className="flex-1 min-w-0">
+                <span className="block text-xl short:text-lg font-black text-[#2a1f04] leading-tight truncate">
+                  {t("menu.online")}
+                </span>
+                <span className="block text-xs text-[#2a1f04]/70 truncate">{t("menu.onlineDesc")}</span>
+              </span>
+              <Chevron className="size-6 text-[#2a1f04]/70 shrink-0" />
             </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"
-              )}
+              onClick={playVsComputer}
+              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"
             >
-              <Zap className={cn("size-3.5", speed && "fill-current")} />
-              {t("speed.label")}
+              <span className="grid size-12 short:size-9 shrink-0 place-items-center rounded-2xl bg-teal-500/15 text-teal-300">
+                <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 ===== */}
-        <div className="flex flex-col landscape:flex-1 landscape:max-w-sm landscape:justify-center landscape:min-h-0">
-
-        {/* tiles */}
-        <div className="grid grid-cols-4 gap-2.5 mt-3 sm:mt-4 landscape:mt-0">
-          <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")} tint="sky" onClick={() => nav(isAuthed ? "friends" : "auth")} />
-          <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")} />
+            {/* Normal / Speed mode picker */}
+            <div className="panel 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)}
+                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);