docs(design): DESIGN.md for Night Arcade; flat faces, no gloss rims

DESIGN.md (and .impeccable/design.json) replace the June v3 spec with the
shipped Night Arcade system, derived from tokens.css and core.css: the
stage, ink tiles, white cards, keys on a lip, colour rationing, the board
palettes, Rubik with the pinned display face, motion and feel, RTL, and
the theming contract.

The documenter's audit found the code breaking its own rules: a white rim
on top of every key and the play key read as gloss (removed), the green
and orange faces had a lighter top that dropped white text under 3:1
(both are one flat colour now, orange deepened to 3.4:1), and small green
keys carried 13-14px text at 3.1:1 (they use a deeper green, 5:1). The
CTA glint stays, recorded as motion.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

public/css/core.css

@@ -364,7 +364,7 @@ html.no-chrome #hud, #hud:empty { display: none; }
   width: 58px; height: 58px;
   border-radius: 20px;
   background: var(--btn-green-2);
-  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 5px 0 var(--btn-green-edge), 0 0 0 5px rgba(29, 26, 37, 0.94), 0 14px 24px -6px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 5px 0 var(--btn-green-edge), 0 0 0 5px rgba(29, 26, 37, 0.94), 0 14px 24px -6px rgba(0, 0, 0, 0.6);
   padding: 8px;
   filter: none;
   opacity: 1;
@@ -373,7 +373,7 @@ html.no-chrome #hud, #hud:empty { display: none; }
 .tab-item[data-world="play"].active .tab-icon { transform: none; animation: playBreathe 2.6s ease-in-out infinite; }
 @keyframes playBreathe { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
 .tab-item[data-world="play"].active span:last-child { color: var(--btn-green-1); }
-.tab-item[data-world="play"]:not(.active) .tab-icon { background: var(--back-500); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 5px 0 var(--back-950), 0 0 0 5px rgba(29, 26, 37, 0.94); }
+.tab-item[data-world="play"]:not(.active) .tab-icon { background: var(--back-500); box-shadow: 0 5px 0 var(--back-950), 0 0 0 5px rgba(29, 26, 37, 0.94); }
 
 /* ── Scenes, and how they change (scene.js keeps the old one as a ghost) ─ */
 .scene {
@@ -615,16 +615,18 @@ a:not(.btn):not([class*="tab"]) { display: inline-flex; align-items: center; min
   line-height: 1.1;
   text-shadow: var(--text-outline);
   cursor: pointer;
-  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 var(--btn-lip) 0 var(--be);
+  box-shadow: 0 var(--btn-lip) 0 var(--be);
   transition: filter var(--dur-fast);
   -webkit-user-select: none;
   isolation: isolate;
 }
 .btn .i { stroke-width: 2.6; }
-.btn.is-pressed { translate: 0 4px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 1px 0 var(--be); }
+.btn.is-pressed { translate: 0 4px; box-shadow: 0 1px 0 var(--be); }
 .btn:disabled, .btn[aria-disabled="true"] { filter: grayscale(0.9) brightness(0.75); cursor: default; }
 
 .btn-primary, .btn-game { --b1: var(--btn-green-1); --b2: var(--btn-green-2); --be: var(--btn-green-edge); }
+/* Small keys carry 13-14px text, which needs 4.5:1: a deeper green. */
+.btn-sm.btn-primary, .btn-sm.btn-game { --b1: var(--btn-green-deep); --b2: var(--btn-green-deep); --be: var(--btn-green-deep-edge); }
 .btn-card, .btn-blue { --b1: var(--btn-blue-1); --b2: var(--btn-blue-2); --be: var(--btn-blue-edge); }
 .btn-gold { --b1: var(--btn-gold-1); --b2: var(--btn-gold-2); --be: var(--btn-gold-edge); --bt: var(--gold-ink); text-shadow: none; }
 .btn-danger, .btn-red { --b1: var(--btn-red-1); --b2: var(--btn-red-2); --be: var(--btn-red-edge); }

public/css/tokens.css

@@ -110,14 +110,15 @@
   --bronze: #F08A4B;
   --bronze-edge: #B5592A;
 
-  /* ── Buttons: a flat face (1 to 2 is a hair of shading, not a gloss)
-        and the lip under it ──────────────────────────────────────────── */
-  --btn-green-1: #27B466;  --btn-green-2: #20A85D;  --btn-green-edge: #12753F;   /* white text 3.1:1 */
+  /* ── Buttons: a flat face (-1/-2 kept as names; they are the same colour
+        where contrast is tight) and the lip under it ─────────────────── */
+  --btn-green-1: #20A85D;  --btn-green-2: #20A85D;  --btn-green-edge: #12753F;   /* white text 3.1:1 */
+  --btn-green-deep: #147F45; --btn-green-deep-edge: #0D5C31;                     /* small keys: 5:1 */
   --btn-gold-1: #FFCD40;   --btn-gold-2: #FFC229;   --btn-gold-edge: #CC8A05;
   --btn-red-1: #FF5A6A;    --btn-red-2: #FF4458;    --btn-red-edge: #C2203A;
   --btn-blue-1: #4C95FF;   --btn-blue-2: #3B86FF;   --btn-blue-edge: #1F5BC4;
   --btn-purple-1: #9C6DFF; --btn-purple-2: #8C5CFA; --btn-purple-edge: #5F33C2;
-  --btn-orange-1: #F27C2A; --btn-orange-2: #EC7420; --btn-orange-edge: #B0510C;
+  --btn-orange-1: #E06A16; --btn-orange-2: #E06A16; --btn-orange-edge: #A84E0C;   /* white text 3.4:1 */
   --btn-wood-1: #3B3547;   --btn-wood-2: #363042;   --btn-wood-edge: #201C28;   /* neutral */
   --btn-white-1: #FFFFFF;  --btn-white-2: #FFFFFF;  --btn-white-edge: #CFC9DA;
   --outline: #0D0C12;
@@ -141,8 +142,8 @@
   /* ── Each game owns one hue ────────────────────────────────────────── */
   --chess-primary: #20A85D;
   --chess-secondary: #12753F;
-  --ludo-primary: #EC7420;
-  --ludo-secondary: #B0510C;
+  --ludo-primary: #E06A16;
+  --ludo-secondary: #A84E0C;
   --domino-primary: #8C5CFA;
   --domino-secondary: #5F33C2;
   --backgammon-primary: #FF4458;

public/js/core/theme.js

 // Theme loads from Supabase via API (survives deploys).
 //
-// tokens.css holds the design (The Cafe Deck). Values stored from
+// tokens.css holds the design (Night Arcade). Values stored from
 // /admin/branding.php override it, but only for the keys listed in COLOR_KEYS
 // and LAYOUT_PX below: the retired palette's keys (bg_card, blue, purple...) are
 // ignored on purpose, so an old stored value can never repaint the app.

public/js/core/ui.js

-// Shared screen furniture for The Cafe Deck. Scenes build from these so every
+// Shared screen furniture for Night Arcade. Scenes build from these so every
 // header, empty table and loading state reads the same way.
 import * as scene from './scene.js';
 import * as audio from './audio.js';

public/js/modules/play/scenes/table.js

@@ -346,7 +346,7 @@ const STYLE = `
     border-radius: 22px;
     border: none;
     background: var(--btn-purple-2);
-    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 5px 0 var(--btn-purple-edge);
+    box-shadow: 0 5px 0 var(--btn-purple-edge);
     color: #fff;
     cursor: pointer;
     text-align: start;