sindicate 0.4.0 → 0.6.0

package/src/ui/worldmap.js

@@ -0,0 +1,837 @@
+// THE MAP (M) — a rider's chart of Dustwater County, on the table.
+//
+// THE STRUCTURE IS THE POINT. Three layers, and they are separate on purpose:
+//   #wm-pan     the CHART (cartograph.js), a bitmap of the ground. It is the ONLY thing the
+//               pan/zoom transform touches, and it is drawn exactly once.
+//   #wm-overlay the MARKERS, a canvas that sits OVER the transform, in SCREEN space. Icons,
+//               labels, the route, the player and the waypoint are all drawn here at fixed pixel
+//               sizes — so they stay the same readable size while the county grows underneath
+//               them. This is what the old map got wrong: it scaled everything together, so at
+//               county zoom the labels were unreadable and at street zoom they were billboards.
+//   the DOM     only the things that must accept a pointer: the legend, the hover card, the
+//               zoom buttons.
+//
+// Ported from the fable build's worldmap, which had this shape right; the content is ours.
+//
+// PAUSE. main.js reads ui.mapOpen and stops the world — you are standing in the street with a
+// paper map open, and the coaches, the law and the outlaws can all wait. It also means the map is
+// not a thing you have to read while being shot at.
+import { WORLD_SIZE, allPOIs, allBuildings } from './cartograph.js';
+import { getQualityName, setQualityName, PRESETS } from '../core/quality.js';
+
+const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
+// THE CHART BITMAP STAYS AT 1600, AND THAT IS A DELIBERATE REFUSAL.
+// renderChart is O(px²) and INDEPENDENT of WORLD_SIZE (cartograph.js samples a fixed grid), so raising
+// it buys resolution for pure cost — and the cost lands in the worst possible place: ui.js builds the
+// chart LAZILY, on the first map open, as ~1.6 s of blocking heightAt on the main thread. Going to
+// 2048 would make an existing stall 60% worse to fix a legibility problem that ZOOM_MAX fixes for free.
+const CHART_PX = 1600;          // 2.70 m/px across a 4320 m county (was 1.35 across 2160)
+// ...so the ZOOM goes up instead. At ×2 the county is twice as wide on the paper, so 8× would show
+// 540 m across the frame and you could no longer pick out a building. 16× puts it back to ~270 m —
+// the same view of the same ground, and it costs nothing but a bigger number.
+const ZOOM_MAX = 16;            // 16× ⇒ ~270 m across the frame: close enough to pick a building
+
+// ————— the map's own hand: Synty's white map silhouettes, inked onto the paper —————
+// Provenance: /assets/ui/map/*.png are extracted from Synty's INTERFACE_Apocalypse_HUD pack
+// (dusty and plain — the Military set's chrome and the Fantasy set's gold filigree both read
+// wrong on a western), except horse.png, which is the Fantasy pack's — no other pack ships a
+// horse, and a horse is what a stage stop is.
+const ICON = (n) => `/assets/ui/map/${n}.png`;
+const _imgs = new Map();
+function iconImg(name, onReady) {
+  let img = _imgs.get(name);
+  if (!img) { img = new Image(); img.src = ICON(name); _imgs.set(name, img); img.onload = () => onReady?.(); }
+  return img.complete && img.naturalWidth ? img : null;
+}
+// The sprites are WHITE silhouettes with alpha, which is invisible on parchment. Ink them: draw
+// the shape, then flood it through `source-in`. Cached per name+colour+resolution — a hover
+// repaint must not re-rasterise ten icons.
+const _inked = new Map();
+function inkIcon(name, col, px, onReady) {
+  const img = iconImg(name, onReady);
+  if (!img) return null;
+  const R = Math.ceil(px * Math.min(devicePixelRatio || 1, 2));
+  const key = `${name}|${col}|${R}`;
+  let cv = _inked.get(key);
+  if (!cv) {
+    cv = document.createElement('canvas');
+    cv.width = cv.height = R;
+    const c = cv.getContext('2d');
+    c.drawImage(img, 0, 0, R, R);
+    c.globalCompositeOperation = 'source-in';
+    c.fillStyle = col;
+    c.fillRect(0, 0, R, R);
+    _inked.set(key, cv);
+  }
+  return cv;
+}
+
+// Ink by category — the one colour cue on an otherwise monochrome sheet. Outposts are the places
+// with people in them who care who you are, and they are red.
+const INK = { Settlement: '#3a2a16', Outpost: '#7d3123', Stage: '#3c5860', Camp: '#b5642a', Shop: '#4a6b2e' };
+const KIND_LABEL = {
+  town: 'Town', fort: 'Army fort', mission: 'Mission', camp: 'Camp', mine: 'Diggings',
+  stop: 'Stage stop', ranch: 'Ranch', farm: 'Farm', outpost: 'Outpost', shop: 'Shop',
+};
+
+export class WorldMap {
+  // `getChart` hands back the prebuilt chart bitmap (ui.prebuildChart) — the map never renders
+  // the ground itself, because that costs the best part of a second and belongs on the loading
+  // screen, not on the first press of M.
+  constructor(game, getChart) {
+    this.game = game;
+    this.getChart = getChart;
+    this.visible = false;
+    this.built = false;
+    this.zoom = 1; this.panX = 0; this.panY = 0;
+    this.filters = new Set();      // empty = show everything
+    this._hit = [];
+    this._buildDOM();
+  }
+
+  _buildDOM() {
+    const root = document.createElement('div');
+    root.id = 'worldmap';
+    root.style.cssText = `position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
+      flex-direction:column; gap:10px; background:radial-gradient(circle at 50% 42%, rgba(24,17,10,0.86), rgba(8,6,4,0.96));
+      font-family:Copperplate,'Copperplate Gothic Bold',Palatino,'Book Antiqua',Georgia,serif; pointer-events:auto; user-select:none;`;
+    root.innerHTML = `
+      <div style="color:#e8c98a; font-size:21px; letter-spacing:7px; text-shadow:0 2px 6px #000; font-weight:700;">DUSTWATER COUNTY</div>
+      <div id="wm-tabs" style="display:flex; gap:0; border-bottom:1px solid rgba(122,99,54,0.4);">
+        <button data-tab="map" style="${TAB}">MAP</button>
+        <button data-tab="journal" style="${TAB}">JOURNAL</button>
+        <button data-tab="system" style="${TAB}">SYSTEM</button>
+      </div>
+      <div id="wm-mapview" style="display:flex; flex-direction:column; align-items:center; gap:10px;">
+        <div id="wm-legend" style="display:flex; gap:6px;">
+          <button data-cat="" style="${LBTN}">All</button>
+          <button data-cat="Settlement" style="${LBTN}">Settlements</button>
+          <button data-cat="Outpost" style="${LBTN}">Outposts</button>
+          <button data-cat="Stage" style="${LBTN}">Stage line</button>
+          <button data-cat="Camp" style="${LBTN}">Campfires</button>
+          <button data-cat="Shop" style="${LBTN}">Shops</button>
+        </div>
+        <div id="wm-frame" style="position:relative; width:min(74vh,74vw); height:min(74vh,74vw); overflow:hidden;
+          border:3px solid #6d5730; border-radius:4px; box-shadow:0 0 44px rgba(0,0,0,0.85), inset 0 0 70px rgba(0,0,0,0.45);
+          background:#1a1611; cursor:grab;">
+          <div id="wm-pan" style="position:absolute; inset:0; transform-origin:0 0;">
+            <canvas id="wm-canvas" style="position:absolute; inset:0; width:100%; height:100%;"></canvas>
+          </div>
+          <canvas id="wm-overlay" style="position:absolute; inset:0; width:100%; height:100%; pointer-events:none;"></canvas>
+          <div id="wm-target" style="position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:30px;
+            pointer-events:none; display:none; z-index:6; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.9));">
+            <div style="position:absolute; left:50%; top:0; width:2px; height:100%; margin-left:-1px; background:#e8c98a;"></div>
+            <div style="position:absolute; top:50%; left:0; height:2px; width:100%; margin-top:-1px; background:#e8c98a;"></div>
+            <div style="position:absolute; inset:7px; border:2px solid #e8c98a; border-radius:50%;"></div>
+          </div>
+          <div style="position:absolute; top:7px; right:11px; color:#efe0bb; font:600 13px/1 Georgia,serif; opacity:0.75; pointer-events:none;
+            text-shadow:0 1px 3px #000;">N &uarr;</div>
+          <div id="wm-ctrls" style="position:absolute; bottom:9px; right:9px; display:flex; gap:6px;">
+            <button data-z="0.72" style="${BTN}">&minus;</button>
+            <button data-z="1.4" style="${BTN}">+</button>
+            <button data-reset style="${BTN} width:auto; padding:0 10px; font-size:12px;">Reset</button>
+          </div>
+        </div>
+        <div style="color:#c0ad82; font-size:12.5px; letter-spacing:0.5px; opacity:0.85;">
+          wheel zooms &middot; drag pans &middot; click sets your waypoint &middot; right-click clears it &middot; [M] closes</div>
+      </div>
+      <div id="wm-journal" style="display:none; width:min(74vh,74vw); height:min(70vh,70vw); overflow-y:auto;
+        border:3px solid #6d5730; border-radius:4px; background:rgba(20,15,9,0.55); box-shadow:0 0 44px rgba(0,0,0,0.85);
+        padding:24px 30px; color:#e6d6ad; text-align:left;"></div>
+      <div id="wm-system" style="display:none; width:min(74vh,74vw); height:min(70vh,70vw);
+        border:3px solid #6d5730; border-radius:4px; background:rgba(20,15,9,0.55); box-shadow:0 0 44px rgba(0,0,0,0.85);
+        padding:30px 34px; color:#e6d6ad; text-align:left; display:none; flex-direction:column; gap:22px;"></div>`;
+    document.body.appendChild(root);
+
+    this.root = root;
+    this.frame = root.querySelector('#wm-frame');
+    this.pan = root.querySelector('#wm-pan');
+    this.canvas = root.querySelector('#wm-canvas');
+    this.canvas.width = this.canvas.height = CHART_PX;
+    this.overlay = root.querySelector('#wm-overlay');
+
+    // the hover card — name, what the place is, and how far you have to ride
+    this.card = document.createElement('div');
+    this.card.style.cssText = `position:absolute; display:none; pointer-events:none; z-index:5; padding:5px 9px;
+      background:rgba(28,21,12,0.94); border:1px solid #7a6336; border-radius:4px; color:#ecdfbe;
+      font:12px Georgia,serif; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,0.7);`;
+    this.frame.appendChild(this.card);
+
+    this.legend = root.querySelector('#wm-legend');
+    this.legend.querySelectorAll('button').forEach((b) => b.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const cat = b.dataset.cat;
+      if (!cat) this.filters.clear();
+      else if (this.filters.has(cat)) this.filters.delete(cat);
+      else this.filters.add(cat);
+      this._syncLegend();
+      this._draw();
+    }));
+    this._syncLegend();
+
+    // HUB TABS — MAP · JOURNAL (SYSTEM lands in Phase 3). The map is the pause screen already.
+    this.mapview = root.querySelector('#wm-mapview');
+    this.journal = root.querySelector('#wm-journal');
+    this.system = root.querySelector('#wm-system');
+    this.target = root.querySelector('#wm-target');   // the pad's centre reticle (where Square drops the pin)
+    this.tab = 'map';
+    root.querySelectorAll('#wm-tabs button').forEach((b) =>
+      b.addEventListener('click', (e) => { e.stopPropagation(); this._showTab(b.dataset.tab); }));
+
+    this._wireEvents();
+  }
+
+  _showTab(tab) {
+    this.tab = tab;
+    this.mapview.style.display = tab === 'map' ? 'flex' : 'none';
+    this.journal.style.display = tab === 'journal' ? 'block' : 'none';
+    this.system.style.display = tab === 'system' ? 'flex' : 'none';
+    if (this.target && tab !== 'map') this.target.style.display = 'none';   // reticle is chart-only (pad shows it)
+    this.root.querySelectorAll('#wm-tabs button').forEach((b) => {
+      const on = b.dataset.tab === tab;
+      b.style.color = on ? '#e8c98a' : '#9a855a';
+      b.style.borderBottomColor = on ? '#e8c98a' : 'transparent';
+    });
+    if (tab === 'journal') this._renderJournal();
+    if (tab === 'system') this._renderSystem();
+  }
+
+  // SYSTEM tab — the map is the game's hub. A vertical list of ITEMS: up/down moves between them,
+  // Cross fires Save/Load/Quit, and LEFT/RIGHT changes the value on a setting row (Graphics).
+  _renderSystem() {
+    const m = this.game.missions, el = this.system;
+    const ROW = `display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border:1px solid #6d5730;
+      border-radius:4px; background:linear-gradient(180deg,#3f2d14,#281b0c); color:#e8c98a; font-family:inherit; font-size:16px;
+      letter-spacing:2px; cursor:pointer; pointer-events:auto; transition:filter .12s;`;
+    el.innerHTML = `
+      <div style="color:#e8c98a; font-size:13px; letter-spacing:3px; font-weight:700; opacity:0.85;">SYSTEM</div>
+      <div id="wm-r-save" style="${ROW}">Save Game</div>
+      <div id="wm-r-load" style="${ROW}${m?.hasSave?.() ? '' : ' opacity:0.4;'}">Load Game</div>
+      <div id="wm-r-gfx" style="${ROW}"><span>Graphics</span><span>&#8249;&nbsp; <span id="wm-gfxval" style="color:#f4e6bf; display:inline-block; min-width:74px; text-align:center;"></span> &nbsp;&#8250;</span></div>
+      <div style="flex:1;"></div>
+      <div id="wm-r-quit" style="${ROW} border-color:#7a3f2c; color:#dfb090;">Quit to Title</div>`;
+    const gfxVal = el.querySelector('#wm-gfxval');
+    const setGfx = () => { gfxVal.textContent = PRESETS[getQualityName()].label; };
+    const cycleGfx = (dir) => { const o = ['low', 'medium', 'high']; setQualityName(o[(o.indexOf(getQualityName()) + dir + 3) % 3]); setGfx(); };
+    setGfx();
+    this._sysRows = [
+      { el: el.querySelector('#wm-r-save'), act: () => m?.saveGame?.() },
+      { el: el.querySelector('#wm-r-load'), act: () => { if (m?.hasSave?.() && m.loadGame()) this.toggle(); } },
+      { el: el.querySelector('#wm-r-gfx'), cycle: cycleGfx },
+      { el: el.querySelector('#wm-r-quit'), act: () => location.reload() },
+    ];
+    // mouse still works: click a row to fire it (the Graphics row cycles forward)
+    for (const r of this._sysRows) r.el.onclick = (e) => { e.stopPropagation(); (r.act || (() => r.cycle(1)))(); };
+    this._padSel = 0; this._paintSysSel();
+  }
+
+  // ── GAMEPAD in the hub. The game's own pad mapping is suppressed while a panel is up (input.js),
+  // so the map drives itself: L1/R1 swap tabs, D-pad/stick navigates the current tab, Cross confirms,
+  // Circle (or the map button) closes.
+  _cycleTab(dir) {
+    const tabs = ['map', 'journal', 'system'];
+    this._showTab(tabs[(tabs.indexOf(this.tab) + dir + tabs.length) % tabs.length]);
+  }
+  _paintSysSel() {
+    (this._sysRows || []).forEach((r, i) => { r.el.style.outline = i === this._padSel ? '2px solid #e8c98a' : 'none'; r.el.style.outlineOffset = '2px'; });
+  }
+  _startPadNav() {
+    cancelAnimationFrame(this._padRAF);
+    const prev = {}; let first = true;   // first frame ADOPTS held buttons — the press that opened the map must not act
+    const poll = () => {
+      if (!this.visible) return;
+      const pads = navigator.getGamepads ? navigator.getGamepads() : null;
+      let gp = null; if (pads) for (const p of pads) if (p && p.connected) { gp = p; break; }
+      if (gp) {
+        const b = (i) => !!(gp.buttons[i]?.pressed);
+        const lx = gp.axes[0] || 0, ly = gp.axes[1] || 0;
+        const st = { l1: b(4), r1: b(5), up: b(12) || ly < -0.55, down: b(13) || ly > 0.55, left: b(14) || lx < -0.55, right: b(15) || lx > 0.55, a: b(0), sq: b(2), tri: b(3), back: b(1), pad: b(16) || b(17) };
+        const edge = (n) => st[n] && !prev[n];
+        if (this.target) this.target.style.display = this.tab === 'map' ? 'block' : 'none';   // reticle only on the chart, only with a pad
+        if (!first) {
+          if (edge('l1')) this._cycleTab(-1);
+          if (edge('r1')) this._cycleTab(1);
+          if (this.tab === 'map') {                     // left stick pans the chart under the reticle
+            const s = 15; let moved = false;
+            if (b(12) || ly < -0.4) { this.panY += s; moved = true; }
+            if (b(13) || ly > 0.4) { this.panY -= s; moved = true; }
+            if (b(14) || lx < -0.4) { this.panX += s; moved = true; }
+            if (b(15) || lx > 0.4) { this.panX -= s; moved = true; }
+            if (moved) { this._clampPan(); this._apply(); }
+            const c = this._disp() / 2;                 // the reticle sits at the view centre
+            if (edge('a')) this._zoomAt(c, c, 1.4);      // Cross zooms IN about the reticle
+            if (edge('tri')) this._zoomAt(c, c, 1 / 1.4); // Triangle zooms out
+            if (edge('sq')) this._clickAt(c, c);         // Square drops the waypoint at the reticle
+          } else if (this.tab === 'system') {           // up/down moves rows · left/right changes a value · Cross fires
+            const rows = this._sysRows || [];
+            if (rows.length) {
+              if (edge('up')) { this._padSel = (this._padSel + rows.length - 1) % rows.length; this._paintSysSel(); }
+              if (edge('down')) { this._padSel = (this._padSel + 1) % rows.length; this._paintSysSel(); }
+              const r = rows[this._padSel];
+              if (edge('left') && r?.cycle) r.cycle(-1);
+              if (edge('right') && r?.cycle) r.cycle(1);
+              if (edge('a') && r?.act) r.act();
+            }
+          } else if (this.tab === 'journal') {          // scroll (held)
+            if (b(12) || ly < -0.4) this.journal.scrollTop -= 16;
+            if (b(13) || ly > 0.4) this.journal.scrollTop += 16;
+          }
+          if (edge('back') || edge('pad')) { this.toggle(); return; }
+        }
+        Object.assign(prev, st); first = false;
+      }
+      this._padRAF = requestAnimationFrame(poll);
+    };
+    this._padRAF = requestAnimationFrame(poll);
+  }
+
+  // The journal reads straight from the mission engine (definitions + progress). Active job with its
+  // current objective highlighted (and n/N on kill/collect), then the finished ones.
+  _renderJournal() {
+    const m = this.game.missions;
+    const esc = (s) => String(s ?? '').replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
+    if (!m) { this.journal.innerHTML = `<div style="opacity:0.7;">No journal yet.</div>`; return; }
+    const name = (id) => esc(m.npcs?.[id]?.name || id);
+    const prog = m.progress;
+    const active = m.defs.find((d) => d.id === prog.active);
+    const completed = m.defs.filter((d) => prog.missions[d.id]?.done);
+    const H = (s) => `<div style="color:#e8c98a; font-size:13px; letter-spacing:3px; font-weight:700; margin:6px 0 12px; opacity:0.85;">${s}</div>`;
+    let html = '';
+    if (active) {
+      const rec = prog.missions[active.id] || { stage: 0, counters: {} };
+      html += H('CURRENT JOB');
+      html += `<div style="margin-bottom:20px;">
+        <div style="color:#f4e6bf; font-size:23px; letter-spacing:2px; margin-bottom:4px;">${esc(active.title)}</div>
+        <div style="color:#b9a678; font-size:13px; margin-bottom:11px;">Given by ${name(active.giver)}</div>
+        <div style="color:#d8c79c; font-style:italic; font-size:14px; line-height:1.55; margin-bottom:16px;">${esc(active.summary)}</div>
+        <div style="display:flex; flex-direction:column; gap:9px;">`;
+      // The checklist stops at the CURRENT beat — a journal that prints the mission's whole future
+      // is a spoiler, and with branching it printed the OTHER fork's stages too. Behind you: only
+      // the stages your path actually walked (skipIf/onlyIf-mismatched ones never happened —
+      // m._condOk); ahead of you: a single quiet ellipsis.
+      active.stages.forEach((s, i) => {
+        const done = i < rec.stage, cur = i === rec.stage;
+        if (!done && !cur) return;
+        if (done && m._condOk && !m._condOk(s)) return;   // the fork not taken
+        let label = esc(s.desc || s.id);
+        if ((s.type === 'kill' || s.type === 'collect') && s.count) {
+          const c = done ? s.count : (rec.counters[s.id] || 0);
+          label += ` <span style="opacity:0.7;">(${c}/${s.count})</span>`;
+        }
+        const mark = done ? '&#10003;' : '&#9656;';
+        const col = done ? '#83a06c' : '#f4e6bf';
+        html += `<div style="color:${col}; font-size:15.5px; font-weight:${cur ? '700' : '400'}; ${done ? 'opacity:0.7;' : ''}">
+          <span style="display:inline-block; width:22px;">${mark}</span>${label}</div>`;
+      });
+      if (rec.stage < active.stages.length - 1) html += `<div style="color:#8a7c5c; font-size:15px;"><span style="display:inline-block; width:22px;">&#8226;</span>&#8230;</div>`;
+      html += `</div></div>`;
+      // THE STANDING — how the county reads you (missions.stat): Bracken's trust in his deputy and
+      // the town's regard, once the star's been taken. Signed, so a debt reads as one.
+      if (prog.flags?.badge) {
+        const sgn = (n) => (n > 0 ? '+' : '') + n;
+        const trust = m.stat?.('trust') ?? 0, rep = m.stat?.('reputation') ?? 0;
+        html += `<div style="color:#b9a678; font-size:13.5px; margin:-6px 0 18px; letter-spacing:0.5px;">
+          Bracken's trust <b style="color:${trust < 0 ? '#c98a6a' : '#d8c79c'}">${sgn(trust)}</b>
+          &nbsp;&middot;&nbsp; the town's regard <b style="color:${rep < 0 ? '#c98a6a' : '#d8c79c'}">${sgn(rep)}</b></div>`;
+      }
+    } else {
+      html += `<div style="color:#b9a678; font-style:italic; font-size:15px; margin:8px 0 20px;">No job in hand. Ask around town — someone always needs a gun.</div>`;
+    }
+    if (completed.length) {
+      html += H('DONE');
+      for (const d of completed) html += `<div style="display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid rgba(122,99,54,0.25); color:#a99a72; font-size:14.5px;">
+        <span>${esc(d.title)}</span>${d.reward?.money ? `<span style="color:#83a06c;">$${d.reward.money}</span>` : ''}</div>`;
+    }
+    this.journal.innerHTML = html;
+  }
+
+  _wireEvents() {
+    const f = this.frame;
+    f.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      this._zoomOnPlayer(e.deltaY < 0 ? 1.22 : 1 / 1.22);   // zoom about YOU, not the cursor (Nick)
+    }, { passive: false });
+    f.addEventListener('contextmenu', (e) => { e.preventDefault(); this._setWaypoint(null); });
+
+    let down = null;
+    f.addEventListener('mousedown', (e) => {
+      if (e.button !== 0) return;
+      const [sx, sy] = this._local(e);
+      down = { sx, sy, panX: this.panX, panY: this.panY, moved: 0 };
+      f.style.cursor = 'grabbing';
+    });
+    // on WINDOW, not the frame: a drag that leaves the frame must keep panning, and must still
+    // end when the button comes up out over the black
+    addEventListener('mousemove', (e) => {
+      if (!this.visible) return;
+      const [sx, sy] = this._local(e);
+      if (down) {
+        down.moved += Math.abs(sx - down.sx) + Math.abs(sy - down.sy);
+        this.panX = down.panX + (sx - down.sx);
+        this.panY = down.panY + (sy - down.sy);
+        this._clampPan();
+        this._hover = null;
+        this.card.style.display = 'none';
+        // _apply(), NOT _draw(). _draw() only repaints the MARKER OVERLAY; the chart is moved by the
+        // CSS transform on #wm-pan, which only _apply() writes. Calling the wrong one meant the
+        // labels slid about over a chart that never moved — the county standing still while its
+        // towns walked across it.
+        this._apply();
+        return;
+      }
+      const d = this._disp();
+      if (sx < 0 || sy < 0 || sx > d || sy > d) { this._setHover(null); return; }
+      this._setHover(this._hitAt(sx, sy), sx, sy);
+    });
+    addEventListener('mouseup', (e) => {
+      if (!down) return;
+      f.style.cursor = 'grab';
+      // a CLICK, not a drag, sets the waypoint. 5px of slop, because a hand on a mouse always
+      // moves a little and a map that refuses your click because you twitched is infuriating.
+      if (down.moved < 5) {
+        const [sx, sy] = this._local(e);
+        const d = this._disp();
+        if (sx >= 0 && sy >= 0 && sx <= d && sy <= d) this._clickAt(sx, sy);
+      }
+      down = null;
+    });
+
+    this.root.querySelectorAll('#wm-ctrls button').forEach((b) => {
+      b.addEventListener('mousedown', (e) => e.stopPropagation());   // the buttons are not a pan
+      b.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (b.dataset.reset !== undefined) { this.zoom = 1; this.panX = this.panY = 0; this._apply(); }
+        else this._zoomOnPlayer(+b.dataset.z);
+      });
+    });
+  }
+
+  // ————————————————————— frame geometry —————————————————————
+  _disp() { return this.frame.clientWidth; }
+  _local(e) { const r = this.frame.getBoundingClientRect(); return [e.clientX - r.left, e.clientY - r.top]; }
+  // the chart may never come away from the frame's edge — a map you can drag off into the corner
+  // is a map you then have to hunt for
+  _clampPan() {
+    const lim = (1 - this.zoom) * this._disp();
+    this.panX = clamp(this.panX, lim, 0);
+    this.panY = clamp(this.panY, lim, 0);
+  }
+  _apply() {
+    this.pan.style.transform = `translate(${this.panX}px,${this.panY}px) scale(${this.zoom})`;
+    this._draw();
+  }
+  // ZOOM ABOUT THE CURSOR, not the centre: the ground under the pointer stays under the pointer.
+  // Centre-anchored zoom (what the old map did) means every zoom is followed by a corrective drag.
+  _zoomAt(sx, sy, factor) {
+    const z2 = clamp(this.zoom * factor, 1, ZOOM_MAX);
+    this.panX = sx - (sx - this.panX) * (z2 / this.zoom);
+    this.panY = sy - (sy - this.panY) * (z2 / this.zoom);
+    this.zoom = z2;
+    this._clampPan();
+    this._apply();
+  }
+  // Zoom keeping YOU under the crosshair — the map is a rider's chart of where he is, so the wheel
+  // (and the +/- buttons) close in on the player, not on wherever the cursor happens to sit.
+  _zoomOnPlayer(factor) {
+    const p = this.game.player?.position;
+    const [sx, sy] = p ? this._w2s(p.x, p.z) : [this._disp() / 2, this._disp() / 2];
+    this._zoomAt(sx, sy, factor);
+  }
+  // world metres → screen px inside the frame (pan + zoom applied). The markers are drawn through
+  // THIS and nothing else, which is why they never scale.
+  _w2s(x, z) {
+    const d = this._disp();
+    return [(x / WORLD_SIZE + 0.5) * d * this.zoom + this.panX, (z / WORLD_SIZE + 0.5) * d * this.zoom + this.panY];
+  }
+  _s2w(sx, sy) {
+    const d = this._disp();
+    return [((sx - this.panX) / this.zoom / d - 0.5) * WORLD_SIZE, ((sy - this.panY) / this.zoom / d - 0.5) * WORLD_SIZE];
+  }
+
+  // ————————————————————— the waypoint —————————————————————
+  // THE CONTRACT: game.waypoint = {x,z} | null. The compass and the minimap already read it, and
+  // they must keep reading it — the map is where you SAY where you are going; the HUD is what gets
+  // you there once the map is shut.
+  _setWaypoint(w) {
+    this.game.waypoint = w;
+    // Re-plan the road route NOW, before we repaint: the world is paused behind the map, so ui.js's
+    // movement-gated re-plan would not fire, and the route would lag a click behind the pin.
+    this.game.ui?.recomputeRoute?.();
+    this._draw();
+  }
+  // CLICK-SNAP: a click on (or near) a marker means the PLACE, not the pixel you happened to hit.
+  // Without it, "waypoint the fort" puts you 30 m into the scrub beside the fort.
+  _clickAt(sx, sy) {
+    const hit = this._hitAt(sx, sy, 10);
+    if (hit) { this._setWaypoint({ x: hit.p.x, z: hit.p.z, name: hit.p.name }); return; }
+    const [x, z] = this._s2w(sx, sy);
+    this._setWaypoint({ x, z });
+  }
+  _hitAt(sx, sy, slop = 6) {
+    let best = null, bd = Infinity;
+    for (const h of this._hit) {
+      const d = Math.hypot(sx - h.X, sy - h.Y);
+      if (d < h.r + slop && d < bd) { bd = d; best = h; }
+    }
+    return best;
+  }
+  _setHover(h, sx, sy) {
+    if (h !== this._hover) {
+      this._hover = h;
+      this.frame.style.cursor = h ? 'pointer' : 'grab';
+      this._draw();
+    }
+    if (!h) { this.card.style.display = 'none'; return; }
+    const pl = this.game.player?.position;
+    const dist = pl ? `${Math.round(Math.hypot(h.p.x - pl.x, h.p.z - pl.z))} m` : '';
+    this.card.innerHTML = `<b style="color:#f0d89e;">${h.p.name}</b><br>` +
+      `<span style="opacity:0.8;">${KIND_LABEL[h.p.kind] ?? h.p.kind}${dist ? ' &middot; ' + dist : ''}</span>`;
+    this.card.style.display = '';
+    const d = this._disp();
+    this.card.style.left = `${Math.min(sx + 14, d - 160)}px`;
+    this.card.style.top = `${Math.max(6, sy - 42)}px`;
+  }
+
+  _syncLegend() {
+    this.legend.querySelectorAll('button').forEach((b) => {
+      const on = b.dataset.cat ? this.filters.has(b.dataset.cat) : !this.filters.size;
+      b.style.borderColor = on ? '#c19a4a' : '#5a4a2c';
+      b.style.color = on ? '#f0d89e' : '#8d7d5c';
+      b.style.background = on ? 'rgba(60,44,20,0.9)' : 'rgba(26,22,17,0.85)';
+    });
+  }
+
+  // ————————————————————— the two layers —————————————————————
+  _render() {
+    const chart = this.getChart?.();
+    const ctx = this.canvas.getContext('2d');
+    if (chart) ctx.drawImage(chart, 0, 0, CHART_PX, CHART_PX);
+    this.built = true;
+  }
+
+  // Everything below is drawn in SCREEN pixels. Nothing here multiplies a size by this.zoom —
+  // that is the invariant that keeps the map readable at 1× and at 8×.
+  _draw() {
+    const d = this._disp();
+    if (!d || !this.visible) return;
+    const dpr = Math.min(devicePixelRatio || 1, 2);
+    if (this.overlay.width !== Math.round(d * dpr)) this.overlay.width = this.overlay.height = Math.round(d * dpr);
+    const ctx = this.overlay.getContext('2d');
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, d, d);
+
+    const redraw = () => this._draw();          // a late icon load repaints the overlay
+    this._hit = [];
+
+    this._drawBuildings(ctx, d);
+    this._drawRoute(ctx, d);
+    this._drawPOIs(ctx, d, redraw);
+    this._drawObjectives(ctx, d, redraw);
+    this._drawWaypoint(ctx, d, redraw);
+    this._drawHome(ctx, d, redraw);
+    this._drawHorse(ctx, d);
+    this._drawPlayer(ctx, d);
+    this._drawScale(ctx, d);
+  }
+
+  // THE ROOFS — every building in the county as a crisp ink footprint: the same square the minimap
+  // paints, but drawn in SCREEN space so the EDGE stays ~1px at any zoom while the block scales with
+  // the ground under it. One source with the minimap (cartograph.allBuildings()), so they can't drift.
+  // FOOTPRINT IS A SQUARE — a DATA limit, not a choice: a building is {x,z,ry,collider} (one radius, no
+  // width/depth), so the honest footprint is a collider box turned to its heading, with the same R three
+  // uses (x' = x·cos + z·sin, z' = −x·sin + z·cos, matching cartograph stamp()). Drawn UNDER route+stamps.
+  _drawBuildings(ctx, d) {
+    ctx.save();
+    ctx.lineJoin = 'miter';
+    ctx.lineWidth = 1.1;                                  // fixed screen px — crisp at 1× and at 16×
+    ctx.strokeStyle = 'rgba(74,52,30,0.85)';             // the contour/road ink, on parchment
+    ctx.fillStyle = 'rgba(238,226,192,0.16)';            // a whisper of parchment body, so a roof reads as a block
+    const mPerPx = WORLD_SIZE / (d * this.zoom);
+    for (const b of allBuildings()) {
+      const [X, Y] = this._w2s(b.x, b.z);
+      if (X < -20 || Y < -20 || X > d + 20 || Y > d + 20) continue;   // off the frame
+      const hw = (b.collider ?? 4) * 0.75;               // half-side in metres (minimap uses collider·1.5 full)
+      if (hw / mPerPx < 1.1) continue;                   // sub-pixel at county zoom: a speck — skip, keep the sheet clean
+      const cos = Math.cos(b.ry ?? 0), sin = Math.sin(b.ry ?? 0);
+      ctx.beginPath();
+      for (let k = 0; k < 4; k++) {
+        const lx = (k === 0 || k === 3) ? -hw : hw;      // corners (−,−)(+,−)(+,+)(−,+)
+        const lz = k < 2 ? -hw : hw;
+        const [sx, sy] = this._w2s(b.x + lx * cos + lz * sin, b.z - lx * sin + lz * cos);
+        k ? ctx.lineTo(sx, sy) : ctx.moveTo(sx, sy);
+      }
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  // THE LINE TO WHERE YOU SAID YOU WERE GOING — and now it IS a route. game.route (planned by ui.js
+  // over the road graph, kept fresh while a waypoint is set) follows the actual roads: SOLID on the
+  // network, DASHED for the two short stubs off it (you→road, road→pin). If the router has no plan yet,
+  // or the pin is nowhere near a road, it falls back to an honest crow-flies dashed line.
+  _drawRoute(ctx, d) {
+    const wp = this.game.waypoint;
+    const pl = this.game.player?.position;
+    if (!wp || !pl) return;
+    const rt = this.game.route;
+    const segs = rt?.segments?.length
+      ? rt.segments
+      : [{ pts: [{ x: pl.x, z: pl.z }, { x: wp.x, z: wp.z }], style: 'dash' }];
+    const line = rt && rt.reachable ? '#c2401f' : '#a86a3c';   // rust when it's a real road route; faded when crow-flies
+    ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+    for (let pass = 0; pass < 2; pass++) {
+      ctx.strokeStyle = pass ? line : 'rgba(245,232,198,0.85)';   // cream casing, so it reads on ink AND on paper
+      ctx.lineWidth = pass ? 2.6 : 5;
+      for (const seg of segs) {
+        if (!seg.pts || seg.pts.length < 2) continue;
+        ctx.setLineDash(seg.style === 'dash' ? [9, 7] : []);
+        ctx.beginPath();
+        for (let i = 0; i < seg.pts.length; i++) {
+          const [sx, sy] = this._w2s(seg.pts[i].x, seg.pts[i].z);
+          i ? ctx.lineTo(sx, sy) : ctx.moveTo(sx, sy);
+        }
+        ctx.stroke();
+      }
+    }
+    ctx.setLineDash([]);
+  }
+
+  _drawPOIs(ctx, d, redraw) {
+    const placed = [];                          // label rects — the small ones yield to the big ones
+    const shown = allPOIs().filter((p) => !this.filters.size || this.filters.has(p.category));
+    // big places first, so their labels reserve their ground before the stage stops ask for any
+    const order = [...shown].sort((a, b) => (b.big ? 1 : 0) - (a.big ? 1 : 0));
+    const stamps = [];
+    for (const p of order) {
+      const [X, Y] = this._w2s(p.x, p.z);
+      if (X < -30 || Y < -30 || X > d + 30 || Y > d + 30) continue;    // off the frame: don't draw, don't hit-test
+      const r = p.big ? 14 : 10;
+      this._stamp(ctx, X, Y, r, p, redraw);
+      this._hit.push({ X, Y, r: r + 2, p });
+      stamps.push([p, X, Y, r]);
+    }
+    // A STAMP IS AN OBSTACLE TOO, not just another label. The stage depot stands 28 m from
+    // Dustwater's marker, and with only labels in the way its name printed straight across the
+    // town's icon — the collision has to know about the ink, not only the words.
+    for (const [, X, Y, r] of stamps) placed.push({ x: X - r, y: Y - r, w: r * 2, h: r * 2 });
+    for (const [p, X, Y, r] of stamps) this._label(ctx, p, X, Y, r, placed);
+    // the hovered place gets a ring, so you know which one you are about to waypoint
+    if (this._hover) {
+      const [X, Y] = this._w2s(this._hover.p.x, this._hover.p.z);
+      ctx.beginPath();
+      ctx.arc(X, Y, (this._hover.p.big ? 14 : 10) + 5, 0, 7);
+      ctx.strokeStyle = '#ffcf5a'; ctx.lineWidth = 2;
+      ctx.shadowColor = 'rgba(0,0,0,0.8)'; ctx.shadowBlur = 4;
+      ctx.stroke();
+      ctx.shadowBlur = 0;
+    }
+  }
+
+  // A PLACE IS A STAMP: a paper disc, an ink ring, the icon inked inside it. Not a coloured dot —
+  // a dot tells you something is there and nothing about what it is, and this county has a fort, a
+  // mission, a camp, a quarry and a stage line, which are five different reasons to ride somewhere.
+  _stamp(ctx, X, Y, r, p, redraw) {
+    const ink = INK[p.category] ?? '#3a2a16';
+    ctx.save();
+    ctx.shadowColor = 'rgba(30,20,8,0.55)'; ctx.shadowBlur = 5; ctx.shadowOffsetY = 1;
+    ctx.beginPath(); ctx.arc(X, Y, r, 0, 7);
+    ctx.fillStyle = '#efe2c0'; ctx.fill();
+    ctx.restore();
+    ctx.beginPath(); ctx.arc(X, Y, r, 0, 7);
+    ctx.strokeStyle = ink; ctx.lineWidth = p.big ? 2 : 1.5; ctx.stroke();
+    const s = r * (p.big ? 1.42 : 1.34);
+    const img = inkIcon(p.icon, ink, s, redraw);
+    if (img) ctx.drawImage(img, X - s / 2, Y - s / 2, s, s);
+  }
+
+  _label(ctx, p, X, Y, r, placed) {
+    // NAME THE PLACES. All of them — a map whose farms and ranches have no names is a map of dots,
+    // and "there is something over there" is not information you can ride on.
+    //
+    // The ONE exception is the stage stops, and only because of where they physically are: the
+    // depot stands 28 m from Dustwater's marker, which at 1x is four pixels, so its name lands
+    // straight across the town's. They pull apart from what they serve by about 2.2x, and they name
+    // themselves from there. (The first cut suppressed every non-"big" place, which meant every
+    // farm, ranch, shack and the cemetery went unnamed at county zoom — the zoom you actually plan
+    // a ride at. The label-collision pass below already handles crowding; it does not need help.)
+    if (p.category === 'Stage' && this.zoom < 2.2) return;
+    const fs = p.big ? 13.5 : 11;
+    ctx.font = `${p.big ? 700 : 600} ${fs}px Georgia, 'Palatino Linotype', serif`;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    const w = ctx.measureText(p.name).width, h = fs * 1.15;
+    const lx = X - w / 2, ly = Y + r + 3;
+    // a small label that would land on a big one simply doesn't get drawn — an unreadable pile of
+    // overlapping names is worse than a missing one, and you can always zoom in to separate them
+    for (const q of placed) {
+      if (lx < q.x + q.w && lx + w > q.x && ly < q.y + q.h && ly + h > q.y) { if (!p.big) return; }
+    }
+    placed.push({ x: lx, y: ly, w, h });
+    ctx.lineWidth = 3.2; ctx.strokeStyle = 'rgba(243,232,203,0.92)';   // cream halo = ink on paper
+    ctx.strokeText(p.name, X, ly);
+    ctx.fillStyle = p.big ? '#2a1c0c' : '#3d2e1a';
+    ctx.fillText(p.name, X, ly);
+  }
+
+  _drawWaypoint(ctx, d, redraw) {
+    const wp = this.game.waypoint;
+    if (!wp) return;
+    const [X, Y] = this._w2s(wp.x, wp.z);
+    const s = 24;
+    const img = inkIcon('target', '#c2401f', s, redraw);
+    ctx.save();
+    ctx.shadowColor = 'rgba(255,240,210,0.9)'; ctx.shadowBlur = 4;     // a cream glow: the mark is ON the paper
+    if (img) ctx.drawImage(img, X - s / 2, Y - s / 2, s, s);
+    else { ctx.beginPath(); ctx.arc(X, Y, 7, 0, 7); ctx.fillStyle = '#c2401f'; ctx.fill(); }
+    ctx.restore();
+    const pl = this.game.player?.position;
+    if (!pl) return;
+    // ABOVE the pin, never below: a place's own name is written under its stamp, and a waypoint is
+    // usually ON a place — put the distance underneath and the two lines print on top of each other.
+    const m = Math.round(Math.hypot(wp.x - pl.x, wp.z - pl.z));
+    ctx.font = '700 12px Georgia, serif';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+    const txt = `${m} m`;
+    const ly = Y - s / 2 - 2;
+    ctx.lineWidth = 3.2; ctx.strokeStyle = 'rgba(243,232,203,0.92)';
+    ctx.strokeText(txt, X, ly);
+    ctx.fillStyle = '#8c2a12';
+    ctx.fillText(txt, X, ly);
+  }
+
+  // THE MISSION'S OBJECTIVE, on the paper. game.questMarkers is the very list the compass reads
+  // (missions.js _setMarkers): the mission giver, or the active stage's target / goto point. A GOLD
+  // mark so it reads apart from the rust waypoint you set yourself — the same gold as the compass pip.
+  _drawObjectives(ctx, d, redraw) {
+    const marks = (this.game.questMarkers ?? []).filter((e) => e && e.alive !== false && e.position);
+    for (const e of marks) {
+      const [X, Y] = this._w2s(e.position.x, e.position.z);
+      if (X < -30 || Y < -30 || X > d + 30 || Y > d + 30) continue;
+      const s = 22;
+      const img = inkIcon('target', '#ffc63a', s, redraw);
+      ctx.save();
+      ctx.shadowColor = 'rgba(0,0,0,0.7)'; ctx.shadowBlur = 5;
+      if (img) ctx.drawImage(img, X - s / 2, Y - s / 2, s, s);
+      else { ctx.beginPath(); ctx.arc(X, Y, 7, 0, 7); ctx.fillStyle = '#ffc63a'; ctx.fill(); }
+      ctx.restore();
+    }
+  }
+
+  // THE HALLOWAY PLACE — once the deed is yours, home gets its own stamp on the paper (the static
+  // POI list is built before the campaign can sell you a house, so it rides the live layer).
+  _drawHome(ctx, d, redraw) {
+    if (!this.game.missions?.flag?.('house_owned')) return;
+    const [X, Y] = this._w2s(-15.58, -79.79);
+    if (X < -30 || Y < -30 || X > d + 30 || Y > d + 30) return;
+    this._stamp(ctx, X, Y, 11, { category: 'Settlement', icon: 'home', big: false, name: 'The Halloway Place' }, redraw);
+    ctx.font = '600 11px Georgia, serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    ctx.lineWidth = 3.2; ctx.strokeStyle = 'rgba(243,232,203,0.92)';
+    ctx.strokeText('The Halloway Place', X, Y + 14);
+    ctx.fillStyle = '#3d2e1a'; ctx.fillText('The Halloway Place', X, Y + 14);
+  }
+
+  // YOUR HORSE on the paper — a green dot so you can find where you left it. Not while you're in the
+  // saddle (it sits under your own arrow), and culled when it's off the drawn frame.
+  _drawHorse(ctx, d) {
+    const h = this.game.ownHorse;
+    if (!h || h.rider || h.alive === false || !h.position) return;
+    const [X, Y] = this._w2s(h.position.x, h.position.z);
+    if (X < -30 || Y < -30 || X > d + 30 || Y > d + 30) return;
+    ctx.save();
+    ctx.shadowColor = 'rgba(30,20,8,0.5)'; ctx.shadowBlur = 4;
+    const img = (this._horseImg ??= Object.assign(new Image(), { src: '/assets/ui/icon_horse.png' }));
+    if (img.complete && img.naturalWidth) {
+      const s = 30;
+      ctx.drawImage(img, X - s / 2, Y - s / 2, s, s);
+    } else {   // first frames: the old green pip until the icon lands
+      ctx.beginPath(); ctx.arc(X, Y, 6, 0, 7);
+      ctx.fillStyle = '#7dc24a'; ctx.fill();
+      ctx.shadowBlur = 0;
+      ctx.lineWidth = 2; ctx.strokeStyle = 'rgba(20,26,14,0.9)'; ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  // YOU, AND WHICH WAY YOU ARE FACING. rotation.y = heading and the model looks down its +Z, so
+  // a heading of h points at (sin h, cos h) in world XZ; on a north-up chart +Z is screen-DOWN, so
+  // an arrow drawn pointing up must be turned by (π − h).
+  _drawPlayer(ctx, d) {
+    const p = this.game.player;
+    if (!p?.position) return;
+    const [X, Y] = this._w2s(p.position.x, p.position.z);
+    ctx.save();
+    ctx.translate(X, Y);
+    ctx.rotate(Math.PI - (p.heading ?? 0));
+    ctx.beginPath();
+    ctx.moveTo(0, -10); ctx.lineTo(7, 8); ctx.lineTo(0, 4); ctx.lineTo(-7, 8);
+    ctx.closePath();
+    ctx.fillStyle = '#1d1408';
+    ctx.strokeStyle = '#f3e8cb'; ctx.lineWidth = 2; ctx.lineJoin = 'round';
+    ctx.stroke(); ctx.fill();
+    ctx.restore();
+  }
+
+  // A SCALE BAR, because "how far is that" is the only question anyone actually asks a map. It is
+  // screen-space and recomputed per zoom: the bar stays ~a fifth of the frame and the NUMBER
+  // changes, which is how a chart does it.
+  _drawScale(ctx, d) {
+    const mPerPx = WORLD_SIZE / (d * this.zoom);
+    const want = mPerPx * (d * 0.2);
+    const pow = 10 ** Math.floor(Math.log10(want));
+    const nice = [1, 2, 5, 10].map((k) => k * pow).find((v) => v >= want * 0.62) ?? pow * 10;
+    const px = nice / mPerPx;
+    const x0 = 14, y0 = d - 16;
+    ctx.lineCap = 'butt';
+    ctx.strokeStyle = 'rgba(243,232,203,0.9)'; ctx.lineWidth = 5;
+    ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x0 + px, y0); ctx.stroke();
+    ctx.strokeStyle = '#2a1c0c'; ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(x0, y0 - 4); ctx.lineTo(x0, y0 + 4);
+    ctx.moveTo(x0, y0); ctx.lineTo(x0 + px, y0);
+    ctx.moveTo(x0 + px, y0 - 4); ctx.lineTo(x0 + px, y0 + 4);
+    ctx.stroke();
+    ctx.font = '600 11.5px Georgia, serif';
+    ctx.textAlign = 'left'; ctx.textBaseline = 'bottom';
+    ctx.lineWidth = 3; ctx.strokeStyle = 'rgba(243,232,203,0.92)';
+    const txt = nice >= 1000 ? `${nice / 1000} km` : `${nice} m`;
+    ctx.strokeText(txt, x0, y0 - 6);
+    ctx.fillStyle = '#2a1c0c';
+    ctx.fillText(txt, x0, y0 - 6);
+  }
+
+  // Called every frame while the map is up (the world is paused, so almost nothing moves) — the
+  // redraw is gated on the player actually having moved, so an idle map costs one comparison.
+  tick() {
+    const p = this.game.player;
+    if (!p?.position) return;
+    const k = `${p.position.x.toFixed(1)}|${p.position.z.toFixed(1)}|${(p.heading ?? 0).toFixed(2)}`;
+    if (k === this._playerKey) return;
+    this._playerKey = k;
+    this._draw();
+  }
+
+  toggle() {
+    this.visible = !this.visible;
+    this.root.style.display = this.visible ? 'flex' : 'none';
+    if (!this.visible) { this.card.style.display = 'none'; this._hover = null; if (this.target) this.target.style.display = 'none'; return; }
+    if (!this.built) this._render();
+    this._showTab(this.tab);   // restore the last tab + refresh the journal from live mission state
+    this._startPadNav();       // the pad drives the hub now (L1/R1 tabs · D-pad navigates · Circle closes)
+    // THE MOUSE HAS TO COME BACK. The game holds pointer lock, and under lock there is no cursor
+    // and clientX never moves — every click would land wherever the last real mouse event was.
+    // (The old map never released it, which is why clicking a waypoint on it was a lottery.)
+    this.game.input?.releaseLock?.();
+    this.zoom = 1; this.panX = this.panY = 0;
+    this._playerKey = null;
+    this._apply();
+  }
+}
+
+const BTN = `width:28px; height:28px; background:rgba(26,22,17,0.9); color:#e8d9b0; border:1px solid #7a6336; border-radius:4px;
+  font:15px Georgia,serif; cursor:pointer; pointer-events:auto;`;
+const LBTN = `height:25px; padding:0 13px; background:rgba(26,22,17,0.85); color:#8d7d5c; border:1px solid #5a4a2c; border-radius:13px;
+  font:12px Georgia,serif; letter-spacing:0.5px; cursor:pointer; pointer-events:auto;`;
+// hub tabs (MAP · JOURNAL · SYSTEM) — the active one is inked gold + underlined by _showTab
+const TAB = `background:none; border:none; border-bottom:2px solid transparent; color:#9a855a; font-family:inherit;
+  font-size:15px; letter-spacing:3px; font-weight:700; padding:6px 22px; cursor:pointer; pointer-events:auto; transition:color .12s;`;