@popcraft/kit 0.24.3 → 0.26.0

package/dist/chunks/chunk-OG3LNFZ7.js

@@ -0,0 +1,1403 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  H,
+  W,
+  arc,
+  arcPoints,
+  back,
+  bar,
+  box,
+  close,
+  drift,
+  focusColumn,
+  focusRow,
+  gameKit,
+  gameVar,
+  glow,
+  go,
+  keybind,
+  keys,
+  label,
+  menu,
+  onAll,
+  oneShot,
+  overlay,
+  poly,
+  readout,
+  rebindListener,
+  screen,
+  set,
+  shaderLayer,
+  slider,
+  spin,
+  toggle,
+  toggleComponent,
+  when
+} from "./chunk-TQKUAF43.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/game/deckbound-roguelike.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var SUITS = ["Sun", "Moon", "Star"];
+var SUIT_ROLE = ["sun", "moon", "star"];
+var HEROES = [
+  { name: "ORIEL VANE", epithet: "the Astrologer", hp: 62, relic: "Brass Orrery", relicText: "When your Fate aligns, it strikes for 12 instead of 8.", blurb: "Reads the sky like a ledger and settles every debt in starlight." },
+  { name: "MAREN THISTLE", epithet: "the Hedge-Witch", hp: 70, relic: "Thornwax Candle", relicText: "Heal 6 HP after every victory.", blurb: "Grew up in the spire's shadow, where the herbs taste of iron." },
+  { name: "CASSIAN DUSK", epithet: "the Oathbroken", hp: 80, relic: "Cracked Aegis", relicText: "Begin every battle with 8 block.", blurb: "Swore to guard the spire. Now climbs it to take the oath back." }
+];
+var RELICS = [
+  { name: "Brass Orrery", text: "When your Fate aligns, it strikes for 12 instead of 8." },
+  { name: "Thornwax Candle", text: "Heal 6 HP after every victory." },
+  { name: "Cracked Aegis", text: "Begin every battle with 8 block." },
+  { name: "Pilgrim's Compass", text: "Every victory pays 10 extra gold." },
+  { name: "Moth-glass Lantern", text: "End each turn with 3 block." }
+];
+var ENEMIES = [
+  { name: "Hollow Acolyte", title: "Keeper of the lower stair", hp: 32, atk: 11, guard: 8, offset: 0, lore: "A novice who prayed too long to the spire and was answered." },
+  { name: "The Gilded Warden", title: "Elite \xB7 Warden of the Nave", hp: 48, atk: 18, guard: 10, offset: 2, lore: "Gold-leafed armour with nothing inside but the oath it keeps." },
+  { name: "Sal, the Spire Heart", title: "Boss \xB7 The eye at the top", hp: 70, atk: 14, guard: 10, offset: 1, lore: "The spire does not have a heart. It has an eye, and it is open." }
+];
+var MAP = [["fight", "mystery"], ["elite", "shop"], ["rest", "mystery"], ["shop", "rest"], ["boss"]];
+var FLOOR_NAMES = ["The Pilgrim Stair", "The Glass Nave", "The Ember Choir", "The Hanging Library", "The Heart of Sal"];
+var NODE_INFO = {
+  fight: ["Fight", "A Hollow Acolyte bars the stair. 32 HP. It strikes first."],
+  elite: ["Elite", "The Gilded Warden. 48 HP, begins with a ritual, hits hard."],
+  rest: ["Rest site", "A starfire burns here. Heal, or meditate to upgrade a card."],
+  shop: ["Shop", "The Moth Merchant trades cards and relics for gold."],
+  mystery: ["Mystery", "Something in the dark is weeping. Choose what it costs you."],
+  boss: ["Boss", "Sal, the Spire Heart. 70 HP. Guards, gathers, then strikes."]
+};
+var MAP_X = [780, 1140];
+var FY = (f) => 880 - 170 * f;
+var CREDITS = [
+  ["Game direction", "Ilse Marrowby"],
+  ["Card design", "Teodor Hask \xB7 Wren Adeyemi"],
+  ["Art direction", "Sol\xE8ne Picard-Iwu"],
+  ["Interface", "Mika Ranganathan"],
+  ["Music and sound", "Aurelio Brandt"],
+  ["Writing", "Hollis Okonkwo-Reyes"],
+  ["Engineering", "Petra Vukovi\u0107 \xB7 Sam Ferreira \xB7 June Oyelaran"],
+  ["Playtesting", "Everyone who died on floor two"],
+  ["Special thanks", "The moths, for the light"]
+];
+var deckbound_roguelike_default = defineTemplate({
+  id: "game-deckbound-roguelike",
+  meta: {
+    name: "DECKBOUND \u2014 roguelike deckbuilder UI",
+    description: "A playable roguelike deckbuilder front end dressed as an arcane tarot: spire title, hero select with starting relics, a constellation map whose reachable floor is lit, a battle with a fanned hand that lifts on hover, energy costs, block, enemy intents that foretell the next move, a Fate meter for playing suits in order, rest site, shop, card rewards, working settings and key bindings, pause, defeat and a scored victory",
+    category: "game-ui",
+    tags: ["game", "game ui", "roguelike", "deckbuilder", "card game", "card battler", "tarot", "fantasy", "interactive", "variables", "keyboard", "menus", "present mode"],
+    platforms: ["desktop"],
+    formats: ["screen"],
+    useCases: ["launch", "pitch"],
+    created: "2026-09-30",
+    updated: "2026-09-30"
+  },
+  build() {
+    const k = gameKit("DECKBOUND: Spires of Sal");
+    k.brand({
+      void: "#0A0720",
+      deep: "#130D30",
+      panel: "#1B1442",
+      line: "#3B2F78",
+      grid: "#221A55",
+      card: "#1E1648",
+      gold: "#E9C46A",
+      goldDeep: "#9C7630",
+      onGold: "#1A1206",
+      onVoid: "#F5ECD6",
+      dim: "#B9ACDB",
+      onPanel: "#F5ECD6",
+      accent: "#C77DFF",
+      onAccent: "#14041F",
+      primary: "#7A5CFF",
+      onPrimary: "#07031A",
+      danger: "#FF5C72",
+      onDanger: "#1C0208",
+      block: "#6CC8FF",
+      onBlock: "#021320",
+      heal: "#7FE0A8",
+      energy: "#FFD76A",
+      onEnergy: "#1A1206",
+      sun: "#FFB84D",
+      moon: "#B8D4FF",
+      star: "#D59CFF",
+      chip: "#FFF1D0",
+      scrim: "#050313"
+    }, { title: "DECKBOUND", studio: "Gilt Moth", tagline: "Climb the spire. Shuffle your fate. Do not let it keep you." });
+    const heroName = gameVar(k, "Player", "name", "STRING", HEROES[0].name);
+    const hero = gameVar(k, "Player", "hero", "FLOAT", 0);
+    const hp = gameVar(k, "Player", "hp", "FLOAT", 62);
+    const hpTrail = gameVar(k, "Player", "hpTrail", "FLOAT", 62);
+    const maxHp = gameVar(k, "Player", "maxHp", "FLOAT", 62);
+    const block = gameVar(k, "Player", "block", "FLOAT", 0);
+    const energy = gameVar(k, "Player", "energy", "FLOAT", 3);
+    const maxEnergy = gameVar(k, "Player", "maxEnergy", "FLOAT", 3);
+    const gold = gameVar(k, "Player", "gold", "FLOAT", 99);
+    const strikeDmg = gameVar(k, "Player", "strikeDamage", "FLOAT", 6);
+    const kind = gameVar(k, "Enemy", "kind", "FLOAT", 0);
+    const eHp = gameVar(k, "Enemy", "hp", "FLOAT", ENEMIES[0].hp);
+    const eTrail = gameVar(k, "Enemy", "hpTrail", "FLOAT", ENEMIES[0].hp);
+    const eMax = gameVar(k, "Enemy", "maxHp", "FLOAT", ENEMIES[0].hp);
+    const eBlock = gameVar(k, "Enemy", "block", "FLOAT", 0);
+    const eStr = gameVar(k, "Enemy", "strength", "FLOAT", 0);
+    const eAtk = gameVar(k, "Enemy", "attack", "FLOAT", ENEMIES[0].atk);
+    const eGuard = gameVar(k, "Enemy", "guard", "FLOAT", ENEMIES[0].guard);
+    const eOff = gameVar(k, "Enemy", "intentOffset", "FLOAT", 0);
+    const turn = gameVar(k, "Battle", "turn", "FLOAT", 0);
+    const spent = [1, 2, 3, 4, 5].map((i) => gameVar(k, "Battle", `spent${i}`, "FLOAT", 0));
+    const flight = [1, 2, 3, 4, 5].map((i) => gameVar(k, "Battle", `flight${i}`, "FLOAT", 0));
+    const hit = gameVar(k, "Battle", "lastHit", "FLOAT", 0);
+    const hitT = gameVar(k, "Battle", "hitPop", "FLOAT", 1);
+    const hurtT = gameVar(k, "Battle", "hurtFlash", "FLOAT", 1);
+    const lungeT = gameVar(k, "Battle", "lunge", "FLOAT", 1);
+    const turnT = gameVar(k, "Battle", "turnBanner", "FLOAT", 1);
+    const fateT = gameVar(k, "Battle", "fateBanner", "FLOAT", 1);
+    const loss = gameVar(k, "Battle", "hpLoss", "FLOAT", 0);
+    const dealt = gameVar(k, "Battle", "dealt", "FLOAT", 0);
+    const drawPile = gameVar(k, "Battle", "drawPile", "FLOAT", 5);
+    const discard = gameVar(k, "Battle", "discardPile", "FLOAT", 0);
+    const fate = gameVar(k, "Fate", "charge", "FLOAT", 0);
+    const fateNext = gameVar(k, "Fate", "nextSuit", "FLOAT", 0);
+    const fateBonus = gameVar(k, "Fate", "bonus", "FLOAT", 12);
+    const floor = gameVar(k, "Run", "floor", "FLOAT", 0);
+    const col = gameVar(k, "Run", "column", "FLOAT", 0);
+    const picks = [0, 1, 2, 3, 4].map((i) => gameVar(k, "Run", `pick${i}`, "FLOAT", -1));
+    const played = gameVar(k, "Run", "cardsPlayed", "FLOAT", 0);
+    const damage = gameVar(k, "Run", "damageDealt", "FLOAT", 0);
+    const wins = gameVar(k, "Run", "victories", "FLOAT", 0);
+    const score = gameVar(k, "Run", "score", "FLOAT", 0);
+    const deckSize = gameVar(k, "Deck", "size", "FLOAT", 10);
+    const slot5 = gameVar(k, "Deck", "fifthCard", "FLOAT", 0);
+    const upgraded = gameVar(k, "Deck", "strikeUpgraded", "FLOAT", 0);
+    const orrery = gameVar(k, "Relics", "orrery", "FLOAT", 1);
+    const candle = gameVar(k, "Relics", "candle", "FLOAT", 0);
+    const aegis = gameVar(k, "Relics", "aegis", "FLOAT", 0);
+    const lantern = gameVar(k, "Relics", "lantern", "FLOAT", 0);
+    const mended = gameVar(k, "Relics", "mended", "FLOAT", 0);
+    const novaBought = gameVar(k, "Relics", "novaBought", "FLOAT", 0);
+    const menuFocus = gameVar(k, "UI", "menuFocus", "FLOAT", 0);
+    const heroFocus = gameVar(k, "UI", "heroFocus", "FLOAT", 0);
+    const setFocus = gameVar(k, "UI", "settingsFocus", "FLOAT", 0);
+    const pauseFocus = gameVar(k, "UI", "pauseFocus", "FLOAT", 0);
+    const restFocus = gameVar(k, "UI", "restFocus", "FLOAT", 0);
+    const eventFocus = gameVar(k, "UI", "eventFocus", "FLOAT", 0);
+    const shopFocus = gameVar(k, "UI", "shopFocus", "FLOAT", 0);
+    const endFocus = gameVar(k, "UI", "endFocus", "FLOAT", 0);
+    const rewardPick = gameVar(k, "UI", "rewardPick", "FLOAT", 0);
+    const relicHover = gameVar(k, "UI", "relicHover", "FLOAT", -1);
+    const inspect = gameVar(k, "UI", "inspect", "FLOAT", 0);
+    const rebind = gameVar(k, "UI", "rebinding", "STRING", "");
+    const master = gameVar(k, "Settings", "masterVolume", "FLOAT", 80);
+    const music = gameVar(k, "Settings", "musicVolume", "FLOAT", 60);
+    const animSpeed = gameVar(k, "Settings", "animationSpeed", "FLOAT", 100);
+    const showIntent = gameVar(k, "Settings", "intentNumbers", "FLOAT", 1);
+    const breathing = gameVar(k, "Settings", "breathingGlow", "FLOAT", 1);
+    const softFlash = gameVar(k, "Settings", "reducedFlashes", "FLOAT", 0);
+    const keyEnd = gameVar(k, "Keys", "endTurn", "STRING", "E");
+    const keyInspect = gameVar(k, "Keys", "inspect", "STRING", "I");
+    const CARDS = [
+      { key: "strike", name: "Starfall Strike", suit: 0, cost: 1, kind: "Attack", rules: "Deal 6 damage.", dmg: strikeDmg.n },
+      { key: "veil", name: "Moonward Veil", suit: 1, cost: 1, kind: "Skill", rules: "Gain 6 block.", block: 6 },
+      { key: "lance", name: "Comet Lance", suit: 2, cost: 2, kind: "Attack", rules: "Deal 12 damage.", dmg: "12" },
+      { key: "eclipse", name: "Eclipse Feint", suit: 1, cost: 0, kind: "Attack", rules: "Deal 3 damage. Gain 3 block.", dmg: "3", block: 3 },
+      { key: "sigil", name: "Sigil of Sal", suit: 2, cost: 3, kind: "Attack", rules: "Deal 10 damage. Gain 8 block.", dmg: "10", block: 8 },
+      { key: "nova", name: "Nova Bloom", suit: 0, cost: 2, kind: "Attack", rules: "Deal 16 damage.", dmg: "16" },
+      { key: "tide", name: "Tidelock", suit: 1, cost: 1, kind: "Skill", rules: "Gain 10 block.", block: 10 },
+      { key: "orbit", name: "Orbit of Knives", suit: 2, cost: 1, kind: "Attack", rules: "Deal 8 damage.", dmg: "8" }
+    ];
+    const serif = { fontFamily: "Source Serif 4" };
+    k.textStyle("Studio 28", { size: 28, fontWeight: 600, letterSpacing: 12, lineHeight: 36, textCase: "UPPER" });
+    k.textStyle("Boot 20", { size: 20, fontWeight: 500, letterSpacing: 3, lineHeight: 30 });
+    k.textStyle("Title 116", { size: 116, fontWeight: 700, letterSpacing: 2, lineHeight: 118, ...serif });
+    k.textStyle("Subtitle 40", { size: 40, fontWeight: 400, fontStyle: "italic", letterSpacing: 1, lineHeight: 48, ...serif });
+    k.textStyle("Tagline 26", { size: 26, fontWeight: 400, lineHeight: 36 });
+    k.textStyle("Prompt 22", { size: 22, fontWeight: 600, letterSpacing: 10, lineHeight: 30, textCase: "UPPER" });
+    k.textStyle("Menu 40", { size: 40, fontWeight: 600, lineHeight: 48, ...serif });
+    k.textStyle("Hint 20", { size: 20, fontWeight: 500, letterSpacing: 1, lineHeight: 28 });
+    k.textStyle("Heading 64", { size: 64, fontWeight: 700, lineHeight: 72, ...serif });
+    k.textStyle("Eyebrow 18", { size: 18, fontWeight: 700, letterSpacing: 6, lineHeight: 24, textCase: "UPPER" });
+    k.textStyle("Body 24", { size: 24, fontWeight: 400, lineHeight: 34 });
+    k.textStyle("Quote 26", { size: 26, fontWeight: 400, fontStyle: "italic", lineHeight: 36, ...serif });
+    k.textStyle("Label 26", { size: 26, fontWeight: 500, lineHeight: 34 });
+    k.textStyle("Value 26", { size: 26, fontWeight: 700, lineHeight: 34 });
+    k.textStyle("Cap 22", { size: 22, fontWeight: 700, letterSpacing: 2, lineHeight: 28, textAlign: "CENTER" });
+    k.textStyle("Small 18", { size: 18, fontWeight: 600, letterSpacing: 2, lineHeight: 24, textCase: "UPPER" });
+    k.textStyle("Card name 20", { size: 20, fontWeight: 700, lineHeight: 24, textAlign: "CENTER", ...serif });
+    k.textStyle("Card type 16", { size: 16, fontWeight: 700, letterSpacing: 3, lineHeight: 20, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Card rules 18", { size: 18, fontWeight: 500, lineHeight: 24, textAlign: "CENTER" });
+    k.textStyle("Cost 26", { size: 26, fontWeight: 800, lineHeight: 30, textAlign: "CENTER" });
+    k.textStyle("Bar name 26", { size: 26, fontWeight: 700, letterSpacing: 2, lineHeight: 32, ...serif });
+    k.textStyle("Stat 22", { size: 22, fontWeight: 800, lineHeight: 28 });
+    k.textStyle("Orb 44", { size: 44, fontWeight: 800, lineHeight: 50, textAlign: "CENTER" });
+    k.textStyle("Damage 84", { size: 84, fontWeight: 900, fontStyle: "italic", lineHeight: 90, textAlign: "CENTER" });
+    k.textStyle("Enemy 34", { size: 34, fontWeight: 700, lineHeight: 40, textAlign: "CENTER", ...serif });
+    k.textStyle("Intent 30", { size: 30, fontWeight: 800, lineHeight: 36 });
+    k.textStyle("Banner 56", { size: 56, fontWeight: 700, fontStyle: "italic", lineHeight: 64, textAlign: "CENTER", ...serif });
+    k.textStyle("Hero 40", { size: 40, fontWeight: 700, letterSpacing: 2, lineHeight: 46, textAlign: "CENTER", ...serif });
+    k.textStyle("Node 18", { size: 18, fontWeight: 700, letterSpacing: 3, lineHeight: 24, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Stamp 44", { size: 44, fontWeight: 900, letterSpacing: 8, lineHeight: 50, textAlign: "CENTER" });
+    k.textStyle("Stat 72", { size: 72, fontWeight: 800, lineHeight: 80 });
+    k.textStyle("Score 120", { size: 120, fontWeight: 800, lineHeight: 124, textAlign: "CENTER" });
+    k.textStyle("Credit role 20", { size: 20, fontWeight: 600, letterSpacing: 5, lineHeight: 28, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Credit name 36", { size: 36, fontWeight: 600, lineHeight: 44, textAlign: "CENTER", ...serif });
+    const showWhen = (id, expr) => k.bindExpression(id, "visible", expr);
+    const ghost = (id, v) => showWhen(id, `${v.n} < 1`);
+    const spinAbout = (id, cx, cy, rate) => {
+      const b = k.node(id);
+      k.patch(id, { anchorX: (cx - b.x) / b.width, anchorY: (cy - b.y) / b.height });
+      spin(k, id, rate);
+    };
+    const ellipsePts = (cx, cy, rx, ry, a0 = 0, a1 = Math.PI * 2, steps = 64) => {
+      const out = [];
+      for (let i = 0; i <= steps; i++) {
+        const a = a0 + (a1 - a0) * i / steps;
+        out.push([cx + Math.cos(a) * rx, cy + Math.sin(a) * ry]);
+      }
+      return out;
+    };
+    const ring = (parent, cx, cy, r, color, w, name = "Ring", opacity) => poly(k, parent, arcPoints(cx, cy, r, 0, Math.PI * 2, 72), color, { name, stroke: w, closed: true, opacity });
+    const starfield = (parent, pts, role = "onVoid", name = "Twinkle") => pts.forEach(([x, y, s], i) => {
+      const st = k.star(parent, s, role, { name, absolute: { x, y } });
+      drift(k, st, "opacity", 0.35, 0.3 + i % 5 * 0.13, i * 0.7);
+    });
+    const scatter = (n, x0, y0, w, h, seed, s0 = 6, s1 = 14) => {
+      let r = seed;
+      const rnd = () => {
+        r = (r * 9301 + 49297) % 233280;
+        return r / 233280;
+      };
+      return Array.from({ length: n }, () => [Math.round(x0 + rnd() * w), Math.round(y0 + rnd() * h), Math.round(s0 + rnd() * (s1 - s0))]);
+    };
+    const sky = (id, seed, wash = 0.82) => {
+      shaderLayer(k, id, "Starfield", {}, { opacity: 0.55, name: "Night sky" });
+      k.rect(id, W, H, k.tint("void", wash), { name: "Wash", absolute: { x: 0, y: 0 } });
+      k.rect(id, W, H, [k.gradient({ from: "primary", to: "void", kind: "RADIAL", fromOpacity: 0.22, toOpacity: 0, handles: [{ x: 0.5, y: 0.35 }, { x: 1.1, y: 0.35 }, { x: 0.5, y: 1.2 }] })], { name: "Glow", absolute: { x: 0, y: 0 } });
+      starfield(id, scatter(18, 40, 40, W - 80, H - 80, seed), "gold");
+    };
+    const hintBar = (id, text) => {
+      const b = box(k, id, 0, H - 60, W, 60, { name: "Hint bar", fill: k.tint("scrim", 0.88), direction: "HORIZONTAL", align: "CENTER", padding: { top: 0, right: 64, bottom: 0, left: 64 } });
+      k.text(b, text, { style: "Hint 20", color: "dim", autoWidth: true, name: "Hints" });
+    };
+    const foil = (parent, x, y, w, h, name = "Foil frame") => {
+      const f = box(k, parent, x, y, w, h, { name, radius: 16, stroke: { color: "gold", width: 2 }, effects: [glow(k, "gold", 18, 0.35)] });
+      k.rect(f, w - 20, h - 20, [], { name: "Inner rule", radius: 10, stroke: { color: "goldDeep", width: 1 }, absolute: { x: 10, y: 10 } });
+      for (const [cx, cy] of [[0, 0], [w, 0], [0, h], [w, h]]) poly(k, f, [[cx, cy - 12], [cx + 12, cy], [cx, cy + 12], [cx - 12, cy]], "gold", { name: "Corner" });
+      return f;
+    };
+    const suitMark = (parent, suit, cx, cy, r, name = "Suit mark") => {
+      const role = SUIT_ROLE[suit];
+      if (suit === 0) {
+        const g = box(k, parent, cx - r * 1.6, cy - r * 1.6, r * 3.2, r * 3.2, { name });
+        const c = r * 1.6;
+        k.ellipse(g, r * 1.2, role, { name: "Sun disc", absolute: { x: c - r * 0.6, y: c - r * 0.6 }, effects: [glow(k, "sun", r * 0.8, 0.7)] });
+        for (let i = 0; i < 8; i++) {
+          const a = i * Math.PI / 4;
+          poly(k, g, [[c + Math.cos(a) * r * 0.9, c + Math.sin(a) * r * 0.9], [c + Math.cos(a) * r * 1.5, c + Math.sin(a) * r * 1.5]], role, { name: "Ray", stroke: Math.max(2, r / 8) });
+        }
+        return g;
+      }
+      if (suit === 1) {
+        const pts = [...arcPoints(cx, cy, r, Math.PI * 0.3, Math.PI * 1.7, 32), ...arcPoints(cx + r * 0.42, cy - r * 0.08, r * 0.8, Math.PI * 1.62, Math.PI * 0.38, 32)];
+        return poly(k, parent, pts, role, { name, effects: [glow(k, "moon", r * 0.8, 0.6)] });
+      }
+      const s = k.star(parent, r * 2.2, role, { name, absolute: { x: cx - r * 1.1, y: cy - r * 1.1 } });
+      return s;
+    };
+    const cardArt = (parent, d) => {
+      const art = box(k, parent, 18, 66, 184, 116, { name: "Art", fill: "deep", radius: 8, clip: true, stroke: { color: "goldDeep", width: 1 } });
+      k.rect(art, 184, 116, [k.gradient({ from: SUIT_ROLE[d.suit], to: "deep", kind: "RADIAL", fromOpacity: 0.28, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Art glow", absolute: { x: 0, y: 0 } });
+      poly(k, art, ellipsePts(92, 58, 80, 26), "line", { name: "Orbit", stroke: 1.5, closed: true });
+      for (const [x, y, s] of [[20, 14, 8], [160, 20, 10], [28, 92, 6], [150, 90, 7], [110, 12, 5]]) k.star(art, s, "onVoid", { name: "Speck", absolute: { x, y }, opacity: 0.8 });
+      const role = SUIT_ROLE[d.suit];
+      switch (d.key) {
+        case "strike":
+          suitMark(art, 0, 70, 50, 16);
+          poly(k, art, [[120, 18], [150, 36], [96, 100], [88, 96]], "gold", { name: "Falling star" });
+          poly(k, art, [[150, 36], [176, 8]], "gold", { name: "Tail", stroke: 2 });
+          break;
+        case "veil":
+          suitMark(art, 1, 92, 58, 26);
+          arc(k, art, 92, 58, 42, Math.PI * 0.9, Math.PI * 2.1, "block", 3, { name: "Veil arc" });
+          break;
+        case "lance":
+          suitMark(art, 2, 46, 70, 14);
+          poly(k, art, [[30, 104], [168, 16], [172, 22], [36, 108]], "star", { name: "Lance", effects: [glow(k, "star", 10, 0.7)] });
+          break;
+        case "eclipse":
+          k.ellipse(art, 64, "moon", { name: "Moon disc", absolute: { x: 50, y: 26 }, effects: [glow(k, "moon", 16, 0.6)] });
+          k.ellipse(art, 60, "deep", { name: "Shadow disc", absolute: { x: 70, y: 26 } });
+          break;
+        case "sigil":
+          poly(k, art, [[92, 12], [132, 82], [52, 82]], "star", { name: "Sigil up", stroke: 2.5, closed: true });
+          poly(k, art, [[92, 104], [132, 34], [52, 34]], "star", { name: "Sigil down", stroke: 2.5, closed: true });
+          k.ellipse(art, 18, "gold", { name: "Sigil eye", absolute: { x: 83, y: 49 }, effects: [glow(k, "gold", 12)] });
+          break;
+        case "nova":
+          suitMark(art, 0, 92, 58, 22);
+          ring(art, 92, 58, 48, "sun", 2, "Shockwave");
+          break;
+        case "tide":
+          for (let i = 0; i < 3; i++) poly(k, art, Array.from({ length: 13 }, (_, j) => [14 + j * 13, 70 + i * 14 + (j % 2 ? -6 : 6)]), "moon", { name: "Wave", stroke: 2.5 });
+          suitMark(art, 1, 92, 34, 16);
+          break;
+        case "orbit":
+          ring(art, 92, 58, 36, "star", 2, "Knife orbit");
+          for (let i = 0; i < 4; i++) {
+            const a = i * Math.PI / 2 + 0.4, x = 92 + Math.cos(a) * 36, y = 58 + Math.sin(a) * 36;
+            poly(k, art, [[x, y - 9], [x + 4, y], [x, y + 9], [x - 4, y]], "onVoid", { name: "Knife" });
+          }
+          suitMark(art, 2, 92, 58, 10);
+          break;
+      }
+      void role;
+      return art;
+    };
+    const cardSet = (d) => {
+      k.variantSet(d.name, "State", ["Idle", "Hover", "Fly"], { width: 232, height: 380, description: `${d.name}: ${SUITS[d.suit]} ${d.kind.toLowerCase()}, cost ${d.cost}. ${d.rules} Hover lifts it; Fly sends it up out of the hand.` }, (state, id) => {
+        const lift = state === "Hover";
+        const body = box(k, id, 6, lift ? 8 : 50, 220, 310, { name: "Card body", fill: "card", radius: 14, stroke: { color: "gold", width: 3 }, effects: [glow(k, "gold", lift ? 40 : 14, lift ? 0.85 : 0.35)] });
+        k.rect(body, 204, 294, [], { name: "Inner border", radius: 9, stroke: { color: "goldDeep", width: 1.5 }, absolute: { x: 8, y: 8 } });
+        k.rect(body, 220, 310, [k.gradient({ from: SUIT_ROLE[d.suit], to: "card", angle: 90, fromOpacity: 0.16, toOpacity: 0 })], { name: "Foil wash", radius: 14, absolute: { x: 0, y: 0 } });
+        for (const [cx, cy] of [[110, 8], [110, 302]]) poly(k, body, [[cx - 10, cy], [cx, cy - 6], [cx + 10, cy], [cx, cy + 6]], "gold", { name: "Filigree" });
+        const plate = box(k, body, 26, 18, 168, 40, { name: "Name plate", fill: "panel", radius: 6, stroke: { color: "goldDeep", width: 1 } });
+        const nm = label(k, plate, d.name, "Card name 20", "onPanel", 0, 8, { w: 168, align: "CENTER", name: "Card name" });
+        if (d.key === "strike") k.bindExpression(nm, "characters", `${upgraded.n} == 1 ? "Starfall Strike+" : "Starfall Strike"`);
+        cardArt(body, d);
+        label(k, body, `${SUITS[d.suit]} \xB7 ${d.kind}`, "Card type 16", SUIT_ROLE[d.suit], 0, 192, { w: 220, align: "CENTER", name: "Card type" });
+        const rules = label(k, body, d.rules, "Card rules 18", "onPanel", 18, 220, { w: 184, align: "CENTER", name: "Card rules" });
+        if (d.key === "strike") k.bindExpression(rules, "characters", `"Deal " + ${strikeDmg.n} + " damage."`);
+        suitMark(body, d.suit, 110, 288, 7, "Suit pip");
+        k.ellipse(body, 50, "gold", { name: "Gem", stroke: { color: "goldDeep", width: 3 }, absolute: { x: -14, y: -14 }, effects: [glow(k, "gold", 14, 0.6)] });
+        const red = k.ellipse(body, 50, "danger", { name: "Gem red", stroke: { color: "onDanger", width: 3 }, absolute: { x: -14, y: -14 }, effects: [glow(k, "danger", 16, 0.7)] });
+        showWhen(red, `${energy.n} < ${d.cost}`);
+        label(k, body, String(d.cost), "Cost 26", "onGold", -14, -4, { w: 50, align: "CENTER", name: "Cost" });
+        if (state === "Fly") {
+          keys(k, body, "translateY", [{ t: 0, v: 0, ease: { kind: "ease", name: "cubic-in" } }, { t: 560, v: -520 }]);
+          keys(k, body, "opacity", [{ t: 0, v: 1, ease: { kind: "hold" } }, { t: 200, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: 560, v: 0 }]);
+          keys(k, body, "rotation", [{ t: 0, v: 0, ease: { kind: "ease", name: "cubic-in" } }, { t: 560, v: -14 }]);
+          keys(k, body, "scaleX", [{ t: 0, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: 560, v: 0.7 }]);
+          keys(k, body, "scaleY", [{ t: 0, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: 560, v: 0.7 }]);
+        }
+      }, (s) => s === "Fly" ? { timeline: { duration: 600 } } : {});
+      k.changeTo(`${d.name}/Idle`, "ON_HOVER", `${d.name}/Hover`, 160);
+    };
+    CARDS.forEach(cardSet);
+    k.variantSet(
+      "Gilt button",
+      "State",
+      ["Idle", "Hover", "Pressed"],
+      { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", padding: { top: 16, right: 34, bottom: 16, left: 34 }, radius: 10, props: { Label: "Back" }, description: "A gold-edged button: hover gilds it, pressing flashes it pale." },
+      (state, id) => {
+        k.propText(id, "Label", { style: "Cap 22", color: state === "Idle" ? "onPanel" : "onGold", autoWidth: true });
+      },
+      (state) => ({ fill: state === "Idle" ? k.tint("panel", 0.95) : state === "Hover" ? "gold" : "chip", stroke: { color: "gold", width: 2, align: "INSIDE" }, effects: state === "Idle" ? [] : [glow(k, "gold", 24, 0.7)] })
+    );
+    k.changeTo("Gilt button/Idle", "ON_HOVER", "Gilt button/Hover", 120);
+    k.changeTo("Gilt button/Hover", "ON_PRESS", "Gilt button/Pressed", 60);
+    toggleComponent(k, { track: "line", on: "goldDeep", knob: "onVoid", stateStyle: "Small 18", ink: "onVoid" });
+    k.variantSet("Shop stamp", "State", ["Idle", "Sold", "Refused"], { width: 360, height: 500, description: "Over a shop item: Sold stamps it when you buy, Refused shakes when you cannot afford it." }, (state, id) => {
+      k.rect(id, 360, 500, k.tint("void", 0.01), { name: "Hit area", radius: 16, absolute: { x: 0, y: 0 } });
+      if (state === "Sold") {
+        const st = box(k, id, 60, 190, 240, 84, { name: "Stamp", radius: 10, fill: "scrim", stroke: { color: "danger", width: 4 }, align: "CENTER", justify: "CENTER" });
+        k.text(st, "SOLD", { style: "Stamp 44", color: "danger", autoWidth: true, name: "Stamp word" });
+        k.patch(st, { rotation: -10 });
+        keys(k, st, "scaleX", [{ t: 0, v: 1.8, ease: { kind: "ease", name: "back-out", param: 1.6 } }, { t: 320, v: 1 }]);
+        keys(k, st, "scaleY", [{ t: 0, v: 1.8, ease: { kind: "ease", name: "back-out", param: 1.6 } }, { t: 320, v: 1 }]);
+        keys(k, st, "opacity", [{ t: 0, v: 0, ease: { kind: "ease", name: "cubic-out" } }, { t: 160, v: 1 }]);
+      }
+      if (state === "Refused") {
+        const st = box(k, id, 30, 206, 300, 56, { name: "Refusal", radius: 8, fill: "danger", align: "CENTER", justify: "CENTER" });
+        k.text(st, "Not enough gold", { style: "Cap 22", color: "onDanger", autoWidth: true, name: "Refusal words" });
+        keys(k, st, "translateX", [{ t: 0, v: -18, ease: { kind: "linear" } }, { t: 70, v: 16 }, { t: 140, v: -12 }, { t: 210, v: 8 }, { t: 280, v: 0 }]);
+        keys(k, st, "opacity", [{ t: 0, v: 1, ease: { kind: "hold" } }, { t: 800, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: 1100, v: 0 }]);
+      }
+    }, (s) => s === "Idle" ? {} : { timeline: { duration: s === "Sold" ? 400 : 1150 } });
+    oneShot(k, "Boot sigil", { width: 220, height: 220, state: "Draw", duration: 1800, description: "The studio sigil draws itself: two triangles, then the ring." }, (state, id) => {
+      const up = poly(k, id, [[110, 14], [196, 164], [24, 164]], "gold", { name: "Triangle up", stroke: 3, closed: true, effects: [glow(k, "gold", 12, 0.6)] });
+      const dn = poly(k, id, [[110, 206], [196, 56], [24, 56]], "gold", { name: "Triangle down", stroke: 3, closed: true, effects: [glow(k, "gold", 12, 0.6)] });
+      const rg = ring(id, 110, 110, 104, "goldDeep", 2, "Sigil ring");
+      if (state === "Draw") {
+        keys(k, up, "opacity", [{ t: 0, v: 0, ease: { kind: "ease", name: "cubic-out" } }, { t: 500, v: 1 }]);
+        keys(k, up, "rotation", [{ t: 0, v: -60, ease: { kind: "ease", name: "expo-out" } }, { t: 900, v: 0 }]);
+        keys(k, dn, "opacity", [{ t: 300, v: 0, ease: { kind: "ease", name: "cubic-out" } }, { t: 800, v: 1 }]);
+        keys(k, dn, "rotation", [{ t: 300, v: 60, ease: { kind: "ease", name: "expo-out" } }, { t: 1200, v: 0 }]);
+        keys(k, rg, "scaleX", [{ t: 700, v: 0.4, ease: { kind: "ease", name: "back-out", param: 1.4 } }, { t: 1500, v: 1 }]);
+        keys(k, rg, "scaleY", [{ t: 700, v: 0.4, ease: { kind: "ease", name: "back-out", param: 1.4 } }, { t: 1500, v: 1 }]);
+        keys(k, rg, "opacity", [{ t: 700, v: 0, ease: { kind: "linear" } }, { t: 1100, v: 1 }]);
+      }
+    });
+    const relicIcon = (parent, i, x, y, s = 56) => {
+      const g = box(k, parent, x, y, s, s, { name: `${RELICS[i].name} icon` });
+      k.ellipse(g, s, "panel", { name: "Relic disc", stroke: { color: "gold", width: 2 }, absolute: { x: 0, y: 0 }, effects: [glow(k, "gold", 10, 0.4)] });
+      const c = s / 2, u = s / 56;
+      if (i === 0) {
+        poly(k, g, ellipsePts(c, c, 18 * u, 8 * u), "gold", { name: "Orrery ring", stroke: 2, closed: true });
+        k.ellipse(g, 12 * u, "sun", { name: "Orrery sun", absolute: { x: c - 6 * u, y: c - 6 * u } });
+        k.ellipse(g, 7 * u, "moon", { name: "Orrery moon", absolute: { x: c + 14 * u, y: c - 6 * u } });
+      }
+      if (i === 1) {
+        k.rect(g, 12 * u, 20 * u, "chip", { name: "Candle wax", radius: 2, absolute: { x: c - 6 * u, y: c - 2 * u } });
+        poly(k, g, [[c, c - 18 * u], [c + 5 * u, c - 8 * u], [c, c - 3 * u], [c - 5 * u, c - 8 * u]], "sun", { name: "Candle flame", effects: [glow(k, "sun", 8)] });
+      }
+      if (i === 2) {
+        poly(k, g, [[c - 14 * u, c - 14 * u], [c + 14 * u, c - 14 * u], [c + 12 * u, c + 4 * u], [c, c + 16 * u], [c - 12 * u, c + 4 * u]], "block", { name: "Aegis", stroke: 2.5, closed: true });
+        poly(k, g, [[c + 2 * u, c - 14 * u], [c - 3 * u, c - 2 * u], [c + 3 * u, c + 4 * u], [c - 1 * u, c + 14 * u]], "block", { name: "Aegis crack", stroke: 1.5 });
+      }
+      if (i === 3) {
+        ring(g, c, c, 16 * u, "gold", 2, "Compass ring");
+        poly(k, g, [[c, c - 14 * u], [c + 5 * u, c], [c, c + 14 * u], [c - 5 * u, c]], "danger", { name: "Compass needle" });
+      }
+      if (i === 4) {
+        poly(k, g, [[c - 8 * u, c - 12 * u], [c + 8 * u, c - 12 * u], [c + 12 * u, c], [c + 8 * u, c + 14 * u], [c - 8 * u, c + 14 * u], [c - 12 * u, c]], "star", { name: "Lantern", stroke: 2, closed: true });
+        k.ellipse(g, 10 * u, "sun", { name: "Lantern light", absolute: { x: c - 5 * u, y: c - 3 * u }, effects: [glow(k, "sun", 10)] });
+      }
+      return g;
+    };
+    const heroArt = (parent, i, x, y, name = "Hero art") => {
+      const g = box(k, parent, x, y, 360, 400, { name });
+      k.ellipse(g, 300, [k.gradient({ from: i === 0 ? "star" : i === 1 ? "heal" : "block", to: "void", kind: "RADIAL", fromOpacity: 0.3, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Aura", absolute: { x: 30, y: 30 } });
+      const robe = [[180, 150], [250, 200], [290, 390], [70, 390], [110, 200]];
+      poly(k, g, robe, k.tint("panel", 0.95), { name: "Robe" });
+      poly(k, g, robe, "gold", { name: "Robe line", stroke: 2.5, closed: true });
+      poly(k, g, [[180, 200], [180, 390]], "goldDeep", { name: "Robe seam", stroke: 1.5 });
+      if (i === 0) {
+        poly(k, g, [[140, 150], [180, 70], [220, 150], [200, 170], [160, 170]], k.tint("deep", 1), { name: "Hood" });
+        poly(k, g, [[140, 150], [180, 70], [220, 150], [200, 170], [160, 170]], "gold", { name: "Hood line", stroke: 2.5, closed: true });
+        const halo = box(k, g, 60, 10, 240, 240, { name: "Astrolabe" });
+        ring(halo, 120, 120, 110, "star", 1.5, "Astrolabe ring");
+        for (let j = 0; j < 12; j++) {
+          const a = j * Math.PI / 6;
+          poly(k, halo, [[120 + Math.cos(a) * 102, 120 + Math.sin(a) * 102], [120 + Math.cos(a) * 118, 120 + Math.sin(a) * 118]], "star", { name: "Tick", stroke: 2 });
+        }
+        k.star(halo, 22, "gold", { name: "Astrolabe star", absolute: { x: 212, y: 110 } });
+        spinAbout(halo, 180, 130, 10);
+        poly(k, g, [[300, 110], [300, 390]], "gold", { name: "Staff", stroke: 3 });
+        k.star(g, 34, "sun", { name: "Staff star", absolute: { x: 283, y: 88 } });
+      } else if (i === 1) {
+        poly(k, g, [[120, 150], [240, 150], [196, 120], [212, 30], [168, 110], [150, 120]], k.tint("deep", 1), { name: "Hat" });
+        poly(k, g, [[100, 152], [260, 152], [196, 120], [212, 30], [168, 110], [150, 120]], "heal", { name: "Hat line", stroke: 2.5, closed: true });
+        k.ellipse(g, 44, "deep", { name: "Face", stroke: { color: "gold", width: 2 }, absolute: { x: 158, y: 150 } });
+        for (let j = 0; j < 5; j++) poly(k, g, [[60 + j * 18, 330 - j * 30], [74 + j * 18, 318 - j * 30], [66 + j * 18, 340 - j * 30]], "heal", { name: "Leaf", opacity: 0.9 });
+        k.rect(g, 16, 40, "chip", { name: "Candle", radius: 3, absolute: { x: 270, y: 250 } });
+        const fl = poly(k, g, [[278, 214], [288, 238], [278, 250], [268, 238]], "sun", { name: "Candle flame", effects: [glow(k, "sun", 16)] });
+        drift(k, fl, "scaleY", 0.08, 2.2);
+      } else {
+        poly(k, g, [[140, 70], [220, 70], [230, 150], [210, 180], [150, 180], [130, 150]], k.tint("deep", 1), { name: "Helm" });
+        poly(k, g, [[140, 70], [220, 70], [230, 150], [210, 180], [150, 180], [130, 150]], "block", { name: "Helm line", stroke: 2.5, closed: true });
+        poly(k, g, [[150, 118], [210, 118]], "gold", { name: "Visor", stroke: 4, effects: [glow(k, "gold", 10)] });
+        poly(k, g, [[40, 210], [140, 210], [136, 300], [90, 350], [44, 300]], k.tint("deep", 1), { name: "Shield" });
+        poly(k, g, [[40, 210], [140, 210], [136, 300], [90, 350], [44, 300]], "block", { name: "Shield line", stroke: 2.5, closed: true });
+        poly(k, g, [[96, 212], [84, 250], [100, 280], [88, 346]], "block", { name: "Shield crack", stroke: 2 });
+        poly(k, g, [[290, 60], [300, 60], [300, 330], [290, 330]], "onVoid", { name: "Sword", opacity: 0.9 });
+        poly(k, g, [[270, 330], [320, 330]], "gold", { name: "Crossguard", stroke: 5 });
+      }
+      starfield(g, [[30, 40, 10], [320, 30, 8], [20, 250, 7], [336, 220, 9]], "gold", "Hero star");
+      return g;
+    };
+    const enemyArt = (parent, i) => {
+      const g = box(k, parent, 0, 0, 420, 440, { name: ENEMIES[i].name });
+      k.ellipse(g, 360, [k.gradient({ from: i === 2 ? "danger" : "star", to: "void", kind: "RADIAL", fromOpacity: 0.35, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Menace", absolute: { x: 30, y: 30 } });
+      if (i === 0) {
+        const cloak = [[210, 60], [290, 150], [320, 420], [100, 420], [130, 150]];
+        poly(k, g, cloak, "deep", { name: "Cloak" });
+        poly(k, g, cloak, "star", { name: "Cloak line", stroke: 2.5, closed: true });
+        poly(k, g, [[160, 150], [210, 100], [260, 150], [240, 200], [180, 200]], "scrim", { name: "Hood void" });
+        for (const x of [188, 220]) k.ellipse(g, 12, "danger", { name: "Eye", absolute: { x, y: 148 }, effects: [glow(k, "danger", 14)] });
+        k.rect(g, 14, 50, "chip", { name: "Candle", radius: 3, absolute: { x: 316, y: 250 } });
+        const fl = poly(k, g, [[323, 210], [333, 236], [323, 250], [313, 236]], "sun", { name: "Flame", effects: [glow(k, "sun", 18)] });
+        drift(k, fl, "scaleY", 0.1, 2.6);
+        for (let j = 0; j < 4; j++) poly(k, g, [[140 + j * 45, 260], [150 + j * 45, 420]], "line", { name: "Fold", stroke: 1.5 });
+      } else if (i === 1) {
+        const halo = box(k, g, 90, 0, 240, 240, { name: "Halo" });
+        ring(halo, 120, 120, 110, "gold", 3, "Halo ring");
+        for (let j = 0; j < 16; j++) {
+          const a = j * Math.PI / 8;
+          poly(k, halo, [[120 + Math.cos(a) * 110, 120 + Math.sin(a) * 110], [120 + Math.cos(a) * 128, 120 + Math.sin(a) * 128]], "gold", { name: "Spike", stroke: 2 });
+        }
+        spinAbout(halo, 210, 120, -12);
+        const armour = [[210, 170], [300, 220], [290, 330], [250, 420], [170, 420], [130, 330], [120, 220]];
+        poly(k, g, armour, k.tint("goldDeep", 0.55), { name: "Armour" });
+        poly(k, g, armour, "gold", { name: "Armour line", stroke: 3, closed: true });
+        poly(k, g, [[210, 80], [250, 120], [210, 175], [170, 120]], "deep", { name: "Helm" });
+        poly(k, g, [[210, 80], [250, 120], [210, 175], [170, 120]], "gold", { name: "Helm line", stroke: 3, closed: true });
+        poly(k, g, [[186, 124], [234, 124]], "danger", { name: "Slit", stroke: 4, effects: [glow(k, "danger", 12)] });
+        poly(k, g, [[360, 40], [370, 40], [370, 420], [360, 420]], "gold", { name: "Spear" });
+        poly(k, g, [[365, 10], [385, 50], [365, 70], [345, 50]], "gold", { name: "Spearhead", effects: [glow(k, "gold", 14)] });
+      } else {
+        const rings = box(k, g, 30, 40, 360, 360, { name: "Eye rings" });
+        ring(rings, 180, 180, 170, "danger", 2, "Outer ring");
+        for (let j = 0; j < 24; j++) {
+          const a = j * Math.PI / 12;
+          poly(k, rings, [[180 + Math.cos(a) * 158, 180 + Math.sin(a) * 158], [180 + Math.cos(a) * 170, 180 + Math.sin(a) * 170]], "gold", { name: "Rune tick", stroke: 2 });
+        }
+        spinAbout(rings, 210, 220, 8);
+        const inner = box(k, g, 80, 90, 260, 260, { name: "Inner rings" });
+        arc(k, inner, 130, 130, 124, 0, Math.PI * 1.4, "gold", 3, { name: "Inner arc" });
+        arc(k, inner, 130, 130, 110, Math.PI, Math.PI * 2.3, "star", 2, { name: "Inner arc 2" });
+        spinAbout(inner, 210, 220, -20);
+        const lid = [...arcPoints(210, 330, 170, Math.PI * 1.25, Math.PI * 1.75, 24), ...arcPoints(210, 110, 170, Math.PI * 0.25, Math.PI * 0.75, 24)];
+        poly(k, g, lid, "chip", { name: "Eye white" });
+        poly(k, g, lid, "gold", { name: "Eye line", stroke: 3, closed: true, effects: [glow(k, "gold", 16)] });
+        const iris = box(k, g, 160, 170, 100, 100, { name: "Iris" });
+        k.ellipse(iris, 100, "danger", { name: "Iris disc", absolute: { x: 0, y: 0 }, effects: [glow(k, "danger", 20)] });
+        k.ellipse(iris, 44, "scrim", { name: "Pupil", absolute: { x: 28, y: 28 } });
+        drift(k, iris, "translateX", 14, 0.3);
+        for (let j = 0; j < 5; j++) k.star(g, 28 - Math.abs(j - 2) * 5, "gold", { name: "Crown star", absolute: { x: 130 + j * 36, y: 18 + Math.abs(j - 2) * 14 } });
+      }
+      return g;
+    };
+    const nodeEnters = [];
+    const boot = screen(k, "Boot", { ground: "void", first: true, duration: 3600 });
+    const title = screen(k, "Title", { ground: "void" });
+    const main = screen(k, "Main menu", { ground: "void" });
+    const heroes = screen(k, "Choose a hero", { ground: "deep" });
+    const map = screen(k, "Map", { ground: "void" });
+    const battle = screen(k, "Battle", { ground: "void" });
+    const reward = screen(k, "Reward", { ground: "deep" });
+    const rest = screen(k, "Rest site", { ground: "void" });
+    const shop = screen(k, "Shop", { ground: "deep" });
+    const mystery = screen(k, "Mystery", { ground: "void" });
+    const compendium = screen(k, "Compendium", { ground: "deep" });
+    const settings = screen(k, "Settings", { ground: "deep" });
+    const credits = screen(k, "Credits", { ground: "void", duration: 12e3 });
+    const pause = screen(k, "Pause", { ground: "void", fills: k.tint("scrim", 0.8) });
+    const defeat = screen(k, "Defeat", { ground: "void" });
+    const victory = screen(k, "Victory", { ground: "deep" });
+    k.flowStart(boot, "Play DECKBOUND");
+    const E = energy.n;
+    const intent = `((${turn.n} + ${eOff.n}) % 3)`;
+    const nextIntent = `((${turn.n} + 1 + ${eOff.n}) % 3)`;
+    const pop = (v, ms, easing = "EASE_OUT") => [set(v.id, { value: 0 }), set(v.id, { value: 1, glide: ms, easing })];
+    const resetRun = [
+      set(floor.id, { value: 0 }),
+      set(col.id, { value: 0 }),
+      ...picks.map((p) => set(p.id, { value: -1 })),
+      set(gold.id, { value: 99 }),
+      set(deckSize.id, { value: 10 }),
+      set(slot5.id, { value: 0 }),
+      set(strikeDmg.id, { value: 6 }),
+      set(upgraded.id, { value: 0 }),
+      set(lantern.id, { value: 0 }),
+      set(mended.id, { value: 0 }),
+      set(novaBought.id, { value: 0 }),
+      set(played.id, { value: 0 }),
+      set(damage.id, { value: 0 }),
+      set(wins.id, { value: 0 }),
+      set(score.id, { value: 0 }),
+      set(hp.id, { expression: maxHp.n }),
+      set(hpTrail.id, { expression: maxHp.n })
+    ];
+    const chooseHero = (i) => [
+      set(hero.id, { value: i }),
+      set(heroName.id, { value: HEROES[i].name }),
+      set(maxHp.id, { value: HEROES[i].hp }),
+      set(orrery.id, { value: i === 0 ? 1 : 0 }),
+      set(candle.id, { value: i === 1 ? 1 : 0 }),
+      set(aegis.id, { value: i === 2 ? 1 : 0 }),
+      set(fateBonus.id, { value: i === 0 ? 12 : 8 }),
+      ...resetRun
+    ];
+    const battleInit = (kd) => {
+      const e = ENEMIES[kd];
+      return [
+        set(kind.id, { value: kd }),
+        set(eMax.id, { value: e.hp }),
+        set(eHp.id, { value: e.hp }),
+        set(eTrail.id, { value: e.hp }),
+        set(eBlock.id, { value: 0 }),
+        set(eStr.id, { value: 0 }),
+        set(eAtk.id, { value: e.atk }),
+        set(eGuard.id, { value: e.guard }),
+        set(eOff.id, { value: e.offset }),
+        set(turn.id, { value: 0 }),
+        set(energy.id, { expression: maxEnergy.n }),
+        set(block.id, { expression: `${aegis.n} * 8` }),
+        ...spent.map((s) => set(s.id, { value: 0 })),
+        ...flight.map((f) => set(f.id, { value: 0 })),
+        set(fate.id, { value: 0 }),
+        set(fateNext.id, { value: 0 }),
+        set(drawPile.id, { expression: `${deckSize.n} - 5` }),
+        set(discard.id, { value: 0 }),
+        set(inspect.id, { value: 0 }),
+        set(hitT.id, { value: 1 }),
+        set(hurtT.id, { value: 1 }),
+        set(lungeT.id, { value: 1 }),
+        set(fateT.id, { value: 1 }),
+        set(turnT.id, { value: 1 })
+      ];
+    };
+    const hurtEnemy = (d) => [
+      set(dealt.id, { expression: `max(0, (${d}) - ${eBlock.n})` }),
+      set(eBlock.id, { expression: `max(0, ${eBlock.n} - (${d}))`, glide: 220 }),
+      set(eHp.id, { expression: `max(0, ${eHp.n} - ${dealt.n})`, glide: 300 }),
+      set(eTrail.id, { expression: eHp.n, glide: 1300, easing: "EASE_IN_OUT" }),
+      set(hit.id, { expression: dealt.n }),
+      set(damage.id, { expression: `${damage.n} + ${dealt.n}` }),
+      ...pop(hitT, 900)
+    ];
+    const scoreExpr = `${floor.n} * 150 + ${played.n} * 12 + ${damage.n} + ${hp.n} * 5 + ${gold.n}`;
+    const winCheck = when([
+      { if: `${eHp.n} <= 0 && ${kind.n} == 2`, then: [set(wins.id, { expression: `${wins.n} + 1` }), set(score.id, { value: 0 }), set(score.id, { expression: scoreExpr, glide: 1800 }), go(victory, "DISSOLVE", { duration: 900 })] },
+      { if: `${eHp.n} <= 0`, then: [
+        set(gold.id, { expression: `${gold.n} + (${kind.n} == 1 ? 40 : 25) + 10`, glide: 900 }),
+        set(wins.id, { expression: `${wins.n} + 1` }),
+        set(hp.id, { expression: `min(${maxHp.n}, ${hp.n} + ${candle.n} * 6)` }),
+        set(hpTrail.id, { expression: hp.n }),
+        set(rewardPick.id, { value: 0 }),
+        go(reward, "DISSOLVE", { duration: 700 })
+      ] }
+    ]);
+    const fateStep = (suit) => [
+      when([
+        { if: `${fateNext.n} == ${suit}`, then: [set(fate.id, { expression: `${fate.n} + 1`, glide: 300 }), set(fateNext.id, { expression: `(${fateNext.n} + 1) % 3` })] },
+        { if: `${suit} == 0`, then: [set(fate.id, { value: 1, glide: 300 }), set(fateNext.id, { value: 1 })] },
+        { then: [set(fate.id, { value: 0, glide: 300 }), set(fateNext.id, { value: 0 })] }
+      ]),
+      when([{ if: `${fate.n} >= 3`, then: [...pop(fateT, 1500), set(fate.id, { value: 0, glide: 900 }), set(fateNext.id, { value: 0 }), ...hurtEnemy(fateBonus.n)] }])
+    ];
+    const affordable = (s, d) => `${spent[s].n} == 0 && ${E} >= ${d.cost}`;
+    const play = (s, d) => [
+      set(energy.id, { expression: `${E} - ${d.cost}`, glide: 220 }),
+      set(spent[s].id, { value: 1 }),
+      ...pop(flight[s], 520, "EASE_IN"),
+      set(discard.id, { expression: `${discard.n} + 1` }),
+      set(played.id, { expression: `${played.n} + 1` }),
+      ...d.block ? [set(block.id, { expression: `${block.n} + ${d.block}`, glide: 280 })] : [],
+      ...d.dmg ? hurtEnemy(d.dmg) : [],
+      ...fateStep(d.suit),
+      winCheck
+    ];
+    const endTurn = [
+      set(eBlock.id, { value: 0, glide: 200 }),
+      when([
+        { if: `${intent} == 0`, then: [
+          set(loss.id, { expression: `max(0, ${eAtk.n} + ${eStr.n} - ${block.n})` }),
+          set(block.id, { expression: `max(0, ${block.n} - ${eAtk.n} - ${eStr.n})`, glide: 240 }),
+          set(hp.id, { expression: `max(0, ${hp.n} - ${loss.n})`, glide: 280 }),
+          set(hpTrail.id, { expression: hp.n, glide: 1300, easing: "EASE_IN_OUT" }),
+          ...pop(lungeT, 650),
+          when([{ if: `${loss.n} > 0`, then: pop(hurtT, 700) }])
+        ] },
+        { if: `${intent} == 1`, then: [set(eBlock.id, { expression: eGuard.n, glide: 300 })] },
+        { then: [set(eStr.id, { expression: `${eStr.n} + 4`, glide: 400 })] }
+      ]),
+      set(block.id, { expression: `${lantern.n} * 3`, glide: 300 }),
+      set(discard.id, { expression: `${discard.n} + 5 - (${spent.map((s) => s.n).join(" + ")})` }),
+      when([{ if: `${drawPile.n} >= 5`, then: [set(drawPile.id, { expression: `${drawPile.n} - 5` })] }, { then: [set(drawPile.id, { expression: `${drawPile.n} + ${discard.n} - 5` }), set(discard.id, { value: 0 })] }]),
+      set(turn.id, { expression: `${turn.n} + 1` }),
+      set(energy.id, { expression: maxEnergy.n, glide: 400 }),
+      ...spent.map((s) => set(s.id, { value: 0 })),
+      ...flight.map((f) => set(f.id, { value: 0, glide: 460, easing: "EASE_OUT" })),
+      ...pop(turnT, 1300, "LINEAR"),
+      when([{ if: `${hp.n} <= 0`, then: [set(score.id, { expression: scoreExpr }), go(defeat, "DISSOLVE", { duration: 1e3 })] }])
+    ];
+    const toMap = () => when([{ then: [set(relicHover.id, { value: -1 }), go(map, "DISSOLVE", { duration: 500 })] }]);
+    const runBar = (id) => {
+      const b = box(k, id, 0, 0, W, 76, { name: "Run bar", fill: k.tint("scrim", 0.9) });
+      k.rect(b, W, 2, "goldDeep", { name: "Bar rule", absolute: { x: 0, y: 74 } });
+      readout(k, b, heroName.n, HEROES[0].name, "Bar name 26", "gold", 40, 22, { w: 300, name: "Hero name" });
+      poly(k, b, [[352, 30], [362, 24], [370, 30], [378, 24], [388, 30], [370, 52]], "danger", { name: "HP mark" });
+      readout(k, b, `round(${hp.n}) + " / " + ${maxHp.n}`, "62 / 62", "Value 26", "onVoid", 400, 20, { w: 140, name: "HP value" });
+      k.ellipse(b, 26, "gold", { name: "Coin", stroke: { color: "goldDeep", width: 2 }, absolute: { x: 560, y: 25 } });
+      readout(k, b, `round(${gold.n}) + ""`, "99", "Value 26", "gold", 596, 20, { w: 90, name: "Gold value" });
+      k.rect(b, 20, 28, "card", { name: "Deck mark", radius: 3, stroke: { color: "gold", width: 1.5 }, absolute: { x: 700, y: 24 } });
+      readout(k, b, `${deckSize.n} + " cards"`, "10 cards", "Value 26", "onVoid", 732, 20, { w: 140, name: "Deck value" });
+      readout(k, b, `"FLOOR " + min(${floor.n}, 5) + " OF 5"`, "FLOOR 0 OF 5", "Small 18", "dim", 890, 28, { w: 200, name: "Floor value" });
+      const relics = box(k, b, 1110, 10, 220, 56, { name: "Relic bar" });
+      const slot = (x, which, hover, visible) => {
+        const s = box(k, relics, x, 0, 56, 56, { name: "Relic slot" });
+        which.forEach((i) => {
+          const ic = relicIcon(s, i, 0, 0);
+          if (which.length > 1) showWhen(ic, `${hero.n} == ${i}`);
+          else if (visible) showWhen(ic, visible);
+        });
+        k.on(s, set(relicHover.id, { expression: visible ? `${visible} ? ${hover} : -1` : hover }), { trigger: "MOUSE_ENTER" });
+        k.on(s, set(relicHover.id, { value: -1 }), { trigger: "MOUSE_LEAVE" });
+      };
+      slot(0, [0, 1, 2], hero.n);
+      slot(70, [3], "3");
+      slot(140, [4], "4", `${lantern.n} == 1`);
+      RELICS.forEach((r, i) => {
+        const x = i <= 2 ? 1110 : i === 3 ? 1180 : 1250;
+        const tip = box(k, id, x - 10, 86, 400, 112, { name: "Relic tooltip", fill: "panel", radius: 10, stroke: { color: "gold", width: 2 }, padding: 18, gap: 6, effects: [glow(k, "scrim", 30, 0.9)] });
+        k.text(tip, r.name, { style: "Bar name 26", color: "gold", name: "Relic name" });
+        k.text(tip, r.text, { style: "Hint 20", color: "onPanel", name: "Relic text" });
+        showWhen(tip, i === 4 ? `${relicHover.n} == 4 && ${lantern.n} == 1` : `${relicHover.n} == ${i}`);
+      });
+      return b;
+    };
+    {
+      sky(boot, 3, 0.9);
+      k.logo(boot, 110, 110, { absolute: { x: 905, y: 250 } });
+      k.instance(boot, "Boot sigil/Draw", {}, { name: "Sigil", absolute: { x: 850, y: 195 } });
+      label(k, boot, "{{brand.studio}}", "Studio 28", "gold", 0, 470, { w: W, align: "CENTER", name: "Studio" });
+      const log = box(k, boot, 610, 560, 700, 200, { name: "Boot log", gap: 4, align: "CENTER" });
+      ["Shuffling the fates", "Gilding the card frames", "Charting the spire of Sal", "Lighting the moth-glass lanterns"].forEach((t) => k.text(log, t, { style: "Boot 20", color: "dim", align: "CENTER", name: "Log line" }));
+      const lb = box(k, boot, 660, 800, 600, 6, { name: "Shuffle bar", fill: "line", radius: 3, clip: true });
+      const fillBar = k.rect(lb, 600, 6, [k.gradient({ from: "goldDeep", to: "gold", angle: 0 })], { name: "Shuffle fill", radius: 3, absolute: { x: 0, y: 0 } });
+      keys(k, fillBar, "width", [{ t: 200, v: 6, ease: { kind: "ease", name: "cubic-in-out" } }, { t: 3e3, v: 600 }]);
+      k.cues(boot, [
+        { layer: "{{brand.logo}}", preset: "fade-in", at: 900 },
+        { layer: "Studio", preset: "rise-in", at: 1100 },
+        { layer: "Log line", preset: "fade-in", at: 1300, stagger: { delay: 380 } }
+      ]);
+      k.link(boot, title, "DISSOLVE", { trigger: "AFTER_TIMEOUT", delay: 3400, duration: 700 });
+      k.link(boot, title, "DISSOLVE", { key: "*", duration: 400 });
+      k.link(boot, title, "DISSOLVE", { duration: 400 });
+    }
+    {
+      sky(title, 11, 0.7);
+      const sp = box(k, title, 1080, 40, 760, 1e3, { name: "Spire" });
+      const cx = 380;
+      const outline = [[cx, 60], [cx + 24, 240], [cx + 14, 240], [cx + 42, 430], [cx + 28, 430], [cx + 66, 640], [cx + 48, 640], [cx + 110, 900], [cx - 110, 900], [cx - 48, 640], [cx - 66, 640], [cx - 28, 430], [cx - 42, 430], [cx - 14, 240], [cx - 24, 240]];
+      poly(k, sp, outline, [k.gradient({ from: "panel", to: "void", angle: 90, fromOpacity: 1, toOpacity: 1 })], { name: "Spire body" });
+      poly(k, sp, outline, "gold", { name: "Spire line", stroke: 2.5, closed: true, effects: [glow(k, "gold", 14, 0.5)] });
+      for (const y of [240, 430, 640]) poly(k, sp, [[cx - 70, y], [cx + 70, y]], "goldDeep", { name: "Ledge", stroke: 1.5 });
+      for (const [y, w] of [[300, 10], [360, 10], [500, 14], [570, 14], [700, 18], [780, 18]]) {
+        const win = k.rect(sp, w, w * 2, "sun", { name: "Window", radius: w / 2, absolute: { x: cx - w / 2, y } });
+        drift(k, win, "opacity", 0.3, 0.4 + y / 3e3, y);
+      }
+      poly(k, sp, [[cx - 300, 900], [cx + 300, 900]], "goldDeep", { name: "Horizon", stroke: 2 });
+      poly(k, sp, ellipsePts(cx, 905, 280, 24), "line", { name: "Base ring", stroke: 1.5, closed: true });
+      k.star(sp, 46, "gold", { name: "Crown star", absolute: { x: cx - 23, y: 24 } });
+      [[150, 30, "gold"], [230, -18, "star"], [320, 12, "moon"]].forEach(([r, rate, role], i) => {
+        const R = r;
+        ring(sp, cx, 200, R, "line", 1.5, "Orbit ring", 0.9);
+        const carrier = box(k, sp, cx - R, 200 - R, R * 2, R * 2, { name: "Orbit" });
+        k.star(carrier, 22 - i * 3, role, { name: "Orbiting star", absolute: { x: -11 + i * 2, y: R - 11 } });
+        k.ellipse(carrier, 10, role, { name: "Orbiting moon", absolute: { x: R * 2 - 5, y: R - 5 } });
+        spinAbout(carrier, cx, 200, rate);
+      });
+      const lock = box(k, title, 140, 250, 940, 600, { name: "Title lockup", gap: 18 });
+      k.text(lock, "{{brand.title}}", { style: "Title 116", color: "onVoid", name: "Title" });
+      k.text(lock, "Spires of Sal", { style: "Subtitle 40", color: "gold", name: "Subtitle" });
+      k.rect(lock, 180, 3, "gold", { name: "Rule" });
+      k.text(lock, "{{brand.tagline}}", { style: "Tagline 26", color: "dim", name: "Tagline", width: 760 });
+      const prompt = label(k, title, "Press any key", "Prompt 22", "gold", 140, 900, { name: "Prompt" });
+      drift(k, prompt, "opacity", 0.3, 0.6);
+      label(k, title, "\xA9 2026 {{brand.studio}}  \xB7  early access 0.7", "Small 18", "dim", 140, 990, { name: "Legal" });
+      k.cues(title, [{ layer: "Title lockup", preset: "blur-in", at: 0 }, { layer: "Spire", preset: "rise-in", at: 200 }, { layer: "Prompt", preset: "fade-in", at: 1e3 }]);
+      k.link(title, main, "DISSOLVE", { key: "*", duration: 400 });
+      k.link(title, main, "DISSOLVE", { duration: 400 });
+    }
+    {
+      sky(main, 21);
+      label(k, main, "{{brand.title}}", "Heading 64", "onVoid", 120, 110, { w: 820, name: "Wordmark" });
+      label(k, main, "Spires of Sal", "Quote 26", "gold", 124, 190, { name: "Wordmark subtitle" });
+      menu(k, main, [
+        { label: "Continue run", hint: "Resume the climb", actions: [toMap()] },
+        { label: "New run", hint: "Choose a hero", actions: [go(heroes, "PUSH_FROM_RIGHT", { duration: 400 })] },
+        { label: "Compendium", hint: "Cards and relics", actions: [go(compendium, "PUSH_FROM_RIGHT", { duration: 400 })] },
+        { label: "Settings", actions: [go(settings, "PUSH_FROM_RIGHT", { duration: 400 })] },
+        { label: "Credits", actions: [go(credits, "DISSOLVE", { duration: 500 })] },
+        { label: "Quit to title", actions: [go(title, "DISSOLVE", { duration: 500 })] }
+      ], { focus: menuFocus, x: 100, y: 300, width: 900, pitch: 88, style: "Menu 40", color: "onVoid", plate: [k.gradient({ from: "goldDeep", to: "goldDeep", angle: 0, fromOpacity: 0.55, toOpacity: 0 })], marker: { color: "gold" }, hintStyle: "Hint 20" });
+      const spread = box(k, main, 1150, 230, 680, 520, { name: "Tarot spread" });
+      [-1, 0, 1].forEach((i) => {
+        const c = box(k, spread, 230 + i * 190, 60 + Math.abs(i) * 30, 220, 330, { name: "Card back", fill: "card", radius: 14, stroke: { color: "gold", width: 3 }, effects: [glow(k, "gold", 20, 0.4)] });
+        k.rect(c, 196, 306, [], { name: "Back rule", radius: 9, stroke: { color: "goldDeep", width: 1.5 }, absolute: { x: 12, y: 12 } });
+        ring(c, 110, 165, 64, "gold", 2, "Back ring");
+        poly(k, c, [[110, 95], [170, 200], [50, 200]], "goldDeep", { name: "Back sigil", stroke: 2, closed: true });
+        poly(k, c, [[110, 235], [170, 130], [50, 130]], "goldDeep", { name: "Back sigil", stroke: 2, closed: true });
+        k.star(c, 30, SUIT_ROLE[i + 1], { name: "Back star", absolute: { x: 95, y: 150 } });
+        k.patch(c, { rotation: -i * 8 });
+        drift(k, c, "translateY", 8, 0.25 + (i + 1) * 0.07, i);
+      });
+      const card = box(k, main, 1180, 800, 620, 100, { name: "Run card", fill: k.tint("panel", 0.92), radius: 12, stroke: { color: "goldDeep", width: 1.5 }, padding: 20, gap: 6 });
+      k.text(card, "Current run", { style: "Eyebrow 18", color: "gold", name: "Run label" });
+      readout(k, card, `${heroName.n} + "  \xB7  floor " + min(${floor.n}, 5) + " of 5  \xB7  " + round(${gold.n}) + " gold"`, "ORIEL VANE  \xB7  floor 0 of 5  \xB7  99 gold", "Hint 20", "onPanel", 20, 50, { w: 580, name: "Run summary" });
+      hintBar(main, "\u2191 \u2193  SELECT      ENTER  CONFIRM      MOUSE  POINT AND CLICK");
+      k.cues(main, [{ layer: "Menu item", preset: "slide-in", at: 0, params: { direction: "left" }, stagger: { delay: 70 } }, { layer: "Card back", preset: "rise-in", at: 250, stagger: { delay: 120 } }]);
+    }
+    {
+      sky(heroes, 31, 0.86);
+      label(k, heroes, "Choose who climbs", "Heading 64", "onVoid", 0, 60, { w: W, align: "CENTER", name: "Screen title" });
+      label(k, heroes, "Each hero carries a relic of their own, and the Pilgrim's Compass.", "Body 24", "dim", 0, 142, { w: W, align: "CENTER", name: "Screen lead" });
+      HEROES.forEach((h, i) => {
+        const x = 150 + i * 560;
+        const panel = box(k, heroes, x, 200, 500, 760, { name: "Hero card", fill: k.tint("card", 0.96), radius: 18 });
+        const lit = k.rect(panel, 500, 760, [], { name: "Chosen glow", radius: 18, stroke: { color: "gold", width: 4 }, absolute: { x: 0, y: 0 }, effects: [glow(k, "gold", 40, 0.8)] });
+        k.bindExpression(lit, "opacity", `max(0, 1 - abs(${heroFocus.n} - ${i}))`);
+        foil(panel, 0, 0, 500, 760);
+        heroArt(panel, i, 70, 30);
+        label(k, panel, h.name, "Hero 40", "onPanel", 0, 440, { w: 500, align: "CENTER", name: "Hero name" });
+        label(k, panel, h.epithet, "Quote 26", "gold", 0, 488, { w: 500, align: "CENTER", name: "Epithet" });
+        label(k, panel, `${h.hp} HP  \xB7  3 energy`, "Small 18", "dim", 0, 532, { w: 500, align: "CENTER", name: "Hero stats" });
+        const rl = box(k, panel, 30, 572, 440, 150, { name: "Starting relic", fill: "panel", radius: 10, stroke: { color: "goldDeep", width: 1 } });
+        relicIcon(rl, i, 18, 20, 60);
+        label(k, rl, h.relic, "Bar name 26", "gold", 94, 18, { w: 330, name: "Relic name" });
+        label(k, rl, h.relicText, "Hint 20", "onPanel", 94, 56, { w: 330, name: "Relic text" });
+        k.on(panel, set(heroFocus.id, { value: i, glide: 160 }), { trigger: "MOUSE_ENTER" });
+        onAll(k, panel, [...chooseHero(i), go(map, "ZOOM_THROUGH", { duration: 600 })]);
+      });
+      const f = heroFocus.n;
+      k.on(heroes, set(heroFocus.id, { expression: `(${f} + 1) % 3`, glide: 160 }), { key: "ArrowRight" });
+      k.on(heroes, set(heroFocus.id, { expression: `(${f} + 1) % 3`, glide: 160 }), { key: "d" });
+      k.on(heroes, set(heroFocus.id, { expression: `(${f} + 2) % 3`, glide: 160 }), { key: "ArrowLeft" });
+      k.on(heroes, set(heroFocus.id, { expression: `(${f} + 2) % 3`, glide: 160 }), { key: "a" });
+      for (const key of ["Enter", " "]) k.on(heroes, when(HEROES.map((_, i) => ({ if: `${f} == ${i}`, then: [...chooseHero(i), go(map, "ZOOM_THROUGH", { duration: 600 })] }))), { key });
+      k.on(heroes, back(), { key: "Escape" });
+      hintBar(heroes, "LEFT RIGHT  CHOOSE      ENTER  BEGIN THE CLIMB      ESC  BACK");
+      k.cues(heroes, [{ layer: "Hero card", preset: "rise-in", at: 0, stagger: { delay: 120 } }]);
+    }
+    {
+      sky(map, 41, 0.86);
+      const cons = box(k, map, 0, 0, W, H, { name: "Constellation" });
+      const pull = k.ellipse(cons, 560, [k.gradient({ from: "danger", to: "void", kind: "RADIAL", fromOpacity: 0.5, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Boss pull", absolute: { x: 680, y: FY(4) - 280 } });
+      k.bindExpression(pull, "opacity", `0.25 + 0.18 * min(${floor.n}, 4)`);
+      drift(k, pull, "scaleX", 0.04, 0.3);
+      const nodeX = (f, c) => MAP[f].length === 1 ? 960 : MAP_X[c];
+      const gate = [960, 1e3];
+      const edge = (a, b, litIf, walkedIf) => {
+        poly(k, cons, [a, b], "line", { name: "Path", stroke: 2 });
+        const lit = poly(k, cons, [a, b], "gold", { name: "Lit path", stroke: 3, effects: [glow(k, "gold", 14, 0.9)] });
+        showWhen(lit, litIf);
+        drift(k, lit, "opacity", 0.25, 0.9);
+        const walked = poly(k, cons, [a, b], "goldDeep", { name: "Walked path", stroke: 4 });
+        showWhen(walked, walkedIf);
+      };
+      MAP[0].forEach((_, c) => edge(gate, [nodeX(0, c), FY(0)], `${floor.n} == 0`, `${floor.n} > 0 && ${picks[0].n} == ${c}`));
+      for (let f = 0; f < 4; f++) MAP[f].forEach((_, c) => MAP[f + 1].forEach((__, c2) => edge([nodeX(f, c), FY(f)], [nodeX(f + 1, c2), FY(f + 1)], `${floor.n} == ${f + 1} && ${picks[f].n} == ${c}`, `${floor.n} > ${f + 1} && ${picks[f].n} == ${c} && ${picks[f + 1].n} == ${c2}`)));
+      k.star(cons, 30, "gold", { name: "Gate star", absolute: { x: gate[0] - 15, y: gate[1] - 15 } });
+      label(k, cons, "The Pilgrim Gate", "Node 18", "dim", gate[0] - 150, gate[1] + 20, { w: 300, align: "CENTER", name: "Gate name" });
+      const icon = (g, t, s) => {
+        const c = s / 2;
+        if (t === "fight") {
+          poly(k, g, [[c - 16, c - 16], [c + 16, c + 16]], "onVoid", { name: "Blade", stroke: 4 });
+          poly(k, g, [[c + 16, c - 16], [c - 16, c + 16]], "onVoid", { name: "Blade", stroke: 4 });
+        }
+        if (t === "elite") {
+          poly(k, g, [[c, c - 22], [c + 20, c], [c, c + 22], [c - 20, c]], "danger", { name: "Elite mark" });
+          k.star(g, 20, "onVoid", { name: "Elite star", absolute: { x: c - 10, y: c - 10 } });
+        }
+        if (t === "rest") {
+          poly(k, g, [[c, c - 22], [c + 13, c], [c + 8, c + 16], [c - 8, c + 16], [c - 13, c]], "sun", { name: "Flame", effects: [glow(k, "sun", 12)] });
+        }
+        if (t === "shop") {
+          k.ellipse(g, 38, "gold", { name: "Coin", stroke: { color: "goldDeep", width: 3 }, absolute: { x: c - 19, y: c - 19 } });
+          ring(g, c, c, 11, "goldDeep", 2, "Coin rim");
+        }
+        if (t === "mystery") {
+          poly(k, g, [...arcPoints(c, c - 8, 12, Math.PI, Math.PI * 2.25, 20), [c, c + 8]], "star", { name: "Mystery mark", stroke: 5, effects: [glow(k, "star", 10)] });
+          k.ellipse(g, 8, "star", { name: "Mystery dot", absolute: { x: c - 4, y: c + 14 } });
+        }
+        if (t === "boss") {
+          const lid = [...arcPoints(c, c + 34, 44, Math.PI * 1.22, Math.PI * 1.78, 16), ...arcPoints(c, c - 34, 44, Math.PI * 0.22, Math.PI * 0.78, 16)];
+          poly(k, g, lid, "chip", { name: "Boss eye" });
+          k.ellipse(g, 22, "danger", { name: "Boss iris", absolute: { x: c - 11, y: c - 11 } });
+        }
+      };
+      MAP.forEach((row, f) => row.forEach((t, c) => {
+        const s = t === "boss" ? 130 : 92;
+        const x = nodeX(f, c), y = FY(f);
+        const node = box(k, cons, x - s / 2, y - s / 2, s, s, { name: "Map node" });
+        const halo = k.ellipse(node, s + 40, [k.gradient({ from: "gold", to: "void", kind: "RADIAL", fromOpacity: 0.55, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Reachable glow", absolute: { x: -20, y: -20 } });
+        showWhen(halo, `${floor.n} == ${f}`);
+        drift(k, halo, "opacity", 0.3, 0.8, f);
+        const disc = box(k, node, 0, 0, s, s, { name: "Node disc", radius: s / 2, fill: t === "boss" ? "deep" : "panel", stroke: { color: t === "boss" ? "danger" : "gold", width: 3 } });
+        icon(disc, t, s);
+        const visited = `${floor.n} > ${f} && ${picks[f].n} == ${c}`;
+        k.bindExpression(disc, "opacity", `${floor.n} == ${f} ? 1 : (${visited}) ? 0.9 : 0.4`);
+        const done = k.ellipse(node, 20, "gold", { name: "Visited seal", stroke: { color: "onGold", width: 2 }, absolute: { x: s - 22, y: 2 } });
+        showWhen(done, visited);
+        const tag = box(k, cons, x - 70, y + s / 2 + 8, 140, 32, { name: "Node tag", fill: k.tint("scrim", 0.92), radius: 16, stroke: { color: f === 4 ? "danger" : "goldDeep", width: 1 }, align: "CENTER", justify: "CENTER" });
+        k.text(tag, NODE_INFO[t][0], { style: "Node 18", color: f === 4 ? "danger" : "onVoid", autoWidth: true, name: "Node name" });
+        const enter = [
+          set(picks[f].id, { value: c }),
+          set(floor.id, { value: f + 1 }),
+          set(col.id, { value: 0 }),
+          set(relicHover.id, { value: -1 }),
+          ...t === "fight" ? [...battleInit(0), go(battle, "ZOOM_THROUGH", { duration: 600 })] : t === "elite" ? [...battleInit(1), go(battle, "ZOOM_THROUGH", { duration: 600 })] : t === "boss" ? [...battleInit(2), go(battle, "ZOOM_THROUGH", { duration: 800 })] : t === "rest" ? [set(restFocus.id, { value: 0 }), go(rest, "DISSOLVE", { duration: 600 })] : t === "shop" ? [set(shopFocus.id, { value: 0 }), go(shop, "DISSOLVE", { duration: 600 })] : [set(eventFocus.id, { value: 0 }), go(mystery, "DISSOLVE", { duration: 600 })]
+        ];
+        k.on(node, when([{ if: `${floor.n} == ${f}`, then: [set(col.id, { value: c })] }]), { trigger: "MOUSE_ENTER" });
+        k.on(node, when([{ if: `${floor.n} == ${f}`, then: enter }]));
+        nodeEnters.push({ f, c, enter });
+      }));
+      const sel = k.ellipse(cons, 124, [], { name: "Chooser", stroke: { color: "gold", width: 3 }, absolute: { x: MAP_X[0] - 62, y: FY(0) - 62 }, effects: [glow(k, "gold", 16, 0.9)] });
+      k.bindExpression(sel, "x", `(${floor.n} >= 4 ? 960 : ${col.n} == 0 ? ${MAP_X[0]} : ${MAP_X[1]}) - 62`);
+      k.bindExpression(sel, "y", `${FY(0)} - 170 * min(${floor.n}, 4) - 62`);
+      showWhen(sel, `${floor.n} <= 4`);
+      drift(k, sel, "opacity", 0.25, 1.2);
+      const here = `(${floor.n} == 0 ? -1 : ${[1, 2, 3, 4, 5].map((f) => `${floor.n} == ${f} ? ${picks[f - 1].n}`).join(" : ")} : 0)`;
+      const you = box(k, cons, gate[0] - 20, gate[1] - 70, 40, 40, { name: "You are here" });
+      k.star(you, 40, "sun", { name: "Pilgrim star", absolute: { x: 0, y: 0 } });
+      k.bindExpression(you, "x", `(${floor.n} == 0 ? 960 : ${floor.n} >= 5 ? 960 : ${here} == 0 ? ${MAP_X[0]} : ${MAP_X[1]}) - 20`);
+      k.bindExpression(you, "y", `(${floor.n} == 0 ? ${gate[1]} : ${FY(0)} - 170 * (min(${floor.n}, 5) - 1)) - 96`);
+      drift(k, you, "translateY", 5, 0.8);
+      const legend = box(k, map, 60, 130, 420, 560, { name: "Floors", fill: k.tint("panel", 0.9), radius: 14, stroke: { color: "goldDeep", width: 1.5 }, padding: 28, gap: 14 });
+      k.text(legend, "The spire of Sal", { style: "Eyebrow 18", color: "gold", name: "Floors title" });
+      FLOOR_NAMES.map((n, i) => ({ n, i })).reverse().forEach(({ n, i }) => {
+        const r = k.stack(legend, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Floor row" });
+        k.text(r, String(i + 1), { style: "Value 26", color: i === 4 ? "danger" : "gold", autoWidth: true, name: "Floor number" });
+        k.text(r, n, { style: "Label 26", color: "onPanel", autoWidth: true, name: "Floor name" });
+      });
+      readout(k, legend, `${heroName.n} + " has climbed " + min(${floor.n}, 5) + " of 5"`, "ORIEL VANE has climbed 0 of 5", "Hint 20", "dim", 28, 480, { w: 364, name: "Climb line" });
+      const info = box(k, map, 1440, 130, 420, 330, { name: "Node info", fill: k.tint("panel", 0.9), radius: 14, stroke: { color: "goldDeep", width: 1.5 } });
+      label(k, info, "Next step", "Eyebrow 18", "gold", 28, 28, { name: "Info label" });
+      const pickText = (i) => MAP.flatMap((row, f) => row.map((t, c) => `${floor.n} == ${f}${row.length > 1 ? ` && ${col.n} == ${c}` : ""} ? "${NODE_INFO[t][i]}"`)).join(" : ") + ' : "' + (i === 0 ? "The top" : "You stand where the eye was.") + '"';
+      readout(k, info, pickText(0), "Fight", "Heading 64", "onPanel", 28, 60, { w: 364, name: "Info title" });
+      readout(k, info, pickText(1), NODE_INFO.fight[1], "Body 24", "onPanel", 28, 150, { w: 364, name: "Info text" });
+      readout(k, info, `"Floor " + min(${floor.n} + 1, 5) + "  \xB7  " + (${FLOOR_NAMES.map((n, i) => `${floor.n} == ${i} ? "${n}"`).join(" : ")} : "${FLOOR_NAMES[4]}")`, "Floor 1  \xB7  The Pilgrim Stair", "Small 18", "dim", 28, 280, { w: 364, name: "Info floor" });
+      for (const key of ["ArrowLeft", "a"]) k.on(map, set(col.id, { value: 0 }), { key });
+      for (const key of ["ArrowRight", "d"]) k.on(map, set(col.id, { value: 1 }), { key });
+      k.on(map, overlay(pause), { key: "Escape" });
+      hintBar(map, "LEFT RIGHT  CHOOSE A PATH      ENTER  TRAVEL      HOVER A RELIC  READ IT      ESC  PAUSE");
+      runBar(map);
+      k.cues(map, [{ layer: "Map node", preset: "pop-in", at: 0, stagger: { delay: 70 } }, { layer: "Floors", preset: "slide-in", at: 100, params: { direction: "left" } }, { layer: "Node info", preset: "slide-in", at: 100, params: { direction: "right" } }]);
+    }
+    const handPos = [0, 1, 2, 3, 4].map((i) => ({ x: 960 + (i - 2) * 198 - 116, y: 640 + [24, 6, 0, 6, 24][i], rot: (2 - i) * 5 }));
+    {
+      sky(battle, 51, 0.8);
+      const arena = box(k, battle, 0, 0, W, H, { name: "Arena" });
+      poly(k, arena, ellipsePts(960, 700, 900, 120), "line", { name: "Arena ring", stroke: 2, closed: true });
+      poly(k, arena, ellipsePts(960, 700, 640, 80), "grid", { name: "Arena ring inner", stroke: 2, closed: true });
+      poly(k, arena, [[200, 300], [420, 180], [700, 240], [900, 150], [1100, 230], [1360, 160]], "line", { name: "Far constellation", stroke: 1.5 });
+      starfield(arena, [[196, 294, 12], [414, 174, 14], [694, 234, 10], [894, 144, 16], [1094, 224, 12], [1354, 154, 14]], "star", "Far star");
+      const hurtShake = `(1 - ${hurtT.n}) * 16 * (floor(${hurtT.n} * 14) % 2 == 0 ? 1 : -1)`;
+      const you = box(k, battle, 70, 236, 360, 400, { name: "Player" });
+      HEROES.forEach((_, i) => {
+        const a = heroArt(you, i, 0, 0, `Player ${i}`);
+        showWhen(a, `${hero.n} == ${i}`);
+      });
+      k.bindExpression(you, "translateX", hurtShake);
+      const pv = box(k, battle, 40, 646, 420, 80, { name: "Player vitals" });
+      bar(k, pv, { x: 60, y: 10, w: 340, h: 24, value: hp.n, max: maxHp.n, back: "line", fill: [k.gradient({ from: "danger", to: "sun", angle: 0 })], chip: { expression: hpTrail.n, color: "chip" }, radius: 12, name: "Player HP bar" });
+      readout(k, pv, `round(${hp.n}) + " / " + ${maxHp.n}`, "62 / 62", "Stat 22", "onVoid", 60, 44, { w: 340, align: "CENTER", name: "Player HP" });
+      const shield = box(k, pv, 0, 0, 52, 60, { name: "Block badge" });
+      poly(k, shield, [[2, 4], [50, 4], [48, 36], [26, 58], [4, 36]], "block", { name: "Block shield", effects: [glow(k, "block", 14, 0.7)] });
+      readout(k, shield, `round(${block.n}) + ""`, "0", "Stat 22", "onBlock", 0, 12, { w: 52, align: "CENTER", name: "Block value" });
+      showWhen(shield, `${block.n} > 0`);
+      const foe = box(k, battle, 1460, 200, 420, 440, { name: "Enemy" });
+      k.bindExpression(foe, "translateX", `${lungeT.n} < 0.25 ? -560 * ${lungeT.n} : -186 * (1 - ${lungeT.n})`);
+      const struck = box(k, foe, 0, 0, 420, 440, { name: "Struck" });
+      k.bindExpression(struck, "translateX", `(1 - ${hitT.n}) * 20 * (floor(${hitT.n} * 16) % 2 == 0 ? 1 : -1)`);
+      ENEMIES.forEach((_, i) => {
+        const a = enemyArt(struck, i);
+        showWhen(a, `${kind.n} == ${i}`);
+      });
+      drift(k, struck, "translateY", 8, 0.35);
+      const ev = box(k, battle, 1460, 646, 420, 130, { name: "Enemy vitals" });
+      readout(k, ev, ENEMIES.map((e, i) => `${kind.n} == ${i} ? "${e.name}"`).join(" : ") + ' : ""', ENEMIES[0].name, "Enemy 34", "onVoid", 0, 0, { w: 420, align: "CENTER", name: "Enemy name" });
+      readout(k, ev, ENEMIES.map((e, i) => `${kind.n} == ${i} ? "${e.title}"`).join(" : ") + ' : ""', ENEMIES[0].title, "Small 18", "dim", 0, 44, { w: 420, align: "CENTER", name: "Enemy title" });
+      bar(k, ev, { x: 60, y: 76, w: 340, h: 24, value: eHp.n, max: eMax.n, back: "line", fill: [k.gradient({ from: "danger", to: "star", angle: 0 })], chip: { expression: eTrail.n, color: "chip" }, radius: 12, name: "Enemy HP bar" });
+      readout(k, ev, `round(${eHp.n}) + " / " + ${eMax.n}`, "32 / 32", "Stat 22", "onVoid", 60, 104, { w: 340, align: "CENTER", name: "Enemy HP" });
+      const eshield = box(k, ev, 0, 66, 52, 60, { name: "Enemy block badge" });
+      poly(k, eshield, [[2, 4], [50, 4], [48, 36], [26, 58], [4, 36]], "block", { name: "Enemy shield", effects: [glow(k, "block", 14, 0.7)] });
+      readout(k, eshield, `round(${eBlock.n}) + ""`, "0", "Stat 22", "onBlock", 0, 12, { w: 52, align: "CENTER", name: "Enemy block value" });
+      showWhen(eshield, `${eBlock.n} > 0`);
+      const it = box(k, battle, 1550, 110, 240, 76, { name: "Intent", fill: k.tint("scrim", 0.85), radius: 38, stroke: { color: "goldDeep", width: 1.5 } });
+      const atkIcon = box(k, it, 14, 10, 56, 56, { name: "Intent attack" });
+      poly(k, atkIcon, [[8, 48], [40, 8], [48, 8], [48, 16], [16, 52]], "danger", { name: "Intent blade", effects: [glow(k, "danger", 12)] });
+      poly(k, atkIcon, [[6, 34], [22, 50]], "danger", { name: "Intent guard", stroke: 4 });
+      showWhen(atkIcon, `${intent} == 0`);
+      const defIcon = box(k, it, 14, 10, 56, 56, { name: "Intent defend" });
+      poly(k, defIcon, [[6, 6], [50, 6], [48, 34], [28, 54], [8, 34]], "block", { name: "Intent shield", effects: [glow(k, "block", 12)] });
+      showWhen(defIcon, `${intent} == 1`);
+      const bufIcon = box(k, it, 14, 10, 56, 56, { name: "Intent ritual" });
+      k.star(bufIcon, 40, "star", { name: "Intent star", absolute: { x: 8, y: 12 } });
+      poly(k, bufIcon, [[28, 2], [36, 12], [20, 12]], "star", { name: "Intent arrow" });
+      showWhen(bufIcon, `${intent} == 2`);
+      const itWord = readout(k, it, `${intent} == 0 ? "Attack" : ${intent} == 1 ? "Guard" : "Ritual"`, "Attack", "Intent 30", "onVoid", 80, 18, { w: 110, name: "Intent word" });
+      void itWord;
+      const itNum = readout(k, it, `${intent} == 0 ? ${eAtk.n} + ${eStr.n} + "" : ${intent} == 1 ? ${eGuard.n} + "" : "+4"`, "11", "Intent 30", "gold", 176, 18, { w: 56, align: "RIGHT", name: "Intent number" });
+      showWhen(itNum, `${showIntent.n} == 1`);
+      drift(k, it, "translateY", 4, 0.9);
+      const fore = box(k, battle, 1530, 194, 280, 70, { name: "Foreshadow plate", fill: k.tint("scrim", 0.85), radius: 12 });
+      readout(k, fore, `"then  " + (${nextIntent} == 0 ? "Attack " + (${eAtk.n} + ${eStr.n}) : ${nextIntent} == 1 ? "Guard " + ${eGuard.n} : "Ritual +4")`, "then  Guard 8", "Small 18", "dim", 0, 10, { w: 280, align: "CENTER", name: "Foreshadow" });
+      readout(k, fore, `${eStr.n} > 0 ? "STRENGTH +" + ${eStr.n} : "NO STRENGTH YET"`, "NO STRENGTH YET", "Small 18", "star", 0, 38, { w: 280, align: "CENTER", name: "Enemy strength" });
+      const insp = box(k, battle, 960, 230, 460, 320, { name: "Inspect panel", fill: "panel", radius: 14, stroke: { color: "gold", width: 2 }, padding: 26, gap: 10 });
+      k.text(insp, "Inspecting", { style: "Eyebrow 18", color: "gold", name: "Inspect label" });
+      const inspName = k.text(insp, ENEMIES[0].name, { style: "Bar name 26", color: "onPanel", name: "Inspect name" });
+      k.bindExpression(inspName, "characters", ENEMIES.map((e, i) => `${kind.n} == ${i} ? "${e.name}"`).join(" : ") + ' : ""');
+      const inspLore = k.text(insp, ENEMIES[0].lore, { style: "Hint 20", color: "onPanel", name: "Inspect lore" });
+      k.bindExpression(inspLore, "characters", ENEMIES.map((e, i) => `${kind.n} == ${i} ? "${e.lore}"`).join(" : ") + ' : ""');
+      const cyc = k.text(insp, "Cycle: Attack, Guard, Ritual \u2014 then again.", { style: "Hint 20", color: "dim", name: "Inspect cycle" });
+      k.bindExpression(cyc, "characters", `"Cycle: Attack " + (${eAtk.n} + ${eStr.n}) + ", Guard " + ${eGuard.n} + ", Ritual +4 strength. Turn " + (${turn.n} + 1) + "."`);
+      showWhen(insp, `${inspect.n} == 1`);
+      const fm = box(k, battle, 700, 96, 520, 96, { name: "Fate meter", fill: k.tint("scrim", 0.8), radius: 16, stroke: { color: "goldDeep", width: 1.5 } });
+      label(k, fm, "Fate", "Eyebrow 18", "gold", 24, 18, { name: "Fate label" });
+      readout(k, fm, `"NEXT  " + (${fateNext.n} == 0 ? "SUN" : ${fateNext.n} == 1 ? "MOON" : "STAR")`, "NEXT  SUN", "Small 18", "dim", 24, 54, { w: 150, name: "Fate next" });
+      SUITS.forEach((_, j) => {
+        const cx = 244 + j * 104;
+        const pip = box(k, fm, cx - 36, 12, 72, 72, { name: "Fate pip" });
+        k.ellipse(pip, 72, "deep", { name: "Pip well", stroke: { color: "line", width: 2 }, absolute: { x: 0, y: 0 } });
+        const litG = k.ellipse(pip, 72, [k.gradient({ from: SUIT_ROLE[j], to: "deep", kind: "RADIAL", fromOpacity: 0.9, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Pip light", absolute: { x: 0, y: 0 } });
+        k.bindExpression(litG, "opacity", `clamp(${fate.n} - ${j}, 0, 1)`);
+        const mk = suitMark(pip, j, 36, 36, 13, "Pip mark");
+        k.bindExpression(mk, "opacity", `${fate.n} > ${j} + 0.5 ? 1 : 0.45`);
+        const nextRing = ring(pip, 36, 36, 34, "gold", 2.5, "Pip next");
+        showWhen(nextRing, `${fateNext.n} == ${j}`);
+        drift(k, nextRing, "opacity", 0.35, 1.4);
+        if (j < 2) poly(k, fm, [[cx + 42, 42], [cx + 54, 48], [cx + 42, 54]], "goldDeep", { name: "Fate chevron" });
+      });
+      const orb = box(k, battle, 70, 780, 160, 160, { name: "Energy orb" });
+      k.ellipse(orb, 160, [k.gradient({ from: "energy", to: "void", kind: "RADIAL", fromOpacity: 0.7, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Orb glow", absolute: { x: 0, y: 0 } });
+      const core = k.ellipse(orb, 112, "energy", { name: "Orb core", stroke: { color: "goldDeep", width: 4 }, absolute: { x: 24, y: 24 } });
+      k.bindExpression(core, "opacity", `${E} > 0 ? 1 : 0.62`);
+      const ringE = box(k, orb, 0, 0, 160, 160, { name: "Orb orbit" });
+      arc(k, ringE, 80, 80, 74, 0, Math.PI * 1.2, "gold", 2, { name: "Orb arc" });
+      k.star(ringE, 16, "gold", { name: "Orb star", absolute: { x: 146, y: 72 } });
+      spinAbout(ringE, 80, 80, 40);
+      readout(k, orb, `round(${E}) + "/" + ${maxEnergy.n}`, "3/3", "Orb 44", "onEnergy", 24, 55, { w: 112, align: "CENTER", name: "Energy value" });
+      label(k, battle, "Energy", "Eyebrow 18", "energy", 70, 948, { w: 160, align: "CENTER", name: "Energy label" });
+      const pile = (x, name, v, tint) => {
+        const p = box(k, battle, x, 850, 150, 150, { name });
+        for (let j = 2; j >= 0; j--) k.rect(p, 64, 90, "card", { name: "Pile card", radius: 8, stroke: { color: tint, width: 2 }, absolute: { x: 43 + j * 5, y: 4 + j * 4 } });
+        readout(k, p, `${v.n} + ""`, String(k.doc.variables[v.id].valuesByMode["Mode 1"]), "Orb 44", "onVoid", 0, 100, { w: 150, align: "CENTER", name: `${name} count` });
+        return p;
+      };
+      pile(270, "Draw pile", drawPile, "gold");
+      label(k, battle, "Draw", "Eyebrow 18", "gold", 270, 1004, { w: 150, align: "CENTER", name: "Draw label" });
+      pile(1480, "Discard pile", discard, "star");
+      label(k, battle, "Discard", "Eyebrow 18", "star", 1480, 1004, { w: 150, align: "CENTER", name: "Discard label" });
+      const endBtn = k.instance(battle, "Gilt button", { Label: "End turn" }, { name: "End turn", absolute: { x: 1660, y: 872 } });
+      onAll(k, endBtn, endTurn);
+      readout(k, battle, `"PRESS " + ${keyEnd.n}`, "PRESS E", "Small 18", "dim", 1640, 950, { w: 220, align: "CENTER", name: "End turn key" });
+      readout(k, battle, `"1\u20135 PLAY  \xB7  " + ${keyEnd.n} + " END TURN  \xB7  " + ${keyInspect.n} + " INSPECT  \xB7  ESC PAUSE"`, "1\u20135 PLAY  \xB7  E END TURN  \xB7  I INSPECT  \xB7  ESC PAUSE", "Small 18", "dim", 40, 96, { w: 640, name: "Legend" });
+      const hand = box(k, battle, 0, 0, W, H, { name: "Hand" });
+      const slotCards = [[CARDS[0]], [CARDS[1]], [CARDS[2]], [CARDS[3]], [CARDS[4], CARDS[5], CARDS[6], CARDS[7]]];
+      const slotIf = (s, j) => s === 4 ? `${slot5.n} == ${j} && ` : "";
+      handPos.forEach((p, s) => {
+        const slotBox = box(k, hand, p.x, p.y, 232, 380, { name: `Hand slot ${s + 1}` });
+        k.patch(slotBox, { rotation: p.rot });
+        const wrap = box(k, slotBox, 0, 0, 232, 380, { name: "Card flight" });
+        const f = flight[s].n;
+        k.bindExpression(wrap, "translateY", `-460 * ${f}`);
+        k.bindExpression(wrap, "rotation", `-16 * ${f}`);
+        k.bindExpression(wrap, "opacity", `1 - ${f}`);
+        slotCards[s].forEach((d, j) => {
+          const aura = k.rect(wrap, 252, 332, [k.gradient({ from: "gold", to: "void", kind: "RADIAL", fromOpacity: 0.55, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Breathing aura", radius: 30, absolute: { x: -4, y: 38 } });
+          showWhen(aura, `${slotIf(s, j)}${breathing.n} == 1 && ${affordable(s, d)}`);
+          drift(k, aura, "opacity", 0.35, 0.55, s * 0.4);
+          const inst = k.instance(wrap, d.name, {}, { name: "Hand card", absolute: { x: 0, y: 0 } });
+          k.bindExpression(inst, "opacity", `${E} >= ${d.cost} || ${spent[s].n} == 1 ? 1 : 0.62`);
+          if (s === 4) showWhen(inst, `${slot5.n} == ${j}`);
+          k.on(inst, when([{ if: `${slotIf(s, j)}${affordable(s, d)}`, then: play(s, d) }]));
+        });
+        label(k, slotBox, String(s + 1), "Small 18", "dim", 104, 366, { w: 24, align: "CENTER", name: "Slot key" });
+      });
+      const dmgNum = readout(k, battle, `${hit.n} > 0 ? "\u2212" + ${hit.n} : "BLOCKED"`, "\u22126", "Damage 84", "chip", 1160, 320, { w: 320, align: "CENTER", name: "Damage number" });
+      ghost(dmgNum, hitT);
+      k.bindExpression(dmgNum, "opacity", `${hitT.n} < 0.7 ? 1 : (1 - ${hitT.n}) / 0.3`);
+      k.bindExpression(dmgNum, "translateY", `-110 * ${hitT.n}`);
+      k.bindExpression(dmgNum, "scaleX", `1 + 0.5 * (1 - ${hitT.n}) * (1 - ${hitT.n})`);
+      k.bindExpression(dmgNum, "scaleY", `1 + 0.5 * (1 - ${hitT.n}) * (1 - ${hitT.n})`);
+      const tb = box(k, battle, 560, 400, 800, 110, { name: "Turn banner", fill: k.tint("scrim", 0.92), radius: 16, stroke: { color: "gold", width: 2 } });
+      const tbw = label(k, tb, "Turn 2  \xB7  your hand returns", "Banner 56", "gold", 0, 23, { w: 800, align: "CENTER", name: "Turn words" });
+      k.bindExpression(tbw, "characters", `"Turn " + (${turn.n} + 1) + "  \xB7  your hand returns"`);
+      ghost(tb, turnT);
+      k.bindExpression(tb, "opacity", `${turnT.n} >= 1 ? 0 : ${turnT.n} < 0.15 ? ${turnT.n} / 0.15 : ${turnT.n} > 0.7 ? (1 - ${turnT.n}) / 0.3 : 1`);
+      k.bindExpression(tb, "translateY", `-30 * ${turnT.n}`);
+      const fb = box(k, battle, 560, 380, 800, 120, { name: "Fate banner", fill: "panel", radius: 16, stroke: { color: "sun", width: 3 }, effects: [glow(k, "sun", 40, 0.8)] });
+      const fbw = label(k, fb, "Fate aligns  \xB7  12 damage", "Banner 56", "sun", 0, 28, { w: 800, align: "CENTER", name: "Fate words" });
+      k.bindExpression(fbw, "characters", `"Fate aligns  \xB7  " + ${fateBonus.n} + " damage"`);
+      ghost(fb, fateT);
+      k.bindExpression(fb, "scaleX", `${fateT.n} < 0.15 ? 0.7 + 2 * ${fateT.n} : 1`);
+      k.bindExpression(fb, "scaleY", `${fateT.n} < 0.15 ? 0.7 + 2 * ${fateT.n} : 1`);
+      k.bindExpression(fb, "opacity", `${fateT.n} >= 1 ? 0 : ${fateT.n} > 0.75 ? (1 - ${fateT.n}) * 4 : 1`);
+      const flash = k.rect(battle, W, H, [k.gradient({ from: "danger", to: "danger", kind: "RADIAL", fromOpacity: 0, toOpacity: 0.85, handles: [{ x: 0.5, y: 0.5 }, { x: 1.05, y: 0.5 }, { x: 0.5, y: 1.1 }] })], { name: "Hurt flash", absolute: { x: 0, y: 0 } });
+      ghost(flash, hurtT);
+      k.bindExpression(flash, "opacity", `(1 - ${hurtT.n}) * (${softFlash.n} == 1 ? 0.35 : 1)`);
+      runBar(battle);
+      const logic = box(k, battle, 0, 0, 1, 1, { name: "Game logic" });
+      k.on(logic, when([
+        ...handPos.flatMap((_, s) => slotCards[s].map((d, j) => ({ if: `$key == "${s + 1}" && ${slotIf(s, j)}${affordable(s, d)}`, then: play(s, d) }))),
+        { if: `upper($key) == ${keyEnd.n}`, then: endTurn },
+        { if: `upper($key) == ${keyInspect.n}`, then: [set(inspect.id, { expression: `1 - ${inspect.n}` })] }
+      ]), { key: "*" });
+      k.on(logic, overlay(pause), { key: "Escape" });
+      k.cues(battle, [{ layer: ["Hand slot 1", "Hand slot 2", "Hand slot 3", "Hand slot 4", "Hand slot 5"], preset: "rise-in", at: 300, stagger: { delay: 90 } }, { layer: "Enemy", preset: "fade-in", at: 0 }, { layer: "Intent", preset: "pop-in", at: 600 }]);
+    }
+    {
+      sky(reward, 61, 0.86);
+      label(k, reward, "Victory", "Heading 64", "gold", 0, 110, { w: W, align: "CENTER", name: "Screen title" });
+      readout(k, reward, `"The spire yields gold. Choose one card for your deck, or skip."`, "The spire yields gold. Choose one card for your deck, or skip.", "Body 24", "dim", 0, 192, { w: W, align: "CENTER", name: "Screen lead" });
+      const choices = [CARDS[5], CARDS[6], CARDS[7]];
+      const slotOf = [1, 2, 3];
+      choices.forEach((d, i) => {
+        const x = 960 + (i - 1) * 330 - 116;
+        const wrap = box(k, reward, x, 270, 232, 380, { name: "Reward slot" });
+        k.bindExpression(wrap, "opacity", `${rewardPick.n} == 0 || ${rewardPick.n} == ${i + 1} ? 1 : 0.62`);
+        const inst = k.instance(wrap, d.name, {}, { name: "Reward card", absolute: { x: 0, y: 0 } });
+        const take = [k.changeAction(`${d.name}/Fly`, 0), set(rewardPick.id, { value: i + 1 }), set(slot5.id, { value: slotOf[i] }), set(deckSize.id, { expression: `${deckSize.n} + 1` })];
+        k.on(inst, when([{ if: `${rewardPick.n} == 0`, then: take }]));
+        k.on(inst, when([{ if: `${rewardPick.n} == 0 && $key == "${i + 1}"`, then: take }]), { key: "*" });
+        label(k, reward, `${i + 1}`, "Cap 22", "gold", x + 100, 666, { w: 32, align: "CENTER", name: "Reward key" });
+      });
+      const added = box(k, reward, 610, 720, 700, 64, { name: "Added", fill: "panel", radius: 12, stroke: { color: "gold", width: 2 }, align: "CENTER", justify: "CENTER" });
+      const aw = k.text(added, "Added to your deck. It takes the fifth place in your hand.", { style: "Hint 20", color: "onPanel", autoWidth: true, name: "Added words" });
+      k.bindExpression(aw, "characters", `(${choices.map((d, i) => `${rewardPick.n} == ${i + 1} ? "${d.name}"`).join(" : ")} : "") + " joins your deck, fifth in your hand."`);
+      showWhen(added, `${rewardPick.n} != 0`);
+      readout(k, reward, `"+" + (${kind.n} == 1 ? 50 : 35) + " gold  \xB7  " + round(${gold.n}) + " in your purse"`, "+35 gold  \xB7  124 in your purse", "Cap 22", "gold", 0, 810, { w: W, align: "CENTER", name: "Gold earned" });
+      const cont = k.instance(reward, "Gilt button", { Label: "Continue  ENTER" }, { name: "Continue", absolute: { x: 1100, y: 880 } });
+      k.on(cont, toMap());
+      const skip = k.instance(reward, "Gilt button", { Label: "Skip  +15 gold" }, { name: "Skip", absolute: { x: 580, y: 880 } });
+      onAll(k, skip, [when([{ if: `${rewardPick.n} == 0`, then: [set(gold.id, { expression: `${gold.n} + 15` })] }]), toMap()]);
+      k.on(reward, toMap(), { key: "Enter" });
+      k.on(reward, toMap(), { key: "Escape" });
+      hintBar(reward, "1 2 3  TAKE A CARD      ENTER  CONTINUE      MOUSE  HOVER TO LIFT, CLICK TO TAKE");
+      runBar(reward);
+      k.cues(reward, [{ layer: "Reward slot", preset: "drop-in", at: 0, stagger: { delay: 140 } }, { layer: "Screen title", preset: "pop-in", at: 0 }]);
+    }
+    {
+      sky(rest, 71, 0.84);
+      const fire = box(k, rest, 180, 250, 620, 640, { name: "Starfire" });
+      k.ellipse(fire, 560, [k.gradient({ from: "sun", to: "void", kind: "RADIAL", fromOpacity: 0.45, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Fire glow", absolute: { x: 30, y: 60 } });
+      for (const [x1, x2] of [[160, 460], [180, 440]]) poly(k, fire, [[x1, 520], [x2, 560]], "goldDeep", { name: "Log", stroke: 16 });
+      const flames = [
+        [[[310, 230], [380, 420], [350, 520], [270, 520], [240, 420]], "danger"],
+        [[[310, 300], [360, 440], [340, 520], [280, 520], [260, 440]], "sun"],
+        [[[310, 380], [335, 470], [320, 520], [300, 520], [285, 470]], "chip"]
+      ];
+      flames.forEach(([pts, role], i) => {
+        const fl = poly(k, fire, pts, role, { name: "Flame", effects: [glow(k, role, 24, 0.7)] });
+        k.patch(fl, { anchorY: 1 });
+        drift(k, fl, "scaleY", 0.06 + i * 0.02, 1.8 + i * 0.6, i);
+      });
+      starfield(fire, scatter(12, 160, 60, 300, 200, 5, 6, 12), "sun", "Ember");
+      label(k, rest, "Rest site", "Heading 64", "onVoid", 900, 220, { name: "Screen title" });
+      label(k, rest, "A starfire burns in the Ember Choir. Rest here, or sit with a card until it becomes more.", "Body 24", "dim", 904, 306, { w: 860, name: "Screen lead" });
+      menu(k, rest, [
+        { label: "Rest by the starfire", hint: "Heal 30% of max HP", actions: [set(hp.id, { expression: `min(${maxHp.n}, ${hp.n} + round(${maxHp.n} * 0.3))`, glide: 900 }), set(hpTrail.id, { expression: hp.n }), toMap()] },
+        { label: "Meditate on a card", hint: "Starfall Strike: 6 to 9", actions: [set(strikeDmg.id, { value: 9 }), set(upgraded.id, { value: 1 }), toMap()] },
+        { label: "Leave the fire", actions: [toMap()] }
+      ], { focus: restFocus, x: 880, y: 420, width: 900, pitch: 96, style: "Menu 40", color: "onVoid", plate: [k.gradient({ from: "goldDeep", to: "goldDeep", angle: 0, fromOpacity: 0.55, toOpacity: 0 })], marker: { color: "sun" }, hintStyle: "Hint 20", escape: [toMap()] });
+      readout(k, rest, `"You have " + round(${hp.n}) + " of " + ${maxHp.n} + " HP.  Resting restores " + round(${maxHp.n} * 0.3) + "."`, "You have 62 of 62 HP.  Resting restores 19.", "Hint 20", "dim", 904, 740, { w: 860, name: "Rest line" });
+      hintBar(rest, "\u2191 \u2193  CHOOSE      ENTER  CONFIRM      ESC  LEAVE");
+      runBar(rest);
+      k.cues(rest, [{ layer: "Menu item", preset: "slide-in", at: 0, params: { direction: "right" }, stagger: { delay: 80 } }]);
+    }
+    {
+      sky(shop, 81, 0.86);
+      label(k, shop, "The Moth Merchant", "Heading 64", "onVoid", 120, 110, { name: "Screen title" });
+      label(k, shop, '"Everything burns eventually. Buy the part that burns brightest."', "Quote 26", "gold", 124, 192, { name: "Merchant line" });
+      const moth = box(k, shop, 1480, 90, 360, 220, { name: "Merchant" });
+      for (const sgn of [-1, 1]) {
+        const wing = poly(k, moth, [[180, 110], [180 + sgn * 150, 20], [180 + sgn * 170, 120], [180 + sgn * 110, 200]], k.tint("star", 0.25), { name: "Wing" });
+        poly(k, moth, [[180, 110], [180 + sgn * 150, 20], [180 + sgn * 170, 120], [180 + sgn * 110, 200]], "star", { name: "Wing line", stroke: 2, closed: true });
+        k.ellipse(moth, 26, "gold", { name: "Wing eye", absolute: { x: 180 + sgn * 100 - 13, y: 90 } });
+        drift(k, wing, "opacity", 0.2, 0.7);
+      }
+      poly(k, moth, [[180, 60], [192, 110], [180, 190], [168, 110]], "gold", { name: "Body" });
+      drift(k, moth, "translateY", 6, 0.4);
+      const items = [
+        { name: "Nova Bloom", kind: "Card", text: "Sun attack, cost 2. Deal 16 damage. Takes the fifth place in your hand.", price: 60, owned: novaBought, gain: [set(slot5.id, { value: 1 }), set(deckSize.id, { expression: `${deckSize.n} + 1` })] },
+        { name: "Moth-glass Lantern", kind: "Relic", text: "End each turn with 3 block. The merchant winks.", price: 80, owned: lantern, gain: [] },
+        { name: "Mending draught", kind: "Service", text: "Heal 15 HP. Tastes of moonlight and tin.", price: 50, owned: mended, gain: [set(hp.id, { expression: `min(${maxHp.n}, ${hp.n} + 15)`, glide: 800 }), set(hpTrail.id, { expression: hp.n })] }
+      ];
+      items.forEach((it, i) => {
+        const x = 120 + i * 400;
+        const panel = box(k, shop, x, 280, 360, 500, { name: "Shop item", fill: "panel", radius: 16, stroke: { color: "goldDeep", width: 1.5 } });
+        const lit = k.rect(panel, 360, 500, [], { name: "Item focus", radius: 16, stroke: { color: "gold", width: 3 }, absolute: { x: 0, y: 0 }, effects: [glow(k, "gold", 30, 0.7)] });
+        k.bindExpression(lit, "opacity", `max(0, 1 - abs(${shopFocus.n} - ${i}))`);
+        label(k, panel, it.kind, "Eyebrow 18", i === 0 ? "sun" : i === 1 ? "star" : "heal", 0, 26, { w: 360, align: "CENTER", name: "Item kind" });
+        const art = box(k, panel, 80, 70, 200, 200, { name: "Item art", fill: "deep", radius: 100, stroke: { color: "gold", width: 2 } });
+        if (i === 0) {
+          suitMark(art, 0, 100, 100, 34);
+          ring(art, 100, 100, 80, "sun", 2, "Shockwave");
+        }
+        if (i === 1) relicIcon(art, 4, 30, 30, 140);
+        if (i === 2) {
+          poly(k, art, [[80, 50], [120, 50], [120, 80], [150, 130], [140, 160], [60, 160], [50, 130], [80, 80]], k.tint("heal", 0.5), { name: "Flask" });
+          poly(k, art, [[80, 50], [120, 50], [120, 80], [150, 130], [140, 160], [60, 160], [50, 130], [80, 80]], "heal", { name: "Flask line", stroke: 2.5, closed: true });
+        }
+        label(k, panel, it.name, "Bar name 26", "onPanel", 0, 290, { w: 360, align: "CENTER", name: "Item name" });
+        label(k, panel, it.text, "Hint 20", "dim", 30, 334, { w: 300, align: "CENTER", name: "Item text" });
+        const price = box(k, panel, 110, 430, 140, 46, { name: "Price", fill: "deep", radius: 23, stroke: { color: "gold", width: 1.5 }, direction: "HORIZONTAL", gap: 10, align: "CENTER", justify: "CENTER" });
+        k.ellipse(price, 22, "gold", { name: "Coin" });
+        const pt = k.text(price, String(it.price), { style: "Value 26", color: "gold", autoWidth: true, name: "Price value" });
+        void pt;
+        const poor = k.rect(price, 140, 46, [], { name: "Too dear", radius: 23, stroke: { color: "danger", width: 2 }, absolute: { x: 0, y: 0 } });
+        showWhen(poor, `${gold.n} < ${it.price} && ${it.owned.n} == 0`);
+        const sold = box(k, panel, 60, 190, 240, 84, { name: "Sold mark", radius: 10, fill: "scrim", stroke: { color: "danger", width: 4 }, align: "CENTER", justify: "CENTER" });
+        k.text(sold, "SOLD", { style: "Stamp 44", color: "danger", autoWidth: true, name: "Sold word" });
+        k.patch(sold, { rotation: -10 });
+        showWhen(sold, `${it.owned.n} == 1`);
+        const stamp = k.instance(shop, "Shop stamp", {}, { name: "Shop stamp", absolute: { x, y: 280 } });
+        const buy = [k.changeAction("Shop stamp/Sold", 0), set(gold.id, { expression: `${gold.n} - ${it.price}`, glide: 700 }), set(it.owned.id, { value: 1 }), ...it.gain];
+        const refuse = [k.changeAction("Shop stamp/Refused", 0)];
+        k.on(stamp, set(shopFocus.id, { value: i, glide: 160 }), { trigger: "MOUSE_ENTER" });
+        k.on(stamp, when([{ if: `${it.owned.n} == 0 && ${gold.n} >= ${it.price}`, then: buy }, { if: `${it.owned.n} == 0`, then: refuse }]));
+        k.on(stamp, when([{ if: `${shopFocus.n} == ${i} && ${it.owned.n} == 0 && ${gold.n} >= ${it.price}`, then: buy }, { if: `${shopFocus.n} == ${i} && ${it.owned.n} == 0`, then: refuse }]), { key: "Enter" });
+      });
+      const leave = box(k, shop, 1340, 580, 480, 200, { name: "Leave", fill: "panel", radius: 16, stroke: { color: "goldDeep", width: 1.5 }, padding: 28, gap: 10 });
+      const lf = k.rect(leave, 480, 200, [], { name: "Leave focus", radius: 16, stroke: { color: "gold", width: 3 }, absolute: { x: 0, y: 0 }, effects: [glow(k, "gold", 30, 0.7)] });
+      k.bindExpression(lf, "opacity", `max(0, 1 - abs(${shopFocus.n} - 3))`);
+      k.text(leave, "Leave the shop", { style: "Menu 40", color: "onPanel", name: "Leave words" });
+      readout(k, leave, `"You carry " + round(${gold.n}) + " gold up the stair."`, "You carry 99 gold up the stair.", "Hint 20", "dim", 28, 90, { w: 420, name: "Leave line" });
+      k.on(leave, set(shopFocus.id, { value: 3, glide: 160 }), { trigger: "MOUSE_ENTER" });
+      k.on(leave, toMap());
+      k.on(shop, set(shopFocus.id, { expression: `(${shopFocus.n} + 1) % 4`, glide: 160 }), { key: "ArrowRight" });
+      k.on(shop, set(shopFocus.id, { expression: `(${shopFocus.n} + 3) % 4`, glide: 160 }), { key: "ArrowLeft" });
+      k.on(shop, when([{ if: `${shopFocus.n} == 3`, then: [toMap()] }]), { key: "Enter" });
+      k.on(shop, toMap(), { key: "Escape" });
+      hintBar(shop, "LEFT RIGHT  BROWSE      ENTER  BUY      ESC  LEAVE");
+      runBar(shop);
+      k.cues(shop, [{ layer: "Shop item", preset: "rise-in", at: 0, stagger: { delay: 100 } }]);
+    }
+    {
+      sky(mystery, 91, 0.86);
+      const orr = box(k, mystery, 160, 200, 640, 640, { name: "Weeping orrery" });
+      k.ellipse(orr, 600, [k.gradient({ from: "star", to: "void", kind: "RADIAL", fromOpacity: 0.3, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Orrery glow", absolute: { x: 20, y: 20 } });
+      [[120, 16, "moon"], [200, -10, "star"], [270, 6, "sun"]].forEach(([r, rate, role], i) => {
+        const R = r;
+        ring(orr, 320, 320, R, "goldDeep", 2, "Orrery ring");
+        const rider = box(k, orr, 320 - R, 320 - R, R * 2, R * 2, { name: "Orrery arm" });
+        k.ellipse(rider, 26 - i * 4, role, { name: "Planet", absolute: { x: R * 2 - 13, y: R - 13 }, effects: [glow(k, role, 12)] });
+        spinAbout(rider, 320, 320, rate);
+      });
+      k.ellipse(orr, 70, "sun", { name: "Orrery sun", absolute: { x: 285, y: 285 }, effects: [glow(k, "sun", 30)] });
+      [[300, 360], [345, 380], [322, 400]].forEach(([x, y], i) => {
+        const t = poly(k, orr, [[x, y], [x + 8, y + 20], [x, y + 28], [x - 8, y + 20]], "moon", { name: "Tear" });
+        drift(k, t, "translateY", 18, 0.5, i);
+      });
+      label(k, mystery, "The Weeping Orrery", "Heading 64", "onVoid", 900, 220, { name: "Screen title" });
+      label(k, mystery, "A brass orrery turns in an empty chapel, and it is crying. Its tears are gold. Something in the gears asks to be wound back.", "Body 24", "dim", 904, 306, { w: 860, name: "Screen lead" });
+      menu(k, mystery, [
+        { label: "Wind it back", hint: "Lose 15 HP, gain 50 gold", actions: [set(hp.id, { expression: `max(1, ${hp.n} - 15)`, glide: 700 }), set(hpTrail.id, { expression: hp.n, glide: 1200 }), set(gold.id, { expression: `${gold.n} + 50`, glide: 900 }), toMap()] },
+        { label: "Leave it weeping", hint: "Heal 6 HP", actions: [set(hp.id, { expression: `min(${maxHp.n}, ${hp.n} + 6)`, glide: 700 }), set(hpTrail.id, { expression: hp.n }), toMap()] }
+      ], { focus: eventFocus, x: 880, y: 480, width: 900, pitch: 96, style: "Menu 40", color: "onVoid", plate: [k.gradient({ from: "star", to: "star", angle: 0, fromOpacity: 0.4, toOpacity: 0 })], marker: { color: "star" }, hintStyle: "Hint 20" });
+      hintBar(mystery, "\u2191 \u2193  CHOOSE      ENTER  CONFIRM");
+      runBar(mystery);
+      k.cues(mystery, [{ layer: "Screen lead", preset: "typewriter", at: 100, params: { duration: 900 } }, { layer: "Menu item", preset: "fade-in", at: 500, stagger: { delay: 120 } }]);
+    }
+    {
+      sky(compendium, 101, 0.88);
+      label(k, compendium, "Compendium", "Heading 64", "onVoid", 120, 70, { name: "Screen title" });
+      label(k, compendium, "Hover a card to lift it from the page.", "Body 24", "dim", 124, 152, { name: "Screen lead" });
+      CARDS.forEach((d, i) => {
+        const x = 110 + i % 4 * 250, y = 180 + Math.floor(i / 4) * 400;
+        k.instance(compendium, d.name, {}, { name: "Compendium card", absolute: { x, y } });
+      });
+      const rl = box(k, compendium, 1140, 200, 680, 760, { name: "Relics", fill: k.tint("panel", 0.92), radius: 16, stroke: { color: "goldDeep", width: 1.5 }, padding: 30, gap: 20 });
+      k.text(rl, "Relics", { style: "Eyebrow 18", color: "gold", name: "Relics title" });
+      RELICS.forEach((r, i) => {
+        const row = k.stack(rl, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Relic row", height: 104 });
+        relicIcon(row, i, 0, 0, 64);
+        const tx = box(k, row, 84, 6, 540, 96, { name: "Relic words", gap: 4 });
+        k.text(tx, r.name, { style: "Bar name 26", color: "gold", name: "Relic name" });
+        k.text(tx, r.text, { style: "Hint 20", color: "onPanel", name: "Relic text" });
+      });
+      const bk = k.instance(compendium, "Gilt button", { Label: "Back  ESC" }, { name: "Back", absolute: { x: 1640, y: 90 } });
+      k.on(bk, back());
+      k.on(compendium, back(), { key: "Escape" });
+      k.on(compendium, back(), { key: "Enter" });
+      hintBar(compendium, "HOVER  LIFT A CARD      ESC  BACK");
+      k.cues(compendium, [{ layer: "Compendium card", preset: "rise-in", at: 0, stagger: { delay: 60 } }, { layer: "Relic row", preset: "fade-in", at: 300, stagger: { delay: 80 } }]);
+    }
+    {
+      sky(settings, 111, 0.9);
+      label(k, settings, "Settings", "Heading 64", "onVoid", 120, 70, { name: "Screen title" });
+      const colB = box(k, settings, 120, 190, 1100, 780, { name: "Settings list" });
+      const rows = 8;
+      focusColumn(k, settings, { focus: setFocus, count: rows, x: 100, y: 186, w: 1140, pitch: 88, plate: k.tint("goldDeep", 0.3), guard: `${rebind.n} == ""`, escape: [back()] });
+      const common = { labelStyle: "Label 26", ink: "onVoid" };
+      const sl = { ...common, valueStyle: "Value 26", track: "line", fill: "gold", knob: "onVoid" };
+      const at = (i) => ({ x: 0, y: i * 88, width: 1100, focus: { n: setFocus.n, index: i } });
+      const r = [
+        slider(k, colB, { ...sl, ...at(0), label: "Master volume", variable: master, suffix: "%" }),
+        slider(k, colB, { ...sl, ...at(1), label: "Music", variable: music, suffix: "%" }),
+        slider(k, colB, { ...sl, ...at(2), label: "Animation speed", variable: animSpeed, min: 50, max: 200, step: 25, suffix: "%" }),
+        toggle(k, colB, { ...common, ...at(3), label: "Enemy intent numbers", variable: showIntent }),
+        toggle(k, colB, { ...common, ...at(4), label: "Breathing card glow", variable: breathing }),
+        toggle(k, colB, { ...common, ...at(5), label: "Reduced flashes", variable: softFlash }),
+        keybind(k, colB, { ...common, ...at(6), capStyle: "Cap 22", cap: "panel", onCap: "gold", listening: "gold", rebind, action: "End turn", slot: "end", variable: keyEnd }),
+        keybind(k, colB, { ...common, ...at(7), capStyle: "Cap 22", cap: "panel", onCap: "gold", listening: "gold", rebind, action: "Inspect enemy", slot: "inspect", variable: keyInspect })
+      ];
+      r.forEach((row, i) => focusRow(k, row, setFocus, i));
+      rebindListener(k, settings, rebind, [{ slot: "end", variable: keyEnd }, { slot: "inspect", variable: keyInspect }]);
+      const pv = box(k, settings, 1320, 190, 500, 700, { name: "Preview", fill: k.tint("panel", 0.92), radius: 16, stroke: { color: "goldDeep", width: 1.5 } });
+      label(k, pv, "Preview", "Eyebrow 18", "gold", 30, 28, { name: "Preview title" });
+      const aura = k.rect(pv, 252, 332, [k.gradient({ from: "gold", to: "void", kind: "RADIAL", fromOpacity: 0.55, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Breathing aura", radius: 30, absolute: { x: 124, y: 108 } });
+      showWhen(aura, `${breathing.n} == 1`);
+      drift(k, aura, "opacity", 0.35, 0.55);
+      k.instance(pv, "Comet Lance", {}, { name: "Preview card", absolute: { x: 134, y: 70 } });
+      readout(k, pv, `"Cards fly in " + round(520 * 100 / ${animSpeed.n}) + " ms"`, "Cards fly in 520 ms", "Hint 20", "onPanel", 30, 470, { w: 440, align: "CENTER", name: "Speed line" });
+      readout(k, pv, `"End turn: " + ${keyEnd.n} + "   \xB7   Inspect: " + ${keyInspect.n}`, "End turn: E   \xB7   Inspect: I", "Hint 20", "dim", 30, 510, { w: 440, align: "CENTER", name: "Keys line" });
+      readout(k, pv, `${showIntent.n} == 1 ? "Intents show their numbers." : "Intents show only their shape."`, "Intents show their numbers.", "Hint 20", "dim", 30, 550, { w: 440, align: "CENTER", name: "Intent line" });
+      const b = k.instance(settings, "Gilt button", { Label: "Back  ESC" }, { name: "Back", absolute: { x: 1640, y: 920 } });
+      k.on(b, back());
+      hintBar(settings, "\u2191 \u2193  ROW      LEFT RIGHT  ADJUST      ENTER  TOGGLE / REBIND      ESC  BACK");
+    }
+    {
+      sky(credits, 121, 0.8);
+      const roll = box(k, credits, 460, 50, 1e3, 980, { name: "Credits roll", gap: 20, align: "CENTER" });
+      k.text(roll, "{{brand.title}}", { style: "Heading 64", color: "gold", align: "CENTER", name: "Roll title" });
+      for (const [role, name] of CREDITS) {
+        const g = k.stack(roll, { gap: 2, align: "CENTER", name: "Credit" });
+        k.text(g, role, { style: "Credit role 20", color: "gold", align: "CENTER", name: "Role" });
+        k.text(g, name, { style: "Credit name 36", color: "onVoid", align: "CENTER", name: "Name" });
+      }
+      k.text(roll, "Made by lamplight at {{brand.studio}}", { style: "Credit role 20", color: "dim", align: "CENTER", name: "Sign-off" });
+      keys(k, roll, "translateY", [{ t: 0, v: 1080, ease: { kind: "linear" } }, { t: 11800, v: -1100 }]);
+      k.link(credits, main, "DISSOLVE", { key: "*", duration: 400 });
+      k.link(credits, main, "DISSOLVE", { duration: 400 });
+    }
+    {
+      label(k, pause, "Paused", "Heading 64", "onVoid", 0, 250, { w: W, align: "CENTER", name: "Screen title" });
+      label(k, pause, "The spire waits. It is patient.", "Quote 26", "gold", 0, 330, { w: W, align: "CENTER", name: "Pause line" });
+      menu(k, pause, [
+        { label: "Resume", actions: [close()] },
+        { label: "Settings", actions: [go(settings, "DISSOLVE", { duration: 300 })] },
+        { label: "Abandon run", actions: [go(main, "DISSOLVE", { duration: 500 })] }
+      ], { focus: pauseFocus, x: 610, y: 420, width: 700, pitch: 88, style: "Menu 40", color: "onVoid", plate: k.tint("goldDeep", 0.5), marker: { color: "gold" }, escape: [close()], radius: 10 });
+      readout(k, pause, `${heroName.n} + "   \xB7   floor " + min(${floor.n}, 5) + " of 5   \xB7   " + ${played.n} + " cards played   \xB7   " + round(${gold.n}) + " gold"`, "ORIEL VANE   \xB7   floor 0 of 5   \xB7   0 cards played   \xB7   99 gold", "Hint 20", "dim", 0, 720, { w: W, align: "CENTER", name: "Run stats" });
+    }
+    {
+      shaderLayer(k, defeat, "Starfield", {}, { name: "Still sky", opacity: 0.4 });
+      k.rect(defeat, W, H, k.tint("void", 0.85), { name: "Wash", absolute: { x: 0, y: 0 } });
+      k.rect(defeat, W, H, [k.gradient({ from: "danger", to: "void", kind: "RADIAL", fromOpacity: 0.25, toOpacity: 0, handles: [{ x: 0.5, y: 0.4 }, { x: 1.1, y: 0.4 }, { x: 0.5, y: 1.1 }] })], { name: "Ember", absolute: { x: 0, y: 0 } });
+      const fall = box(k, defeat, 880, 120, 160, 240, { name: "Falling card", fill: "card", radius: 12, stroke: { color: "goldDeep", width: 2 } });
+      ring(fall, 80, 120, 44, "goldDeep", 2, "Back ring");
+      drift(k, fall, "rotation", 8, 0.2);
+      drift(k, fall, "translateY", 10, 0.3);
+      label(k, defeat, "The spire keeps you", "Title 116", "onVoid", 160, 390, { w: 1600, align: "CENTER", name: "Defeat title" });
+      readout(k, defeat, `${heroName.n} + " fell on floor " + min(${floor.n}, 5) + ", after " + ${played.n} + " cards and " + ${damage.n} + " damage."`, "ORIEL VANE fell on floor 2, after 9 cards and 60 damage.", "Body 24", "dim", 0, 540, { w: W, align: "CENTER", name: "Defeat line" });
+      readout(k, defeat, `"Score  " + round(${score.n})`, "Score  0", "Cap 22", "gold", 0, 590, { w: W, align: "CENTER", name: "Defeat score" });
+      menu(k, defeat, [
+        { label: "Rise again", actions: [go(heroes, "DISSOLVE", { duration: 500 })] },
+        { label: "Main menu", actions: [go(main, "DISSOLVE", { duration: 500 })] }
+      ], { focus: endFocus, x: 610, y: 680, width: 700, pitch: 88, style: "Menu 40", color: "onVoid", plate: k.tint("danger", 0.3), marker: { color: "danger" }, radius: 10 });
+      k.cues(defeat, [{ layer: "Defeat title", preset: "blur-in", at: 0 }, { layer: "Defeat line", preset: "fade-in", at: 800 }]);
+    }
+    {
+      sky(victory, 131, 0.8);
+      const burst = box(k, victory, 560, 340, 800, 800, { name: "Sunburst" });
+      for (let j = 0; j < 24; j++) {
+        const a = j * Math.PI / 12;
+        poly(k, burst, [[400 + Math.cos(a) * 170, 400 + Math.sin(a) * 170], [400 + Math.cos(a) * 390, 400 + Math.sin(a) * 390]], "goldDeep", { name: "Ray", stroke: 2, opacity: 0.6 });
+      }
+      spinAbout(burst, 960, 740, 6);
+      label(k, victory, "Sal is unmade", "Title 116", "gold", 160, 170, { w: 1600, align: "CENTER", name: "Victory title" });
+      readout(k, victory, `${heroName.n} + " stands at the top of the spire, and the eye is closed."`, "ORIEL VANE stands at the top of the spire, and the eye is closed.", "Quote 26", "onVoid", 0, 312, { w: W, align: "CENTER", name: "Victory line" });
+      const tally = box(k, victory, 260, 400, 1400, 230, { name: "Tally", fill: "panel", radius: 16, stroke: { color: "gold", width: 2 } });
+      [["Floors climbed", `min(${floor.n}, 5) + ""`, "5"], ["Cards played", `${played.n} + ""`, "14"], ["Damage dealt", `${damage.n} + ""`, "150"], ["Gold", `round(${gold.n}) + ""`, "24"]].forEach(([name, e, rest2], i) => {
+        label(k, tally, name, "Eyebrow 18", "gold", 50 + i * 340, 50, { name: "Tally name" });
+        readout(k, tally, e, rest2, "Stat 72", "onPanel", 50 + i * 340, 90, { w: 300, name: "Tally value" });
+      });
+      readout(k, victory, `group(${score.n})`, "1,500", "Score 120", "onVoid", 0, 660, { w: W, align: "CENTER", name: "Score" });
+      label(k, victory, "Score", "Eyebrow 18", "gold", 0, 790, { w: W, align: "CENTER", name: "Score label" });
+      const cont = k.instance(victory, "Gilt button", { Label: "Return to the gate  ENTER" }, { name: "Continue", absolute: { x: 780, y: 870 } });
+      k.on(cont, go(main, "DISSOLVE", { duration: 500 }));
+      k.link(victory, main, "DISSOLVE", { key: "Enter", duration: 500 });
+      k.cues(victory, [{ layer: "Victory title", preset: "pop-in", at: 0 }, { layer: "Tally", preset: "rise-in", at: 400 }, { layer: "Score", preset: "scale-in", at: 900 }]);
+    }
+    for (const key of ["Enter", " "]) k.on(map, when(nodeEnters.map(({ f, c, enter }) => ({ if: MAP[f].length > 1 ? `${floor.n} == ${f} && ${col.n} == ${c}` : `${floor.n} == ${f}`, then: enter }))), { key });
+    return k.finish();
+  }
+});
+
+export {
+  deckbound_roguelike_default
+};