IMPERIUM ARCANUM — web-based Caesar 3-like city builder with heroes, magic & monsters

- Full classic layer: roads/walkers, 11-tier housing evolution, food chain,
  industry chains, trade routes, taxes/wages, ratings, fires & collapse
- Fantasy layer: heroes (XP/levels/auras), mana & 7 spells, monsters/invasions,
  walls/towers/legions/golems, campaign of 5 scenarios + endless sandbox
- Canvas2D isometric engine with procedural sprites, zero runtime deps
- Save/load slots + autosave, WebAudio synth music/SFX, HUD/menus/minimap
- Tests: headless sim smoke test + Playwright E2E (build/combat/save)

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+*.log
+.DS_Store
+/tmp

README.md

@@ -0,0 +1,100 @@
+# IMPERIUM ARCANUM ⚔️🔮
+
+**A Caesar 3–style city builder with heroes, magic and monsters — running entirely in your browser.**
+
+Inspired by [Caesar 3](https://en.wikipedia.org/wiki/Caesar_III) and its open-source remaster
+[Augustus / Julius](https://github.com/keriew/augustus), rebuilt from scratch as a modern web game — then
+extended with a full **heroes & magic** fantasy layer.
+
+---
+
+## ▶ Play
+
+```bash
+pnpm install
+pnpm dev            # → http://localhost:5173
+```
+
+Production build:
+
+```bash
+pnpm build          # outputs dist/ (single-page, static hosting ready)
+pnpm preview        # serve the production bundle
+```
+
+No backend. No accounts. Saves live in your browser's local storage.
+
+---
+
+## 🏛️ Classic city-builder depth
+
+| System | Details |
+| --- | --- |
+| **Roads & walkers** | Buildings may be placed anywhere; connect them with roads to employ workers. Prefects, priests, actors, teachers, doctors and tax collectors patrol as animated walkers |
+| **Housing evolution** | 11 tiers from Small Tent to Estate — water → food variety → religion → entertainment → education → health + luxury goods + desirability |
+| **Food chain** | Farms/orchards/fisheries → carts → granary → market buyers → peddlers feed homes; famine starves citizens and stalls growth |
+| **Industry chains** | Clay→Pottery · Timber→Furniture · Olives→Oil · Grapes→Wine · Iron+Timber→Weapons — warehouses store, markets distribute |
+| **Trade** | Open routes with foreign cities, toggle per-good import/export lists, quarterly caravans, price factors per partner |
+| **Treasury** | Tax rates, wages, forums/senate collection coverage, unemployment and sentiment feedback |
+| **Ratings & victory** | Culture / Prosperity / Peace / Favor ratings drive scenario goals across the 5-mission campaign |
+| **Disasters** | Fire spreads tile-to-tile until prefects douse it; buildings collapse without engineers |
+
+## ⚔️ Heroes
+
+Build the **Hall of Heroes** and summon legends:
+
+- **Aurelius the Champion** — unbreakable melee tank
+- **Lyra the Huntress** — swift ranged killer
+- **Magnus the Stormcaller** — area devastation, +industry aura
+
+Heroes gain XP, level up (more HP/damage), passively boost nearby industry,
+fall in battle and return from the underworld after a few months.
+
+## 🔮 Magic
+
+Temples trickle mana; **Ley Pylons on crystal seams**, mage towers and the **Arcanum** make you rich in it.
+
+Spells (bottom bar): 🌿 Blessing of Ceres · 🔥 Firestorm · 💧 Healing Rain · 💨 Hermes' Haste ·
+🗿 Summon Golem · 🛡️ Aegis Ward · 🔮 Divine Insight.
+The Great Library and Arcanum research advanced spells.
+
+## 👹 Monsters
+
+Hydra, Minotaur, Harpy flocks and the Lich King (who raises skeletons) attack in scripted campaign waves
+and scaling sandbox raids. Answer with walls, towers, legions trained from weapons, golems, heroes and spells.
+
+## 🗺️ Content
+
+- **5 campaign scenarios** — farming village → breadbasket → ley-line awakening → iron frontier → eternal city of magic
+- **Endless sandbox** with prosperity-scaled monster waves
+- Procedural maps: rivers, forests, clay, iron, crystal ley lines, fertile meadows
+
+---
+
+## 🎮 Controls
+
+| Input | Action |
+| --- | --- |
+| Left click | Place / select · drag paints roads, walls, plazas, gardens |
+| Right-drag / WASD | Pan camera |
+| Mouse wheel | Zoom |
+| `Space` | Pause |
+| `1` – `4` | Game speed |
+| `Esc` | Cancel tool / close panel |
+
+Overlays: fire risk, water coverage, desirability, farm fertility.
+
+## 🛠️ Tech
+
+- TypeScript + Vite, zero runtime dependencies
+- Canvas2D isometric renderer with procedurally drawn sprites (no art assets)
+- Deterministic seeded maps, BFS/A* pathfinding, monthly-tick economy simulation
+- WebAudio synthesized music & SFX
+- Test suite: headless sim test (`scripts/simtest.ts`) + Playwright E2E (`scripts/e2e-test.mjs`, `scripts/combat-e2e.mjs`)
+
+```bash
+node scripts/build-simtest.mjs && node /tmp/simtest.mjs   # sim balance smoke test
+BASE=http://localhost:5173/ node scripts/e2e-test.mjs     # full browser E2E
+```
+
+*Made with ⚖️ by an open hand — have fun, Governor.*

index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+<title>Imperium Arcanum — City Builder of Legends</title>
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%232a1d3a'/%3E%3Cpath d='M6 24h20l-3-12h-14z' fill='%23c9a227'/%3E%3Crect x='13' y='6' width='6' height='8' fill='%23e8d28a'/%3E%3C/svg%3E" />
+<style>
+  :root{
+    --gold:#c9a227; --gold-l:#ecd07d; --parch:#e8d8ae; --ink:#2b1d10;
+    --panel:#3a2a1c; --panel-d:#2a1d10; --panel-l:#55402a;
+    --red:#b03a2e; --green:#3f7d43; --blue:#3a6ea5; --purple:#6b4fa1;
+    --font:'Trebuchet MS','Segoe UI',Verdana,sans-serif;
+  }
+  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
+  html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#14101c;font-family:var(--font);color:var(--parch);}
+  #game{position:absolute;inset:0;}
+  canvas#world{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:default;}
+  .hidden{display:none !important;}
+  button{font-family:var(--font);}
+  ::-webkit-scrollbar{width:10px;height:10px}
+  ::-webkit-scrollbar-track{background:#241a10;border-radius:6px}
+  ::-webkit-scrollbar-thumb{background:#6b5233;border-radius:6px;border:2px solid #241a10}
+</style>
+</head>
+<body>
+<div id="game">
+  <canvas id="world"></canvas>
+  <div id="ui-root"></div>
+  <div id="toast-root"></div>
+</div>
+<script type="module" src="/src/main.ts"></script>
+</body>
+</html>

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "imperium-arcanum",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Imperium Arcanum — a Caesar-like city builder with heroes and magic, in your browser.",
+  "scripts": {
+    "dev": "vite --host --port 5173",
+    "build": "vite build",
+    "preview": "vite preview --host --port 4173",
+    "check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "playwright-core": "^1.62.1",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  }
+}

pnpm-lock.yaml

@@ -0,0 +1,615 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      playwright-core:
+        specifier: ^1.62.1
+        version: 1.62.1
+      typescript:
+        specifier: ^5.6.3
+        version: 5.9.3
+      vite:
+        specifier: ^5.4.10
+        version: 5.4.21
+
+packages:
+
+  '@esbuild/aix-ppc64@0.21.5':
+    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.21.5':
+    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.21.5':
+    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.21.5':
+    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.21.5':
+    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.21.5':
+    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.21.5':
+    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.21.5':
+    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.21.5':
+    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.21.5':
+    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.21.5':
+    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.21.5':
+    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.21.5':
+    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.21.5':
+    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.21.5':
+    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.21.5':
+    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-x64@0.21.5':
+    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-x64@0.21.5':
+    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/sunos-x64@0.21.5':
+    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.21.5':
+    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.21.5':
+    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.21.5':
+    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  '@napi-rs/lzma-linux-x64-gnu@1.5.1':
+    resolution: {integrity: sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ==}
+    engines: {node: ^22.20 || ^24.12 || >=25}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-android-arm-eabi@4.62.5':
+    resolution: {integrity: sha512-jfkGfTwhQpsiSckPF8r9bU3pn3vyd72NlWaO+TgEO6WPSDnUhXzrNYCHBMOYj0ACaUgjm6eERLF+XV9a6RstoA==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.62.5':
+    resolution: {integrity: sha512-oGVqyQlxnrz9/ty89oHpU857VUHEl5/Xu4R2lS+aivCTrNnSsbiENzTnNaBsjxH0CNWGPhzHArOLFwo+oKXveA==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.62.5':
+    resolution: {integrity: sha512-bW7B8xMEq8n99Q3ieEcPRGuphurdZAaFzQc9Efyyw3FL6DZO6pMy9xhdN+kBoD7Sy05xNXSr4OyPPnpkYriS/A==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.62.5':
+    resolution: {integrity: sha512-YSwBS86QeHOGlrxJ1PSOIZSkzRL/JmKeunhc+lV6M1a6En8QuVCD/T/qIA0J4Gd2Y86RIOBYrLcOUtqGh9+/1w==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.62.5':
+    resolution: {integrity: sha512-2fST8lILgl7cKbme/1KDdPCmbXbG+gqoV3bHp19L0ypX/3akYMBVdOunPleRCwonoLnXOZ/0F+Mt/v8POFmfcQ==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.62.5':
+    resolution: {integrity: sha512-cpIxQCP9J+EVad0a6LO1kY3ZGODlk80VlI+2I96B8xMcdHZ4pLVhfQ49JFpYqjPF91FFkQWftf57YlDcTiw9yQ==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.5':
+    resolution: {integrity: sha512-r9fGh3eFs3e/udWh5ZjXQtxiYK/xoFxQaYR/cELxac/Udkl5Th+IsFm0CX3Kl9hmUH/we7EoMpjJgeQNnE0+IA==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.62.5':
+    resolution: {integrity: sha512-xdvFdp7OM6KLJviJT2g/YuRSUjnZgGHk4RNgwIbN7X6cPugOucV60DdHXWzsBVCUdrGb6qSXnJQrrAKMmQuj3Q==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-arm64-gnu@4.62.5':
+    resolution: {integrity: sha512-rRqILAndyzHzP7T9NFQrq+4HFWNhqkqkKur7eiBpfLmz01PO0JKx5Vchu3YllE4YXI/Ftgq/szrDWg5GJ0mI8g==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm64-musl@4.62.5':
+    resolution: {integrity: sha512-Gf4X3qVMucayUvux6aXXPgXovocSFUC0rrffDuPI/S2nHhNMhjcZxsrAFYCOF350PRreW1XwzFj3CT/3bKsWCw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-loong64-gnu@4.62.5':
+    resolution: {integrity: sha512-+s5qA0TNM0qm8PK/a5gt/1Hpx+NV08uSuCncvhziIlQzT6AEV2fnUQo7eBtFTFO0nA9scauvoR2HusfXmQnO4w==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-loong64-musl@4.62.5':
+    resolution: {integrity: sha512-ybb6QvWwWJCbBWqERpc8K3pYVGIrXlG8MEQ8IIuJY6Y9KdHQxoFoNyfkAOtKn1VHu3KuLidXvwrvGR1mEjeWCw==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.62.5':
+    resolution: {integrity: sha512-nZb1DtnOyhCmYvsC8A2CwOkopVg+IS1+fPUa7rMOAXtNw5+lLCLLPqd6XAiNrGtoQKsbvIBOwsHnBH/3wnb4HQ==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-ppc64-musl@4.62.5':
+    resolution: {integrity: sha512-yMbj63Sp89ryrXLWyz+sy+fYD2HpOnMCLGbe4Oa1smclFSUukdtD/BgdiHaAetJNb74URD8U4hM+qG5KVzMEkg==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.62.5':
+    resolution: {integrity: sha512-mhoan3OJw2kYV/e1jtIdmvUZgyBFeA6zGWsOswmR0Tg19TQbowZuR+JMLID6spbbBN7Zee2ejrgmy3+FxGrIdA==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-musl@4.62.5':
+    resolution: {integrity: sha512-5ZTLmjWbb1VZdjuyhe83K/8QO0/h11midQCBP+X5OYn32ra7eOBoM0ZqtaY4nkgNsYgmdVhMYPoyVPTjUpHf3w==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-s390x-gnu@4.62.5':
+    resolution: {integrity: sha512-m53kG+br6PGxOTmgBEM2DHSDs9RVjsyEbUwjJPJGTFm1grWOG8EKJggDCTb60unD4Tjby8fi7/m9XfkEWasVWg==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-gnu@4.62.5':
+    resolution: {integrity: sha512-6RHPJR1g/uvdYU8uXBnfq3nlqyZCP82Fr6NHgfGoaIeSh0YEqnX/x6uA9MmJJbnSH7swqX4F+CkGdUF+6doiQA==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-musl@4.62.5':
+    resolution: {integrity: sha512-xs+OXQtEXgpXT0DmA5+U3qnRZHdCST/5HRQxS8wSPZTUZN/EMWeHuSIod32LQklTBZBV9DyfncKBQ8n5V3eFdw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-openbsd-x64@4.62.5':
+    resolution: {integrity: sha512-e7hD+sl3s+mcLQDZ8pbudBVsdG6r5yN4w3LqG2TJ8sQHDpblWj5lrJs/3m01Cvlxbt4x13zu5thLjgypgtkYzw==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.62.5':
+    resolution: {integrity: sha512-GiyJaCf+WpMub/17aPcKk27QMl5W6f+KhdPTjlFOn5akH5Wa/DCM9Stdx5cDfmasyKB08MqpVQ1uJE2RkkpbXg==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.62.5':
+    resolution: {integrity: sha512-+OQ8U2DdoEfXl8T4Fb18AjmEwbXMerKDKCL8yCPAYhKCEEKoul7rkbeGCBFCbAlaGaa7pmtRTpkAJM2LE/i5FA==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.62.5':
+    resolution: {integrity: sha512-KanvAZrPKbDBFwrgiU9yEVpQoox9QPV1WZOXX7HudJQY+eSlu82CtWxDU8WtuRRvtN5EGkLczkd6Y6DTcvm9wA==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.62.5':
+    resolution: {integrity: sha512-1aC3UEWTtRl3RK3VpDJ/Tqk1XI4SLTmXIthAq6wRWo8XiSXJNd+VprJM4/1P4+i6HIaFEFlVi9sTTziniD2tOQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.62.5':
+    resolution: {integrity: sha512-/gDJaRs4gl0NPIwqCz+6PkpmhhjRAD2j6P4rSNHBzUkO3naEx2mIU0pRle1vUNRQ7mE/+8OOeXLTv/J56FKiQg==}
+    cpu: [x64]
+    os: [win32]
+
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
+  esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  nanoid@3.3.18:
+    resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  playwright-core@1.62.1:
+    resolution: {integrity: sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  postcss@8.5.26:
+    resolution: {integrity: sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  rollup@4.62.5:
+    resolution: {integrity: sha512-/tqMfgP7GPA3PHhCmuiS4vIjrSVhHLgY++i+dhbG462euyAj7FpM4D9uq1X3BgjlqRdpcOrYhcQtfiQLNc8tqw==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  vite@5.4.21:
+    resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+
+snapshots:
+
+  '@esbuild/aix-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm@0.21.5':
+    optional: true
+
+  '@esbuild/android-x64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-x64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/linux-loong64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-s390x@0.21.5':
+    optional: true
+
+  '@esbuild/linux-x64@0.21.5':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/sunos-x64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/win32-x64@0.21.5':
+    optional: true
+
+  '@napi-rs/lzma-linux-x64-gnu@1.5.1':
+    optional: true
+
+  '@rollup/rollup-android-arm-eabi@4.62.5':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.62.5':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.62.5':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.62.5':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.62.5':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.62.5':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.62.5':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.62.5':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.62.5':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.62.5':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.62.5':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.62.5':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.62.5':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.62.5':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.62.5':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.62.5':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.62.5':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.62.5':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.62.5':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.62.5':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.62.5':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.62.5':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.62.5':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.62.5':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.62.5':
+    optional: true
+
+  '@types/estree@1.0.9': {}
+
+  esbuild@0.21.5:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.21.5
+      '@esbuild/android-arm': 0.21.5
+      '@esbuild/android-arm64': 0.21.5
+      '@esbuild/android-x64': 0.21.5
+      '@esbuild/darwin-arm64': 0.21.5
+      '@esbuild/darwin-x64': 0.21.5
+      '@esbuild/freebsd-arm64': 0.21.5
+      '@esbuild/freebsd-x64': 0.21.5
+      '@esbuild/linux-arm': 0.21.5
+      '@esbuild/linux-arm64': 0.21.5
+      '@esbuild/linux-ia32': 0.21.5
+      '@esbuild/linux-loong64': 0.21.5
+      '@esbuild/linux-mips64el': 0.21.5
+      '@esbuild/linux-ppc64': 0.21.5
+      '@esbuild/linux-riscv64': 0.21.5
+      '@esbuild/linux-s390x': 0.21.5
+      '@esbuild/linux-x64': 0.21.5
+      '@esbuild/netbsd-x64': 0.21.5
+      '@esbuild/openbsd-x64': 0.21.5
+      '@esbuild/sunos-x64': 0.21.5
+      '@esbuild/win32-arm64': 0.21.5
+      '@esbuild/win32-ia32': 0.21.5
+      '@esbuild/win32-x64': 0.21.5
+
+  fsevents@2.3.3:
+    optional: true
+
+  nanoid@3.3.18: {}
+
+  picocolors@1.1.1: {}
+
+  playwright-core@1.62.1: {}
+
+  postcss@8.5.26:
+    dependencies:
+      nanoid: 3.3.18
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  rollup@4.62.5:
+    dependencies:
+      '@types/estree': 1.0.9
+    optionalDependencies:
+      '@napi-rs/lzma-linux-x64-gnu': 1.5.1
+      '@rollup/rollup-android-arm-eabi': 4.62.5
+      '@rollup/rollup-android-arm64': 4.62.5
+      '@rollup/rollup-darwin-arm64': 4.62.5
+      '@rollup/rollup-darwin-x64': 4.62.5
+      '@rollup/rollup-freebsd-arm64': 4.62.5
+      '@rollup/rollup-freebsd-x64': 4.62.5
+      '@rollup/rollup-linux-arm-gnueabihf': 4.62.5
+      '@rollup/rollup-linux-arm-musleabihf': 4.62.5
+      '@rollup/rollup-linux-arm64-gnu': 4.62.5
+      '@rollup/rollup-linux-arm64-musl': 4.62.5
+      '@rollup/rollup-linux-loong64-gnu': 4.62.5
+      '@rollup/rollup-linux-loong64-musl': 4.62.5
+      '@rollup/rollup-linux-ppc64-gnu': 4.62.5
+      '@rollup/rollup-linux-ppc64-musl': 4.62.5
+      '@rollup/rollup-linux-riscv64-gnu': 4.62.5
+      '@rollup/rollup-linux-riscv64-musl': 4.62.5
+      '@rollup/rollup-linux-s390x-gnu': 4.62.5
+      '@rollup/rollup-linux-x64-gnu': 4.62.5
+      '@rollup/rollup-linux-x64-musl': 4.62.5
+      '@rollup/rollup-openbsd-x64': 4.62.5
+      '@rollup/rollup-openharmony-arm64': 4.62.5
+      '@rollup/rollup-win32-arm64-msvc': 4.62.5
+      '@rollup/rollup-win32-ia32-msvc': 4.62.5
+      '@rollup/rollup-win32-x64-gnu': 4.62.5
+      '@rollup/rollup-win32-x64-msvc': 4.62.5
+      fsevents: 2.3.3
+
+  source-map-js@1.2.1: {}
+
+  typescript@5.9.3: {}
+
+  vite@5.4.21:
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.5.26
+      rollup: 4.62.5
+    optionalDependencies:
+      fsevents: 2.3.3

pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+allowBuilds:
+  esbuild: set this to true or false
+onlyBuiltDependencies:
+  - esbuild

scripts/browser-test.mjs

@@ -0,0 +1,35 @@
+// Browser smoke test: load game, start sandbox, watch for console errors.
+import { chromium } from 'playwright-core';
+
+const exe = '/root/.cache/ms-playwright/chromium_headless_shell-1148/chrome-linux/headless_shell';
+const errors = [];
+const browser = await chromium.launch({ executablePath: exe, args: ['--no-sandbox', '--disable-gpu'] });
+const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+page.on('console', m => { if (m.type() === 'error') errors.push(m.text()); });
+page.on('pageerror', e => errors.push('PAGEERROR: ' + e.message));
+
+await page.goto('http://127.0.0.1:5173/', { waitUntil: 'networkidle' });
+await page.waitForTimeout(1200);
+await page.screenshot({ path: '/tmp/shot_menu.png' });
+
+// start sandbox
+await page.click('#mm-sandbox');
+await page.waitForTimeout(2500);
+await page.screenshot({ path: '/tmp/shot_game.png' });
+
+// try placing a road via clicks on canvas (center-ish drag)
+const cv = await page.$('#world');
+const box = await cv.boundingBox();
+console.log('canvas at', box);
+// select housing tab then road card
+const tabs = await page.$$('#cattabs .cattab');
+console.log('tabs:', tabs.length);
+
+// speed up time & let it run
+for (let i = 0; i < 6; i++) { await page.mouse.click(box.x + box.width / 2, box.y + 60); await page.waitForTimeout(300); }
+await page.screenshot({ path: '/tmp/shot_later.png' });
+
+console.log('CONSOLE ERRORS:', errors.length);
+errors.slice(0, 12).forEach(e => console.log(' -', e.slice(0, 220)));
+await browser.close();
+process.exit(errors.length ? 1 : 0);

scripts/build-simtest.mjs

@@ -0,0 +1,8 @@
+import pkg from '../node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js';
+const { build } = pkg;
+await build({
+  entryPoints: ['scripts/simtest.ts'],
+  bundle: true, format: 'esm', platform: 'node',
+  outfile: '/tmp/simtest.mjs', logLevel: 'warning',
+});
+console.log('bundled ok');

scripts/combat-e2e.mjs

@@ -0,0 +1,126 @@
+// Combat / heroes / magic / save-load E2E
+import { chromium } from 'playwright-core';
+
+const exe = '/root/.cache/ms-playwright/chromium_headless_shell-1148/chrome-linux/headless_shell';
+const BASE = process.env.BASE || 'http://127.0.0.1:5173/';
+const errors = [];
+const browser = await chromium.launch({ executablePath: exe, args: ['--no-sandbox'] });
+const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+page.on('console', m => { if (m.type() === 'error') errors.push(m.text()); });
+page.on('pageerror', e => errors.push('PAGEERROR: ' + e.message));
+
+await page.goto(BASE, { waitUntil: 'networkidle' });
+await page.waitForTimeout(600);
+await page.click('#mm-sandbox');
+await page.waitForTimeout(900);
+
+// minimal town + defenses + hero hall
+const setup = await page.evaluate(() => {
+  const I = window.__IA;
+  const c = I.app.city;
+  let ox = -1, oy = -1;
+  outer:
+  for (let y = 8; y < c.H - 14; y++) for (let x = 4; x < c.W - 24; x++) {
+    let ok = true;
+    for (let dy = -2; dy < 9 && ok; dy++) for (let dx = -2; dx < 20; dx++) {
+      const t = c.tiles[(y + dy) * c.W + (x + dx)];
+      if (!t || t.terrain === 'water') { ok = false; break; }
+    }
+    if (ok) { ox = x; oy = y; break outer; }
+  }
+  for (let i = 0; i < 14; i++) I.place('road', ox + i, oy);
+  for (let i = 1; i < 13; i++) I.place('house', ox + i, oy - 1);
+  I.place('well', ox + 2, oy + 1);
+  I.place('market', ox + 4, oy + 1);
+  I.place('granary', ox + 7, oy + 1);
+  const placeNear = (key, cx, cy, R = 7) => {
+    for (let dy = -R; dy <= R; dy++) for (let dx = -R; dx <= R; dx++) {
+      if (I.place(key, cx + dx, cy + dy).ok) return true;
+    }
+    return false;
+  };
+  for (let i = 0; i < 8; i++) I.place('wall', ox + 2 + i, oy + 4);
+  I.place('tower', ox + 4, oy + 5);
+  placeNear('fort', ox + 11, oy + 5);
+  placeNear('heroHall', ox + 13, oy - 3);
+  I.give('weapons', 60);
+  I.give('iron', 100);
+  return { ox, oy, hall: [...c.buildings.values()].some(b => b.def === 'heroHall'), fort: [...c.buildings.values()].some(b => b.def === 'fort') };
+});
+console.log('setup:', JSON.stringify(setup));
+
+// run to month 8 so fort can recruit & pop exists
+await page.evaluate(() => { const I = window.__IA; for (let i = 0; i < 8 * 20; i++) I.step(0.5); });
+const mid = await page.evaluate(() => {
+  const c = window.__IA.app.city;
+  return { pop: c.population, legions: [...c.walkers.values()].filter(w => w.unit?.kind === 'soldiers').length };
+});
+console.log('mid:', JSON.stringify(mid));
+
+// summon hero
+const heroOk = await page.evaluate(() => {
+  const I = window.__IA;
+  I.app.city.funds += 5000; // ensure affordable for test
+  return I.summon('champion');
+});
+console.log('summoned:', heroOk);
+
+// spawn a hydra in front of the walls and let combat resolve
+await page.evaluate((pos) => {
+  const I = window.__IA;
+  I.spawnWave('hydra', 1, 1);
+  // teleport hydra near the town for a quick fight
+  const foe = [...I.app.city.walkers.values()].find(w => w.unit?.side === 'foe');
+  if (foe) { foe.x = pos.ox + 6; foe.y = pos.oy + 6; }
+}, setup);
+
+// cast firestorm at the foe location (grant spell first)
+const castRes = await page.evaluate((pos) => {
+  const I = window.__IA;
+  I.grantSpell('firestorm');
+  I.app.city.mana = 500;
+  return I.cast('firestorm', pos.ox + 7, pos.oy + 7);
+}, setup);
+console.log('firestorm cast:', castRes);
+
+// step until hydra dies (max ~60s game time)
+const fight = await page.evaluate(() => {
+  const I = window.__IA;
+  let slain0 = I.app.city.stats.monstersSlain;
+  for (let i = 0; i < 120; i++) {
+    I.step(0.5);
+    const foes = [...I.app.city.walkers.values()].filter(w => w.unit?.side === 'foe');
+    if (foes.length === 0) break;
+  }
+  return {
+    slain: I.app.city.stats.monstersSlain - slain0,
+    foesLeft: [...I.app.city.walkers.values()].filter(w => w.unit?.side === 'foe').length,
+    heroAlive: [...I.app.city.walkers.values()].some(w => w.kind === 'hero'),
+    golems: [...c_walkers(I)].length,
+  };
+  function c_walkers(I) { return []; }
+});
+console.log('fight:', JSON.stringify(fight));
+
+// SAVE / LOAD round-trip
+const before = await page.evaluate(() => {
+  const I = window.__IA;
+  I.save();
+  return { month: I.app.city.month, pop: I.app.city.population };
+});
+await page.reload({ waitUntil: 'networkidle' });
+await page.waitForTimeout(700);
+const after = await page.evaluate(() => {
+  const I = window.__IA;
+  const ok = I.loadAutosave();
+  return { ok, month: I.app?.city.month ?? -1, pop: I.app?.city.population ?? -1, before: null };
+});
+console.log(`save/load: before=${JSON.stringify(before)} after=${JSON.stringify(after)}`);
+
+console.log('CONSOLE ERRORS:', errors.length);
+errors.slice(0, 8).forEach(e => console.log(' -', e.slice(0, 180)));
+
+const pass = heroOk && castRes && fight.slain >= 1 && after.ok && Math.abs(after.month - before.month) <= 1 && errors.length === 0;
+console.log(pass ? '✅ COMBAT/MAGIC/SAVE E2E PASS' : '❌ FAIL');
+await browser.close();
+process.exit(pass ? 0 : 1);

scripts/dbg.ts

@@ -0,0 +1,42 @@
+import { CAMPAIGN } from '../src/data/scenarios';
+import { createCity, tickCity, placeBuilding } from '../src/sim/city';
+import { ensureSimHooks } from '../src/sim/hooks';
+
+const c = createCity(CAMPAIGN[0]);
+ensureSimHooks();
+let ox=-1, oy=-1;
+outer: for (let y=8;y<c.H-12;y++) for (let x=8;x<c.W-14;x++){
+  let ok=true;
+  for (let dy=-2; dy<8 && ok; dy++) for (let dx=-2;dx<26;dx++){
+    const t=c.tiles[(y+dy)*c.W+(x+dx)];
+    if(!t||t.terrain==='water'||t.terrain==='tree'||t.terrain==='rock'){ok=false;break;}
+  }
+  if(ok){ox=x;oy=y;break outer;}
+}
+for(let i=0;i<22;i++) placeBuilding(c,'road',ox+i,oy);
+for(let i=1;i<21;i++) placeBuilding(c,'house',ox+i,oy-1);
+placeBuilding(c,'well',ox+2,oy+1);
+placeBuilding(c,'market',ox+4,oy+1);
+placeBuilding(c,'granary',ox+8,oy+1);
+placeBuilding(c,'prefecture',ox+12,oy+1);
+let farmPlaced=false;
+for (const [fdx,fdy] of [[15,1],[14,1],[16,4],[13,4]] as const){
+  if(placeBuilding(c,'farmWheat',ox+fdx,oy+fdy).ok){farmPlaced=true;console.log('farm at',fdx,fdy);break;}
+}
+
+const dump=(label:string)=>{
+  const f=[...c.buildings.values()].find(b=>b.def==='farmWheat')!;
+  const g=[...c.buildings.values()].find(b=>b.def==='granary')!;
+  const m=[...c.buildings.values()].find(b=>b.def==='market')!;
+  console.log(`--- ${label} (month ${c.month})`);
+  console.log(`farm workers=${f.workersLive} progress=${f.progress.toFixed(2)} wheat=${f.inv['wheat']??0}`);
+  console.log(`granary wheat=${g.inv['wheat']??0}`);
+  console.log(`market workers=${m.workersLive} inv=`, JSON.stringify(m.inv));
+  const wk=[...c.walkers.values()];
+  console.log('walkers:', wk.map(w=>`${w.kind}${w.cargo?'('+JSON.stringify(w.cargo)+')':''}`).slice(0,12).join(', '));
+  const hs=[...c.buildings.values()].filter(b=>b.def==='house');
+  const fed=hs.filter(h=>((h.goodsStock?.['wheat']??0)+(h.goodsStock?.['fruit']??0))>0).length;
+  console.log(`houses=${hs.length} residents=${hs.reduce((a,b)=>a+b.residents,0)} fed=${fed}`);
+};
+dump('start');
+for (let i=0;i<20*20;i++){ tickCity(c,CAMPAIGN[0],0.5); if(i===199||i===399) dump(`t+${Math.round(i*0.5)}s`); }

scripts/e2e-test.mjs

@@ -0,0 +1,89 @@
+// Deep E2E: start sandbox, build a working town via __IA hook, fast-forward months, assert state.
+import { chromium } from 'playwright-core';
+
+const exe = '/root/.cache/ms-playwright/chromium_headless_shell-1148/chrome-linux/headless_shell';
+const errors = [];
+const browser = await chromium.launch({ executablePath: exe, args: ['--no-sandbox', '--disable-gpu'] });
+const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+page.on('console', m => { if (m.type() === 'error') errors.push(m.text()); });
+page.on('pageerror', e => errors.push('PAGEERROR: ' + e.message));
+
+const BASE = process.env.BASE || 'http://127.0.0.1:5173/';
+await page.goto(BASE, { waitUntil: 'networkidle' });
+await page.waitForTimeout(800);
+await page.click('#mm-sandbox');
+await page.waitForTimeout(1200);
+
+// Build town programmatically
+const result = await page.evaluate(() => {
+  const I = window.__IA;
+  const c = I.app.city;
+  // find flat grass area
+  let ox = -1, oy = -1;
+  outer:
+  for (let y = 8; y < c.H - 12; y++) for (let x = 4; x < c.W - 24; x++) {
+    let ok = true, fertileNear = false;
+    for (let dy = -2; dy < 9 && ok; dy++) for (let dx = -2; dx < 21; dx++) {
+      const t = c.tiles[(y + dy) * c.W + (x + dx)];
+      if (!t || t.terrain === 'water') { ok = false; break; }
+      if (t.terrain === 'fertile' && t.fert > 30) fertileNear = true;
+    }
+    if (ok && fertileNear) { ox = x; oy = y; break outer; }
+  }
+  if (ox < 0) return { fail: 'no spot' };
+  for (let i = 0; i < 20; i++) I.place('road', ox + i, oy);
+  for (let i = 1; i < 19; i++) I.place('house', ox + i, oy - 1);
+  I.place('well', ox + 2, oy + 1);
+  I.place('market', ox + 4, oy + 1);
+  I.place('granary', ox + 7, oy + 1);
+  I.place('prefecture', ox + 11, oy + 1);
+  I.place('forum', ox + 12, oy - 2) || I.place('forum', ox + 13, oy - 3);
+  // farm directly below the road row -> top edge touches road => connected
+  const fr = I.place('farmWheat', ox + 15, oy + 1);
+  const farmPlaced = !!fr.ok;
+  if (!farmPlaced) {
+    for (const [fdx, fdy] of [[13, 1], [17, 1], [15, -4], [12, 1], [18, 1]]) {
+      if (I.place('farmWheat', ox + fdx, oy + fdy).ok) { farmPlaced = true; break; }
+    }
+  }
+  if (!farmPlaced) return { fail: 'no road-connected farm spot' };
+  return { ox, oy, funds: Math.round(c.funds), pop: c.population };
+});
+console.log('build result:', JSON.stringify(result));
+
+if (result.fail) { console.log('BUILD FAILED'); process.exit(1); }
+
+// Fast-forward 30 months synchronously
+const ff = await page.evaluate(() => {
+  const I = window.__IA;
+  for (let i = 0; i < 30 * 20; i++) I.step(0.5);
+  const c = I.app.city;
+  const houses = [...c.buildings.values()].filter(b => b.def === 'house');
+  return {
+    month: c.month, pop: c.population, funds: Math.round(c.funds),
+    employed: c.employed, laborers: c.laborers,
+    sentiment: c.sentiment, ratings: c.ratings,
+    avgLevel: (houses.reduce((a, b) => a + b.houseLevel, 0) / Math.max(1, houses.length)).toFixed(2),
+    walkers: c.walkers.size,
+    granaryWheat: [...c.buildings.values()].filter(b => b.def === 'granary').reduce((a, b) => a + (b.inv.wheat ?? 0), 0),
+  };
+});
+console.log('after 30mo:', JSON.stringify(ff));
+
+// Now test spells & heroes UI presence
+const ui = await page.evaluate(() => ({
+  spellCount: document.querySelectorAll('#spellbar .spell').length,
+  catTabs: document.querySelectorAll('#cattabs .cattab').length,
+  minimap: !!document.getElementById('minimap'),
+  topFunds: document.getElementById('t-funds')?.textContent,
+}));
+console.log('ui:', JSON.stringify(ui));
+
+await page.screenshot({ path: '/tmp/shot_town.png' });
+console.log('CONSOLE ERRORS:', errors.length);
+errors.slice(0, 10).forEach(e => console.log(' -', e.slice(0, 200)));
+
+const pass = ff.pop > 40 && ff.month >= 28 && ui.spellCount === 7 && errors.length === 0;
+console.log(pass ? '✅ E2E PASS' : '❌ E2E FAIL');
+await browser.close();
+process.exit(pass ? 0 : 1);

scripts/repro-build.mjs

@@ -0,0 +1,98 @@
+// Reproduce: real mouse clicks to build a road + house
+import { chromium } from 'playwright-core';
+const exe = '/root/.cache/ms-playwright/chromium_headless_shell-1148/chrome-linux/headless_shell';
+const BASE = process.env.BASE || 'http://127.0.0.1:4174/';
+const errors = [];
+const browser = await chromium.launch({ executablePath: exe, args: ['--no-sandbox'] });
+const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+page.on('console', m => { if (m.type() === 'error') errors.push(m.text()); });
+page.on('pageerror', e => errors.push('PAGEERROR: ' + e.message));
+await page.goto(BASE, { waitUntil: 'networkidle' });
+await page.waitForTimeout(600);
+await page.click('#mm-sandbox');
+await page.waitForTimeout(900);
+
+// helper: convert tile -> screen px using exposed camera
+async function tileToScreen(tx, ty) {
+  return page.evaluate(([x, y]) => {
+    const app = window.__IA.app;
+    const [wx, wy] = app.cam.tileToWorld(x, y);
+    const [sx, sy] = app.cam.worldToScreen(wx, wy);
+    return [sx, sy];
+  }, [tx, ty]);
+}
+async function clickTile(x, y) {
+  const [sx, sy] = await tileToScreen(x, y);
+  await page.mouse.move(sx, sy);
+  await page.waitForTimeout(80);
+  await page.mouse.click(sx, sy);
+  await page.waitForTimeout(60);
+}
+
+// 1) pick road tool via UI card
+await page.click('#cattabs .cattab[data-cat="housing"]');
+await page.waitForTimeout(200);
+const cards = await page.$$('#buildcards .bcard');
+console.log('cards:', cards.length);
+for (const c of cards) console.log('  card:', (await c.textContent()).trim().slice(0, 30));
+
+// find road card by title text
+let roadCard = null;
+for (const c of cards) { if ((await c.textContent()).includes('Road')) { roadCard = c; break; } }
+await roadCard.click();
+await page.waitForTimeout(150);
+
+const toolState1 = await page.evaluate(() => JSON.stringify(window.__IA.app.tool));
+console.log('tool after road select:', toolState1);
+
+// center camera on map middle
+await page.evaluate(() => {
+  const app = window.__IA.app;
+  const mid = app.cam.tileToWorld(app.city.W / 2, app.city.H / 2);
+  app.cam.cx = mid[0]; app.cam.cy = mid[1];
+});
+await page.waitForTimeout(100);
+
+// place road at center tile
+const c0 = Math.floor(await page.evaluate(() => window.__IA.app.city.W / 2));
+await clickTile(c0, c0);
+const afterRoad = await page.evaluate(([x, y]) => {
+  const t = window.__IA.app.city.tiles[y * window.__IA.app.city.W + x];
+  return { road: t.road, funds: window.__IA.app.city.funds };
+}, [c0, c0]);
+console.log('after road click:', JSON.stringify(afterRoad));
+
+// 2) select house card and click NEXT to the road
+let houseCard = null;
+for (const c of await page.$$('#buildcards .bcard')) { if ((await c.textContent()).includes('House')) { houseCard = c; break; } }
+await houseCard.click();
+await page.waitForTimeout(150);
+console.log('tool after house select:', await page.evaluate(() => JSON.stringify(window.__IA.app.tool)));
+
+await clickTile(c0, c0 - 1); // directly above road
+const afterHouse = await page.evaluate(([x, y]) => {
+  const c = window.__IA.app.city;
+  const t = c.tiles[y * c.W + x];
+  const b = t.bld ? c.buildings.get(t.bld) : null;
+  return { bld: t.bld, def: b?.def ?? null, funds: Math.round(c.funds) };
+}, [c0, c0 - 1]);
+console.log('after house click:', JSON.stringify(afterHouse));
+
+// ghost validity debug at that spot
+const ghostDbg = await page.evaluate(([x, y]) => {
+  const app = window.__IA.app;
+  // replicate canPlace pieces
+  const c = app.city;
+  const t = c.tiles[y * c.W + x];
+  let roadAdj = false;
+  for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++) {
+    const n = c.tiles[(y + dy) * c.W + (x + dx)];
+    if (n && (n.road || n.plaza)) roadAdj = true;
+  }
+  return { terrain: t.terrain, bldHere: t.bld, roadAdj, tool: app.tool, ghost: app.view.ghost };
+}, [c0, c0 - 1]);
+console.log('ghost debug:', JSON.stringify(ghostDbg));
+
+await page.screenshot({ path: '/tmp/build_repro.png' });
+console.log('errors:', errors.length ? errors.slice(0, 5) : 0);
+await browser.close();

scripts/simtest.ts

@@ -0,0 +1,107 @@
+// Headless simulation smoke test (run via esbuild bundle + node)
+import { CAMPAIGN } from '../src/data/scenarios';
+import { createCity, tickCity, placeBuilding } from '../src/sim/city';
+import { canPlace } from '../src/sim/city';
+import { ensureSimHooks } from '../src/sim/hooks';
+
+function fail(msg: string): never {
+  console.error('❌ FAIL:', msg);
+  process.exit(1);
+}
+
+const sc = CAMPAIGN[0];
+const c = createCity(sc);
+ensureSimHooks();
+
+// find a decent flat spot near center: scan for grass area
+let ox = -1, oy = -1;
+outer:
+for (let y = 8; y < c.H - 12; y++) {
+  for (let x = 8; x < c.W - 14; x++) {
+    let ok = true;
+    for (let dy = -2; dy < 8 && ok; dy++) for (let dx = -2; dx < 16; dx++) {
+      const t = c.tiles[(y + dy) * c.W + (x + dx)];
+      if (!t || t.terrain === 'water' || t.terrain === 'tree' || t.terrain === 'rock') { ok = false; break; }
+    }
+    if (ok) { ox = x; oy = y; break outer; }
+  }
+}
+if (ox < 0) fail('no buildable spot found');
+console.log(`build spot at ${ox},${oy}`);
+
+// lay a long main road east-west
+for (let i = 0; i < 22; i++) {
+  if (!placeBuilding(c, 'road', ox + i, oy).ok) fail('road placement failed at +' + i);
+}
+// houses along north side
+for (let i = 1; i < 21; i++) {
+  const r = placeBuilding(c, 'house', ox + i, oy - 1);
+  if (!r.ok) console.warn('house skip', ox + i, oy - 1);
+}
+// south side: services
+const mk = (k: string, dx: number, dy: number) => {
+  const r = placeBuilding(c, k, ox + dx, oy + dy);
+  if (!r.ok && !['farmWheat', 'fishingWharf', 'clayPit', 'timberCamp', 'ironMine', 'crystalMine', 'leyPylon'].includes(k)) fail(k + ' placement failed: ' + r.reason);
+};
+mk('well', 2, 1);
+mk('market', 4, 1);
+mk('granary', 8, 1);
+mk('prefecture', 12, 1);
+// farms near the road row (must touch a road to get workers)
+let farmOk = false;
+const farmSpots: Array<readonly [number, number]> = [
+  [15, 1], [16, 1], [14, 1], [17, 1], [13, 1],
+  [15, 4], [17, 4], [13, 4], [18, 1], [12, 1],
+];
+for (const [fdx, fdy] of farmSpots) {
+  if (farmOk) break;
+  if (canPlace(c, 'farmWheat', ox + fdx, oy + fdy) === true) {
+    const r = placeBuilding(c, 'farmWheat', ox + fdx, oy + fdy);
+    if (r.ok) { console.log(`farm at ${ox + fdx},${oy + fdy}`); farmOk = true; }
+  }
+}
+if (!farmOk) {
+  // widen: anywhere that touches the road row
+  for (let x = 2; x < c.W - 5 && !farmOk; x++) {
+    for (const dy of [1, -4] as const) {
+      if (canPlace(c, 'farmWheat', x, oy + dy) === true) {
+        const r = placeBuilding(c, 'farmWheat', x, oy + dy);
+        if (r.ok) { console.log('wide-scan farm at', x, oy + dy); farmOk = true; break; }
+      }
+    }
+  }
+}
+if (!farmOk) fail('no road-connected farm spot found');
+
+console.log('initial funds', Math.round(c.funds));
+
+// simulate 30 months (~300s of game time at speed idx 2)
+let monthsSeen = c.month;
+try {
+for (let step = 0; step < 34 * 20 + 60; step++) {
+  tickCity(c, sc, 0.5); // dt seconds per iteration
+  if (step % 200 === 0 && step > 0) console.log('step', step, 'month', c.month, 'walkers', c.walkers.size);
+  if (c.month > monthsSeen) {
+    monthsSeen = c.month;
+    if (monthsSeen % 6 === 0) {
+      console.log(`month ${monthsSeen}: pop=${c.population} funds=${Math.round(c.funds)} sentiment=${c.sentiment} ratings=C${c.ratings.culture}/P${c.ratings.prosperity}/Pe${c.ratings.peace}/F${c.ratings.favor}`);
+    }
+  }
+  if (!Number.isFinite(c.funds)) fail('funds diverged');
+}
+} catch (e) { console.error('EXCEPTION IN LOOP:', e); fail(String(e)); }
+
+console.log('LOOP DONE, months=' + c.month);
+console.log('--- after ~30 months ---');
+console.log(`pop=${c.population} funds=${Math.round(c.funds)} employed=${c.employed}/${c.laborers}`);
+console.log('walkers alive:', c.walkers.size);
+console.log('messages:', c.messages.slice(0, 8).map(m => m.text));
+const houses = [...c.buildings.values()].filter(b => b.def === 'house');
+const levels = houses.map(h => h.houseLevel);
+console.log('houses:', houses.length, 'avg level:', (levels.reduce((a, b) => a + b, 0) / Math.max(1, levels.length)).toFixed(2), 'max:', Math.max(0, ...levels));
+console.log('residents total:', houses.reduce((a, b) => a + b.residents, 0));
+
+if (c.month < 25) fail(`only ${c.month} months advanced`);
+if (c.population <= 0 && monthsSeen > 12) fail('population never grew');
+if (monthsSeen >= 25 && c.population < 25) fail(`city collapsing: pop ${c.population} at month ${monthsSeen}`);
+console.log('✅ SIM SMOKE TEST PASSED');

src/app.ts

@@ -0,0 +1,344 @@
+// ─── Imperium Arcanum — application core ───────────────────────────────────
+import type { Building, CityState, Scenario, SpellId } from './sim/types';
+import { SPELLS } from './sim/types';
+import { def } from './data/buildings';
+import {
+  createCity, tickCity, placementIssue, placeBuilding, removeBuilding, clearRubble,
+  dirtyCbs, bus, SPEEDS,
+} from './sim/city';
+import { ensureSimHooks } from './sim/hooks';
+import { summonHeroImpl, resetHeroes, setCombatCityRef, spawnMonsterWave } from './sim/combat';
+import { castSpellImpl, spellReady } from './sim/magic';
+import { addGoodsToStores } from './sim/economy';
+import { sendGiftToRome } from './sim/economy';
+import { Camera } from './render/camera';
+import { Renderer, drawMinimap, makeMinimap, type ViewState } from './render/renderer';
+import { saveCity, loadCity } from './sim/save';
+import { playSfx, unlockAudio, startMusic } from './audio/audio';
+import { initHUD, refreshHUD, toast, showBuildingInfo, hideInfoPanel, minimapClickToTile } from './ui/hud';
+import { openMainMenus, closeAllMenus, anyMenuOpen, victoryModal, closeHeroDialog } from './ui/menus';
+
+export type Tool =
+  | null
+  | { kind: 'build'; key: string }
+  | { kind: 'erase' }
+  | { kind: 'spell'; id: SpellId }
+  | { kind: 'rally'; bldId: number };
+
+export class App {
+  canvas!: HTMLCanvasElement;
+  ctx!: CanvasRenderingContext2D;
+  cam = new Camera();
+  renderer!: Renderer;
+  city!: CityState;
+  scenario!: Scenario;
+  tool: Tool = null;
+  hover = { x: -1, y: -1 };
+  view: ViewState = { overlay: null, ghost: null, selectedBld: 0, eraseHover: false, spellTarget: null, showGrid: false };
+  keys = new Set<string>();
+  painting = false;
+  panning = false;
+  lastPan = [0, 0];
+  mouseS: [number, number] = [-9999, -9999];
+  timeS = 0;
+  running = false;
+  minimapCv!: HTMLCanvasElement;
+
+  start(sc: Scenario, loaded?: { city: CityState }) {
+    ensureSimHooks();
+    this.scenario = sc;
+    this.city = loaded?.city ?? createCity(sc);
+    setCombatCityRef(this.city);
+    resetHeroes();
+    if (!this.canvas) {
+      this.canvas = document.getElementById('world') as HTMLCanvasElement;
+      this.ctx = this.canvas.getContext('2d')!;
+      window.addEventListener('resize', () => this.resize());
+    }
+    this.renderer = new Renderer(this.city);
+    this.cam.boundsW = this.city.W; this.cam.boundsH = this.city.H;
+    const mid = this.cam.tileToWorld(this.city.W / 2, this.city.H / 2);
+    this.cam.cx = mid[0]; this.cam.cy = mid[1];
+    this.resize();
+    dirtyCbs.length = 0;
+    dirtyCbs.push((x, y, w, h) => {
+      for (let dy = 0; dy < h; dy++) for (let dx = 0; dx < w; dx++) this.renderer.invalidateTile(x + dx, y + dy);
+    });
+    this.renderer.invalidateAll();
+
+    initHUD(this);
+    this.bindInput();
+    this.running = true;
+    let lastT = performance.now();
+    const frame = (t: number) => {
+      if (!this.running) return;
+      const dt = Math.min(0.1, (t - lastT) / 1000);
+      lastT = t;
+      this.timeS += dt;
+      this.update(dt);
+      requestAnimationFrame(frame);
+    };
+    requestAnimationFrame(frame);
+  }
+
+  stop() { this.running = false; }
+
+  resize() {
+    const dpr = Math.min(2, window.devicePixelRatio || 1);
+    this.canvas.width = Math.floor(innerWidth * dpr);
+    this.canvas.height = Math.floor(innerHeight * dpr);
+    this.canvas.style.width = innerWidth + 'px';
+    this.canvas.style.height = innerHeight + 'px';
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.cam.setViewport(innerWidth, innerHeight);
+  }
+
+  // ── per-frame ──
+  update(dt: number) {
+    // keep hover glued to the cursor even after keyboard pan / wheel zoom
+    {
+      const [mx, my] = this.mouseS;
+      if (mx > -999) {
+        const [tx, ty] = this.cam.screenToTile(mx, my);
+        if (tx !== this.hover.x || ty !== this.hover.y) this.hover = { x: tx, y: ty };
+      }
+    }
+    const k = this.keys;
+    const panSpeed = 560 / this.cam.zoom * dt;
+    if (k.has('w') || k.has('arrowup')) this.cam.cy -= panSpeed;
+    if (k.has('s') || k.has('arrowdown')) this.cam.cy += panSpeed;
+    if (k.has('a') || k.has('arrowleft')) this.cam.cx -= panSpeed;
+    if (k.has('d') || k.has('arrowright')) this.cam.cx += panSpeed;
+    this.cam.clampToBounds();
+
+    tickCity(this.city, this.scenario, dt);
+
+    if (this.city.autosavePending && this.city.month % 3 === 0) {
+      this.city.autosavePending = false;
+      saveCity(this.city, this.scenario, '_autosave');
+    }
+
+    this.updateGhost();
+    this.renderer.drawFrame(this.ctx, this.cam, dt, this.view, this.timeS);
+
+    // minimap ~4Hz
+    this.mmAcc += dt;
+    if (this.mmAcc > 0.25 && this.minimapCv) {
+      this.mmAcc = 0;
+      const mctx = this.minimapCv.getContext('2d')!;
+      drawMinimap(mctx, this.city, this.cam, this.minimapCv.width, this.minimapCv.height);
+    }
+    refreshHUD(this, dt);
+  }
+  private mmAcc = 0;
+
+  updateGhost() {
+    const v = this.view;
+    v.eraseHover = false;
+    v.spellTarget = null;
+    if (this.hover.x < 0) { v.ghost = null; return; }
+    const t = this.tool;
+    if (!t) { v.ghost = null; return; }
+    if (t.kind === 'build') {
+      const issue = placementIssue(this.city, t.key, this.hover.x, this.hover.y);
+      v.ghost = { key: t.key, x: this.hover.x, y: this.hover.y, valid: issue === null, reason: issue ?? undefined, w: def(t.key).w, h: def(t.key).h };
+    } else if (t.kind === 'erase') {
+      const b = this.buildingAtHover();
+      v.ghost = { key: b ? b.def : 'plaza', x: this.hover.x, y: this.hover.y, valid: true, w: b ? b.w : 1, h: b ? b.h : 1 };
+      v.eraseHover = true;
+    } else if (t.kind === 'spell') {
+      const sd = SPELLS[t.id];
+      v.spellTarget = { radius: sd.radius || 3, range: sd.range, fromX: this.hover.x, fromY: this.hover.y };
+      v.ghost = null;
+    } else v.ghost = null;
+  }
+
+  buildingAtHover(): Building | undefined {
+    const c = this.city, h = this.hover;
+    const t = (h.x >= 0 && h.y >= 0 && h.x < c.W && h.y < c.H) ? c.tiles[h.y * c.W + h.x] : undefined;
+    return t && t.bld ? c.buildings.get(t.bld) : undefined;
+  }
+
+  setTool(t: Tool) {
+    this.tool = t;
+    if (t?.kind !== 'build' || !['road', 'wall', 'plaza', 'garden'].includes(t.key)) this.painting = false;
+  }
+
+  // ── actions ───────────────────────────────────────────────────────────────
+  private lastFailToast = 0;
+  applyToolAt(x: number, y: number) {
+    const t = this.tool;
+    if (!t) return;
+    if (t.kind === 'build') {
+      const r = placeBuilding(this.city, t.key, x, y);
+      if (!r.ok) {
+        const now = performance.now();
+        if (now - this.lastFailToast > 1200) {
+          this.lastFailToast = now;
+          toast(r.reason === 'No funds' ? '💰 Not enough denarii!' : `⚠️ ${r.reason}`, 'warn');
+        }
+        playSfx('click');
+      }
+    } else if (t.kind === 'erase') {
+      const b = this.buildingAtHover();
+      if (b && b.ruin) { clearRubble(this.city, x, y); return; }
+      removeBuilding(this.city, x, y);
+      hideInfoPanel();
+    } else if (t.kind === 'spell') {
+      if (this.city.mana < SPELLS[t.id].mana) { toast('Not enough mana!', 'warn'); return; }
+      const ok = castSpellImpl(this.city, t.id, x + 0.5, y + 0.5);
+      if (ok) this.setTool(null);
+    } else if (t.kind === 'rally') {
+      for (const w of this.city.walkers.values()) {
+        if (w.homeId === t.bldId && w.unit?.side === 'city') { w.rallyX = x + 0.5; w.rallyY = y + 0.5; }
+      }
+      toast('Rally point set.', 'info');
+      this.setTool(null);
+    }
+  }
+
+  clickPrimary() {
+    unlockAudio(); startMusic();
+    if (anyMenuOpen() && document.getElementById('hud-root')?.classList.contains('hidden')) return;
+    if (this.tool) { this.applyToolAt(this.hover.x, this.hover.y); return; }
+    const b = this.buildingAtHover();
+    if (b) {
+      this.view.selectedBld = b.id;
+      showBuildingInfo(this, b);
+      playSfx('click');
+    } else {
+      this.view.selectedBld = 0;
+      hideInfoPanel();
+    }
+  }
+
+  beginDrag() {
+    if (!this.tool) return;
+    if (this.tool.kind === 'build' && ['road', 'wall', 'plaza', 'garden'].includes(this.tool.key)) this.painting = true;
+    else if (this.tool.kind === 'erase') this.painting = true;
+  }
+
+  summonHero(id: 'champion' | 'huntress' | 'stormcaller') {
+    const ok = summonHeroImpl(this.city, id);
+    if (!ok) toast('Cannot summon — need gold/goods in storage, a Hall of Heroes, and no living copy.', 'warn');
+  }
+
+  castFromBar(id: SpellId) {
+    unlockAudio();
+    if (!spellReady(this.city, id)) { toast('Spell not ready or not yet researched.', 'warn'); return; }
+    this.setTool({ kind: 'spell', id });
+    toast(`Choose a target for ${SPELLS[id].name}`, 'info');
+  }
+
+  sendGift() {
+    if (!sendGiftToRome(this.city)) toast('A worthy gift costs 800 denarii.', 'warn');
+  }
+
+  saveTo(slot: string) { saveCity(this.city, this.scenario, slot); toast('Chronicle saved.', 'good'); playSfx('coin'); }
+
+  quitToMenu() {
+    saveCity(this.city, this.scenario, '_autosave');
+    this.stop();
+    location.reload();
+  }
+
+  // ── input binding ─────────────────────────────────────────────────────────
+  private bindInput() {
+    const cv = this.canvas;
+
+    cv.addEventListener('contextmenu', e => e.preventDefault());
+
+    cv.addEventListener('mousedown', e => {
+      unlockAudio(); startMusic();
+      const [tx, ty] = this.cam.screenToTile(e.clientX, e.clientY);
+      this.hover = { x: tx, y: ty };
+      if (e.button === 0) { this.clickPrimary(); this.beginDrag(); }
+      else if (e.button === 2 || e.button === 1) { this.panning = true; this.lastPan = [e.clientX, e.clientY]; }
+    });
+    window.addEventListener('mouseup', () => { this.panning = false; this.painting = false; });
+    window.addEventListener('mousemove', e => {
+      this.mouseS = [e.clientX, e.clientY];
+      if (this.panning) {
+        this.cam.cx -= (e.clientX - this.lastPan[0]) / this.cam.zoom;
+        this.cam.cy -= (e.clientY - this.lastPan[1]) / this.cam.zoom;
+        this.lastPan = [e.clientX, e.clientY];
+        this.cam.clampToBounds();
+        return;
+      }
+      const [tx, ty] = this.cam.screenToTile(e.clientX, e.clientY);
+      if (tx !== this.hover.x || ty !== this.hover.y) {
+        this.hover = { x: tx, y: ty };
+        if (this.painting && tx >= 0 && ty >= 0 && tx < this.city.W && ty < this.city.H) this.applyToolAt(tx, ty);
+      }
+    });
+    cv.addEventListener('wheel', e => {
+      e.preventDefault();
+      this.cam.zoomAt(e.clientX, e.clientY, e.deltaY < 0 ? 1.15 : 1 / 1.15);
+    }, { passive: false });
+
+    // minimap navigation
+    const mmClick = (e: MouseEvent) => {
+      const r = (e.target as HTMLCanvasElement).getBoundingClientRect();
+      const [wx, wy] = minimapClickToTile(this.city, this.cam, e.clientX - r.left, e.clientY - r.top, r.width, r.height);
+      this.cam.cx = wx; this.cam.cy = wy;
+      this.cam.clampToBounds();
+    };
+    const tryBindMinimap = () => {
+      const mm = document.getElementById('minimap') as HTMLCanvasElement | null;
+      if (mm && !mm.dataset.bound) { mm.dataset.bound = '1'; mm.addEventListener('mousedown', mmClick); }
+      else if (!mm) setTimeout(tryBindMinimap, 300);
+    };
+    setTimeout(tryBindMinimap, 100);
+
+    window.addEventListener('keydown', e => {
+      const key = e.key.toLowerCase();
+      if ((e.target as HTMLElement).tagName === 'INPUT') return;
+      if (key === ' ') { e.preventDefault(); this.city.paused = !this.city.paused; }
+      else if (key === 'escape') {
+        if (this.tool) this.setTool(null);
+        else if (this.view.selectedBld) { this.view.selectedBld = 0; hideInfoPanel(); }
+      }
+      else if ('1234'.includes(key)) this.city.speedIdx = parseInt(key) - 1;
+      else this.keys.add(key);
+    });
+    window.addEventListener('keyup', e => this.keys.delete(e.key.toLowerCase()));
+    cv.addEventListener('mouseleave', () => { this.hover = { x: -1, y: -1 }; });
+  }
+}
+
+// ─── scenario launching ────────────────────────────────────────────────────
+export function launchScenario(app: App | null, sc: Scenario, slot?: string) {
+  if (!app) return;
+  closeAllMenus();
+  const loaded = slot ? loadCity(slot) ?? undefined : undefined;
+  app.start(sc, loaded);
+}
+
+// ─── bootstrapping ─────────────────────────────────────────────────────────
+export function bootApp() {
+  const app = new App();
+  // debug/test hook
+  (window as unknown as Record<string, unknown>).__IA = {
+    app,
+    step: (dt: number) => { if (app.city && app.scenario) tickCity(app.city, app.scenario, dt); },
+    place: (key: string, x: number, y: number) => app.city && placeBuilding(app.city, key, x, y),
+    give: (g: string, q: number) => app.city && addGoodsToStores(app.city, g as never, q),
+    summon: (id: string) => app.city ? summonHeroImpl(app.city, id as never) : false,
+    spawnWave: (kind: string, squads: number, size: number) => app.city && spawnMonsterWave(app.city, kind as never, squads, size),
+    cast: (id: string, x: number, y: number) => app.city ? castSpellImpl(app.city, id as never, x, y) : false,
+    grantSpell: (id: string) => app.city?.spellState.unlocked.add(id as never),
+    save: () => app.city && saveCity(app.city, app.scenario, '_autosave'),
+    loadAutosave: () => {
+      const loaded = loadCity('_autosave');
+      if (!loaded) return false;
+      app.stop();
+      app.start(loaded.scenario, loaded);
+      return true;
+    },
+  };
+  openMainMenus(app);
+
+  bus.on('message', ({ text, icon }) => toast(`${icon} ${text}`, 'info'));
+  bus.on('sfx', name => playSfx(name));
+  bus.on('victory', ({ won, reason }) => victoryModal(app, won, reason));
+}

src/audio/audio.ts

@@ -0,0 +1,129 @@
+// ─── Audio: WebAudio synthesized SFX + ambient music ───────────────────────
+import { Sfx } from '../render/fx';
+
+let ctx: AudioContext | null = null;
+let master: GainNode | null = null;
+let musicGain: GainNode | null = null;
+let musicTimer: number | null = null;
+export const audioState = { enabled: true, music: true, volume: 0.7, started: false };
+
+function ac(): AudioContext | null {
+  if (!audioState.enabled) return null;
+  if (!ctx) {
+    try {
+      ctx = new (window.AudioContext || (window as never as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)();
+      master = ctx.createGain();
+      master.gain.value = audioState.volume;
+      master.connect(ctx.destination);
+      musicGain = ctx.createGain();
+      musicGain.gain.value = 0.35;
+      musicGain.connect(master);
+    } catch { return null; }
+  }
+  if (ctx.state === 'suspended') void ctx.resume();
+  return ctx;
+}
+
+export function unlockAudio() { ac(); audioState.started = true; }
+
+interface ToneOpts { freq: number; dur?: number; type?: OscillatorType; vol?: number; slide?: number; delay?: number; attack?: number; }
+function tone(o: ToneOpts) {
+  const c = ac(); if (!c || !master) return;
+  const t0 = c.currentTime + (o.delay ?? 0);
+  const osc = c.createOscillator();
+  osc.type = o.type ?? 'square';
+  osc.frequency.setValueAtTime(o.freq, t0);
+  if (o.slide) osc.frequency.exponentialRampToValueAtTime(Math.max(20, o.freq + o.slide), t0 + (o.dur ?? 0.2));
+  const g = c.createGain();
+  g.gain.setValueAtTime(0.0001, t0);
+  g.gain.exponentialRampToValueAtTime(o.vol ?? 0.2, t0 + (o.attack ?? 0.01));
+  g.gain.exponentialRampToValueAtTime(0.0001, t0 + (o.dur ?? 0.2));
+  osc.connect(g); g.connect(master);
+  osc.start(t0); osc.stop(t0 + (o.dur ?? 0.2) + 0.05);
+}
+function noise(dur: number, vol = 0.25, filterFreq = 800, delay = 0) {
+  const c = ac(); if (!c || !master) return;
+  const t0 = c.currentTime + delay;
+  const len = Math.max(1, Math.floor(c.sampleRate * dur));
+  const buf = c.createBuffer(1, len, c.sampleRate);
+  const d = buf.getChannelData(0);
+  for (let i = 0; i < len; i++) d[i] = (Math.random() * 2 - 1) * (1 - i / len);
+  const src = c.createBufferSource();
+  src.buffer = buf;
+  const f = c.createBiquadFilter();
+  f.type = 'lowpass'; f.frequency.value = filterFreq;
+  const g = c.createGain(); g.gain.value = vol;
+  src.connect(f); f.connect(g); g.connect(master);
+  src.start(t0);
+}
+
+const SFX: Record<string, () => void> = {
+  build: () => { tone({ freq: 160, dur: 0.12, type: 'triangle', vol: 0.3 }); noise(0.08, 0.15, 500); },
+  demolish: () => { noise(0.25, 0.3, 400); tone({ freq: 90, dur: 0.2, type: 'sawtooth', vol: 0.18, slide: -40 }); },
+  coin: () => { tone({ freq: 880, dur: 0.07, type: 'square', vol: 0.12 }); tone({ freq: 1320, dur: 0.09, type: 'square', vol: 0.1, delay: 0.06 }); },
+  click: () => tone({ freq: 660, dur: 0.04, type: 'square', vol: 0.07 }),
+  clash: () => { noise(0.06, 0.22, 2600); tone({ freq: 2200, dur: 0.05, vol: 0.06, type: 'triangle', slide: -600 }); },
+  arrow: () => tone({ freq: 900, dur: 0.08, type: 'sawtooth', vol: 0.08, slide: -300 }),
+  zap: () => { tone({ freq: 1400, dur: 0.12, type: 'sawtooth', vol: 0.14, slide: -900 }); },
+  fire: () => noise(0.5, 0.12, 700),
+  crumble: () => { noise(0.4, 0.35, 300); tone({ freq: 70, dur: 0.35, type: 'sawtooth', vol: 0.2, slide: -30 }); },
+  smash: () => noise(0.12, 0.28, 900),
+  horn: () => { tone({ freq: 196, dur: 0.5, type: 'sawtooth', vol: 0.16 }); tone({ freq: 262, dur: 0.55, type: 'sawtooth', vol: 0.13, delay: 0.18 }); },
+  monster: () => { tone({ freq: 90, dur: 0.7, type: 'sawtooth', vol: 0.24, slide: -45 }); noise(0.6, 0.14, 350, 0.1); },
+  heal: () => { [523, 659, 784].forEach((f, i) => tone({ freq: f, dur: 0.25, type: 'sine', vol: 0.12, delay: i * 0.09 })); },
+  fanfare: () => { [392, 523, 659, 784].forEach((f, i) => tone({ freq: f, dur: 0.32, type: 'triangle', vol: 0.16, delay: i * 0.13 })); },
+  evolve: () => { tone({ freq: 523, dur: 0.1, type: 'sine', vol: 0.12 }); tone({ freq: 784, dur: 0.14, type: 'sine', vol: 0.12, delay: 0.09 }); },
+  firestorm: () => { noise(0.7, 0.4, 1200); tone({ freq: 60, dur: 0.6, type: 'sawtooth', vol: 0.26, slide: -25 }); },
+};
+
+// ── ambient music: slow lyre-ish arpeggio over drone ──
+const SCALE = [196.0, 233.1, 261.6, 293.7, 349.2, 392.0, 466.2]; // G minor pentatonic-ish
+let step = 0;
+function musicStep() {
+  const c = ac(); if (!c || !musicGain) return;
+  const root = SCALE[step % SCALE.length];
+  // pluck
+  const t0 = c.currentTime;
+  for (const mult of [1, 2]) {
+    const osc = c.createOscillator();
+    osc.type = mult === 1 ? 'triangle' : 'sine';
+    osc.frequency.value = root * mult;
+    const g = c.createGain();
+    g.gain.setValueAtTime(0.0001, t0);
+    g.gain.exponentialRampToValueAtTime(mult === 1 ? 0.16 : 0.05, t0 + 0.02);
+    g.gain.exponentialRampToValueAtTime(0.0001, t0 + 1.4);
+    osc.connect(g); g.connect(musicGain);
+    osc.start(t0); osc.stop(t0 + 1.5);
+  }
+  if (step % 8 === 0) { // low drone swell
+    const osc = c.createOscillator();
+    osc.type = 'sine';
+    osc.frequency.value = SCALE[(step >> 3) % 3] / 2;
+    const g = c.createGain();
+    g.gain.setValueAtTime(0.0001, t0);
+    g.gain.linearRampToValueAtTime(0.08, t0 + 1.2);
+    g.gain.linearRampToValueAtTime(0.0001, t0 + 4.5);
+    osc.connect(g); g.connect(musicGain);
+    osc.start(t0); osc.stop(t0 + 4.7);
+  }
+  step++;
+}
+
+export function startMusic() {
+  if (musicTimer !== null || !audioState.music) return;
+  musicTimer = window.setInterval(() => { if (audioState.music && audioState.enabled && document.visibilityState === 'visible') musicStep(); }, 1400);
+}
+export function stopMusic() { if (musicTimer !== null) { clearInterval(musicTimer); musicTimer = null; } }
+
+export function playSfx(name: string) {
+  if (!audioState.enabled) return;
+  SFX[name]?.();
+}
+
+// wire the global hook used by renderer/sim
+Sfx.play = (name: string) => playSfx(name);
+
+export function setVolume(v: number) {
+  audioState.volume = v;
+  if (master) master.gain.value = v;
+}

src/core/pathfind.ts

@@ -0,0 +1,93 @@
+// ─── Pathfinding: BFS flood + A* on tile grids ─────────────────────────────
+export interface Pt { x: number; y: number }
+
+/** Reconstruct-free BFS returning path of tiles from start to goal (inclusive). */
+export function bfsPath(
+  W: number, H: number,
+  start: Pt, goal: Pt,
+  passable: (x: number, y: number) => boolean,
+): Pt[] | null {
+  if (start.x === goal.x && start.y === goal.y) return [{ ...start }];
+  const prev = new Int32Array(W * H).fill(-1);
+  const seen = new Uint8Array(W * H);
+  const q: number[] = [start.y * W + start.x];
+  seen[q[0]] = 1;
+  const gi = goal.y * W + goal.x;
+  let head = 0;
+  while (head < q.length) {
+    const cur = q[head++];
+    if (cur === gi) break;
+    const cx = cur % W, cy = (cur / W) | 0;
+    // neighbors in iso-pleasing order
+    const nbs = [[cx+1,cy],[cx-1,cy],[cx,cy+1],[cx,cy-1]];
+    for (const [nx, ny] of nbs) {
+      if (nx < 0 || ny < 0 || nx >= W || ny >= H) continue;
+      const ni = ny * W + nx;
+      if (seen[ni] || !passable(nx, ny)) continue;
+      seen[ni] = 1; prev[ni] = cur; q.push(ni);
+    }
+  }
+  if (!seen[gi]) return null;
+  const out: Pt[] = [];
+  let cur = gi;
+  while (cur !== -1) { out.push({ x: cur % W, y: (cur / W) | 0 }); if (cur === start.y * W + start.x) break; cur = prev[cur]; }
+  out.reverse();
+  return out;
+}
+
+const SQRT2 = Math.SQRT2;
+
+/** A* allowing diagonal movement; heuristic octile. */
+export function astarPath(
+  W: number, H: number,
+  start: Pt, goal: Pt,
+  passable: (x: number, y: number) => boolean,
+  maxNodes = 6000,
+): Pt[] | null {
+  const si = start.y * W + start.x, gi = goal.y * W + goal.x;
+  if (si === gi) return [{ ...start }];
+  const open: number[] = [si];
+  const gScore = new Float32Array(W * H).fill(Infinity);
+  const fScore = new Float32Array(W * H).fill(Infinity);
+  const prev = new Int32Array(W * H).fill(-1);
+  const closed = new Uint8Array(W * H);
+  const gx0 = goal.x, gy0 = goal.y;
+  gScore[si] = 0;
+  fScore[si] = Math.hypot(gx0 - start.x, gy0 - start.y);
+  let nodes = 0;
+  while (open.length && nodes++ < maxNodes) {
+    // pick lowest f (linear scan fine at this scale)
+    let bi = 0, bf = Infinity;
+    for (let i = 0; i < open.length; i++) { const f = fScore[open[i]]; if (f < bf) { bf = f; bi = i; } }
+    const cur = open.splice(bi, 1)[0];
+    if (cur === gi) return rebuild(prev, gi, start);
+    closed[cur] = 1;
+    const cx = cur % W, cy = (cur / W) | 0;
+    for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++) {
+      if (!dx && !dy) continue;
+      const nx = cx + dx, ny = cy + dy;
+      if (nx < 0 || ny < 0 || nx >= W || ny >= H) continue;
+      const ni = ny * W + nx;
+      if (closed[ni] || !passable(nx, ny)) continue;
+      if (dx && dy) { // no corner cutting
+        if (!passable(cx + dx, cy) || !passable(cx, cy + dy)) continue;
+      }
+      const step = dx && dy ? SQRT2 : 1;
+      const tg = gScore[cur] + step;
+      if (tg < gScore[ni]) {
+        prev[ni] = cur; gScore[ni] = tg;
+        fScore[ni] = tg + Math.hypot(gx0 - nx, gy0 - ny) * 1.001;
+        if (!open.includes(ni)) open.push(ni);
+      }
+    }
+  }
+  return null;
+
+  function rebuild(prevArr: Int32Array, endI: number, s: Pt): Pt[] {
+    const out: Pt[] = [];
+    let c = endI;
+    while (c !== -1 && out.length < 5000) { out.push({ x: c % W, y: (c / W) | 0 }); if (c === s.y * W + s.x) break; c = prevArr[c]; }
+    out.reverse();
+    return out;
+  }
+}

src/core/util.ts

@@ -0,0 +1,53 @@
+/** Mulberry32 seeded PRNG — deterministic per mission. */
+export class RNG {
+  private s: number;
+  constructor(seed: number) { this.s = seed >>> 0; }
+  next(): number { // [0,1)
+    let t = (this.s += 0x6d2b79f5);
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  }
+  range(a: number, b: number): number { return a + this.next() * (b - a); }
+  int(a: number, b: number): number { return Math.floor(this.range(a, b + 1)); } // inclusive
+  pick<T>(arr: readonly T[]): T { return arr[Math.floor(this.next() * arr.length)]; }
+  chance(p: number): boolean { return this.next() < p; }
+  shuffle<T>(arr: T[]): T[] {
+    for (let i = arr.length - 1; i > 0; i--) {
+      const j = Math.floor(this.next() * (i + 1));
+      [arr[i], arr[j]] = [arr[j], arr[i]];
+    }
+    return arr;
+  }
+}
+
+export const clamp = (v: number, lo: number, hi: number) => v < lo ? lo : v > hi ? hi : v;
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * clamp(t, 0, 1);
+export const dist2 = (ax: number, ay: number, bx: number, by: number) => { const dx = ax - bx, dy = ay - by; return dx * dx + dy * dy; };
+export const chebyshev = (ax: number, ay: number, bx: number, by: number) => Math.max(Math.abs(ax - bx), Math.abs(ay - by));
+export const fmt = new Intl.NumberFormat('en-US');
+export function roman(n: number): string {
+  if (n <= 0) return '0';
+  const table: [number, string][] = [[1000,'M'],[900,'CM'],[500,'D'],[400,'CD'],[100,'C'],[90,'XC'],[50,'L'],[40,'XL'],[10,'X'],[9,'IX'],[5,'V'],[4,'IV'],[1,'I']];
+  let out = '';
+  for (const [v, s] of table) while (n >= v) { out += s; n -= v; }
+  return out;
+}
+
+const MONTHS = ['Ianuarius','Februarius','Martius','Aprilis','Maius','Iunius','Quintilis','Sextilis','September','October','November','December'];
+export function monthName(m: number) { return MONTHS[((m % 12) + 12) % 12]; }
+
+/** Tiny typed pub/sub. */
+export class Emitter<E extends Record<string, any>> {
+  private map = new Map<keyof E, Set<(p: never) => void>>();
+  on<K extends keyof E>(k: K, fn: (p: E[K]) => void): () => void {
+    let s = this.map.get(k);
+    if (!s) { s = new Set(); this.map.set(k, s); }
+    s.add(fn as (p: never) => void);
+    return () => s!.delete(fn as (p: never) => void);
+  }
+  emit<K extends keyof E>(k: K, p: E[K]) {
+    const s = this.map.get(k);
+    if (s) for (const fn of [...s]) fn(p as never);
+  }
+}

src/data/buildings.ts

@@ -0,0 +1,97 @@
+// ─── Building definitions ──────────────────────────────────────────────────
+import type { BDef, BuildCategory } from '../sim/types';
+
+const D = (d: Partial<BDef> & { key: string; name: string; cat: BuildCategory; w: number; h: number; cost: number }): BDef => ({
+  desirability: 0, desRange: 3, workers: 0, fireRisk: 0, collapseRisk: 0,
+  roadAccess: true, blurb: '', spriteKey: d.key, ...d,
+} as BDef);
+
+export const BUILD_ORDER: string[] = [
+  // housing
+  'house', 'road', 'plaza', 'garden', 'statue',
+  // food
+  'farmWheat', 'orchard', 'fishingWharf', 'granary', 'market',
+  // industry
+  'clayPit', 'timberCamp', 'ironMine', 'crystalMine', 'potteryWksp', 'furnitureWksp', 'oilPress', 'winery', 'weaponSmith',
+  'warehouse',
+  // civic
+  'well', 'fountain', 'prefecture', 'engineerPost', 'forum', 'senate',
+  // religion
+  'templeJupiter', 'templeCeres', 'templeNeptune', 'templeMars', 'oracle',
+  // entertainment / education / health
+  'theater', 'amphitheater', 'colosseum', 'school', 'academy', 'library', 'clinic', 'hospital',
+  // military
+  'wall', 'tower', 'gatehouse', 'barracks', 'fort',
+  // magic
+  'leyPylon', 'mageTower', 'arcaneLibrary', 'golemFoundry',
+  // heroes
+  'heroHall',
+  // trade
+  'tradingPost',
+];
+
+export const DEFS: Record<string, BDef> = Object.fromEntries(([
+  D({ key:'house', name:'House', cat:'housing', w:1, h:1, cost:8, desirability:-1, fireRisk:0.05, collapseRisk:0.02, roadAccess:true, housing:{level:0}, blurb:'Home for citizens. Evolves with water, food and services.' }),
+  D({ key:'road', name:'Road', cat:'housing', w:1, h:1, cost:2, desirability:0, roadAccess:false, blurb:'Citizens travel on roads. Most buildings need road access.', hotkey:'r' }),
+  D({ key:'plaza', name:'Plaza', cat:'decor', w:1, h:1, cost:6, desirability:2, desRange:4, roadAccess:false, blurb:'Paved square. Beautifies the city; walkers enjoy it.', hotkey:'p' }),
+  D({ key:'garden', name:'Gardens', cat:'decor', w:1, h:1, cost:12, desirability:4, desRange:5, roadAccess:false, blurb:'Pleasure gardens raise nearby desirability.', hotkey:'g' }),
+  D({ key:'statue', name:'Statue', cat:'decor', w:1, h:1, cost:40, desirability:7, desRange:6, roadAccess:false, blurb:'A marble statue honoring the gods. Strong local beauty.', hotkey:'s' }),
+
+  D({ key:'farmWheat', name:'Wheat Farm', cat:'food', w:3, h:3, cost:40, desirability:-2, workers:7, fireRisk:0.04, collapseRisk:0.03, produces:{good:'wheat',rate:100}, storage:{goods:['wheat'],capacity:400}, blurb:'Grows wheat on fertile land. Carts deliver to granaries.' , hotkey:'w'}),
+  D({ key:'orchard', name:'Fruit Orchard', cat:'food', w:3, h:3, cost:44, desirability:0, workers:8, fireRisk:0.03, collapseRisk:0.03, produces:{good:'fruit',rate:100}, storage:{goods:['fruit'],capacity:400}, blurb:'Grows fruit. Second food type speeds housing evolution.' }),
+  D({ key:'fishingWharf', name:'Fishing Wharf', cat:'food', w:2, h:2, cost:50, desirability:-2, workers:8, produces:{good:'meat',rate:100}, storage:{goods:['meat'],capacity:400}, blurb:'Must touch coastline. Harvests the sea as meat.' }),
+  D({ key:'granary', name:'Granary', cat:'storage', w:3, h:3, cost:60, desirability:-3, workers:4, storage:{goods:['wheat','fruit','meat'],capacity:800}, blurb:'Stores raw food. Markets send buyers here.' }),
+  D({ key:'market', name:'Market', cat:'food', w:2, h:2, cost:36, desirability:-1, workers:4, fireRisk:0.06, service:['market'], walker:{kind:'peddler',count:2,period:20,range:24}, storage:{goods:['wheat','fruit','meat','pottery','furniture','oil','wine'],capacity:600}, blurb:'Peddlers distribute food & goods to houses.' , hotkey:'m'}),
+
+  D({ key:'clayPit', name:'Clay Pit', cat:'industry', w:2, h:2, cost:36, desirability:-4, workers:8, produces:{good:'clay',rate:100}, storage:{goods:['clay'],capacity:400}, blurb:'Digs clay from deposits. Needs to sit on clay soil.' }),
+  D({ key:'timberCamp', name:'Timber Camp', cat:'industry', w:2, h:2, cost:36, desirability:-4, workers:8, produces:{good:'timber',rate:100}, storage:{goods:['timber'],capacity:400}, blurb:'Fells trees. Should be placed near woodland.' }),
+  D({ key:'ironMine', name:'Iron Mine', cat:'industry', w:2, h:2, cost:70, desirability:-5, workers:10, produces:{good:'iron',rate:100}, storage:{goods:['iron'],capacity:400}, blurb:'Extracts iron ore from rocky ground.' }),
+  D({ key:'crystalMine', name:'Crystal Mine', cat:'magic', w:2, h:2, cost:120, desirability:-3, workers:10, produces:{good:'crystal',rate:100}, storage:{goods:['crystal'],capacity:300}, blurb:'Harvests raw mana-crystal from glowing seams.' }),
+  D({ key:'potteryWksp', name:'Pottery Works', cat:'industry', w:2, h:2, cost:52, desirability:-4, workers:8, fireRisk:0.08, consumes:{clay:100}, produces:{good:'pottery',rate:100}, storage:{goods:['clay','pottery'],capacity:500}, blurb:'Turns clay into pottery — a mark of civilized homes.' }),
+  D({ key:'furnitureWksp', name:'Furniture Works', cat:'industry', w:2, h:2, cost:56, desirability:-4, workers:8, fireRisk:0.07, consumes:{timber:100}, produces:{good:'furniture',rate:100}, storage:{goods:['timber','furniture'],capacity:500}, blurb:'Crafts fine furniture from timber.' }),
+  D({ key:'oilPress', name:'Oil Press', cat:'industry', w:2, h:2, cost:58, desirability:-4, workers:8, consumes:{olives:100}, produces:{good:'oil',rate:100}, storage:{goods:['olives','oil'],capacity:500}, blurb:'Presses olives into lamp oil for villas.' }),
+  D({ key:'winery', name:'Winery', cat:'industry', w:2, h:2, cost:62, desirability:-3, workers:8, consumes:{grapes:100}, produces:{good:'wine',rate:100}, storage:{goods:['grapes','wine'],capacity:500}, blurb:'Ferments grapes into wine fit for nobility.' }),
+  D({ key:'weaponSmith', name:'Weapon Smith', cat:'industry', w:2, h:2, cost:90, desirability:-4, workers:8, fireRisk:0.09, consumes:{iron:80,timber:40}, produces:{good:'weapons',rate:100}, storage:{goods:['iron','timber','weapons'],capacity:500}, blurb:'Forges weapons for legions, heroes and towers.' }),
+  D({ key:'warehouse', name:'Warehouse', cat:'storage', w:3, h:3, cost:48, desirability:-3, workers:4, storage:{goods:[],capacity:2400}, blurb:'General store for materials and finished goods.' , hotkey:'v'}),
+
+  D({ key:'well', name:'Well', cat:'civic', w:1, h:1, cost:14, desirability:0, workers:0, service:['water'], walker:{kind:'laborSeeker',count:0,period:0}, roadAccess:false, blurb:'Basic water for tents and shacks. No workers needed.' }),
+  D({ key:'fountain', name:'Fountain', cat:'civic', w:2, h:2, cost:30, desirability:3, desRange:4, workers:4, service:['water'], roadAccess:true, blurb:'Aqueduct-fed fountain. Required for houses above shack.' }),
+  D({ key:'prefecture', name:'Prefecture', cat:'civic', w:1, h:1, cost:24, desirability:-2, workers:5, service:['prefect'], walker:{kind:'prefect',count:1,period:18,range:24}, fireRisk:0.01, blurb:'Prefects patrol streets, dousing fires and fighting crime.' }),
+  D({ key:'engineerPost', name:"Engineer's Post", cat:'civic', w:1, h:1, cost:24, desirability:-2, workers:5, service:['engineer'], walker:{kind:'engineer',count:1,period:20,range:24}, blurb:'Engineers reinforce buildings against collapse.' }),
+  D({ key:'forum', name:'Forum', cat:'civic', w:2, h:2, cost:38, desirability:2, desRange:4, workers:6, service:['tax'], walker:{kind:'taxman',count:1,period:60,range:28}, blurb:'Tax collectors gather denarii from houses.' }),
+  D({ key:'senate', name:'Senate', cat:'civic', w:3, h:3, cost:150, desirability:5, desRange:8, workers:20, service:['tax'], walker:{kind:'taxman',count:2,period:55,range:34}, unique:true, blurb:'The heart of government. Broad tax collection + ratings bonus.' }),
+
+  D({ key:'templeJupiter', name:'Temple of Jupiter', cat:'religion', w:2, h:2, cost:60, desirability:4, desRange:6, workers:6, service:['religion'], walker:{kind:'priest',count:1,period:30,range:26}, manaGen:2, blurb:'King of gods. His priests also channel small amounts of mana.' }),
+  D({ key:'templeCeres', name:'Temple of Ceres', cat:'religion', w:2, h:2, cost:55, desirability:3, desRange:6, workers:6, service:['religion'], walker:{kind:'priest',count:1,period:30,range:26}, manaGen:2, blurb:'Goddess of harvest. Blesses fertile fields nearby.' }),
+  D({ key:'templeNeptune', name:'Temple of Neptune', cat:'religion', w:2, h:2, cost:55, desirability:3, desRange:6, workers:6, service:['religion'], walker:{kind:'priest',count:1,period:30,range:26}, manaGen:2, blurb:'Lord of the sea. Calms storms and floods.' }),
+  D({ key:'templeMars', name:'Temple of Mars', cat:'religion', w:2, h:2, cost:65, desirability:3, desRange:6, workers:6, service:['religion'], walker:{kind:'priest',count:1,period:30,range:26}, manaGen:1, blurb:'God of war. Strengthens the hearts of defenders.' }),
+  D({ key:'oracle', name:'Oracle', cat:'religion', w:2, h:2, cost:180, desirability:8, desRange:9, workers:10, service:['religion'], walker:{kind:'priest',count:2,period:26,range:32}, manaGen:8, unique:true, blurb:'The Oracle peers beyond the veil, generating rich mana.' }),
+
+  D({ key:'theater', name:'Theater', cat:'entertainment', w:2, h:2, cost:48, desirability:2, desRange:5, workers:8, service:['entertainment'], walker:{kind:'actor',count:1,period:28,range:26}, blurb:'Playwrights amuse the plebs with comedies.' }),
+  D({ key:'amphitheater', name:'Amphitheater', cat:'entertainment', w:3, h:3, cost:110, desirability:4, desRange:7, workers:12, service:['entertainment'], walker:{kind:'actor',count:2,period:24,range:32}, blurb:'Grand spectacles for a growing city.' }),
+  D({ key:'colosseum', name:'Colosseum', cat:'entertainment', w:3, h:3, cost:260, desirability:6, desRange:10, workers:24, service:['entertainment'], walker:{kind:'actor',count:3,period:20,range:40}, unique:true, blurb:'Legendary arena. Gladiators thrill the whole city.' }),
+
+  D({ key:'school', name:'School', cat:'education', w:2, h:2, cost:42, desirability:1, desRange:4, workers:9, service:['education'], walker:{kind:'teacher',count:1,period:30,range:26}, blurb:'Children learn letters and numbers.' }),
+  D({ key:'academy', name:'Academy', cat:'education', w:3, h:3, cost:130, desirability:3, desRange:7, workers:16, service:['education'], walker:{kind:'teacher',count:2,period:25,range:34}, blurb:'Higher learning for future senators.' }),
+  D({ key:'library', name:'Great Library', cat:'education', w:3, h:3, cost:200, desirability:6, desRange:9, workers:14, service:['education'], walker:{kind:'teacher',count:2,period:22,range:40}, manaGen:5, research:['golem','shield'], unique:true, blurb:'Scribes decode ancient arcana. Unlocks advanced spells.' }),
+  D({ key:'clinic', name:'Clinic', cat:'health', w:2, h:2, cost:40, desirability:0, desRange:4, workers:8, service:['health'], walker:{kind:'doctor',count:1,period:30,range:26}, blurb:'Physicians treat fevers and battle wounds.' }),
+  D({ key:'hospital', name:'Hospital', cat:'health', w:3, h:3, cost:140, desirability:2, desRange:6, workers:15, service:['health'], walker:{kind:'doctor',count:2,period:25,range:34}, blurb:'Advanced care improves health and longevity.' }),
+
+  D({ key:'wall', name:'City Wall', cat:'military', w:1, h:1, cost:8, desirability:0, roadAccess:false, fireRisk:0, collapseRisk:0.01, blurb:'Stonework barrier. Enemies must break through or go around.', hotkey:'q' }),
+  D({ key:'tower', name:'Watch Tower', cat:'military', w:2, h:2, cost:70, desirability:0, workers:6,
+    tower:{hp:280,dmg:14,speed:0,ranged:true,range:7,atkCd:1.1}, blurb:'Rains arrows on raiders within range. Needs weapons? No — needs men.' }),
+  D({ key:'gatehouse', name:'Gatehouse', cat:'military', w:2, h:2, cost:50, desirability:0, roadAccess:true, collapseRisk:0.01, blurb:'A gate in your wall that citizens may pass, but foes cannot.' }),
+  D({ key:'barracks', name:'Barracks', cat:'military', w:2, h:2, cost:80, desirability:-3, workers:10, consumes:{weapons:50}, blurb:'Trains recruits into legions using weapons from stores.' }),
+  D({ key:'fort', name:'Fortress', cat:'military', w:3, h:3, cost:220, desirability:-6, workers:16, fort:true, blurb:'Houses a legion of 16. The steel backbone of defense.' }),
+
+  D({ key:'leyPylon', name:'Ley Pylon', cat:'magic', w:1, h:1, cost:60, desirability:1, desRange:3, workers:4, manaGen:10, roadAccess:false, blurb:'Must be built ON a crystal seam. Siphons raw mana from the ley line.' }),
+  D({ key:'mageTower', name:'Mage Tower', cat:'magic', w:2, h:2, cost:160, desirability:2, desRange:6, workers:8,
+    mageTower:{hp:220,dmg:26,speed:0,ranged:true,range:8,atkCd:1.6}, manaGen:6, blurb:'Battle-mages hurl arcane bolts at enemies in range.' }),
+  D({ key:'arcaneLibrary', name:'Arcanum', cat:'magic', w:3, h:3, cost:240, desirability:5, desRange:8, workers:12, manaGen:12, research:['firestorm','golem','shield','insight'], unique:true, blurb:'Master mages research the deepest spells.' }),
+  D({ key:'golemFoundry', name:'Golem Foundry', cat:'magic', w:2, h:2, cost:190, desirability:-2, workers:10, consumes:{iron:40}, blurb:'Constructs stone golems for permanent guard duty (costs iron + mana).' }),
+
+  D({ key:'heroHall', name:'Hall of Heroes', cat:'heroes', w:3, h:3, cost:320, desirability:6, desRange:8, workers:12, heroHall:true, unique:true, blurb:'Summon legendary heroes to defend the city and inspire industry.' }),
+  D({ key:'tradingPost', name:'Trading Post', cat:'trade', w:3, h:3, cost:70, desirability:-2, workers:8, blurb:'Caravans from foreign cities trade goods here each season.' }),
+].map(d => [d.key, d])));
+
+export function def(key: string): BDef { return DEFS[key]; }

src/data/heroes.ts

@@ -0,0 +1,2 @@
+// ─── Heroes roster ──────────────────────────────────────────────────────────
+export { HEROES } from '../sim/types';

src/data/housing.ts

@@ -0,0 +1,38 @@
+// ─── Housing evolution tiers (Caesar-3 style) ──────────────────────────────
+import type { ServiceType } from '../sim/types';
+
+export interface HouseTier {
+  name: string; maxResidents: number;
+  needs: {
+    water: 0 | 1 | 2;                 // 0 none, 1 well, 2 fountain
+    foodTypes: number;                // distinct food types required recently
+    goods?: { pottery?: number; furniture?: number; oil?: number; wine?: number };
+    services?: ServiceType[];         // must be currently covered
+    desirability: number;             // min tile desirability
+    entertainmentPts?: number;        // sum of venues covering
+  };
+  devolveMonthsGrace: number;         // months of missing need before devolve
+}
+
+export const HOUSE_TIERS: HouseTier[] = [
+  { name:'Small Tent',   maxResidents:5,  needs:{ water:0, foodTypes:0, desirability:-99 }, devolveMonthsGrace:0 },
+  { name:'Large Tent',   maxResidents:9,  needs:{ water:1, foodTypes:0, desirability:-8 },  devolveMonthsGrace:2 },
+  { name:'Small Shack',  maxResidents:13, needs:{ water:1, foodTypes:1, desirability:-4 },  devolveMonthsGrace:2 },
+  { name:'Large Shack',  maxResidents:18, needs:{ water:1, foodTypes:1, desirability:-2 },  devolveMonthsGrace:3 },
+  { name:'Small Hovel',  maxResidents:24, needs:{ water:1, foodTypes:1, services:['religion'], desirability:0 }, devolveMonthsGrace:3 },
+  { name:'Large Hovel',  maxResidents:30, needs:{ water:1, foodTypes:2, services:['religion','entertainment'], desirability:2 }, devolveMonthsGrace:3 },
+  { name:'Small Casa',   maxResidents:40, needs:{ water:2, foodTypes:2, services:['religion','entertainment','education'], desirability:4 }, devolveMonthsGrace:4 },
+  { name:'Large Casa',   maxResidents:52, needs:{ water:2, foodTypes:2, services:['religion','entertainment','education','health'], desirability:6,
+      goods:{pottery:1} }, devolveMonthsGrace:4 },
+  { name:'Small Villa',  maxResidents:70, needs:{ water:2, foodTypes:3, services:['religion','entertainment','education','health'], desirability:9,
+      goods:{pottery:1,furniture:1,oil:1} }, devolveMonthsGrace:5 },
+  { name:'Large Villa',  maxResidents:95, needs:{ water:2, foodTypes:3, services:['religion','entertainment','education','health'], desirability:12,
+      goods:{pottery:1,furniture:1,oil:1,wine:1}, entertainmentPts:2 }, devolveMonthsGrace:6 },
+  { name:'Estate',       maxResidents:130,needs:{ water:2, foodTypes:3, services:['religion','entertainment','education','health'], desirability:16,
+      goods:{pottery:2,furniture:2,oil:2,wine:2}, entertainmentPts:3 }, devolveMonthsGrace:6 },
+];
+
+export const HOUSE_SPRITE_BY_LEVEL = [
+  'house_l0a','house_l0b','house_l1a','house_l1b','house_l2a','house_l2b',
+  'house_l3a','house_l3b','house_l4a','house_l4b','house_l5a',
+];

src/data/scenarios.ts

@@ -0,0 +1,88 @@
+// ─── Campaign scenarios & sandbox config ───────────────────────────────────
+import type { Scenario } from '../sim/types';
+
+export const CAMPAIGN: Scenario[] = [
+  {
+    id: 'brundisium', name: 'I · Brundisium', subtitle: 'A farming village on the Aurelia road',
+    brief: 'Governor, the Senate grants you a modest purse to found a farming village. Raise 150 citizens and keep them fed. Bandits are rumored — train a prefect or two.',
+    mapSeed: 1101, mapW: 40, mapH: 40, funds: 3000,
+    startRes: { wheat: 350 },
+    goals: [ { kind:'population', amount:150 }, { kind:'surviveYears', amount:4 } ],
+    invasions: [], monsterEvents: [],
+    openTrades: ['Capua'], allowSpellsFromStart: false,
+    hints: [
+      'Drag RIGHT mouse (or WASD/arrows) to scroll. Mouse wheel zooms.',
+      'Place buildings ANYWHERE — then connect each one with a ROAD to put it to work.',
+      'Houses need a WELL nearby, then food from a MARKET.',
+      'Farms must be built on dark fertile soil; watch the fertility overlay.',
+      'Keep unemployment low but never at zero — industry needs hands.',
+    ],
+    reward: 'The Senate is pleased. Your career begins.',
+  },
+  {
+    id: 'valley', name: 'II · Vale of Ceres', subtitle: 'Breadbasket of the province',
+    brief: 'Ceres herself blessed this valley. Feed the growing province: 400 souls, with culture taking root — build temples and schools.',
+    mapSeed: 2202, mapW: 48, mapH: 48, funds: 5000,
+    startRes: { wheat: 200 },
+    goals: [ { kind:'population', amount:400 }, { kind:'culture', amount:25 }, { kind:'prosperity', amount:20 } ],
+    invasions: [ { atYearMonth:[2,6], kind:'barbarian', squads:1, size:8, warnMonths:3 } ],
+    monsterEvents: [],
+    openTrades: ['Capua','Ravenna'],
+    allowSpellsFromStart: false,
+    hints: [ 'Temples raise Culture and please the gods.', 'A FORUM lets you collect taxes from housing.', 'Barbarians come by the northwest pass — walls and a fort will answer them.' ],
+    reward: 'News of your harvests reaches Rome itself.',
+  },
+  {
+    id: 'leyline', name: 'III · The Ley Line', subtitle: 'Where crystal seams glow beneath the earth',
+    brief: 'Prospectors found glowing crystal seams. Build Ley Pylons atop them, awaken mana, and learn the first spells. A Hydra nests in the eastern marsh.',
+    mapSeed: 3303, mapW: 48, mapH: 48, funds: 8000,
+    startRes: { timber: 100, clay: 100 },
+    goals: [ { kind:'population', amount:500 }, { kind:'slayMonsters', amount:1 }, { kind:'treasury', amount:6000 } ],
+    invasions: [],
+    monsterEvents: [ { atYearMonth:[1,3], kind:'hydra', squads:1, size:1, warnMonths:3 } ],
+    openTrades: ['Ravenna','Syracuse'],
+    allowSpellsFromStart: true,
+    hints: [ 'Build an ARCANUM or GREAT LIBRARY to research spells.', 'LEY PYLONS only work on glowing crystal seams.', 'A HALL OF HEROES lets you summon a hero to slay the Hydra.' ],
+    reward: 'Magic flows for Rome. The age of legends dawns.',
+  },
+  {
+    id: 'frontier', name: 'IV · Iron Frontier', subtitle: 'Legions, forges and the Minotaur war',
+    brief: 'Iron in the hills, war on the wind. Arm legions, forge weapons, and survive the Minotaur horde that thunders out of the labyrinth each summer.',
+    mapSeed: 4404, mapW: 52, mapH: 52, funds: 9000,
+    startRes: { weapons: 50 },
+    goals: [ { kind:'population', amount:700 }, { kind:'peace', amount:30 }, { kind:'slayMonsters', amount:5 } ],
+    invasions: [ { atYearMonth:[1,9], kind:'barbarian', squads:2, size:12, warnMonths:3 }, { atYearMonth:[3,3], kind:'barbarian', squads:3, size:14, warnMonths:3 } ],
+    monsterEvents: [ { atYearMonth:[1,0], kind:'minotaur', squads:1, size:1, warnMonths:2 }, { atYearMonth:[2,6], kind:'minotaur', squads:2, size:1, warnMonths:2 }, { atYearMonth:[4,0], kind:'harpy', squads:2, size:3, warnMonths:2 } ],
+    openTrades: ['Syracuse','Mediolanum'],
+    allowSpellsFromStart: true,
+    hints: [ 'WEAPON SMITHS turn iron+timber into weapons; barracks turn weapons into legions.', 'Towers need no wall, but enemies can walk around them.', 'Heroes gain XP with each kill and grow devastatingly strong.' ],
+    reward: 'The frontier holds. Settlers stream in behind your shields.',
+  },
+  {
+    id: 'eternal', name: 'V · Arcanum Aeterna', subtitle: 'Found the eternal city of magic',
+    brief: 'Your greatest charge: found a city of wonders where magic and mortar meet. Reach 1200 citizens, supreme ratings — and raise a Golem Legion against the Lich King\'s host.',
+    mapSeed: 5505, mapW: 56, mapH: 56, funds: 14000,
+    startRes: { wheat: 400, pottery: 50, weapons: 80 },
+    goals: [ { kind:'population', amount:1200 }, { kind:'prosperity', amount:45 }, { kind:'culture', amount:55 }, { kind:'favor', amount:60 }, { kind:'slayMonsters', amount:8 } ],
+    invasions: [ { atYearMonth:[2,0], kind:'barbarian', squads:3, size:16, warnMonths:3 }, { atYearMonth:[3,6], kind:'barbarian', squads:4, size:18, warnMonths:3 }, { atYearMonth:[5,0], kind:'barbarian', squads:5, size:20, warnMonths:3 } ],
+    monsterEvents: [ { atYearMonth:[1,6], kind:'lich', squads:1, size:1, warnMonths:3 }, { atYearMonth:[3,0], kind:'lich', squads:1, size:1, warnMonths:3 }, { atYearMonth:[4,6], kind:'hydra', squads:2, size:1, warnMonths:3 }, { atYearMonth:[6,0], kind:'lich', squads:2, size:1, warnMonths:3 } ],
+    openTrades: ['Ravenna','Syracuse','Mediolanum','Alexandria'],
+    allowSpellsFromStart: true,
+    hints: [ 'Estates demand wine, oil, furniture AND plenty of entertainment.', 'The COLLOSSEUM... rather, COLOSSEUM anchors citywide culture.', 'Save often — the Lich raises the dead he slays.' ],
+    reward: 'Imperium Arcanum! Your name is written among the legends.',
+  },
+];
+
+export function makeSandbox(seed: number, w = 56, h = 56): Scenario {
+  return {
+    id: 'sandbox-' + seed, name: 'Free Province', subtitle: 'Endless sandbox',
+    brief: 'Build without limits. Waves of monsters scale with your prosperity. No victory, no defeat but ruin.',
+    mapSeed: seed, mapW: w, mapH: h, funds: 12000,
+    goals: [],
+    invasions: [], monsterEvents: [],
+    openTrades: ['Capua','Ravenna','Syracuse','Mediolanum','Alexandria'],
+    allowSpellsFromStart: true,
+    hints: [],
+    reward: '',
+  };
+}

src/main.ts

@@ -0,0 +1,3 @@
+import { bootApp } from './app';
+
+bootApp();

src/render/camera.ts

@@ -0,0 +1,39 @@
+// ─── Camera: pan/zoom over the iso world ───────────────────────────────────
+export const TILE_W = 64, TILE_H = 32;
+
+export class Camera {
+  cx = 0; cy = 0;            // world px at screen center
+  zoom = 1;                  // 0.5..2
+  vw = 800; vh = 600;
+  minZoom = 0.45; maxZoom = 2.2;
+  boundsW = 64; boundsH = 64;
+
+  setViewport(w: number, h: number) { this.vw = w; this.vh = h; }
+  worldToScreen(wx: number, wy: number): [number, number] {
+    return [(wx - this.cx) * this.zoom + this.vw / 2, (wy - this.cy) * this.zoom + this.vh / 2];
+  }
+  screenToWorld(sx: number, sy: number): [number, number] {
+    return [(sx - this.vw / 2) / this.zoom + this.cx, (sy - this.vh / 2) / this.zoom + this.cy];
+  }
+  screenToTile(sx: number, sy: number): [number, number] {
+    const [wx, wy] = this.screenToWorld(sx, sy);
+    const fx = wx / (TILE_W / 2), fy = wy / (TILE_H / 2);
+    return [Math.floor((fy + fx) / 2), Math.floor((fy - fx) / 2)];
+  }
+  tileToWorld(tx: number, ty: number): [number, number] {
+    return [(tx - ty) * TILE_W / 2, (tx + ty) * TILE_H / 2];
+  }
+  clampToBounds() {
+    const [wx, wy] = this.tileToWorld(this.boundsW / 2, this.boundsH / 2);
+    const mx = this.boundsW * TILE_W * 0.75, my = this.boundsH * TILE_H * 1.15;
+    this.cx = Math.max(-mx, Math.min(mx * 2 - mx, Math.max(this.cx, wx - mx), Math.min(this.cx, wx + mx)));
+    this.cy = Math.max(-my * 0.5, Math.min(my, Math.max(this.cy, wy - my * 0.6), Math.min(this.cy, wy + my * 0.6)));
+  }
+  zoomAt(sx: number, sy: number, factor: number) {
+    const [wx, wy] = this.screenToWorld(sx, sy);
+    this.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.zoom * factor));
+    const [wx2, wy2] = this.screenToWorld(sx, sy);
+    this.cx += wx - wx2; this.cy += wy - wy2;
+    this.clampToBounds();
+  }
+}

src/render/fx.ts

@@ -0,0 +1,47 @@
+// ─── Visual effect queues (sim pushes, renderer consumes) ──────────────────
+export interface Projectile { x: number; y: number; tx: number; ty: number; t: number; dur: number; color: string; arc: number; }
+export interface Blast { x: number; y: number; t: number; dur: number; r0: number; r1: number; color: string; }
+export interface FloatText { x: number; y: number; t: number; dur: number; text: string; color: string; size: number; }
+export interface Spark { x: number; y: number; vx: number; vy: number; t: number; dur: number; color: string; size: number; grav: number; }
+
+class FXImpl {
+  projectiles: Projectile[] = [];
+  blasts: Blast[] = [];
+  floats: FloatText[] = [];
+  sparks: Spark[] = [];
+  shake = 0;
+
+  projectile(x: number, y: number, tx: number, ty: number, color: string, speedPxPerS = 260, arc = 26) {
+    const dur = Math.hypot(tx - x, ty - y) / speedPxPerS;
+    this.projectiles.push({ x, y, tx, ty, t: 0, dur, color, arc });
+  }
+  blast(x: number, y: number, r1: number, color: string, dur = 0.6) {
+    this.blasts.push({ x, y, t: 0, dur, r0: r1 * 0.2, r1, color });
+    this.shake = Math.min(10, this.shake + r1 * 0.25);
+  }
+  float(x: number, y: number, text: string, color = '#ffe9a0', size = 13, dur = 1.4) {
+    if (this.floats.length > 60) this.floats.shift();
+    this.floats.push({ x, y, t: 0, dur, text, color, size });
+  }
+  spark(x: number, y: number, color: string, n = 6, power = 40, grav = 60) {
+    for (let i = 0; i < n; i++) {
+      const a = Math.random() * Math.PI * 2, v = power * (0.4 + Math.random());
+      this.sparks.push({ x, y, vx: Math.cos(a) * v, vy: Math.sin(a) * v * 0.5 - power * 0.5, t: 0, dur: 0.5 + Math.random() * 0.5, color, size: 1.5 + Math.random() * 2.5, grav });
+    }
+    if (this.sparks.length > 400) this.sparks.splice(0, this.sparks.length - 400);
+  }
+
+  update(dt: number) {
+    this.shake = Math.max(0, this.shake - dt * 22);
+    for (const arr of [this.projectiles, this.blasts, this.floats, this.sparks] as Array<{ t: number; dur: number }[]>) {
+      for (let i = arr.length - 1; i >= 0; i--) { arr[i].t += dt; if (arr[i].t >= arr[i].dur) arr.splice(i, 1); }
+    }
+  }
+  clear() { this.projectiles.length = 0; this.blasts.length = 0; this.floats.length = 0; this.sparks.length = 0; this.shake = 0; }
+}
+export const FX = new FXImpl();
+
+// ─── Audio hooks (filled by audio module; no-op stubs before init) ─────────
+export const Sfx = {
+  play: (_name: string, _opts?: { vol?: number; rate?: number }) => {},
+};

src/render/renderer.ts

@@ -0,0 +1,810 @@
+// ─── World renderer ─────────────────────────────────────────────────────────
+import type { Building, CityState, Walker } from '../sim/types';
+import { def } from '../data/buildings';
+import { HOUSE_SPRITE_BY_LEVEL } from '../data/housing';
+import { Camera, TILE_W, TILE_H } from './camera';
+import { getSprite, getRubble } from './sprites';
+import { FX, Sfx } from './fx';
+
+export type OverlayMode = null | 'desirability' | 'fire' | 'water' | 'fertility';
+
+export interface ViewState {
+  overlay: OverlayMode;
+  ghost: { key: string; x: number; y: number; valid: boolean; reason?: string; dragFrom?: { x: number; y: number }; w: number; h: number } | null;
+  selectedBld: number;
+  eraseHover: boolean;
+  spellTarget: { radius: number; range: number; fromX?: number; fromY?: number } | null;
+  showGrid: boolean;
+}
+
+const TERRAIN_COLORS: Record<string, [string, string]> = {
+  grass: ['#7fa04a', '#75963f'],
+  fertile: ['#5f8f3a', '#548233'],
+};
+
+function shadeHex(c: string, f: number): string { // quick rgb-string shade
+  const n = parseInt(c.slice(1), 16);
+  const r = Math.min(255, ((n >> 16) & 255) * f), g = Math.min(255, ((n >> 8) & 255) * f), b = Math.min(255, (n & 255) * f);
+  return `rgb(${r | 0},${g | 0},${b | 0})`;
+}
+
+export class Renderer {
+  city: CityState;
+  terrainCv: HTMLCanvasElement;
+  tctx: CanvasRenderingContext2D;
+  private dirty = new Set<number>();
+  private originX: number; // screen px of tile(0,0) inside terrain canvas
+  private originY: number;
+
+  constructor(city: CityState) {
+    this.city = city;
+    this.originX = city.H * TILE_W / 2 + 32;
+    this.originY = 32;
+    this.terrainCv = document.createElement('canvas');
+    this.terrainCv.width = (city.W + city.H) * TILE_W / 2 + 64;
+    this.terrainCv.height = (city.W + city.H) * TILE_H / 2 + 64;
+    this.tctx = this.terrainCv.getContext('2d')!;
+    for (let i = 0; i < city.W * city.H; i++) this.dirty.add(i);
+  }
+
+  invalidateTile(x: number, y: number) {
+    const W = this.city.W;
+    for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++) {
+      const nx = x + dx, ny = y + dy;
+      if (nx >= 0 && ny >= 0 && nx < W && ny < this.city.H) this.dirty.add(ny * W + nx);
+    }
+  }
+  invalidateAll() { for (let i = 0; i < this.city.W * this.city.H; i++) this.dirty.add(i); }
+
+  private drawGroundTile(x: number, y: number) {
+    const c = this.city, t = c.tiles[y * c.W + x], ctx = this.tctx;
+    const ox = this.originX + (x - y) * TILE_W / 2, oy = this.originY + (x + y) * TILE_H / 2;
+    ctx.save();
+    ctx.translate(ox, oy);
+    ctx.beginPath();
+    ctx.moveTo(0, -TILE_H / 2); ctx.lineTo(TILE_W / 2, 0); ctx.lineTo(0, TILE_H / 2); ctx.lineTo(-TILE_W / 2, 0);
+    ctx.closePath();
+    let fill: string;
+    if (t.terrain === 'water') fill = '#33638e';
+    else if (t.terrain === 'rock') fill = '#8f867a';
+    else if (t.terrain === 'tree') fill = TERRAIN_COLORS.grass[t.variant % 2];
+    else if (t.terrain === 'iron') fill = '#7d786e';
+    else if (t.terrain === 'clay') fill = '#96703f';
+    else if (t.terrain === 'crystal') fill = '#4d6a72';
+    else fill = TERRAIN_COLORS[t.terrain][t.variant % 2];
+    ctx.fillStyle = fill;
+    ctx.fill();
+    if (t.terrain !== 'water') {
+      // subtle edge
+      ctx.strokeStyle = 'rgba(20,30,10,0.08)';
+      ctx.lineWidth = 1; ctx.stroke();
+    }
+    if (t.plaza || t.garden) {
+      ctx.fillStyle = t.plaza ? '#b5a888' : '#67934a';
+      ctx.fill();
+      if (t.garden) {
+        ctx.fillStyle = '#c94f3d'; ctx.beginPath(); ctx.arc(-6, 0, 2, 0, 7); ctx.fill();
+        ctx.fillStyle = '#e8c93d'; ctx.beginPath(); ctx.arc(7, 4, 2, 0, 7); ctx.fill();
+      } else {
+        ctx.strokeStyle = 'rgba(120,108,84,.55)';
+        ctx.beginPath(); ctx.moveTo(-TILE_W / 2, 0); ctx.lineTo(TILE_W / 2, 0); ctx.stroke();
+      }
+    }
+    if (t.road) {
+      ctx.fillStyle = '#9b8862'; ctx.fill();
+      ctx.strokeStyle = 'rgba(70,55,30,.35)';
+      ctx.beginPath();
+      ctx.moveTo(-TILE_W / 2 + 3, 1); ctx.lineTo(0, TILE_H / 2 - 2); ctx.lineTo(TILE_W / 2 - 3, 1); ctx.lineTo(0, -TILE_H / 2 + 2);
+      ctx.closePath(); ctx.stroke();
+      ctx.fillStyle = 'rgba(60,48,28,.25)';
+      ctx.fillRect(-4, -2, 3, 2); ctx.fillRect(5, 2, 3, 2);
+    }
+    ctx.restore();
+  }
+
+  flushDirty() {
+    if (!this.dirty.size) return;
+    for (const i of this.dirty) {
+      const x = i % this.city.W, y = (i / this.city.W) | 0;
+      this.drawGroundTile(x, y);
+    }
+    this.dirty.clear();
+  }
+
+  // ── main frame ──
+  drawFrame(ctx: CanvasRenderingContext2D, cam: Camera, dt: number, view: ViewState, timeS: number) {
+    const c = this.city;
+    this.flushDirty();
+    FX.update(dt);
+
+    // sky
+    const sky = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
+    sky.addColorStop(0, '#20283e'); sky.addColorStop(0.55, '#31405c'); sky.addColorStop(1, '#243447');
+    ctx.fillStyle = sky; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    const shx = FX.shake ? (Math.random() - 0.5) * FX.shake : 0;
+    const shy = FX.shake ? (Math.random() - 0.5) * FX.shake : 0;
+
+    ctx.save();
+    ctx.translate(shx, shy);
+    _setCurrentCtx(ctx);
+
+    // terrain blit
+    const [tx0, ty0] = cam.worldToScreen(-this.originX, -this.originY);
+    ctx.drawImage(this.terrainCv, tx0, ty0,
+      this.terrainCv.width * cam.zoom, this.terrainCv.height * cam.zoom);
+
+    // water shimmer (visible tiles)
+    this.drawWaterShimmer(ctx, cam, timeS);
+
+    // overlays under entities
+    if (view.overlay) this.drawOverlay(ctx, cam, view.overlay);
+
+    // build depth-sorted drawable list
+    type D = { d: number; f: () => void };
+    const list: D[] = [];
+    const margin = 220;
+
+    const pushIfVisible = (wx: number, wy: number, d: number, f: () => void) => {
+      const [sx, sy] = cam.worldToScreen(wx, wy);
+      if (sx < -margin || sy < -margin * 2 || sx > cam.vw + margin || sy > cam.vh + margin * 2) return;
+      list.push({ d, f });
+    };
+
+    // terrain features
+    for (let y = 0; y < c.H; y++) for (let x = 0; x < c.W; x++) {
+      const t = c.tiles[y * c.W + x];
+      if (t.bld || t.road || t.plaza || t.garden) continue; // covered by structures
+      if (t.terrain === 'tree') {
+        const key = t.variant % 3 === 0 ? 'feat_pine' : 'feat_tree';
+        const [wx, wy] = cam.tileToWorld(x, y);
+        pushFeature(list, cam, wx, wy, x + y, key, margin);
+      } else if (t.terrain === 'rock') {
+        const [wx, wy] = cam.tileToWorld(x, y);
+        pushFeature(list, cam, wx, wy, x + y, 'feat_rock', margin);
+      } else if (t.terrain === 'iron') {
+        const [wx, wy] = cam.tileToWorld(x, y);
+        pushFeature(list, cam, wx, wy, x + y, 'feat_iron', margin);
+      } else if (t.terrain === 'clay') {
+        const [wx, wy] = cam.tileToWorld(x, y);
+        pushFeature(list, cam, wx, wy, x + y, 'feat_clay', margin);
+      } else if (t.terrain === 'crystal') {
+        const [wx, wy] = cam.tileToWorld(x, y);
+        pushFeature(list, cam, wx, wy, x + y, 'feat_crystal', margin);
+      }
+    }
+
+    // buildings
+    for (const b of c.buildings.values()) {
+      if (b.ruin) {
+        // draw a rubble pile so ruined plots are clearly visible & obviously blocked
+        const [rwx, rwy] = cam.tileToWorld(b.x + b.w / 2, b.y + b.h / 2);
+        pushIfVisible(rwx, rwy, b.x + b.w + b.y + b.h, () => {
+          const rub = getRubble();
+          const sc = cam.zoom * Math.max(b.w, b.h) * 0.9;
+          ctx.globalAlpha = 0.92;
+          ctx.drawImage(rub.cv, rwx - rub.ax * sc, rwy - rub.ay * sc, rub.cv.width * sc, rub.cv.height * sc);
+          ctx.globalAlpha = 1;
+        });
+        continue;
+      }
+      const dd = def(b.def);
+      const [wx, wy] = cam.tileToWorld(b.x, b.y);
+      pushIfVisible(wx, wy, b.x + b.w + b.y + b.h, () => {
+        const sprKey = b.def === 'house'
+          ? (HOUSE_SPRITE_BY_LEVEL[Math.min(b.houseLevel, HOUSE_SPRITE_BY_LEVEL.length - 1)] ?? 'house_l0a')
+          : dd.spriteKey;
+        const spr = getSprite(sprKey);
+        const scale = cam.zoom;
+        const px = wx - spr.ax * scale, py = wy - spr.ay * scale;
+        ctx.drawImage(spr.cv, px, py, spr.cv.width * scale, spr.cv.height * scale);
+        if (b.noRoad) this.drawNoRoadBadge(ctx, wx + (b.w - b.h) * TILE_W / 4, wy - 34 * scale - Math.sin(timeS * 3) * 2.5 * scale, cam.zoom);
+        if (dd.manaGen && b.workersLive > 0 && timeS % 1 < 0.7) {
+          const gx = wx + (Math.random() - 0.5) * 30 * scale, gy = wy - 30 * scale * Math.random();
+          ctx.fillStyle = 'rgba(150,220,255,.7)';
+          ctx.fillRect(gx, gy, 2.2 * scale, 2.2 * scale);
+        }
+      });
+      // fire on building
+      if (b.burning > 0) {
+        const cxw = wx + (b.w - b.h) * TILE_W / 4, cyw = wy + (b.w + b.h) * TILE_H / 4;
+        pushIfVisible(cxw, cyw, b.x + b.y + b.w + b.h + 0.4, () => this.drawFlames(ctx, cxw, cyw, timeS, Math.max(b.w, b.h)));
+      }
+    }
+
+    // walkers
+    for (const w of c.walkers.values()) {
+      const [wx, wy] = cam.tileToWorld(w.x, w.y);
+      pushIfVisible(wx, wy, w.x + w.y + 0.3, () => this.drawWalker(ctx, w, wx, wy, cam.zoom, timeS));
+    }
+
+    list.sort((a, b2) => a.d - b2.d);
+    for (const item of list) item.f();
+
+    // selection highlight
+    if (view.selectedBld) {
+      const b = c.buildings.get(view.selectedBld);
+      if (b) this.outlineFootprint(ctx, cam, b.x, b.y, b.w, b.h, `rgba(255,235,160,${0.55 + 0.35 * Math.sin(timeS * 6)})`, 2);
+    }
+    // erase hover
+    if (view.eraseHover && view.ghost) {
+      this.outlineFootprint(ctx, cam, view.ghost.x, view.ghost.y, view.ghost.w, view.ghost.h, 'rgba(255,80,60,.85)', 2);
+    }
+    // build ghost
+    if (view.ghost && !view.eraseHover) {
+      const g = view.ghost;
+      const col = g.valid ? 'rgba(120,230,120,.4)' : 'rgba(240,80,60,.45)';
+      this.outlineFootprint(ctx, cam, g.x, g.y, g.w, g.h, col, 2, true);
+      const spr = getSprite(g.key);
+      const [gx, gy] = cam.tileToWorld(g.x, g.y);
+      ctx.globalAlpha = 0.65;
+      ctx.drawImage(spr.cv, gx - spr.ax * cam.zoom, gy - spr.ay * cam.zoom, spr.cv.width * cam.zoom, spr.cv.height * cam.zoom);
+      ctx.globalAlpha = 1;
+      // footprint outline (helps see the true extent of multi-tile buildings)
+      for (let fy = 0; fy < g.h; fy++) for (let fx = 0; fx < g.w; fx++) {
+        const [cx2, cy2] = cam.tileToWorld(g.x + fx, g.y + fy);
+        ctx.beginPath();
+        ctx.moveTo(cx2, cy2 - TILE_H / 2);
+        ctx.lineTo(cx2 + TILE_W / 2, cy2);
+        ctx.lineTo(cx2, cy2 + TILE_H / 2);
+        ctx.lineTo(cx2 - TILE_W / 2, cy2);
+        ctx.closePath();
+        ctx.strokeStyle = g.valid ? 'rgba(255,255,255,.55)' : 'rgba(255,90,70,.8)';
+        ctx.lineWidth = 1.4;
+        ctx.stroke();
+      }
+      if (!g.valid && g.reason) {
+        const [cxw, cyw] = cam.tileToWorld(g.x + g.w / 2, g.y + g.h / 2);
+        const [scx, scy] = cam.worldToScreen(cxw, cyw - 1.2);
+        ctx.font = `${Math.round(13 * Math.max(0.8, Math.min(1.4, cam.zoom)))}px Trebuchet MS`;
+        ctx.textAlign = 'center';
+        const tw2 = ctx.measureText(g.reason).width;
+        ctx.fillStyle = 'rgba(20,10,5,.82)';
+        ctx.fillRect(scx - tw2 / 2 - 7, scy - 15, tw2 + 14, 21);
+        ctx.strokeStyle = 'rgba(255,110,90,.9)';
+        ctx.lineWidth = 1;
+        ctx.strokeRect(scx - tw2 / 2 - 7, scy - 15, tw2 + 14, 21);
+        ctx.fillStyle = '#ffd9d0';
+        ctx.fillText(g.reason, scx, scy);
+        ctx.textAlign = 'left';
+      }
+    }
+    // grid
+    if (view.showGrid) this.drawGrid(ctx, cam);
+
+    // spell target circle
+    if (view.spellTarget) {
+      const st = view.spellTarget;
+      const [mx, my] = st.fromX !== undefined ? [st.fromX, st.fromY] : [0, 0];
+      void mx; void my;
+      // drawn at mouse by app via ghost? we draw at stored cursor world pos:
+      const [wx, wy] = cam.tileToWorld(st.fromX ?? 0, st.fromY ?? 0);
+      const rpx = st.radius * TILE_W / 2 * cam.zoom;
+      ctx.strokeStyle = 'rgba(170,140,255,.95)'; ctx.lineWidth = 2;
+      ctx.setLineDash([6, 5]);
+      ctx.beginPath(); ctx.ellipse(wx, wy, rpx, rpx / 2, 0, 0, Math.PI * 2); ctx.stroke();
+      ctx.setLineDash([]);
+    }
+
+    // FX layer
+    this.drawFx(ctx, cam);
+
+    ctx.restore();
+  }
+
+  private drawNoRoadBadge(ctx: CanvasRenderingContext2D, x: number, y: number, zoom: number) {
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.scale(zoom, zoom);
+    ctx.fillStyle = 'rgba(15,10,5,.55)';
+    ctx.beginPath(); ctx.arc(0, 0, 9, 0, Math.PI * 2); ctx.fill();
+    ctx.strokeStyle = '#ffb454'; ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.arc(0, 0, 9, 0, Math.PI * 2); ctx.stroke();
+    // little road with slash
+    ctx.strokeStyle = '#e8d8ae'; ctx.lineWidth = 1.6;
+    ctx.beginPath(); ctx.moveTo(-4, 4); ctx.lineTo(-1.5, -4); ctx.lineTo(1.5, 4); ctx.stroke();
+    ctx.strokeStyle = '#ff7a60';
+    ctx.beginPath(); ctx.moveTo(-6, -6); ctx.lineTo(6, 6); ctx.stroke();
+    ctx.restore();
+  }
+
+  private drawWaterShimmer(ctx: CanvasRenderingContext2D, cam: Camera, timeS: number) {
+    const c = this.city;
+    ctx.strokeStyle = 'rgba(190,225,250,.28)';
+    ctx.lineWidth = 1.4 * cam.zoom;
+    const step = 2;
+    for (let y = 0; y < c.H; y += 1) for (let x = (y % 2); x < c.W; x += step) {
+      const t = c.tiles[y * c.W + x];
+      if (t.terrain !== 'water') continue;
+      const [wx, wy] = cam.tileToWorld(x, y);
+      const ph = Math.sin(timeS * 2 + x * 1.7 + y * 2.3);
+      const len = 10 + ph * 4;
+      const [sx, sy] = cam.worldToScreen(wx - len / TILE_W / 2, wy);
+      ctx.beginPath();
+      ctx.moveTo(sx, sy);
+      ctx.lineTo(sx + len * cam.zoom, sy);
+      ctx.stroke();
+    }
+  }
+
+  private drawOverlay(ctx: CanvasRenderingContext2D, cam: Camera, mode: OverlayMode) {
+    const c = this.city;
+    for (let y = 0; y < c.H; y++) for (let x = 0; x < c.W; x++) {
+      const t = c.tiles[y * c.W + x];
+      let color: string | null = null;
+      if (mode === 'desirability') color = desirabilityColor(t.desirability);
+      else if (mode === 'fire') color = fireColor(t);
+      else if (mode === 'water') color = waterColor(t.waterCover);
+      else if (mode === 'fertility') color = fertColor(t.fert, t.terrain);
+      if (!color) continue;
+      const [wx, wy] = cam.tileToWorld(x, y);
+      const [sx, sy] = cam.worldToScreen(wx, wy);
+      ctx.beginPath();
+      ctx.moveTo(sx, sy - TILE_H / 2 * cam.zoom);
+      ctx.lineTo(sx + TILE_W / 2 * cam.zoom, sy);
+      ctx.lineTo(sx, sy + TILE_H / 2 * cam.zoom);
+      ctx.lineTo(sx - TILE_W / 2 * cam.zoom, sy);
+      ctx.closePath();
+      ctx.fillStyle = color;
+      ctx.fill();
+    }
+  }
+
+  private outlineFootprint(ctx: CanvasRenderingContext2D, cam: Camera, x: number, y: number, w: number, h: number, color: string, lw = 2, fillArea = false) {
+    const corners = [[x, y], [x + w, y], [x + w, y + h], [x, y + h]].map(([tx, ty]) => cam.tileToWorld(tx, ty));
+    const pts = corners.map(([wx, wy]) => cam.worldToScreen(wx, wy));
+    // footprint diamond: N=P(x,y) E=P(x+w,y) S=P(x+w,y+h) W=P(x,y+h)
+    ctx.beginPath();
+    ctx.moveTo(pts[0][0], pts[0][1]);
+    ctx.lineTo(pts[1][0], pts[1][1]);
+    ctx.lineTo(pts[2][0], pts[2][1]);
+    ctx.lineTo(pts[3][0], pts[3][1]);
+    ctx.closePath();
+    if (fillArea) { ctx.fillStyle = color.replace(/[\d.]+\)$/, '0.18)'); try { ctx.fill(); } catch { /* ignore */ } }
+    ctx.strokeStyle = color; ctx.lineWidth = lw; ctx.stroke();
+  }
+
+  private drawGrid(ctx: CanvasRenderingContext2D, cam: Camera) {
+    const c = this.city;
+    ctx.strokeStyle = 'rgba(255,255,255,.06)';
+    ctx.lineWidth = 1;
+    for (let y = 0; y < c.H; y++) for (let x = 0; x < c.W; x++) {
+      const [wx, wy] = cam.tileToWorld(x, y);
+      const [sx, sy] = cam.worldToScreen(wx, wy);
+      ctx.beginPath();
+      ctx.moveTo(sx, sy - TILE_H / 2 * cam.zoom);
+      ctx.lineTo(sx + TILE_W / 2 * cam.zoom, sy);
+      ctx.stroke();
+    }
+  }
+
+  private drawFlames(ctx: CanvasRenderingContext2D, wx: number, wy: number, timeS: number, sizeTiles: number) {
+    const [sx, sy] = [wx, wy]; // already world px; caller translates? no—convert here
+    void sx; void sy;
+    const n = Math.round(3 + sizeTiles * 2);
+    for (let i = 0; i < n; i++) {
+      const ph = timeS * 9 + i * 1.7;
+      const fx = wx + Math.sin(ph) * 12 * sizeTiles * 0.5;
+      const fy = wy - 8 - ((timeS * 26 + i * 13) % 22) - sizeTiles * 4;
+      const s = 4 + Math.sin(ph * 1.3) * 2 + sizeTiles;
+      ctx.fillStyle = i % 2 ? 'rgba(255,150,40,.85)' : 'rgba(255,210,70,.9)';
+      ctx.beginPath();
+      ctx.moveTo(fx, fy - s * 1.6);
+      ctx.quadraticCurveTo(fx + s, fy, fx, fy + s * 0.6);
+      ctx.quadraticCurveTo(fx - s, fy, fx, fy - s * 1.6);
+      ctx.fill();
+    }
+    if (Math.random() < 0.15) FX.spark(wx, wy - 14, 'rgba(255,160,50,.9)', 1, 26, -40);
+  }
+
+  private drawWalker(ctx: CanvasRenderingContext2D, w: Walker, wx: number, wy: number, zoom: number, timeS: number) {
+    const bob = Math.sin(w.animT * 10) * 1.2;
+    ctx.save();
+    ctx.translate(wx, wy);
+    ctx.scale(zoom, zoom);
+    if (w.facing === -1) ctx.scale(-1, 1);
+    // shadow
+    ctx.fillStyle = 'rgba(10,8,4,.3)';
+    ctx.beginPath(); ctx.ellipse(0, 1, 7, 3, 0, 0, 7); ctx.fill();
+
+    const u = w.unit;
+    if (u) this.drawUnit(ctx, w, u, timeS, bob);
+    else this.drawCitizen(ctx, w.kind, timeS, bob, !!w.cargo && Object.keys(w.cargo).length > 0);
+
+    ctx.restore();
+
+    // hp bar (screen space, unflipped)
+    if (u && u.hp < u.maxHp) {
+      const bw = 26;
+      ctx.fillStyle = 'rgba(0,0,0,.55)';
+      ctx.fillRect(wx - bw / 2, wy - 34 * zoom - 8, bw, 4);
+      ctx.fillStyle = u.side === 'foe' ? '#e05545' : '#67d05f';
+      ctx.fillRect(wx - bw / 2, wy - 34 * zoom - 8, bw * Math.max(0, u.hp / u.maxHp), 4);
+    }
+  }
+
+  private drawCitizen(ctx: CanvasRenderingContext2D, kind: string, timeS: number, bob: number, carrying: boolean) {
+    let body = '#c8b89a', head = '#e8c8a0', accent = '';
+    switch (kind) {
+      case 'prefect': body = '#a8402f'; accent = '#e8d8a0'; break;
+      case 'engineer': body = '#4f6fa5'; accent = '#d8d8e8'; break;
+      case 'priest': body = '#f0ead8'; accent = '#c9a227'; break;
+      case 'actor': body = ['#c94f3d', '#5f943e', '#8e4a9e'][Math.floor(timeS / 2) % 3]; break;
+      case 'teacher': body = '#3f7d6f'; break;
+      case 'doctor': body = '#7da58f'; accent = '#f0ead8'; break;
+      case 'taxman': body = '#6b4fa1'; accent = '#ffd700'; break;
+      case 'peddler': body = '#b3714f'; break;
+      case 'immigrant': body = '#9c8a68'; break;
+      case 'marketBuyer': case 'cart': case 'fetchCart': body = '#8a6238'; break;
+      default: body = '#c0a888';
+    }
+    if (kind === 'cart' || kind === 'fetchCart' || kind === 'marketBuyer') {
+      // cart with ox-ish puller
+      ctx.fillStyle = body;
+      ctx.fillRect(-8, -6 + bob * 0.3, 14, 7);
+      ctx.fillStyle = '#4a3418';
+      ctx.beginPath(); ctx.arc(-5, 2, 3.4, 0, 7); ctx.arc(3, 2, 3.4, 0, 7); ctx.fill();
+      ctx.fillStyle = head;
+      ctx.beginPath(); ctx.arc(9, -8 + bob, 3, 0, 7); ctx.fill();
+      ctx.fillRect(7, -5 + bob, 4, 6);
+      if (carrying) {
+        ctx.fillStyle = '#d9b44a';
+        ctx.fillRect(-7, -11 + bob * 0.3, 11, 5);
+      }
+      return;
+    }
+    // standard person
+    const legSwing = Math.sin(timeS * 11) * 2.4;
+    ctx.strokeStyle = '#5a4426'; ctx.lineWidth = 1.6;
+    ctx.beginPath();
+    ctx.moveTo(0, -5); ctx.lineTo(-legSwing, 1);
+    ctx.moveTo(0, -5); ctx.lineTo(legSwing, 1);
+    ctx.stroke();
+    ctx.fillStyle = body;
+    ctx.fillRect(-3, -12 + bob, 6, 8); // torso
+    ctx.beginPath(); ctx.arc(0, -14.5 + bob, 3, 0, 7); ctx.fill();
+    ctx.fillStyle = head;
+    ctx.beginPath(); ctx.arc(0, -15.5 + bob, 2.4, 0, 7); ctx.fill();
+    if (accent) { ctx.fillStyle = accent; ctx.fillRect(-3, -12 + bob, 6, 2); }
+    if (carrying) { ctx.fillStyle = '#c07a45'; ctx.beginPath(); ctx.arc(-5, -8 + bob, 2.6, 0, 7); ctx.fill(); }
+  }
+
+  private drawUnit(ctx: CanvasRenderingContext2D, w: Walker, u: NonNullable<Walker['unit']>, timeS: number, bob: number) {
+    const foe = u.side === 'foe';
+    switch (u.kind) {
+      case 'soldiers': {
+        const n = u.squadSize ?? 1;
+        for (let i = 0; i < Math.min(n, 16); i++) {
+          const ox = ((i % 4) - 1.5) * 5.5, oy = (((i / 4) | 0) - 1) * 4;
+          ctx.fillStyle = '#a8352f';
+          ctx.fillRect(ox - 2, oy - 10 + bob * 0.5, 4, 6);
+          ctx.fillStyle = '#d8c8a0';
+          ctx.beginPath(); ctx.arc(ox, oy - 12 + bob * 0.5, 2, 0, 7); ctx.fill();
+          // shield + spear
+          ctx.fillStyle = '#8a1f1f';
+          ctx.beginPath(); ctx.ellipse(ox + 3, oy - 7 + bob * 0.5, 2.6, 3.4, 0, 0, 7); ctx.fill();
+          ctx.strokeStyle = '#c8b89a'; ctx.lineWidth = 1;
+          ctx.beginPath(); ctx.moveTo(ox - 2, oy - 2); ctx.lineTo(ox - 4, oy - 16); ctx.stroke();
+        }
+        // standard
+        if (n >= 8) {
+          ctx.strokeStyle = C_GOLD; ctx.lineWidth = 1.4;
+          ctx.beginPath(); ctx.moveTo(-12, 2); ctx.lineTo(-12, -20); ctx.stroke();
+          ctx.fillStyle = '#b03a2e'; ctx.fillRect(-12, -20, 8, 5);
+        }
+        break;
+      }
+      case 'barbarian': {
+        const n = u.squadSize ?? 1;
+        for (let i = 0; i < Math.min(n, 12); i++) {
+          const ox = ((i % 4) - 1.5) * 6, oy = (((i / 4) | 0) - 1) * 4.5;
+          ctx.fillStyle = '#6e4a2f';
+          ctx.fillRect(ox - 2.4, oy - 9 + bob * 0.4, 4.8, 7);
+          ctx.fillStyle = '#d8a877';
+          ctx.beginPath(); ctx.arc(ox, oy - 11 + bob * 0.4, 2.2, 0, 7); ctx.fill();
+          ctx.fillStyle = '#8f2f26';
+          ctx.beginPath(); ctx.moveTo(ox - 3, oy - 13); ctx.lineTo(ox + 3, oy - 13); ctx.lineTo(ox, oy - 17); ctx.fill();
+          // axe
+          ctx.strokeStyle = '#5f4426'; ctx.lineWidth = 1.2;
+          ctx.beginPath(); ctx.moveTo(ox + 2, oy - 2); ctx.lineTo(ox + 5, oy - 12); ctx.stroke();
+          ctx.fillStyle = '#aab2c0'; ctx.fillRect(ox + 3.4, oy - 13, 3, 4);
+        }
+        break;
+      }
+      case 'skeleton': {
+        ctx.strokeStyle = '#e8e2d2'; ctx.lineWidth = 1.6;
+        ctx.beginPath(); ctx.moveTo(0, -10); ctx.lineTo(0, -3); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(-3, -8); ctx.lineTo(3, -8); ctx.moveTo(-2.4, -6); ctx.lineTo(2.4, -6); ctx.stroke();
+        ctx.fillStyle = '#e8e2d2';
+        ctx.beginPath(); ctx.arc(0, -12, 2.6, 0, 7); ctx.fill();
+        ctx.fillStyle = '#59c8d8'; ctx.fillRect(-1.4, -12.6, 1, 1); ctx.fillRect(0.6, -12.6, 1, 1);
+        ctx.strokeStyle = '#cfc8b8';
+        ctx.beginPath(); ctx.moveTo(0, -3); ctx.lineTo(-2.4, 1); ctx.moveTo(0, -3); ctx.lineTo(2.4, 1); ctx.stroke();
+        break;
+      }
+      case 'harpy': {
+        const flap = Math.sin(timeS * 14) * 6;
+        ctx.fillStyle = '#7a5a8f';
+        ctx.beginPath(); ctx.ellipse(0, -14, 4, 6, 0, 0, 7); ctx.fill();
+        ctx.fillStyle = '#9a7ab0';
+        ctx.beginPath(); ctx.moveTo(-2, -18); ctx.quadraticCurveTo(-14, -20 - flap, -16, -10 - flap); ctx.quadraticCurveTo(-8, -14, -2, -12); ctx.fill();
+        ctx.beginPath(); ctx.moveTo(2, -18); ctx.quadraticCurveTo(14, -20 - flap, 16, -10 - flap); ctx.quadraticCurveTo(8, -14, 2, -12); ctx.fill();
+        ctx.fillStyle = '#e8d8a0'; ctx.beginPath(); ctx.arc(0, -21, 2.4, 0, 7); ctx.fill();
+        break;
+      }
+      case 'minotaur': {
+        const s = 1.6;
+        ctx.fillStyle = '#5f4426';
+        ctx.fillRect(-5 * s, -14 * s + bob * 0.3, 10 * s, 10 * s);
+        ctx.fillStyle = '#7a5636';
+        ctx.beginPath(); ctx.arc(0, -17 * s + bob * 0.3, 4.4 * s, 0, 7); ctx.fill();
+        // horns
+        ctx.strokeStyle = '#efe6cd'; ctx.lineWidth = 2 * s;
+        ctx.beginPath(); ctx.moveTo(-4 * s, -19 * s); ctx.quadraticCurveTo(-8 * s, -23 * s, -5 * s, -26 * s); ctx.stroke();
+        ctx.beginPath(); ctx.moveTo(4 * s, -19 * s); ctx.quadraticCurveTo(8 * s, -23 * s, 5 * s, -26 * s); ctx.stroke();
+        // axe
+        ctx.strokeStyle = '#4a3418'; ctx.lineWidth = 2;
+        ctx.beginPath(); ctx.moveTo(6 * s, -4 * s); ctx.lineTo(10 * s, -18 * s); ctx.stroke();
+        ctx.fillStyle = '#aab2c0'; ctx.fillRect(7 * s, -20 * s, 6 * s, 6 * s);
+        break;
+      }
+      case 'hydra': {
+        const s = 2.1;
+        ctx.fillStyle = '#2f6b4f';
+        ctx.beginPath(); ctx.ellipse(0, -8 * s, 9 * s, 6 * s, 0, 0, 7); ctx.fill();
+        // three necks
+        for (let i = -1; i <= 1; i++) {
+          const sway = Math.sin(timeS * 4 + i * 2) * 4;
+          ctx.strokeStyle = '#3f7d5f'; ctx.lineWidth = 3.4;
+          ctx.beginPath(); ctx.moveTo(i * 6 * s, -10 * s);
+          ctx.quadraticCurveTo(i * 9 * s + sway, -22 * s, i * 7 * s + sway, -27 * s);
+          ctx.stroke();
+          ctx.fillStyle = '#3f7d5f';
+          ctx.beginPath(); ctx.ellipse(i * 7 * s + sway, -29 * s, 3.4, 2.6, 0, 0, 7); ctx.fill();
+          ctx.fillStyle = '#ffe070';
+          ctx.fillRect(i * 7 * s + sway - 2, -30 * s, 1.4, 1.4); ctx.fillRect(i * 7 * s + sway + 1, -30 * s, 1.4, 1.4);
+        }
+        // legs + tail
+        ctx.strokeStyle = '#2f6b4f'; ctx.lineWidth = 2.6;
+        ctx.beginPath();
+        ctx.moveTo(-6 * s, -4 * s); ctx.lineTo(-7 * s, 1);
+        ctx.moveTo(6 * s, -4 * s); ctx.lineTo(7 * s, 1);
+        ctx.moveTo(-8 * s, -8 * s); ctx.quadraticCurveTo(-16 * s, -6 * s + Math.sin(timeS * 3) * 3, -18 * s, 0);
+        ctx.stroke();
+        break;
+      }
+      case 'lich': {
+        const s = 1.7;
+        const g = ctx.createRadialGradient(0, -14 * s, 2, 0, -14 * s, 26);
+        g.addColorStop(0, 'rgba(140,90,220,.55)'); g.addColorStop(1, 'rgba(140,90,220,0)');
+        ctx.fillStyle = g; ctx.fillRect(-26, -44, 52, 52);
+        ctx.fillStyle = '#2d2440';
+        ctx.beginPath(); ctx.moveTo(-8 * s, 0); ctx.quadraticCurveTo(-10 * s, -20 * s, 0, -22 * s);
+        ctx.quadraticCurveTo(10 * s, -20 * s, 8 * s, 0); ctx.closePath(); ctx.fill();
+        ctx.fillStyle = '#e8e2d2'; ctx.beginPath(); ctx.arc(0, -19 * s, 3 * s, 0, 7); ctx.fill();
+        ctx.fillStyle = '#8ef25f'; ctx.fillRect(-2 * s, -20 * s, 1.6, 1.6); ctx.fillRect(0.6 * s, -20 * s, 1.6, 1.6);
+        // staff
+        ctx.strokeStyle = '#4a3418'; ctx.lineWidth = 1.8;
+        ctx.beginPath(); ctx.moveTo(7 * s, 0); ctx.lineTo(7 * s, -26 * s); ctx.stroke();
+        ctx.fillStyle = '#8ef25f'; ctx.beginPath(); ctx.arc(7 * s, -28 * s, 2.6, 0, 7); ctx.fill();
+        break;
+      }
+      case 'golem': {
+        const s = 1.5;
+        ctx.fillStyle = '#7f8791';
+        ctx.fillRect(-6 * s, -14 * s, 12 * s, 11 * s);
+        ctx.fillRect(-4 * s, -19 * s, 8 * s, 5 * s);
+        ctx.fillStyle = '#98a1ab';
+        ctx.fillRect(-10 * s, -13 * s, 3.6 * s, 8 * s); ctx.fillRect(6.4 * s, -13 * s, 3.6 * s, 8 * s);
+        ctx.fillStyle = '#59c8d8';
+        ctx.fillRect(-2.6 * s, -18 * s, 5.2 * s, 1.8 * s);
+        const pulse = 0.6 + Math.sin(timeS * 5) * 0.3;
+        ctx.fillStyle = `rgba(89,200,216,${pulse})`;
+        ctx.fillRect(-2 * s, -10 * s, 4 * s, 4 * s);
+        break;
+      }
+      case 'hero': {
+        const lvl = w.heroLevel ?? 1;
+        const auraPulse = 0.35 + Math.sin(timeS * 3) * 0.15;
+        ctx.strokeStyle = `rgba(255,215,80,${auraPulse})`;
+        ctx.lineWidth = 2;
+        ctx.beginPath(); ctx.ellipse(0, 0, 12, 5.5, 0, 0, Math.PI * 2); ctx.stroke();
+        const heroId = w.heroId!;
+        const cape = heroId === 'champion' ? '#b03a2e' : heroId === 'huntress' ? '#3f7d43' : '#6b4fa1';
+        // cape flutter
+        const fl = Math.sin(timeS * 8) * 3;
+        ctx.fillStyle = cape;
+        ctx.beginPath(); ctx.moveTo(-3, -12); ctx.quadraticCurveTo(-8 - fl * 0.4, -6, -6, -1); ctx.lineTo(-1, -4); ctx.closePath(); ctx.fill();
+        // body armor
+        ctx.fillStyle = heroId === 'champion' ? '#b8a888' : heroId === 'huntress' ? '#4f8f5f' : '#5f4f8f';
+        ctx.fillRect(-3.4, -13, 6.8, 9);
+        ctx.fillStyle = '#e8c8a0';
+        ctx.beginPath(); ctx.arc(0, -16, 3, 0, 7); ctx.fill();
+        ctx.fillStyle = heroId === 'champion' ? '#c9a227' : heroId === 'huntress' ? '#3a5f2f' : '#3f3560';
+        ctx.fillRect(-3.4, -19, 6.8, 2.6); // helm/hood
+        // weapon
+        if (heroId === 'champion') {
+          ctx.strokeStyle = '#e8ecf4'; ctx.lineWidth = 2;
+          ctx.beginPath(); ctx.moveTo(3, -4); ctx.lineTo(9, -20); ctx.stroke();
+          ctx.strokeStyle = '#c9a227'; ctx.beginPath(); ctx.moveTo(4, -8); ctx.lineTo(7, -7); ctx.stroke();
+        } else if (heroId === 'huntress') {
+          ctx.strokeStyle = '#8a6238'; ctx.lineWidth = 1.4;
+          ctx.beginPath(); ctx.arc(5, -10, 6, -1.2, 1.2); ctx.stroke();
+        } else {
+          ctx.strokeStyle = '#4a3418'; ctx.lineWidth = 1.6;
+          ctx.beginPath(); ctx.moveTo(4, -2); ctx.lineTo(4, -20); ctx.stroke();
+          ctx.fillStyle = '#8ab0ff'; ctx.beginPath(); ctx.arc(4, -22, 2.6, 0, 7); ctx.fill();
+        }
+        if (lvl >= 3) { ctx.fillStyle = `rgba(255,215,80,${auraPulse + 0.2})`; ctx.font = 'bold 7px serif'; ctx.fillText('★'.repeat(Math.min(lvl - 2, 3)), -8, -24); }
+        break;
+      }
+      case 'caravan': {
+        ctx.fillStyle = '#a3714f';
+        ctx.beginPath(); ctx.ellipse(0, -8, 10, 5, 0, 0, 7); ctx.fill();
+        ctx.fillStyle = '#8a5638';
+        ctx.beginPath(); ctx.ellipse(6, -12, 4, 3, 0.4, 0, 7); ctx.fill();
+        ctx.fillStyle = '#c9b083';
+        ctx.beginPath(); ctx.ellipse(-6, -13, 4, 4, 0, 0, 7); ctx.fill();
+        ctx.strokeStyle = '#5f4426'; ctx.lineWidth = 1.2;
+        ctx.beginPath(); ctx.moveTo(-7, 0); ctx.lineTo(-7, -6); ctx.moveTo(0, 0); ctx.lineTo(0, -6); ctx.moveTo(7, 0); ctx.lineTo(7, -6); ctx.stroke();
+        break;
+      }
+      default: {
+        ctx.fillStyle = foe ? '#a55' : '#ccc';
+        ctx.fillRect(-2.6, -11 + bob, 5.2, 8);
+      }
+    }
+  }
+
+  private drawFx(ctx: CanvasRenderingContext2D, cam: Camera) {
+    // projectiles
+    for (const p of FX.projectiles) {
+      const t01 = p.t / p.dur;
+      const x = p.x + (p.tx - p.x) * t01;
+      const y = p.y + (p.ty - p.y) * t01 - Math.sin(t01 * Math.PI) * p.arc;
+      const [sx, sy] = cam.worldToScreen(x, y);
+      ctx.fillStyle = p.color;
+      ctx.beginPath(); ctx.arc(sx, sy, 3 * cam.zoom, 0, 7); ctx.fill();
+      ctx.strokeStyle = p.color; ctx.globalAlpha = 0.4;
+      ctx.beginPath(); ctx.moveTo(sx, sy);
+      const t02 = Math.max(0, t01 - 0.12);
+      const x2 = p.x + (p.tx - p.x) * t02, y2 = p.y + (p.ty - p.y) * t02 - Math.sin(t02 * Math.PI) * p.arc;
+      const [sx2, sy2] = cam.worldToScreen(x2, y2);
+      ctx.lineTo(sx2, sy2); ctx.stroke();
+      ctx.globalAlpha = 1;
+    }
+    // blasts
+    for (const b of FX.blasts) {
+      const t01 = b.t / b.dur;
+      const r = b.r0 + (b.r1 - b.r0) * t01;
+      const [sx, sy] = cam.worldToScreen(b.x, b.y);
+      ctx.strokeStyle = b.color;
+      ctx.globalAlpha = 1 - t01;
+      ctx.lineWidth = 3 * cam.zoom * (1 - t01) + 1;
+      ctx.beginPath(); ctx.ellipse(sx, sy, r * TILE_W / 2 * cam.zoom, r * TILE_H / 2 * cam.zoom, 0, 0, Math.PI * 2); ctx.stroke();
+      ctx.globalAlpha = (1 - t01) * 0.35;
+      ctx.fillStyle = b.color;
+      ctx.beginPath(); ctx.ellipse(sx, sy, r * TILE_W / 2 * cam.zoom, r * TILE_H / 2 * cam.zoom, 0, 0, Math.PI * 2); ctx.fill();
+      ctx.globalAlpha = 1;
+    }
+    // sparks
+    for (const s of FX.sparks) {
+      const t01 = s.t / s.dur;
+      const x = s.x + s.vx * s.t, y = s.y + s.vy * s.t + 0.5 * s.grav * s.t * s.t;
+      const [sx, sy] = cam.worldToScreen(x, y);
+      ctx.fillStyle = s.color;
+      ctx.globalAlpha = 1 - t01;
+      ctx.fillRect(sx - s.size * cam.zoom / 2, sy - s.size * cam.zoom / 2, s.size * cam.zoom, s.size * cam.zoom);
+      ctx.globalAlpha = 1;
+    }
+    // floats
+    for (const f of FX.floats) {
+      const t01 = f.t / f.dur;
+      const [sx, sy] = cam.worldToScreen(f.x, f.y - t01 * 22);
+      ctx.font = `${(f.size * Math.max(0.7, cam.zoom)).toFixed(1)}px Trebuchet MS`;
+      ctx.textAlign = 'center';
+      ctx.globalAlpha = 1 - t01 * t01;
+      ctx.strokeStyle = 'rgba(20,10,0,.8)'; ctx.lineWidth = 3;
+      ctx.strokeText(f.text, sx, sy);
+      ctx.fillStyle = f.color;
+      ctx.fillText(f.text, sx, sy);
+      ctx.globalAlpha = 1;
+      ctx.textAlign = 'left';
+    }
+  }
+}
+
+function pushFeature(list: Array<{ d: number; f: () => void }>, cam: Camera, wx: number, wy: number, depth: number, key: string, margin: number) {
+  const [sx, sy] = cam.worldToScreen(wx, wy);
+  if (sx < -margin || sy < -margin * 2 || sx > cam.vw + margin || sy > cam.vh + margin * 2) return;
+  const spr = getSprite(key);
+  list.push({
+    d: depth,
+    f: () => ctxDrawSprite(cam, spr, wx, wy),
+  });
+}
+function ctxDrawSprite(cam: Camera, spr: { cv: HTMLCanvasElement; ax: number; ay: number }, wx: number, wy: number) {
+  const ctx = currentCtx!;
+  ctx.drawImage(spr.cv, wx - spr.ax * cam.zoom, wy - spr.ay * cam.zoom, spr.cv.width * cam.zoom, spr.cv.height * cam.zoom);
+}
+let currentCtx: CanvasRenderingContext2D | null = null;
+export function _setCurrentCtx(c: CanvasRenderingContext2D | null) { currentCtx = c; }
+
+const C_GOLD = '#c9a227';
+
+// overlay color helpers
+function desirabilityColor(v: number): string | null {
+  if (v >= 12) return 'rgba(80,220,120,.42)';
+  if (v >= 6) return 'rgba(140,230,110,.34)';
+  if (v >= 2) return 'rgba(210,230,110,.28)';
+  if (v >= -2) return 'rgba(230,210,110,.25)';
+  if (v >= -8) return 'rgba(235,150,80,.33)';
+  return 'rgba(220,70,50,.42)';
+}
+function fireColor(t: { terrain: string; fireFervor: number }): string | null {
+  if (t.terrain === 'water' || t.terrain === 'rock') return null;
+  const v = Math.max(0, Math.min(1, t.fireFervor));
+  if (v < 0.02) return null;
+  return `rgba(${180 + v * 60 | 0},${120 - v * 80 | 0},40,${0.15 + v * 0.4})`;
+}
+function waterColor(v: number): string | null {
+  if (v >= 2) return 'rgba(80,160,255,.4)';
+  if (v >= 1) return 'rgba(120,190,255,.3)';
+  if (v > 0) return 'rgba(160,210,255,.18)';
+  return 'rgba(200,60,40,.25)';
+}
+function fertColor(f: number, terrain: string): string | null {
+  if (terrain === 'water') return null;
+  const v = Math.max(0, Math.min(100, f)) / 100;
+  return v > 0.15 ? `rgba(60,${140 + v * 80 | 0},60,${0.12 + v * 0.35})` : 'rgba(150,130,60,.15)';
+}
+
+export function makeMinimap(city: CityState, w: number, h: number): HTMLCanvasElement {
+  const cv = document.createElement('canvas');
+  cv.width = w; cv.height = h;
+  return cv;
+}
+
+export function drawMinimap(mctx: CanvasRenderingContext2D, city: CityState, cam: Camera, w: number, h: number) {
+  const sx = w / city.W, sy = h / city.H;
+  mctx.clearRect(0, 0, w, h);
+  mctx.fillStyle = '#20351c';
+  mctx.fillRect(0, 0, w, h);
+  for (let y = 0; y < city.H; y++) for (let x = 0; x < city.W; x++) {
+    const t = city.tiles[y * city.W + x];
+    let col: string;
+    if (t.terrain === 'water') col = '#2e5a86';
+    else if (t.terrain === 'tree') col = '#2f5a28';
+    else if (t.terrain === 'rock') col = '#6e675c';
+    else if (t.terrain === 'iron') col = '#7d786e';
+    else if (t.terrain === 'clay') col = '#96703f';
+    else if (t.terrain === 'crystal') col = '#4d8a94';
+    else if (t.road) col = '#9b8862';
+    else if (t.bld) col = '#c8b89a';
+    else col = '#44682f';
+    mctx.fillStyle = col;
+    mctx.fillRect(x * sx, y * sy, Math.ceil(sx), Math.ceil(sy));
+  }
+  // walkers
+  for (const wk of city.walkers.values()) {
+    const foeW = wk.unit?.side === 'foe';
+    mctx.fillStyle = foeW ? '#ff5040' : (wk.heroId ? '#ffd700' : wk.unit ? '#7fd0ff' : '#ffffff');
+    mctx.fillRect(wk.x * sx - 1, wk.y * sy - 1, 2.4, 2.4);
+  }
+  // viewport rect
+  const corners: Array<[number, number]> = [
+    cam.screenToWorld(0, 0), cam.screenToWorld(cam.vw, 0),
+    cam.screenToWorld(cam.vw, cam.vh), cam.screenToWorld(0, cam.vh),
+  ].map(([wx, wy]) => {
+    const fx = (wy / (TILE_H / 2) + wx / (TILE_W / 2)) / 2;
+    const fy = (wy / (TILE_H / 2) - wx / (TILE_W / 2)) / 2;
+    return [fx * sx, fy * sy] as [number, number];
+  });
+  mctx.strokeStyle = 'rgba(255,255,255,.85)';
+  mctx.lineWidth = 1.2;
+  mctx.beginPath();
+  mctx.moveTo(...corners[0]);
+  for (let i = 1; i < 4; i++) mctx.lineTo(...corners[i]);
+  mctx.closePath(); mctx.stroke();
+  void Sfx; void shadeHex;
+}

src/render/sprites.ts

@@ -0,0 +1,793 @@
+// ─── Procedural isometric sprite factory ───────────────────────────────────
+import { TILE_W, TILE_H } from './camera';
+
+export const TW = TILE_W, TH = TILE_H;
+const PAD = 10;
+
+export interface Sprite { cv: HTMLCanvasElement; ax: number; ay: number; } // anchor = north-corner pos
+
+const cache = new Map<string, Sprite>();
+
+// ── color utils ─────────────────────────────────────────────────────────────
+function hex(c: string): [number, number, number] {
+  const n = parseInt(c.slice(1), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function css(r: number, g: number, b: number) { return `rgb(${r | 0},${g | 0},${b | 0})`; }
+export function shade(c: string, f: number): string {
+  const [r, g, b] = hex(c);
+  if (f >= 1) return css(r + (255 - r) * (f - 1), g + (255 - g) * (f - 1), b + (255 - b) * (f - 1));
+  return css(r * f, g * f, b * f);
+}
+export function mix(a: string, b: string, t: number): string {
+  const A = hex(a), B = hex(b);
+  return css(A[0] + (B[0] - A[0]) * t, A[1] + (B[1] - A[1]) * t, A[2] + (B[2] - A[2]) * t);
+}
+
+type Pal = { top: string; left: string; right: string };
+export function pal(base: string): Pal {
+  return { top: shade(base, 1.22), left: base, right: shade(base, 0.62) };
+}
+
+// ── geometry ────────────────────────────────────────────────────────────────
+interface Corners { n: [number, number]; e: [number, number]; s: [number, number]; w: [number, number]; }
+function footCorners(cx: number, cy: number, w: number, h: number): Corners {
+  return {
+    n: [cx, cy],
+    e: [cx + w * TW / 2, cy + w * TH / 2],
+    s: [cx + (w - h) * TW / 2, cy + (w + h) * TH / 2],
+    w: [cx - h * TW / 2, cy + h * TH / 2],
+  };
+}
+function poly(ctx: CanvasRenderingContext2D, pts: Array<[number, number]>, fill: string, stroke?: string) {
+  ctx.beginPath();
+  ctx.moveTo(pts[0][0], pts[0][1]);
+  for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i][0], pts[i][1]);
+  ctx.closePath();
+  ctx.fillStyle = fill; ctx.fill();
+  if (stroke) { ctx.strokeStyle = stroke; ctx.lineWidth = 0.8; ctx.stroke(); }
+}
+function down(p: [number, number], z: number): [number, number] { return [p[0], p[1] - z]; }
+
+/** Extruded iso box; returns top-face corners raised. */
+export function isoBox(ctx: CanvasRenderingContext2D, cx: number, cy: number, w: number, h: number, z: number, p: Pal, outline = 'rgba(20,14,8,.45)') {
+  const c = footCorners(cx, cy, w, h);
+  poly(ctx, [down(c.w, z), down(c.s, z), c.s, c.w], p.left, outline);   // SW face
+  poly(ctx, [down(c.s, z), down(c.e, z), c.e, c.s], p.right, outline);  // SE face
+  poly(ctx, [down(c.n, z), down(c.e, z), down(c.s, z), down(c.w, z)], p.top, outline);
+  return c;
+}
+
+/** Pyramid roof on top face; rh = roof height. */
+export function pyramid(ctx: CanvasRenderingContext2D, c: Corners, z: number, rh: number, base: string, ridgeAxis: 'x' | 'y' = 'x') {
+  const N = down(c.n, z), E = down(c.e, z), S = down(c.s, z), Wp = down(c.w, z);
+  const midX: [number, number] = [(N[0] + S[0]) / 2, (N[1] + S[1]) / 2];
+  const midY: [number, number] = [(E[0] + Wp[0]) / 2, (E[1] + Wp[1]) / 2];
+  if (ridgeAxis === 'x') {
+    const r1 = down(c.n, z + rh), r2 = down(c.s, z + rh);
+    poly(ctx, [Wp, S, r2, r1].reverse() as Array<[number, number]>, shade(base, 0.62));
+    poly(ctx, [Wp, N, r1], mix(base, '#000000', 0.25));
+    poly(ctx, [r1, r2, S], base);
+    poly(ctx, [N, E, midX, r1], shade(base, 0.85));
+    poly(ctx, [E, S, r2, midX], shade(base, 0.55));
+    poly(ctx, [N, Wp, midY, r1], shade(base, 1.05));
+  } else {
+    const r1: [number, number] = [midX[0], midX[1] - rh];
+    poly(ctx, [Wp, S, r1], shade(base, 0.6));
+    poly(ctx, [S, E, r1], base);
+    poly(ctx, [E, N, r1], shade(base, 1.15));
+    poly(ctx, [N, Wp, r1], shade(base, 0.9));
+  }
+}
+
+function ellipseShadow(ctx: CanvasRenderingContext2D, x: number, y: number, rx: number, ry: number, a = 0.25) {
+  ctx.fillStyle = `rgba(15,10,5,${a})`;
+  ctx.beginPath(); ctx.ellipse(x, y, rx, ry, 0, 0, Math.PI * 2); ctx.fill();
+}
+
+// ── canvas creation ─────────────────────────────────────────────────────────
+function makeCanvas(wPx: number, hPx: number, anchorX: number, anchorY: number, draw: (ctx: CanvasRenderingContext2D) => void): Sprite {
+  const cv = document.createElement('canvas');
+  cv.width = Math.ceil(wPx); cv.height = Math.ceil(hPx);
+  const ctx = cv.getContext('2d')!;
+  ctx.translate(anchorX, anchorY);
+  draw(ctx);
+  return { cv, ax: anchorX, ay: anchorY };
+}
+
+export function getSprite(key: string): Sprite {
+  let s = cache.get(key);
+  if (!s) { s = buildSprite(key); cache.set(key, s); }
+  return s;
+}
+
+function footprintOf(key: string): [number, number] {
+  // mirrors DEFS sizes without import cycle
+  switch (key) {
+    case 'farmWheat': case 'orchard': case 'granary': case 'senate': case 'fort':
+    case 'colosseum': case 'amphitheater': case 'academy': case 'library': case 'hospital':
+    case 'arcaneLibrary': case 'heroHall': case 'tradingPost': return [3, 3];
+    case 'market': case 'fishingWharf': case 'clayPit': case 'timberCamp': case 'ironMine': case 'crystalMine':
+    case 'potteryWksp': case 'furnitureWksp': case 'oilPress': case 'winery': case 'weaponSmith':
+    case 'forum': case 'templeJupiter': case 'templeCeres': case 'templeNeptune': case 'templeMars':
+    case 'oracle': case 'theater': case 'school': case 'clinic': case 'tower': case 'gatehouse':
+    case 'barracks': case 'mageTower': case 'golemFoundry': case 'fountain': return [2, 2];
+    default: return [1, 1];
+  }
+}
+
+function buildSprite(key: string): Sprite {
+  const [fw, fh] = footprintOf(key);
+  const maxZ = 96;
+  const wPx = (fw + fh) * TW / 2 + PAD * 2 + 24;
+  const hPx = (fw + fh) * TH / 2 + maxZ + PAD * 2 + 40;
+  const ax = PAD + fh * TW / 2 + 12;   // north corner anchor
+  const ay = PAD + maxZ + 12;
+
+  return makeCanvas(wPx, hPx, ax, ay, (ctx) => drawBuildingSprite(ctx, key, fw, fh));
+}
+
+// ── the big dispatcher ──────────────────────────────────────────────────────
+const C = { // palette shortcuts
+  stone: '#a89a86', stoneDark: '#7d7160', wood: '#8a6238', woodDark: '#5f4426',
+  plaster: '#d8cbb0', roofTile: '#a5502f', roofTileD: '#7c3a21', thatch: '#c2a04e',
+  cloth: '#cdb98a', marble: '#ded6c4', gold: '#c9a227', purple: '#6b4fa1',
+  crystal: '#59c8d8', iron: '#8d93a1', dirt: '#9b7d52',
+};
+
+function drawBuildingSprite(ctx: CanvasRenderingContext2D, key: string, fw: number, fh: number) {
+  const cx = 0, cy = 0;
+  switch (key) {
+
+    // ── housing tiers ──
+    case 'house_l0a': case 'house_l0b': { // tents
+      ellipseShadow(ctx, 0, TH / 2 + 4, TW * 0.42, TH * 0.36);
+      const c = footCorners(0, 0, 1, 1);
+      poly(ctx, [down(c.n, 26), down(c.w, 2), c.w], shade(C.cloth, 0.75));   // left flap
+      poly(ctx, [down(c.n, 26), down(c.e, 2), c.e], shade(C.cloth, 0.55));   // right flap
+      poly(ctx, [down(c.n, 26), c.n, down(c.n, 30)], C.cloth);
+      poly(ctx, [[0, -30], down(c.w, 2), down(c.s, 2), down(c.e, 2)], shade(C.cloth, 1.05), 'rgba(60,40,20,.5)');
+      poly(ctx, [[0, -30], [0, 2], down(c.w, 2)], shade(C.cloth, 0.7));
+      ctx.strokeStyle = '#6b5023'; ctx.lineWidth = 1.5;
+      ctx.beginPath(); ctx.moveTo(0, -32); ctx.lineTo(0, 4); ctx.stroke();
+      break;
+    }
+    case 'house_l1a': case 'house_l1b': { // shacks — wood + thatch
+      ellipseShadow(ctx, 0, TH / 2 + 4, TW * 0.48, TH * 0.4);
+      const c = isoBox(ctx, 0, 0, 0.82, 0.82, 18, pal(C.wood));
+      pyramid(ctx, c, 18, 12, C.thatch, 'x');
+      ctx.fillStyle = '#3a2814'; ctx.fillRect(-6, -10, 5, 9); // door hint
+      break;
+    }
+    case 'house_l2a': case 'house_l2b': { // hovels — plaster + thatch
+      ellipseShadow(ctx, 0, TH / 2 + 4, TW * 0.5, TH * 0.44);
+      const c = isoBox(ctx, 0, 0, 0.92, 0.92, 22, pal(C.plaster));
+      pyramid(ctx, c, 22, 13, C.thatch, 'x');
+      isoBox(ctx, -14, 10, 0.34, 0.34, 12, pal(C.plaster)); // annex
+      ctx.fillStyle = '#4a3418'; ctx.fillRect(4, -12, 6, 11);
+      break;
+    }
+    case 'house_l3a': case 'house_l3b': { // casas — tile roof
+      ellipseShadow(ctx, 0, TH / 2 + 4, TW * 0.54, TH * 0.46);
+      const c = isoBox(ctx, 0, 0, 0.95, 0.95, 26, pal(C.plaster));
+      pyramid(ctx, c, 26, 15, C.roofTile, 'x');
+      ctx.strokeStyle = C.roofTileD; ctx.lineWidth = 1;
+      for (let i = 1; i < 4; i++) { ctx.beginPath(); ctx.moveTo(-i * 6, -26 - i * 4); ctx.lineTo(i * 6, -26 - i * 4 + i * 8 - 8); ctx.stroke(); }
+      break;
+    }
+    case 'house_l4a': case 'house_l4b': { // villas
+      ellipseShadow(ctx, 0, TH / 2 + 6, TW * 0.58, TH * 0.5);
+      const c = isoBox(ctx, 0, 0, 0.95, 0.95, 38, pal('#e2d6ba'));
+      pyramid(ctx, c, 38, 16, C.roofTile, 'x');
+      // upper floor band
+      ctx.fillStyle = C.gold; ctx.fillRect(-16, -34, 32, 3);
+      // columns
+      for (const px of [-18, -8, 8, 18]) { ctx.fillStyle = C.marble; ctx.fillRect(px - 1.5, -16, 3, 16); }
+      break;
+    }
+    case 'house_l5a': { // estate
+      ellipseShadow(ctx, 0, TH / 2 + 6, TW * 0.62, TH * 0.54);
+      const c = isoBox(ctx, 0, 0, 0.95, 0.95, 46, pal('#efe6cd'));
+      pyramid(ctx, c, 46, 18, '#b3542c', 'x');
+      const c2 = isoBox(ctx, -20, 14, 0.4, 0.4, 30, pal('#e6dcc2'));
+      pyramid(ctx, c2, 30, 10, '#b3542c', 'y');
+      ctx.fillStyle = C.gold; ctx.fillRect(-20, -42, 40, 3.5);
+      for (const px of [-22, -12, 12, 22]) { ctx.fillStyle = C.marble; ctx.fillRect(px - 2, -20, 4, 20); }
+      // pennant
+      ctx.strokeStyle = '#5a4426'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(0, -66); ctx.lineTo(0, -80); ctx.stroke();
+      poly(ctx, [[0, -80], [14, -76], [0, -72]], '#b03a2e');
+      break;
+    }
+
+    // ── food chain ──
+    case 'farmWheat': {
+      // furrow field
+      const c = footCorners(0, 0, 3, 3);
+      poly(ctx, [c.n, c.e, c.s, c.w], '#b0913f', 'rgba(90,70,30,.5)');
+      ctx.save();
+      ctx.beginPath(); ctx.moveTo(c.n[0], c.n[1]); ctx.lineTo(c.e[0], c.e[1]); ctx.lineTo(c.s[0], c.s[1]); ctx.lineTo(c.w[0], c.w[1]); ctx.closePath(); ctx.clip();
+      ctx.strokeStyle = '#8f7734'; ctx.lineWidth = 3;
+      for (let i = -6; i <= 6; i++) { ctx.beginPath(); ctx.moveTo(i * 14 - 40, -40); ctx.lineTo(i * 14 + 40, 80); ctx.stroke(); }
+      ctx.strokeStyle = '#d9b44a'; ctx.lineWidth = 1.4;
+      for (let i = -6; i <= 6; i++) { ctx.beginPath(); ctx.moveTo(i * 14 - 40, -40); ctx.lineTo(i * 14 + 40, 80); ctx.stroke(); }
+      ctx.restore();
+      const hc = isoBox(ctx, 34, 26, 0.8, 0.8, 20, pal(C.wood));
+      pyramid(ctx, hc, 20, 12, C.thatch, 'x');
+      break;
+    }
+    case 'orchard': {
+      const c = footCorners(0, 0, 3, 3);
+      poly(ctx, [c.n, c.e, c.s, c.w], '#8fa04a', 'rgba(70,90,30,.5)');
+      const tree = (tx: number, ty: number) => {
+        const [px, py] = [(tx - ty) * TW / 2, (tx + ty) * TH / 2];
+        ctx.fillStyle = '#6b4a26'; ctx.fillRect(px - 2, py - 12, 4, 12);
+        ellipseShadow(ctx, px, py - 14, 9, 7, 0.15);
+        ctx.fillStyle = '#4f7d33'; ctx.beginPath(); ctx.arc(px, py - 17, 9, 0, 7); ctx.fill();
+        ctx.fillStyle = '#5f943e'; ctx.beginPath(); ctx.arc(px - 3, py - 19, 6, 0, 7); ctx.fill();
+        ctx.fillStyle = '#c94f3d';
+        for (let k = 0; k < 3; k++) { ctx.beginPath(); ctx.arc(px - 5 + k * 5, py - 16 + (k % 2) * 5, 2, 0, 7); ctx.fill(); }
+      };
+      for (const tx of [0.7, 1.7, 2.3]) for (const ty of [0.7, 1.7, 2.3]) tree(tx, ty);
+      break;
+    }
+    case 'fishingWharf': {
+      // dock planks
+      const c = footCorners(0, 0, 2, 2);
+      poly(ctx, [c.n, c.e, c.s, c.w], '#8a6238', 'rgba(40,25,10,.6)');
+      ctx.strokeStyle = '#5f4426'; ctx.lineWidth = 1.5;
+      for (let i = 1; i < 6; i++) { ctx.beginPath(); ctx.moveTo(c.w[0] + i * (c.e[0] - c.w[0]) / 6, c.w[1] + i * (c.e[1] - c.w[1]) / 6); ctx.lineTo(c.n[0] + i * (c.s[0] - c.n[0]) / 6, c.n[1] + i * (c.s[1] - c.n[1]) / 6); ctx.stroke(); }
+      const hc = isoBox(ctx, 8, 6, 0.9, 0.9, 20, pal(C.wood));
+      pyramid(ctx, hc, 20, 12, C.thatch, 'y');
+      // boat
+      ctx.fillStyle = '#7a5230'; ctx.beginPath(); ctx.ellipse(-26, 34, 16, 6, -0.4, 0, 7); ctx.fill();
+      ctx.fillStyle = '#3a2814'; ctx.beginPath(); ctx.ellipse(-26, 33, 12, 3.5, -0.4, 0, 7); ctx.fill();
+      ctx.strokeStyle = '#4a3418'; ctx.beginPath(); ctx.moveTo(-26, 30); ctx.lineTo(-26, 12); ctx.stroke();
+      poly(ctx, [[-26, 12], [-10, 24], [-26, 26]], '#e8dcc0');
+      break;
+    }
+    case 'granary': {
+      ellipseShadow(ctx, 0, TH / 2 + 6, TW * 1.1, TH * 0.9);
+      const c = isoBox(ctx, 0, 0, 2.6, 2.6, 34, pal('#c8b48a'));
+      pyramid(ctx, c, 34, 16, C.thatch, 'x');
+      for (const dx of [-20, 0, 20]) { ctx.fillStyle = '#5f4426'; ctx.fillRect(dx - 3, -24, 6, 12); }
+      ctx.fillStyle = C.gold; ctx.font = 'bold 11px Trebuchet MS'; ctx.fillText('GRANARY'.slice(0, 0), 0, 0);
+      break;
+    }
+    case 'warehouse': {
+      ellipseShadow(ctx, 0, TH / 2 + 6, TW * 1.1, TH * 0.9);
+      const c = isoBox(ctx, 0, 0, 2.6, 2.6, 30, pal('#9c7a52'));
+      pyramid(ctx, c, 30, 14, C.roofTile, 'x');
+      ctx.fillStyle = '#4a3418'; // big doors
+      poly(ctx, [[-6, -20], [8, -27], [8, -6], [-6, -2]], '#4a3418');
+      // crates outside
+      isoBox(ctx, 40, 30, 0.4, 0.4, 10, pal(C.wood));
+      isoBox(ctx, 48, 24, 0.4, 0.4, 8, pal('#9c7a52'));
+      break;
+    }
+    case 'market': {
+      ellipseShadow(ctx, 0, TH / 2 + 4, TW * 0.8, TH * 0.7);
+      const c = isoBox(ctx, 0, 0, 1.7, 1.7, 14, pal('#b89a68'));
+      // striped canopy
+      poly(ctx, [down(c.n, 30), down(c.e, 30), down(c.s, 34), down(c.w, 34)], '#c94f3d');
+      ctx.save();
+      ctx.beginPath();
+      const cn = down(c.n, 30), ce = down(c.e, 30), cs = down(c.s, 34), cw = down(c.w, 34);
+      ctx.moveTo(cn[0], cn[1]); ctx.lineTo(ce[0], ce[1]); ctx.lineTo(cs[0], cs[1]); ctx.lineTo(cw[0], cw[1]); ctx.closePath();
+      ctx.clip();
+      for (let i = -4; i < 5; i += 2) { poly(ctx, [[i * 8, -60], [i * 8 + 8, -60], [i * 8 + 8, 20], [i * 8, 20]], '#e8d8ae'); }
+      ctx.restore();
+      // posts
+      ctx.strokeStyle = '#5f4426'; ctx.lineWidth = 2;
+      const cn2 = down(c.n, 30);
+      ctx.beginPath(); ctx.moveTo(cn2[0], cn2[1] + 16); ctx.lineTo(cn2[0], cn2[1]); ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(cs[0], cs[1]); ctx.lineTo(cs[0], cs[1] - 4); ctx.stroke();
+      // amphora + crate props
+      ctx.fillStyle = '#c07a45'; ctx.beginPath(); ctx.ellipse(-20, 6, 5, 7, 0, 0, 7); ctx.fill();
+      isoBox(ctx, 30, 22, 0.35, 0.35, 9, pal(C.wood));
+      break;
+    }
+
+    // ── industry ──
+    case 'clayPit': {
+      const c = footCorners(0, 0, 2, 2);
+      poly(ctx, [c.n, c.e, c.s, c.w], '#a3714b', 'rgba(60,40,20,.4)');
+      poly(ctx, [footCorners(0.3, 0.3, 1.2, 1.2).n, footCorners(0.3, 0.3, 1.2, 1.2).e, footCorners(0.3, 0.3, 1.2, 1.2).s, footCorners(0.3, 0.3, 1.2, 1.2).w], '#b3714f');
+      const hc = isoBox(ctx, 30, 26, 0.6, 0.6, 14, pal(C.wood));
+      pyramid(ctx, hc, 14, 9, C.thatch, 'x');
+      ctx.fillStyle = '#8a5638'; ctx.beginPath(); ctx.ellipse(-14, 30, 10, 5, 0, 0, 7); ctx.fill(); // clay heap
+      break;
+    }
+    case 'timberCamp': {
+      const c = isoBox(ctx, 0, 0, 1.4, 1.2, 16, pal(C.wood));
+      pyramid(ctx, c, 16, 10, C.thatch, 'x');
+      // log pile
+      for (let i = 0; i < 3; i++) { ctx.fillStyle = i % 2 ? '#7a5630' : '#8a6238'; ctx.beginPath(); ctx.ellipse(26 + i * 8, 30 - i * 4, 9, 4, 0, 0, 7); ctx.fill(); ctx.strokeStyle = '#5f4426'; ctx.beginPath(); ctx.ellipse(26 + i * 8, 30 - i * 4, 9, 4, 0, 0, 7); ctx.stroke(); }
+      break;
+    }
+    case 'ironMine': {
+      // rock mound with adit
+      ellipseShadow(ctx, 0, TH / 2 + 4, TW * 0.7, TH * 0.6);
+      const c = isoBox(ctx, 0, 0, 1.6, 1.6, 24, pal('#6f6a63'));
+      pyramid(ctx, c, 24, 14, '#5d584f', 'x');
+      poly(ctx, [[-4, -6], [6, -12], [6, -2], [-4, 2]], '#241c12'); // cave mouth
+      ctx.fillStyle = C.iron;
+      ctx.beginPath(); ctx.arc(-16, 22, 4, 0, 7); ctx.arc(20, 26, 3, 0, 7); ctx.fill();
+      // support beams
+      ctx.strokeStyle = '#5f4426'; ctx.lineWidth = 2.5;
+      ctx.beginPath(); ctx.moveTo(-6, 2); ctx.lineTo(-6, -12); ctx.moveTo(8, -8); ctx.lineTo(8, -18); ctx.stroke();
+      break;
+    }
+    case 'crystalMine': {
+      const c = isoBox(ctx, 0, 0, 1.5, 1.5, 22, pal('#5d5866'));
+      pyramid(ctx, c, 22, 12, '#4c4760', 'x');
+      // glowing crystals
+      const glow = ctx.createRadialGradient(0, -8, 2, 0, -8, 26);
+      glow.addColorStop(0, 'rgba(105,220,230,.8)'); glow.addColorStop(1, 'rgba(105,220,230,0)');
+      ctx.fillStyle = glow; ctx.fillRect(-30, -40, 60, 50);
+      const shard = (px: number, py: number, s: number) => poly(ctx, [[px, py - s * 2], [px + s, py], [px, py + s * 0.5], [px - s, py]], C.crystal);
+      shard(-14, 18, 5); shard(12, 24, 7); shard(2, 10, 4);
+      break;
+    }
+    case 'potteryWksp': {
+      const c = isoBox(ctx, 0, 0, 1.6, 1.6, 20, pal('#b3714f'));
+      pyramid(ctx, c, 20, 11, C.roofTile, 'x');
+      // kiln chimney
+      isoBox(ctx, 26, 8, 0.35, 0.35, 34, pal('#7d7160'));
+      ctx.fillStyle = 'rgba(120,120,120,.55)';
+      ctx.beginPath(); ctx.arc(31, -40, 4, 0, 7); ctx.arc(34, -48, 5.5, 0, 7); ctx.fill();
+      // amphorae
+      ctx.fillStyle = '#c07a45';
+      ctx.beginPath(); ctx.ellipse(-18, 24, 5, 8, 0, 0, 7); ctx.fill();
+      ctx.beginPath(); ctx.ellipse(-8, 28, 4, 6, 0, 0, 7); ctx.fill();
+      break;
+    }
+    case 'furnitureWksp': {
+      const c = isoBox(ctx, 0, 0, 1.6, 1.6, 20, pal('#8a6238'));
+      pyramid(ctx, c, 20, 11, C.roofTile, 'x');
+      // saw + timber props
+      ctx.strokeStyle = '#aab2c0'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(-20, 18, 7, 0.6, 5.4); ctx.stroke();
+      isoBox(ctx, 26, 26, 0.5, 0.3, 8, pal(C.wood));
+      break;
+    }
+    case 'oilPress': {
+      const c = isoBox(ctx, 0, 0, 1.6, 1.6, 20, pal('#9c8a52'));
+      pyramid(ctx, c, 20, 11, C.roofTile, 'x');
+      // olive trees + press beam
+      ctx.fillStyle = '#5f7d3a'; ctx.beginPath(); ctx.arc(-20, 16, 7, 0, 7); ctx.fill();
+      ctx.strokeStyle = C.wood; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(-4, -24); ctx.lineTo(16, -10); ctx.stroke();
+      break;
+    }
+    case 'winery': {
+      const c = isoBox(ctx, 0, 0, 1.6, 1.6, 22, pal('#7a4a5f'));
+      pyramid(ctx, c, 22, 12, '#5f3a4a', 'x');
+      // grape vines
+      for (const [gx, gy] of [[-18, 22], [-8, 27], [22, 18]]) {
+        ctx.fillStyle = '#8e4a9e'; ctx.beginPath(); ctx.arc(gx, gy, 4, 0, 7); ctx.fill();
+        ctx.fillStyle = '#b06bc0'; ctx.beginPath(); ctx.arc(gx - 2, gy - 2, 2, 0, 7); ctx.fill();
+      }
+      // barrel
+      ctx.fillStyle = '#8a6238'; ctx.beginPath(); ctx.ellipse(16, 28, 8, 5, 0, 0, 7); ctx.fill();
+      ctx.strokeStyle = '#5f4426'; ctx.stroke();
+      break;
+    }
+    case 'weaponSmith': {
+      const c = isoBox(ctx, 0, 0, 1.6, 1.6, 20, pal('#5d5850'));
+      pyramid(ctx, c, 20, 11, '#3f3b34', 'x');
+      // forge glow
+      const g = ctx.createRadialGradient(-8, 6, 1, -8, 6, 16);
+      g.addColorStop(0, 'rgba(255,140,40,.95)'); g.addColorStop(1, 'rgba(255,80,20,0)');
+      ctx.fillStyle = g; ctx.fillRect(-26, -12, 36, 30);
+      // anvil + sword
+      ctx.fillStyle = '#3a3f47'; ctx.fillRect(-22, 8, 10, 4);
+      ctx.strokeStyle = '#dfe4ec'; ctx.lineWidth = 2.5; ctx.beginPath(); ctx.moveTo(14, 26); ctx.lineTo(26, 14); ctx.stroke();
+      break;
+    }
+
+    // ── civic ──
+    case 'well': {
+      ellipseShadow(ctx, 0, TH / 2 + 3, TW * 0.34, TH * 0.3);
+      const c = footCorners(0.15, 0.15, 0.7, 0.7);
+      poly(ctx, [down(c.n, 8), down(c.e, 8), down(c.s, 8), down(c.w, 8)], C.stoneDark);
+      poly(ctx, [down(c.n, 8), down(c.e, 8), down(c.e, 5), down(c.n, 5)], C.stone);
+      ctx.fillStyle = '#1c3040'; ctx.beginPath(); ctx.ellipse((c.n[0]+c.s[0])/2, (c.n[1]+c.s[1])/2 - 6, 10, 5, 0, 0, 7); ctx.fill();
+      ctx.strokeStyle = C.wood; ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.moveTo(-8, -6); ctx.lineTo(-8, -22); ctx.lineTo(8, -14); ctx.lineTo(8, 2); ctx.stroke();
+      break;
+    }
+    case 'fountain': {
+      const c = footCorners(0, 0, 2, 2);
+      poly(ctx, [c.n, c.e, c.s, c.w], C.stoneDark, 'rgba(30,20,10,.5)');
+      const b = footCorners(0.25, 0.25, 1.5, 1.5);
+      poly(ctx, [down(b.n, 8), down(b.e, 8), down(b.s, 8), down(b.w, 8)], C.stone);
+      poly(ctx, [down(b.n, 8), down(b.e, 8), down(b.e, 6), down(b.n, 6)], shade(C.stone, 1.15));
+      ctx.fillStyle = '#3f7fa5'; poly(ctx, [down(b.n, 6), down(b.e, 6), down(b.s, 6), down(b.w, 6)], '#4f93bd');
+      // jet
+      ctx.strokeStyle = 'rgba(160,220,245,.9)'; ctx.lineWidth = 2.5;
+      ctx.beginPath(); ctx.moveTo(0, -14); ctx.quadraticCurveTo(6, -26, 0, -34); ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(0, -14); ctx.quadraticCurveTo(-7, -24, -2, -30); ctx.stroke();
+      isoBox(ctx, -4, -4, 0.2, 0.2, 18, pal(C.marble));
+      break;
+    }
+    case 'prefecture': case 'engineerPost': {
+      const acc = key === 'prefecture' ? '#b03a2e' : '#3a6ea5';
+      ellipseShadow(ctx, 0, TH / 2 + 3, TW * 0.44, TH * 0.38);
+      const c = isoBox(ctx, 0, 0, 0.9, 0.9, 18, pal('#c8b48a'));
+      pyramid(ctx, c, 18, 10, acc === '#b03a2e' ? '#8f2f26' : '#2f547f', 'x');
+      ctx.fillStyle = acc; ctx.fillRect(-3, -34, 6, 10); // banner
+      poly(ctx, [[-3, -34], [8, -31], [-3, -28]], acc);
+      break;
+    }
+    case 'forum': {
+      ellipseShadow(ctx, 0, TH / 2 + 6, TW * 0.9, TH * 0.75);
+      const c = isoBox(ctx, 0, 0, 1.7, 1.7, 24, pal('#d8cbb0'));
+      pyramid(ctx, c, 24, 12, C.roofTile, 'x');
+      for (const px of [-22, -12, -2, 8]) { ctx.fillStyle = C.marble; ctx.fillRect(px, -20, 4, 18); }
+      ctx.fillStyle = C.gold; ctx.fillRect(-24, -22, 36, 2.5);
+      break;
+    }
+    case 'senate': {
+      ellipseShadow(ctx, 0, TH / 2 + 8, TW * 1.25, TH * 1.05);
+      const c = isoBox(ctx, 0, 0, 2.6, 2.6, 40, pal('#e6ddc8'));
+      // dome
+      ctx.fillStyle = '#7a94a8'; ctx.beginPath(); ctx.ellipse(0, -40 - 8, 26, 16, 0, Math.PI, 0); ctx.fill();
+      ctx.fillStyle = shade('#7a94a8', 1.2); ctx.beginPath(); ctx.ellipse(-6, -48 - 8, 16, 10, 0, Math.PI, 0); ctx.fill();
+      ctx.strokeStyle = C.gold; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, -64); ctx.lineTo(0, -74); ctx.stroke();
+      ctx.fillStyle = C.gold; ctx.beginPath(); ctx.arc(0, -76, 3, 0, 7); ctx.fill();
+      for (const px of [-34, -22, -10, 2, 14, 26]) { ctx.fillStyle = C.marble; ctx.fillRect(px, -34, 5, 32); }
+      ctx.fillStyle = C.gold; ctx.fillRect(-38, -36, 70, 3);
+      break;
+    }
+
+    // ── religion ──
+    case 'templeJupiter': case 'templeCeres': case 'templeNeptune': case 'templeMars': {
+      const roofC = { templeJupiter: '#c9a227', templeCeres: '#5f943e', templeNeptune: '#3a6ea5', templeMars: '#b03a2e' }[key]!;
+      ellipseShadow(ctx, 0, TH / 2 + 5, TW * 0.85, TH * 0.7);
+      const c = isoBox(ctx, 0, 0, 1.7, 1.7, 22, pal(C.marble));
+      // stepped base
+      poly(ctx, [down(footCorners(-0.15, -0.15, 2, 2).n, 4), down(footCorners(-0.15, -0.15, 2, 2).e, 4), down(footCorners(-0.15, -0.15, 2, 2).s, 4), down(footCorners(-0.15, -0.15, 2, 2).w, 4)], shade(C.marble, 0.92));
+      pyramid(ctx, c, 22, 16, roofC, 'x');
+      // pediment triangle
+      poly(ctx, [[0, -22 - 16 - 2], [-26, -22 - 4], [0, -22 - 4]].map(([x, y]) => [x, y] as [number, number]), shade(roofC, 1.1));
+      // columns front-left
+      for (const px of [-24, -14, -4]) { ctx.fillStyle = C.marble; ctx.fillRect(px, -20, 4, 20); }
+      // god sigil dot
+      ctx.fillStyle = roofC; ctx.beginPath(); ctx.arc(0, -44, 4, 0, 7); ctx.fill();
+      break;
+    }
+    case 'oracle': {
+      ellipseShadow(ctx, 0, TH / 2 + 5, TW * 0.8, TH * 0.7);
+      // circular tholos
+      const g = ctx.createRadialGradient(0, -20, 4, 0, -20, 44);
+      g.addColorStop(0, 'rgba(180,140,255,.55)'); g.addColorStop(1, 'rgba(180,140,255,0)');
+      ctx.fillStyle = g; ctx.fillRect(-50, -70, 100, 90);
+      ctx.fillStyle = C.marble;
+      ctx.beginPath(); ctx.ellipse(0, -6, 30, 15, 0, 0, 7); ctx.fill();
+      for (let i = 0; i < 8; i++) { const a = i / 8 * Math.PI * 2; ctx.fillStyle = shade(C.marble, i % 2 ? 0.85 : 1.02); ctx.fillRect(Math.cos(a) * 24 - 2.5, -8 - 22 + Math.sin(a) * 6, 5, 24); }
+      poly(ctx, [[0, -46], [-30, -26], [0, -22], [30, -26]], '#8f7ac9');
+      poly(ctx, [[0, -46], [30, -26], [0, -22]], shade('#8f7ac9', 0.7));
+      ctx.fillStyle = '#d8c6ff'; ctx.beginPath(); ctx.arc(0, -34, 5, 0, 7); ctx.fill();
+      break;
+    }
+
+    // ── entertainment ──
+    case 'theater': {
+      ellipseShadow(ctx, 0, TH / 2 + 5, TW * 0.85, TH * 0.7);
+      const c = isoBox(ctx, 6, 6, 1.1, 1.1, 20, pal('#cfc3a5'));
+      pyramid(ctx, c, 20, 11, C.roofTile, 'y');
+      // semicircle seats
+      for (let r = 0; r < 3; r++) {
+        ctx.strokeStyle = shade('#b8ab88', 1 - r * 0.12); ctx.lineWidth = 4;
+        ctx.beginPath(); ctx.ellipse(-8 - r * 2, 8 + r * 4, 22 + r * 8, 11 + r * 4, 0, 0.3, Math.PI - 0.3); ctx.stroke();
+      }
+      break;
+    }
+    case 'amphitheater': case 'colosseum': {
+      const big = key === 'colosseum';
+      ellipseShadow(ctx, 0, TH / 2 + 10, big ? TW * 1.3 : TW, big ? TH * 1.1 : TH * 0.85);
+      // ring walls
+      for (let ring = 0; ring < (big ? 3 : 2); ring++) {
+        const rx = (big ? 46 : 32) - ring * 8, ry = (big ? 23 : 16) - ring * 4;
+        const hh = (big ? 30 : 22) - ring * 6;
+        ctx.fillStyle = ring % 2 ? '#b8ab88' : shade('#b8ab88', 0.85);
+        ctx.beginPath(); ctx.ellipse(0, 6, rx, ry, 0, 0, Math.PI * 2); ctx.fill();
+        ctx.fillStyle = shade('#cfc3a5', 0.95);
+        ctx.beginPath(); ctx.ellipse(0, 6 - hh, rx, ry, 0, 0, Math.PI * 2); ctx.fill();
+        ctx.fillStyle = '#8f7f5f';
+        ctx.beginPath(); ctx.ellipse(0, 6 - hh, rx * 0.8, ry * 0.8, 0, 0, Math.PI * 2); ctx.fill();
+      }
+      if (big) { ctx.fillStyle = '#b03a2e'; ctx.fillRect(-4, -78, 8, 14); poly(ctx, [[-4, -78], [12, -74], [-4, -70]], '#b03a2e'); }
+      break;
+    }
+
+    // ── education / health ──
+    case 'school': case 'academy': case 'library': {
+      const roofC = key === 'school' ? '#3f7d43' : key === 'academy' ? '#3a6ea5' : '#c9a227';
+      const wz = key === 'school' ? 20 : 26;
+      ellipseShadow(ctx, 0, TH / 2 + 4, TW * 0.7, TH * 0.6);
+      const c = isoBox(ctx, 0, 0, 1.5, 1.5, wz, pal('#ddd2b8'));
+      pyramid(ctx, c, wz, 12, roofC, 'x');
+      // scroll banner
+      ctx.fillStyle = '#f2ead2'; ctx.fillRect(-4, -wz - 16, 8, 12);
+      ctx.fillStyle = roofC; ctx.font = 'bold 8px serif'; ctx.textAlign = 'center'; ctx.fillText(key === 'library' ? '✎' : 'A', 0, -wz - 7);
+      ctx.textAlign = 'left';
+      break;
+    }
+    case 'clinic': case 'hospital': {
+      const wz = key === 'hospital' ? 28 : 18;
+      ellipseShadow(ctx, 0, TH / 2 + 4, TW * 0.7, TH * 0.6);
+      const c = isoBox(ctx, 0, 0, 1.5, 1.5, wz, pal('#e8e2d2'));
+      pyramid(ctx, c, wz, 11, '#7d9c8f', 'x');
+      // serpent staff sigil
+      ctx.strokeStyle = '#4f7d5f'; ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.moveTo(0, -wz - 14); ctx.lineTo(0, -wz - 4); ctx.stroke();
+      ctx.beginPath(); ctx.arc(-3, -wz - 9, 3, 0.4, 4.6); ctx.stroke();
+      break;
+    }
+
+    // ── military ──
+    case 'wall': {
+      const p = pal('#9a9184');
+      const c = footCorners(0, 0, 1, 1);
+      isoBox(ctx, 0, 0, 1, 1, 30, p);
+      // crenellations
+      for (const [mx, my] of [[-TW / 4 + 2, TH / 4 - 6], [2, TH / 2 + 2]] as Array<[number, number]>) {
+        ctx.fillStyle = shade('#9a9184', 1.1); ctx.fillRect(mx, my - 34, 7, 8);
+      }
+      void c;
+      break;
+    }
+    case 'tower': {
+      ellipseShadow(ctx, 0, TH / 2 + 4, TW * 0.7, TH * 0.55);
+      const p = pal('#8f867a');
+      const c = footCorners(0.2, 0.2, 1.5, 1.5);
+      isoBox(ctx, 0.2, 0.2, 1.5, 1.5, 44, p);
+      // battlement
+      poly(ctx, [down(c.n, 50), down(c.e, 50), down(c.s, 50), down(c.w, 50)], shade('#8f867a', 1.12));
+      for (let i = 0; i < 4; i++) {
+        const t = i / 4, px = c.w[0] + (c.e[0] - c.w[0]) * t + 4, py = c.w[1] + (c.e[1] - c.w[1]) * t;
+        ctx.fillStyle = shade('#8f867a', 1.2); ctx.fillRect(px - 3, py - 56, 6, 7);
+      }
+      // arrow slit + banner
+      ctx.fillStyle = '#241c12'; ctx.fillRect(-2, -34, 4, 10);
+      ctx.strokeStyle = '#5f4426'; ctx.beginPath(); ctx.moveTo(-14, -50); ctx.lineTo(-14, -66); ctx.stroke();
+      poly(ctx, [[-14, -66], [-2, -62], [-14, -58]], '#b03a2e');
+      break;
+    }
+    case 'gatehouse': {
+      const p = pal('#9a9184');
+      isoBox(ctx, 0, 0, 2, 2, 34, p);
+      // arch opening on SE face
+      poly(ctx, [[6, 4], [22, -4], [22, 14], [6, 22]], '#241c12');
+      ctx.strokeStyle = shade('#9a9184', 1.2); ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.moveTo(6, 12); ctx.quadraticCurveTo(14, -2, 22, 6); ctx.stroke();
+      // portcullis lines
+      ctx.strokeStyle = '#4a4438'; ctx.lineWidth = 1;
+      for (let i = 1; i < 4; i++) { ctx.beginPath(); ctx.moveTo(6 + i * 4, 6 + i * -1.5 + 2); ctx.lineTo(6 + i * 4, 20 + i * -1.5); ctx.stroke(); }
+      break;
+    }
+    case 'barracks': {
+      const c = isoBox(ctx, 0, 0, 1.7, 1.3, 22, pal('#a08a68'));
+      pyramid(ctx, c, 22, 11, '#6f5a3a', 'x');
+      // shield decor
+      ctx.fillStyle = '#b03a2e'; ctx.beginPath(); ctx.arc(-16, -8, 6, 0, 7); ctx.fill();
+      ctx.fillStyle = C.gold; ctx.beginPath(); ctx.arc(-16, -8, 3, 0, 7); ctx.fill();
+      // spear rack
+      ctx.strokeStyle = '#7a6238'; ctx.lineWidth = 1.5;
+      for (let i = 0; i < 3; i++) { ctx.beginPath(); ctx.moveTo(14 + i * 6, 24); ctx.lineTo(20 + i * 6, 8); ctx.stroke(); }
+      break;
+    }
+    case 'fort': {
+      ellipseShadow(ctx, 0, TH / 2 + 8, TW * 1.15, TH * 0.95);
+      // palisade ring
+      ctx.strokeStyle = '#7a5a34'; ctx.lineWidth = 3;
+      for (let i = 0; i < 12; i++) { const a = i / 12 * Math.PI * 2; const px = Math.cos(a) * 40, py = 10 + Math.sin(a) * 20; ctx.beginPath(); ctx.moveTo(px, py); ctx.lineTo(px, py - 18); ctx.stroke(); }
+      const c = isoBox(ctx, 0, 0, 2.2, 2.2, 30, pal('#9c8a6a'));
+      pyramid(ctx, c, 30, 14, '#6f5a3a', 'x');
+      // standard
+      ctx.strokeStyle = '#4a3418'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, -44); ctx.lineTo(0, -64); ctx.stroke();
+      poly(ctx, [[0, -64], [16, -60], [0, -55]], '#b03a2e');
+      ctx.fillStyle = C.gold; ctx.beginPath(); ctx.arc(0, -67, 3, 0, 7); ctx.fill();
+      break;
+    }
+
+    // ── magic ──
+    case 'leyPylon': {
+      ellipseShadow(ctx, 0, TH / 2 + 3, TW * 0.3, TH * 0.26);
+      const c = footCorners(0.2, 0.2, 0.6, 0.6);
+      poly(ctx, [down(c.n, 10), down(c.e, 10), down(c.s, 10), down(c.w, 10)], C.stoneDark);
+      const g = ctx.createRadialGradient(0, -26, 2, 0, -26, 30);
+      g.addColorStop(0, 'rgba(110,225,240,.85)'); g.addColorStop(1, 'rgba(110,225,240,0)');
+      ctx.fillStyle = g; ctx.fillRect(-34, -62, 68, 70);
+      poly(ctx, [[0, -48], [7, -18], [0, -8], [-7, -18]], C.crystal);
+      poly(ctx, [[0, -48], [7, -18], [0, -8]], shade(C.crystal, 1.3));
+      // orbiting motes
+      ctx.fillStyle = 'rgba(180,245,255,.9)';
+      ctx.beginPath(); ctx.arc(10, -30, 2, 0, 7); ctx.fill();
+      ctx.beginPath(); ctx.arc(-9, -40, 1.6, 0, 7); ctx.fill();
+      break;
+    }
+    case 'mageTower': {
+      ellipseShadow(ctx, 0, TH / 2 + 5, TW * 0.65, TH * 0.55);
+      const p = pal('#6f5a8f');
+      isoBox(ctx, 0.3, 0.3, 1.3, 1.3, 52, p);
+      const c = footCorners(0.3, 0.3, 1.3, 1.3);
+      poly(ctx, [down(c.n, 58), down(c.e, 58), down(c.s, 58), down(c.w, 58)], shade('#6f5a8f', 1.15));
+      // conical hat roof
+      poly(ctx, [[0, -84], [down(c.e, 58)[0], down(c.e, 58)[1] - 4], [down(c.s, 58)[0], down(c.s, 58)[1] - 4], [down(c.w, 58)[0], down(c.w, 58)[1] - 4]], '#4f3f6f');
+      poly(ctx, [[0, -84], down(c.w, 58), down(c.n, 58)], '#5f4f83');
+      // floating crystal
+      const g = ctx.createRadialGradient(0, -96, 1, 0, -96, 22);
+      g.addColorStop(0, 'rgba(150,120,255,.9)'); g.addColorStop(1, 'rgba(150,120,255,0)');
+      ctx.fillStyle = g; ctx.fillRect(-24, -118, 48, 44);
+      poly(ctx, [[0, -104], [5, -96], [0, -88], [-5, -96]], '#c9b0ff');
+      // rune window
+      ctx.fillStyle = '#b49aff'; ctx.fillRect(-2, -40, 5, 9);
+      break;
+    }
+    case 'arcaneLibrary': {
+      ellipseShadow(ctx, 0, TH / 2 + 7, TW * 1.05, TH * 0.9);
+      const c = isoBox(ctx, 0, 0, 2.5, 2.5, 34, pal('#4f3f6f'));
+      pyramid(ctx, c, 34, 16, '#3a2d54', 'x');
+      const g = ctx.createRadialGradient(0, -30, 4, 0, -30, 60);
+      g.addColorStop(0, 'rgba(150,120,255,.4)'); g.addColorStop(1, 'rgba(150,120,255,0)');
+      ctx.fillStyle = g; ctx.fillRect(-70, -100, 140, 110);
+      // runes on walls
+      ctx.fillStyle = '#b49aff'; ctx.font = 'bold 10px serif';
+      ctx.fillText('ᚠ', -18, -20); ctx.fillText('ᛗ', 6, -14); ctx.fillText('ᚨ', -4, -30);
+      // floating tome
+      ctx.fillStyle = '#e8dcc0'; ctx.fillRect(-24, -52, 10, 7);
+      ctx.fillStyle = '#b03a2e'; ctx.fillRect(-24, -53, 10, 2);
+      break;
+    }
+    case 'golemFoundry': {
+      ellipseShadow(ctx, 0, TH / 2 + 5, TW * 0.8, TH * 0.7);
+      const c = isoBox(ctx, 0, 0, 1.6, 1.6, 24, pal('#6a6458'));
+      pyramid(ctx, c, 24, 12, '#54504a', 'x');
+      // twin chimneys + smoke
+      isoBox(ctx, 24, 6, 0.3, 0.3, 40, pal('#54504a'));
+      ctx.fillStyle = 'rgba(150,150,150,.5)';
+      ctx.beginPath(); ctx.arc(29, -46, 5, 0, 7); ctx.arc(33, -56, 7, 0, 7); ctx.fill();
+      // half-built golem
+      ctx.fillStyle = '#7f8791'; ctx.fillRect(-22, -6, 12, 14); ctx.fillRect(-20, -12, 8, 7);
+      ctx.fillStyle = '#59c8d8'; ctx.fillRect(-18, -10, 4, 3);
+      break;
+    }
+
+    // ── heroes ──
+    case 'heroHall': {
+      ellipseShadow(ctx, 0, TH / 2 + 8, TW * 1.15, TH * 0.95);
+      const c = isoBox(ctx, 0, 0, 2.4, 2.4, 36, pal('#efe6cd'));
+      pyramid(ctx, c, 36, 18, C.gold, 'x');
+      // statue pairs
+      for (const sx of [-30, -16, 16, 30]) {
+        ctx.fillStyle = C.marble; ctx.fillRect(sx - 2, -18, 4, 18);
+        ctx.beginPath(); ctx.arc(sx, -21, 3, 0, 7); ctx.fill();
+      }
+      // banners
+      for (const bx of [-34, 34]) {
+        ctx.strokeStyle = '#5a4426'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(bx, -40); ctx.lineTo(bx, -62); ctx.stroke();
+        poly(ctx, [[bx, -62], [bx + (bx < 0 ? -12 : 12), -57], [bx, -52]], '#b03a2e');
+      }
+      // laurel crest
+      ctx.strokeStyle = C.gold; ctx.lineWidth = 2.5;
+      ctx.beginPath(); ctx.arc(0, -60, 10, Math.PI * 0.15, Math.PI * 0.85, true); ctx.stroke();
+      break;
+    }
+    case 'tradingPost': {
+      ellipseShadow(ctx, 0, TH / 2 + 6, TW * 1.05, TH * 0.85);
+      const c = isoBox(ctx, 0, 0, 2.3, 2.3, 26, pal('#b89a68'));
+      pyramid(ctx, c, 26, 13, '#4f7d8f', 'x');
+      // awning + crates + camel-less caravan gear
+      poly(ctx, [[-30, -6], [-6, 6], [-6, 16], [-30, 4]], '#c94f3d');
+      poly(ctx, [[-30, -6], [-6, 6], [-6, 10], [-30, -2]], '#e07050');
+      isoBox(ctx, 30, 26, 0.45, 0.45, 10, pal(C.wood));
+      isoBox(ctx, 38, 20, 0.45, 0.45, 12, pal('#b89a68'));
+      break;
+    }
+
+    // ── decor ──
+    case 'plaza': {
+      const c = footCorners(0, 0, 1, 1);
+      poly(ctx, [c.n, c.e, c.s, c.w], '#b5a888', 'rgba(90,80,60,.35)');
+      ctx.strokeStyle = 'rgba(120,108,84,.6)'; ctx.lineWidth = 1;
+      ctx.beginPath(); ctx.moveTo(c.w[0], c.w[1]); ctx.lineTo(c.e[0], c.e[1]); ctx.moveTo(c.n[0], c.n[1]); ctx.lineTo(c.s[0], c.s[1]); ctx.stroke();
+      break;
+    }
+    case 'garden': {
+      const c = footCorners(0, 0, 1, 1);
+      poly(ctx, [c.n, c.e, c.s, c.w], '#5f8f3f', 'rgba(40,70,20,.4)');
+      ctx.fillStyle = '#6fa04a'; ctx.beginPath(); ctx.arc(-8, 10, 7, 0, 7); ctx.fill();
+      ctx.fillStyle = '#7fae55'; ctx.beginPath(); ctx.arc(10, 16, 6, 0, 7); ctx.fill();
+      ctx.fillStyle = '#c94f3d'; ctx.beginPath(); ctx.arc(-8, 8, 1.8, 0, 7); ctx.fill();
+      ctx.fillStyle = '#e8c93d'; ctx.beginPath(); ctx.arc(11, 14, 1.8, 0, 7); ctx.fill();
+      ctx.fillStyle = '#d87fd0'; ctx.beginPath(); ctx.arc(2, 22, 1.8, 0, 7); ctx.fill();
+      break;
+    }
+    case 'statue': {
+      ellipseShadow(ctx, 0, TH / 2 + 3, TW * 0.34, TH * 0.3);
+      isoBox(ctx, 0.2, 0.2, 0.6, 0.6, 8, pal(C.stone));
+      ctx.fillStyle = '#cfc8b8'; // figure
+      ctx.fillRect(-4, -26, 8, 18);
+      ctx.beginPath(); ctx.arc(0, -30, 4.5, 0, 7); ctx.fill();
+      ctx.strokeStyle = '#cfc8b8'; ctx.lineWidth = 2.5;
+      ctx.beginPath(); ctx.moveTo(0, -22); ctx.lineTo(8, -32); ctx.stroke(); // raised arm
+      ctx.strokeStyle = C.gold; ctx.lineWidth = 1.5;
+      ctx.beginPath(); ctx.arc(0, -34, 6, Math.PI * 1.15, Math.PI * 1.85); ctx.stroke(); // laurel
+      break;
+    }
+
+    // ── map features ──
+    case 'feat_tree': {
+      ellipseShadow(ctx, 0, TH / 2 + 2, TW * 0.3, TH * 0.24);
+      ctx.fillStyle = '#5f4426'; ctx.fillRect(-2, -14, 4, 15);
+      ctx.fillStyle = '#3e6b2a'; ctx.beginPath(); ctx.arc(0, -20, 11, 0, 7); ctx.fill();
+      ctx.fillStyle = '#4f8236'; ctx.beginPath(); ctx.arc(-3, -23, 7, 0, 7); ctx.fill();
+      break;
+    }
+    case 'feat_pine': {
+      ellipseShadow(ctx, 0, TH / 2 + 2, TW * 0.28, TH * 0.22);
+      ctx.fillStyle = '#54401f'; ctx.fillRect(-1.5, -6, 3, 8);
+      poly(ctx, [[0, -34], [-9, -14], [9, -14]], '#2f5a28');
+      poly(ctx, [[0, -26], [-7, -8], [7, -8]], '#3c6e30');
+      break;
+    }
+    case 'feat_rock': {
+      ellipseShadow(ctx, 0, TH / 2 + 2, TW * 0.32, TH * 0.26);
+      const c = isoBox(ctx, 0.05, 0.05, 0.85, 0.85, 12, pal('#8f867a'));
+      pyramid(ctx, c, 12, 7, '#9a9184', 'x');
+      break;
+    }
+    case 'feat_clay': {
+      ellipseShadow(ctx, 0, TH / 2 + 2, TW * 0.34, TH * 0.28);
+      const c = footCorners(0.08, 0.08, 0.84, 0.84);
+      poly(ctx, [c.n, c.e, c.s, c.w], '#a3714b');
+      poly(ctx, [footCorners(0.25, 0.25, 0.5, 0.5).n, footCorners(0.25, 0.25, 0.5, 0.5).e, footCorners(0.25, 0.25, 0.5, 0.5).s, footCorners(0.25, 0.25, 0.5, 0.5).w], '#b3714f');
+      ctx.fillStyle = '#c07a45'; ctx.beginPath(); ctx.arc(-8, 8, 3, 0, 7); ctx.fill();
+      break;
+    }
+    case 'feat_iron': {
+      ellipseShadow(ctx, 0, TH / 2 + 2, TW * 0.32, TH * 0.26);
+      const c = isoBox(ctx, 0.05, 0.05, 0.8, 0.8, 10, pal('#77726a'));
+      pyramid(ctx, c, 10, 6, '#8d93a1', 'x');
+      ctx.fillStyle = '#aab2c0';
+      ctx.beginPath(); ctx.arc(-6, 6, 2.5, 0, 7); ctx.arc(7, 12, 2, 0, 7); ctx.fill();
+      break;
+    }
+    case 'feat_crystal': {
+      ellipseShadow(ctx, 0, TH / 2 + 2, TW * 0.3, TH * 0.24);
+      const g = ctx.createRadialGradient(0, -10, 2, 0, -10, 26);
+      g.addColorStop(0, 'rgba(110,225,240,.75)'); g.addColorStop(1, 'rgba(110,225,240,0)');
+      ctx.fillStyle = g; ctx.fillRect(-28, -38, 56, 48);
+      poly(ctx, [[0, -26], [6, -6], [0, 0], [-6, -6]], C.crystal);
+      poly(ctx, [[0, -26], [6, -6], [0, 0]], shade(C.crystal, 1.35));
+      poly(ctx, [[-10, -12], [-5, -2], [-12, 2], [-15, -6]], shade(C.crystal, 0.85));
+      break;
+    }
+    case 'feat_rubbleflat': break;
+
+    default: { // fallback: simple box
+      const c = isoBox(ctx, 0, 0, fw, fh, 20, pal('#a89a86'));
+      pyramid(ctx, c, 20, 10, C.roofTile, 'x');
+    }
+  }
+}
+
+/** Rubble sprite for destroyed buildings. */
+export function getRubble(): Sprite {
+  const key = '__rubble';
+  let s = cache.get(key);
+  if (s) return s;
+  s = makeCanvas(TW + PAD * 2, TH + 30 + PAD * 2, PAD + TW / 2, PAD + 20,
+    (ctx) => {
+      const c = footCorners(0, 0, 1, 1);
+      poly(ctx, [c.n, c.e, c.s, c.w], '#6f655a', 'rgba(30,20,10,.5)');
+      ctx.fillStyle = '#7d7160';
+      for (const [rx, ry, rr] of [[-10, 6, 5], [4, 10, 6], [12, 4, 4], [-2, 2, 4], [-14, 12, 3]] as const) {
+        ctx.beginPath(); ctx.arc(rx, ry, rr, 0, 7); ctx.fill();
+      }
+      ctx.strokeStyle = '#4f463c'; ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.moveTo(-8, 4); ctx.lineTo(6, 12); ctx.moveTo(-12, 12); ctx.lineTo(2, 2); ctx.stroke();
+    });
+  cache.set(key, s);
+  return s;
+}

src/sim/city.ts

@@ -0,0 +1,535 @@
+// ─── City simulation core ──────────────────────────────────────────────────
+import type { Building, CityState, Good, Scenario, ServiceType, Tile, Walker } from './types';
+import { def } from '../data/buildings';
+import { RNG, clamp, Emitter } from '../core/util';
+import { makeSandbox } from '../data/scenarios';
+
+export const MONTH_SECONDS = 10;          // real seconds per month at speed 1
+export const SPEEDS = [0, 0.5, 1, 2.5];
+
+// ── events the UI listens to ──
+export interface GameEvents {
+  message: { text: string; icon: string; kind: 'info' | 'warn' | 'danger' | 'good' };
+  month: { month: number; year: number };
+  victory: { won: boolean; reason?: string };
+  fundsChanged: void;
+  sfx: string;
+}
+export const bus = new Emitter<GameEvents>();
+
+export function addMsg(c: CityState, text: string, kind: 'info' | 'warn' | 'danger' | 'good', icon = '📜') {
+  const m = { id: c.nextMsgId++, month: c.month, year: c.year, icon, text, kind };
+  c.messages.unshift(m);
+  if (c.messages.length > 120) c.messages.pop();
+  bus.emit('message', { text, icon, kind });
+}
+
+// ── map generation ──────────────────────────────────────────────────────────
+function valueNoise(rng: RNG, W: number, H: number, cell: number): (x: number, y: number) => number {
+  const gw = Math.ceil(W / cell) + 2, gh = Math.ceil(H / cell) + 2;
+  const g = new Float32Array(gw * gh);
+  for (let i = 0; i < g.length; i++) g[i] = rng.next();
+  return (x: number, y: number) => {
+    const fx = x / cell, fy = y / cell;
+    const x0 = fx | 0, y0 = fy | 0;
+    const tx = fx - x0, ty = fy - y0;
+    const sx = tx * tx * (3 - 2 * tx), sy = ty * ty * (3 - 2 * ty);
+    const a = g[y0 * gw + x0], b = g[y0 * gw + x0 + 1], cc = g[(y0 + 1) * gw + x0], d = g[(y0 + 1) * gw + x0 + 1];
+    return a + (b - a) * sx + (cc - a + (a - b - cc + d) * sx) * sy;
+  };
+}
+
+function blob(rng: RNG, cx: number, cy: number, r: number): Array<[number, number]> {
+  const pts: Array<[number, number]> = [];
+  const n = Math.round(r * r * 3.5);
+  for (let i = 0; i < n; i++) {
+    const a = rng.next() * Math.PI * 2, rr = Math.sqrt(rng.next()) * r;
+    pts.push([Math.round(cx + Math.cos(a) * rr), Math.round(cy + Math.sin(a) * rr)]);
+  }
+  return pts;
+}
+
+export function generateMap(sc: Scenario): { tiles: Tile[]; entryPoints: Array<{ x: number; y: number }> } {
+  const rng = new RNG(sc.mapSeed);
+  const W = sc.mapW, H = sc.mapH;
+  const nWater = valueNoise(rng, W, H, 9);
+  const nFert = valueNoise(rng, W, H, 7);
+  const nTree = valueNoise(rng, W, H, 5);
+  const tiles: Tile[] = new Array(W * H);
+
+  for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
+    const edge = Math.min(x, y, W - 1 - x, H - 1 - y);
+    let water = nWater(x, y) < 0.17 && edge > 1;
+    if ((x === 0 || y === 0 || x === W - 1 || y === H - 1)) water = false;
+    tiles[y * W + x] = {
+      terrain: water ? 'water' : 'grass',
+      bld: 0, road: false, plaza: false, garden: false, wall: 0,
+      fert: clamp((nFert(x, y) - 0.32) * 260, 0, 100),
+      desirability: 0, entPts: 0, fireFervor: 0, waterCover: 0,
+      variant: rng.int(0, 1),
+    };
+  }
+  const at = (x: number, y: number) => tiles[y * W + x];
+  const setT = (x: number, y: number, t: Tile['terrain']) => {
+    if (x >= 0 && y >= 0 && x < W && y < H && at(x, y).terrain !== 'water') at(x, y).terrain = t;
+  };
+  // forests
+  for (let k = 0; k < 14; k++) {
+    const cx = rng.int(2, W - 3), cy = rng.int(2, H - 3);
+    for (const [x, y] of blob(rng, cx, cy, rng.range(2.5, 5))) setT(x, y, 'tree');
+  }
+  // rock outcrops with iron
+  for (let k = 0; k < 6; k++) {
+    const cx = rng.int(3, W - 4), cy = rng.int(3, H - 4);
+    const pts = blob(rng, cx, cy, rng.range(2, 4));
+    const hasIron = rng.chance(0.55);
+    for (const [x, y] of pts) setT(x, y, hasIron ? 'iron' : 'rock');
+  }
+  // clay near water
+  for (let k = 0; k < 8; k++) {
+    const cx = rng.int(2, W - 3), cy = rng.int(2, H - 3);
+    for (const [x, y] of blob(rng, cx, cy, rng.range(1.5, 3))) setT(x, y, 'clay');
+  }
+  // crystal seams (ley lines)
+  const seams = rng.int(2, 3);
+  for (let k = 0; k < seams; k++) {
+    let x = rng.int(4, W - 8), y = rng.int(4, H - 8);
+    const dx = rng.pick([-1, 1]), dy = rng.pick([-1, 0, 1]);
+    for (let s = 0; s < rng.int(4, 7); s++) {
+      setT(x, y, 'crystal');
+      if (rng.chance(0.6)) setT(x + 1, y, 'crystal');
+      x += dx; y += dy;
+      if (x < 2 || y < 2 || x >= W - 2 || y >= H - 2) break;
+    }
+  }
+  // fertile meadows
+  for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
+    const t = at(x, y);
+    if (t.terrain === 'grass' && t.fert > 45 && nFert(x + 31, y + 17) > 0.52) t.terrain = 'fertile';
+  }
+
+  // entry points on each landable edge
+  const entryPoints: Array<{ x: number; y: number }> = [];
+  const candEdge = (x: number, y: number) => { const t = at(x, y); if (t.terrain !== 'water') entryPoints.push({ x, y }); };
+  for (let i = 0; i < 3; i++) {
+    candEdge(Math.floor(W * (i + 1) / 4), 1);
+    candEdge(Math.floor(W * (i + 1) / 4), H - 2);
+    candEdge(1, Math.floor(H * (i + 1) / 4));
+    candEdge(W - 2, Math.floor(H * (i + 1) / 4));
+  }
+  return { tiles, entryPoints };
+}
+
+// ── city creation ───────────────────────────────────────────────────────────
+export function createCity(sc: Scenario): CityState {
+  const { tiles, entryPoints } = generateMap(sc);
+  const c: CityState = {
+    scenarioId: sc.id,
+    seed: sc.mapSeed, W: sc.mapW, H: sc.mapH,
+    month: 0, year: 0,
+    funds: sc.funds,
+    mana: sc.allowSpellsFromStart ? 40 : 0,
+    manaMax: 50,
+    population: 0,
+    taxRate: 9, wageRate: 1,
+    laborers: 0, employed: 0, unemploymentPct: 0,
+    sentiment: 60,
+    ratings: { culture: 0, prosperity: 0, peace: 50, favor: 60 },
+    buildings: new Map(), nextBldId: 1,
+    walkers: new Map(), nextWalkerId: 1,
+    tiles,
+    messages: [], nextMsgId: 1,
+    trades: sc.openTrades.map(name => ({ name, buys: [], wants: [], exports: [], imports: [], open: true, priceFactor: 1 })),
+    spellState: {
+      unlocked: new Set(sc.allowSpellsFromStart ? ['blessing', 'heal', 'haste', 'firestorm'] : ['blessing']),
+      cooldowns: {}, buffs: { hasteUntil: 0, shieldUntil: 0 },
+      areaBuffs: [],
+    },
+    stats: { monthsSinceInvasion: 24, monstersSlain: 0, invadersSlain: 0, totalDeaths: 0 },
+    entryPoints,
+    victory: null,
+    paused: false,
+    speedIdx: 2,
+    dirtyCoverage: true,
+    pendingStartRes: sc.startRes ? { ...sc.startRes } : undefined,
+  };
+  addMsg(c, `Welcome, Governor. ${sc.name} awaits your command.`, 'good', '🏛️');
+  return c;
+}
+
+// ── tile helpers ────────────────────────────────────────────────────────────
+export const idx = (c: CityState, x: number, y: number) => y * c.W + x;
+export const inB = (c: CityState, x: number, y: number) => x >= 0 && y >= 0 && x < c.W && y < c.H;
+export const tileAt = (c: CityState, x: number, y: number): Tile | null => inB(c, x, y) ? c.tiles[idx(c, x, y)] : null;
+export const bldAt = (c: CityState, x: number, y: number): Building | undefined => {
+  const t = tileAt(c, x, y);
+  return t && t.bld ? c.buildings.get(t.bld) : undefined;
+};
+
+const LAND_OK: Record<string, boolean> = { grass: true, fertile: true, tree: true, clay: true };
+
+export type PlaceCheck = true | string;
+
+export function canPlace(c: CityState, key: string, x: number, y: number, ignoreRoadCheck = false): PlaceCheck {
+  const d = def(key);
+  if (key === 'road') {
+    const t = tileAt(c, x, y);
+    if (!t) return 'out of bounds';
+    if (t.terrain === 'water') return "can't build on water";
+    if (t.bld) return 'blocked — clear it first';
+    if (t.road || t.plaza) return 'already paved';
+    return true;
+  }
+  let sawWater = false, sawBadTerrain: string | null = null, sawBlocked = false, sawRuins = false;
+  for (let dy = 0; dy < d.h; dy++) for (let dx = 0; dx < d.w; dx++) {
+    const t = tileAt(c, x + dx, y + dy);
+    if (!t) return 'out of bounds';
+    if (t.terrain === 'water') sawWater = true;
+    else if (!LAND_OK[t.terrain] && !sawBadTerrain) {
+      sawBadTerrain = t.terrain === 'rock' ? 'rocky ground' : t.terrain === 'iron' ? 'an iron seam (use Iron Mine)' : t.terrain === 'crystal' ? 'a crystal seam (use Ley Pylon)' : 'this terrain';
+    }
+    if (t.bld || t.road || t.plaza || t.garden) {
+      const ob = t.bld ? c.buildings.get(t.bld) : null;
+      if (ob && ob.ruin) sawRuins = true;
+      else sawBlocked = true;
+    }
+  }
+  if (sawWater && key !== 'fishingWharf') return "can't build on water";
+  if (sawRuins) return 'ruins here — use Clear tool first';
+  if (sawBlocked) {
+    if (d.w > 1 || d.h > 1) return `needs ${d.w}×${d.h} free land — part is occupied`;
+    return 'occupied — pick an empty tile';
+  }
+  if (sawBadTerrain) return `can't build on ${sawBadTerrain}`;
+  // resource requirements
+  if (key === 'clayPit') { if (!footprintHas(c, x, y, d.w, d.h, t => t.terrain === 'clay')) return 'must sit on a clay deposit'; }
+  else if (key === 'timberCamp') { if (!nearTiles(c, x, y, d.w, d.h, 2, t => t.terrain === 'tree')) return 'needs woodland nearby'; }
+  else if (key === 'ironMine') { if (!footprintHas(c, x, y, d.w, d.h, t => t.terrain === 'iron')) return 'must sit on an iron seam'; }
+  else if (key === 'crystalMine') { if (!footprintHas(c, x, y, d.w, d.h, t => t.terrain === 'crystal')) return 'must sit on a crystal seam'; }
+  else if (key === 'leyPylon') { const t = tileAt(c, x, y); if (!t || t.terrain !== 'crystal') return 'must be built on a glowing crystal seam'; }
+  else if (key === 'fishingWharf') { if (!nearTiles(c, x, y, d.w, d.h, 1, t => t.terrain === 'water')) return 'must touch the coastline'; }
+  // NOTE: road adjacency is NOT required for placement (build anywhere,
+  // connect later) — unconnected buildings simply receive no workers.
+  // unique
+  if (d.unique && [...c.buildings.values()].some(b => b.def === key && !b.ruin)) return `only one ${d.name} allowed`;
+  return true;
+}
+
+/** Human-readable placement failure, or null when placeable & affordable. */
+export function placementIssue(c: CityState, key: string, x: number, y: number): string | null {
+  const r = canPlace(c, key, x, y);
+  if (r !== true) return r;
+  if (c.funds < def(key).cost) return 'not enough denarii';
+  return null;
+}
+
+function footprintHas(c: CityState, x: number, y: number, w: number, h: number, pred: (t: Tile) => boolean): boolean {
+  for (let dy = 0; dy < h; dy++) for (let dx = 0; dx < w; dx++) {
+    const t = tileAt(c, x + dx, y + dy);
+    if (t && pred(t)) return true;
+  }
+  return false;
+}
+function nearTiles(c: CityState, x: number, y: number, w: number, h: number, r: number, pred: (t: Tile) => boolean): boolean {
+  for (let dy = -r; dy <= h - 1 + r; dy++) for (let dx = -r; dx <= w - 1 + r; dx++) {
+    const inside = dx >= 0 && dy >= 0 && dx < w && dy < h;
+    if (inside) continue;
+    const t = tileAt(c, x + dx, y + dy);
+    if (t && pred(t)) return true;
+  }
+  return false;
+}
+export function hasRoadAccess(c: CityState, x: number, y: number, w: number, h: number): boolean {
+  for (let dx = -1; dx <= w; dx++) {
+    for (const yy of [y - 1, y + h]) {
+      const t = tileAt(c, x + dx, yy);
+      if (t && (t.road || t.plaza)) return true;
+    }
+  }
+  for (let dy = -1; dy <= h; dy++) {
+    for (const xx of [x - 1, x + w]) {
+      const t = tileAt(c, xx, y + dy);
+      if (t && (t.road || t.plaza)) return true;
+    }
+  }
+  return false;
+}
+
+/** Nearest road/plaza tile adjacent to footprint (walker access point). */
+export function roadAccessPoint(c: CityState, b: Building): { x: number; y: number } | null {
+  for (let dx = -1; dx <= b.w; dx++) for (const yy of [b.y - 1, b.y + b.h]) {
+    const t = tileAt(c, b.x + dx, yy);
+    if (t && (t.road || t.plaza)) return { x: b.x + dx, y: yy };
+  }
+  for (let dy = -1; dy <= b.h; dy++) for (const xx of [b.x - 1, b.x + b.w]) {
+    const t = tileAt(c, xx, b.y + dy);
+    if (t && (t.road || t.plaza)) return { x: xx, y: b.y + dy };
+  }
+  return null;
+}
+
+// ── placement / removal ─────────────────────────────────────────────────────
+export interface PlacedB { ok: boolean; id?: number; reason?: string }
+
+export function placeBuilding(c: CityState, key: string, x: number, y: number, free = false): PlacedB {
+  if (key === 'road') {
+    const rr = canPlace(c, key, x, y);
+    if (rr !== true) return { ok: false, reason: rr };
+    const t = tileAt(c, x, y)!;
+    if (c.funds < def('road').cost && !free) return { ok: false, reason: 'No funds' };
+    t.road = true;
+    if (!free) c.funds -= def('road').cost;
+    markDirtyArea(c, x, y, 1, 1);
+    bus.emit('sfx', 'build');
+    return { ok: true };
+  }
+  const d = def(key);
+  const cr = canPlace(c, key, x, y);
+  if (cr !== true) return { ok: false, reason: cr };
+  if (!free && c.funds < d.cost) return { ok: false, reason: 'No funds' };
+  const b: Building = {
+    id: c.nextBldId++, def: key, x, y, w: d.w, h: d.h,
+    workersLive: 0, progress: 0, inv: {},
+    serviceT: {}, walkerTimers: new Array(d.walker?.count ?? 0).fill(d.walker ? d.walker.period * Math.random() : 0),
+    burning: 0, ruin: false, active: false, hp: 100,
+    houseLevel: 0, residents: 0, devolveTimer: 0,
+    fetchQueue: [],
+  };
+  c.buildings.set(b.id, b);
+  for (let dy = 0; dy < d.h; dy++) for (let dx = 0; dx < d.w; dx++) {
+    const t = tileAt(c, x + dx, y + dy)!;
+    t.bld = b.id;
+    if (d.cat === 'military' && key === 'wall') { t.wall = b.id; }
+  }
+  if (!free) c.funds -= d.cost;
+  c.dirtyCoverage = true;
+  reassignLabor(c);
+  markDirtyArea(c, x, y, d.w, d.h);
+  bus.emit('sfx', 'build');
+  // seed the first granary with the province's starting provisions
+  if (key === 'granary' && c.pendingStartRes) {
+    for (const [g, q] of Object.entries(c.pendingStartRes)) {
+      b.inv[g as Good] = q;
+    }
+    const tot = Object.values(c.pendingStartRes).reduce((a2, v) => a2 + (v ?? 0), 0);
+    addMsg(c, `${tot} units of provisions arrive from Rome.`, 'good', '🌾');
+    c.pendingStartRes = undefined;
+  }
+  return { ok: true, id: b.id };
+}
+
+export function removeBuilding(c: CityState, x: number, y: number, refundPct = 0.25): boolean {
+  const t = tileAt(c, x, y);
+  if (!t) return false;
+  if (t.road && !t.bld) {
+    t.road = false; markDirtyArea(c, x, y, 1, 1); return true;
+  }
+  if (t.plaza || t.garden) {
+    t.plaza = t.garden = false; markDirtyArea(c, x, y, 1, 1);
+    if (!t.road) c.dirtyCoverage = true;
+    return true;
+  }
+  const b = t.bld ? c.buildings.get(t.bld) : undefined;
+  if (!b) return false;
+  clearBuildingTiles(c, b);
+  if (!b.ruin) c.funds += Math.round(def(b.def).cost * refundPct);
+  // evict
+  if (b.residents) c.stats.totalDeaths += 0; // they move away, not die
+  c.population -= b.residents; b.residents = 0;
+  // walkers homeless
+  for (const w of c.walkers.values()) if (w.homeId === b.id) w.dead = true;
+  c.buildings.delete(b.id);
+  reassignLabor(c);
+  c.dirtyCoverage = true;
+  bus.emit('sfx', 'demolish');
+  return true;
+}
+
+function clearBuildingTiles(c: CityState, b: Building) {
+  for (let dy = 0; dy < b.h; dy++) for (let dx = 0; dx < b.w; dx++) {
+    const t = tileAt(c, b.x + dx, b.y + dy);
+    if (t) { t.bld = 0; t.wall = 0; }
+    markDirtyArea(c, b.x + dx, b.y + dy, 1, 1);
+  }
+}
+
+export function clearRubble(c: CityState, x: number, y: number): boolean {
+  const t = tileAt(c, x, y);
+  if (!t || !t.bld) return false;
+  const b = c.buildings.get(t.bld);
+  if (!b || !b.ruin) return false;
+  clearBuildingTiles(c, b);
+  c.buildings.delete(b.id);
+  c.dirtyCoverage = true;
+  bus.emit('sfx', 'demolish');
+  return true;
+}
+
+function markDirtyArea(c: CityState, x: number, y: number, w: number, h: number) {
+  // renderer invalidation is done via callback list
+  for (const cb of dirtyCbs) cb(x, y, w, h);
+}
+export const dirtyCbs: Array<(x: number, y: number, w: number, h: number) => void> = [];
+
+// ── coverage caches ─────────────────────────────────────────────────────────
+export function computeDesirability(c: Pick<CityState, 'tiles' | 'W' | 'H'>) {
+  for (const t of c.tiles as Tile[]) t.desirability = 0;
+}
+
+export function recomputeCoverage(c: CityState) {
+  // desirability
+  for (const t of c.tiles) t.desirability = 0;
+  for (const b of c.buildings.values()) {
+    if (b.ruin) continue;
+    const d = def(b.def);
+    if (!d.desirability) continue;
+    const cx = b.x + (b.w - 1) / 2, cy = b.y + (b.h - 1) / 2;
+    const R = d.desRange;
+    for (let y = Math.max(0, cy - R | 0); y <= Math.min(c.H - 1, cy + R); y++) {
+      for (let x = Math.max(0, cx - R | 0); x <= Math.min(c.W - 1, cx + R); x++) {
+        const dist = Math.max(Math.abs(x - cx), Math.abs(y - cy));
+        if (dist <= R) {
+          c.tiles[y * c.W + x].desirability += d.desirability * (1 - dist / (R + 1));
+        }
+      }
+    }
+  }
+  for (const t of c.tiles) t.desirability = clamp(t.desirability, -24, 24);
+  // water cover
+  for (const t of c.tiles) t.waterCover = 0;
+  for (const b of c.buildings.values()) {
+    if (b.ruin) continue;
+    const d = def(b.def);
+    if (!d.service?.includes('water') || b.workersLive < neededWorkers(d.workers, b)) continue;
+    const well = b.def === 'well';
+    const R = well ? 4 : 6, cov = well ? 1 : 2;
+    const cx = b.x + (b.w - 1) / 2, cy = b.y + (b.h - 1) / 2;
+    for (let y = Math.max(0, cy - R | 0); y <= Math.min(c.H - 1, cy + R); y++) {
+      for (let x = Math.max(0, cx - R | 0); x <= Math.min(c.W - 1, cx + R); x++) {
+        const dist = Math.max(Math.abs(x - cx), Math.abs(y - cy));
+        if (dist <= R) {
+          const t = c.tiles[y * c.W + x];
+          t.waterCover = Math.max(t.waterCover, cov);
+        }
+      }
+    }
+  }
+  c.dirtyCoverage = false;
+}
+
+export function neededWorkers(base: number, _b: Building): number { return base; }
+
+/** staffed ratio 0..1 including spell/hero buffs applied by economy. */
+export function staffingRatio(b: Building): number {
+  const d = def(b.def);
+  if (d.workers <= 0) return 1;
+  return clamp(b.workersLive / d.workers, 0, 1);
+}
+
+// ── labor assignment ────────────────────────────────────────────────────────
+const PRIORITY: string[] = [
+  'farmWheat', 'orchard', 'fishingWharf', 'market', 'granary',
+  'prefecture', 'engineerPost', 'well', 'fountain',
+  'forum', 'senate',
+  'templeJupiter', 'templeCeres', 'templeNeptune', 'templeMars', 'oracle',
+  'clinic', 'hospital', 'school', 'academy', 'library',
+  'theater', 'amphitheater', 'colosseum',
+  'clayPit', 'timberCamp', 'ironMine', 'crystalMine', 'potteryWksp', 'furnitureWksp', 'oilPress', 'winery', 'weaponSmith',
+  'warehouse', 'mageTower', 'leyPylon', 'arcaneLibrary', 'golemFoundry',
+  'tower', 'gatehouse', 'barracks', 'fort', 'tradingPost', 'heroHall',
+];
+
+export function reassignLabor(c: CityState) {
+  c.laborers = Math.floor(c.population * 0.6);
+  let pool = c.laborers;
+  const byDef = new Map<string, Building[]>();
+  for (const b of c.buildings.values()) {
+    b.workersLive = 0;
+    b.active = false;
+    const d = def(b.def);
+    if (d.workers > 0 && !b.ruin) {
+      const arr = byDef.get(b.def) ?? [];
+      arr.push(b); byDef.set(b.def, arr);
+    }
+  }
+  const roadOkCache = new Map<number, boolean>();
+  const roadOkOf = (b: Building): boolean => {
+    let cached = roadOkCache.get(b.id);
+    if (cached === undefined) { cached = hasRoadAccess(c, b.x, b.y, b.w, b.h); roadOkCache.set(b.id, cached); }
+    return cached;
+  };
+  for (const b of c.buildings.values()) {
+    b.noRoad = false;
+    if (!b.ruin && def(b.def).roadAccess) b.noRoad = !roadOkOf(b);
+  }
+  for (const cat of PRIORITY) {
+    const arr = byDef.get(cat);
+    if (!arr) continue;
+    for (const b of arr) {
+      const d = def(b.def);
+      let ok = true;
+      if (d.roadAccess && !b.ruin) ok = roadOkOf(b);
+      if (!ok) b.noRoad = true;
+      const need = ok ? d.workers : 0;
+      const give = Math.min(need, pool);
+      b.workersLive = give;
+      pool -= give;
+      if (pool <= 0 && need === 0) break;
+    }
+    if (pool <= 0) break;
+  }
+  c.employed = c.laborers - pool;
+  c.unemploymentPct = c.laborers > 0 ? Math.round((pool / c.laborers) * 100) : 0;
+}
+
+export function buildingActive(b: Building): boolean {
+  const d = def(b.def);
+  if (b.ruin || b.burning > 0) return false;
+  if (d.workers > 0 && b.workersLive === 0) return false;
+  return true;
+}
+
+// ── main tick ───────────────────────────────────────────────────────────────
+export interface TickCtx { scenario: Scenario }
+
+export function tickCity(c: CityState, sc: Scenario, dtReal: number) {
+  if (c.victory) return;
+  const dt = dtReal * SPEEDS[c.speedIdx] * (c.paused ? 0 : 1);
+  if (dt <= 0) return;
+
+  updateWalkers(c, dt);
+  updateCombat(c, dt);
+  updateMagic(c, dt);
+  updateFire(c, dt);
+
+  c.monthFloat = (c.monthFloat ?? 0) + dt / MONTH_SECONDS;
+  while (c.monthFloat >= 1) {
+    c.monthFloat -= 1;
+    monthlyTick(c, sc);
+    if (c.victory) break;
+  }
+}
+
+// declared here to avoid circular imports; implementations injected by modules
+export let updateWalkers: (c: CityState, dt: number) => void = () => {};
+export let updateCombat: (c: CityState, dt: number) => void = () => {};
+export let updateMagic: (c: CityState, dt: number) => void = () => {};
+export let updateFire: (c: CityState, dt: number) => void = () => {};
+export let monthlyTick: (c: CityState, sc: Scenario) => void = () => {};
+export function registerSimHooks(hooks: {
+  updateWalkers: typeof updateWalkers;
+  updateCombat: typeof updateCombat;
+  updateMagic: typeof updateMagic;
+  updateFire: typeof updateFire;
+  monthlyTick: typeof monthlyTick;
+}) {
+  updateWalkers = hooks.updateWalkers;
+  updateCombat = hooks.updateCombat;
+  updateMagic = hooks.updateMagic;
+  updateFire = hooks.updateFire;
+  monthlyTick = hooks.monthlyTick;
+}
+
+// tiny helper used across modules
+
+export function sandboxScenario(): Scenario { return makeSandbox(Date.now() % 100000); }

src/sim/combat.ts

@@ -0,0 +1,475 @@
+// ─── Military: invasions, monsters, legions, combat ────────────────────────
+import type { Building, CityState, MonsterKind, UnitStats, Walker } from './types';
+import { def } from '../data/buildings';
+import { HEROES } from '../data/heroes';
+import { RNG, clamp } from '../core/util';
+import { astarPath, type Pt } from '../core/pathfind';
+import { addMsg, tileAt, inB, bus } from './city';
+import { ruinBuilding } from './economy';
+import { spawnWalker, landPath } from './walkers';
+import { FX, Sfx } from '../render/fx';
+
+const rng = new RNG(0x5eed1234);
+
+// base stats per single soldier; squads scale hp & dmg by squadSize
+export const UNIT_STATS: Record<MonsterKind | 'soldier', UnitStats> = {
+  // city side
+  soldier: { hp: 60, dmg: 9, speed: 1.15, ranged: false, range: 1.1, atkCd: 1.0 },
+  golem:   { hp: 340, dmg: 26, speed: 0.8, ranged: false, range: 1.2, atkCd: 1.4 },
+  legion:  { hp: 60, dmg: 9, speed: 1.15, ranged: false, range: 1.1, atkCd: 1.0 },
+  // foes
+  barbarian: { hp: 52, dmg: 7, speed: 1.05, ranged: false, range: 1.1, atkCd: 1.1 },
+  skeleton:  { hp: 30, dmg: 5, speed: 1.25, ranged: false, range: 1.1, atkCd: 0.9 },
+  harpy:     { hp: 44, dmg: 6, speed: 2.1, ranged: false, range: 1.0, atkCd: 0.8 },
+  minotaur:  { hp: 520, dmg: 34, speed: 1.0, ranged: false, range: 1.3, atkCd: 1.6 },
+  hydra:     { hp: 900, dmg: 24, speed: 0.75, ranged: false, range: 1.4, atkCd: 1.1 },
+  lich:      { hp: 700, dmg: 20, speed: 0.85, ranged: true, range: 6, atkCd: 1.8 },
+};
+export const MONSTERS: import('./types').UnitKind[] = ['hydra', 'minotaur', 'harpy', 'lich'];
+
+function edgeSpawn(c: CityState, pref?: string): Pt {
+  const side = !pref || pref === 'random' ? rng.pick(['n', 's', 'e', 'w'] as const) : pref;
+  if (side === 'n') return { x: rng.int(1, c.W - 2), y: 1 };
+  if (side === 's') return { x: rng.int(1, c.W - 2), y: c.H - 2 };
+  if (side === 'e') return { x: c.W - 2, y: rng.int(1, c.H - 2) };
+  return { x: 1, y: rng.int(1, c.H - 2) };
+}
+
+export function trySpawnInvasion(c: CityState, kind: MonsterKind, squads: number, size: number, fromEdge = 'random') {
+  for (let i = 0; i < squads; i++) {
+    const p = edgeSpawn(c, fromEdge);
+    spawnFoeSquad(c, kind, size, p);
+  }
+  c.stats.monthsSinceInvasion = 0;
+  addMsg(c, `${kind === 'barbarian' ? 'BARBARIANS' : 'ENEMIES'} have breached the province!`, 'danger', '⚔️');
+  Sfx.play('horn');
+}
+
+export function spawnMonsterWave(c: CityState, kind: MonsterKind, squads: number, size: number) {
+  for (let i = 0; i < squads; i++) {
+    const p = edgeSpawn(c);
+    spawnFoeSquad(c, kind, kind === 'harpy' || kind === 'barbarian' || kind === 'skeleton' ? size : 1, p);
+  }
+  const names: Record<string, string> = { hydra: 'A HYDRA rises!', minotaur: 'The MINOTAUR charges!', harpy: 'Harpies descend!', lich: 'The LICH KING comes!' };
+  addMsg(c, names[kind] ?? `A ${kind} attacks!`, 'danger', '🐲');
+  Sfx.play('monster');
+}
+
+export function spawnFoeSquad(c: CityState, kind: MonsterKind, size: number, at: Pt) {
+  const st = UNIT_STATS[kind];
+  const isMonster = MONSTERS.includes(kind);
+  const mult = isMonster ? 1 : size;
+  spawnWalker(c, {
+    kind: 'monster', x: at.x + 0.5, y: at.y + 0.5, homeId: 0,
+    state: 'walkOut', speed: st.speed * 0.55,
+    unit: {
+      kind, hp: st.hp * mult, maxHp: st.hp * mult,
+      stats: { ...st, dmg: st.dmg * (isMonster ? 1 : Math.sqrt(size)) },
+      cd: 0, side: 'foe', squadSize: size,
+    },
+  });
+}
+
+/** Fort recruits a legion when weapons are stocked. */
+export function tryRecruitLegion(c: CityState): boolean {
+  // consume weapons from any warehouse
+  let wIdx = 0;
+  for (const b of c.buildings.values()) {
+    if (b.ruin) continue;
+    const d = def(b.def);
+    if (!d.storage) continue;
+    if ((b.inv['weapons'] ?? 0) >= 20) { wIdx = b.id; break; }
+  }
+  if (!wIdx) return false;
+  const wh = c.buildings.get(wIdx)!;
+  wh.inv['weapons'] = (wh.inv['weapons'] ?? 0) - 20;
+  return true;
+}
+
+export function spawnLegionAt(c: CityState, fort: Building) {
+  const acc = { x: fort.x + 1, y: fort.y + 2 };
+  spawnWalker(c, {
+    kind: 'soldiers', x: acc.x + 0.5, y: acc.y + 0.5, homeId: fort.id,
+    state: 'walkOut', speed: 1.15,
+    unit: {
+      kind: 'soldiers', hp: 60 * 16, maxHp: 60 * 16,
+      stats: { ...UNIT_STATS.soldier, dmg: UNIT_STATS.soldier.dmg * 4 }, cd: 0, side: 'city', squadSize: 16,
+    },
+  });
+  addMsg(c, 'A legion marches from the fortress.', 'info', '🎖️');
+  Sfx.play('horn');
+}
+
+export function spawnGolemAt(c: CityState, x: number, y: number) {
+  spawnWalker(c, {
+    kind: 'golemUnit', x: x + 0.5, y: y + 0.5, homeId: 0,
+    state: 'walkOut', speed: UNIT_STATS.golem.speed,
+    unit: { ...unitOf('golem'), cd: 0, side: 'city' },
+  });
+  addMsg(c, 'A stone golem awakens!', 'good', '🗿');
+}
+function unitOf(kind: MonsterKind) {
+  const st = UNIT_STATS[kind];
+  return { kind, hp: st.hp, maxHp: st.hp, stats: { ...st }, };
+}
+
+// ── target selection ────────────────────────────────────────────────────────
+function nearestFoe(c: CityState, x: number, y: number, maxD: number): Walker | null {
+  let best: Walker | null = null, bd = maxD * maxD;
+  for (const w of c.walkers.values()) {
+    if (w.unit?.side !== 'foe' || w.dead) continue;
+    const d = (w.x - x) ** 2 + (w.y - y) ** 2;
+    if (d < bd) { bd = d; best = w; }
+  }
+  return best;
+}
+function nearestCityUnit(c: CityState, x: number, y: number, maxD: number): Walker | null {
+  let best: Walker | null = null, bd = maxD * maxD;
+  for (const w of c.walkers.values()) {
+    if (w.unit?.side !== 'city' || w.dead) continue;
+    const d = (w.x - x) ** 2 + (w.y - y) ** 2;
+    if (d < bd) { bd = d; best = w; }
+  }
+  return best;
+}
+function nearestBuildingTarget(c: CityState, x: number, y: number): Building | null {
+  let best: Building | null = null, bd = Infinity;
+  for (const b of c.buildings.values()) {
+    if (b.ruin || b.burning > 0) continue;
+    if (b.def === 'wall') continue; // prefer real buildings
+    const d = Math.abs(b.x + b.w / 2 - x) + Math.abs(b.y + b.h / 2 - y);
+    if (d < bd) { bd = d; best = b; }
+  }
+  if (!best) {
+    for (const b of c.buildings.values()) { if (!b.ruin) { best = b; break; } }
+  }
+  return best;
+}
+
+// ── damage helpers ──────────────────────────────────────────────────────────
+export function damageUnit(c: CityState, w: Walker, dmg: number, byHero?: Walker) {
+  if (!w.unit || w.dead) return;
+  w.unit.hp -= dmg;
+  FX.spark(w.x, w.y - 0.8, w.unit.side === 'foe' ? '#ff8060' : '#ffd080', 3, 30, 40);
+  if (w.unit.hp <= 0) {
+    w.dead = true;
+    FX.blast(w.x, w.y, 1.2, '#caa', 0.4);
+    if (w.unit.side === 'foe') {
+      if (MONSTERS.includes(w.unit.kind)) {
+        c.stats.monstersSlain++;
+        addMsg(c, `The ${w.unit.kind} is slain! The people cheer!`, 'good', '🏆');
+        bus.emit('sfx', 'fanfare');
+      } else c.stats.invadersSlain++;
+      if (byHero?.heroId) addHeroXp(byHero, 40 + (w.unit.maxHp > 400 ? 120 : 0));
+    } else {
+      if (w.heroId) scheduleHeroRespawn(c, w.heroId);
+    }
+  }
+}
+
+function attack(a: Walker, bW: Walker, c: CityState, dt: number) {
+  const ua = a.unit!;
+  ua.cd -= dt;
+  if (ua.cd > 0) return;
+  ua.cd = ua.stats.atkCd;
+  const aSide = a.unit?.side;
+  if (ua.stats.ranged) {
+    FX.projectile(a.x, a.y - 1.2, bW.x, bW.y - 0.8, aSide === 'foe' ? '#b0f' : '#fff', 300, 12);
+  } else {
+    FX.spark((a.x + bW.x) / 2, (a.y + bW.y) / 2 - 0.8, '#ffe08a', 3, 36, 50);
+    Sfx.play('clash');
+  }
+  damageUnit(c, bW, ua.stats.dmg, aSide === 'city' ? a : undefined);
+}
+
+function damageBuilding(c: CityState, b: Building, dmg: number, by?: Walker) {
+  b.hp = (b.hp ?? 100) - dmg;
+  FX.spark(b.x + b.w / 2, b.y + b.h / 2, '#d8c8a8', 3, 40, 80);
+  if (b.hp <= 0) {
+    ruinBuilding(c, b, by?.unit?.side === 'foe' ? 'enemy' : 'monster');
+  }
+}
+
+// ── main combat update ──────────────────────────────────────────────────────
+let recruitAcc = 0;
+export function updateCombatImpl(c: CityState, dt: number) {
+  c_dt = dt;
+  setCombatCityRef(c);
+  const units = [...c.walkers.values()].filter(w => w.unit && !w.dead);
+
+  // building defenses (towers/mages)
+  for (const b of c.buildings.values()) {
+    if (b.ruin) continue;
+    const d = def(b.def);
+    const stats = d.tower ?? d.mageTower;
+    if (!stats || !stats.dmg) continue;
+    if (d.workers > 0 && b.workersLive === 0) continue;
+    b.spellCooldowns ??= {};
+    const key = '_atk';
+    b.spellCooldowns[key] = (b.spellCooldowns[key] ?? rng.next() * 0.5) - dt;
+    if (b.spellCooldowns[key] > 0) continue;
+    const cx = b.x + b.w / 2, cy = b.y + b.h / 2;
+    const foe = nearestFoe(c, cx, cy, stats.range);
+    if (!foe) continue;
+    b.spellCooldowns[key] = stats.atkCd / (c.spellState.buffs.shieldUntil > c.month + (c.monthFloat ?? 0) ? 2 : 1);
+    const dmg = stats.dmg * (c.spellState.buffs.shieldUntil > c.month + (c.monthFloat ?? 0) ? 2 : 1);
+    FX.projectile(cx, cy - 2.2, foe.x, foe.y - 0.8, d.mageTower ? '#a87fff' : '#f4ead0', 320, d.mageTower ? 4 : 18);
+    Sfx.play(d.mageTower ? 'zap' : 'arrow');
+    damageUnit(c, foe, dmg);
+  }
+
+  // unit vs unit
+  for (const u of units) {
+    if (u.dead) continue;
+    const uu = u.unit!;
+    uu.cd -= dt;
+    const foes = uu.side === 'foe';
+    const enemy = foes ? nearestCityUnit(c, u.x, u.y, 14) : nearestFoe(c, u.x, u.y, 14);
+    const distE = enemy ? Math.hypot(enemy.x - u.x, enemy.y - u.y) : Infinity;
+
+    if (enemy && distE <= Math.max(uu.stats.range, 1.15)) {
+      if (uu.cd <= 0) attack(u, enemy, c, 0); // immediate strike; cd decremented above
+      continue;
+    }
+
+    if (foes) {
+      // march toward target building
+      u.timer -= dt;
+      if ((!u.path.length || u.pathI >= u.path.length || u.timer <= 0)) {
+        u.timer = 4;
+        const tb = nearestBuildingTarget(c, u.x, u.y);
+        if (tb) {
+          const gx = tb.x + (tb.w >> 1), gy = tb.y + (tb.h >> 1);
+          const p = landPath(c, { x: Math.round(u.x - 0.5), y: Math.round(u.y - 0.5) }, { x: gx, y: gy });
+          if (p) { u.path = p.slice(1); u.pathI = 0; }
+        }
+      }
+      moveUnit(u, dt);
+      // attack building under feet
+      const t = tileAt(c, Math.floor(u.x), Math.floor(u.y));
+      if (t?.wall && t.bld) {
+        const wb = c.buildings.get(t.bld);
+        if (wb && !wb.ruin) { chewBuilding(c, u, wb, dt); continue; }
+      }
+      if (t?.bld) {
+        const bb = c.buildings.get(t.bld);
+        if (bb && !bb.ruin) chewBuilding(c, u, bb, dt);
+      }
+      // adjacent wall chewing
+      if (!t?.bld) {
+        for (const [dx, dy] of [[1, 0], [-1, 0], [0, 1], [0, -1]] as const) {
+          const nt = tileAt(c, Math.floor(u.x) + dx, Math.floor(u.y) + dy);
+          if (nt?.wall && nt.bld) {
+            const wb = c.buildings.get(nt.bld);
+            if (wb && !wb.ruin) chewBuilding(c, u, wb, dt);
+          }
+        }
+      }
+    } else {
+      // city unit: seek foes else patrol near home/rally
+      if (enemy && distE < 14) {
+        repathTo(c, u, enemy, dt);
+        moveUnit(u, dt);
+      } else {
+        patrolCityUnit(c, u, dt);
+      }
+    }
+  }
+
+  // fort recruitment every ~6s if weapons exist
+  recruitAcc += dt;
+  if (recruitAcc > 6) {
+    recruitAcc = 0;
+    for (const f of c.buildings.values()) {
+      if (f.ruin || f.def !== 'fort') continue;
+      const alive = [...c.walkers.values()].some(w => w.homeId === f.id && w.unit?.side === 'city' && !w.dead);
+      if (alive) continue;
+      if (tryRecruitLegion(c)) spawnLegionAt(c, f);
+    }
+    // golem foundry auto-build if iron available and few golems
+    const foundries = [...c.buildings.values()].filter(b => b.def === 'golemFoundry' && !b.ruin && b.workersLive > 0);
+    const golems = [...c.walkers.values()].filter(w => w.unit?.kind === 'golem' && !w.dead).length;
+    if (foundries.length && golems < foundries.length * 2) {
+      for (const f of foundries) {
+        let took = false;
+        for (const b2 of c.buildings.values()) {
+          if (b2.ruin) continue;
+          if ((b2.inv['iron'] ?? 0) >= 20) { b2.inv['iron'] = (b2.inv['iron'] ?? 0) - 20; took = true; break; }
+        }
+        if (took) { spawnGolemAt(c, f.x + 1, f.y + 2); break; }
+      }
+    }
+  }
+
+  // purge dead
+  for (const [id, w] of c.walkers) if (w.dead && w.unit) c.walkers.delete(id);
+}
+
+function chewBuilding(c: CityState, u: Walker, b: Building, _dt: number) {
+  const uu = u.unit!;
+  if (uu.cd > 0) return;
+  uu.cd = uu.stats.atkCd * 1.4;
+  FX.spark(b.x + b.w / 2, b.y + b.h / 2, '#ffb060', 4, 46, 90);
+  Sfx.play('smash');
+  damageBuilding(c, b, uu.stats.dmg * (uu.squadSize && uu.squadSize > 4 ? 2 : 1), u);
+}
+
+function repathTo(c: CityState, u: Walker, tgt: Walker, _dt: number) {
+  u.timer = (u.timer ?? 0) - 1;
+  if (u.path.length && u.pathI < u.path.length && u.timer > 0) return;
+  u.timer = 12;
+  const p = landPath(c, { x: Math.round(u.x - 0.5), y: Math.round(u.y - 0.5) }, { x: Math.round(tgt.x - 0.5), y: Math.round(tgt.y - 0.5) });
+  if (p) { u.path = p.slice(1); u.pathI = 0; }
+}
+
+function patrolCityUnit(c: CityState, u: Walker, _dt: number) {
+  const home = c.buildings.get(u.homeId);
+  const rx = u.rallyX ?? home?.x ?? c.W / 2;
+  const ry = u.rallyY ?? home?.y ?? c.H / 2;
+  if (Math.abs(u.x - rx) + Math.abs(u.y - ry) > 6) {
+    repathToTile(c, u, Math.round(rx), Math.round(ry));
+  } else if (!u.path.length || u.pathI >= u.path.length) {
+    // idle shuffle around rally
+    const nx = clamp(Math.round(rx + (Math.random() * 8 - 4)), 0, c.W - 1);
+    const ny = clamp(Math.round(ry + (Math.random() * 8 - 4)), 0, c.H - 1);
+    repathToTile(c, u, nx, ny);
+  }
+  moveUnit(u, c_dt);
+}
+let c_dt = 0.016;
+
+function repathToTile(c: CityState, u: Walker, tx: number, ty: number) {
+  const p = landPath(c, { x: Math.round(u.x - 0.5), y: Math.round(u.y - 0.5) }, { x: tx, y: ty });
+  if (p) { u.path = p.slice(1); u.pathI = 0; }
+}
+
+export function moveUnit(u: Walker, dt: number) {
+  if (!u.unit) return;
+  let budget = u.unit.stats.speed * dt;
+  while (budget > 0 && u.pathI < u.path.length) {
+    const t = u.path[u.pathI];
+    const tx = t.x + 0.5, ty = t.y + 0.5;
+    const dxs = (tx - ty) - (u.x - u.y);
+    if (dxs !== 0) u.facing = dxs > 0 ? 1 : -1;
+    const dist = Math.hypot(tx - u.x, ty - u.y);
+    if (dist <= budget) { u.x = tx; u.y = ty; budget -= dist; u.pathI++; }
+    else { u.x += (tx - u.x) / dist * budget; u.y += (ty - u.y) / dist * budget; budget = 0; }
+    u.animT += dt * 1.4;
+  }
+}
+
+// ─── Heroes ──────────────────────────────────────────────────────────────────
+interface HeroRecord { alive: boolean; respawnAt: number; level: number; xp: number }
+const heroRecords = new Map<HeroId, HeroRecord>();
+type HeroId = keyof typeof HEROES;
+
+export function heroRecord(id: HeroId): HeroRecord {
+  let h = heroRecords.get(id);
+  if (!h) { h = { alive: false, respawnAt: 0, level: 1, xp: 0 }; heroRecords.set(id, h); }
+  return h;
+}
+export function resetHeroes() { heroRecords.clear(); }
+
+export function summonHeroImpl(c: CityState, id: HeroId): boolean {
+  const hd = HEROES[id];
+  const hall = [...c.buildings.values()].find(b => def(b.def).heroHall && !b.ruin);
+  if (!hall) return false;
+  if (c.funds < hd.costGold) return false;
+  if (hd.costGood && !hasGoodStoredFor(c, hd.costGood.good, hd.costGood.qty)) return false;
+  const rec = heroRecord(id);
+  if (rec.alive) return false;
+  c.funds -= hd.costGold;
+  if (hd.costGood) takeGoodFor(c, hd.costGood.good, hd.costGood.qty);
+  rec.alive = true;
+  const acc = { x: hall.x + 1, y: hall.y + 2 };
+  const st = heroStats(hd.id, rec.level);
+  spawnWalker(c, {
+    kind: 'hero', x: acc.x + 0.5, y: acc.y + 0.5, homeId: hall.id,
+    state: 'walkOut', speed: hd.speed, heroId: id, heroLevel: rec.level, heroXp: rec.xp,
+    unit: { kind: 'hero', hp: st.hp, maxHp: st.hp, stats: st, cd: 0, side: 'city' },
+  });
+  addMsg(c, `${hd.name} ${hd.title} answers the call!`, 'good', hd.icon);
+  Sfx.play('fanfare');
+  return true;
+}
+function hasGoodStoredFor(c: CityState, g: import('./types').Good, qty: number): boolean {
+  let n = 0;
+  for (const b of c.buildings.values()) n += b.inv[g] ?? 0;
+  return n >= qty;
+}
+function takeGoodFor(c: CityState, g: import('./types').Good, qty: number) {
+  let need = qty;
+  for (const b of c.buildings.values()) {
+    const have = b.inv[g] ?? 0;
+    const take = Math.min(have, need);
+    if (take > 0) { b.inv[g] = have - take; need -= take; }
+    if (need <= 0) break;
+  }
+}
+export function heroStats(id: HeroId, level: number) {
+  const hd = HEROES[id];
+  const lm = 1 + (level - 1) * 0.22;
+  return {
+    hp: Math.round(hd.hp * lm), dmg: Math.round(hd.dmg * lm),
+    speed: hd.speed, ranged: false, range: hd.ranged ? 6 : 1.2, atkCd: hd.ranged ? 0.9 : 0.8,
+  };
+}
+export function addHeroXp(heroWalker: Walker, xp: number) {
+  heroWalker.heroXp = (heroWalker.heroXp ?? 0) + xp;
+  const lvlBefore = heroWalker.heroLevel ?? 1;
+  const lvlNew = 1 + Math.floor(heroWalker.heroXp / 150);
+  if (lvlNew > lvlBefore && heroWalker.heroId) {
+    heroWalker.heroLevel = lvlNew;
+    const st = heroStats(heroWalker.heroId, lvlNew);
+    if (heroWalker.unit) { heroWalker.unit.maxHp = st.hp; heroWalker.unit.hp = st.hp; heroWalker.unit.stats = st; }
+    FX.float(heroWalker.x, heroWalker.y - 2, 'LEVEL UP!', '#ffd700');
+    addMsg(c_global!, `${HEROES[heroWalker.heroId].name} reaches level ${lvlNew}!`, 'good', '⭐');
+    heroRecord(heroWalker.heroId).level = lvlNew;
+    heroRecord(heroWalker.heroId).xp = heroWalker.heroXp;
+  } else if (heroWalker.heroId) {
+    heroRecord(heroWalker.heroId).xp = heroWalker.heroXp;
+  }
+}
+let c_global: CityState | null = null;
+export function setCombatCityRef(c: CityState | null) { c_global = c; }
+
+function scheduleHeroRespawn(c: CityState, id: HeroId) {
+  const rec = heroRecord(id);
+  rec.alive = false;
+  const nowM = c.month + (c.monthFloat ?? 0);
+  rec.respawnAt = nowM + 2; // months
+  addMsg(c, `${HEROES[id].name} has fallen... legends return in time.`, 'warn', '⚰️');
+}
+
+/** Auto-respawn heroes whose time has come; called monthly. */
+export function heroMonthly(c: CityState) {
+  const nowM = c.month;
+  for (const [id, rec] of heroRecords) {
+    if (!rec.alive && rec.respawnAt > 0 && nowM >= rec.respawnAt && rec.respawnAt < nowM + 1) {
+      const hd = HEROES[id];
+      const hall = [...c.buildings.values()].find(b => def(b.def).heroHall && !b.ruin);
+      if (hall) {
+        rec.alive = true; rec.respawnAt = 0;
+        const st = heroStats(id, rec.level);
+        spawnWalker(c, {
+          kind: 'hero', x: hall.x + 1.5, y: hall.y + 2.5, homeId: hall.id,
+          state: 'walkOut', speed: hd.speed, heroId: id, heroLevel: rec.level, heroXp: rec.xp,
+          unit: { kind: 'hero', hp: st.hp, maxHp: st.hp, stats: st, cd: 0, side: 'city' },
+        });
+        addMsg(c, `${hd.name} returns from the underworld!`, 'good', hd.icon);
+      }
+    }
+  }
+}
+
+/** Industry aura boost near living heroes. */
+export function heroProdBoostImpl(c: CityState, x: number, y: number): number {
+  let boost = 1;
+  for (const w of c.walkers.values()) {
+    if (w.kind !== 'hero' || w.dead) continue;
+    const hd = HEROES[w.heroId!];
+    const d = Math.abs(w.x - x) + Math.abs(w.y - y);
+    if (d <= 10) boost += (hd.auraProd / 100) * (1 + (w.heroLevel ?? 1) * 0.15);
+  }
+  return boost;
+}

src/sim/economy.ts

@@ -0,0 +1,792 @@
+// ─── Monthly economy: production, food, taxes, trade, ratings, events ──────
+import type { Building, CityState, Good, Scenario } from './types';
+import { GOODS } from './types';
+import { def } from '../data/buildings';
+import { HOUSE_TIERS } from '../data/housing';
+import { RNG, clamp } from '../core/util';
+import {
+  addMsg, buildingActive, bus, reassignLabor, recomputeCoverage, removeBuilding } from './city';
+import { simMonths, spawnWalker, trySpawnImmigrant, maxResidentsOf, landPath, incomingFor } from './walkers';
+import { FX, Sfx } from '../render/fx';
+import { trySpawnInvasion, spawnMonsterWave, heroMonthly } from './combat';
+
+const rng = new RNG(0x9e3779b9);
+let lastStarveMsg = -99;
+function reseed(c: CityState) { (rng as unknown as { s: number }).s = (c.seed + c.month * 2654435761) >>> 0; }
+
+// ── storage helpers ─────────────────────────────────────────────────────────
+export function storagesAccepting(c: CityState, g: Good): Building[] {
+  const out: Building[] = [];
+  for (const b of c.buildings.values()) {
+    if (b.ruin) continue;
+    if (b.def === 'warehouse') out.push(b);
+    else if (b.def === 'granary' && GOODS[g].food) out.push(b);
+  }
+  return out;
+}
+
+export function totalStored(c: CityState, g: Good): number {
+  let n = 0;
+  for (const b of c.buildings.values()) n += b.inv[g] ?? 0;
+  return Math.floor(n);
+}
+
+export function addGoodsToStores(c: CityState, g: Good, qty: number): number {
+  let left = qty;
+  for (const b of storagesAccepting(c, g)) {
+    const cap = def(b.def).storage!.capacity;
+    const cur = Object.values(b.inv).reduce((a, v) => a + (v ?? 0), 0) - (b.inv[g] ?? 0);
+    const room = cap - cur - (b.inv[g] ?? 0);
+    if (room <= 0) continue;
+    const put = Math.min(room, left);
+    b.inv[g] = (b.inv[g] ?? 0) + put;
+    left -= put;
+    if (left <= 0) break;
+  }
+  return qty - left; // actually stored
+}
+
+export function takeGoodsFromStores(c: CityState, g: Good, qty: number): number {
+  let need = qty;
+  for (const b of c.buildings.values()) {
+    if (b.ruin) continue;
+    const have = b.inv[g] ?? 0;
+    if (have <= 0) continue;
+    const take = Math.min(have, need);
+    b.inv[g] = have - take;
+    need -= take;
+    if (need <= 0) break;
+  }
+  return qty - need;
+}
+
+export function hasGoodStored(c: CityState, g: Good, qty: number): boolean {
+  return totalStored(c, g) >= qty;
+}
+
+// ── production ──────────────────────────────────────────────────────────────
+let heroProdBoost: (c: CityState, x: number, y: number) => number = () => 1;
+export function setHeroProdBoostFn(f: typeof heroProdBoost) { heroProdBoost = f; }
+let spellProdBoost: (c: CityState, x: number, y: number) => number = () => 1;
+export function setSpellProdBoostFn(f: typeof spellProdBoost) { spellProdBoost = f; }
+
+function produceMonthly(c: CityState) {
+  for (const b of c.buildings.values()) {
+    if (b.ruin || b.burning > 0) continue;
+    const d = def(b.def);
+    if (!d.produces) continue;
+    if (!buildingActive(b)) continue;
+    // input availability
+    let okInput = true;
+    if (d.consumes) {
+      for (const [g, need] of Object.entries(d.consumes)) {
+        if ((b.inv[g as Good] ?? 0) < (need ?? 0)) { okInput = false; requestFetch(c, b, g as Good); }
+      }
+    }
+    // fertility factor for farms
+    let fertF = 1;
+    if (b.def === 'farmWheat') {
+      let f = 0, n = 0;
+      for (let dy = 0; dy < b.h; dy++) for (let dx = 0; dx < b.w; dx++) {
+        const t = c.tiles[(b.y + dy) * c.W + (b.x + dx)];
+        f += t?.fert ?? 40; n++;
+      }
+      fertF = 0.55 + clamp(f / n / 100, 0, 1) * 0.75; // 0.55..1.3
+    }
+    const staffed = d.workers > 0 ? b.workersLive / d.workers : 1;
+    const boost = heroProdBoost(c, b.x, b.y) * spellProdBoost(c, b.x, b.y);
+    if (okInput) {
+      for (const [g, need] of Object.entries(d.consumes ?? {})) {
+        b.inv[g as Good] = (b.inv[g as Good] ?? 0) - (need ?? 0);
+      }
+      b.progress += staffed * fertF * boost * 1.55 * (d.produces.rate / 100);
+      while (b.progress >= 1) {
+        b.progress -= 1;
+        b.inv[d.produces.good] = (b.inv[d.produces.good] ?? 0) + 100;
+      }
+      // ship out surplus
+      const stock = b.inv[d.produces.good] ?? 0;
+      if (stock >= 200) dispatchCart(c, b, d.produces.good, Math.min(stock, 200));
+    }
+  }
+}
+
+function requestFetch(c: CityState, b: Building, g: Good) {
+  if (b.fetchQueue.includes(g)) return;
+  if (totalStored(c, g) < 50) return;
+  b.fetchQueue.push(g);
+  dispatchCart(c, b, g, 100, true);
+}
+
+/** Cart from producer/storage to destination storage. */
+function dispatchCart(c: CityState, from: Building, g: Good, qty: number, isFetch = false) {
+  const start = roadAccessOf(c, from);
+  if (!start) return;
+  // find target
+  let target: Building | null = null, bestD = Infinity;
+  for (const s of c.buildings.values()) {
+    if (s.ruin || s.id === from.id) continue;
+    const isGranary = s.def === 'granary', isWh = s.def === 'warehouse';
+    if (!isGranary && !isWh) continue;
+    if (isGranary && !GOODS[g].food) continue;
+    const used = Object.entries(s.inv).reduce((a, [k, v]) => a + (k === g ? 0 : (v ?? 0)), 0);
+    if (used >= (def(s.def).storage?.capacity ?? 0) - 10) continue;
+    if (isFetch && ((s.inv[g] ?? 0) < 20)) continue;
+    const dd = Math.abs(s.x - from.x) + Math.abs(s.y - from.y);
+    if (dd < bestD) { bestD = dd; target = s; }
+  }
+  if (!target) return;
+  const goal = roadAccessOf(c, target);
+  if (!goal) return;
+  const path = landPath(c, start, goal);
+  if (!path) return;
+  if (isFetch) {
+    // fetch cart travels light; loads at target and returns home
+    const w = spawnWalker(c, {
+      kind: 'fetchCart', x: start.x + 0.5, y: start.y + 0.5, homeId: from.id,
+      path: path.slice(1), state: 'walkOut', speed: 2.0,
+      cargo: { [g]: qty }, carryCap: qty,
+    });
+    w.targetBld = target.id;
+  } else {
+    const have = from.inv[g] ?? 0;
+    const take = Math.min(have, qty);
+    from.inv[g] = have - take;
+    const w = spawnWalker(c, {
+      kind: 'cart', x: start.x + 0.5, y: start.y + 0.5, homeId: from.id,
+      path: path.slice(1), state: 'walkOut', speed: 1.7,
+      cargo: { [g]: take },
+    });
+    w.targetBld = target.id;
+  }
+}
+
+export function roadAccessOf(c: CityState, b: Building): { x: number; y: number } | null {
+  for (let dx = -1; dx <= b.w; dx++) for (const yy of [b.y - 1, b.y + b.h]) {
+    const t = c.tiles[yy * c.W + (b.x + dx)];
+    if (yy >= 0 && yy < c.H && b.x + dx >= 0 && b.x + dx < c.W && t && (t.road || t.plaza)) return { x: b.x + dx, y: yy };
+  }
+  for (let dy = -1; dy <= b.h; dy++) for (const xx of [b.x - 1, b.x + b.w]) {
+    if (xx < 0 || xx >= c.W || b.y + dy < 0 || b.y + dy >= c.H) continue;
+    const t = c.tiles[(b.y + dy) * c.W + xx];
+    if (t && (t.road || t.plaza)) return { x: xx, y: b.y + dy };
+  }
+  return null;
+}
+
+/** Market buyers fetch goods into market stock. */
+function marketBuying(c: CityState) {
+  for (const m of c.buildings.values()) {
+    if (m.ruin || m.def !== 'market' || !buildingActive(m)) continue;
+    const buyers = [...c.walkers.values()].filter(w => w.kind === 'marketBuyer' && w.homeId === m.id && !w.dead).length;
+    const stockTot0 = Object.values(m.inv).reduce((a, v) => a + (v ?? 0), 0);
+    if (buyers >= (stockTot0 < 150 ? 2 : 1)) continue;
+    const wants: Good[] = [];
+    const stockTot = stockTot0;
+    if (stockTot < 300) {
+      for (const g of ['wheat', 'fruit', 'meat'] as Good[]) if ((m.inv[g] ?? 0) < 90) wants.push(g);
+      for (const g of ['pottery', 'furniture', 'oil', 'wine'] as Good[]) if ((m.inv[g] ?? 0) < 8) wants.push(g);
+    }
+    if (!wants.length) continue;
+    // nearest granary/warehouse with any wanted good
+    let target: Building | null = null, bestD = Infinity;
+    for (const s of c.buildings.values()) {
+      if (s.ruin || s.def === 'market') continue;
+      const sd = def(s.def);
+      if (!sd.storage) continue;
+      if (!wants.some(g => (s.inv[g] ?? 0) > 0)) continue;
+      const dd = Math.abs(s.x - m.x) + Math.abs(s.y - m.y);
+      if (dd < bestD) { bestD = dd; target = s; }
+    }
+    if (!target) continue;
+    const start = roadAccessOf(c, m), goal = roadAccessOf(c, target);
+    if (!start || !goal) continue;
+    const path = landPath(c, start, goal);
+    if (!path) continue;
+    const w = spawnWalker(c, {
+      kind: 'marketBuyer', x: start.x + 0.5, y: start.y + 0.5, homeId: m.id,
+      path: path.slice(1), state: 'walkOut', speed: 1.9, cargo: {}, carryCap: 220,
+    });
+    w.targetBld = target.id;
+  }
+}
+
+/** Resolve cart arrivals (loading/unloading). */
+export function cartArrivals(c: CityState, w: import('./types').Walker) {
+  const target = w.targetBld ? c.buildings.get(w.targetBld) : undefined;
+  if (!target || target.ruin) { w.dead = true; return; }
+  const home = c.buildings.get(w.homeId);
+  if (w.state === 'walkOut') {
+    // arrived at target
+    if (w.kind === 'cart') {
+      for (const [g, q] of Object.entries(w.cargo ?? {})) {
+        const gg = g as Good;
+        const sd = def(target.def).storage!;
+        const used = Object.values(target.inv).reduce((a, v) => a + (v ?? 0), 0);
+        const room = Math.max(0, sd.capacity - used);
+        const put = Math.min(q ?? 0, room);
+        target.inv[gg] = (target.inv[gg] ?? 0) + put;
+        if (put < (q ?? 0)) {
+          // overflow back home if possible
+          if (home) home.inv[gg] = (home.inv[gg] ?? 0) + ((q ?? 0) - put);
+        }
+      }
+      w.cargo = {};
+      FX.float(w.x, w.y - 1, 'delivered', '#ffe9a0');
+      w.dead = true;
+      bus.emit('sfx', 'coin');
+    } else if (w.kind === 'fetchCart' || w.kind === 'marketBuyer') {
+      // load up to capacity from target stores
+      const wantList: Good[] = w.kind === 'marketBuyer'
+        ? (['wheat', 'fruit', 'meat', 'pottery', 'furniture', 'oil', 'wine'] as Good[])
+        : (Object.keys(w.cargo ?? {}) as Good[]);
+      let space = w.carryCap ?? 300;
+      for (const g of wantList) {
+        const avail = target.inv[g] ?? 0;
+        const take = Math.min(avail, space, w.kind === 'marketBuyer' ? (g === 'wheat' || g === 'fruit' || g === 'meat' ? 170 : 15) : 110);
+        if (take > 0) {
+          target.inv[g] = avail - take;
+          w.cargo![g] = (w.cargo![g] ?? 0) + take;
+          space -= take;
+        }
+        if (space <= 0) break;
+      }
+      // head home
+      if (home) {
+        const goal = roadAccessOf(c, home);
+        if (goal) {
+          const p = landPath(c, { x: Math.round(w.x - 0.5), y: Math.round(w.y - 0.5) }, goal);
+          if (p) { w.path = p.slice(1); w.pathI = 0; w.state = 'returning'; return; }
+        }
+      }
+      w.dead = true;
+    }
+  } else if (w.state === 'returning') {
+    if (home) {
+      for (const [g, q] of Object.entries(w.cargo ?? {})) {
+        home.inv[g as Good] = (home.inv[g as Good] ?? 0) + (q ?? 0);
+      }
+      if (w.kind === 'fetchCart' && home) {
+        const hq = home.fetchQueue;
+        for (const g of Object.keys(w.cargo ?? {})) {
+          const i = hq.indexOf(g as Good); if (i >= 0) hq.splice(i, 1);
+        }
+      }
+    }
+    w.dead = true;
+  }
+}
+
+
+function findStaffedMarketNear(c: CityState, b: Building): Building | null {
+  let best: Building | null = null, bd = Infinity;
+  const bcx = b.x + b.w / 2, bcy = b.y + b.h / 2;
+  for (const m of c.buildings.values()) {
+    if (m.ruin || m.def !== 'market') continue;
+    if (!buildingActive(m)) continue;
+    const tot = Object.values(m.inv).reduce((a, v) => a + (v ?? 0), 0);
+    if (tot <= 0) continue;
+    const d = Math.max(Math.abs(m.x + m.w / 2 - bcx), Math.abs(m.y + m.h / 2 - bcy));
+    if (d <= 17 && d < bd) { bd = d; best = m; }
+  }
+  return best;
+}
+
+// ── housing consumption & evolution ─────────────────────────────────────────
+function incomePerResident(tier: number): number {
+  return [0.4, 0.6, 0.9, 1.2, 1.7, 2.2, 3.0, 4.0, 5.5, 7.0, 9.0][Math.min(tier, 10)];
+}
+const ENT_POINTS: Record<string, number> = { theater: 1, amphitheater: 2, colosseum: 3 };
+
+function housingTick(c: CityState) {
+  let popTotal = 0;
+  let cultureSum = 0, cultureN = 0, propSum = 0, propN = 0;
+  const now = simMonths(c);
+  for (const b of c.buildings.values()) {
+    if (b.ruin) continue;
+    const d = def(b.def);
+    if (d.housing === undefined) continue;
+    const tile = c.tiles[b.y * c.W + b.x];
+    const tierIdx = Math.min(b.houseLevel, HOUSE_TIERS.length - 1);
+    const tier = HOUSE_TIERS[tierIdx];
+
+    // ── central provisioning: a staffed market in range stocks the pantry ──
+    if (b.residents > 0 || maxResidentsOf(b) > 5) {
+      const mkt = findStaffedMarketNear(c, b);
+      if (mkt) {
+        const gs2 = b.goodsStock ??= {};
+        const capFood = maxResidentsOf(b) * 3 + 16;
+        let curFood = (gs2.wheat ?? 0) + (gs2.fruit ?? 0) + (gs2.meat ?? 0);
+        for (const g of ['wheat', 'fruit', 'meat'] as Good[]) {
+          const room = Math.max(0, capFood - curFood);
+          if (room <= 0) break;
+          const have = mkt.inv[g] ?? 0;
+          const take = Math.min(have, room, 30);
+          if (take > 0) { mkt.inv[g] = have - take; gs2[g] = (gs2[g] ?? 0) + take; curFood += take; }
+        }
+        // luxury needs pulled too
+        const needG = tier.needs.goods ?? {};
+        for (const key of Object.keys(needG) as Array<'pottery'|'furniture'|'oil'|'wine'>) {
+          const target = (needG[key] ?? 1) * 3;
+          const short = target - (gs2[key] ?? 0);
+          const have = mkt.inv[key] ?? 0;
+          const take = Math.min(have, Math.max(0, short));
+          if (take > 0) { mkt.inv[key] = have - take; gs2[key] = (gs2[key] ?? 0) + take; }
+        }
+        b.serviceT['market'] = now;
+      }
+    }
+
+    // consume food
+    const gs = b.goodsStock ?? {};
+    let foodAvail = (gs.wheat ?? 0) + (gs.fruit ?? 0) + (gs.meat ?? 0);
+    const eat = Math.min(b.residents, foodAvail, Math.ceil(b.residents * 0.85));
+    foodAvail -= eat;
+    let left = eat;
+    for (const g of ['wheat', 'fruit', 'meat'] as Good[]) {
+      const take = Math.min(gs[g] ?? 0, left);
+      gs[g] = (gs[g] ?? 0) - take; left -= take;
+    }
+    b.goodsStock = gs;
+    if (eat < b.residents) b.hungerMonths = (b.hungerMonths ?? 0) + 1;
+    else b.hungerMonths = 0;
+
+    // consume luxury goods per needs
+    const needsGoods = tier.needs.goods ?? {};
+    for (const key of Object.keys(needsGoods) as Array<'pottery'|'furniture'|'oil'|'wine'>) {
+      gs[key] = Math.max(0, (gs[key] ?? 0) - (needsGoods[key] ?? 0));
+    }
+    // spoilage slow decay of luxuries above need*3
+    for (const g of ['pottery', 'furniture', 'oil', 'wine'] as const) {
+      const cap = ((needsGoods as Record<string, number | undefined>)[g] ?? 0) * 3 + 4;
+      if ((gs[g] ?? 0) > cap) gs[g] = cap;
+    }
+
+    // evaluate current-tier satisfaction & next tier
+    const evalTier = (ti: number): { ok: boolean; unmet: string[] } => {
+      const t = HOUSE_TIERS[Math.min(ti, HOUSE_TIERS.length - 1)];
+      const unmet: string[] = [];
+      if ((t.needs.water ?? 0) > (tile?.waterCover ?? 0)) unmet.push('water');
+      const foods = (['wheat', 'fruit', 'meat'] as Good[]).filter(g => (gs[g] ?? 0) > 4).length;
+      if (foods < t.needs.foodTypes) unmet.push('food variety');
+      for (const s of t.needs.services ?? []) {
+        if (now - (b.serviceT[s] ?? -99) > 2.6) unmet.push(s);
+      }
+      if ((tile?.desirability ?? 0) < t.needs.desirability) unmet.push('desirability');
+      for (const [g, qty] of Object.entries(t.needs.goods ?? {})) {
+        if ((gs[g] ?? 0) < (qty ?? 1)) unmet.push(g);
+      }
+      if ((t.needs.entertainmentPts ?? 0) > (tile?.entPts ?? 0)) unmet.push('grand entertainment');
+      return { ok: unmet.length === 0, unmet };
+    };
+
+    const curOk = evalTier(tierIdx).ok;
+    const canUp = tierIdx < HOUSE_TIERS.length - 1 && evalTier(tierIdx + 1).ok;
+
+    if (canUp && b.residents >= Math.ceil(maxResidentsOf(b) * 0.75)) {
+      b.houseLevel++;
+      b.devolveTimer = 0;
+      if (b.houseLevel >= 4) addMsg(c, `A ${HOUSE_TIERS[b.houseLevel].name} has risen in your city!`, 'good', '🏠');
+      Sfx.play('evolve');
+    } else if (!curOk) {
+      b.devolveTimer++;
+      if (b.devolveTimer > tier.devolveMonthsGrace) {
+        b.devolveTimer = 0;
+        if (b.houseLevel > 0) { b.houseLevel--; addMsg(c, `Housing declined to ${HOUSE_TIERS[b.houseLevel].name}.`, 'warn', '📉'); }
+        else if (b.residents > 0 && (b.hungerMonths ?? 0) > 3) {
+          // abandon
+          c.stats.totalDeaths += Math.min(b.residents, 3);
+          b.residents = Math.max(0, b.residents - 4);
+        }
+      }
+    } else b.devolveTimer = 0;
+
+    // starvation deaths
+    if ((b.hungerMonths ?? 0) >= 4 && b.residents > 0) {
+      const starve = Math.max(1, Math.round(b.residents * 0.12));
+      b.residents -= starve;
+      c.stats.totalDeaths += starve;
+      b.hungerMonths = 2;
+      if (c.month - lastStarveMsg >= 4) {
+        lastStarveMsg = c.month;
+        addMsg(c, 'Citizens are starving!', 'danger', '💀');
+      }
+    }
+    // emigration when angry
+    if (c.sentiment < 22 && b.residents > 4 && rng.chance(0.25)) b.residents -= 2;
+
+    popTotal += b.residents;
+
+    // ratings inputs
+    if (b.residents > 0) {
+      const cultParts: number[] = [];
+      for (const s of ['religion', 'education', 'entertainment', 'health'] as const) {
+        cultParts.push(now - (b.serviceT[s] ?? -99) < 2.6 ? 1 : 0);
+      }
+      cultureSum += cultParts.reduce((a, v) => a + v, 0) / 4 * b.residents;
+      cultureN += b.residents;
+      propSum += (tierIdx / (HOUSE_TIERS.length - 1)) * b.residents;
+      propN += b.residents;
+    }
+  }
+  c.population = popTotal;
+  const cultAvg = cultureN ? cultureSum / cultureN : 0;
+  c.ratings.culture = Math.round(clamp(cultAvg * 100, 0, 100));
+  const unemploymentPenalty = c.population > 60 ? clamp((c.unemploymentPct - 24) * 0.55, 0, 16) : 0;
+  c.ratings.prosperity = Math.round(clamp(propN ? (propSum / propN) * 115 - unemploymentPenalty : 0, 0, 100));
+
+  // immigration attempts — nobody moves to a starving town
+  let starvingHouses = 0;
+  for (const b2 of c.buildings.values()) {
+    if (!b2.ruin && def(b2.def).housing !== undefined && (b2.hungerMonths ?? 0) > 0) starvingHouses++;
+  }
+  const foodInStores = totalStored(c, 'wheat') + totalStored(c, 'fruit') + totalStored(c, 'meat');
+  if (starvingHouses === 0 || foodInStores > 100) {
+    const vacancies = countVacancies(c);
+    const attempts = clamp(Math.ceil(vacancies / 6), 0, 5);
+    for (let i = 0; i < attempts; i++) {
+      if (!trySpawnImmigrant(c)) break;
+    }
+  }
+}
+
+function countVacancies(c: CityState): number {
+  let n = 0;
+  for (const b of c.buildings.values()) {
+    if (b.ruin || def(b.def).housing === undefined) continue;
+    n += Math.max(0, maxResidentsOf(b) - b.residents - incomingFor(c, b.id));
+  }
+  return n;
+}
+
+// ── taxes & wages ───────────────────────────────────────────────────────────
+function taxesAndWages(c: CityState) {
+  const now = simMonths(c);
+  let taxes = 0;
+  for (const b of c.buildings.values()) {
+    if (b.ruin || def(b.def).housing === undefined || b.residents <= 0) continue;
+    const taxCovered = now - (b.serviceT['tax'] ?? -999) < 4;
+    if (!taxCovered) continue;
+    taxes += b.residents * incomePerResident(b.houseLevel) * (c.taxRate / 9);
+  }
+  const wages = c.employed * c.wageRate * 1.0;
+  c.funds += Math.round(taxes - wages);
+  if (Math.abs(taxes - wages) > 40) bus.emit('fundsChanged', undefined);
+  return { taxes: Math.round(taxes), wages: Math.round(wages) };
+}
+
+// ── sentiment ───────────────────────────────────────────────────────────────
+function sentimentTick(c: CityState) {
+  let target = 62;
+  target += c.taxRate < 9 ? (9 - c.taxRate) * 1.6 : -(c.taxRate - 9) * 2.2;
+  target -= clamp(c.unemploymentPct - 15, 0, 40) * 0.8;
+  let starving = 0, fed = 0;
+  for (const b of c.buildings.values()) {
+    if (def(b.def).housing === undefined || b.ruin) continue;
+    if ((b.hungerMonths ?? 0) > 0) starving += b.residents; else fed += b.residents;
+  }
+  if (fed + starving > 0) target -= (starving / (fed + starving)) * 45;
+  if (c.funds < 0) target -= 10;
+  c.sentiment = Math.round(clamp(c.sentiment + (target - c.sentiment) * 0.25, 0, 100));
+}
+
+// ── trade ───────────────────────────────────────────────────────────────────
+function tradeTick(c: CityState) {
+  if (c.month % 3 !== 0) return;
+  const posts = [...c.buildings.values()].filter(b => b.def === 'tradingPost' && buildingActive(b) && !b.ruin);
+  if (!posts.length) return;
+  for (const tc of c.trades) {
+    if (!tc.open) continue;
+    let traded = 0;
+    for (const g of tc.exports) {
+      const surplus = totalStored(c, g) - 120;
+      if (surplus <= 0) continue;
+      const sellQty = Math.min(surplus, 150);
+      takeGoodsFromStores(c, g, sellQty);
+      const gain = Math.round(sellQty * GOODS[g].basePrice * 0.85 * tc.priceFactor / 10);
+      c.funds += gain;
+      traded += gain;
+    }
+    // imports (player-toggled)
+    for (const g of tc.imports) {
+      if (c.funds < 400) break;
+      const cost = Math.round(120 * GOODS[g].basePrice * 1.15 * tc.priceFactor / 10);
+      c.funds -= cost;
+      addGoodsToStores(c, g, 120);
+      traded -= cost;
+    }
+    if (traded !== 0) {
+      const post = posts[c.month % posts.length];
+      const acc = post;
+      const ep = c.entryPoints[rng.int(0, c.entryPoints.length - 1)];
+      const goal = roadAccessOf(c, acc) ?? { x: acc.x, y: acc.y + acc.h };
+      const p = landPath(c, ep, goal);
+      if (p) {
+        spawnWalker(c, {
+          kind: 'caravan', x: ep.x + 0.5, y: ep.y + 0.5, homeId: acc.id,
+          path: p.slice(1), state: 'walkOut', speed: 1.4,
+        });
+      }
+    }
+  }
+}
+
+// ── fire & collapse ─────────────────────────────────────────────────────────
+function disasterRoll(c: CityState) {
+  reseed(c);
+  const now = simMonths(c);
+  for (const b of [...c.buildings.values()]) {
+    if (b.ruin || b.burning > 0) continue;
+    const d = def(b.def);
+    if (d.fireRisk <= 0 && d.collapseRisk <= 0) continue;
+    const prefectRecent = now - (b.serviceT['prefect'] ?? -99) < 2.2;
+    const engRecent = now - (b.serviceT['engineer'] ?? -99) < 2.2;
+    if (d.fireRisk > 0 && rng.chance(d.fireRisk * 0.09 * (prefectRecent ? 0.12 : 1))) {
+      igniteBuilding(c, b, 'fire');
+    } else if (d.collapseRisk > 0 && rng.chance(d.collapseRisk * 0.07 * (engRecent ? 0.1 : 1))) {
+      ruinBuilding(c, b, 'collapse');
+    }
+  }
+}
+
+export function igniteBuilding(c: CityState, b: Building, cause: 'fire' | 'lightning' | 'monster') {
+  if (b.ruin || b.burning > 0) return;
+  if (def(b.def).cat === 'military' && b.def === 'wall') return; // walls don't burn
+  b.burning = 40 + rng.next() * 25;
+  const t = c.tiles[b.y * c.W + b.x];
+  if (t) t.fireFervor = 1;
+  if (cause !== 'monster') addMsg(c, `Fire at ${def(b.def).name}!`, 'danger', '🔥');
+  Sfx.play('fire');
+}
+
+export function ruinBuilding(c: CityState, b: Building, cause: 'collapse' | 'burned' | 'monster' | 'enemy') {
+  if (b.ruin) return;
+  b.ruin = true;
+  b.burning = 0;
+  b.residents = 0;
+  b.workersLive = 0;
+  for (const w of c.walkers.values()) if (w.homeId === b.id && !w.unit) w.dead = true;
+  FX.blast(b.x + b.w / 2, b.y + b.h / 2, Math.max(b.w, b.h) * 0.8, cause === 'collapse' ? '#b8ab88' : '#ff9a40', 0.7);
+  const label = cause === 'collapse' ? 'collapsed' : cause === 'burned' ? 'burned down' : 'was destroyed';
+  addMsg(c, `${def(b.def).name} ${label}!`, 'danger', '💥');
+  reassignLabor(c);
+  Sfx.play('crumble');
+}
+
+// continuous fire growth/spread — called each frame with dt
+export function updateFireImpl(c: CityState, dt: number) {
+  for (const b of [...c.buildings.values()]) {
+    if (b.burning > 0 && !b.ruin) {
+      b.burning -= dt;
+      const cx = b.x + b.w / 2, cy = b.y + b.h / 2;
+      if (rng.chance(dt * 2)) FX.spark(cx, cy, 'rgba(255,170,60,.85)', 1, 22, -30);
+      if (b.burning <= 0) ruinBuilding(c, b, 'burned');
+      // spread fervor
+      const t = c.tiles[b.y * c.W + b.x];
+      if (t) t.fireFervor = Math.min(1.5, t.fireFervor + dt * 0.08);
+    }
+  }
+  // fervor spread monthly-ish granularity via accumulation
+  fireAccum += dt;
+  if (fireAccum >= 2) {
+    fireAccum = 0;
+    for (let y = 0; y < c.H; y++) for (let x = 0; x < c.W; x++) {
+      const t = c.tiles[y * c.W + x];
+      if (t.fireFervor > 0.9) {
+        const b = t.bld ? c.buildings.get(t.bld) : undefined;
+        if (b && !b.ruin && b.burning <= 0 && rng.chance(0.25)) igniteBuilding(c, b, 'fire');
+        // spread to neighbors
+        for (const [dx, dy] of [[1, 0], [-1, 0], [0, 1], [0, -1]] as const) {
+          const nt = c.tiles[(y + dy) * c.W + (x + dx)];
+          if (nt && nt.terrain !== 'water') nt.fireFervor = Math.min(0.85, nt.fireFervor + 0.12);
+        }
+      } else if (t.fireFervor > 0) {
+        t.fireFervor = Math.max(0, t.fireFervor - 0.06);
+      }
+    }
+  }
+}
+let fireAccum = 0;
+
+// ── scheduled events ────────────────────────────────────────────────────────
+function scheduledEvents(c: CityState, sc: Scenario) {
+  const absMonth = c.month;
+  for (const inv of sc.invasions) {
+    const at = inv.atYearMonth[0] * 12 + inv.atYearMonth[1];
+    if (absMonth === at - inv.warnMonths) {
+      addMsg(c, `Scouts warn: raiders approach in ${inv.warnMonths} months!`, 'warn', '🛡️');
+    }
+    if (absMonth === at) {
+      trySpawnInvasion(c, inv.kind, inv.squads, inv.size, inv.fromEdge ?? 'random');
+    }
+  }
+  for (const me of sc.monsterEvents) {
+    const at = me.atYearMonth[0] * 12 + me.atYearMonth[1];
+    if (absMonth === at - me.warnMonths) {
+      addMsg(c, `The auguries scream: a monster stirs (${me.kind}).`, 'danger', '🐲');
+    }
+    if (absMonth === at) spawnMonsterWave(c, me.kind, me.squads, me.size);
+  }
+  // sandbox scaling waves
+  if (sc.goals.length === 0 && sc.invasions.length === 0 && c.month > 16 && c.month % 14 === 0) {
+    const waveN = 1 + Math.floor(c.ratings.prosperity / 25);
+    spawnMonsterWave(c, rng.pick(['barbarian', 'harpy', 'minotaur', 'hydra', 'lich'] as const), waveN, 6 + Math.floor(c.population / 80));
+    addMsg(c, 'The wilds stir against your prosperity...', 'warn', '⚠️');
+  }
+}
+
+// ── mana & research ─────────────────────────────────────────────────────────
+function manaTick(c: CityState) {
+  let gen = 0;
+  for (const b of c.buildings.values()) {
+    if (b.ruin) continue;
+    const d = def(b.def);
+    if (d.manaGen && buildingActive(b)) gen += d.manaGen;
+  }
+  c.manaMax = 50 + gen * 6;
+  c.mana = clamp(c.mana + gen * 0.35, 0, c.manaMax);
+  // research unlocks from library/arcanum
+  for (const b of c.buildings.values()) {
+    if (b.ruin) continue;
+    const d = def(b.def);
+    if (d.research && buildingActive(b)) {
+      for (const sp of d.research) {
+        if (!c.spellState.unlocked.has(sp)) {
+          c.spellState.unlocked.add(sp);
+          addMsg(c, `Your scholars unlocked the spell "${sp}"!`, 'good', '✨');
+        }
+      }
+    }
+  }
+}
+
+// ── victory / defeat ────────────────────────────────────────────────────────
+function checkVictory(c: CityState, sc: Scenario) {
+  if (c.victory) return;
+  if (c.population <= 0 && c.month > 8) {
+    c.victory = 'lost';
+    c.defeatReason = 'Your city stands empty.';
+    addMsg(c, c.defeatReason, 'danger', '☠️');
+    bus.emit('victory', { won: false, reason: c.defeatReason });
+    return;
+  }
+  if (c.funds < -1500) {
+    c.victory = 'lost';
+    c.defeatReason = 'Bankrupt! The Senate recalls you in disgrace.';
+    addMsg(c, c.defeatReason, 'danger', '☠️');
+    bus.emit('victory', { won: false, reason: c.defeatReason });
+    return;
+  }
+  if (!sc.goals.length) return;
+  const done = sc.goals.every(g => goalMet(c, g.kind, g.amount ?? 0));
+  if (done) {
+    c.victory = 'won';
+    addMsg(c, 'VICTORY! The Senate showers you in laurels!', 'good', '🏆');
+    bus.emit('victory', { won: true });
+    Sfx.play('fanfare');
+  }
+}
+
+import type { ScenarioGoal } from './types';
+export function goalMet(c: CityState, kind: ScenarioGoal['kind'], amount: number): boolean {
+  switch (kind) {
+    case 'population': return c.population >= amount;
+    case 'culture': return c.ratings.culture >= amount;
+    case 'prosperity': return c.ratings.prosperity >= amount;
+    case 'peace': return c.ratings.peace >= amount;
+    case 'favor': return c.ratings.favor >= amount;
+    case 'treasury': return c.funds >= amount;
+    case 'surviveYears': return c.month >= amount * 12;
+    case 'slayMonsters': return c.stats.monstersSlain >= amount;
+    case 'buildWonder': return [...c.buildings.values()].some(b => b.def === 'colosseum' && !b.ruin);
+    default: return false;
+  }
+}
+export function goalProgress(c: CityState, kind: ScenarioGoal['kind'], amount: number): number {
+  switch (kind) {
+    case 'population': return c.population;
+    case 'culture': return c.ratings.culture;
+    case 'prosperity': return c.ratings.prosperity;
+    case 'peace': return c.ratings.peace;
+    case 'favor': return c.ratings.favor;
+    case 'treasury': return c.funds;
+    case 'surviveYears': return Math.floor(c.month / 12);
+    case 'slayMonsters': return c.stats.monstersSlain;
+    case 'buildWonder': return [...c.buildings.values()].some(b => b.def === 'colosseum' && !b.ruin) ? 1 : 0;
+    default: return 0;
+  }
+}
+
+// ── the monthly orchestrator ────────────────────────────────────────────────
+export function monthlyTickImpl(c: CityState, sc: Scenario) {
+  c.month++;
+  if (c.month % 12 === 0) c.year++;
+  if (c.dirtyCoverage) recomputeCoverage(c);
+  reassignLabor(c);
+  produceMonthly(c);
+  cartWalkersResolve(c);
+  marketBuying(c);
+  housingTick(c);
+  const { taxes } = taxesAndWages(c);
+  sentimentTick(c);
+  tradeTick(c);
+  manaTick(c);
+  // ruins fade away on their own after 6 months
+  for (const b of [...c.buildings.values()]) {
+    if (b.ruin && c.month - (b.ruinedAt ?? c.month) >= 6) removeBuilding(c, b.id, 0);
+  }
+  scheduledEvents(c, sc);
+  peaceFavorTick(c);
+  heroMonthly(c);
+  checkVictory(c, sc);
+
+  // entertainment points cache refresh (venues coverage)
+  entPointsRefresh(c);
+
+  c.autosavePending = true;
+  bus.emit('month', { month: c.month % 12, year: c.year });
+  if (taxes > 0 && c.month % 6 === 0) FX.float(-1, -1, '', ''); // no-op keepalive
+}
+
+function cartWalkersResolve(c: CityState) {
+  // carts that could not path get resolved instantly (fallback)
+  for (const w of [...c.walkers.values()]) {
+    if (w.kind !== 'cart' && w.kind !== 'fetchCart' && w.kind !== 'marketBuyer') continue;
+    if (w.path.length === 0 && w.state === 'walkOut' && !w.dead) cartArrivals(c, w);
+  }
+}
+
+function peaceFavorTick(c: CityState) {
+  const foes = [...c.walkers.values()].filter(w => w.unit?.side === 'foe').length;
+  if (foes === 0) c.stats.monthsSinceInvasion++;
+  else { c.stats.monthsSinceInvasion = 0; c.ratings.favor = clamp(c.ratings.favor - 0.5, 0, 100); }
+  c.ratings.peace = Math.round(clamp(c.stats.monthsSinceInvasion * 2, 0, 100));
+  c.ratings.favor = clamp(c.ratings.favor + 0.15, 0, 100);
+}
+
+function entPointsRefresh(c: CityState) {
+  for (const t of c.tiles) t.entPts = 0;
+  for (const b of c.buildings.values()) {
+    if (b.ruin) continue;
+    const pts = ENT_POINTS[b.def];
+    if (!pts || !buildingActive(b)) continue;
+    const R = def(b.def).walker?.range ?? 20;
+    const cx = b.x + (b.w - 1) / 2, cy = b.y + (b.h - 1) / 2;
+    for (let y = Math.max(0, cy - R | 0); y <= Math.min(c.H - 1, cy + R); y++) {
+      for (let x = Math.max(0, cx - R | 0); x <= Math.min(c.W - 1, cx + R); x++) {
+        const dist = Math.abs(x - cx) + Math.abs(y - cy);
+        if (dist <= R) c.tiles[y * c.W + x].entPts += pts;
+      }
+    }
+  }
+}
+
+// gift torome → favor (UI action)
+export function sendGiftToRome(c: CityState): boolean {
+  const cost = 800;
+  if (c.funds < cost) return false;
+  c.funds -= cost;
+  c.ratings.favor = clamp(c.ratings.favor + 8, 0, 100);
+  addMsg(c, 'A lavish gift was sent to Rome. Favor rises.', 'good', '🎁');
+  return true;
+}

src/sim/hooks.ts

@@ -0,0 +1,21 @@
+// ─── Wires simulation module implementations into the city tick ────────────
+import { registerSimHooks } from './city';
+import { updateWalkersImpl } from './walkers';
+import { updateCombatImpl, heroProdBoostImpl } from './combat';
+import { updateMagicImpl, spellProdBoostImpl } from './magic';
+import { updateFireImpl, monthlyTickImpl, setHeroProdBoostFn, setSpellProdBoostFn } from './economy';
+
+let registered = false;
+export function ensureSimHooks() {
+  if (registered) return;
+  registered = true;
+  registerSimHooks({
+    updateWalkers: updateWalkersImpl,
+    updateCombat: updateCombatImpl,
+    updateMagic: updateMagicImpl,
+    updateFire: updateFireImpl,
+    monthlyTick: monthlyTickImpl,
+  });
+  setHeroProdBoostFn(heroProdBoostImpl);
+  setSpellProdBoostFn(spellProdBoostImpl);
+}

src/sim/magic.ts

@@ -0,0 +1,128 @@
+// ─── Magic: mana, spell casting, arcane buffs ──────────────────────────────
+import type { CityState, SpellId } from './types';
+import { SPELLS } from './types';
+import { def } from '../data/buildings';
+import { clamp } from '../core/util';
+import { addMsg, tileAt } from './city';
+import { FX, Sfx } from '../render/fx';
+import { spawnGolemAt } from './combat';
+
+export const simNow = (c: CityState) => c.month + (c.monthFloat ?? 0);
+
+export function spellReady(c: CityState, id: SpellId): boolean {
+  if (!c.spellState.unlocked.has(id)) return false;
+  return simNow(c) >= (c.spellState.cooldowns[id] ?? 0);
+}
+export function spellCooldownLeft(c: CityState, id: SpellId): number {
+  return Math.max(0, (c.spellState.cooldowns[id] ?? 0) - simNow(c));
+}
+
+export function castSpellImpl(c: CityState, id: SpellId, tx: number, ty: number): boolean {
+  const sd = SPELLS[id];
+  if (!spellReady(c, id)) return false;
+  if (c.mana < sd.mana) return false;
+
+  switch (id) {
+    case 'blessing': {
+      c.spellState.areaBuffs.push({ x: tx, y: ty, r: sd.radius, until: simNow(c) + 3 }); // ~3 months
+      FX.blast(tx, ty, sd.radius, '#8fe88a', 1.2);
+      for (let i = 0; i < 24; i++) FX.spark(tx + Math.sin(i) * sd.radius * 0.6, ty + Math.cos(i * 1.7) * sd.radius * 0.6, '#aaffaa', 1, 30, -20);
+      addMsg(c, 'Ceres blesses the fields!', 'good', '🌿');
+      break;
+    }
+    case 'firestorm': {
+      let hits = 0;
+      for (const w of [...c.walkers.values()]) {
+        if (w.unit?.side !== 'foe' || w.dead) continue;
+        const d = Math.hypot(w.x - tx, w.y - ty);
+        if (d <= sd.radius + 0.4) {
+          w.unit.hp -= 160;
+          hits++;
+          FX.spark(w.x, w.y - 1, '#ff9050', 10, 60, 60);
+        }
+      }
+      for (const w of [...c.walkers.values()]) if ((w.unit?.side === 'foe') && w.unit.hp <= 0) w.dead = true;
+      FX.blast(tx, ty, sd.radius, '#ff7040', 0.9);
+      Sfx.play('firestorm');
+      addMsg(c, `Firestorm engulfs ${hits} foes!`, hits ? 'good' : 'info', '🔥');
+      break;
+    }
+    case 'heal': {
+      for (const w of c.walkers.values()) {
+        if (w.unit?.side === 'city' && !w.dead) {
+          const d = Math.hypot(w.x - tx, w.y - ty);
+          if (d <= sd.radius) {
+            w.unit.hp = Math.min(w.unit.maxHp, w.unit.hp + w.unit.maxHp * 0.5);
+            FX.spark(w.x, w.y - 1.5, '#7fd0ff', 6, 26, -40);
+          }
+        }
+      }
+      for (const b of c.buildings.values()) {
+        if (b.burning > 0 && Math.hypot(b.x + b.w / 2 - tx, b.y + b.h / 2 - ty) <= sd.radius) {
+          b.burning = 0;
+          FX.float(b.x + b.w / 2, b.y, 'doused', '#7fd0ff');
+        }
+      }
+      FX.blast(tx, ty, sd.radius, '#7fd0ff', 1.1);
+      Sfx.play('heal');
+      break;
+    }
+    case 'haste': {
+      c.spellState.buffs.hasteUntil = simNow(c) + 4;
+      FX.float(tx, ty, "Hermes' blessing!", '#ffe9a0');
+      Sfx.play('zap');
+      break;
+    }
+    case 'shield': {
+      c.spellState.buffs.shieldUntil = simNow(c) + 5;
+      FX.float(tx, ty, 'The Aegis rises!', '#ffe9a0');
+      Sfx.play('fanfare');
+      break;
+    }
+    case 'insight': {
+      const gain = Math.round(clamp(c.population * 0.4 + c.employed * 1.2, 20, 800));
+      c.funds += gain;
+      FX.float(tx, ty, `+${gain} denarii`, '#ffe9a0');
+      Sfx.play('coin');
+      break;
+    }
+    case 'golem': {
+      // requires iron
+      let took = false;
+      for (const b of c.buildings.values()) {
+        if ((b.inv['iron'] ?? 0) >= 20) { b.inv['iron'] = (b.inv['iron'] ?? 0) - 20; took = true; break; }
+      }
+      if (!took) {
+        addMsg(c, 'A golem needs 20 iron in storage.', 'warn', '⛏️');
+        return false;
+      }
+      const t = tileAt(c, Math.round(tx), Math.round(ty));
+      if (!t || t.terrain === 'water' || t.wall) return false;
+      spawnGolemAt(c, Math.round(tx), Math.round(ty));
+      FX.blast(tx, ty, 1.6, '#9ab', 0.8);
+      break;
+    }
+  }
+
+  c.mana -= sd.mana;
+  c.spellState.cooldowns[id] = simNow(c) + sd.cooldown / 10; // cooldown seconds → ~months scale
+  return true;
+}
+
+/** Per-frame magic upkeep (buff expiry visuals). */
+export function updateMagicImpl(_c: CityState, _dt: number) {
+  // area buffs expire naturally by timestamp; nothing needed per-frame yet.
+}
+
+/** Production boost from blessing areas — injected into economy. */
+export function spellProdBoostImpl(c: CityState, x: number, y: number): number {
+  let boost = 1;
+  const now = simNow(c);
+  for (const a of c.spellState.areaBuffs) {
+    if (a.until < now) continue;
+    const d = Math.hypot(a.x + 0.5 - x, a.y + 0.5 - y);
+    if (d <= a.r) boost += 0.8;
+  }
+  void def;
+  return boost;
+}

src/sim/save.ts

@@ -0,0 +1,156 @@
+// ─── Save / Load ────────────────────────────────────────────────────────────
+import type { Building, CityState, Scenario, ServiceType } from './types';
+import { def } from '../data/buildings';
+import { generateMap, addMsg } from './city';
+import { reassignLabor, recomputeCoverage } from './city';
+import { resetHeroes } from './combat';
+
+const KEY = 'ia_save_slots_v1';
+export interface SaveSlotMeta { name: string; at: number; scenarioName: string; population: number; funds: number }
+
+export function listSaves(): Array<{ slot: string; meta: SaveSlotMeta }> {
+  try {
+    const raw = localStorage.getItem(KEY);
+    if (!raw) return [];
+    return Object.entries(JSON.parse(raw) as Record<string, SaveSlotMeta>)
+      .map(([slot, meta]) => ({ slot, meta }))
+      .sort((a, b) => b.meta.at - a.meta.at);
+  } catch { return []; }
+}
+
+function allSlots(): Record<string, { meta: SaveSlotMeta; data: unknown }> {
+  try { return JSON.parse(localStorage.getItem(KEY) ?? '{}'); } catch { return {}; }
+}
+
+export function saveCity(c: CityState, sc: Scenario, slot: string): boolean {
+  const buildings = [...c.buildings.values()].map(b => ({
+    id: b.id, def: b.def, x: b.x, y: b.y,
+    hp: b.hp ?? 100, ruin: b.ruin ? 1 : 0, burning: b.burning > 0 ? 1 : 0,
+    residents: b.residents, houseLevel: b.houseLevel,
+    inv: Object.entries(b.inv).filter(([, v]) => (v ?? 0) > 0),
+    goodsStock: b.goodsStock ? Object.entries(b.goodsStock).filter(([, v]) => (v ?? 0) > 0) : null,
+  }));
+  const data = {
+    v: 3, scenario: sc,
+    state: {
+      seed: c.seed, W: c.W, H: c.H, month: c.month, year: c.year, monthFloat: c.monthFloat ?? 0,
+      funds: c.funds, mana: c.mana, manaMax: c.manaMax, population: c.population,
+      taxRate: c.taxRate, wageRate: c.wageRate, sentiment: c.sentiment,
+      ratings: c.ratings, stats: c.stats,
+      spells: [...c.spellState.unlocked], cooldowns: c.spellState.cooldowns,
+      buffs: c.spellState.buffs,
+      trades: c.trades,
+      nextMsgId: c.nextMsgId,
+      messages: c.messages.slice(0, 30),
+    },
+    buildings,
+  };
+  const slots = allSlots();
+  slots[slot] = {
+    meta: {
+      name: sc.name, at: Date.now(),
+      scenarioName: sc.name,
+      population: c.population, funds: Math.round(c.funds),
+    },
+    data,
+  };
+  try { localStorage.setItem(KEY, JSON.stringify(slots)); return true; } catch { return false; }
+}
+
+export function deleteSave(slot: string) {
+  const slots = allSlots();
+  delete slots[slot];
+  localStorage.setItem(KEY, JSON.stringify(slots));
+}
+
+export type LoadedCity = { city: CityState; scenario: Scenario };
+
+export function loadCity(slot: string): LoadedCity | null {
+  const rec = allSlots()[slot];
+  if (!rec) return null;
+  try {
+    const d = rec.data as {
+      v: number; scenario: Scenario;
+      state: Record<string, unknown> & {
+        ratings: CityState['ratings']; stats: CityState['stats'];
+        spells: string[]; cooldowns: Record<string, number>;
+        buffs: { hasteUntil: number; shieldUntil: number };
+        trades: CityState['trades']; messages: CityState['messages'];
+        spellAreas?: Array<{ x: number; y: number; r: number; until: number }>;
+      };
+      buildings: Array<Partial<Building> & { inv: [string, number][]; goodsStock: [string, number][] | null }>;
+      flags?: string;
+    };
+    const sc = d.scenario;
+
+    // fresh base
+    const gen = generateMap(sc);
+    const tiles = gen.tiles;
+    // restore surface flags
+    if (d.flags) {
+      const fl = d.flags;
+      for (let i = 0; i < Math.min(fl.length, tiles.length); i++) {
+        const ch = fl[i];
+        if (ch === '1') tiles[i].road = true;
+        else if (ch === '2') tiles[i].plaza = true;
+        else if (ch === '3') tiles[i].garden = true;
+      }
+    }
+    const city: CityState = {
+      scenarioId: sc.id,
+      seed: d.state.seed as number, W: d.state.W as number, H: d.state.H as number,
+      month: d.state.month as number, year: d.state.year as number, monthFloat: d.state.monthFloat as number,
+      funds: d.state.funds as number, mana: d.state.mana as number, manaMax: d.state.manaMax as number,
+      population: 0,
+      taxRate: d.state.taxRate as number, wageRate: d.state.wageRate as number,
+      laborers: 0, employed: 0, unemploymentPct: 0,
+      sentiment: d.state.sentiment as number,
+      ratings: { ...d.state.ratings },
+      buildings: new Map(), nextBldId: 1,
+      walkers: new Map(), nextWalkerId: 1,
+      tiles, messages: [], nextMsgId: d.state.nextMsgId as number,
+      trades: d.state.trades.map(t => ({ ...t })),
+      spellState: {
+        unlocked: new Set(d.state.spells as import('./types').SpellId[]),
+        cooldowns: { ...d.state.cooldowns },
+        buffs: { ...d.state.buffs },
+        areaBuffs: d.state.spellAreas ?? [],
+      },
+      stats: { ...d.state.stats },
+      entryPoints: gen.entryPoints,
+      victory: null, paused: false, speedIdx: 2,
+      dirtyCoverage: true,
+    };
+
+    // restore buildings
+    for (const rb of d.buildings) {
+      const dd = def(rb.def!);
+      const b: Building = {
+        id: rb.id!, def: rb.def!, x: rb.x!, y: rb.y!, w: dd.w, h: dd.h,
+        workersLive: 0, progress: 0, inv: {},
+        serviceT: {}, walkerTimers: new Array(dd.walker?.count ?? 0).fill(dd.walker?.period ?? 0),
+        burning: rb.burning ? 20 : 0, ruin: !!rb.ruin, active: false, hp: rb.hp ?? 100,
+        houseLevel: rb.houseLevel ?? 0, residents: rb.ruin ? 0 : rb.residents ?? 0,
+        devolveTimer: 0, fetchQueue: [], goodsStock: {},
+      };
+      for (const [g, q] of rb.inv ?? []) (b.inv as Record<string, number>)[g] = q;
+      if (rb.goodsStock) for (const [g, q] of rb.goodsStock) b.goodsStock![g] = q;
+      city.buildings.set(b.id, b);
+      city.nextBldId = Math.max(city.nextBldId, b.id + 1);
+      for (let dy = 0; dy < dd.h; dy++) for (let dx = 0; dx < dd.w; dx++) {
+        const t = gen.tiles[(rb.y! + dy) * sc.mapW + (rb.x! + dx)];
+        if (t) t.bld = b.id;
+      }
+    }
+    city.population = [...city.buildings.values()].reduce((a, b) => a + b.residents, 0);
+    recomputeCoverage(city);
+    reassignLabor(city);
+    resetHeroes();
+    city.messages = d.state.messages.map(m => ({ ...m }));
+    addMsg(city, 'The chronicle resumes...', 'info', '📜');
+    return { city, scenario: sc };
+  } catch (e) {
+    console.error('load failed', e);
+    return null;
+  }
+}

src/sim/types.ts

@@ -0,0 +1,264 @@
+// ─── Imperium Arcanum — core simulation types ──────────────────────────────
+
+export type Good =
+  | 'wheat' | 'fruit' | 'olives' | 'grapes' | 'meat'
+  | 'clay' | 'timber' | 'iron' | 'crystal'
+  | 'pottery' | 'furniture' | 'oil' | 'wine' | 'weapons';
+
+export interface GoodInfo { name: string; icon: string; color: string; food: boolean; basePrice: number; }
+export const GOODS: Record<Good, GoodInfo> = {
+  wheat:    { name: 'Wheat',    icon: '🌾', color: '#d9b44a', food: true,  basePrice: 22 },
+  fruit:    { name: 'Fruit',    icon: '🍎', color: '#c94f3d', food: true,  basePrice: 24 },
+  olives:   { name: 'Olives',   icon: '🫒', color: '#7a8b3f', food: false, basePrice: 26 },
+  grapes:   { name: 'Grapes',   icon: '🍇', color: '#8e4a9e', food: false, basePrice: 28 },
+  meat:     { name: 'Meat',     icon: '🍖', color: '#b0563f', food: true,  basePrice: 34 },
+  clay:     { name: 'Clay',     icon: '🧱', color: '#b3714f', food: false, basePrice: 18 },
+  timber:   { name: 'Timber',   icon: '🪵', color: '#8a6238', food: false, basePrice: 20 },
+  iron:     { name: 'Iron',     icon: '⛏️', color: '#8d93a1', food: false, basePrice: 40 },
+  crystal:  { name: 'Crystal',  icon: '💎', color: '#6fd6e0', food: false, basePrice: 55 },
+  pottery:  { name: 'Pottery',  icon: '🏺', color: '#c07a45', food: false, basePrice: 60 },
+  furniture:{ name: 'Furniture',icon: '🪑', color: '#a97c3f', food: false, basePrice: 65 },
+  oil:      { name: 'Oil',      icon: '🫗', color: '#c8b23c', food: false, basePrice: 70 },
+  wine:     { name: 'Wine',     icon: '🍷', color: '#93325f', food: false, basePrice: 75 },
+  weapons:  { name: 'Weapons',  icon: '⚔️', color: '#aab2c0', food: false, basePrice: 90 },
+};
+export const ALL_GOODS = Object.keys(GOODS) as Good[];
+export const FOODS: Good[] = ['wheat', 'fruit', 'meat'];
+
+export type Terrain = 'grass' | 'fertile' | 'water' | 'tree' | 'rock' | 'iron' | 'clay' | 'crystal';
+
+export type ServiceType =
+  | 'water' | 'market' | 'religion' | 'entertainment' | 'education' | 'health'
+  | 'tax' | 'prefect' | 'engineer';
+
+export type BuildCategory =
+  | 'housing' | 'food' | 'industry' | 'storage' | 'civic' | 'religion'
+  | 'entertainment' | 'education' | 'health' | 'military' | 'magic' | 'heroes' | 'trade' | 'decor';
+
+export type SpellId =
+  | 'blessing' | 'firestorm' | 'heal' | 'haste' | 'golem' | 'shield' | 'insight';
+
+export interface SpellDef {
+  id: SpellId; name: string; icon: string; mana: number; cooldown: number; // seconds
+  range: number; radius: number; desc: string; needsResearch?: boolean;
+}
+
+export const SPELLS: Record<SpellId, SpellDef> = {
+  blessing: { id:'blessing', name:"Blessing of Ceres", icon:'🌿', mana:30, cooldown:20, range:12, radius:5,
+    desc:'+80% farm & workshop output in area for 90 days.' },
+  firestorm:{ id:'firestorm', name:'Firestorm', icon:'🔥', mana:55, cooldown:30, range:14, radius:3.2,
+    desc:'Rains arcane fire on enemies and monsters in the target area.' },
+  heal:     { id:'heal', name:'Healing Rain', icon:'💧', mana:35, cooldown:25, range:12, radius:4,
+    desc:'Heals your soldiers & heroes and douses fires in the area.' },
+  haste:    { id:'haste', name:'Hermes\' Haste', icon:'💨', mana:25, cooldown:18, range:99, radius:0,
+    desc:'All citizens walk +50% faster for 120 days.' },
+  golem:    { id:'golem', name:'Summon Golem', icon:'🗿', mana:70, cooldown:60, range:10, radius:0,
+    desc:'Raises a stone golem (needs 20 iron in a warehouse) that defends the city.' , needsResearch:true},
+  shield:   { id:'shield', name:'Aegis Ward', icon:'🛡️', mana:50, cooldown:45, range:99, radius:0,
+    desc:'City walls & towers deal double damage for 150 days.' , needsResearch:true},
+  insight:  { id:'insight', name:'Divine Insight', icon:'🔮', mana:20, cooldown:15, range:99, radius:0,
+    desc:'Instantly collects pending taxes and reveals the whole empire map.' },
+};
+
+export type HeroId = 'champion' | 'huntress' | 'stormcaller';
+export interface HeroDef {
+  id: HeroId; name: string; title: string; icon: string;
+  costGold: number; costGood?: { good: Good; qty: number };
+  hp: number; dmg: number; ranged: boolean; speed: number;
+  auraProd: number; // % industry boost nearby
+  desc: string;
+}
+export const HEROES: Record<HeroId, HeroDef> = {
+  champion:   { id:'champion', name:'Aurelius', title:'the Champion', icon:'⚔️',
+    costGold:800, hp:600, dmg:34, ranged:false, speed:1.05, auraProd:10,
+    desc:'An unbreakable swordsman. Holds the line against monsters and invaders.' },
+  huntress:   { id:'huntress', name:'Lyra', title:'the Huntress', icon:'🏹',
+    costGold:650, costGood:{good:'weapons',qty:10}, hp:380, dmg:22, ranged:true, speed:1.35, auraProd:8,
+    desc:'Deadly at range, swift as the wind. Picks monsters apart from afar.' },
+  stormcaller:{ id:'stormcaller', name:'Magnus', title:'the Stormcaller', icon:'⚡',
+    costGold:900, costGood:{good:'crystal',qty:15}, hp:300, dmg:46, ranged:true, speed:0.95, auraProd:15,
+    desc:'Wields the storm itself. Devastating area blasts — fragile but glorious.' },
+};
+
+export type MonsterKind = 'hydra' | 'minotaur' | 'harpy' | 'lich' | 'skeleton' | 'barbarian' | 'legion' | 'golem';
+export type UnitKind = MonsterKind | 'soldiers' | 'hero' | 'caravan';
+export interface UnitStats { hp:number; dmg:number; speed:number; ranged:boolean; range:number; atkCd:number; }
+
+// ── Buildings ───────────────────────────────────────────────────────────────
+export interface BDef {
+  key: string;                 // unique
+  name: string;
+  cat: BuildCategory;
+  w: number; h: number;
+  cost: number;                // denarii
+  desirability: number;        // -10..+10 emitted at center, decays over distance
+  desRange: number;
+  workers: number;             // jobs provided (0 = none)
+  fireRisk: number;            // 0..1 monthly chance factor
+  collapseRisk: number;
+  spriteKey: string;
+  hotkey?: string;
+  // production / storage / service:
+  produces?: { good: Good; rate: number };       // units per month at full staff (rate=units)
+  consumes?: Partial<Record<Good, number>>;      // per produced batch
+  storage?: { goods: Good[]; capacity: number };// granary/warehouse/market stock
+  service?: ServiceType[];                        // walkers provide these when staffed
+  walker?: { kind: WalkerKind; count: number; period: number; range?: number };
+  housing?: { level: number };                    // is a house of tier
+  maxLevel?: number;                              // house evolution cap by building itself? (unused)
+  roadAccess: boolean;                            // requires adjacency to road
+  unique?: boolean;
+  blurb: string;
+  // military / magic:
+  tower?: UnitStats;
+  fort?: boolean;
+  heroHall?: boolean;
+  mageTower?: UnitStats;
+  manaGen?: number;             // +mana capacity/month
+  research?: SpellId[];
+}
+
+export type WalkerKind =
+  | 'immigrant' | 'emigrant' | 'cart' | 'fetchCart' | 'marketBuyer' | 'peddler'
+  | 'priest' | 'actor' | 'teacher' | 'doctor' | 'prefect' | 'engineer'
+  | 'taxman' | 'laborSeeker' | 'soldiers' | 'enemy' | 'monster' | 'hero' | 'golemUnit' | 'caravan' | 'mage';
+
+export interface Walker {
+  id: number;
+  kind: WalkerKind;
+  x: number; y: number;          // float tile coords
+  homeId: number;                // building id
+  path: Array<{ x: number; y: number }>;
+  pathI: number;
+  speed: number;                  // tiles/sec
+  state: 'walkOut' | 'wander' | 'returning' | 'despawn' | 'fighting';
+  timer: number;                  // generic seconds
+  wanderStepsLeft: number;
+  cargo?: Partial<Record<Good, number>>;
+  carryCap?: number;
+  group?: number;                // immigrants in group
+  rallyX?: number; rallyY?: number;   // city-unit patrol point
+  targetBld?: number;             // destination building id
+  // combat units:
+  unit?: { kind: UnitKind; hp: number; maxHp: number; stats: UnitStats; cd: number; side: 'city' | 'foe'; squadSize?: number; targetId?: number };
+  heroId?: HeroId; heroLevel?: number; heroXp?: number;
+  animT: number;                  // animation phase
+  facing: 1 | -1;
+  dead?: boolean;
+}
+
+export interface Building {
+  id: number;
+  def: string;                   // BuildingDef.key
+  x: number; y: number; w: number; h: number;
+  workersLive: number;           // assigned workers
+  progress: number;              // 0..1 production progress toward output
+  inv: Partial<Record<Good, number>>;
+  serviceT: Partial<Record<ServiceType, number>>; // last time each service walker left
+  walkerTimers: number[];        // per-walker spawn timers
+  burning: number;               // >0 = on fire (seconds of fuel left)
+  ruin: boolean;
+  active: boolean;               // has needed input/road/workers to run
+  hp?: number;                   // military integrity 0..100
+  noRoad?: boolean;              // placed but not connected to a road yet
+  ruinedAt?: number;             // sim-month when it became a ruin
+  houseLevel: number;            // current evolution tier (houses)
+  residents: number;
+  devolveTimer: number;
+  foodStock?: number;            // house pantry
+  goodsStock?: Partial<Record<string, number>>;   // house luxury goods
+  hungerMonths?: number;
+  fetchQueue: Good[];            // raw goods requested
+  lastTaxedMonth?: number;
+  heroCooldowns?: Partial<Record<HeroId, number>>;
+  spellCooldowns?: Partial<Record<string, number>>;
+  rallyX?: number; rallyY?: number;
+}
+
+export interface Tile {
+  terrain: Terrain;
+  bld: number;                   // building id or 0
+  road: boolean;
+  plaza: boolean;
+  garden: boolean;
+  wall: number;                  // wall building id (also bld)
+  fert: number;                  // 0..100 farm fertility
+  desirability: number;          // cached
+  entPts: number;                // cached entertainment venue points covering
+  fireFervor: number;            // spreading fire fuel
+  waterCover: number;            // well/fountain coverage cache
+  variant: number;               // random visual variant
+}
+
+export interface Message {
+  id: number; month: number; year: number;
+  icon: string; text: string; kind: 'info' | 'warn' | 'danger' | 'good';
+}
+
+export interface ScenarioGoal {
+  kind: 'population' | 'culture' | 'prosperity' | 'peace' | 'favor' | 'treasury' | 'surviveYears' | 'slayMonsters' | 'buildWonder';
+  amount?: number; label?: string;
+}
+
+export interface InvasionEvent { atYearMonth: [number, number]; kind: MonsterKind; squads: number; size: number; warnMonths: number; fromEdge?: 'n'|'s'|'e'|'w'|'random'; }
+
+export interface Scenario {
+  id: string; name: string; subtitle: string; brief: string;
+  mapSeed: number; mapW: number; mapH: number;
+  funds: number; startRes?: Partial<Record<Good, number>>;
+  goals: ScenarioGoal[];
+  invasions: InvasionEvent[]; monsterEvents: InvasionEvent[];
+  openTrades: string[];         // city names available
+  allowSpellsFromStart: boolean;
+  hints: string[];
+  reward?: string;              // unlock text
+}
+
+export interface TradeCity {
+  name: string;
+  buys: Good[];                 // goods the partner city offers to sell us (flavor/UI)
+  wants: Good[];                // goods the partner city will buy from us (flavor/UI)
+  exports: Good[];              // our toggled export list
+  imports: Good[];              // our toggled import list
+  open: boolean; priceFactor: number;
+}
+
+export interface CityState {
+  scenarioId: string;
+  seed: number; W: number; H: number;
+  month: number; year: number;   // absolute months since founding; display year = year
+  funds: number;
+  mana: number; manaMax: number;
+  population: number;
+  taxRate: number; wageRate: number;
+  laborers: number; employed: number; unemploymentPct: number;
+  sentiment: number;             // 0..100
+  ratings: { culture: number; prosperity: number; peace: number; favor: number };
+  buildings: Map<number, Building>;
+  nextBldId: number;
+  walkers: Map<number, Walker>;
+  nextWalkerId: number;
+  tiles: Tile[];                 // W*H
+  messages: Message[];
+  nextMsgId: number;
+  trades: TradeCity[];
+  spellState: {
+    unlocked: Set<SpellId>;
+    cooldowns: Record<string, number>;   // spellId -> absolute sim-month when ready
+    buffs: { hasteUntil: number; shieldUntil: number };
+    areaBuffs: Array<{ x: number; y: number; r: number; until: number }>;
+  };
+  stats: {
+    monthsSinceInvasion: number; monstersSlain: number; invadersSlain: number;
+    totalDeaths: number;
+  };
+  entryPoints: Array<{ x: number; y: number }>;
+  victory: null | 'won' | 'lost';
+  defeatReason?: string;
+  paused: boolean;
+  speedIdx: number;              // 0..3 → multipliers
+  monthFloat?: number;
+  dirtyCoverage: boolean;        // recompute desirability/water caches
+  autosavePending?: boolean;
+  pendingStartRes?: Partial<Record<Good, number>>;
+}

src/sim/walkers.ts

@@ -0,0 +1,361 @@
+// ─── Walkers: spawning, movement, service delivery ─────────────────────────
+import type { Building, CityState, ServiceType, Walker } from './types';
+import { GOODS, type Good } from './types';
+import { def } from '../data/buildings';
+import { HOUSE_TIERS } from '../data/housing';
+import { astarPath, bfsPath, type Pt } from '../core/pathfind';
+import { bldAt, buildingActive, hasRoadAccess, inB, roadAccessPoint, tileAt, bus } from './city';
+import { cartArrivals } from './economy';
+import { FX } from '../render/fx';
+
+export const simMonths = (c: CityState) => c.month + (c.monthFloat ?? 0);
+
+export function spawnWalker(c: CityState, w: Partial<Walker> & { kind: Walker['kind']; x: number; y: number }): Walker {
+  const walker: Walker = {
+    id: c.nextWalkerId++, kind: w.kind, x: w.x, y: w.y,
+    homeId: w.homeId ?? 0,
+    path: w.path ?? [], pathI: 0,
+    speed: w.speed ?? 1.6,
+    state: w.state ?? 'walkOut',
+    timer: 0, wanderStepsLeft: w.wanderStepsLeft ?? 0,
+    animT: Math.random() * 10, facing: 1,
+    cargo: w.cargo, carryCap: w.carryCap,
+    targetBld: w.targetBld,
+    unit: w.unit, heroId: w.heroId, heroLevel: w.heroLevel ?? 1, heroXp: w.heroXp ?? 0,
+    dead: false,
+  };
+  c.walkers.set(walker.id, walker);
+  return walker;
+}
+
+const SERVICE_KINDS = new Set(['prefect', 'engineer', 'priest', 'actor', 'teacher', 'doctor', 'taxman', 'peddler']);
+const isService = (k: string) => SERVICE_KINDS.has(k);
+
+// ── passability ─────────────────────────────────────────────────────────────
+function roadPassable(c: CityState) {
+  return (x: number, y: number) => {
+    if (!inB(c, x, y)) return false;
+    const t = tileAt(c, x, y)!;
+    return t.road || t.plaza;
+  };
+}
+function landPassable(c: CityState, allowWalls = false) {
+  return (x: number, y: number) => {
+    if (!inB(c, x, y)) return false;
+    const t = tileAt(c, x, y)!;
+    if (t.terrain === 'water') return false;
+    if (t.wall && !allowWalls) return false;
+    if (t.bld && !t.wall) return false; // buildings block overland travel
+    return true;
+  };
+}
+
+/** Path a walker along roads from its current tile to target tile. */
+export function roadPath(c: CityState, from: Pt, to: Pt): Pt[] | null {
+  return bfsPath(c.W, c.H, from, to, roadPassable(c));
+}
+export function landPath(c: CityState, from: Pt, to: Pt): Pt[] | null {
+  return astarPath(c.W, c.H, from, to, landPassable(c));
+}
+
+// ── service walkers ─────────────────────────────────────────────────────────
+export function tickServiceSpawns(c: CityState, dt: number) {
+  for (const b of c.buildings.values()) {
+    if (b.ruin) continue;
+    const d = def(b.def);
+    if (!d.walker || !d.walker.count || !d.service?.length) continue;
+    const nAlive = aliveWalkersFor(c, b.id).length;
+    for (let i = 0; i < d.walker.count; i++) {
+      if (nAlive >= d.walker.count) break;
+      if (i >= b.walkerTimers.length) b.walkerTimers[i] = d.walker.period * Math.random();
+      b.walkerTimers[i] -= dt * (buildingActive(b) ? 1 : 0.15); // unstaffed buildings rarely send walkers
+      if (b.walkerTimers[i] <= 0) {
+        b.walkerTimers[i] = d.walker.period;
+        spawnServiceWalker(c, b, d.service);
+      }
+    }
+  }
+}
+
+export function aliveWalkersFor(c: CityState, homeId: number): Walker[] {
+  const out: Walker[] = [];
+  for (const w of c.walkers.values()) if (w.homeId === homeId && !w.dead && isService(w.kind)) out.push(w);
+  return out;
+}
+
+function spawnServiceWalker(c: CityState, b: Building, services: ServiceType[]) {
+  const acc = roadAccessPoint(c, b);
+  if (!acc || !hasRoadAccess(c, b.x, b.y, b.w, b.h)) return;
+  const kindMap: Record<string, Walker['kind']> = {
+    prefect: 'prefect', engineer: 'engineer', religion: 'priest', entertainment: 'actor',
+    education: 'teacher', health: 'doctor', tax: 'taxman', market: 'peddler', water: 'laborSeeker',
+  };
+  let kind: Walker['kind'] = 'laborSeeker';
+  for (const s of services) { kind = kindMap[s] ?? 'laborSeeker'; break; }
+  const d = def(b.def);
+  const w = spawnWalker(c, {
+    kind, x: acc.x + 0.5, y: acc.y + 0.5, homeId: b.id,
+    state: 'wander',
+    wanderStepsLeft: (d.walker?.range ?? 20) * 2,
+    speed: 1.55,
+  });
+  // peddler loads goods
+  if (kind === 'peddler') loadPeddler(c, b, w);
+  void services;
+}
+
+function loadPeddler(c: CityState, mkt: Building, w: Walker) {
+  const cargo: Partial<Record<Good, number>> = {};
+  let foodLeft = 80;
+  for (const g of ['wheat', 'fruit', 'meat'] as Good[]) {
+    const have = mkt.inv[g] ?? 0;
+    if (have > 0 && foodLeft > 0) { const take = Math.min(have, foodLeft, 45); cargo[g] = take; foodLeft -= take; }
+  }
+  for (const g of ['pottery', 'furniture', 'oil', 'wine'] as Good[]) {
+    const have = mkt.inv[g] ?? 0;
+    if (have > 0) cargo[g] = Math.min(have, 6);
+  }
+  w.cargo = cargo;
+  for (const [g, q] of Object.entries(cargo)) mkt.inv[g as Good] = (mkt.inv[g as Good] ?? 0) - q!;
+}
+
+// ── movement core ───────────────────────────────────────────────────────────
+function moveAlong(c: CityState, w: Walker, dt: number): boolean {
+  // returns true when path finished this frame
+  let budget = w.speed * dt * (c.spellState.buffs.hasteUntil > simMonths(c) ? 1.5 : 1);
+  while (budget > 0 && w.pathI < w.path.length) {
+    const target = w.path[w.pathI];
+    const tx = target.x + 0.5, ty = target.y + 0.5;
+    const dxs = (tx - ty) - (w.x - w.y);
+    if (dxs !== 0) w.facing = dxs > 0 ? 1 : -1;
+    const dist = Math.hypot(tx - w.x, ty - w.y);
+    if (dist <= budget) {
+      w.x = tx; w.y = ty; budget -= dist; w.pathI++;
+    } else {
+      w.x += (tx - w.x) / dist * budget;
+      w.y += (ty - w.y) / dist * budget;
+      budget = 0;
+    }
+    w.animT += dt;
+  }
+  return w.pathI >= w.path.length;
+}
+
+function setDestTile(c: CityState, w: Walker, tx: number, ty: number): boolean {
+  const from = { x: Math.round(w.x - 0.5), y: Math.round(w.y - 0.5) };
+  const p = roadPassable(c)(from.x, from.y)
+    ? roadPath(c, from, { x: tx, y: ty })
+    : landPath(c, from, { x: tx, y: ty });
+  if (p && p.length > 1) { w.path = p.slice(1); w.pathI = 0; return true; }
+  if (p && p.length === 1) { w.path = []; w.pathI = 0; return true; }
+  return false;
+}
+
+function wanderStep(c: CityState, w: Walker): boolean {
+  const cx = Math.round(w.x - 0.5), cy = Math.round(w.y - 0.5);
+  const opts: Array<[number, number]> = [];
+  for (const [dx, dy] of [[1, 0], [-1, 0], [0, 1], [0, -1]] as const) {
+    if (roadPassable(c)(cx + dx, cy + dy)) opts.push([cx + dx, cy + dy]);
+  }
+  if (!opts.length) return false;
+  // prefer continuing direction
+  const pick = opts[Math.floor(Math.random() * opts.length)];
+  w.path = [{ x: pick[0], y: pick[1] }];
+  w.pathI = 0;
+  return true;
+}
+
+// ── painting services on houses passed ──────────────────────────────────────
+function paintServices(c: CityState, w: Walker) {
+  const b = c.buildings.get(w.homeId);
+  if (!b) return;
+  const d = def(b.def);
+  if (!d.service) return;
+  const now = simMonths(c);
+  const wx = Math.floor(w.x), wy = Math.floor(w.y);
+  for (let dy = -2; dy <= 2; dy++) for (let dx = -2; dx <= 2; dx++) {
+    if (Math.abs(dx) + Math.abs(dy) > 3) continue;
+    const t = tileAt(c, wx + dx, wy + dy);
+    if (!t || !t.bld) continue;
+    const hb = c.buildings.get(t.bld);
+    if (!hb || hb.ruin) continue;
+    const hd = def(hb.def);
+    if (!hd.housing) continue;
+    for (const s of d.service) hb.serviceT[s] = now;
+    // peddler unloads into house pantry
+    if (w.kind === 'peddler' && w.cargo) {
+      hb.goodsStock ??= {};
+      const capFood = maxResidentsOf(hb) * 3 + 16;
+      let foodTotal = 0;
+      for (const g of ['wheat', 'fruit', 'meat'] as Good[]) foodTotal += hb.goodsStock[g] ?? 0;
+      for (const [gStr, q] of Object.entries(w.cargo)) {
+        const g = gStr as Good;
+        const isFood = GOODS[g].food;
+        if (!q) continue;
+        if (isFood) {
+          const room = Math.max(0, capFood - foodTotal);
+          const give = Math.min(q, room);
+          hb.goodsStock[g] = (hb.goodsStock[g] ?? 0) + give;
+          w.cargo[g] = q - give;
+          foodTotal += give;
+        } else {
+          const give = Math.min(q, 6);
+          hb.goodsStock[g] = Math.min((hb.goodsStock[g] ?? 0) + give, 10);
+          w.cargo[g] = q - give;
+        }
+      }
+    }
+  }
+  // prefect & engineer special effects on any building nearby
+  if (w.kind === 'prefect' || w.kind === 'engineer') {
+    for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++) {
+      const t = tileAt(c, wx + dx, wy + dy);
+      if (t && t.bld) {
+        const bb = c.buildings.get(t.bld);
+        if (bb) {
+          if (w.kind === 'prefect' && bb.burning > 0) {
+            bb.burning = Math.max(0, bb.burning - dtGlobal * 8);
+            if (bb.burning === 0) FX.float(bb.x + bb.w / 2, bb.y + bb.h / 2 - 1, 'extinguished!', '#7fd0ff');
+          }
+          if (w.kind === 'prefect') {
+            const tt = tileAt(c, wx + dx, wy + dy)!;
+            tt.fireFervor = Math.max(0, tt.fireFervor - dtGlobal * 0.5);
+          }
+        }
+      }
+    }
+  }
+}
+let dtGlobal = 0; // small hack for paint effects needing dt
+
+// ── arrivals ────────────────────────────────────────────────────────────────
+function handleArrival(c: CityState, w: Walker) {
+  const home = c.buildings.get(w.homeId);
+  switch (w.kind) {
+    case 'immigrant': {
+      const t = w.targetBld ? c.buildings.get(w.targetBld) : undefined;
+      if (t && !t.ruin && def(t.def).housing !== undefined) {
+        const room = maxResidentsOf(t) - t.residents;
+        const move = Math.max(0, Math.min(w.group ?? 4, room));
+        t.residents += move;
+        if (move > 0) FX.float(t.x + t.w / 2, t.y + t.h / 2 - 1, `+${move}`, '#9fe89f');
+      }
+      w.dead = true;
+      return;
+    }
+    case 'emigrant': {
+      w.dead = true;
+      return;
+    }
+    case 'cart': case 'fetchCart': case 'marketBuyer': {
+      cartArrivals(c, w);
+      return;
+    }
+    case 'caravan': {
+      // pause at post then leave handled by timer state
+      if (w.state === 'walkOut') { w.state = 'wander'; w.timer = 6; w.path = []; w.pathI = 0; }
+      else if (w.state === 'wander') {
+        w.timer -= 1;
+        if (w.timer <= 0) {
+          w.state = 'returning';
+          const ep = c.entryPoints[Math.floor(Math.random() * c.entryPoints.length)];
+          const p = landPath(c, { x: Math.round(w.x - 0.5), y: Math.round(w.y - 0.5) }, ep);
+          if (p) { w.path = p.slice(1); w.pathI = 0; } else w.dead = true;
+        }
+      } else w.dead = true;
+      return;
+    }
+    default: break;
+  }
+  switch (w.state) {
+    case 'wander': {
+      if (home && !home.ruin) {
+        if (w.wanderStepsLeft > 0) {
+          w.wanderStepsLeft--;
+          if (!wanderStep(c, w)) w.state = 'returning';
+        } else w.state = 'returning';
+        if (w.state === 'returning') {
+          const acc = home ? roadAccessPoint(c, home) : null;
+          if (acc) setDestTile(c, w, acc.x, acc.y);
+          else w.dead = true;
+        }
+      } else w.dead = true;
+      break;
+    }
+    case 'returning': {
+      if (w.kind === 'peddler' && home && w.cargo) {
+        for (const [g, q] of Object.entries(w.cargo)) {
+          home.inv[g as Good] = (home.inv[g as Good] ?? 0) + (q ?? 0);
+        }
+        w.cargo = undefined;
+      }
+      w.dead = true;
+      break;
+    }
+    default:
+      w.dead = true;
+  }
+}
+
+// ── main update ─────────────────────────────────────────────────────────────
+export function updateWalkersImpl(c: CityState, dt: number) {
+  dtGlobal = dt;
+  tickServiceSpawns(c, dt);
+  for (const w of c.walkers.values()) {
+    if (w.dead) continue;
+    if (w.unit) continue; // combat units handled elsewhere
+    // homeless?
+    const home = c.buildings.get(w.homeId);
+    if ((isService(w.kind)) && (!home || home.ruin)) { w.dead = true; continue; }
+    if (w.pathI < w.path.length) {
+      moveAlong(c, w, dt);
+      if (isService(w.kind)) paintServices(c, w);
+      if (w.pathI >= w.path.length) handleArrival(c, w);
+    } else {
+      handleArrival(c, w);
+    }
+    // safety despawn far outside map
+    if (w.x < -3 || w.y < -3 || w.x > c.W + 3 || w.y > c.H + 3) w.dead = true;
+  }
+  for (const [id, w] of c.walkers) if (w.dead) c.walkers.delete(id);
+}
+
+// ── immigrants / emigrants ──────────────────────────────────────────────────
+export function trySpawnImmigrant(c: CityState): boolean {
+  // find house with capacity
+  let target: Building | null = null;
+  let cap = 0;
+  for (const b of c.buildings.values()) {
+    if (b.ruin || def(b.def).housing === undefined) continue;
+    if (b.noRoad || !roadAccessPoint(c, b)) continue; // nobody moves to an unreachable house
+    const room = maxResidentsOf(b) - b.residents - incomingFor(c, b.id);
+    if (room > cap) { cap = room; target = b; }
+  }
+  if (!target || cap <= 0) return false;
+  if (c.sentiment < 32) return false;
+  const ep = c.entryPoints[Math.floor(Math.random() * c.entryPoints.length)];
+  const start = { x: ep.x, y: ep.y };
+  const goal = roadAccessPoint(c, target) ?? { x: target.x, y: target.y + target.h };
+  const path = landPath(c, start, goal);
+  if (!path) return false;
+  const group = Math.min(cap, 4 + Math.floor(Math.random() * 4));
+  const w = spawnWalker(c, {
+    kind: 'immigrant', x: start.x + 0.5, y: start.y + 0.5,
+    homeId: target.id, path: path.slice(1), state: 'walkOut', speed: 1.9,
+    group,
+  });
+  w.targetBld = target.id;
+  return true;
+}
+
+export function incomingFor(c: CityState, bldId: number): number {
+  let n = 0;
+  for (const w of c.walkers.values()) {
+    if (w.kind === 'immigrant' && w.targetBld === bldId) n += w.group ?? 4;
+  }
+  return n;
+}
+
+export function maxResidentsOf(b: Building): number {
+  return HOUSE_TIERS[Math.min(b.houseLevel, HOUSE_TIERS.length - 1)].maxResidents;
+}

src/ui/hud.ts

@@ -0,0 +1,363 @@
+// ─── In-game HUD ───────────────────────────────────────────────────────────
+import type { Building, CityState } from '../sim/types';
+import { GOODS, SPELLS, type Good, type SpellId } from '../sim/types';
+import { DEFS, BUILD_ORDER, def } from '../data/buildings';
+import { HOUSE_TIERS } from '../data/housing';
+import { HEROES } from '../data/heroes';
+import { monthName, roman, fmt } from '../core/util';
+import { goalProgress } from '../sim/economy';
+import { goalMet } from '../sim/economy';
+import { removeBuilding } from '../sim/city';
+import { spellCooldownLeft } from '../sim/magic';
+import { makeMinimap } from '../render/renderer';
+import { Camera } from '../render/camera';
+import { playSfx } from '../audio/audio';
+import type { App } from '../app';
+
+
+const CAT_ICONS: Record<string, string> = {
+  housing: '🏠', food: '🌾', industry: '⚒️', storage: '🏺', civic: '🏛️',
+  religion: '⛩️', entertainment: '🎭', education: '📜', health: '⚕️',
+  military: '🛡️', magic: '🔮', heroes: '⚔️', trade: '🐫', decor: '🌳',
+};
+const CAT_ORDER = ['housing', 'food', 'industry', 'storage', 'civic', 'religion', 'entertainment', 'education', 'health', 'military', 'magic', 'heroes', 'trade', 'decor'];
+
+let appRef: App;
+let els: Record<string, HTMLElement> = {};
+
+export function el(tag: string, cls?: string, html?: string): HTMLElement {
+  const e = document.createElement(tag);
+  if (cls) e.className = cls;
+  if (html !== undefined) e.innerHTML = html;
+  return e;
+}
+
+// ── CSS injection (kept here so index.html stays slim) ──
+const CSS = `
+#hud-root{position:absolute;inset:0;pointer-events:none;font-family:var(--font);user-select:none;}
+#hud-root > *{pointer-events:auto;}
+.panelbox{background:linear-gradient(180deg,#3a2a1c,#2a1d10);border:2px solid #6b5233;border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.5);}
+#topbar{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;gap:14px;align-items:center;padding:6px 16px;font-size:14px;color:#ecd07d;z-index:20;}
+#topbar .stat{display:flex;gap:5px;align-items:center;white-space:nowrap;}
+#topbar b{color:#ffe9a0}
+#mana-wrap{width:90px;height:12px;background:#191225;border:1px solid #55402a;border-radius:6px;overflow:hidden;}
+#mana-fill{height:100%;background:linear-gradient(90deg,#7a5cff,#59c8d8);width:50%;}
+.speedbtn{background:#241a10;color:#c9b083;border:1px solid #6b5233;border-radius:6px;width:26px;height:24px;cursor:pointer;font-size:12px;line-height:1;}
+.speedbtn.active{background:#6b5233;color:#ffe9a0;}
+#menu-btn{background:#241a10;color:#ecd07d;border:1px solid #6b5233;border-radius:6px;padding:3px 10px;cursor:pointer;}
+#sidebar{position:absolute;top:64px;left:8px;display:flex;gap:8px;z-index:15;max-height:calc(100vh - 150px);}
+#cattabs{display:flex;flex-direction:column;gap:4px;padding:6px;overflow-y:auto;}
+.cattab{width:40px;height:40px;font-size:20px;display:flex;align-items:center;justify-content:center;background:#241a10;border:1px solid #55402a;border-radius:8px;cursor:pointer;opacity:.75;}
+.cattab:hover{opacity:1}
+.cattab.active{background:#6b4a22;border-color:#c9a227;opacity:1;box-shadow:0 0 8px rgba(201,162,39,.35)}
+#buildcards{padding:10px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-width:210px;max-height:inherit;}
+.bcard{display:flex;gap:8px;align-items:center;padding:7px 8px;background:#33251a;border:1px solid #55402a;border-radius:8px;cursor:pointer;color:#e8d8ae;font-size:13px;text-align:left;width:100%;}
+.bcard:hover{border-color:#c9a227;background:#452f1c}
+.bcard.active{border-color:#ffd700;background:#5a3d20}
+.bcard .icn{font-size:22px;width:28px;text-align:center}
+.bcard .cost{margin-left:auto;color:#ffd700;font-size:12px;white-space:nowrap}
+.bcard small{color:#b09b72;display:block;font-size:11px}
+#overlay-row{position:absolute;right:12px;top:62px;display:flex;gap:6px;z-index:14;}
+.ovbtn{background:#241acc00;background:#241a10;color:#c9b083;border:1px solid #55402a;border-radius:6px;padding:4px 9px;cursor:pointer;font-size:12px;}
+.ovbtn.active{background:#6b5233;color:#ffe9a0;border-color:#c9a227;}
+#spellbar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:8px;z-index:16;}
+.spell{width:52px;height:52px;border-radius:10px;background:#241a10;border:2px solid #55402a;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;color:#e8d8ae;font-size:22px;}
+.spell:hover{border-color:#a87fff}
+.spell.locked{opacity:.25;cursor:not-allowed}
+.spell .cd{position:absolute;inset:0;background:rgba(10,6,20,.65);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;}
+.spell .mcost{position:absolute;bottom:-4px;right:-4px;background:#191225;border:1px solid #55402a;border-radius:6px;font-size:9px;padding:0 3px;color:#9f8fff}
+#minimap{position:absolute;right:12px;bottom:12px;border:2px solid #6b5233;border-radius:8px;z-index:14;image-rendering:pixelated;cursor:crosshair;}
+#info-panel{position:absolute;right:12px;top:104px;width:270px;padding:12px;z-index:17;color:#e8d8ae;font-size:13px;display:none;max-height:70vh;overflow-y:auto;}
+#toasts{position:absolute;top:60px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;z-index:40;pointer-events:none;}
+.toast{background:rgba(30,20,10,.92);border:1px solid #6b5233;border-radius:8px;padding:6px 14px;color:#f0e2be;font-size:13px;animation:toastin .25s ease-out;}
+@keyframes toastin{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}
+.msg-badge{cursor:pointer}
+#msglog-panel{position:absolute;top:110px;left:50%;transform:translateX(-50%);width:420px;max-height:46vh;overflow-y:auto;padding:12px;z-index:30;display:none;color:#d8c8a0;font-size:13px;}
+.advisor-grid{display:flex;flex-direction:column;gap:8px}
+.goalrow{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}
+.bar{height:10px;background:#191225;border-radius:5px;overflow:hidden;border:1px solid #55402a}
+.bar>div{height:100%}
+`;
+(function injectCSS() {
+  const st = document.createElement('style');
+  st.textContent = CSS;
+  document.head.appendChild(st);
+})();
+
+export function initHUD(app: App) {
+  appRef = app;
+  const old = document.getElementById('hud-root');
+  if (old) old.remove();
+  const root = el('div');
+  root.id = 'hud-root';
+  document.getElementById('ui-root')!.appendChild(root);
+
+  // ── topbar ──
+  const tb = el('div', 'panelbox'); tb.id = 'topbar';
+  tb.innerHTML = `
+    <div class="stat" title="Treasury">💰 <b id="t-funds"></b></div>
+    <div class="stat" title="Population">👥 <b id="t-pop"></b></div>
+    <div class="stat" title="Date">📅 <span id="t-date"></span></div>
+    <div class="stat" title="Public sentiment">😊 <span id="t-sent"></span></div>
+    <div class="stat" title="Culture / Prosperity / Peace / Favor">🏅 <span id="t-ratings"></span></div>
+    <div class="stat" title="Mana">🔮 <div id="mana-wrap"><div id="mana-fill"></div></div></div>
+    <div class="stat" title="Unemployment">⚖️ <span id="t-unemp"></span></div>
+  `;
+  const spd = el('div'); spd.style.display = 'flex'; spd.style.gap = '3px';
+  ['⏸', '▶', '⏩', '⚡'].forEach((s, i) => {
+    const b = el('button', 'speedbtn', s);
+    b.onclick = () => { app.city.paused = i === 0; if (i > 0) app.city.speedIdx = i - 1 + 1; playSfx('click'); };
+    b.dataset.i = String(i);
+    spd.appendChild(b);
+  });
+  tb.appendChild(spd);
+  const mb = el('button', '', '☰ Menu'); mb.id = 'menu-btn';
+  mb.onclick = () => import('./menus').then(m => m.openPauseMenu(app));
+  tb.appendChild(mb);
+  const msgBtn = el('button', 'speedbtn', '📜');
+  msgBtn.title = 'Message archive';
+  msgBtn.style.width = 'auto';
+  msgBtn.style.padding = '0 8px';
+  msgBtn.onclick = () => import('./menus').then(m => m.showMessages(app));
+  tb.appendChild(msgBtn);
+  root.appendChild(tb);
+
+  // ── sidebar ──
+  const sb = el('div'); sb.id = 'sidebar'; sb.className = 'panelbox';
+  const tabs = el('div'); tabs.id = 'cattabs';
+  const cards = el('div'); cards.id = 'buildcards';
+  sb.appendChild(tabs); sb.appendChild(cards);
+  root.appendChild(sb);
+
+  let activeCat = '';
+  const renderCards = (cat: string) => {
+    activeCat = cat;
+    [...tabs.children].forEach(c => c.classList.toggle('active', (c as HTMLElement).dataset.cat === cat));
+    cards.innerHTML = '';
+    for (const key of BUILD_ORDER) {
+      const d = DEFS[key];
+      if (!d || d.cat !== cat) continue;
+      const btn = el('button', 'bcard');
+      const icn = d.housing !== undefined ? '🏠' : (key === 'road' ? '🛣️' : CAT_ICONS[d.cat]);
+      btn.innerHTML = `<span class="icn">${icn}</span><span>${d.name}<small>${sizeLabel(d.w)} · ${d.workers ? d.workers + ' workers' : 'no workers'}${d.unique ? ' · unique' : ''}</small></span><span class="cost">${d.cost}💰</span>`;
+      btn.title = d.blurb + (d.hotkey ? ` [${d.hotkey.toUpperCase()}]` : '');
+      btn.onclick = () => {
+        app.setTool({ kind: 'build', key });
+        playSfx('click');
+        renderCards(cat);
+      };
+      btn.classList.toggle('active', app.tool?.kind === 'build' && (app.tool as { key: string }).key === key);
+      cards.appendChild(btn);
+    }
+    // erase tool at end
+    const er = el('button', 'bcard', `<span class="icn">❌</span><span>Clear / Demolish<small>removes buildings & rubble</small></span><span class="cost">+25%</span>`);
+    er.onclick = () => { app.setTool({ kind: 'erase' }); playSfx('click'); renderCards(cat); };
+    cards.appendChild(er);
+  };
+  for (const cat of CAT_ORDER) {
+    if (!BUILD_ORDER.some(k => DEFS[k]?.cat === cat)) continue;
+    const t = el('div', 'cattab', CAT_ICONS[cat]);
+    t.dataset.cat = cat;
+    t.title = cat[0].toUpperCase() + cat.slice(1);
+    t.onclick = () => { playSfx('click'); renderCards(cat); };
+    tabs.appendChild(t);
+  }
+  renderCards('housing');
+
+  // ── overlay row ──
+  const orow = el('div'); orow.id = 'overlay-row';
+  const ovs: Array<[string, string, OverlayModeLite]> = [
+    ['🌐', 'None', null], ['🔥', 'Fire risk', 'fire'], ['💧', 'Water', 'water'],
+    ['✨', 'Desirability', 'desirability'], ['🌱', 'Fertility', 'fertility'],
+  ];
+  for (const [ic, label, mode] of ovs) {
+    const b = el('button', 'ovbtn' + (mode === null ? ' active' : ''), `${ic} ${label}`);
+    b.onclick = () => {
+      app.view.overlay = mode;
+      [...orow.children].forEach(c => c.classList.remove('active'));
+      b.classList.add('active');
+      playSfx('click');
+    };
+    orow.appendChild(b);
+  }
+  root.appendChild(orow);
+  void activeCat;
+
+  // ── spellbar ──
+  const spb = el('div', 'panelbox'); spb.id = 'spellbar';
+  root.appendChild(spb);
+  for (const sid of Object.keys(SPELLS) as SpellId[]) {
+    const sd = SPELLS[sid];
+    const s = el('div', 'spell', `${sd.icon}<span class="mcost">${sd.mana}</span>`);
+    s.title = `${sd.name} — ${sd.desc}`;
+    s.dataset.spell = sid;
+    s.onclick = () => app.castFromBar(sid);
+    spb.appendChild(s);
+  }
+
+  // ── minimap ──
+  app.minimapCv = makeMinimap(app.city, 176, 176);
+  app.minimapCv.id = 'minimap';
+  root.appendChild(app.minimapCv);
+
+  // ── info panel ──
+  const ip = el('div', 'panelbox'); ip.id = 'info-panel';
+  root.appendChild(ip);
+
+  // ── toasts ──
+  const toasts = el('div'); toasts.id = 'toasts';
+  root.appendChild(toasts);
+  els.toasts = toasts;
+  els['t-funds'] = tb.querySelector('#t-funds')!;
+  els['t-pop'] = tb.querySelector('#t-pop')!;
+  els['t-date'] = tb.querySelector('#t-date')!;
+  els['t-sent'] = tb.querySelector('#t-sent')!;
+  els['t-ratings'] = tb.querySelector('#t-ratings')!;
+  els['mana-fill'] = tb.querySelector('#mana-fill')!;
+  els['t-unemp'] = tb.querySelector('#t-unemp')!;
+  els.topbar = tb;
+}
+type OverlayModeLite = null | 'fire' | 'water' | 'desirability' | 'fertility';
+
+function sizeLabel(w: number) { return w === 1 ? '1×1' : w === 2 ? '2×2' : '3×3'; }
+
+const SENT_FACES: Array<[number, string]> = [[20, '😡'], [40, '😠'], [55, '😐'], [70, '🙂'], [101, '😄']];
+
+let hudAcc = 0;
+export function refreshHUD(app: App, dt: number) {
+  hudAcc += dt;
+  if (hudAcc < 0.2) return;
+  hudAcc = 0;
+  const c = app.city;
+  els['t-funds']!.textContent = fmt.format(Math.floor(c.funds));
+  els['t-pop']!.textContent = fmt.format(c.population);
+  els['t-date']!.textContent = `${monthName(c.month)} Yr ${roman(c.year + 1)}`;
+  const face = SENT_FACES.find(([v]) => c.sentiment < v)?.[1] ?? '😐';
+  els['t-sent']!.textContent = `${face} ${Math.round(c.sentiment)}%`;
+  els['t-ratings']!.textContent = `C${c.ratings.culture} P${c.ratings.prosperity} Pe${c.ratings.peace} F${c.ratings.favor}`;
+  els['mana-fill']!.style.width = `${(c.mana / Math.max(1, c.manaMax)) * 100}%`;
+  els['t-unemp']!.textContent = `${c.unemploymentPct}%`;
+
+  // speed buttons active state
+  [...els.topbar.querySelectorAll('.speedbtn')].forEach((b, i) => {
+    const idx = i === 0 ? 0 : i; // paused=0 else speedIdx mapping 1..3
+    const active = i === 0 ? c.paused : (!c.paused && c.speedIdx === i - 1 + 1);
+    b.classList.toggle('active', !!active);
+    void idx;
+  });
+
+  // spells
+  for (const n of document.getElementById('spellbar')?.children ?? []) {
+    const s = n as HTMLElement;
+    const sid = s.dataset.spell as SpellId;
+    const unlocked = c.spellState.unlocked.has(sid);
+    s.classList.toggle('locked', !unlocked);
+    let cdEl = s.querySelector('.cd') as HTMLElement | null;
+    if (!unlocked) continue;
+    const leftM = spellCooldownLeft(c, sid);
+    if (leftM > 0) {
+      if (!cdEl) { cdEl = el('div', 'cd'); s.appendChild(cdEl); }
+      cdEl.textContent = Math.ceil(leftM * 10) + 's';
+    } else if (cdEl) cdEl.remove();
+    else if (c.mana < SPELLS[sid].mana) {
+      if (!cdEl) { cdEl = el('div', 'cd'); cdEl.style.background = 'rgba(80,20,90,.45)'; s.appendChild(cdEl); }
+      cdEl.textContent = '';
+    } else { (cdEl as HTMLElement | null)?.remove(); }
+  }
+
+  // scenario goals mini-display in topbar title attr
+  const goals = app.scenario.goals;
+  if (goals.length) {
+    els['t-ratings']!.title = 'Goals:\n' + goals.map(g => `${GOAL_LABEL[g.kind] ?? g.kind}: ${goalProgress(c, g.kind, g.amount ?? 0)} / ${g.amount ?? ''}${goalMet(c, g.kind, g.amount ?? 0) ? ' ✓' : ''}`).join('\n');
+  }
+}
+
+export const GOAL_LABEL: Record<string, string> = {
+  population: 'Population', culture: 'Culture', prosperity: 'Prosperity',
+  peace: 'Peace', favor: 'Favor', treasury: 'Treasury', surviveYears: 'Survive years',
+  slayMonsters: 'Monsters slain', buildWonder: 'Build Colosseum',
+};
+
+// ── toasts ──
+export function toast(text: string, _kind: string = 'info') {
+  const t = el('div', 'toast', text);
+  els.toasts?.appendChild(t);
+  setTimeout(() => { t.style.opacity = '0'; t.style.transition = 'opacity .4s'; }, 2600);
+  setTimeout(() => t.remove(), 3100);
+}
+
+// ── building info panel ──
+export function showBuildingInfo(app: App, b: Building) {
+  const ip = document.getElementById('info-panel')!;
+  const d = def(b.def);
+  const c = app.city;
+  ip.style.display = 'block';
+  const parts: string[] = [];
+  parts.push(`<h3 style="margin:0 0 6px;color:#ffe9a0">${d.name}</h3>`);
+  parts.push(`<div style="color:#b09b72;margin-bottom:8px">${d.blurb}</div>`);
+  if (b.ruin) {
+    parts.push(`<div style="color:#e07050">☠️ Ruins — clear them to rebuild.</div>`);
+  } else {
+    if (d.workers) parts.push(`<div>👷 Workers: <b>${b.workersLive}/${d.workers}</b>${b.workersLive === 0 ? ' — <span style="color:#e07050">no staff!</span>' : ''}</div>`);
+    if (b.noRoad) parts.push(`<div style="color:#ffb454">⛔ Not connected to a road — build a road next to it to put it to work.</div>`);
+    if (d.produces) {
+      const g = GOODS[d.produces.good];
+      parts.push(`<div>${g.icon} Output stored here: <b>${Math.floor(b.inv[d.produces.good] ?? 0)}</b></div>`);
+      for (const [k, v] of Object.entries(d.consumes ?? {})) {
+        parts.push(`<div style="font-size:12px;color:#b09b72">needs ${GOODS[k as Good].icon} ${GOODS[k as Good].name}: ${Math.floor(b.inv[k as Good] ?? 0)}/${v} buffered</div>`);
+      }
+    }
+    if (d.storage) {
+      const tot = Object.values(b.inv).reduce((a, v) => a + (v ?? 0), 0);
+      parts.push(`<div>🏺 Contents (${tot}/${d.storage.capacity}):</div>`);
+      for (const [k, v] of Object.entries(b.inv)) {
+        if ((v ?? 0) > 0) parts.push(`<span style="font-size:12px;margin-right:8px">${GOODS[k as Good].icon} ${Math.floor(v ?? 0)}</span>`);
+      }
+      parts.push('<div></div>');
+    }
+    if (d.housing !== undefined) {
+      const tier = HOUSE_TIERS[Math.min(b.houseLevel, HOUSE_TIERS.length - 1)];
+      parts.push(`<div>🏠 <b>${tier.name}</b> — 👥 ${b.residents}/${tier.maxResidents}</div>`);
+      if (b.goodsStock) {
+        const foods = (['wheat', 'fruit', 'meat'] as const).filter(g => (b.goodsStock![g] ?? 0) > 0).map(g => GOODS[g].icon).join('');
+        if (foods) parts.push(`<div style="font-size:12px">pantry: ${foods}</div>`);
+      }
+      if ((b.hungerMonths ?? 0) > 0) parts.push(`<div style="color:#e07050">⚠ Hunger for ${b.hungerMonths} months!</div>`);
+    }
+    if (b.burning > 0) parts.push(`<div style="color:#ff9040">🔥 ON FIRE!</div>`);
+    if (d.tower || d.mageTower) parts.push(`<div>🎯 Defenses manned${b.workersLive ? '' : ' — <span style="color:#e07050">unstaffed!</span>'}</div>`);
+    if (d.heroHall) {
+      parts.push(`<div style="margin-top:8px"><b>Summon a legend:</b></div>`);
+      for (const hid of Object.keys(HEROES) as Array<keyof typeof HEROES>) {
+        const hd = HEROES[hid];
+        parts.push(`<button class="ovbtn" style="margin:3px 3px 0 0;width:100%;text-align:left" onclick="(window.__ia_summon||(()=>{}))('${hid}')">${hd.icon} ${hd.name} ${hd.title} — ${hd.costGold}💰${hd.costGood ? ` + ${hd.costGood.qty} ${GOODS[hd.costGood.good].name}` : ''}</button>`);
+      }
+    }
+    if (d.fort || b.def === 'barracks') {
+      parts.push(`<button class="ovbtn" style="margin-top:8px;width:100%" onclick="(window.__ia_rally||(()=>{}))()">🎯 Set rally point</button>`);
+    }
+  }
+  parts.push(`<div style="display:flex;gap:6px;margin-top:10px">
+    <button class="ovbtn" style="flex:1" onclick="(window.__ia_close||(()=>{}))()">Close</button>
+    ${!b.ruin ? `<button class="ovbtn" style="flex:1;color:#ff9080" onclick="(window.__ia_demolish||(()=>{}))()">Demolish</button>` : ''}
+  </div>`);
+  ip.innerHTML = parts.join('');
+
+  (window as unknown as Record<string, unknown>).__ia_close = () => { ip.style.display = 'none'; app.view.selectedBld = 0; };
+  (window as unknown as Record<string, unknown>).__ia_demolish = () => { removeBuilding(app.city, b.x, b.y); hideInfoPanel(); };
+  (window as unknown as Record<string, unknown>).__ia_summon = (hid: string) => app.summonHero(hid as never);
+  (window as unknown as Record<string, unknown>).__ia_rally = () => { app.setTool({ kind: 'rally', bldId: b.id }); hideInfoPanel(); toast('Click where troops should gather.', 'info'); };
+}
+
+export function minimapClickToTile(city: CityState, _cam: Camera, mx: number, my: number, w: number, h: number): [number, number] {
+  const tx = clampN(mx / w * city.W, 0, city.W - 1);
+  const ty = clampN(my / h * city.H, 0, city.H - 1);
+  return [(tx - ty) * 32, (tx + ty) * 16];
+}
+function clampN(v: number, a: number, b: number) { return v < a ? a : v > b ? b : v; }
+
+export function hideInfoPanel() {
+  const ip = document.getElementById('info-panel');
+  if (ip) ip.style.display = 'none';
+}
+

src/ui/menus.ts

@@ -0,0 +1,347 @@
+// ─── Menus: title screen, pause, advisors, victory ─────────────────────────
+import type { Good } from '../sim/types';
+import { GOODS, SPELLS } from '../sim/types';
+import { CAMPAIGN, makeSandbox } from '../data/scenarios';
+import { HEROES } from '../data/heroes';
+import { fmt } from '../core/util';
+import type { App } from '../app';
+import { launchScenario } from '../app';
+import { listSaves, deleteSave } from '../sim/save';
+import { goalMet, goalProgress } from '../sim/economy';
+import { audioState, setVolume, startMusic, unlockAudio } from '../audio/audio';
+import { GOAL_LABEL } from './hud';
+
+function overlay(id: string): HTMLDivElement {
+  document.getElementById(id)?.remove();
+  const d = document.createElement('div');
+  d.id = id;
+  d.style.cssText = 'position:absolute;inset:0;background:rgba(10,6,4,.72);display:flex;align-items:center;justify-content:center;z-index:100;';
+  const inner = document.createElement('div');
+  inner.className = 'panelbox menu-inner';
+  inner.style.cssText = 'padding:26px 30px;max-width:min(720px,92vw);max-height:88vh;overflow-y:auto;color:#e8d8ae;font-size:14px;line-height:1.5;';
+  d.appendChild(inner);
+  document.getElementById('ui-root')!.appendChild(d);
+  return d;
+}
+const MENU_CSS = `
+.menu-inner h1{font-size:34px;margin:0 0 2px;color:#ffd700;letter-spacing:2px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
+.menu-inner h2{margin:14px 0 6px;color:#ffe9a0}
+.menu-inner .sub{color:#b09b72;margin-bottom:16px}
+.mbtn{display:block;width:100%;text-align:left;padding:9px 12px;margin:5px 0;background:#33251a;border:1px solid #55402a;border-radius:8px;color:#e8d8ae;font-size:15px;cursor:pointer}
+.mbtn:hover{border-color:#c9a227;background:#452f1c}
+.mbtn small{color:#b09b72;display:block;font-size:12px}
+.chip{display:inline-flex;align-items:center;gap:4px;background:#241a10;border:1px solid #55402a;border-radius:12px;padding:2px 9px;margin:2px;cursor:pointer;font-size:12px}
+.chip.on{background:#3f5a2f;border-color:#7fa04a;color:#d8f0c0}
+.scen-card{border:1px solid #55402a;border-radius:10px;padding:10px 12px;margin:8px 0;cursor:pointer;background:#33251a}
+.scen-card:hover{border-color:#c9a227;background:#452f1c}
+.kbd{background:#241a10;border:1px solid #55402a;border-radius:4px;padding:0 5px;font-family:monospace;font-size:12px}
+`;
+(function () {
+  const st = document.createElement('style');
+  st.textContent = MENU_CSS;
+  document.head.appendChild(st);
+})();
+
+export function anyMenuOpen(): boolean {
+  return !!document.querySelector('.menu-inner') && !document.getElementById('main-menu')?.classList.contains('hidden');
+}
+
+export function closeAllMenus() {
+  for (const id of ['main-menu', 'pause-menu', 'advisor', 'victory-modal', 'help-modal', 'settings-modal']) {
+    document.getElementById(id)?.remove();
+  }
+}
+
+// ─── Title / main menu ──────────────────────────────────────────────────────
+let currentApp: App | null = null;
+export function openMainMenus(app: App) {
+  currentApp = app;
+  closeAllMenus();
+  const d = overlay('main-menu');
+  const inner = d.firstChild as HTMLElement;
+  inner.innerHTML = `
+    <h1>IMPERIUM ARCANUM</h1>
+    <div class="sub">A city-builder of legends — roads, legions, heroes and spells. Governor, the province awaits.</div>
+    <button class="mbtn" id="mm-campaign">⚔️ Campaign<small>Five scenarios from farming village to eternal city of magic</small></button>
+    <button class="mbtn" id="mm-sandbox">🌍 Free Province (sandbox)<small>Endless map, scaling monster waves</small></button>
+    <button class="mbtn" id="mm-continue">📜 Continue / Load<small>Autosave & manual chronicles</small></button>
+    <button class="mbtn" id="mm-help">❓ How to play</button>
+    <button class="mbtn" id="mm-settings">🎵 Settings</button>
+    <div style="margin-top:14px;color:#8f7a5a;font-size:11px">Runs entirely in your browser · saves in local storage · inspired by Caesar 3 & Augustus</div>
+  `;
+  (inner.querySelector('#mm-campaign') as HTMLElement).onclick = showCampaignList;
+  (inner.querySelector('#mm-sandbox') as HTMLElement).onclick = () => {
+    unlockAudio(); startMusic();
+    launchScenario(app, makeSandbox(Math.floor(Math.random() * 99999)));
+  };
+  (inner.querySelector('#mm-continue') as HTMLElement).onclick = () => showLoadList();
+  (inner.querySelector('#mm-help') as HTMLElement).onclick = () => showHelp(true);
+  (inner.querySelector('#mm-settings') as HTMLElement).onclick = () => showSettings();
+
+  function showCampaignList() {
+    inner.innerHTML = '<h2>Campaign</h2>';
+    CAMPAIGN.forEach((sc, i) => {
+      const card = document.createElement('div');
+      card.className = 'scen-card';
+      card.innerHTML = `<b style="color:#ffd700">${sc.name}</b> — ${sc.subtitle}<br><span style="font-size:12px;color:#b09b72">${sc.brief.slice(0, 110)}…</span><br><span style="font-size:11px;color:#8f7a5a">Goals: ${sc.goals.map(g => `${GOAL_LABEL[g.kind] ?? g.kind} ${g.amount ?? ''}`).join(' · ') || 'sandbox'}</span>`;
+      card.onclick = () => { unlockAudio(); startMusic(); launchScenario(app, sc); };
+      if (i > 0) {
+        // light progression gate: allow all but mark suggested order
+        card.style.opacity = '.85';
+      }
+      inner.appendChild(card);
+    });
+    addBackButton(inner, renderHome);
+  }
+  function showLoadList() {
+    inner.innerHTML = '<h2>Chronicles</h2>';
+    const saves = listSaves();
+    if (!saves.length) inner.innerHTML += '<div class="sub">No chronicles found yet. They are written automatically every few months.</div>';
+    for (const { slot, meta } of saves) {
+      const row = document.createElement('button');
+      row.className = 'mbtn';
+      row.innerHTML = `📜 <b>${meta.scenarioName}</b> — pop ${fmt.format(meta.population)}, treasury ${fmt.format(meta.funds)}<small>${new Date(meta.at).toLocaleString()}</small>`;
+      row.onclick = () => {
+        unlockAudio(); startMusic();
+        const loaded = loadCitySafe(slot);
+        if (!loaded) return;
+        launchScenario(app, loaded.scenario, slot);
+      };
+      inner.appendChild(row);
+      const del = document.createElement('button');
+      del.className = 'chip'; del.textContent = '🗑 delete';
+      del.onclick = () => { deleteSave(slot); showLoadList(); };
+      row.appendChild(del);
+    }
+    addBackButton(inner, renderHome);
+  }
+  function renderHome() { openMainMenus(currentApp!); }
+}
+
+function loadCitySafe(slot: string) {
+  try {
+    const mod = require_load();
+    return mod(slot);
+  } catch { return null; }
+}
+import { loadCity } from '../sim/save';
+function require_load() { return loadCity; }
+
+export function openPauseMenu(_app: App) {
+  const app = _app;
+  if (document.getElementById('pause-menu')) { closeAllMenus(); return; }
+  const d = overlay('pause-menu');
+  (d.firstChild as HTMLElement).innerHTML = `
+    <h2>Paused</h2>
+    <button class="mbtn" id="pm-resume">▶ Resume</button>
+    <button class="mbtn" id="pm-save">💾 Save chronicle</button>
+    <button class="mbtn" id="pm-advisor-labor">👷 Labor advisor</button>
+    <button class="mbtn" id="pm-advisor-trade">🐫 Trade & empire</button>
+    <button class="mbtn" id="pm-advisor-goal">🏅 Ratings & goals</button>
+    <button class="mbtn" id="pm-hero">⚔️ Hall of Heroes</button>
+    <button class="mbtn" id="pm-msgs">📜 Message archive</button>
+    <button class="mbtn" id="pm-help">❓ How to play</button>
+    <button class="mbtn" id="pm-settings">🎵 Settings</button>
+    <button class="mbtn" id="pm-quit">🚪 Quit to menu</button>
+  `;
+  (d.querySelector('#pm-resume') as HTMLElement).onclick = () => closeAllMenus();
+  (d.querySelector('#pm-save') as HTMLElement).onclick = () => { app.saveTo('slot_' + Date.now()); closeAllMenus(); };
+  (d.querySelector('#pm-advisor-labor') as HTMLElement).onclick = () => showLabor(app);
+  (d.querySelector('#pm-advisor-trade') as HTMLElement).onclick = () => showTrade(app);
+  (d.querySelector('#pm-advisor-goal') as HTMLElement).onclick = () => showGoals(app);
+  (d.querySelector('#pm-hero') as HTMLElement).onclick = () => showHeroes(app);
+  (d.querySelector('#pm-msgs') as HTMLElement).onclick = () => showMessages(app);
+  (d.querySelector('#pm-help') as HTMLElement).onclick = () => showHelp(false);
+  (d.querySelector('#pm-settings') as HTMLElement).onclick = () => showSettings();
+  (d.querySelector('#pm-quit') as HTMLElement).onclick = () => app.quitToMenu();
+}
+
+export function victoryModal(app: App, won: boolean, reason?: string) {
+  const d = overlay('victory-modal');
+  (d.firstChild as HTMLElement).innerHTML = won ? `
+    <h1 style="color:#ffd700">🏆 VICTORY</h1>
+    <p>The Senate showers you in laurels. ${app.scenario.reward ?? ''}</p>
+    <button class="mbtn" id="vm-cont">Keep governing</button>
+    <button class="mbtn" id="vm-menu">Return to Rome (menu)</button>
+  ` : `
+    <h1 style="color:#e07050">☠️ DEFEAT</h1>
+    <p>${reason ?? 'The province has fallen.'}</p>
+    <button class="mbtn" id="vm-menu">Return to Rome (menu)</button>
+  `;
+  d.querySelector('#vm-menu')?.addEventListener('click', () => app.quitToMenu());
+  d.querySelector('#vm-cont')?.addEventListener('click', () => { d.remove(); });
+}
+
+function addBackButton(inner: HTMLElement, fn: () => void) {
+  const b = document.createElement('button');
+  b.className = 'mbtn'; b.textContent = '← Back';
+  b.onclick = fn;
+  inner.appendChild(b);
+}
+
+// ─── Advisors ───────────────────────────────────────────────────────────────
+export function showLabor(app: App) {
+  const c = app.city;
+  const d = overlay('advisor');
+  const byCat: Record<string, number> = {};
+  let totalNeed = 0, totalHave = 0;
+  for (const b of c.buildings.values()) {
+    const dd = b.def;
+    void dd;
+  }
+  for (const b of c.buildings.values()) {
+    const defn = (window as unknown as { __defs: Record<string, { workers: number; cat: string }> }).__defs?.[b.def];
+    void defn;
+  }
+  import('../data/buildings').then(({ def }) => {
+    for (const b of c.buildings.values()) {
+      const bd = def(b.def);
+      if (bd.workers > 0 && !b.ruin) {
+        byCat[bd.cat] = (byCat[bd.cat] ?? 0) + b.workersLive;
+        totalNeed += bd.workers; totalHave += b.workersLive;
+      }
+    }
+    (d.firstChild as HTMLElement).innerHTML = `
+      <h2>Labor Advisor</h2>
+      <div>Workforce: <b>${c.laborers}</b> · Employed: <b>${c.employed}</b> · Unemployed: <b>${Math.round(c.unemploymentPct)}%</b></div>
+      <div class="bar" style="margin:8px 0"><div style="width:${totalNeed ? (totalHave / totalNeed) * 100 : 0}%;background:#7fa04a"></div></div>
+      <div class="advisor-grid">
+        ${Object.entries(byCat).sort((a, b) => b[1] - a[1]).map(([cat, n]) => `<div class="goalrow"><span>${cat}</span><b>${n} workers</b></div>`).join('')}
+      </div>
+      <div style="margin-top:10px;color:#b09b72;font-size:12px">Tip: unemployment above ~18% hurts Prosperity, but keep some slack or new industry will starve.</div>
+      <button class="mbtn" onclick="this.closest('.menu-inner').parentElement.remove()">Close</button>
+    `;
+  });
+  // immediate fallback content
+  (d.firstChild as HTMLElement).textContent = 'Gathering census…';
+}
+
+export function showTrade(app: App) {
+  const c = app.city;
+  const d = overlay('advisor');
+  const goodsList = Object.keys(GOODS) as Good[];
+  const render = () => {
+    (d.firstChild as HTMLElement).innerHTML = `
+      <h2>Trade & Empire</h2>
+      <div style="margin-bottom:6px">Requires a staffed <b>Trading Post</b>. Caravans arrive each quarter. Exports sell surplus above 120 units.</div>
+      <button class="mbtn" id="gift-btn" style="width:auto">🎁 Send gift to Rome (+8 Favor, 800💰)</button>
+      ${c.trades.map((tc, i) => `
+        <div class="scen-card" style="cursor:default">
+          <b style="color:#ffd700">🏛 ${tc.name}</b> — route ${tc.open ? 'open' : 'closed'} · prices ×${tc.priceFactor.toFixed(2)}
+          <div style="margin-top:4px">Exports: ${goodsList.map(g =>
+            `<span class="chip ${tc.exports.includes(g) ? 'on' : ''}" data-t="${i}" data-k="exports" data-g="${g}">${GOODS[g].icon} ${GOODS[g].name} ▸${Math.round(GOODS[g].basePrice * tc.priceFactor * 0.85)}</span>`).join('')}</div>
+          <div>Imports: ${goodsList.map(g =>
+            `<span class="chip ${tc.imports.includes(g) ? 'on' : ''}" data-t="${i}" data-k="imports" data-g="${g}">${GOODS[g].icon} ◂${Math.round(GOODS[g].basePrice * tc.priceFactor * 1.15)}</span>`).join('')}</div>
+        </div>`).join('')}
+      <button class="mbtn" onclick="this.closest('.menu-inner').parentElement.remove()">Close</button>
+    `;
+    d.querySelectorAll('.chip').forEach(ch => ch.addEventListener('click', () => {
+      const tI = parseInt((ch as HTMLElement).dataset.t!);
+      const k = (ch as HTMLElement).dataset.k as 'exports' | 'imports';
+      const g = (ch as HTMLElement).dataset.g as Good;
+      const arr = c.trades[tI][k];
+      const ix = arr.indexOf(g);
+      if (ix >= 0) arr.splice(ix, 1); else arr.push(g);
+      render();
+    }));
+    d.querySelector('#gift-btn')?.addEventListener('click', () => { app.sendGift(); render(); });
+  };
+  render();
+}
+
+export function showGoals(app: App) {
+  const c = app.city;
+  const sc = app.scenario;
+  const d = overlay('advisor');
+  (d.firstChild as HTMLElement).innerHTML = `
+    <h2>Ratings & Goals</h2>
+    <div class="advisor-grid">
+      ${(['culture', 'prosperity', 'peace', 'favor'] as const).map(k => `
+        <div><div class="goalrow"><span>${k[0].toUpperCase() + k.slice(1)}</span><b>${c.ratings[k]}</b></div>
+        <div class="bar"><div style="width:${c.ratings[k]}%;background:${k === 'peace' ? '#3a6ea5' : k === 'favor' ? '#c9a227' : '#7fa04a'}"></div></div></div>`).join('')}
+    </div>
+    <h2>Mission goals</h2>
+    ${(sc.goals.length ? sc.goals : []).map(g => {
+      const p = goalProgress(c, g.kind, g.amount ?? 0);
+      const done = goalMet(c, g.kind, g.amount ?? 0);
+      return `<div class="goalrow"><span>${done ? '✅' : '⬜'} ${GOAL_LABEL[g.kind] ?? g.kind}</span><b>${Math.floor(p)} / ${g.amount ?? ''}</b></div>`;
+    }).join('') || '<div class="sub">Free province — no fixed goals. Prosper!</div>'}
+    <div style="margin-top:8px;font-size:12px;color:#b09b72">Monsters slain: ${c.stats.monstersSlain} · Invaders slain: ${c.stats.invadersSlain} · Deaths: ${c.stats.totalDeaths}</div>
+    <button class="mbtn" onclick="this.closest('.menu-inner').parentElement.remove()">Close</button>
+  `;
+}
+
+export function showHeroes(app: App) {
+  const c = app.city;
+  const hasHall = [...c.buildings.values()].some(b => b.def === 'heroHall' && !b.ruin);
+  const d = overlay('advisor hero-dlg'); (d.firstChild as HTMLElement).id = 'hero-dialog';
+  (d.firstChild as HTMLElement).innerHTML = `
+    <h2>Hall of Heroes</h2>
+    ${hasHall ? '' : '<div class="sub" style="color:#e07050">You need a built Hall of Heroes to summon legends.</div>'}
+    ${Object.values(HEROES).map(hd => `
+      <div class="scen-card" style="cursor:default">
+        <b style="color:#ffd700">${hd.icon} ${hd.name} ${hd.title}</b><br>
+        <span style="font-size:12px">${hd.desc}</span><br>
+        <span style="font-size:12px;color:#b09b72">HP ${hd.hp} · DMG ${hd.dmg} · ${hd.ranged ? 'ranged' : 'melee'} · aura +${hd.auraProd}% nearby production</span><br>
+        <button class="mbtn" style="width:auto;margin-top:6px" data-h="${hd.id}">Summon — ${hd.costGold}💰${hd.costGood ? ` + ${hd.costGood.qty} ${GOODS[hd.costGood.good].name}` : ''}</button>
+      </div>`).join('')}
+    <button class="mbtn" onclick="this.closest('.menu-inner').parentElement.remove()">Close</button>
+  `;
+  d.querySelectorAll('[data-h]').forEach(b => b.addEventListener('click', () => {
+    app.summonHero((b as HTMLElement).dataset.h as never);
+    d.remove();
+  }));
+}
+export function closeHeroDialog() {
+  document.getElementById('hero-dialog')?.closest('.menu-inner')?.parentElement?.remove();
+  document.querySelectorAll('.menu-inner').forEach(m => {
+    if ((m as HTMLElement).id === 'hero-dialog' || m.querySelector('#hero-dialog')) m.parentElement?.remove();
+  });
+}
+
+export function showMessages(app: App) {
+  const d = overlay('advisor');
+  (d.firstChild as HTMLElement).innerHTML = `
+    <h2>Message Archive</h2>
+    ${app.city.messages.slice(0, 60).map(m => `<div class="goalrow"><span>${m.icon} ${m.text}</span><span style="color:#8f7a5a">Yr ${m.year + 1}</span></div>`).join('') || '<div class="sub">No messages yet.</div>'}
+    <button class="mbtn" onclick="this.closest('.menu-inner').parentElement.remove()">Close</button>
+  `;
+}
+
+export function showHelp(fromMain: boolean) {
+  const d = overlay('help-modal');
+  (d.firstChild as HTMLElement).innerHTML = `
+    <h2>How to play</h2>
+    <div style="max-width:600px">
+      <p><b>Found a town:</b> place buildings anywhere you like — a ⛔ badge means "connect me!": lay 🛣️ ROADS so every building touches one. Drop 🏠 HOUSES beside roads, then dig a ⛲ WELL. Farms go on dark green fertile soil; granaries store their harvest; markets send peddlers to feed homes.</p>
+      <p><b>Growth:</b> houses evolve when given water → food → religion → entertainment → education → health and luxury goods (pottery, furniture, oil, wine). Higher housing pays more taxes.</p>
+      <p><b>Defense:</b> prefects stop fires, engineers stop collapses. Walls + towers + forts (which train legions from weapons) hold back raiders. Monsters come with the scenarios — slay them via heroes and spells.</p>
+      <p><b>Magic:</b> temples trickle mana; Ley Pylons on glowing crystal seams and the Arcanum generate plenty. Spells cast from the bottom bar; the Great Library & Arcanum research more.</p>
+      <p><b>Heroes:</b> build the Hall of Heroes to summon Aurelius, Lyra or Magnus. They fight monsters, level up, and boost nearby industry.</p>
+      <p><b>Controls:</b> <span class="kbd">LMB</span> place/select · drag to paint roads/walls · <span class="kbd">RMB drag</span> pan · wheel zoom · <span class="kbd">WASD</span> pan · <span class="kbd">Space</span> pause · <span class="kbd">1–4</span> speed · <span class="kbd">Esc</span> cancel tool.</p>
+    </div>
+    <button class="mbtn" id="help-close">Close</button>
+  `;
+  d.querySelector('#help-close')?.addEventListener('click', () => d.remove());
+  void fromMain;
+}
+
+export function showSettings() {
+  const d = overlay('settings-modal');
+  const inner = d.firstChild as HTMLElement;
+  const render = () => {
+    inner.innerHTML = `
+      <h2>Settings</h2>
+      <label class="goalrow"><span>Sound effects</span><input type="checkbox" id="st-sfx" ${audioState.enabled ? 'checked' : ''}></label>
+      <label class="goalrow"><span>Music</span><input type="checkbox" id="st-music" ${audioState.music ? 'checked' : ''}></label>
+      <label class="goalrow"><span>Volume</span><input type="range" id="st-vol" min="0" max="100" value="${audioState.volume * 100}"></label>
+      <button class="mbtn" id="st-close">Done</button>
+    `;
+    inner.querySelector('#st-sfx')?.addEventListener('change', e => { audioState.enabled = (e.target as HTMLInputElement).checked; });
+    inner.querySelector('#st-music')?.addEventListener('change', e => { audioState.music = (e.target as HTMLInputElement).checked; });
+    inner.querySelector('#st-vol')?.addEventListener('input', e => setVolume(parseInt((e.target as HTMLInputElement).value) / 100));
+    inner.querySelector('#st-close')?.addEventListener('click', () => d.remove());
+  };
+  render();
+  void SPELLS;
+}

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "types": []
+  },
+  "include": ["src"]
+}

vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+export default defineConfig({
+  base: './',
+  build: { target: 'es2022', chunkSizeWarningLimit: 1500 },
+  server: { port: 5173, host: true, allowedHosts: ['.trycloudflare.com'] },
+  preview: { port: 4173, host: true, allowedHosts: ['.trycloudflare.com'] }
+});