<!-- SOLIDIVISM · part 59 -->
const size = 10 + (i % 3) * 3;
    const height = 12 + (i % 4) * 4;
    Solidivism.addBuilding(bx, bz, size, height, size, names[i]);
  }

  // Command tower — the tallest, in the distance ahead
  Solidivism.addBuilding(0, 70, 16, 30, 16, 'COMMAND');

  // Toolbar buttons
  document.getElementById('btn-cam').onclick = () => {
    const p = Solidivism.getPlayer();
    const c = Solidivism.getCamera();
    if (p && c) {
      c.position.set(p.position.x, p.position.y + 12, p.position.z + 25);
    }
  };
  document.getElementById('btn-ctrl').onclick = () => {
    const p = Solidivism.getPlayer();
    if (p) { p.position.set(-25, 0, 38); } // Outside control room door
  };
  document.getElementById('btn-help').onclick = () => {
    alert('SOLIDIVISM\n\nJoystick: move\n📷: reset camera\n🎛️: go to control room\nWalk through doors to enter buildings.');
  };

  // CONTROL ROOM — walled architecture with glass video screen inside
  // Walk through the door to see the video playing on the back wall
  Solidivism.createControlRoom(
    -25, 30,
    'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
    'CONTROL'
  );
};
</script>
</body>
</html>


===== FILE: public/solidivism/index.html =====
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<title>EPISTLES — Tactical City</title>
<style>
  html, body { margin:0; padding:0; overflow:hidden; background:#05070a; height:100%;
    font-family: Georgia, 'Times New Roman', serif; -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color: transparent; }
  #view { position:fixed; inset:0; display:block; touch-action:none; }
  .hud { position:fixed; z-index:5; color:#e9e2cf; pointer-events:none; }
  #title { top:calc(10px + env(safe-area-inset-top)); left:12px; font-size:13px; letter-spacing:3px; color:#f0d98c; }
  #title small { display:block; letter-spacing:1px; font-size:10px; color:#9fb2c8; margin-top:2px; }
  #compass { top:calc(10px + env(safe-area-inset-top)); right:12px; width:74px; height:74px; }
  #stats { left:12px; bottom:calc(10px + env(safe-area-inset-bottom)); font-size:10px; letter-spacing:1px; color:#8fa3ba; line-height:1.7; }
  #label { left:50%; top:16%; transform:translateX(-50%); text-align:center; opacity:0; transition:opacity .15s; }
  #label .name { font-size:19px; letter-spacing:2px; color:#ffe9a8; text-shadow:0 2px 10px #000; }
  #label .path { font-size:11px; letter-spacing:1px; color:#bcd2ea; text-shadow:0 1px 6px #000; }
  #prompt { left:50%; bottom:19%; transform:translateX(-50%); text-align:center; opacity:0; transition:opacity .15s; }
  #prompt button { pointer-events:auto; background:rgba(10,8,4,.85); border:1px solid #d8a833; color:#ffe9a8;
    font:14px Georgia,serif; letter-spacing:2px; padding:11px 20px; border-radius:12px; cursor:pointer; }
  #whereami { right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); text-align:right; font-size:11px; letter-spacing:1px; color:#bcd2ea; }
  #legend { right:12px; top:96px; font-size:10px; letter-spacing:1px; line-height:1.9; text-align:right; color:#cfe0f2; }
  #legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-left:7px; vertical-align:middle; }
  #fade { position:fixed; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity .45s; z-index:8; }
  #toast { left:50%; bottom:calc(26px + env(safe-area-inset-bottom)); transform:translateX(-50%);
    font-size:12px; letter-spacing:1px; color:#ffe9a8; opacity:0; transition:opacity .3s; text-align:center; }
  #loading { position:fixed; inset:0; z-index:9; display:flex; align-items:center; justify-content:center;
    background:#05070a; color:#f0d98c; letter-spacing:3px; font-size:15px; text-align:center; padding:20px; }
</style>
</head>
<body>
<canvas id="view"></canvas>

<div class="hud" id="title">EPISTLES — TACTICAL CITY<small>every page a building · walk up to a door</small></div>
<canvas class="hud" id="compass" width="148" height="148"></canvas>
<div class="hud" id="legend"></div>
<div class="hud" id="label"><div class="name"></div><div class="path"></div></div>
<div class="hud" id="prompt"><button id="enterBtn">ENTER ▸</button></div>
<div class="hud" id="stats"></div>
<div class="hud" id="whereami"></div>
<div class="hud" id="toast"></div>
<div id="fade"></div>
<div id="loading">RAISING THE CITY…</div>

<script>
  /* Boot watch: if the module chain has not raised the city in
   * 14 seconds, say so on the loading screen instead of silence. */
  setTimeout(function () {
    if (!window.__cityUp) {
      var el = document.getElementById('loading');
      if (el) el.textContent = 'The city is taking too long to rise. Check the connection, then reload.';
    }
  }, 14000);
</script>
<script type="importmap">
{ "imports": { "three": "./lib/three.module.js",
               "three/addons/":