"use client";

/**
 * Escape 99 — Spinza Original (ladder). A fast roguelike tower: 99 floors,
 * room by room, cash out on any of them. The tower strip scrolls as the player
 * climbs; every CLIMB animates the room resolution returned by the server.
 */
import { useCallback, useEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { ArrowUp, Crown, DoorOpen, Flag, Flame, Gem, Orbit, RotateCcw, Shield, ShieldCheck, Skull, Sparkles, Sword, TriangleAlert, Zap, type LucideIcon } from "lucide-react";
import { formatMultiplier, formatSC } from "@spinza/shared";
import type { LadderEvent, LadderOffer } from "@spinza/game-core/client";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui";
import { useLadder, type ArcadeGameProps, type LadderView } from "./contract";

interface EscapeConfig {
  floors: number;
  bands: [number, number][];
  checkpoints: number[];
  rooms: { kind: string; label: string; weight: number; detail: string }[];
  forkChance: number;
  portalChance: number;
}

/** Room resolution being animated from the returned log tail. */
interface Resolution {
  ev: LadderEvent;
  from: number;
  step: "resolve" | "result";
}

type Phase = "idle" | "resolve" | "running" | "cashed" | "busted" | "completed";

const wait = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
const ROW = 22;
const DANGER = "#ff5c7a";

const ICONS: Record<string, LucideIcon> = { chest: Gem, enemy: Sword, trap: TriangleAlert, multiplier: Sparkles, room: DoorOpen, portal: Orbit, "fork-safe": Shield, "fork-risky": Flame, start: DoorOpen, summit: Crown };
const SUCCESS: Record<string, string> = { chest: "Chest opened", enemy: "Guardian defeated", trap: "Trap disarmed", multiplier: "Rune charged", room: "Stairs climbed", portal: "Warped three floors", "fork-safe": "Corridor cleared", "fork-risky": "Corridor cleared", start: "You are in" };

function lastStep(log: LadderEvent[]): LadderEvent | undefined {
  for (let i = log.length - 1; i >= 0; i--) if (log[i].outcome === "ok" || log[i].outcome === "bust") return log[i];
  return undefined;
}

function pickSafe(offers: LadderOffer[]): LadderOffer | undefined {
  return offers.find((o) => o.kind === "fork-safe") ?? offers[0];
}

export function EscapeGame({ definition, bet, onBusy, onResult, sound, reduceMotion }: ArcadeGameProps) {
  const cfg = definition.config as unknown as EscapeConfig;
  const palette = definition.presentation.palette;
  const { session, start, act, reset, busy, error, clearError } = useLadder(definition.slug);
  const [anim, setAnim] = useState<Resolution | null>(null);
  const [selected, setSelected] = useState<string | null>(null);
  const [flourish, setFlourish] = useState<number | null>(null);
  const [summit, setSummit] = useState(false);
  const [auto, setAuto] = useState(false);
  const autoRef = useRef(false);
  const dur = useCallback((ms: number) => (reduceMotion ? Math.round(ms * 0.35) : ms), [reduceMotion]);
  const sec = (ms: number) => dur(ms) / 1000;

  /* ------------------------------------------------------------ derived */
  const phase: Phase = anim ? "resolve" : !session ? "idle" : session.status;
  const running = session?.status === "running";
  const locked = busy || anim !== null;
  const floor = anim ? (anim.step === "resolve" || anim.ev.outcome === "bust" ? anim.from : anim.ev.stage) : (session?.stage ?? 0);
  const runBet = session?.bet ?? bet;
  const current = session?.current ?? 0;
  const offers = session?.offers ?? [];
  const selectedId = offers.some((o) => o.id === selected) ? selected : offers[0]?.id;
  const checkpointsHit: number[] = Array.isArray(session?.extra.checkpointsHit) ? (session.extra.checkpointsHit as unknown[]).filter((x): x is number => typeof x === "number") : [];
  const bustEvent = phase === "busted" && session ? lastStep(session.log) : undefined;
  const ended = phase === "cashed" || phase === "busted" || phase === "completed";

  useEffect(() => {
    if (running) onBusy(true);
  }, [running, onBusy]);

  /* ------------------------------------------------------------ sequence */
  const stopAuto = useCallback(() => {
    autoRef.current = false;
    setAuto(false);
  }, []);

  const finish = useCallback(
    (s: LadderView) => {
      stopAuto();
      onResult({ win: s.win, multiplier: s.bet ? s.win / s.bet : 0 });
      onBusy(false);
    },
    [stopAuto, onResult, onBusy],
  );

  /** Animate the last step of `s` (climbed from floor `from`); settle end states. Returns true when auto-climb should continue. */
  const animateStep = useCallback(
    async (s: LadderView, from: number): Promise<boolean> => {
      const ev = lastStep(s.log);
      if (ev) {
        setAnim({ ev, from, step: "resolve" });
        sound("tick");
        await wait(dur(ev.outcome === "bust" ? 520 : 420));
        const checkpoint = ev.data?.checkpoint === true;
        if (ev.outcome === "bust") {
          sound("lose");
          setAnim({ ev, from, step: "result" });
          await wait(dur(1100));
        } else {
          setAnim({ ev, from, step: "result" });
          if (checkpoint) {
            sound("bonus");
            setFlourish(ev.stage);
            setTimeout(() => setFlourish(null), dur(1500));
          } else sound("tick");
          await wait(dur(checkpoint ? 700 : 380));
        }
        setAnim(null);
        if (checkpoint && s.status === "running") stopAuto();
      }
      if (s.status === "completed") {
        await wait(dur(300));
        setSummit(true);
        sound("bigWin");
      }
      if (s.status !== "running") {
        finish(s);
        return false;
      }
      if (!autoRef.current) return false;
      await wait(dur(650));
      return autoRef.current;
    },
    [dur, sound, stopAuto, finish],
  );

  /** Animate `first`, then keep climbing the safe path while auto-climb is on (stops at checkpoints / end states). */
  const runFrom = useCallback(
    async (first: LadderView, from: number) => {
      let s = first;
      let prev = from;
      for (;;) {
        const cont = await animateStep(s, prev);
        if (!cont) return;
        prev = s.stage;
        const res = await act({ type: "continue", offerId: pickSafe(s.offers)?.id });
        if (!res) {
          stopAuto();
          return;
        }
        s = res.session;
      }
    },
    [animateStep, act, stopAuto],
  );

  const climb = async (offerId: string | undefined) => {
    if (!session) return;
    const res = await act({ type: "continue", offerId });
    if (!res) {
      stopAuto();
      return;
    }
    await runFrom(res.session, session.stage);
  };

  const onStart = async () => {
    if (locked) return;
    sound("click");
    setSummit(false);
    if (session && session.status !== "running") reset();
    onBusy(true);
    const res = await start(bet);
    if (!res) {
      onBusy(false);
      return;
    }
    await runFrom(res.session, 0);
  };

  const onClimb = async () => {
    if (!session || locked) return;
    sound("click");
    await climb(selectedId ?? undefined);
  };

  const onCashout = async () => {
    if (!session || locked) return;
    sound("click");
    stopAuto();
    const res = await act({ type: "cashout" });
    if (!res) return;
    sound("win");
    finish(res.session);
  };

  const onToggleAuto = () => {
    sound("click");
    const next = !auto;
    autoRef.current = next;
    setAuto(next);
    if (next && session && !locked) void climb(pickSafe(offers)?.id);
  };

  const onNewRun = () => {
    sound("click");
    setSummit(false);
    reset();
  };

  /* -------------------------------------------------------------- render */
  const multiplierColor = phase === "busted" ? DANGER : phase === "cashed" || phase === "completed" ? "var(--color-credit)" : "#fff";
  const isFork = offers.length > 1;

  return (
    <div className="absolute inset-0 flex flex-col overflow-hidden" data-scene="escape">
      <div className="pointer-events-none absolute inset-0" style={{ background: `radial-gradient(70% 50% at 50% 100%, ${palette.surface} 0%, transparent 70%), radial-gradient(60% 40% at 50% 0%, ${palette.primary}14 0%, transparent 70%)` }} />
      {/* Bust flash */}
      <AnimatePresence>
        {phase === "busted" || (anim && anim.ev.outcome === "bust" && anim.step === "result") ? (
          <motion.div key="flash" className="pointer-events-none absolute inset-0 z-[3]" style={{ background: `radial-gradient(70% 60% at 50% 50%, ${DANGER}44 0%, transparent 100%)` }} initial={{ opacity: 0 }} animate={{ opacity: reduceMotion ? [0, 0.7, 0] : [0, 1, 0.2, 0.7, 0] }} exit={{ opacity: 0 }} transition={{ duration: sec(1100) }} />
        ) : null}
      </AnimatePresence>
      {/* Summit: the tower opens to the sky */}
      <AnimatePresence>
        {summit ? (
          <motion.div key="sky" className="pointer-events-none absolute inset-0 z-[3]" initial={{ opacity: 0, y: "60%" }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} transition={{ duration: sec(1600), ease: [0.16, 1, 0.3, 1] }} style={{ background: `linear-gradient(180deg, #e9fff5 0%, ${palette.glow}aa 22%, ${palette.primary}44 55%, transparent 100%)`, mixBlendMode: "screen" }} />
        ) : null}
      </AnimatePresence>

      <div className="relative z-[2] mx-auto flex h-full w-full max-w-3xl flex-col px-3 pb-2 pt-1">
        {/* Stats */}
        <div className="flex items-end justify-between gap-3">
          <div>
            <div className="eyebrow">{phase === "busted" ? "Run over" : phase === "cashed" ? "Exited" : phase === "completed" ? "Summit" : "Multiplier"}</div>
            <div className="flex items-baseline gap-2">
              <motion.div key={`${phase}-${current}`} initial={{ opacity: 0.4, y: 4 }} animate={{ opacity: 1, y: 0 }} className="text-[clamp(34px,9vw,52px)] font-extrabold leading-none tabular tracking-tight" style={{ color: multiplierColor, textShadow: phase === "running" || phase === "resolve" ? `0 0 28px ${palette.glow}88` : undefined }}>
                {phase === "idle" ? "—" : formatMultiplier(current)}
              </motion.div>
            </div>
          </div>
          <div className="text-center">
            <div className="eyebrow">Floor</div>
            <div className="text-2xl font-extrabold leading-none tabular">
              <motion.span key={floor} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} className="inline-block" style={{ color: phase === "busted" ? DANGER : palette.glow }}>
                {Math.max(1, floor)}
              </motion.span>
              <span className="text-sm text-fg-3">/{cfg.floors}</span>
            </div>
          </div>
          <div className="text-right">
            <div className="eyebrow">{phase === "busted" ? "Lost" : ended ? "Win" : "Potential win"}</div>
            <div className={cn("text-lg font-bold tabular sm:text-xl", phase === "busted" ? "text-danger" : "text-credit")}>{phase === "idle" ? formatSC(bet) : phase === "busted" ? `−${formatSC(runBet)}` : ended ? formatSC(session?.win ?? 0) : formatSC(Math.round(runBet * current))}</div>
            <div className="text-[11px] text-fg-3 tabular">Bet {formatSC(runBet)}</div>
          </div>
        </div>

        {/* Tower + room */}
        <div className="mt-2 grid min-h-0 flex-1 grid-cols-[64px_1fr] gap-3 sm:grid-cols-[88px_1fr]">
          <Tower cfg={cfg} floor={Math.max(1, floor)} busted={phase === "busted"} checkpointsHit={checkpointsHit} palette={palette} sec={sec} />

          <div className="relative flex min-h-0 flex-col justify-center">
            <AnimatePresence mode="wait">
              {phase === "idle" ? (
                <motion.div key="idle" initial={{ opacity: 0, scale: 0.94 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.94 }} className="flex flex-col items-center gap-3 text-center">
                  <button
                    onClick={() => void onStart()}
                    disabled={locked}
                    className="grid h-[112px] w-[112px] place-items-center rounded-full text-[17px] font-extrabold tracking-[0.14em] transition-transform active:scale-95 focus-ring disabled:opacity-60"
                    style={{ background: `radial-gradient(circle at 50% 30%, #e9fff5 0%, ${palette.glow} 18%, ${palette.primary} 60%, #0f6b4a 100%)`, boxShadow: `0 0 0 8px ${palette.primary}2a, 0 0 0 9px ${palette.primary}55, 0 18px 60px -12px ${palette.primary}`, color: "#04140d" }}
                    aria-label="Start run"
                  >
                    START
                  </button>
                  <span className="rounded-full bg-black/50 px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-fg-2 tabular">Bet {formatSC(bet)}</span>
                  <p className="max-w-[260px] text-[12px] text-fg-3">{definition.tagline} You enter floor 1 automatically.</p>
                </motion.div>
              ) : anim ? (
                <ResolveCard key={`res-${anim.ev.stage}-${anim.ev.kind}`} res={anim} palette={palette} reduceMotion={reduceMotion} />
              ) : phase === "running" ? (
                <motion.div key={`offers-${session?.stage}`} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: sec(260) }} className="flex flex-col gap-2">
                  <div className="flex items-center justify-between text-[11px] font-semibold uppercase tracking-wider text-fg-3">
                    <span>{isFork ? "Fork — choose a corridor" : offers[0]?.kind === "portal" ? "Portal detected" : `Floor ${floor + 1}`}</span>
                    <span className="tabular">Next</span>
                  </div>
                  <div className={cn("grid gap-2", isFork ? "grid-cols-2" : "grid-cols-1")}>
                    {offers.map((o) => (
                      <OfferCard key={o.id} offer={o} bet={runBet} selected={selectedId === o.id} fork={isFork} onSelect={() => setSelected(o.id)} palette={palette} />
                    ))}
                  </div>
                </motion.div>
              ) : phase === "busted" && bustEvent ? (
                <motion.div key="bust" initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} className="surface rounded-lg p-4 text-center" style={{ borderColor: `${DANGER}66` }}>
                  <Skull className="mx-auto h-10 w-10" style={{ color: DANGER }} />
                  <div className="mt-2 text-xl font-extrabold uppercase tracking-tight" style={{ color: DANGER }}>
                    {bustEvent.label}
                  </div>
                  {bustEvent.detail ? <div className="text-[12px] text-fg-3">{bustEvent.detail}</div> : null}
                  <div className="mt-2 text-[12px] text-fg-2">
                    The run ended on floor {session?.stage ?? 0}. Bet lost: <span className="tabular text-danger">{formatSC(runBet)}</span>
                  </div>
                </motion.div>
              ) : phase === "cashed" ? (
                <motion.div key="cashed" initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} className="surface rounded-lg p-4 text-center">
                  <ShieldCheck className="mx-auto h-10 w-10" style={{ color: palette.glow }} />
                  <div className="mt-2 text-[12px] font-extrabold uppercase tracking-[0.22em]" style={{ color: palette.glow }}>
                    Exited at floor {session?.stage}
                  </div>
                  <div className="text-2xl font-extrabold tabular text-credit">+{formatSC(session?.win ?? 0)}</div>
                </motion.div>
              ) : phase === "completed" ? (
                <motion.div key="summit" initial={{ opacity: 0, scale: 0.7 }} animate={{ opacity: 1, scale: 1 }} transition={{ type: "spring", stiffness: 200, damping: 16 }} className="text-center">
                  <Crown className="mx-auto h-12 w-12" style={{ color: palette.glow, filter: `drop-shadow(0 0 18px ${palette.glow})` }} />
                  <div className="mt-2 text-[clamp(20px,6vw,30px)] font-extrabold uppercase tracking-tight shimmer-text">Floor 99</div>
                  <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-fg-2">The tower opens to the sky</div>
                  <div className="mt-2 text-2xl font-extrabold tabular text-credit">+{formatSC(session?.win ?? 0)}</div>
                </motion.div>
              ) : null}
            </AnimatePresence>

            {/* Checkpoint flourish */}
            <AnimatePresence>
              {flourish !== null ? (
                <motion.div key={`cp-${flourish}`} className="pointer-events-none absolute inset-x-0 top-0 flex justify-center" initial={{ opacity: 0, y: 14, scale: 0.8 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: -10 }} transition={{ type: "spring", stiffness: 260, damping: 18 }}>
                  <div className="flex items-center gap-2 rounded-full px-4 py-1.5 text-[12px] font-extrabold uppercase tracking-[0.2em]" style={{ background: `${palette.primary}22`, border: `1px solid ${palette.primary}88`, color: palette.glow, boxShadow: `0 0 30px -6px ${palette.glow}` }}>
                    <Flag className="h-4 w-4" /> Checkpoint {flourish}
                  </div>
                </motion.div>
              ) : null}
            </AnimatePresence>
          </div>
        </div>

        {/* Controls */}
        <div className="mt-2 min-h-[72px]">
          <AnimatePresence mode="wait">
            {phase === "running" || phase === "resolve" ? (
              <motion.div key="run" initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 8 }} className="flex flex-col gap-2">
                <div className="grid grid-cols-2 gap-2">
                  <button onClick={() => void onCashout()} disabled={locked || !session?.canCashout} className="tap flex h-14 flex-col items-center justify-center rounded-md border text-[13px] font-extrabold uppercase tracking-[0.12em] transition-all active:scale-[0.98] focus-ring disabled:opacity-40" style={{ borderColor: `${palette.primary}88`, color: palette.glow, background: `${palette.primary}14` }}>
                    {definition.presentation.secondaryVerb ?? "CASH OUT"}
                    <span className="text-[11px] font-semibold normal-case tracking-normal text-fg-2 tabular">+{formatSC(Math.round(runBet * current))}</span>
                  </button>
                  <button onClick={() => void onClimb()} disabled={locked || offers.length === 0} className="tap flex h-14 flex-col items-center justify-center rounded-md text-[13px] font-extrabold uppercase tracking-[0.12em] transition-all active:scale-[0.98] focus-ring disabled:opacity-40" style={{ background: `linear-gradient(180deg, ${palette.glow}, ${palette.primary} 70%, #0f6b4a)`, color: "#04140d", boxShadow: `0 10px 40px -12px ${palette.primary}` }}>
                    <span className="inline-flex items-center gap-1">
                      <ArrowUp className="h-4 w-4" /> {definition.presentation.verb}
                    </span>
                    {(() => {
                      const o = offers.find((x) => x.id === selectedId);
                      return o ? (
                        <span className="text-[11px] font-semibold normal-case tracking-normal tabular" style={{ color: "#0a3d2a" }}>
                          {Math.round(o.survival * 100)}% safe · {formatMultiplier(o.next)}
                        </span>
                      ) : null;
                    })()}
                  </button>
                </div>
                <button role="switch" aria-checked={auto} onClick={onToggleAuto} className="flex h-9 items-center justify-center gap-2 rounded-md text-[12px] font-semibold text-fg-2 focus-ring">
                  <span className={cn("relative h-5 w-9 rounded-full border transition-colors", auto ? "border-transparent" : "bg-surface-3 border-line-2")} style={auto ? { background: palette.primary } : undefined}>
                    <span className={cn("absolute top-0.5 h-[14px] w-[14px] rounded-full bg-white transition-transform", auto ? "translate-x-[18px]" : "translate-x-0.5")} />
                  </span>
                  <Zap className="h-3.5 w-3.5" style={{ color: auto ? palette.glow : undefined }} />
                  Auto-climb to next checkpoint (safe path)
                </button>
              </motion.div>
            ) : ended ? (
              <motion.div key="end" initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 8 }} className="grid grid-cols-[1fr_auto] gap-2">
                <button onClick={() => void onStart()} disabled={locked} className="tap flex h-14 items-center justify-center gap-2 rounded-md text-[14px] font-extrabold uppercase tracking-[0.12em] transition-all active:scale-[0.98] focus-ring disabled:opacity-40" style={{ background: phase === "busted" ? `linear-gradient(180deg, #ff8aa0, ${DANGER})` : `linear-gradient(180deg, ${palette.glow}, ${palette.primary} 70%, #0f6b4a)`, color: "#04140d", boxShadow: `0 10px 40px -12px ${phase === "busted" ? DANGER : palette.primary}` }}>
                  <RotateCcw className="h-4 w-4" /> {phase === "busted" ? "Try again" : "Climb again"}
                  <span className="text-[11px] font-semibold normal-case tracking-normal tabular opacity-70">{formatSC(bet)}</span>
                </button>
                <Button variant="secondary" size="lg" className="h-14" onClick={onNewRun}>
                  New run
                </Button>
              </motion.div>
            ) : (
              <motion.div key="idle" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex h-14 items-center justify-center gap-3 text-[11px] uppercase tracking-wider text-fg-3">
                {cfg.checkpoints.map((c) => (
                  <span key={c} className="inline-flex items-center gap-1">
                    <Flag className="h-3 w-3" style={{ color: palette.primary }} /> {c}
                  </span>
                ))}
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>

      <AnimatePresence>
        {error ? (
          <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="absolute inset-x-4 bottom-3 z-[50] mx-auto max-w-sm glass rounded-md p-3 text-center text-sm">
            <div className="text-fg-2">{error}</div>
            <div className="mt-2 flex justify-center gap-2">
              <Button size="sm" variant="secondary" onClick={clearError}>
                Dismiss
              </Button>
              <Button size="sm" variant="accent" href="/rewards">
                Get rewards
              </Button>
            </div>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  );
}

/* ------------------------------------------------------------------ parts */

type Palette = ArcadeGameProps["definition"]["presentation"]["palette"];

function Tower({ cfg, floor, busted, checkpointsHit, palette, sec }: { cfg: EscapeConfig; floor: number; busted: boolean; checkpointsHit: number[]; palette: Palette; sec: (ms: number) => number }) {
  const floors = Array.from({ length: cfg.floors }, (_, i) => cfg.floors - i); // 99 … 1
  const index = cfg.floors - floor;
  return (
    <div className="relative h-full min-h-[180px] overflow-hidden rounded-lg" style={{ background: `linear-gradient(180deg, ${palette.surface} 0%, #050807 100%)`, border: `1px solid ${palette.primary}33`, boxShadow: "inset 0 0 40px -10px #000" }} aria-label={`Tower, floor ${floor}`}>
      {/* rails */}
      <div className="pointer-events-none absolute inset-y-0 left-2 w-px" style={{ background: `${palette.primary}33` }} />
      <div className="pointer-events-none absolute inset-y-0 right-2 w-px" style={{ background: `${palette.primary}33` }} />
      <motion.ol className="absolute inset-x-0 top-1/2" initial={false} animate={{ y: -(index * ROW + ROW / 2) }} transition={{ type: "spring", stiffness: 140, damping: 22, duration: sec(500) }}>
        {floors.map((f) => {
          const cp = cfg.checkpoints.includes(f);
          const cur = f === floor;
          const done = f < floor;
          const hit = checkpointsHit.includes(f);
          return (
            <li key={f} className="relative flex items-center justify-center" style={{ height: ROW }}>
              <span className="absolute inset-x-3 top-1/2 h-px" style={{ background: cur ? (busted ? DANGER : palette.glow) : done ? `${palette.primary}55` : "rgba(255,255,255,0.07)" }} />
              <span className={cn("relative z-[1] rounded px-1.5 text-[11px] font-bold tabular leading-none", cur ? "text-black" : done ? "" : "text-fg-4")} style={cur ? { background: busted ? DANGER : palette.glow, boxShadow: `0 0 16px ${busted ? DANGER : palette.glow}` } : done ? { color: palette.primary, background: "#050807" } : { background: "#050807" }}>
                {f}
              </span>
              {cp ? <Flag className="absolute right-3 top-1/2 z-[1] h-3 w-3 -translate-y-1/2" style={{ color: hit ? palette.glow : cur ? palette.glow : palette.secondary, filter: hit ? `drop-shadow(0 0 6px ${palette.glow})` : undefined }} /> : null}
            </li>
          );
        })}
      </motion.ol>
      <div className="pointer-events-none absolute inset-x-0 top-0 h-10" style={{ background: `linear-gradient(180deg, ${palette.surface}, transparent)` }} />
      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-10" style={{ background: "linear-gradient(0deg, #050807, transparent)" }} />
      {/* current-floor marker */}
      <span className="pointer-events-none absolute left-0 top-1/2 h-[2px] w-2 -translate-y-1/2" style={{ background: busted ? DANGER : palette.glow }} />
      <span className="pointer-events-none absolute right-0 top-1/2 h-[2px] w-2 -translate-y-1/2" style={{ background: busted ? DANGER : palette.glow }} />
    </div>
  );
}

function OfferCard({ offer, bet, selected, fork, onSelect, palette }: { offer: LadderOffer; bet: number; selected: boolean; fork: boolean; onSelect: () => void; palette: Palette }) {
  const Icon = ICONS[offer.kind] ?? DoorOpen;
  const risky = offer.kind === "fork-risky";
  const accent = risky ? palette.secondary : palette.primary;
  const [title, sub] = offer.label.includes(" — ") ? offer.label.split(" — ") : [offer.label, ""];
  return (
    <button
      type="button"
      onClick={onSelect}
      aria-pressed={selected}
      className={cn("tap relative flex w-full flex-col rounded-lg border p-3 text-left transition-all active:scale-[0.99] focus-ring", fork ? "min-h-[132px]" : "min-h-[96px]")}
      style={{ borderColor: selected ? accent : "rgba(255,255,255,0.1)", background: selected ? `linear-gradient(180deg, ${accent}22, ${accent}0a)` : "linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02))", boxShadow: selected ? `0 0 28px -8px ${accent}` : undefined }}
    >
      <div className="flex w-full items-start justify-between gap-2">
        <div className="flex min-w-0 items-center gap-2">
          <span className="grid h-9 w-9 shrink-0 place-items-center rounded-md" style={{ background: `${accent}22`, color: accent }}>
            <Icon className="h-5 w-5" />
          </span>
          <div className="min-w-0">
            <div className="truncate text-[13px] font-bold text-fg">{sub || title}</div>
            {sub ? <div className="truncate text-[11px] text-fg-3">{title}</div> : null}
          </div>
        </div>
        <div className="shrink-0 text-right">
          <div className="text-lg font-extrabold leading-none tabular" style={{ color: accent }}>
            {formatMultiplier(offer.next)}
          </div>
          <div className="text-[10px] text-fg-3 tabular">{formatSC(Math.round(bet * offer.next))}</div>
        </div>
      </div>
      <div className="mt-auto w-full pt-2">
        <div className="flex items-center justify-between text-[11px]">
          <span className="text-fg-3">{offer.description}</span>
          <span className="font-bold tabular" style={{ color: accent }}>
            {Math.round(offer.survival * 100)}%
          </span>
        </div>
        <div className="mt-1 h-1 w-full overflow-hidden rounded-full bg-white/10">
          <div className="h-full rounded-full" style={{ width: `${Math.round(offer.survival * 100)}%`, background: accent }} />
        </div>
      </div>
    </button>
  );
}

function ResolveCard({ res, palette, reduceMotion }: { res: Resolution; palette: Palette; reduceMotion: boolean }) {
  const { ev, step } = res;
  const bust = ev.outcome === "bust";
  const Icon = bust && step === "result" ? Skull : (ICONS[ev.kind] ?? DoorOpen);
  const accent = bust && step === "result" ? DANGER : ev.kind === "fork-risky" ? palette.secondary : palette.glow;
  const motionFor = (): { animate: Record<string, number | number[]>; transition: Record<string, number | string> } => {
    if (reduceMotion || step === "result") return { animate: { scale: bust ? 1.15 : 1, rotate: 0 }, transition: { duration: 0.2 } };
    switch (ev.kind) {
      case "chest":
        return { animate: { scale: [1, 1.35, 1.1], rotate: [0, -12, 8, 0], y: [0, -8, 0] }, transition: { duration: 0.42 } };
      case "enemy":
        return { animate: { rotate: [-50, 40, -10, 0], x: [-14, 14, 0], scale: [1, 1.2, 1] }, transition: { duration: 0.42 } };
      case "trap":
        return { animate: { x: [0, -6, 6, -5, 5, 0], scale: [1, 1.15, 1] }, transition: { duration: 0.42 } };
      case "multiplier":
        return { animate: { scale: [1, 1.5, 1.2], rotate: [0, 180, 360] }, transition: { duration: 0.42 } };
      case "portal":
        return { animate: { rotate: [0, 540], scale: [1, 1.6, 0.6, 1.1] }, transition: { duration: 0.5 } };
      case "fork-safe":
      case "fork-risky":
        return { animate: { x: ev.kind === "fork-safe" ? [30, -6, 0] : [-30, 6, 0], scale: [0.9, 1.15, 1] }, transition: { duration: 0.4 } };
      default:
        return { animate: { y: [0, -14, 0], scale: [1, 1.1, 1] }, transition: { duration: 0.4 } };
    }
  };
  const m = motionFor();
  const headline = step === "resolve" ? ev.detail && bust ? ev.detail : ev.label : bust ? ev.label : SUCCESS[ev.kind] ?? "Cleared";
  return (
    <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -12 }} transition={{ duration: 0.18 }} className="surface relative overflow-hidden rounded-lg p-4 text-center" style={{ borderColor: `${accent}66` }}>
      <motion.div key={step} className="mx-auto grid h-16 w-16 place-items-center rounded-full" style={{ background: `${accent}22`, color: accent, boxShadow: `0 0 34px -8px ${accent}` }} animate={m.animate} transition={m.transition}>
        <Icon className="h-8 w-8" />
      </motion.div>
      {!bust && step === "result" && !reduceMotion ? (
        <>
          {[0, 1, 2, 3, 4, 5].map((i) => (
            <motion.span key={i} className="pointer-events-none absolute left-1/2 top-[38px] h-1.5 w-1.5 rounded-full" style={{ background: accent }} initial={{ x: 0, y: 0, opacity: 1 }} animate={{ x: Math.cos((i / 6) * Math.PI * 2) * 70, y: Math.sin((i / 6) * Math.PI * 2) * 70, opacity: 0 }} transition={{ duration: 0.5, ease: "easeOut" }} />
          ))}
        </>
      ) : null}
      <motion.div key={`${step}-h`} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} className="mt-3 text-[15px] font-extrabold uppercase tracking-tight" style={{ color: bust && step === "result" ? DANGER : "var(--color-fg)" }}>
        {headline}
      </motion.div>
      <div className="mt-0.5 h-4 text-[12px] text-fg-3">
        {step === "resolve" ? "Resolving…" : bust ? ev.detail ?? "" : ev.data?.checkpoint === true ? "Checkpoint reached" : `Floor ${ev.stage} · ${formatMultiplier(ev.multiplierAfter)}`}
      </div>
    </motion.div>
  );
}