@popcraft/kit 0.53.15 → 0.53.17

package/dist/chunks/chunk-IFWYM35M.js

@@ -0,0 +1,1469 @@
+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,
+  sector,
+  set,
+  slider,
+  spin,
+  toggle,
+  toggleComponent,
+  when
+} from "./chunk-JX362DPK.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/game/ironroot-rts.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var TAU = Math.PI * 2;
+var polar = (cx, cy, r, a) => [cx + Math.cos(a) * r, cy + Math.sin(a) * r];
+function rng(seed) {
+  let s = seed * 2654435761 >>> 0 || 1;
+  return () => {
+    s = Math.imul(s, 1664525) + 1013904223 >>> 0;
+    return s / 4294967296;
+  };
+}
+function blob(cx, cy, rx, ry, seed, n = 18, wob = 0.2) {
+  const r = rng(seed);
+  return Array.from({ length: n }, (_, i) => {
+    const a = i / n * TAU, f = 1 + (r() - 0.5) * 2 * wob;
+    return [cx + Math.cos(a) * rx * f, cy + Math.sin(a) * ry * f];
+  });
+}
+var ellipsePts = (cx, cy, rx, ry, n = 40) => Array.from({ length: n }, (_, i) => [cx + Math.cos(i / n * TAU) * rx, cy + Math.sin(i / n * TAU) * ry]);
+function gearPts(cx, cy, r, teeth, depth = r * 0.2) {
+  const out = [], step = TAU / teeth;
+  for (let i = 0; i < teeth; i++) {
+    const a = i * step;
+    out.push(polar(cx, cy, r - depth, a), polar(cx, cy, r, a + step * 0.18), polar(cx, cy, r, a + step * 0.46), polar(cx, cy, r - depth, a + step * 0.64));
+  }
+  return out;
+}
+var scalePts = (pts, s, dx = 0, dy = 0) => pts.map(([x, y]) => [x * s + dx, y * s + dy]);
+var WORLD = { w: 2400, h: 1200 };
+var VIEW = { w: 1920, h: 684 };
+var BASE = [420, 760];
+var CORE = [2e3, 330];
+var FOG_R = [480, 800, 1120, 1450, 2900];
+var RIDGES = [{ c: [1500, 190], r: [330, 140], s: 3 }, { c: [880, 420], r: [210, 90], s: 7 }, { c: [2150, 760], r: [230, 170], s: 11 }, { c: [300, 150], r: [230, 110], s: 13 }, { c: [1900, 1080], r: [200, 90], s: 17 }];
+var MEADOWS = [{ c: [620, 820], r: [440, 260], s: 21 }, { c: [1300, 600], r: [380, 210], s: 22 }, { c: [1900, 1060], r: [420, 170], s: 23 }, { c: [2120, 330], r: [320, 220], s: 24 }, { c: [260, 420], r: [260, 180], s: 25 }];
+var RIVER = [[1180, -30], [1120, 160], [1215, 330], [1110, 520], [1190, 700], [1330, 860], [1300, 1010], [1430, 1240]];
+var TRAIL = [[420, 760], [620, 720], [820, 700], [1010, 610], [1150, 540], [1380, 500], [1600, 470], [1820, 390], [2e3, 330]];
+var FORESTS = [[640, 150, 14], [1660, 420, 11], [190, 1070, 12], [2250, 1010, 13], [1010, 1120, 9], [2260, 110, 9], [1520, 780, 7], [860, 300, 6]];
+var ORE_FIELDS = [[250, 360], [1250, 990], [1760, 650]];
+var SQUADS = [
+  { key: "1", tab: "Rangers", name: "Sporeling rangers", role: "Light skirmishers \xB7 spore-lances", at: [820, 690], atk: 18, arm: 6, spd: 82, quip: '"Roots remember every step."', size: 4 },
+  { key: "2", tab: "Harvest", name: "Brass harvesters", role: "Ore haulers \xB7 steam tread", at: [360, 440], atk: 4, arm: 22, spd: 40, quip: '"Seam is rich. Boilers hungry."', size: 3 },
+  { key: "3", tab: "Wrights", name: "Gearwright engineers", role: "Builders \xB7 field repair", at: [700, 1e3], atk: 8, arm: 12, spd: 58, quip: '"Give us an hour and a wrench."', size: 2 }
+];
+var camFor = (p) => ({ x: Math.max(0, Math.min(WORLD.w - VIEW.w, p[0] - VIEW.w / 2)), y: Math.max(0, Math.min(WORLD.h - VIEW.h, p[1] - VIEW.h / 2)) });
+var FACTIONS = [
+  { name: "Verdant Foundry", motto: '"Industry is only a slower kind of gardening."', bonus: "+150 starting ore", stats: [86, 54, 40], roster: ["Sporeling ranger", "Brass harvester", "Thornback walker"] },
+  { name: "Oxide Covenant", motto: '"Rust is iron remembering the earth."', bonus: "+80 starting fuel", stats: [52, 90, 46], roster: ["Cinder lancer", "Slag crawler", "Furnace titan"] },
+  { name: "Mireglass Syndics", motto: '"Every fog has a price, and we have paid it."', bonus: "First fog ring charted", stats: [44, 50, 92], roster: ["Fen stalker", "Glass skiff", "Lantern oracle"] }
+];
+var CREDITS = [
+  ["Game direction", "Odalys Ferreira-Kwan"],
+  ["Systems design", "Bram Oyelaran"],
+  ["Art direction", "Mireille Castellanos"],
+  ["World and terrain", "Tuomas Achterberg"],
+  ["Interface", "Keziah Mbeki"],
+  ["Audio", "Ignatius Varga \xB7 Luz Aranda"],
+  ["Narrative", "Petronella Ashdown"],
+  ["Engineering", "Ravi Selwyn \xB7 Ondine Marsh \xB7 Caspar Holt"],
+  ["Special thanks", "The playtesters who fed the boilers until dawn"]
+];
+var SAVES = [
+  { name: "Rusted Canopy \u2014 dawn 3", hint: "Ore 620 \xB7 2 rings charted", ore: 620, fuel: 240, scout: 2, trained: 3 },
+  { name: "Mireglass Fen \u2014 dusk 5", hint: "Ore 380 \xB7 spire in sight", ore: 380, fuel: 320, scout: 4, trained: 5 },
+  { name: "Oxide Reach \u2014 night 9", hint: "Ore 910 \xB7 Thornbacks ready", ore: 910, fuel: 180, scout: 3, trained: 6 }
+];
+var ironroot_rts_default = defineTemplate({
+  id: "game-ironroot-rts",
+  meta: {
+    name: "IRONROOT DOMINION \u2014 real-time strategy UI",
+    description: "A playable dieselpunk-botanical RTS front end and battle HUD: foundry boot, an iron-tree title, faction select with gliding stats and roster, a mission briefing whose objectives pop onto the map, working settings and key bindings, and a battle HUD with resources that count, a panning camera and minimap, fog of war that recedes as you scout, squad selection, a nine-command card with cooldown sweeps, a build queue, a tech tree, raids, pause, defeat and victory with medals",
+    category: "game-ui",
+    tags: ["game", "game ui", "hud", "rts", "real-time strategy", "strategy", "dieselpunk", "minimap", "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("IRONROOT DOMINION");
+    k.brand({
+      void: "#0D0A07",
+      soil: "#211A11",
+      loam: "#2E2518",
+      panel: "#221810",
+      panelHi: "#33261A",
+      bronze: "#8C5B2C",
+      bronzeDeep: "#4E3219",
+      brass: "#D8A84A",
+      brassDim: "#9C7A3A",
+      verdigris: "#62B89E",
+      verdigrisDeep: "#2C6A5B",
+      moss: "#86A64A",
+      mossDeep: "#3E5325",
+      oxide: "#DD6A30",
+      oxideDeep: "#8A3414",
+      oxideText: "#F39462",
+      rivet: "#C9A15A",
+      parchment: "#F2E7CD",
+      dim: "#C2B08C",
+      onBrass: "#1A1208",
+      onOxide: "#1C0903",
+      onVerdigris: "#05140F",
+      enemy: "#C4402A",
+      enemyGlow: "#FF7A45",
+      scrim: "#090705",
+      primary: "#62B89E",
+      onPrimary: "#05140F",
+      accent: "#DD6A30",
+      onAccent: "#1C0903"
+    }, { title: "IRONROOT DOMINION", studio: "Tallow & Gear", tagline: "Grow an empire of iron and root. Hold the Heartwood." });
+    k.palette({
+      river: "#2B5C62",
+      riverLight: "#71B8B0",
+      ridge: "#5C4630",
+      ridgeDark: "#3A2C1F",
+      ridgeLight: "#7E6446",
+      contour: "#6E5638",
+      forest: "#1F3519",
+      canopy: "#4E7A33",
+      meadow: "#33421E",
+      trail: "#4C3B24",
+      ore: "#E28A43",
+      oreLight: "#FFD39E",
+      fog: "#15130E",
+      mist: "#8F8B78",
+      smoke: "#8B8475",
+      root: "#6F4A26"
+    });
+    const commander = gameVar(k, "Commander", "name", "STRING", "WARDEN HESPER ASHGROVE");
+    const faction = gameVar(k, "Commander", "faction", "FLOAT", 0);
+    const industry = gameVar(k, "Commander", "industry", "FLOAT", FACTIONS[0].stats[0]);
+    const might = gameVar(k, "Commander", "might", "FLOAT", FACTIONS[0].stats[1]);
+    const guile = gameVar(k, "Commander", "guile", "FLOAT", FACTIONS[0].stats[2]);
+    const ore = gameVar(k, "Economy", "ore", "FLOAT", 400);
+    const fuel = gameVar(k, "Economy", "fuel", "FLOAT", 200);
+    const supply = gameVar(k, "Economy", "supply", "FLOAT", 6);
+    const cap = gameVar(k, "Economy", "supplyCap", "FLOAT", 20);
+    const oreMined = gameVar(k, "Economy", "oreMined", "FLOAT", 0);
+    const yieldV = gameVar(k, "Economy", "gatherYield", "FLOAT", 50);
+    const trained = gameVar(k, "Army", "trained", "FLOAT", 0);
+    const sporelings = gameVar(k, "Army", "sporelings", "FLOAT", 0);
+    const thornbacks = gameVar(k, "Army", "thornbacks", "FLOAT", 0);
+    const depots = gameVar(k, "Army", "depots", "FLOAT", 0);
+    const sel = gameVar(k, "Army", "selected", "FLOAT", 1);
+    const hp = SQUADS.map((_, i) => gameVar(k, "Army", `squadHealth${i + 1}`, "FLOAT", 100));
+    const atk = gameVar(k, "Army", "attack", "FLOAT", SQUADS[0].atk);
+    const arm = gameVar(k, "Army", "armour", "FLOAT", SQUADS[0].arm);
+    const spd = gameVar(k, "Army", "speed", "FLOAT", SQUADS[0].spd);
+    const baseHp = gameVar(k, "Base", "integrity", "FLOAT", 100);
+    const baseTrail = gameVar(k, "Base", "integrityTrail", "FLOAT", 100);
+    const baseMax = gameVar(k, "Base", "maxIntegrity", "FLOAT", 100);
+    const dmgTaken = gameVar(k, "Base", "raidDamage", "FLOAT", 15);
+    const braced = gameVar(k, "Base", "braced", "FLOAT", 0);
+    const coreHp = gameVar(k, "Enemy", "spire", "FLOAT", 120);
+    const coreTrail = gameVar(k, "Enemy", "spireTrail", "FLOAT", 120);
+    const coreMax = gameVar(k, "Enemy", "maxSpire", "FLOAT", 120);
+    const scout = gameVar(k, "Map", "scouted", "FLOAT", 0);
+    const camX = gameVar(k, "Map", "cameraX", "FLOAT", 0);
+    const camY = gameVar(k, "Map", "cameraY", "FLOAT", 418);
+    const plating = gameVar(k, "Tech", "plating", "FLOAT", 0);
+    const taproots = gameVar(k, "Tech", "taproots", "FLOAT", 0);
+    const tier = gameVar(k, "Tech", "thornback", "FLOAT", 0);
+    const actions = gameVar(k, "Stats", "actions", "FLOAT", 0);
+    const raids = gameVar(k, "Stats", "raids", "FLOAT", 0);
+    const menuFocus = gameVar(k, "UI", "menuFocus", "FLOAT", 0);
+    const pauseFocus = gameVar(k, "UI", "pauseFocus", "FLOAT", 0);
+    const endFocus = gameVar(k, "UI", "endFocus", "FLOAT", 0);
+    const setFocus = gameVar(k, "UI", "settingsFocus", "FLOAT", 0);
+    const techFocus = gameVar(k, "UI", "techFocus", "FLOAT", 0);
+    const loadFocus = gameVar(k, "UI", "loadFocus", "FLOAT", 0);
+    const cardHover = gameVar(k, "UI", "commandHover", "FLOAT", -1);
+    const rebind = gameVar(k, "UI", "rebinding", "STRING", "");
+    const volume = gameVar(k, "Settings", "masterVolume", "FLOAT", 80);
+    const music = gameVar(k, "Settings", "musicVolume", "FLOAT", 60);
+    const scroll = gameVar(k, "Settings", "scrollSpeed", "FLOAT", 5);
+    const uiScale = gameVar(k, "Settings", "uiScale", "FLOAT", 100);
+    const hpBars = gameVar(k, "Settings", "healthBars", "FLOAT", 1);
+    const pings = gameVar(k, "Settings", "alertPings", "FLOAT", 1);
+    const keyBuild = gameVar(k, "Keys", "build", "STRING", "B");
+    const keyAttack = gameVar(k, "Keys", "attack", "STRING", "F");
+    const keyStop = gameVar(k, "Keys", "stop", "STRING", "H");
+    const mono = { fontFamily: "JetBrains Mono" };
+    const serif = { fontFamily: "Source Serif 4" };
+    k.textStyle("Boot 20", { size: 20, fontWeight: 500, lineHeight: 32, ...mono });
+    k.textStyle("Studio 28", { size: 28, fontWeight: 800, letterSpacing: 8, lineHeight: 36, textCase: "UPPER" });
+    k.textStyle("Title 132", { size: 132, fontWeight: 900, letterSpacing: -5, lineHeight: 124, textCase: "UPPER" });
+    k.textStyle("Tagline 28", { size: 28, fontWeight: 400, lineHeight: 38, fontStyle: "italic", ...serif });
+    k.textStyle("Prompt 24", { size: 24, fontWeight: 700, letterSpacing: 10, lineHeight: 32, textCase: "UPPER", ...mono });
+    k.textStyle("Menu 38", { size: 38, fontWeight: 800, letterSpacing: -0.5, lineHeight: 46, textCase: "UPPER" });
+    k.textStyle("Hint 18", { size: 18, fontWeight: 500, letterSpacing: 1, lineHeight: 26, ...mono });
+    k.textStyle("Heading 60", { size: 60, fontWeight: 900, letterSpacing: -2, lineHeight: 66, textCase: "UPPER" });
+    k.textStyle("Label 24", { size: 24, fontWeight: 600, lineHeight: 32 });
+    k.textStyle("Value 24", { size: 24, fontWeight: 700, lineHeight: 32, ...mono });
+    k.textStyle("Cap 20", { size: 20, fontWeight: 700, letterSpacing: 2, lineHeight: 26, textAlign: "CENTER", ...mono });
+    k.textStyle("Cost 16", { size: 16, fontWeight: 700, lineHeight: 22, textCase: "UPPER", ...mono });
+    k.textStyle("Small 16", { size: 16, fontWeight: 600, letterSpacing: 2, lineHeight: 22, textCase: "UPPER", ...mono });
+    k.textStyle("Body 22", { size: 22, fontWeight: 400, lineHeight: 32 });
+    k.textStyle("Card 30", { size: 30, fontWeight: 900, letterSpacing: -0.8, lineHeight: 34, textCase: "UPPER" });
+    k.textStyle("Res 30", { size: 30, fontWeight: 800, lineHeight: 34, ...mono });
+    k.textStyle("HUD 16", { size: 16, fontWeight: 800, letterSpacing: 1.5, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Cmd 17", { size: 17, fontWeight: 900, letterSpacing: -0.2, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Alert 28", { size: 28, fontWeight: 800, letterSpacing: 5, lineHeight: 36, textCase: "UPPER", textAlign: "CENTER", ...mono });
+    k.textStyle("Stat 64", { size: 64, fontWeight: 800, lineHeight: 72, ...mono });
+    k.textStyle("Unit 30", { size: 30, fontWeight: 900, letterSpacing: -0.6, lineHeight: 34, textCase: "UPPER" });
+    k.textStyle("Counter 48", { size: 48, fontWeight: 800, lineHeight: 52, ...mono });
+    k.textStyle("Quote 22", { size: 22, fontWeight: 400, lineHeight: 30, fontStyle: "italic", ...serif });
+    k.textStyle("Epitaph 104", { size: 104, fontWeight: 600, letterSpacing: -2, lineHeight: 112, fontStyle: "italic", textAlign: "CENTER", ...serif });
+    k.textStyle("Credit role 18", { size: 18, fontWeight: 600, letterSpacing: 4, lineHeight: 26, textCase: "UPPER", textAlign: "CENTER", ...mono });
+    k.textStyle("Credit name 34", { size: 34, fontWeight: 800, letterSpacing: -0.5, lineHeight: 42, textAlign: "CENTER" });
+    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 gear = (parent, cx, cy, r, teeth, rate, color = "brass", hub = "void") => {
+      const g = box(k, parent, cx - r, cy - r, r * 2, r * 2, { name: "Gear" });
+      poly(k, g, gearPts(r, r, r, teeth), color, { name: "Gear teeth" });
+      k.ellipse(g, r * 1.1, "bronzeDeep", { name: "Gear web", absolute: { x: r * 0.45, y: r * 0.45 } });
+      for (let i = 0; i < 5; i++) {
+        const a = i / 5 * TAU;
+        const [x, y] = polar(r, r, r * 0.38, a);
+        k.ellipse(g, Math.max(4, r * 0.16), hub, { name: "Gear hole", absolute: { x: x - r * 0.08, y: y - r * 0.08 } });
+      }
+      k.ellipse(g, r * 0.34, color, { name: "Gear boss", absolute: { x: r * 0.83, y: r * 0.83 }, stroke: { color: "bronzeDeep", width: 2 } });
+      if (rate) spin(k, g, rate);
+      return g;
+    };
+    const plate = (parent, x, y, w, h, o = {}) => {
+      const id = box(k, parent, x, y, w, h, { name: o.name ?? "Plate", fill: o.fill ?? "panel", radius: 6, stroke: { color: "bronze", width: 2, align: "INSIDE" }, clip: o.clip });
+      k.rect(id, w, h, [k.gradient({ from: "verdigris", to: "verdigris", angle: 60, fromOpacity: 0.16, toOpacity: 0 })], { name: "Patina", radius: 6, absolute: { x: 0, y: 0 } });
+      k.rect(id, w - 12, h - 12, [], { name: "Seam", radius: 4, stroke: { color: "bronzeDeep", width: 1 }, absolute: { x: 6, y: 6 } });
+      if (o.rivets !== false) for (const [rx, ry] of [[9, 9], [w - 17, 9], [9, h - 17], [w - 17, h - 17]]) k.ellipse(id, 8, "rivet", { name: "Rivet", absolute: { x: rx, y: ry }, stroke: { color: "bronzeDeep", width: 1 } });
+      return id;
+    };
+    const hintBar = (id, text) => {
+      const b = box(k, id, 0, H - 60, W, 60, { name: "Hint bar", fill: k.tint("panel", 0.94), direction: "HORIZONTAL", align: "CENTER", padding: { top: 0, right: 64, bottom: 0, left: 64 }, stroke: { color: "bronzeDeep", width: 1 } });
+      k.text(b, text, { style: "Hint 18", color: "dim", autoWidth: true, name: "Hints" });
+    };
+    const menuGround = (id) => {
+      k.rect(id, W, H, [k.gradient({ from: "soil", to: "void", kind: "RADIAL", handles: [{ x: 0.3, y: 0.4 }, { x: 1.2, y: 0.4 }, { x: 0.3, y: 1.4 }] })], { name: "Ground wash", absolute: { x: 0, y: 0 } });
+      const topo = box(k, id, 0, 0, W, H, { name: "Contours" });
+      [[1500, 300, 5], [300, 820, 9], [1100, 900, 12]].forEach(([cx, cy, s]) => {
+        for (let i = 0; i < 5; i++) poly(k, topo, blob(cx, cy, 120 + i * 90, 70 + i * 60, s + i, 22, 0.12), "contour", { name: "Contour", stroke: 2, closed: true, opacity: 0.35 - i * 0.05 });
+      });
+      gear(id, 1840, 1e3, 230, 18, 6, "loam", "soil");
+      gear(id, 1530, 1060, 130, 11, -10.6, "loam", "soil");
+      for (let i = 0; i < 9; i++) {
+        const sp = k.ellipse(id, 6 + i % 3 * 3, "moss", { name: "Spore", absolute: { x: 140 + i * 205, y: 1080 }, opacity: 0.5 });
+        k.behave(sp, "translateY", [{ kind: "spin", rate: -(40 + i % 4 * 14) }, { kind: "mod", period: 1150, offset: -1150 + i * 120 }]);
+        drift(k, sp, "translateX", 16, 0.3 + i % 3 * 0.1, i);
+      }
+    };
+    const terrain = (parent, s, detail) => {
+      for (const m of MEADOWS) poly(k, parent, blob(m.c[0] * s, m.c[1] * s, m.r[0] * s, m.r[1] * s, m.s), "meadow", { name: "Meadow" });
+      for (const r of RIDGES) {
+        poly(k, parent, blob(r.c[0] * s, r.c[1] * s, r.r[0] * s, r.r[1] * s, r.s), "ridgeDark", { name: "Ridge" });
+        poly(k, parent, blob(r.c[0] * s - 8 * s, r.c[1] * s - 10 * s, r.r[0] * s * 0.72, r.r[1] * s * 0.7, r.s + 1), "ridge", { name: "Ridge" });
+        poly(k, parent, blob(r.c[0] * s - 16 * s, r.c[1] * s - 20 * s, r.r[0] * s * 0.42, r.r[1] * s * 0.4, r.s + 2), "ridgeLight", { name: "Ridge crest" });
+        if (detail) for (let i = 1; i <= 2; i++) poly(k, parent, blob(r.c[0] * s, r.c[1] * s, r.r[0] * s * (1 + i * 0.14), r.r[1] * s * (1 + i * 0.16), r.s + 5), "contour", { name: "Contour", stroke: 2, closed: true, opacity: 0.5 });
+      }
+      poly(k, parent, scalePts(RIVER, s), "mossDeep", { name: "River bank", stroke: Math.max(3, 78 * s) });
+      poly(k, parent, scalePts(RIVER, s), "river", { name: "River", stroke: Math.max(2, 52 * s) });
+      if (detail) {
+        const shine = poly(k, parent, scalePts(RIVER, s, -6 * s, 0), "riverLight", { name: "River shine", stroke: 10 * s, opacity: 0.5 });
+        drift(k, shine, "opacity", 0.2, 0.4);
+      }
+      if (s > 0.2) poly(k, parent, scalePts(TRAIL, s), "trail", { name: "Trail", stroke: Math.max(2, 18 * s), opacity: 0.85 });
+      FORESTS.forEach(([cx, cy, n], fi) => {
+        const r = rng(fi + 40);
+        const count = detail ? n : Math.ceil(n / 2);
+        for (let i = 0; i < count; i++) {
+          const a = r() * TAU, d = r() * 150, z = (34 + r() * 26) * s;
+          const x = (cx + Math.cos(a) * d) * s, y = (cy + Math.sin(a) * d * 0.7) * s;
+          k.ellipse(parent, z, "forest", { name: "Tree", absolute: { x: x - z / 2, y: y - z / 2 } });
+          if (detail) k.ellipse(parent, z * 0.62, "canopy", { name: "Canopy", absolute: { x: x - z / 2 + z * 0.08, y: y - z / 2 + z * 0.06 } });
+        }
+      });
+      ORE_FIELDS.forEach(([cx, cy], oi) => {
+        const r = rng(oi + 90);
+        for (let i = 0; i < (detail ? 7 : 3); i++) {
+          const x = (cx + (r() - 0.5) * 150) * s, y = (cy + (r() - 0.5) * 90) * s, z = (16 + r() * 18) * s;
+          poly(k, parent, [[x, y - z * 1.3], [x + z * 0.7, y], [x, y + z * 0.9], [x - z * 0.7, y]], "ore", { name: "Ore crystal" });
+          if (detail) {
+            const f = poly(k, parent, [[x, y - z * 1.3], [x + z * 0.7, y], [x, y - z * 0.1]], "oreLight", { name: "Ore glint" });
+            drift(k, f, "opacity", 0.35, 0.6 + i * 0.13, i);
+          }
+        }
+      });
+    };
+    k.variantSet(
+      "Brass button",
+      "State",
+      ["Idle", "Hover", "Pressed"],
+      { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", padding: { top: 14, right: 30, bottom: 14, left: 30 }, radius: 6, props: { Label: "Back" }, description: "A riveted brass button: hover warms it to brass, pressing flashes verdigris." },
+      (state, id) => {
+        k.propText(id, "Label", { style: "Hint 18", color: state === "Idle" ? "parchment" : state === "Hover" ? "onBrass" : "onVerdigris", autoWidth: true });
+      },
+      (state) => ({ fill: state === "Idle" ? "panelHi" : state === "Hover" ? "brass" : "verdigris", stroke: { color: "brass", width: 2, align: "INSIDE" } })
+    );
+    k.changeTo("Brass button/Idle", "ON_HOVER", "Brass button/Hover", 120);
+    k.changeTo("Brass button/Hover", "ON_PRESS", "Brass button/Pressed", 60);
+    toggleComponent(k, { track: "bronzeDeep", on: "verdigris", knob: "parchment", stateStyle: "Small 16", ink: "parchment" });
+    const CD = { Short: 900, Medium: 1600, Long: 2600 };
+    k.variantSet("Cooldown", "State", ["Idle", "Short", "Medium", "Long"], { width: 176, height: 88, description: "A command button's cooldown sweep: change to Short / Medium / Long when the command fires; the veil drains and the button exhales when ready." }, (state, id) => {
+      const veil = k.rect(id, 176, 88, k.tint("void", 0.74), { name: "Veil", radius: 6, absolute: { x: 0, y: 0 }, opacity: 0 });
+      const edge = k.rect(id, 176, 3, "brass", { name: "Sweep edge", absolute: { x: 0, y: 0 }, opacity: 0, effects: [glow(k, "brass", 10)] });
+      const hand = poly(k, id, [[150, 44], [150, 16]], "brass", { name: "Clock hand", stroke: 3, opacity: 0 });
+      k.patch(hand, { anchorX: 0, anchorY: 1 });
+      const breath = k.rect(id, 176, 88, k.tint("verdigris", 0.3), { name: "Breath", radius: 6, absolute: { x: 0, y: 0 }, opacity: 0 });
+      const ring = k.rect(id, 176, 88, [], { name: "Exhale ring", radius: 8, stroke: { color: "verdigris", width: 3 }, absolute: { x: 0, y: 0 }, opacity: 0, effects: [glow(k, "verdigris", 16)] });
+      if (state === "Idle") return;
+      const d = CD[state];
+      keys(k, veil, "opacity", [{ t: 0, v: 1, ease: { kind: "hold" } }, { t: d - 60, v: 1, ease: { kind: "linear" } }, { t: d, v: 0 }]);
+      keys(k, veil, "height", [{ t: 0, v: 88, ease: { kind: "linear" } }, { t: d, v: 2 }]);
+      keys(k, edge, "opacity", [{ t: 0, v: 1, ease: { kind: "hold" } }, { t: d - 60, v: 1, ease: { kind: "linear" } }, { t: d, v: 0 }]);
+      keys(k, edge, "translateY", [{ t: 0, v: 85, ease: { kind: "linear" } }, { t: d, v: 0 }]);
+      keys(k, hand, "opacity", [{ t: 0, v: 1, ease: { kind: "hold" } }, { t: d - 60, v: 1, ease: { kind: "linear" } }, { t: d, v: 0 }]);
+      keys(k, hand, "rotation", [{ t: 0, v: 0, ease: { kind: "linear" } }, { t: d, v: -360 }]);
+      keys(k, breath, "opacity", [{ t: d, v: 0, ease: { kind: "ease", name: "cubic-out" } }, { t: d + 120, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: d + 440, v: 0 }]);
+      keys(k, ring, "opacity", [{ t: d, v: 0, ease: { kind: "ease", name: "cubic-out" } }, { t: d + 90, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: d + 440, v: 0 }]);
+      for (const [p, v] of [["scaleX", 1.07], ["scaleY", 1.16]]) keys(k, ring, p, [{ t: d, v: 1, ease: { kind: "ease", name: "back-out", param: 2 } }, { t: d + 200, v, ease: { kind: "ease", name: "cubic-in-out" } }, { t: d + 440, v: 1 }]);
+    }, (state) => state === "Idle" ? {} : { timeline: { duration: CD[state] + 480 } });
+    oneShot(k, "Ping", { width: 72, height: 72, state: "Ping", duration: 1500, description: "A minimap alert: change to Ping to ring the spot twice." }, (state, id) => {
+      for (const [i, delay] of [[0, 0], [1, 380]]) {
+        const r = k.ellipse(id, 72, [], { name: `Ping ring ${i + 1}`, stroke: { color: "oxideText", width: 3 }, absolute: { x: 0, y: 0 }, opacity: 0 });
+        if (state !== "Ping") continue;
+        keys(k, r, "opacity", [{ t: delay, v: 1, ease: { kind: "ease", name: "cubic-out" } }, { t: delay + 1e3, v: 0 }]);
+        for (const p of ["scaleX", "scaleY"]) keys(k, r, p, [{ t: delay, v: 0.15, ease: { kind: "ease", name: "expo-out" } }, { t: delay + 1e3, v: 1.3 }]);
+      }
+    });
+    oneShot(k, "Scan pulse", { width: 1800, height: 1800, state: "Pulse", duration: 1300, description: "The scouting wave that rolls out from the base when you scout." }, (state, id) => {
+      const r = k.ellipse(id, 1800, [], { name: "Pulse ring", stroke: { color: "verdigris", width: 6 }, absolute: { x: 0, y: 0 }, opacity: 0, effects: [glow(k, "verdigris", 30)] });
+      if (state !== "Pulse") return;
+      keys(k, r, "opacity", [{ t: 0, v: 0.9, ease: { kind: "ease", name: "cubic-in" } }, { t: 1250, v: 0 }]);
+      for (const p of ["scaleX", "scaleY"]) keys(k, r, p, [{ t: 0, v: 0.05, ease: { kind: "ease", name: "cubic-out" } }, { t: 1250, v: 1 }]);
+    });
+    oneShot(k, "Raid alert", { width: 820, height: 64, state: "Show", duration: 2300, description: 'The "base under attack" banner: change to Show on every raid.' }, (state, id) => {
+      if (state !== "Show") return;
+      const b = box(k, id, 0, 0, 820, 64, { name: "Alert plate", fill: "oxide", radius: 6, align: "CENTER", justify: "CENTER", stroke: { color: "oxideText", width: 2, align: "INSIDE" }, effects: [glow(k, "oxide", 30, 0.8)] });
+      k.text(b, "Your base is under attack", { style: "Alert 28", color: "onOxide", autoWidth: true, name: "Alert words" });
+      keys(k, b, "opacity", [{ t: 0, v: 0, ease: { kind: "hold" } }, { t: 60, v: 1, ease: { kind: "hold" } }, { t: 330, v: 0.3, ease: { kind: "hold" } }, { t: 480, v: 1, ease: { kind: "hold" } }, { t: 750, v: 0.3, ease: { kind: "hold" } }, { t: 900, v: 1, ease: { kind: "hold" } }, { t: 1900, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: 2250, v: 0 }]);
+      keys(k, b, "translateY", [{ t: 0, v: -30, ease: { kind: "ease", name: "back-out", param: 2 } }, { t: 300, v: 0 }]);
+    });
+    const TOASTS = { Poor: "Not enough ore or fuel", Blind: "Spire not in sight \u2014 scout first (S)", Capped: "Supply capped \u2014 build a depot" };
+    k.variantSet("Order toast", "State", ["Idle", "Poor", "Blind", "Capped"], { width: 700, height: 52, description: "Why an order failed: change to Poor, Blind or Capped; it pops, holds and fades." }, (state, id) => {
+      if (state === "Idle") return;
+      const b = box(k, id, 0, 0, 700, 52, { name: "Toast plate", fill: "panelHi", radius: 6, align: "CENTER", justify: "CENTER", stroke: { color: "oxideText", width: 2, align: "INSIDE" } });
+      k.text(b, TOASTS[state], { style: "HUD 16", color: "oxideText", autoWidth: true, name: "Toast words" });
+      keys(k, b, "opacity", [{ t: 0, v: 0, ease: { kind: "ease", name: "cubic-out" } }, { t: 120, v: 1, ease: { kind: "hold" } }, { t: 1250, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: 1560, v: 0 }]);
+      for (const p of ["scaleX", "scaleY"]) keys(k, b, p, [{ t: 0, v: 0.8, ease: { kind: "ease", name: "back-out", param: 2.5 } }, { t: 260, v: 1 }]);
+    }, (state) => state === "Idle" ? {} : { timeline: { duration: 1600 } });
+    oneShot(k, "Gauge needle", { width: 120, height: 120, state: "Spike", duration: 1100, description: "A gauge needle that spikes under attack (change to Spike)." }, (state, id) => {
+      const n = poly(k, id, [[57, 60], [60, 12], [63, 60], [60, 72]], "oxideText", { name: "Needle", effects: [glow(k, "oxide", 8, 0.6)] });
+      const nb = k.node(n);
+      k.patch(n, { anchorX: (60 - nb.x) / nb.width, anchorY: (60 - nb.y) / nb.height });
+      k.ellipse(id, 14, "brass", { name: "Needle hub", absolute: { x: 53, y: 53 }, stroke: { color: "bronzeDeep", width: 2 } });
+      if (state === "Spike") keys(k, n, "rotation", [{ t: 0, v: 0, ease: { kind: "ease", name: "expo-out" } }, { t: 110, v: 72, ease: { kind: "ease", name: "cubic-in-out" } }, { t: 420, v: -16, ease: { kind: "ease", name: "cubic-in-out" } }, { t: 680, v: 7, ease: { kind: "ease", name: "cubic-in-out" } }, { t: 1e3, v: 0 }]);
+    });
+    oneShot(k, "Spire hit", { width: 220, height: 220, duration: 760, description: "The Canker Spire flashes and rings when a strike lands." }, (state, id) => {
+      const f = k.ellipse(id, 220, "oreLight", { name: "Impact flash", absolute: { x: 0, y: 0 }, opacity: 0, effects: [glow(k, "enemyGlow", 40)] });
+      const r = k.ellipse(id, 220, [], { name: "Shock ring", stroke: { color: "oreLight", width: 5 }, absolute: { x: 0, y: 0 }, opacity: 0 });
+      if (state !== "Hit") return;
+      keys(k, f, "opacity", [{ t: 0, v: 0.85, ease: { kind: "ease", name: "expo-out" } }, { t: 380, v: 0 }]);
+      for (const p of ["scaleX", "scaleY"]) keys(k, f, p, [{ t: 0, v: 0.4, ease: { kind: "ease", name: "expo-out" } }, { t: 380, v: 0.9 }]);
+      keys(k, r, "opacity", [{ t: 0, v: 1, ease: { kind: "ease", name: "cubic-out" } }, { t: 720, v: 0 }]);
+      for (const p of ["scaleX", "scaleY"]) keys(k, r, p, [{ t: 0, v: 0.3, ease: { kind: "ease", name: "expo-out" } }, { t: 720, v: 1.5 }]);
+    });
+    oneShot(k, "Queue bar", { width: 288, height: 14, state: "Training", duration: 2600, description: "The build queue's progress: change to Training when a unit is queued." }, (state, id) => {
+      const f = k.rect(id, 288, 14, [k.gradient({ from: "verdigrisDeep", to: "verdigris", angle: 0 })], { name: "Queue fill", radius: 7, absolute: { x: 0, y: 0 }, opacity: 0 });
+      const g = k.rect(id, 288, 14, "brass", { name: "Queue flash", radius: 7, absolute: { x: 0, y: 0 }, opacity: 0, effects: [glow(k, "brass", 14)] });
+      if (state !== "Training") return;
+      keys(k, f, "opacity", [{ t: 0, v: 1, ease: { kind: "hold" } }, { t: 2380, v: 1, ease: { kind: "linear" } }, { t: 2560, v: 0 }]);
+      keys(k, f, "width", [{ t: 0, v: 4, ease: { kind: "ease", name: "sine-in-out" } }, { t: 2200, v: 288 }]);
+      keys(k, g, "opacity", [{ t: 2200, v: 0, ease: { kind: "ease", name: "expo-out" } }, { t: 2260, v: 0.9, ease: { kind: "ease", name: "cubic-in" } }, { t: 2560, v: 0 }]);
+    });
+    oneShot(k, "Unit ready", { width: 200, height: 40, state: "Show", duration: 1100, description: `The counter's "+1 unit" float, on every unit trained.` }, (state, id) => {
+      if (state !== "Show") return;
+      const t = k.text(id, "+1 unit", { style: "HUD 16", color: "verdigris", absolute: { x: 0, y: 10 }, width: 200, name: "Ready words" });
+      keys(k, t, "opacity", [{ t: 0, v: 0, ease: { kind: "ease", name: "cubic-out" } }, { t: 120, v: 1, ease: { kind: "hold" } }, { t: 700, v: 1, ease: { kind: "ease", name: "cubic-in" } }, { t: 1050, v: 0 }]);
+      keys(k, t, "translateY", [{ t: 0, v: 14, ease: { kind: "ease", name: "cubic-out" } }, { t: 1050, v: -20 }]);
+    });
+    oneShot(k, "Raid flash", { width: W, height: H, duration: 600, description: "The screen edges flush oxide red on every raid." }, (state, id) => {
+      const f = k.rect(id, W, H, [k.gradient({ from: "oxide", to: "oxide", kind: "RADIAL", fromOpacity: 0, toOpacity: 0.7, handles: [{ x: 0.5, y: 0.5 }, { x: 1.05, y: 0.5 }, { x: 0.5, y: 1.1 }] })], { name: "Flash", absolute: { x: 0, y: 0 }, opacity: 0 });
+      if (state === "Hit") keys(k, f, "opacity", [{ t: 0, v: 1, ease: { kind: "ease", name: "expo-out" } }, { t: 560, v: 0 }]);
+    });
+    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 factionScreen = screen(k, "Faction select", { ground: "void" });
+    const briefing = screen(k, "Mission briefing", { ground: "void" });
+    const load = screen(k, "Load campaign", { ground: "void" });
+    const settings = screen(k, "Settings", { ground: "void" });
+    const credits = screen(k, "Credits", { ground: "void", duration: 12e3 });
+    const hud = screen(k, "Battle HUD", { ground: "soil" });
+    const tech = screen(k, "Tech tree", { ground: "void", fills: k.tint("scrim", 0.86) });
+    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: "void" });
+    k.flowStart(boot, "Play IRONROOT DOMINION");
+    const pickStats = (i) => [
+      set(faction.id, { value: i, glide: 160 }),
+      set(industry.id, { value: FACTIONS[i].stats[0], glide: 450 }),
+      set(might.id, { value: FACTIONS[i].stats[1], glide: 450 }),
+      set(guile.id, { value: FACTIONS[i].stats[2], glide: 450 })
+    ];
+    const selectSquad = (i) => {
+      const c = camFor(SQUADS[i].at);
+      return [
+        set(sel.id, { value: i + 1 }),
+        set(atk.id, { value: SQUADS[i].atk, glide: 420 }),
+        set(arm.id, { value: SQUADS[i].arm, glide: 420 }),
+        set(spd.id, { value: SQUADS[i].spd, glide: 420 }),
+        set(camX.id, { value: c.x, glide: 700, easing: "EASE_IN_OUT" }),
+        set(camY.id, { value: c.y, glide: 700, easing: "EASE_IN_OUT" })
+      ];
+    };
+    const home = camFor(BASE);
+    const resetRun = [
+      set(ore.id, { expression: `400 + (${faction.n} == 0 ? 150 : 0)` }),
+      set(fuel.id, { expression: `200 + (${faction.n} == 1 ? 80 : 0)` }),
+      set(supply.id, { value: 6 }),
+      set(cap.id, { value: 20 }),
+      set(oreMined.id, { value: 0 }),
+      set(yieldV.id, { value: 50 }),
+      set(trained.id, { value: 0 }),
+      set(sporelings.id, { value: 0 }),
+      set(thornbacks.id, { value: 0 }),
+      set(depots.id, { value: 0 }),
+      ...hp.map((h) => set(h.id, { value: 100 })),
+      set(baseHp.id, { value: 100 }),
+      set(baseTrail.id, { value: 100 }),
+      set(dmgTaken.id, { value: 15 }),
+      set(braced.id, { value: 0 }),
+      set(coreHp.id, { value: 120 }),
+      set(coreTrail.id, { value: 120 }),
+      set(scout.id, { expression: `${faction.n} == 2 ? 1 : 0` }),
+      set(camX.id, { value: home.x }),
+      set(camY.id, { value: home.y }),
+      set(plating.id, { value: 0 }),
+      set(taproots.id, { value: 0 }),
+      set(tier.id, { value: 0 }),
+      set(actions.id, { value: 0 }),
+      set(raids.id, { value: 0 }),
+      set(sel.id, { value: 1 }),
+      set(atk.id, { value: SQUADS[0].atk }),
+      set(arm.id, { value: SQUADS[0].arm }),
+      set(spd.id, { value: SQUADS[0].spd })
+    ];
+    const toBattle = go(hud, "ZOOM_THROUGH", { duration: 600 });
+    {
+      k.rect(boot, W, H, [k.gradient({ from: "oxideDeep", to: "void", kind: "RADIAL", fromOpacity: 0.45, toOpacity: 0, handles: [{ x: 0.5, y: 0.9 }, { x: 1.1, y: 0.9 }, { x: 0.5, y: 1.6 }] })], { name: "Furnace glow", absolute: { x: 0, y: 0 } });
+      gear(boot, 960, 330, 110, 14, 30, "bronze", "void");
+      k.logo(boot, 110, 110, { absolute: { x: 905, y: 275 } });
+      label(k, boot, "{{brand.studio}}", "Studio 28", "parchment", 160, 470, { w: 1600, align: "CENTER", name: "Studio" });
+      label(k, boot, "Presents", "Small 16", "dim", 160, 516, { w: 1600, align: "CENTER", name: "Presents" });
+      const log = box(k, boot, 560, 600, 800, 200, { name: "Foundry log", gap: 2 });
+      for (const t of ["> stoking boilers .............. 212 psi", "> grafting rootstock ............ OK", "> charting the Hollow Reach ...... 4 rings", "> warden sworn .......... H. ASHGROVE"]) k.text(log, t, { style: "Boot 20", color: "verdigris", name: "Log line" });
+      const pbar = box(k, boot, 560, 830, 800, 10, { name: "Pressure bar", fill: "bronzeDeep", radius: 5, clip: true });
+      const pf = k.rect(pbar, 800, 10, [k.gradient({ from: "oxide", to: "brass", angle: 0 })], { name: "Pressure fill", radius: 5, absolute: { x: 0, y: 0 } });
+      keys(k, pf, "width", [{ t: 200, v: 10, ease: { kind: "ease", name: "cubic-in-out" } }, { t: 3e3, v: 800 }]);
+      k.cues(boot, [
+        { layer: "{{brand.logo}}", preset: "scale-in", at: 0 },
+        { layer: "Studio", preset: "fade-in", at: 300 },
+        { layer: "Log line", preset: "typewriter", at: 700, params: { duration: 420 }, stagger: { delay: 520 } }
+      ]);
+      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 });
+    }
+    {
+      k.rect(title, W, H, [k.gradient({ from: "oxide", to: "void", kind: "RADIAL", fromOpacity: 0.28, toOpacity: 0, handles: [{ x: 0.7, y: 0.75 }, { x: 1.35, y: 0.75 }, { x: 0.7, y: 1.5 }] })], { name: "Dusk glow", absolute: { x: 0, y: 0 } });
+      poly(k, title, [[0, 860], [220, 800], [420, 830], [700, 760], [980, 810], [1260, 740], [1560, 790], [1920, 720], [1920, 1080], [0, 1080]], "soil", { name: "Far hills" });
+      for (const [x, h] of [[40, 130], [90, 96], [1760, 170], [1812, 120]]) {
+        k.rect(title, 34, h, "loam", { name: "Smokestack", absolute: { x, y: 800 - h } });
+        const puff = k.ellipse(title, 46, "smoke", { name: "Smoke", absolute: { x: x - 6, y: 770 - h }, opacity: 0.35 });
+        k.behave(puff, "translateY", [{ kind: "spin", rate: -24 }, { kind: "mod", period: 90, offset: -90 }]);
+        drift(k, puff, "opacity", 0.15, 0.5, x);
+      }
+      poly(k, title, [[0, 960], [300, 900], [640, 940], [1e3, 880], [1400, 930], [1920, 870], [1920, 1080], [0, 1080]], "loam", { name: "Near hills" });
+      const tree = box(k, title, 880, 0, 1040, 1080, { name: "Iron tree" });
+      k.rect(tree, 1040, 1080, [k.gradient({ from: "verdigris", to: "verdigris", kind: "RADIAL", fromOpacity: 0.22, toOpacity: 0, handles: [{ x: 0.5, y: 0.4 }, { x: 1, y: 0.4 }, { x: 0.5, y: 0.9 }] })], { name: "Canopy glow", absolute: { x: 0, y: 0 } });
+      const roots = [[[520, 900], [380, 980], [250, 1e3], [120, 1080]], [[520, 900], [470, 1e3], [420, 1080]], [[520, 900], [640, 990], [720, 1080]], [[520, 900], [700, 960], [880, 1e3], [1e3, 1080]]];
+      for (const r of roots) {
+        poly(k, tree, r, "bronzeDeep", { name: "Root", stroke: 26 });
+        poly(k, tree, r, "bronze", { name: "Root plate", stroke: 10 });
+      }
+      poly(k, tree, [[440, 1e3], [470, 700], [455, 520], [500, 360], [540, 360], [585, 520], [570, 700], [600, 1e3]], "bronze", { name: "Trunk" });
+      poly(k, tree, [[470, 700], [455, 520], [500, 360], [520, 360], [505, 520], [520, 700], [500, 1e3], [440, 1e3]], "bronzeDeep", { name: "Trunk shade" });
+      for (const y of [560, 680, 800, 920]) poly(k, tree, [[452, y], [592, y - 14]], "brassDim", { name: "Trunk band", stroke: 6 });
+      for (const [x, y] of [[520, 610], [540, 740], [505, 860]]) k.ellipse(tree, 10, "rivet", { name: "Trunk rivet", absolute: { x, y } });
+      const branches = [[[500, 420], [360, 320], [230, 300]], [[520, 380], [520, 220], [470, 130]], [[540, 420], [700, 310], [830, 290]], [[500, 520], [340, 470], [190, 480]], [[560, 520], [720, 470], [880, 500]]];
+      for (const b of branches) poly(k, tree, b, "bronze", { name: "Branch", stroke: 20 });
+      const canopy = box(k, tree, 0, 0, 1040, 700, { name: "Canopy" });
+      const cr = rng(7);
+      for (let i = 0; i < 26; i++) {
+        const a = cr() * TAU, d = 120 + cr() * 300;
+        const x = 520 + Math.cos(a) * d * 1.15, y = 330 + Math.sin(a) * d * 0.6, z = 90 + cr() * 90;
+        k.ellipse(canopy, z, i % 3 === 0 ? "verdigrisDeep" : i % 3 === 1 ? "mossDeep" : "verdigris", { name: "Leaf mass", absolute: { x: x - z / 2, y: y - z / 2 }, opacity: i % 3 === 2 ? 0.55 : 0.9 });
+      }
+      drift(k, canopy, "translateX", 5, 0.18);
+      gear(tree, 520, 300, 96, 14, 16);
+      gear(tree, 520 + 96 + 58, 300 - 20, 64, 9, -24, "brassDim");
+      gear(tree, 350, 250, 58, 8, -26, "brassDim");
+      gear(tree, 760, 420, 44, 7, 34);
+      gear(tree, 290, 430, 38, 6, 40);
+      for (let i = 0; i < 12; i++) {
+        const lf = poly(k, tree, [[0, 8], [10, 0], [22, 6], [12, 16]].map(([x, y]) => [x + 120 + i * 72, y + 240 + i % 4 * 60]), i % 2 ? "moss" : "verdigris", { name: "Falling leaf" });
+        k.behave(lf, "translateY", [{ kind: "spin", rate: 50 + i % 5 * 12 }, { kind: "mod", period: 820, offset: -(i * 67) % 820 }]);
+        drift(k, lf, "translateX", 30, 0.25 + i % 3 * 0.08, i * 0.7);
+        drift(k, lf, "rotation", 50, 0.4 + i % 4 * 0.1, i);
+      }
+      const lock = k.stack(title, { name: "Title lockup", width: 960, gap: 24, absolute: { x: 120, y: 250 } });
+      k.text(lock, "A {{brand.studio}} war of root and rivet", { style: "Small 16", color: "brass", name: "Kicker" });
+      k.text(lock, "{{brand.title}}", { style: "Title 132", color: "parchment", name: "Title" });
+      k.rect(lock, 180, 6, "oxide", { name: "Title rule" });
+      k.text(lock, "{{brand.tagline}}", { style: "Tagline 28", color: "dim", name: "Tagline", width: 860 });
+      const prompt = label(k, title, "Press any key", "Prompt 24", "brass", 120, 900, { w: 800, name: "Prompt" });
+      drift(k, prompt, "opacity", 0.3, 0.7);
+      label(k, title, '\xA9 2026 {{brand.studio}}  \xB7  build 0.7.2 "Sapwood"', "Small 16", "dim", 120, 1010, { w: 900, name: "Legal" });
+      k.cues(title, [
+        { layer: "Title lockup", preset: "blur-in", at: 0 },
+        { layer: "Iron tree", preset: "rise-in", at: 150, params: { distance: 60 } },
+        { layer: "Prompt", preset: "fade-in", at: 900 }
+      ]);
+      k.link(title, main, "DISSOLVE", { key: "*", duration: 400 });
+      k.link(title, main, "DISSOLVE", { duration: 400 });
+    }
+    {
+      menuGround(main);
+      label(k, main, "{{brand.title}}", "Heading 60", "parchment", 120, 96, { w: 1e3, name: "Wordmark" });
+      k.rect(main, 140, 6, "oxide", { name: "Wordmark rule", absolute: { x: 124, y: 60 } });
+      menu(k, main, [
+        { label: "Campaign", hint: "Mission 3 \xB7 Rusted Canopy", actions: [go(factionScreen, "PUSH_FROM_RIGHT", { duration: 380 })] },
+        { label: "Skirmish", hint: "Straight to the field", actions: [...resetRun, toBattle] },
+        { label: "Load", hint: "3 saved campaigns", actions: [go(load, "PUSH_FROM_RIGHT", { duration: 380 })] },
+        { label: "Settings", actions: [go(settings, "PUSH_FROM_RIGHT", { duration: 380 })] },
+        { label: "Credits", actions: [go(credits, "DISSOLVE", { duration: 400 })] },
+        { label: "Quit", hint: "Back to the title", actions: [go(title, "DISSOLVE", { duration: 400 })] }
+      ], { focus: menuFocus, x: 100, y: 300, width: 900, pitch: 88, style: "Menu 38", color: "parchment", plate: [k.gradient({ from: "brass", to: "brass", angle: 0, fromOpacity: 0.42, toOpacity: 0 })], marker: { color: "brass" }, hintStyle: "Hint 18", radius: 4 });
+      const card = plate(main, 1180, 290, 620, 560, { name: "War table" });
+      const rose = box(k, card, 190, 40, 240, 240, { name: "Compass rose" });
+      k.ellipse(rose, 240, "panelHi", { name: "Rose disc", stroke: { color: "brass", width: 3 }, absolute: { x: 0, y: 0 } });
+      spinAbout(arc(k, rose, 120, 120, 104, 0, TAU * 0.85, "verdigris", 3, { name: "Rose ring" }), 120, 120, 12);
+      const needle = poly(k, rose, [[120, 30], [136, 120], [120, 210], [104, 120]], "brass", { name: "Rose needle" });
+      poly(k, rose, [[120, 30], [136, 120], [104, 120]], "oxide", { name: "Rose north" });
+      k.behave(needle, "rotation", [{ kind: "noise", amp: 8, freq: 0.6, seed: 4 }]);
+      readout(k, card, commander.n, "WARDEN HESPER ASHGROVE", "Unit 30", "parchment", 40, 310, { w: 540, align: "CENTER", name: "Commander" });
+      readout(k, card, FACTIONS.map((f, i) => `${faction.n} == ${i} ? "${f.name.toUpperCase()}"`).join(" : ") + ' : ""', FACTIONS[0].name.toUpperCase(), "Small 16", "brass", 40, 356, { w: 540, align: "CENTER", name: "Dominion" });
+      label(k, card, '"The Hollow Choir has crossed the Mireglass. Hold the Heartwood, Warden, and break their spire."', "Quote 22", "dim", 60, 400, { w: 500, align: "CENTER", name: "Dispatch quote" });
+      const tick = box(k, main, 0, 930, W, 40, { name: "Dispatch ticker", clip: true, fill: k.tint("panel", 0.9) });
+      const words = label(k, tick, "DISPATCH  \xB7  Boilers at the Heartwood holding 212 psi  \xB7  Choir scouts seen past the Mireglass ford  \xB7  Ore seam east of the river runs rich  \xB7  Thornback plans recovered from the Oxide Reach  \xB7  ", "Small 16", "dim", 0, 9, { name: "Ticker words" });
+      k.behave(words, "translateX", [{ kind: "spin", rate: -55 }, { kind: "mod", period: 1300, offset: -1300 }]);
+      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: 60 } }, { layer: "War table", preset: "rise-in", at: 200 }]);
+    }
+    {
+      menuGround(factionScreen);
+      label(k, factionScreen, "Choose your dominion", "Heading 60", "parchment", 120, 70, { name: "Screen title" });
+      label(k, factionScreen, "Each dominion fields its own units and starts with its own edge.", "Body 22", "dim", 124, 146, { name: "Screen lead" });
+      const emblem = (parent, i, cx, cy) => {
+        if (i === 0) {
+          gear(parent, cx, cy, 60, 10, 10);
+          poly(k, parent, [[cx, cy - 34], [cx + 22, cy], [cx, cy + 30], [cx - 22, cy]], "moss", { name: "Emblem leaf" });
+        }
+        if (i === 1) {
+          poly(k, parent, [[cx, cy - 64], [cx + 56, cy + 40], [cx - 56, cy + 40]], "oxide", { name: "Emblem flame" });
+          poly(k, parent, [[cx, cy - 24], [cx + 24, cy + 28], [cx - 24, cy + 28]], "oreLight", { name: "Emblem core" });
+        }
+        if (i === 2) {
+          poly(k, parent, ellipsePts(cx, cy, 64, 36), "verdigrisDeep", { name: "Emblem lens" });
+          poly(k, parent, [[cx - 64, cy], [cx, cy - 40], [cx + 64, cy], [cx, cy + 40]], "verdigris", { name: "Emblem eye" });
+          k.ellipse(parent, 30, "void", { name: "Emblem pupil", absolute: { x: cx - 15, y: cy - 15 } });
+        }
+      };
+      FACTIONS.forEach((f, i) => {
+        const near = `max(0, 1 - abs(${faction.n} - ${i}))`;
+        const card = plate(factionScreen, 120 + i * 570, 210, 540, 400, { name: "Faction card" });
+        const hl = k.rect(card, 540, 190, [k.gradient({ from: "brass", to: "brass", angle: 90, fromOpacity: 0.34, toOpacity: 0 })], { name: "Chosen glow", radius: 6, absolute: { x: 0, y: 0 } });
+        k.bindExpression(hl, "opacity", near);
+        const rim = k.rect(card, 540, 400, [], { name: "Chosen rim", radius: 6, stroke: { color: "brass", width: 4 }, absolute: { x: 0, y: 0 }, effects: [glow(k, "brass", 20, 0.6)] });
+        k.bindExpression(rim, "opacity", near);
+        k.bindExpression(card, "translateY", `${near} * -14`);
+        emblem(card, i, 270, 110);
+        label(k, card, f.name, "Card 30", "parchment", 20, 200, { w: 500, align: "CENTER", name: "Faction name" });
+        label(k, card, f.motto, "Quote 22", "dim", 40, 244, { w: 460, align: "CENTER", name: "Faction motto" });
+        label(k, card, f.bonus, "Small 16", "brass", 20, 336, { w: 500, align: "CENTER", name: "Faction bonus" });
+        k.on(card, when([{ if: "true", then: pickStats(i) }]), { trigger: "MOUSE_ENTER" });
+        onAll(k, card, pickStats(i));
+      });
+      const stats = plate(factionScreen, 120, 650, 820, 280, { name: "Dominion stats" });
+      label(k, stats, "Dominion traits", "Small 16", "brass", 40, 28, { name: "Stats title" });
+      [["Industry", industry], ["Might", might], ["Guile", guile]].forEach(([name, v], i) => {
+        label(k, stats, name, "Label 24", "parchment", 40, 66 + i * 66, { name: "Trait name" });
+        bar(k, stats, { x: 200, y: 78 + i * 66, w: 460, h: 14, value: v.n, max: "100", back: "bronzeDeep", fill: [k.gradient({ from: "verdigrisDeep", to: "brass", angle: 0 })], radius: 7, name: `${name} bar` });
+        readout(k, stats, `round(${v.n})`, String(FACTIONS[0].stats[i]), "Value 24", "brass", 680, 66 + i * 66, { w: 100, align: "RIGHT", name: "Trait value" });
+      });
+      const roster = plate(factionScreen, 980, 650, 820, 280, { name: "Unit roster" });
+      label(k, roster, "Unit roster", "Small 16", "brass", 40, 28, { name: "Roster title" });
+      for (let u = 0; u < 3; u++) {
+        const slot = box(k, roster, 40 + u * 250, 64, 230, 180, { name: "Roster slot", fill: "panelHi", radius: 6, stroke: { color: "bronzeDeep", width: 2 } });
+        FACTIONS.forEach((f, i) => {
+          const g = box(k, slot, 0, 0, 230, 180, { name: `${f.name} unit` });
+          k.bindExpression(g, "visible", `round(${faction.n}) == ${i}`);
+          const cx = 115, cy = 64, col = i === 0 ? "moss" : i === 1 ? "oxide" : "verdigris";
+          if (u === 0) {
+            poly(k, g, [[cx, cy - 36], [cx + 32, cy + 26], [cx - 32, cy + 26]], col, { name: "Unit icon" });
+            poly(k, g, [[cx, cy - 12], [cx + 12, cy + 12], [cx - 12, cy + 12]], "void", { name: "Unit eye" });
+          }
+          if (u === 1) {
+            poly(k, g, Array.from({ length: 6 }, (_, j) => polar(cx, cy, 38, j / 6 * TAU)), col, { name: "Unit icon" });
+            k.rect(g, 44, 10, "void", { name: "Unit slot", absolute: { x: cx - 22, y: cy - 5 } });
+          }
+          if (u === 2) {
+            poly(k, g, gearPts(cx, cy, 42, 8), col, { name: "Unit icon" });
+            poly(k, g, [[cx, cy - 20], [cx + 18, cy + 14], [cx - 18, cy + 14]], "void", { name: "Unit eye" });
+          }
+          label(k, g, f.roster[u], "HUD 16", "parchment", 10, 130, { w: 210, align: "CENTER", name: "Unit name" });
+        });
+        drift(k, slot, "translateY", 4, 0.4, u);
+      }
+      const choose = k.instance(factionScreen, "Brass button", { Label: "Command this dominion  ENTER" }, { name: "Choose faction", absolute: { x: 1400, y: 950 } });
+      k.on(choose, go(briefing, "SLIDE_FROM_RIGHT", { duration: 450 }));
+      for (const key of ["ArrowRight", "d"]) k.on(factionScreen, when(FACTIONS.map((_, i) => ({ if: `${faction.n} == ${i}`, then: pickStats((i + 1) % 3) }))), { key });
+      for (const key of ["ArrowLeft", "a"]) k.on(factionScreen, when(FACTIONS.map((_, i) => ({ if: `${faction.n} == ${i}`, then: pickStats((i + 2) % 3) }))), { key });
+      k.on(factionScreen, go(briefing, "SLIDE_FROM_RIGHT", { duration: 450 }), { key: "Enter" });
+      k.on(factionScreen, back(), { key: "Escape" });
+      label(k, factionScreen, "LEFT RIGHT  CHOOSE      ENTER  CONFIRM      ESC  BACK", "Hint 18", "dim", 120, 970, { name: "Faction hints" });
+      k.cues(factionScreen, [{ layer: "Faction card", preset: "rise-in", at: 0, stagger: { delay: 90 } }, { layer: "Dominion stats", preset: "fade-in", at: 400 }, { layer: "Unit roster", preset: "fade-in", at: 500 }]);
+    }
+    {
+      menuGround(briefing);
+      label(k, briefing, "Operation Rusted Canopy", "Heading 60", "parchment", 120, 60, { name: "Screen title" });
+      label(k, briefing, "Mission 3  \xB7  The Hollow Reach  \xB7  Dawn", "Small 16", "brass", 124, 136, { name: "Mission line" });
+      const chartPlate = plate(briefing, 120, 180, 1060, 620, { name: "Chart" });
+      const S = 1020 / WORLD.w;
+      const chart = box(k, chartPlate, 20, 60, 1020, Math.round(WORLD.h * S), { name: "Chart map", fill: "soil", clip: true, radius: 4 });
+      terrain(chart, S, false);
+      label(k, chartPlate, "Survey of the Hollow Reach", "Small 16", "brass", 24, 22, { name: "Chart title" });
+      const route = poly(k, chart, scalePts(TRAIL, S), "brass", { name: "Route", stroke: 4, opacity: 0.9 });
+      void route;
+      const markers = [[BASE, "Heartwood", "verdigris"], [ORE_FIELDS[0], "Ore seam", "ore"], [ORE_FIELDS[2], "Choir outpost", "enemy"], [CORE, "Canker Spire", "enemy"], [ORE_FIELDS[1], "Deep seam", "ore"]];
+      for (const [[x, y], name, col] of markers) {
+        const m = box(k, chart, x * S - 90, y * S - 22, 180, 70, { name: "Objective marker" });
+        poly(k, m, [[90, 0], [112, 22], [90, 44], [68, 22]], col, { name: "Marker diamond", effects: [glow(k, col, 14, 0.7)] });
+        poly(k, m, [[90, 10], [102, 22], [90, 34], [78, 22]], "void", { name: "Marker pip" });
+        const tag = box(k, m, 20, 46, 140, 24, { name: "Marker tag", fill: k.tint("void", 0.85), radius: 4, align: "CENTER", justify: "CENTER" });
+        k.text(tag, name, { style: "HUD 16", color: "parchment", autoWidth: true, name: "Marker name" });
+      }
+      const core = k.named(chart, "Objective marker")[3];
+      drift(k, core, "scaleX", 0.06, 1.2);
+      drift(k, core, "scaleY", 0.06, 1.2);
+      const cmd = plate(briefing, 1220, 180, 580, 620, { name: "Commander" });
+      const face = box(k, cmd, 30, 36, 190, 190, { name: "Portrait", fill: "panelHi", radius: 95, clip: true, stroke: { color: "brass", width: 3, align: "INSIDE" } });
+      poly(k, face, [[40, 190], [60, 140], [95, 128], [130, 140], [150, 190]], "bronzeDeep", { name: "Coat" });
+      poly(k, face, [[58, 96], [62, 52], [95, 32], [128, 52], [132, 96], [118, 128], [72, 128]], "bronze", { name: "Helm" });
+      poly(k, face, [[66, 70], [124, 70], [118, 88], [72, 88]], "verdigris", { name: "Visor", effects: [glow(k, "verdigris", 14)] });
+      k.ellipse(face, 34, "brassDim", { name: "Respirator", absolute: { x: 78, y: 96 }, stroke: { color: "bronzeDeep", width: 2 } });
+      poly(k, face, [[95, 32], [100, 12], [106, 32]], "oxide", { name: "Crest" });
+      drift(k, k.named(face, "Visor")[0], "opacity", 0.25, 0.8);
+      readout(k, cmd, commander.n, "WARDEN HESPER ASHGROVE", "Unit 30", "parchment", 240, 56, { w: 310, name: "Commander name" });
+      label(k, cmd, "Warden of the Heartwood", "Small 16", "brass", 240, 150, { w: 310, name: "Commander rank" });
+      const orders = box(k, cmd, 30, 250, 520, 250, { name: "Orders", gap: 8 });
+      for (const t of ["The Hollow Choir has raised a spire east of the river.", "Scout the fog ring by ring until it stands in sight.", "Mine the seams, feed the boilers, grow the army.", "Then strike, and bring the Canker Spire down."]) k.text(orders, t, { style: "Body 22", color: "parchment", name: "Order line" });
+      const obj = box(k, cmd, 30, 510, 520, 90, { name: "Objectives", gap: 4 });
+      for (const t of ["Primary  \xB7  topple the Canker Spire", "Secondary  \xB7  chart all four fog rings", "Optional  \xB7  keep the Heartwood above 60"]) k.text(obj, t, { style: "Small 16", color: "dim", name: "Objective line" });
+      const deploy = k.instance(briefing, "Brass button", { Label: "Deploy  ENTER" }, { name: "Deploy", absolute: { x: 1570, y: 840 } });
+      onAll(k, deploy, [...resetRun, toBattle]);
+      onAll(k, briefing, [...resetRun, toBattle], { key: "Enter" });
+      k.on(briefing, back(), { key: "Escape" });
+      hintBar(briefing, "ENTER  DEPLOY      ESC  BACK TO FACTIONS");
+      k.cues(briefing, [
+        { layer: "Objective marker", preset: "pop-in", at: 300, stagger: { delay: 220 } },
+        { layer: "Order line", preset: "typewriter", at: 500, params: { duration: 520 }, stagger: { delay: 560 } },
+        { layer: "Portrait", preset: "scale-in", at: 100 }
+      ]);
+    }
+    {
+      menuGround(load);
+      label(k, load, "Load campaign", "Heading 60", "parchment", 120, 90, { name: "Screen title" });
+      label(k, load, "Pick up the war where you left it.", "Body 22", "dim", 124, 166, { name: "Screen lead" });
+      menu(k, load, [
+        ...SAVES.map((s) => ({ label: s.name, hint: s.hint, actions: [...resetRun, set(ore.id, { value: s.ore }), set(fuel.id, { value: s.fuel }), set(scout.id, { value: s.scout }), set(trained.id, { value: s.trained }), set(sporelings.id, { value: s.trained }), set(supply.id, { value: 6 + s.trained * 2 }), toBattle] })),
+        { label: "Back", actions: [back()] }
+      ], { focus: loadFocus, x: 100, y: 280, width: 1300, pitch: 100, style: "Menu 38", color: "parchment", plate: [k.gradient({ from: "brass", to: "brass", angle: 0, fromOpacity: 0.42, toOpacity: 0 })], marker: { color: "brass" }, hintStyle: "Hint 18", escape: [back()], radius: 4 });
+      hintBar(load, "\u2191 \u2193  SELECT      ENTER  LOAD      ESC  BACK");
+      k.cues(load, [{ layer: "Menu item", preset: "slide-in", at: 0, params: { direction: "left" }, stagger: { delay: 70 } }]);
+    }
+    {
+      menuGround(settings);
+      label(k, settings, "Settings", "Heading 60", "parchment", 120, 80, { name: "Screen title" });
+      const col = box(k, settings, 120, 190, 1100, 720, { name: "Settings list" });
+      const rows = 9;
+      focusColumn(k, settings, { focus: setFocus, count: rows, x: 100, y: 186, w: 1140, pitch: 80, plate: [k.gradient({ from: "brass", to: "brass", angle: 0, fromOpacity: 0.3, toOpacity: 0.04 })], guard: `${rebind.n} == ""`, escape: [back()] });
+      const common = { labelStyle: "Label 24", ink: "parchment" };
+      const sl = { ...common, valueStyle: "Value 24", track: "bronzeDeep", fill: "verdigris", knob: "brass" };
+      const rowsAt = (i) => ({ x: 0, y: i * 80, width: 1100, focus: { n: setFocus.n, index: i } });
+      const r0 = slider(k, col, { ...sl, ...rowsAt(0), label: "Master volume", variable: volume, suffix: "%" });
+      const r1 = slider(k, col, { ...sl, ...rowsAt(1), label: "Music", variable: music, suffix: "%" });
+      const r2 = slider(k, col, { ...sl, ...rowsAt(2), label: "Scroll speed", variable: scroll, min: 1, max: 10, step: 1 });
+      const r3 = slider(k, col, { ...sl, ...rowsAt(3), label: "UI scale", variable: uiScale, min: 80, max: 120, step: 5, suffix: "%" });
+      const r4 = toggle(k, col, { ...common, ...rowsAt(4), label: "Unit health bars", variable: hpBars });
+      const r5 = toggle(k, col, { ...common, ...rowsAt(5), label: "Minimap alert pings", variable: pings });
+      const kb = { ...common, capStyle: "Cap 20", cap: "panelHi", onCap: "brass", listening: "oxide", rebind };
+      const r6 = keybind(k, col, { ...kb, ...rowsAt(6), action: "Build depot", slot: "build", variable: keyBuild });
+      const r7 = keybind(k, col, { ...kb, ...rowsAt(7), action: "Attack (strike)", slot: "attack", variable: keyAttack });
+      const r8 = keybind(k, col, { ...kb, ...rowsAt(8), action: "Stop (hold)", slot: "stop", variable: keyStop });
+      [r0, r1, r2, r3, r4, r5, r6, r7, r8].forEach((r, i) => focusRow(k, r, setFocus, i));
+      rebindListener(k, settings, rebind, [{ slot: "build", variable: keyBuild }, { slot: "attack", variable: keyAttack }, { slot: "stop", variable: keyStop }]);
+      const pv = plate(settings, 1320, 190, 480, 560, { name: "Preview" });
+      label(k, pv, "UI scale preview", "Small 16", "brass", 32, 28, { name: "Preview title" });
+      const btn = box(k, pv, 152, 90, 176, 88, { name: "Preview button", fill: "panelHi", radius: 6, stroke: { color: "bronze", width: 2, align: "INSIDE" } });
+      poly(k, btn, [[20, 64], [40, 24], [60, 64]], "moss", { name: "Preview icon" });
+      label(k, btn, "Train", "Cmd 17", "parchment", 74, 18, { name: "Preview name" });
+      label(k, btn, "50 ore", "Cost 16", "brass", 74, 52, { name: "Preview cost" });
+      k.bindExpression(btn, "scaleX", `${uiScale.n} / 100`);
+      k.bindExpression(btn, "scaleY", `${uiScale.n} / 100`);
+      label(k, pv, "Camera step", "Small 16", "brass", 32, 250, { name: "Step title" });
+      const lane = box(k, pv, 32, 300, 416, 20, { name: "Step lane", fill: "bronzeDeep", radius: 10, clip: true });
+      const stepFill = k.rect(lane, 416, 20, [k.gradient({ from: "verdigrisDeep", to: "verdigris", angle: 0 })], { name: "Step fill", radius: 10, absolute: { x: 0, y: 0 } });
+      k.bindExpression(stepFill, "width", `${scroll.n} / 10 * 416`);
+      readout(k, pv, `round(${scroll.n} * 40) + " px per press"`, "200 px per press", "Value 24", "parchment", 32, 336, { w: 416, name: "Step value" });
+      label(k, pv, "The battle map pans by this much with each arrow key.", "Body 22", "dim", 32, 390, { w: 416, name: "Step note" });
+      const b = k.instance(settings, "Brass button", { Label: "Back  ESC" }, { name: "Back", absolute: { x: 1620, y: 880 } });
+      k.on(b, back());
+      hintBar(settings, "\u2191 \u2193  ROW      LEFT RIGHT  ADJUST      ENTER  TOGGLE / REBIND      ESC  BACK");
+    }
+    {
+      menuGround(credits);
+      k.rect(credits, W, H, k.tint("void", 0.6), { name: "Wash", absolute: { x: 0, y: 0 } });
+      const roll = box(k, credits, 460, 50, 1e3, 980, { name: "Credits roll", gap: 18, align: "CENTER" });
+      k.text(roll, "Credits", { style: "Heading 60", color: "parchment", 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 18", color: "brass", align: "CENTER", name: "Role" });
+        k.text(g, name, { style: "Credit name 34", color: "parchment", align: "CENTER", name: "Name" });
+      }
+      k.text(roll, "Forged and grown by {{brand.studio}}", { style: "Credit role 18", 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: 350 });
+      k.link(credits, main, "DISSOLVE", { duration: 350 });
+    }
+    const K = (key) => `upper($key) == ${key}`;
+    const trainCost = `(${tier.n} == 1 ? 4 : 2)`;
+    const hitSpire = (dmg) => [
+      set(coreHp.id, { expression: `max(0, ${coreHp.n} - (${dmg}))`, glide: 420 }),
+      set(coreTrail.id, { expression: coreHp.n, glide: 1300, easing: "EASE_IN_OUT" }),
+      set(camX.id, { value: camFor(CORE).x, glide: 800, easing: "EASE_IN_OUT" }),
+      set(camY.id, { value: camFor(CORE).y, glide: 800, easing: "EASE_IN_OUT" }),
+      when([{ if: `${coreHp.n} <= 0`, then: [go(victory, "ZOOM_THROUGH", { duration: 700 })] }])
+    ];
+    const act = set(actions.id, { expression: `${actions.n} + 1` });
+    const COMMANDS = [
+      {
+        name: "Build",
+        key: keyBuild.n,
+        cost: '"100 ORE"',
+        afford: `${ore.n} >= 100`,
+        can: `${depots.n} < 4`,
+        cd: "Medium",
+        run: [set(ore.id, { expression: `${ore.n} - 100`, glide: 500 }), set(depots.id, { expression: `${depots.n} + 1` }), set(cap.id, { expression: `${cap.n} + 8`, glide: 500 }), act],
+        icon: (p) => {
+          poly(k, p, [[4, 20], [20, 4], [36, 20], [36, 38], [4, 38]], "brass", { name: "Icon" });
+          k.rect(p, 10, 14, "void", { name: "Icon door", absolute: { x: 15, y: 24 } });
+        }
+      },
+      {
+        name: "Train",
+        key: '"T"',
+        cost: `${tier.n} == 1 ? "120+30F" : "50 ORE"`,
+        afford: `(${tier.n} == 1 ? ${ore.n} >= 120 && ${fuel.n} >= 30 : ${ore.n} >= 50)`,
+        can: `${supply.n} + ${trainCost} <= ${cap.n}`,
+        cd: "Short",
+        run: [when([
+          { if: `${tier.n} == 1`, then: [set(ore.id, { expression: `${ore.n} - 120`, glide: 500 }), set(fuel.id, { expression: `${fuel.n} - 30`, glide: 500 }), set(supply.id, { expression: `${supply.n} + 4`, glide: 400 }), set(thornbacks.id, { expression: `${thornbacks.n} + 1` })] },
+          { then: [set(ore.id, { expression: `${ore.n} - 50`, glide: 500 }), set(supply.id, { expression: `${supply.n} + 2`, glide: 400 }), set(sporelings.id, { expression: `${sporelings.n} + 1` })] }
+        ]), set(trained.id, { expression: `${trained.n} + 1` }), act],
+        icon: (p) => {
+          poly(k, p, [[20, 2], [38, 36], [2, 36]], "moss", { name: "Icon" });
+          k.rect(p, 14, 4, "void", { name: "Icon bar", absolute: { x: 13, y: 24 } });
+          k.rect(p, 4, 14, "void", { name: "Icon bar", absolute: { x: 18, y: 19 } });
+        }
+      },
+      {
+        name: "Strike",
+        key: keyAttack.n,
+        cost: '"20 FUEL"',
+        afford: `${fuel.n} >= 20`,
+        can: `${scout.n} >= 4 && ${coreHp.n} > 0`,
+        cd: "Medium",
+        run: [set(fuel.id, { expression: `${fuel.n} - 20`, glide: 400 }), act, ...hitSpire(`14 + 3 * min(${trained.n}, 6) + 18 * ${tier.n}`)],
+        icon: (p) => {
+          poly(k, p, [[2, 38], [26, 14], [22, 4], [38, 2], [36, 18], [26, 14], [8, 38]], "oxide", { name: "Icon" });
+        }
+      },
+      {
+        name: "Hold",
+        key: keyStop.n,
+        cost: '"BRACE"',
+        afford: "true",
+        can: `${braced.n} == 0`,
+        cd: "Long",
+        run: [set(braced.id, { value: 1 }), act],
+        icon: (p) => {
+          poly(k, p, Array.from({ length: 8 }, (_, j) => polar(20, 20, 19, j / 8 * TAU + Math.PI / 8)), "oxideDeep", { name: "Icon" });
+          k.rect(p, 20, 6, "parchment", { name: "Icon bar", absolute: { x: 10, y: 17 } });
+        }
+      },
+      {
+        name: "Gather",
+        key: '"G"',
+        cost: '"+" + ' + yieldV.n + ' + " ORE"',
+        afford: "true",
+        can: "true",
+        cd: "Short",
+        run: [set(ore.id, { expression: `${ore.n} + ${yieldV.n}`, glide: 700 }), set(fuel.id, { expression: `${fuel.n} + 20`, glide: 700 }), set(oreMined.id, { expression: `${oreMined.n} + ${yieldV.n}`, glide: 700 }), act],
+        icon: (p) => {
+          poly(k, p, [[20, 0], [34, 20], [20, 40], [6, 20]], "ore", { name: "Icon" });
+          poly(k, p, [[20, 0], [34, 20], [20, 16]], "oreLight", { name: "Icon glint" });
+        }
+      },
+      {
+        name: "Scout",
+        key: '"S"',
+        cost: '"15 FUEL"',
+        afford: `${fuel.n} >= 15`,
+        can: `${scout.n} < 4`,
+        cd: "Medium",
+        run: [set(fuel.id, { expression: `${fuel.n} - 15`, glide: 400 }), set(scout.id, { expression: `${scout.n} + 1`, glide: 1e3, easing: "EASE_IN_OUT" }), act],
+        icon: (p) => {
+          poly(k, p, [[0, 20], [20, 6], [40, 20], [20, 34]], "verdigris", { name: "Icon" });
+          k.ellipse(p, 14, "void", { name: "Icon pupil", absolute: { x: 13, y: 13 } });
+        }
+      },
+      {
+        name: "Research",
+        key: '"R"',
+        cost: '"TECH"',
+        afford: "true",
+        can: "true",
+        run: [],
+        icon: (p) => {
+          const g = poly(k, p, gearPts(20, 20, 19, 8), "brassDim", { name: "Icon" });
+          spin(k, g, 20);
+          k.ellipse(p, 12, "void", { name: "Icon hub", absolute: { x: 14, y: 14 } });
+        }
+      },
+      {
+        name: "Rootquake",
+        key: '"Q"',
+        cost: '"60 FUEL"',
+        afford: `${fuel.n} >= 60`,
+        can: `${tier.n} == 1 && ${scout.n} >= 4 && ${coreHp.n} > 0`,
+        cd: "Long",
+        run: [set(fuel.id, { expression: `${fuel.n} - 60`, glide: 400 }), act, ...hitSpire("45")],
+        icon: (p) => {
+          poly(k, p, [[4, 38], [14, 22], [10, 14], [22, 2], [20, 14], [30, 18], [18, 30], [22, 38]], "root", { name: "Icon" });
+          poly(k, p, [[14, 22], [10, 14], [22, 2], [20, 14]], "verdigris", { name: "Icon glint" });
+        }
+      },
+      {
+        name: "Repair",
+        key: '"E"',
+        cost: '"75 ORE"',
+        afford: `${ore.n} >= 75`,
+        can: `${baseHp.n} < ${baseMax.n}`,
+        cd: "Medium",
+        run: [set(ore.id, { expression: `${ore.n} - 75`, glide: 500 }), set(baseHp.id, { expression: `min(${baseMax.n}, ${baseHp.n} + 20)`, glide: 700 }), set(baseTrail.id, { expression: baseHp.n, glide: 700 }), act],
+        icon: (p) => {
+          k.rect(p, 12, 36, "verdigris", { name: "Icon", absolute: { x: 14, y: 2 } });
+          k.rect(p, 36, 12, "verdigris", { name: "Icon bar", absolute: { x: 2, y: 14 } });
+        }
+      }
+    ];
+    const ok = (c) => `${K(c.key)} && ${c.afford} && ${c.can}`;
+    {
+      const view = box(k, hud, 0, 76, VIEW.w, VIEW.h, { name: "Map view", clip: true, fill: "soil" });
+      const world = box(k, view, 0, 0, WORLD.w, WORLD.h, { name: "World", fill: "soil" });
+      k.bindExpression(world, "translateX", `0 - ${camX.n}`);
+      k.bindExpression(world, "translateY", `0 - ${camY.n}`);
+      terrain(world, 1, true);
+      const rr = rng(77);
+      for (let i = 0; i < 8; i++) {
+        const a = -Math.PI * 0.9 + i / 8 * Math.PI * 1.9 + rr() * 0.2;
+        const pts = [BASE];
+        for (let s = 1; s <= 5; s++) pts.push(polar(BASE[0], BASE[1], 60 + s * 55, a + (rr() - 0.5) * 0.5));
+        const root = poly(k, world, pts, "root", { name: "Creeping root", stroke: 7 });
+        k.bindExpression(root, "visible", `${trained.n} >= ${i + 1}`);
+        poly(k, world, pts.slice(-2), "verdigris", { name: "Root tip", stroke: 3 });
+        k.bindExpression(k.named(world, "Root tip").slice(-1)[0], "visible", `${trained.n} >= ${i + 1}`);
+      }
+      const heart = box(k, world, BASE[0] - 120, BASE[1] - 150, 240, 240, { name: "Heartwood" });
+      poly(k, heart, Array.from({ length: 6 }, (_, j) => polar(120, 180, 96, j / 6 * TAU)), "bronzeDeep", { name: "Platform", effects: [glow(k, "verdigris", 24, 0.35)] });
+      poly(k, heart, Array.from({ length: 6 }, (_, j) => polar(120, 176, 80, j / 6 * TAU)), "bronze", { name: "Platform deck" });
+      poly(k, heart, [[104, 176], [110, 110], [100, 70], [140, 70], [130, 110], [136, 176]], "brassDim", { name: "Heart trunk" });
+      for (const [x, y, z, c] of [[70, 20, 70, "verdigrisDeep"], [110, 6, 80, "verdigris"], [140, 30, 66, "mossDeep"], [90, 44, 60, "moss"]]) k.ellipse(heart, z, c, { name: "Heart crown", absolute: { x, y }, opacity: 0.92 });
+      gear(heart, 120, 70, 30, 8, 30);
+      for (let i = 0; i < 3; i++) {
+        const puff = k.ellipse(heart, 22 + i * 6, "smoke", { name: "Stack smoke", absolute: { x: 176, y: 110 }, opacity: 0.4 });
+        k.behave(puff, "translateY", [{ kind: "spin", rate: -30 }, { kind: "mod", period: 120, offset: -120 + i * 40 }]);
+        drift(k, puff, "translateX", 8, 0.5, i);
+      }
+      k.rect(heart, 14, 40, "loam", { name: "Stack", absolute: { x: 180, y: 120 } });
+      const DEPOTS = [[250, 900], [590, 910], [210, 640], [620, 620]];
+      DEPOTS.forEach(([x, y], i) => {
+        const d = box(k, world, x - 40, y - 34, 80, 68, { name: "Supply depot" });
+        poly(k, d, [[0, 26], [40, 0], [80, 26], [80, 68], [0, 68]], "panelHi", { name: "Depot body" });
+        poly(k, d, [[0, 26], [40, 0], [80, 26]], "brass", { name: "Depot roof", stroke: 4 });
+        k.rect(d, 20, 24, "verdigris", { name: "Depot door", absolute: { x: 30, y: 44 } });
+        k.bindExpression(d, "visible", `${depots.n} >= ${i + 1}`);
+      });
+      const unitShape = (parent, kind, x, y, name) => {
+        if (kind === 0) {
+          poly(k, parent, [[x, y - 14], [x + 13, y + 10], [x - 13, y + 10]], "moss", { name });
+          poly(k, parent, [[x, y - 4], [x + 5, y + 5], [x - 5, y + 5]], "void", { name: `${name} eye` });
+        }
+        if (kind === 1) {
+          poly(k, parent, Array.from({ length: 6 }, (_, j) => polar(x, y, 15, j / 6 * TAU)), "brass", { name });
+          k.rect(parent, 16, 4, "void", { name: `${name} slot`, absolute: { x: x - 8, y: y - 2 } });
+        }
+        if (kind === 2) {
+          poly(k, parent, gearPts(x, y, 14, 6), "verdigris", { name });
+          k.ellipse(parent, 8, "void", { name: `${name} hub`, absolute: { x: x - 4, y: y - 4 } });
+        }
+        if (kind === 3) {
+          poly(k, parent, Array.from({ length: 6 }, (_, j) => polar(x, y, 24, j / 6 * TAU + Math.PI / 6)), "verdigrisDeep", { name });
+          poly(k, parent, [[x, y - 34], [x + 8, y - 20], [x - 8, y - 20]], "oxide", { name: `${name} spike` });
+          poly(k, parent, [[x, y - 10], [x + 10, y + 8], [x - 10, y + 8]], "brass", { name: `${name} core` });
+        }
+      };
+      SQUADS.forEach((s, i) => {
+        const [cx, cy] = s.at;
+        const g = box(k, world, cx - 110, cy - 80, 220, 160, { name: `Squad ${i + 1}` });
+        const ring = poly(k, g, ellipsePts(110, 86, 100, 58), "brass", { name: "Selection ring", stroke: 3, closed: true, effects: [glow(k, "brass", 12, 0.7)] });
+        k.bindExpression(ring, "visible", `${sel.n} == ${i + 1}`);
+        drift(k, ring, "opacity", 0.25, 1.2);
+        const slots = [[70, 70], [110, 60], [150, 70], [90, 100], [130, 100], [60, 120], [160, 120], [110, 130], [40, 90], [180, 90]];
+        for (let u = 0; u < s.size; u++) unitShape(g, i, slots[u][0], slots[u][1], "Unit");
+        if (i === 0) for (let u = 0; u < 6; u++) {
+          const extra = box(k, g, slots[s.size + u][0] - 16, slots[s.size + u][1] - 16, 32, 32, { name: "Trained unit" });
+          unitShape(extra, 0, 16, 16, "Unit");
+          k.bindExpression(extra, "visible", `${sporelings.n} >= ${u + 1}`);
+        }
+        const hb = bar(k, g, { x: 60, y: 8, w: 100, h: 8, value: hp[i].n, max: "100", back: "bronzeDeep", fill: "moss", radius: 4, name: "Squad health" });
+        k.bindExpression(hb, "visible", `${hpBars.n} == 1`);
+        drift(k, g, "translateX", 6, 0.12 + i * 0.05, i);
+        drift(k, g, "translateY", 4, 0.17 + i * 0.04, i * 2);
+      });
+      const thorn = box(k, world, 520, 480, 240, 160, { name: "Thornback line" });
+      for (let u = 0; u < 4; u++) {
+        const w = box(k, thorn, 20 + u * 54, 40 + u % 2 * 40, 60, 70, { name: "Thornback" });
+        unitShape(w, 3, 30, 40, "Walker");
+        k.bindExpression(w, "visible", `${thornbacks.n} >= ${u + 1}`);
+        drift(k, w, "translateY", 3, 0.6, u);
+      }
+      const raiders = box(k, world, 1640, 400, 220, 140, { name: "Choir raiders" });
+      [[30, 40], [80, 20], [130, 50], [70, 90], [170, 80]].forEach(([x, y], i) => {
+        const r = poly(k, raiders, [[x, y - 12], [x + 14, y + 10], [x, y + 3], [x - 14, y + 10]], "enemy", { name: "Raider" });
+        drift(k, r, "translateX", 12, 0.3 + i * 0.07, i);
+        drift(k, r, "translateY", 8, 0.4 + i * 0.05, i * 2);
+      });
+      const spire = box(k, world, CORE[0] - 110, CORE[1] - 110, 220, 220, { name: "Canker spire" });
+      const aura = k.ellipse(spire, 220, [k.gradient({ from: "enemyGlow", to: "enemyGlow", kind: "RADIAL", fromOpacity: 0.5, toOpacity: 0 })], { name: "Spire aura", absolute: { x: 0, y: 0 } });
+      drift(k, aura, "opacity", 0.3, 0.8);
+      const spikes = poly(k, spire, gearPts(110, 110, 92, 12, 26), "oxideDeep", { name: "Spire thorns" });
+      spinAbout(spikes, 110, 110, -14);
+      poly(k, spire, Array.from({ length: 8 }, (_, j) => polar(110, 110, 62, j / 8 * TAU + Math.PI / 8)), "enemy", { name: "Spire body", effects: [glow(k, "enemy", 20, 0.6)] });
+      poly(k, spire, Array.from({ length: 8 }, (_, j) => polar(110, 110, 40, j / 8 * TAU + Math.PI / 8)), "oxideDeep", { name: "Spire inner" });
+      const eye = k.ellipse(spire, 34, "enemyGlow", { name: "Spire heart", absolute: { x: 93, y: 93 } });
+      drift(k, eye, "scaleX", 0.18, 1.4);
+      drift(k, eye, "scaleY", 0.18, 1.4);
+      const crackA = poly(k, spire, [[70, 60], [96, 92], [88, 118], [110, 140]], "void", { name: "Spire crack", stroke: 4 });
+      const crackB = poly(k, spire, [[150, 70], [124, 104], [140, 130], [126, 160]], "void", { name: "Spire crack", stroke: 4 });
+      k.bindExpression(crackA, "visible", `${coreHp.n} < 80`);
+      k.bindExpression(crackB, "visible", `${coreHp.n} < 40`);
+      const spireHit = k.instance(spire, "Spire hit", {}, { name: "Spire hit", absolute: { x: 0, y: 0 } });
+      const sb = bar(k, world, { x: CORE[0] - 80, y: CORE[1] - 140, w: 160, h: 10, value: coreHp.n, max: coreMax.n, back: "bronzeDeep", fill: "enemy", chip: { expression: coreTrail.n, color: "oreLight" }, radius: 5, name: "Spire health" });
+      k.bindExpression(sb, "visible", `${hpBars.n} == 1`);
+      FOG_R.slice(0, -1).forEach((r0, i) => {
+        const r1 = FOG_R[i + 1];
+        const ring = sector(k, world, BASE[0], BASE[1], r1, r0, 0, TAU, k.tint("fog", 0.9), { name: "Fog ring" });
+        k.bindExpression(ring, "opacity", `clamp(${i} + 1 - ${scout.n}, 0, 1)`);
+        k.bindExpression(ring, "scaleX", `1 + clamp(${scout.n} - ${i}, 0, 1) * 0.22`);
+        k.bindExpression(ring, "scaleY", `1 + clamp(${scout.n} - ${i}, 0, 1) * 0.22`);
+        const edge = arc(k, world, BASE[0], BASE[1], r0 + 6, 0, TAU, "mist", 14, { name: "Fog edge", opacity: 0.3 });
+        k.bindExpression(edge, "opacity", `clamp(${i} + 1 - ${scout.n}, 0, 1) * 0.3`);
+        k.bindExpression(edge, "scaleX", `1 + clamp(${scout.n} - ${i}, 0, 1) * 0.22`);
+        k.bindExpression(edge, "scaleY", `1 + clamp(${scout.n} - ${i}, 0, 1) * 0.22`);
+        for (let m = 0; m < 3; m++) {
+          const [mx, my] = polar(BASE[0], BASE[1], (r0 + Math.min(r1, r0 + 360)) / 2, -0.9 + m * 0.9 + i * 0.3);
+          const mist = k.ellipse(world, 220, "mist", { name: "Mist", absolute: { x: mx - 110, y: my - 110 }, opacity: 0.1 });
+          k.bindExpression(mist, "visible", `${scout.n} < ${i + 1}`);
+          drift(k, mist, "translateX", 40, 0.07 + m * 0.02, m + i);
+        }
+      });
+      const pulse = k.instance(world, "Scan pulse", {}, { name: "Scan pulse", absolute: { x: BASE[0] - 900, y: BASE[1] - 900 } });
+      SQUADS.forEach((s, i) => {
+        const hot = box(k, world, s.at[0] - 110, s.at[1] - 80, 220, 160, { name: `Select squad ${i + 1}` });
+        onAll(k, hot, selectSquad(i));
+      });
+      const flash = k.instance(hud, "Raid flash", {}, { name: "Raid flash", absolute: { x: 0, y: 0 } });
+      const top = plate(hud, 0, 0, W, 76, { name: "Top bar", rivets: false });
+      gear(top, 40, 38, 24, 8, 14);
+      label(k, top, "Op. Rusted Canopy", "HUD 16", "brass", 78, 14, { w: 270, name: "Operation" });
+      label(k, top, "Hollow Reach \xB7 dawn", "Small 16", "dim", 78, 40, { w: 270, name: "Operation place" });
+      const res = (x, name, v, rest, icon) => {
+        const g = box(k, top, x, 8, 220, 60, { name: `${name} counter` });
+        const ic = box(k, g, 0, 12, 36, 36, { name: `${name} icon` });
+        icon(ic);
+        readout(k, g, `round(${v.n})`, rest, "Res 30", "parchment", 48, 2, { w: 160, name: `${name} value` });
+        label(k, g, name, "Small 16", "dim", 48, 36, { name: `${name} label` });
+        return g;
+      };
+      res(380, "Ore", ore, "400", (p) => {
+        poly(k, p, [[18, 0], [32, 18], [18, 36], [4, 18]], "ore", { name: "Ore gem" });
+        poly(k, p, [[18, 0], [32, 18], [18, 14]], "oreLight", { name: "Ore facet" });
+      });
+      res(610, "Fuel", fuel, "200", (p) => {
+        poly(k, p, [[18, 0], [32, 22], [26, 34], [10, 34], [4, 22]], "brass", { name: "Fuel drop" });
+        k.ellipse(p, 10, "onBrass", { name: "Fuel shine", absolute: { x: 12, y: 18 } });
+      });
+      const sup = box(k, top, 840, 8, 300, 60, { name: "Supply counter" });
+      const crate = box(k, sup, 0, 12, 36, 36, { name: "Supply icon" });
+      k.rect(crate, 32, 28, "bronze", { name: "Crate", absolute: { x: 2, y: 6 }, stroke: { color: "brass", width: 2 } });
+      poly(k, crate, [[2, 6], [34, 34]], "brass", { name: "Crate brace", stroke: 2 });
+      readout(k, sup, `round(${supply.n}) + " / " + round(${cap.n})`, "6 / 20", "Res 30", "parchment", 48, 2, { w: 180, name: "Supply value" });
+      label(k, sup, "Supply", "Small 16", "dim", 48, 36, { name: "Supply label" });
+      const supBar = bar(k, sup, { x: 150, y: 42, w: 140, h: 10, value: supply.n, max: cap.n, back: "bronzeDeep", fill: "verdigris", radius: 5, name: "Supply bar" });
+      const supWarn = k.rect(supBar, 140, 10, "oxide", { name: "Supply bar warning", radius: 5, absolute: { x: 0, y: 0 } });
+      k.bindExpression(supWarn, "width", `clamp(${supply.n} / ${cap.n}, 0, 1) * 140`);
+      k.bindExpression(supWarn, "visible", `${supply.n} >= ${cap.n} - 4`);
+      drift(k, supWarn, "opacity", 0.35, 2.2);
+      const hw = box(k, top, 1160, 8, 440, 60, { name: "Heartwood integrity" });
+      label(k, hw, "Heartwood", "HUD 16", "verdigris", 0, 4, { name: "Heartwood label" });
+      bar(k, hw, { x: 0, y: 30, w: 340, h: 20, value: baseHp.n, max: baseMax.n, back: "bronzeDeep", fill: [k.gradient({ from: "verdigrisDeep", to: "verdigris", angle: 0 })], chip: { expression: baseTrail.n, color: "oxideText" }, radius: 4, name: "Base bar" });
+      readout(k, hw, `round(${baseHp.n}) + "%"`, "100%", "Value 24", "parchment", 350, 24, { w: 86, align: "RIGHT", name: "Base value" });
+      gear(top, 1700, 38, 26, 9, -18, "brassDim");
+      gear(top, 1746, 22, 16, 7, 29, "brassDim");
+      const objective = plate(hud, 20, 92, 460, 124, { name: "Objective" });
+      label(k, objective, "Objective", "Small 16", "brass", 22, 16, { name: "Objective label" });
+      label(k, objective, "Topple the Canker Spire", "Label 24", "parchment", 22, 40, { w: 420, name: "Objective text" });
+      bar(k, objective, { x: 22, y: 78, w: 300, h: 12, value: coreHp.n, max: coreMax.n, back: "bronzeDeep", fill: "enemy", chip: { expression: coreTrail.n, color: "oreLight" }, radius: 6, name: "Spire bar" });
+      readout(k, objective, `round(${coreHp.n}) + " HP"`, "120 HP", "Small 16", "oxideText", 330, 74, { w: 110, align: "RIGHT", name: "Spire value" });
+      readout(k, objective, `"FOG " + round(${scout.n}) + " / 4  \xB7  " + (${scout.n} >= 4 ? "SPIRE IN SIGHT" : "SPIRE UNSEEN")`, "FOG 0 / 4  \xB7  SPIRE UNSEEN", "Small 16", "dim", 22, 98, { w: 420, name: "Scout status" });
+      const warn = box(k, hud, 1480, 96, 420, 44, { name: "Supply warning", fill: "oxide", radius: 6, align: "CENTER", justify: "CENTER" });
+      k.text(warn, "Supply near cap \u2014 build (B)", { style: "HUD 16", color: "onOxide", autoWidth: true, name: "Supply warning words" });
+      k.bindExpression(warn, "visible", `${supply.n} >= ${cap.n} - 4`);
+      drift(k, warn, "opacity", 0.25, 1.6);
+      const failing = box(k, hud, 660, 300, 600, 56, { name: "Heartwood failing", fill: "oxideDeep", radius: 6, align: "CENTER", justify: "CENTER", stroke: { color: "oxideText", width: 2, align: "INSIDE" } });
+      k.text(failing, "Heartwood failing \u2014 repair (E)", { style: "Alert 28", color: "parchment", autoWidth: true, name: "Failing words" });
+      k.bindExpression(failing, "visible", `${baseHp.n} < 40 && ${baseHp.n} > 0`);
+      drift(k, failing, "opacity", 0.3, 2);
+      const legend = box(k, hud, 20, 722, 1200, 32, { name: "Controls", fill: k.tint("void", 0.86), radius: 4 });
+      readout(k, legend, `${keyBuild.n} + " BUILD \xB7 T TRAIN \xB7 " + ${keyAttack.n} + " STRIKE \xB7 " + ${keyStop.n} + " HOLD \xB7 G GATHER \xB7 S SCOUT \xB7 R TECH \xB7 A RAID \xB7 1 2 3 SQUADS"`, "B BUILD \xB7 T TRAIN \xB7 F STRIKE \xB7 H HOLD \xB7 G GATHER \xB7 S SCOUT \xB7 R TECH \xB7 A RAID \xB7 1 2 3 SQUADS", "Small 16", "parchment", 12, 5, { w: 1176, name: "Legend" });
+      const con = plate(hud, 0, 760, W, 320, { name: "Console", rivets: false });
+      void con;
+      const mm = plate(hud, 14, 772, 336, 296, { name: "Minimap panel" });
+      label(k, mm, "Cartograph", "Small 16", "brass", 20, 14, { name: "Minimap label" });
+      const MS = 1 / 8;
+      const mini = box(k, mm, 18, 42, 300, 150, { name: "Minimap", fill: "soil", clip: true, stroke: { color: "brassDim", width: 2, align: "INSIDE" } });
+      terrain(mini, MS, false);
+      k.ellipse(mini, 12, "verdigris", { name: "Minimap base", absolute: { x: BASE[0] * MS - 6, y: BASE[1] * MS - 6 } });
+      SQUADS.forEach((s, i) => {
+        const d = k.ellipse(mini, 7, "moss", { name: "Minimap squad", absolute: { x: s.at[0] * MS - 3.5, y: s.at[1] * MS - 3.5 } });
+        k.bindExpression(d, "opacity", `${sel.n} == ${i + 1} ? 1 : 0.7`);
+      });
+      const mcore = k.ellipse(mini, 12, "enemy", { name: "Minimap spire", absolute: { x: CORE[0] * MS - 6, y: CORE[1] * MS - 6 } });
+      drift(k, mcore, "opacity", 0.3, 1.4);
+      FOG_R.slice(0, -1).forEach((r0, i) => {
+        const ring = sector(k, mini, BASE[0] * MS, BASE[1] * MS, FOG_R[i + 1] * MS, r0 * MS, 0, TAU, k.tint("fog", 0.9), { name: "Minimap fog" });
+        k.bindExpression(ring, "opacity", `clamp(${i} + 1 - ${scout.n}, 0, 1)`);
+      });
+      const camRect = k.rect(mini, VIEW.w * MS, VIEW.h * MS, [], { name: "Camera frame", stroke: { color: "parchment", width: 2 }, absolute: { x: 0, y: 0 } });
+      k.bindExpression(camRect, "x", `${camX.n} * ${MS}`);
+      k.bindExpression(camRect, "y", `${camY.n} * ${MS}`);
+      const pingBase = k.instance(mini, "Ping", {}, { name: "Base ping", absolute: { x: BASE[0] * MS - 36, y: BASE[1] * MS - 36 } });
+      const pingCore = k.instance(mini, "Ping", {}, { name: "Spire ping", absolute: { x: CORE[0] * MS - 36, y: CORE[1] * MS - 36 } });
+      for (const p of [pingBase, pingCore]) k.bindExpression(p, "visible", `${pings.n} == 1`);
+      readout(k, mm, `"RAIDS WEATHERED  " + ${raids.n}`, "RAIDS WEATHERED  0", "Small 16", "dim", 20, 206, { w: 300, name: "Raid log" });
+      label(k, mm, "Space \xB7 jump home", "Small 16", "dim", 20, 234, { w: 300, name: "Minimap hint" });
+      const selp = plate(hud, 362, 772, 640, 296, { name: "Selection panel" });
+      k.patch(selp, { anchorX: 0.5, anchorY: 1 });
+      k.bindExpression(selp, "scaleX", `${uiScale.n} / 100`);
+      k.bindExpression(selp, "scaleY", `${uiScale.n} / 100`);
+      const por = box(k, selp, 22, 56, 170, 170, { name: "Unit portrait", fill: "panelHi", radius: 85, clip: true, stroke: { color: "brass", width: 3, align: "INSIDE" } });
+      SQUADS.forEach((_, i) => {
+        const g = box(k, por, 0, 0, 170, 170, { name: `Portrait ${i + 1}` });
+        k.bindExpression(g, "visible", `${sel.n} == ${i + 1}`);
+        if (i === 0) {
+          poly(k, g, [[85, 20], [150, 140], [20, 140]], "moss", { name: "Portrait art" });
+          poly(k, g, [[85, 70], [110, 116], [60, 116]], "void", { name: "Portrait eye" });
+          poly(k, g, [[85, 84], [98, 108], [72, 108]], "verdigris", { name: "Portrait glint" });
+        }
+        if (i === 1) {
+          poly(k, g, Array.from({ length: 6 }, (_2, j) => polar(85, 88, 62, j / 6 * TAU)), "brass", { name: "Portrait art" });
+          k.rect(g, 70, 16, "void", { name: "Portrait slot", absolute: { x: 50, y: 80 } });
+          k.rect(g, 50, 6, "oxide", { name: "Portrait glint", absolute: { x: 60, y: 85 } });
+        }
+        if (i === 2) {
+          const gg = poly(k, g, gearPts(85, 85, 64, 10), "verdigris", { name: "Portrait art" });
+          spinAbout(gg, 85, 85, 12);
+          k.ellipse(g, 40, "void", { name: "Portrait hub", absolute: { x: 65, y: 65 } });
+        }
+      });
+      SQUADS.forEach((s, i) => {
+        const tab = box(k, selp, 212 + i * 138, 16, 128, 32, { name: `Group tab ${i + 1}`, fill: "panelHi", radius: 4, stroke: { color: "bronzeDeep", width: 1 } });
+        const lit = k.rect(tab, 128, 32, "brass", { name: "Tab lit", radius: 4, absolute: { x: 0, y: 0 } });
+        k.bindExpression(lit, "opacity", `${sel.n} == ${i + 1} ? 0.3 : 0`);
+        label(k, tab, `${s.key}  ${s.tab}`, "HUD 16", "parchment", 12, 6, { name: "Tab words" });
+        onAll(k, tab, selectSquad(i));
+      });
+      const pick = (f) => SQUADS.map((s, i) => `${sel.n} == ${i + 1} ? "${f(s)}"`).join(" : ") + ' : ""';
+      readout(k, selp, pick((s) => s.name.toUpperCase()), SQUADS[0].name.toUpperCase(), "Unit 30", "parchment", 212, 60, { w: 340, name: "Unit name" });
+      readout(k, selp, `"\xD7" + (${sel.n} == 1 ? 4 + ${sporelings.n} : ${sel.n} == 2 ? 3 : 2)`, "\xD74", "Value 24", "brass", 552, 62, { w: 70, align: "RIGHT", name: "Unit count" });
+      readout(k, selp, pick((s) => s.role), SQUADS[0].role, "Small 16", "dim", 212, 94, { w: 410, name: "Unit role" });
+      const hpExpr = `${sel.n} == 1 ? ${hp[0].n} : ${sel.n} == 2 ? ${hp[1].n} : ${hp[2].n}`;
+      bar(k, selp, { x: 212, y: 126, w: 330, h: 16, value: hpExpr, max: "100", back: "bronzeDeep", fill: [k.gradient({ from: "mossDeep", to: "moss", angle: 0 })], radius: 4, name: "Unit health bar" });
+      readout(k, selp, `round(${hpExpr}) + " HP"`, "100 HP", "Small 16", "parchment", 548, 122, { w: 76, align: "RIGHT", name: "Unit health" });
+      [["Atk", atk], ["Arm", arm], ["Spd", spd]].forEach(([name, v], i) => {
+        label(k, selp, name, "Small 16", "brass", 212 + i * 140, 158, { name: "Stat name" });
+        readout(k, selp, `round(${v.n})`, String(SQUADS[0][name === "Atk" ? "atk" : name === "Arm" ? "arm" : "spd"]), "Value 24", "parchment", 262 + i * 140, 152, { w: 76, name: "Stat value" });
+      });
+      readout(k, selp, pick((s) => s.quip.replace(/"/g, "'")), SQUADS[0].quip.replace(/"/g, "'"), "Quote 22", "dim", 212, 192, { w: 410, name: "Unit quip" });
+      const mid = plate(hud, 1014, 772, 326, 296, { name: "Foundry" });
+      const gauge = (x, name, valueExpr, i) => {
+        const g = box(k, mid, x, 128, 120, 120, { name: `${name} gauge` });
+        k.ellipse(g, 120, "brass", { name: "Gauge rim", absolute: { x: 0, y: 0 } });
+        k.ellipse(g, 104, "panel", { name: "Gauge face", absolute: { x: 8, y: 8 } });
+        arc(k, g, 60, 60, 42, -Math.PI / 2 + Math.PI * 2 / 3 * 0.55, -Math.PI / 2 + Math.PI * 2 / 3, "oxide", 6, { name: "Red zone" });
+        for (let t = 0; t <= 8; t++) {
+          const a = -Math.PI / 2 - Math.PI * 2 / 3 + t / 8 * (Math.PI * 4) / 3;
+          poly(k, g, [polar(60, 60, 44, a), polar(60, 60, 50, a)], "dim", { name: "Gauge tick", stroke: 2 });
+        }
+        const set1 = box(k, g, 0, 0, 120, 120, { name: "Needle angle" });
+        k.bindExpression(set1, "rotation", valueExpr);
+        const wob = box(k, set1, 0, 0, 120, 120, { name: "Needle wobble" });
+        k.behave(wob, "rotation", [{ kind: "noise", amp: 4, freq: 1.6, seed: 11 + i }]);
+        const needle = k.instance(wob, "Gauge needle", {}, { name: "Gauge needle", absolute: { x: 0, y: 0 } });
+        label(k, g, name, "Small 16", "dim", 0, 72, { w: 120, align: "CENTER", name: "Gauge name" });
+        return needle;
+      };
+      const needleA = gauge(22, "Boiler", `120 - clamp(${fuel.n} / 300, 0, 1) * 240`, 0);
+      const needleB = gauge(184, "Sap", `120 - clamp(${baseHp.n} / 100, 0, 1) * 240`, 1);
+      label(k, mid, "Foundry queue", "Small 16", "brass", 22, 16, { name: "Queue label" });
+      readout(k, mid, `pad(${trained.n}, 2)`, "00", "Counter 48", "parchment", 22, 40, { w: 90, name: "Units trained" });
+      readout(k, mid, `${tier.n} == 1 ? "THORNBACKS" : "SPORELINGS"`, "SPORELINGS", "HUD 16", "dim", 120, 48, { w: 190, name: "Queue unit" });
+      label(k, mid, "Trained", "Small 16", "dim", 120, 70, { name: "Trained label" });
+      const qback = box(k, mid, 20, 102, 288, 14, { name: "Queue track", fill: "bronzeDeep", radius: 7 });
+      const queue = k.instance(qback, "Queue bar", {}, { name: "Queue bar", absolute: { x: 0, y: 0 } });
+      const ready = k.instance(mid, "Unit ready", {}, { name: "Unit ready", absolute: { x: 200, y: 8 } });
+      const card = plate(hud, 1352, 772, 560, 296, { name: "Command card" });
+      k.patch(card, { anchorX: 1, anchorY: 1 });
+      k.bindExpression(card, "scaleX", `${uiScale.n} / 100`);
+      k.bindExpression(card, "scaleY", `${uiScale.n} / 100`);
+      const cdInstances = [];
+      COMMANDS.forEach((c, i) => {
+        const bx = 10 + i % 3 * 184, by = 10 + Math.floor(i / 3) * 94;
+        const b = box(k, card, bx, by, 176, 88, { name: `${c.name} button`, fill: "panelHi", radius: 6, stroke: { color: "bronze", width: 2, align: "INSIDE" } });
+        const lit = k.rect(b, 176, 88, [k.gradient({ from: "brass", to: "brass", angle: 90, fromOpacity: 0.34, toOpacity: 0.06 })], { name: "Hover glow", radius: 6, absolute: { x: 0, y: 0 } });
+        k.bindExpression(lit, "opacity", `${cardHover.n} == ${i} ? 1 : 0`);
+        const face = box(k, b, 0, 0, 176, 88, { name: "Command face" });
+        k.bindExpression(face, "opacity", `${c.afford} ? 1 : 0.35`);
+        const icon = box(k, face, 12, 24, 40, 40, { name: "Command icon" });
+        c.icon(icon);
+        label(k, face, c.name, "Cmd 17", "parchment", 62, 14, { w: 108, name: "Command name" });
+        readout(k, face, c.cost, c.name === "Build" ? "100 ORE" : c.name === "Train" ? "50 ORE" : c.name === "Strike" ? "20 FUEL" : c.name === "Hold" ? "BRACE" : c.name === "Gather" ? "+50 ORE" : c.name === "Scout" ? "15 FUEL" : c.name === "Research" ? "TECH" : c.name === "Rootquake" ? "60 FUEL" : "75 ORE", "Cost 16", "brass", 62, 54, { w: 76, name: "Command cost" });
+        const capBox = box(k, face, 140, 50, 28, 28, { name: "Hotkey cap", fill: "void", radius: 4, stroke: { color: "brassDim", width: 1 }, align: "CENTER", justify: "CENTER" });
+        const bound = [keyBuild, keyAttack, keyStop].find((v) => v.n === c.key);
+        const kt = k.text(capBox, bound ? String(k.doc.variables?.[bound.id]?.valuesByMode["Mode 1"]) : c.key.replace(/"/g, ""), { style: "Small 16", color: "parchment", autoWidth: true, name: "Hotkey" });
+        if (bound) k.bindExpression(kt, "characters", `len(${bound.n}) > 2 ? "\xB7\xB7" : ${bound.n}`);
+        if (c.name === "Rootquake") {
+          k.bindExpression(face, "visible", `${tier.n} == 1`);
+          const lock = box(k, b, 0, 0, 176, 88, { name: "Locked face" });
+          k.bindExpression(lock, "visible", `${tier.n} != 1`);
+          k.rect(lock, 22, 18, "brassDim", { name: "Padlock", radius: 3, absolute: { x: 20, y: 38 } });
+          arc(k, lock, 31, 38, 8, Math.PI, TAU, "brassDim", 3, { name: "Shackle" });
+          label(k, lock, "Locked", "Cmd 17", "dim", 62, 14, { w: 108, name: "Locked name" });
+          label(k, lock, "Needs tech", "Cost 16", "dim", 62, 54, { w: 108, name: "Locked hint" });
+        }
+        if (c.cd) {
+          const cd = k.instance(b, "Cooldown", {}, { name: `Cmd ${c.name}`, absolute: { x: 0, y: 0 } });
+          k.on(cd, set(cardHover.id, { value: i }), { trigger: "MOUSE_ENTER" });
+          const at = (to, id) => ({ ...k.changeAction(to, 0), targetId: id });
+          const echo = c.name === "Train" ? [at("Queue bar/Training", queue), at("Unit ready/Show", ready)] : c.name === "Strike" || c.name === "Rootquake" ? [at("Spire hit/Hit", spireHit), at("Ping/Ping", pingCore)] : c.name === "Scout" ? [at("Scan pulse/Pulse", pulse)] : [];
+          k.on(cd, when([{ if: `${c.afford} && ${c.can}`, then: [k.changeAction(`Cooldown/${c.cd}`, 0), ...echo, ...c.run] }]));
+          cdInstances.push({ c, id: cd });
+        } else {
+          const hot = box(k, b, 0, 0, 176, 88, { name: `Cmd ${c.name}` });
+          k.on(hot, set(cardHover.id, { value: i }), { trigger: "MOUSE_ENTER" });
+          k.on(hot, overlay(tech));
+        }
+      });
+      const toast = k.instance(hud, "Order toast", {}, { name: "Order toast", absolute: { x: 610, y: 640 } });
+      const alert = k.instance(hud, "Raid alert", {}, { name: "Raid alert", absolute: { x: 550, y: 96 } });
+      const raid = `upper($key) == "A" && ${baseHp.n} > 0`;
+      for (const { c, id } of cdInstances) k.on(id, when([{ if: ok(c), then: [k.changeAction(`Cooldown/${c.cd}`, 0)] }]), { key: "*" });
+      const trainOk = ok(COMMANDS[1]);
+      k.on(queue, when([{ if: trainOk, then: [k.changeAction("Queue bar/Training", 0)] }]), { key: "*" });
+      k.on(ready, when([{ if: trainOk, then: [k.changeAction("Unit ready/Show", 0)] }]), { key: "*" });
+      const strike = COMMANDS[2], quake = COMMANDS[7];
+      k.on(spireHit, when([{ if: `(${ok(strike)}) || (${ok(quake)})`, then: [k.changeAction("Spire hit/Hit", 0)] }]), { key: "*" });
+      k.on(pingCore, when([{ if: `(${ok(strike)}) || (${ok(quake)})`, then: [k.changeAction("Ping/Ping", 0)] }]), { key: "*" });
+      k.on(pulse, when([{ if: ok(COMMANDS[5]), then: [k.changeAction("Scan pulse/Pulse", 0)] }]), { key: "*" });
+      k.on(pingBase, when([{ if: raid, then: [k.changeAction("Ping/Ping", 0)] }]), { key: "*" });
+      for (const n of [needleA, needleB]) k.on(n, when([{ if: raid, then: [k.changeAction("Gauge needle/Spike", 0)] }]), { key: "*" });
+      k.on(alert, when([{ if: raid, then: [k.changeAction("Raid alert/Show", 0)] }]), { key: "*" });
+      k.on(flash, when([{ if: raid, then: [k.changeAction("Raid flash/Hit", 0)] }]), { key: "*" });
+      const withCd = COMMANDS.filter((c) => c.cd);
+      k.on(toast, when([
+        { if: `(${K(strike.key)} && ${strike.afford} && ${scout.n} < 4) || (${K(quake.key)} && ${tier.n} == 1 && ${quake.afford} && ${scout.n} < 4)`, then: [k.changeAction("Order toast/Blind", 0)] },
+        { if: `${K('"T"')} && ${COMMANDS[1].afford} && !(${COMMANDS[1].can})`, then: [k.changeAction("Order toast/Capped", 0)] },
+        { if: withCd.map((c) => `(${K(c.key)} && !(${c.afford}))`).join(" || "), then: [k.changeAction("Order toast/Poor", 0)] }
+      ]), { key: "*" });
+      const logic = box(k, hud, 0, 0, 1, 1, { name: "Game logic" });
+      const step = `${scroll.n} * 40`;
+      const maxX = WORLD.w - VIEW.w, maxY = WORLD.h - VIEW.h;
+      k.on(logic, when([
+        ...withCd.map((c) => ({ if: ok(c), then: c.run })),
+        { if: raid, then: [
+          set(baseHp.id, { expression: `max(0, ${baseHp.n} - (${braced.n} == 1 ? 4 : ${dmgTaken.n}))`, glide: 320 }),
+          set(baseTrail.id, { expression: baseHp.n, glide: 1300, easing: "EASE_IN_OUT" }),
+          set(hp[0].id, { expression: `max(12, ${hp[0].n} - 7)`, glide: 320 }),
+          set(braced.id, { value: 0 }),
+          set(raids.id, { expression: `${raids.n} + 1` }),
+          when([{ if: `${baseHp.n} <= 0`, then: [go(defeat, "DISSOLVE", { duration: 900 })] }])
+        ] },
+        ...SQUADS.map((s, i) => ({ if: `$key == "${s.key}"`, then: selectSquad(i) })),
+        { if: '$key == "ArrowLeft"', then: [set(camX.id, { expression: `clamp(${camX.n} - ${step}, 0, ${maxX})`, glide: 360, easing: "EASE_IN_OUT" })] },
+        { if: '$key == "ArrowRight"', then: [set(camX.id, { expression: `clamp(${camX.n} + ${step}, 0, ${maxX})`, glide: 360, easing: "EASE_IN_OUT" })] },
+        { if: '$key == "ArrowUp"', then: [set(camY.id, { expression: `clamp(${camY.n} - ${step}, 0, ${maxY})`, glide: 360, easing: "EASE_IN_OUT" })] },
+        { if: '$key == "ArrowDown"', then: [set(camY.id, { expression: `clamp(${camY.n} + ${step}, 0, ${maxY})`, glide: 360, easing: "EASE_IN_OUT" })] },
+        { if: '$key == " "', then: [set(camX.id, { value: home.x, glide: 700, easing: "EASE_IN_OUT" }), set(camY.id, { value: home.y, glide: 700, easing: "EASE_IN_OUT" })] },
+        { if: 'upper($key) == "R"', then: [overlay(tech)] }
+      ]), { key: "*" });
+      k.on(logic, overlay(pause), { key: "Escape" });
+      k.cues(hud, [
+        { layer: "Top bar", preset: "drop-in", at: 0 },
+        { layer: "Objective", preset: "slide-in", at: 200, params: { direction: "left" } }
+      ]);
+    }
+    {
+      label(k, tech, "Foundry of roots", "Heading 60", "parchment", 0, 60, { w: W, align: "CENTER", name: "Screen title" });
+      readout(k, tech, `"ORE " + round(${ore.n}) + "   \xB7   FUEL " + round(${fuel.n})`, "ORE 400   \xB7   FUEL 200", "Value 24", "brass", 0, 140, { w: W, align: "CENTER", name: "Tech purse" });
+      const pipe = (x, y, w, h, v) => {
+        k.rect(tech, w, h, "bronzeDeep", { name: "Pipe", radius: 8, absolute: { x, y }, stroke: { color: "bronze", width: 2 } });
+        const sap = k.rect(tech, w, h, "verdigris", { name: "Sap", radius: 8, absolute: { x, y }, effects: [glow(k, "verdigris", 16)] });
+        if (w > h) k.bindExpression(sap, "width", `max(1, ${v.n} * ${w})`);
+        else k.bindExpression(sap, "height", `max(1, ${v.n} * ${h})`);
+        k.bindExpression(sap, "opacity", `min(1, ${v.n} * 3)`);
+      };
+      pipe(432, 740, 16, 180, plating);
+      pipe(432, 904, 348, 16, plating);
+      pipe(1472, 740, 16, 180, taproots);
+      pipe(1140, 904, 348, 16, taproots);
+      pipe(432, 330, 16, 170, tier);
+      pipe(432, 330, 328, 16, tier);
+      const root = plate(tech, 780, 850, 360, 120, { name: "Heartwood node" });
+      gear(root, 60, 60, 32, 8, 20);
+      label(k, root, "Heartwood", "Card 30", "parchment", 110, 26, { w: 230, name: "Root name" });
+      label(k, root, "Your roots", "Small 16", "dim", 110, 66, { name: "Root hint" });
+      const NODES = [
+        {
+          name: "Verdigris plating",
+          effect: "Raids chip 10 from the Heartwood, not 15.",
+          x: 240,
+          y: 500,
+          v: plating,
+          cond: `${plating.n} == 0 && ${ore.n} >= 150`,
+          status: `${plating.n} >= 1 ? "RESEARCHED" : ${ore.n} >= 150 ? "150 ORE  \xB7  ENTER" : "NEEDS 150 ORE"`,
+          rest: "150 ORE  \xB7  ENTER",
+          run: [set(ore.id, { expression: `${ore.n} - 150`, glide: 500 }), set(plating.id, { value: 1, glide: 900, easing: "EASE_IN_OUT" }), set(dmgTaken.id, { value: 10 })]
+        },
+        {
+          name: "Thornback walker",
+          effect: "A heavy walker. Strikes bite harder; unlocks Rootquake.",
+          x: 760,
+          y: 200,
+          v: tier,
+          cond: `${tier.n} == 0 && ${plating.n} == 1 && ${ore.n} >= 200 && ${fuel.n} >= 80`,
+          status: `${tier.n} >= 1 ? "RESEARCHED" : ${plating.n} < 1 ? "NEEDS PLATING FIRST" : ${ore.n} >= 200 && ${fuel.n} >= 80 ? "200 ORE + 80 FUEL" : "NEEDS 200 ORE + 80 FUEL"`,
+          rest: "NEEDS PLATING FIRST",
+          run: [set(ore.id, { expression: `${ore.n} - 200`, glide: 500 }), set(fuel.id, { expression: `${fuel.n} - 80`, glide: 500 }), set(tier.id, { value: 1, glide: 900, easing: "EASE_IN_OUT" })]
+        },
+        {
+          name: "Deep taproots",
+          effect: "Harvesters haul 80 ore a trip instead of 50.",
+          x: 1280,
+          y: 500,
+          v: taproots,
+          cond: `${taproots.n} == 0 && ${fuel.n} >= 60`,
+          status: `${taproots.n} >= 1 ? "RESEARCHED" : ${fuel.n} >= 60 ? "60 FUEL  \xB7  ENTER" : "NEEDS 60 FUEL"`,
+          rest: "60 FUEL  \xB7  ENTER",
+          run: [set(fuel.id, { expression: `${fuel.n} - 60`, glide: 500 }), set(taproots.id, { value: 1, glide: 900, easing: "EASE_IN_OUT" }), set(yieldV.id, { value: 80 })]
+        }
+      ];
+      NODES.forEach((nd, i) => {
+        const near = `max(0, 1 - abs(${techFocus.n} - ${i}))`;
+        const n = plate(tech, nd.x, nd.y, 400, 260, { name: "Tech node" });
+        const hl = k.rect(n, 400, 96, [k.gradient({ from: "brass", to: "brass", angle: 90, fromOpacity: 0.3, toOpacity: 0 })], { name: "Node focus", radius: 6, absolute: { x: 0, y: 0 } });
+        k.bindExpression(hl, "opacity", near);
+        const done2 = k.rect(n, 400, 260, [], { name: "Node unlocked", radius: 6, stroke: { color: "verdigris", width: 4 }, absolute: { x: 0, y: 0 }, effects: [glow(k, "verdigris", 26, 0.8)] });
+        k.bindExpression(done2, "opacity", nd.v.n);
+        const ic = box(k, n, 24, 24, 60, 60, { name: "Node icon" });
+        if (i === 0) {
+          poly(k, ic, Array.from({ length: 6 }, (_, j) => polar(30, 30, 28, j / 6 * TAU + Math.PI / 6)), "verdigris", { name: "Node art" });
+          poly(k, ic, Array.from({ length: 6 }, (_, j) => polar(30, 30, 14, j / 6 * TAU + Math.PI / 6)), "verdigrisDeep", { name: "Node art inner" });
+        }
+        if (i === 1) {
+          poly(k, ic, Array.from({ length: 6 }, (_, j) => polar(30, 34, 22, j / 6 * TAU + Math.PI / 6)), "verdigrisDeep", { name: "Node art" });
+          poly(k, ic, [[30, 0], [38, 16], [22, 16]], "oxide", { name: "Node art spike" });
+          poly(k, ic, [[30, 24], [40, 42], [20, 42]], "brass", { name: "Node art inner" });
+        }
+        if (i === 2) {
+          for (const [a, b] of [[[30, 4], [30, 56]], [[30, 30], [8, 56]], [[30, 30], [52, 56]], [[30, 44], [18, 58]]]) poly(k, ic, [a, b], "root", { name: "Node art", stroke: 6 });
+        }
+        label(k, n, nd.name, "Card 30", "parchment", 24, 100, { w: 352, name: "Node name" });
+        label(k, n, nd.effect, "Body 22", "dim", 24, 146, { w: 352, name: "Node effect" });
+        readout(k, n, nd.status, nd.rest, "Small 16", "brass", 24, 222, { w: 352, name: "Node status" });
+        k.on(n, set(techFocus.id, { value: i, glide: 140 }), { trigger: "MOUSE_ENTER" });
+        k.on(n, when([{ if: nd.cond, then: [...nd.run, set(actions.id, { expression: `${actions.n} + 1` })] }]));
+      });
+      const done = k.instance(tech, "Brass button", { Label: "Back to battle  ESC" }, { name: "Back to battle", absolute: { x: 1560, y: 980 } });
+      k.on(done, close());
+      for (const key of ["ArrowRight", "d"]) k.on(tech, set(techFocus.id, { expression: `(${techFocus.n} + 1) % 3`, glide: 140 }), { key });
+      for (const key of ["ArrowLeft", "a"]) k.on(tech, set(techFocus.id, { expression: `(${techFocus.n} + 2) % 3`, glide: 140 }), { key });
+      k.on(tech, when(NODES.map((nd, i) => ({ if: `${techFocus.n} == ${i} && ${nd.cond}`, then: [...nd.run, set(actions.id, { expression: `${actions.n} + 1` })] }))), { key: "Enter" });
+      k.on(tech, close(), { key: "Escape" });
+      label(k, tech, "LEFT RIGHT  CHOOSE      ENTER  RESEARCH      ESC  BACK", "Hint 18", "dim", 120, 1e3, { name: "Tech hints" });
+      k.cues(tech, [{ layer: "Tech node", preset: "pop-in", at: 0, stagger: { delay: 90 } }]);
+    }
+    {
+      label(k, pause, "Paused", "Heading 60", "parchment", 0, 240, { w: W, align: "CENTER", name: "Screen title" });
+      menu(k, pause, [
+        { label: "Resume", actions: [close()] },
+        { label: "Settings", actions: [go(settings, "DISSOLVE", { duration: 300 })] },
+        { label: "Surrender", hint: "The roots will be severed", actions: [go(defeat, "DISSOLVE", { duration: 600 })] },
+        { label: "Quit to menu", actions: [go(main, "DISSOLVE", { duration: 400 })] }
+      ], { focus: pauseFocus, x: 560, y: 360, width: 800, pitch: 88, style: "Menu 38", color: "parchment", plate: k.tint("panelHi", 0.95), marker: { color: "brass" }, hintStyle: "Hint 18", escape: [close()], radius: 4 });
+      readout(k, pause, `"UNITS " + ${trained.n} + "   \xB7   ORE MINED " + round(${oreMined.n}) + "   \xB7   SPIRE " + round(${coreHp.n}) + " HP"`, "UNITS 0   \xB7   ORE MINED 0   \xB7   SPIRE 120 HP", "Hint 18", "dim", 0, 740, { w: W, align: "CENTER", name: "Run stats" });
+    }
+    {
+      k.rect(defeat, W, H, [k.gradient({ from: "oxideDeep", to: "void", kind: "RADIAL", fromOpacity: 0.35, toOpacity: 0, handles: [{ x: 0.5, y: 1 }, { x: 1.2, y: 1 }, { x: 0.5, y: 1.8 }] })], { name: "Embers", absolute: { x: 0, y: 0 } });
+      const felled = box(k, defeat, 160, 640, 1600, 440, { name: "Felled tree" });
+      poly(k, felled, [[-160, 340], [0, 330], [300, 300], [800, 320], [1200, 290], [1600, 320], [1760, 310], [1760, 440], [-160, 440]], "loam", { name: "Ground" });
+      for (const r of [[[340, 330], [230, 380], [120, 440]], [[360, 330], [340, 400], [300, 440]], [[400, 330], [470, 390], [520, 440]]]) {
+        poly(k, felled, r, "root", { name: "Severed root", stroke: 14 });
+        const [a, b] = r.slice(-2);
+        const mx = (a[0] + b[0]) / 2, my = (a[1] + b[1]) / 2;
+        poly(k, felled, [[mx - 14, my - 6], [mx + 14, my + 6]], "oxide", { name: "Cut", stroke: 5, effects: [glow(k, "oxide", 10)] });
+      }
+      poly(k, felled, [[300, 340], [310, 250], [340, 262], [360, 236], [390, 258], [420, 244], [440, 340]], "bronze", { name: "Stump" });
+      poly(k, felled, [[310, 250], [340, 262], [360, 236], [390, 258], [420, 244]], "oxideText", { name: "Stump cut", stroke: 4 });
+      poly(k, felled, [[470, 300], [1180, 250], [1200, 290], [480, 336]], "bronzeDeep", { name: "Fallen trunk" });
+      for (const x of [600, 760, 920, 1080]) poly(k, felled, [[x, 300 - (x - 470) * 0.07], [x + 6, 330 - (x - 470) * 0.07]], "brassDim", { name: "Trunk band", stroke: 5 });
+      for (const [x, y, z, c] of [[1160, 200, 120, "loam"], [1260, 230, 100, "ridgeDark"], [1220, 150, 90, "loam"], [1330, 190, 80, "ridgeDark"], [1110, 250, 70, "root"]]) k.ellipse(felled, z, c, { name: "Dead crown", absolute: { x, y }, opacity: 0.95 });
+      gear(felled, 1280, 300, 44, 9, 0, "brassDim", "void");
+      gear(felled, 1420, 330, 26, 7, 0, "bronze", "void");
+      for (let i = 0; i < 14; i++) {
+        const ash = k.ellipse(defeat, 5 + i % 3 * 2, "smoke", { name: "Ash", absolute: { x: 80 + i * 130, y: -20 }, opacity: 0.5 });
+        k.behave(ash, "translateY", [{ kind: "spin", rate: 40 + i % 4 * 10 }, { kind: "mod", period: 1100, offset: -(i * 90) % 1100 }]);
+        drift(k, ash, "translateX", 20, 0.2 + i % 3 * 0.1, i);
+      }
+      const lock = k.stack(defeat, { name: "Defeat lockup", width: 1400, gap: 18, align: "CENTER", absolute: { x: 260, y: 170 } });
+      k.text(lock, "Defeat", { style: "Small 16", color: "oxideText", align: "CENTER", name: "Defeat kicker" });
+      k.text(lock, "The roots are severed", { style: "Epitaph 104", color: "parchment", align: "CENTER", name: "Defeat title" });
+      const line = readout(k, defeat, `${commander.n} + " held the Heartwood through " + ${raids.n} + " raids with " + ${trained.n} + " units trained."`, "WARDEN HESPER ASHGROVE held the Heartwood through 0 raids with 0 units trained.", "Body 22", "dim", 260, 420, { w: 1400, align: "CENTER", name: "Defeat line" });
+      void line;
+      menu(k, defeat, [
+        { label: "Replant and retry", actions: [...resetRun, toBattle] },
+        { label: "Main menu", actions: [go(main, "DISSOLVE", { duration: 400 })] }
+      ], { focus: endFocus, x: 560, y: 500, width: 800, pitch: 88, style: "Menu 38", color: "parchment", plate: [k.gradient({ from: "oxide", to: "oxide", angle: 0, fromOpacity: 0.4, toOpacity: 0 })], marker: { color: "oxideText" }, radius: 4 });
+      k.cues(defeat, [{ layer: "Defeat lockup", preset: "blur-in", at: 0 }, { layer: "Felled tree", preset: "rise-in", at: 300 }]);
+    }
+    {
+      menuGround(victory);
+      k.rect(victory, W, H, [k.gradient({ from: "verdigris", to: "void", kind: "RADIAL", fromOpacity: 0.22, toOpacity: 0, handles: [{ x: 0.5, y: 0.2 }, { x: 1.1, y: 0.2 }, { x: 0.5, y: 0.9 }] })], { name: "Bloom glow", absolute: { x: 0, y: 0 } });
+      label(k, victory, "Mission complete", "Small 16", "verdigris", 0, 80, { w: W, align: "CENTER", name: "Victory kicker" });
+      label(k, victory, "The Canker Spire has fallen", "Heading 60", "parchment", 0, 110, { w: W, align: "CENTER", name: "Screen title" });
+      const tally = plate(victory, 260, 230, 1400, 250, { name: "Tally" });
+      const secs = `(240 + ${actions.n} * 23)`;
+      const STATS = [
+        ["Units trained", `pad(${trained.n}, 2)`, "00"],
+        ["Ore mined", `round(${oreMined.n})`, "0"],
+        ["Mission time", `pad(floor(${secs} / 60), 2) + ":" + pad(${secs} % 60, 2)`, "04:00"],
+        ["Orders / min", `min(240, 36 + ${actions.n} * 11)`, "36"]
+      ];
+      STATS.forEach(([name, e, rest], i) => {
+        label(k, tally, name, "Small 16", "brass", 60 + i * 335, 60, { name: "Tally name" });
+        readout(k, tally, e, rest, "Stat 64", "parchment", 60 + i * 335, 100, { w: 300, name: "Tally value" });
+      });
+      const MEDALS = [
+        ["Iron bark", "Heartwood above 60", `${baseHp.n} >= 60`, "verdigris"],
+        ["Tallow baron", "200 ore mined", `${oreMined.n} >= 200`, "brass"],
+        ["Quick roots", "120 orders / min", `36 + ${actions.n} * 11 >= 120`, "oxide"]
+      ];
+      MEDALS.forEach(([name, rule, cond, col], i) => {
+        const m = plate(victory, 360 + i * 420, 530, 360, 300, { name: "Medal" });
+        const em = box(k, m, 120, 26, 120, 120, { name: "Medal emblem" });
+        k.ellipse(em, 120, col, { name: "Medal disc", absolute: { x: 0, y: 0 }, effects: [glow(k, col, 24, 0.6)] });
+        k.ellipse(em, 92, "panel", { name: "Medal face", absolute: { x: 14, y: 14 } });
+        const st = k.star(em, 64, col, { name: "Medal star", absolute: { x: 28, y: 26 } });
+        spinAbout(st, 60, 58, 14);
+        k.bindExpression(em, "opacity", `${cond} ? 1 : 0.25`);
+        label(k, m, name, "Card 30", "parchment", 20, 164, { w: 320, align: "CENTER", name: "Medal name" });
+        label(k, m, rule, "Small 16", "dim", 20, 206, { w: 320, align: "CENTER", name: "Medal rule" });
+        readout(k, m, `${cond} ? "EARNED" : "NOT THIS TIME"`, "EARNED", "HUD 16", "brass", 20, 240, { w: 320, align: "CENTER", name: "Medal state" });
+      });
+      const cont = k.instance(victory, "Brass button", { Label: "Return to the war table  ENTER" }, { name: "Continue", absolute: { x: 760, y: 880 } });
+      k.on(cont, go(main, "DISSOLVE", { duration: 400 }));
+      k.link(victory, main, "DISSOLVE", { key: "Enter", duration: 400 });
+      k.cues(victory, [{ layer: "Tally", preset: "rise-in", at: 0 }, { layer: "Medal", preset: "pop-in", at: 500, stagger: { delay: 220 } }]);
+    }
+    void arcPoints;
+    return k.finish();
+  }
+});
+
+export {
+  ironroot_rts_default
+};