// Waist-up "cast headshots" — anthropomorphic, in costume, for the cast grid.
// Each fills a 200×220 viewBox so they read as proper portraits at tile size.
// They share the claymation palette + eye/face system with the full-bodies.

// Helper for consistent eyes
const Eyes = ({ lx, ly, rx, ry, size = 11, tone = 'dark' }) => {
  const pupil = tone === 'dark' ? '#1A0A00' : '#0A0F2E';
  return (
    <g>
      <ellipse cx={lx} cy={ly} rx={size*1.1} ry={size*1.2} fill="#fff" />
      <ellipse cx={rx} cy={ry} rx={size*1.1} ry={size*1.2} fill="#fff" />
      <circle cx={lx+1} cy={ly+2} r={size*0.7} fill={pupil} />
      <circle cx={rx+1} cy={ry+2} r={size*0.7} fill={pupil} />
      <circle cx={lx+3} cy={ly-1} r="2" fill="#fff" />
      <circle cx={rx+3} cy={ry-1} r="2" fill="#fff" />
    </g>
  );
};

const HS_VIEW = "0 0 200 220";

// Dog — news anchor, waist up
const HDog = ({ size = 120 }) => (
  <svg viewBox={HS_VIEW} width={size} height={size * 220/200}>
    <defs>
      <radialGradient id="hdFur" cx="0.4" cy="0.3" r="0.8">
        <stop offset="0" stopColor="#FFDE95" /><stop offset="0.55" stopColor="#E8A94A" /><stop offset="1" stopColor="#7A4A10" />
      </radialGradient>
      <radialGradient id="hdSnout" cx="0.5" cy="0.3" r="0.8"><stop offset="0" stopColor="#FFEBC2" /><stop offset="1" stopColor="#B8722A" /></radialGradient>
      <linearGradient id="hdSuit" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#2A3A7A" /><stop offset="1" stopColor="#0F1C4A" /></linearGradient>
    </defs>
    {/* suit torso */}
    <path d="M 40 180 Q 30 220 60 220 L 140 220 Q 170 220 160 180 L 140 160 L 60 160 Z" fill="url(#hdSuit)" />
    <path d="M 70 160 L 100 190 L 100 220 L 78 214 Z" fill="#0B1638" />
    <path d="M 130 160 L 100 190 L 100 220 L 122 214 Z" fill="#0B1638" />
    <path d="M 88 158 L 112 158 L 100 188 Z" fill="#fff" />
    <path d="M 94 160 L 106 160 L 108 174 L 100 200 L 92 174 Z" fill="#D22030" />
    {/* ears back */}
    <ellipse cx="48" cy="90" rx="20" ry="42" fill="#7A4A1A" transform="rotate(-10 48 90)" />
    <ellipse cx="152" cy="90" rx="20" ry="42" fill="#7A4A1A" transform="rotate(10 152 90)" />
    {/* head */}
    <ellipse cx="100" cy="100" rx="68" ry="66" fill="url(#hdFur)" />
    <ellipse cx="44" cy="88" rx="18" ry="40" fill="#A87030" transform="rotate(-12 44 88)" />
    <ellipse cx="156" cy="88" rx="18" ry="40" fill="#A87030" transform="rotate(12 156 88)" />
    <ellipse cx="72" cy="88" rx="22" ry="30" fill="#FFE6A8" opacity="0.5" />
    {/* snout */}
    <ellipse cx="100" cy="130" rx="36" ry="28" fill="url(#hdSnout)" />
    <ellipse cx="90" cy="122" rx="14" ry="8" fill="#FFF5D8" opacity="0.6" />
    <ellipse cx="100" cy="114" rx="10" ry="6" fill="#1A0A00" />
    <path d="M 100 122 L 100 134" stroke="#1A0A00" strokeWidth="2.5" />
    <path d="M 88 138 Q 100 148 112 138 Q 106 146 100 146 Q 94 146 88 138 Z" fill="#3A0606" />
    <Eyes lx={76} ly={94} rx={124} ry={94} size={10} />
    <path d="M 64 74 Q 76 70 88 74" stroke="#5A3010" strokeWidth="3" fill="none" strokeLinecap="round" />
    <path d="M 112 74 Q 124 70 136 74" stroke="#5A3010" strokeWidth="3" fill="none" strokeLinecap="round" />
  </svg>
);

// Cat — noir detective in trench coat
const HCat = ({ size = 120 }) => (
  <svg viewBox={HS_VIEW} width={size} height={size * 220/200}>
    <defs>
      <radialGradient id="hcFur" cx="0.4" cy="0.3" r="0.8"><stop offset="0" stopColor="#FFD098" /><stop offset="0.5" stopColor="#FF8830" /><stop offset="1" stopColor="#A04010" /></radialGradient>
      <linearGradient id="hcCoat" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#C8975A" /><stop offset="1" stopColor="#6A4820" /></linearGradient>
    </defs>
    {/* trench coat */}
    <path d="M 32 180 Q 22 220 60 220 L 140 220 Q 178 220 168 180 L 146 156 L 54 156 Z" fill="url(#hcCoat)" />
    <path d="M 70 158 L 100 180 L 100 220 L 74 216 Z" fill="#8A6228" />
    <path d="M 130 158 L 100 180 L 100 220 L 126 216 Z" fill="#8A6228" />
    <circle cx="84" cy="190" r="2.5" fill="#3A2A10" />
    <circle cx="116" cy="190" r="2.5" fill="#3A2A10" />
    {/* ears */}
    <path d="M 40 64 L 50 22 L 70 58 Z" fill="#C85810" />
    <path d="M 160 64 L 150 22 L 130 58 Z" fill="#C85810" />
    <path d="M 48 52 L 54 32 L 62 52 Z" fill="#FFB266" />
    <path d="M 152 52 L 146 32 L 138 52 Z" fill="#FFB266" />
    {/* head */}
    <ellipse cx="100" cy="102" rx="66" ry="62" fill="url(#hcFur)" />
    <path d="M 40 84 Q 50 78 60 82" fill="none" stroke="#8B4010" strokeWidth="2.5" strokeLinecap="round" />
    <path d="M 160 84 Q 150 78 140 82" fill="none" stroke="#8B4010" strokeWidth="2.5" strokeLinecap="round" />
    {/* fedora */}
    <ellipse cx="100" cy="52" rx="78" ry="10" fill="#2A1810" />
    <path d="M 60 52 Q 58 20 100 18 Q 142 20 140 52 Z" fill="#3A2818" />
    <rect x="60" y="46" width="80" height="6" fill="#1A0A08" />
    {/* eyes — narrow, cat-like */}
    <ellipse cx="74" cy="98" rx="10" ry="12" fill="#fff" />
    <ellipse cx="126" cy="98" rx="10" ry="12" fill="#fff" />
    <ellipse cx="74" cy="98" rx="3" ry="10" fill="#1A0A00" />
    <ellipse cx="126" cy="98" rx="3" ry="10" fill="#1A0A00" />
    <circle cx="76" cy="94" r="1.5" fill="#fff" />
    <circle cx="128" cy="94" r="1.5" fill="#fff" />
    {/* mouth */}
    <path d="M 90 124 L 110 124 L 100 132 Z" fill="#FF5E7A" />
    <path d="M 100 132 L 100 136" stroke="#1A0A00" strokeWidth="2" />
    <path d="M 100 136 Q 92 142 86 138" fill="none" stroke="#1A0A00" strokeWidth="2" strokeLinecap="round" />
    <path d="M 100 136 Q 108 142 114 138" fill="none" stroke="#1A0A00" strokeWidth="2" strokeLinecap="round" />
  </svg>
);

// Robot — standup, waist-up in leather
const HRobot = ({ size = 120 }) => (
  <svg viewBox={HS_VIEW} width={size} height={size * 220/200}>
    <defs>
      <linearGradient id="hrBody" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#F5F7FC" /><stop offset="1" stopColor="#8A98B8" /></linearGradient>
      <radialGradient id="hrScreen" cx="0.4" cy="0.35" r="0.8"><stop offset="0" stopColor="#1B2B5C" /><stop offset="1" stopColor="#05091F" /></radialGradient>
      <linearGradient id="hrLeather" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#3A2818" /><stop offset="1" stopColor="#1A0E06" /></linearGradient>
    </defs>
    {/* leather jacket torso */}
    <path d="M 40 168 Q 28 220 60 220 L 140 220 Q 172 220 160 168 L 146 152 L 54 152 Z" fill="url(#hrLeather)" />
    <line x1="100" y1="160" x2="100" y2="220" stroke="#8A6838" strokeWidth="2" strokeDasharray="3 2" />
    <path d="M 70 152 L 100 174 L 130 152 L 140 164 L 100 190 L 60 164 Z" fill="#2A1A08" />
    {/* antenna */}
    <line x1="100" y1="22" x2="100" y2="8" stroke="#39456A" strokeWidth="3" strokeLinecap="round" />
    <circle cx="100" cy="6" r="5" fill="#FF5E8A" />
    {/* head */}
    <rect x="30" y="28" width="140" height="124" rx="24" fill="url(#hrBody)" stroke="#39456A" strokeWidth="2" />
    <rect x="44" y="46" width="112" height="78" rx="14" fill="url(#hrScreen)" />
    {/* eyes laughing */}
    <path d="M 62 82 Q 72 66 82 82" stroke="#6BE4B5" strokeWidth="4" fill="none" strokeLinecap="round" />
    <path d="M 118 82 Q 128 66 138 82" stroke="#6BE4B5" strokeWidth="4" fill="none" strokeLinecap="round" />
    <path d="M 64 98 Q 100 122 136 98 L 136 102 Q 100 124 64 102 Z" fill="#6BE4B5" />
    {/* speaker grill */}
    <rect x="56" y="130" width="88" height="12" rx="3" fill="#39456A" />
    {[...Array(7)].map((_, i) => <rect key={i} x={62+i*11} y="133" width="5" height="6" fill="#6A7894" />)}
    <circle cx="38" cy="88" r="4" fill="#39456A" />
    <circle cx="162" cy="88" r="4" fill="#39456A" />
  </svg>
);

// Tomato — chef, waist-up
const HTomato = ({ size = 120 }) => (
  <svg viewBox={HS_VIEW} width={size} height={size * 220/200}>
    <defs>
      <radialGradient id="htBody" cx="0.4" cy="0.3" r="0.9"><stop offset="0" stopColor="#FF8A6A" /><stop offset="0.5" stopColor="#E83C28" /><stop offset="1" stopColor="#7A1010" /></radialGradient>
      <linearGradient id="htCoat" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#fff" /><stop offset="1" stopColor="#D8E0EC" /></linearGradient>
    </defs>
    {/* chef coat shoulders */}
    <path d="M 32 180 Q 22 220 60 220 L 140 220 Q 178 220 168 180 L 150 162 L 50 162 Z" fill="url(#htCoat)" />
    <circle cx="88" cy="186" r="2.5" fill="#D4D9E3" stroke="#8A92A8" strokeWidth="0.6" />
    <circle cx="88" cy="204" r="2.5" fill="#D4D9E3" stroke="#8A92A8" strokeWidth="0.6" />
    <circle cx="112" cy="186" r="2.5" fill="#D4D9E3" stroke="#8A92A8" strokeWidth="0.6" />
    <circle cx="112" cy="204" r="2.5" fill="#D4D9E3" stroke="#8A92A8" strokeWidth="0.6" />
    {/* tomato head */}
    <circle cx="100" cy="112" r="66" fill="url(#htBody)" />
    <ellipse cx="76" cy="88" rx="18" ry="28" fill="#FFB8A0" opacity="0.45" />
    {/* leaves */}
    <path d="M 100 58 Q 78 52 64 62 Q 68 74 84 76 Q 76 86 84 94 Q 98 94 100 78 Z" fill="#4E8830" />
    <path d="M 100 58 Q 122 52 136 62 Q 132 74 116 76 Q 124 86 116 94 Q 102 94 100 78 Z" fill="#4E8830" />
    {/* chef hat */}
    <ellipse cx="100" cy="46" rx="40" ry="8" fill="#fff" stroke="#C8D0DE" strokeWidth="1" />
    <path d="M 64 46 Q 56 12 84 8 Q 94 0 104 4 Q 120 -2 132 10 Q 154 12 148 32 Q 158 40 144 46 Z" fill="url(#htCoat)" stroke="#C8D0DE" strokeWidth="1" />
    <circle cx="82" cy="20" r="8" fill="#fff" />
    <circle cx="108" cy="14" r="10" fill="#fff" />
    <circle cx="130" cy="24" r="9" fill="#fff" />
    <rect x="60" y="42" width="80" height="5" fill="#2A1A10" />
    {/* face */}
    <Eyes lx={78} ly={108} rx={122} ry={108} size={10} />
    <path d="M 64 90 Q 78 84 90 88" stroke="#5A0606" strokeWidth="3" fill="none" strokeLinecap="round" />
    <path d="M 110 88 Q 122 84 136 90" stroke="#5A0606" strokeWidth="3" fill="none" strokeLinecap="round" />
    <path d="M 74 134 Q 100 154 126 134 Q 114 150 100 150 Q 86 150 74 134 Z" fill="#2A0406" />
    <path d="M 88 144 Q 100 152 112 144 L 112 146 Q 100 152 88 146 Z" fill="#D84060" />
    <circle cx="50" cy="128" r="8" fill="#FF7A8A" opacity="0.45" />
    <circle cx="150" cy="128" r="8" fill="#FF7A8A" opacity="0.45" />
  </svg>
);

// Astronaut — space jumpsuit
const HAstro = ({ size = 120 }) => (
  <svg viewBox={HS_VIEW} width={size} height={size * 220/200}>
    <defs>
      <radialGradient id="haHelm" cx="0.35" cy="0.3" r="0.8"><stop offset="0" stopColor="#fff" /><stop offset="1" stopColor="#8A98B8" /></radialGradient>
      <radialGradient id="haVis" cx="0.4" cy="0.4" r="0.8"><stop offset="0" stopColor="#4A78F0" /><stop offset="0.7" stopColor="#1E40FF" /><stop offset="1" stopColor="#0A1F8A" /></radialGradient>
      <linearGradient id="haSuit" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#fff" /><stop offset="1" stopColor="#D0D6E4" /></linearGradient>
    </defs>
    {/* suit torso */}
    <path d="M 32 180 Q 22 220 60 220 L 140 220 Q 178 220 168 180 L 156 158 L 44 158 Z" fill="url(#haSuit)" />
    {/* mission patch */}
    <circle cx="100" cy="190" r="12" fill="#E74C3C" stroke="#8B1A12" strokeWidth="1.5" />
    <text x="100" y="193" textAnchor="middle" fontFamily="Figtree" fontWeight="900" fontSize="9" fill="#fff">E</text>
    <rect x="70" y="170" width="10" height="14" rx="2" fill="#FFD60A" />
    <rect x="120" y="170" width="10" height="14" rx="2" fill="#6BE4B5" />
    {/* helmet */}
    <circle cx="100" cy="92" r="76" fill="url(#haHelm)" />
    <path d="M 28 92 A 72 72 0 0 1 172 92 L 166 124 A 66 66 0 0 1 34 124 Z" fill="url(#haVis)" />
    <ellipse cx="70" cy="70" rx="18" ry="28" fill="#fff" opacity="0.5" />
    {/* face behind visor */}
    <circle cx="84" cy="104" r="4" fill="#6BE4B5" opacity="0.8" />
    <circle cx="116" cy="104" r="4" fill="#6BE4B5" opacity="0.8" />
    <path d="M 86 118 Q 100 126 114 118" stroke="#6BE4B5" strokeWidth="2.5" fill="none" strokeLinecap="round" opacity="0.8" />
    {/* helmet collar */}
    <rect x="44" y="152" width="112" height="12" rx="4" fill="#39456A" />
    {/* antenna */}
    <line x1="40" y1="44" x2="28" y2="28" stroke="#39456A" strokeWidth="3" strokeLinecap="round" />
    <circle cx="28" cy="28" r="5" fill="#FFD60A" />
  </svg>
);

// Ghost — wearing a newsboy cap
const HGhost = ({ size = 120 }) => (
  <svg viewBox={HS_VIEW} width={size} height={size * 220/200}>
    <defs>
      <radialGradient id="hgBody" cx="0.35" cy="0.3" r="0.8"><stop offset="0" stopColor="#fff" /><stop offset="0.5" stopColor="#D8D0FF" /><stop offset="1" stopColor="#7A6CC8" /></radialGradient>
    </defs>
    {/* body */}
    <path d="M 36 90 Q 36 36 100 36 Q 164 36 164 90 L 164 220 L 144 208 L 128 220 L 112 208 L 100 220 L 88 208 L 72 220 L 56 208 L 36 220 Z" fill="url(#hgBody)" />
    {/* bowtie */}
    <path d="M 80 150 L 100 140 L 80 130 Z" fill="#E74C3C" />
    <path d="M 120 150 L 100 140 L 120 130 Z" fill="#E74C3C" />
    <circle cx="100" cy="140" r="5" fill="#991620" />
    {/* newsboy cap */}
    <path d="M 48 54 Q 44 28 100 24 Q 156 28 152 54 L 152 62 Q 100 76 48 62 Z" fill="#3A2818" />
    <circle cx="100" cy="40" r="4" fill="#1A0A08" />
    <rect x="48" y="58" width="104" height="8" rx="2" fill="#2A1810" />
    <rect x="64" y="66" width="72" height="6" rx="1" fill="#3A2818" />
    {/* face */}
    <ellipse cx="60" cy="78" rx="16" ry="22" fill="#fff" opacity="0.5" />
    <ellipse cx="76" cy="102" rx="10" ry="14" fill="#1A0A2A" />
    <ellipse cx="124" cy="102" rx="10" ry="14" fill="#1A0A2A" />
    <circle cx="78" cy="98" r="3" fill="#fff" />
    <circle cx="126" cy="98" r="3" fill="#fff" />
    <circle cx="60" cy="126" r="7" fill="#FF5E8A" opacity="0.45" />
    <circle cx="140" cy="126" r="7" fill="#FF5E8A" opacity="0.45" />
    <ellipse cx="100" cy="128" rx="8" ry="12" fill="#1A0A2A" />
  </svg>
);

// Dino — in a dino track suit
const HDino = ({ size = 120 }) => (
  <svg viewBox={HS_VIEW} width={size} height={size * 220/200}>
    <defs>
      <radialGradient id="hdiBody" cx="0.4" cy="0.3" r="0.8"><stop offset="0" stopColor="#A8F2D0" /><stop offset="0.5" stopColor="#3FB888" /><stop offset="1" stopColor="#0A5A3E" /></radialGradient>
    </defs>
    {/* track jacket */}
    <path d="M 32 180 Q 22 220 60 220 L 140 220 Q 178 220 168 180 L 150 162 L 50 162 Z" fill="#FFD60A" />
    <rect x="46" y="170" width="4" height="50" fill="#0B1B4A" />
    <rect x="150" y="170" width="4" height="50" fill="#0B1B4A" />
    <line x1="100" y1="162" x2="100" y2="220" stroke="#0B1B4A" strokeWidth="2" strokeDasharray="3 2" />
    {/* head */}
    <path d="M 38 96 Q 38 54 100 54 Q 162 54 162 96 L 162 156 L 38 156 Z" fill="url(#hdiBody)" />
    {/* snout forward */}
    <ellipse cx="120" cy="110" rx="48" ry="28" fill="url(#hdiBody)" />
    <ellipse cx="150" cy="108" rx="3" ry="2" fill="#1A0A00" />
    <ellipse cx="150" cy="116" rx="3" ry="2" fill="#1A0A00" />
    <path d="M 130 124 Q 150 128 162 120" stroke="#1A0A00" strokeWidth="2.5" fill="none" strokeLinecap="round" />
    <path d="M 130 126 L 132 130 L 134 126 L 136 130 L 138 126" stroke="#fff" strokeWidth="1.5" fill="none" />
    {/* spikes */}
    <path d="M 60 56 L 70 38 L 78 56 L 90 36 L 98 56 L 112 36 L 120 56 L 132 38 L 140 56" fill="#2A8A5C" strokeLinejoin="round" />
    {/* eye */}
    <ellipse cx="98" cy="86" rx="12" ry="14" fill="#fff" />
    <circle cx="100" cy="88" r="7" fill="#1A0A00" />
    <circle cx="102" cy="85" r="2" fill="#fff" />
  </svg>
);

// Fox — in a scarf
const HFox = ({ size = 120 }) => (
  <svg viewBox={HS_VIEW} width={size} height={size * 220/200}>
    <defs>
      <radialGradient id="hfBody" cx="0.4" cy="0.3" r="0.8"><stop offset="0" stopColor="#FFB268" /><stop offset="0.5" stopColor="#E8661A" /><stop offset="1" stopColor="#8B2A06" /></radialGradient>
    </defs>
    <path d="M 32 180 Q 22 220 60 220 L 140 220 Q 178 220 168 180 L 150 162 L 50 162 Z" fill="#3A4E8A" />
    {/* scarf */}
    <path d="M 50 148 Q 100 170 150 148 L 146 170 Q 100 184 54 170 Z" fill="#E74C3C" />
    <rect x="90" y="168" width="20" height="30" fill="#E74C3C" />
    <path d="M 90 196 L 100 198 L 110 196 L 110 200 L 90 200 Z" fill="#991620" />
    {/* ears */}
    <path d="M 34 62 L 48 20 L 72 58 Z" fill="#C85010" />
    <path d="M 166 62 L 152 20 L 128 58 Z" fill="#C85010" />
    <path d="M 46 46 L 52 28 L 60 46 Z" fill="#FFC098" />
    <path d="M 154 46 L 148 28 L 140 46 Z" fill="#FFC098" />
    {/* head */}
    <path d="M 30 92 Q 30 56 100 56 Q 170 56 170 92 L 156 146 Q 100 162 44 146 Z" fill="url(#hfBody)" />
    <path d="M 52 110 Q 52 134 100 148 Q 148 134 148 110 L 142 148 Q 100 158 58 148 Z" fill="#FFF0D8" />
    <Eyes lx={76} ly={94} rx={124} ry={94} size={9} />
    <ellipse cx="100" cy="126" rx="8" ry="6" fill="#1A0A00" />
    <path d="M 100 130 L 100 138" stroke="#1A0A00" strokeWidth="2" />
    <path d="M 100 138 Q 92 144 86 140" fill="none" stroke="#1A0A00" strokeWidth="2" strokeLinecap="round" />
    <path d="M 100 138 Q 108 144 114 140" fill="none" stroke="#1A0A00" strokeWidth="2" strokeLinecap="round" />
  </svg>
);

// Banana — in a tiny baseball cap
const HBanana = ({ size = 120 }) => (
  <svg viewBox={HS_VIEW} width={size} height={size * 220/200}>
    <defs>
      <linearGradient id="hbBody" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="#FFE860" /><stop offset="0.5" stopColor="#FFC420" /><stop offset="1" stopColor="#8A6A00" /></linearGradient>
    </defs>
    <path d="M 32 180 Q 22 220 60 220 L 140 220 Q 178 220 168 180 L 150 162 L 50 162 Z" fill="#1E40FF" />
    {/* banana body standing */}
    <path d="M 40 68 Q 40 40 100 34 Q 160 40 160 70 Q 160 110 150 140 Q 130 158 100 158 Q 70 158 50 140 Q 40 110 40 68 Z" fill="url(#hbBody)" />
    <ellipse cx="76" cy="84" rx="14" ry="24" fill="#FFF5A0" opacity="0.6" />
    {/* cap */}
    <path d="M 46 56 Q 46 24 100 20 Q 154 24 154 56 L 160 56 L 160 62 L 46 62 Z" fill="#E74C3C" />
    <rect x="154" y="54" width="30" height="10" rx="3" fill="#991620" />
    <circle cx="100" cy="38" r="3" fill="#FFD60A" />
    {/* face */}
    <Eyes lx={84} ly={108} rx={116} ry={108} size={9} />
    <path d="M 82 132 Q 100 146 118 132 Q 110 144 100 144 Q 90 144 82 132 Z" fill="#1A0A00" />
    <path d="M 90 140 Q 100 146 110 140 L 110 142 Q 100 146 90 142 Z" fill="#FF5E8A" />
  </svg>
);

// Slime — glam, glitter wig
const HSlime = ({ size = 120 }) => (
  <svg viewBox={HS_VIEW} width={size} height={size * 220/200}>
    <defs>
      <radialGradient id="hsBody" cx="0.35" cy="0.3" r="0.8"><stop offset="0" stopColor="#D08AFF" /><stop offset="0.5" stopColor="#9030D0" /><stop offset="1" stopColor="#4A0A8A" /></radialGradient>
    </defs>
    <path d="M 32 180 Q 22 220 60 220 L 140 220 Q 178 220 168 180 L 150 162 L 50 162 Z" fill="#FF5E8A" />
    {/* slime body */}
    <path d="M 30 120 Q 30 40 100 36 Q 170 40 170 120 Q 170 150 160 164 Q 150 158 140 164 Q 130 158 120 164 Q 110 158 100 164 Q 90 158 80 164 Q 70 158 60 164 Q 50 158 40 164 Q 30 150 30 120 Z" fill="url(#hsBody)" />
    <ellipse cx="68" cy="80" rx="16" ry="26" fill="#fff" opacity="0.5" />
    {/* stars/glitter */}
    <path d="M 54 48 L 57 54 L 63 54 L 58 58 L 60 64 L 54 60 L 48 64 L 50 58 L 45 54 L 51 54 Z" fill="#FFD60A" />
    <path d="M 146 52 L 149 58 L 155 58 L 150 62 L 152 68 L 146 64 L 140 68 L 142 62 L 137 58 L 143 58 Z" fill="#FFD60A" />
    {/* face */}
    <Eyes lx={80} ly={104} rx={120} ry={104} size={11} />
    <path d="M 80 132 Q 100 152 120 132 Q 110 148 100 148 Q 90 148 80 132 Z" fill="#1A0A00" />
    <path d="M 90 142 Q 100 148 110 142 L 110 144 Q 100 148 90 144 Z" fill="#FF5E8A" />
  </svg>
);

// Duck — judge's robe & wig
const HDuck = ({ size = 120 }) => (
  <svg viewBox={HS_VIEW} width={size} height={size * 220/200}>
    <defs>
      <radialGradient id="hdkBody" cx="0.4" cy="0.3" r="0.8"><stop offset="0" stopColor="#FFF070" /><stop offset="0.6" stopColor="#FFC420" /><stop offset="1" stopColor="#8A6A00" /></radialGradient>
    </defs>
    {/* robe */}
    <path d="M 32 180 Q 22 220 60 220 L 140 220 Q 178 220 168 180 L 150 162 L 50 162 Z" fill="#1A0A0A" />
    <rect x="94" y="162" width="12" height="58" fill="#fff" />
    {/* judge wig (rolled side curls) */}
    <ellipse cx="54" cy="100" rx="20" ry="34" fill="#E8E8F0" />
    <ellipse cx="146" cy="100" rx="20" ry="34" fill="#E8E8F0" />
    {[...Array(5)].map((_, i) => (
      <circle key={`l${i}`} cx="54" cy={78 + i*12} r="10" fill="#F5F5FA" />
    ))}
    {[...Array(5)].map((_, i) => (
      <circle key={`r${i}`} cx="146" cy={78 + i*12} r="10" fill="#F5F5FA" />
    ))}
    {/* duck head */}
    <circle cx="100" cy="100" r="60" fill="url(#hdkBody)" />
    <ellipse cx="78" cy="80" rx="16" ry="22" fill="#FFF5A0" opacity="0.55" />
    <path d="M 56 118 Q 100 138 144 118 Q 144 132 100 138 Q 56 132 56 118 Z" fill="#FF6A18" />
    <line x1="56" y1="124" x2="144" y2="124" stroke="#8B3810" strokeWidth="2" />
    <Eyes lx={80} ly={92} rx={120} ry={92} size={10} />
  </svg>
);

// Alien — lab coat + clipboard
const HAlien = ({ size = 120 }) => (
  <svg viewBox={HS_VIEW} width={size} height={size * 220/200}>
    <defs>
      <radialGradient id="halBody" cx="0.4" cy="0.3" r="0.8"><stop offset="0" stopColor="#A8F2D0" /><stop offset="0.5" stopColor="#3FB888" /><stop offset="1" stopColor="#0A5A3E" /></radialGradient>
    </defs>
    {/* lab coat */}
    <path d="M 32 180 Q 22 220 60 220 L 140 220 Q 178 220 168 180 L 150 158 L 50 158 Z" fill="#fff" stroke="#C8D0DE" strokeWidth="1" />
    <path d="M 80 158 L 100 178 L 120 158 L 116 190 L 100 200 L 84 190 Z" fill="#F0F4FA" />
    <rect x="118" y="180" width="24" height="30" rx="2" fill="#F0F4FA" stroke="#C8D0DE" strokeWidth="1" />
    <rect x="122" y="186" width="4" height="14" fill="#1E40FF" />
    <rect x="130" y="186" width="4" height="14" fill="#E74C3C" />
    {/* antennae */}
    <path d="M 76 30 Q 70 14 74 6" stroke="#0A5A3E" strokeWidth="4" strokeLinecap="round" fill="none" />
    <path d="M 124 30 Q 130 14 126 6" stroke="#0A5A3E" strokeWidth="4" strokeLinecap="round" fill="none" />
    <circle cx="74" cy="6" r="5" fill="#FF5E8A" />
    <circle cx="126" cy="6" r="5" fill="#FFD60A" />
    {/* head */}
    <ellipse cx="100" cy="100" rx="58" ry="68" fill="url(#halBody)" />
    <ellipse cx="74" cy="92" rx="14" ry="20" fill="#0B0820" />
    <ellipse cx="126" cy="92" rx="14" ry="20" fill="#0B0820" />
    <ellipse cx="78" cy="84" rx="4" ry="5" fill="#fff" />
    <ellipse cx="130" cy="84" rx="4" ry="5" fill="#fff" />
    <path d="M 86 130 Q 100 140 114 130" stroke="#0A5A3E" strokeWidth="3" fill="none" strokeLinecap="round" />
  </svg>
);

// Unicorn — pop star, mic
const HUnicorn = ({ size = 120 }) => (
  <svg viewBox={HS_VIEW} width={size} height={size * 220/200}>
    <defs>
      <linearGradient id="huHorn" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#FFF090" /><stop offset="1" stopColor="#E8A010" /></linearGradient>
      <radialGradient id="huBody" cx="0.4" cy="0.3" r="0.8"><stop offset="0" stopColor="#FFF0F8" /><stop offset="1" stopColor="#D090C0" /></radialGradient>
    </defs>
    {/* sparkle jacket */}
    <path d="M 32 180 Q 22 220 60 220 L 140 220 Q 178 220 168 180 L 150 158 L 50 158 Z" fill="#FF5E8A" />
    <path d="M 70 170 L 75 180 L 70 190 L 65 180 Z M 130 170 L 135 180 L 130 190 L 125 180 Z" fill="#FFD60A" />
    {/* horn */}
    <path d="M 100 22 L 88 60 L 112 60 Z" fill="url(#huHorn)" />
    <path d="M 94 38 L 106 38 M 92 50 L 108 50" stroke="#8A6A00" strokeWidth="1.5" />
    {/* ears */}
    <path d="M 42 64 L 50 36 L 64 66 Z" fill="#FFE0EC" />
    <path d="M 158 64 L 150 36 L 136 66 Z" fill="#FFE0EC" />
    {/* head */}
    <ellipse cx="100" cy="108" rx="62" ry="58" fill="url(#huBody)" />
    <ellipse cx="100" cy="130" rx="28" ry="20" fill="#FFD6E8" />
    {/* mane */}
    <path d="M 36 84 Q 26 120 34 150 Q 28 128 34 94" fill="#FF5E8A" />
    <path d="M 40 76 Q 30 94 32 112" fill="none" stroke="#A060C0" strokeWidth="3" strokeLinecap="round" />
    <path d="M 38 98 Q 26 120 30 138" fill="none" stroke="#6BE4B5" strokeWidth="3" strokeLinecap="round" />
    {/* face */}
    <path d="M 72 98 Q 80 92 88 98" stroke="#1A0A2A" strokeWidth="3.5" fill="none" strokeLinecap="round" />
    <path d="M 112 98 Q 120 92 128 98" stroke="#1A0A2A" strokeWidth="3.5" fill="none" strokeLinecap="round" />
    <circle cx="88" cy="130" r="1.5" fill="#1A0A2A" />
    <circle cx="112" cy="130" r="1.5" fill="#1A0A2A" />
    <path d="M 92 138 Q 100 144 108 138" stroke="#1A0A2A" strokeWidth="2" fill="none" strokeLinecap="round" />
    {/* mic */}
    <rect x="152" y="160" width="4" height="40" fill="#2A2A36" />
    <ellipse cx="154" cy="156" rx="9" ry="11" fill="#2A2A36" />
  </svg>
);

const HS_MAP = {
  dog: HDog, cat: HCat, robot: HRobot, tomato: HTomato, astro: HAstro,
  ghost: HGhost, dino: HDino, fox: HFox, banana: HBanana, slime: HSlime,
  duck: HDuck, alien: HAlien, unicorn: HUnicorn,
};

const Headshot = ({ id, size = 120 }) => {
  const C = HS_MAP[id];
  return C ? <C size={size} /> : null;
};

Object.assign(window, {
  HDog, HCat, HRobot, HTomato, HAstro, HGhost, HDino, HFox,
  HBanana, HSlime, HDuck, HAlien, HUnicorn,
  HS_MAP, Headshot,
});
