// =============================================================================
// CARD ART · PLAY & ROLL — 10 archetypes + 1 mythic
// =============================================================================

const PLAYROLL_ART = {

  // ── BOOK OF SOULS — ornate book + eye + pyramid ──────────────────────
  book: (c) => <g>
    {/* Pyramid behind */}
    <path d="M 20 78 L 50 38 L 80 78 Z" fill={c} fillOpacity="0.1"/>
    <path d="M 36 60 L 64 60" strokeOpacity="0.4"/>
    {/* Book */}
    <path d="M 20 28 L 50 36 L 80 28 L 80 80 L 50 86 L 20 80 Z" fill={c} fillOpacity="0.2"/>
    {/* Spine */}
    <path d="M 50 36 L 50 86" strokeWidth="1.5"/>
    {/* Eye of Horus */}
    <ellipse cx="50" cy="60" rx="14" ry="6"/>
    <circle cx="50" cy="60" r="4" fill={c} fillOpacity="0.6"/>
    <circle cx="50" cy="60" r="2" fill={c}/>
    <path d="M 36 60 L 32 64 L 36 68" strokeOpacity="0.6"/>
    <path d="M 64 60 L 68 64 L 64 68" strokeOpacity="0.6"/>
    {/* Decorations on cover */}
    <path d="M 28 38 L 32 42 M 68 38 L 72 42" strokeOpacity="0.5"/>
    <path d="M 28 78 L 32 74 M 68 78 L 72 74" strokeOpacity="0.5"/>
    {/* Glow stars */}
    <path d="M 12 18 L 14 22 L 12 26 L 10 22 Z" fill={c}/>
    <path d="M 86 22 L 88 26 L 86 30 L 84 26 Z" fill={c}/>
    <circle cx="14" cy="60" r="1" fill={c}/>
    <circle cx="86" cy="62" r="1" fill={c}/>
  </g>,

  // ── REACTORZ — alien with quantum aura ────────────────────────────────
  alien: (c) => <g>
    {/* Quantum orbits */}
    <ellipse cx="50" cy="52" rx="42" ry="16" strokeOpacity="0.4"/>
    <ellipse cx="50" cy="52" rx="16" ry="42" strokeOpacity="0.4"/>
    {/* Alien body */}
    <rect x="30" y="28" width="40" height="48" fill={c} fillOpacity="0.18"/>
    <rect x="34" y="22" width="32" height="8" fill={c} fillOpacity="0.25"/>
    {/* Antennae */}
    <path d="M 38 22 L 32 12 M 62 22 L 68 12"/>
    <circle cx="32" cy="12" r="2" fill={c}/>
    <circle cx="68" cy="12" r="2" fill={c}/>
    {/* Big eyes */}
    <rect x="36" y="36" width="10" height="14" fill={c} fillOpacity="0.6"/>
    <rect x="54" y="36" width="10" height="14" fill={c} fillOpacity="0.6"/>
    <rect x="38" y="40" width="3" height="5"/>
    <rect x="56" y="40" width="3" height="5"/>
    {/* Mouth */}
    <rect x="42" y="58" width="16" height="4" fill={c}/>
    <path d="M 42 62 L 50 66 L 58 62"/>
    {/* Body grid */}
    <path d="M 30 60 L 70 60" strokeOpacity="0.5"/>
    <path d="M 40 60 L 40 76 M 50 60 L 50 76 M 60 60 L 60 76" strokeOpacity="0.4"/>
    {/* Tentacles */}
    <path d="M 30 76 L 22 88 M 50 76 L 50 90 M 70 76 L 78 88"/>
    {/* Pip dots */}
    <circle cx="14" cy="40" r="1" fill={c}/>
    <circle cx="86" cy="44" r="1" fill={c}/>
    <circle cx="12" cy="70" r="1" fill={c} fillOpacity="0.6"/>
    <circle cx="88" cy="74" r="1" fill={c} fillOpacity="0.6"/>
  </g>,

  // ── PEARLS OF AYUTHA — temple + pearl + dragon coil ──────────────────
  pearl: (c) => <g>
    {/* Temple silhouette */}
    <path d="M 14 76 L 14 60 L 18 60 L 18 50 L 22 50 L 22 40 L 26 40 L 30 28 L 34 40 L 38 40 L 38 50 L 42 50 L 42 60 L 46 60 L 46 76 Z" fill={c} fillOpacity="0.18"/>
    <path d="M 30 28 L 30 22" strokeWidth="1.5"/>
    {/* Dragon coils */}
    <path d="M 50 50 Q 70 30 86 50 Q 70 70 50 50" />
    <path d="M 60 40 Q 75 35 80 50 Q 75 60 65 56" strokeOpacity="0.6"/>
    <circle cx="84" cy="46" r="1.5" fill={c}/>
    {/* Dragon scales */}
    <path d="M 56 46 L 60 48 M 64 44 L 68 46 M 72 44 L 76 46 M 78 50 L 82 52" strokeOpacity="0.5"/>
    {/* Pearl */}
    <circle cx="60" cy="70" r="10" fill={c} fillOpacity="0.3"/>
    <circle cx="56" cy="66" r="2" fill={c} fillOpacity="0.6"/>
    {/* Shell */}
    <path d="M 50 80 Q 60 90 70 80 Q 80 82 80 76" fill={c} fillOpacity="0.15"/>
    <path d="M 52 78 L 60 80 M 60 80 L 68 78 M 56 76 L 64 76" strokeOpacity="0.4"/>
    {/* Water ripples */}
    <path d="M 4 88 Q 16 84 28 88 T 52 88" strokeOpacity="0.4"/>
    <path d="M 56 90 Q 70 86 84 90 T 100 90" strokeOpacity="0.4"/>
  </g>,

  // ── FIRE JESTER — flames + jester face ───────────────────────────────
  joker: (c) => <g>
    {/* Outer flame */}
    <path d="M 30 88 Q 14 60 30 32 Q 50 8 70 32 Q 86 60 70 88 Q 60 78 50 86 Q 40 78 30 88 Z" fill={c} fillOpacity="0.2"/>
    {/* Inner flame */}
    <path d="M 38 80 Q 28 60 40 42 Q 50 28 60 42 Q 72 60 62 80 Q 56 72 50 80 Q 44 72 38 80 Z" fill={c} fillOpacity="0.3"/>
    {/* Jester hat (three points) */}
    <path d="M 28 36 L 22 18 L 32 24 L 38 12 L 44 22 L 50 14 L 56 22 L 62 12 L 68 24 L 78 18 L 72 36 Z" fill={c} fillOpacity="0.35"/>
    {/* Bells */}
    <circle cx="22" cy="18" r="2" fill={c}/>
    <circle cx="50" cy="14" r="2" fill={c}/>
    <circle cx="78" cy="18" r="2" fill={c}/>
    {/* Face mask */}
    <circle cx="42" cy="58" r="3" fill={c}/>
    <circle cx="58" cy="58" r="3" fill={c}/>
    {/* Grin */}
    <path d="M 40 70 Q 50 78 60 70" strokeWidth="1.5"/>
    {/* Sparks */}
    <circle cx="14" cy="40" r="1" fill={c}/>
    <circle cx="86" cy="42" r="1" fill={c}/>
    <circle cx="12" cy="76" r="1" fill={c} fillOpacity="0.6"/>
    <circle cx="88" cy="74" r="1" fill={c} fillOpacity="0.6"/>
  </g>,

  // ── MOON QUEEN — crescent + queen profile ─────────────────────────────
  moon: (c) => <g>
    {/* Stars */}
    <path d="M 14 14 L 16 18 L 14 22 L 12 18 Z" fill={c}/>
    <path d="M 84 26 L 86 30 L 84 34 L 82 30 Z" fill={c}/>
    <circle cx="20" cy="80" r="1" fill={c}/>
    <circle cx="80" cy="78" r="1" fill={c}/>
    {/* Moon (crescent) */}
    <circle cx="50" cy="50" r="32" fill={c} fillOpacity="0.18"/>
    <circle cx="62" cy="44" r="26" fill="var(--bg-inset)"/>
    {/* Queen silhouette profile (right-facing on moon) */}
    <path d="M 38 60 Q 38 48 44 44 Q 48 38 50 42 Q 52 46 50 52 Q 52 56 48 58 L 46 62 L 46 78 L 36 78 Z" fill={c} fillOpacity="0.4"/>
    {/* Crown */}
    <path d="M 38 36 L 38 30 L 42 32 L 44 26 L 48 32 L 50 28 L 52 32 L 54 28 L 56 32" strokeWidth="1.5"/>
    <circle cx="48" cy="28" r="1.5" fill={c}/>
    <circle cx="52" cy="30" r="1" fill={c}/>
    {/* Eye */}
    <circle cx="45" cy="48" r="1.2" fill={c}/>
    {/* Lips */}
    <path d="M 44 56 L 47 56" strokeOpacity="0.6"/>
    {/* Halo */}
    <circle cx="50" cy="50" r="38" strokeDasharray="2 3" strokeOpacity="0.4"/>
  </g>,

  // ── MERLIN'S ASCENT — wizard with staff + runes ──────────────────────
  wizard: (c) => <g>
    {/* Runes circle */}
    <circle cx="50" cy="58" r="36" strokeDasharray="1 3" strokeOpacity="0.5"/>
    <path d="M 16 28 L 20 28 M 18 26 L 18 30"/>
    <path d="M 84 28 L 80 28 M 82 26 L 82 30"/>
    <path d="M 14 70 L 18 70 M 16 68 L 16 72"/>
    <path d="M 84 72 L 88 72 M 86 70 L 86 74"/>
    {/* Wizard hat */}
    <path d="M 30 56 L 50 8 L 70 56 Z" fill={c} fillOpacity="0.25"/>
    <path d="M 26 56 L 74 56" strokeWidth="1.8"/>
    {/* Hat stars */}
    <path d="M 46 30 L 48 34 L 46 38 L 44 34 Z" fill={c}/>
    <path d="M 54 40 L 56 44 L 54 48 L 52 44 Z" fill={c} fillOpacity="0.7"/>
    {/* Star on tip */}
    <path d="M 50 4 L 52 8 L 56 8 L 53 11 L 54 15 L 50 12 L 46 15 L 47 11 L 44 8 L 48 8 Z" fill={c}/>
    {/* Beard */}
    <path d="M 36 56 L 38 68 L 44 78 L 50 82 L 56 78 L 62 68 L 64 56" fill={c} fillOpacity="0.2"/>
    <path d="M 40 64 L 50 76 L 60 64" strokeOpacity="0.4"/>
    {/* Eyes */}
    <circle cx="44" cy="56" r="1.5" fill={c}/>
    <circle cx="56" cy="56" r="1.5" fill={c}/>
    {/* Staff (right side) */}
    <path d="M 76 32 L 84 88" strokeWidth="2"/>
    <circle cx="76" cy="28" r="5" fill={c} fillOpacity="0.5"/>
    <circle cx="76" cy="28" r="2" fill={c}/>
  </g>,

  // ── TROLL'S BRIDGE — stone arch + troll ──────────────────────────────
  troll: (c) => <g>
    {/* Water under bridge */}
    <path d="M 0 80 Q 12 76 24 80 T 48 80 T 72 80 T 100 80" strokeOpacity="0.5"/>
    <path d="M 0 86 Q 12 82 24 86 T 48 86 T 72 86 T 100 86" strokeOpacity="0.3"/>
    {/* Bridge arch */}
    <path d="M 6 60 L 6 76 M 94 60 L 94 76 M 6 60 Q 6 36 50 36 Q 94 36 94 60" />
    <path d="M 6 60 Q 6 32 50 32 Q 94 32 94 60" fill={c} fillOpacity="0.12"/>
    {/* Brick lines on bridge */}
    <path d="M 10 50 L 18 50 M 22 46 L 30 46 M 34 42 L 42 42 M 46 40 L 54 40 M 58 42 L 66 42 M 70 46 L 78 46 M 82 50 L 90 50" strokeOpacity="0.5"/>
    {/* Troll head under bridge */}
    <path d="M 38 62 Q 38 52 50 52 Q 62 52 62 62 L 62 70 L 56 70 L 54 76 L 46 76 L 44 70 L 38 70 Z" fill={c} fillOpacity="0.35"/>
    {/* Troll horns */}
    <path d="M 40 52 L 36 44 L 44 50 M 60 52 L 64 44 L 56 50" strokeWidth="1.5"/>
    {/* Eyes */}
    <circle cx="45" cy="60" r="1.5" fill={c}/>
    <circle cx="55" cy="60" r="1.5" fill={c}/>
    {/* Snaggle teeth */}
    <path d="M 46 68 L 46 72 M 50 68 L 50 73 M 54 68 L 54 72" strokeWidth="1.2"/>
    {/* Moon */}
    <circle cx="18" cy="18" r="5" fill={c} fillOpacity="0.4"/>
  </g>,

  // ── GEMIX WORLDS — crystal planet ────────────────────────────────────
  gemix: (c) => <g>
    {/* Orbit rings */}
    <ellipse cx="50" cy="56" rx="42" ry="14" strokeOpacity="0.4"/>
    <ellipse cx="50" cy="56" rx="42" ry="14" transform="rotate(30 50 56)" strokeOpacity="0.3"/>
    {/* Planet (hex shape) */}
    <path d="M 50 24 L 72 38 L 72 64 L 50 78 L 28 64 L 28 38 Z" fill={c} fillOpacity="0.2"/>
    {/* Crystal cluster on top */}
    <path d="M 38 38 L 42 22 L 46 38 Z" fill={c} fillOpacity="0.35"/>
    <path d="M 46 38 L 52 16 L 58 38 Z" fill={c} fillOpacity="0.4"/>
    <path d="M 58 38 L 62 26 L 66 38 Z" fill={c} fillOpacity="0.3"/>
    {/* Crystal facets */}
    <path d="M 46 38 L 52 38 L 52 16" strokeOpacity="0.6"/>
    <path d="M 42 22 L 42 38 M 62 26 L 62 38" strokeOpacity="0.5"/>
    {/* Planet grid */}
    <path d="M 50 38 L 50 78 M 28 50 L 72 50 M 30 60 L 70 60" strokeOpacity="0.3"/>
    {/* Hex pip inside */}
    <path d="M 50 50 L 56 54 L 56 62 L 50 66 L 44 62 L 44 54 Z" fill={c} fillOpacity="0.4"/>
    {/* Stars */}
    <path d="M 14 18 L 14 22 M 12 20 L 16 20"/>
    <path d="M 88 78 L 88 82 M 86 80 L 90 80"/>
  </g>,

  // ── TOME OF CHAOS — open tome with cosmic eye ────────────────────────
  tome: (c) => <g>
    {/* Open book pages */}
    <path d="M 8 30 L 50 22 L 50 78 L 8 86 Z" fill={c} fillOpacity="0.15"/>
    <path d="M 92 30 L 50 22 L 50 78 L 92 86 Z" fill={c} fillOpacity="0.15"/>
    {/* Page lines */}
    <path d="M 16 38 L 44 32 M 16 46 L 44 40 M 16 54 L 44 48" strokeOpacity="0.4"/>
    <path d="M 56 32 L 84 38 M 56 40 L 84 46 M 56 48 L 84 54" strokeOpacity="0.4"/>
    {/* Cosmic explosion in middle */}
    {[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map(a => {
      const x1 = 50 + 8 * Math.cos(a * Math.PI/180);
      const y1 = 50 + 8 * Math.sin(a * Math.PI/180);
      const x2 = 50 + 16 * Math.cos(a * Math.PI/180);
      const y2 = 50 + 16 * Math.sin(a * Math.PI/180);
      return <path key={a} d={`M ${x1} ${y1} L ${x2} ${y2}`} strokeOpacity="0.7"/>;
    })}
    <circle cx="50" cy="50" r="7" fill={c} fillOpacity="0.5"/>
    <circle cx="50" cy="50" r="3" fill={c}/>
    {/* Eye in cosmos */}
    <ellipse cx="50" cy="68" rx="10" ry="4"/>
    <circle cx="50" cy="68" r="2" fill={c}/>
    {/* Stars on pages */}
    <path d="M 24 60 L 26 64 L 24 68 L 22 64 Z" fill={c}/>
    <path d="M 76 60 L 78 64 L 76 68 L 74 64 Z" fill={c}/>
  </g>,

  // ── HONEY STORM — bee + honeycomb ────────────────────────────────────
  honey: (c) => <g>
    {/* Honeycomb cluster */}
    <path d="M 60 24 L 70 30 L 70 42 L 60 48 L 50 42 L 50 30 Z" fill={c} fillOpacity="0.2"/>
    <path d="M 70 42 L 80 48 L 80 60 L 70 66 L 60 60 L 60 48" fill={c} fillOpacity="0.18"/>
    <path d="M 60 48 L 60 60 L 50 66 L 40 60 L 40 48 L 50 42" fill={c} fillOpacity="0.18"/>
    <path d="M 50 66 L 60 72 L 60 84 L 50 90 L 40 84 L 40 72" fill={c} fillOpacity="0.18"/>
    {/* Bee */}
    <ellipse cx="22" cy="38" rx="10" ry="7" fill={c} fillOpacity="0.3"/>
    <path d="M 18 32 L 18 44 M 24 31 L 24 45 M 28 33 L 28 43" strokeWidth="1.5"/>
    <circle cx="14" cy="36" r="3" fill={c} fillOpacity="0.4"/>
    {/* Bee eye */}
    <circle cx="12" cy="36" r="1" fill={c}/>
    {/* Wings */}
    <ellipse cx="22" cy="28" rx="6" ry="4" strokeOpacity="0.6"/>
    <ellipse cx="28" cy="32" rx="6" ry="4" strokeOpacity="0.6"/>
    {/* Antennae */}
    <path d="M 12 32 L 8 24 M 14 30 L 16 22"/>
    {/* Flight path */}
    <path d="M 32 40 Q 38 50 50 30" strokeDasharray="2 2" strokeOpacity="0.6"/>
    {/* Honey drip */}
    <path d="M 50 90 Q 48 94 50 96 Q 52 94 50 90" fill={c} fillOpacity="0.5"/>
  </g>,

  // ── MYTHIC: BOOK OF ETERNITY ─────────────────────────────────────────
  'book-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"/>
    {[0, 60, 120, 180, 240, 300].map(a => {
      const x = 50 + 38 * Math.cos(a * Math.PI/180);
      const y = 50 + 38 * Math.sin(a * Math.PI/180);
      return <circle key={a} cx={x} cy={y} r="2" fill={c}/>;
    })}
    {/* Massive tome */}
    <path d="M 18 22 L 50 30 L 82 22 L 82 78 L 50 86 L 18 78 Z" fill={c} fillOpacity="0.45"/>
    <path d="M 50 30 L 50 86" strokeWidth="2"/>
    {/* Cosmic eye */}
    <ellipse cx="50" cy="56" rx="20" ry="9"/>
    <circle cx="50" cy="56" r="6" fill={c} fillOpacity="0.6"/>
    <circle cx="50" cy="56" r="3" fill={c}/>
    {/* Triangle accents */}
    <path d="M 50 14 L 56 22 L 44 22 Z" fill={c} fillOpacity="0.5"/>
  </g>,
};

window.PLAYROLL_ART = PLAYROLL_ART;
