sindicate 0.4.0 → 0.6.0

package/src/ui/titleScreen.js

@@ -0,0 +1,359 @@
+// TITLE MENU — dark, RDR2-flavoured (not a copy). A near-black field, the DUSTWATER brand up top,
+// a LETTERBOXED vista band across the middle (the town at sundown, faded into black top & bottom),
+// and an understated gold menu below. Pure DOM, shown before any 3D exists.
+//
+// The MENU ITEMS are the full set (Nick): Continue · New Game · Load Game · Settings · Credits ·
+// Quit — Continue/Load appear only when a save exists. It resolves a CHOICE that boot() acts on
+// ('continue'/'load' apply the save after the world builds; 'new' starts fresh; Settings/Credits are
+// handled here and never resolve). One nav controller drives it on pad, keyboard AND mouse.
+//
+// PANELS (Settings, Credits, Load, confirms) wear a DARK gold-FRAMED dress modelled on the Synty
+// "Fantasy Menus" kit Nick pointed at — recoloured to Dustwater's leather-and-gold: a dark ground, a
+// double gold rule, filigree corners and a diamond divider under the title. No flat parchment.
+import { getQualityName, setQualityName, PRESETS } from '../core/quality.js';
+import { renderHints, refreshHints, padMode } from './menuHints.js';
+import { showSaveLoad } from './saveLoadScreen.js';
+
+const UI = '/assets/ui/menu';
+const GOLD = '#e8c87a';
+const TXT = '#ecdfc2';     // light body text on the dark panels
+const MUT = '#b6a577';     // muted labels / captions
+const FONT = "Copperplate,'Copperplate Gothic Bold','Palatino','Book Antiqua',Georgia,serif";
+const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+
+// filigree corner (drawn for TOP-LEFT; rotated 90/180/270 for the others) and a diamond divider.
+const CORNER_SVG = `<svg viewBox="0 0 44 44" width="34" height="34" 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="210" height="13" 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}" stroke="${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 readSaves() {
+  const out = [];
+  try {
+    for (let i = 0; i < localStorage.length; i++) {
+      const k = localStorage.key(i);
+      if (!k || !k.startsWith('dustwater_save_')) continue;
+      const s = JSON.parse(localStorage.getItem(k));
+      if (s && s.active !== undefined) out.push({ key: k, id: k.slice('dustwater_save_'.length), ...s, slot: s.slot ?? k.slice('dustwater_save_'.length) });
+    }
+  } catch (e) { /* private mode / bad json */ }
+  return out.sort((a, b) => (b.savedAt ?? 0) - (a.savedAt ?? 0));
+}
+const fmtDate = (ts) => { try { return ts ? new Date(ts).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }) : '—'; } catch (e) { return '—'; } };
+
+// A horizontal menu entry (RDR2-style row): gold serif that lifts, brightens and underlines when
+// focused — no letter-spacing change, so the row never reflows as the highlight moves along it.
+function menuBtn(label) {
+  const b = el('button',
+    'background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;'
+    + `color:${GOLD};font-family:inherit;font-size:21px;letter-spacing:4px;font-weight:700;white-space:nowrap;`
+    + 'padding:7px 4px 6px;text-shadow:0 2px 10px rgba(0,0,0,0.9);transition:color .15s,text-shadow .15s,transform .15s,border-color .15s;',
+    label);
+  b.__on = () => { b.style.color = '#fff3d2'; b.style.transform = 'translateY(-2px)'; b.style.borderBottomColor = GOLD; b.style.textShadow = '0 0 22px rgba(232,200,122,0.7),0 2px 10px rgba(0,0,0,0.9)'; };
+  b.__off = () => { b.style.color = GOLD; b.style.transform = 'none'; b.style.borderBottomColor = 'transparent'; b.style.textShadow = '0 2px 10px rgba(0,0,0,0.9)'; };
+  b.__off();
+  return b;
+}
+
+// A dark, gold-framed panel: leather ground, double gold rule, filigree corners.
+function framedPanel(w = 560) {
+  const p = el('div', `position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:${w}px;max-width:90vw;z-index:8;`
+    + `padding:30px 40px 28px;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;'));   // inner rule
+  const corner = (pos, rot) => { const c = el('div', `position:absolute;${pos}width:34px;height:34px;pointer-events:none;transform:rotate(${rot}deg);`); c.innerHTML = CORNER_SVG; p.appendChild(c); };
+  corner('left:3px;top:3px;', 0); corner('right:3px;top:3px;', 90); corner('right:3px;bottom:3px;', 180); corner('left:3px;bottom:3px;', 270);
+  return p;
+}
+
+// A FULL-SCREEN view (Load / Settings / Credits) — the kit's layout: a gold title top-left over a
+// hairline rule, the content beneath, and a footer hint bar. The town vista sits faded behind. Modals
+// (framedPanel) are kept ONLY for the little confirms, which should be modal.
+function fullView(titleText) {
+  const root = el('div', 'position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;background:#0a0705;');
+  root.appendChild(el('div', `position:absolute;inset:0;background:#000 url(${UI}/title_bg.jpg) center/cover;opacity:0.09;`));
+  root.appendChild(el('div', 'position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,5,0.84),rgba(10,7,5,0.96));'));
+  const head = el('div', 'position:relative;padding:46px 64px 18px;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);`, titleText));
+  root.appendChild(head);
+  const body = el('div', 'position:relative;flex:1;min-height:0;padding:30px 64px;display:flex;flex-direction:column;');
+  root.appendChild(body);
+  const foot = el('div', `position:relative;padding:15px 64px;border-top:1px solid rgba(232,200,122,0.22);color:${MUT};font-size:13px;letter-spacing:2px;flex:none;`);
+  root.appendChild(foot);
+  return { root, body, foot };
+}
+
+export function showTitleMenu(host, { music } = {}) {
+  return new Promise((resolve) => {
+    host.style.background = '#080604';
+    host.style.paddingTop = '0';
+    const lh = host.querySelector('h1'); if (lh) lh.style.display = 'none';
+    const ls = host.querySelector('.sub'); if (ls) ls.style.display = 'none';
+
+    const root = el('div',
+      `position:absolute;inset:0;font-family:${FONT};display:flex;flex-direction:column;align-items:center;justify-content:space-between;`);
+    host.appendChild(root);
+
+    // ── brand (top)
+    const top = el('div', 'text-align:center;margin-top:6vh;z-index:2;');
+    top.appendChild(el('div',
+      `color:${GOLD};font-size:min(9vw,88px);letter-spacing:min(2.2vw,18px);font-weight:700;line-height:1;`
+      + 'text-shadow:0 0 44px rgba(232,200,122,0.34),0 4px 14px rgba(0,0,0,0.95);', 'DUSTWATER'));
+    top.appendChild(el('div',
+      'color:#9a8558;font-style:italic;font-size:15px;letter-spacing:7px;margin-top:8px;'
+      + 'text-shadow:0 2px 6px rgba(0,0,0,0.9);', 'A WESTERN TALE'));
+    root.appendChild(top);
+
+    // ── letterboxed vista band (middle)
+    const band = el('div',
+      `position:relative;width:100%;height:38vh;background:#000 url(${UI}/title_bg.jpg) center 44%/cover no-repeat;`);
+    band.appendChild(el('div',
+      'position:absolute;inset:0;background:linear-gradient(to bottom,#080604 0%,rgba(8,6,4,0) 24%,rgba(8,6,4,0) 72%,#080604 100%);'));
+    root.appendChild(band);
+
+    // ── menu (bottom)
+    const col = el('div', 'text-align:center;margin-bottom:6vh;z-index:2;');
+    root.appendChild(col);
+
+    // ── nav: a stack of SCREENS. Each = {items:[ctrl], sel, horizontal?}.
+    const stack = [];
+    let subOpen = false;   // true while the shared Save/Load screen owns input
+    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 pushScreen = (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 popScreen = () => { const s = stack.pop(); s?.onPop?.(); paint(); };
+
+    let raf = 0;
+    const teardown = () => { cancelAnimationFrame(raf); window.removeEventListener('keydown', onKey); };
+    const done = (choice) => { teardown(); root.remove(); resolve(choice); };
+
+    // ── panel furniture ──────────────────────────────────────────────────────────────────────────
+    const titleBar = (p, t) => {
+      p.appendChild(el('div', `font-size:23px;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 18px;'); d.innerHTML = DIVIDER_SVG; p.appendChild(d);
+    };
+    const addClose = (p) => { const c = el('button', `position:absolute;top:9px;right:14px;border:none;background:none;cursor:pointer;font-size:19px;color:${MUT};font-family:inherit;`, '✕'); c.onclick = popScreen; p.appendChild(c); };
+    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 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};transition:background .12s,color .12s;`;
+
+    // ── controls ───────────────────────────────────────────────────────────────────────────────
+    function item(label, activate) {
+      const b = menuBtn(label);
+      const ctrl = { el: b, activate, focus: b.__on, blur: b.__off };
+      b.onclick = activate;
+      b.onmouseleave = paint;
+      return ctrl;
+    }
+    const rowWrap = () => el('div', 'display:flex;align-items:center;gap:14px;margin:13px 0;padding:6px 8px;border-radius:5px;');
+    const rowLabel = (t) => el('div', `width:118px;text-align:right;color:${MUT};font-size:14px;letter-spacing:1px;text-transform:uppercase;`, t);
+    function 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, i) => { 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.09)'), blur: () => (wrap.style.background = 'none'), left: () => step(-1), right: () => step(1) };
+    }
+    function slider(label, key, live) {
+      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(+(localStorage.getItem(key) ?? 0.6), 0, 1);
+      const paintV = () => { fill.style.width = knob.style.left = (v * 100) + '%'; num.textContent = Math.round(v * 100); };
+      const set = (nv) => { v = clamp(nv, 0, 1); try { localStorage.setItem(key, v); } catch (e) {} paintV(); live?.(v); };
+      paintV();
+      const fromX = (x) => { const r = track.getBoundingClientRect(); set((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.09)'), blur: () => (wrap.style.background = 'none'), left: () => set(v - 0.05), right: () => set(v + 0.05) };
+    }
+
+    // ON/OFF row (Off · On), pad/keys via left/right, mouse via the buttons.
+    function toggleRow(label, getV, setV) {
+      const wrap = rowWrap(); wrap.appendChild(rowLabel(label));
+      const btns = el('div', 'display:flex;gap:8px;flex:1;');
+      const names = ['Off', 'On'];
+      const paintT = () => [...btns.children].forEach((b, i) => hl(b, (getV() ? 1 : 0) === i));
+      names.forEach((nm, i) => { const b = el('button', `flex:1;${BTN}text-align:center;`, nm); b.onclick = () => { setV(i === 1); paintT(); }; btns.appendChild(b); });
+      paintT(); wrap.appendChild(btns);
+      return { el: wrap, focus: () => (wrap.style.background = 'rgba(232,200,122,0.09)'), blur: () => (wrap.style.background = 'none'), left: () => { setV(false); paintT(); }, right: () => { setV(true); paintT(); } };
+    }
+    const isFullscreen = () => !!document.fullscreenElement;
+    const setFullscreen = (on) => {
+      try {
+        if (on && !document.fullscreenElement) document.documentElement.requestFullscreen?.();
+        else if (!on && document.fullscreenElement) document.exitFullscreen?.();
+      } catch (e) { /* denied / unsupported */ }
+    };
+
+    // ── panels ─────────────────────────────────────────────────────────────────────────────────
+    const openSettings = () => {
+      const view = fullView('SETTINGS');
+      const scroll = el('div', 'flex:1;min-height:0;overflow:auto;');
+      const col = el('div', 'max-width:660px;margin:8px auto 0;');
+      const rows = [gfxRow(), toggleRow('Fullscreen', isFullscreen, setFullscreen), slider('Music', 'av_volMusic', (v) => music?.setMusicVolume?.(v)), slider('Ambience', 'av_volAmb'), slider('Effects', 'av_volSfx')];
+      rows.forEach((r) => col.appendChild(r.el));
+      col.appendChild(el('div', `font-size:12px;color:${MUT};opacity:0.7;margin-top:18px;text-align:center;letter-spacing:1px;`, 'Graphics takes effect when the world loads.'));
+      scroll.appendChild(col); view.body.appendChild(scroll);
+      renderHints(view.foot, [['nav', 'Navigate'], ['change', 'Change'], ['back', 'Back']]);
+      root.appendChild(view.root);
+      pushScreen({ items: rows, foot: view.foot, onPop: () => view.root.remove() });
+    };
+
+    const openCredits = () => {
+      const view = fullView('CREDITS');
+      const body = el('div', `flex:1;min-height:0;overflow:auto;max-width:640px;margin:0 auto;text-align:center;color:${TXT};line-height:1.8;font-size:16px;letter-spacing:1px;`);
+      body.innerHTML = [
+        ['DUSTWATER', 'A Western Tale'],
+        ['Design · Code · Direction', 'Nick Thompson'],
+        ['Built with', 'three.js · WebGPU'],
+        ['Characters & World', 'Synty Studios (POLYGON)'],
+        ['Music', 'Original score — the Dustwater cuts'],
+        ['Assistance', 'Claude Code'],
+        ['', 'Thanks for riding out.'],
+      ].map(([h, s]) => `<div style="margin:18px 0"><div style="color:${GOLD};font-size:12px;letter-spacing:3px;text-transform:uppercase;opacity:.9">${h}</div><div>${s}</div></div>`).join('');
+      view.body.appendChild(body);
+      renderHints(view.foot, [['scroll', 'Scroll'], ['back', 'Back']]);
+      root.appendChild(view.root);
+      pushScreen({ items: [{ el: body, focus: () => {}, blur: () => {}, up: () => body.scrollBy(0, -60), down: () => body.scrollBy(0, 60) }], foot: view.foot, onPop: () => view.root.remove() });
+    };
+
+    const openLoad = () => {
+      subOpen = true;   // hand input to the shared Save/Load screen while it's up
+      showSaveLoad({
+        mode: 'load',
+        list: () => readSaves(),
+        onLoad: (slot) => done({ choice: 'load', slot }),   // boot() applies it once the world builds
+        onDelete: (slot) => { try { localStorage.removeItem('dustwater_save_' + slot); } catch (e) {} },
+        onClose: () => { subOpen = false; },
+      });
+    };
+
+    const confirm = (title, msg, onYes, yes = 'YES', no = 'NO') => {
+      const p = framedPanel(430); titleBar(p, title);
+      p.appendChild(el('div', `text-align:center;color:${TXT};margin:0 0 20px;line-height:1.5;`, msg));
+      const rowEl = el('div', 'display:flex;gap:14px;justify-content:center;');
+      const noB = el('button', BTN, no), yesB = el('button', BTN, yes);
+      rowEl.appendChild(noB); rowEl.appendChild(yesB); p.appendChild(rowEl); root.appendChild(p);
+      const nc = { el: noB, activate: popScreen, focus: () => hl(noB, true), blur: () => hl(noB, false) };
+      const yc = { el: yesB, activate: () => { popScreen(); onYes(); }, focus: () => hl(yesB, true), blur: () => hl(yesB, false) };
+      noB.onclick = nc.activate; yesB.onclick = yc.activate;
+      pushScreen({ items: [nc, yc], sel: 0, horizontal: true, onPop: () => p.remove() });
+    };
+
+    const openDifficulty = () => {
+      const view = fullView('SELECT DIFFICULTY');
+      const row = el('div', 'flex:1;min-height:0;display:flex;gap:24px;justify-content:center;align-items:center;');
+      const DIFFS = [
+        { id: 'easy', name: 'GREENHORN', tag: 'EASY', desc: 'For the story and the scenery. Lead finds you slowly and lands soft.' },
+        { id: 'normal', name: 'GUNSLINGER', tag: 'NORMAL', desc: 'The county as it was meant to be rode — a fair fight, and a fatal one.' },
+        { id: 'hard', name: 'DEAD MAN WALKING', tag: 'HARD', desc: 'The desert wants you buried. Every round bites, and the law rides hard.' },
+      ];
+      const openT = performance.now();   // settle window — the click that OPENED this must not fall through onto a card
+      const items = DIFFS.map((d) => {
+        const card = el('button', 'width:300px;max-width:30vw;height:392px;padding:24px 26px;border:1px solid rgba(232,200,122,0.32);border-radius:8px;'
+          + 'background:rgba(232,200,122,0.05);cursor:pointer;font-family:inherit;color:' + TXT + ';display:flex;flex-direction:column;align-items:center;text-align:center;transition:background .12s,border-color .12s,transform .12s;');
+        card.innerHTML = `<img src="/assets/ui/difficulty/${d.id}.png" style="width:132px;height:132px;object-fit:contain;mix-blend-mode:screen;pointer-events:none" onerror="this.style.display='none'">`
+          + `<div style="color:${MUT};font-size:12px;letter-spacing:4px;margin-top:6px">${d.tag}</div>`
+          + `<div style="color:${GOLD};font-size:23px;letter-spacing:2px;font-weight:700;margin:12px 0 15px">${d.name}</div>`
+          + `<div style="color:${TXT};opacity:0.85;font-size:15px;line-height:1.6;font-family:'Book Antiqua',Georgia,serif">${d.desc}</div>`;
+        const activate = () => { if (performance.now() - openT < 250) return; done({ choice: 'new', difficulty: d.id }); };
+        card.onclick = activate;
+        return { el: card, activate,
+          focus: () => { card.style.background = 'rgba(232,200,122,0.15)'; card.style.borderColor = GOLD; card.style.transform = 'translateY(-6px)'; },
+          blur: () => { card.style.background = 'rgba(232,200,122,0.05)'; card.style.borderColor = 'rgba(232,200,122,0.32)'; card.style.transform = 'none'; } };
+      });
+      items.forEach((it) => row.appendChild(it.el));
+      view.body.appendChild(row);
+      renderHints(view.foot, [['change', 'Choose'], ['select', 'Start'], ['back', 'Back']]);
+      root.appendChild(view.root);
+      pushScreen({ items, sel: 1, horizontal: true, foot: view.foot, onPop: () => view.root.remove() });
+    };
+
+    const newGame = () => { readSaves().length ? confirm('NEW GAME', 'Start a new game? Your autosave is replaced — your manual saves are kept.', openDifficulty) : openDifficulty(); };
+
+    // ── the main menu: a HORIZONTAL row (RDR2-style). Continue/Load only when a save exists. ───────
+    const hasSave = readSaves().length > 0;
+    const mainItems = [];
+    if (hasSave) mainItems.push(item('CONTINUE', () => done('continue')));
+    mainItems.push(item('NEW GAME', newGame));
+    if (hasSave) mainItems.push(item('LOAD', openLoad));
+    mainItems.push(item('SETTINGS', openSettings));
+    mainItems.push(item('CREDITS', openCredits));
+    const rowEl = el('div', 'display:flex;gap:34px;justify-content:center;align-items:center;flex-wrap:wrap;');
+    mainItems.forEach((it) => rowEl.appendChild(it.el));
+    col.appendChild(rowEl);
+    col.appendChild(el('div', 'color:#6a5a3a;font-size:11px;letter-spacing:3px;margin-top:22px;', 'v0.1'));
+    pushScreen({ items: mainItems, sel: 0, horizontal: true });
+
+    // ── input: pad + keyboard over the whole stack ────────────────────────────────────────────────
+    const move = (d) => { const s = cur(); s.sel = (s.sel + d + s.items.length) % s.items.length; paint(); };
+    // up/down always step the list (unless the focused control scrolls its own body, e.g. credits);
+    // left/right step a HORIZONTAL screen (the main row, a confirm), else work the control (sliders).
+    const onUp = () => { const c = cur().items[cur().sel]; c?.up ? c.up() : move(-1); };
+    const onDown = () => { const c = cur().items[cur().sel]; c?.down ? c.down() : move(1); };
+    const onLeft = () => { const s = cur(), c = s.items[s.sel]; s.horizontal ? move(-1) : c?.left?.(); };
+    const onRight = () => { const s = cur(), c = s.items[s.sel]; s.horizontal ? move(1) : c?.right?.(); };
+    const onAct = () => cur().items[cur().sel]?.activate?.();
+    const onBack = () => { if (stack.length > 1) popScreen(); };
+
+    const onKey = (e) => {
+      if (subOpen) 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(); break;
+        default: return;
+      }
+    };
+    window.addEventListener('keydown', onKey);
+
+    // Gamepad: D-pad / left stick move · Cross(0)/Options(9) activate · Circle(1) back. First frame
+    // ADOPTS the held state without acting (the A that skipped the intro is likely still down).
+    let prev = {}, first = true, lastPadMode = padMode();
+    const padPoll = () => {
+      if (!root.isConnected) return;
+      if (subOpen) { raf = requestAnimationFrame(padPoll); return; }   // suspend while the Save/Load screen is up
+      const f = cur()?.foot; if (f) lastPadMode = refreshHints(f, lastPadMode);   // flip hint glyphs live on pad connect/disconnect
+      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) || b(9), 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(padPoll);
+    };
+    raf = requestAnimationFrame(padPoll);
+  });
+}