// =============================================================================
// CARD ART · SAWBLADE GAMES — 10 archetypes + 1 mythic
// =============================================================================

const SAWBLADE_ART = {

  // ── WANTED DEAD OR WILD — wanted poster + revolvers ──────────────────
  gun: (c) => <g>
    {/* Wanted poster frame */}
    <rect x="22" y="12" width="56" height="60" fill={c} fillOpacity="0.1"/>
    <rect x="22" y="12" width="56" height="60" strokeDasharray="3 2" strokeOpacity="0.5"/>
    {/* "WANTED" text */}
    <text x="50" y="22" textAnchor="middle" fontSize="6" fontWeight="700" fill={c} stroke="none" fontFamily="monospace" letterSpacing="1">WANTED</text>
    <path d="M 26 24 L 74 24" strokeOpacity="0.5"/>
    {/* Face silhouette */}
    <circle cx="50" cy="38" r="9" fill={c} fillOpacity="0.25"/>
    {/* Cowboy hat */}
    <path d="M 38 30 L 62 30 L 64 32 L 36 32 Z" fill={c} fillOpacity="0.4"/>
    <path d="M 42 30 Q 42 22 50 22 Q 58 22 58 30" fill={c} fillOpacity="0.3"/>
    {/* Bandit mask */}
    <rect x="42" y="36" width="16" height="3" fill={c}/>
    <circle cx="46" cy="37" r="1" fill={c} fillOpacity="0.7"/>
    <circle cx="54" cy="37" r="1" fill={c} fillOpacity="0.7"/>
    {/* "DEAD OR ALIVE" */}
    <text x="50" y="56" textAnchor="middle" fontSize="4" fontWeight="700" fill={c} stroke="none" fontFamily="monospace" letterSpacing="0.5">DEAD OR WILD</text>
    {/* Reward stars */}
    <path d="M 32 62 L 33 65 L 36 65 L 34 67 L 35 70 L 32 68 L 29 70 L 30 67 L 28 65 L 31 65 Z" fill={c}/>
    <path d="M 68 62 L 69 65 L 72 65 L 70 67 L 71 70 L 68 68 L 65 70 L 66 67 L 64 65 L 67 65 Z" fill={c}/>
    {/* Crossed revolvers below */}
    <path d="M 12 80 L 38 92 L 36 96 L 10 84 Z" fill={c} fillOpacity="0.3"/>
    <path d="M 88 80 L 62 92 L 64 96 L 90 84 Z" fill={c} fillOpacity="0.3"/>
    <circle cx="20" cy="84" r="3"/>
    <circle cx="80" cy="84" r="3"/>
  </g>,

  // ── THE BANDIT — masked thief + money bag ────────────────────────────
  bandit: (c) => <g>
    {/* Spotlight */}
    <path d="M 14 8 L 8 30 L 92 30 L 86 8 Z" fill={c} fillOpacity="0.06"/>
    <path d="M 14 8 L 8 30 M 86 8 L 92 30" strokeDasharray="2 2" strokeOpacity="0.4"/>
    {/* Cap/beret */}
    <path d="M 32 30 Q 32 20 50 20 Q 68 20 68 30 Z" fill={c} fillOpacity="0.3"/>
    <path d="M 30 30 L 70 30" strokeWidth="1.5"/>
    {/* Striped shirt */}
    <path d="M 28 60 L 28 84 L 72 84 L 72 60 Z" fill={c} fillOpacity="0.15"/>
    <path d="M 28 64 L 72 64 M 28 70 L 72 70 M 28 76 L 72 76 M 28 82 L 72 82" strokeOpacity="0.5"/>
    {/* Face */}
    <circle cx="50" cy="46" r="12" fill={c} fillOpacity="0.2"/>
    {/* Domino mask */}
    <path d="M 36 42 Q 50 36 64 42 L 60 50 Q 50 46 40 50 Z" fill={c} fillOpacity="0.45"/>
    <circle cx="44" cy="46" r="2.5" fill={c}/>
    <circle cx="56" cy="46" r="2.5" fill={c}/>
    {/* Smirk */}
    <path d="M 44 54 Q 50 58 56 54"/>
    {/* Money bag */}
    <path d="M 70 70 L 76 64 L 88 64 L 94 70 L 92 88 L 72 88 Z" fill={c} fillOpacity="0.3"/>
    <text x="82" y="80" textAnchor="middle" fontSize="9" fontWeight="700" fill={c} stroke="none" fontFamily="monospace">$</text>
    <path d="M 76 64 L 88 64" strokeWidth="1.5"/>
  </g>,

  // ── STACK UP — tower of chips ────────────────────────────────────────
  stack: (c) => <g>
    {/* Floor line */}
    <path d="M 8 84 L 92 84" strokeOpacity="0.5"/>
    {/* Chip stack — biggest first */}
    {[
      {x: 22, y: 76, w: 56, h: 8, alpha: 0.3},
      {x: 26, y: 68, w: 48, h: 8, alpha: 0.25},
      {x: 30, y: 60, w: 40, h: 8, alpha: 0.22},
      {x: 28, y: 52, w: 44, h: 8, alpha: 0.2},
      {x: 32, y: 44, w: 36, h: 8, alpha: 0.18},
      {x: 30, y: 36, w: 40, h: 8, alpha: 0.16},
      {x: 36, y: 28, w: 28, h: 8, alpha: 0.14},
      {x: 38, y: 20, w: 24, h: 8, alpha: 0.12},
    ].map((r, i) => (
      <React.Fragment key={i}>
        <rect x={r.x} y={r.y} width={r.w} height={r.h} fill={c} fillOpacity={r.alpha}/>
        <path d={`M ${r.x} ${r.y+4} L ${r.x+r.w} ${r.y+4}`} strokeOpacity="0.3"/>
      </React.Fragment>
    ))}
    {/* Chip $ on side stack */}
    <text x="50" y="32" textAnchor="middle" fontSize="6" fontWeight="700" fill={c} stroke="none" fontFamily="monospace">$$$</text>
    <text x="50" y="48" textAnchor="middle" fontSize="6" fontWeight="700" fill={c} stroke="none" fontFamily="monospace">x100</text>
    {/* Light reflection */}
    <path d="M 22 78 L 78 78" strokeOpacity="0.4"/>
    {/* Coins around base */}
    <circle cx="14" cy="84" r="4" fill={c} fillOpacity="0.25"/>
    <circle cx="88" cy="86" r="3" fill={c} fillOpacity="0.25"/>
    <circle cx="10" cy="90" r="2" fill={c}/>
  </g>,

  // ── HOP & POP — bunny jumping + carrots ──────────────────────────────
  bunny: (c) => <g>
    {/* Ground */}
    <path d="M 0 80 Q 25 76 50 80 T 100 80" strokeOpacity="0.4"/>
    {/* Bouncing arc trail */}
    <path d="M 10 76 Q 30 50 50 70 T 90 60" strokeDasharray="2 2" strokeOpacity="0.5"/>
    {/* Bunny body */}
    <ellipse cx="52" cy="56" rx="20" ry="18" fill={c} fillOpacity="0.18"/>
    {/* Ears (tall) */}
    <ellipse cx="44" cy="26" rx="5" ry="16" fill={c} fillOpacity="0.25"/>
    <ellipse cx="60" cy="26" rx="5" ry="16" fill={c} fillOpacity="0.25"/>
    <ellipse cx="44" cy="26" rx="2" ry="10" fill={c} fillOpacity="0.5"/>
    <ellipse cx="60" cy="26" rx="2" ry="10" fill={c} fillOpacity="0.5"/>
    {/* Face */}
    <circle cx="46" cy="52" r="1.5" fill={c}/>
    <circle cx="58" cy="52" r="1.5" fill={c}/>
    <path d="M 50 58 L 52 62 L 54 58 Z" fill={c}/>
    <path d="M 48 64 L 52 66 L 56 64"/>
    {/* Feet (in motion) */}
    <ellipse cx="42" cy="74" rx="6" ry="3" fill={c} fillOpacity="0.3"/>
    <ellipse cx="64" cy="74" rx="6" ry="3" fill={c} fillOpacity="0.3"/>
    {/* Carrot */}
    <path d="M 14 60 L 18 80 L 22 60 Z" fill={c} fillOpacity="0.4"/>
    <path d="M 14 58 L 18 50 M 18 58 L 18 48 M 22 58 L 26 50" strokeOpacity="0.6"/>
    {/* Speed lines */}
    <path d="M 78 36 L 86 36 M 80 42 L 88 42 M 78 48 L 86 48" strokeOpacity="0.5"/>
  </g>,

  // ── CASH FRENZY — money rain + briefcase ─────────────────────────────
  cash: (c) => <g>
    {/* Falling cash bills */}
    {[
      {x: 14, y: 14, r: -15},
      {x: 30, y: 22, r: 10},
      {x: 76, y: 18, r: -8},
      {x: 60, y: 28, r: 20},
      {x: 86, y: 36, r: -25},
    ].map((b, i) => (
      <g key={i} transform={`translate(${b.x} ${b.y}) rotate(${b.r})`}>
        <rect x="-6" y="-3" width="12" height="6" fill={c} fillOpacity="0.25"/>
        <circle cx="0" cy="0" r="1.5" fill={c}/>
      </g>
    ))}
    {/* Briefcase */}
    <rect x="22" y="50" width="56" height="36" fill={c} fillOpacity="0.18"/>
    {/* Handle */}
    <path d="M 42 50 L 42 44 L 58 44 L 58 50" strokeWidth="1.8"/>
    {/* Lock */}
    <rect x="46" y="62" width="8" height="6" fill={c} fillOpacity="0.5"/>
    <circle cx="50" cy="64" r="1" fill={c}/>
    {/* Lines */}
    <path d="M 22 60 L 78 60" strokeOpacity="0.6"/>
    {/* Hinges */}
    <rect x="34" y="52" width="2" height="4" fill={c}/>
    <rect x="64" y="52" width="2" height="4" fill={c}/>
    {/* Cash stacks visible */}
    <rect x="28" y="72" width="14" height="10" fill={c} fillOpacity="0.3"/>
    <rect x="44" y="72" width="14" height="10" fill={c} fillOpacity="0.3"/>
    <rect x="60" y="72" width="14" height="10" fill={c} fillOpacity="0.3"/>
    <text x="35" y="80" textAnchor="middle" fontSize="5" fontWeight="700" fill={c} stroke="none" fontFamily="monospace">$$</text>
    <text x="51" y="80" textAnchor="middle" fontSize="5" fontWeight="700" fill={c} stroke="none" fontFamily="monospace">$$</text>
    <text x="67" y="80" textAnchor="middle" fontSize="5" fontWeight="700" fill={c} stroke="none" fontFamily="monospace">$$</text>
  </g>,

  // ── RIPS CITY — cyberpunk skyline ────────────────────────────────────
  cyber: (c) => <g>
    {/* Sky grid (futuristic horizon) */}
    {[0, 1, 2, 3].map(i => (
      <path key={i} d={`M ${10 + i*25} 30 L ${10 + i*25} 50`} strokeOpacity={0.3}/>
    ))}
    {/* Horizon */}
    <path d="M 0 50 L 100 50" strokeOpacity="0.5"/>
    {/* Buildings */}
    <rect x="8" y="36" width="14" height="50" fill={c} fillOpacity="0.18"/>
    <rect x="24" y="22" width="10" height="64" fill={c} fillOpacity="0.22"/>
    <rect x="36" y="44" width="12" height="42" fill={c} fillOpacity="0.16"/>
    <rect x="50" y="14" width="16" height="72" fill={c} fillOpacity="0.25"/>
    <rect x="68" y="38" width="10" height="48" fill={c} fillOpacity="0.18"/>
    <rect x="80" y="28" width="12" height="58" fill={c} fillOpacity="0.22"/>
    {/* Antenna on tallest */}
    <path d="M 58 14 L 58 6 M 56 8 L 60 8" strokeWidth="1.5"/>
    {/* Windows */}
    {[{b:8,c:14}, {b:24,c:10}, {b:36,c:12}, {b:50,c:16}, {b:68,c:10}, {b:80,c:12}].map((b, i) => (
      <React.Fragment key={i}>
        {[1,2,3,4,5,6,7].map(r =>
          [0,1,2].map(col => (
            <rect key={`${i}-${r}-${col}`} x={b.b + 2 + col*(b.c-4)/2.4} y={40 + r*6} width="1.5" height="1.5"
                  fill={c} fillOpacity={Math.random() > 0.5 ? 0.6 : 0.2}/>
          ))
        )}
      </React.Fragment>
    ))}
    {/* Neon sign */}
    <rect x="42" y="28" width="20" height="6" strokeOpacity="0.7"/>
    <text x="52" y="32" textAnchor="middle" fontSize="4" fontWeight="700" fill={c} stroke="none" fontFamily="monospace" letterSpacing="0.5">RIPS</text>
  </g>,

  // ── CHAOS GANG — graffiti + spray can ────────────────────────────────
  chaos: (c) => <g>
    {/* Brick wall */}
    <rect x="6" y="6" width="88" height="88" fill={c} fillOpacity="0.04"/>
    {/* Brick lines */}
    {[20, 32, 44, 56, 68, 80].map((y, i) => (
      <React.Fragment key={i}>
        <path d={`M 6 ${y} L 94 ${y}`} strokeOpacity="0.3"/>
        {i % 2 === 0
          ? <>
              <path d={`M 24 ${y} L 24 ${y-12}`} strokeOpacity="0.25"/>
              <path d={`M 50 ${y} L 50 ${y-12}`} strokeOpacity="0.25"/>
              <path d={`M 76 ${y} L 76 ${y-12}`} strokeOpacity="0.25"/>
            </>
          : <>
              <path d={`M 12 ${y} L 12 ${y-12}`} strokeOpacity="0.25"/>
              <path d={`M 36 ${y} L 36 ${y-12}`} strokeOpacity="0.25"/>
              <path d={`M 62 ${y} L 62 ${y-12}`} strokeOpacity="0.25"/>
              <path d={`M 88 ${y} L 88 ${y-12}`} strokeOpacity="0.25"/>
            </>
        }
      </React.Fragment>
    ))}
    {/* Graffiti splatter */}
    <circle cx="32" cy="42" r="3" fill={c} fillOpacity="0.4"/>
    <circle cx="40" cy="48" r="2" fill={c} fillOpacity="0.3"/>
    <circle cx="28" cy="52" r="1.5" fill={c} fillOpacity="0.5"/>
    {/* Tag text */}
    <text x="50" y="50" textAnchor="middle" fontSize="14" fontWeight="700" fill={c} stroke="none" fontFamily="monospace" letterSpacing="2">CHAOS</text>
    <path d="M 26 56 L 76 56" strokeWidth="1.5"/>
    {/* Spray can */}
    <rect x="60" y="64" width="10" height="24" fill={c} fillOpacity="0.3"/>
    <rect x="62" y="60" width="6" height="4" fill={c}/>
    <path d="M 60 70 L 70 70 M 60 76 L 70 76" strokeOpacity="0.5"/>
    {/* Spray cloud */}
    <path d="M 68 56 Q 78 50 86 56 Q 80 58 82 64 Q 76 60 70 60 Z" strokeDasharray="2 1" strokeOpacity="0.5"/>
    <circle cx="80" cy="56" r="1" fill={c} fillOpacity="0.5"/>
    <circle cx="84" cy="60" r="1" fill={c} fillOpacity="0.4"/>
  </g>,

  // ── BEAM TEAM — astronaut + laser beam ───────────────────────────────
  beam: (c) => <g>
    {/* Stars */}
    <circle cx="12" cy="18" r="1" fill={c}/>
    <circle cx="86" cy="14" r="1" fill={c} fillOpacity="0.6"/>
    <circle cx="20" cy="78" r="1" fill={c} fillOpacity="0.7"/>
    <circle cx="84" cy="82" r="1" fill={c}/>
    <path d="M 78 30 L 82 30 M 80 28 L 80 32" strokeOpacity="0.6"/>
    {/* Planet behind */}
    <circle cx="76" cy="70" r="14" fill={c} fillOpacity="0.15"/>
    <ellipse cx="76" cy="70" rx="14" ry="3" strokeOpacity="0.5"/>
    {/* Astronaut suit */}
    <circle cx="38" cy="42" r="14" fill={c} fillOpacity="0.18"/>
    {/* Helmet visor */}
    <ellipse cx="38" cy="42" rx="10" ry="8" fill={c} fillOpacity="0.4"/>
    <path d="M 32 38 L 36 36" strokeOpacity="0.8"/>
    {/* Body */}
    <path d="M 30 56 L 30 80 L 46 80 L 46 56 Z" fill={c} fillOpacity="0.2"/>
    {/* Backpack */}
    <rect x="22" y="48" width="8" height="14" fill={c} fillOpacity="0.3"/>
    {/* Antenna */}
    <path d="M 38 28 L 38 22"/>
    <circle cx="38" cy="22" r="2" fill={c}/>
    {/* Laser blaster */}
    <rect x="48" y="62" width="14" height="6" fill={c} fillOpacity="0.4"/>
    <rect x="62" y="60" width="4" height="10" fill={c}/>
    {/* Laser beam */}
    <path d="M 66 65 L 96 30" strokeWidth="2.5"/>
    <path d="M 66 65 L 96 30" strokeWidth="0.8" strokeOpacity="0.6"/>
    <circle cx="96" cy="30" r="3" fill={c} fillOpacity="0.6"/>
    {/* Boots */}
    <rect x="28" y="80" width="8" height="6" fill={c} fillOpacity="0.4"/>
    <rect x="40" y="80" width="8" height="6" fill={c} fillOpacity="0.4"/>
  </g>,

  // ── ITERA — 4-phase nested circles ───────────────────────────────────
  itero: (c) => <g>
    {/* Outer ring with notches */}
    <circle cx="50" cy="50" r="42" strokeOpacity="0.6"/>
    {[0, 45, 90, 135, 180, 225, 270, 315].map(a => {
      const x1 = 50 + 38 * Math.cos(a * Math.PI/180);
      const y1 = 50 + 38 * Math.sin(a * Math.PI/180);
      const x2 = 50 + 46 * Math.cos(a * Math.PI/180);
      const y2 = 50 + 46 * Math.sin(a * Math.PI/180);
      return <path key={a} d={`M ${x1} ${y1} L ${x2} ${y2}`}/>;
    })}
    {/* 4 quadrants colored */}
    <path d="M 50 14 A 36 36 0 0 1 86 50 L 50 50 Z" fill={c} fillOpacity="0.1"/>
    <path d="M 86 50 A 36 36 0 0 1 50 86 L 50 50 Z" fill={c} fillOpacity="0.2"/>
    <path d="M 50 86 A 36 36 0 0 1 14 50 L 50 50 Z" fill={c} fillOpacity="0.3"/>
    <path d="M 14 50 A 36 36 0 0 1 50 14 L 50 50 Z" fill={c} fillOpacity="0.4"/>
    {/* Cross dividers */}
    <path d="M 50 14 L 50 86 M 14 50 L 86 50"/>
    {/* Inner rings */}
    <circle cx="50" cy="50" r="24" strokeOpacity="0.5"/>
    <circle cx="50" cy="50" r="12"/>
    {/* Center */}
    <circle cx="50" cy="50" r="4" fill={c}/>
    {/* Quadrant labels */}
    <text x="66" y="32" fontSize="6" fontFamily="monospace" fill={c} stroke="none">x2</text>
    <text x="66" y="74" fontSize="6" fontFamily="monospace" fill={c} stroke="none">x5</text>
    <text x="26" y="74" fontSize="6" fontFamily="monospace" fill={c} stroke="none">x10</text>
    <text x="24" y="32" fontSize="6" fontFamily="monospace" fill={c} stroke="none">x25</text>
  </g>,

  // ── AZTEC NUDGE — pyramid + sun god ──────────────────────────────────
  aztec: (c) => <g>
    {/* Sun behind */}
    <circle cx="50" cy="22" r="10" fill={c} fillOpacity="0.25"/>
    {[0, 30, 60, 90, 120, 150, 180].map(a => {
      const x1 = 50 + 11 * Math.cos((a-180) * Math.PI/180);
      const y1 = 22 + 11 * Math.sin((a-180) * Math.PI/180);
      const x2 = 50 + 15 * Math.cos((a-180) * Math.PI/180);
      const y2 = 22 + 15 * Math.sin((a-180) * Math.PI/180);
      return <path key={a} d={`M ${x1} ${y1} L ${x2} ${y2}`}/>;
    })}
    {/* Step pyramid */}
    <path d="M 16 80 L 24 70 L 24 62 L 32 54 L 32 46 L 40 38 L 60 38 L 68 46 L 68 54 L 76 62 L 76 70 L 84 80 Z" fill={c} fillOpacity="0.2"/>
    {/* Steps detail */}
    <path d="M 24 62 L 76 62 M 32 54 L 68 54 M 40 46 L 60 46" strokeOpacity="0.5"/>
    {/* Doorway */}
    <rect x="44" y="62" width="12" height="18" fill={c} fillOpacity="0.5"/>
    <path d="M 44 70 L 56 70" strokeOpacity="0.6"/>
    {/* Sun mask in doorway */}
    <circle cx="50" cy="68" r="4" fill={c}/>
    {/* Glyphs on side */}
    <rect x="16" y="76" width="6" height="6"/>
    <path d="M 16 79 L 22 79 M 19 76 L 19 82" strokeOpacity="0.6"/>
    <rect x="78" y="76" width="6" height="6"/>
    <circle cx="81" cy="79" r="1.5" fill={c}/>
    {/* Ground */}
    <path d="M 0 90 L 100 90" strokeOpacity="0.4"/>
  </g>,

  // ── MYTHIC: NOON DUEL — sun + dueling pistols ────────────────────────
  'gun-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"/>
    {/* Sun rays — many */}
    {[0, 22.5, 45, 67.5, 90, 112.5, 135, 157.5, 180, 202.5, 225, 247.5, 270, 292.5, 315, 337.5].map(a => {
      const x = 50 + 38 * Math.cos(a * Math.PI/180);
      const y = 50 + 38 * Math.sin(a * Math.PI/180);
      return <path key={a} d={`M 50 50 L ${x} ${y}`} strokeOpacity="0.4"/>;
    })}
    {/* Center sun disk */}
    <circle cx="50" cy="50" r="20" fill={c} fillOpacity="0.4"/>
    {/* Crossed pistols on top */}
    <path d="M 14 30 L 50 50 L 46 56 L 10 36 Z" fill={c} fillOpacity="0.5"/>
    <path d="M 86 30 L 50 50 L 54 56 L 90 36 Z" fill={c} fillOpacity="0.5"/>
    <circle cx="22" cy="34" r="3"/>
    <circle cx="78" cy="34" r="3"/>
    {/* Bullet hole */}
    <circle cx="50" cy="50" r="5" fill={c}/>
    <circle cx="50" cy="50" r="2" fill="var(--bg-inset)"/>
  </g>,
};

window.SAWBLADE_ART = SAWBLADE_ART;
