/* global React */
const { useEffect, useRef } = React;

/* ==========================================================
   HERO SCENE — layered CSS/SVG matte
   ========================================================== */

// Distant ridge / mesa silhouette
function HeroRidge() {
  return (
    <svg
      className="hero-ridge"
      viewBox="0 0 1600 80"
      preserveAspectRatio="none"
      aria-hidden="true"
    >
      <path
        d="M0 80 L0 52 L120 48 L180 38 L260 44 L340 30 L440 36 L520 28 L640 34 L740 26 L860 32 L960 22 L1080 30 L1200 24 L1320 34 L1440 30 L1600 38 L1600 80 Z"
        fill="#8a7148"
        opacity="0.55"
      />
      <path
        d="M0 80 L0 64 L100 60 L240 54 L380 60 L520 52 L680 58 L840 50 L1000 56 L1180 50 L1360 58 L1520 54 L1600 60 L1600 80 Z"
        fill="#7a6240"
        opacity="0.7"
      />
    </svg>
  );
}

// Buildings flanking the street — flat ochre planes with hard shadows
function HeroBuildings({ parallaxY = 0 }) {
  return (
    <svg
      className="hero-buildings"
      viewBox="0 0 1600 900"
      preserveAspectRatio="xMidYMax slice"
      aria-hidden="true"
      style={{ transform: `translateY(${parallaxY}px)` }}
    >
      {/* LEFT block — receding */}
      {/* Building L1 (closest) */}
      <g>
        <rect x="-40" y="380" width="320" height="520" fill="#8a6a3e" />
        <polygon points="-40,380 280,380 280,340 -40,300" fill="#a8865a" />
        {/* false-front top */}
        <rect x="-40" y="340" width="320" height="44" fill="#7a5a32" />
        {/* porch shadow */}
        <rect x="-40" y="640" width="320" height="60" fill="#3d2e1f" opacity="0.55" />
        {/* posts */}
        <rect x="40" y="540" width="8" height="160" fill="#3d2e1f" />
        <rect x="160" y="540" width="8" height="160" fill="#3d2e1f" />
        <rect x="240" y="540" width="8" height="160" fill="#3d2e1f" />
        {/* windows */}
        <rect x="20" y="430" width="60" height="80" fill="#1a1612" />
        <rect x="120" y="430" width="60" height="80" fill="#1a1612" />
        <rect x="220" y="430" width="40" height="80" fill="#1a1612" />
        {/* sign plank */}
        <rect x="40" y="396" width="200" height="18" fill="#3d2e1f" />
      </g>

      {/* Building L2 */}
      <g>
        <rect x="280" y="450" width="220" height="450" fill="#a8865a" />
        <rect x="280" y="430" width="220" height="28" fill="#8a6a3e" />
        <rect x="320" y="490" width="50" height="70" fill="#1a1612" />
        <rect x="410" y="490" width="50" height="70" fill="#1a1612" />
        <rect x="320" y="600" width="140" height="100" fill="#1a1612" opacity="0.4" />
      </g>

      {/* Building L3 (further) */}
      <g>
        <rect x="500" y="500" width="160" height="400" fill="#b89668" />
        <rect x="500" y="486" width="160" height="20" fill="#9a7846" />
        <rect x="530" y="540" width="40" height="55" fill="#2e2722" />
        <rect x="600" y="540" width="40" height="55" fill="#2e2722" />
      </g>

      {/* Building L4 */}
      <g>
        <rect x="660" y="540" width="100" height="360" fill="#c4a577" />
        <rect x="680" y="568" width="30" height="40" fill="#3d2e1f" />
      </g>

      {/* RIGHT block — mirrored receding */}
      {/* Building R4 */}
      <g>
        <rect x="840" y="540" width="100" height="360" fill="#c4a577" />
        <rect x="890" y="568" width="30" height="40" fill="#3d2e1f" />
      </g>

      {/* Building R3 */}
      <g>
        <rect x="940" y="500" width="160" height="400" fill="#b89668" />
        <rect x="940" y="486" width="160" height="20" fill="#9a7846" />
        <rect x="960" y="540" width="40" height="55" fill="#2e2722" />
        <rect x="1030" y="540" width="40" height="55" fill="#2e2722" />
      </g>

      {/* Building R2 */}
      <g>
        <rect x="1100" y="450" width="220" height="450" fill="#a8865a" />
        <rect x="1100" y="430" width="220" height="28" fill="#8a6a3e" />
        <rect x="1140" y="490" width="50" height="70" fill="#1a1612" />
        <rect x="1230" y="490" width="50" height="70" fill="#1a1612" />
        <rect x="1140" y="600" width="140" height="100" fill="#1a1612" opacity="0.4" />
      </g>

      {/* Building R1 (closest) */}
      <g>
        <rect x="1320" y="380" width="360" height="520" fill="#8a6a3e" />
        <polygon points="1320,380 1640,300 1640,340 1320,340" fill="#a8865a" />
        <rect x="1320" y="340" width="320" height="44" fill="#7a5a32" />
        <rect x="1320" y="640" width="320" height="60" fill="#3d2e1f" opacity="0.55" />
        <rect x="1352" y="540" width="8" height="160" fill="#3d2e1f" />
        <rect x="1472" y="540" width="8" height="160" fill="#3d2e1f" />
        <rect x="1592" y="540" width="8" height="160" fill="#3d2e1f" />
        <rect x="1340" y="430" width="40" height="80" fill="#1a1612" />
        <rect x="1420" y="430" width="60" height="80" fill="#1a1612" />
        <rect x="1520" y="430" width="60" height="80" fill="#1a1612" />
        <rect x="1360" y="396" width="200" height="18" fill="#3d2e1f" />
      </g>

      {/* Hard cast shadows on street from each side — high noon, slightly past zenith */}
      <polygon points="280,700 280,760 760,720 760,700" fill="#3d2e1f" opacity="0.45" />
      <polygon points="500,640 500,680 760,660 760,640" fill="#3d2e1f" opacity="0.35" />
      <polygon points="1320,700 1320,760 840,720 840,700" fill="#3d2e1f" opacity="0.45" />
      <polygon points="1100,640 1100,680 840,660 840,640" fill="#3d2e1f" opacity="0.35" />
    </svg>
  );
}

// Receding street plane
function HeroStreet() {
  return (
    <svg
      className="hero-street"
      viewBox="0 0 1600 380"
      preserveAspectRatio="xMidYMax slice"
      aria-hidden="true"
    >
      <defs>
        <linearGradient id="streetGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#a8865a" />
          <stop offset="40%" stopColor="#8a6a3e" />
          <stop offset="100%" stopColor="#5a3e1e" />
        </linearGradient>
      </defs>
      <polygon points="640,0 960,0 1600,380 0,380" fill="url(#streetGrad)" />
      {/* wheel ruts */}
      <path
        d="M 720 0 L 320 380 L 360 380 L 740 0 Z"
        fill="#3d2e1f"
        opacity="0.25"
      />
      <path
        d="M 880 0 L 1280 380 L 1240 380 L 860 0 Z"
        fill="#3d2e1f"
        opacity="0.25"
      />
      {/* horizon dust strip */}
      <rect x="640" y="0" width="320" height="4" fill="#cbc5a8" opacity="0.6" />
    </svg>
  );
}

// Tiny opponent silhouette in the distance
function HeroOpponent() {
  return (
    <svg viewBox="0 0 22 56" aria-hidden="true">
      {/* hat */}
      <ellipse cx="11" cy="9" rx="9" ry="2.2" fill="#1a1612" />
      <path d="M 6 9 Q 6 3 11 3 Q 16 3 16 9 Z" fill="#1a1612" />
      {/* head */}
      <rect x="9" y="9" width="4" height="5" fill="#1a1612" />
      {/* coat */}
      <path
        d="M 5 14 L 17 14 L 18 38 L 14 38 L 13 28 L 9 28 L 8 38 L 4 38 Z"
        fill="#1a1612"
      />
      {/* legs */}
      <rect x="7" y="38" width="3.5" height="16" fill="#1a1612" />
      <rect x="11.5" y="38" width="3.5" height="16" fill="#1a1612" />
      {/* boots */}
      <rect x="6" y="52" width="5" height="4" fill="#0d0a08" />
      <rect x="11" y="52" width="5" height="4" fill="#0d0a08" />
    </svg>
  );
}

/* ==========================================================
   HUD REVOLVER — single-action, leather grip, brass frame
   ========================================================== */
function HudRevolver({ hammerTwitch }) {
  return (
    <svg
      className="hud-revolver"
      viewBox="0 0 600 400"
      aria-hidden="true"
      style={{
        // anchored to the bottom-right via CSS, slightly rotated
      }}
    >
      <defs>
        <linearGradient id="brassG" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#d4b27a" />
          <stop offset="50%" stopColor="#b08d57" />
          <stop offset="100%" stopColor="#7a5a32" />
        </linearGradient>
        <linearGradient id="steelG" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5a5048" />
          <stop offset="50%" stopColor="#3a322a" />
          <stop offset="100%" stopColor="#1a1612" />
        </linearGradient>
        <linearGradient id="gripG" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#8a5a32" />
          <stop offset="100%" stopColor="#3d2410" />
        </linearGradient>
      </defs>

      {/* Hand / forearm coming from bottom-right corner */}
      <path
        d="M 380 400 L 600 400 L 600 240 Q 540 250 500 270 Q 460 280 420 290 Z"
        fill="#c89a6a"
      />
      <path
        d="M 420 290 Q 460 280 500 270 Q 540 250 600 240 L 600 220 Q 530 230 490 250 Q 450 270 410 280 Z"
        fill="#a87a4a"
        opacity="0.6"
      />

      {/* Grip — leather */}
      <path
        d="M 280 240 L 360 220 L 410 280 L 380 320 L 300 320 Z"
        fill="url(#gripG)"
        stroke="#1a1612"
        strokeWidth="2"
      />
      {/* grip pin / medallion */}
      <circle cx="340" cy="270" r="4" fill="#b08d57" />
      <circle cx="340" cy="270" r="1.5" fill="#3d2410" />
      {/* grip texture lines */}
      <path d="M 295 248 L 365 230 M 300 270 L 380 252 M 305 292 L 390 274"
        stroke="#1a1612" strokeWidth="0.5" opacity="0.4" fill="none" />

      {/* Frame — steel + brass */}
      <path
        d="M 130 160 L 290 160 L 320 200 L 360 220 L 280 240 L 250 240 L 220 230 L 130 230 Z"
        fill="url(#steelG)"
        stroke="#1a1612"
        strokeWidth="2"
      />
      {/* Brass trigger guard */}
      <path
        d="M 250 240 L 290 240 L 305 270 Q 295 280 280 278 L 270 260 Z"
        fill="url(#brassG)"
        stroke="#1a1612"
        strokeWidth="1.5"
      />
      {/* Trigger */}
      <path
        d="M 275 248 L 282 270 L 278 274 L 270 252 Z"
        fill="#1a1612"
      />

      {/* Cylinder */}
      <ellipse cx="200" cy="195" rx="42" ry="40" fill="url(#steelG)" stroke="#1a1612" strokeWidth="2" />
      <ellipse cx="200" cy="195" rx="32" ry="30" fill="#2a221c" />
      {/* chambers */}
      {[0, 60, 120, 180, 240, 300].map((deg) => {
        const r = 22;
        const rad = (deg * Math.PI) / 180;
        const cx = 200 + Math.cos(rad) * r;
        const cy = 195 + Math.sin(rad) * r;
        return <circle key={deg} cx={cx} cy={cy} r="5" fill="#0d0a08" />;
      })}
      <circle cx="200" cy="195" r="3" fill="#b08d57" />
      {/* cylinder fluting highlight */}
      <ellipse cx="200" cy="180" rx="28" ry="4" fill="#d4b27a" opacity="0.25" />

      {/* Barrel — long, octagonal-suggestive */}
      <path
        d="M 50 175 L 140 168 L 140 205 L 50 200 Z"
        fill="url(#steelG)"
        stroke="#1a1612"
        strokeWidth="2"
      />
      {/* barrel top highlight */}
      <rect x="50" y="172" width="92" height="4" fill="#7a7068" opacity="0.7" />
      {/* front sight */}
      <polygon points="58,172 64,158 70,172" fill="#1a1612" />
      {/* muzzle */}
      <ellipse cx="50" cy="187" rx="4" ry="13" fill="#0d0a08" />
      <ellipse cx="50" cy="187" rx="2" ry="9" fill="#1a1612" />

      {/* Hammer (twitches) */}
      <g
        className={hammerTwitch ? "hammer-twitch" : ""}
        style={{ transformOrigin: "270px 175px" }}
      >
        <path
          d="M 260 175 L 280 155 L 290 165 L 280 180 Z"
          fill="#3a322a"
          stroke="#1a1612"
          strokeWidth="1.5"
        />
        <circle cx="270" cy="175" r="3" fill="#1a1612" />
      </g>

      {/* Brass frame accent over top strap */}
      <path
        d="M 240 160 L 290 160 L 295 170 L 240 170 Z"
        fill="url(#brassG)"
        stroke="#1a1612"
        strokeWidth="1"
      />

      {/* Subtle scratch / wear lines */}
      <path d="M 70 185 L 130 182" stroke="#7a7068" strokeWidth="0.8" opacity="0.5" />
      <path d="M 80 195 L 125 193" stroke="#1a1612" strokeWidth="0.5" opacity="0.5" />
    </svg>
  );
}

/* ==========================================================
   DUST PARTICLES — canvas
   ========================================================== */
function DustCanvas({ scrollSpeed, reduced }) {
  const ref = useRef(null);
  const rafRef = useRef(0);
  const speedRef = useRef(scrollSpeed);

  useEffect(() => { speedRef.current = scrollSpeed; }, [scrollSpeed]);

  useEffect(() => {
    if (reduced) return;
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let w = canvas.width = canvas.offsetWidth * window.devicePixelRatio;
    let h = canvas.height = canvas.offsetHeight * window.devicePixelRatio;
    const dpr = window.devicePixelRatio;

    const N = 80;
    const particles = Array.from({ length: N }, () => ({
      x: Math.random() * w,
      y: Math.random() * h,
      r: (0.5 + Math.random() * 1.8) * dpr,
      vx: (0.15 + Math.random() * 0.4) * dpr,
      vy: (Math.random() - 0.5) * 0.05 * dpr,
      a: 0.15 + Math.random() * 0.45,
    }));

    const onResize = () => {
      w = canvas.width = canvas.offsetWidth * window.devicePixelRatio;
      h = canvas.height = canvas.offsetHeight * window.devicePixelRatio;
    };
    window.addEventListener("resize", onResize);

    const tick = () => {
      ctx.clearRect(0, 0, w, h);
      const mult = 1 + speedRef.current * 2.5;
      for (const p of particles) {
        p.x += p.vx * mult;
        p.y += p.vy;
        if (p.x > w + 10) { p.x = -10; p.y = Math.random() * h; }
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(236, 226, 200, ${p.a})`;
        ctx.fill();
      }
      rafRef.current = requestAnimationFrame(tick);
    };

    const start = () => {
      if (rafRef.current) return; // already running
      tick();
    };
    const stop = () => {
      if (rafRef.current) {
        cancelAnimationFrame(rafRef.current);
        rafRef.current = 0;
      }
    };

    // Resume when page becomes visible after backgrounding
    const onVisibility = () => {
      if (document.visibilityState === "visible") start();
      else stop();
    };
    document.addEventListener("visibilitychange", onVisibility);

    // Resume / pause when canvas enters / leaves viewport
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) start();
          else stop();
        }
      },
      { threshold: 0 }
    );
    observer.observe(canvas);

    start();

    return () => {
      stop();
      window.removeEventListener("resize", onResize);
      document.removeEventListener("visibilitychange", onVisibility);
      observer.disconnect();
    };
  }, [reduced]);

  return <canvas className="hero-dust" ref={ref} aria-hidden="true" />;
}

/* ==========================================================
   PILLAR ICONS
   ========================================================== */
function IconRevolver() {
  return (
    <svg viewBox="0 0 64 64" className="pillar-icon" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" strokeLinejoin="miter" aria-hidden="true">
      {/* barrel */}
      <rect x="6" y="26" width="28" height="8" />
      <line x1="6" y1="26" x2="6" y2="34" />
      {/* cylinder */}
      <circle cx="38" cy="30" r="9" />
      <circle cx="38" cy="30" r="2" fill="currentColor" />
      <circle cx="38" cy="23" r="1.2" fill="currentColor" />
      <circle cx="44" cy="27" r="1.2" fill="currentColor" />
      <circle cx="44" cy="33" r="1.2" fill="currentColor" />
      <circle cx="38" cy="37" r="1.2" fill="currentColor" />
      <circle cx="32" cy="33" r="1.2" fill="currentColor" />
      <circle cx="32" cy="27" r="1.2" fill="currentColor" />
      {/* trigger guard */}
      <path d="M 41 36 L 44 42 Q 41 44 38 42 L 36 38" />
      {/* grip */}
      <path d="M 44 38 L 50 52 L 42 54 L 36 42" />
      {/* hammer */}
      <path d="M 46 22 L 50 18 L 52 20 L 48 24" />
    </svg>
  );
}

function IconStar() {
  return (
    <svg viewBox="0 0 64 64" className="pillar-icon" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="miter" aria-hidden="true">
      {/* 5-point sheriff star with rounded points */}
      <path d="M 32 6
               L 36 24
               L 56 24
               L 40 36
               L 46 56
               L 32 44
               L 18 56
               L 24 36
               L 8 24
               L 28 24 Z" />
      <circle cx="32" cy="32" r="3" fill="currentColor" />
      {/* tiny circles at each point */}
      <circle cx="32" cy="6" r="1.4" fill="currentColor" />
      <circle cx="56" cy="24" r="1.4" fill="currentColor" />
      <circle cx="46" cy="56" r="1.4" fill="currentColor" />
      <circle cx="18" cy="56" r="1.4" fill="currentColor" />
      <circle cx="8" cy="24" r="1.4" fill="currentColor" />
    </svg>
  );
}

function IconShield() {
  return (
    <svg viewBox="0 0 64 64" className="pillar-icon" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="miter" aria-hidden="true">
      {/* leather shield body */}
      <path d="M 32 6 L 54 14 L 52 36 Q 50 50 32 58 Q 14 50 12 36 L 10 14 Z" />
      {/* brass studs */}
      <circle cx="20" cy="18" r="1.6" fill="currentColor" />
      <circle cx="44" cy="18" r="1.6" fill="currentColor" />
      <circle cx="20" cy="44" r="1.6" fill="currentColor" />
      <circle cx="44" cy="44" r="1.6" fill="currentColor" />
      {/* crossed-bar emblem */}
      <line x1="22" y1="22" x2="42" y2="42" />
      <line x1="42" y1="22" x2="22" y2="42" />
      <circle cx="32" cy="32" r="6" />
    </svg>
  );
}

/* ==========================================================
   ROSTER SILHOUETTES — flat black blobs with signature shapes
   ========================================================== */

// Riley — long duster + weathered hat
function SilRiley() {
  return (
    <svg viewBox="0 0 90 220" aria-hidden="true">
      {/* hat (weathered, brim down on one side) */}
      <ellipse cx="45" cy="32" rx="34" ry="5.5" fill="#1a1612" />
      <path d="M 22 32 Q 22 12 45 12 Q 68 12 68 32 Z" fill="#1a1612" />
      {/* hat-brim sag */}
      <path d="M 14 30 Q 25 38 36 32 Z" fill="#1a1612" />
      {/* head */}
      <ellipse cx="45" cy="42" rx="9" ry="11" fill="#1a1612" />
      {/* neck */}
      <rect x="42" y="50" width="6" height="8" fill="#1a1612" />
      {/* shoulders + long duster — flares wide at hem */}
      <path
        d="M 24 60
           Q 18 80 14 120
           L 8 200
           L 82 200
           L 76 120
           Q 72 80 66 60
           Q 58 56 45 56
           Q 32 56 24 60 Z"
        fill="#1a1612"
      />
      {/* duster center vent suggestion */}
      <path d="M 45 70 L 45 200" stroke="#0d0a08" strokeWidth="1.2" opacity="0.6" />
      {/* boots peeking */}
      <rect x="32" y="200" width="10" height="14" fill="#0d0a08" />
      <rect x="48" y="200" width="10" height="14" fill="#0d0a08" />
      {/* hat band highlight */}
      <rect x="22" y="29" width="46" height="2" fill="#0d0a08" opacity="0.5" />
    </svg>
  );
}

// Doc — wire-rim spectacles glint + neat vest, narrower silhouette
function SilDoc() {
  return (
    <svg viewBox="0 0 80 220" aria-hidden="true">
      {/* bowler-ish small-brim hat */}
      <ellipse cx="40" cy="28" rx="22" ry="4" fill="#1a1612" />
      <path d="M 24 28 Q 24 10 40 10 Q 56 10 56 28 Z" fill="#1a1612" />
      {/* head */}
      <ellipse cx="40" cy="40" rx="9" ry="11" fill="#1a1612" />
      {/* spectacles glint — two small bone-colored circles */}
      <circle cx="36" cy="40" r="2.5" fill="#ece2c8" opacity="0.85" />
      <circle cx="44" cy="40" r="2.5" fill="#ece2c8" opacity="0.85" />
      <line x1="38.5" y1="40" x2="41.5" y2="40" stroke="#ece2c8" strokeWidth="0.8" opacity="0.85" />
      {/* neck */}
      <rect x="37" y="49" width="6" height="6" fill="#1a1612" />
      {/* tidy shoulders + vest body — slim */}
      <path
        d="M 24 56
           L 22 96
           L 24 200
           L 56 200
           L 58 96
           L 56 56
           Q 48 52 40 52
           Q 32 52 24 56 Z"
        fill="#1a1612"
      />
      {/* watch chain — little brass arc */}
      <path d="M 32 86 Q 40 96 48 86" stroke="#b08d57" strokeWidth="1.2" fill="none" opacity="0.8" />
      <circle cx="32" cy="86" r="1.2" fill="#b08d57" opacity="0.8" />
      <circle cx="48" cy="86" r="1.2" fill="#b08d57" opacity="0.8" />
      {/* trousers — visible at hem */}
      <rect x="30" y="160" width="9" height="44" fill="#0d0a08" />
      <rect x="41" y="160" width="9" height="44" fill="#0d0a08" />
      {/* boots */}
      <rect x="28" y="200" width="13" height="12" fill="#0d0a08" />
      <rect x="39" y="200" width="13" height="12" fill="#0d0a08" />
    </svg>
  );
}

// Cassidy — slim gambler/gunslinger: pinch-front hat, frock coat, cigar glint, hip holster
function SilCassidy() {
  return (
    <svg viewBox="0 0 90 220" aria-hidden="true">
      {/* pinch-front hat with sharp crease */}
      <ellipse cx="45" cy="30" rx="28" ry="4" fill="#1a1612" />
      <path d="M 28 30 Q 28 8 45 8 Q 62 8 62 30 Z" fill="#1a1612" />
      {/* crown crease — subtle highlight line */}
      <path d="M 45 10 L 45 28" stroke="#0d0a08" strokeWidth="1.2" opacity="0.6" />
      {/* hat band */}
      <rect x="28" y="26" width="34" height="2" fill="#0d0a08" opacity="0.7" />

      {/* head — narrow */}
      <ellipse cx="45" cy="42" rx="8" ry="11" fill="#1a1612" />
      {/* cigar — tiny stub at mouth, brass-glint tip */}
      <rect x="51" y="44" width="6" height="1.8" fill="#1a1612" />
      <circle cx="57.5" cy="44.9" r="1" fill="#d4b27a" />

      {/* neck + kerchief knot */}
      <rect x="42" y="50" width="6" height="6" fill="#1a1612" />
      <path d="M 38 56 L 52 56 L 50 62 L 40 62 Z" fill="#1a1612" />

      {/* SLIM TORSO — open frock coat, narrow waist */}
      <path
        d="M 28 58
           L 22 110
           L 26 160
           L 64 160
           L 68 110
           L 62 58
           Q 54 54 45 54
           Q 36 54 28 58 Z"
        fill="#1a1612"
      />
      {/* coat open — V-shape revealing waistcoat (slightly lighter) */}
      <path
        d="M 38 58 L 45 96 L 52 58 Z"
        fill="#2a221c"
      />
      {/* watch chain across waistcoat */}
      <path d="M 40 84 Q 45 90 50 84" stroke="#b08d57" strokeWidth="0.8" fill="none" opacity="0.85" />
      <circle cx="50" cy="84" r="1" fill="#b08d57" />

      {/* arms — relaxed at sides, hand near holster on right */}
      <path d="M 28 60 L 18 116 L 22 138 L 30 110 Z" fill="#1a1612" />
      <path d="M 62 60 L 72 110 L 70 138 L 64 110 Z" fill="#1a1612" />
      {/* gun-hand — small dark blob hovering near holster */}
      <ellipse cx="71" cy="124" rx="4.5" ry="3.5" fill="#1a1612" />

      {/* hip holster — single, low on right side, brass tie-down */}
      <path d="M 64 126 L 76 126 L 74 152 L 66 152 Z" fill="#3d2410" />
      <path d="M 64 126 L 76 126 L 74 152 L 66 152 Z" fill="#1a1612" opacity="0.55" />
      {/* tie-down strap to thigh */}
      <line x1="68" y1="152" x2="68" y2="172" stroke="#1a1612" strokeWidth="1.6" />
      {/* gun butt sticking up */}
      <path d="M 65 122 L 73 122 L 72 128 L 66 128 Z" fill="#0d0a08" />
      <circle cx="68.5" cy="125" r="0.8" fill="#b08d57" />

      {/* belt — raised */}
      <rect x="22" y="122" width="46" height="6" fill="#3d2410" />
      <rect x="22" y="122" width="46" height="6" fill="#1a1612" opacity="0.5" />
      <rect x="42" y="123" width="6" height="4" fill="#b08d57" />

      {/* trousers — slim, slight flare for boot-cut */}
      <path d="M 28 160 L 26 200 L 44 200 L 45 160 Z" fill="#0d0a08" />
      <path d="M 62 160 L 64 200 L 46 200 L 45 160 Z" fill="#0d0a08" />

      {/* tall narrow riding boots */}
      <path d="M 26 200 L 24 214 L 42 214 L 44 200 Z" fill="#0d0a08" />
      <path d="M 64 200 L 66 214 L 48 214 L 46 200 Z" fill="#0d0a08" />
      {/* boot heel notch */}
      <rect x="24" y="212" width="18" height="2" fill="#000" />
      <rect x="48" y="212" width="18" height="2" fill="#000" />
      {/* spur — tiny brass star at heel */}
      <circle cx="22" cy="210" r="1.4" fill="#b08d57" />
      <circle cx="68" cy="210" r="1.4" fill="#b08d57" />
    </svg>
  );
}

// Black-Eye — tall, beaded leather + fringe vest + single feather
function SilBlackEye() {
  return (
    <svg viewBox="0 0 90 240" aria-hidden="true">
      {/* feather — single, behind head, angled back */}
      <path
        d="M 58 4 Q 68 14 64 30 Q 60 26 58 14 Z"
        fill="#1a1612"
      />
      {/* feather quill */}
      <line x1="56" y1="14" x2="60" y2="32" stroke="#1a1612" strokeWidth="1.4" />
      {/* feather subtle fringe */}
      <line x1="60" y1="10" x2="64" y2="12" stroke="#0d0a08" strokeWidth="0.7" />
      <line x1="62" y1="16" x2="66" y2="18" stroke="#0d0a08" strokeWidth="0.7" />

      {/* head — tall person, no hat */}
      <ellipse cx="45" cy="36" rx="10" ry="13" fill="#1a1612" />
      {/* hair length / side hint */}
      <path d="M 35 38 Q 32 56 36 70" stroke="#1a1612" strokeWidth="6" fill="none" strokeLinecap="round" />
      <path d="M 55 38 Q 58 56 54 70" stroke="#1a1612" strokeWidth="6" fill="none" strokeLinecap="round" />

      {/* neck */}
      <rect x="42" y="48" width="6" height="6" fill="#1a1612" />

      {/* tall torso — fringed vest */}
      <path
        d="M 22 56
           L 18 100
           L 20 180
           L 70 180
           L 72 100
           L 68 56
           Q 56 52 45 52
           Q 34 52 22 56 Z"
        fill="#1a1612"
      />
      {/* FRINGE — tiny vertical strokes along bottom of vest */}
      {Array.from({ length: 14 }).map((_, i) => {
        const x = 22 + i * 3.5;
        const len = 8 + ((i % 3) * 3);
        return <line key={i} x1={x} y1="118" x2={x} y2={118 + len} stroke="#1a1612" strokeWidth="2" />;
      })}
      {/* fringe along arms */}
      {Array.from({ length: 5 }).map((_, i) => {
        const y = 86 + i * 6;
        return <line key={i} x1="20" y1={y} x2="14" y2={y + 5} stroke="#1a1612" strokeWidth="1.6" />;
      })}
      {Array.from({ length: 5 }).map((_, i) => {
        const y = 86 + i * 6;
        return <line key={`r${i}`} x1="70" y1={y} x2="76" y2={y + 5} stroke="#1a1612" strokeWidth="1.6" />;
      })}

      {/* BEADED NECKLACE — small dots across upper chest */}
      {[0.2, 0.35, 0.5, 0.65, 0.8].map((t, i) => {
        const x = 30 + (60 - 30) * t;
        const y = 64 + Math.sin(t * Math.PI) * 3;
        return <circle key={i} cx={x} cy={y} r="1.4" fill="#b08d57" />;
      })}
      <path d="M 30 64 Q 45 70 60 64" stroke="#7a5a32" strokeWidth="0.6" fill="none" />

      {/* legs — tall */}
      <rect x="28" y="180" width="14" height="44" fill="#0d0a08" />
      <rect x="48" y="180" width="14" height="44" fill="#0d0a08" />
      {/* moccasin-style boots — slightly softer shape */}
      <path d="M 26 224 Q 26 234 36 234 L 44 234 L 44 224 Z" fill="#0d0a08" />
      <path d="M 46 224 L 46 234 L 54 234 Q 64 234 64 224 Z" fill="#0d0a08" />
    </svg>
  );
}

/* ==========================================================
   Export to window
   ========================================================== */
Object.assign(window, {
  HeroRidge, HeroBuildings, HeroStreet, HeroOpponent,
  HudRevolver, DustCanvas,
  IconRevolver, IconStar, IconShield,
  SilRiley, SilDoc, SilCassidy, SilBlackEye,
});
