Feature set 172.

src/MoogleAPI.Web/wwwroot/assets/frames/README.md

@@ -32,6 +32,17 @@ not from cutting.
 drawn once per relief layer. Beads are `<circle>` elements now and relief is two layers: 29 KB,
 no visible difference.
 
+## Tone
+
+Pitched deliberately below the silhouette's own contrast. The first version was a bright gilt and
+read as a lamp on a dark page — the frame was the first thing the eye went to, ahead of the puzzle
+it surrounds.
+
+The lit layer is filled with a `linearGradient` rather than being split into a second and third
+copy of every polygon. That buys the same tonal range across the carving for a couple of hundred
+bytes instead of another twenty-five kilobytes of points, and it is what gives the frame a
+lit-from-the-top-left reading.
+
 ## Bump the ?v= stamp when you change it
 
 This file is served with a thirty-day `max-age`, so replacing it at a stable name leaves everyone

src/MoogleAPI.Web/wwwroot/kupodle/index.html

@@ -102,7 +102,12 @@
      * way, which is half the puzzle. So each pool character has a second image, black on a pale
      * field with nothing behind it, served by the byte from /characters/daily/silhouette.
      */
-    /* Bronze rather than the page's green, and gilt rather than flat.
+    /* Dark antiqued bronze rather than the page's green, and gilt rather than flat.
+     *
+     * It was brighter to begin with and read as a lamp on a dark page — the frame was the first
+     * thing the eye went to, ahead of the puzzle it surrounds. Everything is now pitched below the
+     * silhouette's own contrast: the flat is darker, the reeding leans on its shadow rather than
+     * its highlight, and the bevel's lit edges are roughly half what they were.
      *
      * The wall behind this page is a photograph of framed portraits and those frames are warm, so
      * a green frame was the one thing on screen pretending not to be part of the picture. Warm
@@ -131,15 +136,15 @@
       border-radius: 4px;
       background:
         repeating-linear-gradient(58deg,
-          rgba(255, 226, 176, 0.15) 0 1px,
-          rgba(0, 0, 0, 0.13) 1px 3px),
+          rgba(255, 226, 176, 0.10) 0 1px,
+          rgba(0, 0, 0, 0.20) 1px 3px),
         linear-gradient(145deg,
-          #e6c184 0%, #b3813f 26%, #7c5527 52%, #a8763a 74%, #4d3317 100%);
+          #a8854a 0%, #705026 26%, #463116 52%, #624620 74%, #261a0b 100%);
       box-shadow:
-        0 7px 18px rgba(0, 0, 0, 0.55),
-        inset 0 0 0 1px rgba(255, 228, 178, 0.42),
-        inset 0 3px 4px rgba(255, 226, 176, 0.22),
-        inset 0 -3px 5px rgba(0, 0, 0, 0.45);
+        0 8px 20px rgba(0, 0, 0, 0.62),
+        inset 0 0 0 1px rgba(255, 228, 178, 0.26),
+        inset 0 3px 4px rgba(255, 226, 176, 0.13),
+        inset 0 -3px 6px rgba(0, 0, 0, 0.58);
     }
 
     /* The rebate — the step down from the moulding to the glass. One dark line with one light one
@@ -152,8 +157,8 @@
       border-radius: 2px;
       pointer-events: none;
       box-shadow:
-        0 0 0 1px rgba(46, 30, 14, 0.9),
-        inset 0 0 0 1px rgba(255, 224, 170, 0.26);
+        0 0 0 1px rgba(22, 14, 5, 0.95),
+        inset 0 0 0 1px rgba(255, 224, 170, 0.16);
     }
 
     /* The carving: a baroque gilt surround, replicating a reference frame.
@@ -180,7 +185,7 @@
       position: absolute;
       inset: -14px;
       pointer-events: none;
-      background: url('/assets/frames/kupodle-frame.svg?v=20260811b') center / 100% 100% no-repeat;
+      background: url('/assets/frames/kupodle-frame.svg?v=20260811c') center / 100% 100% no-repeat;
     }
 
     .answer-frame-inner {