import { MAPS, MAP_LIST, TERRAIN, BUILDINGS, PERSONALITY, RESOURCES } from './data.js';
import { MAX_ACTIONS } from './game.js';

const CREST = { skull: 'skullcrest' };
const CREST_FALLBACK = 'legion';

const TERR_CN = { plains: '平原', forest: '森林', mountain: '山地', city: '城市' };
const PERS_CN = { aggressive: '侵略', defensive: '防禦', diplomatic: '外交', mercantile: '商業' };
const RES_META = {
  gold: { label: '金幣', en: 'GOLD', icon: 'gold', color: '#e3c06a' },
  food: { label: '糧食', en: 'FOOD', icon: 'food', color: '#d99668' },
  wood: { label: '木材', en: 'WOOD', icon: 'wood', color: '#b08b5c' },
  stone: { label: '石料', en: 'STONE', icon: 'stone', color: '#9aa7b4' },
};

const ico = (name, cls = '') => `<svg class="ico ${cls}" aria-hidden="true"><use href="#i-${name}"/></svg>`;
const crestSvg = (f, cls = '') => `<svg class="ico ${cls}" aria-hidden="true"><use href="#c-${CREST[f?.crest] || f?.crest || CREST_FALLBACK}"/></svg>`;
const terrSvg = (type) => `<use href="#t-${type}" x="-13.5" y="-14" width="27" height="27" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>`;
const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
const fmt = (n) => (n > 0 ? `+${n}` : `${n}`);

function costItems(cost, player) {
  return Object.entries(cost).filter(([, v]) => v > 0).map(([k, v]) => {
    const lack = player && player[k] < v;
    return `<span class="cost-item ${lack ? 'lack' : ''}">${ico(RES_META[k].icon)}${v} ${RES_META[k].label}</span>`;
  }).join('');
}

function resMini(value, key) {
  return `<span class="res-mini" style="--rc:${RES_META[key].color}">${ico(RES_META[key].icon)}${value}</span>`;
}

function edgePairs(map) {
  const seen = new Set();
  const out = [];
  for (const t of map.territories) {
    for (const a of t.adjacentTo) {
      const k = [t.id, a].sort().join('|');
      if (seen.has(k)) continue;
      seen.add(k);
      out.push([t.id, a]);
    }
  }
  return out;
}

function hash(str) {
  let h = 2166136261;
  for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619); }
  return (h >>> 0) / 4294967295;
}

function smoothClosed(points) {
  const n = points.length;
  if (!n) return '';
  let d = `M ${points[0][0].toFixed(1)} ${points[0][1].toFixed(1)}`;
  for (let i = 0; i < n; i++) {
    const p0 = points[(i - 1 + n) % n], p1 = points[i], p2 = points[(i + 1) % n], p3 = points[(i + 2) % n];
    const c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
    const c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
    d += ` C ${c1x.toFixed(1)} ${c1y.toFixed(1)}, ${c2x.toFixed(1)} ${c2y.toFixed(1)}, ${p2[0].toFixed(1)} ${p2[1].toFixed(1)}`;
  }
  return d + ' Z';
}

function convexHull(pts) {
  const p = pts.slice().sort((a, b) => a[0] - b[0] || a[1] - b[1]);
  if (p.length < 3) return p;
  const cross = (o, a, b) => (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
  const lower = [];
  for (const pt of p) {
    while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], pt) <= 0) lower.pop();
    lower.push(pt);
  }
  const upper = [];
  for (let i = p.length - 1; i >= 0; i--) {
    const pt = p[i];
    while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], pt) <= 0) upper.pop();
    upper.push(pt);
  }
  upper.pop(); lower.pop();
  return lower.concat(upper);
}

function roughPath(cx, cy, rx, ry, seed, points = 13) {
  const pts = [];
  for (let i = 0; i < points; i++) {
    const a = (i / points) * Math.PI * 2;
    const r = 0.88 + 0.18 * hash(`${seed}-${i}`);
    pts.push([cx + Math.cos(a) * rx * r, cy + Math.sin(a) * ry * r]);
  }
  return smoothClosed(pts);
}

export class UI {
  constructor(game) {
    this.game = game;
    this.screen = 'menu';
    this.selectedTid = null;
    this.orderMode = null;
    this.tradeTarget = null;
    this.selectedMap = 'mainland';
    this.selectedFaction = 'iron_legion';
    this.pendingGameOver = false;
    this._lastRes = null;
    this._escHandler = null;
  }

  // ── boot ──────────────────────────────────────────────────────────────────
  init() {
    this.bind();
    this.renderSetup();
    this.refreshMenu();
    this.spawnEmbers();
    this.game.on((state, type, payload) => this.onChange(type, payload));
  }

  showScreen(name) {
    for (const el of document.querySelectorAll('.screen')) el.classList.remove('active');
    const el = document.getElementById(`screen-${name}`);
    if (el) el.classList.add('active');
    this.screen = name;
    if (name === 'menu') this.refreshMenu();
    if (name === 'setup') this.renderSetup();
  }

  refreshMenu() {
    const cont = document.getElementById('btn-continue');
    if (cont) cont.classList.toggle('hidden', !this.game.hasSave());
  }

  spawnEmbers() {
    const box = document.querySelector('.menu-embers');
    if (!box || box.dataset.ready) return;
    box.dataset.ready = '1';
    for (let i = 0; i < 22; i++) {
      const s = document.createElement('span');
      s.className = 'ember';
      s.style.left = `${Math.random() * 100}%`;
      s.style.animationDuration = `${9 + Math.random() * 14}s`;
      s.style.animationDelay = `${Math.random() * 16}s`;
      s.style.opacity = (0.2 + Math.random() * 0.7).toFixed(2);
      s.style.transform = `scale(${(0.5 + Math.random()).toFixed(2)})`;
      box.appendChild(s);
    }
  }

  // ── events ────────────────────────────────────────────────────────────────
  bind() {
    const on = (sel, ev, fn) => {
      const el = typeof sel === 'string' ? document.querySelector(sel) : sel;
      if (el) el.addEventListener(ev, fn);
    };

    on('#btn-new', 'click', () => { this.showScreen('setup'); });
    on('#btn-help', 'click', () => this.openHelp());
    on('#btn-continue', 'click', () => this.continueGame());
    on('#btn-setup-back', 'click', () => this.showScreen('menu'));

    on('#map-options', 'click', (e) => {
      const card = e.target.closest('[data-map]');
      if (!card) return;
      this.selectedMap = card.dataset.map;
      const map = MAPS[this.selectedMap];
      if (!map.factions.some((f) => f.id === this.selectedFaction)) this.selectedFaction = map.factions[0].id;
      this.renderSetup();
    });
    on('#faction-options', 'click', (e) => {
      const card = e.target.closest('[data-faction]');
      if (!card) return;
      this.selectedFaction = card.dataset.faction;
      this.renderSetup();
    });
    on('#in-leader', 'input', () => this.updateSummary());
    on('#in-nation', 'input', () => this.updateSummary());
    on('#in-slogan', 'input', () => this.updateSummary());
    on('#btn-begin', 'click', () => this.beginGame());

    on('#btn-end-turn', 'click', () => this.endTurn());
    on('#btn-save', 'click', () => { this.game.save(); this.toast('進度已保存至本機', 'good', 'save'); });
    on('#btn-game-menu', 'click', () => this.confirmMenu());

    document.addEventListener('click', (e) => {
      const opener = e.target.closest('[data-open]');
      if (opener) {
        const what = opener.dataset.open;
        if (what === 'help') this.openHelp();
        if (what === 'chronicle') this.openChronicle();
        if (what === 'diplomacy') this.openDiplomacy();
      }
    });

    on('#map-stage', 'click', (e) => {
      if (e.target.closest('.map-tooltip')) return;
      const g = e.target.closest('.terr');
      if (g) this.handleTerritoryClick(g.dataset.id);
    });
    on('#map-stage', 'mousemove', (e) => this.handleMapHover(e));
    on('#map-stage', 'mouseleave', () => this.hideTooltip());
    on('#map-stage', 'keydown', (e) => {
      if (e.key !== 'Enter' && e.key !== ' ') return;
      const g = e.target.closest('.terr');
      if (g) { e.preventDefault(); this.handleTerritoryClick(g.dataset.id); }
    });
    on('#chronicle-peek', 'click', () => this.openChronicle());
  }

  onChange(type) {
    if (type === 'new') { this.selectedTid = null; this.orderMode = null; }
    if (type === 'load') { this.selectedTid = null; this.orderMode = null; }
    if (this.screen === 'game') {
      this.renderAll();
      if (this.game.state.isOver) this.pendingGameOver = true;
    }
    if (this.screen === 'menu') this.refreshMenu();
  }

  // ── setup ─────────────────────────────────────────────────────────────────
  renderSetup() {
    const map = MAPS[this.selectedMap];
    const factions = map.factions;
    if (!factions.some((f) => f.id === this.selectedFaction)) this.selectedFaction = factions[0].id;

    const mapEl = document.getElementById('map-options');
    if (mapEl) {
      mapEl.innerHTML = MAP_LIST.map((m) => {
        const sel = m.id === this.selectedMap;
        return `<button class="map-card ${sel ? 'selected' : ''}" data-map="${m.id}">
          <div class="map-thumb" style="background-image:url('assets/images/map-parchment.png')">${this.miniMapSvg(m)}</div>
          <span class="map-check">${sel ? '✓' : ''}</span>
          <span class="map-info">
            <span class="map-kicker">${esc(m.kicker)}</span>
            <h3>${esc(m.name)}</h3>
            <p>${esc(m.description)}</p>
            <span class="map-meta"><span>${m.territories.length} 塊疆域</span><span>·</span><span>${m.factions.length} 個勢力</span></span>
          </span>
        </button>`;
      }).join('');
    }

    const facEl = document.getElementById('faction-options');
    if (facEl) {
      facEl.innerHTML = factions.map((f) => {
        const sel = f.id === this.selectedFaction;
        return `<button class="faction-card ${sel ? 'selected' : ''}" data-faction="${f.id}" style="--fc:${f.color}">
          <span class="fc-selected-mark">${ico('crown')}</span>
          <span class="fc-top">
            <span class="fc-crest">${crestSvg(f)}</span>
            <span style="min-width:0">
              <h3>${esc(f.name)}</h3>
              <span class="fc-personality">${PERS_CN[f.personality]}</span>
            </span>
          </span>
          <p class="fc-blurb">${esc(f.blurb)}</p>
          <span class="fc-res">
            ${resMini(f.gold, 'gold')}${resMini(f.food, 'food')}${resMini(f.wood, 'wood')}${resMini(f.stone, 'stone')}
          </span>
        </button>`;
      }).join('');
    }

    const f = factions.find((x) => x.id === this.selectedFaction) || factions[0];
    const badge = document.getElementById('identity-crest');
    if (badge) {
      badge.style.setProperty('--fc', f.color);
      badge.innerHTML = crestSvg(f);
    }
    const nation = document.getElementById('in-nation');
    if (nation) nation.placeholder = f.name;
    const leader = document.getElementById('in-leader');
    if (leader) leader.placeholder = '你的名字';
    const slogan = document.getElementById('in-slogan');
    if (slogan) slogan.placeholder = '榮耀就在前方！';
    this.updateSummary();
  }

  updateSummary() {
    const map = MAPS[this.selectedMap];
    const f = map.factions.find((x) => x.id === this.selectedFaction) || map.factions[0];
    const leader = document.getElementById('in-leader')?.value.trim() || '君主';
    const nation = document.getElementById('in-nation')?.value.trim() || f.name;
    const slogan = document.getElementById('in-slogan')?.value.trim() || '榮耀就在前方！';
    const sum = document.getElementById('setup-summary');
    if (!sum) return;
    sum.innerHTML = `
      <div class="sum-row"><span>世界</span><b class="sum-tag">${esc(map.name)}</b></div>
      <div class="sum-row"><span>勢力</span><b class="sum-tag" style="color:${f.color}">${esc(f.name)}</b></div>
      <div class="sum-row"><span>君主</span><b>${esc(leader)} · ${esc(nation)}</b></div>
      <div class="sum-row"><span>格言</span><b style="font-style:italic;color:var(--muted)">“${esc(slogan)}”</b></div>`;
    const btn = document.getElementById('btn-begin');
    if (btn) btn.disabled = !this.selectedMap || !this.selectedFaction;
  }

  beginGame() {
    const leader = document.getElementById('in-leader')?.value.trim();
    const nation = document.getElementById('in-nation')?.value.trim();
    const slogan = document.getElementById('in-slogan')?.value.trim();
    this.game.newGame({
      mapId: this.selectedMap,
      factionId: this.selectedFaction,
      identity: { leaderName: leader, nationName: nation, slogan },
    });
    this.showScreen('game');
    this.selectedTid = null;
    this.orderMode = null;
    this.renderAll();
    this.toast(`${this.game.state.identity.leaderName} 登基，${this.game.state.identity.nationName} 的旗幟升起`, 'good', 'crown');
  }

  continueGame() {
    const state = this.game.loadFromStorage();
    if (!state) { this.toast('找不到存檔', 'bad', 'help'); return; }
    this.showScreen('game');
    this.selectedTid = null;
    this.orderMode = null;
    this.renderAll();
    this.toast(`王朝延續：第 ${this.game.state.turn} 回合`, 'good', 'crown');
  }

  // ── main render ───────────────────────────────────────────────────────────
  renderAll() {
    if (!this.game.state) return;
    this.renderTopbar();
    this.renderSovereign();
    this.renderStats();
    this.renderObjective();
    this.renderRelations();
    this.renderMap();
    this.renderCouncil();
    this.renderMapFoot();
  }

  renderTopbar() {
    const { player } = this.game;
    const state = this.game.state;
    const income = this.game.income();
    const upkeep = this.game.upkeep();
    const nets = { gold: income.gold, food: income.food - upkeep.food, wood: income.wood, stone: income.stone };
    const el = document.getElementById('resource-bar');
    if (el) {
      el.innerHTML = Object.keys(RES_META).map((k) => {
        const delta = nets[k];
        const changed = this._lastRes && this._lastRes[k] !== player[k];
        return `<div class="res-chip ${changed ? 'bump' : ''}" style="--rc:${RES_META[k].color}" title="${RES_META[k].label} · 每回合 ${fmt(delta)}">
          ${ico(RES_META[k].icon)}
          <b>${player[k]}</b>
          <small>${RES_META[k].label}</small>
          <span class="delta ${delta >= 0 ? 'up' : 'down'}">${fmt(delta)}</span>
        </div>`;
      }).join('');
    }
    this._lastRes = { gold: player.gold, food: player.food, wood: player.wood, stone: player.stone };

    const turn = document.getElementById('turn-num');
    if (turn) turn.textContent = state.turn;
    const pips = document.getElementById('action-pips');
    if (pips) {
      pips.innerHTML = Array.from({ length: MAX_ACTIONS }, (_, i) =>
        `<span class="pip ${i < state.actionsLeft ? '' : 'used'}"></span>`).join('');
    }
    const end = document.getElementById('btn-end-turn');
    if (end) {
      end.disabled = state.isOver;
      end.style.animation = state.actionsLeft === 0 && !state.isOver ? 'end-pulse 2.2s ease-in-out infinite' : '';
    }
  }

  renderSovereign() {
    const f = this.game.player;
    const id = this.game.state.identity;
    const el = document.getElementById('sovereign-card');
    if (!el) return;
    el.style.setProperty('--fc', f.color);
    el.innerHTML = `
      <div class="sovereign-bg"></div>
      <div class="sovereign-body">
        <span class="sovereign-personality"><span class="chip" style="color:${f.color};border-color:${f.color}66;background:${f.color}18">${PERS_CN[f.personality]}</span></span>
        <div class="sovereign-nation"><span class="dot"></span>${esc(id.nationName)}</div>
        <div class="sovereign-name">${esc(id.leaderName)} · ${esc(f.name)}</div>
        <div class="sovereign-slogan">“${esc(id.slogan)}”</div>
      </div>`;
  }

  renderStats() {
    const g = this.game;
    const p = g.player;
    const inc = g.income();
    const up = g.upkeep();
    const total = Object.keys(g.state.territories).length;
    const el = document.getElementById('stats-panel');
    if (!el) return;
    el.innerHTML = `
      <div class="panel-head"><h3>國勢</h3><span class="chip gold">${g.state.turn} 回合</span></div>
      <div class="stat-grid">
        <div class="stat-cell"><div class="stat-k">${ico('flag')}疆域</div><div class="stat-v">${p.territories.length}<small> / ${total}</small></div></div>
        <div class="stat-cell"><div class="stat-k">${ico('army')}兵力</div><div class="stat-v">${g.factionTerritories(p.id).reduce((s, t) => s + t.armies, 0)}<small> 單位</small></div></div>
        <div class="stat-cell"><div class="stat-k">${ico('gold')}國庫</div><div class="stat-v">${p.gold}<small> 金</small></div><div class="stat-sub">${fmt(inc.gold)} 每回合</div></div>
        <div class="stat-cell"><div class="stat-k">${ico('food')}糧倉</div><div class="stat-v">${p.food}<small> 糧</small></div><div class="stat-sub">${fmt(inc.food - up.food)} 淨值</div></div>
        <div class="stat-cell wide">
          <div class="stat-k">${ico('spark')}每回合物資產出</div>
          <div class="res-row">
            <span style="color:#e3c06a">${ico('gold')}+${inc.gold}</span>
            <span style="color:#d99668">${ico('food')}+${inc.food}</span>
            <span style="color:#b08b5c">${ico('wood')}+${inc.wood}</span>
            <span style="color:#9aa7b4">${ico('stone')}+${inc.stone}</span>
            <span class="res-upkeep">維持 -${up.food} 糧</span>
          </div>
        </div>
      </div>`;
  }

  renderObjective() {
    const g = this.game;
    const total = Object.keys(g.state.territories).length;
    const owned = g.player.territories.length;
    const pct = Math.round((owned / total) * 100);
    const rivals = Object.values(g.state.factions).filter((f) => f.id !== g.player.id && f.territories.length > 0)
      .sort((a, b) => b.territories.length - a.territories.length);
    const top = rivals[0];
    const el = document.getElementById('objective-panel');
    if (!el) return;
    el.innerHTML = `
      <div class="panel-head"><h3>霸業</h3><span class="chip ${pct >= 100 ? 'good' : 'gold'}">${pct}%</span></div>
      <div class="obj-body">
        <div class="obj-bar"><div class="obj-fill" style="width:${Math.min(100, pct)}%"></div></div>
        <div class="obj-meta"><span>已征服 <b>${owned}</b> / ${total} 疆域</span><span>還差 ${Math.max(0, total - owned)}</span></div>
        <div class="obj-note">${top ? `最強對手：<strong style="color:${top.color}">${esc(top.name)}</strong>（${top.territories.length} 疆域）` : '再無對手，世界盡歸你手。'}</div>
      </div>`;
  }

  renderRelations() {
    const g = this.game;
    const el = document.getElementById('relations-list');
    if (!el) return;
    const others = Object.values(g.state.factions).filter((f) => f.id !== g.player.id)
      .sort((a, b) => b.territories.length - a.territories.length);
    el.innerHTML = others.map((f) => {
      const rel = g.relationWith(f.id);
      const status = rel?.status || 'neutral';
      const label = status === 'allied' ? '同盟' : status === 'peace' ? `停戰${rel.turnsRemaining > 0 ? ' ' + rel.turnsRemaining : ''}` : status === 'hostile' ? '敵對' : '中立';
      const dead = f.territories.length === 0;
      return `<div class="rel-row ${dead ? 'rel-dead' : ''}" style="--fc:${f.color}">
        <span class="rel-crest">${crestSvg(f)}</span>
        <span class="rel-name">${esc(f.name)}</span>
        <span class="rel-owned">${f.territories.length} 域</span>
        <span class="rel-status ${status}">${dead ? '滅亡' : label}</span>
      </div>`;
    }).join('');
  }

  renderMapFoot() {
    const g = this.game;
    const el = document.getElementById('turn-status');
    if (el) {
      el.innerHTML = g.state.actionsLeft > 0
        ? `本回合尚餘 <b>${g.state.actionsLeft}</b> 個行動`
        : '<b style="color:var(--danger)">行動已用盡</b> · 請結束回合';
    }
    const last = [...g.state.log].reverse().find((l) => l.kind !== 'story');
    const latest = document.getElementById('latest-log');
    if (latest) latest.textContent = last ? last.text : (g.state.log.at(-1)?.text || '你的故事從這裡開始……');
  }

  // ── setup mini map ────────────────────────────────────────────────────────
  miniMapSvg(map) {
    const [vx, vy, vw, vh] = map.viewBox;
    const pos = map.positions;
    const routes = edgePairs(map).map(([a, b]) => {
      const p1 = pos[a], p2 = pos[b];
      if (!p1 || !p2) return '';
      return `<line x1="${p1[0]}" y1="${p1[1]}" x2="${p2[0]}" y2="${p2[1]}" stroke="rgba(230,205,150,.32)" stroke-width="2" stroke-dasharray="6 8"/>`;
    }).join('');
    const nodes = map.territories.map((t) => {
      const p = pos[t.id];
      const f = map.factions.find((x) => x.id === t.owner);
      const c = f?.color || '#7b8494';
      if (!p) return '';
      return `<g>
        <circle cx="${p[0]}" cy="${p[1]}" r="26" fill="none" stroke="${c}" stroke-width="2" opacity=".9"/>
        <circle cx="${p[0]}" cy="${p[1]}" r="20" fill="#0d131c" stroke="${c}" stroke-width="1.2"/>
        <circle cx="${p[0]}" cy="${p[1]}" r="4" fill="${c}"/>
      </g>`;
    }).join('');
    return `<svg viewBox="${vx} ${vy} ${vw} ${vh}" preserveAspectRatio="xMidYMid meet" aria-hidden="true">${routes}${nodes}</svg>`;
  }

  // ── map ───────────────────────────────────────────────────────────────────
  renderMap() {
    const g = this.game;
    const state = g.state;
    const map = MAPS[state.mapId];
    const mapName = document.getElementById('map-name');
    if (mapName) mapName.textContent = map.name;
    const [vx, vy, vw, vh] = map.viewBox;
    const svg = document.getElementById('map-svg');
    if (!svg) return;
    svg.setAttribute('viewBox', `${vx} ${vy} ${vw} ${vh}`);
    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');

    const pos = map.positions;
    const sel = this.selectedTid ? g.territory(this.selectedTid) : null;
    const selOwner = sel?.owner || null;
    const player = g.state.playerFactionId;
    const pts = map.territories.map((t) => pos[t.id]).filter(Boolean);
    const centroid = pts.reduce((a, p) => [a[0] + p[0] / pts.length, a[1] + p[1] / pts.length], [0, 0]);

    let land = '';
    if (map.style === 'continent') {
      const hull = convexHull(pts);
      const expanded = hull.map((p, i) => {
        const dx = p[0] - centroid[0], dy = p[1] - centroid[1];
        const len = Math.hypot(dx, dy) || 1;
        const pad = 78 + hash(`hull-${i}`) * 34;
        return [p[0] + (dx / len) * pad, p[1] + (dy / len) * pad];
      });
      const d = smoothClosed(expanded);
      land = `
        <path d="${d}" fill="none" stroke="rgba(196,168,112,.18)" stroke-width="16" filter="url(#soft-blur)"/>
        <path d="${d}" class="map-land-sand" transform="translate(0,4)"/>
        <path d="${d}" class="map-land"/>`;
    } else {
      land = map.territories.map((t) => {
        const p = pos[t.id];
        if (!p) return '';
        const seed = hash(t.id);
        const rx = 58 + seed * 12, ry = 48 + seed * 10;
        return `<path d="${roughPath(p[0], p[1] + 4, rx + 8, ry + 6, 'sand-' + t.id)}" class="map-island-sand"/>
                <path d="${roughPath(p[0], p[1] + 2, rx, ry, t.id)}" class="map-island"/>`;
      }).join('');
    }

    const routes = edgePairs(map).map(([a, b]) => {
      const p1 = pos[a], p2 = pos[b];
      if (!p1 || !p2) return '';
      const mx = (p1[0] + p2[0]) / 2, my = (p1[1] + p2[1]) / 2;
      const dx = p2[0] - p1[0], dy = p2[1] - p1[1];
      const len = Math.hypot(dx, dy) || 1;
      const bend = (hash(a + b) - 0.5) * 34;
      const cx = mx + (-dy / len) * bend, cy = my + (dx / len) * bend;
      const touchesSel = sel && (a === sel.id || b === sel.id);
      const otherId = sel ? (a === sel.id ? b : b === sel.id ? a : null) : null;
      const other = otherId ? g.territory(otherId) : null;
      let cls = '';
      if (touchesSel) {
        const isHostile = selOwner === player ? (other && other.owner !== player) : other?.owner === player;
        cls = isHostile ? 'active hostile' : 'active';
      }
      return `<path d="M ${p1[0]} ${p1[1]} Q ${cx.toFixed(1)} ${cy.toFixed(1)} ${p2[0]} ${p2[1]}" class="map-route ${cls}"/>`;
    }).join('');

    const nodes = map.territories.map((tpl) => this.mapNode(g.territory(tpl.id), map, sel, player)).filter(Boolean).join('');

    svg.innerHTML = `
      <defs>
        <radialGradient id="land-grad" cx="42%" cy="38%" r="72%">
          <stop offset="0%" stop-color="#2c3b32"/>
          <stop offset="55%" stop-color="#22302a"/>
          <stop offset="100%" stop-color="#16211e"/>
        </radialGradient>
        <radialGradient id="island-grad" cx="38%" cy="30%" r="80%">
          <stop offset="0%" stop-color="#2b3a31"/>
          <stop offset="100%" stop-color="#17231f"/>
        </radialGradient>
        <radialGradient id="node-grad" cx="35%" cy="28%" r="85%">
          <stop offset="0%" stop-color="#1d2733"/>
          <stop offset="100%" stop-color="#0c1119"/>
        </radialGradient>
        <pattern id="sea-grid" width="72" height="72" patternUnits="userSpaceOnUse">
          <path d="M72 0H0V72" fill="none" stroke="rgba(148,180,190,.055)" stroke-width="1"/>
        </pattern>
        <filter id="rough-coast" x="-25%" y="-25%" width="150%" height="150%">
          <feTurbulence type="fractalNoise" baseFrequency="0.013 0.019" numOctaves="2" seed="11" result="n"/>
          <feDisplacementMap in="SourceGraphic" in2="n" scale="13" xChannelSelector="R" yChannelSelector="G"/>
        </filter>
        <filter id="soft-blur" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="9"/>
        </filter>
        <filter id="node-shadow" x="-60%" y="-60%" width="220%" height="220%">
          <feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000" flood-opacity=".55"/>
        </filter>
      </defs>
      <rect x="${vx}" y="${vy}" width="${vw}" height="${vh}" fill="url(#sea-grid)"/>
      ${land}
      <g class="routes">${routes}</g>
      <g class="nodes">${nodes}</g>`;

    // hide hint once selected
    const hint = document.getElementById('map-hint');
    if (hint) {
      hint.classList.toggle('hidden-hint', !!sel);
      hint.textContent = sel
        ? (sel.owner === player ? `${sel.name} · 點擊相鄰疆域下達軍令` : `${sel.name} · 點擊你相鄰的疆域籌劃進攻`)
        : '點選疆域以查看詳情';
    }
  }

  mapNode(t, map, sel, player) {
    const g = this.game;
    const p = map.positions[t.id];
    if (!p) return '';
    const owner = t.owner ? g.faction(t.owner) : null;
    const fc = owner?.color || '#7b8494';
    const isSel = sel?.id === t.id;
    const isAdj = sel && sel.adjacentTo.includes(t.id);
    const isPlayerTerr = t.owner === player;
    const selectedIsOurs = sel?.owner === player;
    const selectedIsEnemy = sel && sel.owner !== player;

    let ring = '';
    if (isSel) ring = `<circle r="44" class="select-ring"/>`;
    else if (isAdj) {
      if (selectedIsOurs) ring = isPlayerTerr ? `<circle r="43" class="adj-ring"/>` : `<circle r="43" class="atk-ring"/>`;
      else if (selectedIsEnemy && isPlayerTerr) ring = `<circle r="43" class="atk-ring"/>`;
    }

    const dim = sel && !isSel && !isAdj ? 'dimmed' : '';
    const buildings = t.buildings.map((b, i) => `<circle class="b-pip" cx="${(i - (t.buildings.length - 1) / 2) * 8}" cy="-44" r="2.5"/>`).join('');
    const ownerLabel = owner ? owner.name : '無主之地';
    const tname = esc(t.name);
    const labelY = 57;

    return `<g class="terr ${owner ? '' : 'unclaimed'} ${isSel ? 'selected' : ''} ${dim}" data-id="${t.id}" transform="translate(${p[0]},${p[1]})" style="--fc:${fc}" tabindex="0" role="button" aria-label="${tname}, ${esc(ownerLabel)}, ${t.armies} units">
      <circle class="halo" r="52"/>
      ${ring}
      <g filter="url(#node-shadow)">
        <circle class="ring-outer" r="35"/>
        <circle class="ring-inner" r="30"/>
        <circle class="core" r="27"/>
      </g>
      <g class="terrain-ico" style="color:${owner ? '#e8dcc0' : '#9aa2ad'}">${terrSvg(t.type)}</g>
      <g class="b-pips">${buildings}</g>
      <g class="army-badge" transform="translate(26,25)">
        <circle r="12"/>
        <text y="4.2">${t.armies}</text>
      </g>
      <text class="tname" y="${labelY}">${tname}</text>
      <text class="towner" y="${labelY + 13}">${esc(ownerLabel)}</text>
    </g>`;
  }

  handleTerritoryClick(tid) {
    if (!this.game.state || this.game.state.isOver) return;
    const g = this.game;
    const target = g.territory(tid);
    if (!target) return;
    const sel = this.selectedTid ? g.territory(this.selectedTid) : null;
    const player = g.state.playerFactionId;

    if (sel) {
      if (sel.id === tid) { this.selectedTid = null; this.orderMode = null; this.renderAll(); return; }
      if (sel.adjacentTo.includes(tid)) {
        if (sel.owner === player && target.owner === player) {
          this.openMoveModal(sel.id, tid);
          return;
        }
        if (sel.owner === player && target.owner !== player) {
          this.openAttackModal(sel.id, tid);
          return;
        }
        if (sel.owner !== player && target.owner === player) {
          this.openAttackModal(tid, sel.id);
          return;
        }
      }
    }
    this.selectedTid = tid;
    this.orderMode = null;
    this.renderAll();
  }

  handleMapHover(e) {
    const gEl = e.target.closest('.terr');
    const tip = document.getElementById('map-tooltip');
    const stage = document.getElementById('map-stage');
    if (!tip || !stage) return;
    if (!gEl) { this.hideTooltip(); return; }
    const t = this.game.territory(gEl.dataset.id);
    if (!t) return;
    const owner = t.owner ? this.game.faction(t.owner) : null;
    const rect = stage.getBoundingClientRect();
    const x = e.clientX - rect.left, y = e.clientY - rect.top;
    const sel = this.selectedTid ? this.game.territory(this.selectedTid) : null;
    let hint = '';
    if (sel && sel.id !== t.id && sel.adjacentTo.includes(t.id)) {
      if (sel.owner === this.game.state.playerFactionId) hint = t.owner === this.game.state.playerFactionId ? '點擊：行軍至此' : '點擊：發動進攻';
      else if (t.owner === this.game.state.playerFactionId) hint = '點擊：由此進攻';
    } else if (!sel) {
      hint = t.owner === this.game.state.playerFactionId ? '點擊：查看並下達軍令' : '點擊：查看疆域';
    }
    tip.innerHTML = `
      <div class="tt-name">${esc(t.name)}</div>
      <div class="tt-owner" style="color:${owner?.color || '#8d929d'}">${esc(owner?.name || '無主之地')} · ${TERR_CN[t.type]}</div>
      <div class="tt-row"><span>${ico('army')} 駐軍</span><b>${t.armies}</b></div>
      <div class="tt-row"><span>${ico('gold')} 產出</span><b>+${t.resources.gold + (t.buildings.includes('market') ? 2 : 0)}</b></div>
      ${t.buildings.length ? `<div class="tt-row"><span>${ico('build')} 建築</span><b>${t.buildings.map((b) => BUILDINGS[b].label).join('、')}</b></div>` : ''}
      ${hint ? `<div class="tt-hint">${hint}</div>` : ''}`;
    tip.style.left = `${x}px`;
    tip.style.top = `${y}px`;
    tip.classList.add('show');
  }

  hideTooltip() {
    const tip = document.getElementById('map-tooltip');
    if (tip) tip.classList.remove('show');
  }

  // ── council ───────────────────────────────────────────────────────────────
  renderCouncil() {
    const el = document.getElementById('council-panel');
    if (!el) return;
    const t = this.selectedTid ? this.game.territory(this.selectedTid) : null;
    el.innerHTML = t ? this.terrCouncil(t) : this.defaultCouncil();
    this.bindCouncil(el);
  }

  defaultCouncil() {
    const g = this.game;
    const map = MAPS[g.state.mapId];
    return `<div class="council">
      <div class="council-head">
        <p class="eyebrow">戰爭議會</p>
        <h2>戰爭議會</h2>
      </div>
      <div class="council-hero">
        <div class="hero-img"></div>
        <div class="hero-body">
          <div class="hero-kicker">${esc(map.name)}</div>
          <h3>${esc(g.state.identity.nationName)}的下一步</h3>
          <p>選擇地圖上的疆域，或從下方召集議事。每一道命令都將消耗一次行動。</p>
        </div>
      </div>
      <div class="quick-grid">
        <button class="quick-btn" data-open="diplomacy">${ico('handshake')}<span>外交議會<small>同盟與貿易</small></span></button>
        <button class="quick-btn" data-open="chronicle">${ico('scroll')}<span>王朝編年史<small>帝國紀事</small></span></button>
        <button class="quick-btn" data-open="help">${ico('help')}<span>征戰指南<small>玩法說明</small></span></button>
        <button class="quick-btn" data-action="save">${ico('save')}<span>保存進度<small>寫入本機</small></span></button>
      </div>
      <div class="council-tip"><b>軍令提示：</b>先點選你自己的疆域，再點擊相鄰疆域即可招募、行軍或進攻。市場能增加金幣收入，兵營能降低徵兵成本。</div>
      <div class="panel">
        <div class="panel-head"><h3>勢力圖騰</h3></div>
        <div class="relations-list">
          ${Object.values(g.state.factions).filter((f) => f.id !== g.player.id).map((f) => `
            <div class="rel-row ${f.territories.length ? '' : 'rel-dead'}" style="--fc:${f.color}">
              <span class="rel-crest">${crestSvg(f)}</span>
              <span class="rel-name">${esc(f.name)}</span>
              <span class="rel-owned">${f.territories.length} 域</span>
              <span class="rel-status ${g.relationWith(f.id)?.status || 'neutral'}">${g.relationWith(f.id)?.status === 'allied' ? '同盟' : g.relationWith(f.id)?.status === 'peace' ? '停戰' : '中立'}</span>
            </div>`).join('')}
        </div>
      </div>
    </div>`;
  }

  terrCouncil(t) {
    const g = this.game;
    const player = g.state.playerFactionId;
    const owner = t.owner ? g.faction(t.owner) : null;
    const fc = owner?.color || '#7b8494';
    const ours = t.owner === player;
    const terrBonus = TERRAIN[t.type].bonus + (t.buildings.includes('walls') ? 0.3 : 0);
    const inc = t.resources;
    const isAdjToOurs = !ours && g.playerTerritories().some((p) => p.adjacentTo.includes(t.id));
    const selAdjEnemy = ours ? t.adjacentTo.filter((id) => g.territory(id)?.owner !== player) : [];
    const selAdjFriend = ours ? t.adjacentTo.filter((id) => g.territory(id)?.owner === player) : [];
    const fromOptions = !ours ? g.playerTerritories().filter((p) => p.adjacentTo.includes(t.id)) : [];
    const canAct = g.state.actionsLeft > 0 && !g.state.isOver;

    let modeBlock = '';
    if (this.orderMode === 'march' && ours) {
      modeBlock = `<div class="target-panel" data-mode="march">
        <div class="target-head"><span>選擇行軍目的地</span><button data-cancel-mode>×</button></div>
        ${selAdjFriend.length ? selAdjFriend.map((id) => {
          const x = g.territory(id);
          return `<button class="target-row" data-move="${id}" style="--fc:${fc}">
            <span class="target-dot"></span>
            <span class="target-name">${esc(x.name)}<small>${TERR_CN[x.type]} · 我軍駐地</small></span>
            <span class="target-army"><b>${x.armies}</b> 兵</span>${ico('chevron')}
          </button>`;
        }).join('') : `<div class="target-empty">沒有相鄰的友軍疆域可供行軍。</div>`}
      </div>`;
    } else if (this.orderMode === 'attack' && ours) {
      modeBlock = `<div class="target-panel" data-mode="attack">
        <div class="target-head"><span>選擇進攻目標</span><button data-cancel-mode>×</button></div>
        ${selAdjEnemy.length ? selAdjEnemy.map((id) => {
          const x = g.territory(id);
          const o = x.owner ? g.faction(x.owner) : null;
          return `<button class="target-row" data-attack="${id}" style="--fc:${o?.color || '#8d929d'}">
            <span class="target-dot"></span>
            <span class="target-name">${esc(x.name)}<small>${o ? o.name : '無主之地'} · ${TERR_CN[x.type]}</small></span>
            <span class="target-army"><b>${x.armies}</b> 兵</span>${ico('sword')}
          </button>`;
        }).join('') : `<div class="target-empty">附近沒有可進攻的疆域。</div>`}
      </div>`;
    } else if (!ours) {
      modeBlock = `<div class="target-panel">
        <div class="target-head"><span>${t.owner ? '從相鄰疆域進攻' : '派兵占領'}</span></div>
        ${fromOptions.length ? fromOptions.map((p) => `<button class="target-row" data-attack-from="${p.id}" style="--fc:${fc}">
          <span class="target-dot" style="--fc:${g.player.color}"></span>
          <span class="target-name">${esc(p.name)}<small>我軍駐地 · ${p.armies} 兵</small></span>
          ${ico('sword')}
        </button>`).join('') : `<div class="target-empty">你的疆域皆不與此地相鄰。先攻下鄰近土地吧。</div>`}
      </div>`;
    }

    const actions = ours ? `
      <div class="order-title">軍令</div>
      <div class="order-grid">
        <button class="order-btn" data-order="recruit" ${!canAct || g.maxRecruit(t.id) < 1 ? 'disabled' : ''}>
          <span class="o-ico">${ico('army')}</span>
          <span><span class="o-label">招募</span><span class="o-sub">${g.recruitCost(t.id).gold} 金 + 2 糧 / 兵</span></span>
        </button>
        <button class="order-btn" data-order="march" ${!canAct || selAdjFriend.length === 0 || t.armies <= 2 ? 'disabled' : ''}>
          <span class="o-ico">${ico('flag')}</span>
          <span><span class="o-label">行軍</span><span class="o-sub">調動 ${Math.max(0, t.armies - 2)} 兵</span></span>
        </button>
        <button class="order-btn danger" data-order="attack" ${!canAct || selAdjEnemy.length === 0 ? 'disabled' : ''}>
          <span class="o-ico">${ico('sword')}</span>
          <span><span class="o-label">進攻</span><span class="o-sub">${selAdjEnemy.length} 個目標</span></span>
        </button>
        <button class="order-btn" data-order="build" ${!canAct ? 'disabled' : ''}>
          <span class="o-ico">${ico('build')}</span>
          <span><span class="o-label">建造</span><span class="o-sub">${3 - t.buildings.length} 個空位</span></span>
        </button>
      </div>` : `
      <div class="order-title">軍令</div>
      <div class="order-grid">
        <button class="order-btn danger" data-order="attack" ${!canAct || !isAdjToOurs ? 'disabled' : ''}>
          <span class="o-ico">${ico('sword')}</span>
          <span><span class="o-label">${t.owner ? '進攻此地' : '占領此地'}</span><span class="o-sub">${fromOptions.length} 條進軍路線</span></span>
        </button>
        <button class="order-btn" data-order="none" disabled>
          <span class="o-ico">${ico('shield')}</span>
          <span><span class="o-label">防禦加成</span><span class="o-sub">地形 x${TERRAIN[t.type].bonus}${t.buildings.includes('walls') ? ' + 城牆' : ''}</span></span>
        </button>
      </div>`;

    const buildingSlots = Object.values(BUILDINGS).map((b) => {
      const built = t.buildings.includes(b.id);
      return `<button class="b-slot ${built ? 'built' : ''}" data-build="${b.id}" ${built || !ours ? 'disabled' : ''} style="--bc:${b.accent}">
        <span class="b-img" style="background-image:url('${b.image}')"></span>
        <span class="b-body"><span class="b-name">${b.label}</span><span class="b-effect">${built ? '已建成' : b.effect}</span></span>
        ${built ? `<span class="b-built">✓</span>` : ''}
      </button>`;
    }).join('');

    return `<div class="council">
      <div class="council-head"><p class="eyebrow">${ours ? '你的領地' : '異邦疆域'}</p><h2>${ours ? '領地議會' : '異邦疆域'}</h2></div>
      <div class="terr-view">
        <div class="terr-banner" style="--fc:${fc}">
          <div class="tb-top">
            <span class="chip" style="color:${fc};border-color:${fc}66;background:${fc}18">${TERR_CN[t.type]}</span>
            ${ours ? '<span class="chip gold">我方領地</span>' : `<span class="chip">${t.owner ? '敵對勢力' : '無主之地'}</span>`}
          </div>
          <h2>${esc(t.name)}</h2>
          <div class="tb-sub"><b>${esc(owner?.name || '無主之地')}</b><span>·</span><span>${ico('army')} ${t.armies} 駐軍</span></div>
          <span class="crest-big">${owner ? crestSvg(owner) : ico('flag')}</span>
        </div>
        <div class="detail-grid">
          <div class="detail-cell"><div class="dk">${ico('army')} 駐軍</div><div class="dv">${t.armies}<small> 單位</small></div></div>
          <div class="detail-cell"><div class="dk">${ico('shield')} 防禦倍率</div><div class="dv">×${terrBonus.toFixed(1)}</div><div class="ds">地形 x${TERRAIN[t.type].bonus}${t.buildings.includes('walls') ? ' · 城牆 +0.3' : ''}</div></div>
          <div class="detail-cell"><div class="dk">${ico('gold')} 金幣產出</div><div class="dv">+${inc.gold + (t.buildings.includes('market') ? 2 : 0)}<small> /回合</small></div></div>
          <div class="detail-cell"><div class="dk">${ico('food')} 糧食產出</div><div class="dv">+${inc.food}<small> /回合</small></div><div class="ds">木 +${inc.wood} · 石 +${inc.stone}</div></div>
        </div>
        <div class="order-title">建築</div>
        <div class="building-strip">${buildingSlots}</div>
        ${actions}
        ${modeBlock}
        <button class="btn btn-ghost btn-block" data-deselect style="margin-top:2px">${ico('map')} 返回地圖總覽</button>
      </div>
    </div>`;
  }

  bindCouncil(el) {
    const g = this.game;
    el.querySelectorAll('[data-action="save"]').forEach((b) => b.addEventListener('click', () => {
      g.save(); this.toast('進度已保存至本機', 'good', 'save');
    }));
    el.querySelectorAll('[data-deselect]').forEach((b) => b.addEventListener('click', () => {
      this.selectedTid = null; this.orderMode = null; this.renderAll();
    }));
    el.querySelectorAll('[data-cancel-mode]').forEach((b) => b.addEventListener('click', () => {
      this.orderMode = null; this.renderAll();
    }));
    el.querySelectorAll('[data-order]').forEach((b) => b.addEventListener('click', () => {
      const order = b.dataset.order;
      const t = g.territory(this.selectedTid);
      if (order === 'recruit') this.openRecruitModal(t.id);
      if (order === 'build') this.openBuildModal(t.id);
      if (order === 'march') { this.orderMode = this.orderMode === 'march' ? null : 'march'; this.renderAll(); }
      if (order === 'attack') {
        if (t.owner !== g.state.playerFactionId) {
          const options = g.playerTerritories().filter((p) => p.adjacentTo.includes(t.id));
          if (options.length === 1) this.openAttackModal(options[0].id, t.id);
          else { this.orderMode = this.orderMode === 'attack' ? null : 'attack'; this.renderAll(); }
        } else { this.orderMode = this.orderMode === 'attack' ? null : 'attack'; this.renderAll(); }
      }
    }));
    el.querySelectorAll('[data-attack]').forEach((b) => b.addEventListener('click', () => {
      this.openAttackModal(this.selectedTid, b.dataset.attack);
    }));
    el.querySelectorAll('[data-attack-from]').forEach((b) => b.addEventListener('click', () => {
      this.openAttackModal(b.dataset.attackFrom, this.selectedTid);
    }));
    el.querySelectorAll('[data-move]').forEach((b) => b.addEventListener('click', () => {
      this.openMoveModal(this.selectedTid, b.dataset.move);
    }));
    el.querySelectorAll('[data-build]').forEach((b) => b.addEventListener('click', () => {
      const t = g.territory(this.selectedTid);
      if (t && !t.buildings.includes(b.dataset.build)) this.openBuildModal(t.id, b.dataset.build);
    }));
  }

  // ── modals ────────────────────────────────────────────────────────────────
  openModal({ art, eyebrow, title, subtitle, body, actions, size = '', onMount, onClose }) {
    const root = document.getElementById('modal-root');
    root.innerHTML = `
      <div class="modal-backdrop" data-close></div>
      <div class="modal-wrap">
        <div class="modal ${size}">
          <button class="modal-close" data-close aria-label="關閉">${ico('close')}</button>
          ${art ? `<div class="modal-art" style="background-image:url('${art}')">
            <div class="art-title">${eyebrow ? `<p class="eyebrow">${esc(eyebrow)}</p>` : ''}<h2>${title}</h2>${subtitle ? `<p>${subtitle}</p>` : ''}</div>
          </div>` : ''}
          <div class="modal-body">${body}</div>
          ${actions ? `<div class="modal-actions">${actions}</div>` : ''}
        </div>
      </div>`;
    root.classList.add('open');
    root.querySelectorAll('[data-close]').forEach((b) => b.addEventListener('click', () => this.closeModal()));
    if (this._escHandler) document.removeEventListener('keydown', this._escHandler);
    this._escHandler = (e) => { if (e.key === 'Escape') this.closeModal(); };
    document.addEventListener('keydown', this._escHandler);
    this._closeCallback = onClose || null;
    if (onMount) onMount(root.querySelector('.modal'));
    return root.querySelector('.modal');
  }

  closeModal() {
    const root = document.getElementById('modal-root');
    if (!root) return;
    root.classList.remove('open');
    root.innerHTML = '';
    if (this._escHandler) { document.removeEventListener('keydown', this._escHandler); this._escHandler = null; }
    this.tradeTarget = null;
    this.hideTooltip();
    const cb = this._closeCallback;
    this._closeCallback = null;
    if (cb) setTimeout(cb, 60);
  }

  toast(msg, tone = '', icon = 'spark') {
    const root = document.getElementById('toast-root');
    if (!root) return;
    const el = document.createElement('div');
    el.className = `toast ${tone}`;
    el.innerHTML = `${ico(icon)}<span>${esc(msg)}</span>`;
    root.appendChild(el);
    setTimeout(() => { el.classList.add('out'); setTimeout(() => el.remove(), 260); }, 3200);
  }

  // ── recruit ───────────────────────────────────────────────────────────────
  openRecruitModal(tid) {
    const g = this.game;
    const t = g.territory(tid);
    if (!t) return;
    const max = g.maxRecruit(tid);
    const cost = g.recruitCost(tid);
    let qty = Math.max(1, Math.min(3, max || 1));
    const art = 'assets/images/barracks.png';

    const renderBody = () => `
      <p class="lede">在 <b>${esc(t.name)}</b> 升起徵兵旗。每名士兵需 ${cost.gold} 金幣與 2 糧食${t.buildings.includes('barracks') ? '，兵營已為你降低徵募成本。' : '。建造兵營可將金幣成本降至 2。'}</p>
      <div class="qty-box">
        <div>
          <input type="range" class="qty-slider" id="qty-range" min="1" max="${Math.max(1, max)}" value="${qty}" ${max < 1 ? 'disabled' : ''}/>
          <div class="qty-meta">
            <span>目前駐軍 <b>${t.armies}</b> · 可徵募 <b>${max}</b></span>
            <button class="qty-max" id="qty-max" ${max < 1 ? 'disabled' : ''}>全部徵募</button>
          </div>
        </div>
        <div class="qty-stepper">
          <button id="qty-minus">−</button>
          <span class="qty-value" id="qty-val">${max < 1 ? 0 : qty}</span>
          <button id="qty-plus">+</button>
        </div>
      </div>
      <div class="confirm-row">
        <span class="ico-wrap">${ico('gold')}</span>
        <div><div class="cr-label">總計花費</div><div class="cr-value" id="cost-row">${costItems({ gold: cost.gold * qty, food: 2 * qty }, g.player)}</div></div>
        <span class="spacer" style="flex:1"></span>
        <div style="text-align:right"><div class="cr-label">徵募後駐軍</div><div class="cr-value" id="after-army">${t.armies + qty}</div></div>
      </div>`;

    const modal = this.openModal({
      art, eyebrow: '徵集兵員', title: '徵募新兵',
      subtitle: `${esc(t.name)} · ${TERR_CN[t.type]}`,
      body: renderBody(),
      actions: `<button class="btn btn-ghost" data-close>取消</button><button class="btn btn-primary" id="do-recruit" ${max < 1 ? 'disabled' : ''}>${ico('army')}<span>徵募 ${max < 1 ? '' : qty} 名士兵</span></button>`,
      size: 'medium',
    });

    const update = () => {
      const range = modal.querySelector('#qty-range');
      if (range) range.value = qty;
      modal.querySelector('#qty-val').textContent = qty;
      modal.querySelector('#cost-row').innerHTML = costItems({ gold: cost.gold * qty, food: 2 * qty }, g.player);
      modal.querySelector('#after-army').textContent = t.armies + qty;
      const btn = modal.querySelector('#do-recruit');
      if (btn) btn.innerHTML = `${ico('army')}<span>徵募 ${qty} 名士兵</span>`;
    };
    modal.querySelector('#qty-range')?.addEventListener('input', (e) => { qty = parseInt(e.target.value, 10) || 1; update(); });
    modal.querySelector('#qty-minus')?.addEventListener('click', () => { qty = Math.max(1, qty - 1); update(); });
    modal.querySelector('#qty-plus')?.addEventListener('click', () => { qty = Math.min(Math.max(1, max), qty + 1); update(); });
    modal.querySelector('#qty-max')?.addEventListener('click', () => { qty = Math.max(1, max); update(); });
    modal.querySelector('#do-recruit')?.addEventListener('click', () => {
      const res = g.recruit(tid, qty);
      if (!res.ok) { this.toast(res.msg, 'bad', 'help'); return; }
      this.closeModal();
      this.toast(`在 ${t.name} 徵募了 ${res.n} 名士兵`, 'good', 'army');
    });
  }

  // ── move ──────────────────────────────────────────────────────────────────
  openMoveModal(fromId, toId) {
    const g = this.game;
    const from = g.territory(fromId), to = g.territory(toId);
    if (!from || !to) return;
    const max = Math.max(0, from.armies - 2);
    if (max < 1) { this.toast(`必須在 ${from.name} 留下 2 名守軍`, 'bad', 'shield'); return; }
    let qty = Math.min(max, Math.max(1, Math.floor(from.armies / 2)));
    const body = () => `
      <p class="lede">從 <b>${esc(from.name)}</b> 抽調兵力進駐 <b>${esc(to.name)}</b>。出發地必須留下至少 2 名守軍。</p>
      <div class="battle-sides" style="grid-template-columns:1fr auto 1fr">
        <div class="battle-side"><div class="bs-role">出征地</div><div class="bs-name">${esc(from.name)}</div><div class="bs-units">${from.armies}<small>駐軍</small></div></div>
        <div class="battle-vs">${ico('flag')}</div>
        <div class="battle-side"><div class="bs-role">目的地</div><div class="bs-name">${esc(to.name)}</div><div class="bs-units">${to.armies}<small>駐軍</small></div></div>
      </div>
      <div class="qty-box">
        <div>
          <input type="range" class="qty-slider" id="qty-range" min="1" max="${max}" value="${qty}"/>
          <div class="qty-meta"><span>可調動 <b>${max}</b> 兵（留守 2）</span><button class="qty-max" id="qty-max">全部調動</button></div>
        </div>
        <div class="qty-stepper"><button id="qty-minus">−</button><span class="qty-value" id="qty-val">${qty}</span><button id="qty-plus">+</button></div>
      </div>
      <div class="confirm-row">${ico('flag')}<div><div class="cr-label">行軍後</div><div class="cr-value" id="after-row"><b>${from.name}</b> ${from.armies - qty} · <b>${to.name}</b> ${to.armies + qty}</div></div></div>`;
    const modal = this.openModal({
      art: 'assets/images/map-parchment.png', eyebrow: '行軍號令', title: '行軍',
      subtitle: `${esc(from.name)} → ${esc(to.name)}`, body: body(),
      actions: `<button class="btn btn-ghost" data-close>取消</button><button class="btn btn-primary" id="do-move">${ico('flag')}<span>行軍 ${qty} 兵</span></button>`,
      size: 'medium',
    });
    const update = () => {
      modal.querySelector('#qty-range').value = qty;
      modal.querySelector('#qty-val').textContent = qty;
      modal.querySelector('#after-row').innerHTML = `<b>${esc(from.name)}</b> ${from.armies - qty} · <b>${esc(to.name)}</b> ${to.armies + qty}`;
      modal.querySelector('#do-move').innerHTML = `${ico('flag')}<span>行軍 ${qty} 兵</span>`;
    };
    modal.querySelector('#qty-range')?.addEventListener('input', (e) => { qty = parseInt(e.target.value, 10) || 1; update(); });
    modal.querySelector('#qty-minus')?.addEventListener('click', () => { qty = Math.max(1, qty - 1); update(); });
    modal.querySelector('#qty-plus')?.addEventListener('click', () => { qty = Math.min(max, qty + 1); update(); });
    modal.querySelector('#qty-max')?.addEventListener('click', () => { qty = max; update(); });
    modal.querySelector('#do-move')?.addEventListener('click', () => {
      const res = g.move(fromId, toId, qty);
      if (!res.ok) { this.toast(res.msg, 'bad', 'help'); return; }
      this.closeModal();
      this.toast(`${res.n} 兵自 ${from.name} 進駐 ${to.name}`, 'good', 'flag');
    });
  }

  // ── attack ────────────────────────────────────────────────────────────────
  openAttackModal(fromId, toId) {
    const g = this.game;
    const from = g.territory(fromId), to = g.territory(toId);
    if (!from || !to) return;
    if (from.owner !== g.state.playerFactionId) return;
    const defender = to.owner ? g.faction(to.owner) : null;
    let qty = from.armies;
    const renderForecast = () => {
      const f = g.forecast(fromId, toId, qty);
      return `<div class="forecast">
        <div class="forecast-top"><span>預期戰果</span><b class="${f.tone}">${f.label}</b></div>
        <div class="forecast-bar"><i class="${f.tone}" style="width:${Math.max(4, Math.min(100, (f.ratio / 2.4) * 100))}%"></i></div>
        <div class="forecast-meta"><span>我軍戰力 <b>${f.atk.toFixed(1)}</b></span><span>守軍戰力 <b>${f.def.toFixed(1)}</b></span><span>地形 ×${(TERRAIN[to.type].bonus + (to.buildings.includes('walls') ? 0.3 : 0)).toFixed(1)}</span></div>
      </div>`;
    };
    const body = () => `
      <div class="battle-sides">
        <div class="battle-side">
          <div class="bs-role">進攻方</div>
          <div class="bs-name">${esc(from.name)}</div>
          <div class="bs-owner">${esc(g.player.name)}</div>
          <div class="bs-units" id="atk-units">${qty}<small>投入兵力</small></div>
        </div>
        <div class="battle-vs">對</div>
        <div class="battle-side defender">
          <div class="bs-role">防守方</div>
          <div class="bs-name">${esc(to.name)}</div>
          <div class="bs-owner">${esc(defender?.name || '無主之地')}</div>
          <div class="bs-units">${to.armies}<small>駐軍</small></div>
        </div>
      </div>
      <div class="qty-box">
        <div>
          <input type="range" class="qty-slider" id="qty-range" min="1" max="${from.armies}" value="${qty}"/>
          <div class="qty-meta"><span>可投入 <b>${from.armies}</b> 兵 · 出征地將不留守軍</span><button class="qty-max" id="qty-max">全軍出擊</button></div>
        </div>
        <div class="qty-stepper"><button id="qty-minus">−</button><span class="qty-value" id="qty-val">${qty}</span><button id="qty-plus">+</button></div>
      </div>
      <div id="forecast-wrap">${renderForecast()}</div>
      <p class="lede" style="margin:14px 0 0;font-size:10.5px;color:var(--muted)">戰鬥為決定性推演：兵力、地形與城牆共同決定勝負，不會有隨機骰子。壓倒性優勢可將損失降到最低。</p>`;
    const modal = this.openModal({
      art: 'assets/images/battle.png', eyebrow: to.owner ? '宣戰' : '佔領荒野', title: to.owner ? '發動進攻' : '占領無主之地',
      subtitle: `${esc(from.name)} → ${esc(to.name)}`, body: body(),
      actions: `<button class="btn btn-ghost" data-close>按兵不動</button><button class="btn btn-primary" id="do-attack">${ico('sword')}<span>${to.owner ? '發動進攻' : '派兵占領'} · ${qty} 兵</span></button>`,
      size: 'medium',
    });
    const update = () => {
      modal.querySelector('#qty-range').value = qty;
      modal.querySelector('#qty-val').textContent = qty;
      modal.querySelector('#atk-units').innerHTML = `${qty}<small>投入兵力</small>`;
      modal.querySelector('#forecast-wrap').innerHTML = renderForecast();
      modal.querySelector('#do-attack').innerHTML = `${ico('sword')}<span>${to.owner ? '發動進攻' : '派兵占領'} · ${qty} 兵</span>`;
    };
    modal.querySelector('#qty-range')?.addEventListener('input', (e) => { qty = parseInt(e.target.value, 10) || 1; update(); });
    modal.querySelector('#qty-minus')?.addEventListener('click', () => { qty = Math.max(1, qty - 1); update(); });
    modal.querySelector('#qty-plus')?.addEventListener('click', () => { qty = Math.min(from.armies, qty + 1); update(); });
    modal.querySelector('#qty-max')?.addEventListener('click', () => { qty = from.armies; update(); });
    modal.querySelector('#do-attack')?.addEventListener('click', () => {
      const res = g.attack(fromId, toId, qty);
      if (!res.ok) { this.toast(res.msg, 'bad', 'help'); return; }
      this.closeModal();
      this.showBattleResult(res);
    });
  }

  showBattleResult(res) {
    const g = this.game;
    const won = res.result.captured;
    const outcomeTitle = res.result.outcome === 'uncontested' ? '不戰而得' : won ? '勝利' : '攻勢受挫';
    const outcomeEn = res.result.outcome === 'uncontested' ? '不戰而得' : won ? '勝利' : '戰敗';
    const body = `
      <div class="outcome-banner ${won ? 'win' : 'lose'}">
        <span class="ob-ico">${won ? ico('crown') : ico('skull')}</span>
        <div><h3>${outcomeTitle}</h3><p>${won ? `你的旗幟在 ${esc(res.toId ? g.territory(res.toId).name : '')} 升起。` : `部隊自 ${esc(g.territory(res.fromId).name)} 撤退。`}</p></div>
      </div>
      <div class="casualties">
        <div class="cas-cell"><div class="ck">我軍傷亡</div><div class="cv">${res.result.attackerCasualties}<small> 單位</small></div><div class="ck" style="margin-top:3px">倖存 ${res.survivors}</div></div>
        <div class="cas-cell"><div class="ck">敵軍傷亡</div><div class="cv">${res.result.defenderCasualties}<small> 單位</small></div><div class="ck" style="margin-top:3px">原守軍 ${res.defenderUnits}</div></div>
      </div>
      ${res.eliminated ? `<div class="confirm-row" style="border-color:rgba(208,90,76,.4)">${ico('skull')}<div><div class="cr-label">局勢劇變</div><div class="cr-value">${esc(res.eliminated.name)} 已被徹底消滅。</div></div></div>` : ''}
      <div class="modal-section-title">戰報</div>
      <ul class="battle-log">${res.result.log.map((l) => `<li>${esc(l)}</li>`).join('')}</ul>`;
    this.openModal({
      art: 'assets/images/battle.png', eyebrow: outcomeEn, title: outcomeTitle,
      subtitle: `${res.defenderName || '無主之地'} · 第 ${g.state.turn} 回合`, body,
      actions: `<button class="btn btn-primary" data-close>${ico('flag')}<span>繼續</span></button>`,
      size: 'medium',
      onClose: () => { if (g.state.isOver) this.showGameOver(); },
    });
  }

  // ── build ─────────────────────────────────────────────────────────────────
  openBuildModal(tid, focus) {
    const g = this.game;
    const t = g.territory(tid);
    if (!t) return;
    const canAct = g.state.actionsLeft > 0;
    const cards = Object.values(BUILDINGS).map((b) => {
      const built = t.buildings.includes(b.id);
      const afford = g.canAfford(b.cost);
      return `<div class="build-card ${built ? 'built' : ''} ${focus === b.id ? 'focused' : ''}">
        ${built ? '<span class="bc-flag">已建成</span>' : ''}
        <div class="bc-img" style="background-image:url('${b.image}')"></div>
        <div class="bc-body">
          <h3>${b.label}</h3>
          <div class="bc-effect">${b.effect}</div>
          <p class="bc-blurb">${esc(b.blurb)}</p>
          <div class="bc-cost">${built ? '<span class="chip gold">效益已生效</span>' : costItems(b.cost, g.player)}</div>
          <button class="btn ${built ? 'btn-ghost' : 'btn-primary'}" data-build-do="${b.id}" ${built || !canAct || !afford ? 'disabled' : ''}>
            ${built ? ico('shield') : ico('build')}<span>${built ? '已建成' : afford ? '建造' : '資源不足'}</span>
          </button>
        </div>
      </div>`;
    }).join('');
    const modal = this.openModal({
      art: 'assets/images/walls.png', eyebrow: '營造工程', title: '營造工程',
      subtitle: `${esc(t.name)} · 每回合限建造一座 · 目前行動 ${g.state.actionsLeft}`,
      body: `<p class="lede">建築將永久附屬於這塊疆域，即使易主也會保留。城牆強化防禦，兵營降低徵兵成本，市場帶來穩定金流。</p>
        <div class="build-grid">${cards}</div>
        ${!canAct ? '<p class="lede" style="color:var(--danger);margin-top:14px">本回合已無行動，請先結束回合。</p>' : ''}`,
      actions: `<span class="spacer"></span><button class="btn btn-ghost" data-close>關閉</button>`,
      size: 'medium',
    });
    modal.querySelectorAll('[data-build-do]').forEach((b) => b.addEventListener('click', () => {
      const type = b.dataset.buildDo;
      const res = g.build(tid, type);
      if (!res.ok) { this.toast(res.msg, 'bad', 'help'); return; }
      this.closeModal();
      this.toast(`${BUILDINGS[type].label} 在 ${t.name} 落成`, 'good', 'build');
    }));
  }

  // ── diplomacy ─────────────────────────────────────────────────────────────
  openDiplomacy() {
    const g = this.game;
    const canAct = g.state.actionsLeft > 0 && !g.state.isOver;
    const rows = Object.values(g.state.factions).filter((f) => f.id !== g.player.id).map((f) => {
      const rel = g.relationWith(f.id);
      const status = rel?.status || 'neutral';
      const label = status === 'allied' ? '同盟' : status === 'peace' ? `停戰 ${rel.turnsRemaining} 回合` : '中立';
      const dead = f.territories.length === 0;
      const selected = this.tradeTarget === f.id;
      return `<div class="diplo-row" style="--fc:${f.color}">
        <span class="dr-crest">${crestSvg(f)}</span>
        <span style="min-width:0">
          <span class="dr-name">${esc(f.name)}</span>
          <span class="dr-meta">${PERS_CN[f.personality]} · ${f.territories.length} 疆域 · <span style="color:${status === 'allied' ? 'var(--good)' : status === 'peace' ? 'var(--info)' : 'var(--muted)'}">${dead ? '已滅亡' : label}</span></span>
        </span>
        <span class="dr-actions">
          <button class="diplo-btn ${selected ? 'gold' : ''}" data-trade="${f.id}" ${dead || !canAct ? 'disabled' : ''}>貿易</button>
          <button class="diplo-btn" data-peace="${f.id}" ${dead || !canAct || status === 'allied' || status === 'peace' ? 'disabled' : ''}>停戰</button>
          <button class="diplo-btn gold" data-ally="${f.id}" ${dead || !canAct || status === 'allied' ? 'disabled' : ''}>同盟</button>
        </span>
      </div>`;
    }).join('');

    let tradeHtml = '';
    if (this.tradeTarget) {
      const f = g.faction(this.tradeTarget);
      tradeHtml = `<div class="trade-box">
        <div class="modal-section-title" style="margin-top:0">與 ${esc(f.name)} 貿易</div>
        <div class="trade-row">
          <label>你提供<select id="trade-give-res">${Object.keys(RES_META).map((k) => `<option value="${k}">${RES_META[k].label}（持有 ${g.player[k]}）</option>`).join('')}</select></label>
          <label>數量<input id="trade-give-amt" type="number" min="1" value="5" /></label>
          <label>換取<select id="trade-get-res">${Object.keys(RES_META).map((k) => `<option value="${k}" ${k === 'food' ? 'selected' : ''}>${RES_META[k].label}（對方 ${f[k]}）</option>`).join('')}</select></label>
          <label>&nbsp;<button class="btn btn-primary" id="trade-submit">${ico('trade')}<span>提出</span></button></label>
        </div>
        <p class="lede" style="margin:8px 0 0;font-size:10px;color:var(--muted)">商業勢力匯率最佳（0.8），侵略勢力最差（1.5）。</p>
      </div>`;
    }

    const modal = this.openModal({
      art: 'assets/images/council.png', eyebrow: '外交議會', title: '外交議會',
      subtitle: `本回合尚餘 ${g.state.actionsLeft} 個行動 · 每次交涉消耗 1 次`,
      body: `<p class="lede">在刀劍之外，言語同樣能改變疆界。同盟能阻止戰火，停戰爭取喘息，貿易則讓國庫充盈。</p>
        <div class="diplo-list">${rows}</div>${tradeHtml}`,
      actions: `<span class="spacer"></span><button class="btn btn-ghost" data-close>關閉</button>`,
      size: 'medium',
    });

    const reopen = () => this.openDiplomacy();
    modal.querySelectorAll('[data-ally]').forEach((b) => b.addEventListener('click', () => {
      const res = g.proposeAlliance(b.dataset.ally);
      if (!res.ok) { this.toast(res.msg, 'bad', 'help'); return; }
      this.toast(res.msg, res.accepted ? 'good' : '', res.accepted ? 'handshake' : 'dove');
      reopen();
    }));
    modal.querySelectorAll('[data-peace]').forEach((b) => b.addEventListener('click', () => {
      const res = g.proposePeace(b.dataset.peace);
      if (!res.ok) { this.toast(res.msg, 'bad', 'help'); return; }
      this.toast(res.msg, res.accepted ? 'good' : '', 'dove');
      reopen();
    }));
    modal.querySelectorAll('[data-trade]').forEach((b) => b.addEventListener('click', () => {
      this.tradeTarget = this.tradeTarget === b.dataset.trade ? null : b.dataset.trade;
      reopen();
    }));
    modal.querySelector('#trade-submit')?.addEventListener('click', () => {
      const giveRes = modal.querySelector('#trade-give-res').value;
      const giveAmt = parseInt(modal.querySelector('#trade-give-amt').value, 10);
      const getRes = modal.querySelector('#trade-get-res').value;
      const res = g.proposeTrade(this.tradeTarget, giveRes, giveAmt, getRes);
      if (!res.ok) { this.toast(res.msg, 'bad', 'help'); return; }
      this.toast(res.msg, res.accepted ? 'good' : '', res.accepted ? 'trade' : 'dove');
      this.tradeTarget = null;
      reopen();
    });
  }

  // ── chronicle ─────────────────────────────────────────────────────────────
  openChronicle() {
    const g = this.game;
    const logs = g.state.log.slice(-80).reverse();
    const body = logs.length ? `<ul class="log-list">${logs.map((l) => `
      <li class="log-item kind-${l.kind}"><span class="li-turn">第 ${l.turn} 回合</span><span class="li-text">${esc(l.text)}</span></li>`).join('')}</ul>`
      : `<div class="empty-state">${ico('scroll')}編年史尚為空白。你的第一道命令將成為傳說的開端。</div>`;
    this.openModal({
      art: 'assets/images/map-parchment.png', eyebrow: '王朝編年史', title: '王朝編年史',
      subtitle: `第 ${g.state.turn} 回合 · ${g.state.identity.nationName}`,
      body, actions: `<span class="spacer"></span><button class="btn btn-ghost" data-close>關閉</button>`,
      size: 'medium',
    });
  }

  // ── help ──────────────────────────────────────────────────────────────────
  openHelp() {
    const body = `
      <p class="lede">你是一位新登基的君主。目標只有一個：<b>征服地圖上的所有疆域</b>。每回合有 3 個行動，謹慎分配於軍事、建設與外交。</p>
      <div class="modal-section-title">核心循環</div>
      <div class="report-grid">
        <div class="report-panel">
          <h4>每個回合</h4>
          <div class="report-line"><span>1 · 下達軍令</span><b>3 個行動</b></div>
          <div class="report-line"><span>2 · 結束回合</span><b>收取資源</b></div>
          <div class="report-line"><span>3 · 敵軍行動</span><b>招募與進攻</b></div>
          <div class="report-line"><span>4 · 新回合</span><b>行動重置</b></div>
        </div>
        <div class="report-panel">
          <h4>四種資源</h4>
          <div class="report-line"><span>金幣 · 徵兵與建造</span><b>${ico('gold')}</b></div>
          <div class="report-line"><span>糧食 · 徵兵與軍隊維持</span><b>${ico('food')}</b></div>
          <div class="report-line"><span>木材 · 建造建築</span><b>${ico('wood')}</b></div>
          <div class="report-line"><span>石料 · 建造與城防</span><b>${ico('stone')}</b></div>
        </div>
      </div>
      <div class="modal-section-title">戰鬥推演</div>
      <p class="lede" style="font-size:11px">戰鬥沒有隨機數。戰力 = 兵力 × 士氣，防守方再乘以地形與城牆加成。平原 ×1.0、森林 ×1.2、城市 ×1.3、山地 ×1.5；城牆額外 +0.3。<br><b>2:1 以上</b>為壓倒性勝利，<b>1.2:1</b> 為勝利，<b>1:1</b> 為慘勝，低於 <b>0.8:1</b> 則潰敗。</p>
      <div class="modal-section-title">建築與外交</div>
      <p class="lede" style="font-size:11px">城牆提升防禦；兵營讓徵兵金幣成本從 3 降至 2；市場每回合 +2 金幣。外交可提出同盟、停戰或貿易，成功率取決於對方性格，弱小的勢力更容易接受。</p>
      <div class="modal-section-title">介面提示</div>
      <p class="lede" style="font-size:11px">先點選你自己的疆域，再點擊相鄰疆域：友軍→行軍，敵軍或無主地→進攻。右側議會提供完整軍令與建築卡。所有進度會自動保存在瀏覽器。</p>`;
    this.openModal({
      art: 'assets/images/council.png', eyebrow: '征戰指南', title: '征戰指南',
      subtitle: '從一位君主，到一個帝國。',
      body, actions: `<span class="spacer"></span><button class="btn btn-primary" data-close>${ico('crown')}<span>開始征途</span></button>`,
      size: 'medium',
    });
  }

  // ── turn cycle ────────────────────────────────────────────────────────────
  endTurn() {
    const g = this.game;
    if (g.state.isOver) return;
    const report = g.endTurn();
    if (!report) return;
    this.selectedTid = null;
    this.orderMode = null;
    this.renderAll();
    this.showTurnReport(report);
  }

  showTurnReport(report) {
    const g = this.game;
    const net = report.net || { gold: 0, food: 0, wood: 0, stone: 0 };
    const ai = report.aiLogs || [];
    const diplo = report.diploLogs || [];
    const events = [
      ...report.starvation.map((t) => ({ icon: 'food', text: t })),
      ...ai.map((t) => ({ icon: 'sword', text: t })),
      ...diplo.map((t) => ({ icon: 'dove', text: t })),
    ];
    const body = `
      <p class="lede">第 <b>${report.turn}</b> 回合落幕。使者與軍隊同時抵達，帝國的帳冊與戰報如下。</p>
      <div class="report-grid">
        <div class="report-panel">
          <h4>本回合收支</h4>
          <div class="report-line"><span>${ico('gold')} 金幣收入</span><b class="pos">+${report.income.gold}</b></div>
          <div class="report-line"><span>${ico('food')} 糧食收入</span><b class="pos">+${report.income.food}</b></div>
          <div class="report-line"><span>${ico('wood')} 木材收入</span><b class="pos">+${report.income.wood}</b></div>
          <div class="report-line"><span>${ico('stone')} 石料收入</span><b class="pos">+${report.income.stone}</b></div>
          <div class="report-line"><span>軍隊糧食維持</span><b class="neg">-${report.upkeep.food}</b></div>
          <div class="report-line" style="border-top:1px solid var(--line-soft);margin-top:5px;padding-top:8px"><span>淨收益</span><b class="${net.food >= 0 ? 'pos' : 'neg'}">${fmt(net.gold)}金 · ${fmt(net.food)}糧</b></div>
        </div>
        <div class="report-panel">
          <h4>勢力動向</h4>
          ${events.length ? `<ul class="report-events">${events.slice(0, 7).map((e) => `<li>${ico(e.icon)}<span>${esc(e.text)}</span></li>`).join('')}</ul>` : `<p class="report-quiet">列強按兵不動。這是暴風雨前的寧靜。</p>`}
        </div>
      </div>`;
    this.openModal({
      art: 'assets/images/throne.png', eyebrow: '回合落幕', title: `第 ${report.turn} 回合結束`,
      subtitle: events.length ? `${events.length} 件大事發生` : '帝國在沉默中醞釀下一步',
      body,
      actions: `<button class="btn btn-primary" data-close>${ico('crown')}<span>迎接第 ${g.state.turn} 回合</span></button>`,
      size: 'medium',
      onClose: () => { if (g.state.isOver) this.showGameOver(); },
    });
  }

  confirmMenu() {
    this.openModal({
      eyebrow: '離開戰爭地圖', title: '返回主選單？',
      body: `<p class="lede">目前的進度會保留在本機瀏覽器中。你可以隨時從主選單點擊「繼續王朝」回到第 ${this.game.state.turn} 回合。</p>`,
      actions: `<button class="btn btn-ghost" data-close>留在這裡</button><button class="btn btn-primary" id="confirm-menu">${ico('crown')}<span>返回主選單</span></button>`,
      size: 'small',
    });
    document.getElementById('confirm-menu')?.addEventListener('click', () => {
      this.game.save();
      this.closeModal();
      this.showScreen('menu');
    });
  }

  // ── game over ─────────────────────────────────────────────────────────────
  showGameOver() {
    if (document.querySelector('.gameover')) return;
    const g = this.game;
    const won = g.state.winner === g.state.playerFactionId;
    const winner = g.state.winner ? g.faction(g.state.winner) : null;
    const el = document.createElement('div');
    el.className = 'gameover open';
    el.innerHTML = `
      <div class="gameover-bg" style="background-image:url('${won ? 'assets/images/throne.png' : 'assets/images/battle.png'}')"></div>
      <div class="gameover-inner">
        <p class="eyebrow">${won ? '天下歸一' : '王冠墜落'}</p>
        <h1>${won ? '勝利' : '敗亡'}</h1>
        <h2>${won ? '天下歸一' : '王朝傾覆'}</h2>
        <p>${won
          ? `第 ${g.state.turn} 回合，${esc(g.state.identity.nationName)} 的旗幟插遍每一寸土地。${esc(g.state.identity.leaderName)} 的名字將與神話並列。`
          : `第 ${g.state.turn} 回合，${esc(winner?.name || '敵軍')} 的鐵蹄踏碎了你的王座。但歷史從不止於一場敗仗。`}</p>
        <div class="gameover-stats">
          <div><b>${g.state.turn}</b><span>回合</span></div>
          <div><b>${g.state.stats.battlesWon}</b><span>勝仗</span></div>
          <div><b>${g.state.stats.captured}</b><span>征服</span></div>
          <div><b>${g.state.stats.recruited}</b><span>徵兵</span></div>
        </div>
        <button class="btn btn-primary btn-lg" id="over-again">${ico('sword')}<span>再啟征程<small>重開新局</small></span></button>
        <button class="btn btn-ghost btn-lg" id="over-menu">${ico('crown')}<span>返回主選單<small>回到開端</small></span></button>
      </div>`;
    document.body.appendChild(el);
    el.querySelector('#over-again').addEventListener('click', () => {
      el.remove();
      this.game.clearSave();
      this.showScreen('setup');
    });
    el.querySelector('#over-menu').addEventListener('click', () => {
      el.remove();
      this.showScreen('menu');
      this.refreshMenu();
    });
  }
}