// ============ 配置 ============
const MAP_RADIUS = 4;
const POLY_SIZE = 36;       // 六边形基础尺寸（屏幕 px @ zoom=1），原 52 缩小使网格更紧凑
const SIDES = 6;  // 正六边形
let currentLayer = 'earth';
// 顶栏 / 浏览器标签显示的层名（与 worldNav 的 data-world 对应）
const WORLD_NAMES = { earth: '大地', under: '地下', core: '地心', sky: '天空', star: '星空' };

// 视觉增强：地块高程 / 分层背景（A+B+C+D+E 原型）
const SANDBOX_DEPTH = 16;   // 沙盘底板厚度（屏幕 px，zoom=1）—— 适度加厚，块有"实体感"但不显重
// 高程改为 5 个离散档（-2/-1/0/1/2），档间高度差固定（用户要求：平衡、去掉连续噪声的"不平衡"感）
const TIER_STEP = 4;        // 固定档间高度差（屏幕 px @ zoom=1）：顶边齐平，落差靠侧壁厚度体现，清晰但不抢眼
const TERRAIN_TIER = {      // 各地貌对应档位（-2..2）
  mountain: 2, snow: 1, forest: 0, plain: 0, desert: 0, water: -1
};

// ===== 高度驱动地形：捏高度 → 自动映射地块/景色/墙高（沙盘重构核心） =====
// 玩家只操作 height 一个维度，terrain / tier / variant 全部由 height 派生
const MAX_HEIGHT = 12;                // 高度层数上限（已放开，原 6）
const MIN_HEIGHT = 1;                // 高度下限：从 1 开始（取消 0 档，最低档=水）
let editingHeight = false;            // 当前是否处于"捏高度"笔触中
let heightBrush = 1;                  // 本次笔触方向：+1 升 / -1 降
const heightStroke = new Set();       // 本次笔触已处理过的格，避免拖过即爆
let heightTarget = 3;                  // 滑块目标高度（绝对）：拖动滑块即把悬停格设为该高度
function heightLabel(h) { return h + ' · ' + TERRAIN[heightToTerrain(h)].name; }

// height → 地块类型：水位线 1 为水（最低档），越高依次为荒漠/平原/森林/山地/雪地
function heightToTerrain(h) {
  if (h <= 1) return 'water';      // 1（最低档）
  if (h <= 3) return 'desert';     // 2-3
  if (h <= 5) return 'plain';      // 4-5
  if (h <= 7) return 'forest';     // 6-7
  if (h <= 10) return 'mountain';  // 8-10
  return 'snow';                   // 11-12
}
// height → 视觉档位：随高度线性递增，捏高即变立体（与 TERRAIN_TIER 解耦，更直观）
function heightToTier(h) { return h - 1; }   // h1→0(水最低) … h12→11(雪最高)
// 地形 → 初始高度：让随机生成的地图 height 与现有地形大致对应，作为编辑起点
function terrainToHeight(t) {
  return ({ water: 1, desert: 2, plain: 4, forest: 6, mountain: 8, snow: 11 })[t] || 1;
}
// 设定某格高度并派生 terrain/tier/variant（高度是唯一真值，其余查表）
// randomizeVariant=true：玩家改高度时随机选一张对应地形贴图（存为确定下标，避免逐帧闪烁）
function setHeight(tile, h, randomizeVariant) {
  h = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, h));
  tile.height = h;
  tile.terrain = heightToTerrain(h);
  tile.tier = heightToTier(h);
  if (randomizeVariant) {
    const raw = terrainTex[tile.terrain];
    const valid = [];
    if (Array.isArray(raw)) {
      for (let k = 0; k < raw.length; k++) {
        if (raw[k] && raw[k].complete && raw[k].naturalWidth) valid.push(k);
      }
    }
    tile.variant = valid.length ? valid[Math.floor(Math.random() * valid.length)] : -1;
  } else {
    tile.variant = -1;                          // 初始/非玩家变更：按坐标确定性变体，保持自然成片
  }
}

// 应用一次高度变更：更新 height，并实时派生 terrain/tier（每格独立，不联动周边，无坡度限制）
function applyHeight(tile, dir, skipStroke) {
  const key = tile.q + ',' + tile.r;
  if (!skipStroke) {                          // 拖动用去重守卫；滚轮是离散单点事件，不走守卫
    if (heightStroke.has(key)) return;        // 同一次笔触内不重复，避免拖过即爆
    heightStroke.add(key);
  }
  const old = (tile.height != null) ? tile.height : 0;
  const target = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, old + dir));
  if (target === old) return;                 // 已到上限/下限，无变化
  setHeight(tile, target, true);              // 玩家改高度→随机一张对应地形贴图
  markDirty(tile.q, tile.r);
  // 高度工具下，左右键/滚轮升降时实时同步滑块与标签（修复：升降时滑块不跟随）
  const sl = document.getElementById('bpHeightSlider');
  const lb = document.getElementById('bpHeightVal');
  if (sl && lb && buildMode && buildTool === 'height') {
    sl.value = String(target);
    lb.textContent = heightLabel(target);
  }
}
const LAYER_BG = {
  surface:    { top:'#0a1426', mid:'#102038', bot:'#16314f', stars:true,  silhouette:true,  embers:false }, // 大地兜底
  earth:      { top:'#0a1426', mid:'#102038', bot:'#16314f', stars:true,  silhouette:true,  embers:false },
  sky:        { top:'#1a2a4a', mid:'#3a5a8a', bot:'#86b4d8', stars:false, silhouette:false, embers:false },
  star:       { top:'#05060f', mid:'#0a0e1f', bot:'#101a33', stars:true,  silhouette:false, embers:false },
  under:      { top:'#160f06', mid:'#1f1509', bot:'#2a1d0e', stars:false, silhouette:false, embers:true  },
  core:       { top:'#2a0805', mid:'#4a1206', bot:'#5a1a06', stars:false, silhouette:false, embers:true  },
};

// 五层世界（自上而下）：星空 / 天空 / 大地 / 地下 / 地心
// 大地、天空按四个时间节点各配一段视频；星空、地下、地心各一段、不随时间变
// 每个世界固定一段背景视频；时间线只改色调（currentPalette.tint 叠加），不切换视频
const WORLDS = [
  { id:'star',  name:'星空', icon:'✦',  image:'assets/bg/bg_star.jpg' },
  { id:'sky',   name:'天空', icon:'🌤', image:'assets/bg/bg_sky.jpg' },
  { id:'earth', name:'大地', icon:'🌍', image:'assets/bg/bg_earth.jpg', sandbox:true },
  { id:'under', name:'地下', icon:'🕳', image:'assets/bg/bg_under.jpg' },
  { id:'core',  name:'地心', icon:'🔥', image:'assets/bg/bg_core.jpg' },
];


// ============ 时间轴 / 昼夜系统（E 原型） ============
// 单天 24h 在真实秒里的推进速度（调试用，可改）
const TIME_SPEED = 1 / 3600;            // 1 现实秒 = 1 游戏秒（→ 24游戏小时=24现实小时，与现实时间 1:1）
// 真实墙钟小时：直接取系统本地时刻（时+分/60+秒/3600），时钟与真实时间 100% 同步
function nowHours() {
  const d = new Date();
  return d.getHours() + d.getMinutes() / 60 + d.getSeconds() / 3600;
}
let timeOfDay = nowHours();   // 启动即取真实当前时刻（时分秒=系统本地时间），与真实时间同步
let timePlaying = true;        // 自动推进
let useImageBg = false;        // 场景背景图接入后由 loadSceneImage() 置 true

// 调色板关键帧：清晨 / 正午 / 黄昏 / 黑夜
const TIME_KEYFRAMES = [
  { h:5,  label:'清晨', scene:'dawn',
    sky:['#16243f','#3a4a6a','#e89a63'], ambient:'#ffd9a0', amb:0.28, sun:-Math.PI*0.78, star:0.30, light:0.90,
    tint:[255,180,120], tintA:0.12 },
  { h:12, label:'正午', scene:'day',
    sky:['#2a5a9a','#3f7fc0','#86bce8'], ambient:'#ffffff', amb:0.06, sun:-Math.PI/2,    star:0.00, light:1.00,
    tint:[180,210,255], tintA:0.05 },
  { h:18, label:'黄昏', scene:'dusk',
    sky:['#2a2350','#6a3a6a','#e8703a'], ambient:'#ffb070', amb:0.32, sun:-Math.PI*0.22, star:0.18, light:0.82,
    tint:[255,140,80], tintA:0.18 },
  { h:21, label:'黑夜', scene:'night',
    sky:['#05060f','#0a0e1f','#101a33'], ambient:'#3a4a7a', amb:0.42, sun:-Math.PI/2,    star:0.92, light:0.62,
    tint:[40,70,150], tintA:0.30 },
];

// 四个时间节点的代表色（与 TIME_KEYFRAMES 顺序一致：清晨/正午/黄昏/黑夜）
// 用于时钟背景与表盘外环着色，让玩家一眼看出当前处于哪个时间节点
const NODE_RGB = [
  [255, 179, 0],     // 清晨：琥珀金 #FFB300
  [0, 229, 255],     // 正午：亮青 #00E5FF
  [255, 61, 0],      // 黄昏：烈焰红 #FF3D00
  [61, 61, 74],      // 黑夜：深灰 #3D3D4A
];

// ============ 游戏日历（纪 / 年 / 季节） ============
// 与真实秒推进的 24h 日循环解耦：每跨过一次午夜（timeOfDay 回环）记一天，
// 再由天数推出 纪·年·季节。下面数值为可调假设的 [PLACEHOLDER]，按手感改。
const ERA_NAME = '星元';                       // 纪名（游戏内虚构纪元）
const SEASONS = ['春', '夏', '秋', '冬'];        // 四季
const SEASON_ICONS = ['🌸', '☀', '🍂', '❄'];   // 季节图标（装饰）
const DAYS_PER_YEAR = 48;                       // 每年天数 [PLACEHOLDER]：48天=4季×12天
const DAYS_PER_SEASON = DAYS_PER_YEAR / 4;       // 每季天数（自动算出，勿手改）
let gameDay = 0;                                // 已过去的游戏天数（跨午夜 +1）

// 当前处于哪个时间节点（返回 0~3，对应 NODE_RGB / TIME_KEYFRAMES）
function currentNodeIndex(t) {
  let tt = t < TIME_KEYFRAMES[0].h ? t + 24 : t;
  let i = 0;
  while (i < TIME_KEYFRAMES.length - 1 && tt > TIME_KEYFRAMES[i + 1].h) i++;
  return i;
}

// 由累计天数推导 纪·年·季节
function getCalendar() {
  const year = Math.floor(gameDay / DAYS_PER_YEAR) + 1;
  const dayOfYear = gameDay % DAYS_PER_YEAR;
  const seasonIdx = Math.floor(dayOfYear / DAYS_PER_SEASON) % 4;
  const dayOfSeason = (dayOfYear % DAYS_PER_SEASON) + 1;
  return { year, seasonIdx, season: SEASONS[seasonIdx], seasonIcon: SEASON_ICONS[seasonIdx], dayOfSeason };
}

function hexToRgb(h){ const n = parseInt(h.replace('#',''), 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; }
function colorLerp(c1, c2, f){
  const a = hexToRgb(c1), b = hexToRgb(c2);
  const r = Math.round(a[0] + (b[0] - a[0]) * f);
  const g = Math.round(a[1] + (b[1] - a[1]) * f);
  const bl = Math.round(a[2] + (b[2] - a[2]) * f);
  return `rgb(${r},${g},${bl})`;
}
function mixColor(hex, ambHex, f){ return colorLerp(hex, ambHex, f); }

// 采样当前时间对应的天空/光照调色板（含跨午夜回环）
function sampleTime(t){
  let tt = t < TIME_KEYFRAMES[0].h ? t + 24 : t;
  let i = 0;
  while (i < TIME_KEYFRAMES.length - 1 && tt > TIME_KEYFRAMES[i + 1].h) i++;
  const a = TIME_KEYFRAMES[i];
  const b = (i === TIME_KEYFRAMES.length - 1) ? { ...TIME_KEYFRAMES[0], h: TIME_KEYFRAMES[0].h + 24 } : TIME_KEYFRAMES[i + 1];
  const span = (b.h - a.h) || 1;
  const f = Math.min(1, Math.max(0, (tt - a.h) / span));
  return {
    top:   colorLerp(a.sky[0], b.sky[0], f),
    mid:   colorLerp(a.sky[1], b.sky[1], f),
    bot:   colorLerp(a.sky[2], b.sky[2], f),
    ambient: f < 0.5 ? a.ambient : b.ambient,
    amb:   a.amb + (b.amb - a.amb) * f,
    sun:   a.sun + (b.sun - a.sun) * f,
    star:  a.star + (b.star - a.star) * f,
    light: a.light + (b.light - a.light) * f,
    tint:  [ Math.round(a.tint[0] + (b.tint[0] - a.tint[0]) * f),
             Math.round(a.tint[1] + (b.tint[1] - a.tint[1]) * f),
             Math.round(a.tint[2] + (b.tint[2] - a.tint[2]) * f) ],
    tintA: a.tintA + (b.tintA - a.tintA) * f,
    scene: f < 0.5 ? a.scene : b.scene,
    label: f < 0.5 ? a.label : b.label,
  };
}

// 每层天空：地表走时间轴；地下/太空保持原静态基调；所有层都带时间色调（用于视频叠加，不切换视频）
function getSky(layer, t){
  const tintPal = sampleTime(t);                 // 时间色调始终按时间算
  if (layer === 'earth') return tintPal;
  const bg = LAYER_BG[layer] || LAYER_BG.surface;
  return { top:bg.top, mid:bg.mid, bot:bg.bot, ambient:'#ffffff', amb:0.05,
           sun:-Math.PI/2, star: bg.stars ? 0.7 : 0, scene:'static', label:'', light:1.0,
           tint: tintPal.tint, tintA: tintPal.tintA };
}

// 当前帧调色板（render 每帧写入，供 drawHexPrism / drawStars 读取）
let currentPalette = getSky('earth', timeOfDay);

// ============ 地形 ============
const TERRAIN = {
  plain:    { name: '平原', color: '#6fa45c', microBg: '#5f9150', groundColor: '#7bb368', scene: 'village',  atmo: { haze: '#3f7a3a', glow: '#bfe89a', particle: 'leaf',    pcol: '#cdeb8f' } },
  forest:   { name: '森林', color: '#4a8550', microBg: '#3c6e42', groundColor: '#589a5c', scene: 'forest',   atmo: { haze: '#1f5a32', glow: '#76e0a0', particle: 'firefly', pcol: '#b6f0a0' } },
  mountain: { name: '山脉', color: '#938d85', microBg: '#827c74', groundColor: '#a39c93', scene: 'mountain', atmo: { haze: '#5b5566', glow: '#c3b8e0', particle: 'sparkle', pcol: '#dcd2f0' } },
  water:    { name: '水域', color: '#3f86b0', microBg: '#2f6f96', groundColor: '#4f97bd', scene: 'water',    atmo: { haze: '#124a7e', glow: '#5fb8e8', particle: 'bubble',  pcol: '#a8e6ff' } },
  desert:   { name: '荒漠', color: '#d2b277', microBg: '#c0a065', groundColor: '#e0c187', scene: 'desert',   atmo: { haze: '#a8803a', glow: '#ffd28a', particle: 'dust',    pcol: '#ffe0a8' } },
  snow:     { name: '雪地', color: '#c4d6e2', microBg: '#b3c8d6', groundColor: '#d6e4ee', scene: 'snow',     atmo: { haze: '#88a6bc', glow: '#dceefb', particle: 'snow',    pcol: '#eaf4ff' } }
};

// ============ 沙盘地表 AI 插画贴图 + 卡通道具（无素材自动回退纯色） ============
// 素材由用户在 assets/terrain/ 下放置（命名见 terrain_asset_spec.md）；缺失则 onerror→null，绘制时跳过
const terrainTex = {};   // 地形 id -> Image[] 或 Image（顶面静态贴图兜底）
const terrainVid = {};   // 地形 id -> Video（动态纹理，用户提供的动画素材）
const terrainVidReady = {};
// 地表素材清单（统一取自 assets/terrain/，按地形分类；文件名即素材库真实存在的 png）
// 顺序即变体索引：tile.variant 存该数组下标，渲染时按索引精确取图
// 运行时优先以 assets/terrain/manifest.json 为准（若存在），实现「统一从这里取值」；此处为兜底清单
let TERRAIN_ASSETS = {
  plain:    ['plain_2.png','plain_4.png','plain_5.png','plain_8.png','plain_12.png','plain_13.png','plain_14.png','plain_16.png'],
  forest:   ['forest_2.png','forest_6.png','forest_7.png','forest_8.png','forest_9.png','forest_13.png','forest_16.png'],
  mountain: ['mountain_2.png','mountain_10.png','mountain_16.png'],
  water:    ['water_2.png','water_3.png','water_4.png','water_5.png','water_6.png','water_7.png','water_8.png','water_9.png','water_10.png','water_11.png','water_12.png','water_13.png','water_14.png','water_15.png'],
  desert:   ['desert_2.png','desert_4.png','desert_7.png','desert_13.png','desert_14.png'],
  snow:     ['snow_2.png','snow_3.png','snow_14.png']
};
function loadTerrainAssets(onProgress){
  // ---- A. 多变体动态视频（当前未启用：草地改用 PNG 图片，避免视频编码兼容性风险）----
  // 如需恢复视频纹理，把地形 id 加回此对象即可（例：{ plain: [2,4,5,8,12,13,14] }）
  const VIDEO_VARIANTS = {};

  let vidRoot = document.getElementById('vidRoot');
  if (!vidRoot) {
    vidRoot = document.createElement('div');
    vidRoot.id = 'vidRoot';
    vidRoot.style.cssText = 'position:fixed;left:0;top:0;width:180px;height:180px;opacity:0.01;pointer-events:none;z-index:-1;overflow:hidden;';
    document.body.appendChild(vidRoot);
  }
  const kickPlay = () => Object.values(terrainVid).forEach(arr => {
    if (!Array.isArray(arr)) return;
    arr.forEach(v => { if (v._ready && v.readyState>=2){const p=v.play();if(p&&p.catch)p.catch(()=>{});} });
  });

  Object.keys(VIDEO_VARIANTS).forEach(id => {
    terrainVid[id] = [];          // 数组：每元素是一个独立 video（不同裁切区域=不同草地质感）
    terrainVidReady[id] = 0;       // 已就绪的视频数
    const variants = VIDEO_VARIANTS[id];
    variants.forEach(idx => {
      const v = document.createElement('video');
      v.muted = true; v.loop = true; v.playsInline = true; v.preload = 'auto'; v.autoplay = true;
      v.setAttribute('playsinline',''); v.setAttribute('webkit-playsinline','');
      v.src = 'assets/terrain/' + id + '_' + idx + '.mp4';
      v._ready = false;
      v.onerror = () => { v._ready = false; };
      v.oncanplaythrough = () => {
        v._ready = true;
        terrainVidReady[id]++;
        const p = v.play(); if (p && p.catch) p.catch(() => {});   // autoplay policy 兜底
      };
      vidRoot.appendChild(v);
      terrainVid[id].push(v);
    });
  });
  // 兜底：即便 muted 自动播放被浏览器策略拦，用户首次点击/按键时补播
  const onceKick = () => { kickPlay(); window.removeEventListener('pointerdown', onceKick); window.removeEventListener('keydown', onceKick); };
  window.addEventListener('pointerdown', onceKick);
  window.addEventListener('keydown', onceKick);
  // ---- B. 静态 PNG 贴图：先以 manifest.json 为权威清单（单次加载，杜绝二次加载闪烁），全部 decode 后 resolve ----
  return fetch('assets/terrain/manifest.json')
    .then(r => (r && r.ok) ? r.json() : null)
    .catch(() => null)
    .then(manifest => {
      if (manifest && typeof manifest === 'object') {
        const next = {};
        Object.keys(TERRAIN).forEach(id => { if (Array.isArray(manifest[id])) next[id] = manifest[id]; });
        if (Object.keys(next).length) TERRAIN_ASSETS = Object.assign({}, TERRAIN_ASSETS, next);
      }
      const all = [];
      Object.keys(TERRAIN_ASSETS).forEach(id => {
        terrainTex[id] = [];
        TERRAIN_ASSETS[id].forEach(fname => {
          const im = new Image();
          im.onerror = () => {};
          im.src = 'assets/terrain/' + fname;
          terrainTex[id].push(im);
          all.push(im);
        });
      });
      let done = 0; const total = all.length;
      return new Promise(resolve => {
        if (!total) { resolve(); return; }
        const tick = () => {
          done++;
          if (onProgress) onProgress(done / total);
          if (done >= total) resolve();
        };
        all.forEach(im => {
          const fin = () => { if (im._fin) return; im._fin = true; tick(); };
          if (im.complete && im.naturalWidth) { fin(); return; }
          im.onload = fin;
          im.onerror = fin;
          if (im.decode) { try { im.decode().then(fin, fin); } catch (e) { fin(); } }
        });
      });
    });
}
// 从多变体中按地块坐标确定性选取一张（仅限已成功加载的变体，被删除/404 的自动跳过，杜绝空格子）
function pickVariant(texArr, q, r){
  if (!texArr || !texArr.length) return null;
  const valid = [];
  for (let k = 0; k < texArr.length; k++) {
    const im = texArr[k];
    if (im && im.complete && im.naturalWidth) valid.push(im);
  }
  if (!valid.length) return null;
  const idx = Math.floor(_vnoise(q, r, TERRAIN_NOISE_SCALE) * valid.length) % valid.length;
  return valid[idx];
}
// 与 pickVariant 同逻辑，但返回「已加载变体的数组下标」（用于把玩家选定的素材固定到 tile.variant）
function pickVariantIndex(texArr, q, r, h){
  if (!texArr || !texArr.length) return -1;
  const valid = [];
  for (let k = 0; k < texArr.length; k++) {
    const im = texArr[k];
    if (im && im.complete && im.naturalWidth) valid.push(k);
  }
  if (!valid.length) return -1;
  // 把高度掺入确定性噪声：同格不同高度→落到不同变体图，升降时贴图明显切换（不闪、每高度稳定）
  const n = _vnoise(q, r + (h || 0) * 3.137, TERRAIN_NOISE_SCALE);
  const idx = Math.floor(n * valid.length) % valid.length;
  return valid[idx];
}
// 全局光影统一层：顶面与侧壁共用，使所有地表（含动态视频）随晨昏夜同步变暗/染色，归为一个世界
function applyTerrainLighting(x, y, w, h) {
  const L = (currentPalette && currentPalette.light) || 1.0;        // 0.62(夜)..1.0(正午)
  const ambHex = (currentPalette && currentPalette.ambient) || '#ffffff';
  const ambA = (currentPalette && currentPalette.amb) || 0.1;
  const L_FLOOR = 0.78;                                            // [PLACEHOLDER] 夜部最亮保底
  const gv = Math.round(255 * Math.max(L_FLOOR, L));
  ctx.globalCompositeOperation = 'multiply';
  ctx.fillStyle = `rgb(${gv},${gv},${gv})`;
  ctx.fillRect(x, y, w, h);
  ctx.globalCompositeOperation = 'overlay';
  const GRADE_A = 0.55;                                            // [PLACEHOLDER] 染色强度
  ctx.globalAlpha = Math.min(0.7, ambA * GRADE_A * 2.0);
  ctx.fillStyle = ambHex;
  ctx.fillRect(x, y, w, h);
  ctx.globalAlpha = 1;
  ctx.globalCompositeOperation = 'source-over';
}
// 解析某格地形纹理源（动态视频优先，静态 PNG 兜底）；顶面/侧壁共用，避免重复逻辑
function resolveTerrainSrc(tile) {
  if (!tile || !tile.terrain) return null;
  const vArr = terrainVid[tile.terrain];
  if (Array.isArray(vArr) && vArr.length > 0) {
    const vi = Math.floor(_vnoise(tile.q, tile.r, TERRAIN_NOISE_SCALE) * vArr.length) % vArr.length;
    const vid = vArr[vi];
    if (vid && vid._ready && vid.readyState >= 2) return vid;
  }
  const raw = terrainTex[tile.terrain];
  if (Array.isArray(raw) && raw.length) {
    let vi = (typeof tile.variant === 'number' && tile.variant >= 0 && tile.variant < raw.length) ? tile.variant : -1;
    if (vi < 0 || !(raw[vi] && raw[vi].complete && raw[vi].naturalWidth)) {
      vi = pickVariantIndex(raw, tile.q, tile.r, tile.height);
    }
    if (vi >= 0 && raw[vi] && raw[vi].complete && raw[vi].naturalWidth) return raw[vi];
  } else if (raw && raw.complete && raw.naturalWidth) {
    return raw;
  }
  return null;
}
// 侧壁贴图：复用顶面同一张地形图（世界坐标对齐），裁剪到单个墙面 → 像一块被竖向挤出的实心地形方块
// 顶面显示六边形 crop，侧壁显示同图在它下方的延续部分；升降时整块看起来"有厚度"，而非贴图薄盖
function paintWallTexture(cx, cyTop, topR, wallH, src, terrain, a, b, lit) {
  const isVideo = (src && src.tagName === 'VIDEO');
  const S = topR * 2;
  let tw, th;
  if (isVideo) { tw = src.videoWidth || 180; th = src.videoHeight || 180; }
  else { tw = src.naturalWidth || 480; th = src.naturalHeight || 480; }
  const tilePx = S * 1.5;
  const sc = tilePx / tw;
  const dw = tw * sc, dh = th * sc;
  const ox = cx - dw / 2, oy = cyTop - dh / 2;   // 与顶面同一世界坐标锚点 → 自然延续
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.lineTo(b.x, b.y + wallH); ctx.lineTo(a.x, a.y + wallH);
  ctx.closePath();
  ctx.clip();
  // 墙面包围盒（用绝对值，避免左向墙 b.x<a.x 时 fillRect 负宽不生效）
  const minX = Math.min(a.x, b.x) - 2, minY = Math.min(a.y, b.y) - 2;
  const wW = Math.max(a.x, b.x) - minX + 2, wH = (Math.max(a.y, b.y) + wallH) - minY + 2;
  // 底色兜底（贴图未完全覆盖处不露背景）
  ctx.fillStyle = (currentPalette && currentPalette.ambient) || '#000';
  ctx.fillRect(minX, minY, wW, wH);
  ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high';
  ctx.globalAlpha = (terrain === 'water') ? 0.92 : 0.82;
  const cols = Math.ceil(S / dw) + 1, rows = Math.ceil(S / dh) + 1;
  for (let r = -1; r <= rows; r++) {
    for (let c = -1; c <= cols; c++) ctx.drawImage(src, ox + c * dw, oy + r * dh, dw, dh);
  }
  ctx.globalAlpha = 1;
  // 全局晨昏夜光影（与顶面共用 applyTerrainLighting）
  applyTerrainLighting(minX, minY, wW, wH);
  // 方向受光：朝太阳的侧壁更亮、背光的更暗；顶→底再轻微压暗，强化立体
  ctx.globalCompositeOperation = 'multiply';
  const d = Math.max(-1, Math.min(1, lit));
  const topM = Math.max(0.70, 0.90 + d * 0.10);
  const botM = Math.max(0.60, 0.80 + d * 0.10);
  const g = ctx.createLinearGradient(0, a.y, 0, a.y + wallH);
  g.addColorStop(0, `rgb(${Math.round(255 * topM)},${Math.round(255 * topM)},${Math.round(255 * topM)})`);
  g.addColorStop(1, `rgb(${Math.round(255 * botM)},${Math.round(255 * botM)},${Math.round(255 * botM)})`);
  ctx.fillStyle = g;
  ctx.fillRect(minX, minY, wW, wH);
  ctx.globalCompositeOperation = 'source-over';
  ctx.restore();
}
// 顶面贴图/视频纹理：裁剪进六边形；支持 Image（静态）和 Video（动态）两种源
function paintHexTexture(cx, cyTop, topR, src, terrain){
  const isVideo = (src && src.tagName === 'VIDEO');
  const isWater = terrain === 'water';
  const S = topR * 2;
  // Video 用 videoWidth/videoHeight，Image 用 naturalWidth/naturalHeight
  let tw, th;
  if (isVideo) {
    tw = src.videoWidth || 180; th = src.videoHeight || 180;
  } else {
    tw = src.naturalWidth || 480; th = src.naturalHeight || 480;
  }
  // 每块显示贴图约1.5倍六边形宽度 → 大块色域+清晰细节，不稀碎不模糊
  const tilePx = S * 1.5;
  const sc = tilePx / tw;
  const dw = tw * sc, dh = th * sc;
  const ox = cx - dw / 2, oy = cyTop - dh / 2;
  const cols = Math.ceil(S / dw) + 1, rows = Math.ceil(S / dh) + 1;
  const hp = prismTopPoints(cx, cyTop, topR);
  ctx.save();
  ctx.beginPath();
  hp.forEach((p, i) => i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y));
  ctx.closePath();
  ctx.clip();
  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = 'high';
  // 半透明融合：让贴图与底色/光照自然混合，不完全盖死
  ctx.globalAlpha = isWater ? 0.90 : 0.75;
  for (let r = -1; r <= rows; r++) {
    for (let c = -1; c <= cols; c++) {
      ctx.drawImage(src, ox + c * dw, oy + r * dh, dw, dh);
    }
  }
  ctx.globalAlpha = 1;
  // 全局光影统一层（抽成 applyTerrainLighting，与侧壁共用，保证顶面/侧壁随晨昏夜同步）
  applyTerrainLighting(cx - topR * 1.3, cyTop - topR * 1.3, topR * 2.6, topR * 2.6);
  ctx.restore();
}
// 贴图加载已合并到 loadTerrainAssets(onProgress)，在 init() 中带进度闸门调用

// manifest 二次加载已移除：权威清单改为在 loadTerrainAssets() 内一次性 fetch + 加载，避免贴图闪烁

// ============ 建筑 ============
const BUILDINGS = {
  farm:     { name: '农场', icon: '🌾', color: '#8bc34a', yield: { food: 8 } },
  lumber:   { name: '伐木场', icon: '🪓', color: '#795548', yield: { wood: 6 } },
  mine:     { name: '矿场', icon: '⛏', color: '#ff9800', yield: { metal: 5 } },
  house:    { name: '民居', icon: '🏠', color: '#64b5f6', yield: { pop: 4 } },
  market:   { name: '集市', icon: '🏪', color: '#4dd0e1', yield: { gold: 6 } },
  temple:   { name: '神庙', icon: '⛩', color: '#fff176', yield: { culture: 3 } },
  barracks: { name: '兵营', icon: '⚔', color: '#ef5350', yield: { military: 8 } },
  library:  { name: '图书馆', icon: '📚', color: '#ab47bc', yield: { research: 4 } }
};

// ============ 单位 ============
const UNITS = {
  farmer:   { name: '农夫', icon: '👨🌾', role: 'farm' },
  lumberjack:{ name: '伐木工', icon: '🪓', role: 'lumber' },
  miner:    { name: '矿工', icon: '⛏️', role: 'mine' },
  merchant: { name: '商人', icon: '🧑💼', role: 'trade' },
  guard:    { name: '守卫', icon: '💂', role: 'defense' },
  scholar:  { name: '学者', icon: '📖', role: 'research' },
  priest:   { name: '祭司', icon: '🧙', role: 'culture' },
  child:    { name: '孩童', icon: '👶', role: 'none' },
  fisher:   { name: '渔民', icon: '🎣', role: 'fish' }
};

// ============ 全局状态 ============
const BOTTOM_BAR_H = 72;   // 主沙盘底部功能栏高度（与 #bottomBar CSS 保持一致）
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let W, H;
let camera = { x: 0, y: 0, zoom: 1.17 };   // 主世界默认缩放；原 1.6 偏近，按三档滚轮缩小（×0.9³≈0.729）降到 1.17，进入时沙盘更开阔
let hoveredTile = null;
let selectedTile = null;

// 拖拽状态（修复版）
let isMouseDown = false;
let hasDragged = false;
let mouseDownX = 0;
let mouseDownY = 0;
let dragCamStartX = 0;
let dragCamStartY = 0;
let camInteracting = false;        // 相机平移/缩放进行中：真时关阴影投影并复用地块缓存，提升拖动/缩放流畅度
let _camIntT = null;               // 缩放交互的 debounce 定时器
let _cachedSorted = null;          // 按 currentLayer 缓存的绘制顺序地块（交互期复用，静止帧每帧重建）
let _cachedSortedLayer = null;
let shadowFade = 1;                // 阴影投影强度淡入淡出：交互中→0（关），松手/停滚→1（渐入），避免明暗硬跳变
let worldCache = null, worldCacheCtx = null;   // 交互期离屏世界快照：静止帧把世界烘焙进此画布，拖动/缩放时仅 blit（O(1)），纹理不丢、不掉帧
let worldCacheValid = false;
const _cachedCam = { x: 0, y: 0, zoom: 1 };    // 快照对应的相机状态，交互期按相机增量平移/缩放 blit
let releaseBlend = 0;              // 松手过渡淡出：0=不混合，>0 时在静止帧上方叠快照（globalAlpha 衰减），平滑 blit→全量的亚像素跳
const MIN_ZOOM = 0.7, MAX_ZOOM = 7;            // 缩放下限抬高（别太小）+ 上限 +3 单位（原 0.4 / 4）

let tiles = [];

// ============ 建造模式状态 ============
let buildMode = false;          // 建造模式总开关
let buildTool = 'terrain';      // 当前工具：'terrain' | 'move'
let buildBrush = 'plain';       // 当前画笔：地形 id（移动工具不用）
let buildVariant = 'random';   // 当前素材变体：'random' 或 TERRAIN_ASSETS[id] 的下标
let swapFirst = null;           // 移动工具：已选的第一块（待交换）
let dragSwapFrom = null;        // 移动工具：拖拽起点
let draggingSwap = false;       // 移动工具：正在拖拽交换
let swapFlashes = [];           // 交换完成的金色闪光（淡出）

let animTime = 0;
let stars = [];
let embers = [];
let ambParticles = [];

// 微观世界
let microState = null;
let microCanvas, microCtx;
let microAnimId = null;
let microGridCache = null;   // 微观世界：背景 + 20×20 离屏缓存（静态，逐帧只贴图）
let microGridOn = false;     // 微观世界：顶部"网格"开关 —— 叠加矩形网格（仅浮岛内）
let microZoom = 1;            // 缩放倍率（1 = 初始适配画布）
let microPanX = 0, microPanY = 0;     // 平移偏量（画布空间像素）
let microPanning = false;             // 中键拖拽平移中？
let microPanStart = null;             // 平移起点 {x,y}
let microViewOpen = false;            // 微观视图是否打开：打开时主世界 render 暂停重绘，避免双循环抢 CPU

// ============ 地图生成 ============
function buildTile(cell, terrain) {
  const { q, r, s } = cell;
  const hasBuilding = Math.random() > 0.7;
  const buildingType = hasBuilding ? Object.keys(BUILDINGS)[Math.floor(Math.random() * Object.keys(BUILDINGS).length)] : null;
  const unitCount = hasBuilding ? Math.floor(Math.random() * 4) + 1 : (Math.random() > 0.55 ? Math.floor(Math.random() * 2) + 1 : 0);
  const units = [];
  for (let i = 0; i < unitCount; i++) {
    const uKeys = Object.keys(UNITS);
    units.push({
      ...UNITS[uKeys[Math.floor(Math.random() * uKeys.length)]],
      id: Math.random().toString(36).substr(2, 6),
      status: Math.random() > 0.3 ? 'working' : 'resting',
      hp: 80 + Math.floor(Math.random() * 40),
      energy: 60 + Math.floor(Math.random() * 40),
      mood: ['😊','😐','😄'][Math.floor(Math.random() * 3)],
      level: Math.floor(Math.random() * 3) + 1
    });
  }
  // 高程：地形决定基础档位 + 确定性噪声在带内微抖（+0/+1，雪地 +0..+2）
  // 同类地块不再完全齐平 → 自然起伏，但跨种类的层差仍然清晰可读
  const baseH = terrainToHeight(terrain);
  const jitterRange = terrain === 'snow' ? 3 : (terrain === 'water' ? 1 : 2);
  const jit = jitterRange > 1 ? Math.floor(_vnoise(q, r, 3.0) * jitterRange) : 0;
  const h = Math.min(MAX_HEIGHT, baseH + jit);
  const tier = heightToTier(h);
  tiles.push({ q, r, s, terrain, layer: 'earth', hasBuilding, buildingType,
    buildingLevel: hasBuilding ? Math.floor(Math.random() * 3) + 1 : 0,
    units, unitCount, explored: Math.random() > 0.2,
    tier,
    height: h
  });
}

function generateMap() {
  tiles = [];
  const all = [];
  for (let q = -MAP_RADIUS; q <= MAP_RADIUS; q++) {
    for (let r = -MAP_RADIUS; r <= MAP_RADIUS; r++) {
      const s = -q - r;
      if (Math.abs(s) > MAP_RADIUS) continue;
      const dist = Math.sqrt(q * q + r * r) / MAP_RADIUS;
      // 平滑群系场：径向偏置 + 低频噪声斑块 → 同种类聚簇成片、中心→外缘有序分层
      const blob = _vnoise(q + 100, r + 100, BIOME_SCALE);          // 有机斑块场 [0,1]
      let field = BIOME_RADIAL * dist + (1 - BIOME_RADIAL) * blob; // 中心低→外缘高，整体有序
      field = Math.max(0, Math.min(1, field));
      // 点缀类型各自的噪声场（用于按数量精确挑选成片）
      const waterScore  = _vnoise(q + 777, r + 777, BIOME_SCALE * 1.3);
      const desertScore = _vnoise(q - 333, r - 333, BIOME_SCALE * 1.1);
      all.push({ q, r, s, field, waterScore, desertScore });
    }
  }
  const N = all.length;
  // 归一化比例 → 各类型目标数量（最大余数法保证整数且总和=N）
  let sum = 0; for (const k in TERRAIN_RATIO) sum += Math.max(0, TERRAIN_RATIO[k]);
  if (sum <= 0) sum = 1;
  const counts = {}; const frac = {}; let assigned = 0;
  for (const k in TERRAIN_RATIO) {
    const c = (Math.max(0, TERRAIN_RATIO[k]) / sum) * N;
    counts[k] = Math.floor(c); frac[k] = c - counts[k]; assigned += counts[k];
  }
  let rem = N - assigned;
  const remOrder = Object.keys(frac).sort((a, b) => frac[b] - frac[a]);
  for (let i = 0; i < rem; i++) counts[remOrder[i % remOrder.length]]++;

  const taken = new Set();
  // 点缀类型（水/荒漠）：按各自噪声场挑出 top-N 个地块 → 成片/盆地感，数量精确
  const carve = (type, n, key) => {
    if (n <= 0) return;
    const pool = all.map((t, idx) => ({ idx, v: t[key] })).sort((a, b) => b.v - a.v);
    let placed = 0;
    for (const p of pool) {
      if (placed >= n) break;
      if (taken.has(p.idx)) continue;
      taken.add(p.idx);
      buildTile(all[p.idx], type);   // 关键：真正把该地块生成成对应地形（原代码漏了这一步）
      placed++;
    }
  };
  carve('water',   counts.water,   'waterScore');
  carve('desert',  counts.desert,  'desertScore');

  // 主体陆地（平原→森林→山脉→雪地 沿场值由低到高排布）：按归一化区间切分 → 精确比例 + 自然分层
  const mainOrder = ['plain', 'forest', 'mountain', 'snow'];
  const remaining = all.map((t, idx) => idx).filter(i => !taken.has(i)).sort((a, b) => all[a].field - all[b].field);
  let cursor = 0;
  for (const t of mainOrder) {
    for (let i = 0; i < counts[t] && cursor < remaining.length; i++, cursor++) {
      taken.add(remaining[cursor]);
      buildTile(all[remaining[cursor]], t);
    }
  }
  // 四舍五入残余（极少量）→ 平原兜底
  for (; cursor < remaining.length; cursor++) buildTile(all[remaining[cursor]], 'plain');
  // 安全校验：确保每个有效位置都有 tile（防止分配逻辑遗漏导致空格子）
  if (tiles.length < N) console.warn(`[世界] 地图覆盖不完整: ${tiles.length}/${N}，已自动补全平原`);
  const generated = new Set(tiles.map(t => t.q + ',' + t.r));
  for (const pos of all) {
    const k = pos.q + ',' + pos.r;
    if (!generated.has(k)) buildTile(pos, 'plain');
  }
}

// ============ 坐标工具 ============
function hexToPixel(q, r) {
  const x = POLY_SIZE * (Math.sqrt(3) * q + Math.sqrt(3) / 2 * r);
  const y = POLY_SIZE * (3 / 2 * r);
  let wx = x * camera.zoom;
  let wy = y * camera.zoom;
  return { x: wx + W / 2 + camera.x, y: wy + H / 2 + camera.y };
}

function pixelToHex(px, py) {
  const size = POLY_SIZE * camera.zoom;
  let wx = px - W / 2 - camera.x;
  let wy = py - H / 2 - camera.y;
  const x = wx / size;
  const y = wy / size;
  let q = (Math.sqrt(3) / 3 * x - 1 / 3 * y);
  let r = (2 / 3 * y);
  const fq = Math.round(q), fr = Math.round(r);
  return { q: fq, r: fr, s: -fq - fr };
}

function getTile(q, r) { return tiles.find(t => t.q === q && t.r === r && t.layer === currentLayer); }
// 每帧构建一次的地块索引，供 drawHexPrism 判断相邻地形（O(1) 查找，避免逐墙 O(N) 搜索）
let _tileGrid = null;
function buildTileGrid() {
  _tileGrid = new Map();
  for (const t of tiles) if (t.layer === currentLayer) _tileGrid.set(t.q + ',' + t.r, t);
}
function getTileFast(q, r) { return _tileGrid ? _tileGrid.get(q + ',' + r) : null; }

// ============ 绘制12边形 ============
function drawPoly(x, y, size, fillColor, strokeColor, lineWidth) {
  ctx.beginPath();
  for (let i = 0; i < SIDES; i++) {
    const angle = (Math.PI * 2 / SIDES) * i - Math.PI / 2;
    const px = x + size * Math.cos(angle);
    const py = y + size * Math.sin(angle);
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  }
  ctx.closePath();
  if (fillColor) { ctx.fillStyle = fillColor; ctx.fill(); }
  if (strokeColor) { ctx.strokeStyle = strokeColor; ctx.lineWidth = lineWidth || 1; ctx.stroke(); }
}

// ============ 六棱柱（A 伪3D extrusion） ============
function prismTopPoints(cx, cy, topR) {
  const pts = [];
  for (let i = 0; i < SIDES; i++) {
    const angle = (Math.PI * 2 / SIDES) * i - Math.PI / 2;
    pts.push({ x: cx + topR * Math.cos(angle), y: cy + topR * Math.sin(angle) });
  }
  return pts;
}

// 六棱柱（柱体）：顶面中心在 (cx, cyTop)，向下延伸到共同底面（cyTop + wallH）
// hover=true 时显示明亮六边形轮廓；否则柔和、无生硬白网格线
// tile 用于判断相邻地块地形：同地形交界弱化缝、异地形交界保留软边界（去网格感，向 WorldBox 风格靠拢）
const NB_BY_WALL = [ [1,-1], [1,0], [0,1], [-1,1], [-1,0], [0,-1] ];  // 墙 i 对应的轴向邻居方向
// 确定性散列：相同 (q,r,k) 始终返回同一 [0,1)，保证像素噪声不闪烁、不重样
function _hash2(q, r, k) {
  let h = (q * 374761393 + r * 668265263 + k * 2147483647) | 0;
  h = Math.imul(h ^ (h >>> 13), 1274126177);
  h ^= h >>> 16;
  return ((h >>> 0) % 100000) / 100000;
}
// 地形变体噪声频率：[PLACEHOLDER] 控制"草地斑块"大小。值大=斑块大、更聚拢；值小=细碎。刷新后凭手感调
const TERRAIN_NOISE_SCALE = 4.5;   // [PLACEHOLDER] 草地斑块聚簇尺度：越大越紧挨成片（之前 3.0 偏碎）
// 生物群系聚簇（地形种类分布）：低频噪声斑块 + 轻微径向偏置 → 同种类紧挨成片、按海拔有序分层、边界有机
const BIOME_SCALE   = 2.2;   // [PLACEHOLDER] 聚簇尺度：越小地块越大片
const BIOME_RADIAL = 0.55;  // [PLACEHOLDER] 径向偏置(0=纯斑块,1=纯同心圆)：控制"层次"是否明显

// ============ 地表比例：创作者自调，应用后重构地表 ============
// 归一化后驱动生成；保证「精确比例 + 平滑场聚簇（同类成片、中心→外缘分层）」
// [PLACEHOLDER] 以下默认值为当前手调好的沙盘配比，创作者可随意改
const VALID_TERRAINS = ['plain', 'forest', 'mountain', 'snow', 'water', 'desert'];
let TERRAIN_RATIO = { plain: 4, forest: 3, mountain: 2, snow: 2, water: 1, desert: 0 };
const TERRAIN_RATIO_PRESETS = {
  default: { plain: 4, forest: 3, mountain: 2, snow: 2, water: 1, desert: 0 },
  island:  { plain: 5, forest: 3, mountain: 1, snow: 1, water: 2, desert: 0 },
  peaks:   { plain: 2, forest: 2, mountain: 5, snow: 4, water: 1, desert: 0 },
  water:   { plain: 3, forest: 2, mountain: 2, snow: 1, water: 5, desert: 0 }
};
function loadSavedRatio() {
  try {
    const raw = localStorage.getItem('terrainRatio');
    if (raw) { const o = JSON.parse(raw); for (const k in TERRAIN_RATIO) if (typeof o[k] === 'number') TERRAIN_RATIO[k] = o[k]; }
  } catch (e) {}
  // 清理废弃 key（已被移除的地形），防止分配数泄露导致空格子
  for (const k in TERRAIN_RATIO) if (!VALID_TERRAINS.includes(k)) delete TERRAIN_RATIO[k];
}
// 低频值噪声：返回 [0,1)，相邻坐标值接近 → 自然形成连续"草地斑块"，比逐格哈希有序、不杂乱
function _vnoise(q, r, scale){
  const x = q / scale, y = r / scale;
  const x0 = Math.floor(x), y0 = Math.floor(y);
  const fx = x - x0, fy = y - y0;
  const sx = fx*fx*(3 - 2*fx), sy = fy*fy*(3 - 2*fy);  // smoothstep 平滑插值
  const n00 = _hash2(x0,   y0,   131);
  const n10 = _hash2(x0+1, y0,   131);
  const n01 = _hash2(x0,   y0+1, 131);
  const n11 = _hash2(x0+1, y0+1, 131);
  const nx0 = n00 + (n10 - n00) * sx;
  const nx1 = n01 + (n11 - n01) * sx;
  return nx0 + (nx1 - nx0) * sy;
}
function drawHexPrism(cx, cyTop, topR, wallH, topColor, hover, tile) {
  const L = (currentPalette && currentPalette.light) || 1.0;   // 亮度保底因子 0.62..1.0
  const dim = (L - 1) * 60;                                     // 全局压暗量（夜晚约 -23）
  const base = mixColor(topColor, currentPalette.ambient, 0.12); // 时间色调（弱叠加，不压黑）
  const src = (tile && tile.terrain) ? resolveTerrainSrc(tile) : null;  // 及早解析纹理，侧壁/顶面共用
  if (wallH < 1) {
    drawPoly(cx, cyTop, topR, shadeColor(base, Math.max(-14, dim)),
             hover ? 'rgba(120,210,255,0.55)' : null, hover ? 1.5 : 0);
    return;
  }
  // 注：交互期不再走"纯色兜底"分支——改由 render() 把世界烘焙进离屏快照，拖动/缩放只 blit 快照，
  // 纹理全程可见且不掉帧（见 render() 的交互快速路径）。完整绘制始终走下方路径。
  const sun = currentPalette.sun;
  const top = prismTopPoints(cx, cyTop, topR);
  // 高度阴影：整块投下柔和投影，强化起伏层次（夜/低光下投影略重，但不超 0.30）
  const shA = 0.20 + 0.10 * (1 - L);
  ctx.save();
  if (shadowFade > 0.003) {   // 拖动/缩放时 shadowFade 收敛到 0（关投影省模糊卷积）；松手后由 render 渐入回 1，不再硬跳变
    ctx.shadowColor = `rgba(0,0,0,${(shA * shadowFade).toFixed(3)})`;
    ctx.shadowBlur = 7 * camera.zoom * shadowFade;
    ctx.shadowOffsetY = 4 * camera.zoom * shadowFade;
  }
  // 侧壁：柔和竖直渐变（顶微亮→底微暗），对比调弱 ~30% 更透气（不像重 3D 块）
  for (let i = 0; i < SIDES; i++) {
    const a = top[i], b = top[(i + 1) % SIDES];
    const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
    const ang = Math.atan2(mid.y - cyTop, mid.x - cx);
    const lit = Math.cos(ang - sun);                          // 朝向太阳的边更亮：-1..1
    if (src) {
      // 侧壁贴图：复用顶面同一张地形图，裁剪到该墙面 → 一块被竖向挤出的实心地形
      paintWallTexture(cx, cyTop, topR, wallH, src, tile.terrain, a, b, lit);
    } else {
      // 兜底：无贴图时用纯色竖直渐变（原行为）
      let s = lit * 8 + dim;
      s = Math.max(-34, Math.min(6, s));                         // 亮度保底：最暗不过 -34%
      const wt = shadeColor(base, Math.min(4, s + 6));           // 壁顶受光（调柔）
      const wb = shadeColor(base, Math.max(-30, s - 11));        // 壁底入影（调柔）
      const g = ctx.createLinearGradient(0, a.y, 0, a.y + wallH);
      g.addColorStop(0, wt);
      g.addColorStop(1, wb);
      ctx.beginPath();
      ctx.moveTo(a.x, a.y);
      ctx.lineTo(b.x, b.y);
      ctx.lineTo(b.x, b.y + wallH);
      ctx.lineTo(a.x, a.y + wallH);
      ctx.closePath();
      ctx.fillStyle = g;
      ctx.fill();
    }
    // 边界缝：极柔，弱化外边框的"硬"感（异地形交界只留极淡分界，同地形几乎无痕）
    let seam = 'rgba(0,0,0,0.015)';
    if (tile) {
      const nb = getTileFast(tile.q + NB_BY_WALL[i][0], tile.r + NB_BY_WALL[i][1]);
      if (!nb || nb.terrain !== tile.terrain) seam = 'rgba(0,0,0,0.05)';
    }
    ctx.strokeStyle = seam;
    ctx.lineWidth = 0.5;
    ctx.stroke();
  }
  // 顶面：柔和径向渐变（中心微亮 → 边缘微暗），对比调弱更温润
  const rad = ctx.createRadialGradient(cx, cyTop - topR * 0.3, topR * 0.1, cx, cyTop, topR * 1.05);
  rad.addColorStop(0, shadeColor(base, Math.max(0, dim * 0.5) + 5));
  rad.addColorStop(1, shadeColor(base, Math.max(-14, dim - 10)));
  // 轮廓：仅悬停/选中时显示，避免“生硬”的常驻网格
  drawPoly(cx, cyTop, topR, rad,
           hover ? 'rgba(120,210,255,0.55)' : null, hover ? 1.5 : 0);
  ctx.restore();   // 结束高度阴影（高光描边与像素颗粒不再带影，保持清爽）
  // 顶面纹理：复用 drawHexPrism 开头已解析的 src（与侧壁同源），动态视频优先，PNG 兜底
  if (src) {
    paintHexTexture(cx, cyTop, topR, src, tile.terrain);
  }
  // 顶面边缘描边：邻居同地形则跳过该边（去掉相同板块间的内部网格线，板块无缝融合）
  // 仅异地形交界 / 地图边缘 留极淡白边，作为柔和的生态分界，不抢眼
  for (let i = 0; i < SIDES; i++) {
    const nb = tile ? getTileFast(tile.q + NB_BY_WALL[i][0], tile.r + NB_BY_WALL[i][1]) : null;
    if (!tile || !nb || nb.terrain !== tile.terrain) {
      ctx.beginPath();
      ctx.moveTo(top[i].x, top[i].y);
      ctx.lineTo(top[(i + 1) % SIDES].x, top[(i + 1) % SIDES].y);
      ctx.strokeStyle = 'rgba(255,255,255,0.030)';
      ctx.lineWidth = 0.6;
      ctx.stroke();
    }
  }
}

// ============ 渲染 ============
// 把当前主画布（已全细节渲染的世界）烘焙进离屏快照，供交互期 blit（O(1) 单图绘制，纹理不丢、不掉帧）
function snapshotWorld() {
  if (!worldCache) { worldCache = document.createElement('canvas'); worldCacheCtx = worldCache.getContext('2d'); }
  if (worldCache.width !== W || worldCache.height !== H) { worldCache.width = W; worldCache.height = H; }
  worldCacheCtx.setTransform(1, 0, 0, 1, 0, 0);
  worldCacheCtx.clearRect(0, 0, W, H);
  worldCacheCtx.drawImage(canvas, 0, 0);
  _cachedCam.x = camera.x; _cachedCam.y = camera.y; _cachedCam.zoom = camera.zoom;
}
function render() {
  if (microViewOpen) { requestAnimationFrame(render); return; }  // 微观视图打开时主世界暂停重绘，把 CPU 让给微观渲染循环
  const interacting = camInteracting;   // 拖动/缩放进行中：复用世界快照，松手后自动恢复
  // 阴影投影常驻 1：交互期走快照 blit（不再每帧重绘带模糊卷积），固定 1，松手帧与拖动帧像素级一致。
  const targetShadow = 1;
  shadowFade += (targetShadow - shadowFade) * 0.14;
  if (shadowFade < 0.003) shadowFade = 0;

  // ---- 交互快速路径：只 blit 快照，跳过时间/UI/调色板/全量重绘 ----
  // 交互期 timeOfDay 已冻结，syncTimeUI/refreshWorldVideo/getSky 的结果不变，跑了纯空转；
  // 鼠标快速移动时每帧只做一次 drawImage → 跟手不卡。
  if (interacting) {
    if (!worldCacheValid) { snapshotWorld(); worldCacheValid = true; }
    const sc = camera.zoom / (_cachedCam.zoom || 1);
    const tx = (W / 2 + camera.x) - sc * (W / 2 + _cachedCam.x);
    const ty = (H / 2 + camera.y) - sc * (H / 2 + _cachedCam.y);
    // 拖动期保持画布透明（与静止帧完全一致），底层 CSS 场景图无缝透出、固定不跳；
    // 非场景图层无 CSS 底图，补调色板渐变兜底（用上一次 currentPalette，时间冻结所以不变）。
    if (useImageBg) {
      ctx.clearRect(0, 0, W, H);
    } else {
      const _pal = currentPalette;
      const _g = ctx.createLinearGradient(0, 0, 0, H);
      _g.addColorStop(0, _pal.top); _g.addColorStop(0.55, _pal.mid); _g.addColorStop(1, _pal.bot);
      ctx.fillStyle = _g; ctx.fillRect(0, 0, W, H);
    }
    ctx.drawImage(worldCache, 0, 0, W, H, tx, ty, W * sc, H * sc);
    requestAnimationFrame(render);
    return;
  }

  // ---- 静止帧：时间推进 + UI 刷新 + 调色板 + 全量重绘 ----
  animTime += 0.016;
  if (timePlaying) {
    const prevT = timeOfDay;
    timeOfDay = nowHours();   // 静止帧同步系统真实时间
    if (timeOfDay < prevT) gameDay++;        // 跨过午夜，游戏天数 +1（驱动日历/季节）
  }
  syncTimeUI();   // 每帧刷新时钟（即便暂停也刷）；秒针由真实时间驱动持续扫动
  refreshWorldVideo();   // 时间节点变化则切换背景视频（其余帧直接跳过）
  currentPalette = getSky(currentLayer, timeOfDay);
  worldCacheValid = false;   // 静止帧：下次交互重新烘焙快照（世界可能已变化）

  ctx.clearRect(0, 0, W, H);
  drawBackground(currentLayer);
  // 时间色调叠加：仅大地/天空随昼夜变色调（星空/地下/地心不染时间色），不切换视频本身
  if (useImageBg && (currentLayer === 'earth' || currentLayer === 'sky') && currentPalette.tintA > 0.001) {
    const t = currentPalette.tint;
    ctx.fillStyle = `rgba(${t[0]},${t[1]},${t[2]},${currentPalette.tintA})`;
    ctx.fillRect(0, 0, W, H);
  }

  const size = POLY_SIZE * camera.zoom;
  // 地块绘制顺序：交互（拖动/缩放）期间复用上次缓存（tiles 集合与相邻关系不变），静止帧每帧重建以保证建造结果即时可见
  let sortedTiles;
  if (interacting && _cachedSorted && _cachedSortedLayer === currentLayer) {
    sortedTiles = _cachedSorted;
  } else {
    sortedTiles = tiles.filter(t => t.layer === currentLayer).sort((a, b) => {
      return (a.r + a.q * 0.5) - (b.r + b.q * 0.5);
    });
    _cachedSorted = sortedTiles;
    _cachedSortedLayer = currentLayer;
  }
  if (!interacting || !_tileGrid) buildTileGrid();   // 拖动/缩放期间复用上次网格索引（相邻判断不变）；首次进入交互时兜底重建一次

  sortedTiles.forEach(tile => {
    try {
    const { x, y } = hexToPixel(tile.q, tile.r);
    const ez = heightToTier(tile.height != null ? tile.height : terrainToHeight(tile.terrain)) * TIER_STEP * camera.zoom;  // 高程由 height 派生（唯一真值），避免 tier 两套刻度不一致导致刷地形/移动时块高度不变
    const colTop = y - ez, colBot = y + ez + SANDBOX_DEPTH * camera.zoom;
    if (x < -size || x > W + size) return;
    if (colBot < -size || colTop > H + size) return;

    const terrain = TERRAIN[tile.terrain] || TERRAIN.plain;  // 防御：未知地形回退平原，杜绝崩溃导致后续格子全空
    const isHovered = hoveredTile && hoveredTile.q === tile.q && hoveredTile.r === tile.r;
    const isSelected = selectedTile && selectedTile.q === tile.q && selectedTile.r === tile.r;
    const isSwapFirst = swapFirst && swapFirst.q === tile.q && swapFirst.r === tile.r;
    const isSwapFrom = draggingSwap && dragSwapFrom && dragSwapFrom.q === tile.q && dragSwapFrom.r === tile.r;
    const isSwapTarget = draggingSwap && hoveredTile && hoveredTile.q === tile.q && hoveredTile.r === tile.r && (!dragSwapFrom || !(dragSwapFrom.q === tile.q && dragSwapFrom.r === tile.r));

    let fillColor = terrain.color;
    let strokeColor = 'rgba(255,255,255,0.12)';
    let lineWidth = 1;

    if (isSwapFirst || isSwapFrom) { strokeColor = '#ffd54f'; lineWidth = 2.5; }
    else if (isSwapTarget) { strokeColor = '#ffb74d'; lineWidth = 2; }
    else if (isSelected) { strokeColor = '#4af'; lineWidth = 2.5; }
    else if (isHovered) { strokeColor = 'rgba(100,200,255,0.6)'; lineWidth = 1.5; }

    // 高程偏移：按档位轻微抬升顶面（cyTop 随 tier 上移），高度差清晰可读；阶差小不刺眼
    const cyTop = y - ez;                               // 顶面中心：高地貌抬升、低地貌下沉
    const wallH = Math.max(2, ez + SANDBOX_DEPTH * camera.zoom);

    // A. 六棱柱本体（柱体） + C. 顶面方向光（亮度保底 / 柔和 / 悬停轮廓）
    drawHexPrism(x, cyTop, size * 1.0, wallH, fillColor, isHovered, tile);

    // 选中实线描边
    if (isSelected) drawPoly(x, cyTop, size * 1.0, null, '#4af', 2.5);
    if (isSwapFirst || isSwapFrom) drawPoly(x, cyTop, size * 1.0, null, '#ffd54f', 2.5);
    if (isSwapTarget) drawPoly(x, cyTop, size * 1.0, null, '#ffb74d', 2);

    // 悬停光晕（轮廓已由 drawHexPrism 绘制，这里只加辉光）
    if (isHovered) {
      ctx.save();
      ctx.shadowColor = '#4af'; ctx.shadowBlur = 14;
      drawPoly(x, cyTop, size * 1.0, 'rgba(100,200,255,0.10)', null, 0);
      ctx.restore();
    }

    // 选中虚线动画
    if (isSelected) {
      const p = 0.5 + 0.5 * Math.sin(animTime * 4);
      ctx.save();
      ctx.strokeStyle = `rgba(100,200,255,${0.3 + 0.3 * p})`;
      ctx.lineWidth = 2; ctx.setLineDash([4 * camera.zoom, 4 * camera.zoom]);
      drawPoly(x, cyTop, size * 1.0, null, `rgba(100,200,255,${0.3 + 0.3 * p})`, 2);
      ctx.setLineDash([]);
      ctx.restore();
    }
    } catch(e) { /* 单格渲染错误不中断其余格子 */ }
  });

  // 交换闪光：金色连线淡出
  if (swapFlashes.length) {
    for (let i = swapFlashes.length - 1; i >= 0; i--) {
      const f = swapFlashes[i]; f.life -= 0.04;
      if (f.life <= 0) { swapFlashes.splice(i, 1); continue; }
      const pa = hexToPixel(f.a.q, f.a.r), pb = hexToPixel(f.b.q, f.b.r);
      ctx.save();
      ctx.globalAlpha = f.life;
      ctx.strokeStyle = '#ffd54f'; ctx.lineWidth = 3 * camera.zoom;
      ctx.setLineDash([6 * camera.zoom, 5 * camera.zoom]);
      ctx.beginPath(); ctx.moveTo(pa.x, pa.y); ctx.lineTo(pb.x, pb.y); ctx.stroke();
      ctx.setLineDash([]);
      ctx.restore();
    }
  }

  // 松手过渡淡出：在上方叠放拖动的快照（同 camera 变换 + 衰减 alpha），平滑 blit→全量 的亚像素/插值差异，
  // 2-3 帧消隐，过渡无跳。仅场景图层（useImageBg=透明画布）做过渡，非场景图层直接切。
  if (releaseBlend > 0.003) {
    ctx.save();
    ctx.globalAlpha = Math.min(releaseBlend, 1);
    const sc = camera.zoom / (_cachedCam.zoom || 1);
    const tx = (W / 2 + camera.x) - sc * (W / 2 + _cachedCam.x);
    const ty = (H / 2 + camera.y) - sc * (H / 2 + _cachedCam.y);
    ctx.drawImage(worldCache, 0, 0, W, H, tx, ty, W * sc, H * sc);
    ctx.restore();
    releaseBlend *= 0.4;   // 快速衰减：1→0.4→0.16→0.06→0.03（4 帧 ~67ms，基本不可感知）
    if (releaseBlend < 0.004) releaseBlend = 0;
  }

  requestAnimationFrame(render);
}

// ============ 分层背景（D） ============
function initStars() {
  stars = [];
  for (let i = 0; i < 100; i++) {
    stars.push({ x: Math.random() * 2000, y: Math.random() * 2000,
      r: Math.random() * 1.2 + 0.3, speed: Math.random() * 0.3 + 0.1,
      alpha: Math.random() * 0.5 + 0.2 });
  }
}

function initEmbers() {
  embers = [];
  for (let i = 0; i < 55; i++) {
    embers.push({ x: Math.random() * 2000, y: Math.random() * 2000,
      r: Math.random() * 1.5 + 0.5, speed: Math.random() * 0.4 + 0.1 });
  }
}

function drawStars() {
  const aMul = currentPalette.star || 0;
  if (aMul <= 0.01) return;
  stars.forEach(s => {
    s.y += s.speed * 0.3;
    if (s.y > H + 10) { s.y = -10; s.x = Math.random() * W; }
    const twinkle = (s.alpha + 0.15 * Math.sin(animTime * 2 + s.x)) * aMul;
    if (twinkle <= 0.01) return;
    ctx.fillStyle = `rgba(200,215,255,${twinkle})`;
    ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2); ctx.fill();
  });
}

function drawSilhouette() {
  // 远景山影（仅地表层），随当前时间调色板染环境色
  ctx.save();
  ctx.globalAlpha = 0.7;
  ctx.fillStyle = mixColor('#0a1422', currentPalette.ambient, Math.min(0.5, currentPalette.amb));
  const baseY = H * 0.82;
  ctx.beginPath();
  ctx.moveTo(0, H);
  ctx.lineTo(0, baseY);
  const peaks = 10;
  for (let i = 0; i <= peaks; i++) {
    const px = (W / peaks) * i;
    const py = baseY - Math.abs(Math.sin(i * 0.9 + 1.2)) * 55 - 15;
    ctx.lineTo(px, py);
  }
  ctx.lineTo(W, H);
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}

function drawEmbers() {
  // 地下火星上浮粒子（仅地下层）
  embers.forEach(e => {
    e.y -= e.speed;
    if (e.y < -10) { e.y = H + 10; e.x = Math.random() * W; }
    const a = 0.35 + 0.4 * Math.sin(animTime * 3 + e.x);
    ctx.fillStyle = `rgba(255,140,50,${a})`;
    ctx.beginPath(); ctx.arc(e.x, e.y, e.r, 0, Math.PI * 2); ctx.fill();
  });
}

function drawBackground(layer) {
  const pal = currentPalette;
  // 场景背景图接入：透明画布，让底层 <img> 透出（图片层自行呈现背景）
  if (useImageBg) {
    ctx.clearRect(0, 0, W, H);
    return;
  }
  const g = ctx.createLinearGradient(0, 0, 0, H);
  g.addColorStop(0, pal.top);
  g.addColorStop(0.55, pal.mid);
  g.addColorStop(1, pal.bot);
  ctx.fillStyle = g;
  ctx.fillRect(0, 0, W, H);
  if (layer === 'earth') {
    drawTimeAmbiance(pal);
    if (pal.star > 0.05) drawStars();
    drawSilhouette();
  } else {
    if (layer === 'star' && pal.star > 0.05) drawStars();
    if (layer === 'under') drawEmbers();
  }
}

// 随时间变化的环境光（太阳/月亮辉光 + 阶段粒子）
function drawTimeAmbiance(pal) {
  if (pal.scene === 'static') return;
  ctx.save();
  ctx.globalCompositeOperation = 'lighter';
  const sx = W * (0.5 + 0.42 * Math.cos(pal.sun));
  const sy = H * (0.95 + 0.55 * Math.sin(pal.sun));
  const glow = pal.scene === 'night' ? 'rgba(150,180,255,'
             : pal.scene === 'dusk'  ? 'rgba(255,140,70,'
             : 'rgba(255,210,150,';
  const r = pal.scene === 'night' ? 170 : 230;
  const rg = ctx.createRadialGradient(sx, sy, 0, sx, sy, r);
  rg.addColorStop(0, glow + '0.5)');
  rg.addColorStop(1, glow + '0)');
  ctx.fillStyle = rg;
  ctx.beginPath(); ctx.arc(sx, sy, r, 0, Math.PI * 2); ctx.fill();
  ctx.restore();

  // 阶段粒子：黄昏萤火 / 黑夜冷光浮尘
  if (pal.scene === 'dusk' || pal.scene === 'night') {
    ambParticles.forEach(p => {
      p.x += p.vx; p.y += p.vy;
      if (p.x < 0) p.x = W; if (p.x > W) p.x = 0;
      if (p.y < 0) p.y = H; if (p.y > H) p.y = 0;
      const fl = 0.4 + 0.4 * Math.sin(animTime * 2 + p.x);
      ctx.fillStyle = pal.scene === 'dusk'
        ? `rgba(255,220,140,${fl * 0.6})`
        : `rgba(140,200,255,${fl * 0.5})`;
      ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill();
    });
  }
}

// ============ 随机过场插画（飞入过渡背景用） ============
const TRANSITION_IMAGES = [
  'assets/art/transitions/transition_dungeon.webp',
  'assets/art/transitions/transition_adventure.webp',
  'assets/art/transitions/transition_sky.webp',
  'assets/art/transitions/transition_forest.webp',
  'assets/art/transitions/transition_night.webp',
  'assets/art/transitions/transition_dawn.webp',
  'assets/art/transitions/transition_coast.webp',
  'assets/art/transitions/transition_skycity.webp',
];
let _lastTransitionIdx = -1;   // 避免连续两次同一张
function pickTransitionImage() {
  let idx;
  do { idx = Math.floor(Math.random() * TRANSITION_IMAGES.length); } while (idx === _lastTransitionIdx && TRANSITION_IMAGES.length > 1);
  _lastTransitionIdx = idx;
  return TRANSITION_IMAGES[idx];
}

// ============ 进入微观世界 ============
function enterMicroWorld(tile) {
  if (!tile) return;
  const overlay = document.getElementById('flyInOverlay');
  const microView = document.getElementById('microView');
  // 0) 随机图作飞入遮罩背景（铺满 + 放大遮水印），进度条/提示仍在前景
  const flyBg = document.getElementById('flyBg');
  if (flyBg) flyBg.src = pickTransitionImage();
  // 1) 先盖屏，立刻在遮罩下把微观世界建好并跑起来：重活消化在幕后，
  //    揭幕那一帧不再有主线程尖峰 → 消除"加载完却一顿"的卡顿
  overlay.classList.add('active');
  const flyFill = document.getElementById('flyFill');
  const flyPct = document.getElementById('flyPct');
  if (flyFill) flyFill.style.width = '0%';
  if (flyPct) flyPct.textContent = '0%';
  // 进度条动画：与最短停留时长保持同步，给玩家明确的加载反馈
  const MICRO_ENTER_HOLD = 1500;   // [PLACEHOLDER] 体感测试：最短 1.5s，快机可调到 1100
  const startT = performance.now();
  let rafId;
  function tick(now) {
    if (!overlay.classList.contains('active')) return;
    const p = Math.min(100, ((now - startT) / MICRO_ENTER_HOLD) * 100);
    if (flyFill) flyFill.style.width = p + '%';
    if (flyPct) flyPct.textContent = Math.round(p) + '%';
    if (p < 100) rafId = requestAnimationFrame(tick);
  }
  rafId = requestAnimationFrame(tick);
  microState = {
    tile,
    buildings: tile.hasBuilding ? [{ ...BUILDINGS[tile.buildingType], type: tile.buildingType, level: tile.buildingLevel, hp: 80 + tile.buildingLevel * 10 }] : [],
    units: tile.units || [],
    resources: calcResources(tile),
    animTime: 0,
    particles: []
  };
  // 重置缩放与平移
  microZoom = 1; microPanX = 0; microPanY = 0;
  microViewOpen = true;                // 暂停主世界重绘
  microView.classList.add('active');   // 入场动画（缩放+去模糊）在遮罩掩护下播放，揭幕时早已归位
  const layerLabel = { earth:'🌍 大地', under:'🕳 地下', core:'🔥 地心', sky:'🌤 天空', star:'✦ 星空' }[tile.layer] || '';
  document.getElementById('microTitle').textContent = `${layerLabel} · ${TERRAIN[tile.terrain].name}村落`;
  document.getElementById('microSubtitle').textContent = `坐标(${tile.q}, ${tile.r}) · ${microState.units.length}位居民`;
  applyMicroAccent(tile.terrain);
  updateSidebar();
  initMicroCanvas();
  startMicroRender();
  // 2) 至少保持最短时长（遮罩掩护重活 + 入场动画兜底），到点纯淡出揭幕：无尖峰、无 pop-in
  setTimeout(() => {
    if (rafId) cancelAnimationFrame(rafId);
    if (flyFill) flyFill.style.width = '100%';
    if (flyPct) flyPct.textContent = '100%';
    overlay.classList.remove('active');
  }, MICRO_ENTER_HOLD);
}

function calcResources(tile) {
  const res = {};
  if (tile.hasBuilding && BUILDINGS[tile.buildingType]) {
    for (const [k, v] of Object.entries(BUILDINGS[tile.buildingType].yield)) res[k] = v * tile.buildingLevel;
  }
  return res;
}

function updateSidebar() {
  const tile = microState.tile;
  document.getElementById('detailTerrain').textContent = `${TERRAIN[tile.terrain].name} · 坐标(${tile.q}, ${tile.r})`;
  const buildingDiv = document.getElementById('detailBuilding');
  if (tile.hasBuilding) {
    const b = BUILDINGS[tile.buildingType];
    buildingDiv.innerHTML = `<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
      <span style="font-size:22px;">${b.icon}</span>
      <div><div style="font-size:14px;font-weight:bold;color:#e0e0e0;">${b.name}</div>
      <div style="font-size:11px;color:#8899aa;">Lv.${tile.buildingLevel}</div></div></div>`;
  } else { buildingDiv.innerHTML = '<div style="color:#445566;font-size:12px;">—</div>'; }

  const resDiv = document.getElementById('detailResources');
  const res = microState.resources;
  if (Object.keys(res).length > 0) {
    const resNames = { food:'🍖 食物', wood:'🪵 木材', metal:'⛏ 金属', gold:'💰 金币', culture:'🏛 文化', research:'🔬 科研', defense:'🛡 防御', military:'⚔ 军事', pop:'👥 人口' };
    resDiv.innerHTML = Object.entries(res).map(([k,v]) => `<div style="display:flex;justify-content:space-between;align-items:center;margin:4px 0;">
      <span style="font-size:12px;color:#ccd;">${resNames[k]||k}</span>
      <div class="resource-bar" style="width:100px;">
        <div class="resource-fill" style="width:${Math.min(v*12,100)}%;background:linear-gradient(90deg,#4af,#a8e6cf);"></div></div>
      <span style="font-size:12px;color:#8bc34a;">+${v}</span></div>`).join('');
  } else { resDiv.innerHTML = '<div style="color:#667788;font-size:12px;">无产出</div>'; }

  const popDiv = document.getElementById('detailPopulation');
  if (microState.units.length > 0) {
    popDiv.innerHTML = microState.units.map(u => `<div class="unit-card" onclick="showUnitModal('${u.id}')">
      <div style="display:flex;align-items:center;gap:8px;">
        <span style="font-size:18px;">${u.icon}</span>
        <div><div class="unit-name">${u.name}</div><div class="unit-role">${u.status === 'working' ? '🟢' : u.status === 'resting' ? '🟡' : '🔵'} ${u.status}</div></div>
      </div></div>`).join('');
  } else { popDiv.innerHTML = '<div style="color:#667788;font-size:12px;">暂无居民</div>'; }
}

// ============ 微观世界 Canvas 渲染 ============
function initMicroCanvas() {
  microCanvas = document.getElementById('microCanvas');
  const stage = document.getElementById('microStage');
  microCanvas.width = stage.clientWidth - 280;
  microCanvas.height = stage.clientHeight;
  microCtx = microCanvas.getContext('2d');
  microCanvas.style.touchAction = 'none';   // 触屏滑动切换时不触发页面滚动
  if (!microInputBound) { bindMicroInput(); microInputBound = true; }
  buildMicroGridCache();  // 构建背景 + 地形场离屏缓存（静态，逐帧只贴图）
}

function startMicroRender() {
  if (!microState) return;
  if (microAnimId) cancelAnimationFrame(microAnimId);

  function loop() {
    if (!microState) return;
    microAnimId = requestAnimationFrame(loop);
    microState.animTime += 0.016;
    const mW = microCanvas.width, mH = microCanvas.height;
    const terrain = TERRAIN[microState.tile.terrain];

    // ---- 不透明兜底：避免 clearRect 透出 body 黑底造成"黑影闪" ----
    microCtx.fillStyle = '#0a0e17';
    microCtx.fillRect(0, 0, mW, mH);

    // ---- 套缩放+平移变换（场景内容随 zoom/pan 移动）----
    microCtx.save();
    microCtx.translate(mW / 2 + microPanX, mH / 2 + microPanY);
    microCtx.scale(microZoom, microZoom);
    microCtx.translate(-mW / 2, -mH / 2);
    // 初始大小（zoom=1）下拖动 = 滑动切地块：实时跟手预览；松手未达阈值时弹性回弹；过渡中不打扰
    if (microSwipe && microZoom <= 1.001 && !microState.transition) {
      if (!microSwipe.active) {                 // 松手回弹：朝原点缓动，避免生硬瞬回
        microSwipe.x += (microSwipe.x0 - microSwipe.x) * 0.3;
        microSwipe.y += (microSwipe.y0 - microSwipe.y) * 0.3;
        if (Math.abs(microSwipe.x - microSwipe.x0) < 0.5 && Math.abs(microSwipe.y - microSwipe.y0) < 0.5) {
          microSwipe.x = microSwipe.x0; microSwipe.y = microSwipe.y0;
          microSwipe = null;                     // 回弹到位，清除预览
        }
      }
      if (microSwipe) microCtx.translate(Math.round(microSwipe.x - microSwipe.x0), Math.round(microSwipe.y - microSwipe.y0));
    }

    // 背景 + 地形场为静态缓存；逐帧只贴图（+ 滑动切换过渡，带方向性平移）
    if (microState.transition) {
      const tr = microState.transition;
      const p = Math.min(1, (performance.now() - tr.t0) / tr.dur);
      const e = 1 - Math.pow(1 - p, 3);            // easeOutCubic 0→1
      const D = mW * 0.6;                          // 切换滑动位移距离：旧图滑出、新图滑入有方向感
      // 旧图：从松手预览偏移继续朝滑动方向滑出（消除"弹回原位再滑"的跳变）
      if (tr.from) {
        microCtx.save();
        microCtx.globalAlpha = 1 - e;   // 旧图平滑淡出到 0，过渡收尾与下一帧纯新图无缝衔接，消除两侧阴影闪烁
        microCtx.translate(Math.round(tr.sx * (1 - e) + tr.ux * e * D), Math.round(tr.sy * (1 - e) + tr.uy * e * D));
        microCtx.drawImage(tr.from, 0, 0);
        microCtx.restore();
      }
      // 新图：从松手预览偏移的反方向滑入到原位
      if (microGridCache) {
        microCtx.save();
        microCtx.globalAlpha = Math.min(1, e * 1.6);
        microCtx.translate(Math.round(-tr.sx * (1 - e) + tr.ux * (e - 1) * D), Math.round(-tr.sy * (1 - e) + tr.uy * (e - 1) * D));
        microCtx.drawImage(microGridCache, 0, 0);
        microCtx.restore();
      }
      if (p >= 1) microState.transition = null;
    } else if (microGridCache) {
      microCtx.drawImage(microGridCache, 0, 0);
    }

    // 矩形网格叠加层（仅浮岛内部，clip 到圆角矩形）
    if (microGridOn && microGridCache) drawMicroGrid(microCtx, mW, mH, microState.accent || '#4aafff');

    const Rx = mW * 0.50, Ry = mH * 0.43;
    const cx = mW / 2, cy = mH / 2;

    // 过渡时居民随新视图一起柔和淡入
    let unitAlpha = 1;
    if (microState.transition) {
      const tr2 = microState.transition;
      const p2 = Math.min(1, (performance.now() - tr2.t0) / tr2.dur);
      unitAlpha = 1 - Math.pow(1 - p2, 3);
    }

    // 居民：浮岛内确定性散点 + 中心避让 + 脉冲光环
    microCtx.globalAlpha = unitAlpha;
    const padX = Rx * 0.12, padY = Ry * 0.12, minD = Math.min(Rx, Ry) * 0.24;
    microState.units.forEach((u, k) => {
      const h = microHash(u.id);
      const rx1 = ((h >> 2) % 100) / 100;
      const ry1 = ((h >> 9) % 100) / 100;
      let px = cx + (rx1 * 2 - 1) * (Rx - padX);
      let py = cy + (ry1 * 2 - 1) * (Ry - padY);
      const dx_ = px - cx, dy_ = py - cy, d = Math.hypot(dx_, dy_);
      if (d < minD && d > 0.001) { const kk = minD / d; px = cx + dx_ * kk; py = cy + dy_ * kk; }
      const pulse = 0.6 + 0.4 * Math.sin(microState.animTime * 3 + k);
      const col = (u.status === 'working' ? '#8bc34a' : u.status === 'resting' ? '#ff9800' : '#4af');
      // 脉冲光环
      microCtx.save();
      microCtx.globalAlpha = 0.22 + 0.22 * pulse;
      microCtx.fillStyle = col;
      microCtx.beginPath(); microCtx.arc(px, py, Math.max(11, Math.min(Rx,Ry) * 0.065) * (0.9 + 0.2 * pulse), 0, Math.PI * 2); microCtx.fill();
      microCtx.restore();
      // 底圈
      microCtx.fillStyle = 'rgba(18,26,38,0.92)';
      microCtx.beginPath(); microCtx.arc(px, py, Math.max(10, Math.min(Rx,Ry) * 0.058), 0, Math.PI * 2); microCtx.fill();
      microCtx.lineWidth = 2.5; microCtx.strokeStyle = col; microCtx.stroke();
      // 图标
      microCtx.font = `${Math.max(15, Math.min(Rx,Ry) * 0.075)}px sans-serif`;
      microCtx.textAlign = 'center'; microCtx.textBaseline = 'middle';
      microCtx.fillText(u.icon, px, py + 1);
    });
    microCtx.globalAlpha = 1;

    // 大气粒子层
    drawMicroAtmoParticles(microCtx, mW, mH, terrain);

    // ---- 结束变换：恢复画布坐标系，绘制 UI 层不受 zoom 影响 ----
    microCtx.restore();

    // 注：大气粒子层已在上方变换内绘制（1641 行），随缩放/平移正确变换；
    //     此处不再重复绘制，否则会出现“飘在另一层、不随放大缩放”的相对运动错觉。
  }
  loop();
}

// ============ 微观世界：滑动切换相邻地块 ============
// 在微观视图中朝某方向拖动/滑动 → 进入该方向相邻的沙盘地基块的微观视图（像平移显微镜）
let microSwipe = null;                 // {x0,y0,x,y,active}
const MICRO_SWIPE_MIN = 40;            // 触发切换的最小拖动距离（px），小于则视为点击
let microInputBound = false;

function getMicroPoint(e) {
  const r = microCanvas.getBoundingClientRect();
  return { x: e.clientX - r.left, y: e.clientY - r.top };
}
function bindMicroInput() {
  const mc = document.getElementById('microCanvas');
  mc.addEventListener('pointerdown', onMicroDown);
  window.addEventListener('pointermove', onMicroMove);
  window.addEventListener('pointerup', onMicroUp);
  // 滚轮：以鼠标位置为中心缩放
  mc.addEventListener('wheel', onMicroWheel, { passive: false });
  // 屏蔽右键菜单（右键用于平移）
  mc.addEventListener('contextmenu', e => e.preventDefault());
}
// 将屏幕坐标转换为世界坐标（反向 zoom/pan 变换）
function screenToWorld(sx, sy) {
  const mW = microCanvas.width, mH = microCanvas.height;
  return {
    x: (sx - mW / 2 - microPanX) / microZoom + mW / 2,
    y: (sy - mH / 2 - microPanY) / microZoom + mH / 2
  };
}
// 平移限位：像缩放下限一样，浮岛不能拖出视野
// zoom=1 时限位为 0（浮岛居中、不可平移）；zoom>1 时允许平移到「浮岛边缘抵达屏幕边」为止
function clampMicroPan() {
  const mW = microCanvas.width, mH = microCanvas.height;
  const Rx = mW * 0.50, Ry = mH * 0.43;   // 与浮岛绘制半径一致
  const maxX = Math.max(0, Rx * microZoom - mW / 2);
  const maxY = Math.max(0, Ry * microZoom - mH / 2);
  microPanX = Math.max(-maxX, Math.min(maxX, microPanX));
  microPanY = Math.max(-maxY, Math.min(maxY, microPanY));
}

function onMicroWheel(e) {
  if (!microState) return;
  e.preventDefault();
  const p = getMicroPoint(e);
  const oldZoom = microZoom;
  // 缩放步进：每滚轮刻度 ±15%，范围 1x（初始适配）~ 2.5x（放大）—— 略增步进让放大更跟手
  const factor = e.deltaY < 0 ? 1.15 : 0.8696;
  microZoom = Math.max(1, Math.min(2.5, microZoom * factor));
  // 以鼠标位置为中心：调整 pan 使鼠标下的点保持不动
  const worldBefore = screenToWorld(p.x, p.y);
  const worldAfter = screenToWorld(p.x, p.y);   // 用新 zoom 但旧 pan 计算
  microPanX += (worldAfter.x - worldBefore.x) * microZoom;
  microPanY += (worldAfter.y - worldBefore.y) * microZoom;
  clampMicroPan();
  // 回到初始大小（zoom=1）则复位平移，重新居中浮岛
  if (microZoom <= 1.0001) { microZoom = 1; microPanX = 0; microPanY = 0; }
}
function onMicroDown(e) {
  if (!microState) return;
  // 中键/右键 → 进入平移模式；左键 → 切地块滑动
  if (e.button === 1 || e.button === 2) {   // 中键 or 右键
    e.preventDefault();
    microPanning = true;
    microPanStart = getMicroPoint(e);
    microCanvas.style.cursor = 'move';
    return;                                   // 不启动 swipe
  }
  const p = getMicroPoint(e);
  // 放大状态下（zoom>1）左键拖拽 = 平移查看浮岛内部细节；
  // 仅初始大小（zoom=1）时左键拖拽才是滑动切相邻地块
  if (microZoom > 1.001) {
    microPanning = true;
    microPanStart = p;
    microCanvas.style.cursor = 'move';
    return;
  }
  microSwipe = { x0: p.x, y0: p.y, x: p.x, y: p.y, active: true };
  microCanvas.style.cursor = 'grabbing';
}
function onMicroMove(e) {
  if (!microState) return;
  // 平移拖拽中
  if (microPanning && microPanStart) {
    const p = getMicroPoint(e);
    microPanX += p.x - microPanStart.x;
    microPanY += p.y - microPanStart.y;
    microPanStart = p;
    clampMicroPan();
    return;
  }
  if (!microSwipe || !microSwipe.active) return;
  const p = getMicroPoint(e);
  // 跟手最大 ±320px（足以判断切地块方向），防止画面被拖太远
  const SWIPE_MAX = 320;
  let ox = Math.max(-SWIPE_MAX, Math.min(SWIPE_MAX, p.x - microSwipe.x0));
  let oy = Math.max(-SWIPE_MAX, Math.min(SWIPE_MAX, p.y - microSwipe.y0));
  // 边缘即墙：当前拖动方向没有相邻地块 → 橡皮筋阻尼，岛不真正移动（不循环/不越界）
  const t = microState.tile;
  const [dq, dr] = MICRO_DIRS[microHexDirOfVector(ox, oy)];
  if (!getTile(t.q + dq, t.r + dr)) {
    const RUBBER = 0.18, RUBBER_MAX = 46;
    ox = Math.max(-RUBBER_MAX, Math.min(RUBBER_MAX, ox * RUBBER));
    oy = Math.max(-RUBBER_MAX, Math.min(RUBBER_MAX, oy * RUBBER));
  }
  microSwipe.x = microSwipe.x0 + ox;
  microSwipe.y = microSwipe.y0 + oy;
}
function onMicroUp(e) {
  if (!microState) return;
  // 结束平移
  if (microPanning) {
    microPanning = false;
    microPanStart = null;
    microCanvas.style.cursor = '';
    return;
  }
  // 左键：判断是切地块还是点击
  if (!microSwipe) return;
  const dx = microSwipe.x - microSwipe.x0, dy = microSwipe.y - microSwipe.y0;
  microSwipe.active = false;
  microCanvas.style.cursor = '';
  if (Math.hypot(dx, dy) < MICRO_SWIPE_MIN) {
    // 未达阈值：保留 microSwipe，由 loop 弹性回弹，避免生硬瞬回
    return;
  }
  // 超阈值：尝试切相邻地块；若边缘即墙（无相邻地块）navigateMicro 返回 false，
  // 仍保留 microSwipe 由 loop 弹性回弹——避免"瞬回原位"造成的闪烁/循环感
  const moved = navigateMicro(dx, dy);
  if (moved) microSwipe = null;   // 已切换，预览可清（起点偏移已存入 tr.sx/sy）
}
// 六边形六个相邻方向的轴向偏移（axial），与 hexToPixel 的线性映射一致
const MICRO_DIRS = [[1, 0], [1, -1], [0, -1], [-1, 0], [-1, 1], [0, 1]];
// 由拖动向量求"最匹配"的六边形方向角标（只看方向，去掉缩放/居中偏移）
function microHexDirOfVector(dx, dy) {
  const dirs = MICRO_DIRS.map(([dq, dr]) => ({
    dq, dr,
    vx: Math.sqrt(3) * dq + Math.sqrt(3) / 2 * dr,   // 与 hexToPixel 线性部分一致
    vy: 3 / 2 * dr
  }));
  const sl = Math.hypot(dx, dy) || 1;
  let bestI = 0, bestDot = -Infinity;
  for (let i = 0; i < dirs.length; i++) {
    const d = dirs[i], vl = Math.hypot(d.vx, d.vy) || 1;
    const dot = (dx * d.vx + dy * d.vy) / sl / vl;     // 余弦相似度
    if (dot > bestDot) { bestDot = dot; bestI = i; }
  }
  return bestI;
}
// 朝某方向拖动 → 若该方向有相邻地块则切入它（像平移显微镜）；否则不切换（边缘即墙）
function navigateMicro(dx, dy) {
  const t = microState.tile;
  const di = microHexDirOfVector(dx, dy);
  const [dq, dr] = MICRO_DIRS[di];
  const nb = getTile(t.q + dq, t.r + dr);
  if (nb) { transitionMicroTo(nb, dx, dy); return true; }
  return false;   // 边缘即墙：不切换，由 onMicroUp 保留 microSwipe 让 loop 弹性回弹
}
// 切换当前微观地块（更新状态 + 侧栏 + 标题）
function setMicroTile(tile) {
  microState.tile = tile;
  applyMicroAccent(tile.terrain);
  microState.units = tile.units || [];
  microState.buildings = tile.hasBuilding
    ? [{ ...BUILDINGS[tile.buildingType], type: tile.buildingType, level: tile.buildingLevel, hp: 80 + tile.buildingLevel * 10 }]
    : [];
  microState.resources = calcResources(tile);
  const layerLabel = { earth: '🌍 大地', under: '🕳 地下', core: '🔥 地心', sky: '🌤 天空', star: '✦ 星空' }[tile.layer] || '';
  document.getElementById('microTitle').textContent = `${layerLabel} · ${TERRAIN[tile.terrain].name}村落`;
  document.getElementById('microSubtitle').textContent = `坐标(${tile.q}, ${tile.r}) · ${microState.units.length}位居民`;
  updateSidebar();
}
// 快照旧视图 → 切换地块 → 重建缓存 → 启动滑入过渡
function transitionMicroTo(tile, dx, dy) {
  const from = document.createElement('canvas');
  from.width = microCanvas.width; from.height = microCanvas.height;
  if (microGridCache) from.getContext('2d').drawImage(microGridCache, 0, 0);
  setMicroTile(tile);
  buildMicroGridCache();   // 用新 tile 重建离屏缓存
  const sl = Math.hypot(dx, dy) || 1;
  // sx/sy = 松手时的拖拽偏移（画布像素），作为过渡起点，消除"弹回原位再滑"的视觉跳变
  microState.transition = { from, ux: dx / sl, uy: dy / sl, sx: dx, sy: dy, t0: performance.now(), dur: 340 };
}

// ============ 微观世界：圆形浮岛视图（参考浮岛参考图：清晰 + 内容丰富） ============

// 离屏缓存：暗背景 + 圆形浮岛（基地渐变 + 地形装饰 + 建筑）+ 边缘柔化，进入时构建一次
function buildMicroGridCache() {
  if (!microState) return;
  const mW = microCanvas.width, mH = microCanvas.height;
  const tile = microState.tile;
  const terrain = TERRAIN[tile.terrain];
  const og = document.createElement('canvas');
  og.width = mW; og.height = mH;
  const c = og.getContext('2d');

  // 暗色背景（与 #microView 一致），浮岛悬浮其上
  c.fillStyle = '#0a0e17';
  c.fillRect(0, 0, mW, mH);
  drawMicroStars(c, mW, mH, tile.layer);
  drawMicroAtmoStatic(c, mW, mH, terrain);   // 方案A：地形主题大气氛围（光雾/天光/地平线雾）

  const cx = mW / 2, cy = mH / 2;
  const Rx = mW * 0.50, Ry = mH * 0.43;   // 浮岛半宽/半高（已扩大视野范围）
  const rRect = Math.min(Rx, Ry) * 0.14;  // 圆角半径（四角小圆边，不要太大）
  const X0 = cx - Rx, Y0 = cy - Ry, RW = Rx * 2, RH = Ry * 2;
  // 圆角矩形路径
  const rectPath = (ctx, x, y, w, h, r) => {
    r = Math.min(r, w / 2, h / 2);
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.arcTo(x + w, y, x + w, y + h, r);
    ctx.arcTo(x + w, y + h, x, y + h, r);
    ctx.arcTo(x, y + h, x, y, r);
    ctx.arcTo(x, y, x + w, y, r);
    ctx.closePath();
  };

  // 浮岛投影（增强悬浮感）
  c.save();
  c.globalAlpha = 0.4;
  c.fillStyle = '#000';
  rectPath(c, X0 + RW * 0.03, Y0 + RH * 0.1, RW * 0.94, RH * 0.92, rRect * 0.9);
  c.fill();
  c.restore();

  // ---- 岛屿本体（圆角矩形剪裁） ----
  c.save();
  rectPath(c, X0, Y0, RW, RH, rRect);
  c.clip();

  // 基地：径向渐变，微凸起的泥土感
  const base = c.createRadialGradient(cx, cy - Ry * 0.25, Math.min(Rx,Ry) * 0.08, cx, cy, Math.max(Rx,Ry));
  base.addColorStop(0, shadeColor(terrain.groundColor, 14));
  base.addColorStop(0.55, terrain.groundColor);
  base.addColorStop(1, shadeColor(terrain.microBg, -18));
  c.fillStyle = base;
  c.fillRect(X0, Y0, RW, RH);

  // 地形细斑（保持清晰，不糊）
  drawTerrainGrain(c, cx, cy, Rx, Ry, terrain);

  // 地形装饰物（确定性散布：树/石/仙人掌/雪堆/芦苇…）
  drawTerrainDecor(c, cx, cy, Rx, Ry, tile, terrain);

  // 建筑：清晰简笔 sprite（中心）
  drawMicroBuilding(c, cx, cy, Rx, Ry, tile);

  c.restore();  // 结束岛屿剪裁

  // 岛屿边缘柔化：仅最外圈擦淡融入暗背景（集中在边缘，不侵蚀内容）
  c.save();
  c.globalCompositeOperation = 'destination-out';
  const vig = c.createRadialGradient(cx, cy, Math.min(Rx,Ry) * 0.86, cx, cy, Math.max(Rx,Ry) * 1.0);
  vig.addColorStop(0, 'rgba(0,0,0,0)');
  vig.addColorStop(1, 'rgba(0,0,0,0.5)');
  c.fillStyle = vig;
  rectPath(c, X0, Y0, RW, RH, rRect);
  c.fill();
  c.restore();


  // 岛屿外环微光（圆角矩形轮廓不死黑）
  c.save();
  c.globalCompositeOperation = 'lighter';
  rectPath(c, X0, Y0, RW, RH, rRect);
  c.lineWidth = 2;
  c.strokeStyle = 'rgba(120,170,210,0.12)';
  c.stroke();
  c.restore();

  buildMicroParticles(tile);   // 方案A：按地块类型重建漂浮粒子
  microGridCache = og;
}

// 暗背景星点/火星，呼应主世界氛围
function drawMicroStars(c, w, h, layer) {
  const bg = LAYER_BG[layer] || LAYER_BG.earth;
  if (bg.stars && layer === 'star') {   // 仅星空层保留白色星点；大地/地下等不画（否则像背景噪点）
    c.fillStyle = 'rgba(255,255,255,0.5)';
    for (let i = 0; i < 60; i++) {
      const sx = frac(Math.sin(i * 12.9898) * 43758.5453) * w;
      const sy = frac(Math.sin(i * 78.233) * 12543.123) * h * 0.7;
      c.fillRect(sx, sy, 1.4, 1.4);
    }
  }
  if (bg.embers) {
    c.fillStyle = 'rgba(255,130,50,0.5)';
    for (let i = 0; i < 30; i++) {
      const ex = frac(Math.sin(i * 9.1) * 9999.7) * w;
      const ey = frac(Math.cos(i * 4.7) * 7777.3) * h;
      c.fillRect(ex, ey, 1.8, 1.8);
    }
  }
}

// ============ 方案A：按地块类型的微观世界大气氛围 ============
function hexA(hex, a) {
  const n = parseInt(hex.slice(1), 16);
  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
}

// 静态氛围层：地形主题光雾 + 远景天光（绘于浮岛之下，主要在浮岛外暗区显现）
function drawMicroAtmoStatic(c, mW, mH, terrain) {
  const a = terrain.atmo;
  const cx = mW / 2, cy = mH / 2;
  c.save();
  c.globalCompositeOperation = 'lighter';
  // 1) 整体大气雾：以浮岛为中心向外扩散
  const fog = c.createRadialGradient(cx, cy, Math.min(mW, mH) * 0.16, cx, cy, Math.max(mW, mH) * 0.62);
  fog.addColorStop(0, hexA(a.haze, 0.32));
  fog.addColorStop(0.5, hexA(a.haze, 0.15));
  fog.addColorStop(1, hexA(a.haze, 0));
  c.fillStyle = fog; c.fillRect(0, 0, mW, mH);
  // 2) 远景天光：浮岛后上方柔光斑
  const gx = cx, gy = cy - mH * 0.18;
  const glow = c.createRadialGradient(gx, gy, 0, gx, gy, Math.max(mW, mH) * 0.5);
  glow.addColorStop(0, hexA(a.glow, 0.28));
  glow.addColorStop(0.4, hexA(a.glow, 0.09));
  glow.addColorStop(1, hexA(a.glow, 0));
  c.fillStyle = glow; c.fillRect(0, 0, mW, mH);
  c.restore();
}

// 生成按地块类型的漂浮粒子（切换地块时重建）
function buildMicroParticles(tile) {
  const terrain = TERRAIN[tile.terrain];
  const type = terrain.atmo.particle;
  const seed = microHash((tile.id || (tile.q + '_' + tile.r)) + '_p');
  let s = seed;
  const rnd = () => { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296; };
  const N = 30;
  const arr = [];
  for (let i = 0; i < N; i++) {
    arr.push({
      x: rnd(), y: rnd(),
      r: 1.0 + rnd() * 2.4,
      sp: 0.04 + rnd() * 0.10,
      ph: rnd() * Math.PI * 2,
      amp: 0.015 + rnd() * 0.03,
      type
    });
  }
  microState.particles = arr;
}

// 每帧绘制动态粒子层（营造成对地块主题的大气氛围）
function drawMicroAtmoParticles(c, mW, mH, terrain) {
  const ps = microState.particles;
  if (!ps || !ps.length) return;
  const a = terrain.atmo;
  const t = microState.animTime;
  c.save();
  for (const p of ps) {
    let nx = p.x, ny = p.y;
    const sway = Math.sin(t * 0.6 + p.ph) * p.amp;
    if (p.type === 'snow' || p.type === 'leaf') {
      ny = (p.y + t * p.sp * 0.5) % 1; nx = p.x + sway;
    } else if (p.type === 'bubble' || p.type === 'sparkle') {
      ny = (p.y - t * p.sp * 0.6) % 1; nx = p.x + sway * 0.6;
    } else {
      nx = (p.x + t * p.sp * 0.3 + sway) % 1;
      ny = (p.y + Math.cos(t * 0.4 + p.ph) * p.amp) % 1;
    }
    nx = (nx % 1 + 1) % 1; ny = (ny % 1 + 1) % 1;
    const px = nx * mW, py = ny * mH;
    const tw = 0.55 + 0.45 * Math.sin(t * 2.2 + p.ph);
    drawParticle(c, px, py, p.r, p.type, a.pcol, tw, t * 0.8 + p.ph);
  }
  c.restore();
}

// 单粒子绘制
function drawParticle(c, px, py, r, type, col, tw, ph) {
  c.save();
  c.globalCompositeOperation = 'lighter';
  if (type === 'firefly' || type === 'sparkle') {
    const g = c.createRadialGradient(px, py, 0, px, py, r * 3.2);
    g.addColorStop(0, hexA(col, 0.9 * tw));
    g.addColorStop(1, hexA(col, 0));
    c.fillStyle = g; c.beginPath(); c.arc(px, py, r * 3.2, 0, 7); c.fill();
  } else if (type === 'snow') {
    c.fillStyle = hexA('#eaf4ff', 0.45 * tw + 0.4); c.beginPath(); c.arc(px, py, r, 0, 7); c.fill();
  } else if (type === 'bubble') {
    c.strokeStyle = hexA(col, 0.4 * tw + 0.35); c.lineWidth = 1; c.beginPath(); c.arc(px, py, r * 1.4, 0, 7); c.stroke();
    c.fillStyle = hexA('#ffffff', 0.5 * tw); c.beginPath(); c.arc(px - r * 0.4, py - r * 0.4, r * 0.35, 0, 7); c.fill();
  } else if (type === 'leaf') {
    c.translate(px, py); c.rotate(ph); c.fillStyle = hexA(col, 0.5 * tw + 0.35);
    c.beginPath(); c.ellipse(0, 0, r * 1.7, r * 0.7, 0, 0, 7); c.fill(); c.rotate(-ph); c.translate(-px, -py);
  } else { // dust
    c.fillStyle = hexA(col, 0.3 * tw + 0.15); c.beginPath(); c.arc(px, py, r * 1.5, 0, 7); c.fill();
  }
  c.restore();
}

// 地形细斑：低透明小格，做出土质起伏但不糊（矩形范围内）
function drawTerrainGrain(c, cx, cy, Rx, Ry, terrain) {
  // 无缝细斑：确定性散点柔光，替代原规则网格（去掉硬网格感，保留自然起伏）
  const seed = microHash((terrain.scene || '') + '_grain');
  let s = seed;
  const rnd = () => { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296; };
  c.save();
  const count = 280;
  for (let i = 0; i < count; i++) {
    const x = cx + (rnd() * 2 - 1) * Rx * 0.98;
    const y = cy + (rnd() * 2 - 1) * Ry * 0.98;
    const rad = 16 + rnd() * 40;
    const dark = rnd() < 0.5;
    const base = parseColor(shadeColor(terrain.groundColor, dark ? -16 : 14));
    const g = c.createRadialGradient(x, y, 0, x, y, rad);
    g.addColorStop(0, `rgba(${base[0]},${base[1]},${base[2]},0.16)`);
    g.addColorStop(1, `rgba(${base[0]},${base[1]},${base[2]},0)`);
    c.fillStyle = g;
    c.beginPath(); c.arc(x, y, rad, 0, Math.PI * 2); c.fill();
  }
  c.restore();
}

// 地形装饰物：矩形内确定性散布（种子来自地块 id），中心区域留给建筑
function drawTerrainDecor(c, cx, cy, Rx, Ry, tile, terrain) {
  let seed = microHash((tile.id || (tile.q + '_' + tile.r)) + '');
  const rnd = () => { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 4294967296; };
  const count = 30;
  const padX = Rx * 0.12, padY = Ry * 0.12, minD = Math.min(Rx, Ry) * 0.24;
  for (let n = 0; n < count; n++) {
    let x = cx + (rnd() * 2 - 1) * (Rx - padX);
    let y = cy + (rnd() * 2 - 1) * (Ry - padY);
    const dx = x - cx, dy = y - cy, d = Math.hypot(dx, dy);   // 中心避让
    if (d < minD && d > 0.001) { const kk = minD / d; x = cx + dx * kk; y = cy + dy * kk; }
    const s = 0.55 + rnd() * 0.8;
    drawDecorByTerrain(c, x, y, s, terrain, rnd);
  }
}

// 按地形挑选装饰类型
function drawDecorByTerrain(c, x, y, s, terrain, rnd) {
  switch (terrain.scene) {
    case 'forest':   rnd() < 0.8 ? drawTree(c, x, y, s) : drawRock(c, x, y, s); break;
    case 'village':  { const t = rnd(); t < 0.4 ? drawTree(c, x, y, s) : t < 0.7 ? drawBush(c, x, y, s) : drawRock(c, x, y, s); break; }
    case 'mountain': rnd() < 0.7 ? drawRock(c, x, y, s * 1.3) : drawTree(c, x, y, s * 0.8); break;
    case 'desert':   rnd() < 0.6 ? drawCactus(c, x, y, s) : drawDune(c, x, y, s); break;
    case 'snow':     rnd() < 0.5 ? drawPine(c, x, y, s) : drawSnowPile(c, x, y, s); break;
    case 'water':    rnd() < 0.5 ? drawLily(c, x, y, s) : drawWave(c, x, y, s); break;
    default:         drawBush(c, x, y, s);
  }
}

// ---- 各类装饰物（纯矢量，清晰） ----
function drawTree(c, x, y, s) {
  c.save(); c.translate(x, y);
  c.fillStyle = '#6b4a2b';
  c.fillRect(-2 * s, -2 * s, 4 * s, 11 * s);
  c.fillStyle = '#2f7d32';
  c.beginPath(); c.arc(0, -9 * s, 9 * s, 0, Math.PI * 2); c.fill();
  c.fillStyle = '#43a047';
  c.beginPath(); c.arc(-4 * s, -11 * s, 6 * s, 0, Math.PI * 2); c.fill();
  c.beginPath(); c.arc(5 * s, -10 * s, 6 * s, 0, Math.PI * 2); c.fill();
  c.restore();
}
function drawPine(c, x, y, s) {
  c.save(); c.translate(x, y);
  c.fillStyle = '#5b3a1e';
  c.fillRect(-2 * s, -2 * s, 4 * s, 9 * s);
  c.fillStyle = '#1f5e2f';
  for (let k = 0; k < 3; k++) {
    const yy = -3 * s - k * 6 * s, ww = (10 - k * 2.5) * s;
    c.beginPath(); c.moveTo(-ww, yy); c.lineTo(0, yy - 9 * s); c.lineTo(ww, yy); c.closePath(); c.fill();
  }
  c.restore();
}
function drawRock(c, x, y, s) {
  c.save(); c.translate(x, y);
  c.fillStyle = '#7d7d7d';
  c.beginPath(); c.ellipse(0, 0, 8 * s, 6 * s, 0, 0, Math.PI * 2); c.fill();
  c.fillStyle = '#9a9a9a';
  c.beginPath(); c.ellipse(-2 * s, -2 * s, 4 * s, 3 * s, 0, 0, Math.PI * 2); c.fill();
  c.restore();
}
function drawBush(c, x, y, s) {
  c.save(); c.translate(x, y);
  c.fillStyle = '#3c8c3c';
  c.beginPath(); c.arc(-3 * s, 0, 5 * s, 0, Math.PI * 2); c.fill();
  c.beginPath(); c.arc(3 * s, 0, 5 * s, 0, Math.PI * 2); c.fill();
  c.beginPath(); c.arc(0, -3 * s, 5 * s, 0, Math.PI * 2); c.fill();
  c.restore();
}
function drawCactus(c, x, y, s) {
  c.save(); c.translate(x, y);
  c.fillStyle = '#3f8f4f';
  roundRect(c, -3 * s, -12 * s, 6 * s, 18 * s, 3 * s); c.fill();
  roundRect(c, -9 * s, -6 * s, 5 * s, 4 * s, 2 * s); c.fill();
  roundRect(c, -9 * s, -10 * s, 4 * s, 8 * s, 2 * s); c.fill();
  roundRect(c, 4 * s, -8 * s, 5 * s, 4 * s, 2 * s); c.fill();
  roundRect(c, 5 * s, -12 * s, 4 * s, 8 * s, 2 * s); c.fill();
  c.restore();
}
function drawDune(c, x, y, s) {
  c.save(); c.translate(x, y);
  c.fillStyle = 'rgba(200,168,90,0.5)';
  c.beginPath(); c.ellipse(0, 0, 11 * s, 4 * s, 0, 0, Math.PI); c.fill();
  c.restore();
}
function drawSnowPile(c, x, y, s) {
  c.save(); c.translate(x, y);
  c.fillStyle = '#eef4fb';
  c.beginPath(); c.ellipse(0, 0, 9 * s, 5 * s, 0, 0, Math.PI * 2); c.fill();
  c.fillStyle = '#ffffff';
  c.beginPath(); c.ellipse(-2 * s, -2 * s, 4 * s, 2.5 * s, 0, 0, Math.PI * 2); c.fill();
  c.restore();
}
function drawWave(c, x, y, s) {
  c.save(); c.translate(x, y);
  c.strokeStyle = 'rgba(160,210,240,0.85)'; c.lineWidth = 2 * s;
  c.beginPath(); c.arc(0, 0, 7 * s, Math.PI * 0.15, Math.PI * 0.85); c.stroke();
  c.restore();
}
function drawLily(c, x, y, s) {
  c.save(); c.translate(x, y);
  c.fillStyle = '#3f8f6f';
  c.beginPath(); c.ellipse(0, 0, 8 * s, 4 * s, 0, 0, Math.PI * 2); c.fill();
  c.fillStyle = '#ff9ec4';
  c.beginPath(); c.arc(0, -1 * s, 2.5 * s, 0, Math.PI * 2); c.fill();
  c.restore();
}

// 建筑：中心清晰简笔 sprite；无建筑则不画任何东西（干净无干扰）
function drawMicroBuilding(c, cx, cy, Rx, Ry, tile) {
  const x = cx, y = cy - Ry * 0.02;
  if (tile.hasBuilding && microState.buildings[0]) {
    const b = microState.buildings[0];
    drawHouseSprite(c, x, y, Math.min(Rx,Ry) * 0.32, b.color, b.icon);
  }
}

function drawHouseSprite(c, x, y, size, color, icon) {
  c.save(); c.translate(x, y);
  const w = size, h = size * 0.78;
  c.fillStyle = 'rgba(0,0,0,0.28)';
  c.beginPath(); c.ellipse(0, h * 0.55, w * 0.6, h * 0.16, 0, 0, Math.PI * 2); c.fill();
  c.fillStyle = shadeColor(color, -14);
  roundRect(c, -w / 2, -h * 0.08, w, h * 0.66, 4); c.fill();
  c.fillStyle = color;
  c.beginPath(); c.moveTo(-w * 0.64, -h * 0.08); c.lineTo(0, -h * 0.72); c.lineTo(w * 0.64, -h * 0.08); c.closePath(); c.fill();
  c.fillStyle = 'rgba(0,0,0,0.35)';
  roundRect(c, -w * 0.12, h * 0.12, w * 0.24, h * 0.46, 2); c.fill();
  c.font = `${size * 0.42}px sans-serif`; c.textAlign = 'center'; c.textBaseline = 'middle';
  c.fillText(icon, 0, -h * 0.36);
  c.restore();
}

function roundRect(c, x, y, w, h, r) {
  c.beginPath();
  c.moveTo(x + r, y);
  c.arcTo(x + w, y, x + w, y + h, r);
  c.arcTo(x + w, y + h, x, y + h, r);
  c.arcTo(x, y + h, x, y, r);
  c.arcTo(x, y, x + w, y, r);
  c.closePath();
}

function frac(x) { return x - Math.floor(x); }
function microHash(str) {
  let h = 2166136261;
  for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619); }
  return h >>> 0;
}

// ============ 单位详情弹窗 ============
function showUnitModal(unitId) {
  if (!microState) return;
  const unit = microState.units.find(u => u.id === unitId);
  if (!unit) return;
  const modal = document.getElementById('unitModal');
  document.getElementById('modalTitle').textContent = `${unit.icon} ${unit.name}`;
  const hpColor = unit.hp > 70 ? '#8bc34a' : unit.hp > 40 ? '#ff9800' : '#f44336';
  const enColor = unit.energy > 70 ? '#4af' : unit.energy > 40 ? '#ff9800' : '#f44336';
  document.getElementById('modalBody').innerHTML = `
    <div class="statRow"><span class="statLabel">状态</span><span class="statValue" style="color:${unit.status==='working'?'#8bc34a':unit.status==='resting'?'#ff9800':'#4af'}">${unit.status==='working'?'🟢 工作中':unit.status==='resting'?'🟡 休息中':'🔵 移动中'}</span></div>
    <div class="statRow"><span class="statLabel">生命值</span><div class="statBar"><div class="statFill" style="width:${unit.hp}%;background:${hpColor};"></div></div><span class="statValue">${unit.hp}</span></div>
    <div class="statRow"><span class="statLabel">能量</span><div class="statBar"><div class="statFill" style="width:${unit.energy}%;background:${enColor};"></div></div><span class="statValue">${unit.energy}</span></div>
    <div class="statRow"><span class="statLabel">等级</span><span class="statValue">Lv.${unit.level} ${'★'.repeat(unit.level)}${'☆'.repeat(3-unit.level)}</span></div>
    <div class="statRow"><span class="statLabel">心情</span><span class="statValue">${unit.mood}</span></div>
    <div style="margin-top:16px;"><div class="panel-label">操作指令</div>
      <div class="cmdBtn" onclick="alert('已派遣工作')">📋 派遣工作</div>
      <div class="cmdBtn" onclick="alert('已令其休息')">😴 令其休息</div>
      <div class="cmdBtn" onclick="alert('已下达移动指令')">🚶 移动到指定位置</div>
      <div class="cmdBtn" onclick="alert('训练中...')">⬆️ 训练升级</div>
    </div>
  `;
  modal.classList.add('active');
}

function closeUnitModal() { document.getElementById('unitModal').classList.remove('active'); }

// ============ 工具函数 ============
function parseColor(c) {
  if (!c) return [0, 0, 0];
  if (c[0] === '#') { const n = parseInt(c.slice(1), 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; }
  const m = c.match(/\d+/g);
  if (m && m.length >= 3) return [+m[0], +m[1], +m[2]];
  return [0, 0, 0];
}
function shadeColor(color, percent) {
  const [r, g, b] = parseColor(color);
  return `rgb(${Math.min(255, Math.max(0, r + percent))},${Math.min(255, Math.max(0, g + percent))},${Math.min(255, Math.max(0, b + percent))})`;
}

// ============ 事件（修复版）============
canvas.addEventListener('wheel', e => {
  // 建造 · 捏高度工具：滚轮微调悬停格
  if (buildMode && buildTool === 'height' && currentLayer === 'earth' && hoveredTile) {
    e.preventDefault();
    applyHeight(hoveredTile, e.deltaY < 0 ? 1 : -1, true);
    return;
  }
  e.preventDefault();
  const zoomDelta = e.deltaY > 0 ? 0.9 : 1.1;
  camera.zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, camera.zoom * zoomDelta));
}, { passive: false });

canvas.addEventListener('contextmenu', e => e.preventDefault());
canvas.addEventListener('mousedown', e => {
  // 建造 · 捏高度工具：左右键分别升/降，不平移相机
  if (buildMode && buildTool === 'height' && currentLayer === 'earth') {
    e.preventDefault();
    isMouseDown = true;
    editingHeight = true;
    heightBrush = (e.button === 2) ? -1 : 1;
    heightStroke.clear();
    const rect = canvas.getBoundingClientRect();
    const hex = pixelToHex(e.clientX - rect.left, e.clientY - rect.top);
    const t = getTile(hex.q, hex.r);
    if (t) applyHeight(t, heightBrush);
    return;
  }
  if (e.button !== 0) return;
  isMouseDown = true;
  // 建造 · 移动工具：按住即进入"搬运交换"，不平移相机
  if (buildMode && buildTool === 'move' && currentLayer === 'earth') {
    const rect = canvas.getBoundingClientRect();
    const hex = pixelToHex(e.clientX - rect.left, e.clientY - rect.top);
    dragSwapFrom = getTile(hex.q, hex.r);
    draggingSwap = !!dragSwapFrom;
  }
});

canvas.addEventListener('mousemove', e => {
  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX - rect.left;
  const my = e.clientY - rect.top;
  const hex = pixelToHex(mx, my);
  const t = getTile(hex.q, hex.r);
  const coordEl = document.getElementById('coords');
  if (t) { coordEl.textContent = `坐标: (${hex.q}, ${hex.r})`; coordEl.style.display = ''; }
  else { coordEl.style.display = 'none'; }

  if (isMouseDown) {
    if (editingHeight) {
      const t = getTile(hex.q, hex.r);
      if (t) applyHeight(t, heightBrush);
      return;   // 捏高度笔触中：只刷高度
    }
    if (draggingSwap) {
      hoveredTile = getTile(hex.q, hex.r);
      return;   // 搬运中：只更新目标高亮
    }
  } else {
    // 只有没按下鼠标时才检测悬停
    hoveredTile = getTile(hex.q, hex.r);
    if (buildTool === 'height' && currentLayer === 'earth' && hoveredTile) {
      const hv = hoveredTile.height != null ? hoveredTile.height : 0;
      const sl = document.getElementById('bpHeightSlider');
      const vl = document.getElementById('bpHeightVal');
      if (sl) sl.value = String(hv);
      if (vl) vl.textContent = heightLabel(hv);
    }
  }
});

canvas.addEventListener('mouseup', e => {
  if (!isMouseDown) return;
  isMouseDown = false;

  // 建造模式 · 移动工具：拖拽/点击交换板块
  if (draggingSwap) {
    const rect = canvas.getBoundingClientRect();
    const hex = pixelToHex(e.clientX - rect.left, e.clientY - rect.top);
    const target = getTile(hex.q, hex.r);
    if (target && swapFirst && target !== swapFirst) {
      swapTiles(swapFirst, target); swapFirst = null;
    } else if (target && !swapFirst && target !== dragSwapFrom) {
      swapTiles(dragSwapFrom, target); swapFirst = null;
    } else if (target && !swapFirst && target === dragSwapFrom) {
      swapFirst = dragSwapFrom;   // 单击选为待交换第一块
    } else if (target && swapFirst && target === swapFirst) {
      swapFirst = null;           // 再次点击同一块 → 取消
    }
    draggingSwap = false; dragSwapFrom = null;
    return;
  }

  if (editingHeight) { editingHeight = false; heightStroke.clear(); return; }

  if (!hasDragged) {
    // 这是点击，不是拖拽
    const rect = canvas.getBoundingClientRect();
    const mx = e.clientX - rect.left;
    const my = e.clientY - rect.top;
    const hex = pixelToHex(mx, my);
    const tile = getTile(hex.q, hex.r);
    if (tile) {
      if (buildMode && currentLayer === 'earth') {
        handleBuildClick(tile);
      } else {
        selectedTile = tile;
        enterMicroWorld(tile);
      }
    }
  }
});

canvas.addEventListener('mouseleave', () => {
  isMouseDown = false;
  hasDragged = false;
  canvas.classList.remove('dragging');
  hoveredTile = null;
  document.getElementById('coords').style.display = 'none';
});

// ============ 移动端触摸支持（单指平移/点选 + 双指捏合缩放）============
(function setupTouch(){
  if (!('ontouchstart' in window)) return;   // 仅触摸设备启用，桌面不受影响
  canvas.style.touchAction = 'none';
  let mode = null;            // 'pan' | 'pinch'
  let panId = null;
  let lastDist = 0;
  const fire = (type, t) => canvas.dispatchEvent(new MouseEvent(type, {
    clientX: t.clientX, clientY: t.clientY, button: 0, buttons: 1,
    bubbles: true, cancelable: true
  }));
  canvas.addEventListener('touchstart', e => {
    if (microViewOpen) return;
    if (e.touches.length === 1) {
      mode = 'pan'; panId = e.touches[0].identifier;
      e.preventDefault();
      fire('mousedown', e.touches[0]);
    } else if (e.touches.length >= 2) {
      if (mode === 'pan') { fire('mouseup', e.touches[0]); }
      mode = 'pinch';
      lastDist = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
      e.preventDefault();
    }
  }, { passive: false });
  canvas.addEventListener('touchmove', e => {
    if (microViewOpen) return;
    if (mode === 'pan' && e.touches.length === 1) {
      const t = e.touches[0];
      if (t.identifier === panId) { e.preventDefault(); fire('mousemove', t); }
    } else if (mode === 'pinch' && e.touches.length >= 2) {
      e.preventDefault();
      const d = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
      if (lastDist > 0) {
        camera.zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, camera.zoom * (d / lastDist)));
      }
      lastDist = d;
    }
  }, { passive: false });
  const endTouch = e => {
    if (mode === 'pan') { fire('mouseup', e.changedTouches[0]); }
    else if (mode === 'pinch' && e.touches.length === 1) {
      // 从捏合退回单指：重置为平移起点，避免相机跳变
      mode = 'pan'; panId = e.touches[0].identifier;
      fire('mousedown', e.touches[0]);
    }
    if (e.touches.length === 0) mode = null;
  };
  canvas.addEventListener('touchend', endTouch);
  canvas.addEventListener('touchcancel', endTouch);
})();

// ============ 建造模式：地形 & 板块交换 ============
// 地形笔：点击地块刷地形 + 选定素材变体（仅大地层）
function handleBuildClick(tile) {
  if (buildTool !== 'terrain') return;
  if (tile.terrain !== buildBrush) {
    tile.terrain = buildBrush;
    tile.height = terrainToHeight(buildBrush);
    tile.tier = heightToTier(tile.height);    // tier 从 height 派生，与渲染一致
    markDirty(tile.q, tile.r);
  }
  // 素材变体：random=按坐标确定性取一张（固定到该格，刷新一致）；指定=用玩家选的下标
  const arr = TERRAIN_ASSETS[buildBrush];
  if (arr && arr.length) {
    tile.variant = (buildVariant === 'random')
      ? pickVariantIndex(terrainTex[buildBrush] || [], tile.q, tile.r)
      : Math.max(0, Math.min(arr.length - 1, buildVariant));
  } else {
    tile.variant = -1;
  }
}

// 交换两板块的全部世界内容（位置 q,r 不变，仅内容互换）
function swapTiles(a, b) {
  const keys = ['terrain', 'hasBuilding', 'buildingType', 'buildingLevel', 'units', 'unitCount', 'explored', 'tier', 'variant', 'height'];
  for (const k of keys) { const t = a[k]; a[k] = b[k]; b[k] = t; }
  // 交换后 height 仍是唯一真值：让 terrain/tier 重新跟随各自 height，
  // 否则会被旧 TERRAIN_TIER 覆盖 → 移完像被重置、地块属性看着没变
  [a, b].forEach(tile => {
    tile.terrain = heightToTerrain(tile.height);
    tile.tier = heightToTier(tile.height);
  });
  markDirty(a.q, a.r); markDirty(b.q, b.r);
  swapFlashes.push({ a: { q: a.q, r: a.r }, b: { q: b.q, r: b.r }, life: 1 });
}

  // ===== 世界数据面板（演示 + 预留 /yt_world/api/data） =====
  function computeWorldStats() {
    const byTerrain = {};
    let sumH = 0, n = 0, minH = Infinity, maxH = -Infinity;
    for (const t of tiles) {
      if (t.layer !== 'earth') continue;
      byTerrain[t.terrain] = (byTerrain[t.terrain] || 0) + 1;
      sumH += t.height; n++;
      if (t.height < minH) minH = t.height;
      if (t.height > maxH) maxH = t.height;
    }
    return { total: n, byTerrain, avgH: n ? sumH / n : 0, minH: n ? minH : 0, maxH: n ? maxH : 0 };
  }
  async function renderData() {
    const body = document.getElementById('spDataBody');
    const s = computeWorldStats();
    let remote = null;
    try { remote = await API.worldData(); } catch (e) {}
    const usingRemote = !!(remote && remote.stats);
    const terr = s.byTerrain;
    const TICON = { water:'🔵', desert:'🟡', plain:'🟢', forest:'🌲', mountain:'🟤', snow:'❄' };
    const terrRows = Object.keys(TERRAIN).map(id => {
      const c = terr[id] || 0;
      const pct = s.total ? Math.round(c / s.total * 100) : 0;
      return `<div class="dp-row"><span>${TICON[id] || ''} ${TERRAIN[id].name}</span><span>${c} 块 (${pct}%)</span></div>`;
    }).join('');
    body.innerHTML = `
      <div class="dp-section">
        <div class="dp-h">概览</div>
        <div class="dp-row"><span>地块总数</span><span>${s.total}</span></div>
        <div class="dp-row"><span>平均高度</span><span>${s.avgH.toFixed(1)}</span></div>
        <div class="dp-row"><span>高度区间</span><span>${s.minH} – ${s.maxH}</span></div>
      </div>
      <div class="dp-section">
        <div class="dp-h">地形分布</div>
        ${terrRows}
      </div>
      <div class="dp-note">${usingRemote ? '已连接后端世界数据接口（/yt_world/api/data）' : '演示数据：前端实时从地块计算。后端接口 <code>/yt_world/api/data</code> 待接入。'}</div>
    `;
  }

  // ===== 包裹面板（7列 × 行格 + 物资分类） =====
  const INV_CATEGORIES = {
    brush: [
      { ico:'🟢', nm:'平原', ct:'∞' }, { ico:'🔵', nm:'水域', ct:'∞' }, { ico:'🟤', nm:'山地', ct:'∞' },
      { ico:'🌲', nm:'森林', ct:'∞' }, { ico:'🟡', nm:'荒漠', ct:'∞' }, { ico:'❄', nm:'雪原', ct:'∞' },
      { ico:'⬜', nm:'空地', ct:'∞' },
    ],
    template: [
      { ico:'🏠', nm:'村落', ct:3 }, { ico:'🏰', nm:'城寨', ct:2 }, { ico:'⛪', nm:'神殿', ct:1 },
      { ico:'🌾', nm:'农田', ct:5 }, { ico:'🪨', nm:'矿场', ct:4 }, { ico:'🛤', nm:'道路', ct:8 },
      { ico:'🌉', nm:'桥梁', ct:3 }, { ico:'🗼', nm:'高塔', ct:1 }, { ico:'⚱', nm:'雕像', ct:2 },
      { ico:'🏕', nm:'营地', ct:4 }, { ico:'🔭', nm:'观星台', ct:1 }, { ico:'📯', nm:'烽火', ct:6 },
      { ico:'💧', nm:'水井', ct:5 }, { ico:'🌳', nm:'灵树', ct:2 }, { ico:'🪨', nm:'石碑', ct:3 },
    ],
    event: [
      { ico:'🌟', nm:'丰收', ct:2 }, { ico:'⚡', nm:'雷暴', ct:1 }, { ico:'❄️', nm:'冰封', ct:1 },
      { ico:'🌋', nm:'地动', ct:1 }, { ico:'🌈', nm:'虹息', ct:2 }, { ico:'💫', nm:'陨落', ct:1 },
      { ico:'🌀', nm:'风暴', ct:1 }, { ico:'☀️', nm:'大旱', ct:1 }, { ico:'🌙', nm:'月蚀', ct:1 },
      { ico:'✨', nm:'灵潮', ct:3 }, { ico:'🔥', nm:'野火', ct:1 }, { ico:'💎', nm:'矿脉', ct:2 },
      { ico:'🎋', nm:'竹生', ct:4 }, { ico:'🍂', nm:'落叶', ct:3 }, { ico:'🐦', nm:'迁徙', ct:2 },
    ],
  };

  function renderInvGrid(containerId, items) {
    const el = document.getElementById(containerId);
    // pad to multiple of 7 for clean grid
    const padded = [...items];
    while (padded.length % 7 !== 0) padded.push(null);
    el.innerHTML = padded.map(it => {
      if (!it) return '<div class="inv-slot"></div>';
      const has = it.ct !== '∞';
      return `<div class="inv-slot${has ? ' has-item' : ''}" title="${it.nm}${has ? ' ×'+it.ct : ' 无限'}">
        ${it.ico}<span class="inv-ct">${has ? it.ct : ''}</span></div>`;
    }).join('');
  }

  async function renderInventory() {
    let remote = null;
    try { remote = await API.inventory(); } catch (e) {}
    if (remote && Array.isArray(remote.items)) {
      // TODO: 后端返回带 category 字段时按分类渲染
      renderInvGrid('invGridBrush', remote.items.filter(i => i.cat === 'brush'));
      renderInvGrid('invGridTemplate', remote.items.filter(i => i.cat === 'template'));
      renderInvGrid('invGridEvent', remote.items.filter(i => i.cat === 'event'));
    } else {
      renderInvGrid('invGridBrush', INV_CATEGORIES.brush);
      renderInvGrid('invGridTemplate', INV_CATEGORIES.template);
      renderInvGrid('invGridEvent', INV_CATEGORIES.event);
    }
  }

  // ===== 科技树（演示 + 预留 /yt_world/api/tech） =====
  // 节点按 tier 分阶：前置满足且研究点充足才可研习；状态存 localStorage，预留后端 /yt_world/api/tech 同步。
  const TECH_TREE = [
    { id:'gather',  tier:0, ico:'🌿', name:'采集术', cost:1, pre:[],                 desc:'高效采集资源，建造笔刷消耗 −10%。' },
    { id:'fire',    tier:0, ico:'🔥', name:'火耕',   cost:1, pre:[],                 desc:'点燃荒原，解锁烧荒造地与基础冶炼。' },
    { id:'farm',    tier:1, ico:'🌾', name:'农艺',   cost:2, pre:['gather'],         desc:'开垦农田产量 +30%，解锁轮作。' },
    { id:'path',    tier:1, ico:'🛤', name:'道途',   cost:2, pre:['gather'],         desc:'道路连通使单位移动更快。' },
    { id:'masonry', tier:1, ico:'🧱', name:'砌筑',   cost:2, pre:['fire'],           desc:'解锁石质建筑（城寨 / 神殿）。' },
    { id:'irrig',   tier:2, ico:'💧', name:'水利',   cost:3, pre:['farm'],           desc:'灌溉网络，干旱事件减伤。' },
    { id:'market',  tier:2, ico:'🏪', name:'集市',   cost:3, pre:['farm','path'],    desc:'贸易节点，灵气积累加速。' },
    { id:'fort',    tier:2, ico:'🏰', name:'城防',   cost:3, pre:['masonry'],        desc:'城墙与守卫，抵御地动 / 风暴。' },
    { id:'spirit',  tier:3, ico:'🔮', name:'灵术',   cost:4, pre:['irrig','market'], desc:'操控灵气，解锁灵树速生。' },
    { id:'astral',  tier:3, ico:'🔭', name:'星图',   cost:4, pre:['fort'],           desc:'观星推演，预测事件与灾异。' },
    { id:'ascend',  tier:4, ico:'🌟', name:'升灵',   cost:5, pre:['spirit','astral'], desc:'世界飞升，解锁星空层建造。' },
  ];
  const TECH_TIER_NAMES = { 0:'启明', 1:'匠作', 2:'兴业', 3:'通玄', 4:'飞升' };
  const TECH_POINTS_START = 6;   // [PLACEHOLDER] 演示起始研究点，待后端 / 平衡校准
  const TECH_SAVE_KEY = 'world_tech_save';

  let techState = loadTechState();
  function loadTechState() {
    try {
      const raw = localStorage.getItem(TECH_SAVE_KEY);
      if (raw) {
        const o = JSON.parse(raw);
        return { done: new Set(o.done || []), points: (o.points != null ? o.points : TECH_POINTS_START) };
      }
    } catch (e) {}
    return { done: new Set(), points: TECH_POINTS_START };
  }
  function saveTechState() {
    try { localStorage.setItem(TECH_SAVE_KEY, JSON.stringify({ done:[...techState.done], points: techState.points })); } catch (e) {}
  }
  function techPreMet(t) { return t.pre.every(p => techState.done.has(p)); }

  function renderTech() {
    const body = document.getElementById('spTechBody');
    const byTier = {};
    for (const t of TECH_TREE) (byTier[t.tier] = byTier[t.tier] || []).push(t);
    const tiers = Object.keys(byTier).sort((a,b)=>a-b).map(tier => {
      const nodes = byTier[tier].map(t => {
        const done = techState.done.has(t.id);
        const met = techPreMet(t);
        const afford = techState.points >= t.cost;
        const cls = ['tech-node'];
        if (done) cls.push('done'); else if (!met) cls.push('locked'); else if (afford) cls.push('afford');
        const preHtml = t.pre.length
          ? '前置：' + t.pre.map(p => {
              const d = TECH_TREE.find(x => x.id === p);
              const ok = techState.done.has(p);
              return `<b class="${ok ? 'met' : ''}">${d ? d.name : p}</b>`;
            }).join('、')
          : '前置：无（启明科技）';
        let btn;
        if (done) btn = `<button class="tn-btn" disabled>✓ 已研习</button>`;
        else if (!met) btn = `<button class="tn-btn" disabled>未解锁</button>`;
        else btn = `<button class="tn-btn" data-tech="${t.id}">研究（${t.cost} 点）</button>`;
        return `<div class="${cls.join(' ')}">
          <div class="tn-top"><span class="tn-ico">${t.ico}</span><span class="tn-name">${t.name}</span></div>
          <div class="tn-desc">${t.desc}</div>
          <div class="tn-pre">${preHtml}</div>
          <div class="tn-cost">花费 ${t.cost} 研究点</div>
          ${btn}
        </div>`;
      }).join('');
      return `<div class="tech-tier"><div class="tech-tier-h">${TECH_TIER_NAMES[tier] || ('阶'+tier)} · 第 ${+tier+1} 阶</div><div class="tech-nodes">${nodes}</div></div>`;
    }).join('');

    body.innerHTML = `
      <div class="tech-pool">
        <span class="tp-label">研究点</span>
        <span class="tp-val">${techState.points}</span>
        <button class="tp-reset" id="techReset">重置</button>
      </div>
      ${tiers}
      <div class="tech-note">演示科技树：前置满足且研究点充足即可研习，状态存本地。后端接口 <code>/yt_world/api/tech</code> 待接入，将支持跨端同步与真正的增益结算。</div>
    `;
    body.querySelectorAll('.tn-btn[data-tech]').forEach(b => {
      b.addEventListener('click', () => {
        const id = b.dataset.tech;
        const t = TECH_TREE.find(x => x.id === id);
        if (!t || techState.done.has(id) || !techPreMet(t) || techState.points < t.cost) return;
        techState.points -= t.cost;
        techState.done.add(id);
        saveTechState();
        renderTech();
      });
    });
    const reset = body.querySelector('#techReset');
    if (reset) reset.onclick = () => {
      if (!confirm('重置科技树？已研习进度与研究点将清空。')) return;
      techState = { done: new Set(), points: TECH_POINTS_START };
      saveTechState();
      renderTech();
    };
  }


// ===== 建造模式 UI 绑定 =====
function setupBuildUI() {
  const btnBuild = document.getElementById('btnBuild');
  const panel = document.getElementById('buildPanel');
  const bpClose = document.getElementById('bpClose');
  const bpBrush = document.getElementById('bpBrush');
  const bpHint = document.getElementById('bpHint');
  const bpHeightControl = document.getElementById('bpHeightControl');
  const bpHeightSlider = document.getElementById('bpHeightSlider');
  const bpHeightVal = document.getElementById('bpHeightVal');
  if (!btnBuild || !panel) return;

  const bpMgmt = document.getElementById('bpMgmt');
  const renderBrush = () => {
    bpBrush.innerHTML = '';
    bpBrush.style.display = (buildTool === 'terrain') ? 'flex' : 'none';
    bpHeightControl.style.display = 'none';
    bpMgmt.style.display = (buildTool === 'manage') ? 'flex' : 'none';
    if (buildTool === 'terrain') {
      const BRUSH_ORDER = ['water', 'desert', 'plain', 'forest', 'mountain', 'snow'];
      BRUSH_ORDER.forEach(id => {
        const t = TERRAIN[id];
        const b = document.createElement('button');
        b.className = 'bp-chip' + (buildBrush === id ? ' active' : '');
        b.style.background = t.color; b.textContent = t.name; b.title = t.name;
        b.onclick = () => { buildBrush = id; buildVariant = 'random'; renderBrush(); };
        bpBrush.appendChild(b);
      });
      bpHint.textContent = '先选地形，点地块应用（素材按坐标自动选）。';
    } else if (buildTool === 'height') {
      bpHeightControl.style.display = 'block';
      bpHeightSlider.value = String(heightTarget);
      bpHeightVal.textContent = heightLabel(heightTarget);
      bpHint.textContent = '滑块设定高度：左键升高 / 右键降低 / 滚轮微调。每格独立，互不影响。';
    } else if (buildTool === 'manage') {
      bpHint.textContent = '调整地表比例，调好点应用即可重新生成世界。';
    } else {
      bpHint.textContent = '移动工具：点第一块再点第二块交换，或按住一块拖到另一块松手交换。';
    }
  };

  document.querySelectorAll('.bp-tool').forEach(btn => {
    btn.onclick = () => {
      document.querySelectorAll('.bp-tool').forEach(x => x.classList.remove('active'));
      btn.classList.add('active');
      buildTool = btn.dataset.tool;
      renderBrush();
    };
  });

  // 高度滑块：拖动即把当前悬停格设为滑块绝对高度（每格独立，不联动周边）
  const onHeightSlide = () => {
    heightTarget = parseInt(bpHeightSlider.value, 10);
    bpHeightVal.textContent = heightLabel(heightTarget);
    if (buildMode && buildTool === 'height' && currentLayer === 'earth' && hoveredTile) {
      setHeight(hoveredTile, heightTarget, true);
      markDirty(hoveredTile.q, hoveredTile.r);
    }
  };
  bpHeightSlider.addEventListener('input', onHeightSlide);

  // 平铺按钮
  const bpFlatten = document.getElementById('bpFlatten');
  if (bpFlatten) bpFlatten.onclick = () => {
    if (!confirm('平铺：把所有地块高度设为最低（1）？当前起伏将丢失。')) return;
    for (const t of tiles) { setHeight(t, MIN_HEIGHT); markDirty(t.q, t.r); }
    heightTarget = MIN_HEIGHT;
    bpHeightSlider.value = String(MIN_HEIGHT);
    bpHeightVal.textContent = heightLabel(MIN_HEIGHT);
  };

  // ===== 底部 4 按钮 → 统一左侧浮层面板（无顶部标签栏） =====
  const btnData = document.getElementById('btnData');
  const btnInventory = document.getElementById('btnInventory');
  const btnTech = document.getElementById('btnTech');
  const sidePanel = document.getElementById('sidePanel');
  const spBodies = document.querySelectorAll('.sp-body');
  let currentSpTab = null;
  const SP_BODY = { data:'spDataBody', inventory:'spInvBody', build:'spBuildBody', tech:'spTechBody' };

  function openSidePanel(tab) {
    sidePanel.classList.add('open');
    btnData.classList.toggle('active', tab === 'data');
    btnInventory.classList.toggle('active', tab === 'inventory');
    btnBuild.classList.toggle('active', tab === 'build');
    btnTech.classList.toggle('active', tab === 'tech');
    spBodies.forEach(b => b.classList.toggle('active', b.id === SP_BODY[tab]));
    currentSpTab = tab;
    if (tab === 'data') renderData();
    if (tab === 'inventory') renderInventory();
    if (tab === 'build') {
      buildMode = true;
      document.getElementById('buildPanel').classList.add('active');
      if (currentLayer !== 'earth') switchWorld('earth');
      renderBrush();
    }
    if (tab === 'tech') renderTech();
  }

  function closeSidePanel() {
    sidePanel.classList.remove('open');
    btnData.classList.remove('active'); btnInventory.classList.remove('active'); btnBuild.classList.remove('active'); btnTech.classList.remove('active');
    if (currentSpTab === 'build') {
      buildMode = false;
      document.getElementById('buildPanel').classList.remove('active');
      swapFirst = null; draggingSwap = false; dragSwapFrom = null;
    }
    currentSpTab = null;
  }

  btnData.addEventListener('click', () => {
    if (currentSpTab === 'data') { closeSidePanel(); return; }
    openSidePanel('data');
  });
  btnInventory.addEventListener('click', () => {
    if (currentSpTab === 'inventory') { closeSidePanel(); return; }
    openSidePanel('inventory');
  });
  btnBuild.addEventListener('click', () => {
    if (currentSpTab === 'build') { closeSidePanel(); return; }
    openSidePanel('build');
  });
  btnTech.addEventListener('click', () => {
    if (currentSpTab === 'tech') { closeSidePanel(); return; }
    openSidePanel('tech');
  });

  // 关闭按钮 → 关闭整个浮层面板
  if (bpClose) bpClose.onclick = () => {
    buildMode = false;
    document.getElementById('buildPanel').classList.remove('active');
    swapFirst = null; draggingSwap = false; dragSwapFrom = null;
    closeSidePanel();
  };

  renderBrush();
}

// 保存 / 恢复沙盘（地形与板块交换结果持久化到 localStorage）
// 后端记忆：保存按钮直接触发增量 flush（flushSave 内部自带 ✅/⚠ 反馈）
function saveWorld(btn) {
  flushSave(btn);
}
function loadSavedWorld() {
  try {
    const raw = localStorage.getItem('world_sandbox_tiles');
    if (!raw) return;
    const saved = JSON.parse(raw);
    if (!Array.isArray(saved) || !saved.length) return;
    // 兼容旧存档：把已移除的地形（如 wetland）回退为平原，避免渲染崩溃
    const validKeys = Object.keys(TERRAIN);
    saved.forEach(t => {
      if (!validKeys.includes(t.terrain)) t.terrain = 'plain';
      // 高度迁移：旧存档可能没有 height 字段或值为 0（旧最低档），按 terrain 重算
      if (t.height == null || t.height < MIN_HEIGHT) {
        t.height = terrainToHeight(t.terrain);
      }
      t.tier = heightToTier(t.height);
    });
    tiles = saved;
  } catch(e) {}
}

// ============ 后端记忆：地块增量持久化（yt_world 模块） ============
// 底图由坐标确定性生成（generateMap），只把"玩家改动的地块"增量存后端。
let dirtyTiles = new Set();           // "q,r" 集合：待保存的改动地块
let saveTimer = null;
let settingsTimer = null;

function markDirty(q, r) {
  dirtyTiles.add(q + ',' + r);
  scheduleSave();
}
function scheduleSave() {
  if (saveTimer) clearTimeout(saveTimer);
  saveTimer = setTimeout(() => flushSave(), 800);
}
async function flushSave(btn) {
  if (saveTimer) { clearTimeout(saveTimer); saveTimer = null; }
  if (!dirtyTiles.size) {
    if (btn) { btn.textContent = '✅ 已保存'; setTimeout(() => { btn.textContent = '保存'; }, 1200); }
    return;
  }
  // 收集改动地块（仅大地层）
  const byKey = new Map();
  for (const t of tiles) if (t.layer === 'earth') byKey.set(t.q + ',' + t.r, t);
  const batch = [];
  for (const key of dirtyTiles) {
    const t = byKey.get(key);
    if (!t) continue;
    batch.push({ q: t.q, r: t.r, terrain: t.terrain || null, height: t.height, flags: t.flags || {} });
  }
  dirtyTiles.clear();
  const oldText = btn ? btn.textContent : null;
  try {
    await API.saveTiles(batch);
    if (btn) { btn.textContent = '✅ 已保存'; setTimeout(() => { btn.textContent = '保存'; }, 1200); }
  } catch (e) {
    for (const b of batch) dirtyTiles.add(b.q + ',' + b.r);   // 失败重试：重新标脏
    if (btn) { btn.textContent = '⚠ 失败'; setTimeout(() => { btn.textContent = oldText || '保存'; }, 1400); }
  }
}
// 启动：用后端存档覆盖底图（地形/高度/flags 原地覆盖，不重跑建筑随机）
function applyWorldState(ws) {
  if (!ws) return;
  if (ws.settings) applyWorldSettings(ws.settings);
  if (!Array.isArray(ws.tiles)) return;
  const byKey = new Map();
  for (const t of tiles) if (t.layer === 'earth') byKey.set(t.q + ',' + t.r, t);
  for (const ov of ws.tiles) {
    const t = byKey.get(ov.q + ',' + ov.r);
    if (!t) continue;
    if (ov.terrain) t.terrain = ov.terrain;
    if (ov.height != null) { t.height = ov.height; t.tier = heightToTier(ov.height); }
    if (ov.flags) t.flags = ov.flags;
  }
}
// 相机/UI 偏好收集 + 防抖保存
function collectWorldSettings() {
  return { camera: { x: camera.x, y: camera.y, zoom: camera.zoom } };
}
function applyWorldSettings(s) {
  if (!s || !s.camera) return;
  const c = s.camera;
  if (typeof c.x === 'number') camera.x = c.x;
  if (typeof c.y === 'number') camera.y = c.y;
  if (typeof c.zoom === 'number') camera.zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, c.zoom));
}
function scheduleSettingsSave() {
  if (settingsTimer) clearTimeout(settingsTimer);
  settingsTimer = setTimeout(flushSettings, 1000);
}
async function flushSettings() {
  settingsTimer = null;
  try { await API.saveSettings(collectWorldSettings()); }
  catch (e) { /* 设置非关键，静默 */ }
}

// ESC退出微观世界
document.addEventListener('keydown', e => { if (e.key === 'Escape') exitMicroWorld(); });
document.getElementById('backBtn').addEventListener('click', exitMicroWorld);
document.getElementById('unitModal').addEventListener('click', e => { if (e.target === document.getElementById('unitModal')) closeUnitModal(); });

function exitMicroWorld() {
  document.getElementById('microView').classList.remove('active');
  if (microAnimId) { cancelAnimationFrame(microAnimId); microAnimId = null; }
  microState = null;
  microGridCache = null;
  microZoom = 1; microPanX = 0; microPanY = 0;
  microPanning = false; microPanStart = null;
  microViewOpen = false;               // 恢复主世界重绘
}

// 当前地块主题色 → 同步给上下边框（--mv-accent），让 UI 随场景/地块风格变化
function applyMicroAccent(terrainId) {
  const t = TERRAIN[terrainId];
  const a = (t && t.atmo && t.atmo.glow) || '#4aafff';
  document.getElementById('microView').style.setProperty('--mv-accent', a);
  if (microState) microState.accent = a;
}

// 平顶六边形路径
// ============ 矩形网格（仅浮岛内部，背景和圆角不画）============
// 网格单元格大小：50×50px（画布空间，随 zoom 自动缩放）
function drawMicroGrid(c, w, h, accent) {
  if (!microState) return;
  const mW = microCanvas.width, mH = microCanvas.height;
  const cx = mW / 2, cy = mH / 2;
  const Rx = mW * 0.50, Ry = mH * 0.43;
  const cell = 25;   // 网格单元像素（密度翻倍）

  c.save();

  // 裁剪区域：纯矩形，向内缩一格（25px），网格不贴浮岛边缘
  // 扩展 3px 给双描边留空间，防止右/下边线被 clip 截断
  const pad = cell;  // 向内缩一个网格单位
  const clipPad = 3; // 描边溢出补偿
  const X0 = cx - Rx + pad, Y0 = cy - Ry + pad, RW = Rx * 2 - pad * 2, RH = Ry * 2 - pad * 2;
  c.beginPath();
  c.rect(X0 - clipPad, Y0 - clipPad, RW + clipPad * 2, RH + clipPad * 2);
  c.clip();

  // 矩形网格线（双描边：深色打底 + 浅色高光，保证任意地块上都清晰，作为建造参考）
  c.beginPath();
  for (let x = X0; x <= X0 + RW + cell; x += cell) {
    c.moveTo(x, Y0); c.lineTo(x, Y0 + RH);
  }
  for (let y = Y0; y <= Y0 + RH + cell; y += cell) {
    c.moveTo(X0, y); c.lineTo(X0 + RW, y);
  }
  // round 线帽/连接：补死四角 1~2px 缺口（竖线不到上、横线不到左的象限）
  c.lineCap = 'round';
  c.lineJoin = 'round';
  c.globalAlpha = 1;
  // 第一遍：深色描边（在亮色地块上可见）
  c.lineWidth = 2.2;
  c.strokeStyle = 'rgba(8,14,26,0.32)';
  c.stroke();
  // 第二遍：浅色高光（在暗色地块上可见）
  c.lineWidth = 1.1;
  c.strokeStyle = 'rgba(255,255,255,0.55)';
  c.stroke();
  c.restore();
}

// 顶部按钮组：网格 + 缩放
document.getElementById('microGridBtn').addEventListener('click', e => {
  microGridOn = !microGridOn;
  e.currentTarget.classList.toggle('active', microGridOn);
});

// 窗口尺寸变化：重建画布与静态缓存（微观视图内）
window.addEventListener('resize', () => {
  if (microState && document.getElementById('microView').classList.contains('active')) {
    const stage = document.getElementById('microStage');
    microCanvas.width = stage.clientWidth - 280;
    microCanvas.height = stage.clientHeight;
    buildMicroGridCache();
  }
});

// ============ 时间轴辅助 ============
function initAmbParticles() {
  ambParticles = [];
  for (let i = 0; i < 60; i++) {
    ambParticles.push({
      x: Math.random() * 2000, y: Math.random() * 2000,
      vx: (Math.random() - 0.5) * 0.3, vy: -Math.random() * 0.25 - 0.05,
      r: Math.random() * 1.6 + 0.6
    });
  }
}

// 调试控件与当前帧同步（自动推进时刷新滑块/文案）
// 时间线 UI：右上角闹钟（24h 表盘，指针走动；点击播放/暂停；拖动调时）
function syncTimeUI() {
  const hh = Math.floor(timeOfDay), mm = Math.floor((timeOfDay - hh) * 60);
  const lab = (currentPalette && currentPalette.label) || '';
  const label = document.getElementById('clockLabel');
  if (label) label.textContent = `${lab} ${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}`;
  const hH = document.getElementById('hourHand'), mH = document.getElementById('minHand');
  if (hH) hH.setAttribute('transform', `rotate(${timeOfDay / 24 * 360} 50 50)`);
  if (mH) mH.setAttribute('transform', `rotate(${(timeOfDay % 1) * 360} 50 50)`);
  const sH = document.getElementById('secHand');
  if (sH) sH.setAttribute('transform', `rotate(${(performance.now() / 1000 % 60) * 6} 50 50)`);  // 真实墙钟时间驱动：1现实秒=6°，与现实秒针 100% 一致，最稳
  // 背景色 + 外环色：随当前时间节点变化（清晨橙/正午蓝/黄昏红橙/黑夜深蓝）
  const ni = currentNodeIndex(timeOfDay);
  const col = NODE_RGB[ni];
  const cw = document.getElementById('clockWidget');
  if (cw) cw.style.background = `rgba(14,20,36,.85)`;   // 统一深底，不额外着色；四段弧的颜色已足够区分阶段
  // 当前阶段的彩色弧高亮（不透明度 .55 → 1）、其他段压暗，其它 stage 名变淡
  const segIds = ['segDawn', 'segDay', 'segDusk', 'segNight'];
  for (let i = 0; i < 4; i++) {
    const seg = document.getElementById(segIds[i]);
    if (seg) seg.setAttribute('opacity', i === ni ? '1' : '.32');
  }
  document.querySelectorAll('#stageLabels text').forEach(t => {
    const s = +t.getAttribute('data-stage');
    t.setAttribute('opacity', s === ni ? '1' : '.35');
  });
  // 游戏日历：纪·年·季节
  const cal = getCalendar();
  const cl = document.getElementById('calendarLabel');
  if (cl) cl.textContent = `${ERA_NAME} ${cal.year}年 · ${cal.seasonIcon}${cal.season}（第${cal.dayOfSeason}天）`;
}

// 场景背景图接入点：传入贴合场景的背景图片 URL，背景切到透明画布让其透出
let brokenImages = {};         // 加载失败的图片不再重试
let loadedImageUrl = null;     // 当前已加载的图片 URL，避免每帧重载
function loadSceneImage(url) {
  const img = document.getElementById('sceneImage');
  if (!img || !url || brokenImages[url]) return;
  img.onerror = () => { brokenImages[url] = true; clearSceneImage(); };
  img.onload = () => { brokenImages[url] = false; };
  img.src = url; img.style.display = 'block';
  useImageBg = true;
}
function clearSceneImage() {
  const img = document.getElementById('sceneImage');
  if (img) { img.style.display = 'none'; img.removeAttribute('src'); }
  useImageBg = false;
}

// 时间线不切换图片：每个世界固定一张背景图，时间只改变色调（render 里 tint 叠加）
function refreshWorldVideo() {
  const w = WORLDS.find(x => x.id === currentLayer);
  const url = w ? (w.image || null) : null;
  if (url === loadedImageUrl) return;     // 未变化不重载
  loadedImageUrl = url;
  if (url) loadSceneImage(url); else clearSceneImage();
}

// 切换世界（五层）：星空 / 天空 / 大地 / 地下 / 地心，各一张背景图
function switchWorld(id) {
  currentLayer = id;
  refreshWorldVideo();
  syncWorldNav();
}
function syncWorldNav() {
  document.querySelectorAll('#worldNav .wn-item').forEach(el => {
    el.classList.toggle('active', el.dataset.world === currentLayer);
  });
  // 顶栏页签 + 浏览器标签随当前层更新
  const nm = WORLD_NAMES[currentLayer] || '大地';
  const wn = document.getElementById('worldName');
  if (wn) wn.textContent = nm;
  document.title = '宇森 · ' + nm;
}

// ============ 世界管理：地表比例面板（已并入 buildPanel 的"管理" tab） ============
function initWorldManager() {
  const body = document.getElementById('bpMgmtBody');
  const applyBtn = document.getElementById('bpMgmtApply');
  if (!body || !applyBtn) return;

  // 构建每种地形的滑杆行（注入到 buildPanel 内的 #bpMgmtBody）
  const TERRAIN_ORDER = ['water', 'desert', 'plain', 'forest', 'mountain', 'snow'];
  TERRAIN_ORDER.forEach(id => {
    const t = TERRAIN[id];
    const row = document.createElement('div');
    row.className = 'mp-row';
    const v = TERRAIN_RATIO[id] != null ? TERRAIN_RATIO[id] : 1;
    row.innerHTML =
      `<span class="mp-swatch" style="background:${t.color}"></span>` +
      `<span class="mp-name">${t.name}</span>` +
      `<input type="range" min="0" max="5" step="1" value="${v}" data-id="${id}">` +
      `<span class="mp-val">${v}</span>`;
    body.appendChild(row);
  });
  const sliders = Array.from(body.querySelectorAll('input[type=range]'));
  sliders.forEach(s => s.addEventListener('input', () => {
    s.parentElement.querySelector('.mp-val').textContent = s.value;
  }));

  // 预设（在 buildPanel 内的 .bp-mgmt-presets）
  document.querySelectorAll('#buildPanel .bp-mgmt-presets button').forEach(b => b.addEventListener('click', () => {
    const p = TERRAIN_RATIO_PRESETS[b.dataset.preset];
    if (!p) return;
    sliders.forEach(s => {
      const v = p[s.dataset.id];
      if (v != null) { s.value = v; s.parentElement.querySelector('.mp-val').textContent = v; }
    });
  }));

  // 应用并重构地表
  applyBtn.addEventListener('click', () => {
    let sum = 0; sliders.forEach(s => sum += (+s.value));
    if (sum <= 0) { alert('比例合计需大于 0'); return; }
    sliders.forEach(s => { TERRAIN_RATIO[s.dataset.id] = +s.value; });
    // 清理废弃 key
    for (const k in TERRAIN_RATIO) if (!VALID_TERRAINS.includes(k)) delete TERRAIN_RATIO[k];
    try { localStorage.setItem('terrainRatio', JSON.stringify(TERRAIN_RATIO)); } catch (e) {}
    generateMap();
  });
}

// ============ 初始化 ============
function init() {
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight - BOTTOM_BAR_H;
  canvas.classList.add('canDrag');
  
  initStars();
  initEmbers();
  initAmbParticles();
  // 世界管理面板（地表比例自调）
  initWorldManager();
  // 建造模式面板（地形 / 板块交换）
  setupBuildUI();
  // 右上角闹钟：刻度 + 点击播放暂停 + 拖动调时
  const ticks = document.getElementById('clockTicks');
  if (ticks) for (let i = 0; i < 24; i++) {
    const a = (i / 24) * Math.PI * 2 - Math.PI / 2;
    const isMajor = (i % 6 === 0);
    const r1 = 44, r2 = isMajor ? 36 : 40.5;
    const x1 = 50 + r1 * Math.cos(a), y1 = 50 + r1 * Math.sin(a);
    const x2 = 50 + r2 * Math.cos(a), y2 = 50 + r2 * Math.sin(a);
    const ln = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    ln.setAttribute('x1', x1); ln.setAttribute('y1', y1);
    ln.setAttribute('x2', x2); ln.setAttribute('y2', y2);
    ln.setAttribute('stroke', isMajor ? 'rgba(255,255,255,.85)' : 'rgba(255,255,255,.45)');
    ln.setAttribute('stroke-width', isMajor ? 2.0 : 1.2);
    ticks.appendChild(ln);
  }
  // 时钟外环：4 段填充扇形（铺满整圆，从圆心到外弧的 pie wedge）
  (function buildClockRing() {
    const segs = TIME_KEYFRAMES;                   // [{h:5},{h:12},{h:18},{h:21}]
    const ids = ['segDawn', 'segDay', 'segDusk', 'segNight'];
    const R = 44;                                  // 外半径（铺满整个表盘区域）
    const cx = 50, cy = 50;
    const pt = (h) => {                            // 小时 → 圆周坐标（0h 在 12 点钟）
      const rad = (h / 24) * Math.PI * 2 - Math.PI / 2;
      return { x: cx + R * Math.cos(rad), y: cy + R * Math.sin(rad) };
    };
    for (let i = 0; i < 4; i++) {
      const h0 = segs[i].h;
      const h1 = (i === 3) ? 24 : segs[i + 1].h;
      const p0 = pt(h0), p1 = pt(h1);
      const span = h1 - h0;
      const large = span > 12 ? 1 : 0;
      // 扇形路径：圆心 → 弧起点 → 弧(顺时针) → 弧终点 → 回圆心闭合
      const d = `M ${cx} ${cy} L ${p0.x} ${p0.y} A ${R} ${R} 0 ${large} 1 ${p1.x} ${p1.y} Z`;
      const el = document.getElementById(ids[i]);
      if (el) el.setAttribute('d', d);
    }
  })();
  // 4 阶段名标签：定位到对应时刻的圆周内（半径 30，文字在弧内侧）
  (function placeStageLabels() {
    const hours = [5, 12, 18, 21];
    const stages = [0, 1, 2, 3];
    const R = 23;                                 // 阶段名文字半径：环内缘 r=25，文字内移到 23 避开彩色环
    hours.forEach((h, i) => {
      const rad = (h / 24) * Math.PI * 2 - Math.PI / 2;
      const x = 50 + R * Math.cos(rad);
      const y = 50 + R * Math.sin(rad);
      const tx = document.querySelector(`#stageLabels text[data-stage="${stages[i]}"]`);
      if (tx) { tx.setAttribute('x', x); tx.setAttribute('y', y); }
    });
  })();
  // 右上角时钟仅作展示（自动推进），不绑定暂停/拖动交互
  // 世界切换导航
  document.querySelectorAll('#worldNav .wn-item').forEach(el => {
    el.addEventListener('click', () => switchWorld(el.dataset.world));
  });
  syncWorldNav();
  refreshWorldVideo();   // 初始世界（大地）加载对应背景视频
  syncTimeUI();
  // 加载动画：真实等待地形贴图全部解码完毕，再隐藏加载屏并启动渲染（预加载闸门，杜绝渐进 pop-in）
  const loadFill = document.getElementById('loadFill');
  const loadPct = document.getElementById('loadPct');
  const loadTip = document.getElementById('loadTip');
  const loadBg = document.getElementById('loadBg');
  if (loadBg) loadBg.src = pickTransitionImage();
  // 随机游戏小提示（兼作无声引导，循环轮换）
  const TIPS = [
    '💡 拖拽空白处可平移视角，滚轮缩放沙盘',
    '💡 滚轮飞入地块，进入微观村落看看居民',
    '💡 建造模式下可绘制地形，重塑世界地貌',
    '💡 按住地块拖动，可与相邻地块交换地貌',
    '💡 右上角时钟在自动流转昼夜，世界随时不同',
    '💡 五层世界：星空 / 天空 / 大地 / 地下 / 地心',
    '💡 你的建造会自动存档，下次回来世界仍在',
    '💡 切换世界标签，俯瞰同一坐标的不同层级',
    '💡 微观世界左键拖动可切换相邻地块',
    '💡 微观世界滚轮缩放、右键拖拽平移'
  ];
  let tipIdx = Math.floor(Math.random() * TIPS.length);
  loadTip.textContent = TIPS[tipIdx];
  const tipTimer = setInterval(() => {
    tipIdx = (tipIdx + 1) % TIPS.length;
    loadTip.style.opacity = '0';
    setTimeout(() => { loadTip.textContent = TIPS[tipIdx]; loadTip.style.opacity = '1'; }, 350);
  }, 2800);
  const loadStart = Date.now();
  loadTerrainAssets(p => {
    const pct = Math.round(p * 100);
    loadFill.style.width = pct + '%';
    loadPct.textContent = pct + '%';
  }).then(() => {
    clearInterval(tipTimer);
    loadFill.style.width = '100%';
    loadPct.textContent = '100%';
    // 加载屏至少停留 1 秒：确保主世界元素（地形贴图/居民/建筑）完全就绪再进入，快机也不闪屏
    const MIN_LOAD_MS = 1500;   // [PLACEHOLDER] 体感：1.5s 是否够？可下调至 1000
    const hold = Math.max(0, MIN_LOAD_MS - (Date.now() - loadStart));
    setTimeout(() => {
      document.getElementById('loadingScreen').style.display = 'none';
      requestAnimationFrame(render);
    }, hold);
  });
}

window.addEventListener('resize', () => {
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight - BOTTOM_BAR_H;
  worldCacheValid = false;   // 画布尺寸变化，交互快照失效，下次交互重新烘焙
});

loadSavedRatio();   // 应用上次保存的地表比例
generateMap();
// 注意：地表改动不再走 localStorage，统一由登录闸门拉取后端存档 applyWorldState 覆盖
init();