import * as React from "react";
import { ARCADE_GAMES, CRASH_GAMES, GAMES_BY_SLUG } from "@spinza/games/client";
import type { GameDefinition, SymbolShape, SymbolStyle, SymbolTier } from "@spinza/game-core/client";
import { cn } from "@/lib/utils";
import { SymbolSvg, svgArc, svgPolygon, svgStar } from "./symbol-svg";

/* ------------------------------------------------------------------------
   Spinza key art — 35 hand-composed posters, one scene per game.
   Slot posters are built from the game's own reel symbols (SymbolSvg mirrors
   the PixiJS renderer); the 10 Risk Games and 5 Beyond Slots originals have
   no reels, so their scenes are composed from primitives around each game's
   mechanic (rising multiplier ladder + the big-button verb as a solid pill).
   Pure inline SVG, deterministic (seeded PRNG only for star fields /
   particles), no images, filters used sparingly.
   ------------------------------------------------------------------------ */

export type ArtVariant = "card" | "hero" | "banner" | "tile";

export interface ArtPalette {
  primary: string;
  secondary: string;
  glow: string;
  bg: string;
}

export interface GameArtProps {
  slug: string;
  name: string;
  palette: ArtPalette;
  backdrop?: string;
  particles?: string;
  variant?: ArtVariant;
  className?: string;
  /** Render the game name inside the artwork (default true). */
  showName?: boolean;
  /** Decorative by default; pass a label to expose the art to assistive tech. */
  label?: string;
}

/** Ambience → particle system for the non-slot games (their definitions carry no `particles`). */
const AMBIENCE_PARTICLES: Record<string, string> = { lunar: "stars", ocean: "bubbles", space: "stars", heist: "coins", fire: "fire", void: "stars", reactor: "energy", obsidian: "dust", arcade: "confetti", quantum: "energy", jungle: "dust" };

/** Presentation hints per game, derived from the game library (slots, risk games and originals). */
export const GAME_PRESENTATION: Record<string, { backdrop: string; particles: string }> = Object.fromEntries([
  ...[...GAMES_BY_SLUG.values()].map((g) => [g.slug, { backdrop: g.presentation.backdrop, particles: g.presentation.particles }] as const),
  ...[...CRASH_GAMES, ...ARCADE_GAMES].map((g) => [g.slug, { backdrop: g.presentation.scene, particles: AMBIENCE_PARTICLES[g.presentation.ambience] ?? "stars" }] as const),
]);

/* ------------------------------------------------------------ seeded PRNG */

function hashString(s: string): number {
  let h = 0x811c9dc5;
  for (let i = 0; i < s.length; i++) {
    h ^= s.charCodeAt(i);
    h = Math.imul(h, 0x01000193);
  }
  return h >>> 0;
}

function mulberry32(seed: number): () => number {
  let a = seed >>> 0;
  return () => {
    a = (a + 0x6d2b79f5) >>> 0;
    let t = a;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

/* ------------------------------------------------------------------ stage */

const FONT = "var(--font-geist-sans), Geist, Inter, ui-sans-serif, system-ui, sans-serif";
const MONO = "var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace";
const f = (n: number) => Math.round(n * 100) / 100;

interface Stage {
  W: number;
  H: number;
  v: ArtVariant;
  slug: string;
  /** Focal centre and unit radius of the composition. */
  cx: number;
  cy: number;
  R: number;
  p: ArtPalette;
  id: string;
  rnd: () => number;
  game?: GameDefinition;
  /** Reel symbol style by id (falls back to a palette gem). */
  sym: (id: string) => SymbolStyle;
  tier: (id: string) => SymbolTier;
  /** Tile variant: drop fine detail. */
  compact: boolean;
}

const DIMS: Record<ArtVariant, { w: number; h: number }> = {
  card: { w: 360, h: 480 },
  tile: { w: 240, h: 240 },
  hero: { w: 1680, h: 720 },
  banner: { w: 1600, h: 600 },
};

function focal(v: ArtVariant, W: number, H: number, showName: boolean): { cx: number; cy: number; R: number } {
  switch (v) {
    case "card":
      return { cx: W / 2, cy: showName ? H * 0.385 : H * 0.5, R: W * 0.405 };
    case "tile":
      return { cx: W / 2, cy: H / 2, R: W * 0.4 };
    case "hero":
      return { cx: W * 0.7, cy: H * 0.5, R: H * 0.42 };
    case "banner":
      return { cx: W * 0.72, cy: H * 0.5, R: H * 0.4 };
  }
}

/* ---------------------------------------------------------------- helpers */

/** Many small discs as a single path (star fields, snow, embers, bubbles). */
function dots(list: Array<[number, number, number]>): string {
  let d = "";
  for (const [x, y, r] of list) d += `M${f(x - r)} ${f(y)}a${f(r)} ${f(r)} 0 1 0 ${f(r * 2)} 0a${f(r)} ${f(r)} 0 1 0 ${f(-r * 2)} 0 `;
  return d;
}

function scatterDots(s: Stage, n: number, box: [number, number, number, number], rMin: number, rMax: number): string {
  const list: Array<[number, number, number]> = [];
  for (let i = 0; i < n; i++) list.push([box[0] + s.rnd() * box[2], box[1] + s.rnd() * box[3], rMin + s.rnd() * (rMax - rMin)]);
  return dots(list);
}

function Sym({ s, id, x, y, size, rotate, opacity, plate, halo }: { s: Stage; id: string; x: number; y: number; size: number; rotate?: number; opacity?: number; plate?: boolean; halo?: boolean }) {
  return <SymbolSvg style={s.sym(id)} tier={s.tier(id)} size={size} x={x} y={y} rotate={rotate} opacity={opacity} plate={plate} halo={halo} />;
}

/** Small rounded label pill (feature tags, multiplier badges). */
function Pill({ x, y, text, color, bg = "#000", size = 12, w, ink = "#fff", opacity = 1 }: { x: number; y: number; text: string; color: string; bg?: string; size?: number; w?: number; ink?: string; opacity?: number }) {
  const width = w ?? text.length * size * 0.66 + size * 1.2;
  const h = size * 1.7;
  return (
    <g opacity={opacity}>
      <rect x={f(x - width / 2)} y={f(y - h / 2)} width={f(width)} height={f(h)} rx={f(h / 2)} fill={bg} fillOpacity={0.72} stroke={color} strokeOpacity={0.8} strokeWidth={1} />
      <text x={f(x)} y={f(y)} textAnchor="middle" dominantBaseline="central" fontSize={f(size)} fontWeight={700} fill={ink} style={{ fontFamily: FONT, letterSpacing: "0.08em" }}>
        {text}
      </text>
    </g>
  );
}

function Small({ x, y, text, color, size = 12, anchor = "middle", weight = 600, tracking = "0.12em", opacity = 1, rotate }: { x: number; y: number; text: string; color: string; size?: number; anchor?: "start" | "middle" | "end"; weight?: number; tracking?: string; opacity?: number; rotate?: number }) {
  return (
    <text x={f(x)} y={f(y)} textAnchor={anchor} dominantBaseline="central" fontSize={f(size)} fontWeight={weight} fill={color} fillOpacity={opacity} style={{ fontFamily: FONT, letterSpacing: tracking }} transform={rotate ? `rotate(${rotate} ${f(x)} ${f(y)})` : undefined}>
      {text}
    </text>
  );
}

function Radial({ id, color, o0 = 0.6, o1 = 0, mid }: { id: string; color: string; o0?: number; o1?: number; mid?: [number, string, number] }) {
  return (
    <radialGradient id={id} cx="0.5" cy="0.5" r="0.5">
      <stop offset="0" stopColor={color} stopOpacity={o0} />
      {mid ? <stop offset={mid[0]} stopColor={mid[1]} stopOpacity={mid[2]} /> : null}
      <stop offset="1" stopColor={color} stopOpacity={o1} />
    </radialGradient>
  );
}

function Linear({ id, stops, dir = "v" }: { id: string; stops: Array<[number, string, number?]>; dir?: "v" | "h" | "d" }) {
  const c = dir === "v" ? { x1: 0, y1: 0, x2: 0, y2: 1 } : dir === "h" ? { x1: 0, y1: 0, x2: 1, y2: 0 } : { x1: 0, y1: 0, x2: 1, y2: 1 };
  return (
    <linearGradient id={id} {...c}>
      {stops.map(([o, col, op], i) => (
        <stop key={i} offset={o} stopColor={col} stopOpacity={op ?? 1} />
      ))}
    </linearGradient>
  );
}

const PI = Math.PI;

/* ======================================================================= */
/*  SCENES                                                                 */
/* ======================================================================= */

/* 01 — NEON VAULT: cyan vault ring, Override Wild core, keycards scanning a grid */
function NeonVault(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const horizon = cy + R * 0.7;
  let grid = "";
  for (let i = -6; i <= 6; i++) grid += `M${f(cx)} ${f(horizon)}L${f(cx + i * W * 0.22)} ${f(H)} `;
  for (let k = 1; k <= 6; k++) {
    const t = k / 6;
    const y = horizon + (H - horizon) * t * t;
    grid += `M0 ${f(y)}H${f(W)} `;
  }
  let ticks = "";
  for (let i = 0; i < 12; i++) {
    const a = (i / 12) * PI * 2;
    ticks += `M${f(cx + Math.cos(a) * R * 0.86)} ${f(cy + Math.sin(a) * R * 0.86)}L${f(cx + Math.cos(a) * R * 1.02)} ${f(cy + Math.sin(a) * R * 1.02)} `;
  }
  const scanY = cy - R * 0.22;
  return (
    <g>
      <defs>
        <Radial id={`${id}-nv1`} color={p.secondary} o0={0.5} />
        <Radial id={`${id}-nv2`} color={p.primary} o0={0.55} />
        <Linear id={`${id}-nv3`} stops={[[0, p.secondary, 0], [0.5, p.secondary, 0.35], [1, p.secondary, 0]]} dir="h" />
      </defs>
      <circle cx={f(W * 0.85)} cy={f(H * 0.08)} r={f(R * 1.2)} fill={`url(#${id}-nv1)`} />
      <path d={grid} stroke={p.primary} strokeOpacity={0.22} strokeWidth={1.2} fill="none" />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.95)} fill={`url(#${id}-nv2)`} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.94)} fill="none" stroke={p.primary} strokeOpacity={0.12} strokeWidth={f(R * 0.14)} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.02)} fill="none" stroke={p.primary} strokeOpacity={0.5} strokeWidth={2} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.72)} fill="none" stroke="#fff" strokeOpacity={0.12} strokeWidth={1.5} strokeDasharray="3 9" />
      <path d={ticks} stroke={p.primary} strokeOpacity={0.9} strokeWidth={3} strokeLinecap="round" fill="none" />
      <Sym s={s} id="W" x={cx} y={cy} size={R * 0.92} />
      {!compact ? (
        <>
          <Sym s={s} id="M1" x={cx - R * 0.8} y={cy + R * 0.42} size={R * 0.42} rotate={-14} />
          <Sym s={s} id="M1" x={cx + R * 0.82} y={cy - R * 0.55} size={R * 0.38} rotate={12} />
          <Sym s={s} id="S" x={cx + R * 0.78} y={cy + R * 0.5} size={R * 0.42} rotate={6} />
          <Sym s={s} id="V" x={cx - R * 0.78} y={cy - R * 0.5} size={R * 0.4} rotate={-8} />
          <rect x={f(cx - R * 1.1)} y={f(scanY - R * 0.05)} width={f(R * 2.2)} height={f(R * 0.1)} fill={`url(#${id}-nv3)`} />
          <line x1={f(cx - R * 1.1)} y1={f(scanY)} x2={f(cx + R * 1.1)} y2={f(scanY)} stroke={p.secondary} strokeWidth={1.5} strokeOpacity={0.9} />
          <Small x={cx} y={cy + R * 1.0} text="×2 ×3 ×5 ×8 ×12 ×20 ×30 ×50" color={p.primary} size={R * 0.075} tracking="0.18em" opacity={0.7} />
        </>
      ) : null}
    </g>
  );
}

/* 02 — COSMIC COLLAPSE: symbols spiral into a black hole, gravity ladder ×1→×13 */
function CosmicCollapse(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const stars = scatterDots(s, 90, [0, 0, W, H], 0.5, 1.5);
  const bright = scatterDots(s, 10, [0, 0, W, H], 1.6, 2.6);
  const orbit = [
    { id: "P1", a: -0.55, d: 1.05, k: 0.5, rot: 28 },
    { id: "H1", a: 0.95, d: 0.98, k: 0.42, rot: -20 },
    { id: "H2", a: 2.35, d: 0.9, k: 0.36, rot: 35 },
    { id: "M1", a: 3.7, d: 0.78, k: 0.3, rot: -40 },
    { id: "M2", a: 4.9, d: 0.66, k: 0.24, rot: 15 },
  ];
  return (
    <g>
      <defs>
        <Radial id={`${id}-cc1`} color={p.primary} o0={0.4} />
        <Radial id={`${id}-cc2`} color={p.secondary} o0={0.3} />
        <Linear id={`${id}-cc3`} stops={[[0, p.secondary, 0], [0.3, "#fde68a", 0.95], [0.6, p.glow, 0.9], [1, p.primary, 0]]} dir="h" />
        <filter id={`${id}-blur`} x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation={f(R * 0.08)} />
        </filter>
      </defs>
      <ellipse cx={f(cx - R * 0.6)} cy={f(cy - R * 0.5)} rx={f(R * 1.3)} ry={f(R * 0.6)} fill={`url(#${id}-cc1)`} transform={`rotate(-25 ${f(cx)} ${f(cy)})`} />
      <ellipse cx={f(cx + R * 0.7)} cy={f(cy + R * 0.6)} rx={f(R * 1.1)} ry={f(R * 0.5)} fill={`url(#${id}-cc2)`} transform={`rotate(20 ${f(cx)} ${f(cy)})`} />
      <path d={stars} fill="#fff" fillOpacity={0.7} />
      <path d={bright} fill={p.glow} fillOpacity={0.9} />
      <g transform={`rotate(-22 ${f(cx)} ${f(cy)})`}>
        <ellipse cx={f(cx)} cy={f(cy)} rx={f(R * 1.05)} ry={f(R * 0.32)} fill="none" stroke={`url(#${id}-cc3)`} strokeWidth={f(R * 0.16)} filter={`url(#${id}-blur)`} />
        <ellipse cx={f(cx)} cy={f(cy)} rx={f(R * 1.05)} ry={f(R * 0.32)} fill="none" stroke={`url(#${id}-cc3)`} strokeWidth={f(R * 0.05)} />
        <ellipse cx={f(cx)} cy={f(cy)} rx={f(R * 0.74)} ry={f(R * 0.2)} fill="none" stroke="#fff" strokeOpacity={0.35} strokeWidth={1.5} strokeDasharray="2 7" />
      </g>
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.4)} fill="#000" />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.41)} fill="none" stroke={p.glow} strokeWidth={2.5} strokeOpacity={0.9} />
      <Sym s={s} id="W" x={cx} y={cy} size={R * 0.95} plate={false} />
      {!compact
        ? orbit.map((o) => <Sym key={o.id} s={s} id={o.id} x={cx + Math.cos(o.a) * R * o.d} y={cy + Math.sin(o.a) * R * o.d * 0.72} size={R * o.k} rotate={o.rot} />)
        : null}
      {!compact ? (
        <text x={f(cx)} y={f(cy + R * 1.0)} textAnchor="middle" dominantBaseline="central" fontWeight={700} fill={p.primary} style={{ fontFamily: FONT, letterSpacing: "0.1em" }}>
          <tspan fontSize={f(R * 0.07)} fillOpacity={0.35}>×1 ×2 ×3 ×5 ×8 </tspan>
          <tspan fontSize={f(R * 0.11)} fill={p.glow} fillOpacity={0.9}>×13</tspan>
        </text>
      ) : null}
    </g>
  );
}

/* 03 — GOLDEN EMPEROR: symmetrical imperial court, gold pillars, dragon pearls ×2 ×3 ×5 */
function GoldenEmperor(s: Stage) {
  const { H, cx, cy, R, id, p, compact } = s;
  const pw = R * 0.22;
  const px1 = cx - R * 1.02;
  const px2 = cx + R * 1.02 - pw;
  const top = cy - R * 1.15;
  const flecks = scatterDots(s, 30, [cx - R * 1.2, cy - R * 1.2, R * 2.4, R * 2.4], 0.8, 2.2);
  const pearls = [
    { x: cx - R * 0.66, m: "×2" },
    { x: cx, m: "×3" },
    { x: cx + R * 0.66, m: "×5" },
  ];
  const py = cy + R * 0.55;
  return (
    <g>
      <defs>
        <Radial id={`${id}-ge1`} color={p.secondary} o0={0.65} o1={0} />
        <Linear id={`${id}-ge2`} stops={[[0, "#3a2410"], [0.45, "#b8862e"], [0.55, "#f5d98a"], [1, "#4a2c10"]]} dir="h" />
        <Linear id={`${id}-ge3`} stops={[[0, "#5a0d16", 0.95], [1, "#2a0409", 0.98]]} />
      </defs>
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.5)} fill={`url(#${id}-ge1)`} />
      <rect x={f(px1 + pw * 1.5)} y={f(top)} width={f(px2 - px1 - pw * 2)} height={f(H)} fill={`url(#${id}-ge3)`} />
      <rect x={f(px1 + pw * 1.5)} y={f(top)} width={f(px2 - px1 - pw * 2)} height={f(H)} fill="none" stroke={p.primary} strokeOpacity={0.35} strokeWidth={1.5} />
      <rect x={f(px1)} y={f(top)} width={f(pw)} height={f(H)} fill={`url(#${id}-ge2)`} />
      <rect x={f(px2)} y={f(top)} width={f(pw)} height={f(H)} fill={`url(#${id}-ge2)`} />
      <path d={`M${f(px1 - pw * 0.3)} ${f(top)}h${f(pw * 1.6)}v${f(pw * 0.35)}h${f(-pw * 1.6)}z M${f(px2 - pw * 0.3)} ${f(top)}h${f(pw * 1.6)}v${f(pw * 0.35)}h${f(-pw * 1.6)}z`} fill={p.primary} />
      <path d={`M${f(cx - R * 0.9)} ${f(cy - R * 0.98)}H${f(cx + R * 0.9)} M${f(cx - R * 0.9)} ${f(cy - R * 0.92)}H${f(cx + R * 0.9)}`} stroke={p.primary} strokeOpacity={0.7} strokeWidth={1.5} />
      <path d={flecks} fill={p.glow} fillOpacity={0.55} />
      <Sym s={s} id="P1" x={cx} y={cy - R * 0.3} size={R * 0.98} />
      {!compact ? (
        <>
          {pearls.map((o) => (
            <g key={o.m}>
              <Sym s={s} id="W" x={o.x} y={py} size={R * 0.5} />
              <Pill x={o.x} y={py + R * 0.36} text={o.m} color={p.primary} ink={p.glow} size={R * 0.085} />
            </g>
          ))}
          <Sym s={s} id="S" x={cx - R * 0.7} y={cy - R * 0.4} size={R * 0.4} />
          <Sym s={s} id="S" x={cx + R * 0.7} y={cy - R * 0.4} size={R * 0.4} />
          <path d={`M${f(cx)} ${f(cy - R * 0.83)}l${f(R * 0.03)} ${f(R * 0.03)}l${f(-R * 0.03)} ${f(R * 0.03)}l${f(-R * 0.03)} ${f(-R * 0.03)}z`} fill={p.primary} />
        </>
      ) : null}
    </g>
  );
}

/* 04 — DIAMOND HEIST: laser-cut vault door, diamond coins with SC values, jackpot plaques */
function DiamondHeist(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  let spokes = "";
  for (let i = 0; i < 24; i++) {
    const a = (i / 24) * PI * 2;
    spokes += `M${f(cx + Math.cos(a) * R * 0.58)} ${f(cy + Math.sin(a) * R * 0.58)}L${f(cx + Math.cos(a) * R * 0.98)} ${f(cy + Math.sin(a) * R * 0.98)} `;
  }
  const rivets: Array<[number, number, number]> = [];
  for (let i = 0; i < 12; i++) {
    const a = (i / 12) * PI * 2 + PI / 12;
    rivets.push([cx + Math.cos(a) * R * 1.06, cy + Math.sin(a) * R * 1.06, R * 0.025]);
  }
  const sparkle = (x: number, y: number, r: number) => `M${f(x)} ${f(y - r)}Q${f(x)} ${f(y)} ${f(x + r)} ${f(y)}Q${f(x)} ${f(y)} ${f(x)} ${f(y + r)}Q${f(x)} ${f(y)} ${f(x - r)} ${f(y)}Q${f(x)} ${f(y)} ${f(x)} ${f(y - r)}Z`;
  let sparkles = "";
  for (let i = 0; i < 14; i++) sparkles += sparkle(s.rnd() * W, s.rnd() * H, R * (0.03 + s.rnd() * 0.05));
  const lasers = `M${f(cx - R * 1.4)} ${f(cy - R * 1.3)}L${f(cx + R * 1.4)} ${f(cy + R * 0.2)} M${f(cx - R * 1.4)} ${f(cy + R * 0.9)}L${f(cx + R * 1.4)} ${f(cy - R * 1.1)}`;
  const tiers = ["MINI", "MINOR", "MAJOR", "GRAND"];
  const coins = [
    { x: cx - R * 0.72, y: cy + R * 0.5, v: "5×" },
    { x: cx, y: cy + R * 0.66, v: "20×" },
    { x: cx + R * 0.72, y: cy + R * 0.5, v: "10×" },
  ];
  return (
    <g>
      <defs>
        <pattern id={`${id}-dh0`} width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="10" stroke="#fff" strokeOpacity="0.06" strokeWidth="1" />
        </pattern>
        <Radial id={`${id}-dh1`} color="#2a3038" o0={1} o1={0} mid={[0.7, "#14181e", 1]} />
        <Radial id={`${id}-dh2`} color={p.glow} o0={0.5} />
      </defs>
      <rect width={W} height={H} fill={`url(#${id}-dh0)`} />
      <path d={lasers} stroke="#ff3b5c" strokeOpacity={0.35} strokeWidth={5} strokeLinecap="round" />
      <path d={lasers} stroke="#ff8fa3" strokeOpacity={0.9} strokeWidth={1.2} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.1)} fill={`url(#${id}-dh1)`} stroke={p.secondary} strokeOpacity={0.5} strokeWidth={2} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.0)} fill="none" stroke="#fff" strokeOpacity={0.1} strokeWidth={1} />
      <path d={spokes} stroke={p.primary} strokeOpacity={0.55} strokeWidth={1.5} fill="none" />
      <path d={dots(rivets)} fill={p.secondary} fillOpacity={0.8} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.56)} fill="#0a0d12" stroke={p.primary} strokeWidth={2.5} strokeOpacity={0.95} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.56)} fill={`url(#${id}-dh2)`} />
      <Sym s={s} id="D" x={cx} y={cy} size={R * 0.9} plate={false} />
      {!compact ? (
        <>
          {coins.map((c) => (
            <g key={c.v}>
              <Sym s={s} id="D" x={c.x} y={c.y} size={R * 0.4} />
              <Pill x={c.x} y={c.y + R * 0.28} text={c.v} color={p.primary} ink={p.glow} size={R * 0.08} />
            </g>
          ))}
          {tiers.map((t, i) => {
            const y = cy - R * 0.62 + i * R * 0.3;
            const grand = i === 3;
            return <Pill key={t} x={cx + R * 1.02} y={y} text={t} color={grand ? "#ffd166" : p.secondary} ink={grand ? "#ffd166" : "#dfe4ea"} bg={grand ? "#2a2008" : "#000"} size={R * 0.075} w={R * 0.5} />;
          })}
          <Sym s={s} id="W" x={cx - R * 1.0} y={cy - R * 0.62} size={R * 0.5} rotate={-30} />
          <Sym s={s} id="P1" x={cx + R * 1.0} y={cy - R * 1.0} size={R * 0.38} />
        </>
      ) : null}
      <path d={sparkles} fill="#fff" fillOpacity={0.85} />
    </g>
  );
}

/* 05 — ARCTIC FORTUNE: aurora over a ridge, frozen sticky wilds in ice blocks, snowfall */
function ArcticFortune(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const stars = scatterDots(s, 40, [0, 0, W, H * 0.5], 0.5, 1.3);
  const snow = scatterDots(s, 45, [0, 0, W, H], 1, 3.2);
  const band = (y: number, amp: number) => `M${f(-W * 0.1)} ${f(y)} C${f(W * 0.2)} ${f(y - amp)} ${f(W * 0.4)} ${f(y + amp)} ${f(W * 0.6)} ${f(y)} S${f(W * 0.9)} ${f(y - amp)} ${f(W * 1.1)} ${f(y + amp * 0.4)}`;
  const ridgeY = cy + R * 0.95;
  const ridge = `M0 ${f(H)} L0 ${f(ridgeY + R * 0.1)} L${f(W * 0.18)} ${f(ridgeY - R * 0.25)} L${f(W * 0.32)} ${f(ridgeY)} L${f(W * 0.5)} ${f(ridgeY - R * 0.45)} L${f(W * 0.66)} ${f(ridgeY - R * 0.05)} L${f(W * 0.82)} ${f(ridgeY - R * 0.3)} L${f(W)} ${f(ridgeY + R * 0.05)} L${f(W)} ${f(H)}Z`;
  const blocks = [
    { x: cx - R * 0.72, y: cy + R * 0.35 },
    { x: cx - R * 0.1, y: cy + R * 0.05 },
    { x: cx + R * 0.55, y: cy - R * 0.25 },
  ];
  const bs = R * 0.56;
  return (
    <g>
      <defs>
        <Linear id={`${id}-af1`} stops={[[0, "#0b2a3a"], [0.6, p.bg], [1, "#02060d"]]} />
        <filter id={`${id}-blur`} x="-20%" y="-50%" width="140%" height="200%">
          <feGaussianBlur stdDeviation={f(R * 0.09)} />
        </filter>
      </defs>
      <rect width={W} height={H} fill={`url(#${id}-af1)`} />
      <path d={stars} fill="#fff" fillOpacity={0.8} />
      <path d={band(cy - R * 0.95, R * 0.25)} stroke="#34d399" strokeOpacity={0.55} strokeWidth={f(R * 0.22)} fill="none" strokeLinecap="round" filter={`url(#${id}-blur)`} />
      <path d={band(cy - R * 0.62, R * 0.2)} stroke={p.primary} strokeOpacity={0.5} strokeWidth={f(R * 0.2)} fill="none" strokeLinecap="round" filter={`url(#${id}-blur)`} />
      <path d={band(cy - R * 0.32, R * 0.16)} stroke={p.secondary} strokeOpacity={0.4} strokeWidth={f(R * 0.16)} fill="none" strokeLinecap="round" filter={`url(#${id}-blur)`} />
      <path d={ridge} fill="#050b16" stroke="#bfe9ff" strokeOpacity={0.35} strokeWidth={1.5} />
      {!compact ? (
        <>
          {blocks.map((b, i) => (
            <g key={i}>
              <rect x={f(b.x - bs / 2)} y={f(b.y - bs / 2)} width={f(bs)} height={f(bs)} rx={f(bs * 0.12)} fill="#bfe9ff" fillOpacity={0.14} stroke="#e8f8ff" strokeOpacity={0.75} strokeWidth={2} />
              <Sym s={s} id="W" x={b.x} y={b.y} size={bs * 0.92} plate={false} />
            </g>
          ))}
          <Sym s={s} id="P1" x={cx + R * 0.72} y={cy + R * 0.5} size={R * 0.62} />
          <Sym s={s} id="H1" x={cx - R * 0.78} y={cy - R * 0.45} size={R * 0.44} />
          <Sym s={s} id="S" x={cx + R * 0.1} y={cy - R * 0.7} size={R * 0.38} />
          <Small x={cx} y={cy + R * 1.0} text="×1  ×2  ×3  ×4  ×5" color="#e8f8ff" size={R * 0.08} tracking="0.16em" opacity={0.75} />
        </>
      ) : (
        <Sym s={s} id="W" x={cx} y={cy} size={R * 0.9} />
      )}
      <path d={snow} fill="#fff" fillOpacity={0.75} />
    </g>
  );
}

/* 06 — INFERNO REELS: cracked lava floor, Magma Core shockwave, embers */
function InfernoReels(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const floorY = cy + R * 0.75;
  let cracks = "";
  for (let i = 0; i < 6; i++) {
    let x = W * (0.05 + i * 0.18) + s.rnd() * W * 0.08;
    let y = H;
    cracks += `M${f(x)} ${f(y)}`;
    while (y > floorY + R * 0.05) {
      x += (s.rnd() - 0.5) * R * 0.3;
      y -= R * (0.1 + s.rnd() * 0.15);
      cracks += `L${f(x)} ${f(y)}`;
    }
    cracks += " ";
  }
  const embers = scatterDots(s, 40, [cx - R * 1.3, cy - R * 1.3, R * 2.6, R * 2.4], 0.8, 2.6);
  const embers2 = scatterDots(s, 16, [cx - R * 1.2, cy - R * 1.2, R * 2.4, R * 2], 1.5, 3.5);
  const burst = svgStar(cx, cy, R * 0.98, R * 0.62, 14);
  return (
    <g>
      <defs>
        <Linear id={`${id}-ir1`} stops={[[0, p.primary, 0], [1, p.primary, 0.55]]} />
        <Radial id={`${id}-ir2`} color={p.glow} o0={0.75} mid={[0.45, p.primary, 0.35]} />
        <filter id={`${id}-tex`} x="0" y="0" width="100%" height="100%">
          <feTurbulence type="fractalNoise" baseFrequency="0.012 0.03" numOctaves="2" seed="7" />
          <feColorMatrix values="0 0 0 0 1 0 0 0 0 0.35 0 0 0 0 0.05 0 0 0 0.55 0" />
        </filter>
      </defs>
      <rect x={0} y={f(floorY - R * 0.4)} width={W} height={f(H - floorY + R * 0.4)} fill={`url(#${id}-ir1)`} />
      <rect x={0} y={f(floorY)} width={W} height={f(H - floorY)} fill="#160604" />
      <rect x={0} y={f(floorY)} width={W} height={f(H - floorY)} filter={`url(#${id}-tex)`} opacity={0.5} />
      <path d={cracks} stroke={p.glow} strokeOpacity={0.5} strokeWidth={7} strokeLinecap="round" strokeLinejoin="round" fill="none" />
      <path d={cracks} stroke="#ffd166" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" fill="none" />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.3)} fill={`url(#${id}-ir2)`} />
      <polygon points={burst} fill={p.glow} fillOpacity={0.28} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.7)} fill="none" stroke={p.secondary} strokeOpacity={0.85} strokeWidth={3} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.9)} fill="none" stroke={p.primary} strokeOpacity={0.5} strokeWidth={2} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.12)} fill="none" stroke={p.primary} strokeOpacity={0.22} strokeWidth={1.5} />
      <Sym s={s} id="W" x={cx} y={cy} size={R * 0.95} plate={false} />
      {!compact ? (
        <>
          <Sym s={s} id="P1" x={cx - R * 0.92} y={cy - R * 0.72} size={R * 0.5} rotate={-18} />
          <Sym s={s} id="S" x={cx + R * 0.92} y={cy - R * 0.75} size={R * 0.46} rotate={16} />
          <Sym s={s} id="H1" x={cx - R * 0.95} y={cy + R * 0.55} size={R * 0.42} rotate={22} />
          <Sym s={s} id="H2" x={cx + R * 0.95} y={cy + R * 0.55} size={R * 0.42} rotate={-20} />
          <Small x={cx} y={cy + R * 1.0} text="×2 · ×3 · ×5 · ×10" color="#ffd166" size={R * 0.085} tracking="0.16em" weight={700} opacity={0.9} />
        </>
      ) : null}
      <path d={embers} fill={p.glow} fillOpacity={0.8} />
      <path d={embers2} fill="#ffd166" fillOpacity={0.85} />
    </g>
  );
}

/* 07 — QUANTUM JACKPOT: a processor splitting into ghost copies ×2 ×3 ×4 over circuit traces */
function QuantumJackpot(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const step = R * 0.22;
  let t1 = "";
  let t2 = "";
  const pads: Array<[number, number, number]> = [];
  for (let i = 0; i < 14; i++) {
    let x = Math.round((s.rnd() * W) / step) * step;
    let y = Math.round((s.rnd() * H) / step) * step;
    let d = `M${f(x)} ${f(y)}`;
    for (let k = 0; k < 3; k++) {
      if (s.rnd() > 0.5) x += (s.rnd() > 0.5 ? 1 : -1) * step * (1 + Math.floor(s.rnd() * 3));
      else y += (s.rnd() > 0.5 ? 1 : -1) * step * (1 + Math.floor(s.rnd() * 3));
      d += `L${f(x)} ${f(y)}`;
    }
    if (i % 3 === 0) t2 += d + " ";
    else t1 += d + " ";
    pads.push([x, y, 3]);
  }
  const wave = `M0 ${f(cy + R * 1.05)} ${Array.from({ length: 12 }, (_, i) => `Q${f((W / 12) * (i + 0.5))} ${f(cy + R * (1.05 + (i % 2 ? 0.14 : -0.14)))} ${f((W / 12) * (i + 1))} ${f(cy + R * 1.05)}`).join(" ")}`;
  const gx = cx - R * 0.42;
  return (
    <g>
      <defs>
        <Radial id={`${id}-qj1`} color={p.secondary} o0={0.35} />
        <Radial id={`${id}-qj2`} color={p.primary} o0={0.35} />
      </defs>
      <circle cx={f(cx + R * 0.6)} cy={f(cy - R * 0.5)} r={f(R * 1.3)} fill={`url(#${id}-qj1)`} />
      <circle cx={f(cx - R * 0.8)} cy={f(cy + R * 0.7)} r={f(R * 1.1)} fill={`url(#${id}-qj2)`} />
      <path d={t1} stroke={p.primary} strokeOpacity={0.3} strokeWidth={1.6} fill="none" strokeLinejoin="round" />
      <path d={t2} stroke={p.secondary} strokeOpacity={0.35} strokeWidth={1.6} fill="none" strokeLinejoin="round" />
      <path d={dots(pads)} fill={p.bg} stroke={p.primary} strokeOpacity={0.6} strokeWidth={1.5} />
      <path d={wave} stroke={p.primary} strokeOpacity={0.55} strokeWidth={1.5} fill="none" />
      {!compact ? (
        <>
          <Sym s={s} id="P1" x={gx + R * 1.15} y={cy - R * 0.12} size={R * 0.7} opacity={0.22} />
          <Sym s={s} id="P1" x={gx + R * 0.78} y={cy - R * 0.08} size={R * 0.74} opacity={0.42} />
          <Sym s={s} id="P1" x={gx + R * 0.4} y={cy - R * 0.04} size={R * 0.78} opacity={0.7} />
        </>
      ) : null}
      <Sym s={s} id="P1" x={gx} y={cy} size={R * 0.84} />
      {!compact ? (
        <>
          <Pill x={gx + R * 0.4} y={cy + R * 0.55} text="×2" color={p.primary} ink={p.glow} size={R * 0.085} />
          <Pill x={gx + R * 0.78} y={cy + R * 0.55} text="×3" color={p.primary} ink={p.glow} size={R * 0.085} opacity={0.75} />
          <Pill x={gx + R * 1.15} y={cy + R * 0.55} text="×4" color={p.primary} ink={p.glow} size={R * 0.085} opacity={0.5} />
          <Sym s={s} id="W" x={cx - R * 0.85} y={cy - R * 0.85} size={R * 0.48} />
          <Sym s={s} id="H1" x={cx + R * 0.85} y={cy - R * 0.9} size={R * 0.44} />
          <Sym s={s} id="S" x={cx - R * 0.9} y={cy + R * 0.7} size={R * 0.4} />
          <Small x={cx} y={cy + R * 1.0} text="MINI 20×  ·  MINOR 50×  ·  MAJOR 200×  ·  GRAND 1,000×" color={p.glow} size={R * 0.062} tracking="0.1em" opacity={0.8} />
        </>
      ) : null}
    </g>
  );
}

/* 08 — MIDNIGHT TOKYO: rain-wet skyline, neon signage, stacked wild column */
function MidnightTokyo(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const horizon = cy + R * 0.85;
  let sky = `M0 ${f(horizon)}`;
  const wins: Array<[number, number, number]> = [];
  const wins2: Array<[number, number, number]> = [];
  let x = 0;
  while (x < W) {
    const bw = W * (0.04 + s.rnd() * 0.09);
    const bh = R * (0.4 + s.rnd() * 1.4);
    sky += `L${f(x)} ${f(horizon - bh)}L${f(x + bw)} ${f(horizon - bh)}`;
    for (let k = 0; k < bh / (R * 0.16) - 1; k++) {
      if (s.rnd() > 0.55) (s.rnd() > 0.6 ? wins2 : wins).push([x + bw * (0.25 + s.rnd() * 0.5), horizon - bh + R * 0.12 + k * R * 0.16, 1.6]);
    }
    x += bw + W * 0.008;
  }
  sky += `L${f(W)} ${f(horizon)}Z`;
  let rain = "";
  for (let i = 0; i < 45; i++) {
    const rx = s.rnd() * W;
    const ry = s.rnd() * H;
    rain += `M${f(rx)} ${f(ry)}l${f(-R * 0.05)} ${f(R * 0.22)} `;
  }
  const colX = cx + R * 0.72;
  const colH = R * 1.75;
  return (
    <g>
      <defs>
        <Linear id={`${id}-mt1`} stops={[[0, "#1a0630"], [0.55, p.bg], [1, "#3a0a3a"]]} />
        <Linear id={`${id}-mt2`} stops={[[0, p.primary, 0.35], [1, p.primary, 0]]} />
        <Radial id={`${id}-mt3`} color={p.primary} o0={0.55} />
      </defs>
      <rect width={W} height={H} fill={`url(#${id}-mt1)`} />
      <ellipse cx={f(cx)} cy={f(horizon)} rx={f(W * 0.7)} ry={f(R * 0.9)} fill={`url(#${id}-mt3)`} />
      <path d={sky} fill="#0a0514" stroke={p.primary} strokeOpacity={0.5} strokeWidth={1.2} />
      <path d={dots(wins)} fill="#ffd166" fillOpacity={0.8} />
      <path d={dots(wins2)} fill={p.secondary} fillOpacity={0.85} />
      <rect x={0} y={f(horizon)} width={W} height={f(H - horizon)} fill={`url(#${id}-mt2)`} />
      <line x1={0} y1={f(horizon)} x2={W} y2={f(horizon)} stroke={p.secondary} strokeWidth={1.5} strokeOpacity={0.9} />
      <path d={rain} stroke="#9be7ff" strokeOpacity={0.28} strokeWidth={1} fill="none" strokeLinecap="round" />
      {!compact ? (
        <>
          <rect x={f(colX - R * 0.32)} y={f(cy - colH / 2)} width={f(R * 0.64)} height={f(colH)} rx={f(R * 0.06)} fill="#120820" fillOpacity={0.9} stroke={p.primary} strokeOpacity={0.9} strokeWidth={2} />
          <Sym s={s} id="W" x={colX} y={cy - R * 0.58} size={R * 0.58} />
          <Sym s={s} id="W" x={colX} y={cy} size={R * 0.58} />
          <Sym s={s} id="W" x={colX} y={cy + R * 0.58} size={R * 0.58} />
          <rect x={f(cx - R * 1.12)} y={f(cy - R * 1.05)} width={f(R * 0.34)} height={f(R * 0.95)} rx={4} fill="#1a0a2a" stroke={p.secondary} strokeWidth={2} />
          <Small x={cx - R * 0.95} y={cy - R * 0.58} text="TOKYO" color={p.secondary} size={R * 0.13} weight={800} tracking="0.1em" rotate={-90} />
          <rect x={f(cx - R * 0.66)} y={f(cy - R * 1.0)} width={f(R * 0.9)} height={f(R * 0.24)} rx={4} fill={p.primary} fillOpacity={0.9} />
          <Small x={cx - R * 0.21} y={cy - R * 0.88} text="24H NEON" color="#fff" size={R * 0.1} weight={800} tracking="0.16em" />
          <Sym s={s} id="P1" x={cx - R * 0.25} y={cy + R * 0.02} size={R * 0.82} />
          <Sym s={s} id="H1" x={cx - R * 0.85} y={cy + R * 0.42} size={R * 0.44} rotate={-25} />
          <Sym s={s} id="S" x={cx + R * 0.12} y={cy - R * 0.62} size={R * 0.36} />
        </>
      ) : (
        <Sym s={s} id="P1" x={cx} y={cy} size={R * 0.9} />
      )}
    </g>
  );
}

/* 09 — PHARAOH PROTOCOL: pyramid with a scanning laser, artifact meter */
function PharaohProtocol(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const base = cy + R * 0.7;
  const apex = cy - R * 0.98;
  const half = R * 1.05;
  const tri = `${f(cx - half)},${f(base)} ${f(cx)},${f(apex)} ${f(cx + half)},${f(base)}`;
  let bricks = "";
  for (let k = 1; k < 9; k++) bricks += `M${f(cx - half)} ${f(apex + (base - apex) * (k / 9))}H${f(cx + half)} `;
  const scanY = cy - R * 0.18;
  const dust = scatterDots(s, 35, [0, 0, W, H], 0.6, 1.8);
  const segs = 12;
  const mw = R * 1.4;
  const mx = cx - mw / 2;
  const my = cy + R * 0.86;
  let segOff = "";
  let segOn = "";
  for (let i = 0; i < segs; i++) {
    const d = `M${f(mx + (i * mw) / segs + 1.5)} ${f(my)}h${f(mw / segs - 3)}v${f(R * 0.06)}h${f(-(mw / segs - 3))}z `;
    if (i < 7) segOn += d;
    else segOff += d;
  }
  return (
    <g>
      <defs>
        <Linear id={`${id}-pp1`} stops={[[0, "#2a1608"], [0.45, p.bg], [1, "#1a1006"]]} />
        <Linear id={`${id}-pp2`} stops={[[0, "#8a5a1a"], [0.5, "#f1c86a"], [1, "#5a3a10"]]} dir="h" />
        <Radial id={`${id}-pp3`} color="#fb923c" o0={0.7} mid={[0.4, p.primary, 0.3]} />
        <clipPath id={`${id}-pp4`}>
          <polygon points={tri} />
        </clipPath>
      </defs>
      <rect width={W} height={H} fill={`url(#${id}-pp1)`} />
      <circle cx={f(cx + R * 0.78)} cy={f(cy - R * 0.8)} r={f(R * 0.55)} fill={`url(#${id}-pp3)`} />
      <circle cx={f(cx + R * 0.78)} cy={f(cy - R * 0.8)} r={f(R * 0.2)} fill="#fb923c" fillOpacity={0.9} />
      <ellipse cx={f(cx - R * 0.6)} cy={f(base + R * 0.15)} rx={f(W * 0.7)} ry={f(R * 0.3)} fill="#3a2810" />
      <ellipse cx={f(cx + R * 0.9)} cy={f(base + R * 0.25)} rx={f(W * 0.6)} ry={f(R * 0.28)} fill="#2a1c0a" />
      <polygon points={tri} fill={`url(#${id}-pp2)`} />
      <path d={bricks} stroke="#3a2408" strokeOpacity={0.7} strokeWidth={1.2} clipPath={`url(#${id}-pp4)`} />
      <polygon points={`${f(cx)},${f(apex)} ${f(cx + half)},${f(base)} ${f(cx)},${f(base)}`} fill="#000" fillOpacity={0.35} />
      <rect x={f(cx - half)} y={f(scanY - R * 0.12)} width={f(half * 2)} height={f(R * 0.24)} fill={p.secondary} fillOpacity={0.18} clipPath={`url(#${id}-pp4)`} />
      <line x1={f(cx - half * 1.1)} y1={f(scanY)} x2={f(cx + half * 1.1)} y2={f(scanY)} stroke={p.secondary} strokeWidth={2} strokeOpacity={0.95} />
      <Sym s={s} id="W" x={cx} y={apex - R * 0.05} size={R * 0.72} plate={false} />
      {!compact ? (
        <>
          <Sym s={s} id="P1" x={cx + R * 0.66} y={cy + R * 0.22} size={R * 0.62} />
          <Sym s={s} id="H1" x={cx - R * 0.82} y={cy + R * 0.18} size={R * 0.5} />
          <Sym s={s} id="AR" x={cx - R * 0.5} y={cy + R * 0.6} size={R * 0.36} />
          <Sym s={s} id="AR" x={cx - R * 0.15} y={cy + R * 0.64} size={R * 0.36} />
          <Sym s={s} id="AR" x={cx + R * 0.2} y={cy + R * 0.6} size={R * 0.36} />
          <path d={segOff} fill="#fff" fillOpacity={0.12} />
          <path d={segOn} fill={p.secondary} fillOpacity={0.95} />
          <Small x={cx} y={my + R * 0.15} text="ARTIFACT SCANNER · 7 / 12" color={p.secondary} size={R * 0.065} tracking="0.2em" opacity={0.85} />
        </>
      ) : null}
      <path d={dust} fill={p.primary} fillOpacity={0.5} />
    </g>
  );
}

/* 10 — LUCKY CIRCUIT: retro arcade bezel, mystery "?" cartridge, confetti */
function LuckyCircuit(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const bw = R * 2.2;
  const bh = R * 1.9;
  const bx = cx - bw / 2;
  const by = cy - bh / 2 - R * 0.05;
  let scan = "";
  for (let y = by + 8; y < by + bh; y += 6) scan += `M${f(bx)} ${f(y)}H${f(bx + bw)} `;
  const confetti = (color: string, n: number) => {
    let d = "";
    for (let i = 0; i < n; i++) {
      const x = s.rnd() * W;
      const y = s.rnd() * H;
      const k = 3 + s.rnd() * 4;
      d += `M${f(x)} ${f(y)}h${f(k * 1.6)}v${f(k)}h${f(-k * 1.6)}z `;
    }
    return <path d={d} fill={color} fillOpacity={0.85} />;
  };
  return (
    <g>
      <defs>
        <pattern id={`${id}-lc0`} width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="7" cy="7" r="1.2" fill={p.secondary} fillOpacity="0.35" />
        </pattern>
        <Radial id={`${id}-lc1`} color={p.glow} o0={0.5} />
      </defs>
      <rect width={W} height={H} fill={`url(#${id}-lc0)`} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.4)} fill={`url(#${id}-lc1)`} />
      <rect x={f(bx - R * 0.1)} y={f(by - R * 0.1)} width={f(bw + R * 0.2)} height={f(bh + R * 0.2)} rx={f(R * 0.14)} fill="#1b1638" stroke={p.primary} strokeWidth={f(R * 0.06)} />
      <rect x={f(bx)} y={f(by)} width={f(bw)} height={f(bh)} rx={f(R * 0.06)} fill="#07061a" stroke={p.secondary} strokeWidth={2} />
      <path d={scan} stroke="#fff" strokeOpacity={0.05} strokeWidth={2} />
      {!compact ? confetti(p.primary, 14) : null}
      {!compact ? confetti(p.glow, 12) : null}
      {!compact ? confetti(p.secondary, 12) : null}
      <Sym s={s} id="MY" x={cx} y={cy - R * 0.08} size={R * 1.0} />
      {!compact ? (
        <>
          <Sym s={s} id="W" x={cx - R * 0.78} y={cy - R * 0.5} size={R * 0.48} rotate={-12} />
          <Sym s={s} id="P1" x={cx + R * 0.78} y={cy - R * 0.5} size={R * 0.48} rotate={10} />
          <Sym s={s} id="H1" x={cx - R * 0.78} y={cy + R * 0.6} size={R * 0.46} />
          <Sym s={s} id="M2" x={cx + R * 0.78} y={cy + R * 0.6} size={R * 0.46} />
          <Sym s={s} id="S" x={cx} y={cy + R * 0.72} size={R * 0.38} />
          <rect x={f(cx - R * 0.55)} y={f(by + R * 0.06)} width={f(R * 1.1)} height={f(R * 0.24)} rx={f(R * 0.05)} fill={p.glow} />
          <Small x={cx} y={by + R * 0.18} text="INSERT COIN" color="#fff" size={R * 0.1} weight={800} tracking="0.2em" />
        </>
      ) : null}
    </g>
  );
}

/* 11 — VOID MINER: asteroid field, dark-matter core with level meter, drill beam */
function VoidMiner(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const stars = scatterDots(s, 60, [0, 0, W, H], 0.5, 1.3);
  const rock = (x: number, y: number, r: number, n: number) => {
    const list: string[] = [];
    for (let k = 0; k < n; k++) {
      const a = (k / n) * PI * 2;
      const rr = r * (0.72 + s.rnd() * 0.36);
      list.push(`${f(x + Math.cos(a) * rr)},${f(y + Math.sin(a) * rr)}`);
    }
    return list.join(" ");
  };
  const rocks = [
    [cx - R * 1.0, cy - R * 0.95, R * 0.28, 8],
    [cx + R * 1.0, cy - R * 0.2, R * 0.22, 7],
    [cx - R * 0.95, cy + R * 0.35, R * 0.2, 9],
    [cx + R * 0.7, cy + R * 0.95, R * 0.3, 8],
    [cx - R * 0.15, cy - R * 1.12, R * 0.16, 7],
  ] as const;
  const drillX = cx + R * 0.6;
  const drillY = cy - R * 0.58;
  const circ = 2 * PI * R * 0.66;
  const seg = circ / 5;
  return (
    <g>
      <defs>
        <Radial id={`${id}-vm1`} color={p.primary} o0={0.5} />
        <Radial id={`${id}-vm2`} color={p.secondary} o0={0.35} />
      </defs>
      <path d={stars} fill="#fff" fillOpacity={0.7} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.15)} fill={`url(#${id}-vm1)`} />
      {rocks.map((r, i) => (
        <polygon key={i} points={rock(r[0], r[1], r[2], r[3])} fill={i % 2 ? "#171226" : "#0f0b1a"} stroke={p.primary} strokeOpacity={0.5} strokeWidth={1.5} strokeLinejoin="round" />
      ))}
      <circle cx={f(cx + R * 0.7)} cy={f(cy + R * 0.95)} r={f(R * 0.5)} fill={`url(#${id}-vm2)`} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.66)} fill="none" stroke="#fff" strokeOpacity={0.12} strokeWidth={f(R * 0.07)} strokeDasharray={`${f(seg - 6)} 6`} transform={`rotate(-90 ${f(cx)} ${f(cy)})`} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.66)} fill="none" stroke={p.secondary} strokeOpacity={0.95} strokeWidth={f(R * 0.07)} strokeDasharray={`${f(seg - 6)} 6 ${f(seg - 6)} 6 ${f(seg - 6)} ${f(circ)}`} transform={`rotate(-90 ${f(cx)} ${f(cy)})`} strokeLinecap="butt" />
      <Sym s={s} id="DM" x={cx} y={cy} size={R * 0.9} plate={false} />
      {!compact ? (
        <>
          <line x1={f(drillX)} y1={f(drillY)} x2={f(cx + R * 1.0)} y2={f(cy - R * 0.2)} stroke={p.secondary} strokeWidth={2} strokeOpacity={0.9} strokeDasharray="6 4" />
          <Sym s={s} id="W" x={drillX} y={drillY} size={R * 0.56} rotate={30} />
          <Sym s={s} id="P1" x={cx - R * 0.72} y={cy - R * 0.5} size={R * 0.56} />
          <Sym s={s} id="H1" x={cx - R * 0.55} y={cy + R * 0.8} size={R * 0.44} />
          <Sym s={s} id="H2" x={cx + R * 0.2} y={cy + R * 0.82} size={R * 0.4} />
          <Small x={cx + R * 0.02} y={cy - R * 0.98} text="CORE  LV 3 / 5" color={p.secondary} size={R * 0.075} tracking="0.2em" weight={700} />
          <Small x={cx + R * 1.12} y={cy + R * 0.4} text="×1 ×2 ×3 ×4 ×5" color={p.primary} size={R * 0.07} tracking="0.16em" rotate={-90} opacity={0.75} />
        </>
      ) : null}
    </g>
  );
}

/* 12 — ROYAL CIRCUIT: race-track sweep, lap counter, turbo boost ×2/×3 */
function RoyalCircuit(s: Stage) {
  const { W, cx, cy, R, id, p, compact } = s;
  const track = `M${f(cx - R * 1.6)} ${f(cy + R * 1.3)} C${f(cx - R * 0.6)} ${f(cy + R * 1.4)} ${f(cx - R * 0.8)} ${f(cy - R * 0.2)} ${f(cx + R * 0.2)} ${f(cy - R * 0.05)} S${f(cx + R * 1.8)} ${f(cy - R * 1.0)} ${f(cx + R * 1.9)} ${f(cy - R * 1.6)}`;
  let streaks = "";
  for (let i = 0; i < 9; i++) {
    const y = cy - R * 1.1 + s.rnd() * R * 2.2;
    const x0 = s.rnd() * W * 0.5;
    streaks += `M${f(x0)} ${f(y)}h${f(R * (0.4 + s.rnd() * 0.9))} `;
  }
  const lapX = cx - R * 0.75;
  const lapY = cy - R * 0.62;
  const lapR = R * 0.36;
  const lapC = 2 * PI * lapR;
  const lseg = lapC / 8;
  return (
    <g>
      <defs>
        <pattern id={`${id}-rc0`} width={f(R * 0.16)} height={f(R * 0.16)} patternUnits="userSpaceOnUse">
          <rect width={f(R * 0.08)} height={f(R * 0.08)} fill="#fff" fillOpacity="0.85" />
          <rect x={f(R * 0.08)} y={f(R * 0.08)} width={f(R * 0.08)} height={f(R * 0.08)} fill="#fff" fillOpacity="0.85" />
        </pattern>
        <Radial id={`${id}-rc1`} color={p.primary} o0={0.35} />
      </defs>
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.3)} fill={`url(#${id}-rc1)`} />
      <path d={track} stroke="#1d1d26" strokeWidth={f(R * 0.62)} fill="none" strokeLinecap="round" />
      <path d={track} stroke="#f5f5f5" strokeWidth={f(R * 0.66)} fill="none" strokeDasharray={`${f(R * 0.14)} ${f(R * 0.14)}`} strokeOpacity={0.9} />
      <path d={track} stroke={p.secondary} strokeWidth={f(R * 0.66)} fill="none" strokeDasharray={`${f(R * 0.14)} ${f(R * 0.14)}`} strokeDashoffset={f(R * 0.14)} strokeOpacity={0.9} />
      <path d={track} stroke="#1d1d26" strokeWidth={f(R * 0.56)} fill="none" strokeLinecap="round" />
      <path d={track} stroke="#fff" strokeOpacity={0.35} strokeWidth={2} fill="none" strokeDasharray="14 18" />
      <path d={streaks} stroke={p.primary} strokeOpacity={0.55} strokeWidth={2} strokeLinecap="round" />
      <rect x={f(cx - R * 1.3)} y={f(cy + R * 0.9)} width={f(R * 2.6)} height={f(R * 0.14)} fill={`url(#${id}-rc0)`} />
      <Sym s={s} id="W" x={cx + R * 0.1} y={cy + R * 0.08} size={R * 0.96} rotate={-10} />
      {!compact ? (
        <>
          <Pill x={cx + R * 0.68} y={cy - R * 0.42} text="×2" color={p.primary} ink={p.primary} size={R * 0.1} />
          <Pill x={cx + R * 0.95} y={cy - R * 0.1} text="×3" color={p.secondary} ink="#fff" size={R * 0.1} />
          <circle cx={f(lapX)} cy={f(lapY)} r={f(lapR)} fill="#0b0b10" fillOpacity={0.85} stroke="#fff" strokeOpacity={0.1} strokeWidth={f(R * 0.07)} />
          <circle cx={f(lapX)} cy={f(lapY)} r={f(lapR)} fill="none" stroke={p.glow} strokeWidth={f(R * 0.07)} strokeDasharray={`${f(lseg - 4)} 4`} transform={`rotate(-90 ${f(lapX)} ${f(lapY)})`} strokeOpacity={0.95} />
          <circle cx={f(lapX)} cy={f(lapY)} r={f(lapR)} fill="none" stroke="#0b0b10" strokeWidth={f(R * 0.08)} strokeDasharray={`0 ${f(lseg * 6)} ${f(lapC)}`} transform={`rotate(-90 ${f(lapX)} ${f(lapY)})`} />
          <Small x={lapX} y={lapY - R * 0.05} text="LAP" color="#fff" size={R * 0.08} tracking="0.2em" opacity={0.7} />
          <Small x={lapX} y={lapY + R * 0.1} text="6 / 8" color={p.glow} size={R * 0.13} weight={800} tracking="0.02em" />
          <Sym s={s} id="S" x={cx + R * 0.85} y={cy - R * 0.98} size={R * 0.44} rotate={8} />
          <Sym s={s} id="P1" x={cx + R * 0.85} y={cy + R * 0.62} size={R * 0.5} />
          <Sym s={s} id="H1" x={cx - R * 0.85} y={cy + R * 0.5} size={R * 0.46} />
        </>
      ) : null}
    </g>
  );
}

/* 13 — DRAGON CORE: reactor containment with a dragon charge gauge 0/20 */
function DragonCore(s: Stage) {
  const { cx, cy, R, id, p, compact } = s;
  let ticks = "";
  let lit = "";
  for (let i = 0; i < 20; i++) {
    const a = -PI * 1.25 + (i / 19) * PI * 1.5;
    const d = `M${f(cx + Math.cos(a) * R * 0.98)} ${f(cy + Math.sin(a) * R * 0.98)}L${f(cx + Math.cos(a) * R * 1.12)} ${f(cy + Math.sin(a) * R * 1.12)} `;
    if (i < 13) lit += d;
    else ticks += d;
  }
  const embers = scatterDots(s, 30, [cx - R * 1.3, cy - R * 1.3, R * 2.6, R * 2.6], 0.8, 2.4);
  const scales = [
    { x: cx + R * 0.95, y: cy + R * 0.45, r: 15 },
    { x: cx + R * 0.72, y: cy + R * 0.8, r: 30 },
    { x: cx + R * 0.4, y: cy + R * 0.8, r: 45 },
  ];
  return (
    <g>
      <defs>
        <Radial id={`${id}-dc1`} color={p.primary} o0={0.55} mid={[0.5, p.glow, 0.2]} />
        <Radial id={`${id}-dc2`} color={p.glow} o0={0.9} mid={[0.5, p.primary, 0.5]} />
      </defs>
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.5)} fill={`url(#${id}-dc1)`} />
      <polygon points={svgPolygon(cx, cy, R * 1.28, 6, PI / 6)} fill="none" stroke={p.secondary} strokeOpacity={0.4} strokeWidth={2} />
      <polygon points={svgPolygon(cx, cy, R * 0.84, 6, PI / 6)} fill="#1a0608" fillOpacity={0.8} stroke={p.secondary} strokeOpacity={0.85} strokeWidth={2.5} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.62)} fill={`url(#${id}-dc2)`} />
      <path d={ticks} stroke="#fff" strokeOpacity={0.18} strokeWidth={3} strokeLinecap="round" />
      <path d={lit} stroke={p.secondary} strokeWidth={3.5} strokeLinecap="round" />
      <Sym s={s} id="P1" x={cx} y={cy} size={R * 0.9} plate={false} />
      {!compact ? (
        <>
          {scales.map((sc, i) => (
            <Sym key={i} s={s} id="DC" x={sc.x} y={sc.y} size={R * 0.4} rotate={sc.r} />
          ))}
          <Sym s={s} id="W" x={cx - R * 0.9} y={cy + R * 0.7} size={R * 0.56} rotate={-12} />
          <Sym s={s} id="S" x={cx - R * 0.95} y={cy - R * 0.75} size={R * 0.42} />
          <Sym s={s} id="H1" x={cx + R * 0.95} y={cy - R * 0.75} size={R * 0.42} />
          <Small x={cx} y={cy + R * 1.0} text="DRAGON CHARGE  13 / 20" color={p.secondary} size={R * 0.075} tracking="0.2em" weight={700} opacity={0.9} />
        </>
      ) : null}
      <path d={embers} fill={p.secondary} fillOpacity={0.75} />
    </g>
  );
}

/* 14 — DEEP TREASURE: descending depth levels with treasure chests, bubbles */
function DeepTreasure(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const bubbles: Array<[number, number, number]> = [];
  for (let i = 0; i < 26; i++) bubbles.push([s.rnd() * W, cy - R * 1.3 + s.rnd() * R * 2.6, 2 + s.rnd() * R * 0.04]);
  const levels = ["×1", "×2", "×3", "×4", "×6", "×8", "×10"];
  const top = cy - R * 1.05;
  const lh = R * 0.3;
  const chest = (x: number, y: number, w: number, key: string) => (
    <g key={key}>
      <rect x={f(x - w / 2)} y={f(y - w * 0.28)} width={f(w)} height={f(w * 0.62)} rx={f(w * 0.06)} fill="#7a4a12" stroke="#fbbf24" strokeWidth={1.5} />
      <path d={`M${f(x - w / 2)} ${f(y - w * 0.28)}a${f(w / 2)} ${f(w * 0.3)} 0 0 1 ${f(w)} 0z`} fill="#b8741c" stroke="#fbbf24" strokeWidth={1.5} />
      <circle cx={f(x)} cy={f(y + w * 0.02)} r={f(w * 0.08)} fill="#fde68a" />
    </g>
  );
  return (
    <g>
      <defs>
        <Linear id={`${id}-dt1`} stops={[[0, "#0a5a6e"], [0.35, "#063a4c"], [1, "#010610"]]} />
        <Linear id={`${id}-dt2`} stops={[[0, "#bff6ff", 0.32], [1, "#bff6ff", 0]]} />
      </defs>
      <rect width={W} height={H} fill={`url(#${id}-dt1)`} />
      <polygon points={`${f(cx - R * 0.9)},0 ${f(cx - R * 0.55)},0 ${f(cx + R * 0.1)},${f(H)} ${f(cx - R * 0.9)},${f(H)}`} fill={`url(#${id}-dt2)`} />
      <polygon points={`${f(cx + R * 0.1)},0 ${f(cx + R * 0.5)},0 ${f(cx + R * 1.5)},${f(H)} ${f(cx + R * 0.8)},${f(H)}`} fill={`url(#${id}-dt2)`} />
      {!compact
        ? levels.map((l, i) => (
            <g key={l}>
              <line x1={f(cx - R * 1.3)} y1={f(top + i * lh)} x2={f(cx + R * 1.3)} y2={f(top + i * lh)} stroke={p.primary} strokeOpacity={0.18 + i * 0.03} strokeWidth={1} />
              <Small x={cx + R * 1.12} y={top + i * lh + lh * 0.5} text={l} color={i === 6 ? p.secondary : p.primary} size={R * (i === 6 ? 0.11 : 0.08)} weight={700} tracking="0.05em" opacity={0.55 + i * 0.06} anchor="end" />
            </g>
          ))
        : null}
      {!compact ? chest(cx - R * 0.78, cy - R * 0.5, R * 0.42, "c1") : null}
      {!compact ? chest(cx - R * 0.3, cy + R * 0.15, R * 0.5, "c2") : null}
      {chest(cx + R * 0.3, cy + R * 0.72, R * 0.6, "c3")}
      <Sym s={s} id="P1" x={cx + R * 0.3} y={cy + R * 0.2} size={R * 0.9} />
      {!compact ? (
        <>
          <Sym s={s} id="W" x={cx - R * 0.55} y={cy - R * 0.95} size={R * 0.6} />
          <Sym s={s} id="H1" x={cx + R * 0.85} y={cy - R * 0.62} size={R * 0.46} />
          <Sym s={s} id="H2" x={cx - R * 0.95} y={cy + R * 0.78} size={R * 0.42} />
          <Sym s={s} id="S" x={cx + R * 0.32} y={cy - R * 0.95} size={R * 0.36} />
        </>
      ) : null}
      <path d={dots(bubbles)} fill="none" stroke="#dffaff" strokeOpacity={0.55} strokeWidth={1.2} />
    </g>
  );
}

/* 15 — MOONBASE 77: retro lunar base, moon horizon, drifting wilds */
function Moonbase77(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const stars = scatterDots(s, 70, [0, 0, W, H * 0.8], 0.5, 1.4);
  const mR = R * 3.2;
  const mY = cy + R * 0.95 + mR;
  const craters: Array<[number, number, number]> = [];
  for (let i = 0; i < 10; i++) craters.push([cx - R * 1.3 + s.rnd() * R * 2.6, cy + R * 1.05 + s.rnd() * R * 0.5, R * (0.03 + s.rnd() * 0.08)]);
  const domeX = cx - R * 0.55;
  const domeY = cy + R * 0.95;
  const domeR = R * 0.55;
  let trail = "";
  for (const [x, y] of [
    [cx - R * 0.92, cy - R * 0.72],
    [cx - R * 0.15, cy - R * 0.9],
  ]) trail += `M${f(x + R * 0.2)} ${f(y + R * 0.1)}q${f(R * 0.25)} ${f(R * 0.1)} ${f(R * 0.55)} ${f(-R * 0.05)} `;
  return (
    <g>
      <defs>
        <Radial id={`${id}-mb1`} color="#3a3d4a" o0={1} o1={1} mid={[0.6, "#232633", 1]} />
        <Radial id={`${id}-mb2`} color="#60a5fa" o0={1} mid={[0.55, "#1e3a8a", 1]} o1={1} />
        <Linear id={`${id}-mb3`} stops={[[0, "#2b2f3d"], [1, "#151824"]]} />
      </defs>
      <path d={stars} fill="#fff" fillOpacity={0.8} />
      <circle cx={f(cx + R * 0.95)} cy={f(cy - R * 1.05)} r={f(R * 0.16)} fill={`url(#${id}-mb2)`} />
      <circle cx={f(cx)} cy={f(mY)} r={f(mR)} fill={`url(#${id}-mb1)`} />
      <path d={dots(craters)} fill="#000" fillOpacity={0.35} stroke="#9aa0b4" strokeOpacity={0.35} strokeWidth={1} />
      <path d={`M${f(domeX - domeR)} ${f(domeY)}a${f(domeR)} ${f(domeR)} 0 0 1 ${f(domeR * 2)} 0z`} fill={`url(#${id}-mb3)`} stroke={p.secondary} strokeOpacity={0.8} strokeWidth={2} />
      <path d={`M${f(domeX)} ${f(domeY - domeR)}V${f(domeY)} M${f(domeX - domeR * 0.7)} ${f(domeY - domeR * 0.7)}L${f(domeX + domeR * 0.7)} ${f(domeY - domeR * 0.7)}`} stroke={p.secondary} strokeOpacity={0.35} strokeWidth={1.2} />
      <rect x={f(domeX - domeR * 0.28)} y={f(domeY - domeR * 0.45)} width={f(domeR * 0.56)} height={f(domeR * 0.32)} rx={3} fill={p.primary} fillOpacity={0.9} />
      <path d={`M${f(domeX + domeR * 0.85)} ${f(domeY)}V${f(domeY - domeR * 1.6)}h${f(domeR * 0.25)}`} stroke="#c9cdd8" strokeWidth={2} fill="none" />
      <circle cx={f(domeX + domeR * 1.1)} cy={f(domeY - domeR * 1.6)} r={3} fill="#ff4d4d" />
      <path d={`M${f(cx - R * 1.3)} ${f(cy + R * 0.98)}H${f(cx + R * 1.3)}`} stroke={p.primary} strokeOpacity={0.9} strokeWidth={2} />
      <Sym s={s} id="P1" x={cx + R * 0.52} y={cy + R * 0.28} size={R * 0.98} />
      {!compact ? (
        <>
          <path d={trail} stroke="#fff" strokeOpacity={0.4} strokeWidth={1.5} strokeDasharray="2 6" fill="none" />
          <Sym s={s} id="W" x={cx - R * 0.92} y={cy - R * 0.72} size={R * 0.56} rotate={-14} />
          <Sym s={s} id="W" x={cx - R * 0.15} y={cy - R * 0.9} size={R * 0.42} rotate={10} />
          <Sym s={s} id="H1" x={cx - R * 0.55} y={cy + R * 0.15} size={R * 0.5} />
          <Sym s={s} id="S" x={cx + R * 0.35} y={cy - R * 0.62} size={R * 0.4} />
          <Sym s={s} id="H2" x={cx - R * 1.02} y={cy - R * 0.05} size={R * 0.38} />
        </>
      ) : null}
    </g>
  );
}

/* 16 — WILD TEMPLE: stepped stone chambers, jaguar wild with moving arrows, torches */
function WildTemple(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  let steps = "";
  const n = 5;
  const baseY = cy + R * 1.15;
  const sh = R * 0.3;
  for (let i = 0; i < n; i++) {
    const w = R * (2.7 - i * 0.48);
    steps += `M${f(cx - w / 2)} ${f(baseY - sh * (i + 1))}h${f(w)}v${f(sh)}h${f(-w)}z `;
  }
  let joints = "";
  for (let i = 0; i < n; i++) {
    const w = R * (2.7 - i * 0.48);
    const y = baseY - sh * (i + 1);
    for (let k = 1; k < 5; k++) joints += `M${f(cx - w / 2 + (w * k) / 5 + (i % 2 ? w / 10 : 0))} ${f(y)}v${f(sh)} `;
  }
  const motes = scatterDots(s, 30, [0, 0, W, H], 0.6, 1.8);
  const vines = `M${f(cx - R * 1.3)} ${f(H)}q${f(R * 0.2)} ${f(-R * 0.6)} ${f(R * 0.05)} ${f(-R * 1.2)} M${f(cx + R * 1.25)} ${f(H)}q${f(-R * 0.25)} ${f(-R * 0.5)} ${f(-R * 0.1)} ${f(-R * 1.1)} M${f(cx - R * 1.2)} ${f(cy - R * 1.3)}q${f(R * 0.3)} ${f(R * 0.4)} ${f(R * 0.1)} ${f(R * 0.9)}`;
  const chevron = (x: number, y: number, dir: 1 | -1, k: number) => `M${f(x - dir * R * 0.06)} ${f(y - R * 0.12 * k)}l${f(dir * R * 0.12 * k)} ${f(R * 0.12 * k)}l${f(-dir * R * 0.12 * k)} ${f(R * 0.12 * k)}`;
  const jx = cx;
  const jy = cy - R * 0.05;
  return (
    <g>
      <defs>
        <Radial id={`${id}-wt1`} color={p.secondary} o0={0.8} mid={[0.4, p.secondary, 0.25]} />
        <Linear id={`${id}-wt2`} stops={[[0, p.bg, 0], [1, "#000", 0.8]]} />
        <Radial id={`${id}-wt3`} color={p.glow} o0={0.35} />
      </defs>
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.5)} fill={`url(#${id}-wt3)`} />
      <ellipse cx={f(cx - R * 1.1)} cy={f(cy - R * 1.3)} rx={f(R * 0.9)} ry={f(R * 0.5)} fill="#041108" />
      <ellipse cx={f(cx + R * 1.15)} cy={f(cy - R * 1.25)} rx={f(R * 0.85)} ry={f(R * 0.45)} fill="#041108" />
      <circle cx={f(cx)} cy={f(cy - R * 1.02)} r={f(R * 0.5)} fill={`url(#${id}-wt1)`} />
      <path d={steps} fill="#0d2417" stroke="#3fbf8a" strokeOpacity={0.55} strokeWidth={1.5} />
      <path d={joints} stroke="#3fbf8a" strokeOpacity={0.22} strokeWidth={1} />
      <rect x={f(cx - R * 0.42)} y={f(baseY - sh * 3)} width={f(R * 0.84)} height={f(sh * 3)} fill="#02100a" />
      <rect x={f(cx - R * 0.42)} y={f(baseY - sh * 3)} width={f(R * 0.84)} height={f(sh * 3)} fill={`url(#${id}-wt2)`} />
      <path d={vines} stroke="#22c55e" strokeOpacity={0.6} strokeWidth={2.5} fill="none" strokeLinecap="round" />
      <Sym s={s} id="S" x={cx} y={cy - R * 1.02} size={R * 0.48} plate={false} />
      <Sym s={s} id="W" x={jx} y={jy} size={R * 0.92} />
      {!compact ? (
        <>
          <path d={`${chevron(jx - R * 0.62, jy, -1, 1)} ${chevron(jx + R * 0.62, jy, 1, 1)}`} stroke={p.secondary} strokeWidth={3} fill="none" strokeLinecap="round" strokeLinejoin="round" />
          <path d={`${chevron(jx - R * 0.78, jy, -1, 1)} ${chevron(jx + R * 0.78, jy, 1, 1)}`} stroke={p.secondary} strokeWidth={3} fill="none" strokeLinecap="round" strokeLinejoin="round" opacity={0.45} />
          <Sym s={s} id="P1" x={cx - R * 0.98} y={cy + R * 0.62} size={R * 0.54} />
          <Sym s={s} id="H1" x={cx + R * 0.98} y={cy + R * 0.62} size={R * 0.5} />
          <Sym s={s} id="H2" x={cx - R * 1.05} y={cy - R * 0.45} size={R * 0.4} />
          <Sym s={s} id="H2" x={cx + R * 1.05} y={cy - R * 0.45} size={R * 0.4} />
          <Sym s={s} id="M1" x={cx + R * 0.55} y={cy + R * 0.85} size={R * 0.34} rotate={30} />
        </>
      ) : null}
      <path d={motes} fill={p.secondary} fillOpacity={0.55} />
    </g>
  );
}

/* 17 — ZERO GRAVITY: three grids 5×3 → 6×4 → 7×5 floating in orbit */
function ZeroGravity(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const stars = scatterDots(s, 70, [0, 0, W, H], 0.5, 1.4);
  const grid = (x: number, y: number, cols: number, rows: number, cell: number, op: number, key: string, label: string, skew: number) => {
    const w = cols * cell;
    const h = rows * cell;
    let lines = "";
    for (let c = 1; c < cols; c++) lines += `M${f(x + c * cell)} ${f(y)}v${f(h)} `;
    for (let r = 1; r < rows; r++) lines += `M${f(x)} ${f(y + r * cell)}h${f(w)} `;
    return (
      <g key={key} opacity={op} transform={`translate(${f(x + w / 2)} ${f(y + h / 2)}) skewY(${skew}) translate(${f(-(x + w / 2))} ${f(-(y + h / 2))})`}>
        <rect x={f(x)} y={f(y)} width={f(w)} height={f(h)} rx={f(cell * 0.15)} fill={p.bg} fillOpacity={0.75} stroke={p.primary} strokeWidth={2} />
        <path d={lines} stroke={p.primary} strokeOpacity={0.55} strokeWidth={1} />
        <Small x={x + w / 2} y={y - cell * 0.45} text={label} color={p.glow} size={cell * 0.55} weight={800} tracking="0.05em" />
      </g>
    );
  };
  const c1 = R * 0.13;
  const c2 = R * 0.155;
  const c3 = R * 0.19;
  return (
    <g>
      <defs>
        <Radial id={`${id}-zg1`} color={p.secondary} o0={0.35} />
      </defs>
      <path d={stars} fill="#fff" fillOpacity={0.75} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.4)} fill={`url(#${id}-zg1)`} />
      <ellipse cx={f(cx)} cy={f(cy)} rx={f(R * 1.35)} ry={f(R * 0.5)} fill="none" stroke={p.primary} strokeOpacity={0.35} strokeWidth={1.2} transform={`rotate(-18 ${f(cx)} ${f(cy)})`} />
      <ellipse cx={f(cx)} cy={f(cy)} rx={f(R * 1.1)} ry={f(R * 0.75)} fill="none" stroke={p.secondary} strokeOpacity={0.3} strokeWidth={1.2} transform={`rotate(32 ${f(cx)} ${f(cy)})`} />
      {!compact ? grid(cx - R * 1.12, cy - R * 1.02, 5, 3, c1, 0.5, "g1", "5×3", -8) : null}
      {!compact ? grid(cx - R * 0.35, cy - R * 0.62, 6, 4, c2, 0.72, "g2", "6×4", -5) : null}
      {grid(cx - R * 0.66, cy + R * 0.05, 7, 5, c3, 1, "g3", "7×5", -3)}
      {!compact ? (
        <path d={`M${f(cx - R * 0.42)} ${f(cy - R * 0.72)}l${f(R * 0.14)} ${f(R * 0.02)}l${f(-R * 0.05)} ${f(-R * 0.07)} M${f(cx + R * 0.02)} ${f(cy - R * 0.02)}l${f(R * 0.04)} ${f(R * 0.14)}l${f(-R * 0.1)} ${f(-R * 0.02)}`} stroke={p.glow} strokeWidth={2} fill="none" strokeLinecap="round" />
      ) : null}
      <Sym s={s} id="W" x={cx + R * 0.72} y={cy - R * 0.62} size={R * 0.82} plate={false} />
      {!compact ? (
        <>
          <Sym s={s} id="P1" x={cx - R * 0.95} y={cy + R * 0.02} size={R * 0.48} />
          <Sym s={s} id="S" x={cx + R * 1.05} y={cy + R * 0.42} size={R * 0.42} />
          <Sym s={s} id="H2" x={cx + R * 0.02} y={cy - R * 1.12} size={R * 0.38} rotate={12} />
          <Sym s={s} id="M1" x={cx + R * 1.0} y={cy + R * 0.85} size={R * 0.34} rotate={-30} />
        </>
      ) : null}
    </g>
  );
}

/* 18 — REEL REACTOR: heat gauge 0–100 with meltdown zone, hazard stripes */
function ReelReactor(s: Stage) {
  const { W, cx, cy, R, id, p, compact } = s;
  const gR = R * 1.0;
  const a0 = PI * 0.78;
  const a1 = PI * 2.22;
  const at = (t: number) => a0 + (a1 - a0) * t;
  const needle = at(0.72);
  let hazard = "";
  const hy = cy + R * 0.95;
  for (let x = -R * 0.3; x < W + R; x += R * 0.22) hazard += `M${f(x)} ${f(hy)}h${f(R * 0.11)}l${f(-R * 0.1)} ${f(R * 0.12)}h${f(-R * 0.11)}z `;
  const tick = (t: number, label: string, color: string) => {
    const a = at(t);
    return <Small key={label} x={cx + Math.cos(a) * gR * 1.22} y={cy + Math.sin(a) * gR * 1.22} text={label} color={color} size={R * 0.08} weight={700} tracking="0.02em" />;
  };
  return (
    <g>
      <defs>
        <Radial id={`${id}-rr1`} color={p.glow} o0={0.55} />
      </defs>
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.3)} fill={`url(#${id}-rr1)`} />
      <path d={svgArc(cx, cy, gR, a0, a1)} fill="none" stroke="#0f1a0c" strokeWidth={f(R * 0.2)} strokeLinecap="round" />
      <path d={svgArc(cx, cy, gR, at(0), at(0.4))} fill="none" stroke={p.glow} strokeWidth={f(R * 0.14)} />
      <path d={svgArc(cx, cy, gR, at(0.4), at(0.8))} fill="none" stroke={p.secondary} strokeWidth={f(R * 0.14)} />
      <path d={svgArc(cx, cy, gR, at(0.8), at(1))} fill="none" stroke="#ef4444" strokeWidth={f(R * 0.14)} />
      <path d={svgArc(cx, cy, gR, at(0.8), at(1))} fill="none" stroke="#fff" strokeWidth={f(R * 0.14)} strokeDasharray="4 8" strokeOpacity={0.35} />
      {!compact ? [tick(0, "0", "#c9d1c4"), tick(0.4, "40", p.secondary), tick(0.8, "80", "#ef4444"), tick(1, "100", "#ef4444")] : null}
      <line x1={f(cx)} y1={f(cy)} x2={f(cx + Math.cos(needle) * gR * 0.92)} y2={f(cy + Math.sin(needle) * gR * 0.92)} stroke="#fff" strokeWidth={3} strokeLinecap="round" />
      <Sym s={s} id="P1" x={cx} y={cy} size={R * 0.78} plate={false} />
      {!compact ? (
        <>
          <Small x={cx} y={cy + R * 0.62} text="HEAT 72" color={p.secondary} size={R * 0.12} weight={800} tracking="0.06em" />
          <Pill x={cx + R * 0.1} y={cy - R * 1.12} text="MELTDOWN" color="#ef4444" ink="#ff8a8a" bg="#2a0808" size={R * 0.07} />
          <Sym s={s} id="W" x={cx - R * 0.9} y={cy + R * 0.62} size={R * 0.5} />
          <Sym s={s} id="S" x={cx + R * 0.9} y={cy + R * 0.62} size={R * 0.5} rotate={15} />
          <Sym s={s} id="H1" x={cx - R * 1.05} y={cy - R * 0.55} size={R * 0.4} />
          <Sym s={s} id="M2" x={cx + R * 1.05} y={cy - R * 0.5} size={R * 0.4} />
        </>
      ) : null}
      <path d={hazard} fill={p.secondary} fillOpacity={0.9} />
      <rect x={0} y={f(hy)} width={W} height={f(R * 0.12)} fill="none" stroke="#000" strokeOpacity={0.6} strokeWidth={1} />
    </g>
  );
}

/* 19 — OBSIDIAN: pure black, one thin gold line, one white-gold wild, a whisper of 50,000× */
function Obsidian(s: Stage) {
  const { W, H, cx, cy, R, p, compact } = s;
  const dust = scatterDots(s, 14, [0, 0, W, H], 0.4, 1.0);
  const lineY = cy + R * 0.62;
  return (
    <g>
      <rect width={W} height={H} fill="#000" />
      <path d={dust} fill={p.secondary} fillOpacity={0.4} />
      <polygon points={svgPolygon(cx, cy - R * 0.05, R * 0.78, 6)} fill="#050505" stroke={p.primary} strokeOpacity={0.14} strokeWidth={1} />
      <Sym s={s} id="W" x={cx} y={cy - R * 0.05} size={R * 0.72} plate={false} halo={false} />
      <line x1={f(W * 0.12)} y1={f(lineY)} x2={f(W * 0.88)} y2={f(lineY)} stroke={p.secondary} strokeWidth={1} strokeOpacity={0.9} />
      <circle cx={f(W * 0.88)} cy={f(lineY)} r={2} fill={p.primary} />
      {!compact ? <Small x={W * 0.88} y={lineY + R * 0.14} text="50,000×" color={p.secondary} size={R * 0.07} tracking="0.3em" anchor="end" opacity={0.85} /> : null}
    </g>
  );
}

/* 20 — SPINZA ORIGINAL: the Spinza ring mark, Mystery Orb, Mega Meter, cascading symbols */
function SpinzaOriginal(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const stars = scatterDots(s, 60, [0, 0, W, H], 0.5, 1.4);
  let rays = "";
  for (let i = 0; i < 28; i++) {
    const a = (i / 28) * PI * 2;
    const len = R * (1.15 + s.rnd() * 0.7);
    rays += `M${f(cx + Math.cos(a) * R * 0.75)} ${f(cy + Math.sin(a) * R * 0.75)}L${f(cx + Math.cos(a) * len)} ${f(cy + Math.sin(a) * len)} `;
  }
  const mR = R * 0.78;
  const circ = 2 * PI * mR;
  const seg = circ / 30;
  const colX = cx + R * 0.98;
  const fall = ["P1", "H1", "H2", "M1"];
  return (
    <g>
      <defs>
        <Radial id={`${id}-so1`} color={p.primary} o0={0.6} mid={[0.5, p.glow, 0.18]} />
        <Linear id={`${id}-so2`} stops={[[0, p.primary], [0.5, "#fff"], [1, p.secondary]]} dir="d" />
      </defs>
      <path d={stars} fill="#fff" fillOpacity={0.75} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.5)} fill={`url(#${id}-so1)`} />
      <path d={rays} stroke={p.primary} strokeOpacity={0.35} strokeWidth={1.5} strokeLinecap="round" />
      <circle cx={f(cx)} cy={f(cy)} r={f(mR)} fill="none" stroke="#fff" strokeOpacity={0.12} strokeWidth={f(R * 0.06)} strokeDasharray={`${f(seg - 3)} 3`} transform={`rotate(-90 ${f(cx)} ${f(cy)})`} />
      <circle cx={f(cx)} cy={f(cy)} r={f(mR)} fill="none" stroke={`url(#${id}-so2)`} strokeWidth={f(R * 0.06)} strokeDasharray={`${f(seg * 19 - 3)} ${f(circ)}`} transform={`rotate(-90 ${f(cx)} ${f(cy)})`} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.6)} fill="none" stroke={p.secondary} strokeOpacity={0.4} strokeWidth={1.5} strokeDasharray="4 8" />
      <Sym s={s} id="W" x={cx} y={cy} size={R * 0.9} plate={false} />
      {!compact ? (
        <>
          <Small x={cx} y={cy + R * 0.9} text="MEGA METER  19 / 30" color={p.glow} size={R * 0.07} tracking="0.22em" weight={700} opacity={0.9} />
          <Sym s={s} id="MY" x={cx - R * 0.98} y={cy - R * 0.62} size={R * 0.62} />
          <Sym s={s} id="Z" x={cx - R * 0.98} y={cy + R * 0.3} size={R * 0.5} />
          <rect x={f(colX - R * 0.26)} y={f(cy - R * 1.12)} width={f(R * 0.52)} height={f(R * 2.12)} rx={f(R * 0.05)} fill="#fff" fillOpacity={0.04} stroke="#fff" strokeOpacity={0.12} />
          {fall.map((idd, i) => (
            <Sym key={idd} s={s} id={idd} x={colX} y={cy - R * 0.95 + i * R * 0.56} size={R * 0.46} opacity={0.55 + i * 0.15} />
          ))}
          <Pill x={cx - R * 0.28} y={cy - R * 1.04} text="WILD DROP" color={p.secondary} ink={p.secondary} size={R * 0.065} />
          <Pill x={cx + R * 0.44} y={cy - R * 1.04} text="MULTIPLIER DROP" color={p.glow} ink={p.glow} size={R * 0.065} />
          <Small x={cx} y={cy + R * 1.02} text="×1 ×2 ×3 ×4 ×6 ×8 ×10 ×15" color={p.primary} size={R * 0.07} tracking="0.16em" opacity={0.7} />
        </>
      ) : null}
    </g>
  );
}

/* ======================================================================= */
/*  RISK GAMES + BEYOND SLOTS — no reel symbols. Shared grammar: a rising    */
/*  multiplier ladder (`Rungs`) and the big-button verb as a solid pill      */
/*  (`Verb`) so the cash-out / original category reads instantly.           */
/* ======================================================================= */

/** Ad-hoc glyph from the shared symbol vocabulary (no reel plate, no halo). */
function Shape({ shape, color, accent, x, y, size, rotate, opacity, label }: { shape: SymbolShape; color: string; accent?: string; x: number; y: number; size: number; rotate?: number; opacity?: number; label?: string }) {
  return <SymbolSvg style={{ shape, color, accent, label, glow: 0 }} size={size} x={x} y={y} rotate={rotate} opacity={opacity} plate={false} halo={false} />;
}

/** The game's big-button verb as a solid pill with a "button" dot. */
function Verb({ x, y, text, color, ink = "#0b0d14", size = 12, opacity = 1 }: { x: number; y: number; text: string; color: string; ink?: string; size?: number; opacity?: number }) {
  const width = text.length * size * 0.7 + size * 2.6;
  const h = size * 1.9;
  const left = x - width / 2;
  return (
    <g opacity={opacity}>
      <rect x={f(left)} y={f(y - h / 2)} width={f(width)} height={f(h)} rx={f(h / 2)} fill={color} stroke="#fff" strokeOpacity={0.35} strokeWidth={1} />
      <circle cx={f(left + h * 0.58)} cy={f(y)} r={f(size * 0.24)} fill={ink} fillOpacity={0.75} />
      <text x={f(x + size * 0.42)} y={f(y)} textAnchor="middle" dominantBaseline="central" fontSize={f(size)} fontWeight={800} fill={ink} style={{ fontFamily: FONT, letterSpacing: "0.1em" }}>
        {text}
      </text>
    </g>
  );
}

/** Multiplier ladder labels: opacity and size grow along the list, the last rung is hot. */
function Rungs({ items, color, hot, size, anchor = "middle", weight = 700 }: { items: Array<[number, number, string]>; color: string; hot: string; size: number; anchor?: "start" | "middle" | "end"; weight?: 600 | 700 | 800 }) {
  const n = Math.max(1, items.length - 1);
  return (
    <>
      {items.map(([x, y, t], i) => (
        <Small key={`${t}${i}`} x={x} y={y} text={t} color={i === n ? hot : color} size={i === n ? size * 1.3 : size} anchor={anchor} weight={i === n ? 800 : weight} tracking="0.06em" opacity={0.5 + (i / n) * 0.5} />
      ))}
    </>
  );
}

/* 21 — SKYFALL: a jet climbs from the cloud deck through the storm into space; altitude rungs on the left */
function Skyfall(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const stars = scatterDots(s, 55, [0, 0, W, Math.max(1, cy - R * 0.45)], 0.5, 1.4);
  const cloudY = cy + R * 1.02;
  const clouds: Array<[number, number, number]> = [];
  for (let i = 0; i < 12; i++) clouds.push([cx - R * 1.4 + i * R * 0.26 + s.rnd() * R * 0.1, cloudY + s.rnd() * R * 0.2, R * (0.12 + s.rnd() * 0.15)]);
  const jx = cx + R * 0.52;
  const jy = cy - R * 0.48;
  const trail = `M${f(cx - R * 1.15)} ${f(cy + R * 0.98)} C${f(cx - R * 0.1)} ${f(cy + R * 0.98)} ${f(cx + R * 0.05)} ${f(cy + R * 0.25)} ${f(jx - R * 0.1)} ${f(jy + R * 0.1)}`;
  const jet = `M${f(R * 0.72)} 0 L${f(R * 0.12)} ${f(-R * 0.075)} L${f(-R * 0.56)} ${f(-R * 0.06)} L${f(-R * 0.62)} 0 L${f(-R * 0.56)} ${f(R * 0.06)} L${f(R * 0.12)} ${f(R * 0.075)} Z`;
  const wings = `M${f(R * 0.06)} ${f(-R * 0.05)} L${f(-R * 0.48)} ${f(-R * 0.44)} L${f(-R * 0.62)} ${f(-R * 0.42)} L${f(-R * 0.44)} ${f(-R * 0.05)} Z M${f(R * 0.06)} ${f(R * 0.05)} L${f(-R * 0.48)} ${f(R * 0.44)} L${f(-R * 0.62)} ${f(R * 0.42)} L${f(-R * 0.44)} ${f(R * 0.05)} Z`;
  const bolt = `M${f(cx - R * 0.62)} ${f(cy + R * 0.15)} l${f(R * 0.1)} ${f(R * 0.2)} l${f(-R * 0.09)} ${f(R * 0.02)} l${f(R * 0.14)} ${f(R * 0.26)}`;
  const lx = cx - R * 1.14;
  const rungs: Array<[number, number, string]> = [[lx, cy + R * 0.78, "1.5× CLOUDS"], [lx, cy + R * 0.38, "3× STORM FRONT"], [lx, cy - R * 0.02, "8× STRATOSPHERE"], [lx, cy - R * 0.42, "25× EDGE OF SPACE"], [lx, cy - R * 0.82, "100× ORBIT"]];
  let ticks = "";
  for (const [x, y] of rungs) ticks += `M${f(x - R * 0.06)} ${f(y)}h${f(R * 0.04)} M${f(x - R * 0.04)} ${f(y - R * 0.2)}v${f(R * 0.4)} `;
  return (
    <g>
      <defs>
        <Linear id={`${id}-sf1`} stops={[[0, "#020617"], [0.32, "#1e1b4b"], [0.58, "#334155"], [0.82, "#94a3b8"], [1, "#e2e8f0"]]} />
        <Linear id={`${id}-sf2`} stops={[[0, p.secondary, 0], [1, p.secondary, 1]]} dir="h" />
        <Radial id={`${id}-sf3`} color={p.secondary} o0={0.9} />
      </defs>
      <rect width={W} height={H} fill={`url(#${id}-sf1)`} />
      <path d={stars} fill="#fff" fillOpacity={0.8} />
      <rect x={0} y={f(cy + R * 0.05)} width={W} height={f(R * 0.7)} fill="#0f172a" fillOpacity={0.35} />
      <path d={bolt} stroke={p.glow} strokeWidth={2} fill="none" strokeLinecap="round" strokeLinejoin="round" opacity={0.9} />
      <path d={dots(clouds)} fill="#f8fafc" fillOpacity={0.9} />
      <path d={dots(clouds.map(([x, y, r]) => [x + r * 0.2, y + r * 0.35, r * 0.8]))} fill="#cbd5e1" fillOpacity={0.6} />
      <path d={trail} fill="none" stroke={`url(#${id}-sf2)`} strokeWidth={f(R * 0.05)} strokeLinecap="round" />
      <path d={trail} fill="none" stroke="#fff" strokeOpacity={0.8} strokeWidth={1.5} strokeDasharray="3 8" />
      {!compact ? <path d={ticks} stroke={p.primary} strokeOpacity={0.6} strokeWidth={1.5} fill="none" /> : null}
      {!compact ? <Rungs items={rungs} color={p.primary} hot="#fff" size={R * 0.062} anchor="start" /> : null}
      <circle cx={f(jx - R * 0.45 * Math.cos(0.61))} cy={f(jy + R * 0.45 * Math.sin(0.61))} r={f(R * 0.14)} fill={`url(#${id}-sf3)`} />
      <g transform={`translate(${f(jx)} ${f(jy)}) rotate(-35)`}>
        <path d={wings} fill="#94a3b8" stroke="#e2e8f0" strokeWidth={1} />
        <path d={jet} fill="#f1f5f9" stroke="#64748b" strokeWidth={1} />
        <ellipse cx={f(R * 0.28)} cy={f(-R * 0.02)} rx={f(R * 0.12)} ry={f(R * 0.045)} fill={p.secondary} />
        <path d={`M${f(-R * 0.62)} 0 h${f(-R * 0.28)}`} stroke={p.secondary} strokeWidth={f(R * 0.05)} strokeLinecap="round" strokeOpacity={0.9} />
      </g>
      {!compact ? <Verb x={cx + R * 0.72} y={cy + R * 0.26} text="CASH OUT" color={p.secondary} size={R * 0.075} /> : null}
    </g>
  );
}

/* 22 — DEEP DIVE: research sub sinking past depth markers, a leviathan waiting in the abyss */
function DeepDive(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const surface = cy - R * 1.05;
  const bubbles: Array<[number, number, number]> = [];
  for (let i = 0; i < 22; i++) bubbles.push([cx - R * 1.1 + s.rnd() * R * 2.2, surface + R * 0.2 + s.rnd() * R * 2.0, 1.5 + s.rnd() * R * 0.03]);
  let waves = `M0 ${f(surface)}`;
  for (let i = 0; i < 10; i++) waves += ` q${f(W / 20)} ${f(-R * 0.06)} ${f(W / 10)} 0`;
  const sx = cx - R * 0.3;
  const sy = cy - R * 0.28;
  const rx = cx + R * 1.12;
  const rungs: Array<[number, number, string]> = [[rx, cy + R * 0.02, "1,000 m  ×2"], [rx, cy + R * 0.38, "3,000 m  ×5"], [rx, cy + R * 0.74, "ABYSS  ×20"]];
  let markers = "";
  for (const [, y] of rungs) markers += `M${f(cx - R * 1.2)} ${f(y + R * 0.11)}H${f(cx + R * 1.2)} `;
  const body = `M${f(cx + R * 1.45)} ${f(cy + R * 1.45)} C${f(cx + R * 1.0)} ${f(cy + R * 0.75)} ${f(cx + R * 0.35)} ${f(cy + R * 1.7)} ${f(cx - R * 0.35)} ${f(cy + R * 1.12)}`;
  const spines = `M${f(cx + R * 0.95)} ${f(cy + R * 1.0)}l${f(R * 0.05)} ${f(-R * 0.24)}l${f(R * 0.1)} ${f(R * 0.2)} M${f(cx + R * 0.72)} ${f(cy + R * 1.0)}l${f(R * 0.03)} ${f(-R * 0.22)}l${f(R * 0.1)} ${f(R * 0.18)} M${f(cx + R * 1.2)} ${f(cy + R * 1.12)}l${f(R * 0.07)} ${f(-R * 0.22)}l${f(R * 0.09)} ${f(R * 0.22)}`;
  return (
    <g>
      <defs>
        <Linear id={`${id}-dd1`} stops={[[0, "#0e7490", 0.55], [0.3, "#0c4a6e", 0.35], [1, "#000", 0]]} />
        <Linear id={`${id}-dd2`} stops={[[0, p.glow, 0.5], [1, p.glow, 0]]} />
        <Radial id={`${id}-dd3`} color={p.secondary} o0={0.9} />
      </defs>
      <rect x={0} y={f(surface)} width={W} height={f(H - surface)} fill={`url(#${id}-dd1)`} />
      <polygon points={`${f(cx - R * 0.9)},${f(surface)} ${f(cx - R * 0.45)},${f(surface)} ${f(cx + R * 0.2)},${f(cy + R * 1.3)} ${f(cx - R * 0.75)},${f(cy + R * 1.3)}`} fill={`url(#${id}-dd2)`} opacity={0.45} />
      <path d={waves} fill="none" stroke="#e0fbff" strokeOpacity={0.9} strokeWidth={2} />
      {!compact ? <path d={markers} stroke={p.primary} strokeOpacity={0.4} strokeWidth={1} strokeDasharray="6 6" /> : null}
      {!compact ? <Rungs items={rungs} color={p.primary} hot={p.secondary} size={R * 0.065} anchor="end" /> : null}
      <path d={body} fill="none" stroke={p.secondary} strokeOpacity={0.5} strokeWidth={f(R * 0.33)} strokeLinecap="round" />
      <path d={body} fill="none" stroke="#02161f" strokeWidth={f(R * 0.3)} strokeLinecap="round" />
      <path d={body} fill="none" stroke={p.secondary} strokeOpacity={0.3} strokeWidth={f(R * 0.3)} strokeLinecap="round" strokeDasharray="2 14" />
      <path d={spines} fill="#02161f" stroke={p.secondary} strokeOpacity={0.7} strokeWidth={1.2} />
      <ellipse cx={f(cx - R * 0.42)} cy={f(cy + R * 1.12)} rx={f(R * 0.3)} ry={f(R * 0.2)} fill="#02161f" stroke={p.secondary} strokeOpacity={0.5} strokeWidth={1.2} />
      <polygon points={`${f(cx - R * 0.68)},${f(cy + R * 1.09)} ${f(cx - R * 0.98)},${f(cy + R * 1.25)} ${f(cx - R * 0.6)},${f(cy + R * 1.27)}`} fill="#02161f" stroke={p.secondary} strokeOpacity={0.5} strokeWidth={1.2} />
      <circle cx={f(cx - R * 0.55)} cy={f(cy + R * 1.05)} r={f(R * 0.035)} fill={p.secondary} />
      <circle cx={f(cx - R * 0.55)} cy={f(cy + R * 1.05)} r={f(R * 0.1)} fill={`url(#${id}-dd3)`} />
      <polygon points={`${f(sx + R * 0.55)},${f(sy + R * 0.05)} ${f(sx + R * 1.25)},${f(sy + R * 0.65)} ${f(sx + R * 0.7)},${f(sy + R * 0.95)}`} fill={p.primary} fillOpacity={0.16} />
      <g transform={`translate(${f(sx)} ${f(sy)}) rotate(14)`}>
        <rect x={f(-R * 0.22)} y={f(-R * 0.42)} width={f(R * 0.26)} height={f(R * 0.3)} rx={f(R * 0.04)} fill="#0b3444" stroke={p.primary} strokeWidth={1.5} />
        <path d={`M${f(-R * 0.09)} ${f(-R * 0.42)}v${f(-R * 0.16)}h${f(R * 0.14)}`} stroke={p.primary} strokeWidth={2} fill="none" />
        <rect x={f(-R * 0.7)} y={f(-R * 0.2)} width={f(R * 1.35)} height={f(R * 0.42)} rx={f(R * 0.21)} fill="#0b3444" stroke={p.primary} strokeWidth={2} />
        <path d={dots([[-R * 0.3, 0, R * 0.055], [-R * 0.05, 0, R * 0.055], [R * 0.2, 0, R * 0.055]])} fill={p.secondary} stroke="#e0fbff" strokeWidth={1} />
        <path d={`M${f(-R * 0.7)} ${f(-R * 0.16)}l${f(-R * 0.16)} ${f(-R * 0.1)}v${f(R * 0.52)}l${f(R * 0.16)} ${f(-R * 0.1)}`} fill="#0b3444" stroke={p.primary} strokeWidth={1.5} />
        <path d={`M${f(-R * 0.86)} ${f(-R * 0.16)}v${f(R * 0.32)}`} stroke={p.primary} strokeWidth={3} strokeLinecap="round" />
        <circle cx={f(R * 0.6)} cy={f(R * 0.02)} r={f(R * 0.06)} fill={p.glow} />
      </g>
      <path d={dots(bubbles)} fill="none" stroke="#dffaff" strokeOpacity={0.5} strokeWidth={1.2} />
      {!compact ? <Verb x={cx + R * 0.62} y={surface + R * 0.32} text="SURFACE" color={p.secondary} size={R * 0.075} /> : null}
    </g>
  );
}

/* 23 — ROCKET RUN: launch pad, spent stage tumbling away, trajectory milestones toward a big Mars */
function RocketRun(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const stars = scatterDots(s, 70, [0, 0, W, H], 0.5, 1.4);
  const mx = cx + R * 0.86;
  const my = cy - R * 0.84;
  const mr = R * 0.5;
  const ground = cy + R * 1.08;
  const px = cx - R * 0.92;
  const bez = (t: number): [number, number] => {
    const x0 = px + R * 0.12;
    const y0 = ground - R * 0.1;
    const x1 = cx - R * 0.6;
    const y1 = cy - R * 1.4;
    const x2 = mx - mr * 0.55;
    const y2 = my + mr * 0.75;
    const u = 1 - t;
    return [u * u * x0 + 2 * u * t * x1 + t * t * x2, u * u * y0 + 2 * u * t * y1 + t * t * y2];
  };
  const traj = `M${f(bez(0)[0])} ${f(bez(0)[1])} Q${f(cx - R * 0.6)} ${f(cy - R * 1.4)} ${f(bez(1)[0])} ${f(bez(1)[1])}`;
  const ms: Array<{ t: number; l: string; side: 1 | 0 }> = [
    { t: 0.14, l: "2× MAX-Q", side: 1 },
    { t: 0.28, l: "5× SEPARATION", side: 1 },
    { t: 0.74, l: "15× ESCAPE", side: 0 },
    { t: 0.9, l: "60× TMI", side: 0 },
  ];
  const [rkx, rky] = bez(0.44);
  const smoke = scatterDots(s, 14, [px - R * 0.3, ground - R * 0.35, R * 0.9, R * 0.35], R * 0.03, R * 0.1);
  return (
    <g>
      <defs>
        <Radial id={`${id}-rr1`} color="#f97316" o0={1} mid={[0.55, "#c2410c", 1]} o1={0.9} />
        <Radial id={`${id}-rr2`} color={p.glow} o0={0.55} />
        <Radial id={`${id}-rr3`} color={p.glow} o0={1} mid={[0.35, p.primary, 0.8]} />
      </defs>
      <path d={stars} fill="#fff" fillOpacity={0.75} />
      <circle cx={f(mx)} cy={f(my)} r={f(mr * 1.7)} fill={`url(#${id}-rr2)`} />
      <circle cx={f(mx)} cy={f(my)} r={f(mr)} fill={`url(#${id}-rr1)`} />
      <ellipse cx={f(mx - mr * 0.25)} cy={f(my + mr * 0.2)} rx={f(mr * 0.42)} ry={f(mr * 0.18)} fill="#7c2d12" fillOpacity={0.7} />
      <ellipse cx={f(mx + mr * 0.35)} cy={f(my - mr * 0.3)} rx={f(mr * 0.25)} ry={f(mr * 0.14)} fill="#7c2d12" fillOpacity={0.6} />
      <ellipse cx={f(mx)} cy={f(my - mr * 0.88)} rx={f(mr * 0.3)} ry={f(mr * 0.08)} fill="#fff7ed" fillOpacity={0.8} />
      <line x1={0} y1={f(ground)} x2={W} y2={f(ground)} stroke="#3b2a4a" strokeWidth={2} />
      <rect x={f(px - R * 0.05)} y={f(ground - R * 0.95)} width={f(R * 0.1)} height={f(R * 0.95)} fill="#2a1d3a" stroke={p.primary} strokeOpacity={0.5} strokeWidth={1} />
      <path d={`M${f(px)} ${f(ground - R * 0.85)}h${f(R * 0.3)} M${f(px)} ${f(ground - R * 0.6)}h${f(R * 0.3)} M${f(px)} ${f(ground - R * 0.35)}h${f(R * 0.3)}`} stroke={p.primary} strokeOpacity={0.55} strokeWidth={2} />
      <path d={smoke} fill="#94a3b8" fillOpacity={0.35} />
      <path d={traj} fill="none" stroke={p.primary} strokeOpacity={0.6} strokeWidth={2} strokeDasharray="5 9" />
      {!compact ? <path d={dots(ms.map((m) => [bez(m.t)[0], bez(m.t)[1], R * 0.02]))} fill={p.glow} /> : null}
      {!compact
        ? ms.map((m, i) => {
            const [x, y] = bez(m.t);
            return <Small key={m.l} x={x + m.side * R * 0.09} y={m.side ? y - R * 0.06 : y + R * 0.15} text={m.l} color={i === 3 ? p.secondary : p.primary} size={R * (i === 3 ? 0.072 : 0.06)} anchor={m.side ? "start" : "middle"} weight={i === 3 ? 800 : 700} tracking="0.06em" opacity={0.6 + i * 0.13} />;
          })
        : null}
      {!compact ? <Pill x={mx - mr * 0.1} y={my + mr * 0.35} text="300× MARS" color={p.secondary} ink="#fff" bg="#3b0a1a" size={R * 0.062} /> : null}
      <g transform={`translate(${f(cx - R * 0.72)} ${f(cy + R * 0.5)}) rotate(70)`}>
        <rect x={f(-R * 0.09)} y={f(-R * 0.22)} width={f(R * 0.18)} height={f(R * 0.44)} rx={f(R * 0.03)} fill="#c8ccd6" />
        <polygon points={`${f(-R * 0.09)},${f(R * 0.1)} ${f(-R * 0.2)},${f(R * 0.25)} ${f(-R * 0.09)},${f(R * 0.22)} ${f(R * 0.09)},${f(R * 0.1)} ${f(R * 0.2)},${f(R * 0.25)} ${f(R * 0.09)},${f(R * 0.22)}`} fill={p.secondary} />
        <path d={`M${f(-R * 0.05)} ${f(R * 0.22)}l${f(R * 0.05)} ${f(R * 0.18)}l${f(R * 0.05)} ${f(-R * 0.18)}`} fill="#ffb347" fillOpacity={0.85} />
      </g>
      <ellipse cx={f(rkx - R * 0.3)} cy={f(rky + R * 0.5)} rx={f(R * 0.12)} ry={f(R * 0.32)} fill={`url(#${id}-rr3)`} transform={`rotate(32 ${f(rkx - R * 0.3)} ${f(rky + R * 0.5)})`} />
      <Shape shape="rocket" color="#f1f5f9" accent={p.secondary} x={rkx} y={rky} size={R * 1.15} rotate={32} />
      {!compact ? <Verb x={cx + R * 0.5} y={cy + R * 0.85} text="SECURE PAYLOAD" color={p.secondary} size={R * 0.068} /> : null}
    </g>
  );
}

/* 24 — BANK HEIST: inside the vault, safe-deposit wall, growing SC bags, red/blue siren sweep */
function BankHeist(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const floor = cy + R * 0.98;
  const lampX = cx + R * 0.1;
  const lampY = cy - R * 1.22;
  const bags = [
    { x: cx - R * 0.82, y: floor - R * 0.02, k: 0.5, m: "×1.4" },
    { x: cx - R * 0.28, y: floor - R * 0.06, k: 0.68, m: "×2" },
    { x: cx + R * 0.45, y: floor - R * 0.12, k: 1.0, m: "×4" },
  ];
  let bars = "";
  for (let i = 0; i < 6; i++) bars += `M${f(cx + R * 0.95 + (i % 3) * R * 0.02)} ${f(floor - R * 0.09 * (Math.floor(i / 3) + 1))}h${f(R * 0.26)}v${f(R * 0.08)}h${f(-R * 0.26)}z `;
  return (
    <g>
      <defs>
        <pattern id={`${id}-bh0`} width={f(R * 0.2)} height={f(R * 0.14)} patternUnits="userSpaceOnUse">
          <rect x={1} y={1} width={f(R * 0.2 - 2)} height={f(R * 0.14 - 2)} rx={2} fill="#1b1811" stroke="#3a3324" strokeWidth={1} />
          <circle cx={f(R * 0.1)} cy={f(R * 0.07)} r={1.2} fill={p.primary} fillOpacity={0.55} />
        </pattern>
        <Linear id={`${id}-bh1`} stops={[[0, "#3a2f1a"], [1, "#0b0a08"]]} />
        <Radial id={`${id}-bh2`} color={p.glow} o0={0.5} />
      </defs>
      <rect x={0} y={0} width={W} height={f(floor)} fill={`url(#${id}-bh0)`} />
      <rect x={0} y={f(floor)} width={W} height={f(H - floor)} fill={`url(#${id}-bh1)`} />
      <line x1={0} y1={f(floor)} x2={W} y2={f(floor)} stroke={p.primary} strokeOpacity={0.7} strokeWidth={2} />
      <polygon points={`${f(lampX)},${f(lampY)} ${f(cx - R * 1.5)},${f(floor + R * 0.5)} ${f(cx - R * 0.55)},${f(floor + R * 0.5)}`} fill="#ef4444" fillOpacity={0.22} />
      <polygon points={`${f(lampX)},${f(lampY)} ${f(cx + R * 0.7)},${f(floor + R * 0.5)} ${f(cx + R * 1.6)},${f(floor + R * 0.5)}`} fill="#3b82f6" fillOpacity={0.22} />
      <path d={`M${f(lampX - R * 0.16)} ${f(lampY + R * 0.1)}a${f(R * 0.16)} ${f(R * 0.16)} 0 0 1 ${f(R * 0.32)} 0z`} fill="#ef4444" />
      <path d={`M${f(lampX)} ${f(lampY + R * 0.1)}a${f(R * 0.16)} ${f(R * 0.16)} 0 0 1 ${f(R * 0.16)} 0z`} fill="#3b82f6" />
      <rect x={f(lampX - R * 0.2)} y={f(lampY + R * 0.1)} width={f(R * 0.4)} height={f(R * 0.05)} fill="#52525b" />
      <circle cx={f(cx + R * 1.55)} cy={f(cy - R * 0.1)} r={f(R * 1.05)} fill="#14110c" stroke={p.primary} strokeWidth={f(R * 0.06)} />
      <circle cx={f(cx + R * 1.55)} cy={f(cy - R * 0.1)} r={f(R * 0.86)} fill="none" stroke={p.primary} strokeOpacity={0.5} strokeWidth={2} />
      <path d={dots([[cx + R * 0.55, cy - R * 0.1, R * 0.03], [cx + R * 0.66, cy - R * 0.62, R * 0.03], [cx + R * 0.66, cy + R * 0.42, R * 0.03]])} fill={p.glow} />
      <circle cx={f(cx + R * 0.45)} cy={f(floor - R * 0.4)} r={f(R * 0.7)} fill={`url(#${id}-bh2)`} />
      <path d={bars} fill={p.primary} stroke="#5a4520" strokeWidth={1} />
      {(compact ? bags.slice(2) : bags).map((b) => (
        <g key={b.m}>
          <Shape shape="bag" color={p.primary} accent="#8a6a2a" x={b.x} y={b.y - R * 0.34 * b.k} size={R * 0.95 * b.k} />
          <Small x={b.x} y={b.y - R * 0.3 * b.k} text="SC" color="#3a2a08" size={R * 0.16 * b.k} weight={800} tracking="0.02em" />
          {!compact ? <Pill x={b.x} y={b.y + R * 0.12} text={b.m} color={p.primary} ink={p.glow} size={R * 0.07} /> : null}
        </g>
      ))}
      {!compact ? <Small x={cx - R * 1.1} y={cy - R * 0.38} text="×1.1  ×1.4  ×2  ×3  ×4  ×12  ×50" color={p.glow} size={R * 0.062} tracking="0.12em" anchor="start" opacity={0.8} /> : null}
      {!compact ? <Verb x={cx - R * 0.6} y={cy - R * 0.66} text="ESCAPE NOW" color={p.secondary} ink="#fff" size={R * 0.078} /> : null}
    </g>
  );
}

/* 25 — VOLCANO: explorer on a rope in a crystal-lined shaft, lava rising from below */
function Volcano(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const lavaY = cy + R * 0.82;
  const wall = (side: 1 | -1) => {
    let d = `M${f(cx + side * W)} 0 L${f(cx + side * R * 0.62)} 0`;
    let y = 0;
    while (y < H) {
      y += R * 0.22;
      d += ` L${f(cx + side * R * (0.7 + s.rnd() * 0.22))} ${f(y)}`;
    }
    return d + ` L${f(cx + side * W)} ${f(H)} Z`;
  };
  const left = wall(-1);
  const right = wall(1);
  const embers = scatterDots(s, 30, [cx - R * 0.8, lavaY - R * 1.4, R * 1.6, R * 1.4], 0.8, 2.4);
  let lava = `M${f(cx - R * 1.3)} ${f(lavaY)}`;
  for (let i = 0; i < 8; i++) lava += ` q${f(R * 0.16)} ${f(i % 2 ? R * 0.08 : -R * 0.08)} ${f(R * 0.33)} 0`;
  lava += ` V${f(H)} H${f(cx - R * 1.3)} Z`;
  const ex = cx - R * 0.12;
  const ey = cy - R * 0.02;
  const rx = cx + R * 0.5;
  const rungs: Array<[number, number, string]> = [[rx, cy - R * 0.98, "1.5× ASH CAVES"], [rx, cy - R * 0.48, "3× OBSIDIAN"], [rx, cy + R * 0.02, "8× CRYSTALS"], [rx, cy + R * 0.52, "30× MAGMA"]];
  return (
    <g>
      <defs>
        <Linear id={`${id}-vc1`} stops={[[0, "#fde047"], [0.35, p.glow], [1, "#7f1d1d"]]} />
        <Radial id={`${id}-vc2`} color={p.primary} o0={0.75} />
      </defs>
      <ellipse cx={f(cx)} cy={f(lavaY)} rx={f(R * 1.4)} ry={f(R * 1.1)} fill={`url(#${id}-vc2)`} />
      <path d={left} fill="#170705" stroke="#4a1a10" strokeWidth={1.5} strokeLinejoin="round" />
      <path d={right} fill="#170705" stroke="#4a1a10" strokeWidth={1.5} strokeLinejoin="round" />
      {!compact ? (
        <>
          <Shape shape="crystal" color={p.secondary} accent="#fff7d6" x={cx - R * 0.82} y={cy - R * 0.62} size={R * 0.5} rotate={40} />
          <Shape shape="crystal" color={p.secondary} accent="#fff7d6" x={cx + R * 0.86} y={cy + R * 0.32} size={R * 0.55} rotate={-38} />
          <Shape shape="crystal" color="#f0abfc" accent="#fdf4ff" x={cx - R * 0.94} y={cy + R * 0.12} size={R * 0.4} rotate={62} />
          <Shape shape="crystal" color={p.secondary} accent="#fff7d6" x={cx + R * 0.9} y={cy - R * 0.72} size={R * 0.36} rotate={-70} />
        </>
      ) : null}
      <line x1={f(ex)} y1={0} x2={f(ex)} y2={f(ey - R * 0.3)} stroke="#d6b07a" strokeWidth={2.5} />
      <line x1={f(ex)} y1={0} x2={f(ex)} y2={f(ey - R * 0.3)} stroke="#6b4a1a" strokeWidth={2.5} strokeDasharray="3 5" />
      <g fill="#120404" stroke={p.glow} strokeWidth={1.2} strokeLinejoin="round">
        <circle cx={f(ex)} cy={f(ey - R * 0.22)} r={f(R * 0.085)} />
        <rect x={f(ex - R * 0.09)} y={f(ey - R * 0.13)} width={f(R * 0.18)} height={f(R * 0.3)} rx={f(R * 0.04)} />
        <path d={`M${f(ex - R * 0.06)} ${f(ey - R * 0.1)}L${f(ex - R * 0.03)} ${f(ey - R * 0.38)} M${f(ex + R * 0.06)} ${f(ey - R * 0.1)}L${f(ex + R * 0.04)} ${f(ey - R * 0.38)} M${f(ex - R * 0.05)} ${f(ey + R * 0.17)}L${f(ex - R * 0.16)} ${f(ey + R * 0.42)} M${f(ex + R * 0.05)} ${f(ey + R * 0.17)}L${f(ex + R * 0.12)} ${f(ey + R * 0.44)}`} fill="none" strokeWidth={f(R * 0.05)} strokeLinecap="round" />
      </g>
      <polygon points={`${f(ex + R * 0.06)},${f(ey - R * 0.24)} ${f(ex + R * 0.55)},${f(ey - R * 0.02)} ${f(ex + R * 0.5)},${f(ey + R * 0.3)}`} fill="#fde68a" fillOpacity={0.22} />
      <circle cx={f(ex + R * 0.07)} cy={f(ey - R * 0.24)} r={f(R * 0.03)} fill="#fde68a" />
      <path d={lava} fill={`url(#${id}-vc1)`} />
      <path d={lava} fill="none" stroke="#fff7d6" strokeOpacity={0.7} strokeWidth={2} />
      <path d={`M${f(cx - R * 0.3)} ${f(lavaY - R * 0.3)}l${f(R * 0.1)} ${f(-R * 0.12)}l${f(R * 0.1)} ${f(R * 0.12)} M${f(cx + R * 0.15)} ${f(lavaY - R * 0.24)}l${f(R * 0.1)} ${f(-R * 0.12)}l${f(R * 0.1)} ${f(R * 0.12)}`} fill="none" stroke={p.secondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
      <path d={embers} fill={p.secondary} fillOpacity={0.85} />
      {!compact ? <Rungs items={rungs} color={p.secondary} hot="#fff" size={R * 0.06} anchor="start" /> : null}
      {!compact ? <Verb x={cx - R * 0.62} y={cy + R * 0.52} text="EVACUATE" color={p.secondary} size={R * 0.078} /> : null}
    </g>
  );
}

/* 26 — BLACK HOLE: lensed disc, time-dilation streaks, a ship spiralling to the horizon */
function BlackHole(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const bx = cx + R * 0.12;
  const by = cy + R * 0.12;
  const rb = R * 0.4;
  const stars = scatterDots(s, 60, [0, 0, W, H], 0.5, 1.3);
  let streaks = "";
  for (let i = 0; i < 44; i++) {
    const a = s.rnd() * PI * 2;
    const r0 = rb * 1.7 + s.rnd() * R * 0.5;
    const r1 = r0 + R * (0.25 + s.rnd() * 0.9);
    streaks += `M${f(bx + Math.cos(a) * r0)} ${f(by + Math.sin(a) * r0)}L${f(bx + Math.cos(a) * r1)} ${f(by + Math.sin(a) * r1)} `;
  }
  const sp = (t: number): [number, number] => {
    const r = R * 1.3 * Math.exp(-0.42 * t);
    return [bx + Math.cos(t - 2.6) * r, by + Math.sin(t - 2.6) * r * 0.92];
  };
  let spiral = "";
  for (let i = 0; i <= 60; i++) {
    const [x, y] = sp((i / 60) * PI * 2.4);
    spiral += `${i ? "L" : "M"}${f(x)} ${f(y)} `;
  }
  const [shx, shy] = sp(PI * 1.35);
  const [nx, ny] = sp(PI * 1.42);
  const ang = (Math.atan2(ny - shy, nx - shx) * 180) / PI;
  const rungs: Array<[number, number, string]> = ([0.12, 0.5, 0.86, 1.15] as const).map((k, i) => {
    const [x, y] = sp(PI * k);
    return [x, y - R * 0.08, ["1.5×", "4×", "15×", "60×"][i]];
  });
  const disc = `rotate(-14 ${f(bx)} ${f(by)})`;
  return (
    <g>
      <defs>
        <Linear id={`${id}-bk1`} stops={[[0, p.primary, 0], [0.35, "#fff", 0.95], [0.7, p.secondary, 0.9], [1, p.primary, 0]]} dir="h" />
        <Radial id={`${id}-bk2`} color={p.primary} o0={0.4} />
      </defs>
      <path d={stars} fill="#fff" fillOpacity={0.7} />
      <circle cx={f(bx)} cy={f(by)} r={f(R * 1.5)} fill={`url(#${id}-bk2)`} />
      <path d={streaks} stroke={p.primary} strokeOpacity={0.5} strokeWidth={1.2} strokeLinecap="round" />
      <g transform={disc}>
        <path d={`M${f(bx - R * 1.3)} ${f(by)} A${f(R * 1.3)} ${f(R * 0.24)} 0 0 1 ${f(bx + R * 1.3)} ${f(by)}`} fill="none" stroke={`url(#${id}-bk1)`} strokeWidth={f(R * 0.09)} strokeOpacity={0.65} />
      </g>
      <circle cx={f(bx)} cy={f(by)} r={f(rb * 1.12)} fill="none" stroke="#fff" strokeOpacity={0.95} strokeWidth={f(R * 0.02)} />
      <circle cx={f(bx)} cy={f(by)} r={f(rb * 1.25)} fill="none" stroke={p.secondary} strokeOpacity={0.55} strokeWidth={f(R * 0.05)} />
      <circle cx={f(bx)} cy={f(by)} r={f(rb)} fill="#000" />
      <g transform={disc}>
        <path d={`M${f(bx - R * 1.3)} ${f(by)} A${f(R * 1.3)} ${f(R * 0.24)} 0 0 0 ${f(bx + R * 1.3)} ${f(by)}`} fill="none" stroke={`url(#${id}-bk1)`} strokeWidth={f(R * 0.11)} />
        <path d={`M${f(bx - R * 1.3)} ${f(by)} A${f(R * 1.3)} ${f(R * 0.24)} 0 0 0 ${f(bx + R * 1.3)} ${f(by)}`} fill="none" stroke="#fff" strokeOpacity={0.85} strokeWidth={1.5} />
      </g>
      <path d={spiral} fill="none" stroke={p.secondary} strokeOpacity={0.85} strokeWidth={1.6} strokeDasharray="4 6" />
      {!compact ? <Rungs items={rungs} color={p.glow} hot="#fff" size={R * 0.07} /> : null}
      <g transform={`translate(${f(shx)} ${f(shy)}) rotate(${f(ang)})`}>
        <path d={`M${f(-R * 0.55)} 0 h${f(-R * 0.35)}`} stroke={p.secondary} strokeWidth={f(R * 0.05)} strokeLinecap="round" strokeOpacity={0.7} />
        <polygon points={`${f(R * 0.16)},0 ${f(-R * 0.12)},${f(-R * 0.1)} ${f(-R * 0.06)},0 ${f(-R * 0.12)},${f(R * 0.1)}`} fill="#f5f3ff" stroke={p.primary} strokeWidth={1} />
      </g>
      {!compact ? <Verb x={cx - R * 0.75} y={cy + R * 0.88} text="WARP OUT" color={p.secondary} size={R * 0.078} /> : null}
    </g>
  );
}

/* 27 — FREEFALL: skydiver above a patchwork of fields rushing up, ghost of the unopened chute */
function Freefall(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const y0 = cy + R * 0.3;
  const cols = 8;
  const tints = ["#365314", "#65a30d", "#a16207", "#4d7c0f", "#ca8a04", "#1a2e05"];
  const paths = tints.map(() => "");
  for (let k = 0; k < 6; k++) {
    const t0 = Math.pow(k / 6, 1.55);
    const t1 = Math.pow((k + 1) / 6, 1.55);
    const ya = y0 + (H - y0) * t0;
    const yb = y0 + (H - y0) * t1;
    const spreadA = 1 + k * 0.16;
    const spreadB = 1 + (k + 1) * 0.16;
    const cw = R * 0.36;
    for (let j = 0; j < cols; j++) {
      const c = Math.floor(s.rnd() * tints.length);
      const xa0 = cx + (j - cols / 2) * cw * spreadA;
      const xa1 = cx + (j + 1 - cols / 2) * cw * spreadA;
      const xb0 = cx + (j - cols / 2) * cw * spreadB;
      const xb1 = cx + (j + 1 - cols / 2) * cw * spreadB;
      paths[c] += `M${f(xa0)} ${f(ya)}L${f(xa1)} ${f(ya)}L${f(xb1)} ${f(yb)}L${f(xb0)} ${f(yb)}Z `;
    }
  }
  let speed = "";
  for (let i = 0; i < 14; i++) {
    const x = cx - R * 1.2 + s.rnd() * R * 2.4;
    const y = cy - R * 1.2 + s.rnd() * R * 1.4;
    speed += `M${f(x)} ${f(y)}v${f(R * (0.15 + s.rnd() * 0.35))} `;
  }
  const dx = cx;
  const dy = cy - R * 0.32;
  const rx = cx + R * 1.12;
  const rungs: Array<[number, number, string]> = [[rx, cy - R * 0.95, "1.3× TERMINAL"], [rx, cy - R * 0.45, "3× CLOUD DECK"], [rx, cy + R * 0.05, "10× TREETOPS"], [rx, cy + R * 0.55, "40× GROUND RUSH"]];
  return (
    <g>
      <defs>
        <Linear id={`${id}-ff1`} stops={[[0, "#0b1a34"], [1, "#1e3a5f"]]} />
        <Radial id={`${id}-ff2`} color="#fff" o0={0.18} />
      </defs>
      <rect width={W} height={H} fill={`url(#${id}-ff1)`} />
      {paths.map((d, i) => (d ? <path key={i} d={d} fill={tints[i]} stroke="#0b1a1a" strokeWidth={1} /> : null))}
      <rect x={0} y={f(y0)} width={W} height={f(H - y0)} fill={`url(#${id}-ff1)`} opacity={0.35} />
      <ellipse cx={f(cx - R * 0.7)} cy={f(cy + R * 0.42)} rx={f(R * 0.5)} ry={f(R * 0.12)} fill={`url(#${id}-ff2)`} />
      <ellipse cx={f(cx + R * 0.55)} cy={f(cy + R * 0.62)} rx={f(R * 0.42)} ry={f(R * 0.1)} fill={`url(#${id}-ff2)`} />
      <path d={speed} stroke={p.glow} strokeOpacity={0.5} strokeWidth={1.5} strokeLinecap="round" />
      {!compact ? (
        <>
          <path d={`M${f(dx - R * 0.72)} ${f(dy - R * 0.62)} A${f(R * 0.72)} ${f(R * 0.5)} 0 0 1 ${f(dx + R * 0.72)} ${f(dy - R * 0.62)}`} fill="none" stroke={p.secondary} strokeOpacity={0.75} strokeWidth={2} strokeDasharray="5 6" />
          <path d={`M${f(dx - R * 0.72)} ${f(dy - R * 0.62)}L${f(dx - R * 0.1)} ${f(dy - R * 0.02)} M${f(dx + R * 0.72)} ${f(dy - R * 0.62)}L${f(dx + R * 0.1)} ${f(dy - R * 0.02)} M${f(dx - R * 0.25)} ${f(dy - R * 0.98)}L${f(dx - R * 0.03)} ${f(dy - R * 0.05)} M${f(dx + R * 0.25)} ${f(dy - R * 0.98)}L${f(dx + R * 0.03)} ${f(dy - R * 0.05)}`} stroke={p.secondary} strokeOpacity={0.45} strokeWidth={1} strokeDasharray="3 5" />
        </>
      ) : null}
      <g stroke="#0b1a34" strokeWidth={1.2} strokeLinejoin="round" strokeLinecap="round">
        <path d={`M${f(dx - R * 0.1)} ${f(dy - R * 0.04)}L${f(dx - R * 0.5)} ${f(dy - R * 0.3)} M${f(dx + R * 0.1)} ${f(dy - R * 0.04)}L${f(dx + R * 0.5)} ${f(dy - R * 0.3)} M${f(dx - R * 0.08)} ${f(dy + R * 0.3)}L${f(dx - R * 0.42)} ${f(dy + R * 0.62)} M${f(dx + R * 0.08)} ${f(dy + R * 0.3)}L${f(dx + R * 0.42)} ${f(dy + R * 0.62)}`} fill="none" stroke={p.secondary} strokeWidth={f(R * 0.09)} />
        <rect x={f(dx - R * 0.14)} y={f(dy - R * 0.14)} width={f(R * 0.28)} height={f(R * 0.5)} rx={f(R * 0.08)} fill={p.secondary} />
        <rect x={f(dx - R * 0.08)} y={f(dy - R * 0.1)} width={f(R * 0.16)} height={f(R * 0.42)} rx={f(R * 0.05)} fill="#1e293b" stroke="none" />
        <circle cx={f(dx)} cy={f(dy - R * 0.27)} r={f(R * 0.12)} fill="#f8fafc" />
        <path d={`M${f(dx - R * 0.1)} ${f(dy - R * 0.28)}h${f(R * 0.2)}`} stroke="#1e293b" strokeWidth={f(R * 0.06)} />
      </g>
      {!compact ? <Rungs items={rungs} color={p.glow} hot={p.secondary} size={R * 0.06} anchor="end" /> : null}
      {!compact ? <Verb x={cx - R * 0.74} y={cy - R * 0.02} text="OPEN CHUTE" color={p.secondary} size={R * 0.078} /> : null}
    </g>
  );
}

/* 28 — CORE MELTDOWN: reactor vessel with glowing fuel rods, vertical temperature gauge with a red limit */
function CoreMeltdown(s: Stage) {
  const { cx, cy, R, id, p, compact } = s;
  const vx = cx - R * 0.32;
  const vw = R * 1.1;
  const top = cy - R * 1.02;
  const bottom = cy + R * 0.98;
  let rods = "";
  for (let i = 0; i < 5; i++) rods += `M${f(vx - vw * 0.36 + i * vw * 0.18)} ${f(top + R * 0.25)}h${f(vw * 0.08)}v${f(bottom - top - R * 0.5)}h${f(-vw * 0.08)}z `;
  let bands = "";
  for (let i = 1; i < 4; i++) bands += `M${f(vx - vw / 2)} ${f(top + ((bottom - top) * i) / 4)}h${f(vw)} `;
  const gx = cx + R * 0.7;
  const gw = R * 0.22;
  const gTop = cy - R * 1.02;
  const gBot = cy + R * 0.9;
  const level = gBot - (gBot - gTop) * 0.74;
  const limit = gBot - (gBot - gTop) * 0.82;
  let grad = "";
  for (let i = 0; i <= 20; i++) grad += `M${f(gx + gw / 2 + 2)} ${f(gBot - ((gBot - gTop) * i) / 20)}h${f(i % 5 === 0 ? R * 0.07 : R * 0.035)} `;
  const rungs: Array<[number, number, string]> = [[gx + gw / 2 + R * 0.12, gBot - (gBot - gTop) * 0.2, "1.5×"], [gx + gw / 2 + R * 0.12, gBot - (gBot - gTop) * 0.45, "3×"], [gx + gw / 2 + R * 0.12, gBot - (gBot - gTop) * 0.65, "8×"], [gx + gw / 2 + R * 0.12, gBot - (gBot - gTop) * 0.8, "25×"]];
  let readouts = "";
  for (let i = 0; i < 9; i++) readouts += `M${f(cx - R * 1.1 + i * R * 0.25)} ${f(bottom + R * 0.12)}h${f(R * 0.16)}v${f(R * 0.05)}h${f(-R * 0.16)}z `;
  return (
    <g>
      <defs>
        <Linear id={`${id}-cm1`} stops={[[0, "#ef4444"], [0.25, p.secondary], [1, p.primary]]} />
        <Radial id={`${id}-cm2`} color={p.primary} o0={0.55} />
        <Linear id={`${id}-cm3`} stops={[[0, "#fff", 0.35], [0.5, p.glow, 0.95], [1, "#fff", 0.35]]} dir="h" />
        <pattern id={`${id}-cm4`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)">
          <rect width="3" height="6" fill="#ef4444" />
        </pattern>
      </defs>
      <ellipse cx={f(vx)} cy={f(cy)} rx={f(R * 1.2)} ry={f(R * 1.3)} fill={`url(#${id}-cm2)`} />
      <rect x={f(vx - vw / 2 - R * 0.1)} y={f(top - R * 0.12)} width={f(vw + R * 0.2)} height={f(R * 0.14)} rx={f(R * 0.03)} fill="#26332a" stroke={p.primary} strokeOpacity={0.5} strokeWidth={1} />
      <rect x={f(vx - vw / 2 - R * 0.1)} y={f(bottom - R * 0.02)} width={f(vw + R * 0.2)} height={f(R * 0.14)} rx={f(R * 0.03)} fill="#26332a" stroke={p.primary} strokeOpacity={0.5} strokeWidth={1} />
      <rect x={f(vx - vw / 2)} y={f(top)} width={f(vw)} height={f(bottom - top)} rx={f(R * 0.08)} fill="#0b1408" stroke={p.primary} strokeOpacity={0.9} strokeWidth={2} />
      <path d={rods} fill={`url(#${id}-cm3)`} />
      <path d={bands} stroke="#26332a" strokeWidth={f(R * 0.05)} />
      <path d={bands} stroke={p.primary} strokeOpacity={0.4} strokeWidth={1} />
      <path d={`M${f(vx - vw / 2)} ${f(cy - R * 0.5)}h${f(-R * 0.35)}v${f(R * 1.35)}h${f(R * 0.35)} M${f(vx + vw / 2)} ${f(cy - R * 0.2)}h${f(R * 0.22)}`} fill="none" stroke="#4b5563" strokeWidth={f(R * 0.06)} />
      <rect x={f(gx - gw / 2)} y={f(gTop)} width={f(gw)} height={f(gBot - gTop)} rx={f(gw / 2)} fill="#0f1a0c" stroke="#3f4a3a" strokeWidth={2} />
      <rect x={f(gx - gw / 2 + 3)} y={f(level)} width={f(gw - 6)} height={f(gBot - level - 3)} rx={f(gw / 2 - 3)} fill={`url(#${id}-cm1)`} />
      <rect x={f(gx - gw / 2 + 3)} y={f(gTop + 3)} width={f(gw - 6)} height={f(limit - gTop - 3)} rx={f(gw / 2 - 3)} fill={`url(#${id}-cm4)`} opacity={0.75} />
      <line x1={f(gx - gw / 2 - R * 0.06)} y1={f(limit)} x2={f(gx + gw / 2 + R * 0.06)} y2={f(limit)} stroke="#ef4444" strokeWidth={2.5} />
      <path d={grad} stroke="#9ca3af" strokeOpacity={0.6} strokeWidth={1} />
      {!compact ? <Rungs items={rungs} color={p.primary} hot={p.secondary} size={R * 0.065} anchor="start" /> : null}
      {!compact ? <Small x={gx + gw / 2 + R * 0.12} y={limit - R * 0.12} text="LIMIT" color="#ef4444" size={R * 0.06} anchor="start" weight={800} tracking="0.2em" /> : null}
      {!compact ? <Shape shape="warning" color={p.secondary} x={cx - R * 1.02} y={cy + R * 0.1} size={R * 0.46} /> : null}
      {!compact ? <path d={readouts} fill={p.primary} fillOpacity={0.35} /> : null}
      {!compact ? <Verb x={cx - R * 0.72} y={cy + R * 0.72} text="SHUT DOWN" color="#ef4444" ink="#fff" size={R * 0.078} /> : null}
    </g>
  );
}

/* 29 — STORM CHASE: truck racing down a highway into a tornado, debris and lightning */
function StormChase(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const ground = cy + R * 0.72;
  const fx = cx + R * 0.42;
  const funnel = `M${f(fx - R * 0.95)} ${f(cy - R * 1.1)} C${f(fx - R * 0.6)} ${f(cy - R * 0.4)} ${f(fx - R * 0.35)} ${f(cy + R * 0.2)} ${f(fx - R * 0.12)} ${f(ground)} L${f(fx + R * 0.12)} ${f(ground)} C${f(fx + R * 0.3)} ${f(cy + R * 0.2)} ${f(fx + R * 0.55)} ${f(cy - R * 0.4)} ${f(fx + R * 0.95)} ${f(cy - R * 1.1)} Z`;
  let ribs = "";
  for (let i = 1; i < 6; i++) {
    const t = i / 6;
    const y = cy - R * 1.1 + (ground - (cy - R * 1.1)) * t;
    const hw = R * (0.95 - 0.83 * t);
    ribs += `M${f(fx - hw)} ${f(y)} q${f(hw)} ${f(R * 0.1)} ${f(hw * 2)} 0 `;
  }
  let debris = "";
  for (let i = 0; i < 22; i++) {
    const a = s.rnd() * PI * 2;
    const d = R * (0.35 + s.rnd() * 0.85);
    const x = fx + Math.cos(a) * d;
    const y = cy - R * 0.2 + Math.sin(a) * d * 0.7;
    const k = R * (0.02 + s.rnd() * 0.04);
    debris += `M${f(x)} ${f(y)}l${f(k * 1.5)} ${f(k * 0.6)}l${f(-k * 0.6)} ${f(k * 1.2)}l${f(-k * 1.5)} ${f(-k * 0.6)}z `;
  }
  const bolt = `M${f(cx - R * 0.72)} ${f(cy - R * 1.15)} l${f(R * 0.12)} ${f(R * 0.4)} l${f(-R * 0.14)} ${f(R * 0.04)} l${f(R * 0.2)} ${f(R * 0.5)} l${f(-R * 0.12)} ${f(0)} l${f(R * 0.14)} ${f(R * 0.45)}`;
  const roadL = `M${f(cx - R * 1.6)} ${f(H)} L${f(fx - R * 0.1)} ${f(ground)} L${f(fx + R * 0.1)} ${f(ground)} L${f(cx + R * 0.7)} ${f(H)} Z`;
  let dashes = "";
  for (let i = 0; i < 7; i++) {
    const t0 = Math.pow(i / 7, 1.4);
    const t1 = Math.pow((i + 0.45) / 7, 1.4);
    const px0 = cx - R * 0.45 + (fx - (cx - R * 0.45)) * t0;
    const py0 = H + (ground - H) * t0;
    const px1 = cx - R * 0.45 + (fx - (cx - R * 0.45)) * t1;
    const py1 = H + (ground - H) * t1;
    dashes += `M${f(px0)} ${f(py0)}L${f(px1)} ${f(py1)} `;
  }
  const tx = cx - R * 0.42;
  const ty = cy + R * 1.05;
  const rx = cx + R * 1.14;
  const rungs: Array<[number, number, string]> = [[rx, cy + R * 1.06, "1.5× OUTFLOW"], [rx, cy + R * 0.88, "3× DEBRIS FIELD"], [rx, cy + R * 0.7, "8× WALL CLOUD"], [rx, cy + R * 0.5, "30× VORTEX"]];
  return (
    <g>
      <defs>
        <Linear id={`${id}-sc1`} stops={[[0, "#0b0f16"], [0.5, "#1f2937"], [1, "#0f172a"]]} />
        <Linear id={`${id}-sc2`} stops={[[0, "#475569"], [1, "#0f172a"]]} />
        <Radial id={`${id}-sc3`} color={p.secondary} o0={0.45} />
      </defs>
      <rect width={W} height={H} fill={`url(#${id}-sc1)`} />
      <ellipse cx={f(cx - R * 0.2)} cy={f(cy - R * 1.2)} rx={f(R * 1.5)} ry={f(R * 0.45)} fill="#111827" />
      <ellipse cx={f(fx + R * 0.3)} cy={f(cy - R * 1.05)} rx={f(R * 1.2)} ry={f(R * 0.4)} fill="#1f2937" />
      <circle cx={f(cx - R * 0.6)} cy={f(cy - R * 0.4)} r={f(R * 0.7)} fill={`url(#${id}-sc3)`} />
      <path d={bolt} fill="none" stroke={p.secondary} strokeOpacity={0.35} strokeWidth={7} strokeLinecap="round" strokeLinejoin="round" />
      <path d={bolt} fill="none" stroke="#f7fee7" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
      <rect x={0} y={f(ground)} width={W} height={f(H - ground)} fill="#0b1210" />
      <path d={funnel} fill={`url(#${id}-sc2)`} stroke={p.glow} strokeOpacity={0.55} strokeWidth={1.5} />
      <path d={ribs} fill="none" stroke={p.glow} strokeOpacity={0.35} strokeWidth={1.2} />
      <path d={debris} fill="#64748b" stroke="#cbd5e1" strokeOpacity={0.6} strokeWidth={0.8} />
      <path d={roadL} fill="#1e293b" stroke="#475569" strokeWidth={1} />
      <path d={dashes} stroke="#fde68a" strokeWidth={f(R * 0.03)} strokeLinecap="round" />
      {!compact ? <Rungs items={rungs} color={p.glow} hot={p.secondary} size={R * 0.058} anchor="end" /> : null}
      <polygon points={`${f(tx - R * 0.2)},${f(ty - R * 0.2)} ${f(tx + R * 0.2)},${f(ty - R * 0.2)} ${f(fx + R * 0.05)},${f(ground + R * 0.05)} ${f(fx - R * 0.35)},${f(ground + R * 0.05)}`} fill="#fef3c7" fillOpacity={0.12} />
      <g>
        <rect x={f(tx - R * 0.42)} y={f(ty - R * 0.28)} width={f(R * 0.84)} height={f(R * 0.4)} rx={f(R * 0.05)} fill="#1c1f26" stroke="#94a3b8" strokeWidth={1.5} />
        <rect x={f(tx - R * 0.3)} y={f(ty - R * 0.55)} width={f(R * 0.6)} height={f(R * 0.3)} rx={f(R * 0.05)} fill="#1c1f26" stroke="#94a3b8" strokeWidth={1.5} />
        <rect x={f(tx - R * 0.24)} y={f(ty - R * 0.5)} width={f(R * 0.48)} height={f(R * 0.18)} rx={f(R * 0.03)} fill="#334155" />
        <path d={dots([[tx - R * 0.34, ty - R * 0.02, R * 0.04], [tx + R * 0.34, ty - R * 0.02, R * 0.04]])} fill="#ef4444" />
        <rect x={f(tx - R * 0.44)} y={f(ty + R * 0.08)} width={f(R * 0.18)} height={f(R * 0.12)} rx={f(R * 0.03)} fill="#000" />
        <rect x={f(tx + R * 0.26)} y={f(ty + R * 0.08)} width={f(R * 0.18)} height={f(R * 0.12)} rx={f(R * 0.03)} fill="#000" />
        <path d={`M${f(tx - R * 0.3)} ${f(ty - R * 0.55)}v${f(-R * 0.22)}h${f(R * 0.06)}`} stroke="#94a3b8" strokeWidth={1.5} fill="none" />
        <circle cx={f(tx - R * 0.24)} cy={f(ty - R * 0.78)} r={f(R * 0.03)} fill={p.secondary} />
      </g>
      {!compact ? <Verb x={cx - R * 0.7} y={cy - R * 0.02} text="ESCAPE" color={p.secondary} size={R * 0.078} /> : null}
    </g>
  );
}

/* 30 — ELEVATOR 999: a lit cabin in an endless shaft, tall condensed floor numbers, express floors */
function Elevator999(s: Stage) {
  const { H, cx, cy, R, id, p, compact } = s;
  const railL = cx - R * 0.66;
  const railR = cx + R * 0.66;
  let beams = "";
  for (let y = -R * 0.1; y < H + R; y += R * 0.32) beams += `M${f(railL)} ${f(y)}H${f(railR)} `;
  const cabW = R * 0.98;
  const cabH = R * 1.22;
  const cabY = cy + R * 0.02;
  const floors = [
    { n: "25", m: "×3.4", y: cy + R * 1.0 },
    { n: "50", m: "×11", y: cy + R * 0.52 },
    { n: "100", m: "×131", y: cy - R * 0.32 },
    { n: "250", m: "×198k", y: cy - R * 0.76 },
  ];
  let chevrons = "";
  for (let i = 0; i < 3; i++) chevrons += `M${f(railR + R * 0.2)} ${f(cy - R * 0.05 - i * R * 0.16)}l${f(R * 0.08)} ${f(-R * 0.09)}l${f(R * 0.08)} ${f(R * 0.09)} `;
  return (
    <g>
      <defs>
        <Linear id={`${id}-el1`} stops={[[0, "#000", 1], [0.28, p.bg, 0.1], [1, p.bg, 0]]} />
        <Linear id={`${id}-el2`} stops={[[0, p.glow, 0.9], [1, p.primary, 0.2]]} />
        <Radial id={`${id}-el3`} color={p.glow} o0={0.5} />
      </defs>
      <rect x={f(railL)} y={0} width={f(railR - railL)} height={H} fill="#0c0d13" />
      <path d={beams} stroke="#2a2d3a" strokeWidth={1.5} />
      <line x1={f(railL)} y1={0} x2={f(railL)} y2={H} stroke={p.primary} strokeOpacity={0.7} strokeWidth={3} />
      <line x1={f(railR)} y1={0} x2={f(railR)} y2={H} stroke={p.primary} strokeOpacity={0.7} strokeWidth={3} />
      <rect x={f(railL)} y={0} width={f(railR - railL)} height={f(cy)} fill={`url(#${id}-el1)`} />
      <path d={`M${f(cx - R * 0.2)} 0V${f(cabY - cabH / 2)} M${f(cx + R * 0.2)} 0V${f(cabY - cabH / 2)}`} stroke="#9aa0b4" strokeWidth={1.5} />
      <ellipse cx={f(cx)} cy={f(cabY)} rx={f(R * 0.9)} ry={f(R * 0.95)} fill={`url(#${id}-el3)`} />
      <rect x={f(cx - cabW / 2)} y={f(cabY - cabH / 2)} width={f(cabW)} height={f(cabH)} rx={f(R * 0.05)} fill="#151821" stroke={p.primary} strokeWidth={2.5} />
      <rect x={f(cx - cabW / 2 + R * 0.08)} y={f(cabY - cabH / 2 + R * 0.2)} width={f(cabW - R * 0.16)} height={f(cabH - R * 0.28)} fill={`url(#${id}-el2)`} />
      <rect x={f(cx - cabW / 2 + R * 0.08)} y={f(cabY - cabH / 2 + R * 0.2)} width={f(cabW / 2 - R * 0.11)} height={f(cabH - R * 0.28)} fill="#1b1f2c" stroke={p.primary} strokeOpacity={0.6} strokeWidth={1} />
      <rect x={f(cx + R * 0.03)} y={f(cabY - cabH / 2 + R * 0.2)} width={f(cabW / 2 - R * 0.11)} height={f(cabH - R * 0.28)} fill="#1b1f2c" stroke={p.primary} strokeOpacity={0.6} strokeWidth={1} />
      <rect x={f(cx - cabW / 2 + R * 0.2)} y={f(cabY - cabH / 2 + R * 0.05)} width={f(cabW - R * 0.4)} height={f(R * 0.12)} rx={2} fill="#05060a" stroke={p.secondary} strokeOpacity={0.8} strokeWidth={1} />
      <Small x={cx} y={cabY - cabH / 2 + R * 0.11} text="▲  137" color={p.secondary} size={R * 0.075} weight={800} tracking="0.2em" />
      {!compact ? (
        <>
          {floors.map((fl) => (
            <g key={fl.n}>
              <line x1={f(railL - R * 0.5)} y1={f(fl.y + R * 0.1)} x2={f(railL - R * 0.04)} y2={f(fl.y + R * 0.1)} stroke={p.primary} strokeOpacity={0.5} strokeWidth={1} />
              <text x={f(railL - R * 0.08)} y={f(fl.y)} textAnchor="end" dominantBaseline="central" fontSize={f(R * 0.3)} fontWeight={800} fill={p.primary} fillOpacity={fl.n === "250" ? 1 : 0.75} transform={`translate(${f(railL - R * 0.08)} 0) scale(0.66 1) translate(${f(-(railL - R * 0.08))} 0)`} style={{ fontFamily: FONT, letterSpacing: "-0.04em" }}>
                {fl.n}
              </text>
              <Small x={railR + R * 0.1} y={fl.y} text={fl.m} color={fl.n === "250" ? p.secondary : p.glow} size={R * (fl.n === "250" ? 0.085 : 0.065)} anchor="start" weight={700} tracking="0.04em" opacity={fl.n === "250" ? 1 : 0.7} />
            </g>
          ))}
          <path d={chevrons} fill="none" stroke={p.secondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
          <Verb x={cx} y={cabY + cabH / 2 + R * 0.28} text="STEP OUT" color={p.secondary} size={R * 0.078} />
        </>
      ) : null}
    </g>
  );
}

/* ---------------------------------------------------- Beyond Slots originals */

/* 31 — DROPZONE: capsule ricocheting through a peg tower, energy gates, value buckets, Deep Drop below */
function Dropzone(s: Stage) {
  const { cx, cy, R, id, p, compact } = s;
  const rows = compact ? 6 : 9;
  const gap = R * 0.2;
  const top = cy - R * 1.02;
  const pegs: Array<[number, number, number]> = [];
  for (let r = 0; r < rows; r++) for (let k = 0; k <= r + 2; k++) pegs.push([cx + (k - (r + 2) / 2) * gap, top + r * gap, R * 0.022]);
  let lane = 0;
  let path = `M${f(cx)} ${f(top - gap * 0.8)}`;
  const lit: Array<[number, number, number]> = [];
  for (let r = 0; r < rows; r++) {
    lane += s.rnd() > 0.5 ? 0.5 : -0.5;
    const x = cx + lane * gap;
    path += ` L${f(x)} ${f(top + r * gap + gap * 0.5)}`;
    lit.push([x + (s.rnd() > 0.5 ? gap / 2 : -gap / 2), top + r * gap, R * 0.03]);
  }
  const capR = Math.min(rows - 1, 5);
  const capX = cx + lane * gap * (capR / rows);
  const capY = top + capR * gap + gap * 0.5;
  const bucketY = top + rows * gap + gap * 0.3;
  const values = ["25", "6", "2.5", "1.4", ".4", "1.4", "2.5", "6", "25"];
  const bw = gap * 1.15;
  const bx0 = cx - (values.length * bw) / 2;
  const deepY = bucketY + gap * 1.35;
  const deepPegs = scatterDots(s, 12, [cx - R * 0.9, deepY + gap * 0.3, R * 1.8, gap * 1.4], R * 0.02, R * 0.02);
  return (
    <g>
      <defs>
        <Radial id={`${id}-dz1`} color={p.primary} o0={0.35} />
        <Radial id={`${id}-dz2`} color={p.glow} o0={1} mid={[0.4, p.primary, 0.7]} />
        <Linear id={`${id}-dz3`} stops={[[0, p.secondary, 0.9], [0.5, p.primary, 0.25], [1, p.secondary, 0.9]]} dir="h" />
      </defs>
      <polygon points={`${f(cx - gap * 1.4)},${f(top - gap)} ${f(cx + gap * 1.4)},${f(top - gap)} ${f(cx + ((rows + 2) / 2) * gap + gap * 0.6)},${f(bucketY)} ${f(cx - ((rows + 2) / 2) * gap - gap * 0.6)},${f(bucketY)}`} fill={`url(#${id}-dz1)`} stroke={p.primary} strokeOpacity={0.35} strokeWidth={1} />
      <path d={dots(pegs)} fill="#cbd5e1" fillOpacity={0.85} />
      <path d={path} fill="none" stroke={p.primary} strokeOpacity={0.8} strokeWidth={1.5} strokeDasharray="3 4" />
      <path d={dots(lit)} fill={p.glow} />
      {!compact ? (
        <>
          <rect x={f(cx - gap * 1.3)} y={f(top + gap * 2.5 - 2)} width={f(gap * 1.1)} height={4} rx={2} fill={p.secondary} />
          <Pill x={cx - gap * 1.85} y={top + gap * 2.5} text="×2" color={p.secondary} ink={p.secondary} size={R * 0.055} />
          <rect x={f(cx + gap * 0.9)} y={f(top + gap * 6.5 - 2)} width={f(gap * 1.1)} height={4} rx={2} fill={p.secondary} />
          <Pill x={cx + gap * 2.6} y={top + gap * 6.5} text="×3" color={p.secondary} ink={p.secondary} size={R * 0.055} />
        </>
      ) : null}
      <circle cx={f(capX)} cy={f(capY)} r={f(gap * 0.5)} fill={`url(#${id}-dz2)`} opacity={0.8} />
      <rect x={f(capX - gap * 0.16)} y={f(capY - gap * 0.3)} width={f(gap * 0.32)} height={f(gap * 0.6)} rx={f(gap * 0.16)} fill="#e0fbff" stroke={p.primary} strokeWidth={1.5} />
      <rect x={f(bx0)} y={f(bucketY)} width={f(values.length * bw)} height={f(gap * 0.9)} fill={`url(#${id}-dz3)`} opacity={0.35} />
      {values.map((v, i) => {
        const edge = Math.abs(i - 4) / 4;
        return (
          <g key={i}>
            <rect x={f(bx0 + i * bw + 1.5)} y={f(bucketY)} width={f(bw - 3)} height={f(gap * 0.9)} rx={3} fill="#050a14" fillOpacity={0.8} stroke={edge > 0.6 ? p.secondary : p.primary} strokeOpacity={0.4 + edge * 0.6} strokeWidth={1} />
            {!compact ? <Small x={bx0 + i * bw + bw / 2} y={bucketY + gap * 0.45} text={v} color={edge > 0.6 ? p.secondary : "#e0fbff"} size={R * (edge > 0.6 ? 0.07 : 0.058)} weight={800} tracking="0" /> : null}
          </g>
        );
      })}
      {!compact ? (
        <>
          <rect x={f(cx - R * 1.0)} y={f(deepY)} width={f(R * 2.0)} height={f(gap * 2.2)} rx={4} fill={p.secondary} fillOpacity={0.06} stroke={p.secondary} strokeOpacity={0.6} strokeWidth={1} strokeDasharray="6 5" />
          <path d={deepPegs} fill={p.secondary} fillOpacity={0.55} />
          <Pill x={cx} y={deepY} text="DEEP DROP  ×0 → ×10" color={p.secondary} ink={p.secondary} bg={p.bg} size={R * 0.058} />
          <Verb x={cx + R * 0.92} y={cy - R * 0.5} text="DROP" color={p.primary} size={R * 0.078} />
        </>
      ) : null}
    </g>
  );
}

/* 32 — GRID//BREAK: 8×8 neon block grid, a wave down one column, detonating cluster, ×2 ×4 ×8 chain */
function GridBreak(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const n = 8;
  const c = R * 0.225;
  const gx = cx - (n * c) / 2 - R * 0.2;
  const gy = cy - (n * c) / 2 - R * 0.05;
  const col = 5;
  const tints = [p.primary, p.secondary, "#a78bfa", "#f472b6", "#facc15", "#22d3ee"];
  const paths = tints.map(() => "");
  const blown = new Set(["5,3", "5,4", "4,4", "5,5", "6,4", "6,5"]);
  for (let r = 0; r < n; r++) {
    for (let k = 0; k < n; k++) {
      if (blown.has(`${k},${r}`)) continue;
      const t = Math.floor(s.rnd() * tints.length);
      paths[t] += `M${f(gx + k * c + 2)} ${f(gy + r * c + 2)}h${f(c - 4)}v${f(c - 4)}h${f(-(c - 4))}z `;
    }
  }
  const ex = gx + col * c + c / 2;
  const ey = gy + 4 * c + c / 2;
  let shards = "";
  for (let i = 0; i < 12; i++) {
    const a = s.rnd() * PI * 2;
    const d = c * (0.9 + s.rnd() * 1.6);
    const k = c * (0.12 + s.rnd() * 0.16);
    shards += `M${f(ex + Math.cos(a) * d)} ${f(ey + Math.sin(a) * d)}h${f(k)}v${f(k)}h${f(-k)}z `;
  }
  let scan = "";
  for (let y = 0; y < H; y += 5) scan += `M0 ${f(y)}H${f(W)} `;
  return (
    <g>
      <defs>
        <Linear id={`${id}-gb1`} stops={[[0, p.secondary, 0], [0.5, p.secondary, 0.55], [1, p.secondary, 0.15]]} />
        <Radial id={`${id}-gb2`} color={p.glow} o0={0.9} />
      </defs>
      <path d={scan} stroke="#fff" strokeOpacity={0.035} strokeWidth={1.5} />
      <rect x={f(gx - R * 0.08)} y={f(gy - R * 0.08)} width={f(n * c + R * 0.16)} height={f(n * c + R * 0.16)} rx={f(R * 0.06)} fill="#070b10" stroke={p.primary} strokeOpacity={0.5} strokeWidth={2} />
      {paths.map((d, i) => (d ? <path key={i} d={d} fill={tints[i]} fillOpacity={0.82} /> : null))}
      <rect x={f(gx + col * c)} y={f(gy - R * 0.3)} width={f(c)} height={f(n * c + R * 0.3)} fill={`url(#${id}-gb1)`} />
      <line x1={f(ex)} y1={f(gy - R * 0.3)} x2={f(ex)} y2={f(gy + n * c)} stroke="#fff" strokeOpacity={0.85} strokeWidth={1.5} />
      <polygon points={`${f(ex - c * 0.45)},${f(gy + n * c + R * 0.22)} ${f(ex + c * 0.45)},${f(gy + n * c + R * 0.22)} ${f(ex)},${f(gy + n * c + R * 0.06)}`} fill={p.secondary} />
      <circle cx={f(ex)} cy={f(ey)} r={f(c * 1.5)} fill={`url(#${id}-gb2)`} />
      <polygon points={svgStar(ex, ey, c * 1.7, c * 0.7, 8)} fill={p.glow} fillOpacity={0.9} />
      <polygon points={svgStar(ex, ey, c * 0.9, c * 0.35, 8)} fill="#fff" />
      <path d={shards} fill={p.primary} />
      {!compact ? (
        <>
          <Pill x={gx + n * c + R * 0.28} y={gy + c * 5.5} text="×2" color={p.primary} ink={p.primary} size={R * 0.07} />
          <Pill x={gx + n * c + R * 0.29} y={gy + c * 3.9} text="×4" color={p.primary} ink={p.glow} size={R * 0.085} />
          <Pill x={gx + n * c + R * 0.3} y={gy + c * 2.0} text="×8" color={p.secondary} ink="#fff" bg="#0c2233" size={R * 0.1} />
          <Small x={gx + n * c + R * 0.3} y={gy + c * 1.0} text="CHAIN" color={p.secondary} size={R * 0.06} tracking="0.24em" />
          <Verb x={ex} y={gy + n * c + R * 0.45} text="FIRE WAVE" color={p.secondary} size={R * 0.072} />
        </>
      ) : null}
    </g>
  );
}

/* 33 — THE VAULT: colossal door, five concentric locked layers, digits being revealed at the core */
function TheVault(s: Stage) {
  const { cx, cy, R, id, p, compact } = s;
  const vx = cx;
  const vy = cy + R * 0.08;
  let bolts = "";
  const bl: Array<[number, number, number]> = [];
  for (let i = 0; i < 18; i++) {
    const a = (i / 18) * PI * 2;
    bl.push([vx + Math.cos(a) * R * 1.3, vy + Math.sin(a) * R * 1.3, R * 0.028]);
  }
  bolts = dots(bl);
  let ticks = "";
  for (let i = 0; i < 60; i++) {
    const a = (i / 60) * PI * 2;
    const len = i % 5 === 0 ? R * 0.1 : R * 0.05;
    ticks += `M${f(vx + Math.cos(a) * R * 1.05)} ${f(vy + Math.sin(a) * R * 1.05)}L${f(vx + Math.cos(a) * (R * 1.05 - len))} ${f(vy + Math.sin(a) * (R * 1.05 - len))} `;
  }
  const gaugeA0 = PI * 0.75;
  const gaugeA1 = PI * 2.05;
  const layers = ["1.20×", "1.71×", "3.12×", "7.79×", "31.2×"];
  const lx = cx - R * 1.12;
  const rungs: Array<[number, number, string]> = layers.map((l, i) => [lx, cy + R * 0.9 - i * R * 0.36, l]);
  const digits = ["4", "7", "?"];
  return (
    <g>
      <defs>
        <Radial id={`${id}-tv1`} color={p.glow} o0={0.95} mid={[0.5, p.primary, 0.45]} />
        <Linear id={`${id}-tv2`} stops={[[0, "#2a2530"], [0.5, "#0f0d13"], [1, "#26212c"]]} dir="d" />
      </defs>
      <circle cx={f(vx)} cy={f(vy)} r={f(R * 1.42)} fill={`url(#${id}-tv2)`} stroke={p.primary} strokeOpacity={0.9} strokeWidth={f(R * 0.03)} />
      <circle cx={f(vx)} cy={f(vy)} r={f(R * 1.18)} fill="#100e14" stroke={p.primary} strokeOpacity={0.5} strokeWidth={1.5} />
      <path d={bolts} fill={p.primary} stroke="#5a4a20" strokeWidth={1} />
      <path d={ticks} stroke={p.glow} strokeOpacity={0.6} strokeWidth={1.2} />
      <circle cx={f(vx)} cy={f(vy)} r={f(R * 0.92)} fill="#0b0a0e" stroke={p.primary} strokeOpacity={0.7} strokeWidth={2} />
      <circle cx={f(vx)} cy={f(vy)} r={f(R * 0.82)} fill="none" stroke={p.secondary} strokeOpacity={0.9} strokeWidth={f(R * 0.05)} strokeDasharray={`${f(R * 0.09)} ${f(R * 0.06)}`} />
      <circle cx={f(vx)} cy={f(vy)} r={f(R * 0.82)} fill="none" stroke={p.secondary} strokeOpacity={0.35} strokeWidth={f(R * 0.12)} strokeDasharray={`${f(R * 0.4)} ${f(R * 0.9)}`} />
      <circle cx={f(vx)} cy={f(vy)} r={f(R * 0.7)} fill="#141117" stroke={p.primary} strokeOpacity={0.6} strokeWidth={1.5} />
      <path d={svgArc(vx, vy, R * 0.6, gaugeA0, gaugeA1)} fill="none" stroke="#2b2630" strokeWidth={f(R * 0.09)} strokeLinecap="round" />
      <path d={svgArc(vx, vy, R * 0.6, gaugeA0, gaugeA0 + (gaugeA1 - gaugeA0) * 0.7)} fill="none" stroke={p.primary} strokeWidth={f(R * 0.09)} strokeLinecap="round" />
      <circle cx={f(vx)} cy={f(vy)} r={f(R * 0.48)} fill={`url(#${id}-tv1)`} />
      <circle cx={f(vx)} cy={f(vy)} r={f(R * 0.48)} fill="none" stroke={p.glow} strokeWidth={2} />
      {digits.map((d, i) => (
        <g key={i}>
          <rect x={f(vx - R * 0.36 + i * R * 0.25)} y={f(vy - R * 0.16)} width={f(R * 0.22)} height={f(R * 0.32)} rx={f(R * 0.03)} fill="#0b0a0e" stroke={d === "?" ? p.secondary : p.primary} strokeWidth={1.5} />
          <Small x={vx - R * 0.25 + i * R * 0.25} y={vy} text={d} color={d === "?" ? p.secondary : p.glow} size={R * 0.2} weight={800} tracking="0" />
        </g>
      ))}
      <circle cx={f(vx)} cy={f(vy - R * 1.3)} r={f(R * 0.05)} fill="#ef4444" />
      <circle cx={f(vx)} cy={f(vy - R * 1.3)} r={f(R * 0.11)} fill="#ef4444" fillOpacity={0.3} />
      {!compact ? (
        <>
          <path d={`M${f(lx - R * 0.02)} ${f(cy + R * 1.0)}V${f(cy - R * 0.62)}`} stroke={p.primary} strokeOpacity={0.35} strokeWidth={1} />
          <Rungs items={rungs} color={p.primary} hot={p.glow} size={R * 0.065} anchor="start" />
          <Small x={cx + R * 1.02} y={cy - R * 0.68} text="LAYER 3 / 5" color={p.secondary} size={R * 0.062} tracking="0.22em" anchor="end" />
          <Small x={cx + R * 1.02} y={cy - R * 0.54} text="BIOMETRIC RING" color={p.glow} size={R * 0.055} tracking="0.16em" anchor="end" opacity={0.75} />
          <Verb x={cx - R * 0.42} y={cy + R * 1.14} text="SECURE" color={p.primary} size={R * 0.072} />
          <Verb x={cx + R * 0.45} y={cy + R * 1.14} text="OPEN" color={p.secondary} size={R * 0.072} />
        </>
      ) : null}
    </g>
  );
}

/* 34 — ORBIT: burning core, concentric orbits with planets/satellites/comets, an impulse beam, Supernova */
function Orbit(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const stars = scatterDots(s, 60, [0, 0, W, H], 0.5, 1.3);
  const ox = cx;
  const oy = cy + R * 0.05;
  const orbits = [0.42, 0.68, 0.94, 1.2];
  const debris: Array<[number, number, number]> = [];
  for (let i = 0; i < 16; i++) {
    const r = R * orbits[Math.floor(s.rnd() * orbits.length)];
    const a = s.rnd() * PI * 2;
    debris.push([ox + Math.cos(a) * r, oy + Math.sin(a) * r, R * 0.018]);
  }
  const at = (k: number, a: number): [number, number] => [ox + Math.cos(a) * R * orbits[k], oy + Math.sin(a) * R * orbits[k]];
  const [sx, sy] = at(0, -2.2);
  const [px, py] = at(1, 0.6);
  const [cmx, cmy] = at(2, -0.9);
  const [ggx, ggy] = at(3, 2.62);
  const [qx, qy] = at(3, -0.62);
  const beamA = -1.05;
  const beamLen = R * 1.45;
  const bx1 = ox + Math.cos(beamA - 0.09) * beamLen;
  const by1 = oy + Math.sin(beamA - 0.09) * beamLen;
  const bx2 = ox + Math.cos(beamA + 0.09) * beamLen;
  const by2 = oy + Math.sin(beamA + 0.09) * beamLen;
  return (
    <g>
      <defs>
        <Radial id={`${id}-ob1`} color={p.secondary} o0={0.8} mid={[0.25, p.secondary, 0.3]} />
        <Radial id={`${id}-ob2`} color="#fff" o0={1} mid={[0.45, p.secondary, 1]} o1={0.9} />
        <Linear id={`${id}-ob3`} stops={[[0, p.secondary, 0.7], [1, p.secondary, 0]]} />
      </defs>
      <path d={stars} fill="#fff" fillOpacity={0.7} />
      <circle cx={f(ox)} cy={f(oy)} r={f(R * 0.75)} fill={`url(#${id}-ob1)`} />
      {orbits.map((k, i) => (
        <circle key={i} cx={f(ox)} cy={f(oy)} r={f(R * k)} fill="none" stroke={p.primary} strokeOpacity={i === 3 ? 0.45 : 0.6} strokeWidth={1.2} strokeDasharray={i === 3 ? "4 7" : undefined} />
      ))}
      <polygon points={`${f(ox)},${f(oy)} ${f(bx1)},${f(by1)} ${f(bx2)},${f(by2)}`} fill={`url(#${id}-ob3)`} opacity={0.65} />
      <line x1={f(ox)} y1={f(oy)} x2={f(ox + Math.cos(beamA) * beamLen)} y2={f(oy + Math.sin(beamA) * beamLen)} stroke="#fff" strokeOpacity={0.9} strokeWidth={1.5} />
      <circle cx={f(ox + Math.cos(beamA) * R * 0.94)} cy={f(oy + Math.sin(beamA) * R * 0.94)} r={f(R * 0.06)} fill="#fff" />
      <polygon points={svgStar(ox, oy, R * 0.36, R * 0.18, 12)} fill={p.secondary} fillOpacity={0.6} />
      <circle cx={f(ox)} cy={f(oy)} r={f(R * 0.2)} fill={`url(#${id}-ob2)`} />
      <path d={dots(debris)} fill="#e2e8f0" fillOpacity={0.85} />
      <Shape shape="satellite" color="#cbd5e1" accent={p.secondary} x={sx} y={sy} size={R * 0.34} rotate={-20} />
      <Shape shape="planet" color="#60a5fa" accent={p.primary} x={px} y={py} size={R * 0.5} rotate={-15} />
      <Shape shape="comet" color="#fef3c7" accent={p.secondary} x={cmx} y={cmy} size={R * 0.46} />
      <Shape shape="planet" color="#fb923c" accent="#fde68a" x={ggx} y={ggy} size={R * 0.72} rotate={12} />
      {!compact ? (
        <>
          <polygon points={svgStar(qx, qy, R * 0.16, R * 0.05, 4)} fill={p.primary} />
          <Small x={sx} y={sy + R * 0.22} text="0.8×" color={p.glow} size={R * 0.055} weight={700} tracking="0.02em" />
          <Small x={px} y={py + R * 0.3} text="2×" color={p.glow} size={R * 0.06} weight={700} tracking="0.02em" />
          <Small x={cmx + R * 0.02} y={cmy - R * 0.26} text="4×" color={p.glow} size={R * 0.06} weight={700} tracking="0.02em" />
          <Small x={ggx} y={ggy + R * 0.4} text="8×" color={p.glow} size={R * 0.065} weight={800} tracking="0.02em" />
          <Small x={qx} y={qy - R * 0.22} text="QUASAR 25×" color={p.primary} size={R * 0.055} weight={800} tracking="0.1em" />
          <Pill x={cx - R * 0.82} y={cy - R * 0.62} text="SUPERNOVA" color={p.secondary} ink={p.secondary} size={R * 0.062} />
          <Verb x={cx + R * 0.7} y={cy + R * 1.08} text="FIRE IMPULSE" color={p.secondary} size={R * 0.072} />
        </>
      ) : null}
    </g>
  );
}

/* 35 — ESCAPE 99: tower cross-section with rooms and a stairwell, checkpoint rail 10 · 25 · 50 · 75 · 99 */
function Escape99(s: Stage) {
  const { H, cx, cy, R, id, p, compact } = s;
  const tw = R * 1.16;
  const tx = cx - R * 0.3;
  const top = cy - R * 1.12;
  const fh = R * 0.29;
  const nFloors = Math.floor((H - top) / fh) + 1;
  let floors = "";
  for (let i = 1; i < nFloors; i++) floors += `M${f(tx - tw / 2)} ${f(top + i * fh)}h${f(tw)} `;
  let stairs = "";
  for (let i = 0; i < nFloors; i++) {
    const y = top + i * fh;
    stairs += `M${f(tx - R * 0.1)} ${f(y + fh)} l${f(R * 0.05)} ${f(-fh * 0.25)} h${f(R * 0.05)} l${f(R * 0.05)} ${f(-fh * 0.25)} h${f(R * 0.05)} l${f(R * 0.05)} ${f(-fh * 0.25)} `;
  }
  const roomX = (side: -1 | 1) => tx + side * (R * 0.1 + (tw / 2 - R * 0.1) / 2);
  const fy = (i: number) => top + i * fh + fh / 2;
  let crenel = "";
  for (let i = 0; i < 6; i++) crenel += `M${f(tx - tw / 2 + i * (tw / 6) + 2)} ${f(top)}v${f(-R * 0.08)}h${f(tw / 12)}v${f(R * 0.08)}z `;
  let spikes = "";
  for (let i = 0; i < 5; i++) spikes += `M${f(roomX(-1) - R * 0.14 + i * R * 0.07)} ${f(fy(4) + fh * 0.4)}l${f(R * 0.035)} ${f(-fh * 0.55)}l${f(R * 0.035)} ${f(fh * 0.55)}z `;
  const hx = tx;
  const hy = fy(3) + fh * 0.05;
  const rx = cx + R * 0.9;
  const cps = [
    { n: "10", m: "×1.4", t: 0 },
    { n: "25", m: "×2.9", t: 0.25 },
    { n: "50", m: "×18", t: 0.5 },
    { n: "75", m: "×190", t: 0.75 },
    { n: "99", m: "×3k", t: 1 },
  ];
  const railTop = cy - R * 0.72;
  const railBot = cy + R * 1.05;
  const leaves = scatterDots(s, 16, [cx - R * 1.25, cy + R * 0.4, R * 0.7, R * 0.9], 1.2, 2.6);
  return (
    <g>
      <defs>
        <Radial id={`${id}-es1`} color={p.primary} o0={0.4} />
        <Radial id={`${id}-es2`} color={p.secondary} o0={0.9} />
        <Linear id={`${id}-es3`} stops={[[0, p.glow, 0.8], [1, p.primary, 0.1]]} />
      </defs>
      <ellipse cx={f(tx)} cy={f(top)} rx={f(R * 1.2)} ry={f(R * 0.7)} fill={`url(#${id}-es1)`} />
      <rect x={f(tx - tw / 2)} y={f(top)} width={f(tw)} height={f(H - top)} fill="#0a1411" stroke={p.primary} strokeOpacity={0.75} strokeWidth={2} />
      <path d={crenel} fill="#0a1411" stroke={p.primary} strokeOpacity={0.75} strokeWidth={1.5} />
      <path d={floors} stroke={p.primary} strokeOpacity={0.35} strokeWidth={1} />
      <rect x={f(tx - R * 0.1)} y={f(top)} width={f(R * 0.2)} height={f(H - top)} fill="#06090a" />
      <path d={stairs} fill="none" stroke={p.primary} strokeOpacity={0.6} strokeWidth={1.2} />
      <circle cx={f(tx)} cy={f(top + fh * 0.5)} r={f(R * 0.22)} fill={`url(#${id}-es2)`} />
      <Shape shape="ring" color="#a78bfa" accent="#f5f3ff" x={roomX(1)} y={fy(1)} size={fh * 0.9} />
      <Shape shape="chest" color="#b8741c" accent="#fde68a" x={roomX(-1)} y={fy(2) + fh * 0.05} size={fh * 0.9} />
      <Shape shape="skull" color="#f8fafc" accent="#94a3b8" x={roomX(1)} y={fy(3)} size={fh * 0.8} />
      <path d={spikes} fill={p.secondary} />
      <Shape shape="hex" color={p.primary} accent={p.glow} x={roomX(1)} y={fy(5)} size={fh * 0.85} label="×" />
      <path d={`M${f(roomX(-1))} ${f(fy(6) + fh * 0.35)}V${f(fy(6))} L${f(roomX(-1) - R * 0.14)} ${f(fy(6) - fh * 0.3)} M${f(roomX(-1))} ${f(fy(6))} L${f(roomX(-1) + R * 0.14)} ${f(fy(6) - fh * 0.3)}`} fill="none" stroke={p.secondary} strokeWidth={2.5} strokeLinecap="round" />
      <Shape shape="chest" color="#b8741c" accent="#fde68a" x={roomX(1)} y={fy(7) + fh * 0.05} size={fh * 0.9} />
      <g fill={p.glow} stroke="#06090a" strokeWidth={1}>
        <circle cx={f(hx)} cy={f(hy - fh * 0.22)} r={f(fh * 0.13)} />
        <rect x={f(hx - fh * 0.1)} y={f(hy - fh * 0.1)} width={f(fh * 0.2)} height={f(fh * 0.32)} rx={f(fh * 0.05)} />
        <path d={`M${f(hx - fh * 0.06)} ${f(hy + fh * 0.2)}l${f(-fh * 0.1)} ${f(fh * 0.22)} M${f(hx + fh * 0.06)} ${f(hy + fh * 0.2)}l${f(fh * 0.12)} ${f(fh * 0.2)}`} stroke={p.glow} strokeWidth={f(fh * 0.09)} strokeLinecap="round" fill="none" />
      </g>
      <path d={leaves} fill={p.primary} fillOpacity={0.45} />
      {!compact ? (
        <>
          <line x1={f(rx)} y1={f(railTop)} x2={f(rx)} y2={f(railBot)} stroke={`url(#${id}-es3)`} strokeWidth={3} strokeLinecap="round" />
          {cps.map((cp) => {
            const y = railBot - (railBot - railTop) * cp.t;
            const summit = cp.n === "99";
            return (
              <g key={cp.n}>
                <circle cx={f(rx)} cy={f(y)} r={f(R * (summit ? 0.05 : 0.03))} fill={summit ? p.secondary : p.glow} />
                <Small x={rx - R * 0.09} y={y} text={cp.n} color={summit ? p.secondary : "#fff"} size={R * (summit ? 0.11 : 0.075)} anchor="end" weight={800} tracking="0" />
                <Small x={rx + R * 0.09} y={y} text={cp.m} color={summit ? p.secondary : p.glow} size={R * (summit ? 0.07 : 0.055)} anchor="start" weight={700} tracking="0.04em" opacity={summit ? 1 : 0.75} />
              </g>
            );
          })}
          <Verb x={cx - R * 0.98} y={cy - R * 0.62} text="CLIMB" color={p.primary} size={R * 0.075} />
          <Verb x={cx - R * 0.9} y={cy - R * 0.3} text="CASH OUT" color={p.secondary} size={R * 0.068} />
        </>
      ) : null}
    </g>
  );
}

/* Fallback for unknown slugs: palette glow + the game's top symbols if known. */
function Generic(s: Stage) {
  const { W, H, cx, cy, R, id, p, compact } = s;
  const stars = scatterDots(s, 40, [0, 0, W, H], 0.5, 1.4);
  return (
    <g>
      <defs>
        <Radial id={`${id}-gn1`} color={p.primary} o0={0.5} />
      </defs>
      <path d={stars} fill="#fff" fillOpacity={0.6} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 1.3)} fill={`url(#${id}-gn1)`} />
      <circle cx={f(cx)} cy={f(cy)} r={f(R * 0.9)} fill="none" stroke={p.secondary} strokeOpacity={0.5} strokeWidth={2} />
      <Sym s={s} id="W" x={cx} y={cy} size={R * 0.9} />
      {!compact ? (
        <>
          <Sym s={s} id="P1" x={cx - R * 0.85} y={cy + R * 0.55} size={R * 0.5} />
          <Sym s={s} id="S" x={cx + R * 0.85} y={cy - R * 0.55} size={R * 0.5} />
        </>
      ) : null}
    </g>
  );
}

const SCENES: Record<string, (s: Stage) => React.ReactNode> = {
  "neon-vault": NeonVault,
  "cosmic-collapse": CosmicCollapse,
  "golden-emperor": GoldenEmperor,
  "diamond-heist": DiamondHeist,
  "arctic-fortune": ArcticFortune,
  "inferno-reels": InfernoReels,
  "quantum-jackpot": QuantumJackpot,
  "midnight-tokyo": MidnightTokyo,
  "pharaoh-protocol": PharaohProtocol,
  "lucky-circuit": LuckyCircuit,
  "void-miner": VoidMiner,
  "royal-circuit": RoyalCircuit,
  "dragon-core": DragonCore,
  "deep-treasure": DeepTreasure,
  "moonbase-77": Moonbase77,
  "wild-temple": WildTemple,
  "zero-gravity": ZeroGravity,
  "reel-reactor": ReelReactor,
  obsidian: Obsidian,
  "spinza-original": SpinzaOriginal,
  /* Risk Games */
  skyfall: Skyfall,
  "deep-dive": DeepDive,
  "rocket-run": RocketRun,
  "bank-heist": BankHeist,
  volcano: Volcano,
  "black-hole": BlackHole,
  freefall: Freefall,
  "core-meltdown": CoreMeltdown,
  "storm-chase": StormChase,
  "elevator-999": Elevator999,
  /* Beyond Slots */
  dropzone: Dropzone,
  "grid-break": GridBreak,
  "the-vault": TheVault,
  orbit: Orbit,
  "escape-99": Escape99,
};

/* ------------------------------------------------------------------- title */

interface TitleSpec {
  caps?: boolean;
  /** Letter spacing in em. */
  tracking?: number;
  weight?: 700 | 800;
  /** Solid fill colour or a [from, to] gradient. */
  fill?: string | [string, string];
  glow?: string;
  eyebrow?: string;
  eyebrowColor?: string;
  align?: "left" | "center";
  /** Force two lines on the card (long names). */
  split?: boolean;
  /** Second line rendered small with wide tracking (e.g. PHARAOH / protocol). */
  subline?: boolean;
  skew?: number;
  /** Hard offset shadow colour (retro). */
  shadow?: string;
  /** Carved outline. */
  outline?: string;
  /** Scale factor applied to the fitted size (Obsidian whispers). */
  scale?: number;
  /** Monospace face (control-room / puzzle-grid voices). */
  mono?: boolean;
  /** Horizontal glyph stretch: < 1 tall condensed, > 1 extended. */
  stretch?: number;
  /** A substring of the name rendered in another colour (GRID//BREAK). */
  accent?: { text: string; fill: string };
}

const TITLES: Record<string, TitleSpec> = {
  "neon-vault": { caps: true, tracking: -0.03, weight: 800, glow: "#00f0ff", eyebrow: "CRACK THE GRID", eyebrowColor: "#ff2bd6" },
  "cosmic-collapse": { caps: false, tracking: -0.05, weight: 800, fill: ["#ffffff", "#c084fc"], glow: "#a78bfa", eyebrow: "EVENT HORIZON", eyebrowColor: "#67e8f9" },
  "golden-emperor": { caps: true, tracking: 0.14, weight: 700, fill: ["#fff1c2", "#d4a72c"], glow: "#ffd166", align: "center", eyebrow: "IMPERIAL DYNASTY", eyebrowColor: "#e8b4b8", split: true },
  "diamond-heist": { caps: true, tracking: -0.02, weight: 800, fill: ["#ffffff", "#bfefff"], glow: "#7dd3fc", eyebrow: "MINI · MINOR · MAJOR · GRAND", eyebrowColor: "#c0c0c0" },
  "arctic-fortune": { caps: true, tracking: 0.02, weight: 700, fill: ["#ffffff", "#bfe9ff"], glow: "#7dd3fc", eyebrow: "AVALANCHE MULTIPLIER", eyebrowColor: "#a78bfa" },
  "inferno-reels": { caps: true, tracking: -0.04, weight: 800, fill: ["#ffd166", "#ff4500"], glow: "#ff7a1a", eyebrow: "EXPLODING WILDS", eyebrowColor: "#ffb347" },
  "quantum-jackpot": { caps: false, tracking: -0.04, weight: 800, fill: ["#ffffff", "#67e8f9"], glow: "#22d3ee", eyebrow: "ONE SYMBOL · SEVERAL STATES", eyebrowColor: "#c084fc" },
  "midnight-tokyo": { caps: true, tracking: 0.06, weight: 800, fill: ["#ffffff", "#ff2bd6"], glow: "#ff2bd6", eyebrow: "SHIBUYA · 02:00", eyebrowColor: "#22d3ee" },
  "pharaoh-protocol": { caps: true, tracking: 0.04, weight: 800, fill: ["#fff7d6", "#ffd166"], glow: "#fbbf24", subline: true, eyebrowColor: "#22d3ee" },
  "lucky-circuit": { caps: true, tracking: 0.0, weight: 800, fill: "#facc15", shadow: "#f472b6", eyebrow: "INSERT COIN · WIN OFTEN", eyebrowColor: "#22d3ee" },
  "void-miner": { caps: true, tracking: 0.1, weight: 700, fill: ["#e9d5ff", "#fbbf24"], glow: "#a78bfa", eyebrow: "DARK MATTER CORE", eyebrowColor: "#fbbf24" },
  "royal-circuit": { caps: true, tracking: -0.02, weight: 800, fill: ["#fff7d6", "#ffd166"], glow: "#ffd166", skew: -10, eyebrow: "8 LAPS TO THE PIT LANE", eyebrowColor: "#ef4444" },
  "dragon-core": { caps: true, tracking: -0.03, weight: 800, fill: ["#ffd166", "#ef4444"], glow: "#f97316", eyebrow: "TWENTY SCALES", eyebrowColor: "#22d3ee" },
  "deep-treasure": { caps: false, tracking: -0.04, weight: 800, fill: ["#dffaff", "#22d3ee"], glow: "#22d3ee", eyebrow: "DESCENT ×1 → ×10", eyebrowColor: "#fbbf24" },
  "moonbase-77": { caps: true, tracking: 0.12, weight: 700, fill: "#fb923c", glow: "#fb923c", eyebrow: "LOW GRAVITY · WILDS DRIFT", eyebrowColor: "#22d3ee" },
  "wild-temple": { caps: true, tracking: 0.05, weight: 800, fill: ["#fde68a", "#fbbf24"], outline: "#0a1a10", glow: "#34d399", eyebrow: "THE JAGUAR MOVES", eyebrowColor: "#34d399" },
  "zero-gravity": { caps: true, tracking: 0.22, weight: 700, fill: ["#ffffff", "#a78bfa"], glow: "#22d3ee", eyebrow: "5×3 → 6×4 → 7×5", eyebrowColor: "#67e8f9" },
  "reel-reactor": { caps: true, tracking: -0.03, weight: 800, fill: "#a3e635", glow: "#22c55e", eyebrow: "EVERY DEAD SPIN HEATS THE CORE", eyebrowColor: "#facc15" },
  obsidian: { caps: true, tracking: 0.42, weight: 700, fill: "#f5e6c8", align: "center", scale: 0.62 },
  "spinza-original": { caps: true, tracking: -0.02, weight: 800, fill: ["#ffffff", "#c4b5fd"], glow: "#8b5cf6", subline: true, eyebrowColor: "#22d3ee" },
  /* Risk Games — each in its own voice */
  skyfall: { caps: true, tracking: 0.2, weight: 700, fill: ["#ffffff", "#7dd3fc"], glow: "#7dd3fc", eyebrow: "ALTITUDE PAYS · RISK GAME", eyebrowColor: "#fbbf24" },
  "deep-dive": { caps: true, tracking: 0.3, weight: 700, fill: ["#dffaff", "#22d3ee"], glow: "#0e7490", eyebrow: "1,000 M = ×2 · 3,000 M = ×5", eyebrowColor: "#34d399" },
  "rocket-run": { caps: true, tracking: -0.05, weight: 800, skew: -9, fill: ["#fff7ed", "#fb923c"], glow: "#fb923c", eyebrow: "MARS OR BUST", eyebrowColor: "#f472b6" },
  "bank-heist": { caps: true, tracking: 0.08, weight: 800, fill: ["#f5e6c8", "#c9a961"], glow: "#ef4444", eyebrow: "THE BAG KEEPS FILLING", eyebrowColor: "#ef4444" },
  volcano: { caps: true, tracking: -0.01, weight: 800, fill: ["#ffd166", "#ff5c3d"], outline: "#2a0c07", glow: "#ff8a5c", eyebrow: "DEEPER CRYSTALS · RISING LAVA", eyebrowColor: "#fbbf24" },
  "black-hole": { caps: true, tracking: 0.34, weight: 700, stretch: 1.14, fill: ["#ffffff", "#a78bfa"], glow: "#f0abfc", eyebrow: "TIME SLOWS · THE MULTIPLIER DOESN'T", eyebrowColor: "#f0abfc" },
  freefall: { caps: true, tracking: -0.06, weight: 800, skew: 14, fill: ["#ffffff", "#60a5fa"], glow: "#60a5fa", eyebrow: "PULL LATE · NOT TOO LATE", eyebrowColor: "#f97316" },
  "core-meltdown": { caps: true, tracking: 0.1, weight: 700, mono: true, fill: "#bef264", glow: "#a3e635", eyebrow: "TEMP RISING · LIMIT 100 %", eyebrowColor: "#facc15" },
  "storm-chase": { caps: true, tracking: -0.03, weight: 800, skew: -6, fill: ["#f8fafc", "#94a3b8"], glow: "#a3e635", eyebrow: "DRIVE INTO THE WALL CLOUD", eyebrowColor: "#a3e635" },
  "elevator-999": { caps: true, tracking: 0.04, weight: 800, stretch: 0.74, fill: ["#f3e2ad", "#c9a961"], glow: "#38bdf8", eyebrow: "EVERY FLOOR IS A DECISION", eyebrowColor: "#38bdf8", split: true },
  /* Beyond Slots */
  dropzone: { caps: true, tracking: 0.22, weight: 800, fill: ["#ffffff", "#22d3ee"], glow: "#f472b6", eyebrow: "RELEASE THE CAPSULE", eyebrowColor: "#f472b6" },
  "grid-break": { caps: true, tracking: 0.02, weight: 700, mono: true, fill: "#bef264", accent: { text: "//", fill: "#38bdf8" }, glow: "#a3e635", eyebrow: "ONE WAVE · INFINITE CHAINS", eyebrowColor: "#38bdf8" },
  "the-vault": { caps: true, tracking: 0.3, weight: 700, fill: ["#fff1c2", "#c9a961"], glow: "#c9a961", eyebrow: "FIVE LAYERS · ONE DECISION AT EACH", eyebrowColor: "#38bdf8" },
  orbit: { caps: true, tracking: 0.5, weight: 700, fill: ["#ffffff", "#f0abfc"], glow: "#facc15", eyebrow: "FIRE THE IMPULSE · RIDE THE CHAOS", eyebrowColor: "#facc15" },
  "escape-99": { caps: true, tracking: -0.02, weight: 800, fill: ["#d1fae5", "#34d399"], outline: "#06090a", glow: "#f97316", eyebrow: "99 FLOORS · CASH OUT ON ANY", eyebrowColor: "#f97316", split: true },
};

function splitLines(name: string, spec: TitleSpec, v: ArtVariant): string[] {
  const words = name.trim().split(/\s+/);
  if (words.length < 2) return [name];
  if (spec.subline) return [words[0], words.slice(1).join(" ")];
  const twoLines = v === "card" ? spec.split || name.length > 9 : v === "hero" || v === "banner" ? name.length > 14 : name.length > 11;
  if (!twoLines) return [name];
  const mid = Math.ceil(words.length / 2);
  return [words.slice(0, mid).join(" "), words.slice(mid).join(" ")];
}

function estimateWidth(text: string, caps: boolean, tracking: number, mono = false, stretch = 1): number {
  const cw = mono ? 0.64 : caps ? 0.7 : 0.6;
  return (text.length * (cw + tracking) - tracking) * stretch;
}

function Title({ s, name, showName }: { s: Stage; name: string; showName: boolean }) {
  if (!showName) return null;
  const { W, H, v, id, p } = s;
  const spec = TITLES[s.slug] ?? { caps: true, tracking: -0.03, weight: 800, glow: p.glow };
  const caps = spec.caps !== false;
  const tracking = spec.tracking ?? -0.03;
  const weight = spec.weight ?? 800;
  const stretch = spec.stretch ?? 1;
  const face = spec.mono ? MONO : FONT;
  const rawLines = splitLines(name, spec, v);
  const lines = caps ? rawLines.map((l) => l.toUpperCase()) : rawLines;
  const cfg = v === "card" ? { pad: 22, maxFont: 54, avail: W - 44, eye: 11 } : v === "hero" ? { pad: 84, maxFont: 168, avail: W * 0.44, eye: 22 } : v === "banner" ? { pad: 56, maxFont: 112, avail: W * 0.42, eye: 18 } : { pad: 14, maxFont: 26, avail: W - 28, eye: 0 };
  const fitLines = spec.subline ? [lines[0]] : lines;
  const est = Math.max(...fitLines.map((l) => estimateWidth(l, caps, tracking, spec.mono, stretch)), 1);
  let size = Math.min(cfg.maxFont, cfg.avail / est);
  if (spec.scale) size *= spec.scale;
  const subSize = size * 0.34;
  const lineH = size * 0.94;
  const totalH = spec.subline ? size + subSize * 1.9 : lineH * lines.length;
  const center = spec.align === "center";
  const x = center ? W / 2 : cfg.pad;
  const anchor = center ? "middle" : "start";
  const baseY = v === "card" || v === "tile" ? H - cfg.pad - (totalH - size) : H / 2 + size / 2 - (totalH - size) / 2;
  const fill = Array.isArray(spec.fill) ? `url(#${id}-title)` : (spec.fill ?? "#fff");
  const eyebrow = spec.eyebrow && cfg.eye > 0 && v !== "tile";
  const eyeSize = v === "hero" ? size * 0.14 : v === "banner" ? size * 0.15 : Math.max(9.5, size * 0.2);
  const fontStyle: React.CSSProperties = { fontFamily: face, letterSpacing: `${tracking}em` };

  const render = (props: React.SVGProps<SVGTextElement>, key: string, main = false) =>
    lines.map((l, i) => {
      const isSub = spec.subline && i === 1;
      const y = isSub ? baseY + subSize * 1.7 : baseY + i * lineH;
      const base: React.CSSProperties = isSub ? { fontFamily: face, letterSpacing: "0.32em" } : fontStyle;
      const ops: string[] = [];
      if (spec.skew) ops.push(`skewX(${spec.skew})`);
      if (stretch !== 1 && !isSub) ops.push(`scale(${stretch} 1)`);
      const transform = ops.length ? `translate(${f(x)} ${f(y)}) ${ops.join(" ")} translate(${f(-x)} ${f(-y)})` : undefined;
      const acc = spec.accent;
      const k = main && acc && !isSub ? l.indexOf(acc.text) : -1;
      return (
        <text key={`${key}${i}`} x={f(x)} y={f(y)} textAnchor={anchor} fontSize={f(isSub ? subSize : size)} fontWeight={isSub ? 700 : weight} transform={transform} {...props} style={{ ...base, ...props.style }}>
          {k >= 0 && acc ? (
            <>
              {l.slice(0, k)}
              <tspan fill={acc.fill}>{acc.text}</tspan>
              {l.slice(k + acc.text.length)}
            </>
          ) : (
            l
          )}
        </text>
      );
    });

  return (
    <g>
      {Array.isArray(spec.fill) ? (
        <defs>
          <Linear id={`${id}-title`} stops={[[0, spec.fill[0]], [1, spec.fill[1]]]} dir="v" />
        </defs>
      ) : null}
      {eyebrow ? (
        <text x={f(x)} y={f(baseY - size * 1.02)} textAnchor={anchor} fontSize={f(eyeSize)} fontWeight={700} fill={spec.eyebrowColor ?? p.secondary} style={{ fontFamily: face, letterSpacing: "0.22em" }}>
          {spec.eyebrow}
        </text>
      ) : null}
      {spec.glow && v !== "tile" ? render({ fill: spec.glow, fillOpacity: 0.5, style: { filter: `blur(${f(size * 0.16)}px)` } }, "g") : null}
      {spec.shadow ? render({ fill: spec.shadow, transform: `translate(${f(size * 0.07)} ${f(size * 0.07)})` }, "s") : null}
      {spec.outline ? render({ fill: "none", stroke: spec.outline, strokeWidth: f(size * 0.09), strokeLinejoin: "round" }, "o") : null}
      {render({ fill }, "t", true)}
    </g>
  );
}

/* ----------------------------------------------------------------- GameArt */

export function GameArt({ slug, name, palette, variant = "card", className, showName = true, label }: GameArtProps) {
  const reactId = React.useId().replace(/[^a-zA-Z0-9]/g, "");
  const id = `ga${reactId}`;
  const game = GAMES_BY_SLUG.get(slug);
  const { w: W, h: H } = DIMS[variant];
  const showTitle = showName;
  const { cx, cy, R } = focal(variant, W, H, showTitle && variant === "card");
  const rnd = mulberry32(hashString(`${slug}:${variant}`));
  const fallback: SymbolStyle = { shape: "gem", color: palette.primary, accent: palette.glow, glow: 0.8 };
  const bySymbol = new Map((game?.symbols ?? []).map((x) => [x.id, x]));
  const stage: Stage = {
    W,
    H,
    v: variant,
    slug,
    cx,
    cy,
    R,
    p: palette,
    id,
    rnd,
    game,
    sym: (sid) => bySymbol.get(sid)?.style ?? fallback,
    tier: (sid) => bySymbol.get(sid)?.tier ?? "premium",
    compact: variant === "tile",
  };
  const scene = SCENES[slug] ?? Generic;
  const bgBottom = slug === "obsidian" ? "#000" : "#04050a";

  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice" className={cn("block h-full w-full", className)} role={label ? "img" : undefined} aria-label={label} aria-hidden={label ? undefined : true}>
      <defs>
        <linearGradient id={`${id}-bg`} x1="0" y1="0" x2="0.3" y2="1">
          <stop offset="0" stopColor={palette.bg} />
          <stop offset="1" stopColor={bgBottom} />
        </linearGradient>
        <linearGradient id={`${id}-vig`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0.45" stopColor="#000" stopOpacity="0" />
          <stop offset="1" stopColor="#020308" stopOpacity={variant === "card" ? 0.88 : 0.7} />
        </linearGradient>
      </defs>
      <rect width={W} height={H} fill={`url(#${id}-bg)`} />
      {/* Scenes are called as plain functions so the seeded PRNG is consumed exactly once per render (SSR == client, StrictMode-safe). */}
      {scene(stage)}
      {showTitle && variant !== "tile" ? <rect width={W} height={H} fill={`url(#${id}-vig)`} /> : null}
      <rect x="0.5" y="0.5" width={W - 1} height={H - 1} fill="none" stroke="#fff" strokeOpacity="0.07" />
      <Title s={stage} name={name} showName={showTitle} />
    </svg>
  );
}