composer applets: --duoUser felt + masked h2 (matching My Sky / My Sea / My Sign)

The New Game and New Post composer applets (#id_applet_new_game / #id_applet_new_post) now take the same treatment as the My Sky / My Sea / My Sign applets: a --duoUser green-felt content bg with the rotated >h2 title bar masked back to the default dark.

The h2 mask is an opaque --priUser base under the same two 0,0,0/0.125 overlays the %applet-box + its >h2 give every normal applet — so the title bars read identically dark instead of green-tinted, and it stays palette-correct on *-light palettes (no flat 0,0,0). The same mask was applied to the three #id_applet_my_* shells, whose h2 had been left as pure --priUser (lighter than the other applets).

Composer line-inputs (#id_new_game_name / #id_new_post_text / #id_post_line_text) keep a --priUser fill + faint --secUser placeholder + 700 weight + --terUser focus, standing out against the felt like My Sky's form fields.

Bundled: palette felt retunes (rootvars --terFor / --terPer).

[[project-room-scroll-of-events]]

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/static_src/scss/_applets.scss

@@ -99,22 +99,41 @@
 #id_bud_menu               { @extend %applet-menu; }
 
 // New Game / New Post / Bill Post composer line-inputs — mirror the My Sky
-// form-col inputs (`_sky.scss` .sky-form-col input): bolder text, a duoUser
+// form-col inputs (`_sky.scss` .sky-form-col input): bolder text, a --priUser
-// fill, a terUser focus shift + a priUser placeholder. The secUser text and
+// fill that stands out against the applet's --duoUser felt, a --terUser focus
-// terUser border/glow on focus already come from `.form-control`.
+// shift + a faint --secUser placeholder. The --terUser border/glow on focus
-// room.html's #id_room_post_text joins this list when it lands.
+// comes from `.form-control`. room.html's #id_room_post_text joins this list
+// when it lands.
 #id_new_game_name,
 #id_new_post_text,
 #id_post_line_text {
     font-weight: 700;
-    background-color: rgba(var(--duoUser), 1);
+    background-color: rgba(var(--priUser), 1);
 
     &:focus {
         color: rgba(var(--terUser), 1);
     }
 
     &::placeholder {
-        color: rgba(var(--priUser), 1);
+        color: rgba(var(--secUser), 0.7);
+    }
+}
+
+// New Game / New Post composer applets take the My Sky / My Sea / My Sign
+// treatment: a --duoUser green-felt content bg with the rotated >h2 title
+// masked back to the default dark — opaque --priUser under the same two
+// 0,0,0/0.125 overlays %applet-box + its >h2 give a normal applet (see the
+// _sky / _gameboard / _billboard #id_applet_my_* shells). The line-inputs
+// above keep their --priUser fill, standing out against the felt like My Sky's.
+#id_applet_new_game,
+#id_applet_new_post {
+    background-color: rgba(var(--duoUser), 1) !important;
+
+    > h2 {
+        background:
+            linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)),
+            linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)),
+            rgba(var(--priUser), 1);
     }
 }
 

src/static_src/scss/_billboard.scss

@@ -511,7 +511,15 @@ body.page-billposts {
 
     h2 {
         flex-shrink: 0;
-        background-color: rgba(var(--priUser), 1);
+        // Mask the --duoUser aperture behind the rotated title: an opaque
+        // --priUser base (the default applet content bg) under the same two
+        // 0,0,0/0.125 overlays %applet-box + its >h2 give every other applet,
+        // so the bar reads identically dark instead of green-tinted. Layered
+        // (not a flat 0,0,0) so it stays palette-correct on *-light palettes.
+        background:
+            linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)),
+            linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)),
+            rgba(var(--priUser), 1);
         box-shadow: rgba(0, 0, 0, 1) !important;
     }
 

src/static_src/scss/_gameboard.scss

@@ -903,7 +903,15 @@ body.page-gameboard {
 
     h2 {
         flex-shrink: 0;
-        background-color: rgba(var(--priUser), 1);
+        // Mask the --duoUser aperture behind the rotated title: an opaque
+        // --priUser base (the default applet content bg) under the same two
+        // 0,0,0/0.125 overlays %applet-box + its >h2 give every other applet,
+        // so the bar reads identically dark instead of green-tinted. Layered
+        // (not a flat 0,0,0) so it stays palette-correct on *-light palettes.
+        background:
+            linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)),
+            linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)),
+            rgba(var(--priUser), 1);
         box-shadow: rgba(0, 0, 0, 1) !important;
     }
 

src/static_src/scss/_sky.scss

@@ -932,7 +932,15 @@ body[class*="-light"] #id_sky_tooltip_2 {
 
     h2 {
         flex-shrink: 0;
-        background-color: rgba(var(--priUser), 1);
+        // Mask the --duoUser aperture behind the rotated title: an opaque
+        // --priUser base (the default applet content bg) under the same two
+        // 0,0,0/0.125 overlays %applet-box + its >h2 give every other applet,
+        // so the bar reads identically dark instead of green-tinted. Layered
+        // (not a flat 0,0,0) so it stays palette-correct on *-light palettes.
+        background:
+            linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)),
+            linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)),
+            rgba(var(--priUser), 1);
         box-shadow: rgba(0, 0, 0, 1) !important;
     }
 

src/static_src/scss/rootvars.scss

@@ -231,7 +231,7 @@
     // forest
     --priFor: 124, 156, 89;
     --secFor: 94, 124, 61;
-    --terFor: 69, 102, 43;
+    --terFor: 69, 99, 36;
 
     /* Technoman Hue */
     // carbon steel
@@ -401,7 +401,7 @@
 .palette-inferno {
     --priUser: var(--terSwp);
     --secUser: var(--priSwp);
-    --terUser: var(--secBld);
+    --terUser: var(--priBld);
     --quaUser: var(--priIce);
     --quiUser: var(--quaIce);
     --sixUser: var(--priTrs);