docs/card-cosmetics-playground.html

@@ -697,9 +697,9 @@ function update() {
   const evoBadges = {
     none: { display: 'none' },
     t1: { display: 'flex', text: '🌱', bg: '#1a6b1a', color: '#90ee90', shadow: 'none' },
-    t2: { display: 'flex', text: '⭐', bg: '#8b6914', color: '#ffd700', shadow: 'none' },
-    t3: { display: 'flex', text: '💎', bg: '#4a1a6b', color: '#c084fc', shadow: '0 0 10px #c084fc66' },
-    t4: { display: 'flex', text: '👑', bg: '#0a5a5a', color: '#2dd4bf', shadow: '0 0 14px #2dd4bf88' },
+    t2: { display: 'flex', text: '⭐', bg: '#2070b0', color: '#50a0e8', shadow: 'none' },
+    t3: { display: 'flex', text: '💎', bg: '#a82020', color: '#e85050', shadow: '0 0 10px #e8505066' },
+    t4: { display: 'flex', text: '👑', bg: '#6b2d8e', color: '#a060d0', shadow: '0 0 14px #a060d088' },
   };
   const eb = evoBadges[s.evoBadge];
   badge.style.display = eb.display;
@@ -771,7 +771,7 @@ function updatePrompt(s) {
     headerBg: { dark: 'Dark Mode header (#1a1a2e)', gold: 'Metallic Gold header gradient', team: 'Team-colored header' },
     colBg: { dark: 'Dark Mode columns (#1a1a2e / #2d1b1b, light text)', midnight: 'Midnight columns (#0d1b2a / #1b0d0d, light text)', cream: 'Cream columns (#FFF8DC / #FFE4C4)', team: 'Team-themed columns (team color at 20%/30% opacity)' },
     gradBars: { gold: 'Gold gradient bars', dark: 'Dark charcoal gradient bars', match: 'Gradient bars matching column backgrounds' },
-    evoBadge: { t1: 'T1 Initiate badge (🌱 green)', t2: 'T2 Rising badge (⭐ gold)', t3: 'T3 Ascendant badge (💎 purple, glow)', t4: 'T4 Evolved badge (👑 teal, strong glow)' },
+    evoBadge: { t1: 'T1 Initiate badge (🌱 green)', t2: 'T2 Rising badge (⭐ blue)', t3: 'T3 Ascendant badge (💎 red, glow)', t4: 'T4 Evolved badge (👑 purple, strong glow)' },
     rarityGlow: { subtle: 'Subtle rarity pulse glow', strong: 'Strong rarity pulse glow' },
   };
 

docs/refractor-visual-spec.md

@@ -93,15 +93,19 @@ background: linear-gradient(135deg,
   0%   { box-shadow:
     0 0 0 1.5px rgba(0,0,0,0.7),
     0 2px 5px rgba(0,0,0,0.5),
-    0 0 5px 1px var(--diamond-glow-color);
+    0 0 8px 2px var(--diamond-glow-color);
   }
   50%  { box-shadow:
     0 0 0 1.5px rgba(0,0,0,0.5),
     0 2px 4px rgba(0,0,0,0.3),
-    0 0 8px 3px var(--diamond-glow-color),
-    0 0 14px 5px color-mix(in srgb, var(--diamond-glow-color) 25%, transparent);
+    0 0 14px 5px var(--diamond-glow-color),
+    0 0 24px 8px var(--diamond-glow-color);
+  }
+  100% { box-shadow:
+    0 0 0 1.5px rgba(0,0,0,0.7),
+    0 2px 5px rgba(0,0,0,0.5),
+    0 0 8px 2px var(--diamond-glow-color);
   }
-  100% { /* same as 0% */ }
 }
 
 .tier-diamond.diamond-glow {
@@ -109,7 +113,7 @@ background: linear-gradient(135deg,
 }
 ```
 
-Metallic effect **automatically** enables the glow pulse (no separate toggle needed in production).
+Metallic sheen and glow pulse are **independent** effects. In production, apply metallic sheen to filled diamonds across all tiers. Apply glow pulse selectively by tier (T4 always gets it; T1–T3 do not in the approved configuration).
 
 ---
 
@@ -218,7 +222,7 @@ L-shaped corner brackets on all four card corners.
 
 1. **Diamond indicator CSS** (`.tier-diamond`, `.diamond-quad`, keyframes) → add to card template stylesheet
 2. **Diamond HTML generation** → add to Playwright card renderer (4 divs in a grid)
-3. **Metallic + glow effect** → always apply metallic class + glow animation to filled diamonds
+3. **Metallic effect** → always apply metallic class to filled diamonds; apply glow animation (`diamond-glow` class) for T4 only
 4. **T3 shimmer** → APNG capture with `--anim-progress` variable (8 frames)
 5. **T4 layered effects** → APNG capture with `--anim-progress` driving all 4 layers
 6. **Diamond colors** → store in tier config or derive from tier level
@@ -228,7 +232,7 @@ L-shaped corner brackets on all four card corners.
 
 - The mockup control panel UI (sliders, dropdowns, color pickers)
 - The `diamondEffect` dropdown with 5 options (we chose metallic — hardcode it)
-- The separate `diamondGlow` toggle (metallic always includes glow)
+- The separate `diamondGlow` toggle (hardcode glow ON for T4, OFF for T1–T3)
 - Border preset / header type controls (these are already in production tier configs)
 - T4b full-card rainbow (unless explicitly promoted later)