sindicate 0.4.0 → 0.6.0

package/src/ui/intro.js

@@ -0,0 +1,137 @@
+// INTRO — a cinematic, letterboxed prologue slideshow. Shown ONCE after the audio-unlock press and
+// BEFORE the title menu, so the theme (Dustwater.mp3, started on the unlock) carries the whole thing.
+// Widescreen: black bars top and bottom, a Ken-Burns image behind each beat's line, crossfaded.
+// X (or Esc / the on-screen button) skips straight to the title. Resolves when the last beat ends
+// or the player skips.
+//
+// IMAGES: /assets/intro/01.jpg … 06.jpg — one per beat, 16:9 or wider (they're covered into the
+// letterbox band). If a file is missing it falls back to a dark dust gradient, so the intro plays
+// text-only until the art is dropped in. Prompts for generating them live in docs/INTRO_IMAGES.md.
+const FONT = "Copperplate,'Copperplate Gothic Bold','Palatino','Book Antiqua',Georgia,serif";
+const IMG = '/assets/intro';
+const HOLD = 11100;  // ms each beat is held before it advances (tuned to the theme)
+const FADE = 1300;   // ms crossfade between beats
+
+// The prologue. Each beat is one image + one line. Sets up the county, the crime, the lawless
+// vacuum, and drops the player in — straight into Deputy Toomey's first job.
+// The prologue script is GAME data: registerIntroBeats([{ img, line }, ...])
+let BEATS = [];
+export function registerIntroBeats(beats) { BEATS = beats ?? []; }
+
+function el(tag, css, text) {
+  const e = document.createElement(tag);
+  if (css) e.style.cssText = css;
+  if (text != null) e.textContent = text;
+  return e;
+}
+
+export function showIntro(host) {
+  return new Promise((resolve) => {
+    // one keyframe block for the letterbox reveal + the slow Ken-Burns drift
+    const kf = document.createElement('style');
+    kf.textContent =
+      '@keyframes introKen { from { transform: scale(1.02) translate(0,0); } to { transform: scale(1.14) translate(-2.5%,-1.5%); } }'
+      + '@keyframes introBar { from { height: 50vh; } to { height: 10.5vh; } }';
+    const root = el('div',
+      `position:absolute;inset:0;z-index:60;background:#000;font-family:${FONT};overflow:hidden;`);
+    root.appendChild(kf);
+
+    // the image band (two stacked layers, crossfaded by opacity)
+    const stage = el('div', 'position:absolute;inset:0;');
+    const DARK = 'radial-gradient(120% 90% at 50% 40%, #3a3026 0%, #1a140d 55%, #0a0805 100%)';
+    const layer = (z) => el('div',
+      `position:absolute;inset:0;z-index:${z};opacity:0;transition:opacity ${FADE}ms ease;`
+      + `background:${DARK};background-size:cover;background-position:center;`);
+    const a = layer(1), b = layer(2);
+    stage.appendChild(a); stage.appendChild(b);
+    root.appendChild(stage);
+
+    // a bottom scrim so the line reads over any image
+    root.appendChild(el('div',
+      'position:absolute;left:0;right:0;bottom:0;height:42vh;z-index:3;pointer-events:none;'
+      + 'background:linear-gradient(to top, rgba(0,0,0,0.82) 8%, rgba(0,0,0,0) 100%);'));
+
+    // the cinematic letterbox bars — they sweep in from a full-black screen
+    const barCss = 'position:absolute;left:0;right:0;height:10.5vh;z-index:5;background:#000;animation:introBar 900ms ease both;';
+    root.appendChild(el('div', barCss + 'top:0;'));
+    root.appendChild(el('div', barCss + 'bottom:0;'));
+
+    // the line
+    const caption = el('div',
+      'position:absolute;left:50%;bottom:15vh;transform:translateX(-50%);z-index:6;'
+      + 'width:min(1100px,86vw);text-align:center;color:#efe6d2;font-size:clamp(18px,2.5vw,30px);'
+      + 'line-height:1.5;letter-spacing:1px;text-shadow:0 3px 16px rgba(0,0,0,0.95);'
+      + `opacity:0;transition:opacity ${FADE}ms ease;text-wrap:balance;`);
+    root.appendChild(caption);
+
+    // skip affordance
+    const skip = el('div',
+      'position:absolute;right:26px;bottom:calc(10.5vh + 14px);z-index:7;color:#c9bfa8;'
+      + 'font-size:13px;letter-spacing:2px;opacity:0.7;cursor:pointer;user-select:none;'
+      + 'text-shadow:0 2px 6px rgba(0,0,0,0.9);', 'PRESS  X  TO  SKIP');
+    root.appendChild(skip);
+
+    host.appendChild(root);
+
+    let i = -1, top = b, timer = null, ended = false;
+    const preload = (n) => { const im = new Image(); im.src = `${IMG}/${n}.jpg`; };
+
+    const finish = () => {
+      if (ended) return; ended = true;
+      clearTimeout(timer);
+      window.removeEventListener('keydown', onKey);
+      // Hand off to the dark title cleanly: darken the host and drop the splash's loading title
+      // BEFORE fading out, so we don't reveal the full-cover vista behind us for a frame
+      // (Nick: "shows the full pic before the black edges").
+      host.style.background = '#080604';
+      const lh = host.querySelector('h1'); if (lh) lh.style.display = 'none';
+      const ls = host.querySelector('.sub'); if (ls) ls.style.display = 'none';
+      root.style.transition = 'opacity 600ms ease';
+      root.style.opacity = '0';
+      setTimeout(() => { root.remove(); resolve(); }, 640);
+    };
+
+    const next = () => {
+      i++;
+      if (i >= BEATS.length) { finish(); return; }
+      const beat = BEATS[i];
+      const under = top === a ? b : a;     // the layer to fade OUT
+      const show = top === a ? b : a;      // wait — keep it simple: alternate
+      // fade the caption out, swap the incoming layer's image, drift + fade it in over the other
+      caption.style.opacity = '0';
+      const inc = (i % 2 === 0) ? a : b;
+      const out = (i % 2 === 0) ? b : a;
+      inc.style.backgroundImage = `url(${IMG}/${beat.img}.jpg), ${DARK}`;
+      inc.style.animation = 'none'; void inc.offsetWidth;            // restart the Ken-Burns drift
+      inc.style.animation = `introKen ${HOLD + FADE}ms linear both`;
+      inc.style.opacity = '1';
+      out.style.opacity = '0';
+      setTimeout(() => { caption.textContent = beat.text; caption.style.opacity = '1'; }, FADE * 0.55);
+      if (BEATS[i + 1]) preload(BEATS[i + 1].img);
+      timer = setTimeout(next, HOLD);
+    };
+
+    const onKey = (e) => { if (e.key === 'x' || e.key === 'X' || e.key === 'Escape') finish(); };
+    window.addEventListener('keydown', onKey);
+    skip.addEventListener('click', finish);
+
+    // gamepad: any face button / Start / Select skips too — but only on a FRESH press. The button
+    // that started the splash is very likely still held as we open, so adopt its current state on
+    // the first frame and require a release-then-press, or a single press blasts straight through.
+    let padPrev = null;
+    const padPoll = () => {
+      if (ended) 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; }
+      const pressed = !!(gp && [0, 1, 2, 3, 8, 9].some((i) => gp.buttons[i]?.pressed));
+      if (padPrev === null) padPrev = pressed;                 // first frame: don't fire on a held-over button
+      else if (pressed && !padPrev) { finish(); return; }
+      padPrev = pressed;
+      requestAnimationFrame(padPoll);
+    };
+    requestAnimationFrame(padPoll);
+
+    preload(BEATS[0].img);
+    setTimeout(next, 700);   // let the letterbox bars sweep in first
+  });
+}

package/src/ui/menuHints.js

@@ -0,0 +1,79 @@
+// Controller-aware footer hints. When a gamepad is connected we show its FACE-button glyphs
+// (PlayStation ✕/○/△ or Xbox A/B/Y) for select/back/delete; otherwise the keyboard keys. The
+// directional hints stay as arrows — they read as the D-pad on a controller and the arrow keys on a
+// keyboard, so there's nothing to swap. Re-render on gamepadconnected/disconnected (the menus also
+// poll padMode() each frame and re-render on a change) so plugging a pad in flips the labels live.
+const GOLD = '#e8c87a';
+
+export function padMode() {
+  const pads = typeof navigator !== 'undefined' && navigator.getGamepads ? navigator.getGamepads() : null;
+  if (pads) for (const p of pads) if (p && p.connected) {
+    const id = (p.id || '').toLowerCase();
+    if (/xbox|045e|xinput/.test(id)) return 'xbox';                       // Microsoft vendor 045e
+    if (/054c|dualsense|dualshock|0ce6|09cc|05c4|playstation|sony/.test(id)) return 'ps';   // Sony vendor 054c
+    return 'ps';   // unknown pad → PlayStation-style glyphs are the safe default
+  }
+  return null;   // no controller → keyboard
+}
+
+const FACE = {
+  select: { ps: '✕', xbox: 'Ⓐ' },
+  back: { ps: '○', xbox: 'Ⓑ' },
+  del: { ps: '△', xbox: 'Ⓨ' },
+};
+
+// token → the glyph/text for the current input mode
+export function hintKey(token, mode = padMode()) {
+  switch (token) {
+    case 'nav': case 'scroll': return '↑ ↓';
+    case 'change': return '← →';
+    case 'select': case 'load': case 'confirm': return mode ? FACE.select[mode] : 'Enter';
+    case 'back': case 'cancel': return mode ? FACE.back[mode] : 'Esc';
+    case 'del': return mode ? FACE.del[mode] : 'Del';
+    default: return token;
+  }
+}
+
+// ── generated button-icon sheets (Gemini) → per-button keyed canvases ─────────────────────────────
+// One 2×2 sheet per platform on black: [cross|circle / square|triangle]. We draw the right quadrant
+// into a small canvas and key the black out to transparency (a luminance ramp) so the button floats.
+const SHEETS = { ps: '/assets/ui/buttons/ps_sheet.png', xbox: '/assets/ui/buttons/xbox_sheet.png' };
+const QUAD = { cross: [0, 0], circle: [1, 0], square: [0, 1], triangle: [1, 1] };   // col,row in the 2×2 (same layout both sheets)
+const _sheet = {};   // mode → Image
+function loadSheet(mode) { let img = _sheet[mode]; if (!img) { img = new Image(); img.src = SHEETS[mode]; _sheet[mode] = img; } return img; }
+
+// A <canvas> showing the `action` button for `mode` ('ps'|'xbox'), black keyed to transparent.
+export function buttonCanvas(action, mode, size = 30) {
+  const cv = document.createElement('canvas');
+  cv.width = cv.height = size * 2;   // 2× for crispness
+  cv.style.cssText = `width:${size}px;height:${size}px;display:block;`;
+  const [col, row] = QUAD[action] || [0, 0];
+  const draw = () => {
+    const img = _sheet[mode]; if (!img || !img.complete || !img.naturalWidth) return;
+    const sw = img.naturalWidth / 2, sh = img.naturalHeight / 2;
+    const ctx = cv.getContext('2d'); ctx.clearRect(0, 0, cv.width, cv.height);
+    ctx.drawImage(img, col * sw, row * sh, sw, sh, 0, 0, cv.width, cv.height);
+    try {
+      const d = ctx.getImageData(0, 0, cv.width, cv.height), p = d.data;
+      for (let i = 0; i < p.length; i += 4) { const m = Math.max(p[i], p[i + 1], p[i + 2]); if (m < 26) p[i + 3] = 0; else if (m < 72) p[i + 3] = Math.round((m - 26) / 46 * 255); }
+      ctx.putImageData(d, 0, 0);
+    } catch (e) { /* tainted — leave as drawn */ }
+  };
+  const img = loadSheet(mode);
+  if (img.complete && img.naturalWidth) draw(); else img.addEventListener('load', draw, { once: true });
+  return cv;
+}
+
+// pairs: [[token, label], …] — e.g. [['nav','Navigate'], ['select','Load'], ['back','Back']]
+export function renderHints(footEl, pairs, mode = padMode()) {
+  footEl._hintPairs = pairs;                       // remembered so a mode flip can re-render in place
+  footEl.innerHTML = pairs.map(([tok, label]) =>
+    `<span style="margin-right:30px;white-space:nowrap"><b style="color:${GOLD};letter-spacing:1px">${hintKey(tok, mode)}</b>&nbsp; ${label}</span>`).join('');
+}
+
+// Re-render a foot bar if the controller connection state changed since last render.
+export function refreshHints(footEl, lastMode) {
+  const mode = padMode();
+  if (mode !== lastMode && footEl?._hintPairs) renderHints(footEl, footEl._hintPairs, mode);
+  return mode;
+}

package/src/ui/pauseMenu.js

@@ -0,0 +1,194 @@
+// IN-GAME PAUSE MENU — the dark gold-framed dress, matching the title/death screens (the old
+// ui.js renderMenu('pause')/'options' was the plain leftover Nick flagged). Over a dimmed frozen
+// scene: Resume · Save Game · Load Game · Settings · Quit to Title, with a Settings sub-panel
+// (graphics + volumes + camera). Self-contained pad + keyboard + mouse nav with controller-aware
+// footer hints; ui.menuOpen keeps the world paused + the player frozen while it's up.
+import { getQualityName, setQualityName, PRESETS } from '../core/quality.js';
+import { renderHints, refreshHints, padMode } from './menuHints.js';
+import { showSaveLoad } from './saveLoadScreen.js';
+
+const GOLD = '#e8c87a';
+const TXT = '#ecdfc2';
+const MUT = '#b6a577';
+const FONT = "Copperplate,'Copperplate Gothic Bold','Palatino','Book Antiqua',Georgia,serif";
+const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+const CORNER_SVG = `<svg viewBox="0 0 44 44" width="30" height="30" fill="none" stroke="${GOLD}" stroke-linecap="round"><path d="M3 24 V3 H24" stroke-width="2"/><path d="M9 19 V9 H19" stroke-width="1" opacity="0.6"/><path d="M3 3 h9 l-9 9 z" fill="${GOLD}" stroke="none"/></svg>`;
+const DIVIDER_SVG = `<svg viewBox="0 0 220 14" width="200" height="12" fill="none" stroke="${GOLD}" stroke-width="1.4" stroke-linecap="round"><line x1="8" y1="7" x2="94" y2="7"/><line x1="126" y1="7" x2="212" y2="7"/><circle cx="8" cy="7" r="1.6" fill="${GOLD}"/><circle cx="212" cy="7" r="1.6" fill="${GOLD}"/><path d="M110 1 l7 6 l-7 6 l-7 -6 z" fill="${GOLD}"/></svg>`;
+
+function el(tag, css, text) {
+  const e = document.createElement(tag);
+  if (css) e.style.cssText = css;
+  if (text != null) e.textContent = text;
+  return e;
+}
+function framedPanel(w = 420) {
+  const p = el('div', `position:relative;width:${w}px;max-width:90vw;padding:28px 36px 24px;color:${TXT};border:1px solid rgba(232,200,122,0.55);border-radius:3px;`
+    + 'background:linear-gradient(157deg,#241b11 0%,#160f09 58%,#0d0805 100%);box-shadow:0 26px 74px rgba(0,0,0,0.86);');
+  p.appendChild(el('div', 'position:absolute;inset:6px;border:1px solid rgba(232,200,122,0.26);border-radius:2px;pointer-events:none;'));
+  const c = (pos, rot) => { const d = el('div', `position:absolute;${pos}width:30px;height:30px;pointer-events:none;transform:rotate(${rot}deg);`); d.innerHTML = CORNER_SVG; p.appendChild(d); };
+  c('left:3px;top:3px;', 0); c('right:3px;top:3px;', 90); c('right:3px;bottom:3px;', 180); c('left:3px;bottom:3px;', 270);
+  return p;
+}
+
+// game: the Game. opts.onResume() must clear ui.menuOpen (i.e. call ui.closeMenu). Returns { close }.
+export function showPauseMenu(game, opts = {}) {
+  const root = el('div', `position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;font-family:${FONT};background:rgba(6,4,3,0.62);`);
+  document.body.appendChild(root);
+
+  const stack = [];
+  const cur = () => stack[stack.length - 1];
+  const paint = () => { const s = cur(); if (s) s.items.forEach((c, i) => (i === s.sel ? c.focus?.() : c.blur?.())); };
+  const push = (s) => { s.sel = s.sel ?? 0; s.items.forEach((c, i) => c.el && c.el.addEventListener('mouseenter', () => { if (cur() === s) { s.sel = i; paint(); } })); stack.push(s); paint(); };
+  const pop = () => { const s = stack.pop(); s?.onPop?.(); paint(); };
+
+  let raf = 0, closed = false, first = true, prev = {}, lastMode = padMode();
+  const close = () => { if (closed) return; closed = true; cancelAnimationFrame(raf); window.removeEventListener('keydown', onKey); root.remove(); };
+  const resume = () => { close(); opts.onResume?.(); };
+
+  const hl = (b, on) => { b.style.background = on ? GOLD : 'rgba(232,200,122,0.06)'; b.style.color = on ? '#1a1207' : TXT; b.style.borderColor = on ? GOLD : 'rgba(232,200,122,0.45)'; };
+  const BTN = `padding:9px 20px;border:1px solid rgba(232,200,122,0.45);border-radius:5px;cursor:pointer;font-family:inherit;letter-spacing:2px;font-size:15px;background:rgba(232,200,122,0.06);color:${TXT};transition:background .12s,color .12s;`;
+  const rowWrap = () => el('div', 'display:flex;align-items:center;gap:14px;margin:12px 0;padding:5px 6px;border-radius:5px;');
+  const rowLabel = (t) => el('div', `width:110px;text-align:right;color:${MUT};font-size:14px;letter-spacing:1px;text-transform:uppercase;`, t);
+
+  const titleBar = (p, t) => {
+    p.appendChild(el('div', `font-size:22px;letter-spacing:5px;font-weight:700;text-align:center;color:${GOLD};text-shadow:0 2px 8px rgba(0,0,0,0.7);`, t));
+    const d = el('div', 'display:flex;justify-content:center;margin:9px 0 16px;'); d.innerHTML = DIVIDER_SVG; p.appendChild(d);
+  };
+  const menuItem = (label, fn) => {
+    const b = el('button', `display:block;width:100%;margin:8px 0;${BTN}text-align:center;letter-spacing:3px;`, label);
+    b.onclick = fn;
+    return { el: b, activate: fn, focus: () => hl(b, true), blur: () => hl(b, false) };
+  };
+  const footer = (p) => { const f = el('div', `margin-top:16px;text-align:center;color:${MUT};font-size:12px;letter-spacing:1px;`); p.appendChild(f); return f; };
+
+  // ── controls for the settings sub-panel ──────────────────────────────────────────────────────
+  const gfxRow = () => {
+    const wrap = rowWrap(); wrap.appendChild(rowLabel('Graphics'));
+    const btns = el('div', 'display:flex;gap:8px;flex:1;'); const names = ['low', 'medium', 'high'];
+    const paintQ = () => [...btns.children].forEach((b, i) => hl(b, getQualityName() === names[i]));
+    names.forEach((nm) => { const b = el('button', `flex:1;${BTN}text-align:center;`, PRESETS[nm].label); b.onclick = () => { setQualityName(nm); paintQ(); }; btns.appendChild(b); });
+    paintQ(); wrap.appendChild(btns);
+    const step = (d) => { const i = clamp(names.indexOf(getQualityName()) + d, 0, 2); setQualityName(names[i]); paintQ(); };
+    return { el: wrap, focus: () => (wrap.style.background = 'rgba(232,200,122,0.1)'), blur: () => (wrap.style.background = 'none'), left: () => step(-1), right: () => step(1) };
+  };
+  const slider = (label, get, set) => {
+    const wrap = rowWrap(); wrap.appendChild(rowLabel(label));
+    const track = el('div', 'position:relative;flex:1;height:7px;border-radius:5px;background:rgba(232,200,122,0.18);cursor:pointer;');
+    const fill = el('div', `position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:${GOLD};`);
+    const knob = el('div', `position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:${GOLD};box-shadow:0 0 0 3px rgba(232,200,122,0.22);transform:translate(-50%,-50%);`);
+    track.appendChild(fill); track.appendChild(knob);
+    const num = el('div', `width:32px;text-align:right;color:${MUT};font-size:13px;`);
+    let v = clamp(get(), 0, 1);
+    const pv = () => { fill.style.width = knob.style.left = (v * 100) + '%'; num.textContent = Math.round(v * 100); };
+    const st = (nv) => { v = clamp(nv, 0, 1); set(v); pv(); }; pv();
+    const fromX = (x) => { const r = track.getBoundingClientRect(); st((x - r.left) / r.width); };
+    track.onmousedown = (e) => { fromX(e.clientX); const mv = (ev) => fromX(ev.clientX); const up = () => { removeEventListener('mousemove', mv); removeEventListener('mouseup', up); }; addEventListener('mousemove', mv); addEventListener('mouseup', up); };
+    wrap.appendChild(track); wrap.appendChild(num);
+    return { el: wrap, focus: () => (wrap.style.background = 'rgba(232,200,122,0.1)'), blur: () => (wrap.style.background = 'none'), left: () => st(v - 0.05), right: () => st(v + 0.05) };
+  };
+  const toggleRow = (label, get, set) => {
+    const wrap = rowWrap(); wrap.appendChild(rowLabel(label));
+    const b = el('button', `${BTN}flex:1;text-align:center;`, get() ? 'On' : 'Off');
+    const flip = () => { set(!get()); b.textContent = get() ? 'On' : 'Off'; };
+    b.onclick = flip; wrap.appendChild(b);
+    return { el: wrap, focus: () => (wrap.style.background = 'rgba(232,200,122,0.1)'), blur: () => (wrap.style.background = 'none'), left: flip, right: flip };
+  };
+
+  // ── panels ───────────────────────────────────────────────────────────────────────────────────
+  const toast = (m) => game.ui?.toast?.(m, 2200);
+  const openSettings = () => {
+    const p = framedPanel(500); titleBar(p, 'SETTINGS');
+    const rows = [
+      gfxRow(),
+      slider('Music', () => +(localStorage.getItem('av_volMusic') ?? 0.55), (v) => game.music?.setMusicVolume?.(v)),
+      slider('Ambience', () => +(localStorage.getItem('av_volAmb') ?? 0.6), (v) => { try { localStorage.setItem('av_volAmb', v); } catch (e) {} game.ambience?.setVolume?.(v); }),
+      slider('Effects', () => +(localStorage.getItem('av_volSfx') ?? 0.85), (v) => game.audio?.setSfxVolume?.(v)),
+      slider('Look Speed', () => clamp((game.player.camSensitivity - 0.25) / 2.75, 0, 1), (v) => { game.player.camSensitivity = +(0.25 + v * 2.75).toFixed(2); try { localStorage.setItem('av_camSens', game.player.camSensitivity); } catch (e) {} }),
+      toggleRow('Invert Y', () => !!game.player.invertY, (on) => { game.player.invertY = on; try { localStorage.setItem('av_invertY', on ? '1' : '0'); } catch (e) {} }),
+      toggleRow('Fullscreen', () => !!document.fullscreenElement, (on) => { try { if (on && !document.fullscreenElement) document.documentElement.requestFullscreen?.(); else if (!on && document.fullscreenElement) document.exitFullscreen?.(); } catch (e) {} }),
+    ];
+    rows.forEach((r) => p.appendChild(r.el));
+    p.appendChild(el('div', `font-size:12px;color:${MUT};opacity:0.7;margin-top:10px;text-align:center;`, 'Graphics takes full effect on the next load.'));
+    const f = footer(p);
+    root.replaceChildren(p);
+    push({ items: rows, foot: f, onPop: () => root.replaceChildren(mainPanel) });
+    renderHints(f, [['nav', 'Navigate'], ['change', 'Change'], ['back', 'Back']]);
+  };
+
+  // Save/Load open the shared slot screen over the pause menu; `sub` suspends this menu's own input
+  // while it's up so the two don't both drive the pad.
+  let sub = false;
+  const doSave = () => {
+    if (!game.missions) { toast('Nothing to save yet.'); return; }
+    sub = true;
+    showSaveLoad({ mode: 'save', list: () => game.missions.listSaves(),
+      onSave: (slot) => game.missions.saveGame(slot),
+      onDelete: (slot) => game.missions.deleteSave(slot),
+      onClose: () => { sub = false; } });
+  };
+  const doLoad = () => {
+    if (!game.missions?.hasSave?.()) { toast('No saved game found.'); return; }
+    sub = true;
+    showSaveLoad({ mode: 'load', list: () => game.missions.listSaves(),
+      onLoad: (slot) => { sub = false; resume(); const p = game.player; if (p) { p.alive = true; p.dead = false; p.health = p.maxHealth; p.busy = false; } game.dismountAll?.(); game.missions.loadGame(slot); },
+      onDelete: (slot) => game.missions.deleteSave(slot),
+      onClose: () => { sub = false; } });
+  };
+
+  const mainPanel = framedPanel(360);
+  titleBar(mainPanel, 'PAUSED');
+  const items = [
+    menuItem('RESUME', resume),
+    menuItem('SAVE GAME', () => { doSave(); }),
+    menuItem('LOAD GAME', () => { doLoad(); }),
+    menuItem('SETTINGS', openSettings),
+    menuItem('QUIT TO TITLE', () => { close(); location.reload(); }),
+  ];
+  items.forEach((it) => mainPanel.appendChild(it.el));
+  const mFoot = footer(mainPanel);
+  root.appendChild(mainPanel);
+  push({ items, foot: mFoot });
+  renderHints(mFoot, [['nav', 'Navigate'], ['select', 'Select'], ['back', 'Resume']]);
+
+  // ── input ──────────────────────────────────────────────────────────────────────────────────
+  const move = (d) => { const s = cur(); s.sel = (s.sel + d + s.items.length) % s.items.length; paint(); };
+  const onUp = () => move(-1);
+  const onDown = () => move(1);
+  const onLeft = () => cur().items[cur().sel]?.left?.();
+  const onRight = () => cur().items[cur().sel]?.right?.();
+  const onAct = () => cur().items[cur().sel]?.activate?.();
+  const onBack = () => { if (stack.length > 1) pop(); else resume(); };
+
+  const onKey = (e) => {
+    if (sub) return;   // the Save/Load screen owns input while it's up
+    switch (e.code) {
+      case 'ArrowUp': case 'KeyW': onUp(); e.preventDefault(); break;
+      case 'ArrowDown': case 'KeyS': onDown(); e.preventDefault(); break;
+      case 'ArrowLeft': case 'KeyA': onLeft(); break;
+      case 'ArrowRight': case 'KeyD': onRight(); break;
+      case 'Enter': case 'Space': case 'NumpadEnter': onAct(); e.preventDefault(); break;
+      case 'Escape': case 'Backspace': onBack(); e.preventDefault(); break;
+      default: return;
+    }
+  };
+  window.addEventListener('keydown', onKey);
+
+  const poll = () => {
+    if (closed) return;
+    if (sub) { raf = requestAnimationFrame(poll); return; }   // suspend while the Save/Load screen is up
+    const f = cur()?.foot; if (f) lastMode = refreshHints(f, lastMode);
+    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, ax = (i) => gp.axes[i] || 0;
+      const st = { up: b(12) || ax(1) < -0.55, down: b(13) || ax(1) > 0.55, left: b(14) || ax(0) < -0.55, right: b(15) || ax(0) > 0.55, a: b(0), c: b(1) };
+      const edge = (k) => st[k] && !prev[k];
+      if (first) first = false;
+      else { if (edge('up')) onUp(); if (edge('down')) onDown(); if (edge('left')) onLeft(); if (edge('right')) onRight(); if (edge('a')) onAct(); if (edge('c')) onBack(); }
+      prev = st;
+    }
+    raf = requestAnimationFrame(poll);
+  };
+  raf = requestAnimationFrame(poll);
+  return { close };
+}

package/src/ui/saveLoadScreen.js

@@ -0,0 +1,156 @@
+// SAVE / LOAD SCREEN — a full-screen slot browser shared by the title, the pause menu and the death
+// screen. Left: a column of slot cards (the 'auto' slot in load mode, plus numbered manual slots),
+// each with its frame thumbnail + name + date + playtime. Right: a detail pane (big thumbnail + the
+// full readout). Load mode loads a slot; save mode writes/overwrites one; △/Y deletes (with a confirm).
+// Decoupled from the game via callbacks, so the pre-world TITLE and the in-world pause both use it.
+//
+// opts: { mode:'load'|'save', slots:[…ids], list:()=>saves, onLoad(slot), onSave(slot,name),
+//         onDelete(slot), onClose() }. Returns { close }.
+import { renderHints, refreshHints, padMode } from './menuHints.js';
+
+const UI = '/assets/ui/menu';
+const GOLD = '#e8c87a';
+const TXT = '#ecdfc2';
+const MUT = '#b6a577';
+const FONT = "Copperplate,'Copperplate Gothic Bold','Palatino','Book Antiqua',Georgia,serif";
+
+function el(tag, css, text) {
+  const e = document.createElement(tag);
+  if (css) e.style.cssText = css;
+  if (text != null) e.textContent = text;
+  return e;
+}
+const fmtDate = (ts) => { try { return ts ? new Date(ts).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : '—'; } catch (e) { return '—'; } };
+const fmtTime = (s) => { s = Math.max(0, Math.round(s || 0)); const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60); return h ? `${h}h ${m}m` : `${m}m`; };
+
+export function showSaveLoad(opts = {}) {
+  const save = opts.mode === 'save';
+  const slotIds = opts.slots || ['1', '2', '3', '4', '5', '6'];
+
+  const root = el('div', `position:fixed;inset:0;z-index:130;display:flex;flex-direction:column;font-family:${FONT};background:#0a0705;`);
+  root.appendChild(el('div', `position:absolute;inset:0;background:#000 url(${UI}/title_bg.jpg) center/cover;opacity:0.08;`));
+  root.appendChild(el('div', 'position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,5,0.86),rgba(10,7,5,0.96));'));
+  const head = el('div', 'position:relative;padding:44px 60px 16px;border-bottom:1px solid rgba(232,200,122,0.22);flex:none;');
+  head.appendChild(el('div', `color:${GOLD};font-size:34px;letter-spacing:9px;font-weight:700;text-shadow:0 3px 12px rgba(0,0,0,0.7);`, save ? 'SAVE GAME' : 'LOAD GAME'));
+  root.appendChild(head);
+  const body = el('div', 'position:relative;flex:1;min-height:0;display:flex;gap:34px;padding:26px 60px;');
+  root.appendChild(body);
+  const foot = el('div', `position:relative;padding:15px 60px;border-top:1px solid rgba(232,200,122,0.22);color:${MUT};font-size:13px;letter-spacing:2px;flex:none;`);
+  root.appendChild(foot);
+  document.body.appendChild(root);
+
+  const listEl = el('div', 'width:440px;overflow:auto;flex:none;display:flex;flex-direction:column;gap:9px;');
+  const detail = el('div', 'flex:1;border:1px solid rgba(232,200,122,0.3);border-radius:6px;background:rgba(232,200,122,0.04);overflow:hidden;display:flex;flex-direction:column;');
+  body.appendChild(listEl); body.appendChild(detail);
+
+  let items = [], sel = 0, raf = 0, closed = false, first = true, prev = {}, lastMode = padMode(), modal = null;
+  const close = () => { if (closed) return; closed = true; cancelAnimationFrame(raf); window.removeEventListener('keydown', onKey); root.remove(); };
+  const back = () => { if (modal) { modal.remove(); modal = null; setHints(); paint(); return; } close(); opts.onClose?.(); };
+
+  const showDetail = (rec) => {
+    if (!rec) { detail.innerHTML = `<div style="flex:1;display:flex;align-items:center;justify-content:center;color:${MUT};letter-spacing:2px">${save ? 'NEW SAVE' : 'EMPTY'}</div>`; return; }
+    const img = rec.thumb ? `<img src="${rec.thumb}" style="width:100%;height:100%;object-fit:cover">`
+      : `<div style="flex:1;display:flex;align-items:center;justify-content:center;color:${MUT};font-size:12px;letter-spacing:3px">NO PREVIEW</div>`;
+    detail.innerHTML = `<div style="flex:1;min-height:190px;background:linear-gradient(135deg,#1a130b,#0d0906);display:flex;overflow:hidden">${img}</div>`
+      + `<div style="padding:20px 24px"><div style="color:${GOLD};font-size:22px;letter-spacing:2px;font-weight:700">${rec.name || rec.title || 'Dustwater'}</div>`
+      + `<div style="color:${MUT};font-size:13px;margin-top:8px;line-height:1.9">${rec.auto ? 'Autosave · ' : ''}${fmtDate(rec.savedAt)}<br>Played ${fmtTime(rec.playtime)} &nbsp;·&nbsp; Purse $${rec.money ?? 0}${rec.objective ? '<br>' + rec.objective : ''}</div></div>`;
+  };
+
+  const rebuild = () => {
+    const saves = opts.list ? opts.list() : [];
+    const bySlot = {}; saves.forEach((s) => { bySlot[String(s.slot)] = s; });
+    const ids = save ? slotIds : ['auto', ...slotIds].filter((id) => bySlot[id]);   // load: only filled; save: all manual slots
+    listEl.innerHTML = ''; items = [];
+    if (!ids.length) { listEl.appendChild(el('div', `color:${MUT};opacity:0.8;padding:12px;`, 'No saved games yet.')); showDetail(null); return; }
+    ids.forEach((id) => {
+      const rec = bySlot[id];
+      const card = el('button', `display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border:1px solid rgba(232,200,122,0.3);border-radius:6px;background:rgba(232,200,122,0.05);cursor:pointer;font-family:inherit;color:${TXT};transition:background .12s;`);
+      const thumb = rec && rec.thumb ? `<img src="${rec.thumb}" style="width:74px;height:44px;object-fit:cover;border-radius:3px;flex:none">`
+        : `<div style="width:74px;height:44px;border-radius:3px;background:rgba(232,200,122,0.08);flex:none"></div>`;
+      const title = rec ? (rec.name || rec.title || 'Dustwater') : (save ? 'New Save' : 'Empty');
+      const subtitle = rec ? `${rec.auto ? 'AUTO' : 'SLOT ' + id} &nbsp;·&nbsp; ${fmtDate(rec.savedAt)}` : (save ? 'Empty slot' : '');
+      card.innerHTML = `${thumb}<div style="min-width:0"><div style="font-size:15px;letter-spacing:1px;font-weight:700;color:${GOLD};white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${title}</div><div style="font-size:11px;color:${MUT};margin-top:3px">${subtitle}</div></div>`;
+      const ctrl = {
+        el: card, rec, slot: id,
+        focus: () => { card.style.background = 'rgba(232,200,122,0.16)'; card.style.borderColor = GOLD; showDetail(rec); },
+        blur: () => { card.style.background = 'rgba(232,200,122,0.05)'; card.style.borderColor = 'rgba(232,200,122,0.3)'; },
+        activate: () => choose(ctrl),
+      };
+      card.onclick = ctrl.activate;
+      card.addEventListener('mouseenter', () => { sel = items.indexOf(ctrl); paint(); });
+      listEl.appendChild(card); items.push(ctrl);
+    });
+    if (sel >= items.length) sel = items.length - 1;
+    if (sel < 0) sel = 0;
+    paint();
+  };
+
+  const paint = () => items.forEach((c, i) => (i === sel ? c.focus() : c.blur()));
+
+  // a small centered confirm over the screen
+  const confirm = (msg, onYes) => {
+    modal = el('div', 'position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(6,4,3,0.5);');
+    const p = el('div', `width:400px;max-width:88vw;padding:26px 32px;color:${TXT};border:1px solid rgba(232,200,122,0.55);border-radius:4px;background:linear-gradient(157deg,#241b11,#160f09 60%,#0d0805);box-shadow:0 24px 60px rgba(0,0,0,0.8);text-align:center;`);
+    p.appendChild(el('div', `color:${GOLD};letter-spacing:2px;margin-bottom:16px;line-height:1.5;`, msg));
+    const rowEl = el('div', 'display:flex;gap:12px;justify-content:center;');
+    const mk = (label) => el('button', `padding:9px 22px;border:1px solid rgba(232,200,122,0.45);border-radius:5px;cursor:pointer;font-family:inherit;letter-spacing:2px;font-size:15px;background:rgba(232,200,122,0.06);color:${TXT};`, label);
+    const noB = mk('NO'), yesB = mk('YES');
+    rowEl.append(noB, yesB); p.appendChild(rowEl); modal.appendChild(p); root.appendChild(modal);
+    let msel = 0; const mitems = [{ el: noB, fn: () => { modal.remove(); modal = null; setHints(); paint(); } }, { el: yesB, fn: () => { modal.remove(); modal = null; onYes(); setHints(); } }];
+    const mpaint = () => mitems.forEach((m, i) => { m.el.style.background = i === msel ? GOLD : 'rgba(232,200,122,0.06)'; m.el.style.color = i === msel ? '#1a1207' : TXT; });
+    mpaint();
+    noB.onclick = mitems[0].fn; yesB.onclick = mitems[1].fn;
+    modal._nav = { left: () => { msel = 0; mpaint(); }, right: () => { msel = 1; mpaint(); }, act: () => mitems[msel].fn() };
+    renderHints(foot, [['change', 'Choose'], ['select', 'Confirm'], ['back', 'Cancel']]);
+  };
+
+  const choose = (ctrl) => {
+    if (save) {
+      if (ctrl.rec) confirm(`Overwrite ${ctrl.rec.name || 'this save'}?`, () => { opts.onSave?.(ctrl.slot); rebuild(); });
+      else { opts.onSave?.(ctrl.slot); rebuild(); }
+    } else if (ctrl.rec) { close(); opts.onLoad?.(ctrl.slot); }
+  };
+  const del = () => { const c = items[sel]; if (!c || !c.rec) return; confirm(`Delete ${c.rec.name || 'this save'}?`, () => { opts.onDelete?.(c.slot); rebuild(); }); };
+
+  const setHints = () => renderHints(foot, save
+    ? [['nav', 'Navigate'], ['select', 'Save'], ['del', 'Delete'], ['back', 'Back']]
+    : [['nav', 'Navigate'], ['select', 'Load'], ['del', 'Delete'], ['back', 'Back']]);
+
+  rebuild(); setHints();
+
+  const move = (d) => { if (!items.length) return; sel = (sel + d + items.length) % items.length; paint(); };
+  const onKey = (e) => {
+    if (modal) {
+      switch (e.code) { case 'ArrowLeft': case 'KeyA': modal._nav.left(); break; case 'ArrowRight': case 'KeyD': modal._nav.right(); break; case 'Enter': case 'Space': modal._nav.act(); e.preventDefault(); break; case 'Escape': case 'Backspace': back(); break; default: return; }
+      return;
+    }
+    switch (e.code) {
+      case 'ArrowUp': case 'KeyW': move(-1); e.preventDefault(); break;
+      case 'ArrowDown': case 'KeyS': move(1); e.preventDefault(); break;
+      case 'Enter': case 'Space': case 'NumpadEnter': items[sel]?.activate(); e.preventDefault(); break;
+      case 'Delete': case 'KeyR': del(); break;
+      case 'Escape': case 'Backspace': back(); break;
+      default: return;
+    }
+  };
+  window.addEventListener('keydown', onKey);
+
+  const poll = () => {
+    if (closed) return;
+    lastMode = refreshHints(foot, lastMode);
+    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, ax = (i) => gp.axes[i] || 0;
+      const st = { up: b(12) || ax(1) < -0.55, down: b(13) || ax(1) > 0.55, left: b(14) || ax(0) < -0.55, right: b(15) || ax(0) > 0.55, a: b(0), c: b(1), y: b(3) };
+      const edge = (k) => st[k] && !prev[k];
+      if (first) first = false;
+      else if (modal) { if (edge('left')) modal._nav.left(); if (edge('right')) modal._nav.right(); if (edge('a')) modal._nav.act(); if (edge('c')) back(); }
+      else { if (edge('up')) move(-1); if (edge('down')) move(1); if (edge('a')) items[sel]?.activate(); if (edge('y')) del(); if (edge('c')) back(); }
+      prev = st;
+    }
+    raf = requestAnimationFrame(poll);
+  };
+  raf = requestAnimationFrame(poll);
+  return { close };
+}