@unson/brainbase-mcp 0.15.5 → 0.15.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unson/brainbase-mcp",
-  "version": "0.15.5",
+  "version": "0.15.7",
   "description": "Local-first Brainbase judgment OS that lets supported AI agents reuse a user's approved goals, priorities, decisions, and judgment criteria.",
   "type": "module",
   "license": "MIT",
@@ -358,5 +358,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "9c24218a7ff1058cdf997adf92048186cd0b5e23"
+  "gitHead": "9d594a6e3267d90308404d606a087cbd6191baec"
 }

package/ui/world/world-placement.js

@@ -93,3 +93,43 @@ export function cityMeasures(business, { isFinished, judgments = [], now = Date.
     lit: recent > 0,
   };
 }
+
+/**
+ * The sky for an hour of the day (scenery only; it represents no data).  `mode` 'auto' follows the hour;
+ * 'day', 'dusk' and 'night' fix it.  At night lit windows and street lamps glow the most, so the cities
+ * that moved lately read best then.
+ */
+export function skyAt(hour, mode = 'auto') {
+  const phase = mode !== 'auto' ? mode
+    : hour >= 5 && hour < 7 ? 'dawn'
+      : hour >= 7 && hour < 17 ? 'day'
+        : hour >= 17 && hour < 19 ? 'dusk'
+          : 'night';
+  const skies = {
+    dawn: { top: '#c9d6ef', middle: '#f3d9c4', bottom: '#f6ead8', fog: 0xf1e2d2, sun: 0xffd2a8, sunIntensity: 1.6, hemi: 0.95, exposure: 1.0, glow: 1.1, lamps: true, stars: false },
+    day: { top: '#bfdcf0', middle: '#e3f0f2', bottom: '#f4f1e6', fog: 0xe9f1ee, sun: 0xfff1dc, sunIntensity: 2.7, hemi: 1.25, exposure: 1.05, glow: 0.6, lamps: false, stars: false },
+    dusk: { top: '#5d6f9e', middle: '#e7a77e', bottom: '#f3cfa4', fog: 0xe6bf9c, sun: 0xffb27a, sunIntensity: 1.3, hemi: 0.75, exposure: 0.95, glow: 1.5, lamps: true, stars: false },
+    night: { top: '#0d1730', middle: '#1c2b4c', bottom: '#33456a', fog: 0x2a3a5a, sun: 0x9fb4ff, sunIntensity: 0.35, hemi: 0.35, exposure: 0.9, glow: 2.4, lamps: true, stars: true },
+  };
+  return { phase, ...skies[phase] };
+}
+
+/**
+ * What moved since the viewer last opened the world: cities whose newest decision or a placed judgment
+ * is newer than `lastVisit`, and plaza buildings whose newest judgment is.  Null on a first visit.
+ */
+export function changesSince(lastVisit, businesses, judgmentsByBusiness, rows) {
+  const since = Date.parse(lastVisit ?? '');
+  if (!Number.isFinite(since)) return null;
+  const newer = (at) => {
+    const time = Date.parse(at ?? '');
+    return Number.isFinite(time) && time > since;
+  };
+  const cities = [];
+  for (const business of businesses ?? []) {
+    const judgments = judgmentsByBusiness?.get?.(business.code) ?? [];
+    if (newer(business.activity?.latest_decision_at) || judgments.some((entry) => newer(entry?.item?.proof?.recorded_at))) cities.push(business.code);
+  }
+  const plaza = (rows ?? []).filter((row) => newer(row.latest_recorded_at)).map((row) => row.key);
+  return { since: new Date(since).toISOString(), cities, plaza };
+}

package/ui/world/world-view.js

@@ -15,7 +15,7 @@
  */
 
 import { THREE, MapControls } from './world-vendor.js';
-import { cityMeasures, districtLots, groupJudgmentPlaces, UNPLACED_REASON_TEXT } from './world-placement.js';
+import { changesSince, cityMeasures, districtLots, groupJudgmentPlaces, skyAt, UNPLACED_REASON_TEXT } from './world-placement.js';
 import {
   makeWorkspaceElement as el,
   workspacePageHeader,
@@ -182,18 +182,154 @@ function canvasTexture(doc, width, height, draw) {
   return texture;
 }
 
-function windowTexture(doc, lit, glowOnly = false) {
-  const texture = canvasTexture(doc, 64, 64, (ctx, w, h) => {
-    ctx.fillStyle = glowOnly ? '#000000' : '#ffffff';
-    ctx.fillRect(0, 0, w, h);
-    ctx.fillStyle = glowOnly ? '#ffffff' : lit ? '#ffe2a0' : '#c6d3de';
-    for (let y = 8; y < h; y += 16) {
-      for (let x = 6; x < w; x += 14) ctx.fillRect(x, y, 8, 8);
+/** Smooth value noise in [0, 1]; used only to shade scenery (ground, sea, mountains) without repeating textures. */
+function valueNoise(x, z, seed = 'n') {
+  const xi = Math.floor(x);
+  const zi = Math.floor(z);
+  const fx = x - xi;
+  const fz = z - zi;
+  const sx = fx * fx * (3 - 2 * fx);
+  const sz = fz * fz * (3 - 2 * fz);
+  const at = (i, j) => hashUnit(`${seed}${i},${j}`);
+  const near = at(xi, zi) + (at(xi + 1, zi) - at(xi, zi)) * sx;
+  const far = at(xi, zi + 1) + (at(xi + 1, zi + 1) - at(xi, zi + 1)) * sx;
+  return near + (far - near) * sz;
+}
+
+/** Colours a geometry per vertex from its position (x, y, z before any rotation). */
+function paintVertices(geometry, colorAt) {
+  const position = geometry.attributes.position;
+  const colors = new Float32Array(position.count * 3);
+  const color = new THREE.Color();
+  for (let i = 0; i < position.count; i += 1) {
+    colorAt(color, position.getX(i), position.getY(i), position.getZ(i));
+    colors[i * 3] = color.r;
+    colors[i * 3 + 1] = color.g;
+    colors[i * 3 + 2] = color.b;
+  }
+  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+  return geometry;
+}
+
+/*
+ * Facades: one tile of a wall, drawn for a style and a wall colour.  Windows are on the walls only (roofs
+ * get a plain material).  Which panes are lit is fixed per pane, so the glow map matches the colour map;
+ * whether a building has lit windows at all still means "moved in the last 30 days".
+ */
+const FACADE_UNITS = Object.freeze({ glass: [2.0, 2.3], office: [3.0, 2.0], brick: [1.3, 1.35], civic: [0.85, 1.5], research: [0.9, 1.2], house: [0, 0] });
+
+/** Tile size in pixels: glass and office tiles hold several floors so lit panes do not repeat as a pattern. */
+const FACADE_SIZES = Object.freeze({ glass: 256, office: 256 });
+
+function drawFacade(ctx, w, h, style, wall, lit, glowOnly) {
+  const wallColor = `#${new THREE.Color(wall).getHexString()}`;
+  const dark = `#${new THREE.Color(wall).multiplyScalar(0.72).getHexString()}`;
+  const light = `#${new THREE.Color(wall).lerp(new THREE.Color(0xffffff), 0.35).getHexString()}`;
+  ctx.fillStyle = glowOnly ? '#000000' : wallColor;
+  ctx.fillRect(0, 0, w, h);
+  const pane = (x, y, pw, ph, index) => {
+    const on = lit && hashUnit(`${style}pane${index}x`) < 0.55;
+    if (glowOnly) {
+      ctx.fillStyle = on ? '#ffffff' : '#000000';
+      ctx.fillRect(x, y, pw, ph);
+      return;
     }
-  });
-  texture.wrapS = THREE.RepeatWrapping;
-  texture.wrapT = THREE.RepeatWrapping;
-  return texture;
+    if (on) {
+      ctx.fillStyle = '#ffd98c';
+      ctx.fillRect(x, y, pw, ph);
+      ctx.fillStyle = 'rgba(255,244,214,0.55)';
+      ctx.fillRect(x, y, pw, ph * 0.3);
+    } else {
+      const glass = ctx.createLinearGradient(x, y, x + pw, y + ph);
+      glass.addColorStop(0, '#9fb3c4');
+      glass.addColorStop(0.5, '#56687a');
+      glass.addColorStop(1, '#3f4f60');
+      ctx.fillStyle = glass;
+      ctx.fillRect(x, y, pw, ph);
+    }
+  };
+  if (style === 'glass') {
+    // A curtain wall: four floors of four panes, thin mullions, a floor band under each floor.
+    const cw = w / 4;
+    const rh = h / 4;
+    for (let r = 0; r < 4; r += 1) {
+      if (!glowOnly) {
+        ctx.fillStyle = dark;
+        ctx.fillRect(0, r * rh + rh - 7, w, 7);
+      }
+      for (let c = 0; c < 4; c += 1) pane(c * cw + 4, r * rh + 5, cw - 8, rh - 15, r * 4 + c);
+    }
+    if (!glowOnly) {
+      ctx.fillStyle = light;
+      for (let c = 0; c <= 4; c += 1) ctx.fillRect(c * cw - 2, 0, 4, h);
+    }
+  } else if (style === 'office') {
+    // Ribbon windows: two floors, each a long band split by mullions over a concrete spandrel.
+    const rh = h / 2;
+    for (let r = 0; r < 2; r += 1) {
+      if (!glowOnly) {
+        ctx.fillStyle = light;
+        ctx.fillRect(0, r * rh, w, 22);
+        ctx.fillStyle = dark;
+        ctx.fillRect(0, r * rh + rh - 10, w, 6);
+      }
+      for (let c = 0; c < 8; c += 1) pane(4 + c * (w / 8), r * rh + 34, w / 8 - 6, rh - 54, r * 8 + c);
+    }
+  } else if (style === 'brick') {
+    if (!glowOnly) {
+      ctx.strokeStyle = 'rgba(0,0,0,0.07)';
+      ctx.lineWidth = 2;
+      for (let y = 16; y < h; y += 16) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(w, y);
+        ctx.stroke();
+      }
+    }
+    for (let c = 0; c < 2; c += 1) {
+      const x = 18 + c * 58;
+      if (!glowOnly) {
+        ctx.fillStyle = '#f5f1e8';
+        ctx.fillRect(x - 5, 22, 44, 82);
+      }
+      pane(x, 26, 34, 74, c);
+      if (!glowOnly) {
+        ctx.fillStyle = '#f5f1e8';
+        ctx.fillRect(x + 15, 26, 4, 74);
+        ctx.fillRect(x, 58, 34, 4);
+      }
+    }
+  } else if (style === 'civic') {
+    // Pilasters and tall windows.
+    if (!glowOnly) {
+      ctx.fillStyle = light;
+      ctx.fillRect(0, 0, 18, h);
+      ctx.fillRect(w - 18, 0, 18, h);
+    }
+    pane(30, 14, 68, 96, 0);
+    if (!glowOnly) {
+      ctx.fillStyle = light;
+      ctx.fillRect(62, 14, 4, 96);
+    }
+  } else if (style === 'research') {
+    for (let c = 0; c < 2; c += 1) pane(20 + c * 60, 18, 28, 90, c);
+  } else if (style === 'house') {
+    // A plastered wall with two framed windows (doors are separate meshes).
+    for (let c = 0; c < 2; c += 1) {
+      const x = 22 + c * 52;
+      if (!glowOnly) {
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(x - 4, 36, 40, 50);
+      }
+      pane(x, 40, 32, 42, c);
+      if (!glowOnly) {
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(x + 14, 40, 4, 42);
+        ctx.fillStyle = dark;
+        ctx.fillRect(x - 6, 86, 44, 5);
+      }
+    }
+  }
 }
 
 function roundedPlate(width, depth, height, radius) {
@@ -242,15 +378,29 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
   stage.prepend(renderer.domElement);
 
   const scene = new THREE.Scene();
-  scene.background = canvasTexture(doc, 4, 256, (ctx, w, h) => {
-    const gradient = ctx.createLinearGradient(0, 0, 0, h);
-    gradient.addColorStop(0, '#dfeee6');
-    gradient.addColorStop(0.55, '#eef4ef');
-    gradient.addColorStop(1, '#f6f1e6');
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, w, h);
-  });
-  scene.fog = new THREE.Fog(0xeef3ec, 170, 340);
+  // Scenery (sky, sea, land, mountains, trees, lamps) represents no data: it only sets the place.
+  let skyMode = 'auto';
+  let sky = skyAt(new Date().getHours(), skyMode);
+  function skyTexture(current) {
+    return canvasTexture(doc, 256, 256, (ctx, w, h) => {
+      const gradient = ctx.createLinearGradient(0, 0, 0, h);
+      gradient.addColorStop(0, current.top);
+      gradient.addColorStop(0.55, current.middle);
+      gradient.addColorStop(1, current.bottom);
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, w, h);
+      if (current.stars) {
+        ctx.fillStyle = 'rgba(255,255,255,0.85)';
+        for (let i = 0; i < 90; i += 1) {
+          const sx = hashUnit(`star${i}x`) * w;
+          const sy = hashUnit(`star${i}y`) * h * 0.55;
+          ctx.fillRect(sx, sy, hashUnit(`star${i}s`) > 0.85 ? 1.6 : 0.9, hashUnit(`star${i}s`) > 0.85 ? 1.6 : 0.9);
+        }
+      }
+    });
+  }
+  scene.background = skyTexture(sky);
+  scene.fog = new THREE.Fog(sky.fog, 170, 340);
 
   const camera = new THREE.OrthographicCamera(-50, 50, 50, -50, 0.1, 1000);
   const home = { position: new THREE.Vector3(90, 95, 90), target: new THREE.Vector3(0, 0, 0), zoom: 1 };
@@ -267,26 +417,27 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
   controls.minPolarAngle = Math.PI / 6;
   controls.target.copy(home.target);
 
-  scene.add(new THREE.HemisphereLight(0xf4f8ff, 0xd8ccb2, 1.25));
-  const sun = new THREE.DirectionalLight(0xfff1dc, 2.7);
+  const hemisphere = new THREE.HemisphereLight(0xf4f8ff, 0xd8ccb2, sky.hemi);
+  scene.add(hemisphere);
+  const sun = new THREE.DirectionalLight(sky.sun, sky.sunIntensity);
   sun.position.set(70, 110, 40);
   sun.castShadow = true;
   sun.shadow.mapSize.set(2048, 2048);
   sun.shadow.radius = 4;
   sun.shadow.bias = -0.0004;
+  sun.shadow.normalBias = 0.03;
   Object.assign(sun.shadow.camera, { left: -150, right: 150, top: 150, bottom: -150, near: 1, far: 420 });
   scene.add(sun);
   const fill = new THREE.DirectionalLight(0xdfe9ff, 0.6);
   fill.position.set(-80, 60, -60);
   scene.add(fill);
 
-  const ground = new THREE.Mesh(new THREE.CircleGeometry(230, 72), new THREE.MeshStandardMaterial({ color: 0xe4ebe1, roughness: 1 }));
-  ground.rotation.x = -Math.PI / 2;
-  ground.receiveShadow = true;
-  ground.userData = { kind: 'ground' };
-  scene.add(ground);
+  // Lit windows and street lamps follow the sky (brightest at night); their meaning does not change.
+  const litMaterials = new Set();
+  const lampMaterials = [];
+  const animated = { water: null, jets: [], sparkles: [], clouds: [], foam: null };
+  const maxAnisotropy = renderer.capabilities.getMaxAnisotropy?.() ?? 1;
 
-  const textures = { lit: windowTexture(doc, true), unlit: windowTexture(doc, false), glow: windowTexture(doc, true, true) };
   const pickables = [];
   const labels = [];
   const beacons = [];
@@ -313,51 +464,381 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
     return new THREE.MeshStandardMaterial({ color, roughness: 0.8, metalness: 0.03, ...options });
   }
 
-  function texturedBlock(w, h, d, color, lit, options = {}) {
-    const map = (lit ? textures.lit : textures.unlit).clone();
+  const facadeCache = new Map();
+  function facadeTiles(style, wall, lit) {
+    const key = `${style}|${new THREE.Color(wall).getHexString()}|${lit}`;
+    if (!facadeCache.has(key)) {
+      const make = (glowOnly) => {
+        const size = FACADE_SIZES[style] ?? 128;
+        const texture = canvasTexture(doc, size, size, (ctx, w, h) => drawFacade(ctx, w, h, style, wall, lit, glowOnly));
+        texture.wrapS = THREE.RepeatWrapping;
+        texture.wrapT = THREE.RepeatWrapping;
+        texture.anisotropy = maxAnisotropy;
+        return texture;
+      };
+      facadeCache.set(key, { map: make(false), glow: lit ? make(true) : null });
+    }
+    return facadeCache.get(key);
+  }
+
+  /** A wall material for a face `span` wide and `h` tall: windows on the wall, glowing if the building is lit. */
+  function facadeMaterial(style, wall, lit, span, h, options = {}) {
+    const tiles = facadeTiles(style, wall, lit);
+    const [unitW, unitH] = FACADE_UNITS[style] ?? [1, 1];
+    const repeat = unitW === 0 ? [1, Math.max(1, Math.round(h / 1.1))] : [Math.max(1, Math.round(span / unitW)), Math.max(1, Math.round(h / unitH))];
+    const map = tiles.map.clone();
     map.needsUpdate = true;
-    map.repeat.set(Math.max(1, Math.round(w / 1.4)), Math.max(1, Math.round(h / 1.2)));
-    const material = standard(color, { map, ...options });
-    if (lit) {
-      const glow = textures.glow.clone();
+    map.repeat.set(...repeat);
+    const glass = style === 'glass';
+    const material = standard(0xffffff, { map, roughness: glass ? 0.32 : 0.85, metalness: glass ? 0.18 : 0.02, ...options });
+    if (tiles.glow) {
+      const glow = tiles.glow.clone();
       glow.needsUpdate = true;
       glow.repeat.copy(map.repeat);
       material.emissive = new THREE.Color(0xffc867);
       material.emissiveMap = glow;
-      material.emissiveIntensity = 0.6;
+      material.emissiveIntensity = sky.glow;
+      litMaterials.add(material);
     }
-    return mesh(new THREE.BoxGeometry(w, h, d), material, { y: h / 2 });
+    return material;
+  }
+
+  /** A block with facades on its four walls and a plain roof; stands on y = 0 of its parent. */
+  function block(w, h, d, { style = 'office', wall = 0xe9e4da, lit = false, roof = 0xc9c5bb, ...options } = {}) {
+    const alongX = facadeMaterial(style, wall, lit, d, h, options);
+    const alongZ = facadeMaterial(style, wall, lit, w, h, options);
+    const top = standard(roof, { roughness: 0.95, ...options });
+    return mesh(new THREE.BoxGeometry(w, h, d), [alongX, alongX, top, top, alongZ, alongZ], { y: h / 2 });
   }
 
   function register(group, data) {
     group.userData = data;
     pickables.push(group);
-    const materials = [];
+    const materials = new Set();
     group.traverse((child) => {
-      if (child.isMesh && child.material?.emissive) materials.push(child.material);
+      if (!child.isMesh) return;
+      for (const material of Array.isArray(child.material) ? child.material : [child.material]) {
+        if (material?.emissive) materials.add(material);
+      }
     });
-    highlightable.set(group, materials.map((material) => ({ material, base: material.emissive.clone(), intensity: material.emissiveIntensity })));
+    highlightable.set(group, [...materials].map((material) => ({ material, base: material.emissive.clone(), intensity: material.emissiveIntensity })));
   }
 
+  const roadMaterials = {
+    asphalt: standard(0x8e938f, { roughness: 0.95 }),
+    walk: standard(0xe4dfd2, { roughness: 1 }),
+  };
+  const dashTexture = canvasTexture(doc, 8, 64, (ctx, w, h) => {
+    ctx.clearRect(0, 0, w, h);
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(1, 0, w - 2, h * 0.55);
+  });
+  dashTexture.wrapT = THREE.RepeatWrapping;
+  dashTexture.anisotropy = maxAnisotropy;
   function road(from, to, width = 1.9) {
     const length = from.distanceTo(to);
     const angle = -Math.atan2(to.z - from.z, to.x - from.x) + Math.PI / 2;
-    const surface = mesh(new THREE.PlaneGeometry(width, length), standard(0xd3d9d1, { roughness: 1 }), { x: (from.x + to.x) / 2, y: 0.03, z: (from.z + to.z) / 2, shadow: false });
-    surface.rotation.set(-Math.PI / 2, 0, angle);
-    scene.add(surface);
-    const line = mesh(new THREE.PlaneGeometry(0.12, length), new THREE.MeshBasicMaterial({ color: 0xf8faf7 }), { x: (from.x + to.x) / 2, y: 0.05, z: (from.z + to.z) / 2, shadow: false });
-    line.rotation.set(-Math.PI / 2, 0, angle);
-    scene.add(line);
+    const at = { x: (from.x + to.x) / 2, z: (from.z + to.z) / 2 };
+    const strip = (stripWidth, material, y, offset = 0) => {
+      const surface = mesh(new THREE.PlaneGeometry(stripWidth, length), material, { x: at.x, y, z: at.z, shadow: false });
+      surface.rotation.set(-Math.PI / 2, 0, angle);
+      if (offset !== 0) surface.translateX(offset);
+      scene.add(surface);
+    };
+    // Sidewalks on both sides, asphalt between, a dashed centre line.
+    strip(width + 0.7, roadMaterials.walk, 0.025);
+    strip(width, roadMaterials.asphalt, 0.04);
+    const dashes = dashTexture.clone();
+    dashes.needsUpdate = true;
+    dashes.repeat.set(1, Math.max(1, Math.round(length / 1.6)));
+    strip(0.1, new THREE.MeshBasicMaterial({ map: dashes, transparent: true, opacity: 0.85, color: 0xf6f3e6 }), 0.055);
   }
 
-  function tree(x, z, scale = 1) {
-    const group = new THREE.Group();
-    group.add(mesh(new THREE.CylinderGeometry(0.12 * scale, 0.16 * scale, 0.7 * scale, 6), standard(0x8a6d4e), { y: 0.35 * scale }));
-    group.add(mesh(new THREE.ConeGeometry(0.7 * scale, 1.6 * scale, 7), standard(0x6f9a72, { roughness: 0.95 }), { y: 1.4 * scale }));
-    group.position.set(x, 0, z);
-    scene.add(group);
+  // Trees are many; they are drawn as instanced meshes (trunks, conifers, broadleaves) once the world is built.
+  const treePlacements = [];
+  function tree(x, z, scale = 1, y = 0) {
+    treePlacements.push([x, z, scale, y]);
+  }
+  function plantTrees() {
+    if (treePlacements.length === 0) return;
+    const conifers = [];
+    const broadleaves = [];
+    for (const placement of treePlacements) (hashUnit(`${placement[0]},${placement[1]}k`) < 0.42 ? conifers : broadleaves).push(placement);
+    const foliage = (color) => standard(color, { roughness: 0.9, flatShading: true });
+    const trunks = new THREE.InstancedMesh(new THREE.CylinderGeometry(0.1, 0.15, 0.8, 6), standard(0x7d6249, { roughness: 1 }), treePlacements.length);
+    const lower = new THREE.InstancedMesh(new THREE.ConeGeometry(0.78, 1.3, 7), foliage(0xffffff), Math.max(conifers.length, 1));
+    const upper = new THREE.InstancedMesh(new THREE.ConeGeometry(0.55, 1.05, 7), foliage(0xffffff), Math.max(conifers.length, 1));
+    const crowns = new THREE.InstancedMesh(new THREE.IcosahedronGeometry(0.72, 0), foliage(0xffffff), Math.max(broadleaves.length, 1));
+    const matrix = new THREE.Matrix4();
+    const rotation = new THREE.Quaternion();
+    const tint = new THREE.Color();
+    const up = new THREE.Vector3(0, 1, 0);
+    const place = (instanced, index, x, y, z, sx, sy, sz, spin) => {
+      rotation.setFromAxisAngle(up, spin);
+      matrix.compose(new THREE.Vector3(x, y, z), rotation, new THREE.Vector3(sx, sy, sz));
+      instanced.setMatrixAt(index, matrix);
+    };
+    treePlacements.forEach(([x, z, scale, y], index) => place(trunks, index, x, y + 0.4 * scale, z, scale, scale, scale, 0));
+    conifers.forEach(([x, z, scale, y], index) => {
+      const spin = hashUnit(`${x}${z}s`) * Math.PI;
+      const tall = 0.9 + hashUnit(`${z}${x}t`) * 0.35;
+      place(lower, index, x, y + 1.15 * scale * tall, z, scale, scale * tall, scale, spin);
+      place(upper, index, x, y + 1.85 * scale * tall, z, scale, scale * tall, scale, spin);
+      const shade = tint.setHSL(0.37 + (hashUnit(`${x},${z}`) - 0.5) * 0.04, 0.34, 0.3 + hashUnit(`${z},${x}`) * 0.08);
+      lower.setColorAt(index, shade);
+      upper.setColorAt(index, shade.offsetHSL(0, 0, 0.04));
+    });
+    broadleaves.forEach(([x, z, scale, y], index) => {
+      const squash = 0.85 + hashUnit(`${x}${z}q`) * 0.25;
+      place(crowns, index, x, y + 1.25 * scale, z, scale * squash, scale, scale * (1.9 - squash), hashUnit(`${x}${z}s`) * Math.PI);
+      crowns.setColorAt(index, tint.setHSL(0.24 + hashUnit(`${x},${z}h`) * 0.08, 0.38, 0.4 + hashUnit(`${z},${x}l`) * 0.12));
+    });
+    lower.count = conifers.length;
+    upper.count = conifers.length;
+    crowns.count = broadleaves.length;
+    for (const instanced of [trunks, lower, upper, crowns]) {
+      instanced.castShadow = true;
+      instanced.receiveShadow = true;
+      scene.add(instanced);
+    }
+    treePlacements.length = 0;
   }
 
+  // --- scenery (no data) -----------------------------------------------------
+  function pavingTexture() {
+    const texture = canvasTexture(doc, 256, 256, (ctx, w, h) => {
+      ctx.fillStyle = '#f1ece1';
+      ctx.fillRect(0, 0, w, h);
+      ctx.strokeStyle = 'rgba(176,164,140,0.5)';
+      ctx.lineWidth = 1.5;
+      for (let r = 16; r < w / 2; r += 18) {
+        ctx.beginPath();
+        ctx.arc(w / 2, h / 2, r, 0, Math.PI * 2);
+        ctx.stroke();
+      }
+      for (let i = 0; i < 24; i += 1) {
+        const a = (i / 24) * Math.PI * 2;
+        ctx.beginPath();
+        ctx.moveTo(w / 2 + Math.cos(a) * 16, h / 2 + Math.sin(a) * 16);
+        ctx.lineTo(w / 2 + Math.cos(a) * w / 2, h / 2 + Math.sin(a) * h / 2);
+        ctx.stroke();
+      }
+    });
+    texture.anisotropy = maxAnisotropy;
+    return texture;
+  }
+
+  const grass = { low: new THREE.Color(0x9fbf8c), high: new THREE.Color(0xd3e4bd), warm: new THREE.Color(0xd9d6a6), sand: new THREE.Color(0xeadfc2) };
+  /** Land, beach, sea and a far shore of mountains around the cities; scenery only. */
+  function buildTerrain(extent) {
+    const landRadius = extent + 22;
+    // Land: gentle, non-repeating colour variation (a repeating texture shimmered into stripes).
+    const land = mesh(paintVertices(new THREE.RingGeometry(0.01, landRadius, 160, 48), (color, x, y) => {
+      const broad = valueNoise(x / 16, y / 16, 'land');
+      const fine = valueNoise(x / 4.5, y / 4.5, 'tuft');
+      color.copy(grass.low).lerp(grass.high, broad * 0.7 + fine * 0.3);
+      if (valueNoise(x / 22, y / 22, 'dry') > 0.68) color.lerp(grass.warm, 0.35);
+      const shore = Math.max(0, (Math.hypot(x, y) - (landRadius - 3)) / 3);
+      color.lerp(grass.sand, shore * 0.8);
+    }), standard(0xffffff, { vertexColors: true, roughness: 1 }), { shadow: false });
+    land.rotation.x = -Math.PI / 2;
+    land.receiveShadow = true;
+    scene.add(land);
+    // Beach sloping into the water.
+    const beachGeometry = new THREE.RingGeometry(landRadius, landRadius + 5, 160, 3);
+    const beachPositions = beachGeometry.attributes.position;
+    for (let i = 0; i < beachPositions.count; i += 1) {
+      const t = (Math.hypot(beachPositions.getX(i), beachPositions.getY(i)) - landRadius) / 5;
+      beachPositions.setZ(i, -t * 0.42);
+    }
+    beachGeometry.computeVertexNormals();
+    const beach = mesh(paintVertices(beachGeometry, (color, x, y) => color.set(0xeadfc2).lerp(new THREE.Color(0xd7c8a3), (Math.hypot(x, y) - landRadius) / 5)), standard(0xffffff, { vertexColors: true, roughness: 1 }), { shadow: false });
+    beach.rotation.x = -Math.PI / 2;
+    scene.add(beach);
+    // Sea: shallow turquoise near the shore, deeper blue further out; a soft line of foam on the beach.
+    const sea = mesh(paintVertices(new THREE.RingGeometry(landRadius + 2.5, 760, 160, 24), (color, x, y) => {
+      const t = Math.min(1, Math.max(0, (Math.hypot(x, y) - landRadius - 2.5) / 140));
+      color.set(0x9ad3d3).lerp(new THREE.Color(0x3f7fa6), Math.sqrt(t));
+      color.lerp(new THREE.Color(0xb7dfe3), (valueNoise(x / 9, y / 9, 'swell') - 0.5) * 0.18);
+    }), standard(0xffffff, { vertexColors: true, roughness: 0.3, metalness: 0.08 }), { y: -0.36, shadow: false });
+    sea.rotation.x = -Math.PI / 2;
+    sea.receiveShadow = false;
+    scene.add(sea);
+    const foam = mesh(new THREE.RingGeometry(landRadius + 4.0, landRadius + 4.7, 160, 1), new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.5, depthWrite: false }), { y: -0.35, shadow: false });
+    foam.rotation.x = -Math.PI / 2;
+    scene.add(foam);
+    animated.foam = foam;
+    // A far shore: low, faceted mountains across the water, faded by the fog.
+    const rock = new THREE.Color(0xa7a497);
+    const snow = new THREE.Color(0xf3f5f5);
+    for (let i = 0; i < 22; i += 1) {
+      const angle = Math.PI * 0.85 + (i / 21) * Math.PI * 0.95 + (hashUnit(`m${i}a`) - 0.5) * 0.08;
+      const distance = landRadius + 115 + hashUnit(`m${i}d`) * 55;
+      const peak = 10 + hashUnit(`m${i}h`) * 18;
+      const radius = 11 + hashUnit(`m${i}r`) * 10;
+      const geometry = new THREE.IcosahedronGeometry(1, 2);
+      const positions = geometry.attributes.position;
+      for (let v = 0; v < positions.count; v += 1) {
+        const px = positions.getX(v);
+        const py = positions.getY(v);
+        const pz = positions.getZ(v);
+        const bump = 0.82 + valueNoise(px * 2.2 + i, pz * 2.2, 'ridge') * 0.36;
+        positions.setXYZ(v, px * radius * bump, Math.max(0, py) * peak * bump, pz * radius * bump);
+      }
+      geometry.computeVertexNormals();
+      paintVertices(geometry, (color, _x, y) => {
+        const t = y / peak;
+        color.set(0x86a383).lerp(rock, Math.min(1, t * 1.6));
+        if (peak > 20 && t > 0.72) color.lerp(snow, Math.min(1, (t - 0.72) * 5));
+      });
+      const mountain = mesh(geometry, new THREE.MeshLambertMaterial({ vertexColors: true, flatShading: true }), { x: Math.cos(angle) * distance, y: -0.5, z: Math.sin(angle) * distance, shadow: false });
+      mountain.rotation.y = hashUnit(`m${i}y`) * Math.PI;
+      mountain.receiveShadow = false;
+      scene.add(mountain);
+    }
+    // Clouds drifting over the far water, behind the island, so they never cover a city.
+    const cloudMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, transparent: true, opacity: 0.9, flatShading: true });
+    animated.cloudMaterial = cloudMaterial;
+    for (let i = 0; i < 7; i += 1) {
+      const cloud = new THREE.Group();
+      const puffs = 3 + Math.floor(hashUnit(`c${i}n`) * 3);
+      for (let p = 0; p < puffs; p += 1) {
+        const r = 2.6 + hashUnit(`c${i}p${p}`) * 2.4;
+        const puff = mesh(new THREE.IcosahedronGeometry(r, 1), cloudMaterial, { x: (p - puffs / 2) * 2.8, y: hashUnit(`c${i}y${p}`) * 1.2, z: (hashUnit(`c${i}z${p}`) - 0.5) * 2.5, shadow: false });
+        puff.scale.y = 0.62;
+        puff.receiveShadow = false;
+        cloud.add(puff);
+      }
+      cloud.userData = { angle: Math.PI * (0.95 + (i / 6) * 0.6) + (hashUnit(`c${i}a`) - 0.5) * 0.1, distance: landRadius + 34 + hashUnit(`c${i}d`) * 60, height: 24 + hashUnit(`c${i}h`) * 10, speed: 0.00002 + hashUnit(`c${i}s`) * 0.00002, phase: hashUnit(`c${i}f`) * Math.PI * 2 };
+      scene.add(cloud);
+      animated.clouds.push(cloud);
+    }
+    placeClouds(0);
+    // Keep the sun's shadow map on the land so shadows stay crisp.
+    const reach = landRadius + 6;
+    Object.assign(sun.shadow.camera, { left: -reach, right: reach, top: reach, bottom: -reach });
+    sun.shadow.camera.updateProjectionMatrix();
+    return landRadius;
+  }
+
+  function placeClouds(time) {
+    for (const cloud of animated.clouds) {
+      const { angle, distance, height, speed, phase } = cloud.userData;
+      const a = angle + Math.sin(time * speed + phase) * 0.08;
+      cloud.position.set(Math.cos(a) * distance, height, Math.sin(a) * distance);
+      cloud.rotation.y = -a;
+    }
+  }
+
+  const lampPlacements = [];
+  function streetLamp(x, z, y = 0) {
+    lampPlacements.push([x, z, y]);
+  }
+  function placeLamps() {
+    if (lampPlacements.length === 0) return;
+    const poles = new THREE.InstancedMesh(new THREE.CylinderGeometry(0.05, 0.07, 1.6, 6), standard(0x3f4844, { roughness: 0.6, metalness: 0.4 }), lampPlacements.length);
+    const arms = new THREE.InstancedMesh(new THREE.BoxGeometry(0.42, 0.05, 0.06), standard(0x3f4844, { roughness: 0.6, metalness: 0.4 }), lampPlacements.length);
+    const bulbMaterial = standard(0xfff3d6, { emissive: new THREE.Color(0xffd27a), emissiveIntensity: sky.lamps ? 1.8 : 0 });
+    lampMaterials.push(bulbMaterial);
+    const bulbs = new THREE.InstancedMesh(new THREE.SphereGeometry(0.14, 10, 8), bulbMaterial, lampPlacements.length);
+    // A warm pool of light on the ground under each lamp, shown only when the lamps are on.
+    const falloff = canvasTexture(doc, 64, 64, (ctx, w, h) => {
+      const gradient = ctx.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, w / 2);
+      gradient.addColorStop(0, '#ffffff');
+      gradient.addColorStop(0.45, '#6b6b6b');
+      gradient.addColorStop(1, '#000000');
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, w, h);
+    });
+    const poolMaterial = new THREE.MeshBasicMaterial({ color: 0xffc46a, map: falloff, transparent: true, opacity: 0, blending: THREE.AdditiveBlending, depthWrite: false });
+    animated.poolMaterial = poolMaterial;
+    const pools = new THREE.InstancedMesh(new THREE.PlaneGeometry(3.4, 3.4).rotateX(-Math.PI / 2), poolMaterial, lampPlacements.length);
+    const matrix = new THREE.Matrix4();
+    lampPlacements.forEach(([x, z, y], index) => {
+      poles.setMatrixAt(index, matrix.makeTranslation(x, y + 0.8, z));
+      arms.setMatrixAt(index, matrix.makeTranslation(x + 0.18, y + 1.58, z));
+      bulbs.setMatrixAt(index, matrix.makeTranslation(x + 0.36, y + 1.5, z));
+      pools.setMatrixAt(index, matrix.makeTranslation(x + 0.36, y + 0.07, z));
+    });
+    poles.castShadow = true;
+    pools.renderOrder = 1;
+    scene.add(poles, arms, bulbs, pools);
+    applyLampPools();
+    lampPlacements.length = 0;
+  }
+  function applyLampPools() {
+    if (animated.poolMaterial) animated.poolMaterial.opacity = sky.lamps ? Math.min(0.55, 0.15 + sky.glow * 0.16) : 0;
+  }
+
+  /** Trees and lamps along a road, kept off the plaza and the city plates. */
+  function avenue(from, to, keepOut) {
+    const length = from.distanceTo(to);
+    const dir = to.clone().sub(from).normalize();
+    const side = new THREE.Vector3(-dir.z, 0, dir.x);
+    for (let d = 3; d < length - 2; d += 4.2) {
+      const point = from.clone().addScaledVector(dir, d);
+      if (keepOut(point)) continue;
+      const index = Math.round(d / 4.2);
+      for (const sign of [-1, 1]) {
+        const at = point.clone().addScaledVector(side, sign * 1.9);
+        if (index % 3 === 0 && sign === 1) streetLamp(at.x, at.z);
+        else tree(at.x, at.z, 0.55 + hashUnit(`${from.x}${d}${sign}`) * 0.2);
+      }
+    }
+  }
+
+  /** Groves and fields between the cities; scenery only (no houses, which could read as engagements). */
+  function countryside(landRadius, cities, roads) {
+    const blocked = (x, z, margin) => {
+      if (Math.hypot(x, z) < PLAZA_RADIUS + 8) return true;
+      if (Math.hypot(x, z) > landRadius - 4) return true;
+      if (cities.some((city) => Math.hypot(x - city.x, z - city.z) < city.size * 0.8 + margin)) return true;
+      return roads.some(([a, b]) => {
+        const ab = b.clone().sub(a);
+        const t = Math.max(0, Math.min(1, new THREE.Vector3(x, 0, z).sub(a).dot(ab) / ab.lengthSq()));
+        return a.clone().addScaledVector(ab, t).distanceTo(new THREE.Vector3(x, 0, z)) < margin;
+      });
+    };
+    let groves = 0;
+    for (let i = 0; i < 90 && groves < 26; i += 1) {
+      const angle = hashUnit(`grove${i}a`) * Math.PI * 2;
+      const radius = PLAZA_RADIUS + 10 + hashUnit(`grove${i}r`) * (landRadius - PLAZA_RADIUS - 14);
+      const x = Math.cos(angle) * radius;
+      const z = Math.sin(angle) * radius;
+      if (blocked(x, z, 4)) continue;
+      groves += 1;
+      if (hashUnit(`grove${i}k`) > 0.7) {
+        // A field: a flat patch in a crop colour.
+        const field = mesh(new THREE.PlaneGeometry(6 + hashUnit(`f${i}w`) * 5, 4 + hashUnit(`f${i}h`) * 4), new THREE.MeshLambertMaterial({ color: hashUnit(`f${i}c`) > 0.5 ? 0xe7dca0 : 0xbfd69b }), { x, y: 0.02, z, shadow: false });
+        field.rotation.set(-Math.PI / 2, 0, hashUnit(`f${i}r`) * Math.PI);
+        scene.add(field);
+        continue;
+      }
+      const count = 4 + Math.floor(hashUnit(`grove${i}n`) * 6);
+      for (let t = 0; t < count; t += 1) {
+        const a = hashUnit(`grove${i}t${t}a`) * Math.PI * 2;
+        const r = hashUnit(`grove${i}t${t}r`) * 3.2;
+        tree(x + Math.cos(a) * r, z + Math.sin(a) * r, 0.6 + hashUnit(`grove${i}t${t}s`) * 0.5);
+      }
+    }
+  }
+
+  function applySky() {
+    sky = skyAt(new Date().getHours(), skyMode);
+    scene.background?.dispose?.();
+    scene.background = skyTexture(sky);
+    scene.fog.color.setHex(sky.fog);
+    sun.color.setHex(sky.sun);
+    sun.intensity = sky.sunIntensity;
+    hemisphere.intensity = sky.hemi;
+    renderer.toneMappingExposure = sky.exposure;
+    for (const material of litMaterials) if (!highlightedMaterials.has(material)) material.emissiveIntensity = sky.glow;
+    for (const material of lampMaterials) material.emissiveIntensity = sky.lamps ? 1.8 : 0;
+    applyLampPools();
+    animated.cloudMaterial?.color.set(sky.phase === 'night' ? 0x5a6782 : sky.phase === 'dusk' ? 0xf4d6c6 : 0xffffff);
+  }
+  const highlightedMaterials = new Set();
+
   // --- plaza ---------------------------------------------------------------
   function buildPlaza(rows, rowItems, waitingOf, now) {
     const plaza = new THREE.Group();
@@ -365,6 +846,20 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
     plaza.add(mesh(new THREE.CylinderGeometry(PLAZA_RADIUS, PLAZA_RADIUS + 0.4, 0.7, 64), standard(0xf3efe6, { roughness: 0.9 }), { y: 0.35 }));
     plaza.add(mesh(new THREE.TorusGeometry(PLAZA_RADIUS - 0.3, 0.08, 6, 64), standard(0xd8cfbd), { y: 0.72 }));
     plaza.children[2].rotation.x = Math.PI / 2;
+    const paving = mesh(new THREE.CircleGeometry(PLAZA_RADIUS - 0.05, 64), standard(0xffffff, { map: pavingTexture(), roughness: 0.95 }), { y: 0.705, shadow: false });
+    paving.rotation.x = -Math.PI / 2;
+    plaza.add(paving);
+    if (rows.length !== 1) {
+      // A fountain in the middle of the plaza (scenery; the kinds of judgment stand around it).
+      plaza.add(mesh(new THREE.CylinderGeometry(1.5, 1.7, 0.45, 32), standard(0xd9d1c1), { y: 0.92 }));
+      const pool = mesh(new THREE.CircleGeometry(1.3, 32), standard(0x9fd0de, { roughness: 0.2, metalness: 0.1 }), { y: 1.15, shadow: false });
+      pool.rotation.x = -Math.PI / 2;
+      plaza.add(pool);
+      plaza.add(mesh(new THREE.CylinderGeometry(0.18, 0.24, 0.9, 12), standard(0xd9d1c1), { y: 1.5 }));
+      const jet = mesh(new THREE.CylinderGeometry(0.05, 0.16, 1.2, 10), new THREE.MeshBasicMaterial({ color: 0xe8f6fb, transparent: true, opacity: 0.7 }), { y: 2.5, shadow: false });
+      plaza.add(jet);
+      animated.jets.push(jet);
+    }
     scene.add(plaza);
     register(plaza, { kind: 'plaza' });
     addLabel('広場（判断）', new THREE.Vector3(0, 0.8, PLAZA_RADIUS + 2.8), 'is-plaza', { priority: LABEL_PRIORITY.plaza });
@@ -383,16 +878,19 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
       const group = new THREE.Group();
       group.position.set(x, 0.7, z);
       const color = STATE_COLORS[row.state] ?? 0x929b95;
-      group.add(mesh(new THREE.BoxGeometry(2.6, 0.25, 2.6), standard(0xe6ded0), { y: 0.12 }));
-      const body = texturedBlock(2.1, height, 2.1, color, recent);
+      group.add(mesh(new THREE.BoxGeometry(2.7, 0.25, 2.7), standard(0xe6ded0), { y: 0.12 }));
+      const wall = new THREE.Color(color);
+      const body = block(2.1, height, 2.1, { style: 'civic', wall, lit: recent, roof: 0xd9d3c6 });
       body.position.y += 0.25;
       group.add(body);
-      const cap = texturedBlock(1.4, 0.7, 1.4, color, recent);
-      cap.position.y += 0.25 + height;
+      group.add(mesh(new THREE.BoxGeometry(2.3, 0.14, 2.3), standard(0xf3efe6), { y: 0.25 + height + 0.07 }));
+      const cap = block(1.4, 0.56, 1.4, { style: 'civic', wall, lit: recent, roof: 0xd9d3c6 });
+      cap.position.y += 0.25 + height + 0.14;
       group.add(cap);
       scene.add(group);
       register(group, { kind: 'judgment', row, items: rowItems.get(row.key) ?? [] });
       const top = 0.7 + 0.25 + height + 0.7;
+      markers.plaza.set(row.key, new THREE.Vector3(x, top, z));
       const waiting = waitingOf(row);
       if (waiting > 0) {
         const beam = mesh(new THREE.CylinderGeometry(0.22, 0.22, 16, 12), new THREE.MeshBasicMaterial({ color: 0xd92335, transparent: true, opacity: 0.55 }), { x, y: top + 8, z, shadow: false });
@@ -415,6 +913,15 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
   }
 
   // --- cities ----------------------------------------------------------------
+  // The form says the business's kind; the height and the lit windows say its last 30 days.  Everything
+  // else on a building (podium, cornice, roof plant, portico) is detail and means nothing on its own.
+  function rooftopPlant(group, y, span, options) {
+    const metal = standard(0xb7bcbc, { roughness: 0.6, metalness: 0.3, ...options });
+    group.add(mesh(new THREE.BoxGeometry(span * 0.32, 0.32, span * 0.22), metal, { x: -span * 0.18, y: y + 0.16, z: span * 0.12 }));
+    group.add(mesh(new THREE.BoxGeometry(span * 0.18, 0.24, span * 0.18), metal, { x: span * 0.22, y: y + 0.12, z: -span * 0.2 }));
+    group.add(mesh(new THREE.CylinderGeometry(0.22, 0.22, 0.5, 12), standard(0xd8d4ca, options), { x: span * 0.24, y: y + 0.25, z: span * 0.2 }));
+  }
+
   function landmark(form, color, height, status, active = true) {
     const group = new THREE.Group();
     const phase = statusPhase(status);
@@ -423,22 +930,60 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
     const lit = !concept && active;
     const tone = phase === 'maintenance' ? muted(color, 0.55) : new THREE.Color(color);
     const options = concept ? { transparent: true, opacity: 0.38 } : {};
+    const stone = phase === 'maintenance' ? muted(0xe7e2d6, 0.3) : new THREE.Color(0xe7e2d6);
+    const at = (object, y) => {
+      object.position.y += y;
+      group.add(object);
+      return object;
+    };
     if (form === 'tower') {
-      const base = texturedBlock(3, height, 3, tone, lit, { roughness: 0.4, ...options });
-      const mid = texturedBlock(2.2, height * 0.45, 2.2, tone, lit, { roughness: 0.4, ...options });
-      mid.position.y += height;
-      group.add(base, mid, mesh(new THREE.CylinderGeometry(0.05, 0.05, 1.6, 6), standard(0x46524a), { y: height * 1.45 + 0.8 }));
+      // A glass tower on a stone podium, set back once, with a crown and a mast (total height × 1.45).
+      const podium = Math.min(1.1, height * 0.2);
+      at(block(3.8, podium, 3.8, { style: 'office', wall: stone, lit, roof: 0xcfcac0, ...options }), 0);
+      at(block(3, height - podium, 3, { style: 'glass', wall: tone, lit, roof: 0xd5d8d6, roughness: 0.3, ...options }), podium);
+      at(block(2.2, height * 0.45, 2.2, { style: 'glass', wall: tone, lit, roof: 0xd5d8d6, roughness: 0.3, ...options }), height);
+      group.add(mesh(new THREE.BoxGeometry(2.45, 0.16, 2.45), standard(0xf1f1ee, options), { y: height * 1.45 + 0.08 }));
+      group.add(mesh(new THREE.BoxGeometry(3.15, 0.12, 3.15), standard(0xf1f1ee, options), { y: height + 0.06 }));
+      rooftopPlant(group, height + 0.12, 3, options);
+      group.add(mesh(new THREE.CylinderGeometry(0.04, 0.07, 1.6, 6), standard(0x5a6460, { metalness: 0.5, roughness: 0.4 }), { y: height * 1.45 + 0.96 }));
+      group.add(mesh(new THREE.SphereGeometry(0.09, 8, 6), standard(0xffffff, { emissive: new THREE.Color(0xffffff), emissiveIntensity: 0.4 }), { y: height * 1.45 + 1.8 }));
     } else if (form === 'hall') {
-      const hall = texturedBlock(4.4, height * 0.55, 3, tone, lit, options);
-      const roof = mesh(gableRoof(4.4, 3, 1.4), standard(muted(color, 0.15).multiplyScalar(0.85), options), { y: height * 0.55 });
+      // A brick hall with a pitched roof in the kind's colour and a columned entrance.
+      const bodyHeight = height * 0.55;
+      const wall = new THREE.Color(0xf0e6d6).lerp(tone, 0.28);
+      at(block(4.4, bodyHeight, 3, { style: 'brick', wall, lit, roof: 0x9b8f80, ...options }), 0);
+      group.add(mesh(new THREE.BoxGeometry(4.6, 0.14, 3.2), standard(0xf5f1e8, options), { y: bodyHeight + 0.07 }));
+      const roof = mesh(gableRoof(3.2, 4.6, 1.45), standard(tone.clone().multiplyScalar(0.82), { roughness: 0.75, ...options }), { y: bodyHeight + 0.14 });
       roof.rotation.y = Math.PI / 2;
-      group.add(hall, roof);
+      group.add(roof);
+      group.add(mesh(new THREE.BoxGeometry(0.42, 0.9, 0.42), standard(0x9c7a62, options), { x: 1.2, y: bodyHeight + 0.9, z: -0.6 }));
+      // Portico on the side that faces the default camera.
+      const columnHeight = Math.max(0.9, bodyHeight * 0.72);
+      group.add(mesh(new THREE.BoxGeometry(3, 0.16, 1.1), standard(0xebe5d9, options), { y: 0.08, z: 2.05 }));
+      for (let c = 0; c < 4; c += 1) group.add(mesh(new THREE.CylinderGeometry(0.11, 0.13, columnHeight, 10), standard(0xf7f4ee, options), { x: -1.2 + c * 0.8, y: 0.16 + columnHeight / 2, z: 2.25 }));
+      const pediment = mesh(gableRoof(3.1, 1.1, 0.55), standard(0xf7f4ee, options), { y: 0.16 + columnHeight, z: 2.05 });
+      group.add(pediment);
+      group.add(mesh(new THREE.BoxGeometry(0.7, Math.min(1.1, columnHeight * 0.8), 0.06), standard(0x6e5442, options), { y: 0.16 + Math.min(1.1, columnHeight * 0.8) / 2, z: 1.52 }));
     } else if (form === 'dome') {
-      group.add(mesh(new THREE.CylinderGeometry(1.9, 2.1, height * 0.5, 24), standard(tone, options), { y: height * 0.25 }));
-      group.add(mesh(new THREE.SphereGeometry(1.9, 24, 12, 0, Math.PI * 2, 0, Math.PI / 2), standard(0xf3f6f8, { roughness: 0.3, ...options }), { y: height * 0.5 }));
+      // A research hall: a windowed drum under a faceted dome with a lantern, and a low wing.
+      const drumHeight = height * 0.5;
+      const drum = mesh(new THREE.CylinderGeometry(1.9, 2.05, drumHeight, 32, 1, true), facadeMaterial('research', tone, lit, 2 * Math.PI * 1.9, drumHeight, options), { y: drumHeight / 2 });
+      group.add(drum);
+      group.add(mesh(new THREE.TorusGeometry(2.0, 0.12, 6, 40).rotateX(Math.PI / 2), standard(0xf3f1ea, options), { y: drumHeight }));
+      group.add(mesh(new THREE.SphereGeometry(1.95, 18, 9, 0, Math.PI * 2, 0, Math.PI / 2), standard(0xeef2f4, { roughness: 0.28, metalness: 0.25, flatShading: true, ...options }), { y: drumHeight }));
+      group.add(mesh(new THREE.CylinderGeometry(0.32, 0.36, 0.5, 12), standard(0xf3f1ea, options), { y: drumHeight + 1.95 + 0.2 }));
+      group.add(mesh(new THREE.ConeGeometry(0.42, 0.45, 12), standard(tone.clone().multiplyScalar(0.85), options), { y: drumHeight + 1.95 + 0.67 }));
+      const wing = at(block(2.4, Math.max(0.9, drumHeight * 0.45), 1.5, { style: 'office', wall: stone, lit, roof: 0xcfcac0, ...options }), 0);
+      wing.position.set(-1.9, wing.position.y, 1.2);
     } else {
-      group.add(texturedBlock(3.6, height * 0.75, 2.8, tone, lit, options));
-      group.add(mesh(new THREE.BoxGeometry(1.2, 0.6, 1), standard(0xb8c2bb), { y: height * 0.75 + 0.3 }));
+      // An office: a main block and a lower wing, with a parapet and roof plant.
+      const mainHeight = height * 0.75;
+      const wall = new THREE.Color(0xeeeae2).lerp(tone, 0.35);
+      at(block(3.6, mainHeight, 2.8, { style: 'office', wall, lit, roof: 0xc4c0b6, ...options }), 0);
+      group.add(mesh(new THREE.BoxGeometry(3.72, 0.16, 2.92), standard(0xf3f1ec, options), { y: mainHeight + 0.08 }));
+      rooftopPlant(group, mainHeight + 0.16, 2.8, options);
+      const wing = at(block(1.9, Math.max(0.8, mainHeight * 0.5), 2.1, { style: 'office', wall: stone, lit, roof: 0xc4c0b6, ...options }), 0);
+      wing.position.set(1.95, wing.position.y, 1.0);
     }
     if (concept) {
       // Scaffold outline: a business that is still a concept.
@@ -449,22 +994,36 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
     return group;
   }
 
+  const HOUSE_WALLS = [0xf4efe4, 0xefe6d6, 0xf2ece6, 0xe9e4d6];
   function house(engagement, color) {
     const group = new THREE.Group();
     const status = engagement.status;
     const phase = statusPhase(status);
     if (phase === 'finished') {
-      // A finished engagement leaves its lot: a low slab, no roof.
-      group.add(mesh(new THREE.BoxGeometry(1.8, 0.18, 1.8), standard(0xc9cfc8), { y: 0.09 }));
+      // A finished engagement becomes a small memorial park: a lawn edged by hedges, a stone, a bench.
+      group.add(mesh(new THREE.BoxGeometry(1.9, 0.14, 1.9), standard(0xa6c796, { roughness: 1 }), { y: 0.07 }));
+      const hedge = standard(0x6f9a68, { roughness: 1 });
+      for (const [hx, hz, hw, hd] of [[0, -0.88, 1.9, 0.16], [-0.88, 0, 0.16, 1.9], [0.88, 0.35, 0.16, 1.2]]) group.add(mesh(new THREE.BoxGeometry(hw, 0.26, hd), hedge, { x: hx, y: 0.24, z: hz }));
+      group.add(mesh(new THREE.BoxGeometry(0.5, 0.12, 0.5), standard(0xcfc8b8), { y: 0.2 }));
+      group.add(mesh(new THREE.BoxGeometry(0.24, 0.85, 0.24), standard(0xdcd5c6), { y: 0.68 }));
+      group.add(mesh(new THREE.ConeGeometry(0.18, 0.24, 4).rotateY(Math.PI / 4), standard(0xdcd5c6), { y: 1.22 }));
+      group.add(mesh(new THREE.BoxGeometry(0.7, 0.08, 0.24), standard(0x9a7b5c), { x: 0.2, y: 0.32, z: 0.62 }));
+      group.add(mesh(new THREE.IcosahedronGeometry(0.26, 0), standard(0x7fa877, { roughness: 1, flatShading: true }), { x: -0.5, y: 0.34, z: 0.45 }));
       group.userData.finished = true;
       return group;
     }
+    // One house per engagement; the roof takes the kind's colour, lit windows mean the engagement is active.
     const h = 0.9 + hashUnit(engagement.id) * 1.1;
-    const tone = phase === 'maintenance' ? muted(color, 0.6) : new THREE.Color(0xf2efe8);
-    group.add(texturedBlock(1.6, h, 1.4, tone, phase === 'active'));
-    const roof = mesh(gableRoof(1.6, 1.4, 0.8), standard(phase === 'maintenance' ? muted(color, 0.6) : color), { y: h });
-    roof.rotation.y = hashUnit(`${engagement.id}r`) > 0.5 ? Math.PI / 2 : 0;
+    const wall = phase === 'maintenance' ? muted(color, 0.6) : new THREE.Color(HOUSE_WALLS[Math.floor(hashUnit(`${engagement.id}w`) * HOUSE_WALLS.length)]);
+    const turned = hashUnit(`${engagement.id}r`) > 0.5;
+    group.add(block(1.6, h, 1.4, { style: 'house', wall, lit: phase === 'active', roof: 0xb9b2a5 }));
+    const roofColor = phase === 'maintenance' ? muted(color, 0.6) : new THREE.Color(color).multiplyScalar(0.9);
+    const roof = mesh(gableRoof(turned ? 1.4 : 1.6, turned ? 1.6 : 1.4, 0.8).scale(1.08, 1, 1.08), standard(roofColor, { roughness: 0.7 }), { y: h });
+    roof.rotation.y = turned ? Math.PI / 2 : 0;
     group.add(roof);
+    group.add(mesh(new THREE.BoxGeometry(0.22, 0.55, 0.22), standard(0x9c7a62), { x: 0.42, y: h + 0.45, z: -0.25 }));
+    group.add(mesh(new THREE.BoxGeometry(0.34, 0.58, 0.05), standard(0x7a5a43), { y: 0.29, z: 0.72 }));
+    group.add(mesh(new THREE.BoxGeometry(0.52, 0.05, 0.22), standard(0xe2ddd2), { y: 0.62, z: 0.8 }));
     return group;
   }
 
@@ -483,8 +1042,13 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
     return group;
   }
 
+  const markers = { cities: new Map(), plaza: new Map() };
   function buildCities({ cities, sectors, extent }, judgmentsByBusiness = new Map()) {
     fitExtent(extent);
+    const landRadius = buildTerrain(extent);
+    const roads = [];
+    const keepOut = (point) => Math.hypot(point.x, point.z) < PLAZA_RADIUS + 5
+      || cities.some((city) => Math.hypot(point.x - city.x, point.z - city.z) < city.size * 0.62 + 1.2);
     for (let i = 0; i < 12; i += 1) {
       const angle = (i / 12) * Math.PI * 2;
       road(new THREE.Vector3(Math.cos(angle) * (PLAZA_RADIUS + 4), 0, Math.sin(angle) * (PLAZA_RADIUS + 4)), new THREE.Vector3(Math.cos(angle + Math.PI / 6) * (PLAZA_RADIUS + 4), 0, Math.sin(angle + Math.PI / 6) * (PLAZA_RADIUS + 4)), 1.5);
@@ -495,16 +1059,22 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
       const color = kindColor(kind);
       const start = new THREE.Vector3(x, 0, z).setLength(PLAZA_RADIUS + 4);
       road(start, new THREE.Vector3(x, 0, z));
+      roads.push([start, new THREE.Vector3(x, 0, z)]);
+      avenue(start, new THREE.Vector3(x, 0, z), keepOut);
       const group = new THREE.Group();
       group.position.set(x, 0, z);
-      const plateColor = new THREE.Color(0xf7f8f4).lerp(new THREE.Color(color), 0.1);
+      // A city block: a curb step, a paved block in a hint of the kind's colour, lamps on its corners.
+      group.add(mesh(roundedPlate(size + 0.9, size + 0.9, 0.18, 2.0), standard(0xcfc9bb, { roughness: 1 })));
+      const plateColor = new THREE.Color(0xf3f1ea).lerp(new THREE.Color(color), 0.08);
       group.add(mesh(roundedPlate(size, size, 0.45, 1.6), standard(plateColor, { roughness: 0.95 })));
+      for (const [cx, cz] of [[1, 1], [1, -1], [-1, 1], [-1, -1]]) streetLamp(x + cx * (size / 2 - 0.9), z + cz * (size / 2 - 0.9), 0.45);
       const measures = cityMeasures(business, { isFinished, judgments: judgmentsByBusiness.get(business.code) ?? [] });
       const towerHeight = measures.towerHeight;
       group.add(landmark(entry.form, color, towerHeight, business.status, measures.lit));
       scene.add(group);
       register(group, { kind: 'city', business });
       const top = entry.form === 'tower' ? towerHeight * 1.45 + 1.8 : towerHeight + 1;
+      markers.cities.set(business.code, new THREE.Vector3(x, top, z));
       const cityLabel = addLabel(statusPhase(business.status) === 'concept' ? `${business.name}（${statusText(business.status)}）` : business.name, new THREE.Vector3(x, top, z), 'is-city', { priority: LABEL_PRIORITY.city, owner: group });
       cityLabel.node.style.borderColor = `${entry.color}80`;
       cityLabel.business = business;
@@ -540,9 +1110,12 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
       const treeCount = 2 + Math.floor(hashUnit(business.id) * 3);
       for (let t = 0; t < treeCount; t += 1) {
         const a = hashUnit(`${business.id}${t}`) * Math.PI * 2;
-        tree(x + Math.cos(a) * size * 0.42, z + Math.sin(a) * size * 0.42, 0.8);
+        tree(x + Math.cos(a) * size * 0.42, z + Math.sin(a) * size * 0.42, 0.8, 0.45);
       }
     }
+    countryside(landRadius, cities, roads);
+    plantTrees();
+    placeLamps();
     for (const { kind, angle } of sectors) {
       addLabel(kindEntry(kind).label, new THREE.Vector3(Math.cos(angle) * 21, 0.2, Math.sin(angle) * 21), 'is-sector', { priority: LABEL_PRIORITY.sector });
     }
@@ -559,11 +1132,13 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
   function setHighlight(group, on) {
     for (const entry of highlightable.get(group) ?? []) {
       if (on) {
+        highlightedMaterials.add(entry.material);
         entry.material.emissive.set(0x3d8f74);
         entry.material.emissiveIntensity = 0.35;
       } else {
+        highlightedMaterials.delete(entry.material);
         entry.material.emissive.copy(entry.base);
-        entry.material.emissiveIntensity = entry.intensity;
+        entry.material.emissiveIntensity = litMaterials.has(entry.material) ? sky.glow : entry.intensity;
       }
     }
   }
@@ -705,6 +1280,34 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
     }
   }
 
+  /** A short burst of rising lights over what moved since the last visit. */
+  function markChanges(changes) {
+    const points = [
+      ...(changes?.cities ?? []).map((code) => markers.cities.get(code)),
+      ...(changes?.plaza ?? []).map((key) => markers.plaza.get(key)),
+    ].filter(Boolean);
+    for (const point of points) {
+      for (let i = 0; i < 10; i += 1) {
+        // Around the building and from its middle, so the labels above it never hide the sparks.
+        const angle = (i / 10) * Math.PI * 2;
+        const spark = mesh(new THREE.SphereGeometry(0.6, 10, 8), new THREE.MeshBasicMaterial({ color: 0xffb21a, transparent: true, opacity: 0.95, fog: false }), { x: point.x + Math.cos(angle) * 2.6, y: point.y * 0.35, z: point.z + Math.sin(angle) * 2.6, shadow: false });
+        spark.userData = { base: Math.max(1.2, point.y * 0.35), rise: Math.max(4, point.y * 0.8), delay: i * 220 };
+        scene.add(spark);
+        animated.sparkles.push(spark);
+      }
+      // A ring on the ground that pulses with the sparks.
+      const ring = mesh(new THREE.RingGeometry(2.8, 3.5, 48), new THREE.MeshBasicMaterial({ color: 0xffb21a, transparent: true, opacity: 0.8, side: THREE.DoubleSide, depthTest: false, fog: false }), { x: point.x, y: 0.9, z: point.z, shadow: false });
+      ring.rotation.x = -Math.PI / 2;
+      ring.renderOrder = 2;
+      ring.userData = { ring: true, base: 0.9, delay: 0 };
+      scene.add(ring);
+      animated.sparkles.push(ring);
+    }
+    animated.sparkleStart = null;
+    return points.length;
+  }
+
+  let lastSkyMinute = -1;
   let running = true;
   function frame(time) {
     if (!running) return;
@@ -735,7 +1338,36 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
         renderer.domElement.style.cursor = hovered ? 'pointer' : '';
       }
     }
+    const minute = Math.floor(Date.now() / 60000);
+    if (skyMode === 'auto' && minute !== lastSkyMinute) {
+      if (lastSkyMinute !== -1 && skyAt(new Date().getHours(), 'auto').phase !== sky.phase) applySky();
+      lastSkyMinute = minute;
+    }
+    if (animated.sparkles.length) {
+      // Timed by the clock, not the frame timestamp, which can lag behind on a slow renderer.
+      const clock = performance.now();
+      animated.sparkleStart ??= clock;
+      const elapsed = clock - animated.sparkleStart;
+      for (const spark of animated.sparkles) {
+        const t = Math.max(0, elapsed - spark.userData.delay) / 2600;
+        const cycle = t % 1;
+        if (spark.userData.ring) {
+          spark.scale.setScalar(reducedMotion ? 1 : 1 + cycle * 0.6);
+          spark.material.opacity = elapsed > 9000 ? Math.max(0, 0.8 - (elapsed - 9000) / 1500) : reducedMotion ? 0.8 : 0.8 * (1 - cycle);
+          continue;
+        }
+        spark.position.y = spark.userData.base + (reducedMotion ? 0.6 : cycle * spark.userData.rise);
+        spark.material.opacity = elapsed > 9000 ? Math.max(0, 1 - (elapsed - 9000) / 1500) : reducedMotion ? 0.9 : 0.95 * (1 - cycle);
+      }
+      if (elapsed > 10500) {
+        for (const spark of animated.sparkles) scene.remove(spark);
+        animated.sparkles = [];
+      }
+    }
     if (!reducedMotion) {
+      if (animated.clouds.length) placeClouds(time);
+      if (animated.foam) animated.foam.material.opacity = 0.3 + 0.24 * (1 + Math.sin(time / 1400)) / 2;
+      for (const jet of animated.jets) jet.scale.y = 0.85 + 0.2 * Math.sin(time / 260);
       const wave = (1 + Math.sin(time / 380)) / 2;
       for (const beam of beacons) beam.material.opacity = 0.35 + 0.3 * wave;
       for (const ring of glows) {
@@ -753,6 +1385,13 @@ function createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear }
   return {
     buildPlaza,
     buildCities,
+    markChanges,
+    /** The sky: 'auto' follows the hour; 'day', 'dusk' or 'night' fix it.  Returns the phase shown. */
+    setSky(mode) {
+      skyMode = mode;
+      applySky();
+      return sky.phase;
+    },
     flyTo,
     resetView,
     clearSelection() {
@@ -799,12 +1438,26 @@ export function createWorldView({ root, rail, page, document: explicitDocument,
   root.append(wrap);
   let scene = null;
 
+  // The sky follows the hour by default; the viewer can fix it to see the lit windows at night.
+  const SKY_MODES = [['auto', '空：時刻'], ['day', '空：昼'], ['dusk', '空：夕方'], ['night', '空：夜']];
+  let skyIndex = 0;
+  const skyButton = workspaceButton(doc, {
+    text: SKY_MODES[0][1],
+    onClick: () => {
+      skyIndex = (skyIndex + 1) % SKY_MODES.length;
+      skyButton.textContent = SKY_MODES[skyIndex][1];
+      scene?.setSky(SKY_MODES[skyIndex][0]);
+    },
+  });
   const header = workspacePageHeader(doc, {
     crumbs: page?.crumbs ?? ['あなたのBrainbase', '世界'],
     title: '世界',
     lead: '事業を都市、案件を区画、判断の種類を広場の建物として描いています。見るための画面で、ここからは何も書き換えません。',
     source: page?.source ?? null,
-    actions: [workspaceButton(doc, { text: '全体に戻る', onClick: () => { scene?.clearSelection(); showEmptyRail(); scene?.resetView(); } })],
+    actions: [
+      skyButton,
+      workspaceButton(doc, { text: '全体に戻る', onClick: () => { scene?.clearSelection(); showEmptyRail(); scene?.resetView(); } }),
+    ],
   });
   const notices = el(doc, 'div', { className: 'bb-world-hud', attrs: { 'aria-live': 'polite' } });
   const legend = el(doc, 'div', { className: 'bb-world-legend', attrs: { 'aria-label': '凡例' } });
@@ -916,7 +1569,7 @@ export function createWorldView({ root, rail, page, document: explicitDocument,
           ['分類', kindText],
           ['状態', statusText(business.status)],
           ['コード', business.code],
-          ['進行中の案件（都市の広さ）', `${measures.open}件${measures.finished ? `（完了・終了${measures.finished}件は更地）` : ''}`],
+          ['進行中の案件（都市の広さ）', `${measures.open}件${measures.finished ? `（完了・終了${measures.finished}件は記念公園）` : ''}`],
           ['最近30日の動き（高さ・明かり）', `決定${measures.decisions}件${judgmentText}`],
         ]) }));
         const ul = el(doc, 'ul', { className: 'bb-world-rail-list' });
@@ -1072,6 +1725,46 @@ export function createWorldView({ root, rail, page, document: explicitDocument,
     scene = createScene({ doc, stage, labelsLayer, reducedMotion, onPick, onClear: showEmptyRail });
     scene.buildPlaza(rows, rowItems, (row) => (rowItems.get(row.key) ?? []).filter((ref) => isWaiting(proofs.get(ref.decision_attempt_id))).length, Date.now());
     scene.buildCities(layoutWorld(businesses), placement.byBusiness);
+    showChangesSinceLastVisit(note, businesses, rows);
+  }
+
+  /**
+   * What moved since this viewer last opened the world (a per-viewer convenience kept in this browser;
+   * nothing is lost if the browser forgets it).
+   */
+  function showChangesSinceLastVisit(note, businesses, rows) {
+    const key = 'brainbase.world.lastVisit';
+    let lastVisit = null;
+    try {
+      lastVisit = globalThis.localStorage?.getItem(key) ?? null;
+    } catch {
+      lastVisit = null;
+    }
+    const changes = changesSince(lastVisit, businesses, placement.byBusiness, rows);
+    try {
+      globalThis.localStorage?.setItem(key, new Date().toISOString());
+    } catch {
+      // Without storage the world simply shows no marks next time.
+    }
+    if (!changes) {
+      note('前回から', '初めての表示です。次に開いたときから、前回から動きがあった所に光の印を出します。');
+      return;
+    }
+    const names = new Map(businesses.map((business) => [business.code, business.name]));
+    const cityNames = changes.cities.map((code) => names.get(code) ?? code);
+    const last = new Date(changes.since);
+    const pad = (value) => String(value).padStart(2, '0');
+    const when = `${pad(last.getMonth() + 1)}/${pad(last.getDate())} ${pad(last.getHours())}:${pad(last.getMinutes())}`;
+    if (cityNames.length === 0 && changes.plaza.length === 0) {
+      note('前回から', `前回（${when}）から、新しい決定や判断はありません。`);
+      return;
+    }
+    const parts = [
+      cityNames.length ? `都市：${cityNames.join('・')}` : null,
+      changes.plaza.length ? `広場の判断の種類${changes.plaza.length}つ` : null,
+    ].filter(Boolean);
+    note('前回から', `前回（${when}）から動きがあった所に光の印を出しています。${parts.join('、')}。`, 'attention');
+    scene?.markChanges(changes);
   }
 
   void load();