Cities pill: rebuild bundle + carry Medieval City & Mountain Stronghold assets (LFS)

Picks up the new Cities sandbox pill (two skins, decoded clickable catalogues)
and curates each pack's runtime sheets + premade-exterior layers into web/assets.
City-pack PNGs are LFS/Xet-tracked per HF's binary-storage policy.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+web/assets/minifantasy/Minifantasy_Medieval_City_v1.1/**/*.png filter=lfs diff=lfs merge=lfs -text
+web/assets/minifantasy/Minifantasy_Mountain_Stronghold_v1.0/**/*.png filter=lfs diff=lfs merge=lfs -text

web/mapSandbox.js

@@ -1,9 +1,9 @@
 // ../auto-battler/src/render/chunkedMap.js
 function createChunkedMap(pixi, host, config) {
   const { Application, Assets, Sprite, Container, Texture, Rectangle, RenderTexture } = pixi;
-  const TILE8 = config.tile ?? 8;
-  const CHUNK7 = config.chunk ?? 32;
-  const CHUNKPX = CHUNK7 * TILE8;
+  const TILE10 = config.tile ?? 8;
+  const CHUNK9 = config.chunk ?? 32;
+  const CHUNKPX = CHUNK9 * TILE10;
   const BG = config.background ?? "#69636f";
   const Z_DEFAULT = config.zoomDefault ?? 1;
   const Z_MIN = config.zoomMin ?? 1 / 32;
@@ -17,10 +17,10 @@ function createChunkedMap(pixi, host, config) {
   const DETAIL_BUDGET = config.detailBudget ?? 1;
   const MACRO_BUDGET = config.macroBudget ?? 8;
   const bounds = config.bounds ? {
-    x0: config.bounds.x0 * TILE8,
-    y0: config.bounds.y0 * TILE8,
-    x1: config.bounds.x1 * TILE8,
-    y1: config.bounds.y1 * TILE8,
+    x0: config.bounds.x0 * TILE10,
+    y0: config.bounds.y0 * TILE10,
+    x1: config.bounds.x1 * TILE10,
+    y1: config.bounds.y1 * TILE10,
     tx0: config.bounds.x0,
     ty0: config.bounds.y0,
     tx1: config.bounds.x1,
@@ -47,12 +47,12 @@ function createChunkedMap(pixi, host, config) {
   const pinch = { on: false, dist: 0 };
   const handlers = {};
   const emit = () => listeners.forEach((fn) => fn(getSnapshot()));
-  const getSnapshot = () => ({ seed, zoom, cx: Math.round(camera.x / TILE8), cy: Math.round(camera.y / TILE8), chunks: chunks.size });
+  const getSnapshot = () => ({ seed, zoom, cx: Math.round(camera.x / TILE10), cy: Math.round(camera.y / TILE10), chunks: chunks.size });
   function tex(source, c, r) {
     const k = source.uid + ":" + c + "," + r;
     let t = texCache.get(k);
     if (!t) {
-      t = new Texture({ source, frame: new Rectangle(c * TILE8, r * TILE8, TILE8, TILE8) });
+      t = new Texture({ source, frame: new Rectangle(c * TILE10, r * TILE10, TILE10, TILE10) });
       texCache.set(k, t);
     }
     return t;
@@ -67,16 +67,16 @@ function createChunkedMap(pixi, host, config) {
     return t;
   }
   function makeChunk(cx, cy) {
-    const x0 = cx * CHUNK7, y0 = cy * CHUNK7;
+    const x0 = cx * CHUNK9, y0 = cy * CHUNK9;
     const tmp = new Container();
     const add = (source, c, r, tx, ty) => {
       const sp = new Sprite(tex(source, c, r));
-      sp.x = tx * TILE8;
-      sp.y = ty * TILE8;
+      sp.x = tx * TILE10;
+      sp.y = ty * TILE10;
       tmp.addChild(sp);
       return sp;
     };
-    const res = config.bake({ cx, cy, x0, y0, seed, chunk: CHUNK7, tile: TILE8, ctx, tmp, app, Sprite, Container, Texture, Rectangle, tex, texFrame, add }) || {};
+    const res = config.bake({ cx, cy, x0, y0, seed, chunk: CHUNK9, tile: TILE10, ctx, tmp, app, Sprite, Container, Texture, Rectangle, tex, texFrame, add }) || {};
     const rt = RenderTexture.create({ width: CHUNKPX, height: CHUNKPX, autoGenerateMipmaps: true, scaleMode: "nearest" });
     rt.source.minFilter = "linear";
     rt.source.mipmapFilter = "linear";
@@ -84,12 +84,12 @@ function createChunkedMap(pixi, host, config) {
     rt.source.updateMipmaps();
     tmp.destroy({ children: true });
     const sprite = new Sprite(rt);
-    sprite.x = x0 * TILE8;
-    sprite.y = y0 * TILE8;
+    sprite.x = x0 * TILE10;
+    sprite.y = y0 * TILE10;
     return { sprite, rt, meta: res.meta ?? null, live: res.live ?? null };
   }
   function chooseMacroLevel(z) {
-    return Math.max(0, Math.min(MACRO_LEVEL_MAX, Math.round(Math.log2(MACRO_TEXEL_PX / (TILE8 * z)))));
+    return Math.max(0, Math.min(MACRO_LEVEL_MAX, Math.round(Math.log2(MACRO_TEXEL_PX / (TILE10 * z)))));
   }
   function makeMacroChunk(L, mcx, mcy) {
     const step = 1 << L, t0x = mcx * MCHUNK * step, t0y = mcy * MCHUNK * step;
@@ -110,9 +110,9 @@ function createChunkedMap(pixi, host, config) {
     const t = Texture.from(cv);
     t.source.scaleMode = "linear";
     const sprite = new Sprite(t);
-    sprite.x = t0x * TILE8;
-    sprite.y = t0y * TILE8;
-    sprite.width = sprite.height = MCHUNK * step * TILE8;
+    sprite.x = t0x * TILE10;
+    sprite.y = t0y * TILE10;
+    sprite.width = sprite.height = MCHUNK * step * TILE10;
     return { sprite, tex: t };
   }
   function coverZoom() {
@@ -169,10 +169,10 @@ function createChunkedMap(pixi, host, config) {
     let c0 = Math.floor((camera.x - halfW) / CHUNKPX) - 1, c1 = Math.floor((camera.x + halfW) / CHUNKPX) + 1;
     let r0 = Math.floor((camera.y - halfH) / CHUNKPX) - 1, r1 = Math.floor((camera.y + halfH) / CHUNKPX) + 1;
     if (bounds) {
-      c0 = Math.max(c0, Math.floor(bounds.tx0 / CHUNK7));
-      c1 = Math.min(c1, Math.floor((bounds.tx1 - 1) / CHUNK7));
-      r0 = Math.max(r0, Math.floor(bounds.ty0 / CHUNK7));
-      r1 = Math.min(r1, Math.floor((bounds.ty1 - 1) / CHUNK7));
+      c0 = Math.max(c0, Math.floor(bounds.tx0 / CHUNK9));
+      c1 = Math.min(c1, Math.floor((bounds.tx1 - 1) / CHUNK9));
+      r0 = Math.max(r0, Math.floor(bounds.ty0 / CHUNK9));
+      r1 = Math.min(r1, Math.floor((bounds.ty1 - 1) / CHUNK9));
     }
     for (const [key, ch] of chunks) {
       const [cx, cy] = key.split(",").map(Number);
@@ -199,7 +199,7 @@ function createChunkedMap(pixi, host, config) {
     return missing.length > DETAIL_BUDGET;
   }
   function reconcileMacro(L) {
-    const px = MCHUNK * (1 << L) * TILE8;
+    const px = MCHUNK * (1 << L) * TILE10;
     const halfW = app.screen.width / 2 / zoom, halfH = app.screen.height / 2 / zoom;
     let c0 = Math.floor((camera.x - halfW) / px) - 1, c1 = Math.floor((camera.x + halfW) / px) + 1;
     let r0 = Math.floor((camera.y - halfH) / px) - 1, r1 = Math.floor((camera.y + halfH) / px) + 1;
@@ -403,7 +403,7 @@ function createChunkedMap(pixi, host, config) {
     if (cameraDirty || genPending) {
       reconcile();
       cameraDirty = false;
-      const tk2 = Math.round(camera.x / TILE8) + "," + Math.round(camera.y / TILE8) + "," + zoom.toFixed(3);
+      const tk2 = Math.round(camera.x / TILE10) + "," + Math.round(camera.y / TILE10) + "," + zoom.toFixed(3);
       if (tk2 !== lastEmitTile) {
         lastEmitTile = tk2;
         emit();
@@ -464,7 +464,7 @@ function createChunkedMap(pixi, host, config) {
   }
   function tileIndexAt(wx, wy) {
     if (!config.tileIndexAt) return null;
-    const cx = Math.floor(wx / CHUNK7), cy = Math.floor(wy / CHUNK7);
+    const cx = Math.floor(wx / CHUNK9), cy = Math.floor(wy / CHUNK9);
     const ch = chunks.get(cx + "," + cy);
     if (!ch) return null;
     return config.tileIndexAt(wx, wy, ch.meta);
@@ -523,7 +523,7 @@ function createChunkedMap(pixi, host, config) {
     ctx = null;
     texCache.clear();
   }
-  return { ready, regenerate, destroy, onChange, getSnapshot, getCamera, tileIndexAt, biomeAt: biomeAt2, getBounds, zoomBy, flyTo, setEnabled, onTick, getEntityLayer, getApp, screenToWorld, worldToScreen, tile: TILE8 };
+  return { ready, regenerate, destroy, onChange, getSnapshot, getCamera, tileIndexAt, biomeAt: biomeAt2, getBounds, zoomBy, flyTo, setEnabled, onTick, getEntityLayer, getApp, screenToWorld, worldToScreen, tile: TILE10 };
 }
 
 // ../auto-battler/src/engine/rng.js
@@ -3313,6 +3313,239 @@ function createDesolateDesertMap(pixi, host, opts = {}) {
   return createChunkedMap(pixi, host, { ...desolateDesertConfig(opts.seed ?? 1), keyboardPan: opts.keyboardPan });
 }
 
+// ../auto-battler/src/render/medievalCity.js
+var MC = "/assets/minifantasy/Minifantasy_Medieval_City_v1.1/Minifantasy_Medieval_City_Assets";
+var MC_TILES_URL = `${MC}/Tileset/Tileset.png`;
+var MC_TILES_SHADOWS_URL = `${MC}/Tileset/Shadows.png`;
+var MC_PROPS_URL = `${MC}/Props/Props.png`;
+var MC_PROPS_SHADOWS_URL = `${MC}/Props/Shadows.png`;
+var MC_MOCKUP_URL = `${MC}/Mockup_Exterior_1.png`;
+var MC_PREMADE_DIR = `${MC}/Premade/Premade_Exterior/Separate_Layers`;
+var TILE8 = 8;
+var CHUNK7 = 32;
+var MC_REF = {
+  dir: MC_PREMADE_DIR,
+  w: 680,
+  h: 552,
+  bg: "#1a1714",
+  layers: [
+    ["Exterior_o-floor", "Floor", "ground"],
+    ["Exterior_n-fences", "Fences", "structure"],
+    ["Exterior_m-walls_1", "Walls 1", "structure"],
+    ["Exterior_l-stairs_and_terraces_1", "Stairs & terraces 1", "structure"],
+    ["Exterior_k-walls_2", "Walls 2", "structure"],
+    ["Exterior_j-stairs_and_terraces_2", "Stairs & terraces 2", "structure"],
+    ["Exterior_i-props", "Props", "scatter"],
+    ["Exterior_h-roof", "Roof", "structure"],
+    ["Exterior_g-turrets_and_annexes", "Turrets & annexes", "structure"],
+    ["Exterior_f-chimneys", "Chimneys", "structure"],
+    ["Exterior_e-city_walls", "City walls", "structure"],
+    ["Exterior_d-props_on_city_walls", "Props on city walls", "scatter"],
+    ["Exterior_c-shadows", "Shadows", "lighting"],
+    ["Exterior_b-pennant_flags", "Pennant flags", "scatter"],
+    ["Exterior_a-night_effect", "Night effect", "lighting"]
+  ]
+};
+var DIRT_BASE2 = [4, 132];
+var DIRT_VARS4 = [[6, 132], [8, 132], [10, 132], [6, 134], [8, 134], [10, 134], [6, 136], [8, 136]];
+var DIRT_RATE2 = 6;
+var COL_DIRT4 = [151, 116, 94];
+var MC_MAP_ASSETS = [MC_TILES_URL];
+var medievalCityConfig = (seed) => ({
+  seed,
+  tile: TILE8,
+  chunk: CHUNK7,
+  background: "#3a2e25",
+  async load({ Assets }) {
+    const ctx = { tiles: null };
+    const t = await Assets.load(MC_TILES_URL);
+    t.source.scaleMode = "nearest";
+    ctx.tiles = t.source;
+    return ctx;
+  },
+  bake({ x0, y0, seed: seed2, ctx, add, accept = () => true }) {
+    for (let ty = 0; ty < CHUNK7; ty++) for (let tx = 0; tx < CHUNK7; tx++) {
+      if (!accept(tx, ty)) continue;
+      const wx = x0 + tx, wy = y0 + ty;
+      add(ctx.tiles, ...sparse(DIRT_BASE2, DIRT_VARS4, wx, wy, 0, DIRT_RATE2, seed2), tx, ty);
+    }
+    return {};
+  },
+  macroColor() {
+    return COL_DIRT4;
+  }
+});
+function createMedievalCityMap(pixi, host, opts = {}) {
+  return createChunkedMap(pixi, host, { ...medievalCityConfig(opts.seed ?? 1), keyboardPan: opts.keyboardPan });
+}
+var MC_TILE_CATALOG = [
+  // ── Ground (band at rows ~130-141) ──────────────────────────────────────────────────────────
+  {
+    name: "Outdoor floor (dirt base + speckle)",
+    frame: [4, 140, 8, 9],
+    tiles: [DIRT_BASE2, ...DIRT_VARS4],
+    used: true,
+    note: "dirt base [4,132] (100% plain) + speckle variants on the even col/row grid (cols 4-11), via sparse(). Laid by the Generated ground"
+  },
+  {
+    name: "Cobble road (tan)",
+    frame: [14, 142, 3, 11],
+    tiles: [[14, 132]],
+    used: false,
+    note: "tan cobblestone road \u2014 FP-format autotile block; a grass-on-dirt block sits just below it"
+  },
+  { name: "Flagstone road (grey)", frame: [18, 142, 3, 13], tiles: [[18, 130]], used: false, note: "grey stone-slab road \u2014 autotile block" },
+  { name: "Brick road (red)", frame: [22, 142, 3, 13], tiles: [[22, 130]], used: false, note: "red brick road \u2014 autotile block" },
+  { name: "Smooth pavement", frame: [26, 136, 3, 5], tiles: [[26, 132]], used: false, note: "flat tan paving (plaza/courtyard)" },
+  { name: "Garden / planting bed", frame: [30, 136, 3, 7], tiles: [[30, 130]], used: false, note: "grass patch + tilled-earth bed" },
+  { name: "Hedge fence (green)", frame: [38, 137, 5, 7], tiles: [[38, 131]], used: false, note: "9-slice green hedge enclosure" },
+  { name: "Picket fence", frame: [45, 140, 5, 11], tiles: [[45, 130]], used: false, note: "light picket fence \u2014 9-slice + gate" },
+  { name: "Wooden fence / gate", frame: [52, 138, 5, 8], tiles: [[52, 131]], used: false, note: "wooden fence/gate frame" },
+  // ── Grates / arches (rows ~120-127) ─────────────────────────────────────────────────────────
+  { name: "Stone arch (gate/bridge)", frame: [12, 122, 5, 3], tiles: [[12, 120]], used: false, note: "open stone archway" },
+  { name: "Iron grate / portcullis", frame: [12, 126, 5, 3], tiles: [[12, 124]], used: false, note: "barred iron gate (sewer/gate)" },
+  // ── Buildings — premade facades + components (3 colour sets: red cols 1-37 / green 39-75 / purple 77-113)
+  {
+    name: "Building facades (\xD73 colours)",
+    frame: [1, 32, 37, 30],
+    tiles: [[1, 3]],
+    used: false,
+    note: "PREMADE full house facades + corner/conical towers \u2014 drop-in buildings. Red cols 1-37, green 39-75, purple 77-113"
+  },
+  {
+    name: "Roof pieces (\xD73 colours)",
+    frame: [1, 60, 37, 24],
+    tiles: [[1, 37]],
+    used: false,
+    note: "ridge / slope / eave / cap / gable \u2014 the roof overlay for assembled buildings; same 3 colour columns"
+  },
+  {
+    name: "Walls A \u2014 light stone (9-slice + door + windows)",
+    frame: [20, 85, 13, 15],
+    tiles: [[20, 71]],
+    used: false,
+    note: "wall 9-slice with baked door + window openings (light tan stone), rows 67-90"
+  },
+  {
+    name: "Walls B \u2014 grey stone (9-slice + door + windows)",
+    frame: [20, 112, 16, 19],
+    tiles: [[20, 94]],
+    used: false,
+    note: "second wall material (grey stone), rows 94-118"
+  },
+  { name: "Doors", frame: [58, 102, 8, 5], tiles: [[58, 98]], used: false, note: "wooden double / arched / portcullis doors" },
+  { name: "Arched windows (glass)", frame: [34, 77, 2, 6], tiles: [[34, 72]], used: false, note: "stained-glass arched windows" }
+  // TODO: split the wall sets into individual 9-slice anchors (BLOCK/FILL/door/window cells) when the
+  // building generator needs them; and enumerate the per-colour roof sub-pieces. No water tiles in this pack.
+];
+var MC_PROP_CATALOG = [
+  { name: "Crates & sacks", frame: [2, 8, 5, 3], tiles: [[2, 8]], used: false, note: "wooden crates + sack" },
+  { name: "Market produce / small goods", frame: [8, 9, 10, 5], tiles: [[8, 9]], used: false, note: "small stall goods (food/wares)" },
+  { name: "Barrel + lamp (stacked)", frame: [22, 9, 1, 7], tiles: [[22, 9]], used: false, note: "1-wide barrel + lantern" },
+  { name: "Market stalls + well", frame: [24, 9, 19, 10], tiles: [[24, 9]], used: false, note: "awning shop stalls + a well/fountain" },
+  { name: "Cloth / meat stalls", frame: [44, 9, 7, 4], tiles: [[44, 9]], used: false, note: "covered market tables" },
+  { name: "Wooden beam", frame: [1, 17, 3, 3], tiles: [[1, 17]], used: false, note: "plank/beam" },
+  { name: "Benches", frame: [3, 19, 2, 6], tiles: [[3, 19]], used: false, note: "wooden benches" },
+  { name: "Post / plank", frame: [6, 17, 1, 3], tiles: [[6, 17]], used: false, note: "tall post" },
+  { name: "Lamp posts", frame: [8, 20, 11, 9], tiles: [[8, 20]], used: false, note: "street lamp posts / torches" },
+  { name: "Furniture & barrels (mixed)", frame: [22, 23, 26, 13], tiles: [[22, 23]], used: false, note: "barrels, tables, signs, cart wheel \u2014 general street/yard clutter" },
+  { name: "Barrels (stacked)", frame: [49, 18, 1, 6], tiles: [[49, 18]], used: false, note: "two stacked barrels" },
+  { name: "Bed / cart", frame: [51, 15, 2, 2], tiles: [[51, 15]], used: false, note: "small bed or hand-cart" }
+];
+
+// ../auto-battler/src/render/mountainStronghold.js
+var MS = "/assets/minifantasy/Minifantasy_Mountain_Stronghold_v1.0/Minifantasy_Mountain_Stronghold_Assets";
+var MS_TILES_URL = `${MS}/Tileset/Tileset.png`;
+var MS_PROPS_URL = `${MS}/Props/Props.png`;
+var MS_MOCKUP_URL = `${MS}/Mockup_Exterior.png`;
+var MS_PREMADE_DIR = `${MS}/Premade/Premade_Exterior/_Separate_Layers`;
+var TILE9 = 8;
+var CHUNK8 = 32;
+var MS_REF = {
+  dir: MS_PREMADE_DIR,
+  w: 488,
+  h: 592,
+  bg: "#14171c",
+  layers: [
+    ["Exterior_l-bg", "Background", "ground"],
+    ["Exterior_k-jagged_cliffs", "Jagged cliffs", "ground"],
+    ["Exterior_j-snow_1", "Snow 1", "ground"],
+    ["Exterior_i-structures_built_into_cliffs", "Structures in cliffs", "structure"],
+    ["Exterior_h-props", "Props", "scatter"],
+    ["Exterior_g-bridges", "Bridges", "structure"],
+    ["Exterior_f-battlements_and_rooftops", "Battlements & rooftops", "structure"],
+    ["Exterior_e-snow_2", "Snow 2", "ground"],
+    ["Exterior_d-doors_windows", "Doors & windows", "structure"],
+    ["Exterior_c-stairs", "Stairs", "structure"],
+    ["Exterior_b-human", "Characters", "scatter"],
+    ["Exterior_a-shadows", "Shadows", "lighting"]
+  ]
+};
+var FLOOR_BASE = [39, 85];
+var FLOOR_VARS = [[40, 85], [39, 86], [40, 86], [39, 87], [40, 87]];
+var FLOOR_RATE = 5;
+var COL_STONE3 = [144, 148, 137];
+var MS_MAP_ASSETS = [MS_TILES_URL];
+var mountainStrongholdConfig = (seed) => ({
+  seed,
+  tile: TILE9,
+  chunk: CHUNK8,
+  background: "#2c2f2c",
+  async load({ Assets }) {
+    const ctx = { tiles: null };
+    const t = await Assets.load(MS_TILES_URL);
+    t.source.scaleMode = "nearest";
+    ctx.tiles = t.source;
+    return ctx;
+  },
+  bake({ x0, y0, seed: seed2, ctx, add, accept = () => true }) {
+    for (let ty = 0; ty < CHUNK8; ty++) for (let tx = 0; tx < CHUNK8; tx++) {
+      if (!accept(tx, ty)) continue;
+      const wx = x0 + tx, wy = y0 + ty;
+      add(ctx.tiles, ...sparse(FLOOR_BASE, FLOOR_VARS, wx, wy, 0, FLOOR_RATE, seed2), tx, ty);
+    }
+    return {};
+  },
+  macroColor() {
+    return COL_STONE3;
+  }
+});
+function createMountainStrongholdMap(pixi, host, opts = {}) {
+  return createChunkedMap(pixi, host, { ...mountainStrongholdConfig(opts.seed ?? 1), keyboardPan: opts.keyboardPan });
+}
+var MS_TILE_CATALOG = [
+  // ── Floor band (rows 85-108) ─────────────────────────────────────────────────────────────────
+  {
+    name: "Stone floor (grey + shades)",
+    frame: [38, 107, 3, 23],
+    tiles: [FLOOR_BASE, ...FLOOR_VARS],
+    used: true,
+    note: "grey floor base [39,85] + variants, via sparse() (Generated ground). Also green-grey [42,85] & brown [46,85] shades"
+  },
+  { name: "Flagstone courtyard", frame: [101, 107, 19, 23], tiles: [[101, 85]], used: false, note: "large paved courtyard / autotile area" },
+  { name: "Hanging banners (red)", frame: [123, 107, 5, 16], tiles: [[123, 92]], used: false, note: "cloth banners draped on walls" },
+  // ── Walls / structures (snowy rows 0-42; plain rows 43-84) ───────────────────────────────────
+  { name: "Cliff cave / tunnel mouth", frame: [1, 28, 13, 27], tiles: [[1, 2]], used: false, note: "dark opening bored into the cliff (snowy; plain [1,45])" },
+  { name: "Fortress wall (9-slice + windows)", frame: [34, 24, 13, 24], tiles: [[34, 1]], used: false, note: "stone wall block with baked windows (snowy; plain [34,44])" },
+  { name: "Wall with arched door", frame: [61, 22, 9, 20], tiles: [[61, 3]], used: false, note: "wall section with an arched doorway" },
+  { name: "Wall edges / pilasters", frame: [28, 25, 2, 15], tiles: [[28, 11]], used: false, note: "vertical wall-edge / pilaster strips" },
+  { name: "Corner tower", frame: [156, 35, 11, 30], tiles: [[156, 6]], used: false, note: "round corner tower (snowy; plain [156,49])" },
+  { name: "Curtain wall (tall)", frame: [170, 36, 7, 36], tiles: [[170, 1]], used: false, note: "tall curtain-wall section" },
+  { name: "Great gate arch", frame: [180, 36, 23, 37], tiles: [[180, 0]], used: false, note: "large gatehouse archway (snowy; plain [180,43])" },
+  { name: "Bridge / aqueduct arch", frame: [102, 27, 24, 23], tiles: [[102, 5]], used: false, note: "arched stone bridge / aqueduct span" },
+  { name: "Battlements (crenellations)", frame: [148, 35, 7, 9], tiles: [[148, 27]], used: false, note: "wall-top merlons + crenellations" },
+  { name: "Arched gateway opening", frame: [16, 67, 7, 12], tiles: [[16, 56]], used: false, note: "open arched gateway (plain set)" }
+  // TODO: split wall blocks into 9-slice cells for the building generator (Phase 3); stairs/snow detail.
+];
+var MS_PROP_CATALOG = [
+  { name: "Crates & stone braziers", frame: [1, 16, 7, 15], tiles: [[1, 16]], used: false, note: "wooden crates + stone fire braziers/stands" },
+  { name: "Wooden table / cart", frame: [9, 10, 3, 9], tiles: [[9, 10]], used: false, note: "table or hand-cart" },
+  { name: "Banners, racks & barrels", frame: [13, 17, 20, 17], tiles: [[13, 17]], used: false, note: "hanging banners, weapon racks, barrels, bones \u2014 mixed hall clutter" },
+  { name: "Rubble / small rocks", frame: [3, 33, 1, 13], tiles: [[3, 33]], used: false, note: "thin rubble columns (also at [9] and [23])" },
+  { name: "Snow-capped boulders", frame: [14, 33, 7, 14], tiles: [[14, 33]], used: false, note: "large rocks with snow" },
+  { name: "Icy boulders", frame: [26, 33, 7, 14], tiles: [[26, 33]], used: false, note: "ice-glazed boulders" }
+];
+
 // ../auto-battler/src/render/sceneViewer.js
 function createSceneViewer(pixi, host, { layers, dir, sceneW, sceneH, background = "#15121b", pulse = null }) {
   const { Application, Assets, Sprite, Container } = pixi;
@@ -3651,10 +3884,10 @@ function createTileViewer(pixi, host, cfg) {
     root = new Container();
     app.stage.addChild(root);
     const skin = skins[skinKey];
-    const TILE8 = skin.tile || 8;
-    const res = render3({ app, root, skin, seed, TILE: TILE8, tex, sources, Sprite, Graphics, Container }) || {};
+    const TILE10 = skin.tile || 8;
+    const res = render3({ app, root, skin, seed, TILE: TILE10, tex, sources, Sprite, Graphics, Container }) || {};
     lastBounds = res.bounds || null;
-    lastTile = res.tile ?? TILE8;
+    lastTile = res.tile ?? TILE10;
     lastSnapshot = res.snapshot || {};
     if (res.tick) {
       tick = res.tick;
@@ -3728,19 +3961,19 @@ function createInteriorViewer(pixi, host, opts = {}) {
     fit
   });
 }
-function render({ root, skin, seed, TILE: TILE8, tex, sources, Sprite, Graphics }) {
+function render({ root, skin, seed, TILE: TILE10, tex, sources, Sprite, Graphics }) {
   const src = sources.get(skin.url);
   const { W, H, floor, rooms, bounds } = generateRooms(seed);
   const isF = (x, y) => x >= 0 && y >= 0 && x < W && y < H && floor[y * W + x] === 1;
   const addS = (source, coord, x, y) => {
-    const sp = new Sprite(tex(source, coord[0], coord[1], TILE8));
-    sp.x = x * TILE8;
-    sp.y = y * TILE8;
+    const sp = new Sprite(tex(source, coord[0], coord[1], TILE10));
+    sp.x = x * TILE10;
+    sp.y = y * TILE10;
     root.addChild(sp);
     return sp;
   };
   const add = (coord, x, y) => addS(src, coord, x, y);
-  const c = { skin, TILE: TILE8, W, H, rooms, seed, isF, add, addS, root, sources, Graphics };
+  const c = { skin, TILE: TILE10, W, H, rooms, seed, isF, add, addS, root, sources, Graphics };
   drawWalls(c);
   drawFloor(c);
   drawShadows(c);
@@ -3750,18 +3983,18 @@ function render({ root, skin, seed, TILE: TILE8, tex, sources, Sprite, Graphics
   const tick = torch.flames.length && torch.flameSrc ? (ticker) => {
     animPhase += 0.14 * ticker.deltaTime;
     const fi = Math.floor(animPhase) % torch.flameFrames;
-    for (const fl of torch.flames) fl.sp.texture = tex(torch.flameSrc, fl.col0 + torch.flameStride * fi, fl.row, TILE8);
+    for (const fl of torch.flames) fl.sp.texture = tex(torch.flameSrc, fl.col0 + torch.flameStride * fi, fl.row, TILE10);
     if (torch.glowG) torch.glowG.alpha = 0.78 + 0.22 * Math.sin(animPhase * 0.9);
   } : null;
-  return { bounds, tile: TILE8, snapshot: { rooms: rooms.length }, tick };
+  return { bounds, tile: TILE10, snapshot: { rooms: rooms.length }, tick };
 }
-function fit(app, root, b, TILE8) {
+function fit(app, root, b, TILE10) {
   const sw = app.screen.width, sh = app.screen.height;
-  const cw = (b.x1 - b.x0 + 3) * TILE8, ch = (b.y1 - b.y0 + 4) * TILE8;
+  const cw = (b.x1 - b.x0 + 3) * TILE10, ch = (b.y1 - b.y0 + 4) * TILE10;
   const s = Math.max(1, Math.floor(Math.min(sw / cw, sh / ch)));
   root.scale.set(s);
-  root.x = Math.round((sw - cw * s) / 2 - (b.x0 - 1) * TILE8 * s);
-  root.y = Math.round((sh - ch * s) / 2 - (b.y0 - 2) * TILE8 * s);
+  root.x = Math.round((sw - cw * s) / 2 - (b.x0 - 1) * TILE10 * s);
+  root.y = Math.round((sh - ch * s) / 2 - (b.y0 - 2) * TILE10 * s);
 }
 function drawWalls(c) {
   if (c.skin.wall && !c.skin.walls) drawBackWall(c);
@@ -3869,15 +4102,15 @@ function drawFloor(c) {
   }
 }
 function drawShadows(c) {
-  const { W, H, TILE: TILE8, isF, root, Graphics } = c;
+  const { W, H, TILE: TILE10, isF, root, Graphics } = c;
   const shade = new Graphics();
   for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
     if (!isF(x, y)) continue;
     if (!isF(x, y - 1)) {
-      shade.rect(x * TILE8, y * TILE8, TILE8, TILE8).fill({ color: 0, alpha: 0.3 });
-      if (isF(x, y + 1)) shade.rect(x * TILE8, (y + 1) * TILE8, TILE8, TILE8).fill({ color: 0, alpha: 0.12 });
+      shade.rect(x * TILE10, y * TILE10, TILE10, TILE10).fill({ color: 0, alpha: 0.3 });
+      if (isF(x, y + 1)) shade.rect(x * TILE10, (y + 1) * TILE10, TILE10, TILE10).fill({ color: 0, alpha: 0.12 });
     } else if (!isF(x - 1, y) || !isF(x + 1, y)) {
-      shade.rect(x * TILE8, y * TILE8, TILE8, TILE8).fill({ color: 0, alpha: 0.12 });
+      shade.rect(x * TILE10, y * TILE10, TILE10, TILE10).fill({ color: 0, alpha: 0.12 });
     }
   }
   root.addChild(shade);
@@ -3924,7 +4157,7 @@ function drawProps(c) {
   }
 }
 function drawTorches(c) {
-  const { skin, W, H, TILE: TILE8, isF, sources, root, Graphics, addS } = c;
+  const { skin, W, H, TILE: TILE10, isF, sources, root, Graphics, addS } = c;
   const torch = skin.torch, torchSrc = torch && sources.get(torch.url);
   if (!(torch && torchSrc)) return { flames: [], glowG: null, flameSrc: null, flameStride: 1, flameFrames: 1 };
   const flames = [];
@@ -3933,8 +4166,8 @@ function drawTorches(c) {
   for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
     if (!isF(x, y) || isF(x, y - 1)) continue;
     if ((x * 7 + y * 13) % 5 !== 0) continue;
-    const cx = (x + f.w / 2) * TILE8, cy = (y - 1) * TILE8;
-    for (const [r, a] of [[3.2, 0.05], [2.1, 0.08], [1.2, 0.13]]) glow.circle(cx, cy, r * TILE8).fill({ color: torch.glow, alpha: a });
+    const cx = (x + f.w / 2) * TILE10, cy = (y - 1) * TILE10;
+    for (const [r, a] of [[3.2, 0.05], [2.1, 0.08], [1.2, 0.13]]) glow.circle(cx, cy, r * TILE10).fill({ color: torch.glow, alpha: a });
     spots.push([x, y]);
   }
   root.addChild(glow);
@@ -3975,7 +4208,7 @@ function createTowerViewer(pixi, host, opts = {}) {
     fit: fit2
   });
 }
-function render2({ root, skin, seed, TILE: TILE8, tex, sources, Sprite, Graphics }) {
+function render2({ root, skin, seed, TILE: TILE10, tex, sources, Sprite, Graphics }) {
   const src = sources.get(skin.url);
   const shaftW = skin.crown ? skin.crown.shaftW : (skin.roof?.w ?? 7) - 2;
   const winH = skin.window?.h ?? 2, doorH = skin.door?.h ?? 2;
@@ -3992,14 +4225,14 @@ function render2({ root, skin, seed, TILE: TILE8, tex, sources, Sprite, Graphics
     const corn = spec.roof === "none" ? 0 : 1;
     const dy = -(h2 + PLINTH - 1);
     const add = (coord, x, y) => {
-      const sp = new Sprite(tex(src, coord[0], coord[1], TILE8));
-      sp.x = (x + ox) * TILE8;
-      sp.y = (y + dy) * TILE8;
+      const sp = new Sprite(tex(src, coord[0], coord[1], TILE10));
+      sp.x = (x + ox) * TILE10;
+      sp.y = (y + dy) * TILE10;
       root.addChild(sp);
       return sp;
     };
     const shadow = new Graphics();
-    shadow.ellipse((ox + w / 2) * TILE8, TILE8 - TILE8 * 0.3, wb / 2 * TILE8 + TILE8 * 0.5, TILE8 * 0.7).fill({ color: 0, alpha: 0.22 });
+    shadow.ellipse((ox + w / 2) * TILE10, TILE10 - TILE10 * 0.3, wb / 2 * TILE10 + TILE10 * 0.5, TILE10 * 0.7).fill({ color: 0, alpha: 0.22 });
     root.addChild(shadow);
     for (let y = 0; y < h2; y++) for (let x = 0; x < w; x++) {
       const top = y === 0, bot = y === h2 - 1, left = x === 0, right = x === w - 1;
@@ -4061,19 +4294,34 @@ function render2({ root, skin, seed, TILE: TILE8, tex, sources, Sprite, Graphics
     ox += w + GAP;
   }
   const bounds = { x0: Math.min(x0, 0), y0, x1: Math.max(x1, ox - GAP), y1: 2 };
-  return { bounds, tile: TILE8, snapshot: { w: spec0?.w ?? 0, h: spec0?.h ?? 0, roof: spec0?.roof } };
+  return { bounds, tile: TILE10, snapshot: { w: spec0?.w ?? 0, h: spec0?.h ?? 0, roof: spec0?.roof } };
 }
-function fit2(app, root, b, TILE8) {
+function fit2(app, root, b, TILE10) {
   const sw = app.screen.width, sh = app.screen.height;
-  const cw = (b.x1 - b.x0) * TILE8, ch = (b.y1 - b.y0) * TILE8;
-  const pad = 4 * TILE8;
+  const cw = (b.x1 - b.x0) * TILE10, ch = (b.y1 - b.y0) * TILE10;
+  const pad = 4 * TILE10;
   const s = Math.max(1, Math.floor(Math.min(sw / (cw + pad), sh / (ch + pad))));
   root.scale.set(s);
-  root.x = Math.round((sw - cw * s) / 2 - b.x0 * TILE8 * s);
-  root.y = Math.round((sh - ch * s) / 2 - b.y0 * TILE8 * s);
+  root.x = Math.round((sw - cw * s) / 2 - b.x0 * TILE10 * s);
+  root.y = Math.round((sh - ch * s) / 2 - b.y0 * TILE10 * s);
 }
 
 // ../auto-battler/src/render/mapConfigs.js
+var CITY_SKINS = {
+  medieval: { label: "Medieval City", url: MC_TILES_URL },
+  mountain: { label: "Mountain Stronghold", url: MS_TILES_URL }
+};
+var CITY_REF = { medieval: MC_REF, mountain: MS_REF };
+var citySheets = (skin) => ({
+  medieval: [
+    { key: "tiles", label: "Tiles", url: MC_TILES_URL, catalog: MC_TILE_CATALOG },
+    { key: "props", label: "Props", url: MC_PROPS_URL, catalog: MC_PROP_CATALOG }
+  ],
+  mountain: [
+    { key: "tiles", label: "Tiles", url: MS_TILES_URL, catalog: MS_TILE_CATALOG },
+    { key: "props", label: "Props", url: MS_PROPS_URL, catalog: MS_PROP_CATALOG }
+  ]
+})[skin] || [];
 var ASSET = "/assets/minifantasy";
 var ORC4 = `${ASSET}/Minifantasy_Orc_Kingdom_v1.0/Minifantasy_Orc_Kingdom_Assets`;
 var NECRO4 = `${ASSET}/Minifantasy_Necropolis_v1.0/Minifantasy_Necropolis_Assets`;
@@ -4251,6 +4499,15 @@ var MAP_ASSET_URLS = [.../* @__PURE__ */ new Set([
   ...NECRO_SHEETS.map((s) => s.url),
   ...ORC_SHEETS.map((s) => s.url),
   ...FP_SHEETS.map((s) => s.url),
+  // Cities: each skin's generated-ground sheet, clickable Tiles/Props, and premade reference layers.
+  ...MC_MAP_ASSETS,
+  MC_TILES_URL,
+  MC_PROPS_URL,
+  ...sceneUrls(MC_REF.dir, MC_REF.layers),
+  ...MS_MAP_ASSETS,
+  MS_TILES_URL,
+  MS_PROPS_URL,
+  ...sceneUrls(MS_REF.dir, MS_REF.layers),
   // Premade-scene reference layers.
   ...sceneUrls(NECRO_EXT_DIR, NECRO_LAYERS),
   ...sceneUrls(ORC_LAYER_DIR, ORC_LAYERS),
@@ -4277,7 +4534,7 @@ function h(tag, attrs, ...kids) {
 var randomSeed = () => Math.floor(Date.now() % 1e6 + Math.random() * 1e6) >>> 0;
 var infiniteMeta = (s) => s?.zoom != null ? `\u221E \xB7 seed ${s.seed} \xB7 (${s.cx}, ${s.cy}) \xB7 ${s.zoom.toFixed(2)}\xD7 \xB7 drag / WASD / scroll` : "loading\u2026";
 function makeGridOverlay() {
-  const TILE8 = 8;
+  const TILE10 = 8;
   const cv = h("canvas", { class: "necro-grid-overlay" });
   cv.style.display = "none";
   let raf = 0, ctrl = null;
@@ -4290,12 +4547,12 @@ function makeGridOverlay() {
       if (cv.height !== H) cv.height = H;
       const ctx = cv.getContext("2d");
       ctx.clearRect(0, 0, W, H);
-      const z = cam.zoom, cell = TILE8 * z;
+      const z = cam.zoom, cell = TILE10 * z;
       if (cell >= 6) {
-        const sx = (wx) => (wx * TILE8 - cam.x) * z + W / 2;
-        const sy = (wy) => (wy * TILE8 - cam.y) * z + H / 2;
-        const x0 = Math.floor((cam.x - W / 2 / z) / TILE8), x1 = Math.ceil((cam.x + W / 2 / z) / TILE8);
-        const y0 = Math.floor((cam.y - H / 2 / z) / TILE8), y1 = Math.ceil((cam.y + H / 2 / z) / TILE8);
+        const sx = (wx) => (wx * TILE10 - cam.x) * z + W / 2;
+        const sy = (wy) => (wy * TILE10 - cam.y) * z + H / 2;
+        const x0 = Math.floor((cam.x - W / 2 / z) / TILE10), x1 = Math.ceil((cam.x + W / 2 / z) / TILE10);
+        const y0 = Math.floor((cam.y - H / 2 / z) / TILE10), y1 = Math.ceil((cam.y + H / 2 / z) / TILE10);
         ctx.strokeStyle = "rgba(255,70,70,0.45)";
         ctx.lineWidth = 1;
         ctx.beginPath();
@@ -4724,6 +4981,7 @@ var GEN_MODES = [{ key: "generated", label: "Generated" }, { key: "tilesheet", l
 var SKIN_MODES = [{ key: "generated", label: "Generated" }, { key: "reference", label: "Reference" }, { key: "tilesheet", label: "Tilesheet" }];
 var skinList = (skins) => Object.entries(skins).map(([key, s]) => ({ key, label: s.label }));
 var sceneFromRef = (pixi, host, ref) => createSceneViewer(pixi, host, { layers: ref.layers, dir: ref.dir, sceneW: ref.w, sceneH: ref.h, background: ref.bg, pulse: ref.pulse });
+var CITY_MAPS = { medieval: createMedievalCityMap, mountain: createMountainStrongholdMap };
 var PAGES = {
   world: (pixi, body, opts) => makePage(pixi, body, {
     title: "World Map",
@@ -4796,6 +5054,20 @@ var PAGES = {
     sheets: () => DD_SHEETS,
     generatedMeta: infiniteMeta
   }),
+  // Cities — same skin-based shape as Interiors/Towers (one pill, a style picker), with the standard
+  // Generated / Reference / Tilesheet sub-pills. Reference = the pack's layer-by-layer premade;
+  // Tilesheet = clickable Tiles/Props catalogue; Generated = the outdoor-floor ground (buildings TBD).
+  cities: (pixi, body) => makePage(pixi, body, {
+    title: "Cities",
+    subtitle: () => "assembled \xB7 layered",
+    modes: SKIN_MODES,
+    skins: skinList(CITY_SKINS),
+    grid: true,
+    makeGenerated: (p, host, seed, skin) => CITY_MAPS[skin](p, host, { seed }),
+    makeScene: (p, host, skin) => sceneFromRef(p, host, CITY_REF[skin]),
+    sheets: (skin) => citySheets(skin),
+    generatedMeta: (snap, label2) => snap ? `ground \xB7 ${label2} \xB7 seed ${snap.seed}` : "loading\u2026"
+  }),
   interiors: (pixi, body) => makePage(pixi, body, {
     title: "Interiors",
     modes: SKIN_MODES,
@@ -4821,6 +5093,7 @@ var NAV = [
   ["gameworld", "Game World"],
   ["world", "World Map"],
   { group: "biome", label: "Biome", pages: [["plains", "Forgotten Plains"], ["desert", "Desolate Desert"], ["orc", "Orc Kingdom"], ["necropolis", "Necropolis"]] },
+  ["cities", "Cities"],
   ["interiors", "Interiors"],
   ["towers", "Towers"]
 ];