feat: 64x64 world, fullscreen no-scroll HUD, distant-view glimpse band

Dami committed Aug 163652add

- MAP_SIZE back to 64; mapgen climate bands, biome blobs, lakes and veins now
  scale by area (old 128 sims still replay at their locked config)
- app locks to 100dvh with internal-only scrolling; endgame is a dismissible
  overlay with a HUD victor chip; home page in scroll columns
- distant view: persistent glimpse band (vision +5) reveals terrain CATEGORY
  only ('.', 'f', '^', 'w' - veins hidden), hashed state, rendered at 35%
  alpha; TribeView.distant for scripts; overlay no longer intercepts the
  replay invite in world mode

commit: 3652add34c5dcd55cf4057c4f3df248f533c48bc
parent: 87d1b333961f97129aac2471af5804e8817a12e5
author: Dami <dami.etoile@gmail.com>

19 files changed, +373 -70wrap lines

M	docs/llms.txt	6	+-
M	packages/engine/README.md	2	+-
M	packages/engine/src/constants.ts	4	+
M	packages/engine/src/mapgen.ts	30	++++--
M	packages/engine/src/world.ts	44	++++++++
M	packages/engine/test/engine.test.ts	34	++++++-
M	packages/engine/tsconfig.tsbuildinfo	2	+-
M	packages/protocol/src/game.ts	18	+++-
M	packages/protocol/tsconfig.tsbuildinfo	2	+-
M	packages/script-host/test/fixtures.ts	1	+
M	packages/script-host/tsconfig.tsbuildinfo	2	+-
M	web/src/dev-mock.ts	1	+
M	web/src/pages/home.ts	9	++-
M	web/src/pages/viewer.ts	83	+++++++++++++---
M	web/src/render/map-view.ts	31	+++++-
M	web/src/sim-worker.ts	8	++
M	web/src/sim/frames.ts	2	+
M	web/src/style.css	158	+++++++++++++++++++++++++-----
M	worker/src/mcp/docs.ts	6	+-

M docs/llms.txt +3 -3

@@ -83,7 +83,7 @@ the sim bundle (metadata + locked script sources) is public at
8383 ## The mental model: govern, don't micromanage8484 8585 Your tribe is a POPULATION, not a unit roster. It starts as one settlement of86-1,200 citizens on a 128×128 map and grows into a multi-settlement polity of86+1,200 citizens on a 64×64 map and grows into a multi-settlement polity of8787 thousands. The simulation is dense cohort accounting: citizens are counted,8888 apportioned into professions, fed, housed, and taxed by events — never8989 addressed individually.@@ -289,7 +289,7 @@ territory means buying metal or taking someone else's.
289289 | --- | --- | --- |290290 | `tick` | number | Current tick, 0-based. |291291 | `tribeId` | number | Your tribe id. |292-| `mapSize` | number | Map is `mapSize × mapSize` tiles (128). |292+| `mapSize` | number | Map is `mapSize × mapSize` tiles (64). |293293 | `terrain` | string | Explored terrain (legend above). |294294 | `settlements` | `SettlementView[]` | Your settlements. |295295 | `warbands` | `WarbandView[]` | Your warbands. |@@ -460,7 +460,7 @@ signaling, and coordination between agents.
460460 461461 | Limit | Value | Consequence |462462 | --- | --- | --- |463-| Map size | 128 × 128 | — |463+| Map size | 64 × 64 | — |464464 | Max ticks per sim | 10,000 | Sim ends at cap; highest score wins. |465465 | Tribes per sim | 2–8 | One script per tribe slot. |466466 | Starting population | 1,200 | One founding settlement per tribe. |

M packages/engine/README.md +1 -1

@@ -59,7 +59,7 @@ reference for them.
5959     200-tick cooldown); `tick++`; a `MetricsFrame` is computed when the new6060     tick is a multiple of 10 and on the final tick, then interval flows reset.6161 62-## Map (128×128 default, seeded)62+## Map (64×64 default, seeded; band/blob/vein densities scale with size)6363 6464 Terrain chars: `.` plains - `f` forest - `h` hills - `m` mountain - `w` ocean6565 (impassable) - `r` river (passable) - `s` swamp - `t` steppe - `a` arctic -

M packages/engine/src/constants.ts +4 -0

@@ -534,6 +534,10 @@ export const RESOURCE_VALUE: Record<Resource, number> = {
534534 /** Settlement vision = territoryRadius + this. */535535 export const SETTLEMENT_VISION_BONUS = 2;536536 export const UNIT_VISION = 6; // warbands & caravans537+/** Glimpse band beyond vision: terrain CATEGORY only (TribeView.distant). */538+export const DISTANT_VISION_BONUS = 5;539+/** Terrain code -> DistantChar category ('.' open, 'f' vegetation, '^' highland, 'w' water). */540+export const DISTANT_CHARS = '.f^^wwf..^^^';537541 export const SIGHT_COOLDOWN = 200;538542 539543 // ---------------------------------------------------------------------------

M packages/engine/src/mapgen.ts +19 -11

@@ -112,12 +112,15 @@ export function generateMap(size: number, tribeCount: number, rng: Rng): Generat
112112     }113113   }114114 115-  // --- Arctic caps and steppe bands (north & south). ---115+  // --- Arctic caps and steppe bands (north & south), scaled to map size116+  // (10/6 rows at the original 128; proportional on smaller worlds). ---117+  const arcticRows = Math.max(3, Math.trunc((size * 10) / 128));118+  const steppeRows = Math.max(2, Math.trunc((size * 6) / 128));116119   for (let y = 0; y < size; y++) {117120     const fromEdge = Math.min(y, size - 1 - y);118121     let t = -1;119-    if (fromEdge < 10) t = TC.ARCTIC;120-    else if (fromEdge < 16) t = TC.STEPPE;122+    if (fromEdge < arcticRows) t = TC.ARCTIC;123+    else if (fromEdge < arcticRows + steppeRows) t = TC.STEPPE;121124     if (t === -1) continue;122125     for (let x = 0; x < size; x++) {123126       const i = idx(x, y);@@ -134,15 +137,18 @@ export function generateMap(size: number, tribeCount: number, rng: Rng): Generat
134137       blob(terrain, size, cx, cy, r, t, over);135138     }136139   };137-  scatter(TC.FOREST, 40, 2, 4, TC.PLAINS);138-  scatter(TC.HILLS, 25, 2, 3, TC.PLAINS);140+  // Densities were tuned at 128x128; scale counts by area for other sizes.141+  const byArea = (n: number, min: number): number =>142+    Math.max(min, Math.trunc((n * size * size) / (128 * 128)));143+  scatter(TC.FOREST, byArea(40, 8), 2, 4, TC.PLAINS);144+  scatter(TC.HILLS, byArea(25, 5), 2, 3, TC.PLAINS);139145   // Mountains over hills (cores), plus a few standalone ranges over plains.140-  scatter(TC.MOUNTAIN, 12, 1, 2, TC.HILLS);141-  scatter(TC.MOUNTAIN, 4, 1, 2, TC.PLAINS);142-  scatter(TC.SWAMP, 10, 1, 2, TC.PLAINS);146+  scatter(TC.MOUNTAIN, byArea(12, 3), 1, 2, TC.HILLS);147+  scatter(TC.MOUNTAIN, byArea(4, 1), 1, 2, TC.PLAINS);148+  scatter(TC.SWAMP, byArea(10, 2), 1, 2, TC.PLAINS);143149 144150   // --- Lakes. ---145-  for (let i = 0; i < 5; i++) {151+  for (let i = 0; i < byArea(5, 1); i++) {146152     const cx = 8 + rng.int(size - 16);147153     const cy = 8 + rng.int(size - 16);148154     blob(terrain, size, cx, cy, 2 + rng.int(2), TC.WATER, -1);@@ -195,7 +201,8 @@ export function generateMap(size: number, tribeCount: number, rng: Rng): Generat
195201 196202   // --- Ore & gold veins on hills/mountain. ---197203   let ore = 0;198-  for (let tries = 0; tries < 200 && ore < 35; tries++) {204+  const oreTarget = Math.max(10, Math.trunc((35 * size * size) / (128 * 128)));205+  for (let tries = 0; tries < 200 && ore < oreTarget; tries++) {199206     const x = rng.int(size);200207     const y = rng.int(size);201208     const t = terrain[idx(x, y)]!;@@ -205,7 +212,8 @@ export function generateMap(size: number, tribeCount: number, rng: Rng): Generat
205212     }206213   }207214   let gold = 0;208-  for (let tries = 0; tries < 100 && gold < 8; tries++) {215+  const goldTarget = Math.max(2, Math.trunc((8 * size * size) / (128 * 128)));216+  for (let tries = 0; tries < 100 && gold < goldTarget; tries++) {209217     const x = rng.int(size);210218     const y = rng.int(size);211219     const t = terrain[idx(x, y)]!;

M packages/engine/src/world.ts +44 -0

@@ -287,6 +287,10 @@ interface Tribe {
287287   explored: Uint8Array;288288   exploredDirty: boolean;289289   terrainCache: string | null;290+  /** Category-glimpsed band beyond explored (persistent, hashed). */291+  glimpsed: Uint8Array;292+  glimpsedDirty: boolean;293+  distantCache: string | null;290294   // Counters (buildingsCompleted feeds score and is hashed; the rest are291295   // metrics narration — cumulative unless noted).292296   buildingsCompleted: number;@@ -388,6 +392,9 @@ class World implements EngineWorld {
388392         routes: [],389393         explored: new Uint8Array(this.size * this.size),390394         exploredDirty: true,395+        glimpsed: new Uint8Array(this.size * this.size),396+        glimpsedDirty: true,397+        distantCache: null,391398         terrainCache: null,392399         buildingsCompleted: 0,393400         battlesWon: 0,@@ -648,6 +655,7 @@ class World implements EngineWorld {
648655   private reveal(tribe: number, x: number, y: number, radius: number): void {649656     const tr = this.tribes[tribe]!;650657     const ex = tr.explored;658+    const gl = tr.glimpsed;651659     const s = this.size;652660     const x0 = Math.max(0, x - radius);653661     const x1 = Math.min(s - 1, x + radius);@@ -659,6 +667,25 @@ class World implements EngineWorld {
659667         if (ex[row + xx] === 0) {660668           ex[row + xx] = 1;661669           tr.exploredDirty = true;670+          if (gl[row + xx] === 1) {671+            // Promoted from glimpse to explored: distant string loses it.672+            tr.glimpsedDirty = true;673+          }674+        }675+      }676+    }677+    // Distant glimpse band: category-only knowledge past the vision edge.678+    const gr = radius + C.DISTANT_VISION_BONUS;679+    const gx0 = Math.max(0, x - gr);680+    const gx1 = Math.min(s - 1, x + gr);681+    const gy0 = Math.max(0, y - gr);682+    const gy1 = Math.min(s - 1, y + gr);683+    for (let yy = gy0; yy <= gy1; yy++) {684+      const row = yy * s;685+      for (let xx = gx0; xx <= gx1; xx++) {686+        if (gl[row + xx] === 0) {687+          gl[row + xx] = 1;688+          tr.glimpsedDirty = true;662689         }663690       }664691     }@@ -2943,6 +2970,21 @@ class World implements EngineWorld {
29432970       terrainStr = chars.join('');29442971       tribe.terrainCache = terrainStr;29452972       tribe.exploredDirty = false;2973+      tribe.glimpsedDirty = true; // explored changes shrink the distant band2974+    }2975+2976+    let distantStr = tribe.distantCache;2977+    if (tribe.glimpsedDirty || distantStr === null) {2978+      const chars = new Array<string>(s * s);2979+      const ex = tribe.explored;2980+      const gl = tribe.glimpsed;2981+      for (let i = 0; i < s * s; i++) {2982+        chars[i] =2983+          gl[i] === 1 && ex[i] === 0 ? C.DISTANT_CHARS[this.terrain[i]!]! : '?';2984+      }2985+      distantStr = chars.join('');2986+      tribe.distantCache = distantStr;2987+      tribe.glimpsedDirty = false;29462988     }29472989 29482990     const settlements: SettlementView[] = [];@@ -3140,6 +3182,7 @@ class World implements EngineWorld {
31403182       tribeId,31413183       mapSize: s,31423184       terrain: terrainStr,3185+      distant: distantStr,31433186       settlements,31443187       warbands,31453188       caravans,@@ -3386,6 +3429,7 @@ class World implements EngineWorld {
33863429         h.int(r.permille);33873430       }33883431       h.bytes(t.explored);3432+      h.bytes(t.glimpsed);33893433     }33903434     for (const s of this.settlements) {33913435       h.int(s.id);

M packages/engine/test/engine.test.ts +31 -3

@@ -124,9 +124,9 @@ const GOLDEN_CONFIG = { seed: '123456789', tribeCount: 4, mapSize: 128, maxTicks
124124 // simulation behavior must regenerate these (see scripts in repo history:125125 // run this test with GOLDEN printed on failure).126126 const GOLDEN_HASHES: Record<number, string> = {127-  0: 'aa20b26cd833e3ef',128-  100: 'a38a105355f64efc',129-  1000: 'd19b89fa4d2ac6ad',127+  0: '333d954c596fd75f',128+  100: 'fa00bdfbcc6b5574',129+  1000: 'fce322ea510319ed',130130 };131131 132132 describe('golden replay', () => {@@ -825,3 +825,31 @@ describe('performance', () => {
825825     60_000,826826   );827827 });828+829+describe('distant view (glimpse band)', () => {830+  it('reveals category silhouettes beyond explored ground, disjoint from terrain', () => {831+    const world = createWorld({ seed: '55', tribeCount: 2, mapSize: 64, maxTicks: 50 });832+    for (let i = 0; i < 5; i++) world.step(new Map());833+    const v = world.viewFor(0);834+    expect(v.distant.length).toBe(64 * 64);835+    let distantCells = 0;836+    for (let i = 0; i < v.distant.length; i++) {837+      const d = v.distant[i]!;838+      if (d !== '?') {839+        distantCells++;840+        // category chars only841+        expect('.f^w').toContain(d);842+        // disjoint: anywhere distant is known, exact terrain must be unknown843+        expect(v.terrain[i]).toBe('?');844+      }845+    }846+    expect(distantCells).toBeGreaterThan(50); // a real band exists847+  });848+849+  it('never leaks vein specifics — ore/gold glimpse as generic highland', () => {850+    const world = createWorld({ seed: '55', tribeCount: 2, mapSize: 64, maxTicks: 50 });851+    const v = world.viewFor(0);852+    expect(v.distant).not.toContain('O');853+    expect(v.distant).not.toContain('G');854+  });855+});

M packages/engine/tsconfig.tsbuildinfo +1 -1

@@ -1 +1 @@

M packages/protocol/src/game.ts +17 -1

@@ -26,7 +26,7 @@
2626 // ---------------------------------------------------------------------------2727 2828 export const LIMITS = {29-  MAP_SIZE: 128,29+  MAP_SIZE: 64,3030   MAX_TICKS: 10_000,3131   MIN_TRIBES: 2,3232   MAX_TRIBES: 8,@@ -116,6 +116,15 @@ export type Tech = (typeof TECHS)[number];
116116 export type TerrainChar =117117   | '?' | '.' | 'f' | 'h' | 'm' | 'w' | 'r' | 's' | 't' | 'a' | 'v' | 'O' | 'G';118118 119+/**120+ * Distant-view category chars for TribeView.distant: beyond explored ground,121+ * a glimpse band reveals terrain CATEGORY silhouettes, never specifics:122+ * '?' unknown - '.' open ground (plains/steppe/arctic) - 'f' vegetation123+ * (forest/swamp) - '^' highland (hills/mountain/volcano — veins NOT shown) -124+ * 'w' water (ocean/river).125+ */126+export type DistantChar = '?' | '.' | 'f' | '^' | 'w';127+119128 export type WarbandKind = 'infantry' | 'archers' | 'cavalry';120129 121130 export type WarbandOrderType =@@ -271,6 +280,13 @@ export interface TribeView {
271280   mapSize: number;272281   /** Explored terrain (see TerrainChar legend). */273282   terrain: string;283+  /**284+   * Distant glimpses (see DistantChar legend): category-only silhouettes in a285+   * band beyond explored ground. Persistent, like `terrain`. Cells that are286+   * explored (exact in `terrain`) are '?' here — the two strings are disjoint.287+   * Viewers render this band as ~35%-transparent tiles.288+   */289+  distant: string;274290   settlements: SettlementView[];275291   warbands: WarbandView[];276292   /** Own + visible foreign caravans. */

M packages/protocol/tsconfig.tsbuildinfo +1 -1

@@ -1 +1 @@

M packages/script-host/test/fixtures.ts +1 -0

@@ -48,6 +48,7 @@ export function makeView(partial: Partial<TribeView> = {}): TribeView {
4848     tribeId: 0,4949     mapSize: size,5050     terrain: ".".repeat(size * size),51+    distant: "?".repeat(size * size),5152     settlements: [5253       {5354         id: 1,

M packages/script-host/tsconfig.tsbuildinfo +1 -1

@@ -1 +1 @@

M web/src/dev-mock.ts +1 -0

@@ -301,6 +301,7 @@ class MockWorld implements EngineWorld {
301301       tribeId,302302       mapSize: n,303303       terrain: chars.join(''),304+      distant: '?'.repeat(n * n),304305       settlements: t.settlements.map((s, i) => ({305306         id: s.id,306307         x: s.x,

M web/src/pages/home.ts +8 -1

@@ -18,7 +18,14 @@ export function renderHome(main: HTMLElement, ctx: AppCtx) {
1818   const composerCard = h('div', { class: 'card' });1919   const simsCard = h('div', { class: 'card' });2020   const tokensCard = h('div', { class: 'card' });21-  main.append(scriptsCard, examplesCard, composerCard, simsCard, tokensCard);21+  // Fullscreen grid: two internally-scrolling columns (one column <900px) —22+  // the page body never scrolls.23+  main.append(24+    h('div', { class: 'home-grid' },25+      h('div', { class: 'home-col' }, scriptsCard, examplesCard),26+      h('div', { class: 'home-col' }, composerCard, simsCard, tokensCard),27+    ),28+  );2229 2330   let scripts: ScriptRecord[] = [];2431   const refreshScripts = async () => {

M web/src/pages/viewer.ts +66 -17

@@ -130,6 +130,10 @@ function buildViewer(
130130   const chronicleBtn = h('button', { class: 'mode-btn active' }, 'chronicle');131131   const worldBtn = h('button', { class: 'mode-btn' }, 'world');132132 133+  // compact endgame chip — appears in the HUD bar once the age has ended;134+  // clicking it reopens the game-over overlay.135+  const victorChip = h('button', { class: 'victor-chip', style: 'display:none', title: 'view final standings' });136+133137   const statusBar = h('header', { class: 'hud-status' },134138     h('div', { class: 'hud-ident' },135139       h('h1', null, `sim ${sim.id.replace(/^sim_/, '')}`),@@ -138,17 +142,20 @@ function buildViewer(
138142     ),139143     h('div', { class: 'mode-toggle' }, chronicleBtn, worldBtn),140144     h('div', { class: 'transport' }, playBtn, ...speedBtns, restartBtn),145+    victorChip,141146     h('div', { class: 'hud-clock' }, progress, tickLabel),142147   );143148 144-  const banner = h('div');149+  const banner = h('div'); // transient strip: "simulating world" note only145150   const hashLine = h('p', { class: 'hash-line' });151+  // endgame overlay — sits OVER the viewport (dimmed), never pushes layout152+  const endOverlay = h('div', { class: 'viewport-overlay', style: 'display:none' });146153 147-  // ---- chronicle viewport -------------------------------------------------154+  // ---- chronicle viewport (telemetry scrolls INSIDE the pane) -------------148155   const dashboard = createDashboard(names);149156   const chroniclePane = h('div', { class: 'viewport' },150157     h('span', { class: 'viewport-label' }, 'chronicle'),151-    dashboard.el,158+    h('div', { class: 'viewport-scroll' }, dashboard.el),152159   );153160 154161   // ---- world viewport (map view owned by render/map-view) -----------------@@ -191,8 +198,9 @@ function buildViewer(
191198     statusBar,192199     banner,193200     h('div', { class: 'game-layout' },194-      h('div', { class: 'game-main' }, chroniclePane, worldPane, worldFeed.root, hashLine),195-      h('div', { class: 'game-side' }, ...panels.map((p) => p.root)),201+      h('div', { class: 'game-main' }, chroniclePane, worldPane, hashLine, endOverlay),202+      // ONE internally-scrolling rail: faction panels then the world feed203+      h('div', { class: 'game-side' }, ...panels.map((p) => p.root), worldFeed.root),196204     ),197205   );198206 @@ -235,11 +243,18 @@ function buildViewer(
235243   };236244 237245   const showEnd = (result: SimResult, stateHash: string) => {238-    showResult(banner, result, names, atlas);246+    clear(banner); // drop the "simulating world" strip, if any247+    showResult(endOverlay, result, names, atlas, () => setMode('chronicle'));248+    const winnerName = result.winner != null ? (names[result.winner] ?? `tribe ${result.winner}`) : null;249+    victorChip.textContent = winnerName != null ? `★ ${winnerName} victorious` : '— stalemate —';250+    victorChip.style.display = '';239251     hashLine.textContent = `final state hash ${stateHash}`;240252     tickLabel.textContent = fmtTick(result.endedAt);241253     progressFill.style.width = `${((result.endedAt / maxTicks) * 100).toFixed(2)}%`;242254   };255+  victorChip.onclick = () => {256+    if (endOverlay.childElementCount > 0) endOverlay.style.display = '';257+  };243258 244259   // ---- instant chronicle (stored metrics) ---------------------------------245260   if (stored) {@@ -292,13 +307,20 @@ function buildViewer(
292307       onFatal(error) {293308         playBtn.disabled = true;294309         clear(banner);295-        banner.append(310+        clear(endOverlay);311+        const closeBtn = h('button', null, '[ close ]');312+        closeBtn.onclick = () => { endOverlay.style.display = 'none'; };313+        endOverlay.append(296314           h('div', { class: 'result-banner failed' },297315             h('h2', null, '✕ sim failed ✕'),298-            h('p', { class: 'error-text', style: 'white-space:pre-wrap' }, error),299-            mock ? null : h('p', { class: 'muted' }, 'The engine/script-host packages may not be integrated yet — try ?mock=1.'),316+            h('div', { class: 'result-scroll' },317+              h('p', { class: 'error-text', style: 'white-space:pre-wrap' }, error),318+              mock ? null : h('p', { class: 'muted' }, 'The engine/script-host packages may not be integrated yet — try ?mock=1.'),319+            ),320+            h('div', { class: 'row result-actions' }, closeBtn),300321           ),301322         );323+        endOverlay.style.display = '';302324       },303325     });304326 @@ -362,6 +384,10 @@ function buildViewer(
362384     worldBtn.classList.toggle('active', m === 'world');363385     chroniclePane.style.display = m === 'chronicle' ? '' : 'none';364386     worldPane.style.display = m === 'world' ? '' : 'none';387+    // Entering the world dismisses the endgame overlay — it would otherwise388+    // sit over (and intercept clicks on) the WATCH THE REPLAY invite. The389+    // HUD victor chip brings it back on demand.390+    if (m === 'world') endOverlay.style.display = 'none';365391     // Map frames only stream while watching.366392     runner?.setWatch(m === 'world');367393     if (m === 'chronicle') dashDirty = true;@@ -394,8 +420,14 @@ function buildViewer(
394420     if (!instant) {395421       // live-run page: the chronicle rebuilds with the replay396422       clear(banner);423+      clear(endOverlay);424+      endOverlay.style.display = 'none';425+      victorChip.style.display = 'none';397426       dashboard.reset();398427       metricsHistory.length = 0;428+    } else {429+      // instant page: result stands — just tuck the overlay away for the replay430+      endOverlay.style.display = 'none';399431     }400432     // instant page: the chronicle and endgame banner are already final — keep401433     // them; dashboard.push() dedupes the re-run's frames.@@ -603,7 +635,7 @@ function makeTribePanel(slot: number, name: string): TribePanel {
603635     { class: 'tribe-panel', style: `border-left-color:${color}` },604636     h('div', { class: 'head' },605637       portrait,606-      h('span', { style: `color:${color}` }, name),638+      h('span', { class: 't-name', style: `color:${color}`, title: name }, name),607639       h('span', { class: 'spacer', style: 'flex:1' }),608640       overDot,609641       status,@@ -651,10 +683,17 @@ function makeTribePanel(slot: number, name: string): TribePanel {
651683 }652684 653685 // --------------------------------------------------------------------------654-// Endgame banner — the "game over" screen: victor, reason, score table.655-656-function showResult(banner: HTMLElement, result: SimResult, names: string[], atlas: UrizenAtlas | null) {657-  clear(banner);686+// Endgame overlay — the "game over" screen: a centered frame over the dimmed687+// viewport with victor, reason, score table, and [VIEW CHRONICLE]/[CLOSE].688+689+function showResult(690+  overlay: HTMLElement,691+  result: SimResult,692+  names: string[],693+  atlas: UrizenAtlas | null,694+  onViewChronicle: () => void,695+) {696+  clear(overlay);658697   const winnerName = result.winner != null ? (names[result.winner] ?? `tribe ${result.winner}`) : null;659698   const sorted = [...result.tribes].sort((a, b) => b.score - a.score);660699   const reasonText = result.reason === 'last_standing' ? 'last tribe standing' : 'the age ends — tick cap reached';@@ -667,11 +706,19 @@ function showResult(banner: HTMLElement, result: SimResult, names: string[], atl
667706           ' is victorious ✦')668707       : h('h2', null, '— stalemate —');669708 670-  banner.append(709+  const chronicleBtn = h('button', null, '[ view chronicle ]');710+  const closeBtn = h('button', null, '[ close ]');711+  closeBtn.onclick = () => { overlay.style.display = 'none'; };712+  chronicleBtn.onclick = () => {713+    overlay.style.display = 'none';714+    onViewChronicle();715+  };716+717+  overlay.append(671718     h('div', { class: 'result-banner' },672719       title,673720       h('p', { class: 'result-sub' }, `${reasonText} - tick ${result.endedAt}`),674-      h('table', { class: 'list' },721+      h('div', { class: 'result-scroll' }, h('table', { class: 'list' },675722         h('thead', null, h('tr', null,676723           h('th'), h('th', null, 'Tribe'), h('th', null, 'Score'),677724           h('th', null, 'Pop'), h('th', null, 'Stl'), h('th', null, 'Techs'),@@ -703,7 +750,9 @@ function showResult(banner: HTMLElement, result: SimResult, names: string[], atl
703750             );704751           }),705752         ),706-      ),753+      )),754+      h('div', { class: 'row result-actions' }, chronicleBtn, closeBtn),707755     ),708756   );757+  overlay.style.display = '';709758 }

M web/src/render/map-view.ts +28 -3

@@ -112,12 +112,37 @@ export function createMapView(
112112   // All per-cell choices below (background step, variant, decor, tint step) are113113   // pure functions of cellHash(tx, ty), so this cached layer is deterministic:114114   // it only runs when the terrain string changes and always redraws the same.115-  function renderTerrain(terrain: string): void {116-    const key = `${atlas ? 1 : 0}|${terrain}`;115+  /** Distant-glimpse categories -> a representative biome config to render116+   * (at DISTANT_ALPHA, muted, no decor). '^' = highland silhouette. */117+  const DISTANT_REP: Record<string, string> = { '.': '.', f: 'f', '^': 'h', w: 'w' };118+  const DISTANT_ALPHA = 0.35;119+120+  function renderTerrain(terrain: string, distant: string): void {121+    const key = `${atlas ? 1 : 0}|${terrain}|${distant}`;117122     if (key === terrainKey) return;118123     terrainKey = key;119124     tctx.fillStyle = '#000';120125     tctx.fillRect(0, 0, sizePx, sizePx);126+    // Distant glimpse band first: categorical silhouettes at 35% alpha.127+    if (distant.length === mapSize * mapSize) {128+      tctx.globalAlpha = DISTANT_ALPHA;129+      for (let ty = 0; ty < mapSize; ty++) {130+        for (let tx = 0; tx < mapSize; tx++) {131+          const dch = distant[ty * mapSize + tx] ?? '?';132+          const rep = DISTANT_REP[dch];133+          if (rep === undefined) continue;134+          const t = TERRAIN[rep];135+          if (!t || t === FOG) continue;136+          tctx.fillStyle = t.bg[1] ?? t.bg[0]!;137+          tctx.fillRect(tx * TILE, ty * TILE, TILE, TILE);138+          const v = t.variants[0];139+          if (atlas && v?.glyph) {140+            atlas.draw(tctx, v.glyph, tx * TILE, ty * TILE, TILE, v.tints ? v.tints[1] ?? v.tints[0] : undefined);141+          }142+        }143+      }144+      tctx.globalAlpha = 1;145+    }121146     for (let ty = 0; ty < mapSize; ty++) {122147       for (let tx = 0; tx < mapSize; tx++) {123148         const ch = terrain[ty * mapSize + tx] ?? '?';@@ -166,7 +191,7 @@ export function createMapView(
166191   function draw(frame: MapFrame): void {167192     lastFrame = frame;168193     if (frame.terrain.length !== mapSize * mapSize) return; // no map payload169-    renderTerrain(frame.terrain);194+    renderTerrain(frame.terrain, frame.distant);170195     ctx.clearRect(0, 0, sizePx, sizePx);171196     ctx.drawImage(terrainLayer, 0, 0);172197 

M web/src/sim-worker.ts +8 -0

@@ -256,6 +256,7 @@ function buildFrame(): MapFrame {
256256   const threats: FrameThreat[] = [];257257   const tribes: FrameTribe[] = [];258258   let terrain = '';259+  let distant = '';259260 260261   const views = lastViews;261262 @@ -306,19 +307,25 @@ function buildFrame(): MapFrame {
306307     if (pov >= 0) {307308       const view = views.find((v) => v.tribeId === pov);308309       terrain = view ? view.terrain : '?'.repeat(mapSize * mapSize);310+      distant = view ? view.distant : '?'.repeat(mapSize * mapSize);309311       if (view) takeView(view, true);310312     } else {311313       // Omniscient = union of every tribe's own view (terrain merged char-wise).312314       const chars = new Array<string>(mapSize * mapSize).fill('?');315+      const dchars = new Array<string>(mapSize * mapSize).fill('?');313316       for (const v of views) {314317         for (let i = 0; i < v.terrain.length; i++) {315318           if (chars[i] === '?' && v.terrain[i] !== '?') chars[i] = v.terrain[i]!;319+          if (dchars[i] === '?' && v.distant[i] !== '?') dchars[i] = v.distant[i]!;316320         }317321         // Own assets from every view; enemy sightings too, in case a tribe's318322         // own view has gone missing (viewFor failure) — dedupe handles overlap.319323         takeView(v, true);320324       }321325       terrain = chars.join('');326+      // Distant knowledge is only shown where no tribe has hard knowledge.327+      for (let i = 0; i < dchars.length; i++) if (chars[i] !== '?') dchars[i] = '?';328+      distant = dchars.join('');322329     }323330     settlements.sort((a, b) => a.id - b.id);324331     warbands.sort((a, b) => a.id - b.id);@@ -366,6 +373,7 @@ function buildFrame(): MapFrame {
366373     mapSize,367374     hasMap: watching,368375     terrain,376+    distant,369377     settlements,370378     warbands,371379     caravans,

M web/src/sim/frames.ts +2 -0

@@ -89,6 +89,8 @@ export interface MapFrame {
8989   hasMap: boolean;9090   /** Fog-filtered terrain (row-major mapSize² TerrainChars, '' when !hasMap). */9191   terrain: string;92+  /** Distant category glimpses (DistantChar per cell; rendered ~35% alpha). */93+  distant: string;9294   settlements: FrameSettlement[];9395   warbands: FrameWarband[];9496   caravans: FrameCaravan[];

M web/src/style.css +134 -24

@@ -29,15 +29,26 @@
2929 3030 * { box-sizing: border-box; }3131 32+/* thin 1-bit scrollbars for all internal scroll regions */33+* { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg-inset); }34+35+/* Single fullscreen console: the page NEVER scrolls — panes scroll inside. */3236 html, body {3337   margin: 0;3438   padding: 0;39+  height: 100dvh;40+  overflow: hidden;3541   background: var(--bg);3642   color: var(--text);3743   font: 13px/1.55 var(--mono);3844 }3945 40-#app { min-height: 100vh; display: flex; flex-direction: column; }46+#app {47+  height: 100dvh;48+  overflow: hidden;49+  display: grid;50+  grid-template-rows: auto minmax(0, 1fr) auto; /* title bar / main / status line */51+}4152 4253 ::selection { background: var(--accent); color: #000; }4354 @@ -83,12 +94,42 @@ h3 { font-size: 1.1rem; color: var(--accent); }
8394 .topbar .spacer { flex: 1; }8495 .topbar .who { color: var(--text-dim); font-family: var(--pixel); font-size: 1.05rem; }8596 86-main.page { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.2rem; }87-main.page.wide { max-width: 1560px; padding: 0.9rem 1rem 1.2rem; }97+main.page {98+  width: 100%; max-width: 1100px; margin: 0 auto;99+  padding: 0.9rem 1.2rem;100+  min-height: 0;101+  display: flex; flex-direction: column;102+  /* fallback scroll for simple pages (sign-in, load errors); fullscreen103+     layouts (.home-grid / .game-screen) size to 1fr and never trip it */104+  overflow-y: auto;105+}106+main.page.wide { max-width: 1560px; padding: 0.7rem 1rem 0.8rem; }107+108+/* ------- home: two internally-scrolling columns, no page scroll ------- */109+.home-grid {110+  flex: 1; min-height: 0;111+  display: grid;112+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);113+  gap: 0 1.2rem;114+}115+.home-col {116+  min-height: 0;117+  overflow-y: auto;118+  scrollbar-gutter: stable;119+  padding: 0.9rem 0.4rem 0.4rem 0; /* top room for punched card titles */120+}121+@media (max-width: 900px) {122+  /* one internally-scrolling column — still no body scroll */123+  .home-grid { display: block; overflow-y: auto; scrollbar-gutter: stable; padding: 0.9rem 0.4rem 0.4rem 0; }124+  .home-col { overflow: visible; padding: 0; }125+}88126 89127 footer.credits {90128   border-top: 1px solid var(--border);91-  padding: 0.45rem 1.2rem;129+  padding: 0.22rem 1.2rem 0.18rem;130+  white-space: nowrap;131+  overflow: hidden;132+  text-overflow: ellipsis;92133   color: var(--text-dim);93134   font-family: var(--pixel);94135   font-size: 1rem;@@ -156,7 +197,7 @@ input[type="text"], input[type="number"], select, textarea {
156197   padding: 0.3rem 0.55rem;157198   font: inherit;158199 }159-select { font-family: var(--pixel); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }200+select { font-family: var(--pixel); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; max-width: 100%; }160201 textarea { font-family: var(--mono); font-size: 12px; width: 100%; resize: vertical; }161202 input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }162203 @@ -177,7 +218,7 @@ table.list th {
177218   text-transform: uppercase; letter-spacing: 0.08em;178219   padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border);179220 }180-table.list td { padding: 0.32rem 0.5rem; border-bottom: 1px solid var(--border-dim); }221+table.list td { padding: 0.32rem 0.5rem; border-bottom: 1px solid var(--border-dim); overflow-wrap: anywhere; }181222 table.list tr:last-child td { border-bottom: none; }182223 table.list tr.sel td { background: rgba(224, 164, 88, 0.07); }183224 table.list tr.clickable { cursor: pointer; }@@ -223,7 +264,13 @@ pre.snippet {
223264  * GAME SCREEN (/s/:id) — framed viewport + HUD, not tabs-over-cards224265  * ========================================================================== */225266 226-.game-screen { position: relative; }267+/* fixed-viewport game screen: HUD bar / (transient note) / battle area */268+main.page.game-screen {269+  position: relative;270+  overflow: hidden;271+  display: grid;272+  grid-template-rows: auto auto minmax(0, 1fr);273+}227274 /* faint scanlines + vignette over the whole game screen; stays classy */228275 .game-screen::after {229276   content: '';@@ -244,10 +291,10 @@ pre.snippet {
244291   margin-bottom: 0.8rem;245292   font-family: var(--pixel);246293 }247-.hud-ident { display: flex; align-items: baseline; gap: 0.7rem; min-width: 0; }248-.hud-ident h1 { margin: 0; font-size: 1.45rem; line-height: 1.1; color: var(--text); }294+.hud-ident { display: flex; align-items: baseline; gap: 0.7rem; min-width: 0; overflow: hidden; }295+.hud-ident h1 { margin: 0; font-size: 1.45rem; line-height: 1.1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }249296 .hud-ident h1::before { content: '» '; color: var(--accent-dim); }250-.hud-ident .sub { color: var(--text-dim); font-size: 1rem; letter-spacing: 0.05em; white-space: nowrap; }297+.hud-ident .sub { color: var(--text-dim); font-size: 1rem; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }251298 .hud-mock { color: var(--danger); font-size: 1rem; letter-spacing: 0.08em; }252299 253300 .mode-toggle { display: inline-flex; border: 1px solid var(--border); }@@ -295,11 +342,25 @@ button.mode-btn:hover:not(.active):not(:disabled) { color: var(--accent); }
295342   pointer-events: none;296343 }297344 298-/* ------- layout: viewport + world log left, faction HUD right ------- */299-.game-layout { display: flex; gap: 0.9rem; align-items: flex-start; }300-.game-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.8rem; }301-.game-side { width: 316px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.9rem; }302-@media (max-width: 980px) { .game-layout { flex-direction: column; } .game-side { width: 100%; } }345+/* ------- layout: viewport left, one scrolling rail right ------- */346+.game-layout {347+  display: grid;348+  grid-template-columns: minmax(0, 1fr) 316px;349+  gap: 0.9rem;350+  min-height: 0;351+  overflow: hidden;352+}353+.game-main { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.45rem; }354+.game-side {355+  min-height: 0;356+  overflow-y: auto;357+  scrollbar-gutter: stable;358+  display: flex; flex-direction: column; gap: 0.9rem;359+  padding: 2px 2px 0.5rem 0;360+}361+@media (max-width: 980px) {362+  .game-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr); }363+}303364 304365 /* the framed viewport (double frame: border + offset outline) */305366 .viewport {@@ -309,8 +370,13 @@ button.mode-btn:hover:not(.active):not(:disabled) { color: var(--accent); }
309370   outline-offset: 3px;310371   background: var(--bg-inset);311372   padding: 0.7rem;312-  margin: 4px; /* room for the outline */373+  margin: 12px 4px 4px; /* room for the outline + punched label above */374+  flex: 1;375+  min-height: 0;376+  display: flex; flex-direction: column;313377 }378+/* internal scroll region for the chronicle telemetry */379+.viewport-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 0.2rem 0.3rem 0.2rem 0; }314380 .viewport-label {315381   position: absolute;316382   top: -0.72em; left: 14px;@@ -332,7 +398,8 @@ button.mode-btn:hover:not(.active):not(:disabled) { color: var(--accent); }
332398 .replay-invite {333399   display: flex; flex-direction: column; align-items: center; justify-content: center;334400   gap: 0.9rem;335-  min-height: 340px;401+  flex: 1;402+  min-height: 0;336403   text-align: center;337404 }338405 .replay-invite .glyphs { display: flex; gap: 0.7rem; }@@ -353,6 +420,7 @@ button.replay-btn:hover:not(:disabled) { background: var(--accent); color: #000;
353420 .simulating-note {354421   border: 1px solid var(--accent-dim);355422   background: var(--bg-inset);423+  margin-bottom: 0.8rem;356424   padding: 0.45rem 0.9rem;357425   font-family: var(--pixel);358426   font-size: 1.15rem;@@ -443,7 +511,9 @@ button.replay-btn:hover:not(:disabled) { background: var(--accent); color: #000;
443511   font-size: 1.2rem;444512   letter-spacing: 0.05em;445513   text-transform: uppercase;514+  min-width: 0;446515 }516+.tribe-panel .head .t-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }447517 .tribe-panel canvas.portrait { image-rendering: pixelated; width: 30px; height: 30px; flex-shrink: 0; }448518 .tribe-panel .status-word { font-size: 0.95rem; letter-spacing: 0.1em; }449519 .tribe-panel .stats {@@ -475,16 +545,36 @@ button.replay-btn:hover:not(:disabled) { background: var(--accent); color: #000;
475545 .map-tooltip .tt-title { color: var(--accent); }476546 .map-tooltip .tt-dim { color: var(--text-dim); }477547 478-/* ------- endgame banner ------- */548+/* ------- endgame: dismissible overlay over a dimmed viewport ------- */549+.viewport-overlay {550+  position: absolute;551+  inset: 0;552+  z-index: 30; /* under the scanline layer (40) — the CRT stays on top */553+  display: flex;554+  align-items: center;555+  justify-content: center;556+  padding: 1.2rem;557+  background: rgba(3, 4, 5, 0.82);558+}559+479560 .result-banner {480561   position: relative;481562   border: 1px solid var(--accent);482563   outline: 1px solid var(--accent-dim);483564   outline-offset: 3px;484-  background: var(--bg-inset);565+  background: var(--bg);485566   padding: 1rem 1.2rem 0.9rem;486-  margin: 4px 4px 1rem;567+  margin: 4px;568+  max-width: min(820px, 100%);569+  max-height: 100%;570+  display: flex; flex-direction: column;571+  min-height: 0;572+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.1), 8px 8px 0 rgba(0, 0, 0, 0.55);487573 }574+/* wide score table scrolls INSIDE the frame — never widens the layout */575+.result-banner .result-scroll { min-height: 0; overflow: auto; scrollbar-gutter: stable; }576+.result-banner .result-actions { justify-content: center; margin-top: 0.8rem; flex-wrap: nowrap; }577+.result-banner .result-actions button { font-size: 1.15rem; padding: 0.22rem 1rem 0.16rem; }488578 .result-banner h2 {489579   color: var(--accent);490580   text-align: center;@@ -507,6 +597,18 @@ button.replay-btn:hover:not(:disabled) { background: var(--accent); color: #000;
507597 .result-banner.failed h2 { color: var(--danger); text-shadow: none; }508598 .result-rank { color: var(--accent); font-family: var(--pixel); }509599 600+/* compact victory chip that stays in the HUD bar after dismissal */601+button.victor-chip {602+  border-color: var(--accent-dim);603+  color: var(--accent);604+  max-width: 240px;605+  white-space: nowrap;606+  overflow: hidden;607+  text-overflow: ellipsis;608+  padding: 0.1rem 0.6rem 0.06rem;609+}610+button.victor-chip:hover:not(:disabled) { border-color: var(--accent); }611+510612 /* ==========================================================================511613  * CHRONICLE (stats) — in-game telemetry styling512614  * ========================================================================== */@@ -636,12 +738,20 @@ canvas.chart { display: block; width: 100%; }
636738   background: var(--bg-inset);637739   border: 1px solid var(--border);638740   border-radius: var(--radius);639-  overflow: auto;640-  max-height: 78vh;741+  flex: 1;742+  min-height: 0;743+  overflow: hidden;744+  /* letterbox: center the square canvas in whatever pane shape we get */745+  display: flex;746+  align-items: center;747+  justify-content: center;641748 }642749 .map-host canvas.urizen-map {643750   display: block;644751   image-rendering: pixelated;645-  width: 100%;752+  /* fit the pane; the element box stays square so hover hit-testing is exact */753+  max-width: 100%;754+  max-height: 100%;646755 }647-.map-host.zoomed canvas.urizen-map { width: auto; max-width: none; }756+.map-host.zoomed { overflow: auto; display: block; }757+.map-host.zoomed canvas.urizen-map { max-width: none; max-height: none; }

M worker/src/mcp/docs.ts +3 -3

@@ -93,7 +93,7 @@ the sim bundle (metadata + locked script sources) is public at
9393 ## The mental model: govern, don't micromanage9494 9595 Your tribe is a POPULATION, not a unit roster. It starts as one settlement of96-1,200 citizens on a 128×128 map and grows into a multi-settlement polity of96+1,200 citizens on a 64×64 map and grows into a multi-settlement polity of9797 thousands. The simulation is dense cohort accounting: citizens are counted,9898 apportioned into professions, fed, housed, and taxed by events — never9999 addressed individually.@@ -299,7 +299,7 @@ territory means buying metal or taking someone else's.
299299 | --- | --- | --- |300300 | \`tick\` | number | Current tick, 0-based. |301301 | \`tribeId\` | number | Your tribe id. |302-| \`mapSize\` | number | Map is \`mapSize × mapSize\` tiles (128). |302+| \`mapSize\` | number | Map is \`mapSize × mapSize\` tiles (64). |303303 | \`terrain\` | string | Explored terrain (legend above). |304304 | \`settlements\` | \`SettlementView[]\` | Your settlements. |305305 | \`warbands\` | \`WarbandView[]\` | Your warbands. |@@ -470,7 +470,7 @@ signaling, and coordination between agents.
470470 471471 | Limit | Value | Consequence |472472 | --- | --- | --- |473-| Map size | 128 × 128 | — |473+| Map size | 64 × 64 | — |474474 | Max ticks per sim | 10,000 | Sim ends at cap; highest score wins. |475475 | Tribes per sim | 2–8 | One script per tribe slot. |476476 | Starting population | 1,200 | One founding settlement per tribe. |