Guildhall alpha: co-op idle game

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

static/app.js

@@ -0,0 +1,643 @@
+"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
+let refreshing = false;
+let refreshedFor = null; // action start a completion refresh was sent for
+
+const $ = (sel, root = document) => root.querySelector(sel);
+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"));
+  } catch (err) {
+    toast(err.message, "bad");
+  } finally {
+    refreshing = false;
+  }
+}
+
+function accept(state) {
+  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" });
+}
+
+function ago(t) {
+  const s = serverNow() - t;
+  if (s < 60) return "just now";
+  return dur(s) + " ago";
+}
+
+// --- 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);
+  while ($("#toasts").children.length > 5) $("#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).icon} ${item(id).name}`);
+  if (sum.gold) got.push(`+${fmt(sum.gold)} gold`);
+  if (got.length) toast(got.join("  ·  "), "good");
+  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`);
+  for (const [skill, level] of sum.levels) toast(`🎉 ${skillOf(skill).name} level ${level}!`, "level");
+  if (sum.stopped) toast(`Stopped: ${sum.stopped}`, "bad");
+}
+
+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("");
+  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>
+    ${items ? `<ul>${items}</ul>` : ""}
+    ${sum.gold ? `<p class="gold">+${fmt(sum.gold)} gold</p>` : ""}
+    ${xp ? `<ul>${xp}</ul>` : ""}
+    ${levels ? `<ul>${levels}</ul>` : ""}
+    ${spilled ? `<p class="muted small">Your bank was full, so this went to the city stockpile (you earned favour for it):</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;
+
+  $("#side").innerHTML = S.me ? sidebar() : `<div class="brand"><img src="/static/icon.svg" alt="">Guildhall <small>alpha</small></div>${S.dev ? devbar() : ""}`;
+  $("#top").innerHTML = topbar();
+  $("#main").innerHTML = 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();
+}
+
+function nav(id, icon, label, meta = "", extra = "") {
+  return `<button class="nav ${page === id ? "on" : ""}" data-nav="${id}"><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}</div>
+      <div class="purse"><span class="gold" title="Gold">🪙 ${fmt(me.gold)}</span><span class="favour" title="Favour">✨ ${fmt(me.favour)}</span></div>
+    </div>
+    <div class="navhead">City</div>
+    ${nav("town", "🏘️", "Town square", `${S.city.population}`)}
+    ${nav("council", "📜", "Council & threats", "", raid ? `<span class="alert"></span>` : "")}
+    ${nav("board", "💬", "Town board")}
+    ${nav("roster", "👥", "Guild roster", `${S.players.length}`)}
+    <div class="navhead">You</div>
+    ${nav("bank", "🏦", "Bank", `${Object.keys(me.bank).length}/${me.slots}`)}`;
+  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() : "");
+}
+
+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>Event now</button>
+    </div></div>`;
+}
+
+const TITLES = { town: "Town square", council: "Council & threats", board: "Town board", roster: "Guild roster", bank: "Bank" };
+
+function topbar() {
+  let title = TITLES[page] || "Guildhall";
+  if (page.startsWith("skill:")) title = skillOf(page.slice(6))?.name || title;
+  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>`;
+  }
+  if (S.upcoming) chips += `<button class="chip ${S.upcoming.kind === "raid" ? "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: "⚔️", merchant: "🐪", refugees: "🧳" }[kind] || "❗";
+}
+
+function eventWhen(ev, short = false) {
+  const now = serverNow();
+  if (ev.exact) return short ? `in ${dur(ev.exact - now)}` : `${clock(ev.exact)} (in ${dur(ev.exact - now)})`;
+  if (short) return `in ${dur(ev.earliest - now)}–${dur(ev.latest - now)}`;
+  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";
+  }
+  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)}">${item(id).icon} ${fmt(qty)}${have !== undefined ? ` <span class="have">/ ${fmt(have)}</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 === "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 += `<div class="grid">${C.actions.filter((a) => a.skill === id).map(actionCard).join("")}</div>`;
+  return html;
+}
+
+function combatPanel() {
+  const me = S.me;
+  const slot = (name, label) => {
+    const id = me.equip[name];
+    return `<div class="item-chip">${id ? `${item(id).icon} ${esc(item(id).name)} (+${item(id).power}) <button class="btn sm" data-unequip="${name}">Unequip</button>` : `<span class="muted">No ${label}</span>`}</div>`;
+  };
+  return `<div class="panel"><h2>Equipment</h2>
+    <div class="btns">${slot("weapon", "weapon")} ${slot("shield", "shield")}</div>
+    <p class="small muted">Combat power ${me.power} = combat level + gear${me.cls === "warrior" ? ". As a warrior you count for ×1.5 in the garrison" : ""}. Equip swords and shields from the bank.</p></div>`;
+}
+
+function actionCard(a) {
+  const me = S.me;
+  const active = me.action?.id === a.id;
+  const why = me.blocked[a.id];
+  const locked = why && (why.startsWith("Needs") || why.startsWith("Only"));
+  const out = Object.keys(a.outputs)[0];
+  const icon = out ? item(out).icon : skillOf(a.skill).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("") + `<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>${a.gold ? ` · ${a.gold} gold` : ""}</div>`;
+    if (a.drops) io += a.drops.map(([id, q, odds]) => `<span class="item-chip" title="${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>`;
+  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>` : ""}
+      <div class="foot">
+        <span class="why">${!active && why ? esc(why) : ""}</span>
+        ${active ? `<button class="btn danger" data-stop>Stop</button>` : `<button class="btn primary" data-start="${a.id}" ${why ? "disabled" : ""}>Start</button>`}
+      </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;
+  let slots = entries.map(([id, q]) => `
+    <button class="slot ${selected === id ? "on" : ""}" data-select="${id}" title="${esc(item(id).name)}">
+      <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 = entries.length; i < me.slots; i++) slots += `<div class="slot empty"></div>`;
+  return `
+    <div class="bank-wrap">
+      <div>
+        <div class="panel">
+          <h2>Bank · ${entries.length} / ${me.slots} slots · up to ${fmt(me.stack)} each</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 still earns favour.</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 ? `<div class="row"><button class="btn gold" data-equip="${id}">Equip ${it.slot} (+${it.power} power)</button></div>` : ""}
+    ${it.food ? `<div class="row small muted">Feeds ${it.food} townsfolk for two days in the city granary.</div>` : ""}
+    <div class="row"><div class="k">Donate to the city · +${it.value} favour each</div><div class="btns">${qtyBtns("data-donate")}</div></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 goldPanel() {
+  return `<div class="panel"><h2>Gold</h2>
+    <p class="gold">🪙 ${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">✨ ${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">More perks to come. The council remembers who helped.</p></div>`;
+}
+
+// --- town -----------------------------------------------------------------
+
+function town() {
+  const city = S.city;
+  let html = `<div class="stats">
+    <div class="stat"><div class="k">Day</div><div class="v">${city.day}</div></div>
+    <div class="stat"><div class="k">Population</div><div class="v">${city.population} <small>/ ${city.housing} homes</small></div></div>
+    <div class="stat"><div class="k">Treasury</div><div class="v gold">${fmt(city.treasury)}</div></div>
+    <div class="stat"><div class="k">Defence</div><div class="v">${fmt(city.defence.total)}</div></div>
+    <div class="stat"><div class="k">Raids repelled</div><div class="v">${city.repelled}</div></div>
+  </div>`;
+  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 ${dur(city.merchant_until - serverNow())}.</div></div>`;
+  const work = city.construction;
+  if (work) {
+    const spec = C.buildings[work.building];
+    html += `<div class="banner">🏗️<div class="grow"><b>${work.repair ? "Repairing" : "Building"} ${esc(spec.name)}</b> · done in <span data-countdown="${work.done_at}">${dur(work.done_at - serverNow())}</span>
+      <div class="bar gold" style="margin-top:6px"><span data-span="${work.start},${work.done_at}"></span></div></div></div>`;
+  }
+  html += `<div class="section-title">Buildings</div><div class="grid wide">`;
+  for (const [key, b] of Object.entries(city.buildings)) {
+    const spec = C.buildings[key];
+    const cost = b.cost ? Object.entries(b.cost).map(([id, q]) => id === "gold"
+      ? `<span class="item-chip ${city.treasury < q ? "short" : ""}">🪙 ${fmt(q)} <span class="have">/ ${fmt(city.treasury)}</span></span>`
+      : itemChip(id, q, city.stockpile[id] || 0)).join("") : "";
+    const label = b.damaged ? "Repair" : `Build level ${b.level + 1}`;
+    html += `<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">${b.level} / ${spec.max}</span> ${b.damaged ? `<span class="tag bad">Damaged</span>` : ""}</div>
+        <div class="sub">${esc(spec.effect)}</div>
+      </div></div>
+      ${b.cost ? `<div class="cost">${cost}</div>
+        <div class="foot"><span class="why">${work ? "Builders busy" : ""}</span>
+        <button class="btn ${b.damaged ? "danger" : "primary"}" data-build="${key}" ${b.missing.length || work ? "disabled" : ""}>${label}</button></div>`
+      : `<div class="tag good">Fully built</div>`}
+    </div>`;
+  }
+  html += `</div><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. Donate from your bank.</p>`;
+  html += `<p class="small muted">Anyone can start a building once the stockpile and treasury cover it. Until then, the stockpile is what raiders come for.</p></div>`;
+  return html;
+}
+
+// --- 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 {
+    html += `<div class="panel ${ev.kind === "raid" ? "threat-card" : ""}">
+      <h2>${eventIcon(ev.kind)} ${ev.kind === "raid" ? "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 (ev.kind === "raid") {
+      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>`;
+    if (ev.kind === "raid") 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 win = h.kind !== "raid" || h.report.title.startsWith("Victory");
+    html += `<div class="report ${h.kind === "raid" ? (win ? "win" : "loss") : ""}">
+      <b>${eventIcon(h.kind)} ${esc(h.report.title)}</b> <span class="muted small">${ago(h.at)}</span>
+      ${h.kind === "raid" ? `<p class="muted">Defence ${fmt(h.report.defence)} vs 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 raidPrep(ev) {
+  const city = S.city, me = S.me, d = city.defence;
+  const names = { 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>${r.item === "bread" ? "Food (any)" : esc(item(r.item).name)} <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. 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><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>${s.icon} <span>${s.name}</span> ${p.levels[s.id]}</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">✨ ${fmt(p.donated)} given to the city</div></div></div>
+      <div class="levels">${levels}</div></div>`;
+  }).join("")}</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) { $("#app").classList.toggle("open"); return; }
+  if (d.nav) {
+    page = d.nav; remember("page", page); selected = null;
+    history.replaceState(null, "", "#" + page);
+    $("#app").classList.remove("open");
+    render(); window.scrollTo(0, 0); return;
+  }
+  if (d.start) return act("/api/action", { id: d.start });
+  if ("stop" in d) return act("/api/stop", {});
+  if ("select" in d) { selected = d.select || null; render(); 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.build) return act("/api/build", { building: d.build });
+  if (d.garrison) return act("/api/garrison", { join: d.garrison === "1" });
+  if (d.perk) return act("/api/perk", { perk: d.perk });
+  if (d.overflow) return act("/api/settings", { overflow: d.overflow });
+  if (d.class) { pickedClass = d.class; render(); return; }
+  if (d.devAdvance) return act("/api/dev/advance", { hours: Number(d.devAdvance) });
+  if ("devEvent" in d) return act("/api/dev/event", {});
+});
+
+$("#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(); });
+
+(async function boot() {
+  try {
+    C = 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);
+})();

static/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#14161d"/><path d="M14 52V26l6-4v-8h6v5l6-5 6 5v-5h6v8l6 4v26z" fill="#e0b04a"/><path d="M28 52V40a4 4 0 0 1 8 0v12z" fill="#14161d"/></svg>

static/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#14161d">
+  <title>Guildhall</title>
+  <link rel="icon" href="/static/icon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+  <div id="app">
+    <aside id="side"></aside>
+    <div id="scrim" data-menu></div>
+    <div id="body">
+      <header id="top"></header>
+      <main id="main"><p class="loading">Opening the city gates…</p></main>
+    </div>
+  </div>
+  <div id="toasts" aria-live="polite"></div>
+  <div id="modal" hidden></div>
+  <script src="/static/app.js"></script>
+</body>
+</html>

static/styles.css

@@ -0,0 +1,305 @@
+:root {
+  --bg: #14161d;
+  --side: #1a1d26;
+  --panel: #212532;
+  --panel-2: #292e3d;
+  --line: #353b4d;
+  --text: #e7e9f0;
+  --muted: #98a1b4;
+  --gold: #e0b04a;
+  --xp: #4fa3e0;
+  --good: #5cbf6a;
+  --bad: #e2645c;
+  --warn: #e3a043;
+  --favour: #b98ce8;
+  --radius: 10px;
+  color-scheme: dark;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; height: 100%; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+button, input, textarea, select { font: inherit; color: inherit; }
+button { cursor: pointer; }
+a { color: var(--xp); }
+
+#app { display: flex; min-height: 100vh; }
+
+/* --- sidebar ---------------------------------------------------------- */
+
+#side {
+  width: 260px;
+  flex: none;
+  background: var(--side);
+  border-right: 1px solid var(--line);
+  height: 100vh;
+  position: sticky;
+  top: 0;
+  overflow-y: auto;
+  padding-bottom: 24px;
+}
+.brand {
+  display: flex; align-items: center; gap: 10px;
+  padding: 16px 18px 12px;
+  font-weight: 700; font-size: 19px; letter-spacing: .02em;
+}
+.brand img { width: 28px; height: 28px; }
+.brand small {
+  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
+  color: var(--bg); background: var(--gold); border-radius: 4px; padding: 1px 6px;
+}
+.me {
+  margin: 0 12px 8px; padding: 10px 12px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
+}
+.me .who { font-weight: 600; }
+.me .cls { color: var(--muted); font-size: 13px; }
+.purse { display: flex; gap: 14px; margin-top: 6px; font-size: 14px; }
+.gold { color: var(--gold); }
+.favour { color: var(--favour); }
+
+.navhead {
+  padding: 14px 18px 4px;
+  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
+  color: var(--muted);
+}
+.nav {
+  display: flex; align-items: center; gap: 10px; width: 100%;
+  padding: 7px 18px; border: 0; background: none; text-align: left;
+  border-left: 3px solid transparent;
+}
+.nav:hover { background: var(--panel); }
+.nav.on { background: var(--panel-2); border-left-color: var(--gold); }
+.nav .ic { width: 22px; text-align: center; font-size: 17px; }
+.nav .label { flex: 1; }
+.nav .meta { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
+.nav .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); }
+.nav .alert { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
+
+.devbar {
+  margin: 18px 12px 0; padding: 10px 12px; border: 1px dashed var(--warn); border-radius: var(--radius);
+  font-size: 13px; color: var(--muted);
+}
+.devbar b { color: var(--warn); }
+.devbar form { display: flex; gap: 6px; margin: 6px 0; }
+.devbar input { width: 100%; }
+.devbar .row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+
+/* --- top bar ---------------------------------------------------------- */
+
+#body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+#top {
+  position: sticky; top: 0; z-index: 5;
+  display: flex; align-items: center; gap: 12px;
+  padding: 10px 24px; min-height: 56px;
+  background: rgba(20, 22, 29, .92); backdrop-filter: blur(6px);
+  border-bottom: 1px solid var(--line);
+}
+#top h1 { font-size: 18px; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.menu-btn { display: none; background: none; border: 0; font-size: 22px; padding: 0 4px; }
+.chip {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
+  background: var(--panel); font-size: 13.5px; white-space: nowrap;
+}
+.chip.threat { border-color: rgba(226, 100, 92, .5); }
+.chip .mini { width: 70px; }
+
+main { padding: 24px; max-width: 1200px; width: 100%; }
+.loading { color: var(--muted); }
+
+/* --- panels ----------------------------------------------------------- */
+
+.panel {
+  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
+  padding: 16px 18px; margin-bottom: 18px;
+}
+.panel > h2, .section-title {
+  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
+  color: var(--muted); margin: 0 0 12px;
+}
+.section-title { margin: 26px 0 12px; }
+.muted { color: var(--muted); }
+.small { font-size: 13px; }
+.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
+.grid.wide { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
+.cols { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
+.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 18px; }
+.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
+.stat .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
+.stat .v { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
+.stat .v small { font-size: 13px; color: var(--muted); font-weight: 400; }
+
+.bar { height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; }
+.bar > span { display: block; height: 100%; background: var(--good); border-radius: 99px; width: 0; }
+.bar.xp > span { background: var(--xp); }
+.bar.gold > span { background: var(--gold); }
+.bar.thick { height: 12px; }
+
+.btn {
+  border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px;
+  padding: 7px 14px; font-weight: 600; font-size: 14px;
+}
+.btn:hover:not(:disabled) { border-color: var(--muted); }
+.btn:disabled { opacity: .45; cursor: not-allowed; }
+.btn.primary { background: #2f6b3a; border-color: #3f8a4c; }
+.btn.danger { background: #6b2f2f; border-color: #8a3f3f; }
+.btn.gold { background: #6b5320; border-color: #8f6f2a; }
+.btn.sm { padding: 3px 9px; font-size: 13px; }
+.btns { display: flex; flex-wrap: wrap; gap: 6px; }
+
+input[type=text], input[type=number], textarea {
+  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
+}
+textarea { width: 100%; resize: vertical; min-height: 60px; }
+
+.tag {
+  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 99px;
+  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
+}
+.tag.good { color: var(--good); border-color: rgba(92, 191, 106, .4); }
+.tag.bad { color: var(--bad); border-color: rgba(226, 100, 92, .4); }
+.tag.warn { color: var(--warn); border-color: rgba(227, 160, 67, .4); }
+.tag.gold { color: var(--gold); border-color: rgba(224, 176, 74, .4); }
+
+/* --- skill page ------------------------------------------------------- */
+
+.skill-head { display: flex; gap: 16px; align-items: center; }
+.skill-head .big { font-size: 42px; width: 64px; height: 64px; display: grid; place-items: center;
+  background: var(--panel-2); border-radius: 14px; flex: none; }
+.skill-head .info { flex: 1; min-width: 0; }
+.skill-head h2 { margin: 0; font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--text); }
+.skill-head .lv { font-variant-numeric: tabular-nums; color: var(--muted); margin: 2px 0 8px; }
+
+.action {
+  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
+  padding: 14px; display: flex; flex-direction: column; gap: 10px;
+}
+.action.active { border-color: var(--good); box-shadow: 0 0 0 1px var(--good) inset; }
+.action.locked { opacity: .55; }
+.action .top { display: flex; gap: 12px; align-items: center; }
+.action .ico { font-size: 30px; width: 46px; height: 46px; display: grid; place-items: center;
+  background: var(--panel-2); border-radius: 10px; flex: none; }
+.action .name { font-weight: 650; }
+.action .sub { font-size: 13px; color: var(--muted); }
+.io { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
+.io .arrow { color: var(--muted); }
+.item-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--panel-2); }
+.item-chip.short { color: var(--bad); }
+.action .why { font-size: 13px; color: var(--warn); }
+.action .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
+
+/* --- bank ------------------------------------------------------------- */
+
+.bank-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
+.slots { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
+.slot {
+  aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2);
+  display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;
+  font-size: 30px; padding: 0;
+}
+.slot.empty { background: transparent; border-style: dashed; cursor: default; }
+.slot.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
+.slot .qty { position: absolute; left: 6px; top: 4px; font-size: 12px; font-weight: 700; }
+.slot .qty.full { color: var(--warn); }
+.slot .nm { font-size: 10.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
+.item-panel h3 { margin: 0; font-size: 18px; }
+.item-panel .ico { font-size: 40px; }
+.item-panel .row { margin-top: 12px; }
+.item-panel .row .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
+
+/* --- city ------------------------------------------------------------- */
+
+.building .lv { font-variant-numeric: tabular-nums; }
+.building.damaged { border-color: rgba(226, 100, 92, .6); }
+.cost { display: flex; flex-wrap: wrap; gap: 6px; }
+.cost .item-chip .have { color: var(--muted); }
+.banner {
+  display: flex; gap: 14px; align-items: center; padding: 12px 16px; margin-bottom: 18px;
+  border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-2);
+}
+.banner.bad { border-color: rgba(226, 100, 92, .6); background: rgba(226, 100, 92, .08); }
+.banner .grow { flex: 1; }
+.stock { display: flex; flex-wrap: wrap; gap: 6px; }
+
+.threat-card { border-color: rgba(226, 100, 92, .5); }
+.threat-card .headline { font-size: 18px; font-weight: 650; margin: 2px 0 6px; }
+.pips { display: inline-flex; gap: 4px; vertical-align: middle; }
+.pips i { width: 10px; height: 10px; border-radius: 2px; background: var(--line); }
+.pips i.on { background: var(--xp); }
+.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 14px; }
+.kv .k { color: var(--muted); }
+.vs { display: flex; gap: 12px; align-items: center; margin: 12px 0 4px; }
+.vs .side { flex: 1; text-align: center; padding: 10px; border-radius: 8px; background: var(--panel-2); }
+.vs .side b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
+.req { display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 10px; align-items: center; margin-bottom: 10px; }
+.req .bar { grid-column: 2 / 4; }
+table.parts { width: 100%; border-collapse: collapse; font-size: 14px; }
+table.parts td { padding: 4px 0; border-bottom: 1px solid var(--line); }
+table.parts td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
+.report { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; margin-bottom: 14px; }
+.report.win { border-left-color: var(--good); }
+.report.loss { border-left-color: var(--bad); }
+.report p { margin: 2px 0; font-size: 14px; }
+
+/* --- board, ledger, roster ------------------------------------------- */
+
+.msgs { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; margin-bottom: 12px; }
+.msg .who { font-weight: 600; }
+.msg .when { color: var(--muted); font-size: 12px; margin-left: 6px; }
+.msg .text { white-space: pre-wrap; overflow-wrap: anywhere; }
+.ledger { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow-y: auto; }
+.ledger li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
+.ledger .when { color: var(--muted); font-size: 12px; display: block; }
+.person .top { display: flex; gap: 12px; align-items: center; }
+.person .ico { font-size: 30px; }
+.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; font-size: 13px; margin-top: 10px; }
+.levels span { color: var(--muted); }
+
+/* --- register --------------------------------------------------------- */
+
+.welcome { max-width: 760px; }
+.welcome h2 { font-size: 26px; margin: 0 0 6px; }
+.classes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin: 16px 0; }
+.class-card {
+  text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
+  padding: 14px; display: flex; gap: 12px;
+}
+.class-card.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
+.class-card .ico { font-size: 32px; }
+.class-card p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
+
+/* --- toasts and modal ------------------------------------------------- */
+
+#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 30; }
+.toast {
+  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px;
+  font-size: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: rise .2s ease-out;
+}
+.toast.bad { border-color: var(--bad); }
+.toast.good { border-color: var(--good); }
+.toast.level { border-color: var(--gold); }
+@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
+#modal { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .6); display: grid; place-items: center; padding: 16px; }
+#modal[hidden] { display: none; }
+.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; max-width: 460px; width: 100%; max-height: 85vh; overflow-y: auto; }
+.modal-box h2 { margin: 0 0 10px; }
+.modal-box ul { padding-left: 18px; }
+
+/* --- small screens ---------------------------------------------------- */
+
+#scrim { display: none; }
+@media (max-width: 900px) {
+  #side { position: fixed; left: 0; top: 0; z-index: 20; transform: translateX(-100%); transition: transform .2s; }
+  #app.open #side { transform: none; }
+  #app.open #scrim { display: block; position: fixed; inset: 0; z-index: 15; background: rgba(0, 0, 0, .5); }
+  .menu-btn { display: block; }
+  #top { padding: 10px 16px; flex-wrap: wrap; }
+  main { padding: 16px; }
+  .cols, .bank-wrap { grid-template-columns: 1fr; }
+  .chip.act .label { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
+}