// DiveDex — OceanDex archetype + variant + registry system.
// Runs under Babel standalone. ES modules unavailable. Only public renderer + registries
// are exposed on window; archetype renderers stay module-local inside the IIFE.

(function () {

  // ── helpers ─────────────────────────────────────────────────────────
  const EYE = (cx, cy, r = 2.6) => (
    <g>
      <circle cx={cx} cy={cy} r={r} fill="#021321"/>
      <circle cx={cx - r * 0.35} cy={cy - r * 0.35} r={r * 0.32} fill="#EAF5FF" opacity="0.85"/>
    </g>
  );

  // accent helpers — applied by archetypes when variant requests them
  const Spots = ({ points, fill = '#EAF5FF', op = 0.55, r = 2 }) =>
    <g opacity={op}>{points.map(([x,y,rr],i) => <circle key={i} cx={x} cy={y} r={rr||r} fill={fill}/>)}</g>;
  const Stripes = ({ lines, stroke = '#021321', op = 0.5, w = 1.2 }) =>
    <g stroke={stroke} strokeWidth={w} opacity={op} fill="none">{lines.map((d,i)=><path key={i} d={d}/>)}</g>;

  // ── ARCHETYPES (each returns <g>; side-profile faces RIGHT) ─────────
  // Each archetype accepts (props) — variant.style is destructured for accents.

  const A = {}; // archetype registry

  A.hammerhead = ({ color = '#D7B46A', style = {} }) => {
    const headW = style.headW ?? 1.0; // 1.0 scalloped, 1.18 great, 0.95 smooth
    const scallop = style.scallop !== false;
    const offX = 222 + (headW-1)*22;
    return (
      <g>
        <path d="M182 76 C 170 56, 130 50, 90 54 C 65 56, 48 60, 36 68
                 C 42 70, 52 72, 62 73 L 48 80 L 40 92 L 62 86 L 70 90
                 C 90 96, 130 96, 162 90 C 174 88, 184 82, 182 76 Z" fill={color}/>
        <path d="M42 70 L 16 50 L 22 70 L 8 80 L 22 82 L 18 96 L 30 88 L 42 92 Z" fill={color}/>
        <path d="M128 56 L 116 28 L 102 56 Z" fill={style.dorsalColor || color}/>
        <path d="M72 60 L 66 48 L 58 62 Z" fill={color}/>
        <path d="M136 82 L 152 102 L 110 90 Z" fill={color}/>
        <path d="M90 88 L 94 100 L 78 94 Z" fill={color}/>
        <path d="M60 88 L 56 98 L 48 92 Z" fill={color}/>
        <path d={`M182 76 C 190 74, 200 72, 208 72 L ${offX-14} 60 L ${offX-10} 50 L ${offX-18} 46
                 L ${offX-34} 52 C 194 54, 184 56, 176 58 L 176 68 Z`} fill={color}/>
        {scallop && <>
          <path d={`M${offX-14} 60 Q ${offX-18} 58 ${offX-22} 60 Q ${offX-26} 58 ${offX-30} 60 Q ${offX-34} 58 ${offX-38} 60`}
                stroke="#021321" strokeWidth="1" fill="none" opacity="0.55"/>
          <circle cx={offX-18} cy="55" r="1.5" fill="#021321" opacity="0.45"/>
          <circle cx={offX-26} cy="55" r="1.5" fill="#021321" opacity="0.45"/>
          <circle cx={offX-34} cy="55" r="1.5" fill="#021321" opacity="0.45"/>
        </>}
        {EYE(offX-10, 62, 2.4)}
        {style.school && [0,1,2,3].map(i => (
          <g key={i} transform={`translate(${-i*46-8} ${(i%2?12:-8)}) scale(0.4)`} opacity="0.6">
            <path d="M150 76 C 140 60, 100 56, 70 60 C 50 64, 38 68, 30 72 L 50 78 L 40 88 L 56 84 L 64 88 C 90 92, 130 92, 150 76 Z M 162 76 L 188 60 L 184 76 L 196 88 Z" fill={color}/>
          </g>
        ))}
      </g>
    );
  };

  A.reefShark = ({ color = '#82ECFF', style = {} }) => (
    <g>
      <path d="M226 76 C 210 54, 150 48, 100 52 C 66 54, 42 62, 26 72
               C 34 74, 46 74, 56 74 L 44 84 L 34 96 L 56 90 L 66 92
               C 100 98, 160 98, 200 90 C 218 86, 228 80, 226 76 Z" fill={color}/>
      <path d="M30 72 L 8 50 L 14 72 L 4 82 L 14 84 L 10 100 L 22 92 L 30 94 Z" fill={style.tailTip || color}/>
      <path d="M136 56 L 120 26 L 102 56 Z" fill={color}/>
      {style.finTip && <path d="M122 30 L 124 26 L 120 26 Z" fill={style.finTip}/>}
      <path d="M170 84 L 186 110 L 130 96 Z" fill={color}/>
      {style.finTip && <path d="M184 108 L 188 112 L 178 108 Z" fill={style.finTip}/>}
      <path d="M90 90 L 92 102 L 78 96 Z" fill={color}/>
      <path d="M62 88 L 56 96 L 48 90 Z" fill={color}/>
      {style.belly && <path d="M40 80 Q 100 92 200 84 L 180 92 Q 100 96 60 90 Z" fill={style.belly} opacity="0.7"/>}
      {style.stripes && <Stripes lines={[60,78,96,114,132,150,168].map(x=>`M${x} 60 Q ${x+2} 76 ${x-2} 90`)} w={1.2}/>}
      {/* Saddle bands along the back — for banded reef sharks (e.g. houndshark) */}
      {style.bands && (
        <g opacity="0.55">
          {[
            { cx: 80, rx: 12, ry: 4.5 },
            { cx: 110, rx: 13, ry: 4.5 },
            { cx: 140, rx: 12, ry: 4.5 },
            { cx: 170, rx: 10, ry: 4 },
          ].map((b, i) => (
            <ellipse key={i} cx={b.cx} cy={68} rx={b.rx} ry={b.ry} fill={style.bands}/>
          ))}
        </g>
      )}
      <Stripes lines={["M170 80 Q 168 86 168 90","M 162 78 Q 160 86 160 92","M 154 78 Q 152 86 152 92"]} op={0.55} w={0.9}/>
      {EYE(200, 70, 2.4)}
    </g>
  );

  A.whaleShark = ({ color = '#82ECFF', style = {} }) => (
    <g>
      <path d="M230 70 C 222 50, 190 40, 130 42 C 80 44, 45 56, 26 68
               C 34 70, 44 72, 52 73 L 40 80 L 30 92 L 52 86 L 62 90
               C 110 100, 170 98, 210 88 C 224 84, 234 78, 230 70 Z" fill={color}/>
      <path d="M32 68 L 6 44 L 12 70 L 0 80 L 12 84 L 6 100 L 20 92 L 32 94 Z" fill={color}/>
      <path d="M122 44 L 108 22 L 92 46 Z" fill={color}/>
      <path d="M66 56 L 60 44 L 52 58 Z" fill={color}/>
      <path d="M170 80 L 190 110 L 130 92 Z" fill={color}/>
      <path d="M92 90 L 96 104 L 78 96 Z" fill={color}/>
      {EYE(206, 66, 1.8)}
      {style.spots !== false && <Spots fill="#021321" op={0.5}
        points={[[180,60],[160,56],[136,50],[110,54],[84,60],[60,64],
                 [170,76],[144,70],[116,72],[90,76],[66,78],
                 [152,86],[122,84],[96,86],[74,88]]}/>}
    </g>
  );

  A.zebraShark = ({ color = '#D7B46A', style = {} }) => (
    <g>
      <path d="M226 78 C 200 60, 130 60, 80 64 C 50 66, 30 72, 18 78
               C 26 80, 38 80, 48 80 L 36 86 L 28 96 L 50 90 L 60 92
               C 100 96, 170 94, 210 88 C 220 86, 228 82, 226 78 Z" fill={color}/>
      <path d="M22 78 L 4 60 L 8 78 L 0 88 L 10 88 L 4 100 L 18 94 L 28 96 Z" fill={color}/>
      <path d="M120 64 L 108 38 L 94 64 Z" fill={color}/>
      <path d="M68 70 L 62 56 L 54 70 Z" fill={color}/>
      <path d="M162 86 L 178 110 L 124 96 Z" fill={color}/>
      {EYE(204, 74, 2.2)}
      <Spots fill="#021321" op={0.6} r={1.6}
        points={[[180,68],[160,64],[140,62],[120,68],[100,72],[80,74],[60,76],
                 [170,82],[150,80],[130,82],[110,84],[90,84],
                 [40,72]]}/>
    </g>
  );

  A.thresherShark = ({ color = '#82ECFF' }) => (
    <g>
      <path d="M180 76 C 170 56, 120 50, 80 54 C 50 56, 30 64, 16 72
               C 26 74, 36 74, 46 74 L 34 82 L 26 94 L 46 88 L 56 90
               C 90 96, 140 96, 170 90 C 178 88, 184 82, 180 76 Z" fill={color}/>
      <path d="M22 70 L 4 50 L 10 70 L 0 80 L 10 82 L 4 96 L 18 90 L 22 92 Z" fill={color}/>
      {/* huge upper tail lobe — defining feature */}
      <path d="M180 76 C 220 60, 240 28, 232 8 C 222 30, 200 56, 184 70 Z" fill={color}/>
      <path d="M104 56 L 92 30 L 78 56 Z" fill={color}/>
      <path d="M148 86 L 168 110 L 110 96 Z" fill={color}/>
      {EYE(170, 70, 2.2)}
    </g>
  );

  A.bullheadShark = ({ color = '#D7B46A' }) => (
    <g>
      <path d="M214 80 C 200 60, 150 56, 100 60 C 60 62, 30 72, 18 84
               C 30 86, 42 86, 52 86 L 40 92 L 32 102 L 52 96 L 64 98
               C 100 102, 170 100, 200 94 C 212 92, 218 86, 214 80 Z" fill={color}/>
      <path d="M22 82 L 4 64 L 8 82 L 0 92 L 12 92 L 6 104 L 20 98 L 28 100 Z" fill={color}/>
      <path d="M126 64 L 116 40 L 100 64 Z" fill={color}/>
      <path d="M82 70 L 74 50 L 64 70 Z" fill={color}/>
      <path d="M156 92 L 174 114 L 120 100 Z" fill={color}/>
      <Stripes lines={["M120 64 Q 140 78 130 92","M 96 64 Q 76 80 92 92"]} op={0.55} w={1.6}/>
      {EYE(196, 80, 2)}
    </g>
  );

  A.nurseShark = ({ color = '#B0A07A' }) => (
    <g>
      <path d="M222 80 C 200 60, 140 56, 90 60 C 56 62, 32 70, 18 78
               C 28 80, 38 80, 48 80 L 36 88 L 28 100 L 50 94 L 60 96
               C 100 100, 170 100, 210 92 C 220 90, 226 86, 222 80 Z" fill={color}/>
      <path d="M22 78 L 2 60 L 8 78 L 0 88 L 12 88 L 4 102 L 20 96 L 30 98 Z" fill={color}/>
      <path d="M132 64 L 120 38 L 104 64 Z" fill={color}/>
      <path d="M76 70 L 68 56 L 60 72 Z" fill={color}/>
      <path d="M168 90 L 182 112 L 130 100 Z" fill={color}/>
      <path d="M210 86 L 196 96 M 204 86 L 192 94" stroke={color} strokeWidth="2" strokeLinecap="round"/>
      {EYE(200, 74, 2.2)}
    </g>
  );

  // ── rays ────────────────────────────────────────────────────────────
  A.mantaRay = ({ color = '#8B7BFF', style = {} }) => (
    <g>
      <path d="M120 32 C 150 30, 196 50, 224 76 C 210 78, 196 76, 180 80
               C 156 90, 130 92, 120 92 C 110 92, 84 90, 60 80
               C 44 76, 30 78, 16 76 C 44 50, 90 30, 120 32 Z" fill={color}/>
      <path d="M224 76 Q 230 84 222 92 L 208 86 Z" fill={color}/>
      <path d="M16 76 Q 10 84 18 92 L 32 86 Z" fill={color}/>
      <path d="M108 38 Q 100 24 92 18 L 100 36 Z" fill={color}/>
      <path d="M132 38 Q 140 24 148 18 L 140 36 Z" fill={color}/>
      <rect x="108" y="46" width="24" height="3" rx="1.5" fill="#021321" opacity="0.55"/>
      {EYE(96, 50, 2.2)}{EYE(144, 50, 2.2)}
      {style.underspots && <Spots fill="#021321" op={0.35}
        points={[[100,78,1.8],[118,82,1.8],[140,78,1.8]]}/>}
      <path d="M118 90 Q 118 110 116 124" stroke={color} strokeWidth={style.giant?3.5:2.5} fill="none" strokeLinecap="round"/>
    </g>
  );

  A.eagleRay = ({ color = '#82ECFF' }) => (
    <g>
      <path d="M120 36 C 156 32, 200 56, 230 78 C 206 78, 184 82, 168 88
               C 144 96, 96 96, 72 88 C 56 82, 34 78, 10 78
               C 40 56, 84 36, 120 36 Z" fill={color}/>
      <path d="M112 38 Q 120 22 130 22 L 126 40 Z" fill={color}/>
      <path d="M118 90 Q 122 110 128 132 Q 126 112 122 92"
            stroke={color} strokeWidth="2.4" fill="none" strokeLinecap="round"/>
      <Spots fill="#F6FCFF" op={0.55} r={2.4}
        points={[[60,68],[80,62],[100,58],[124,58],[150,62],[174,68],
                 [88,76],[112,76],[140,76],[164,76]]}/>
      {EYE(96, 56, 1.8)}{EYE(144, 56, 1.8)}
    </g>
  );

  A.stingray = ({ color = '#A89070', style = {} }) => (
    <g>
      <path d="M120 40 C 160 38, 210 60, 220 88 C 190 90, 160 96, 130 96
               C 110 96, 80 96, 50 90 C 30 86, 18 84, 14 80
               C 44 56, 84 42, 120 40 Z" fill={color}/>
      {style.bluespots && <Spots fill="#31D7FF" op={0.7} r={2.5}
        points={[[80,72],[100,66],[124,66],[148,70],[170,74],
                 [96,80],[120,82],[148,80]]}/>}
      <path d="M120 96 Q 124 116 132 140" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round"/>
      {EYE(102, 60, 1.8)}{EYE(138, 60, 1.8)}
    </g>
  );

  A.devilRay = ({ color = '#5A7BBF' }) => (
    <g>
      <path d="M120 36 C 156 34, 200 52, 226 72 C 210 76, 196 76, 180 80
               C 156 88, 130 90, 120 90 C 110 90, 84 88, 60 80
               C 44 76, 30 76, 14 72 C 40 52, 84 36, 120 36 Z" fill={color}/>
      <path d="M226 72 Q 232 80 224 88 L 210 82 Z" fill={color}/>
      <path d="M14 72 Q 8 80 16 88 L 30 82 Z" fill={color}/>
      <rect x="110" y="48" width="20" height="3" rx="1.5" fill="#021321" opacity="0.55"/>
      {EYE(100, 50, 2)}{EYE(140, 50, 2)}
      <path d="M118 88 Q 120 108 116 130" stroke={color} strokeWidth="2.4" fill="none" strokeLinecap="round"/>
    </g>
  );

  // ── turtles ─────────────────────────────────────────────────────────
  A.turtle = ({ color = '#63FFD2', style = {} }) => (
    <g transform="matrix(-1 0 0 1 240 0)">
      <path d={style.bigHead
        ? "M40 80 C 40 50, 80 42, 120 44 C 156 46, 168 58, 168 80 C 168 96, 140 104, 100 104 C 66 104, 40 96, 40 80 Z"
        : "M44 80 C 44 50, 84 42, 124 44 C 158 46, 170 58, 170 80 C 170 96, 144 104, 104 104 C 70 104, 44 96, 44 80 Z"} fill={color}/>
      <path d="M72 60 Q 40 46, 20 52 Q 30 70, 56 72 Z" fill={color}/>
      <path d="M164 86 Q 184 96, 190 110 Q 172 110, 152 96 Z" fill={color}/>
      <path d="M54 96 Q 40 110, 42 122 Q 56 116, 62 100 Z" fill={color} opacity="0.7"/>
      <path d="M154 60 Q 176 50, 184 58 Q 170 70, 148 70 Z" fill={color} opacity="0.7"/>
      {style.beak
        ? <path d="M22 60 L 8 58 L 6 64 L 12 70 L 24 66 Z" fill={color}/>
        : <ellipse cx="34" cy="64" rx={style.bigHead?16:14} ry={style.bigHead?12:10} fill={color}/>}
      {EYE(28, 62, 2)}
      <g stroke="#021321" strokeWidth="0.9" fill="none" opacity={style.leatherback ? 0.7 : 0.45}>
        {style.leatherback ? <>
          <path d="M52 56 L 168 64"/>
          <path d="M50 70 L 170 78"/>
          <path d="M52 84 L 168 90"/>
          <path d="M54 96 L 164 100"/>
        </> : <>
          <path d="M140 56 L 144 76 L 130 90"/>
          <path d="M116 50 L 116 96"/>
          <path d="M92 50 L 88 96"/>
          <path d="M68 56 L 64 76 L 72 90"/>
          <path d="M52 76 Q 110 84 160 78"/>
        </>}
      </g>
      {style.patternedShell && <Spots fill="#021321" op={0.35}
        points={[[80,68,1.6],[110,64,1.6],[140,68,1.6],[100,82,1.6],[130,86,1.6]]}/>}
    </g>
  );

  // ── eels & morays ───────────────────────────────────────────────────
  A.moray = ({ color = '#FF7A6B', style = {} }) => (
    <g transform="matrix(-1 0 0 1 240 0)">
      <path d="M240 102 C 210 96, 180 110, 150 100 C 156 116, 210 122, 240 116 Z" fill="#0B2A44" opacity="0.7"/>
      <path d="M232 96 C 180 78, 150 102, 110 80 C 80 64, 50 70, 20 50
               C 8 44, 6 38, 8 30 C 16 36, 22 40, 30 44
               C 52 56, 82 50, 110 64 C 140 78, 170 66, 210 78
               C 220 82, 230 88, 232 96 Z" fill={color}/>
      <path d="M26 36 C 16 32, 8 30, 4 28 L 8 36 L 4 44 L 14 42 Z" fill={color}/>
      <path d="M16 40 L 4 36 L 10 44 Z" fill="#021321" opacity="0.65"/>
      <path d="M14 38 L 12 41 M 10 37 L 9 40 M 7 36 L 7 39"
            stroke="#EAF5FF" strokeWidth="0.8" opacity="0.85"/>
      {style.dragon && <path d="M14 28 L 11 22 L 18 26 M 22 26 L 20 18 L 26 24"
            stroke={color} strokeWidth="2" fill="none" strokeLinecap="round"/>}
      {EYE(20, 34, 1.8)}
      {style.bands && [200,180,160,140,120,100,80,60,40].map((x,i)=>
        <ellipse key={i} cx={x} cy={66 - (x>120?(x-120)*0.2:0) + (i%2?2:-2)}
                 rx="3" ry="6" fill="#021321" opacity="0.35"
                 transform={`rotate(${(x-120)*0.4} ${x} 70)`}/>)}
      {style.spots && <Spots fill="#021321" op={0.4} r={1.4}
        points={[[200,84],[180,80],[160,84],[140,76],[120,72],[100,68],[80,62],[60,56],[40,48]]}/>}
    </g>
  );

  A.ribbonEel = ({ color = '#31D7FF' }) => (
    <g transform="matrix(-1 0 0 1 240 0)">
      <path d="M232 100 C 180 86, 150 110, 110 92 C 80 78, 50 88, 20 64
               C 12 58, 8 50, 12 42 C 18 46, 24 48, 32 52
               C 56 64, 84 60, 112 76 C 140 90, 170 82, 210 92
               C 222 96, 232 98, 232 100 Z" fill={color}/>
      <path d="M28 42 L 14 36 L 22 30 L 36 38 Z" fill={color}/>
      <path d="M28 36 L 18 30 L 22 28 Q 26 28 30 32 Z" fill={color}/>
      <path d="M232 98 Q 220 88 230 80 Q 226 96 232 98" fill={color}/>
      {EYE(34, 44, 1.6)}
    </g>
  );

  A.gardenEel = ({ color = '#9BB6CC' }) => (
    <g>
      <path d="M30 124 L 28 60 Q 30 40 36 32 Q 42 30 44 36 Q 46 56 44 124 Z" fill={color}/>
      <path d="M76 124 L 78 70 Q 80 52 86 46 Q 92 44 94 50 Q 96 66 94 124 Z" fill={color}/>
      <path d="M122 124 L 124 56 Q 126 38 132 30 Q 138 28 140 34 Q 142 52 140 124 Z" fill={color}/>
      <path d="M168 124 L 170 72 Q 172 56 178 50 Q 184 48 186 54 Q 188 70 186 124 Z" fill={color}/>
      {EYE(40, 36, 1.4)}{EYE(90, 50, 1.4)}{EYE(136, 34, 1.4)}{EYE(182, 54, 1.4)}
      <ellipse cx="120" cy="128" rx="120" ry="6" fill="#D7C49A" opacity="0.3"/>
    </g>
  );

  // ── pipefish / seahorse ─────────────────────────────────────────────
  A.pipefish = ({ color = '#D7B46A', style = {} }) => (
    <g>
      <path d={style.ornate
        ? "M20 80 C 60 78, 100 82, 140 80 C 170 78, 200 76, 224 70 L 218 78 L 230 84 L 218 86 L 224 92 C 200 88, 170 86, 140 88 C 100 92, 60 90, 20 90 Z"
        : "M18 82 C 60 80, 110 84, 160 82 C 190 80, 215 76, 226 74 L 232 78 L 226 84 C 215 90, 190 90, 160 90 C 110 92, 60 90, 18 88 Z"} fill={color}/>
      {style.ornate && <>
        <path d="M70 80 Q 60 60 50 56 Q 56 76 64 84 Z" fill={color}/>
        <path d="M110 82 Q 100 62 90 58 Q 98 78 106 86 Z" fill={color}/>
        <path d="M150 80 Q 142 60 134 56 Q 142 76 148 84 Z" fill={color}/>
        <path d="M40 90 Q 30 110 22 116 Q 30 96 36 90 Z" fill={color}/>
      </>}
      {style.banded && <Stripes lines={[40,60,80,100,120,140,160,180,200].map(x=>`M${x} 76 L ${x} 90`)} w={2} op={0.55}/>}
      {style.longsnout && <path d="M226 74 L 240 70 L 238 78 L 224 80 Z" fill={color}/>}
      {EYE(220, 80, 1.4)}
    </g>
  );

  A.seahorse = ({ color = '#D7B46A', style = {} }) => (
    <g>
      <path d="M150 30 C 170 38, 178 60, 168 80 C 162 92, 148 96, 134 92
               C 132 110, 144 124, 156 132 C 138 132, 124 122, 120 106
               C 116 92, 122 78, 134 72 C 128 60, 130 46, 142 36 Z" fill={color}/>
      {style.snoutLong && <path d="M148 32 L 168 26 L 168 36 L 154 40 Z" fill={color}/>}
      {!style.snoutLong && <path d="M150 30 L 164 28 L 162 38 L 152 38 Z" fill={color}/>}
      {style.thorny && [62,55,48,42,52,68,78,84,90].map((y,i) =>
        <path key={i} d={`M${150 + (i%2?6:-6)} ${y} l 4 -2`} stroke={color} strokeWidth="2" strokeLinecap="round"/>)}
      {style.pygmy && <Spots fill="#FF7A6B" op={0.75} r={1.6}
        points={[[140,50],[148,60],[156,72],[140,80],[148,90],[136,98]]}/>}
      {EYE(160, 40, 1.6)}
    </g>
  );

  // ── reef fish ───────────────────────────────────────────────────────
  A.clownfish = ({ color = '#FFA86B', style = {} }) => (
    <g>
      {style.anemone && <g opacity="0.4">
        {[20,40,60,200,220].map((x,i) =>
          <path key={i} d={`M${x} 130 Q ${x-4} 110 ${x} 96 Q ${x+4} 80 ${x} 70`}
                stroke={style.anemoneColor || "#FF7A6B"} strokeWidth="3" fill="none" strokeLinecap="round"/>)}
      </g>}
      <path d="M170 70 C 160 42, 80 42, 60 70 C 80 96, 160 96, 170 70 Z" fill={color}/>
      <path d="M60 70 L 26 50 L 34 70 L 26 92 Z" fill={color}/>
      <path d="M148 50 L 140 50 L 136 92 L 148 92 Z" fill="#F6FCFF"/>
      <path d="M118 46 L 102 46 L 102 96 L 118 96 Z" fill="#F6FCFF"/>
      <path d="M80 50 L 70 50 L 72 90 L 80 90 Z" fill="#F6FCFF"/>
      <path d="M148 50 L 148 92 M 136 50 L 136 92 M 118 46 L 118 96 M 102 46 L 102 96 M 80 50 L 80 90 M 70 50 L 72 90"
            stroke="#021321" strokeWidth="1"/>
      <path d="M140 44 Q 110 30 80 44 L 82 50 L 138 50 Z" fill={color}/>
      <path d="M130 92 Q 110 100 90 92 L 92 86 L 128 86 Z" fill={color}/>
      <path d="M156 72 Q 170 84 162 92 Q 150 84 148 76 Z" fill={color} opacity="0.85"/>
      {EYE(158, 64, 2.6)}
    </g>
  );

  A.angelfish = ({ color = '#31D7FF', style = {} }) => (
    <g>
      <path d="M180 70 C 170 32, 80 30, 50 70 C 80 110, 170 110, 180 70 Z" fill={color}/>
      <path d="M50 70 L 14 40 L 22 70 L 14 100 Z" fill={style.accent || color}/>
      <path d="M180 70 L 220 60 L 232 70 L 220 80 Z" fill={color}/>
      <path d="M110 30 L 100 8 L 118 28 Z" fill={color}/>
      <path d="M110 110 L 100 132 L 118 112 Z" fill={color}/>
      {style.bands && <Stripes lines={["M150 36 Q 152 70 148 104","M 110 30 Q 112 70 108 110","M 70 38 Q 74 70 70 102"]} w={4} op={0.6}/>}
      {style.queen && <path d="M62 60 Q 80 50 90 60 Q 80 70 62 60 Z" fill={style.accent || "#D7B46A"}/>}
      {EYE(170, 60, 2.4)}
    </g>
  );

  A.butterflyfish = ({ color = '#FFD86B' }) => (
    <g>
      <path d="M176 70 C 168 42, 80 40, 56 70 C 80 102, 168 100, 176 70 Z" fill={color}/>
      <path d="M56 70 L 24 50 L 30 70 L 24 92 Z" fill={color}/>
      <path d="M176 70 L 208 64 L 220 70 L 208 78 Z" fill={color}/>
      <Stripes lines={["M150 42 Q 152 70 148 100","M 100 36 Q 102 70 98 104"]} w={5} op={0.55}/>
      <path d="M188 64 Q 196 66 200 70 Q 196 74 188 76" fill="#021321" opacity="0.5"/>
      <circle cx="60" cy="64" r="4" fill="#021321" opacity="0.55"/>
      {EYE(202, 70, 1.8)}
    </g>
  );

  A.parrotfish = ({ color = '#31D7FF', style = {} }) => (
    <g>
      <path d="M220 72 C 200 42, 80 40, 36 70 C 80 106, 200 104, 220 72 Z" fill={color}/>
      <path d="M36 70 L 4 50 L 12 70 L 4 92 Z" fill={style.accent || color}/>
      <path d="M214 60 Q 232 64 232 72 Q 230 80 214 84 Q 208 76 210 72 Q 208 66 214 60 Z" fill={style.beak || "#FFD86B"}/>
      {style.stoplight && <>
        <path d="M40 64 Q 110 56 200 60 L 200 70 Q 110 64 40 70 Z" fill={style.stripe || "#FF7A6B"} opacity="0.7"/>
        <path d="M40 80 Q 110 88 200 86 L 200 76 Q 110 80 40 76 Z" fill={style.stripe2 || "#FFD86B"} opacity="0.5"/>
      </>}
      {EYE(206, 70, 2.4)}
    </g>
  );

  A.wrasse = ({ color = '#82ECFF', style = {} }) => (
    <g transform="matrix(-1 0 0 1 240 0)">
      <path d="M210 78 C 200 36, 80 32, 50 70 C 44 74, 44 78, 50 82
               C 80 116, 200 116, 210 78 Z" fill={color}/>
      {style.hump && <path d="M60 50 Q 40 36, 30 38 Q 34 56, 48 64 Z" fill={color}/>}
      <path d="M240 60 L 210 78 L 240 96 Z" fill={color}/>
      <path d="M44 76 Q 32 78, 28 74" stroke="#021321" strokeWidth="1.5" fill="none" opacity="0.7"/>
      {style.rainbow && <Stripes lines={["M180 64 Q 130 72 80 64","M 180 84 Q 130 88 80 84"]} stroke={style.stripe || "#FF7A6B"} w={3} op={0.55}/>}
      {EYE(64, 70, 2.4)}
    </g>
  );

  A.surgeonfish = ({ color = '#31D7FF', style = {} }) => (
    <g>
      <path d="M210 70 C 200 40, 70 38, 44 70 C 70 104, 200 104, 210 70 Z" fill={color}/>
      <path d="M44 70 L 14 50 L 20 70 L 14 92 Z" fill={style.tailColor || color}/>
      <path d="M210 70 L 226 64 L 234 70 L 226 78 Z" fill={style.beak || "#FFD86B"}/>
      <path d="M50 68 L 26 68 L 50 74 Z" fill={style.scalpel || "#021321"} opacity="0.7"/>
      {style.sohal && <path d="M50 76 Q 100 90 200 80" stroke="#021321" strokeWidth="2" fill="none" opacity="0.55"/>}
      {EYE(196, 64, 2.2)}
    </g>
  );

  A.tang = ({ color = '#31D7FF' }) => (
    <g>
      <path d="M204 70 C 196 38, 70 36, 40 70 C 70 106, 196 106, 204 70 Z" fill={color}/>
      <path d="M40 70 L 8 52 L 14 70 L 8 90 Z" fill="#FFD86B"/>
      <path d="M204 70 L 232 64 L 232 78 Z" fill={color}/>
      <path d="M70 50 Q 110 32 150 50 L 150 90 Q 110 108 70 90 Z" fill="#021321" opacity="0.2"/>
      {EYE(196, 64, 2.2)}
    </g>
  );

  A.damselfish = ({ color = '#31D7FF', style = {} }) => (
    <g>
      <path d="M196 72 C 188 50, 88 50, 60 72 C 88 96, 188 96, 196 72 Z" fill={color}/>
      <path d="M60 72 L 32 56 L 38 72 L 32 90 Z" fill={color}/>
      <path d="M120 50 L 110 36 L 132 50 Z" fill={color}/>
      <path d="M120 94 L 110 108 L 132 94 Z" fill={color}/>
      {style.spots && <circle cx="80" cy="72" r="6" fill={style.spot || "#021321"} opacity="0.6"/>}
      {EYE(184, 68, 2.2)}
    </g>
  );

  A.grouper = ({ color = '#5A6E8C', style = {} }) => (
    <g>
      <path d="M222 78 C 210 50, 80 46, 30 76 C 80 110, 210 108, 222 78 Z" fill={color}/>
      <path d="M30 76 L 4 56 L 10 76 L 4 96 Z" fill={color}/>
      <path d="M110 50 L 96 28 L 130 52 Z" fill={color}/>
      <path d="M150 58 L 162 42 L 168 60 Z" fill={color}/>
      <path d="M100 100 L 90 116 L 124 102 Z" fill={color}/>
      <path d="M200 70 Q 220 68 222 74 Q 210 84 198 80" stroke="#021321" strokeWidth="1.2" fill="none" opacity="0.55"/>
      {style.dusky && <Spots fill="#021321" op={0.4} r={2.2}
        points={[[180,68],[160,64],[140,68],[120,72],[100,68],[80,72],[60,74],[170,84],[140,88],[100,88],[60,86]]}/>}
      {EYE(202, 68, 2.4)}
    </g>
  );

  A.trevally = ({ color = '#9DB6CC' }) => (
    <g>
      <path d="M218 74 C 200 46, 60 44, 22 72 C 60 102, 200 102, 218 74 Z" fill={color}/>
      <path d="M22 72 L 0 50 L 4 72 L 0 94 Z" fill={color}/>
      <path d="M118 46 L 102 22 L 134 46 Z" fill={color}/>
      <path d="M170 80 L 188 110 L 130 96 Z" fill={color}/>
      <path d="M40 78 Q 110 84 200 76" stroke="#021321" strokeWidth="1" fill="none" opacity="0.45"/>
      {EYE(202, 64, 2.4)}
    </g>
  );

  A.tarpon = ({ color = '#B4C8D8' }) => (
    <g>
      <path d="M222 76 C 200 48, 30 48, 12 76 C 30 102, 200 102, 222 76 Z" fill={color}/>
      <path d="M12 76 L -2 56 L 0 76 L -2 96 Z" fill={color}/>
      <path d="M120 50 L 108 28 L 132 50 Z" fill={color}/>
      <path d="M170 82 L 184 108 L 132 96 Z" fill={color}/>
      <g stroke="#021321" strokeWidth="0.6" opacity="0.45">
        {[60,80,100,120,140,160,180].map((x,i)=><path key={i} d={`M${x} 60 L ${x} 90`}/>)}
      </g>
      {EYE(206, 68, 2.4)}
    </g>
  );

  A.tuna = ({ color = '#5C7DB8' }) => (
    <g>
      <path d="M226 76 C 200 52, 100 52, 30 76 C 100 102, 200 102, 226 76 Z" fill={color}/>
      <path d="M30 76 L 6 56 L 14 76 L 6 96 Z" fill={color}/>
      <path d="M120 54 L 108 30 L 132 56 Z" fill={color}/>
      <path d="M170 86 L 188 112 L 132 96 Z" fill={color}/>
      {[150,170,190].map((x,i)=><path key={i} d={`M${x} 64 L ${x+6} 60`} stroke="#FFD86B" strokeWidth="2" fill="none"/>)}
      {[150,170,190].map((x,i)=><path key={i} d={`M${x} 88 L ${x+6} 92`} stroke="#FFD86B" strokeWidth="2" fill="none"/>)}
      {EYE(210, 70, 2.2)}
    </g>
  );

  A.barracuda = ({ color = '#9DB8CC', style = {} }) => (
    <g transform="matrix(-1 0 0 1 240 0)">
      <path d="M224 74 C 180 50, 60 56, 20 70 C 60 88, 180 92, 224 74 Z" fill={color}/>
      <path d="M240 56 L 222 74 L 240 92 Z" fill={color}/>
      <path d="M130 50 L 116 38 L 106 56 Z" fill={color}/>
      <path d="M82 56 L 72 46 L 62 58 Z" fill={color}/>
      <Stripes lines={[60,80,100,120,140,160,180].map(x=>`M${x} 60 L ${x+3} 86`)} w={1} op={0.5}/>
      <path d="M20 70 L 8 70 L 20 76 Z" fill="#021321" opacity="0.55"/>
      {style.school && [-1,1,2].map(i => (
        <g key={i} transform={`translate(${i*-40} ${i%2?20:-18}) scale(0.5)`} opacity="0.45">
          <path d="M224 74 C 180 50, 60 56, 20 70 C 60 88, 180 92, 224 74 Z M 240 56 L 222 74 L 240 92 Z" fill={color}/>
        </g>
      ))}
      {EYE(44, 68, 2.4)}
    </g>
  );

  // ── pelagic predators / cetaceans ───────────────────────────────────
  A.dolphin = ({ color = '#9DC8E0' }) => (
    <g>
      <path d="M226 76 C 200 50, 80 50, 18 70 C 30 76, 50 80, 80 80
               C 130 82, 200 84, 226 76 Z" fill={color}/>
      <path d="M18 70 L 4 60 L 6 76 L 0 90 L 18 84 Z" fill={color}/>
      <path d="M126 50 L 112 24 L 138 52 Z" fill={color}/>
      <path d="M140 84 L 160 110 L 100 92 Z" fill={color}/>
      <path d="M226 76 Q 236 78 230 86 L 212 82 Z" fill={color}/>
      <path d="M222 72 Q 232 70 232 64 Q 224 64 220 70 Z" fill="#021321" opacity="0.3"/>
      <path d="M198 78 Q 212 80 220 78" stroke="#021321" strokeWidth="1" fill="none" opacity="0.5"/>
      {EYE(212, 72, 1.8)}
    </g>
  );

  A.whale = ({ color = '#8E9BB2' }) => (
    <g>
      <path d="M232 72 C 222 44, 100 40, 14 70 C 30 78, 60 84, 110 86
               C 170 88, 220 86, 232 72 Z" fill={color}/>
      <path d="M14 70 L -4 58 L 0 76 L -4 92 L 18 84 Z" fill={color}/>
      <path d="M130 86 L 100 110 L 80 96 Z" fill={color}/>
      <path d="M170 60 L 162 40 L 180 62 Z" fill={color}/>
      <path d="M30 76 Q 100 84 200 80" stroke="#021321" strokeWidth="0.7" fill="none" opacity="0.4"/>
      <path d="M212 76 Q 224 78 230 74" stroke="#021321" strokeWidth="1" fill="none" opacity="0.55"/>
      {EYE(220, 70, 1.8)}
    </g>
  );

  A.seal = ({ color = '#7A8AA0' }) => (
    <g>
      <path d="M44 80 C 44 50, 130 46, 180 60 C 210 68, 220 80, 200 92
               C 170 102, 100 104, 64 100 C 44 96, 44 90, 44 80 Z" fill={color}/>
      <path d="M198 86 L 230 90 L 220 100 L 196 96 Z" fill={color}/>
      <path d="M76 96 Q 64 112 50 116 Q 60 96 70 92 Z" fill={color}/>
      <path d="M132 96 Q 124 110 110 114 Q 122 100 128 94 Z" fill={color}/>
      <ellipse cx="50" cy="70" rx="14" ry="12" fill={color}/>
      <circle cx="42" cy="70" r="2" fill="#021321"/>
      {EYE(54, 66, 2)}
      <ellipse cx="48" cy="74" rx="3" ry="2" fill="#021321" opacity="0.55"/>
    </g>
  );

  A.dugong = ({ color = '#A89070' }) => (
    <g>
      <path d="M40 74 C 40 50, 140 46, 190 56 C 218 62, 222 78, 200 88
               C 160 100, 100 104, 64 98 C 42 92, 40 84, 40 74 Z" fill={color}/>
      <path d="M198 80 L 232 80 L 220 92 L 196 92 Z" fill={color}/>
      <path d="M232 80 L 236 70 L 232 88 Z" fill={color}/>
      <path d="M120 96 Q 124 116 130 132 Q 120 110 110 96 Z" fill={color} opacity="0.7"/>
      <ellipse cx="44" cy="62" rx="14" ry="10" fill={color}/>
      <path d="M40 62 L 30 64 L 38 70 Z" fill={color}/>
      <path d="M34 64 Q 28 66 32 70" stroke="#021321" strokeWidth="1" fill="none" opacity="0.55"/>
      {EYE(54, 60, 1.8)}
    </g>
  );

  // ── cephalopods ─────────────────────────────────────────────────────
  A.octopus = ({ color = '#FF7A6B', style = {} }) => (
    <g>
      <path d="M70 56 C 70 30, 170 30, 170 56 C 170 76, 150 84, 120 84
               C 90 84, 70 76, 70 56 Z" fill={color}/>
      <ellipse cx="120" cy="42" rx="36" ry="10" fill="#EAF5FF" opacity="0.15"/>
      <ellipse cx="100" cy="56" rx="9" ry="8" fill="#F6FCFF"/>
      <ellipse cx="140" cy="56" rx="9" ry="8" fill="#F6FCFF"/>
      <ellipse cx="100" cy="58" rx="3.5" ry="5" fill="#021321"/>
      <ellipse cx="140" cy="58" rx="3.5" ry="5" fill="#021321"/>
      {[
        "M76 80 Q 50 96 36 124 Q 50 116 64 104 Q 70 96 78 90",
        "M92 84 Q 76 110 70 132 Q 86 116 94 102 Q 96 96 98 90",
        "M108 84 Q 102 112 102 134 Q 112 118 114 104 Q 114 96 114 90",
        "M124 84 Q 130 112 128 134 Q 138 118 138 104 Q 138 96 134 90",
        "M140 84 Q 154 110 158 132 Q 144 116 138 102 Q 134 96 132 90",
        "M156 82 Q 178 106 192 132 Q 178 116 164 102 Q 156 94 152 88",
        "M168 76 Q 192 86 210 100 Q 190 94 172 88",
        "M70 70 Q 46 76 26 88 Q 50 80 70 80",
      ].map((d, i) => <path key={i} d={d} stroke={color} strokeWidth="9" strokeLinecap="round" fill="none"/>)}
      <Spots fill="#021321" op={0.55} r={1.6}
        points={[[62,108],[52,118],[88,114],[80,124],[108,114],[106,126],[128,114],[132,126],
                [148,114],[152,124],[176,110],[190,118],[60,82],[44,86]]}/>
    </g>
  );

  A.cuttlefish = ({ color = '#A89070' }) => (
    <g>
      <path d="M180 76 C 180 44, 60 44, 40 76 C 60 100, 180 100, 180 76 Z" fill={color}/>
      <path d="M40 76 Q 30 76 26 80 Q 32 84 40 84 Z" fill={color}/>
      <path d="M180 76 Q 190 70 196 76 Q 188 84 178 80 Z M 192 78 Q 204 78 212 82 Q 200 86 188 84 Z
               M 184 84 Q 198 90 206 96 Q 192 94 180 90 Z M 178 90 Q 188 100 192 110 Q 178 100 174 92 Z" fill={color}/>
      <g stroke="#EAF5FF" strokeWidth="0.5" opacity="0.45" fill="none">
        {[50,70,90,110,130,150].map((x,i)=><path key={i} d={`M${x} 56 Q ${x+10} 76 ${x} 96`}/>)}
      </g>
      <ellipse cx="170" cy="68" rx="8" ry="5" fill="#021321" opacity="0.85"/>
      <ellipse cx="172" cy="68" rx="3" ry="3" fill="#82ECFF"/>
    </g>
  );

  A.squid = ({ color = '#FF7A6B' }) => (
    <g>
      <path d="M30 76 L 16 50 L 50 70 Z" fill={color}/>
      <path d="M30 76 L 16 102 L 50 82 Z" fill={color}/>
      <path d="M40 64 C 40 56, 130 54, 180 60 C 200 62, 210 68, 210 76
               C 210 84, 200 90, 180 92 C 130 96, 40 96, 40 88 Z" fill={color}/>
      {[0,1,2,3,4,5].map(i =>
        <path key={i} d={`M210 ${72+i*1.5} Q 230 ${76+i*2} 240 ${82+i*3}`}
              stroke={color} strokeWidth="3" fill="none" strokeLinecap="round"/>)}
      <path d="M210 76 Q 240 72 244 82" stroke={color} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <ellipse cx="200" cy="72" rx="4" ry="3" fill="#021321"/>
      <ellipse cx="200" cy="82" rx="4" ry="3" fill="#021321"/>
    </g>
  );

  // ── macro / inverts ─────────────────────────────────────────────────
  A.nudibranch = ({ color = '#FF7A6B', style = {} }) => (
    <g>
      <path d="M30 92 C 60 64, 180 64, 210 92 C 200 104, 180 106, 150 104
               C 120 102, 90 106, 60 104 C 40 102, 32 96, 30 92 Z" fill={color}/>
      {style.frilly && <path d="M30 92 Q 50 100 70 90 Q 90 102 110 92 Q 130 102 150 92 Q 170 102 190 92 Q 200 100 210 92"
            stroke="#EAF5FF" strokeWidth="1.3" fill="none" opacity="0.45"/>}
      {style.gills && [60,80,100,120,140,160,180].map((x,i)=><circle key={i} cx={x} cy="80" r="3" fill={color}/>)}
      {style.gills && [55,75,95,115,135,155,175,195].map((x,i)=><circle key={i} cx={x} cy="72" r="2.2" fill={color} opacity="0.85"/>)}
      {style.cerata && [40,60,80,100,120,140,160,180,200].map((x,i)=>
        <path key={i} d={`M${x} 78 Q ${x+2} 60 ${x+(i%2?6:-6)} 50`} stroke={style.cerataColor || "#31D7FF"} strokeWidth="3" fill="none" strokeLinecap="round"/>)}
      <path d="M178 70 Q 182 50 176 44 Q 170 50 172 70 Z" fill={color}/>
      <path d="M166 68 Q 168 48 160 42 Q 154 48 158 68 Z" fill={color}/>
      <g transform="translate(58 70)">
        <circle r="3.5" fill={color}/>
        <circle cx="-5" cy="-3" r="2.5" fill={color}/>
        <circle cx="5" cy="-3" r="2.5" fill={color}/>
        <circle cx="-3" cy="-7" r="2" fill={color}/>
        <circle cx="3" cy="-7" r="2" fill={color}/>
      </g>
      {style.mantleSpots && <Spots fill="#EAF5FF" op={0.55} r={2.5}
        points={[[80,92],[110,94],[140,92],[170,94]]}/>}
    </g>
  );

  A.frogfish = ({ color = '#FF7A6B', style = {} }) => (
    <g>
      <path d="M40 86 C 40 56, 200 50, 210 86 C 200 110, 50 110, 40 86 Z" fill={color}/>
      <path d="M180 56 Q 190 36 198 42 Q 196 56 190 62" stroke={color} strokeWidth="3" fill="none" strokeLinecap="round"/>
      <circle cx="198" cy="42" r="3" fill={style.lure || "#FFD86B"}/>
      <path d="M40 86 L 14 70 L 22 86 L 14 100 Z" fill={color}/>
      <path d="M60 100 L 50 112 L 80 102 Z" fill={color}/>
      <path d="M140 100 L 130 112 L 160 102 Z" fill={color}/>
      {style.hairy && [50,70,90,110,130,150,170,190].map((x,i)=>
        <path key={i} d={`M${x} ${i%2?60:54} l 4 -6`} stroke={color} strokeWidth="2" strokeLinecap="round"/>)}
      {style.sargassum && <g opacity="0.7">
        <path d="M40 60 Q 60 50 80 60 Q 60 56 60 70" stroke="#D7B46A" strokeWidth="2" fill="none"/>
        <path d="M120 56 Q 140 50 160 60 Q 140 56 140 70" stroke="#D7B46A" strokeWidth="2" fill="none"/>
      </g>}
      <Spots fill="#021321" op={0.5} r={2}
        points={[[60,82],[80,76],[100,80],[120,72],[140,80],[160,76],[180,82],
                 [70,94],[100,96],[140,94],[170,96]]}/>
      {EYE(168, 70, 2.4)}
      <path d="M168 86 Q 180 92 188 86" stroke="#021321" strokeWidth="1.4" fill="none" opacity="0.55"/>
    </g>
  );

  A.lionfish = ({ color = '#FF7A6B' }) => (
    <g>
      <path d="M196 74 C 188 50, 70 48, 50 72 C 70 100, 188 100, 196 74 Z" fill={color}/>
      <path d="M50 72 L 22 56 L 30 72 L 22 92 Z" fill={color}/>
      <Stripes lines={[80,100,120,140,160,180].map(x=>`M${x} 56 Q ${x+2} 72 ${x-2} 88`)} w={4} op={0.65} stroke="#EAF5FF"/>
      <g stroke={color} strokeWidth="2" fill="none" strokeLinecap="round">
        {[88,108,128,148].map((x,i)=><path key={i} d={`M${x} 50 L ${x-4} 26 M ${x+4} 26 L ${x} 50`}/>)}
        {[78,98,118,138,158].map((x,i)=><path key={i} d={`M${x} 92 L ${x-2} 116 M ${x+2} 116 L ${x} 92`}/>)}
      </g>
      <path d="M52 78 Q 38 84 36 90 M 56 86 Q 42 96 40 102" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round"/>
      {EYE(184, 70, 2.2)}
    </g>
  );

  A.crocodilefish = ({ color = '#A89070' }) => (
    <g>
      <path d="M14 78 C 30 70, 80 68, 150 70 C 200 72, 230 76, 232 80
               C 230 86, 200 88, 150 88 C 80 90, 30 86, 14 82 Z" fill={color}/>
      <path d="M232 80 L 240 76 L 240 84 L 232 84 Z" fill={color}/>
      <path d="M40 88 L 30 100 L 60 90 Z" fill={color}/>
      <path d="M140 88 L 130 102 L 160 92 Z" fill={color}/>
      <path d="M14 78 L 0 70 L 6 80 L 0 90 Z" fill={color}/>
      <Spots fill="#021321" op={0.45} r={1.6}
        points={[[60,76],[90,72],[120,76],[150,74],[180,76],[210,80],[80,84],[130,84],[180,82]]}/>
      <ellipse cx="218" cy="78" rx="2" ry="1.5" fill="#021321"/>
      <ellipse cx="218" cy="82" rx="2" ry="1.5" fill="#021321"/>
    </g>
  );

  A.giantClam = ({ color = '#31D7FF' }) => (
    <g>
      <path d="M30 88 Q 120 60 210 88 Q 200 96 180 96 Q 120 76 60 96 Q 40 96 30 88 Z" fill="#A89070"/>
      <path d="M30 92 L 210 92 L 210 110 Q 120 130 30 110 Z" fill="#A89070"/>
      <path d="M50 90 Q 120 76 190 90 Q 180 84 120 78 Q 60 84 50 90 Z" fill={color} opacity="0.75"/>
      <path d="M60 92 Q 120 80 180 92" stroke={color} strokeWidth="2" fill="none" opacity="0.6"/>
      <Spots fill="#EAF5FF" op={0.85} r={1.4}
        points={[[80,88],[100,84],[120,82],[140,84],[160,88]]}/>
    </g>
  );

  A.shrimp = ({ color = '#FF7A6B' }) => (
    <g>
      <path d="M40 90 C 40 70, 120 60, 180 70 Q 200 76 200 84 Q 200 92 180 96
               C 120 102, 40 100, 40 90 Z" fill={color}/>
      <path d="M200 80 L 220 60 M 200 82 L 226 76 M 200 86 L 222 92" stroke={color} strokeWidth="2" strokeLinecap="round" fill="none"/>
      <path d="M40 90 L 20 110 M 60 96 L 50 116 M 80 98 L 78 118 M 100 100 L 102 118 M 120 100 L 124 118
               M 140 98 L 146 118 M 160 96 L 168 116" stroke={color} strokeWidth="2" strokeLinecap="round" fill="none"/>
      <Stripes lines={["M60 76 L 60 96","M 80 72 L 80 96","M 100 70 L 100 98","M 120 70 L 120 98","M 140 72 L 140 96","M 160 76 L 160 94"]} w={1} op={0.45}/>
      <ellipse cx="194" cy="84" rx="3" ry="2.5" fill="#021321"/>
    </g>
  );

  A.crab = ({ color = '#FF7A6B', style = {} }) => (
    <g>
      <path d="M60 80 C 60 60, 180 60, 180 80 C 180 96, 150 100, 120 100 C 90 100, 60 96, 60 80 Z" fill={color}/>
      <path d="M60 80 Q 30 62 22 50 Q 30 74 50 78 Z" fill={color}/>
      <path d="M180 80 Q 210 62 218 50 Q 210 74 190 78 Z" fill={color}/>
      <circle cx="30" cy="50" r="6" fill={color}/>
      <circle cx="210" cy="50" r="6" fill={color}/>
      {style.arrow && <path d="M120 60 L 116 28 L 124 28 Z" fill={color}/>}
      <path d="M70 96 L 50 116 M 80 100 L 70 122 M 100 102 L 96 124 M 140 102 L 144 124 M 160 100 L 170 122 M 170 96 L 190 116"
            stroke={color} strokeWidth="3" strokeLinecap="round" fill="none"/>
      <circle cx="98" cy="76" r="2.4" fill="#021321"/>
      <circle cx="142" cy="76" r="2.4" fill="#021321"/>
    </g>
  );

  A.lobster = ({ color = '#A8462B', style = {} }) => (
    <g>
      <path d="M30 80 C 30 64, 180 64, 200 76 C 220 78, 230 84, 220 92
               C 180 100, 60 100, 30 92 Z" fill={color}/>
      <path d="M30 80 Q 18 60 8 58 Q 14 76 24 82 Z" fill={color}/>
      <path d="M30 92 Q 18 110 10 116 Q 16 96 24 90 Z" fill={color}/>
      <Stripes lines={[60,80,100,120,140,160,180].map(x=>`M${x} 70 L ${x} 96`)} w={1} op={0.55}/>
      <path d="M200 80 L 224 72 L 226 86 L 200 90 Z" fill={color}/>
      {style.spiny && [50,70,90,110,130,150,170,190].map((x,i)=>
        <path key={i} d={`M${x} 64 l 0 -8`} stroke={color} strokeWidth="2" strokeLinecap="round"/>)}
      <path d="M218 76 L 232 62 M 222 84 L 240 88" stroke={color} strokeWidth="2" strokeLinecap="round"/>
      <ellipse cx="212" cy="80" rx="2" ry="1.6" fill="#021321"/>
    </g>
  );

  A.seaStar = ({ color = '#FF7A6B' }) => (
    <g>
      <path d="M120 30 L 138 86 L 196 90 L 148 122 L 168 178 L 120 144 L 72 178 L 92 122 L 44 90 L 102 86 Z" fill={color}/>
      <Spots fill="#EAF5FF" op={0.55} r={2.2}
        points={[[120,60],[120,90],[120,120],[90,100],[150,100]]}/>
    </g>
  );

  A.jellyfish = ({ color = '#82ECFF' }) => (
    <g>
      <path d="M60 70 C 60 38, 180 38, 180 70 C 180 84, 160 86, 120 86 C 80 86, 60 84, 60 70 Z" fill={color} opacity="0.65"/>
      <path d="M70 86 Q 76 110 64 130 M 90 88 Q 86 116 78 134 M 110 88 Q 108 118 102 136
               M 130 88 Q 132 118 138 136 M 150 88 Q 154 116 162 134 M 170 86 Q 174 110 184 130"
            stroke={color} strokeWidth="2" fill="none" strokeLinecap="round" opacity="0.8"/>
      <path d="M84 60 Q 120 50 156 60" stroke="#EAF5FF" strokeWidth="2" fill="none" opacity="0.7"/>
    </g>
  );

  A.trunkfish = ({ color = '#FFD86B' }) => (
    <g>
      <path d="M180 70 C 180 44, 70 44, 50 70 C 70 100, 180 100, 180 70 Z" fill={color}/>
      <path d="M50 70 L 22 56 L 26 70 L 22 90 Z" fill={color}/>
      <path d="M180 70 L 200 64 L 206 72 L 200 80 Z" fill={color}/>
      <Spots fill="#021321" op={0.6} r={2}
        points={[[80,60],[100,56],[120,58],[140,56],[160,60],
                 [80,80],[100,84],[120,82],[140,84],[160,80]]}/>
      {EYE(192, 70, 2)}
    </g>
  );

  A.tigerShark = ({ color = '#82ECFF' }) => (
    <g>
      <path d="M226 76 C 210 54, 150 48, 100 52 C 66 54, 42 62, 26 72
               C 34 74, 46 74, 56 74 L 44 84 L 34 96 L 56 90 L 66 92
               C 100 98, 160 98, 200 90 C 218 86, 228 80, 226 76 Z" fill={color}/>
      <path d="M30 72 L 8 50 L 14 72 L 4 82 L 14 84 L 10 100 L 22 92 L 30 94 Z" fill={color}/>
      <path d="M132 56 L 116 24 L 98 56 Z" fill={color}/>
      <path d="M170 86 L 186 112 L 128 96 Z" fill={color}/>
      <Stripes lines={[60,78,96,114,132,150,168].map(x=>`M${x} 60 Q ${x+2} 76 ${x-2} 90`)} w={1.4} op={0.55}/>
      {EYE(200, 70, 2.4)}
    </g>
  );

  // ── non-creature archetypes (wrecks, aircraft, coral, sponges) ──────
  // These slot into the same sprite system so they pipe through the Dex,
  // sightings picker, first-spotter attribution and Memories timeline.

  A.coral = ({ color = '#FF9DB0', style = {} }) => {
    // shape: 'soft' | 'brain' | 'fan' | 'staghorn' | 'black' | 'table'
    const shape = style.shape || 'soft';
    if (shape === 'brain') {
      return (
        <g>
          {/* Brain coral — dome with grooved surface */}
          <ellipse cx="120" cy="100" rx="62" ry="38" fill={color}/>
          <path d="M70 100 Q 90 76 120 78 Q 152 80 168 100
                   M 78 110 Q 100 90 120 92 Q 142 94 162 110
                   M 84 118 Q 102 104 120 106 Q 140 108 156 118
                   M 92 88 Q 110 70 120 72 Q 132 74 148 88"
                stroke="#021321" strokeWidth="1.2" fill="none" opacity="0.45"/>
        </g>
      );
    }
    if (shape === 'fan') {
      return (
        <g>
          {/* Sea fan / gorgonian — vertical fan with ribbed branching */}
          <path d="M118 124 L 118 96 M 110 96 Q 70 76 60 40
                   M 118 96 Q 80 60 84 32
                   M 126 96 Q 130 60 134 30
                   M 134 96 Q 160 64 176 36
                   M 142 96 Q 178 76 196 50"
                stroke={color} strokeWidth="3" strokeLinecap="round" fill="none"/>
          {/* Cross ribs */}
          <path d="M 78 60 Q 120 56 170 60 M 86 80 Q 120 76 162 80"
                stroke={color} strokeWidth="1.6" opacity="0.6" fill="none"/>
          {/* Base */}
          <rect x="112" y="120" width="14" height="8" rx="2" fill="#5C4A3E"/>
        </g>
      );
    }
    if (shape === 'staghorn') {
      return (
        <g>
          {/* Staghorn coral — branched antler-like clusters */}
          <path d="M120 124 L 118 96 L 100 72 L 94 50
                   M 100 72 L 78 60
                   M 118 96 L 100 88 L 86 78
                   M 118 96 L 138 80 L 156 64
                   M 156 64 L 168 50
                   M 156 64 L 150 50
                   M 138 80 L 142 64
                   M 120 124 L 132 110 L 144 92
                   M 144 92 L 160 84"
                stroke={color} strokeWidth="3.6" strokeLinecap="round" fill="none"/>
          {/* Branch tips */}
          {[[94,50],[78,60],[86,78],[168,50],[150,50],[142,64],[144,92],[160,84]].map(([x,y],i) => (
            <circle key={i} cx={x} cy={y} r="2.4" fill={color}/>
          ))}
        </g>
      );
    }
    if (shape === 'black') {
      return (
        <g>
          {/* Black coral — dark feathery fern */}
          <path d="M120 124 L 122 60 M 122 60 L 132 30
                   M 100 92 Q 90 82 86 70
                   M 110 80 Q 100 70 96 56
                   M 116 70 Q 108 60 106 46
                   M 130 70 Q 138 60 142 46
                   M 134 80 Q 144 70 150 56
                   M 142 92 Q 154 82 158 70"
                stroke={color} strokeWidth="2.4" strokeLinecap="round" fill="none"/>
          <path d="M120 124 L 122 60" stroke={color} strokeWidth="3.5" strokeLinecap="round"/>
        </g>
      );
    }
    if (shape === 'table') {
      return (
        <g>
          {/* Table coral — flat plate on a stem */}
          <ellipse cx="120" cy="68" rx="68" ry="14" fill={color}/>
          <ellipse cx="120" cy="64" rx="64" ry="10" fill="#021321" opacity="0.15"/>
          <rect x="112" y="74" width="16" height="42" rx="3" fill="#7E5E47"/>
          <ellipse cx="120" cy="120" rx="22" ry="6" fill="#5C4A3E"/>
        </g>
      );
    }
    // 'soft' — Mikomoto-style pink soft coral cluster (default)
    return (
      <g>
        <path d="M120 124 L 122 80" stroke="#5C4A3E" strokeWidth="3" strokeLinecap="round"/>
        {/* Bulbous tips */}
        {[
          { cx: 122, cy: 60, r: 16 },
          { cx: 88,  cy: 72, r: 14 },
          { cx: 156, cy: 70, r: 14 },
          { cx: 100, cy: 44, r: 11 },
          { cx: 144, cy: 42, r: 11 },
          { cx: 122, cy: 36, r: 9 },
        ].map((b, i) => (
          <g key={i}>
            <circle cx={b.cx} cy={b.cy} r={b.r} fill={color}/>
            <circle cx={b.cx - b.r * 0.3} cy={b.cy - b.r * 0.3} r={b.r * 0.35} fill="#FFFFFF" opacity="0.35"/>
          </g>
        ))}
        {/* Connecting stems */}
        <path d="M122 80 L 88 72 M 122 80 L 156 70 M 122 80 L 100 44 M 122 80 L 144 42 M 122 80 L 122 36"
              stroke={color} strokeWidth="2.4" opacity="0.7" fill="none" strokeLinecap="round"/>
      </g>
    );
  };

  A.sponge = ({ color = '#FFB37A', style = {} }) => {
    // shape: 'barrel' | 'tube' | 'rope' | 'encrusting'
    const shape = style.shape || 'barrel';
    if (shape === 'tube') {
      // Cluster of vertical tubes with hollow openings
      return (
        <g>
          {[
            { x: 78, w: 18, h: 70 },
            { x: 104, w: 22, h: 86 },
            { x: 134, w: 18, h: 64 },
            { x: 158, w: 16, h: 76 },
          ].map((t, i) => (
            <g key={i}>
              <rect x={t.x} y={130 - t.h} width={t.w} height={t.h} rx={t.w / 2.4} fill={color}/>
              <ellipse cx={t.x + t.w / 2} cy={130 - t.h + 3} rx={t.w / 2.4} ry="3" fill="#021321" opacity="0.55"/>
            </g>
          ))}
        </g>
      );
    }
    if (shape === 'rope') {
      // Looping rope sponge
      return (
        <g>
          <path d="M60 130 C 60 90, 80 78, 100 90 C 120 102, 140 80, 150 100 C 160 120, 180 90, 196 130"
                stroke={color} strokeWidth="14" strokeLinecap="round" fill="none"/>
          <path d="M60 130 C 60 90, 80 78, 100 90 C 120 102, 140 80, 150 100 C 160 120, 180 90, 196 130"
                stroke="#FFFFFF" strokeWidth="2" opacity="0.25" fill="none"/>
        </g>
      );
    }
    if (shape === 'encrusting') {
      // Reef-coating colored patches
      return (
        <g opacity="0.85">
          <path d="M40 110 C 60 96, 90 100, 120 102 C 150 104, 180 96, 200 112 C 196 124, 60 130, 40 110 Z" fill={color}/>
          <path d="M60 96 C 90 86, 130 92, 168 90 C 196 88, 198 96, 196 102 C 160 100, 100 102, 70 100 Z" fill={color} opacity="0.7"/>
        </g>
      );
    }
    // 'barrel' — single drum-shaped sponge (default)
    return (
      <g>
        <path d="M82 130 L 82 70 Q 82 50 120 50 Q 158 50 158 70 L 158 130 Z" fill={color}/>
        <ellipse cx="120" cy="50" rx="38" ry="9" fill="#021321" opacity="0.55"/>
        <ellipse cx="120" cy="52" rx="34" ry="6" fill="#021321" opacity="0.35"/>
        {/* Surface texture lines */}
        <path d="M88 80 L 152 80 M 88 95 L 152 95 M 88 110 L 152 110"
              stroke="#021321" strokeWidth="0.8" opacity="0.25"/>
      </g>
    );
  };

  A.wreck = ({ color = '#6B7A88', style = {} }) => {
    // shape: 'small-hull' | 'large-hull' — different proportions
    const isLarge = style.shape === 'large-hull';
    return (
      <g>
        {/* Sloped hull, listing slightly */}
        <path d="M20 110 L 30 90 L 200 80 L 220 110 Z" fill={color}/>
        <path d="M30 90 L 200 80" stroke="#021321" strokeWidth="1" opacity="0.4"/>
        {/* Deck */}
        <path d="M30 90 L 200 80 L 196 78 L 30 88 Z" fill={color} opacity="0.7"/>
        {/* Cabin / superstructure */}
        <rect x={isLarge ? 80 : 100} y={isLarge ? 56 : 62} width={isLarge ? 60 : 40} height={isLarge ? 24 : 18} fill={color}/>
        {isLarge && <rect x="98" y="40" width="26" height="16" fill={color}/>}
        {/* Mast / funnel */}
        <rect x={isLarge ? 150 : 130} y={isLarge ? 30 : 42} width="3" height={isLarge ? 44 : 22} fill={color}/>
        <path d={isLarge ? "M150 32 L 162 36 L 150 38 Z" : "M130 44 L 140 47 L 130 49 Z"} fill={color}/>
        {/* Portholes */}
        {[[60,98],[80,96],[100,94],[140,90],[160,88],[180,86]].map(([x,y],i) => (
          <circle key={i} cx={x} cy={y} r="2" fill="#021321" opacity="0.6"/>
        ))}
        {/* Coral growth speckle */}
        <g opacity="0.55">
          <circle cx="50" cy="106" r="3" fill="#FF9DB0"/>
          <circle cx="170" cy="82" r="2.5" fill="#FF9DB0"/>
          <circle cx="120" cy="76" r="2" fill="#FFB37A"/>
          <circle cx="86" cy="92" r="2.5" fill="#63FFD2"/>
        </g>
      </g>
    );
  };

  A.aircraft = ({ color = '#8FA2B5', style = {} }) => {
    // Top-down silhouette of a propeller fighter / small aircraft.
    return (
      <g>
        {/* Fuselage */}
        <path d="M120 28 L 132 70 L 136 110 L 132 122 L 120 126 L 108 122 L 104 110 L 108 70 Z" fill={color}/>
        {/* Wings */}
        <path d="M24 86 L 116 76 L 116 96 L 24 100 Z" fill={color}/>
        <path d="M216 86 L 124 76 L 124 96 L 216 100 Z" fill={color}/>
        {/* Tail wings */}
        <path d="M76 116 L 116 110 L 116 122 L 76 124 Z" fill={color}/>
        <path d="M164 116 L 124 110 L 124 122 L 164 124 Z" fill={color}/>
        {/* Vertical stabilizer */}
        <path d="M118 124 L 116 134 L 124 134 L 122 124 Z" fill={color}/>
        {/* Cockpit canopy */}
        <ellipse cx="120" cy="70" rx="6" ry="14" fill="#021321" opacity="0.6"/>
        {/* Propeller hub + blade hint */}
        <circle cx="120" cy="30" r="3" fill="#021321" opacity="0.7"/>
        <path d="M120 30 L 120 14 M 120 30 L 120 46" stroke={color} strokeWidth="2" opacity="0.45"/>
        {/* Rust / coral specks for the sunken vibe */}
        <g opacity="0.55">
          <circle cx="80" cy="92" r="2.5" fill="#FF9DB0"/>
          <circle cx="160" cy="90" r="2" fill="#FFB37A"/>
          <circle cx="120" cy="100" r="2" fill="#63FFD2"/>
        </g>
      </g>
    );
  };

  // ── extras / fallback ───────────────────────────────────────────────
  A.mystery = ({ color = '#7A93AB' }) => (
    <g>
      <path d="M40 80 C 60 50, 180 50, 200 80 C 180 100, 60 100, 40 80 Z" fill={color} opacity="0.55"/>
      <text x="120" y="88" textAnchor="middle" fill="#021321" fontFamily="Space Grotesk" fontWeight="700" fontSize="40">?</text>
    </g>
  );

  // ── FAMILY TYPE STYLE DEFAULTS ──────────────────────────────────────
  const FAMILY_TYPE_STYLE = {
    shark:       { base: '#9DB6CC' },
    pelagic:     { base: '#5C7DB8' },
    ray:         { base: '#8B7BFF' },
    turtle:      { base: '#63FFD2' },
    reefFish:    { base: '#31D7FF' },
    macro:       { base: '#FF7A6B' },
    cephalopod:  { base: '#C97BFF' },
    crustacean:  { base: '#D7B46A' },
    mammal:      { base: '#9DC8E0' },
    invertebrate:{ base: '#FF7A6B' },
    // Non-creature sightings — same data pipeline, different vibe.
    coral:       { base: '#FF9DB0' }, // soft pink default; variants override
    sponge:      { base: '#FFB37A' }, // warm orange default
    wreck:       { base: '#6B7A88' }, // weathered steel grey
    aircraft:    { base: '#8FA2B5' }, // aluminium grey
  };

  // ── VARIANT SKINS ───────────────────────────────────────────────────
  // { archetype, color?, style? } — style is forwarded to the archetype
  const CREATURE_VARIANTS = {
    // hammerheads
    'scalloped-hammerhead': { archetype: 'hammerhead', color: '#D7B46A', style: { scallop: true, headW: 1.0 }},
    'great-hammerhead':     { archetype: 'hammerhead', color: '#B7C8D8', style: { scallop: false, headW: 1.18 }},
    'smooth-hammerhead':    { archetype: 'hammerhead', color: '#9FB3C8', style: { scallop: false, headW: 0.95 }},
    'hammerhead-school':    { archetype: 'hammerhead', color: '#D7B46A', style: { scallop: true, school: true }},
    // reef sharks
    'banded-houndshark':    { archetype: 'reefShark', color: '#7A8694', style: { bands: '#2C3946', tailTip: '#3A4754' }},
    'blacktip-reef-shark':  { archetype: 'reefShark', color: '#9DB6CC', style: { finTip: '#021321' }},
    'whitetip-reef-shark':  { archetype: 'reefShark', color: '#8AA0B8', style: { finTip: '#F6FCFF' }},
    'grey-reef-shark':      { archetype: 'reefShark', color: '#8A99AA', style: { tailTip: '#021321' }},
    'caribbean-reef-shark': { archetype: 'reefShark', color: '#8DB0C8', style: {}},
    'oceanic-whitetip':     { archetype: 'reefShark', color: '#7A92AB', style: { finTip: '#F6FCFF', belly: '#F6FCFF' }},
    'reef-shark':           { archetype: 'reefShark', color: '#82ECFF' },
    'tiger-shark':          { archetype: 'tigerShark', color: '#A8C2D8' },
    'zebra-shark':          { archetype: 'zebraShark', color: '#D7B46A' },
    'thresher-shark':       { archetype: 'thresherShark', color: '#7A92AB' },
    'japanese-bullhead-shark': { archetype: 'bullheadShark', color: '#B0A07A' },
    'nurse-shark':          { archetype: 'nurseShark', color: '#A8946C' },
    'tawny-nurse-shark':    { archetype: 'nurseShark', color: '#B7A074' },
    // whale shark
    'whale-shark':          { archetype: 'whaleShark', color: '#5A7DB8' },
    // rays
    'reef-manta':           { archetype: 'mantaRay', color: '#7B8BCC' },
    'giant-manta':          { archetype: 'mantaRay', color: '#5A6BBF', style: { giant: true, underspots: true }},
    'spotted-eagle-ray':    { archetype: 'eagleRay', color: '#5C7DB8' },
    'eagle-ray':            { archetype: 'eagleRay', color: '#5C7DB8' },
    'blue-spotted-ray':     { archetype: 'stingray', color: '#9F8B66', style: { bluespots: true }},
    'southern-stingray':    { archetype: 'stingray', color: '#B59E78', style: {}},
    'mediterranean-devil-ray':{ archetype: 'devilRay', color: '#5A7DB8' },
    // turtles
    'green-turtle':         { archetype: 'turtle', color: '#63FFD2', style: {}},
    'hawksbill-turtle':     { archetype: 'turtle', color: '#D7B46A', style: { beak: true, patternedShell: true }},
    'loggerhead-turtle':    { archetype: 'turtle', color: '#A88B55', style: { bigHead: true }},
    'leatherback-turtle':   { archetype: 'turtle', color: '#3E4A66', style: { leatherback: true }},
    // eels
    'giant-moray':          { archetype: 'moray', color: '#B7A074', style: { spots: true }},
    'dragon-moray':         { archetype: 'moray', color: '#FF7A6B', style: { dragon: true, spots: true }},
    'zebra-moray':          { archetype: 'moray', color: '#1B3A56', style: { bands: true }},
    'green-moray':          { archetype: 'moray', color: '#63FFD2', style: {}},
    'mediterranean-moray':  { archetype: 'moray', color: '#5C7DB8', style: { spots: true }},
    'ribbon-eel':           { archetype: 'ribbonEel', color: '#31D7FF' },
    'garden-eel':           { archetype: 'gardenEel', color: '#9BB6CC' },
    // pipefish & seahorse
    'ornate-ghost-pipefish':{ archetype: 'pipefish', color: '#FFD86B', style: { ornate: true }},
    'robust-ghost-pipefish':{ archetype: 'pipefish', color: '#A88B55', style: { ornate: true }},
    'banded-pipefish':      { archetype: 'pipefish', color: '#D7B46A', style: { banded: true }},
    'mediterranean-pipefish':{ archetype: 'pipefish', color: '#7A9476', style: {}},
    'longsnout-pipefish':   { archetype: 'pipefish', color: '#9DB6CC', style: { longsnout: true }},
    'pygmy-seahorse':       { archetype: 'seahorse', color: '#FF7A6B', style: { pygmy: true }},
    'thorny-seahorse':      { archetype: 'seahorse', color: '#D7B46A', style: { thorny: true }},
    'longsnout-seahorse':   { archetype: 'seahorse', color: '#D7B46A', style: { snoutLong: true }},
    'short-snouted-seahorse':{ archetype: 'seahorse', color: '#B59E78', style: {}},
    // reef fish
    'common-clownfish':     { archetype: 'clownfish', color: '#FFA86B', style: { anemone: true }},
    'maldives-anemonefish': { archetype: 'clownfish', color: '#FF8866', style: { anemone: true, anemoneColor: '#FFD86B' }},
    'red-sea-anemonefish':  { archetype: 'clownfish', color: '#E26B4B', style: { anemone: true, anemoneColor: '#A8462B' }},
    'queen-angelfish':      { archetype: 'angelfish', color: '#31D7FF', style: { queen: true, accent: '#FFD86B' }},
    'french-angelfish':     { archetype: 'angelfish', color: '#2A3A50', style: { accent: '#FFD86B' }},
    'butterflyfish':        { archetype: 'butterflyfish', color: '#FFD86B' },
    'stoplight-parrotfish': { archetype: 'parrotfish', color: '#5BCC7A', style: { stoplight: true, stripe: '#FF7A6B', stripe2: '#FFD86B', beak: '#FFD86B' }},
    'parrotfish':           { archetype: 'parrotfish', color: '#31D7FF', style: { beak: '#FFD86B' }},
    'napoleon-wrasse':      { archetype: 'wrasse', color: '#5BCC7A', style: { hump: true }},
    'rainbow-wrasse':       { archetype: 'wrasse', color: '#FFD86B', style: { rainbow: true, stripe: '#31D7FF' }},
    'ornate-wrasse':        { archetype: 'wrasse', color: '#5BCC7A', style: { rainbow: true, stripe: '#FF7A6B' }},
    'wrasse':               { archetype: 'wrasse', color: '#82ECFF', style: { hump: true }},
    'powder-blue-surgeonfish': { archetype: 'surgeonfish', color: '#5C9FE0', style: { tailColor: '#FFD86B' }},
    'sohal-surgeonfish':    { archetype: 'surgeonfish', color: '#7A92AB', style: { sohal: true, tailColor: '#31D7FF', scalpel: '#FF7A6B' }},
    'caribbean-blue-tang':  { archetype: 'tang', color: '#31D7FF' },
    'mediterranean-damselfish':{ archetype: 'damselfish', color: '#3E5A8C' },
    'dusky-grouper':        { archetype: 'grouper', color: '#5A4A3A', style: { dusky: true }},
    'giant-trevally':       { archetype: 'trevally', color: '#9DB6CC' },
    'tarpon':               { archetype: 'tarpon', color: '#C0D2E0' },
    'bluefin-tuna':         { archetype: 'tuna', color: '#3E5A8C' },
    'atlantic-bluefin-tuna':{ archetype: 'tuna', color: '#3E5A8C' },
    'great-barracuda':      { archetype: 'barracuda', color: '#9DB8CC' },
    'yellowmouth-barracuda':{ archetype: 'barracuda', color: '#A8C2D8' },
    'barracuda-school':     { archetype: 'barracuda', color: '#9DB8CC', style: { school: true }},
    'barracuda':            { archetype: 'barracuda', color: '#9DB8CC' },
    'lionfish':             { archetype: 'lionfish', color: '#A8462B' },
    'crocodilefish':        { archetype: 'crocodilefish', color: '#A89070' },
    // cephalopods
    'common-octopus':       { archetype: 'octopus', color: '#A8462B' },
    'caribbean-reef-octopus':{ archetype: 'octopus', color: '#7BCFAA' },
    'common-cuttlefish':    { archetype: 'cuttlefish', color: '#A89070' },
    'squid':                { archetype: 'squid', color: '#FF7A6B' },
    // macro
    'spanish-dancer':       { archetype: 'nudibranch', color: '#FF3A4B', style: { frilly: true, gills: true }},
    'chromodoris':          { archetype: 'nudibranch', color: '#C97BFF', style: { frilly: true, gills: true, mantleSpots: true }},
    'hypselodoris':         { archetype: 'nudibranch', color: '#5C9FE0', style: { gills: true, mantleSpots: true }},
    'flabellina':           { archetype: 'nudibranch', color: '#FF7A6B', style: { cerata: true, cerataColor: '#31D7FF' }},
    'nudibranch':           { archetype: 'nudibranch', color: '#FF7A6B', style: { frilly: true, gills: true }},
    'painted-frogfish':     { archetype: 'frogfish', color: '#FF7A6B', style: { lure: '#FFD86B' }},
    'giant-frogfish':       { archetype: 'frogfish', color: '#A89070', style: { lure: '#FFD86B' }},
    'hairy-frogfish':       { archetype: 'frogfish', color: '#D7B46A', style: { hairy: true, lure: '#FFD86B' }},
    'sargassum-fish':       { archetype: 'frogfish', color: '#5BCC7A', style: { sargassum: true }},
    'frogfish':             { archetype: 'frogfish', color: '#FF7A6B', style: { lure: '#FFD86B' }},
    // inverts
    'arrow-crab':           { archetype: 'crab', color: '#FFD86B', style: { arrow: true }},
    'spiny-lobster':        { archetype: 'lobster', color: '#A8462B', style: { spiny: true }},
    'shrimp':               { archetype: 'shrimp', color: '#FF7A6B' },
    'sea-star':             { archetype: 'seaStar', color: '#FF7A6B' },
    'jellyfish':            { archetype: 'jellyfish', color: '#82ECFF' },
    'giant-clam':           { archetype: 'giantClam', color: '#31D7FF' },
    'smooth-trunkfish':     { archetype: 'trunkfish', color: '#FFD86B' },
    // mammals
    'dolphin':              { archetype: 'dolphin', color: '#9DC8E0' },
    'whale':                { archetype: 'whale', color: '#8E9BB2' },
    'monk-seal':            { archetype: 'seal', color: '#7A8AA0' },
    'dugong':               { archetype: 'dugong', color: '#A89070' },
    // corals
    'pink-soft':            { archetype: 'coral', color: '#FFA1B8', style: { shape: 'soft' }},
    'brain':                { archetype: 'coral', color: '#D4B98F', style: { shape: 'brain' }},
    'fan':                  { archetype: 'coral', color: '#FF7A6B', style: { shape: 'fan' }},
    'staghorn':             { archetype: 'coral', color: '#F0CE9C', style: { shape: 'staghorn' }},
    'black':                { archetype: 'coral', color: '#2E3D4D', style: { shape: 'black' }},
    'table':                { archetype: 'coral', color: '#D2A37A', style: { shape: 'table' }},
    // sponges
    'barrel':               { archetype: 'sponge', color: '#C77860', style: { shape: 'barrel' }},
    'tube':                 { archetype: 'sponge', color: '#9D6BAF', style: { shape: 'tube' }},
    'rope':                 { archetype: 'sponge', color: '#FFB37A', style: { shape: 'rope' }},
    'encrusting':           { archetype: 'sponge', color: '#FF6B8E', style: { shape: 'encrusting' }},
    // wrecks
    'small-hull':           { archetype: 'wreck', color: '#6B7A88', style: { shape: 'small-hull' }},
    'large-hull':           { archetype: 'wreck', color: '#5C6B7A', style: { shape: 'large-hull' }},
    // aircraft
    'fighter':              { archetype: 'aircraft', color: '#8FA2B5', style: { shape: 'fighter' }},
    // fallback
    'mystery':              { archetype: 'mystery', color: '#7A93AB' },
  };

  // ── REGISTRY ────────────────────────────────────────────────────────
  // creatureId → { name, sci, archetype-via-variant, family, rarity, regions, habitats, sizeClass, flavorText, achievementName? }
  const R = (name, sci, family, rarity, regions, flavor, habitats=['reef'], sizeClass='M', ach=null) =>
    ({ commonName: name, scientificName: sci, familyType: family, rarity, regions, habitats, sizeClass, flavorText: flavor, achievementName: ach });

  const CREATURE_REGISTRY = {
    // ── Japan ─────────────────────────────────────────────────────────
    'scalloped-hammerhead': R('Scalloped Hammerhead','Sphyrna lewini','shark','legendary',['japan','red-sea','indian-ocean'],'Schools by day, hunts at night. Mikomoto signature.',['pelagic','seamount'],'L','Mikomoto Mover'),
    'hammerhead-school':    R('Hammerhead School','Sphyrna lewini','shark','mythic',['japan','red-sea'],'Twenty pairs of eyes. One slow-motion ballet.',['pelagic'],'XL','Wall of Eyes'),
    'great-hammerhead':     R('Great Hammerhead','Sphyrna mokarran','shark','legendary',['red-sea','caribbean'],'Bigger, blockier, lonelier.',['pelagic'],'XL'),
    'smooth-hammerhead':    R('Smooth Hammerhead','Sphyrna zygaena','shark','epic',['japan'],'No notches. Just a curve and conviction.',['pelagic'],'L'),
    'japanese-bullhead-shark': R('Japanese Bullhead Shark','Heterodontus japonicus','shark','rare',['japan'],'Reef bottoms. Looks like a beginner sketch of a shark.',['reef'],'S'),
    'thresher-shark':       R('Thresher Shark','Alopias pelagicus','shark','epic',['japan','indian-ocean'],'Slaps sardines stupid with its tail.',['pelagic'],'L'),
    'whale-shark':          R('Whale Shark','Rhincodon typus','shark','mythic',['japan','indian-ocean','red-sea','caribbean'],'Polka dots the size of dinner plates.',['pelagic'],'XL','Polka Dots'),
    'reef-manta':           R('Reef Manta','Mobula alfredi','ray','epic',['japan','indian-ocean','red-sea'],'Mantas don\'t flap. They glide.',['reef','pelagic'],'L'),
    'green-turtle':         R('Green Turtle','Chelonia mydas','turtle','uncommon',['japan','indian-ocean','red-sea','caribbean'],'Looks unbothered. Probably is.',['reef'],'L'),
    'hawksbill-turtle':     R('Hawksbill Turtle','Eretmochelys imbricata','turtle','rare',['japan','indian-ocean','red-sea','caribbean'],'Hooked beak. Mosaic shell.',['reef'],'M'),
    'dragon-moray':         R('Dragon Moray','Enchelycore pardalis','reefFish','legendary',['japan'],'Horns, fangs, and a permanent scowl.',['reef'],'M','Here Be Dragons'),
    'zebra-moray':          R('Zebra Moray','Gymnomuraena zebra','reefFish','rare',['japan','indian-ocean'],'Black-and-white pyjamas, cracks crabs for breakfast.',['reef'],'M'),
    'giant-moray':          R('Giant Moray','Gymnothorax javanicus','reefFish','rare',['japan','indian-ocean','red-sea'],'The classic moray. Mouth open, asking nothing.',['reef'],'L'),
    'ribbon-eel':           R('Ribbon Eel','Rhinomuraena quaesita','reefFish','epic',['japan','indian-ocean'],'Switches sex and colour through life. Cool flex.',['reef'],'S'),
    'garden-eel':           R('Garden Eel','Heteroconger hassi','reefFish','uncommon',['japan','indian-ocean','red-sea'],'Sand lawns of nervous noodles.',['sand'],'S'),
    'ornate-ghost-pipefish':R('Ornate Ghost Pipefish','Solenostomus paradoxus','macro','epic',['japan','indian-ocean','red-sea'],'A leaf with a face. Macro royalty.',['reef'],'XS','Macro Eye'),
    'robust-ghost-pipefish':R('Robust Ghost Pipefish','Solenostomus cyanopterus','macro','rare',['japan','indian-ocean'],'Same costume, sturdier build.',['reef'],'XS'),
    'pygmy-seahorse':       R('Pygmy Seahorse','Hippocampus bargibanti','macro','epic',['japan','indian-ocean'],'2 cm of pure smug.',['reef'],'XS'),
    'painted-frogfish':     R('Painted Frogfish','Antennarius pictus','macro','rare',['japan','indian-ocean'],'Sits. Wiggles lure. Eats things its own size.',['reef'],'S'),
    'nudibranch':           R('Nudibranch','Various','macro','uncommon',['japan','indian-ocean','red-sea','mediterranean'],'A sea slug that dresses better than you.',['reef'],'XS'),
    'common-octopus':       R('Common Octopus','Octopus vulgaris','cephalopod','rare',['japan','mediterranean','caribbean'],'Three hearts, nine brains, zero shame.',['reef'],'M'),
    'giant-trevally':       R('Giant Trevally','Caranx ignobilis','pelagic','rare',['japan','indian-ocean','red-sea'],'A torpedo with attitude.',['pelagic'],'L'),
    'barracuda-school':     R('Barracuda School','Sphyraena qenie','pelagic','epic',['japan','indian-ocean','red-sea'],'A wall of teeth doing a slow circle.',['pelagic'],'L','Tornado'),
    'bluefin-tuna':         R('Bluefin Tuna','Thunnus orientalis','pelagic','legendary',['japan','mediterranean'],'600 kg of muscle that never stops moving.',['pelagic'],'XL'),

    // ── Indian Ocean ──────────────────────────────────────────────────
    'grey-reef-shark':      R('Grey Reef Shark','Carcharhinus amblyrhynchos','shark','rare',['indian-ocean','red-sea'],'The reef\'s neighbourhood patrol.',['reef'],'M'),
    'blacktip-reef-shark':  R('Blacktip Reef Shark','Carcharhinus melanopterus','shark','uncommon',['indian-ocean','red-sea','caribbean'],'Shy kid with painted fingertips.',['reef'],'M'),
    'whitetip-reef-shark':  R('Whitetip Reef Shark','Triaenodon obesus','shark','uncommon',['indian-ocean','red-sea','caribbean'],'Naps in caves all afternoon.',['reef'],'M'),
    'zebra-shark':          R('Zebra Shark','Stegostoma fasciatum','shark','rare',['indian-ocean'],'Stripy as a pup, spotted as an adult.',['reef'],'L'),
    'tawny-nurse-shark':    R('Tawny Nurse Shark','Nebrius ferrugineus','shark','uncommon',['indian-ocean','red-sea'],'Big, brown, mostly snoozing.',['reef'],'L'),
    'napoleon-wrasse':      R('Napoleon Wrasse','Cheilinus undulatus','reefFish','epic',['indian-ocean','red-sea'],'A reef sage with a giant forehead.',['reef'],'L','Forehead Friend'),
    'maldives-anemonefish': R('Maldives Anemonefish','Amphiprion nigripes','reefFish','uncommon',['indian-ocean'],'Same vibes as Nemo. Different passport.',['reef'],'XS'),
    'powder-blue-surgeonfish': R('Powder Blue Surgeonfish','Acanthurus leucosternon','reefFish','rare',['indian-ocean'],'A pop of impossible blue.',['reef'],'S'),
    'spanish-dancer':       R('Spanish Dancer','Hexabranchus sanguineus','macro','epic',['indian-ocean','red-sea'],'When it swims, the reef stops talking.',['reef'],'M','Encore'),
    'dugong':               R('Dugong','Dugong dugon','mammal','legendary',['indian-ocean','red-sea'],'A sea cow with a sad-looking face. Heart of gold.',['seagrass'],'XL','Sea Cow'),
    'giant-manta':          R('Giant Manta','Mobula birostris','ray','mythic',['indian-ocean','japan'],'Up to 7 metres wing-to-wing. A flying carpet.',['pelagic'],'XL'),

    // ── Caribbean ─────────────────────────────────────────────────────
    'caribbean-reef-shark': R('Caribbean Reef Shark','Carcharhinus perezi','shark','rare',['caribbean'],'The signature shark of the Bahamas wall.',['reef'],'M'),
    'nurse-shark':          R('Nurse Shark','Ginglymostoma cirratum','shark','uncommon',['caribbean'],'Sandy bottom, sandy nap.',['reef'],'M'),
    'tiger-shark':          R('Tiger Shark','Galeocerdo cuvier','shark','legendary',['caribbean','indian-ocean'],'Eats everything. Sometimes a licence plate.',['pelagic'],'XL','Apex'),
    'spotted-eagle-ray':    R('Spotted Eagle Ray','Aetobatus narinari','ray','rare',['caribbean','red-sea'],'White polka dots on midnight wings.',['pelagic'],'L'),
    'southern-stingray':    R('Southern Stingray','Hypanus americanus','ray','uncommon',['caribbean'],'Buries itself in sand and waits.',['sand'],'M'),
    'loggerhead-turtle':    R('Loggerhead Turtle','Caretta caretta','turtle','rare',['caribbean','mediterranean'],'A big head for cracking conch shells.',['reef'],'L'),
    'queen-angelfish':      R('Queen Angelfish','Holacanthus ciliaris','reefFish','rare',['caribbean'],'Wears a crown of yellow.',['reef'],'S'),
    'french-angelfish':     R('French Angelfish','Pomacanthus paru','reefFish','uncommon',['caribbean'],'Dark with gold-scale stippling.',['reef'],'S'),
    'stoplight-parrotfish': R('Stoplight Parrotfish','Sparisoma viride','reefFish','uncommon',['caribbean'],'Crunches coral. Poops sand.',['reef'],'M'),
    'caribbean-blue-tang':  R('Caribbean Blue Tang','Acanthurus coeruleus','reefFish','uncommon',['caribbean'],'Forgetful but vibrant.',['reef'],'S'),
    'tarpon':               R('Tarpon','Megalops atlanticus','pelagic','rare',['caribbean'],'Silver king of the mangroves.',['pelagic'],'L'),
    'great-barracuda':      R('Great Barracuda','Sphyraena barracuda','pelagic','rare',['caribbean','red-sea'],'Watches everything. Forgives nothing.',['reef','pelagic'],'L'),
    'green-moray':          R('Green Moray','Gymnothorax funebris','reefFish','rare',['caribbean'],'A green ghost in coral.',['reef'],'L'),
    'caribbean-reef-octopus': R('Caribbean Reef Octopus','Octopus briareus','cephalopod','rare',['caribbean'],'Changes colour mid-thought.',['reef'],'M'),
    'longsnout-seahorse':   R('Longsnout Seahorse','Hippocampus reidi','macro','rare',['caribbean'],'A long-nosed romantic.',['reef'],'XS'),
    'banded-pipefish':      R('Banded Pipefish','Doryrhamphus dactyliophorus','macro','uncommon',['caribbean','indian-ocean'],'A pencil sketch of a fish.',['reef'],'XS'),
    'arrow-crab':           R('Arrow Crab','Stenorhynchus seticornis','crustacean','uncommon',['caribbean'],'Pointy. Spidery. Slightly judgmental.',['reef'],'XS'),
    'smooth-trunkfish':     R('Smooth Trunkfish','Lactophrys triqueter','reefFish','uncommon',['caribbean'],'Boxy little tank of yellow dots.',['reef'],'S'),

    // ── Red Sea ───────────────────────────────────────────────────────
    'oceanic-whitetip':     R('Oceanic Whitetip','Carcharhinus longimanus','shark','epic',['red-sea'],'The blue-water shark of legend.',['pelagic'],'L','Brothers'),
    'red-sea-anemonefish':  R('Red Sea Anemonefish','Amphiprion bicinctus','reefFish','uncommon',['red-sea'],'Endemic. Two stripes. One attitude.',['reef'],'XS'),
    'sohal-surgeonfish':    R('Sohal Surgeonfish','Acanthurus sohal','reefFish','rare',['red-sea'],'Owns the upper reef. Will tell you so.',['reef'],'S'),
    'lionfish':             R('Lionfish','Pterois volitans','reefFish','rare',['red-sea','caribbean','indian-ocean'],'Beautiful. Do not touch.',['reef'],'S'),
    'crocodilefish':        R('Crocodilefish','Papilloculiceps longiceps','reefFish','rare',['red-sea'],'Long flat face on the sand. Disappears.',['sand'],'M'),
    'blue-spotted-ray':     R('Blue-spotted Ribbontail Ray','Taeniura lymma','ray','rare',['red-sea','indian-ocean'],'Pocket-sized neon.',['reef'],'S'),
    'giant-clam':           R('Giant Clam','Tridacna gigas','invertebrate','uncommon',['red-sea','indian-ocean'],'Half a metre of psychedelic mantle.',['reef'],'M'),

    // ── Mediterranean ─────────────────────────────────────────────────
    'dusky-grouper':        R('Dusky Grouper','Epinephelus marginatus','reefFish','epic',['mediterranean'],'The grandad of every Med wreck.',['wreck','reef'],'L'),
    'mediterranean-moray':  R('Mediterranean Moray','Muraena helena','reefFish','rare',['mediterranean'],'Black-and-white speckled, ageless.',['reef'],'M'),
    'common-cuttlefish':    R('Common Cuttlefish','Sepia officinalis','cephalopod','rare',['mediterranean'],'Disco hypnotist with W-shaped pupils.',['reef'],'S'),
    'yellowmouth-barracuda':R('Yellowmouth Barracuda','Sphyraena viridensis','pelagic','rare',['mediterranean'],'The Med\'s school predator.',['pelagic'],'L'),
    'rainbow-wrasse':       R('Rainbow Wrasse','Coris julis','reefFish','common',['mediterranean'],'Tiny flicker of pink and blue.',['reef'],'XS'),
    'ornate-wrasse':        R('Ornate Wrasse','Thalassoma pavo','reefFish','uncommon',['mediterranean'],'Bright stripes on the rocky reef.',['reef'],'XS'),
    'mediterranean-damselfish': R('Mediterranean Damselfish','Chromis chromis','reefFish','common',['mediterranean'],'Clouds of little blue-black sparks.',['reef'],'XS'),
    'mediterranean-devil-ray':R('Mediterranean Devil Ray','Mobula mobular','ray','epic',['mediterranean'],'Manta\'s smaller, rarer cousin.',['pelagic'],'L'),
    'short-snouted-seahorse':R('Short-snouted Seahorse','Hippocampus hippocampus','macro','rare',['mediterranean'],'Hides in seagrass. Hard to spot.',['seagrass'],'XS'),
    'mediterranean-pipefish':R('Mediterranean Pipefish','Syngnathus typhle','macro','uncommon',['mediterranean'],'A blade of grass with a face.',['seagrass'],'XS'),
    'atlantic-bluefin-tuna':R('Atlantic Bluefin Tuna','Thunnus thynnus','pelagic','epic',['mediterranean'],'Migrates through the Strait of Messina.',['pelagic'],'XL'),
    'spiny-lobster':        R('Spiny Lobster','Palinurus elephas','crustacean','rare',['mediterranean','caribbean'],'No claws. All antennae.',['reef'],'S'),
    'monk-seal':            R('Mediterranean Monk Seal','Monachus monachus','mammal','mythic',['mediterranean'],'Fewer than a thousand left. Sees you first.',['cave'],'L','Last of the Last'),

    // ── extras / utility ──────────────────────────────────────────────
    'mystery':              R('Unidentified','—','reefFish','common',[],'Logged but not classified.',['reef'],'M'),
  };

  // ── RARITY / FRAME ──────────────────────────────────────────────────
  const RARITY_COLOR = {
    common: '#B7CCDE', uncommon: '#63FFD2', rare: '#31D7FF',
    epic: '#8B7BFF', legendary: '#D7B46A', mythic: '#82ECFF',
  };

  // Back-compat: legacy spriteKey names → creatureId
  const LEGACY_SPRITE_TO_CREATURE = {
    'hammerhead':   'scalloped-hammerhead',
    'whale-shark':  'whale-shark',
    'reef-shark':   'caribbean-reef-shark',
    'tiger-shark':  'tiger-shark',
    'manta':        'reef-manta',
    'eagle-ray':    'spotted-eagle-ray',
    'turtle':       'green-turtle',
    'moray':        'giant-moray',
    'nudibranch':   'spanish-dancer',
    'clownfish':    'common-clownfish',
    'octopus':      'common-octopus',
    'barracuda':    'great-barracuda',
    'wrasse':       'napoleon-wrasse',
    'mystery':      'mystery',
  };

  function resolveCreature(creatureId, spriteKey, id) {
    const key = creatureId || LEGACY_SPRITE_TO_CREATURE[spriteKey || id] || (spriteKey || id) || 'mystery';
    const variant = CREATURE_VARIANTS[key] || CREATURE_VARIANTS[LEGACY_SPRITE_TO_CREATURE[key]] || CREATURE_VARIANTS.mystery;
    const meta = CREATURE_REGISTRY[key] || CREATURE_REGISTRY.mystery;
    const Archetype = A[variant.archetype] || A.mystery;
    return { key, variant, meta, Archetype };
  }

  // ── frame component ─────────────────────────────────────────────────
  function CreatureSpriteFrame({
    creatureId, spriteKey, id,
    rarity, locked = false, size = 140,
    color, className, glow = true, animate = true, bg = false, frame = false,
  }) {
    const { variant, meta, Archetype } = resolveCreature(creatureId, spriteKey, id);
    const effRarity = rarity || meta.rarity || 'common';
    const frameC = RARITY_COLOR[effRarity] || '#82ECFF';
    const drawColor = locked ? '#1B3A56' : (color || variant.color || FAMILY_TYPE_STYLE[meta.familyType]?.base || frameC);

    const filterCss = locked
      ? 'none'
      : (glow ? `drop-shadow(0 0 8px ${frameC}66) drop-shadow(0 4px 14px ${frameC}44)` : 'none');

    const h = size * 140 / 240;
    // Only clip overflow when a visible frame/bg defines a rectangle. Without
    // one, the drop-shadow glow should be free to extend past the SVG bounds
    // — clipping it produces visible rectangular edges around the silhouette.
    const needsClip = bg || frame;
    return (
      <div className={className} style={{
        position: 'relative', boxSizing: 'border-box',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: size, height: h,
        ...(needsClip ? { overflow: 'hidden' } : {}),
        ...(bg ? { background: `radial-gradient(60% 60% at 50% 50%, ${frameC}22, transparent 70%)`, borderRadius: 16 } : {}),
        ...(frame ? {
          border: `1px solid ${frameC}`,
          boxShadow: locked ? 'none' : `0 0 18px ${frameC}55, inset 0 0 12px ${frameC}22`,
          borderRadius: 16, padding: 4,
        } : {}),
      }}>
        <svg viewBox="0 0 240 140" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"
             style={{ display: 'block', flex: '0 1 auto', maxWidth: '100%', maxHeight: '100%',
                      filter: filterCss, opacity: locked ? 0.7 : 1,
                      animation: animate && !locked ? 'dd-float 4.2s ease-in-out infinite' : 'none' }}>
          <g className={locked ? 'dd-locked-silhouette' : ''}>
            <Archetype color={drawColor} style={variant.style || {}}/>
          </g>
        </svg>
        {locked && (
          <div style={{
            position: 'absolute', right: 6, bottom: 4,
            width: 18, height: 18, borderRadius: 9,
            background: 'rgba(0,0,0,0.55)', border: '1px solid rgba(130,236,255,0.3)',
            color: '#82ECFF', fontSize: 11, fontWeight: 800,
            display: 'grid', placeItems: 'center', fontFamily: 'Space Grotesk',
          }}>?</div>
        )}
      </div>
    );
  }

  function CrSilhouette({ id, size = 120, color, glow = true }) {
    return <CreatureSpriteFrame spriteKey={id} size={size} glow={glow} animate={false} color={color}/>;
  }

  // animation + locked silhouette CSS
  if (!document.getElementById('dd-creature-anim')) {
    const s = document.createElement('style');
    s.id = 'dd-creature-anim';
    s.textContent = `
      @keyframes dd-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
      .dd-locked-silhouette * { fill: #1B3A56 !important; stroke: #1B3A56 !important; }
      .dd-locked-silhouette text { fill: #2A4C68 !important; }
    `;
    document.head.appendChild(s);
  }

  Object.assign(window, {
    CreatureSpriteFrame, CrSilhouette,
    CREATURE_REGISTRY, CREATURE_VARIANTS, FAMILY_TYPE_STYLE, RARITY_COLOR,
  });
})();