feat: O6 Mah feminine Byte

dashboard/features/streamer/mah.svg.js

@@ -1,58 +1,46 @@
 // dashboard/features/streamer/mah.svg.js
-// O6 — Mah's avatar artwork. Pure, scalable SVG (sized by CSS), same viewBox
-// scale as Byte so the duo reads as a pair. HOMAGE to her signature motifs —
-// cow-print bucket hat (the "Mahmoojen = moo" pun), big round glasses, chibi
-// face with rosy cheeks — drawn fresh in our language. NOT a copy of her
-// commissioned emote (that art is the artist's IP).
+// O6 — Mah's avatar: a FEMININE counterpart to Byte, same mascot language (no
+// real-person traits). Same head/face/eyes so they read as siblings; feminine
+// touches: a little bow, eyelashes, blush, a heart antenna, and her coral/red
+// accent. Pure scalable SVG, same viewBox as Byte for the duo.
 
-// Mouth shape per state (mirrors Byte's vocabulary so the pair feels coherent).
+// Mouth shape per state (mirrors Byte's vocabulary).
 export const MOUTH_PATHS = Object.freeze({
-  unseen: "M20 38 h8",
-  idle: "M20 38 h8",
-  neutral: "M20 38 h8",
-  happy: "M20 37 Q24 41 28 37",
-  hype: "M19 36 Q24 43 29 36 Z",
-  sad: "M20 40 Q24 36 28 40",
-  talking: "M21 37 q3 4 6 0 q-3 2 -6 0 Z",
+  unseen: "M19 30 h10",
+  idle: "M19 30 h10",
+  neutral: "M19 30 h10",
+  happy: "M19 29 Q24 34 29 29",
+  hype: "M18 28 Q24 37 30 28 Z",
+  sad: "M19 32 Q24 27 29 32",
+  talking: "M20 29 q4 5 8 0 q-4 2 -8 0 Z",
 });
 
 export const MAH_SVG = `
-<svg class="mah-figure" viewBox="0 0 48 52" role="img" aria-label="Mah">
-  <!-- hair (frames the face) -->
-  <path class="mah-hair" d="M10 30 Q9 14 24 13 Q39 14 38 30 L38 40 Q38 47 31 47 L17 47 Q10 47 10 40 Z" fill="#2b2440" />
-  <!-- twin buns + red scrunchies (her red accent, from the cards) -->
-  <circle class="mah-bun" cx="11" cy="20" r="4.5" fill="#2b2440" />
-  <circle class="mah-bun" cx="37" cy="20" r="4.5" fill="#2b2440" />
-  <circle class="mah-tie" cx="13" cy="23.5" r="2.2" fill="#e23b5a" />
-  <circle class="mah-tie" cx="35" cy="23.5" r="2.2" fill="#e23b5a" />
-  <!-- face -->
-  <rect class="mah-face" x="13" y="20" width="22" height="24" rx="11" fill="#f1c9a4" />
-  <!-- cow-print bucket hat (signature) -->
-  <g class="mah-hat">
-    <path class="mah-hat-brim" d="M7 19 Q24 13 41 19 Q41 23 24 23 Q7 23 7 19 Z" fill="#ffffff" stroke="#1e1430" stroke-width="0.8" />
-    <path class="mah-hat-top" d="M11 19 Q11 7 24 7 Q37 7 37 19 Q24 16 11 19 Z" fill="#ffffff" stroke="#1e1430" stroke-width="0.8" />
-    <ellipse class="mah-spot" cx="18" cy="13" rx="2.6" ry="2" fill="#1e1430" />
-    <ellipse class="mah-spot" cx="30" cy="12" rx="2.1" ry="1.7" fill="#1e1430" />
-    <ellipse class="mah-spot" cx="26" cy="17" rx="1.5" ry="1.2" fill="#1e1430" />
-    <!-- tiny cow ears -->
-    <ellipse cx="10" cy="14" rx="2.4" ry="1.6" fill="#f1c9a4" transform="rotate(-25 10 14)" />
-    <ellipse cx="38" cy="14" rx="2.4" ry="1.6" fill="#f1c9a4" transform="rotate(25 38 14)" />
-    <!-- little red bow on the hat (her accent) -->
-    <path class="mah-bow" d="M24 19 l-3.5 -2.2 v4.4 Z M24 19 l3.5 -2.2 v4.4 Z" fill="#e23b5a" />
-    <circle cx="24" cy="19" r="1.1" fill="#b5283f" />
+<svg class="mah-figure" viewBox="0 0 48 50" role="img" aria-label="Mah">
+  <!-- antenna with a heart tip (feminine touch) -->
+  <line class="mah-antenna" x1="24" y1="10" x2="24" y2="5.5" stroke="#ff7aa8" stroke-width="2" stroke-linecap="round" />
+  <path class="mah-heart" d="M24 3.4 q1.6 -2 3 0 q1.2 1.7 -3 4 q-4.2 -2.3 -3 -4 q1.4 -2 3 0 Z" fill="#e23b5a" />
+  <!-- head -->
+  <rect class="mah-head" x="8" y="10" width="32" height="30" rx="9" fill="#ff7aa8" />
+  <rect class="mah-face" x="13" y="15" width="22" height="20" rx="6" fill="#1e1430" />
+  <!-- side bow (her signature accent) -->
+  <g class="mah-bow">
+    <path d="M9 16 l-4 -3 v6 Z M9 16 l4 -3 v6 Z" fill="#e23b5a" />
+    <circle cx="9" cy="16" r="1.3" fill="#b5283f" />
   </g>
-  <!-- rosy cheeks (revealed on happy/hype) -->
-  <circle class="mah-cheek left" cx="16.5" cy="35" r="2.3" fill="#ff8fb6" />
-  <circle class="mah-cheek right" cx="31.5" cy="35" r="2.3" fill="#ff8fb6" />
-  <!-- round glasses -->
-  <g class="mah-glasses" fill="#fbfcff" stroke="#1e1430" stroke-width="1.4">
-    <circle cx="18.5" cy="31" r="5.2" />
-    <circle cx="29.5" cy="31" r="5.2" />
-    <line x1="23.7" y1="31" x2="24.3" y2="31" />
+  <!-- blush cheeks (revealed on happy/hype) -->
+  <circle class="mah-cheek left" cx="16" cy="29" r="2.3" fill="#ff5d86" />
+  <circle class="mah-cheek right" cx="32" cy="29" r="2.3" fill="#ff5d86" />
+  <!-- eyelashes (feminine) -->
+  <g class="mah-lashes" stroke="#8be9fd" stroke-width="1" stroke-linecap="round">
+    <line x1="17" y1="20.6" x2="15.4" y2="19.6" />
+    <line x1="17.6" y1="20" x2="16.6" y2="18.6" />
+    <line x1="31" y1="20.6" x2="32.6" y2="19.6" />
+    <line x1="30.4" y1="20" x2="31.4" y2="18.6" />
   </g>
-  <!-- eyes (behind the lenses) -->
-  <circle class="mah-eye left" cx="18.5" cy="31" r="1.7" fill="#2b2440" />
-  <circle class="mah-eye right" cx="29.5" cy="31" r="1.7" fill="#2b2440" />
+  <!-- eyes (same as Byte — sibling resemblance) -->
+  <rect class="mah-eye left" x="17" y="21" width="3.6" height="6.2" rx="1.8" fill="#8be9fd" />
+  <rect class="mah-eye right" x="27.4" y="21" width="3.6" height="6.2" rx="1.8" fill="#8be9fd" />
   <!-- mouth -->
-  <path class="mah-mouth" d="${MOUTH_PATHS.idle}" stroke="#b5546e" stroke-width="2" fill="#b5546e" fill-opacity="0" stroke-linecap="round" stroke-linejoin="round" />
+  <path class="mah-mouth" d="${MOUTH_PATHS.idle}" stroke="#ff9ab4" stroke-width="2" fill="#ff9ab4" fill-opacity="0" stroke-linecap="round" stroke-linejoin="round" />
 </svg>`;

dashboard/styles/mascot.css

@@ -312,7 +312,7 @@
 .mah-avatar {
   --mah-size: 44px;
   width: var(--mah-size);
-  height: calc(var(--mah-size) * 52 / 48);
+  height: calc(var(--mah-size) * 50 / 48);
   flex: 0 0 auto;
   display: inline-block;
   line-height: 0;

dashboard/tests/mah_render.test.js

@@ -48,15 +48,18 @@ test("Prove that the context/size class survives re-render", () => {
 });
 
 test("Prove the SVG carries her signature motifs (homage, not copy)", () => {
+  // Feminine counterpart to Byte: same mascot hooks + feminine touches.
   for (const hook of [
     "mah-figure",
-    "mah-hat", // cow-print bucket hat (the moo pun)
-    "mah-spot", // cow spots
-    "mah-glasses", // round glasses
-    "mah-eye",
+    "mah-head",
+    "mah-face",
+    "mah-eye", // same eyes as Byte (sibling)
+    "mah-lashes", // feminine
+    "mah-bow", // feminine signature
+    "mah-heart", // heart antenna tip
     "mah-cheek",
     "mah-mouth",
-    'viewBox="0 0 48 52"',
+    'viewBox="0 0 48 50"', // same scale as Byte for the duo
   ]) {
     assert.ok(MAH_SVG.includes(hook), `SVG must expose ${hook}`);
   }