// =============================================================================
// CARD ART · NOBOUND CITY — 10 archetypes + 1 mythic
// Brutalist · industrial · extreme
// =============================================================================

const NOBOUND_ART = {

  // ── CELLBLOCK xWAYS — prison cell with inmate ────────────────────────
  prison: (c) => <g>
    {/* Cell frame */}
    <rect x="14" y="14" width="72" height="72" fill={c} fillOpacity="0.08"/>
    {/* Stone wall bricks */}
    {[24, 36, 48, 60, 72].map((y, i) => (
      <path key={y} d={`M 14 ${y} L 86 ${y}`} strokeOpacity="0.25"/>
    ))}
    {/* Vertical bars — bold */}
    {[24, 36, 48, 60, 72].map((x, i) => (
      <rect key={x} x={x} y="14" width="3" height="72" fill={c} fillOpacity="0.6"/>
    ))}
    {/* Horizontal cross-bars */}
    <rect x="14" y="32" width="72" height="2" fill={c} fillOpacity="0.5"/>
    <rect x="14" y="68" width="72" height="2" fill={c} fillOpacity="0.5"/>
    {/* Inmate silhouette behind bars */}
    <circle cx="50" cy="48" r="7" fill={c} fillOpacity="0.35"/>
    <path d="M 42 56 L 42 76 L 58 76 L 58 56 Z" fill={c} fillOpacity="0.3"/>
    {/* Inmate eyes */}
    <circle cx="46" cy="47" r="1" fill={c}/>
    <circle cx="54" cy="47" r="1" fill={c}/>
    {/* Inmate number */}
    <text x="50" y="68" textAnchor="middle" fontSize="5" fontWeight="700" fill={c} stroke="none" fontFamily="monospace">07-19</text>
    {/* Cell number plate */}
    <rect x="6" y="6" width="14" height="6" fill={c} fillOpacity="0.4"/>
    <text x="13" y="11" textAnchor="middle" fontSize="5" fontWeight="700" fill="var(--bg-inset)" stroke="none" fontFamily="monospace">x12</text>
    {/* Light from outside */}
    <path d="M 86 14 L 96 4 M 86 22 L 96 12" strokeOpacity="0.4"/>
  </g>,

  // ── ASYLUM — straightjacket figure ───────────────────────────────────
  asylum: (c) => <g>
    {/* Padded cell wall pattern */}
    {[20, 32, 44, 56, 68, 80].map(y => 
      [20, 32, 44, 56, 68, 80].map(x => (
        <rect key={`${x}-${y}`} x={x-4} y={y-4} width="8" height="8" strokeOpacity="0.15"/>
      ))
    )}
    {/* Head */}
    <circle cx="50" cy="36" r="14" fill={c} fillOpacity="0.2"/>
    {/* Crazy hair */}
    <path d="M 36 28 L 30 18 M 42 22 L 38 10 M 50 20 L 50 8 M 58 22 L 62 10 M 64 28 L 70 18" strokeWidth="1.5"/>
    {/* Mouth — duct tape */}
    <rect x="38" y="42" width="24" height="3" fill={c} fillOpacity="0.5"/>
    <path d="M 38 43 L 62 43 M 38 45 L 62 45" strokeOpacity="0.7"/>
    {/* Eyes wide */}
    <circle cx="44" cy="34" r="3" fill={c} fillOpacity="0.6"/>
    <circle cx="56" cy="34" r="3" fill={c} fillOpacity="0.6"/>
    <circle cx="44" cy="34" r="1.5" fill={c}/>
    <circle cx="56" cy="34" r="1.5" fill={c}/>
    {/* Straightjacket */}
    <path d="M 32 50 L 32 90 L 68 90 L 68 50 Z" fill={c} fillOpacity="0.15"/>
    {/* Crossed arms straps */}
    <path d="M 32 58 L 68 76 M 68 58 L 32 76" strokeWidth="2"/>
    {/* Buckles */}
    <rect x="34" y="64" width="4" height="3" fill={c}/>
    <rect x="62" y="64" width="4" height="3" fill={c}/>
    <rect x="48" y="66" width="4" height="4" fill={c} fillOpacity="0.5"/>
    {/* Lacing */}
    <path d="M 50 50 L 50 90" strokeDasharray="3 2" strokeOpacity="0.5"/>
  </g>,

  // ── GRAVESTONE R.I.P. — tombstone + western dust ─────────────────────
  tomb: (c) => <g>
    {/* Dust ground */}
    <path d="M 0 84 Q 25 80 50 84 T 100 84" strokeOpacity="0.4"/>
    <path d="M 0 92 Q 25 88 50 92 T 100 92" strokeOpacity="0.3"/>
    <circle cx="14" cy="88" r="1" fill={c} fillOpacity="0.5"/>
    <circle cx="86" cy="86" r="1" fill={c} fillOpacity="0.5"/>
    {/* Tombstone */}
    <path d="M 28 84 L 28 36 Q 28 22 50 22 Q 72 22 72 36 L 72 84 Z" fill={c} fillOpacity="0.18"/>
    {/* Base */}
    <rect x="24" y="80" width="52" height="6" fill={c} fillOpacity="0.4"/>
    {/* Cross */}
    <path d="M 50 30 L 50 56 M 42 40 L 58 40" strokeWidth="2.5"/>
    {/* R.I.P. */}
    <text x="50" y="68" textAnchor="middle" fontSize="8" fontWeight="700" fill={c} stroke="none" fontFamily="monospace">R.I.P.</text>
    {/* Dates */}
    <text x="50" y="78" textAnchor="middle" fontSize="4" fill={c} stroke="none" fontFamily="monospace">x150,000</text>
    {/* Crack */}
    <path d="M 40 50 L 44 58 L 42 64" strokeOpacity="0.5"/>
    {/* Moon */}
    <circle cx="80" cy="14" r="5" fill={c} fillOpacity="0.4"/>
    <circle cx="84" cy="12" r="3" fill="var(--bg-inset)"/>
    {/* Bat silhouettes */}
    <path d="M 14 18 Q 18 14 22 18 Q 26 14 30 18 Q 22 20 14 18" fill={c} fillOpacity="0.5"/>
    {/* Cactus on side */}
    <path d="M 8 84 L 8 70 L 12 70 L 12 78 L 14 78 L 14 84" strokeWidth="1.5"/>
  </g>,

  // ── FIRE IN THE PIT — mine cart + dynamite ───────────────────────────
  mine: (c) => <g>
    {/* Tunnel arch */}
    <path d="M 8 86 L 8 50 Q 8 22 50 22 Q 92 22 92 50 L 92 86" />
    <path d="M 8 86 L 8 50 Q 8 22 50 22 Q 92 22 92 50 L 92 86 Z" fill={c} fillOpacity="0.08"/>
    {/* Mine wood beams */}
    <path d="M 14 86 L 14 30 M 86 86 L 86 30 M 14 30 L 86 30" strokeWidth="1.5"/>
    {/* Rail tracks */}
    <path d="M 14 80 L 86 80 M 14 84 L 86 84" strokeOpacity="0.6"/>
    <path d="M 22 78 L 22 86 M 32 78 L 32 86 M 42 78 L 42 86 M 52 78 L 52 86 M 62 78 L 62 86 M 72 78 L 72 86" strokeOpacity="0.3"/>
    {/* Mine cart */}
    <path d="M 32 60 L 64 60 L 60 80 L 36 80 Z" fill={c} fillOpacity="0.25"/>
    <path d="M 36 60 L 38 80 M 44 60 L 44 80 M 52 60 L 52 80 M 60 60 L 58 80" strokeOpacity="0.4"/>
    {/* Wheels */}
    <circle cx="40" cy="80" r="3" fill={c} fillOpacity="0.5"/>
    <circle cx="56" cy="80" r="3" fill={c} fillOpacity="0.5"/>
    {/* Dynamite sticks in cart */}
    <rect x="40" y="50" width="4" height="14" fill={c} fillOpacity="0.5"/>
    <rect x="46" y="46" width="4" height="18" fill={c} fillOpacity="0.5"/>
    <rect x="52" y="50" width="4" height="14" fill={c} fillOpacity="0.5"/>
    {/* Fuses */}
    <path d="M 42 50 Q 38 40 42 36" strokeDasharray="1 2"/>
    <path d="M 48 46 Q 50 36 54 32" strokeDasharray="1 2"/>
    <path d="M 54 50 Q 58 38 60 34" strokeDasharray="1 2"/>
    {/* Spark at end */}
    <circle cx="42" cy="36" r="2" fill={c}/>
    <circle cx="54" cy="32" r="2.5" fill={c}/>
    <circle cx="60" cy="34" r="2" fill={c}/>
    {/* Spark glow */}
    <path d="M 38 36 L 42 32 M 56 28 L 52 32 M 64 30 L 60 30" strokeOpacity="0.5"/>
  </g>,

  // ── DEAD SPARROW — mafia bird + fedora ───────────────────────────────
  canary: (c) => <g>
    {/* Spotlight floor */}
    <ellipse cx="50" cy="90" rx="32" ry="3" fill={c} fillOpacity="0.15"/>
    {/* Fedora */}
    <ellipse cx="50" cy="38" rx="22" ry="4" fill={c} fillOpacity="0.3"/>
    <path d="M 36 38 Q 36 22 50 22 Q 64 22 64 38" fill={c} fillOpacity="0.35"/>
    <path d="M 36 34 L 64 34" strokeWidth="1.5"/>
    {/* Hat dent */}
    <path d="M 44 26 Q 50 24 56 26" strokeOpacity="0.6"/>
    {/* Bird body */}
    <ellipse cx="50" cy="60" rx="22" ry="16" fill={c} fillOpacity="0.18"/>
    {/* Beak */}
    <path d="M 72 56 L 86 58 L 72 64 Z" fill={c} fillOpacity="0.4"/>
    {/* X eyes (dead) */}
    <path d="M 56 50 L 62 56 M 62 50 L 56 56" strokeWidth="1.5"/>
    <path d="M 44 50 L 50 56 M 50 50 L 44 56" strokeWidth="1.5"/>
    {/* Feathers */}
    <path d="M 32 60 L 24 56 M 32 64 L 24 64 M 32 68 L 24 72" strokeOpacity="0.5"/>
    {/* Tie */}
    <path d="M 46 70 L 50 76 L 54 70 L 56 86 L 44 86 Z" fill={c} fillOpacity="0.5"/>
    <path d="M 50 78 L 50 84" strokeOpacity="0.6"/>
    {/* Smoking cigarette */}
    <rect x="80" y="62" width="10" height="2" fill={c} fillOpacity="0.6"/>
    <path d="M 90 60 Q 92 56 90 52 Q 94 50 92 46" strokeDasharray="1 2"/>
  </g>,

  // ── PUNK ROCKER X — mohawk + electric guitar ─────────────────────────
  punk: (c) => <g>
    {/* Stage lights */}
    <path d="M 0 0 L 50 50 L 0 30 Z" fill={c} fillOpacity="0.05"/>
    <path d="M 100 0 L 50 50 L 100 30 Z" fill={c} fillOpacity="0.05"/>
    {/* Head */}
    <circle cx="50" cy="44" r="14" fill={c} fillOpacity="0.18"/>
    {/* Mohawk spikes */}
    <path d="M 38 30 L 40 12 M 44 26 L 44 8 M 50 24 L 50 4 M 56 26 L 56 8 M 62 30 L 60 12" strokeWidth="2.5"/>
    {/* Sunglasses */}
    <rect x="38" y="40" width="10" height="5" fill={c} fillOpacity="0.6"/>
    <rect x="52" y="40" width="10" height="5" fill={c} fillOpacity="0.6"/>
    <path d="M 48 42 L 52 42"/>
    {/* Lip ring */}
    <circle cx="50" cy="54" r="1.5" fill="none"/>
    {/* Smirk */}
    <path d="M 46 52 L 50 54 L 54 52"/>
    {/* Body / leather */}
    <path d="M 32 60 L 32 88 L 68 88 L 68 60 Z" fill={c} fillOpacity="0.18"/>
    {/* Studs */}
    {[36, 44, 52, 60].map(x => (
      <circle key={x} cx={x} cy="64" r="1.5" fill={c}/>
    ))}
    {/* Electric guitar at angle */}
    <path d="M 24 90 L 70 50 L 78 58 L 32 98 Z" fill={c} fillOpacity="0.3"/>
    <circle cx="36" cy="84" r="6" fill={c} fillOpacity="0.5"/>
    <circle cx="36" cy="84" r="2" fill={c}/>
    {/* Strings */}
    <path d="M 38 80 L 74 50 M 36 84 L 76 54 M 34 88 L 78 58" strokeOpacity="0.6"/>
  </g>,

  // ── MISERY MINE — pickaxe + canary cage ──────────────────────────────
  pickaxe: (c) => <g>
    {/* Cave wall texture */}
    <path d="M 6 84 L 14 76 L 24 80 L 34 72 L 46 78 L 56 70 L 68 76 L 78 70 L 92 80" strokeOpacity="0.4"/>
    <path d="M 8 90 L 18 84 L 28 88 L 40 82 L 52 88 L 62 80 L 74 86 L 86 80" strokeOpacity="0.25"/>
    {/* Wooden post */}
    <rect x="46" y="22" width="6" height="60" fill={c} fillOpacity="0.25"/>
    <path d="M 46 30 L 52 30 M 46 50 L 52 50 M 46 70 L 52 70" strokeOpacity="0.4"/>
    {/* Lantern hanging */}
    <rect x="56" y="20" width="14" height="20" fill={c} fillOpacity="0.18"/>
    <path d="M 52 20 L 56 20 M 56 20 Q 56 14 63 14 Q 70 14 70 20" />
    {/* Lantern light */}
    <circle cx="63" cy="28" r="4" fill={c} fillOpacity="0.6"/>
    <path d="M 56 28 L 50 30 M 70 28 L 76 30" strokeOpacity="0.4"/>
    {/* Pickaxe crossed */}
    <path d="M 12 30 L 38 56" strokeWidth="2.5"/>
    <path d="M 8 26 Q 24 24 36 28 Q 24 32 12 30 Z" fill={c} fillOpacity="0.4"/>
    <path d="M 26 30 L 38 38" strokeWidth="1.5" strokeOpacity="0.5"/>
    {/* Coal lumps */}
    <path d="M 18 70 L 24 64 L 30 70 L 26 76 L 18 76 Z" fill={c} fillOpacity="0.3"/>
    <path d="M 70 78 L 74 74 L 80 78 L 76 84 Z" fill={c} fillOpacity="0.3"/>
    {/* Sparkle on diamond */}
    <path d="M 32 72 L 34 76 L 32 80 L 30 76 Z" fill={c} fillOpacity="0.6"/>
    <path d="M 30 76 L 34 76" strokeOpacity="0.6"/>
  </g>,

  // ── DAS X-SUB — submarine cross-section ──────────────────────────────
  sub: (c) => <g>
    {/* Water waves */}
    <path d="M 0 16 Q 12 12 24 16 T 48 16 T 72 16 T 100 16" strokeOpacity="0.5"/>
    <path d="M 0 22 Q 12 18 24 22 T 48 22 T 72 22 T 100 22" strokeOpacity="0.3"/>
    {/* Bubbles */}
    <circle cx="14" cy="32" r="1.5" fill={c} fillOpacity="0.4"/>
    <circle cx="20" cy="40" r="1" fill={c} fillOpacity="0.5"/>
    <circle cx="80" cy="38" r="1.5" fill={c} fillOpacity="0.4"/>
    <circle cx="86" cy="46" r="1" fill={c} fillOpacity="0.6"/>
    {/* Sub hull (elongated capsule) */}
    <ellipse cx="50" cy="60" rx="38" ry="14" fill={c} fillOpacity="0.18"/>
    {/* Conning tower */}
    <rect x="42" y="38" width="16" height="14" fill={c} fillOpacity="0.25"/>
    <path d="M 50 38 L 50 28" />
    <circle cx="50" cy="26" r="2" fill={c}/>
    {/* Portholes */}
    <circle cx="30" cy="60" r="3.5" fill={c} fillOpacity="0.5"/>
    <circle cx="30" cy="60" r="1.5" fill={c}/>
    <circle cx="50" cy="60" r="3.5" fill={c} fillOpacity="0.5"/>
    <circle cx="50" cy="60" r="1.5" fill={c}/>
    <circle cx="70" cy="60" r="3.5" fill={c} fillOpacity="0.5"/>
    <circle cx="70" cy="60" r="1.5" fill={c}/>
    {/* Front */}
    <path d="M 12 60 L 4 56 L 4 64 Z" fill={c} fillOpacity="0.4"/>
    {/* Propeller */}
    <path d="M 88 50 L 96 56 M 88 70 L 96 64 M 88 60 L 98 60" strokeWidth="1.8"/>
    <circle cx="88" cy="60" r="2" fill={c}/>
    {/* Torpedo */}
    <rect x="20" y="74" width="22" height="3" fill={c} fillOpacity="0.4"/>
    <path d="M 42 75 L 48 77 L 42 79 Z" fill={c}/>
    {/* Sea floor */}
    <path d="M 0 90 L 30 86 L 50 90 L 70 84 L 100 90" strokeOpacity="0.4"/>
  </g>,

  // ── TRACTOR LIGHT — UFO + abduction beam ─────────────────────────────
  ufo: (c) => <g>
    {/* Stars */}
    <circle cx="12" cy="18" r="1" fill={c}/>
    <circle cx="84" cy="14" r="1" fill={c} fillOpacity="0.7"/>
    <path d="M 22 8 L 24 8 M 23 7 L 23 9" strokeOpacity="0.6"/>
    <path d="M 76 22 L 78 22 M 77 21 L 77 23" strokeOpacity="0.6"/>
    {/* UFO dome */}
    <path d="M 36 32 Q 50 16 64 32 Z" fill={c} fillOpacity="0.4"/>
    <circle cx="44" cy="26" r="2" fill={c}/>
    {/* UFO body */}
    <ellipse cx="50" cy="36" rx="34" ry="6" fill={c} fillOpacity="0.3"/>
    {/* Lights underneath */}
    <circle cx="30" cy="38" r="1.5" fill={c}/>
    <circle cx="40" cy="40" r="1.5" fill={c}/>
    <circle cx="50" cy="40" r="2" fill={c}/>
    <circle cx="60" cy="40" r="1.5" fill={c}/>
    <circle cx="70" cy="38" r="1.5" fill={c}/>
    {/* Tractor beam */}
    <path d="M 40 40 L 24 88 L 76 88 L 60 40 Z" fill={c} fillOpacity="0.12"/>
    <path d="M 40 40 L 24 88 M 60 40 L 76 88" strokeDasharray="2 2" strokeOpacity="0.5"/>
    {/* Beam horizontal rings */}
    <ellipse cx="50" cy="56" rx="11" ry="2" strokeOpacity="0.4"/>
    <ellipse cx="50" cy="68" rx="16" ry="2" strokeOpacity="0.4"/>
    <ellipse cx="50" cy="80" rx="22" ry="2" strokeOpacity="0.4"/>
    {/* Cow being abducted */}
    <ellipse cx="50" cy="62" rx="6" ry="3" fill={c} fillOpacity="0.4"/>
    <path d="M 46 60 L 44 58 M 54 60 L 56 58" />
    <circle cx="52" cy="61" r="0.5" fill={c}/>
    {/* Ground */}
    <path d="M 0 92 L 100 92" strokeOpacity="0.4"/>
    <path d="M 8 92 L 8 88 M 92 92 L 92 88"/>
  </g>,

  // ── EAST vs WEST — dual microphones + map ────────────────────────────
  mic: (c) => <g>
    {/* Crown center */}
    <path d="M 38 22 L 40 14 L 44 18 L 50 12 L 56 18 L 60 14 L 62 22 Z" fill={c} fillOpacity="0.35"/>
    <path d="M 38 22 L 62 22"/>
    <circle cx="50" cy="14" r="1.5" fill={c}/>
    {/* Two microphones facing each other */}
    {/* Left mic */}
    <rect x="14" y="32" width="14" height="22" rx="2" fill={c} fillOpacity="0.25"/>
    {[36, 41, 46, 51].map(y => (
      <path key={y} d={`M 16 ${y} L 26 ${y}`} strokeOpacity="0.5"/>
    ))}
    <path d="M 21 54 L 21 68"/>
    <path d="M 14 68 L 28 68" strokeWidth="2"/>
    <path d="M 18 68 L 18 80 M 24 68 L 24 80"/>
    <text x="21" y="90" textAnchor="middle" fontSize="6" fontWeight="700" fill={c} stroke="none" fontFamily="monospace">E</text>
    {/* Right mic */}
    <rect x="72" y="32" width="14" height="22" rx="2" fill={c} fillOpacity="0.25"/>
    {[36, 41, 46, 51].map(y => (
      <path key={y} d={`M 74 ${y} L 84 ${y}`} strokeOpacity="0.5"/>
    ))}
    <path d="M 79 54 L 79 68"/>
    <path d="M 72 68 L 86 68" strokeWidth="2"/>
    <path d="M 76 68 L 76 80 M 82 68 L 82 80"/>
    <text x="79" y="90" textAnchor="middle" fontSize="6" fontWeight="700" fill={c} stroke="none" fontFamily="monospace">W</text>
    {/* VS */}
    <text x="50" y="48" textAnchor="middle" fontSize="14" fontWeight="700" fill={c} stroke="none" fontFamily="sans-serif">VS</text>
    {/* Sound waves */}
    <path d="M 30 38 Q 36 38 38 44 Q 36 50 30 50" strokeOpacity="0.5"/>
    <path d="M 70 38 Q 64 38 62 44 Q 64 50 70 50" strokeOpacity="0.5"/>
    {/* Coast lines underneath */}
    <path d="M 6 62 L 32 62 L 32 64 L 6 64 Z" strokeOpacity="0.3" fill={c} fillOpacity="0.1"/>
    <path d="M 68 62 L 94 62 L 94 64 L 68 64 Z" strokeOpacity="0.3" fill={c} fillOpacity="0.1"/>
  </g>,

  // ── MYTHIC: THE WARDEN — throne + keys ───────────────────────────────
  'prison-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"/>
    {/* Cell wall with extra bars */}
    <rect x="18" y="18" width="64" height="64" fill={c} fillOpacity="0.18"/>
    {[26, 34, 42, 50, 58, 66, 74].map(x => (
      <rect key={x} x={x} y="18" width="2" height="64" fill={c} fillOpacity="0.55"/>
    ))}
    <path d="M 18 30 L 82 30 M 18 70 L 82 70" strokeWidth="2"/>
    {/* Center key */}
    <circle cx="50" cy="40" r="8"/>
    <circle cx="50" cy="40" r="3" fill={c}/>
    <rect x="48" y="48" width="4" height="22" fill={c} fillOpacity="0.6"/>
    <rect x="46" y="60" width="6" height="3" fill={c}/>
    <rect x="46" y="66" width="6" height="3" fill={c}/>
    {/* Skulls in corners */}
    <circle cx="14" cy="14" r="3" fill={c} fillOpacity="0.6"/>
    <circle cx="86" cy="14" r="3" fill={c} fillOpacity="0.6"/>
    <circle cx="14" cy="86" r="3" fill={c} fillOpacity="0.6"/>
    <circle cx="86" cy="86" r="3" fill={c} fillOpacity="0.6"/>
  </g>,
};

window.NOBOUND_ART = NOBOUND_ART;
