Draw the board as track, split the site into three pages, and fix curve geometry

Adds SVG board rendering shared by the game and the replay, a splash page with a
shareable replay directory, hover tooltips for reference detail, and makes curves
two-port arcs so sidings and run-arounds can finally be built.

src/sim/replay.ts

@@ -36,6 +36,7 @@ export { cardName, describeIntent, snapshot } from './view.ts';
 import type { Frame } from './view.ts';
 import type { Decision } from './view.ts';
 import { cardName, describeDecision, snapshot, trainName } from './view.ts';
+import { BOARD_CSS, divisionSvg, ghostSvg, officeSvg } from './board-svg.ts';
 
 // ---------------------------------------------------------------------------
 // Frame shape — only what the viewer draws
@@ -169,6 +170,8 @@ export function renderHtml(rec: Recording): string {
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Station Master — replay seed ${rec.seed}</title>
 <style>
+${BOARD_CSS}
+
 :root{--bg:#14161a;--fg:#e8e6e3;--dim:#8b9199;--line:#2c3138;--panel:#1b1f25;
 --good:#5fd08a;--bad:#ff7a70;--clock:#7fb8ff;--warn:#ffc46b;--green:#2f6b47;--red:#6b3230;--maw:#2a4a6b}
 *{box-sizing:border-box}
@@ -313,6 +316,12 @@ kbd{background:#2a3038;border:1px solid var(--line);border-radius:3px;padding:0
 </footer>
 
 <script>
+/* The board renderers, shared with the playable app. Embedded as SOURCE because this page has an
+   inline script and cannot import a module — a second copy would eventually draw a different board
+   from the same state, which is the one failure a track diagram exists to prevent. */
+const divisionSvg = ${divisionSvg.toString()};
+const officeSvg = ${officeSvg.toString()};
+
 const FRAMES = ${JSON.stringify(compress(rec.frames))};
 /* The board changes rarely, so cells/facilities/division are emitted as null when identical to the
    previous frame and resolved by walking back. Re-serialising the full grid every frame was 63% of
@@ -369,43 +378,17 @@ function render() {
 
   const CELLS = carry(i, 'cells'), FACS = carry(i, 'facilities'), DIV = carry(i, 'division');
 
-  $('division').innerHTML = DIV.map((n) =>
-    '<div class="node ' + (n.kind === 'office' ? 'office' : '') + '"><div class="nm">' + esc(n.label) +
-      (n.gradeUp ? ' <span class="grade">' + (n.gradeUp === 'east' ? 'climbs E ▲' : '▲ W climbs') + '</span>' : '') +
-    '</div>' +
-    (n.modifiers.length ? '<div class="mlmods">' + n.modifiers.map(esc).join(' · ') + '</div>' : '') +
-    '<div class="regions">' + n.trains.map((r) =>
-      '<div class="region">' + r.map((t) =>
-        '<span class="chip">' + esc(t.label) + '</span>' +
-        '<div class="consist">' + (t.consist.length ? esc(t.consist.join(', ')) : 'empty') + '</div>'
-      ).join('') + '</div>').join('') +
-    '</div></div>').join('');
-
-  const rows = CELLS.map((c) => c.row), cols = CELLS.map((c) => c.col);
-  const r0 = Math.min(...rows), r1 = Math.max(...rows), c0 = Math.min(...cols), c1 = Math.max(...cols);
-  const g = $('grid');
-  g.style.gridTemplateColumns = 'repeat(' + (c1 - c0 + 1) + ', minmax(110px, 1fr))';
-  let cellsHtml = '';
-  for (let r = r1; r >= r0; r--) {
-    for (let c = c0; c <= c1; c++) {
-      const cell = CELLS.find((x) => x.row === r && x.col === c);
-      if (!cell) { cellsHtml += '<div></div>'; continue; }
-      const hl = f.where && f.where.row === r && f.where.col === c;
-      const wasHere = f.whereFrom && f.whereFrom.row === r && f.whereFrom.col === c;
-      cellsHtml += '<div class="cell ' + (cell.running ? 'run ' : '') + (cell.kind === 'office' ? 'office ' : '') +
-        (cell.kind === 'modifier' ? 'modifier ' : '') + (hl ? 'hl ' : '') + (wasHere ? 'from' : '') + '">' +
-        '<div class="nm">' + esc(cell.label) + '</div>' +
-        '<div class="dim" style="font-size:10px">(' + r + ',' + c + ')</div>' +
-        (cell.enhancements.length
-          ? '<div class="enh">' + cell.enhancements.map(esc).join(' · ') + '</div>'
-          : '') +
-        (cell.tray ? '<div class="crew">🚂 ' + esc(cell.tray) + '</div>' : '') +
-        (cell.facility ? miniFacility(cell.facility) : '') +
-        (cell.cars.length ? '<div class="cars">siding: ' + cell.cars.map(esc).join('<br>') + '</div>' : '') +
-        '</div>';
-    }
+  $('division').innerHTML = divisionSvg(DIV);
+  // The same office renderer the playable app uses, so replay and game draw one board.
+  $('grid').innerHTML = officeSvg(CELLS, f.runningRow);
+  if (f.where) {
+    const hit = $('grid').querySelector('g[data-cell="' + f.where.row + ',' + f.where.col + '"]');
+    if (hit) hit.classList.add('bs-focus');
+  }
+  if (f.whereFrom) {
+    const was = $('grid').querySelector('g[data-cell="' + f.whereFrom.row + ',' + f.whereFrom.col + '"]');
+    if (was) was.classList.add('bs-from');
   }
-  g.innerHTML = cellsHtml;
 
   $('facs').innerHTML = FACS.length === 0
     ? '<span class="dim">no freight facilities built yet</span>'