// =============================================================================
// CARD ART · PIXEL ENT — 10 archetypes + 1 mythic
// =============================================================================

const PIXEL_ART = {

  // ── STARBLAST — faceted gem with radiating beams ─────────────────────
  gem: (c) => <g>
    {/* Beam halo */}
    {[0, 45, 90, 135, 180, 225, 270, 315].map(a => {
      const x = 50 + 44 * Math.cos(a * Math.PI/180);
      const y = 50 + 44 * Math.sin(a * Math.PI/180);
      return <path key={a} d={`M 50 50 L ${x} ${y}`} strokeDasharray="2 2" strokeOpacity="0.4"/>;
    })}
    {/* Main faceted gem */}
    <path d="M 50 14 L 80 35 L 65 80 L 35 80 L 20 35 Z" fill={c} fillOpacity="0.25"/>
    {/* Inner facets */}
    <path d="M 20 35 L 50 50 L 80 35"/>
    <path d="M 50 50 L 35 80 M 50 50 L 65 80"/>
    <path d="M 35 22 L 50 14 L 65 22"/>
    <path d="M 35 22 L 50 50 L 65 22"/>
    {/* Specular highlight */}
    <path d="M 30 25 L 26 33" strokeOpacity="0.7"/>
    <path d="M 70 25 L 74 33" strokeOpacity="0.7"/>
    {/* Center core */}
    <circle cx="50" cy="50" r="4" fill={c}/>
    {/* Small surrounding gems */}
    <path d="M 12 60 L 16 58 L 14 64 Z" fill={c} fillOpacity="0.5"/>
    <path d="M 86 60 L 90 58 L 88 64 Z" fill={c} fillOpacity="0.5"/>
  </g>,

  // ── GONZO'S JOURNEY — conquistador + machete + ruins ─────────────────
  gonzo: (c) => <g>
    {/* Ancient ruin stones in background */}
    <path d="M 0 78 L 14 70 L 14 88 L 0 88 Z" fill={c} fillOpacity="0.1"/>
    <path d="M 86 78 L 100 70 L 100 88 L 86 88 Z" fill={c} fillOpacity="0.1"/>
    {/* Helmet (morion shape) */}
    <path d="M 30 56 Q 28 26 50 22 Q 72 26 70 56 L 70 60 L 30 60 Z" fill={c} fillOpacity="0.25"/>
    {/* Helmet crest */}
    <path d="M 50 22 L 50 10 Q 56 14 60 22"/>
    {/* Helmet brim */}
    <path d="M 26 56 L 74 56" strokeWidth="1.8"/>
    {/* Face */}
    <circle cx="42" cy="48" r="2" fill={c}/>
    <circle cx="58" cy="48" r="2" fill={c}/>
    <path d="M 44 56 L 50 60 L 56 56"/>
    {/* Beard / chinstrap */}
    <path d="M 36 62 L 50 80 L 64 62" fill={c} fillOpacity="0.15"/>
    {/* Machete */}
    <path d="M 22 76 L 38 60 L 42 64 L 26 80 Z" fill={c} fillOpacity="0.3"/>
    <path d="M 18 84 L 26 76" strokeWidth="2"/>
    {/* Treasure dots */}
    <circle cx="78" cy="84" r="2" fill={c}/>
    <circle cx="84" cy="80" r="1.5" fill={c}/>
    <circle cx="90" cy="86" r="2" fill={c} fillOpacity="0.6"/>
  </g>,

  // ── DEAD MAN'S DUEL — cowboy skull + crossed pistols ─────────────────
  skull: (c) => <g>
    {/* Cowboy hat */}
    <path d="M 22 32 L 78 32 L 84 38 L 16 38 Z" fill={c} fillOpacity="0.2"/>
    <path d="M 32 32 Q 32 18 50 18 Q 68 18 68 32" fill={c} fillOpacity="0.2"/>
    {/* Hat band */}
    <path d="M 32 30 L 68 30" strokeWidth="1.8"/>
    {/* Skull */}
    <path d="M 28 44 Q 28 38 50 38 Q 72 38 72 44 L 72 60 L 62 60 L 60 72 L 40 72 L 38 60 L 28 60 Z" fill={c} fillOpacity="0.15"/>
    {/* Eye sockets */}
    <circle cx="40" cy="50" r="5" fill={c} fillOpacity="0.7"/>
    <circle cx="60" cy="50" r="5" fill={c} fillOpacity="0.7"/>
    {/* Star eyes */}
    <path d="M 40 47 L 41 50 L 44 50 L 41 52 L 42 55 L 40 53 L 38 55 L 39 52 L 36 50 L 39 50 Z" fill={c}/>
    {/* Nose */}
    <path d="M 47 58 L 50 54 L 53 58 Z" fill={c}/>
    {/* Teeth */}
    <path d="M 42 64 L 42 70 M 46 64 L 46 70 M 50 64 L 50 70 M 54 64 L 54 70 M 58 64 L 58 70" strokeWidth="1.2"/>
    {/* Crossed pistols */}
    <path d="M 14 76 L 32 88 L 30 92 L 12 80 Z" fill={c} fillOpacity="0.25"/>
    <path d="M 86 76 L 68 88 L 70 92 L 88 80 Z" fill={c} fillOpacity="0.25"/>
  </g>,

  // ── DIVINE LUCK — pegasus + halo ─────────────────────────────────────
  pegasus: (c) => <g>
    {/* Halo */}
    <ellipse cx="50" cy="34" rx="22" ry="6" strokeOpacity="0.6"/>
    {/* Pegasus body */}
    <path d="M 20 60 Q 25 50 35 48 L 50 44 Q 60 44 65 50 Q 72 52 78 60 L 75 70 L 30 70 Z" fill={c} fillOpacity="0.2"/>
    {/* Wings spread */}
    <path d="M 30 50 L 22 30 L 36 38 L 30 48 Z" fill={c} fillOpacity="0.25"/>
    <path d="M 60 50 L 76 30 L 64 38 L 64 50 Z" fill={c} fillOpacity="0.25"/>
    <path d="M 22 30 L 32 42 M 76 30 L 66 42" strokeOpacity="0.5"/>
    {/* Head */}
    <circle cx="68" cy="50" r="6" fill={c} fillOpacity="0.3"/>
    <circle cx="70" cy="50" r="1.5" fill={c}/>
    <path d="M 68 50 L 78 48" />
    {/* Mane */}
    <path d="M 60 46 Q 64 42 68 46 M 64 44 Q 66 38 70 44" strokeOpacity="0.6"/>
    {/* Legs */}
    <path d="M 32 70 L 30 86 M 44 70 L 42 86 M 60 70 L 62 86 M 72 70 L 74 86"/>
    {/* Tail */}
    <path d="M 22 64 Q 14 60 12 70 Q 16 78 24 72"/>
    {/* Stars */}
    <path d="M 14 22 L 14 26 M 12 24 L 16 24" strokeOpacity="0.6"/>
    <path d="M 84 14 L 84 18 M 82 16 L 86 16" strokeOpacity="0.6"/>
  </g>,

  // ── MEGA RICHES — top hat + champagne + monocle ──────────────────────
  champagne: (c) => <g>
    {/* Top hat */}
    <rect x="22" y="14" width="22" height="32" fill={c} fillOpacity="0.25"/>
    <rect x="16" y="44" width="34" height="6" fill={c} fillOpacity="0.2"/>
    {/* Hat band */}
    <path d="M 22 38 L 44 38" strokeWidth="1.8"/>
    {/* Monocle */}
    <circle cx="62" cy="32" r="9" fill="none" strokeWidth="2"/>
    <path d="M 62 41 L 60 56" strokeOpacity="0.5"/>
    {/* Eye in monocle */}
    <circle cx="62" cy="32" r="2" fill={c}/>
    {/* Champagne bottle */}
    <rect x="64" y="50" width="14" height="28" fill={c} fillOpacity="0.2"/>
    <rect x="66" y="44" width="10" height="8" fill={c} fillOpacity="0.4"/>
    <rect x="68" y="40" width="6" height="4"/>
    {/* Bubbles */}
    <circle cx="71" cy="36" r="1.5" fill={c}/>
    <circle cx="78" cy="32" r="1" fill={c} fillOpacity="0.6"/>
    <circle cx="64" cy="30" r="1" fill={c} fillOpacity="0.4"/>
    {/* Label */}
    <rect x="66" y="58" width="10" height="10"/>
    <path d="M 68 61 L 74 61 M 68 64 L 74 64"/>
    {/* Coins at bottom */}
    <circle cx="24" cy="82" r="6" fill={c} fillOpacity="0.35"/>
    <circle cx="34" cy="86" r="5" fill={c} fillOpacity="0.25"/>
    <circle cx="44" cy="82" r="4" fill={c} fillOpacity="0.2"/>
    <text x="24" y="86" textAnchor="middle" fontSize="6" fontWeight="700" fill={c} stroke="none" fontFamily="monospace">$</text>
  </g>,

  // ── TWIN REELS — two linked slot reels ───────────────────────────────
  twin: (c) => <g>
    {/* Reel housings */}
    <rect x="12" y="22" width="32" height="56" fill={c} fillOpacity="0.1"/>
    <rect x="56" y="22" width="32" height="56" fill={c} fillOpacity="0.1"/>
    {/* Link */}
    <rect x="38" y="46" width="24" height="8" fill={c} fillOpacity="0.4"/>
    <path d="M 36 50 L 64 50" strokeWidth="2"/>
    {/* Reel A symbols */}
    <circle cx="28" cy="34" r="4" fill={c} fillOpacity="0.5"/>
    <path d="M 24 60 L 28 56 L 32 60 L 32 66 L 28 70 L 24 66 Z" fill={c} fillOpacity="0.4"/>
    {/* Cherries top of A */}
    <path d="M 22 30 L 28 30" strokeOpacity="0.5"/>
    {/* Reel B symbols */}
    <path d="M 68 28 L 72 24 L 76 28 L 76 36 L 72 40 L 68 36 Z" fill={c} fillOpacity="0.5"/>
    <circle cx="72" cy="62" r="5" fill={c} fillOpacity="0.5"/>
    <path d="M 72 57 L 72 67 M 67 62 L 77 62"/>
    {/* Lever */}
    <circle cx="50" cy="16" r="3" fill={c}/>
    <path d="M 50 16 L 50 22"/>
    {/* Slot frame */}
    <rect x="8" y="18" width="84" height="64" strokeOpacity="0.5"/>
  </g>,

  // ── JACK'S BEANSTALK — giant beanstalk ───────────────────────────────
  beanstalk: (c) => <g>
    {/* Clouds */}
    <path d="M 8 22 Q 16 16 24 22 Q 28 22 26 28 Q 18 30 12 26 Z" fill={c} fillOpacity="0.15"/>
    <path d="M 72 18 Q 82 12 92 18 Q 94 24 88 28 Q 78 28 72 24 Z" fill={c} fillOpacity="0.15"/>
    {/* Vine - main */}
    <path d="M 50 92 Q 56 78 50 64 Q 44 50 50 36 Q 56 22 50 8" strokeWidth="2"/>
    {/* Leaves */}
    <path d="M 50 80 Q 32 76 28 62 L 36 64 Q 40 72 50 76 Z" fill={c} fillOpacity="0.25"/>
    <path d="M 50 62 Q 68 60 72 46 L 64 50 Q 60 56 50 60 Z" fill={c} fillOpacity="0.25"/>
    <path d="M 50 44 Q 32 42 26 28 L 36 32 Q 42 38 50 42 Z" fill={c} fillOpacity="0.25"/>
    <path d="M 50 28 Q 66 26 74 14 L 64 18 Q 58 24 50 26 Z" fill={c} fillOpacity="0.25"/>
    {/* Leaf veins */}
    <path d="M 36 64 L 50 76 M 64 50 L 50 60 M 36 32 L 50 42 M 64 18 L 50 26" strokeOpacity="0.5"/>
    {/* Beans */}
    <ellipse cx="42" cy="86" rx="3" ry="2" fill={c} fillOpacity="0.5"/>
    <ellipse cx="58" cy="14" rx="3" ry="2" fill={c} fillOpacity="0.5"/>
    {/* Castle at top */}
    <path d="M 44 8 L 44 4 L 48 4 L 48 6 L 52 6 L 52 4 L 56 4 L 56 8" strokeWidth="1.2"/>
  </g>,

  // ── PIGGY GOLD — pig with coin ───────────────────────────────────────
  pig: (c) => <g>
    {/* Coin pile bg */}
    <ellipse cx="50" cy="86" rx="38" ry="4" fill={c} fillOpacity="0.15"/>
    {/* Body */}
    <ellipse cx="50" cy="60" rx="32" ry="22" fill={c} fillOpacity="0.18"/>
    {/* Snout */}
    <ellipse cx="74" cy="58" rx="8" ry="6" fill={c} fillOpacity="0.3"/>
    <circle cx="71" cy="57" r="1" fill={c}/>
    <circle cx="77" cy="57" r="1" fill={c}/>
    {/* Ears */}
    <path d="M 30 42 L 28 30 L 40 38 Z" fill={c} fillOpacity="0.3"/>
    <path d="M 56 38 L 60 26 L 66 36 Z" fill={c} fillOpacity="0.3"/>
    {/* Eye */}
    <circle cx="48" cy="54" r="2.5" fill={c}/>
    {/* Coin slot on back */}
    <rect x="36" y="42" width="14" height="3" fill={c}/>
    {/* Legs */}
    <rect x="32" y="76" width="4" height="10" fill={c} fillOpacity="0.4"/>
    <rect x="44" y="78" width="4" height="10" fill={c} fillOpacity="0.4"/>
    <rect x="58" y="78" width="4" height="10" fill={c} fillOpacity="0.4"/>
    <rect x="70" y="76" width="4" height="10" fill={c} fillOpacity="0.4"/>
    {/* Coin falling */}
    <circle cx="42" cy="22" r="6" fill={c} fillOpacity="0.4"/>
    <text x="42" y="26" textAnchor="middle" fontSize="8" fontWeight="700" fill={c} stroke="none" fontFamily="monospace">$</text>
    <path d="M 36 22 L 30 30 M 48 22 L 54 30" strokeDasharray="2 1" strokeOpacity="0.5"/>
    {/* Tail */}
    <path d="M 18 60 Q 12 58 14 64 Q 20 66 18 60"/>
  </g>,

  // ── FINN'S SPIRAL — leprechaun in spiral + clover ────────────────────
  finn: (c) => <g>
    {/* Spiral */}
    <path d="M 50 50 m 0 -36 a 36 36 0 1 1 0 72 a 28 28 0 1 0 0 -56 a 20 20 0 1 1 0 40 a 12 12 0 1 0 0 -24 a 6 6 0 1 1 0 12" strokeOpacity="0.5"/>
    {/* Top hat (leprechaun) */}
    <rect x="38" y="22" width="24" height="14" fill={c} fillOpacity="0.3"/>
    <rect x="32" y="34" width="36" height="4" fill={c} fillOpacity="0.25"/>
    {/* Hat band + buckle */}
    <path d="M 38 30 L 62 30" strokeWidth="1.8"/>
    <rect x="46" y="28" width="8" height="4"/>
    {/* Four-leaf clover */}
    <circle cx="20" cy="76" r="4" fill={c} fillOpacity="0.4"/>
    <circle cx="28" cy="76" r="4" fill={c} fillOpacity="0.4"/>
    <circle cx="24" cy="70" r="4" fill={c} fillOpacity="0.4"/>
    <circle cx="24" cy="82" r="4" fill={c} fillOpacity="0.4"/>
    <path d="M 24 86 L 24 92"/>
    {/* Pot of gold */}
    <path d="M 70 76 L 90 76 L 86 88 L 74 88 Z" fill={c} fillOpacity="0.3"/>
    <ellipse cx="80" cy="74" rx="10" ry="2" fill={c} fillOpacity="0.4"/>
    <circle cx="76" cy="80" r="1" fill={c}/>
    <circle cx="84" cy="82" r="1" fill={c}/>
  </g>,

  // ── ALOHA CLUSTERS — hibiscus + palm + sun ───────────────────────────
  aloha: (c) => <g>
    {/* Sun rays */}
    <circle cx="78" cy="22" r="6" fill={c} fillOpacity="0.5"/>
    {[0, 45, 90, 135, 180, 225, 270, 315].map(a => {
      const x1 = 78 + 8 * Math.cos(a * Math.PI/180);
      const y1 = 22 + 8 * Math.sin(a * Math.PI/180);
      const x2 = 78 + 12 * Math.cos(a * Math.PI/180);
      const y2 = 22 + 12 * Math.sin(a * Math.PI/180);
      return <path key={a} d={`M ${x1} ${y1} L ${x2} ${y2}`}/>;
    })}
    {/* Palm tree */}
    <path d="M 14 88 Q 18 70 22 50" strokeWidth="2"/>
    <path d="M 22 50 Q 8 44 4 38 M 22 50 Q 36 42 42 36 M 22 50 Q 14 38 10 28 M 22 50 Q 30 36 36 24"/>
    {/* Coconuts */}
    <circle cx="22" cy="52" r="2" fill={c}/>
    <circle cx="26" cy="52" r="2" fill={c}/>
    {/* Hibiscus flower (large) */}
    <ellipse cx="50" cy="40" rx="11" ry="14" fill={c} fillOpacity="0.2"/>
    <ellipse cx="68" cy="52" rx="14" ry="11" fill={c} fillOpacity="0.2"/>
    <ellipse cx="62" cy="68" rx="12" ry="10" fill={c} fillOpacity="0.2"/>
    <ellipse cx="38" cy="68" rx="12" ry="10" fill={c} fillOpacity="0.2"/>
    <ellipse cx="32" cy="52" rx="14" ry="11" fill={c} fillOpacity="0.2"/>
    <circle cx="50" cy="56" r="6" fill={c} fillOpacity="0.5"/>
    {/* Stamen */}
    <circle cx="50" cy="56" r="2" fill={c}/>
    <path d="M 50 50 L 50 54 M 46 54 L 48 56 M 54 54 L 52 56" strokeOpacity="0.7"/>
    {/* Water lines bottom */}
    <path d="M 50 92 Q 60 88 70 92 T 90 92" strokeOpacity="0.4"/>
  </g>,

  // ── MYTHIC: SUPERNOVA PRIME ──────────────────────────────────────────
  'gem-mythic': (c) => <g>
    <circle cx="50" cy="50" r="46" strokeDasharray="2 2"/>
    <circle cx="50" cy="50" r="40" strokeDasharray="1 4" strokeOpacity="0.6"/>
    {/* Explosion rays */}
    {[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map(a => {
      const x = 50 + 40 * Math.cos(a * Math.PI/180);
      const y = 50 + 40 * Math.sin(a * Math.PI/180);
      return <path key={a} d={`M 50 50 L ${x} ${y}`} strokeOpacity="0.5"/>;
    })}
    {/* Mega gem */}
    <path d="M 50 12 L 84 36 L 66 84 L 34 84 L 16 36 Z" fill={c} fillOpacity="0.45"/>
    <path d="M 16 36 L 50 52 L 84 36"/>
    <path d="M 50 52 L 34 84 M 50 52 L 66 84"/>
    <path d="M 32 24 L 50 12 L 68 24"/>
    <path d="M 32 24 L 50 52 L 68 24"/>
    <circle cx="50" cy="50" r="6" fill={c}/>
  </g>,
};

window.PIXEL_ART = PIXEL_ART;
