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.
-  Deep navy/teal table, gold filigree accents, geometric motifs.
+  Barg-e Vasat — "Emerald Felt" theme (UNO-style, on-brand).
+  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-900: #0a142e;
-  --navy-800: #0e1c3f;
-  --navy-700: #14274f;
-  --teal-700: #0d6b6b;
+  --navy-950: #062a18;  /* deepest surface */
+  --navy-900: #0a3b25;  /* panel base */
+  --navy-800: #114e2e;  /* raised surface */
+  --navy-700: #1c7a4a;  /* accent surface */
+  --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(900px 700px at 50% 120%, rgba(212, 175, 55, 0.08), transparent 55%),
-    var(--navy-950);
+    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.10), transparent 55%);
   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 {
-  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
-  color: #2a1f04;
+/* ── UNO-style component kit ────────────────────────────────────────── */
+
+/* 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);
-  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
+  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
 }
-.btn-gold:hover {
-  transform: translateY(-1px);
-  filter: brightness(1.05);
-  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
+
+/* Glossy, chunky 3D gold button (own solid underside — no press-3d needed). */
+.btn-gold {
+  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);
 }