"use strict";

// Guildhall client: renders the server's state and animates progress bars
// between polls. The server is the source of truth for everything.

const POLL_MS = 10000;
const SUMMARY_MODAL_AT = 25;

let C = null;            // static content tables
let S = null;            // latest state
let skew = 0;            // server clock minus client clock, seconds
let page = decodeURIComponent(location.hash.slice(1)) || remember("page") || "town";
let selected = null;     // bank item
let pickedClass = null;  // registration
const tabs = {};         // skill -> selected recipe tab
let refreshing = false;
let refreshedFor = null; // action start a completion refresh was sent for
let version = null;      // server build this page was loaded from
let failures = 0;        // polls in a row that didn't reach the server

const $ = (sel, root = document) => root.querySelector(sel);

// Icons are game-icons.net glyphs (CC BY 3.0) from one sprite, tinted per tier or material.
const glyph = (name, tint) => `<svg class="gi" style="color:${tint}" aria-hidden="true"><use href="/static/icons.svg#${name}"></use></svg>`;
const COIN = glyph("two-coins", "#e0b04a"), FAVOUR = glyph("sparkles", "#b98ce8"), HEART = glyph("hearts", "#e2645c");

function iconise(content) {
  const entries = [...Object.values(content.items), ...content.skills, ...Object.values(content.classes),
    ...Object.values(content.buildings), ...content.prayers, ...content.actions];
  for (const entry of entries) if (entry.glyph) entry.icon = glyph(entry.glyph, entry.tint);
  return content;
}
const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
const fmt = (n) => Math.floor(n).toLocaleString("en-GB");
const serverNow = () => Date.now() / 1000 + skew;
const item = (id) => C.items[id] || { name: id, icon: "❔", value: 0 };
const skillOf = (id) => C.skills.find((s) => s.id === id);
const playerName = (uid) => S.players.find((p) => p.id === uid)?.name || uid;

function remember(key, value) {
  try {
    if (value === undefined) return localStorage.getItem("gh." + key);
    localStorage.setItem("gh." + key, value);
  } catch { /* private mode: fine */ }
  return null;
}

// --- server ---------------------------------------------------------------

async function api(path, body) {
  const options = body === undefined ? {} : {
    method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body),
  };
  const res = await fetch(path, options);
  const data = await res.json().catch(() => ({ error: "The server didn't answer properly" }));
  if (!res.ok) throw new Error(data.error || res.statusText);
  return data;
}

async function act(path, body) {
  try {
    accept(await api(path, body));
  } catch (err) {
    toast(err.message, "bad");
  }
}

async function refresh() {
  if (refreshing) return;
  refreshing = true;
  try {
    accept(await api("/api/state"));
    failures = 0;
  } catch (err) {
    // A deploy restarts the server for a second or two; only speak up if
    // the city stays out of reach.
    if (++failures === 3) toast("Lost contact with the city. Retrying…", "bad");
  } finally {
    refreshing = false;
  }
}

function accept(state) {
  version ??= state.version;
  if (state.version !== version && !document.querySelector("[data-keep]:focus") && $("#modal").hidden) {
    location.reload();  // a new build was deployed
    return;
  }
  S = state;
  skew = state.now - Date.now() / 1000;
  if (state.summary) showSummary(state.summary);
  render();
}

// --- time -----------------------------------------------------------------

function dur(seconds) {
  if (seconds > 0 && seconds < 10) return `${+seconds.toFixed(1)}s`;
  seconds = Math.max(0, Math.round(seconds));
  const d = Math.floor(seconds / 86400), h = Math.floor(seconds % 86400 / 3600);
  const m = Math.floor(seconds % 3600 / 60), s = seconds % 60;
  if (d) return `${d}d ${h}h`;
  if (h) return `${h}h ${m}m`;
  if (m) return `${m}m ${s}s`;
  return `${s}s`;
}

function clock(t) {
  return new Date((t - skew) * 1000).toLocaleString("en-GB", { weekday: "short", hour: "2-digit", minute: "2-digit" });
}

// Coarse on purpose: the markup stays the same between polls (see setHtml).
function ago(t) {
  const s = serverNow() - t;
  if (s < 60) return "just now";
  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
  return `${Math.floor(s / 86400)}d ago`;
}

// A live "3h 12m" until `t`, filled in and kept current by animate().
const countdown = (t) => `<span data-countdown="${t}"></span>`;

// --- toasts & summaries ---------------------------------------------------

function toast(text, kind = "") {
  const el = document.createElement("div");
  el.className = "toast " + kind;
  el.textContent = text;
  $("#toasts").append(el);
  setTimeout(() => el.remove(), kind === "level" ? 6000 : 3500);
  const keep = matchMedia("(max-width: 900px)").matches ? 2 : 4;
  while ($("#toasts").children.length > keep) $("#toasts").firstChild.remove();
}

function showSummary(sum) {
  if (!sum.done && !sum.stopped) return;
  if (sum.done >= SUMMARY_MODAL_AT) return awayModal(sum);
  const got = Object.entries(sum.items).map(([id, q]) => `+${fmt(q)} ${item(id).name}`);
  if (sum.gold) got.push(`+${fmt(sum.gold)} gold`);
  if (got.length) toast(got.join("  ·  "), "good");
  const eaten = Object.entries(sum.eaten || {});
  if (eaten.length) toast(`Ate ${eaten.map(([id, q]) => `${fmt(q)} ${item(id).name.toLowerCase()}`).join(", ")}`);
  if (sum.lucky) toast(sum.lucky === 1 ? "✨ Double yield!" : `✨ ${sum.lucky} double yields!`, "level");
  const spilled = Object.entries(sum.overflow);
  if (spilled.length) toast(`📦 Bank full: ${spilled.map(([id, q]) => `${fmt(q)} ${item(id).name.toLowerCase()}`).join(", ")} went to the city`);
  const sold = Object.entries(sum.sold || {});
  if (sold.length) toast(`📦 Bank full: sold ${sold.map(([id, q]) => `${fmt(q)} ${item(id).name.toLowerCase()}`).join(", ")} for ${fmt(sum.sold_gold)} gold`);
  for (const [skill, level] of sum.levels) toast(`🎉 ${skillOf(skill).name} level ${level}!`, "level");
  if (sum.stopped) toast(`Stopped: ${sum.stopped}`, "bad");
  for (const id of sum.potion_out || []) toast(`🧪 Your ${item(id).name.toLowerCase()} ran out`, "bad");
  for (const id of Object.keys(sum.potions_drunk || {})) toast(`🧪 Drank another ${item(id).name.toLowerCase()}`);
  if (sum.prayer_out) toast("🙏 Out of prayer points: your prayers have gone quiet", "bad");
  if (sum.second_wind) toast("🌬️ Second Wind! Back on your feet at half health", "level");
  if (sum.resumed) toast(`Back to ${C.actions.find((x) => x.id === sum.resumed).name.toLowerCase()}`);
}

function awayModal(sum) {
  const items = Object.entries(sum.items).map(([id, q]) => `<li>${item(id).icon} ${fmt(q)} ${esc(item(id).name)}</li>`).join("");
  const xp = Object.entries(sum.xp).map(([id, q]) => `<li>${skillOf(id).icon} ${fmt(q)} ${esc(skillOf(id).name)} XP</li>`).join("");
  const levels = sum.levels.map(([id, l]) => `<li>🎉 ${esc(skillOf(id).name)} reached level ${l}</li>`).join("");
  const spilled = Object.entries(sum.overflow).map(([id, q]) => `<li>${item(id).icon} ${fmt(q)} ${esc(item(id).name)}</li>`).join("");
  const sold = Object.entries(sum.sold || {}).map(([id, q]) => `<li>${item(id).icon} ${fmt(q)} ${esc(item(id).name)}</li>`).join("");
  openModal(`
    <h2>While you were away</h2>
    <p class="muted">You completed ${fmt(sum.done)} actions${sum.wins || sum.losses ? ` (${sum.wins} fights won, ${sum.losses} lost)` : ""}.</p>
    ${Object.keys(sum.eaten || {}).length ? `<p class="muted small">Took ${fmt(sum.damage)} damage and ate ${Object.entries(sum.eaten).map(([id, q]) => `${fmt(q)} ${esc(item(id).name.toLowerCase())}`).join(", ")}.</p>` : ""}
    ${items ? `<ul>${items}</ul>` : ""}
    ${sum.gold ? `<p class="gold">+${fmt(sum.gold)} gold</p>` : ""}
    ${xp ? `<ul>${xp}</ul>` : ""}
    ${levels ? `<ul>${levels}</ul>` : ""}
    ${sold ? `<p class="muted small">Your bank was full, so this was sold for ${fmt(sum.sold_gold)} gold:</p><ul>${sold}</ul>` : ""}
    ${spilled ? `<p class="muted small">Your bank was full, so this went to the city stockpile (for half the favour of giving it yourself):</p><ul>${spilled}</ul>` : ""}
    ${sum.stopped ? `<p class="tag bad">Stopped: ${esc(sum.stopped)}</p>` : ""}
    <p><button class="btn primary" data-close>Back to work</button></p>`);
}

function openModal(html) {
  const modal = $("#modal");
  modal.innerHTML = `<div class="modal-box">${html}</div>`;
  modal.hidden = false;
}

// --- rendering ------------------------------------------------------------

function render() {
  const kept = {};
  for (const el of document.querySelectorAll("[data-keep]")) kept[el.dataset.keep] = el.value;
  const focus = document.activeElement?.dataset?.keep;

  setHtml($("#side"), S.me ? sidebar() : `<div class="brand"><img src="/static/icon.svg" alt="">Guildhall <small>alpha</small></div>${S.dev ? devbar() : ""}`);
  setHtml($("#top"), topbar());
  setHtml($("#main"), S.me ? pageHtml() : register());

  for (const [key, value] of Object.entries(kept)) {
    const el = document.querySelector(`[data-keep="${key}"]`);
    if (el) el.value = value;
  }
  if (focus) document.querySelector(`[data-keep="${focus}"]`)?.focus();
  const msgs = $(".msgs");
  if (msgs) msgs.scrollTop = msgs.scrollHeight;
  animate();
}

// Only touch the DOM when the markup changed. Replacing an element mid-swipe
// cancels the swipe on iOS, and polls arrive every few seconds.
function setHtml(el, html) {
  if (el.dataset.html === html) return;
  const scroll = el.scrollTop;
  el.innerHTML = html;
  el.dataset.html = html;
  el.scrollTop = scroll;
}

function setMenu(open) {
  $("#app").classList.toggle("open", open);
  document.documentElement.classList.toggle("menu-open", open);
}

function nav(id, icon, label, meta = "", extra = "", tip = "") {
  return `<button class="nav ${page === id ? "on" : ""}" data-nav="${id}"${tip ? ` title="${esc(tip)}"` : ""}><span class="ic">${icon}</span><span class="label">${label}</span>${extra}<span class="meta">${meta}</span></button>`;
}

function sidebar() {
  const me = S.me, cls = C.classes[me.cls];
  const doing = me.action && C.actions.find((a) => a.id === me.action.id);
  const raid = S.upcoming?.kind === "raid";
  let html = `
    <div class="brand"><img src="/static/icon.svg" alt="">Guildhall <small>alpha</small></div>
    <div class="me">
      <div class="who">${esc(me.name)}</div>
      <div class="cls">${cls.icon} ${cls.name} · ${HEART} ${fmt(me.hp)}/${me.max_hp}</div>
      <div class="purse"><span class="gold" title="Gold: from fights and selling. Fund buildings with it or give it to the treasury">${COIN} ${fmt(me.gold)}</span><span class="favour" title="Favour: earned by giving to the city. Spend it on the Council page, or on extra bank slots">${FAVOUR} ${fmt(me.favour)}</span></div>
    </div>
    <div class="navhead">City</div>
    ${nav("town", "🏘️", "Town square", `${S.city.population}`, "", `Population ${S.city.population}`)}
    ${nav("council", "📜", "Council & threats", "", raid ? `<span class="alert"></span>` : "", raid ? "A threat is coming" : "")}
    ${nav("board", "💬", "Town board")}
    ${nav("roster", "👥", "Guild roster", `${S.players.length}`, "", `${S.players.length} ${S.players.length === 1 ? "adventurer" : "adventurers"}`)}
    <div class="navhead">You</div>
    ${nav("character", cls.icon, "Character", `${skillOf("combat").icon} ${me.levels.combat}`, "", `Combat level ${me.levels.combat}`)}
    ${nav("bank", "🏦", "Bank", `${me.slots_used}/${me.slots}`, "", `${me.slots_used} of ${me.slots} bank slots used`)}`;
  let group = null;
  for (const skill of C.skills) {
    if (skill.class && skill.class !== me.cls) continue;
    if (skill.group !== group) {
      group = skill.group;
      html += `<div class="navhead">${group}</div>`;
    }
    const busy = doing?.skill === skill.id ? `<span class="dot"></span>` : "";
    html += nav("skill:" + skill.id, skill.icon, skill.name, `${me.levels[skill.id]}`, busy);
  }
  return html + (S.dev ? devbar() : "")
    + `<p class="credit">Icons by Lorc, Delapouite and others at <a href="https://game-icons.net" target="_blank" rel="noopener">game-icons.net</a>, CC BY 3.0</p>`;
}

function devbar() {
  return `<div class="devbar"><b>Dev mode</b> · playing as ${esc(S.uid)}
    <form data-form="dev-user"><input type="text" data-keep="dev-user" placeholder="switch user"><button class="btn sm">Go</button></form>
    <div class="row">
      <button class="btn sm" data-dev-advance="1">+1h</button>
      <button class="btn sm" data-dev-advance="8">+8h</button>
      <button class="btn sm" data-dev-advance="24">+1d</button>
      <button class="btn sm" data-dev-event>Threat now</button>
      <button class="btn sm" data-dev-happen="fortune">Fortune</button>
      <button class="btn sm" data-dev-happen="hardship">Hardship</button>
      <button class="btn sm" data-dev-happen="minor">Problem</button>
    </div></div>`;
}

const TITLES = { town: "Town square", council: "Council & threats", board: "Town board", roster: "Guild roster", bank: "Bank", character: "Character" };

function topbar() {
  let title = TITLES[page] || "Guildhall";
  if (page.startsWith("skill:")) title = skillOf(page.slice(6))?.name || title;
  if (page.startsWith("character:")) title = S.players.find((p) => p.id === page.slice(10))?.name || "Character";
  if (!S.me) title = "Welcome to Guildhall";
  let chips = "";
  if (S.me?.action) {
    const action = C.actions.find((a) => a.id === S.me.action.id);
    chips += `<button class="chip act" data-nav="skill:${action.skill}">${skillOf(action.skill).icon} <span class="label">${esc(action.name)}</span><span class="bar mini"><span data-progress></span></span></button>`;
  } else if (S.me) {
    chips += `<span class="chip muted">Idle${S.me.stopped ? ` · ${esc(S.me.stopped)}` : ""}</span>`;
  }
  const w = S.happenings?.weather;
  if (w) chips += `<button class="chip" data-nav="town" title="${esc(weatherTip(w))}">${w.icon}</button>`;
  if (S.upcoming) chips += `<button class="chip ${["raid", "dragon"].includes(S.upcoming.kind) ? "threat" : ""}" data-nav="council">${eventIcon(S.upcoming.kind)} ${eventWhen(S.upcoming, true)}</button>`;
  return `<button class="menu-btn" data-menu aria-label="Menu">☰</button><h1>${esc(title)}</h1>${chips}`;
}

function eventIcon(kind) {
  return { raid: "⚔️", dragon: "🐉", merchant: "🐪", refugees: "🧳" }[kind] || "❗";
}

function eventWhen(ev, short = false) {
  if (ev.exact) return short ? `in ${countdown(ev.exact)}` : `${clock(ev.exact)} (in ${countdown(ev.exact)})`;
  if (short) return ev.earliest <= serverNow() + 60 ? `within ${countdown(ev.latest)}` : `in ${countdown(ev.earliest)}–${countdown(ev.latest)}`;
  return `between ${clock(ev.earliest)} and ${clock(ev.latest)}`;
}

function pageHtml() {
  if (page.startsWith("skill:")) {
    const id = page.slice(6);
    const skill = skillOf(id);
    if (skill && (!skill.class || skill.class === S.me.cls)) return skillPage(id);
    page = "town";
  }
  if (page.startsWith("character:")) return characterSheet(page.slice(10));
  if (page === "character") return characterSheet(S.uid);
  return ({ town, council, board, roster, bank }[page] || town)();
}

function itemChip(id, qty, have) {
  const short = have !== undefined && have < qty;
  return `<span class="item-chip ${short ? "short" : ""}" title="${esc([item(id).name, itemStats(id)].filter(Boolean).join(": "))}">${item(id).icon} ${fmt(qty)}${have !== undefined ? ` <span class="have">/ ${fmt(have)}</span>` : ""}</span>`;
}

// Progress towards a building cost: "have / need".
function costChip(icon, name, need, have) {
  return `<span class="item-chip ${have < need ? "short" : ""}" title="${esc(`${name}: ${have < need ? `${fmt(need - have)} more needed` : "done"}`)}">${icon} ${fmt(have)} <span class="have">/ ${fmt(need)}</span></span>`;
}

// --- skill pages ----------------------------------------------------------

function skillPage(id) {
  const me = S.me, skill = skillOf(id), level = me.levels[id], xp = me.xp[id];
  const floor = C.xp_table[level], ceil = C.xp_table[level + 1];
  const pct = ceil ? (xp - floor) / (ceil - floor) * 100 : 100;
  const cls = C.classes[me.cls];
  const fast = cls.fast.includes(id);
  let html = `
    <div class="panel"><div class="skill-head">
      <div class="big">${skill.icon}</div>
      <div class="info">
        <h2>${skill.name}</h2>
        <div class="lv">Level ${level} / 99 · ${fmt(xp)}${ceil ? ` / ${fmt(ceil)}` : ""} XP</div>
        <div class="bar xp thick"><span style="width:${pct}%"></span></div>
      </div>
      ${fast ? `<span class="tag gold">${cls.icon} ${cls.name} bonus</span>` : ""}
    </div></div>`;
  if (id === "combat") html += combatPanel();
  if (id === "prayer") html += prayerPanel();
  if (id === "construction") html += S.city.construction ? siteBanner()
    : `<div class="panel muted">Nothing is being built right now. Fund a building on the Town square and its site opens here.</div>`;
  html += potionPanel(id);
  if (`tool_${id}` in me.equip) html += toolPanel(id);
  if (id === "reconnaissance") html += `<div class="panel small muted">Every ${8} reconnaissance points on an upcoming event raises its intel by one level, on top of what the spymaster's guild provides. The council & threats page shows the progress.</div>`;
  html += skillHappenings(id);
  const live = new Set(S.happenings.problems.map((p) => p.kind));
  const actions = C.actions.filter((a) => a.skill === id && (a.special !== "problem" || live.has(a.problem)));
  const groups = [...new Set(actions.map((a) => a.group).filter(Boolean))];
  if (groups.length > 2) {
    // Many tiers: one tab per tier, opening on the highest one you can work.
    const open = (g) => actions.some((a) => a.group === g && !isLocked(a));
    let current = tabs[id] || remember(`tab.${id}`);
    if (!groups.includes(current)) current = [...groups].reverse().find(open) || groups[0];
    const bar = groups.map((g) => `<button class="tab ${g === current ? "on" : ""} ${open(g) ? "" : "dim"}" data-tab="${id}" data-group="${esc(g)}">${esc(g)}</button>`).join("");
    // Ungrouped actions (the building site) stay above the tabs.
    const loose = actions.filter((a) => !a.group);
    if (loose.length) html += `<div class="grid" style="margin-bottom:14px">${loose.map(actionCard).join("")}</div>`;
    return html + `<div class="tabs">${bar}</div><div class="grid">${actions.filter((a) => a.group === current).map(actionCard).join("")}</div>`;
  }
  // A few groups: each under its own heading, in the order they first appear.
  let cards = actions.filter((a) => !a.group).map(actionCard).join("");
  for (const g of groups) {
    cards += `<div class="section-title grid-head">${esc(g)}</div>` + actions.filter((a) => a.group === g).map(actionCard).join("");
  }
  return html + `<div class="grid">${cards}</div>`;
}

// Locked: missing a level, class or building, as opposed to just out of materials.
function isLocked(a) {
  const why = S.me.blocked[a.id];
  return Boolean(why && (why.startsWith("Needs") || why.startsWith("Only")));
}

// The skill's active potion, or the ones in the bank that could be drunk for it.
function potionPanel(skill) {
  const me = S.me;
  const kinds = Object.entries(C.items).filter(([, it]) => it.potion?.skill === skill);
  if (!kinds.length) return "";
  const active = me.potions[skill];
  const owned = kinds.filter(([id]) => me.bank[id]);
  const drink = owned.map(([id, it]) => `<button class="btn sm" data-potion="${id}" title="${esc(it.potion.text)}">${it.icon} ${esc(it.name)} (${fmt(me.bank[id])})</button>`).join("");
  return `<div class="panel tool-panel">${active
    ? `${item(active.item).icon} <b>${esc(item(active.item).name)}</b> <span class="muted">${esc(item(active.item).potion.text)} · ${fmt(active.charges)} uses left${me.bank[active.item] ? `, ${fmt(me.bank[active.item])} more in the bank` : ""}</span>`
    : `<span class="muted">No potion.</span>`}
    ${!active && drink ? `<span class="btns">Drink: ${drink}</span>` : ""}
    ${!active && !drink ? `<span class="small muted">Herblore can brew ${kinds.length === 1 ? "one" : "some"} for ${skill === "combat" ? "fighting" : esc(skillOf(skill).name.toLowerCase())}.</span>` : ""}
  </div>`;
}

function prayerPanel() {
  const me = S.me, city = S.city, level = me.levels.prayer;
  const cost = C.prayers.filter((p) => me.prayers.includes(p.id)).reduce((sum, p) => sum + p.cost, 0);
  const cards = C.prayers.map((p) => {
    const on = me.prayers.includes(p.id), locked = level < p.level;
    const full = !on && me.prayers.length >= C.max_prayers;
    return `<button class="prayer ${on ? "on" : ""} ${locked ? "locked" : ""}" data-pray="${p.id}" ${locked ? "disabled" : ""}
      title="${locked ? `Needs prayer level ${p.level}` : full ? `Only ${C.max_prayers} at once: turn one off first` : ""}">
      <span class="ico">${p.icon}</span>
      <span class="grow"><b>${esc(p.name)}</b><span class="small muted">${esc(p.text)}</span></span>
      <span class="small ${locked ? "why" : "muted"}">${locked ? `Lv ${p.level}` : `${p.cost} pt${p.cost > 1 ? "s" : ""}/fight`}</span>
    </button>`;
  }).join("");
  const temple = city.buildings.temple.level;
  return `<div class="cols">
    <div class="panel"><h2>Prayers · ${me.prayers.length} / ${C.max_prayers} active</h2>
      <div class="prayer-points">${skillOf("prayer").icon} <b>${fmt(me.pp)}</b> prayer points${cost ? ` · ${cost} per fight, enough for about ${fmt(me.pp / cost)} fights` : ""}</div>
      <div class="prayers">${cards}</div>
      <p class="small muted">Active prayers work in every fight while you have the points to pay for them, and each point spent trains Prayer. Bury bones for more points.</p>
    </div>
    <div class="panel"><h2>Temple</h2>
      ${temple ? `<p>Devotion <b>${fmt(city.devotion)}</b> · divine ward <b>+${city.ward}</b> defence for the next raid (up to +${15 * temple} at temple level ${temple}).</p>
        <p class="small muted">Offering bones builds devotion; it wards the city through the next raid, then starts again. The temple also adds ${temple} prayer point${temple > 1 ? "s" : ""} to every bone you bury.</p>`
      : `<p class="muted">No temple yet. Build one on the Town square to offer bones for a divine ward in raids, and to get more prayer points from bones.</p>`}
    </div></div>`;
}

function toolPanel(skill) {
  const tool = S.me.equip[`tool_${skill}`];
  return `<div class="panel tool-panel">${tool
    ? `${item(tool).icon} <b>${esc(item(tool).name)}</b> <span class="muted">${Math.round(item(tool).speed * 100)}% faster</span>
       <button class="btn sm" data-unequip="tool_${skill}">Unequip</button>`
    : `<span class="muted">No tool. A smith can make you one that speeds this up.</span>`}</div>`;
}

function combatPanel() {
  const me = S.me;
  const stat = (id) => [item(id).power && `+${item(id).power} power`, item(id).armour && `+${item(id).armour} armour`].filter(Boolean).join(", ");
  const slot = (name, label) => {
    const id = me.equip[name];
    return `<div class="gear-slot">${id
      ? `<span>${item(id).icon} ${esc(item(id).name)} <span class="muted small">${stat(id)}</span></span><button class="btn sm" data-unequip="${name}">Unequip</button>`
      : `<span class="muted">No ${label}</span>`}</div>`;
  };
  const foods = me.edible.map((id) => `<option value="${id}" ${me.food === id ? "selected" : ""}>${esc(item(id).name)} (heals ${item(id).heal}, ${fmt(me.bank[id])} left)</option>`).join("");
  const hpPct = me.hp / me.max_hp * 100;
  return `<div class="cols">
    <div class="panel"><h2>Health</h2>
      <div class="hp-line"><b>${HEART} ${fmt(me.hp)} / ${me.max_hp}</b><span class="muted small">recovers ${Math.round(C.regen_per_hour * 100)}% an hour</span></div>
      <div class="bar thick hp"><span style="width:${hpPct}%"></span></div>
      <div class="row" style="margin-top:12px"><label class="small muted">Food in fights
        <select data-food-pick>${`<option value="">Cheapest first</option>` + foods}</select></label></div>
      <p class="small">${skillOf("prayer").icon} ${me.prayers.length ? `${me.prayers.map((id) => esc(C.prayers.find((p) => p.id === id).name)).join(" + ")} · ${fmt(me.pp)} points${me.blessing.cost ? "" : ` <b class="warn">(not enough points: prayers are off)</b>`}` : `<span class="muted">No prayers active.</span>`}
        <button class="linkish" data-nav="skill:prayer">Prayers</button></p>
      <p class="small muted">Below half health you eat from your bank automatically.
        ${me.edible.length ? "" : `<b class="warn">You have no food in your bank.</b>`}
        Out of food and badly hurt, you retreat: the fight is lost, but nothing else is.</p>
    </div>
    <div class="panel"><h2>Equipment</h2>
      <div class="gear">${slot("weapon", "weapon")}${slot("shield", "shield")}${slot("helmet", "helmet")}${slot("body", "body armour")}${slot("legs", "leg armour")}</div>
      <p class="small muted">Power ${me.power} (level + weapon + shield + half your armour) · armour ${me.armour} takes ${Math.round(me.reduction * 100)}% off the damage you take${me.cls === "warrior" ? " · as a warrior you count ×1.5 in the garrison" : ""}. Equip gear from the bank.</p>
    </div></div>`;
}

// What an item does once made: healing, defence, tool speed, and who can use it.
function itemStats(id) {
  const it = item(id);
  const parts = [];
  if (it.heal) parts.push(`❤️ Heals ${it.heal}`);
  if (it.food) parts.push(`feeds ${it.food} ${it.food === 1 ? "person" : "people"} for two days`);
  if (it.power) parts.push(`+${it.power} power`);
  if (it.armour) parts.push(`+${it.armour} armour`);
  if (it.tool) parts.push(`${Math.round(it.speed * 100)}% faster ${skillOf(it.tool).name.toLowerCase()}`);
  if (it.req && it.req[1] > 1) parts.push(`needs ${skillOf(it.req[0]).name.toLowerCase()} ${it.req[1]}`);
  if (it.potion) parts.push(`${it.potion.text}, ${C.potion_charges} uses`);
  if (it.fitting) {
    const f = C.fittings.find((x) => x.id === id), done = S.city.buildings[f.building].fittings.includes(id);
    parts.push(`${C.buildings[f.building].icon} For the ${C.buildings[f.building].name.toLowerCase()} (Lv ${f.level}): ${f.effect}${done ? " · already fitted" : ""}`);
  }
  return parts.join(", ");
}

function actionCard(a) {
  const me = S.me;
  const active = me.action?.id === a.id;
  const why = me.blocked[a.id];
  const locked = isLocked(a);
  const out = Object.keys(a.outputs)[0];
  const icon = a.icon;
  const time = me.times[a.id];
  let io = "";
  if (Object.keys(a.inputs).length) {
    io += Object.entries(a.inputs).map(([id, q]) => itemChip(id, q, me.bank[id] || 0)).join("")
      + (Object.keys(a.outputs).length ? `<span class="arrow">→</span>` : "");
  }
  io += Object.entries(a.outputs).map(([id, q]) => itemChip(id, q)).join("");
  let extra = "";
  if (a.skill === "combat") {
    const chance = Math.min(0.97, Math.max(0.15, 0.5 + (me.power - a.difficulty) * 0.04));
    extra = `<div class="small">Win chance <b>${Math.round(chance * 100)}%</b> · about <b>${me.fight_damage[a.id]}</b> damage a fight${a.gold ? ` · ${a.gold} gold` : ""}</div>`;
    if (a.drops) io += a.drops.map(([id, q, odds]) => `<span class="item-chip" title="${esc(item(id).name)}: ${Math.round(odds * 100)}% chance">${item(id).icon} ${q} <span class="have">${Math.round(odds * 100)}%</span></span>`).join("");
    if (a.special === "sabotage") extra += `<div class="small muted">Each win weakens the coming raid by 3%, up to 30%.</div>`;
  }
  if (a.special === "recon") extra = `<div class="small muted">+${a.recon} recon on the next event</div>`;
  const temple = S.city.buildings.temple?.level || 0;
  if (a.special === "labour") {
    const boost = S.favours.builders.boost;
    extra = `<div class="small makes">${skillOf("construction").icon} +${me.labour_per_action} labour per action${boost ? ` <b class="boosted">×2 labour and XP for the next ${fmt(boost)}</b>` : ""}</div>`;
  }
  if (a.special === "bury") extra = `<div class="small makes">${skillOf("prayer").icon} +${a.pp + temple} prayer points</div>`;
  if (a.special === "offer") extra = `<div class="small makes">${C.buildings.temple.icon} +${+(a.devotion * (1 + 0.25 * temple)).toFixed(1)} devotion for the city's ward</div>`;
  const made = Object.keys(a.outputs).map(itemStats).filter(Boolean);
  if (made.length) extra += `<div class="small makes">${made.join(" · ")}</div>`;
  return `
    <div class="action ${active ? "active" : ""} ${locked ? "locked" : ""}">
      <div class="top"><div class="ico">${icon}</div><div>
        <div class="name">${esc(a.name)}</div>
        <div class="sub">Level ${a.level} · ${dur(time)} · ${a.xp} XP</div>
      </div></div>
      ${io ? `<div class="io">${io}</div>` : ""}
      ${extra}
      ${active ? `<div class="bar thick"><span data-progress></span></div>` : ""}
      ${active && me.action.left ? `<div class="small muted">Just one${me.action.resume ? `, then back to ${esc(C.actions.find((x) => x.id === me.action.resume).name.toLowerCase())}` : ""}</div>` : ""}
      <div class="foot">
        <span class="why">${!active && why ? esc(why) : ""}</span>
        ${active ? `<button class="btn danger" data-stop>Stop</button>`
          : `<span class="btns"><button class="btn" data-once="${a.id}" ${why ? "disabled" : ""} title="Do this once, then go back to what you were doing">${a.skill === "combat" ? "Fight once" : Object.keys(a.outputs).length ? "Make one" : "Once"}</button>
             <button class="btn primary" data-start="${a.id}" ${why ? "disabled" : ""}>Start</button></span>`}
      </div>
    </div>`;
}

// --- bank -----------------------------------------------------------------

function bank() {
  const me = S.me;
  const entries = Object.entries(me.bank).sort((x, y) => Object.keys(C.items).indexOf(x[0]) - Object.keys(C.items).indexOf(y[0]));
  if (selected && !me.bank[selected]) selected = null;
  // An item past one full stack spills into more slots: 2,500 coal shows as 1,000 + 1,000 + 500.
  const stacks = entries.flatMap(([id, q]) => {
    const parts = [];
    for (let left = q; left > 0; left -= me.stack) parts.push([id, Math.min(left, me.stack)]);
    return parts;
  });
  let slots = stacks.map(([id, q]) => `
    <button class="slot ${selected === id ? "on" : ""}" data-select="${id}" title="${esc(item(id).name)}: ${fmt(me.bank[id])}${me.bank[id] > me.stack ? ` across ${Math.ceil(me.bank[id] / me.stack)} slots` : ""}">
      <span class="qty ${q >= me.stack ? "full" : ""}">${fmt(q)}</span>${item(id).icon}<span class="nm">${esc(item(id).name)}</span>
    </button>`).join("");
  for (let i = stacks.length; i < me.slots; i++) slots += `<div class="slot empty"></div>`;
  return `
    <div class="bank-wrap">
      <div>
        <div class="panel">
          <h2>Bank · ${me.slots_used} / ${me.slots} slots · ${fmt(me.stack)} per stack</h2>
          <div class="slots">${slots}</div>
          <p class="small muted">When an item doesn't fit:
            <button class="btn sm ${me.overflow === "city" ? "gold" : ""}" data-overflow="city">Send it to the city</button>
            <button class="btn sm ${me.overflow === "stop" ? "gold" : ""}" data-overflow="stop">Stop working</button>
            <br>Raids never touch your bank. Overflow sent to the city earns half the favour of giving it yourself;
            anything the city has no use for is sold instead.</p>
        </div>
        ${favourPanel()}
      </div>
      <div>${selected ? itemPanel(selected) : goldPanel()}</div>
    </div>`;
}

function itemPanel(id) {
  const me = S.me, it = item(id), have = me.bank[id];
  const merchant = S.city.merchant_until > serverNow();
  const price = it.value * (merchant ? 1.5 : 1);
  const others = S.players.filter((p) => p.id !== S.uid);
  const qtyBtns = (attr) => [1, 10, 100].filter((q) => q <= have).map((q) => `<button class="btn sm" ${attr}="${id}" data-qty="${q}">${q}</button>`).join("")
    + `<button class="btn sm" ${attr}="${id}" data-qty="all">All (${fmt(have)})</button>`;
  return `<div class="panel item-panel">
    <div class="ico">${it.icon}</div>
    <h3>${esc(it.name)}</h3>
    <div class="muted small">You have ${fmt(have)} · worth ${price % 1 ? price.toFixed(1) : price} gold each${merchant ? " (merchant in town!)" : ""}</div>
    ${it.slot ? equipRow(id, it) : ""}
    ${it.potion ? `<div class="row"><div class="small">${esc(it.potion.text)} for ${C.potion_charges} ${it.potion.skill === "combat" ? "fights" : "actions"}.</div>
      <button class="btn gold" data-potion="${id}">Drink</button>
      ${S.me.potions[it.potion.skill] && S.me.potions[it.potion.skill].item !== id ? `<div class="small why">Replaces your ${esc(item(S.me.potions[it.potion.skill].item).name.toLowerCase())} (${S.me.potions[it.potion.skill].charges} uses left)</div>` : ""}</div>` : ""}
    ${it.heal ? `<div class="row"><div class="small muted">Heals ${it.heal} in fights.</div>
      ${S.me.food === id ? `<span class="tag good">Your fighting food</span>` : `<button class="btn sm" data-food="${id}">Eat this first in fights</button>`}</div>` : ""}
    ${it.food ? `<div class="row small muted">Feeds ${it.food} townsfolk for two days in the city granary.</div>` : ""}
    ${C.city_uses[id].length
      ? `<div class="row"><div class="k">Donate to the city · +${it.value} favour each</div><div class="btns">${qtyBtns("data-donate")}</div>
          <div class="small muted">Used for ${esc(listing(C.city_uses[id]))}.</div></div>`
      : `<div class="row small muted">The city has no use for this. Sell it, or give it to someone who can use it.</div>`}
    ${others.length ? `<div class="row"><div class="k">Give to <select data-keep="give-to">${others.map((p) => `<option value="${esc(p.id)}">${esc(p.name)}</option>`).join("")}</select></div><div class="btns">${qtyBtns("data-give")}</div></div>` : ""}
    <div class="row"><div class="k">Sell</div><div class="btns">${qtyBtns("data-sell")}</div></div>
    <div class="row"><button class="btn sm" data-select="">Close</button></div>
  </div>${goldPanel()}`;
}

function listing(words) {
  return words.length < 2 ? words.join("") : `${words.slice(0, -1).join(", ")} and ${words.at(-1)}`;
}

function equipRow(id, it) {
  const [skill, level] = it.req || [];
  const short = skill && S.me.levels[skill] < level;
  return `<div class="row"><button class="btn gold" data-equip="${id}" ${short ? "disabled" : ""}>${equipLabel(it)}</button>
    ${skill ? `<div class="small ${short ? "why" : "muted"}">Needs ${esc(skillOf(skill).name.toLowerCase())} level ${level}</div>` : ""}</div>`;
}

function equipLabel(it) {
  if (it.tool) return `Use as ${skillOf(it.tool).name.toLowerCase()} tool (${Math.round(it.speed * 100)}% faster)`;
  const stats = [it.power && `+${it.power} power`, it.armour && `+${it.armour} armour`].filter(Boolean).join(", ");
  return `Equip ${it.slot === "body" ? "body armour" : it.slot === "legs" ? "leg armour" : it.slot} (${stats})`;
}

function goldPanel() {
  return `<div class="panel"><h2>Gold</h2>
    <p class="gold">${COIN} ${fmt(S.me.gold)}</p>
    <form data-form="gold" class="btns"><input type="number" min="1" data-keep="gold" placeholder="Amount" style="width:120px"><button class="btn gold">Donate to treasury</button></form>
    <p class="small muted">The treasury pays the gold part of new buildings. 1 favour per gold.</p></div>`;
}

function favourPanel() {
  const me = S.me;
  return `<div class="panel"><h2>Favour with the council</h2>
    <p class="favour">${FAVOUR} ${fmt(me.favour)} favour · ${fmt(me.donated)} given in total</p>
    <div class="btns"><button class="btn" data-perk="bank_slot" ${me.favour < me.perk_costs.bank_slot ? "disabled" : ""}>+1 bank slot (${fmt(me.perk_costs.bank_slot)} favour)</button></div>
    <p class="small muted">Favour can also hire builders, pay informants and rally the militia: see <button class="linkish" data-nav="council">Council &amp; threats</button>.</p></div>`;
}

// --- town -----------------------------------------------------------------

function town() {
  const city = S.city;
  const growth = city.starving ? `<span class="bad">Hungry: ${city.growth} a day</span>`
    : city.growth > 0 ? `+${city.growth} a day`
    : city.growth < 0 ? `<span class="bad">Overcrowded: ${city.growth} a day</span>`
    : `<span class="warn">Full. Build more houses to grow</span>`;
  const next = city.next_tier ? `${city.next_tier.name} at ${city.next_tier.pop} people` : "The largest a settlement can be";
  let html = `<div class="stats">
    <div class="stat"><div class="k">Settlement</div><div class="v">${city.tier_name}</div><div class="note">${next}</div></div>
    <div class="stat"><div class="k">Population</div><div class="v">${city.population} <small>/ ${city.housing} homes</small></div><div class="note">${growth}</div></div>
    <div class="stat"><div class="k">Food</div><div class="v ${city.food_days < 1 ? "bad" : ""}">${city.food_days ?? 0} <small>days</small></div><div class="note">${fmt(city.food)} meals in the granary</div></div>
    <div class="stat"><div class="k">Treasury</div><div class="v gold">${fmt(city.treasury)}</div><div class="note">Day ${city.day}</div></div>
    <div class="stat"><div class="k">Defence</div><div class="v">${fmt(city.defence.total)}</div><div class="note">${city.repelled} raid${city.repelled === 1 ? "" : "s"} repelled</div></div>
    ${weatherCard()}
  </div>`;
  html += happeningsPanel();
  if (city.starving) html += `<div class="banner bad">🍞<div class="grow"><b>The granary is empty.</b> People are leaving and the city defends worse. Donate bread, cooked meat or stew.</div></div>`;
  if (city.merchant_until > serverNow()) html += `<div class="banner">🐪<div class="grow"><b>A merchant caravan is in town.</b> Everything sells for 50% more for another ${countdown(city.merchant_until)}.</div></div>`;
  if (city.construction) html += siteBanner();
  html += `<div class="section-title">Buildings</div>
    <p class="small muted">Each building collects its own fund. Materials in a fund are safe from raiders, and building starts on its own once the fund is complete.</p>
    <div class="grid wide">${Object.entries(city.buildings).map(([key, b]) => buildingCard(key, b)).join("")}</div>`;
  html += `<div class="section-title">City stockpile</div><div class="panel">`;
  const stock = Object.entries(city.stockpile);
  html += stock.length ? `<div class="stock">${stock.map(([id, q]) => itemChip(id, q)).join("")}</div>` : `<p class="muted">Empty.</p>`;
  html += `<p class="small muted">Food, weapons and anything not yet in a fund. The granary and armoury draw from here, and so do raiders.</p></div>`;
  return html;
}

// The building site: labour so far, who is helping, and ways to speed it up.
function siteBanner() {
  const city = S.city, work = city.construction, me = S.me;
  const spec = C.buildings[work.building];
  const queued = city.queue.map((key) => esc(C.buildings[key].name)).join(", ");
  const hire = S.favours.builders;
  const working = me.action?.id === "labour";
  const builders = S.players.filter((p) => p.skill === "construction" && p.doing === "Work on the building site").map((p) => esc(p.name));
  return `<div class="banner"><span class="banner-ico">${skillOf("construction").icon}</span><div class="grow">
    <div class="site-head"><b>${work.repair ? "Repairing" : "Building"} ${esc(spec.name)}</b>
      <span class="muted small">${fmt(work.labour)} / ${fmt(work.needed)} labour</span>
      <span class="btns">
        ${working ? `<span class="btn sm working">Working</span>` : `<button class="btn sm primary" data-start="labour">Work on it</button>`}
        ${hire.why ? "" : `<button class="btn sm gold" data-favour="builders" ${me.favour < hire.cost ? "disabled" : ""} title="The next ${hire.labour} labour on the site counts double, with double XP">Master builder ${FAVOUR} ${fmt(hire.cost)}</button>`}
      </span></div>
    <div class="bar gold" style="margin-top:6px"><span style="width:${Math.min(100, work.labour / work.needed * 100)}%"></span></div>
    <div class="small muted" style="margin-top:6px">${builders.length ? `On site: ${builders.join(", ")}. ` : ""}${hire.boost ? `<b class="boosted">Master builder on site: the next ${fmt(hire.boost)} labour counts double, with double XP.</b> ` : ""}The townsfolk add about ${fmt(city.townsfolk_labour)} labour an hour.${queued ? ` Next: ${queued}.` : ""}</div>
  </div></div>`;
}

// "Rain: farming 10% faster. Clear skies in 3h 20m."
function weatherTip(w) {
  const next = w.next === w.kind ? `Staying ${w.name.toLowerCase()}` : w.next_name;
  return `${w.name}: ${w.text.charAt(0).toLowerCase()}${w.text.slice(1)}. ${next} in ${dur(w.until - serverNow())}.`;
}

function weatherCard() {
  const h = S.happenings, w = h.weather;
  return `<div class="stat" title="${esc(`${weatherTip(w)} Weather changes every few hours; each season lasts a week.`)}"><div class="k">${h.season.icon} ${h.season.name}, day ${h.season.day}</div>
    <div class="v">${w.icon} <small>${esc(w.name)}</small></div>
    <div class="note">${w.next === w.kind ? `Staying ${esc(w.name.toLowerCase())}` : `${w.next_icon} ${esc(w.next_name)}`} in ${countdown(w.until)}</div></div>`;
}

// Everything going on in the city right now, and what anyone can do about it.
function happeningsPanel() {
  const h = S.happenings, me = S.me, city = S.city;
  const rows = [];
  if (h.weather.kind !== "clear") rows.push(`<div class="happening"><span class="ico">${h.weather.icon}</span><span class="grow"><b>${esc(h.weather.name)}</b><span class="small muted">${esc(h.weather.text)}</span></span></div>`);
  if (h.cold) rows.push(`<div class="happening bad"><span class="ico">🥶</span><span class="grow"><b>Out of firewood</b><span class="small muted">People are cold and eating half again as much. Donate logs.</span></span></div>`);
  for (const e of h.effects) {
    const hire = e.offer ? `<button class="btn sm gold" data-hire ${city.treasury < e.cost ? "disabled" : ""}>Hire for ${fmt(e.cost)} gold</button>` : "";
    rows.push(`<div class="happening"><span class="ico">${e.icon}</span><span class="grow"><b>${esc(e.name)}</b>
      <span class="small muted">${esc(e.text)} · ${countdown(e.until)} left</span></span>${hire}</div>`);
  }
  for (const p of h.problems) {
    let help = "";
    if (p.action) {
      const a = C.actions.find((x) => x.id === p.action);
      help = `<span class="small muted">${fmt(p.work)} / ${fmt(p.needed)} done</span>
        <button class="btn sm primary" data-nav="skill:${a.skill}">${esc(a.name)}</button>`;
    }
    const gifts = Object.entries(p.need || {}).map(([id, need]) => {
      const missing = p.missing[id] || 0;
      const mine = Math.min(missing, me.bank[id] || 0), stores = Math.min(missing, city.stockpile[id] || 0);
      return `<div class="fund-row">${costChip(item(id).icon, item(id).name, need, need - missing)}<span class="btns">
        ${mine ? `<button class="btn sm gold" data-aid="${p.kind}" data-item="${id}" data-source="bank">Give ${fmt(mine)}</button>` : ""}
        ${stores ? `<button class="btn sm" data-aid="${p.kind}" data-item="${id}" data-source="city">Stockpile ${fmt(stores)}</button>` : ""}
      </span></div>`;
    }).join("");
    rows.push(`<div class="happening bad"><span class="ico">${p.icon}</span><span class="grow"><b>${esc(p.name)}</b>
      <span class="small muted">${esc(p.text)}${p.until ? ` · ${countdown(p.until)} left` : ""}</span>${gifts}</span>${help}</div>`);
  }
  if (!rows.length) return "";
  return `<div class="panel"><h2>Happenings</h2><div class="happenings">${rows.join("")}</div></div>`;
}

// What's speeding up, slowing down or blocking this skill right now.
function skillHappenings(skill) {
  const h = S.happenings, lines = [];
  const note = (icon, name, text) => lines.push(`<span>${icon} <b>${esc(name)}</b> <span class="muted">${esc(text)}</span></span>`);
  const touches = (src) => ["speed", "yield", "xp"].some((k) => src[k] && skill in src[k]) || (src.block && skill in src.block);
  if (touches(h.weather)) note(h.weather.icon, h.weather.name, h.weather.text);
  for (const e of h.effects) if (touches(e)) note(e.icon, e.name, e.text);
  for (const p of h.problems) {
    if (!C.problems[p.kind] || !touches(C.problems[p.kind])) continue;
    const fix = p.action && C.actions.find((x) => x.id === p.action);
    note(p.icon, p.name, !fix ? p.text : fix.skill === skill ? "Help clear it below." : `${skillOf(fix.skill).name} can clear it: see the Town square.`);
  }
  return lines.length ? `<div class="panel tool-panel skill-happenings">${lines.join("")}</div>` : "";
}

function buildingCard(key, b) {
  const spec = C.buildings[key], city = S.city, me = S.me;
  const tags = {
    building: `<span class="tag gold">Under construction</span>`,
    queued: `<span class="tag good">Funded · waiting for builders</span>`,
    max: `<span class="tag good">Fully built</span>`,
    capped: `<span class="tag">Next level when the settlement grows</span>`,
  };
  let body = tags[b.status] ? `<div>${tags[b.status]}</div>` : "";
  if (b.status === "funding" || b.status === "queued") {
    body += `<div class="fund">${Object.entries(b.target).map(([id, need]) => {
      const missing = b.missing[id] || 0;
      const gold = id === "gold";
      const mine = Math.min(missing, gold ? me.gold : me.bank[id] || 0);
      const stores = Math.min(missing, gold ? city.treasury : city.stockpile[id] || 0);
      const chip = costChip(gold ? COIN : item(id).icon, gold ? "Gold" : item(id).name, need, need - missing);
      return `<div class="fund-row">${chip}<span class="btns">
        ${mine ? `<button class="btn sm gold" data-fund="${key}" data-item="${id}" data-source="bank" title="From your ${gold ? "purse" : "bank"}, earns favour">Give ${fmt(mine)}</button>` : ""}
        ${stores ? `<button class="btn sm" data-fund="${key}" data-item="${id}" data-source="city" title="From the city's ${gold ? "treasury" : "stockpile"}">${gold ? "Treasury" : "Stockpile"} ${fmt(stores)}</button>` : ""}
      </span></div>`;
    }).join("")}</div>`;
  }
  body += fittingRows(key, b);
  const levelText = b.cap < spec.max ? `Lv ${b.level} · max ${b.cap} for a ${city.tier_name.toLowerCase()}` : `Lv ${b.level} / ${spec.max}`;
  return `<div class="action building ${b.damaged ? "damaged" : ""}">
    <div class="top"><div class="ico">${spec.icon}</div><div>
      <div class="name">${esc(spec.name)} <span class="lv muted">${levelText}</span> ${b.damaged ? `<span class="tag bad">Damaged: repairs needed</span>` : ""}</div>
      <div class="sub">${esc(spec.effect)}</div>
    </div></div>${body}</div>`;
}

// Fittings Construction makes for this building: fitted, ready to fit, or waiting on a level.
function fittingRows(key, b) {
  const rows = C.fittings.filter((f) => f.building === key).map((f) => {
    const it = item(f.id), recipe = C.actions.find((a) => a.id === `make_${f.id}`);
    let state;
    if (b.fittings.includes(f.id)) {
      state = b.damaged ? `<span class="tag bad">Paused</span>` : `<span class="tag good">Fitted</span>`;
    } else if (b.level < f.level) {
      state = `<span class="tag">Needs Lv ${f.level}</span>`;
    } else {
      const mine = S.me.bank[f.id] || 0, stores = S.city.stockpile[f.id] || 0;
      state = mine || stores
        ? `${mine ? `<button class="btn sm gold" data-install="${f.id}" data-source="bank" title="From your bank, earns favour">Fit</button>` : ""}
           ${stores ? `<button class="btn sm" data-install="${f.id}" data-source="city" title="From the city's stockpile">Fit from stockpile</button>` : ""}`
        : `<span class="muted small">Construction ${recipe.level}</span>`;
    }
    return `<div class="fitting-row"><span class="fit-ico">${it.icon}</span>
      <span class="fitting-text"><b>${esc(f.name)}</b> <span class="muted small">${esc(f.effect)}</span></span>
      <span class="btns">${state}</span></div>`;
  });
  return rows.length ? `<div class="fittings">${rows.join("")}</div>` : "";
}

// --- council --------------------------------------------------------------

function pips(level) {
  return `<span class="pips" title="Intel level ${level} of 3">${[1, 2, 3].map((i) => `<i class="${i <= level ? "on" : ""}"></i>`).join("")}</span>`;
}

function council() {
  const ev = S.upcoming, city = S.city, me = S.me;
  let html = "";
  if (!ev) {
    html += `<div class="panel"><h2>All quiet</h2><p class="muted">No news on the roads. The spymasters will report as soon as something stirs.</p></div>`;
  } else {
    const threat = ["raid", "dragon"].includes(ev.kind);
    html += `<div class="panel ${threat ? "threat-card" : ""}">
      <h2>${eventIcon(ev.kind)} ${threat ? "Threat" : "News"} · intel ${pips(ev.intel)}</h2>
      <div class="headline">${esc(ev.headline)}</div>
      <div class="kv">
        <span class="k">Expected</span><span>${eventWhen(ev)}</span>
        ${ev.range ? `<span class="k">Strength</span><span>${ev.strength ?? `${ev.range[0]}–${ev.range[1]}`}</span>` : ""}
        ${ev.trait ? `<span class="k">Scouts say</span><span>${esc(ev.trait)}</span>` : ""}
        ${ev.camp ? `<span class="k">Their camp</span><span>Located. Fighters can sabotage it from the combat page${ev.sabotage ? ` (weakened ${ev.sabotage}% so far)` : ""}.</span>` : ""}
        ${me.cls === "scout" || ev.recon ? `<span class="k">Reconnaissance</span><span>${ev.intel < 3 ? `${ev.recon} points · ${ev.recon_next} more for the next intel level` : `${ev.recon} points · nothing more to learn`}</span>` : ""}
      </div>
      ${ev.intel < 3 ? `<p class="small muted">Better intel comes from the spymaster's guild and scouts' reconnaissance.</p>` : ""}`;
    if (threat) {
      const strength = ev.strength ?? (ev.range ? `${ev.range[0]}–${ev.range[1]}` : "?");
      html += `<div class="vs"><div class="side"><span class="muted small">Our defence</span><b>${fmt(city.defence.total)}</b></div><span class="muted">vs</span><div class="side"><span class="muted small">Raiders</span><b>${strength}</b></div></div>`;
    }
    html += `</div>`;
  }
  html += favourSpends();
  if (ev && ["raid", "dragon"].includes(ev.kind)) html += raidPrep(ev);
  html += `<div class="section-title">Past events</div>`;
  if (!S.history.length) html += `<p class="muted">Nothing has happened yet.</p>`;
  for (const h of S.history) {
    if (!h.report) continue;
    const fight = ["raid", "dragon"].includes(h.kind);
    const tone = fight ? (h.report.title.startsWith("Victory") ? "win" : "loss")
      : { fortune: "win", hardship: "loss", minor: "loss" }[h.track] || "";
    html += `<div class="report ${tone}">
      <b>${h.report.icon || eventIcon(h.kind)} ${esc(h.report.title)}</b> <span class="muted small">${ago(h.at)}</span>
      ${fight ? `<p class="muted">Defence ${fmt(h.report.defence)} vs ${h.kind === "dragon" ? "the dragon" : "raiders"} ${fmt(h.report.attack)}${h.report.garrison.length ? ` · garrison: ${h.report.garrison.map((g) => esc(g.name)).join(", ")}` : ""}</p>` : ""}
      ${h.report.lines.map((l) => `<p>${esc(l)}</p>`).join("")}
    </div>`;
  }
  return html;
}

function favourSpends() {
  const f = S.favours, me = S.me;
  const option = (kind, icon, title, text) => {
    const o = f[kind];
    const short = !o.why && me.favour < o.cost;
    return `<div class="favour-option">
      <span class="ico">${icon}</span>
      <span class="grow"><b>${title}</b><span class="small muted">${text}</span></span>
      <span class="btns"><button class="btn sm gold" data-favour="${kind}" ${o.why || short ? "disabled" : ""}
        title="${esc(o.why || (short ? "Not enough favour" : ""))}">${FAVOUR} ${fmt(o.cost)}</button></span>
    </div>`;
  };
  return `<div class="panel"><h2>Spend favour on the city · you have ${FAVOUR} ${fmt(me.favour)}</h2>
    ${option("builders", "🏗️", "Hire a master builder", f.builders.why ? esc(f.builders.why) + "." : `The next ${f.builders.labour} labour anyone puts into the site counts double, with double Construction XP${f.builders.boost ? ` (${fmt(f.builders.boost)} still to use)` : ""}. Costs more each time on the same site.`)}
    ${option("informant", "🕵️", "Pay an informant", f.informant.why ? esc(f.informant.why) + "." : "One more level of intel on what's coming.")}
    ${option("militia", "📯", "Rally the militia", f.militia.why ? esc(f.militia.why) + "." : `+10 defence for the coming raid${f.militia.rallied ? ` (+${f.militia.rallied} so far)` : ""}. Costs more each time.`)}
  </div>`;
}

function raidPrep(ev) {
  const city = S.city, me = S.me, d = city.defence;
  const names = { mercenaries: "Hired sellswords", ward: "Divine ward (temple)", rallied: "Rallied militia (favour)", townsfolk: "Townsfolk with pitchforks", walls: "Walls", militia: "Militia (barracks)", weapons: "Swords in the armoury", shields: "Shields in the armoury", arrows: "Arrows", garrison: "Garrison" };
  const reqs = (ev.requests || []).map((r) => {
    const mine = me.bank[r.item] || 0;
    return `<div class="req"><span>${item(r.item).icon}</span><span>${esc(r.label)} <span class="muted small">${fmt(r.have)} / ${fmt(r.want)}</span></span>
      ${mine ? `<button class="btn sm gold" data-donate="${r.item}" data-qty="all">Give ${fmt(mine)}</button>` : "<span></span>"}
      <div class="bar"><span style="width:${Math.min(100, r.have / r.want * 100)}%"></span></div></div>`;
  }).join("");
  return `<div class="cols">
    <div class="panel"><h2>Council requests</h2>${reqs}
      <p class="small muted">Arrows, swords and shields in the stockpile arm the defenders: one sword and shield each, best first. Every fight uses up arrows and breaks some of the gear, more when it's close. Food keeps them fighting.</p></div>
    <div class="panel"><h2>Defence</h2>
      <table class="parts">${Object.entries(d.parts).map(([k, v]) => `<tr><td>${names[k]}</td><td>${fmt(v)}</td></tr>`).join("")}
      ${d.starving ? `<tr><td class="bad">Hungry (×0.8)</td><td></td></tr>` : ""}</table>
      <h2 style="margin-top:16px">Garrison</h2>
      <p class="small">${d.garrison.length ? d.garrison.map((g) => `${esc(g.name)} (${g.power})`).join(", ") : `<span class="muted">Nobody has signed up yet.</span>`}</p>
      ${me.garrison ? `<button class="btn" data-garrison="0">Leave the garrison</button>`
        : `<button class="btn primary" data-garrison="1">Stand guard (+${me.cls === "warrior" ? me.power * 1.5 : me.power})</button>`}
      <p class="small muted">You can keep working while you're signed up. Victory earns the garrison favour and combat XP.</p>
    </div></div>`;
}

// --- board & roster -------------------------------------------------------

function board() {
  const msgs = S.board.map((m) => `<div class="msg"><span class="who">${esc(playerName(m.who))}</span><span class="when">${ago(m.at)}</span>
    ${m.who === S.uid && m.id ? `<button class="msg-delete" data-unpost="${m.id}" title="Delete this message">✕</button>` : ""}
    <div class="text">${esc(m.text)}</div></div>`).join("");
  const ledger = [...S.ledger].reverse().map((l) => `<li>${esc(l.text)}<span class="when">${ago(l.at)}</span></li>`).join("");
  return `<div class="cols">
    <div class="panel"><h2>Town board</h2>
      <div class="msgs">${msgs || `<p class="muted">No messages yet. Say hello, or ask for that iron you need.</p>`}</div>
      <form data-form="board"><textarea data-keep="board" maxlength="500" placeholder="Write to the guild…"></textarea>
      <p><button class="btn primary">Post</button></p></form></div>
    <div class="panel"><h2>Town ledger</h2><ul class="ledger">${ledger || `<li class="muted">Nothing recorded yet.</li>`}</ul></div>
  </div>`;
}

function roster() {
  return `<div class="grid wide">${S.players.map((p) => {
    const cls = C.classes[p.cls];
    const levels = C.skills.filter((s) => !s.class || s.class === p.cls).map((s) => `<div class="lvl ${p.levels[s.id] <= 1 ? "low" : ""}" title="${s.name} level ${p.levels[s.id]}"><span class="ico">${s.icon}</span><span class="nm">${s.name}</span><b>${p.levels[s.id]}</b></div>`).join("");
    return `<div class="panel person"><div class="top"><span class="ico">${cls.icon}</span><div>
      <b>${esc(p.name)}</b> <span class="muted small">${cls.name} · total level ${p.total}</span>
      <div class="small">${p.doing ? `${skillOf(p.skill).icon} ${esc(p.doing)}` : `<span class="muted">Idle</span>`}${p.garrison ? ` · <span class="tag warn">On guard</span>` : ""}</div>
      <div class="small favour">${FAVOUR} ${fmt(p.donated)} given to the city</div></div></div>
      <div class="levels">${levels}</div>
      <p><button class="btn sm" data-nav="character:${esc(p.id)}">Character sheet</button></p></div>`;
  }).join("")}</div>`;
}

// --- character sheet -----------------------------------------------------

const SLOT_NAMES = { weapon: "Weapon", shield: "Shield", helmet: "Helmet", body: "Body", legs: "Legs" };

function characterSheet(uid) {
  const mine = uid === S.uid;
  const p = mine ? { ...S.players.find((x) => x.id === uid), ...S.me } : S.players.find((x) => x.id === uid);
  if (!p) return `<p class="muted">No such adventurer.</p>`;
  const cls = C.classes[p.cls];
  const skills = C.skills.filter((s) => !s.class || s.class === p.cls);
  const total = skills.reduce((sum, s) => sum + p.levels[s.id], 0);
  const days = Math.max(1, Math.ceil((serverNow() - p.joined) / 86400));
  const guard = Math.round(p.power * (p.cls === "warrior" ? 1.5 : 1));

  const gearSlot = (slot, label, empty) => {
    const id = p.equip[slot];
    const it = id && item(id);
    const stat = !it ? "" : it.tool ? `${Math.round(it.speed * 100)}% faster`
      : [it.power && `+${it.power} power`, it.armour && `+${it.armour} armour`].filter(Boolean).join(", ");
    return `<div class="sheet-slot ${id ? "" : "empty"}">
      <div class="k">${label}</div>
      ${id ? `<div class="sheet-item"><span class="ico">${it.icon}</span><span><b>${esc(it.name)}</b><span class="muted small">${stat}</span></span>
        ${mine ? `<button class="btn sm" data-unequip="${slot}" title="Back to the bank">✕</button>` : ""}</div>`
      : `<div class="muted small">${empty}</div>`}
    </div>`;
  };

  const skillRows = skills.map((s) => {
    const level = p.levels[s.id], xp = p.xp[s.id] || 0;
    const floor = C.xp_table[level], ceil = C.xp_table[level + 1];
    const pct = ceil ? (xp - floor) / (ceil - floor) * 100 : 100;
    const tool = p.equip[`tool_${s.id}`];
    const marks = (cls.fast.includes(s.id) ? `<span title="${cls.name}: ${Math.round((1 - C.class_speed) * 100)}% faster">${cls.icon}</span>` : "")
      + (tool ? `<span title="${esc(`${item(tool).name}: ${Math.round(item(tool).speed * 100)}% faster`)}">${item(tool).icon}</span>` : "");
    return `<${mine ? `button data-nav="skill:${s.id}"` : "div"} class="sheet-skill">
      <span class="ico">${s.icon}</span>
      <span class="grow"><span class="row1"><b>${s.name}</b><span class="marks">${marks}</span><span class="lv">${level}</span></span>
      <span class="bar xp"><span style="width:${pct}%"></span></span></span>
    </${mine ? "button" : "div"}>`;
  }).join("");

  return `
    <div class="panel sheet-head">
      <div class="big">${cls.icon}</div>
      <div class="grow">
        <h2>${esc(p.name)}</h2>
        <div class="muted">${cls.name} · total level ${total} · ${days === 1 ? "first day" : `${days} days`} in the city</div>
        <div class="small" style="margin-top:6px">${p.doing ? `${skillOf(p.skill).icon} ${esc(p.doing)}` : `<span class="muted">Idle</span>`}${p.garrison ? ` · <span class="tag warn">On guard</span>` : ""}</div>
      </div>
    </div>
    <div class="stats">
      <div class="stat"><div class="k">Health</div><div class="v">${fmt(p.hp)} <small>/ ${p.max_hp}</small></div><div class="bar hp" style="margin-top:6px"><span style="width:${p.hp / p.max_hp * 100}%"></span></div></div>
      <div class="stat"><div class="k">Combat power</div><div class="v">${p.power}</div><div class="note">${guard} in the garrison</div></div>
      ${mine ? `<div class="stat"><div class="k">Prayer points</div><div class="v">${fmt(p.pp)}</div><div class="note">${p.prayers.length ? p.prayers.map((id) => esc(C.prayers.find((x) => x.id === id).name)).join(", ") : "No prayers active"}</div></div>` : ""}
      <div class="stat"><div class="k">Armour</div><div class="v">${p.armour}</div><div class="note">${Math.round(p.reduction * 100)}% less damage</div></div>
      <div class="stat"><div class="k">Given to the city</div><div class="v favour">${fmt(p.donated)}</div><div class="note">${fmt(p.favour)} favour to spend</div></div>
      ${mine ? `<div class="stat"><div class="k">Purse</div><div class="v gold">${fmt(p.gold)}</div><div class="note">${p.slots_used} / ${p.slots} bank slots</div></div>` : ""}
    </div>
    <div class="cols">
      <div>
        <div class="panel"><h2>Class</h2>
          <p><b>${cls.icon} ${cls.name}</b></p>
          <p class="small">${esc(cls.bonus)}.</p>
          <p class="small">${esc(cls.signature)}.</p>
        </div>
        <div class="panel"><h2>Equipment</h2>
          <div class="sheet-gear">${Object.entries(SLOT_NAMES).map(([slot, label]) => gearSlot(slot, label, "Nothing")).join("")}</div>
          <h2 style="margin-top:16px">Tools</h2>
          <div class="sheet-gear">${C.skills.filter((s) => `tool_${s.id}` in p.equip).map((s) => gearSlot(`tool_${s.id}`, s.name, "No tool")).join("")}</div>
          ${mine ? `<p class="small muted">Equip gear and tools from the <button class="linkish" data-nav="bank">bank</button>.</p>` : ""}
        </div>
      </div>
      <div class="panel"><h2>Skills</h2><div class="sheet-skills">${skillRows}</div></div>
    </div>`;
}

// --- registration ---------------------------------------------------------

function register() {
  const cards = Object.entries(C.classes).map(([id, c]) => `
    <button class="class-card ${pickedClass === id ? "on" : ""}" data-class="${id}">
      <span class="ico">${c.icon}</span><span><b>${c.name}</b><p>${esc(c.bonus)}.</p><p>${esc(c.signature)}.</p></span>
    </button>`).join("");
  return `<div class="welcome">
    <h2>A new city on the frontier</h2>
    <p class="muted">You're one of a handful of adventurers settling a young city at the edge of the kingdom.
      Train your skills, supply the council, and keep the place standing when the bandits come.
      Your adventurer keeps working while you're away, for up to a day.</p>
    <div class="classes">${cards}</div>
    <form data-form="register" class="btns">
      <input type="text" data-keep="name" maxlength="20" placeholder="Your adventurer's name" style="flex:1;min-width:200px">
      <button class="btn primary" ${pickedClass ? "" : "disabled"}>Enter the city</button>
    </form>
    <p class="small muted">Every class can train every skill. Your class makes some things faster and gives you one thing only you can do.</p>
  </div>`;
}

// --- animation ------------------------------------------------------------

function animate() {
  const now = serverNow();
  const a = S?.me?.action;
  if (a) {
    const pct = Math.min(1, (now - a.start) / a.duration);
    for (const el of document.querySelectorAll("[data-progress]")) el.style.width = (pct * 100) + "%";
    if (pct >= 1 && refreshedFor !== a.start) {
      refreshedFor = a.start;
      setTimeout(refresh, 150);
    }
  }
  for (const el of document.querySelectorAll("[data-span]")) {
    const [start, end] = el.dataset.span.split(",").map(Number);
    el.style.width = Math.min(100, (now - start) / (end - start) * 100) + "%";
  }
  for (const el of document.querySelectorAll("[data-countdown]")) el.textContent = dur(Number(el.dataset.countdown) - now);
}

function loop() {
  if (S) animate();
  requestAnimationFrame(loop);
}

// --- events ---------------------------------------------------------------

document.addEventListener("click", (e) => {
  const t = e.target.closest("button, [data-menu], [data-close]");
  if (!t) return;
  const d = t.dataset;
  if (t.matches("[data-close]") || e.target === $("#modal")) { $("#modal").hidden = true; return; }
  if ("menu" in d) { setMenu(!$("#app").classList.contains("open")); return; }
  if (d.nav) {
    page = d.nav; remember("page", page); selected = null;
    history.replaceState(null, "", "#" + page);
    setMenu(false);
    render(); window.scrollTo(0, 0); return;
  }
  if (d.start) return act("/api/action", { id: d.start });
  if (d.once) return act("/api/action", { id: d.once, once: true });
  if ("stop" in d) return act("/api/stop", {});
  if ("select" in d) {
    selected = d.select || null;
    render();
    // On a phone the item panel sits under the bank grid: bring it into view.
    if (selected && matchMedia("(max-width: 900px)").matches) $(".item-panel")?.scrollIntoView({ behavior: "smooth", block: "start" });
    return;
  }
  const qty = d.qty === "all" ? "all" : Number(d.qty);
  if (d.donate) return act("/api/donate", { item: d.donate, qty });
  if (d.sell) return act("/api/sell", { item: d.sell, qty });
  if (d.give) return act("/api/give", { item: d.give, qty, to: $("[data-keep=give-to]").value });
  if (d.equip) return act("/api/equip", { item: d.equip });
  if (d.unequip) return act("/api/equip", { slot: d.unequip });
  if (d.fund) return act("/api/fund", { building: d.fund, item: d.item, source: d.source, qty: "all" });
  if (d.install) return act("/api/install", { fitting: d.install, source: d.source });
  if (d.garrison) return act("/api/garrison", { join: d.garrison === "1" });
  if (d.perk) return act("/api/perk", { perk: d.perk });
  if (d.favour) return act("/api/favour", { kind: d.favour });
  if (d.food) return act("/api/food", { item: d.food });
  if (d.potion) return act("/api/potion", { item: d.potion });
  if (d.unpost) {
    if (!confirm("Delete this message?")) return;
    return act("/api/board/delete", { id: Number(d.unpost) });
  }
  if (d.aid) return act("/api/aid", { kind: d.aid, item: d.item, source: d.source });
  if ("hire" in d) return act("/api/hire", {});
  if (d.devHappen) return act("/api/dev/happen", { track: d.devHappen });
  if (d.pray) {
    const on = S.me.prayers.includes(d.pray);
    if (!on && S.me.prayers.length >= C.max_prayers) return toast(`Only ${C.max_prayers} prayers at once: turn one off first`, "bad");
    return act("/api/prayers", { ids: on ? S.me.prayers.filter((x) => x !== d.pray) : [...S.me.prayers, d.pray] });
  }
  if (d.overflow) return act("/api/settings", { overflow: d.overflow });
  if (d.class) { pickedClass = d.class; render(); return; }
  if (d.tab) { tabs[d.tab] = d.group; remember(`tab.${d.tab}`, d.group); render(); return; }
  if (d.devAdvance) return act("/api/dev/advance", { hours: Number(d.devAdvance) });
  if ("devEvent" in d) return act("/api/dev/event", {});
});

document.addEventListener("change", (e) => {
  if (e.target.matches("[data-food-pick]")) act("/api/food", { item: e.target.value || null });
});

$("#modal").addEventListener("click", (e) => { if (e.target.id === "modal") e.target.hidden = true; });

document.addEventListener("submit", async (e) => {
  const form = e.target.closest("[data-form]");
  if (!form) return;
  e.preventDefault();
  const field = form.querySelector("[data-keep]");
  const value = field.value.trim();
  if (form.dataset.form === "register") {
    if (!pickedClass) return toast("Pick a class first", "bad");
    return act("/api/register", { name: value, cls: pickedClass });
  }
  if (form.dataset.form === "board") {
    if (!value) return;
    field.value = "";
    return act("/api/board", { text: value });
  }
  if (form.dataset.form === "gold") {
    field.value = "";
    return act("/api/donate", { item: "gold", qty: Number(value) });
  }
  if (form.dataset.form === "dev-user" && value) {
    document.cookie = `gh_user=${encodeURIComponent(value)}; path=/; SameSite=Lax`;
    field.value = "";
    return refresh();
  }
});

document.addEventListener("visibilitychange", () => { if (!document.hidden) refresh(); });

// --- swipe the menu open and shut (phones) --------------------------------
// A mostly-sideways swipe drags the drawer with the finger; letting go snaps
// it open or shut by distance or speed. Vertical scrolling is left alone.
// Move and end listeners go on the touched element itself: touch events keep
// going to it even if a re-render detaches it mid-swipe, and then they no
// longer bubble up to the document.

(function swipeMenu() {
  const phone = matchMedia("(max-width: 900px)");
  let drag = null;

  const reset = () => {
    $("#side").style.transform = $("#side").style.transition = "";
    $("#scrim").style.opacity = "";
    $("#app").classList.remove("dragging");
  };

  document.addEventListener("touchstart", (e) => {
    if (drag) release();
    if (!phone.matches || e.touches.length !== 1 || !$("#modal").hidden || e.target.closest("input, textarea, select")) return;
    const t = e.touches[0];
    drag = { x: t.clientX, y: t.clientY, at: e.timeStamp, open: $("#app").classList.contains("open"), axis: null, dx: 0, target: e.target };
    drag.target.addEventListener("touchmove", move, { passive: false });
    drag.target.addEventListener("touchend", finish);
    drag.target.addEventListener("touchcancel", finish);
  }, { passive: true });

  function release() {
    drag.target.removeEventListener("touchmove", move);
    drag.target.removeEventListener("touchend", finish);
    drag.target.removeEventListener("touchcancel", finish);
    if (drag.axis === "x") reset();
    drag = null;
  }

  function move(e) {
    if (!drag) return;
    const t = e.touches[0];
    const dx = t.clientX - drag.x, dy = t.clientY - drag.y;
    if (!drag.axis) {
      if (Math.hypot(dx, dy) < 10) return;
      const sideways = Math.abs(dx) > Math.abs(dy) * 1.3 && (drag.open ? dx < 0 : dx > 0);
      drag.axis = sideways ? "x" : "y";
      if (!sideways) return;
      drag.width = $("#side").offsetWidth;
      $("#side").style.transition = "none";
      $("#app").classList.add("dragging");
    }
    if (drag.axis !== "x") return;
    e.preventDefault();
    drag.dx = dx;
    // 0 is fully open, -width fully shut.
    const offset = Math.max(-drag.width, Math.min(0, drag.open ? dx : dx - drag.width));
    $("#side").style.transform = `translateX(${offset}px)`;
    $("#scrim").style.opacity = String(1 + offset / drag.width);
  }

  function finish(e) {
    if (!drag) return;
    const swiped = drag.axis === "x";
    const speed = drag.dx / Math.max(1, e.timeStamp - drag.at);  // px per ms
    const open = drag.open
      ? !(drag.dx < -drag.width * 0.35 || speed < -0.4)
      : drag.dx > drag.width * 0.35 || speed > 0.4;
    // Hand back to the stylesheet; its transition carries on from here.
    release();
    if (swiped) setMenu(open);
  }
})();

(async function boot() {
  try {
    C = iconise(await api("/api/content"));
    await refresh();
  } catch (err) {
    $("#main").innerHTML = `<p class="loading">Couldn't reach the city: ${esc(err.message)}</p>`;
    return;
  }
  setInterval(() => { if (!document.hidden) refresh(); }, POLL_MS);
  requestAnimationFrame(loop);
})();