diff --git a/.gitignore b/.gitignore
index b3e8174..fe407e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,12 @@ dist
 dist-ssr
 *.local
 
+# Electron 打包产物与冒烟/后台/关卡验证截图
+release
+electron-smoke-*.png
+admin-ui-*.png
+level-ui-*.png
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
diff --git a/build/icon.png b/build/icon.png
new file mode 100644
index 0000000..6783c5a
Binary files /dev/null and b/build/icon.png differ
diff --git a/e2e-out/starve-1-autumn-day.png b/e2e-out/starve-1-autumn-day.png
new file mode 100644
index 0000000..644319f
Binary files /dev/null and b/e2e-out/starve-1-autumn-day.png differ
diff --git a/e2e-out/starve-10-mod-map-nofog.png b/e2e-out/starve-10-mod-map-nofog.png
new file mode 100644
index 0000000..f6e2840
Binary files /dev/null and b/e2e-out/starve-10-mod-map-nofog.png differ
diff --git a/e2e-out/starve-2-craft.png b/e2e-out/starve-2-craft.png
new file mode 100644
index 0000000..e9b3960
Binary files /dev/null and b/e2e-out/starve-2-craft.png differ
diff --git a/e2e-out/starve-3-night.png b/e2e-out/starve-3-night.png
new file mode 100644
index 0000000..5619f7f
Binary files /dev/null and b/e2e-out/starve-3-night.png differ
diff --git a/e2e-out/starve-4-winter.png b/e2e-out/starve-4-winter.png
new file mode 100644
index 0000000..9fff9ac
Binary files /dev/null and b/e2e-out/starve-4-winter.png differ
diff --git a/e2e-out/starve-5-deerclops.png b/e2e-out/starve-5-deerclops.png
new file mode 100644
index 0000000..4c99acc
Binary files /dev/null and b/e2e-out/starve-5-deerclops.png differ
diff --git a/e2e-out/starve-6-minimap.png b/e2e-out/starve-6-minimap.png
new file mode 100644
index 0000000..1f8f0d0
Binary files /dev/null and b/e2e-out/starve-6-minimap.png differ
diff --git a/e2e-out/starve-7-mod-pick.png b/e2e-out/starve-7-mod-pick.png
new file mode 100644
index 0000000..62104fc
Binary files /dev/null and b/e2e-out/starve-7-mod-pick.png differ
diff --git a/e2e-out/starve-8-mod-farm.png b/e2e-out/starve-8-mod-farm.png
new file mode 100644
index 0000000..18682f4
Binary files /dev/null and b/e2e-out/starve-8-mod-farm.png differ
diff --git a/e2e-out/starve-9-mod-chester.png b/e2e-out/starve-9-mod-chester.png
new file mode 100644
index 0000000..d42268f
Binary files /dev/null and b/e2e-out/starve-9-mod-chester.png differ
diff --git a/electron/e2e-starve.cjs b/electron/e2e-starve.cjs
new file mode 100644
index 0000000..6327ed9
--- /dev/null
+++ b/electron/e2e-starve.cjs
@@ -0,0 +1,383 @@
+// 饥荒专项端到端自检（开发用）：登录 → 进入饥荒 → 单人开局 →
+// 通过 window.__starve 后门验证：世界生成/三围/合成科技/查理/季节体温/巨鹿/小地图/存档
+// 追加：宽屏布局无滚动条断言 + Mod 体系全链路（8 个内置 mod 勾选开局逐一验证）
+// 运行：npm run electron:dist; npx electron electron/e2e-starve.cjs
+const { app, BrowserWindow, ipcMain } = require('electron')
+const path = require('path')
+const fs = require('fs')
+
+const SERVER = process.env.NLG_SERVER || 'http://127.0.0.1:8080'
+const OUT_DIR = process.env.NLG_E2E_OUT || path.join(process.cwd(), 'e2e-out')
+const pageErrors = []
+
+ipcMain.on('nlg:get-server-base', (e) => { e.returnValue = SERVER })
+ipcMain.handle('nlg:set-server-base', () => ({ ok: true }))
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
+let failures = 0
+const check = (cond, msg) => {
+  if (cond) console.log('  PASS', msg)
+  else { failures++; console.error('  FAIL', msg) }
+}
+
+async function main() {
+  fs.mkdirSync(OUT_DIR, { recursive: true })
+  const win = new BrowserWindow({
+    width: 1360,
+    height: 860,
+    show: true,
+    backgroundColor: '#0f1220',
+    webPreferences: { preload: path.join(__dirname, 'preload.cjs') },
+  })
+  win.webContents.on('console-message', (e) => {
+    if (e?.level === 'error' && e?.message) pageErrors.push(e.message)
+  })
+  const js = (code) => win.webContents.executeJavaScript(code, true)
+  const shot = async (name) => {
+    for (let i = 0; i < 3; i++) {
+      try {
+        const img = await win.webContents.capturePage()
+        fs.writeFileSync(path.join(OUT_DIR, `${name}.png`), img.toPNG())
+        console.log('[e2e] screenshot:', name)
+        return
+      } catch { await sleep(600) }
+    }
+  }
+  const waitFor = async (cond, timeoutMs, desc) => {
+    const t0 = Date.now()
+    while (Date.now() - t0 < timeoutMs) {
+      try { if (await js(cond)) return true } catch {}
+      await sleep(250)
+    }
+    throw new Error(`等待超时：${desc}`)
+  }
+  const st = () => js('window.__starve ? JSON.stringify(window.__starve.state()) : "null"').then((s) => JSON.parse(s))
+
+  const distIndex = path.join(__dirname, '../dist/index.html')
+  if (!fs.existsSync(distIndex)) throw new Error('缺少 dist，请先 npm run electron:dist')
+  await win.loadFile(distIndex)
+
+  // 登录
+  await js('localStorage.clear(); true')
+  await win.webContents.reload()
+  await waitFor(`!!document.querySelector('input[placeholder^="用户名"]')`, 10000, '登录页')
+  await js(`(() => {
+    const u = document.querySelector('input[placeholder^="用户名"]')
+    u.value = 'xiaoming'; u.dispatchEvent(new Event('input', { bubbles: true }))
+    const p = document.querySelector('input[type="password"]')
+    p.value = '123456'; p.dispatchEvent(new Event('input', { bubbles: true }))
+    document.querySelector('button.submit').click()
+    return true
+  })()`)
+  await waitFor(`!!localStorage.getItem('token') && location.hash === '#/'`, 10000, '登录成功')
+  console.log('[e2e] 登录成功')
+
+  // 确保饥荒可玩（必要时购买）
+  const gameName = await js(`
+    fetch(window.desktop.serverBase + '/api/games', { headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } })
+      .then((r) => r.json()).then((j) => ((j.data || []).find((g) => g.code === 'starve') || {}).name || '')
+  `)
+  if (!gameName) throw new Error('饥荒游戏不存在')
+  await sleep(1200)
+  const cardBtn = `(() => {
+    const card = [...document.querySelectorAll('.game-card')].find((c) => (c.querySelector('.name')?.textContent || '').trim() === ${JSON.stringify(gameName)})
+    const btn = card && card.querySelector('.actions button:last-child')
+    return btn ? btn.textContent.trim() : ''
+  })()`
+  if ((await js(cardBtn)) === '去购买') {
+    await js(`(() => {
+      const card = [...document.querySelectorAll('.game-card')].find((c) => (c.querySelector('.name')?.textContent || '').trim() === ${JSON.stringify(gameName)})
+      card.querySelector('.actions button:last-child').click(); return true
+    })()`)
+    await waitFor(`!!document.querySelector('.buy-modal')`, 4000, '购买弹窗')
+    await js(`document.querySelector('.buy-modal .bm-actions .btn:last-child').click(); true`)
+    await waitFor(`${cardBtn} === '开始游戏'`, 8000, '购买完成')
+    console.log('[e2e] 已购买饥荒')
+  }
+
+  // 进入饥荒 → 单人冒险
+  await js(`location.hash = '#/play/starve'; true`)
+  await waitFor(`!!document.querySelector('.overlay .mode-card')`, 10000, '模式选择面板')
+  await js(`document.querySelector('.overlay .mode-card').click(); true`) // 单人冒险
+  await sleep(400)
+  // 有旧档则弃档重开，保证确定性
+  await waitFor(`!![...document.querySelectorAll('.overlay button')].find((b) => b.textContent.includes('新的冒险') || b.textContent.includes('放弃存档重新开始'))`, 6000, '单人面板')
+  await js(`(() => {
+    const btns = [...document.querySelectorAll('.overlay button')]
+    const btn = btns.find((b) => b.textContent.includes('放弃存档重新开始')) || btns.find((b) => b.textContent.includes('新的冒险'))
+    btn.click()
+    return true
+  })()`)
+  await waitFor(`!!window.__starve && window.__starve.state().ents > 50`, 10000, '游戏开局 + 世界生成')
+  console.log('[e2e] 饥荒已开局')
+  await sleep(2500)
+
+  // 1) 开局状态
+  let s = await st()
+  console.log('[e2e] 开局状态:', JSON.stringify(s))
+  check(s.hp === 150 && s.hunger <= 150 && s.san <= 200, `三围官方值 (${s.hp}/${Math.round(s.hunger)}/${Math.round(s.san)})`)
+  check(s.season === 'autumn' && s.day === 1, `秋季第 1 天开局`)
+  check(!!s.biome, `出生在群系 ${s.biome}`)
+  check(s.fps > 25, `帧率正常 (${s.fps})`)
+  check(s.monKinds.includes('beefalo') && s.monKinds.includes('pig') && s.monKinds.includes('frog') && s.monKinds.includes('spider'), `生物齐备 (${[...new Set(s.monKinds)].join(',')})`)
+  // 宽屏布局：整页贴合视口不出滚动条，画布铺满容器
+  const layout = await js(`(() => {
+    const root = document.scrollingElement || document.documentElement
+    const cv = document.querySelector('canvas.starve-canvas')
+    const wrap = cv && cv.parentElement
+    const r1 = cv && cv.getBoundingClientRect()
+    const r2 = wrap && wrap.getBoundingClientRect()
+    return JSON.stringify({
+      wide: document.body.classList.contains('wide-page'),
+      noScroll: root.scrollHeight <= window.innerHeight + 1 && root.scrollWidth <= window.innerWidth + 1,
+      sh: root.scrollHeight, ih: window.innerHeight,
+      fill: !!(r1 && r2 && Math.abs(r1.height - r2.height) < 3 && Math.abs(r1.width - r2.width) < 3),
+      ch: r1 ? Math.round(r1.height) : 0, wh: r2 ? Math.round(r2.height) : 0,
+    })
+  })()`).then(JSON.parse)
+  check(layout.wide, 'wide-page 布局生效')
+  check(layout.noScroll, `无滚动条（页高 ${layout.sh} <= 视口 ${layout.ih}）`)
+  check(layout.fill, `画布铺满游戏区 (画布高 ${layout.ch} / 容器高 ${layout.wh})`)
+  await shot('starve-1-autumn-day')
+
+  // 2) 合成与科技
+  await js(`(() => { const g = window.__starve; g.give('twig',8); g.give('flint',6); g.give('grass',12); g.give('log',24); g.give('rock',24); g.give('gold',8); return true })()`)
+  await js(`window.__starve.craft('axe'); true`)
+  await sleep(300)
+  s = await st()
+  check(s.equip.hand === 'axe', `打造斧头并自动装备 (${s.equip.hand})`)
+  const spearBefore = await js(`(() => { window.__starve.craft('spear'); return window.__starve.state().slots.join(',') })()`)
+  check(!spearBefore.includes('spear'), '无科学机器时长矛不可合成（科技封锁）')
+  await js(`window.__starve.craft('sciencemachine'); window.__starve.give('rope',2); true`)
+  await sleep(300)
+  await js(`window.__starve.craft('spear'); true`)
+  await sleep(300)
+  s = await st()
+  check(s.slots.join(',').includes('spear'), `科学机器旁解锁长矛原型 (${s.slots.join(',')})`)
+  await js(`window.__starve.craft('campfire'); true`)
+  await sleep(300)
+  s = await st()
+  check(s.fires >= 1, '篝火点燃')
+  await shot('starve-2-craft')
+
+  // 3) 夜晚 + 查理
+  await js(`window.__starve.time(150); true`)
+  await sleep(800)
+  await shot('starve-3-night')
+  // 走离篝火再测查理（先记录当前 hp）
+  const hpBefore = (await st()).hp
+  await js(`(() => {
+    const g = window.__starve
+    // 传送到远处黑暗地带（直接改不了坐标，用给火把再收走的方式不行——改用等待查理打到）
+    return true
+  })()`)
+  // 玩家出生点附近有篝火，把时间拨到夜晚但玩家未必在火圈外——直接验证黑暗提示逻辑成本高，
+  // 改为验证「夜晚黑暗掉血」：等 8 秒看是否遭袭（若在光圈内则跳过该断言）
+  await sleep(8000)
+  s = await st()
+  const struck = s.hp < hpBefore - 50
+  console.log(`[e2e] 查理测试：hp ${hpBefore} -> ${s.hp}${struck ? '（遭袭）' : '（在光圈内，跳过）'}`)
+  await js(`window.__starve.time(20); true`) // 拨回白天防连击致死
+
+  // 4) 冬季 + 体温 + 巨鹿（先传送远离篝火，避免火焰取暖干扰）
+  await js(`(() => { const p = window.__starve.state().pos; window.__starve.pos(p[0] + 400, p[1]); window.__starve.season('winter'); return true })()`)
+  await sleep(400)
+  s = await st()
+  check(s.season === 'winter', '跳转冬季')
+  const tempBefore = s.temp
+  await sleep(4000)
+  s = await st()
+  check(s.temp < tempBefore, `冬季体温下降 (${tempBefore}° -> ${s.temp}°)`)
+  await shot('starve-4-winter')
+  await js(`window.__starve.deerclops(); true`)
+  await sleep(2500)
+  s = await st()
+  check(s.monKinds.includes('deerclops'), `独眼巨鹿降临 (${[...new Set(s.monKinds)].join(',')})`)
+  await sleep(1500)
+  await shot('starve-5-deerclops')
+
+  // 5) 小地图
+  await js(`window.dispatchEvent(new KeyboardEvent('keydown', { key: 'm' })); true`)
+  await sleep(800)
+  const mapVisible = await js(`(() => { const el = document.querySelector('.ds-map'); return el && el.style.display !== 'none' })()`)
+  check(mapVisible, '小地图 M 键开启')
+  await shot('starve-6-minimap')
+  await js(`window.dispatchEvent(new KeyboardEvent('keydown', { key: 'm' })); window.dispatchEvent(new KeyboardEvent('keyup', { key: 'm' })); true`)
+
+  // 6) 存档往返
+  await js(`[...document.querySelectorAll('.hud-left .ds-btn')].find((b) => b.textContent.includes('保存'))?.click(); true`)
+  await sleep(1200)
+  const saved = await js(`
+    fetch(window.desktop.serverBase + '/api/games/starve/save', { headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } })
+      .then((r) => r.json()).then((j) => j.data || j).then((d) => !!(d && d.exists !== false && d.data)).catch(() => false)
+  `)
+  check(saved, '云存档已写入（v4）')
+
+  // ===== 7) Mod 体系全链路 =====
+  console.log('[e2e] === Mod 体系 ===')
+  // 重新进入游玩页：单人面板勾选全部 mod 后弃档重开
+  await js(`location.hash = '#/'; true`)
+  await sleep(700)
+  await js(`location.hash = '#/play/starve'; true`)
+  await waitFor(`!!document.querySelector('.overlay .mode-card')`, 10000, '模式选择面板(二次)')
+  await js(`document.querySelector('.overlay .mode-card').click(); true`)
+  await waitFor(`document.querySelectorAll('.mod-pick input').length >= 8`, 6000, 'Mod 勾选列表')
+  const modCount = await js(`(() => {
+    const boxes = [...document.querySelectorAll('.mod-pick input')]
+    boxes.forEach((cb) => { if (!cb.checked) cb.click() })
+    return boxes.filter((cb) => cb.checked).length
+  })()`)
+  check(modCount === 8, `勾选全部 8 个 mod (${modCount})`)
+  const factorTxt = await js(`(document.querySelector('.mod-pick .mp-total') || {}).textContent || ''`)
+  check(factorTxt.includes('0.64'), `面板显示难度系数 (${factorTxt.trim()})`)
+  await shot('starve-7-mod-pick')
+  await js(`(() => {
+    const btns = [...document.querySelectorAll('.overlay button')]
+    const btn = btns.find((b) => b.textContent.includes('放弃存档重新开始')) || btns.find((b) => b.textContent.includes('新的冒险'))
+    btn.click()
+    return true
+  })()`)
+  await waitFor(`!!window.__starve && window.__starve.mods().length === 8 && window.__starve.state().ents > 50`, 12000, 'Mod 局开局')
+  s = await st()
+  check(s.mods.length === 8, `本局激活 mod：${s.mods.join(',')}`)
+  check(s.scoreFactor === 0.64, `得分系数 0.64 (${s.scoreFactor})`)
+
+  // 和平模式：现在就排猎犬波，结尾处验证一直没有狗（无 mod 时 6 秒后必出）
+  await js(`window.__starve.hound(); true`)
+
+  // 宝藏：世界生成撒了箱子；传送过去开箱得战利品
+  const chestN = await js(`window.__starve.entCount('chest')`)
+  check(chestN >= 6 && chestN <= 10, `宝箱撒点 6~10 个 (${chestN})`)
+  const chestPos = await js(`JSON.stringify(window.__starve.find('chest'))`).then(JSON.parse)
+  await js(`window.__starve.pos(${chestPos[0]}, ${chestPos[1] + 36}); true`)
+  const slotsBeforeChest = (await st()).slots.join(',')
+  await js(`window.__starve.poke('chest'); true`)
+  await sleep(300)
+  s = await st()
+  check(s.slots.join(',') !== slotsBeforeChest, `开箱获得战利品 (${s.slots.join(',')})`)
+
+  // 便利包：堆叠上限 99（原版 40）
+  await js(`window.__starve.give('grass', 90); true`)
+  await sleep(200)
+  s = await st()
+  check(s.slots.some((x) => x === 'grassx90'), `草堆叠 90/99 一格 (${s.slots.find((x) => x.startsWith('grass'))})`)
+
+  // 农场：锄头开垦 → 播种 → 拨快生长 → 收获（撒点太密会提示"太挤"，挪几步重试）
+  await js(`window.__starve.give('hoe', 1); true`)
+  await sleep(200)
+  for (let k = 0; k < 8; k++) {
+    await js(`window.__starve.useCode('hoe'); true`)
+    await sleep(150)
+    if (await js(`window.__starve.entCount('farmplot')`)) break
+    await js(`(() => { const g = window.__starve; const p = g.state().pos; g.pos(p[0] + 56, p[1] + (${k} % 2 ? 64 : -64)); return true })()`)
+  }
+  check((await js(`window.__starve.entCount('farmplot')`)) >= 1, '锄头开垦出农田')
+  await js(`window.__starve.give('carrotseeds', 2); window.__starve.poke('farmplot'); true`)
+  await sleep(200)
+  await js(`window.__starve.tickEnts(400); true`) // 拨快 400 秒 → 成熟
+  await sleep(200)
+  await js(`window.__starve.poke('farmplot'); true`)
+  await sleep(200)
+  s = await st()
+  check(s.slots.some((x) => x.startsWith('carrotx')), `农田收获胡萝卜 (${s.slots.find((x) => x.startsWith('carrotx'))})`)
+  await shot('starve-8-mod-farm')
+
+  // 噩梦模式：蜘蛛血量 100 → 150（就近读我们刚召的那只，别误读远处巢里的）
+  await js(`window.__starve.spider(); true`)
+  await sleep(300)
+  const spiderHp = await js(`window.__starve.nearMobHp('spider')`)
+  check(spiderHp === 150, `噩梦蜘蛛血量 150 (${spiderHp})`)
+
+  // 魔法：火魔杖 AoE 灼烧（35 伤害）→ 回旋镖补刀（20 伤害）
+  await js(`window.__starve.give('firestaff', 1); true`)
+  await sleep(200)
+  await js(`window.__starve.useCode('firestaff'); true`)
+  await sleep(300)
+  const afterStaff = await js(`window.__starve.nearMobHp('spider')`)
+  check(afterStaff === 115, `火魔杖灼烧 150→115 (${afterStaff})`)
+  await js(`window.__starve.give('boomerang', 1); true`)
+  await sleep(200)
+  await js(`window.__starve.useCode('boomerang'); true`)
+  await sleep(1600)
+  const afterBoom = await js(`window.__starve.nearMobHp('spider')`)
+  check(afterBoom < afterStaff, `回旋镖命中 (${afterStaff}→${afterBoom})`)
+
+  // 清场：清掉敌对生物（那只 95 血的噩梦蜘蛛会一路追杀）+ 回满三围，保证后续断言确定性
+  await js(`window.__starve.wipeHostiles(); window.__starve.heal(); true`)
+  await js(`(() => { const t = window.__starve.find('tree'); if (t) window.__starve.pos(t[0] + 40, t[1] + 40); return true })()`)
+  await sleep(300)
+
+  // 切斯特：拿到眼骨后现身跟随；丢地上的东西会被它吞掉，点它吐出
+  await js(`window.__starve.give('eyebone', 1); true`)
+  await waitFor(`window.__starve.state().monKinds.includes('chester')`, 6000, '切斯特现身')
+  check(true, '眼骨召来切斯特')
+  const store0 = await js(`JSON.stringify(window.__starve.mobStore('chester') || [])`).then(JSON.parse)
+  check(store0.length === 0, '切斯特初始空仓')
+  await js(`window.__starve.drop('log', 5); window.__starve.drop('flint', 3); true`)
+  await sleep(3000)
+  const store1 = await js(`JSON.stringify(window.__starve.mobStore('chester') || [])`).then(JSON.parse)
+  check(store1.length >= 1, `切斯特吞了掉落物 (${store1.join(',') || '空'})`)
+  await js(`window.__starve.pokeMob('chester'); true`)
+  await sleep(300)
+  const store2 = await js(`JSON.stringify(window.__starve.mobStore('chester') || [])`).then(JSON.parse)
+  check(store2.length === 0, '点击切斯特吐出全部物品')
+  await shot('starve-9-mod-chester')
+
+  // 复活雕像：二级科技建造 → 致死伤害被拦截原地复活（先清背包防溢出落地）
+  await js(`(() => { const g = window.__starve; g.clearInv(); g.give('rock', 40); g.give('gold', 14); g.give('log', 12); return true })()`)
+  await js(`window.__starve.craft('sciencemachine'); true`)
+  await sleep(200)
+  await js(`window.__starve.craft('alchemyengine'); true`)
+  await sleep(200)
+  await js(`window.__starve.craft('revivestatue'); true`)
+  await sleep(200)
+  check((await js(`window.__starve.entCount('revivestatue')`)) === 1, '建成复活雕像')
+  await js(`window.__starve.hurt(999); true`)
+  await sleep(400)
+  s = await st()
+  check(s.hp === 75, `致死伤害被雕像拦截，半血复活 (hp=${s.hp})`)
+  check((await js(`window.__starve.entCount('revivestatue')`)) === 0, '雕像已消耗')
+  const overlayDead = await js(`!!document.querySelector('.death-overlay')`)
+  check(!overlayDead, '未进入死亡结算')
+
+  // 和平模式收尾断言：排波已过去 10 秒+，仍然无猎犬
+  s = await st()
+  check(!s.monKinds.includes('hound') && !s.monKinds.includes('icehound'), `和平模式全程无猎犬 (${[...new Set(s.monKinds)].join(',')})`)
+
+  // 便利包无迷雾：直接开地图截图（全图可见）
+  await js(`window.dispatchEvent(new KeyboardEvent('keydown', { key: 'm' })); true`)
+  await sleep(700)
+  await shot('starve-10-mod-map-nofog')
+  await js(`window.dispatchEvent(new KeyboardEvent('keydown', { key: 'm' })); window.dispatchEvent(new KeyboardEvent('keyup', { key: 'm' })); true`)
+
+  // Mod 存档往返：保存 → 云端应带 mods 字段
+  await js(`[...document.querySelectorAll('.hud-left .ds-btn')].find((b) => b.textContent.includes('保存'))?.click(); true`)
+  await sleep(1200)
+  const savedMods = await js(`
+    fetch(window.desktop.serverBase + '/api/games/starve/save', { headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } })
+      .then((r) => r.json()).then((j) => j.data || j)
+      .then((d) => { try { return JSON.parse(d.data).mods || [] } catch { return [] } })
+      .catch(() => [])
+  `)
+  check(Array.isArray(savedMods) && savedMods.length === 8, `存档记录 mod 集合 (${savedMods.length} 个)`)
+
+  // 汇总
+  const errs = pageErrors.filter((m) => !m.includes('favicon') && !m.includes('DevTools'))
+  if (errs.length) {
+    console.error(`[e2e] 页面报错 ${errs.length} 条：`)
+    errs.slice(0, 10).forEach((m) => console.error('  -', m))
+    failures += errs.length
+  }
+  console.log(failures ? `[e2e] ${failures} 项失败` : '[e2e] 饥荒专项自检全部通过')
+  app.exit(failures ? 1 : 0)
+}
+
+app.whenReady().then(() =>
+  main().catch((err) => {
+    console.error('[e2e] 失败：', err.message)
+    app.exit(1)
+  })
+)
+setTimeout(() => {
+  console.error('[e2e] 总超时')
+  app.exit(1)
+}, 220000)
diff --git a/electron/e2e.cjs b/electron/e2e.cjs
new file mode 100644
index 0000000..9aad7be
--- /dev/null
+++ b/electron/e2e.cjs
@@ -0,0 +1,233 @@
+// 端到端自检（开发用，不随应用打包），支持两种模式：
+//   desktop（默认）：以 file:// 加载 dist 构建产物 + preload 注入，验证桌面端（hash 路由 + 配置服务器地址）
+//   web：不带 preload 加载 Vite 开发服务器，等价纯浏览器环境，验证网页版（history 路由 + 同源代理）
+// 流程：清空登录态 → 演示账号真实登录 → 大厅（含购买弹窗）→ 对战大厅 → WS 建房/退房 → 单机开一局 → 汇总页面报错
+// 运行：npm run electron:e2e（桌面模式）；$env:NLG_E2E_MODE='web'; npx electron electron/e2e.cjs（网页模式，需 5173 开发服务器）
+// NLG_E2E_GAME 可指定单机步骤玩哪款游戏（默认 snake，如 mario / linkgame）
+const { app, BrowserWindow, ipcMain } = require('electron')
+const path = require('path')
+const fs = require('fs')
+
+const MODE = process.env.NLG_E2E_MODE === 'web' ? 'web' : 'desktop'
+const SERVER = process.env.NLG_SERVER || 'http://127.0.0.1:8080'
+const WEB_URL = process.env.NLG_E2E_URL || 'http://localhost:5173'
+const OUT_DIR = process.env.NLG_E2E_OUT || process.cwd()
+const GAME = process.env.NLG_E2E_GAME || 'snake'
+const SUFFIX = MODE === 'web' ? '-web' : ''
+const pageErrors = []
+
+// preload 依赖该同步 IPC 提供服务器地址（仅桌面模式挂 preload）
+ipcMain.on('nlg:get-server-base', (e) => { e.returnValue = SERVER })
+ipcMain.handle('nlg:set-server-base', () => ({ ok: true }))
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
+
+async function main() {
+  const win = new BrowserWindow({
+    width: 1280,
+    height: 820,
+    show: true,
+    backgroundColor: '#0f1220',
+    webPreferences: MODE === 'desktop' ? { preload: path.join(__dirname, 'preload.cjs') } : {},
+  })
+  // 收集页面报错（Electron 新版事件对象：event.level 为 'error' 等字符串）
+  win.webContents.on('console-message', (e) => {
+    if (e?.level === 'error' && e?.message) pageErrors.push(e.message)
+  })
+  const js = (code) => win.webContents.executeJavaScript(code, true)
+  // 截图：capturePage 在 Windows 上偶发 UnknownVizError（GPU 合成器抖动），重试且失败不阻断流程
+  const shot = async (name) => {
+    for (let i = 0; i < 3; i++) {
+      try {
+        const img = await win.webContents.capturePage()
+        const file = path.join(OUT_DIR, `${name}${SUFFIX}.png`)
+        fs.writeFileSync(file, img.toPNG())
+        console.log('[e2e] screenshot:', file)
+        return
+      } catch (err) {
+        if (i === 2) console.warn(`[e2e] 截图 ${name} 失败（不影响流程）：${err.message}`)
+        else await sleep(600)
+      }
+    }
+  }
+  // 轮询等待页面条件成立
+  const waitFor = async (cond, timeoutMs, desc) => {
+    const t0 = Date.now()
+    while (Date.now() - t0 < timeoutMs) {
+      try {
+        if (await js(cond)) return true
+      } catch {}
+      await sleep(300)
+    }
+    throw new Error(`等待超时：${desc}`)
+  }
+  // 路由条件与跳转：桌面端 hash 模式，网页版 history 模式
+  const atRoute = (p) => (MODE === 'desktop' ? `location.hash === '#${p}'` : `location.pathname === '${p}'`)
+  const goto = async (p) => {
+    if (MODE === 'desktop') {
+      await js(`location.hash = '#${p}'; true`)
+    } else {
+      // history 模式下直接整页跳转（等价用户输入地址），开发服务器有 SPA 回退
+      await win.loadURL(`${WEB_URL}${p}`)
+    }
+    await waitFor(atRoute(p), 5000, `路由到 ${p}`)
+  }
+
+  if (MODE === 'desktop') {
+    const distIndex = path.join(__dirname, '../dist/index.html')
+    if (!fs.existsSync(distIndex)) throw new Error('缺少 dist/index.html，请先 npm run electron:dist')
+    await win.loadFile(distIndex)
+  } else {
+    await win.loadURL(WEB_URL).catch(() => {
+      throw new Error(`无法访问 ${WEB_URL}，请先 npm run dev 启动开发服务器`)
+    })
+  }
+
+  // 第 0 步：清空历史登录态，确保从登录页开始
+  await js('localStorage.clear(); true')
+  await win.webContents.reload()
+  await waitFor(`!!document.querySelector('input[placeholder^="用户名"]')`, 10000, '登录页渲染')
+  console.log(`[e2e] 登录页已渲染（${MODE === 'desktop' ? 'file:// + hash 路由' : 'http + history 路由'}）`)
+
+  // 第 1 步：填写演示账号并提交（触发 input 事件以驱动 v-model）
+  await js(`
+    (() => {
+      const u = document.querySelector('input[placeholder^="用户名"]')
+      u.value = 'xiaoming'; u.dispatchEvent(new Event('input', { bubbles: true }))
+      const p = document.querySelector('input[type="password"]')
+      p.value = '123456'; p.dispatchEvent(new Event('input', { bubbles: true }))
+      document.querySelector('button.submit').click()
+      return true
+    })()
+  `)
+  // 第 2 步：等待登录成功（Token 落库 + 路由跳到大厅）
+  await waitFor(`!!localStorage.getItem('token') && ${atRoute('/')}`, 10000, '登录成功并跳转大厅')
+  console.log('[e2e] 登录成功，Token 已写入，已跳转大厅')
+  await sleep(1800) // 等游戏列表与字体渲染
+  await shot('electron-smoke-lobby')
+
+  // 第 2.5 步：大厅购买弹窗（若存在待解锁游戏则点开验证展示与关闭）
+  const hasBuyBtn = await js(
+    `!![...document.querySelectorAll('.game-card button')].find((b) => b.textContent.includes('去购买'))`
+  )
+  if (hasBuyBtn) {
+    await js(`
+      [...document.querySelectorAll('.game-card button')].find((b) => b.textContent.includes('去购买')).click(); true
+    `)
+    await waitFor(`!!document.querySelector('.buy-modal')`, 4000, '购买弹窗打开')
+    await sleep(400)
+    await shot('electron-smoke-buymodal')
+    await js(`document.querySelector('.buy-modal .bm-close').click(); true`)
+    await waitFor(`!document.querySelector('.buy-modal')`, 3000, '购买弹窗关闭')
+    console.log('[e2e] 大厅购买弹窗：打开展示详情 / 关闭均正常')
+  } else {
+    console.log('[e2e] 大厅无待解锁游戏，跳过购买弹窗检查')
+  }
+
+  // 第 2.6 步：确保目标游戏可玩——未拥有则通过弹窗「立即购买」走一遍真实购买闭环
+  const gameName = await js(`
+    fetch((window.desktop && window.desktop.serverBase ? window.desktop.serverBase : '') + '/api/games', {
+      headers: { Authorization: 'Bearer ' + localStorage.getItem('token') },
+    }).then((r) => r.json()).then((j) => ((j.data || []).find((g) => g.code === '${GAME}') || {}).name || '')
+  `)
+  if (!gameName) throw new Error(`游戏 ${GAME} 不存在或列表接口异常`)
+  const cardBtnLabel = `(() => {
+    const card = [...document.querySelectorAll('.game-card')].find((c) => (c.querySelector('.name')?.textContent || '').trim() === ${JSON.stringify(gameName)})
+    const btn = card && card.querySelector('.actions button:last-child')
+    return btn ? btn.textContent.trim() : ''
+  })()`
+  if ((await js(cardBtnLabel)) === '去购买') {
+    await js(`(() => {
+      const card = [...document.querySelectorAll('.game-card')].find((c) => (c.querySelector('.name')?.textContent || '').trim() === ${JSON.stringify(gameName)})
+      card.querySelector('.actions button:last-child').click()
+      return true
+    })()`)
+    await waitFor(`!!document.querySelector('.buy-modal')`, 4000, '目标游戏购买弹窗打开')
+    const canBuy = await js(`!document.querySelector('.buy-modal .bm-actions .btn:last-child').disabled`)
+    if (!canBuy) throw new Error(`积分不足，无法购买 ${gameName}，无法继续单机游戏步骤`)
+    await js(`document.querySelector('.buy-modal .bm-actions .btn:last-child').click(); true`)
+    await waitFor(`!document.querySelector('.buy-modal')`, 6000, '购买完成弹窗自动关闭')
+    await waitFor(`${cardBtnLabel} === '开始游戏'`, 6000, '购买后卡片刷新为可玩')
+    console.log(`[e2e] 已通过大厅弹窗直接购买「${gameName}」，卡片已解锁`)
+  } else {
+    console.log(`[e2e] 「${gameName}」已可玩，无需购买`)
+  }
+
+  // 第 3 步：进入对战大厅
+  await goto('/battle')
+  await sleep(1500)
+  await shot('electron-smoke-battle')
+
+  // 第 4 步：WebSocket 建房（联机核心链路）——创建斗地主 AI 房间并拿到邀请码
+  await js(`
+    (() => {
+      const btn = [...document.querySelectorAll('button')].find((b) => b.textContent.includes('创建房间'))
+      btn.click()
+      return true
+    })()
+  `)
+  await waitFor(
+    `${atRoute('/battle/room')} && /^[A-Z0-9]{6}$/.test(document.querySelector('.code-box b')?.textContent?.trim() || '')`,
+    10000,
+    'WS 建房成功并显示 6 位邀请码'
+  )
+  const roomCode = await js(`document.querySelector('.code-box b').textContent.trim()`)
+  console.log('[e2e] WebSocket 建房成功，邀请码：' + roomCode)
+  await sleep(900)
+  await shot('electron-smoke-room')
+  // 退出房间，回到对战大厅
+  await js(`
+    (() => {
+      const btn = [...document.querySelectorAll('button')].find((b) => b.textContent.includes('退出房间'))
+      btn.click()
+      return true
+    })()
+  `)
+  await waitFor(atRoute('/battle'), 5000, '退房返回对战大厅')
+  console.log('[e2e] 已退出房间')
+
+  // 第 5 步：单机游戏运行（渲染与游戏循环）——默认贪吃蛇，可用 NLG_E2E_GAME 换游戏
+  // 普通游戏是「开始游戏」按钮；带关卡的游戏（连连看/消消乐/马里奥）是关卡选择面板的继续按钮
+  await goto(`/play/${GAME}`)
+  const startBtnExpr = `(() => {
+    return document.querySelector('.overlay .ls-continue') ||
+      [...document.querySelectorAll('.overlay button')].find((b) => b.textContent.includes('开始游戏')) || null
+  })()`
+  await waitFor(`!!${startBtnExpr}`, 10000, `${GAME} 游玩页就绪`)
+  const isLevelGame = await js(`!!document.querySelector('.overlay .level-select')`)
+  if (isLevelGame) {
+    console.log(`[e2e] ${GAME} 为关卡制游戏，关卡选择面板已展示`)
+  }
+  await js(`(${startBtnExpr}).click(); true`)
+  await sleep(2200) // 让游戏跑几帧
+  // Canvas 游戏看画布，DOM 游戏（连连看/消消乐）看棋盘容器
+  await waitFor(
+    `!!document.querySelector('.stage canvas') || !!document.querySelector('.stage .link-board') || !!document.querySelector('.stage .m3-board .board')`,
+    5000,
+    '游戏画面渲染'
+  )
+  console.log(`[e2e] ${GAME} 已开局，画面渲染正常`)
+  await shot('electron-smoke-game')
+
+  // 汇总
+  if (pageErrors.length) {
+    console.error(`[e2e] 页面报错 ${pageErrors.length} 条：`)
+    for (const m of pageErrors.slice(0, 10)) console.error('  -', m)
+    app.exit(1)
+    return
+  }
+  console.log(`[e2e] 全部通过（${MODE} 模式）：登录 / 路由 / 大厅 / WS 建房退房 / 单机游戏均正常，无页面报错`)
+  app.exit(0)
+}
+
+app.whenReady().then(() =>
+  main().catch((err) => {
+    console.error('[e2e] 失败：', err.message)
+    app.exit(1)
+  })
+)
+// 兜底超时
+setTimeout(() => {
+  console.error('[e2e] 总超时')
+  app.exit(1)
+}, 90000)
diff --git a/electron/main.cjs b/electron/main.cjs
new file mode 100644
index 0000000..c48ffd6
--- /dev/null
+++ b/electron/main.cjs
@@ -0,0 +1,461 @@
+// Electron 主进程：窗口生命周期、应用菜单、后端服务器地址配置、外链拦截
+// 加载策略：开发模式（未打包）优先连 Vite 开发服务器（5173），连不上回退到本地 dist 构建产物；
+// 打包后固定加载 asar 内的 dist。渲染进程通过 preload 注入的 window.desktop 获取服务器地址
+const { app, BrowserWindow, Menu, Tray, nativeImage, ipcMain, shell, dialog, net } = require('electron')
+const path = require('path')
+const fs = require('fs')
+
+// 后端服务器默认地址（可在「菜单 → 服务器设置」中修改，保存在用户数据目录）
+// 生产桌面端默认连线上；本机调试可在菜单里改回 http://127.0.0.1:8080
+const DEFAULT_SERVER = 'https://game.nailaoyun.cn'
+const DEV_URL = process.env.VITE_DEV_SERVER_URL || 'http://localhost:5173'
+// NLG_LOAD=dist 可在开发模式下强制加载 dist（用于模拟打包后的运行环境）
+const FORCE_DIST = process.env.NLG_LOAD === 'dist'
+// 冒烟自检模式：页面加载完成后截图保存并退出（用于自动化验证桌面端能正常启动）
+const SMOKE = process.argv.includes('--smoke') || process.env.NLG_SMOKE === '1'
+
+let mainWin = null
+let settingsWin = null
+let tray = null
+// 真正退出时置 true（托盘「退出」/ app.quit）；否则点关闭按钮只隐藏到托盘
+let isQuitting = false
+
+function appIconPath() {
+  return path.join(__dirname, '../build/icon.png')
+}
+
+// ---------------------------------------------------------------------
+// 配置读写：%APPDATA%/<app>/config.json
+// ---------------------------------------------------------------------
+function cfgFile() {
+  return path.join(app.getPath('userData'), 'config.json')
+}
+function readCfg() {
+  try {
+    return { serverBase: DEFAULT_SERVER, ...JSON.parse(fs.readFileSync(cfgFile(), 'utf8')) }
+  } catch {
+    return { serverBase: DEFAULT_SERVER }
+  }
+}
+function writeCfg(patch) {
+  const next = { ...readCfg(), ...patch }
+  fs.mkdirSync(path.dirname(cfgFile()), { recursive: true })
+  fs.writeFileSync(cfgFile(), JSON.stringify(next, null, 2))
+  return next
+}
+
+// ---------------------------------------------------------------------
+// IPC：preload 同步取服务器地址；设置窗口保存新地址后重载主窗口
+// ---------------------------------------------------------------------
+ipcMain.on('nlg:get-server-base', (e) => {
+  e.returnValue = readCfg().serverBase
+})
+ipcMain.handle('nlg:set-server-base', (_e, url) => {
+  const clean = String(url || '').trim().replace(/\/+$/, '')
+  if (!/^https?:\/\/.+/i.test(clean)) {
+    return { ok: false, msg: '地址需以 http:// 或 https:// 开头' }
+  }
+  writeCfg({ serverBase: clean })
+  if (settingsWin && !settingsWin.isDestroyed()) settingsWin.close()
+  // 重载后 preload 会重新读取配置，前端以新地址发起请求
+  if (mainWin && !mainWin.isDestroyed()) mainWin.reload()
+  return { ok: true }
+})
+
+// ---------------------------------------------------------------------
+// 版本检查：拉取后端 /api/version/latest 与本地 app.getVersion() 比较
+// 后端返回 { version, download_url, release_notes, force }
+// ---------------------------------------------------------------------
+
+// 语义化版本比较：返回 -1/0/1（a<b / a==b / a>b），非法版本视为 0.0.0
+function compareVer(a, b) {
+  const pa = String(a || '0').split('.').map((n) => parseInt(n, 10) || 0)
+  const pb = String(b || '0').split('.').map((n) => parseInt(n, 10) || 0)
+  const len = Math.max(pa.length, pb.length)
+  for (let i = 0; i < len; i++) {
+    const va = pa[i] || 0
+    const vb = pb[i] || 0
+    if (va > vb) return 1
+    if (va < vb) return -1
+  }
+  return 0
+}
+
+// 拉取一次最新版本信息（用 Electron 内置 net，自动走系统代理）
+function fetchLatestVersion() {
+  return new Promise((resolve) => {
+    const base = readCfg().serverBase.replace(/\/+$/, '')
+    if (!base) return resolve({ ok: false, msg: '未配置服务器地址' })
+    const req = net.request({
+      method: 'GET',
+      url: base + '/api/version/latest',
+      redirect: 'follow',
+    })
+    let body = ''
+    req.on('response', (resp) => {
+      // 3xx 已由 redirect:'follow' 处理；这里只关心 2xx 最终响应
+      resp.on('data', (chunk) => (body += chunk.toString('utf8')))
+      resp.on('end', () => {
+        try {
+          const parsed = JSON.parse(body)
+          // 后端统一返回 { code, msg, data }，code=0 表示成功
+          const data = parsed && parsed.data ? parsed.data : parsed
+          resolve({ ok: true, data })
+        } catch {
+          resolve({ ok: false, msg: '解析版本信息失败' })
+        }
+      })
+    })
+    req.on('error', (err) => resolve({ ok: false, msg: '网络错误：' + err.message }))
+    // 超时兜底（10s）
+    setTimeout(() => {
+      try { req.abort() } catch {}
+      resolve({ ok: false, msg: '请求超时' })
+    }, 10000)
+    req.end()
+  })
+}
+
+// 弹出更新对话框（silent=true 表示自动检查，已是最新版不弹窗）
+async function checkUpdate(silent = false) {
+  const local = app.getVersion()
+  const r = await fetchLatestVersion()
+  if (!r.ok) {
+    if (!silent) dialog.showErrorBox('检查更新失败', r.msg || '无法连接服务器')
+    return
+  }
+  const { version, download_url: url, release_notes: notes, force } = r.data || {}
+  if (compareVer(version, local) <= 0) {
+    if (!silent) {
+      dialog.showMessageBox(mainWin, {
+        type: 'info',
+        title: '已是最新版本',
+        message: '当前已是最新版本',
+        detail: `版本 ${local}`,
+      })
+    }
+    return
+  }
+  const buttons = url ? ['立即下载', force ? '确定' : '稍后提醒'] : [force ? '确定' : '稍后提醒']
+  const { response } = await dialog.showMessageBox(mainWin, {
+    type: force ? 'warning' : 'info',
+    title: '发现新版本',
+    message: `发现新版本 ${version}`,
+    detail: notes || '请下载最新版本安装包覆盖安装。',
+    buttons,
+    defaultId: 0,
+    cancelId: buttons.length - 1,
+    noLink: true,
+  })
+  // 点了「立即下载」（按钮 0 且存在下载链接）；相对路径拼服务器基址
+  if (response === 0 && url) {
+    const abs = /^https?:\/\//i.test(url)
+      ? url
+      : readCfg().serverBase.replace(/\/+$/, '') + (url.startsWith('/') ? url : '/' + url)
+    shell.openExternal(abs)
+  }
+}
+
+// IPC：渲染进程可触发检查更新（预留菜单按钮 / 页面入口）
+ipcMain.handle('nlg:check-update', (_e, silent) => checkUpdate(silent))
+
+// ---------------------------------------------------------------------
+// 服务器设置窗口（极简内嵌页面，深色风格与主站一致）
+// ---------------------------------------------------------------------
+function openSettings() {
+  if (settingsWin && !settingsWin.isDestroyed()) {
+    settingsWin.focus()
+    return
+  }
+  settingsWin = new BrowserWindow({
+    width: 460,
+    height: 240,
+    parent: mainWin || undefined,
+    modal: !!mainWin,
+    resizable: false,
+    minimizable: false,
+    maximizable: false,
+    autoHideMenuBar: true,
+    backgroundColor: '#12142a',
+    title: '服务器设置',
+    webPreferences: { preload: path.join(__dirname, 'preload.cjs') },
+  })
+  const cur = readCfg().serverBase
+  const html = `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>服务器设置</title>
+<style>
+  body{margin:0;background:#12142a;color:#e8e9f5;font:14px/1.6 "Microsoft YaHei",sans-serif;padding:22px 26px}
+  h3{margin:0 0 4px;font-size:15px}
+  p{margin:0 0 12px;font-size:12px;color:#8d90b3}
+  input{width:100%;box-sizing:border-box;background:#1c1f3d;border:1px solid #34386b;color:#e8e9f5;
+    border-radius:8px;padding:9px 12px;font-size:13px;outline:none}
+  input:focus{border-color:#6d6ff0}
+  .row{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
+  button{border:0;border-radius:8px;padding:8px 22px;font-size:13px;cursor:pointer}
+  .ok{background:linear-gradient(135deg,#6d6ff0,#9b6df0);color:#fff}
+  .cancel{background:#262a52;color:#c6c8e8}
+  .err{color:#ff7b8a;font-size:12px;margin-top:8px;min-height:16px}
+</style></head><body>
+  <h3>后端服务器地址</h3>
+  <p>桌面端连接的游戏服务器（修改后自动重新加载）</p>
+  <input id="url" value="${cur.replace(/"/g, '&quot;')}" placeholder="https://game.nailaoyun.cn" />
+  <div class="err" id="err"></div>
+  <div class="row">
+    <button class="cancel" onclick="window.close()">取消</button>
+    <button class="ok" id="save">保存</button>
+  </div>
+  <script>
+    document.getElementById('save').onclick = async () => {
+      const r = await window.desktop.setServerBase(document.getElementById('url').value)
+      if (!r.ok) document.getElementById('err').textContent = r.msg
+    }
+    document.getElementById('url').addEventListener('keyup', (e) => {
+      if (e.key === 'Enter') document.getElementById('save').click()
+    })
+  </script>
+</body></html>`
+  settingsWin.loadURL('data:text/html;charset=utf-8,' + encodeURIComponent(html))
+  settingsWin.on('closed', () => { settingsWin = null })
+}
+
+// ---------------------------------------------------------------------
+// 系统托盘：关闭窗口隐藏到托盘，右键可显示/检查更新/退出
+// ---------------------------------------------------------------------
+function showMainWindow() {
+  if (!mainWin || mainWin.isDestroyed()) {
+    createWindow()
+    return
+  }
+  if (mainWin.isMinimized()) mainWin.restore()
+  mainWin.show()
+  mainWin.focus()
+}
+
+function createTray() {
+  if (tray) return
+  const iconFile = appIconPath()
+  let img = fs.existsSync(iconFile)
+    ? nativeImage.createFromPath(iconFile)
+    : nativeImage.createEmpty()
+  // Windows 托盘建议 16×16；过大图标会被系统缩放发糊，主动缩一下
+  if (!img.isEmpty() && (img.getSize().width > 32 || img.getSize().height > 32)) {
+    img = img.resize({ width: 16, height: 16 })
+  }
+  tray = new Tray(img)
+  tray.setToolTip('像素游戏厅')
+  tray.setContextMenu(Menu.buildFromTemplate([
+    { label: '显示主窗口', click: () => showMainWindow() },
+    { label: '检查更新…', click: () => checkUpdate(false) },
+    { type: 'separator' },
+    {
+      label: '退出',
+      click: () => {
+        isQuitting = true
+        app.quit()
+      },
+    },
+  ]))
+  // 单击 / 双击托盘图标都拉起主窗口（Windows 习惯）
+  tray.on('click', () => showMainWindow())
+  tray.on('double-click', () => showMainWindow())
+}
+
+// ---------------------------------------------------------------------
+// 应用菜单
+// ---------------------------------------------------------------------
+function buildMenu() {
+  const template = [
+    {
+      label: '应用',
+      submenu: [
+        { label: '服务器设置…', accelerator: 'CmdOrCtrl+,', click: openSettings },
+        { label: '检查更新…', click: () => checkUpdate(false) },
+        { type: 'separator' },
+        { label: '刷新', role: 'reload' },
+        { label: '强制刷新（忽略缓存）', role: 'forceReload' },
+        { label: '开发者工具', role: 'toggleDevTools' },
+        { type: 'separator' },
+        {
+          label: '退出',
+          accelerator: 'CmdOrCtrl+Q',
+          click: () => {
+            isQuitting = true
+            app.quit()
+          },
+        },
+      ],
+    },
+    {
+      label: '编辑',
+      submenu: [
+        { label: '撤销', role: 'undo' },
+        { label: '重做', role: 'redo' },
+        { type: 'separator' },
+        { label: '剪切', role: 'cut' },
+        { label: '复制', role: 'copy' },
+        { label: '粘贴', role: 'paste' },
+        { label: '全选', role: 'selectAll' },
+      ],
+    },
+    {
+      label: '视图',
+      submenu: [
+        { label: '放大', role: 'zoomIn' },
+        { label: '缩小', role: 'zoomOut' },
+        { label: '实际大小', role: 'resetZoom' },
+        { type: 'separator' },
+        { label: '全屏', role: 'togglefullscreen' },
+      ],
+    },
+    {
+      label: '帮助',
+      submenu: [
+        {
+          label: '关于',
+          click: () => {
+            dialog.showMessageBox(mainWin, {
+              type: 'info',
+              title: '关于',
+              message: '像素游戏厅 桌面版',
+              detail: `版本 ${app.getVersion()}\nElectron ${process.versions.electron} / Chromium ${process.versions.chrome}\n服务器：${readCfg().serverBase}`,
+            })
+          },
+        },
+      ],
+    },
+  ]
+  Menu.setApplicationMenu(Menu.buildFromTemplate(template))
+}
+
+// ---------------------------------------------------------------------
+// 主窗口
+// ---------------------------------------------------------------------
+function createWindow() {
+  // 窗口图标：打包后 exe 自带图标，这里主要供开发模式（electron .）使用
+  const iconPath = appIconPath()
+  // 恢复上次的窗口大小与位置（若显示器变化导致越界，Electron 会自动拉回可见区域）
+  const cfg = readCfg()
+  const saved = cfg.winBounds || {}
+  mainWin = new BrowserWindow({
+    width: saved.width || 1280,
+    height: saved.height || 820,
+    ...(Number.isFinite(saved.x) && Number.isFinite(saved.y) ? { x: saved.x, y: saved.y } : {}),
+    minWidth: 960,
+    minHeight: 640,
+    show: false,
+    backgroundColor: '#0f1220',
+    title: '像素游戏厅',
+    ...(fs.existsSync(iconPath) ? { icon: iconPath } : {}),
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.cjs'),
+      contextIsolation: true,
+      nodeIntegration: false,
+      spellcheck: false,
+    },
+  })
+  mainWin.once('ready-to-show', () => {
+    if (cfg.winMax) mainWin.maximize()
+    mainWin.show()
+    // 启动后 3 秒静默检查一次更新（已是最新版不弹窗，发现新版本才提示）
+    setTimeout(() => { checkUpdate(true).catch(() => {}) }, 3000)
+  })
+  // 点关闭：记住窗口状态并隐藏到托盘（冒烟模式 / 真正退出时直接关）
+  mainWin.on('close', (e) => {
+    try {
+      writeCfg({ winBounds: mainWin.getNormalBounds(), winMax: mainWin.isMaximized() })
+    } catch {}
+    if (!isQuitting && !SMOKE && tray) {
+      e.preventDefault()
+      mainWin.hide()
+    }
+  })
+  // 页面内打开新窗口（target=_blank 等）→ 交给系统浏览器
+  mainWin.webContents.setWindowOpenHandler(({ url }) => {
+    if (/^https?:\/\//i.test(url)) shell.openExternal(url)
+    return { action: 'deny' }
+  })
+  // 阻止主窗口导航离开应用（外部 http 链接转系统浏览器）
+  mainWin.webContents.on('will-navigate', (e, url) => {
+    const inApp = url.startsWith(DEV_URL) || url.startsWith('file://')
+    if (!inApp) {
+      e.preventDefault()
+      if (/^https?:\/\//i.test(url)) shell.openExternal(url)
+    }
+  })
+
+  const distIndex = path.join(__dirname, '../dist/index.html')
+  const loadDist = () => {
+    if (!fs.existsSync(distIndex)) {
+      dialog.showErrorBox('缺少构建产物', '未找到 dist/index.html，请先执行 npm run electron:dist')
+      app.quit()
+      return
+    }
+    mainWin.loadFile(distIndex)
+  }
+  if (!app.isPackaged && !FORCE_DIST) {
+    // 开发模式：优先 Vite 开发服务器，连不上回退 dist
+    mainWin.loadURL(DEV_URL)
+    mainWin.webContents.once('did-fail-load', (_e, _code, _desc, _url, isMainFrame) => {
+      if (isMainFrame) loadDist()
+    })
+  } else {
+    loadDist()
+  }
+
+  // 冒烟自检：渲染完成后截图退出，供自动化验证
+  if (SMOKE) {
+    let done = false
+    mainWin.webContents.on('did-finish-load', () => {
+      setTimeout(async () => {
+        if (done) return
+        done = true
+        try {
+          const img = await mainWin.webContents.capturePage()
+          const out = process.env.NLG_SHOT_PATH || path.join(process.cwd(), 'electron-smoke.png')
+          fs.writeFileSync(out, img.toPNG())
+          console.log('[smoke] screenshot saved:', out)
+          app.exit(0)
+        } catch (err) {
+          console.error('[smoke] capture failed:', err)
+          app.exit(1)
+        }
+      }, 2200)
+    })
+    // 兜底：25 秒仍未完成视为失败
+    setTimeout(() => {
+      if (!done) {
+        console.error('[smoke] timeout')
+        app.exit(1)
+      }
+    }, 25000)
+  }
+
+  mainWin.on('closed', () => { mainWin = null })
+}
+
+// 单实例锁：二次启动聚焦已有窗口
+const gotLock = app.requestSingleInstanceLock()
+if (!gotLock) {
+  app.quit()
+} else {
+  app.on('second-instance', () => {
+    showMainWindow()
+  })
+  app.whenReady().then(() => {
+    // Windows 任务栏/托盘分组 ID，避免与其他 Electron 应用挤在一起
+    if (process.platform === 'win32') {
+      app.setAppUserModelId('cn.nailaoyun.pixelarcade')
+    }
+    buildMenu()
+    createTray()
+    createWindow()
+    app.on('activate', () => {
+      if (BrowserWindow.getAllWindows().length === 0) createWindow()
+      else showMainWindow()
+    })
+  })
+  // 有托盘时关窗不等于退出，不要在 window-all-closed 里 quit
+  app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin' && !tray) app.quit()
+  })
+  app.on('before-quit', () => { isQuitting = true })
+}
diff --git a/electron/preload.cjs b/electron/preload.cjs
new file mode 100644
index 0000000..a4a10ed
--- /dev/null
+++ b/electron/preload.cjs
@@ -0,0 +1,20 @@
+// Electron 预加载脚本：以 contextBridge 向渲染进程暴露最小桌面端 API
+// 前端凭 window.desktop 是否存在来区分「桌面端 / 浏览器」两种运行环境
+const { contextBridge, ipcRenderer } = require('electron')
+
+// 同步读取后端服务器地址：必须在页面脚本执行前就绪（axios/WS 初始化要用）
+const serverBase = ipcRenderer.sendSync('nlg:get-server-base')
+
+contextBridge.exposeInMainWorld('desktop', {
+  // 后端服务器地址（形如 http://127.0.0.1:8080，结尾不带斜杠）
+  serverBase,
+  // 修改服务器地址（校验通过后主进程会自动重载页面）
+  setServerBase: (url) => ipcRenderer.invoke('nlg:set-server-base', url),
+  // 检查桌面端新版本（silent=true 时已是最新版不弹窗，用于启动自动检查）
+  checkUpdate: (silent = false) => ipcRenderer.invoke('nlg:check-update', silent),
+  // 运行环境版本信息
+  versions: {
+    electron: process.versions.electron,
+    chrome: process.versions.chrome,
+  },
+})
diff --git a/index.html b/index.html
index 8388c4b..259507b 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,11 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- 站点图标：像素摇杆（与桌面端应用图标同源，Vite 构建时按 base 自动改写路径） -->
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>像素游戏厅</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..e2805e8
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,5170 @@
+{
+  "name": "nl-game",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "nl-game",
+      "version": "1.0.0",
+      "dependencies": {
+        "@fontsource/press-start-2p": "^5.3.0",
+        "@fontsource/vt323": "^5.3.0",
+        "axios": "^1.19.0",
+        "pinia": "^4.0.2",
+        "three": "^0.185.1",
+        "vue": "^3.5.41",
+        "vue-router": "^5.2.0"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^6.0.8",
+        "electron": "^43.4.0",
+        "electron-builder": "^26.15.3",
+        "vite": "^8.2.1"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-8.0.0.tgz",
+      "integrity": "sha512-NT9NrVwJsbSV6Y2FSstWa71EETOnzrjkL5/wX3D2mYHtKM+qvqB1DvR4D0Setb/gDBsHzRICifwEWMO8CnTF6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^8.0.0",
+        "@babel/types": "^8.0.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "@types/jsesc": "^2.5.0",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": "^22.18.0 || >=24.11.0"
+      }
+    },
+    "node_modules/@babel/generator/node_modules/@babel/helper-string-parser": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-8.0.0.tgz",
+      "integrity": "sha512-6mJgmFFFIIO82vvoLt9XtRC7/TkzXfts1t/SpRX4IHSzMgqoPYCWesVu1udUPUWioAE/2fcG6WuI8zrkE1gwrg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^22.18.0 || >=24.11.0"
+      }
+    },
+    "node_modules/@babel/generator/node_modules/@babel/helper-validator-identifier": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-8.0.4.tgz",
+      "integrity": "sha512-4wFaiLd0bVo4cIoTXI3zKI038NIWE/cr3jvBjejOVYVxV/m8Ltav1USiGzG1fmS5J2RhgEOgXNNK46cRPnRsrg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^22.18.0 || >=24.11.0"
+      }
+    },
+    "node_modules/@babel/generator/node_modules/@babel/parser": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-8.0.4.tgz",
+      "integrity": "sha512-srpptsAkEbbNIC/q8nT7o+m6CQe8CJUTV/t7MYc9NnWlgYVtHOb7JH6SorxMhN0kuRJjVqXbKClG6xSbPtzz+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^8.0.4"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": "^22.18.0 || >=24.11.0"
+      }
+    },
+    "node_modules/@babel/generator/node_modules/@babel/types": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-8.0.4.tgz",
+      "integrity": "sha512-eY+Yn3dCqTGmyiq2QRU66lA5FL8lqqqvecHt0fF3uHONIa7ToYsaCiWV8lOKqAs0Rb2SjixiKFROngnulPtt2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^8.0.0",
+        "@babel/helper-validator-identifier": "^8.0.4"
+      },
+      "engines": {
+        "node": "^22.18.0 || >=24.11.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
+      "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@electron-internal/extract-zip": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@electron-internal/extract-zip/-/extract-zip-1.0.5.tgz",
+      "integrity": "sha512-+bqFCP98pLI0Tt0XQo1TmlXtwjWchISndDOxCkEcIuUgXWpBnLyRI+2DU+mesvnMMX6L1XDqYNA0lXNDHd/yiA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/@electron/asar": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.4.1.tgz",
+      "integrity": "sha512-i4/rNPRS84t0vSRa2HorerGRXWyF4vThfHesw0dmcWHp+cspK743UanA0suA5Q5y8kzY2y6YKrvbIUn69BCAiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^5.0.0",
+        "glob": "^7.1.6",
+        "minimatch": "^3.0.4"
+      },
+      "bin": {
+        "asar": "bin/asar.js"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/@electron/asar/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@electron/asar/node_modules/brace-expansion": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz",
+      "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@electron/asar/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@electron/fuses": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@electron/fuses/-/fuses-1.8.0.tgz",
+      "integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.1",
+        "fs-extra": "^9.0.1",
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "electron-fuses": "dist/bin.js"
+      }
+    },
+    "node_modules/@electron/fuses/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@electron/get": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@electron/get/-/get-5.1.0.tgz",
+      "integrity": "sha512-3kSBtG8ObcTVfXanm5vVJ6UnBLEVmVsRk1M+vGqCuMBV+XLCbJYuWQful+yIy0GQDsSlK0kHEriEHn7SPk4EnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "env-paths": "^3.0.0",
+        "graceful-fs": "^4.2.11",
+        "progress": "^2.0.3",
+        "semver": "^7.6.3",
+        "sumchecker": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      },
+      "optionalDependencies": {
+        "undici": "^7.24.4"
+      }
+    },
+    "node_modules/@electron/notarize": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@electron/notarize/-/notarize-2.5.0.tgz",
+      "integrity": "sha512-jNT8nwH1f9X5GEITXaQ8IF/KdskvIkOFfB2CvwumsveVidzpSc+mvhhTMdAGSYF3O+Nq49lJ7y+ssODRXu06+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "fs-extra": "^9.0.1",
+        "promise-retry": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@electron/notarize/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@electron/osx-sign": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@electron/osx-sign/-/osx-sign-1.3.3.tgz",
+      "integrity": "sha512-KZ8mhXvWv2rIEgMbWZ4y33bDHyUKMXnx4M0sTyPNK/vcB81ImdeY9Ggdqy0SWbMDgmbqyQ+phgejh6V3R2QuSg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "compare-version": "^0.1.2",
+        "debug": "^4.3.4",
+        "fs-extra": "^10.0.0",
+        "isbinaryfile": "^4.0.8",
+        "minimist": "^1.2.6",
+        "plist": "^3.0.5"
+      },
+      "bin": {
+        "electron-osx-flat": "bin/electron-osx-flat.js",
+        "electron-osx-sign": "bin/electron-osx-sign.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@electron/osx-sign/node_modules/isbinaryfile": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz",
+      "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/gjtorikian/"
+      }
+    },
+    "node_modules/@electron/rebuild": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@electron/rebuild/-/rebuild-4.2.0.tgz",
+      "integrity": "sha512-RKL/O+jGoXJMxrx/5771y1n0xTKmFuOYGO3gMmwypBM6rsH0kou0mswwdXA2JrhIkE4xyC7v9vGk0n6NPzgOxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@malept/cross-spawn-promise": "^2.0.0",
+        "debug": "^4.1.1",
+        "node-abi": "^4.2.0",
+        "node-api-version": "^0.2.1",
+        "node-gyp": "^12.2.0",
+        "read-binary-file-arch": "^1.0.6"
+      },
+      "bin": {
+        "electron-rebuild": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/@electron/universal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@electron/universal/-/universal-2.0.3.tgz",
+      "integrity": "sha512-Wn9sPYIVFRFl5HmwMJkARCCf7rqK/EurkfQ/rJZ14mHP3iYTjZSIOSVonEAnhWeAXwtw7zOekGRlc6yTtZ0t+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@electron/asar": "^3.3.1",
+        "@malept/cross-spawn-promise": "^2.0.0",
+        "debug": "^4.3.1",
+        "dir-compare": "^4.2.0",
+        "fs-extra": "^11.1.1",
+        "minimatch": "^9.0.3",
+        "plist": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16.4"
+      }
+    },
+    "node_modules/@electron/universal/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@electron/universal/node_modules/brace-expansion": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
+      "integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@electron/universal/node_modules/fs-extra": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.4.0.tgz",
+      "integrity": "sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@electron/universal/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@electron/windows-sign": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@electron/windows-sign/-/windows-sign-1.2.2.tgz",
+      "integrity": "sha512-dfZeox66AvdPtb2lD8OsIIQh12Tp0GNCRUDfBHIKGpbmopZto2/A8nSpYYLoedPIHpqkeblZ/k8OV0Gy7PYuyQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "cross-dirname": "^0.1.0",
+        "debug": "^4.3.4",
+        "fs-extra": "^11.1.1",
+        "minimist": "^1.2.8",
+        "postject": "^1.0.0-alpha.6"
+      },
+      "bin": {
+        "electron-windows-sign": "bin/electron-windows-sign.js"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@electron/windows-sign/node_modules/fs-extra": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.4.0.tgz",
+      "integrity": "sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@fontsource/press-start-2p": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/press-start-2p/-/press-start-2p-5.3.0.tgz",
+      "integrity": "sha512-gxWFxdeDglPhEYSwEeooomcaFK8kSQYLQwVxfnOJeYRj2sPEHXjpVtFgEaYfqzOjuAJGrIcJOipu2KY5YkbyuQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/vt323": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/vt323/-/vt323-5.3.0.tgz",
+      "integrity": "sha512-3w33Rg/0+R1587HQfz4t7Q7e0GGeCqr3wmzIwqdGInUnrGEwMA5eX39GP4Z9wpTQnwfhVOhYuxuRwRUeIcicbw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@malept/cross-spawn-promise": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@malept/cross-spawn-promise/-/cross-spawn-promise-2.0.0.tgz",
+      "integrity": "sha512-1DpKU0Z5ThltBwjNySMC14g0CkbyhCaz9FkhxqNsZI6uAPJXFS8cMXlBKo26FJ8ZuW6S9GCMcR9IO5k2X5/9Fg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/malept"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/subscription/pkg/npm-.malept-cross-spawn-promise?utm_medium=referral&utm_source=npm_fund"
+        }
+      ],
+      "license": "Apache-2.0",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/@malept/flatpak-bundler": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@malept/flatpak-bundler/-/flatpak-bundler-0.4.0.tgz",
+      "integrity": "sha512-9QOtNffcOF/c1seMCDnjckb3R9WHcG34tky+FHpNKKCW0wc/scYLwMtO+ptyGUfMW0/b/n4qRiALlaFHc9Oj7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "fs-extra": "^9.0.0",
+        "lodash": "^4.17.15",
+        "tmp-promise": "^3.0.2"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@malept/flatpak-bundler/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@noble/hashes": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-2.3.0.tgz",
+      "integrity": "sha512-oN+QwyX7VSHotibwubG3kpzbwKrfnyR6OOO+3Nk/53ADL7FmgHHz4TgrbaYKvvOw09u6QTx0oiH1cNCIOuN0CQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.143.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.143.0.tgz",
+      "integrity": "sha512-u6JZdLBTLotrNC9Vd6vPssINdzcCzleKAH6EJKImQb7GtYvX5keN2dxkoK44stCc4tffE6QQRtZTXVSzsLUlWA==",
+      "devOptional": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@peculiar/asn1-schema": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.8.0.tgz",
+      "integrity": "sha512-7YT0U/ze0tF2QOBbE15gKZwy5tvgGyLRiRHLzhlbOpf7BT032oBSd0haZqXn5W6l26WLlu3dyxzjM+2638/z2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/utils": "^2.0.2",
+        "asn1js": "^3.0.10",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/json-schema": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@peculiar/json-schema/-/json-schema-1.1.12.tgz",
+      "integrity": "sha512-coUfuoMeIB7B8/NMekxaDzLhaYmp0HZNPEjYRm9goRou8UZIC3z21s0sL9AWoCw4EG876QyO3kYrc61WNF9B/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@peculiar/utils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@peculiar/utils/-/utils-2.0.3.tgz",
+      "integrity": "sha512-+oL3HPFRIZ1St2K50lWCXiioIgSoxzz7R1J3uF6neO2yl1sgmpgY6XXJH4BdpoDkMWznQTeYF6oWNDZLCdQ4eQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/webcrypto": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@peculiar/webcrypto/-/webcrypto-1.7.1.tgz",
+      "integrity": "sha512-ODOov0sGMJMf3jPonOkgGqPknTsu+DdQ7kD++gz8aI+aFMOMHFbWAA2taqXXVTdP+OTOQR/znGvSpmkeI0WTYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/json-schema": "^1.1.12",
+        "@peculiar/utils": "^2.0.2",
+        "tslib": "^2.8.1",
+        "webcrypto-core": "^1.9.2"
+      },
+      "engines": {
+        "node": ">=14.18.0"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.3.tgz",
+      "integrity": "sha512-zrJtHDcaZJ1Fp7xf4hNl+7seH9Cn/N5TwLYkhgXREtBwAd/jaqW3uqeHxpDugJLVICWg4eW44kOQEGJ1r6jCGw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.3.tgz",
+      "integrity": "sha512-ieIiibVCp0tX7TLu2cafoNPv8wJyYi01ekXpbf8q2j7F4rGAhhXb/eQh7ge9DRBY78GwmRQtvjZDux7EDbA8kA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.3.tgz",
+      "integrity": "sha512-Zh9tCon19eDXJoihx0rqKhMUlMYqzwj3aPsSuHmI4RWZh62dWUL+DJN4C5YQya5TcQBJU/Fe8+rY0jhXTQITqA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.3.tgz",
+      "integrity": "sha512-nGbJWewA1wrXXZiQhjAT5rhibGfns5ZNkDVqxsO6zJ3f3YvpoDNNmGMSbbhLuXKjNScaBJVOAboztAWVespQMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.3.tgz",
+      "integrity": "sha512-QNniJr5Kml0kDEB98jiDOJjXNroxIIi0IXIbdYzY26Xt1pVbeP62+KnoIZLwirOymX/0jDk/2gI/bNUv7A7OIw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.3.tgz",
+      "integrity": "sha512-TkqEAcmmvH3I/q4114NB4RVt6241Dao48pF45uLcFGrwAaIn0iITgTAKP/dLjbN0R4buJjGb91+UHSoFmpgIWw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.3.tgz",
+      "integrity": "sha512-NHqjnxpsndf4MPymxteFAWHHfkTL8HjWh1KB7z23ofZ6QO2euONuxDXjat69dKZRALnGypg8k8SsK8vZJoXv1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.3.tgz",
+      "integrity": "sha512-6tbrbwfz5GB9DQ4Jwo6hy9v+vR31xZlvzZ6n5Xut6Hhx5PvrA9q/HsK8KMaYQp063iqZGXwNvZtYNLD7EM/x0w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.3.tgz",
+      "integrity": "sha512-oyuXxXmoZHjXC917IAPFAAv4wWAa0cM9afk8nx1+9/jNNOX1uPf8yDA6p7G0RypOfw/X0PQt5IfoquY1um+zSg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.3.tgz",
+      "integrity": "sha512-TytMwF2KVGqP2tgd0I1OY0PAv78dZRAYcF5ssDzjM34SUXCED3uXvSd5+lHoC0bTD6eEdFz7LdQNCO1y0oVk9w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.3.tgz",
+      "integrity": "sha512-/E9m3qstrJFVPoULV25mVQblSNExY2+kBsYe4sy0Tn0yOOgJ8wZbZt3KnRbF/XeU2Gl1STKUQnDNTqhIE5MD4A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.3.tgz",
+      "integrity": "sha512-Kr0OcsoQI816i6HOl3vFHpd1K0eZyh76zgfj4c1nTyaTsd5r2Mj1lwM4R90y/qaCfmTn9eHy0SKwi98eitRxug==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.3.tgz",
+      "integrity": "sha512-hOtMwTqnME+/gJcH/PCZ0wn0zPUjiWOgkHpxbSJpfGKMezHltx1S7/k1SitzVa7Ww2cqrDDaFbZEhcJZO8o+Jw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.3.tgz",
+      "integrity": "sha512-ekcqMMkI2PlhYnfzQnB/cEdYUVVJViWvoUyLrbzgDoi3Snfc1mVBwdnc306ufA5ejy8JSPjT2RlW1nQSjW7efg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@sindresorhus/is": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+      "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/is?sponsor=1"
+      }
+    },
+    "node_modules/@szmarczak/http-timer": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
+      "integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "defer-to-connect": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@types/cacheable-request": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
+      "integrity": "sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-cache-semantics": "*",
+        "@types/keyv": "^3.1.4",
+        "@types/node": "*",
+        "@types/responselike": "^1.0.0"
+      }
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
+      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/fs-extra": {
+      "version": "9.0.13",
+      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz",
+      "integrity": "sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/http-cache-semantics": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
+      "integrity": "sha512-L3LgimLHXtGkWikKnsPg0/VFx9OGZaC+eN1u4r+OB1XRqH3meBIAVC2zr1WdMH+RHmnRkqliQAOHNJ/E0j/e0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/jsesc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@types/jsesc/-/jsesc-2.5.1.tgz",
+      "integrity": "sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/keyv": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
+      "integrity": "sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "24.13.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.3.tgz",
+      "integrity": "sha512-Dh8vAsV36ig5wa9OX4pXvMc9D3Veibfw2wix0CUwYODLD8nkj9UsLjASr49nPg+2eKzxhBV+v7L8pXvT4e639Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
+    "node_modules/@types/responselike": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz",
+      "integrity": "sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz",
+      "integrity": "sha512-0ZjgOg7oO6farnNGup7yvoM/YXZV84OZxHAwtflItNa/6zzQyVb5LNxyea3FEKEX2XlagIKzrlH7wwxkKgtiew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vue-macros/common": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.4.tgz",
+      "integrity": "sha512-/5Fv+6DgIcM9ajY05ZmKBv+LMX1M9A0X+IUwDRVdt67ciw8OV9bvG2r34p3RiEadlsQybjhKPRKNXDC8Bp23cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.5.22",
+        "ast-kit": "^2.1.2",
+        "local-pkg": "^1.1.2",
+        "magic-string-ast": "^1.0.2",
+        "unplugin-utils": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/vue-macros"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.2.25"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.41.tgz",
+      "integrity": "sha512-q0Xtv/F9w2YO/7htQhtiL+Ev2WCJbe5N2hc+XfgyKkEKqWpSxknmT8QOuGdEKNdjPq0c3F7rNpFkTo3Kfrm7pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@vue/shared": "3.5.41",
+        "entities": "^7.0.1",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.41.tgz",
+      "integrity": "sha512-oKacVfNglLvGjnS6BXOlGL7EyG2h8X03pqXCjzotRZUaXGjbrTJUnVAQjrCqUnS+lyu31nwQjZY/d817GmCnfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.41",
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.41.tgz",
+      "integrity": "sha512-XJhip7R2wy6vX3knCxdZN4KracFaZUef58s1KYewqluedHIJaPIVfXoYT7MF1F8nCvv6k8bWWxDC8opMkg1VTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@vue/compiler-core": "3.5.41",
+        "@vue/compiler-dom": "3.5.41",
+        "@vue/compiler-ssr": "3.5.41",
+        "@vue/shared": "3.5.41",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.19",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.41.tgz",
+      "integrity": "sha512-U3v5OejKEGqOI0Wy0+Sz7hGuIFZHA4LSXzrNM3IMIeDyJEBBfTpX26n3SDgToRpP2bLc9FfI2j/kSgcJ8Emq5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.41",
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-8.2.1.tgz",
+      "integrity": "sha512-6u4vXBlIBAC1wMplIZgpyPn7uh/s4Bf6F5bMzvLv+EdJ0aHs/+4B7Ygv864EStQSjRbsRzTko/kUG1A1IejQ3A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^8.2.1"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.2.1.tgz",
+      "integrity": "sha512-FIGIuq3AWReEpbAHY/cRGeHDfI0qOb8OCQ3YjbEAX04uaxIDbGc9rhkbVcG7rnfHPXE3RsU5KrWOu9V/okd8AQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^8.2.1",
+        "birpc": "^2.6.1",
+        "hookable": "^5.5.3",
+        "perfect-debounce": "^2.0.0"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.2.1.tgz",
+      "integrity": "sha512-Fkac7lUdGReh6pVOi3AYPRGe82LQqRmAfThW7RRligOAP0ZA/Z1z9XLHDM9dv34pV2HRc79DK8uKPeG2fLnA/g==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.41.tgz",
+      "integrity": "sha512-rznsqKM0np0x18EjzF8x88MpEhdNsffbvFbckLL5+oUKz1BxAImEmO7J1ArRYSyo6aQaVoBDp7jEkT91OOxydA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.41.tgz",
+      "integrity": "sha512-Vcry58hiAKwGen9Z1jUZE0feFsNArPCMOImYI8el48A9Idf6DuQYD0U05zZIF2Iad1hGhPSvcbBbAOhNr55fhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.41",
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.41.tgz",
+      "integrity": "sha512-3vVBahVBS9+U6cmXBLyb8nE6/yYo4J/CGI9eVFs3KiMc0YHuudwKyShTD65jtJy/L9PUUxNAFu4cj4LiJ0UFbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.41",
+        "@vue/runtime-core": "3.5.41",
+        "@vue/shared": "3.5.41",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.41.tgz",
+      "integrity": "sha512-n6hx/pNFfbD6SuyeuMVkvqox8bwf/ET9JlA/kAz/imw8sw++wkqKe2mHX5KutjPpbKE4Z56yTHszoOjGMI9igQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.41",
+        "@vue/runtime-dom": "3.5.41",
+        "@vue/shared": "3.5.41"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.41.tgz",
+      "integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==",
+      "license": "MIT"
+    },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.13",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.13.tgz",
+      "integrity": "sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/abbrev": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-4.0.0.tgz",
+      "integrity": "sha512-a1wflyaL0tHtJSmLSOVybYhy22vRih4eduhhrkcjgrWGnRfrZtovJ2FRjxuTtkkj47O/baf0R86QU5OuYpz8fA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz",
+      "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
+      "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/app-builder-lib": {
+      "version": "26.15.3",
+      "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-26.15.3.tgz",
+      "integrity": "sha512-2VnyWkqsP5v5XbBhL3tD5Syx8iNPBYsoU7kY4S2fz7wg8Rj/nztWKCUzGKaFRTv0Xwf3/H058CR1Kvtd/3lRow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@electron/asar": "3.4.1",
+        "@electron/fuses": "^1.8.0",
+        "@electron/get": "^3.0.0",
+        "@electron/notarize": "2.5.0",
+        "@electron/osx-sign": "1.3.3",
+        "@electron/rebuild": "^4.0.4",
+        "@electron/universal": "2.0.3",
+        "@malept/flatpak-bundler": "^0.4.0",
+        "@noble/hashes": "^2.2.0",
+        "@peculiar/webcrypto": "^1.7.1",
+        "@types/fs-extra": "9.0.13",
+        "ajv": "^8.18.0",
+        "asn1js": "^3.0.10",
+        "async-exit-hook": "^2.0.1",
+        "builder-util": "26.15.3",
+        "builder-util-runtime": "9.7.0",
+        "chromium-pickle-js": "^0.2.0",
+        "ci-info": "4.3.1",
+        "debug": "^4.3.4",
+        "dotenv": "^16.4.5",
+        "dotenv-expand": "^11.0.6",
+        "ejs": "^3.1.8",
+        "electron-publish": "26.15.3",
+        "fs-extra": "^10.1.0",
+        "hosted-git-info": "^4.1.0",
+        "isbinaryfile": "^5.0.0",
+        "jiti": "^2.4.2",
+        "js-yaml": "^4.1.0",
+        "json5": "^2.2.3",
+        "lazy-val": "^1.0.5",
+        "minimatch": "^10.2.5",
+        "pkijs": "^3.4.0",
+        "plist": "3.1.0",
+        "proper-lockfile": "^4.1.2",
+        "resedit": "^1.7.0",
+        "semver": "~7.7.3",
+        "tar": "^7.5.7",
+        "temp-file": "^3.4.0",
+        "tiny-async-pool": "1.3.0",
+        "unzipper": "^0.12.3",
+        "which": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "dmg-builder": "26.15.3",
+        "electron-builder-squirrel-windows": "26.15.3"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/@electron/get": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@electron/get/-/get-3.1.0.tgz",
+      "integrity": "sha512-F+nKc0xW+kVbBRhFzaMgPy3KwmuNTYX1fx6+FxxoSnNgwYX6LD7AKBTWkU0MQ6IBoe7dz069CNkR673sPAgkCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "env-paths": "^2.2.0",
+        "fs-extra": "^8.1.0",
+        "got": "^11.8.5",
+        "progress": "^2.0.3",
+        "semver": "^6.2.0",
+        "sumchecker": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "optionalDependencies": {
+        "global-agent": "^3.0.0"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/@electron/get/node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/@electron/get/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/ci-info": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
+      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "license": "MIT",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/asn1js": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.10.tgz",
+      "integrity": "sha512-S2s3aOytiKdFRdulw2qPE51MzjzVOisppcVv7jVFR+Kw0kxwvFrDcYA0h7Ndqbmj0HkMIXYWaoj7fli8kgx1eg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "pvtsutils": "^1.3.6",
+        "pvutils": "^1.1.5",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/ast-kit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-2.2.0.tgz",
+      "integrity": "sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "pathe": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/ast-walker-scope": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/ast-walker-scope/-/ast-walker-scope-0.9.0.tgz",
+      "integrity": "sha512-IJdzo2vLiElBxKzwS36VsCue/62d6IdWjnPB2v3nuPKeWGynp6FF/CYoLa5i/3jXH/z97ZDdsXz6abpgM6w07A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.2",
+        "@babel/types": "^7.29.0",
+        "ast-kit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-exit-hook": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/async-exit-hook/-/async-exit-hook-2.0.1.tgz",
+      "integrity": "sha512-NW2cX8m1Q7KPA7a5M2ULQeZ2wR5qI5PAbw5L0UOMxdioVk9PMZ0h1TmyZEkPYrCvYjDlFICusOu1dlEKAAeXBw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/aws4": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.2.tgz",
+      "integrity": "sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.19.0.tgz",
+      "integrity": "sha512-ht/iuYZXEjFxLH/Hkezgd7m6JKlHHXEUSneaDz8uZe1Gj5QZtCnpyDsckvAiEnT89OEbCLmnte4R4sn7P0EKFw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.6",
+        "https-proxy-agent": "^5.0.1",
+        "proxy-from-env": "^2.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/boolean": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
+      "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/builder-util": {
+      "version": "26.15.3",
+      "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-26.15.3.tgz",
+      "integrity": "sha512-q2hn7Mbo2nFNkVekPiHFx6Nfo3hURmES3tfBn+k5Pqxl2RkmP3QGqZUhH/q9Pch/4G05NRhPjDlVj1O8q4Txvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.1.6",
+        "builder-util-runtime": "9.7.0",
+        "chalk": "^4.1.2",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.4",
+        "fs-extra": "^10.1.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.0",
+        "js-yaml": "^4.1.0",
+        "sanitize-filename": "^1.6.3",
+        "source-map-support": "^0.5.19",
+        "stat-mode": "^1.0.0",
+        "temp-file": "^3.4.0",
+        "tiny-async-pool": "1.3.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/builder-util-runtime": {
+      "version": "9.7.0",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.7.0.tgz",
+      "integrity": "sha512-g/kR520giAFYkSXTzcmF3kqQq7wi8F6N6SzeDgZrqTBN+VHdmgWOyTdD1yD7AATDId/yXLvuP34CxW46/BwCdw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "sax": "^1.2.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/builder-util/node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/builder-util/node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/bytestreamjs": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/bytestreamjs/-/bytestreamjs-2.0.1.tgz",
+      "integrity": "sha512-U1Z/ob71V/bXfVABvNr/Kumf5VyeQRBEm6Txb0PQ6S7V5GpBM3w4Cbqz/xPDicR5tN0uvDifng8C+5qECeGwyQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/cacheable-lookup": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
+      "integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.6.0"
+      }
+    },
+    "node_modules/cacheable-request": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz",
+      "integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^4.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^6.0.1",
+        "responselike": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/chromium-pickle-js": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/chromium-pickle-js/-/chromium-pickle-js-0.2.0.tgz",
+      "integrity": "sha512-1R5Fho+jBq0DDydt+/vHWj5KJNJCKdARKOCwZUen84I5BreWoLqRLANH1U87eJy1tiASPtMnGqJJq0ZsLoRPOw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ci-info": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/clone-response": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/compare-version": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/compare-version/-/compare-version-0.1.2.tgz",
+      "integrity": "sha512-pJDh5/4wrEnXX/VWRZvruAGHkzKdr46z11OlTPN+VrATlWWhSKewNCJ1futCO5C7eJB3nPMFZA1LeYtcFboZ2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/confbox": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
+      "license": "MIT"
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-dirname": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/cross-dirname/-/cross-dirname-0.1.0.tgz",
+      "integrity": "sha512-+R08/oI0nl3vfPcqftZRpytksBXDzOUveBq/NBVx0sUp1axwzPQrKinNx5yd5sxPu8j1wIy8AfnVQ+5eFdha6Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cross-spawn/node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/cross-spawn/node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/decompress-response/node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/defer-to-connect": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
+      "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/dir-compare": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/dir-compare/-/dir-compare-4.2.0.tgz",
+      "integrity": "sha512-2xMCmOoMrdQIPHdsTawECdNPwlVFB9zGcz3kuhmBO6U3oU+UQjsue0i8ayLKpgBcm+hcXPMVSGUN9d+pvJ6+VQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimatch": "^3.0.5",
+        "p-limit": "^3.1.0 "
+      }
+    },
+    "node_modules/dir-compare/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/dir-compare/node_modules/brace-expansion": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz",
+      "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/dir-compare/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/dmg-builder": {
+      "version": "26.15.3",
+      "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-26.15.3.tgz",
+      "integrity": "sha512-O3zJUFUYHJKgzPqioHxfxzBzlSC1eXCSr79gMSBKBP5AgjjpmrydMsMLotEg9fAJF36vdUncb+4ndRNxoPdlSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "app-builder-lib": "26.15.3",
+        "builder-util": "26.15.3",
+        "fs-extra": "^10.1.0",
+        "js-yaml": "^4.1.0"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dotenv-expand": {
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-11.0.7.tgz",
+      "integrity": "sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dotenv": "^16.4.5"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "node_modules/ejs": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/electron": {
+      "version": "43.4.0",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-43.4.0.tgz",
+      "integrity": "sha512-3qxGF0CeQbiox5oWV1JlbWGQ1VerbmDhTFqW4sJ8h7uqTHniFYPObXJcDna0DMh32et0fFyKzz0YY8lJv3t5jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@electron-internal/extract-zip": "^1.0.1",
+        "@electron/get": "^5.0.0",
+        "@types/node": "^24.9.0"
+      },
+      "bin": {
+        "electron": "cli.js",
+        "install-electron": "install.js"
+      },
+      "engines": {
+        "node": ">= 22.12.0"
+      }
+    },
+    "node_modules/electron-builder": {
+      "version": "26.15.3",
+      "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-26.15.3.tgz",
+      "integrity": "sha512-a1KM5heqS3gQCZzizXEI8RjJy3QVogULPdeSknt76uLDpBIW/HDGsMg/XgP0riP6PI9COsRvFITKKGDqA8fJxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "app-builder-lib": "26.15.3",
+        "builder-util": "26.15.3",
+        "builder-util-runtime": "9.7.0",
+        "chalk": "^4.1.2",
+        "ci-info": "^4.2.0",
+        "dmg-builder": "26.15.3",
+        "fs-extra": "^10.1.0",
+        "lazy-val": "^1.0.5",
+        "simple-update-notifier": "2.0.0",
+        "yargs": "^17.6.2"
+      },
+      "bin": {
+        "electron-builder": "cli.js",
+        "install-app-deps": "install-app-deps.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/electron-builder-squirrel-windows": {
+      "version": "26.15.3",
+      "resolved": "https://registry.npmjs.org/electron-builder-squirrel-windows/-/electron-builder-squirrel-windows-26.15.3.tgz",
+      "integrity": "sha512-Jc19XPV9y9+2bAdZPkXuVNGNIEFBq9poHC61l8Kv6FdK7DRG3+Ic0rerC0DXOaeHNz8yW0fg/JnF8GQROOF5MA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "app-builder-lib": "26.15.3",
+        "builder-util": "26.15.3",
+        "electron-winstaller": "5.4.0"
+      }
+    },
+    "node_modules/electron-publish": {
+      "version": "26.15.3",
+      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-26.15.3.tgz",
+      "integrity": "sha512-g/2bn8YTavY4cuS5F+jOS7zmZbXXBV8KZ8yHKfJjFPoKtzBqrpCdNPxBd3tqdBwP7BVd0lGzf7Bk2s0KesWZ4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/fs-extra": "^9.0.11",
+        "aws4": "^1.13.2",
+        "builder-util": "26.15.3",
+        "builder-util-runtime": "9.7.0",
+        "chalk": "^4.1.2",
+        "form-data": "^4.0.5",
+        "fs-extra": "^10.1.0",
+        "lazy-val": "^1.0.5",
+        "mime": "^2.5.2"
+      }
+    },
+    "node_modules/electron-winstaller": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/electron-winstaller/-/electron-winstaller-5.4.0.tgz",
+      "integrity": "sha512-bO3y10YikuUwUuDUQRM4KfwNkKhnpVO7IPdbsrejwN9/AABJzzTQ4GeHwyzNSrVO+tEH3/Np255a3sVZpZDjvg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@electron/asar": "^3.2.1",
+        "debug": "^4.1.1",
+        "fs-extra": "^7.0.1",
+        "lodash": "^4.17.21",
+        "temp": "^0.9.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@electron/windows-sign": "^1.1.2"
+      }
+    },
+    "node_modules/electron-winstaller/node_modules/fs-extra": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/electron-winstaller/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/electron-winstaller/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-3.0.0.tgz",
+      "integrity": "sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/err-code": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
+      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es6-error": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/exponential-backoff": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.3.tgz",
+      "integrity": "sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/exsolve": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.1.1.tgz",
+      "integrity": "sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g==",
+      "license": "MIT"
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.5.tgz",
+      "integrity": "sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/filelist": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.6.tgz",
+      "integrity": "sha512-5giy2PkLYY1cP39p17Ech+2xlpTRL9HLspOfEgm0L6CwBXBTgsK5ou0JtzYuepxkaQ/tvhCFIJ5uXo0OrM2DxA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.4.tgz",
+      "integrity": "sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
+      "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz",
+      "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/global-agent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-agent/-/global-agent-3.0.0.tgz",
+      "integrity": "sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "boolean": "^3.0.1",
+        "es6-error": "^4.1.1",
+        "matcher": "^3.0.0",
+        "roarr": "^2.15.3",
+        "semver": "^7.3.2",
+        "serialize-error": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=10.0"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/got": {
+      "version": "11.8.6",
+      "resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz",
+      "integrity": "sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/is": "^4.0.0",
+        "@szmarczak/http-timer": "^4.0.5",
+        "@types/cacheable-request": "^6.0.1",
+        "@types/responselike": "^1.0.0",
+        "cacheable-lookup": "^5.0.3",
+        "cacheable-request": "^7.0.2",
+        "decompress-response": "^6.0.0",
+        "http2-wrapper": "^1.0.0-beta.5.2",
+        "lowercase-keys": "^2.0.0",
+        "p-cancelable": "^2.0.0",
+        "responselike": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/got?sponsor=1"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/hosted-git-info": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/http-cache-semantics": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
+      "integrity": "sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/http-proxy-agent/node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/http2-wrapper": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
+      "integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "quick-lru": "^5.1.1",
+        "resolve-alpn": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10.19.0"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isbinaryfile": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-5.0.7.tgz",
+      "integrity": "sha512-gnWD14Jh3FzS3CPhF0AxNOJ8CxqeblPTADzI38r0wt8ZyQl5edpy75myt08EG2oKvpyiqSqsx+Wkz9vtkbTqYQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/gjtorikian/"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.5.tgz",
+      "integrity": "sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jake": {
+      "version": "10.9.4",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
+      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "async": "^3.2.6",
+        "filelist": "^1.0.4",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/js-yaml": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.1.tgz",
+      "integrity": "sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.1.tgz",
+      "integrity": "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/lazy-val": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.5.tgz",
+      "integrity": "sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lightningcss": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
+      "devOptional": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/local-pkg": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.2.1.tgz",
+      "integrity": "sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lowercase-keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/magic-string-ast": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/magic-string-ast/-/magic-string-ast-1.0.3.tgz",
+      "integrity": "sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==",
+      "license": "MIT",
+      "dependencies": {
+        "magic-string": "^0.30.19"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/matcher": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
+      "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "escape-string-regexp": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "10.2.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.6.tgz",
+      "integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.8"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/mlly": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.3"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-abi": {
+      "version": "4.33.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-4.33.0.tgz",
+      "integrity": "sha512-vLBWCKb+7LWsX+TbfzWOkw0W81m377tyx3hOweBTjO43CXZnRGS1/JPWs20fr0PgZyDXk6ROYrylsEycK8raDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.6.3"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/node-api-version": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/node-api-version/-/node-api-version-0.2.1.tgz",
+      "integrity": "sha512-2xP/IGGMmmSQpI1+O/k72jF/ykvZ89JeuKX3TLJAYPDVLUalrshrLHkeVcCCZqG/eEa635cr8IBYzgnDvM2O8Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.3.5"
+      }
+    },
+    "node_modules/node-gyp": {
+      "version": "12.4.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.4.0.tgz",
+      "integrity": "sha512-OMcPNvqTCFUnNaBlmdgq+lfNqY7gTiSmNRDjY3uAXRyudeKZEZxu3CLtjMQrx4zZxCX2b/mpNqTtwuCJgXhHkw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "graceful-fs": "^4.2.6",
+        "nopt": "^9.0.0",
+        "proc-log": "^6.0.0",
+        "semver": "^7.3.5",
+        "tar": "^7.5.4",
+        "tinyglobby": "^0.2.12",
+        "undici": "^6.25.0",
+        "which": "^6.0.0"
+      },
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/node-gyp/node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/node-gyp/node_modules/isexe": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-4.0.0.tgz",
+      "integrity": "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/node-gyp/node_modules/undici": {
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.28.0.tgz",
+      "integrity": "sha512-LIY910g9TI13YS95lrMFrs8Rm/u/irgHeTWoKCoteeJ04CUJ92eEfj0rVn+7VKMPBpUPiUoBKfhNyLI23EE/KA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
+    "node_modules/node-gyp/node_modules/which": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-6.0.1.tgz",
+      "integrity": "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^4.0.0"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nopt": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-9.0.0.tgz",
+      "integrity": "sha512-Zhq3a+yFKrYwSBluL4H9XP3m3y5uvQkB/09CwDruCiRmR/UJYnn9W4R48ry0uGC70aeTPKLynBtscP9efFFcPw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^4.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/normalize-url": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nostics": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/nostics/-/nostics-1.2.0.tgz",
+      "integrity": "sha512-FGqEfhQjrvo1lL8KFifdTQiNwwQHJxC1jtYE1Rc54qF/jxONUNL+kC9gS1krX8Q65PgrQ5fCqH/I4NhWBvdSqg==",
+      "license": "MIT"
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/p-cancelable": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
+      "integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT"
+    },
+    "node_modules/pe-library": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/pe-library/-/pe-library-0.4.1.tgz",
+      "integrity": "sha512-eRWB5LBz7PpDu4PUlwT0PhnQfTQJlDDdPa35urV4Osrm0t0AqQFGn+UIkU3klZvwJ8KPO3VbBFsXquA6p6kqZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/jet2jet"
+      }
+    },
+    "node_modules/perfect-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.1.0.tgz",
+      "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pinia": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-4.0.2.tgz",
+      "integrity": "sha512-yKVVA7bSj5oRZFp/Ab9wLlmyb5gPUYEiIm4ryiWTe/xe7PtkRdMVOp1X1ggvq0c6Uj7Q0Du1HnV2mtAwM0Ks1g==",
+      "license": "MIT",
+      "dependencies": {
+        "nostics": "^1.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/devtools-api": "^8.1.5",
+        "typescript": ">=5.6.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "@vue/devtools-api": {
+          "optional": false
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pkg-types": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
+      "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.4",
+        "exsolve": "^1.0.8",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/pkijs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pkijs/-/pkijs-3.4.0.tgz",
+      "integrity": "sha512-emEcLuomt2j03vxD54giVB4SxTjnsqkU692xZOZXHDVoYyypEm+b3jpiTcc+Cf+myooc+/Ly0z01jqeNHVgJGw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@noble/hashes": "1.4.0",
+        "asn1js": "^3.0.6",
+        "bytestreamjs": "^2.0.1",
+        "pvtsutils": "^1.3.6",
+        "pvutils": "^1.1.3",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/pkijs/node_modules/@noble/hashes": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
+      "integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/plist": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
+      "integrity": "sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@xmldom/xmldom": "^0.8.8",
+        "base64-js": "^1.5.1",
+        "xmlbuilder": "^15.1.1"
+      },
+      "engines": {
+        "node": ">=10.4.0"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.17",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postject": {
+      "version": "1.0.0-alpha.6",
+      "resolved": "https://registry.npmjs.org/postject/-/postject-1.0.0-alpha.6.tgz",
+      "integrity": "sha512-b9Eb8h2eVqNE8edvKdwqkrY6O7kAwmI8kcnBv1NScolYJbo59XUF0noFq+lxbC1yN20bmC0WBEbDC5H/7ASb0A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "commander": "^9.4.0"
+      },
+      "bin": {
+        "postject": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/postject/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
+    "node_modules/proc-log": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
+      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/promise-retry": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
+      "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "err-code": "^2.0.2",
+        "retry": "^0.12.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/proper-lockfile": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
+      "integrity": "sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "retry": "^0.12.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/pump": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.4.tgz",
+      "integrity": "sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/pvtsutils": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.6.tgz",
+      "integrity": "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/pvutils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.2.0.tgz",
+      "integrity": "sha512-BbubeCEyTuQjVMakvJQ/Sxbc93F2pwmbsxONT/ZRrwU7Ua38d8unYTwXpTVLAKJ4BDuH9IGztCjQcd/N/39Dvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-binary-file-arch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/read-binary-file-arch/-/read-binary-file-arch-1.0.6.tgz",
+      "integrity": "sha512-BNg9EN3DD3GsDXX7Aa8O4p92sryjkmzYYgmgTAc6CA4uGLEDzFfxOxugu21akOxpcXHiEgsYkC6nPsQvLLLmEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "bin": {
+        "read-binary-file-arch": "cli.js"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz",
+      "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resedit": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/resedit/-/resedit-1.7.2.tgz",
+      "integrity": "sha512-vHjcY2MlAITJhC0eRD/Vv8Vlgmu9Sd3LX9zZvtGzU5ZImdTN3+d6e/4mnTyV8vEbyf1sgNIrWxhWlrys52OkEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pe-library": "^0.4.1"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/jet2jet"
+      }
+    },
+    "node_modules/resolve-alpn": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
+      "integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/responselike": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
+      "integrity": "sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lowercase-keys": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/roarr": {
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/roarr/-/roarr-2.15.4.tgz",
+      "integrity": "sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "boolean": "^3.0.1",
+        "detect-node": "^2.0.4",
+        "globalthis": "^1.0.1",
+        "json-stringify-safe": "^5.0.1",
+        "semver-compare": "^1.0.0",
+        "sprintf-js": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.3.tgz",
+      "integrity": "sha512-rn9wpmxplLf7NLNyCk9FyWh3FM43DbY8jOzCdEPzH7uflhTftRbCEpqi6Ly2osgoU8OwObtmavMbWLaWy4LX7A==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.143.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.2.3",
+        "@rolldown/binding-darwin-arm64": "1.2.3",
+        "@rolldown/binding-darwin-x64": "1.2.3",
+        "@rolldown/binding-freebsd-x64": "1.2.3",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.3",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.3",
+        "@rolldown/binding-linux-arm64-musl": "1.2.3",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.3",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.3",
+        "@rolldown/binding-linux-x64-gnu": "1.2.3",
+        "@rolldown/binding-linux-x64-musl": "1.2.3",
+        "@rolldown/binding-openharmony-arm64": "1.2.3",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.3",
+        "@rolldown/binding-win32-x64-msvc": "1.2.3"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/sanitize-filename": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/sanitize-filename/-/sanitize-filename-1.6.4.tgz",
+      "integrity": "sha512-9ZyI08PsvdQl2r/bBIGubpVdR3RR9sY6RDiWFPreA21C/EFlQhmgo20UZlNjZMMZNubusLhAQozkA0Od5J21Eg==",
+      "dev": true,
+      "license": "WTFPL OR ISC",
+      "dependencies": {
+        "truncate-utf8-bytes": "^1.0.0"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.1.tgz",
+      "integrity": "sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/serialize-error": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-7.0.1.tgz",
+      "integrity": "sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "type-fest": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/stat-mode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-1.0.0.tgz",
+      "integrity": "sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sumchecker": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
+      "integrity": "sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "debug": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 8.0"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tar": {
+      "version": "7.5.22",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.22.tgz",
+      "integrity": "sha512-MFO/QzvtAOmJbkhOaCTvbGcFN9L9b+JunIsDwaKljSOdcLMea3NJ1k9Usz/rjdfSXTq4dfzfeS7W4p4YOAAHeA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/temp": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/temp/-/temp-0.9.4.tgz",
+      "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mkdirp": "^0.5.1",
+        "rimraf": "~2.6.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/temp-file": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/temp-file/-/temp-file-3.4.0.tgz",
+      "integrity": "sha512-C5tjlC/HCtVUOi3KWVokd4vHVViOmGjtLwIh4MuzPo/nMYTV/p1urt3RnMz2IWXDdKEGJH3k5+KPxtqRsUYGtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-exit-hook": "^2.0.1",
+        "fs-extra": "^10.0.0"
+      }
+    },
+    "node_modules/three": {
+      "version": "0.185.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.185.1.tgz",
+      "integrity": "sha512-5aojFCXKwnjBRZvUnt3WFfEcvUJgkN5LlijRFN95hMy8WVkG4I0QNcJE+OuWvuJ0bOdStrbfXn0pkd6/QyiAlg==",
+      "license": "MIT"
+    },
+    "node_modules/tiny-async-pool": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tiny-async-pool/-/tiny-async-pool-1.3.0.tgz",
+      "integrity": "sha512-01EAw5EDrcVrdgyCLgoSPvqznC0sVxDSVeiOz09FUpjh71G79VCqneOr+xvt7T1r76CF6ZZfPjHorN2+d+3mqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^5.5.0"
+      }
+    },
+    "node_modules/tiny-async-pool/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tmp": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.7.tgz",
+      "integrity": "sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/tmp-promise": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/tmp-promise/-/tmp-promise-3.0.3.tgz",
+      "integrity": "sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tmp": "^0.2.0"
+      }
+    },
+    "node_modules/truncate-utf8-bytes": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
+      "integrity": "sha512-95Pu1QXQvruGEhv62XCMO3Mm90GscOCClvrIUwCM0PYOXK3kaF3l3sIHxx71ThJfcbM2O5Au6SO3AWCSEfW4mQ==",
+      "dev": true,
+      "license": "WTFPL",
+      "dependencies": {
+        "utf8-byte-length": "^1.0.1"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
+    "node_modules/type-fest": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ufo": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "license": "MIT"
+    },
+    "node_modules/undici": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.29.0.tgz",
+      "integrity": "sha512-IDxfleLmmbSskfWSUATiN1nfn2rDuvnMOqb5CWR92iIfojA0Ud+ulOAAEQ57LPr9rWmsreUyf5lwyao+7GNNVw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/unplugin": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.3.0.tgz",
+      "integrity": "sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "picomatch": "^4.0.4",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@farmfe/core": "*",
+        "@rspack/core": "*",
+        "bun-types-no-globals": "*",
+        "esbuild": "*",
+        "rolldown": "*",
+        "rollup": "*",
+        "unloader": "*",
+        "vite": "*",
+        "webpack": "*"
+      },
+      "peerDependenciesMeta": {
+        "@farmfe/core": {
+          "optional": true
+        },
+        "@rspack/core": {
+          "optional": true
+        },
+        "bun-types-no-globals": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        },
+        "unloader": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.2.tgz",
+      "integrity": "sha512-xVToRh2CTmLk2HnEG7ac4rl1MJTT3RFkpS8B++/SnB0kXvuaavD+n3m/vrzyWQOdJNSZQACnbz01pnppbwV5BA==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/unzipper": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.12.5.tgz",
+      "integrity": "sha512-tXYOi9R57Uj/2Z25SOs5RRSzq886MBQj2gY8dPL+xl/kv6s6SvByoKfAtvfVeEuhntWDgjd2o9p2lb4TVPAz0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bluebird": "~3.7.2",
+        "duplexer2": "~0.1.4",
+        "fs-extra": "11.3.1",
+        "graceful-fs": "^4.2.2",
+        "node-int64": "^0.4.0"
+      }
+    },
+    "node_modules/unzipper/node_modules/fs-extra": {
+      "version": "11.3.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.1.tgz",
+      "integrity": "sha512-eXvGGwZ5CL17ZSwHWd3bbgk7UUpF6IFHtP57NYYakPvHOs8GDgDe5KJI36jIJzDkJ6eJjuzRA8eBQb6SkKue0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/utf8-byte-length": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.5.tgz",
+      "integrity": "sha512-Xn0w3MtiQ6zoz2vFyUVruaCL53O/DwUvkEeOvj+uulMm0BkUGYWmBYVyElqZaSLhY6ZD0ulfU3aBra2aVT4xfA==",
+      "dev": true,
+      "license": "(WTFPL OR MIT)"
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.1.tgz",
+      "integrity": "sha512-EU/eS7BH3XROHh2YnBefjM6DBKA6ZeMZEYQbj7NLWg5wHYlhB8B/Mayd5XsgWq+NFYccDOTemRpdETWR6Ka/lw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.33.0",
+        "picomatch": "^4.0.5",
+        "postcss": "^8.5.25",
+        "rolldown": "~1.2.1",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.4.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.5.41",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.41.tgz",
+      "integrity": "sha512-2laE0p+aK+/AOPG/XL/WepOs/GlK755LJ1XECi9kDUrz1FKNw8rb2Xzlw9JS1rqEV55nb0ttsKxVlTCcd+R5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.41",
+        "@vue/compiler-sfc": "3.5.41",
+        "@vue/runtime-dom": "3.5.41",
+        "@vue/server-renderer": "3.5.41",
+        "@vue/shared": "3.5.41"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.2.0.tgz",
+      "integrity": "sha512-QAC5i0LEb1GLG0LXDQmHu8L7FX12j0KwU/JTKmLQUJMrn04gQdKP6Du+p0QwpHb3iy71vBlqnHQ8WAfOSAWhqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/generator": "^8.0.0",
+        "@vue-macros/common": "^3.1.3",
+        "@vue/devtools-api": "^8.1.5",
+        "ast-walker-scope": "^0.9.0",
+        "chokidar": "^5.0.0",
+        "json5": "^2.2.3",
+        "local-pkg": "^1.2.1",
+        "magic-string": "^0.30.21",
+        "mlly": "^1.8.2",
+        "muggle-string": "^0.4.1",
+        "nostics": "^1.1.4",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.5",
+        "scule": "^1.3.0",
+        "tinyglobby": "^0.2.17",
+        "unplugin": "^3.3.0",
+        "unplugin-utils": "^0.3.2",
+        "yaml": "^2.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@pinia/colada": ">=0.21.2",
+        "@vue/compiler-sfc": "^3.5.34 || ^4.0.0",
+        "pinia": "^3.0.4 || ^4.0.2",
+        "vite": "^7.3.0 || ^8.0.0",
+        "vue": "^3.5.34 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@pinia/colada": {
+          "optional": true
+        },
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "pinia": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webcrypto-core": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-1.9.2.tgz",
+      "integrity": "sha512-gsXecm82UQNlTBURJGuqOWy1Ww08S3kZUcr3aOJS02Pk0xLtkfeUAVC0u0xhgdonFme80edSJUIJyuvL/7250Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/json-schema": "^1.1.12",
+        "@peculiar/utils": "^2.0.2",
+        "asn1js": "^3.0.10",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
+    },
+    "node_modules/which": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-5.0.0.tgz",
+      "integrity": "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/xmlbuilder": {
+      "version": "15.1.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
+      "integrity": "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.3",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.3.tgz",
+      "integrity": "sha512-GZtjxm/J/4TSxuL3FNYjCmLktBTnIw/rVmKSIyKeYAZpmJB2ig9VauCC5xsa82GNKVKDAqpOn3KVzNt0zmrU0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index 3c82eaa..82daba8 100644
--- a/package.json
+++ b/package.json
@@ -1,31 +1,66 @@
 {
-  "name": "spa-view",
+  "name": "nl-game",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
+  "description": "像素游戏厅：43 款小游戏平台（单机 + 联机对战 + AI 陪玩）",
+  "author": "nl-game",
   "type": "module",
+  "main": "electron/main.cjs",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "electron": "electron .",
+    "electron:e2e": "vite build --base=./ && electron electron/e2e.cjs",
+    "electron:dist": "vite build --base=./",
+    "electron:pack": "vite build --base=./ && electron-builder --win --dir",
+    "electron:build": "vite build --base=./ && electron-builder --win nsis"
   },
   "dependencies": {
-    "tailwindcss": "^4.1.4",
-    "vue": "^3.5.13",
-    "@ant-design-vue/pro-layout": "^3.2.5",
-    "@ant-design/icons-vue": "^7.0.1",
-    "@fortawesome/fontawesome-free": "^6.7.2",
-    "@tailwindcss/vite": "^4.1.4",
-    "@vueuse/head": "^2.0.0",
-    "ant-design-vue": "^4.1.1",
-    "axios": "^1.6.2",
-    "lucide-vue-next": "^0.507.0",
-    "pinia": "^2.1.7",
-    "swiper": "^11.0.5",
-    "vue-router": "^4.2.5"
+    "@fontsource/press-start-2p": "^5.3.0",
+    "@fontsource/vt323": "^5.3.0",
+    "axios": "^1.19.0",
+    "pinia": "^4.0.2",
+    "three": "^0.185.1",
+    "vue": "^3.5.41",
+    "vue-router": "^5.2.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.2",
-    "sass": "^1.71.0",
-    "vite": "^6.3.1"
+    "@vitejs/plugin-vue": "^6.0.8",
+    "electron": "^43.4.0",
+    "electron-builder": "^26.15.3",
+    "vite": "^8.2.1"
+  },
+  "build": {
+    "appId": "com.nlgame.desktop",
+    "productName": "像素游戏厅",
+    "electronDist": "node_modules/electron/dist",
+    "directories": {
+      "output": "release"
+    },
+    "files": [
+      "dist/**/*",
+      "electron/**/*",
+      "!electron/e2e.cjs",
+      "package.json"
+    ],
+    "asar": true,
+    "win": {
+      "executableName": "PixelArcade",
+      "target": [
+        {
+          "target": "nsis",
+          "arch": [
+            "x64"
+          ]
+        }
+      ]
+    },
+    "nsis": {
+      "oneClick": false,
+      "allowToChangeInstallationDirectory": true,
+      "shortcutName": "像素游戏厅",
+      "artifactName": "PixelArcade-Setup-${version}.${ext}"
+    }
   }
 }
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..47edd32
Binary files /dev/null and b/public/favicon.png differ
diff --git a/src/App.vue b/src/App.vue
index 3602e60..faf9548 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,77 @@
 <script setup>
+// 应用外壳：登录页(bare)不显示导航栏，其余页面统一带 NavBar
+// 登录后挂载全局聊天悬浮小窗（大厅/游戏中随时私聊），并初始化实时消息通道
+import { computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import NavBar from './components/NavBar.vue'
+import ChatWidget from './components/ChatWidget.vue'
+import RoomInviteModal from './components/RoomInviteModal.vue'
+import { useUserStore } from './stores/user'
+import { useChatStore } from './stores/chat'
+import { useBattleStore } from './stores/battle'
+
+const route = useRoute()
+const userStore = useUserStore()
+const chatStore = useChatStore()
+const battleStore = useBattleStore()
+
+// 悬浮小窗显示条件：已登录、非登录页、非后台、非完整聊天室页（聊天室本身就是大窗）
+const showWidget = computed(
+  () => userStore.loggedIn && !route.meta.bare && !route.path.startsWith('/admin') && route.path !== '/chat'
+)
+
+// 登录后初始化聊天（WS 连接 + 未读数）；退出后断开连接并重置
+watch(
+  () => userStore.loggedIn,
+  (v) => {
+    if (v) {
+      chatStore.init()
+    } else {
+      battleStore.disconnect()
+      chatStore.reset()
+    }
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
-  <router-view />
+  <div class="app-shell">
+    <NavBar v-if="!route.meta.bare" />
+    <main class="app-main">
+      <router-view />
+    </main>
+    <ChatWidget v-if="showWidget" />
+    <RoomInviteModal />
+  </div>
 </template>
 
-<style lang='scss' scoped>
-
+<style scoped>
+.app-shell {
+  min-height: 100vh;
+}
+.app-main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px 16px 60px;
+}
+</style>
+
+<style>
+/* 宽屏游戏页（如饥荒）：解除 1200px 限宽，整页锁定为视口高度（导航 + 内容 = 100dvh），不出滚动条 */
+body.wide-page {
+  overflow: hidden;
+}
+body.wide-page .app-shell {
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+body.wide-page .app-main {
+  max-width: none;
+  width: 100%;
+  padding: 10px 12px 12px;
+  flex: 1;
+  min-height: 0;
+}
 </style>
diff --git a/src/api/http.js b/src/api/http.js
new file mode 100644
index 0000000..7d8bb4e
--- /dev/null
+++ b/src/api/http.js
@@ -0,0 +1,57 @@
+// axios 请求封装：自动携带 Token、统一错误提示、401 跳登录
+import axios from 'axios'
+import router from '../router'
+
+// 后端服务器基址：Electron 桌面端由 preload 注入（file:// 下相对路径不可用），
+// 浏览器环境返回空串走同源相对路径（开发时由 Vite 代理转发）
+export function serverBase() {
+  return (window.desktop?.serverBase || '').replace(/\/+$/, '')
+}
+
+// 全局轻量提示（右上角浮动消息，避免引入 UI 库）
+export function toast(msg, type = 'error') {
+  const el = document.createElement('div')
+  el.className = `toast toast-${type}`
+  el.textContent = msg
+  document.body.appendChild(el)
+  // 入场动画
+  requestAnimationFrame(() => el.classList.add('show'))
+  setTimeout(() => {
+    el.classList.remove('show')
+    setTimeout(() => el.remove(), 300)
+  }, 2200)
+}
+
+const http = axios.create({ baseURL: serverBase() + '/api', timeout: 15000 })
+
+// 请求拦截：附加 JWT
+http.interceptors.request.use((config) => {
+  const token = localStorage.getItem('token')
+  if (token) config.headers.Authorization = `Bearer ${token}`
+  return config
+})
+
+// 响应拦截：code!=0 视为业务失败并弹提示；401 清凭证回登录页
+http.interceptors.response.use(
+  (res) => {
+    const body = res.data
+    if (body.code !== 0) {
+      toast(body.msg || '操作失败')
+      return Promise.reject(new Error(body.msg))
+    }
+    return body.data
+  },
+  (err) => {
+    if (err.response?.status === 401) {
+      localStorage.removeItem('token')
+      localStorage.removeItem('user')
+      toast('登录已失效，请重新登录')
+      router.push('/login')
+    } else if (err.code !== 'ERR_CANCELED') {
+      toast(err.response?.data?.msg || '网络异常，请稍后再试')
+    }
+    return Promise.reject(err)
+  }
+)
+
+export default http
diff --git a/src/api/request.js b/src/api/request.js
deleted file mode 100644
index 193d05f..0000000
--- a/src/api/request.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import axios from 'axios';
-import {message as msg} from "ant-design-vue";
-
-// 创建 Axios 实例
-const service = axios.create({
-    baseURL: '/api/', // 这里可以设置你的 API 基础地址
-    timeout: 5000 // 请求超时时间
-});
-
-// 请求拦截器
-service.interceptors.request.use(
-    config => {
-        // 从本地存储中获取 token
-        const token = localStorage.getItem('token');
-        if (token) {
-            // 设置请求头中的 Authorization
-            config.headers['Authorization'] = `Bearer ${token}`;
-        }
-        return config;
-    },
-    error => {
-        console.log(error); // 打印错误信息
-        return Promise.reject(error);
-    }
-);
-
-// 响应拦截器
-service.interceptors.response.use(
-    response => {
-        const {code, result, message} = response.data;
-        if (code === 0) {
-            return result;
-        } else {
-            if (code === 401) {
-                msg.error(message).then(r => {
-                    localStorage.removeItem('token');
-                    localStorage.removeItem('user');
-                    window.location.href = '/'
-                    msg.destroy()
-                })
-                return;
-            }
-            msg.error(message).then(r => {
-                msg.destroy()
-            })
-        }
-    },
-    error => {
-        console.log('err' + error); // 打印错误信息
-        return Promise.reject(error);
-    }
-);
-
-// 封装 get 请求
-const get = (url, params = {}) => {
-    return service.get(url, { params });
-};
-
-// 封装 post 请求
-const post = (url, data = {}) => {
-    return service.post(url, data);
-};
-
-// 封装上传文件请求
-const upload = (url, file) => {
-    const formData = new FormData();
-    formData.append('file', file);
-    return service.post(url, formData, {
-        headers: {
-            'Content-Type': 'multipart/form-data'
-        }
-    });
-};
-
-export { get, post, upload };
\ No newline at end of file
diff --git a/src/components/ChatWidget.vue b/src/components/ChatWidget.vue
new file mode 100644
index 0000000..1f82674
--- /dev/null
+++ b/src/components/ChatWidget.vue
@@ -0,0 +1,448 @@
+<script setup>
+// 全局聊天悬浮小窗：大厅/游戏中随时收发私聊，不打断当前页面
+// 右下角悬浮按钮（带未读角标）→ 小窗（会话列表/好友列表/聊天），可一键跳转完整聊天室
+import { ref, computed, watch, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { useChatStore } from '../stores/chat'
+import PixelAvatar from './PixelAvatar.vue'
+
+const router = useRouter()
+const chat = useChatStore()
+const tab = ref('conv') // conv=会话 friend=好友
+const draft = ref('')
+const msgBox = ref(null)
+
+const badge = computed(() => (chat.unread > 99 ? '99+' : chat.unread))
+
+// 展开小窗
+function open() {
+  chat.openWidget()
+}
+function close() {
+  chat.widgetOpen = false
+}
+// 跳转完整聊天室（保留当前会话）
+function goFull() {
+  chat.widgetOpen = false
+  router.push('/chat')
+}
+function backToList() {
+  chat.widgetView = 'list'
+}
+async function pick(peer) {
+  await chat.widgetChat(peer)
+}
+async function send() {
+  const text = draft.value.trim()
+  if (!text) return
+  draft.value = ''
+  await chat.sendMsg(text)
+}
+// 新消息自动滚到底部
+watch(
+  () => chat.messages.length,
+  async () => {
+    await nextTick()
+    if (msgBox.value) msgBox.value.scrollTop = msgBox.value.scrollHeight
+  }
+)
+watch(
+  () => chat.widgetView,
+  async (v) => {
+    if (v === 'chat') {
+      await nextTick()
+      if (msgBox.value) msgBox.value.scrollTop = msgBox.value.scrollHeight
+    }
+  }
+)
+
+// 时间显示：今天只显示时分，更早带日期
+function fmtTime(ts) {
+  if (!ts) return ''
+  const d = new Date(ts * 1000)
+  const now = new Date()
+  const hm = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
+  if (d.toDateString() === now.toDateString()) return hm
+  return `${d.getMonth() + 1}/${d.getDate()} ${hm}`
+}
+</script>
+
+<template>
+  <div class="chat-widget">
+    <!-- 悬浮按钮 -->
+    <button v-if="!chat.widgetOpen" class="fab" title="消息" @click="open">
+      💬
+      <span v-if="chat.unread" class="fab-badge">{{ badge }}</span>
+    </button>
+    <!-- 小窗 -->
+    <div v-else class="panel-box">
+      <div class="head">
+        <template v-if="chat.widgetView === 'chat'">
+          <button class="icon-btn" title="返回列表" @click="backToList">←</button>
+          <span class="head-title">
+            <PixelAvatar :code="chat.activePeer?.avatar || 'px:01'" :size="20" /> {{ chat.activePeer?.nickname }}
+            <i v-if="chat.activePeer?.online" class="dot on" title="在线"></i>
+            <i v-else class="dot" title="离线"></i>
+          </span>
+        </template>
+        <template v-else>
+          <span class="head-title">💬 消息</span>
+        </template>
+        <span class="head-actions">
+          <button class="icon-btn" title="前往聊天室" @click="goFull">⛶</button>
+          <button class="icon-btn" title="收起" @click="close">✕</button>
+        </span>
+      </div>
+      <!-- 列表视图 -->
+      <template v-if="chat.widgetView === 'list'">
+        <div class="tabs">
+          <button class="tab" :class="{ on: tab === 'conv' }" @click="tab = 'conv'">会话</button>
+          <button class="tab" :class="{ on: tab === 'friend' }" @click="tab = 'friend'">
+            好友<span v-if="chat.reqBadge" class="mini-badge">{{ chat.reqBadge }}</span>
+          </button>
+        </div>
+        <div v-if="tab === 'conv'" class="list">
+          <div v-if="!chat.conversations.length" class="empty text-dim">
+            还没有会话<br />去好友列表找人聊聊吧
+          </div>
+          <div v-for="cv in chat.conversations" :key="cv.peer.user_id" class="item" @click="pick(cv.peer)">
+            <span class="avatar"><PixelAvatar :code="cv.peer.avatar || 'px:01'" :size="28" /><i v-if="cv.peer.online" class="dot on abs"></i></span>
+            <span class="mid">
+              <b>{{ cv.peer.nickname }}</b>
+              <small class="text-dim">{{ cv.from_me ? '我：' : '' }}{{ cv.last_msg }}</small>
+            </span>
+            <span class="side">
+              <small class="text-dim">{{ fmtTime(cv.last_at) }}</small>
+              <em v-if="cv.unread" class="unread">{{ cv.unread > 99 ? '99+' : cv.unread }}</em>
+            </span>
+          </div>
+        </div>
+        <div v-else class="list">
+          <div v-if="chat.reqBadge" class="req-tip" @click="goFull">
+            🔔 有 {{ chat.reqBadge }} 条好友申请待处理，点击前往聊天室查看
+          </div>
+          <div v-if="!chat.friends.length" class="empty text-dim">
+            还没有好友<br />到聊天室搜索用户名添加好友
+          </div>
+          <div v-for="f in chat.friends" :key="f.user_id" class="item" @click="pick(f)">
+            <span class="avatar"><PixelAvatar :code="f.avatar || 'px:01'" :size="28" /><i v-if="f.online" class="dot on abs"></i></span>
+            <span class="mid">
+              <b>{{ f.nickname }}</b>
+              <small class="text-dim">{{ f.online ? '在线' : '离线' }} · @{{ f.username }}</small>
+            </span>
+            <span class="side"><small class="chat-go">发消息</small></span>
+          </div>
+        </div>
+      </template>
+      <!-- 聊天视图 -->
+      <template v-else>
+        <div ref="msgBox" class="msgs">
+          <button v-if="chat.hasMore" class="earlier" @click="chat.loadEarlier()">加载更早的消息</button>
+          <div
+            v-for="m in chat.messages"
+            :key="m.id"
+            class="bubble-row"
+            :class="{ mine: m.from_id !== chat.activePeer?.user_id }"
+          >
+            <div class="bubble">
+              {{ m.content }}
+              <small class="stamp">{{ fmtTime(m.created_at) }}</small>
+            </div>
+          </div>
+        </div>
+        <div class="input-row">
+          <input
+            v-model="draft"
+            class="input"
+            maxlength="500"
+            placeholder="输入消息，回车发送"
+            @keyup.enter="send"
+          />
+          <button class="btn btn-sm" @click="send">发送</button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chat-widget {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 1000;
+}
+.fab {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+  font-size: 24px;
+  cursor: pointer;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), var(--glow);
+  position: relative;
+  transition: transform 0.15s;
+}
+.fab:hover {
+  transform: scale(1.08);
+}
+.fab-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: #e5484d;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.panel-box {
+  width: 340px;
+  height: 480px;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
+  overflow: hidden;
+}
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-card);
+}
+.head-title {
+  font-weight: 800;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.head-actions {
+  display: flex;
+  gap: 4px;
+}
+.icon-btn {
+  width: 26px;
+  height: 26px;
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 6px;
+}
+.icon-btn:hover {
+  background: var(--bg-card);
+  color: var(--text);
+}
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #666;
+  display: inline-block;
+}
+.dot.on {
+  background: #4ade80;
+  box-shadow: 0 0 6px #4ade80;
+}
+.dot.abs {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  border: 2px solid var(--bg-panel);
+  width: 10px;
+  height: 10px;
+}
+.tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+}
+.tab {
+  flex: 1;
+  padding: 8px;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 13px;
+  cursor: pointer;
+  position: relative;
+}
+.tab.on {
+  color: var(--text);
+  font-weight: 800;
+  box-shadow: inset 0 -2px 0 var(--primary);
+}
+.mini-badge {
+  margin-left: 4px;
+  background: #e5484d;
+  color: #fff;
+  font-size: 10px;
+  border-radius: 999px;
+  padding: 1px 5px;
+}
+.list {
+  flex: 1;
+  overflow-y: auto;
+}
+.empty {
+  text-align: center;
+  padding: 60px 0;
+  font-size: 13px;
+  line-height: 2;
+}
+.req-tip {
+  margin: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(229, 72, 77, 0.12);
+  color: #ff8a8e;
+  font-size: 12px;
+  cursor: pointer;
+}
+.item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 12px;
+  cursor: pointer;
+}
+.item:hover {
+  background: var(--bg-card);
+}
+.avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 19px;
+  position: relative;
+  flex-shrink: 0;
+}
+.mid {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.mid b {
+  font-size: 13px;
+}
+.mid small {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.side {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 3px;
+  flex-shrink: 0;
+}
+.side small {
+  font-size: 11px;
+}
+.unread {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: #e5484d;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 800;
+  font-style: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.chat-go {
+  color: var(--primary-2);
+  font-size: 12px;
+}
+.msgs {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.earlier {
+  border: none;
+  background: transparent;
+  color: var(--primary-2);
+  font-size: 12px;
+  cursor: pointer;
+  padding: 4px;
+}
+.bubble-row {
+  display: flex;
+}
+.bubble-row.mine {
+  justify-content: flex-end;
+}
+.bubble {
+  max-width: 78%;
+  padding: 8px 11px;
+  border-radius: 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  font-size: 13px;
+  line-height: 1.6;
+  word-break: break-word;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.bubble-row.mine .bubble {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  border-color: transparent;
+  color: #fff;
+}
+.stamp {
+  font-size: 10px;
+  opacity: 0.65;
+  align-self: flex-end;
+}
+.input-row {
+  display: flex;
+  gap: 8px;
+  padding: 10px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-card);
+}
+.input-row .input {
+  flex: 1;
+}
+@media (max-width: 640px) {
+  .panel-box {
+    width: calc(100vw - 40px);
+    height: 60vh;
+  }
+}
+</style>
diff --git a/src/components/GameCard.vue b/src/components/GameCard.vue
new file mode 100644
index 0000000..91ba102
--- /dev/null
+++ b/src/components/GameCard.vue
@@ -0,0 +1,142 @@
+<script setup>
+// 游戏卡片：大厅与商城通用（图标、名称、分类、价格/拥有标识、热度）
+import GameIcon from './GameIcon.vue'
+
+defineProps({
+  game: { type: Object, required: true }, // 游戏对象（含 owned 字段）
+  showBuy: { type: Boolean, default: false }, // 商城模式显示购买按钮
+})
+defineEmits(['play', 'buy', 'addCart'])
+</script>
+
+<template>
+  <div class="game-card card">
+    <div class="icon-area">
+      <GameIcon class="game-icon" :code="game.code" :icon="game.icon" :size="48" />
+      <span v-if="game.price > 0 && !game.owned && game.weekly_free" class="weekly-tag">⚡ 本周周免</span>
+      <span v-else-if="game.price > 0 && !game.owned" class="price-tag">💰{{ game.price }}</span>
+      <span v-else-if="game.price > 0 && game.owned" class="owned-tag">已拥有</span>
+      <span v-else class="free-tag">免费</span>
+    </div>
+    <div class="info">
+      <div class="name-row">
+        <span class="name">{{ game.name }}</span>
+        <span class="tag">{{ game.category }}</span>
+      </div>
+      <p class="desc text-dim">{{ game.description }}</p>
+      <!-- 商城模式：无论购买还是开始游戏，按钮都独占一行，避免与热度挤在一起换行错乱 -->
+      <div class="foot" :class="{ stacked: showBuy }">
+        <span class="plays text-dim">🔥 {{ game.play_count }} 次游玩</span>
+        <div class="actions">
+          <template v-if="showBuy && game.price > 0 && !game.owned">
+            <button class="btn btn-ghost btn-sm" @click.stop="$emit('addCart', game)">加购物车</button>
+            <button class="btn btn-sm" @click.stop="$emit('buy', game)">立即购买</button>
+          </template>
+          <button v-else class="btn btn-sm" :class="{ 'btn-accent': game.engine === 'online' && game.playable }" @click.stop="$emit('play', game)">
+            {{ !game.playable && game.price > 0 ? '去购买' : game.engine === 'online' ? '去对战' : '开始游戏' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.game-card {
+  overflow: hidden;
+  cursor: default;
+}
+.icon-area {
+  position: relative;
+  height: 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
+  border-bottom: 1px solid var(--border);
+}
+.game-icon {
+  font-size: 48px;
+  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
+}
+.price-tag,
+.owned-tag,
+.free-tag,
+.weekly-tag {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-weight: 700;
+}
+.price-tag {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+}
+.weekly-tag {
+  background: linear-gradient(135deg, #f7b733, #fc4a1a);
+  color: #fff;
+}
+.owned-tag {
+  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  color: var(--accent);
+  border: 1px solid var(--accent);
+}
+.free-tag {
+  background: color-mix(in srgb, #2f9e6e 25%, transparent);
+  color: #5fd6a2;
+  border: 1px solid #2f9e6e;
+}
+.info {
+  padding: 12px 14px 14px;
+}
+.name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.name {
+  font-weight: 700;
+  font-size: 15px;
+}
+.desc {
+  font-size: 12px;
+  margin: 6px 0 10px;
+  height: 34px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 17px;
+}
+.foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+/* 购买模式：热度一行、两个按钮另起一行平分宽度 */
+.foot.stacked {
+  flex-direction: column;
+  align-items: stretch;
+}
+.foot.stacked .actions {
+  width: 100%;
+}
+.foot.stacked .actions .btn {
+  flex: 1;
+}
+.plays {
+  font-size: 11px;
+  white-space: nowrap;
+}
+.actions {
+  display: flex;
+  gap: 6px;
+}
+.actions .btn {
+  white-space: nowrap;
+}
+</style>
diff --git a/src/components/GameCarousel.vue b/src/components/GameCarousel.vue
new file mode 100644
index 0000000..4e4c301
--- /dev/null
+++ b/src/components/GameCarousel.vue
@@ -0,0 +1,290 @@
+<script setup>
+// 大厅游戏轮播：后台在游戏管理里勾选参与轮播的游戏，并可切换 4 种轮播效果
+//   slide     横向滑动（经典 banner）
+//   fade      淡入淡出（原地渐变）
+//   coverflow 封面流（中间大、两侧 3D 倾斜，点击侧卡切换）
+//   cards     卡片堆叠（当前在顶，切换时向左飞出）
+// 统一实现：所有卡片绝对定位，按「与当前索引的有符号环距」计算变换，CSS 过渡产生动画
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import GameIcon from './GameIcon.vue'
+
+const props = defineProps({
+  games: { type: Array, required: true }, // 参与轮播的游戏（已按 carousel 排序）
+  styleType: { type: String, default: 'slide' }, // 轮播效果
+  interval: { type: Number, default: 5 }, // 自动播放间隔（秒）
+})
+const emit = defineEmits(['play'])
+
+const idx = ref(0)
+const n = computed(() => props.games.length)
+let timer = 0
+
+// 有符号环距：0=当前，1=下一张，-1=上一张（把环上距离折到 [-n/2, n/2)）
+function signedDist(i) {
+  let d = (i - idx.value + n.value) % n.value
+  if (d > n.value / 2) d -= n.value
+  return d
+}
+
+function go(i) {
+  idx.value = ((i % n.value) + n.value) % n.value
+  restart()
+}
+const next = () => go(idx.value + 1)
+const prev = () => go(idx.value - 1)
+
+// 自动播放：hover 暂停，交互后重新计时
+function restart() {
+  clearInterval(timer)
+  if (n.value > 1) timer = setInterval(next, Math.max(2, props.interval) * 1000)
+}
+const pause = () => clearInterval(timer)
+
+// 点击卡片：当前卡进入游戏，其余卡先切过去
+function onClick(g, i) {
+  if (signedDist(i) === 0) emit('play', g)
+  else go(i)
+}
+
+// 每张卡的变换样式（按效果 + 环距计算）
+function slideStyle(i) {
+  const d = signedDist(i)
+  const abs = Math.abs(d)
+  const s = props.styleType
+  if (s === 'fade') {
+    return { transform: 'none', opacity: d === 0 ? 1 : 0, zIndex: d === 0 ? 2 : 1, pointerEvents: d === 0 ? 'auto' : 'none' }
+  }
+  if (s === 'coverflow') {
+    if (abs > 2) return { transform: `translateX(${d > 0 ? 120 : -120}%) scale(0.5)`, opacity: 0, zIndex: 0, pointerEvents: 'none' }
+    return {
+      // 位移量按卡片宽度（70%容器）折算，保证侧卡贴容器边缘而不外溢遮挡旁边内容
+      transform: `translateX(${d * 33}%) scale(${d === 0 ? 1 : 0.74}) perspective(900px) rotateY(${d * -30}deg)`,
+      opacity: abs === 2 ? 0 : d === 0 ? 1 : 0.55,
+      zIndex: 3 - abs,
+      pointerEvents: abs === 2 ? 'none' : 'auto',
+    }
+  }
+  if (s === 'cards') {
+    // 刚翻过去的那张（环距最负侧等价 n-1）向左飞出，其余按层级堆在后面
+    const back = (i - idx.value + n.value) % n.value // 0=当前 1=下一张 …
+    if (back === 0) return { transform: 'none', opacity: 1, zIndex: 5, pointerEvents: 'auto' }
+    if (back === n.value - 1 && n.value > 2)
+      return { transform: 'translateX(-115%) rotate(-10deg)', opacity: 0, zIndex: 6, pointerEvents: 'none' }
+    if (back <= 2)
+      return { transform: `translateY(${back * 14}px) scale(${1 - back * 0.05})`, opacity: 1 - back * 0.28, zIndex: 5 - back, pointerEvents: 'none' }
+    return { transform: `translateY(28px) scale(0.9)`, opacity: 0, zIndex: 0, pointerEvents: 'none' }
+  }
+  // slide 默认：横向排开
+  return {
+    transform: `translateX(${d * 103}%)`,
+    opacity: abs <= 1 ? 1 : 0,
+    zIndex: d === 0 ? 2 : 1,
+    pointerEvents: d === 0 ? 'auto' : 'none',
+  }
+}
+
+// 按钮文案：可玩进游戏 / 联机去对战 / 未拥有去购买
+function actionText(g) {
+  if (!g.playable && g.price > 0) return `💰 ${g.price} 积分解锁`
+  return g.engine === 'online' ? '⚔️ 去对战' : '▶ 开始游戏'
+}
+
+watch(() => props.interval, restart)
+onMounted(restart)
+onBeforeUnmount(pause)
+</script>
+
+<template>
+  <div class="carousel" :class="`fx-${styleType}`" @mouseenter="pause" @mouseleave="restart">
+    <div class="stage">
+      <div
+        v-for="(g, i) in games"
+        :key="g.id"
+        class="slide card"
+        :style="slideStyle(i)"
+        @click="onClick(g, i)"
+      >
+        <!-- 大图标装饰层 -->
+        <GameIcon class="bg-icon" :code="g.code" :icon="g.icon" :size="190" />
+        <div class="slide-body">
+          <div class="s-tags">
+            <span class="tag tag-primary">{{ g.category }}</span>
+            <span class="tag">{{ g.engine === 'online' ? '⚔️ 联机对战' : '🕹️ 单机' }}</span>
+            <span v-if="g.weekly_free" class="tag tag-accent">⚡ 本周周免</span>
+          </div>
+          <h3 class="s-name">{{ g.name }}</h3>
+          <p class="s-desc text-dim">{{ g.description }}</p>
+          <div class="s-foot">
+            <button class="btn" @click.stop="emit('play', g)">{{ actionText(g) }}</button>
+            <span class="s-plays text-dim">🔥 {{ g.play_count }} 次游玩</span>
+          </div>
+        </div>
+        <GameIcon class="fg-icon" :code="g.code" :icon="g.icon" :size="96" />
+      </div>
+    </div>
+    <!-- 箭头与指示点 -->
+    <template v-if="n > 1">
+      <button class="arrow left" aria-label="上一个" @click.stop="prev">‹</button>
+      <button class="arrow right" aria-label="下一个" @click.stop="next">›</button>
+      <div class="dots">
+        <span v-for="(g, i) in games" :key="g.id" class="dot" :class="{ on: signedDist(i) === 0 }" @click="go(i)"></span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.carousel {
+  position: relative;
+  margin-bottom: 18px;
+}
+.stage {
+  position: relative;
+  height: 210px;
+  overflow: hidden;
+  border-radius: var(--radius);
+}
+/* 封面流/堆叠：卡片变换都留在舞台内（overflow hidden 统一裁剪，避免盖住旁边内容） */
+.slide {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  overflow: hidden;
+  background: linear-gradient(
+    120deg,
+    color-mix(in srgb, var(--primary) 24%, var(--bg-card)),
+    color-mix(in srgb, var(--accent) 14%, var(--bg-card)) 70%
+  );
+  transition: transform 0.55s cubic-bezier(0.35, 0.9, 0.3, 1), opacity 0.5s ease;
+  will-change: transform, opacity;
+}
+/* 背景大图标：右侧淡淡一枚超大 emoji 装饰 */
+.bg-icon {
+  position: absolute;
+  right: -26px;
+  bottom: -38px;
+  font-size: 190px;
+  opacity: 0.14;
+  transform: rotate(-12deg);
+  pointer-events: none;
+  filter: blur(1px);
+}
+.fg-icon {
+  font-size: 96px;
+  margin-right: 56px;
+  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
+  flex: none;
+  animation: car-float 4s ease-in-out infinite;
+}
+@keyframes car-float {
+  50% {
+    transform: translateY(-8px);
+  }
+}
+.slide-body {
+  flex: 1;
+  min-width: 0;
+  padding: 22px 26px;
+}
+.s-tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.s-name {
+  font-size: 26px;
+  font-weight: 900;
+  margin: 10px 0 8px;
+  letter-spacing: 1px;
+}
+.s-desc {
+  font-size: 13px;
+  line-height: 1.6;
+  max-width: 520px;
+  margin-bottom: 14px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.s-foot {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.s-plays {
+  font-size: 12px;
+}
+/* 箭头 */
+.arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: color-mix(in srgb, var(--bg-panel) 80%, transparent);
+  color: var(--text);
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+.arrow:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+  box-shadow: var(--glow);
+}
+.arrow.left {
+  left: 10px;
+}
+.arrow.right {
+  right: 10px;
+}
+/* 指示点 */
+.dots {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  gap: 7px;
+  z-index: 10;
+}
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text) 30%, transparent);
+  cursor: pointer;
+  transition: all 0.25s;
+}
+.dot.on {
+  width: 22px;
+  background: var(--primary);
+  box-shadow: var(--glow);
+}
+/* 封面流/堆叠模式下卡片略窄，给两侧留出展示空间 */
+.fx-coverflow .slide {
+  inset: 0 15%;
+}
+.fx-cards .slide {
+  inset: 4px 3% 24px;
+}
+@media (max-width: 700px) {
+  .fg-icon {
+    display: none;
+  }
+  .s-name {
+    font-size: 20px;
+  }
+}
+</style>
diff --git a/src/components/GameIcon.vue b/src/components/GameIcon.vue
new file mode 100644
index 0000000..b0775f9
--- /dev/null
+++ b/src/components/GameIcon.vue
@@ -0,0 +1,117 @@
+<script setup>
+// 游戏图标组件：内置精致 SVG 徽章的游戏用 SVG 渲染（当前：饥荒 starve），
+// 其余游戏回退为 emoji 文本。size 控制整体边长（px）。
+defineProps({
+  code: { type: String, default: '' },
+  icon: { type: String, default: '🎮' },
+  size: { type: Number, default: 48 },
+})
+</script>
+
+<template>
+  <!-- 饥荒：圆形徽章场景图——深蓝夜空 + 弯月星辰 + 尖刺松树剪影 + 中央篝火发光（哥特手绘感） -->
+  <svg
+    v-if="code === 'starve'"
+    :width="size"
+    :height="size"
+    viewBox="0 0 96 96"
+    fill="none"
+    aria-hidden="true"
+    class="gi-svg"
+  >
+    <defs>
+      <radialGradient id="gi-sky" cx="50%" cy="30%" r="80%">
+        <stop offset="0%" stop-color="#2c3a68" />
+        <stop offset="55%" stop-color="#161d3a" />
+        <stop offset="100%" stop-color="#0a0d1e" />
+      </radialGradient>
+      <radialGradient id="gi-glow" cx="50%" cy="50%" r="50%">
+        <stop offset="0%" stop-color="rgba(255,176,64,0.65)" />
+        <stop offset="55%" stop-color="rgba(255,140,40,0.22)" />
+        <stop offset="100%" stop-color="rgba(255,120,20,0)" />
+      </radialGradient>
+      <linearGradient id="gi-flame" x1="0" y1="1" x2="0" y2="0">
+        <stop offset="0%" stop-color="#e04b00" />
+        <stop offset="60%" stop-color="#ff8c1a" />
+        <stop offset="100%" stop-color="#ffc93d" />
+      </linearGradient>
+      <linearGradient id="gi-flame2" x1="0" y1="1" x2="0" y2="0">
+        <stop offset="0%" stop-color="#ff9d1a" />
+        <stop offset="100%" stop-color="#ffe27a" />
+      </linearGradient>
+      <clipPath id="gi-clip"><circle cx="48" cy="48" r="43" /></clipPath>
+    </defs>
+    <!-- 徽章底与哥特深色描边 -->
+    <circle cx="48" cy="48" r="45.5" fill="#0c0912" />
+    <g clip-path="url(#gi-clip)">
+      <!-- 夜空 -->
+      <rect x="0" y="0" width="96" height="96" fill="url(#gi-sky)" />
+      <!-- 星星 -->
+      <circle cx="26" cy="20" r="1.1" fill="#dfe6ff" opacity="0.9" />
+      <circle cx="40" cy="13" r="0.8" fill="#c9d4ff" opacity="0.7" />
+      <circle cx="58" cy="17" r="0.7" fill="#dfe6ff" opacity="0.6" />
+      <circle cx="18" cy="34" r="0.8" fill="#c9d4ff" opacity="0.55" />
+      <circle cx="80" cy="38" r="0.9" fill="#dfe6ff" opacity="0.65" />
+      <!-- 弯月（主圆 + 夜空色遮圆） -->
+      <circle cx="68" cy="23" r="8.5" fill="#f2e9c8" />
+      <circle cx="64.6" cy="20.4" r="7.4" fill="#182040" />
+      <!-- 地面（前后两层弧） -->
+      <path d="M-4 78 Q28 66 52 74 Q76 80 100 72 L100 100 L-4 100 Z" fill="#131c12" />
+      <path d="M-4 86 Q30 78 60 84 Q84 88 100 82 L100 100 L-4 100 Z" fill="#0c130c" />
+      <!-- 左侧尖刺松树剪影（饥荒风：细干 + 三层错落枝杈，略歪斜） -->
+      <g fill="#080d0a">
+        <path d="M22 76 L23.5 52 L21 52 Z" />
+        <path d="M22.5 40 L13 58 L31 57 Z" />
+        <path d="M22.8 32 L15 47 L30 46.4 Z" />
+        <path d="M23 25 L17 37 L29 36.4 Z" />
+        <path d="M23.2 20 L19 29 L27.6 28.6 Z" />
+      </g>
+      <!-- 右侧松树（稍矮，反向歪斜） -->
+      <g fill="#0a0f0b">
+        <path d="M76 78 L74.6 58 L77.4 58 Z" />
+        <path d="M75.8 47 L67.5 62 L84 61.4 Z" />
+        <path d="M75.6 41 L69 53 L82 52.4 Z" />
+        <path d="M75.4 35.5 L71 44.5 L79.8 44 Z" />
+      </g>
+      <!-- 篝火光晕 -->
+      <ellipse cx="48" cy="66" rx="24" ry="19" fill="url(#gi-glow)" />
+      <!-- 交叉木柴 -->
+      <rect x="36.5" y="72.5" width="23" height="4.6" rx="2.3" fill="#5a3b20" transform="rotate(14 48 74.8)" />
+      <rect x="36.5" y="72.5" width="23" height="4.6" rx="2.3" fill="#6b4826" transform="rotate(-16 48 74.8)" />
+      <!-- 外焰（不对称水滴，手绘感） -->
+      <path
+        d="M48 46 C50.5 52 55.5 55.5 55.8 61.5 C56.1 67.5 52.6 72.5 48.2 72.8 C43.4 73.1 39.8 68.5 40.2 62.4 C40.5 57.6 44 54.5 45.2 50.6 C45.9 48.6 46.8 47.2 48 46 Z"
+        fill="url(#gi-flame)"
+      />
+      <!-- 内焰 -->
+      <path
+        d="M48.1 55 C49.6 58 52 60.2 52.1 63.6 C52.2 67.2 50.2 69.9 48.1 70 C45.7 70.2 43.9 67.4 44.1 63.9 C44.3 60.6 46.6 58.2 48.1 55 Z"
+        fill="url(#gi-flame2)"
+      />
+      <!-- 火心 -->
+      <path d="M48.1 61.5 C49 63 50 64.2 50 66 C50 67.8 49.1 68.9 48.1 69 C46.9 69 46 67.8 46.1 66 C46.2 64.3 47.3 63.1 48.1 61.5 Z" fill="#fff3c4" />
+      <!-- 火花 -->
+      <circle cx="55.5" cy="49.5" r="1" fill="#ffb84d" opacity="0.9" />
+      <circle cx="42.5" cy="46.5" r="0.8" fill="#ff9d3d" opacity="0.75" />
+      <circle cx="52" cy="42.5" r="0.6" fill="#ffd27a" opacity="0.6" />
+    </g>
+    <!-- 外圈描边（双环，哥特徽章感） -->
+    <circle cx="48" cy="48" r="43" stroke="#2a2138" stroke-width="2" />
+    <circle cx="48" cy="48" r="45.4" stroke="#0c0912" stroke-width="2.6" />
+  </svg>
+  <!-- 其余游戏：emoji 回退 -->
+  <span v-else class="gi-emoji" :style="{ fontSize: size + 'px' }">{{ icon }}</span>
+</template>
+
+<style scoped>
+.gi-svg {
+  display: block;
+  flex-shrink: 0;
+}
+.gi-emoji {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+</style>
diff --git a/src/components/LevelSelect.vue b/src/components/LevelSelect.vue
new file mode 100644
index 0000000..f0c3b1d
--- /dev/null
+++ b/src/components/LevelSelect.vue
@@ -0,0 +1,170 @@
+<script setup>
+// 关卡选择：带关卡游戏的开局面板（连连看/消消乐/马里奥通用）
+// 展示：关卡宫格（已过⭐/当前📍/未解锁🔒）、每关正在挑战的好友头像、好友进度名单、继续按钮
+import { computed } from 'vue'
+import PixelAvatar from './PixelAvatar.vue'
+
+const props = defineProps({
+  total: { type: Number, required: true }, // 总关卡数
+  names: { type: Array, default: null }, // 每关小字标签（可选，如模式名/世界号）
+  myLevel: { type: Number, default: 1 }, // 我解锁到的关卡（通关全部后为 total+1）
+  friends: { type: Array, default: () => [] }, // 好友进度 [{user_id,nickname,avatar,level}]
+})
+const emit = defineEmits(['pick'])
+
+const allCleared = computed(() => props.myLevel > props.total) // 是否已全通关
+const continueLevel = computed(() => Math.min(props.myLevel, props.total)) // 继续按钮对应的关
+
+// 好友挂在哪一格显示（超过总关数的通关好友挂在最后一格）
+function friendsAt(lv) {
+  return props.friends.filter((f) => Math.min(f.level, props.total) === lv)
+}
+// 好友进度文案
+function friendText(f) {
+  return f.level > props.total ? '已通关' : `第 ${f.level} 关`
+}
+</script>
+
+<template>
+  <div class="level-select">
+    <p v-if="allCleared" class="ls-sub">🏆 已全部通关！可以重温任意关卡</p>
+    <p v-else-if="myLevel > 1" class="ls-sub">上次闯到<b class="text-primary">第 {{ myLevel }} 关</b>，从这里继续吧</p>
+    <p v-else class="ls-sub text-dim">从第 1 关开始你的闯关之旅</p>
+    <button class="btn btn-lg ls-continue" @click="emit('pick', continueLevel)">
+      {{ allCleared ? `🔄 重玩第 ${total} 关` : myLevel > 1 ? `▶ 继续第 ${myLevel} 关` : '▶ 开始闯关' }}
+    </button>
+    <!-- 关卡宫格 -->
+    <div class="ls-grid">
+      <button
+        v-for="i in total"
+        :key="i"
+        class="ls-cell"
+        :class="{ cleared: i < myLevel, current: i === myLevel && !allCleared, locked: i > myLevel }"
+        :disabled="i > myLevel"
+        :title="i > myLevel ? '通关前面的关卡后解锁' : `进入第 ${i} 关`"
+        @click="emit('pick', i)"
+      >
+        <span class="ls-state">{{ i < myLevel ? '⭐' : i === myLevel && !allCleared ? '📍' : i > myLevel ? '🔒' : '⭐' }}</span>
+        <span class="ls-num">{{ i }}</span>
+        <span v-if="names && names[i - 1]" class="ls-name">{{ names[i - 1] }}</span>
+        <!-- 该关的好友头像（最多 3 个 + 溢出数） -->
+        <span v-if="friendsAt(i).length" class="ls-favatars" :title="friendsAt(i).map((f) => f.nickname).join('、')">
+          <span v-for="f in friendsAt(i).slice(0, 3)" :key="f.user_id" class="ls-fa"><PixelAvatar :code="f.avatar" :size="14" /></span>
+          <span v-if="friendsAt(i).length > 3" class="ls-fmore">+{{ friendsAt(i).length - 3 }}</span>
+        </span>
+      </button>
+    </div>
+    <!-- 好友进度名单 -->
+    <div v-if="friends.length" class="ls-friends">
+      <span class="text-dim">好友进度：</span>
+      <span v-for="f in friends" :key="f.user_id" class="ls-fitem">
+        <PixelAvatar :code="f.avatar" :size="16" /> {{ f.nickname }} <b>{{ friendText(f) }}</b>
+      </span>
+    </div>
+    <p v-else class="ls-friends text-dim" style="font-size: 12px">还没有好友玩过这个游戏，喊朋友一起来闯关吧～</p>
+  </div>
+</template>
+
+<style scoped>
+.level-select {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  width: min(560px, 100%);
+}
+.ls-sub {
+  font-size: 14px;
+}
+.ls-continue {
+  min-width: 220px;
+}
+.ls-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
+  gap: 8px;
+  width: 100%;
+}
+.ls-cell {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  aspect-ratio: 1;
+  border-radius: calc(var(--radius) / 1.4);
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text);
+  cursor: pointer;
+  transition: all 0.15s;
+  padding: 4px;
+}
+.ls-cell:not(.locked):hover {
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+  transform: translateY(-2px);
+}
+.ls-cell.cleared {
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
+}
+.ls-cell.current {
+  border-color: var(--primary);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, var(--bg-card)), var(--bg-card));
+  box-shadow: var(--glow);
+}
+.ls-cell.locked {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.ls-state {
+  font-size: 14px;
+  line-height: 1;
+}
+.ls-num {
+  font-weight: 800;
+  font-size: 17px;
+  line-height: 1;
+}
+.ls-name {
+  font-size: 10px;
+  color: var(--text-dim);
+  line-height: 1;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ls-favatars {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  display: flex;
+  align-items: center;
+  background: color-mix(in srgb, var(--bg) 70%, transparent);
+  border-radius: 999px;
+  padding: 1px 4px;
+  font-size: 11px;
+  line-height: 1.2;
+}
+.ls-fa {
+  margin-left: -2px;
+}
+.ls-fmore {
+  font-size: 9px;
+  color: var(--text-dim);
+  margin-left: 1px;
+}
+.ls-friends {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--text);
+}
+.ls-fitem b {
+  color: var(--primary-2);
+}
+</style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 0000000..ff40ab1
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,290 @@
+<script setup>
+// 顶部导航栏：站点名、主导航（SVG 图标在上 + 文字在下的竖排布局）、消息入口（带未读角标）、积分、用户菜单
+// 小屏（≤900px）不再收进汉堡抽屉，而是隐藏文字仅留图标（title 悬浮提示文字）
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useUserStore } from '../stores/user'
+import { useThemeStore } from '../stores/theme'
+import { useChatStore } from '../stores/chat'
+import NavIcon from './NavIcon.vue'
+import PixelAvatar from './PixelAvatar.vue'
+
+const route = useRoute()
+const router = useRouter()
+const userStore = useUserStore()
+const themeStore = useThemeStore()
+const chatStore = useChatStore()
+
+// 主导航配置（icon 为 NavIcon 组件里的 SVG 名称）
+const navs = [
+  { name: 'lobby', path: '/', label: '大厅', icon: 'lobby' },
+  { name: 'center', path: '/center', label: '游戏中心', icon: 'center' },
+  { name: 'battle', path: '/battle', label: '联机对战', icon: 'battle' },
+  { name: 'signin', path: '/signin', label: '签到中心', icon: 'signin' },
+  { name: 'vip', path: '/vip', label: 'VIP', icon: 'vip' },
+  { name: 'rank', path: '/rank', label: '排行榜', icon: 'rank' },
+]
+
+const points = computed(() => userStore.user?.points ?? 0)
+
+// 未读私聊 + 待处理好友申请合计（角标）
+const msgBadge = computed(() => {
+  const n = chatStore.unread + chatStore.reqBadge
+  return n > 99 ? '99+' : n
+})
+
+// 当前路由是否命中某导航
+function isActive(path) {
+  return route.path === path || (path !== '/' && route.path.startsWith(path))
+}
+
+// 退出登录
+function logout() {
+  userStore.logout()
+  router.push('/login')
+}
+</script>
+
+<template>
+  <header class="nav">
+    <div class="nav-inner">
+      <router-link to="/" class="brand">
+        <span class="brand-icon"><NavIcon name="lobby" :size="26" /></span>
+        <span class="brand-name">{{ themeStore.siteName }}</span>
+      </router-link>
+      <!-- 主导航：图标在上、文字在下；小屏自动隐藏文字 -->
+      <nav class="links">
+        <router-link
+          v-for="n in navs"
+          :key="n.name"
+          :to="n.path"
+          class="link"
+          :class="{ active: isActive(n.path) }"
+          :title="n.label"
+        >
+          <NavIcon :name="n.icon" :size="22" class="link-icon" />
+          <span class="link-text">{{ n.label }}</span>
+        </router-link>
+        <router-link
+          to="/chat"
+          class="link msg-link"
+          :class="{ active: route.path.startsWith('/chat') }"
+          title="消息"
+        >
+          <NavIcon name="chat" :size="22" class="link-icon" />
+          <span class="link-text">消息</span>
+          <em v-if="chatStore.unread + chatStore.reqBadge > 0" class="msg-badge">{{ msgBadge }}</em>
+        </router-link>
+      </nav>
+      <div class="right">
+        <span class="points" title="当前积分"><NavIcon name="coin" :size="17" class="coin-icon" /> {{ points }}</span>
+        <router-link v-if="userStore.isAdmin" to="/admin" class="link tool-link" :class="{ active: route.path.startsWith('/admin') }" title="后台管理">
+          <NavIcon name="admin" :size="22" class="link-icon" />
+          <span class="link-text">后台</span>
+        </router-link>
+        <router-link to="/profile" class="user" title="个人中心">
+          <span class="avatar"><PixelAvatar :code="userStore.user?.avatar || 'px:01'" :size="30" /></span>
+          <span class="nickname">{{ userStore.user?.nickname }}</span>
+        </router-link>
+        <button class="link tool-link logout-link" title="退出登录" @click="logout">
+          <NavIcon name="logout" :size="22" class="link-icon" />
+          <span class="link-text">退出</span>
+        </button>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.nav {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border);
+}
+.nav-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 16px;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 800;
+  font-size: 17px;
+  white-space: nowrap;
+}
+.brand-icon {
+  display: flex;
+  align-items: center;
+  color: var(--primary);
+  filter: drop-shadow(var(--glow));
+}
+.brand-name {
+  background: linear-gradient(90deg, var(--primary), var(--accent));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.links {
+  display: flex;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+/* 竖排导航项：SVG 图标在上、11px 文字在下 */
+.link {
+  padding: 6px 12px 5px;
+  border-radius: calc(var(--radius) / 1.6);
+  color: var(--text-dim);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  transition: all 0.15s;
+  white-space: nowrap;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+.link-icon {
+  display: block;
+  flex-shrink: 0;
+}
+.link-text {
+  font-size: 11px;
+  line-height: 1;
+}
+.link:hover {
+  color: var(--text);
+  background: var(--bg-card);
+}
+.link.active {
+  color: #fff;
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  box-shadow: var(--glow);
+}
+.msg-link {
+  position: relative;
+}
+.msg-badge {
+  position: absolute;
+  top: 2px;
+  right: 4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: #e5484d;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 800;
+  font-style: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.points {
+  font-weight: 700;
+  color: var(--primary-2);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.coin-icon {
+  flex-shrink: 0;
+}
+.tool-link {
+  padding: 5px 9px 4px;
+}
+.tool-link.active {
+  color: #fff;
+}
+.logout-link:hover {
+  color: #ff8a8e;
+}
+.user {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.nickname {
+  font-size: 13px;
+  max-width: 90px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* 小屏：隐藏文字仅留图标（title 悬浮提示），不再使用汉堡抽屉 */
+@media (max-width: 900px) {
+  .nav-inner {
+    gap: 8px;
+    height: 56px;
+  }
+  .links {
+    gap: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .links::-webkit-scrollbar {
+    display: none;
+  }
+  .link {
+    padding: 8px 9px;
+  }
+  .link-text {
+    display: none;
+  }
+  .msg-badge {
+    top: 1px;
+    right: 0;
+  }
+  .nickname {
+    display: none;
+  }
+  .right {
+    gap: 6px;
+  }
+}
+@media (max-width: 420px) {
+  .brand-name {
+    display: none;
+  }
+  .points {
+    font-size: 13px;
+  }
+  .avatar {
+    width: 28px;
+    height: 28px;
+    font-size: 15px;
+  }
+}
+</style>
diff --git a/src/components/NavIcon.vue b/src/components/NavIcon.vue
new file mode 100644
index 0000000..fd40845
--- /dev/null
+++ b/src/components/NavIcon.vue
@@ -0,0 +1,204 @@
+<script setup>
+// 导航 SVG 图标集：线条描边风格，currentColor 随主题着色（替代 emoji）
+// 用法：<NavIcon name="lobby" :size="22" />
+defineProps({
+  name: { type: String, required: true },
+  size: { type: Number, default: 22 },
+})
+</script>
+
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.7"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <!-- 大厅：游戏手柄 -->
+    <template v-if="name === 'lobby'">
+      <path d="M6.5 7.5h11c2.6 0 4.5 2.1 4.5 4.7 0 2.4-1.4 4.9-3.2 4.9-1.1 0-1.9-.8-2.6-1.7-.6-.8-1.1-1.2-2-1.2h-4.4c-.9 0-1.4.4-2 1.2-.7.9-1.5 1.7-2.6 1.7C3.4 17.1 2 14.6 2 12.2c0-2.6 1.9-4.7 4.5-4.7Z" />
+      <path d="M7.6 10.2v3.4M5.9 11.9h3.4" />
+      <circle cx="15.6" cy="10.9" r="0.6" fill="currentColor" />
+      <circle cx="18.2" cy="12.9" r="0.6" fill="currentColor" />
+    </template>
+    <!-- 游戏中心：商店袋 -->
+    <template v-else-if="name === 'center'">
+      <path d="M5.5 8.5h13l-1 11.5a1.6 1.6 0 0 1-1.6 1.5H8.1a1.6 1.6 0 0 1-1.6-1.5l-1-11.5Z" />
+      <path d="M8.6 11V6.8a3.4 3.4 0 0 1 6.8 0V11" />
+    </template>
+    <!-- 联机对战：交叉双剑 -->
+    <template v-else-if="name === 'battle'">
+      <path d="M4 4l9.5 9.5M4 4v3.2M4 4h3.2" />
+      <path d="M20 4l-9.5 9.5M20 4v3.2M20 4h-3.2" />
+      <path d="M7.2 14.4l2.4 2.4M16.8 14.4l-2.4 2.4" />
+      <path d="M6 18.2l-1.6 1.6M18 18.2l1.6 1.6M5.2 16.4l2.4 2.4M18.8 16.4l-2.4 2.4" />
+    </template>
+    <!-- 签到中心：日历打勾 -->
+    <template v-else-if="name === 'signin'">
+      <rect x="3.5" y="5" width="17" height="15.5" rx="2.2" />
+      <path d="M3.5 9.6h17M8 2.8v4M16 2.8v4" />
+      <path d="M8.6 14.6l2.4 2.4 4.4-4.6" />
+    </template>
+    <!-- VIP：钻石 -->
+    <template v-else-if="name === 'vip'">
+      <path d="M7 4.5h10l4 5.5-9 9.8L3 10l4-5.5Z" />
+      <path d="M3 10h18M9.5 10L12 19.4 14.5 10M7 4.5l2.5 5.5L12 4.7l2.5 5.3 2.5-5.5" />
+    </template>
+    <!-- 排行榜：奖杯 -->
+    <template v-else-if="name === 'rank'">
+      <path d="M8 4h8v6a4 4 0 0 1-8 0V4Z" />
+      <path d="M8 5.4H5a0 0 0 0 0 0 0c0 2.8 1.2 4.6 3 5M16 5.4h3c0 2.8-1.2 4.6-3 5" />
+      <path d="M12 14v3M9 20.5h6M10 17.5h4l.6 3h-5.2l.6-3Z" />
+    </template>
+    <!-- 消息：对话气泡 -->
+    <template v-else-if="name === 'chat'">
+      <path d="M12 4c5 0 9 3.2 9 7.2s-4 7.2-9 7.2c-.9 0-1.8-.1-2.6-.3L5 20l1-3.4c-1.9-1.3-3-3.2-3-5.4C3 7.2 7 4 12 4Z" />
+      <circle cx="8.6" cy="11.2" r="0.7" fill="currentColor" />
+      <circle cx="12" cy="11.2" r="0.7" fill="currentColor" />
+      <circle cx="15.4" cy="11.2" r="0.7" fill="currentColor" />
+    </template>
+    <!-- 积分：金币 -->
+    <template v-else-if="name === 'coin'">
+      <circle cx="12" cy="12" r="8.5" />
+      <circle cx="12" cy="12" r="5.2" />
+      <path d="M12 9.4v5.2M10 10.6l4 2.8M14 10.6l-4 2.8" stroke-width="1.3" />
+    </template>
+    <!-- 后台：齿轮 -->
+    <template v-else-if="name === 'admin'">
+      <circle cx="12" cy="12" r="3.2" />
+      <path d="M12 2.8l1 2.6a7 7 0 0 1 2.3 1l2.7-.9 1.5 2.6-1.8 2.1a7 7 0 0 1 0 2.6l1.8 2.1-1.5 2.6-2.7-.9a7 7 0 0 1-2.3 1l-1 2.6-3-.001-1-2.6a7 7 0 0 1-2.3-1l-2.7.9-1.5-2.6 1.8-2.1a7 7 0 0 1 0-2.6L2.5 8.1 4 5.5l2.7.9a7 7 0 0 1 2.3-1l1-2.6h2Z" />
+    </template>
+    <!-- 个人中心：人像 -->
+    <template v-else-if="name === 'user'">
+      <circle cx="12" cy="8.2" r="4" />
+      <path d="M4.5 20.5c.8-4 3.9-6 7.5-6s6.7 2 7.5 6" />
+    </template>
+    <!-- 退出：门 + 箭头 -->
+    <template v-else-if="name === 'logout'">
+      <path d="M13.5 3.5H6.8A1.8 1.8 0 0 0 5 5.3v13.4a1.8 1.8 0 0 0 1.8 1.8h6.7" />
+      <path d="M10.5 12h9.5M17 8.5l3.5 3.5L17 15.5" />
+    </template>
+    <!-- ==== 以下为后台管理图标 ==== -->
+    <!-- 数据概览：柱状图 -->
+    <template v-else-if="name === 'stats'">
+      <path d="M3.5 20.5h17" />
+      <rect x="5.5" y="12" width="3.6" height="8.5" rx="1" />
+      <rect x="10.6" y="7" width="3.6" height="13.5" rx="1" />
+      <rect x="15.7" y="10" width="3.6" height="10.5" rx="1" />
+      <path d="M5 6.5l4-2.6 3.6 2 5-3.4" />
+    </template>
+    <!-- 主题设置：调色板 -->
+    <template v-else-if="name === 'palette'">
+      <path d="M12 3c5 0 9 3.6 9 8 0 2.8-2 4-4 4h-2.2c-1.2 0-1.9 1-1.4 2 .5 1 .1 2.6-1.4 2.9-.3.05-.7.1-1 .1-5 0-9-3.8-9-8.5S7 3 12 3Z" />
+      <circle cx="7.8" cy="10" r="1.1" fill="currentColor" stroke="none" />
+      <circle cx="12" cy="7.6" r="1.1" fill="currentColor" stroke="none" />
+      <circle cx="16.2" cy="10" r="1.1" fill="currentColor" stroke="none" />
+      <circle cx="8.6" cy="14.6" r="1.1" fill="currentColor" stroke="none" />
+    </template>
+    <!-- 用户管理：双人像 -->
+    <template v-else-if="name === 'users'">
+      <circle cx="9" cy="8.6" r="3.4" />
+      <path d="M3 20c.7-3.6 3.1-5.4 6-5.4s5.3 1.8 6 5.4" />
+      <path d="M15.4 5.8a3.4 3.4 0 0 1 0 5.7" />
+      <path d="M17.5 14.9c1.8.7 3 2.3 3.5 4.6" />
+    </template>
+    <!-- 订单管理：单据 -->
+    <template v-else-if="name === 'orders'">
+      <path d="M6 3.5h12v16.2l-2.4-1.5-2.4 1.5-1.2-.8-1.2.8-2.4-1.5L6 19.7V3.5Z" />
+      <path d="M9 8h6M9 11.4h6M9 14.8h3.6" />
+    </template>
+    <!-- AI 设置：机器人 -->
+    <template v-else-if="name === 'robot'">
+      <rect x="5" y="8" width="14" height="10.5" rx="2.6" />
+      <path d="M12 8V4.8M12 4.8a1.3 1.3 0 1 0-.01 0Z" />
+      <circle cx="9.2" cy="12.6" r="1" fill="currentColor" stroke="none" />
+      <circle cx="14.8" cy="12.6" r="1" fill="currentColor" stroke="none" />
+      <path d="M9.4 15.8h5.2M2.8 11.5v3.4M21.2 11.5v3.4" />
+    </template>
+    <!-- 局数：摇杆 -->
+    <template v-else-if="name === 'play'">
+      <circle cx="12" cy="7" r="3" />
+      <path d="M12 10v6M8 21h8M12 16c-2.6 0-4 1-4 5h8c0-4-1.4-5-4-5Z" />
+    </template>
+    <!-- 趋势：上升折线 -->
+    <template v-else-if="name === 'trend'">
+      <path d="M3.5 19.5h17" />
+      <path d="M4.5 15.5l4.6-4.8 3.4 3 6.4-7" />
+      <path d="M15.4 6.7h3.5v3.5" />
+    </template>
+    <!-- 在线：信号波 -->
+    <template v-else-if="name === 'pulse'">
+      <circle cx="12" cy="18" r="1.6" fill="currentColor" stroke="none" />
+      <path d="M8.5 14.6a5 5 0 0 1 7 0M5.8 11.6a9 9 0 0 1 12.4 0M3.2 8.6a13 13 0 0 1 17.6 0" />
+    </template>
+    <!-- 时长：时钟 -->
+    <template v-else-if="name === 'clock'">
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="M12 6.8V12l3.6 2.4" />
+    </template>
+    <!-- 平均时长：沙漏 -->
+    <template v-else-if="name === 'hourglass'">
+      <path d="M6.5 3.5h11M6.5 20.5h11" />
+      <path d="M7.5 3.5v3.2c0 2.6 2 3.8 4.5 5.3 2.5-1.5 4.5-2.7 4.5-5.3V3.5M7.5 20.5v-3.2c0-2.6 2-3.8 4.5-5.3 2.5 1.5 4.5 2.7 4.5 5.3v3.2" />
+    </template>
+    <!-- 热门：火焰 -->
+    <template v-else-if="name === 'flame'">
+      <path d="M12 21c-3.8 0-6.5-2.4-6.5-6 0-2.5 1.4-4.4 2.8-6 .5-.6 1.5-.3 1.6.5.1.7.3 1.4.8 1.9.2-2.6 1.3-5.6 3.5-7.4.6-.5 1.5 0 1.4.7-.1 1.6.3 3 1.6 4.6 1.2 1.5 2.3 3.3 2.3 5.7 0 3.6-2.7 6-6.5 6Z" />
+      <path d="M12 21c-1.7 0-3-1.2-3-3 0-1.4 1-2.4 2-3.5.5-.5 1.5-.5 2 0 1 1.1 2 2.1 2 3.5 0 1.8-1.3 3-3 3Z" />
+    </template>
+    <!-- 站点信息：标签牌 -->
+    <template v-else-if="name === 'tag'">
+      <path d="M11.6 3.5H5a1.5 1.5 0 0 0-1.5 1.5v6.6c0 .4.16.8.44 1.06l8.4 8.4a1.5 1.5 0 0 0 2.12 0l6.6-6.6a1.5 1.5 0 0 0 0-2.12l-8.4-8.4a1.5 1.5 0 0 0-1.06-.44Z" />
+      <circle cx="8" cy="8" r="1.4" />
+    </template>
+    <!-- 规则 AI：大脑 -->
+    <template v-else-if="name === 'brain'">
+      <path d="M11.5 4a3 3 0 0 0-3 3c-2 .2-3.5 1.7-3.5 3.7 0 1.1.4 2 1.1 2.7-.4.6-.6 1.3-.6 2.1 0 2.2 1.8 3.9 4 3.9.7 0 1.4-.2 2-.5V4Z" />
+      <path d="M12.5 4a3 3 0 0 1 3 3c2 .2 3.5 1.7 3.5 3.7 0 1.1-.4 2-1.1 2.7.4.6.6 1.3.6 2.1 0 2.2-1.8 3.9-4 3.9-.7 0-1.4-.2-2-.5V4Z" />
+      <path d="M9 9.5c.8.4 1.6.5 2.5.4M15 12.5c-.8-.4-1.6-.5-2.5-.4" stroke-width="1.2" />
+    </template>
+    <!-- DeepSeek：鲸鱼 -->
+    <template v-else-if="name === 'whale'">
+      <path d="M3 13.5c2.2 0 3.2-2 3.2-3.8 0-.8 1-1.1 1.5-.5.6.8 1 1.8 1 3 3-.3 7.3-.2 9.8 1.4 1.6 1 2.5 2.4 2.5 3.9-2.8 0-4.4 2-9.5 2-5.4 0-8.5-2.8-8.5-6Z" />
+      <path d="M16.5 12.2c.6-1.6 2-2.7 3.8-2.9M18 17.2c1-.7 1.7-1 3-1" stroke-width="1.4" />
+      <circle cx="7.6" cy="14.6" r="0.7" fill="currentColor" stroke="none" />
+    </template>
+    <!-- 轮播：图片切换 -->
+    <template v-else-if="name === 'carousel'">
+      <rect x="6" y="5.5" width="12" height="11" rx="1.8" />
+      <path d="M3 8v6M21 8v6" />
+      <circle cx="9.5" cy="19.5" r="0.8" fill="currentColor" stroke="none" />
+      <circle cx="12" cy="19.5" r="0.8" fill="currentColor" stroke="none" />
+      <circle cx="14.5" cy="19.5" r="0.8" fill="currentColor" stroke="none" />
+      <path d="M9.2 12.8l2-2.4 1.6 1.7 1.3-1.3 1.7 2H9.2Z" />
+    </template>
+    <!-- 保存：软盘 -->
+    <template v-else-if="name === 'save'">
+      <path d="M5.5 4.5h10.8l3.2 3.2v11.8a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-14a1 1 0 0 1 1-1Z" />
+      <path d="M8 4.5v4.6h7.2V4.5M8.4 20.5v-6h7.2v6" />
+    </template>
+    <!-- 测试连接：插头 -->
+    <template v-else-if="name === 'plug'">
+      <path d="M9 3.5v4M15 3.5v4" />
+      <path d="M6.5 7.5h11v3.4a5.5 5.5 0 0 1-11 0V7.5Z" />
+      <path d="M12 16.4v2.1a2.5 2.5 0 0 1-2.5 2.5H8" />
+    </template>
+    <!-- 下载 / 桌面版本 -->
+    <template v-else-if="name === 'download'">
+      <path d="M12 3.5v11" />
+      <path d="M8 11l4 4 4-4" />
+      <path d="M4.5 18.5h15" />
+    </template>
+    <!-- 上传 -->
+    <template v-else-if="name === 'upload'">
+      <path d="M12 15.5V4.5" />
+      <path d="M8 8l4-4 4 4" />
+      <path d="M4.5 18.5h15" />
+    </template>
+  </svg>
+</template>
diff --git a/src/components/PixelAvatar.vue b/src/components/PixelAvatar.vue
new file mode 100644
index 0000000..88d4f0e
--- /dev/null
+++ b/src/components/PixelAvatar.vue
@@ -0,0 +1,68 @@
+// 像素头像渲染组件：把 'px:NN' 编码画成像素图（8×8 网格放大，锐利无插值）
+// 兼容旧 emoji 数据：非像素编码时原样以文字显示，历史用户零迁移
+<script setup>
+import { computed } from 'vue'
+import { AVATAR_SHAPES, AVATAR_PALETTES, decodePixelAvatar } from '../games/pixelAvatars'
+
+const props = defineProps({
+  // 头像值：'px:NN' 像素编码 或 旧 emoji 字符
+  code: { type: String, default: '' },
+  // 渲染尺寸（px）
+  size: { type: Number, default: 32 },
+})
+
+const px = computed(() => decodePixelAvatar(props.code))
+
+// dataURL 缓存：同 code+size 只画一次（组件实例间不共享，同一实例多次渲染直接命中）
+const cache = new Map()
+function dataUrl(size) {
+  const key = props.code + '@' + size
+  if (cache.has(key)) return cache.get(key)
+  const p = px.value
+  if (!p) return ''
+  const shape = AVATAR_SHAPES[p.shape]
+  const pal = AVATAR_PALETTES[p.palette]
+  const cell = Math.max(1, Math.round(size / 8))
+  const real = cell * 8
+  const cv = document.createElement('canvas')
+  cv.width = real
+  cv.height = real
+  const ctx = cv.getContext('2d')
+  const colors = { 1: pal.c1, 2: pal.c2, 3: pal.c3, 4: '#ffffff', 5: '#1a1a24' }
+  shape.forEach((row, y) => {
+    for (let x = 0; x < 8; x++) {
+      const ch = row[x]
+      if (ch === '.') continue
+      ctx.fillStyle = colors[ch] || colors[1]
+      ctx.fillRect(x * cell, y * cell, cell, cell)
+    }
+  })
+  const url = cv.toDataURL()
+  cache.set(key, url)
+  return url
+}
+</script>
+
+<template>
+  <span class="px-avatar" :style="{ width: size + 'px', height: size + 'px', fontSize: Math.round(size * 0.6) + 'px' }">
+    <img v-if="px" :src="dataUrl(size)" :width="size" :height="size" alt="" class="px-img" />
+    <template v-else>{{ code || '🎮' }}</template>
+  </span>
+</template>
+
+<style scoped>
+.px-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.px-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  image-rendering: pixelated; /* 像素图放大不模糊 */
+}
+</style>
diff --git a/src/components/RoomInviteModal.vue b/src/components/RoomInviteModal.vue
new file mode 100644
index 0000000..2256430
--- /dev/null
+++ b/src/components/RoomInviteModal.vue
@@ -0,0 +1,168 @@
+// 全局房间邀请弹窗：好友房主邀请你时实时弹出（挂载在 App.vue，任何页面可见）
+// 接受 → 跳到对应房间页并自动入座；拒绝/超时 → 关闭
+<script setup>
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useBattleStore } from '../stores/battle'
+import { toast } from '../api/http'
+import PixelAvatar from './PixelAvatar.vue'
+
+const router = useRouter()
+const battleStore = useBattleStore()
+
+// 弹窗是否可见（由 store 的 pendingInvite 驱动）
+const show = ref(false)
+// 倒计时秒数（60 秒后自动关闭）
+const countdown = ref(60)
+let timer = null
+
+// 监听邀请：有新邀请就弹窗 + 启动 60s 倒计时
+watch(
+  () => battleStore.pendingInvite,
+  (inv) => {
+    if (!inv) { show.value = false; return }
+    show.value = true
+    countdown.value = 60
+    clearInterval(timer)
+    timer = setInterval(() => {
+      countdown.value--
+      if (countdown.value <= 0) dismiss()
+    }, 1000)
+  }
+)
+
+function dismiss() {
+  clearInterval(timer)
+  show.value = false
+  battleStore.pendingInvite = null
+}
+
+async function accept() {
+  const inv = battleStore.pendingInvite
+  if (!inv) return
+  // 必须先写入再跳转：目标页 onMounted 同步读取；若已在目标页则派发事件触发加入
+  sessionStorage.setItem('pending_join_code', inv.code)
+  if (inv.game && inv.game !== 'starve') {
+    sessionStorage.setItem('pending_join_game', inv.game)
+  } else {
+    sessionStorage.removeItem('pending_join_game')
+  }
+  dismiss()
+  try {
+    if (inv.game === 'starve') {
+      const already = router.currentRoute.value.path === '/play/starve'
+      await router.push('/play/starve')
+      toast(`正在加入 ${inv.host_name} 的房间…`, 'info')
+      if (already) window.dispatchEvent(new CustomEvent('nlg:pending-join'))
+    } else {
+      const already = router.currentRoute.value.path === '/battle/room'
+      await router.push('/battle/room')
+      if (already) window.dispatchEvent(new CustomEvent('nlg:pending-join'))
+    }
+  } catch (e) {
+    sessionStorage.removeItem('pending_join_code')
+    sessionStorage.removeItem('pending_join_game')
+    toast(e.message || '加入失败，请稍后再试')
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="invite-fade">
+      <div v-if="show && battleStore.pendingInvite" class="invite-mask">
+        <div class="invite-modal" @click.stop>
+          <div class="invite-icon"><PixelAvatar :code="battleStore.pendingInvite.host_avatar || 'px:01'" :size="48" /></div>
+          <h3>房间邀请</h3>
+          <p class="invite-line">
+            <b class="host-name">{{ battleStore.pendingInvite.host_name }}</b>
+            <span class="text-dim">邀请你加入</span>
+          </p>
+          <p class="invite-game">{{ battleStore.pendingInvite.game_name }}</p>
+          <p class="invite-code text-dim">邀请码 <b>{{ battleStore.pendingInvite.code }}</b></p>
+          <div class="invite-btns">
+            <button class="btn" @click="dismiss">稍后（{{ countdown }}s）</button>
+            <button class="btn btn-accent" @click="accept">接受邀请</button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.invite-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.invite-modal {
+  width: min(360px, calc(100vw - 48px));
+  background: var(--bg-panel, #1a1d3a);
+  border: 1px solid var(--border, #34386b);
+  border-radius: 16px;
+  padding: 26px 28px 22px;
+  text-align: center;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), var(--glow, 0 0 0 transparent);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+.invite-icon {
+  font-size: 44px;
+  filter: drop-shadow(var(--glow, 0 0 12px rgba(109, 111, 240, 0.4)));
+}
+.invite-line {
+  font-size: 14px;
+}
+.host-name {
+  color: var(--primary, #6d6ff0);
+}
+.invite-game {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 2px 0;
+}
+.invite-code {
+  font-size: 12px;
+}
+.invite-code b {
+  letter-spacing: 2px;
+  font-size: 14px;
+  color: var(--text, #e8e9f5);
+}
+.invite-btns {
+  display: flex;
+  gap: 10px;
+  margin-top: 12px;
+  width: 100%;
+}
+.invite-btns .btn {
+  flex: 1;
+}
+/* 出入场动画 */
+.invite-fade-enter-active,
+.invite-fade-leave-active {
+  transition: opacity 0.22s ease;
+}
+.invite-fade-enter-active .invite-modal,
+.invite-fade-leave-active .invite-modal {
+  transition: transform 0.22s ease;
+}
+.invite-fade-enter-from,
+.invite-fade-leave-to {
+  opacity: 0;
+}
+.invite-fade-enter-from .invite-modal {
+  transform: scale(0.9) translateY(12px);
+}
+.invite-fade-leave-to .invite-modal {
+  transform: scale(0.95);
+}
+</style>
diff --git a/src/components/VirtualList.vue b/src/components/VirtualList.vue
new file mode 100644
index 0000000..f7ec0ca
--- /dev/null
+++ b/src/components/VirtualList.vue
@@ -0,0 +1,101 @@
+<script setup>
+// 通用虚拟滚动列表：固定行高，只渲染可视区域 ± 缓冲行，支持超大数据量不卡顿
+// - maxHeight 限制容器最大高度，超出内部滚动
+// - 滚动接近底部时触发 reach-end（用于分批加载更多），items 变化后才允许再次触发
+// 用法：
+//   <VirtualList :items="list" :item-height="44" :max-height="560" @reach-end="loadMore">
+//     <template #default="{ item }">…一行的内容（高度须等于 item-height）…</template>
+//   </VirtualList>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+  items: { type: Array, required: true },
+  itemHeight: { type: Number, required: true }, // 每行固定高度 px
+  maxHeight: { type: Number, default: 520 }, // 容器最大高度 px
+  buffer: { type: Number, default: 8 }, // 可视区外上下各多渲染几行
+  keyField: { type: String, default: 'id' }, // 行 key 字段，空串则用索引
+})
+const emit = defineEmits(['reach-end'])
+
+const box = ref(null)
+const scrollTop = ref(0)
+// 触底后先「上锁」，等 items 数量变化（加载完成）再允许下一次触发，避免重复请求
+let endLocked = false
+
+watch(
+  () => props.items.length,
+  () => {
+    endLocked = false
+  }
+)
+
+const startIndex = computed(() => {
+  const i = Math.floor(scrollTop.value / props.itemHeight) - props.buffer
+  return Math.max(0, i)
+})
+const visibleCount = computed(() => Math.ceil(props.maxHeight / props.itemHeight) + props.buffer * 2)
+const visible = computed(() => props.items.slice(startIndex.value, startIndex.value + visibleCount.value))
+const totalHeight = computed(() => props.items.length * props.itemHeight)
+
+function rowKey(item, i) {
+  return props.keyField && item && item[props.keyField] !== undefined ? item[props.keyField] : startIndex.value + i
+}
+
+function onScroll(e) {
+  scrollTop.value = e.target.scrollTop
+  // 距底部不足 6 行时请求加载更多
+  if (!endLocked && e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight - props.itemHeight * 6) {
+    endLocked = true
+    emit('reach-end')
+  }
+}
+
+// 供外部在重新搜索/筛选后回到顶部
+function scrollToTop() {
+  if (box.value) box.value.scrollTop = 0
+  scrollTop.value = 0
+}
+defineExpose({ scrollToTop })
+</script>
+
+<template>
+  <div ref="box" class="vlist" :style="{ maxHeight: maxHeight + 'px' }" @scroll.passive="onScroll">
+    <div v-if="!items.length" class="vlist-empty">
+      <slot name="empty"><span class="text-dim">暂无数据</span></slot>
+    </div>
+    <div v-else class="vlist-phantom" :style="{ height: totalHeight + 'px' }">
+      <div class="vlist-body" :style="{ transform: `translateY(${startIndex * itemHeight}px)` }">
+        <div v-for="(item, i) in visible" :key="rowKey(item, i)" class="vlist-row" :style="{ height: itemHeight + 'px' }">
+          <slot :item="item" :index="startIndex + i" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.vlist {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  position: relative;
+}
+.vlist-phantom {
+  position: relative;
+  overflow: hidden;
+}
+.vlist-body {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  will-change: transform;
+}
+.vlist-row {
+  overflow: hidden;
+}
+.vlist-empty {
+  padding: 34px 0;
+  text-align: center;
+  font-size: 13px;
+}
+</style>
diff --git a/src/components/battle/BilliardsTable.vue b/src/components/battle/BilliardsTable.vue
new file mode 100644
index 0000000..aea9322
--- /dev/null
+++ b/src/components/battle/BilliardsTable.vue
@@ -0,0 +1,1365 @@
+<script setup>
+// 2D 台球桌（QQ台球式交互）：
+// 鼠标悬停/触屏拖动瞄准 + 辅助瞄准线（幽灵球碰撞预测：目标球分离方向、白球走向、合法性配色）
+// 在桌面按住蓄力、松开出杆（快速点按仅定位不出杆），拟真球杆带拉杆/击打动画
+// 支持 ←→ 键与微调按钮做精细角度调整、空格蓄力；击球仍由服务端权威模拟，本组件负责交互与回放
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useBattleStore } from '../../stores/battle'
+
+const battle = useBattleStore()
+const st = computed(() => battle.roomState)
+const bill = computed(() => st.value?.bill)
+const mySeat = computed(() => st.value?.my_seat ?? -1)
+const myTurn = computed(() => bill.value?.turn === mySeat.value)
+
+// 与服务端一致的桌面常量
+const W = 800
+const H = 400
+const BALL_R = 10
+const RAIL = 26 // 木边框宽度（画布外扩）
+const CUE_LEN = 250 // 球杆长度
+
+// 球面颜色（1-7 全色与 9-15 花色同色系，8 黑）
+const BALL_COLORS = {
+  1: '#ffd400', 2: '#2f6fff', 3: '#ff3b30', 4: '#9b59b6', 5: '#ff8c00', 6: '#12b25f', 7: '#a03232',
+  8: '#16161c', 9: '#ffd400', 10: '#2f6fff', 11: '#ff3b30', 12: '#9b59b6', 13: '#ff8c00', 14: '#12b25f', 15: '#a03232',
+}
+// 袋口位置与捕获半径（与服务端一致：角袋 r26、中袋 r24 且中心偏出桌面 4px）
+const POCKETS = [
+  [0, 0, 26], [W, 0, 26], [0, H, 26], [W, H, 26], [W / 2, -4, 24], [W / 2, H + 4, 24],
+]
+
+const canvasRef = ref(null)
+const barRef = ref(null)
+let ctx = null
+let rafId = 0
+
+// —— 回放动画状态 ——
+const playing = ref(false)
+let animFrames = null
+let animInterval = 50
+let animStart = 0
+
+// —— 瞄准与蓄力状态 ——
+const aimAngle = ref(Math.PI) // 持久瞄准角（弧度），换回合时自动指向最近目标球
+const power = ref(55) // 当前力度 10-100
+const charging = ref(false) // 是否正在按住蓄力
+const shooting = ref(false) // 已出杆等待服务端回放（防止重复击球）
+let chargeT0 = 0 // 蓄力开始时间戳
+let powerBefore = 55 // 蓄力前的力度（快速点按时恢复）
+let pressT0 = 0 // 按下时间戳（区分点按与蓄力）
+let pressIsTouch = false // 本次按下是否为触屏（触屏拖动只瞄准不蓄力）
+let strikePull = 0 // 出杆瞬间的拉杆距离（击打动画用）
+let strikeT0 = 0 // 出杆动画开始时间戳
+let fineTimer = 0 // 微调按钮长按定时器
+let barDragging = false // 力度条拖动中
+let shootGuard = 0 // 出杆保险丝：服务端无响应时解除锁定
+
+const canAim = computed(
+  () => myTurn.value && !playing.value && !shooting.value && bill.value?.phase === 'aim'
+)
+
+// —— 进球特效与击球人横幅状态 ——
+const fxList = [] // 活跃特效（canvas 绘制，非响应式）
+let prevBallMap = null // 回放中上一渲染帧的在桌球位置（检测落袋用）
+let cueRespawnPending = false // 本杆白球落袋，回放结束后在重置点做提示
+const banner = ref(null) // 击球人切换横幅 {text, cls}
+let bannerTimer = 0
+let foulTimer = 0 // 犯规横幅后延迟播报换人的定时器
+let curAnimMeta = null // 当前播放中回放的元数据（shooter/foul/foul_reason）
+let lastShownTurn = -1 // 已播报过的击球座位
+let lastShots = -1 // 已处理过的杆数（识别连杆）
+
+// —— 回合倒计时（服务端 deadline 为 unix 秒） ——
+const now = ref(Math.floor(Date.now() / 1000))
+let clockTimer = 0
+const countdown = computed(() => Math.max(0, (st.value?.deadline || 0) - now.value))
+
+// 我的分组说明
+const groupText = computed(() => {
+  const b = bill.value
+  if (!b) return ''
+  if (mySeat.value > 1 || mySeat.value < 0) return '观战中'
+  if (b.cleared?.[mySeat.value]) return '已清台 → 目标：黑八 8️⃣'
+  if (b.my_group === 1) return '你的目标：全色球（1-7）'
+  if (b.my_group === 2) return '你的目标：花色球（9-15）'
+  return '分组未定：先打进任意彩球'
+})
+// 合法目标球集合：决定预测线绿/红配色（未分组时黑八不可打）
+const legalSet = computed(() => {
+  const b = bill.value
+  const s = new Set()
+  if (!b) return s
+  if (b.cleared?.[mySeat.value]) {
+    s.add(8)
+    return s
+  }
+  if (b.my_group === 1) for (let i = 1; i <= 7; i++) s.add(i)
+  else if (b.my_group === 2) for (let i = 9; i <= 15; i++) s.add(i)
+  else for (let i = 1; i <= 15; i++) if (i !== 8) s.add(i)
+  return s
+})
+// 已落袋展示（白球除外）
+const pottedList = computed(() =>
+  (bill.value?.balls || []).filter((b) => !b.on && b.id !== 0).map((b) => b.id).sort((a, b) => a - b)
+)
+const seatName = (i) => st.value?.seats?.[i]?.name || `玩家${i + 1}`
+
+// —— 双方目标球展示（进球后消失） ——
+// miniBallStyle 迷你球外观：全色纯色底、花色上下白条纹、黑八近黑
+function miniBallStyle(id) {
+  const c = BALL_COLORS[id]
+  if (id >= 9) {
+    return { background: `linear-gradient(to bottom, #f2f2f2 0 20%, ${c} 20% 80%, #f2f2f2 80% 100%)` }
+  }
+  return { background: c }
+}
+const seatGroup = (s) => bill.value?.groups?.[s] || 0
+// tgRemain 某座位组内还在桌面上的球
+function tgRemain(s) {
+  const grp = seatGroup(s)
+  if (!grp) return []
+  const ids = grp === 1 ? [1, 2, 3, 4, 5, 6, 7] : [9, 10, 11, 12, 13, 14, 15]
+  const on = new Set((bill.value?.balls || []).filter((b) => b.on).map((b) => b.id))
+  return ids.filter((id) => on.has(id))
+}
+function tgLabel(s) {
+  if (mySeat.value === 0 || mySeat.value === 1) return s === mySeat.value ? '你的目标' : '对方目标'
+  return seatName(s)
+}
+// 展示顺序：自己在前；观战按座位序
+const tgSeats = computed(() => (mySeat.value === 0 || mySeat.value === 1 ? [mySeat.value, 1 - mySeat.value] : [0, 1]))
+
+// 当前应渲染的球位：动画播放时取插值帧，否则取服务端状态
+function ballsForRender() {
+  if (playing.value && animFrames) {
+    const f = (performance.now() - animStart) / animInterval
+    const i = Math.min(Math.floor(f), animFrames.length - 1)
+    const t = Math.min(f - i, 1)
+    const cur = animFrames[i]
+    const next = animFrames[Math.min(i + 1, animFrames.length - 1)]
+    const nextMap = {}
+    for (const [id, x, y] of next) nextMap[id] = [x, y]
+    return cur.map(([id, x, y]) => {
+      const n = nextMap[id]
+      return n ? { id, x: x + (n[0] - x) * t, y: y + (n[1] - y) * t } : { id, x, y }
+    })
+  }
+  return (bill.value?.balls || []).filter((b) => b.on)
+}
+
+// —— 瞄准预测：白球沿瞄准角扫掠，找最先命中的球或库边 ——
+// 与服务端等质量碰撞模型一致：目标球沿连心线方向弹出，白球保留切向分量
+function computeGuide(cue, balls, ang) {
+  const dx = Math.cos(ang)
+  const dy = Math.sin(ang)
+  let bestT = Infinity
+  let hit = null
+  for (const b of balls) {
+    if (b.id === 0) continue
+    const fx = b.x - cue.x
+    const fy = b.y - cue.y
+    const proj = fx * dx + fy * dy
+    if (proj <= 0) continue
+    const perp2 = fx * fx + fy * fy - proj * proj
+    const rr = BALL_R * 2 * (BALL_R * 2)
+    if (perp2 >= rr) continue
+    const t = Math.max(0, proj - Math.sqrt(rr - perp2))
+    if (t < bestT) {
+      bestT = t
+      hit = b
+    }
+  }
+  if (hit) {
+    const gx = cue.x + dx * bestT
+    const gy = cue.y + dy * bestT
+    let nx = hit.x - gx
+    let ny = hit.y - gy
+    const nd = Math.hypot(nx, ny) || 1
+    nx /= nd
+    ny /= nd
+    // 白球击后走向 = 原方向去掉法向分量（切向），大小反映偏转后动量占比
+    const dot = dx * nx + dy * ny
+    const tx = dx - dot * nx
+    const ty = dy - dot * ny
+    const tlen = Math.hypot(tx, ty)
+    return { type: 'ball', gx, gy, hit, nx, ny, tx, ty, tlen }
+  }
+  // 未命中球：找最先碰到的库边（球心到达距边 BALL_R 处）
+  let t = Infinity
+  let axis = ''
+  if (dx < 0) { const v = (BALL_R - cue.x) / dx; if (v > 0 && v < t) { t = v; axis = 'x' } }
+  if (dx > 0) { const v = (W - BALL_R - cue.x) / dx; if (v > 0 && v < t) { t = v; axis = 'x' } }
+  if (dy < 0) { const v = (BALL_R - cue.y) / dy; if (v > 0 && v < t) { t = v; axis = 'y' } }
+  if (dy > 0) { const v = (H - BALL_R - cue.y) / dy; if (v > 0 && v < t) { t = v; axis = 'y' } }
+  if (!isFinite(t)) return null
+  const gx = cue.x + dx * t
+  const gy = cue.y + dy * t
+  return { type: 'cushion', gx, gy, rx: axis === 'x' ? -dx : dx, ry: axis === 'y' ? -dy : dy }
+}
+
+// 绘制一颗球（花色球带白底色带，黑八带白圈数字）
+function drawBall(b) {
+  const { id, x, y } = b
+  // 桌面投影
+  ctx.beginPath()
+  ctx.ellipse(x + 2, y + 3, BALL_R, BALL_R * 0.9, 0, 0, Math.PI * 2)
+  ctx.fillStyle = 'rgba(0,0,0,0.25)'
+  ctx.fill()
+  ctx.save()
+  ctx.beginPath()
+  ctx.arc(x, y, BALL_R, 0, Math.PI * 2)
+  ctx.fillStyle = id === 0 ? '#f4f4f4' : BALL_COLORS[id]
+  ctx.fill()
+  if (id >= 9) {
+    // 花色球：上下白色条带
+    ctx.clip()
+    ctx.fillStyle = '#f4f4f4'
+    ctx.fillRect(x - BALL_R, y - BALL_R, BALL_R * 2, BALL_R * 0.55)
+    ctx.fillRect(x - BALL_R, y + BALL_R * 0.45, BALL_R * 2, BALL_R * 0.55)
+  }
+  ctx.restore()
+  if (id > 0) {
+    // 号码小圆
+    ctx.beginPath()
+    ctx.arc(x, y, 4.6, 0, Math.PI * 2)
+    ctx.fillStyle = '#fff'
+    ctx.fill()
+    ctx.fillStyle = '#111'
+    ctx.font = 'bold 7px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(String(id), x, y + 0.5)
+  }
+  // 高光
+  ctx.beginPath()
+  ctx.arc(x - 3, y - 3, 2.2, 0, Math.PI * 2)
+  ctx.fillStyle = 'rgba(255,255,255,0.55)'
+  ctx.fill()
+}
+
+// 绘制桌面：木框、颗星定位点、台呢、袋口、置球点
+function drawTable() {
+  // 木边框（带纵向渐变）
+  const rail = ctx.createLinearGradient(0, -RAIL, 0, H + RAIL)
+  rail.addColorStop(0, '#6b4423')
+  rail.addColorStop(0.5, '#54341a')
+  rail.addColorStop(1, '#6b4423')
+  ctx.fillStyle = rail
+  ctx.fillRect(-RAIL, -RAIL, W + RAIL * 2, H + RAIL * 2)
+  // 颗星定位点（钻石标）
+  ctx.fillStyle = 'rgba(255,255,255,0.45)'
+  for (const fx of [0.25, 0.75]) {
+    for (const ry of [-RAIL / 2, H + RAIL / 2]) {
+      ctx.beginPath()
+      ctx.arc(W * fx, ry, 2.4, 0, Math.PI * 2)
+      ctx.fill()
+    }
+  }
+  for (const rx of [-RAIL / 2, W + RAIL / 2]) {
+    ctx.beginPath()
+    ctx.arc(rx, H / 2, 2.4, 0, Math.PI * 2)
+    ctx.fill()
+  }
+  // 台呢（中心微亮的径向渐变）
+  const cloth = ctx.createRadialGradient(W / 2, H / 2, 60, W / 2, H / 2, 520)
+  cloth.addColorStop(0, '#12934e')
+  cloth.addColorStop(1, '#0a6b36')
+  ctx.fillStyle = cloth
+  ctx.fillRect(0, 0, W, H)
+  // 开球线与置球点
+  ctx.strokeStyle = 'rgba(255,255,255,0.14)'
+  ctx.beginPath()
+  ctx.moveTo(200, 0)
+  ctx.lineTo(200, H)
+  ctx.stroke()
+  ctx.fillStyle = 'rgba(255,255,255,0.22)'
+  for (const [sx, sy] of [[200, 200], [560, 200]]) {
+    ctx.beginPath()
+    ctx.arc(sx, sy, 2.6, 0, Math.PI * 2)
+    ctx.fill()
+  }
+  // 袋口（深洞 + 内缘高光）
+  for (const [px, py, pr] of POCKETS) {
+    ctx.beginPath()
+    ctx.arc(px, py, pr - 4, 0, Math.PI * 2)
+    ctx.fillStyle = '#050509'
+    ctx.fill()
+    ctx.beginPath()
+    ctx.arc(px, py, pr - 4, 0, Math.PI * 2)
+    ctx.strokeStyle = 'rgba(216,170,90,0.5)'
+    ctx.lineWidth = 2.5
+    ctx.stroke()
+  }
+}
+
+// 绘制瞄准辅助：白球路径虚线 + 幽灵球 + 目标球分离方向 + 白球走向 / 库边反弹预览
+function drawGuide(cue, balls) {
+  const guide = computeGuide(cue, balls, aimAngle.value)
+  if (!guide) return
+  ctx.save()
+  // 白球行进虚线（从球缘起画，不压住球体）
+  const dx = Math.cos(aimAngle.value)
+  const dy = Math.sin(aimAngle.value)
+  ctx.strokeStyle = 'rgba(255,255,255,0.7)'
+  ctx.setLineDash([6, 6])
+  ctx.lineWidth = 1.6
+  ctx.beginPath()
+  ctx.moveTo(cue.x + dx * (BALL_R + 2), cue.y + dy * (BALL_R + 2))
+  ctx.lineTo(guide.gx, guide.gy)
+  ctx.stroke()
+  ctx.setLineDash([])
+  if (guide.type === 'ball') {
+    const legal = legalSet.value.has(guide.hit.id)
+    const color = legal ? 'rgba(120,255,170,0.95)' : 'rgba(255,110,110,0.95)'
+    // 幽灵球（白球撞击位置）
+    ctx.strokeStyle = 'rgba(255,255,255,0.85)'
+    ctx.setLineDash([4, 4])
+    ctx.lineWidth = 1.4
+    ctx.beginPath()
+    ctx.arc(guide.gx, guide.gy, BALL_R, 0, Math.PI * 2)
+    ctx.stroke()
+    ctx.setLineDash([])
+    // 目标球高亮环
+    ctx.strokeStyle = legal ? 'rgba(190,255,200,0.7)' : 'rgba(255,170,170,0.7)'
+    ctx.lineWidth = 2
+    ctx.beginPath()
+    ctx.arc(guide.hit.x, guide.hit.y, BALL_R + 3.5, 0, Math.PI * 2)
+    ctx.stroke()
+    // 目标球分离方向（带箭头）
+    const L = 62
+    const ex = guide.hit.x + guide.nx * L
+    const ey = guide.hit.y + guide.ny * L
+    ctx.strokeStyle = color
+    ctx.lineWidth = 2.4
+    ctx.beginPath()
+    ctx.moveTo(guide.hit.x + guide.nx * (BALL_R + 1), guide.hit.y + guide.ny * (BALL_R + 1))
+    ctx.lineTo(ex, ey)
+    ctx.stroke()
+    const aa = Math.atan2(guide.ny, guide.nx)
+    ctx.fillStyle = color
+    ctx.beginPath()
+    ctx.moveTo(ex + Math.cos(aa) * 8, ey + Math.sin(aa) * 8)
+    ctx.lineTo(ex + Math.cos(aa + 2.5) * 7, ey + Math.sin(aa + 2.5) * 7)
+    ctx.lineTo(ex + Math.cos(aa - 2.5) * 7, ey + Math.sin(aa - 2.5) * 7)
+    ctx.closePath()
+    ctx.fill()
+    // 白球击后走向（切向 + 高低杆跟进/回拉预估）：高杆偏向目标球方向、低杆反向
+    const wx = guide.tx + guide.nx * spin.value.y * 0.55
+    const wy = guide.ty + guide.ny * spin.value.y * 0.55
+    const wlen = Math.hypot(wx, wy)
+    if (wlen > 0.12) {
+      ctx.strokeStyle = 'rgba(255,255,255,0.55)'
+      ctx.lineWidth = 1.5
+      ctx.beginPath()
+      ctx.moveTo(guide.gx, guide.gy)
+      ctx.lineTo(
+        guide.gx + (wx / wlen) * 40 * Math.min(wlen, 1),
+        guide.gy + (wy / wlen) * 40 * Math.min(wlen, 1)
+      )
+      ctx.stroke()
+    }
+  } else {
+    // 库边反弹预览
+    ctx.fillStyle = 'rgba(255,255,255,0.8)'
+    ctx.beginPath()
+    ctx.arc(guide.gx, guide.gy, 3, 0, Math.PI * 2)
+    ctx.fill()
+    ctx.strokeStyle = 'rgba(255,255,255,0.4)'
+    ctx.setLineDash([5, 6])
+    ctx.lineWidth = 1.4
+    ctx.beginPath()
+    ctx.moveTo(guide.gx, guide.gy)
+    ctx.lineTo(guide.gx + guide.rx * 52, guide.gy + guide.ry * 52)
+    ctx.stroke()
+  }
+  ctx.restore()
+}
+
+// —— 进球特效 ——
+// spawnRingFx 在指定位置生成一组特效：扩散光环 + 彩色粒子 + 上浮文字
+function spawnRingFx(x, y, color, label, opts = {}) {
+  const parts = []
+  const n = opts.parts ?? 16
+  for (let i = 0; i < n; i++) {
+    parts.push({ ang: Math.random() * Math.PI * 2, sp: 60 + Math.random() * 160, r: 1.5 + Math.random() * 2.2 })
+  }
+  fxList.push({ t0: performance.now(), x, y, color, label, parts, bad: !!opts.bad, big: !!opts.big })
+}
+// spawnPotFx 球落袋：定位最近袋口，按球色/黑八/白球区分特效
+function spawnPotFx(id, pos) {
+  let best = POCKETS[0]
+  let bd = Infinity
+  for (const p of POCKETS) {
+    const d = Math.hypot(pos.x - p[0], pos.y - p[1])
+    if (d < bd) {
+      bd = d
+      best = p
+    }
+  }
+  if (id === 0) {
+    cueRespawnPending = true
+    spawnRingFx(best[0], best[1], '#ff6b6b', '白球落袋 犯规！', { bad: true, parts: 20 })
+  } else if (id === 8) {
+    spawnRingFx(best[0], best[1], '#ffd76a', '黑八落袋！', { big: true, parts: 30 })
+  } else {
+    spawnRingFx(best[0], best[1], BALL_COLORS[id], `${id} 号球进袋`, { parts: 16 })
+  }
+}
+// detectPots 回放中比对相邻渲染帧，发现球消失即在其最后位置触发落袋特效
+function detectPots(balls) {
+  if (!playing.value) {
+    prevBallMap = null
+    return
+  }
+  const cur = {}
+  for (const b of balls) cur[b.id] = b
+  if (prevBallMap) {
+    for (const id in prevBallMap) {
+      if (!(id in cur)) spawnPotFx(Number(id), prevBallMap[id])
+    }
+  }
+  prevBallMap = cur
+}
+// drawFx 绘制并推进全部活跃特效（约 0.85 秒生命周期）
+function drawFx() {
+  const nowT = performance.now()
+  for (let i = fxList.length - 1; i >= 0; i--) {
+    const f = fxList[i]
+    const t = (nowT - f.t0) / 850
+    if (t >= 1) {
+      fxList.splice(i, 1)
+      continue
+    }
+    ctx.save()
+    // 扩散光环（黑八双环）
+    ctx.globalAlpha = 1 - t
+    ctx.strokeStyle = f.bad ? '#ff5a5a' : f.color
+    ctx.lineWidth = 3 * (1 - t) + 0.6
+    ctx.beginPath()
+    ctx.arc(f.x, f.y, 12 + t * (f.big ? 52 : 34), 0, Math.PI * 2)
+    ctx.stroke()
+    if (f.big) {
+      ctx.beginPath()
+      ctx.arc(f.x, f.y, 6 + t * 30, 0, Math.PI * 2)
+      ctx.stroke()
+    }
+    // 粒子爆散（缓出）
+    for (const p of f.parts) {
+      const d = p.sp * t * (1.6 - t)
+      ctx.beginPath()
+      ctx.arc(f.x + Math.cos(p.ang) * d, f.y + Math.sin(p.ang) * d, p.r * (1 - t), 0, Math.PI * 2)
+      ctx.fillStyle = f.bad ? '#ff8080' : f.color
+      ctx.fill()
+    }
+    // 上浮文字（顶部袋口向下浮，避免飘出画布）
+    if (f.label) {
+      const down = f.y < H / 2
+      const lx = Math.min(Math.max(f.x, 76), W - 76)
+      const ly = down ? f.y + 34 + t * 22 : f.y - 24 - t * 22
+      ctx.globalAlpha = t < 0.15 ? t / 0.15 : 1 - t
+      ctx.font = `bold ${f.big ? 18 : 14}px sans-serif`
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
+      ctx.lineWidth = 3.5
+      ctx.strokeStyle = 'rgba(0,0,0,0.75)'
+      ctx.fillStyle = f.bad ? '#ff8a8a' : '#ffe08a'
+      ctx.strokeText(f.label, lx, ly)
+      ctx.fillText(f.label, lx, ly)
+    }
+    ctx.restore()
+  }
+}
+
+// —— 击球人切换横幅 ——
+function showBanner(text, cls) {
+  banner.value = { text, cls }
+  clearTimeout(bannerTimer)
+  bannerTimer = setTimeout(() => {
+    banner.value = null
+  }, 1600)
+}
+// maybeAnnounceTurn 回放全部播完后播报当前击球人（换人才播，连杆走 playing 侦听）
+function maybeAnnounceTurn() {
+  const b = bill.value
+  if (!b || b.phase !== 'aim' || playing.value || battle.billAnims.length) return
+  if (st.value?.status !== 'playing') return
+  if (b.turn === lastShownTurn) return
+  lastShownTurn = b.turn
+  if (b.turn === mySeat.value) showBanner('🎱 轮到你击球', 'mine')
+  else showBanner(`${seatName(b.turn)} 击球`, 'other')
+}
+
+// 绘制球杆：沿瞄准反方向放置，蓄力时后拉、出杆时前刺
+function drawCue(cue, tipDist) {
+  const ang = aimAngle.value
+  ctx.save()
+  ctx.translate(cue.x, cue.y)
+  ctx.rotate(ang)
+  // 分段锥形球杆：先影后杆
+  const seg = (x1, x2, w1, w2, fill) => {
+    ctx.beginPath()
+    ctx.moveTo(x1, -w1)
+    ctx.lineTo(x2, -w2)
+    ctx.lineTo(x2, w2)
+    ctx.lineTo(x1, w1)
+    ctx.closePath()
+    ctx.fillStyle = fill
+    ctx.fill()
+  }
+  // 投影
+  ctx.save()
+  ctx.translate(2, 3.5)
+  ctx.globalAlpha = 0.22
+  seg(-tipDist, -tipDist - CUE_LEN, 2.4, 4.8, '#000')
+  ctx.restore()
+  // 皮头 / 先角 / 前节（木纹渐变）/ 后把
+  seg(-tipDist, -tipDist - 5, 2.3, 2.4, '#4d7fb3')
+  seg(-tipDist - 5, -tipDist - 12, 2.4, 2.6, '#efe6d4')
+  const wood = ctx.createLinearGradient(-tipDist - 12, 0, -tipDist - 170, 0)
+  wood.addColorStop(0, '#e6c491')
+  wood.addColorStop(1, '#9c6b33')
+  seg(-tipDist - 12, -tipDist - 170, 2.6, 3.9, wood)
+  seg(-tipDist - 170, -tipDist - CUE_LEN, 3.9, 4.7, '#31200f')
+  // 后把装饰环
+  ctx.fillStyle = '#d4b06a'
+  ctx.fillRect(-tipDist - 170, -4, -3, 8)
+  ctx.restore()
+}
+
+// 当前球杆皮头离白球的距离（含蓄力后拉与出杆动画）
+function cueTipDist() {
+  if (shooting.value) {
+    const t = Math.min((performance.now() - strikeT0) / 85, 1)
+    return 4 + (strikePull - 4) * (1 - t)
+  }
+  return 16 + (charging.value ? power.value * 0.88 : 0)
+}
+
+// 主绘制
+function draw() {
+  if (!ctx) return
+  ctx.clearRect(-RAIL, -RAIL, W + RAIL * 2, H + RAIL * 2)
+  drawTable()
+  const balls = ballsForRender()
+  detectPots(balls)
+  const cue = balls.find((b) => b.id === 0)
+  for (const b of balls) drawBall(b)
+  if (cue && canAim.value) drawGuide(cue, balls)
+  drawFx()
+  if (cue && (canAim.value || shooting.value)) drawCue(cue, cueTipDist())
+}
+
+// 常驻渲染循环：驱动蓄力值、动画播放结束后自动消费下一条队列
+function loop() {
+  if (charging.value) {
+    // 蓄力值 10→100 往返摆动（约 0.95 秒拉满），松手即以当前值出杆
+    const span = 90
+    const ph = (((performance.now() - chargeT0) / 1000) * 96) % (span * 2)
+    power.value = Math.round(10 + (ph <= span ? ph : span * 2 - ph))
+  }
+  if (playing.value && animFrames) {
+    const total = (animFrames.length - 1) * animInterval
+    if (performance.now() - animStart >= total) {
+      playing.value = false
+      animFrames = null
+      startNextAnim()
+    }
+  }
+  draw()
+  rafId = requestAnimationFrame(loop)
+}
+
+// 取出队列中的下一条回放动画开始播放
+function startNextAnim() {
+  if (playing.value || !battle.billAnims.length) return
+  const anim = battle.billAnims.shift()
+  curAnimMeta = anim
+  animFrames = anim.frames || []
+  animInterval = anim.interval_ms || 50
+  animStart = performance.now()
+  playing.value = animFrames.length > 1
+}
+watch(() => battle.billAnims.length, startNextAnim)
+
+// —— 交互：瞄准 / 蓄力 / 出杆 ——
+// 指针位置换算画布坐标（画布被 CSS 缩放）
+function toCanvasPoint(e) {
+  const rect = canvasRef.value.getBoundingClientRect()
+  const scaleX = (W + RAIL * 2) / rect.width
+  const scaleY = (H + RAIL * 2) / rect.height
+  return { x: (e.clientX - rect.left) * scaleX - RAIL, y: (e.clientY - rect.top) * scaleY - RAIL }
+}
+function aimAt(pt) {
+  const cue = (bill.value?.balls || []).find((b) => b.id === 0 && b.on)
+  if (!cue) return
+  const dx = pt.x - cue.x
+  const dy = pt.y - cue.y
+  if (Math.hypot(dx, dy) < 2) return
+  aimAngle.value = Math.atan2(dy, dx)
+}
+function onPointerMove(e) {
+  if (!canAim.value) return
+  // 蓄力中也允许继续瞄准：按住拖动可实时修正角度，松手才出杆
+  if (pressIsTouch || e.pointerType !== 'touch' || e.buttons > 0) aimAt(toCanvasPoint(e))
+}
+function onPointerDown(e) {
+  if (!canAim.value) return
+  // 只响应左键/触摸：右键（呼出菜单会吞掉 pointerup）不进入蓄力，避免卡住
+  if (e.pointerType !== 'touch' && e.button !== 0) return
+  canvasRef.value.setPointerCapture?.(e.pointerId)
+  pressT0 = performance.now()
+  pressIsTouch = e.pointerType === 'touch'
+  if (pressIsTouch) {
+    // 触屏：按住拖动 = 瞄准，蓄力交给「按住蓄力」按钮
+    aimAt(toCanvasPoint(e))
+    return
+  }
+  aimAt(toCanvasPoint(e))
+  startCharge()
+}
+function onPointerUp(e) {
+  if (pressIsTouch) {
+    pressIsTouch = false
+    return
+  }
+  if (!charging.value) return
+  const dur = performance.now() - pressT0
+  charging.value = false
+  if (dur < 160) {
+    // 快速点按 = 全力一杆（QQ台球经典操作）
+    power.value = 100
+    fire(100)
+    return
+  }
+  fire(power.value)
+}
+function onPointerCancel() {
+  pressIsTouch = false
+  if (charging.value) {
+    charging.value = false
+    power.value = powerBefore
+  }
+}
+function startCharge() {
+  if (!canAim.value || charging.value) return
+  powerBefore = power.value
+  chargeT0 = performance.now()
+  charging.value = true
+}
+function fire(pw) {
+  if (!canAim.value) return
+  const cue = (bill.value?.balls || []).find((b) => b.id === 0 && b.on)
+  if (!cue) return
+  strikePull = 16 + pw * 0.88
+  strikeT0 = performance.now()
+  shooting.value = true
+  battle.billShot(aimAngle.value, Math.round(pw), spin.value.x, spin.value.y)
+  // 一杆打完杆法回中，避免下一杆误带旋转
+  spinReset()
+  // 保险丝：若服务端拒绝（无动画/状态推送），2 秒后解除锁定避免卡死
+  clearTimeout(shootGuard)
+  shootGuard = setTimeout(() => {
+    if (shooting.value && !playing.value) shooting.value = false
+  }, 2000)
+}
+
+// —— 出杆按钮：点按=直接出杆，按住=蓄力松开出杆 ——
+function btnDown(e) {
+  if (!canAim.value) return
+  e.currentTarget.setPointerCapture?.(e.pointerId)
+  pressT0 = performance.now()
+  startCharge()
+}
+function btnUp() {
+  if (!charging.value) return
+  const dur = performance.now() - pressT0
+  charging.value = false
+  if (dur < 160) {
+    // 点按：以按下前的力度直接出杆
+    power.value = powerBefore
+    fire(powerBefore)
+    return
+  }
+  fire(power.value)
+}
+
+// —— 杆法打点盘：在白球截面上拖动红点选择击球点（上=高杆 下=低杆 左右=侧塞），双击回中 ——
+const spin = ref({ x: 0, y: 0 }) // x 左右塞 -1~1（右为正），y 高低杆 -1~1（高杆为正）
+const spinRef = ref(null)
+let spinDragging = false
+const spinLabel = computed(() => {
+  const { x, y } = spin.value
+  const parts = []
+  if (y > 0.15) parts.push('高杆')
+  else if (y < -0.15) parts.push('低杆')
+  if (x > 0.15) parts.push('右塞')
+  else if (x < -0.15) parts.push('左塞')
+  return parts.length ? parts.join('+') : '中杆'
+})
+function spinSet(e) {
+  const r = spinRef.value.getBoundingClientRect()
+  let x = ((e.clientX - r.left) / r.width) * 2 - 1
+  let y = -(((e.clientY - r.top) / r.height) * 2 - 1)
+  const d = Math.hypot(x, y)
+  if (d > 1) {
+    x /= d
+    y /= d
+  }
+  spin.value = { x: Math.round(x * 100) / 100, y: Math.round(y * 100) / 100 }
+}
+function spinDown(e) {
+  if (!canAim.value) return
+  spinDragging = true
+  spinRef.value.setPointerCapture?.(e.pointerId)
+  spinSet(e)
+}
+function spinMove(e) {
+  if (spinDragging) spinSet(e)
+}
+function spinUp() {
+  spinDragging = false
+}
+function spinReset() {
+  spin.value = { x: 0, y: 0 }
+}
+
+// —— 力度条拖动 ——
+function barSet(e) {
+  const r = barRef.value.getBoundingClientRect()
+  const ratio = 1 - (e.clientY - r.top) / r.height
+  power.value = Math.round(Math.min(100, Math.max(10, 10 + ratio * 90)))
+}
+function barDown(e) {
+  if (!canAim.value || charging.value) return
+  barDragging = true
+  barRef.value.setPointerCapture?.(e.pointerId)
+  barSet(e)
+}
+function barMove(e) {
+  if (barDragging) barSet(e)
+}
+function barUp() {
+  barDragging = false
+}
+
+// —— 角度微调：按钮长按连续调整，键盘 ←→ 步进（Shift 更细） ——
+function nudge(dir, fine) {
+  if (!canAim.value) return
+  aimAngle.value += dir * (fine ? 0.0009 : 0.0045)
+}
+function startFine(dir) {
+  nudge(dir, false)
+  clearInterval(fineTimer)
+  fineTimer = setInterval(() => nudge(dir, false), 55)
+}
+function stopFine() {
+  clearInterval(fineTimer)
+}
+function onKeyDown(e) {
+  if (!canAim.value && !charging.value) return
+  const tag = e.target?.tagName
+  if (tag === 'INPUT' || tag === 'TEXTAREA') return
+  if (e.key === 'ArrowLeft') {
+    e.preventDefault()
+    nudge(-1, e.shiftKey)
+  } else if (e.key === 'ArrowRight') {
+    e.preventDefault()
+    nudge(1, e.shiftKey)
+  } else if (e.key === ' ' && !e.repeat) {
+    e.preventDefault()
+    pressT0 = performance.now()
+    startCharge()
+  }
+}
+function onKeyUp(e) {
+  if (e.key === ' ' && charging.value) {
+    e.preventDefault()
+    const dur = performance.now() - pressT0
+    charging.value = false
+    if (dur < 160) {
+      // 快速点按空格同样全力出杆
+      power.value = 100
+      fire(100)
+      return
+    }
+    fire(power.value)
+  }
+}
+
+// 轮到我时自动把杆指向最近的合法目标球
+function autoAim() {
+  const balls = (bill.value?.balls || []).filter((b) => b.on)
+  const cue = balls.find((b) => b.id === 0)
+  if (!cue) return
+  let best = null
+  let bd = Infinity
+  for (const b of balls) {
+    if (!legalSet.value.has(b.id)) continue
+    const d = Math.hypot(b.x - cue.x, b.y - cue.y)
+    if (d < bd) {
+      bd = d
+      best = b
+    }
+  }
+  if (best) aimAngle.value = Math.atan2(best.y - cue.y, best.x - cue.x)
+}
+watch(canAim, (v) => {
+  if (v) {
+    autoAim()
+    return
+  }
+  // 回合被切走（超时托管/对局结束）时复位蓄力与微调
+  if (charging.value) {
+    charging.value = false
+    power.value = powerBefore
+  }
+  stopFine()
+})
+// 服务端状态更新（杆数变化）或回放开始时解除出杆锁定
+watch(() => bill.value?.shots, () => {
+  shooting.value = false
+})
+watch(playing, (v) => {
+  if (v) {
+    shooting.value = false
+    return
+  }
+  // 回放结束：白球重置提示 + 犯规提示 + 连杆/换人播报
+  const meta = curAnimMeta
+  curAnimMeta = null
+  const b = bill.value
+  if (!b) return
+  if (cueRespawnPending) {
+    cueRespawnPending = false
+    const cue = (b.balls || []).find((x) => x.id === 0 && x.on)
+    if (cue) spawnRingFx(cue.x, cue.y, '#ffffff', '白球重置', { parts: 10 })
+  }
+  if (b.phase !== 'aim' || battle.billAnims.length) return
+  // 犯规：先弹红色犯规横幅说明原因，看清后再播换人横幅
+  if (meta?.foul && st.value?.status === 'playing') {
+    const who = meta.shooter === mySeat.value ? '你' : seatName(meta.shooter)
+    showBanner(`⚠️ ${who}犯规：${meta.foul_reason || ''}`, 'foul')
+    lastShots = b.shots
+    clearTimeout(foulTimer)
+    foulTimer = setTimeout(maybeAnnounceTurn, 1500)
+    return
+  }
+  // 连杆：击球人未变但杆数增加（打进己方球继续出杆）
+  if (b.turn === lastShownTurn && b.shots !== lastShots && st.value?.status === 'playing') {
+    if (b.turn === mySeat.value) showBanner('打得漂亮，继续击球！', 'mine')
+    else showBanner(`${seatName(b.turn)} 打进了，继续击球`, 'other')
+  }
+  lastShots = b.shots
+  maybeAnnounceTurn()
+})
+// 击球人变化（无回放场景如重连/首次进房）直接播报
+watch(() => bill.value?.turn, maybeAnnounceTurn)
+
+onMounted(() => {
+  const cv = canvasRef.value
+  cv.width = W + RAIL * 2
+  cv.height = H + RAIL * 2
+  ctx = cv.getContext('2d')
+  ctx.setTransform(1, 0, 0, 1, RAIL, RAIL)
+  // 重连进房时丢弃过期动画，直接以最新状态渲染
+  battle.billAnims.splice(0)
+  clockTimer = setInterval(() => {
+    now.value = Math.floor(Date.now() / 1000)
+  }, 500)
+  window.addEventListener('keydown', onKeyDown)
+  window.addEventListener('keyup', onKeyUp)
+  if (canAim.value) autoAim()
+  maybeAnnounceTurn()
+  loop()
+})
+onBeforeUnmount(() => {
+  cancelAnimationFrame(rafId)
+  clearInterval(clockTimer)
+  clearInterval(fineTimer)
+  clearTimeout(shootGuard)
+  clearTimeout(bannerTimer)
+  clearTimeout(foulTimer)
+  window.removeEventListener('keydown', onKeyDown)
+  window.removeEventListener('keyup', onKeyUp)
+})
+</script>
+
+<template>
+  <div v-if="bill" class="panel bill-wrap">
+    <!-- 顶部信息条 -->
+    <div class="bill-top">
+      <span class="turn-tag" :class="{ mine: myTurn }">
+        ● 轮到 {{ seatName(bill.turn) }}{{ myTurn ? '（你）' : '' }}
+      </span>
+      <span class="group-tag">{{ groupText }}</span>
+      <span
+        v-if="bill.phase === 'aim' && countdown > 0 && !playing"
+        class="clock"
+        :class="{ hurry: countdown <= 10 }"
+      >
+        ⏱ {{ countdown }}s
+      </span>
+      <span v-if="playing" class="anim-tag">🎱 回放中…</span>
+    </div>
+    <!-- 球桌 + 右侧力度条 -->
+    <div class="table-row">
+      <transition name="bnr">
+        <div v-if="banner" class="turn-banner" :class="banner.cls">{{ banner.text }}</div>
+      </transition>
+      <canvas
+        ref="canvasRef"
+        class="table"
+        :class="{ aiming: canAim }"
+        @pointermove="onPointerMove"
+        @pointerdown="onPointerDown"
+        @pointerup="onPointerUp"
+        @pointercancel="onPointerCancel"
+        @contextmenu.prevent
+      ></canvas>
+      <div
+        ref="barRef"
+        class="pw-bar"
+        :class="{ off: !canAim && !charging }"
+        @pointerdown="barDown"
+        @pointermove="barMove"
+        @pointerup="barUp"
+        @pointercancel="barUp"
+      >
+        <div class="pw-fill" :class="{ charging }" :style="{ height: ((power - 10) / 90) * 100 + '%' }"></div>
+        <span class="pw-val">{{ power }}</span>
+      </div>
+    </div>
+    <!-- 双方目标球（进球后消失） -->
+    <div class="targets">
+      <div v-for="s in tgSeats" :key="s" class="tg-row">
+        <span class="tg-label" :class="{ me: s === mySeat }">{{ tgLabel(s) }}</span>
+        <template v-if="seatGroup(s)">
+          <span v-for="id in tgRemain(s)" :key="id" class="mini-ball" :style="miniBallStyle(id)">
+            <i class="mini-num">{{ id }}</i>
+          </span>
+          <template v-if="!tgRemain(s).length">
+            <span class="mini-ball" :style="miniBallStyle(8)"><i class="mini-num">8</i></span>
+            <span class="tg-eight">已清台，打进黑八获胜！</span>
+          </template>
+        </template>
+        <span v-else class="tg-none">分组未定（打进任意彩球确定分组）</span>
+      </div>
+    </div>
+    <!-- 击球控制 -->
+    <div class="controls">
+      <div class="potted">
+        <span class="text-dim" style="font-size: 12px">已落袋：</span>
+        <span v-for="id in pottedList" :key="id" class="mini-ball" :style="miniBallStyle(id)">
+          <i class="mini-num">{{ id }}</i>
+        </span>
+        <span v-if="!pottedList.length" class="text-dim" style="font-size: 12px">无</span>
+      </div>
+      <div v-if="canAim || charging" class="shot-ctrl">
+        <div class="spin-box" title="杆法打点：拖动红点选择（上高杆/下低杆/左右塞），双击回中">
+          <div
+            ref="spinRef"
+            class="spin-ball"
+            @pointerdown="spinDown"
+            @pointermove="spinMove"
+            @pointerup="spinUp"
+            @pointercancel="spinUp"
+            @dblclick="spinReset"
+          >
+            <span class="spin-dot" :style="{ left: 50 + spin.x * 38 + '%', top: 50 - spin.y * 38 + '%' }"></span>
+          </div>
+          <span class="spin-name">{{ spinLabel }}</span>
+        </div>
+        <button class="btn-mini" @pointerdown.prevent="startFine(-1)" @pointerup="stopFine" @pointerleave="stopFine">
+          ⟲ 微调
+        </button>
+        <button class="btn-mini" @pointerdown.prevent="startFine(1)" @pointerup="stopFine" @pointerleave="stopFine">
+          微调 ⟳
+        </button>
+        <button
+          class="btn shoot-btn"
+          :class="{ charging }"
+          @pointerdown.prevent="btnDown"
+          @pointerup.prevent="btnUp"
+          @pointercancel="onPointerCancel"
+        >
+          {{ charging ? '松开出杆！' : '🎱 按住蓄力' }}
+        </button>
+      </div>
+      <p v-else-if="!myTurn" class="text-dim" style="font-size: 12px">等待对方击球…</p>
+    </div>
+    <p class="bill-tips text-dim">
+      移动鼠标瞄准（触屏拖动瞄准）· 点一下桌面=全力出杆 · 按住蓄力（可继续移动修正瞄准）松开出杆 · 点击按钮=按力度条出杆 ·
+      ←→ 微调角度（Shift 更细）· 空格蓄力 · 打点盘选杆法（高杆/低杆/侧塞）· 绿线=可打目标 红线=犯规目标 · 清台后打进黑八获胜
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.bill-wrap {
+  padding: 14px;
+}
+.bill-top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+  font-size: 13px;
+}
+.turn-tag {
+  font-weight: 700;
+  color: var(--text-dim);
+}
+.turn-tag.mine {
+  color: var(--primary);
+  animation: tag-pulse 1.6s ease-in-out infinite;
+}
+@keyframes tag-pulse {
+  50% {
+    opacity: 0.55;
+  }
+}
+.group-tag {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+}
+.clock {
+  font-weight: 700;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.clock.hurry {
+  color: #ff5a5a;
+  animation: clock-pulse 0.8s infinite;
+}
+@keyframes clock-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+.anim-tag {
+  color: var(--accent);
+  font-size: 12px;
+}
+.table-row {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  align-items: stretch;
+}
+.table {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  border-radius: 12px;
+  touch-action: none;
+  user-select: none;
+}
+.table.aiming {
+  cursor: crosshair;
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, var(--primary) 65%, transparent),
+    0 0 18px color-mix(in srgb, var(--primary) 30%, transparent);
+}
+/* 击球人切换横幅：弹入 + 上浮淡出 */
+.turn-banner {
+  position: absolute;
+  left: 50%;
+  top: 42%;
+  transform: translate(-50%, -50%);
+  padding: 10px 26px;
+  border-radius: 999px;
+  font-weight: 800;
+  font-size: 17px;
+  white-space: nowrap;
+  color: #eaf2ff;
+  background: rgba(10, 12, 20, 0.85);
+  border: 2px solid var(--primary);
+  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+  z-index: 5;
+}
+.turn-banner.mine {
+  border-color: #35e08d;
+  color: #baffdc;
+}
+.turn-banner.other {
+  border-color: #8a93a6;
+  color: #dde4f0;
+}
+/* 犯规横幅：红色警示 */
+.turn-banner.foul {
+  border-color: #ff5c5c;
+  color: #ffc2c2;
+  background: rgba(64, 12, 12, 0.9);
+  animation: foul-shake 0.4s;
+}
+@keyframes foul-shake {
+  0%,
+  100% {
+    transform: translate(-50%, -50%);
+  }
+  25% {
+    transform: translate(calc(-50% - 6px), -50%);
+  }
+  75% {
+    transform: translate(calc(-50% + 6px), -50%);
+  }
+}
+.bnr-enter-active {
+  animation: bnr-in 0.32s cubic-bezier(0.2, 1.5, 0.4, 1);
+}
+.bnr-leave-active {
+  transition:
+    opacity 0.35s,
+    transform 0.35s;
+}
+.bnr-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -110%) scale(0.9);
+}
+@keyframes bnr-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -10%) scale(0.7);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+/* 右侧力度条：底绿顶红，可拖动，蓄力时闪烁 */
+.pw-bar {
+  position: relative;
+  width: 26px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  overflow: hidden;
+  touch-action: none;
+  cursor: ns-resize;
+}
+.pw-bar.off {
+  opacity: 0.45;
+  cursor: default;
+}
+.pw-fill {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to top, #2ecc71, #f1c40f 55%, #e74c3c);
+  transition: height 0.04s linear;
+}
+.pw-fill.charging {
+  animation: pw-blink 0.5s infinite;
+}
+@keyframes pw-blink {
+  50% {
+    filter: brightness(1.35);
+  }
+}
+.pw-val {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 4px;
+  text-align: center;
+  font-size: 10px;
+  font-weight: 700;
+  color: #fff;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+  pointer-events: none;
+}
+.controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+.potted {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+/* 迷你球：复刻真实球样式（花色条纹底 + 白圈号码 + 高光） */
+.mini-ball {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow:
+    inset -2px -3px 4px rgba(0, 0, 0, 0.35),
+    0 1px 2px rgba(0, 0, 0, 0.35);
+  animation: mb-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
+}
+.mini-ball::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 3px;
+  width: 5px;
+  height: 4px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.7);
+}
+.mini-num {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #fff;
+  color: #111;
+  font-size: 8px;
+  font-weight: 700;
+  font-style: normal;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@keyframes mb-pop {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+/* 双方目标球区 */
+.targets {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 10px;
+}
+.tg-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.tg-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-dim);
+  min-width: 64px;
+}
+.tg-label.me {
+  color: var(--primary);
+}
+.tg-none {
+  font-size: 11px;
+  color: var(--text-dim);
+}
+.tg-eight {
+  font-size: 11px;
+  font-weight: 700;
+  color: #ffd76a;
+}
+.shot-ctrl {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+/* 杆法打点盘：白球截面 + 可拖红点 */
+.spin-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+.spin-ball {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #ffffff, #cfd4da 70%, #9aa1ab);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+}
+.spin-ball::before,
+.spin-ball::after {
+  content: '';
+  position: absolute;
+  background: rgba(0, 0, 0, 0.14);
+  pointer-events: none;
+}
+.spin-ball::before {
+  left: 50%;
+  top: 4px;
+  bottom: 4px;
+  width: 1px;
+}
+.spin-ball::after {
+  top: 50%;
+  left: 4px;
+  right: 4px;
+  height: 1px;
+}
+.spin-dot {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #e74c3c;
+  border: 1.5px solid #fff;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  pointer-events: none;
+}
+.spin-name {
+  font-size: 10px;
+  color: var(--text-dim);
+}
+.btn-mini {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 6px 10px;
+  border-radius: 8px;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+  touch-action: none;
+}
+.btn-mini:hover {
+  border-color: var(--primary);
+}
+.shoot-btn {
+  min-width: 116px;
+  user-select: none;
+  touch-action: none;
+}
+.shoot-btn.charging {
+  background: #e74c3c;
+  border-color: #e74c3c;
+  color: #fff;
+  animation: pw-blink 0.5s infinite;
+}
+.bill-tips {
+  margin-top: 10px;
+  font-size: 11px;
+  text-align: center;
+}
+@media (max-width: 640px) {
+  .pw-bar {
+    width: 20px;
+  }
+  .bill-tips {
+    font-size: 10px;
+  }
+}
+</style>
diff --git a/src/components/battle/ChessBoard.vue b/src/components/battle/ChessBoard.vue
new file mode 100644
index 0000000..976a11d
--- /dev/null
+++ b/src/components/battle/ChessBoard.vue
@@ -0,0 +1,487 @@
+<script setup>
+// 中国象棋棋盘：SVG 绘制仿实木棋盘（楚河汉界断线、九宫斜线、炮兵位定位符、路数标注、木纹噪声），
+// 棋子为多层拟物木饼（年轮纹理 + 阴刻文字 + 刻线圆环）；黑方视角自动翻转
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { useBattleStore } from '../../stores/battle'
+
+const battle = useBattleStore()
+const selected = ref(null) // {r,c} 真实棋盘坐标
+const now = ref(Math.floor(Date.now() / 1000))
+let timer = 0
+
+const st = computed(() => battle.roomState)
+const chess = computed(() => st.value?.chess || {})
+const board = computed(() => chess.value.board || [])
+const mySide = computed(() => chess.value.my_side || 1)
+const myTurn = computed(() => chess.value.turn_side === mySide.value && st.value?.status === 'playing')
+const countdown = computed(() => Math.max(0, (st.value?.deadline || 0) - now.value))
+// 棋子中文名：正=红 负=黑
+const NAMES = {
+  1: '帅', 2: '仕', 3: '相', 4: '马', 5: '车', 6: '炮', 7: '兵',
+  '-1': '将', '-2': '士', '-3': '象', '-4': '马', '-5': '车', '-6': '炮', '-7': '卒',
+}
+
+// ---------- SVG 棋盘几何（单位坐标，随容器等比缩放） ----------
+const U = 100 // 一格边长
+const PAD = 106 // 棋盘边缘到第一条线的距离
+const VBW = PAD * 2 + 8 * U // viewBox 宽（9 条竖线 8 格）
+const VBH = PAD * 2 + 9 * U // viewBox 高（10 条横线 9 格）
+const X = (i) => PAD + i * U
+const Y = (j) => PAD + j * U
+// 网格线：横线 10 条全画；竖线两侧通到底，中间 7 条在楚河汉界处断开
+const gridPath = (() => {
+  const p = []
+  for (let j = 0; j < 10; j++) p.push(`M${X(0)} ${Y(j)}H${X(8)}`)
+  p.push(`M${X(0)} ${Y(0)}V${Y(9)}`, `M${X(8)} ${Y(0)}V${Y(9)}`)
+  for (let i = 1; i < 8; i++) p.push(`M${X(i)} ${Y(0)}V${Y(4)}`, `M${X(i)} ${Y(5)}V${Y(9)}`)
+  return p.join('')
+})()
+// 九宫斜线（双方各一个米字宫）
+const palacePath =
+  `M${X(3)} ${Y(0)}L${X(5)} ${Y(2)}M${X(5)} ${Y(0)}L${X(3)} ${Y(2)}` +
+  `M${X(3)} ${Y(7)}L${X(5)} ${Y(9)}M${X(5)} ${Y(7)}L${X(3)} ${Y(9)}`
+// 炮位与兵/卒位的十字定位符（边线上的点只画朝内一半）
+const starPath = (() => {
+  const pts = [
+    [1, 2], [7, 2], [1, 7], [7, 7],
+    [0, 3], [2, 3], [4, 3], [6, 3], [8, 3],
+    [0, 6], [2, 6], [4, 6], [6, 6], [8, 6],
+  ]
+  const g = 14, l = 30, segs = []
+  for (const [i, j] of pts) {
+    const x = X(i), y = Y(j)
+    for (const [sx, sy] of [[-1, -1], [1, -1], [-1, 1], [1, 1]]) {
+      if ((i === 0 && sx < 0) || (i === 8 && sx > 0)) continue
+      segs.push(`M${x + sx * g} ${y + sy * (g + l)}V${y + sy * g}H${x + sx * (g + l)}`)
+    }
+  }
+  return segs.join('')
+})()
+// 路数标注：下方是我方（红=汉字从右向左，黑=数字从右向左），上方是对方
+const CN_NUMS = ['一', '二', '三', '四', '五', '六', '七', '八', '九']
+const AR_NUMS = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
+const topNums = computed(() => (mySide.value === 1 ? [...AR_NUMS] : [...CN_NUMS]))
+const botNums = computed(() => (mySide.value === 1 ? [...CN_NUMS].reverse() : [...AR_NUMS].reverse()))
+
+// 展示行列序：红方正常（0 在上），黑方翻转让己方在下
+const dispRows = computed(() => {
+  const rows = [...Array(10).keys()]
+  return mySide.value === 1 ? rows : rows.reverse()
+})
+const dispCols = computed(() => {
+  const cols = [...Array(9).keys()]
+  return mySide.value === 1 ? cols : cols.reverse()
+})
+
+function pieceAt(r, c) {
+  return board.value?.[r]?.[c] || 0
+}
+function isMine(p) {
+  return p !== 0 && Math.sign(p) === mySide.value
+}
+function isSelected(r, c) {
+  return selected.value && selected.value.r === r && selected.value.c === c
+}
+function isLastMove(r, c) {
+  const lm = chess.value.last_move
+  if (!lm) return false
+  return (lm.from_r === r && lm.from_c === c) || (lm.to_r === r && lm.to_c === c)
+}
+
+// —— 走法提示（新手引导）：选中棋子后服务端返回全部合法落点 ——
+// 空位画圆点、敌子画吃子圈；数据与走子校验同源（含蹩马腿/塞象眼/送将过滤）
+const hintsLoaded = computed(() => {
+  const h = battle.chessHints
+  const sel = selected.value
+  return !!(h && sel && h.from_r === sel.r && h.from_c === sel.c)
+})
+const hints = computed(() => {
+  if (!hintsLoaded.value) return new Map()
+  const map = new Map()
+  for (const t of battle.chessHints.targets || []) map.set(`${t.r}-${t.c}`, t)
+  return map
+})
+const hintAt = (r, c) => hints.value.get(`${r}-${c}`)
+
+function select(r, c) {
+  selected.value = { r, c }
+  battle.chessHints = null // 清掉上一次的提示，避免旧落点闪现
+  battle.chessHintsReq(r, c)
+}
+function deselect() {
+  selected.value = null
+}
+
+// 点击棋盘：选中己方棋子或走子（合法性由服务端校验）
+function tap(r, c) {
+  if (!myTurn.value) return
+  const p = pieceAt(r, c)
+  if (selected.value) {
+    // 点自己：再点同一枚取消选择，点其他己方棋子换选
+    if (isMine(p)) {
+      if (isSelected(r, c)) deselect()
+      else select(r, c)
+      return
+    }
+    // 提示已加载时，点了非法落点视为取消选择（不再发送注定被拒的走子）
+    if (hintsLoaded.value && !hintAt(r, c)) {
+      deselect()
+      return
+    }
+    battle.chessMove({ from_r: selected.value.r, from_c: selected.value.c, to_r: r, to_c: c })
+    deselect()
+    return
+  }
+  if (isMine(p)) select(r, c)
+}
+
+const sideName = (s) => (s === 1 ? '红方' : '黑方')
+
+onMounted(() => {
+  timer = setInterval(() => {
+    now.value = Math.floor(Date.now() / 1000)
+  }, 400)
+})
+onBeforeUnmount(() => clearInterval(timer))
+</script>
+
+<template>
+  <div class="chess-wrap">
+    <!-- 状态条 -->
+    <div class="status-bar">
+      <span class="side-tag" :class="mySide === 1 ? 'red' : 'black'">我执{{ mySide === 1 ? '红' : '黑' }}</span>
+      <span v-if="st.status === 'playing'">
+        轮到 <b :style="{ color: chess.turn_side === 1 ? '#ff6b6b' : 'var(--text)' }">{{ sideName(chess.turn_side) }}</b>
+        <span class="cd">{{ countdown }}s</span>
+      </span>
+      <span v-if="chess.in_check" class="check-tag">⚠️ 将军！</span>
+      <span class="text-dim" style="margin-left: auto; font-size: 12px">第 {{ Math.floor((chess.move_count || 0) / 2) + 1 }} 回合</span>
+      <button v-if="st.status === 'playing'" class="btn btn-danger btn-sm" @click="battle.resign()">认输</button>
+    </div>
+    <!-- 棋盘：外层实木边框 + 内层 SVG 盘面 -->
+    <div class="board">
+      <div class="board-inner">
+        <svg class="board-svg" :viewBox="`0 0 ${VBW} ${VBH}`" aria-hidden="true">
+          <defs>
+            <!-- 盘面底色：上浅下深的原木渐变 -->
+            <linearGradient id="xqBase" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0" stop-color="#e7c38a" />
+              <stop offset="0.5" stop-color="#dcb173" />
+              <stop offset="1" stop-color="#d0a061" />
+            </linearGradient>
+            <!-- 程序化木纹：低频湍流噪声拉出顺纹条带 -->
+            <filter id="xqGrain" x="0" y="0" width="100%" height="100%">
+              <feTurbulence type="fractalNoise" baseFrequency="0.004 0.05" numOctaves="4" seed="11" />
+              <feColorMatrix
+                type="matrix"
+                values="0 0 0 0 0.40  0 0 0 0 0.25  0 0 0 0 0.09  0.75 0 0 0 -0.14"
+              />
+            </filter>
+            <!-- 暗角：让盘面中心更亮、边缘沉下去 -->
+            <radialGradient id="xqVig" cx="50%" cy="44%" r="75%">
+              <stop offset="0.55" stop-color="#4a2f0d" stop-opacity="0" />
+              <stop offset="1" stop-color="#4a2f0d" stop-opacity="0.3" />
+            </radialGradient>
+          </defs>
+          <rect x="0" y="0" :width="VBW" :height="VBH" fill="url(#xqBase)" />
+          <rect x="0" y="0" :width="VBW" :height="VBH" filter="url(#xqGrain)" opacity="0.5" />
+          <rect x="0" y="0" :width="VBW" :height="VBH" fill="url(#xqVig)" />
+          <!-- 外粗内细双线边框 -->
+          <rect
+            :x="X(0) - 24" :y="Y(0) - 24" :width="8 * U + 48" :height="9 * U + 48"
+            fill="none" stroke="#4d2f0c" stroke-width="7"
+          />
+          <!-- 网格 / 九宫斜线 / 炮兵位定位符 -->
+          <path :d="gridPath" stroke="#54350f" stroke-width="3" stroke-opacity="0.92" fill="none" />
+          <path :d="palacePath" stroke="#54350f" stroke-width="2.6" stroke-opacity="0.85" fill="none" />
+          <path :d="starPath" stroke="#54350f" stroke-width="4.5" stroke-opacity="0.8" fill="none" stroke-linecap="round" />
+          <!-- 楚河汉界 -->
+          <text class="river-text" :x="X(2) + 6" :y="Y(4) + U / 2" text-anchor="middle" dominant-baseline="central">楚 河</text>
+          <text class="river-text" :x="X(6) - 6" :y="Y(4) + U / 2" text-anchor="middle" dominant-baseline="central">漢 界</text>
+          <!-- 上下路数标注 -->
+          <text
+            v-for="(n, i) in topNums" :key="'t' + i"
+            class="file-num" :x="X(i)" :y="PAD - 56" text-anchor="middle" dominant-baseline="central"
+          >{{ n }}</text>
+          <text
+            v-for="(n, i) in botNums" :key="'b' + i"
+            class="file-num" :x="X(i)" :y="Y(9) + 56" text-anchor="middle" dominant-baseline="central"
+          >{{ n }}</text>
+        </svg>
+        <!-- 交互层：格子中心即线的交叉点 -->
+        <div class="cells">
+          <div v-for="r in dispRows" :key="'r' + r" class="row">
+            <div
+              v-for="c in dispCols"
+              :key="r + '-' + c"
+              class="cell"
+              :class="{ last: isLastMove(r, c), capture: hintAt(r, c) && pieceAt(r, c) }"
+              @click="tap(r, c)"
+            >
+              <div
+                v-if="pieceAt(r, c)"
+                class="piece"
+                :class="[pieceAt(r, c) > 0 ? 'red' : 'black', { sel: isSelected(r, c), clickable: myTurn && isMine(pieceAt(r, c)) }]"
+              >
+                <span class="glyph">{{ NAMES[pieceAt(r, c)] }}</span>
+              </div>
+              <template v-else>
+                <!-- 空位合法落点：呼吸圆点 -->
+                <div v-if="hintAt(r, c)" class="hint-dot"></div>
+                <div v-else-if="isLastMove(r, c)" class="last-dot"></div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chess-wrap {
+  --cell: 52px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+}
+.status-bar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 10px 14px;
+  font-size: 14px;
+}
+.side-tag {
+  font-weight: 800;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+}
+.side-tag.red {
+  background: rgba(229, 72, 77, 0.18);
+  color: #ff6b6b;
+}
+.side-tag.black {
+  background: rgba(120, 120, 140, 0.25);
+}
+.cd {
+  margin-left: 8px;
+  background: var(--accent);
+  color: #101010;
+  font-weight: 800;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 999px;
+}
+.check-tag {
+  color: #ff5d5d;
+  font-weight: 800;
+  animation: blink 0.8s infinite;
+}
+@keyframes blink {
+  50% {
+    opacity: 0.35;
+  }
+}
+/* ---------- 实木外框 ---------- */
+.board {
+  padding: 10px;
+  border-radius: 14px;
+  background: linear-gradient(160deg, #7c5526 0%, #64411a 55%, #532f10 100%);
+  border: 1px solid #3f2a0c;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 226, 170, 0.28),
+    inset 0 -2px 6px rgba(0, 0, 0, 0.5),
+    0 12px 28px rgba(0, 0, 0, 0.5);
+}
+.board-inner {
+  position: relative;
+  padding: calc(var(--cell) * 0.56);
+  border-radius: 6px;
+  overflow: hidden;
+  /* 盘面凹入边框的内阴影 */
+  box-shadow: inset 0 2px 10px rgba(40, 20, 0, 0.45), inset 0 0 2px rgba(40, 20, 0, 0.6);
+}
+.board-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  pointer-events: none;
+}
+.river-text {
+  font-family: 'KaiTi', 'STKaiti', 'SimSun', serif;
+  font-size: 58px;
+  font-weight: 700;
+  letter-spacing: 26px;
+  fill: rgba(78, 46, 12, 0.6);
+}
+.file-num {
+  font-family: 'KaiTi', 'STKaiti', 'SimSun', serif;
+  font-size: 34px;
+  font-weight: 700;
+  fill: rgba(78, 46, 12, 0.78);
+}
+.cells {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.row {
+  display: flex;
+}
+.cell {
+  width: var(--cell);
+  height: var(--cell);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+}
+/* 上一步走子标记：交叉点上的暖色圆环 / 圆点 */
+.cell.last::before {
+  content: '';
+  position: absolute;
+  inset: 15%;
+  border: 2px solid rgba(171, 62, 22, 0.75);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(255, 236, 200, 0.35) inset;
+  pointer-events: none;
+}
+.last-dot {
+  width: 22%;
+  height: 22%;
+  border-radius: 50%;
+  background: rgba(171, 62, 22, 0.65);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+/* 走法提示：空位落点为墨绿呼吸圆点 */
+.hint-dot {
+  width: 26%;
+  height: 26%;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #6fbf73, #2e7d32);
+  box-shadow:
+    0 0 0 3px rgba(46, 125, 50, 0.25),
+    0 1px 3px rgba(0, 0, 0, 0.35);
+  animation: hint-breathe 1.1s ease-in-out infinite;
+  pointer-events: none;
+}
+@keyframes hint-breathe {
+  50% {
+    transform: scale(1.25);
+    box-shadow:
+      0 0 0 5px rgba(46, 125, 50, 0.18),
+      0 1px 3px rgba(0, 0, 0, 0.35);
+  }
+}
+/* 走法提示：可吃子目标外圈红色旋转虚线环 */
+.cell.capture::after {
+  content: '';
+  position: absolute;
+  inset: 2%;
+  border: 3px dashed rgba(211, 47, 47, 0.9);
+  border-radius: 50%;
+  box-shadow: 0 0 8px rgba(211, 47, 47, 0.45);
+  animation: capture-spin 6s linear infinite;
+  pointer-events: none;
+  z-index: 3;
+}
+@keyframes capture-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* ---------- 拟物棋子：木饼 + 年轮 + 刻线环 + 阴刻文字 ---------- */
+.piece {
+  position: relative;
+  width: calc(var(--cell) * 0.86);
+  height: calc(var(--cell) * 0.86);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  transition: transform 0.12s, box-shadow 0.12s;
+  /* 依次：圆柱侧边厚度、落地投影、顶面高光、底缘压暗 */
+  box-shadow:
+    0 calc(var(--cell) * 0.055) 0 #a37f42,
+    0 calc(var(--cell) * 0.11) calc(var(--cell) * 0.14) rgba(0, 0, 0, 0.45),
+    inset 0 2px 2px rgba(255, 248, 228, 0.7),
+    inset 0 -3px 5px rgba(130, 86, 30, 0.55);
+  z-index: 1;
+}
+/* 顶面：木色底 + 两组偏心年轮 + 球面高光 */
+.piece::before {
+  content: '';
+  position: absolute;
+  inset: 1px;
+  border-radius: 50%;
+  background:
+    radial-gradient(ellipse at 30% 22%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%),
+    repeating-radial-gradient(circle at 64% 70%, rgba(146, 96, 38, 0.16) 0 1.5px, rgba(146, 96, 38, 0) 1.5px 6px),
+    repeating-radial-gradient(circle at 26% 30%, rgba(120, 76, 26, 0.1) 0 2px, rgba(120, 76, 26, 0) 2px 8px),
+    radial-gradient(circle at 42% 38%, #fbeecd 0%, #f0d7a5 48%, #e2bf81 78%, #d1a869 100%);
+}
+/* 外圈刻线环：微凹的车削凹槽 */
+.piece::after {
+  content: '';
+  position: absolute;
+  inset: calc(var(--cell) * 0.07);
+  border-radius: 50%;
+  border: calc(var(--cell) * 0.034) solid;
+  box-shadow:
+    inset 0 1px 1px rgba(110, 66, 18, 0.5),
+    0 1px 0 rgba(255, 246, 224, 0.55);
+}
+.piece.red::after {
+  border-color: rgba(176, 40, 28, 0.82);
+}
+.piece.black::after {
+  border-color: rgba(43, 34, 26, 0.8);
+}
+/* 阴刻文字：上暗下亮模拟刻痕 */
+.glyph {
+  position: relative;
+  z-index: 1;
+  font-size: calc(var(--cell) * 0.46);
+  line-height: 1;
+  font-weight: 900;
+  font-family: 'KaiTi', 'STKaiti', 'SimSun', serif;
+  text-shadow:
+    0 1px 0 rgba(255, 244, 214, 0.5),
+    0 -1px 1px rgba(70, 30, 0, 0.45);
+}
+.piece.red .glyph {
+  color: #b3241a;
+}
+.piece.black .glyph {
+  color: #26201a;
+}
+.piece.sel {
+  transform: translateY(-2px) scale(1.1);
+  box-shadow:
+    0 0 0 3px rgba(255, 196, 66, 0.95),
+    0 calc(var(--cell) * 0.075) 0 #a37f42,
+    0 calc(var(--cell) * 0.16) calc(var(--cell) * 0.2) rgba(0, 0, 0, 0.5),
+    inset 0 2px 2px rgba(255, 248, 228, 0.7),
+    inset 0 -3px 5px rgba(130, 86, 30, 0.55);
+  z-index: 2;
+}
+.piece.clickable:hover {
+  transform: translateY(-1px) scale(1.05);
+}
+@media (max-width: 640px) {
+  .chess-wrap {
+    --cell: 38px;
+  }
+}
+</style>
diff --git a/src/components/battle/DdzTable.vue b/src/components/battle/DdzTable.vue
new file mode 100644
index 0000000..67da03f
--- /dev/null
+++ b/src/components/battle/DdzTable.vue
@@ -0,0 +1,623 @@
+<script setup>
+// 斗地主牌桌：三家布局（上家/下家/自己），叫分、出牌、过牌与倒计时
+// 交互向经典手游看齐：点选/滑动多选手牌、提示轮换候选、出牌动效（UI 为自绘风格）
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useBattleStore } from '../../stores/battle'
+import { toast } from '../../api/http'
+import PlayingCard from './PlayingCard.vue'
+import PixelAvatar from '../PixelAvatar.vue'
+
+const battle = useBattleStore()
+const selected = ref(new Set())
+const now = ref(Math.floor(Date.now() / 1000))
+let timer = 0
+
+const st = computed(() => battle.roomState)
+const ddz = computed(() => st.value?.ddz || {})
+const me = computed(() => st.value?.my_seat ?? 0)
+// 上家（左侧）与下家（右侧）
+const leftSeat = computed(() => (me.value + 2) % 3)
+const rightSeat = computed(() => (me.value + 1) % 3)
+const myTurn = computed(() => ddz.value.turn === me.value && st.value?.status === 'playing')
+const countdown = computed(() => Math.max(0, (st.value?.deadline || 0) - now.value))
+// 手牌按点数降序展示
+const myHand = computed(() => {
+  const hand = [...(ddz.value.my_hand || [])]
+  const rank = (c) => (c === 53 ? 17 : c === 52 ? 16 : Math.floor(c / 4) + 3)
+  return hand.sort((a, b) => rank(b) - rank(a) || a - b)
+})
+
+function seatInfo(idx) {
+  return st.value?.seats?.[idx] || {}
+}
+// 该座位最近一手（从历史中取该座位最后动作，若被新一轮覆盖则不显示）
+const lastPlayMap = computed(() => {
+  const map = {}
+  const hist = ddz.value.history || []
+  // 只回放最近一圈（最多 3 条）动作用于展示
+  hist.slice(-3).forEach((h) => {
+    map[h.seat] = h
+  })
+  return map
+})
+
+// —— 手牌选择：点选切换 + 按住扫过滑动多选（起手牌决定是加选还是减选） ——
+// 任何时候都可以选牌摆牌（包括叫牌阶段和别人回合），只有出牌需要轮到自己
+let dragMode = null // 'add' | 'remove' | null
+function cardFromEvent(e) {
+  const el = document.elementFromPoint(e.clientX, e.clientY)?.closest('[data-card]')
+  if (!el) return null
+  const v = Number(el.dataset.card)
+  return Number.isNaN(v) ? null : v
+}
+function applyDrag(c) {
+  const s = new Set(selected.value)
+  if (dragMode === 'add') s.add(c)
+  else s.delete(c)
+  selected.value = s
+}
+function handDown(e) {
+  if (!myHand.value.length) return
+  const c = cardFromEvent(e)
+  if (c === null) return
+  e.currentTarget.setPointerCapture?.(e.pointerId)
+  dragMode = selected.value.has(c) ? 'remove' : 'add'
+  applyDrag(c)
+}
+function handMove(e) {
+  if (dragMode === null) return
+  const c = cardFromEvent(e)
+  if (c !== null) applyDrag(c)
+}
+function handUp() {
+  dragMode = null
+}
+
+// —— 提示：首次返回配合策略推荐，连点按牌力从小到大轮换候选 ——
+const hintSeq = ref(0)
+function doHint() {
+  battle.ddzHintReq(hintSeq.value)
+  hintSeq.value++
+}
+watch(
+  () => battle.ddzHint,
+  (h) => {
+    if (!h || !myTurn.value) return
+    if (h.none) {
+      toast('要不起，只能不出')
+      selected.value = new Set()
+      return
+    }
+    if (h.suggest_pass) {
+      toast(seatInfo(me.value).is_landlord ? '提示：这手建议忍一忍' : '提示：建议不出，配合队友')
+      selected.value = new Set()
+      return
+    }
+    if (h.cards?.length) selected.value = new Set(h.cards)
+  }
+)
+// 每次轮到自己重置提示轮换（选择保留：允许提前摆牌）
+watch(myTurn, (v) => {
+  if (v) hintSeq.value = 0
+})
+// 手牌变化（打出/发牌）时清掉已不在手里的选择
+watch(
+  () => (ddz.value.my_hand || []).length,
+  () => {
+    const hand = new Set(ddz.value.my_hand || [])
+    const s = new Set([...selected.value].filter((c) => hand.has(c)))
+    if (s.size !== selected.value.size) selected.value = s
+  }
+)
+
+// —— 发牌动画：叫牌阶段手牌内容变化（首发或重发）时逐张飞入 ——
+const dealing = ref(false)
+let dealTimer = 0
+watch(
+  () =>
+    ddz.value.phase === 'bidding'
+      ? (ddz.value.my_hand || []).slice().sort((a, b) => a - b).join(',')
+      : '',
+  (nv, ov) => {
+    if (!nv || nv === ov) return
+    dealing.value = true
+    selected.value = new Set()
+    clearTimeout(dealTimer)
+    dealTimer = setTimeout(() => {
+      dealing.value = false
+    }, (ddz.value.my_hand?.length || 17) * 45 + 500)
+  },
+  { immediate: true }
+)
+
+// —— 托管：开启后每回合由系统代打 ——
+const myAuto = computed(() => !!seatInfo(me.value).auto)
+function toggleEscrow() {
+  battle.setEscrow(!myAuto.value)
+}
+
+// 叫/抢表态气泡：只在叫牌与抢地主阶段显示
+function bidMark(idx) {
+  if (ddz.value.phase !== 'bidding' && ddz.value.phase !== 'robbing') return ''
+  return ddz.value.marks?.[idx] || ''
+}
+
+function doBid(call) {
+  battle.ddzBid(call)
+}
+function doRob(rob) {
+  battle.ddzRob(rob)
+}
+function doPlay() {
+  if (!selected.value.size) {
+    toast('请先选牌')
+    return
+  }
+  battle.ddzPlay([...selected.value])
+  selected.value = new Set()
+}
+function doPass() {
+  battle.ddzPass()
+  selected.value = new Set()
+}
+
+onMounted(() => {
+  timer = setInterval(() => {
+    now.value = Math.floor(Date.now() / 1000)
+  }, 400)
+})
+onBeforeUnmount(() => {
+  clearInterval(timer)
+  clearTimeout(dealTimer)
+})
+</script>
+
+<template>
+  <div class="ddz">
+    <!-- 顶部信息：底牌与炸弹数 -->
+    <div class="table-top">
+      <div class="bottom-cards">
+        <span class="text-dim" style="font-size: 12px">底牌</span>
+        <template v-if="ddz.bottom?.length">
+          <PlayingCard v-for="c in ddz.bottom" :key="'b' + c" :card="c" small />
+        </template>
+        <template v-else>
+          <div v-for="i in 3" :key="i" class="card-back small"></div>
+        </template>
+      </div>
+      <div class="bomb text-dim">💣 ×{{ ddz.bombs || 0 }}</div>
+      <div class="mult" title="当前倍数 = 叫抢倍数 × 炸弹翻倍（春天在结算时另乘）">
+        倍数 ×{{ ddz.multiplier || 1 }}
+      </div>
+    </div>
+    <!-- 对手区 -->
+    <div class="opponents">
+      <div
+        v-for="(idx, pos) in [leftSeat, rightSeat]"
+        :key="idx"
+        class="opp"
+        :class="{ active: ddz.turn === idx && st.status === 'playing' }"
+      >
+        <div class="opp-head">
+          <span class="avatar"><PixelAvatar :code="seatInfo(idx).avatar || (seatInfo(idx).is_ai ? '🤖' : 'px:01')" :size="32" /></span>
+          <div>
+            <div class="opp-name">
+              {{ seatInfo(idx).name || '空位' }}
+              <span v-if="seatInfo(idx).is_landlord" class="badge-lord">地主</span>
+              <span v-if="!seatInfo(idx).online && seatInfo(idx).occupied && !seatInfo(idx).is_ai" class="badge-off">离线</span>
+            </div>
+            <div class="opp-cards text-dim">🂠 剩 {{ seatInfo(idx).cards_count ?? '-' }} 张</div>
+          </div>
+          <span v-if="ddz.turn === idx && st.status === 'playing'" class="cd" :class="{ urgent: countdown <= 5 }">{{ countdown }}s</span>
+        </div>
+        <!-- 该家最近动作 -->
+        <div class="opp-play">
+          <!-- 叫/抢阶段：显示表态气泡 -->
+          <span
+            v-if="bidMark(idx)"
+            class="bid-mark"
+            :class="{ hot: bidMark(idx).includes('！') }"
+          >{{ bidMark(idx) }}</span>
+          <!-- 历史事件中 cards 为空即"过" -->
+          <template v-if="lastPlayMap[idx]">
+            <span v-if="!lastPlayMap[idx].cards?.length" class="pass-tag">不出</span>
+            <div v-else class="mini-cards played">
+              <PlayingCard v-for="c in lastPlayMap[idx].cards" :key="c" :card="c" small />
+            </div>
+          </template>
+          <span :class="pos === 0 ? 'pos-tag-l' : 'pos-tag-r'" class="text-dim">{{ pos === 0 ? '上家' : '下家' }}</span>
+        </div>
+      </div>
+    </div>
+    <!-- 中央：最近一手牌 -->
+    <div class="center-zone">
+      <template v-if="ddz.last_seat >= 0 && ddz.last_cards?.length">
+        <div class="last-label text-dim">
+          {{ seatInfo(ddz.last_seat).name }}：{{ ddz.last_desc }}
+        </div>
+        <div class="mini-cards played">
+          <PlayingCard v-for="c in ddz.last_cards" :key="'l' + c" :card="c" small />
+        </div>
+      </template>
+      <div v-else-if="ddz.phase === 'bidding'" class="text-dim">等待叫地主…</div>
+      <div v-else-if="ddz.phase === 'robbing'" class="text-dim">抢地主环节：每抢一次倍数×2</div>
+      <div v-else class="text-dim">新一轮，任意出牌</div>
+    </div>
+    <!-- 我的区域 -->
+    <div class="my-zone" :class="{ active: myTurn }">
+      <div class="my-info">
+        <span class="avatar"><PixelAvatar :code="seatInfo(me).avatar || 'px:01'" :size="32" /></span>
+        <span>{{ seatInfo(me).name }}</span>
+        <span v-if="seatInfo(me).is_landlord" class="badge-lord">地主</span>
+        <span v-if="bidMark(me)" class="bid-mark" :class="{ hot: bidMark(me).includes('！') }">{{ bidMark(me) }}</span>
+        <span v-if="myTurn" class="cd" :class="{ urgent: countdown <= 5 }">{{ countdown }}s</span>
+        <button
+          v-if="st.status === 'playing'"
+          class="escrow-btn"
+          :class="{ on: myAuto }"
+          @click="toggleEscrow"
+        >
+          {{ myAuto ? '✋ 取消托管' : '🤖 托管' }}
+        </button>
+      </div>
+      <!-- 操作按钮：置于手牌上方，模拟经典布局（不出 / 提示 / 出牌） -->
+      <div class="actions">
+        <span v-if="myAuto && st.status === 'playing'" class="auto-tag">托管中，系统自动代打…</span>
+        <template v-else-if="myTurn && ddz.phase === 'bidding'">
+          <button class="btn" @click="doBid(true)">叫地主</button>
+          <button class="btn btn-ghost" @click="doBid(false)">不叫</button>
+        </template>
+        <template v-else-if="myTurn && ddz.phase === 'robbing'">
+          <button class="btn" @click="doRob(true)">抢地主（×2）</button>
+          <button class="btn btn-ghost" @click="doRob(false)">不抢</button>
+        </template>
+        <template v-else-if="myTurn && ddz.phase === 'playing'">
+          <button v-if="ddz.can_pass" class="btn btn-ghost act-pass" @click="doPass">不出</button>
+          <button class="btn btn-ghost act-hint" @click="doHint">💡 提示</button>
+          <button class="btn act-play" :disabled="!selected.size" @click="doPlay">
+            出牌{{ selected.size ? `（${selected.size}）` : '' }}
+          </button>
+          <button v-if="selected.size" class="clear-link" @click="selected = new Set()">清空</button>
+        </template>
+        <span v-else class="text-dim" style="font-size: 13px">
+          {{ st.status === 'playing' ? `等待 ${seatInfo(ddz.turn).name || ''} 行动…` : '' }}
+        </span>
+      </div>
+      <!-- 手牌：点选切换，按住扫过可滑动多选；发牌时逐张飞入 -->
+      <div
+        class="hand"
+        @pointerdown="handDown"
+        @pointermove="handMove"
+        @pointerup="handUp"
+        @pointercancel="handUp"
+      >
+        <PlayingCard
+          v-for="(c, i) in myHand"
+          :key="c"
+          :card="c"
+          :data-card="c"
+          :selected="selected.has(c)"
+          :class="{ 'deal-in': dealing }"
+          :style="dealing ? { animationDelay: i * 45 + 'ms' } : null"
+        />
+      </div>
+      <div v-if="st.status === 'playing'" class="hand-tip text-dim">
+        点击选牌 · 按住扫过可连选 · 轮到自己时点提示可连点换牌
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ddz {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--primary) 12%, var(--bg-panel)), var(--bg-panel));
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
+  min-height: 560px;
+}
+.table-top {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 18px;
+}
+.bottom-cards {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+.card-back.small {
+  width: 34px;
+  height: 48px;
+  border-radius: 6px;
+  background: repeating-linear-gradient(45deg, var(--primary), var(--primary) 4px, var(--primary-2) 4px, var(--primary-2) 8px);
+  border: 1px solid var(--border);
+}
+.bomb {
+  font-size: 13px;
+}
+/* 倍数徽标：金色渐变强调奖惩规模 */
+.mult {
+  background: linear-gradient(135deg, #ffd76a, #ff9d2e);
+  color: #4a2500;
+  font-size: 12px;
+  font-weight: 800;
+  padding: 3px 10px;
+  border-radius: 999px;
+  box-shadow: 0 2px 8px rgba(255, 157, 46, 0.35);
+}
+/* 底牌翻开动效 */
+.bottom-cards :deep(.pcard) {
+  animation: flip-in 0.35s ease-out both;
+}
+@keyframes flip-in {
+  from {
+    opacity: 0;
+    transform: rotateY(90deg) scale(0.8);
+  }
+}
+.opponents {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+.opp {
+  flex: 1;
+  max-width: 300px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 10px 12px;
+  transition: box-shadow 0.2s;
+}
+.opp.active {
+  box-shadow: 0 0 0 2px var(--accent), var(--glow);
+}
+.opp-head {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.avatar {
+  font-size: 26px;
+}
+.opp-name {
+  font-size: 14px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.opp-cards {
+  font-size: 12px;
+}
+.badge-lord {
+  background: linear-gradient(135deg, #ffb800, #ff6a00);
+  color: #fff;
+  font-size: 10px;
+  padding: 1px 7px;
+  border-radius: 999px;
+}
+.badge-off {
+  background: var(--bg-panel);
+  color: var(--text-dim);
+  font-size: 10px;
+  padding: 1px 7px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+}
+.cd {
+  margin-left: auto;
+  background: var(--accent);
+  color: #101010;
+  font-weight: 800;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 999px;
+}
+/* 倒计时最后几秒红色脉冲催促 */
+.cd.urgent {
+  background: #ff5c5c;
+  color: #fff;
+  animation: cd-pulse 0.8s infinite;
+}
+@keyframes cd-pulse {
+  50% {
+    transform: scale(1.18);
+  }
+}
+.opp-play {
+  margin-top: 8px;
+  min-height: 52px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.pass-tag {
+  background: var(--bg-panel);
+  border: 1px dashed var(--border);
+  color: var(--text-dim);
+  padding: 4px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+}
+.pos-tag-l,
+.pos-tag-r {
+  margin-left: auto;
+  font-size: 11px;
+}
+.mini-cards {
+  display: flex;
+  flex-wrap: wrap;
+}
+.mini-cards > * {
+  margin-right: -12px;
+}
+/* 出牌落桌动效：轻微上抛落下 */
+.mini-cards.played > * {
+  animation: card-in 0.18s ease-out both;
+}
+@keyframes card-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.9);
+  }
+}
+.center-zone {
+  min-height: 90px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.last-label {
+  font-size: 13px;
+}
+.my-zone {
+  border-top: 1px solid var(--border);
+  padding-top: 12px;
+  border-radius: 12px;
+}
+.my-zone.active {
+  box-shadow: 0 -2px 0 var(--accent) inset;
+}
+.my-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+/* 手牌区：禁用触摸滚动手势，保证滑动选牌流畅 */
+.hand {
+  display: flex;
+  flex-wrap: wrap;
+  padding-top: 16px;
+  min-height: 80px;
+  touch-action: none;
+  user-select: none;
+}
+.hand > * {
+  margin-right: -18px;
+  cursor: pointer;
+}
+/* 悬停预抬起（仅鼠标设备），选中后完全抬起 */
+@media (hover: hover) {
+  .hand :deep(.pcard:not(.selected):hover) {
+    transform: translateY(-6px);
+  }
+}
+/* 发牌动画：逐张从右上飞入（配合 animation-delay 形成发牌节奏） */
+.hand :deep(.pcard.deal-in) {
+  animation: deal-fly 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
+}
+@keyframes deal-fly {
+  from {
+    opacity: 0;
+    transform: translate(60px, -70px) rotate(10deg);
+  }
+}
+.hand-tip {
+  font-size: 11px;
+  margin-top: 8px;
+  text-align: center;
+}
+.actions {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 4px;
+  min-height: 40px;
+  align-items: center;
+  justify-content: center;
+}
+.act-play {
+  min-width: 110px;
+  font-weight: 800;
+}
+.act-pass,
+.act-hint {
+  min-width: 80px;
+}
+.clear-link {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 12px;
+  cursor: pointer;
+  text-decoration: underline;
+  padding: 4px;
+}
+/* 托管开关：常驻在我的信息栏右侧 */
+.escrow-btn {
+  margin-left: auto;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.escrow-btn:hover {
+  color: var(--text);
+  border-color: var(--accent);
+}
+.escrow-btn.on {
+  background: var(--accent);
+  color: #101010;
+  font-weight: 700;
+  border-color: var(--accent);
+}
+.auto-tag {
+  font-size: 13px;
+  color: var(--accent);
+  animation: auto-blink 1.2s infinite;
+}
+@keyframes auto-blink {
+  50% {
+    opacity: 0.45;
+  }
+}
+/* 叫/抢表态气泡：带小尾巴的对话泡，"叫地主！/抢地主！"用高亮色 */
+.bid-mark {
+  position: relative;
+  display: inline-block;
+  background: #fffdf5;
+  color: #333;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: 10px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  animation: mark-pop 0.25s cubic-bezier(0.3, 1.4, 0.6, 1) both;
+}
+.bid-mark::after {
+  content: '';
+  position: absolute;
+  left: 14px;
+  bottom: -5px;
+  border: 5px solid transparent;
+  border-top-color: #fffdf5;
+  border-bottom: 0;
+}
+.bid-mark.hot {
+  background: linear-gradient(135deg, #ffd76a, #ff9d2e);
+  color: #4a2500;
+}
+.bid-mark.hot::after {
+  border-top-color: #ffb84e;
+}
+@keyframes mark-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
+</style>
diff --git a/src/components/battle/Dice3D.vue b/src/components/battle/Dice3D.vue
new file mode 100644
index 0000000..f8769df
--- /dev/null
+++ b/src/components/battle/Dice3D.vue
@@ -0,0 +1,121 @@
+<script setup>
+// 三维骰子：CSS 3D 立方体，收到新的 tick 时翻滚多圈后停在指定点数
+// 用法：<Dice3D :value="点数" :tick="触发序号" :size="像素" />
+// tick 每变化一次就触发一轮翻滚动画（即使点数与上次相同也会重新翻滚）
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  value: { type: Number, default: 1 },   // 要停下的点数 1-6
+  tick: { type: Number, default: 0 },    // 翻滚触发器（递增）
+  size: { type: Number, default: 44 },   // 骰子边长（px）
+})
+
+// 六个面的基准朝向：让指定点数转到正前方所需的 rotateX/rotateY
+// 面的摆放：1 前 / 6 后 / 2 右 / 5 左 / 3 上 / 4 下
+const FACE_ROT = {
+  1: [0, 0],
+  6: [0, 180],
+  2: [0, -90],
+  5: [0, 90],
+  3: [-90, 0],
+  4: [90, 0],
+}
+// 每个面的点阵（3×3 网格哪些格子有点）
+const PIPS = {
+  1: [4],
+  2: [0, 8],
+  3: [0, 4, 8],
+  4: [0, 2, 6, 8],
+  5: [0, 2, 4, 6, 8],
+  6: [0, 2, 3, 5, 6, 8],
+}
+const FACE_TRANSFORM = {
+  1: 'rotateY(0deg)',
+  6: 'rotateY(180deg)',
+  2: 'rotateY(90deg)',
+  5: 'rotateY(-90deg)',
+  3: 'rotateX(90deg)',
+  4: 'rotateX(-90deg)',
+}
+
+// 累计旋转角：每次翻滚在基准朝向上叠加整圈，保证动画始终向前翻滚
+const rx = ref(FACE_ROT[props.value]?.[0] ?? 0)
+const ry = ref(FACE_ROT[props.value]?.[1] ?? 0)
+let turns = 0
+watch(
+  () => props.tick,
+  () => {
+    const [bx, by] = FACE_ROT[props.value] || [0, 0]
+    turns++
+    // 两整圈 + 基准朝向；X/Y 圈数错开让翻滚轨迹更自然
+    rx.value = bx + turns * 720
+    ry.value = by + turns * 720 + 360
+  }
+)
+// 外部直接改点数但没有触发翻滚时（如断线重连快照），立即静止对齐
+watch(
+  () => props.value,
+  (v) => {
+    const [bx, by] = FACE_ROT[v] || [0, 0]
+    rx.value = bx + turns * 720
+    ry.value = by + turns * 720 + (turns ? 360 : 0)
+  }
+)
+</script>
+
+<template>
+  <div class="dice3d" :style="{ '--s': size + 'px' }">
+    <div class="cube" :style="{ transform: `rotateX(${rx}deg) rotateY(${ry}deg)` }">
+      <div v-for="f in 6" :key="f" class="face" :style="{ transform: `${FACE_TRANSFORM[f]} translateZ(calc(var(--s) / 2))` }">
+        <span v-for="cell in 9" :key="cell" class="pip" :class="{ on: PIPS[f].includes(cell - 1) }"></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dice3d {
+  width: var(--s);
+  height: var(--s);
+  perspective: calc(var(--s) * 5);
+  display: inline-block;
+}
+.cube {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform-style: preserve-3d;
+  /* 翻滚动画：先快后慢，模拟真实骰子落定 */
+  transition: transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.face {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(145deg, #fffdf5, #e8e4d8);
+  border: 1px solid #c9c4b4;
+  border-radius: 14%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  place-items: center;
+  padding: 12%;
+  box-sizing: border-box;
+  backface-visibility: hidden;
+}
+.pip {
+  width: 62%;
+  height: 62%;
+  border-radius: 50%;
+  visibility: hidden;
+}
+.pip.on {
+  visibility: visible;
+  background: radial-gradient(circle at 35% 30%, #574f43, #17130c);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
+}
+/* 传统骰子：1 点与 4 点为红色 */
+.face:nth-child(1) .pip.on,
+.face:nth-child(4) .pip.on {
+  background: radial-gradient(circle at 35% 30%, #ff7a6e, #b3160a);
+}
+</style>
diff --git a/src/components/battle/LudoBoard.vue b/src/components/battle/LudoBoard.vue
new file mode 100644
index 0000000..696c63b
--- /dev/null
+++ b/src/components/battle/LudoBoard.vue
@@ -0,0 +1,719 @@
+<script setup>
+// 飞行棋棋盘：SVG 环形主航道（52 格）+ 四角机库 + 各家向心终点跑道
+// 表现层向成熟棋牌游戏看齐：服务端每次动作随状态下发动画事件（st.ludo.events + seq），
+// 本组件维护「显示状态 view」按事件顺序播放：3D 骰子翻滚 → 飞机逐格跳动（含终点反弹）→
+// 起飞/同色跳跃滑翔 → 击落爆炸并飞回机库 → 到达终点光环，播完再与服务端快照对齐
+// 棋子步数编码：-1 机库，0-49 主航道，50-55 终点跑道，56 到达
+import { computed, reactive, ref, watch, onUnmounted } from 'vue'
+import { useBattleStore } from '../../stores/battle'
+import Dice3D from './Dice3D.vue'
+
+const battle = useBattleStore()
+const st = computed(() => battle.roomState)
+const ludo = computed(() => st.value?.ludo)
+const mySeat = computed(() => st.value?.my_seat ?? -1)
+const myTurn = computed(() => ludo.value?.turn === mySeat.value)
+
+const SEAT_COLORS = ['#ff5d73', '#4da3ff', '#ffb300', '#4ade80']
+const SIZE = 560
+const C = SIZE / 2
+const R_TRACK = 225
+const DEG = 180 / Math.PI
+
+// 主航道第 i 格的圆周坐标（0 号格在正上方，顺时针）
+function cellPoint(i) {
+  const a = (i / 52) * Math.PI * 2 - Math.PI / 2
+  return { x: C + R_TRACK * Math.cos(a), y: C + R_TRACK * Math.sin(a) }
+}
+// 座位 s 终点跑道第 k 格坐标：沿入口角度向圆心收缩
+function stretchPoint(s, k) {
+  const entry = (s * 13 + 50) % 52
+  const a = (entry / 52) * Math.PI * 2 - Math.PI / 2
+  const r = 197 - k * 28
+  return { x: C + r * Math.cos(a), y: C + r * Math.sin(a) }
+}
+// 座位 s 机库第 p 个停机位坐标（四角）
+const HANGAR_CENTERS = [
+  { x: 74, y: 74 },
+  { x: SIZE - 74, y: 74 },
+  { x: SIZE - 74, y: SIZE - 74 },
+  { x: 74, y: SIZE - 74 },
+]
+function hangarPoint(s, p) {
+  const c = HANGAR_CENTERS[s]
+  return { x: c.x + (p % 2 ? 17 : -17), y: c.y + (p > 1 ? 17 : -17) }
+}
+// 到达中心展示位：按座位方向偏移
+function donePoint(s, p) {
+  const a = ((s * 13) / 52) * Math.PI * 2 - Math.PI / 2
+  return { x: C + 26 * Math.cos(a) + (p - 1.5) * 10, y: C + 26 * Math.sin(a) }
+}
+// 任意步数 → 坐标与所在区域
+function pointOf(seat, steps, planeIdx) {
+  if (steps === -1) return { ...hangarPoint(seat, planeIdx), kind: 'hangar' }
+  if (steps >= 56) return { ...donePoint(seat, planeIdx), kind: 'done' }
+  if (steps >= 50) return { ...stretchPoint(seat, steps - 50), kind: 'stretch', s: steps }
+  const cell = (seat * 13 + steps) % 52
+  return { ...cellPoint(cell), kind: 'track', cell }
+}
+// 飞机朝向（度）：主航道顺时针切线方向 / 终点跑道与机库朝向圆心
+function rotOf(seat, steps) {
+  if (steps >= 0 && steps < 50) {
+    const cell = (seat * 13 + steps) % 52
+    const a = (cell / 52) * Math.PI * 2 - Math.PI / 2
+    return a * DEG + 180
+  }
+  if (steps >= 50) {
+    const entry = (seat * 13 + 50) % 52
+    const a = (entry / 52) * Math.PI * 2 - Math.PI / 2
+    return a * DEG + 270
+  }
+  const c = HANGAR_CENTERS[seat]
+  return Math.atan2(C - c.y, C - c.x) * DEG + 90
+}
+// 掷出 die 后棋子的最终落点步数（与服务端规则一致：终点反弹 + 色格跳跃 + 飞行格飞跃连锁）
+function destOf(steps, die) {
+  if (steps === -1) return 0
+  let next = steps + die
+  if (next > 56) next = 112 - next
+  if (next < 50) {
+    // 色格跳跃 +4（直接落在飞行格时交给飞跃处理）
+    if (next !== 20 && next % 4 === 0 && next + 4 < 50) next += 4
+    // 飞行格飞跃 +12，落点仍是色格则再跳 4
+    if (next === 20) {
+      next = 32
+      if (next + 4 < 50) next += 4
+    }
+  }
+  return next
+}
+
+// 飞机造型路径（机头朝上、中心为原点）
+const PLANE_PATH =
+  'M0,-13 C2,-10 2.6,-7 2.6,-4 L11,3 L11,6.2 L2.6,2.4 L2.6,7 L6,10.5 L6,12.6 L0,11 L-6,12.6 L-6,10.5 L-2.6,7 L-2.6,2.4 L-11,6.2 L-11,3 L-2.6,-4 C-2.6,-7 -2,-10 0,-13 Z'
+
+// ---------------------------------------------------------------------
+// 显示状态：动画期间与服务端快照解耦
+// ---------------------------------------------------------------------
+const view = reactive({
+  steps: [[-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1]],
+  die: 1,
+  dieTick: 0,
+  turn: 0,
+  animating: false,
+  moving: null,   // 正在逐格跳动的飞机 "seat-plane"
+  flyKeys: {},    // 长距离滑翔中的飞机（起飞/跳跃/被击落返回）
+})
+const banner = ref(null) // 事件横幅 {id, text, cls}
+const crash = ref(null)  // 击落爆炸 {id, x, y}
+const burst = ref(null)  // 到达终点光环 {id}
+let fxId = 0
+let alive = true
+onUnmounted(() => { alive = false })
+
+const delay = (ms) => new Promise((r) => setTimeout(r, ms))
+const seatName = (i) => st.value?.seats?.[i]?.name || `玩家${i + 1}`
+const doneCount = (s) => (ludo.value?.planes?.[s] || []).filter((v) => v >= 56).length
+
+function snap(l) {
+  view.steps = (l.planes || view.steps).map((row) => [...row])
+  if (l.die > 0) view.die = l.die
+  view.turn = l.turn
+  view.moving = null
+  view.flyKeys = {}
+}
+function setFly(seat, plane, on) {
+  if (on) view.flyKeys[`${seat}-${plane}`] = true
+  else delete view.flyKeys[`${seat}-${plane}`]
+}
+
+let bannerId = 0
+let bannerTimer = null
+function showBanner(text, cls = 'info', ms = 1400) {
+  banner.value = { id: ++bannerId, text, cls }
+  clearTimeout(bannerTimer)
+  bannerTimer = setTimeout(() => { banner.value = null }, ms)
+}
+
+// ---------------------------------------------------------------------
+// 动画事件队列：凭连续 seq 判断播放动画，否则直接对齐
+// ---------------------------------------------------------------------
+let lastSeq = -1
+let lastTurnBannerSeq = -1
+const queue = []
+let pumping = false
+
+watch(ludo, (l) => {
+  if (!l) {
+    lastSeq = -1
+    queue.length = 0
+    return
+  }
+  const seq = l.seq ?? 0
+  if (lastSeq >= 0 && seq === lastSeq + 1) {
+    lastSeq = seq
+    queue.push({ events: l.events || [], final: l })
+    pump()
+  } else if (seq !== lastSeq) {
+    lastSeq = seq
+    queue.length = 0
+    snap(l)
+  } else if (!pumping) {
+    snap(l)
+  }
+}, { immediate: true })
+
+async function pump() {
+  if (pumping) return
+  pumping = true
+  view.animating = true
+  while (queue.length && alive) {
+    const job = queue.shift()
+    const fast = queue.length >= 2
+    for (const e of job.events) {
+      if (!alive) break
+      await playEvent(e, fast)
+    }
+    snap(job.final)
+  }
+  view.animating = false
+  pumping = false
+  const l = ludo.value
+  if (l && l.turn === mySeat.value && l.phase === 'roll' && lastTurnBannerSeq !== lastSeq) {
+    lastTurnBannerSeq = lastSeq
+    showBanner('🎲 轮到你掷骰了！', 'turn', 1300)
+  }
+}
+
+// 播放单条动画事件；fast 为快进模式
+async function playEvent(e, fast) {
+  const f = (ms) => (fast ? Math.min(ms, 70) : ms)
+  switch (e.kind) {
+    case 'roll':
+      view.die = e.die
+      view.dieTick++
+      await delay(f(950))
+      break
+    case 'nomove':
+      showBanner(`${seatName(e.seat)} 无棋可动`, 'dim', 1000)
+      await delay(f(550))
+      break
+    case 'takeoff':
+      setFly(e.seat, e.plane, true)
+      view.steps[e.seat][e.plane] = 0
+      showBanner(`🛫 ${seatName(e.seat)} 的飞机起飞！`, 'info', 1100)
+      await delay(f(620))
+      setFly(e.seat, e.plane, false)
+      break
+    case 'move': {
+      // 逐格跳动；冲过终点反弹：先走到 56 再折返
+      const die = e.die || 0
+      const path = []
+      if (die > 0 && e.from + die > 56) {
+        for (let s = e.from + 1; s <= 56; s++) path.push(s)
+        for (let s = 55; s >= e.to; s--) path.push(s)
+      } else {
+        for (let s = e.from + 1; s <= e.to; s++) path.push(s)
+      }
+      view.moving = `${e.seat}-${e.plane}`
+      for (const s of path) {
+        view.steps[e.seat][e.plane] = s
+        await delay(f(150))
+      }
+      view.steps[e.seat][e.plane] = e.to
+      view.moving = null
+      break
+    }
+    case 'jump':
+      setFly(e.seat, e.plane, true)
+      view.steps[e.seat][e.plane] = e.to
+      showBanner(`✨ ${seatName(e.seat)} 踩中己方颜色格，跳跃 +4`, 'good', 1200)
+      await delay(f(620))
+      setFly(e.seat, e.plane, false)
+      break
+    case 'fly':
+      // 沿虚线航道长距离滑翔
+      setFly(e.seat, e.plane, true)
+      view.steps[e.seat][e.plane] = e.to
+      showBanner(`✈ ${seatName(e.seat)} 飞跃航线 +12！`, 'good', 1300)
+      await delay(f(700))
+      setFly(e.seat, e.plane, false)
+      break
+    case 'sixpenalty':
+      showBanner(`⚠ ${seatName(e.seat)} 连掷三个 6，飞机被遣返！`, 'bad', 1700)
+      if (e.plane >= 0) {
+        await delay(f(380))
+        setFly(e.seat, e.plane, true)
+        view.steps[e.seat][e.plane] = -1
+        await delay(f(550))
+        setFly(e.seat, e.plane, false)
+      } else {
+        await delay(f(620))
+      }
+      break
+    case 'capture': {
+      // 爆炸特效后被击落飞机滑翔回机库
+      const pt = pointOf(e.victim, e.vfrom, e.vplane)
+      crash.value = { id: ++fxId, x: pt.x, y: pt.y }
+      showBanner(`💥 ${seatName(e.seat)} 击落了 ${seatName(e.victim)} 的飞机！`, 'bad', 1700)
+      await delay(f(430))
+      setFly(e.victim, e.vplane, true)
+      view.steps[e.victim][e.vplane] = -1
+      await delay(f(540))
+      setFly(e.victim, e.vplane, false)
+      crash.value = null
+      break
+    }
+    case 'arrive':
+      burst.value = { id: ++fxId }
+      showBanner(`🏆 ${seatName(e.seat)} 的飞机到达终点！`, 'good', 1400)
+      await delay(f(680))
+      burst.value = null
+      break
+    case 'bonus':
+      showBanner(`🎲 ${seatName(e.seat)} 掷出 6 点，再掷一次`, 'turn', 1200)
+      await delay(f(480))
+      break
+  }
+}
+
+// ---------------------------------------------------------------------
+// 渲染数据
+// ---------------------------------------------------------------------
+// 各座位飞行格的绝对格号（相对第 20 步，恰好都是自家颜色格）
+const FLY_CELLS = new Set([20, 33, 46, 7])
+// 主航道 52 格渲染数据（起点 ▶ 与飞行格 ✈ 加注）
+const trackCells = computed(() =>
+  Array.from({ length: 52 }, (_, i) => ({
+    i,
+    ...cellPoint(i),
+    color: SEAT_COLORS[i % 4],
+    isStart: i % 13 === 0,
+    isFly: FLY_CELLS.has(i),
+  }))
+)
+// 四条飞跃虚线航道：飞行格 → 对岸落点（相对 +12 格）
+const flyLines = computed(() =>
+  Array.from({ length: 4 }, (_, s) => {
+    const a = cellPoint((s * 13 + 20) % 52)
+    const b = cellPoint((s * 13 + 32) % 52)
+    return { s, x1: a.x, y1: a.y, x2: b.x, y2: b.y }
+  })
+)
+// 全部 16 架飞机（显示位置由 view.steps 驱动，同格棋子横向错开）
+const planes = computed(() => {
+  const g = ludo.value
+  if (!g) return []
+  const list = []
+  for (let s = 0; s < 4; s++) {
+    for (let p = 0; p < 4; p++) {
+      const steps = view.steps[s]?.[p] ?? -1
+      const pt = pointOf(s, steps, p)
+      const key = pt.kind === 'track' ? `c${pt.cell}` : pt.kind === 'stretch' ? `s${s}-${steps}` : `${pt.kind}${s}-${p}`
+      list.push({
+        seat: s, plane: p, steps, key,
+        x: pt.x, y: pt.y, rot: rotOf(s, steps),
+        inactive: !g.active[s],
+        moving: view.moving === `${s}-${p}`,
+        flying: !!view.flyKeys[`${s}-${p}`],
+      })
+    }
+  }
+  const byKey = {}
+  for (const pl of list) (byKey[pl.key] ||= []).push(pl)
+  for (const group of Object.values(byKey)) {
+    group.forEach((pl, idx) => {
+      pl.x += (idx - (group.length - 1) / 2) * 9
+    })
+  }
+  return list
+})
+// 我当前可动的棋子集合（动画播放中暂不可点，防止误操作）
+const movableSet = computed(() => {
+  const g = ludo.value
+  if (!g || !myTurn.value || g.phase !== 'move' || view.animating) return new Set()
+  return new Set(g.movable || [])
+})
+// 可动棋子的落点预览（虚线圆环 + 编号，点击同样可走）
+const ghosts = computed(() => {
+  const g = ludo.value
+  if (!g || !myTurn.value || g.phase !== 'move' || view.animating) return []
+  const seen = {}
+  return (g.movable || []).map((p) => {
+    const dest = destOf(g.planes[mySeat.value][p], g.die)
+    const pt = pointOf(mySeat.value, dest, p)
+    // 多架飞机落点相同（如掷 6 多架可起飞）：横向微错开避免完全重叠
+    const n = (seen[dest] = (seen[dest] || 0) + 1)
+    return { plane: p, x: pt.x + (n - 1) * 11, y: pt.y }
+  })
+})
+function clickPlane(pl) {
+  if (pl.seat === mySeat.value && movableSet.value.has(pl.plane)) {
+    battle.ludoMove(pl.plane)
+  }
+}
+function doRoll() {
+  if (view.animating) return
+  battle.ludoRoll()
+}
+</script>
+
+<template>
+  <div v-if="ludo" class="panel ludo-wrap">
+    <!-- 顶部信息条 -->
+    <div class="ludo-top">
+      <span class="turn-tag" :style="{ color: SEAT_COLORS[view.turn] }">
+        ● 轮到 {{ seatName(view.turn) }}{{ view.turn === mySeat ? '（你）' : '' }}
+      </span>
+      <Dice3D :value="view.die" :tick="view.dieTick" :size="38" />
+      <span class="rolls text-dim">第 {{ ludo.rolls }} 次掷骰</span>
+    </div>
+    <!-- 棋盘 -->
+    <div class="board-box">
+      <svg :viewBox="`0 0 ${SIZE} ${SIZE}`" class="ludo-svg">
+        <!-- 底盘装饰：同心圆 -->
+        <circle :cx="C" :cy="C" :r="R_TRACK + 22" fill="none" stroke="var(--border)" stroke-opacity="0.6" />
+        <circle :cx="C" :cy="C" :r="R_TRACK - 22" fill="none" stroke="var(--border)" stroke-opacity="0.35" />
+      <!-- 飞跃虚线航道（先画在航道下层） -->
+      <line
+        v-for="fl in flyLines"
+        :key="`fl${fl.s}`"
+        :x1="fl.x1"
+        :y1="fl.y1"
+        :x2="fl.x2"
+        :y2="fl.y2"
+        :stroke="SEAT_COLORS[fl.s]"
+        stroke-width="2"
+        stroke-dasharray="6 5"
+        stroke-opacity="0.35"
+      />
+      <!-- 主航道 -->
+      <g v-for="c in trackCells" :key="c.i">
+        <circle :cx="c.x" :cy="c.y" r="15" :fill="c.color" :fill-opacity="c.isStart || c.isFly ? 0.55 : 0.22" :stroke="c.color" stroke-opacity="0.6" />
+        <text v-if="c.isStart" :x="c.x" :y="c.y + 4" text-anchor="middle" font-size="12" :fill="c.color">▶</text>
+        <text v-else-if="c.isFly" :x="c.x" :y="c.y + 4" text-anchor="middle" font-size="11" :fill="c.color">✈</text>
+      </g>
+        <!-- 终点跑道（每家 6 格向心） -->
+        <g v-for="s in 4" :key="`st${s}`">
+          <circle
+            v-for="k in 6"
+            :key="k"
+            :cx="stretchPoint(s - 1, k - 1).x"
+            :cy="stretchPoint(s - 1, k - 1).y"
+            r="10"
+            :fill="SEAT_COLORS[s - 1]"
+            :fill-opacity="0.28"
+            :stroke="SEAT_COLORS[s - 1]"
+            stroke-opacity="0.5"
+          />
+        </g>
+        <!-- 中心终点 -->
+        <circle :cx="C" :cy="C" r="15" fill="var(--primary)" fill-opacity="0.35" stroke="var(--primary)" />
+        <text :x="C" :y="C + 4" text-anchor="middle" font-size="11" fill="var(--text)">终</text>
+        <!-- 到达终点的扩散光环 -->
+        <circle v-if="burst" :key="burst.id" :cx="C" :cy="C" r="15" class="burst-ring" />
+        <!-- 机库 -->
+        <g v-for="s in 4" :key="`hg${s}`">
+          <rect
+            :x="HANGAR_CENTERS[s - 1].x - 36"
+            :y="HANGAR_CENTERS[s - 1].y - 36"
+            width="72"
+            height="72"
+            rx="12"
+            :fill="SEAT_COLORS[s - 1]"
+            fill-opacity="0.12"
+            :stroke="SEAT_COLORS[s - 1]"
+            stroke-opacity="0.45"
+          />
+        </g>
+        <!-- 落点预览（虚线圆环，点击可走） -->
+        <g v-for="gh in ghosts" :key="`gh${gh.plane}`" class="ghost" @click="battle.ludoMove(gh.plane)">
+          <circle :cx="gh.x" :cy="gh.y" r="14" fill="none" :stroke="SEAT_COLORS[mySeat]" stroke-width="2" stroke-dasharray="4 3" class="ghost-ring" />
+          <text :x="gh.x" :y="gh.y + 3.5" text-anchor="middle" font-size="10" font-weight="700" :fill="SEAT_COLORS[mySeat]">{{ gh.plane + 1 }}</text>
+        </g>
+        <!-- 飞机棋子 -->
+        <g
+          v-for="pl in planes"
+          :key="`${pl.seat}-${pl.plane}`"
+          class="plane"
+          :class="{
+            clickable: pl.seat === mySeat && movableSet.has(pl.plane),
+            flying: pl.flying,
+            inactive: pl.inactive,
+          }"
+          :style="{ transform: `translate(${pl.x}px, ${pl.y}px)` }"
+          @click="clickPlane(pl)"
+        >
+          <!-- 可动棋子的呼吸光圈 -->
+          <circle v-if="pl.seat === mySeat && movableSet.has(pl.plane)" r="17" fill="none" stroke="#fff" stroke-width="2" class="pulse" />
+          <g class="plane-inner" :class="{ hopping: pl.moving }" :style="{ transform: `rotate(${pl.rot}deg)` }">
+            <path :d="PLANE_PATH" :fill="SEAT_COLORS[pl.seat]" stroke="#fff" stroke-width="1.6" stroke-linejoin="round" />
+            <ellipse cx="0" cy="-5.5" rx="1.9" ry="2.8" fill="#fff" opacity="0.9" />
+            <text y="9.5" text-anchor="middle" font-size="6.5" font-weight="700" fill="#fff">{{ pl.plane + 1 }}</text>
+          </g>
+        </g>
+        <!-- 击落爆炸特效 -->
+        <g v-if="crash" :key="crash.id" class="crash" :style="{ transform: `translate(${crash.x}px, ${crash.y}px)` }">
+          <circle r="16" class="crash-ring" />
+          <text y="7" text-anchor="middle" font-size="20" class="crash-boom">💥</text>
+        </g>
+      </svg>
+      <!-- 事件横幅 -->
+      <transition name="lbanner">
+        <div v-if="banner" :key="banner.id" class="banner" :class="banner.cls">{{ banner.text }}</div>
+      </transition>
+    </div>
+    <!-- 玩家图例与操作 -->
+    <div class="ludo-bottom">
+      <div class="legend">
+        <span v-for="s in 4" :key="s" class="lg-item" :class="{ inactive: !ludo.active[s - 1], cur: view.turn === s - 1 }">
+          <span class="lg-dot" :style="{ background: SEAT_COLORS[s - 1] }"></span>
+          {{ seatName(s - 1) }} <b>{{ doneCount(s - 1) }}/4</b>
+        </span>
+      </div>
+      <button v-if="myTurn && ludo.phase === 'roll'" class="btn btn-lg" :disabled="view.animating" @click="doRoll">
+        🎲 掷骰子
+      </button>
+      <p v-else-if="myTurn && ludo.phase === 'move' && !view.animating" class="hint">
+        掷出 {{ ludo.die }} 点，点击发光的飞机或虚线落点
+      </p>
+      <p v-else class="hint text-dim">等待 {{ seatName(view.turn) }} 行动…</p>
+    </div>
+    <p class="ludo-tips text-dim">
+      掷 6 起飞并奖励再掷（连三个 6 遣返）· 踩中对手将其击落 · 落自家色格跳 4 格 · 踩中 ✈ 飞行格沿虚线飞跃 12 格 · 四机到达获胜
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.ludo-wrap {
+  padding: 14px;
+}
+.ludo-top {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+.turn-tag {
+  font-weight: 700;
+  font-size: 13px;
+}
+.rolls {
+  font-size: 12px;
+}
+.board-box {
+  position: relative;
+  max-width: 560px;
+  margin: 0 auto;
+}
+.ludo-svg {
+  display: block;
+  width: 100%;
+}
+/* ---- 飞机 ---- */
+.plane {
+  transition: transform 0.14s linear;
+  transform-box: view-box;
+}
+.plane.flying {
+  transition: transform 0.55s cubic-bezier(0.3, 0, 0.2, 1);
+}
+.plane.clickable {
+  cursor: pointer;
+}
+.plane.inactive {
+  opacity: 0.25;
+}
+.plane-inner {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform 0.2s linear;
+  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
+}
+.plane-inner.hopping {
+  animation: plane-hop 0.15s ease-in-out infinite;
+}
+@keyframes plane-hop {
+  50% {
+    filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.35));
+    scale: 1.18;
+  }
+}
+.pulse {
+  animation: pulse 1s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%,
+  100% {
+    stroke-opacity: 1;
+  }
+  50% {
+    stroke-opacity: 0.25;
+  }
+}
+/* ---- 落点预览 ---- */
+.ghost {
+  cursor: pointer;
+  /* 虚线圆环 fill 为 none，默认只有描边可点击；改为整个圆面都可点 */
+  pointer-events: all;
+}
+.ghost-ring {
+  animation: ghost-spin 3s linear infinite;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+@keyframes ghost-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* ---- 击落爆炸 ---- */
+.crash {
+  pointer-events: none;
+  transform-box: view-box;
+}
+.crash-ring {
+  fill: none;
+  stroke: #ffb020;
+  stroke-width: 3;
+  animation: crash-ring 0.45s ease-out forwards;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+.crash-boom {
+  animation: crash-boom 0.45s ease-out;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+@keyframes crash-ring {
+  0% {
+    transform: scale(0.4);
+    stroke-opacity: 1;
+  }
+  100% {
+    transform: scale(1.9);
+    stroke-opacity: 0;
+  }
+}
+@keyframes crash-boom {
+  0% {
+    transform: scale(0.3);
+  }
+  60% {
+    transform: scale(1.35);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+/* ---- 到达光环 ---- */
+.burst-ring {
+  fill: none;
+  stroke: var(--primary);
+  stroke-width: 3;
+  animation: burst 0.65s ease-out forwards;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+@keyframes burst {
+  0% {
+    transform: scale(1);
+    stroke-opacity: 1;
+  }
+  100% {
+    transform: scale(3.2);
+    stroke-opacity: 0;
+  }
+}
+/* ---- 事件横幅 ---- */
+.banner {
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 22px;
+  border-radius: 999px;
+  font-size: 15px;
+  font-weight: 800;
+  white-space: nowrap;
+  z-index: 5;
+  background: rgba(10, 12, 24, 0.86);
+  border: 1px solid var(--border);
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
+}
+.banner.good {
+  color: #4ade80;
+  border-color: #4ade8066;
+}
+.banner.bad {
+  color: #ff6b6b;
+  border-color: #ff6b6b66;
+}
+.banner.dim {
+  color: var(--text-dim);
+}
+.banner.turn {
+  color: var(--primary-2);
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+}
+.lbanner-enter-active,
+.lbanner-leave-active {
+  transition: opacity 0.25s, transform 0.25s;
+}
+.lbanner-enter-from,
+.lbanner-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-8px) scale(0.9);
+}
+/* ---- 底部 ---- */
+.ludo-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+.legend {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  font-size: 12px;
+}
+.lg-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+}
+.lg-item.cur {
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+}
+.lg-item.inactive {
+  opacity: 0.4;
+  text-decoration: line-through;
+}
+.lg-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.hint {
+  font-size: 13px;
+}
+.btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.ludo-tips {
+  margin-top: 10px;
+  font-size: 11px;
+  text-align: center;
+}
+</style>
diff --git a/src/components/battle/MonopolyBoard.vue b/src/components/battle/MonopolyBoard.vue
new file mode 100644
index 0000000..938bd81
--- /dev/null
+++ b/src/components/battle/MonopolyBoard.vue
@@ -0,0 +1,884 @@
+<script setup>
+// 大富翁棋盘：7×7 环形 24 格 + 中央信息区
+// 表现层向成熟棋牌游戏看齐：服务端每次动作随状态下发结构化动画事件（st.mono.events + seq），
+// 本组件维护一份「显示状态 view」按事件顺序播放动画（3D 骰子翻滚 → 棋子逐格跳动 → 金钱漂浮/
+// 机会卡翻牌/地契购买卡/破产横幅），全部播完后再与服务端快照对齐，保证不漂移
+import { computed, reactive, ref, watch, onUnmounted } from 'vue'
+import { useBattleStore } from '../../stores/battle'
+import Dice3D from './Dice3D.vue'
+
+const battle = useBattleStore()
+const st = computed(() => battle.roomState)
+const mono = computed(() => st.value?.mono)
+const mySeat = computed(() => st.value?.my_seat ?? -1)
+const myTurn = computed(() => mono.value?.turn === mySeat.value)
+
+// 四个座位的主题色（与飞行棋保持一致）与棋子造型
+const SEAT_COLORS = ['#ff5d73', '#4da3ff', '#ffb300', '#4ade80']
+const TOKEN_EMOJIS = ['🚗', '🛩️', '🚤', '🎩']
+// 七个地产颜色组（经典大富翁的分段色带）
+const GROUP_COLORS = ['#e74c3c', '#e67e22', '#f1c40f', '#2ecc71', '#1abc9c', '#3498db', '#9b59b6']
+const TYPE_ICONS = { go: '🏁', chance: '❓', tax: '💰', jail: '🚔', gotojail: '👮', park: '🅿️' }
+
+// 24 格在 7×7 网格上的位置：0-6 左列自下而上，7-12 顶行向右，13-18 右列向下，19-23 底行向左
+function gridPos(idx) {
+  if (idx <= 6) return { row: 7 - idx, col: 1 }
+  if (idx <= 12) return { row: 1, col: idx - 5 }
+  if (idx <= 18) return { row: idx - 11, col: 7 }
+  return { row: 7, col: 25 - idx }
+}
+// 格子中心在棋盘内的百分比坐标（棋子定位用）
+function cellPercent(idx) {
+  const { row, col } = gridPos(idx)
+  return { x: ((col - 0.5) / 7) * 100, y: ((row - 0.5) / 7) * 100 }
+}
+
+// ---------------------------------------------------------------------
+// 显示状态：动画期间与服务端快照解耦
+// ---------------------------------------------------------------------
+const view = reactive({
+  pos: [],         // 各座位棋子当前显示的格子
+  money: [],       // 各座位显示中的金钱（数字滚动）
+  out: [],         // 出局标记
+  dice: [1, 1],    // 骰子显示点数
+  diceTick: 0,     // 骰子翻滚触发器
+  turn: 0,         // 当前行动者（动画播完才切换）
+  animating: false,
+  movingSeat: -1,  // 正在逐格移动的座位（棋子加跳跃动画）
+  flying: -1,      // 正在直达传送的座位（棋子加长距离飞行过渡）
+  flashTile: -1,   // 刚被买下的地块（高亮闪烁）
+})
+const banner = ref(null)     // 事件横幅 {id, text, cls}
+const floats = ref([])       // 金钱漂浮 [{id, x, y, text, cls}]
+const chanceCard = ref(null) // 机会卡翻牌 {text}
+let alive = true
+onUnmounted(() => { alive = false })
+
+const delay = (ms) => new Promise((r) => setTimeout(r, ms))
+const seatName = (i) => st.value?.seats?.[i]?.name || `玩家${i + 1}`
+const tileCount = computed(() => (mono.value?.tiles || []).length || 24)
+
+// 与服务端快照直接对齐（首次进入 / 重连 / 每段动画播完）
+function snap(m) {
+  const players = m.players || []
+  view.pos = players.map((p) => p.pos)
+  view.money = players.map((p) => p.money)
+  view.out = players.map((p) => p.out)
+  view.turn = m.turn
+  if (m.dice?.[0]) view.dice = [...m.dice]
+  view.movingSeat = -1
+  view.flying = -1
+}
+
+// 金钱数字滚动到目标值
+function tweenMoney(seat, to, ms = 450) {
+  const from = view.money[seat] ?? to
+  const t0 = performance.now()
+  const step = (t) => {
+    if (!alive) return
+    const k = Math.min(1, (t - t0) / ms)
+    view.money[seat] = Math.round(from + (to - from) * k)
+    if (k < 1) requestAnimationFrame(step)
+  }
+  requestAnimationFrame(step)
+}
+
+// 事件横幅（自动消失）
+let bannerId = 0
+let bannerTimer = null
+function showBanner(text, cls = 'info', ms = 1500) {
+  banner.value = { id: ++bannerId, text, cls }
+  clearTimeout(bannerTimer)
+  bannerTimer = setTimeout(() => { banner.value = null }, ms)
+}
+
+// 金钱漂浮字（出现在棋子所在格上方）
+let floatId = 0
+function spawnFloat(seat, amount) {
+  const { x, y } = cellPercent(view.pos[seat] ?? 0)
+  const id = ++floatId
+  floats.value.push({ id, x, y, text: (amount > 0 ? '+' : '') + amount, cls: amount > 0 ? 'gain' : 'lose' })
+  setTimeout(() => { floats.value = floats.value.filter((f) => f.id !== id) }, 1300)
+}
+
+// ---------------------------------------------------------------------
+// 动画事件队列：凭连续 seq 判断播放动画，否则直接对齐
+// ---------------------------------------------------------------------
+let lastSeq = -1
+let lastTurnBannerSeq = -1
+const queue = []
+let pumping = false
+
+watch(mono, (m) => {
+  if (!m) {
+    lastSeq = -1
+    queue.length = 0
+    return
+  }
+  const seq = m.seq ?? 0
+  if (lastSeq >= 0 && seq === lastSeq + 1) {
+    lastSeq = seq
+    queue.push({ events: m.events || [], final: m })
+    pump()
+  } else if (seq !== lastSeq) {
+    // 首次进入 / 断线重连 / 新开一局：直接对齐快照，不播动画
+    lastSeq = seq
+    queue.length = 0
+    snap(m)
+  } else if (!pumping) {
+    // 序号未变的重复广播（座位变化等）：静默对齐
+    snap(m)
+  }
+}, { immediate: true })
+
+async function pump() {
+  if (pumping) return
+  pumping = true
+  view.animating = true
+  while (queue.length && alive) {
+    const job = queue.shift()
+    // 队列积压过多（连续 AI 快速行动）：快进播放避免越拖越长
+    const fast = queue.length >= 2
+    for (const e of job.events) {
+      if (!alive) break
+      await playEvent(e, fast)
+    }
+    snap(job.final)
+  }
+  view.animating = false
+  pumping = false
+  // 动画全部播完后轮到我：弹提醒横幅（一个回合只提醒一次）
+  const m = mono.value
+  if (m && m.turn === mySeat.value && m.phase === 'roll' && lastTurnBannerSeq !== lastSeq) {
+    lastTurnBannerSeq = lastSeq
+    showBanner('🎲 轮到你掷骰了！', 'turn', 1300)
+  }
+}
+
+// 播放单条动画事件；fast 为快进模式
+async function playEvent(e, fast) {
+  const f = (ms) => (fast ? Math.min(ms, 80) : ms)
+  switch (e.kind) {
+    case 'roll':
+      view.dice = [e.d1, e.d2]
+      view.diceTick++
+      await delay(f(1000))
+      break
+    case 'move': {
+      // 逐格跳动前进（环形跨起点）
+      const n = tileCount.value
+      view.movingSeat = e.seat
+      let idx = e.from
+      for (let guard = 0; guard < n + 2; guard++) {
+        idx = (idx + 1) % n
+        view.pos[e.seat] = idx
+        await delay(f(165))
+        if (idx === e.to) break
+      }
+      view.movingSeat = -1
+      break
+    }
+    case 'teleport':
+      // 直达传送（入狱/直达起点）：长距离飞行过渡
+      view.flying = e.seat
+      showBanner(`${seatName(e.seat)} ${e.text || '传送'}`, e.to === 6 ? 'bad' : 'info')
+      await delay(30)
+      view.pos[e.seat] = e.to
+      await delay(f(750))
+      view.flying = -1
+      break
+    case 'cash':
+      spawnFloat(e.seat, e.amount)
+      tweenMoney(e.seat, (view.money[e.seat] ?? 0) + e.amount)
+      await delay(f(330))
+      break
+    case 'chance':
+      chanceCard.value = { text: e.text }
+      await delay(f(1650))
+      chanceCard.value = null
+      break
+    case 'buy':
+      view.flashTile = e.tile
+      showBanner(`🏠 ${seatName(e.seat)} 买下了「${e.text}」`, 'good')
+      await delay(f(850))
+      view.flashTile = -1
+      break
+    case 'upgrade':
+      view.flashTile = e.tile
+      showBanner(`🏗 ${seatName(e.seat)} 把「${e.text}」升级为${LEVEL_NAMES[e.amount] || '高级建筑'}`, 'good')
+      await delay(f(850))
+      view.flashTile = -1
+      break
+    case 'bankrupt':
+      view.out[e.seat] = true
+      showBanner(`💥 ${seatName(e.seat)} 破产出局！`, 'bad', 1800)
+      await delay(f(950))
+      break
+    case 'rest':
+      showBanner(`💤 ${seatName(e.seat)} 休息中，跳过回合`, 'dim', 1100)
+      await delay(f(450))
+      break
+  }
+}
+
+// ---------------------------------------------------------------------
+// 渲染数据
+// ---------------------------------------------------------------------
+// 某座位是否集齐指定颜色组（租金×2 标记）
+function ownsFullGroup(list, owner, group) {
+  if (owner < 0 || group < 0) return false
+  return list.filter((t) => t.group === group).every((t) => t.owner === owner)
+}
+const tiles = computed(() => {
+  const list = mono.value?.tiles || []
+  return list.map((t) => ({
+    ...t,
+    style: {
+      gridRow: gridPos(t.idx).row,
+      gridColumn: gridPos(t.idx).col,
+      '--band': t.group >= 0 ? GROUP_COLORS[t.group % GROUP_COLORS.length] : 'transparent',
+      '--owner': t.owner >= 0 ? SEAT_COLORS[t.owner] : 'transparent',
+    },
+    icon: TYPE_ICONS[t.type] || '',
+    full: t.type === 'prop' && t.owner >= 0 && ownsFullGroup(list, t.owner, t.group),
+  }))
+})
+// 棋子渲染：显示位置来自 view（动画驱动），同格四人按象限微错开
+const tokens = computed(() => {
+  const players = mono.value?.players || []
+  return players.map((p, i) => {
+    const { x, y } = cellPercent(view.pos[i] ?? p.pos)
+    const dx = (i % 2 ? 1 : -1) * 9
+    const dy = (i > 1 ? 1 : -1) * 9
+    return {
+      seat: i,
+      out: view.out[i] ?? p.out,
+      x: `calc(${x}% + ${dx}px)`,
+      y: `calc(${y}% + ${dy}px)`,
+      color: SEAT_COLORS[i],
+      emoji: TOKEN_EMOJIS[i],
+      hopping: view.movingSeat === i,
+      flying: view.flying === i,
+      active: view.turn === i,
+    }
+  })
+})
+const players = computed(() => mono.value?.players || [])
+const turnName = computed(() => seatName(view.turn))
+// 建筑等级名称
+const LEVEL_NAMES = ['空地', '小屋', '楼房', '酒店']
+// 待决策信息（买地或升级，kind 区分）
+const pending = computed(() => {
+  const m = mono.value
+  if (!m || !m.pending) return null
+  if (m.phase !== 'buy' && m.phase !== 'upgrade') return null
+  return m.pending
+})
+const pendingTile = computed(() => {
+  if (!pending.value) return null
+  return (mono.value.tiles || []).find((t) => t.idx === pending.value.tile) || null
+})
+// 决策卡动画播完才弹出，避免棋子还没走到就先问买不买/升不升
+const showBuyCard = computed(() => myTurn.value && pending.value?.kind === 'buy' && pendingTile.value && !view.animating)
+const showUpgradeCard = computed(() => myTurn.value && pending.value?.kind === 'upgrade' && pendingTile.value && !view.animating)
+
+function doRoll() {
+  if (view.animating) return
+  battle.monoRoll()
+}
+</script>
+
+<template>
+  <div v-if="mono" class="panel mono-wrap">
+    <!-- 顶部信息条 -->
+    <div class="mono-top">
+      <span class="round">第 {{ mono.round }} / {{ mono.max_rounds }} 轮</span>
+      <span class="turn-tag" :style="{ color: SEAT_COLORS[view.turn] }">
+        ● 轮到 {{ turnName }}{{ view.turn === mySeat ? '（你）' : '' }}
+      </span>
+    </div>
+    <!-- 棋盘 -->
+    <div class="board">
+      <div
+        v-for="t in tiles"
+        :key="t.idx"
+        class="tile"
+        :class="[t.type, { owned: t.owner >= 0, flash: view.flashTile === t.idx }]"
+        :style="t.style"
+      >
+        <span v-if="t.type === 'prop'" class="band"></span>
+        <span v-if="t.type === 'prop' && t.level > 0" class="t-lvl">{{ t.level >= 3 ? '🏨' : '🏠'.repeat(t.level) }}</span>
+        <span class="t-icon">{{ t.icon }}</span>
+        <span class="t-name">{{ t.name }}</span>
+        <span v-if="t.type === 'prop'" class="t-price">
+          <template v-if="t.owner >= 0">
+            <span class="owner-dot" :style="{ background: SEAT_COLORS[t.owner] }"></span>
+            <span :style="{ color: SEAT_COLORS[t.owner] }">{{ t.full ? '★×2' : seatName(t.owner) }}</span>
+          </template>
+          <template v-else>¥{{ t.price }}</template>
+        </span>
+      </div>
+      <!-- 中央区域 -->
+      <div class="center">
+        <div class="players">
+          <div
+            v-for="(p, i) in players"
+            :key="p.seat"
+            class="p-row"
+            :class="{ out: view.out[i] ?? p.out, cur: view.turn === i }"
+          >
+            <span class="p-token" :style="{ background: SEAT_COLORS[i] }">{{ TOKEN_EMOJIS[i] }}</span>
+            <span class="p-name">{{ seatName(i) }}</span>
+            <b class="p-money">¥{{ view.money[i] ?? p.money }}</b>
+            <span class="p-assets text-dim">总{{ p.assets }}</span>
+            <span v-if="view.out[i] ?? p.out" class="p-out">破产</span>
+            <span v-else-if="p.skip > 0" class="p-skip">💤</span>
+          </div>
+        </div>
+        <div class="dice-row">
+          <Dice3D :value="view.dice[0]" :tick="view.diceTick" :size="46" />
+          <Dice3D :value="view.dice[1]" :tick="view.diceTick" :size="46" />
+        </div>
+        <div class="actions">
+          <button
+            v-if="myTurn && mono.phase === 'roll'"
+            class="btn btn-lg roll-btn"
+            :disabled="view.animating"
+            @click="doRoll"
+          >
+            🎲 掷骰子
+          </button>
+          <p v-else-if="(mono.phase === 'buy' || mono.phase === 'upgrade') && !myTurn" class="text-dim wait-hint">
+            {{ turnName }} 正在考虑{{ mono.phase === 'buy' ? '购买' : '升级' }}…
+          </p>
+          <p v-else-if="mono.phase !== 'buy' && mono.phase !== 'upgrade'" class="text-dim wait-hint">
+            等待 {{ turnName }} 行动…
+          </p>
+        </div>
+      </div>
+      <!-- 棋子层（覆盖全棋盘，逐格移动动画） -->
+      <div class="tokens-layer">
+        <div
+          v-for="tk in tokens"
+          :key="tk.seat"
+          class="token"
+          :class="{ out: tk.out, hopping: tk.hopping, flying: tk.flying, active: tk.active }"
+          :style="{ left: tk.x, top: tk.y, '--tc': tk.color }"
+        >
+          <span class="token-body">{{ tk.emoji }}</span>
+        </div>
+      </div>
+      <!-- 金钱漂浮层 -->
+      <div class="fx-layer">
+        <span
+          v-for="fl in floats"
+          :key="fl.id"
+          class="cash-float"
+          :class="fl.cls"
+          :style="{ left: fl.x + '%', top: fl.y + '%' }"
+        >
+          {{ fl.text }}
+        </span>
+      </div>
+      <!-- 事件横幅 -->
+      <transition name="mbanner">
+        <div v-if="banner" :key="banner.id" class="banner" :class="banner.cls">{{ banner.text }}</div>
+      </transition>
+      <!-- 机会卡翻牌 -->
+      <transition name="cardpop">
+        <div v-if="chanceCard" class="overlay">
+          <div class="chance-card">
+            <div class="cc-title">❓ 机 会</div>
+            <div class="cc-text">{{ chanceCard.text }}</div>
+          </div>
+        </div>
+      </transition>
+      <!-- 地契购买卡 -->
+      <transition name="cardpop">
+        <div v-if="showBuyCard" class="overlay deed-overlay">
+          <div class="deed-card">
+            <div class="deed-band" :style="{ background: GROUP_COLORS[pendingTile.group % GROUP_COLORS.length] }">
+              地 契
+            </div>
+            <div class="deed-name">{{ pendingTile.name }}</div>
+            <div class="deed-rows">
+              <div class="deed-row"><span>地价</span><b>¥{{ pendingTile.price }}</b></div>
+              <div class="deed-row"><span>租金</span><b>¥{{ Math.floor(pendingTile.price * 0.3) }}</b></div>
+              <div class="deed-row"><span>集齐同色</span><b>租金 ×2</b></div>
+              <div class="deed-row dim"><span>我的现金</span><b>¥{{ view.money[mySeat] ?? 0 }}</b></div>
+            </div>
+            <div class="deed-btns">
+              <button class="btn" @click="battle.monoBuy(true)">买下</button>
+              <button class="btn btn-ghost" @click="battle.monoBuy(false)">不买</button>
+            </div>
+          </div>
+        </div>
+      </transition>
+      <!-- 建筑升级卡 -->
+      <transition name="cardpop">
+        <div v-if="showUpgradeCard" class="overlay deed-overlay">
+          <div class="deed-card">
+            <div class="deed-band" :style="{ background: GROUP_COLORS[pendingTile.group % GROUP_COLORS.length] }">
+              升 级
+            </div>
+            <div class="deed-name">{{ pendingTile.name }}</div>
+            <div class="deed-rows">
+              <div class="deed-row">
+                <span>建筑</span>
+                <b>{{ LEVEL_NAMES[pending.level] }} → {{ LEVEL_NAMES[pending.level + 1] }}</b>
+              </div>
+              <div class="deed-row"><span>费用</span><b>¥{{ pending.price }}</b></div>
+              <div class="deed-row">
+                <span>升级后租金</span>
+                <b>¥{{ Math.floor(pendingTile.price * 0.3) * 2 ** (pending.level + 1) }}</b>
+              </div>
+              <div class="deed-row dim"><span>我的现金</span><b>¥{{ view.money[mySeat] ?? 0 }}</b></div>
+            </div>
+            <div class="deed-btns">
+              <button class="btn" @click="battle.monoUpgrade(true)">升级</button>
+              <button class="btn btn-ghost" @click="battle.monoUpgrade(false)">不升</button>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+    <p class="mono-tips text-dim">
+      掷骰前进 · 无主地产可购买 · 回到自己地产可盖房（小屋/楼房/酒店，租金逐级翻倍）· 他人地产付租金（同色成组再翻倍）· 付不起即破产
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.mono-wrap {
+  padding: 14px;
+}
+.mono-top {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 10px;
+  font-size: 13px;
+  flex-wrap: wrap;
+}
+.round {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+}
+.turn-tag {
+  font-weight: 700;
+}
+.board {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: repeat(7, 1fr);
+  gap: 4px;
+  aspect-ratio: 1;
+  max-width: 620px;
+  margin: 0 auto;
+  position: relative;
+}
+/* ---- 地块 ---- */
+.tile {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  padding: 3px 2px 2px;
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+}
+.tile .band {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 5px;
+  background: var(--band);
+}
+.t-lvl {
+  position: absolute;
+  top: 6px;
+  right: 3px;
+  font-size: 8px;
+  line-height: 1;
+  letter-spacing: -2px;
+}
+.tile.owned {
+  box-shadow: inset 0 0 0 1.5px var(--owner);
+}
+.tile.flash {
+  animation: tile-flash 0.4s ease-in-out 2;
+}
+@keyframes tile-flash {
+  50% {
+    background: color-mix(in srgb, var(--owner) 35%, var(--bg-card));
+  }
+}
+.tile.go {
+  background: color-mix(in srgb, var(--primary) 18%, var(--bg-card));
+}
+.tile.gotojail,
+.tile.jail {
+  background: color-mix(in srgb, #888 14%, var(--bg-card));
+}
+.t-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+.t-name {
+  font-size: 10px;
+  font-weight: 700;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-price {
+  font-size: 9px;
+  color: var(--text-dim);
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.owner-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+/* ---- 棋子层 ---- */
+.tokens-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 3;
+}
+.token {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  margin: -12px 0 0 -12px;
+  transition: left 0.15s ease-in-out, top 0.15s ease-in-out;
+}
+.token.flying {
+  transition: left 0.7s cubic-bezier(0.3, 0, 0.2, 1), top 0.7s cubic-bezier(0.3, 0, 0.2, 1);
+  z-index: 5;
+}
+.token.active {
+  z-index: 4;
+}
+.token.out {
+  opacity: 0.25;
+  filter: grayscale(1);
+}
+.token-body {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 13px;
+  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tc) 65%, #fff), var(--tc));
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
+}
+.token.active .token-body {
+  box-shadow: 0 0 10px var(--tc), 0 2px 6px rgba(0, 0, 0, 0.45);
+}
+.token.hopping .token-body {
+  animation: hop 0.15s ease-in-out infinite;
+}
+.token.flying .token-body {
+  animation: fly-pulse 0.7s ease-in-out;
+}
+@keyframes hop {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(-7px) scale(1.12);
+  }
+}
+@keyframes fly-pulse {
+  50% {
+    transform: scale(1.5);
+  }
+}
+/* ---- 金钱漂浮 ---- */
+.fx-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 6;
+}
+.cash-float {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  font-size: 15px;
+  font-weight: 800;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+  animation: float-up 1.25s ease-out forwards;
+  white-space: nowrap;
+}
+.cash-float.gain {
+  color: #4ade80;
+}
+.cash-float.lose {
+  color: #ff6b6b;
+}
+@keyframes float-up {
+  0% {
+    opacity: 0;
+    margin-top: 0;
+  }
+  15% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    margin-top: -34px;
+  }
+}
+/* ---- 事件横幅 ---- */
+.banner {
+  position: absolute;
+  top: 16%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 22px;
+  border-radius: 999px;
+  font-size: 15px;
+  font-weight: 800;
+  white-space: nowrap;
+  z-index: 7;
+  background: rgba(10, 12, 24, 0.86);
+  border: 1px solid var(--border);
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
+}
+.banner.good {
+  color: #4ade80;
+  border-color: #4ade8066;
+}
+.banner.bad {
+  color: #ff6b6b;
+  border-color: #ff6b6b66;
+}
+.banner.dim {
+  color: var(--text-dim);
+}
+.banner.turn {
+  color: var(--primary-2);
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+}
+.mbanner-enter-active,
+.mbanner-leave-active {
+  transition: opacity 0.25s, transform 0.25s;
+}
+.mbanner-enter-from,
+.mbanner-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-8px) scale(0.9);
+}
+/* ---- 中央区域 ---- */
+.center {
+  grid-row: 2 / 7;
+  grid-column: 2 / 7;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+  padding: 10px;
+  min-width: 0;
+}
+.players {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.p-row {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 5px 9px;
+  font-size: 12px;
+}
+.p-row.cur {
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+}
+.p-row.out {
+  opacity: 0.45;
+}
+.p-token {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  flex-shrink: 0;
+  border: 1.5px solid #fff;
+}
+.p-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.p-money {
+  color: var(--primary-2);
+  font-variant-numeric: tabular-nums;
+}
+.p-assets {
+  font-size: 10px;
+}
+.p-out {
+  color: #ff6b6b;
+  font-size: 10px;
+}
+.p-skip {
+  font-size: 11px;
+}
+.dice-row {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  padding: 4px 0;
+}
+.actions {
+  text-align: center;
+}
+.roll-btn {
+  width: 100%;
+}
+.roll-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.wait-hint {
+  font-size: 12px;
+}
+/* ---- 弹层（机会卡 / 地契卡） ---- */
+.overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 9;
+  display: grid;
+  place-items: center;
+  background: rgba(4, 6, 14, 0.45);
+  border-radius: 10px;
+}
+.chance-card {
+  width: min(230px, 70%);
+  background: linear-gradient(160deg, #2a2350, #171232);
+  border: 2px solid #8b7ae8;
+  border-radius: 14px;
+  padding: 18px 16px;
+  text-align: center;
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
+  animation: card-flip 0.5s ease-out;
+}
+.cc-title {
+  font-size: 19px;
+  font-weight: 900;
+  color: #b8aaff;
+  letter-spacing: 6px;
+  margin-bottom: 10px;
+}
+.cc-text {
+  font-size: 14px;
+  line-height: 1.6;
+}
+@keyframes card-flip {
+  0% {
+    transform: rotateY(90deg) scale(0.8);
+  }
+  100% {
+    transform: rotateY(0) scale(1);
+  }
+}
+.deed-card {
+  width: min(240px, 74%);
+  background: var(--bg-panel, #141830);
+  border: 2px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
+  animation: card-flip 0.4s ease-out;
+}
+.deed-band {
+  padding: 9px;
+  text-align: center;
+  font-weight: 900;
+  letter-spacing: 8px;
+  color: #fff;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
+}
+.deed-name {
+  text-align: center;
+  font-size: 19px;
+  font-weight: 800;
+  padding: 10px 0 4px;
+}
+.deed-rows {
+  padding: 4px 18px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.deed-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12.5px;
+  border-bottom: 1px dashed var(--border);
+  padding-bottom: 4px;
+}
+.deed-row b {
+  color: var(--primary-2);
+}
+.deed-row.dim {
+  color: var(--text-dim);
+  border-bottom: none;
+}
+.deed-btns {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  padding: 0 16px 16px;
+}
+.deed-btns .btn {
+  flex: 1;
+}
+.cardpop-enter-active {
+  transition: opacity 0.2s;
+}
+.cardpop-leave-active {
+  transition: opacity 0.25s;
+}
+.cardpop-enter-from,
+.cardpop-leave-to {
+  opacity: 0;
+}
+.mono-tips {
+  margin-top: 10px;
+  font-size: 11px;
+  text-align: center;
+}
+</style>
diff --git a/src/components/battle/PlayingCard.vue b/src/components/battle/PlayingCard.vue
new file mode 100644
index 0000000..51863ba
--- /dev/null
+++ b/src/components/battle/PlayingCard.vue
@@ -0,0 +1,80 @@
+<script setup>
+// 扑克牌组件：按编码渲染点数与花色（0-51 普通牌，52 小王，53 大王）
+const props = defineProps({
+  card: { type: Number, required: true },
+  small: { type: Boolean, default: false },
+  selected: { type: Boolean, default: false },
+})
+const SUITS = ['♠', '♥', '♣', '♦']
+const RANKS = { 11: 'J', 12: 'Q', 13: 'K', 14: 'A', 15: '2' }
+
+function rankOf(c) {
+  if (c === 52) return '小王'
+  if (c === 53) return '大王'
+  const r = Math.floor(c / 4) + 3
+  return RANKS[r] || String(r)
+}
+function suitOf(c) {
+  if (c >= 52) return c === 53 ? '🃏' : '🂿'
+  return SUITS[c % 4]
+}
+function isRed(c) {
+  if (c === 53) return true
+  if (c === 52) return false
+  return c % 4 === 1 || c % 4 === 3
+}
+</script>
+
+<template>
+  <div class="pcard" :class="{ red: isRed(card), small, selected, joker: card >= 52 }">
+    <span class="rank">{{ rankOf(card) }}</span>
+    <span class="suit">{{ suitOf(card) }}</span>
+  </div>
+</template>
+
+<style scoped>
+.pcard {
+  width: 46px;
+  height: 64px;
+  background: #fdfdfd;
+  border-radius: 6px;
+  border: 1px solid #c9ccd6;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 3px 5px;
+  color: #1c1e26;
+  font-weight: 800;
+  transition: transform 0.12s;
+  user-select: none;
+  flex-shrink: 0;
+}
+.pcard.red {
+  color: #d5303e;
+}
+.pcard.selected {
+  transform: translateY(-14px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--accent);
+}
+.pcard.small {
+  width: 34px;
+  height: 48px;
+  font-size: 12px;
+}
+.rank {
+  font-size: 15px;
+  line-height: 1.1;
+}
+.small .rank {
+  font-size: 12px;
+}
+.joker .rank {
+  writing-mode: vertical-lr;
+  font-size: 12px;
+  letter-spacing: 2px;
+}
+.suit {
+  font-size: 13px;
+}
+</style>
diff --git a/src/games/components/AimGame.vue b/src/games/components/AimGame.vue
new file mode 100644
index 0000000..89bd41a
--- /dev/null
+++ b/src/games/components/AimGame.vue
@@ -0,0 +1,175 @@
+<script setup>
+// 打靶训练：45 秒限时点击靶心，靶子会缩小消失，中心环分高
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, palette, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 680
+const H = 500
+let ctx
+let loop
+let targets = [] // {x,y,r,maxR,life,maxLife}
+let pops = [] // 命中特效 {x,y,text,life}
+let score = 0
+let hits = 0
+let shots = 0
+let timeLeft = 45
+let countTimer = 0
+let spawnCd = 0
+let alive = false
+
+function update(dt) {
+  spawnCd -= dt
+  if (spawnCd <= 0 && targets.length < 4) {
+    const maxR = randInt(26, 42)
+    targets.push({
+      x: randInt(maxR + 10, W - maxR - 10),
+      y: randInt(maxR + 40, H - maxR - 10),
+      maxR,
+      life: 0,
+      maxLife: randInt(16, 24) / 10, // 1.6~2.4 秒生命周期
+    })
+    spawnCd = randInt(4, 8) / 10
+  }
+  // 靶子先长大后缩小，超时消失
+  targets.forEach((t) => (t.life += dt))
+  targets = targets.filter((t) => t.life < t.maxLife)
+  pops.forEach((p) => (p.life -= dt))
+  pops = pops.filter((p) => p.life > 0)
+  draw()
+}
+
+// 当前显示半径：前 30% 时间长大，后 70% 缩小
+function radiusOf(t) {
+  const k = t.life / t.maxLife
+  return k < 0.3 ? t.maxR * (k / 0.3) : t.maxR * (1 - (k - 0.3) / 0.7)
+}
+
+function shoot(e) {
+  if (!alive) return
+  shots++
+  const rect = canvas.value.getBoundingClientRect()
+  const scale = canvas.value.width / rect.width
+  const x = (e.clientX - rect.left) * scale
+  const y = (e.clientY - rect.top) * scale
+  // 从最上层的靶子开始判定
+  for (let i = targets.length - 1; i >= 0; i--) {
+    const t = targets[i]
+    const r = radiusOf(t)
+    const d = Math.hypot(t.x - x, t.y - y)
+    if (d <= r) {
+      hits++
+      // 环分：中心 20 / 中环 10 / 外环 5
+      const gained = d < r * 0.33 ? 20 : d < r * 0.66 ? 10 : 5
+      score += gained
+      emit('score', score)
+      pops.push({ x: t.x, y: t.y, text: `+${gained}`, life: 0.6 })
+      targets.splice(i, 1)
+      return
+    }
+  }
+  // 空枪扣 2 分
+  score = Math.max(0, score - 2)
+  emit('score', score)
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, W, H)
+  // 靶子（三环）
+  targets.forEach((t) => {
+    const r = radiusOf(t)
+    if (r < 2) return
+    ;[
+      [r, '#ff5d73'],
+      [r * 0.66, '#ffffff'],
+      [r * 0.33, '#ff5d73'],
+    ].forEach(([rr, color]) => {
+      ctx.fillStyle = color
+      ctx.beginPath()
+      ctx.arc(t.x, t.y, rr, 0, 7)
+      ctx.fill()
+    })
+    ctx.fillStyle = '#fff'
+    ctx.beginPath()
+    ctx.arc(t.x, t.y, 2.5, 0, 7)
+    ctx.fill()
+  })
+  // 命中飘字
+  pops.forEach((pp) => {
+    ctx.globalAlpha = Math.max(0, pp.life / 0.6)
+    ctx.fillStyle = p.primary2
+    ctx.font = 'bold 20px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.fillText(pp.text, pp.x, pp.y - (0.6 - pp.life) * 50)
+  })
+  ctx.globalAlpha = 1
+  // HUD
+  ctx.fillStyle = timeLeft <= 10 ? '#ff5d73' : p.text
+  ctx.font = 'bold 22px sans-serif'
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'top'
+  ctx.fillText(`⏱ ${timeLeft}`, 12, 10)
+  ctx.fillStyle = p.dim
+  ctx.font = '13px sans-serif'
+  const acc = shots ? Math.round((hits / shots) * 100) : 100
+  ctx.fillText(`命中率 ${acc}%`, 12, 40)
+}
+
+function tick() {
+  timeLeft--
+  if (timeLeft <= 0) {
+    alive = false
+    clearInterval(countTimer)
+    loop.stop()
+    // 命中率奖励：≥70% 额外 +50
+    if (shots > 5 && hits / shots >= 0.7) score += 50
+    emit('score', score)
+    draw()
+    emit('end', { score })
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  targets = []
+  pops = []
+  score = 0
+  hits = 0
+  shots = 0
+  timeLeft = 45
+  spawnCd = 0.2
+  alive = true
+  emit('score', 0)
+  clearInterval(countTimer)
+  countTimer = setInterval(tick, 1000)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  clearInterval(countTimer)
+}
+// 时间延长卡：+30 秒
+function useProp(code) {
+  if (code === 'time_extend' && alive) {
+    timeLeft += 30
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  canvas.value.addEventListener('pointerdown', shoot)
+  loop = createLoop(update)
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H" style="cursor: crosshair"></canvas>
+</template>
diff --git a/src/games/components/AsteroidsGame.vue b/src/games/components/AsteroidsGame.vue
new file mode 100644
index 0000000..9497f43
--- /dev/null
+++ b/src/games/components/AsteroidsGame.vue
@@ -0,0 +1,270 @@
+<script setup>
+// 小行星：旋转喷射的飞船击碎陨石，大陨石会分裂成小块
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, Keys, palette, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 680
+const H = 560
+let ctx
+let keys
+let loop
+let ship = { x: W / 2, y: H / 2, angle: -Math.PI / 2, vx: 0, vy: 0 }
+let rocks = [] // {x,y,vx,vy,size:3|2|1,rot,vr}
+let bullets = [] // {x,y,vx,vy,life}
+let score = 0
+let waveNum = 1
+let alive = false
+let fireCd = 0
+let shieldOn = false
+let invincible = 0
+
+// 环绕包裹坐标
+function wrap(o) {
+  if (o.x < -30) o.x = W + 30
+  if (o.x > W + 30) o.x = -30
+  if (o.y < -30) o.y = H + 30
+  if (o.y > H + 30) o.y = -30
+}
+
+function spawnRocks(count) {
+  for (let i = 0; i < count; i++) {
+    // 从边缘生成，避免直接压到飞船
+    let x, y
+    do {
+      x = randInt(0, W)
+      y = randInt(0, H)
+    } while (Math.hypot(x - ship.x, y - ship.y) < 160)
+    rocks.push({
+      x, y,
+      vx: randInt(-80, 80) || 40,
+      vy: randInt(-80, 80) || -40,
+      size: 3,
+      rot: 0,
+      vr: (Math.random() - 0.5) * 2,
+    })
+  }
+}
+
+function rockRadius(size) {
+  return size === 3 ? 38 : size === 2 ? 24 : 13
+}
+
+function update(dt) {
+  if (invincible > 0) invincible -= dt
+  fireCd -= dt
+  // 旋转与推进
+  if (keys.has('ArrowLeft') || keys.has('a')) ship.angle -= 3.6 * dt
+  if (keys.has('ArrowRight') || keys.has('d')) ship.angle += 3.6 * dt
+  if (keys.has('ArrowUp') || keys.has('w')) {
+    ship.vx += Math.cos(ship.angle) * 320 * dt
+    ship.vy += Math.sin(ship.angle) * 320 * dt
+  }
+  // 阻尼
+  ship.vx *= 1 - 0.35 * dt
+  ship.vy *= 1 - 0.35 * dt
+  ship.x += ship.vx * dt
+  ship.y += ship.vy * dt
+  wrap(ship)
+  // 开火
+  if (keys.has(' ') && fireCd <= 0) {
+    bullets.push({
+      x: ship.x + Math.cos(ship.angle) * 16,
+      y: ship.y + Math.sin(ship.angle) * 16,
+      vx: Math.cos(ship.angle) * 520 + ship.vx,
+      vy: Math.sin(ship.angle) * 520 + ship.vy,
+      life: 1.1,
+    })
+    fireCd = 0.24
+  }
+  bullets.forEach((b) => {
+    b.x += b.vx * dt
+    b.y += b.vy * dt
+    b.life -= dt
+    wrap(b)
+  })
+  bullets = bullets.filter((b) => b.life > 0)
+  // 陨石运动
+  rocks.forEach((r) => {
+    r.x += r.vx * dt
+    r.y += r.vy * dt
+    r.rot += r.vr * dt
+    wrap(r)
+  })
+  // 子弹命中陨石：大石分裂
+  const newRocks = []
+  bullets = bullets.filter((b) => {
+    for (const r of rocks) {
+      if (r.dead) continue
+      if (Math.hypot(r.x - b.x, r.y - b.y) < rockRadius(r.size)) {
+        r.dead = true
+        score += r.size === 3 ? 20 : r.size === 2 ? 30 : 50
+        emit('score', score)
+        if (r.size > 1) {
+          for (let i = 0; i < 2; i++) {
+            newRocks.push({
+              x: r.x, y: r.y,
+              vx: randInt(-140, 140) || 70,
+              vy: randInt(-140, 140) || -70,
+              size: r.size - 1,
+              rot: 0,
+              vr: (Math.random() - 0.5) * 3,
+            })
+          }
+        }
+        return false
+      }
+    }
+    return true
+  })
+  rocks = rocks.filter((r) => !r.dead).concat(newRocks)
+  // 陨石撞飞船
+  if (invincible <= 0) {
+    for (const r of rocks) {
+      if (Math.hypot(r.x - ship.x, r.y - ship.y) < rockRadius(r.size) + 12) {
+        if (shieldOn) {
+          shieldOn = false
+          invincible = 1.4
+        } else {
+          alive = false
+          loop.stop()
+          draw()
+          emit('end', { score })
+          return
+        }
+      }
+    }
+  }
+  // 清场 → 下一波
+  if (rocks.length === 0) {
+    score += 100
+    waveNum++
+    emit('score', score)
+    spawnRocks(2 + waveNum)
+  }
+  draw()
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, W, H)
+  // 飞船（三角形，无敌闪烁）
+  if (invincible <= 0 || Math.floor(performance.now() / 90) % 2 === 0) {
+    ctx.save()
+    ctx.translate(ship.x, ship.y)
+    ctx.rotate(ship.angle + Math.PI / 2)
+    ctx.fillStyle = p.accent
+    ctx.beginPath()
+    ctx.moveTo(0, -16)
+    ctx.lineTo(11, 12)
+    ctx.lineTo(0, 6)
+    ctx.lineTo(-11, 12)
+    ctx.closePath()
+    ctx.fill()
+    // 推进火焰
+    if (keys.has('ArrowUp') || keys.has('w')) {
+      ctx.fillStyle = p.primary2
+      ctx.beginPath()
+      ctx.moveTo(-5, 12)
+      ctx.lineTo(0, 22 + Math.random() * 6)
+      ctx.lineTo(5, 12)
+      ctx.fill()
+    }
+    ctx.restore()
+  }
+  if (shieldOn) {
+    ctx.strokeStyle = p.accent
+    ctx.lineWidth = 3
+    ctx.beginPath()
+    ctx.arc(ship.x, ship.y, 26, 0, 7)
+    ctx.stroke()
+  }
+  // 陨石（多边形）
+  ctx.strokeStyle = p.dim
+  ctx.lineWidth = 2
+  rocks.forEach((r) => {
+    const rad = rockRadius(r.size)
+    ctx.save()
+    ctx.translate(r.x, r.y)
+    ctx.rotate(r.rot)
+    ctx.beginPath()
+    for (let i = 0; i < 8; i++) {
+      const a = (i / 8) * Math.PI * 2
+      const rr = rad * (0.82 + ((i * 7919) % 10) / 33) // 固定伪随机凹凸
+      if (i === 0) ctx.moveTo(Math.cos(a) * rr, Math.sin(a) * rr)
+      else ctx.lineTo(Math.cos(a) * rr, Math.sin(a) * rr)
+    }
+    ctx.closePath()
+    ctx.stroke()
+    ctx.restore()
+  })
+  // 子弹
+  ctx.fillStyle = p.primary2
+  bullets.forEach((b) => {
+    ctx.beginPath()
+    ctx.arc(b.x, b.y, 3, 0, 7)
+    ctx.fill()
+  })
+  // 波次
+  ctx.fillStyle = p.dim
+  ctx.font = '13px sans-serif'
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'top'
+  ctx.fillText(`第 ${waveNum} 波`, 10, 8)
+}
+
+// ---- 对外接口 ----
+function start() {
+  ship = { x: W / 2, y: H / 2, angle: -Math.PI / 2, vx: 0, vy: 0 }
+  rocks = []
+  bullets = []
+  score = 0
+  waveNum = 1
+  shieldOn = false
+  invincible = 0
+  alive = true
+  spawnRocks(3)
+  emit('score', 0)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  keys?.detach()
+}
+// 复活：原地复活+2秒无敌；炸弹：清除全部陨石；护盾：挡一次
+function useProp(code) {
+  if (code === 'revive' && !alive) {
+    invincible = 2
+    alive = true
+    loop.start()
+    return true
+  }
+  if (code === 'bomb' && alive) {
+    score += rocks.length * 15
+    emit('score', score)
+    rocks = []
+    return true
+  }
+  if (code === 'shield' && alive && !shieldOn) {
+    shieldOn = true
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  keys = new Keys()
+  keys.attach()
+  loop = createLoop(update)
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/BallMaze3dGame.vue b/src/games/components/BallMaze3dGame.vue
new file mode 100644
index 0000000..05fc1ca
--- /dev/null
+++ b/src/games/components/BallMaze3dGame.vue
@@ -0,0 +1,251 @@
+<script setup>
+// 3D 滚球迷宫（Three.js）：方向键倾斜迷宫，小球滚到金色终点，限时闯关
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import * as THREE from 'three'
+import { Keys } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const holder = ref(null)
+const W = 640
+const H = 560
+const N = 11 // 迷宫格数（奇数）
+const CELL = 1
+let renderer, scene, camera, rafId
+let keys
+let boardGroup // 整个迷宫组（倾斜它实现"倾斜迷宫"）
+let ball, goalMesh
+let ballV = { x: 0, z: 0 }
+let ballPos = { x: 0, z: 0 }
+let maze = []
+const level = ref(1)
+let score = 0
+const timeLeft = ref(60)
+let countTimer = 0
+let alive = false
+let lastTs = 0
+
+// 生成迷宫（深度优先挖墙，1=墙 0=路）
+function genMaze() {
+  maze = Array.from({ length: N }, () => Array(N).fill(1))
+  const stack = [[1, 1]]
+  maze[1][1] = 0
+  while (stack.length) {
+    const [cx, cy] = stack[stack.length - 1]
+    const dirs = [[2, 0], [-2, 0], [0, 2], [0, -2]].sort(() => Math.random() - 0.5)
+    let moved = false
+    for (const [dx, dy] of dirs) {
+      const nx = cx + dx
+      const ny = cy + dy
+      if (nx > 0 && nx < N - 1 && ny > 0 && ny < N - 1 && maze[ny][nx] === 1) {
+        maze[ny][nx] = 0
+        maze[cy + dy / 2][cx + dx / 2] = 0
+        stack.push([nx, ny])
+        moved = true
+        break
+      }
+    }
+    if (!moved) stack.pop()
+  }
+  maze[N - 2][N - 2] = 0 // 终点
+}
+
+// 网格坐标 → 世界坐标（迷宫居中）
+function toWorld(gx, gz) {
+  return { x: (gx - (N - 1) / 2) * CELL, z: (gz - (N - 1) / 2) * CELL }
+}
+
+// 构建迷宫场景
+function buildBoard() {
+  if (boardGroup) scene.remove(boardGroup)
+  boardGroup = new THREE.Group()
+  // 地板
+  const floor = new THREE.Mesh(
+    new THREE.BoxGeometry(N * CELL, 0.3, N * CELL),
+    new THREE.MeshLambertMaterial({ color: '#2a2c5e' })
+  )
+  floor.position.y = -0.15
+  boardGroup.add(floor)
+  // 墙体
+  const wallMat = new THREE.MeshLambertMaterial({ color: '#4f8cff' })
+  for (let z = 0; z < N; z++) {
+    for (let x = 0; x < N; x++) {
+      if (maze[z][x] === 1) {
+        const wall = new THREE.Mesh(new THREE.BoxGeometry(CELL, 0.8, CELL), wallMat)
+        const w = toWorld(x, z)
+        wall.position.set(w.x, 0.4, w.z)
+        boardGroup.add(wall)
+      }
+    }
+  }
+  // 终点（发光金块）
+  goalMesh = new THREE.Mesh(
+    new THREE.BoxGeometry(CELL * 0.7, 0.1, CELL * 0.7),
+    new THREE.MeshBasicMaterial({ color: '#ffd500' })
+  )
+  const g = toWorld(N - 2, N - 2)
+  goalMesh.position.set(g.x, 0.06, g.z)
+  boardGroup.add(goalMesh)
+  // 小球
+  ball = new THREE.Mesh(
+    new THREE.SphereGeometry(0.3, 24, 24),
+    new THREE.MeshPhongMaterial({ color: '#ff3e7f', shininess: 80 })
+  )
+  const s = toWorld(1, 1)
+  ballPos = { x: s.x, z: s.z }
+  ballV = { x: 0, z: 0 }
+  ball.position.set(s.x, 0.3, s.z)
+  boardGroup.add(ball)
+  scene.add(boardGroup)
+}
+
+function initScene() {
+  scene = new THREE.Scene()
+  scene.background = new THREE.Color('#0d0e2b')
+  camera = new THREE.PerspectiveCamera(50, W / H, 0.1, 100)
+  camera.position.set(0, 12, 7.5)
+  camera.lookAt(0, 0, 0)
+  const dir = new THREE.DirectionalLight(0xffffff, 1.4)
+  dir.position.set(5, 10, 5)
+  scene.add(dir)
+  scene.add(new THREE.AmbientLight(0xffffff, 0.65))
+}
+
+// 球所在网格是否墙（用于碰撞）
+function isWall(wx, wz) {
+  const gx = Math.round(wx / CELL + (N - 1) / 2)
+  const gz = Math.round(wz / CELL + (N - 1) / 2)
+  if (gx < 0 || gx >= N || gz < 0 || gz >= N) return true
+  return maze[gz][gx] === 1
+}
+
+function animate(ts) {
+  rafId = requestAnimationFrame(animate)
+  const dt = Math.min((ts - lastTs) / 1000 || 0.016, 0.05)
+  lastTs = ts
+  if (alive) {
+    // 按键 → 倾斜角
+    const maxTilt = 0.32
+    const targetX = (keys.has('ArrowDown') || keys.has('s') ? maxTilt : 0) - (keys.has('ArrowUp') || keys.has('w') ? maxTilt : 0)
+    const targetZ = (keys.has('ArrowLeft') || keys.has('a') ? maxTilt : 0) - (keys.has('ArrowRight') || keys.has('d') ? maxTilt : 0)
+    boardGroup.rotation.x += (targetX - boardGroup.rotation.x) * 6 * dt
+    boardGroup.rotation.z += (targetZ - boardGroup.rotation.z) * 6 * dt
+    // 倾斜产生加速度（重力沿斜面分量）
+    const g = 14
+    ballV.x += Math.sin(boardGroup.rotation.z) * -g * dt
+    ballV.z += Math.sin(boardGroup.rotation.x) * g * dt
+    // 阻尼
+    ballV.x *= 1 - 0.8 * dt
+    ballV.z *= 1 - 0.8 * dt
+    // 分轴移动 + 墙体碰撞（球半径 0.3）
+    const r = 0.32
+    let nx = ballPos.x + ballV.x * dt
+    if (
+      isWall(nx + Math.sign(ballV.x) * r, ballPos.z - r * 0.7) ||
+      isWall(nx + Math.sign(ballV.x) * r, ballPos.z + r * 0.7)
+    ) {
+      ballV.x *= -0.25 // 撞墙轻微反弹
+    } else {
+      ballPos.x = nx
+    }
+    let nz = ballPos.z + ballV.z * dt
+    if (
+      isWall(ballPos.x - r * 0.7, nz + Math.sign(ballV.z) * r) ||
+      isWall(ballPos.x + r * 0.7, nz + Math.sign(ballV.z) * r)
+    ) {
+      ballV.z *= -0.25
+    } else {
+      ballPos.z = nz
+    }
+    ball.position.set(ballPos.x, 0.3, ballPos.z)
+    // 终点判定
+    if (Math.hypot(ballPos.x - goalMesh.position.x, ballPos.z - goalMesh.position.z) < 0.45) {
+      // 过关：+80 + 剩余时间，刷新迷宫并补时
+      score += 80 + timeLeft.value
+      timeLeft.value = Math.min(90, timeLeft.value + 15)
+      level.value++
+      emit('score', score)
+      genMaze()
+      buildBoard()
+    }
+    // 终点呼吸灯
+    goalMesh.material.color.setHSL(0.14, 1, 0.5 + 0.2 * Math.sin(ts / 200))
+  }
+  renderer.render(scene, camera)
+}
+
+function tick() {
+  timeLeft.value--
+  if (timeLeft.value <= 0) {
+    alive = false
+    clearInterval(countTimer)
+    emit('end', { score })
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  score = 0
+  level.value = 1
+  timeLeft.value = 60
+  alive = true
+  emit('score', 0)
+  genMaze()
+  buildBoard()
+  boardGroup.rotation.set(0, 0, 0)
+  clearInterval(countTimer)
+  countTimer = setInterval(tick, 1000)
+}
+function stop() {
+  cancelAnimationFrame(rafId)
+  clearInterval(countTimer)
+  keys?.detach()
+  renderer?.dispose()
+}
+// 时间延长卡：+30 秒
+function useProp(code) {
+  if (code === 'time_extend' && alive) {
+    timeLeft.value += 30
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  renderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setSize(W, H)
+  holder.value.appendChild(renderer.domElement)
+  renderer.domElement.style.borderRadius = '10px'
+  renderer.domElement.style.maxWidth = '100%'
+  keys = new Keys()
+  keys.attach()
+  initScene()
+  genMaze()
+  buildBoard()
+  animate(0)
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <div class="wrap3d">
+    <div ref="holder"></div>
+    <div class="hud3d">⏱ {{ timeLeft }}s · 第 {{ level }} 关</div>
+  </div>
+</template>
+
+<style scoped>
+.wrap3d {
+  position: relative;
+}
+.hud3d {
+  position: absolute;
+  top: 10px;
+  left: 12px;
+  background: rgba(0, 0, 0, 0.45);
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  pointer-events: none;
+}
+</style>
diff --git a/src/games/components/BreakoutGame.vue b/src/games/components/BreakoutGame.vue
new file mode 100644
index 0000000..7e8c525
--- /dev/null
+++ b/src/games/components/BreakoutGame.vue
@@ -0,0 +1,206 @@
+<script setup>
+// 打砖块：挡板反弹小球击碎砖块，越上层分越高
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, Keys, palette } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 760
+const H = 500
+let ctx
+let keys
+let loop
+let paddle = { x: W / 2 - 55, w: 110, h: 14 }
+let ball = { x: W / 2, y: H - 60, vx: 240, vy: -300, r: 8 }
+let bricks = [] // {x,y,w,h,hp,row}
+let score = 0
+let livesLeft = 3
+let alive = false
+let launched = false
+const BRICK_COLORS = ['#ff5d73', '#ff9f45', '#ffd500', '#4ade80', '#00e5ff']
+
+// 生成砖块阵：8 列 × 5 行，上层砖更硬更值钱
+function buildBricks() {
+  bricks = []
+  const cols = 10
+  const bw = (W - 40 - (cols - 1) * 6) / cols
+  for (let row = 0; row < 5; row++) {
+    for (let c = 0; c < cols; c++) {
+      bricks.push({
+        x: 20 + c * (bw + 6),
+        y: 50 + row * 26,
+        w: bw,
+        h: 20,
+        hp: row < 1 ? 2 : 1, // 顶排两滴血
+        row,
+      })
+    }
+  }
+}
+
+function resetBall() {
+  ball = { x: paddle.x + paddle.w / 2, y: H - 60, vx: 240 * (Math.random() < 0.5 ? 1 : -1), vy: -300, r: 8 }
+  launched = false
+}
+
+function update(dt) {
+  // 键盘移动挡板
+  if (keys.has('ArrowLeft')) paddle.x -= 480 * dt
+  if (keys.has('ArrowRight')) paddle.x += 480 * dt
+  paddle.x = Math.max(0, Math.min(W - paddle.w, paddle.x))
+  if (!launched) {
+    // 未发射时球黏在挡板上
+    ball.x = paddle.x + paddle.w / 2
+    ball.y = H - 40 - ball.r
+    draw()
+    return
+  }
+  ball.x += ball.vx * dt
+  ball.y += ball.vy * dt
+  // 撞墙反弹
+  if (ball.x < ball.r || ball.x > W - ball.r) {
+    ball.vx *= -1
+    ball.x = Math.max(ball.r, Math.min(W - ball.r, ball.x))
+  }
+  if (ball.y < ball.r) {
+    ball.vy *= -1
+    ball.y = ball.r
+  }
+  // 挡板反弹（按落点位置改变角度）
+  if (ball.vy > 0 && ball.y > H - 40 - ball.r && ball.y < H - 20 && ball.x > paddle.x - ball.r && ball.x < paddle.x + paddle.w + ball.r) {
+    const t = (ball.x - paddle.x - paddle.w / 2) / (paddle.w / 2)
+    const speed = Math.hypot(ball.vx, ball.vy) * 1.02 // 每次反弹微加速
+    const angle = t * (Math.PI / 3) // 最大 60 度
+    ball.vx = speed * Math.sin(angle)
+    ball.vy = -Math.abs(speed * Math.cos(angle))
+  }
+  // 撞砖
+  for (const b of bricks) {
+    if (b.hp <= 0) continue
+    if (ball.x > b.x - ball.r && ball.x < b.x + b.w + ball.r && ball.y > b.y - ball.r && ball.y < b.y + b.h + ball.r) {
+      b.hp--
+      // 简单反弹：按进入深度判断水平还是垂直
+      const fromLeft = Math.abs(ball.x - b.x)
+      const fromRight = Math.abs(ball.x - (b.x + b.w))
+      const fromTop = Math.abs(ball.y - b.y)
+      const fromBottom = Math.abs(ball.y - (b.y + b.h))
+      const minH = Math.min(fromLeft, fromRight)
+      const minV = Math.min(fromTop, fromBottom)
+      if (minH < minV) ball.vx *= -1
+      else ball.vy *= -1
+      if (b.hp <= 0) {
+        score += (5 - b.row) * 10 // 越上层越值钱
+        emit('score', score)
+      }
+      break
+    }
+  }
+  // 全部击碎 → 胜利加分并重开一面更快的砖墙
+  if (bricks.every((b) => b.hp <= 0)) {
+    score += 200
+    emit('score', score)
+    buildBricks()
+    resetBall()
+  }
+  // 球落底
+  if (ball.y > H + ball.r) {
+    livesLeft--
+    if (livesLeft <= 0) {
+      alive = false
+      loop.stop()
+      draw()
+      emit('end', { score })
+      return
+    }
+    resetBall()
+  }
+  draw()
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, W, H)
+  // 砖块
+  bricks.forEach((b) => {
+    if (b.hp <= 0) return
+    ctx.fillStyle = BRICK_COLORS[b.row]
+    ctx.globalAlpha = b.hp === 2 ? 1 : 0.88
+    ctx.beginPath()
+    ctx.roundRect(b.x, b.y, b.w, b.h, 5)
+    ctx.fill()
+  })
+  ctx.globalAlpha = 1
+  // 挡板
+  ctx.fillStyle = p.primary
+  ctx.beginPath()
+  ctx.roundRect(paddle.x, H - 40, paddle.w, paddle.h, 7)
+  ctx.fill()
+  // 球
+  ctx.fillStyle = p.primary2
+  ctx.beginPath()
+  ctx.arc(ball.x, ball.y, ball.r, 0, 7)
+  ctx.fill()
+  // 生命
+  ctx.font = '16px serif'
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'top'
+  ctx.fillText('❤️'.repeat(Math.max(0, livesLeft)), 10, 8)
+}
+
+function onMouse(e) {
+  const rect = canvas.value.getBoundingClientRect()
+  const scale = canvas.value.width / rect.width
+  paddle.x = (e.clientX - rect.left) * scale - paddle.w / 2
+  paddle.x = Math.max(0, Math.min(W - paddle.w, paddle.x))
+}
+function onClick() {
+  launched = true
+}
+
+// ---- 对外接口 ----
+function start() {
+  score = 0
+  livesLeft = 3
+  alive = true
+  buildBricks()
+  resetBall()
+  emit('score', 0)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  keys?.detach()
+}
+// 复活卡：+1 条命继续
+function useProp(code) {
+  if (code === 'revive' && !alive) {
+    livesLeft = 1
+    alive = true
+    resetBall()
+    loop.start()
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  keys = new Keys()
+  keys.attach()
+  keys.onPress((k) => {
+    if (k === ' ') launched = true
+  })
+  canvas.value.addEventListener('mousemove', onMouse)
+  canvas.value.addEventListener('click', onClick)
+  loop = createLoop(update)
+  buildBricks()
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/BubbleGame.vue b/src/games/components/BubbleGame.vue
new file mode 100644
index 0000000..87787b5
--- /dev/null
+++ b/src/games/components/BubbleGame.vue
@@ -0,0 +1,333 @@
+<script setup>
+// 泡泡龙：发射彩色泡泡，三连同色消除，泡泡压到底线失败
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, palette, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 560
+const H = 600
+const R = 20 // 泡泡半径
+const COLS = 13
+let ctx
+let loop
+let grid = new Map() // "row,col" -> colorIdx（奇数行错位半格）
+let shooter = { angle: -Math.PI / 2, current: 0, next: 0 }
+let flying = null // 飞行中的泡泡 {x,y,vx,vy,color}
+let score = 0
+let alive = false
+let shotCount = 0 // 每 6 发整体下压一行
+let rowOffset = 0 // 顶部已下压的行数
+const COLORS = ['#ff5d73', '#ffd500', '#4ade80', '#4f8cff', '#b26bff']
+
+// 网格坐标 → 像素中心
+function cellPos(row, col) {
+  const offset = (row + rowOffset) % 2 === 1 ? R : 0
+  return { x: col * R * 2 + R + offset, y: row * R * 1.75 + R + 4 }
+}
+
+// 初始 5 行泡泡
+function buildGrid() {
+  grid.clear()
+  rowOffset = 0
+  for (let row = 0; row < 5; row++) {
+    const cols = COLS - ((row + rowOffset) % 2)
+    for (let col = 0; col < cols; col++) {
+      grid.set(`${row},${col}`, randInt(0, COLORS.length - 1))
+    }
+  }
+}
+
+// 场上仍存在的颜色（发射器只给有用的颜色）
+function activeColors() {
+  const set = new Set(grid.values())
+  return set.size ? [...set] : [0]
+}
+
+function nextBubble() {
+  const colors = activeColors()
+  shooter.current = shooter.next
+  if (!colors.includes(shooter.current)) shooter.current = colors[randInt(0, colors.length - 1)]
+  shooter.next = colors[randInt(0, colors.length - 1)]
+}
+
+// 找飞行泡泡吸附的最近空格
+function snapCell(x, y) {
+  let best = null
+  let bestDist = 1e9
+  const maxRow = Math.ceil(H / (R * 1.75))
+  for (let row = 0; row < maxRow; row++) {
+    const cols = COLS - ((row + rowOffset) % 2)
+    for (let col = 0; col < cols; col++) {
+      if (grid.has(`${row},${col}`)) continue
+      const p = cellPos(row, col)
+      const d = Math.hypot(p.x - x, p.y - y)
+      if (d < bestDist) {
+        bestDist = d
+        best = { row, col }
+      }
+    }
+  }
+  return best
+}
+
+// 六边形邻居
+function neighborKeys(row, col) {
+  const odd = (row + rowOffset) % 2 === 1
+  const deltas = odd
+    ? [[0, -1], [0, 1], [-1, 0], [-1, 1], [1, 0], [1, 1]]
+    : [[0, -1], [0, 1], [-1, -1], [-1, 0], [1, -1], [1, 0]]
+  return deltas.map(([dr, dc]) => `${row + dr},${col + dc}`)
+}
+
+// 同色连通块
+function sameColorCluster(row, col, color) {
+  const seen = new Set()
+  const stack = [`${row},${col}`]
+  while (stack.length) {
+    const key = stack.pop()
+    if (seen.has(key) || grid.get(key) !== color) continue
+    seen.add(key)
+    const [r, c] = key.split(',').map(Number)
+    neighborKeys(r, c).forEach((k) => {
+      if (!seen.has(k) && grid.has(k)) stack.push(k)
+    })
+  }
+  return seen
+}
+
+// 移除悬空泡泡（不与顶行连通的全部掉落）
+function dropFloating() {
+  const anchored = new Set()
+  const stack = []
+  for (const key of grid.keys()) {
+    if (key.startsWith('0,')) stack.push(key)
+  }
+  while (stack.length) {
+    const key = stack.pop()
+    if (anchored.has(key) || !grid.has(key)) continue
+    anchored.add(key)
+    const [r, c] = key.split(',').map(Number)
+    neighborKeys(r, c).forEach((k) => {
+      if (grid.has(k) && !anchored.has(k)) stack.push(k)
+    })
+  }
+  let dropped = 0
+  for (const key of [...grid.keys()]) {
+    if (!anchored.has(key)) {
+      grid.delete(key)
+      dropped++
+    }
+  }
+  return dropped
+}
+
+// 泡泡落定后的消除结算
+function settle(row, col, color) {
+  grid.set(`${row},${col}`, color)
+  const cluster = sameColorCluster(row, col, color)
+  if (cluster.size >= 3) {
+    cluster.forEach((k) => grid.delete(k))
+    const dropped = dropFloating()
+    // 消除 10 分/个，掉落 20 分/个
+    score += cluster.size * 10 + dropped * 20
+    emit('score', score)
+  }
+  // 全清奖励并刷新一批
+  if (grid.size === 0) {
+    score += 300
+    emit('score', score)
+    buildGrid()
+  }
+  // 每 6 发下压一行
+  shotCount++
+  if (shotCount % 6 === 0) {
+    pushDown()
+  }
+  // 失败判定：泡泡越过底线
+  for (const key of grid.keys()) {
+    const [r, c] = key.split(',').map(Number)
+    if (cellPos(r, c).y > H - 90) {
+      alive = false
+      loop.stop()
+      draw()
+      emit('end', { score })
+      return
+    }
+  }
+  nextBubble()
+}
+
+// 整体下压一行：所有行号 +1，顶部生成新行
+function pushDown() {
+  const entries = [...grid.entries()]
+  grid.clear()
+  rowOffset ^= 1 // 奇偶错位翻转
+  entries.forEach(([key, v]) => {
+    const [r, c] = key.split(',').map(Number)
+    grid.set(`${r + 1},${c}`, v)
+  })
+  const cols = COLS - (rowOffset % 2)
+  for (let col = 0; col < cols; col++) {
+    grid.set(`0,${col}`, randInt(0, COLORS.length - 1))
+  }
+}
+
+function update(dt) {
+  if (flying) {
+    flying.x += flying.vx * dt
+    flying.y += flying.vy * dt
+    // 左右墙反弹
+    if (flying.x < R || flying.x > W - R) {
+      flying.vx *= -1
+      flying.x = Math.max(R, Math.min(W - R, flying.x))
+    }
+    // 顶部或碰到已有泡泡 → 吸附
+    let hit = flying.y < R + 4
+    if (!hit) {
+      for (const key of grid.keys()) {
+        const [r, c] = key.split(',').map(Number)
+        const p = cellPos(r, c)
+        if (Math.hypot(p.x - flying.x, p.y - flying.y) < R * 1.8) {
+          hit = true
+          break
+        }
+      }
+    }
+    if (hit) {
+      const cell = snapCell(flying.x, flying.y)
+      const color = flying.color
+      flying = null
+      if (cell) settle(cell.row, cell.col, color)
+    }
+  }
+  draw()
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, W, H)
+  // 场上泡泡
+  for (const [key, colorIdx] of grid) {
+    const [r, c] = key.split(',').map(Number)
+    const pos = cellPos(r, c)
+    drawBubble(pos.x, pos.y, COLORS[colorIdx])
+  }
+  // 底线
+  ctx.strokeStyle = p.primary
+  ctx.setLineDash([8, 8])
+  ctx.beginPath()
+  ctx.moveTo(0, H - 90)
+  ctx.lineTo(W, H - 90)
+  ctx.stroke()
+  ctx.setLineDash([])
+  // 瞄准线
+  const sx = W / 2
+  const sy = H - 40
+  ctx.strokeStyle = p.dim
+  ctx.setLineDash([4, 8])
+  ctx.beginPath()
+  ctx.moveTo(sx, sy)
+  ctx.lineTo(sx + Math.cos(shooter.angle) * 130, sy + Math.sin(shooter.angle) * 130)
+  ctx.stroke()
+  ctx.setLineDash([])
+  // 飞行中的泡泡
+  if (flying) drawBubble(flying.x, flying.y, COLORS[flying.color])
+  // 发射器当前/下一个
+  drawBubble(sx, sy, COLORS[shooter.current])
+  drawBubble(sx + 56, sy + 10, COLORS[shooter.next], 0.62)
+  ctx.fillStyle = p.dim
+  ctx.font = '11px sans-serif'
+  ctx.textAlign = 'center'
+  ctx.fillText('下一个', sx + 56, sy + 40)
+}
+
+function drawBubble(x, y, color, scale = 1) {
+  const r = R * scale
+  const grad = ctx.createRadialGradient(x - r / 3, y - r / 3, r / 5, x, y, r)
+  grad.addColorStop(0, '#ffffffcc')
+  grad.addColorStop(0.25, color)
+  grad.addColorStop(1, color)
+  ctx.fillStyle = grad
+  ctx.beginPath()
+  ctx.arc(x, y, r - 1, 0, 7)
+  ctx.fill()
+}
+
+function aim(e) {
+  const rect = canvas.value.getBoundingClientRect()
+  const scale = canvas.value.width / rect.width
+  const x = (e.clientX - rect.left) * scale
+  const y = (e.clientY - rect.top) * scale
+  const angle = Math.atan2(y - (H - 40), x - W / 2)
+  // 限制向上扇形范围
+  shooter.angle = Math.max(-Math.PI + 0.25, Math.min(-0.25, angle))
+}
+
+function shoot() {
+  if (!alive || flying) return
+  const speed = 640
+  flying = {
+    x: W / 2,
+    y: H - 40,
+    vx: Math.cos(shooter.angle) * speed,
+    vy: Math.sin(shooter.angle) * speed,
+    color: shooter.current,
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  buildGrid()
+  score = 0
+  shotCount = 0
+  flying = null
+  alive = true
+  shooter.next = randInt(0, COLORS.length - 1)
+  nextBubble()
+  emit('score', 0)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+}
+// 炸弹清屏：清除最下面两行泡泡
+function useProp(code) {
+  if (code !== 'bomb' || !alive) return false
+  let maxRow = -1
+  for (const key of grid.keys()) {
+    maxRow = Math.max(maxRow, Number(key.split(',')[0]))
+  }
+  if (maxRow < 0) return false
+  let cleared = 0
+  for (const key of [...grid.keys()]) {
+    const r = Number(key.split(',')[0])
+    if (r >= maxRow - 1) {
+      grid.delete(key)
+      cleared++
+    }
+  }
+  score += cleared * 5
+  emit('score', score)
+  dropFloating()
+  return true
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  canvas.value.addEventListener('mousemove', aim)
+  canvas.value.addEventListener('click', shoot)
+  loop = createLoop(update)
+  buildGrid()
+  shooter.next = randInt(0, COLORS.length - 1)
+  nextBubble()
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/ColorReactGame.vue b/src/games/components/ColorReactGame.vue
new file mode 100644
index 0000000..3352de4
--- /dev/null
+++ b/src/games/components/ColorReactGame.vue
@@ -0,0 +1,175 @@
+<script setup>
+// 颜色反应（斯特鲁普效应）：判断文字含义与显示颜色是否一致，答错或超时扣命
+import { ref } from 'vue'
+import { pick } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const COLOR_DEFS = [
+  { name: '红色', value: '#ff5d73' },
+  { name: '绿色', value: '#4ade80' },
+  { name: '蓝色', value: '#4f8cff' },
+  { name: '黄色', value: '#ffd500' },
+  { name: '紫色', value: '#b26bff' },
+]
+const word = ref('') // 显示的文字
+const color = ref('') // 文字的颜色
+const score = ref(0)
+const lives = ref(3)
+const timeLeft = ref(45)
+const playing = ref(false)
+const feedback = ref('')
+let isMatch = false
+let questionTs = 0
+let countTimer = 0
+
+function nextQuestion() {
+  const wordDef = pick(COLOR_DEFS)
+  // 50% 概率颜色与文字一致
+  const colorDef = Math.random() < 0.5 ? wordDef : pick(COLOR_DEFS.filter((c) => c !== wordDef))
+  word.value = wordDef.name
+  color.value = colorDef.value
+  isMatch = wordDef === colorDef
+  questionTs = Date.now()
+}
+
+function answerIt(saidMatch) {
+  if (!playing.value) return
+  if (saidMatch === isMatch) {
+    // 答对：基础 8 分 + 反应速度奖励（1秒内答满 +7）
+    const ms = Date.now() - questionTs
+    score.value += 8 + Math.max(0, 7 - Math.floor(ms / 150))
+    feedback.value = 'good'
+  } else {
+    lives.value--
+    feedback.value = 'bad'
+    if (lives.value <= 0) {
+      finish()
+      return
+    }
+  }
+  emit('score', score.value)
+  setTimeout(() => (feedback.value = ''), 180)
+  nextQuestion()
+}
+
+function finish() {
+  playing.value = false
+  clearInterval(countTimer)
+  emit('score', score.value)
+  emit('end', { score: score.value })
+}
+
+function tick() {
+  timeLeft.value--
+  if (timeLeft.value <= 0) finish()
+}
+
+// ---- 对外接口 ----
+function start() {
+  score.value = 0
+  lives.value = 3
+  timeLeft.value = 45
+  playing.value = true
+  emit('score', 0)
+  nextQuestion()
+  clearInterval(countTimer)
+  countTimer = setInterval(tick, 1000)
+}
+function stop() {
+  clearInterval(countTimer)
+}
+// 时间延长卡：+30 秒
+function useProp(code) {
+  if (code === 'time_extend' && playing.value) {
+    timeLeft.value += 30
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+nextQuestion()
+</script>
+
+<template>
+  <div class="cr" :class="feedback">
+    <div class="hud">
+      <span>⏱ {{ timeLeft }}s</span>
+      <span>{{ '❤️'.repeat(Math.max(0, lives)) }}</span>
+      <span>得分 <b class="text-primary">{{ score }}</b></span>
+    </div>
+    <p class="ask text-dim">文字的<b>含义</b>和它的<b>颜色</b>一致吗？</p>
+    <div class="word" :style="{ color }">{{ word }}</div>
+    <div class="btns">
+      <button class="ans yes" @click="answerIt(true)">✔ 一致</button>
+      <button class="ans no" @click="answerIt(false)">✘ 不一致</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cr {
+  width: min(420px, 92vw);
+  text-align: center;
+}
+.cr.good {
+  animation: pop 0.18s;
+}
+.cr.bad {
+  animation: shake 0.18s;
+}
+@keyframes pop {
+  50% {
+    transform: scale(1.03);
+  }
+}
+@keyframes shake {
+  25% {
+    transform: translateX(-7px);
+  }
+  75% {
+    transform: translateX(7px);
+  }
+}
+.hud {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+.ask {
+  font-size: 13px;
+}
+.word {
+  font-size: 72px;
+  font-weight: 900;
+  margin: 26px 0 34px;
+  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
+}
+.btns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+.ans {
+  padding: 18px 0;
+  font-size: 20px;
+  font-weight: 800;
+  border-radius: 14px;
+  border: none;
+  cursor: pointer;
+  color: #fff;
+  transition: transform 0.1s, filter 0.15s;
+}
+.ans:hover {
+  filter: brightness(1.15);
+}
+.ans:active {
+  transform: scale(0.96);
+}
+.yes {
+  background: linear-gradient(135deg, #2f9e6e, #4ade80);
+}
+.no {
+  background: linear-gradient(135deg, #c0384b, #ff5d73);
+}
+</style>
diff --git a/src/games/components/Connect4Game.vue b/src/games/components/Connect4Game.vue
new file mode 100644
index 0000000..392ef5c
--- /dev/null
+++ b/src/games/components/Connect4Game.vue
@@ -0,0 +1,214 @@
+<script setup>
+// 四子棋：点击竖列投子，先四连者胜（与启发式 AI 对战）
+import { ref } from 'vue'
+
+const emit = defineEmits(['score', 'end'])
+const ROWS = 6
+const COLS = 7
+const board = ref([]) // [row][col] 0空 1我 2AI
+const playing = ref(false)
+const status = ref('你执红先手')
+const lastDrop = ref(null) // 最近落子位置（高亮）
+let round = 0
+let score = 0
+let busy = false
+
+function initBoard() {
+  board.value = Array.from({ length: ROWS }, () => Array(COLS).fill(0))
+}
+
+// 找某列可落的行（底部优先），满列返回 -1
+function dropRow(col, b = board.value) {
+  for (let r = ROWS - 1; r >= 0; r--) {
+    if (!b[r][col]) return r
+  }
+  return -1
+}
+
+// 检查 who 是否四连
+function checkWin(b, who) {
+  const dirs = [[1, 0], [0, 1], [1, 1], [1, -1]]
+  for (let r = 0; r < ROWS; r++) {
+    for (let c = 0; c < COLS; c++) {
+      if (b[r][c] !== who) continue
+      for (const [dr, dc] of dirs) {
+        let n = 1
+        let rr = r + dr
+        let cc = c + dc
+        while (rr >= 0 && rr < ROWS && cc >= 0 && cc < COLS && b[rr][cc] === who) {
+          n++
+          rr += dr
+          cc += dc
+        }
+        if (n >= 4) return true
+      }
+    }
+  }
+  return false
+}
+
+// AI 选列：能赢就赢 → 能堵就堵 → 偏好中间列
+function aiPick() {
+  const tryCol = (who) => {
+    for (let c = 0; c < COLS; c++) {
+      const r = dropRow(c)
+      if (r < 0) continue
+      board.value[r][c] = who
+      const win = checkWin(board.value, who)
+      board.value[r][c] = 0
+      if (win) return c
+    }
+    return -1
+  }
+  let col = tryCol(2) // 自己能赢
+  if (col < 0) col = tryCol(1) // 堵玩家
+  if (col < 0) {
+    // 中间优先的候选顺序
+    const order = [3, 2, 4, 1, 5, 0, 6].filter((c) => dropRow(c) >= 0)
+    col = order[Math.floor(Math.random() * Math.min(3, order.length))]
+  }
+  return col
+}
+
+function play(col) {
+  if (!playing.value || busy) return
+  const r = dropRow(col)
+  if (r < 0) return
+  board.value[r][col] = 1
+  lastDrop.value = [r, col]
+  if (checkWin(board.value, 1)) {
+    // 赢一局 +80 续局
+    round++
+    score += 80
+    emit('score', score)
+    status.value = `第 ${round} 局获胜！+80，新一局开始`
+    setTimeout(() => {
+      initBoard()
+      status.value = '你执红先手'
+    }, 1000)
+    return
+  }
+  if (board.value.every((row) => row.every((v) => v))) {
+    endGame(30, '平局收场 +30')
+    return
+  }
+  busy = true
+  status.value = 'AI 思考中…'
+  setTimeout(() => {
+    busy = false
+    if (!playing.value) return
+    const c = aiPick()
+    const rr = dropRow(c)
+    board.value[rr][c] = 2
+    lastDrop.value = [rr, c]
+    if (checkWin(board.value, 2)) {
+      endGame(score > 0 ? 10 : 5, 'AI 获胜')
+      return
+    }
+    if (board.value.every((row) => row.every((v) => v))) {
+      endGame(30, '平局收场 +30')
+      return
+    }
+    status.value = '轮到你了'
+  }, 420)
+}
+
+function endGame(bonus, msg) {
+  score += bonus
+  playing.value = false
+  status.value = msg
+  emit('score', score)
+  emit('end', { score })
+}
+
+// ---- 对外接口 ----
+function start() {
+  initBoard()
+  playing.value = true
+  round = 0
+  score = 0
+  busy = false
+  lastDrop.value = null
+  status.value = '你执红先手'
+  emit('score', 0)
+}
+function stop() {}
+function useProp() {
+  return false
+}
+defineExpose({ start, stop, useProp })
+initBoard()
+</script>
+
+<template>
+  <div class="c4">
+    <p class="status">{{ status }}</p>
+    <div class="board">
+      <div v-for="c in COLS" :key="c" class="col" @click="play(c - 1)">
+        <div
+          v-for="r in ROWS"
+          :key="r"
+          class="slot"
+          :class="{
+            me: board[r - 1][c - 1] === 1,
+            ai: board[r - 1][c - 1] === 2,
+            last: lastDrop && lastDrop[0] === r - 1 && lastDrop[1] === c - 1,
+          }"
+        ></div>
+      </div>
+    </div>
+    <p class="tip text-dim">🔴 你　🟡 AI　连续获胜可累计得分</p>
+  </div>
+</template>
+
+<style scoped>
+.c4 {
+  text-align: center;
+  width: min(460px, 92vw);
+}
+.status {
+  margin-bottom: 12px;
+  min-height: 20px;
+  font-size: 14px;
+}
+.board {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 6px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 10px;
+}
+.col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  cursor: pointer;
+}
+.col:hover .slot:not(.me):not(.ai) {
+  background: color-mix(in srgb, var(--primary) 14%, var(--bg-card));
+}
+.slot {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  transition: background 0.15s;
+}
+.slot.me {
+  background: radial-gradient(circle at 35% 35%, #ff8fa3, #e5484d);
+  border-color: #e5484d;
+}
+.slot.ai {
+  background: radial-gradient(circle at 35% 35%, #ffe98a, #f5b301);
+  border-color: #f5b301;
+}
+.slot.last {
+  box-shadow: 0 0 0 3px var(--accent);
+}
+.tip {
+  margin-top: 12px;
+  font-size: 12px;
+}
+</style>
diff --git a/src/games/components/DinoGame.vue b/src/games/components/DinoGame.vue
new file mode 100644
index 0000000..5a31668
--- /dev/null
+++ b/src/games/components/DinoGame.vue
@@ -0,0 +1,190 @@
+<script setup>
+// 恐龙跑酷：跳跃躲避仙人掌与飞鸟，里程即分数
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, Keys, palette, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 760
+const H = 300
+const GROUND = H - 50
+let ctx
+let keys
+let loop
+let dino = { y: GROUND, vy: 0, ducking: false }
+let obstacles = [] // {x, type: cactus|bird, h, w, flyY}
+let clouds = []
+let dist = 0 // 里程（分数）
+let speed = 300
+let alive = false
+let spawnGap = 0
+let shieldOn = false
+let invincible = 0
+
+function jump() {
+  if (alive && dino.y >= GROUND - 1) dino.vy = -640
+}
+
+function update(dt) {
+  if (invincible > 0) invincible -= dt
+  // 里程与提速
+  dist += speed * dt * 0.05
+  const score = Math.floor(dist)
+  emit('score', score)
+  speed = 300 + Math.min(340, dist * 0.5)
+  // 恐龙物理
+  dino.vy += 1800 * dt
+  dino.y += dino.vy * dt
+  if (dino.y > GROUND) {
+    dino.y = GROUND
+    dino.vy = 0
+  }
+  dino.ducking = keys.has('ArrowDown') && dino.y >= GROUND - 1
+  // 云
+  clouds.forEach((c) => (c.x -= 30 * dt))
+  clouds = clouds.filter((c) => c.x > -60)
+  if (clouds.length < 4 && Math.random() < 0.01) {
+    clouds.push({ x: W + 40, y: randInt(30, 120) })
+  }
+  // 障碍生成
+  spawnGap -= speed * dt
+  if (spawnGap <= 0) {
+    const isBird = dist > 120 && Math.random() < 0.28
+    obstacles.push(
+      isBird
+        ? { x: W + 30, type: 'bird', flyY: [GROUND - 20, GROUND - 55, GROUND - 90][randInt(0, 2)] }
+        : { x: W + 30, type: 'cactus', h: randInt(34, 58), w: randInt(18, 40) }
+    )
+    spawnGap = randInt(320, 620) + speed * 0.25
+  }
+  obstacles.forEach((o) => (o.x -= speed * dt))
+  obstacles = obstacles.filter((o) => o.x > -60)
+  // 碰撞（恐龙判定盒：站立 30x44 / 下蹲 40x26）
+  const dw = dino.ducking ? 40 : 28
+  const dh = dino.ducking ? 26 : 44
+  const dx = 70 - dw / 2
+  const dy = dino.y - dh
+  for (const o of obstacles) {
+    let ox, oy, ow, oh
+    if (o.type === 'cactus') {
+      ox = o.x - o.w / 2
+      oy = GROUND - o.h
+      ow = o.w
+      oh = o.h
+    } else {
+      ox = o.x - 20
+      oy = o.flyY - 14
+      ow = 40
+      oh = 24
+    }
+    if (dx < ox + ow && dx + dw > ox && dy < oy + oh && dy + dh > oy) {
+      if (invincible > 0) continue
+      if (shieldOn) {
+        shieldOn = false
+        invincible = 1
+        continue
+      }
+      alive = false
+      loop.stop()
+      draw()
+      emit('end', { score })
+      return
+    }
+  }
+  draw()
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, W, H)
+  // 云
+  ctx.font = '28px serif'
+  ctx.textAlign = 'center'
+  clouds.forEach((c) => ctx.fillText('☁️', c.x, c.y))
+  // 地面
+  ctx.strokeStyle = p.dim
+  ctx.lineWidth = 2
+  ctx.beginPath()
+  ctx.moveTo(0, GROUND + 2)
+  ctx.lineTo(W, GROUND + 2)
+  ctx.stroke()
+  // 恐龙（无敌闪烁）
+  if (invincible <= 0 || Math.floor(performance.now() / 90) % 2 === 0) {
+    ctx.font = dino.ducking ? '30px serif' : '38px serif'
+    ctx.textBaseline = 'bottom'
+    ctx.fillText('🦖', 70, dino.y + 4)
+  }
+  if (shieldOn) {
+    ctx.strokeStyle = p.accent
+    ctx.lineWidth = 3
+    ctx.beginPath()
+    ctx.arc(70, dino.y - 20, 30, 0, 7)
+    ctx.stroke()
+  }
+  // 障碍
+  obstacles.forEach((o) => {
+    ctx.textBaseline = 'bottom'
+    if (o.type === 'cactus') {
+      ctx.font = `${o.h}px serif`
+      ctx.fillText('🌵', o.x, GROUND + 4)
+    } else {
+      ctx.font = '30px serif'
+      ctx.fillText('🦅', o.x, o.flyY + 14)
+    }
+  })
+  ctx.textBaseline = 'alphabetic'
+}
+
+// ---- 对外接口 ----
+function start() {
+  dino = { y: GROUND, vy: 0, ducking: false }
+  obstacles = []
+  clouds = [{ x: 200, y: 60 }, { x: 520, y: 100 }]
+  dist = 0
+  speed = 300
+  spawnGap = 500
+  shieldOn = false
+  invincible = 0
+  alive = true
+  emit('score', 0)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  keys?.detach()
+}
+// 复活：清空面前障碍继续跑；护盾：挡一次
+function useProp(code) {
+  if (code === 'revive' && !alive) {
+    obstacles = []
+    invincible = 1.5
+    alive = true
+    loop.start()
+    return true
+  }
+  if (code === 'shield' && alive && !shieldOn) {
+    shieldOn = true
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  keys = new Keys()
+  keys.attach()
+  keys.onPress((k) => {
+    if (k === ' ' || k === 'ArrowUp') jump()
+  })
+  canvas.value.addEventListener('pointerdown', jump)
+  loop = createLoop(update)
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/Down100Game.vue b/src/games/components/Down100Game.vue
new file mode 100644
index 0000000..41b7dfc
--- /dev/null
+++ b/src/games/components/Down100Game.vue
@@ -0,0 +1,181 @@
+<script setup>
+// 下100层：不断下落踩稳平台，顶部尖刺不能碰，层数即分数
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, Keys, palette, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 480
+const H = 560
+let ctx
+let keys
+let loop
+let player = { x: W / 2, y: 100, vy: 0, onPlat: null }
+let platforms = [] // {x,y,w,type: normal|spike|move, dir}
+let cameraY = 0 // 摄像机向下滚动
+let floor = 0 // 已下的层数（分数）
+let alive = false
+let scrollSpeed = 40 // 画面自动上移速度
+
+function spawnPlatform(y) {
+  const roll = Math.random()
+  const type = roll < 0.68 ? 'normal' : roll < 0.85 ? 'move' : 'spike'
+  platforms.push({
+    x: randInt(20, W - 120),
+    y,
+    w: randInt(80, 140),
+    type,
+    dir: Math.random() < 0.5 ? 1 : -1,
+  })
+}
+
+function update(dt) {
+  // 画面自动上滚（越来越快）
+  scrollSpeed = 40 + floor * 0.9
+  cameraY += scrollSpeed * dt
+  // 左右移动
+  const ms = 300
+  if (keys.has('ArrowLeft') || keys.has('a')) player.x -= ms * dt
+  if (keys.has('ArrowRight') || keys.has('d')) player.x += ms * dt
+  player.x = Math.max(14, Math.min(W - 14, player.x))
+  // 重力
+  player.vy += 1300 * dt
+  const prevY = player.y
+  player.y += player.vy * dt
+  // 平台碰撞（只在下落时检测顶面）
+  player.onPlat = null
+  for (const p of platforms) {
+    if (player.vy >= 0 && prevY <= p.y - 10 + 1 && player.y >= p.y - 10 && player.x > p.x - 10 && player.x < p.x + p.w + 10) {
+      if (p.type === 'spike') {
+        // 尖刺平台：踩上即死
+        die()
+        return
+      }
+      player.y = p.y - 10
+      player.vy = 0
+      player.onPlat = p
+    }
+  }
+  // 移动平台带着玩家走
+  platforms.forEach((p) => {
+    if (p.type === 'move') {
+      p.x += p.dir * 90 * dt
+      if (p.x < 10 || p.x + p.w > W - 10) p.dir *= -1
+      if (player.onPlat === p) player.x += p.dir * 90 * dt
+    }
+  })
+  // 计层：每通过一块平台的高度 +1 层
+  const newFloor = Math.floor((player.y - 160) / 90)
+  if (newFloor > floor) {
+    floor = newFloor
+    emit('score', floor)
+  }
+  // 生成更深的平台 / 清理头顶的
+  const deepest = Math.max(...platforms.map((p) => p.y))
+  if (deepest < cameraY + H + 200) spawnPlatform(deepest + 90)
+  platforms = platforms.filter((p) => p.y > cameraY - 60)
+  // 死亡判定：被顶出屏幕上沿（被卷进尖刺天花板）或掉出屏幕下沿
+  if (player.y < cameraY + 24 || player.y > cameraY + H + 40) {
+    die()
+    return
+  }
+  draw()
+}
+
+function die() {
+  alive = false
+  loop.stop()
+  draw()
+  emit('end', { score: floor })
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, W, H)
+  // 顶部尖刺天花板
+  ctx.fillStyle = p.primary
+  for (let x = 0; x < W; x += 24) {
+    ctx.beginPath()
+    ctx.moveTo(x, 0)
+    ctx.lineTo(x + 12, 18)
+    ctx.lineTo(x + 24, 0)
+    ctx.fill()
+  }
+  // 平台
+  platforms.forEach((pl) => {
+    const sy = pl.y - cameraY
+    if (sy < -20 || sy > H + 20) return
+    if (pl.type === 'spike') {
+      ctx.fillStyle = p.primary
+      for (let x = pl.x; x < pl.x + pl.w - 10; x += 14) {
+        ctx.beginPath()
+        ctx.moveTo(x, sy)
+        ctx.lineTo(x + 7, sy - 12)
+        ctx.lineTo(x + 14, sy)
+        ctx.fill()
+      }
+      ctx.fillStyle = '#8b3a44'
+      ctx.fillRect(pl.x, sy, pl.w, 10)
+    } else {
+      ctx.fillStyle = pl.type === 'move' ? p.accent : p.primary2
+      ctx.beginPath()
+      ctx.roundRect(pl.x, sy, pl.w, 10, 5)
+      ctx.fill()
+    }
+  })
+  // 玩家
+  ctx.font = '26px serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'bottom'
+  ctx.fillText('🧗', player.x, player.y - cameraY + 4)
+  // 层数
+  ctx.fillStyle = p.text
+  ctx.font = 'bold 18px sans-serif'
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'top'
+  ctx.fillText(`第 ${floor} 层`, 10, 26)
+}
+
+// ---- 对外接口 ----
+function start() {
+  player = { x: W / 2, y: 120, vy: 0, onPlat: null }
+  platforms = [{ x: W / 2 - 70, y: 180, w: 140, type: 'normal', dir: 1 }]
+  for (let y = 270; y < H + 300; y += 90) spawnPlatform(y)
+  cameraY = 0
+  floor = 0
+  alive = true
+  emit('score', 0)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  keys?.detach()
+}
+// 复活卡：回到屏幕中间的安全平台继续
+function useProp(code) {
+  if (code === 'revive' && !alive) {
+    const safe = { x: W / 2 - 70, y: cameraY + H / 2, w: 140, type: 'normal', dir: 1 }
+    platforms.push(safe)
+    player = { x: W / 2, y: safe.y - 10, vy: 0, onPlat: safe }
+    alive = true
+    loop.start()
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  keys = new Keys()
+  keys.attach()
+  loop = createLoop(update)
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/FlappyGame.vue b/src/games/components/FlappyGame.vue
new file mode 100644
index 0000000..d0265bc
--- /dev/null
+++ b/src/games/components/FlappyGame.vue
@@ -0,0 +1,173 @@
+<script setup>
+// 像素鸟：点击/空格扇翅膀，穿过管道缝隙
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, Keys, palette, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 440
+const H = 560
+let ctx
+let keys
+let loop
+let bird = { y: H / 2, vy: 0 }
+let pipes = [] // {x, gapY, passed}
+let score = 0
+let alive = false
+let shieldOn = false // 护盾：抵挡一次撞击
+let invincible = 0 // 复活后的无敌秒数
+const GAP = 155 // 管道缝隙
+const PIPE_W = 64
+
+function flap() {
+  if (alive) bird.vy = -330
+}
+
+function spawnPipe(x) {
+  pipes.push({ x, gapY: randInt(120, H - 200), passed: false })
+}
+
+function update(dt) {
+  if (invincible > 0) invincible -= dt
+  // 重力
+  bird.vy += 980 * dt
+  bird.y += bird.vy * dt
+  // 管道移动
+  const speed = 170 + Math.min(90, score * 3) // 越玩越快
+  pipes.forEach((p) => (p.x -= speed * dt))
+  if (pipes.length && pipes[0].x < -PIPE_W) pipes.shift()
+  if (!pipes.length || pipes[pipes.length - 1].x < W - 220) spawnPipe(W + 20)
+  // 计分：穿过管道
+  pipes.forEach((p) => {
+    if (!p.passed && p.x + PIPE_W < 90) {
+      p.passed = true
+      score++
+      emit('score', score)
+    }
+  })
+  // 碰撞检测
+  const bx = 90
+  const br = 15
+  let hit = bird.y < br || bird.y > H - br
+  for (const p of pipes) {
+    if (bx + br > p.x && bx - br < p.x + PIPE_W) {
+      if (bird.y - br < p.gapY - GAP / 2 || bird.y + br > p.gapY + GAP / 2) hit = true
+    }
+  }
+  if (hit && invincible <= 0) {
+    if (shieldOn) {
+      // 护盾抵挡一次并给 1 秒无敌
+      shieldOn = false
+      invincible = 1
+    } else {
+      alive = false
+      loop.stop()
+      draw()
+      emit('end', { score })
+      return
+    }
+  }
+  draw()
+}
+
+function draw() {
+  const p = palette()
+  // 天空渐变
+  const grad = ctx.createLinearGradient(0, 0, 0, H)
+  grad.addColorStop(0, p.bg)
+  grad.addColorStop(1, p.panel)
+  ctx.fillStyle = grad
+  ctx.fillRect(0, 0, W, H)
+  // 管道
+  pipes.forEach((pp) => {
+    ctx.fillStyle = p.accent
+    ctx.globalAlpha = 0.9
+    ctx.beginPath()
+    ctx.roundRect(pp.x, 0, PIPE_W, pp.gapY - GAP / 2, 6)
+    ctx.fill()
+    ctx.beginPath()
+    ctx.roundRect(pp.x, pp.gapY + GAP / 2, PIPE_W, H - pp.gapY - GAP / 2, 6)
+    ctx.fill()
+    // 管口
+    ctx.fillStyle = p.primary
+    ctx.fillRect(pp.x - 4, pp.gapY - GAP / 2 - 12, PIPE_W + 8, 12)
+    ctx.fillRect(pp.x - 4, pp.gapY + GAP / 2, PIPE_W + 8, 12)
+  })
+  ctx.globalAlpha = 1
+  // 小鸟（无敌时闪烁）
+  if (invincible <= 0 || Math.floor(performance.now() / 100) % 2 === 0) {
+    ctx.font = '30px serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.save()
+    ctx.translate(90, bird.y)
+    ctx.rotate(Math.max(-0.5, Math.min(0.9, bird.vy / 600)))
+    ctx.fillText('🐤', 0, 0)
+    ctx.restore()
+  }
+  // 护盾光圈
+  if (shieldOn) {
+    ctx.strokeStyle = p.accent
+    ctx.lineWidth = 3
+    ctx.beginPath()
+    ctx.arc(90, bird.y, 26, 0, 7)
+    ctx.stroke()
+  }
+  // 分数
+  ctx.font = 'bold 40px sans-serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'top'
+  ctx.fillStyle = p.text
+  ctx.fillText(score, W / 2, 20)
+}
+
+// ---- 对外接口 ----
+function start() {
+  bird = { y: H / 2, vy: 0 }
+  pipes = []
+  score = 0
+  shieldOn = false
+  invincible = 0
+  alive = true
+  spawnPipe(W + 120)
+  emit('score', 0)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  keys?.detach()
+}
+// 复活卡：原地复活 + 2 秒无敌；护盾：抵挡一次撞击
+function useProp(code) {
+  if (code === 'revive' && !alive) {
+    bird = { y: H / 2, vy: 0 }
+    invincible = 2
+    alive = true
+    loop.start()
+    return true
+  }
+  if (code === 'shield' && alive && !shieldOn) {
+    shieldOn = true
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  keys = new Keys()
+  keys.attach()
+  keys.onPress((k) => {
+    if (k === ' ') flap()
+  })
+  canvas.value.addEventListener('pointerdown', flap)
+  loop = createLoop(update)
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/FruitGame.vue b/src/games/components/FruitGame.vue
new file mode 100644
index 0000000..457bca5
--- /dev/null
+++ b/src/games/components/FruitGame.vue
@@ -0,0 +1,249 @@
+<script setup>
+// 切水果：60 秒限时，按住鼠标划刀切水果，切到炸弹扣分并震屏
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, palette, randInt, pick } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 720
+const H = 540
+let ctx
+let loop
+let fruits = [] // {x,y,vx,vy,emoji,r,isBomb,sliced,rot,vr}
+let halves = [] // 切开后的两半 {x,y,vx,vy,emoji,rot,vr,life}
+let trail = [] // 刀光轨迹 [{x,y,t}]
+let slicing = false
+let score = 0
+let combo = 0 // 一次挥刀连切数
+let comboTimer = 0
+let timeLeft = 60
+let countTimer = 0
+let spawnCd = 0
+let shake = 0
+let alive = false
+const FRUITS = ['🍉', '🍎', '🍊', '🍋', '🍓', '🥝', '🍑', '🍍']
+
+function spawnWave() {
+  const count = randInt(1, 3)
+  for (let i = 0; i < count; i++) {
+    const x = randInt(100, W - 100)
+    fruits.push({
+      x,
+      y: H + 40,
+      vx: (W / 2 - x) * 0.9 + randInt(-60, 60),
+      vy: -randInt(620, 780),
+      emoji: Math.random() < 0.12 ? '💣' : pick(FRUITS),
+      r: 30,
+      rot: 0,
+      vr: (Math.random() - 0.5) * 4,
+    })
+  }
+}
+
+function update(dt) {
+  if (shake > 0) shake -= dt
+  // 重力运动
+  const g = 900
+  fruits.forEach((f) => {
+    f.x += f.vx * dt
+    f.y += f.vy * dt
+    f.vy += g * dt
+    f.rot += f.vr * dt
+  })
+  fruits = fruits.filter((f) => f.y < H + 80)
+  halves.forEach((h) => {
+    h.x += h.vx * dt
+    h.y += h.vy * dt
+    h.vy += g * dt
+    h.rot += h.vr * dt
+    h.life -= dt
+  })
+  halves = halves.filter((h) => h.life > 0)
+  // 刀光轨迹保留 0.18 秒
+  const now = performance.now()
+  trail = trail.filter((t) => now - t.t < 180)
+  // 刷新一波水果
+  spawnCd -= dt
+  if (spawnCd <= 0) {
+    spawnWave()
+    spawnCd = randInt(9, 16) / 10
+  }
+  // 连击窗口
+  comboTimer -= dt
+  if (comboTimer <= 0) combo = 0
+  draw()
+}
+
+// 处理刀光切割
+function slice(x, y, px, py) {
+  for (const f of fruits) {
+    if (f.sliced) continue
+    // 线段与圆碰撞（简化：两端点任一在圆内或中点在圆内）
+    const midX = (x + px) / 2
+    const midY = (y + py) / 2
+    const hit =
+      Math.hypot(f.x - x, f.y - y) < f.r + 12 ||
+      Math.hypot(f.x - midX, f.y - midY) < f.r + 12
+    if (!hit) continue
+    f.sliced = true
+    if (f.emoji === '💣') {
+      // 炸弹：扣 30 分 + 震屏
+      score = Math.max(0, score - 30)
+      combo = 0
+      shake = 0.4
+      emit('score', score)
+    } else {
+      combo++
+      comboTimer = 0.5
+      // 连切加成：第 n 个 +10×n
+      score += 10 * combo
+      emit('score', score)
+      // 生成两半飞散
+      halves.push(
+        { x: f.x - 8, y: f.y, vx: -140 + randInt(-40, 0), vy: f.vy * 0.4, emoji: f.emoji, rot: f.rot, vr: -3, life: 1 },
+        { x: f.x + 8, y: f.y, vx: 140 + randInt(0, 40), vy: f.vy * 0.4, emoji: f.emoji, rot: f.rot, vr: 3, life: 1 }
+      )
+    }
+  }
+  fruits = fruits.filter((f) => !f.sliced)
+}
+
+function draw() {
+  const p = palette()
+  ctx.save()
+  if (shake > 0) {
+    ctx.translate(randInt(-6, 6), randInt(-6, 6))
+  }
+  ctx.fillStyle = p.bg
+  ctx.fillRect(-10, -10, W + 20, H + 20)
+  // 倒计时
+  ctx.fillStyle = timeLeft <= 10 ? '#ff5d73' : p.text
+  ctx.font = 'bold 26px sans-serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'top'
+  ctx.fillText(`⏱ ${timeLeft}`, W / 2, 14)
+  // 连击提示
+  if (combo >= 2) {
+    ctx.fillStyle = p.primary2
+    ctx.font = 'bold 20px sans-serif'
+    ctx.fillText(`${combo} 连切！`, W / 2, 50)
+  }
+  // 水果与两半
+  ctx.textBaseline = 'middle'
+  fruits.forEach((f) => {
+    ctx.save()
+    ctx.translate(f.x, f.y)
+    ctx.rotate(f.rot)
+    ctx.font = '52px serif'
+    ctx.fillText(f.emoji, 0, 0)
+    ctx.restore()
+  })
+  halves.forEach((h) => {
+    ctx.save()
+    ctx.translate(h.x, h.y)
+    ctx.rotate(h.rot)
+    ctx.globalAlpha = Math.max(0, h.life)
+    ctx.font = '30px serif'
+    ctx.fillText(h.emoji, 0, 0)
+    ctx.restore()
+  })
+  ctx.globalAlpha = 1
+  // 刀光
+  if (trail.length > 1) {
+    ctx.strokeStyle = p.accent
+    ctx.lineWidth = 4
+    ctx.lineCap = 'round'
+    ctx.beginPath()
+    ctx.moveTo(trail[0].x, trail[0].y)
+    for (let i = 1; i < trail.length; i++) ctx.lineTo(trail[i].x, trail[i].y)
+    ctx.stroke()
+  }
+  ctx.restore()
+}
+
+function toXY(e) {
+  const rect = canvas.value.getBoundingClientRect()
+  const scale = canvas.value.width / rect.width
+  return [(e.clientX - rect.left) * scale, (e.clientY - rect.top) * scale]
+}
+function onDown(e) {
+  slicing = true
+  const [x, y] = toXY(e)
+  trail.push({ x, y, t: performance.now() })
+}
+function onMove(e) {
+  if (!slicing || !alive) return
+  const [x, y] = toXY(e)
+  const prev = trail[trail.length - 1]
+  trail.push({ x, y, t: performance.now() })
+  if (prev) slice(x, y, prev.x, prev.y)
+}
+function onUp() {
+  slicing = false
+}
+
+function tick() {
+  timeLeft--
+  if (timeLeft <= 0) {
+    alive = false
+    clearInterval(countTimer)
+    loop.stop()
+    draw()
+    emit('end', { score })
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  fruits = []
+  halves = []
+  trail = []
+  score = 0
+  combo = 0
+  timeLeft = 60
+  shake = 0
+  spawnCd = 0.5
+  alive = true
+  emit('score', 0)
+  clearInterval(countTimer)
+  countTimer = setInterval(tick, 1000)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  clearInterval(countTimer)
+}
+// 复活卡：时间归零后再续 15 秒；时间延长卡：+30 秒
+function useProp(code) {
+  if (code === 'revive' && !alive) {
+    timeLeft = 15
+    alive = true
+    countTimer = setInterval(tick, 1000)
+    loop.start()
+    return true
+  }
+  if (code === 'time_extend' && alive) {
+    timeLeft += 30
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  canvas.value.addEventListener('pointerdown', onDown)
+  canvas.value.addEventListener('pointermove', onMove)
+  window.addEventListener('pointerup', onUp)
+  loop = createLoop(update)
+  draw()
+})
+onBeforeUnmount(() => {
+  stop()
+  window.removeEventListener('pointerup', onUp)
+})
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H" style="touch-action: none; cursor: crosshair"></canvas>
+</template>
diff --git a/src/games/components/Game2048.vue b/src/games/components/Game2048.vue
new file mode 100644
index 0000000..f755712
--- /dev/null
+++ b/src/games/components/Game2048.vue
@@ -0,0 +1,147 @@
+<script setup>
+// 2048：方向键滑动合并相同数字
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { Keys, palette, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const SIZE = 4
+const CELL = 100
+const GAP = 10
+const W = SIZE * CELL + (SIZE + 1) * GAP
+let ctx
+let keys
+let grid = []
+let score = 0
+let alive = false
+
+// 数字对应的底色（大数逐渐变暖）
+const TILE_COLORS = {
+  2: '#3c4a7a', 4: '#43578f', 8: '#f2b179', 16: '#f59563', 32: '#f67c5f',
+  64: '#f65e3b', 128: '#edcf72', 256: '#edcc61', 512: '#edc850', 1024: '#edc53f', 2048: '#edc22e',
+}
+
+// 随机空位放一个 2（90%）或 4（10%）
+function addTile() {
+  const empty = []
+  for (let y = 0; y < SIZE; y++) {
+    for (let x = 0; x < SIZE; x++) {
+      if (!grid[y][x]) empty.push([x, y])
+    }
+  }
+  if (!empty.length) return
+  const [x, y] = empty[randInt(0, empty.length - 1)]
+  grid[y][x] = Math.random() < 0.9 ? 2 : 4
+}
+
+// 压缩并合并一行（向左），返回 [新行, 得分]
+function slideRow(row) {
+  const vals = row.filter((v) => v)
+  let gained = 0
+  for (let i = 0; i < vals.length - 1; i++) {
+    if (vals[i] === vals[i + 1]) {
+      vals[i] *= 2
+      gained += vals[i]
+      vals.splice(i + 1, 1)
+    }
+  }
+  while (vals.length < SIZE) vals.push(0)
+  return [vals, gained]
+}
+
+// 朝指定方向滑动，返回是否发生变化
+function move(dirKey) {
+  const before = JSON.stringify(grid)
+  let gained = 0
+  const rotateCW = (g) => g[0].map((_, i) => g.map((r) => r[i]).reverse())
+  // 统一转成"向左滑"处理：先旋转到位，滑完转回来
+  let turns = { ArrowLeft: 0, ArrowUp: 1, ArrowRight: 2, ArrowDown: 3 }[dirKey]
+  for (let i = 0; i < turns; i++) grid = rotateCW(grid)
+  grid = grid.map((row) => {
+    const [nr, g] = slideRow(row)
+    gained += g
+    return nr
+  })
+  for (let i = 0; i < (4 - turns) % 4; i++) grid = rotateCW(grid)
+  if (JSON.stringify(grid) !== before) {
+    score += gained
+    emit('score', score)
+    addTile()
+    draw()
+    // 无空位且无可合并 → 结束
+    if (isDead()) {
+      alive = false
+      emit('end', { score })
+    }
+  }
+}
+
+function isDead() {
+  for (let y = 0; y < SIZE; y++) {
+    for (let x = 0; x < SIZE; x++) {
+      if (!grid[y][x]) return false
+      if (x + 1 < SIZE && grid[y][x] === grid[y][x + 1]) return false
+      if (y + 1 < SIZE && grid[y][x] === grid[y + 1][x]) return false
+    }
+  }
+  return true
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, W, W)
+  for (let y = 0; y < SIZE; y++) {
+    for (let x = 0; x < SIZE; x++) {
+      const v = grid[y][x]
+      const px = GAP + x * (CELL + GAP)
+      const py = GAP + y * (CELL + GAP)
+      ctx.fillStyle = v ? TILE_COLORS[v] || '#3c3a32' : 'rgba(255,255,255,0.07)'
+      ctx.beginPath()
+      ctx.roundRect(px, py, CELL, CELL, 10)
+      ctx.fill()
+      if (v) {
+        ctx.fillStyle = v <= 4 ? '#eee' : '#3a2f1b'
+        ctx.font = `bold ${v >= 1024 ? 30 : v >= 128 ? 36 : 42}px sans-serif`
+        ctx.textAlign = 'center'
+        ctx.textBaseline = 'middle'
+        ctx.fillText(v, px + CELL / 2, py + CELL / 2 + 2)
+      }
+    }
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  grid = Array.from({ length: SIZE }, () => Array(SIZE).fill(0))
+  score = 0
+  alive = true
+  addTile()
+  addTile()
+  emit('score', 0)
+  draw()
+}
+function stop() {
+  keys?.detach()
+}
+function useProp() {
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  keys = new Keys()
+  keys.attach()
+  keys.onPress((k) => {
+    if (alive && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(k)) move(k)
+  })
+  grid = Array.from({ length: SIZE }, () => Array(SIZE).fill(0))
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="W"></canvas>
+</template>
diff --git a/src/games/components/GomokuGame.vue b/src/games/components/GomokuGame.vue
new file mode 100644
index 0000000..05730e3
--- /dev/null
+++ b/src/games/components/GomokuGame.vue
@@ -0,0 +1,244 @@
+<script setup>
+// 五子棋：与启发式 AI 对弈，先连五者胜
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { palette } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const N = 15 // 15×15 路
+const CELL = 34
+const PAD = 24
+const SIZE = PAD * 2 + CELL * (N - 1)
+let ctx
+let board = [] // 0空 1我(黑) 2AI(白)
+let myTurn = true
+let playing = false
+let moveCount = 0
+let hintCell = null // 提示卡高亮的位置
+let startTs = 0
+
+// 落子后检查是否五连
+function checkWin(x, y, who) {
+  const dirs = [[1, 0], [0, 1], [1, 1], [1, -1]]
+  for (const [dx, dy] of dirs) {
+    let count = 1
+    for (const s of [1, -1]) {
+      let nx = x + dx * s
+      let ny = y + dy * s
+      while (nx >= 0 && nx < N && ny >= 0 && ny < N && board[ny][nx] === who) {
+        count++
+        nx += dx * s
+        ny += dy * s
+      }
+    }
+    if (count >= 5) return true
+  }
+  return false
+}
+
+// 评估某点对 who 的进攻价值（数各方向连子与开口）
+function evalPoint(x, y, who) {
+  const dirs = [[1, 0], [0, 1], [1, 1], [1, -1]]
+  let total = 0
+  for (const [dx, dy] of dirs) {
+    let count = 1
+    let open = 0
+    for (const s of [1, -1]) {
+      let nx = x + dx * s
+      let ny = y + dy * s
+      while (nx >= 0 && nx < N && ny >= 0 && ny < N && board[ny][nx] === who) {
+        count++
+        nx += dx * s
+        ny += dy * s
+      }
+      if (nx >= 0 && nx < N && ny >= 0 && ny < N && board[ny][nx] === 0) open++
+    }
+    // 连子数×开口数的分级打分
+    if (count >= 5) total += 1000000
+    else if (count === 4) total += open === 2 ? 100000 : 10000
+    else if (count === 3) total += open === 2 ? 5000 : 500
+    else if (count === 2) total += open === 2 ? 200 : 40
+    else total += 10
+  }
+  return total
+}
+
+// 找出对 who 最有价值的落点（进攻 + 1.1 倍防守权重）
+function bestMove(who) {
+  const opp = who === 1 ? 2 : 1
+  let best = null
+  let bestScore = -1
+  for (let y = 0; y < N; y++) {
+    for (let x = 0; x < N; x++) {
+      if (board[y][x]) continue
+      // 只考虑已有棋子附近两格内的位置（提速）
+      if (moveCount > 0 && !nearStone(x, y)) continue
+      const s = evalPoint(x, y, who) + evalPoint(x, y, opp) * 1.1
+      if (s > bestScore) {
+        bestScore = s
+        best = { x, y }
+      }
+    }
+  }
+  return best || { x: 7, y: 7 }
+}
+
+function nearStone(x, y) {
+  for (let dy = -2; dy <= 2; dy++) {
+    for (let dx = -2; dx <= 2; dx++) {
+      const nx = x + dx
+      const ny = y + dy
+      if (nx >= 0 && nx < N && ny >= 0 && ny < N && board[ny][nx]) return true
+    }
+  }
+  return false
+}
+
+// 我方落子
+function place(x, y) {
+  if (!playing || !myTurn || board[y][x]) return
+  board[y][x] = 1
+  moveCount++
+  hintCell = null
+  draw()
+  if (checkWin(x, y, 1)) {
+    finish(true)
+    return
+  }
+  if (moveCount >= N * N) {
+    finishDraw()
+    return
+  }
+  myTurn = false
+  // AI 思考延迟一点更自然
+  setTimeout(aiMove, 260)
+}
+
+function aiMove() {
+  if (!playing) return
+  const m = bestMove(2)
+  board[m.y][m.x] = 2
+  moveCount++
+  draw()
+  if (checkWin(m.x, m.y, 2)) {
+    finish(false)
+    return
+  }
+  if (moveCount >= N * N) {
+    finishDraw()
+    return
+  }
+  myTurn = true
+}
+
+// 结束：赢 150 + 速度奖励，输 10
+function finish(win) {
+  playing = false
+  const secs = Math.round((Date.now() - startTs) / 1000)
+  const score = win ? 150 + Math.max(0, 60 - secs) : 10
+  emit('score', score)
+  emit('end', { score })
+}
+function finishDraw() {
+  playing = false
+  emit('score', 50)
+  emit('end', { score: 50 })
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, SIZE, SIZE)
+  // 棋盘线
+  ctx.strokeStyle = p.dim
+  ctx.lineWidth = 1
+  for (let i = 0; i < N; i++) {
+    ctx.beginPath()
+    ctx.moveTo(PAD, PAD + i * CELL)
+    ctx.lineTo(SIZE - PAD, PAD + i * CELL)
+    ctx.stroke()
+    ctx.beginPath()
+    ctx.moveTo(PAD + i * CELL, PAD)
+    ctx.lineTo(PAD + i * CELL, SIZE - PAD)
+    ctx.stroke()
+  }
+  // 星位
+  ctx.fillStyle = p.dim
+  ;[[3, 3], [11, 3], [7, 7], [3, 11], [11, 11]].forEach(([x, y]) => {
+    ctx.beginPath()
+    ctx.arc(PAD + x * CELL, PAD + y * CELL, 3.5, 0, 7)
+    ctx.fill()
+  })
+  // 棋子
+  for (let y = 0; y < N; y++) {
+    for (let x = 0; x < N; x++) {
+      if (!board[y][x]) continue
+      const cx = PAD + x * CELL
+      const cy = PAD + y * CELL
+      const grad = ctx.createRadialGradient(cx - 4, cy - 4, 2, cx, cy, 14)
+      if (board[y][x] === 1) {
+        grad.addColorStop(0, '#555')
+        grad.addColorStop(1, '#0a0a0a')
+      } else {
+        grad.addColorStop(0, '#ffffff')
+        grad.addColorStop(1, '#c8c8c8')
+      }
+      ctx.fillStyle = grad
+      ctx.beginPath()
+      ctx.arc(cx, cy, 14, 0, 7)
+      ctx.fill()
+    }
+  }
+  // 提示位置
+  if (hintCell) {
+    ctx.strokeStyle = p.primary2
+    ctx.lineWidth = 3
+    ctx.beginPath()
+    ctx.arc(PAD + hintCell.x * CELL, PAD + hintCell.y * CELL, 15, 0, 7)
+    ctx.stroke()
+  }
+}
+
+function onClick(e) {
+  const rect = canvas.value.getBoundingClientRect()
+  const scale = canvas.value.width / rect.width
+  const x = Math.round(((e.clientX - rect.left) * scale - PAD) / CELL)
+  const y = Math.round(((e.clientY - rect.top) * scale - PAD) / CELL)
+  if (x >= 0 && x < N && y >= 0 && y < N) place(x, y)
+}
+
+// ---- 对外接口 ----
+function start() {
+  board = Array.from({ length: N }, () => Array(N).fill(0))
+  myTurn = true
+  playing = true
+  moveCount = 0
+  hintCell = null
+  startTs = Date.now()
+  emit('score', 0)
+  draw()
+}
+function stop() {}
+// 提示卡：为我标出当前最佳落点
+function useProp(code) {
+  if (code === 'hint' && playing && myTurn) {
+    hintCell = bestMove(1)
+    draw()
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  canvas.value.addEventListener('click', onClick)
+  board = Array.from({ length: N }, () => Array(N).fill(0))
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="SIZE" :height="SIZE"></canvas>
+</template>
diff --git a/src/games/components/JumpJumpGame.vue b/src/games/components/JumpJumpGame.vue
new file mode 100644
index 0000000..e04af9d
--- /dev/null
+++ b/src/games/components/JumpJumpGame.vue
@@ -0,0 +1,201 @@
+<script setup>
+// 跳一跳：按住蓄力松开起跳，落点越接近平台中心分越高
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, palette, randInt, pick } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 560
+const H = 560
+let ctx
+let loop
+let plats = [] // {x, w}（世界坐标，只需 x 轴）
+let player = { x: 0, y: 0, vx: 0, vy: 0, jumping: false }
+let cameraX = 0
+let charging = false
+let power = 0
+let score = 0
+let comboCenter = 0 // 连续踩中心次数
+let alive = false
+const PLAT_Y = H - 140 // 平台顶面（屏幕坐标）
+const COLORS_POOL = ['#ff5d73', '#4f8cff', '#4ade80', '#ffd500', '#b26bff', '#00e5ff']
+
+function addPlat() {
+  const last = plats[plats.length - 1]
+  const gap = randInt(110, 210)
+  const w = randInt(56, 110)
+  plats.push({ x: last.x + last.w / 2 + gap, w, color: pick(COLORS_POOL) })
+}
+
+function update(dt) {
+  // 蓄力
+  if (charging && !player.jumping) {
+    power = Math.min(1, power + dt * 0.9)
+  }
+  // 跳跃物理（抛物线）
+  if (player.jumping) {
+    player.x += player.vx * dt
+    player.y += player.vy * dt
+    player.vy += 1500 * dt
+    // 落回平台高度线
+    if (player.y >= 0 && player.vy > 0) {
+      player.y = 0
+      player.jumping = false
+      // 判定落点
+      const p = plats.find((pl) => player.x >= pl.x - pl.w / 2 - 8 && player.x <= pl.x + pl.w / 2 + 8)
+      if (!p) {
+        alive = false
+        loop.stop()
+        draw()
+        emit('end', { score })
+        return
+      }
+      // 距中心的偏差换算得分：中心 ≤8px 算完美（连续完美翻倍：2/4/8...）
+      const off = Math.abs(player.x - p.x)
+      if (off <= 8) {
+        comboCenter++
+        score += 2 * comboCenter
+      } else {
+        comboCenter = 0
+        score += 1
+      }
+      emit('score', score)
+      // 目标相机：让玩家保持在屏幕 1/3 处
+      addPlat()
+    }
+  }
+  // 相机平滑跟随
+  const targetCam = player.x - W / 3
+  cameraX += (targetCam - cameraX) * Math.min(1, dt * 6)
+  // 清理走过的平台
+  if (plats.length > 8) plats.shift()
+  draw()
+}
+
+function pressDown() {
+  if (!alive || player.jumping) return
+  charging = true
+  power = 0
+}
+function release() {
+  if (!alive || !charging || player.jumping) return
+  charging = false
+  // 起跳：功率决定水平速度
+  player.jumping = true
+  player.vx = 220 + power * 480
+  player.vy = -620
+  player.y = -0.01
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, W, H)
+  // 平台
+  plats.forEach((pl) => {
+    const sx = pl.x - cameraX
+    if (sx < -150 || sx > W + 150) return
+    ctx.fillStyle = pl.color
+    ctx.beginPath()
+    ctx.roundRect(sx - pl.w / 2, PLAT_Y, pl.w, 18, 8)
+    ctx.fill()
+    // 柱身
+    ctx.globalAlpha = 0.35
+    ctx.fillRect(sx - pl.w / 2 + 6, PLAT_Y + 18, pl.w - 12, H - PLAT_Y - 18)
+    ctx.globalAlpha = 1
+    // 中心点标记
+    ctx.fillStyle = '#ffffff88'
+    ctx.beginPath()
+    ctx.arc(sx, PLAT_Y + 9, 3, 0, 7)
+    ctx.fill()
+  })
+  // 玩家（蓄力时压扁）
+  const px = player.x - cameraX
+  const py = PLAT_Y + player.y - 16
+  const squash = charging ? power * 8 : 0
+  ctx.font = `${34 - squash}px serif`
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'bottom'
+  ctx.fillText('🐸', px, py + squash / 2)
+  // 蓄力条
+  if (charging) {
+    ctx.fillStyle = p.panel
+    ctx.beginPath()
+    ctx.roundRect(W / 2 - 90, H - 46, 180, 14, 7)
+    ctx.fill()
+    ctx.fillStyle = power > 0.85 ? '#ff5d73' : p.primary2
+    ctx.beginPath()
+    ctx.roundRect(W / 2 - 90, H - 46, 180 * power, 14, 7)
+    ctx.fill()
+  }
+  // 连击提示
+  if (comboCenter >= 2) {
+    ctx.fillStyle = p.primary2
+    ctx.font = 'bold 18px sans-serif'
+    ctx.textBaseline = 'top'
+    ctx.fillText(`精准 ×${comboCenter}！`, W / 2, 46)
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  plats = [{ x: 120, w: 110, color: pick(COLORS_POOL) }]
+  addPlat()
+  addPlat()
+  player = { x: 120, y: 0, vx: 0, vy: 0, jumping: false }
+  cameraX = 0
+  power = 0
+  charging = false
+  score = 0
+  comboCenter = 0
+  alive = true
+  emit('score', 0)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  window.removeEventListener('keyup', onKeyUp)
+  window.removeEventListener('keydown', onKeyDown)
+}
+// 复活卡：回到最近平台中心继续
+function useProp(code) {
+  if (code === 'revive' && !alive) {
+    const nearest = plats.reduce((a, b) => (Math.abs(a.x - player.x) < Math.abs(b.x - player.x) ? a : b))
+    player = { x: nearest.x, y: 0, vx: 0, vy: 0, jumping: false }
+    alive = true
+    loop.start()
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+function onKeyDown(e) {
+  if (e.key === ' ') {
+    e.preventDefault()
+    pressDown()
+  }
+}
+function onKeyUp(e) {
+  if (e.key === ' ') release()
+}
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  canvas.value.addEventListener('pointerdown', pressDown)
+  window.addEventListener('pointerup', release)
+  window.addEventListener('keydown', onKeyDown)
+  window.addEventListener('keyup', onKeyUp)
+  loop = createLoop(update)
+  plats = [{ x: 120, w: 110, color: pick(COLORS_POOL) }]
+  draw()
+})
+onBeforeUnmount(() => {
+  stop()
+  window.removeEventListener('pointerup', release)
+})
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/KlotskiGame.vue b/src/games/components/KlotskiGame.vue
new file mode 100644
index 0000000..db5f298
--- /dev/null
+++ b/src/games/components/KlotskiGame.vue
@@ -0,0 +1,204 @@
+<script setup>
+// 华容道：经典"横刀立马"布局，把曹操（2×2）移到底部出口
+import { ref } from 'vue'
+
+const emit = defineEmits(['score', 'end'])
+// 棋盘 4 列 × 5 行；块定义 {id, name, x, y, w, h, type}
+const blocks = ref([])
+const moves = ref(0)
+const playing = ref(false)
+const selected = ref(null)
+let startTs = 0
+
+// 经典开局：横刀立马
+function layout() {
+  blocks.value = [
+    { id: 'cc', name: '曹操', x: 1, y: 0, w: 2, h: 2, type: 'boss' },
+    { id: 'gy', name: '关羽', x: 1, y: 2, w: 2, h: 1, type: 'h' },
+    { id: 'zf', name: '张飞', x: 0, y: 0, w: 1, h: 2, type: 'v' },
+    { id: 'zy', name: '赵云', x: 3, y: 0, w: 1, h: 2, type: 'v' },
+    { id: 'mc', name: '马超', x: 0, y: 2, w: 1, h: 2, type: 'v' },
+    { id: 'hz', name: '黄忠', x: 3, y: 2, w: 1, h: 2, type: 'v' },
+    { id: 's1', name: '兵', x: 0, y: 4, w: 1, h: 1, type: 's' },
+    { id: 's2', name: '兵', x: 1, y: 3, w: 1, h: 1, type: 's' },
+    { id: 's3', name: '兵', x: 2, y: 3, w: 1, h: 1, type: 's' },
+    { id: 's4', name: '兵', x: 3, y: 4, w: 1, h: 1, type: 's' },
+  ]
+}
+
+// 检查块移动 (dx,dy) 后是否合法
+function canMove(b, dx, dy) {
+  const nx = b.x + dx
+  const ny = b.y + dy
+  if (nx < 0 || ny < 0 || nx + b.w > 4 || ny + b.h > 5) return false
+  for (const o of blocks.value) {
+    if (o.id === b.id) continue
+    // 矩形重叠检测
+    if (nx < o.x + o.w && nx + b.w > o.x && ny < o.y + o.h && ny + b.h > o.y) return false
+  }
+  return true
+}
+
+function select(b) {
+  if (!playing.value) return
+  selected.value = b.id
+}
+
+// 方向按钮移动选中块
+function moveSelected(dx, dy) {
+  if (!playing.value || !selected.value) return
+  const b = blocks.value.find((x) => x.id === selected.value)
+  if (!b || !canMove(b, dx, dy)) return
+  b.x += dx
+  b.y += dy
+  moves.value++
+  // 胜利：曹操到达底部中间出口 (1,3)
+  if (b.id === 'cc' && b.x === 1 && b.y === 3) {
+    playing.value = false
+    const secs = Math.round((Date.now() - startTs) / 1000)
+    // 得分：500 - 步数×2 - 用时，下限 60
+    const score = Math.max(60, 500 - moves.value * 2 - secs)
+    emit('score', score)
+    emit('end', { score })
+  }
+}
+
+// 点击移动：优先尝试朝空位滑动（四方向找第一个可行方向）
+function tapMove(b) {
+  if (!playing.value) return
+  selected.value = b.id
+  const dirs = [
+    [0, 1],
+    [0, -1],
+    [1, 0],
+    [-1, 0],
+  ]
+  for (const [dx, dy] of dirs) {
+    if (canMove(b, dx, dy)) {
+      moveSelected(dx, dy)
+      return
+    }
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  layout()
+  moves.value = 0
+  selected.value = null
+  playing.value = true
+  startTs = Date.now()
+  emit('score', 0)
+}
+function stop() {}
+function useProp() {
+  return false
+}
+defineExpose({ start, stop, useProp })
+layout()
+</script>
+
+<template>
+  <div class="klotski">
+    <p class="hud text-dim">步数 {{ moves }} · 点击滑块自动滑动，或选中后用方向按钮</p>
+    <div class="board">
+      <div
+        v-for="b in blocks"
+        :key="b.id"
+        class="block"
+        :class="[b.type, { sel: selected === b.id }]"
+        :style="{
+          left: `calc(${b.x} * (25% ))`,
+          top: `calc(${b.y} * 20%)`,
+          width: `calc(${b.w} * 25% - 6px)`,
+          height: `calc(${b.h} * 20% - 6px)`,
+        }"
+        @click="tapMove(b)"
+      >
+        {{ b.name }}
+      </div>
+      <!-- 出口标记 -->
+      <div class="exit">▼ 出口 ▼</div>
+    </div>
+    <div class="pad">
+      <button class="btn btn-ghost btn-sm" @click="moveSelected(0, -1)">↑</button>
+      <div>
+        <button class="btn btn-ghost btn-sm" @click="moveSelected(-1, 0)">←</button>
+        <button class="btn btn-ghost btn-sm" @click="moveSelected(0, 1)">↓</button>
+        <button class="btn btn-ghost btn-sm" @click="moveSelected(1, 0)">→</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.klotski {
+  width: min(380px, 90vw);
+  text-align: center;
+}
+.hud {
+  font-size: 12px;
+  margin-bottom: 10px;
+}
+.board {
+  position: relative;
+  aspect-ratio: 4/5;
+  background: var(--bg-panel);
+  border: 2px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+}
+.block {
+  position: absolute;
+  margin: 3px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 17px;
+  cursor: pointer;
+  transition: left 0.16s ease, top 0.16s ease, box-shadow 0.15s;
+  user-select: none;
+  color: #fff;
+}
+.block.boss {
+  background: linear-gradient(135deg, #e5484d, #ff8fa3);
+  font-size: 24px;
+}
+.block.h {
+  background: linear-gradient(135deg, #2f9e6e, #4ade80);
+}
+.block.v {
+  background: linear-gradient(135deg, #3563c4, #4f8cff);
+}
+.block.s {
+  background: linear-gradient(135deg, #b98718, #ffd500);
+  color: #443300;
+}
+.block.sel {
+  box-shadow: 0 0 0 3px var(--accent), var(--glow);
+  z-index: 2;
+}
+.exit {
+  position: absolute;
+  bottom: 0;
+  left: 25%;
+  width: 50%;
+  font-size: 11px;
+  color: var(--primary);
+  border-top: 2px dashed var(--primary);
+  padding: 2px 0;
+}
+.pad {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+}
+.pad div {
+  display: flex;
+  gap: 6px;
+}
+</style>
diff --git a/src/games/components/LightsOutGame.vue b/src/games/components/LightsOutGame.vue
new file mode 100644
index 0000000..df751cc
--- /dev/null
+++ b/src/games/components/LightsOutGame.vue
@@ -0,0 +1,147 @@
+<script setup>
+// 关灯游戏：点击翻转自身与上下左右，全部关掉过关，关卡越深灯越多
+import { ref } from 'vue'
+import { randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const N = 5
+const lights = ref([]) // 5×5 布尔
+const level = ref(1)
+const moves = ref(0)
+const playing = ref(false)
+const totalLevels = 5 // 通关 5 关后结算
+let score = 0
+let hintCell = ref(null)
+let pressLog = [] // 打乱时按过的格子（提示卡用：再按一次即撤销）
+
+function flip(r, c, log = false) {
+  const toggle = (rr, cc) => {
+    if (rr >= 0 && rr < N && cc >= 0 && cc < N) lights.value[rr][cc] = !lights.value[rr][cc]
+  }
+  toggle(r, c)
+  toggle(r - 1, c)
+  toggle(r + 1, c)
+  toggle(r, c - 1)
+  toggle(r, c + 1)
+  if (log) {
+    // 记录打乱按键（同一格按两次=没按，成对抵消）
+    const key = `${r},${c}`
+    const idx = pressLog.indexOf(key)
+    if (idx >= 0) pressLog.splice(idx, 1)
+    else pressLog.push(key)
+  }
+}
+
+// 生成第 lv 关：从全灭状态随机按 lv+4 次（保证有解）
+function build(lv) {
+  lights.value = Array.from({ length: N }, () => Array(N).fill(false))
+  pressLog = []
+  for (let i = 0; i < lv + 4; i++) {
+    flip(randInt(0, N - 1), randInt(0, N - 1), true)
+  }
+  // 万一全灭（抵消光了）再按一次
+  if (allOff()) flip(randInt(0, N - 1), randInt(0, N - 1), true)
+  hintCell.value = null
+}
+
+function allOff() {
+  return lights.value.every((row) => row.every((v) => !v))
+}
+
+function click(r, c) {
+  if (!playing.value) return
+  flip(r, c, true)
+  moves.value++
+  hintCell.value = null
+  if (allOff()) {
+    // 过关：120 - 步数×2，下限 30
+    score += Math.max(30, 120 - moves.value * 2)
+    emit('score', score)
+    if (level.value >= totalLevels) {
+      playing.value = false
+      emit('end', { score })
+      return
+    }
+    level.value++
+    moves.value = 0
+    build(level.value)
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  level.value = 1
+  moves.value = 0
+  score = 0
+  playing.value = true
+  build(1)
+  emit('score', 0)
+}
+function stop() {}
+// 提示卡：高亮一个"按下即接近解"的格子（打乱记录中剩余的一步）
+function useProp(code) {
+  if (code === 'hint' && playing.value && pressLog.length) {
+    const [r, c] = pressLog[0].split(',').map(Number)
+    hintCell.value = [r, c]
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+build(1)
+</script>
+
+<template>
+  <div class="lo">
+    <p class="status text-dim">第 {{ level }}/{{ totalLevels }} 关 · 本关步数 {{ moves }}</p>
+    <div class="board">
+      <template v-for="(row, r) in lights" :key="r">
+        <button
+          v-for="(v, c) in row"
+          :key="`${r}-${c}`"
+          class="light"
+          :class="{ on: v, hint: hintCell && hintCell[0] === r && hintCell[1] === c }"
+          @click="click(r, c)"
+        ></button>
+      </template>
+    </div>
+    <p class="tip text-dim">点击会翻转自身与相邻的灯，把所有灯关掉！</p>
+  </div>
+</template>
+
+<style scoped>
+.lo {
+  text-align: center;
+  width: min(400px, 90vw);
+}
+.status {
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+.board {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px;
+}
+.light {
+  aspect-ratio: 1;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.light.on {
+  background: radial-gradient(circle at 40% 35%, #fff6c8, var(--primary-2));
+  border-color: var(--primary-2);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--primary-2) 65%, transparent);
+}
+.light.hint {
+  outline: 3px solid var(--accent);
+  outline-offset: 2px;
+}
+.tip {
+  margin-top: 14px;
+  font-size: 12px;
+}
+</style>
diff --git a/src/games/components/LinkGame.vue b/src/games/components/LinkGame.vue
new file mode 100644
index 0000000..b837302
--- /dev/null
+++ b/src/games/components/LinkGame.vue
@@ -0,0 +1,527 @@
+<script setup>
+// 连连看：12×8 图案盘（外围一圈虚拟空格供连线绕行）
+// 两个相同图案间若存在拐弯不超过两次的空路径即可消除
+// 关卡制：共 12 关，每关消除后剩余图块按不同规则移动（静止/下落/上浮/左靠/右靠/分裂），
+// 后 6 关（⚡加速轮）起始时间更紧；通关第 N 关解锁第 N+1 关（emit progress 上报进度）
+// 道具：hint 提示一对、time_extend 加 30 秒、bomb 直接消除一对
+import { ref, computed, onBeforeUnmount } from 'vue'
+
+const emit = defineEmits(['score', 'end', 'progress'])
+
+const COLS = 12
+const ROWS = 8
+// 虚拟网格含外围空圈：(ROWS+2) × (COLS+2)
+const GW = COLS + 2
+const GH = ROWS + 2
+const ICONS = ['🍎', '🍌', '🍇', '🍉', '🍓', '🍑', '🍍', '🥝', '🍒', '🥕', '🌽', '🍄', '🐱', '🐶', '🐼', '🦊', '🐸', '🐤', '🦁', '🐙', '⚽', '🎈', '⭐', '🌙']
+
+const TOTAL_LEVELS = 12 // 通关第 12 关即全通关
+// 关卡移动模式：经典连连看每关规则不同，6 种循环（第 7~12 关为限时更紧的加速轮）
+const MODES = [
+  { key: 'none', name: '经典', tip: '图块不动' },
+  { key: 'down', name: '下落', tip: '消除后图块向下坠落' },
+  { key: 'up', name: '上浮', tip: '消除后图块向上浮起' },
+  { key: 'left', name: '左靠', tip: '消除后图块向左靠拢' },
+  { key: 'right', name: '右靠', tip: '消除后图块向右靠拢' },
+  { key: 'split', name: '分裂', tip: '消除后图块向两侧分开' },
+]
+// 每关起始时间：前 6 关 240 秒，加速轮 180 秒
+const levelTime = (lv) => (lv <= 6 ? 240 : 180)
+
+const grid = ref([]) // 虚拟网格：'' 为空，否则为图案
+const selected = ref(null) // {r,c} 虚拟坐标
+const hintPair = ref(null) // 提示中的两个坐标
+const pathLine = ref('') // SVG 连线点串
+const score = ref(0)
+const level = ref(1)
+const timeLeft = ref(240)
+const playing = ref(false)
+const remain = ref(0)
+const modeBannerT = ref(0) // 关卡开场模式提示（秒）
+let timer = 0
+let comboAt = 0
+
+// 当前关卡对应的移动模式
+const curMode = computed(() => MODES[(level.value - 1) % MODES.length])
+
+// ---- 布板 ----
+function buildBoard() {
+  // 每关 24 种图案 × 每种 4 个 = 96 格铺满
+  const cells = []
+  for (const icon of ICONS) for (let i = 0; i < 4; i++) cells.push(icon)
+  // 洗牌
+  for (let i = cells.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[cells[i], cells[j]] = [cells[j], cells[i]]
+  }
+  const g = Array.from({ length: GH }, () => Array(GW).fill(''))
+  let k = 0
+  for (let r = 1; r <= ROWS; r++) {
+    for (let c = 1; c <= COLS; c++) g[r][c] = cells[k++]
+  }
+  grid.value = g
+  remain.value = ROWS * COLS
+  // 保证开局有解
+  if (!findRemovablePair()) shuffleBoard()
+}
+
+// shuffleBoard 把剩余图案打乱重摆（保持位置集合不变）
+function shuffleBoard() {
+  const g = grid.value
+  const pos = []
+  const icons = []
+  for (let r = 1; r <= ROWS; r++) {
+    for (let c = 1; c <= COLS; c++) {
+      if (g[r][c]) {
+        pos.push([r, c])
+        icons.push(g[r][c])
+      }
+    }
+  }
+  do {
+    for (let i = icons.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1))
+      ;[icons[i], icons[j]] = [icons[j], icons[i]]
+    }
+    pos.forEach(([r, c], i) => (g[r][c] = icons[i]))
+  } while (!findRemovablePair() && icons.length > 2)
+  grid.value = [...g.map((row) => [...row])]
+}
+
+// ---- 路径搜索：BFS 状态 (r,c,方向)，拐弯数为代价，≤2 次可达即连通 ----
+const DIRS = [
+  [-1, 0],
+  [1, 0],
+  [0, -1],
+  [0, 1],
+]
+function findPath(a, b) {
+  const g = grid.value
+  // turns[r][c][dir] = 到达该格且朝向 dir 的最少拐弯数
+  const best = Array.from({ length: GH }, () => Array.from({ length: GW }, () => [9, 9, 9, 9]))
+  const queue = []
+  // 记录前驱以还原路径
+  const prev = {}
+  for (let d = 0; d < 4; d++) {
+    const nr = a.r + DIRS[d][0]
+    const nc = a.c + DIRS[d][1]
+    if (nr < 0 || nr >= GH || nc < 0 || nc >= GW) continue
+    if (!(nr === b.r && nc === b.c) && g[nr][nc]) continue
+    best[nr][nc][d] = 0
+    prev[`${nr},${nc},${d}`] = null
+    queue.push([nr, nc, d])
+  }
+  let found = null
+  while (queue.length) {
+    // 取拐弯数最小的状态（队列短，直接线性找）
+    let bi = 0
+    for (let i = 1; i < queue.length; i++) {
+      const [r1, c1, d1] = queue[i]
+      const [r0, c0, d0] = queue[bi]
+      if (best[r1][c1][d1] < best[r0][c0][d0]) bi = i
+    }
+    const [r, c, d] = queue.splice(bi, 1)[0]
+    const turns = best[r][c][d]
+    if (turns > 2) continue
+    if (r === b.r && c === b.c) {
+      found = [r, c, d]
+      break
+    }
+    for (let nd = 0; nd < 4; nd++) {
+      const nt = turns + (nd === d ? 0 : 1)
+      if (nt > 2) continue
+      const nr = r + DIRS[nd][0]
+      const nc = c + DIRS[nd][1]
+      if (nr < 0 || nr >= GH || nc < 0 || nc >= GW) continue
+      if (!(nr === b.r && nc === b.c) && g[nr][nc]) continue
+      if (nt < best[nr][nc][nd]) {
+        best[nr][nc][nd] = nt
+        prev[`${nr},${nc},${nd}`] = [r, c, d]
+        queue.push([nr, nc, nd])
+      }
+    }
+  }
+  if (!found) return null
+  // 还原路径（含起点）
+  const pts = []
+  let cur = found
+  while (cur) {
+    pts.unshift([cur[0], cur[1]])
+    cur = prev[`${cur[0]},${cur[1]},${cur[2]}`]
+  }
+  pts.unshift([a.r, a.c])
+  return pts
+}
+
+// findRemovablePair 找一对可消除的图案（提示与死局检测共用）
+function findRemovablePair() {
+  const g = grid.value
+  const byIcon = {}
+  for (let r = 1; r <= ROWS; r++) {
+    for (let c = 1; c <= COLS; c++) {
+      if (g[r][c]) (byIcon[g[r][c]] ||= []).push({ r, c })
+    }
+  }
+  for (const list of Object.values(byIcon)) {
+    for (let i = 0; i < list.length; i++) {
+      for (let j = i + 1; j < list.length; j++) {
+        if (findPath(list[i], list[j])) return [list[i], list[j]]
+      }
+    }
+  }
+  return null
+}
+
+// ---- 交互 ----
+function clickTile(r, c) {
+  if (!playing.value || !grid.value[r][c]) return
+  hintPair.value = null
+  const sel = selected.value
+  if (!sel) {
+    selected.value = { r, c }
+    return
+  }
+  if (sel.r === r && sel.c === c) {
+    selected.value = null
+    return
+  }
+  if (grid.value[sel.r][sel.c] !== grid.value[r][c]) {
+    selected.value = { r, c }
+    return
+  }
+  const path = findPath(sel, { r, c })
+  if (!path) {
+    selected.value = { r, c }
+    return
+  }
+  // 消除成功：画连线 → 300ms 后移除
+  drawLine(path)
+  const a = { ...sel }
+  selected.value = null
+  removePair(a, { r, c }, true)
+}
+
+// removePair 消除一对图案（点击连线与炸弹道具共用）：计分、过关判定、按模式移动、死局洗牌
+function removePair(a, b, combo) {
+  const now = Date.now()
+  const isCombo = combo && now - comboAt < 3000
+  comboAt = now
+  score.value += isCombo ? 15 : 10
+  emit('score', score.value)
+  grid.value[a.r][a.c] = ''
+  grid.value[b.r][b.c] = ''
+  remain.value -= 2
+  setTimeout(() => (pathLine.value = ''), 320)
+  if (remain.value <= 0) {
+    finishLevel()
+    return
+  }
+  // 按本关模式移动剩余图块，再检查是否死局
+  applyShift()
+  if (!findRemovablePair()) shuffleBoard()
+}
+
+// finishLevel 过关结算：上报解锁进度；最后一关给通关奖励并结束，否则进入下一关
+function finishLevel() {
+  score.value += 50
+  emit('score', score.value)
+  emit('progress', Math.min(level.value + 1, TOTAL_LEVELS + 1))
+  if (level.value >= TOTAL_LEVELS) {
+    // 全部通关：额外奖励 +300
+    score.value += 300
+    emit('score', score.value)
+    playing.value = false
+    clearInterval(timer)
+    emit('end', { score: score.value })
+    return
+  }
+  level.value++
+  timeLeft.value += 45
+  buildBoard()
+  showModeBanner()
+}
+
+// drawLine 把路径转换为 SVG 折线（单位=格）
+function drawLine(pts) {
+  pathLine.value = pts.map(([r, c]) => `${c + 0.5},${r + 0.5}`).join(' ')
+}
+
+// applyShift：按当前关卡模式移动剩余图块（每次消除后调用）
+function applyShift() {
+  const mode = curMode.value.key
+  if (mode === 'none') return
+  const g = grid.value
+  if (mode === 'down' || mode === 'up') {
+    // 纵向压实：逐列收集非空图案，贴到底部（下落）或顶部（上浮）
+    for (let c = 1; c <= COLS; c++) {
+      const stack = []
+      for (let r = 1; r <= ROWS; r++) if (g[r][c]) stack.push(g[r][c])
+      for (let r = 1; r <= ROWS; r++) g[r][c] = ''
+      stack.forEach((icon, i) => {
+        const r = mode === 'down' ? ROWS - stack.length + 1 + i : 1 + i
+        g[r][c] = icon
+      })
+    }
+  } else if (mode === 'left' || mode === 'right') {
+    // 横向压实：逐行收集，贴到左端或右端
+    for (let r = 1; r <= ROWS; r++) {
+      const line = []
+      for (let c = 1; c <= COLS; c++) if (g[r][c]) line.push(g[r][c])
+      for (let c = 1; c <= COLS; c++) g[r][c] = ''
+      line.forEach((icon, i) => {
+        const c = mode === 'left' ? 1 + i : COLS - line.length + 1 + i
+        g[r][c] = icon
+      })
+    }
+  } else if (mode === 'split') {
+    // 分裂：左半区向左靠、右半区向右靠，中间逐渐掏空
+    const mid = COLS / 2
+    for (let r = 1; r <= ROWS; r++) {
+      const leftIcons = []
+      const rightIcons = []
+      for (let c = 1; c <= mid; c++) if (g[r][c]) leftIcons.push(g[r][c])
+      for (let c = mid + 1; c <= COLS; c++) if (g[r][c]) rightIcons.push(g[r][c])
+      for (let c = 1; c <= COLS; c++) g[r][c] = ''
+      leftIcons.forEach((icon, i) => (g[r][1 + i] = icon))
+      rightIcons.forEach((icon, i) => (g[r][COLS - rightIcons.length + 1 + i] = icon))
+    }
+  }
+  grid.value = [...g.map((row) => [...row])]
+}
+
+function tick() {
+  timeLeft.value--
+  if (timeLeft.value <= 0) {
+    playing.value = false
+    clearInterval(timer)
+    emit('end', { score: score.value })
+  }
+}
+
+// 关卡开场：展示 2.4 秒的模式提示横幅
+let bannerTimer = 0
+function showModeBanner() {
+  modeBannerT.value = 1
+  clearTimeout(bannerTimer)
+  bannerTimer = setTimeout(() => (modeBannerT.value = 0), 2400)
+}
+
+// ---- 对外接口 ----
+// start 开局：opts.level 指定起始关（来自关卡选择面板，默认第 1 关）
+function start(opts) {
+  score.value = 0
+  level.value = Math.min(Math.max(opts?.level || 1, 1), TOTAL_LEVELS)
+  timeLeft.value = levelTime(level.value)
+  selected.value = null
+  hintPair.value = null
+  pathLine.value = ''
+  playing.value = true
+  buildBoard()
+  showModeBanner()
+  emit('score', 0)
+  clearInterval(timer)
+  timer = setInterval(tick, 1000)
+}
+function stop() {
+  playing.value = false
+  clearInterval(timer)
+}
+// hint：闪烁提示一对可消除图案；time_extend：+30 秒；bomb：直接炸掉一对（无视连线规则）
+function useProp(code) {
+  if (!playing.value) return false
+  if (code === 'time_extend') {
+    timeLeft.value += 30
+    return true
+  }
+  if (code === 'hint') {
+    const pair = findRemovablePair()
+    if (!pair) return false
+    hintPair.value = pair
+    setTimeout(() => (hintPair.value = null), 2000)
+    return true
+  }
+  if (code === 'bomb') {
+    // 优先炸可连的一对；没有就炸任意相同的一对
+    let pair = findRemovablePair()
+    if (!pair) {
+      const g = grid.value
+      const byIcon = {}
+      for (let r = 1; r <= ROWS; r++) {
+        for (let c = 1; c <= COLS; c++) {
+          if (g[r][c]) (byIcon[g[r][c]] ||= []).push({ r, c })
+        }
+      }
+      pair = Object.values(byIcon).find((l) => l.length >= 2)?.slice(0, 2) || null
+    }
+    if (!pair) return false
+    selected.value = null
+    removePair(pair[0], pair[1], false)
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+onBeforeUnmount(() => {
+  clearInterval(timer)
+  clearTimeout(bannerTimer)
+})
+
+function isHint(r, c) {
+  return hintPair.value?.some((p) => p.r === r && p.c === c)
+}
+</script>
+
+<template>
+  <div class="link-board">
+    <div class="hud">
+      <span>⏱ <b :class="{ danger: timeLeft <= 30 }">{{ timeLeft }}</b> 秒</span>
+      <span>第 {{ level }}/12 关 <b class="mode-name">{{ curMode.name }}</b> · 剩 {{ remain }} 块</span>
+      <span>得分 <b class="score">{{ score }}</b></span>
+    </div>
+    <div class="grid-wrap">
+      <!-- 关卡开场：模式提示横幅 -->
+      <div v-if="modeBannerT" class="mode-banner">
+        <div class="mb-title">第 {{ level }} 关 · {{ curMode.name }}</div>
+        <div class="mb-tip">{{ curMode.tip }}</div>
+      </div>
+      <!-- 含外圈虚拟空格的完整网格（外圈不可见但参与连线） -->
+      <div class="grid" :style="{ gridTemplateColumns: `repeat(${GW}, 1fr)` }">
+        <template v-for="(row, r) in grid" :key="r">
+          <button
+            v-for="(icon, c) in row"
+            :key="`${r}-${c}`"
+            class="tile"
+            :class="{
+              empty: !icon,
+              border: r === 0 || r === GH - 1 || c === 0 || c === GW - 1,
+              sel: selected?.r === r && selected?.c === c,
+              hint: isHint(r, c),
+            }"
+            @click="clickTile(r, c)"
+          >
+            {{ icon }}
+          </button>
+        </template>
+      </div>
+      <!-- 消除连线 -->
+      <svg v-if="pathLine" class="line-svg" :viewBox="`0 0 ${GW} ${GH}`" preserveAspectRatio="none">
+        <polyline :points="pathLine" fill="none" stroke="var(--accent)" stroke-width="0.14" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </div>
+    <p class="tips">点击两个相同图案消除，连线最多拐两次弯 · 3 秒内连续消除有加成 · 共 12 关每关规则不同，通关自动解锁下一关</p>
+  </div>
+</template>
+
+<style scoped>
+.link-board {
+  width: min(680px, 94vw);
+  text-align: center;
+}
+.hud {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+.danger {
+  color: #ff5d73;
+}
+.score {
+  color: var(--primary);
+}
+.grid-wrap {
+  position: relative;
+}
+.grid {
+  display: grid;
+  gap: 3px;
+}
+.tile {
+  aspect-ratio: 1;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  font-size: clamp(14px, 2.6vw, 24px);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: all 0.12s;
+}
+.tile.empty {
+  background: transparent;
+  border-color: transparent;
+  cursor: default;
+}
+.tile.border {
+  visibility: hidden;
+  pointer-events: none;
+}
+.tile.sel {
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+  transform: scale(1.06);
+}
+.tile.hint {
+  border-color: var(--accent);
+  animation: blink 0.5s ease-in-out infinite;
+}
+@keyframes blink {
+  50% {
+    background: color-mix(in srgb, var(--accent) 35%, var(--bg-card));
+  }
+}
+.line-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.mode-banner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  background: rgba(0, 0, 0, 0.55);
+  border-radius: 10px;
+  z-index: 5;
+  pointer-events: none;
+  animation: mb-fade 2.4s ease forwards;
+}
+.mb-title {
+  font-size: 26px;
+  font-weight: 800;
+  color: #fff;
+}
+.mb-tip {
+  font-size: 14px;
+  color: var(--accent);
+}
+@keyframes mb-fade {
+  0% {
+    opacity: 0;
+  }
+  12% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.mode-name {
+  color: var(--accent);
+}
+.tips {
+  margin-top: 10px;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+</style>
diff --git a/src/games/components/MarioGame.vue b/src/games/components/MarioGame.vue
new file mode 100644
index 0000000..1ed5a2c
--- /dev/null
+++ b/src/games/components/MarioGame.vue
@@ -0,0 +1,904 @@
+<script setup>
+// 超级马里奥：按原版《超级马里奥兄弟》还原 World 1-1 / 1-2 / 1-3 / 1-4 完整第一世界
+// 机制还原：顶问号块出金币/蘑菇、吃蘑菇变大、大个子顶碎砖块、
+// 板栗仔走崖会掉落、乌龟沿平台折返、旗杆按抓取高度计分、1-1 水管暗道通地下奖励室、
+// 1-4 城堡关：岩浆即死、旋转火棍、库巴守桥（不可踩只能跳过）、摸斧头断桥库巴落岩浆
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, Keys, palette } from '../engine'
+import { buildLevels } from './marioLevels'
+
+const emit = defineEmits(['score', 'end', 'progress'])
+const canvas = ref(null)
+const W = 800
+const H = 480
+const TILE = 32
+const LV = buildLevels() // 关卡数据不可变，重开/复活时重新解析即可复原砖块
+let ctx
+let keys
+let loop
+// 玩家状态（big=吃过蘑菇的大个子形态）
+let player = { x: 0, y: 0, vx: 0, vy: 0, onGround: false, face: 1, big: false }
+const PW = 24
+function ph() {
+  return player.big ? 56 : 30
+}
+let solidMap = new Map() // "列,行" → {c,r,kind} 全部实心块
+let coins = []
+let enemies = []
+let mushrooms = [] // 顶出来的蘑菇道具
+let particles = [] // 金币弹出/砖块碎片
+let flag = { x: -9999, topY: 0, baseY: 0 }
+let cameraX = 0
+let score = 0
+let levelIdx = 0
+let alive = false
+let won = false
+let shieldOn = false
+let invincible = 0
+let bannerT = 0 // 关卡开场横幅倒计时
+// ---- 城堡关（1-4）专属元素 ----
+let firebars = [] // 旋转火棍 {cx,cy,angle,speed}
+let lavaSet = new Set() // 岩浆格 "列,行"
+let axe = null // 斧头中心点 {x,y}
+let axeTaken = false
+let winT = 0 // 砍斧后的断桥演出倒计时（结束后过关）
+
+// 四种场景的经典配色（原版 NES 色感）
+const THEMES = {
+  overworld: { sky: '#5c94fc', block: '#c84c0c', seam: '#7a2400', deco: true, bush: true },
+  underground: { sky: '#050510', block: '#3858e8', seam: '#101878', deco: false, bush: false },
+  // 高空关：树顶平台是绿色，地面与阶梯仍是经典橙砖
+  athletic: { sky: '#5c94fc', block: '#1f9a44', seam: '#0c5424', groundBlock: '#c84c0c', groundSeam: '#7a2400', deco: true, bush: false },
+  // 城堡关：黑底灰砖
+  castle: { sky: '#080810', block: '#b8b8c0', seam: '#50505c', deco: false, bush: false },
+}
+const Q_COLOR = '#e8a020'
+const USED_COLOR = '#8a5c28'
+const PIPE = { body: '#30a830', dark: '#186018', light: '#98e058' }
+
+// 解析关卡网格为运行时对象
+function loadLevel(idx) {
+  const lv = LV[idx]
+  solidMap = new Map()
+  coins = []
+  enemies = []
+  mushrooms = []
+  particles = []
+  firebars = []
+  lavaSet = new Set()
+  axe = null
+  axeTaken = false
+  winT = 0
+  flag = { x: -9999, topY: 0, baseY: 0 } // 城堡关没有旗杆，必须重置避免残留上一关的判定
+  lv.grid.forEach((row, r) => {
+    for (let c = 0; c < row.length; c++) {
+      const ch = row[c]
+      if (['#', '%', '=', '?', 'M', '[', ']', '-'].includes(ch)) {
+        solidMap.set(`${c},${r}`, { c, r, kind: ch })
+      } else if (ch === 'X') {
+        // 火棍轴心：本身是硬块，外加一条旋转火球链（相邻火棍反向旋转）
+        solidMap.set(`${c},${r}`, { c, r, kind: '%' })
+        firebars.push({ cx: c * TILE + TILE / 2, cy: r * TILE + TILE / 2, angle: firebars.length * 1.7, speed: firebars.length % 2 ? -2 : 2 })
+      } else if (ch === '~') {
+        lavaSet.add(`${c},${r}`)
+      } else if (ch === 'A') {
+        axe = { x: c * TILE + TILE / 2, y: r * TILE + TILE / 2 }
+      } else if (ch === 'B') {
+        enemies.push({ x: c * TILE, y: r * TILE, vx: -34, vy: 0, w: 52, h: 52, type: 'bowser', awake: false, dead: false, onGround: false, homeX: c * TILE, jumpT: 2.2 })
+      } else if (ch === 'o') {
+        coins.push({ x: c * TILE + TILE / 2, y: r * TILE + TILE / 2, taken: false })
+      } else if (ch === 'E') {
+        enemies.push({ x: c * TILE + 3, y: r * TILE + 4, vx: -46, vy: 0, w: 26, h: 28, type: 'goomba', awake: false, dead: false, onGround: false })
+      } else if (ch === 'T') {
+        enemies.push({ x: c * TILE + 3, y: r * TILE + 4, vx: -58, vy: 0, w: 26, h: 28, type: 'turtle', awake: false, dead: false, onGround: false })
+      } else if (ch === 'S') {
+        player.x = c * TILE + 4
+        player.y = (r + 1) * TILE - ph()
+        player.vx = 0
+        player.vy = 0
+        player.face = 1
+      } else if (ch === 'F') {
+        flag = { x: c * TILE + TILE / 2, topY: 3 * TILE, baseY: (r + 1) * TILE }
+      }
+    }
+  })
+  cameraX = 0
+  bannerT = 1.6
+}
+
+// 矩形是否碰到实心块
+function hitSolid(x, y, w, h) {
+  const x1 = Math.floor(x / TILE)
+  const x2 = Math.floor((x + w - 1) / TILE)
+  const y1 = Math.floor(y / TILE)
+  const y2 = Math.floor((y + h - 1) / TILE)
+  for (let gy = y1; gy <= y2; gy++) {
+    for (let gx = x1; gx <= x2; gx++) {
+      if (solidMap.has(`${gx},${gy}`)) return true
+    }
+  }
+  return false
+}
+
+// 是否处于地下奖励室（决定镜头边界与配色）
+function inBonus() {
+  const lv = LV[levelIdx]
+  return lv.bonusStartCol && player.x >= lv.bonusStartCol * TILE
+}
+// 当前镜头可移动范围
+function cameraBounds() {
+  const lv = LV[levelIdx]
+  if (inBonus()) return [lv.bonusStartCol * TILE, lv.grid[0].length * TILE - W]
+  return [0, lv.mainCols * TILE - W]
+}
+
+// 玩家脚下正踩着的暗道（站在水管顶时返回配置）
+function warpUnderFeet() {
+  if (!player.onGround) return null
+  const feetRow = Math.round((player.y + ph()) / TILE)
+  const centerCol = Math.floor((player.x + PW / 2) / TILE)
+  return (LV[levelIdx].warps || []).find((w) => w.row === feetRow && centerCol >= w.cols[0] && centerCol <= w.cols[1]) || null
+}
+
+// 顶头撞到某一行的砖块：问号块弹金币/蘑菇，大个子可顶碎普通砖
+function bumpBlocks(row) {
+  const x1 = Math.floor(player.x / TILE)
+  const x2 = Math.floor((player.x + PW - 1) / TILE)
+  for (let gx = x1; gx <= x2; gx++) {
+    const s = solidMap.get(`${gx},${row}`)
+    if (!s) continue
+    if (s.kind === '?' || s.kind === 'M') {
+      const hasMushroom = s.kind === 'M'
+      s.kind = 'x' // 变成用过的哑块
+      if (hasMushroom) {
+        mushrooms.push({ x: gx * TILE + 4, y: row * TILE - 26, vx: 60, vy: 0, w: 24, h: 24 })
+      } else {
+        particles.push({ type: 'coin', x: gx * TILE + TILE / 2, y: row * TILE - 8, vy: -280, t: 0.55 })
+        score += 20
+        emit('score', score)
+      }
+    } else if (s.kind === '=' && player.big) {
+      solidMap.delete(`${gx},${row}`)
+      for (let i = 0; i < 4; i++) {
+        particles.push({
+          type: 'chip',
+          x: gx * TILE + TILE / 2,
+          y: row * TILE + TILE / 2,
+          vx: (i % 2 ? 1 : -1) * (60 + Math.random() * 90),
+          vy: -180 - Math.random() * 160,
+          t: 0.7,
+        })
+      }
+      score += 10
+      emit('score', score)
+    }
+  }
+}
+
+// 受伤：护盾 → 大变小 → 死亡 三级缓冲
+function hurt() {
+  if (invincible > 0) return
+  if (shieldOn) {
+    shieldOn = false
+    invincible = 1.2
+    return
+  }
+  if (player.big) {
+    const feet = player.y + ph()
+    player.big = false
+    player.y = feet - ph()
+    invincible = 1.6
+    return
+  }
+  die()
+}
+
+function die() {
+  if (!alive) return
+  alive = false
+  loop.stop()
+  draw()
+  emit('end', { score })
+}
+
+// 过关推进：上报解锁进度；还有下一关则加载，否则全通关结算
+function finishLevel() {
+  emit('progress', levelIdx + 2) // 通关第 N 关（下标+1）解锁第 N+1 关
+  if (levelIdx < LV.length - 1) {
+    levelIdx++
+    loadLevel(levelIdx)
+  } else {
+    score += 300 // 全通关奖励
+    emit('score', score)
+    won = true
+    alive = false
+    loop.stop()
+    draw()
+    emit('end', { score })
+  }
+}
+
+// 摸到旗杆：按抓取高度给分（越高越多，原版规则），然后进入下一关
+function grabFlag() {
+  const frac = Math.max(0, Math.min(1, (flag.baseY - (player.y + ph())) / (flag.baseY - flag.topY - 30)))
+  score += Math.round(20 + 180 * frac)
+  emit('score', score)
+  finishLevel()
+}
+
+// 摸到斧头（1-4 终点）：砍断锁链桥塌，库巴落岩浆，短暂演出后过关
+function grabAxe() {
+  axeTaken = true
+  score += 400
+  emit('score', score)
+  for (const [key, s] of [...solidMap]) {
+    if (s.kind === '-') {
+      solidMap.delete(key)
+      particles.push({
+        type: 'chip',
+        x: s.c * TILE + TILE / 2,
+        y: s.r * TILE + TILE / 2,
+        vx: (Math.random() - 0.5) * 140,
+        vy: -120 - Math.random() * 140,
+        t: 0.8,
+      })
+    }
+  }
+  winT = 1.5
+}
+
+function update(dt) {
+  if (invincible > 0) invincible -= dt
+  if (bannerT > 0) bannerT -= dt
+  const phv = ph()
+  // 水平移动
+  const acc = 900
+  const maxSpeed = 240
+  if (keys.has('ArrowLeft') || keys.has('a')) {
+    player.vx = Math.max(-maxSpeed, player.vx - acc * dt)
+    player.face = -1
+  } else if (keys.has('ArrowRight') || keys.has('d')) {
+    player.vx = Math.min(maxSpeed, player.vx + acc * dt)
+    player.face = 1
+  } else {
+    player.vx *= 1 - Math.min(1, 8 * dt)
+  }
+  // 跳跃
+  if ((keys.has(' ') || keys.has('ArrowUp') || keys.has('w')) && player.onGround) {
+    player.vy = -650
+    player.onGround = false
+  }
+  // 暗道：站在水管顶按 ↓ 传送
+  if ((keys.has('ArrowDown') || keys.has('s')) && player.onGround) {
+    const w = warpUnderFeet()
+    if (w) {
+      player.x = w.dest.c * TILE + (TILE - PW) / 2
+      player.y = w.dest.r * TILE - ph()
+      player.vx = 0
+      player.vy = 0
+      const [lo, hi] = cameraBounds()
+      cameraX = Math.max(lo, Math.min(hi, player.x - W / 3))
+    }
+  }
+  // 重力
+  player.vy = Math.min(900, player.vy + 1500 * dt)
+  // X 轴移动 + 碰撞
+  player.x += player.vx * dt
+  if (hitSolid(player.x, player.y, PW, phv)) {
+    player.x -= player.vx * dt
+    player.vx = 0
+  }
+  if (player.x < 0) player.x = 0
+  // Y 轴移动 + 碰撞（上顶触发砖块交互）
+  player.y += player.vy * dt
+  if (hitSolid(player.x, player.y, PW, phv)) {
+    if (player.vy > 0) {
+      player.y = Math.floor((player.y + phv) / TILE) * TILE - phv
+      player.onGround = true
+    } else {
+      const bumpRow = Math.floor(player.y / TILE)
+      player.y = (bumpRow + 1) * TILE
+      bumpBlocks(bumpRow)
+    }
+    player.vy = 0
+  } else {
+    player.onGround = false
+  }
+  // 掉坑死亡
+  if (player.y > H + 80) {
+    die()
+    return
+  }
+  // 岩浆即死（护盾与变大都救不了，原版城堡关规则）
+  if (lavaSet.size) {
+    const feetRow = Math.floor((player.y + phv - 4) / TILE)
+    const midCol = Math.floor((player.x + PW / 2) / TILE)
+    if (lavaSet.has(`${midCol},${feetRow}`)) {
+      die()
+      return
+    }
+  }
+  // 吃金币
+  const pcx = player.x + PW / 2
+  const pcy = player.y + phv / 2
+  coins.forEach((c) => {
+    if (!c.taken && Math.abs(c.x - pcx) < 24 && Math.abs(c.y - pcy) < phv / 2 + 12) {
+      c.taken = true
+      score += 10
+      emit('score', score)
+    }
+  })
+  // 蘑菇道具：滑动 + 重力，吃到变大
+  mushrooms = mushrooms.filter((m) => {
+    m.vy = Math.min(700, m.vy + 1500 * dt)
+    m.x += m.vx * dt
+    if (hitSolid(m.x, m.y, m.w, m.h)) {
+      m.x -= m.vx * dt
+      m.vx *= -1
+    }
+    m.y += m.vy * dt
+    if (hitSolid(m.x, m.y, m.w, m.h)) {
+      if (m.vy > 0) m.y = Math.floor((m.y + m.h) / TILE) * TILE - m.h
+      else m.y = Math.ceil(m.y / TILE) * TILE
+      m.vy = 0
+    }
+    if (m.y > H + 80) return false
+    // 拾取判定
+    if (player.x + PW > m.x && player.x < m.x + m.w && player.y + phv > m.y && player.y < m.y + m.h) {
+      score += 50
+      emit('score', score)
+      if (!player.big) {
+        const feet = player.y + phv
+        player.big = true
+        player.y = feet - ph()
+        if (hitSolid(player.x, player.y, PW, ph())) player.y = feet - 30 // 头顶太低则保持位置（依然变大）
+      }
+      return false
+    }
+    return true
+  })
+  // 敌人：进入视野才激活；板栗仔会走下悬崖，乌龟在平台边折返
+  enemies.forEach((e) => {
+    if (e.dead) return
+    if (!e.awake) {
+      if (e.x < cameraX + W + 48) e.awake = true
+      else return
+    }
+    e.vy = Math.min(900, e.vy + 1500 * dt)
+    e.x += e.vx * dt
+    if (hitSolid(e.x, e.y, e.w, e.h)) {
+      e.x -= e.vx * dt
+      e.vx *= -1
+    }
+    e.y += e.vy * dt
+    e.onGround = false
+    if (hitSolid(e.x, e.y, e.w, e.h)) {
+      if (e.vy > 0) {
+        e.y = Math.floor((e.y + e.h) / TILE) * TILE - e.h
+        e.onGround = true
+      } else {
+        e.y = Math.ceil(e.y / TILE) * TILE
+      }
+      e.vy = 0
+    }
+    // 乌龟（红龟习性）：前方没路就掉头，不会走下平台
+    if (e.type === 'turtle' && e.onGround) {
+      const aheadX = e.vx < 0 ? e.x - 2 : e.x + e.w
+      if (!hitSolid(aheadX, e.y + e.h + 2, 2, 6)) e.vx *= -1
+    }
+    // 库巴：在桥上小范围巡逻，周期性起跳（原版守桥行为）
+    if (e.type === 'bowser') {
+      e.jumpT -= dt
+      if (e.jumpT <= 0 && e.onGround) {
+        e.vy = -430
+        e.jumpT = 2 + Math.random() * 1.6
+      }
+      if (e.x < e.homeX - 76) e.vx = Math.abs(e.vx)
+      if (e.x > e.homeX + 76) e.vx = -Math.abs(e.vx)
+    }
+    // 落入岩浆：溅起火花后消失（断桥后的库巴就是这个下场）
+    if (lavaSet.size) {
+      const eRow = Math.floor((e.y + e.h - 4) / TILE)
+      const eCol = Math.floor((e.x + e.w / 2) / TILE)
+      if (lavaSet.has(`${eCol},${eRow}`)) {
+        e.dead = true
+        for (let i = 0; i < 6; i++) {
+          particles.push({ type: 'chip', x: e.x + e.w / 2, y: e.y + e.h, vx: (Math.random() - 0.5) * 180, vy: -140 - Math.random() * 160, t: 0.6 })
+        }
+        return
+      }
+    }
+    // 掉出场景
+    if (e.y > H + 80) {
+      e.dead = true
+      return
+    }
+    // 与玩家碰撞（库巴不可踩，任何接触都受伤）
+    const overlapX = player.x + PW > e.x && player.x < e.x + e.w
+    const overlapY = player.y + phv > e.y && player.y < e.y + e.h
+    if (overlapX && overlapY) {
+      if (e.type !== 'bowser' && player.vy > 60 && player.y + phv - e.y < 22) {
+        e.dead = true
+        player.vy = -380
+        score += e.type === 'turtle' ? 80 : 50
+        emit('score', score)
+      } else {
+        hurt()
+        if (!alive) return
+      }
+    }
+  })
+  if (!alive) return
+  enemies = enemies.filter((e) => !e.dead)
+  // 旋转火棍：转动火球链，碰到任意火球受伤
+  firebars.forEach((fb) => {
+    fb.angle += fb.speed * dt
+    if (invincible > 0 || !alive) return
+    for (let i = 1; i <= 5; i++) {
+      const bx = fb.cx + Math.cos(fb.angle) * i * 13
+      const by = fb.cy + Math.sin(fb.angle) * i * 13
+      // 圆（火球半径 8）与玩家矩形的最近点距离判定
+      const nx = Math.max(player.x, Math.min(bx, player.x + PW))
+      const ny = Math.max(player.y, Math.min(by, player.y + phv))
+      if ((bx - nx) ** 2 + (by - ny) ** 2 < 64) {
+        hurt()
+        break
+      }
+    }
+  })
+  if (!alive) return
+  // 粒子（金币弹出 / 砖块碎片）
+  particles = particles.filter((p) => {
+    p.t -= dt
+    p.y += p.vy * dt
+    p.vy += 900 * dt
+    if (p.vx) p.x += p.vx * dt
+    return p.t > 0
+  })
+  // 斧头判定（1-4 终点）：摸到即断桥
+  if (axe && !axeTaken && Math.abs(pcx - axe.x) < 26 && Math.abs(pcy - axe.y) < 30) {
+    grabAxe()
+  }
+  // 断桥演出结束 → 过关
+  if (winT > 0) {
+    winT -= dt
+    if (winT <= 0) {
+      finishLevel()
+      draw()
+      return
+    }
+  }
+  // 旗杆判定（奖励室内不判定；城堡关没有旗杆）
+  if (flag.x > 0 && !inBonus() && Math.abs(pcx - flag.x) < 14 && player.y + phv > flag.topY) {
+    grabFlag()
+    draw()
+    return
+  }
+  // 镜头跟随
+  const [lo, hi] = cameraBounds()
+  const target = player.x - W / 3
+  cameraX = Math.max(lo, Math.min(hi, cameraX + (target - cameraX) * Math.min(1, dt * 8)))
+  draw()
+}
+
+// ---------------- 绘制 ----------------
+// 远景装饰：山丘 / 灌木 / 云朵（按列取模确定位置，与原版风景节奏近似）
+function drawDeco(theme) {
+  const c1 = Math.floor(cameraX / TILE) - 4
+  const c2 = Math.floor((cameraX + W) / TILE) + 4
+  const groundY = 13 * TILE
+  for (let c = c1; c <= c2; c++) {
+    if (c < 0) continue
+    const x = c * TILE
+    if (c % 44 === 2) {
+      // 大山丘
+      ctx.fillStyle = '#12a022'
+      ctx.beginPath()
+      ctx.moveTo(x - 60, groundY)
+      ctx.quadraticCurveTo(x + 20, groundY - 110, x + 100, groundY)
+      ctx.fill()
+    } else if (c % 44 === 24) {
+      // 小山丘
+      ctx.fillStyle = '#12a022'
+      ctx.beginPath()
+      ctx.moveTo(x - 40, groundY)
+      ctx.quadraticCurveTo(x + 10, groundY - 60, x + 60, groundY)
+      ctx.fill()
+    }
+    if (theme.bush && c % 36 === 13) {
+      ctx.fillStyle = '#28c040'
+      ctx.beginPath()
+      ctx.arc(x, groundY - 10, 14, 0, 7)
+      ctx.arc(x + 20, groundY - 14, 17, 0, 7)
+      ctx.arc(x + 40, groundY - 10, 14, 0, 7)
+      ctx.fill()
+    }
+    if (c % 28 === 6 || c % 28 === 19) {
+      // 云朵（两种高度交错）
+      const cy = c % 28 === 6 ? 2.4 * TILE : 3.6 * TILE
+      ctx.fillStyle = 'rgba(255,255,255,0.92)'
+      ctx.beginPath()
+      ctx.arc(x, cy, 13, 0, 7)
+      ctx.arc(x + 18, cy - 7, 15, 0, 7)
+      ctx.arc(x + 38, cy, 13, 0, 7)
+      ctx.fill()
+    }
+  }
+}
+
+// 单块绘制：根据种类画出地砖/硬块/砖块/问号块/水管
+function drawTile(s, theme) {
+  const x = s.c * TILE
+  const y = s.r * TILE
+  if (s.kind === '#') {
+    ctx.fillStyle = theme.groundBlock || theme.block
+    ctx.fillRect(x, y, TILE, TILE)
+    ctx.strokeStyle = theme.groundSeam || theme.seam
+    ctx.lineWidth = 2
+    ctx.strokeRect(x + 1, y + 1, TILE - 2, TILE - 2)
+    ctx.beginPath()
+    ctx.moveTo(x, y + TILE / 2)
+    ctx.lineTo(x + TILE, y + TILE / 2)
+    ctx.moveTo(x + TILE / 2, y)
+    ctx.lineTo(x + TILE / 2, y + TILE / 2)
+    ctx.moveTo(x + TILE / 4, y + TILE / 2)
+    ctx.lineTo(x + TILE / 4, y + TILE)
+    ctx.stroke()
+  } else if (s.kind === '%') {
+    // 硬块（阶梯石）：四角铆钉
+    ctx.fillStyle = theme.groundBlock || theme.block
+    ctx.fillRect(x, y, TILE, TILE)
+    ctx.strokeStyle = theme.groundSeam || theme.seam
+    ctx.lineWidth = 2
+    ctx.strokeRect(x + 2, y + 2, TILE - 4, TILE - 4)
+    ctx.fillStyle = theme.seam
+    for (const [dx, dy] of [[7, 7], [TILE - 10, 7], [7, TILE - 10], [TILE - 10, TILE - 10]]) {
+      ctx.fillRect(x + dx, y + dy, 3, 3)
+    }
+  } else if (s.kind === '=') {
+    // 砖块：横缝 + 错位竖缝
+    ctx.fillStyle = theme.block
+    ctx.fillRect(x, y, TILE, TILE)
+    ctx.strokeStyle = theme.seam
+    ctx.lineWidth = 2
+    ctx.strokeRect(x + 1, y + 1, TILE - 2, TILE - 2)
+    ctx.beginPath()
+    ctx.moveTo(x, y + 10)
+    ctx.lineTo(x + TILE, y + 10)
+    ctx.moveTo(x, y + 21)
+    ctx.lineTo(x + TILE, y + 21)
+    ctx.moveTo(x + TILE / 2, y)
+    ctx.lineTo(x + TILE / 2, y + 10)
+    ctx.moveTo(x + TILE / 4, y + 10)
+    ctx.lineTo(x + TILE / 4, y + 21)
+    ctx.moveTo(x + (TILE * 3) / 4, y + 10)
+    ctx.lineTo(x + (TILE * 3) / 4, y + 21)
+    ctx.stroke()
+  } else if (s.kind === '?' || s.kind === 'M') {
+    // 问号块（金币块与蘑菇块外观一致，保持原版的"惊喜感"）
+    ctx.fillStyle = Q_COLOR
+    ctx.fillRect(x, y, TILE, TILE)
+    ctx.strokeStyle = '#7a4a00'
+    ctx.lineWidth = 2
+    ctx.strokeRect(x + 1.5, y + 1.5, TILE - 3, TILE - 3)
+    ctx.fillStyle = '#7a4a00'
+    for (const [dx, dy] of [[5, 5], [TILE - 8, 5], [5, TILE - 8], [TILE - 8, TILE - 8]]) {
+      ctx.fillRect(x + dx, y + dy, 3, 3)
+    }
+    ctx.fillStyle = '#fff8e8'
+    ctx.font = 'bold 20px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText('?', x + TILE / 2, y + TILE / 2 + 1)
+  } else if (s.kind === 'x') {
+    // 已用过的哑块
+    ctx.fillStyle = USED_COLOR
+    ctx.fillRect(x, y, TILE, TILE)
+    ctx.strokeStyle = '#4a3010'
+    ctx.lineWidth = 2
+    ctx.strokeRect(x + 1.5, y + 1.5, TILE - 3, TILE - 3)
+    ctx.fillStyle = '#4a3010'
+    for (const [dx, dy] of [[5, 5], [TILE - 8, 5], [5, TILE - 8], [TILE - 8, TILE - 8]]) {
+      ctx.fillRect(x + dx, y + dy, 3, 3)
+    }
+  } else if (s.kind === '-') {
+    // 库巴木桥板：顶部锁链绳 + 木板（砍斧后整段塌落）
+    ctx.fillStyle = '#a06428'
+    ctx.fillRect(x, y, TILE, 12)
+    ctx.strokeStyle = '#5c3410'
+    ctx.lineWidth = 2
+    ctx.strokeRect(x + 1, y + 1, TILE - 2, 10)
+    ctx.strokeStyle = '#c8c8d0'
+    ctx.beginPath()
+    ctx.moveTo(x, y - 6)
+    ctx.quadraticCurveTo(x + TILE / 2, y - 10, x + TILE, y - 6)
+    ctx.stroke()
+  } else if (s.kind === '[' || s.kind === ']') {
+    // 水管：管口比管身宽一圈
+    const isTop = !['[', ']'].includes(solidMap.get(`${s.c},${s.r - 1}`)?.kind)
+    const left = s.kind === '['
+    ctx.fillStyle = PIPE.body
+    ctx.fillRect(x + (left ? 3 : 0), y, TILE - 3, TILE)
+    ctx.fillStyle = PIPE.light
+    ctx.fillRect(x + (left ? 6 : 2), y, 5, TILE)
+    ctx.fillStyle = PIPE.dark
+    ctx.fillRect(x + (left ? TILE - 4 : TILE - 7), y, 4, TILE)
+    if (isTop) {
+      ctx.fillStyle = PIPE.body
+      ctx.fillRect(x + (left ? 0 : -1), y, TILE + 1, 12)
+      ctx.strokeStyle = PIPE.dark
+      ctx.lineWidth = 2
+      ctx.strokeRect(x + (left ? 0.5 : -0.5), y + 0.5, TILE + 0.5, 12)
+    }
+  }
+}
+
+// 终点城堡（装饰物）
+function drawCastle(colX, theme) {
+  const x0 = colX * TILE
+  const gy = 13 * TILE
+  ctx.fillStyle = theme.block
+  ctx.fillRect(x0, gy - 4 * TILE, 5 * TILE, 4 * TILE)
+  ctx.fillRect(x0 + TILE, gy - 6 * TILE, 3 * TILE, 2 * TILE)
+  // 城齿
+  for (let i = 0; i < 5; i += 2) ctx.fillRect(x0 + i * TILE, gy - 4 * TILE - 10, TILE, 10)
+  for (let i = 1; i < 4; i += 2) ctx.fillRect(x0 + i * TILE, gy - 6 * TILE - 10, TILE, 10)
+  ctx.strokeStyle = theme.seam
+  ctx.lineWidth = 2
+  ctx.strokeRect(x0 + 1, gy - 4 * TILE + 1, 5 * TILE - 2, 4 * TILE - 2)
+  ctx.strokeRect(x0 + TILE + 1, gy - 6 * TILE + 1, 3 * TILE - 2, 2 * TILE - 2)
+  // 门洞与窗
+  ctx.fillStyle = '#1a0a00'
+  ctx.beginPath()
+  ctx.arc(x0 + 2.5 * TILE, gy - 44, 18, Math.PI, 0)
+  ctx.rect(x0 + 2.5 * TILE - 18, gy - 44, 36, 44)
+  ctx.fill()
+  ctx.fillStyle = '#fff'
+  ctx.fillRect(x0 + 14, gy - 3 * TILE, 10, 13)
+  ctx.fillRect(x0 + 5 * TILE - 24, gy - 3 * TILE, 10, 13)
+}
+
+function draw() {
+  const lv = LV[levelIdx]
+  const theme = inBonus() ? THEMES.underground : THEMES[lv.theme]
+  const p = palette()
+  ctx.fillStyle = theme.sky
+  ctx.fillRect(0, 0, W, H)
+  ctx.save()
+  ctx.translate(-Math.round(cameraX), 0)
+  if (theme.deco) drawDeco(theme)
+  // 岩浆：暗红底 + 顶面流动的亮橙波纹
+  if (lavaSet.size) {
+    const t = performance.now() / 300
+    for (const key of lavaSet) {
+      const [c, r] = key.split(',').map(Number)
+      const x = c * TILE
+      if (x < cameraX - TILE || x > cameraX + W + TILE) continue
+      ctx.fillStyle = '#c83008'
+      ctx.fillRect(x, r * TILE, TILE, TILE)
+      if (!lavaSet.has(`${c},${r - 1}`)) {
+        ctx.fillStyle = '#f89000'
+        ctx.fillRect(x, r * TILE, TILE, 6)
+        ctx.fillStyle = '#ffd860'
+        ctx.fillRect(x + 4 + 3 * Math.sin(t + c * 1.7), r * TILE, 9, 3)
+        ctx.fillRect(x + 19 + 3 * Math.sin(t * 1.3 + c), r * TILE, 7, 3)
+      }
+    }
+  }
+  // 实心块（裁剪出镜头范围）
+  for (const s of solidMap.values()) {
+    const sx = s.c * TILE
+    if (sx < cameraX - TILE || sx > cameraX + W + TILE) continue
+    drawTile(s, theme)
+  }
+  // 金币
+  ctx.font = '20px serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  coins.forEach((c) => {
+    if (c.taken || c.x < cameraX - 30 || c.x > cameraX + W + 30) return
+    const t = Math.abs(Math.sin(performance.now() / 240 + c.x))
+    ctx.save()
+    ctx.translate(c.x, c.y)
+    ctx.scale(0.4 + 0.6 * t, 1)
+    ctx.fillText('🪙', 0, 0)
+    ctx.restore()
+  })
+  // 粒子
+  particles.forEach((pt) => {
+    if (pt.type === 'coin') {
+      ctx.globalAlpha = Math.max(0, pt.t / 0.55)
+      ctx.font = '18px serif'
+      ctx.fillText('🪙', pt.x, pt.y)
+      ctx.globalAlpha = 1
+    } else {
+      ctx.fillStyle = THEMES[lv.theme].block
+      ctx.fillRect(pt.x - 4, pt.y - 4, 8, 8)
+    }
+  })
+  // 蘑菇道具：红盖白点
+  mushrooms.forEach((m) => {
+    ctx.fillStyle = '#e8d8b0'
+    ctx.fillRect(m.x + 7, m.y + 12, 10, 12)
+    ctx.fillStyle = '#e02818'
+    ctx.beginPath()
+    ctx.arc(m.x + 12, m.y + 12, 12, Math.PI, 0)
+    ctx.fill()
+    ctx.fillStyle = '#fff'
+    ctx.beginPath()
+    ctx.arc(m.x + 6, m.y + 8, 3, 0, 7)
+    ctx.arc(m.x + 17, m.y + 8, 3, 0, 7)
+    ctx.fill()
+  })
+  // 敌人（库巴大一号，其余小敌人 24px）
+  ctx.font = '24px serif'
+  enemies.forEach((e) => {
+    if (e.x < cameraX - 80 || e.x > cameraX + W + 80) return
+    if (e.type === 'bowser') {
+      ctx.font = '46px serif'
+      ctx.fillText('🐲', e.x + e.w / 2, e.y + e.h / 2 + 4)
+      ctx.font = '24px serif'
+    } else {
+      ctx.fillText(e.type === 'turtle' ? '🐢' : '👿', e.x + 13, e.y + 15)
+    }
+  })
+  // 旋转火棍：外焰橙、内芯亮黄交替
+  firebars.forEach((fb) => {
+    if (fb.cx < cameraX - 110 || fb.cx > cameraX + W + 110) return
+    for (let i = 1; i <= 5; i++) {
+      const bx = fb.cx + Math.cos(fb.angle) * i * 13
+      const by = fb.cy + Math.sin(fb.angle) * i * 13
+      ctx.fillStyle = i % 2 ? '#ff9820' : '#ffd020'
+      ctx.beginPath()
+      ctx.arc(bx, by, 7, 0, 7)
+      ctx.fill()
+      ctx.fillStyle = '#fff8d0'
+      ctx.beginPath()
+      ctx.arc(bx, by, 3, 0, 7)
+      ctx.fill()
+    }
+  })
+  // 斧头（1-4 终点）
+  if (axe && !axeTaken) {
+    ctx.font = '26px serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText('🪓', axe.x, axe.y)
+  }
+  // 旗杆：杆 + 顶球 + 绿旗（城堡关没有旗杆）
+  if (flag.x > 0) {
+    ctx.strokeStyle = '#c8d0d8'
+    ctx.lineWidth = 4
+    ctx.beginPath()
+    ctx.moveTo(flag.x, flag.baseY)
+    ctx.lineTo(flag.x, flag.topY)
+    ctx.stroke()
+    ctx.fillStyle = '#e8c020'
+    ctx.beginPath()
+    ctx.arc(flag.x, flag.topY - 4, 6, 0, 7)
+    ctx.fill()
+    ctx.fillStyle = '#28a838'
+    ctx.beginPath()
+    ctx.moveTo(flag.x - 2, flag.topY + 4)
+    ctx.lineTo(flag.x - 30, flag.topY + 15)
+    ctx.lineTo(flag.x - 2, flag.topY + 26)
+    ctx.closePath()
+    ctx.fill()
+  }
+  // 城堡
+  if (lv.castleCol) drawCastle(lv.castleCol, THEMES[lv.theme])
+  // 玩家（受伤无敌时闪烁）
+  if (invincible <= 0 || Math.floor(performance.now() / 90) % 2 === 0) {
+    const px = player.x
+    const py = player.y
+    const u = ph() / 32 // 大个子按比例拉高
+    ctx.fillStyle = '#e5484d'
+    ctx.fillRect(px + 3, py, PW - 6, 8 * u)
+    ctx.fillRect(player.face > 0 ? px + PW - 8 : px - 2, py + 2 * u, 10, 4 * u)
+    ctx.fillStyle = '#ffcf9e'
+    ctx.fillRect(px + 4, py + 8 * u, PW - 8, 9 * u)
+    ctx.fillStyle = '#111'
+    ctx.fillRect(player.face > 0 ? px + PW - 10 : px + 6, py + 10 * u, 3, 4 * u)
+    ctx.fillStyle = '#3563c4'
+    ctx.fillRect(px + 3, py + 17 * u, PW - 6, 10 * u)
+    ctx.fillStyle = '#e5484d'
+    ctx.fillRect(px, py + 17 * u, 5, 7 * u)
+    ctx.fillRect(px + PW - 5, py + 17 * u, 5, 7 * u)
+    ctx.fillStyle = '#6b3f23'
+    ctx.fillRect(px + 2, py + 27 * u, 9, 5 * u)
+    ctx.fillRect(px + PW - 11, py + 27 * u, 9, 5 * u)
+  }
+  if (shieldOn) {
+    ctx.strokeStyle = p.accent
+    ctx.lineWidth = 3
+    ctx.beginPath()
+    ctx.arc(player.x + PW / 2, player.y + ph() / 2, player.big ? 38 : 28, 0, 7)
+    ctx.stroke()
+  }
+  // 暗道提示：站在可进入的水管顶时显示
+  const wp = warpUnderFeet()
+  if (wp) {
+    ctx.fillStyle = 'rgba(0,0,0,0.55)'
+    ctx.font = 'bold 13px sans-serif'
+    const hx = player.x + PW / 2
+    const hy = player.y - 22
+    ctx.fillRect(hx - 42, hy - 12, 84, 20)
+    ctx.fillStyle = '#fff'
+    ctx.fillText('按 ↓ 进入', hx, hy - 2)
+  }
+  ctx.restore()
+  // HUD（深色场景用白字）
+  ctx.fillStyle = lv.theme === 'underground' || lv.theme === 'castle' || inBonus() ? '#fff' : '#103048'
+  ctx.font = 'bold 15px sans-serif'
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'top'
+  ctx.fillText(`世界 ${lv.name}`, 12, 10)
+  if (player.big) ctx.fillText('🍄', 100, 8)
+  // 关卡开场横幅
+  if (bannerT > 0) {
+    ctx.fillStyle = `rgba(0,0,0,${Math.min(0.55, bannerT)})`
+    ctx.fillRect(W / 2 - 130, H / 2 - 46, 260, 76)
+    ctx.fillStyle = '#fff'
+    ctx.font = 'bold 30px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(`世界 ${lv.name}`, W / 2, H / 2 - 8)
+  }
+  if (won) {
+    ctx.font = 'bold 34px sans-serif'
+    ctx.textAlign = 'center'
+    ctx.fillStyle = '#ffe040'
+    ctx.fillText('🎉 全部通关！', W / 2, H / 2 - 60)
+  }
+}
+
+// ---- 对外接口 ----
+// start 开局：opts.level 指定起始世界（来自关卡选择面板，1~4，默认从 1-1 开始）
+function start(opts) {
+  levelIdx = Math.min(Math.max((opts?.level || 1) - 1, 0), LV.length - 1)
+  score = 0
+  won = false
+  shieldOn = false
+  invincible = 0
+  player.big = false
+  alive = true
+  loadLevel(levelIdx)
+  emit('score', 0)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  keys?.detach()
+}
+// 复活：回到本关出生点重来（分数保留，形态重置）；护盾：挡一次伤害
+function useProp(code) {
+  if (code === 'revive' && !alive && !won) {
+    player.big = false
+    loadLevel(levelIdx)
+    invincible = 2
+    alive = true
+    loop.start()
+    return true
+  }
+  if (code === 'shield' && alive && !shieldOn) {
+    shieldOn = true
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  keys = new Keys()
+  keys.attach()
+  loop = createLoop(update)
+  loadLevel(0)
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/Match3Game.vue b/src/games/components/Match3Game.vue
new file mode 100644
index 0000000..0dc5529
--- /dev/null
+++ b/src/games/components/Match3Game.vue
@@ -0,0 +1,746 @@
+<script setup>
+// 消消乐（团子版）：8×8 果冻团子盘，拖拽或点击相邻两只交换，凑三连消除
+// 关卡制：共 12 关，每关限定步数内把「本关得分」刷到目标分即过关（通关解锁下一关）
+// 动画流水线：交换动画 → 三连判定 →（不成立则弹回+摇头+气泡提示，不扣步数）
+//             → 消除爆浆动画 → 重力下落 → 顶部补新团子 → 连锁循环
+// 道具：hint 提示一组可行交换、bomb 随机引爆 3×3
+import { ref, computed, onBeforeUnmount } from 'vue'
+
+const emit = defineEmits(['score', 'end', 'progress'])
+
+const N = 8
+const TOTAL_LEVELS = 12
+// 每关配置：target 本关目标分 / moves 步数 / colors 团子种类数（越多越难凑）
+const LEVELS = [
+  { target: 400, moves: 22, colors: 4 },
+  { target: 500, moves: 22, colors: 4 },
+  { target: 650, moves: 24, colors: 5 },
+  { target: 800, moves: 24, colors: 5 },
+  { target: 950, moves: 26, colors: 5 },
+  { target: 1100, moves: 26, colors: 5 },
+  { target: 1250, moves: 26, colors: 6 },
+  { target: 1400, moves: 28, colors: 6 },
+  { target: 1600, moves: 28, colors: 6 },
+  { target: 1800, moves: 30, colors: 6 },
+  { target: 2000, moves: 30, colors: 6 },
+  { target: 2200, moves: 32, colors: 6 },
+]
+// 无效交换的友好提示（轮换展示）
+const INVALID_TIPS = ['这样换凑不成三连哦～', '换过去也消不了呢', '再想想，要凑齐 3 个同色！']
+
+const playing = ref(false)
+const level = ref(1)
+const moves = ref(0)
+const score = ref(0) // 全局累计分（结算用）
+const levelScore = ref(0) // 本关得分（过关判定用）
+const target = ref(LEVELS[0].target)
+const blobs = ref([]) // 团子数组 {id,t,r,c,yFrom,pop,shake,hint,born}
+const sel = ref(null) // 点选模式下选中的团子 id
+const tips = ref([]) // 浮动提示 {id,x,y,text,cls}
+const banner = ref(null) // 关卡横幅 {title,sub}
+let busy = false // 动画结算中锁输入
+let idSeq = 1
+let tipSeq = 1
+let tipIdx = 0
+let colors = 4
+let drag = null // 拖拽状态 {id,x0,y0,done}
+let timers = []
+
+const sleep = (ms) => new Promise((res) => setTimeout(res, ms))
+const later = (fn, ms) => timers.push(setTimeout(fn, ms))
+const targetPct = computed(() => Math.min(100, Math.round((levelScore.value / target.value) * 100)))
+
+// ---- 盘面数据 ----
+function at(r, c) {
+  return blobs.value.find((b) => !b.pop && b.r === r && b.c === c)
+}
+// types 矩阵（三连判定用）
+function typeGrid() {
+  const g = Array.from({ length: N }, () => Array(N).fill(-1))
+  for (const b of blobs.value) {
+    if (!b.pop && b.r >= 0 && b.r < N) g[b.r][b.c] = b.t
+  }
+  return g
+}
+
+// findMatchSet 找出所有三连及以上的格子（返回 "r,c" 集合）
+function findMatchSet(g) {
+  const marked = new Set()
+  for (let r = 0; r < N; r++) {
+    let run = 1
+    for (let c = 1; c <= N; c++) {
+      if (c < N && g[r][c] >= 0 && g[r][c] === g[r][c - 1]) run++
+      else {
+        if (run >= 3) for (let k = c - run; k < c; k++) marked.add(`${r},${k}`)
+        run = 1
+      }
+    }
+  }
+  for (let c = 0; c < N; c++) {
+    let run = 1
+    for (let r = 1; r <= N; r++) {
+      if (r < N && g[r]?.[c] >= 0 && g[r][c] === g[r - 1][c]) run++
+      else {
+        if (run >= 3) for (let k = r - run; k < r; k++) marked.add(`${k},${c}`)
+        run = 1
+      }
+    }
+  }
+  return marked
+}
+
+// findValidSwap 找一组能成三连的交换（提示与死局检测共用）
+function findValidSwap() {
+  const g = typeGrid()
+  for (let r = 0; r < N; r++) {
+    for (let c = 0; c < N; c++) {
+      for (const [dr, dc] of [[0, 1], [1, 0]]) {
+        const r2 = r + dr
+        const c2 = c + dc
+        if (r2 >= N || c2 >= N) continue
+        ;[g[r][c], g[r2][c2]] = [g[r2][c2], g[r][c]]
+        const ok = findMatchSet(g).size > 0
+        ;[g[r][c], g[r2][c2]] = [g[r2][c2], g[r][c]]
+        if (ok) return [{ r, c }, { r: r2, c: c2 }]
+      }
+    }
+  }
+  return null
+}
+
+// buildBoard 重新铺满盘面（保证无初始三连且有解）
+function buildBoard() {
+  const g = Array.from({ length: N }, () => Array(N).fill(-1))
+  for (let r = 0; r < N; r++) {
+    for (let c = 0; c < N; c++) {
+      let t
+      do {
+        t = Math.floor(Math.random() * colors)
+      } while ((c >= 2 && g[r][c - 1] === t && g[r][c - 2] === t) || (r >= 2 && g[r - 1][c] === t && g[r - 2][c] === t))
+      g[r][c] = t
+    }
+  }
+  blobs.value = []
+  for (let r = 0; r < N; r++) {
+    for (let c = 0; c < N; c++) {
+      blobs.value.push({ id: idSeq++, t: g[r][c], r, c, yFrom: null, pop: false, shake: false, hint: false })
+    }
+  }
+  if (!findValidSwap()) buildBoard()
+}
+
+// reshuffle 死局洗牌：保留位置，打乱现有团子的种类
+function reshuffle() {
+  const ts = blobs.value.map((b) => b.t)
+  let guard = 0
+  do {
+    for (let i = ts.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1))
+      ;[ts[i], ts[j]] = [ts[j], ts[i]]
+    }
+    blobs.value.forEach((b, i) => (b.t = ts[i]))
+  } while ((findMatchSet(typeGrid()).size > 0 || !findValidSwap()) && ++guard < 60)
+  floatTip(N / 2 - 0.5, N / 2 - 0.5, '无可消除，帮你洗好牌啦', 'info')
+}
+
+// ---- 浮动提示 ----
+function floatTip(r, c, text, cls = 'warn') {
+  const id = tipSeq++
+  tips.value.push({ id, x: c, y: r, text, cls })
+  later(() => (tips.value = tips.value.filter((t) => t.id !== id)), 1500)
+}
+
+// ---- 交换与消除流水线 ----
+async function attemptSwap(a, b) {
+  if (!a || !b || busy || !playing.value) return
+  busy = true
+  sel.value = null
+  // 数据交换 → 位置过渡动画自动播放
+  ;[a.r, b.r] = [b.r, a.r]
+  ;[a.c, b.c] = [b.c, a.c]
+  await sleep(260)
+  const matches = findMatchSet(typeGrid())
+  if (!matches.size) {
+    // 不可消除：弹回 + 摇头 + 气泡提示（不扣步数）
+    ;[a.r, b.r] = [b.r, a.r]
+    ;[a.c, b.c] = [b.c, a.c]
+    a.shake = b.shake = true
+    floatTip(Math.min(a.r, b.r) - 0.4, (a.c + b.c) / 2, INVALID_TIPS[tipIdx++ % INVALID_TIPS.length])
+    later(() => (a.shake = b.shake = false), 450)
+    await sleep(300)
+    busy = false
+    return
+  }
+  moves.value--
+  await resolveCascades(matches)
+  busy = false
+  afterResolve()
+}
+
+// resolveCascades 消除→下落→补充→连锁（每一步等动画播完再进行下一步）
+async function resolveCascades(firstMatches) {
+  let chain = 0
+  let matches = firstMatches || findMatchSet(typeGrid())
+  while (playing.value && matches.size) {
+    chain++
+    // 1) 爆浆动画
+    let n = 0
+    for (const key of matches) {
+      const [r, c] = key.split(',').map(Number)
+      const b = at(r, c)
+      if (b) {
+        b.pop = true
+        n++
+      }
+    }
+    const gain = n * 10 * chain
+    levelScore.value += gain
+    score.value += gain
+    emit('score', score.value)
+    if (chain >= 2) {
+      const [fr, fc] = [...matches][0].split(',').map(Number)
+      floatTip(fr, fc, `连锁 ×${chain}！+${gain}`, 'chain')
+    }
+    await sleep(300)
+    // 2) 移除已爆的团子
+    blobs.value = blobs.value.filter((b) => !b.pop)
+    // 3) 重力下落 + 顶部补新（yFrom 从上方掉入）
+    for (let c = 0; c < N; c++) {
+      const col = blobs.value.filter((b) => b.c === c).sort((x, y) => y.r - x.r)
+      let write = N - 1
+      for (const b of col) {
+        b.r = write--
+      }
+      let spawnK = 1
+      while (write >= 0) {
+        blobs.value.push({
+          id: idSeq++, t: Math.floor(Math.random() * colors),
+          r: write, c, yFrom: -spawnK, pop: false, shake: false, hint: false,
+        })
+        write--
+        spawnK++
+      }
+    }
+    // 触发新团子的下落过渡（渲染在上方一帧后落位）
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => blobs.value.forEach((b) => (b.yFrom = null)))
+    })
+    await sleep(360)
+    matches = findMatchSet(typeGrid())
+  }
+  // 死局自动洗牌
+  if (playing.value && !findValidSwap()) reshuffle()
+}
+
+// afterResolve 一轮结算后的关卡判定：达标过关 / 步数用尽结束
+async function afterResolve() {
+  if (!playing.value) return
+  if (levelScore.value >= target.value) {
+    // 过关：横幅演出 → 上报进度 → 下一关或全通关
+    emit('progress', Math.min(level.value + 1, TOTAL_LEVELS + 1))
+    if (level.value >= TOTAL_LEVELS) {
+      score.value += 500 // 全通关奖励
+      emit('score', score.value)
+      banner.value = { title: '🏆 全部通关！', sub: '奖励 +500 分' }
+      await sleep(1600)
+      finish()
+      return
+    }
+    banner.value = { title: `⭐ 第 ${level.value} 关通过！`, sub: `进入第 ${level.value + 1} 关` }
+    await sleep(1500)
+    banner.value = null
+    loadLevel(level.value + 1)
+    return
+  }
+  if (moves.value <= 0) {
+    banner.value = { title: '💧 步数用完了', sub: `本关 ${levelScore.value} / ${target.value} 分` }
+    await sleep(1400)
+    finish()
+  }
+}
+
+function finish() {
+  banner.value = null
+  playing.value = false
+  emit('end', { score: score.value })
+}
+
+// loadLevel 进入某关：重置本关目标/步数/盘面并展示开场横幅
+function loadLevel(lv) {
+  level.value = lv
+  const conf = LEVELS[lv - 1]
+  colors = conf.colors
+  moves.value = conf.moves
+  target.value = conf.target
+  levelScore.value = 0
+  sel.value = null
+  buildBoard()
+  banner.value = { title: `第 ${lv} 关`, sub: `${conf.moves} 步内拿到 ${conf.target} 分（${conf.colors} 色团子）` }
+  later(() => (banner.value = null), 1800)
+}
+
+// ---- 交互：拖拽换位 + 点选换位 ----
+function onDown(b, e) {
+  if (!playing.value || busy) return
+  drag = { id: b.id, x0: e.clientX, y0: e.clientY, done: false }
+}
+function onMove(e) {
+  if (!drag || drag.done || busy) return
+  const dx = e.clientX - drag.x0
+  const dy = e.clientY - drag.y0
+  if (Math.max(Math.abs(dx), Math.abs(dy)) < 16) return
+  drag.done = true
+  const b = blobs.value.find((x) => x.id === drag.id)
+  if (!b) return
+  const horizontal = Math.abs(dx) > Math.abs(dy)
+  const nb = horizontal ? at(b.r, b.c + (dx > 0 ? 1 : -1)) : at(b.r + (dy > 0 ? 1 : -1), b.c)
+  if (nb) attemptSwap(b, nb)
+}
+function onUp(b) {
+  if (!drag || drag.done) {
+    drag = null
+    return
+  }
+  drag = null
+  // 未构成拖拽 → 视为点选
+  if (busy || !playing.value) return
+  const cur = sel.value != null ? blobs.value.find((x) => x.id === sel.value) : null
+  if (!cur) {
+    sel.value = b.id
+    return
+  }
+  if (cur.id === b.id) {
+    sel.value = null
+    return
+  }
+  if (Math.abs(cur.r - b.r) + Math.abs(cur.c - b.c) === 1) {
+    attemptSwap(cur, b)
+  } else {
+    sel.value = b.id
+  }
+}
+
+// ---- 对外接口 ----
+// start 开局：opts.level 指定起始关（来自关卡选择面板）
+function start(opts) {
+  score.value = 0
+  emit('score', 0)
+  playing.value = true
+  busy = false
+  tips.value = []
+  loadLevel(Math.min(Math.max(opts?.level || 1, 1), TOTAL_LEVELS))
+}
+function stop() {
+  playing.value = false
+  timers.forEach(clearTimeout)
+  timers = []
+}
+// hint：高亮一组可行交换；bomb：随机引爆 3×3（计分并触发连锁）
+function useProp(code) {
+  if (!playing.value || busy) return false
+  if (code === 'hint') {
+    const pair = findValidSwap()
+    if (!pair) return false
+    for (const p of pair) {
+      const b = at(p.r, p.c)
+      if (b) {
+        b.hint = true
+        later(() => (b.hint = false), 2200)
+      }
+    }
+    return true
+  }
+  if (code === 'bomb') {
+    const cr = 1 + Math.floor(Math.random() * (N - 2))
+    const cc = 1 + Math.floor(Math.random() * (N - 2))
+    const keys = new Set()
+    for (let r = cr - 1; r <= cr + 1; r++) for (let c = cc - 1; c <= cc + 1; c++) keys.add(`${r},${c}`)
+    busy = true
+    floatTip(cr, cc, '💥 轰！', 'chain')
+    resolveCascades(keys).then(() => {
+      busy = false
+      afterResolve()
+    })
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+onBeforeUnmount(stop)
+
+// 团子样式定位：left/top 百分比（响应式），yFrom 用于新团子从上方掉入
+function blobStyle(b) {
+  return {
+    left: `${b.c * 12.5}%`,
+    top: `${(b.yFrom ?? b.r) * 12.5}%`,
+    zIndex: b.pop ? 3 : sel.value === b.id ? 2 : 1,
+  }
+}
+</script>
+
+<template>
+  <div class="m3-board">
+    <div class="hud">
+      <span>第 <b>{{ level }}</b>/12 关</span>
+      <span>剩余步数 <b :class="{ danger: moves <= 5 }">{{ moves }}</b></span>
+      <span>总分 <b class="score">{{ score }}</b></span>
+    </div>
+    <!-- 本关目标进度条 -->
+    <div class="tgt-row">
+      <span class="tgt-label">本关 {{ levelScore }} / {{ target }}</span>
+      <div class="tgt-bar"><i :style="{ width: targetPct + '%' }"></i></div>
+    </div>
+    <div class="board" @pointermove="onMove" @pointerleave="drag = null">
+      <!-- 棋盘底格 -->
+      <div class="cells">
+        <i v-for="i in N * N" :key="i" class="cell" :class="{ alt: (Math.floor((i - 1) / N) + ((i - 1) % N)) % 2 }"></i>
+      </div>
+      <!-- 团子们 -->
+      <div
+        v-for="b in blobs"
+        :key="b.id"
+        class="blob"
+        :class="[`t${b.t}`, { pop: b.pop, shake: b.shake, hint: b.hint, sel: sel === b.id }]"
+        :style="blobStyle(b)"
+        @pointerdown.prevent="onDown(b, $event)"
+        @pointerup="onUp(b)"
+      >
+        <div class="body">
+          <template v-if="b.t === 4">
+            <span class="star-eye l">★</span><span class="star-eye r">★</span>
+          </template>
+          <template v-else>
+            <span class="eye l"></span><span class="eye r"></span>
+          </template>
+          <span class="mouth"></span>
+        </div>
+      </div>
+      <!-- 浮动提示（无效交换/连锁/洗牌） -->
+      <div v-for="t in tips" :key="t.id" class="float-tip" :class="t.cls" :style="{ left: `${(t.x + 0.5) * 12.5}%`, top: `${(t.y + 0.5) * 12.5}%` }">
+        {{ t.text }}
+      </div>
+      <!-- 关卡横幅 -->
+      <div v-if="banner" class="lv-banner">
+        <div class="lb-title">{{ banner.title }}</div>
+        <div class="lb-sub">{{ banner.sub }}</div>
+      </div>
+    </div>
+    <p class="tips">拖拽（或点击选中再点相邻）团子交换 · 三连消除，连锁翻倍 · 步数内达到本关目标分即过关</p>
+  </div>
+</template>
+
+<style scoped>
+.m3-board {
+  width: min(460px, 92vw);
+  text-align: center;
+  user-select: none;
+}
+.hud {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+.danger {
+  color: #ff5d73;
+}
+.score {
+  color: var(--primary);
+}
+.tgt-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.tgt-label {
+  font-size: 12px;
+  color: var(--text-dim);
+  white-space: nowrap;
+}
+.tgt-bar {
+  flex: 1;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+.tgt-bar i {
+  display: block;
+  height: 100%;
+  background: linear-gradient(90deg, var(--primary), var(--accent));
+  border-radius: 999px;
+  transition: width 0.35s ease;
+}
+.board {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 14px;
+  background: var(--bg-card);
+  overflow: hidden;
+  touch-action: none;
+}
+.cells {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: repeat(8, 1fr);
+}
+.cell {
+  background: rgba(255, 255, 255, 0.035);
+}
+.cell.alt {
+  background: rgba(255, 255, 255, 0.07);
+}
+/* ---- 团子 ---- */
+.blob {
+  position: absolute;
+  width: 12.5%;
+  aspect-ratio: 1;
+  cursor: grab;
+  /* 位置过渡：交换 / 下落都靠它，带一点回弹 */
+  transition: left 0.24s cubic-bezier(0.36, 1.35, 0.5, 1), top 0.3s cubic-bezier(0.36, 1.35, 0.5, 1);
+}
+.blob:active {
+  cursor: grabbing;
+}
+.body {
+  position: absolute;
+  inset: 7%;
+  border-radius: 48% 52% 50% 50% / 56% 56% 44% 44%;
+  /* 果冻质感：高光渐变 + 底部内阴影 */
+  box-shadow:
+    inset 0 -6px 10px rgba(0, 0, 0, 0.28),
+    inset 0 4px 6px rgba(255, 255, 255, 0.35),
+    0 3px 8px rgba(0, 0, 0, 0.35);
+  animation: jelly 3.4s ease-in-out infinite;
+}
+/* 每只团子的呼吸错开，看起来更活 */
+.blob:nth-child(3n) .body { animation-delay: -1.1s; }
+.blob:nth-child(3n + 1) .body { animation-delay: -2.3s; }
+.blob:nth-child(5n) .body { animation-delay: -0.6s; }
+@keyframes jelly {
+  0%, 100% { transform: scale(1, 1); }
+  30% { transform: scale(1.05, 0.94); }
+  60% { transform: scale(0.96, 1.05); }
+}
+/* 六种团子配色（草莓/芒果/抹茶/苏打/葡萄/薄荷） */
+.t0 .body { background: radial-gradient(circle at 34% 28%, #ff9eae, #ff5d73 58%, #d63b52); }
+.t1 .body { background: radial-gradient(circle at 34% 28%, #ffd97a, #ffb300 58%, #d68f00); }
+.t2 .body { background: radial-gradient(circle at 34% 28%, #93f0b8, #4ade80 58%, #2ea75c); }
+.t3 .body { background: radial-gradient(circle at 34% 28%, #9ecbff, #4da3ff 58%, #2f7fd6); }
+.t4 .body { background: radial-gradient(circle at 34% 28%, #d7a6ff, #b967ff 58%, #9440e0); }
+.t5 .body { background: radial-gradient(circle at 34% 28%, #8ceee0, #2dd4bf 58%, #1ba894); }
+/* ---- 脸：眼睛 + 嘴，按类型做出不同表情 ---- */
+.eye {
+  position: absolute;
+  top: 34%;
+  width: 13%;
+  height: 16%;
+  background: #26202e;
+  border-radius: 50%;
+}
+.eye::after {
+  content: '';
+  position: absolute;
+  top: 12%;
+  left: 18%;
+  width: 45%;
+  height: 40%;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 50%;
+}
+.eye.l { left: 26%; }
+.eye.r { right: 26%; }
+/* 芒果：眯眯眼（弯线） */
+.t1 .eye {
+  height: 7%;
+  border-radius: 999px;
+  top: 38%;
+  transform: rotate(-8deg);
+}
+.t1 .eye.r { transform: rotate(8deg); }
+.t1 .eye::after { display: none; }
+/* 苏打：右眼眨眼 */
+.t3 .eye.r {
+  height: 6%;
+  border-radius: 999px;
+  top: 40%;
+}
+.t3 .eye.r::after { display: none; }
+/* 薄荷：困困半闭眼 */
+.t5 .eye {
+  height: 9%;
+  border-radius: 0 0 999px 999px;
+  top: 38%;
+}
+.t5 .eye::after { display: none; }
+/* 葡萄：星星眼 */
+.star-eye {
+  position: absolute;
+  top: 26%;
+  font-size: 0.9em;
+  color: #fff28a;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  animation: twinkle 1.6s ease-in-out infinite;
+  line-height: 1;
+}
+.star-eye.l { left: 18%; }
+.star-eye.r { right: 18%; animation-delay: -0.8s; }
+@keyframes twinkle {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(0.78) rotate(18deg); }
+}
+/* 嘴：默认微笑弧 */
+.mouth {
+  position: absolute;
+  bottom: 22%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 26%;
+  height: 13%;
+  border: 2.5px solid #26202e;
+  border-top: none;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-radius: 0 0 999px 999px;
+}
+/* 抹茶：惊讶 o 嘴 */
+.t2 .mouth {
+  width: 16%;
+  height: 16%;
+  border: none;
+  background: #26202e;
+  border-radius: 50%;
+  bottom: 18%;
+}
+/* 芒果：张嘴大笑 */
+.t1 .mouth {
+  width: 34%;
+  height: 20%;
+  border: none;
+  background: #7a3016;
+  border-radius: 0 0 999px 999px;
+  bottom: 18%;
+}
+.t1 .mouth::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 20%;
+  width: 60%;
+  height: 40%;
+  background: #ff8b9e;
+  border-radius: 999px 999px 0 0;
+}
+/* 薄荷：波浪小嘴 */
+.t5 .mouth {
+  width: 20%;
+  height: 8%;
+  border: none;
+  border-bottom: 2.5px solid #26202e;
+  border-radius: 999px;
+}
+/* ---- 状态动画 ---- */
+/* 选中：外圈光环 + 提起 */
+.blob.sel .body {
+  box-shadow:
+    0 0 0 3px #fff,
+    0 0 14px var(--primary),
+    inset 0 -6px 10px rgba(0, 0, 0, 0.28);
+}
+/* 提示：呼吸光环 */
+.blob.hint .body {
+  animation: hintPulse 0.7s ease-in-out infinite;
+}
+@keyframes hintPulse {
+  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 8px var(--accent), inset 0 -6px 10px rgba(0, 0, 0, 0.28); transform: scale(1); }
+  50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55), 0 0 20px var(--accent), inset 0 -6px 10px rgba(0, 0, 0, 0.28); transform: scale(1.08); }
+}
+/* 无效交换：摇头 */
+.blob.shake .body {
+  animation: headShake 0.42s ease;
+}
+@keyframes headShake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-14%) rotate(-6deg); }
+  45% { transform: translateX(12%) rotate(5deg); }
+  70% { transform: translateX(-8%) rotate(-3deg); }
+}
+/* 消除：鼓起爆浆消失 */
+.blob.pop {
+  pointer-events: none;
+}
+.blob.pop .body {
+  animation: popBoom 0.3s ease forwards;
+}
+@keyframes popBoom {
+  0% { transform: scale(1); opacity: 1; }
+  45% { transform: scale(1.32, 1.18); opacity: 1; }
+  100% { transform: scale(0.1); opacity: 0; }
+}
+/* ---- 浮动提示 ---- */
+.float-tip {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  background: rgba(12, 10, 24, 0.88);
+  color: #fff;
+  font-size: 12px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 6;
+  animation: tipUp 1.5s ease forwards;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+}
+.float-tip.warn { border-color: #ff5d73; }
+.float-tip.chain {
+  color: #ffe28a;
+  font-weight: 800;
+  border-color: #ffb300;
+}
+.float-tip.info { border-color: var(--accent); }
+@keyframes tipUp {
+  0% { opacity: 0; margin-top: 6px; }
+  15% { opacity: 1; margin-top: 0; }
+  75% { opacity: 1; margin-top: -14px; }
+  100% { opacity: 0; margin-top: -22px; }
+}
+/* ---- 关卡横幅 ---- */
+.lv-banner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: rgba(0, 0, 0, 0.55);
+  z-index: 7;
+  pointer-events: none;
+  animation: bannerFade 0.3s ease;
+}
+.lb-title {
+  font-size: 26px;
+  font-weight: 800;
+  color: #fff;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
+}
+.lb-sub {
+  font-size: 14px;
+  color: var(--accent);
+}
+@keyframes bannerFade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.tips {
+  margin-top: 10px;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+</style>
diff --git a/src/games/components/MathRushGame.vue b/src/games/components/MathRushGame.vue
new file mode 100644
index 0000000..d5869e1
--- /dev/null
+++ b/src/games/components/MathRushGame.vue
@@ -0,0 +1,187 @@
+<script setup>
+// 疯狂算术：60 秒限时心算，四选一，连对有额外加成
+import { ref } from 'vue'
+import { randInt, pick } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const question = ref('')
+const options = ref([])
+const score = ref(0)
+const combo = ref(0)
+const timeLeft = ref(60)
+const playing = ref(false)
+const flash = ref('') // 答题反馈动画 class
+let answer = 0
+let countTimer = 0
+let level = 1
+
+// 生成题目：难度随答题数提升（加减 → 乘 → 混合）
+function nextQuestion() {
+  const kind = level < 4 ? pick(['+', '-']) : level < 8 ? pick(['+', '-', '×']) : pick(['+', '-', '×', '混'])
+  let a, b, text
+  if (kind === '+') {
+    a = randInt(10, 20 + level * 10)
+    b = randInt(10, 20 + level * 10)
+    answer = a + b
+    text = `${a} + ${b}`
+  } else if (kind === '-') {
+    a = randInt(20, 30 + level * 10)
+    b = randInt(10, a - 1)
+    answer = a - b
+    text = `${a} - ${b}`
+  } else if (kind === '×') {
+    a = randInt(3, 9 + Math.min(6, level))
+    b = randInt(3, 12)
+    answer = a * b
+    text = `${a} × ${b}`
+  } else {
+    a = randInt(2, 9)
+    b = randInt(2, 9)
+    const c = randInt(5, 40)
+    answer = a * b + c
+    text = `${a} × ${b} + ${c}`
+  }
+  question.value = text
+  // 干扰项：答案±小偏移
+  const set = new Set([answer])
+  while (set.size < 4) {
+    set.add(answer + pick([-1, 1, -2, 2, -10, 10, randInt(-12, 12) || 3]))
+  }
+  options.value = [...set].sort(() => Math.random() - 0.5)
+}
+
+function choose(v) {
+  if (!playing.value) return
+  if (v === answer) {
+    combo.value++
+    // 基础 10 + 连击加成（每连 1 加 2，上限 +20）
+    score.value += 10 + Math.min(20, (combo.value - 1) * 2)
+    level = Math.floor(score.value / 100) + 1
+    flash.value = 'good'
+  } else {
+    combo.value = 0
+    score.value = Math.max(0, score.value - 5)
+    flash.value = 'bad'
+  }
+  emit('score', score.value)
+  setTimeout(() => (flash.value = ''), 220)
+  nextQuestion()
+}
+
+function tick() {
+  timeLeft.value--
+  if (timeLeft.value <= 0) {
+    playing.value = false
+    clearInterval(countTimer)
+    emit('end', { score: score.value })
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  score.value = 0
+  combo.value = 0
+  timeLeft.value = 60
+  level = 1
+  playing.value = true
+  emit('score', 0)
+  nextQuestion()
+  clearInterval(countTimer)
+  countTimer = setInterval(tick, 1000)
+}
+function stop() {
+  clearInterval(countTimer)
+}
+// 时间延长卡：+30 秒
+function useProp(code) {
+  if (code === 'time_extend' && playing.value) {
+    timeLeft.value += 30
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+nextQuestion()
+</script>
+
+<template>
+  <div class="math" :class="flash">
+    <div class="hud">
+      <span>⏱ <b :class="{ danger: timeLeft <= 10 }">{{ timeLeft }}</b>s</span>
+      <span v-if="combo >= 2" class="combo">🔥 {{ combo }} 连对</span>
+      <span>得分 <b class="text-primary">{{ score }}</b></span>
+    </div>
+    <div class="q">{{ question }} = ?</div>
+    <div class="opts">
+      <button v-for="o in options" :key="o" class="opt" @click="choose(o)">{{ o }}</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.math {
+  width: min(440px, 92vw);
+  text-align: center;
+  transition: transform 0.1s;
+}
+.math.good {
+  animation: pulse-good 0.22s;
+}
+.math.bad {
+  animation: shake 0.22s;
+}
+@keyframes pulse-good {
+  50% {
+    transform: scale(1.02);
+  }
+}
+@keyframes shake {
+  25% {
+    transform: translateX(-6px);
+  }
+  75% {
+    transform: translateX(6px);
+  }
+}
+.hud {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  margin-bottom: 18px;
+}
+.danger {
+  color: #ff5d73;
+}
+.combo {
+  color: var(--primary-2);
+  font-weight: 700;
+}
+.q {
+  font-size: 46px;
+  font-weight: 800;
+  margin-bottom: 26px;
+  letter-spacing: 2px;
+}
+.opts {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+.opt {
+  padding: 20px 0;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text);
+  font-size: 26px;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all 0.12s;
+}
+.opt:hover {
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+  transform: translateY(-2px);
+}
+</style>
diff --git a/src/games/components/MazeGame.vue b/src/games/components/MazeGame.vue
new file mode 100644
index 0000000..faf5c81
--- /dev/null
+++ b/src/games/components/MazeGame.vue
@@ -0,0 +1,160 @@
+<script setup>
+// 迷宫探险：随机生成迷宫（深度优先挖墙），限时走到终点，越快分越高
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { Keys, palette, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const N = 21 // 迷宫尺寸（奇数）
+const CELL = 26
+const SIZE = N * CELL
+let ctx
+let keys
+let maze = [] // 1=墙 0=路
+let player = { x: 1, y: 1 }
+let level = 1
+let score = 0
+let timeLeft = 60
+let countTimer = 0
+let playing = false
+
+// 深度优先挖墙生成迷宫
+function generate() {
+  maze = Array.from({ length: N }, () => Array(N).fill(1))
+  const stack = [[1, 1]]
+  maze[1][1] = 0
+  while (stack.length) {
+    const [cx, cy] = stack[stack.length - 1]
+    // 随机方向找未访问的相邻格（步长2）
+    const dirs = [[2, 0], [-2, 0], [0, 2], [0, -2]].sort(() => Math.random() - 0.5)
+    let moved = false
+    for (const [dx, dy] of dirs) {
+      const nx = cx + dx
+      const ny = cy + dy
+      if (nx > 0 && nx < N - 1 && ny > 0 && ny < N - 1 && maze[ny][nx] === 1) {
+        maze[ny][nx] = 0
+        maze[cy + dy / 2][cx + dx / 2] = 0 // 打通中间墙
+        stack.push([nx, ny])
+        moved = true
+        break
+      }
+    }
+    if (!moved) stack.pop()
+  }
+  // 终点保证可达（右下角）
+  maze[N - 2][N - 2] = 0
+}
+
+function move(dx, dy) {
+  if (!playing) return
+  const nx = player.x + dx
+  const ny = player.y + dy
+  if (maze[ny]?.[nx] === 0) {
+    player.x = nx
+    player.y = ny
+    draw()
+    // 到达终点：加分并进入下一关（迷宫重新生成，时间+20）
+    if (nx === N - 2 && ny === N - 2) {
+      score += 100 + timeLeft
+      timeLeft = Math.min(90, timeLeft + 20)
+      level++
+      emit('score', score)
+      generate()
+      player = { x: 1, y: 1 }
+      draw()
+    }
+  }
+}
+
+function tick() {
+  timeLeft--
+  draw()
+  if (timeLeft <= 0) {
+    playing = false
+    clearInterval(countTimer)
+    emit('end', { score })
+  }
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, SIZE, SIZE)
+  for (let y = 0; y < N; y++) {
+    for (let x = 0; x < N; x++) {
+      if (maze[y][x] === 1) {
+        ctx.fillStyle = p.panel
+        ctx.fillRect(x * CELL, y * CELL, CELL, CELL)
+        ctx.strokeStyle = p.border
+        ctx.strokeRect(x * CELL + 0.5, y * CELL + 0.5, CELL - 1, CELL - 1)
+      }
+    }
+  }
+  // 终点
+  ctx.fillStyle = '#4ade80'
+  ctx.beginPath()
+  ctx.roundRect((N - 2) * CELL + 4, (N - 2) * CELL + 4, CELL - 8, CELL - 8, 6)
+  ctx.fill()
+  // 玩家
+  ctx.font = `${CELL - 4}px serif`
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillText('🐭', player.x * CELL + CELL / 2, player.y * CELL + CELL / 2 + 1)
+  // 顶部信息
+  ctx.fillStyle = p.text
+  ctx.font = 'bold 14px sans-serif'
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'top'
+  ctx.fillText(`第 ${level} 关  ⏱ ${timeLeft}s`, 6, 4)
+}
+
+// ---- 对外接口 ----
+function start() {
+  generate()
+  player = { x: 1, y: 1 }
+  level = 1
+  score = 0
+  timeLeft = 60
+  playing = true
+  emit('score', 0)
+  clearInterval(countTimer)
+  countTimer = setInterval(tick, 1000)
+  draw()
+}
+function stop() {
+  clearInterval(countTimer)
+  keys?.detach()
+}
+// 时间延长卡：+30 秒
+function useProp(code) {
+  if (code === 'time_extend' && playing) {
+    timeLeft += 30
+    draw()
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  keys = new Keys()
+  keys.attach()
+  keys.onPress((k) => {
+    const map = {
+      ArrowUp: [0, -1], w: [0, -1],
+      ArrowDown: [0, 1], s: [0, 1],
+      ArrowLeft: [-1, 0], a: [-1, 0],
+      ArrowRight: [1, 0], d: [1, 0],
+    }
+    if (map[k]) move(...map[k])
+  })
+  generate()
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="SIZE" :height="SIZE"></canvas>
+</template>
diff --git a/src/games/components/MemoryGame.vue b/src/games/components/MemoryGame.vue
new file mode 100644
index 0000000..21d083b
--- /dev/null
+++ b/src/games/components/MemoryGame.vue
@@ -0,0 +1,150 @@
+<script setup>
+// 记忆翻牌：翻开两张相同的卡片配对，步数越少得分越高
+import { ref } from 'vue'
+
+const emit = defineEmits(['score', 'end'])
+const EMOJIS = ['🍕', '🚀', '🐱', '🌈', '⚽', '🎸', '🍩', '👑']
+const cards = ref([]) // {id, emoji, open, matched}
+const moves = ref(0)
+const playing = ref(false)
+let flipped = [] // 当前翻开待比对的卡
+let startTs = 0
+let hintTimer = 0
+let lock = false // 比对动画期间锁定点击
+
+// 洗牌生成 4×4 卡组
+function shuffle() {
+  const pool = [...EMOJIS, ...EMOJIS]
+    .map((e) => ({ e, r: Math.random() }))
+    .sort((a, b) => a.r - b.r)
+  cards.value = pool.map((p, i) => ({ id: i, emoji: p.e, open: false, matched: false }))
+}
+
+function clickCard(c) {
+  if (!playing.value || lock || c.open || c.matched) return
+  c.open = true
+  flipped.push(c)
+  if (flipped.length === 2) {
+    moves.value++
+    lock = true
+    const [a, b] = flipped
+    if (a.emoji === b.emoji) {
+      a.matched = true
+      b.matched = true
+      flipped = []
+      lock = false
+      updateScore()
+      // 全部配对 → 结束
+      if (cards.value.every((x) => x.matched)) {
+        playing.value = false
+        emit('end', { score: calcScore() })
+      }
+    } else {
+      // 不匹配：0.7 秒后盖回
+      setTimeout(() => {
+        a.open = false
+        b.open = false
+        flipped = []
+        lock = false
+      }, 700)
+    }
+  }
+}
+
+// 得分：基础 260 - 步数×8 - 用时（秒），下限 20
+function calcScore() {
+  const secs = Math.round((Date.now() - startTs) / 1000)
+  return Math.max(20, 260 - moves.value * 8 - secs)
+}
+function updateScore() {
+  emit('score', calcScore())
+}
+
+// ---- 对外接口 ----
+function start() {
+  shuffle()
+  moves.value = 0
+  flipped = []
+  lock = false
+  playing.value = true
+  startTs = Date.now()
+  emit('score', 260)
+}
+function stop() {
+  clearTimeout(hintTimer)
+}
+// 提示卡：亮出全部卡片 1.2 秒
+function useProp(code) {
+  if (code !== 'hint' || !playing.value) return false
+  const hidden = cards.value.filter((c) => !c.open && !c.matched)
+  hidden.forEach((c) => (c.open = true))
+  lock = true
+  hintTimer = setTimeout(() => {
+    hidden.forEach((c) => {
+      if (!c.matched && !flipped.includes(c)) c.open = false
+    })
+    lock = false
+  }, 1200)
+  return true
+}
+defineExpose({ start, stop, useProp })
+shuffle()
+</script>
+
+<template>
+  <div class="memory-board">
+    <div class="stats">步数：{{ moves }}</div>
+    <div class="grid">
+      <button
+        v-for="c in cards"
+        :key="c.id"
+        class="mcard"
+        :class="{ open: c.open || c.matched, matched: c.matched }"
+        @click="clickCard(c)"
+      >
+        <span class="face">{{ c.open || c.matched ? c.emoji : '❓' }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.memory-board {
+  width: min(480px, 90vw);
+}
+.stats {
+  text-align: center;
+  color: var(--text-dim);
+  margin-bottom: 10px;
+  font-size: 13px;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+.mcard {
+  aspect-ratio: 1;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  font-size: 34px;
+  cursor: pointer;
+  transition: transform 0.18s, background 0.18s, border-color 0.18s;
+}
+.mcard:hover {
+  transform: scale(1.04);
+}
+.mcard.open {
+  background: var(--bg-panel);
+  border-color: var(--primary);
+}
+.mcard.matched {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 14%, var(--bg-panel));
+  cursor: default;
+}
+.face {
+  display: block;
+}
+</style>
diff --git a/src/games/components/MinesweeperGame.vue b/src/games/components/MinesweeperGame.vue
new file mode 100644
index 0000000..cb9c113
--- /dev/null
+++ b/src/games/components/MinesweeperGame.vue
@@ -0,0 +1,195 @@
+<script setup>
+// 扫雷：翻开所有安全格并避开地雷，右键插旗
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { palette, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const COLS = 16
+const ROWS = 12
+const CELL = 34
+const MINES = 26
+let ctx
+let cells = [] // {mine, open, flag, num}
+let firstClick = true
+let opened = 0
+let score = 0
+let alive = false
+let startTs = 0
+
+// 数字颜色
+const NUM_COLORS = ['', '#4f8cff', '#4ade80', '#ff5d73', '#b26bff', '#ff9f45', '#00e5ff', '#ffd500', '#fff']
+
+function idx(x, y) {
+  return y * COLS + x
+}
+function neighbors(x, y) {
+  const list = []
+  for (let dy = -1; dy <= 1; dy++) {
+    for (let dx = -1; dx <= 1; dx++) {
+      if (!dx && !dy) continue
+      const nx = x + dx
+      const ny = y + dy
+      if (nx >= 0 && nx < COLS && ny >= 0 && ny < ROWS) list.push([nx, ny])
+    }
+  }
+  return list
+}
+
+// 布雷（首点及其周围保证安全）
+function placeMines(safeX, safeY) {
+  const banned = new Set([idx(safeX, safeY), ...neighbors(safeX, safeY).map(([x, y]) => idx(x, y))])
+  let placed = 0
+  while (placed < MINES) {
+    const i = randInt(0, COLS * ROWS - 1)
+    if (banned.has(i) || cells[i].mine) continue
+    cells[i].mine = true
+    placed++
+  }
+  // 计算每格周围雷数
+  for (let y = 0; y < ROWS; y++) {
+    for (let x = 0; x < COLS; x++) {
+      cells[idx(x, y)].num = neighbors(x, y).filter(([nx, ny]) => cells[idx(nx, ny)].mine).length
+    }
+  }
+}
+
+// 翻开格子（0 格洪水展开）
+function open(x, y) {
+  const c = cells[idx(x, y)]
+  if (c.open || c.flag) return
+  c.open = true
+  if (c.mine) {
+    // 踩雷：结束
+    alive = false
+    draw(true)
+    emit('end', { score })
+    return
+  }
+  opened++
+  score += 5
+  emit('score', score)
+  if (c.num === 0) {
+    neighbors(x, y).forEach(([nx, ny]) => open(nx, ny))
+  }
+  // 全部安全格翻开 → 胜利（加时间奖励分）
+  if (opened === COLS * ROWS - MINES && alive) {
+    const secs = Math.round((Date.now() - startTs) / 1000)
+    score += Math.max(50, 300 - secs * 2)
+    emit('score', score)
+    alive = false
+    draw()
+    emit('end', { score })
+  }
+}
+
+function draw(revealMines = false) {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, COLS * CELL, ROWS * CELL)
+  for (let y = 0; y < ROWS; y++) {
+    for (let x = 0; x < COLS; x++) {
+      const c = cells[idx(x, y)]
+      const px = x * CELL
+      const py = y * CELL
+      ctx.beginPath()
+      ctx.roundRect(px + 1.5, py + 1.5, CELL - 3, CELL - 3, 6)
+      if (c.open) {
+        ctx.fillStyle = c.mine ? '#e5484d' : 'rgba(255,255,255,0.06)'
+        ctx.fill()
+        ctx.textAlign = 'center'
+        ctx.textBaseline = 'middle'
+        if (c.mine) {
+          ctx.font = `${CELL - 12}px serif`
+          ctx.fillText('💥', px + CELL / 2, py + CELL / 2 + 1)
+        } else if (c.num) {
+          ctx.font = `bold ${CELL - 16}px sans-serif`
+          ctx.fillStyle = NUM_COLORS[c.num]
+          ctx.fillText(c.num, px + CELL / 2, py + CELL / 2 + 1)
+        }
+      } else {
+        ctx.fillStyle = p.panel
+        ctx.fill()
+        ctx.strokeStyle = p.border
+        ctx.stroke()
+        ctx.textAlign = 'center'
+        ctx.textBaseline = 'middle'
+        ctx.font = `${CELL - 14}px serif`
+        if (c.flag) ctx.fillText('🚩', px + CELL / 2, py + CELL / 2 + 1)
+        else if (revealMines && c.mine) ctx.fillText('💣', px + CELL / 2, py + CELL / 2 + 1)
+      }
+    }
+  }
+}
+
+// 事件坐标 → 网格坐标
+function toGrid(e) {
+  const rect = canvas.value.getBoundingClientRect()
+  const scale = canvas.value.width / rect.width
+  const x = Math.floor(((e.clientX - rect.left) * scale) / CELL)
+  const y = Math.floor(((e.clientY - rect.top) * scale) / CELL)
+  return [x, y]
+}
+
+function onClick(e) {
+  if (!alive) return
+  const [x, y] = toGrid(e)
+  if (x < 0 || x >= COLS || y < 0 || y >= ROWS) return
+  if (firstClick) {
+    placeMines(x, y)
+    firstClick = false
+    startTs = Date.now()
+  }
+  open(x, y)
+  if (alive) draw()
+}
+
+function onRight(e) {
+  e.preventDefault()
+  if (!alive || firstClick) return
+  const [x, y] = toGrid(e)
+  const c = cells[idx(x, y)]
+  if (c && !c.open) {
+    c.flag = !c.flag
+    draw()
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  cells = Array.from({ length: COLS * ROWS }, () => ({ mine: false, open: false, flag: false, num: 0 }))
+  firstClick = true
+  opened = 0
+  score = 0
+  alive = true
+  emit('score', 0)
+  draw()
+}
+function stop() {}
+// 提示卡：自动翻开一个安全格
+function useProp(code) {
+  if (code !== 'hint' || !alive || firstClick) return false
+  const candidates = cells
+    .map((c, i) => ({ c, i }))
+    .filter(({ c }) => !c.open && !c.mine && !c.flag)
+  if (!candidates.length) return false
+  const target = candidates[randInt(0, candidates.length - 1)]
+  open(target.i % COLS, Math.floor(target.i / COLS))
+  if (alive) draw()
+  return true
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  canvas.value.addEventListener('click', onClick)
+  canvas.value.addEventListener('contextmenu', onRight)
+  start()
+  alive = false // 等待点开始
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="COLS * CELL" :height="ROWS * CELL"></canvas>
+</template>
diff --git a/src/games/components/PianoTilesGame.vue b/src/games/components/PianoTilesGame.vue
new file mode 100644
index 0000000..094a1e5
--- /dev/null
+++ b/src/games/components/PianoTilesGame.vue
@@ -0,0 +1,166 @@
+<script setup>
+// 别踩白块：四列下落黑块，点击黑块得分，点到白块或黑块落地即结束
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, palette, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 420
+const H = 560
+const COLS = 4
+const TILE_H = 130
+let ctx
+let loop
+let tiles = [] // {col, y, hit}
+let score = 0
+let speed = 240
+let alive = false
+let lastCol = -1
+
+function spawnRow(y) {
+  let col = randInt(0, COLS - 1)
+  if (col === lastCol && Math.random() < 0.5) col = (col + randInt(1, 3)) % COLS
+  lastCol = col
+  tiles.push({ col, y, hit: false })
+}
+
+function update(dt) {
+  speed = 240 + score * 2.4 // 越点越快
+  tiles.forEach((t) => (t.y += speed * dt))
+  // 黑块落地未点 → 结束
+  for (const t of tiles) {
+    if (!t.hit && t.y > H) {
+      gameOver()
+      return
+    }
+  }
+  tiles = tiles.filter((t) => t.y < H + TILE_H)
+  // 顶部补新行
+  const topY = Math.min(...tiles.map((t) => t.y), H)
+  if (topY > -TILE_H / 2) spawnRow(topY - TILE_H)
+  draw()
+}
+
+function gameOver() {
+  alive = false
+  loop.stop()
+  draw()
+  emit('end', { score })
+}
+
+function tapCol(col, y) {
+  if (!alive) return
+  // 找该列最靠下的未点黑块
+  const candidates = tiles.filter((t) => t.col === col && !t.hit && t.y + TILE_H > 0)
+  candidates.sort((a, b) => b.y - a.y)
+  const target = candidates[0]
+  // 点击位置必须落在该黑块范围内（其余算踩白块）
+  if (target && y >= target.y && y <= target.y + TILE_H) {
+    target.hit = true
+    score++
+    emit('score', score)
+  } else {
+    gameOver()
+  }
+}
+
+function onPointer(e) {
+  const rect = canvas.value.getBoundingClientRect()
+  const scale = canvas.value.width / rect.width
+  const x = (e.clientX - rect.left) * scale
+  const y = (e.clientY - rect.top) * scale
+  tapCol(Math.floor(x / (W / COLS)), y)
+}
+
+function onKey(e) {
+  const map = { a: 0, s: 1, d: 2, f: 3 }
+  const col = map[e.key?.toLowerCase()]
+  if (col === undefined || !alive) return
+  // 键盘模式：点该列最靠下的黑块（不校验 y）
+  const candidates = tiles.filter((t) => t.col === col && !t.hit && t.y + TILE_H > 0 && t.y < H)
+  candidates.sort((a, b) => b.y - a.y)
+  if (candidates[0]) {
+    candidates[0].hit = true
+    score++
+    emit('score', score)
+  } else {
+    gameOver()
+  }
+}
+
+function draw() {
+  const p = palette()
+  const colW = W / COLS
+  ctx.fillStyle = '#f5f5f7'
+  ctx.fillRect(0, 0, W, H)
+  // 列分隔线
+  ctx.strokeStyle = '#ccc'
+  for (let i = 1; i < COLS; i++) {
+    ctx.beginPath()
+    ctx.moveTo(i * colW, 0)
+    ctx.lineTo(i * colW, H)
+    ctx.stroke()
+  }
+  // 黑块
+  tiles.forEach((t) => {
+    if (t.hit) {
+      ctx.fillStyle = 'rgba(120,120,140,0.25)'
+    } else {
+      ctx.fillStyle = '#16161e'
+    }
+    ctx.fillRect(t.col * colW + 1, t.y, colW - 2, TILE_H - 3)
+  })
+  // 按键提示
+  ctx.fillStyle = '#999'
+  ctx.font = '13px sans-serif'
+  ctx.textAlign = 'center'
+  ;['A', 'S', 'D', 'F'].forEach((k, i) => {
+    ctx.fillText(k, i * colW + colW / 2, H - 10)
+  })
+  // 分数
+  ctx.fillStyle = p.primary
+  ctx.font = 'bold 30px sans-serif'
+  ctx.fillText(score, W / 2, 42)
+}
+
+// ---- 对外接口 ----
+function start() {
+  tiles = []
+  score = 0
+  speed = 240
+  lastCol = -1
+  alive = true
+  for (let i = 0; i < 4; i++) spawnRow(-TILE_H * i - TILE_H)
+  emit('score', 0)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  window.removeEventListener('keydown', onKey)
+}
+// 复活卡：清掉当前屏幕的块继续
+function useProp(code) {
+  if (code === 'revive' && !alive) {
+    tiles = []
+    for (let i = 0; i < 4; i++) spawnRow(-TILE_H * i - TILE_H)
+    alive = true
+    loop.start()
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  canvas.value.addEventListener('pointerdown', onPointer)
+  window.addEventListener('keydown', onKey)
+  loop = createLoop(update)
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/PongGame.vue b/src/games/components/PongGame.vue
new file mode 100644
index 0000000..91fce91
--- /dev/null
+++ b/src/games/components/PongGame.vue
@@ -0,0 +1,168 @@
+<script setup>
+// 乒乓对战：与电脑对打，先得 11 分获胜
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, Keys, palette } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 760
+const H = 460
+const PW = 12 // 球拍宽
+const PH = 90 // 球拍高
+let ctx
+let keys
+let loop
+let my = { y: H / 2 - PH / 2, score: 0 }
+let aiP = { y: H / 2 - PH / 2, score: 0 }
+let ball = null
+let alive = false
+
+function resetBall(towardMe) {
+  const angle = (Math.random() * 0.6 - 0.3) * Math.PI
+  const speed = 380
+  ball = {
+    x: W / 2,
+    y: H / 2,
+    vx: (towardMe ? -1 : 1) * speed * Math.cos(angle),
+    vy: speed * Math.sin(angle),
+    r: 9,
+  }
+}
+
+function update(dt) {
+  // 我方球拍：键盘或鼠标
+  if (keys.has('ArrowUp') || keys.has('w')) my.y -= 420 * dt
+  if (keys.has('ArrowDown') || keys.has('s')) my.y += 420 * dt
+  my.y = Math.max(0, Math.min(H - PH, my.y))
+  // 电脑球拍：追踪球（速度受限，留破绽）
+  const target = ball.y - PH / 2
+  const aiSpeed = 300
+  if (Math.abs(target - aiP.y) > 6) {
+    aiP.y += Math.sign(target - aiP.y) * aiSpeed * dt
+  }
+  aiP.y = Math.max(0, Math.min(H - PH, aiP.y))
+  // 球移动
+  ball.x += ball.vx * dt
+  ball.y += ball.vy * dt
+  if (ball.y < ball.r || ball.y > H - ball.r) {
+    ball.vy *= -1
+    ball.y = Math.max(ball.r, Math.min(H - ball.r, ball.y))
+  }
+  // 我方拍（左侧 x=30）
+  if (ball.vx < 0 && ball.x < 30 + PW + ball.r && ball.x > 30 && ball.y > my.y - ball.r && ball.y < my.y + PH + ball.r) {
+    const t = (ball.y - my.y - PH / 2) / (PH / 2)
+    const speed = Math.hypot(ball.vx, ball.vy) * 1.03
+    ball.vx = Math.abs(speed * Math.cos(t * 1.05))
+    ball.vy = speed * Math.sin(t * 1.05)
+  }
+  // 电脑拍（右侧）
+  if (ball.vx > 0 && ball.x > W - 30 - PW - ball.r && ball.x < W - 30 && ball.y > aiP.y - ball.r && ball.y < aiP.y + PH + ball.r) {
+    const t = (ball.y - aiP.y - PH / 2) / (PH / 2)
+    const speed = Math.hypot(ball.vx, ball.vy) * 1.03
+    ball.vx = -Math.abs(speed * Math.cos(t * 1.05))
+    ball.vy = speed * Math.sin(t * 1.05)
+  }
+  // 出界得分
+  if (ball.x < -20) {
+    aiP.score++
+    afterPoint(true)
+  } else if (ball.x > W + 20) {
+    my.score++
+    emit('score', my.score)
+    afterPoint(false)
+  }
+  draw()
+}
+
+// 一分结束后的处理：先到 11 分终局
+function afterPoint(towardMe) {
+  if (my.score >= 11 || aiP.score >= 11) {
+    alive = false
+    loop.stop()
+    // 总分 = 我的得分 + 获胜奖励 15
+    const total = my.score + (my.score >= 11 ? 15 : 0)
+    emit('score', total)
+    draw()
+    emit('end', { score: total })
+    return
+  }
+  resetBall(towardMe)
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, W, H)
+  // 中线
+  ctx.strokeStyle = p.border
+  ctx.setLineDash([10, 12])
+  ctx.beginPath()
+  ctx.moveTo(W / 2, 0)
+  ctx.lineTo(W / 2, H)
+  ctx.stroke()
+  ctx.setLineDash([])
+  // 比分
+  ctx.font = 'bold 44px sans-serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'top'
+  ctx.fillStyle = p.primary
+  ctx.fillText(my.score, W / 2 - 70, 16)
+  ctx.fillStyle = p.dim
+  ctx.fillText(aiP.score, W / 2 + 70, 16)
+  // 球拍与球
+  ctx.fillStyle = p.primary
+  ctx.beginPath()
+  ctx.roundRect(30, my.y, PW, PH, 6)
+  ctx.fill()
+  ctx.fillStyle = p.accent
+  ctx.beginPath()
+  ctx.roundRect(W - 30 - PW, aiP.y, PW, PH, 6)
+  ctx.fill()
+  if (ball) {
+    ctx.fillStyle = p.primary2
+    ctx.beginPath()
+    ctx.arc(ball.x, ball.y, ball.r, 0, 7)
+    ctx.fill()
+  }
+}
+
+function onMouse(e) {
+  const rect = canvas.value.getBoundingClientRect()
+  const scale = canvas.value.height / rect.height
+  my.y = (e.clientY - rect.top) * scale - PH / 2
+  my.y = Math.max(0, Math.min(H - PH, my.y))
+}
+
+// ---- 对外接口 ----
+function start() {
+  my = { y: H / 2 - PH / 2, score: 0 }
+  aiP = { y: H / 2 - PH / 2, score: 0 }
+  alive = true
+  resetBall(Math.random() < 0.5)
+  emit('score', 0)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  keys?.detach()
+}
+function useProp() {
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  keys = new Keys()
+  keys.attach()
+  canvas.value.addEventListener('mousemove', onMouse)
+  loop = createLoop(update)
+  resetBall(true)
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/Puzzle15Game.vue b/src/games/components/Puzzle15Game.vue
new file mode 100644
index 0000000..5df6e6c
--- /dev/null
+++ b/src/games/components/Puzzle15Game.vue
@@ -0,0 +1,123 @@
+<script setup>
+// 数字华容道：滑动数字方块按 1-15 复原，步数越少用时越短分越高
+import { ref } from 'vue'
+import { randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const tiles = ref([]) // 16 格，0 表示空位
+const moves = ref(0)
+const playing = ref(false)
+let startTs = 0
+
+// 打乱：从完成态做 300 次随机合法移动（保证有解）
+function shuffle() {
+  tiles.value = [...Array(15).keys()].map((i) => i + 1).concat(0)
+  for (let i = 0; i < 300; i++) {
+    const empty = tiles.value.indexOf(0)
+    const options = neighborsOf(empty)
+    const pick = options[randInt(0, options.length - 1)]
+    ;[tiles.value[empty], tiles.value[pick]] = [tiles.value[pick], tiles.value[empty]]
+  }
+}
+
+// 与空位相邻的下标
+function neighborsOf(idx) {
+  const r = Math.floor(idx / 4)
+  const c = idx % 4
+  const list = []
+  if (r > 0) list.push(idx - 4)
+  if (r < 3) list.push(idx + 4)
+  if (c > 0) list.push(idx - 1)
+  if (c < 3) list.push(idx + 1)
+  return list
+}
+
+function clickTile(idx) {
+  if (!playing.value) return
+  const empty = tiles.value.indexOf(0)
+  if (!neighborsOf(empty).includes(idx)) return
+  ;[tiles.value[empty], tiles.value[idx]] = [tiles.value[idx], tiles.value[empty]]
+  moves.value++
+  // 完成判定
+  const done = tiles.value.slice(0, 15).every((v, i) => v === i + 1)
+  if (done) {
+    playing.value = false
+    const secs = Math.round((Date.now() - startTs) / 1000)
+    // 得分：400 - 步数 - 用时，下限 40
+    const score = Math.max(40, 400 - moves.value - secs)
+    emit('score', score)
+    emit('end', { score })
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  shuffle()
+  moves.value = 0
+  playing.value = true
+  startTs = Date.now()
+  emit('score', 0)
+}
+function stop() {}
+function useProp() {
+  return false
+}
+defineExpose({ start, stop, useProp })
+shuffle()
+</script>
+
+<template>
+  <div class="p15">
+    <div class="hud text-dim">步数：{{ moves }}</div>
+    <div class="board">
+      <button
+        v-for="(v, i) in tiles"
+        :key="i"
+        class="tile"
+        :class="{ empty: v === 0, right: v !== 0 && v === i + 1 }"
+        @click="clickTile(i)"
+      >
+        {{ v || '' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.p15 {
+  width: min(400px, 90vw);
+  text-align: center;
+}
+.hud {
+  margin-bottom: 10px;
+  font-size: 13px;
+}
+.board {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+.tile {
+  aspect-ratio: 1;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: linear-gradient(135deg, var(--bg-card), var(--bg-panel));
+  color: var(--text);
+  font-size: 26px;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all 0.12s;
+}
+.tile:hover:not(.empty) {
+  border-color: var(--primary);
+}
+.tile.right {
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
+}
+.tile.empty {
+  background: transparent;
+  border: 1px dashed var(--border);
+  cursor: default;
+}
+</style>
diff --git a/src/games/components/PvzGame.vue b/src/games/components/PvzGame.vue
new file mode 100644
index 0000000..5b67e6c
--- /dev/null
+++ b/src/games/components/PvzGame.vue
@@ -0,0 +1,440 @@
+<script setup>
+// 植物大战僵尸（简化版）：5 行 9 列草坪塔防
+// 向日葵产阳光、豌豆射手攻击、坚果墙挡路；每行一台割草机作最后防线
+// 道具：bomb 清场炸弹、shield 补满割草机
+import { ref, onBeforeUnmount } from 'vue'
+import { createLoop, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+
+// 画布与网格
+const COLS = 9
+const ROWS = 5
+const CELL_W = 90
+const CELL_H = 92
+const LAWN_X = 70
+const LAWN_Y = 10
+const W = LAWN_X + COLS * CELL_W + 10
+const H = LAWN_Y + ROWS * CELL_H + 10
+
+// 植物卡片定义
+const PLANT_DEFS = {
+  sunflower: { icon: '🌻', name: '向日葵', cost: 50, hp: 80, cd: 5 },
+  peashooter: { icon: '🫛', name: '豌豆射手', cost: 100, hp: 100, cd: 5 },
+  wallnut: { icon: '🥜', name: '坚果墙', cost: 75, hp: 420, cd: 12 },
+}
+// 僵尸类型：血量/速度/击杀得分
+const ZOMBIE_DEFS = {
+  normal: { icon: '🧟', hp: 100, speed: 11, score: 10 },
+  cone: { icon: '🧟', hp: 190, speed: 10, score: 20 },
+  bucket: { icon: '🧟', hp: 320, speed: 8.5, score: 30 },
+}
+
+const canvasRef = ref(null)
+const playing = ref(false)
+const sun = ref(50)
+const score = ref(0)
+const waveNo = ref(0)
+const selected = ref('') // 当前选中的植物卡
+const cooldowns = ref({ sunflower: 0, peashooter: 0, wallnut: 0 })
+
+let ctx = null
+let plants = [] // {row,col,type,hp,maxHp,timer}
+let zombies = [] // {row,x,type,hp,eating,walkT}
+let peas = [] // {row,x}
+let suns = [] // {x,y,targetY,ttl,fromSky}
+let mowers = [] // {row,active,x,used}
+let spawnTimer = 0
+let spawnInterval = 7
+let skyTimer = 4
+let waveTimer = 40
+let elapsed = 0
+
+const loop = createLoop(update)
+
+// ---- 核心更新 ----
+function update(dt) {
+  elapsed += dt
+  // 卡片冷却
+  for (const k of Object.keys(cooldowns.value)) {
+    if (cooldowns.value[k] > 0) cooldowns.value[k] = Math.max(0, cooldowns.value[k] - dt)
+  }
+  // 天降阳光
+  skyTimer -= dt
+  if (skyTimer <= 0) {
+    skyTimer = 9
+    suns.push({
+      x: LAWN_X + randInt(20, COLS * CELL_W - 40),
+      y: -20,
+      targetY: LAWN_Y + randInt(30, ROWS * CELL_H - 40),
+      ttl: 9,
+      fromSky: true,
+    })
+  }
+  for (const s of suns) {
+    if (s.fromSky && s.y < s.targetY) s.y = Math.min(s.targetY, s.y + 60 * dt)
+    else s.ttl -= dt
+  }
+  suns = suns.filter((s) => s.ttl > 0)
+  // 僵尸生成：间隔随时间缩短，定期一大波
+  spawnTimer -= dt
+  if (spawnTimer <= 0) {
+    spawnInterval = Math.max(2.2, spawnInterval - 0.12)
+    spawnTimer = spawnInterval
+    spawnZombie()
+  }
+  waveTimer -= dt
+  if (waveTimer <= 0) {
+    waveTimer = 40
+    waveNo.value++
+    for (let i = 0; i < 2 + Math.min(waveNo.value, 4); i++) spawnZombie()
+  }
+  // 植物行为
+  for (const p of plants) {
+    p.timer -= dt
+    if (p.type === 'sunflower' && p.timer <= 0) {
+      p.timer = 9
+      suns.push({
+        x: LAWN_X + p.col * CELL_W + CELL_W / 2 + randInt(-18, 18),
+        y: LAWN_Y + p.row * CELL_H + CELL_H / 2,
+        targetY: 0,
+        ttl: 9,
+        fromSky: false,
+      })
+    }
+    if (p.type === 'peashooter' && p.timer <= 0) {
+      // 该行前方有僵尸才开火
+      const px = LAWN_X + p.col * CELL_W + CELL_W / 2
+      if (zombies.some((z) => z.row === p.row && z.x > px - 20)) {
+        p.timer = 1.4
+        peas.push({ row: p.row, x: px + 18 })
+      }
+    }
+  }
+  // 豌豆飞行与命中
+  for (const pea of peas) {
+    pea.x += 320 * dt
+    const hit = zombies.find((z) => z.row === pea.row && Math.abs(z.x - pea.x) < 16)
+    if (hit) {
+      hit.hp -= 22
+      pea.dead = true
+      if (hit.hp <= 0) killZombie(hit)
+    }
+  }
+  peas = peas.filter((p) => !p.dead && p.x < W + 20)
+  // 僵尸行进与啃食
+  for (const z of zombies) {
+    z.walkT += dt
+    const front = plants.find(
+      (p) => p.row === z.row && Math.abs(LAWN_X + p.col * CELL_W + CELL_W / 2 - z.x) < 26
+    )
+    if (front) {
+      z.eating = true
+      front.hp -= 30 * dt
+      if (front.hp <= 0) plants = plants.filter((p) => p !== front)
+    } else {
+      z.eating = false
+      z.x -= ZOMBIE_DEFS[z.type].speed * (1 + elapsed / 240) * dt
+    }
+    // 突破草坪左缘：割草机是最后防线
+    if (z.x < LAWN_X - 6) {
+      const mower = mowers.find((m) => m.row === z.row && !m.used && !m.active)
+      if (mower) {
+        mower.active = true
+      } else if (!mowers.some((m) => m.row === z.row && m.active)) {
+        gameOver()
+        return
+      }
+    }
+  }
+  // 割草机清行
+  for (const m of mowers) {
+    if (!m.active) continue
+    m.x += 420 * dt
+    for (const z of zombies) {
+      if (z.row === m.row && z.hp > 0 && Math.abs(z.x - m.x) < 34) killZombie(z)
+    }
+    if (m.x > W + 40) {
+      m.active = false
+      m.used = true
+    }
+  }
+  zombies = zombies.filter((z) => z.hp > 0)
+  draw()
+}
+
+function spawnZombie() {
+  const roll = Math.random()
+  const type = roll < 0.55 ? 'normal' : roll < 0.85 ? 'cone' : 'bucket'
+  zombies.push({
+    row: randInt(0, ROWS - 1),
+    x: W + randInt(0, 60),
+    type,
+    hp: ZOMBIE_DEFS[type].hp,
+    eating: false,
+    walkT: Math.random() * 3,
+  })
+}
+
+function killZombie(z) {
+  if (z.hp <= -9999) return
+  z.hp = -10000
+  score.value += ZOMBIE_DEFS[z.type].score
+  emit('score', score.value)
+}
+
+function gameOver() {
+  playing.value = false
+  loop.stop()
+  emit('end', { score: score.value })
+}
+
+// ---- 交互 ----
+function onCanvasClick(e) {
+  if (!playing.value) return
+  const rect = canvasRef.value.getBoundingClientRect()
+  const x = ((e.clientX - rect.left) / rect.width) * W
+  const y = ((e.clientY - rect.top) / rect.height) * H
+  // 先看是否点中阳光（点击范围放宽）
+  const s = suns.find((s) => Math.hypot(s.x - x, s.y - y) < 30)
+  if (s) {
+    s.ttl = 0
+    sun.value += 25
+    return
+  }
+  // 再尝试种植
+  if (!selected.value) return
+  const col = Math.floor((x - LAWN_X) / CELL_W)
+  const row = Math.floor((y - LAWN_Y) / CELL_H)
+  if (col < 0 || col >= COLS || row < 0 || row >= ROWS) return
+  const def = PLANT_DEFS[selected.value]
+  if (sun.value < def.cost || cooldowns.value[selected.value] > 0) return
+  if (plants.some((p) => p.row === row && p.col === col)) return
+  sun.value -= def.cost
+  cooldowns.value[selected.value] = def.cd
+  plants.push({ row, col, type: selected.value, hp: def.hp, maxHp: def.hp, timer: 1 })
+}
+
+function pickCard(type) {
+  selected.value = selected.value === type ? '' : type
+}
+
+// ---- 绘制 ----
+function draw() {
+  ctx.clearRect(0, 0, W, H)
+  // 草坪棋盘格
+  for (let r = 0; r < ROWS; r++) {
+    for (let c = 0; c < COLS; c++) {
+      ctx.fillStyle = (r + c) % 2 ? '#1c7a37' : '#239644'
+      ctx.fillRect(LAWN_X + c * CELL_W, LAWN_Y + r * CELL_H, CELL_W, CELL_H)
+    }
+  }
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  // 割草机
+  for (const m of mowers) {
+    if (m.used && !m.active) continue
+    ctx.font = '30px sans-serif'
+    ctx.fillText('🚜', m.active ? m.x : LAWN_X - 34, LAWN_Y + m.row * CELL_H + CELL_H / 2 + 14)
+  }
+  // 植物与血条
+  for (const p of plants) {
+    const cx = LAWN_X + p.col * CELL_W + CELL_W / 2
+    const cy = LAWN_Y + p.row * CELL_H + CELL_H / 2
+    ctx.font = '42px sans-serif'
+    ctx.fillText(PLANT_DEFS[p.type].icon, cx, cy + 4)
+    ctx.fillStyle = 'rgba(0,0,0,0.4)'
+    ctx.fillRect(cx - 22, cy - 34, 44, 5)
+    ctx.fillStyle = '#4ade80'
+    ctx.fillRect(cx - 22, cy - 34, (44 * p.hp) / p.maxHp, 5)
+  }
+  // 豌豆
+  ctx.fillStyle = '#7ed957'
+  for (const pea of peas) {
+    ctx.beginPath()
+    ctx.arc(pea.x, LAWN_Y + pea.row * CELL_H + CELL_H / 2 - 10, 7, 0, Math.PI * 2)
+    ctx.fill()
+  }
+  // 僵尸（走路摇摆 + 头饰区分种类 + 血条）
+  for (const z of zombies) {
+    const cy = LAWN_Y + z.row * CELL_H + CELL_H / 2
+    const sway = z.eating ? 0 : Math.sin(z.walkT * 6) * 3
+    ctx.font = '42px sans-serif'
+    ctx.fillText('🧟', z.x, cy + 6 + sway)
+    if (z.type === 'cone') {
+      ctx.font = '20px sans-serif'
+      ctx.fillText('🔺', z.x, cy - 26 + sway)
+    } else if (z.type === 'bucket') {
+      ctx.font = '20px sans-serif'
+      ctx.fillText('🪣', z.x, cy - 26 + sway)
+    }
+    const def = ZOMBIE_DEFS[z.type]
+    ctx.fillStyle = 'rgba(0,0,0,0.4)'
+    ctx.fillRect(z.x - 20, cy - 40, 40, 4)
+    ctx.fillStyle = '#ff5d73'
+    ctx.fillRect(z.x - 20, cy - 40, (40 * Math.max(z.hp, 0)) / def.hp, 4)
+  }
+  // 阳光
+  for (const s of suns) {
+    ctx.font = '32px sans-serif'
+    ctx.fillText('☀️', s.x, s.y)
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  sun.value = 50
+  score.value = 0
+  waveNo.value = 0
+  selected.value = ''
+  cooldowns.value = { sunflower: 0, peashooter: 0, wallnut: 0 }
+  plants = []
+  zombies = []
+  peas = []
+  suns = []
+  mowers = Array.from({ length: ROWS }, (_, r) => ({ row: r, active: false, x: LAWN_X - 34, used: false }))
+  spawnTimer = 5
+  spawnInterval = 7
+  skyTimer = 3
+  waveTimer = 40
+  elapsed = 0
+  playing.value = true
+  emit('score', 0)
+  const cv = canvasRef.value
+  cv.width = W
+  cv.height = H
+  ctx = cv.getContext('2d')
+  loop.start()
+}
+function stop() {
+  playing.value = false
+  loop.stop()
+}
+// bomb：清除全场僵尸并计分；shield：修复全部割草机
+function useProp(code) {
+  if (!playing.value) return false
+  if (code === 'bomb' && zombies.length) {
+    for (const z of zombies) killZombie(z)
+    zombies = []
+    return true
+  }
+  if (code === 'shield') {
+    const broken = mowers.filter((m) => m.used)
+    if (!broken.length) return false
+    for (const m of broken) {
+      m.used = false
+      m.active = false
+      m.x = LAWN_X - 34
+    }
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+onBeforeUnmount(() => loop.stop())
+</script>
+
+<template>
+  <div class="pvz-board">
+    <div class="hud">
+      <span class="sun-box">☀️ <b>{{ sun }}</b></span>
+      <div class="cards">
+        <button
+          v-for="(def, type) in PLANT_DEFS"
+          :key="type"
+          class="card"
+          :class="{ on: selected === type, disabled: sun < def.cost || cooldowns[type] > 0 }"
+          @click="pickCard(type)"
+        >
+          <span class="c-icon">{{ def.icon }}</span>
+          <span class="c-cost">{{ def.cost }}</span>
+          <span v-if="cooldowns[type] > 0" class="c-cd" :style="{ height: (cooldowns[type] / def.cd) * 100 + '%' }"></span>
+        </button>
+      </div>
+      <span>第 <b>{{ waveNo }}</b> 波 · 得分 <b class="score">{{ score }}</b></span>
+    </div>
+    <canvas ref="canvasRef" class="lawn" @click="onCanvasClick"></canvas>
+    <p class="tips">🌻 产阳光　🫛 射僵尸　🥜 挡路　🚜 每行最后防线</p>
+  </div>
+</template>
+
+<style scoped>
+.pvz-board {
+  width: min(920px, 94vw);
+  text-align: center;
+}
+.hud {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+  font-size: 14px;
+  flex-wrap: wrap;
+}
+.sun-box {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 6px 12px;
+}
+.sun-box b {
+  color: #ffd400;
+}
+.cards {
+  display: flex;
+  gap: 8px;
+}
+.card {
+  position: relative;
+  width: 58px;
+  height: 64px;
+  border-radius: 10px;
+  border: 2px solid var(--border);
+  background: var(--bg-card);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  overflow: hidden;
+}
+.card.on {
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+}
+.card.disabled {
+  opacity: 0.55;
+}
+.c-icon {
+  font-size: 26px;
+}
+.c-cost {
+  font-size: 11px;
+  color: #ffd400;
+  font-weight: 700;
+}
+.c-cd {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.55);
+  pointer-events: none;
+}
+.score {
+  color: var(--primary);
+}
+.lawn {
+  width: 100%;
+  border-radius: 12px;
+  background: #175c2c;
+  cursor: pointer;
+}
+.tips {
+  margin-top: 8px;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+</style>
diff --git a/src/games/components/Racing3dGame.vue b/src/games/components/Racing3dGame.vue
new file mode 100644
index 0000000..0d1bd07
--- /dev/null
+++ b/src/games/components/Racing3dGame.vue
@@ -0,0 +1,241 @@
+<script setup>
+// 3D 极速赛车（Three.js）：三车道公路，左右变道躲避车流，里程即分数
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import * as THREE from 'three'
+import { Keys, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const holder = ref(null)
+const W = 640
+const H = 560
+const LANES = [-2.2, 0, 2.2] // 三车道 X 坐标
+let renderer, scene, camera, rafId
+let keys
+let myCar
+let traffic = [] // 敌车 {mesh, lane, z, speed}
+let stripes = [] // 车道虚线
+let myLane = 1
+let dist = 0
+let speed = 26
+let alive = false
+let lastTs = 0
+let spawnZ = -40
+let shieldOn = false
+let invincible = 0
+let shieldRing
+const CAR_COLORS = ['#ff5d73', '#ffd500', '#4ade80', '#b26bff', '#ff9f45']
+
+// 组装一辆简单小车（车身+车顶）
+function makeCar(color) {
+  const group = new THREE.Group()
+  const body = new THREE.Mesh(
+    new THREE.BoxGeometry(1.4, 0.5, 2.6),
+    new THREE.MeshLambertMaterial({ color })
+  )
+  body.position.y = 0.45
+  const top = new THREE.Mesh(
+    new THREE.BoxGeometry(1.1, 0.42, 1.3),
+    new THREE.MeshLambertMaterial({ color: '#dfe6ff' })
+  )
+  top.position.set(0, 0.85, 0.1)
+  group.add(body, top)
+  // 四个轮子
+  const wheelGeo = new THREE.CylinderGeometry(0.26, 0.26, 0.24, 14)
+  const wheelMat = new THREE.MeshLambertMaterial({ color: '#16161e' })
+  ;[[-0.72, 0.9], [0.72, 0.9], [-0.72, -0.9], [0.72, -0.9]].forEach(([x, z]) => {
+    const wheel = new THREE.Mesh(wheelGeo, wheelMat)
+    wheel.rotation.z = Math.PI / 2
+    wheel.position.set(x, 0.26, z)
+    group.add(wheel)
+  })
+  return group
+}
+
+function initScene() {
+  scene = new THREE.Scene()
+  scene.background = new THREE.Color('#0d0e2b')
+  scene.fog = new THREE.Fog('#0d0e2b', 22, 60)
+  camera = new THREE.PerspectiveCamera(65, W / H, 0.1, 120)
+  camera.position.set(0, 4.6, 7.5)
+  camera.lookAt(0, 0, -6)
+  const dir = new THREE.DirectionalLight(0xffffff, 1.4)
+  dir.position.set(4, 10, 4)
+  scene.add(dir)
+  scene.add(new THREE.AmbientLight(0xffffff, 0.6))
+  // 公路
+  const road = new THREE.Mesh(
+    new THREE.PlaneGeometry(8.2, 200),
+    new THREE.MeshLambertMaterial({ color: '#23253f' })
+  )
+  road.rotation.x = -Math.PI / 2
+  road.position.z = -70
+  scene.add(road)
+  // 路肩
+  const sideMat = new THREE.MeshLambertMaterial({ color: '#141530' })
+  ;[-7, 7].forEach((x) => {
+    const side = new THREE.Mesh(new THREE.PlaneGeometry(6, 200), sideMat)
+    side.rotation.x = -Math.PI / 2
+    side.position.set(x, -0.01, -70)
+    scene.add(side)
+  })
+  // 车道虚线
+  const stripeMat = new THREE.MeshBasicMaterial({ color: '#8f95c9' })
+  for (let z = 8; z > -120; z -= 4) {
+    ;[-1.1, 1.1].forEach((x) => {
+      const s = new THREE.Mesh(new THREE.PlaneGeometry(0.14, 1.6), stripeMat)
+      s.rotation.x = -Math.PI / 2
+      s.position.set(x, 0.01, z)
+      scene.add(s)
+      stripes.push(s)
+    })
+  }
+  // 我的车
+  myCar = makeCar('#00e5ff')
+  myCar.position.set(LANES[1], 0, 3.5)
+  scene.add(myCar)
+  // 护盾光环
+  shieldRing = new THREE.Mesh(
+    new THREE.TorusGeometry(1.5, 0.06, 10, 40),
+    new THREE.MeshBasicMaterial({ color: '#00e5ff' })
+  )
+  shieldRing.rotation.x = Math.PI / 2
+  shieldRing.visible = false
+  myCar.add(shieldRing)
+}
+
+function spawnTraffic() {
+  // 随机 1~2 辆占道（永远至少留一条通路）
+  const lanes = [0, 1, 2].sort(() => Math.random() - 0.5).slice(0, randInt(1, 2))
+  lanes.forEach((lane) => {
+    const car = makeCar(CAR_COLORS[randInt(0, CAR_COLORS.length - 1)])
+    car.position.set(LANES[lane], 0, spawnZ)
+    car.rotation.y = Math.PI // 对头方向摆放
+    scene.add(car)
+    traffic.push({ mesh: car, lane, z: spawnZ, speed: speed * 0.45 })
+  })
+  spawnZ -= randInt(14, 22)
+}
+
+function animate(ts) {
+  rafId = requestAnimationFrame(animate)
+  const dt = Math.min((ts - lastTs) / 1000 || 0.016, 0.05)
+  lastTs = ts
+  if (alive) {
+    if (invincible > 0) invincible -= dt
+    // 里程与提速
+    dist += speed * dt
+    speed = 26 + Math.min(30, dist * 0.02)
+    const score = Math.floor(dist)
+    emit('score', score)
+    // 我的车向目标车道平滑移动
+    const targetX = LANES[myLane]
+    myCar.position.x += (targetX - myCar.position.x) * Math.min(1, 10 * dt)
+    myCar.rotation.z = (targetX - myCar.position.x) * -0.08
+    // 车流相对接近
+    traffic.forEach((t) => {
+      t.z += (speed - t.speed) * dt
+      t.mesh.position.z = t.z
+    })
+    // 移除超过屏幕的车 & 补新车
+    traffic = traffic.filter((t) => {
+      if (t.z > 12) {
+        scene.remove(t.mesh)
+        return false
+      }
+      return true
+    })
+    if (!traffic.length || Math.max(...traffic.map((t) => t.z)) > -22) {
+      if (spawnZ > -60) spawnTraffic()
+    }
+    spawnZ = Math.min(spawnZ + speed * dt, -40)
+    // 虚线滚动（视觉速度感）
+    stripes.forEach((s) => {
+      s.position.z += speed * dt
+      if (s.position.z > 10) s.position.z -= 128
+    })
+    // 碰撞判定
+    if (invincible <= 0) {
+      for (const t of traffic) {
+        if (Math.abs(t.z - myCar.position.z) < 2.4 && Math.abs(LANES[t.lane] - myCar.position.x) < 1.4) {
+          if (shieldOn) {
+            shieldOn = false
+            shieldRing.visible = false
+            invincible = 1.2
+            scene.remove(t.mesh)
+            traffic = traffic.filter((x) => x !== t)
+          } else {
+            alive = false
+            emit('end', { score })
+          }
+          break
+        }
+      }
+    }
+    // 无敌闪烁
+    myCar.visible = invincible <= 0 || Math.floor(ts / 90) % 2 === 0
+  }
+  renderer.render(scene, camera)
+}
+
+// ---- 对外接口 ----
+function start() {
+  traffic.forEach((t) => scene.remove(t.mesh))
+  traffic = []
+  myLane = 1
+  dist = 0
+  speed = 26
+  spawnZ = -40
+  shieldOn = false
+  invincible = 0
+  alive = true
+  myCar.position.set(LANES[1], 0, 3.5)
+  myCar.visible = true
+  shieldRing.visible = false
+  emit('score', 0)
+}
+function stop() {
+  cancelAnimationFrame(rafId)
+  keys?.detach()
+  renderer?.dispose()
+}
+// 复活：清空车流+2秒无敌；护盾：挡一次碰撞
+function useProp(code) {
+  if (code === 'revive' && !alive) {
+    traffic.forEach((t) => scene.remove(t.mesh))
+    traffic = []
+    invincible = 2
+    alive = true
+    return true
+  }
+  if (code === 'shield' && alive && !shieldOn) {
+    shieldOn = true
+    shieldRing.visible = true
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  renderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setSize(W, H)
+  holder.value.appendChild(renderer.domElement)
+  renderer.domElement.style.borderRadius = '10px'
+  renderer.domElement.style.maxWidth = '100%'
+  keys = new Keys()
+  keys.attach()
+  // 变道输入
+  keys.onPress((k) => {
+    if (!alive) return
+    if ((k === 'ArrowLeft' || k === 'a') && myLane > 0) myLane--
+    if ((k === 'ArrowRight' || k === 'd') && myLane < 2) myLane++
+  })
+  initScene()
+  animate(0)
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <div ref="holder"></div>
+</template>
diff --git a/src/games/components/SimonGame.vue b/src/games/components/SimonGame.vue
new file mode 100644
index 0000000..85f584b
--- /dev/null
+++ b/src/games/components/SimonGame.vue
@@ -0,0 +1,154 @@
+<script setup>
+// 记忆序列（西蒙说）：记住不断变长的灯光序列并复述
+import { ref } from 'vue'
+import { randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const pads = [
+  { id: 0, color: '#ff5d73', emoji: '🔴' },
+  { id: 1, color: '#4ade80', emoji: '🟢' },
+  { id: 2, color: '#4f8cff', emoji: '🔵' },
+  { id: 3, color: '#ffd500', emoji: '🟡' },
+]
+const litPad = ref(-1) // 当前亮起的按钮
+const round = ref(0)
+const phase = ref('idle') // idle / showing / input
+const message = ref('记住闪烁顺序')
+let sequence = []
+let inputIdx = 0
+let score = 0
+let timers = []
+
+// 播放当前序列
+async function playSequence() {
+  phase.value = 'showing'
+  message.value = `第 ${round.value} 关：注意看！`
+  await wait(600)
+  for (const id of sequence) {
+    litPad.value = id
+    await wait(Math.max(220, 520 - round.value * 22)) // 关卡越高闪得越快
+    litPad.value = -1
+    await wait(140)
+  }
+  phase.value = 'input'
+  message.value = '轮到你了，按顺序点击'
+  inputIdx = 0
+}
+
+function wait(ms) {
+  return new Promise((resolve) => {
+    timers.push(setTimeout(resolve, ms))
+  })
+}
+
+// 玩家点击
+async function clickPad(id) {
+  if (phase.value !== 'input') return
+  litPad.value = id
+  setTimeout(() => (litPad.value = -1), 180)
+  if (id !== sequence[inputIdx]) {
+    // 按错 → 结束
+    phase.value = 'idle'
+    message.value = '按错啦！'
+    emit('end', { score })
+    return
+  }
+  inputIdx++
+  if (inputIdx >= sequence.length) {
+    // 本关通过：得分 = 关数×12
+    score += round.value * 12
+    emit('score', score)
+    message.value = '漂亮！进入下一关'
+    await wait(700)
+    nextRound()
+  }
+}
+
+function nextRound() {
+  round.value++
+  sequence.push(randInt(0, 3))
+  playSequence()
+}
+
+// ---- 对外接口 ----
+function start() {
+  timers.forEach(clearTimeout)
+  timers = []
+  sequence = []
+  round.value = 0
+  score = 0
+  emit('score', 0)
+  nextRound()
+}
+function stop() {
+  timers.forEach(clearTimeout)
+}
+function useProp() {
+  return false
+}
+defineExpose({ start, stop, useProp })
+</script>
+
+<template>
+  <div class="simon">
+    <p class="msg">{{ message }}</p>
+    <div class="ring">
+      <button
+        v-for="p in pads"
+        :key="p.id"
+        class="pad"
+        :class="{ lit: litPad === p.id, waiting: phase === 'input' }"
+        :style="{ '--pad-color': p.color }"
+        @click="clickPad(p.id)"
+      >
+        {{ p.emoji }}
+      </button>
+    </div>
+    <p class="round text-dim">第 {{ round }} 关 · 序列长度 {{ round }}</p>
+  </div>
+</template>
+
+<style scoped>
+.simon {
+  text-align: center;
+  width: min(400px, 90vw);
+}
+.msg {
+  margin-bottom: 16px;
+  font-size: 15px;
+  min-height: 22px;
+}
+.ring {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 14px;
+}
+.pad {
+  aspect-ratio: 1;
+  border-radius: 22px;
+  border: 2px solid var(--border);
+  background: var(--bg-card);
+  font-size: 52px;
+  cursor: pointer;
+  opacity: 0.55;
+  transition: all 0.12s;
+  filter: saturate(0.6);
+}
+.pad.waiting {
+  cursor: pointer;
+}
+.pad.waiting:hover {
+  opacity: 0.85;
+}
+.pad.lit {
+  opacity: 1;
+  filter: saturate(1.3) brightness(1.2);
+  border-color: var(--pad-color);
+  box-shadow: 0 0 24px var(--pad-color);
+  transform: scale(1.04);
+}
+.round {
+  margin-top: 14px;
+  font-size: 12px;
+}
+</style>
diff --git a/src/games/components/SnakeGame.vue b/src/games/components/SnakeGame.vue
new file mode 100644
index 0000000..fe622bf
--- /dev/null
+++ b/src/games/components/SnakeGame.vue
@@ -0,0 +1,194 @@
+<script setup>
+// 贪吃蛇：方向键控制小蛇吃食物成长，撞墙或咬到自己结束
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { Keys, palette, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+// 网格参数：24 列 × 18 行，每格 28 像素
+const COLS = 24
+const ROWS = 18
+const CELL = 28
+let ctx
+let keys
+let timer = 0 // 移动定时器
+let snake = [] // 蛇身（头在前）
+let dir = { x: 1, y: 0 } // 当前方向
+let nextDir = { x: 1, y: 0 } // 缓冲方向（防止一帧内反向）
+let food = null // 普通食物
+let bonus = null // 限时奖励食物
+let bonusTtl = 0 // 奖励食物剩余口数
+let score = 0
+let speed = 130 // 每步间隔 ms（越小越快）
+let alive = false
+
+// 重置整局
+function reset() {
+  snake = [
+    { x: 8, y: 9 },
+    { x: 7, y: 9 },
+    { x: 6, y: 9 },
+  ]
+  dir = { x: 1, y: 0 }
+  nextDir = { x: 1, y: 0 }
+  score = 0
+  speed = 130
+  bonus = null
+  spawnFood()
+  emit('score', 0)
+}
+
+// 生成食物（避开蛇身）
+function spawnFood() {
+  do {
+    food = { x: randInt(0, COLS - 1), y: randInt(0, ROWS - 1) }
+  } while (snake.some((s) => s.x === food.x && s.y === food.y))
+  // 15% 概率同时刷出限时奖励食物
+  if (!bonus && Math.random() < 0.15) {
+    do {
+      bonus = { x: randInt(0, COLS - 1), y: randInt(0, ROWS - 1) }
+    } while (snake.some((s) => s.x === bonus.x && s.y === bonus.y) || (bonus.x === food.x && bonus.y === food.y))
+    bonusTtl = 40 // 40 步内有效
+  }
+}
+
+// 每步移动逻辑
+function step() {
+  dir = nextDir
+  const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y }
+  // 撞墙或咬到自己 → 结束
+  if (
+    head.x < 0 || head.x >= COLS || head.y < 0 || head.y >= ROWS ||
+    snake.some((s) => s.x === head.x && s.y === head.y)
+  ) {
+    die()
+    return
+  }
+  snake.unshift(head)
+  if (head.x === food.x && head.y === food.y) {
+    score += 10
+    emit('score', score)
+    // 越吃越快（下限 65ms）
+    speed = Math.max(65, speed - 2)
+    spawnFood()
+    restartTimer()
+  } else if (bonus && head.x === bonus.x && head.y === bonus.y) {
+    score += 30
+    emit('score', score)
+    bonus = null
+  } else {
+    snake.pop() // 没吃到就收尾
+  }
+  if (bonus && --bonusTtl <= 0) bonus = null
+  draw()
+}
+
+function die() {
+  alive = false
+  clearInterval(timer)
+  draw()
+  emit('end', { score })
+}
+
+function restartTimer() {
+  clearInterval(timer)
+  timer = setInterval(step, speed)
+}
+
+// 绘制画面
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, COLS * CELL, ROWS * CELL)
+  // 网格底纹
+  ctx.strokeStyle = p.border + '55'
+  ctx.lineWidth = 1
+  for (let x = 0; x <= COLS; x++) {
+    ctx.beginPath()
+    ctx.moveTo(x * CELL, 0)
+    ctx.lineTo(x * CELL, ROWS * CELL)
+    ctx.stroke()
+  }
+  for (let y = 0; y <= ROWS; y++) {
+    ctx.beginPath()
+    ctx.moveTo(0, y * CELL)
+    ctx.lineTo(COLS * CELL, y * CELL)
+    ctx.stroke()
+  }
+  // 食物
+  ctx.font = `${CELL - 6}px serif`
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillText('🍎', food.x * CELL + CELL / 2, food.y * CELL + CELL / 2 + 1)
+  if (bonus) ctx.fillText('⭐', bonus.x * CELL + CELL / 2, bonus.y * CELL + CELL / 2 + 1)
+  // 蛇身（头亮尾暗渐变）
+  snake.forEach((s, i) => {
+    ctx.fillStyle = i === 0 ? p.primary2 : p.primary
+    ctx.globalAlpha = Math.max(0.35, 1 - i * 0.02)
+    ctx.beginPath()
+    ctx.roundRect(s.x * CELL + 2, s.y * CELL + 2, CELL - 4, CELL - 4, 7)
+    ctx.fill()
+  })
+  ctx.globalAlpha = 1
+  // 蛇眼睛
+  const h = snake[0]
+  ctx.fillStyle = '#111'
+  ctx.beginPath()
+  ctx.arc(h.x * CELL + CELL / 2 + dir.x * 5 - dir.y * 5, h.y * CELL + CELL / 2 + dir.y * 5 + dir.x * 5, 2.6, 0, 7)
+  ctx.arc(h.x * CELL + CELL / 2 + dir.x * 5 + dir.y * 5, h.y * CELL + CELL / 2 + dir.y * 5 - dir.x * 5, 2.6, 0, 7)
+  ctx.fill()
+}
+
+// ---- 对外接口 ----
+function start() {
+  reset()
+  alive = true
+  restartTimer()
+  draw()
+}
+function stop() {
+  clearInterval(timer)
+  keys?.detach()
+}
+// 复活卡：蛇缩短为 3 节回到中央继续，分数保留
+function useProp(code) {
+  if (code === 'revive' && !alive) {
+    snake = [
+      { x: 8, y: 9 },
+      { x: 7, y: 9 },
+      { x: 6, y: 9 },
+    ]
+    dir = { x: 1, y: 0 }
+    nextDir = { x: 1, y: 0 }
+    alive = true
+    restartTimer()
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  keys = new Keys()
+  keys.attach()
+  // 方向输入（禁止直接反向）
+  keys.onPress((k) => {
+    const map = {
+      ArrowUp: { x: 0, y: -1 }, w: { x: 0, y: -1 },
+      ArrowDown: { x: 0, y: 1 }, s: { x: 0, y: 1 },
+      ArrowLeft: { x: -1, y: 0 }, a: { x: -1, y: 0 },
+      ArrowRight: { x: 1, y: 0 }, d: { x: 1, y: 0 },
+    }
+    const nd = map[k]
+    if (nd && !(nd.x === -dir.x && nd.y === -dir.y)) nextDir = nd
+  })
+  reset()
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="COLS * CELL" :height="ROWS * CELL"></canvas>
+</template>
diff --git a/src/games/components/SpaceShooterGame.vue b/src/games/components/SpaceShooterGame.vue
new file mode 100644
index 0000000..4cced55
--- /dev/null
+++ b/src/games/components/SpaceShooterGame.vue
@@ -0,0 +1,243 @@
+<script setup>
+// 太空射击：自动开火，躲避敌机与弹幕，波次越打越猛
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, Keys, palette, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 640
+const H = 560
+let ctx
+let keys
+let loop
+let ship = { x: W / 2, y: H - 60 }
+let bullets = [] // 我方子弹
+let enemies = [] // {x,y,hp,type,vy,fireCd}
+let enemyBullets = []
+let stars = [] // 背景星星
+let score = 0
+let wave = 1
+let alive = false
+let fireCd = 0
+let spawnCd = 0
+let shieldOn = false
+let invincible = 0
+
+function update(dt) {
+  if (invincible > 0) invincible -= dt
+  // 背景星星滚动
+  stars.forEach((s) => {
+    s.y += s.v * dt
+    if (s.y > H) {
+      s.y = -2
+      s.x = Math.random() * W
+    }
+  })
+  // 移动（键盘）
+  const speed = 340
+  if (keys.has('ArrowLeft') || keys.has('a')) ship.x -= speed * dt
+  if (keys.has('ArrowRight') || keys.has('d')) ship.x += speed * dt
+  ship.x = Math.max(20, Math.min(W - 20, ship.x))
+  // 自动开火
+  fireCd -= dt
+  if (fireCd <= 0) {
+    bullets.push({ x: ship.x, y: ship.y - 18 })
+    fireCd = 0.22
+  }
+  bullets.forEach((b) => (b.y -= 560 * dt))
+  bullets = bullets.filter((b) => b.y > -10)
+  // 刷敌机（波次越高越快）
+  spawnCd -= dt
+  if (spawnCd <= 0) {
+    const type = Math.random() < 0.82 ? 'small' : 'big'
+    enemies.push({
+      x: randInt(30, W - 30),
+      y: -24,
+      hp: type === 'big' ? 4 : 1,
+      type,
+      vy: type === 'big' ? 60 : randInt(90, 140) + wave * 6,
+      fireCd: Math.random() * 2 + 1,
+    })
+    spawnCd = Math.max(0.28, 0.9 - wave * 0.06)
+  }
+  // 敌机移动与开火
+  enemies.forEach((e) => {
+    e.y += e.vy * dt
+    e.fireCd -= dt
+    if (e.fireCd <= 0 && e.y > 0 && e.y < H - 150) {
+      // 朝玩家方向射一发
+      const dx = ship.x - e.x
+      const dy = ship.y - e.y
+      const len = Math.hypot(dx, dy)
+      enemyBullets.push({ x: e.x, y: e.y, vx: (dx / len) * 220, vy: (dy / len) * 220 })
+      e.fireCd = Math.random() * 2.2 + 1.4
+    }
+  })
+  enemies = enemies.filter((e) => e.y < H + 30)
+  enemyBullets.forEach((b) => {
+    b.x += b.vx * dt
+    b.y += b.vy * dt
+  })
+  enemyBullets = enemyBullets.filter((b) => b.y < H + 10 && b.y > -10 && b.x > -10 && b.x < W + 10)
+  // 我方子弹命中敌机
+  for (const b of bullets) {
+    for (const e of enemies) {
+      const r = e.type === 'big' ? 22 : 15
+      if (Math.abs(b.x - e.x) < r && Math.abs(b.y - e.y) < r) {
+        e.hp--
+        b.y = -100 // 标记子弹消失
+        if (e.hp <= 0) {
+          score += e.type === 'big' ? 50 : 10
+          emit('score', score)
+          // 每 300 分升一波
+          const newWave = Math.floor(score / 300) + 1
+          if (newWave > wave) wave = newWave
+        }
+      }
+    }
+  }
+  enemies = enemies.filter((e) => e.hp > 0)
+  bullets = bullets.filter((b) => b.y > -50)
+  // 玩家被弹幕/敌机撞
+  if (invincible <= 0) {
+    let hit = enemyBullets.some((b) => Math.hypot(b.x - ship.x, b.y - ship.y) < 16)
+    hit = hit || enemies.some((e) => Math.hypot(e.x - ship.x, e.y - ship.y) < (e.type === 'big' ? 30 : 24))
+    if (hit) {
+      if (shieldOn) {
+        shieldOn = false
+        invincible = 1.2
+      } else {
+        alive = false
+        loop.stop()
+        draw()
+        emit('end', { score })
+        return
+      }
+    }
+  }
+  draw()
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, W, H)
+  // 星空
+  ctx.fillStyle = p.dim
+  stars.forEach((s) => ctx.fillRect(s.x, s.y, s.size, s.size))
+  // 我方飞船（无敌时闪烁）
+  if (invincible <= 0 || Math.floor(performance.now() / 90) % 2 === 0) {
+    ctx.font = '34px serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText('🚀', ship.x, ship.y)
+  }
+  if (shieldOn) {
+    ctx.strokeStyle = p.accent
+    ctx.lineWidth = 3
+    ctx.beginPath()
+    ctx.arc(ship.x, ship.y, 28, 0, 7)
+    ctx.stroke()
+  }
+  // 子弹
+  ctx.fillStyle = p.primary2
+  bullets.forEach((b) => {
+    ctx.beginPath()
+    ctx.roundRect(b.x - 2.5, b.y - 9, 5, 14, 3)
+    ctx.fill()
+  })
+  ctx.fillStyle = p.primary
+  enemyBullets.forEach((b) => {
+    ctx.beginPath()
+    ctx.arc(b.x, b.y, 5, 0, 7)
+    ctx.fill()
+  })
+  // 敌机
+  ctx.font = '26px serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  enemies.forEach((e) => {
+    ctx.font = e.type === 'big' ? '40px serif' : '26px serif'
+    ctx.fillText(e.type === 'big' ? '🛸' : '👾', e.x, e.y)
+  })
+  // 波次
+  ctx.fillStyle = p.dim
+  ctx.font = '13px sans-serif'
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'top'
+  ctx.fillText(`第 ${wave} 波`, 10, 10)
+}
+
+function onMouse(e) {
+  const rect = canvas.value.getBoundingClientRect()
+  const scale = canvas.value.width / rect.width
+  ship.x = Math.max(20, Math.min(W - 20, (e.clientX - rect.left) * scale))
+}
+
+// ---- 对外接口 ----
+function start() {
+  ship = { x: W / 2, y: H - 60 }
+  bullets = []
+  enemies = []
+  enemyBullets = []
+  score = 0
+  wave = 1
+  shieldOn = false
+  invincible = 0
+  fireCd = 0
+  spawnCd = 0.4
+  alive = true
+  emit('score', 0)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  keys?.detach()
+}
+// 复活：清屏并无敌 2 秒；炸弹：清除所有敌机与弹幕；护盾：挡一次
+function useProp(code) {
+  if (code === 'revive' && !alive) {
+    enemyBullets = []
+    enemies = []
+    invincible = 2
+    alive = true
+    loop.start()
+    return true
+  }
+  if (code === 'bomb' && alive) {
+    enemies.forEach((e) => {
+      score += e.type === 'big' ? 50 : 10
+    })
+    emit('score', score)
+    enemies = []
+    enemyBullets = []
+    return true
+  }
+  if (code === 'shield' && alive && !shieldOn) {
+    shieldOn = true
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  keys = new Keys()
+  keys.attach()
+  canvas.value.addEventListener('mousemove', onMouse)
+  loop = createLoop(update)
+  stars = Array.from({ length: 70 }, () => ({
+    x: Math.random() * W,
+    y: Math.random() * H,
+    v: 24 + Math.random() * 60,
+    size: Math.random() < 0.3 ? 2 : 1,
+  }))
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/Stack3dGame.vue b/src/games/components/Stack3dGame.vue
new file mode 100644
index 0000000..543c06e
--- /dev/null
+++ b/src/games/components/Stack3dGame.vue
@@ -0,0 +1,177 @@
+<script setup>
+// 3D 堆堆乐（Three.js）：方块来回移动，点击放下，重叠部分保留，越高越难
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import * as THREE from 'three'
+
+const emit = defineEmits(['score', 'end'])
+const holder = ref(null)
+const W = 640
+const H = 560
+let renderer, scene, camera, rafId
+let stack = [] // 已叠的层 {mesh, w, d, x, z}
+let moving = null // 当前移动层 {mesh, w, d, axis, dir}
+let score = 0
+let alive = false
+let baseY = 0 // 塔顶高度
+const LAYER_H = 0.5
+const START_SIZE = 3
+
+// 每层随高度渐变颜色
+function layerColor(i) {
+  return new THREE.Color().setHSL((0.55 + i * 0.035) % 1, 0.65, 0.55)
+}
+
+function makeBox(w, d, color) {
+  const geo = new THREE.BoxGeometry(w, LAYER_H, d)
+  const mat = new THREE.MeshLambertMaterial({ color })
+  return new THREE.Mesh(geo, mat)
+}
+
+function initScene() {
+  scene = new THREE.Scene()
+  scene.background = new THREE.Color('#101230')
+  // 正交相机（经典堆塔视角）
+  const aspect = W / H
+  const size = 6
+  camera = new THREE.OrthographicCamera(-size * aspect, size * aspect, size, -size, 0.1, 100)
+  camera.position.set(6, 7, 6)
+  camera.lookAt(0, 0.5, 0)
+  // 灯光
+  const dir = new THREE.DirectionalLight(0xffffff, 1.6)
+  dir.position.set(6, 12, 4)
+  scene.add(dir)
+  scene.add(new THREE.AmbientLight(0xffffff, 0.7))
+}
+
+// 放置底座并生成第一块移动层
+function resetTower() {
+  stack.forEach((s) => scene.remove(s.mesh))
+  if (moving) scene.remove(moving.mesh)
+  stack = []
+  baseY = 0
+  const base = makeBox(START_SIZE, START_SIZE, layerColor(0))
+  base.position.set(0, -LAYER_H / 2, 0)
+  scene.add(base)
+  stack.push({ mesh: base, w: START_SIZE, d: START_SIZE, x: 0, z: 0 })
+  spawnMoving()
+}
+
+// 生成下一块移动层（交替沿 X/Z 轴移动）
+function spawnMoving() {
+  const top = stack[stack.length - 1]
+  const axis = stack.length % 2 === 1 ? 'x' : 'z'
+  const mesh = makeBox(top.w, top.d, layerColor(stack.length))
+  baseY = (stack.length - 1) * LAYER_H + LAYER_H / 2
+  mesh.position.set(axis === 'x' ? -5 : top.x, baseY + LAYER_H, axis === 'z' ? -5 : top.z)
+  scene.add(mesh)
+  moving = { mesh, w: top.w, d: top.d, axis, dir: 1, speed: 3 + stack.length * 0.12 }
+}
+
+// 点击放下：计算与塔顶的重叠
+function drop() {
+  if (!alive || !moving) return
+  const top = stack[stack.length - 1]
+  const m = moving.mesh.position
+  let overlap, newW = moving.w, newD = moving.d, newX = m.x, newZ = m.z
+  if (moving.axis === 'x') {
+    const delta = m.x - top.x
+    overlap = moving.w - Math.abs(delta)
+    if (overlap <= 0.05) return miss()
+    newW = overlap
+    newX = top.x + delta / 2
+  } else {
+    const delta = m.z - top.z
+    overlap = moving.d - Math.abs(delta)
+    if (overlap <= 0.05) return miss()
+    newD = overlap
+    newZ = top.z + delta / 2
+  }
+  // 完美对齐（误差 < 0.12）不裁剪 + 奖励分
+  const perfect = moving.axis === 'x' ? Math.abs(m.x - top.x) < 0.12 : Math.abs(m.z - top.z) < 0.12
+  if (perfect) {
+    newW = moving.w
+    newD = moving.d
+    newX = top.x
+    newZ = top.z
+    score += 3
+  } else {
+    score += 1
+  }
+  emit('score', score)
+  // 用裁剪后的尺寸重建这一层
+  scene.remove(moving.mesh)
+  const placed = makeBox(newW, newD, layerColor(stack.length))
+  placed.position.set(newX, baseY + LAYER_H, newZ)
+  scene.add(placed)
+  stack.push({ mesh: placed, w: newW, d: newD, x: newX, z: newZ })
+  moving = null
+  // 相机跟随塔高
+  camera.position.y = 7 + stack.length * LAYER_H
+  camera.lookAt(0, stack.length * LAYER_H, 0)
+  spawnMoving()
+}
+
+// 完全没接住 → 结束
+function miss() {
+  alive = false
+  emit('end', { score })
+}
+
+function animate() {
+  rafId = requestAnimationFrame(animate)
+  if (moving && alive) {
+    const m = moving.mesh.position
+    const delta = 0.016 * moving.speed * moving.dir
+    if (moving.axis === 'x') {
+      m.x += delta
+      if (m.x > 5 || m.x < -5) moving.dir *= -1
+    } else {
+      m.z += delta
+      if (m.z > 5 || m.z < -5) moving.dir *= -1
+    }
+  }
+  renderer.render(scene, camera)
+}
+
+function onKey(e) {
+  if (e.key === ' ') {
+    e.preventDefault()
+    drop()
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  score = 0
+  alive = true
+  emit('score', 0)
+  resetTower()
+}
+function stop() {
+  cancelAnimationFrame(rafId)
+  window.removeEventListener('keydown', onKey)
+  renderer?.dispose()
+}
+function useProp() {
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  renderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setSize(W, H)
+  holder.value.appendChild(renderer.domElement)
+  renderer.domElement.style.borderRadius = '10px'
+  renderer.domElement.style.maxWidth = '100%'
+  renderer.domElement.addEventListener('pointerdown', drop)
+  window.addEventListener('keydown', onKey)
+  initScene()
+  resetTower()
+  animate()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <div ref="holder"></div>
+</template>
diff --git a/src/games/components/StarveGame.vue b/src/games/components/StarveGame.vue
new file mode 100644
index 0000000..853fa52
--- /dev/null
+++ b/src/games/components/StarveGame.vue
@@ -0,0 +1,3506 @@
+<script setup>
+// 饥荒网页版 V4（官方对齐版）：岛屿五群系世界 + 四季天气体温 + 科技分级合成 +
+// 格子背包装备 + 查理黑暗袭击 + 烹饪锅 + 猪牛蜂蛙触手巨鹿 + 组队联机 + 云存档
+// 架构：数据/世界/生物/气候/美术拆分在 ../starve/ 模块，本文件负责
+// 主循环、玩家交互、库存装备、联机快照、存档、渲染调度与 UI
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, Keys, randInt } from '../engine'
+import { skinByCode, drawPlayerFig } from '../starveSkins'
+import { CAP, DAY_LEN, CRAFT_TABS, cookPot, DECOR } from '../starve/data'
+import { seasonOf, daySplit, phaseOf, ambientTemp, rollWeather, tickWeather, updateBodyTemp } from '../starve/climate'
+import {
+  TILE, GW, GH, WORLD, BIOMES, tileIdx, isLand, biomeAt, onRoad, findLandNear,
+  genIsland, planEntities, genDecor, buildTilePatterns, drawTiles,
+} from '../starve/world'
+import { buildIcons, drawEnt, drawMob, drawFirePainter, drawDecor } from '../starve/paint'
+import { updateMob, moveMob } from '../starve/mobs'
+import { activateMods, callHook, callHandled, callAllows, collectModSaves, applyModSaves } from '../starve/mods/registry'
+
+// ---- mod 运行时注册表：以下 let 遮蔽基表，激活 mod 后指向合并表（核心其余代码无感） ----
+let modRt = activateMods([])
+let TUNE = modRt.tune
+let ITEMS = modRt.items
+let RECIPES = modRt.recipes
+let MON = modRt.mon
+let MOB_DROPS = modRt.mobDrops
+let RES = modRt.res
+let NAMES = modRt.names
+let ITEM_CODES = modRt.itemCodes
+let ITEM_IDX = modRt.itemIdx
+function stackMax(code) {
+  return ITEMS[code]?.stack || TUNE.stackMax
+}
+
+const emit = defineEmits(['score', 'end', 'save', 'progress'])
+const canvas = ref(null)
+const clockCv = ref(null)
+const mapCv = ref(null)
+
+// ---- HUD 响应式状态 ----
+const playing = ref(false)
+const dead = ref(false)
+const ghostMode = ref(false)
+const deathStats = ref({ day: 1, score: 0, kills: 0 })
+const hp = ref(CAP.hp)
+const hunger = ref(CAP.hunger)
+const san = ref(CAP.san)
+const temp = ref(20)
+const day = ref(1)
+const seasonTag = ref({ name: '秋', dayIn: 1, len: 20, tint: '#c98548', code: 'autumn' })
+const tips = ref([])
+const hint = ref('')
+const craftOpen = ref(false)
+const craftTab = ref('tools')
+const showMap = ref(false)
+const saving = ref(false)
+const isCoop = ref(false)
+const waitingWorld = ref(false)
+const seasonBanner = ref('')
+const uiSlots = ref([])
+const uiPack = ref(null)
+const uiEquip = ref({ hand: null, body: null, head: null })
+const uiCounts = ref({})
+const uiTech = ref(0)
+const uiUnlocked = ref([])
+const potView = ref(null) // {id, ing:[code], state, t, dish}
+const uiMods = ref([]) // 本局启用的 mod 元数据（HUD 展示）
+
+const ICONS = buildIcons() // {url, cv}
+
+// 切换 mod 运行时：重定向遮蔽表 + 补齐 mod 物品图标
+function applyModRuntime(rt) {
+  modRt = rt
+  TUNE = rt.tune
+  ITEMS = rt.items
+  RECIPES = rt.recipes
+  MON = rt.mon
+  MOB_DROPS = rt.mobDrops
+  RES = rt.res
+  NAMES = rt.names
+  ITEM_CODES = rt.itemCodes
+  ITEM_IDX = rt.itemIdx
+  rt.itemCodes.forEach((code) => {
+    if (ICONS.cv[code]) return
+    const cv = document.createElement('canvas')
+    cv.width = 40
+    cv.height = 40
+    const c = cv.getContext('2d')
+    c.translate(20, 20)
+    c.lineJoin = 'round'
+    c.lineCap = 'round'
+    const painter = rt.iconPainters[code]
+    if (painter) painter(c)
+    else {
+      // 无专属图标的 mod 物品：袋子 + 首字符
+      c.fillStyle = '#a8894c'
+      c.strokeStyle = '#1d1409'
+      c.lineWidth = 2
+      c.beginPath()
+      c.roundRect(-12, -10, 24, 22, 6)
+      c.fill()
+      c.stroke()
+      c.fillStyle = '#1d1409'
+      c.font = 'bold 13px sans-serif'
+      c.textAlign = 'center'
+      c.textBaseline = 'middle'
+      c.fillText((ITEMS[code]?.name || code)[0], 0, 2)
+    }
+    ICONS.cv[code] = cv
+    ICONS.url[code] = cv.toDataURL()
+  })
+  // 自定义建筑图标（配方列表用）
+  Object.entries(rt.iconPainters).forEach(([code, painter]) => {
+    if (ICONS.cv[code] && ITEMS[code]) return
+    if (ICONS.url[code]) return
+    const cv = document.createElement('canvas')
+    cv.width = 40
+    cv.height = 40
+    const c = cv.getContext('2d')
+    c.translate(20, 20)
+    c.lineJoin = 'round'
+    c.lineCap = 'round'
+    painter(c)
+    ICONS.cv[code] = cv
+    ICONS.url[code] = cv.toDataURL()
+  })
+  uiMods.value = rt.metas
+}
+const ACTS = ['', 'chop', 'mine', 'dig', 'attack', 'eat']
+
+// ---- 非响应式游戏状态 ----
+let ctx = null
+let keys = null
+let loop = null
+let time = 0
+let dayTime = 0
+let seasonNow = seasonOf(1)
+let phaseName = 'day'
+let wx = { type: 'none', t: 0 }
+let tiles = null
+let road = null
+let tilePats = null
+let decoSpots = []
+let explored = null
+let entities = []
+let monsters = []
+let fires = []
+let players = []
+let player = null
+let mySkinCode = 'wilson'
+let camX = 0
+let camY = 0
+let eid = 1
+let mid = 1
+let fid = 1
+let kills = { spider: 0, hound: 0, shadow: 0, treeguard: 0, other: 0 }
+let treesChopped = 0
+let houndPlan = { nextDay: 5, at: 40, warnT: 0, doneToday: false }
+let deer = { spawned: false, warnT: 0 }
+let shakeT = 0
+let shakeAmp = 0
+let flashRed = 0
+let potOpenId = 0
+let invDirty = true
+let hudT = 0
+let mapT = 0
+let exploreT = 0
+let fpsEma = 60
+let lastDt = 0.016
+let particles = []
+let coop = null
+let netT = 0
+let moveSendT = 0
+let pendingEv = [] // 主机 → 客机的私人提示 [[seat, text]]
+let entsAdded = new Set()
+let entsRemoved = new Set()
+let entsDirty = new Set()
+let fullSyncPending = false
+let saveTimer = 0
+
+// =====================================================================
+// 基础工具
+// =====================================================================
+function tip(text) {
+  tips.value.push({ id: Math.random(), text })
+  if (tips.value.length > 4) tips.value.shift()
+  setTimeout(() => (tips.value = tips.value.filter((t) => t.text !== text || t.expired)), 3200)
+}
+// 面向具体玩家的提示：自己直接弹，客机玩家走快照 ev 通道
+function ptip(p, text) {
+  if (p === player) tip(text)
+  else if (coop && p.seat !== undefined) pendingEv.push([p.seat, text])
+}
+function addScore(n, p = player) {
+  if (!p || p.dead) return
+  p.score += Math.round(n * modRt.scoreFactor)
+  if (p === player) emit('score', p.score)
+}
+function shake(amp) {
+  shakeT = 0.4
+  shakeAmp = Math.max(shakeAmp, amp)
+}
+function isHostRole() {
+  return !coop || coop.isHost
+}
+function totalKills() {
+  return kills.spider + kills.hound + kills.shadow + kills.treeguard + kills.other
+}
+
+// =====================================================================
+// 玩家与库存
+// =====================================================================
+function makeSlots(n) {
+  return Array(n).fill(null)
+}
+function makePlayer(seat, name, skinCode, x, y) {
+  return {
+    seat, name: name || '荒野求生者', skin: skinCode || 'wilson',
+    x, y, dir: 1, walking: false, walkT: 0, speed: 172,
+    swing: 0, act: '', hitTimer: 0,
+    hp: CAP.hp, hunger: CAP.hunger, san: CAP.san, temp: 22,
+    dead: false, fallT: 1, freezeT: 0, darkT: 0, darkWarned: false,
+    slots: makeSlots(TUNE.invSlots), pack: null,
+    equip: { hand: null, body: null, head: null },
+    unlocked: new Set(),
+    target: null, input: { dx: 0, dy: 0 }, score: 0,
+    nx: 0, ny: 0, // 客机插值目标
+  }
+}
+function countItem(p, code) {
+  let n = 0
+  p.slots.forEach((s) => { if (s && s.code === code) n += s.n })
+  p.pack?.forEach((s) => { if (s && s.code === code) n += s.n })
+  return n
+}
+// 添加物品：先并入同类堆（保鲜度加权平均），再占空格，溢出落地成拾取物
+function addItem(p, code, n = 1, fresh = 1, dur = null) {
+  const it = ITEMS[code]
+  if (!it) return
+  const max = stackMax(code)
+  const areas = [p.slots, p.pack].filter(Boolean)
+  if (max > 1) {
+    for (const area of areas) {
+      for (const s of area) {
+        if (n <= 0) break
+        if (s && s.code === code && s.n < max) {
+          const take = Math.min(n, max - s.n)
+          if (it.perish) s.fresh = ((s.fresh ?? 1) * s.n + fresh * take) / (s.n + take)
+          s.n += take
+          n -= take
+        }
+      }
+    }
+  }
+  for (const area of areas) {
+    for (let i = 0; i < area.length; i++) {
+      if (n <= 0) break
+      if (!area[i]) {
+        const take = Math.min(n, max)
+        area[i] = { code, n: take }
+        if (it.perish) area[i].fresh = fresh
+        if (dur != null) area[i].dur = dur
+        else if (it.uses) area[i].dur = it.uses
+        else if (it.burn) area[i].dur = it.burn
+        else if (it.armor) area[i].dur = it.armor
+        n -= take
+      }
+    }
+  }
+  invDirty = true
+  if (n > 0 && isHostRole()) dropLoot(p.x + randInt(-20, 20), p.y + randInt(10, 26), code, n, fresh)
+}
+function hasCost(p, cost) {
+  return Object.entries(cost).every(([code, n]) => countItem(p, code) >= n)
+}
+function payCost(p, cost) {
+  Object.entries(cost).forEach(([code, need]) => {
+    let n = need
+    ;[p.slots, p.pack].filter(Boolean).forEach((area) => {
+      for (let i = 0; i < area.length && n > 0; i++) {
+        const s = area[i]
+        if (s && s.code === code) {
+          const take = Math.min(n, s.n)
+          s.n -= take
+          n -= take
+          if (s.n <= 0) area[i] = null
+        }
+      }
+    })
+  })
+  invDirty = true
+}
+function slotArea(p, area) {
+  return area === 'pack' ? p.pack : p.slots
+}
+// 保鲜阶段：>0.5 新鲜 / >0.2 陈旧（效果打 75 折）/ 其余腐坏（饥饿减半、回血归零）
+function freshStage(s) {
+  const f = s.fresh ?? 1
+  if (f > 0.5) return { mult: 1, hpOk: true, label: '' }
+  if (f > 0.2) return { mult: 0.75, hpOk: true, label: '（陈旧）' }
+  return { mult: 0.5, hpOk: false, label: '（发馊）' }
+}
+// 库存计时：食物腐烂三段 → 腐烂物
+function perishTick(p, dt) {
+  ;[p.slots, p.pack].filter(Boolean).forEach((area) => {
+    for (let i = 0; i < area.length; i++) {
+      const s = area[i]
+      if (!s) continue
+      const it = ITEMS[s.code]
+      if (!it?.perish) continue
+      const before = s.fresh ?? 1
+      s.fresh = before - dt / (it.perish * DAY_LEN)
+      if (s.fresh <= 0) {
+        area[i] = { code: 'rot', n: s.n }
+        ptip(p, `${it.name}腐烂了…`)
+        invDirty = true
+      } else if ((before > 0.5) !== (s.fresh > 0.5) || (before > 0.2) !== (s.fresh > 0.2)) {
+        invDirty = true
+      }
+    }
+  })
+}
+// 装备：从格子穿上（原装备回格子），背包附带 8 格
+function equipFromSlot(p, area, i) {
+  const arr = slotArea(p, area)
+  const s = arr[i]
+  if (!s) return
+  const it = ITEMS[s.code]
+  if (!it?.equip) return
+  const slotName = it.equip
+  const old = p.equip[slotName]
+  arr[i] = null
+  if (old) {
+    if (ITEMS[old.code]?.pack) spillPack(p)
+    arr[i] = { code: old.code, n: 1, dur: old.dur }
+  } else if (p.equip[slotName]?.code && ITEMS[p.equip[slotName].code]?.pack) {
+    spillPack(p)
+  }
+  p.equip[slotName] = { code: s.code, dur: s.dur ?? (it.uses || it.burn || it.armor || 0) }
+  if (it.pack && !p.pack) p.pack = makeSlots(TUNE.packSlots)
+  if (!it.pack && slotName === 'body' && old && ITEMS[old.code]?.pack) {
+    // 已在 spillPack 处理
+  }
+  invDirty = true
+  ptip(p, `装备了${it.name}`)
+}
+function unequipSlot(p, slotName) {
+  const eq = p.equip[slotName]
+  if (!eq) return
+  if (ITEMS[eq.code]?.pack) spillPack(p)
+  p.equip[slotName] = null
+  addItem(p, eq.code, 1, 1, eq.dur)
+  invDirty = true
+}
+// 卸背包：先把附加格里的东西倒回主格/地面
+function spillPack(p) {
+  if (!p.pack) return
+  const items = p.pack.filter(Boolean)
+  p.pack = null
+  items.forEach((s) => addItem(p, s.code, s.n, s.fresh ?? 1, s.dur))
+}
+function breakEquip(p, slotName, text) {
+  const eq = p.equip[slotName]
+  if (!eq) return
+  if (ITEMS[eq.code]?.pack) spillPack(p)
+  p.equip[slotName] = null
+  invDirty = true
+  ptip(p, text)
+}
+function handItem(p) {
+  return p.equip.hand ? ITEMS[p.equip.hand.code] : null
+}
+function weaponDmg(p) {
+  return handItem(p)?.dmg || TUNE.fistDmg
+}
+// 武器耐久（矛类按次损耗；工具当武器不掉耐久，官方规则）
+function useWeaponDur(p) {
+  const eq = p.equip.hand
+  if (!eq) return
+  const it = ITEMS[eq.code]
+  if (!it.uses || it.tool) return
+  eq.dur -= 1
+  invDirty = true
+  if (eq.dur <= 0) breakEquip(p, 'hand', `${it.name}用坏了！`)
+}
+function useToolDur(p) {
+  const eq = p.equip.hand
+  if (!eq) return
+  eq.dur -= 1
+  invDirty = true
+  if (eq.dur <= 0) breakEquip(p, 'hand', `${ITEMS[eq.code].name}用坏了！`)
+}
+// 承伤管线：护甲减免 → 扣血 → 死亡
+function damagePlayer(p, dmg, label) {
+  if (p.dead) return
+  let best = null
+  let bestSlot = ''
+  ;['body', 'head'].forEach((sl) => {
+    const eq = p.equip[sl]
+    const it = eq && ITEMS[eq.code]
+    if (it?.absorb && (!best || it.absorb > ITEMS[best.code].absorb)) {
+      best = eq
+      bestSlot = sl
+    }
+  })
+  let real = dmg
+  if (best) {
+    const it = ITEMS[best.code]
+    real = dmg * (1 - it.absorb)
+    best.dur -= dmg * it.absorb
+    invDirty = true
+    if (best.dur <= 0) breakEquip(p, bestSlot, `${it.name}碎裂了！`)
+  }
+  p.hp = Math.max(0, p.hp - real)
+  if (label && real >= 25) ptip(p, label)
+  if (p.hp <= 0) die(p)
+}
+function die(p) {
+  if (p.dead) return
+  if (callHandled(modRt, 'onPlayerDeath', gCtx, p)) return
+  p.dead = true
+  p.fallT = 0
+  p.target = null
+  ptip(p, '你死了……')
+  if (!coop) {
+    gameOver()
+    return
+  }
+  if (p === player) ghostMode.value = true
+  if (isHostRole() && players.every((q) => q.dead)) {
+    coop.send('starve_over', { score: player?.score || 0 })
+    gameOver()
+  }
+}
+function gameOver() {
+  dead.value = true
+  ghostMode.value = false
+  deathStats.value = { day: day.value, score: player?.score || 0, kills: totalKills() }
+  playing.value = false
+  loop.stop()
+  syncHud(true)
+  draw()
+  setTimeout(() => emit('end', { score: player?.score || 0 }), 2600)
+}
+
+// =====================================================================
+// 世界构建
+// =====================================================================
+function makeEnt(type, x, y, extra = {}) {
+  const conf = RES[type] || DECOR[type] || { size: 16 }
+  const e = {
+    id: eid++, type, x, y,
+    size: conf.size || 16,
+    hits: conf.hits || 0, left: conf.hits || 0,
+    tool: conf.tool || '', drops: conf.drops || null,
+    regrow: conf.regrow || 0, regrowT: 0, stub: false,
+    vanish: !!conf.vanish, mobile: !!conf.mobile, nest: !!conf.nest,
+    struct: !!conf.struct, pot: !!conf.pot, lurk: !!conf.lurk,
+    solid: !!conf.solid, loot: !!conf.loot,
+    hp: conf.hp || 0, maxHp: conf.hp || 0,
+    deco: !RES[type],
+    shake: 0, state: '', uses: 0, ...extra,
+  }
+  if (type === 'trap') e.state = 'armed'
+  if (type === 'crockpot') { e.ing = []; e.cookT = 0; e.dish = '' ; e.state = 'idle' }
+  if (type === 'tentacle') { e.state = 'lurk'; e.atkT = 0; e.cd = 0; e.dir = 1 }
+  if (type === 'rabbit') { e.vx = 0; e.vy = 0; e.dir = 1; e.hop = Math.random() * 7; e.flee = false; e.wanderT = 0 }
+  if (type === 'rabbithole') { e.respawnT = 0; e.rabbitId = 0 }
+  if (type === 'beehive') e.beeCd = 0
+  if (type === 'pighouse') { e.pigId = 0; e.respawnT = 0 }
+  modRt.entKinds[type]?.init?.(e)
+  return e
+}
+function addEntity(type, x, y, extra) {
+  const e = makeEnt(type, x, y, extra)
+  entities.push(e)
+  markAdded(e)
+  return e
+}
+function removeEntity(e) {
+  entities = entities.filter((x) => x !== e)
+  markRemoved(e)
+}
+function dropLoot(x, y, code, n, fresh = 1) {
+  const spot = findLandNear(tiles, x, y, 0, 18)
+  return addEntity('loot', spot.x, spot.y, { code, n, fresh })
+}
+function spawnMob(kind, x, y, extra = {}) {
+  const conf = MON[kind]
+  const m = {
+    id: mid++, kind, x, y, hp: conf.hp, cd: 0, shake: 0,
+    bob: Math.random() * 7, dir: 1, moving: false,
+    state: kind === 'treeguard' || kind === 'deerclops' ? 'chase' : '',
+    t: 0, awayT: 0, wanderT: 0, loyalT: 0, angryT: 0, life: 15,
+    ...extra,
+  }
+  monsters.push(m)
+  callHook(modRt, 'onMobSpawn', gCtx, m)
+  return m
+}
+function removeMob(m) {
+  monsters = monsters.filter((x) => x !== m)
+}
+function killMob(m, credit) {
+  removeMob(m)
+  const conf = MON[m.kind]
+  if (kills[m.kind] !== undefined) kills[m.kind]++
+  else kills.other++
+  if (credit) {
+    addScore(conf.score, credit)
+    if (m.kind === 'shadow') {
+      credit.san = Math.min(CAP.san, credit.san + TUNE.shadowKillSan)
+      ptip(credit, `驱散了暗影 · 理智 +${TUNE.shadowKillSan}`)
+    } else {
+      ptip(credit, `击杀了${conf.name}`)
+    }
+  }
+  ;(MOB_DROPS[m.kind] || []).forEach(([prob, code, n]) => {
+    if (Math.random() < prob) dropLoot(m.x, m.y, code, n)
+  })
+  if (m.kind === 'deerclops') tip('独眼巨鹿倒下了！它掉落了眼球与大肉')
+}
+// 巨鹿拆家：建筑损毁并崩出部分材料
+function smashStructure(e) {
+  tip(`${NAMES[e.type] || '建筑'}被独眼巨鹿砸毁了！`)
+  const refund = { sciencemachine: { rock: 2, log: 2 }, alchemyengine: { rock: 2, gold: 2 }, crockpot: { rock: 3 }, pighouse: { pigskin: 1, log: 2 } }[e.type]
+  if (refund) Object.entries(refund).forEach(([code, n]) => dropLoot(e.x, e.y, code, n))
+  removeEntity(e)
+  shake(6)
+}
+function spawnNestSpiders(nest, n) {
+  for (let i = 0; i < n; i++) {
+    const spot = findLandNear(tiles, nest.x, nest.y, 20, 60)
+    spawnMob('spider', spot.x, spot.y, { nest })
+  }
+}
+function spawnPig(house) {
+  const spot = findLandNear(tiles, house.x, house.y, 30, 60)
+  const m = spawnMob('pig', spot.x, spot.y, { home: { x: house.x, y: house.y + 20 }, houseId: house.id })
+  house.pigId = m.id
+  return m
+}
+function spawnRabbit(hole) {
+  const spot = findLandNear(tiles, hole.x, hole.y, 10, 40)
+  const r = addEntity('rabbit', spot.x, spot.y, { hole: hole.id })
+  hole.rabbitId = r.id
+  return r
+}
+// 生成整个世界（单人 / 主机）
+function genWorldAll() {
+  const isle = genIsland()
+  tiles = isle.tiles
+  road = isle.road
+  const plan = planEntities(tiles, road)
+  entities = plan.placed.map(({ type, x, y }) => makeEnt(type, x, y))
+  decoSpots = genDecor(tiles)
+  explored = new Uint8Array(GW * GH)
+  if (modRt.flags.noFog) explored.fill(1)
+  monsters = []
+  fires = []
+  entities.filter((e) => e.type === 'spidernest').forEach((n) => spawnNestSpiders(n, 2))
+  entities.filter((e) => e.type === 'pighouse').forEach((h) => spawnPig(h))
+  entities.filter((e) => e.type === 'rabbithole').forEach((h) => spawnRabbit(h))
+  plan.herds.forEach((h) => {
+    const cnt = randInt(4, 6)
+    for (let i = 0; i < cnt; i++) {
+      const spot = findLandNear(tiles, h.x, h.y, 20, 140)
+      spawnMob('beefalo', spot.x, spot.y, { home: h })
+    }
+  })
+  plan.frogs.forEach((f) => spawnMob('frog', f.x, f.y))
+  callHook(modRt, 'onWorldGen', gCtx)
+}
+
+// =====================================================================
+// 光照 / 温度辅助
+// =====================================================================
+function fireRadius(f) {
+  const r = 88 + 70 * Math.min(1, f.ttl / 45)
+  return f.pit ? r * 1.15 : r
+}
+function litAt(x, y) {
+  if (phaseName !== 'night') return true
+  for (const f of fires) {
+    if (f.ttl > 0 && Math.hypot(f.x - x, f.y - y) < fireRadius(f)) return true
+  }
+  for (const p of players) {
+    if (!p.dead && p.equip.hand?.code === 'torch' && Math.hypot(p.x - x, p.y - y) < 105) return true
+  }
+  return false
+}
+// 附近火源热度 0~1（体温用；手持火把算 0.35）
+function heatAt(p) {
+  let h = 0
+  for (const f of fires) {
+    if (f.ttl <= 0) continue
+    const d = Math.hypot(f.x - p.x, f.y - p.y)
+    if (d < 130) h = Math.max(h, 1 - d / 130)
+  }
+  if (p.equip.hand?.code === 'torch') h = Math.max(h, 0.35)
+  return h
+}
+
+// =====================================================================
+// 玩家交互（宿主权威执行；客机通过输入消息转发）
+// =====================================================================
+function swingAct(p, act) {
+  p.swing = 1
+  p.act = act
+}
+function playerSpeed(p) {
+  let s = p.dead ? 150 : p.speed
+  if (!p.dead && onRoad(road, p.x, p.y)) s *= TUNE.roadSpeed
+  if (p.freezeT > 0) s *= 0.6
+  return s
+}
+function tryMovePlayer(p, dx, dy) {
+  if (p.dead) {
+    // 幽灵不受地形限制
+    p.x = Math.max(20, Math.min(WORLD.w - 20, p.x + dx))
+    p.y = Math.max(20, Math.min(WORLD.h - 20, p.y + dy))
+    return
+  }
+  moveMob(p, dx, dy, gCtx)
+  p.x = Math.max(20, Math.min(WORLD.w - 20, p.x))
+  p.y = Math.max(20, Math.min(WORLD.h - 20, p.y))
+}
+// 画布点击：优先怪 > 火 > 实体 > 走路
+function onCanvasClick(ev) {
+  if (!playing.value || !player || player.dead || waitingWorld.value) return
+  const rect = canvas.value.getBoundingClientRect()
+  const wxp = ((ev.clientX - rect.left) / rect.width) * canvas.value.width + camX
+  const wyp = ((ev.clientY - rect.top) / rect.height) * canvas.value.height + camY
+  let mon = null
+  let md = Infinity
+  monsters.forEach((m) => {
+    const r = m.kind === 'deerclops' ? 70 : m.kind === 'treeguard' ? 50 : m.kind === 'beefalo' ? 36 : 28
+    const d = Math.hypot(m.x - wxp, m.y - wyp)
+    if (d < r && d < md) { md = d; mon = m }
+  })
+  if (mon) return setMyTarget({ kind: 'mon', id: mon.id })
+  const f = fires.find((f2) => Math.hypot(f2.x - wxp, f2.y - wyp) < 36)
+  if (f) return setMyTarget({ kind: 'fire', id: f.fid })
+  let ent = null
+  let ed = Infinity
+  entities.forEach((e) => {
+    if (e.deco && e.type !== 'stump') return
+    if (e.stub || e.solid) return
+    const d = Math.hypot(e.x - wxp, e.y - wyp)
+    if (d < Math.max(26, e.size * 0.9) && d < ed) { ed = d; ent = e }
+  })
+  if (ent) return setMyTarget({ kind: 'ent', id: ent.id })
+  setMyTarget({ kind: 'walk', x: wxp, y: wyp })
+}
+// 设置本地目标：客机同时上报主机
+function setMyTarget(t) {
+  player.target = resolveTarget(t)
+  if (coop && !coop.isHost) coop.send('starve_input', { seat: coop.mySeat, act: { type: 'target', t } })
+}
+function resolveTarget(t) {
+  if (t.kind === 'mon') {
+    const m = monsters.find((m2) => m2.id === t.id)
+    return m ? { kind: 'mon', ref: m } : null
+  }
+  if (t.kind === 'fire') {
+    const f = fires.find((f2) => f2.fid === t.id)
+    return f ? { kind: 'fire', ref: f } : null
+  }
+  if (t.kind === 'ent') {
+    const e = entities.find((e2) => e2.id === t.id)
+    return e ? { kind: 'ent', ref: e } : null
+  }
+  return { kind: 'walk', x: t.x, y: t.y }
+}
+// 空格：就近采集（掉落物 / 陷阱 / 好锅 / 资源）
+function doGather() {
+  if (!player || player.dead) return
+  let best = null
+  let bd = 130
+  entities.forEach((e) => {
+    if (e.stub) return
+    const ok = e.loot || (e.type === 'trap' && e.state === 'caught') || (e.pot && e.state === 'done') ||
+      (e.drops && !e.mobile) || (e.type === 'stump') || modRt.entKinds[e.type]?.interact
+    if (!ok) return
+    const d = Math.hypot(e.x - player.x, e.y - player.y)
+    if (d < bd) { bd = d; best = e }
+  })
+  if (best) setMyTarget({ kind: 'ent', id: best.id })
+}
+// F：就近攻击敌对目标（不含猪牛，防误伤）
+function doAttack() {
+  if (!player || player.dead) return
+  let best = null
+  let bd = 170
+  monsters.forEach((m) => {
+    if (m.kind === 'pig' || m.kind === 'beefalo' || modRt.mobKinds[m.kind]?.friendly) return
+    const d = Math.hypot(m.x - player.x, m.y - player.y)
+    if (d < bd) { bd = d; best = { kind: 'mon', id: m.id } }
+  })
+  entities.forEach((e) => {
+    if (!(e.mobile || e.nest || e.lurk)) return
+    if (e.lurk && e.state !== 'up') return
+    const d = Math.hypot(e.x - player.x, e.y - player.y)
+    if (d < bd) { bd = d; best = { kind: 'ent', id: e.id } }
+  })
+  if (best) setMyTarget(best)
+}
+// 追目标 + 到位执行（主机对所有玩家生效）
+function pursueTarget(p, dt) {
+  const t = p.target
+  if (!t) return
+  if (t.kind === 'walk') {
+    const d = Math.hypot(t.x - p.x, t.y - p.y)
+    if (d < 6) { p.target = null; return }
+    stepToward(p, t.x, t.y, dt)
+    return
+  }
+  const ref = t.ref
+  const alive = t.kind === 'mon' ? monsters.includes(ref) : t.kind === 'fire' ? fires.includes(ref) : entities.includes(ref)
+  if (!alive) { p.target = null; return }
+  const reach = t.kind === 'mon'
+    ? (ref.kind === 'deerclops' ? 96 : ref.kind === 'treeguard' ? 68 : 34)
+    : t.kind === 'fire' ? 60 : ref.lurk ? 64 : Math.max(40, (ref.size || 20) + 18)
+  const d = Math.hypot(ref.x - p.x, ref.y - p.y)
+  if (d > reach) {
+    stepToward(p, ref.x, ref.y, dt)
+    return
+  }
+  p.dir = ref.x >= p.x ? 1 : -1
+  if (t.kind === 'fire') { feedFire(p, ref); p.target = null; return }
+  // 友方 mod 生物：交互而非攻击（如切斯特）
+  if (t.kind === 'mon') {
+    const mk = modRt.mobKinds[ref.kind]
+    if (mk?.interact) {
+      mk.interact(p, ref, gCtx)
+      p.target = null
+      return
+    }
+  }
+  if (p.hitTimer > 0) return
+  // 采集类动作吃 gatherMul 加速（战斗与巢穴不加速）
+  const gatherable = t.kind === 'ent' && ref.drops && !ref.mobile && !ref.nest
+  p.hitTimer = TUNE.attackGap * (gatherable ? TUNE.gatherMul : 1)
+  if (t.kind === 'mon') hitMonster(p, ref)
+  else hitEntity(p, ref)
+}
+function stepToward(p, tx, ty, dt) {
+  const d = Math.hypot(tx - p.x, ty - p.y) || 1
+  const s = playerSpeed(p)
+  tryMovePlayer(p, ((tx - p.x) / d) * s * dt, ((ty - p.y) / d) * s * dt)
+  p.dir = tx > p.x ? 1 : -1
+  p.walking = true
+}
+// 攻击生物
+function hitMonster(p, m) {
+  swingAct(p, 'attack')
+  const dmg = weaponDmg(p)
+  useWeaponDur(p)
+  m.hp -= dmg
+  m.shake = 0.25
+  if (m.kind === 'pig') {
+    m.loyalT = 0
+    m.owner = null
+    m.angryT = 9
+    m.angryAt = p
+  }
+  if (m.kind === 'beefalo') {
+    monsters.forEach((q) => {
+      if (q.kind === 'beefalo' && Math.hypot(q.x - m.x, q.y - m.y) < 320) {
+        q.angryT = 9
+        q.angryAt = p
+      }
+    })
+    ptip(p, '牛群被激怒了！')
+  }
+  if (m.hp <= 0) killMob(m, p)
+}
+// 与实体交互（采集/攻击/拾取/建筑）
+function hitEntity(p, e) {
+  const modEnt = modRt.entKinds[e.type]
+  if (modEnt?.interact) {
+    modEnt.interact(p, e, gCtx)
+    p.target = null
+    return
+  }
+  if (e.loot) {
+    addItem(p, e.code, e.n, e.fresh ?? 1)
+    ptip(p, `捡起 ${ITEMS[e.code]?.name || ''} x${e.n}`)
+    removeEntity(e)
+    p.target = null
+    return
+  }
+  if (e.type === 'trap') {
+    if (e.state === 'caught') {
+      addItem(p, 'morsel', 1)
+      e.uses = (e.uses || 0) + 1
+      addScore(8, p)
+      if (e.uses >= (ITEMS.trap.uses || 8)) {
+        removeEntity(e)
+        ptip(p, '捉到兔子 · 小肉 +1 · 陷阱用坏了')
+      } else {
+        e.state = 'armed'
+        markDirty(e)
+        ptip(p, '捉到兔子 · 小肉 +1')
+      }
+    } else {
+      addItem(p, 'trap', 1, 1)
+      removeEntity(e)
+      ptip(p, '收回了陷阱')
+    }
+    p.target = null
+    return
+  }
+  if (e.pot) {
+    if (e.state === 'done') {
+      addItem(p, e.dish, 1, 1)
+      ptip(p, `取出了${ITEMS[e.dish]?.name || '料理'}！`)
+      e.state = 'idle'
+      e.dish = ''
+      e.ing = []
+      markDirty(e)
+    } else if (p === player) {
+      potOpenId = e.id
+    }
+    p.target = null
+    return
+  }
+  if (e.struct) {
+    if (p === player) {
+      const t = RES[e.type]?.techTier
+      tip(t ? `${NAMES[e.type]}：靠近可解锁 ${t} 级科技配方` : `${NAMES[e.type]}`)
+    }
+    p.target = null
+    return
+  }
+  if (e.type === 'stump') {
+    if (handItem(p)?.tool !== 'dig') {
+      ptip(p, '需要铲子才能挖树桩')
+      p.target = null
+      return
+    }
+    swingAct(p, 'dig')
+    useToolDur(p)
+    addItem(p, 'log', 1)
+    ptip(p, '挖出树桩 · 木头 +1')
+    removeEntity(e)
+    p.target = null
+    return
+  }
+  // 可攻击实体（兔子 / 蜘蛛巢 / 蜂巢 / 触手）
+  if (e.hp > 0 && (e.mobile || e.nest || e.lurk)) {
+    swingAct(p, 'attack')
+    const dmg = weaponDmg(p)
+    useWeaponDur(p)
+    e.hp -= dmg
+    e.shake = 0.25
+    markDirty(e)
+    if (e.type === 'beehive' && e.beeCd <= 0) {
+      e.beeCd = 3
+      const n = randInt(2, 3)
+      for (let i = 0; i < n; i++) {
+        const spot = findLandNear(tiles, e.x, e.y, 10, 40)
+        spawnMob('bee', spot.x, spot.y, { angryAt: p, life: 16 })
+      }
+      ptip(p, '惹恼了蜂巢！')
+    }
+    if (e.hp <= 0) killEntity(p, e)
+    return
+  }
+  // 资源采集
+  if (!e.drops) { p.target = null; return }
+  if (e.tool) {
+    const need = e.tool === 'axe' ? 'axe' : 'pick'
+    if (handItem(p)?.tool !== need) {
+      ptip(p, `需要${need === 'axe' ? '斧头' : '镐子'}（装备到手上）`)
+      p.target = null
+      return
+    }
+  }
+  swingAct(p, e.tool === 'axe' ? 'chop' : e.tool === 'pick' ? 'mine' : 'chop')
+  if (e.tool) useToolDur(p)
+  e.left -= 1
+  e.shake = 0.2
+  if (e.left > 0) { markDirty(e); return }
+  // 采尽结算
+  Object.entries(e.drops).forEach(([code, n]) => {
+    const cnt = code === 'gold' ? randInt(1, n) : n
+    addItem(p, code, cnt)
+    addScore(cnt * 2, p)
+  })
+  ptip(p, Object.entries(e.drops).map(([code, n]) => `${ITEMS[code]?.name} +${n}`).join(' '))
+  callHook(modRt, 'onGather', gCtx, p, e)
+  if (e.type === 'flower') {
+    p.san = Math.min(CAP.san, p.san + TUNE.flowerSan)
+    ptip(p, `采下野花 · 理智 +${TUNE.flowerSan}`)
+  }
+  if (e.type === 'tree') {
+    treesChopped++
+    removeEntity(e)
+    addEntity('stump', e.x, e.y)
+    maybeTreeguard(p, e)
+  } else if (e.type === 'rock' || e.type === 'goldrock') {
+    removeEntity(e)
+    addEntity('rubble', e.x, e.y)
+  } else if (e.vanish) {
+    removeEntity(e)
+  } else if (e.regrow) {
+    e.stub = true
+    e.regrowT = e.regrow * (0.8 + Math.random() * 0.4)
+    markDirty(e)
+  } else {
+    removeEntity(e)
+  }
+  p.target = null
+}
+function killEntity(p, e) {
+  if (e.type === 'rabbit') {
+    dropLoot(e.x, e.y, 'morsel', 1)
+    addScore(8, p)
+    const hole = entities.find((h) => h.id === e.hole)
+    if (hole) { hole.rabbitId = 0; hole.respawnT = 40 }
+  } else if (e.type === 'spidernest') {
+    dropLoot(e.x, e.y, 'silk', 4)
+    dropLoot(e.x, e.y, 'spidergland', 1)
+    addScore(30, p)
+    ptip(p, '捣毁了蜘蛛巢！')
+  } else if (e.type === 'beehive') {
+    dropLoot(e.x, e.y, 'honey', 3)
+    addScore(20, p)
+    ptip(p, '捣毁了蜂巢，蜂蜜洒了一地')
+  } else if (e.type === 'tentacle') {
+    dropLoot(e.x, e.y, 'monstermeat', 1)
+    if (Math.random() < 0.5) dropLoot(e.x, e.y, 'tentaclespike', 1)
+    addScore(40, p)
+    ptip(p, '斩杀了触手！')
+  }
+  removeEntity(e)
+  p.target = null
+}
+function maybeTreeguard(p, e) {
+  if (treesChopped >= 5 && Math.random() < 0.06 + treesChopped * 0.004) {
+    treesChopped = 0
+    const spot = findLandNear(tiles, e.x, e.y, 100, 200)
+    spawnMob('treeguard', spot.x, spot.y)
+    tip('大地震颤——树精被你的滥伐惹怒了！')
+    shake(6)
+  }
+}
+// 添柴 / 重燃火堆
+function feedFire(p, f) {
+  const fuels = [['log', 30], ['grass', 10], ['twig', 8]]
+  for (const [code, add] of fuels) {
+    if (countItem(p, code) > 0) {
+      payCost(p, { [code]: 1 })
+      const wasOut = f.ttl <= 0
+      f.ttl = Math.min(f.max, Math.max(0, f.ttl) + add)
+      ptip(p, wasOut && f.pit ? '火堆重新燃起' : `添了把${ITEMS[code].name} · 火势更旺`)
+      return
+    }
+  }
+  ptip(p, '没有燃料（木头/草/树枝）')
+}
+// 点击物品格：吃 / 用 / 装备 / 放置
+function clickSlot(area, i) {
+  if (!player || player.dead || !playing.value) return
+  if (potOpenId) {
+    const pot = entities.find((e) => e.id === potOpenId)
+    const s = slotArea(player, area)?.[i]
+    if (pot && pot.state === 'idle' && s && ITEMS[s.code]?.food && s.code !== 'rot') {
+      if (coop && !coop.isHost) coop.send('starve_input', { seat: coop.mySeat, act: { type: 'potadd', id: potOpenId, area, i } })
+      else potAdd(player, pot, area, i)
+      return
+    }
+  }
+  if (coop && !coop.isHost) {
+    coop.send('starve_input', { seat: coop.mySeat, act: { type: 'use', area, i } })
+    return
+  }
+  useItemAt(player, area, i)
+}
+// 使用某格物品（主机侧）
+function useItemAt(p, area, i) {
+  const arr = slotArea(p, area)
+  const s = arr?.[i]
+  if (!s) return
+  const it = ITEMS[s.code]
+  if (!it) return
+  // mod 物品优先接管（锄头/种子/魔杖/回旋镖等）
+  if (callHandled(modRt, 'onUseItem', gCtx, p, s, area, i)) {
+    invDirty = true
+    return
+  }
+  if (it.equip) return equipFromSlot(p, area, i)
+  if (it.heal) {
+    if (p.hp >= CAP.hp) return ptip(p, '生命值已满')
+    p.hp = Math.min(CAP.hp, p.hp + it.heal)
+    consumeSlot(arr, i)
+    invDirty = true
+    ptip(p, `敷上${it.name} · 生命 +${it.heal}`)
+    return
+  }
+  if (it.place) {
+    // 放置陷阱
+    const spot = findLandNear(tiles, p.x + p.dir * 44, p.y + 10, 0, 20)
+    addEntity('trap', spot.x, spot.y)
+    consumeSlot(arr, i)
+    invDirty = true
+    ptip(p, '放好了陷阱，等兔子上钩吧')
+    return
+  }
+  if (it.thermal) {
+    return ptip(p, `保暖石热量 ${Math.round(s.dur ?? 0)}%（靠近火堆充热）`)
+  }
+  if (it.food) {
+    if (s.code === 'rot') return ptip(p, '这已经腐烂了，不能吃')
+    // 喂猪结盟：附近有未结盟猪人且拿的是肉
+    if (it.meatv) {
+      const pig = monsters.find((m) => m.kind === 'pig' && m.loyalT <= 20 && m.angryT <= 0 && Math.hypot(m.x - p.x, m.y - p.y) < 80)
+      if (pig) {
+        consumeSlot(arr, i)
+        invDirty = true
+        pig.loyalT = TUNE.pigLoyal
+        pig.owner = p
+        ptip(p, '猪人吃下了肉："你 朋友！"（将并肩作战一阵子）')
+        return
+      }
+    }
+    // 火边烤制
+    if (it.cook) {
+      const nearFire = fires.some((f) => f.ttl > 0 && Math.hypot(f.x - p.x, f.y - p.y) < 90)
+      if (nearFire) {
+        const fresh = s.fresh ?? 1
+        consumeSlot(arr, i)
+        addItem(p, it.cook, 1, Math.max(0.6, fresh))
+        swingAct(p, 'chop')
+        ptip(p, `烤好了${ITEMS[it.cook].name}`)
+        return
+      }
+    }
+    // 进食
+    const st = freshStage(s)
+    const f = it.food
+    p.hunger = Math.min(CAP.hunger, p.hunger + Math.max(0, f.hunger) * st.mult)
+    if (f.hp > 0 && st.hpOk) p.hp = Math.min(CAP.hp, p.hp + f.hp)
+    else if (f.hp < 0) p.hp = Math.max(1, p.hp + f.hp)
+    if (f.san) p.san = Math.max(0, Math.min(CAP.san, p.san + f.san))
+    consumeSlot(arr, i)
+    invDirty = true
+    swingAct(p, 'eat')
+    const parts = [`饥饿 +${Math.round(f.hunger * st.mult)}`]
+    if (f.hp) parts.push(`生命 ${f.hp > 0 ? '+' : ''}${st.hpOk || f.hp < 0 ? f.hp : 0}`)
+    if (f.san) parts.push(`理智 ${f.san > 0 ? '+' : ''}${f.san}`)
+    ptip(p, `吃下${it.name}${st.label} · ${parts.join(' ')}`)
+    return
+  }
+  ptip(p, `${it.name}：合成材料`)
+}
+function consumeSlot(arr, i) {
+  const s = arr[i]
+  s.n -= 1
+  if (s.n <= 0) arr[i] = null
+  invDirty = true
+}
+function unequipClick(slotName) {
+  if (!player || player.dead) return
+  if (coop && !coop.isHost) {
+    coop.send('starve_input', { seat: coop.mySeat, act: { type: 'unequip', slot: slotName } })
+    return
+  }
+  unequipSlot(player, slotName)
+}
+
+// ---- 科技与合成 ----
+function techLevel(p) {
+  let lv = 0
+  entities.forEach((e) => {
+    const t = RES[e.type]?.techTier
+    if (t && Math.hypot(e.x - p.x, e.y - p.y) < 160) lv = Math.max(lv, t)
+  })
+  return lv
+}
+function recipeAvailable(r, p) {
+  return r.tech === 0 || p.unlocked.has(r.code) || techLevel(p) >= r.tech
+}
+function doCraft(code) {
+  if (!player || player.dead) return
+  if (coop && !coop.isHost) {
+    coop.send('starve_input', { seat: coop.mySeat, act: { type: 'craft', code } })
+    return
+  }
+  craftFor(player, code)
+}
+function craftFor(p, code) {
+  const r = RECIPES.find((x) => x.code === code)
+  if (!r) return
+  if (!recipeAvailable(r, p)) return ptip(p, r.tech === 1 ? '需要靠近科学机器' : '需要靠近炼金引擎')
+  if (!hasCost(p, r.cost)) return ptip(p, '材料不足')
+  payCost(p, r.cost)
+  if (r.tech > 0 && !p.unlocked.has(r.code)) {
+    p.unlocked.add(r.code)
+    ptip(p, `原型打造成功 · ${r.name}已永久解锁`)
+  }
+  if (code === 'campfire') {
+    fires.push({ fid: fid++, x: p.x + p.dir * 40, y: p.y + 8, ttl: 50, max: 90, pit: false })
+    ptip(p, '篝火燃起来了')
+  } else if (code === 'firepit') {
+    fires.push({ fid: fid++, x: p.x + p.dir * 44, y: p.y + 8, ttl: 60, max: 150, pit: true })
+    ptip(p, '石砌火堆造好了（永久建筑）')
+  } else if (code === 'sciencemachine' || code === 'alchemyengine' || code === 'crockpot' || r.build) {
+    const spot = findLandNear(tiles, p.x + p.dir * 52, p.y, 0, 26)
+    addEntity(code, spot.x, spot.y)
+    ptip(p, `${r.name}建好了`)
+    addScore(30, p)
+  } else {
+    const it = ITEMS[code]
+    if (it?.equip && !p.equip[it.equip]) {
+      p.equip[it.equip] = { code, dur: it.uses || it.burn || it.armor || 0 }
+      if (it.pack) p.pack = makeSlots(TUNE.packSlots)
+      ptip(p, `打造并装备了${r.name}`)
+    } else {
+      addItem(p, code, 1, 1)
+      ptip(p, `打造了${r.name}`)
+    }
+  }
+  invDirty = true
+  addScore(10, p)
+}
+
+// ---- 烹饪锅 ----
+function potAdd(p, pot, area, i) {
+  if (pot.state !== 'idle' || (pot.ing?.length || 0) >= 4) return
+  const arr = slotArea(p, area)
+  const s = arr?.[i]
+  if (!s || !ITEMS[s.code]?.food || s.code === 'rot') return
+  pot.ing.push(s.code)
+  consumeSlot(arr, i)
+  markDirty(pot)
+  ptip(p, `投入${ITEMS[s.code].name}（${pot.ing.length}/4）`)
+}
+function potCookClick() {
+  if (!potOpenId) return
+  if (coop && !coop.isHost) {
+    coop.send('starve_input', { seat: coop.mySeat, act: { type: 'potcook', id: potOpenId } })
+    return
+  }
+  const pot = entities.find((e) => e.id === potOpenId)
+  if (pot) potCook(player, pot)
+}
+function potCook(p, pot) {
+  if (pot.state !== 'idle' || (pot.ing?.length || 0) < 4) return
+  pot.state = 'cook'
+  pot.cookT = TUNE.potCookTime
+  markDirty(pot)
+  ptip(p, '锅里咕嘟咕嘟炖上了……')
+}
+
+// =====================================================================
+// 每帧模拟（主机 / 单人）
+// =====================================================================
+// 生物 AI 上下文门面
+// 游戏受控上下文：生物 AI 与 mod 的统一 facade（getter 保证实时，无需手动刷新）
+const gCtx = {
+  get players() { return players },
+  get monsters() { return monsters },
+  get entities() { return entities },
+  get fires() { return fires },
+  get phase() { return phaseName },
+  get season() { return seasonNow.code },
+  get time() { return time },
+  get day() { return day.value },
+  get mon() { return MON },
+  get items() { return ITEMS },
+  get tune() { return TUNE },
+  worldW: WORLD.w, worldH: WORLD.h,
+  isLand: (x, y) => !tiles || isLand(tiles, x, y),
+  litAt: (x, y) => litAt(x, y),
+  damagePlayer: (p, dmg, label) => damagePlayer(p, dmg, label),
+  addEntity: (type, x, y, extra) => addEntity(type, x, y, extra),
+  removeEntity: (e) => removeEntity(e),
+  addLoot: (x, y, code, n) => dropLoot(x, y, code, n),
+  removeMob: (m) => removeMob(m),
+  killMob: (m, credit) => killMob(m, credit),
+  smashStructure: (e) => smashStructure(e),
+  tip: (t) => tip(t),
+  ptip: (p, t) => ptip(p, t),
+  shake: (a) => shake(a),
+  // ---- 以下为 mod 专用能力 ----
+  addItem: (p, code, n = 1, fresh = 1, dur = null) => addItem(p, code, n, fresh, dur),
+  countItem: (p, code) => countItem(p, code),
+  consumeAt: (p, area, i) => { const arr = slotArea(p, area); if (arr?.[i]) consumeSlot(arr, i) },
+  hasCost: (p, cost) => hasCost(p, cost),
+  payCost: (p, cost) => payCost(p, cost),
+  spawnMob: (kind, x, y, extra) => spawnMob(kind, x, y, extra),
+  dropLoot: (x, y, code, n, fresh) => dropLoot(x, y, code, n, fresh),
+  addScore: (n, p) => addScore(n, p),
+  damageMob: (m, dmg, credit) => {
+    m.hp -= dmg
+    m.shake = 0.25
+    if (m.hp <= 0) killMob(m, credit)
+  },
+  markDirty: (e) => markDirty(e),
+  findLand: (x, y, min, max) => findLandNear(tiles, x, y, min, max),
+  rand: (a, b) => randInt(a, b),
+  moveToward: (m, x, y, speed, dt) => {
+    const d = Math.hypot(x - m.x, y - m.y) || 1
+    moveMob(m, ((x - m.x) / d) * speed * dt, ((y - m.y) / d) * speed * dt, gCtx)
+    m.dir = x > m.x ? 1 : x < m.x ? -1 : m.dir
+    m.moving = true
+  },
+  swing: (p, act) => swingAct(p, act),
+  heatAt: (p) => heatAt(p),
+  me: () => player,
+  isHost: () => isHostRole(),
+  invalidate: () => { invDirty = true },
+}
+
+function updateDayNight(dt) {
+  dayTime += dt
+  if (dayTime >= DAY_LEN) {
+    dayTime -= DAY_LEN
+    day.value += 1
+    addScore(100)
+    onNewDay()
+  }
+  phaseName = phaseOf(seasonNow.code, dayTime)
+  if (tickWeather(wx, dt)) tip('雨停了')
+  // 火焰燃烧（雨天更快）
+  const burn = dt * (wx.type === 'rain' ? 1.6 : 1)
+  fires.forEach((f) => { if (f.ttl > 0) f.ttl -= burn })
+  fires = fires.filter((f) => {
+    if (f.pit) { f.ttl = Math.max(0, f.ttl); return true }
+    if (f.ttl <= 0) {
+      dropLoot(f.x, f.y, 'ash', 1)
+      return false
+    }
+    return true
+  })
+}
+function onNewDay() {
+  const prev = seasonNow
+  seasonNow = seasonOf(day.value)
+  if (seasonNow.code !== prev.code) {
+    seasonBanner.value = `${seasonNow.name}季来临`
+    setTimeout(() => (seasonBanner.value = ''), 4200)
+    tip(seasonNow.code === 'winter' ? '冬季来临：注意保暖，植物停止生长' : `${seasonNow.name}季来临`)
+    if (seasonNow.code === 'winter') deer = { spawned: false, warnT: 0 }
+  }
+  wx = rollWeather(seasonNow.code)
+  if (wx.type === 'rain') tip('下雨了……篝火消耗更快，理智缓缓流失')
+  // 猎犬计划
+  if (day.value === houndPlan.nextDay) {
+    houndPlan.at = DAY_LEN * (0.2 + Math.random() * 0.5)
+    houndPlan.doneToday = false
+  }
+  // 生物每日补充
+  entities.filter((e) => e.type === 'spidernest').forEach((n) => {
+    const cur = monsters.filter((m) => m.kind === 'spider' && m.nest === n).length
+    if (cur < 3) spawnNestSpiders(n, Math.min(2, 3 - cur))
+  })
+  entities.filter((e) => e.type === 'pighouse').forEach((h) => {
+    if (!monsters.some((m) => m.kind === 'pig' && m.houseId === h.id)) spawnPig(h)
+  })
+  const frogCount = monsters.filter((m) => m.kind === 'frog').length
+  if (frogCount < 6) {
+    for (let i = 0; i < 2; i++) {
+      const marsh = []
+      for (let ti = 0; ti < tiles.length; ti++) if (tiles[ti] === 6) marsh.push(ti)
+      if (marsh.length) {
+        const ti = marsh[randInt(0, marsh.length - 1)]
+        spawnMob('frog', (ti % GW) * TILE + 40, Math.floor(ti / GW) * TILE + 40)
+      }
+    }
+  }
+  callHook(modRt, 'onNewDay', gCtx)
+  if (!coop) { doSave(false); saveTimer = 0 }
+}
+// 猎犬波 + 独眼巨鹿排程
+function updateThreats(dt) {
+  // 猎犬
+  if (day.value === houndPlan.nextDay && !houndPlan.doneToday && dayTime >= houndPlan.at && houndPlan.warnT <= 0) {
+    if (callAllows(modRt, 'onSpawnWave', gCtx, 'hound')) {
+      houndPlan.warnT = 6
+      tip('你听见了远处的猎犬嚎叫……')
+    } else {
+      houndPlan.doneToday = true
+      houndPlan.nextDay = day.value + randInt(4, 7)
+    }
+  }
+  if (houndPlan.warnT > 0) {
+    houndPlan.warnT -= dt
+    if (houndPlan.warnT <= 0) {
+      houndPlan.doneToday = true
+      houndPlan.nextDay = day.value + Math.max(2, Math.round(randInt(4, 7) * TUNE.houndGapMul))
+      const n = Math.min(2 + Math.floor(day.value / 10), 6) + Math.max(0, players.filter((p) => !p.dead).length - 1) + TUNE.houndExtra
+      const targetP = players.find((p) => !p.dead) || player
+      for (let i = 0; i < n; i++) {
+        const spot = findLandNear(tiles, targetP.x, targetP.y, 420, 620)
+        const kind = seasonNow.code === 'winter' && i % 2 === 0 ? 'icehound' : 'hound'
+        spawnMob(kind, spot.x, spot.y)
+      }
+      tip('猎犬扑过来了！')
+    }
+  }
+  // 巨鹿：冬季第 8 天起
+  if (seasonNow.code === 'winter' && seasonNow.dayIn >= 8 && !deer.spawned && deer.warnT <= 0 && !monsters.some((m) => m.kind === 'deerclops')
+    && callAllows(modRt, 'onSpawnWave', gCtx, 'deerclops')) {
+    deer.warnT = 15
+    tip('大地在颤抖，远处传来沉重的呼吸声……')
+    shake(3)
+  }
+  if (deer.warnT > 0) {
+    deer.warnT -= dt
+    if (deer.warnT <= 0 && !deer.spawned) {
+      deer.spawned = true
+      const targetP = players.find((p) => !p.dead) || player
+      const spot = findLandNear(tiles, targetP.x, targetP.y, 480, 680)
+      spawnMob('deerclops', spot.x, spot.y)
+      tip('独眼巨鹿降临了！保护你的营地！')
+      shake(8)
+    }
+  }
+  // 暗影怪：理智不足才浮现（官方机制）
+  players.forEach((p) => {
+    if (p.dead || p.san >= 80) return
+    const cap = p.san < 40 ? 2 : 1
+    const cur = monsters.filter((m) => m.kind === 'shadow').length
+    if (cur < cap * players.filter((q) => !q.dead).length && Math.random() < dt * 0.25 * (1 - p.san / 100)) {
+      const spot = findLandNear(tiles, p.x, p.y, 240, 380)
+      spawnMob('shadow', spot.x, spot.y)
+    }
+  })
+  if (monsters.some((m) => m.kind === 'shadow') && players.every((p) => p.dead || p.san >= 95)) {
+    monsters = monsters.filter((m) => m.kind !== 'shadow')
+  }
+}
+function updatePlayers(dt) {
+  players.forEach((p) => {
+    p.walking = false
+    if (p.swing > 0) p.swing = Math.max(0, p.swing - dt * 3.4)
+    if (p.hitTimer > 0) p.hitTimer -= dt
+    if (p.freezeT > 0) p.freezeT -= dt
+    if (p.dead) {
+      if (p.fallT < 1) p.fallT = Math.min(1, p.fallT + dt * 1.4)
+      if (!coop) return
+    }
+    // 键盘输入（本机玩家实时读取；客机玩家用其上报值）
+    let dx = p.input.dx
+    let dy = p.input.dy
+    if (p === player) {
+      dx = (keys.has('ArrowRight') || keys.has('d') ? 1 : 0) - (keys.has('ArrowLeft') || keys.has('a') ? 1 : 0)
+      dy = (keys.has('ArrowDown') || keys.has('s') ? 1 : 0) - (keys.has('ArrowUp') || keys.has('w') ? 1 : 0)
+      p.input.dx = dx
+      p.input.dy = dy
+    }
+    if (dx || dy) {
+      p.target = null
+      const len = Math.hypot(dx, dy) || 1
+      const s = playerSpeed(p)
+      tryMovePlayer(p, (dx / len) * s * dt, (dy / len) * s * dt)
+      if (dx) p.dir = dx > 0 ? 1 : -1
+      p.walking = true
+    } else if (!p.dead) {
+      pursueTarget(p, dt)
+    }
+    if (p.walking) p.walkT += dt
+  })
+}
+function updateEntities(dt) {
+  const winter = seasonNow.code === 'winter'
+  entities.slice().forEach((e) => {
+    if (e.shake > 0) e.shake -= dt
+    // 再生（冬季暂停）
+    if (e.stub && e.regrowT > 0 && !winter) {
+      e.regrowT -= dt
+      if (e.regrowT <= 0) {
+        e.stub = false
+        e.left = e.hits
+        markDirty(e)
+      }
+    }
+    const modEnt = modRt.entKinds[e.type]
+    if (modEnt) { modEnt.update?.(e, dt, gCtx) }
+    else if (e.type === 'rabbit') updateRabbit(e, dt)
+    else if (e.type === 'rabbithole') {
+      if (e.respawnT > 0 && phaseName === 'day') {
+        e.respawnT -= dt
+        if (e.respawnT <= 0 && !e.rabbitId) spawnRabbit(e)
+      }
+    } else if (e.type === 'trap' && e.state === 'armed') {
+      const r = entities.find((r2) => r2.type === 'rabbit' && Math.hypot(r2.x - e.x, r2.y - e.y) < 22)
+      if (r) {
+        removeEntity(r)
+        const hole = entities.find((h) => h.id === r.hole)
+        if (hole) { hole.rabbitId = 0; hole.respawnT = 45 }
+        e.state = 'caught'
+        e.shake = 0.5
+        markDirty(e)
+      }
+    } else if (e.type === 'beehive') {
+      if (e.beeCd > 0) e.beeCd -= dt
+    } else if (e.type === 'tentacle') updateTentacle(e, dt)
+    else if (e.pot && e.state === 'cook') {
+      e.cookT -= dt
+      if (e.cookT <= 0) {
+        e.dish = cookPot(e.ing)
+        e.state = 'done'
+        markDirty(e)
+      }
+    }
+  })
+}
+function updateRabbit(e, dt) {
+  const hole = entities.find((h) => h.id === e.hole)
+  const scare = players.find((p) => !p.dead && Math.hypot(p.x - e.x, p.y - e.y) < 130)
+  const goHome = phaseName !== 'day'
+  e.flee = !!scare || goHome
+  if (e.flee && hole) {
+    const d = Math.hypot(hole.x - e.x, hole.y - e.y)
+    if (d < 16) {
+      // 钻回洞里
+      hole.rabbitId = 0
+      hole.respawnT = goHome ? 20 : 26 + Math.random() * 20
+      removeEntity(e)
+      return
+    }
+    const s = 150
+    moveMob(e, ((hole.x - e.x) / d) * s * dt, ((hole.y - e.y) / d) * s * dt, gCtx)
+    e.dir = hole.x > e.x ? 1 : -1
+    e.vx = 10
+    return
+  }
+  e.vx = 0
+  e.wanderT -= dt
+  if (e.wanderT <= 0) {
+    e.wanderT = 1.2 + Math.random() * 2.4
+    const ax = hole ? hole.x : e.x
+    const ay = hole ? hole.y : e.y
+    const a = Math.random() * 7
+    e.tx = ax + Math.cos(a) * Math.random() * 110
+    e.ty = ay + Math.sin(a) * Math.random() * 110
+  }
+  if (e.tx !== undefined) {
+    const d = Math.hypot(e.tx - e.x, e.ty - e.y)
+    if (d > 8) {
+      moveMob(e, ((e.tx - e.x) / d) * 60 * dt, ((e.ty - e.y) / d) * 60 * dt, gCtx)
+      e.dir = e.tx > e.x ? 1 : -1
+      e.vx = 6
+    } else e.vx = 0
+  }
+}
+function updateTentacle(e, dt) {
+  if (e.cd > 0) e.cd -= dt
+  if (e.atkT > 0) e.atkT -= dt * 2.4
+  const victim = players.find((p) => !p.dead && Math.hypot(p.x - e.x, p.y - e.y) < (e.state === 'up' ? 150 : 90))
+    || monsters.find((m) => m.kind === 'pig' && Math.hypot(m.x - e.x, m.y - e.y) < 90)
+  if (e.state !== 'up') {
+    if (victim) {
+      e.state = 'up'
+      markDirty(e)
+    }
+    return
+  }
+  if (!victim) {
+    e.state = 'lurk'
+    markDirty(e)
+    return
+  }
+  e.dir = victim.x > e.x ? 1 : -1
+  const d = Math.hypot(victim.x - e.x, victim.y - e.y)
+  if (d < 82 && e.cd <= 0) {
+    e.cd = 1.25
+    e.atkT = 1
+    if (victim.seat !== undefined) {
+      damagePlayer(victim, 34, '被触手抽中了！')
+      ptip(victim, '被触手抽中了 · 生命 -34')
+    } else {
+      victim.hp -= 34
+      victim.targetMob = null
+      if (victim.hp <= 0) killMob(victim, null)
+    }
+  }
+}
+function updateMonstersAll(dt) {
+  monsters.slice().forEach((m) => {
+    const mk = modRt.mobKinds[m.kind]
+    if (mk?.update) {
+      m.moving = false
+      if (m.shake > 0) m.shake -= dt
+      if (m.cd > 0) m.cd -= dt
+      mk.update(m, dt, gCtx)
+    } else updateMob(m, dt, gCtx)
+  })
+}
+// 生存结算：饥饿 / 理智 / 体温 / 火把花环耐久 / 查理 / 保鲜
+function updateSurvival(dt) {
+  const winter = seasonNow.code === 'winter'
+  players.forEach((p) => {
+    if (p.dead) return
+    // 饥饿
+    p.hunger = Math.max(0, p.hunger - TUNE.hungerRate * dt)
+    if (p.hunger <= 0) p.hp -= TUNE.starveHp * dt
+    // 理智：官方途径（黄昏/黑暗/雨/花环）
+    const lit = litAt(p.x, p.y)
+    if (phaseName === 'dusk') p.san -= TUNE.duskSan * dt
+    else if (phaseName === 'night') p.san -= (lit ? TUNE.nightLitSan : TUNE.nightDarkSan) * dt
+    if (wx.type === 'rain') p.san -= TUNE.rainSan * dt
+    const head = p.equip.head
+    if (head && ITEMS[head.code]?.sanAura) p.san += ITEMS[head.code].sanAura * dt
+    p.san = Math.max(0, Math.min(CAP.san, p.san))
+    // 体温
+    const insul = ['body', 'head'].reduce((n, sl) => n + (ITEMS[p.equip[sl]?.code]?.insul || 0), 0)
+    updateBodyTemp(p, ambientTemp(seasonNow.code, phaseName, wx.type), heatAt(p), insul, dt)
+    // 保暖石：有热量时托底体温
+    ;[p.slots, p.pack].filter(Boolean).forEach((area) => {
+      area.forEach((s) => {
+        if (!s || s.code !== 'thermalstone') return
+        if (heatAt(p) > 0.3) s.dur = Math.min(100, (s.dur || 0) + dt * 14)
+        else if ((s.dur || 0) > 0 && p.temp < 8) {
+          s.dur = Math.max(0, s.dur - dt * 1.6)
+          p.temp = Math.max(p.temp, 8)
+        }
+      })
+    })
+    if (p.temp <= TUNE.freezeAt) {
+      p.hp -= TUNE.freezeHp * dt
+      if (Math.random() < dt * 0.25) ptip(p, '你快冻僵了！生火取暖！')
+    }
+    // 计时耐久：火把（手持燃烧）、花环（佩戴枯萎）
+    const hand = p.equip.hand
+    if (hand?.code === 'torch') {
+      hand.dur -= dt
+      if (hand.dur <= 0) breakEquip(p, 'hand', '火把燃尽了！')
+    }
+    if (head?.code === 'garland') {
+      head.dur -= dt
+      if (head.dur <= 0) breakEquip(p, 'head', '花环枯萎了')
+    }
+    // 查理：完全黑暗计时 → 预警 → 袭击
+    if (phaseName === 'night' && !lit) {
+      p.darkT += dt
+      if (p.darkT >= TUNE.charlieHit) {
+        damagePlayer(p, TUNE.charlieDmg, '查理在黑暗中袭击了你！')
+        p.san = Math.max(0, p.san - TUNE.charlieSan)
+        p.darkT = TUNE.charlieHit - TUNE.charlieRe
+        if (p === player) { flashRed = 0.55; shake(9) }
+      }
+    } else {
+      p.darkT = 0
+    }
+    perishTick(p, dt)
+    if (p.hp <= 0) die(p)
+  })
+}
+// 本机查理演出（预警提示；客机也本地跑，只做视觉不掉血）
+function charlieFx(dt) {
+  const p = player
+  if (!p || p.dead) return
+  if (phaseName === 'night' && !litAt(p.x, p.y)) {
+    if (!isHostRole()) p.darkT += dt
+    if (!p.darkWarned && p.darkT >= TUNE.charlieWarn) {
+      p.darkWarned = true
+      tip('黑暗中似乎有什么东西在逼近……快找光源！')
+    }
+    if (!isHostRole() && p.darkT >= TUNE.charlieHit) {
+      p.darkT = TUNE.charlieHit - TUNE.charlieRe
+      flashRed = 0.55
+      shake(9)
+    }
+  } else {
+    if (!isHostRole()) p.darkT = 0
+    p.darkWarned = false
+  }
+}
+function updateCamera() {
+  if (!player) return
+  const W = canvas.value.width
+  const H = canvas.value.height
+  camX = Math.max(0, Math.min(WORLD.w - W, player.x - W / 2))
+  camY = Math.max(0, Math.min(WORLD.h - H, player.y - H / 2))
+}
+// 探索迷雾：0.5s 一次揭开玩家周围瓦片
+function updateExplore(dt) {
+  exploreT += dt
+  if (exploreT < 0.5 || !explored) return
+  exploreT = 0
+  if (modRt.flags.noFog) return
+  players.forEach((p) => {
+    if (p.dead && !coop) return
+    const tx = Math.floor(p.x / TILE)
+    const ty = Math.floor(p.y / TILE)
+    for (let oy = -4; oy <= 4; oy++) {
+      for (let ox = -4; ox <= 4; ox++) {
+        if (ox * ox + oy * oy > 18) continue
+        const x = tx + ox
+        const y = ty + oy
+        if (x >= 0 && x < GW && y >= 0 && y < GH) explored[y * GW + x] = 1
+      }
+    }
+  })
+}
+
+// =====================================================================
+// HUD 同步
+// =====================================================================
+function packUiSlot(s) {
+  if (!s) return null
+  const it = ITEMS[s.code]
+  return {
+    code: s.code, n: s.n, name: it?.name || s.code,
+    fresh: it?.perish ? (s.fresh ?? 1) : -1,
+    dur: s.dur != null && (it?.uses || it?.burn || it?.armor) ? s.dur / (it.uses || it.burn || it.armor) : (s.code === 'thermalstone' ? (s.dur || 0) / 100 : -1),
+  }
+}
+function syncHud(force = false) {
+  if (!player) return
+  hp.value = Math.max(0, Math.round(player.hp))
+  hunger.value = Math.max(0, Math.round(player.hunger))
+  san.value = Math.max(0, Math.round(player.san))
+  temp.value = Math.round(player.temp)
+  seasonTag.value = { name: seasonNow.name, dayIn: seasonNow.dayIn, len: seasonNow.len, tint: seasonNow.tint, code: seasonNow.code }
+  if (invDirty || force) {
+    invDirty = false
+    uiSlots.value = player.slots.map(packUiSlot)
+    uiPack.value = player.pack ? player.pack.map(packUiSlot) : null
+    uiEquip.value = {
+      hand: player.equip.hand ? packUiSlot({ ...player.equip.hand, n: 1 }) : null,
+      body: player.equip.body ? packUiSlot({ ...player.equip.body, n: 1 }) : null,
+      head: player.equip.head ? packUiSlot({ ...player.equip.head, n: 1 }) : null,
+    }
+    const counts = {}
+    RECIPES.forEach((r) => Object.keys(r.cost).forEach((c) => { counts[c] = countItem(player, c) }))
+    uiCounts.value = counts
+    uiUnlocked.value = Array.from(player.unlocked)
+  }
+  uiTech.value = techLevel(player)
+  // 烹饪锅面板视图
+  if (potOpenId) {
+    const pot = entities.find((e) => e.id === potOpenId)
+    if (!pot || Math.hypot(pot.x - player.x, pot.y - player.y) > 130) {
+      potOpenId = 0
+      potView.value = null
+    } else {
+      potView.value = { id: pot.id, ing: [...(pot.ing || [])], state: pot.state, t: Math.ceil(pot.cookT || 0), dish: pot.dish }
+    }
+  } else if (potView.value) potView.value = null
+  updateHint()
+}
+function updateHint() {
+  if (!player || player.dead) { hint.value = '' ; return }
+  const parts = []
+  let ne = null
+  let nd = 120
+  entities.forEach((e) => {
+    if (e.stub || (e.deco && e.type !== 'stump') || e.solid) return
+    const d = Math.hypot(e.x - player.x, e.y - player.y)
+    if (d < nd) { nd = d; ne = e }
+  })
+  if (ne) parts.push(modRt.entKinds[ne.type] ? `空格/点击：${NAMES[ne.type] || ''}` : `空格：${ne.loot ? '拾取' : '采集'}${NAMES[ne.type] || ''}`)
+  let nm = null
+  let nmd = 170
+  monsters.forEach((m) => {
+    if (m.kind === 'pig' || m.kind === 'beefalo' || modRt.mobKinds[m.kind]?.friendly) return
+    const d = Math.hypot(m.x - player.x, m.y - player.y)
+    if (d < nmd) { nmd = d; nm = m }
+  })
+  if (nm) parts.push(`F：攻击${MON[nm.kind].name}`)
+  const nf = fires.find((f) => Math.hypot(f.x - player.x, f.y - player.y) < 90)
+  if (nf) parts.push(nf.ttl <= 0 ? '点击火堆重燃' : '点击火焰添柴 · 生食可点击烤制')
+  const pig = monsters.find((m) => m.kind === 'pig' && m.loyalT <= 0 && Math.hypot(m.x - player.x, m.y - player.y) < 90)
+  if (pig) parts.push('点肉类可喂食猪人结盟')
+  hint.value = parts.slice(0, 3).join('　')
+}
+function hudTick(dt) {
+  hudT += dt
+  if (hudT >= 0.25) {
+    hudT = 0
+    syncHud()
+  }
+  mapT += dt
+  if (showMap.value && mapT >= 0.5) {
+    mapT = 0
+    drawMinimap()
+  }
+}
+
+// =====================================================================
+// 主循环
+// =====================================================================
+function update(dt) {
+  if (!playing.value) return
+  time += dt
+  lastDt = dt
+  fpsEma = fpsEma * 0.95 + (1 / Math.max(dt, 0.001)) * 0.05
+  if (coop && !coop.isHost) {
+    clientTick(dt)
+    return
+  }
+  updateDayNight(dt)
+  updatePlayers(dt)
+  updateEntities(dt)
+  updateMonstersAll(dt)
+  updateThreats(dt)
+  updateSurvival(dt)
+  callHook(modRt, 'onTick', gCtx, dt)
+  charlieFx(dt)
+  updateExplore(dt)
+  updateCamera()
+  hudTick(dt)
+  draw()
+  if (coop && coop.isHost) {
+    netT += dt
+    if (netT >= 0.15) {
+      netT = 0
+      sendSnapshot()
+    }
+  }
+}
+// 客机帧：本地预测自己移动 + 插值他人 + 渲染
+function clientTick(dt) {
+  if (waitingWorld.value) return
+  dayTime += dt
+  if (dayTime >= DAY_LEN) dayTime -= DAY_LEN
+  phaseName = phaseOf(seasonNow.code, dayTime)
+  const p = player
+  if (p) {
+    p.walking = false
+    if (p.swing > 0) p.swing = Math.max(0, p.swing - dt * 3.4)
+    const dx = (keys.has('ArrowRight') || keys.has('d') ? 1 : 0) - (keys.has('ArrowLeft') || keys.has('a') ? 1 : 0)
+    const dy = (keys.has('ArrowDown') || keys.has('s') ? 1 : 0) - (keys.has('ArrowUp') || keys.has('w') ? 1 : 0)
+    if (dx || dy) {
+      p.target = null
+      const len = Math.hypot(dx, dy) || 1
+      const s = playerSpeed(p)
+      tryMovePlayer(p, (dx / len) * s * dt, (dy / len) * s * dt)
+      if (dx) p.dir = dx > 0 ? 1 : -1
+      p.walking = true
+    } else if (p.target && !p.dead) {
+      // 本地朝目标走（动作在主机侧结算）
+      const t = p.target
+      const tx = t.kind === 'walk' ? t.x : t.ref?.x
+      const ty = t.kind === 'walk' ? t.y : t.ref?.y
+      if (tx !== undefined) {
+        const d = Math.hypot(tx - p.x, ty - p.y)
+        if (d > (t.kind === 'walk' ? 6 : 44)) {
+          stepToward(p, tx, ty, dt)
+        } else if (t.kind === 'walk') p.target = null
+      }
+    }
+    if (p.walking) p.walkT += dt
+    moveSendT += dt
+    if (moveSendT >= 0.1) {
+      moveSendT = 0
+      coop.send('starve_input', { seat: coop.mySeat, mv: { dx, dy, x: Math.round(p.x), y: Math.round(p.y) } })
+    }
+  }
+  // 插值其他玩家与生物
+  players.forEach((q) => {
+    if (q === player) return
+    if (q.nx || q.ny) {
+      q.walking = Math.hypot(q.nx - q.x, q.ny - q.y) > 3
+      q.x += (q.nx - q.x) * Math.min(1, dt * 10)
+      q.y += (q.ny - q.y) * Math.min(1, dt * 10)
+      if (q.walking) { q.walkT += dt; q.dir = q.nx > q.x ? 1 : q.nx < q.x ? -1 : q.dir }
+      if (q.swing > 0) q.swing = Math.max(0, q.swing - dt * 3.4)
+    }
+  })
+  monsters.forEach((m) => {
+    if (m.shake > 0) m.shake -= dt
+    if (m.nx !== undefined) {
+      m.moving = Math.hypot(m.nx - m.x, m.ny - m.y) > 3
+      m.x += (m.nx - m.x) * Math.min(1, dt * 10)
+      m.y += (m.ny - m.y) * Math.min(1, dt * 10)
+    }
+  })
+  entities.forEach((e) => { if (e.shake > 0) e.shake -= dt })
+  fires.forEach((f) => { if (f.ttl > 0) f.ttl -= dt })
+  charlieFx(dt)
+  updateExplore(dt)
+  updateCamera()
+  hudTick(dt)
+  draw()
+}
+
+// =====================================================================
+// 联机快照
+// =====================================================================
+function packSlotNet(s) {
+  return s ? [ITEM_IDX[s.code], s.n, Math.round((s.fresh ?? 1) * 100), Math.round(s.dur ?? 0)] : 0
+}
+function unpackSlotNet(v) {
+  if (!v) return null
+  const code = ITEM_CODES[v[0]]
+  const it = ITEMS[code] || {}
+  const s = { code, n: v[1] }
+  if (it.perish) s.fresh = v[2] / 100
+  if (v[3]) s.dur = v[3]
+  return s
+}
+function packEquipNet(eq) {
+  return eq ? [ITEM_IDX[eq.code], Math.round(eq.dur ?? 0)] : 0
+}
+function unpackEquipNet(v) {
+  return v ? { code: ITEM_CODES[v[0]], dur: v[1] } : null
+}
+function serializePlayerRow(p) {
+  return [
+    p.seat, Math.round(p.x), Math.round(p.y), p.dir, p.walking ? 1 : 0,
+    Math.round(p.hp), Math.round(p.hunger), Math.round(p.san), p.dead ? 1 : 0,
+    p.score, p.swing > 0.6 ? 1 : 0, ACTS.indexOf(p.act) < 0 ? 0 : ACTS.indexOf(p.act),
+    Math.round(p.temp), p.freezeT > 0 ? 1 : 0,
+    p.slots.map(packSlotNet), p.pack ? p.pack.map(packSlotNet) : 0,
+    [packEquipNet(p.equip.hand), packEquipNet(p.equip.body), packEquipNet(p.equip.head)],
+    Array.from(p.unlocked).map((c) => RECIPES.findIndex((r) => r.code === c)),
+  ]
+}
+function extraOf(e) {
+  if (e.loot) return [ITEM_IDX[e.code], e.n, Math.round((e.fresh ?? 1) * 100)]
+  if (e.pot) return [(e.ing || []).map((c) => ITEM_IDX[c]), Math.round(e.cookT || 0), e.dish ? ITEM_IDX[e.dish] : -1]
+  if (e.mx) return { mx: e.mx } // mod 实体自定义状态（需可 JSON 序列化的小对象）
+  return 0
+}
+function applyExtra(e, x) {
+  if (!x) return
+  if (e.loot) {
+    e.code = ITEM_CODES[x[0]]
+    e.n = x[1]
+    e.fresh = x[2] / 100
+  } else if (e.pot) {
+    e.ing = (x[0] || []).map((i) => ITEM_CODES[i])
+    e.cookT = x[1]
+    e.dish = x[2] >= 0 ? ITEM_CODES[x[2]] : ''
+  } else if (x.mx) {
+    e.mx = x.mx
+  }
+}
+function serializeEntFull(e) {
+  return [e.id, e.type, Math.round(e.x), Math.round(e.y), e.left, e.stub ? 1 : 0, e.state || '', e.uses || 0, Math.round(e.hp || 0), extraOf(e)]
+}
+function restoreEntFull(row) {
+  const [id, type, x, y, left, stub, state, uses, hpv, extra] = row
+  const e = makeEnt(type, x, y)
+  e.id = id
+  e.left = left
+  e.stub = !!stub
+  e.state = state || (e.pot ? 'idle' : e.type === 'trap' ? 'armed' : e.lurk ? 'lurk' : '')
+  e.uses = uses
+  e.hp = hpv
+  applyExtra(e, extra)
+  eid = Math.max(eid, id + 1)
+  return e
+}
+function markAdded(e) {
+  if (coop && coop.isHost) entsAdded.add(e.id)
+}
+function markRemoved(e) {
+  if (coop && coop.isHost) {
+    entsAdded.delete(e.id)
+    entsDirty.delete(e.id)
+    entsRemoved.add(e.id)
+  }
+}
+function markDirty(e) {
+  if (coop && coop.isHost && !entsAdded.has(e.id)) entsDirty.add(e.id)
+}
+function sendSnapshot() {
+  const snap = {
+    day: day.value, dayTime: Math.round(dayTime * 10) / 10,
+    wx: [wx.type, Math.round(wx.t)],
+    players: players.map(serializePlayerRow),
+    mons: monsters.map((m) => [m.id, m.kind, Math.round(m.x), Math.round(m.y), m.dir, m.state || '', m.shake > 0 ? 1 : 0, Math.round((m.hp / MON[m.kind].hp) * 100), m.loyalT > 0 ? 1 : 0, m.moving ? 1 : 0]),
+    fires: fires.map((f) => [f.fid, Math.round(f.x), Math.round(f.y), Math.round(f.ttl), f.max, f.pit ? 1 : 0]),
+  }
+  if (entsAdded.size) {
+    snap.ea = entities.filter((e) => entsAdded.has(e.id)).map(serializeEntFull)
+    entsAdded.clear()
+  }
+  if (entsRemoved.size) {
+    snap.er = Array.from(entsRemoved)
+    entsRemoved.clear()
+  }
+  if (entsDirty.size) {
+    snap.eu = entities.filter((e) => entsDirty.has(e.id)).map((e) => [e.id, e.left, e.stub ? 1 : 0, e.state || '', Math.round(e.hp || 0), extraOf(e)])
+    entsDirty.clear()
+  }
+  if (pendingEv.length) {
+    snap.ev = pendingEv
+    pendingEv = []
+  }
+  coop.send('starve_state', snap)
+}
+function sendFullWorld() {
+  coop.send('starve_state', {
+    full: 1,
+    mods: modRt.ids,
+    tiles: Array.from(tiles).join(''),
+    road: Array.from(road).join(''),
+    ents: entities.map(serializeEntFull),
+    day: day.value, dayTime,
+    wx: [wx.type, Math.round(wx.t)],
+    players: players.map(serializePlayerRow),
+    mons: monsters.map((m) => [m.id, m.kind, Math.round(m.x), Math.round(m.y), m.dir, m.state || '', 0, 100, 0, 0]),
+    fires: fires.map((f) => [f.fid, Math.round(f.x), Math.round(f.y), Math.round(f.ttl), f.max, f.pit ? 1 : 0]),
+  })
+}
+function applySnapshot(snap) {
+  if (snap.full) {
+    // 客机对齐主机的 mod 集合（物品索引/实体表必须一致才能解包快照）
+    applyModRuntime(activateMods(snap.mods || []))
+    tiles = Uint8Array.from(snap.tiles.split('').map(Number))
+    road = Uint8Array.from(snap.road.split('').map(Number))
+    decoSpots = genDecor(tiles)
+    explored = new Uint8Array(GW * GH)
+    if (modRt.flags.noFog) explored.fill(1)
+    entities = snap.ents.map(restoreEntFull)
+    waitingWorld.value = false
+    if (modRt.ids.length) tip(`本局启用 Mod：${modRt.metas.map((m) => m.name).join('、')}`)
+  } else if (waitingWorld.value) return
+  day.value = snap.day
+  const wasSeason = seasonNow.code
+  seasonNow = seasonOf(snap.day)
+  if (seasonNow.code !== wasSeason) {
+    seasonBanner.value = `${seasonNow.name}季来临`
+    setTimeout(() => (seasonBanner.value = ''), 4200)
+  }
+  dayTime = snap.dayTime
+  wx = { type: snap.wx?.[0] || 'none', t: snap.wx?.[1] || 0 }
+  // 玩家
+  snap.players.forEach((row) => {
+    const [seat, x, y, dir, walking, hpv, hgv, snv, deadv, score, swing, actIdx, tempv, freeze, slots, pack, equip, unlocked] = row
+    const p = players.find((q) => q.seat === seat)
+    if (!p) return
+    if (p !== player) {
+      p.nx = x
+      p.ny = y
+      p.dir = dir
+      if (walking && !p.walking) p.walking = true
+    } else if (Math.hypot(p.x - x, p.y - y) > 140) {
+      p.x = x
+      p.y = y
+    }
+    const wasDead = p.dead
+    p.hp = hpv; p.hunger = hgv; p.san = snv; p.temp = tempv
+    p.dead = !!deadv
+    if (p.dead && !wasDead) { p.fallT = 0; if (p === player) ghostMode.value = true }
+    if (!p.dead) p.fallT = 1
+    else if (p.fallT < 1) p.fallT = Math.min(1, p.fallT + 0.15)
+    if (p === player && score !== p.score) { p.score = score; emit('score', score) } else p.score = score
+    if (swing && p.swing <= 0) p.swing = 1
+    p.act = ACTS[actIdx] || ''
+    p.freezeT = freeze ? 1 : 0
+    p.slots = (slots || []).map(unpackSlotNet)
+    while (p.slots.length < TUNE.invSlots) p.slots.push(null)
+    p.pack = pack ? pack.map(unpackSlotNet) : null
+    p.equip = {
+      hand: unpackEquipNet(equip?.[0]),
+      body: unpackEquipNet(equip?.[1]),
+      head: unpackEquipNet(equip?.[2]),
+    }
+    p.unlocked = new Set((unlocked || []).map((i) => RECIPES[i]?.code).filter(Boolean))
+  })
+  invDirty = true
+  // 生物
+  const seen = new Set()
+  snap.mons.forEach((row) => {
+    const [id2, kind, x, y, dir, state, shook, hpPct, loyal, moving] = row
+    seen.add(id2)
+    let m = monsters.find((q) => q.id === id2)
+    if (!m) {
+      m = spawnMob(kind, x, y)
+      m.id = id2
+    }
+    m.nx = x
+    m.ny = y
+    if (m.nx === undefined) { m.x = x; m.y = y }
+    m.dir = dir
+    m.state = state
+    if (shook) m.shake = 0.2
+    m.hpPct = hpPct
+    m.loyalT = loyal ? 10 : 0
+    m.moving = !!moving
+  })
+  monsters = monsters.filter((m) => seen.has(m.id))
+  // 火焰
+  fires = snap.fires.map(([fid2, x, y, ttl, max, pit]) => ({ fid: fid2, x, y, ttl, max, pit: !!pit }))
+  // 实体增量
+  snap.ea?.forEach((row) => {
+    if (!entities.some((e) => e.id === row[0])) entities.push(restoreEntFull(row))
+  })
+  if (snap.er?.length) {
+    const gone = new Set(snap.er)
+    entities = entities.filter((e) => !gone.has(e.id))
+  }
+  snap.eu?.forEach(([id2, left, stub, state, hpv, extra]) => {
+    const e = entities.find((q) => q.id === id2)
+    if (!e) return
+    e.left = left
+    e.stub = !!stub
+    e.state = state || (e.pot ? 'idle' : e.type === 'trap' ? 'armed' : e.lurk ? 'lurk' : '')
+    e.hp = hpv
+    applyExtra(e, extra)
+  })
+  // 私发提示
+  snap.ev?.forEach(([seat, text]) => {
+    if (seat === coop.mySeat) tip(text)
+  })
+}
+// 主机收客机输入
+function applyClientInput(data) {
+  const p = players.find((q) => q.seat === data.seat)
+  if (!p || p.dead) return
+  if (data.mv) {
+    p.input.dx = data.mv.dx
+    p.input.dy = data.mv.dy
+    // 采信客机预测位置（限幅防作弊/穿海）
+    if (data.mv.x !== undefined && Math.hypot(data.mv.x - p.x, data.mv.y - p.y) < 160 && isLand(tiles, data.mv.x, data.mv.y)) {
+      p.x = data.mv.x
+      p.y = data.mv.y
+    }
+    return
+  }
+  const act = data.act
+  if (!act) return
+  if (act.type === 'target') p.target = resolveTarget(act.t)
+  else if (act.type === 'use') useItemAt(p, act.area, act.i)
+  else if (act.type === 'unequip') unequipSlot(p, act.slot)
+  else if (act.type === 'craft') craftFor(p, act.code)
+  else if (act.type === 'potadd') {
+    const pot = entities.find((e) => e.id === act.id)
+    if (pot?.pot) potAdd(p, pot, act.area, act.i)
+  } else if (act.type === 'potcook') {
+    const pot = entities.find((e) => e.id === act.id)
+    if (pot?.pot) potCook(p, pot)
+  } else if (act.type === 'need_world') {
+    fullSyncPending = true
+  }
+}
+function handleNet(type, data) {
+  try {
+    if (type === 'starve_input' && coop?.isHost) {
+      // 兼容旧服务端双重包装 { seat, data: {...} }
+      const payload = data?.data && typeof data.data === 'object' && (data.act === undefined && data.mv === undefined)
+        ? { ...data.data, seat: data.seat ?? data.data.seat }
+        : data
+      applyClientInput(payload)
+      if (fullSyncPending) {
+        fullSyncPending = false
+        sendFullWorld()
+      }
+    } else if (type === 'starve_state' && coop && !coop.isHost) {
+      if (!data || typeof data !== 'object') return
+      applySnapshot(data)
+    } else if (type === 'starve_end') {
+      if (!dead.value) gameOver()
+    } else if (type === 'room_closed') {
+      if (playing.value) {
+        tip('房间已关闭')
+        gameOver()
+      }
+    }
+  } catch (err) {
+    console.error('[starve] net handle failed', type, err)
+  }
+}
+
+// =====================================================================
+// 存档（v4）
+// =====================================================================
+function packSaveSlot(s) {
+  return s ? [s.code, s.n, Math.round((s.fresh ?? 1) * 1000) / 1000, s.dur != null ? Math.round(s.dur * 10) / 10 : null] : 0
+}
+function unpackSaveSlot(v) {
+  if (!v) return null
+  const s = { code: v[0], n: v[1] }
+  if (ITEMS[v[0]]?.perish) s.fresh = v[2]
+  if (v[3] != null) s.dur = v[3]
+  return s
+}
+function serialize() {
+  return {
+    v: 4,
+    mods: modRt.ids,
+    modData: collectModSaves(modRt, gCtx),
+    day: day.value,
+    dayTime: Math.round(dayTime * 10) / 10,
+    score: player?.score || 0,
+    px: Math.round(player.x), py: Math.round(player.y),
+    hp: Math.round(player.hp), hunger: Math.round(player.hunger),
+    san: Math.round(player.san), temp: Math.round(player.temp),
+    slots: player.slots.map(packSaveSlot),
+    pack: player.pack ? player.pack.map(packSaveSlot) : 0,
+    equip: [packSaveSlot(player.equip.hand && { ...player.equip.hand, n: 1 }), packSaveSlot(player.equip.body && { ...player.equip.body, n: 1 }), packSaveSlot(player.equip.head && { ...player.equip.head, n: 1 })],
+    unlocked: Array.from(player.unlocked),
+    kills, chopped: treesChopped,
+    hound: { nextDay: houndPlan.nextDay },
+    deer: { spawned: deer.spawned },
+    wx: { type: wx.type, t: Math.round(wx.t) },
+    tiles: Array.from(tiles).join(''),
+    road: Array.from(road).join(''),
+    explored: Array.from(explored).join(''),
+    ents: entities.map(serializeEntFull),
+    fires: fires.map((f) => [f.fid, Math.round(f.x), Math.round(f.y), Math.round(f.ttl), f.max, f.pit ? 1 : 0]),
+  }
+}
+function restore(v) {
+  day.value = v.day || 1
+  dayTime = v.dayTime || 0
+  seasonNow = seasonOf(day.value)
+  player.score = v.score || 0
+  if (v.v >= 4) {
+    tiles = Uint8Array.from(v.tiles.split('').map(Number))
+    road = Uint8Array.from(v.road.split('').map(Number))
+    explored = v.explored ? Uint8Array.from(v.explored.split('').map(Number)) : new Uint8Array(GW * GH)
+    decoSpots = genDecor(tiles)
+    entities = (v.ents || []).map(restoreEntFull)
+    fires = (v.fires || []).map(([fid2, x, y, ttl, max, pit]) => ({ fid: fid2, x, y, ttl, max: max || 90, pit: !!pit }))
+    fid = fires.reduce((n, f) => Math.max(n, f.fid + 1), 1)
+    player.x = v.px
+    player.y = v.py
+    player.hp = v.hp
+    player.hunger = v.hunger
+    player.san = v.san
+    player.temp = v.temp ?? 20
+    player.slots = (v.slots || []).map(unpackSaveSlot)
+    while (player.slots.length < TUNE.invSlots) player.slots.push(null)
+    player.pack = v.pack ? v.pack.map(unpackSaveSlot) : null
+    const [h, b, hd] = v.equip || []
+    player.equip = {
+      hand: h ? { code: h[0], dur: h[3] ?? 0 } : null,
+      body: b ? { code: b[0], dur: b[3] ?? 0 } : null,
+      head: hd ? { code: hd[0], dur: hd[3] ?? 0 } : null,
+    }
+    if (player.equip.body && ITEMS[player.equip.body.code]?.pack && !player.pack) player.pack = makeSlots(TUNE.packSlots)
+    player.unlocked = new Set(v.unlocked || [])
+    kills = { spider: 0, hound: 0, shadow: 0, treeguard: 0, other: 0, ...(v.kills || {}) }
+    treesChopped = v.chopped || 0
+    houndPlan = { nextDay: v.hound?.nextDay || day.value + randInt(4, 7), at: DAY_LEN * 0.4, warnT: 0, doneToday: true }
+    deer = { spawned: !!v.deer?.spawned, warnT: 0 }
+    wx = { type: v.wx?.type || 'none', t: v.wx?.t || 0 }
+    // 生物重生（不入档：从巢/屋/群系恢复）
+    monsters = []
+    entities.filter((e) => e.type === 'spidernest').forEach((n) => spawnNestSpiders(n, 2))
+    entities.filter((e) => e.type === 'pighouse').forEach((h2) => spawnPig(h2))
+    entities.filter((e) => e.type === 'rabbithole' && !e.rabbitId).forEach((h2) => { h2.respawnT = 5 })
+    respawnBiomeMobs()
+    if (deer.spawned && seasonNow.code === 'winter') {
+      const spot = findLandNear(tiles, player.x, player.y, 500, 700)
+      spawnMob('deerclops', spot.x, spot.y)
+    }
+    applyModSaves(modRt, gCtx, v.modData)
+    if (modRt.flags.noFog) explored.fill(1)
+    tip(`回到第 ${day.value} 天（${seasonNow.name}季）的荒野`)
+    return
+  }
+  // v3 旧档尽力迁移：保留进度与背包，世界按新版重新生成
+  genWorldAll()
+  player.hp = Math.min(CAP.hp, Math.round((v.hp ?? 100) * 1.5))
+  player.hunger = Math.min(CAP.hunger, Math.round((v.hunger ?? 100) * 1.5))
+  player.san = Math.min(CAP.san, Math.round((v.san ?? 100) * 2))
+  const mapCode = { bandage: 'healingsalve', pick: 'pickaxe' }
+  Object.entries(v.inv || {}).forEach(([code, n]) => {
+    const real = mapCode[code] || code
+    if (ITEMS[real] && n > 0) addItem(player, real, n, 1)
+  })
+  Object.entries(v.tools || {}).forEach(([code, uses]) => {
+    const real = mapCode[code] || code
+    if (ITEMS[real] && uses > 0) addItem(player, real, 1, 1, Math.min(ITEMS[real].uses || 100, uses * 10))
+  })
+  kills = { spider: 0, hound: 0, shadow: 0, treeguard: 0, other: 0, ...(v.kills || {}) }
+  houndPlan = { nextDay: day.value + randInt(3, 6), at: DAY_LEN * 0.4, warnT: 0, doneToday: true }
+  tip('旧存档已迁移：世界按新版重新生成，进度与物资保留')
+}
+function respawnBiomeMobs() {
+  const savanna = []
+  const marsh = []
+  for (let i = 0; i < tiles.length; i++) {
+    if (tiles[i] === 2) savanna.push(i)
+    else if (tiles[i] === 6) marsh.push(i)
+  }
+  if (savanna.length) {
+    const anchor = savanna[Math.floor(savanna.length / 2)]
+    const hx = (anchor % GW) * TILE + 40
+    const hy = Math.floor(anchor / GW) * TILE + 40
+    for (let i = 0; i < 5; i++) {
+      const spot = findLandNear(tiles, hx, hy, 20, 160)
+      spawnMob('beefalo', spot.x, spot.y, { home: { x: hx, y: hy } })
+    }
+  }
+  for (let i = 0; i < 8 && marsh.length; i++) {
+    const ti = marsh[randInt(0, marsh.length - 1)]
+    spawnMob('frog', (ti % GW) * TILE + 40, Math.floor(ti / GW) * TILE + 40)
+  }
+}
+function doSave(manual = true) {
+  if (coop || !player || player.dead) return
+  emit('save', serialize())
+  if (manual) {
+    saving.value = true
+    tip('已保存冒险进度')
+    setTimeout(() => (saving.value = false), 900)
+  }
+}
+
+// =====================================================================
+// 渲染
+// =====================================================================
+function draw() {
+  if (!ctx) return
+  const W = canvas.value.width
+  const H = canvas.value.height
+  ctx.clearRect(0, 0, W, H)
+  ctx.save()
+  // 画面震动
+  if (shakeT > 0) {
+    shakeT -= lastDt
+    ctx.translate((Math.random() - 0.5) * shakeAmp * shakeT * 2.4, (Math.random() - 0.5) * shakeAmp * shakeT * 2.4)
+    if (shakeT <= 0) shakeAmp = 0
+  }
+  const winter = seasonNow.code === 'winter'
+  if (tiles && tilePats) drawTiles(ctx, tiles, road, tilePats, camX, camY, W, H, time, winter)
+  // 装饰点缀
+  decoSpots.forEach((d) => {
+    const sx = d.x - camX
+    const sy = d.y - camY
+    if (sx < -20 || sx > W + 20 || sy < -20 || sy > H + 20) return
+    drawDecor(ctx, d, sx, sy)
+  })
+  // 目标标记
+  if (player?.target?.kind === 'walk') {
+    const t = player.target
+    ctx.strokeStyle = 'rgba(255,255,255,0.5)'
+    ctx.lineWidth = 2
+    ctx.beginPath()
+    ctx.ellipse(t.x - camX, t.y - camY, 10 + Math.sin(time * 6) * 2, 5, 0, 0, 7)
+    ctx.stroke()
+  }
+  // y 排序绘制世界对象
+  const env = { winter, time, icons: ICONS.cv }
+  const drawables = []
+  entities.forEach((e) => {
+    const sx = e.x - camX
+    const sy = e.y - camY
+    if (sx < -90 || sx > W + 90 || sy < -110 || sy > H + 110) return
+    drawables.push({ y: e.loot ? e.y - 900 : e.y, fn: () => drawEntWrap(e, env) })
+  })
+  fires.forEach((f) => {
+    const sx = f.x - camX
+    const sy = f.y - camY
+    if (sx < -80 || sx > W + 80 || sy < -80 || sy > H + 80) return
+    drawables.push({ y: f.y, fn: () => {
+      ctx.save()
+      ctx.translate(sx, sy)
+      drawFirePainter(ctx, f, time)
+      ctx.restore()
+    } })
+  })
+  monsters.forEach((m) => {
+    const sx = m.x - camX
+    const sy = m.y - camY
+    if (sx < -120 || sx > W + 120 || sy < -160 || sy > H + 160) return
+    drawables.push({ y: m.y, fn: () => drawMobWrap(m, env) })
+  })
+  players.forEach((p) => drawables.push({ y: p.y, fn: () => drawPlayerChar(p) }))
+  drawables.sort((a, b) => a.y - b.y)
+  drawables.forEach((d) => d.fn())
+  callHook(modRt, 'onDraw', gCtx, ctx, { camX, camY, W, H, time })
+  drawWeather(W, H)
+  drawNight(W, H)
+  // 查理袭击红闪
+  if (flashRed > 0) {
+    flashRed -= lastDt * 1.4
+    ctx.fillStyle = `rgba(160,20,24,${Math.max(0, flashRed) * 0.55})`
+    ctx.fillRect(0, 0, W, H)
+  }
+  // 低理智暗角 + 冰冻寒气
+  if (player && !player.dead) {
+    if (player.san < 70) {
+      const k = 1 - player.san / 70
+      const g = ctx.createRadialGradient(W / 2, H / 2, H * 0.32, W / 2, H / 2, H * 0.75)
+      g.addColorStop(0, 'rgba(30,8,40,0)')
+      g.addColorStop(1, `rgba(30,8,40,${0.5 * k + Math.sin(time * 2.4) * 0.06 * k})`)
+      ctx.fillStyle = g
+      ctx.fillRect(0, 0, W, H)
+    }
+    if (player.temp < 6) {
+      const k = Math.min(1, (6 - player.temp) / 14)
+      const g = ctx.createRadialGradient(W / 2, H / 2, H * 0.3, W / 2, H / 2, H * 0.8)
+      g.addColorStop(0, 'rgba(140,190,230,0)')
+      g.addColorStop(1, `rgba(150,200,240,${0.4 * k})`)
+      ctx.fillStyle = g
+      ctx.fillRect(0, 0, W, H)
+    }
+  }
+  ctx.restore()
+  drawClock()
+}
+function drawEntWrap(e, env) {
+  const sx = e.x - camX
+  const sy = e.y - camY
+  ctx.save()
+  ctx.translate(sx + (e.shake > 0 ? Math.sin(time * 44) * 2.4 : 0), sy)
+  const modEnt = modRt.entKinds[e.type]
+  if (modEnt?.draw) modEnt.draw(ctx, e, env)
+  else drawEnt(ctx, e, env)
+  // 受击白闪（不用 ctx.filter，低端机友好）
+  if (e.shake > 0.12) {
+    ctx.globalAlpha = (e.shake - 0.12) * 2
+    ctx.fillStyle = '#fff'
+    ctx.beginPath()
+    ctx.ellipse(0, -e.size * 0.5, e.size * 0.7, e.size * 0.7, 0, 0, 7)
+    ctx.fill()
+    ctx.globalAlpha = 1
+  }
+  // 多段采集进度点
+  if (e.hits > 1 && e.left < e.hits && !e.stub && e.drops) {
+    for (let i = 0; i < e.hits; i++) {
+      ctx.fillStyle = i < e.left ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.25)'
+      ctx.beginPath()
+      ctx.arc((i - (e.hits - 1) / 2) * 10, 12, 2.6, 0, 7)
+      ctx.fill()
+    }
+  }
+  // 可攻击实体血条
+  if (e.maxHp > 0 && e.hp < e.maxHp && !e.loot) {
+    ctx.fillStyle = 'rgba(0,0,0,0.5)'
+    ctx.fillRect(-16, -e.size - 14, 32, 5)
+    ctx.fillStyle = '#e04840'
+    ctx.fillRect(-15, -e.size - 13, 30 * Math.max(0, e.hp / e.maxHp), 3)
+  }
+  ctx.restore()
+}
+function drawMobWrap(m, env) {
+  const sx = m.x - camX
+  const sy = m.y - camY
+  ctx.save()
+  ctx.translate(sx + (m.shake > 0 ? Math.sin(time * 44) * 2.6 : 0), sy)
+  const modMob = modRt.mobKinds[m.kind]
+  if (modMob?.draw) modMob.draw(ctx, m, time)
+  else drawMob(ctx, m, time)
+  if (m.shake > 0.12) {
+    ctx.globalAlpha = (m.shake - 0.12) * 2
+    ctx.fillStyle = '#fff'
+    const r = m.kind === 'deerclops' ? 46 : m.kind === 'treeguard' ? 34 : 16
+    ctx.beginPath()
+    ctx.ellipse(0, -r, r, r, 0, 0, 7)
+    ctx.fill()
+    ctx.globalAlpha = 1
+  }
+  // Boss 血条
+  if (MON[m.kind]?.boss) {
+    const pct = coop && !coop.isHost ? (m.hpPct ?? 100) / 100 : m.hp / MON[m.kind].hp
+    const w = m.kind === 'deerclops' ? 76 : 56
+    const yOff = m.kind === 'deerclops' ? -150 : -120
+    ctx.fillStyle = 'rgba(0,0,0,0.55)'
+    ctx.fillRect(-w / 2, yOff, w, 7)
+    ctx.fillStyle = '#e04840'
+    ctx.fillRect(-w / 2 + 1, yOff + 1, (w - 2) * Math.max(0, pct), 5)
+  }
+  ctx.restore()
+}
+function drawPlayerChar(p) {
+  const sx = p.x - camX
+  const sy = p.y - camY
+  const W = canvas.value.width
+  const H = canvas.value.height
+  if (sx < -80 || sx > W + 80 || sy < -100 || sy > H + 100) return
+  ctx.save()
+  ctx.translate(sx, sy)
+  const ghost = p.dead && p.fallT >= 1 && !!coop
+  if (p.dead && p.fallT < 1) {
+    // 倒地演出
+    drawPlayerFig(ctx, skinByCode(p.skin), {
+      dir: p.dir, walking: false, walkT: 0, swing: 0,
+      breathe: 0, toolCode: '', ghost: false, time, fall: p.fallT,
+    })
+  } else if (!p.dead || ghost) {
+    drawPlayerFig(ctx, skinByCode(p.skin), {
+      dir: p.dir, walking: p.walking, walkT: p.walkT,
+      swing: p.swing, act: p.act,
+      breathe: p.walking ? 0 : Math.sin(time * 2.2 + p.seat) * 1.2,
+      toolCode: p.equip.hand?.code || '',
+      ghost, time,
+    })
+    // 冰冻寒雾
+    if (p.freezeT > 0 && !p.dead) {
+      ctx.fillStyle = 'rgba(150,210,240,0.28)'
+      ctx.beginPath()
+      ctx.ellipse(0, -18, 18, 24, 0, 0, 7)
+      ctx.fill()
+    }
+  }
+  // 名字（联机）
+  if (coop && !p.dead) {
+    ctx.font = 'bold 11px "Ma Shan Zheng", sans-serif'
+    ctx.textAlign = 'center'
+    ctx.fillStyle = p === player ? 'rgba(255,235,160,0.95)' : 'rgba(255,255,255,0.85)'
+    ctx.fillText(p.name, 0, -46)
+  }
+  ctx.restore()
+}
+// 天气粒子（对象池，雨 110 / 雪 70 上限）
+function drawWeather(W, H) {
+  const want = wx.type === 'rain' ? 110 : wx.type === 'snow' || seasonNow.code === 'winter' ? 70 : 0
+  while (particles.length < want) {
+    particles.push({
+      x: Math.random() * W, y: Math.random() * H,
+      vx: wx.type === 'rain' ? -60 : -12 + Math.random() * 24,
+      vy: wx.type === 'rain' ? 620 : 46 + Math.random() * 30,
+      seed: Math.random() * 7,
+    })
+  }
+  if (particles.length > want) particles.length = want
+  if (!particles.length) return
+  const rain = wx.type === 'rain'
+  ctx.strokeStyle = 'rgba(170,200,230,0.5)'
+  ctx.fillStyle = 'rgba(240,246,252,0.8)'
+  ctx.lineWidth = 1.4
+  particles.forEach((pt) => {
+    pt.x += pt.vx * lastDt
+    pt.y += pt.vy * lastDt
+    if (pt.y > H + 8) { pt.y = -8; pt.x = Math.random() * W }
+    if (pt.x < -8) pt.x = W + 8
+    if (rain) {
+      ctx.beginPath()
+      ctx.moveTo(pt.x, pt.y)
+      ctx.lineTo(pt.x + pt.vx * 0.014, pt.y + pt.vy * 0.014)
+      ctx.stroke()
+    } else {
+      ctx.beginPath()
+      ctx.arc(pt.x + Math.sin(time * 1.4 + pt.seed) * 6, pt.y, 1.8, 0, 7)
+      ctx.fill()
+    }
+  })
+}
+// 夜幕：黑底挖光圈（火/火把）
+function drawNight(W, H) {
+  const [duskAt, nightAt] = daySplit(seasonNow.code)
+  let alpha = 0
+  if (dayTime >= nightAt || dayTime < 0) alpha = 0.9
+  else if (dayTime >= duskAt) alpha = 0.32 * ((dayTime - duskAt) / (nightAt - duskAt))
+  // 黎明淡出
+  if (dayTime < 6) alpha = Math.max(alpha, 0.9 * (1 - dayTime / 6))
+  if (alpha <= 0.01) return
+  const layer = document.createElement('canvas')
+  layer.width = W
+  layer.height = H
+  const lc = layer.getContext('2d')
+  lc.fillStyle = seasonNow.code === 'winter' ? `rgba(6,10,20,${alpha})` : `rgba(8,6,18,${alpha})`
+  lc.fillRect(0, 0, W, H)
+  lc.globalCompositeOperation = 'destination-out'
+  const carve = (x, y, r) => {
+    const g = lc.createRadialGradient(x, y, r * 0.25, x, y, r)
+    g.addColorStop(0, 'rgba(0,0,0,1)')
+    g.addColorStop(1, 'rgba(0,0,0,0)')
+    lc.fillStyle = g
+    lc.beginPath()
+    lc.arc(x, y, r, 0, 7)
+    lc.fill()
+  }
+  fires.forEach((f) => {
+    if (f.ttl <= 0) return
+    carve(f.x - camX, f.y - camY, fireRadius(f) * (1 + Math.sin(time * 8) * 0.03))
+  })
+  players.forEach((p) => {
+    if (!p.dead && p.equip.hand?.code === 'torch') carve(p.x - camX, p.y - camY - 14, 108)
+  })
+  ctx.drawImage(layer, 0, 0)
+}
+// 右上角昼夜时钟（16 段刻度 + 季节配色与标签）
+function drawClock() {
+  const c = clockCv.value?.getContext('2d')
+  if (!c) return
+  const S = 92
+  c.clearRect(0, 0, S, S)
+  const cx2 = S / 2
+  const cy2 = S / 2
+  const R = S / 2 - 5
+  const [duskAt, nightAt] = daySplit(seasonNow.code)
+  const segs = [
+    [0, duskAt / DAY_LEN, '#e8bc5a'],
+    [duskAt / DAY_LEN, nightAt / DAY_LEN, '#b06a3c'],
+    [nightAt / DAY_LEN, 1, '#2a2545'],
+  ]
+  segs.forEach(([a, b, col]) => {
+    c.beginPath()
+    c.moveTo(cx2, cy2)
+    c.arc(cx2, cy2, R, -Math.PI / 2 + a * 7 - (7 - Math.PI * 2) * a, -Math.PI / 2 + b * Math.PI * 2)
+    c.closePath()
+    c.fillStyle = col
+    c.fill()
+  })
+  // 16 段刻度
+  c.strokeStyle = 'rgba(20,14,8,0.4)'
+  c.lineWidth = 1
+  for (let i = 0; i < 16; i++) {
+    const a = -Math.PI / 2 + (i / 16) * Math.PI * 2
+    c.beginPath()
+    c.moveTo(cx2 + Math.cos(a) * (R - 6), cy2 + Math.sin(a) * (R - 6))
+    c.lineTo(cx2 + Math.cos(a) * R, cy2 + Math.sin(a) * R)
+    c.stroke()
+  }
+  // 指针
+  const ang = -Math.PI / 2 + (dayTime / DAY_LEN) * Math.PI * 2
+  c.strokeStyle = '#1d1409'
+  c.lineWidth = 3
+  c.beginPath()
+  c.moveTo(cx2, cy2)
+  c.lineTo(cx2 + Math.cos(ang) * (R - 9), cy2 + Math.sin(ang) * (R - 9))
+  c.stroke()
+  // 中盘：天数 + 季节
+  c.beginPath()
+  c.arc(cx2, cy2, R * 0.52, 0, 7)
+  c.fillStyle = '#f4ead2'
+  c.fill()
+  c.strokeStyle = seasonTag.value.tint
+  c.lineWidth = 3
+  c.stroke()
+  c.fillStyle = '#3a2d18'
+  c.font = 'bold 15px "Ma Shan Zheng", serif'
+  c.textAlign = 'center'
+  c.textBaseline = 'middle'
+  c.fillText(`${day.value}`, cx2, cy2 - 7)
+  c.font = 'bold 11px "Ma Shan Zheng", serif'
+  c.fillStyle = seasonTag.value.tint
+  c.fillText(`${seasonTag.value.name} ${seasonTag.value.dayIn}/${seasonTag.value.len}`, cx2, cy2 + 9)
+  // 外圈
+  c.beginPath()
+  c.arc(cx2, cy2, R, 0, 7)
+  c.strokeStyle = '#1d1409'
+  c.lineWidth = 2.4
+  c.stroke()
+}
+// 小地图（2Hz 更新）：群系底色 + 战争迷雾 + 标记
+function drawMinimap() {
+  const c = mapCv.value?.getContext('2d')
+  if (!c || !tiles || !explored) return
+  const s = 5
+  c.fillStyle = '#0b0906'
+  c.fillRect(0, 0, GW * s, GH * s)
+  for (let ty = 0; ty < GH; ty++) {
+    for (let tx = 0; tx < GW; tx++) {
+      const i = ty * GW + tx
+      if (!explored[i]) continue
+      const b = tiles[i]
+      c.fillStyle = b ? (road[i] ? '#a8895c' : BIOMES[b].map) : '#20404c'
+      c.fillRect(tx * s, ty * s, s, s)
+    }
+  }
+  // 标记
+  const dot = (x, y, col, r = 2) => {
+    c.fillStyle = col
+    c.beginPath()
+    c.arc((x / TILE) * s, (y / TILE) * s, r, 0, 7)
+    c.fill()
+  }
+  fires.forEach((f) => { if (f.ttl > 0 || f.pit) dot(f.x, f.y, '#f0923c', 2) })
+  entities.forEach((e) => {
+    if (e.struct && explored[tileIdx(e.x, e.y)]) dot(e.x, e.y, e.type === 'pighouse' ? '#e8a8a0' : '#7fd8f0', 2)
+  })
+  monsters.forEach((m) => { if (m.kind === 'deerclops') dot(m.x, m.y, '#e04840', 3.4) })
+  players.forEach((p) => { if (!p.dead || coop) dot(p.x, p.y, p === player ? '#fff' : '#ffe89a', p === player ? 3 : 2.4) })
+}
+
+// =====================================================================
+// 生命周期与外部接口
+// =====================================================================
+function fitCanvas() {
+  if (!canvas.value) return
+  const el = canvas.value.parentElement
+  // 画布分辨率跟随容器真实尺寸（CSS 拉伸 100%），统一缩放系数封顶控性能，保持宽高比不失真
+  const w = Math.max(320, el.clientWidth)
+  const h = Math.max(240, el.clientHeight)
+  const s = Math.min(1, 1920 / w, 1200 / h)
+  canvas.value.width = Math.round(w * s)
+  canvas.value.height = Math.round(h * s)
+}
+function resetState() {
+  time = 0
+  dayTime = 0
+  day.value = 1
+  seasonNow = seasonOf(1)
+  phaseName = 'day'
+  wx = { type: 'none', t: 0 }
+  kills = { spider: 0, hound: 0, shadow: 0, treeguard: 0, other: 0 }
+  treesChopped = 0
+  houndPlan = { nextDay: randInt(5, 8), at: DAY_LEN * 0.4, warnT: 0, doneToday: false }
+  deer = { spawned: false, warnT: 0 }
+  entities = []
+  monsters = []
+  fires = []
+  players = []
+  decoSpots = []
+  particles = []
+  eid = 1
+  mid = 1
+  fid = 1
+  potOpenId = 0
+  shakeT = 0
+  flashRed = 0
+  pendingEv = []
+  entsAdded = new Set()
+  entsRemoved = new Set()
+  entsDirty = new Set()
+  dead.value = false
+  ghostMode.value = false
+  craftOpen.value = false
+  showMap.value = false
+  tips.value = []
+  seasonBanner.value = ''
+  waitingWorld.value = false
+  invDirty = true
+}
+function start(opts = {}) {
+  const o = typeof opts === 'object' && opts ? opts : {}
+  loop?.stop()
+  resetState()
+  mySkinCode = o.skin || 'wilson'
+  coop = o.coop || null
+  isCoop.value = !!coop
+  // mod 激活：续档以存档记录为准；联机客机等主机全量快照对齐；其余用开局勾选
+  const modIds = o.save && Array.isArray(o.save.mods) ? o.save.mods
+    : coop && !coop.isHost ? []
+    : (o.mods || [])
+  applyModRuntime(activateMods(modIds))
+  if (!coop && modRt.ids.length) {
+    tip(`已装载 Mod：${modRt.metas.map((m) => m.name).join('、')}${modRt.scoreFactor !== 1 ? `（得分 ×${modRt.scoreFactor}）` : ''}`)
+  }
+  if (!tilePats) tilePats = buildTilePatterns()
+  fitCanvas()
+  if (coop) {
+    coop.onMessage(handleNet)
+    const cx2 = WORLD.w / 2
+    const cy2 = WORLD.h / 2
+    players = coop.players.map((pl, i) => makePlayer(pl.seat, pl.name, pl.skin, cx2 + (i - (coop.players.length - 1) / 2) * 60, cy2 + 40))
+    player = players.find((p) => p.seat === coop.mySeat) || players[0]
+    if (coop.isHost) {
+      genWorldAll()
+      // 延迟 + 再发一次全量：客机可能比房主晚挂上 gameHandler，首包会丢
+      tip('联机模式：你是房主（权威模拟端）')
+      setTimeout(() => { if (coop && coop.isHost && playing.value) sendFullWorld() }, 200)
+      setTimeout(() => { if (coop && coop.isHost && playing.value) sendFullWorld() }, 800)
+    } else {
+      tiles = new Uint8Array(GW * GH)
+      road = new Uint8Array(GW * GH)
+      explored = new Uint8Array(GW * GH)
+      waitingWorld.value = true
+      tip('联机模式：等待房主同步世界……')
+      // 多次请求全量世界，直到收到为止（房主可能尚未就绪）
+      const askWorld = () => {
+        if (!coop || coop.isHost || !waitingWorld.value || !playing.value) return
+        coop.send('starve_input', { seat: coop.mySeat, act: { type: 'need_world' } })
+      }
+      setTimeout(askWorld, 100)
+      setTimeout(askWorld, 500)
+      setTimeout(askWorld, 1200)
+    }
+    playing.value = true
+    syncHud(true)
+    emit('score', 0)
+    loop.start()
+    return
+  }
+  players = [makePlayer(0, '我', mySkinCode, WORLD.w / 2, WORLD.h / 2 + 40)]
+  player = players[0]
+  if (o.save) {
+    try {
+      restore(o.save)
+    } catch (err) {
+      console.error('存档恢复失败', err)
+      resetState()
+      players = [makePlayer(0, '我', mySkinCode, WORLD.w / 2, WORLD.h / 2 + 40)]
+      player = players[0]
+      genWorldAll()
+      tip('存档损坏，已开始新的冒险')
+    }
+  } else {
+    genWorldAll()
+    tip('欢迎来到饥荒世界：先撸草和树枝，天黑前必须有火！')
+  }
+  playing.value = true
+  syncHud(true)
+  emit('score', player.score)
+  loop.start()
+}
+function stop() {
+  playing.value = false
+  loop?.stop()
+  coop?.offMessage?.()
+  coop = null
+}
+function useProp() {
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  loop = createLoop(update)
+  keys = new Keys()
+  keys.attach()
+  keys.onPress((k) => {
+    if (!playing.value) return
+    if (k === ' ') doGather()
+    else if (k === 'f' || k === 'F') doAttack()
+    else if (k === 'c' || k === 'C') craftOpen.value = !craftOpen.value
+    else if (k === 'm' || k === 'M') {
+      showMap.value = !showMap.value
+      if (showMap.value) drawMinimap()
+    } else if (k === 'Escape') {
+      if (potOpenId) { potOpenId = 0; potView.value = null }
+      else if (showMap.value) showMap.value = false
+      else craftOpen.value = false
+    } else if (k >= '1' && k <= '9') {
+      clickSlot('main', +k - 1)
+    }
+  })
+  window.addEventListener('resize', fitCanvas)
+  fitCanvas()
+  // 调试后门（e2e / 人工验证）
+  window.__starve = {
+    time: (t) => { dayTime = Math.max(0, Math.min(DAY_LEN - 1, t)) },
+    day: (d) => { day.value = d; onNewDay() },
+    season: (code) => {
+      let d = 1
+      while (seasonOf(d).code !== code && d < 400) d++
+      day.value = d
+      onNewDay()
+      tip(`跳到${seasonNow.name}季（第 ${d} 天）`)
+      return d
+    },
+    give: (code, n = 1) => player && addItem(player, code, n),
+    craft: (code) => player && craftFor(player, code),
+    use: (i, area = 'main') => player && useItemAt(player, area, i),
+    useCode: (code) => {
+      if (!player) return false
+      const i = player.slots.findIndex((s) => s?.code === code)
+      if (i >= 0) { useItemAt(player, 'main', i); return true }
+      const j = player.pack ? player.pack.findIndex((s) => s?.code === code) : -1
+      if (j >= 0) { useItemAt(player, 'pack', j); return true }
+      return false
+    },
+    drop: (code, n = 1) => player && dropLoot(player.x + 30, player.y + 16, code, n),
+    clearInv: () => {
+      if (!player) return false
+      player.slots.fill(null)
+      player.pack?.fill(null)
+      return true
+    },
+    hound: () => { houndPlan.nextDay = day.value; houndPlan.doneToday = false; houndPlan.at = 0; houndPlan.warnT = 0 },
+    boss: () => spawnMob('treeguard', player.x + 200, player.y),
+    deerclops: () => { deer.warnT = 1; deer.spawned = false },
+    spider: () => spawnMob('spider', player.x + 150, player.y),
+    pig: () => spawnMob('pig', player.x + 100, player.y, { home: { x: player.x, y: player.y } }),
+    temp: (v) => { if (player) player.temp = v },
+    pos: (x, y) => { if (player) { player.x = x; player.y = y } },
+    weather: (t) => { wx = { type: t, t: 60 } },
+    san: (v) => { if (player) player.san = v },
+    wipe: () => { entities = []; monsters = [] },
+    // ---- mod 调试 ----
+    mods: () => modRt.ids,
+    hurt: (n) => player && damagePlayer(player, n, '调试伤害'),
+    heal: () => { if (player) { player.hp = CAP.hp; player.hunger = CAP.hunger; player.san = CAP.san } },
+    wipeHostiles: () => {
+      const doomed = monsters.filter((m) => MON[m.kind]?.hostile)
+      doomed.forEach((m) => removeMob(m))
+      return doomed.length
+    },
+    mobHp: (kind) => monsters.find((m) => m.kind === kind)?.hp,
+    nearMobHp: (kind) => {
+      if (!player) return undefined
+      let best = null
+      let bd = Infinity
+      monsters.forEach((m) => {
+        if (m.kind !== kind) return
+        const d = Math.hypot(m.x - player.x, m.y - player.y)
+        if (d < bd) { bd = d; best = m }
+      })
+      return best ? Math.round(best.hp * 100) / 100 : undefined
+    },
+    entCount: (type) => entities.filter((e) => e.type === type).length,
+    find: (type) => { const e = entities.find((e2) => e2.type === type); return e ? [Math.round(e.x), Math.round(e.y)] : null },
+    poke: (type) => {
+      const e = entities
+        .filter((e2) => e2.type === type)
+        .sort((a, b) => Math.hypot(a.x - player.x, a.y - player.y) - Math.hypot(b.x - player.x, b.y - player.y))[0]
+      if (e) hitEntity(player, e)
+      return !!e
+    },
+    pokeMob: (kind) => {
+      const m = monsters.find((m2) => m2.kind === kind)
+      if (m) modRt.mobKinds[kind]?.interact?.(player, m, gCtx)
+      return !!m
+    },
+    tickEnts: (sec) => updateEntities(sec),
+    mobStore: (kind) => monsters.find((m) => m.kind === kind)?.store?.filter(Boolean).map((s) => `${s.code}x${s.n}`),
+    state: () => ({
+      day: day.value, dayTime, phase: phaseName, season: seasonNow.code,
+      hp: player?.hp, hunger: player?.hunger, san: player?.san, temp: player?.temp,
+      pos: player && [Math.round(player.x), Math.round(player.y)],
+      biome: player && BIOMES[biomeAt(tiles, player.x, player.y)]?.code,
+      ents: entities.length, mons: monsters.length, fires: fires.length,
+      monKinds: monsters.map((m) => m.kind),
+      mods: modRt.ids, scoreFactor: modRt.scoreFactor,
+      fps: Math.round(fpsEma),
+      slots: player?.slots.filter(Boolean).map((s) => `${s.code}x${s.n}`),
+      equip: player && Object.fromEntries(Object.entries(player.equip).map(([k, v]) => [k, v?.code || ''])),
+      overlaps: entities.filter((e, i) => entities.some((e2, j) => j > i && !e.deco && !e2.deco && Math.hypot(e.x - e2.x, e.y - e2.y) < 12)).length,
+    }),
+  }
+})
+onBeforeUnmount(() => {
+  loop?.stop()
+  keys?.detach()
+  window.removeEventListener('resize', fitCanvas)
+  coop?.offMessage?.()
+  delete window.__starve
+})
+
+// ---- 模板辅助 ----
+function tabRecipes(tab) {
+  return RECIPES.filter((r) => r.tab === tab)
+}
+function recipeState(r) {
+  const okTech = r.tech === 0 || uiUnlocked.value.includes(r.code) || uiTech.value >= r.tech
+  const okCost = Object.entries(r.cost).every(([c, n]) => (uiCounts.value[c] || 0) >= n)
+  return { okTech, okCost, can: okTech && okCost }
+}
+function costText(r) {
+  return Object.entries(r.cost).map(([c, n]) => `${ITEMS[c]?.name}x${n}`).join(' ')
+}
+function freshClass(f) {
+  if (f < 0) return ''
+  return f > 0.5 ? 'fr-good' : f > 0.2 ? 'fr-mid' : 'fr-bad'
+}
+</script>
+
+<template>
+  <div class="starve-wrap">
+    <canvas ref="canvas" class="starve-canvas" @click="onCanvasClick"></canvas>
+
+    <!-- 右上：时钟 + 三围 + 体温 -->
+    <div v-show="playing || dead" class="hud-right">
+      <canvas ref="clockCv" width="92" height="92" class="clock"></canvas>
+      <div class="badges">
+        <div class="badge" :class="{ low: hp < 40 }" title="生命">
+          <svg viewBox="0 0 24 24"><path d="M12 21C7 16.5 3 13 3 8.8 3 5.9 5.2 4 7.7 4c1.7 0 3.3.9 4.3 2.4C13 4.9 14.6 4 16.3 4 18.8 4 21 5.9 21 8.8c0 4.2-4 7.7-9 12.2z" fill="#d8524e" stroke="#1d1409" stroke-width="1.6"/></svg>
+          <b>{{ hp }}</b>
+        </div>
+        <div class="badge" :class="{ low: hunger < 40 }" title="饥饿">
+          <svg viewBox="0 0 24 24"><ellipse cx="12" cy="12" rx="9" ry="8" fill="#d8a04a" stroke="#1d1409" stroke-width="1.6"/><path d="M7 12c1.6-2 3.2-2 5-.4 1.8 1.6 3.4 1.6 5 .1" fill="none" stroke="#1d1409" stroke-width="1.4"/></svg>
+          <b>{{ hunger }}</b>
+        </div>
+        <div class="badge" :class="{ low: san < 60 }" title="理智">
+          <svg viewBox="0 0 24 24"><path d="M12 3c4.4 0 8 3.2 8 7.4 0 2.7-1.4 4.6-3.4 5.8l.6 4-4-1.6c-.4 0-.8.1-1.2.1-4.4 0-8-3.2-8-7.4S7.6 3 12 3z" fill="#b48ad8" stroke="#1d1409" stroke-width="1.6"/><path d="M9 9.5c.8-1 2-1 2.8 0M13.5 9.5c.8-1 2-1 2.8 0" fill="none" stroke="#1d1409" stroke-width="1.3"/></svg>
+          <b>{{ san }}</b>
+        </div>
+        <div class="badge temp-badge" :class="{ cold: temp <= 5, hot: temp >= 45 }" title="体温">
+          <svg viewBox="0 0 24 24"><rect x="10" y="3" width="4" height="12" rx="2" fill="#ece7db" stroke="#1d1409" stroke-width="1.4"/><circle cx="12" cy="18" r="4" :fill="temp <= 5 ? '#7fa8d8' : '#d8524e'" stroke="#1d1409" stroke-width="1.4"/></svg>
+          <b>{{ temp }}°</b>
+        </div>
+      </div>
+    </div>
+
+    <!-- 左上：存档 / 地图开关 / mod 标签 -->
+    <div v-show="playing" class="hud-left">
+      <button v-if="!isCoop" class="ds-btn" :disabled="saving" @click="doSave(true)">{{ saving ? '已保存' : '保存' }}</button>
+      <button class="ds-btn" @click="showMap = !showMap; showMap && drawMinimap()">地图 M</button>
+      <span v-if="uiMods.length" class="mod-tags" :title="uiMods.map((m) => m.name).join('、')">
+        Mod×{{ uiMods.length }}
+      </span>
+    </div>
+
+    <!-- 小地图 -->
+    <div v-show="playing && showMap" class="ds-map">
+      <canvas ref="mapCv" width="200" height="150"></canvas>
+      <span class="map-note">战争迷雾随探索揭开</span>
+    </div>
+
+    <!-- 幽灵横幅 -->
+    <div v-if="ghostMode && playing" class="ghost-banner">你变成了幽灵……在队友全灭前一直旁观</div>
+
+    <!-- 等待世界 -->
+    <div v-if="waitingWorld" class="waiting">正在从房主同步世界……</div>
+
+    <!-- 合成面板 -->
+    <div v-show="playing && craftOpen" class="craft-panel">
+      <div class="craft-tabs">
+        <button
+          v-for="t in CRAFT_TABS"
+          :key="t.code"
+          class="craft-tab"
+          :class="{ on: craftTab === t.code }"
+          @click="craftTab = t.code"
+        >
+          <img :src="ICONS.url[t.icon]" alt="" />
+          <span>{{ t.name }}</span>
+        </button>
+      </div>
+      <div class="craft-list">
+        <button
+          v-for="r in tabRecipes(craftTab)"
+          :key="r.code"
+          class="craft-item"
+          :class="{ ok: recipeState(r).can, lock: !recipeState(r).okTech }"
+          @click="doCraft(r.code)"
+        >
+          <img :src="ICONS.url[r.code]" alt="" />
+          <span class="ci-name">{{ r.name }}</span>
+          <span class="ci-cost">{{ costText(r) }}</span>
+          <span class="ci-desc">{{ r.desc }}</span>
+          <span v-if="!recipeState(r).okTech" class="ci-lock">{{ r.tech === 1 ? '需科学机器' : '需炼金引擎' }}</span>
+        </button>
+      </div>
+      <div class="craft-note">科技配方在机器旁首次打造后永久解锁（原型机制）</div>
+    </div>
+
+    <!-- 烹饪锅面板 -->
+    <div v-if="playing && potView" class="pot-panel">
+      <b class="pot-title">烹饪锅</b>
+      <div class="pot-ings">
+        <span v-for="i in 4" :key="i" class="pot-cell">
+          <img v-if="potView.ing[i - 1]" :src="ICONS.url[potView.ing[i - 1]]" alt="" />
+        </span>
+      </div>
+      <div class="pot-state">
+        <template v-if="potView.state === 'idle'">
+          {{ potView.ing.length < 4 ? `点击下方食材投料（${potView.ing.length}/4）` : '食材齐了！' }}
+        </template>
+        <template v-else-if="potView.state === 'cook'">炖煮中… {{ potView.t }}s</template>
+        <template v-else>出锅了！点击锅取出料理</template>
+      </div>
+      <button v-if="potView.state === 'idle' && potView.ing.length === 4" class="ds-btn" @click="potCookClick">开始烹饪</button>
+      <button class="pot-close" @click="potOpenId = 0; potView = null">×</button>
+    </div>
+
+    <!-- 提示流 -->
+    <div v-show="playing || dead" class="tips">
+      <div v-for="t in tips" :key="t.id" class="tip-line">{{ t.text }}</div>
+    </div>
+
+    <!-- 动作提示条 -->
+    <div v-show="playing && hint" class="hint-bar">{{ hint }}</div>
+
+    <!-- 季节横幅 -->
+    <div v-if="seasonBanner" class="season-banner" :style="{ borderColor: seasonTag.tint, color: seasonTag.tint }">{{ seasonBanner }}</div>
+
+    <!-- 底部：装备位 + 背包格 + 物品栏 -->
+    <div v-show="playing" class="inv-dock">
+      <div v-if="uiPack" class="pack-row">
+        <button
+          v-for="(s, i) in uiPack"
+          :key="'p' + i"
+          class="slot"
+          :class="{ filled: s }"
+          @click="clickSlot('pack', i)"
+        >
+          <template v-if="s">
+            <img :src="ICONS.url[s.code]" :alt="s.name" :title="s.name" />
+            <b v-if="s.n > 1" class="cnt">{{ s.n }}</b>
+            <i v-if="s.fresh >= 0" class="fresh" :class="freshClass(s.fresh)"></i>
+            <i v-if="s.dur >= 0" class="dur" :style="{ width: Math.max(4, s.dur * 100) + '%' }"></i>
+          </template>
+        </button>
+      </div>
+      <div class="inv-row">
+        <div class="equips">
+          <button
+            v-for="sl in ['hand', 'body', 'head']"
+            :key="sl"
+            class="slot equip-slot"
+            :class="{ filled: uiEquip[sl] }"
+            :title="sl === 'hand' ? '手部（点击卸下）' : sl === 'body' ? '身体（点击卸下）' : '头部（点击卸下）'"
+            @click="unequipClick(sl)"
+          >
+            <span v-if="!uiEquip[sl]" class="eq-hint">{{ sl === 'hand' ? '手' : sl === 'body' ? '身' : '头' }}</span>
+            <template v-else>
+              <img :src="ICONS.url[uiEquip[sl].code]" :alt="uiEquip[sl].name" :title="uiEquip[sl].name" />
+              <i v-if="uiEquip[sl].dur >= 0" class="dur" :style="{ width: Math.max(4, uiEquip[sl].dur * 100) + '%' }"></i>
+            </template>
+          </button>
+        </div>
+        <div class="slots">
+          <button
+            v-for="(s, i) in uiSlots"
+            :key="i"
+            class="slot"
+            :class="{ filled: s }"
+            @click="clickSlot('main', i)"
+          >
+            <span v-if="i < 9" class="key-tag">{{ i + 1 }}</span>
+            <template v-if="s">
+              <img :src="ICONS.url[s.code]" :alt="s.name" :title="s.name" />
+              <b v-if="s.n > 1" class="cnt">{{ s.n }}</b>
+              <i v-if="s.fresh >= 0" class="fresh" :class="freshClass(s.fresh)"></i>
+              <i v-if="s.dur >= 0" class="dur" :style="{ width: Math.max(4, s.dur * 100) + '%' }"></i>
+            </template>
+          </button>
+        </div>
+        <button class="ds-btn craft-toggle" @click="craftOpen = !craftOpen">合成 C</button>
+      </div>
+    </div>
+
+    <!-- 死亡结算 -->
+    <div v-if="dead" class="death-overlay">
+      <div class="death-card">
+        <b class="death-title">你死了</b>
+        <p class="death-sub">黑暗吞噬了一切……</p>
+        <div class="death-stats">
+          <span>存活 <b>{{ deathStats.day }}</b> 天</span>
+          <span>得分 <b>{{ deathStats.score }}</b></span>
+          <span>击杀 <b>{{ deathStats.kills }}</b></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.starve-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: #101418;
+}
+/* 双类选择器抬高优先级，压过 GamePlay 的 .stage canvas { height:auto } 通用规则 */
+.starve-wrap .starve-canvas {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  display: block;
+  cursor: crosshair;
+}
+/* ---- HUD ---- */
+.hud-right {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  pointer-events: none;
+}
+.clock {
+  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
+}
+.badges {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.badge {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: rgba(20, 16, 10, 0.72);
+  border: 1.6px solid rgba(240, 226, 190, 0.25);
+  border-radius: 20px;
+  padding: 3px 10px 3px 5px;
+  min-width: 66px;
+}
+.badge svg {
+  width: 22px;
+  height: 22px;
+}
+.badge b {
+  color: #f4ead2;
+  font-size: 14px;
+}
+.badge.low {
+  animation: pulse-low 1s infinite;
+  border-color: rgba(224, 72, 64, 0.8);
+}
+.temp-badge.cold {
+  border-color: rgba(127, 168, 216, 0.9);
+}
+.temp-badge.hot {
+  border-color: rgba(240, 146, 60, 0.9);
+}
+@keyframes pulse-low {
+  50% { background: rgba(120, 24, 20, 0.75); }
+}
+.hud-left {
+  position: absolute;
+  top: 10px;
+  left: 12px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.mod-tags {
+  background: rgba(88, 52, 130, 0.6);
+  border: 1.6px solid rgba(200, 160, 255, 0.4);
+  color: #e6d4ff;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 4px 8px;
+  border-radius: 8px;
+  cursor: help;
+}
+.ds-btn {
+  background: rgba(20, 16, 10, 0.78);
+  border: 1.6px solid rgba(240, 226, 190, 0.35);
+  color: #f4ead2;
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+}
+.ds-btn:hover {
+  border-color: #e8bc5a;
+}
+/* ---- 小地图 ---- */
+.ds-map {
+  position: absolute;
+  top: 52px;
+  left: 12px;
+  background: rgba(14, 11, 7, 0.9);
+  border: 2px solid rgba(240, 226, 190, 0.35);
+  border-radius: 10px;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+}
+.ds-map canvas {
+  border-radius: 6px;
+  image-rendering: pixelated;
+}
+.map-note {
+  color: #b8a888;
+  font-size: 11px;
+}
+/* ---- 合成 ---- */
+.craft-panel {
+  position: absolute;
+  left: 12px;
+  bottom: 88px;
+  width: 340px;
+  max-height: 62%;
+  background: rgba(18, 14, 9, 0.92);
+  border: 2px solid rgba(240, 226, 190, 0.3);
+  border-radius: 12px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.craft-tabs {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.craft-tab {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  background: rgba(60, 48, 30, 0.5);
+  border: 1.4px solid transparent;
+  color: #d8c8a8;
+  border-radius: 7px;
+  padding: 3px 7px;
+  font-size: 12px;
+  cursor: pointer;
+  font-family: inherit;
+}
+.craft-tab img {
+  width: 18px;
+  height: 18px;
+}
+.craft-tab.on {
+  border-color: #e8bc5a;
+  color: #f4ead2;
+  background: rgba(100, 78, 40, 0.6);
+}
+.craft-list {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.craft-item {
+  position: relative;
+  display: grid;
+  grid-template-columns: 34px 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 8px;
+  align-items: center;
+  text-align: left;
+  background: rgba(46, 36, 22, 0.55);
+  border: 1.4px solid rgba(240, 226, 190, 0.14);
+  border-radius: 9px;
+  padding: 5px 8px;
+  cursor: pointer;
+  opacity: 0.55;
+  font-family: inherit;
+}
+.craft-item img {
+  grid-row: span 2;
+  width: 30px;
+  height: 30px;
+}
+.craft-item.ok {
+  opacity: 1;
+  border-color: rgba(232, 188, 90, 0.55);
+}
+.craft-item.ok:hover {
+  background: rgba(100, 78, 40, 0.6);
+}
+.craft-item.lock {
+  opacity: 0.42;
+}
+.ci-name {
+  color: #f4ead2;
+  font-size: 13px;
+}
+.ci-cost {
+  color: #d8b478;
+  font-size: 11px;
+  justify-self: end;
+  grid-column: 2;
+  grid-row: 1;
+  text-align: right;
+}
+.ci-desc {
+  grid-column: 2;
+  color: #a89878;
+  font-size: 11px;
+}
+.ci-lock {
+  position: absolute;
+  right: 8px;
+  bottom: 5px;
+  color: #7fd8f0;
+  font-size: 11px;
+}
+.craft-note {
+  color: #8a7c62;
+  font-size: 11px;
+  text-align: center;
+}
+/* ---- 烹饪锅 ---- */
+.pot-panel {
+  position: absolute;
+  right: 12px;
+  bottom: 96px;
+  width: 210px;
+  background: rgba(18, 14, 9, 0.94);
+  border: 2px solid rgba(240, 226, 190, 0.35);
+  border-radius: 12px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+.pot-title {
+  color: #f4ead2;
+  font-size: 15px;
+}
+.pot-ings {
+  display: flex;
+  gap: 6px;
+}
+.pot-cell {
+  width: 38px;
+  height: 38px;
+  border: 1.6px dashed rgba(240, 226, 190, 0.4);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(46, 36, 22, 0.5);
+}
+.pot-cell img {
+  width: 30px;
+  height: 30px;
+}
+.pot-state {
+  color: #d8c8a8;
+  font-size: 12px;
+  text-align: center;
+}
+.pot-close {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  background: none;
+  border: none;
+  color: #b8a888;
+  font-size: 16px;
+  cursor: pointer;
+}
+/* ---- 提示 ---- */
+.tips {
+  position: absolute;
+  left: 50%;
+  top: 14%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  pointer-events: none;
+}
+.tip-line {
+  background: rgba(16, 12, 8, 0.78);
+  color: #f4ead2;
+  border: 1.4px solid rgba(240, 226, 190, 0.25);
+  border-radius: 16px;
+  padding: 4px 14px;
+  font-size: 13px;
+  animation: tip-in 0.25s ease-out;
+}
+@keyframes tip-in {
+  from { transform: translateY(-8px); opacity: 0; }
+}
+.hint-bar {
+  position: absolute;
+  bottom: 78px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(16, 12, 8, 0.66);
+  color: #d8c8a8;
+  border-radius: 14px;
+  padding: 3px 14px;
+  font-size: 12px;
+  pointer-events: none;
+  white-space: nowrap;
+}
+.season-banner {
+  position: absolute;
+  top: 26%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 34px;
+  letter-spacing: 12px;
+  padding: 10px 34px;
+  border-top: 2px solid;
+  border-bottom: 2px solid;
+  background: rgba(12, 9, 6, 0.55);
+  pointer-events: none;
+  animation: banner-in 0.6s ease-out;
+}
+@keyframes banner-in {
+  from { opacity: 0; letter-spacing: 30px; }
+}
+.ghost-banner {
+  position: absolute;
+  top: 8%;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #bfe8ff;
+  background: rgba(30, 50, 70, 0.6);
+  border: 1.4px solid rgba(150, 220, 255, 0.4);
+  border-radius: 16px;
+  padding: 5px 18px;
+  font-size: 13px;
+  pointer-events: none;
+}
+.waiting {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f4ead2;
+  font-size: 18px;
+  background: rgba(10, 8, 5, 0.55);
+  pointer-events: none;
+}
+/* ---- 底部物品栏 ---- */
+.inv-dock {
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.inv-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.slots,
+.pack-row,
+.equips {
+  display: flex;
+  gap: 4px;
+}
+.pack-row {
+  background: rgba(70, 54, 32, 0.55);
+  border-radius: 10px;
+  padding: 3px;
+}
+.slot {
+  position: relative;
+  width: 42px;
+  height: 42px;
+  background: rgba(26, 20, 12, 0.82);
+  border: 1.6px solid rgba(240, 226, 190, 0.22);
+  border-radius: 9px;
+  cursor: pointer;
+  padding: 0;
+}
+.slot:hover {
+  border-color: #e8bc5a;
+}
+.slot img {
+  width: 32px;
+  height: 32px;
+  margin-top: 2px;
+  pointer-events: none;
+}
+.slot .cnt {
+  position: absolute;
+  right: 3px;
+  bottom: 2px;
+  color: #f4ead2;
+  font-size: 11px;
+  text-shadow: 0 1px 2px #000;
+}
+.key-tag {
+  position: absolute;
+  left: 3px;
+  top: 1px;
+  color: rgba(240, 226, 190, 0.5);
+  font-size: 10px;
+}
+.fresh {
+  position: absolute;
+  left: 4px;
+  bottom: 4px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+.fr-good { background: #7fc86a; }
+.fr-mid { background: #e8bc5a; }
+.fr-bad { background: #d8524e; }
+.dur {
+  position: absolute;
+  left: 3px;
+  bottom: 1px;
+  height: 3px;
+  border-radius: 2px;
+  background: linear-gradient(90deg, #e8bc5a, #7fc86a);
+  max-width: calc(100% - 6px);
+}
+.equip-slot {
+  border-color: rgba(127, 216, 240, 0.35);
+  background: rgba(20, 26, 30, 0.85);
+}
+.eq-hint {
+  color: rgba(240, 226, 190, 0.45);
+  font-size: 13px;
+}
+.craft-toggle {
+  height: 42px;
+}
+/* ---- 死亡 ---- */
+.death-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(8, 5, 4, 0.82);
+  animation: death-in 1.2s ease-out;
+}
+@keyframes death-in {
+  from { opacity: 0; }
+}
+.death-card {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+}
+.death-title {
+  font-size: 44px;
+  color: #d8524e;
+  letter-spacing: 14px;
+}
+.death-sub {
+  color: #b8a888;
+  margin: 0;
+}
+.death-stats {
+  display: flex;
+  gap: 22px;
+  color: #d8c8a8;
+  font-size: 15px;
+}
+.death-stats b {
+  color: #f4ead2;
+  font-size: 20px;
+}
+</style>
diff --git a/src/games/components/SudokuGame.vue b/src/games/components/SudokuGame.vue
new file mode 100644
index 0000000..dd63e43
--- /dev/null
+++ b/src/games/components/SudokuGame.vue
@@ -0,0 +1,248 @@
+<script setup>
+// 数独：挖洞生成谜题，填满全盘（错误即时标红），用时越短分越高
+import { ref, computed } from 'vue'
+import { randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const grid = ref([]) // 当前盘面（0=空）
+const fixed = ref([]) // 是否题目给定格
+const solution = ref([]) // 完整解
+const selected = ref(null) // 选中格 [r,c]
+const playing = ref(false)
+const errors = ref(0)
+let startTs = 0
+
+// 生成完整数独解（回溯）
+function generateFull() {
+  const g = Array.from({ length: 9 }, () => Array(9).fill(0))
+  const ok = (r, c, v) => {
+    for (let i = 0; i < 9; i++) {
+      if (g[r][i] === v || g[i][c] === v) return false
+    }
+    const br = Math.floor(r / 3) * 3
+    const bc = Math.floor(c / 3) * 3
+    for (let i = 0; i < 3; i++) {
+      for (let j = 0; j < 3; j++) {
+        if (g[br + i][bc + j] === v) return false
+      }
+    }
+    return true
+  }
+  const fill = (pos) => {
+    if (pos === 81) return true
+    const r = Math.floor(pos / 9)
+    const c = pos % 9
+    const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9].sort(() => Math.random() - 0.5)
+    for (const v of nums) {
+      if (ok(r, c, v)) {
+        g[r][c] = v
+        if (fill(pos + 1)) return true
+        g[r][c] = 0
+      }
+    }
+    return false
+  }
+  fill(0)
+  return g
+}
+
+// 数字键盘可用数字剩余数量
+const counts = computed(() => {
+  const map = {}
+  for (let v = 1; v <= 9; v++) map[v] = 9
+  grid.value.forEach((row) => row.forEach((v) => v && map[v]--))
+  return map
+})
+
+function select(r, c) {
+  if (!playing.value || fixed.value[r][c]) return
+  selected.value = [r, c]
+}
+
+// 填数
+function input(v) {
+  if (!playing.value || !selected.value) return
+  const [r, c] = selected.value
+  if (fixed.value[r][c]) return
+  if (grid.value[r][c] === v) {
+    grid.value[r][c] = 0 // 再点一次清除
+    return
+  }
+  grid.value[r][c] = v
+  if (v !== solution.value[r][c]) errors.value++
+  // 检查完成（全部与解一致）
+  const done = grid.value.every((row, ri) => row.every((val, ci) => val === solution.value[ri][ci]))
+  if (done) {
+    playing.value = false
+    const secs = Math.round((Date.now() - startTs) / 1000)
+    // 得分：600 基础 - 用时 - 错误×30，下限 60
+    const score = Math.max(60, 600 - secs - errors.value * 30)
+    emit('score', score)
+    emit('end', { score })
+  }
+}
+
+// 格子样式：错误标红、选中高亮、同数字提示
+function cellClass(r, c) {
+  const v = grid.value[r]?.[c]
+  return {
+    fixed: fixed.value[r]?.[c],
+    selected: selected.value?.[0] === r && selected.value?.[1] === c,
+    error: v && v !== solution.value[r][c],
+    same: v && selected.value && grid.value[selected.value[0]][selected.value[1]] === v,
+    'br-right': c === 2 || c === 5,
+    'br-bottom': r === 2 || r === 5,
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  solution.value = generateFull()
+  grid.value = solution.value.map((row) => [...row])
+  // 挖 46 个洞
+  let holes = 46
+  while (holes > 0) {
+    const r = randInt(0, 8)
+    const c = randInt(0, 8)
+    if (grid.value[r][c]) {
+      grid.value[r][c] = 0
+      holes--
+    }
+  }
+  fixed.value = grid.value.map((row) => row.map((v) => v !== 0))
+  selected.value = null
+  errors.value = 0
+  playing.value = true
+  startTs = Date.now()
+  emit('score', 0)
+}
+function stop() {}
+// 提示卡：为选中格（或随机空格/错格）填入正确答案
+function useProp(code) {
+  if (code !== 'hint' || !playing.value) return false
+  let target = selected.value
+  if (!target || grid.value[target[0]][target[1]] === solution.value[target[0]][target[1]]) {
+    // 找一个未填或填错的格
+    const empties = []
+    grid.value.forEach((row, r) =>
+      row.forEach((v, c) => {
+        if (v !== solution.value[r][c]) empties.push([r, c])
+      })
+    )
+    if (!empties.length) return false
+    target = empties[randInt(0, empties.length - 1)]
+  }
+  const [r, c] = target
+  grid.value[r][c] = solution.value[r][c]
+  // 完成检查（与 input 相同的判定）
+  const done = grid.value.every((row, ri) => row.every((val, ci) => val === solution.value[ri][ci]))
+  if (done) {
+    playing.value = false
+    const secs = Math.round((Date.now() - startTs) / 1000)
+    const score = Math.max(60, 600 - secs - errors.value * 30)
+    emit('score', score)
+    emit('end', { score })
+  }
+  return true
+}
+defineExpose({ start, stop, useProp })
+</script>
+
+<template>
+  <div class="sudoku">
+    <div class="hud text-dim">错误：<b :class="{ err: errors > 0 }">{{ errors }}</b> 次</div>
+    <div class="board">
+      <template v-for="(row, r) in grid" :key="r">
+        <button v-for="(v, c) in row" :key="`${r}-${c}`" class="cell" :class="cellClass(r, c)" @click="select(r, c)">
+          {{ v || '' }}
+        </button>
+      </template>
+    </div>
+    <div class="numpad">
+      <button v-for="n in 9" :key="n" class="num" :disabled="counts[n] <= 0" @click="input(n)">
+        {{ n }}<small>{{ counts[n] }}</small>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sudoku {
+  width: min(440px, 92vw);
+  text-align: center;
+}
+.hud {
+  margin-bottom: 10px;
+  font-size: 13px;
+}
+.err {
+  color: #ff5d73;
+}
+.board {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  gap: 1px;
+  background: var(--border);
+  border: 2px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.cell {
+  aspect-ratio: 1;
+  border: none;
+  background: var(--bg-card);
+  color: var(--accent);
+  font-size: 19px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.cell.fixed {
+  color: var(--text);
+  background: var(--bg-panel);
+  cursor: default;
+}
+.cell.same {
+  background: color-mix(in srgb, var(--accent) 18%, var(--bg-card));
+}
+.cell.selected {
+  background: color-mix(in srgb, var(--primary) 32%, var(--bg-card));
+}
+.cell.error {
+  color: #ff5d73;
+}
+.cell.br-right {
+  border-right: 2px solid var(--text-dim);
+}
+.cell.br-bottom {
+  border-bottom: 2px solid var(--text-dim);
+}
+.numpad {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  gap: 6px;
+  margin-top: 12px;
+}
+.num {
+  padding: 8px 0 4px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text);
+  font-size: 17px;
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.num small {
+  font-size: 10px;
+  color: var(--text-dim);
+}
+.num:disabled {
+  opacity: 0.3;
+}
+.num:hover:not(:disabled) {
+  border-color: var(--primary);
+}
+</style>
diff --git a/src/games/components/TankGame.vue b/src/games/components/TankGame.vue
new file mode 100644
index 0000000..1748158
--- /dev/null
+++ b/src/games/components/TankGame.vue
@@ -0,0 +1,311 @@
+<script setup>
+// 坦克大战：消灭一波波敌军并保卫基地，敌弹与撞击都会致命
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, Keys, palette, randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 660
+const H = 560
+const TILE = 44
+let ctx
+let keys
+let loop
+let me = { x: W / 2, y: H - 60, dir: 0, cd: 0 } // dir: 0上 1右 2下 3左
+let base = { x: W / 2, y: H - 26, hp: 1 }
+let walls = [] // {x,y,hp}
+let enemies = [] // {x,y,dir,cd,moveCd,hp}
+let bullets = [] // {x,y,dir,mine}
+let score = 0
+let waveNum = 1
+let alive = false
+let shieldOn = false
+let invincible = 0
+const DIRS = [
+  [0, -1],
+  [1, 0],
+  [0, 1],
+  [-1, 0],
+]
+
+// 生成一波敌人与随机砖墙
+function buildWave() {
+  enemies = []
+  const count = 3 + waveNum
+  for (let i = 0; i < count; i++) {
+    enemies.push({
+      x: randInt(40, W - 40),
+      y: randInt(30, 120),
+      dir: 2,
+      cd: Math.random() * 2 + 1,
+      moveCd: 0,
+      hp: waveNum >= 3 && i % 3 === 0 ? 2 : 1,
+    })
+  }
+  walls = []
+  for (let i = 0; i < 14; i++) {
+    walls.push({ x: randInt(1, 13) * TILE, y: randInt(4, 9) * TILE, hp: 2 })
+  }
+  // 基地护墙
+  walls.push({ x: base.x - TILE, y: H - TILE, hp: 3 }, { x: base.x + TILE - TILE, y: H - TILE * 2, hp: 3 }, { x: base.x, y: H - TILE * 2, hp: 3 }, { x: base.x - TILE, y: H - TILE * 2, hp: 3 })
+}
+
+function fire(from, mine) {
+  bullets.push({ x: from.x, y: from.y, dir: from.dir, mine })
+}
+
+function rectOf(e, size = 30) {
+  return { l: e.x - size / 2, t: e.y - size / 2, r: e.x + size / 2, b: e.y + size / 2 }
+}
+function overlap(a, b) {
+  return a.l < b.r && a.r > b.l && a.t < b.b && a.b > b.t
+}
+
+function tryMove(unit, dx, dy) {
+  const nx = unit.x + dx
+  const ny = unit.y + dy
+  if (nx < 18 || nx > W - 18 || ny < 18 || ny > H - 18) return false
+  const nr = { l: nx - 15, t: ny - 15, r: nx + 15, b: ny + 15 }
+  // 撞墙判定
+  for (const w of walls) {
+    if (w.hp > 0 && overlap(nr, { l: w.x, t: w.y, r: w.x + TILE, b: w.y + TILE })) return false
+  }
+  unit.x = nx
+  unit.y = ny
+  return true
+}
+
+function update(dt) {
+  if (invincible > 0) invincible -= dt
+  me.cd -= dt
+  // 玩家移动（同时更新朝向）
+  const speed = 190
+  if (keys.has('ArrowUp') || keys.has('w')) {
+    me.dir = 0
+    tryMove(me, 0, -speed * dt)
+  } else if (keys.has('ArrowRight') || keys.has('d')) {
+    me.dir = 1
+    tryMove(me, speed * dt, 0)
+  } else if (keys.has('ArrowDown') || keys.has('s')) {
+    me.dir = 2
+    tryMove(me, 0, speed * dt)
+  } else if (keys.has('ArrowLeft') || keys.has('a')) {
+    me.dir = 3
+    tryMove(me, -speed * dt, 0)
+  }
+  if (keys.has(' ') && me.cd <= 0) {
+    fire(me, true)
+    me.cd = 0.38
+  }
+  // 敌人 AI：随机转向 + 偏向基地方向 + 定时开火
+  enemies.forEach((e) => {
+    e.moveCd -= dt
+    e.cd -= dt
+    if (e.moveCd <= 0) {
+      // 40% 朝基地方向，60% 随机
+      if (Math.random() < 0.4) {
+        e.dir = Math.abs(base.x - e.x) > Math.abs(base.y - e.y) ? (base.x > e.x ? 1 : 3) : 2
+      } else {
+        e.dir = randInt(0, 3)
+      }
+      e.moveCd = Math.random() * 1.4 + 0.5
+    }
+    const [dx, dy] = DIRS[e.dir]
+    if (!tryMove(e, dx * 110 * dt, dy * 110 * dt)) e.moveCd = 0 // 撞墙立刻换向
+    if (e.cd <= 0) {
+      fire(e, false)
+      e.cd = Math.random() * 2 + 1.2
+    }
+  })
+  // 子弹飞行与命中
+  bullets.forEach((b) => {
+    const [dx, dy] = DIRS[b.dir]
+    b.x += dx * 420 * dt
+    b.y += dy * 420 * dt
+  })
+  bullets = bullets.filter((b) => {
+    if (b.x < 0 || b.x > W || b.y < 0 || b.y > H) return false
+    // 打墙
+    for (const w of walls) {
+      if (w.hp > 0 && b.x > w.x && b.x < w.x + TILE && b.y > w.y && b.y < w.y + TILE) {
+        w.hp--
+        return false
+      }
+    }
+    if (b.mine) {
+      // 打敌人
+      for (const e of enemies) {
+        if (Math.abs(e.x - b.x) < 18 && Math.abs(e.y - b.y) < 18) {
+          e.hp--
+          if (e.hp <= 0) {
+            score += 20
+            emit('score', score)
+          }
+          return false
+        }
+      }
+    } else {
+      // 打玩家
+      if (invincible <= 0 && Math.abs(me.x - b.x) < 17 && Math.abs(me.y - b.y) < 17) {
+        if (shieldOn) {
+          shieldOn = false
+          invincible = 1
+        } else {
+          gameOver()
+        }
+        return false
+      }
+      // 打基地
+      if (Math.abs(base.x - b.x) < 20 && Math.abs(base.y - b.y) < 16) {
+        gameOver()
+        return false
+      }
+    }
+    return true
+  })
+  enemies = enemies.filter((e) => e.hp > 0)
+  walls = walls.filter((w) => w.hp > 0)
+  // 敌人撞玩家
+  if (invincible <= 0 && enemies.some((e) => Math.abs(e.x - me.x) < 30 && Math.abs(e.y - me.y) < 30)) {
+    if (shieldOn) {
+      shieldOn = false
+      invincible = 1
+    } else {
+      gameOver()
+      return
+    }
+  }
+  // 全歼 → 下一波 +100
+  if (alive && enemies.length === 0) {
+    score += 100
+    waveNum++
+    emit('score', score)
+    buildWave()
+  }
+  if (alive) draw()
+}
+
+function gameOver() {
+  if (!alive) return
+  alive = false
+  loop.stop()
+  draw()
+  emit('end', { score })
+}
+
+function drawTank(x, y, dir, color, emoji) {
+  ctx.save()
+  ctx.translate(x, y)
+  ctx.rotate((dir * Math.PI) / 2)
+  ctx.fillStyle = color
+  ctx.beginPath()
+  ctx.roundRect(-15, -15, 30, 30, 6)
+  ctx.fill()
+  // 炮管
+  ctx.fillRect(-3, -24, 6, 14)
+  ctx.restore()
+  ctx.font = '15px serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillText(emoji, x, y)
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, W, H)
+  // 砖墙
+  walls.forEach((w) => {
+    ctx.fillStyle = w.hp >= 3 ? '#8a8f98' : w.hp === 2 ? '#b0703c' : '#8a5428'
+    ctx.fillRect(w.x + 1, w.y + 1, TILE - 2, TILE - 2)
+    ctx.strokeStyle = 'rgba(0,0,0,0.35)'
+    ctx.strokeRect(w.x + 1, w.y + 1, TILE - 2, TILE - 2)
+  })
+  // 基地
+  ctx.font = '30px serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillText('🏰', base.x, base.y)
+  // 玩家（无敌闪烁）
+  if (invincible <= 0 || Math.floor(performance.now() / 90) % 2 === 0) {
+    drawTank(me.x, me.y, me.dir, p.accent, '⭐')
+  }
+  if (shieldOn) {
+    ctx.strokeStyle = p.accent
+    ctx.lineWidth = 3
+    ctx.beginPath()
+    ctx.arc(me.x, me.y, 26, 0, 7)
+    ctx.stroke()
+  }
+  // 敌人
+  enemies.forEach((e) => drawTank(e.x, e.y, e.dir, e.hp >= 2 ? '#ff9f45' : '#ff5d73', ''))
+  // 子弹
+  bullets.forEach((b) => {
+    ctx.fillStyle = b.mine ? p.primary2 : '#ff5d73'
+    ctx.beginPath()
+    ctx.arc(b.x, b.y, 4, 0, 7)
+    ctx.fill()
+  })
+  // 波次
+  ctx.fillStyle = p.dim
+  ctx.font = '13px sans-serif'
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'top'
+  ctx.fillText(`第 ${waveNum} 波 · 剩余敌军 ${enemies.length}`, 10, 8)
+}
+
+// ---- 对外接口 ----
+function start() {
+  me = { x: W / 2 - 100, y: H - 60, dir: 0, cd: 0 }
+  base = { x: W / 2, y: H - 26, hp: 1 }
+  bullets = []
+  score = 0
+  waveNum = 1
+  shieldOn = false
+  invincible = 0
+  alive = true
+  buildWave()
+  emit('score', 0)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  keys?.detach()
+}
+// 复活：原地复活+无敌2秒；炸弹：全歼当前敌人；护盾：挡一次
+function useProp(code) {
+  if (code === 'revive' && !alive) {
+    invincible = 2
+    alive = true
+    bullets = bullets.filter((b) => b.mine)
+    loop.start()
+    return true
+  }
+  if (code === 'bomb' && alive) {
+    score += enemies.length * 20
+    emit('score', score)
+    enemies = []
+    return true
+  }
+  if (code === 'shield' && alive && !shieldOn) {
+    shieldOn = true
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  keys = new Keys()
+  keys.attach()
+  loop = createLoop(update)
+  buildWave()
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/TetrisGame.vue b/src/games/components/TetrisGame.vue
new file mode 100644
index 0000000..a4babcf
--- /dev/null
+++ b/src/games/components/TetrisGame.vue
@@ -0,0 +1,217 @@
+<script setup>
+// 俄罗斯方块：七种方块消行得分，速度随等级提升
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { Keys, palette } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+// 棋盘 10 列 × 20 行，每格 24px；右侧 150px 信息面板
+const COLS = 10
+const ROWS = 20
+const CELL = 24
+const W = COLS * CELL + 150
+const H = ROWS * CELL
+let ctx
+let keys
+let board = [] // 已固定的格子（0 空，否则颜色索引）
+let cur = null // 当前下落方块 {shape, x, y, color}
+let next = null // 下一个方块
+let dropTimer = 0
+let score = 0
+let lines = 0
+let level = 1
+let alive = false
+
+// 七种方块形状（4x4 矩阵内的坐标）与配色索引
+const SHAPES = [
+  { cells: [[0, 1], [1, 1], [2, 1], [3, 1]], color: 0 }, // I
+  { cells: [[0, 0], [1, 0], [0, 1], [1, 1]], color: 1 }, // O
+  { cells: [[1, 0], [0, 1], [1, 1], [2, 1]], color: 2 }, // T
+  { cells: [[1, 0], [2, 0], [0, 1], [1, 1]], color: 3 }, // S
+  { cells: [[0, 0], [1, 0], [1, 1], [2, 1]], color: 4 }, // Z
+  { cells: [[0, 0], [0, 1], [1, 1], [2, 1]], color: 5 }, // J
+  { cells: [[2, 0], [0, 1], [1, 1], [2, 1]], color: 6 }, // L
+]
+const COLORS = ['#00e5ff', '#ffd500', '#b26bff', '#4ade80', '#ff5d73', '#4f8cff', '#ff9f45']
+
+function newPiece() {
+  const s = SHAPES[Math.floor(Math.random() * SHAPES.length)]
+  return { cells: s.cells.map((c) => [...c]), color: s.color, x: 3, y: -1 }
+}
+
+// 检测方块在 (dx,dy) 偏移或旋转后是否合法
+function fits(piece, dx = 0, dy = 0, cells = null) {
+  const cs = cells || piece.cells
+  return cs.every(([cx, cy]) => {
+    const nx = piece.x + cx + dx
+    const ny = piece.y + cy + dy
+    if (nx < 0 || nx >= COLS || ny >= ROWS) return false
+    if (ny < 0) return true
+    return !board[ny][nx]
+  })
+}
+
+// 顺时针旋转（绕 1,1）
+function rotate() {
+  const rotated = cur.cells.map(([cx, cy]) => [1 - (cy - 1), 1 + (cx - 1)])
+  if (fits(cur, 0, 0, rotated)) cur.cells = rotated
+  else if (fits(cur, -1, 0, rotated)) { cur.x -= 1; cur.cells = rotated } // 踢墙
+  else if (fits(cur, 1, 0, rotated)) { cur.x += 1; cur.cells = rotated }
+}
+
+// 方块固定到棋盘并消行
+function lock() {
+  cur.cells.forEach(([cx, cy]) => {
+    const y = cur.y + cy
+    if (y >= 0) board[y][cur.x + cx] = cur.color + 1
+  })
+  // 消行
+  let cleared = 0
+  for (let y = ROWS - 1; y >= 0; y--) {
+    if (board[y].every((v) => v)) {
+      board.splice(y, 1)
+      board.unshift(Array(COLS).fill(0))
+      cleared++
+      y++ // 该行已被替换，重新检查
+    }
+  }
+  if (cleared) {
+    // 消行计分：1/2/3/4 行 = 100/300/600/1000 × 等级
+    score += [0, 100, 300, 600, 1000][cleared] * level
+    lines += cleared
+    level = Math.floor(lines / 8) + 1
+    emit('score', score)
+    restartDrop()
+  }
+  cur = next
+  next = newPiece()
+  // 新方块放不下 → 结束
+  if (!fits(cur)) {
+    alive = false
+    clearInterval(dropTimer)
+    draw()
+    emit('end', { score })
+  }
+}
+
+// 下落一步
+function fall() {
+  if (fits(cur, 0, 1)) cur.y++
+  else lock()
+  draw()
+}
+
+function restartDrop() {
+  clearInterval(dropTimer)
+  // 等级越高下落越快（下限 90ms）
+  dropTimer = setInterval(fall, Math.max(90, 650 - (level - 1) * 60))
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, W, H)
+  // 棋盘区
+  ctx.fillStyle = 'rgba(0,0,0,0.28)'
+  ctx.fillRect(0, 0, COLS * CELL, H)
+  const cell = (x, y, colorIdx, ghost = false) => {
+    ctx.fillStyle = ghost ? 'rgba(255,255,255,0.10)' : COLORS[colorIdx]
+    ctx.beginPath()
+    ctx.roundRect(x * CELL + 1.5, y * CELL + 1.5, CELL - 3, CELL - 3, 5)
+    ctx.fill()
+  }
+  // 已固定格子
+  for (let y = 0; y < ROWS; y++) {
+    for (let x = 0; x < COLS; x++) {
+      if (board[y][x]) cell(x, y, board[y][x] - 1)
+    }
+  }
+  if (cur && alive) {
+    // 幽灵落点提示
+    let gy = 0
+    while (fits(cur, 0, gy + 1)) gy++
+    cur.cells.forEach(([cx, cy]) => {
+      if (cur.y + cy + gy >= 0) cell(cur.x + cx, cur.y + cy + gy, cur.color, true)
+    })
+    // 当前方块
+    cur.cells.forEach(([cx, cy]) => {
+      if (cur.y + cy >= 0) cell(cur.x + cx, cur.y + cy, cur.color)
+    })
+  }
+  // 右侧信息面板
+  const px = COLS * CELL + 16
+  ctx.fillStyle = p.text
+  ctx.font = 'bold 15px sans-serif'
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'top'
+  ctx.fillText('下一个', px, 14)
+  if (next) {
+    next.cells.forEach(([cx, cy]) => {
+      ctx.fillStyle = COLORS[next.color]
+      ctx.beginPath()
+      ctx.roundRect(px + cx * 20, 44 + cy * 20, 17, 17, 4)
+      ctx.fill()
+    })
+  }
+  ctx.fillStyle = p.dim
+  ctx.font = '13px sans-serif'
+  ctx.fillText(`分数  ${score}`, px, 130)
+  ctx.fillText(`行数  ${lines}`, px, 154)
+  ctx.fillText(`等级  ${level}`, px, 178)
+}
+
+// ---- 对外接口 ----
+function start() {
+  board = Array.from({ length: ROWS }, () => Array(COLS).fill(0))
+  score = 0
+  lines = 0
+  level = 1
+  cur = newPiece()
+  next = newPiece()
+  alive = true
+  emit('score', 0)
+  restartDrop()
+  draw()
+}
+function stop() {
+  clearInterval(dropTimer)
+  keys?.detach()
+}
+// 炸弹清屏：清除底部两行（整体下移）
+function useProp(code) {
+  if (code === 'bomb' && alive) {
+    board.splice(ROWS - 2, 2)
+    board.unshift(Array(COLS).fill(0), Array(COLS).fill(0))
+    draw()
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  keys = new Keys()
+  keys.attach()
+  keys.onPress((k) => {
+    if (!alive || !cur) return
+    if (k === 'ArrowLeft' && fits(cur, -1, 0)) cur.x--
+    if (k === 'ArrowRight' && fits(cur, 1, 0)) cur.x++
+    if (k === 'ArrowUp') rotate()
+    if (k === 'ArrowDown') fall()
+    if (k === ' ') {
+      // 硬降：直接落到底
+      while (fits(cur, 0, 1)) cur.y++
+      lock()
+    }
+    draw()
+  })
+  board = Array.from({ length: ROWS }, () => Array(COLS).fill(0))
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/TicTacToeGame.vue b/src/games/components/TicTacToeGame.vue
new file mode 100644
index 0000000..4f24a00
--- /dev/null
+++ b/src/games/components/TicTacToeGame.vue
@@ -0,0 +1,148 @@
+<script setup>
+// 井字棋：与 AI 对战，AI 八成走最优（留两成破绽）
+import { ref } from 'vue'
+
+const emit = defineEmits(['score', 'end'])
+const cells = ref(Array(9).fill('')) // '' | X | O
+const playing = ref(false)
+const status = ref('你执 ❌ 先手')
+let round = 0 // 连胜计分：赢一局继续下一局
+let score = 0
+
+const LINES = [
+  [0, 1, 2], [3, 4, 5], [6, 7, 8],
+  [0, 3, 6], [1, 4, 7], [2, 5, 8],
+  [0, 4, 8], [2, 4, 6],
+]
+
+function winner(b) {
+  for (const [a, c, d] of LINES) {
+    if (b[a] && b[a] === b[c] && b[a] === b[d]) return b[a]
+  }
+  return b.every((v) => v) ? 'draw' : null
+}
+
+// 极小极大搜索（AI 视角 O）
+function minimax(b, isAI) {
+  const w = winner(b)
+  if (w === 'O') return { v: 10 }
+  if (w === 'X') return { v: -10 }
+  if (w === 'draw') return { v: 0 }
+  let best = null
+  for (let i = 0; i < 9; i++) {
+    if (b[i]) continue
+    b[i] = isAI ? 'O' : 'X'
+    const r = minimax(b, !isAI)
+    b[i] = ''
+    if (!best || (isAI ? r.v > best.v : r.v < best.v)) best = { v: r.v, i }
+  }
+  return best
+}
+
+function click(i) {
+  if (!playing.value || cells.value[i]) return
+  cells.value[i] = 'X'
+  if (checkEnd()) return
+  // AI 落子：80% 最优，20% 随机（可被击败）
+  status.value = 'AI 思考中…'
+  setTimeout(() => {
+    if (!playing.value) return
+    const empty = cells.value.map((v, idx) => (v ? -1 : idx)).filter((v) => v >= 0)
+    let move
+    if (Math.random() < 0.8) {
+      move = minimax([...cells.value], true).i
+    } else {
+      move = empty[Math.floor(Math.random() * empty.length)]
+    }
+    cells.value[move] = 'O'
+    if (!checkEnd()) status.value = '轮到你了'
+  }, 350)
+}
+
+// 检查终局：赢了续局累计得分，输/平结束
+function checkEnd() {
+  const w = winner(cells.value)
+  if (!w) return false
+  if (w === 'X') {
+    round++
+    score += 50
+    emit('score', score)
+    status.value = `第 ${round} 局获胜！+50，下一局开始`
+    setTimeout(() => {
+      cells.value = Array(9).fill('')
+      status.value = '你执 ❌ 先手'
+    }, 900)
+    return true
+  }
+  // 平局 +20 结束，输了 +5 结束
+  score += w === 'draw' ? 20 : 5
+  playing.value = false
+  status.value = w === 'draw' ? '平局收场' : 'AI 获胜'
+  emit('score', score)
+  emit('end', { score })
+  return true
+}
+
+// ---- 对外接口 ----
+function start() {
+  cells.value = Array(9).fill('')
+  playing.value = true
+  round = 0
+  score = 0
+  status.value = '你执 ❌ 先手'
+  emit('score', 0)
+}
+function stop() {}
+function useProp() {
+  return false
+}
+defineExpose({ start, stop, useProp })
+</script>
+
+<template>
+  <div class="ttt">
+    <p class="status">{{ status }}</p>
+    <div class="board">
+      <button v-for="(c, i) in cells" :key="i" class="cell" :class="{ x: c === 'X', o: c === 'O' }" @click="click(i)">
+        {{ c === 'X' ? '❌' : c === 'O' ? '⭕' : '' }}
+      </button>
+    </div>
+    <p class="tip">连续获胜可以一直加分，输或平则结算</p>
+  </div>
+</template>
+
+<style scoped>
+.ttt {
+  text-align: center;
+  width: min(380px, 90vw);
+}
+.status {
+  margin-bottom: 12px;
+  color: var(--text-dim);
+  font-size: 14px;
+  min-height: 20px;
+}
+.board {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+.cell {
+  aspect-ratio: 1;
+  font-size: 44px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.cell:hover {
+  border-color: var(--primary);
+  transform: scale(1.03);
+}
+.tip {
+  margin-top: 12px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+</style>
diff --git a/src/games/components/TypingGame.vue b/src/games/components/TypingGame.vue
new file mode 100644
index 0000000..e091f50
--- /dev/null
+++ b/src/games/components/TypingGame.vue
@@ -0,0 +1,161 @@
+<script setup>
+// 极速打字：单词从顶部落下，落地前输入完成得分，漏掉 5 个结束
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { createLoop, palette, randInt, pick } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const canvas = ref(null)
+const W = 680
+const H = 520
+let ctx
+let loop
+let words = [] // {text,x,y,speed,typed}
+let input = ''
+let score = 0
+let missed = 0
+let spawnCd = 0
+let difficulty = 1
+let alive = false
+const WORD_POOL = [
+  'code', 'game', 'vue', 'pixel', 'star', 'jump', 'fast', 'play', 'win', 'fun',
+  'hero', 'coin', 'boss', 'level', 'super', 'magic', 'power', 'quest', 'combo', 'bonus',
+  'arcade', 'rocket', 'dragon', 'wizard', 'shield', 'sword', 'crystal', 'thunder', 'victory', 'legend',
+]
+
+function spawn() {
+  const text = pick(WORD_POOL)
+  words.push({
+    text,
+    x: randInt(40, W - 40 - text.length * 14),
+    y: -14,
+    speed: randInt(36, 60) + difficulty * 7,
+    typed: 0,
+  })
+}
+
+function update(dt) {
+  spawnCd -= dt
+  if (spawnCd <= 0) {
+    spawn()
+    spawnCd = Math.max(0.8, 2.1 - difficulty * 0.13)
+  }
+  words.forEach((w) => (w.y += w.speed * dt))
+  // 落地判定
+  const before = words.length
+  words = words.filter((w) => w.y < H - 46)
+  const fell = before - words.length
+  if (fell > 0) {
+    missed += fell
+    input = ''
+    if (missed >= 5) {
+      alive = false
+      loop.stop()
+      draw()
+      emit('end', { score })
+      return
+    }
+  }
+  draw()
+}
+
+function onKey(e) {
+  if (!alive) return
+  if (e.key === 'Backspace') {
+    input = input.slice(0, -1)
+  } else if (/^[a-zA-Z]$/.test(e.key)) {
+    input += e.key.toLowerCase()
+  } else {
+    return
+  }
+  e.preventDefault()
+  // 匹配：输入完全等于某个单词 → 消除得分
+  const hit = words.findIndex((w) => w.text === input)
+  if (hit >= 0) {
+    const w = words[hit]
+    // 得分 = 词长×5 + 高度奖励（越早打掉越高）
+    score += w.text.length * 5 + Math.max(0, Math.round((H - w.y) / 40))
+    emit('score', score)
+    words.splice(hit, 1)
+    input = ''
+    difficulty = 1 + Math.floor(score / 150)
+  } else {
+    // 更新每个单词的已匹配前缀长度（用于高亮）
+    words.forEach((w) => {
+      w.typed = w.text.startsWith(input) ? input.length : 0
+    })
+  }
+  draw()
+}
+
+function draw() {
+  const p = palette()
+  ctx.fillStyle = p.bg
+  ctx.fillRect(0, 0, W, H)
+  // 单词
+  ctx.font = 'bold 22px monospace'
+  ctx.textBaseline = 'top'
+  words.forEach((w) => {
+    // 已匹配前缀高亮
+    const matched = w.text.slice(0, w.typed)
+    const rest = w.text.slice(w.typed)
+    ctx.textAlign = 'left'
+    ctx.fillStyle = p.primary2
+    ctx.fillText(matched, w.x, w.y)
+    ctx.fillStyle = p.text
+    ctx.fillText(rest, w.x + ctx.measureText(matched).width, w.y)
+  })
+  // 底部输入条
+  ctx.fillStyle = p.panel
+  ctx.fillRect(0, H - 42, W, 42)
+  ctx.strokeStyle = p.border
+  ctx.strokeRect(0.5, H - 41.5, W - 1, 41)
+  ctx.fillStyle = p.accent
+  ctx.font = 'bold 22px monospace'
+  ctx.textAlign = 'left'
+  ctx.fillText('> ' + input + '▌', 14, H - 34)
+  // 漏词数
+  ctx.fillStyle = p.dim
+  ctx.font = '14px sans-serif'
+  ctx.textAlign = 'right'
+  ctx.fillText(`漏掉 ${missed}/5`, W - 12, H - 32)
+}
+
+// ---- 对外接口 ----
+function start() {
+  words = []
+  input = ''
+  score = 0
+  missed = 0
+  difficulty = 1
+  spawnCd = 0.3
+  alive = true
+  emit('score', 0)
+  loop.start()
+}
+function stop() {
+  loop?.stop()
+  window.removeEventListener('keydown', onKey)
+}
+// 时间延长卡：清空当前屏幕上的单词（喘口气）
+function useProp(code) {
+  if (code === 'time_extend' && alive) {
+    words = []
+    draw()
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+
+onMounted(() => {
+  ctx = canvas.value.getContext('2d')
+  window.addEventListener('keydown', onKey)
+  loop = createLoop(update)
+  draw()
+})
+onBeforeUnmount(stop)
+</script>
+
+<template>
+  <canvas ref="canvas" :width="W" :height="H"></canvas>
+</template>
diff --git a/src/games/components/WhackGame.vue b/src/games/components/WhackGame.vue
new file mode 100644
index 0000000..ed6c66d
--- /dev/null
+++ b/src/games/components/WhackGame.vue
@@ -0,0 +1,158 @@
+<script setup>
+// 打地鼠：45 秒限时，敲地鼠加分，敲炸弹扣分
+import { ref } from 'vue'
+import { randInt } from '../engine'
+
+const emit = defineEmits(['score', 'end'])
+const holes = ref(Array.from({ length: 9 }, (_, i) => ({ id: i, type: '', hitFx: false }))) // type: '' | mole | gold | bomb
+const score = ref(0)
+const timeLeft = ref(45)
+const playing = ref(false)
+let spawnTimer = 0
+let countTimer = 0
+
+// 随机冒出一只（地鼠 72% / 金鼠 13% / 炸弹 15%）
+function spawn() {
+  const idle = holes.value.filter((h) => !h.type)
+  if (!idle.length) return
+  const hole = idle[randInt(0, idle.length - 1)]
+  const roll = Math.random()
+  hole.type = roll < 0.72 ? 'mole' : roll < 0.85 ? 'gold' : 'bomb'
+  // 冒头持续 0.7~1.2 秒后缩回
+  const ttl = randInt(700, 1200)
+  setTimeout(() => {
+    if (hole.type) hole.type = ''
+  }, ttl)
+}
+
+function whack(hole) {
+  if (!playing.value || !hole.type) return
+  if (hole.type === 'mole') score.value += 10
+  else if (hole.type === 'gold') score.value += 30
+  else score.value = Math.max(0, score.value - 15) // 炸弹扣分
+  hole.type = ''
+  hole.hitFx = true
+  setTimeout(() => (hole.hitFx = false), 180)
+  emit('score', score.value)
+}
+
+function tick() {
+  timeLeft.value--
+  if (timeLeft.value <= 0) {
+    playing.value = false
+    clearInterval(spawnTimer)
+    clearInterval(countTimer)
+    emit('end', { score: score.value })
+  }
+}
+
+// ---- 对外接口 ----
+function start() {
+  score.value = 0
+  timeLeft.value = 45
+  playing.value = true
+  holes.value.forEach((h) => (h.type = ''))
+  emit('score', 0)
+  clearInterval(spawnTimer)
+  clearInterval(countTimer)
+  spawnTimer = setInterval(spawn, 520)
+  countTimer = setInterval(tick, 1000)
+}
+function stop() {
+  clearInterval(spawnTimer)
+  clearInterval(countTimer)
+}
+// 时间延长卡：+30 秒
+function useProp(code) {
+  if (code === 'time_extend' && playing.value) {
+    timeLeft.value += 30
+    return true
+  }
+  return false
+}
+defineExpose({ start, stop, useProp })
+</script>
+
+<template>
+  <div class="whack-board">
+    <div class="hud">
+      <span>⏱ 剩余 <b :class="{ danger: timeLeft <= 10 }">{{ timeLeft }}</b> 秒</span>
+      <span>得分 <b class="score">{{ score }}</b></span>
+    </div>
+    <div class="grid">
+      <button v-for="h in holes" :key="h.id" class="hole" :class="{ fx: h.hitFx }" @click="whack(h)">
+        <span class="mole" :class="{ up: h.type }">
+          {{ h.type === 'mole' ? '🐹' : h.type === 'gold' ? '🐹✨' : h.type === 'bomb' ? '💣' : '' }}
+        </span>
+        <span class="dirt"></span>
+      </button>
+    </div>
+    <p class="tips">🐹 +10　🐹✨ +30　💣 -15</p>
+  </div>
+</template>
+
+<style scoped>
+.whack-board {
+  width: min(500px, 92vw);
+  text-align: center;
+}
+.hud {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+.hud b {
+  font-size: 18px;
+}
+.danger {
+  color: #ff5d73;
+}
+.score {
+  color: var(--primary);
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+}
+.hole {
+  aspect-ratio: 1;
+  position: relative;
+  border-radius: 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  cursor: crosshair;
+  overflow: hidden;
+  transition: background 0.1s;
+}
+.hole.fx {
+  background: color-mix(in srgb, var(--primary) 30%, var(--bg-card));
+}
+.mole {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 22%;
+  font-size: 44px;
+  transform: translateY(120%);
+  transition: transform 0.12s ease-out;
+}
+.mole.up {
+  transform: translateY(0);
+}
+.dirt {
+  position: absolute;
+  left: 10%;
+  right: 10%;
+  bottom: 8%;
+  height: 16%;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--border) 70%, #000);
+}
+.tips {
+  margin-top: 12px;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+</style>
diff --git a/src/games/components/marioLevels.js b/src/games/components/marioLevels.js
new file mode 100644
index 0000000..dc5b745
--- /dev/null
+++ b/src/games/components/marioLevels.js
@@ -0,0 +1,317 @@
+// 超级玛丽关卡数据：按原版《超级马里奥兄弟》World 1-1 / 1-2 / 1-3 / 1-4 布局还原
+// 网格 15 行（13 行天空 + 2 行地面），每格 32px，与原版 NES 屏幕比例一致
+// 图例：
+//   #  地面砖/墙          %  硬块（阶梯石块）      =  可顶碎的砖块
+//   ?  问号块（金币）      M  问号块（蘑菇）        [ ] 水管左/右半
+//   o  金币               E  板栗仔（走到悬崖会掉下去）
+//   T  乌龟（红龟习性，走到平台边缘会折返）
+//   S  出生点             F  旗杆
+// 城堡关（1-4）专用：
+//   ~  岩浆（碰到即死）    X  旋转火棍轴心（硬块 + 火球链）
+//   -  木桥板（砍斧后塌落） A  斧头（摸到砍断桥，库巴落岩浆过关）
+//   B  库巴（守桥 Boss，不可踩，只能跳过）
+export const ROWS = 15
+
+function emptyGrid(width) {
+  return Array.from({ length: ROWS }, () => Array(width).fill(' '))
+}
+function put(g, c, r, ch) {
+  g[r][c] = ch
+}
+function fillRow(g, r, c1, c2, ch) {
+  for (let c = c1; c <= c2; c++) g[r][c] = ch
+}
+// 地面：两行厚的地砖（原版地面即 2 格厚）
+function ground(g, c1, c2) {
+  fillRow(g, 13, c1, c2, '#')
+  fillRow(g, 14, c1, c2, '#')
+}
+// 水管：高 h 格，占两列
+function pipe(g, c, h) {
+  for (let r = 13 - h; r <= 12; r++) {
+    put(g, c, r, '[')
+    put(g, c + 1, r, ']')
+  }
+}
+// 实心柱：从地面往上 h 格
+function column(g, c, h, ch) {
+  for (let r = 13 - h; r <= 12; r++) put(g, c, r, ch)
+}
+// 上行阶梯：从左到右逐级升高（原版金字塔/终点阶梯）
+function stairUp(g, c1, h) {
+  for (let i = 0; i < h; i++) column(g, c1 + i, i + 1, '%')
+}
+// 下行阶梯：从左到右逐级降低
+function stairDown(g, c1, h) {
+  for (let i = 0; i < h; i++) column(g, c1 + i, h - i, '%')
+}
+// 竖墙：指定行区间填实
+function wall(g, c, r1, r2) {
+  for (let r = r1; r <= r2; r++) put(g, c, r, '#')
+}
+// 岩浆池：填满地面两行的坑
+function lava(g, c1, c2) {
+  fillRow(g, 13, c1, c2, '~')
+  fillRow(g, 14, c1, c2, '~')
+}
+
+// ---------------------------------------------------------------
+// World 1-1：地面关。所有标志性段落按原版顺序还原：
+// 开场问号块阵 → 四根渐高水管（第四根可钻入地下奖励室）→ 双坑 →
+// 高空砖排 → 金字塔阶梯对 → 终点八级阶梯 → 旗杆与城堡
+// ---------------------------------------------------------------
+function buildWorld11() {
+  const g = emptyGrid(234)
+  // 地面四段，之间是三个坑（2 格、3 格、2 格，与原版一致）
+  ground(g, 0, 68)
+  ground(g, 71, 87)
+  ground(g, 91, 135)
+  ground(g, 138, 203)
+  put(g, 3, 12, 'S')
+  // 开场：单个问号块 + 砖?砖?砖 五连阵，高处再悬一个问号块
+  put(g, 16, 9, '?')
+  put(g, 20, 9, '=')
+  put(g, 21, 9, 'M') // 原版第一个蘑菇就藏在这里
+  put(g, 22, 9, '=')
+  put(g, 23, 9, '?')
+  put(g, 24, 9, '=')
+  put(g, 22, 5, '?')
+  put(g, 25, 12, 'E') // 全游戏第一只板栗仔
+  // 四根水管：高度 2/3/4/4，最后一根是通往地下奖励室的暗道
+  pipe(g, 28, 2)
+  pipe(g, 38, 3)
+  pipe(g, 46, 4)
+  pipe(g, 57, 4)
+  put(g, 36, 12, 'E')
+  put(g, 51, 12, 'E')
+  put(g, 53, 12, 'E')
+  // 第一个坑之后：砖?砖 + 8 连高空砖排
+  put(g, 77, 9, '=')
+  put(g, 78, 9, '?')
+  put(g, 79, 9, '=')
+  fillRow(g, 5, 80, 87, '=')
+  put(g, 81, 12, 'E')
+  put(g, 84, 12, 'E')
+  // 第二个坑上方：高空砖收尾 + 蘑菇问号块
+  fillRow(g, 5, 91, 92, '=')
+  put(g, 93, 5, 'M')
+  put(g, 96, 9, '=')
+  put(g, 100, 12, 'E')
+  put(g, 102, 12, 'E')
+  // 双问号块 + 乌龟（原版中段唯一一只绿龟位置）
+  put(g, 106, 9, '?')
+  put(g, 109, 9, '?')
+  put(g, 107, 12, 'T')
+  fillRow(g, 5, 112, 114, '=')
+  // 金字塔阶梯第一对：上四级、平两格、下四级
+  stairUp(g, 118, 4)
+  stairDown(g, 124, 4)
+  // 金字塔第二对：上四级后隔着 2 格深坑接双柱下三级（原版著名的"坑上跳"）
+  stairUp(g, 132, 4)
+  column(g, 138, 4, '%')
+  column(g, 139, 4, '%')
+  stairDown(g, 140, 3)
+  // 终点前两根矮水管夹着一对板栗仔
+  pipe(g, 147, 2)
+  put(g, 151, 12, 'E')
+  put(g, 153, 12, 'E')
+  pipe(g, 163, 2)
+  // 终点八级大阶梯 → 旗杆 → 城堡
+  stairUp(g, 169, 8)
+  put(g, 184, 12, 'F')
+  // 右侧挡墙：防止跑出主世界（正好在镜头最大范围之外）
+  wall(g, 204, 0, 12)
+  wall(g, 205, 0, 12)
+  ground(g, 204, 205)
+  // 地下奖励室（原版 1-1 暗道）：顶棚 + 四面墙 + 两排金币 + 出口水管
+  fillRow(g, 0, 206, 232, '#')
+  fillRow(g, 1, 206, 232, '#')
+  ground(g, 206, 232)
+  wall(g, 206, 2, 12)
+  wall(g, 232, 2, 12)
+  fillRow(g, 8, 212, 222, 'o')
+  fillRow(g, 11, 212, 222, 'o')
+  pipe(g, 227, 2)
+  return {
+    name: '1-1',
+    theme: 'overworld',
+    grid: g,
+    mainCols: 204, // 主世界镜头边界（列）
+    bonusStartCol: 206, // 奖励室起始列（镜头与配色切换分界）
+    castleCol: 189,
+    warps: [
+      // 站在第四根水管顶按 ↓ → 进地下奖励室；站在出口水管顶按 ↓ → 回主世界
+      { cols: [57, 58], row: 9, dest: { c: 209, r: 4 } },
+      { cols: [227, 228], row: 11, dest: { c: 61, r: 13 } },
+    ],
+  }
+}
+
+// ---------------------------------------------------------------
+// World 1-2：地下关。全程顶棚封顶，蓝砖配色：
+// 开场双层砖台阶配金币 → 砖柱穿行 → 深坑 → 高台金币 →
+// 硬块阶梯群 → 地底水管 → 出口长阶梯
+// ---------------------------------------------------------------
+function buildWorld12() {
+  const g = emptyGrid(140)
+  // 顶棚（原版地下关标志性的两格厚天花板）
+  fillRow(g, 0, 0, 139, '#')
+  fillRow(g, 1, 0, 139, '#')
+  // 地面三段，两个深坑
+  ground(g, 0, 45)
+  ground(g, 49, 65)
+  ground(g, 69, 139)
+  put(g, 2, 12, 'S')
+  // 开场双层砖平台 + 顶上金币排（原版进洞第一眼）
+  fillRow(g, 9, 8, 13, '=')
+  fillRow(g, 8, 9, 12, 'o')
+  fillRow(g, 5, 16, 21, '=')
+  fillRow(g, 4, 17, 20, 'o')
+  put(g, 18, 12, 'E')
+  put(g, 24, 12, 'E')
+  // 砖柱穿行段：三根渐高砖柱，柱间夹金币
+  column(g, 28, 3, '=')
+  column(g, 34, 4, '=')
+  column(g, 40, 3, '=')
+  fillRow(g, 11, 30, 32, 'o')
+  fillRow(g, 11, 36, 38, 'o')
+  put(g, 37, 12, 'T')
+  // 第一个坑（46-48）后的高台：砖排 + 金币 + 台上乌龟巡逻
+  fillRow(g, 9, 50, 54, '=')
+  fillRow(g, 8, 50, 54, 'o')
+  put(g, 52, 8, 'T')
+  put(g, 58, 12, 'E')
+  // 蘑菇问号块 + 金币问号块
+  put(g, 60, 9, 'M')
+  put(g, 62, 9, '?')
+  // 第二个坑（66-68）后的硬块阶梯群：2/3/4 三柱，柱间乌龟看守
+  column(g, 72, 2, '%')
+  column(g, 76, 3, '%')
+  column(g, 80, 4, '%')
+  put(g, 78, 12, 'T')
+  // 地面金币长排 + 板栗仔双人组
+  fillRow(g, 11, 84, 90, 'o')
+  put(g, 88, 12, 'E')
+  put(g, 91, 12, 'E')
+  // 地底水管两根（原版地下关也有水管）
+  pipe(g, 96, 2)
+  pipe(g, 104, 3)
+  put(g, 101, 12, 'E')
+  // 砖台 + 金币收尾
+  fillRow(g, 10, 108, 112, '=')
+  fillRow(g, 9, 108, 112, 'o')
+  // 出口六级长阶梯 → 旗杆
+  stairUp(g, 118, 6)
+  put(g, 134, 12, 'F')
+  return { name: '1-2', theme: 'underground', grid: g, mainCols: 140, warps: [] }
+}
+
+// ---------------------------------------------------------------
+// World 1-3：高空平台关。大部分是悬崖，踩着树顶平台跳跃前进：
+// 起步島 → 渐高平台链（乌龟看守）→ 中段小岛（蘑菇块）→
+// 高空金币平台 → 踏板跳 → 终点阶梯与旗杆
+// ---------------------------------------------------------------
+function buildWorld13() {
+  const g = emptyGrid(124)
+  // 起步岛
+  ground(g, 0, 8)
+  put(g, 2, 12, 'S')
+  // 平台链第一段：低台阶配金币
+  fillRow(g, 11, 12, 16, '=')
+  fillRow(g, 10, 13, 15, 'o')
+  // 乌龟看守的平台（红龟习性来回巡逻）
+  fillRow(g, 9, 20, 23, '=')
+  fillRow(g, 7, 20, 23, 'o')
+  put(g, 21, 8, 'T')
+  fillRow(g, 11, 27, 29, '=')
+  // 渐高平台 + 金币 + 乌龟
+  fillRow(g, 8, 33, 37, '=')
+  fillRow(g, 7, 34, 36, 'o')
+  put(g, 35, 7, 'T')
+  fillRow(g, 10, 41, 44, '=')
+  put(g, 42, 9, 'T')
+  fillRow(g, 12, 48, 52, '=')
+  // 中段落脚小岛：悬空蘑菇块 + 板栗仔双人组
+  ground(g, 56, 63)
+  put(g, 58, 8, 'M')
+  put(g, 60, 12, 'E')
+  put(g, 62, 12, 'E')
+  // 后半段高空平台链
+  fillRow(g, 10, 67, 70, '=')
+  fillRow(g, 7, 74, 77, '=')
+  fillRow(g, 4, 74, 77, 'o')
+  put(g, 75, 6, 'T')
+  // 双踏板跳
+  fillRow(g, 10, 82, 84, '=')
+  fillRow(g, 10, 87, 89, '=')
+  fillRow(g, 9, 87, 89, 'o')
+  // 终点大陆：板栗仔迎接 + 四级阶梯 + 旗杆 + 城堡
+  ground(g, 93, 123)
+  put(g, 97, 12, 'E')
+  put(g, 99, 12, 'E')
+  stairUp(g, 103, 4)
+  put(g, 112, 12, 'F')
+  return { name: '1-3', theme: 'athletic', grid: g, mainCols: 124, castleCol: 116, warps: [] }
+}
+
+// ---------------------------------------------------------------
+// World 1-4：城堡关（第一世界收官）。灰砖封顶配色，按原版节奏还原：
+// 入口大厅 → 岩浆坑与旋转火棍交替的长廊 → 高空砖台捷径 →
+// 桥前高台 → 库巴守木桥 → 摸到斧头砍断锁链，桥塌库巴落岩浆 → 过关
+// ---------------------------------------------------------------
+function buildWorld14() {
+  const g = emptyGrid(150)
+  // 城堡封顶（两格厚天花板）
+  fillRow(g, 0, 0, 149, '#')
+  fillRow(g, 1, 0, 149, '#')
+  // 地面段，坑内全部是岩浆
+  ground(g, 0, 37)
+  ground(g, 42, 63)
+  ground(g, 68, 95)
+  ground(g, 100, 121)
+  ground(g, 138, 149)
+  lava(g, 38, 41)
+  lava(g, 64, 67)
+  lava(g, 96, 99)
+  lava(g, 122, 137) // 库巴桥下的大岩浆池
+  put(g, 2, 12, 'S')
+  // 入口大厅：一对装饰柱，先见识第一根火棍
+  column(g, 8, 1, '%')
+  column(g, 11, 1, '%')
+  put(g, 16, 9, 'X') // 半空火棍：练习钻档期
+  put(g, 25, 12, 'X') // 贴地火棍：跳过轴心块
+  fillRow(g, 8, 30, 33, 'o')
+  // 第一岩浆坑上方的高空砖台（可走上路避火）
+  fillRow(g, 9, 44, 48, '=')
+  fillRow(g, 8, 45, 47, 'o')
+  put(g, 52, 9, 'X')
+  put(g, 60, 12, 'X')
+  // 第二段长廊：蘑菇补给 + 双火棍
+  put(g, 71, 9, 'M')
+  put(g, 76, 9, 'X')
+  fillRow(g, 10, 80, 83, '=')
+  fillRow(g, 9, 80, 83, 'o')
+  put(g, 88, 12, 'X')
+  fillRow(g, 8, 91, 93, 'o')
+  // 桥前最后一根火棍 + 上桥高台
+  put(g, 106, 9, 'X')
+  fillRow(g, 11, 112, 114, 'o')
+  column(g, 118, 1, '%')
+  column(g, 119, 1, '%')
+  column(g, 120, 1, '%')
+  column(g, 121, 1, '%')
+  // 库巴木桥（横跨大岩浆池，砍斧后整段塌落）
+  fillRow(g, 12, 122, 137, '-')
+  put(g, 128, 10, 'B')
+  // 斧头：桥尾地面上方一格
+  put(g, 139, 12, 'A')
+  // 尾墙封死
+  wall(g, 148, 2, 12)
+  wall(g, 149, 2, 12)
+  return { name: '1-4', theme: 'castle', grid: g, mainCols: 150, warps: [] }
+}
+
+// 构建全部关卡（每次调用返回全新副本，供重开/复活时重置砖块状态）
+export function buildLevels() {
+  return [buildWorld11(), buildWorld12(), buildWorld13(), buildWorld14()]
+}
diff --git a/src/games/engine.js b/src/games/engine.js
new file mode 100644
index 0000000..7399ac7
--- /dev/null
+++ b/src/games/engine.js
@@ -0,0 +1,112 @@
+// 小游戏通用辅助：主循环、键盘状态、主题取色、绘图工具
+// 所有 Canvas 游戏共用，保证手感与视觉风格统一
+
+// createLoop 创建 requestAnimationFrame 主循环
+// update(dt) 每帧回调，dt 为秒（上限 0.05 防止切后台后大步长）
+export function createLoop(update) {
+  let rafId = 0
+  let last = 0
+  let running = false
+  function frame(ts) {
+    if (!running) return
+    const dt = Math.min((ts - last) / 1000, 0.05)
+    last = ts
+    update(dt)
+    rafId = requestAnimationFrame(frame)
+  }
+  return {
+    start() {
+      if (running) return
+      running = true
+      last = performance.now()
+      rafId = requestAnimationFrame(frame)
+    },
+    stop() {
+      running = false
+      cancelAnimationFrame(rafId)
+    },
+    get running() {
+      return running
+    },
+  }
+}
+
+// Keys 键盘状态跟踪：keys.has('ArrowLeft') 查询按住状态，onPress 注册单次按下
+export class Keys {
+  constructor() {
+    this.down = new Set()
+    this.pressHandlers = []
+    this._kd = (e) => {
+      // 游戏用按键阻止页面滚动
+      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(e.key)) {
+        e.preventDefault()
+      }
+      if (!this.down.has(e.key)) {
+        this.pressHandlers.forEach((fn) => fn(e.key))
+      }
+      this.down.add(e.key)
+    }
+    this._ku = (e) => this.down.delete(e.key)
+  }
+  attach() {
+    window.addEventListener('keydown', this._kd)
+    window.addEventListener('keyup', this._ku)
+  }
+  detach() {
+    window.removeEventListener('keydown', this._kd)
+    window.removeEventListener('keyup', this._ku)
+    this.down.clear()
+  }
+  has(key) {
+    return this.down.has(key)
+  }
+  onPress(fn) {
+    this.pressHandlers.push(fn)
+  }
+}
+
+// themeColor 读取当前主题的 CSS 变量颜色（游戏画面与全站主题联动）
+export function themeColor(name, fallback) {
+  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  return v || fallback
+}
+
+// palette 一次性取出游戏常用的主题色
+export function palette() {
+  return {
+    bg: themeColor('--bg-card', '#1d1f4e'),
+    panel: themeColor('--bg-panel', '#16173d'),
+    primary: themeColor('--primary', '#ff3e7f'),
+    primary2: themeColor('--primary-2', '#ffb300'),
+    accent: themeColor('--accent', '#00e5ff'),
+    text: themeColor('--text', '#ffffff'),
+    dim: themeColor('--text-dim', '#9a9ac4'),
+    border: themeColor('--border', '#2c2e6e'),
+  }
+}
+
+// roundRect 圆角矩形路径（部分旧浏览器无原生 API 时的兜底实现）
+export function roundRect(ctx, x, y, w, h, r) {
+  if (ctx.roundRect) {
+    ctx.beginPath()
+    ctx.roundRect(x, y, w, h, r)
+    return
+  }
+  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()
+}
+
+// randInt 取 [min, max] 闭区间随机整数
+export function randInt(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+// pick 从数组随机取一个元素
+export function pick(arr) {
+  return arr[Math.floor(Math.random() * arr.length)]
+}
diff --git a/src/games/index.js b/src/games/index.js
new file mode 100644
index 0000000..3eea6a6
--- /dev/null
+++ b/src/games/index.js
@@ -0,0 +1,210 @@
+// 游戏注册表：游戏编码 → 组件加载器 + 支持的道具 + 操作说明
+// 编码必须与数据库 games.code 一致；supports 决定游玩页道具栏显示哪些道具
+export const gameRegistry = {
+  snake: {
+    loader: () => import('./components/SnakeGame.vue'),
+    supports: ['double_points', 'revive'],
+    controls: '方向键 / WASD 控制移动方向',
+  },
+  tetris: {
+    loader: () => import('./components/TetrisGame.vue'),
+    supports: ['double_points', 'bomb'],
+    controls: '←→ 移动，↑ 旋转，↓ 软降，空格 硬降',
+  },
+  g2048: {
+    loader: () => import('./components/Game2048.vue'),
+    supports: ['double_points'],
+    controls: '方向键滑动合并数字',
+  },
+  minesweeper: {
+    loader: () => import('./components/MinesweeperGame.vue'),
+    supports: ['double_points', 'hint'],
+    controls: '左键翻格，右键插旗',
+  },
+  breakout: {
+    loader: () => import('./components/BreakoutGame.vue'),
+    supports: ['double_points', 'revive'],
+    controls: '鼠标 / ←→ 移动挡板',
+  },
+  pong: {
+    loader: () => import('./components/PongGame.vue'),
+    supports: ['double_points'],
+    controls: '鼠标 / ↑↓ 移动球拍，先得 11 分获胜',
+  },
+  flappy: {
+    loader: () => import('./components/FlappyGame.vue'),
+    supports: ['double_points', 'revive', 'shield'],
+    controls: '点击 / 空格 扇动翅膀',
+  },
+  memory: {
+    loader: () => import('./components/MemoryGame.vue'),
+    supports: ['double_points', 'hint'],
+    controls: '点击卡片翻开，找出所有相同的一对',
+  },
+  whack: {
+    loader: () => import('./components/WhackGame.vue'),
+    supports: ['double_points', 'time_extend'],
+    controls: '点击冒头的地鼠，小心炸弹',
+  },
+  gomoku: {
+    loader: () => import('./components/GomokuGame.vue'),
+    supports: ['double_points', 'hint'],
+    controls: '点击棋盘落子，先五连者胜',
+  },
+  tictactoe: {
+    loader: () => import('./components/TicTacToeGame.vue'),
+    supports: ['double_points'],
+    controls: '点击格子落子，三连即胜',
+  },
+  spaceshooter: {
+    loader: () => import('./components/SpaceShooterGame.vue'),
+    supports: ['double_points', 'revive', 'bomb', 'shield'],
+    controls: '←→ / 鼠标移动，自动开火',
+  },
+  dino: {
+    loader: () => import('./components/DinoGame.vue'),
+    supports: ['double_points', 'revive', 'shield'],
+    controls: '空格 / 点击跳跃，↓ 下蹲',
+  },
+  down100: {
+    loader: () => import('./components/Down100Game.vue'),
+    supports: ['double_points', 'revive'],
+    controls: '←→ 移动，踩稳平台往下走',
+  },
+  sudoku: {
+    loader: () => import('./components/SudokuGame.vue'),
+    supports: ['double_points', 'hint'],
+    controls: '点击格子后输入 1-9，填满全盘',
+  },
+  puzzle15: {
+    loader: () => import('./components/Puzzle15Game.vue'),
+    supports: ['double_points'],
+    controls: '点击与空位相邻的数字滑动，按 1-15 复原',
+  },
+  simon: {
+    loader: () => import('./components/SimonGame.vue'),
+    supports: ['double_points'],
+    controls: '看完灯光序列后按相同顺序点击',
+  },
+  bubble: {
+    loader: () => import('./components/BubbleGame.vue'),
+    supports: ['double_points', 'bomb'],
+    controls: '鼠标瞄准点击发射，三个同色即消除',
+  },
+  fruit: {
+    loader: () => import('./components/FruitGame.vue'),
+    supports: ['double_points', 'revive', 'time_extend'],
+    controls: '按住鼠标滑动切开水果，别碰炸弹',
+  },
+  maze: {
+    loader: () => import('./components/MazeGame.vue'),
+    supports: ['double_points', 'time_extend'],
+    controls: '方向键 / WASD 移动，走到绿色终点',
+  },
+  connect4: {
+    loader: () => import('./components/Connect4Game.vue'),
+    supports: ['double_points'],
+    controls: '点击竖列投子，先四连者胜',
+  },
+  lightsout: {
+    loader: () => import('./components/LightsOutGame.vue'),
+    supports: ['double_points', 'hint'],
+    controls: '点灯会翻转自身与上下左右，关掉全部灯',
+  },
+  typing: {
+    loader: () => import('./components/TypingGame.vue'),
+    supports: ['double_points', 'time_extend'],
+    controls: '单词落地前用键盘输入完成',
+  },
+  mathrush: {
+    loader: () => import('./components/MathRushGame.vue'),
+    supports: ['double_points', 'time_extend'],
+    controls: '心算后点击正确答案，连对有加成',
+  },
+  colorreact: {
+    loader: () => import('./components/ColorReactGame.vue'),
+    supports: ['double_points', 'time_extend'],
+    controls: '文字含义与颜色一致按 ✔，否则按 ✘',
+  },
+  aim: {
+    loader: () => import('./components/AimGame.vue'),
+    supports: ['double_points', 'time_extend'],
+    controls: '点击出现的靶心，越快越准分越高',
+  },
+  pianotiles: {
+    loader: () => import('./components/PianoTilesGame.vue'),
+    supports: ['double_points', 'revive'],
+    controls: '点击黑块（或按 ASDF 对应四列）',
+  },
+  jumpjump: {
+    loader: () => import('./components/JumpJumpGame.vue'),
+    supports: ['double_points', 'revive'],
+    controls: '按住蓄力，松开起跳到下一个平台',
+  },
+  tank: {
+    loader: () => import('./components/TankGame.vue'),
+    supports: ['double_points', 'revive', 'bomb', 'shield'],
+    controls: 'WASD / 方向键移动，空格 / 点击开炮',
+  },
+  asteroids: {
+    loader: () => import('./components/AsteroidsGame.vue'),
+    supports: ['double_points', 'revive', 'bomb', 'shield'],
+    controls: '←→ 旋转，↑ 喷射推进，空格开火',
+  },
+  klotski: {
+    loader: () => import('./components/KlotskiGame.vue'),
+    supports: ['double_points'],
+    controls: '拖动/点击滑块移动，让曹操走到底部出口',
+  },
+  mario: {
+    loader: () => import('./components/MarioGame.vue'),
+    supports: ['double_points', 'revive', 'shield'],
+    controls: '←→ 移动，空格/↑ 跳跃，↓ 可钻特定水管；复刻原版 1-1~1-4 四关：顶?块出金币蘑菇，吃蘑菇变大能顶碎砖，旗杆抓得越高分越多，1-4 城堡关躲火棍跳过库巴摸斧头断桥',
+    levels: { total: 4, names: ['世界 1-1', '世界 1-2', '世界 1-3', '世界 1-4'] },
+  },
+  stack3d: {
+    loader: () => import('./components/Stack3dGame.vue'),
+    supports: ['double_points'],
+    controls: '点击 / 空格 放下移动中的方块，对齐越准塔越高',
+  },
+  ballmaze3d: {
+    loader: () => import('./components/BallMaze3dGame.vue'),
+    supports: ['double_points', 'time_extend'],
+    controls: '方向键倾斜迷宫控制小球滚动，滚到金色终点',
+  },
+  racing3d: {
+    loader: () => import('./components/Racing3dGame.vue'),
+    supports: ['double_points', 'revive', 'shield'],
+    controls: '←→ 变道躲避车流，速度会越来越快',
+  },
+  pvz: {
+    loader: () => import('./components/PvzGame.vue'),
+    supports: ['double_points', 'bomb', 'shield'],
+    controls: '点击卡片选植物后点击草坪种植，点击阳光收集，守住五条防线',
+  },
+  linkgame: {
+    loader: () => import('./components/LinkGame.vue'),
+    supports: ['double_points', 'hint', 'time_extend', 'bomb'],
+    controls: '点击两个相同图案，连线拐弯不超过两次即可消除；共 12 关，每关图块移动规则不同，后 6 关限时更紧',
+    levels: {
+      total: 12,
+      names: ['经典', '下落', '上浮', '左靠', '右靠', '分裂', '经典⚡', '下落⚡', '上浮⚡', '左靠⚡', '右靠⚡', '分裂⚡'],
+    },
+  },
+  match3: {
+    loader: () => import('./components/Match3Game.vue'),
+    supports: ['double_points', 'hint', 'bomb'],
+    controls: '拖拽（或点击）相邻两个团子交换位置，凑成三连消除；共 12 关，步数内达成目标分即过关',
+    levels: { total: 12 },
+  },
+  starve: {
+    loader: () => import('./components/StarveGame.vue'),
+    supports: ['double_points'],
+    saveable: true, // 云存档：每天清晨自动存，死亡删档（永久死亡）；仅单人模式
+    wide: true, // 宽屏游戏：游玩页解除 1200px 限宽，画布自适应铺满可视区域
+    coop: true, // 组队联机：进入时可选单人冒险 / 组队联机（2~4 人共享世界）
+    mods: true, // Mod 装载：开局可勾选内置 mod（难度类 mod 影响得分系数）
+    controls:
+      'WASD 移动 · 空格采集 · F 攻击 · 1~9 使用物品栏 · C 合成 · M 地图 · Esc 关面板（鼠标点击同样可用）；夜晚完全黑暗会遭查理袭击，务必备火；科学机器/炼金引擎解锁高级配方，烹饪锅可炖官方料理；历经秋冬春夏四季（冬季注意保暖、提防独眼巨鹿），猪人可喂肉结盟；每活一天 +100 分并自动云存档；支持 2~4 人组队联机与 30 款人物皮肤',
+  },
+}
diff --git a/src/games/pixelAvatars.js b/src/games/pixelAvatars.js
new file mode 100644
index 0000000..cd41d02
--- /dev/null
+++ b/src/games/pixelAvatars.js
@@ -0,0 +1,134 @@
+// 手绘像素头像：8 个形象 × 4 套配色 = 32 个可选
+// 存储格式：'px:NN'（NN = 01~32 的两位编号），旧 emoji 数据自动降级原样显示
+// 每个形象是 8×8 字符画：`.`透明 `1`主色 `2`副色 `3`描边深色 `4`白色 `5`黑色（眼/细节）
+
+// ---- 8 个基础形象（8×8 字符画） ----
+export const AVATAR_SHAPES = {
+  // 男孩：短发 + 笑脸
+  boy: [
+    '..3333..',
+    '.311113.',
+    '.311113.',
+    '.334433.',
+    '.351415.',
+    '.311113.',
+    '.322223.',
+    '..3333..',
+  ],
+  // 女孩：长发 + 刘海
+  girl: [
+    '.333333.',
+    '3111113.',
+    '3133313.',
+    '3344333.',
+    '3351533.',
+    '3311133.',
+    '3311133.',
+    '.33333..',
+  ],
+  // 猫耳：立耳 + 胡须脸
+  cat: [
+    '3.333.3.',
+    '3311133.',
+    '3111113.',
+    '.34443..',
+    '.35153..',
+    '.31113..',
+    '.32223..',
+    '..333...',
+  ],
+  // 兔耳：双长耳 + 圆脸
+  bunny: [
+    '3.333.3.',
+    '3.313.3.',
+    '3311133.',
+    '.311113.',
+    '.351513.',
+    '.311113.',
+    '.322223.',
+    '..3333..',
+  ],
+  // 机器人：方头 + 天线 + 单眼屏
+  robot: [
+    '...3....',
+    '..323...',
+    '.33333..',
+    '3144413.',
+    '3144413.',
+    '3155133.',
+    '3111113.',
+    '.33333..',
+  ],
+  // 外星人：圆头 + 大黑眼
+  alien: [
+    '..333...',
+    '.31113..',
+    '3111113.',
+    '3155513.',
+    '3155513.',
+    '3111113.',
+    '.31113..',
+    '..3.3...',
+  ],
+  // 幽灵：飘尾 + 圆眼
+  ghost: [
+    '..333...',
+    '.31113..',
+    '3111113.',
+    '3155153.',
+    '3111113.',
+    '3111113.',
+    '3111113.',
+    '3.3.33..',
+  ],
+  // 忍者：面罩 + 露眼 + 额带
+  ninja: [
+    '.33333..',
+    '3222223.',
+    '3333333.',
+    '3.55.53.',
+    '3333333.',
+    '3111113.',
+    '.31113..',
+    '..333...',
+  ],
+}
+
+// ---- 4 套配色（主色/副色/描边） ----
+export const AVATAR_PALETTES = [
+  { name: '活力橙', c1: '#ff9f43', c2: '#e05657', c3: '#5d3049' }, // 橙发红衣
+  { name: '海洋蓝', c1: '#54a0ff', c2: '#48dbfb', c3: '#1e2749' }, // 蓝调
+  { name: '青草绿', c1: '#1dd1a1', c2: '#feca57', c3: '#0c3b2e' }, // 绿调
+  { name: '梦幻紫', c1: '#a29bfe', c2: '#fd79a8', c3: '#341f97' }, // 紫调
+]
+
+// ---- 32 个头像清单：编号 px:01 ~ px:32 ----
+// 顺序：8 个形象各配 4 套色（boy-橙、boy-蓝、boy-绿、boy-紫、cat-橙……）
+const SHAPE_ORDER = ['boy', 'girl', 'cat', 'bunny', 'robot', 'alien', 'ghost', 'ninja']
+
+export const AVATAR_LIST = []
+let n = 0
+for (const shape of SHAPE_ORDER) {
+  AVATAR_PALETTES.forEach((pal, pi) => {
+    n++
+    AVATAR_LIST.push({
+      code: 'px:' + String(n).padStart(2, '0'), // px:01 ~ px:32
+      shape,
+      palette: pi,
+      name: `${AVATAR_SHAPES[shape].label || ''}${pal.name}`,
+    })
+  })
+}
+
+// isPixelAvatar 判断头像值是否为像素头像编码
+export function isPixelAvatar(v) {
+  return typeof v === 'string' && /^px:\d{2}$/.test(v)
+}
+
+// decodePixelAvatar 把 'px:05' 解成 { shape, palette }；非法返回 null
+export function decodePixelAvatar(code) {
+  if (!isPixelAvatar(code)) return null
+  const idx = parseInt(code.slice(3), 10) - 1
+  if (idx < 0 || idx >= AVATAR_LIST.length) return null
+  return AVATAR_LIST[idx]
+}
diff --git a/src/games/starve/climate.js b/src/games/starve/climate.js
new file mode 100644
index 0000000..0adb511
--- /dev/null
+++ b/src/games/starve/climate.js
@@ -0,0 +1,71 @@
+// 饥荒气候系统：季节推算、昼夜分段、环境温度、天气（雨/雪）、体温
+import { SEASONS, YEAR_DAYS, SEG_SPLIT, SEG, DAY_LEN } from './data.js'
+
+// 第 day 天所处季节：{code,name,idx,dayIn(季节内第几天),len,temp,tint}
+export function seasonOf(day) {
+  let d = ((day - 1) % YEAR_DAYS)
+  for (let i = 0; i < SEASONS.length; i++) {
+    const s = SEASONS[i]
+    if (d < s.days) return { ...s, idx: i, dayIn: d + 1, len: s.days }
+    d -= s.days
+  }
+  return { ...SEASONS[0], idx: 0, dayIn: 1, len: SEASONS[0].days }
+}
+
+// 当季昼/昏/夜的秒数分界：[黄昏开始, 夜晚开始]
+export function daySplit(seasonCode) {
+  const [d, k] = SEG_SPLIT[seasonCode] || SEG_SPLIT.autumn
+  return [d * SEG, (d + k) * SEG]
+}
+
+// 当前时相
+export function phaseOf(seasonCode, dayTime) {
+  const [duskAt, nightAt] = daySplit(seasonCode)
+  return dayTime < duskAt ? 'day' : dayTime < nightAt ? 'dusk' : 'night'
+}
+
+// 环境温度：季节基准 + 时相修正 + 降雨降温
+export function ambientTemp(seasonCode, phase, wxType) {
+  const base = SEASONS.find((s) => s.code === seasonCode)?.temp ?? 16
+  const mod = phase === 'day' ? 6 : phase === 'dusk' ? 0 : -8
+  return base + mod - (wxType === 'rain' ? 5 : 0)
+}
+
+// ---- 天气 ----
+// 每天清晨掷一次天气：返回 {type:'none'|'rain'|'snow', t:剩余秒}
+export function rollWeather(seasonCode) {
+  if (seasonCode === 'winter') return { type: 'snow', t: DAY_LEN } // 冬季整天飘雪（视觉）
+  const p = seasonCode === 'spring' ? 0.45 : seasonCode === 'autumn' ? 0.25 : 0.05
+  if (Math.random() < p) {
+    return { type: 'rain', t: 40 + Math.random() * 70 }
+  }
+  return { type: 'none', t: 0 }
+}
+// 每帧推进天气计时（雪不倒计时，随季节整天存在）
+export function tickWeather(wx, dt) {
+  if (wx.type === 'rain') {
+    wx.t -= dt
+    if (wx.t <= 0) {
+      wx.type = 'none'
+      wx.t = 0
+      return true // 雨停了
+    }
+  }
+  return false
+}
+
+// ---- 体温 ----
+// 体温向环境漂移；篝火/火把加热；保暖装备减缓失温；保暖石托底
+// p: {temp, ...} · heat: 附近火源强度 0~1 · insul: 保暖值（冬帽 120）
+export function updateBodyTemp(p, ambient, heat, insul, dt) {
+  if (heat > 0) {
+    // 火边取暖：快速升向 50
+    p.temp += (50 - p.temp) * dt * 0.5 * heat
+  } else {
+    // 失温速度受保暖值抑制（升温不受影响）
+    const cooling = ambient < p.temp
+    const k = 0.05 * (cooling ? 30 / (30 + insul) : 1)
+    p.temp += (ambient - p.temp) * dt * k
+  }
+  p.temp = Math.max(-20, Math.min(80, p.temp))
+}
diff --git a/src/games/starve/data.js b/src/games/starve/data.js
new file mode 100644
index 0000000..71869f7
--- /dev/null
+++ b/src/games/starve/data.js
@@ -0,0 +1,252 @@
+// 饥荒数据表：三围 / 季节昼夜 / 物品 / 食物 / 配方 / 烹饪锅 / 生物 / 掉落
+// 数值尽量对齐官方 Don't Starve（威尔逊基准 150/150/200、官方食物与伤害耐久表），
+// 个别 Boss 血量按小游戏节奏缩放（注释标注）
+export const CAP = { hp: 150, hunger: 150, san: 200 }
+
+// ---- 昼夜与季节：官方一天 16 段，这里每段 10 秒（一天 160 秒） ----
+export const SEG = 10
+export const DAY_LEN = 16 * SEG // 160
+// 季节顺序与时长（天）：秋 20 → 冬 15 → 春 20 → 夏 15（循环，官方冬季首临第 21 天）
+export const SEASONS = [
+  { code: 'autumn', name: '秋', days: 20, temp: 16, tint: '#c98548' },
+  { code: 'winter', name: '冬', days: 15, temp: -12, tint: '#9fc4dd' },
+  { code: 'spring', name: '春', days: 20, temp: 14, tint: '#7fb069' },
+  { code: 'summer', name: '夏', days: 15, temp: 34, tint: '#e0a63c' },
+]
+export const YEAR_DAYS = SEASONS.reduce((n, s) => n + s.days, 0)
+// 各季节 昼/昏/夜 段数（合计 16 段，对应官方季节日长变化）
+export const SEG_SPLIT = {
+  autumn: [9, 4, 3],
+  winter: [5, 4, 7],
+  spring: [8, 5, 3],
+  summer: [11, 2, 3],
+}
+
+// ---- 全局调参（官方数值折算：官方一天 480 秒，这里 160 秒 = 3 倍速流逝） ----
+export const TUNE = {
+  fistDmg: 10, // 徒手伤害（官方 10）
+  attackGap: 0.5, // 攻击间隔秒
+  hungerRate: 75 / DAY_LEN, // 官方每天消耗 75 饥饿
+  starveHp: 0.6, // 饥饿归零掉血/秒
+  duskSan: 0.25, // 黄昏理智流失/秒
+  nightDarkSan: 2.0, // 夜晚黑暗中理智流失/秒
+  nightLitSan: 0.1, // 夜晚有光时的微量流失/秒
+  rainSan: 0.12, // 雨中理智流失/秒
+  flowerSan: 5, // 采花回理智（官方 +5）
+  shadowKillSan: 15, // 杀暗影回理智（官方爬行恐惧 +15）
+  charlieWarn: 1.5, // 黑暗中查理低语预警秒数
+  charlieHit: 5, // 黑暗中首次遭袭秒数
+  charlieRe: 3, // 后续连击间隔
+  charlieDmg: 100, // 查理单次伤害（官方 100）
+  charlieSan: 20, // 查理袭击附带理智损失
+  freezeHp: 1.25, // 体温 <=0 冰冻掉血/秒（官方 1.25）
+  freezeAt: 0, // 冰冻阈值
+  packSlots: 8, // 背包附加格数
+  invSlots: 15, // 主物品栏格数
+  stackMax: 40, // 堆叠上限（官方 40）
+  roadSpeed: 1.3, // 道路提速（官方 1.3）
+  pigLoyal: 80, // 喂肉结盟时长（秒）
+  potCookTime: 15, // 烹饪锅炖煮秒数
+  // 以下为 mod 可覆盖的调参缺省值
+  gatherMul: 1, // 采集动作间隔倍率（<1 更快）
+  houndGapMul: 1, // 猎犬波间隔倍率（<1 更频繁）
+  houndExtra: 0, // 每波猎犬附加数量
+}
+
+// =====================================================================
+// 物品表
+//  food: {hunger,hp,san} 官方食物数值 · cook: 烤制产物 · perish: 保鲜期（天，缺省不腐）
+//  equip: hand/body/head 装备位 · dmg: 武器伤害 · uses: 耐久次数 · burn: 计时耐久（秒）
+//  tool: 采集工具类型 · absorb: 护甲减伤比 · armor: 护甲耐久点 · insul: 保暖值
+//  meatv/sweet/mm/veg: 烹饪锅食材属性 · heal: 使用回血 · stack: 堆叠上限（缺省 40，装备 1）
+// =====================================================================
+export const ITEMS = {
+  // ---- 材料 ----
+  grass: { name: '草' },
+  twig: { name: '树枝' },
+  log: { name: '木头' },
+  rock: { name: '石头' },
+  flint: { name: '燧石' },
+  gold: { name: '金块' },
+  silk: { name: '蛛丝' },
+  spidergland: { name: '蜘蛛腺体' },
+  rope: { name: '绳子' },
+  petals: { name: '花瓣', food: { hunger: 1, hp: 0, san: 0 }, perish: 6 },
+  reeds: { name: '芦苇' },
+  ash: { name: '灰烬' },
+  beefwool: { name: '牛毛' },
+  pigskin: { name: '猪皮' },
+  rot: { name: '腐烂物' },
+  // ---- 食物（官方数值，raw 肉类 -10 理智 / 怪物肉 -15） ----
+  berry: { name: '浆果', food: { hunger: 9.4, hp: 0, san: 0 }, cook: 'cookedberry', perish: 6, veg: 0.5 },
+  cookedberry: { name: '烤浆果', food: { hunger: 12.5, hp: 1, san: 0 }, perish: 10, veg: 0.5 },
+  morsel: { name: '小肉', food: { hunger: 12.5, hp: 0, san: -10 }, cook: 'cookedmorsel', perish: 6, meatv: 0.5 },
+  cookedmorsel: { name: '烤小肉', food: { hunger: 18.75, hp: 1, san: 0 }, perish: 10, meatv: 0.5 },
+  meat: { name: '大肉', food: { hunger: 25, hp: 1, san: -10 }, cook: 'cookedmeat', perish: 6, meatv: 1 },
+  cookedmeat: { name: '熟肉', food: { hunger: 25, hp: 3, san: 0 }, perish: 10, meatv: 1 },
+  monstermeat: { name: '怪物肉', food: { hunger: 18.75, hp: -20, san: -15 }, cook: 'cookedmonster', perish: 6, meatv: 1, mm: 1 },
+  cookedmonster: { name: '烤怪物肉', food: { hunger: 18.75, hp: -3, san: -10 }, perish: 10, meatv: 1, mm: 1 },
+  froglegs: { name: '蛙腿', food: { hunger: 12.5, hp: 0, san: -10 }, cook: 'cookedfroglegs', perish: 6, meatv: 0.5 },
+  cookedfroglegs: { name: '烤蛙腿', food: { hunger: 12.5, hp: 1, san: 0 }, perish: 10, meatv: 0.5 },
+  honey: { name: '蜂蜜', food: { hunger: 9.4, hp: 3, san: 0 }, perish: 40, sweet: 1 },
+  eyeball: { name: '巨鹿眼球', food: { hunger: 75, hp: 40, san: -15 }, perish: 20, meatv: 1 },
+  // ---- 烹饪锅料理 ----
+  meatballs: { name: '肉丸', food: { hunger: 62.5, hp: 3, san: 5 }, perish: 10 },
+  meatystew: { name: '炖肉汤', food: { hunger: 150, hp: 12, san: 5 }, perish: 10 },
+  honeyham: { name: '蜜汁火腿', food: { hunger: 75, hp: 30, san: 5 }, perish: 15 },
+  honeynuggets: { name: '蜜糖块', food: { hunger: 37.5, hp: 20, san: 5 }, perish: 15 },
+  taffy: { name: '太妃糖', food: { hunger: 25, hp: -3, san: 15 }, perish: 15 },
+  monsterlasagna: { name: '怪物千层饼', food: { hunger: 37.5, hp: -20, san: -20 }, perish: 10 },
+  wetgoop: { name: '湿哒哒糊糊', food: { hunger: 0, hp: 0, san: 0 }, perish: 10 },
+  // ---- 治疗 ----
+  healingsalve: { name: '治疗药膏', heal: 20, stack: 40 },
+  honeypoultice: { name: '蜂蜜药膏', heal: 30, stack: 40 },
+  // ---- 手部装备（官方耐久：斧 100 / 镐 33 / 铲 25 / 矛 150 / 火把计时） ----
+  axe: { name: '斧头', equip: 'hand', tool: 'axe', dmg: 27, uses: 100, stack: 1 },
+  pickaxe: { name: '镐子', equip: 'hand', tool: 'pick', dmg: 27, uses: 33, stack: 1 },
+  shovel: { name: '铲子', equip: 'hand', tool: 'dig', dmg: 17, uses: 25, stack: 1 },
+  spear: { name: '长矛', equip: 'hand', dmg: 34, uses: 150, stack: 1 },
+  tentaclespike: { name: '触手尖矛', equip: 'hand', dmg: 51, uses: 100, stack: 1 },
+  torch: { name: '火把', equip: 'hand', dmg: 17, burn: 60, stack: 1 },
+  // ---- 身体装备 ----
+  backpack: { name: '背包', equip: 'body', pack: true, stack: 1 },
+  logsuit: { name: '木甲', equip: 'body', absorb: 0.8, armor: 315, stack: 1 },
+  // ---- 头部装备 ----
+  garland: { name: '花环', equip: 'head', sanAura: 0.08, burn: 640, stack: 1 },
+  footballhelmet: { name: '猪皮帽', equip: 'head', absorb: 0.8, armor: 315, stack: 1 },
+  winterhat: { name: '冬帽', equip: 'head', insul: 120, stack: 1 },
+  // ---- 特殊 ----
+  trap: { name: '陷阱', place: true, uses: 8, stack: 10 },
+  thermalstone: { name: '保暖石', thermal: true, stack: 1 },
+}
+export const ITEM_CODES = Object.keys(ITEMS)
+export const ITEM_IDX = Object.fromEntries(ITEM_CODES.map((c, i) => [c, i]))
+export function stackMax(code) {
+  return ITEMS[code]?.stack || TUNE.stackMax
+}
+
+// =====================================================================
+// 合成表：tech 0=徒手 1=需科学机器 2=需炼金引擎（原型机制：靠近机器合成一次即永久解锁）
+// =====================================================================
+export const CRAFT_TABS = [
+  { code: 'tools', name: '工具', icon: 'axe' },
+  { code: 'light', name: '光源', icon: 'torch' },
+  { code: 'surv', name: '生存', icon: 'trap' },
+  { code: 'fight', name: '战斗', icon: 'spear' },
+  { code: 'food', name: '食物', icon: 'crockpot' },
+  { code: 'science', name: '科学', icon: 'sciencemachine' },
+  { code: 'dress', name: '装扮', icon: 'garland' },
+]
+export const RECIPES = [
+  { code: 'axe', name: '斧头', tab: 'tools', tech: 0, cost: { twig: 1, flint: 1 }, desc: '砍树 · 耐久 100 次' },
+  { code: 'pickaxe', name: '镐子', tab: 'tools', tech: 0, cost: { twig: 2, flint: 2 }, desc: '采矿 · 耐久 33 次' },
+  { code: 'shovel', name: '铲子', tab: 'tools', tech: 1, cost: { twig: 2, flint: 2 }, desc: '挖树桩得木头 · 耐久 25 次' },
+  { code: 'torch', name: '火把', tab: 'light', tech: 0, cost: { grass: 2, twig: 2 }, desc: '手持光源 · 燃烧 60 秒' },
+  { code: 'campfire', name: '篝火', tab: 'light', tech: 0, cost: { grass: 3, log: 2 }, desc: '原地点燃，可添柴，烧尽留灰烬' },
+  { code: 'firepit', name: '火堆', tab: 'light', tech: 1, cost: { log: 2, rock: 12 }, desc: '永久石圈火堆，熄灭后可再点燃' },
+  { code: 'rope', name: '绳子', tab: 'surv', tech: 0, cost: { grass: 3 }, desc: '基础合成材料' },
+  { code: 'trap', name: '陷阱', tab: 'surv', tech: 0, cost: { grass: 6, twig: 2 }, desc: '放置捕兔 · 耐久 8 次' },
+  { code: 'backpack', name: '背包', tab: 'surv', tech: 1, cost: { grass: 4, twig: 4 }, desc: '身体装备 · 物品栏 +8 格' },
+  { code: 'healingsalve', name: '治疗药膏', tab: 'surv', tech: 1, cost: { ash: 1, rock: 1, spidergland: 2 }, desc: '使用回复 20 生命' },
+  { code: 'honeypoultice', name: '蜂蜜药膏', tab: 'surv', tech: 2, cost: { reeds: 2, honey: 1 }, desc: '使用回复 30 生命' },
+  { code: 'thermalstone', name: '保暖石', tab: 'surv', tech: 2, cost: { rock: 10, flint: 3, rope: 1 }, desc: '篝火旁充热，随身抵御冰冻' },
+  { code: 'spear', name: '长矛', tab: 'fight', tech: 1, cost: { twig: 2, rope: 1, flint: 1 }, desc: '伤害 34 · 耐久 150 次' },
+  { code: 'logsuit', name: '木甲', tab: 'fight', tech: 1, cost: { log: 8, rope: 2 }, desc: '身体护甲 · 减伤 80%' },
+  { code: 'footballhelmet', name: '猪皮帽', tab: 'fight', tech: 1, cost: { pigskin: 1, rope: 1 }, desc: '头部护甲 · 减伤 80%' },
+  { code: 'crockpot', name: '烹饪锅', tab: 'food', tech: 1, cost: { rock: 6, twig: 6 }, desc: '放置后投入 4 份食材炖煮料理' },
+  { code: 'sciencemachine', name: '科学机器', tab: 'science', tech: 0, cost: { gold: 1, log: 4, rock: 4 }, desc: '解锁一级科技（靠近合成）' },
+  { code: 'alchemyengine', name: '炼金引擎', tab: 'science', tech: 1, cost: { gold: 6, log: 4, rock: 4 }, desc: '解锁二级科技（靠近合成）' },
+  { code: 'garland', name: '花环', tab: 'dress', tech: 0, cost: { petals: 12 }, desc: '头戴缓慢回复理智，会枯萎' },
+  { code: 'winterhat', name: '冬帽', tab: 'dress', tech: 2, cost: { silk: 4, beefwool: 2 }, desc: '保暖 · 冬季生存必备' },
+]
+
+// 烹饪锅配方：按优先级匹配（meatv 肉度 / sweet 甜度 / mm 怪物肉数）
+const POT_RULES = [
+  { dish: 'taffy', ok: (s) => s.sweet >= 3 },
+  { dish: 'honeyham', ok: (s) => s.sweet >= 1 && s.meatv >= 1.5 },
+  { dish: 'honeynuggets', ok: (s) => s.sweet >= 1 && s.meatv > 0 },
+  { dish: 'meatystew', ok: (s) => s.meatv >= 3 },
+  { dish: 'monsterlasagna', ok: (s) => s.mm >= 2 },
+  { dish: 'meatballs', ok: (s) => s.meatv >= 0.5 },
+]
+// 输入 4 个食材 code，返回料理 code（不满足任何配方 = 湿哒哒糊糊）
+export function cookPot(codes) {
+  const s = { meatv: 0, sweet: 0, mm: 0, veg: 0 }
+  codes.forEach((c) => {
+    const it = ITEMS[c] || {}
+    s.meatv += it.meatv || 0
+    s.sweet += it.sweet || 0
+    s.mm += it.mm || 0
+    s.veg += it.veg || 0
+  })
+  const hit = POT_RULES.find((r) => r.ok(s))
+  return hit ? hit.dish : 'wetgoop'
+}
+
+// =====================================================================
+// 生物表（官方血量伤害；树精/巨鹿按小游戏节奏取官方约 1/3）
+//  hostile 主动敌对 · neutral 被打才反击 · friendly 友方（猪人）
+// =====================================================================
+export const MON = {
+  spider: { hp: 100, speed: 84, dmg: 20, score: 12, name: '蜘蛛', hostile: true },
+  hound: { hp: 150, speed: 195, dmg: 20, score: 20, name: '猎犬', hostile: true },
+  icehound: { hp: 150, speed: 195, dmg: 20, score: 25, name: '冰猎犬', hostile: true, freeze: true },
+  shadow: { hp: 100, speed: 70, dmg: 20, score: 15, name: '暗影怪', hostile: true },
+  treeguard: { hp: 700, speed: 52, dmg: 50, score: 150, name: '树精', hostile: true, boss: true },
+  frog: { hp: 100, speed: 110, dmg: 10, score: 8, name: '青蛙', hostile: true },
+  bee: { hp: 30, speed: 150, dmg: 10, score: 5, name: '杀人蜂', hostile: true },
+  pig: { hp: 250, speed: 125, dmg: 33, score: 0, name: '猪人', friendly: true },
+  beefalo: { hp: 500, speed: 100, dmg: 34, score: 10, name: '皮弗娄牛', neutral: true },
+  deerclops: { hp: 1600, speed: 70, dmg: 75, score: 400, name: '独眼巨鹿', hostile: true, boss: true },
+}
+// 击杀掉落（落地为拾取物）：数组每项 [概率, code, 数量]
+export const MOB_DROPS = {
+  spider: [[0.5, 'monstermeat', 1], [0.25, 'silk', 1], [0.25, 'spidergland', 1]],
+  hound: [[1, 'monstermeat', 1]],
+  icehound: [[1, 'monstermeat', 1]],
+  shadow: [],
+  treeguard: [[1, 'log', 6]],
+  frog: [[1, 'froglegs', 1]],
+  bee: [[0.5, 'honey', 1]],
+  pig: [[0.75, 'meat', 1], [0.25, 'pigskin', 1]],
+  beefalo: [[1, 'meat', 2], [1, 'beefwool', 1]],
+  deerclops: [[1, 'meat', 3], [1, 'eyeball', 1]],
+}
+
+// =====================================================================
+// 资源实体模板
+//  hits/tool: 采集次数与所需工具 · hp: 可攻击实体血量 · regrow: 再生秒（冬季暂停）
+//  vanish: 采尽消失 · mobile: 会移动（兔子）
+// =====================================================================
+export const RES = {
+  tree: { hits: 3, tool: 'axe', drops: { log: 2 }, size: 42 },
+  rock: { hits: 3, tool: 'pick', drops: { rock: 2, flint: 1 }, size: 28 },
+  goldrock: { hits: 4, tool: 'pick', drops: { rock: 2, gold: 2 }, size: 30 },
+  grass: { hits: 1, drops: { grass: 1 }, size: 18, regrow: 240 },
+  sapling: { hits: 1, drops: { twig: 1 }, size: 20, regrow: 240 },
+  berry: { hits: 1, drops: { berry: 1 }, size: 22, regrow: 400 },
+  reeds: { hits: 1, drops: { reeds: 1 }, size: 20, regrow: 400 },
+  flower: { hits: 1, drops: { petals: 1 }, size: 14, vanish: true },
+  flint: { hits: 1, drops: { flint: 1 }, size: 14, vanish: true },
+  rabbit: { hp: 25, drops: { morsel: 1 }, size: 16, mobile: true },
+  rabbithole: { size: 18, solid: true },
+  spidernest: { hp: 200, size: 36, nest: true },
+  beehive: { hp: 100, size: 30, nest: true },
+  pighouse: { size: 40, struct: true },
+  tentacle: { hp: 250, size: 26, lurk: true },
+  sciencemachine: { size: 34, struct: true, techTier: 1 },
+  alchemyengine: { size: 38, struct: true, techTier: 2 },
+  crockpot: { size: 26, struct: true, pot: true },
+  trap: { size: 22, placeable: true },
+  loot: { size: 12, loot: true },
+}
+export const DECOR = { stump: { size: 20 }, rubble: { size: 16 } }
+
+// 实体/交互对象显示名（动作提示条）
+export const NAMES = {
+  tree: '树', rock: '岩石', goldrock: '金矿石', grass: '草丛', sapling: '树枝苗', berry: '浆果丛',
+  reeds: '芦苇', flower: '野花', flint: '燧石', rabbit: '兔子', rabbithole: '兔子洞',
+  spidernest: '蜘蛛巢', beehive: '蜂巢', pighouse: '猪屋', tentacle: '触手', trap: '陷阱',
+  sciencemachine: '科学机器', alchemyengine: '炼金引擎', crockpot: '烹饪锅', loot: '掉落物',
+  stump: '树桩', rubble: '碎石',
+}
diff --git a/src/games/starve/mobs.js b/src/games/starve/mobs.js
new file mode 100644
index 0000000..b1e09e4
--- /dev/null
+++ b/src/games/starve/mobs.js
@@ -0,0 +1,406 @@
+// 饥荒生物 AI：单个生物的逐帧行为（主机/单人权威模拟侧调用）
+// g 为游戏上下文门面（由 StarveGame 构造并逐帧刷新）：
+//   players/monsters/entities/fires 数组引用 · phase/season/time/day 时相
+//   isLand(x,y) · litAt(x,y) · nearestPlayer(x,y) · damagePlayer(p,dmg,label)
+//   addEntity(type,x,y,extra) · removeEntity(ent) · addLoot(x,y,code,n)
+//   removeMob(m) · killMob(m,credit) · smashStructure(ent) · tip(t) · ptip(p,t) · shake(amp)
+import { MON } from './data.js'
+
+// 带陆地碰撞的位移：先整体，再退化为单轴滑动
+export function moveMob(m, dx, dy, g) {
+  const nx = m.x + dx
+  const ny = m.y + dy
+  if (g.isLand(nx, ny)) {
+    m.x = nx
+    m.y = ny
+  } else if (g.isLand(nx, m.y)) {
+    m.x = nx
+  } else if (g.isLand(m.x, ny)) {
+    m.y = ny
+  }
+}
+function toward(m, tx, ty, speed, dt, g) {
+  const d = Math.hypot(tx - m.x, ty - m.y) || 1
+  moveMob(m, ((tx - m.x) / d) * speed * dt, ((ty - m.y) / d) * speed * dt, g)
+  m.dir = tx > m.x ? 1 : -1
+  m.moving = true
+}
+
+// 敌对生物的受害者集合：活玩家 + 猪人（暗影怪只认玩家）
+function nearestVictim(m, g, playersOnly = false) {
+  let best = null
+  let bd = Infinity
+  g.players.forEach((p) => {
+    if (p.dead) return
+    const d = Math.hypot(p.x - m.x, p.y - m.y)
+    if (d < bd) { bd = d; best = { kind: 'p', ref: p } }
+  })
+  if (!playersOnly) {
+    g.monsters.forEach((q) => {
+      if (q.kind !== 'pig' || q === m) return
+      const d = Math.hypot(q.x - m.x, q.y - m.y)
+      if (d < bd) { bd = d; best = { kind: 'm', ref: q } }
+    })
+  }
+  return best ? { v: best, d: bd } : null
+}
+// 对受害者造成伤害（玩家走减伤管线；猪人直接扣血并反击）
+function biteVictim(m, victim, dmg, label, g) {
+  if (victim.kind === 'p') {
+    g.damagePlayer(victim.ref, dmg, label)
+  } else {
+    const pig = victim.ref
+    pig.hp -= dmg
+    pig.shake = 0.22
+    pig.targetMob = m // 猪人被咬会还手
+    if (pig.hp <= 0) g.killMob(pig, null)
+  }
+}
+// 通用追咬：追近 → 咬一口 → 弹开
+function chaseBite(m, conf, victim, dist, dt, g, label, onBite) {
+  const ref = victim.ref
+  if (dist > 26) {
+    toward(m, ref.x, ref.y, conf.speed, dt, g)
+  } else if (m.cd <= 0) {
+    m.cd = 1.15
+    biteVictim(m, victim, conf.dmg, label, g)
+    onBite?.(ref, victim.kind)
+    moveMob(m, ((m.x - ref.x) / (dist || 1)) * 60, ((m.y - ref.y) / (dist || 1)) * 60, g)
+  }
+}
+
+// ---- 单个生物逐帧更新 ----
+export function updateMob(m, dt, g) {
+  const conf = (g.mon && g.mon[m.kind]) || MON[m.kind] // g.mon = mod 运行时生物表（如噩梦模式倍率）
+  m.moving = false
+  if (m.shake > 0) m.shake -= dt
+  if (m.cd > 0) m.cd -= dt
+  if (m.kind === 'shadow') updShadow(m, conf, dt, g)
+  else if (m.kind === 'spider') updSpider(m, conf, dt, g)
+  else if (m.kind === 'hound' || m.kind === 'icehound') updHound(m, conf, dt, g)
+  else if (m.kind === 'treeguard') updTreeguard(m, conf, dt, g)
+  else if (m.kind === 'pig') updPig(m, conf, dt, g)
+  else if (m.kind === 'beefalo') updBeefalo(m, conf, dt, g)
+  else if (m.kind === 'bee') updBee(m, conf, dt, g)
+  else if (m.kind === 'frog') updFrog(m, conf, dt, g)
+  else if (m.kind === 'deerclops') updDeerclops(m, conf, dt, g)
+  m.x = Math.max(24, Math.min(g.worldW - 24, m.x))
+  m.y = Math.max(24, Math.min(g.worldH - 24, m.y))
+}
+
+// 暗影怪：怕光；只袭击玩家；命中附带理智损失
+function updShadow(m, conf, dt, g) {
+  if (g.litAt(m.x, m.y)) {
+    const f = g.fires.find((f2) => f2.ttl > 0) || g.players.find((p) => !p.dead) || m
+    const d = Math.hypot(m.x - f.x, m.y - f.y) || 1
+    moveMob(m, ((m.x - f.x) / d) * 70 * dt, ((m.y - f.y) / d) * 70 * dt, g)
+    return
+  }
+  const near = nearestVictim(m, g, true)
+  if (!near) return
+  chaseBite(m, conf, near.v, near.d, dt, g, '被暗影咬了', (ref, kind) => {
+    if (kind === 'p') {
+      ref.san = Math.max(0, ref.san - 5)
+      g.ptip(ref, `被暗影咬了 · 生命 -${conf.dmg} 理智 -5`)
+    }
+  })
+}
+
+// 蜘蛛：巢边领地怪，白天守巢、夜晚游荡范围扩大；入侵者靠近即追击
+function updSpider(m, conf, dt, g) {
+  const home = m.nest && g.entities.includes(m.nest) ? m.nest : null
+  const ax = home ? home.x : m.x
+  const ay = home ? home.y : m.y
+  const aggroR = g.phase === 'night' ? 280 : 190
+  const near = nearestVictim(m, g)
+  if (near && Math.hypot(near.v.ref.x - ax, near.v.ref.y - ay) < aggroR) {
+    chaseBite(m, conf, near.v, near.d, dt, g, '被蜘蛛咬了', (ref, kind) => {
+      if (kind === 'p') g.ptip(ref, `被蜘蛛咬了 · 生命 -${conf.dmg}`)
+    })
+    return
+  }
+  m.wanderT -= dt
+  if (m.wanderT <= 0) {
+    m.wanderT = 1.6 + Math.random() * 2
+    const ang = Math.random() * Math.PI * 2
+    const r = Math.random() * (g.phase === 'night' ? 180 : 90)
+    m.tx = ax + Math.cos(ang) * r
+    m.ty = ay + Math.sin(ang) * r
+  }
+  if (m.tx !== undefined) {
+    const d = Math.hypot(m.tx - m.x, m.ty - m.y)
+    if (d > 6) toward(m, m.tx, m.ty, conf.speed * 0.45, dt, g)
+  }
+}
+
+// 猎犬/冰猎犬：无脑扑咬最近目标；冰犬命中附带冰冻减速与失温
+function updHound(m, conf, dt, g) {
+  const near = nearestVictim(m, g)
+  if (!near) return
+  chaseBite(m, conf, near.v, near.d, dt, g, '被猎犬咬了', (ref, kind) => {
+    if (kind === 'p') {
+      if (conf.freeze) {
+        ref.freezeT = 2.2
+        ref.temp = Math.max(-20, ref.temp - 12)
+        g.ptip(ref, `冰猎犬咬了你 · 生命 -${conf.dmg} · 寒气刺骨`)
+      } else {
+        g.ptip(ref, `猎犬咬了你一口 · 生命 -${conf.dmg}`)
+      }
+    }
+  })
+}
+
+// 树精：慢速逼近 → 抬臂前摇 → 拍击（可走位躲开）→ 硬直；远离太久重新扎根
+function updTreeguard(m, conf, dt, g) {
+  m.t -= dt
+  const near = nearestVictim(m, g, true)
+  if (!near) return
+  const tp = near.v.ref
+  const dist = near.d
+  if (dist > 340) {
+    m.awayT += dt
+    if (m.awayT > 6) {
+      g.removeMob(m)
+      g.addEntity('tree', m.x, m.y)
+      g.tip('树精平息了，重新扎根成一棵树')
+      return
+    }
+  } else {
+    m.awayT = 0
+  }
+  if (m.state === 'chase') {
+    if (dist > 54) toward(m, tp.x, tp.y, conf.speed, dt, g)
+    else {
+      m.state = 'windup'
+      m.t = 0.55
+    }
+  } else if (m.state === 'windup') {
+    if (m.t <= 0) {
+      m.state = 'smash'
+      m.t = 0.35
+      g.shake(6)
+      g.players.forEach((p) => {
+        if (!p.dead && Math.hypot(p.x - m.x, p.y - m.y) < 70) {
+          g.damagePlayer(p, conf.dmg, '被树精拍中了！')
+        }
+      })
+    }
+  } else if (m.state === 'smash') {
+    if (m.t <= 0) { m.state = 'recover'; m.t = 0.8 }
+  } else if (m.state === 'recover') {
+    if (m.t <= 0) m.state = 'chase'
+  }
+}
+
+// 猪人：白天绕屋游荡；被喂肉结盟跟随并助战；被打会记仇反击；夜晚回屋
+function updPig(m, conf, dt, g) {
+  if (m.loyalT > 0) m.loyalT -= dt
+  if (m.angryT > 0) m.angryT -= dt
+  // 1) 反击惹它的玩家
+  if (m.angryT > 0 && m.angryAt && !m.angryAt.dead) {
+    const d = Math.hypot(m.angryAt.x - m.x, m.angryAt.y - m.y)
+    chaseBite(m, conf, { kind: 'p', ref: m.angryAt }, d, dt, g, '被猪人揍了', (ref) => {
+      g.ptip(ref, `猪人还手了 · 生命 -${conf.dmg}`)
+    })
+    return
+  }
+  // 2) 与敌对生物作战（结盟时主动搜索主人周边的敌人）
+  if (m.targetMob && (!g.monsters.includes(m.targetMob) || m.targetMob.hp <= 0)) m.targetMob = null
+  if (!m.targetMob && m.loyalT > 0) {
+    const owner = m.owner && !m.owner.dead ? m.owner : null
+    let best = null
+    let bd = 180
+    g.monsters.forEach((q) => {
+      if (!MON[q.kind]?.hostile) return
+      const d = Math.min(
+        Math.hypot(q.x - m.x, q.y - m.y),
+        owner ? Math.hypot(q.x - owner.x, q.y - owner.y) : Infinity
+      )
+      if (d < bd) { bd = d; best = q }
+    })
+    m.targetMob = best
+  }
+  if (m.targetMob) {
+    const q = m.targetMob
+    const d = Math.hypot(q.x - m.x, q.y - m.y)
+    if (d > 30) {
+      toward(m, q.x, q.y, conf.speed, dt, g)
+    } else if (m.cd <= 0) {
+      m.cd = 1
+      q.hp -= conf.dmg
+      q.shake = 0.22
+      if (q.hp <= 0) {
+        g.killMob(q, null)
+        m.targetMob = null
+      }
+    }
+    return
+  }
+  // 3) 结盟跟随主人
+  if (m.loyalT > 0 && m.owner && !m.owner.dead) {
+    const d = Math.hypot(m.owner.x - m.x, m.owner.y - m.y)
+    if (d > 70) toward(m, m.owner.x, m.owner.y, conf.speed, dt, g)
+    return
+  }
+  // 4) 夜晚回屋 / 白天绕屋游荡
+  const hx = m.home?.x ?? m.x
+  const hy = m.home?.y ?? m.y
+  if (g.phase === 'night') {
+    if (Math.hypot(hx - m.x, hy - m.y) > 30) toward(m, hx, hy, conf.speed, dt, g)
+    return
+  }
+  m.wanderT -= dt
+  if (m.wanderT <= 0) {
+    m.wanderT = 2 + Math.random() * 3
+    const ang = Math.random() * Math.PI * 2
+    m.tx = hx + Math.cos(ang) * Math.random() * 120
+    m.ty = hy + Math.sin(ang) * Math.random() * 120
+  }
+  if (m.tx !== undefined && Math.hypot(m.tx - m.x, m.ty - m.y) > 8) {
+    toward(m, m.tx, m.ty, conf.speed * 0.4, dt, g)
+  }
+}
+
+// 皮弗娄牛：herd 锚点吃草游荡；被打后全群围攻一段时间
+function updBeefalo(m, conf, dt, g) {
+  if (m.angryT > 0) {
+    m.angryT -= dt
+    if (m.angryAt && !m.angryAt.dead) {
+      const d = Math.hypot(m.angryAt.x - m.x, m.angryAt.y - m.y)
+      chaseBite(m, conf, { kind: 'p', ref: m.angryAt }, d, dt, g, '被牛顶飞了', (ref) => {
+        g.ptip(ref, `皮弗娄牛暴怒冲撞 · 生命 -${conf.dmg}`)
+      })
+      return
+    }
+    m.angryT = 0
+  }
+  const hx = m.home?.x ?? m.x
+  const hy = m.home?.y ?? m.y
+  m.wanderT -= dt
+  if (m.wanderT <= 0) {
+    m.wanderT = 3 + Math.random() * 4
+    const ang = Math.random() * Math.PI * 2
+    m.tx = hx + Math.cos(ang) * Math.random() * 160
+    m.ty = hy + Math.sin(ang) * Math.random() * 160
+  }
+  if (m.tx !== undefined && Math.hypot(m.tx - m.x, m.ty - m.y) > 10) {
+    toward(m, m.tx, m.ty, conf.speed * 0.35, dt, g)
+  }
+}
+
+// 杀人蜂：短命防卫者，追蜇惹事者后飞散
+function updBee(m, conf, dt, g) {
+  m.life -= dt
+  if (m.life <= 0) {
+    g.removeMob(m)
+    return
+  }
+  let victim = null
+  if (m.angryAt && !m.angryAt.dead) victim = { kind: 'p', ref: m.angryAt }
+  else {
+    const near = nearestVictim(m, g, true)
+    if (near && near.d < 220) victim = near.v
+  }
+  if (!victim) {
+    // 无目标：飘回巢并提前散伙
+    m.life -= dt * 2
+    return
+  }
+  const d = Math.hypot(victim.ref.x - m.x, victim.ref.y - m.y)
+  if (d > 22) {
+    toward(m, victim.ref.x, victim.ref.y, conf.speed, dt, g)
+  } else if (m.cd <= 0) {
+    m.cd = 1.4
+    biteVictim(m, victim, conf.dmg, '被蜂蜇了', (ref, kind) => {
+      if (kind === 'p') g.ptip(ref, `被蜂蜇了 · 生命 -${conf.dmg}`)
+    })
+  }
+}
+
+// 青蛙：近处玩家跳咬，其余原地蹦跶
+function updFrog(m, conf, dt, g) {
+  const near = nearestVictim(m, g, true)
+  if (near && near.d < 130) {
+    chaseBite(m, conf, near.v, near.d, dt, g, '被青蛙弹了', (ref, kind) => {
+      if (kind === 'p') g.ptip(ref, `青蛙用舌头抽了你 · 生命 -${conf.dmg}`)
+    })
+    return
+  }
+  m.wanderT -= dt
+  if (m.wanderT <= 0) {
+    m.wanderT = 1.5 + Math.random() * 2.5
+    const ang = Math.random() * Math.PI * 2
+    m.tx = m.x + Math.cos(ang) * 50
+    m.ty = m.y + Math.sin(ang) * 50
+  }
+  if (m.tx !== undefined && Math.hypot(m.tx - m.x, m.ty - m.y) > 6) {
+    toward(m, m.tx, m.ty, conf.speed * 0.5, dt, g)
+  }
+}
+
+// 独眼巨鹿：优先拆毁玩家附近建筑，其次追人；范围砸击；冬季结束自行离去
+function updDeerclops(m, conf, dt, g) {
+  m.t -= dt
+  if (g.season !== 'winter') {
+    g.removeMob(m)
+    g.tip('冬天过去了，独眼巨鹿转身离开……')
+    return
+  }
+  // 目标：先找 500 内建筑，否则最近的玩家
+  if (!m.targetEnt || !g.entities.includes(m.targetEnt)) {
+    m.targetEnt = null
+    let bd = 500
+    g.entities.forEach((e) => {
+      if (!(e.struct || e.pot)) return
+      const d = Math.hypot(e.x - m.x, e.y - m.y)
+      if (d < bd) { bd = d; m.targetEnt = e }
+    })
+  }
+  const near = nearestVictim(m, g)
+  let tx
+  let ty
+  let dist
+  if (m.targetEnt) {
+    tx = m.targetEnt.x
+    ty = m.targetEnt.y
+    dist = Math.hypot(tx - m.x, ty - m.y)
+  } else if (near) {
+    tx = near.v.ref.x
+    ty = near.v.ref.y
+    dist = near.d
+  } else return
+  if (m.state === 'chase' || !m.state) {
+    if (dist > 80) toward(m, tx, ty, conf.speed, dt, g)
+    else {
+      m.state = 'windup'
+      m.t = 0.8
+    }
+  } else if (m.state === 'windup') {
+    if (m.t <= 0) {
+      m.state = 'smash'
+      m.t = 0.4
+      g.shake(10)
+      // 范围砸击：玩家/猪人受伤，建筑直接摧毁
+      g.players.forEach((p) => {
+        if (!p.dead && Math.hypot(p.x - m.x, p.y - m.y) < 95) {
+          g.damagePlayer(p, conf.dmg, '被独眼巨鹿砸中了！')
+        }
+      })
+      g.monsters.forEach((q) => {
+        if (q.kind === 'pig' && Math.hypot(q.x - m.x, q.y - m.y) < 95) {
+          q.hp -= conf.dmg
+          if (q.hp <= 0) g.killMob(q, null)
+        }
+      })
+      g.entities.slice().forEach((e) => {
+        if ((e.struct || e.pot) && Math.hypot(e.x - m.x, e.y - m.y) < 95) {
+          g.smashStructure(e)
+        }
+      })
+    }
+  } else if (m.state === 'smash') {
+    if (m.t <= 0) { m.state = 'recover'; m.t = 1.1 }
+  } else if (m.state === 'recover') {
+    if (m.t <= 0) m.state = 'chase'
+  }
+}
diff --git a/src/games/starve/mods/chest.js b/src/games/starve/mods/chest.js
new file mode 100644
index 0000000..4a3648c
--- /dev/null
+++ b/src/games/starve/mods/chest.js
@@ -0,0 +1,135 @@
+// 宝藏：世界各处散落 6~10 个宝箱，开箱按战利品表获得物资（每箱一次）
+const TAU = Math.PI * 2
+
+// 战利品表：[权重, code, 最少, 最多]
+const LOOT = [
+  [3, 'gold', 2, 4],
+  [3, 'flint', 2, 4],
+  [2, 'rope', 1, 2],
+  [2, 'log', 3, 6],
+  [2, 'honey', 1, 2],
+  [2, 'silk', 2, 3],
+  [1, 'healingsalve', 1, 1],
+  [1, 'trap', 1, 2],
+  [1, 'meatballs', 1, 1],
+]
+
+function rollLoot(g) {
+  const total = LOOT.reduce((n, l) => n + l[0], 0)
+  let r = Math.random() * total
+  for (const [w, code, lo, hi] of LOOT) {
+    r -= w
+    if (r <= 0) return [code, g.rand(lo, hi)]
+  }
+  return ['gold', 1]
+}
+
+export default {
+  id: 'chest',
+  name: '宝藏',
+  desc: '世界散落宝箱，探索开出物资',
+  factor: 1,
+  tag: 'content',
+  ents: {
+    chest: {
+      name: '宝箱',
+      conf: { size: 26 },
+      init(e) {
+        if (!e.state) e.state = 'closed'
+      },
+      interact(p, e, g) {
+        if (e.state === 'closed') {
+          e.state = 'open'
+          g.markDirty(e)
+          g.swing(p, 'chop')
+          const rolls = g.rand(2, 3)
+          const got = []
+          for (let i = 0; i < rolls; i++) {
+            const [code, n] = rollLoot(g)
+            g.addItem(p, code, n)
+            got.push(`${g.items[code]?.name || code} ×${n}`)
+          }
+          g.addScore(25, p)
+          g.ptip(p, `打开宝箱：${got.join('、')}`)
+          g.shake(1.5)
+          return
+        }
+        g.ptip(p, '空空如也的旧箱子')
+      },
+      draw(ctx, e, env) {
+        const open = e.state === 'open'
+        // 阴影
+        ctx.fillStyle = 'rgba(0,0,0,0.25)'
+        ctx.beginPath()
+        ctx.ellipse(0, 4, 18, 6, 0, 0, TAU)
+        ctx.fill()
+        // 箱体
+        ctx.fillStyle = '#7a5230'
+        ctx.strokeStyle = '#1d1409'
+        ctx.lineWidth = 2
+        ctx.beginPath()
+        ctx.roundRect(-16, -12, 32, 18, 3)
+        ctx.fill()
+        ctx.stroke()
+        // 盖子：闭合盖在上方 / 打开向后仰
+        ctx.fillStyle = open ? '#5d3f24' : '#8a5f38'
+        ctx.beginPath()
+        if (open) {
+          ctx.roundRect(-16, -26, 32, 9, 3)
+          ctx.fill()
+          ctx.stroke()
+          // 内部
+          ctx.fillStyle = '#2a1c10'
+          ctx.fillRect(-13, -12, 26, 6)
+        } else {
+          ctx.roundRect(-17, -18, 34, 9, 3)
+          ctx.fill()
+          ctx.stroke()
+        }
+        // 金属包边 + 锁扣
+        ctx.strokeStyle = '#d8b04a'
+        ctx.lineWidth = 2
+        ctx.beginPath()
+        ctx.moveTo(-10, open ? -12 : -18)
+        ctx.lineTo(-10, 6)
+        ctx.moveTo(10, open ? -12 : -18)
+        ctx.lineTo(10, 6)
+        ctx.stroke()
+        if (!open) {
+          ctx.fillStyle = '#d8b04a'
+          ctx.strokeStyle = '#1d1409'
+          ctx.lineWidth = 1.4
+          ctx.beginPath()
+          ctx.roundRect(-3, -12, 6, 7, 1.5)
+          ctx.fill()
+          ctx.stroke()
+          // 微光
+          const tw = 0.5 + Math.sin((env?.time || 0) * 3 + e.id) * 0.5
+          ctx.fillStyle = `rgba(255,230,150,${0.25 + tw * 0.3})`
+          ctx.beginPath()
+          ctx.arc(6, -15, 1.6 + tw, 0, TAU)
+          ctx.fill()
+        }
+      },
+    },
+  },
+  hooks: {
+    onWorldGen(g) {
+      const cx = g.worldW / 2
+      const cy = g.worldH / 2
+      const spots = []
+      const target = 6 + g.rand(0, 4)
+      for (let tries = 0; tries < 600 && spots.length < target; tries++) {
+        const x = 60 + Math.random() * (g.worldW - 120)
+        const y = 60 + Math.random() * (g.worldH - 120)
+        if (!g.isLand(x, y)) continue
+        if (Math.hypot(x - cx, y - cy) < 380) continue // 离出生点远一些才有探索感
+        if (spots.some((s) => Math.hypot(s.x - x, s.y - y) < 280)) continue
+        if (g.entities.some((e) => !e.deco && Math.hypot(e.x - x, e.y - y) < 40)) continue
+        spots.push({ x, y })
+      }
+      spots.forEach((s) => g.addEntity('chest', s.x, s.y))
+      if (spots.length) g.tip(`听说这片荒野埋着 ${spots.length} 个宝箱……`)
+    },
+  },
+}
diff --git a/src/games/starve/mods/chester.js b/src/games/starve/mods/chester.js
new file mode 100644
index 0000000..0cac050
--- /dev/null
+++ b/src/games/starve/mods/chester.js
@@ -0,0 +1,217 @@
+// 切斯特：荒野某处藏着眼骨，拾起后切斯特现身跟随；
+// 它会自动吞掉身边的掉落物（9 格随身仓），点击它把肚子里的东西全吐出来
+const TAU = Math.PI * 2
+const STORE_SLOTS = 9
+
+function ownerOf(g) {
+  return g.players.find((p) => !p.dead && g.countItem(p, 'eyebone') > 0) || null
+}
+
+function stackInto(store, code, n, cap) {
+  let left = n
+  // 先叠进已有同类
+  for (const s of store) {
+    if (!s || s.code !== code || s.n >= cap) continue
+    const add = Math.min(cap - s.n, left)
+    s.n += add
+    left -= add
+    if (!left) return 0
+  }
+  // 再开新格
+  for (let i = 0; i < store.length && left; i++) {
+    if (store[i]) continue
+    const add = Math.min(cap, left)
+    store[i] = { code, n: add }
+    left -= add
+  }
+  return left
+}
+
+export default {
+  id: 'chester',
+  name: '切斯特',
+  desc: '寻获眼骨召来跟班箱子，自动吞附近掉落物',
+  factor: 1,
+  tag: 'content',
+  items: {
+    eyebone: { name: '眼骨', stack: 1 },
+  },
+  icons: {
+    eyebone: (c) => {
+      c.strokeStyle = '#ece7db'
+      c.lineWidth = 4
+      c.beginPath(); c.moveTo(-4, 12); c.lineTo(4, -4); c.stroke()
+      c.fillStyle = '#ece7db'
+      c.strokeStyle = '#1d1409'
+      c.lineWidth = 1.6
+      ;[[-7, 12], [-1, 14]].forEach(([x, y]) => {
+        c.beginPath(); c.arc(x, y, 3.4, 0, TAU); c.fill(); c.stroke()
+      })
+      c.beginPath(); c.arc(5, -8, 7, 0, TAU); c.fill(); c.stroke()
+      c.fillStyle = '#fff'
+      c.beginPath(); c.arc(5, -8, 4.6, 0, TAU); c.fill()
+      c.fillStyle = '#4a90c2'
+      c.beginPath(); c.arc(5, -8, 2.6, 0, TAU); c.fill()
+      c.fillStyle = '#1d1409'
+      c.beginPath(); c.arc(5, -8, 1.2, 0, TAU); c.fill()
+    },
+  },
+  mobs: {
+    chester: {
+      conf: { hp: 300, speed: 160, dmg: 0, score: 0, name: '切斯特' },
+      friendly: true,
+      drops: [],
+      update(m, dt, g) {
+        if (!m.store) m.store = Array(STORE_SLOTS).fill(null)
+        // 优先扑向附近掉落物吞掉（眼骨除外；刚吐出的东西有几秒宽限期不回吞）
+        const loot = m.cd <= 0
+          ? g.entities.find((e) => e.loot && e.code !== 'eyebone' && !(e.shyUntil > g.time) && Math.hypot(e.x - m.x, e.y - m.y) < 150)
+          : null
+        if (loot) {
+          const d = Math.hypot(loot.x - m.x, loot.y - m.y)
+          if (d > 26) {
+            g.moveToward(m, loot.x, loot.y, 175, dt)
+          } else {
+            const cap = g.items[loot.code]?.stack || g.tune.stackMax
+            const left = stackInto(m.store, loot.code, loot.n, cap)
+            if (left < loot.n) {
+              m.cd = 0.35
+              m.gulpT = 0.5
+              if (left > 0) loot.n = left
+              else g.removeEntity(loot)
+            } else {
+              m.cd = 2 // 仓满吞不下，歇会儿别原地抽搐
+            }
+          }
+          if (m.gulpT > 0) m.gulpT -= dt
+          return
+        }
+        const owner = ownerOf(g)
+        if (owner) {
+          const d = Math.hypot(owner.x - m.x, owner.y - m.y)
+          if (d > 64) {
+            const sprint = d > 220 ? 1.5 : 1
+            g.moveToward(m, owner.x - owner.dir * 40, owner.y + 16, 160 * sprint, dt)
+          }
+        }
+        if (m.gulpT > 0) m.gulpT -= dt
+      },
+      interact(p, m, g) {
+        const has = (m.store || []).filter(Boolean)
+        if (!has.length) {
+          g.ptip(p, '切斯特打了个哈欠（肚子是空的）')
+          return
+        }
+        has.forEach((s) => {
+          const l = g.dropLoot(m.x + g.rand(-24, 24), m.y + g.rand(10, 30), s.code, s.n)
+          if (l) l.shyUntil = g.time + 6
+        })
+        m.store = Array(STORE_SLOTS).fill(null)
+        m.gulpT = 0.5
+        g.ptip(p, `切斯特吐出了 ${has.length} 样东西`)
+      },
+      draw(ctx, m, time) {
+        const hop = m.moving ? Math.abs(Math.sin(time * 9 + m.bob)) * 6 : Math.sin(time * 2.2 + m.bob) * 1.5
+        const squash = m.gulpT > 0 ? 1.15 : 1
+        ctx.save()
+        ctx.translate(0, -hop)
+        ctx.scale(m.dir, 1)
+        // 阴影
+        ctx.restore()
+        ctx.fillStyle = 'rgba(0,0,0,0.25)'
+        ctx.beginPath()
+        ctx.ellipse(0, 2, 16, 5, 0, 0, TAU)
+        ctx.fill()
+        ctx.save()
+        ctx.translate(0, -hop)
+        ctx.scale(m.dir * squash, 1 / squash)
+        // 小短腿
+        ctx.strokeStyle = '#4a2c1a'
+        ctx.lineWidth = 4
+        const leg = m.moving ? Math.sin(time * 12) * 3 : 0
+        ctx.beginPath(); ctx.moveTo(-8, -4); ctx.lineTo(-8 + leg, 2); ctx.moveTo(8, -4); ctx.lineTo(8 - leg, 2); ctx.stroke()
+        // 圆滚滚的身体
+        ctx.fillStyle = '#a85a28'
+        ctx.strokeStyle = '#1d1409'
+        ctx.lineWidth = 2
+        ctx.beginPath()
+        ctx.ellipse(0, -16, 15, 14, 0, 0, TAU)
+        ctx.fill()
+        ctx.stroke()
+        // 大嘴（张合）
+        const mouth = m.gulpT > 0 ? 5 : 2 + Math.sin(time * 3 + m.bob) * 1
+        ctx.fillStyle = '#5d2a12'
+        ctx.beginPath()
+        ctx.ellipse(4, -12, 9, mouth, 0.15, 0, TAU)
+        ctx.fill()
+        // 牙
+        ctx.fillStyle = '#ece7db'
+        ctx.beginPath(); ctx.moveTo(-2, -14); ctx.lineTo(0, -10); ctx.lineTo(2, -14); ctx.closePath(); ctx.fill()
+        ctx.beginPath(); ctx.moveTo(7, -14); ctx.lineTo(9, -10); ctx.lineTo(11, -14); ctx.closePath(); ctx.fill()
+        // 眼睛
+        ctx.fillStyle = '#fff'
+        ctx.strokeStyle = '#1d1409'
+        ctx.lineWidth = 1.4
+        ctx.beginPath(); ctx.arc(-2, -24, 3.4, 0, TAU); ctx.fill(); ctx.stroke()
+        ctx.beginPath(); ctx.arc(7, -23, 3, 0, TAU); ctx.fill(); ctx.stroke()
+        ctx.fillStyle = '#1d1409'
+        ctx.beginPath(); ctx.arc(-1.4, -23.6, 1.4, 0, TAU); ctx.fill()
+        ctx.beginPath(); ctx.arc(7.6, -22.6, 1.2, 0, TAU); ctx.fill()
+        // 角耳朵
+        ctx.strokeStyle = '#7a3f1c'
+        ctx.lineWidth = 3.4
+        ctx.beginPath(); ctx.moveTo(-10, -27); ctx.quadraticCurveTo(-14, -34, -10, -38); ctx.stroke()
+        ctx.beginPath(); ctx.moveTo(4, -28); ctx.quadraticCurveTo(8, -35, 4, -39); ctx.stroke()
+        ctx.restore()
+      },
+    },
+  },
+  hooks: {
+    onWorldGen(g) {
+      // 眼骨落在远离出生点的荒野
+      const cx = g.worldW / 2
+      const cy = g.worldH / 2
+      let best = null
+      for (let tries = 0; tries < 300; tries++) {
+        const x = 80 + Math.random() * (g.worldW - 160)
+        const y = 80 + Math.random() * (g.worldH - 160)
+        if (!g.isLand(x, y)) continue
+        const d = Math.hypot(x - cx, y - cy)
+        if (d > 480 && d < 1100) { best = { x, y }; break }
+      }
+      if (!best) best = g.findLand(cx + 500, cy, 0, 200)
+      g.addEntity('loot', best.x, best.y, { code: 'eyebone', n: 1, fresh: 1 })
+      g.tip('传说荒野某处躺着一根奇怪的眼骨……')
+    },
+    onTick(g) {
+      const owner = ownerOf(g)
+      if (!owner) return
+      if (g.monsters.some((m) => m.kind === 'chester')) return
+      const spot = g.findLand(owner.x + 60, owner.y + 40, 20, 60)
+      g.spawnMob('chester', spot.x, spot.y)
+      g.tip('切斯特闻着眼骨的味道蹦了出来！（它会吞附近的掉落物，点它取回）')
+    },
+    onUseItem(g, p, s) {
+      if (s.code !== 'eyebone') return
+      const ch = g.monsters.find((m) => m.kind === 'chester')
+      if (ch) {
+        const n = (ch.store || []).filter(Boolean).length
+        g.ptip(p, n ? `切斯特肚子里有 ${n} 样东西（点击它取回）` : '切斯特跟在你身边（会自动吞掉落物）')
+      } else {
+        g.ptip(p, '眼骨微微颤动着……切斯特正在赶来')
+      }
+      return true
+    },
+    // 切斯特与仓内物品随存档走（生物本身不入档）
+    save(g) {
+      const ch = g.monsters.find((m) => m.kind === 'chester')
+      if (!ch) return null
+      return { x: Math.round(ch.x), y: Math.round(ch.y), store: (ch.store || []).map((s) => (s ? [s.code, s.n] : 0)) }
+    },
+    load(g, d) {
+      const m = g.spawnMob('chester', d.x, d.y)
+      m.store = (d.store || []).map((v) => (v ? { code: v[0], n: v[1] } : null))
+      while (m.store.length < STORE_SLOTS) m.store.push(null)
+    },
+  },
+}
diff --git a/src/games/starve/mods/farm.js b/src/games/starve/mods/farm.js
new file mode 100644
index 0000000..c1a3af9
--- /dev/null
+++ b/src/games/starve/mods/farm.js
@@ -0,0 +1,246 @@
+// 农场：锄头开垦农田，播下种子经三阶段生长收获作物
+// - 锄头（0 级科技合成，耐久 20）：点击使用在面前开垦一块农田
+// - 种子：采草 15% 掉胡萝卜种子，采浆果丛 25% 掉浆果种子；点击种子播到身边空农田
+// - 生长：2 天（320 秒）三阶段，冬季暂停；成熟后点击收获 2~3 个作物
+const TAU = Math.PI * 2
+const GROW_TOTAL = 320 // 两天
+
+function stageOf(t) {
+  if (t >= GROW_TOTAL) return 'ready'
+  if (t >= 214) return 'grow2'
+  if (t >= 107) return 'grow1'
+  return 'grow0'
+}
+
+function plant(p, plot, seedCode, g) {
+  plot.mx = { seed: seedCode === 'berryseeds' ? 'berry' : 'carrot', t: 0 }
+  plot.state = 'grow0'
+  g.markDirty(plot)
+  g.swing(p, 'dig')
+  g.ptip(p, `种下了${seedCode === 'berryseeds' ? '浆果' : '胡萝卜'}种子`)
+}
+
+export default {
+  id: 'farm',
+  name: '农场',
+  desc: '锄头开垦农田，种植浆果与胡萝卜',
+  factor: 1,
+  tag: 'content',
+  items: {
+    hoe: { name: '锄头', stack: 1, uses: 20 },
+    carrotseeds: { name: '胡萝卜种子', stack: 40 },
+    berryseeds: { name: '浆果种子', stack: 40 },
+    carrot: { name: '胡萝卜', food: { hunger: 12.5, hp: 1, san: 0 }, cook: 'cookedcarrot', perish: 10, veg: 1 },
+    cookedcarrot: { name: '烤胡萝卜', food: { hunger: 12.5, hp: 3, san: 0 }, perish: 10, veg: 1 },
+  },
+  recipes: [
+    { code: 'hoe', name: '锄头', tab: 'tools', tech: 0, cost: { twig: 2, flint: 2 }, desc: '开垦农田 · 耐久 20 次' },
+  ],
+  icons: {
+    hoe: (c) => {
+      c.strokeStyle = '#7a5b33'
+      c.lineWidth = 3
+      c.beginPath(); c.moveTo(-8, 12); c.lineTo(6, -10); c.stroke()
+      c.fillStyle = '#8d9097'
+      c.strokeStyle = '#1d1409'
+      c.lineWidth = 1.6
+      c.beginPath(); c.moveTo(4, -12); c.lineTo(12, -8); c.lineTo(10, -2); c.lineTo(3, -6); c.closePath()
+      c.fill(); c.stroke()
+    },
+    carrotseeds: (c) => {
+      c.fillStyle = '#c9a36b'
+      c.strokeStyle = '#1d1409'
+      c.lineWidth = 1.4
+      ;[[-5, 2], [3, -3], [6, 6], [-3, 8], [0, -7]].forEach(([x, y]) => {
+        c.beginPath(); c.ellipse(x, y, 3, 4.2, 0.4, 0, TAU); c.fill(); c.stroke()
+      })
+      c.fillStyle = '#e08a3c'
+      c.beginPath(); c.ellipse(0, -1, 2, 2.6, 0, 0, TAU); c.fill()
+    },
+    berryseeds: (c) => {
+      c.fillStyle = '#b6d29b'
+      c.strokeStyle = '#1d1409'
+      c.lineWidth = 1.4
+      ;[[-5, 2], [3, -3], [6, 6], [-3, 8], [0, -7]].forEach(([x, y]) => {
+        c.beginPath(); c.ellipse(x, y, 3, 4.2, 0.4, 0, TAU); c.fill(); c.stroke()
+      })
+      c.fillStyle = '#c0455a'
+      c.beginPath(); c.ellipse(0, -1, 2.4, 2.4, 0, 0, TAU); c.fill()
+    },
+    carrot: (c) => {
+      c.fillStyle = '#e08a3c'
+      c.strokeStyle = '#1d1409'
+      c.lineWidth = 1.8
+      c.beginPath(); c.moveTo(-6, -4); c.quadraticCurveTo(0, -9, 6, -4); c.lineTo(1, 12); c.closePath()
+      c.fill(); c.stroke()
+      c.strokeStyle = '#8f9a3e'
+      c.lineWidth = 2.4
+      c.beginPath(); c.moveTo(-3, -6); c.lineTo(-6, -13); c.moveTo(0, -7); c.lineTo(0, -14); c.moveTo(3, -6); c.lineTo(6, -13); c.stroke()
+    },
+    cookedcarrot: (c) => {
+      c.fillStyle = '#c0703a'
+      c.strokeStyle = '#1d1409'
+      c.lineWidth = 1.8
+      c.beginPath(); c.moveTo(-6, -3); c.quadraticCurveTo(0, -8, 6, -3); c.lineTo(1, 12); c.closePath()
+      c.fill(); c.stroke()
+      c.strokeStyle = '#5a4a3a'
+      c.lineWidth = 1.2
+      c.beginPath(); c.moveTo(-3, 0); c.lineTo(2, 1); c.moveTo(-2, 5); c.lineTo(2, 6); c.stroke()
+    },
+  },
+  ents: {
+    farmplot: {
+      name: '农田',
+      conf: { size: 26 },
+      init(e) {
+        if (!e.state) e.state = 'empty'
+      },
+      update(e, dt, g) {
+        if (!e.mx || e.state === 'empty' || e.state === 'ready') return
+        if (g.season === 'winter') return // 冬季停止生长（与官方一致）
+        e.mx.t += dt
+        const st = stageOf(e.mx.t)
+        if (st !== e.state) {
+          e.state = st
+          g.markDirty(e)
+          if (st === 'ready') g.tip('农田里的作物成熟了！')
+        }
+      },
+      interact(p, e, g) {
+        if (e.state === 'ready') {
+          const crop = e.mx?.seed || 'carrot'
+          const n = g.rand(2, 3)
+          g.addItem(p, crop, n)
+          g.addScore(12, p)
+          g.swing(p, 'chop')
+          g.ptip(p, `收获${crop === 'berry' ? '浆果' : '胡萝卜'} ×${n}`)
+          e.state = 'empty'
+          e.mx = null
+          g.markDirty(e)
+          return
+        }
+        if (e.state === 'empty') {
+          // 身上有种子就直接播种
+          const seed = ['berryseeds', 'carrotseeds'].find((code) => g.countItem(p, code) > 0)
+          if (seed) {
+            g.payCost(p, { [seed]: 1 })
+            plant(p, e, seed, g)
+          } else {
+            g.ptip(p, '空农田：需要种子（采草丛/浆果丛概率获得）')
+          }
+          return
+        }
+        g.ptip(p, '作物生长中……（冬季会暂停）')
+      },
+      draw(ctx, e) {
+        // 垄起的土地
+        ctx.fillStyle = '#6b4a2e'
+        ctx.strokeStyle = '#1d1409'
+        ctx.lineWidth = 2
+        ctx.beginPath()
+        ctx.ellipse(0, 0, 24, 14, 0, 0, TAU)
+        ctx.fill()
+        ctx.stroke()
+        ctx.strokeStyle = '#553a24'
+        ctx.lineWidth = 2
+        ;[-8, 0, 8].forEach((y) => {
+          ctx.beginPath()
+          ctx.moveTo(-16 + Math.abs(y), y * 0.6)
+          ctx.lineTo(16 - Math.abs(y), y * 0.6)
+          ctx.stroke()
+        })
+        const st = e.state
+        if (st === 'empty' || !st) return
+        const berry = e.mx?.seed === 'berry'
+        if (st === 'grow0') {
+          ctx.strokeStyle = '#7fb069'
+          ctx.lineWidth = 2
+          ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, -7); ctx.stroke()
+          ctx.fillStyle = '#8f9a3e'
+          ctx.beginPath(); ctx.ellipse(2, -7, 3, 1.8, -0.4, 0, TAU); ctx.fill()
+        } else if (st === 'grow1') {
+          ctx.strokeStyle = '#6f9a52'
+          ctx.lineWidth = 2.4
+          ;[-6, 0, 6].forEach((x) => {
+            ctx.beginPath(); ctx.moveTo(x, 2); ctx.lineTo(x * 1.3, -11); ctx.stroke()
+          })
+        } else if (st === 'grow2') {
+          ctx.strokeStyle = '#5d8a45'
+          ctx.lineWidth = 2.8
+          ;[-8, 0, 8].forEach((x) => {
+            ctx.beginPath(); ctx.moveTo(x, 2); ctx.quadraticCurveTo(x * 1.4, -10, x * 1.1, -18); ctx.stroke()
+          })
+          ctx.fillStyle = berry ? '#7a9a52' : '#8f9a3e'
+          ctx.beginPath(); ctx.ellipse(0, -16, 9, 5, 0, 0, TAU); ctx.fill()
+        } else {
+          // ready：结出作物
+          ctx.strokeStyle = '#5d8a45'
+          ctx.lineWidth = 2.8
+          ;[-9, 0, 9].forEach((x) => {
+            ctx.beginPath(); ctx.moveTo(x, 2); ctx.quadraticCurveTo(x * 1.4, -12, x * 1.1, -20); ctx.stroke()
+          })
+          if (berry) {
+            ctx.fillStyle = '#c0455a'
+            ctx.strokeStyle = '#1d1409'
+            ctx.lineWidth = 1.4
+            ;[[-8, -14], [0, -19], [8, -13]].forEach(([x, y]) => {
+              ctx.beginPath(); ctx.arc(x, y, 3.6, 0, TAU); ctx.fill(); ctx.stroke()
+            })
+          } else {
+            ctx.fillStyle = '#e08a3c'
+            ctx.strokeStyle = '#1d1409'
+            ctx.lineWidth = 1.4
+            ;[[-8, -4], [0, -5], [8, -4]].forEach(([x, y]) => {
+              ctx.beginPath()
+              ctx.moveTo(x - 3, y); ctx.quadraticCurveTo(x, y - 3, x + 3, y); ctx.lineTo(x, y + 7); ctx.closePath()
+              ctx.fill(); ctx.stroke()
+            })
+          }
+        }
+      },
+    },
+  },
+  hooks: {
+    onUseItem(g, p, s, area, i) {
+      if (s.code === 'hoe') {
+        const spot = g.findLand(p.x + p.dir * 46, p.y + 8, 0, 24)
+        const crowded = g.entities.some((e) => !e.deco && !e.loot && Math.hypot(e.x - spot.x, e.y - spot.y) < 34)
+        if (crowded) {
+          g.ptip(p, '这里太挤了，换块空地开垦')
+          return true
+        }
+        g.addEntity('farmplot', spot.x, spot.y)
+        g.swing(p, 'dig')
+        s.dur = (s.dur ?? g.items.hoe.uses) - 1
+        if (s.dur <= 0) {
+          g.consumeAt(p, area, i)
+          g.ptip(p, '开垦出农田 · 锄头用坏了')
+        } else {
+          g.ptip(p, '开垦出一块农田（种子点击播种）')
+        }
+        g.invalidate()
+        return true
+      }
+      if (s.code === 'berryseeds' || s.code === 'carrotseeds') {
+        const plot = g.entities.find((e) => e.type === 'farmplot' && e.state === 'empty' && Math.hypot(e.x - p.x, e.y - p.y) < 80)
+        if (!plot) {
+          g.ptip(p, '需要站在空农田旁播种（先用锄头开垦）')
+          return true
+        }
+        const code = s.code
+        g.consumeAt(p, area, i)
+        plant(p, plot, code, g)
+        return true
+      }
+    },
+    onGather(g, p, e) {
+      if (e.type === 'grass' && Math.random() < 0.15) {
+        g.addItem(p, 'carrotseeds', 1)
+        g.ptip(p, '草丛里翻出了胡萝卜种子！')
+      } else if (e.type === 'berry' && Math.random() < 0.25) {
+        g.addItem(p, 'berryseeds', 1)
+        g.ptip(p, '摘到了一把浆果种子')
+      }
+    },
+  },
+}
diff --git a/src/games/starve/mods/index.js b/src/games/starve/mods/index.js
new file mode 100644
index 0000000..a03623e
--- /dev/null
+++ b/src/games/starve/mods/index.js
@@ -0,0 +1,11 @@
+// 内置 mod 列表：声明顺序即合并顺序（主客机保持一致，勿随意调换）
+import qol from './qol.js'
+import farm from './farm.js'
+import chest from './chest.js'
+import chester from './chester.js'
+import revive from './revive.js'
+import peaceful from './peaceful.js'
+import nightmare from './nightmare.js'
+import magic from './magic.js'
+
+export const MODS = [qol, farm, chest, chester, revive, peaceful, nightmare, magic]
diff --git a/src/games/starve/mods/magic.js b/src/games/starve/mods/magic.js
new file mode 100644
index 0000000..ce87d3c
--- /dev/null
+++ b/src/games/starve/mods/magic.js
@@ -0,0 +1,214 @@
+// 魔法武器：火魔杖（对最近敌人范围灼烧）+ 回旋镖（直线飞行命中后折返）
+const TAU = Math.PI * 2
+const STAFF_RANGE = 280 // 施法距离
+const STAFF_AOE = 85 // 爆燃半径
+const STAFF_DMG = 35
+const BOOM_SPEED = 340
+const BOOM_RANGE = 270
+const BOOM_DMG = 20
+
+function hostileNear(g, x, y, r) {
+  let best = null
+  let bd = r
+  g.monsters.forEach((m) => {
+    if (!g.mon[m.kind]?.hostile) return
+    const d = Math.hypot(m.x - x, m.y - y)
+    if (d < bd) { bd = d; best = m }
+  })
+  return best
+}
+
+function useDur(g, p, s, area, i, brokeText) {
+  s.dur = (s.dur ?? g.items[s.code].uses) - 1
+  if (s.dur <= 0) {
+    g.consumeAt(p, area, i)
+    g.ptip(p, brokeText)
+  }
+  g.invalidate()
+}
+
+export default {
+  id: 'magic',
+  name: '魔法武器',
+  desc: '火魔杖范围灼烧 · 回旋镖飞掷折返',
+  factor: 1,
+  tag: 'content',
+  items: {
+    firestaff: { name: '火魔杖', stack: 1, uses: 20 },
+    boomerang: { name: '回旋镖', stack: 1, uses: 10 },
+  },
+  recipes: [
+    { code: 'firestaff', name: '火魔杖', tab: 'fight', tech: 2, cost: { twig: 2, gold: 2, rope: 1 }, desc: `灼烧最近敌人及周围（${STAFF_DMG} 伤害）· 20 次` },
+    { code: 'boomerang', name: '回旋镖', tab: 'fight', tech: 1, cost: { twig: 2, flint: 1, rope: 1 }, desc: `飞掷命中沿途敌人后折返（${BOOM_DMG} 伤害）· 10 次` },
+  ],
+  icons: {
+    firestaff: (c) => {
+      c.strokeStyle = '#7a5b33'
+      c.lineWidth = 3
+      c.beginPath(); c.moveTo(-9, 13); c.lineTo(5, -6); c.stroke()
+      c.fillStyle = '#e0662e'
+      c.strokeStyle = '#1d1409'
+      c.lineWidth = 1.6
+      c.beginPath()
+      c.moveTo(7, -14); c.quadraticCurveTo(12, -8, 7, -2); c.quadraticCurveTo(4, -5, 3, -8); c.quadraticCurveTo(4, -12, 7, -14)
+      c.closePath(); c.fill(); c.stroke()
+      c.fillStyle = '#f0c04a'
+      c.beginPath(); c.ellipse(6.6, -8, 2, 3.4, 0.3, 0, TAU); c.fill()
+    },
+    boomerang: (c) => {
+      c.fillStyle = '#c9a36b'
+      c.strokeStyle = '#1d1409'
+      c.lineWidth = 1.8
+      c.beginPath()
+      c.moveTo(-10, -10)
+      c.quadraticCurveTo(2, -12, 10, -4)
+      c.quadraticCurveTo(12, 2, 8, 10)
+      c.quadraticCurveTo(4, 0, -4, -3)
+      c.quadraticCurveTo(-9, -5, -10, -10)
+      c.closePath()
+      c.fill(); c.stroke()
+      c.strokeStyle = '#8a6238'
+      c.lineWidth = 1.2
+      c.beginPath(); c.moveTo(-6, -8); c.quadraticCurveTo(3, -8, 8, 6); c.stroke()
+    },
+  },
+  ents: {
+    // 爆燃特效（短寿命，纯视觉）
+    flamefx: {
+      conf: { size: 10 },
+      init(e) {
+        e.deco = true
+        if (!e.mx) e.mx = { t: 0 }
+      },
+      update(e, dt, g) {
+        e.mx.t += dt
+        if (e.mx.t > 0.55) g.removeEntity(e)
+      },
+      draw(ctx, e) {
+        const k = Math.min(1, (e.mx?.t || 0) / 0.55)
+        const r = STAFF_AOE * (0.35 + k * 0.65)
+        ctx.globalAlpha = 1 - k
+        ctx.strokeStyle = '#f0862e'
+        ctx.lineWidth = 5 - k * 3
+        ctx.beginPath(); ctx.arc(0, 0, r, 0, TAU); ctx.stroke()
+        ctx.fillStyle = 'rgba(240,140,50,0.35)'
+        ctx.beginPath(); ctx.arc(0, 0, r * 0.75, 0, TAU); ctx.fill()
+        for (let i = 0; i < 6; i++) {
+          const a = (i / 6) * TAU + k * 2
+          ctx.fillStyle = i % 2 ? '#f0c04a' : '#e0662e'
+          ctx.beginPath()
+          ctx.arc(Math.cos(a) * r * 0.8, Math.sin(a) * r * 0.55 - k * 14, 4 * (1 - k) + 1, 0, TAU)
+          ctx.fill()
+        }
+        ctx.globalAlpha = 1
+      },
+    },
+    // 回旋镖投射物：直线飞出 → 命中或到程折返 → 回到投掷者手里
+    boomerang: {
+      conf: { size: 10 },
+      init(e) {
+        e.deco = true
+      },
+      update(e, dt, g) {
+        const m = e.mx
+        if (!m) { g.removeEntity(e); return }
+        const owner = g.players.find((p) => p.seat === m.seat)
+        if (!owner || owner.dead) { g.removeEntity(e); return }
+        if (m.phase === 'out') {
+          e.x += m.vx * dt
+          e.y += m.vy * dt
+          m.dist += Math.hypot(m.vx, m.vy) * dt
+          const hit = g.monsters.find((mo) => !g.mon[mo.kind]?.friendly && mo.kind !== 'chester' && Math.hypot(mo.x - e.x, mo.y - e.y) < 26)
+          if (hit) {
+            g.damageMob(hit, BOOM_DMG, owner)
+            m.phase = 'back'
+          } else if (m.dist >= BOOM_RANGE) {
+            m.phase = 'back'
+          }
+        } else {
+          const d = Math.hypot(owner.x - e.x, owner.y - e.y) || 1
+          e.x += ((owner.x - e.x) / d) * BOOM_SPEED * dt
+          e.y += ((owner.y - e.y) / d) * BOOM_SPEED * dt
+          if (d < 26) {
+            g.removeEntity(e)
+            g.ptip(owner, '接住了回旋镖')
+            return
+          }
+        }
+        // 位置镜像进 mx，随增量同步给客机（快照的实体更新行不含坐标）
+        m.px = Math.round(e.x)
+        m.py = Math.round(e.y)
+        g.markDirty(e)
+      },
+      draw(ctx, e, env) {
+        // 客机上 e.x/e.y 停留在投出点，用 mx 里的实时坐标纠偏
+        const dx = e.mx?.px != null ? e.mx.px - e.x : 0
+        const dy = e.mx?.py != null ? e.mx.py - e.y : 0
+        ctx.save()
+        ctx.translate(dx, dy - 14)
+        ctx.rotate(((env?.time || 0) * 14) % TAU)
+        ctx.fillStyle = '#c9a36b'
+        ctx.strokeStyle = '#1d1409'
+        ctx.lineWidth = 1.6
+        ctx.beginPath()
+        ctx.moveTo(-9, -9)
+        ctx.quadraticCurveTo(2, -10, 9, -3)
+        ctx.quadraticCurveTo(10, 2, 7, 9)
+        ctx.quadraticCurveTo(3, 0, -4, -3)
+        ctx.closePath()
+        ctx.fill()
+        ctx.stroke()
+        ctx.restore()
+        ctx.fillStyle = 'rgba(0,0,0,0.2)'
+        ctx.beginPath()
+        ctx.ellipse(dx, dy + 2, 7, 2.6, 0, 0, TAU)
+        ctx.fill()
+      },
+    },
+  },
+  hooks: {
+    onUseItem(g, p, s, area, i) {
+      if (s.code === 'firestaff') {
+        const target = hostileNear(g, p.x, p.y, STAFF_RANGE)
+        if (!target) {
+          g.ptip(p, '附近没有可灼烧的敌人')
+          return true
+        }
+        g.swing(p, 'attack')
+        p.dir = target.x >= p.x ? 1 : -1
+        g.addEntity('flamefx', target.x, target.y)
+        let hits = 0
+        g.monsters.slice().forEach((m) => {
+          if (!g.mon[m.kind]?.hostile) return
+          if (Math.hypot(m.x - target.x, m.y - target.y) > STAFF_AOE) return
+          hits++
+          g.damageMob(m, STAFF_DMG, p)
+        })
+        g.shake(2)
+        g.ptip(p, `烈焰爆燃！灼烧了 ${hits} 个敌人`)
+        useDur(g, p, s, area, i, '火魔杖燃尽碎裂了')
+        return true
+      }
+      if (s.code === 'boomerang') {
+        // 朝最近敌人方向掷出；没有敌人就朝面向
+        if (g.entities.some((e) => e.type === 'boomerang' && e.mx?.seat === p.seat)) {
+          g.ptip(p, '回旋镖还在飞行中……')
+          return true
+        }
+        const target = hostileNear(g, p.x, p.y, BOOM_RANGE + 60)
+        let vx = p.dir * BOOM_SPEED
+        let vy = 0
+        if (target) {
+          const d = Math.hypot(target.x - p.x, target.y - p.y) || 1
+          vx = ((target.x - p.x) / d) * BOOM_SPEED
+          vy = ((target.y - p.y) / d) * BOOM_SPEED
+          p.dir = target.x >= p.x ? 1 : -1
+        }
+        g.swing(p, 'attack')
+        g.addEntity('boomerang', p.x + p.dir * 14, p.y - 4, { mx: { vx, vy, phase: 'out', dist: 0, seat: p.seat, px: Math.round(p.x), py: Math.round(p.y) } })
+        useDur(g, p, s, area, i, '回旋镖散架了')
+        return true
+      }
+    },
+  },
+}
diff --git a/src/games/starve/mods/nightmare.js b/src/games/starve/mods/nightmare.js
new file mode 100644
index 0000000..449c6bc
--- /dev/null
+++ b/src/games/starve/mods/nightmare.js
@@ -0,0 +1,10 @@
+// 噩梦模式：全体怪物血量伤害 x1.5，猎犬波周期缩短且每波 +1
+export default {
+  id: 'nightmare',
+  name: '噩梦模式',
+  desc: '怪物血量伤害 ×1.5 · 猎犬波更频繁更多',
+  factor: 1.3,
+  tag: 'rule',
+  monScale: { hp: 1.5, dmg: 1.5 },
+  tune: { houndGapMul: 0.7, houndExtra: 1 },
+}
diff --git a/src/games/starve/mods/peaceful.js b/src/games/starve/mods/peaceful.js
new file mode 100644
index 0000000..f712b1a
--- /dev/null
+++ b/src/games/starve/mods/peaceful.js
@@ -0,0 +1,13 @@
+// 和平模式：取消猎犬波与独眼巨鹿的袭击排程（其余生物照常）
+export default {
+  id: 'peaceful',
+  name: '和平模式',
+  desc: '不再有猎犬波与独眼巨鹿',
+  factor: 0.7,
+  tag: 'rule',
+  hooks: {
+    onSpawnWave(g, kind) {
+      if (kind === 'hound' || kind === 'deerclops') return false
+    },
+  },
+}
diff --git a/src/games/starve/mods/qol.js b/src/games/starve/mods/qol.js
new file mode 100644
index 0000000..c65fa81
--- /dev/null
+++ b/src/games/starve/mods/qol.js
@@ -0,0 +1,10 @@
+// 便利包：全图显示（无战争迷雾）+ 快速采集 + 堆叠上限 99
+export default {
+  id: 'qol',
+  name: '便利包',
+  desc: '全图显示 · 采集加速 · 堆叠上限 99',
+  factor: 0.7,
+  tag: 'rule',
+  tune: { stackMax: 99, gatherMul: 0.5 },
+  flags: { noFog: true },
+}
diff --git a/src/games/starve/mods/registry.js b/src/games/starve/mods/registry.js
new file mode 100644
index 0000000..9b7c65c
--- /dev/null
+++ b/src/games/starve/mods/registry.js
@@ -0,0 +1,99 @@
+// Mod 注册表：与游戏核心解耦的加载器
+// - mod 定义 = 纯数据（物品/配方/实体/生物/图标/调参）+ 钩子函数集
+// - activateMods() 把选中的 mod 合并成运行时注册表（不改动 data.js 基表）
+// - 核心只依赖本文件与 index.js；mod 只依赖传入的 g（游戏受控上下文），互不感知实现
+import {
+  ITEMS, RECIPES, TUNE, MON, MOB_DROPS, RES, NAMES,
+} from '../data.js'
+import { MODS } from './index.js'
+
+// 给开局 UI 用的元数据（不激活任何逻辑）
+export function modMeta() {
+  return MODS.map(({ id, name, desc, factor, tag }) => ({ id, name, desc, factor: factor || 1, tag: tag || 'content' }))
+}
+
+// 激活一组 mod：返回运行时注册表（rt）。合并顺序 = MODS 声明顺序，保证主客机一致
+export function activateMods(ids = []) {
+  const act = MODS.filter((m) => ids.includes(m.id))
+  const rt = {
+    ids: act.map((m) => m.id),
+    metas: act.map(({ id, name, desc, factor }) => ({ id, name, desc, factor: factor || 1 })),
+    items: { ...ITEMS },
+    recipes: [...RECIPES],
+    tune: { ...TUNE },
+    mon: { ...MON },
+    mobDrops: { ...MOB_DROPS },
+    res: { ...RES },
+    names: { ...NAMES },
+    entKinds: {}, // type -> { conf, name, init, update, interact, draw }
+    mobKinds: {}, // kind -> { conf, friendly, update, interact, draw, drops }
+    iconPainters: {}, // code -> (ctx) => void（40x40 画布，原点居中）
+    hooks: {}, // name -> [{ id, fn }]
+    flags: {},
+    scoreFactor: 1,
+  }
+  let factor = 1
+  act.forEach((mod) => {
+    Object.entries(mod.items || {}).forEach(([code, def]) => {
+      rt.items[code] = def
+      rt.names[code] = def.name
+    })
+    ;(mod.recipes || []).forEach((r) => rt.recipes.push(r))
+    Object.assign(rt.tune, mod.tune || {})
+    Object.assign(rt.flags, mod.flags || {})
+    Object.entries(mod.ents || {}).forEach(([type, def]) => {
+      rt.entKinds[type] = def
+      rt.res[type] = def.conf || { size: 20 }
+      if (def.name) rt.names[type] = def.name
+    })
+    Object.entries(mod.mobs || {}).forEach(([kind, def]) => {
+      rt.mobKinds[kind] = def
+      rt.mon[kind] = def.conf
+      rt.mobDrops[kind] = def.drops || []
+    })
+    Object.assign(rt.iconPainters, mod.icons || {})
+    Object.entries(mod.hooks || {}).forEach(([name, fn]) => {
+      ;(rt.hooks[name] = rt.hooks[name] || []).push({ id: mod.id, fn })
+    })
+    // 怪物表整体缩放（如噩梦模式）：对当前已合并的所有生物生效
+    if (mod.monScale) {
+      Object.keys(rt.mon).forEach((k) => {
+        const c = rt.mon[k]
+        rt.mon[k] = { ...c, hp: Math.round(c.hp * (mod.monScale.hp || 1)), dmg: Math.round(c.dmg * (mod.monScale.dmg || 1)) }
+      })
+    }
+    factor *= mod.factor || 1
+  })
+  rt.scoreFactor = Math.round(Math.max(0.5, Math.min(1.5, factor)) * 100) / 100
+  rt.itemCodes = Object.keys(rt.items)
+  rt.itemIdx = Object.fromEntries(rt.itemCodes.map((c, i) => [c, i]))
+  return rt
+}
+
+// 通知型钩子：全部调用
+export function callHook(rt, name, ...args) {
+  ;(rt.hooks[name] || []).forEach((h) => h.fn(...args))
+}
+// 处理型钩子：任一返回 true 即视为已处理（短路）
+export function callHandled(rt, name, ...args) {
+  return (rt.hooks[name] || []).some((h) => h.fn(...args) === true)
+}
+// 否决型钩子：任一返回 false 即取消
+export function callAllows(rt, name, ...args) {
+  return !(rt.hooks[name] || []).some((h) => h.fn(...args) === false)
+}
+// 存档收集/恢复：每个 mod 的自定义状态挂在 modData[modId]
+export function collectModSaves(rt, g) {
+  const out = {}
+  ;(rt.hooks.save || []).forEach((h) => {
+    const d = h.fn(g)
+    if (d != null) out[h.id] = d
+  })
+  return Object.keys(out).length ? out : undefined
+}
+export function applyModSaves(rt, g, data) {
+  if (!data) return
+  ;(rt.hooks.load || []).forEach((h) => {
+    if (data[h.id] != null) h.fn(g, data[h.id])
+  })
+}
diff --git a/src/games/starve/mods/revive.js b/src/games/starve/mods/revive.js
new file mode 100644
index 0000000..bb7d342
--- /dev/null
+++ b/src/games/starve/mods/revive.js
@@ -0,0 +1,77 @@
+// 复活雕像：二级科技建造石像；任何玩家死亡时自动消耗一座，原地复活（半血半饥）
+// 单人模式下等于多一条命，保住"死亡删档"前的存档
+const TAU = Math.PI * 2
+
+export default {
+  id: 'revive',
+  name: '复活雕像',
+  desc: '建造石像，死亡时消耗一座原地复活',
+  factor: 1,
+  tag: 'content',
+  recipes: [
+    { code: 'revivestatue', name: '复活雕像', tab: 'science', tech: 2, cost: { rock: 12, gold: 4 }, build: true, desc: '死亡时自动消耗，原地复活（半血）' },
+  ],
+  icons: {
+    revivestatue: (c) => {
+      c.fillStyle = '#8d9097'
+      c.strokeStyle = '#1d1409'
+      c.lineWidth = 1.8
+      c.beginPath(); c.roundRect(-11, 8, 22, 6, 2); c.fill(); c.stroke()
+      c.beginPath(); c.moveTo(-7, 8); c.lineTo(-5, -4); c.lineTo(5, -4); c.lineTo(7, 8); c.closePath(); c.fill(); c.stroke()
+      c.beginPath(); c.arc(0, -9, 5.5, 0, TAU); c.fill(); c.stroke()
+      c.fillStyle = '#b0b4bc'
+      c.beginPath(); c.arc(-2, -10.5, 1.6, 0, TAU); c.fill()
+    },
+  },
+  ents: {
+    revivestatue: {
+      name: '复活雕像',
+      conf: { size: 34, struct: true },
+      interact(p, e, g) {
+        g.ptip(p, '守望雕像静静伫立（死亡时将消耗它复活）')
+      },
+      draw(ctx, e, env) {
+        // 底座
+        ctx.fillStyle = 'rgba(0,0,0,0.25)'
+        ctx.beginPath(); ctx.ellipse(0, 4, 20, 7, 0, 0, TAU); ctx.fill()
+        ctx.fillStyle = '#7d8087'
+        ctx.strokeStyle = '#1d1409'
+        ctx.lineWidth = 2
+        ctx.beginPath(); ctx.roundRect(-17, -4, 34, 10, 3); ctx.fill(); ctx.stroke()
+        // 身躯（斗篷状）
+        ctx.fillStyle = '#8d9097'
+        ctx.beginPath()
+        ctx.moveTo(-11, -4); ctx.quadraticCurveTo(-13, -26, -6, -32)
+        ctx.lineTo(6, -32); ctx.quadraticCurveTo(13, -26, 11, -4)
+        ctx.closePath()
+        ctx.fill(); ctx.stroke()
+        // 头
+        ctx.beginPath(); ctx.arc(0, -38, 8, 0, TAU); ctx.fill(); ctx.stroke()
+        // 高光
+        ctx.fillStyle = '#b0b4bc'
+        ctx.beginPath(); ctx.arc(-3, -40, 2.4, 0, TAU); ctx.fill()
+        ctx.beginPath(); ctx.ellipse(-7, -18, 2.4, 8, 0.2, 0, TAU); ctx.fill()
+        // 怀中微光（生命之火）
+        const tw = 0.5 + Math.sin((env?.time || 0) * 2.4 + e.id) * 0.5
+        ctx.fillStyle = `rgba(120,220,160,${0.35 + tw * 0.35})`
+        ctx.beginPath(); ctx.arc(0, -16, 3.4 + tw * 1.2, 0, TAU); ctx.fill()
+      },
+    },
+  },
+  hooks: {
+    onPlayerDeath(g, p) {
+      const statue = g.entities.find((e) => e.type === 'revivestatue')
+      if (!statue) return
+      g.removeEntity(statue)
+      p.hp = 75
+      p.hunger = 75
+      p.san = 100
+      p.temp = Math.max(p.temp, 12)
+      p.darkT = 0
+      g.ptip(p, '远处的复活雕像碎裂了——你重获新生！')
+      g.tip(`${p.name || '玩家'}被复活雕像救了回来`)
+      g.shake(5)
+      return true
+    },
+  },
+}
diff --git a/src/games/starve/paint.js b/src/games/starve/paint.js
new file mode 100644
index 0000000..814414b
--- /dev/null
+++ b/src/games/starve/paint.js
@@ -0,0 +1,1418 @@
+// 饥荒手绘美术：物品图标离屏渲染 + 静态实体 sprite 缓存 + 生物程序动画画师
+// 约定：实体/生物画师在"已 translate 到脚底原点"的 ctx 上绘制；静态实体先离屏缓存再 blit，
+// 摇摆动画通过整体旋转缓存图完成（性能远优于逐帧矢量重绘）；生物保持逐帧矢量（动作丰富）
+import { ITEMS, ITEM_CODES } from './data.js'
+
+const TAU = Math.PI * 2
+
+function fs(c, fill, stroke = '#1d1409', lw = 2) {
+  if (fill) { c.fillStyle = fill; c.fill() }
+  if (stroke) { c.strokeStyle = stroke; c.lineWidth = lw; c.stroke() }
+}
+function shadow(c, x, y, rx, ry = null) {
+  c.fillStyle = 'rgba(20,16,8,0.3)'
+  c.beginPath()
+  c.ellipse(x, y, rx, ry ?? rx * 0.35, 0, 0, TAU)
+  c.fill()
+}
+
+// =====================================================================
+// 物品图标（40px 画布 / 28px 内容，以 (0,0) 为中心）
+// =====================================================================
+function iconMeat(c, col, small = false, smoke = false) {
+  const s = small ? 0.72 : 1
+  c.strokeStyle = '#e8e2d4'
+  c.lineWidth = 3.4 * s
+  c.beginPath(); c.moveTo(-9 * s, 9 * s); c.lineTo(8 * s, -8 * s); c.stroke()
+  c.fillStyle = '#e8e2d4'
+  c.beginPath(); c.arc(-9 * s, 9 * s, 3 * s, 0, TAU); c.arc(8 * s, -8 * s, 3 * s, 0, TAU); c.fill()
+  c.beginPath(); c.ellipse(1 * s, 0, 8 * s, 6 * s, -0.8, 0, TAU); fs(c, col)
+  if (smoke) {
+    c.strokeStyle = '#d8c49c'; c.lineWidth = 1.6
+    c.beginPath(); c.moveTo(-2, -10); c.quadraticCurveTo(-4, -13, -2, -15); c.stroke()
+  }
+}
+function iconBowl(c, foodCol, blobs = 3) {
+  c.beginPath(); c.ellipse(0, 3, 11, 6.5, 0, 0, Math.PI); fs(c, '#b98a52')
+  c.beginPath(); c.ellipse(0, 3, 11, 4.2, 0, Math.PI, 0); fs(c, '#d8b478')
+  c.fillStyle = foodCol
+  for (let i = 0; i < blobs; i++) {
+    c.beginPath()
+    c.arc(-6 + i * 6, 0.5 - (i % 2) * 2.4, 3.6, 0, TAU)
+    c.fill()
+  }
+  c.strokeStyle = '#241812'; c.lineWidth = 1.4
+  c.beginPath(); c.ellipse(0, 3, 11, 6.5, 0, 0.15, Math.PI - 0.15); c.stroke()
+}
+function iconTool(c, headPaint) {
+  c.strokeStyle = '#7a5b33'; c.lineWidth = 3.2
+  c.beginPath(); c.moveTo(-8, 11); c.lineTo(7, -7); c.stroke()
+  headPaint()
+}
+
+export function drawItemIcon(c, code) {
+  c.lineJoin = 'round'
+  c.lineCap = 'round'
+  if (code === 'grass') {
+    c.strokeStyle = '#8f9a3e'; c.lineWidth = 2.4
+    ;[[-7, 10, -10, -8], [-2, 11, -3, -11], [3, 11, 2, -9], [8, 10, 10, -7]].forEach(([x1, y1, x2, y2]) => {
+      c.beginPath(); c.moveTo(x1, y1); c.quadraticCurveTo((x1 + x2) / 2 + 2, 0, x2, y2); c.stroke()
+    })
+    c.strokeStyle = '#6b5a2a'; c.lineWidth = 3
+    c.beginPath(); c.moveTo(-8, 5); c.lineTo(8, 5); c.stroke()
+  } else if (code === 'twig') {
+    c.strokeStyle = '#7a5b33'; c.lineWidth = 2.8
+    c.beginPath(); c.moveTo(-9, 11); c.lineTo(6, -10); c.stroke()
+    c.beginPath(); c.moveTo(0, -1); c.lineTo(9, -6); c.stroke()
+    c.fillStyle = '#8f9a3e'
+    c.beginPath(); c.ellipse(8, -9, 3.4, 2, -0.5, 0, TAU); c.fill()
+  } else if (code === 'log') {
+    c.fillStyle = '#8a6238'; c.beginPath(); c.rect(-11, -7, 18, 14); c.fill()
+    c.strokeStyle = '#241812'; c.lineWidth = 1.6; c.strokeRect(-11, -7, 18, 14)
+    c.beginPath(); c.ellipse(8, 0, 4.5, 7, 0, 0, TAU); fs(c, '#c9a36b')
+    c.beginPath(); c.ellipse(8, 0, 2, 3.4, 0, 0, TAU); c.strokeStyle = '#8a6238'; c.lineWidth = 1.2; c.stroke()
+    c.strokeStyle = '#6b4a28'; c.lineWidth = 1
+    c.beginPath(); c.moveTo(-9, -3); c.lineTo(3, -3); c.moveTo(-9, 2); c.lineTo(3, 2); c.stroke()
+  } else if (code === 'rock') {
+    c.beginPath(); c.moveTo(-10, 8); c.lineTo(-11, -2); c.lineTo(-3, -9); c.lineTo(7, -7); c.lineTo(11, 3); c.lineTo(6, 9); c.closePath(); fs(c, '#8d9097')
+    c.beginPath(); c.moveTo(-3, -9); c.lineTo(0, -1); c.lineTo(-11, -2); c.closePath(); fs(c, '#b0b4bc', null)
+  } else if (code === 'flint') {
+    c.beginPath(); c.moveTo(-9, 6); c.lineTo(-2, -10); c.lineTo(4, 2); c.closePath(); fs(c, '#c07a3e')
+    c.beginPath(); c.moveTo(1, 9); c.lineTo(7, -5); c.lineTo(10, 7); c.closePath(); fs(c, '#8d9097')
+  } else if (code === 'gold') {
+    c.beginPath(); c.moveTo(-10, 7); c.lineTo(-8, -4); c.lineTo(-1, -9); c.lineTo(8, -5); c.lineTo(10, 5); c.lineTo(3, 9); c.closePath(); fs(c, '#e0b83a', '#8e6a14', 1.8)
+    c.fillStyle = '#f4dc8a'
+    c.beginPath(); c.moveTo(-8, -4); c.lineTo(-1, -9); c.lineTo(0, -2); c.closePath(); c.fill()
+  } else if (code === 'silk') {
+    c.strokeStyle = '#e8e2d4'; c.lineWidth = 2.2
+    c.beginPath(); c.arc(0, 0, 9, 0.3, 5.6); c.stroke()
+    c.beginPath(); c.arc(1, 1, 5.5, 2.2, 8); c.stroke()
+    c.beginPath(); c.arc(-1, 0, 2.6, 0, TAU); c.stroke()
+    c.strokeStyle = '#241812'; c.lineWidth = 1
+    c.beginPath(); c.arc(0, 0, 10.6, 0, TAU); c.stroke()
+  } else if (code === 'spidergland') {
+    c.beginPath(); c.ellipse(0, 1, 8, 9, 0, 0, TAU); fs(c, '#c98aa8')
+    c.beginPath(); c.ellipse(-2, -2, 3, 4, 0.3, 0, TAU); fs(c, '#e8c0d4', null)
+    c.strokeStyle = '#8e5a78'; c.lineWidth = 1.6
+    c.beginPath(); c.moveTo(0, -8); c.quadraticCurveTo(3, -12, 6, -11); c.stroke()
+  } else if (code === 'rope') {
+    c.strokeStyle = '#a8894c'; c.lineWidth = 5
+    c.beginPath(); c.arc(0, 0, 8, 0, TAU); c.stroke()
+    c.strokeStyle = '#7c6234'; c.lineWidth = 1.4
+    for (let i = 0; i < 8; i++) {
+      const a = (i / 8) * TAU
+      c.beginPath()
+      c.moveTo(Math.cos(a) * 5.6, Math.sin(a) * 5.6)
+      c.lineTo(Math.cos(a + 0.5) * 10.4, Math.sin(a + 0.5) * 10.4)
+      c.stroke()
+    }
+  } else if (code === 'petals') {
+    ;[[-6, -2], [5, -4], [0, 6], [8, 5], [-8, 7]].forEach(([x, y], i) => {
+      c.beginPath()
+      c.ellipse(x, y, 4.4, 3, i * 0.7, 0, TAU)
+      fs(c, i % 2 ? '#e08a94' : '#d8b04a', '#241812', 1.2)
+    })
+  } else if (code === 'reeds') {
+    c.strokeStyle = '#7c9a52'; c.lineWidth = 2.4
+    ;[[-6, 11, -8, -9], [0, 12, 0, -12], [6, 11, 8, -8]].forEach(([x1, y1, x2, y2]) => {
+      c.beginPath(); c.moveTo(x1, y1); c.quadraticCurveTo(x2 * 0.4, 0, x2, y2); c.stroke()
+    })
+    c.fillStyle = '#8a6a3a'
+    c.beginPath(); c.ellipse(0, -9, 2.6, 6, 0, 0, TAU); c.fill()
+  } else if (code === 'ash') {
+    c.fillStyle = '#9a968c'
+    c.beginPath(); c.moveTo(-9, 8); c.quadraticCurveTo(-4, -2, 0, -6); c.quadraticCurveTo(5, -2, 9, 8); c.closePath(); fs(c, '#9a968c')
+    c.fillStyle = '#c9c4b8'
+    ;[[-3, 2], [3, 4], [0, -2]].forEach(([x, y]) => { c.beginPath(); c.arc(x, y, 1.6, 0, TAU); c.fill() })
+  } else if (code === 'beefwool') {
+    ;[[-5, -2, 5], [4, -3, 5.4], [0, 4, 6], [-8, 4, 4.4], [8, 4, 4.4]].forEach(([x, y, r]) => {
+      c.beginPath(); c.arc(x, y, r, 0, TAU); fs(c, '#6b5340', '#241812', 1.2)
+    })
+  } else if (code === 'pigskin') {
+    c.beginPath(); c.moveTo(-9, -6); c.quadraticCurveTo(0, -12, 9, -6); c.lineTo(7, 8); c.quadraticCurveTo(0, 12, -7, 8); c.closePath(); fs(c, '#e8a8a0')
+    c.fillStyle = '#d88a80'
+    c.beginPath(); c.ellipse(0, 6, 4, 3, 0, 0, TAU); c.fill()
+    c.strokeStyle = '#241812'; c.lineWidth = 1.2
+    c.beginPath(); c.moveTo(-2, 5); c.lineTo(-2, 7); c.moveTo(2, 5); c.lineTo(2, 7); c.stroke()
+  } else if (code === 'rot') {
+    c.beginPath(); c.moveTo(-8, 8); c.quadraticCurveTo(-10, -4, -2, -8); c.quadraticCurveTo(8, -10, 9, 0); c.quadraticCurveTo(10, 8, 0, 9); c.closePath(); fs(c, '#5a6b3a')
+    c.fillStyle = '#3d4d28'
+    ;[[-3, 0], [4, 2], [0, -4]].forEach(([x, y]) => { c.beginPath(); c.arc(x, y, 2, 0, TAU); c.fill() })
+    c.strokeStyle = '#8a9a5a'; c.lineWidth = 1.2
+    c.beginPath(); c.moveTo(2, -9); c.quadraticCurveTo(4, -13, 7, -12); c.stroke()
+  } else if (code === 'berry' || code === 'cookedberry') {
+    const col = code === 'berry' ? '#c94f4f' : '#7e3550'
+    ;[[-5, 2], [4, 0], [-1, 8]].forEach(([x, y]) => { c.beginPath(); c.arc(x, y, 4.6, 0, TAU); fs(c, col) })
+    c.fillStyle = '#5d7a35'
+    c.beginPath(); c.ellipse(-2, -7, 5, 2.6, -0.4, 0, TAU); c.fill()
+    if (code === 'cookedberry') {
+      c.strokeStyle = '#d8c49c'; c.lineWidth = 1.6
+      c.beginPath(); c.moveTo(-4, -11); c.quadraticCurveTo(-6, -14, -4, -16); c.moveTo(2, -11); c.quadraticCurveTo(0, -14, 2, -16); c.stroke()
+    }
+  } else if (code === 'meat') { iconMeat(c, '#b5484e') }
+  else if (code === 'cookedmeat') { iconMeat(c, '#96603a', false, true) }
+  else if (code === 'morsel') { iconMeat(c, '#c05a60', true) }
+  else if (code === 'cookedmorsel') { iconMeat(c, '#a06a42', true, true) }
+  else if (code === 'monstermeat') { iconMeat(c, '#7e3a8e'); c.fillStyle = '#5a2468'; c.beginPath(); c.arc(2, 1, 2.2, 0, TAU); c.arc(-2, -2, 1.6, 0, TAU); c.fill() }
+  else if (code === 'cookedmonster') { iconMeat(c, '#6b4a3a', false, true) }
+  else if (code === 'froglegs' || code === 'cookedfroglegs') {
+    const col = code === 'froglegs' ? '#8aa848' : '#a08048'
+    c.strokeStyle = col; c.lineWidth = 4.4
+    c.beginPath(); c.moveTo(-6, -8); c.quadraticCurveTo(-2, 2, -8, 8); c.stroke()
+    c.beginPath(); c.moveTo(6, -8); c.quadraticCurveTo(2, 2, 8, 8); c.stroke()
+    c.fillStyle = col
+    c.beginPath(); c.ellipse(0, -8, 7, 4.4, 0, 0, TAU); fs(c, col, '#241812', 1.4)
+  } else if (code === 'honey') {
+    c.beginPath(); c.moveTo(-6, -9); c.lineTo(6, -9); c.lineTo(6, -5); c.lineTo(8, -3); c.lineTo(8, 8); c.quadraticCurveTo(0, 11, -8, 8); c.lineTo(-8, -3); c.lineTo(-6, -5); c.closePath(); fs(c, '#e8b83a')
+    c.fillStyle = '#f4d878'
+    c.beginPath(); c.ellipse(-2, 2, 3, 5, 0.2, 0, TAU); c.fill()
+    c.strokeStyle = '#241812'; c.lineWidth = 1.4
+    c.beginPath(); c.moveTo(-6, -9); c.lineTo(6, -9); c.stroke()
+  } else if (code === 'eyeball') {
+    c.beginPath(); c.arc(0, 0, 10, 0, TAU); fs(c, '#ece8dc')
+    c.beginPath(); c.arc(1, 1, 5, 0, TAU); fs(c, '#7fa8d8', '#241812', 1.4)
+    c.fillStyle = '#241812'
+    c.beginPath(); c.arc(1, 1, 2.2, 0, TAU); c.fill()
+    c.strokeStyle = '#c05a50'; c.lineWidth = 1
+    c.beginPath(); c.moveTo(-8, -4); c.lineTo(-4, -1); c.moveTo(-7, 5); c.lineTo(-3, 3); c.stroke()
+  } else if (code === 'meatballs') { iconBowl(c, '#b5605a', 3) }
+  else if (code === 'meatystew') { iconBowl(c, '#8e4a3a', 4) }
+  else if (code === 'honeyham') {
+    iconMeat(c, '#d88a5a')
+    c.fillStyle = 'rgba(244,216,120,0.85)'
+    c.beginPath(); c.ellipse(1, -1, 6, 4, -0.8, 0, TAU); c.fill()
+  } else if (code === 'honeynuggets') { iconBowl(c, '#e0b458', 3) }
+  else if (code === 'taffy') {
+    c.beginPath(); c.ellipse(0, 0, 8, 5.4, -0.3, 0, TAU); fs(c, '#e89ab8')
+    ;[-1, 1].forEach((s) => {
+      c.beginPath(); c.moveTo(s * 7, -2); c.lineTo(s * 13, -5); c.lineTo(s * 12, 3); c.closePath(); fs(c, '#d87ea0', '#241812', 1.4)
+    })
+  } else if (code === 'monsterlasagna') { iconBowl(c, '#7e3a8e', 3) }
+  else if (code === 'wetgoop') { iconBowl(c, '#8a9a8a', 2) }
+  else if (code === 'healingsalve') {
+    c.beginPath(); c.arc(0, 2, 8, 0, TAU); fs(c, '#c9c0ac')
+    c.beginPath(); c.ellipse(0, -5, 8, 3, 0, 0, TAU); fs(c, '#ece7db')
+    c.strokeStyle = '#5d7a35'; c.lineWidth = 2.2
+    c.beginPath(); c.moveTo(-3, 2); c.lineTo(3, 2); c.moveTo(0, -1); c.lineTo(0, 5); c.stroke()
+  } else if (code === 'honeypoultice') {
+    c.fillStyle = '#ece7db'
+    c.beginPath(); c.rect(-9, -6, 18, 12); c.fill()
+    c.strokeStyle = '#241812'; c.lineWidth = 1.6; c.strokeRect(-9, -6, 18, 12)
+    c.fillStyle = 'rgba(232,184,58,0.9)'
+    c.beginPath(); c.ellipse(0, 0, 5, 3.4, 0, 0, TAU); c.fill()
+    c.strokeStyle = '#c9c0ac'; c.lineWidth = 1.2
+    c.beginPath(); c.moveTo(-4, -6); c.lineTo(-4, 6); c.moveTo(4, -6); c.lineTo(4, 6); c.stroke()
+  } else if (code === 'axe') {
+    iconTool(c, () => {
+      c.beginPath(); c.moveTo(3, -11); c.lineTo(12, -4); c.lineTo(6, 2); c.lineTo(1, -3); c.closePath(); fs(c, '#9aa0a8')
+    })
+  } else if (code === 'pickaxe') {
+    c.strokeStyle = '#7a5b33'; c.lineWidth = 3.2
+    c.beginPath(); c.moveTo(-2, 13); c.lineTo(-2, -6); c.stroke()
+    c.beginPath(); c.moveTo(-12, -4); c.quadraticCurveTo(-2, -14, 9, -4); c.quadraticCurveTo(-2, -9, -12, -4); fs(c, '#9aa0a8')
+  } else if (code === 'shovel') {
+    c.strokeStyle = '#7a5b33'; c.lineWidth = 3.2
+    c.beginPath(); c.moveTo(-6, -12); c.lineTo(3, 2); c.stroke()
+    c.beginPath(); c.moveTo(1, 0); c.quadraticCurveTo(10, 2, 8, 10); c.quadraticCurveTo(2, 12, -2, 5); c.closePath(); fs(c, '#9aa0a8')
+  } else if (code === 'spear') {
+    c.strokeStyle = '#7a5b33'; c.lineWidth = 3
+    c.beginPath(); c.moveTo(-10, 12); c.lineTo(6, -6); c.stroke()
+    c.beginPath(); c.moveTo(4, -4); c.lineTo(11, -11); c.lineTo(8, -1); c.closePath(); fs(c, '#b0b4bc')
+    c.strokeStyle = '#a8894c'; c.lineWidth = 1.6
+    c.beginPath(); c.moveTo(2, -1); c.lineTo(6, -5); c.stroke()
+  } else if (code === 'tentaclespike') {
+    c.strokeStyle = '#6b4a7e'; c.lineWidth = 4
+    c.beginPath(); c.moveTo(-9, 11); c.quadraticCurveTo(0, 2, 8, -9); c.stroke()
+    c.fillStyle = '#e8e2d4'
+    ;[[-2, 2], [2, -2], [6, -6]].forEach(([x, y]) => {
+      c.beginPath(); c.moveTo(x, y); c.lineTo(x + 4, y - 1); c.lineTo(x + 1, y - 4); c.closePath(); c.fill()
+    })
+  } else if (code === 'torch') {
+    c.strokeStyle = '#7a5b33'; c.lineWidth = 3.2
+    c.beginPath(); c.moveTo(-6, 12); c.lineTo(3, -3); c.stroke()
+    c.beginPath(); c.moveTo(6, -13); c.quadraticCurveTo(11, -6, 4, -2); c.quadraticCurveTo(-1, -5, 6, -13); fs(c, '#f0923c', '#b5541e', 1.4)
+    c.beginPath(); c.ellipse(4.6, -6.5, 2, 3, 0.3, 0, TAU); fs(c, '#ffd76e', null)
+  } else if (code === 'backpack') {
+    c.beginPath(); c.moveTo(-8, -8); c.quadraticCurveTo(0, -13, 8, -8); c.lineTo(8, 9); c.quadraticCurveTo(0, 12, -8, 9); c.closePath(); fs(c, '#b08a54')
+    c.beginPath(); c.rect(-5, -2, 10, 8); fs(c, '#8e6c3e', '#241812', 1.4)
+    c.strokeStyle = '#241812'; c.lineWidth = 1.4
+    c.beginPath(); c.moveTo(-8, -6); c.quadraticCurveTo(-12, 0, -8, 6); c.moveTo(8, -6); c.quadraticCurveTo(12, 0, 8, 6); c.stroke()
+  } else if (code === 'logsuit') {
+    c.beginPath(); c.moveTo(-9, -9); c.lineTo(9, -9); c.lineTo(7, 10); c.lineTo(-7, 10); c.closePath(); fs(c, '#8a6238')
+    c.strokeStyle = '#5b4128'; c.lineWidth = 2
+    ;[-4, 0, 4].forEach((x) => { c.beginPath(); c.moveTo(x, -9); c.lineTo(x * 0.8, 10); c.stroke() })
+    c.strokeStyle = '#a8894c'; c.lineWidth = 1.6
+    c.beginPath(); c.moveTo(-9, -3); c.lineTo(9, -3); c.moveTo(-8, 4); c.lineTo(8, 4); c.stroke()
+  } else if (code === 'garland') {
+    c.strokeStyle = '#5d7a35'; c.lineWidth = 3
+    c.beginPath(); c.arc(0, 0, 8.5, 0, TAU); c.stroke()
+    ;[0, 1, 2, 3, 4, 5].forEach((i) => {
+      const a = (i / 6) * TAU
+      c.beginPath(); c.arc(Math.cos(a) * 8.5, Math.sin(a) * 8.5, 2.8, 0, TAU)
+      fs(c, i % 2 ? '#e08a94' : '#d8b04a', '#241812', 1)
+    })
+  } else if (code === 'footballhelmet') {
+    c.beginPath(); c.arc(0, 0, 9, Math.PI * 0.95, Math.PI * 0.05); c.quadraticCurveTo(9, 8, 5, 8); c.lineTo(-5, 8); c.quadraticCurveTo(-9, 8, -9, 0); c.closePath(); fs(c, '#e8a8a0')
+    c.strokeStyle = '#b87870'; c.lineWidth = 2
+    c.beginPath(); c.moveTo(-9, 2); c.lineTo(9, 2); c.stroke()
+    c.strokeStyle = '#241812'; c.lineWidth = 1.4
+    c.beginPath(); c.moveTo(0, -9); c.lineTo(0, -4); c.stroke()
+  } else if (code === 'winterhat') {
+    c.beginPath(); c.moveTo(-9, 6); c.quadraticCurveTo(-8, -8, 0, -10); c.quadraticCurveTo(8, -8, 9, 6); c.closePath(); fs(c, '#4a668c')
+    c.fillStyle = '#dfe6f0'
+    c.beginPath(); c.rect(-10, 4, 20, 5); c.fill()
+    c.strokeStyle = '#241812'; c.lineWidth = 1.6; c.strokeRect(-10, 4, 20, 5)
+    c.beginPath(); c.arc(0, -11, 2.6, 0, TAU); fs(c, '#dfe6f0', '#241812', 1.2)
+  } else if (code === 'trap') {
+    c.strokeStyle = '#a8894c'; c.lineWidth = 2.2
+    c.beginPath(); c.arc(0, 6, 10, Math.PI, 0); c.stroke()
+    c.beginPath(); c.arc(0, 6, 6.6, Math.PI, 0); c.stroke()
+    c.beginPath(); c.moveTo(0, -4); c.lineTo(0, 6); c.stroke()
+    c.strokeStyle = '#6b5a2a'; c.lineWidth = 2.6
+    c.beginPath(); c.moveTo(-11, 6); c.lineTo(11, 6); c.stroke()
+  } else if (code === 'thermalstone') {
+    c.beginPath(); c.moveTo(-9, 5); c.lineTo(-7, -6); c.lineTo(0, -9); c.lineTo(8, -5); c.lineTo(9, 4); c.lineTo(2, 9); c.closePath(); fs(c, '#8d9097')
+    c.fillStyle = 'rgba(240,146,60,0.75)'
+    c.beginPath(); c.arc(0, 0, 4.4, 0, TAU); c.fill()
+  } else if (code === 'campfire') {
+    c.strokeStyle = '#7a5b33'; c.lineWidth = 3
+    c.beginPath(); c.moveTo(-9, 10); c.lineTo(9, 5); c.moveTo(-9, 5); c.lineTo(9, 10); c.stroke()
+    c.beginPath(); c.moveTo(0, -13); c.quadraticCurveTo(8, -4, 0, 4); c.quadraticCurveTo(-8, -4, 0, -13); fs(c, '#f0923c', '#b5541e', 1.4)
+    c.beginPath(); c.ellipse(0, -2, 2.6, 4.4, 0, 0, TAU); fs(c, '#ffd76e', null)
+  } else if (code === 'firepit') {
+    c.fillStyle = '#7e8187'
+    ;[-9, -3, 3, 9].forEach((x, i) => { c.beginPath(); c.arc(x, 8 - (i % 2), 3, 0, TAU); c.fill() })
+    c.beginPath(); c.moveTo(0, -12); c.quadraticCurveTo(7, -4, 0, 3); c.quadraticCurveTo(-7, -4, 0, -12); fs(c, '#f0923c', '#b5541e', 1.4)
+  } else if (code === 'sciencemachine') {
+    c.beginPath(); c.rect(-8, -4, 16, 14); fs(c, '#8a6238')
+    c.beginPath(); c.arc(0, -7, 5.5, 0, TAU); fs(c, '#9aa0a8')
+    c.strokeStyle = '#241812'; c.lineWidth = 1.4
+    for (let i = 0; i < 6; i++) {
+      const a = (i / 6) * TAU
+      c.beginPath(); c.moveTo(Math.cos(a) * 5.5, -7 + Math.sin(a) * 5.5); c.lineTo(Math.cos(a) * 8, -7 + Math.sin(a) * 8); c.stroke()
+    }
+    c.beginPath(); c.arc(-3, 3, 2.2, 0, TAU); fs(c, '#e0b83a', '#241812', 1.2)
+  } else if (code === 'alchemyengine') {
+    c.beginPath(); c.rect(-8, -2, 16, 12); fs(c, '#6e5a3a')
+    c.beginPath(); c.moveTo(-6, -2); c.lineTo(0, -13); c.lineTo(6, -2); c.closePath(); fs(c, '#8a6238')
+    c.beginPath(); c.arc(0, 4, 3.4, 0, TAU); fs(c, '#57a486', '#241812', 1.4)
+  } else if (code === 'crockpot') {
+    c.beginPath(); c.ellipse(0, 2, 9.5, 7.5, 0, 0, TAU); fs(c, '#4a4a52')
+    c.beginPath(); c.ellipse(0, -4, 8, 3, 0, 0, TAU); fs(c, '#33333a')
+    c.strokeStyle = '#241812'; c.lineWidth = 2
+    c.beginPath(); c.moveTo(-11, 0); c.lineTo(-9, 3); c.moveTo(11, 0); c.lineTo(9, 3); c.stroke()
+  }
+}
+
+// 生成全部物品图标：返回 {url: dataURL 表（DOM 用）, cv: 画布表（画布内绘制用）}
+export function buildIcons() {
+  const url = {}
+  const cv = {}
+  const extra = ['campfire', 'firepit', 'sciencemachine', 'alchemyengine', 'crockpot']
+  ;[...ITEM_CODES, ...extra.filter((e) => !ITEMS[e])].forEach((code) => {
+    const canvas = document.createElement('canvas')
+    canvas.width = 40
+    canvas.height = 40
+    const c = canvas.getContext('2d')
+    c.translate(20, 20)
+    drawItemIcon(c, code)
+    cv[code] = canvas
+    url[code] = canvas.toDataURL()
+  })
+  return { url, cv }
+}
+
+// =====================================================================
+// 静态实体 sprite 缓存
+// =====================================================================
+const CACHE = {}
+function sprite(key, w, h, ox, oy, paint) {
+  let s = CACHE[key]
+  if (!s) {
+    const canvas = document.createElement('canvas')
+    canvas.width = w
+    canvas.height = h
+    const c = canvas.getContext('2d')
+    c.translate(ox, oy)
+    c.lineJoin = 'round'
+    c.lineCap = 'round'
+    paint(c)
+    s = CACHE[key] = { cv: canvas, ox, oy }
+  }
+  return s
+}
+function blit(ctx, s, rot = 0) {
+  if (rot) {
+    ctx.save()
+    ctx.rotate(rot)
+    ctx.drawImage(s.cv, -s.ox, -s.oy)
+    ctx.restore()
+  } else {
+    ctx.drawImage(s.cv, -s.ox, -s.oy)
+  }
+}
+// 冬季给顶部盖一层雪的通用画法
+function snowCap(c, pts) {
+  c.fillStyle = 'rgba(238,246,252,0.9)'
+  pts.forEach(([x, y, rx, ry]) => {
+    c.beginPath()
+    c.ellipse(x, y, rx, ry, 0, 0, TAU)
+    c.fill()
+  })
+}
+
+function paintTree(c, winter) {
+  shadow(c, 0, 4, 20, 7)
+  c.beginPath()
+  c.moveTo(-6, 4); c.lineTo(-4, -26); c.lineTo(4, -26); c.lineTo(6, 4)
+  c.closePath()
+  fs(c, '#5b4128')
+  const layer = (yTop, w, col) => {
+    c.beginPath()
+    c.moveTo(-w, yTop + 22)
+    for (let i = 0; i <= 4; i++) {
+      c.lineTo(-w + (i * 2 * w) / 4, yTop + 22 - (i % 2 === 0 ? 0 : 9))
+    }
+    c.lineTo(0, yTop)
+    c.closePath()
+    fs(c, col)
+  }
+  layer(-78, 26, winter ? '#3d5a48' : '#2c4a28')
+  layer(-58, 32, winter ? '#35503e' : '#27411f')
+  layer(-38, 38, winter ? '#2c4434' : '#1f3619')
+  if (winter) snowCap(c, [[0, -76, 12, 4], [-14, -40, 12, 4], [15, -42, 11, 3.6], [0, -57, 14, 4]])
+}
+function paintRock(c, gold, winter) {
+  shadow(c, 0, 8, 20, 6)
+  c.beginPath()
+  c.moveTo(-18, 8); c.lineTo(-16, -6); c.lineTo(-5, -15); c.lineTo(10, -12); c.lineTo(18, 2); c.lineTo(12, 8)
+  c.closePath()
+  fs(c, '#8d9097')
+  c.beginPath()
+  c.moveTo(-5, -15); c.lineTo(1, -3); c.lineTo(-16, -6)
+  c.closePath()
+  c.fillStyle = '#b0b4bc'
+  c.fill()
+  c.fillStyle = gold ? '#e0b83a' : '#c07a3e'
+  ;[[6, -2, 2.6], [-4, 3, 2], [1, -8, 1.8]].forEach(([x, y, r]) => {
+    c.beginPath(); c.arc(x, y, r, 0, TAU); c.fill()
+  })
+  if (gold) {
+    c.strokeStyle = '#8e6a14'
+    c.lineWidth = 1
+    ;[[6, -2, 2.6], [-4, 3, 2]].forEach(([x, y, r]) => { c.beginPath(); c.arc(x, y, r, 0, TAU); c.stroke() })
+  }
+  if (winter) snowCap(c, [[-4, -12, 10, 3.4], [8, -8, 7, 2.6]])
+}
+function paintGrass(c, stub) {
+  shadow(c, 0, 6, 12, 4)
+  const blades = stub ? [[-4, -8], [0, -9], [4, -7]] : [[-9, -18], [-5, -24], [0, -27], [5, -23], [9, -17], [-2, -20]]
+  ;[[stub ? '#7c7a3a' : '#9aa34a', 3], ['#6b7231', 1]].forEach(([col, lw]) => {
+    c.strokeStyle = col
+    c.lineWidth = lw
+    blades.forEach(([bx, by]) => {
+      c.beginPath()
+      c.moveTo(bx * 0.4, 5)
+      c.quadraticCurveTo(bx * 0.8, by * 0.5, bx, by)
+      c.stroke()
+    })
+  })
+}
+function paintSapling(c, stub) {
+  shadow(c, 0, 5, 9, 3.4)
+  c.strokeStyle = '#7a5b33'
+  c.lineWidth = 2.6
+  c.beginPath(); c.moveTo(0, 5); c.quadraticCurveTo(1, -10, 0, -22); c.stroke()
+  c.lineWidth = 2
+  c.beginPath(); c.moveTo(0, -8); c.lineTo(7, -16); c.moveTo(0, -13); c.lineTo(-6, -20); c.stroke()
+  if (!stub) {
+    c.fillStyle = '#8f9a3e'
+    ;[[0, -24], [8, -18], [-7, -22]].forEach(([lx, ly]) => {
+      c.beginPath(); c.ellipse(lx, ly, 4, 2.4, -0.4, 0, TAU); c.fill()
+    })
+  }
+}
+function paintBerry(c, stub, winter) {
+  shadow(c, 0, 7, 15, 5)
+  const col = stub ? '#3d4d2d' : winter ? '#44543c' : '#4d6234'
+  ;[[-8, -8, 10], [8, -9, 10], [0, -16, 11], [0, -6, 12]].forEach(([bx, by, r]) => {
+    c.beginPath(); c.arc(bx, by, r, 0, TAU); fs(c, col, '#1d1409', 1.6)
+  })
+  if (!stub && !winter) {
+    c.fillStyle = '#c94f4f'
+    ;[[-8, -12], [3, -18], [9, -6], [-3, -4], [6, -13], [-11, -4]].forEach(([bx, by]) => {
+      c.beginPath(); c.arc(bx, by, 2.8, 0, TAU); c.fill()
+    })
+  }
+  if (winter) snowCap(c, [[0, -20, 10, 3.4], [-8, -12, 6, 2.4]])
+}
+function paintReeds(c, stub) {
+  shadow(c, 0, 6, 12, 4)
+  c.strokeStyle = stub ? '#5a6b48' : '#7c9a52'
+  c.lineWidth = 2.6
+  const stalks = stub ? [[-5, -8], [3, -9]] : [[-8, -22], [-3, -27], [3, -25], [8, -20]]
+  stalks.forEach(([bx, by]) => {
+    c.beginPath()
+    c.moveTo(bx * 0.4, 5)
+    c.quadraticCurveTo(bx * 0.8, by * 0.5, bx, by)
+    c.stroke()
+  })
+  if (!stub) {
+    c.fillStyle = '#8a6a3a'
+    ;[[-3, -24], [3, -22]].forEach(([x, y]) => {
+      c.beginPath(); c.ellipse(x, y, 2.2, 5, 0, 0, TAU); c.fill()
+    })
+  }
+}
+function paintFlower(c, hue) {
+  shadow(c, 0, 4, 8, 3)
+  c.strokeStyle = '#5d7a35'
+  c.lineWidth = 2
+  c.beginPath(); c.moveTo(0, 4); c.quadraticCurveTo(1, -3, 0, -8); c.stroke()
+  const col = hue < 0.5 ? '#d8b04a' : '#c86a70'
+  for (let i = 0; i < 5; i++) {
+    const a = (i / 5) * TAU
+    c.beginPath()
+    c.ellipse(Math.cos(a) * 4.4, -10 + Math.sin(a) * 4.4, 3.2, 3.2, 0, 0, TAU)
+    fs(c, col, '#1d1409', 1)
+  }
+  c.beginPath(); c.arc(0, -10, 2.4, 0, TAU); fs(c, '#7a5a20', '#1d1409', 1)
+}
+function paintFlint(c) {
+  shadow(c, 0, 5, 10, 3.4)
+  c.beginPath(); c.moveTo(-8, 4); c.lineTo(-2, -8); c.lineTo(3, 1); c.closePath(); fs(c, '#c07a3e', '#1d1409', 1.6)
+  c.beginPath(); c.moveTo(0, 5); c.lineTo(6, -5); c.lineTo(9, 4); c.closePath(); fs(c, '#8d9097', '#1d1409', 1.6)
+}
+function paintStump(c, winter) {
+  shadow(c, 0, 5, 14, 5)
+  c.beginPath()
+  c.moveTo(-9, 4); c.lineTo(-8, -10); c.lineTo(8, -10); c.lineTo(9, 4)
+  c.closePath()
+  fs(c, '#5b4128')
+  c.beginPath(); c.ellipse(0, -10, 8, 3.4, 0, 0, TAU); fs(c, '#c9a36b', '#1d1409', 1.6)
+  c.strokeStyle = '#8a6238'
+  c.lineWidth = 1
+  c.beginPath(); c.ellipse(0, -10, 4.4, 1.8, 0, 0, TAU); c.stroke()
+  if (winter) snowCap(c, [[0, -12, 8, 2.6]])
+}
+function paintRubble(c) {
+  shadow(c, 0, 6, 14, 4)
+  ;[[-8, 2, 6], [4, 4, 5], [-1, -2, 4]].forEach(([px, py, r]) => {
+    c.beginPath()
+    c.moveTo(px - r, py + r * 0.7); c.lineTo(px - r * 0.6, py - r); c.lineTo(px + r, py - r * 0.4); c.lineTo(px + r * 0.7, py + r * 0.8)
+    c.closePath()
+    fs(c, '#7e8187', '#1d1409', 1.4)
+  })
+}
+function paintRabbithole(c) {
+  shadow(c, 0, 4, 16, 5)
+  c.beginPath(); c.ellipse(0, 0, 16, 8, 0, Math.PI, 0); fs(c, '#8a6a48')
+  c.beginPath(); c.ellipse(0, 0, 10, 5, 0, 0, TAU); fs(c, '#2a1e14', '#1d1409', 1.6)
+  c.fillStyle = '#9a7a54'
+  ;[[-13, -3], [12, -2], [0, -8]].forEach(([x, y]) => {
+    c.beginPath(); c.arc(x, y, 2, 0, TAU); c.fill()
+  })
+}
+function paintSpiderNest(c, winter) {
+  shadow(c, 0, 10, 26, 8)
+  c.beginPath()
+  c.moveTo(-24, 8)
+  c.quadraticCurveTo(-26, -18, -8, -30)
+  c.quadraticCurveTo(0, -36, 8, -30)
+  c.quadraticCurveTo(26, -18, 24, 8)
+  c.closePath()
+  fs(c, '#ddd5c2')
+  c.strokeStyle = '#b9ad92'
+  c.lineWidth = 1.6
+  ;[[-18, -4, 18, -8], [-14, -16, 12, -18], [-20, 4, 20, 2]].forEach(([x1, y1, x2, y2]) => {
+    c.beginPath()
+    c.moveTo(x1, y1)
+    c.quadraticCurveTo(0, (y1 + y2) / 2 + 5, x2, y2)
+    c.stroke()
+  })
+  c.beginPath(); c.ellipse(0, 2, 8, 6, 0, 0, TAU); fs(c, '#211a14', '#1d1409', 1.6)
+  if (winter) snowCap(c, [[0, -30, 14, 4]])
+}
+function paintBeehive(c) {
+  shadow(c, 0, 8, 20, 6)
+  ;[[0, -6, 17, 13], [0, -16, 13, 9], [0, -24, 8, 6]].forEach(([x, y, rx, ry]) => {
+    c.beginPath(); c.ellipse(x, y, rx, ry, 0, 0, TAU); fs(c, '#d8a437')
+  })
+  c.strokeStyle = '#a87c1e'
+  c.lineWidth = 1.6
+  ;[-12, -4, 4].forEach((y) => {
+    c.beginPath(); c.moveTo(-14, y); c.quadraticCurveTo(0, y + 4, 14, y); c.stroke()
+  })
+  c.beginPath(); c.ellipse(0, -2, 4.4, 5.4, 0, 0, TAU); fs(c, '#3a2c14', '#1d1409', 1.4)
+}
+function paintPighouse(c, winter) {
+  shadow(c, 0, 10, 30, 9)
+  c.beginPath(); c.rect(-24, -26, 48, 34); fs(c, '#b08a54')
+  c.strokeStyle = '#8e6c3e'
+  c.lineWidth = 2
+  ;[-12, 0, 12].forEach((x) => { c.beginPath(); c.moveTo(x, -26); c.lineTo(x, 8); c.stroke() })
+  c.beginPath()
+  c.moveTo(-30, -24); c.lineTo(0, -46); c.lineTo(30, -24)
+  c.closePath()
+  fs(c, winter ? '#d8e2ea' : '#a84c38')
+  c.beginPath(); c.ellipse(0, -2, 8, 10, 0, 0, TAU); fs(c, '#3a2415', '#1d1409', 1.8)
+  c.beginPath(); c.arc(14, -16, 4.4, 0, TAU); fs(c, '#e8d8b0', '#1d1409', 1.6)
+  if (winter) snowCap(c, [[0, -44, 10, 3.4], [-16, -32, 10, 3], [16, -32, 10, 3]])
+}
+function paintTentacleMound(c) {
+  shadow(c, 0, 4, 15, 5)
+  c.beginPath(); c.ellipse(0, 0, 14, 6, 0, Math.PI, 0); fs(c, '#4c5646', '#2a3024', 1.8)
+  c.fillStyle = '#3a4234'
+  ;[[-6, -3], [5, -2], [0, -5]].forEach(([x, y]) => {
+    c.beginPath(); c.arc(x, y, 2, 0, TAU); c.fill()
+  })
+}
+function paintScience(c, winter) {
+  shadow(c, 0, 8, 24, 8)
+  c.beginPath(); c.rect(-18, -22, 36, 30); fs(c, '#8a6238')
+  c.strokeStyle = '#5b4128'
+  c.lineWidth = 1.6
+  c.beginPath(); c.moveTo(-18, -8); c.lineTo(18, -8); c.stroke()
+  // 顶部齿轮
+  c.beginPath(); c.arc(0, -30, 9, 0, TAU); fs(c, '#9aa0a8')
+  c.strokeStyle = '#241812'
+  c.lineWidth = 2.4
+  for (let i = 0; i < 8; i++) {
+    const a = (i / 8) * TAU
+    c.beginPath()
+    c.moveTo(Math.cos(a) * 9, -30 + Math.sin(a) * 9)
+    c.lineTo(Math.cos(a) * 13, -30 + Math.sin(a) * 13)
+    c.stroke()
+  }
+  c.beginPath(); c.arc(0, -30, 3.4, 0, TAU); fs(c, '#6e7278', '#241812', 1.4)
+  // 仪表与摇柄
+  c.beginPath(); c.arc(-8, 0, 4, 0, TAU); fs(c, '#e0b83a', '#241812', 1.4)
+  c.strokeStyle = '#241812'
+  c.beginPath(); c.moveTo(-8, 0); c.lineTo(-6, -3); c.stroke()
+  c.beginPath(); c.rect(4, -4, 10, 8); fs(c, '#6e5a3a', '#241812', 1.4)
+  if (winter) snowCap(c, [[0, -38, 12, 3.6]])
+}
+function paintAlchemy(c, winter) {
+  shadow(c, 0, 8, 26, 8)
+  c.beginPath(); c.rect(-20, -18, 40, 28); fs(c, '#6e5a3a')
+  c.beginPath()
+  c.moveTo(-16, -18); c.lineTo(0, -44); c.lineTo(16, -18)
+  c.closePath()
+  fs(c, '#8a6238')
+  c.beginPath(); c.arc(0, -26, 5, 0, TAU); fs(c, '#57a486', '#241812', 1.6)
+  c.beginPath(); c.rect(-12, -8, 9, 12); fs(c, '#57707e', '#241812', 1.4)
+  c.beginPath(); c.arc(8, -2, 4.4, 0, TAU); fs(c, '#c98aa8', '#241812', 1.4)
+  c.strokeStyle = '#241812'
+  c.lineWidth = 1.6
+  c.beginPath(); c.moveTo(4, 10); c.lineTo(12, 10); c.stroke()
+  if (winter) snowCap(c, [[0, -42, 9, 3.2]])
+}
+
+// =====================================================================
+// 实体绘制分发（ctx 已平移到实体脚底）
+// env: {winter, time, icons}
+// =====================================================================
+export function drawEnt(ctx, ent, env) {
+  const { winter, time, icons } = env
+  const sway = Math.sin(time * 1.1 + (ent.id % 13)) * 0.02
+  if (ent.type === 'tree') {
+    blit(ctx, sprite(winter ? 'tree_w' : 'tree', 100, 124, 50, 112, (c) => paintTree(c, winter)), sway)
+  } else if (ent.type === 'rock') {
+    blit(ctx, sprite(winter ? 'rock_w' : 'rock', 48, 40, 24, 28, (c) => paintRock(c, false, winter)))
+  } else if (ent.type === 'goldrock') {
+    blit(ctx, sprite(winter ? 'goldrock_w' : 'goldrock', 48, 40, 24, 28, (c) => paintRock(c, true, winter)))
+  } else if (ent.type === 'grass') {
+    blit(ctx, sprite(ent.stub ? 'grass_s' : 'grass', 48, 44, 24, 36, (c) => paintGrass(c, ent.stub)), sway * 1.6)
+  } else if (ent.type === 'sapling') {
+    blit(ctx, sprite(ent.stub ? 'sapling_s' : 'sapling', 44, 48, 22, 40, (c) => paintSapling(c, ent.stub)), sway * 1.4)
+  } else if (ent.type === 'berry') {
+    blit(ctx, sprite(`berry${ent.stub ? '_s' : ''}${winter ? '_w' : ''}`, 52, 50, 26, 40, (c) => paintBerry(c, ent.stub, winter)))
+  } else if (ent.type === 'reeds') {
+    blit(ctx, sprite(ent.stub ? 'reeds_s' : 'reeds', 44, 52, 22, 42, (c) => paintReeds(c, ent.stub)), sway * 1.5)
+  } else if (ent.type === 'flower') {
+    blit(ctx, sprite(ent.id % 2 ? 'flower_a' : 'flower_b', 30, 32, 15, 24, (c) => paintFlower(c, ent.id % 2 ? 0.3 : 0.7)))
+  } else if (ent.type === 'flint') {
+    blit(ctx, sprite('flint', 30, 26, 15, 18, paintFlint))
+  } else if (ent.type === 'stump') {
+    blit(ctx, sprite(winter ? 'stump_w' : 'stump', 40, 40, 20, 30, (c) => paintStump(c, winter)))
+  } else if (ent.type === 'rubble') {
+    blit(ctx, sprite('rubble', 40, 30, 20, 22, paintRubble))
+  } else if (ent.type === 'rabbithole') {
+    blit(ctx, sprite('rabbithole', 44, 30, 22, 18, paintRabbithole))
+  } else if (ent.type === 'spidernest') {
+    blit(ctx, sprite(winter ? 'nest_w' : 'nest', 64, 60, 32, 48, (c) => paintSpiderNest(c, winter)))
+  } else if (ent.type === 'beehive') {
+    blit(ctx, sprite('beehive', 48, 52, 24, 42, paintBeehive))
+    // 环绕巢的活蜂点缀
+    for (let i = 0; i < 2; i++) {
+      const a = time * (1.4 + i * 0.5) + i * 3
+      ctx.fillStyle = '#e0b83a'
+      ctx.beginPath()
+      ctx.arc(Math.cos(a) * 22, -24 + Math.sin(a * 1.7) * 8, 2, 0, TAU)
+      ctx.fill()
+    }
+  } else if (ent.type === 'pighouse') {
+    blit(ctx, sprite(winter ? 'pighouse_w' : 'pighouse', 68, 72, 34, 60, (c) => paintPighouse(c, winter)))
+  } else if (ent.type === 'tentacle') {
+    drawTentacle(ctx, ent, time)
+  } else if (ent.type === 'sciencemachine') {
+    blit(ctx, sprite(winter ? 'science_w' : 'science', 56, 68, 28, 56, (c) => paintScience(c, winter)))
+  } else if (ent.type === 'alchemyengine') {
+    blit(ctx, sprite(winter ? 'alchemy_w' : 'alchemy', 60, 76, 30, 62, (c) => paintAlchemy(c, winter)))
+  } else if (ent.type === 'crockpot') {
+    drawCrockpot(ctx, ent, time)
+  } else if (ent.type === 'trap') {
+    drawTrap(ctx, ent, time)
+  } else if (ent.type === 'rabbit') {
+    drawRabbit(ctx, ent, time)
+  } else if (ent.type === 'loot') {
+    // 掉落物：物品图标微缩 + 底部阴影 + 轻微浮动
+    const bob = Math.sin(time * 2.4 + ent.id) * 1.4
+    shadow(ctx, 0, 3, 9, 3)
+    const ic = icons?.[ent.code]
+    if (ic) ctx.drawImage(ic, -13, -22 + bob, 26, 26)
+  }
+}
+
+// 陷阱：armed 张开支起 / caught 扣地晃动
+function drawTrap(ctx, ent, time) {
+  const wob = ent.state === 'caught' && ent.shake > 0 ? Math.sin(time * 40) * 2 : 0
+  shadow(ctx, 0, 5, 13, 4)
+  ctx.save()
+  ctx.translate(wob, 0)
+  ctx.strokeStyle = '#a8894c'
+  ctx.lineWidth = 2.4
+  if (ent.state === 'armed') {
+    ctx.save()
+    ctx.rotate(-0.5)
+    ;[12, 8.5].forEach((r) => {
+      ctx.beginPath(); ctx.arc(0, 0, r, Math.PI, 0); ctx.stroke()
+    })
+    ctx.restore()
+    ctx.strokeStyle = '#6b5a2a'
+    ctx.beginPath(); ctx.moveTo(7, 3); ctx.lineTo(10, -8); ctx.stroke()
+  } else {
+    ;[13, 9, 5].forEach((r) => {
+      ctx.beginPath(); ctx.arc(0, 2, r, Math.PI, 0); ctx.stroke()
+    })
+    ctx.strokeStyle = '#6b5a2a'
+    ctx.beginPath(); ctx.moveTo(-13, 2); ctx.lineTo(13, 2); ctx.stroke()
+  }
+  ctx.restore()
+}
+
+// 兔子：蹲跳挤压拉伸，逃跑时耳朵后倒
+function drawRabbit(ctx, ent, time) {
+  const moving = ent.flee || Math.abs(ent.vx) + Math.abs(ent.vy) > 4
+  const hopPhase = moving ? Math.abs(Math.sin(time * 9 + ent.hop)) : 0
+  const lift = hopPhase * 7
+  const squash = 1 - hopPhase * 0.18
+  ctx.save()
+  ctx.scale(ent.dir || 1, 1)
+  shadow(ctx, 0, 7, 11 * (1 + hopPhase * 0.15), 3.6)
+  ctx.translate(0, -lift)
+  ctx.scale(1 / squash, squash)
+  ctx.beginPath(); ctx.ellipse(0, -6, 10, 8, 0, 0, TAU); fsx(ctx, '#eceadf')
+  ctx.beginPath(); ctx.arc(7, -12, 5.6, 0, TAU); fsx(ctx, '#eceadf')
+  const earAng = ent.flee ? -1.9 : -0.5
+  ;[0, 0.5].forEach((off) => {
+    ctx.save()
+    ctx.translate(6, -16)
+    ctx.rotate(earAng + off)
+    ctx.beginPath(); ctx.ellipse(0, -7, 2.4, 7.5, 0, 0, TAU); fsx(ctx, '#eceadf', '#1d1409', 1.6)
+    ctx.beginPath(); ctx.ellipse(0, -6.4, 1.1, 4.8, 0, 0, TAU)
+    ctx.fillStyle = '#d8a8a8'
+    ctx.fill()
+    ctx.restore()
+  })
+  ctx.beginPath(); ctx.arc(-9, -5, 3.2, 0, TAU); fsx(ctx, '#f6f4ea', '#1d1409', 1.4)
+  ctx.fillStyle = '#1d1409'
+  ctx.beginPath(); ctx.arc(9, -13, 1.2, 0, TAU); ctx.fill()
+  ctx.restore()
+}
+// ctx 版填充描边（实体/生物画师用）
+function fsx(ctx, fill, stroke = '#1d1409', lw = 2) {
+  if (fill) { ctx.fillStyle = fill; ctx.fill() }
+  if (stroke) { ctx.strokeStyle = stroke; ctx.lineWidth = lw; ctx.stroke() }
+}
+
+// 触手：潜伏=泥丘；现身=紫色尖刺触手甩击（atkT 1→0 为一次甩击）
+function drawTentacle(ctx, ent, time) {
+  if (ent.state !== 'up') {
+    blit(ctx, sprite('tentmound', 36, 22, 18, 14, paintTentacleMound))
+    // 潜伏微动涟漪
+    const p = (time * 0.7 + ent.id) % 1
+    ctx.strokeStyle = `rgba(120,134,110,${0.5 - p * 0.5})`
+    ctx.lineWidth = 1.6
+    ctx.beginPath()
+    ctx.ellipse(0, 0, 10 + p * 14, 4 + p * 5, 0, 0, TAU)
+    ctx.stroke()
+    return
+  }
+  shadow(ctx, 0, 4, 14, 5)
+  const whip = ent.atkT > 0 ? Math.sin((1 - ent.atkT) * Math.PI) : 0
+  const sway = Math.sin(time * 2.6 + ent.id) * 0.14
+  ctx.save()
+  ctx.scale(ent.dir || 1, 1)
+  ctx.rotate(sway + whip * 0.9)
+  ctx.beginPath()
+  ctx.moveTo(-9, 2)
+  ctx.bezierCurveTo(-11, -22, -3, -34, 4, -46)
+  ctx.quadraticCurveTo(8, -52, 12, -50)
+  ctx.quadraticCurveTo(10, -44, 7, -38)
+  ctx.bezierCurveTo(4, -26, 9, -14, 9, 2)
+  ctx.closePath()
+  fsx(ctx, '#6b4a7e', '#2a1834', 2.2)
+  // 白色尖刺
+  ctx.fillStyle = '#e8e2d4'
+  ;[[-4, -14, -0.6], [0, -26, -0.4], [4, -38, -0.2]].forEach(([x, y, a]) => {
+    ctx.save()
+    ctx.translate(x, y)
+    ctx.rotate(a)
+    ctx.beginPath()
+    ctx.moveTo(0, 0); ctx.lineTo(7, -2); ctx.lineTo(1, -6)
+    ctx.closePath()
+    ctx.fill()
+    ctx.restore()
+  })
+  ctx.restore()
+}
+
+// 烹饪锅：idle 空锅 / cook 火苗+冒泡 / done 满锅料理
+function drawCrockpot(ctx, ent, time) {
+  shadow(ctx, 0, 6, 18, 6)
+  // 石支脚
+  ctx.fillStyle = '#7e8187'
+  ;[-10, 0, 10].forEach((x) => {
+    ctx.beginPath(); ctx.arc(x, 2, 3.4, 0, TAU); ctx.fill()
+  })
+  // 锅体
+  ctx.beginPath(); ctx.ellipse(0, -12, 16, 12, 0, 0, TAU); fsx(ctx, '#4a4a52')
+  ctx.beginPath(); ctx.ellipse(0, -20, 12, 4.4, 0, 0, TAU); fsx(ctx, '#33333a')
+  const st = ent.state
+  if (st === 'cook') {
+    // 火苗
+    const fl = Math.sin(time * 8) * 2
+    ctx.beginPath()
+    ctx.moveTo(0, -2 - 10 - fl)
+    ctx.quadraticCurveTo(6, -6, 0, 1)
+    ctx.quadraticCurveTo(-6, -6, 0, -12 - fl)
+    fsx(ctx, 'rgba(240,146,60,0.9)', null)
+    // 冒泡
+    ctx.fillStyle = '#c9d0a8'
+    const b = (time * 1.4 + ent.id) % 1
+    ctx.beginPath()
+    ctx.arc(-4 + b * 6, -22 - b * 8, 2 + b * 1.5, 0, TAU)
+    ctx.fill()
+  } else if (st === 'done') {
+    ctx.beginPath(); ctx.ellipse(0, -20, 10, 3.4, 0, 0, TAU); fsx(ctx, '#c98a4a', null)
+    // 香气
+    ctx.strokeStyle = 'rgba(232,226,212,0.65)'
+    ctx.lineWidth = 1.6
+    const w = Math.sin(time * 2.2) * 2
+    ctx.beginPath()
+    ctx.moveTo(-3, -26)
+    ctx.quadraticCurveTo(-5 + w, -32, -3, -38)
+    ctx.moveTo(3, -26)
+    ctx.quadraticCurveTo(5 - w, -32, 3, -38)
+    ctx.stroke()
+  }
+  // 投料格指示点
+  const ing = ent.ing || []
+  for (let i = 0; i < 4; i++) {
+    ctx.fillStyle = i < ing.length ? '#e8c168' : 'rgba(255,255,255,0.22)'
+    ctx.beginPath()
+    ctx.arc(-9 + i * 6, -34, 2.2, 0, TAU)
+    ctx.fill()
+  }
+}
+
+// 篝火/火堆：石圈 + 交叉柴 + 三层贝塞尔火焰（大小随余量；火堆熄灭仍保留石圈炭堆）
+export function drawFirePainter(ctx, f, time) {
+  ctx.lineJoin = 'round'
+  ctx.lineCap = 'round'
+  if (f.pit) {
+    ctx.fillStyle = '#7e8187'
+    for (let i = 0; i < 8; i++) {
+      const a = (i / 8) * TAU
+      ctx.beginPath()
+      ctx.arc(Math.cos(a) * 17, 4 + Math.sin(a) * 8, 4, 0, TAU)
+      ctx.fill()
+      ctx.strokeStyle = '#54565c'
+      ctx.lineWidth = 1.2
+      ctx.stroke()
+    }
+    ctx.fillStyle = '#2a2018'
+    ctx.beginPath()
+    ctx.ellipse(0, 4, 12, 5.4, 0, 0, TAU)
+    ctx.fill()
+  } else {
+    ctx.fillStyle = '#7e8187'
+    ;[-14, -7, 0, 7, 14].forEach((sx, i) => {
+      ctx.beginPath()
+      ctx.arc(sx, 6 + (i % 2 ? 2 : 0), 3.4, 0, TAU)
+      ctx.fill()
+    })
+  }
+  if (f.ttl <= 0) return
+  ctx.strokeStyle = '#5b4128'
+  ctx.lineWidth = 4
+  ctx.beginPath()
+  ctx.moveTo(-9, 5); ctx.lineTo(9, 0); ctx.moveTo(-9, 0); ctx.lineTo(9, 5)
+  ctx.stroke()
+  const vigor = 0.45 + 0.55 * Math.min(1, f.ttl / 45)
+  const flick = Math.sin(time * 9) * 2.5 * vigor
+  const scale = f.pit ? 1.2 : 1
+  const flame = (h, w, col) => {
+    ctx.beginPath()
+    ctx.moveTo(0, (-h + flick * 0.4) * scale)
+    ctx.quadraticCurveTo(w * scale, -h * 0.45 * scale, 0, 2)
+    ctx.quadraticCurveTo(-w * scale, -h * 0.45 * scale, 0, (-h + flick * 0.4) * scale)
+    ctx.fillStyle = col
+    ctx.fill()
+  }
+  flame(30 * vigor + flick, 13 * vigor, 'rgba(240,120,40,0.88)')
+  flame(21 * vigor + flick * 0.7, 9 * vigor, 'rgba(255,185,60,0.9)')
+  flame(12 * vigor + flick * 0.4, 5.4 * vigor, 'rgba(255,238,160,0.95)')
+}
+
+// =====================================================================
+// 生物绘制（ctx 已平移到脚底）
+// =====================================================================
+export function drawMob(ctx, m, time) {
+  if (m.kind === 'shadow') drawShadow(ctx, m, time)
+  else if (m.kind === 'spider') drawSpider(ctx, m, time)
+  else if (m.kind === 'hound') drawHoundFig(ctx, m, time, false)
+  else if (m.kind === 'icehound') drawHoundFig(ctx, m, time, true)
+  else if (m.kind === 'treeguard') drawTreeguard(ctx, m, time)
+  else if (m.kind === 'pig') drawPig(ctx, m, time)
+  else if (m.kind === 'beefalo') drawBeefalo(ctx, m, time)
+  else if (m.kind === 'bee') drawBee(ctx, m, time)
+  else if (m.kind === 'frog') drawFrog(ctx, m, time)
+  else if (m.kind === 'deerclops') drawDeerclops(ctx, m, time)
+}
+
+function drawShadow(ctx, m, time) {
+  const wob = Math.sin(time * 2.2 + m.bob)
+  ctx.save()
+  ctx.translate(0, wob * 4)
+  ctx.globalAlpha = 0.85
+  ctx.beginPath()
+  ctx.moveTo(0, -30)
+  ctx.bezierCurveTo(14 + wob * 3, -26, 17, -6, 12, 6)
+  ctx.bezierCurveTo(9, 14, -9, 14, -12, 6)
+  ctx.bezierCurveTo(-17, -6, -14 - wob * 3, -26, 0, -30)
+  ctx.fillStyle = '#120a1e'
+  ctx.fill()
+  ctx.strokeStyle = '#120a1e'
+  ctx.lineWidth = 4
+  ;[-8, 0, 8].forEach((tx, i) => {
+    const sw = Math.sin(time * 3 + i * 2 + m.bob) * 4
+    ctx.beginPath()
+    ctx.moveTo(tx, 8)
+    ctx.quadraticCurveTo(tx + sw, 16, tx + sw * 1.4, 22)
+    ctx.stroke()
+  })
+  ctx.strokeStyle = '#e8e5f2'
+  ctx.lineWidth = 2.4
+  ctx.beginPath()
+  ctx.moveTo(-8, -18); ctx.lineTo(-3, -14)
+  ctx.moveTo(8, -18); ctx.lineTo(3, -14)
+  ctx.stroke()
+  ctx.globalAlpha = 1
+  ctx.restore()
+}
+
+function drawSpider(ctx, m, time) {
+  ctx.save()
+  ctx.scale(m.dir || 1, 1)
+  shadow(ctx, 0, 8, 14, 4.6)
+  const crawl = Math.sin(time * 10 + m.bob)
+  ctx.strokeStyle = '#17151c'
+  ctx.lineWidth = 2.2
+  for (let s = -1; s <= 1; s += 2) {
+    for (let i = 0; i < 4; i++) {
+      const lift = Math.sin(time * 10 + m.bob + i * 1.6 + (s > 0 ? 0 : Math.PI)) * 2.4
+      const bx = s * (6 + i * 1.2)
+      const by = -4 + i * 2.4
+      ctx.beginPath()
+      ctx.moveTo(s * 3, -4)
+      ctx.lineTo(bx + s * 4, by - 4 + lift)
+      ctx.lineTo(bx + s * 8, 7 + lift * 0.4)
+      ctx.stroke()
+    }
+  }
+  ctx.beginPath(); ctx.ellipse(-4, -6, 10, 8, 0, 0, TAU); fsx(ctx, '#211f28')
+  ctx.beginPath(); ctx.arc(8, -5 + crawl * 0.6, 5.6, 0, TAU); fsx(ctx, '#2b2934')
+  ctx.strokeStyle = '#3a3744'
+  ctx.lineWidth = 1.2
+  ;[[-10, -12], [-5, -14], [0, -13]].forEach(([hx, hy]) => {
+    ctx.beginPath(); ctx.moveTo(hx, hy); ctx.lineTo(hx - 1, hy - 3); ctx.stroke()
+  })
+  ctx.fillStyle = '#e04840'
+  ;[[6.5, -7], [9.5, -7], [7, -4.4], [10, -4.6]].forEach(([ex, ey]) => {
+    ctx.beginPath(); ctx.arc(ex, ey + crawl * 0.6, 1.1, 0, TAU); ctx.fill()
+  })
+  ctx.restore()
+}
+
+function drawHoundFig(ctx, m, time, ice) {
+  const body = ice ? '#7fa8c8' : '#33313a'
+  const dark = ice ? '#5a86a8' : '#26242a'
+  const chest = ice ? '#dfe8f0' : '#8f8c96'
+  const eye = ice ? '#7fd8f0' : '#e04840'
+  ctx.save()
+  ctx.scale(m.dir || 1, 1)
+  shadow(ctx, 0, 9, 16, 5)
+  const run = time * 14 + m.bob
+  ctx.strokeStyle = dark
+  ctx.lineWidth = 3.4
+  ;[[-9, 0], [-5, Math.PI], [7, Math.PI * 0.9], [11, Math.PI * 1.9]].forEach(([lx, ph]) => {
+    const sw = Math.sin(run + ph) * 5
+    ctx.beginPath()
+    ctx.moveTo(lx, -6)
+    ctx.lineTo(lx + sw, 8)
+    ctx.stroke()
+  })
+  ctx.beginPath(); ctx.ellipse(0, -9, 14, 7.4, -0.08, 0, TAU); fsx(ctx, body)
+  ctx.beginPath(); ctx.ellipse(6, -6, 4.4, 3, -0.3, 0, TAU)
+  ctx.fillStyle = chest
+  ctx.fill()
+  ctx.strokeStyle = dark
+  ctx.lineWidth = 2.6
+  ctx.beginPath()
+  ctx.moveTo(-13, -11)
+  ctx.quadraticCurveTo(-19, -15 + Math.sin(run) * 1.4, -21, -11)
+  ctx.stroke()
+  const jaw = (Math.sin(run * 0.7) + 1) * 0.16
+  ctx.save()
+  ctx.translate(13, -13)
+  ctx.beginPath(); ctx.arc(0, 0, 6.2, 0, TAU); fsx(ctx, body)
+  ctx.beginPath()
+  ctx.moveTo(-4, -4); ctx.lineTo(-2, -10); ctx.lineTo(1, -5)
+  ctx.closePath()
+  fsx(ctx, dark, '#1d1409', 1.4)
+  ctx.save()
+  ctx.rotate(-jaw)
+  ctx.beginPath()
+  ctx.moveTo(2, -2); ctx.lineTo(13, 0); ctx.lineTo(3, 2.6)
+  ctx.closePath()
+  fsx(ctx, body, '#1d1409', 1.4)
+  ctx.fillStyle = '#e8e5da'
+  ctx.beginPath()
+  ctx.moveTo(8, 0.4); ctx.lineTo(9.6, 2.8); ctx.lineTo(11, 0.6)
+  ctx.closePath()
+  ctx.fill()
+  ctx.restore()
+  ctx.save()
+  ctx.rotate(jaw)
+  ctx.beginPath()
+  ctx.moveTo(2, 2); ctx.lineTo(11, 4.4); ctx.lineTo(3, 6)
+  ctx.closePath()
+  fsx(ctx, dark, '#1d1409', 1.4)
+  ctx.restore()
+  ctx.fillStyle = eye
+  ctx.beginPath(); ctx.arc(1, -2.6, 1.4, 0, TAU); ctx.fill()
+  ctx.restore()
+  // 冰犬霜气
+  if (ice) {
+    ctx.fillStyle = 'rgba(200,236,248,0.5)'
+    const p = (time * 1.2 + m.bob) % 1
+    ctx.beginPath()
+    ctx.arc(m.dir * 16, -18 - p * 8, 2.4 * (1 - p), 0, TAU)
+    ctx.fill()
+  }
+  ctx.restore()
+}
+
+function drawTreeguard(ctx, m, time) {
+  ctx.save()
+  ctx.scale(m.dir || 1, 1)
+  shadow(ctx, 0, 6, 30, 9)
+  const breathe = Math.sin(time * 1.6) * 1.5
+  ctx.strokeStyle = '#4a3421'
+  ctx.lineWidth = 5
+  ;[[-12, -4], [-4, 2], [6, 0], [13, -3]].forEach(([rx, ry]) => {
+    ctx.beginPath()
+    ctx.moveTo(rx * 0.5, -14)
+    ctx.quadraticCurveTo(rx, ry - 6, rx + (rx > 0 ? 4 : -4), 4)
+    ctx.stroke()
+  })
+  ctx.beginPath()
+  ctx.moveTo(-17, -12); ctx.lineTo(-14, -74 + breathe); ctx.lineTo(14, -74 + breathe); ctx.lineTo(17, -12)
+  ctx.closePath()
+  fsx(ctx, '#5b4128', '#1d1409', 2.6)
+  ctx.strokeStyle = '#43301d'
+  ctx.lineWidth = 2
+  ;[[-8, -20, -10, -58], [0, -16, 2, -66], [9, -22, 8, -54]].forEach(([x1, y1, x2, y2]) => {
+    ctx.beginPath()
+    ctx.moveTo(x1, y1)
+    ctx.quadraticCurveTo((x1 + x2) / 2 + 3, (y1 + y2) / 2, x2, y2 + breathe)
+    ctx.stroke()
+  })
+  const crown = (yTop, w, col) => {
+    ctx.beginPath()
+    ctx.moveTo(-w, yTop + 14)
+    for (let i = 0; i <= 4; i++) {
+      ctx.lineTo(-w + (i * 2 * w) / 4, yTop + 14 - (i % 2 === 0 ? 0 : 7))
+    }
+    ctx.lineTo(0, yTop)
+    ctx.closePath()
+    fsx(ctx, col, '#1d1409', 2)
+  }
+  crown(-102 + breathe, 22, '#27411f')
+  crown(-88 + breathe, 27, '#1f3619')
+  const armAng = m.state === 'windup' ? -2.2 : m.state === 'smash' ? 0.7 : -0.5 + Math.sin(time * 1.6) * 0.12
+  ;[1, -1].forEach((side) => {
+    ctx.save()
+    ctx.translate(side * 15, -58 + breathe)
+    ctx.rotate(side === 1 ? armAng : -armAng * 0.55 - 0.4)
+    ctx.strokeStyle = '#5b4128'
+    ctx.lineWidth = 7
+    ctx.beginPath()
+    ctx.moveTo(0, 0)
+    ctx.quadraticCurveTo(side * 16, 10, side * 26, 26)
+    ctx.stroke()
+    ctx.lineWidth = 4
+    ctx.beginPath()
+    ctx.moveTo(side * 26, 26); ctx.lineTo(side * 34, 34)
+    ctx.moveTo(side * 26, 26); ctx.lineTo(side * 22, 38)
+    ctx.stroke()
+    ctx.restore()
+  })
+  const glow = m.state === 'windup' ? 1 : 0.6 + Math.sin(time * 4) * 0.2
+  ctx.fillStyle = `rgba(224,64,48,${glow})`
+  ctx.beginPath()
+  ctx.arc(-6, -62 + breathe, 3, 0, TAU)
+  ctx.arc(7, -62 + breathe, 3, 0, TAU)
+  ctx.fill()
+  ctx.restore()
+}
+
+// 猪人：粉色双足胖子，步行摆腿；结盟时眼神朝向主人
+function drawPig(ctx, m, time) {
+  ctx.save()
+  ctx.scale(m.dir || 1, 1)
+  shadow(ctx, 0, 8, 14, 5)
+  const walkSwing = m.moving ? Math.sin(time * 9 + m.bob) : 0
+  // 腿
+  ctx.strokeStyle = '#c98a80'
+  ctx.lineWidth = 5
+  ctx.beginPath()
+  ctx.moveTo(-5, -6); ctx.lineTo(-5 + walkSwing * 4, 7)
+  ctx.moveTo(5, -6); ctx.lineTo(5 - walkSwing * 4, 7)
+  ctx.stroke()
+  // 圆身
+  ctx.beginPath(); ctx.ellipse(0, -16, 13, 12, 0, 0, TAU); fsx(ctx, '#e8a8a0')
+  ctx.beginPath(); ctx.ellipse(0, -11, 8, 6, 0, 0, TAU)
+  ctx.fillStyle = '#f2c4bc'
+  ctx.fill()
+  // 手
+  ctx.strokeStyle = '#e8a8a0'
+  ctx.lineWidth = 4
+  ctx.beginPath()
+  ctx.moveTo(-10, -18); ctx.lineTo(-14 - walkSwing * 2, -10)
+  ctx.moveTo(10, -18); ctx.lineTo(14 + walkSwing * 2, -10)
+  ctx.stroke()
+  // 头
+  ctx.beginPath(); ctx.arc(2, -32, 9, 0, TAU); fsx(ctx, '#e8a8a0')
+  // 耳朵
+  ;[-1, 1].forEach((s) => {
+    ctx.beginPath()
+    ctx.moveTo(2 + s * 6, -39)
+    ctx.lineTo(2 + s * 10, -45)
+    ctx.lineTo(2 + s * 12, -38)
+    ctx.closePath()
+    fsx(ctx, '#d88a80', '#1d1409', 1.4)
+  })
+  // 猪鼻 + 眼
+  ctx.beginPath(); ctx.ellipse(8, -30, 4.4, 3.4, 0, 0, TAU); fsx(ctx, '#d88a80', '#1d1409', 1.6)
+  ctx.fillStyle = '#1d1409'
+  ctx.beginPath()
+  ctx.arc(7, -30.5, 0.8, 0, TAU)
+  ctx.arc(9.5, -30.5, 0.8, 0, TAU)
+  ctx.arc(4, -35, 1.4, 0, TAU)
+  ctx.fill()
+  // 结盟标记：头顶小红心
+  if (m.loyalT > 0) {
+    ctx.fillStyle = 'rgba(220,80,90,0.9)'
+    const s = 1 + Math.sin(time * 4) * 0.12
+    ctx.save()
+    ctx.translate(2, -50)
+    ctx.scale(s, s)
+    ctx.beginPath()
+    ctx.moveTo(0, 3)
+    ctx.bezierCurveTo(-5, -2, -2, -6, 0, -3)
+    ctx.bezierCurveTo(2, -6, 5, -2, 0, 3)
+    ctx.fill()
+    ctx.restore()
+  }
+  ctx.restore()
+}
+
+// 皮弗娄牛：棕色蓬毛大块头 + 弯角，低头吃草/走动
+function drawBeefalo(ctx, m, time) {
+  ctx.save()
+  ctx.scale(m.dir || 1, 1)
+  shadow(ctx, 0, 10, 24, 7)
+  const walk = m.moving ? Math.sin(time * 6 + m.bob) : 0
+  const graze = m.moving ? 0 : Math.sin(time * 0.8 + m.bob) * 2
+  // 四腿
+  ctx.strokeStyle = '#4a3828'
+  ctx.lineWidth = 5
+  ;[[-14, 0], [-7, Math.PI], [8, Math.PI * 0.8], [15, Math.PI * 1.8]].forEach(([lx, ph]) => {
+    const sw = walk * Math.sin(ph + 1) * 4
+    ctx.beginPath()
+    ctx.moveTo(lx, -10)
+    ctx.lineTo(lx + sw, 9)
+    ctx.stroke()
+  })
+  // 蓬毛躯干（几团圆叠出蓬松感）
+  ;[[0, -20, 21, 15], [-12, -16, 13, 11], [12, -18, 12, 10]].forEach(([x, y, rx, ry]) => {
+    ctx.beginPath()
+    ctx.ellipse(x, y, rx, ry, 0, 0, TAU)
+    fsx(ctx, '#6b5340')
+  })
+  // 毛发笔触
+  ctx.strokeStyle = '#54402e'
+  ctx.lineWidth = 1.6
+  ;[[-16, -8], [-6, -6], [6, -7], [14, -9]].forEach(([x, y]) => {
+    ctx.beginPath()
+    ctx.moveTo(x, y)
+    ctx.lineTo(x - 2, y + 6)
+    ctx.stroke()
+  })
+  // 头（低垂）
+  ctx.save()
+  ctx.translate(20, -14 + graze)
+  ctx.beginPath(); ctx.ellipse(2, 0, 9, 7.4, 0.2, 0, TAU); fsx(ctx, '#5c4634')
+  // 弯角
+  ctx.strokeStyle = '#d8c8a8'
+  ctx.lineWidth = 3.4
+  ctx.beginPath()
+  ctx.moveTo(-2, -6)
+  ctx.quadraticCurveTo(-8, -12, -4, -16)
+  ctx.stroke()
+  ctx.beginPath()
+  ctx.moveTo(6, -5)
+  ctx.quadraticCurveTo(12, -10, 9, -15)
+  ctx.stroke()
+  // 鼻孔与眼
+  ctx.fillStyle = '#1d1409'
+  ctx.beginPath()
+  ctx.arc(8, 2, 1.2, 0, TAU)
+  ctx.arc(1, -3, 1.4, 0, TAU)
+  ctx.fill()
+  ctx.restore()
+  // 尾巴
+  ctx.strokeStyle = '#4a3828'
+  ctx.lineWidth = 2.4
+  ctx.beginPath()
+  ctx.moveTo(-20, -20)
+  ctx.quadraticCurveTo(-26, -14 + Math.sin(time * 2 + m.bob) * 2, -24, -8)
+  ctx.stroke()
+  ctx.restore()
+}
+
+// 杀人蜂：黄黑条纹小球 + 高频振翅
+function drawBee(ctx, m, time) {
+  const hover = Math.sin(time * 6 + m.bob) * 3
+  ctx.save()
+  ctx.scale(m.dir || 1, 1)
+  shadow(ctx, 0, 4, 7, 2.6)
+  ctx.translate(0, -18 + hover)
+  // 翅膀
+  const wing = Math.sin(time * 40) * 0.5
+  ctx.fillStyle = 'rgba(230,240,248,0.75)'
+  ;[-1, 1].forEach((s) => {
+    ctx.save()
+    ctx.rotate(s * (0.5 + wing))
+    ctx.beginPath()
+    ctx.ellipse(0, -7, 3, 6.5, 0, 0, TAU)
+    ctx.fill()
+    ctx.restore()
+  })
+  // 身体条纹
+  ctx.beginPath(); ctx.ellipse(0, 0, 7.5, 5.6, 0, 0, TAU); fsx(ctx, '#e0b83a')
+  ctx.save()
+  ctx.beginPath()
+  ctx.ellipse(0, 0, 7.5, 5.6, 0, 0, TAU)
+  ctx.clip()
+  ctx.fillStyle = '#2a2418'
+  ctx.fillRect(-2.4, -6, 2.6, 12)
+  ctx.fillRect(2.6, -6, 2.4, 12)
+  ctx.restore()
+  ctx.strokeStyle = '#1d1409'
+  ctx.lineWidth = 1.4
+  ctx.beginPath()
+  ctx.ellipse(0, 0, 7.5, 5.6, 0, 0, TAU)
+  ctx.stroke()
+  // 蜇针 + 眼
+  ctx.beginPath()
+  ctx.moveTo(-7, 1); ctx.lineTo(-11, 2.4); ctx.lineTo(-7, 3.4)
+  ctx.closePath()
+  fsx(ctx, '#e8e2d4', '#1d1409', 1)
+  ctx.fillStyle = '#1d1409'
+  ctx.beginPath(); ctx.arc(5.4, -1.6, 1.2, 0, TAU); ctx.fill()
+  ctx.restore()
+}
+
+// 青蛙：绿团蹲跳 + 大嘴
+function drawFrog(ctx, m, time) {
+  const hop = m.moving ? Math.abs(Math.sin(time * 8 + m.bob)) : 0
+  ctx.save()
+  ctx.scale(m.dir || 1, 1)
+  shadow(ctx, 0, 6, 11, 3.6)
+  ctx.translate(0, -hop * 8)
+  ctx.scale(1 + hop * 0.1, 1 - hop * 0.12)
+  // 后腿
+  ctx.strokeStyle = '#5c7a34'
+  ctx.lineWidth = 4
+  ctx.beginPath()
+  ctx.moveTo(-7, -3)
+  ctx.quadraticCurveTo(-12, 2, -9, 6)
+  ctx.stroke()
+  // 身体
+  ctx.beginPath(); ctx.ellipse(0, -7, 10, 7.4, 0, 0, TAU); fsx(ctx, '#7a9a44')
+  ctx.beginPath(); ctx.ellipse(2, -4, 6, 4, 0, 0, TAU)
+  ctx.fillStyle = '#a8c070'
+  ctx.fill()
+  // 前脚
+  ctx.strokeStyle = '#5c7a34'
+  ctx.lineWidth = 3
+  ctx.beginPath()
+  ctx.moveTo(5, -3); ctx.lineTo(7, 5)
+  ctx.moveTo(1, -2); ctx.lineTo(1, 6)
+  ctx.stroke()
+  // 眼睛鼓包
+  ;[[3, -14], [8, -13]].forEach(([x, y]) => {
+    ctx.beginPath(); ctx.arc(x, y, 3, 0, TAU); fsx(ctx, '#7a9a44', '#1d1409', 1.4)
+    ctx.fillStyle = '#1d1409'
+    ctx.beginPath(); ctx.arc(x + 1, y, 1.1, 0, TAU); ctx.fill()
+  })
+  // 嘴线
+  ctx.strokeStyle = '#1d1409'
+  ctx.lineWidth = 1.4
+  ctx.beginPath()
+  ctx.moveTo(4, -8)
+  ctx.quadraticCurveTo(9, -7, 11, -9)
+  ctx.stroke()
+  ctx.restore()
+}
+
+// 独眼巨鹿：极巨蓝灰毛怪 + 鹿角 + 单眼，windup 抬双臂 / smash 砸地
+function drawDeerclops(ctx, m, time) {
+  ctx.save()
+  ctx.scale(m.dir || 1, 1)
+  shadow(ctx, 0, 8, 40, 12)
+  const step = m.moving ? Math.sin(time * 4 + m.bob) : 0
+  const breathe = Math.sin(time * 1.4) * 2
+  // 粗腿
+  ctx.strokeStyle = '#3a4450'
+  ctx.lineWidth = 10
+  ctx.beginPath()
+  ctx.moveTo(-14, -34); ctx.lineTo(-16 + step * 5, 4)
+  ctx.moveTo(14, -34); ctx.lineTo(16 - step * 5, 4)
+  ctx.stroke()
+  // 蓬毛巨躯
+  ;[[0, -62 + breathe, 30, 34], [-18, -50 + breathe, 16, 20], [18, -50 + breathe, 16, 20]].forEach(([x, y, rx, ry]) => {
+    ctx.beginPath()
+    ctx.ellipse(x, y, rx, ry, 0, 0, TAU)
+    fsx(ctx, '#4c5866', '#1d1420', 2.4)
+  })
+  // 毛发笔触
+  ctx.strokeStyle = '#3a4450'
+  ctx.lineWidth = 2
+  ;[[-20, -40], [-8, -34], [6, -36], [18, -42]].forEach(([x, y]) => {
+    ctx.beginPath()
+    ctx.moveTo(x, y + breathe)
+    ctx.lineTo(x - 3, y + 10 + breathe)
+    ctx.stroke()
+  })
+  // 手臂：windup 高举 / smash 砸地
+  const armAng = m.state === 'windup' ? -2.4 : m.state === 'smash' ? 0.8 : -0.4 + Math.sin(time * 1.4) * 0.1
+  ;[1, -1].forEach((side) => {
+    ctx.save()
+    ctx.translate(side * 26, -72 + breathe)
+    ctx.rotate(side === 1 ? armAng : -armAng * 0.6 - 0.3)
+    ctx.strokeStyle = '#46525e'
+    ctx.lineWidth = 9
+    ctx.beginPath()
+    ctx.moveTo(0, 0)
+    ctx.quadraticCurveTo(side * 18, 14, side * 28, 34)
+    ctx.stroke()
+    // 爪
+    ctx.strokeStyle = '#dfe6f0'
+    ctx.lineWidth = 3
+    ctx.beginPath()
+    ctx.moveTo(side * 28, 34); ctx.lineTo(side * 34, 40)
+    ctx.moveTo(side * 28, 34); ctx.lineTo(side * 24, 42)
+    ctx.stroke()
+    ctx.restore()
+  })
+  // 头 + 鹿角 + 单眼
+  ctx.save()
+  ctx.translate(0, -92 + breathe)
+  ctx.beginPath(); ctx.ellipse(0, 0, 18, 15, 0, 0, TAU); fsx(ctx, '#4c5866', '#1d1420', 2.4)
+  // 鹿角
+  ctx.strokeStyle = '#c9b891'
+  ctx.lineWidth = 4
+  ;[-1, 1].forEach((s) => {
+    ctx.beginPath()
+    ctx.moveTo(s * 10, -10)
+    ctx.quadraticCurveTo(s * 22, -22, s * 18, -32)
+    ctx.moveTo(s * 16, -22)
+    ctx.lineTo(s * 24, -26)
+    ctx.stroke()
+  })
+  // 单眼（愤怒发光）
+  const glow = m.state === 'windup' ? 1 : 0.7 + Math.sin(time * 5) * 0.15
+  ctx.beginPath(); ctx.arc(2, -2, 7.4, 0, TAU); fsx(ctx, '#ece8dc', '#1d1420', 2)
+  ctx.fillStyle = `rgba(224,64,48,${glow})`
+  ctx.beginPath(); ctx.arc(2, -2, 4, 0, TAU); ctx.fill()
+  ctx.fillStyle = '#1d1420'
+  ctx.beginPath(); ctx.arc(2, -2, 1.6, 0, TAU); ctx.fill()
+  // 嘴獠牙
+  ctx.fillStyle = '#dfe6f0'
+  ;[[-8, 10], [-2, 12], [5, 11]].forEach(([x, y]) => {
+    ctx.beginPath()
+    ctx.moveTo(x, y); ctx.lineTo(x + 3, y + 5); ctx.lineTo(x + 6, y)
+    ctx.closePath()
+    ctx.fill()
+  })
+  ctx.restore()
+  ctx.restore()
+}
+
+// 装饰点缀：草叶丛 / 碎石 / 蘑菇
+export function drawDecor(ctx, d, x, y) {
+  if (d.kind === 'tuft') {
+    ctx.strokeStyle = 'rgba(150,168,90,0.6)'
+    ctx.lineWidth = 1.6
+    ;[-3, 0, 3].forEach((ox) => {
+      ctx.beginPath()
+      ctx.moveTo(x + ox, y + 3)
+      ctx.lineTo(x + ox * 1.4, y - 4)
+      ctx.stroke()
+    })
+  } else if (d.kind === 'pebble') {
+    ctx.fillStyle = 'rgba(120,116,104,0.75)'
+    ctx.beginPath()
+    ctx.ellipse(x, y, 4.5, 3, 0.4, 0, TAU)
+    ctx.fill()
+    ctx.beginPath()
+    ctx.ellipse(x + 6, y + 2, 3, 2.2, -0.3, 0, TAU)
+    ctx.fill()
+  } else {
+    ctx.fillStyle = '#c9c2ae'
+    ctx.fillRect(x - 1.5, y - 2, 3, 5)
+    ctx.fillStyle = d.hue < 0.5 ? '#a84c38' : '#b07c34'
+    ctx.beginPath()
+    ctx.ellipse(x, y - 3, 5.5, 3.4, 0, Math.PI, 0)
+    ctx.fill()
+    ctx.fillStyle = 'rgba(255,255,255,0.8)'
+    ctx.beginPath()
+    ctx.arc(x - 2, y - 4, 1, 0, TAU)
+    ctx.fill()
+  }
+}
diff --git a/src/games/starve/world.js b/src/games/starve/world.js
new file mode 100644
index 0000000..0c3d2e3
--- /dev/null
+++ b/src/games/starve/world.js
@@ -0,0 +1,448 @@
+// 饥荒世界生成：径向噪声岛屿 + 群系 Voronoi + 道路 + 实体铺设 + turf 瓦片图集
+// 瓦片网格 80px：0=海洋 1=出生草原 2=热带草原 3=草地 4=森林 5=岩石地 6=沼泽
+// （不依赖 engine 模块，方便 Node 环境独立跑生成测试）
+function randInt(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+export const TILE = 80
+export const GW = 40
+export const GH = 30
+export const WORLD = { w: GW * TILE, h: GH * TILE } // 3200 x 2400
+
+export const BIOMES = {
+  1: { code: 'meadow', name: '出生草原', color: '#4a5d33', map: '#5d7a3d' },
+  2: { code: 'savanna', name: '热带草原', color: '#8a8a3e', map: '#a8a34e' },
+  3: { code: 'grassland', name: '草地', color: '#55703a', map: '#6d9048' },
+  4: { code: 'forest', name: '森林', color: '#33492c', map: '#3d5c36' },
+  5: { code: 'rocky', name: '岩石地', color: '#6e6a5e', map: '#8a8578' },
+  6: { code: 'marsh', name: '沼泽', color: '#3d4438', map: '#4c5646' },
+}
+
+export function tileIdx(x, y) {
+  const tx = Math.floor(x / TILE)
+  const ty = Math.floor(y / TILE)
+  if (tx < 0 || tx >= GW || ty < 0 || ty >= GH) return -1
+  return ty * GW + tx
+}
+export function isLand(tiles, x, y) {
+  const i = tileIdx(x, y)
+  return i >= 0 && tiles[i] > 0
+}
+export function biomeAt(tiles, x, y) {
+  const i = tileIdx(x, y)
+  return i >= 0 ? tiles[i] : 0
+}
+export function onRoad(road, x, y) {
+  const i = tileIdx(x, y)
+  return i >= 0 && road[i] === 1
+}
+
+// 在 (x,y) 附近 rMin~rMax 环带内找一块陆地（怪物/掉落安全落点）
+export function findLandNear(tiles, x, y, rMin, rMax, tries = 24) {
+  for (let i = 0; i < tries; i++) {
+    const a = Math.random() * Math.PI * 2
+    const r = rMin + Math.random() * (rMax - rMin)
+    const nx = x + Math.cos(a) * r
+    const ny = y + Math.sin(a) * r
+    if (isLand(tiles, nx, ny)) return { x: nx, y: ny }
+  }
+  return { x, y }
+}
+
+// =====================================================================
+// 岛屿 + 群系 + 道路生成
+// =====================================================================
+export function genIsland() {
+  const tiles = new Uint8Array(GW * GH)
+  const road = new Uint8Array(GW * GH)
+  const cx = GW / 2
+  const cy = GH / 2
+  // 径向噪声轮廓：三组正弦叠加出不规则海岸线
+  const ph = [Math.random() * 7, Math.random() * 7, Math.random() * 7]
+  const landAt = (tx, ty) => {
+    const dx = (tx + 0.5 - cx) / (GW * 0.46)
+    const dy = (ty + 0.5 - cy) / (GH * 0.46)
+    const rad = Math.hypot(dx, dy)
+    const ang = Math.atan2(dy, dx)
+    const edge = 1 + 0.15 * Math.sin(ang * 3 + ph[0]) + 0.11 * Math.sin(ang * 5 + ph[1]) + 0.07 * Math.sin(ang * 8 + ph[2])
+    return rad < edge * 0.9
+  }
+  for (let ty = 0; ty < GH; ty++) {
+    for (let tx = 0; tx < GW; tx++) {
+      if (landAt(tx, ty)) tiles[ty * GW + tx] = 1
+    }
+  }
+  // 出生点周围强制陆地
+  for (let ty = Math.floor(cy) - 3; ty <= Math.floor(cy) + 3; ty++) {
+    for (let tx = Math.floor(cx) - 3; tx <= Math.floor(cx) + 3; tx++) {
+      tiles[ty * GW + tx] = 1
+    }
+  }
+  // 群系簇心：出生草原在中心，其余类型在远处陆地上挑选（相互保持间距）
+  const centers = [{ biome: 1, tx: cx, ty: cy }]
+  const wantTypes = [2, 2, 3, 3, 4, 4, 4, 5, 5, 6, 6] // 热带草原x2 草地x2 森林x3 岩石x2 沼泽x2
+  wantTypes.forEach((biome) => {
+    for (let retry = 0; retry < 60; retry++) {
+      const tx = randInt(2, GW - 3)
+      const ty = randInt(2, GH - 3)
+      if (!tiles[ty * GW + tx]) continue
+      if (Math.hypot(tx - cx, ty - cy) < 6) continue
+      if (centers.some((c) => Math.hypot(c.tx - tx, c.ty - ty) < 5.5)) continue
+      centers.push({ biome, tx, ty })
+      break
+    }
+  })
+  // Voronoi 归属：陆地瓦片染成最近簇心的群系（出生草原簇心加权更近，保证出生区域够大）
+  for (let ty = 0; ty < GH; ty++) {
+    for (let tx = 0; tx < GW; tx++) {
+      const i = ty * GW + tx
+      if (!tiles[i]) continue
+      let best = 1
+      let bd = Infinity
+      centers.forEach((c) => {
+        let d = Math.hypot(c.tx - tx, c.ty - ty)
+        if (c.biome === 1) d *= 0.6
+        if (d < bd) { bd = d; best = c.biome }
+      })
+      tiles[i] = best
+    }
+  }
+  // 道路：从出生点向每个远方簇心铺一条（只在陆地上落笔）
+  centers.slice(1).forEach((c) => {
+    const steps = Math.ceil(Math.hypot(c.tx - cx, c.ty - cy)) * 2
+    for (let s = 0; s <= steps; s++) {
+      const t = s / steps
+      // 轻微弯曲的路径
+      const bend = Math.sin(t * Math.PI) * 1.6 * (c.tx % 2 === 0 ? 1 : -1)
+      const fx = cx + (c.tx - cx) * t + bend * ((c.ty - cy) / (Math.hypot(c.tx - cx, c.ty - cy) || 1))
+      const fy = cy + (c.ty - cy) * t - bend * ((c.tx - cx) / (Math.hypot(c.tx - cx, c.ty - cy) || 1))
+      const tx = Math.round(fx)
+      const ty = Math.round(fy)
+      if (tx < 0 || tx >= GW || ty < 0 || ty >= GH) continue
+      const i = ty * GW + tx
+      if (tiles[i]) road[i] = 1
+    }
+  })
+  return { tiles, road, centers }
+}
+
+// =====================================================================
+// 实体铺设：按群系密度表逐瓦片掷点（带最小间距），返回放置清单与生物出生点
+// =====================================================================
+const DENSITY = {
+  1: { grass: 0.2, sapling: 0.16, flint: 0.06, berry: 0.05, tree: 0.05, flower: 0.1, rabbithole: 0.03 },
+  2: { grass: 0.3, rabbithole: 0.07, sapling: 0.06, flint: 0.03, tree: 0.02, flower: 0.03 },
+  3: { berry: 0.13, flower: 0.15, grass: 0.1, sapling: 0.08, beehive: 0.02, tree: 0.05 },
+  4: { tree: 0.36, sapling: 0.06, grass: 0.04, spidernest: 0.016, flint: 0.03, flower: 0.03 },
+  5: { rock: 0.2, goldrock: 0.07, flint: 0.09, tree: 0.02 },
+  6: { reeds: 0.16, tentacle: 0.045, tree: 0.03, flint: 0.02 },
+}
+
+export function planEntities(tiles, road) {
+  const placed = [] // {type,x,y}
+  const grid = new Map() // 空间散列：瓦片 idx -> 该瓦片内放置点
+  const minDist = (x, y, type) => {
+    const tx = Math.floor(x / TILE)
+    const ty = Math.floor(y / TILE)
+    for (let oy = -1; oy <= 1; oy++) {
+      for (let ox = -1; ox <= 1; ox++) {
+        const list = grid.get((ty + oy) * GW + tx + ox)
+        if (!list) continue
+        for (const p of list) {
+          const need = p.type === type ? 30 : 26
+          if (Math.hypot(p.x - x, p.y - y) < need) return false
+        }
+      }
+    }
+    return true
+  }
+  const put = (type, x, y) => {
+    if (!isLand(tiles, x, y)) return false
+    if (!minDist(x, y, type)) return false
+    const p = { type, x, y }
+    placed.push(p)
+    const i = tileIdx(x, y)
+    if (!grid.has(i)) grid.set(i, [])
+    grid.get(i).push(p)
+    return true
+  }
+  const cx = WORLD.w / 2
+  const cy = WORLD.h / 2
+  // 1) 逐瓦片按群系密度掷点（道路上与出生点近处留空）
+  for (let ty = 0; ty < GH; ty++) {
+    for (let tx = 0; tx < GW; tx++) {
+      const i = ty * GW + tx
+      const biome = tiles[i]
+      if (!biome || road[i]) continue
+      const wx = tx * TILE
+      const wy = ty * TILE
+      if (Math.hypot(wx + 40 - cx, wy + 40 - cy) < 130) continue
+      const table = DENSITY[biome]
+      Object.entries(table).forEach(([type, p]) => {
+        if (Math.random() >= p) return
+        for (let retry = 0; retry < 4; retry++) {
+          const x = wx + 8 + Math.random() * (TILE - 16)
+          const y = wy + 8 + Math.random() * (TILE - 16)
+          if (put(type, x, y)) break
+        }
+      })
+    }
+  }
+  // 2) 出生保底物资（第一晚一定造得出火把与斧头）
+  ;[['grass', -90, -40], ['grass', 80, 60], ['grass', -30, 95], ['grass', 110, -30],
+    ['sapling', 60, -80], ['sapling', -105, 40], ['sapling', 20, 120],
+    ['flint', -60, 80], ['flint', 95, 20], ['berry', -120, -70], ['berry', 130, 90],
+    ['tree', -160, 30], ['tree', 150, -100]]
+    .forEach(([type, dx, dy]) => put(type, cx + dx, cy + dy))
+  // 3) 保证关键实体的下限数量
+  const ensure = (type, min, biomes) => {
+    let n = placed.filter((p) => p.type === type).length
+    for (let retry = 0; retry < 300 && n < min; retry++) {
+      const tx = randInt(1, GW - 2)
+      const ty = randInt(1, GH - 2)
+      const i = ty * GW + tx
+      if (!biomes.includes(tiles[i]) || road[i]) continue
+      if (put(type, tx * TILE + 20 + Math.random() * 40, ty * TILE + 20 + Math.random() * 40)) n++
+    }
+  }
+  ensure('spidernest', 2, [4])
+  ensure('beehive', 2, [3])
+  ensure('goldrock', 4, [5])
+  ensure('rabbithole', 5, [1, 2])
+  ensure('tentacle', 4, [6])
+  ensure('reeds', 6, [6])
+  // 4) 猪人村：草地/森林挑 2 处，每处 3 座猪屋围成一圈
+  const villages = []
+  for (let retry = 0; retry < 120 && villages.length < 2; retry++) {
+    const tx = randInt(2, GW - 3)
+    const ty = randInt(2, GH - 3)
+    const i = ty * GW + tx
+    if (tiles[i] !== 3 && tiles[i] !== 4) continue
+    const wx = tx * TILE + 40
+    const wy = ty * TILE + 40
+    if (Math.hypot(wx - cx, wy - cy) < 500) continue
+    if (villages.some((v) => Math.hypot(v.x - wx, v.y - wy) < 900)) continue
+    villages.push({ x: wx, y: wy })
+    for (let k = 0; k < 3; k++) {
+      const a = (k / 3) * Math.PI * 2 + 0.5
+      put('pighouse', wx + Math.cos(a) * 70, wy + Math.sin(a) * 70)
+    }
+  }
+  ensure('pighouse', 3, [3, 4]) // 村落选点/落位失败时的下限保底
+  // 5) 牛群与青蛙出生点（生物由游戏侧生成）
+  const herds = []
+  for (let retry = 0; retry < 120 && herds.length < 2; retry++) {
+    const tx = randInt(2, GW - 3)
+    const ty = randInt(2, GH - 3)
+    if (tiles[ty * GW + tx] !== 2) continue
+    const wx = tx * TILE + 40
+    const wy = ty * TILE + 40
+    if (herds.some((h) => Math.hypot(h.x - wx, h.y - wy) < 800)) continue
+    herds.push({ x: wx, y: wy })
+  }
+  const frogs = []
+  for (let retry = 0; retry < 200 && frogs.length < 8; retry++) {
+    const tx = randInt(1, GW - 2)
+    const ty = randInt(1, GH - 2)
+    if (tiles[ty * GW + tx] !== 6) continue
+    frogs.push({ x: tx * TILE + 10 + Math.random() * 60, y: ty * TILE + 10 + Math.random() * 60 })
+  }
+  return { placed, herds, frogs }
+}
+
+// 纯装饰点缀（碎石/蘑菇/草叶），按群系倾向，不可交互
+export function genDecor(tiles) {
+  const spots = []
+  for (let i = 0; i < 110; i++) {
+    const x = Math.random() * WORLD.w
+    const y = Math.random() * WORLD.h
+    const b = biomeAt(tiles, x, y)
+    if (!b) continue
+    let kind = 'tuft'
+    if (b === 4 || b === 6) kind = Math.random() < 0.55 ? 'mushroom' : 'pebble'
+    else if (b === 5) kind = 'pebble'
+    else if (Math.random() < 0.3) kind = 'pebble'
+    spots.push({ x, y, kind, hue: Math.random() })
+  }
+  return spots
+}
+
+// =====================================================================
+// turf 瓦片图集：每群系一张 80px 纹理（含冬季雪化变体）+ 道路
+// =====================================================================
+function makeTileCv(paint) {
+  const cv = document.createElement('canvas')
+  cv.width = TILE
+  cv.height = TILE
+  const c = cv.getContext('2d')
+  paint(c)
+  return cv
+}
+// 伪随机（瓦片纹理内部使用，避免每次生成不一致）
+function lcg(seed) {
+  let s = seed
+  return () => {
+    s = (s * 1664525 + 1013904223) % 4294967296
+    return s / 4294967296
+  }
+}
+export function buildTilePatterns() {
+  const pats = { norm: {}, winter: {} }
+  const speck = (c, rnd, n, colors, rMin = 2, rMax = 7) => {
+    for (let i = 0; i < n; i++) {
+      c.fillStyle = colors[Math.floor(rnd() * colors.length)]
+      c.beginPath()
+      const r = rMin + rnd() * (rMax - rMin)
+      c.ellipse(rnd() * TILE, rnd() * TILE, r, r * 0.6, rnd() * 3, 0, 7)
+      c.fill()
+    }
+  }
+  const defs = {
+    1: (c, rnd) => {
+      c.fillStyle = '#4a5d33'
+      c.fillRect(0, 0, TILE, TILE)
+      speck(c, rnd, 12, ['rgba(96,120,62,0.5)', 'rgba(58,76,40,0.6)'])
+    },
+    2: (c, rnd) => {
+      c.fillStyle = '#8a8a3e'
+      c.fillRect(0, 0, TILE, TILE)
+      speck(c, rnd, 10, ['rgba(168,163,78,0.55)', 'rgba(122,118,46,0.6)'])
+      // 干草细笔
+      c.strokeStyle = 'rgba(200,190,110,0.4)'
+      c.lineWidth = 1.4
+      for (let i = 0; i < 8; i++) {
+        const x = rnd() * TILE
+        const y = rnd() * TILE
+        c.beginPath()
+        c.moveTo(x, y)
+        c.lineTo(x + 2 - rnd() * 4, y - 5 - rnd() * 4)
+        c.stroke()
+      }
+    },
+    3: (c, rnd) => {
+      c.fillStyle = '#55703a'
+      c.fillRect(0, 0, TILE, TILE)
+      speck(c, rnd, 12, ['rgba(120,150,80,0.5)', 'rgba(70,95,48,0.6)'])
+    },
+    4: (c, rnd) => {
+      c.fillStyle = '#33492c'
+      c.fillRect(0, 0, TILE, TILE)
+      speck(c, rnd, 13, ['rgba(38,62,34,0.65)', 'rgba(60,86,48,0.5)'])
+    },
+    5: (c, rnd) => {
+      c.fillStyle = '#6e6a5e'
+      c.fillRect(0, 0, TILE, TILE)
+      speck(c, rnd, 10, ['rgba(130,126,112,0.55)', 'rgba(90,86,76,0.6)'])
+      // 石纹裂缝
+      c.strokeStyle = 'rgba(60,56,50,0.5)'
+      c.lineWidth = 1.2
+      for (let i = 0; i < 4; i++) {
+        const x = rnd() * TILE
+        const y = rnd() * TILE
+        c.beginPath()
+        c.moveTo(x, y)
+        c.lineTo(x + 8 + rnd() * 10, y + 4 - rnd() * 8)
+        c.stroke()
+      }
+    },
+    6: (c, rnd) => {
+      c.fillStyle = '#3d4438'
+      c.fillRect(0, 0, TILE, TILE)
+      speck(c, rnd, 12, ['rgba(76,86,70,0.6)', 'rgba(44,50,40,0.7)'])
+      // 泥水洼
+      c.fillStyle = 'rgba(52,64,66,0.55)'
+      for (let i = 0; i < 3; i++) {
+        c.beginPath()
+        c.ellipse(rnd() * TILE, rnd() * TILE, 6 + rnd() * 8, 3 + rnd() * 4, 0, 0, 7)
+        c.fill()
+      }
+    },
+  }
+  Object.entries(defs).forEach(([id, paint]) => {
+    pats.norm[id] = makeTileCv((c) => paint(c, lcg(+id * 977)))
+    // 冬季变体：同底纹 + 雪覆盖
+    pats.winter[id] = makeTileCv((c) => {
+      paint(c, lcg(+id * 977))
+      c.fillStyle = 'rgba(224,232,240,0.55)'
+      c.fillRect(0, 0, TILE, TILE)
+      const rnd = lcg(+id * 1237)
+      c.fillStyle = 'rgba(244,250,255,0.7)'
+      for (let i = 0; i < 10; i++) {
+        c.beginPath()
+        c.ellipse(rnd() * TILE, rnd() * TILE, 4 + rnd() * 8, 2.5 + rnd() * 5, 0, 0, 7)
+        c.fill()
+      }
+    })
+  })
+  // 道路（叠加在陆地之上，半透明泥土带碎石）
+  pats.road = makeTileCv((c) => {
+    const rnd = lcg(4242)
+    c.fillStyle = 'rgba(146,120,84,0.85)'
+    c.fillRect(0, 0, TILE, TILE)
+    c.fillStyle = 'rgba(110,90,62,0.8)'
+    for (let i = 0; i < 8; i++) {
+      c.beginPath()
+      c.ellipse(rnd() * TILE, rnd() * TILE, 3 + rnd() * 5, 2 + rnd() * 3, 0, 0, 7)
+      c.fill()
+    }
+    c.fillStyle = 'rgba(180,158,120,0.6)'
+    for (let i = 0; i < 6; i++) {
+      c.beginPath()
+      c.arc(rnd() * TILE, rnd() * TILE, 1.5 + rnd() * 2, 0, 7)
+      c.fill()
+    }
+  })
+  return pats
+}
+
+// 绘制可视范围内的地面瓦片（海洋底色 + 陆地 turf + 道路 + 岸线 + 近岸波浪）
+export function drawTiles(ctx, tiles, road, pats, camX, camY, W, H, time, winter) {
+  ctx.fillStyle = winter ? '#26404e' : '#20404c'
+  ctx.fillRect(0, 0, W, H)
+  const set = winter ? pats.winter : pats.norm
+  const tx0 = Math.max(0, Math.floor(camX / TILE))
+  const ty0 = Math.max(0, Math.floor(camY / TILE))
+  const tx1 = Math.min(GW - 1, Math.floor((camX + W) / TILE))
+  const ty1 = Math.min(GH - 1, Math.floor((camY + H) / TILE))
+  for (let ty = ty0; ty <= ty1; ty++) {
+    for (let tx = tx0; tx <= tx1; tx++) {
+      const i = ty * GW + tx
+      const b = tiles[i]
+      const sx = tx * TILE - camX
+      const sy = ty * TILE - camY
+      if (!b) {
+        // 近岸波浪：与陆地相邻的海洋瓦片画一两道流动弧线
+        const nearLand =
+          (tx > 0 && tiles[i - 1]) || (tx < GW - 1 && tiles[i + 1]) ||
+          (ty > 0 && tiles[i - GW]) || (ty < GH - 1 && tiles[i + GW])
+        if (nearLand) {
+          const wob = Math.sin(time * 1.4 + tx * 1.7 + ty * 2.3)
+          ctx.strokeStyle = 'rgba(190,220,230,0.35)'
+          ctx.lineWidth = 2
+          ctx.beginPath()
+          ctx.arc(sx + 24 + wob * 5, sy + 30, 9, Math.PI * 0.15, Math.PI * 0.85)
+          ctx.stroke()
+          if (wob > 0.2) {
+            ctx.beginPath()
+            ctx.arc(sx + 55 - wob * 4, sy + 58, 7, Math.PI * 0.15, Math.PI * 0.85)
+            ctx.stroke()
+          }
+        }
+        continue
+      }
+      ctx.drawImage(set[b] || set[1], sx, sy)
+      if (road[i]) {
+        ctx.globalAlpha = 0.9
+        ctx.drawImage(pats.road, sx, sy)
+        ctx.globalAlpha = 1
+      }
+      // 岸线：陆地瓦片贴海一侧描沙边
+      ctx.fillStyle = winter ? 'rgba(226,234,240,0.9)' : 'rgba(196,178,128,0.9)'
+      if (tx > 0 && !tiles[i - 1]) ctx.fillRect(sx, sy, 4, TILE)
+      if (tx < GW - 1 && !tiles[i + 1]) ctx.fillRect(sx + TILE - 4, sy, 4, TILE)
+      if (ty > 0 && !tiles[i - GW]) ctx.fillRect(sx, sy, TILE, 4)
+      if (ty < GH - 1 && !tiles[i + GW]) ctx.fillRect(sx, sy, TILE, 4)
+    }
+  }
+}
diff --git a/src/games/starveSkins.js b/src/games/starveSkins.js
new file mode 100644
index 0000000..12e87f4
--- /dev/null
+++ b/src/games/starveSkins.js
@@ -0,0 +1,328 @@
+// 饥荒人物皮肤模块：30 款皮肤绘制参数 + 通用人物矢量绘制 + 离屏立绘预览
+// code 与后端 game_skins 种子数据一一对应；StarveGame（本人/队友）与 GamePlay 更衣室共用
+//   hair: spiky=尖刺 flat=平刘海 long=披肩长发 curly=蓬卷 crown=短发+金冠
+export const SKINS = [
+  { code: 'wilson', name: '经典威尔逊', hair: 'spiky', hairColor: '#15100c', skinTone: '#f3dfc2', vestColor: '#a33d3d', shirtColor: '#e8e2d4' },
+  { code: 'willow', name: '篝火少女', hair: 'long', hairColor: '#8a2f22', skinTone: '#f3dfc2', vestColor: '#43506e', shirtColor: '#dfd8c6' },
+  { code: 'wendy', name: '暮色少女', hair: 'long', hairColor: '#e8d8a8', skinTone: '#f0e4d0', vestColor: '#3d3a52', shirtColor: '#d8d4e2' },
+  { code: 'flame', name: '火焰行者', hair: 'spiky', hairColor: '#d8501e', skinTone: '#f3dfc2', vestColor: '#e0662a', shirtColor: '#f4e3c2' },
+  { code: 'ocean', name: '海风水手', hair: 'flat', hairColor: '#2a3648', skinTone: '#f0dcc0', vestColor: '#2f6d8e', shirtColor: '#dfe8ea' },
+  { code: 'forest', name: '密林猎手', hair: 'curly', hairColor: '#3f2c18', skinTone: '#e8ceac', vestColor: '#3f6b35', shirtColor: '#d8e0c2' },
+  { code: 'honey', name: '蜜糖甜心', hair: 'curly', hairColor: '#c98a2e', skinTone: '#f6e6cc', vestColor: '#d8a437', shirtColor: '#f4ead0' },
+  { code: 'dusk', name: '暮紫魔术师', hair: 'flat', hairColor: '#3a2a52', skinTone: '#ecd8c4', vestColor: '#6a4a9e', shirtColor: '#d8cce8' },
+  { code: 'mint', name: '薄荷学者', hair: 'flat', hairColor: '#3f5548', skinTone: '#f3dfc2', vestColor: '#57a486', shirtColor: '#e6f4ec' },
+  { code: 'ash', name: '灰烬流浪者', hair: 'spiky', hairColor: '#6a6a72', skinTone: '#e4d2bc', vestColor: '#7a7a84', shirtColor: '#d8d8dc' },
+  { code: 'sky', name: '晴空飞行员', hair: 'flat', hairColor: '#4a668c', skinTone: '#f0dcc0', vestColor: '#7fa8d8', shirtColor: '#f0f4fa' },
+  { code: 'rose', name: '蔷薇淑女', hair: 'long', hairColor: '#7e3348', skinTone: '#f6e2d0', vestColor: '#c96a8a', shirtColor: '#f4dce4' },
+  { code: 'ember', name: '余烬铁匠', hair: 'spiky', hairColor: '#4a2118', skinTone: '#dcb890', vestColor: '#a84020', shirtColor: '#e2c9a8' },
+  { code: 'sand', name: '沙丘旅人', hair: 'curly', hairColor: '#a8854e', skinTone: '#e0c09a', vestColor: '#c9a86a', shirtColor: '#f2e8d2' },
+  { code: 'moss', name: '苔原德鲁伊', hair: 'curly', hairColor: '#4c5a2c', skinTone: '#e8d4b4', vestColor: '#6a7a3d', shirtColor: '#dce2c4' },
+  { code: 'plum', name: '梅子贵妇', hair: 'long', hairColor: '#52284a', skinTone: '#f0dcc8', vestColor: '#8a4a7e', shirtColor: '#e8d4e4' },
+  { code: 'rust', name: '铁锈机械师', hair: 'flat', hairColor: '#6a3520', skinTone: '#e4c4a0', vestColor: '#a05a2a', shirtColor: '#d8c2a8' },
+  { code: 'navy', name: '藏青卫士', hair: 'flat', hairColor: '#1e2a44', skinTone: '#ecd4b8', vestColor: '#2c3e68', shirtColor: '#c9d2e4' },
+  { code: 'blizzard', name: '暴雪求生者', hair: 'spiky', hairColor: '#dfe6f0', skinTone: '#f6ece0', vestColor: '#a8bcd0', shirtColor: '#f4f8fc' },
+  { code: 'crow', name: '乌鸦信使', hair: 'long', hairColor: '#14121c', skinTone: '#e8d8c8', vestColor: '#2a2534', shirtColor: '#a8a2b4' },
+  { code: 'lava', name: '熔岩勇士', hair: 'spiky', hairColor: '#6e1408', skinTone: '#e0b898', vestColor: '#c93a10', shirtColor: '#f2b03c' },
+  { code: 'glacier', name: '冰川猎人', hair: 'flat', hairColor: '#b8d8e8', skinTone: '#f0e8dc', vestColor: '#7fb8d8', shirtColor: '#eef8fc' },
+  { code: 'swamp', name: '沼泽行者', hair: 'curly', hairColor: '#2c3a20', skinTone: '#d8c4a0', vestColor: '#4a5c2e', shirtColor: '#a8b088' },
+  { code: 'sunset', name: '落日吟游者', hair: 'long', hairColor: '#c95a2e', skinTone: '#f2dcc0', vestColor: '#e8823c', shirtColor: '#f8d8a8' },
+  { code: 'thorn', name: '荆棘骑士', hair: 'spiky', hairColor: '#2a3318', skinTone: '#e8d0ac', vestColor: '#54682c', shirtColor: '#c9d0a8' },
+  { code: 'shadow', name: '暗影刺客', hair: 'spiky', hairColor: '#0c0a12', skinTone: '#d8c8c0', vestColor: '#1e1828', shirtColor: '#3a3448' },
+  { code: 'gold', name: '鎏金贵族', hair: 'curly', hairColor: '#c9a11e', skinTone: '#f4e4c8', vestColor: '#e0b83a', shirtColor: '#f8ecc2' },
+  { code: 'blood', name: '血月狂战士', hair: 'long', hairColor: '#3a0a0e', skinTone: '#e0c0a8', vestColor: '#8e1c24', shirtColor: '#d8a8a0' },
+  { code: 'void', name: '极夜术士', hair: 'flat', hairColor: '#08060e', skinTone: '#d0c4c8', vestColor: '#141020', shirtColor: '#2e2840' },
+  { code: 'king', name: '饥荒之王', hair: 'crown', hairColor: '#2a1c10', skinTone: '#f0dcc0', vestColor: '#8e2c3a', shirtColor: '#f2e0b8' },
+]
+
+export function skinByCode(code) {
+  return SKINS.find((s) => s.code === code) || SKINS[0]
+}
+
+// 通用描边填充
+function fs(c, fill, stroke = '#1d1409', lw = 2) {
+  if (fill) { c.fillStyle = fill; c.fill() }
+  if (stroke) { c.strokeStyle = stroke; c.lineWidth = lw; c.stroke() }
+}
+
+// 发型绘制（以头心 (0, headY) 为基准，头半径 8.4）
+function drawHair(c, skin, headY) {
+  c.fillStyle = skin.hairColor
+  if (skin.hair === 'spiky') {
+    // 威尔逊式尖刺
+    c.beginPath()
+    c.moveTo(-8, headY - 2)
+    c.lineTo(-9, headY - 12)
+    c.lineTo(-4.5, headY - 6.5)
+    c.lineTo(-3, headY - 15)
+    c.lineTo(1, headY - 7)
+    c.lineTo(4, headY - 13)
+    c.lineTo(6.5, headY - 5.5)
+    c.lineTo(8.4, headY - 1)
+    c.quadraticCurveTo(4, headY - 7.5, -8, headY - 2)
+    c.closePath()
+    c.fill()
+  } else if (skin.hair === 'flat') {
+    // 平刘海盖头
+    c.beginPath()
+    c.arc(0, headY - 1.5, 8.6, Math.PI, 0)
+    c.quadraticCurveTo(8, headY - 6, 5, headY - 5.5)
+    c.lineTo(-5, headY - 5.5)
+    c.quadraticCurveTo(-8, headY - 6, -8.6, headY - 1.5)
+    c.closePath()
+    c.fill()
+    c.strokeStyle = '#1d1409'
+    c.lineWidth = 1.2
+    c.beginPath()
+    c.arc(0, headY - 1.5, 8.6, Math.PI * 1.05, -Math.PI * 0.05)
+    c.stroke()
+  } else if (skin.hair === 'long') {
+    // 披肩长发：顶盖 + 两侧垂发
+    c.beginPath()
+    c.arc(0, headY - 2, 8.8, Math.PI, 0)
+    c.closePath()
+    c.fill()
+    c.beginPath()
+    c.moveTo(-8.6, headY - 2)
+    c.quadraticCurveTo(-10.5, headY + 8, -8, headY + 15)
+    c.lineTo(-4.5, headY + 13)
+    c.quadraticCurveTo(-7, headY + 5, -6.4, headY - 1)
+    c.closePath()
+    c.fill()
+    c.beginPath()
+    c.moveTo(8.6, headY - 2)
+    c.quadraticCurveTo(10.5, headY + 8, 8, headY + 15)
+    c.lineTo(4.5, headY + 13)
+    c.quadraticCurveTo(7, headY + 5, 6.4, headY - 1)
+    c.closePath()
+    c.fill()
+  } else if (skin.hair === 'curly') {
+    // 蓬卷：一圈圆团
+    ;[[-6, headY - 6, 4.4], [0, headY - 9, 5], [6, headY - 6, 4.4], [-3, headY - 8.5, 4], [3, headY - 8.5, 4]].forEach(([hx, hy, r]) => {
+      c.beginPath()
+      c.arc(hx, hy, r, 0, 7)
+      c.fill()
+    })
+  } else if (skin.hair === 'crown') {
+    // 短发 + 小金冠
+    c.beginPath()
+    c.arc(0, headY - 2.5, 8.5, Math.PI * 1.05, -Math.PI * 0.05)
+    c.quadraticCurveTo(0, headY - 7, -8.2, headY - 3.6)
+    c.closePath()
+    c.fill()
+    c.beginPath()
+    c.moveTo(-5.5, headY - 9)
+    c.lineTo(-5.5, headY - 14)
+    c.lineTo(-2.8, headY - 10.5)
+    c.lineTo(0, headY - 15.5)
+    c.lineTo(2.8, headY - 10.5)
+    c.lineTo(5.5, headY - 14)
+    c.lineTo(5.5, headY - 9)
+    c.closePath()
+    fs(c, '#e8c14d', '#8e6a14', 1.4)
+  }
+}
+
+// 手持工具（在前臂末端坐标系内绘制）
+function drawTool(c, toolCode) {
+  if (!toolCode) return
+  c.save()
+  c.translate(0, 11)
+  c.rotate(-0.5)
+  if (toolCode === 'shovel') {
+    c.strokeStyle = '#7a5b33'
+    c.lineWidth = 3
+    c.beginPath(); c.moveTo(0, 4); c.lineTo(0, -14); c.stroke()
+    c.beginPath()
+    c.moveTo(-4, -14)
+    c.quadraticCurveTo(0, -24, 4, -14)
+    c.closePath()
+    fs(c, '#9aa0a8', '#1d1409', 1.4)
+  } else if (toolCode === 'tentaclespike') {
+    c.strokeStyle = '#6b4a7e'
+    c.lineWidth = 3.4
+    c.beginPath(); c.moveTo(0, 6); c.quadraticCurveTo(2, -8, 0, -20); c.stroke()
+    c.fillStyle = '#e8e2d4'
+    ;[[0, -8], [1, -14]].forEach(([x, y]) => {
+      c.beginPath(); c.moveTo(x, y); c.lineTo(x + 4, y - 1); c.lineTo(x + 1, y - 4); c.closePath(); c.fill()
+    })
+  } else if (toolCode === 'torch') {
+    c.strokeStyle = '#7a5b33'
+    c.lineWidth = 3
+    c.beginPath(); c.moveTo(0, 4); c.lineTo(0, -12); c.stroke()
+    c.beginPath()
+    c.moveTo(0, -20)
+    c.quadraticCurveTo(5, -13, 0, -10)
+    c.quadraticCurveTo(-5, -13, 0, -20)
+    fs(c, '#f0923c', '#b5541e', 1.2)
+  } else if (toolCode === 'axe') {
+    c.strokeStyle = '#7a5b33'
+    c.lineWidth = 3
+    c.beginPath(); c.moveTo(0, 4); c.lineTo(0, -13); c.stroke()
+    c.beginPath()
+    c.moveTo(0, -13); c.lineTo(8, -10); c.lineTo(7, -4); c.lineTo(0, -7)
+    c.closePath()
+    fs(c, '#9aa0a8', '#1d1409', 1.4)
+  } else if (toolCode === 'pick') {
+    c.strokeStyle = '#7a5b33'
+    c.lineWidth = 3
+    c.beginPath(); c.moveTo(0, 4); c.lineTo(0, -13); c.stroke()
+    c.beginPath()
+    c.moveTo(-7, -12)
+    c.quadraticCurveTo(0, -19, 7, -12)
+    c.quadraticCurveTo(0, -15, -7, -12)
+    fs(c, '#9aa0a8', '#1d1409', 1.4)
+  } else if (toolCode === 'spear') {
+    c.strokeStyle = '#7a5b33'
+    c.lineWidth = 2.8
+    c.beginPath(); c.moveTo(0, 8); c.lineTo(0, -16); c.stroke()
+    c.beginPath()
+    c.moveTo(-2.6, -15); c.lineTo(0, -23); c.lineTo(2.6, -15)
+    c.closePath()
+    fs(c, '#b0b4bc', '#1d1409', 1.4)
+  }
+  c.restore()
+}
+
+// 通用人物绘制：以脚底 (0,0) 为原点，头顶约 -32px
+// pose = { dir, walking, walkT, swing, breathe, toolCode, ghost, time, act, fall }
+//   act: 动作分化（chop 横劈 / mine 上凿下砸 / dig 下铲 / attack 突刺 / eat 抬手进食），swing 1→0 驱动
+//   fall: 死亡倒地进度 0→1（倒完后由调用方切换为幽灵形态）
+export function drawPlayerFig(c, skin, pose = {}) {
+  const { dir = 1, walking = false, walkT = 0, swing = 0, breathe = 0, toolCode = '', ghost = false, time = 0, act = '', fall = 0 } = pose
+  c.save()
+  c.scale(dir, 1)
+  c.lineJoin = 'round'
+  c.lineCap = 'round'
+  if (!ghost && fall > 0) {
+    // 死亡倒地：绕脚底向后倒 + 渐隐
+    c.rotate(fall * 1.4)
+    c.globalAlpha = 1 - fall * 0.35
+  }
+  if (ghost) {
+    // 幽灵形态：半透明白影摇曳 + 黑点眼（复刻原版幽灵）
+    const wob = Math.sin(time * 2.4) * 1.6
+    c.globalAlpha = 0.55
+    c.beginPath()
+    c.moveTo(0, -30)
+    c.bezierCurveTo(12, -28, 13, -10, 10 + wob, 2)
+    c.quadraticCurveTo(6, 8, 2, 3)
+    c.quadraticCurveTo(0, 8, -2, 3)
+    c.quadraticCurveTo(-6, 8, -10 - wob, 2)
+    c.bezierCurveTo(-13, -10, -12, -28, 0, -30)
+    fs(c, '#e9ecf4', 'rgba(120,130,160,0.8)', 1.6)
+    c.fillStyle = '#2a2a3a'
+    c.beginPath()
+    c.arc(-3.4, -20, 1.6, 0, 7)
+    c.arc(3.4, -20, 1.6, 0, 7)
+    c.fill()
+    c.globalAlpha = 1
+    c.restore()
+    return
+  }
+  const walkSwing = walking ? Math.sin(walkT * 11) : 0
+  // 腿（深灰裤）
+  c.strokeStyle = '#2b2b33'
+  c.lineWidth = 4.4
+  c.beginPath()
+  c.moveTo(-3, 2)
+  c.lineTo(-3 + walkSwing * 4.5, 15)
+  c.moveTo(3, 2)
+  c.lineTo(3 - walkSwing * 4.5, 15)
+  c.stroke()
+  // 鞋
+  c.fillStyle = '#1d1409'
+  c.beginPath()
+  c.ellipse(-3 + walkSwing * 4.5, 16, 3.4, 2, 0, 0, 7)
+  c.ellipse(3 - walkSwing * 4.5, 16, 3.4, 2, 0, 0, 7)
+  c.fill()
+  // 身体：衬衫 + 两片马甲
+  c.beginPath()
+  c.moveTo(-6, -14 + breathe)
+  c.lineTo(6, -14 + breathe)
+  c.lineTo(7, 4)
+  c.lineTo(-7, 4)
+  c.closePath()
+  fs(c, skin.shirtColor, '#1d1409', 1.8)
+  c.beginPath()
+  c.moveTo(-6.6, -14 + breathe)
+  c.lineTo(-2, -13 + breathe)
+  c.lineTo(-2.6, 4)
+  c.lineTo(-7, 4)
+  c.closePath()
+  fs(c, skin.vestColor, '#1d1409', 1.6)
+  c.beginPath()
+  c.moveTo(6.6, -14 + breathe)
+  c.lineTo(2, -13 + breathe)
+  c.lineTo(2.6, 4)
+  c.lineTo(7, 4)
+  c.closePath()
+  fs(c, skin.vestColor, '#1d1409', 1.6)
+  // 后臂（随走路摆）
+  c.strokeStyle = skin.shirtColor
+  c.lineWidth = 3.6
+  c.beginPath()
+  c.moveTo(-5, -11 + breathe)
+  c.lineTo(-7 - walkSwing * 3, -1 + Math.abs(walkSwing))
+  c.stroke()
+  // 头
+  const headY = -22 + breathe
+  c.beginPath()
+  c.arc(0, headY, 8.4, 0, 7)
+  fs(c, skin.skinTone, '#1d1409', 1.8)
+  // 发型
+  drawHair(c, skin, headY)
+  // 眼睛（竖点）+ 嘴
+  c.strokeStyle = '#1d1409'
+  c.lineWidth = 1.8
+  c.beginPath()
+  c.moveTo(2.4, headY - 2)
+  c.lineTo(2.4, headY + 0.6)
+  c.moveTo(6.4, headY - 2)
+  c.lineTo(6.4, headY + 0.6)
+  c.stroke()
+  c.lineWidth = 1.4
+  c.beginPath()
+  c.arc(4.6, headY + 3.4, 2, 0.3, Math.PI - 0.5)
+  c.stroke()
+  // 前臂 + 手持工具：挥击动作由 swing(1→0) 驱动，act 决定挥法
+  let swingAng = -0.35 + walkSwing * 0.32
+  let thrust = 0
+  if (swing > 0) {
+    const t = 1 - swing
+    if (act === 'mine' || act === 'dig') swingAng = -2.7 + t * 3.2 // 高举下砸/下铲
+    else if (act === 'attack') { swingAng = -1.05; thrust = Math.sin(t * Math.PI) * 8 } // 平持突刺
+    else if (act === 'eat') swingAng = -0.4 - Math.sin(t * Math.PI) * 1.95 // 抬手到嘴边
+    else swingAng = -2.1 + t * 2.7 // 砍树/通用横劈
+  }
+  c.save()
+  c.translate(5 + thrust, -11 + breathe)
+  c.rotate(swingAng)
+  c.strokeStyle = skin.shirtColor
+  c.lineWidth = 3.6
+  c.beginPath()
+  c.moveTo(0, 0)
+  c.lineTo(0, 11)
+  c.stroke()
+  drawTool(c, toolCode)
+  c.restore()
+  c.restore()
+}
+
+// 离屏渲染 72px 立绘 dataURL（更衣室/房间座位预览用，带缓存）
+const previewCache = {}
+export function renderSkinPreview(code, size = 72) {
+  const key = code + '@' + size
+  if (previewCache[key]) return previewCache[key]
+  const skin = skinByCode(code)
+  const cv = document.createElement('canvas')
+  cv.width = size
+  cv.height = size
+  const c = cv.getContext('2d')
+  c.translate(size / 2, size * 0.86)
+  const scale = size / 52
+  c.scale(scale, scale)
+  drawPlayerFig(c, skin, { dir: 1 })
+  const url = cv.toDataURL()
+  previewCache[key] = url
+  return url
+}
diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue
deleted file mode 100644
index 5dfaf00..0000000
--- a/src/layouts/Header.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  <header class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-4 px-6 flex items-center justify-between">
-    <div class="flex items-center space-x-4">
-      <!-- Logo -->
-      <img src="https://via.placeholder.com/40" alt="Logo" class="h-8 w-8 rounded-full">
-      <span class="font-bold">My App</span>
-    </div>
-
-    <!-- Menu -->
-    <nav class="hidden md:flex space-x-4">
-      <a href="#" class="hover:text-gray-300">首页</a>
-      <a href="#" class="hover:text-gray-300">About</a>
-      <a href="#" class="hover:text-gray-300">Services</a>
-      <a href="#" class="hover:text-gray-300">Contact</a>
-    </nav>
-
-    <!-- User Profile -->
-    <div class="flex items-center space-x-4">
-      <button class="text-sm bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
-        Personal Center
-      </button>
-      <img src="https://via.placeholder.com/40" alt="User Avatar" class="h-8 w-8 rounded-full cursor-pointer">
-    </div>
-  </header>
-</template>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/src/main.js b/src/main.js
index 4f9904b..c89ef7c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,17 +1,20 @@
+// 前端入口：挂载 Pinia、路由与全局样式，启动前先拉取站点配置（主题）
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import Antd from 'ant-design-vue'
-import './style.css'
 import App from './App.vue'
-import '@fortawesome/fontawesome-free/css/all.css' // 引入所有样式
-// 注册路由
 import router from './router'
+import { useThemeStore } from './stores/theme'
+// 主题专用字体：像素字（街机主题）与终端字（掌机/赛博主题），本地打包无需外网
+import '@fontsource/press-start-2p'
+import '@fontsource/vt323'
+import './styles/base.css'
+import './styles/themes.css'
 
 const app = createApp(App)
-
-
-// 注册Ant Design组件
 app.use(createPinia())
 app.use(router)
-app.use(Antd)
-app.mount('#app')
+// 先应用主题再挂载，避免首屏闪烁默认色
+const themeStore = useThemeStore()
+themeStore.fetchConfig().finally(() => {
+  app.mount('#app')
+})
diff --git a/src/router/index.js b/src/router/index.js
index 796771d..5bd704d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,38 +1,64 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import { useUserStore } from '@/stores/user'
-import MainLayout from '@/layouts/Header.vue'
+// 路由定义：登录页外全部需要登录，后台路由需要超管角色
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
 
-// 在路由配置中添加个人中心路由
 const routes = [
+  { path: '/login', name: 'login', component: () => import('../views/Login.vue'), meta: { bare: true } },
+  { path: '/', name: 'lobby', component: () => import('../views/Lobby.vue') },
+  { path: '/center', name: 'center', component: () => import('../views/GameCenter.vue') },
+  { path: '/signin', name: 'signin', component: () => import('../views/SignIn.vue') },
+  { path: '/vip', name: 'vip', component: () => import('../views/Vip.vue') },
+  { path: '/rank', name: 'rank', component: () => import('../views/Rank.vue') },
+  { path: '/profile', name: 'profile', component: () => import('../views/Profile.vue') },
+  { path: '/play/:code', name: 'play', component: () => import('../views/GamePlay.vue') },
+  { path: '/battle', name: 'battle', component: () => import('../views/Battle.vue') },
+  { path: '/battle/room', name: 'battleRoom', component: () => import('../views/BattleRoom.vue') },
+  { path: '/chat', name: 'chat', component: () => import('../views/Chat.vue') },
   {
-    path: '/',
-    component: MainLayout,
+    path: '/admin',
+    component: () => import('../views/admin/AdminLayout.vue'),
+    meta: { admin: true },
     children: [
-      { path: '', name: 'Home', component: () => import('@/views/index/index.vue') },
-    ]
+      { path: '', name: 'adminDashboard', component: () => import('../views/admin/AdminDashboard.vue') },
+      { path: 'themes', name: 'adminThemes', component: () => import('../views/admin/AdminThemes.vue') },
+      { path: 'users', name: 'adminUsers', component: () => import('../views/admin/AdminUsers.vue') },
+      { path: 'games', name: 'adminGames', component: () => import('../views/admin/AdminGames.vue') },
+      { path: 'orders', name: 'adminOrders', component: () => import('../views/admin/AdminOrders.vue') },
+      { path: 'vip', name: 'adminVip', component: () => import('../views/admin/AdminVip.vue') },
+      { path: 'ai', name: 'adminAI', component: () => import('../views/admin/AdminAI.vue') },
+      { path: 'version', name: 'adminVersion', component: () => import('../views/admin/AdminVersion.vue') },
+    ],
   },
+  { path: '/:pathMatch(.*)*', redirect: '/' },
 ]
 
 const router = createRouter({
-  history: createWebHistory(),
+  // Electron 桌面端以 file:// 加载，history 模式无法工作，改用 hash 模式；浏览器保持 history
+  history: window.desktop ? createWebHashHistory() : createWebHistory(),
   routes,
-  scrollBehavior(to, from, savedPosition) {
-    return savedPosition || { top: 0 }
+})
+
+// 全局守卫：未登录跳登录页，非超管禁入后台
+router.beforeEach((to, from) => {
+  const token = localStorage.getItem('token')
+  if (!token && !to.meta.bare) return { name: 'login' }
+  if (token && to.name === 'login') return { name: 'lobby' }
+  if (to.matched.some((r) => r.meta.admin)) {
+    const user = JSON.parse(localStorage.getItem('user') || 'null')
+    if (user?.role !== 1) return { name: 'lobby' }
+    // 后台菜单记忆：从站外进入后台根路径时，自动回到上次停留的后台页面
+    // （在后台内部点「数据概览」不触发，保证概览页仍可正常访问）
+    const lastPath = localStorage.getItem('admin_last_path')
+    if (to.path === '/admin' && !from.path.startsWith('/admin') && lastPath && lastPath !== '/admin') {
+      return lastPath
+    }
   }
 })
 
-router.beforeEach((to, from) => {
-  const userStore = useUserStore()
-  if (to.meta.requiresAuth && !userStore.user) {
-    return { name: 'Login', query: { redirect: to.fullPath } }
+// 记录最后停留的后台页面（刷新/下次进入后台时恢复）
+router.afterEach((to) => {
+  if (to.path.startsWith('/admin')) {
+    localStorage.setItem('admin_last_path', to.path)
   }
 })
 
 export default router
-
-router.beforeEach((to, from) => {
-  const userStore = useUserStore()
-  if (to.meta.requiresAuth && !userStore.user) {
-    return { name: 'Login', query: { redirect: to.fullPath } }
-  }
-})
diff --git a/src/stores/battle.js b/src/stores/battle.js
new file mode 100644
index 0000000..0c1a6ef
--- /dev/null
+++ b/src/stores/battle.js
@@ -0,0 +1,174 @@
+// 对战 Store：管理 WebSocket 连接、房间状态、聊天记录与结算信息
+// 该连接同时承载私聊/好友的实时推送（转发给 chat store 处理）
+import { defineStore } from 'pinia'
+import { toast } from '../api/http'
+import { useChatStore } from './chat'
+
+export const useBattleStore = defineStore('battle', {
+  state: () => ({
+    ws: null,          // WebSocket 实例
+    connected: false,  // 连接状态
+    roomState: null,   // 服务端下发的房间状态快照（个人视角）
+    chatLog: [],       // 聊天与系统消息列表
+    battleEnd: null,   // 最近一次结算信息（弹窗展示）
+    closedReason: '',  // 房间被解散的原因
+    pingTimer: null,   // 应用层心跳定时器
+    billAnims: [],     // 台球回放动画队列（服务端每杆推送，组件依次播放）
+    ddzHint: null,     // 斗地主出牌提示结果 {cards|suggest_pass|none, t}
+    chessHints: null,  // 象棋走法提示 {from_r, from_c, targets:[{r,c,capture}]}
+    pendingInvite: null, // 收到的好友房间邀请 {code,game,game_name,host_id,host_name,host_avatar,t}
+  }),
+  getters: {
+    // 是否已在房间内
+    inRoom: (s) => !!s.roomState,
+    // 我的座位号
+    mySeat: (s) => s.roomState?.my_seat ?? -1,
+  },
+  actions: {
+    // 建立连接（带 JWT），断线自动提示；返回 Promise 在连接成功后 resolve
+    connect() {
+      if (this.ws && (this.ws.readyState === 0 || this.ws.readyState === 1)) {
+        return Promise.resolve()
+      }
+      const token = localStorage.getItem('token')
+      // WS 地址：桌面端从配置的服务器地址推导（file:// 下 location.host 为空），浏览器走同源
+      let host = location.host
+      let proto = location.protocol === 'https:' ? 'wss' : 'ws'
+      const base = window.desktop?.serverBase
+      if (base) {
+        const u = new URL(base)
+        host = u.host
+        proto = u.protocol === 'https:' ? 'wss' : 'ws'
+      }
+      const url = `${proto}://${host}/ws?token=${encodeURIComponent(token)}`
+      return new Promise((resolve, reject) => {
+        const ws = new WebSocket(url)
+        this.ws = ws
+        ws.onopen = () => {
+          this.connected = true
+          // 应用层心跳：30 秒一次防止代理断连
+          this.pingTimer = setInterval(() => this.send('ping', {}), 30000)
+          resolve()
+        }
+        ws.onmessage = (ev) => this.handleMessage(JSON.parse(ev.data))
+        ws.onclose = () => {
+          this.connected = false
+          clearInterval(this.pingTimer)
+        }
+        ws.onerror = () => {
+          reject(new Error('连接失败'))
+        }
+      })
+    },
+    // 处理服务端消息
+    handleMessage(msg) {
+      const { type, data } = msg
+      switch (type) {
+        case 'room_state':
+          this.roomState = data
+          break
+        case 'chat':
+          this.chatLog.push(data)
+          // 聊天记录只保留最近 100 条
+          if (this.chatLog.length > 100) this.chatLog.shift()
+          break
+        case 'battle_end':
+          this.battleEnd = data
+          break
+        case 'bill_anim':
+          // 台球击球回放：入队，由台球组件按顺序消费播放
+          this.billAnims.push(data)
+          break
+        case 'ddz_hint':
+          // 斗地主提示：带时间戳保证连续两次相同结果也能触发侦听
+          this.ddzHint = { ...data, t: Date.now() }
+          break
+        case 'chess_hints':
+          // 象棋走法提示：选中棋子的全部合法落点
+          this.chessHints = data
+          break
+        case 'room_closed':
+          this.closedReason = data.reason || '房间已解散'
+          this.roomState = null
+          toast(this.closedReason, 'info')
+          break
+        case 'chat_msg':
+          // 私聊消息：交给聊天 store（未读数/会话/弹提示）
+          useChatStore().onIncoming(data)
+          break
+        case 'friend_event':
+          // 好友申请/通过事件
+          useChatStore().onFriendEvent(data)
+          break
+        case 'room_invite':
+          // 好友房间邀请：带时间戳触发全局弹窗（GamePlay/BattleRoom 之外任何页面都能收到）
+          this.pendingInvite = { ...data, t: Date.now() }
+          break
+        case 'error':
+          toast(data.msg || '操作失败')
+          break
+      }
+    },
+    // 发送消息（统一信封格式）
+    send(type, data = {}) {
+      if (this.ws?.readyState === 1) {
+        this.ws.send(JSON.stringify({ type, data }))
+      }
+    },
+    // ---- 房间操作 ----
+    createRoom(opts) { this.send('create_room', opts) },
+    joinRoom(code) { this.send('join_room', { code }) },
+    leaveRoom() {
+      this.send('leave_room')
+      this.reset()
+    },
+    setReady(ready) { this.send('ready', { ready }) },
+    startGame() { this.send('start') },
+    sendChat(text) { this.send('chat', { text }) },
+    // ---- 斗地主操作 ----
+    ddzBid(call) { this.send('ddz_bid', { call }) },
+    ddzRob(rob) { this.send('ddz_rob', { rob }) },
+    ddzPlay(cards) { this.send('ddz_play', { cards }) },
+    ddzPass() { this.send('ddz_pass') },
+    // 请求出牌提示：seq 从 0 递增，连点轮换候选
+    ddzHintReq(seq) { this.send('ddz_hint', { seq }) },
+    // 托管开关：开启后每回合由系统规则 AI 代打
+    setEscrow(on) { this.send('escrow', { on }) },
+    // ---- 象棋操作 ----
+    chessMove(m) { this.send('chess_move', m) },
+    // 请求选中棋子的合法落点（新手走法高亮）
+    chessHintsReq(fromR, fromC) { this.send('chess_hints', { from_r: fromR, from_c: fromC }) },
+    // ---- 大富翁操作 ----
+    monoRoll() { this.send('mono_roll') },
+    monoBuy(buy) { this.send('mono_buy', { buy }) },
+    // 建筑升级决策（落在自己地产上时）
+    monoUpgrade(up) { this.send('mono_upgrade', { up }) },
+    // ---- 飞行棋操作 ----
+    ludoRoll() { this.send('ludo_roll') },
+    ludoMove(plane) { this.send('ludo_move', { plane }) },
+    // ---- 台球操作 ----
+    // spinX 左右塞 -1~1（右塞为正），spinY 高低杆 -1~1（高杆为正）
+    billShot(angle, power, spinX = 0, spinY = 0) {
+      this.send('bill_shot', { angle, power, spin_x: spinX, spin_y: spinY })
+    },
+    resign() { this.send('resign') },
+    // 清空本地状态（离开房间/退出登录）
+    reset() {
+      this.roomState = null
+      this.chatLog = []
+      this.battleEnd = null
+      this.billAnims = []
+      this.ddzHint = null
+      this.chessHints = null
+    },
+    // 彻底断开
+    disconnect() {
+      // 主动断开也要清心跳：close 是异步的，不能只依赖 onclose 回调兜底
+      clearInterval(this.pingTimer)
+      this.pingTimer = null
+      this.ws?.close()
+      this.ws = null
+      this.reset()
+    },
+  },
+})
diff --git a/src/stores/chat.js b/src/stores/chat.js
new file mode 100644
index 0000000..bfd7eab
--- /dev/null
+++ b/src/stores/chat.js
@@ -0,0 +1,180 @@
+// 聊天 Store：好友关系、私聊会话、未读数与实时推送处理
+// 实时通道复用对战 WebSocket（battle store），离线消息靠数据库兜底
+import { defineStore } from 'pinia'
+import http, { toast } from '../api/http'
+import { useBattleStore } from './battle'
+
+export const useChatStore = defineStore('chat', {
+  state: () => ({
+    unread: 0,                            // 未读私聊总数（导航/悬浮按钮角标）
+    conversations: [],                    // 会话列表 [{peer,last_msg,last_at,from_me,unread}]
+    friends: [],                          // 好友列表 [{user_id,nickname,avatar,online,since}]
+    requests: { received: [], sent: [] }, // 好友申请（收到的/发出的）
+    reqBadge: 0,                          // 待处理申请数（红点）
+    activePeer: null,                     // 当前聊天对象（userBrief）
+    messages: [],                         // 当前会话消息（时间升序）
+    hasMore: false,                       // 是否还有更早的消息
+    widgetOpen: false,                    // 悬浮小窗是否展开
+    widgetView: 'list',                   // 小窗视图：list=会话列表 chat=聊天
+    inited: false,                        // 是否已完成初始化
+  }),
+  actions: {
+    // 登录后初始化：建立 WS（收实时消息）+ 拉未读数与申请红点
+    async init() {
+      if (this.inited) return
+      this.inited = true
+      try {
+        await useBattleStore().connect()
+      } catch {
+        // 后端未启动时静默，进入对战页等场景会再次尝试
+      }
+      this.refreshUnread()
+      this.refreshRequests()
+    },
+    async refreshUnread() {
+      try {
+        const d = await http.get('/chat/unread')
+        this.unread = d.unread
+      } catch {}
+    },
+    async loadConversations() {
+      const d = await http.get('/chat/conversations')
+      this.conversations = d.list
+      this.unread = d.total_unread
+    },
+    async loadFriends() {
+      this.friends = await http.get('/friends')
+    },
+    async refreshRequests() {
+      try {
+        const d = await http.get('/friends/requests')
+        this.requests = d
+        this.reqBadge = d.received.length
+      } catch {}
+    },
+    // 打开与某人的聊天（peer 至少含 user_id/nickname/avatar）
+    async openChat(peer) {
+      this.activePeer = peer
+      this.messages = []
+      this.hasMore = false
+      const d = await http.get('/chat/messages', { params: { peer_id: peer.user_id, size: 50 } })
+      this.messages = d.list
+      this.hasMore = d.has_more
+      if (d.peer?.user_id) this.activePeer = d.peer
+      // 本地清零该会话未读
+      const conv = this.conversations.find((x) => x.peer.user_id === peer.user_id)
+      if (conv && conv.unread > 0) {
+        this.unread = Math.max(0, this.unread - conv.unread)
+        conv.unread = 0
+      } else {
+        this.refreshUnread()
+      }
+    },
+    // 加载更早的消息（向上翻页）
+    async loadEarlier() {
+      if (!this.activePeer || !this.messages.length) return
+      const d = await http.get('/chat/messages', {
+        params: { peer_id: this.activePeer.user_id, before_id: this.messages[0].id, size: 50 },
+      })
+      this.messages = [...d.list, ...this.messages]
+      this.hasMore = d.has_more
+    },
+    // 发送消息
+    async sendMsg(text) {
+      if (!this.activePeer) return
+      const msg = await http.post('/chat/send', { to_id: this.activePeer.user_id, content: text })
+      this.messages.push(msg)
+      this.bumpConversation(this.activePeer, msg, true)
+    },
+    // 当前聊天窗是否对某人打开（悬浮小窗或聊天室页面；hash 判断兼容桌面端 hash 路由）
+    chatOpenWith(uid) {
+      if (!this.activePeer || this.activePeer.user_id !== uid) return false
+      const onChatPage = location.pathname.startsWith('/chat') || location.hash.startsWith('#/chat')
+      return (this.widgetOpen && this.widgetView === 'chat') || onChatPage
+    },
+    // 收到 WS 推送的私聊消息
+    onIncoming(data) {
+      const { msg, from } = data
+      if (this.chatOpenWith(from.user_id)) {
+        this.messages.push(msg)
+        http.post('/chat/read', { peer_id: from.user_id }).catch(() => {})
+      } else {
+        this.unread++
+        toast(`💬 ${from.nickname}：${msg.content.slice(0, 30)}`, 'info')
+      }
+      this.bumpConversation(from, msg, false)
+    },
+    // 收到好友事件推送（申请/通过）
+    onFriendEvent(data) {
+      if (data.kind === 'request') {
+        toast(`👥 ${data.user.nickname} 申请加你为好友`, 'info')
+        this.refreshRequests()
+      } else if (data.kind === 'accept') {
+        toast(`🎉 ${data.user.nickname} 通过了你的好友申请`, 'success')
+        this.loadFriends().catch(() => {})
+        this.refreshRequests()
+      }
+    },
+    // 更新会话列表的最后一条消息并置顶
+    bumpConversation(peer, msg, fromMe) {
+      const i = this.conversations.findIndex((x) => x.peer.user_id === peer.user_id)
+      if (i >= 0) {
+        const conv = this.conversations.splice(i, 1)[0]
+        conv.last_msg = msg.content
+        conv.last_at = msg.created_at
+        conv.from_me = fromMe
+        if (!fromMe && !this.chatOpenWith(peer.user_id)) conv.unread++
+        this.conversations.unshift(conv)
+      } else {
+        this.conversations.unshift({
+          peer, last_msg: msg.content, last_at: msg.created_at, from_me: fromMe,
+          unread: fromMe || this.chatOpenWith(peer.user_id) ? 0 : 1,
+        })
+      }
+    },
+    // ---- 好友操作 ----
+    async searchUsers(keyword) {
+      return await http.get('/friends/search', { params: { keyword } })
+    },
+    async requestFriend(userId) {
+      const d = await http.post('/friends/request', { user_id: userId })
+      if (d.relation === 'friend') {
+        toast(d.msg || '已成为好友', 'success')
+        this.loadFriends().catch(() => {})
+      } else {
+        toast('申请已发送，等待对方同意', 'success')
+      }
+      this.refreshRequests()
+      return d.relation
+    },
+    async respondFriend(id, accept) {
+      await http.post('/friends/respond', { id, accept })
+      toast(accept ? '已同意，你们现在是好友了' : '已拒绝', accept ? 'success' : 'info')
+      this.refreshRequests()
+      if (accept) this.loadFriends().catch(() => {})
+    },
+    async removeFriend(uid) {
+      await http.delete(`/friends/${uid}`)
+      toast('已删除好友', 'info')
+      this.friends = this.friends.filter((f) => f.user_id !== uid)
+    },
+    // 悬浮小窗控制（打开时顺便确保 WS 在线，断线后能自动恢复实时推送）
+    openWidget() {
+      this.widgetOpen = true
+      this.widgetView = 'list'
+      useBattleStore().connect().catch(() => {})
+      this.loadConversations().catch(() => {})
+      this.loadFriends().catch(() => {})
+    },
+    // 在小窗里直接跟某人聊
+    async widgetChat(peer) {
+      this.widgetOpen = true
+      this.widgetView = 'chat'
+      await this.openChat(peer)
+    },
+    // 退出登录时清空
+    reset() {
+      this.$reset()
+    },
+  },
+})
diff --git a/src/stores/starveCoop.js b/src/stores/starveCoop.js
new file mode 100644
index 0000000..16c8575
--- /dev/null
+++ b/src/stores/starveCoop.js
@@ -0,0 +1,126 @@
+// 饥荒组队联机 Store：独立 WebSocket 连接 + 房间状态（建房/邀请码/座位/皮肤/准备）
+// 对局内实时消息（starve_input/starve_state/starve_end）直接转发给游戏组件注册的回调，
+// 不落 pinia 响应式状态（高频快照，避免无谓的响应式开销）
+import { defineStore } from 'pinia'
+import { toast } from '../api/http'
+
+// 游戏内消息回调（模块级，非响应式）：StarveGame 挂载对局时注册
+let gameHandler = null
+
+export const useStarveCoopStore = defineStore('starveCoop', {
+  state: () => ({
+    ws: null,          // WebSocket 实例（独立于对战大厅的连接）
+    connected: false,  // 连接状态
+    roomState: null,   // 房间状态快照（座位/皮肤/准备/状态）
+    closedReason: '',  // 房间被解散原因
+    pingTimer: null,   // 应用层心跳
+  }),
+  getters: {
+    inRoom: (s) => !!s.roomState,
+    mySeat: (s) => s.roomState?.my_seat ?? -1,
+    isHost: (s) => s.roomState && s.roomState.host_id === s.roomState.seats?.[s.roomState.my_seat]?.user_id,
+    // 已入座的玩家列表（联机开局用）
+    activePlayers: (s) =>
+      (s.roomState?.seats || [])
+        .filter((seat) => seat.occupied)
+        .map((seat) => ({ seat: seat.index, name: seat.name, skin: seat.skin || 'wilson', userId: seat.user_id })),
+  },
+  actions: {
+    // 建立独立连接；带 JWT，成功后 resolve
+    connect() {
+      if (this.ws && (this.ws.readyState === 0 || this.ws.readyState === 1)) {
+        return Promise.resolve()
+      }
+      const token = localStorage.getItem('token')
+      let host = location.host
+      let proto = location.protocol === 'https:' ? 'wss' : 'ws'
+      const base = window.desktop?.serverBase
+      if (base) {
+        const u = new URL(base)
+        host = u.host
+        proto = u.protocol === 'https:' ? 'wss' : 'ws'
+      }
+      const url = `${proto}://${host}/ws?token=${encodeURIComponent(token)}`
+      return new Promise((resolve, reject) => {
+        const ws = new WebSocket(url)
+        this.ws = ws
+        ws.onopen = () => {
+          this.connected = true
+          this.pingTimer = setInterval(() => this.send('ping', {}), 30000)
+          resolve()
+        }
+        ws.onmessage = (ev) => this.handleMessage(JSON.parse(ev.data))
+        ws.onclose = () => {
+          // 主动 disconnect 时 this.ws 已被置 null，这里只处理"意外断线"：
+          // 后端断线即移除座位，客户端必须同步清掉房间状态，否则 UI 仍显示在房间内
+          if (this.ws !== ws) return
+          this.connected = false
+          clearInterval(this.pingTimer)
+          if (this.roomState) {
+            this.roomState = null
+            gameHandler?.('room_closed', { reason: '连接已断开' })
+            toast('连接已断开，请重新建房或加入', 'info')
+          }
+        }
+        ws.onerror = () => reject(new Error('连接失败'))
+      })
+    },
+    handleMessage(msg) {
+      const { type, data } = msg
+      switch (type) {
+        case 'room_state':
+          this.roomState = data
+          gameHandler?.(type, data)
+          break
+        case 'starve_input':
+        case 'starve_state':
+        case 'starve_end':
+          // 对局内实时消息：直接交给游戏组件（主机收 input，客机收 state，全员收 end）
+          gameHandler?.(type, data)
+          break
+        case 'room_closed':
+          this.closedReason = data.reason || '房间已解散'
+          this.roomState = null
+          gameHandler?.('room_closed', data)
+          toast(this.closedReason, 'info')
+          break
+        case 'error':
+          toast(data.msg || '操作失败')
+          break
+        // chat_msg / friend_event 由主连接（battle store）负责，这里忽略避免重复处理
+      }
+    },
+    send(type, data = {}) {
+      if (this.ws?.readyState === 1) {
+        this.ws.send(JSON.stringify({ type, data }))
+      }
+    },
+    // ---- 房间操作 ----
+    createRoom() { this.send('create_room', { game: 'starve', mode: 'pvp' }) },
+    joinRoom(code) { this.send('join_room', { code: String(code || '').trim().toUpperCase() }) },
+    leaveRoom() {
+      this.send('leave_room')
+      this.roomState = null
+    },
+    setReady(ready) { this.send('ready', { ready }) },
+    setSkin(code) { this.send('skin', { skin: code }) },
+    startGame() { this.send('start') },
+    // ---- 对局内消息 ----
+    sendInput(data) { this.send('starve_input', data) },   // 客机 → 房主（服务端转发）
+    sendState(data) { this.send('starve_state', data) },   // 房主 → 其余座位（服务端广播）
+    sendOver() { this.send('starve_over') },               // 房主宣告全灭结束
+    // 游戏组件注册/注销对局消息回调
+    setGameHandler(cb) { gameHandler = cb },
+    clearGameHandler() { gameHandler = null },
+    // 断开连接（退出游玩页时调用）
+    disconnect() {
+      clearInterval(this.pingTimer)
+      const ws = this.ws
+      this.ws = null // 先置空再 close，onclose 回调据此识别"主动断开"并跳过断线处理
+      ws?.close()
+      this.connected = false
+      this.roomState = null
+      gameHandler = null
+    },
+  },
+})
diff --git a/src/stores/theme.js b/src/stores/theme.js
new file mode 100644
index 0000000..844098c
--- /dev/null
+++ b/src/stores/theme.js
@@ -0,0 +1,46 @@
+// 主题与站点配置 Store：拉取 /api/config，把 CSS 变量写入 :root 并给 body 挂主题 class
+import { defineStore } from 'pinia'
+import http from '../api/http'
+
+export const useThemeStore = defineStore('theme', {
+  state: () => ({
+    siteName: '像素游戏厅', // 站点名称
+    announcement: '',       // 公告
+    themeCode: 'arcade',    // 当前主题编码
+    themeName: '电玩厅',    // 当前主题名称
+    carouselStyle: 'slide', // 大厅轮播效果：slide/fade/coverflow/cards
+    carouselInterval: 5,    // 自动轮播间隔（秒）
+  }),
+  actions: {
+    // 拉取站点配置并应用主题（登录前后、后台切换后都会调用）
+    async fetchConfig() {
+      try {
+        const data = await http.get('/config')
+        this.siteName = data.site_name
+        this.announcement = data.announcement
+        this.carouselStyle = data.carousel_style || 'slide'
+        this.carouselInterval = data.carousel_interval || 5
+        this.applyTheme(data.theme)
+        document.title = this.siteName
+      } catch (e) {
+        // 后端未启动时保持默认主题，不阻塞页面
+      }
+    },
+    // 把主题 CSS 变量写入根节点，并切换 body 的 theme-xxx class（装饰背景用）
+    applyTheme(theme) {
+      if (!theme) return
+      this.themeCode = theme.code
+      this.themeName = theme.name
+      const root = document.documentElement
+      Object.entries(theme.css_vars || {}).forEach(([key, value]) => {
+        root.style.setProperty(key, value)
+      })
+      document.body.className = document.body.className
+        .split(' ')
+        .filter((c) => !c.startsWith('theme-'))
+        .concat(`theme-${theme.code}`)
+        .join(' ')
+        .trim()
+    },
+  },
+})
diff --git a/src/stores/user.js b/src/stores/user.js
index 5987aad..024459f 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -1,87 +1,50 @@
+// 用户 Store：登录态、积分余额（游戏结算后实时刷新）
 import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import {loginApi, registerApi} from "@/api/request/user.js";
-import {message, notification} from "ant-design-vue";
+import http from '../api/http'
 
-export const useUserStore = defineStore('user', () => {
-  const user = ref(JSON.parse(localStorage.getItem('user') || 'null'))
-  const modal = ref(localStorage.getItem('authModal') || 'false')
-
-  // 添加初始化状态校验
-  const initUser = () => {
-    const userData = localStorage.getItem('user')
-    if (!userData) return null
-    try {
-      return JSON.parse(userData)
-    } catch {
-      localStorage.removeItem('user')
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    token: localStorage.getItem('token') || '',
+    user: JSON.parse(localStorage.getItem('user') || 'null'),
+  }),
+  getters: {
+    // 是否已登录
+    loggedIn: (s) => !!s.token,
+    // 是否超级管理员
+    isAdmin: (s) => s.user?.role === 1,
+  },
+  actions: {
+    // 保存登录结果
+    setLogin({ token, user }) {
+      this.token = token
+      this.user = user
+      localStorage.setItem('token', token)
+      localStorage.setItem('user', JSON.stringify(user))
+    },
+    // 更新用户信息（积分变化、改资料后）
+    setUser(user) {
+      this.user = user
+      localStorage.setItem('user', JSON.stringify(user))
+    },
+    // 只更新积分余额（结算响应里带了最新余额）
+    setPoints(points) {
+      if (this.user) {
+        this.user.points = points
+        localStorage.setItem('user', JSON.stringify(this.user))
+      }
+    },
+    // 从服务端刷新最新资料
+    async refresh() {
+      if (!this.token) return
+      const user = await http.get('/user/profile')
+      this.setUser(user)
+    },
+    // 退出登录
+    logout() {
+      this.token = ''
+      this.user = null
       localStorage.removeItem('token')
-      return null
-    }
-  }
-  
-  const isAuthenticated = computed(() => !!user.value?.nick_name)
-  
-  function login(credentials, functionName) {
-    console.log(functionName, 'sssssssssssss')
-    loginApi({
-      account: credentials.username,
-      password: credentials.password,
-      remember: credentials.remember,
-    }).then((res) => {
-      const userData = {
-        nick_name: res.nick_name,
-        role_name: res.role_name,
-        role_value: res.role_value,
-      }
-      user.value =  userData;
-      localStorage.setItem('user', JSON.stringify(userData))
-      localStorage.setItem('token', res.token)
-      notification.success({
-        message: '登录成功',
-        description: `欢迎回来${res.nick_name}`,
-      })
-      functionName()
-    })
-  }
-  function register(credentials, functionName) {
-    registerApi({
-      account: credentials.username,
-      password: credentials.password,
-      email: credentials.email,
-      code: credentials.code,
-    }).then((res) => {
-      const userData = {
-        nick_name: res.nick_name,
-        role_name: res.role_name,
-        role_value: res.role_value,
-      }
-      user.value =  userData;
-      localStorage.setItem('user', JSON.stringify(userData))
-      localStorage.setItem('token', res.token)
-      message.success('注册成功')
-      functionName()
-    })
-  }
-
-  function logout() {
-    user.value = null
-    localStorage.removeItem('user')
-    localStorage.removeItem('token')
-  }
-
-  function setModal(value) {
-    modal.value = modal.value === 'false' ? 'true' : 'false';
-    localStorage.setItem('authModal', value)
-  }
-
-  return {
-    modal,
-    user,
-    isAuthenticated,
-    setModal,
-    login,
-    register,
-    logout
-  }
-})
\ No newline at end of file
+      localStorage.removeItem('user')
+    },
+  },
+})
diff --git a/src/styles/base.css b/src/styles/base.css
new file mode 100644
index 0000000..3ee37af
--- /dev/null
+++ b/src/styles/base.css
@@ -0,0 +1,262 @@
+/* =====================================================================
+   全局基础样式：所有颜色/圆角/光效均来自主题 CSS 变量（后台切换主题全站生效）
+   ===================================================================== */
+:root {
+  /* 默认主题变量（等待 /api/config 下发覆盖时的兜底值，与电玩厅主题一致） */
+  --bg: #0d0e2b;
+  --bg-panel: #16173d;
+  --bg-card: #1d1f4e;
+  --primary: #ff3e7f;
+  --primary-2: #ffb300;
+  --accent: #00e5ff;
+  --text: #ffffff;
+  --text-dim: #9a9ac4;
+  --border: #2c2e6e;
+  --radius: 0px;
+  --glow: 0 0 18px rgba(255, 62, 127, 0.45);
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+html,
+body {
+  min-height: 100%;
+}
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
+  font-size: 14px;
+  transition: background 0.4s ease, color 0.4s ease;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+button {
+  font-family: inherit;
+}
+/* ---------- 通用面板与卡片 ---------- */
+.panel {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px;
+}
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
+}
+.card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--glow);
+  border-color: var(--primary);
+}
+/* ---------- 按钮 ---------- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+  cursor: pointer;
+  border-radius: calc(var(--radius) / 1.6);
+  padding: 9px 18px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  transition: filter 0.15s, transform 0.1s, opacity 0.15s;
+}
+.btn:hover {
+  filter: brightness(1.12);
+}
+.btn:active {
+  transform: scale(0.97);
+}
+.btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.btn-ghost {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+.btn-ghost:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+.btn-accent {
+  background: linear-gradient(135deg, var(--accent), var(--primary-2));
+}
+.btn-sm {
+  padding: 5px 12px;
+  font-size: 12px;
+}
+.btn-lg {
+  padding: 12px 30px;
+  font-size: 16px;
+}
+/* ---------- 表单 ---------- */
+.input {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) / 1.6);
+  color: var(--text);
+  padding: 10px 12px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
+}
+select.input {
+  appearance: auto;
+}
+/* ---------- 标题与文字 ---------- */
+.page-title {
+  font-size: 22px;
+  font-weight: 800;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.page-title::before {
+  content: '';
+  width: 6px;
+  height: 22px;
+  border-radius: 4px;
+  background: linear-gradient(180deg, var(--primary), var(--primary-2));
+  box-shadow: var(--glow);
+}
+.text-dim {
+  color: var(--text-dim);
+}
+.text-primary {
+  color: var(--primary);
+}
+.text-accent {
+  color: var(--accent);
+}
+/* ---------- 标签徽章 ---------- */
+.tag {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  background: var(--bg);
+}
+.tag-primary {
+  color: var(--primary);
+  border-color: var(--primary);
+}
+.tag-accent {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+/* ---------- 表格 ---------- */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.table th,
+.table td {
+  text-align: left;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+.table th {
+  color: var(--text-dim);
+  font-weight: 600;
+  white-space: nowrap;
+}
+.table tr:last-child td {
+  border-bottom: none;
+}
+/* ---------- 全局提示 toast ---------- */
+.toast {
+  position: fixed;
+  top: 76px;
+  right: 20px;
+  z-index: 9999;
+  padding: 10px 18px;
+  border-radius: 10px;
+  font-size: 14px;
+  color: #fff;
+  background: #e5484d;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  opacity: 0;
+  transform: translateX(24px);
+  transition: all 0.3s ease;
+  max-width: 320px;
+}
+.toast.show {
+  opacity: 1;
+  transform: translateX(0);
+}
+.toast-success {
+  background: #2f9e6e;
+}
+.toast-info {
+  background: #3b82f6;
+}
+/* ---------- 弹窗遮罩 ---------- */
+.modal-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.modal {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 24px;
+  width: min(480px, 92vw);
+  max-height: 86vh;
+  overflow: auto;
+  box-shadow: var(--glow);
+}
+/* ---------- 分页 ---------- */
+.pager {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 14px;
+}
+/* ---------- 骨架/空状态 ---------- */
+.empty {
+  text-align: center;
+  color: var(--text-dim);
+  padding: 40px 0;
+  font-size: 13px;
+}
+/* ---------- 滚动条 ---------- */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--primary);
+}
diff --git a/src/styles/themes.css b/src/styles/themes.css
new file mode 100644
index 0000000..406fdf6
--- /dev/null
+++ b/src/styles/themes.css
@@ -0,0 +1,1967 @@
+/* =====================================================================
+   主题风格系统：每套主题是一种完整的设计语言，而不是换色板。
+   颜色令牌来自后台下发的 CSS 变量（themes.css_vars），
+   这里负责结构性差异：字体 / 圆角 / 边框 / 阴影 / 背景纹理 / 交互手感。
+   —— 十二套主题 ——
+   arcade    像素街机：像素字、扫描线 CRT、硬阴影按键
+   retro     复古掌机：Game Boy 四阶绿、点阵液晶、掌机边框
+   cyberpunk 赛博朋克：切角面板、霓虹描边、故障标题、透视网格
+   vaporwave 蒸汽波：落日渐变、玻璃拟态、镭射渐变字
+   candy     贴纸卡通：粗描边贴纸、错位硬阴影、波点手账
+   darkmin   极简暗黑：细线、纯平、零装饰（以"无"为个性）
+   ink       水墨古风：宣纸、双线裱框、朱砂印章、衬线书卷
+   terminal  终端黑客：等宽字、方括号按键、磷光屏闪烁、跳动光标
+   steampunk 蒸汽朋克：黄铜铭牌、四角铆钉、机械按钮、齿轮常转
+   ocean     深海玻璃：磨砂玻璃、气泡上浮、按钮波光、水下光柱
+   sakura    樱花和风：花瓣飘落、绯红团子按钮、标题摇曳樱花
+   space     星际深空：三层星野、流星划过、渐变描边太空舱按钮
+   ===================================================================== */
+
+/* =====================================================================
+   1. 像素街机 arcade —— 深夜街机厅，一切都是方的、硬的、会发光的
+   ===================================================================== */
+body.theme-arcade {
+  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
+    radial-gradient(rgba(0, 229, 255, 0.1) 1px, transparent 1px),
+    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 62, 127, 0.16), transparent);
+  background-size: 90px 90px, 140px 140px, 100% 100%;
+  background-position: 0 0, 45px 60px, 0 0;
+  /* 中文正文用宋体承接像素英文——老式电玩对话框的味道 */
+  font-family: 'NSimSun', 'SimSun', 'Songti SC', 'PingFang SC', 'Microsoft YaHei', serif;
+  font-size: 15px;
+}
+/* CRT 扫描线 + 四角暗角，盖在全站之上 */
+body.theme-arcade::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9990;
+  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.1) 3px 4px),
+    radial-gradient(ellipse 130% 130% at 50% 50%, transparent 68%, rgba(0, 0, 0, 0.32));
+}
+/* 全站直角 + 像素粗边 + 硬投影 */
+body.theme-arcade .panel,
+body.theme-arcade .card,
+body.theme-arcade .modal,
+body.theme-arcade .input,
+body.theme-arcade .tag,
+body.theme-arcade .toast,
+body.theme-arcade .avatar {
+  border-radius: 0;
+}
+body.theme-arcade .panel,
+body.theme-arcade .card,
+body.theme-arcade .modal {
+  border: 3px solid var(--border);
+  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45);
+}
+body.theme-arcade .card:hover {
+  transform: translate(-2px, -2px);
+  border-color: var(--accent);
+  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.45), var(--glow);
+}
+/* 像素按键：按下去会"咔哒"沉底 */
+body.theme-arcade .btn {
+  border-radius: 0;
+  background: var(--primary);
+  border: 3px solid color-mix(in srgb, var(--primary) 40%, #000);
+  font-family: 'Press Start 2P', 'NSimSun', 'SimSun', 'Songti SC', serif;
+  font-size: 12px;
+  letter-spacing: 1px;
+  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.3), inset 3px 3px 0 rgba(255, 255, 255, 0.22),
+    0 5px 0 rgba(0, 0, 0, 0.5);
+}
+body.theme-arcade .btn:hover {
+  filter: brightness(1.15);
+}
+body.theme-arcade .btn:active {
+  transform: translateY(5px);
+  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.3), inset 3px 3px 0 rgba(255, 255, 255, 0.22),
+    0 0 0 rgba(0, 0, 0, 0.5);
+}
+body.theme-arcade .btn-accent {
+  background: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 40%, #000);
+  color: #06263a;
+}
+body.theme-arcade .btn-ghost {
+  background: transparent;
+  border-color: var(--border);
+  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35);
+}
+body.theme-arcade .input {
+  border-width: 3px;
+}
+body.theme-arcade .input:focus {
+  box-shadow: 0 0 0 3px var(--accent);
+}
+/* 标题：像素字 + 闪烁光标 ▶ */
+body.theme-arcade .page-title {
+  font-family: 'Press Start 2P', 'NSimSun', 'SimSun', 'Songti SC', serif;
+  font-size: 17px;
+  letter-spacing: 1px;
+  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
+}
+body.theme-arcade .page-title::before {
+  content: '▶';
+  width: auto;
+  height: auto;
+  background: none;
+  box-shadow: none;
+  color: var(--primary);
+  animation: arcade-blink 1s steps(2, end) infinite;
+}
+@keyframes arcade-blink {
+  50% {
+    opacity: 0;
+  }
+}
+/* 导航：实底 + 底部霓虹跑马灯带 */
+body.theme-arcade .nav {
+  background: var(--bg-panel);
+  backdrop-filter: none;
+  border-bottom: 3px solid var(--border);
+}
+body.theme-arcade .nav::after {
+  content: '';
+  display: block;
+  height: 4px;
+  background: repeating-linear-gradient(90deg, var(--primary) 0 24px, var(--primary-2) 24px 48px, var(--accent) 48px 72px);
+  background-size: 72px 4px;
+  animation: arcade-marquee 1.2s steps(6) infinite;
+}
+@keyframes arcade-marquee {
+  to {
+    background-position: 72px 0;
+  }
+}
+body.theme-arcade .nav .link {
+  border-radius: 0;
+}
+body.theme-arcade .nav .link.active {
+  background: var(--primary);
+  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35), inset 2px 2px 0 rgba(255, 255, 255, 0.25);
+}
+body.theme-arcade .brand-name {
+  background: none;
+  color: var(--primary-2);
+  font-family: 'Press Start 2P', 'NSimSun', 'SimSun', 'Songti SC', serif;
+  font-size: 13px;
+  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
+}
+/* 游戏画面像素化采样，放大缩小都是马赛克质感 */
+body.theme-arcade canvas {
+  image-rendering: pixelated;
+}
+/* 游戏卡片：图标区铺霓虹棋盘格，角标全部改方 */
+body.theme-arcade .game-card .icon-area {
+  background: repeating-conic-gradient(rgba(255, 62, 127, 0.13) 0 25%, rgba(0, 229, 255, 0.05) 0 50%);
+  background-size: 26px 26px;
+  border-bottom: 3px solid var(--border);
+}
+body.theme-arcade .game-card .price-tag,
+body.theme-arcade .game-card .owned-tag,
+body.theme-arcade .game-card .free-tag {
+  border-radius: 0;
+  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
+}
+body.theme-arcade .game-card .name {
+  font-weight: 800;
+}
+/* 筛选纸片：像素方块按键 */
+body.theme-arcade .chip {
+  border-radius: 0;
+  border-width: 2px;
+}
+body.theme-arcade .chip.on {
+  background: var(--primary);
+  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35), inset 2px 2px 0 rgba(255, 255, 255, 0.25);
+}
+body.theme-arcade ::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background: var(--primary);
+}
+
+/* =====================================================================
+   2. 复古掌机 retro —— Game Boy 单色液晶：全站只有一种绿
+   ===================================================================== */
+body.theme-retro {
+  /* 点阵液晶：底色上铺满细密网点；中文用仿宋衬托终端英文 */
+  background-image: radial-gradient(rgba(0, 0, 0, 0.22) 1px, transparent 1px);
+  background-size: 4px 4px;
+  font-family: 'VT323', 'FangSong', '仿宋', 'STFangsong', 'NSimSun', 'Courier New', monospace;
+  font-size: 16px;
+}
+/* 掌机机身边框：屏幕嵌在灰绿色外壳里 */
+body.theme-retro::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9990;
+  box-shadow: inset 0 0 0 8px #8b956d, inset 0 0 0 10px #4a5340, inset 0 0 46px rgba(0, 0, 0, 0.42);
+}
+/* 液晶显示没有圆角、没有阴影、没有光效 */
+body.theme-retro .panel,
+body.theme-retro .card,
+body.theme-retro .modal,
+body.theme-retro .input,
+body.theme-retro .btn,
+body.theme-retro .tag,
+body.theme-retro .toast,
+body.theme-retro .avatar,
+body.theme-retro .nav .link {
+  border-radius: 0;
+  box-shadow: none;
+}
+body.theme-retro .panel,
+body.theme-retro .card,
+body.theme-retro .modal {
+  border: 2px solid var(--border);
+}
+body.theme-retro .card:hover {
+  transform: none;
+  box-shadow: none;
+  border-color: var(--primary);
+  background: color-mix(in srgb, var(--bg-card) 60%, var(--primary) 12%);
+}
+/* 按钮：深绿实底，悬停时正片负冲（反色） */
+body.theme-retro .btn {
+  background: var(--primary);
+  color: #0f380f;
+  border: 2px solid var(--border);
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 400;
+}
+body.theme-retro .btn:hover {
+  filter: none;
+  background: var(--text);
+  color: #0f380f;
+}
+body.theme-retro .btn:active {
+  transform: translate(2px, 2px);
+}
+body.theme-retro .btn-ghost {
+  background: transparent;
+  color: var(--text);
+}
+body.theme-retro .btn-accent {
+  background: var(--accent);
+  color: #0f380f;
+}
+body.theme-retro .page-title {
+  font-size: 24px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+body.theme-retro .page-title::before {
+  content: '■';
+  width: auto;
+  height: auto;
+  background: none;
+  box-shadow: none;
+  color: var(--primary);
+}
+body.theme-retro .nav {
+  background: var(--bg-panel);
+  backdrop-filter: none;
+  border-bottom: 2px solid var(--border);
+}
+body.theme-retro .nav .link.active {
+  background: var(--primary);
+  color: #0f380f;
+  box-shadow: none;
+}
+body.theme-retro .brand-name {
+  background: none;
+  color: var(--text);
+  font-size: 19px;
+}
+body.theme-retro .brand-icon {
+  filter: none;
+}
+/* 提示与弹层也遵守单色纪律 */
+body.theme-retro .toast {
+  background: #306230;
+  border: 2px solid #0f380f;
+  color: #dceeaa;
+}
+body.theme-retro .toast-success,
+body.theme-retro .toast-info {
+  background: #4a7a24;
+}
+body.theme-retro canvas {
+  image-rendering: pixelated;
+}
+/* 游戏卡片：图标滤成单色绿——液晶屏里的精灵图 */
+body.theme-retro .game-card .icon-area {
+  background: var(--bg-panel);
+  border-bottom: 2px solid var(--border);
+}
+body.theme-retro .game-card .game-icon {
+  filter: grayscale(1) sepia(1) hue-rotate(52deg) saturate(3.2) brightness(1.05);
+}
+body.theme-retro .game-card .price-tag {
+  background: var(--primary);
+  color: #0f380f;
+  border-radius: 0;
+}
+body.theme-retro .game-card .owned-tag,
+body.theme-retro .game-card .free-tag {
+  background: transparent;
+  border: 2px solid var(--primary);
+  color: var(--primary);
+  border-radius: 0;
+}
+/* 筛选纸片：液晶纯平方块 */
+body.theme-retro .chip {
+  border-radius: 0;
+  background: var(--bg-panel);
+}
+body.theme-retro .chip.on {
+  background: var(--primary);
+  color: #0f380f;
+  border-color: var(--border);
+  box-shadow: none;
+}
+body.theme-retro ::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background: var(--border);
+}
+
+/* =====================================================================
+   3. 赛博朋克 cyberpunk —— 切角、霓虹、故障感
+   ===================================================================== */
+body.theme-cyberpunk {
+  background-image: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(122, 4, 235, 0.28), transparent),
+    linear-gradient(transparent 85%, rgba(5, 217, 232, 0.12));
+  /* 中文用黑体拉出硬朗机械感，整体轻微加宽字距 */
+  font-family: 'VT323', 'SimHei', '黑体', 'Heiti SC', 'Microsoft YaHei', sans-serif;
+  letter-spacing: 0.4px;
+}
+/* 地平线透视网格 */
+body.theme-cyberpunk::after {
+  content: '';
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 32vh;
+  pointer-events: none;
+  z-index: 0;
+  background: linear-gradient(rgba(5, 217, 232, 0.15) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(5, 217, 232, 0.15) 1px, transparent 1px);
+  background-size: 44px 28px;
+  transform: perspective(280px) rotateX(50deg);
+  transform-origin: bottom;
+  mask-image: linear-gradient(transparent, #000 60%);
+  -webkit-mask-image: linear-gradient(transparent, #000 60%);
+}
+/* 缓慢下移的扫描亮线 */
+body.theme-cyberpunk::before {
+  content: '';
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: -10%;
+  height: 22vh;
+  pointer-events: none;
+  z-index: 9990;
+  background: linear-gradient(transparent, rgba(5, 217, 232, 0.05), transparent);
+  animation: cyber-scan 7s linear infinite;
+}
+@keyframes cyber-scan {
+  to {
+    transform: translateY(120vh);
+  }
+}
+/* 切角面板：右上与左下削去一刀 */
+body.theme-cyberpunk .panel,
+body.theme-cyberpunk .card,
+body.theme-cyberpunk .modal {
+  border-radius: 0;
+  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
+  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
+  box-shadow: inset 0 0 26px rgba(5, 217, 232, 0.05);
+}
+body.theme-cyberpunk .card:hover {
+  transform: translateY(-3px);
+  border-color: var(--primary);
+  /* clip-path 会裁掉 box-shadow，用 drop-shadow 让辉光贴着切角轮廓 */
+  box-shadow: inset 0 0 26px rgba(255, 42, 109, 0.1);
+  filter: drop-shadow(0 0 10px rgba(255, 42, 109, 0.45));
+}
+/* 按钮：终端字 + 全大写 + 小切角 */
+body.theme-cyberpunk .btn {
+  border-radius: 0;
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
+  font-family: 'VT323', 'PingFang SC', 'Microsoft YaHei', monospace;
+  font-size: 17px;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  background: linear-gradient(100deg, var(--primary), var(--primary-2));
+}
+body.theme-cyberpunk .btn-ghost {
+  background: transparent;
+  border: 1px solid var(--accent);
+  color: var(--accent);
+}
+body.theme-cyberpunk .btn-ghost:hover {
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  color: #fff;
+}
+body.theme-cyberpunk .input {
+  border-radius: 0;
+  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
+}
+body.theme-cyberpunk .tag {
+  border-radius: 0;
+}
+/* 标题：双色错位的故障字 */
+body.theme-cyberpunk .page-title {
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  text-shadow: 2px 0 var(--primary), -2px 0 var(--accent);
+}
+body.theme-cyberpunk .page-title::before {
+  background: var(--accent);
+  box-shadow: 0 0 12px var(--accent);
+  border-radius: 0;
+  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), 0 100%);
+}
+body.theme-cyberpunk .nav {
+  border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
+  box-shadow: 0 1px 18px rgba(5, 217, 232, 0.18);
+}
+body.theme-cyberpunk .nav .link {
+  border-radius: 0;
+}
+body.theme-cyberpunk .nav .link.active {
+  background: transparent;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+  box-shadow: inset 0 0 14px rgba(255, 42, 109, 0.25), 0 0 10px rgba(255, 42, 109, 0.35);
+}
+body.theme-cyberpunk .modal {
+  box-shadow: none;
+  filter: drop-shadow(0 0 18px rgba(5, 217, 232, 0.35));
+}
+/* 游戏卡片：图标区铺霓虹网格，图标带电光辉光 */
+body.theme-cyberpunk .game-card .icon-area {
+  background: linear-gradient(rgba(5, 217, 232, 0.09) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(5, 217, 232, 0.09) 1px, transparent 1px),
+    radial-gradient(circle at 72% 22%, rgba(255, 42, 109, 0.2), transparent 62%);
+  background-size: 22px 22px, 22px 22px, 100% 100%;
+  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
+}
+body.theme-cyberpunk .game-card .game-icon {
+  filter: drop-shadow(0 0 10px rgba(5, 217, 232, 0.65));
+}
+body.theme-cyberpunk .game-card .name {
+  letter-spacing: 2px;
+}
+body.theme-cyberpunk .game-card .price-tag,
+body.theme-cyberpunk .game-card .owned-tag,
+body.theme-cyberpunk .game-card .free-tag {
+  border-radius: 0;
+}
+/* 筛选纸片：霓虹描边端子 */
+body.theme-cyberpunk .chip {
+  border-radius: 0;
+}
+body.theme-cyberpunk .chip.on {
+  background: transparent;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+  box-shadow: inset 0 0 12px rgba(255, 42, 109, 0.25), 0 0 8px rgba(255, 42, 109, 0.3);
+}
+body.theme-cyberpunk ::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background: var(--accent);
+}
+
+/* =====================================================================
+   4. 蒸汽波 vaporwave —— 落日、镭射、玻璃拟态
+   ===================================================================== */
+body.theme-vaporwave {
+  background-image: linear-gradient(180deg, #14082e 0%, #2a1352 42%, #742a86 78%, #b3407e 100%);
+  background-attachment: fixed;
+  /* 通篇衬线字：怀旧杂志排版感 */
+  font-family: Georgia, 'Palatino Linotype', 'STSong', 'Songti SC', 'SimSun', serif;
+}
+/* 条纹落日 + 粉色网格地面 */
+body.theme-vaporwave::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background:
+    radial-gradient(circle 210px at 82% 16%, rgba(255, 113, 206, 0.55) 0 58%, transparent 60%),
+    linear-gradient(rgba(255, 113, 206, 0.14) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 113, 206, 0.14) 1px, transparent 1px);
+  background-size: 100% 100%, 100% 30px, 56px 100%;
+  background-position: 0 0, 0 100%, 0 100%;
+  -webkit-mask-image: linear-gradient(#000 0 34%, transparent 40% 72%, #000 82%);
+  mask-image: linear-gradient(#000 0 34%, transparent 40% 72%, #000 82%);
+}
+/* 玻璃拟态面板：磨砂半透明浮在渐变上 */
+body.theme-vaporwave .panel,
+body.theme-vaporwave .card,
+body.theme-vaporwave .modal {
+  background: rgba(255, 255, 255, 0.07);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  backdrop-filter: blur(14px) saturate(1.5);
+  -webkit-backdrop-filter: blur(14px) saturate(1.5);
+  box-shadow: 0 8px 30px rgba(20, 8, 46, 0.35);
+}
+body.theme-vaporwave .card:hover {
+  transform: translateY(-4px) rotate(-0.6deg);
+  border-color: rgba(255, 113, 206, 0.65);
+  box-shadow: 0 14px 38px rgba(255, 113, 206, 0.25);
+}
+body.theme-vaporwave .input {
+  background: rgba(255, 255, 255, 0.09);
+  border-color: rgba(255, 255, 255, 0.22);
+  border-radius: 999px;
+  padding-left: 16px;
+}
+/* 按钮：胶囊形镭射渐变 */
+body.theme-vaporwave .btn {
+  border-radius: 999px;
+  background: linear-gradient(100deg, var(--primary), var(--primary-2), var(--accent));
+  background-size: 200% 100%;
+  box-shadow: 0 8px 22px rgba(255, 113, 206, 0.35);
+  transition: background-position 0.4s ease, transform 0.1s, filter 0.15s;
+}
+body.theme-vaporwave .btn:hover {
+  background-position: 100% 0;
+}
+body.theme-vaporwave .tag {
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+}
+/* 标题：斜体衬线 + 镭射渐变字 */
+body.theme-vaporwave .page-title {
+  font-family: Georgia, 'Songti SC', 'SimSun', serif;
+  font-style: italic;
+  letter-spacing: 5px;
+  background: linear-gradient(90deg, var(--primary), var(--accent));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+body.theme-vaporwave .page-title::before {
+  display: none;
+}
+body.theme-vaporwave .nav {
+  background: rgba(26, 11, 46, 0.5);
+  backdrop-filter: blur(16px) saturate(1.4);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
+}
+body.theme-vaporwave .nav .link {
+  border-radius: 999px;
+}
+body.theme-vaporwave .nav .link.active {
+  box-shadow: 0 6px 18px rgba(255, 113, 206, 0.4);
+}
+body.theme-vaporwave .avatar {
+  background: rgba(255, 255, 255, 0.1);
+}
+body.theme-vaporwave .modal {
+  background: rgba(30, 12, 56, 0.72);
+}
+/* 游戏卡片：图标区是一幅小落日，玻璃感角标 */
+body.theme-vaporwave .game-card .icon-area {
+  background: radial-gradient(circle 40px at 76% 34%, rgba(255, 190, 225, 0.9) 0 38px, transparent 40px),
+    linear-gradient(180deg, rgba(255, 113, 206, 0.32), rgba(122, 4, 235, 0.3));
+  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
+}
+body.theme-vaporwave .game-card .game-icon {
+  filter: drop-shadow(0 6px 14px rgba(255, 113, 206, 0.55));
+}
+body.theme-vaporwave .game-card .price-tag,
+body.theme-vaporwave .game-card .owned-tag,
+body.theme-vaporwave .game-card .free-tag {
+  backdrop-filter: blur(6px);
+}
+/* 筛选纸片：玻璃胶囊 */
+body.theme-vaporwave .chip {
+  background: rgba(255, 255, 255, 0.07);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+body.theme-vaporwave .chip.on {
+  box-shadow: 0 6px 16px rgba(255, 113, 206, 0.4);
+}
+body.theme-vaporwave ::-webkit-scrollbar-thumb {
+  background: rgba(255, 113, 206, 0.5);
+}
+
+/* =====================================================================
+   5. 贴纸卡通 candy —— 手账波点 + 粗描边贴纸 + 错位硬阴影
+   ===================================================================== */
+body.theme-candy {
+  background-image: radial-gradient(rgba(255, 111, 165, 0.16) 3px, transparent 3px),
+    radial-gradient(rgba(94, 203, 247, 0.14) 3px, transparent 3px);
+  background-size: 42px 42px, 42px 42px;
+  background-position: 0 0, 21px 21px;
+  /* 圆体字：软乎乎的儿童贴纸感 */
+  font-family: 'Comic Sans MS', 'YouYuan', '幼圆', 'Yuanti SC', 'Microsoft YaHei', sans-serif;
+  font-weight: 600;
+}
+/* 贴纸三件套：粗巧克力描边 + 错位硬阴影 + 圆角 */
+body.theme-candy .panel,
+body.theme-candy .card,
+body.theme-candy .modal {
+  border: 3px solid #3b2145;
+  box-shadow: 5px 5px 0 #3b2145;
+}
+body.theme-candy .card:hover {
+  transform: translate(-2px, -2px) rotate(-1.2deg);
+  border-color: #3b2145;
+  box-shadow: 8px 8px 0 #3b2145;
+}
+body.theme-candy .btn {
+  border: 3px solid #3b2145;
+  border-radius: 14px;
+  background: var(--primary);
+  box-shadow: 4px 4px 0 #3b2145;
+  font-weight: 800;
+  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
+}
+body.theme-candy .btn:hover {
+  filter: none;
+  transform: translate(-2px, -2px);
+  box-shadow: 6px 6px 0 #3b2145;
+}
+body.theme-candy .btn:active {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 #3b2145;
+}
+body.theme-candy .btn-accent {
+  background: var(--accent);
+}
+body.theme-candy .btn-ghost {
+  background: #fff;
+  color: #3b2145;
+}
+body.theme-candy .input {
+  border: 3px solid #3b2145;
+  background: #fff;
+  box-shadow: 3px 3px 0 #3b2145;
+}
+body.theme-candy .input:focus {
+  box-shadow: 3px 3px 0 var(--primary);
+  border-color: #3b2145;
+}
+/* 标签变成歪着贴的小贴纸 */
+body.theme-candy .tag {
+  border: 2px solid #3b2145;
+  background: #fff;
+  color: #3b2145;
+  box-shadow: 2px 2px 0 #3b2145;
+  transform: rotate(-2deg);
+}
+body.theme-candy .page-title {
+  font-weight: 900;
+  letter-spacing: 1px;
+}
+body.theme-candy .page-title::before {
+  content: '🍭';
+  width: auto;
+  height: auto;
+  background: none;
+  box-shadow: none;
+  font-size: 22px;
+  transform: rotate(-8deg);
+}
+body.theme-candy .nav {
+  background: #fff;
+  backdrop-filter: none;
+  border-bottom: 3px solid #3b2145;
+}
+body.theme-candy .nav .link {
+  border-radius: 999px;
+  font-weight: 700;
+}
+body.theme-candy .nav .link.active {
+  border: 2px solid #3b2145;
+  box-shadow: 3px 3px 0 #3b2145;
+}
+body.theme-candy .brand-icon {
+  filter: none;
+}
+body.theme-candy .avatar {
+  border: 2px solid #3b2145;
+  background: #fff;
+}
+body.theme-candy .toast {
+  border: 3px solid #3b2145;
+  box-shadow: 4px 4px 0 #3b2145;
+  border-radius: 14px;
+  font-weight: 700;
+}
+body.theme-candy .modal {
+  box-shadow: 8px 8px 0 #3b2145;
+}
+/* 游戏卡片：白底波点图标区，图标垫一枚描边贴纸圆 */
+body.theme-candy .game-card .icon-area {
+  background: #fff radial-gradient(rgba(255, 111, 165, 0.28) 3px, transparent 3px);
+  background-size: 26px 26px;
+  border-bottom: 3px solid #3b2145;
+}
+body.theme-candy .game-card .game-icon {
+  background: #fff;
+  border: 3px solid #3b2145;
+  border-radius: 50%;
+  padding: 9px;
+  font-size: 38px;
+  filter: none;
+  box-shadow: 3px 3px 0 #3b2145;
+}
+body.theme-candy .game-card .price-tag,
+body.theme-candy .game-card .owned-tag,
+body.theme-candy .game-card .free-tag {
+  border: 2px solid #3b2145;
+  box-shadow: 2px 2px 0 #3b2145;
+  background: #fff;
+  color: #3b2145;
+  transform: rotate(3deg);
+}
+body.theme-candy .game-card .price-tag {
+  background: var(--primary);
+  color: #fff;
+}
+/* 筛选纸片：描边小饼干 */
+body.theme-candy .chip {
+  border: 2px solid #3b2145;
+  background: #fff;
+  color: #3b2145;
+  font-weight: 700;
+}
+body.theme-candy .chip.on {
+  background: var(--primary);
+  color: #fff;
+  border-color: #3b2145;
+  box-shadow: 2px 2px 0 #3b2145;
+}
+body.theme-candy ::-webkit-scrollbar-thumb {
+  background: var(--primary);
+  border-radius: 999px;
+}
+
+/* =====================================================================
+   6. 极简暗黑 darkmin —— 克制到底：细线、纯平、无装饰、无光效
+   ===================================================================== */
+body.theme-darkmin {
+  background-image: none;
+}
+body.theme-darkmin .panel,
+body.theme-darkmin .card,
+body.theme-darkmin .modal {
+  border: 1px solid var(--border);
+  box-shadow: none;
+}
+body.theme-darkmin .card:hover {
+  transform: translateY(-2px);
+  box-shadow: none;
+  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
+}
+/* 按钮：纯平实底，没有渐变没有阴影 */
+body.theme-darkmin .btn {
+  background: var(--primary);
+  border-radius: 8px;
+  font-weight: 500;
+  box-shadow: none;
+}
+body.theme-darkmin .btn:hover {
+  filter: brightness(1.08);
+}
+body.theme-darkmin .btn-accent {
+  background: var(--accent);
+  color: #08211a;
+}
+body.theme-darkmin .btn-ghost {
+  background: transparent;
+  border: 1px solid var(--border);
+}
+body.theme-darkmin .input {
+  background: var(--bg-panel);
+  border-radius: 8px;
+}
+body.theme-darkmin .input:focus {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
+}
+body.theme-darkmin .page-title {
+  font-weight: 600;
+  font-size: 20px;
+}
+body.theme-darkmin .page-title::before {
+  width: 4px;
+  border-radius: 2px;
+  background: var(--primary);
+  box-shadow: none;
+}
+body.theme-darkmin .nav {
+  background: color-mix(in srgb, var(--bg) 90%, transparent);
+  border-bottom: 1px solid var(--border);
+}
+body.theme-darkmin .nav .link.active {
+  background: var(--bg-card);
+  color: var(--primary);
+  box-shadow: none;
+}
+body.theme-darkmin .brand-name {
+  background: none;
+  color: var(--text);
+  font-weight: 600;
+}
+body.theme-darkmin .brand-icon {
+  filter: none;
+}
+body.theme-darkmin .tag {
+  border-radius: 6px;
+}
+/* 游戏卡片：图标区纯平不铺渐变，图标不带投影 */
+body.theme-darkmin .game-card .icon-area {
+  background: var(--bg-panel);
+  border-bottom: 1px solid var(--border);
+}
+body.theme-darkmin .game-card .game-icon {
+  filter: none;
+}
+/* 筛选纸片：无渐变无光效，选中只换色 */
+body.theme-darkmin .chip.on {
+  background: var(--bg-card);
+  color: var(--primary);
+  border-color: var(--primary);
+  box-shadow: none;
+}
+body.theme-darkmin .modal {
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+}
+
+/* =====================================================================
+   7. 水墨古风 ink —— 宣纸、裱框、朱砂印、书卷气
+   ===================================================================== */
+body.theme-ink {
+  /* 宣纸纤维纹理：极淡的经纬织纹 + 大面积留白 */
+  background-image: repeating-linear-gradient(0deg, rgba(43, 38, 32, 0.016) 0 2px, transparent 2px 4px),
+    repeating-linear-gradient(90deg, rgba(43, 38, 32, 0.016) 0 2px, transparent 2px 4px),
+    radial-gradient(ellipse 60% 42% at 82% -6%, rgba(61, 107, 92, 0.07), transparent);
+  /* 楷体正文：一笔一划的书卷气 */
+  font-family: 'KaiTi', '楷体', 'STKaiti', 'Kaiti SC', Georgia, 'Songti SC', serif;
+  font-size: 15.5px;
+}
+/* 双线裱框：细边框外再套一圈淡线，像装裱的画轴 */
+body.theme-ink .panel,
+body.theme-ink .card,
+body.theme-ink .modal {
+  border: 1px solid var(--border);
+  outline: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
+  outline-offset: 4px;
+  box-shadow: 0 2px 10px rgba(43, 38, 32, 0.05);
+}
+body.theme-ink .card:hover {
+  transform: translateY(-2px);
+  border-color: var(--primary);
+  box-shadow: 0 8px 22px rgba(43, 38, 32, 0.12);
+}
+/* 按钮：朱砂色方章 */
+body.theme-ink .btn {
+  background: var(--primary);
+  border-radius: 4px;
+  font-family: inherit;
+  letter-spacing: 4px;
+  box-shadow: none;
+}
+body.theme-ink .btn:hover {
+  filter: brightness(0.92);
+}
+body.theme-ink .btn-accent {
+  background: var(--accent);
+}
+body.theme-ink .btn-ghost {
+  border: 1px solid var(--primary);
+  color: var(--primary);
+  letter-spacing: 4px;
+}
+body.theme-ink .input {
+  background: #fff;
+  border-radius: 4px;
+}
+/* 标题：左侧一枚歪盖的朱砂印 */
+body.theme-ink .page-title {
+  letter-spacing: 6px;
+  font-weight: 700;
+}
+body.theme-ink .page-title::before {
+  content: '戏';
+  width: 26px;
+  height: 26px;
+  background: var(--primary);
+  box-shadow: none;
+  border-radius: 4px;
+  color: #fff8f0;
+  font-size: 15px;
+  font-weight: 400;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transform: rotate(-4deg);
+}
+body.theme-ink .nav {
+  background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
+  border-bottom: 1px solid var(--border);
+}
+body.theme-ink .nav .link {
+  border-radius: 0;
+  letter-spacing: 2px;
+}
+body.theme-ink .nav .link.active {
+  background: transparent;
+  color: var(--primary);
+  border-bottom: 2px solid var(--primary);
+  box-shadow: none;
+}
+body.theme-ink .brand-name {
+  background: none;
+  color: var(--text);
+  letter-spacing: 3px;
+}
+body.theme-ink .brand-icon {
+  filter: none;
+}
+body.theme-ink .tag {
+  border-radius: 2px;
+  background: transparent;
+  letter-spacing: 1px;
+}
+body.theme-ink .tag-primary {
+  background: color-mix(in srgb, var(--primary) 8%, transparent);
+}
+body.theme-ink .avatar {
+  border-radius: 4px;
+  background: #fff;
+}
+body.theme-ink .modal {
+  box-shadow: 0 16px 48px rgba(43, 38, 32, 0.18);
+}
+/* 游戏卡片：图标区做旧宣纸色，右下角落一枚小朱印 */
+body.theme-ink .game-card .icon-area {
+  background: #f3eddc;
+  border-bottom: 1px solid var(--border);
+}
+body.theme-ink .game-card .icon-area::after {
+  content: '';
+  position: absolute;
+  right: 9px;
+  bottom: 9px;
+  width: 13px;
+  height: 13px;
+  background: var(--primary);
+  border-radius: 2px;
+  opacity: 0.85;
+  transform: rotate(-8deg);
+}
+body.theme-ink .game-card .game-icon {
+  filter: saturate(0.72) contrast(0.95);
+}
+body.theme-ink .game-card .name {
+  letter-spacing: 2px;
+}
+body.theme-ink .game-card .price-tag,
+body.theme-ink .game-card .owned-tag,
+body.theme-ink .game-card .free-tag {
+  border-radius: 2px;
+  letter-spacing: 1px;
+}
+body.theme-ink .game-card .price-tag {
+  background: var(--primary);
+}
+/* 筛选纸片：留白 + 朱砂描边选中 */
+body.theme-ink .chip {
+  border-radius: 2px;
+  background: transparent;
+  letter-spacing: 2px;
+}
+body.theme-ink .chip.on {
+  background: transparent;
+  color: var(--primary);
+  border-color: var(--primary);
+  box-shadow: none;
+}
+body.theme-ink ::-webkit-scrollbar-thumb {
+  background: #cfc6b0;
+}
+
+/* =====================================================================
+   8. 终端黑客 terminal —— 等宽字、方括号按键、磷光绿屏
+   一切都像跑在一台老式终端里：按钮是 [命令]，标题后面有跳动的光标
+   ===================================================================== */
+body.theme-terminal {
+  /* 磷光屏底：极淡的绿色网格 + 顶部余晖 */
+  background-image: linear-gradient(rgba(53, 242, 107, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(53, 242, 107, 0.04) 1px, transparent 1px),
+    radial-gradient(ellipse 70% 42% at 50% 0, rgba(53, 242, 107, 0.07), transparent);
+  background-size: 30px 30px, 30px 30px, 100% 100%;
+  font-family: 'Consolas', 'Courier New', 'Microsoft YaHei', monospace;
+}
+/* 扫描线覆盖层：偶尔像老 CRT 一样闪一下 */
+body.theme-terminal::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9990;
+  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.14) 2px 4px);
+  animation: term-flicker 5s steps(1) infinite;
+}
+@keyframes term-flicker {
+  0%,
+  91%,
+  93.5%,
+  100% {
+    background-color: transparent;
+  }
+  92% {
+    background-color: rgba(190, 255, 205, 0.04);
+  }
+}
+/* 全站直角：终端里没有圆角这回事 */
+body.theme-terminal .panel,
+body.theme-terminal .card,
+body.theme-terminal .modal,
+body.theme-terminal .input,
+body.theme-terminal .tag,
+body.theme-terminal .toast,
+body.theme-terminal .avatar,
+body.theme-terminal .btn,
+body.theme-terminal .chip,
+body.theme-terminal .nav .link {
+  border-radius: 0;
+}
+body.theme-terminal .panel,
+body.theme-terminal .card,
+body.theme-terminal .modal {
+  border: 1px solid var(--border);
+  box-shadow: inset 0 0 0 1px rgba(53, 242, 107, 0.05), inset 0 0 26px rgba(53, 242, 107, 0.04);
+}
+/* 卡片交互：不位移，通电发光 */
+body.theme-terminal .card:hover {
+  transform: none;
+  border-color: var(--primary);
+  background: color-mix(in srgb, var(--bg-card) 88%, var(--primary) 6%);
+  box-shadow: inset 0 0 0 1px rgba(53, 242, 107, 0.12), var(--glow);
+}
+/* 按钮 = 一条可执行的命令：[开始游戏]，悬停反色像被选中 */
+body.theme-terminal .btn {
+  background: transparent;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+  font-family: inherit;
+  font-weight: 700;
+  letter-spacing: 1px;
+  gap: 2px;
+}
+body.theme-terminal .btn::before {
+  content: '[';
+  opacity: 0.65;
+}
+body.theme-terminal .btn::after {
+  content: ']';
+  opacity: 0.65;
+}
+body.theme-terminal .btn:hover {
+  filter: none;
+  background: var(--primary);
+  color: #041208;
+  box-shadow: var(--glow);
+}
+body.theme-terminal .btn:active {
+  transform: translate(1px, 1px);
+}
+body.theme-terminal .btn-accent {
+  background: transparent;
+  border-color: var(--primary-2);
+  color: var(--primary-2);
+}
+body.theme-terminal .btn-accent:hover {
+  background: var(--primary-2);
+  color: #1a1206;
+  box-shadow: 0 0 14px rgba(255, 176, 32, 0.4);
+}
+body.theme-terminal .btn-ghost {
+  border: 1px dashed var(--border);
+  color: var(--text-dim);
+}
+body.theme-terminal .btn-ghost:hover {
+  background: transparent;
+  border-color: var(--primary);
+  color: var(--primary);
+  box-shadow: none;
+}
+body.theme-terminal .input {
+  border-color: var(--border);
+  font-family: inherit;
+}
+body.theme-terminal .input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary), 0 0 12px rgba(53, 242, 107, 0.25);
+}
+/* 标题：提示符 > 开头，结尾一枚跳动的块状光标 */
+body.theme-terminal .page-title {
+  font-family: inherit;
+  letter-spacing: 1px;
+}
+body.theme-terminal .page-title::before {
+  content: '>';
+  width: auto;
+  height: auto;
+  background: none;
+  box-shadow: none;
+  color: var(--primary);
+  font-weight: 900;
+}
+body.theme-terminal .page-title::after {
+  content: '▊';
+  color: var(--primary);
+  animation: term-caret 1s steps(2, end) infinite;
+}
+@keyframes term-caret {
+  50% {
+    opacity: 0;
+  }
+}
+body.theme-terminal .nav {
+  background: rgba(3, 9, 3, 0.92);
+  backdrop-filter: none;
+  border-bottom: 1px solid var(--primary);
+  box-shadow: 0 0 18px rgba(53, 242, 107, 0.14);
+}
+body.theme-terminal .nav .link.active {
+  background: transparent;
+  color: var(--primary);
+  box-shadow: inset 0 -2px 0 var(--primary);
+}
+body.theme-terminal .brand-name {
+  background: none;
+  color: var(--primary);
+  font-family: inherit;
+  text-shadow: 0 0 8px rgba(53, 242, 107, 0.55);
+}
+body.theme-terminal .brand-icon {
+  filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(3);
+}
+/* 标签与筛选：虚线框像注释，选中变实线通电 */
+body.theme-terminal .tag {
+  border: 1px dashed var(--border);
+  background: transparent;
+  font-family: inherit;
+}
+body.theme-terminal .chip {
+  border: 1px dashed var(--border);
+  background: transparent;
+}
+body.theme-terminal .chip.on {
+  border-style: solid;
+  border-color: var(--primary);
+  color: var(--primary);
+  background: rgba(53, 242, 107, 0.08);
+  box-shadow: none;
+}
+body.theme-terminal .toast {
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  font-family: inherit;
+}
+/* 游戏卡片：图标区铺网格，图标带磷光辉光 */
+body.theme-terminal .game-card .icon-area {
+  background: linear-gradient(rgba(53, 242, 107, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(53, 242, 107, 0.05) 1px, transparent 1px);
+  background-size: 16px 16px;
+  border-bottom: 1px solid var(--border);
+}
+body.theme-terminal .game-card .game-icon {
+  filter: drop-shadow(0 0 10px rgba(53, 242, 107, 0.45));
+}
+body.theme-terminal .game-card .price-tag,
+body.theme-terminal .game-card .owned-tag,
+body.theme-terminal .game-card .free-tag {
+  border-radius: 0;
+  font-family: inherit;
+}
+body.theme-terminal ::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background: var(--border);
+}
+body.theme-terminal ::-webkit-scrollbar-thumb:hover {
+  background: var(--primary);
+}
+
+/* =====================================================================
+   9. 蒸汽朋克 steampunk —— 黄铜、铆钉、皮革与齿轮
+   面板是四角打着铆钉的金属铭牌，按钮是有配重感的机械铜钮
+   ===================================================================== */
+body.theme-steampunk {
+  /* 深色皮革双斜织纹 + 顶部一盏暖黄铜光 */
+  background-image: repeating-linear-gradient(45deg, rgba(240, 227, 201, 0.02) 0 2px, transparent 2px 6px),
+    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 6px),
+    radial-gradient(ellipse 90% 60% at 50% -12%, rgba(192, 138, 62, 0.18), transparent);
+  font-family: Georgia, 'Times New Roman', 'SimSun', '宋体', 'Songti SC', serif;
+  font-size: 15px;
+}
+/* 金属铭牌三件套：双圈边框 + 四角铆钉 + 顶部拉丝高光 */
+body.theme-steampunk .panel,
+body.theme-steampunk .card,
+body.theme-steampunk .modal {
+  border: 2px solid var(--border);
+  outline: 1px solid rgba(192, 138, 62, 0.22);
+  outline-offset: -7px;
+  background-image: radial-gradient(circle 3px at 8px 8px, #d8a54e 1.6px, #3a2a12 2.2px, transparent 3px),
+    radial-gradient(circle 3px at calc(100% - 8px) 8px, #d8a54e 1.6px, #3a2a12 2.2px, transparent 3px),
+    radial-gradient(circle 3px at 8px calc(100% - 8px), #d8a54e 1.6px, #3a2a12 2.2px, transparent 3px),
+    radial-gradient(circle 3px at calc(100% - 8px) calc(100% - 8px), #d8a54e 1.6px, #3a2a12 2.2px, transparent 3px),
+    linear-gradient(180deg, rgba(240, 227, 201, 0.05), transparent 24%);
+  box-shadow: inset 0 1px 0 rgba(240, 227, 201, 0.1), 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+body.theme-steampunk .card:hover {
+  transform: translateY(-2px);
+  border-color: var(--primary);
+  box-shadow: inset 0 1px 0 rgba(240, 227, 201, 0.12), 0 8px 20px rgba(0, 0, 0, 0.5), var(--glow);
+}
+/* 机械铜钮：竖向铜质渐变 + 上高光下阴影，按下咔哒内凹 */
+body.theme-steampunk .btn {
+  background: linear-gradient(180deg, #d8a54e, #a06c2c 55%, #8a5a2b);
+  border: 1px solid #4a3418;
+  color: #241505;
+  text-shadow: 0 1px 0 rgba(255, 235, 195, 0.45);
+  font-family: inherit;
+  font-weight: 700;
+  letter-spacing: 2px;
+  box-shadow: inset 0 1px 0 rgba(255, 235, 195, 0.55), inset 0 -2px 3px rgba(60, 36, 8, 0.55),
+    0 3px 6px rgba(0, 0, 0, 0.45);
+}
+body.theme-steampunk .btn:hover {
+  filter: brightness(1.1) saturate(1.08);
+  box-shadow: inset 0 1px 0 rgba(255, 235, 195, 0.55), inset 0 -2px 3px rgba(60, 36, 8, 0.55),
+    0 3px 12px rgba(192, 138, 62, 0.55);
+}
+body.theme-steampunk .btn:active {
+  transform: translateY(1px);
+  box-shadow: inset 0 2px 6px rgba(40, 22, 4, 0.65);
+}
+body.theme-steampunk .btn-accent {
+  background: linear-gradient(180deg, #6fbfa8, #3f7f6d 55%, #35695b);
+  border-color: #1e4038;
+  color: #06201a;
+  text-shadow: 0 1px 0 rgba(220, 255, 244, 0.35);
+}
+body.theme-steampunk .btn-ghost {
+  background: transparent;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+  box-shadow: none;
+  text-shadow: none;
+}
+body.theme-steampunk .btn-ghost:hover {
+  background: rgba(192, 138, 62, 0.12);
+  filter: none;
+}
+/* 输入框：凹进金属面板里的开孔 */
+body.theme-steampunk .input {
+  background: #150d06;
+  border: 1px solid var(--border);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55);
+}
+body.theme-steampunk .input:focus {
+  border-color: var(--primary);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(192, 138, 62, 0.25);
+}
+/* 标题：左侧一枚常转的黄铜齿轮 */
+body.theme-steampunk .page-title {
+  letter-spacing: 3px;
+  font-weight: 700;
+}
+body.theme-steampunk .page-title::before {
+  content: '⚙';
+  width: auto;
+  height: auto;
+  background: none;
+  box-shadow: none;
+  color: var(--primary);
+  font-size: 22px;
+  animation: steam-gear 6s linear infinite;
+}
+@keyframes steam-gear {
+  to {
+    transform: rotate(360deg);
+  }
+}
+body.theme-steampunk .nav {
+  background: linear-gradient(180deg, #2c1d10, #241810);
+  backdrop-filter: none;
+  border-bottom: 2px solid var(--primary);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.5);
+}
+body.theme-steampunk .nav .link.active {
+  background: linear-gradient(180deg, #d8a54e, #8a5a2b);
+  color: #241505;
+  box-shadow: inset 0 1px 0 rgba(255, 235, 195, 0.5);
+}
+body.theme-steampunk .brand-name {
+  background: none;
+  color: var(--primary);
+  font-family: inherit;
+  letter-spacing: 2px;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
+}
+body.theme-steampunk .brand-icon {
+  filter: sepia(0.6) saturate(1.4) hue-rotate(-12deg);
+}
+/* 标签：小铜牌 */
+body.theme-steampunk .tag {
+  background: rgba(192, 138, 62, 0.1);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+body.theme-steampunk .chip {
+  border-radius: 4px;
+}
+body.theme-steampunk .chip.on {
+  background: linear-gradient(180deg, #d8a54e, #8a5a2b);
+  color: #241505;
+  border-color: #4a3418;
+  box-shadow: inset 0 1px 0 rgba(255, 235, 195, 0.5);
+}
+body.theme-steampunk .toast {
+  border: 2px solid rgba(74, 52, 24, 0.85);
+  border-radius: 6px;
+  font-family: inherit;
+}
+body.theme-steampunk .avatar {
+  border: 2px solid var(--border);
+  background: #201409;
+}
+body.theme-steampunk .modal {
+  box-shadow: inset 0 1px 0 rgba(240, 227, 201, 0.1), 0 20px 56px rgba(0, 0, 0, 0.65);
+}
+/* 游戏卡片：暖光舞台 + 微做旧的图标 */
+body.theme-steampunk .game-card .icon-area {
+  background: radial-gradient(ellipse 70% 80% at 50% 18%, rgba(192, 138, 62, 0.22), transparent), #201409;
+  border-bottom: 2px solid var(--border);
+}
+body.theme-steampunk .game-card .game-icon {
+  filter: sepia(0.35) saturate(0.95) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
+}
+body.theme-steampunk .game-card .price-tag {
+  background: linear-gradient(180deg, #d8a54e, #8a5a2b);
+  color: #241505;
+  border-radius: 4px;
+}
+body.theme-steampunk .game-card .owned-tag,
+body.theme-steampunk .game-card .free-tag {
+  border-radius: 4px;
+}
+body.theme-steampunk ::-webkit-scrollbar-thumb {
+  background: #6a4d28;
+  border-radius: 4px;
+}
+
+/* =====================================================================
+   10. 深海玻璃 ocean —— 磨砂玻璃面板悬浮深海，气泡上浮，按钮掠过波光
+   ===================================================================== */
+body.theme-ocean {
+  background-image: radial-gradient(ellipse 70% 46% at 26% -8%, rgba(64, 190, 255, 0.18), transparent),
+    radial-gradient(ellipse 52% 40% at 78% -6%, rgba(52, 224, 194, 0.1), transparent),
+    linear-gradient(180deg, #0a2a44 0%, #051726 46%, #030f1c 100%);
+  background-attachment: fixed;
+  letter-spacing: 0.2px;
+}
+/* 水面斜射下来的光柱，缓慢摇动 */
+body.theme-ocean::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 10%;
+  width: 36%;
+  height: 62vh;
+  pointer-events: none;
+  z-index: 0;
+  background: linear-gradient(195deg, rgba(140, 220, 255, 0.08), transparent 70%);
+  clip-path: polygon(22% 0, 62% 0, 100% 100%, 0 100%);
+  animation: ocean-ray 9s ease-in-out infinite alternate;
+}
+@keyframes ocean-ray {
+  to {
+    transform: translateX(9%) skewX(-5deg);
+    opacity: 0.65;
+  }
+}
+/* 气泡群持续上浮（同尺寸平铺保证循环无缝） */
+body.theme-ocean::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9990;
+  background-image: radial-gradient(circle 3px at 12% 88%, rgba(255, 255, 255, 0.22) 2px, transparent 3px),
+    radial-gradient(circle 2px at 38% 64%, rgba(255, 255, 255, 0.16) 1.4px, transparent 2px),
+    radial-gradient(circle 4px at 64% 92%, rgba(255, 255, 255, 0.13) 3px, transparent 4px),
+    radial-gradient(circle 2.5px at 85% 74%, rgba(255, 255, 255, 0.18) 1.8px, transparent 2.5px),
+    radial-gradient(circle 1.6px at 50% 40%, rgba(255, 255, 255, 0.14) 1.1px, transparent 1.6px);
+  background-size: 100% 120vh;
+  animation: ocean-bubbles 22s linear infinite;
+}
+@keyframes ocean-bubbles {
+  to {
+    background-position: 0 -120vh;
+  }
+}
+/* 磨砂玻璃三件套：半透明底 + 毛玻璃 + 顶部一线白高光（玻璃厚度） */
+body.theme-ocean .panel,
+body.theme-ocean .card,
+body.theme-ocean .modal {
+  border: 1px solid var(--border);
+  backdrop-filter: blur(14px) saturate(1.25);
+  -webkit-backdrop-filter: blur(14px) saturate(1.25);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 30px rgba(2, 16, 28, 0.45);
+}
+body.theme-ocean .card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(52, 224, 194, 0.55);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--glow);
+}
+body.theme-ocean .modal {
+  background: rgba(13, 45, 71, 0.82);
+}
+/* 玻璃胶囊按钮：悬停一道波光从左掠到右 */
+body.theme-ocean .btn {
+  position: relative;
+  overflow: hidden;
+  border-radius: 999px;
+  background: linear-gradient(135deg, rgba(41, 197, 255, 0.85), rgba(110, 140, 255, 0.85));
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 18px rgba(41, 197, 255, 0.25);
+}
+body.theme-ocean .btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -80%;
+  width: 60%;
+  height: 100%;
+  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
+  transform: skewX(-18deg);
+}
+body.theme-ocean .btn:hover {
+  filter: brightness(1.06);
+}
+body.theme-ocean .btn:hover::before {
+  animation: ocean-sheen 0.6s ease;
+}
+@keyframes ocean-sheen {
+  to {
+    left: 130%;
+  }
+}
+body.theme-ocean .btn:active {
+  transform: scale(0.96);
+}
+body.theme-ocean .btn-accent {
+  background: linear-gradient(135deg, rgba(52, 224, 194, 0.9), rgba(41, 197, 255, 0.85));
+  color: #052a26;
+}
+body.theme-ocean .btn-ghost {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: var(--text);
+  backdrop-filter: blur(8px);
+  box-shadow: none;
+}
+body.theme-ocean .btn-ghost:hover {
+  border-color: rgba(52, 224, 194, 0.6);
+  color: var(--accent);
+}
+body.theme-ocean .input {
+  background: rgba(5, 23, 38, 0.55);
+  border: 1px solid rgba(126, 208, 255, 0.25);
+  border-radius: 12px;
+}
+body.theme-ocean .input:focus {
+  border-color: rgba(52, 224, 194, 0.6);
+  box-shadow: 0 0 0 3px rgba(52, 224, 194, 0.15);
+}
+/* 标题：一串上下浮动的气泡 */
+body.theme-ocean .page-title::before {
+  content: '🫧';
+  width: auto;
+  height: auto;
+  background: none;
+  box-shadow: none;
+  font-size: 20px;
+  animation: ocean-bob 3s ease-in-out infinite;
+}
+@keyframes ocean-bob {
+  50% {
+    transform: translateY(-4px);
+  }
+}
+body.theme-ocean .nav {
+  background: rgba(8, 32, 52, 0.55);
+  backdrop-filter: blur(16px) saturate(1.3);
+  border-bottom: 1px solid rgba(126, 208, 255, 0.2);
+}
+body.theme-ocean .nav .link {
+  border-radius: 999px;
+}
+body.theme-ocean .nav .link.active {
+  background: rgba(41, 197, 255, 0.18);
+  color: #bdeeff;
+  box-shadow: inset 0 0 0 1px rgba(41, 197, 255, 0.4);
+}
+body.theme-ocean .brand-name {
+  background: linear-gradient(90deg, #6ee7ff, #34e0c2);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+/* 标签与筛选：小玻璃片 */
+body.theme-ocean .tag {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(126, 208, 255, 0.25);
+}
+body.theme-ocean .chip {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(126, 208, 255, 0.22);
+}
+body.theme-ocean .chip.on {
+  background: rgba(41, 197, 255, 0.2);
+  border-color: rgba(41, 197, 255, 0.55);
+  color: #bdeeff;
+  box-shadow: none;
+}
+body.theme-ocean .toast {
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 14px;
+}
+body.theme-ocean .avatar {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(126, 208, 255, 0.3);
+}
+/* 游戏卡片：从水面往下看的光锥，图标带水光 */
+body.theme-ocean .game-card .icon-area {
+  background: linear-gradient(180deg, rgba(64, 190, 255, 0.22), rgba(5, 23, 38, 0.05) 80%);
+  border-bottom: 1px solid rgba(126, 208, 255, 0.18);
+}
+body.theme-ocean .game-card .game-icon {
+  filter: drop-shadow(0 8px 16px rgba(41, 197, 255, 0.45));
+}
+body.theme-ocean .game-card .price-tag,
+body.theme-ocean .game-card .owned-tag,
+body.theme-ocean .game-card .free-tag {
+  backdrop-filter: blur(6px);
+}
+body.theme-ocean ::-webkit-scrollbar-thumb {
+  background: rgba(126, 208, 255, 0.35);
+  border-radius: 999px;
+}
+
+/* =====================================================================
+   11. 樱花和风 sakura —— 花瓣飘落、绯红团子按钮、标题摇曳的樱花
+   ===================================================================== */
+body.theme-sakura {
+  /* 米粉底 + 顶部粉霞 + 极淡的鱼鳞（青海波）弧纹 */
+  background-image: radial-gradient(circle 30px at 50% -6px, transparent 25px, rgba(217, 69, 95, 0.06) 25.5px 27px, transparent 28px),
+    radial-gradient(circle 30px at 0 38px, transparent 25px, rgba(143, 119, 181, 0.05) 25.5px 27px, transparent 28px),
+    radial-gradient(circle 30px at 100% 38px, transparent 25px, rgba(143, 119, 181, 0.05) 25.5px 27px, transparent 28px),
+    radial-gradient(ellipse 80% 38% at 50% -6%, rgba(242, 165, 180, 0.28), transparent);
+  background-size: 64px 44px, 64px 44px, 64px 44px, 100% 100%;
+  font-family: 'Yu Mincho', 'KaiTi', '楷体', 'STKaiti', 'Kaiti SC', 'Microsoft YaHei', serif;
+  font-size: 15px;
+}
+/* 两层花瓣以不同速度徐徐飘落（尺寸=平铺周期，循环无缝） */
+body.theme-sakura::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9990;
+  background-image: radial-gradient(ellipse 4px 3px at 22% 10%, rgba(240, 148, 168, 0.4) 60%, transparent 61%),
+    radial-gradient(ellipse 3px 2.4px at 58% 4%, rgba(217, 69, 95, 0.28) 60%, transparent 61%),
+    radial-gradient(ellipse 3.4px 2.6px at 86% 12%, rgba(242, 165, 180, 0.36) 60%, transparent 61%);
+  background-size: 100% 80vh;
+  animation: sakura-fall 26s linear infinite;
+}
+body.theme-sakura::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9990;
+  background-image: radial-gradient(ellipse 6px 4.6px at 12% 14%, rgba(240, 148, 168, 0.55) 60%, transparent 61%),
+    radial-gradient(ellipse 5px 4px at 40% 2%, rgba(242, 165, 180, 0.5) 60%, transparent 61%),
+    radial-gradient(ellipse 5.4px 4.2px at 72% 8%, rgba(217, 69, 95, 0.34) 60%, transparent 61%),
+    radial-gradient(ellipse 4.6px 3.6px at 94% 18%, rgba(240, 148, 168, 0.45) 60%, transparent 61%);
+  background-size: 100% 90vh;
+  animation: sakura-fall 13s linear infinite;
+}
+@keyframes sakura-fall {
+  to {
+    background-position: 0 90vh;
+  }
+}
+/* 和纸卡片：白底细粉边 + 柔粉影 */
+body.theme-sakura .panel,
+body.theme-sakura .card,
+body.theme-sakura .modal {
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--border);
+  box-shadow: 0 4px 16px rgba(217, 69, 95, 0.07);
+}
+body.theme-sakura .card:hover {
+  transform: translateY(-3px);
+  border-color: var(--primary-2);
+  box-shadow: var(--glow);
+}
+/* 团子按钮：圆滚滚，悬停轻轻浮起，按下压扁一点 */
+body.theme-sakura .btn {
+  background: var(--primary);
+  border-radius: 999px;
+  letter-spacing: 3px;
+  box-shadow: 0 4px 12px rgba(217, 69, 95, 0.28);
+  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
+}
+body.theme-sakura .btn:hover {
+  filter: none;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 18px rgba(217, 69, 95, 0.35);
+}
+body.theme-sakura .btn:active {
+  transform: translateY(0) scale(0.96);
+  box-shadow: 0 2px 6px rgba(217, 69, 95, 0.3);
+}
+body.theme-sakura .btn-accent {
+  background: var(--accent);
+  box-shadow: 0 4px 12px rgba(111, 158, 99, 0.3);
+}
+body.theme-sakura .btn-ghost {
+  background: #fff;
+  border: 1px solid var(--primary-2);
+  color: var(--primary);
+  box-shadow: none;
+}
+body.theme-sakura .btn-ghost:hover {
+  background: #fff0f2;
+  border-color: var(--primary);
+}
+body.theme-sakura .input {
+  background: #fff;
+  border-radius: 12px;
+}
+body.theme-sakura .input:focus {
+  border-color: var(--primary-2);
+  box-shadow: 0 0 0 3px rgba(242, 165, 180, 0.35);
+}
+/* 标题：一朵随风摇曳的樱花 */
+body.theme-sakura .page-title {
+  letter-spacing: 4px;
+  font-weight: 700;
+}
+body.theme-sakura .page-title::before {
+  content: '🌸';
+  width: auto;
+  height: auto;
+  background: none;
+  box-shadow: none;
+  font-size: 20px;
+  transform-origin: 50% 0;
+  animation: sakura-sway 3.2s ease-in-out infinite;
+}
+@keyframes sakura-sway {
+  0%,
+  100% {
+    transform: rotate(-8deg);
+  }
+  50% {
+    transform: rotate(10deg);
+  }
+}
+body.theme-sakura .nav {
+  background: rgba(255, 251, 250, 0.86);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border);
+}
+body.theme-sakura .nav .link {
+  border-radius: 999px;
+  letter-spacing: 1px;
+}
+body.theme-sakura .nav .link.active {
+  background: var(--primary);
+  color: #fff;
+  box-shadow: 0 4px 10px rgba(217, 69, 95, 0.3);
+}
+body.theme-sakura .brand-name {
+  background: none;
+  color: var(--primary);
+  letter-spacing: 2px;
+}
+body.theme-sakura .brand-icon {
+  filter: none;
+}
+body.theme-sakura .tag {
+  background: #fff;
+  border-radius: 999px;
+}
+body.theme-sakura .avatar {
+  background: #fff;
+}
+body.theme-sakura .toast {
+  border-radius: 14px;
+  letter-spacing: 1px;
+}
+body.theme-sakura .modal {
+  box-shadow: 0 18px 48px rgba(120, 60, 70, 0.22);
+}
+/* 游戏卡片：粉霞图标区，右上角落一朵小樱花 */
+body.theme-sakura .game-card .icon-area {
+  background: linear-gradient(180deg, #ffe9ec, #fff6f5);
+  border-bottom: 1px solid var(--border);
+}
+body.theme-sakura .game-card .icon-area::after {
+  content: '🌸';
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  font-size: 14px;
+  opacity: 0.7;
+  transform: rotate(14deg);
+}
+body.theme-sakura .game-card .game-icon {
+  filter: drop-shadow(0 6px 12px rgba(217, 69, 95, 0.25));
+}
+body.theme-sakura .game-card .price-tag {
+  background: var(--primary);
+  border-radius: 999px;
+}
+body.theme-sakura .game-card .owned-tag,
+body.theme-sakura .game-card .free-tag {
+  border-radius: 999px;
+}
+body.theme-sakura .chip {
+  background: #fff;
+  border-radius: 999px;
+}
+body.theme-sakura .chip.on {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+  box-shadow: 0 3px 8px rgba(217, 69, 95, 0.3);
+}
+body.theme-sakura ::-webkit-scrollbar-thumb {
+  background: #eeb7c2;
+  border-radius: 999px;
+}
+
+/* =====================================================================
+   12. 星际深空 space —— 三层星野明暗闪烁，流星划过，太空舱按钮
+   ===================================================================== */
+body.theme-space {
+  background-image: radial-gradient(1.6px 1.6px at 18% 22%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
+    radial-gradient(1.2px 1.2px at 66% 46%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
+    radial-gradient(2px 2px at 42% 78%, rgba(200, 225, 255, 0.6) 50%, transparent 51%),
+    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(123, 108, 255, 0.22), transparent),
+    radial-gradient(ellipse 50% 36% at 8% -10%, rgba(89, 216, 255, 0.12), transparent);
+  background-size: 220px 220px, 150px 150px, 280px 280px, 100% 100%, 100% 100%;
+  letter-spacing: 0.3px;
+}
+/* 第二层星野：整体明暗呼吸，像星星在闪 */
+body.theme-space::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image: radial-gradient(2px 2px at 30% 40%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
+    radial-gradient(1.4px 1.4px at 72% 18%, rgba(180, 220, 255, 0.8) 50%, transparent 51%),
+    radial-gradient(1.8px 1.8px at 86% 66%, rgba(255, 240, 200, 0.75) 50%, transparent 51%),
+    radial-gradient(1.2px 1.2px at 12% 82%, rgba(255, 255, 255, 0.7) 50%, transparent 51%);
+  background-size: 300px 300px, 240px 240px, 340px 340px, 200px 200px;
+  animation: space-twinkle 3.4s ease-in-out infinite alternate;
+}
+@keyframes space-twinkle {
+  from {
+    opacity: 0.3;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* 每隔几秒一颗流星划过 */
+body.theme-space::after {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 130px;
+  height: 2px;
+  pointer-events: none;
+  z-index: 9990;
+  border-radius: 999px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
+  opacity: 0;
+  animation: space-meteor 8s linear infinite;
+}
+@keyframes space-meteor {
+  0%,
+  88% {
+    opacity: 0;
+    transform: translate(104vw, -6vh) rotate(-28deg);
+  }
+  89% {
+    opacity: 1;
+  }
+  97% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 0;
+    transform: translate(28vw, 54vh) rotate(-28deg);
+  }
+}
+body.theme-space .panel,
+body.theme-space .card,
+body.theme-space .modal {
+  border: 1px solid var(--border);
+  box-shadow: inset 0 0 30px rgba(123, 108, 255, 0.05), 0 6px 22px rgba(0, 0, 0, 0.4);
+}
+body.theme-space .card:hover {
+  transform: translateY(-4px);
+  border-color: var(--accent);
+  box-shadow: inset 0 0 30px rgba(89, 216, 255, 0.07), var(--glow);
+}
+/* 太空舱按钮：渐变描边 + 舱内紫光，悬停底部点火喷出金色尾焰 */
+body.theme-space .btn {
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
+    linear-gradient(135deg, var(--primary), var(--accent)) border-box;
+  color: #d6d1ff;
+  box-shadow: inset 0 0 14px rgba(123, 108, 255, 0.25);
+  transition: box-shadow 0.2s, transform 0.15s;
+}
+body.theme-space .btn:hover {
+  filter: none;
+  transform: translateY(-1px);
+  box-shadow: inset 0 0 18px rgba(123, 108, 255, 0.4), 0 6px 20px rgba(255, 177, 77, 0.35);
+}
+body.theme-space .btn:active {
+  transform: translateY(1px);
+  box-shadow: inset 0 0 20px rgba(123, 108, 255, 0.5);
+}
+body.theme-space .btn-accent {
+  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
+    linear-gradient(135deg, var(--accent), var(--primary-2)) border-box;
+  color: #aef;
+}
+body.theme-space .btn-ghost {
+  background: transparent;
+  border: 1px dashed var(--border);
+  color: var(--text-dim);
+  box-shadow: none;
+}
+body.theme-space .btn-ghost:hover {
+  border-style: solid;
+  border-color: var(--primary);
+  color: #d6d1ff;
+}
+body.theme-space .input {
+  background: rgba(8, 8, 26, 0.7);
+  border-radius: 10px;
+}
+body.theme-space .input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(123, 108, 255, 0.2), inset 0 0 12px rgba(123, 108, 255, 0.1);
+}
+/* 标题：一颗缓缓浮动的星球 */
+body.theme-space .page-title::before {
+  content: '🪐';
+  width: auto;
+  height: auto;
+  background: none;
+  box-shadow: none;
+  font-size: 20px;
+  animation: space-float 4s ease-in-out infinite;
+}
+@keyframes space-float {
+  50% {
+    transform: translateY(-4px) rotate(-8deg);
+  }
+}
+body.theme-space .nav {
+  background: rgba(8, 8, 26, 0.72);
+  backdrop-filter: blur(12px);
+  border-bottom: none;
+}
+body.theme-space .nav::after {
+  content: '';
+  display: block;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
+}
+body.theme-space .nav .link {
+  border-radius: 999px;
+}
+body.theme-space .nav .link.active {
+  background: linear-gradient(135deg, rgba(123, 108, 255, 0.25), rgba(89, 216, 255, 0.18));
+  box-shadow: inset 0 0 0 1px rgba(123, 108, 255, 0.5);
+  color: #d6d1ff;
+}
+body.theme-space .brand-name {
+  background: linear-gradient(90deg, #a99cff, #59d8ff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+body.theme-space .tag {
+  border-radius: 999px;
+  background: rgba(123, 108, 255, 0.08);
+}
+body.theme-space .chip {
+  border-radius: 999px;
+}
+body.theme-space .chip.on {
+  background: linear-gradient(135deg, rgba(123, 108, 255, 0.3), rgba(89, 216, 255, 0.2));
+  border-color: var(--primary);
+  color: #d6d1ff;
+  box-shadow: none;
+}
+body.theme-space .toast {
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+}
+body.theme-space .avatar {
+  background: var(--bg-card);
+}
+/* 游戏卡片：图标区就是一小片星空 */
+body.theme-space .game-card .icon-area {
+  background: radial-gradient(1.4px 1.4px at 22% 30%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
+    radial-gradient(1.2px 1.2px at 68% 18%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
+    radial-gradient(1.6px 1.6px at 82% 62%, rgba(180, 220, 255, 0.7) 50%, transparent 51%),
+    linear-gradient(200deg, rgba(123, 108, 255, 0.25), rgba(8, 8, 26, 0.2));
+  background-size: 90px 90px, 70px 70px, 110px 110px, 100% 100%;
+  border-bottom: 1px solid var(--border);
+}
+body.theme-space .game-card .game-icon {
+  filter: drop-shadow(0 0 12px rgba(123, 108, 255, 0.55));
+}
+body.theme-space .game-card .price-tag {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+}
+body.theme-space ::-webkit-scrollbar-thumb {
+  background: #4b44a0;
+  border-radius: 999px;
+}
diff --git a/src/views/Battle.vue b/src/views/Battle.vue
new file mode 100644
index 0000000..8eb1a89
--- /dev/null
+++ b/src/views/Battle.vue
@@ -0,0 +1,271 @@
+<script setup>
+// 联机对战大厅：创建房间（好友联机 / AI 对战，只选难度；AI 模型由后台统一配置）或凭邀请码加入
+import { ref, watch, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { toast } from '../api/http'
+import { useBattleStore } from '../stores/battle'
+
+const route = useRoute()
+const router = useRouter()
+const battle = useBattleStore()
+
+const games = [
+  { code: 'doudizhu', name: '斗地主', icon: '🎴', desc: '3 人经典斗地主，叫地主抢春天' },
+  { code: 'chess', name: '中国象棋', icon: '🐘', desc: '楚河汉界，红黑对弈' },
+  { code: 'monopoly', name: '大富翁', icon: '🎩', desc: '4 人掷骰买地收租，破产出局' },
+  { code: 'ludo', name: '飞行棋', icon: '✈️', desc: '4 人掷 6 起飞，击落对手抢先到达' },
+  { code: 'billiards', name: '2D台球', icon: '🎱', desc: '双人八球对决，清台后打黑八' },
+]
+const validCodes = games.map((g) => g.code)
+const game = ref(validCodes.includes(route.query.game) ? route.query.game : 'doudizhu')
+const mode = ref('ai') // ai / pvp
+const aiDifficulty = ref('medium')
+const joinCode = ref('')
+const busy = ref(false)
+
+const difficulties = [
+  { code: 'easy', name: '简单', icon: '🌱' },
+  { code: 'medium', name: '中等', icon: '⚔️' },
+  { code: 'hard', name: '困难', icon: '🔥' },
+]
+
+// 创建房间
+async function create() {
+  busy.value = true
+  try {
+    await battle.connect()
+    battle.createRoom({
+      game: game.value,
+      mode: mode.value,
+      // AI 模型由后台统一配置，这里只传难度
+      ai_difficulty: aiDifficulty.value,
+    })
+  } catch (e) {
+    toast('连接对战服务失败，请确认后端已启动')
+  } finally {
+    busy.value = false
+  }
+}
+
+// 加入房间
+async function join() {
+  const code = joinCode.value.trim().toUpperCase()
+  if (code.length !== 6) {
+    toast('请输入 6 位邀请码')
+    return
+  }
+  busy.value = true
+  try {
+    await battle.connect()
+    battle.joinRoom(code)
+  } catch (e) {
+    toast('连接对战服务失败，请确认后端已启动')
+  } finally {
+    busy.value = false
+  }
+}
+
+// 进入房间成功后跳转房间页
+watch(
+  () => battle.roomState,
+  (state) => {
+    if (state) router.push('/battle/room')
+  }
+)
+// 已在房间中（例如刷新后重连）直接进入
+onMounted(async () => {
+  try {
+    await battle.connect()
+    if (battle.roomState) router.push('/battle/room')
+  } catch (e) {
+    // 后端未启动时静默，等用户点击时再提示
+  }
+})
+</script>
+
+<template>
+  <div>
+    <h2 class="page-title">联机对战</h2>
+    <div class="battle-grid">
+      <!-- 创建房间 -->
+      <div class="panel">
+        <h3 class="sec-title">🏠 创建房间</h3>
+        <p class="sec-sub text-dim">选择游戏与模式，创建后把邀请码发给好友</p>
+        <div class="game-pick">
+          <button
+            v-for="g in games"
+            :key="g.code"
+            class="game-opt"
+            :class="{ on: game === g.code }"
+            @click="game = g.code"
+          >
+            <span class="g-icon">{{ g.icon }}</span>
+            <b>{{ g.name }}</b>
+            <span class="g-desc text-dim">{{ g.desc }}</span>
+          </button>
+        </div>
+        <div class="row">
+          <span class="label">对战模式</span>
+          <div class="seg">
+            <button class="seg-btn" :class="{ on: mode === 'ai' }" @click="mode = 'ai'">🤖 AI 对战</button>
+            <button class="seg-btn" :class="{ on: mode === 'pvp' }" @click="mode = 'pvp'">👥 好友联机</button>
+          </div>
+        </div>
+        <p v-if="mode === 'pvp'" class="text-dim" style="font-size: 12px; margin-bottom: 12px">
+          好友联机模式下，开局时空位也会自动由 AI 补位
+        </p>
+        <div class="row">
+          <span class="label">AI 难度</span>
+          <div class="seg">
+            <button
+              v-for="d in difficulties"
+              :key="d.code"
+              class="seg-btn"
+              :class="{ on: aiDifficulty === d.code }"
+              @click="aiDifficulty = d.code"
+            >
+              {{ d.icon }} {{ d.name }}
+            </button>
+          </div>
+        </div>
+        <button class="btn btn-lg create-btn" :disabled="busy" @click="create">
+          {{ busy ? '创建中…' : '创建房间' }}
+        </button>
+      </div>
+      <!-- 加入房间 -->
+      <div class="side">
+        <div class="panel">
+          <h3 class="sec-title">🎟️ 加入房间</h3>
+          <p class="sec-sub text-dim">输入好友分享的 6 位邀请码</p>
+          <input
+            v-model="joinCode"
+            class="input code-input"
+            maxlength="6"
+            placeholder="ABC123"
+            @keyup.enter="join"
+          />
+          <button class="btn btn-accent" style="width: 100%" :disabled="busy" @click="join">加入房间</button>
+        </div>
+        <div class="panel tips">
+          <h3 class="sec-title">💡 对战说明</h3>
+          <ul class="tip-list text-dim">
+            <li>获胜可得平台积分奖励（后台可配）</li>
+            <li>斗地主 3 人 · 象棋/台球 2 人 · 大富翁/飞行棋 4 人</li>
+            <li>空位由 AI 自动补位，随时可开</li>
+            <li>AI 模型由平台统一配置（后台「AI 设置」），你只需选择难度</li>
+            <li>断线 10 分钟内可重连回到对局</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.battle-grid {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+  gap: 16px;
+  align-items: start;
+}
+.sec-title {
+  font-size: 15px;
+  margin-bottom: 4px;
+}
+.sec-sub {
+  font-size: 12px;
+  margin-bottom: 14px;
+}
+.game-pick {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+.game-opt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 16px 10px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.game-opt.on {
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+}
+.g-icon {
+  font-size: 34px;
+}
+.g-desc {
+  font-size: 11px;
+}
+.row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+.label {
+  width: 64px;
+  font-size: 13px;
+  color: var(--text-dim);
+  padding-top: 8px;
+}
+.seg {
+  display: flex;
+  gap: 6px;
+  flex: 1;
+}
+.seg-btn {
+  flex: 1;
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+}
+.seg-btn.on {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+  border-color: transparent;
+}
+.create-btn {
+  width: 100%;
+  margin-top: 6px;
+}
+.side {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.code-input {
+  text-align: center;
+  font-size: 24px;
+  letter-spacing: 8px;
+  font-weight: 800;
+  text-transform: uppercase;
+  margin-bottom: 12px;
+}
+.tip-list {
+  padding-left: 18px;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+@media (max-width: 900px) {
+  .battle-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/views/BattleRoom.vue b/src/views/BattleRoom.vue
new file mode 100644
index 0000000..279c435
--- /dev/null
+++ b/src/views/BattleRoom.vue
@@ -0,0 +1,618 @@
+<script setup>
+// 对战房间页：等待区（邀请码/准备/开始）、游戏区（斗地主/象棋）、聊天区与结算弹窗
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import http, { toast } from '../api/http'
+import { useBattleStore } from '../stores/battle'
+import { useUserStore } from '../stores/user'
+import DdzTable from '../components/battle/DdzTable.vue'
+import ChessBoard from '../components/battle/ChessBoard.vue'
+import MonopolyBoard from '../components/battle/MonopolyBoard.vue'
+import LudoBoard from '../components/battle/LudoBoard.vue'
+import BilliardsTable from '../components/battle/BilliardsTable.vue'
+import PixelAvatar from '../components/PixelAvatar.vue'
+
+const router = useRouter()
+const battle = useBattleStore()
+const userStore = useUserStore()
+const chatInput = ref('')
+const chatBox = ref(null)
+
+const st = computed(() => battle.roomState)
+const isHost = computed(() => st.value?.host_id === userStore.user?.id)
+const mySeatInfo = computed(() => st.value?.seats?.[st.value?.my_seat] || {})
+const gameNames = {
+  doudizhu: '斗地主', chess: '中国象棋',
+  monopoly: '大富翁', ludo: '飞行棋', billiards: '2D台球',
+}
+const gameName = computed(() => gameNames[st.value?.game] || st.value?.game)
+// 按游戏类型选择对局界面组件
+const gameComps = {
+  doudizhu: DdzTable, chess: ChessBoard,
+  monopoly: MonopolyBoard, ludo: LudoBoard, billiards: BilliardsTable,
+}
+const gameComp = computed(() => gameComps[st.value?.game] || DdzTable)
+const providerName = computed(() => {
+  const map = { rule: '本地规则 AI', spark: '星火 Lite', deepseek: 'DeepSeek' }
+  return map[st.value?.ai_provider] || st.value?.ai_provider
+})
+const diffName = computed(() => {
+  const map = { easy: '简单', medium: '中等', hard: '困难' }
+  return map[st.value?.ai_difficulty] || st.value?.ai_difficulty
+})
+// 真人数是否满足开局（斗地主至少1人+AI补位；开始按钮房主可点）
+const canStart = computed(() => st.value?.status === 'waiting' && isHost.value)
+
+// 房间没了（离开/解散）→ 回对战大厅
+watch(st, (v) => {
+  if (!v) router.replace('/battle')
+})
+// 新聊天自动滚到底部
+watch(
+  () => battle.chatLog.length,
+  async () => {
+    await nextTick()
+    if (chatBox.value) chatBox.value.scrollTop = chatBox.value.scrollHeight
+  }
+)
+
+function copyCode() {
+  navigator.clipboard?.writeText(st.value.code)
+  toast('邀请码已复制，快发给好友吧', 'success')
+}
+function sendChat() {
+  const text = chatInput.value.trim()
+  if (!text) return
+  battle.sendChat(text)
+  chatInput.value = ''
+}
+function leave() {
+  battle.leaveRoom()
+  router.replace('/battle')
+}
+// ---- 房主邀请好友：在线推弹窗、离线落私聊；同一人 60 秒冷却 ----
+const INVITE_CD_MS = 60_000
+const friendList = ref([])
+const inviteUntil = ref({}) // user_id -> 可再次邀请的时间戳(ms)
+const nowTick = ref(Date.now())
+let inviteTickTimer = null
+
+function startInviteTick() {
+  if (inviteTickTimer) return
+  inviteTickTimer = setInterval(() => {
+    nowTick.value = Date.now()
+    const next = { ...inviteUntil.value }
+    let any = false
+    for (const k of Object.keys(next)) {
+      if (next[k] <= nowTick.value) delete next[k]
+      else any = true
+    }
+    inviteUntil.value = next
+    if (!any) {
+      clearInterval(inviteTickTimer)
+      inviteTickTimer = null
+    }
+  }, 1000)
+}
+function inviteLeft(uid) {
+  const left = Math.ceil(((inviteUntil.value[uid] || 0) - nowTick.value) / 1000)
+  return left > 0 ? left : 0
+}
+async function loadFriends() {
+  try {
+    friendList.value = await http.get('/friends')
+  } catch (e) { /* 拦截器已提示 */ }
+}
+function inviteFriend(uid) {
+  const left = inviteLeft(uid)
+  if (left > 0) {
+    toast(`请 ${left} 秒后再邀请该好友`, 'info')
+    return
+  }
+  battle.send('invite', { user_id: uid })
+  inviteUntil.value = { ...inviteUntil.value, [uid]: Date.now() + INVITE_CD_MS }
+  startInviteTick()
+  toast('邀请已发送', 'success')
+}
+// 成为房主且等待中时拉好友列表
+watch(
+  () => isHost.value && st.value?.status === 'waiting',
+  (v) => { if (v) loadFriends() },
+  { immediate: true }
+)
+function fmtTime(ts) {
+  const d = new Date(ts * 1000)
+  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
+}
+
+// 从全局邀请弹窗跳转而来：连 ws 自动加入房间
+async function tryPendingJoin() {
+  const pendingCode = sessionStorage.getItem('pending_join_code')
+  if (!pendingCode) return false
+  sessionStorage.removeItem('pending_join_code')
+  sessionStorage.removeItem('pending_join_game')
+  if (battle.roomState) return true
+  try {
+    await battle.connect()
+    battle.joinRoom(pendingCode)
+    const ok = await new Promise((resolve) => {
+      if (battle.roomState) return resolve(true)
+      let stop = null
+      const t = setTimeout(() => {
+        stop?.()
+        resolve(false)
+      }, 3000)
+      stop = watch(
+        () => battle.roomState,
+        (v) => {
+          if (v) {
+            clearTimeout(t)
+            stop?.()
+            resolve(true)
+          }
+        }
+      )
+    })
+    if (!ok) {
+      toast('加入房间失败或邀请码已失效')
+      router.replace('/battle')
+    }
+    return true
+  } catch {
+    toast('联机服务连接失败，请稍后再试')
+    router.replace('/battle')
+    return true
+  }
+}
+
+onMounted(async () => {
+  window.addEventListener('nlg:pending-join', tryPendingJoin)
+  const handled = await tryPendingJoin()
+  if (handled) return
+  // 刷新后直接进入本页但没有房间状态 → 回大厅
+  if (!battle.roomState) router.replace('/battle')
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('nlg:pending-join', tryPendingJoin)
+  clearInterval(inviteTickTimer)
+})
+</script>
+
+<template>
+  <div v-if="st" class="room">
+    <!-- 顶栏 -->
+    <div class="room-bar panel">
+      <div class="code-box" @click="copyCode" title="点击复制邀请码">
+        邀请码 <b>{{ st.code }}</b> 📋
+      </div>
+      <span class="tag">{{ gameName }}</span>
+      <span class="tag">{{ st.mode === 'ai' ? 'AI 对战' : '好友联机' }}</span>
+      <span class="tag text-dim">🤖 {{ providerName }} · {{ diffName }}</span>
+      <button class="btn btn-danger btn-sm" style="margin-left: auto" @click="leave">退出房间</button>
+    </div>
+    <div class="room-body">
+      <!-- 游戏主区域 -->
+      <div class="main-zone">
+        <!-- 等待开局 -->
+        <div v-if="st.status === 'waiting'" class="panel waiting">
+          <h3>等待开局</h3>
+          <p class="text-dim" style="font-size: 13px; margin: 6px 0 18px">
+            分享邀请码给好友，或直接开始（空位自动由 AI 补位）
+          </p>
+          <div class="seats">
+            <div v-for="s in st.seats" :key="s.index" class="seat" :class="{ empty: !s.occupied }">
+              <span class="seat-avatar">
+                <template v-if="s.occupied">
+                  <PixelAvatar :code="s.avatar || (s.is_ai ? '🤖' : 'px:01')" :size="34" />
+                </template>
+                <template v-else>➕</template>
+              </span>
+              <b>{{ s.occupied ? s.name : '等待加入' }}</b>
+              <span v-if="s.occupied && s.user_id === st.host_id" class="host-tag">房主</span>
+              <span v-else-if="s.is_ai" class="ai-tag">AI</span>
+              <span v-if="s.occupied && !s.is_ai" class="ready-tag" :class="{ ok: s.ready }">
+                {{ s.ready ? '已准备' : '未准备' }}
+              </span>
+            </div>
+          </div>
+          <div class="wait-actions">
+            <button
+              v-if="!isHost"
+              class="btn"
+              :class="{ 'btn-ghost': mySeatInfo.ready }"
+              @click="battle.setReady(!mySeatInfo.ready)"
+            >
+              {{ mySeatInfo.ready ? '取消准备' : '准备' }}
+            </button>
+            <button v-if="canStart" class="btn btn-lg" @click="battle.startGame()">开始游戏 🚀</button>
+          </div>
+          <!-- 房主邀请好友：在线推弹窗、离线落私聊 -->
+          <div v-if="isHost && friendList.length" class="friend-invite">
+            <div class="fi-head">邀请好友（{{ friendList.length }}）· 同一人 1 分钟内不可重复</div>
+            <div class="fi-list">
+              <button
+                v-for="f in friendList"
+                :key="f.user_id"
+                type="button"
+                class="fi-item"
+                :class="{ off: !f.online, sent: inviteLeft(f.user_id) > 0 }"
+                :disabled="inviteLeft(f.user_id) > 0"
+                :title="inviteLeft(f.user_id) > 0
+                  ? `${inviteLeft(f.user_id)} 秒后可再邀请`
+                  : (f.online ? '点击发送弹窗邀请' : '好友离线：将发送私聊邀请')"
+                @click="inviteFriend(f.user_id)"
+              >
+                <span class="fi-avatar"><PixelAvatar :code="f.avatar || 'px:01'" :size="22" /></span>
+                <span class="fi-name">{{ f.nickname }}</span>
+                <span class="fi-dot" :class="{ on: f.online }"></span>
+                <span class="fi-act">{{
+                  inviteLeft(f.user_id) > 0
+                    ? `${inviteLeft(f.user_id)}s`
+                    : (f.online ? '邀请' : '留言')
+                }}</span>
+              </button>
+            </div>
+          </div>
+          <!-- 上局战报 -->
+          <div v-if="st.last_result" class="last-result text-dim">
+            上局：{{ st.last_result.desc }}
+          </div>
+        </div>
+        <!-- 对局中：按游戏类型动态挂载对应界面 -->
+        <component :is="gameComp" v-else />
+      </div>
+      <!-- 聊天区 -->
+      <div class="chat panel">
+        <h3 class="chat-title">💬 聊天室</h3>
+        <div ref="chatBox" class="chat-log">
+          <div v-for="(m, i) in battle.chatLog" :key="i" class="chat-msg" :class="{ sys: m.seat === -1 }">
+            <template v-if="m.seat === -1">
+              <span class="sys-text">📢 {{ m.text }}</span>
+            </template>
+            <template v-else>
+              <span class="chat-name" :class="{ ai: m.is_ai }">{{ m.is_ai ? '🤖' : '' }}{{ m.name }}</span>
+              <span class="chat-time text-dim">{{ fmtTime(m.ts) }}</span>
+              <div class="chat-text">{{ m.text }}</div>
+            </template>
+          </div>
+          <div v-if="!battle.chatLog.length" class="text-dim" style="font-size: 12px; text-align: center; padding: 20px 0">
+            暂无消息，打个招呼吧
+          </div>
+        </div>
+        <div class="chat-input">
+          <input v-model="chatInput" class="input" placeholder="说点什么…" maxlength="100" @keyup.enter="sendChat" />
+          <button class="btn btn-sm" @click="sendChat">发送</button>
+        </div>
+      </div>
+    </div>
+    <!-- 结算弹窗 -->
+    <div v-if="battle.battleEnd" class="modal-mask" @click.self="battle.battleEnd = null">
+      <div class="modal panel">
+        <h2 class="end-title">
+          {{ battle.battleEnd.winners?.includes(st.my_seat) ? '🏆 胜利！' : '💪 惜败' }}
+        </h2>
+        <p class="end-desc">{{ battle.battleEnd.desc }}</p>
+        <!-- rewards 以座位号为键，换算为玩家昵称展示 -->
+        <div v-if="battle.battleEnd.rewards" class="rewards">
+          <div v-for="(pts, seatIdx) in battle.battleEnd.rewards" :key="seatIdx" class="reward-row">
+            <span>{{ st.seats?.[Number(seatIdx)]?.name || `玩家${seatIdx}` }}</span>
+            <b :class="pts >= 0 ? 'win' : 'lose'">{{ pts >= 0 ? '+' : '' }}{{ pts }} 积分</b>
+          </div>
+        </div>
+        <p class="text-dim" style="font-size: 12px">用时 {{ battle.battleEnd.duration }} 秒</p>
+        <button class="btn" style="width: 100%; margin-top: 14px" @click="battle.battleEnd = null">
+          继续 · 回到房间
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.room {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.room-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  flex-wrap: wrap;
+}
+.code-box {
+  cursor: pointer;
+  background: var(--bg-card);
+  border: 1px dashed var(--primary);
+  padding: 6px 14px;
+  border-radius: 10px;
+  font-size: 13px;
+}
+.code-box b {
+  color: var(--primary);
+  font-size: 16px;
+  letter-spacing: 2px;
+  margin: 0 4px;
+}
+.tag {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+}
+.room-body {
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  gap: 14px;
+  align-items: start;
+}
+.waiting {
+  text-align: center;
+  padding: 30px 20px;
+}
+.seats {
+  display: flex;
+  justify-content: center;
+  gap: 14px;
+  margin: 10px 0 22px;
+  flex-wrap: wrap;
+}
+.seat {
+  width: 130px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 16px 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.seat.empty {
+  border-style: dashed;
+  opacity: 0.65;
+}
+.seat-avatar {
+  font-size: 34px;
+}
+.seat b {
+  font-size: 13px;
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.host-tag {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+  font-size: 10px;
+  padding: 1px 8px;
+  border-radius: 999px;
+}
+.ai-tag {
+  background: rgba(120, 90, 255, 0.25);
+  color: var(--accent);
+  font-size: 10px;
+  padding: 1px 8px;
+  border-radius: 999px;
+}
+.ready-tag {
+  font-size: 11px;
+  color: var(--text-dim);
+}
+.ready-tag.ok {
+  color: #4ade80;
+}
+.wait-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+/* 房主邀请好友栏 */
+.friend-invite {
+  width: 100%;
+  max-width: 480px;
+  margin: 18px auto 0;
+  max-height: 240px;
+  overflow: auto;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  text-align: left;
+  box-sizing: border-box;
+}
+.fi-head {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-dim);
+}
+.fi-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+.fi-item {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr) 10px auto;
+  align-items: center;
+  column-gap: 10px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font-size: 13px;
+  transition: background 0.15s, border-color 0.15s;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: left;
+}
+.fi-item:hover:not(:disabled) {
+  background: var(--bg-panel);
+  border-color: var(--primary);
+}
+.fi-item.off {
+  opacity: 0.65;
+}
+.fi-item.sent {
+  cursor: default;
+  opacity: 0.75;
+}
+.fi-item:disabled {
+  cursor: not-allowed;
+}
+.fi-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+}
+.fi-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  font-weight: 600;
+}
+.fi-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #888;
+  justify-self: center;
+}
+.fi-dot.on {
+  background: #67d18f;
+  box-shadow: 0 0 6px rgba(103, 209, 143, 0.6);
+}
+.fi-act {
+  font-size: 12px;
+  color: var(--primary);
+  white-space: nowrap;
+  min-width: 2.5em;
+  text-align: right;
+}
+.last-result {
+  margin-top: 18px;
+  font-size: 12px;
+}
+.chat {
+  display: flex;
+  flex-direction: column;
+  height: 560px;
+  padding: 14px;
+}
+.chat-title {
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+.chat-log {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-right: 4px;
+}
+.chat-msg.sys {
+  text-align: center;
+}
+.sys-text {
+  font-size: 11px;
+  color: var(--text-dim);
+  background: var(--bg-card);
+  padding: 3px 10px;
+  border-radius: 999px;
+}
+.chat-name {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--primary-2);
+}
+.chat-name.ai {
+  color: var(--accent);
+}
+.chat-time {
+  font-size: 10px;
+  margin-left: 6px;
+}
+.chat-text {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 4px 12px 12px 12px;
+  padding: 6px 10px;
+  font-size: 13px;
+  margin-top: 3px;
+  word-break: break-all;
+}
+.chat-input {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+.chat-input .input {
+  flex: 1;
+}
+.modal-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  backdrop-filter: blur(3px);
+}
+.modal {
+  width: min(380px, 90vw);
+  text-align: center;
+  padding: 28px 24px;
+}
+.end-title {
+  font-size: 26px;
+  margin-bottom: 8px;
+}
+.end-desc {
+  font-size: 14px;
+  margin-bottom: 16px;
+}
+.rewards {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.reward-row {
+  display: flex;
+  justify-content: space-between;
+  background: var(--bg-card);
+  border-radius: 10px;
+  padding: 8px 14px;
+  font-size: 13px;
+}
+.reward-row .win {
+  color: #4ade80;
+}
+.reward-row .lose {
+  color: #ff6b6b;
+}
+@media (max-width: 900px) {
+  .room-body {
+    grid-template-columns: 1fr;
+  }
+  .chat {
+    height: 300px;
+  }
+}
+</style>
diff --git a/src/views/Chat.vue b/src/views/Chat.vue
new file mode 100644
index 0000000..0e63782
--- /dev/null
+++ b/src/views/Chat.vue
@@ -0,0 +1,484 @@
+<script setup>
+// 聊天室：会话列表 + 聊天详情 + 好友管理（申请处理/删除）+ 搜索加好友
+// 悬浮小窗是它的精简版，两边共用同一个 chat store，状态互通
+import { ref, watch, nextTick, onMounted } from 'vue'
+import { useChatStore } from '../stores/chat'
+import PixelAvatar from '../components/PixelAvatar.vue'
+
+const chat = useChatStore()
+const tab = ref('conv') // conv=会话 friend=好友 add=添加好友
+const draft = ref('')
+const msgBox = ref(null)
+const keyword = ref('')
+const searching = ref(false)
+const results = ref([])
+const searched = ref(false)
+
+onMounted(() => {
+  chat.init()
+  chat.loadConversations().catch(() => {})
+  chat.loadFriends().catch(() => {})
+  chat.refreshRequests()
+  // 从悬浮小窗「前往聊天室」带过来的会话继续展示
+  if (chat.activePeer) chat.openChat(chat.activePeer)
+})
+
+async function pick(peer) {
+  await chat.openChat(peer)
+}
+async function send() {
+  const text = draft.value.trim()
+  if (!text) return
+  draft.value = ''
+  await chat.sendMsg(text)
+}
+async function doSearch() {
+  const kw = keyword.value.trim()
+  if (!kw) return
+  searching.value = true
+  try {
+    results.value = await chat.searchUsers(kw)
+    searched.value = true
+  } finally {
+    searching.value = false
+  }
+}
+// 发申请后就地更新按钮状态
+async function addFriend(item) {
+  const rel = await chat.requestFriend(item.user_id)
+  item.relation = rel === 'friend' ? 'friend' : 'pending_out'
+}
+async function removeFriend(f) {
+  if (!confirm(`确定删除好友「${f.nickname}」吗？聊天记录会保留。`)) return
+  await chat.removeFriend(f.user_id)
+  if (chat.activePeer?.user_id === f.user_id) chat.activePeer = null
+}
+// 新消息自动滚底
+watch(
+  () => chat.messages.length,
+  async () => {
+    await nextTick()
+    if (msgBox.value) msgBox.value.scrollTop = msgBox.value.scrollHeight
+  }
+)
+function fmtTime(ts) {
+  if (!ts) return ''
+  const d = new Date(ts * 1000)
+  const now = new Date()
+  const hm = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
+  if (d.toDateString() === now.toDateString()) return hm
+  return `${d.getMonth() + 1}/${d.getDate()} ${hm}`
+}
+const relationText = { friend: '已是好友', pending_out: '等待验证', pending_in: '待你同意' }
+</script>
+
+<template>
+  <div class="chat-page">
+    <h1 class="page-title">💬 聊天室</h1>
+    <div class="chat-layout panel">
+      <!-- 左侧：会话/好友/添加 -->
+      <aside class="side">
+        <div class="side-tabs">
+          <button class="stab" :class="{ on: tab === 'conv' }" @click="tab = 'conv'">
+            会话<em v-if="chat.unread" class="badge">{{ chat.unread > 99 ? '99+' : chat.unread }}</em>
+          </button>
+          <button class="stab" :class="{ on: tab === 'friend' }" @click="tab = 'friend'">
+            好友<em v-if="chat.reqBadge" class="badge">{{ chat.reqBadge }}</em>
+          </button>
+          <button class="stab" :class="{ on: tab === 'add' }" @click="tab = 'add'">➕ 添加</button>
+        </div>
+        <!-- 会话列表 -->
+        <div v-if="tab === 'conv'" class="side-list">
+          <div v-if="!chat.conversations.length" class="empty text-dim">
+            暂无会话<br />去「好友」标签找人开聊
+          </div>
+          <div
+            v-for="cv in chat.conversations"
+            :key="cv.peer.user_id"
+            class="row"
+            :class="{ cur: chat.activePeer?.user_id === cv.peer.user_id }"
+            @click="pick(cv.peer)"
+          >
+            <span class="avatar"><PixelAvatar :code="cv.peer.avatar || 'px:01'" :size="34" /><i v-if="cv.peer.online" class="dot"></i></span>
+            <span class="mid">
+              <b>{{ cv.peer.nickname }}</b>
+              <small class="text-dim">{{ cv.from_me ? '我：' : '' }}{{ cv.last_msg }}</small>
+            </span>
+            <span class="side-info">
+              <small class="text-dim">{{ fmtTime(cv.last_at) }}</small>
+              <em v-if="cv.unread" class="badge">{{ cv.unread > 99 ? '99+' : cv.unread }}</em>
+            </span>
+          </div>
+        </div>
+        <!-- 好友管理 -->
+        <div v-else-if="tab === 'friend'" class="side-list">
+          <template v-if="chat.requests.received.length">
+            <div class="group-title">收到的申请</div>
+            <div v-for="r in chat.requests.received" :key="r.id" class="row static">
+              <span class="avatar"><PixelAvatar :code="r.user.avatar || 'px:01'" :size="34" /></span>
+              <span class="mid">
+                <b>{{ r.user.nickname }}</b>
+                <small class="text-dim">@{{ r.user.username }} · {{ fmtTime(r.at) }}</small>
+              </span>
+              <span class="ops">
+                <button class="btn btn-sm" @click="chat.respondFriend(r.id, true)">同意</button>
+                <button class="btn btn-sm btn-ghost" @click="chat.respondFriend(r.id, false)">拒绝</button>
+              </span>
+            </div>
+          </template>
+          <template v-if="chat.requests.sent.length">
+            <div class="group-title">我发出的申请</div>
+            <div v-for="r in chat.requests.sent" :key="r.id" class="row static">
+              <span class="avatar"><PixelAvatar :code="r.user.avatar || 'px:01'" :size="34" /></span>
+              <span class="mid">
+                <b>{{ r.user.nickname }}</b>
+                <small class="text-dim">等待对方同意</small>
+              </span>
+            </div>
+          </template>
+          <div class="group-title">我的好友（{{ chat.friends.length }}）</div>
+          <div v-if="!chat.friends.length" class="empty text-dim">
+            还没有好友<br />去「添加」标签搜索用户
+          </div>
+          <div v-for="f in chat.friends" :key="f.user_id" class="row static">
+            <span class="avatar"><PixelAvatar :code="f.avatar || 'px:01'" :size="34" /><i v-if="f.online" class="dot"></i></span>
+            <span class="mid">
+              <b>{{ f.nickname }}</b>
+              <small class="text-dim">{{ f.online ? '🟢 在线' : '离线' }} · @{{ f.username }}</small>
+            </span>
+            <span class="ops">
+              <button class="btn btn-sm" @click="pick(f)">发消息</button>
+              <button class="btn btn-sm btn-ghost" @click="removeFriend(f)">删除</button>
+            </span>
+          </div>
+        </div>
+        <!-- 添加好友 -->
+        <div v-else class="side-list">
+          <div class="search-box">
+            <input
+              v-model="keyword"
+              class="input"
+              placeholder="搜索用户名或昵称"
+              @keyup.enter="doSearch"
+            />
+            <button class="btn btn-sm" :disabled="searching" @click="doSearch">
+              {{ searching ? '搜索中…' : '搜索' }}
+            </button>
+          </div>
+          <div v-if="searched && !results.length" class="empty text-dim">没有找到相关用户</div>
+          <div v-for="u in results" :key="u.user_id" class="row static">
+            <span class="avatar"><PixelAvatar :code="u.avatar || 'px:01'" :size="34" /><i v-if="u.online" class="dot"></i></span>
+            <span class="mid">
+              <b>{{ u.nickname }}</b>
+              <small class="text-dim">@{{ u.username }}</small>
+            </span>
+            <span class="ops">
+              <button v-if="u.relation === 'none'" class="btn btn-sm" @click="addFriend(u)">加好友</button>
+              <small v-else class="text-dim">{{ relationText[u.relation] }}</small>
+            </span>
+          </div>
+        </div>
+      </aside>
+      <!-- 右侧：聊天窗口 -->
+      <section class="main">
+        <template v-if="chat.activePeer">
+          <div class="chat-head">
+            <span class="avatar sm"><PixelAvatar :code="chat.activePeer.avatar || 'px:01'" :size="26" /></span>
+            <b>{{ chat.activePeer.nickname }}</b>
+            <small class="text-dim">{{ chat.activePeer.online ? '🟢 在线' : '离线' }}</small>
+          </div>
+          <div ref="msgBox" class="msgs">
+            <button v-if="chat.hasMore" class="earlier" @click="chat.loadEarlier()">加载更早的消息</button>
+            <div
+              v-for="m in chat.messages"
+              :key="m.id"
+              class="bubble-row"
+              :class="{ mine: m.from_id !== chat.activePeer.user_id }"
+            >
+              <span v-if="m.from_id === chat.activePeer.user_id" class="avatar sm">
+                <PixelAvatar :code="chat.activePeer.avatar || 'px:01'" :size="26" />
+              </span>
+              <div class="bubble">
+                {{ m.content }}
+                <small class="stamp">{{ fmtTime(m.created_at) }}</small>
+              </div>
+            </div>
+            <div v-if="!chat.messages.length" class="empty text-dim">打个招呼开始聊天吧 👋</div>
+          </div>
+          <div class="input-row">
+            <input
+              v-model="draft"
+              class="input"
+              maxlength="500"
+              placeholder="输入消息，回车发送（最多 500 字）"
+              @keyup.enter="send"
+            />
+            <button class="btn" @click="send">发送</button>
+          </div>
+        </template>
+        <div v-else class="placeholder text-dim">
+          <div class="ph-icon">💬</div>
+          从左侧选择会话或好友开始聊天<br />
+          <small>游戏中和大厅里也可以用右下角的聊天小窗随时回消息</small>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-title {
+  font-size: 22px;
+  margin-bottom: 16px;
+}
+.chat-layout {
+  display: flex;
+  height: calc(100vh - 210px);
+  min-height: 480px;
+  padding: 0;
+  overflow: hidden;
+}
+.side {
+  width: 320px;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+.side-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+}
+.stab {
+  flex: 1;
+  padding: 11px 4px;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 13px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+.stab.on {
+  color: var(--text);
+  font-weight: 800;
+  box-shadow: inset 0 -2px 0 var(--primary);
+}
+.badge {
+  min-width: 17px;
+  height: 17px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: #e5484d;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 800;
+  font-style: normal;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.side-list {
+  flex: 1;
+  overflow-y: auto;
+}
+.group-title {
+  padding: 10px 14px 4px;
+  font-size: 12px;
+  color: var(--text-dim);
+  font-weight: 700;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+}
+.row:hover {
+  background: var(--bg-card);
+}
+.row.cur {
+  background: var(--bg-card);
+  box-shadow: inset 3px 0 0 var(--primary);
+}
+.row.static {
+  cursor: default;
+}
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  position: relative;
+  flex-shrink: 0;
+}
+.avatar.sm {
+  width: 30px;
+  height: 30px;
+  font-size: 15px;
+}
+.dot {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #4ade80;
+  border: 2px solid var(--bg-panel);
+}
+.mid {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.mid b {
+  font-size: 14px;
+}
+.mid small {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.side-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 3px;
+  flex-shrink: 0;
+}
+.side-info small {
+  font-size: 11px;
+}
+.ops {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+.search-box {
+  display: flex;
+  gap: 8px;
+  padding: 12px 14px;
+}
+.search-box .input {
+  flex: 1;
+}
+.empty {
+  text-align: center;
+  padding: 46px 10px;
+  font-size: 13px;
+  line-height: 2;
+}
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.chat-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-card);
+}
+.msgs {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.earlier {
+  border: none;
+  background: transparent;
+  color: var(--primary-2);
+  font-size: 12px;
+  cursor: pointer;
+  padding: 4px;
+}
+.bubble-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+}
+.bubble-row.mine {
+  justify-content: flex-end;
+}
+.bubble {
+  max-width: 64%;
+  padding: 9px 13px;
+  border-radius: 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  font-size: 14px;
+  line-height: 1.6;
+  word-break: break-word;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.bubble-row.mine .bubble {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  border-color: transparent;
+  color: #fff;
+}
+.stamp {
+  font-size: 10px;
+  opacity: 0.65;
+  align-self: flex-end;
+}
+.input-row {
+  display: flex;
+  gap: 10px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-card);
+}
+.input-row .input {
+  flex: 1;
+}
+.placeholder {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  text-align: center;
+  line-height: 2;
+}
+.ph-icon {
+  font-size: 46px;
+  opacity: 0.5;
+}
+@media (max-width: 800px) {
+  .chat-layout {
+    flex-direction: column;
+    height: auto;
+  }
+  .side {
+    width: 100%;
+    max-height: 40vh;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+  .main {
+    min-height: 50vh;
+  }
+}
+</style>
diff --git a/src/views/GameCenter.vue b/src/views/GameCenter.vue
new file mode 100644
index 0000000..27923e7
--- /dev/null
+++ b/src/views/GameCenter.vue
@@ -0,0 +1,295 @@
+<script setup>
+// 游戏中心：游戏商城 / 道具商城 / 购物车 / 我的订单 四个标签页
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import http, { toast } from '../api/http'
+import { useUserStore } from '../stores/user'
+import GameCard from '../components/GameCard.vue'
+
+const router = useRouter()
+const userStore = useUserStore()
+
+const tab = ref('games') // games / props / cart / orders
+const games = ref([])
+const props = ref([])
+const cart = ref({ list: [], total: 0 })
+const orders = ref({ list: [], total: 0, page: 1 })
+
+// 只显示需要购买的游戏在商城（免费游戏大厅直接玩）
+const paidGames = computed(() => games.value.filter((g) => g.price > 0))
+
+// 加载各标签数据
+async function loadGames() {
+  games.value = await http.get('/games')
+}
+async function loadProps() {
+  props.value = await http.get('/shop/props')
+}
+async function loadCart() {
+  cart.value = await http.get('/shop/cart')
+}
+async function loadOrders(page = 1) {
+  orders.value = await http.get('/shop/orders', { params: { page, size: 10 } })
+  orders.value.page = page
+}
+
+// 切换标签时按需加载
+function switchTab(t) {
+  tab.value = t
+  if (t === 'games') loadGames()
+  if (t === 'props') loadProps()
+  if (t === 'cart') loadCart()
+  if (t === 'orders') loadOrders(1)
+}
+
+// 加入购物车
+async function addCart(itemType, itemId) {
+  await http.post('/shop/cart', { item_type: itemType, item_id: itemId, quantity: 1 })
+  toast('已加入购物车', 'success')
+  loadCart()
+}
+
+// 立即购买
+async function buyNow(itemType, itemId, quantity = 1) {
+  await http.post('/shop/buy', { item_type: itemType, item_id: itemId, quantity })
+  toast('购买成功！', 'success')
+  await userStore.refresh()
+  if (itemType === 1) loadGames()
+}
+
+// 删除购物车项
+async function removeCart(id) {
+  await http.delete(`/shop/cart/${id}`)
+  loadCart()
+}
+
+// 购物车结算
+async function checkout() {
+  if (!cart.value.list.length) {
+    toast('购物车是空的')
+    return
+  }
+  await http.post('/shop/checkout')
+  toast('结算成功，商品已到账！', 'success')
+  await userStore.refresh()
+  loadCart()
+  loadGames()
+}
+
+// 时间戳格式化
+function fmtTime(ts) {
+  return new Date(ts * 1000).toLocaleString('zh-CN', { hour12: false })
+}
+
+onMounted(() => {
+  loadGames()
+  loadCart()
+})
+</script>
+
+<template>
+  <div>
+    <h2 class="page-title">游戏中心</h2>
+    <!-- 标签栏 -->
+    <div class="tabs">
+      <button class="tab-btn" :class="{ on: tab === 'games' }" @click="switchTab('games')">🎮 游戏商城</button>
+      <button class="tab-btn" :class="{ on: tab === 'props' }" @click="switchTab('props')">🎁 道具商城</button>
+      <button class="tab-btn" :class="{ on: tab === 'cart' }" @click="switchTab('cart')">
+        🛒 购物车<span v-if="cart.list.length" class="badge">{{ cart.list.length }}</span>
+      </button>
+      <button class="tab-btn" :class="{ on: tab === 'orders' }" @click="switchTab('orders')">📦 我的订单</button>
+      <span class="balance text-dim">余额：<b class="text-primary">💰 {{ userStore.user?.points ?? 0 }}</b></span>
+    </div>
+    <!-- 游戏商城 -->
+    <div v-if="tab === 'games'">
+      <div class="grid">
+        <GameCard
+          v-for="g in paidGames"
+          :key="g.id"
+          :game="g"
+          :show-buy="true"
+          @play="router.push(`/play/${g.code}`)"
+          @add-cart="addCart(1, g.id)"
+          @buy="buyNow(1, g.id)"
+        />
+      </div>
+      <div v-if="!paidGames.length" class="empty">暂无付费游戏</div>
+    </div>
+    <!-- 道具商城 -->
+    <div v-if="tab === 'props'" class="grid props-grid">
+      <div v-for="p in props" :key="p.id" class="prop-card card">
+        <div class="prop-icon">{{ p.icon }}</div>
+        <div class="prop-name">{{ p.name }}</div>
+        <p class="prop-desc text-dim">{{ p.description }}</p>
+        <div class="prop-foot">
+          <span class="prop-price">💰 {{ p.price }}</span>
+          <div class="actions">
+            <button class="btn btn-ghost btn-sm" @click="addCart(2, p.id)">加购物车</button>
+            <button class="btn btn-sm" @click="buyNow(2, p.id)">购买</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 购物车 -->
+    <div v-if="tab === 'cart'" class="panel">
+      <table v-if="cart.list.length" class="table">
+        <thead>
+          <tr><th>商品</th><th>类型</th><th>单价</th><th>数量</th><th>小计</th><th></th></tr>
+        </thead>
+        <tbody>
+          <tr v-for="it in cart.list" :key="it.id">
+            <td>{{ it.icon }} {{ it.name }}</td>
+            <td><span class="tag">{{ it.item_type === 1 ? '游戏' : '道具' }}</span></td>
+            <td>💰{{ it.price }}</td>
+            <td>{{ it.quantity }}</td>
+            <td class="text-primary">💰{{ it.price * it.quantity }}</td>
+            <td><button class="btn btn-ghost btn-sm" @click="removeCart(it.id)">删除</button></td>
+          </tr>
+        </tbody>
+      </table>
+      <div v-else class="empty">购物车空空如也，去商城逛逛吧～</div>
+      <div v-if="cart.list.length" class="cart-foot">
+        <span>合计：<b class="text-primary" style="font-size: 18px">💰 {{ cart.total }}</b></span>
+        <button class="btn btn-lg" @click="checkout">积分结算</button>
+      </div>
+    </div>
+    <!-- 我的订单 -->
+    <div v-if="tab === 'orders'">
+      <div v-for="o in orders.list" :key="o.id" class="order panel">
+        <div class="order-head">
+          <span class="text-dim">订单号 {{ o.order_no }}</span>
+          <span class="text-dim">{{ fmtTime(o.created_at) }}</span>
+          <span class="tag tag-accent">{{ o.status === 1 ? '已完成' : '已取消' }}</span>
+          <span class="order-total">合计 <b class="text-primary">💰{{ o.total_points }}</b></span>
+        </div>
+        <div class="order-items">
+          <span v-for="it in o.items" :key="it.id" class="order-item">
+            {{ it.item_name }} ×{{ it.quantity }} <i class="text-dim">(💰{{ it.price }})</i>
+          </span>
+        </div>
+      </div>
+      <div v-if="!orders.list.length" class="empty">还没有订单记录</div>
+      <div v-if="orders.total > 10" class="pager">
+        <button class="btn btn-ghost btn-sm" :disabled="orders.page <= 1" @click="loadOrders(orders.page - 1)">上一页</button>
+        <span class="text-dim">第 {{ orders.page }} 页 / 共 {{ Math.ceil(orders.total / 10) }} 页</span>
+        <button class="btn btn-ghost btn-sm" :disabled="orders.page >= Math.ceil(orders.total / 10)" @click="loadOrders(orders.page + 1)">下一页</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tabs {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 18px;
+  flex-wrap: wrap;
+}
+.tab-btn {
+  padding: 8px 18px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--bg-panel);
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 14px;
+  position: relative;
+  transition: all 0.15s;
+}
+.tab-btn.on {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+  border-color: transparent;
+  box-shadow: var(--glow);
+}
+.badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  background: var(--accent);
+  color: #04222a;
+  font-size: 11px;
+  font-weight: 800;
+  border-radius: 999px;
+  padding: 0 6px;
+  min-width: 18px;
+  height: 18px;
+  line-height: 18px;
+}
+.balance {
+  margin-left: auto;
+  font-size: 14px;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+  gap: 14px;
+}
+.props-grid {
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+}
+.prop-card {
+  padding: 18px 16px 14px;
+  text-align: center;
+}
+.prop-icon {
+  font-size: 42px;
+}
+.prop-name {
+  font-weight: 700;
+  margin: 8px 0 4px;
+}
+.prop-desc {
+  font-size: 12px;
+  min-height: 48px;
+  line-height: 16px;
+}
+.prop-foot {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+.prop-price {
+  color: var(--primary-2);
+  font-weight: 800;
+}
+.actions {
+  display: flex;
+  gap: 6px;
+}
+.cart-foot {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 20px;
+  margin-top: 16px;
+}
+.order {
+  margin-bottom: 12px;
+}
+.order-head {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  font-size: 13px;
+  flex-wrap: wrap;
+}
+.order-total {
+  margin-left: auto;
+}
+.order-items {
+  margin-top: 10px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.order-item {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  padding: 5px 10px;
+  border-radius: 8px;
+  font-size: 12px;
+}
+</style>
diff --git a/src/views/GamePlay.vue b/src/views/GamePlay.vue
new file mode 100644
index 0000000..f3e2656
--- /dev/null
+++ b/src/views/GamePlay.vue
@@ -0,0 +1,1327 @@
+<script setup>
+// 游玩页：统一的游戏容器（开始遮罩/关卡选择 → 游戏进行 + 道具栏 → 结算遮罩）
+// 与游戏组件的约定：组件暴露 start(opts)/stop/useProp 方法，
+// emit('score', n)、emit('end', {score})，带关卡的游戏另有 emit('progress', 解锁到的关卡)
+// 组队游戏（meta.coop，如饥荒）：开始面板变状态机——模式选择/更衣室/联机房间
+import { ref, computed, shallowRef, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import http, { toast } from '../api/http'
+import { useUserStore } from '../stores/user'
+import { useStarveCoopStore } from '../stores/starveCoop'
+import { gameRegistry } from '../games'
+import { renderSkinPreview } from '../games/starveSkins'
+import { modMeta } from '../games/starve/mods/registry'
+import LevelSelect from '../components/LevelSelect.vue'
+import GameIcon from '../components/GameIcon.vue'
+import PixelAvatar from '../components/PixelAvatar.vue'
+
+const route = useRoute()
+const router = useRouter()
+const userStore = useUserStore()
+
+const code = route.params.code
+const meta = gameRegistry[code] // 注册表信息（组件、道具、操作说明、关卡配置）
+const gameComp = shallowRef(null) // 动态加载的游戏组件
+const gameRef = ref(null) // 游戏组件实例引用
+
+const detail = ref(null) // {game, owned, best_score}
+const phase = ref('loading') // loading / locked / ready / playing / over
+const liveScore = ref(0) // 实时得分
+const finalScore = ref(0) // 结束得分
+const result = ref(null) // 结算响应
+const useDouble = ref(false) // 是否使用双倍积分卡
+const bag = ref([]) // 我的道具背包
+const catalog = ref([]) // 道具商城目录（道具栏一键购买用）
+const startAt = ref(0) // 本局开始时间（算时长）
+const settling = ref(false)
+const buyingProp = ref('') // 正在购买的道具码（防连点）
+
+// ---- 关卡进度（带 levels 配置的游戏才启用） ----
+const levelsMeta = meta?.levels || null // {total, names?}
+const progress = ref({ level: 1, friends: [] }) // 我的进度 + 好友进度
+
+// ---- 云存档（注册表标记 saveable 的游戏才启用，如饥荒） ----
+const saveable = !!meta?.saveable
+const saveInfo = ref({ exists: false }) // {exists, day, score, data}
+
+// ---- 组队联机 + 皮肤更衣室（注册表标记 coop 的游戏才启用，如饥荒） ----
+const coopable = !!meta?.coop
+const coopStore = useStarveCoopStore()
+const coopStage = ref('mode') // 开始面板子状态：mode 模式选择 / solo 单人 / skins 更衣室 / room 联机房间
+const skins = ref([]) // 后端皮肤列表 [{code,name,price,owned}]
+const mySkin = ref(localStorage.getItem('skin_' + code) || 'wilson') // 我选中的皮肤（记本地）
+const buyingSkin = ref('') // 正在购买的皮肤（防连点）
+const joinCode = ref('') // 加入房间的邀请码输入
+const coopBusy = ref(false) // 连接/建房中
+const coopPlaying = ref(false) // 当前对局是否联机局（结束时不删单人存档）
+
+// ---- Mod 装载（注册表标记 mods 的游戏，如饥荒；勾选记本地） ----
+const modsAvail = meta?.mods ? modMeta() : []
+const selMods = ref([])
+try {
+  selMods.value = JSON.parse(localStorage.getItem('mods_' + code) || '[]').filter((id) => modsAvail.some((m) => m.id === id))
+} catch { selMods.value = [] }
+function toggleMod(id) {
+  const i = selMods.value.indexOf(id)
+  if (i >= 0) selMods.value.splice(i, 1)
+  else selMods.value.push(id)
+  localStorage.setItem('mods_' + code, JSON.stringify(selMods.value))
+}
+// 勾选组合的得分系数（难度 mod 相乘，夹在 0.5~1.5）
+const modFactor = computed(() => {
+  let f = 1
+  modsAvail.forEach((m) => { if (selMods.value.includes(m.id)) f *= m.factor })
+  return Math.round(Math.max(0.5, Math.min(1.5, f)) * 100) / 100
+})
+// 存档里记录的 mod 名单（继续冒险时只读展示，以存档为准）
+const saveModNames = computed(() => {
+  if (!saveInfo.value?.exists || !saveInfo.value.data) return []
+  try {
+    const ids = JSON.parse(saveInfo.value.data).mods || []
+    return modsAvail.filter((m) => ids.includes(m.id)).map((m) => m.name)
+  } catch { return [] }
+})
+
+// 背包中指定道具的数量
+function propCount(propCode) {
+  return bag.value.find((p) => p.code === propCode)?.quantity || 0
+}
+// 局内道具栏：本游戏支持的全部局内道具（没库存也展示，可一键购买）
+// 双倍卡在开始面板、复活卡在结算面板单独处理
+const inGameProps = computed(() =>
+  (meta?.supports || [])
+    .filter((c) => !['double_points', 'revive'].includes(c))
+    .map((c) => {
+      const item = catalog.value.find((p) => p.code === c)
+      if (!item) return null
+      return { ...item, quantity: propCount(c) }
+    })
+    .filter(Boolean)
+)
+// 结算面板是否可复活
+const canRevive = computed(() => meta?.supports.includes('revive') && propCount('revive') > 0)
+
+// 加载游戏详情、背包、道具目录与关卡进度
+async function load() {
+  if (!meta) {
+    toast('该游戏暂未上线')
+    router.replace('/')
+    return
+  }
+  const [d, props, shop] = await Promise.all([
+    http.get(`/games/${code}`),
+    http.get('/user/props'),
+    http.get('/shop/props'),
+  ])
+  detail.value = d
+  bag.value = props
+  catalog.value = shop
+  // 已拥有或在VIP周免批次内都可进入（playable 由后端计算）
+  if (!d.playable) {
+    phase.value = 'locked'
+    return
+  }
+  // 带关卡的游戏：读取我上次玩到第几关 + 好友进度
+  if (levelsMeta) {
+    progress.value = await http.get(`/games/${code}/progress`)
+  }
+  // 支持存档的游戏：读取云存档（有档则开始面板显示「继续冒险」）
+  if (saveable) {
+    saveInfo.value = await http.get(`/games/${code}/save`).catch(() => ({ exists: false }))
+  }
+  // 组队游戏：拉取皮肤商城列表（选中的皮肤若未拥有则回退默认）
+  if (coopable) {
+    skins.value = await http.get(`/games/${code}/skins`).catch(() => [])
+    const mine = skins.value.find((s) => s.code === mySkin.value)
+    if (mine && !mine.owned) mySkin.value = skins.value.find((s) => s.owned)?.code || 'wilson'
+  }
+  // 异步加载游戏组件
+  const mod = await meta.loader()
+  gameComp.value = mod.default
+  phase.value = 'ready'
+}
+
+// 开始本局：数字=起始关卡（关卡选择面板传入）；{save}=从云存档继续
+function startGame(arg = 1) {
+  const level = typeof arg === 'number' ? arg : 1
+  const save = typeof arg === 'object' && arg?.save ? arg.save : null
+  liveScore.value = save?.score || 0
+  result.value = null
+  coopPlaying.value = false
+  phase.value = 'playing'
+  startAt.value = Date.now()
+  // 等游戏组件挂载后启动（组件为异步 chunk，逐帧重试直到实例就绪，避免只等一帧的竞态）
+  const deadline = performance.now() + 3000
+  const tryStart = () => {
+    // 新开局带上勾选的 mod；续档时以存档内记录为准（组件侧处理）
+    if (gameRef.value?.start) gameRef.value.start({ level, save, skin: mySkin.value, mods: save ? undefined : [...selMods.value] })
+    else if (performance.now() < deadline) requestAnimationFrame(tryStart)
+  }
+  requestAnimationFrame(tryStart)
+}
+
+// 从云存档继续（解析失败则按新开一局处理）
+function continueSave() {
+  let snap = null
+  try {
+    snap = JSON.parse(saveInfo.value.data)
+  } catch (e) {
+    snap = null
+  }
+  startGame(snap ? { save: snap } : 1)
+}
+
+// 放弃存档重新开始：先删服务端存档再开新局
+async function restartFresh() {
+  await http.delete(`/games/${code}/save`).catch(() => {})
+  saveInfo.value = { exists: false }
+  startGame()
+}
+
+// 游戏内自动/手动存档：转存服务端（快照由游戏组件序列化）
+function onSave(snap) {
+  if (!saveable || !snap) return
+  saveInfo.value = { exists: true, day: snap.day, score: snap.score, data: JSON.stringify(snap) }
+  http.post(`/games/${code}/save`, { day: snap.day || 1, score: snap.score || 0, data: JSON.stringify(snap) }).catch(() => {})
+}
+
+// 游戏内过关：上报解锁的新关卡（只增不减，后端同样兜底）
+function onProgress(newLevel) {
+  if (!levelsMeta || newLevel <= progress.value.level) return
+  progress.value.level = newLevel
+  http.post(`/games/${code}/progress`, { level: newLevel }).catch(() => {})
+}
+
+// 游戏组件实时报分
+function onScore(n) {
+  liveScore.value = n
+}
+
+// 游戏结束回调：单人存档游戏死亡即删档（复刻原版永久死亡）；联机局不动单人存档
+function onEnd(payload) {
+  finalScore.value = payload?.score ?? liveScore.value
+  phase.value = 'over'
+  if (saveable && !coopPlaying.value) {
+    saveInfo.value = { exists: false }
+    http.delete(`/games/${code}/save`).catch(() => {})
+  }
+  coopPlaying.value = false
+}
+
+// =====================================================================
+// 组队联机 + 更衣室（coopable 游戏专属）
+// =====================================================================
+// 皮肤立绘预览（离屏渲染 dataURL，模块级缓存）
+function skinPreview(c) {
+  return renderSkinPreview(c, 72)
+}
+// 选择皮肤：已拥有才能选中；记本地 + 在房间时同步给座位
+function pickSkin(s) {
+  if (!s.owned) return
+  mySkin.value = s.code
+  localStorage.setItem('skin_' + code, s.code)
+  if (coopStore.inRoom) coopStore.setSkin(s.code)
+}
+// 购买皮肤：扣积分 → 标记已拥有并自动穿上
+async function buySkin(s) {
+  if (buyingSkin.value || s.owned) return
+  buyingSkin.value = s.code
+  try {
+    const res = await http.post(`/games/${code}/skins/buy`, { skin_code: s.code })
+    userStore.setPoints(res.balance)
+    s.owned = true
+    toast(`已解锁「${s.name}」（-${s.price} 积分）`, 'success')
+    pickSkin(s)
+  } catch (e) {
+    // 拦截器已提示
+  } finally {
+    buyingSkin.value = ''
+  }
+}
+// 进入组队：建立联机连接后进入房间面板
+async function enterCoop() {
+  if (coopBusy.value) return
+  coopBusy.value = true
+  try {
+    await coopStore.connect()
+    coopStage.value = 'room'
+  } catch (e) {
+    toast('联机服务连接失败，请稍后再试')
+  } finally {
+    coopBusy.value = false
+  }
+}
+// 建房/加入前确保连接可用（断线回退到本面板后再操作时自动重连）
+async function ensureCoopConn() {
+  try {
+    await coopStore.connect()
+    return true
+  } catch (e) {
+    toast('联机服务连接失败，请稍后再试')
+    return false
+  }
+}
+async function createRoom() {
+  if (await ensureCoopConn()) coopStore.createRoom()
+}
+async function joinRoom() {
+  if (!joinCode.value.trim()) {
+    toast('请输入 6 位邀请码', 'info')
+    return
+  }
+  if (await ensureCoopConn()) coopStore.joinRoom(joinCode.value)
+}
+function leaveRoom() {
+  coopStore.leaveRoom()
+}
+// ---- 房主邀请好友：在线推弹窗、离线落私聊；同一人 60 秒冷却 ----
+const INVITE_CD_MS = 60_000
+const friendList = ref([])
+const inviteUntil = ref({}) // user_id -> 可再次邀请的时间戳(ms)
+const nowTick = ref(Date.now())
+let inviteTickTimer = null
+
+function startInviteTick() {
+  if (inviteTickTimer) return
+  inviteTickTimer = setInterval(() => {
+    nowTick.value = Date.now()
+    const next = { ...inviteUntil.value }
+    let any = false
+    for (const k of Object.keys(next)) {
+      if (next[k] <= nowTick.value) delete next[k]
+      else any = true
+    }
+    inviteUntil.value = next
+    if (!any) {
+      clearInterval(inviteTickTimer)
+      inviteTickTimer = null
+    }
+  }, 1000)
+}
+function inviteLeft(uid) {
+  const left = Math.ceil(((inviteUntil.value[uid] || 0) - nowTick.value) / 1000)
+  return left > 0 ? left : 0
+}
+async function loadFriends() {
+  try {
+    friendList.value = await http.get('/friends')
+  } catch (e) { /* 拦截器已提示 */ }
+}
+function inviteFriend(uid) {
+  const left = inviteLeft(uid)
+  if (left > 0) {
+    toast(`请 ${left} 秒后再邀请该好友`, 'info')
+    return
+  }
+  coopStore.send('invite', { user_id: uid })
+  inviteUntil.value = { ...inviteUntil.value, [uid]: Date.now() + INVITE_CD_MS }
+  startInviteTick()
+  toast('邀请已发送', 'success')
+}
+// 进入房间面板（成为房主）时拉取好友列表
+watch(
+  () => coopStore.inRoom && coopStore.isHost,
+  (host) => { if (host) loadFriends() },
+  { immediate: true }
+)
+// 入座成功后自动上报当前皮肤（座位立绘用）
+watch(() => coopStore.inRoom, (v) => {
+  if (v) coopStore.setSkin(mySkin.value)
+})
+// 房主开始 → 后端广播 status=playing → 双端同时进入联机对局
+watch(() => coopStore.roomState?.status, (s, old) => {
+  if (s === 'playing' && old !== 'playing' && phase.value !== 'playing') startCoopGame()
+})
+function startCoopGame() {
+  liveScore.value = 0
+  result.value = null
+  coopPlaying.value = true
+  phase.value = 'playing'
+  startAt.value = Date.now()
+  const coopCtx = {
+    isHost: coopStore.isHost,
+    mySeat: coopStore.mySeat,
+    players: coopStore.activePlayers,
+    send: (type, data) => coopStore.send(type, data),
+    onMessage: (cb) => coopStore.setGameHandler(cb),
+    offMessage: () => coopStore.clearGameHandler(),
+  }
+  const deadline = performance.now() + 3000
+  const tryStart = () => {
+    // 房主决定本局 mod 集合，客机等待全量快照对齐
+    if (gameRef.value?.start) gameRef.value.start({ coop: coopCtx, skin: mySkin.value, mods: coopStore.isHost ? [...selMods.value] : [] })
+    else if (performance.now() < deadline) requestAnimationFrame(tryStart)
+  }
+  requestAnimationFrame(tryStart)
+}
+// 房间座位视图数据（补上空位）
+const roomSeats = computed(() => coopStore.roomState?.seats || [])
+const allReady = computed(() => {
+  const occ = roomSeats.value.filter((s) => s.occupied)
+  return occ.length >= 1 && occ.every((s) => s.ready)
+})
+
+// 使用局内道具：先扣库存再作用到游戏
+async function useProp(propCode) {
+  try {
+    const res = await http.post('/props/use', { prop_code: propCode, game_code: code })
+    // 更新本地库存
+    const item = bag.value.find((p) => p.code === propCode)
+    if (item) item.quantity = res.remain
+    const applied = gameRef.value?.useProp(propCode)
+    if (!applied) toast('当前场景无法使用该道具', 'info')
+    else toast('道具已生效！', 'success')
+  } catch (e) {
+    // 拦截器已提示
+  }
+}
+
+// 道具栏点击：有库存直接用；没库存则一键购买后立即使用（积分不足由拦截器提示）
+async function clickProp(p) {
+  if (p.quantity > 0) {
+    useProp(p.code)
+    return
+  }
+  if (buyingProp.value) return
+  buyingProp.value = p.code
+  try {
+    await http.post('/shop/buy', { item_type: 2, item_id: p.id, quantity: 1 })
+    await userStore.refresh()
+    bag.value = await http.get('/user/props')
+    toast(`已购买「${p.name}」（-${p.price} 积分）`, 'success')
+    await useProp(p.code)
+  } catch (e) {
+    // 拦截器已提示
+  } finally {
+    buyingProp.value = ''
+  }
+}
+
+// 复活：扣复活卡并让游戏原地复活继续
+async function revive() {
+  try {
+    const res = await http.post('/props/use', { prop_code: 'revive', game_code: code })
+    const item = bag.value.find((p) => p.code === 'revive')
+    if (item) item.quantity = res.remain
+    phase.value = 'playing'
+    gameRef.value?.useProp('revive')
+    toast('复活成功，继续加油！', 'success')
+  } catch (e) {
+    // 拦截器已提示
+  }
+}
+
+// 结算：上报得分换积分
+async function settle() {
+  if (settling.value) return
+  settling.value = true
+  try {
+    const res = await http.post(`/games/${code}/score`, {
+      score: finalScore.value,
+      duration: Math.round((Date.now() - startAt.value) / 1000),
+      use_double: useDouble.value,
+    })
+    result.value = res
+    userStore.setPoints(res.balance)
+    if (res.is_new_high) toast('🎉 刷新个人纪录！', 'success')
+    useDouble.value = false
+    // 双倍卡已消耗，刷新背包
+    bag.value = await http.get('/user/props')
+    // 刷新最高分显示
+    detail.value.best_score = Math.max(detail.value.best_score, finalScore.value)
+  } catch (e) {
+    // 拦截器已提示
+  } finally {
+    settling.value = false
+  }
+}
+
+// 再来一局：带关卡的游戏回到关卡选择，存档/组队游戏回开始面板，其余直接重开
+function again() {
+  result.value = null
+  if (coopable) {
+    // 联机局结束后后端会把房间打回 waiting；只要还在房 / 本局是联机，就回房间面板（不要回模式首页）
+    const backToRoom = coopStore.inRoom || coopPlaying.value
+    coopPlaying.value = false
+    coopStage.value = backToRoom ? 'room' : 'mode'
+    phase.value = 'ready'
+    // 房间还在但 WS 断了：尝试重连，方便房主直接再开一局
+    if (backToRoom && !coopStore.connected) {
+      coopStore.connect().catch(() => toast('联机服务连接失败，请重新进入组队', 'info'))
+    }
+  } else if (levelsMeta || saveable) phase.value = 'ready'
+  else startGame()
+}
+
+// 从全局邀请弹窗跳转而来：自动连 ws 并加入房间
+async function tryPendingJoin() {
+  if (!coopable) return
+  const pendingCode = sessionStorage.getItem('pending_join_code')
+  if (!pendingCode) return
+  sessionStorage.removeItem('pending_join_code')
+  sessionStorage.removeItem('pending_join_game')
+  coopBusy.value = true
+  try {
+    if (coopStore.inRoom) coopStore.leaveRoom()
+    await coopStore.connect()
+    coopStage.value = 'room'
+    joinCode.value = pendingCode
+    coopStore.joinRoom(pendingCode)
+  } catch {
+    toast('联机服务连接失败，请稍后再试')
+  } finally {
+    coopBusy.value = false
+  }
+}
+
+onMounted(() => {
+  // 宽屏游戏（如饥荒）：给 body 打标解除全局 1200px 限宽
+  if (meta?.wide) document.body.classList.add('wide-page')
+  load()
+  if (coopable) {
+    window.addEventListener('nlg:pending-join', tryPendingJoin)
+    tryPendingJoin()
+  }
+})
+onBeforeUnmount(() => {
+  document.body.classList.remove('wide-page')
+  window.removeEventListener('nlg:pending-join', tryPendingJoin)
+  clearInterval(inviteTickTimer)
+  gameRef.value?.stop()
+  // 离开游玩页断开联机连接（房间自动退出）
+  if (coopable) coopStore.disconnect()
+})
+</script>
+
+<template>
+  <div v-if="detail" class="play-wrap" :class="{ 'play-fill': meta?.wide }">
+    <!-- 顶部信息条 -->
+    <div class="play-head panel">
+      <button class="btn btn-ghost btn-sm" @click="router.back()">← 返回</button>
+      <GameIcon class="g-icon" :code="code" :icon="detail.game.icon" :size="34" />
+      <div class="g-info">
+        <b>{{ detail.game.name }}</b>
+        <span class="text-dim" style="font-size: 12px">{{ meta.controls }}</span>
+      </div>
+      <div class="g-stats">
+        <span class="stat-chip">本局 <b class="text-accent">{{ liveScore }}</b></span>
+        <span class="stat-chip">最高 <b class="text-primary">{{ detail.best_score }}</b></span>
+        <span class="stat-chip">💰 {{ userStore.user?.points ?? 0 }}</span>
+      </div>
+    </div>
+    <!-- 游戏区域 -->
+    <div class="stage panel">
+      <component :is="gameComp" v-if="gameComp" ref="gameRef" @score="onScore" @end="onEnd" @progress="onProgress" @save="onSave" />
+      <!-- 开始遮罩：带关卡的游戏显示关卡选择；组队游戏显示模式选择状态机；其余显示开始按钮 -->
+      <div v-if="phase === 'ready'" class="overlay" :class="{ scrollable: levelsMeta || (coopable && ['skins', 'solo', 'room'].includes(coopStage)) }">
+        <!-- ============ 组队游戏（如饥荒）：模式选择 / 单人 / 更衣室 / 房间 ============ -->
+        <template v-if="coopable">
+          <!-- 1. 模式选择 -->
+          <template v-if="coopStage === 'mode'">
+            <div class="ov-icon"><GameIcon :code="code" :icon="detail.game.icon" :size="56" /></div>
+            <h3>{{ detail.game.name }}</h3>
+            <p class="text-dim ov-desc">{{ detail.game.description }}</p>
+            <div class="mode-cards">
+              <button class="mode-card" @click="coopStage = 'solo'">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="12" cy="8" r="3.4" />
+                  <path d="M5.5 20c.6-4 3.2-6 6.5-6s5.9 2 6.5 6" />
+                </svg>
+                <b>单人冒险</b>
+                <i>云存档续玩 · 死亡删档</i>
+              </button>
+              <button class="mode-card" :disabled="coopBusy" @click="enterCoop">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="8.5" cy="8.5" r="2.8" />
+                  <circle cx="16" cy="9.5" r="2.4" />
+                  <path d="M3.5 19c.5-3.2 2.6-4.8 5-4.8s4.5 1.6 5 4.8" />
+                  <path d="M14.5 18.5c.4-2.6 2-3.9 3.9-3.9 1.4 0 2.7.8 3.4 2.4" />
+                </svg>
+                <b>{{ coopBusy ? '连接中…' : '组队联机' }}</b>
+                <i>2~4 人共享同一世界</i>
+              </button>
+            </div>
+            <button class="btn btn-ghost" @click="coopStage = 'skins'">
+              更衣室 · 30 款人物皮肤
+            </button>
+          </template>
+          <!-- 2. 单人面板（继续存档 / 新的冒险） -->
+          <template v-else-if="coopStage === 'solo'">
+            <div class="ov-icon"><GameIcon :code="code" :icon="detail.game.icon" :size="48" /></div>
+            <h3>单人冒险</h3>
+            <label v-if="meta.supports.includes('double_points') && propCount('double_points') > 0" class="double-check">
+              <input v-model="useDouble" type="checkbox" />
+              使用 ✨双倍积分卡（剩 {{ propCount('double_points') }} 张），本局积分翻倍
+            </label>
+            <!-- Mod 装载：新开局生效；继续冒险以存档内记录为准 -->
+            <div v-if="modsAvail.length" class="mod-pick">
+              <div class="mp-head">
+                <b>Mod 装载{{ saveable && saveInfo.exists ? '（重新开始时生效）' : '（可选）' }}</b>
+                <span v-if="modFactor !== 1" class="mp-total" :class="{ up: modFactor > 1 }">得分 ×{{ modFactor }}</span>
+              </div>
+              <label v-for="m in modsAvail" :key="m.id" class="mp-item" :class="{ on: selMods.includes(m.id) }">
+                <input type="checkbox" :checked="selMods.includes(m.id)" @change="toggleMod(m.id)" />
+                <span class="mp-name">{{ m.name }}</span>
+                <span class="mp-desc">{{ m.desc }}</span>
+                <span v-if="m.factor !== 1" class="mp-factor" :class="{ up: m.factor > 1 }">×{{ m.factor }}</span>
+              </label>
+            </div>
+            <template v-if="saveable && saveInfo.exists">
+              <div class="save-card">
+                <b>发现存档</b>
+                <span v-if="saveModNames.length" class="save-mods">Mod：{{ saveModNames.join('、') }}</span>
+                <span>第 {{ saveInfo.day }} 天 · 得分 {{ saveInfo.score }}</span>
+              </div>
+              <div class="ov-btns">
+                <button class="btn btn-lg" @click="continueSave">继续冒险</button>
+                <button class="btn btn-ghost" @click="restartFresh">放弃存档重新开始</button>
+              </div>
+            </template>
+            <button v-else class="btn btn-lg" @click="startGame()">新的冒险</button>
+            <button class="btn btn-ghost btn-sm" @click="coopStage = 'mode'">← 返回</button>
+          </template>
+          <!-- 3. 更衣室：30 款皮肤立绘网格（已解锁可穿、未解锁积分购买） -->
+          <template v-else-if="coopStage === 'skins'">
+            <h3>更衣室</h3>
+            <p class="text-dim" style="font-size: 12px">点击已解锁的皮肤穿上；未解锁的用积分购买 · 余额 {{ userStore.user?.points ?? 0 }}</p>
+            <div class="skin-grid">
+              <div
+                v-for="s in skins"
+                :key="s.code"
+                class="skin-cell"
+                :class="{ on: mySkin === s.code, locked: !s.owned }"
+                :title="s.owned ? '点击穿上' : `${s.price} 积分解锁`"
+                @click="s.owned ? pickSkin(s) : null"
+              >
+                <img :src="skinPreview(s.code)" alt="" />
+                <span class="sk-name">{{ s.name }}</span>
+                <span v-if="mySkin === s.code" class="sk-tag on-tag">已穿上</span>
+                <button
+                  v-else-if="!s.owned"
+                  class="sk-buy"
+                  :disabled="buyingSkin === s.code"
+                  @click.stop="buySkin(s)"
+                >
+                  {{ buyingSkin === s.code ? '购买中…' : s.price + ' 积分' }}
+                </button>
+                <span v-else class="sk-tag">已拥有</span>
+              </div>
+            </div>
+            <button class="btn btn-ghost btn-sm" @click="coopStage = 'mode'">← 返回</button>
+          </template>
+          <!-- 4. 联机房间：建房/邀请码加入 → 座位面板 -->
+          <template v-else-if="coopStage === 'room'">
+            <template v-if="!coopStore.inRoom">
+              <h3>组队联机</h3>
+              <p class="text-dim" style="font-size: 12px">创建房间把邀请码发给好友，或输入好友的邀请码加入（2~4 人）</p>
+              <div class="ov-btns">
+                <button class="btn btn-lg" @click="createRoom">创建房间</button>
+              </div>
+              <div class="join-row">
+                <input v-model="joinCode" class="join-input" maxlength="6" placeholder="输入 6 位邀请码" @keyup.enter="joinRoom" />
+                <button class="btn" @click="joinRoom">加入</button>
+              </div>
+              <button class="btn btn-ghost btn-sm" @click="coopStage = 'mode'">← 返回</button>
+            </template>
+            <template v-else>
+              <h3>联机房间</h3>
+              <div class="invite-row">
+                邀请码 <b class="invite-code">{{ coopStore.roomState.code }}</b>
+                <span class="text-dim" style="font-size: 12px">发给好友加入</span>
+              </div>
+              <div class="seat-grid">
+                <div v-for="s in roomSeats" :key="s.index" class="seat-cell" :class="{ empty: !s.occupied, offline: s.occupied && !s.online }">
+                  <template v-if="s.occupied">
+                    <img class="seat-fig" :src="skinPreview(s.skin || 'wilson')" alt="" />
+                    <b class="seat-name">{{ s.name }}<template v-if="s.user_id === coopStore.roomState.host_id">（房主）</template></b>
+                    <span class="seat-state" :class="{ ok: s.ready }">{{ !s.online ? '掉线' : s.ready ? '已准备' : '未准备' }}</span>
+                  </template>
+                  <template v-else>
+                    <span class="seat-empty-mark">空位</span>
+                  </template>
+                </div>
+              </div>
+              <!-- 房主可为本局勾选 mod（随世界快照同步给全员） -->
+              <div v-if="coopStore.isHost && modsAvail.length" class="mod-pick compact">
+                <div class="mp-head">
+                  <b>本局 Mod（房主设定）</b>
+                  <span v-if="modFactor !== 1" class="mp-total" :class="{ up: modFactor > 1 }">得分 ×{{ modFactor }}</span>
+                </div>
+                <label v-for="m in modsAvail" :key="m.id" class="mp-item" :class="{ on: selMods.includes(m.id) }">
+                  <input type="checkbox" :checked="selMods.includes(m.id)" @change="toggleMod(m.id)" />
+                  <span class="mp-name">{{ m.name }}</span>
+                  <span class="mp-desc">{{ m.desc }}</span>
+                  <span v-if="m.factor !== 1" class="mp-factor" :class="{ up: m.factor > 1 }">×{{ m.factor }}</span>
+                </label>
+              </div>
+              <!-- 房主邀请好友：在线好友一键发弹窗邀请，离线好友发私聊兜底 -->
+              <div v-if="coopStore.isHost && friendList.length" class="friend-invite">
+                <div class="fi-head">邀请好友（{{ friendList.length }}）· 同一人 1 分钟内不可重复</div>
+                <div class="fi-list">
+                  <button
+                    v-for="f in friendList"
+                    :key="f.user_id"
+                    type="button"
+                    class="fi-item"
+                    :class="{ off: !f.online, sent: inviteLeft(f.user_id) > 0 }"
+                    :disabled="inviteLeft(f.user_id) > 0"
+                    :title="inviteLeft(f.user_id) > 0
+                      ? `${inviteLeft(f.user_id)} 秒后可再邀请`
+                      : (f.online ? '点击发送弹窗邀请' : '好友离线：将发送私聊邀请')"
+                    @click="inviteFriend(f.user_id)"
+                  >
+                    <span class="fi-avatar"><PixelAvatar :code="f.avatar || 'px:01'" :size="22" /></span>
+                    <span class="fi-name">{{ f.nickname }}</span>
+                    <span class="fi-dot" :class="{ on: f.online }"></span>
+                    <span class="fi-act">{{
+                      inviteLeft(f.user_id) > 0
+                        ? `${inviteLeft(f.user_id)}s`
+                        : (f.online ? '邀请' : '留言')
+                    }}</span>
+                  </button>
+                </div>
+              </div>
+              <div class="ov-btns">
+                <button v-if="coopStore.isHost" class="btn btn-lg" :disabled="!allReady" :title="allReady ? '' : '等待全员准备'" @click="coopStore.startGame()">开始冒险</button>
+                <button
+                  v-else
+                  class="btn"
+                  @click="coopStore.setReady(!roomSeats[coopStore.mySeat]?.ready)"
+                >{{ roomSeats[coopStore.mySeat]?.ready ? '取消准备' : '准备' }}</button>
+                <button class="btn btn-ghost" @click="coopStage = 'skins'">更衣室</button>
+                <button class="btn btn-ghost" @click="leaveRoom">离开房间</button>
+              </div>
+            </template>
+          </template>
+        </template>
+        <!-- ============ 普通游戏：原有开始面板 ============ -->
+        <template v-else>
+          <div class="ov-icon"><GameIcon :code="code" :icon="detail.game.icon" :size="levelsMeta ? 40 : 56" /></div>
+          <h3>{{ detail.game.name }}</h3>
+          <p v-if="!levelsMeta" class="text-dim ov-desc">{{ detail.game.description }}</p>
+          <p class="text-dim" style="font-size: 12px">🎮 {{ meta.controls }}</p>
+          <label v-if="meta.supports.includes('double_points') && propCount('double_points') > 0" class="double-check">
+            <input v-model="useDouble" type="checkbox" />
+            使用 ✨双倍积分卡（剩 {{ propCount('double_points') }} 张），本局积分翻倍
+          </label>
+          <!-- 关卡选择（读取上次进度，展示好友都在哪一关） -->
+          <LevelSelect
+            v-if="levelsMeta"
+            :total="levelsMeta.total"
+            :names="levelsMeta.names"
+            :my-level="progress.level"
+            :friends="progress.friends"
+            @pick="startGame"
+          />
+          <!-- 存档游戏：有档显示「继续 / 重新开始」，无档显示「新的冒险」 -->
+          <template v-else-if="saveable && saveInfo.exists">
+            <div class="save-card">
+              <b>发现存档</b>
+              <span>第 {{ saveInfo.day }} 天 · 得分 {{ saveInfo.score }}</span>
+            </div>
+            <div class="ov-btns">
+              <button class="btn btn-lg" @click="continueSave">继续冒险</button>
+              <button class="btn btn-ghost" @click="restartFresh">放弃存档重新开始</button>
+            </div>
+          </template>
+          <button v-else class="btn btn-lg" @click="startGame()">{{ saveable ? '新的冒险' : '开始游戏' }}</button>
+        </template>
+      </div>
+      <!-- 结算遮罩 -->
+      <div v-if="phase === 'over'" class="overlay">
+        <template v-if="!result">
+          <div class="ov-icon">💀</div>
+          <h3>本局结束</h3>
+          <p class="final">得分 <b>{{ finalScore }}</b></p>
+          <div class="ov-btns">
+            <button v-if="canRevive" class="btn btn-accent" @click="revive">
+              ❤️ 使用复活卡继续（剩 {{ propCount('revive') }} 张）
+            </button>
+            <button class="btn" :disabled="settling" @click="settle">{{ settling ? '结算中…' : '领取积分' }}</button>
+          </div>
+        </template>
+        <template v-else>
+          <div class="ov-icon">{{ result.is_new_high ? '🏆' : '🎉' }}</div>
+          <h3>{{ result.is_new_high ? '新纪录！' : '结算完成' }}</h3>
+          <p class="final">得分 <b>{{ finalScore }}</b></p>
+          <p class="got">
+            获得积分 <b class="text-primary">+{{ result.points_gained }}</b>
+            <span v-if="result.doubled" class="tag tag-accent">已双倍</span>
+          </p>
+          <p v-if="result.capped" class="text-dim" style="font-size: 12px">今日该游戏积分已达上限，明天再来吧</p>
+          <p class="text-dim" style="font-size: 12px">当前余额 💰{{ result.balance }}</p>
+          <div class="ov-btns">
+            <button class="btn" @click="again">再来一局</button>
+            <button class="btn btn-ghost" @click="router.push('/')">返回大厅</button>
+          </div>
+        </template>
+      </div>
+    </div>
+    <!-- 局内道具栏：支持的道具全部展示，没库存的点击直接花积分买一张并立即生效 -->
+    <div v-if="phase === 'playing' && inGameProps.length" class="prop-bar panel">
+      <span class="text-dim" style="font-size: 12px">局内道具：</span>
+      <button
+        v-for="p in inGameProps"
+        :key="p.code"
+        class="prop-btn"
+        :class="{ empty: !p.quantity }"
+        :disabled="buyingProp === p.code"
+        :title="p.description + (p.quantity ? '' : `（点击花 ${p.price} 积分购买并立即使用）`)"
+        @click="clickProp(p)"
+      >
+        <span class="prop-icon">{{ p.icon }}</span>
+        <span class="prop-name">{{ p.name }}</span>
+        <span v-if="p.quantity" class="prop-count">×{{ p.quantity }}</span>
+        <span v-else class="prop-buy">💰{{ p.price }}</span>
+      </button>
+    </div>
+  </div>
+  <!-- 未拥有提示 -->
+  <div v-else-if="phase === 'locked'" class="locked panel">
+    <div style="font-size: 50px">🔒</div>
+    <h3>尚未拥有该游戏</h3>
+    <p class="text-dim">前往游戏中心用积分购买后即可游玩</p>
+    <button class="btn" @click="router.push('/center')">去游戏中心</button>
+  </div>
+</template>
+
+<style scoped>
+.play-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.play-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+}
+.g-icon {
+  font-size: 30px;
+}
+.g-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.g-stats {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.stat-chip {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 4px 12px;
+  font-size: 12px;
+}
+.stage {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  padding: 14px;
+  min-height: 300px;
+}
+.stage :deep(canvas) {
+  max-width: 100%;
+  height: auto;
+  border-radius: 10px;
+  display: block;
+}
+/* 宽屏游戏（meta.wide）：整页视口高度内自适应，游戏区吃满剩余高度 */
+.play-wrap.play-fill {
+  height: 100%;
+  min-height: 0;
+}
+.play-fill .stage {
+  flex: 1;
+  min-height: 0;
+  padding: 10px;
+  overflow: hidden;
+}
+.overlay {
+  position: absolute;
+  inset: 0;
+  background: color-mix(in srgb, var(--bg) 82%, transparent);
+  backdrop-filter: blur(4px);
+  border-radius: var(--radius);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  text-align: center;
+  padding: 20px;
+  z-index: 5;
+}
+/* 关卡选择内容较高，允许滚动 */
+.overlay.scrollable {
+  justify-content: flex-start;
+  overflow-y: auto;
+}
+.ov-icon {
+  font-size: 52px;
+  filter: drop-shadow(var(--glow));
+}
+.ov-desc {
+  max-width: 420px;
+  font-size: 13px;
+}
+/* 存档信息卡（存档游戏的开始面板） */
+.save-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px 26px;
+}
+.save-card b {
+  color: var(--primary-2);
+  font-size: 14px;
+}
+.save-mods {
+  color: #b48ad8;
+}
+/* ---- Mod 装载勾选列表 ---- */
+.mod-pick {
+  width: min(460px, 92%);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 10px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  text-align: left;
+}
+.mod-pick.compact {
+  width: min(420px, 96%);
+  max-height: 200px;
+  overflow: auto;
+}
+/* 房主邀请好友栏 */
+.friend-invite {
+  width: min(440px, 96%);
+  max-height: 220px;
+  overflow: auto;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  text-align: left;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+.fi-head {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-dim);
+}
+.fi-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+.fi-item {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr) 10px auto;
+  align-items: center;
+  column-gap: 10px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font-size: 13px;
+  transition: background 0.15s, border-color 0.15s;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: left;
+}
+.fi-item:hover:not(:disabled) {
+  background: var(--bg-panel);
+  border-color: var(--primary);
+}
+.fi-item.off {
+  opacity: 0.65;
+}
+.fi-item.sent {
+  cursor: default;
+  opacity: 0.75;
+}
+.fi-item:disabled {
+  cursor: not-allowed;
+}
+.fi-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+}
+.fi-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  font-weight: 600;
+}
+.fi-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #888;
+  justify-self: center;
+}
+.fi-dot.on {
+  background: #67d18f;
+  box-shadow: 0 0 6px rgba(103, 209, 143, 0.6);
+}
+.fi-act {
+  font-size: 12px;
+  color: var(--primary);
+  white-space: nowrap;
+  min-width: 2.5em;
+  text-align: right;
+}
+.mp-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+}
+.mp-total {
+  font-size: 12px;
+  font-weight: 700;
+  color: #67d18f;
+}
+.mp-total.up {
+  color: #e0a63c;
+}
+.mp-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  padding: 4px 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+.mp-item:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+.mp-item.on {
+  border-color: var(--primary);
+  background: rgba(124, 92, 255, 0.08);
+}
+.mp-item input {
+  accent-color: var(--primary);
+}
+.mp-name {
+  font-weight: 700;
+  white-space: nowrap;
+}
+.mp-desc {
+  flex: 1;
+  color: var(--text-dim);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mp-factor {
+  font-size: 12px;
+  font-weight: 700;
+  color: #67d18f;
+}
+.mp-factor.up {
+  color: #e0a63c;
+}
+.save-card span {
+  font-size: 13px;
+  color: var(--text-dim, #9a9ac4);
+}
+.double-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--primary-2);
+  cursor: pointer;
+  background: var(--bg-card);
+  padding: 8px 14px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+}
+.final {
+  font-size: 15px;
+}
+.final b {
+  font-size: 30px;
+  color: var(--accent);
+}
+.got {
+  font-size: 14px;
+}
+.got b {
+  font-size: 22px;
+}
+.ov-btns {
+  display: flex;
+  gap: 10px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.prop-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  flex-wrap: wrap;
+}
+.prop-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 6px 14px;
+  cursor: pointer;
+  color: var(--text);
+  font-size: 13px;
+  transition: all 0.15s;
+}
+.prop-btn:hover {
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+}
+.prop-icon {
+  font-size: 16px;
+}
+.prop-count {
+  color: var(--primary-2);
+  font-weight: 700;
+}
+/* 无库存道具：暗显 + 价格标签 */
+.prop-btn.empty {
+  opacity: 0.75;
+  border-style: dashed;
+}
+.prop-buy {
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 700;
+}
+.locked {
+  text-align: center;
+  padding: 60px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+/* ---- 组队游戏：模式选择卡片 ---- */
+.mode-cards {
+  display: flex;
+  gap: 14px;
+  margin: 6px 0;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.mode-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  width: 180px;
+  padding: 18px 14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  color: var(--text);
+  cursor: pointer;
+  transition: all 0.18s;
+}
+.mode-card:hover {
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+  transform: translateY(-2px);
+}
+.mode-card svg {
+  width: 34px;
+  height: 34px;
+  color: var(--primary-2);
+}
+.mode-card b {
+  font-size: 15px;
+}
+.mode-card i {
+  font-style: normal;
+  font-size: 11px;
+  color: var(--text-dim, #9a9ac4);
+}
+/* ---- 更衣室：皮肤网格 ---- */
+.skin-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: 10px;
+  width: min(720px, 92%);
+  max-height: 46vh;
+  overflow-y: auto;
+  padding: 6px;
+}
+.skin-cell {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 6px 8px;
+  background: var(--bg-card);
+  border: 1.5px solid var(--border);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.skin-cell:hover {
+  border-color: var(--primary);
+}
+.skin-cell.on {
+  border-color: var(--accent);
+  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent);
+}
+.skin-cell.locked {
+  cursor: default;
+}
+.skin-cell.locked img {
+  filter: grayscale(0.85) brightness(0.75);
+}
+.skin-cell img {
+  width: 56px;
+  height: 56px;
+  image-rendering: auto;
+}
+.sk-name {
+  font-size: 11px;
+  line-height: 1.2;
+  text-align: center;
+}
+.sk-tag {
+  font-size: 10px;
+  color: var(--text-dim, #9a9ac4);
+}
+.sk-tag.on-tag {
+  color: var(--accent);
+  font-weight: 700;
+}
+.sk-buy {
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--accent);
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+}
+.sk-buy:hover {
+  background: var(--accent);
+  color: #fff;
+}
+/* ---- 联机房间 ---- */
+.join-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.join-input {
+  width: 150px;
+  padding: 9px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text);
+  font-size: 14px;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  text-align: center;
+}
+.invite-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+.invite-code {
+  font-size: 22px;
+  letter-spacing: 4px;
+  color: var(--accent);
+  background: var(--bg-card);
+  border: 1px dashed var(--accent);
+  border-radius: 8px;
+  padding: 3px 12px;
+}
+.seat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 140px));
+  gap: 10px;
+  justify-content: center;
+  width: min(640px, 92%);
+}
+.seat-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 12px 8px;
+  background: var(--bg-card);
+  border: 1.5px solid var(--border);
+  border-radius: 12px;
+  min-height: 120px;
+  justify-content: center;
+}
+.seat-cell.empty {
+  border-style: dashed;
+  opacity: 0.6;
+}
+.seat-cell.offline {
+  opacity: 0.55;
+}
+.seat-fig {
+  width: 54px;
+  height: 54px;
+}
+.seat-name {
+  font-size: 12px;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.seat-state {
+  font-size: 11px;
+  color: var(--text-dim, #9a9ac4);
+}
+.seat-state.ok {
+  color: var(--primary-2);
+  font-weight: 700;
+}
+.seat-empty-mark {
+  font-size: 12px;
+  color: var(--text-dim, #9a9ac4);
+}
+</style>
diff --git a/src/views/Lobby.vue b/src/views/Lobby.vue
new file mode 100644
index 0000000..bdaddc8
--- /dev/null
+++ b/src/views/Lobby.vue
@@ -0,0 +1,473 @@
+<script setup>
+// 大厅：公告 + 分类筛选 + 游戏宫格 + 排行速览 + 购买弹窗（不跳转直接买）
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import http, { toast } from '../api/http'
+import { useThemeStore } from '../stores/theme'
+import { useUserStore } from '../stores/user'
+import GameCard from '../components/GameCard.vue'
+import PixelAvatar from '../components/PixelAvatar.vue'
+import GameCarousel from '../components/GameCarousel.vue'
+import GameIcon from '../components/GameIcon.vue'
+
+const router = useRouter()
+const themeStore = useThemeStore()
+const userStore = useUserStore()
+
+const games = ref([])
+const rankTop = ref([])
+const category = ref('全部')
+const keyword = ref('')
+const ownFilter = ref('all') // 拥有状态筛选：all=全部 owned=我能玩的 locked=待解锁
+
+// 分类列表（按数据动态生成）
+const categories = computed(() => ['全部', ...new Set(games.value.map((g) => g.category))])
+// 参与轮播的游戏（后台游戏管理里配置 carousel>0，按值升序）
+const carouselGames = computed(() =>
+  games.value.filter((g) => g.carousel > 0).sort((a, b) => a.carousel - b.carousel)
+)
+// 我能玩的数量（免费、已购、VIP周免都算）
+const ownedCount = computed(() => games.value.filter((g) => g.playable).length)
+// 筛选后的游戏：拥有状态 + 分类 + 关键词三层过滤
+const filtered = computed(() =>
+  games.value.filter(
+    (g) =>
+      (ownFilter.value === 'all' || (ownFilter.value === 'owned' ? g.playable : !g.playable)) &&
+      (category.value === '全部' || g.category === category.value) &&
+      (!keyword.value || g.name.includes(keyword.value))
+  )
+)
+
+// 点击游戏卡片：玩不了的付费游戏弹购买详情窗（不跳转），联机游戏去对战大厅，其余进入游玩页
+function onPlay(game) {
+  if (!game.playable && game.price > 0) {
+    buyGame.value = game
+  } else if (game.engine === 'online') {
+    router.push({ path: '/battle', query: { game: game.code } })
+  } else {
+    router.push(`/play/${game.code}`)
+  }
+}
+
+// ---- 购买弹窗 ----
+const buyGame = ref(null) // 当前弹窗展示的游戏（null=关闭）
+const buying = ref(false)
+const myPoints = computed(() => userStore.user?.points ?? 0)
+
+// 弹窗内直接购买：成功后刷新余额与游戏列表，卡片立即变为可玩
+async function doBuy() {
+  if (buying.value) return
+  buying.value = true
+  try {
+    await http.post('/shop/buy', { item_type: 1, item_id: buyGame.value.id, quantity: 1 })
+    toast(`已购买「${buyGame.value.name}」，开始玩吧！`, 'success')
+    buyGame.value = null
+    await userStore.refresh()
+    games.value = await http.get('/games')
+  } finally {
+    buying.value = false
+  }
+}
+
+// 弹窗内加入购物车（稍后去游戏中心统一结算）
+async function doAddCart() {
+  await http.post('/shop/cart', { item_type: 1, item_id: buyGame.value.id, quantity: 1 })
+  toast('已加入购物车', 'success')
+}
+
+onMounted(async () => {
+  userStore.refresh()
+  games.value = await http.get('/games')
+  const rank = await http.get('/rank/points')
+  rankTop.value = (rank.list || []).slice(0, 5)
+})
+</script>
+
+<template>
+  <div>
+    <!-- 公告栏 -->
+    <div v-if="themeStore.announcement" class="notice panel">
+      <span class="notice-icon">📢</span>
+      <span class="notice-text">{{ themeStore.announcement }}</span>
+    </div>
+    <div class="lobby-grid">
+      <div class="main-col">
+        <!-- 游戏轮播：后台可配置参与游戏与轮播效果，点击直接进游戏/弹购买 -->
+        <GameCarousel
+          v-if="carouselGames.length"
+          :games="carouselGames"
+          :style-type="themeStore.carouselStyle"
+          :interval="themeStore.carouselInterval"
+          @play="onPlay"
+        />
+        <h2 class="page-title">游戏大厅</h2>
+        <!-- 筛选工具条：拥有状态 + 搜索 -->
+        <div class="filters">
+          <div class="chips own-chips">
+            <button class="chip" :class="{ on: ownFilter === 'all' }" @click="ownFilter = 'all'">
+              全部 {{ games.length }}
+            </button>
+            <button class="chip" :class="{ on: ownFilter === 'owned' }" @click="ownFilter = 'owned'">
+              🎮 我能玩的 {{ ownedCount }}
+            </button>
+            <button class="chip" :class="{ on: ownFilter === 'locked' }" @click="ownFilter = 'locked'">
+              🔒 待解锁 {{ games.length - ownedCount }}
+            </button>
+          </div>
+          <input v-model.trim="keyword" class="input search" placeholder="🔍 搜索游戏…" />
+        </div>
+        <!-- 分类筛选 -->
+        <div class="filters">
+          <div class="chips">
+            <button
+              v-for="c in categories"
+              :key="c"
+              class="chip"
+              :class="{ on: category === c }"
+              @click="category = c"
+            >
+              {{ c }}
+            </button>
+          </div>
+        </div>
+        <!-- 游戏宫格 -->
+        <div class="grid">
+          <GameCard v-for="g in filtered" :key="g.id" :game="g" @play="onPlay" />
+        </div>
+        <div v-if="!filtered.length" class="empty">没有找到符合条件的游戏</div>
+      </div>
+      <!-- 侧栏：排行速览 -->
+      <aside class="side-col">
+        <div class="panel">
+          <h3 class="side-title">🏆 积分排行 TOP5</h3>
+          <div v-for="(u, i) in rankTop" :key="u.user_id" class="rank-item">
+            <span class="rank-no" :class="`no-${i + 1}`">{{ i + 1 }}</span>
+            <span class="rank-avatar"><PixelAvatar :code="u.avatar" :size="24" /></span>
+            <span class="rank-name">{{ u.nickname }}</span>
+            <span class="rank-points text-primary">{{ u.total_points }}</span>
+          </div>
+          <router-link to="/rank" class="more text-dim">查看完整榜单 →</router-link>
+        </div>
+        <div class="panel quick">
+          <h3 class="side-title">⚡ 快捷入口</h3>
+          <router-link to="/signin" class="quick-link">📅 每日签到领积分</router-link>
+          <router-link to="/center" class="quick-link">🛒 逛逛游戏中心</router-link>
+          <router-link to="/battle" class="quick-link">⚔️ 找人联机对战</router-link>
+        </div>
+      </aside>
+    </div>
+    <!-- 购买弹窗：展示游戏详情，可直接购买或加购物车 -->
+    <Teleport to="body">
+      <div v-if="buyGame" class="modal-mask" @click.self="buyGame = null">
+        <div class="buy-modal panel">
+          <button class="bm-close" @click="buyGame = null">✕</button>
+          <div class="bm-head">
+            <div class="bm-icon-box"><GameIcon class="bm-icon" :code="buyGame.code" :icon="buyGame.icon" :size="40" /></div>
+            <div class="bm-title">
+              <div class="bm-name">{{ buyGame.name }}</div>
+              <div class="bm-tags">
+                <span class="bm-tag">{{ buyGame.category }}</span>
+                <span class="bm-tag">{{ buyGame.engine === 'online' ? '⚔️ 联机对战' : '🕹️ 单机' }}</span>
+                <span class="bm-tag">🔥 {{ buyGame.play_count }} 次游玩</span>
+              </div>
+            </div>
+          </div>
+          <p class="bm-desc text-dim">{{ buyGame.description }}</p>
+          <div class="bm-price-row">
+            <span class="bm-price-item">价格 <b class="text-primary">💰 {{ buyGame.price }}</b></span>
+            <span class="bm-price-item">
+              我的余额
+              <b :class="myPoints >= buyGame.price ? 'text-primary' : 'bm-lack'">💰 {{ myPoints }}</b>
+            </span>
+          </div>
+          <div v-if="myPoints < buyGame.price" class="bm-warn">
+            积分不足，还差 {{ buyGame.price - myPoints }} 分。
+            <router-link to="/signin" @click="buyGame = null">去签到赚积分 →</router-link>
+          </div>
+          <div class="bm-actions">
+            <button class="btn btn-ghost" @click="doAddCart">🛒 加入购物车</button>
+            <button class="btn" :disabled="buying || myPoints < buyGame.price" @click="doBuy">
+              {{ buying ? '购买中…' : '立即购买' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.notice {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  margin-bottom: 18px;
+  overflow: hidden;
+}
+.notice-icon {
+  font-size: 18px;
+}
+.notice-text {
+  font-size: 13px;
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.lobby-grid {
+  display: grid;
+  grid-template-columns: 1fr 260px;
+  gap: 18px;
+  align-items: start;
+}
+.filters {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+.own-chips {
+  flex: 1;
+}
+.own-chips .chip.on {
+  font-weight: 700;
+}
+.chips {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  flex: 1;
+}
+.chip {
+  padding: 6px 14px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--bg-panel);
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+}
+.chip:hover {
+  color: var(--text);
+  border-color: var(--primary);
+}
+.chip.on {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+  border-color: transparent;
+  box-shadow: var(--glow);
+}
+.search {
+  width: 200px;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+  gap: 14px;
+}
+.side-col {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  position: sticky;
+  top: 76px;
+}
+.side-title {
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+.rank-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 0;
+  font-size: 13px;
+}
+.rank-no {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 800;
+  background: var(--bg-card);
+  color: var(--text-dim);
+}
+.no-1 {
+  background: linear-gradient(135deg, #ffd700, #ff9500);
+  color: #422;
+}
+.no-2 {
+  background: linear-gradient(135deg, #e8e8e8, #9e9e9e);
+  color: #333;
+}
+.no-3 {
+  background: linear-gradient(135deg, #d7995b, #a05822);
+  color: #fff;
+}
+.rank-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rank-points {
+  font-weight: 700;
+}
+.more {
+  display: block;
+  text-align: center;
+  font-size: 12px;
+  margin-top: 8px;
+}
+.more:hover {
+  color: var(--primary);
+}
+.quick-link {
+  display: block;
+  padding: 10px 12px;
+  border-radius: calc(var(--radius) / 1.5);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  margin-bottom: 8px;
+  font-size: 13px;
+  transition: all 0.15s;
+}
+.quick-link:hover {
+  border-color: var(--primary);
+  transform: translateX(3px);
+}
+@media (max-width: 900px) {
+  .lobby-grid {
+    grid-template-columns: 1fr;
+  }
+  .side-col {
+    position: static;
+  }
+}
+/* ---- 购买弹窗 ---- */
+.modal-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  padding: 20px;
+}
+.buy-modal {
+  position: relative;
+  width: 420px;
+  max-width: 100%;
+  padding: 22px;
+  animation: bm-pop 0.18s ease-out;
+}
+@keyframes bm-pop {
+  from {
+    transform: scale(0.92);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.bm-close {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  border: 0;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 16px;
+  cursor: pointer;
+}
+.bm-close:hover {
+  color: var(--text);
+}
+.bm-head {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+}
+.bm-icon-box {
+  width: 72px;
+  height: 72px;
+  border-radius: var(--radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
+  border: 1px solid var(--border);
+  flex: none;
+}
+.bm-icon {
+  font-size: 40px;
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
+}
+.bm-name {
+  font-size: 18px;
+  font-weight: 800;
+}
+.bm-tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 7px;
+}
+.bm-tag {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text-dim);
+}
+.bm-desc {
+  font-size: 13px;
+  line-height: 1.7;
+  margin: 14px 0;
+}
+.bm-price-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-radius: calc(var(--radius) / 1.5);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  font-size: 13px;
+}
+.bm-price-item b {
+  font-size: 15px;
+}
+.bm-lack {
+  color: #ff7b8a;
+}
+.bm-warn {
+  margin-top: 10px;
+  font-size: 12px;
+  color: #ff9d6e;
+}
+.bm-warn a {
+  color: var(--primary);
+}
+.bm-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 16px;
+}
+.bm-actions .btn {
+  flex: 1;
+}
+.bm-actions .btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>
diff --git a/src/views/Login.vue b/src/views/Login.vue
new file mode 100644
index 0000000..68a66f0
--- /dev/null
+++ b/src/views/Login.vue
@@ -0,0 +1,161 @@
+<script setup>
+// 登录/注册页：切换式表单，成功后写入用户 Store 并进入大厅
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import http, { toast } from '../api/http'
+import { useUserStore } from '../stores/user'
+import { useThemeStore } from '../stores/theme'
+import PixelAvatar from '../components/PixelAvatar.vue'
+import { AVATAR_LIST } from '../games/pixelAvatars'
+
+const router = useRouter()
+const userStore = useUserStore()
+const themeStore = useThemeStore()
+
+const mode = ref('login') // login / register
+const loading = ref(false)
+const form = reactive({ username: '', password: '', nickname: '', avatar: 'px:01' })
+// 注册时可选的手绘像素头像（32 个）
+const avatars = AVATAR_LIST.map((a) => a.code)
+
+// 提交登录或注册
+async function submit() {
+  if (!form.username || !form.password) {
+    toast('请输入用户名和密码')
+    return
+  }
+  loading.value = true
+  try {
+    const url = mode.value === 'login' ? '/auth/login' : '/auth/register'
+    const data = await http.post(url, form)
+    userStore.setLogin(data)
+    toast(mode.value === 'login' ? '欢迎回来！' : '注册成功，赠送积分已到账！', 'success')
+    router.push('/')
+  } catch (e) {
+    // 拦截器已提示
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="login-wrap">
+    <div class="login-box panel">
+      <div class="logo">🕹️</div>
+      <h1 class="title">{{ themeStore.siteName }}</h1>
+      <p class="subtitle text-dim">37 款小游戏 · 联机对战 · AI 陪玩</p>
+      <div class="tabs">
+        <button class="tab" :class="{ on: mode === 'login' }" @click="mode = 'login'">登录</button>
+        <button class="tab" :class="{ on: mode === 'register' }" @click="mode = 'register'">注册</button>
+      </div>
+      <div class="form">
+        <input v-model.trim="form.username" class="input" placeholder="用户名（3-20位）" @keyup.enter="submit" />
+        <input v-model="form.password" class="input" type="password" placeholder="密码（6-32位）" @keyup.enter="submit" />
+        <template v-if="mode === 'register'">
+          <input v-model.trim="form.nickname" class="input" placeholder="昵称（选填）" />
+          <div class="avatars">
+            <button
+              v-for="a in avatars"
+              :key="a"
+              class="avatar-opt"
+              :class="{ on: form.avatar === a }"
+              @click="form.avatar = a"
+            >
+              <PixelAvatar :code="a" :size="30" />
+            </button>
+          </div>
+        </template>
+        <button class="btn btn-lg submit" :disabled="loading" @click="submit">
+          {{ loading ? '请稍候…' : mode === 'login' ? '进入游戏厅' : '注册并进入' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-wrap {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+.login-box {
+  width: min(400px, 94vw);
+  text-align: center;
+  padding: 36px 30px;
+}
+.logo {
+  font-size: 54px;
+  filter: drop-shadow(var(--glow));
+}
+.title {
+  font-size: 24px;
+  font-weight: 800;
+  margin: 8px 0 4px;
+  background: linear-gradient(90deg, var(--primary), var(--accent));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.subtitle {
+  font-size: 13px;
+  margin-bottom: 20px;
+}
+.tabs {
+  display: flex;
+  background: var(--bg);
+  border-radius: calc(var(--radius) / 1.4);
+  padding: 4px;
+  margin-bottom: 18px;
+}
+.tab {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  padding: 8px;
+  border-radius: calc(var(--radius) / 1.8);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+}
+.tab.on {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+  box-shadow: var(--glow);
+}
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.avatars {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 6px;
+  max-height: 180px;
+  overflow-y: auto;
+}
+.avatar-opt {
+  padding: 4px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.avatar-opt.on {
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+  transform: scale(1.08);
+}
+.submit {
+  margin-top: 6px;
+}
+</style>
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
new file mode 100644
index 0000000..149eec6
--- /dev/null
+++ b/src/views/Profile.vue
@@ -0,0 +1,492 @@
+<script setup>
+// 个人中心：我的游戏 + 资料编辑 + 积分流水/登录记录/游玩记录/对战记录/道具背包
+// 四类记录采用「批量拉取 + 虚拟滚动」：一次拉 200 条只渲染可视行，滚动到底自动续拉
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import http, { toast } from '../api/http'
+import { useUserStore } from '../stores/user'
+import GameIcon from '../components/GameIcon.vue'
+import VirtualList from '../components/VirtualList.vue'
+import PixelAvatar from '../components/PixelAvatar.vue'
+import { AVATAR_LIST } from '../games/pixelAvatars'
+
+const router = useRouter()
+const userStore = useUserStore()
+const tab = ref('games') // games / points / logins / records / battles / props
+const editing = ref(false)
+const editForm = reactive({ nickname: '', avatar: '' })
+// 手绘像素头像（32 个）
+const avatars = AVATAR_LIST.map((a) => a.code)
+
+// 各记录标签的数据：page 为下一批要拉的页码
+const REC_BATCH = 200
+const pageData = reactive({
+  points: { list: [], total: 0, page: 1, loading: false },
+  logins: { list: [], total: 0, page: 1, loading: false },
+  records: { list: [], total: 0, page: 1, loading: false },
+  battles: { list: [], total: 0, page: 1, loading: false },
+})
+const bag = ref([])
+const myGames = ref([])
+
+// 我的游戏来源标签
+const sourceNames = { bought: '已购', weekly: '周免⚡', played: '玩过' }
+
+// 进入游戏：联机游戏去对战大厅，单机游戏直接开玩
+function playGame(g) {
+  if (g.engine === 'online') router.push('/battle')
+  else router.push(`/play/${g.code}`)
+}
+
+// 积分流水类型文案
+const pointTypeNames = { 1: '每日签到', 2: '游戏奖励', 3: '商城消费', 4: '对战奖励', 5: '道具使用', 6: '注册赠送', 7: '后台调整', 8: '开通VIP' }
+// 对战结果文案
+const battleResults = { 1: '胜利', 2: '失败', 3: '平局' }
+
+// URL 映射
+const urls = {
+  points: '/user/points',
+  logins: '/user/logins',
+  records: '/user/records',
+  battles: '/user/battles',
+}
+
+// 加载指定标签：记录类批量拉取（reset=true 从头拉，否则触底续拉下一批）
+async function load(t, reset = true) {
+  if (t === 'props') {
+    bag.value = await http.get('/user/props')
+    return
+  }
+  if (t === 'games') {
+    myGames.value = await http.get('/user/mygames')
+    return
+  }
+  const d = pageData[t]
+  if (d.loading) return
+  if (reset) d.page = 1
+  else if (d.page > 1 && d.list.length >= d.total) return // 已全部加载
+  d.loading = true
+  try {
+    const data = await http.get(urls[t], { params: { page: d.page, size: REC_BATCH } })
+    d.list = reset ? data.list : [...d.list, ...data.list]
+    d.total = data.total
+    d.page++
+  } finally {
+    d.loading = false
+  }
+}
+
+function switchTab(t) {
+  tab.value = t
+  load(t, true)
+}
+
+// 保存资料
+async function saveProfile() {
+  if (!editForm.nickname) {
+    toast('昵称不能为空')
+    return
+  }
+  await http.put('/user/profile', editForm)
+  toast('资料已更新', 'success')
+  editing.value = false
+  await userStore.refresh()
+}
+
+function startEdit() {
+  editForm.nickname = userStore.user?.nickname || ''
+  editForm.avatar = userStore.user?.avatar || 'px:01'
+  editing.value = true
+}
+
+function fmtTime(ts) {
+  return new Date(ts * 1000).toLocaleString('zh-CN', { hour12: false })
+}
+
+onMounted(async () => {
+  await userStore.refresh()
+  load('games')
+})
+</script>
+
+<template>
+  <div>
+    <h2 class="page-title">个人中心</h2>
+    <!-- 资料卡 -->
+    <div class="panel profile-card">
+      <div class="avatar-big"><PixelAvatar :code="userStore.user?.avatar" :size="56" /></div>
+      <div class="pinfo">
+        <div class="pname">
+          {{ userStore.user?.nickname }}
+          <span v-if="userStore.isAdmin" class="tag tag-primary">超级管理员</span>
+        </div>
+        <div class="text-dim" style="font-size: 12px">账号：{{ userStore.user?.username }}</div>
+      </div>
+      <div class="pstats">
+        <div class="stat">
+          <div class="stat-num text-primary">💰 {{ userStore.user?.points ?? 0 }}</div>
+          <div class="stat-label text-dim">当前积分</div>
+        </div>
+        <div class="stat">
+          <div class="stat-num text-accent">{{ userStore.user?.total_points ?? 0 }}</div>
+          <div class="stat-label text-dim">累计获得</div>
+        </div>
+      </div>
+      <button class="btn btn-ghost" @click="startEdit">✏️ 编辑资料</button>
+    </div>
+    <!-- 标签栏 -->
+    <div class="tabs">
+      <button v-for="(label, t) in { games: '🕹️ 我的游戏', points: '💰 积分流水', logins: '🔐 登录记录', records: '🎮 游玩记录', battles: '⚔️ 对战记录', props: '🎒 道具背包' }"
+        :key="t" class="tab-btn" :class="{ on: tab === t }" @click="switchTab(t)">{{ label }}</button>
+    </div>
+    <!-- 我的游戏 -->
+    <div v-if="tab === 'games'" class="mg-grid">
+      <div v-for="g in myGames" :key="g.id" class="mg-card card">
+        <div class="mg-head">
+          <GameIcon class="mg-icon" :code="g.code" :icon="g.icon" :size="30" />
+          <div class="mg-title">
+            <b>{{ g.name }}</b>
+            <small class="text-dim">{{ g.category }}</small>
+          </div>
+          <span class="tag" :class="g.source === 'bought' ? 'tag-primary' : g.source === 'weekly' ? 'tag-accent' : ''">
+            {{ sourceNames[g.source] }}
+          </span>
+        </div>
+        <div class="mg-stats text-dim">
+          <span>🎯 {{ g.plays }} 局</span>
+          <span v-if="g.best > 0">🏆 最高 {{ g.best }}</span>
+          <span v-if="g.last_played">🕐 {{ new Date(g.last_played * 1000).toLocaleDateString('zh-CN') }}</span>
+          <span v-else>还没玩过</span>
+        </div>
+        <div class="mg-foot">
+          <small v-if="g.source === 'bought'" class="text-dim">{{ new Date(g.got_at * 1000).toLocaleDateString('zh-CN') }} 购入</small>
+          <small v-else-if="g.source === 'weekly'" class="text-dim">本周五 12:00 轮换</small>
+          <small v-else class="text-dim">免费游戏</small>
+          <button class="btn btn-sm" @click="playGame(g)">{{ g.engine === 'online' ? '去对战' : '去玩' }}</button>
+        </div>
+      </div>
+      <div v-if="!myGames.length" class="empty" style="grid-column: 1/-1">
+        还没有属于你的游戏～去大厅玩免费游戏，或到游戏中心购买、开通 VIP 领周免吧！
+      </div>
+    </div>
+    <!-- 积分流水（虚拟滚动，滚动到底自动加载更多） -->
+    <div v-if="tab === 'points'" class="panel rec-panel">
+      <div class="rrow r-points rhead text-dim">
+        <span>时间</span><span>类型</span><span>说明</span><span class="num">变动</span><span class="num">余额</span>
+      </div>
+      <VirtualList :items="pageData.points.list" :item-height="40" :max-height="480" @reach-end="load('points', false)">
+        <template #default="{ item: r }">
+          <div class="rrow r-points">
+            <span class="text-dim time">{{ fmtTime(r.created_at) }}</span>
+            <span><span class="tag">{{ pointTypeNames[r.type] || '其他' }}</span></span>
+            <span class="ellip" :title="r.remark">{{ r.remark }}</span>
+            <span class="num" :class="r.change_points >= 0 ? 'gain' : 'cost'">
+              {{ r.change_points >= 0 ? '+' : '' }}{{ r.change_points }}
+            </span>
+            <span class="num text-dim">{{ r.balance }}</span>
+          </div>
+        </template>
+        <template #empty><span class="text-dim">暂无积分流水</span></template>
+      </VirtualList>
+      <div class="rec-foot text-dim">已加载 {{ pageData.points.list.length }} / {{ pageData.points.total }} 条</div>
+    </div>
+    <!-- 登录记录 -->
+    <div v-if="tab === 'logins'" class="panel rec-panel">
+      <div class="rrow r-logins rhead text-dim">
+        <span>登录时间</span><span>IP 地址</span><span>设备信息</span>
+      </div>
+      <VirtualList :items="pageData.logins.list" :item-height="40" :max-height="480" @reach-end="load('logins', false)">
+        <template #default="{ item: r }">
+          <div class="rrow r-logins">
+            <span class="time">{{ fmtTime(r.created_at) }}</span>
+            <span>{{ r.ip }}</span>
+            <span class="text-dim ua ellip" :title="r.user_agent">{{ r.user_agent }}</span>
+          </div>
+        </template>
+        <template #empty><span class="text-dim">暂无登录记录</span></template>
+      </VirtualList>
+      <div class="rec-foot text-dim">已加载 {{ pageData.logins.list.length }} / {{ pageData.logins.total }} 条</div>
+    </div>
+    <!-- 游玩记录 -->
+    <div v-if="tab === 'records'" class="panel rec-panel">
+      <div class="rrow r-records rhead text-dim">
+        <span>时间</span><span>游戏</span><span class="num">得分</span><span class="num">获得积分</span><span class="num">时长</span>
+      </div>
+      <VirtualList :items="pageData.records.list" :item-height="40" :max-height="480" @reach-end="load('records', false)">
+        <template #default="{ item: r }">
+          <div class="rrow r-records">
+            <span class="text-dim time">{{ fmtTime(r.created_at) }}</span>
+            <span class="ellip">{{ r.game_icon }} {{ r.game_name }}</span>
+            <span class="num"><b>{{ r.score }}</b></span>
+            <span class="num gain">+{{ r.points_gained }}</span>
+            <span class="num text-dim">{{ r.duration }}秒</span>
+          </div>
+        </template>
+        <template #empty><span class="text-dim">还没玩过游戏，快去大厅试试吧！</span></template>
+      </VirtualList>
+      <div class="rec-foot text-dim">已加载 {{ pageData.records.list.length }} / {{ pageData.records.total }} 条</div>
+    </div>
+    <!-- 对战记录 -->
+    <div v-if="tab === 'battles'" class="panel rec-panel">
+      <div class="rrow r-battles rhead text-dim">
+        <span>时间</span><span>游戏</span><span>模式</span><span>结果</span><span class="num">积分</span><span>详情</span>
+      </div>
+      <VirtualList :items="pageData.battles.list" :item-height="40" :max-height="480" @reach-end="load('battles', false)">
+        <template #default="{ item: r }">
+          <div class="rrow r-battles">
+            <span class="text-dim time">{{ fmtTime(r.created_at) }}</span>
+            <span class="ellip">{{ r.game_icon }} {{ r.game_name }}</span>
+            <span class="ellip">
+              <span class="tag">{{ r.mode === 1 ? '好友联机' : 'AI对战' }}</span>
+              <span v-if="r.ai_provider" class="tag tag-accent" style="margin-left: 4px">{{ r.ai_provider }}/{{ r.ai_difficulty }}</span>
+            </span>
+            <span :class="r.result === 1 ? 'gain' : r.result === 2 ? 'cost' : ''">{{ battleResults[r.result] }}</span>
+            <span class="num gain">{{ r.points_change > 0 ? `+${r.points_change}` : '-' }}</span>
+            <span class="text-dim ellip" style="font-size: 12px" :title="r.detail">{{ r.detail }}</span>
+          </div>
+        </template>
+        <template #empty><span class="text-dim">暂无对战记录，去联机对战试试！</span></template>
+      </VirtualList>
+      <div class="rec-foot text-dim">已加载 {{ pageData.battles.list.length }} / {{ pageData.battles.total }} 条</div>
+    </div>
+    <!-- 道具背包 -->
+    <div v-if="tab === 'props'" class="bag-grid">
+      <div v-for="p in bag" :key="p.prop_id" class="bag-item card">
+        <span class="bag-icon">{{ p.icon }}</span>
+        <div class="bag-name">{{ p.name }} <b class="text-primary">×{{ p.quantity }}</b></div>
+        <p class="text-dim" style="font-size: 11px">{{ p.description }}</p>
+      </div>
+      <div v-if="!bag.length" class="empty" style="grid-column: 1/-1">背包空空的，去道具商城看看吧～</div>
+    </div>
+    <!-- 编辑资料弹窗 -->
+    <div v-if="editing" class="modal-mask" @click.self="editing = false">
+      <div class="modal">
+        <h3 style="margin-bottom: 16px">编辑资料</h3>
+        <input v-model.trim="editForm.nickname" class="input" placeholder="昵称" style="margin-bottom: 12px" />
+        <div class="avatars">
+          <button
+            v-for="a in avatars"
+            :key="a"
+            class="avatar-opt"
+            :class="{ on: editForm.avatar === a }"
+            @click="editForm.avatar = a"
+          >
+            <PixelAvatar :code="a" :size="30" />
+          </button>
+        </div>
+        <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px">
+          <button class="btn btn-ghost" @click="editing = false">取消</button>
+          <button class="btn" @click="saveProfile">保存</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.profile-card {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+.avatar-big {
+  width: 64px;
+  height: 64px;
+  border-radius: 20px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 34px;
+  box-shadow: var(--glow);
+}
+.pname {
+  font-size: 18px;
+  font-weight: 800;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.pstats {
+  display: flex;
+  gap: 26px;
+  margin-left: auto;
+}
+.stat {
+  text-align: center;
+}
+.stat-num {
+  font-size: 18px;
+  font-weight: 800;
+}
+.stat-label {
+  font-size: 11px;
+  margin-top: 2px;
+}
+.tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+.tab-btn {
+  padding: 7px 15px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--bg-panel);
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 13px;
+}
+.tab-btn.on {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+  border-color: transparent;
+}
+.gain {
+  color: #5fd6a2;
+  font-weight: 700;
+}
+.cost {
+  color: #ff7b8a;
+  font-weight: 700;
+}
+.ua {
+  font-size: 11px;
+}
+/* ---- 记录类标签：grid 行式 + 虚拟滚动 ---- */
+.rec-panel {
+  padding: 6px 16px 10px;
+}
+.rrow {
+  display: grid;
+  gap: 10px;
+  align-items: center;
+  height: 100%;
+  border-bottom: 1px dashed var(--border);
+  font-size: 13px;
+}
+.rhead {
+  height: 36px;
+  font-size: 12px;
+  border-bottom: 1px solid var(--border);
+}
+.r-points {
+  grid-template-columns: 150px 92px 1fr 90px 80px;
+}
+.r-logins {
+  grid-template-columns: 170px 140px 1fr;
+}
+.r-records {
+  grid-template-columns: 150px 1fr 90px 90px 80px;
+}
+.r-battles {
+  grid-template-columns: 150px 1fr 180px 56px 76px 1.1fr;
+}
+.rrow .num {
+  text-align: right;
+}
+.rrow .time {
+  font-size: 12px;
+  white-space: nowrap;
+}
+.ellip {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rec-foot {
+  font-size: 12px;
+  text-align: center;
+  padding-top: 8px;
+}
+.bag-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 12px;
+}
+.mg-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 12px;
+}
+.mg-card {
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.mg-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.mg-icon {
+  font-size: 30px;
+}
+.mg-title {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.mg-title b {
+  font-size: 14px;
+}
+.mg-title small {
+  font-size: 11px;
+}
+.mg-stats {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  flex-wrap: wrap;
+}
+.mg-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: auto;
+}
+.mg-foot small {
+  font-size: 11px;
+}
+.bag-item {
+  padding: 16px;
+  text-align: center;
+}
+.bag-icon {
+  font-size: 34px;
+}
+.bag-name {
+  font-size: 13px;
+  font-weight: 700;
+  margin: 6px 0 4px;
+}
+.avatars {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 6px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+.avatar-opt {
+  padding: 4px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+}
+.avatar-opt.on {
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+}
+</style>
diff --git a/src/views/Rank.vue b/src/views/Rank.vue
new file mode 100644
index 0000000..5a5a839
--- /dev/null
+++ b/src/views/Rank.vue
@@ -0,0 +1,147 @@
+<script setup>
+// 排行榜：积分总榜 + 单游戏最高分榜（可切换游戏）
+import { ref, onMounted } from 'vue'
+import http from '../api/http'
+import PixelAvatar from '../components/PixelAvatar.vue'
+
+const tab = ref('points') // points / game
+const pointsRank = ref({ list: [], my_rank: 0, my_points: 0 })
+const games = ref([])
+const selectedGame = ref('')
+const gameRank = ref({ list: [], my_best: 0, game: null })
+
+async function loadPoints() {
+  pointsRank.value = await http.get('/rank/points')
+}
+
+async function loadGameRank() {
+  if (!selectedGame.value) return
+  gameRank.value = await http.get(`/rank/game/${selectedGame.value}`)
+}
+
+// 切换到游戏榜时加载游戏列表（排除联机类，联机看对战记录）
+async function switchToGame() {
+  tab.value = 'game'
+  if (!games.value.length) {
+    const all = await http.get('/games')
+    games.value = all.filter((g) => g.engine !== 'online')
+    if (games.value.length) {
+      selectedGame.value = games.value[0].code
+    }
+  }
+  loadGameRank()
+}
+
+// 名次徽章样式
+function rankClass(i) {
+  return i === 0 ? 'gold' : i === 1 ? 'silver' : i === 2 ? 'bronze' : ''
+}
+
+onMounted(loadPoints)
+</script>
+
+<template>
+  <div>
+    <h2 class="page-title">排行榜</h2>
+    <div class="tabs">
+      <button class="tab-btn" :class="{ on: tab === 'points' }" @click="tab = 'points'; loadPoints()">💰 积分总榜</button>
+      <button class="tab-btn" :class="{ on: tab === 'game' }" @click="switchToGame">🎮 游戏高分榜</button>
+      <select v-if="tab === 'game'" v-model="selectedGame" class="input game-select" @change="loadGameRank">
+        <option v-for="g in games" :key="g.code" :value="g.code">{{ g.icon }} {{ g.name }}</option>
+      </select>
+    </div>
+    <!-- 我的成绩 -->
+    <div class="panel my-row">
+      <template v-if="tab === 'points'">
+        <span>我的排名：<b class="text-primary">第 {{ pointsRank.my_rank }} 名</b></span>
+        <span>累计积分：<b class="text-accent">{{ pointsRank.my_points }}</b></span>
+      </template>
+      <template v-else>
+        <span>{{ gameRank.game?.name || '' }} 我的最高分：<b class="text-primary">{{ gameRank.my_best }}</b></span>
+      </template>
+    </div>
+    <!-- 榜单 -->
+    <div class="panel">
+      <table class="table">
+        <thead>
+          <tr>
+            <th style="width: 70px">名次</th>
+            <th>玩家</th>
+            <th style="text-align: right">{{ tab === 'points' ? '累计积分' : '最高分' }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(u, i) in tab === 'points' ? pointsRank.list : gameRank.list" :key="u.user_id">
+            <td><span class="rank-badge" :class="rankClass(i)">{{ i + 1 }}</span></td>
+            <td><span class="row-avatar"><PixelAvatar :code="u.avatar" :size="20" /></span> {{ u.nickname }}</td>
+            <td style="text-align: right" class="text-primary"><b>{{ tab === 'points' ? u.total_points : u.best }}</b></td>
+          </tr>
+        </tbody>
+      </table>
+      <div v-if="!(tab === 'points' ? pointsRank.list : gameRank.list).length" class="empty">暂无上榜数据，快去玩几局吧！</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tabs {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 14px;
+}
+.tab-btn {
+  padding: 8px 18px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--bg-panel);
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 14px;
+}
+.tab-btn.on {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+  border-color: transparent;
+  box-shadow: var(--glow);
+}
+.game-select {
+  width: 190px;
+  margin-left: auto;
+}
+.my-row {
+  display: flex;
+  gap: 30px;
+  padding: 12px 18px;
+  margin-bottom: 14px;
+  font-size: 14px;
+}
+.rank-badge {
+  display: inline-flex;
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 12px;
+  background: var(--bg-card);
+  color: var(--text-dim);
+}
+.rank-badge.gold {
+  background: linear-gradient(135deg, #ffd700, #ff9500);
+  color: #442200;
+}
+.rank-badge.silver {
+  background: linear-gradient(135deg, #ececec, #9e9e9e);
+  color: #333;
+}
+.rank-badge.bronze {
+  background: linear-gradient(135deg, #d7995b, #a05822);
+  color: #fff;
+}
+.row-avatar {
+  font-size: 17px;
+  margin-right: 4px;
+}
+</style>
diff --git a/src/views/SignIn.vue b/src/views/SignIn.vue
new file mode 100644
index 0000000..bf2a2c4
--- /dev/null
+++ b/src/views/SignIn.vue
@@ -0,0 +1,279 @@
+<script setup>
+// 签到中心：本月日历 + 连签进度 + 一键签到
+import { ref, computed, onMounted } from 'vue'
+import http, { toast } from '../api/http'
+import { useUserStore } from '../stores/user'
+
+const userStore = useUserStore()
+const status = ref(null) // 签到状态（后端下发）
+const signing = ref(false)
+const justSigned = ref(null) // 刚签到成功的结果（弹窗）
+
+// 生成日历格子：先补空位再放日期
+const calendar = computed(() => {
+  if (!status.value) return []
+  const { year, month } = status.value
+  const firstDay = new Date(year, month - 1, 1).getDay() // 周日=0
+  const days = new Date(year, month, 0).getDate()
+  const cells = []
+  for (let i = 0; i < firstDay; i++) cells.push({ key: `empty-${i}`, empty: true })
+  for (let d = 1; d <= days; d++) {
+    cells.push({
+      key: `day-${d}`,
+      day: d,
+      signed: status.value.signed_days.includes(d),
+      isToday: d === status.value.today,
+    })
+  }
+  return cells
+})
+
+// 连签奖励预览（7天阶梯）
+const streakPreview = computed(() => {
+  const list = []
+  for (let i = 1; i <= 7; i++) {
+    list.push({ day: i, points: 10 + 5 * (i - 1) })
+  }
+  return list
+})
+
+async function load() {
+  status.value = await http.get('/signin/status')
+}
+
+// 执行签到
+async function doSign() {
+  signing.value = true
+  try {
+    const res = await http.post('/signin')
+    justSigned.value = res
+    userStore.setPoints(res.balance)
+    toast(`签到成功 +${res.points} 积分！`, 'success')
+    await load()
+  } catch (e) {
+    // 拦截器已提示
+  } finally {
+    signing.value = false
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div v-if="status">
+    <h2 class="page-title">签到中心</h2>
+    <div class="signin-grid">
+      <!-- 日历 -->
+      <div class="panel">
+        <div class="cal-head">
+          <span class="cal-title">{{ status.year }} 年 {{ status.month }} 月</span>
+          <span class="text-dim">本月已签 {{ status.signed_days.length }} 天</span>
+        </div>
+        <div class="week-row">
+          <span v-for="w in ['日', '一', '二', '三', '四', '五', '六']" :key="w" class="week-cell text-dim">{{ w }}</span>
+        </div>
+        <div class="cal-grid">
+          <div
+            v-for="c in calendar"
+            :key="c.key"
+            class="cal-cell"
+            :class="{ empty: c.empty, signed: c.signed, today: c.isToday }"
+          >
+            <template v-if="!c.empty">
+              <span class="day-no">{{ c.day }}</span>
+              <span v-if="c.signed" class="check">✓</span>
+            </template>
+          </div>
+        </div>
+      </div>
+      <!-- 签到操作与奖励 -->
+      <div class="side">
+        <div class="panel sign-box">
+          <div class="streak-num">🔥 连续 <b>{{ status.streak }}</b> 天</div>
+          <p class="text-dim" style="font-size: 12px; margin: 6px 0 16px">
+            {{ status.today_signed ? '今天已经签到啦，明天继续保持～' : `今日签到可得 ${status.today_points} 积分` }}
+          </p>
+          <button class="btn btn-lg sign-btn" :disabled="status.today_signed || signing" @click="doSign">
+            {{ status.today_signed ? '✅ 今日已签到' : '📅 立即签到' }}
+          </button>
+          <p class="next text-dim">明日签到可得 <b class="text-accent">{{ status.next_points }}</b> 积分</p>
+          <!-- VIP签到加成提示：会员显示加成额度，非会员引导开通 -->
+          <p v-if="status.vip_level > 0" class="vip-line">💎 VIP{{ status.vip_level }} 加成：每日额外 +{{ status.vip_bonus }} 积分</p>
+          <router-link v-else to="/vip" class="vip-line vip-link">💎 开通VIP，签到最高每日多领 50 积分 →</router-link>
+        </div>
+        <div class="panel">
+          <h3 style="font-size: 14px; margin-bottom: 12px">连签奖励阶梯</h3>
+          <div class="ladder">
+            <div
+              v-for="s in streakPreview"
+              :key="s.day"
+              class="ladder-item"
+              :class="{ reached: Math.min(status.streak, 7) >= s.day && status.today_signed, current: s.day === Math.min(status.streak, 7) && !status.today_signed }"
+            >
+              <span class="ladder-day">第{{ s.day }}天</span>
+              <span class="ladder-points">+{{ s.points }}</span>
+            </div>
+          </div>
+          <p class="text-dim" style="font-size: 11px; margin-top: 10px">连续签到第 7 天起每天固定 +40 积分，中断后从头计算</p>
+        </div>
+      </div>
+    </div>
+    <!-- 签到成功弹窗 -->
+    <div v-if="justSigned" class="modal-mask" @click.self="justSigned = null">
+      <div class="modal sign-modal">
+        <div class="big-icon">🎉</div>
+        <h3>签到成功！</h3>
+        <p class="got">积分 <b>+{{ justSigned.points }}</b></p>
+        <p v-if="justSigned.vip_bonus > 0" class="text-dim" style="font-size: 12px">（含 VIP 加成 +{{ justSigned.vip_bonus }}）</p>
+        <p class="text-dim">已连续签到 {{ justSigned.streak }} 天，当前余额 💰{{ justSigned.balance }}</p>
+        <button class="btn" style="margin-top: 16px" @click="justSigned = null">收下奖励</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.signin-grid {
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  gap: 16px;
+  align-items: start;
+}
+.vip-line {
+  display: block;
+  margin-top: 10px;
+  font-size: 12px;
+  color: var(--primary-2);
+  font-weight: 700;
+}
+.vip-link:hover {
+  color: var(--primary);
+}
+.cal-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+}
+.cal-title {
+  font-size: 16px;
+  font-weight: 800;
+}
+.week-row,
+.cal-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 6px;
+}
+.week-cell {
+  text-align: center;
+  font-size: 12px;
+  padding: 4px 0;
+}
+.cal-cell {
+  aspect-ratio: 1;
+  border-radius: 10px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  position: relative;
+}
+.cal-cell.empty {
+  background: transparent;
+  border: none;
+}
+.cal-cell.today {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
+}
+.cal-cell.signed {
+  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 35%, var(--bg-card)), color-mix(in srgb, var(--primary-2) 25%, var(--bg-card)));
+  border-color: var(--primary);
+}
+.day-no {
+  font-size: 13px;
+  font-weight: 600;
+}
+.check {
+  font-size: 11px;
+  color: var(--primary-2);
+  font-weight: 800;
+}
+.side {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.sign-box {
+  text-align: center;
+}
+.streak-num {
+  font-size: 18px;
+}
+.streak-num b {
+  font-size: 30px;
+  color: var(--primary);
+}
+.sign-btn {
+  width: 100%;
+}
+.next {
+  margin-top: 12px;
+  font-size: 12px;
+}
+.ladder {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+}
+.ladder-item {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 2px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ladder-item.reached {
+  border-color: var(--primary);
+  background: color-mix(in srgb, var(--primary) 18%, var(--bg-card));
+}
+.ladder-item.current {
+  border-color: var(--accent);
+}
+.ladder-day {
+  font-size: 10px;
+  color: var(--text-dim);
+}
+.ladder-points {
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--primary-2);
+}
+.sign-modal {
+  text-align: center;
+}
+.big-icon {
+  font-size: 52px;
+}
+.got {
+  font-size: 16px;
+  margin: 8px 0 4px;
+}
+.got b {
+  color: var(--primary);
+  font-size: 26px;
+}
+@media (max-width: 900px) {
+  .signin-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/views/Vip.vue b/src/views/Vip.vue
new file mode 100644
index 0000000..73da8dc
--- /dev/null
+++ b/src/views/Vip.vue
@@ -0,0 +1,336 @@
+<script setup>
+// VIP中心：我的会员状态 + 五档等级权益 + 本周周免游戏 + 开通/续费/升级
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import http, { toast } from '../api/http'
+import { useUserStore } from '../stores/user'
+
+const router = useRouter()
+const userStore = useUserStore()
+
+const info = ref(null) // /vip/info 响应
+const buying = ref(0) // 正在购买的等级（防连点）
+const confirmTarget = ref(null) // 待确认购买的等级对象
+const nowTs = ref(Math.floor(Date.now() / 1000)) // 用于倒计时的当前时间
+let timer = 0
+
+async function load() {
+  info.value = await http.get('/vip/info')
+}
+
+// 我的当前等级（0=非VIP）
+const myLevel = computed(() => info.value?.my.level || 0)
+
+// 周免刷新倒计时文案：X天X小时X分
+const countdown = computed(() => {
+  if (!info.value) return ''
+  let s = info.value.refresh_at - nowTs.value
+  if (s <= 0) return '刷新中…'
+  const d = Math.floor(s / 86400)
+  s %= 86400
+  const h = Math.floor(s / 3600)
+  const m = Math.floor((s % 3600) / 60)
+  return `${d}天${h}小时${m}分`
+})
+
+// 到期日期文案
+const expireText = computed(() => {
+  if (!info.value || !info.value.my.active) return ''
+  return new Date(info.value.my.expire * 1000).toLocaleDateString('zh-CN')
+})
+
+// 各等级按钮文案与可用性
+function btnState(l) {
+  if (myLevel.value === 0) return { text: `开通 30 天`, disabled: false }
+  if (l.level < myLevel.value) return { text: '低于当前等级', disabled: true }
+  if (l.level === myLevel.value) return { text: '续费 30 天', disabled: false }
+  return { text: '升级到此档', disabled: false }
+}
+
+// 点击购买：先弹确认（升级会按30天重新计时，提示清楚再扣分）
+function askBuy(l) {
+  const st = btnState(l)
+  if (st.disabled || buying.value) return
+  confirmTarget.value = l
+}
+
+async function doBuy() {
+  const l = confirmTarget.value
+  confirmTarget.value = null
+  buying.value = l.level
+  try {
+    const res = await http.post('/vip/buy', { level: l.level })
+    userStore.setPoints(res.balance)
+    toast(`已开通 ${l.name}，有效期至 ${new Date(res.expire * 1000).toLocaleDateString('zh-CN')}`, 'success')
+    await load()
+  } catch (e) {
+    // 拦截器已提示（余额不足等）
+  } finally {
+    buying.value = 0
+  }
+}
+
+// 点周免游戏直接去玩
+function goPlay(g) {
+  router.push(`/play/${g.code}`)
+}
+
+onMounted(() => {
+  load()
+  timer = setInterval(() => (nowTs.value = Math.floor(Date.now() / 1000)), 30000)
+})
+onBeforeUnmount(() => clearInterval(timer))
+</script>
+
+<template>
+  <div v-if="info">
+    <h2 class="page-title">VIP 会员中心</h2>
+    <!-- 我的会员状态 + 周免刷新倒计时 -->
+    <div class="panel my-card">
+      <div class="my-left">
+        <template v-if="info.my.active">
+          <span class="my-icon">{{ info.levels.find(l => l.level === myLevel)?.icon || '💎' }}</span>
+          <div>
+            <div class="my-name">{{ info.my.level_name }}（VIP{{ myLevel }}）</div>
+            <div class="text-dim my-sub">有效期至 {{ expireText }}</div>
+          </div>
+        </template>
+        <template v-else>
+          <span class="my-icon">🪪</span>
+          <div>
+            <div class="my-name">尚未开通 VIP</div>
+            <div class="text-dim my-sub">开通后每周白嫖付费游戏，签到还有加成</div>
+          </div>
+        </template>
+      </div>
+      <div class="my-right">
+        <div class="text-dim refresh-label">⚡ 周免刷新倒计时（每周五 12:00）</div>
+        <div class="refresh-count">{{ countdown }}</div>
+      </div>
+    </div>
+    <!-- 等级卡片 -->
+    <div class="levels">
+      <div
+        v-for="l in info.levels"
+        :key="l.level"
+        class="panel level-card"
+        :class="{ mine: l.level === myLevel }"
+      >
+        <span v-if="l.level === myLevel" class="mine-badge">当前</span>
+        <div class="lv-head">
+          <span class="lv-icon">{{ l.icon }}</span>
+          <div class="lv-name">{{ l.name }}</div>
+          <div class="lv-tier text-dim">VIP{{ l.level }}</div>
+        </div>
+        <div class="lv-price"><b>{{ l.price_points }}</b> 积分 / 30天</div>
+        <ul class="lv-benefits">
+          <li>⚡ 每周 <b>{{ l.weekly_free_quota }}</b> 款周免付费游戏</li>
+          <li>📅 签到每日额外 <b>+{{ l.signin_bonus }}</b> 积分</li>
+        </ul>
+        <!-- 本周周免批次 -->
+        <div class="weekly">
+          <div class="weekly-title text-dim">本周周免</div>
+          <div class="weekly-list">
+            <span
+              v-for="g in l.weekly_games"
+              :key="g.id"
+              class="weekly-chip"
+              :title="`原价 ${g.price} 积分，点击直接去玩（需该等级VIP）`"
+              @click="myLevel >= l.level ? goPlay(g) : null"
+              :class="{ locked: myLevel < l.level }"
+            >
+              {{ g.icon }} {{ g.name }}
+            </span>
+          </div>
+        </div>
+        <button
+          class="btn lv-btn"
+          :class="{ 'btn-accent': l.level === myLevel }"
+          :disabled="btnState(l).disabled || buying === l.level"
+          @click="askBuy(l)"
+        >
+          {{ buying === l.level ? '开通中…' : btnState(l).text }}
+        </button>
+      </div>
+    </div>
+    <p class="text-dim tips">
+      说明：周免批次每周五中午 12:00 自动轮换，高等级批次包含低等级全部周免；同等级续费在原到期时间上顺延，升级立即生效并按 30 天重新计时。
+    </p>
+    <!-- 购买确认弹窗 -->
+    <div v-if="confirmTarget" class="modal-mask" @click.self="confirmTarget = null">
+      <div class="modal panel confirm">
+        <h3>{{ confirmTarget.icon }} {{ confirmTarget.name }}</h3>
+        <p class="text-dim confirm-desc">
+          将花费 <b class="text-primary">{{ confirmTarget.price_points }}</b> 积分开通 30 天
+          <template v-if="myLevel > 0 && confirmTarget.level > myLevel">（升级立即生效，剩余天数不折算）</template>
+          <template v-else-if="confirmTarget.level === myLevel">（在原到期时间上顺延 30 天）</template>
+        </p>
+        <p class="text-dim confirm-desc">当前余额：💰 {{ userStore.user?.points ?? 0 }}</p>
+        <div class="confirm-btns">
+          <button class="btn" style="flex: 1" @click="doBuy">确认开通</button>
+          <button class="btn btn-ghost" @click="confirmTarget = null">再想想</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.my-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding: 18px 22px;
+  margin-bottom: 18px;
+  flex-wrap: wrap;
+}
+.my-left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.my-icon {
+  font-size: 42px;
+}
+.my-name {
+  font-size: 18px;
+  font-weight: 800;
+}
+.my-sub {
+  font-size: 12px;
+  margin-top: 4px;
+}
+.my-right {
+  text-align: right;
+}
+.refresh-label {
+  font-size: 12px;
+}
+.refresh-count {
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--primary-2);
+  margin-top: 4px;
+}
+.levels {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 14px;
+}
+.level-card {
+  position: relative;
+  padding: 18px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.level-card.mine {
+  border-color: var(--primary);
+  box-shadow: var(--glow);
+}
+.mine-badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 11px;
+  background: var(--primary);
+  color: #fff;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-weight: 700;
+}
+.lv-head {
+  text-align: center;
+}
+.lv-icon {
+  font-size: 36px;
+  display: block;
+}
+.lv-name {
+  font-weight: 800;
+  font-size: 16px;
+  margin-top: 6px;
+}
+.lv-tier {
+  font-size: 11px;
+}
+.lv-price {
+  text-align: center;
+  font-size: 13px;
+  color: var(--primary-2);
+}
+.lv-price b {
+  font-size: 20px;
+}
+.lv-benefits {
+  list-style: none;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 0;
+  border-top: 1px dashed var(--border);
+  border-bottom: 1px dashed var(--border);
+}
+.weekly {
+  flex: 1;
+}
+.weekly-title {
+  font-size: 11px;
+  margin-bottom: 6px;
+}
+.weekly-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+.weekly-chip {
+  font-size: 11px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  padding: 2px 8px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.weekly-chip:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+.weekly-chip.locked {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.lv-btn {
+  width: 100%;
+}
+.tips {
+  font-size: 12px;
+  margin-top: 14px;
+  line-height: 1.8;
+}
+.modal-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+.confirm {
+  width: min(380px, 90vw);
+  padding: 22px;
+}
+.confirm-desc {
+  font-size: 13px;
+  margin: 10px 0;
+  line-height: 1.7;
+}
+.confirm-btns {
+  display: flex;
+  gap: 10px;
+  margin-top: 14px;
+}
+</style>
diff --git a/src/views/admin/AdminAI.vue b/src/views/admin/AdminAI.vue
new file mode 100644
index 0000000..533843f
--- /dev/null
+++ b/src/views/admin/AdminAI.vue
@@ -0,0 +1,293 @@
+<script setup>
+// 后台 AI 设置：选择全站统一的对战 AI 模型（玩家前台只选难度），
+// 配置讯飞星火 / DeepSeek 的 API Key，并可一键测试连通性
+// 保存到数据库后立即生效（覆盖 config.yaml 同名项），大模型不可用时对战自动用本地规则AI兜底
+import { ref, onMounted } from 'vue'
+import http, { toast } from '../../api/http'
+import NavIcon from '../../components/NavIcon.vue'
+
+const conf = ref(null) // {provider, spark, deepseek, guide}
+const saving = ref(false)
+const testing = ref('') // 正在测试的提供方
+const testResult = ref({}) // provider -> {ok, text}
+
+// 可选的全站AI模型
+const providerOpts = [
+  { code: 'rule', name: '本地规则 AI', icon: 'brain', desc: '内置算法，零成本秒级响应，无需任何配置' },
+  { code: 'spark', name: '讯飞星火 Lite', icon: 'flame', desc: '大模型陪玩会聊天，Lite 免费（需配置 APIPassword）' },
+  { code: 'deepseek', name: 'DeepSeek', icon: 'whale', desc: '大模型陪玩棋风犀利，按 token 计费（需配置 Key）' },
+]
+
+async function load() {
+  conf.value = await http.get('/admin/ai')
+}
+
+// 保存全站模型选择与两家配置
+async function save() {
+  saving.value = true
+  try {
+    const res = await http.put('/admin/ai', {
+      provider: conf.value.provider,
+      spark: {
+        api_key: conf.value.spark.api_key,
+        base_url: conf.value.spark.base_url,
+        model: conf.value.spark.model,
+      },
+      deepseek: {
+        api_key: conf.value.deepseek.api_key,
+        base_url: conf.value.deepseek.base_url,
+        model: conf.value.deepseek.model,
+      },
+    })
+    conf.value = { ...conf.value, ...res }
+    toast('AI 配置已保存，立即生效', 'success')
+  } finally {
+    saving.value = false
+  }
+}
+
+// 测试连通性：后端会真实调用一次大模型
+async function test(provider) {
+  testing.value = provider
+  testResult.value = { ...testResult.value, [provider]: null }
+  try {
+    // 放宽超时：真实调用大模型可能较慢（服务端上限15秒）
+    const res = await http.post('/admin/ai/test', { provider }, { timeout: 20000 })
+    testResult.value = {
+      ...testResult.value,
+      [provider]: { ok: true, text: `连接成功（${res.latency_ms}ms）：${res.reply}` },
+    }
+  } catch (e) {
+    testResult.value = {
+      ...testResult.value,
+      [provider]: { ok: false, text: e?.message || '连接失败' },
+    }
+  } finally {
+    testing.value = ''
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div v-if="conf">
+    <h2 class="page-title">AI 设置</h2>
+    <div class="panel intro">
+      <p>全站统一使用下方选择的 AI 模型陪玩，<b>玩家前台只选择难度</b>。选了大模型但未配置 Key、调用超时或返回非法着法时，自动降级为<b>本地规则AI</b>，游戏永远可玩。</p>
+      <p class="text-dim">大模型目前用于斗地主 / 中国象棋的决策与台词；大富翁、飞行棋、2D台球始终由内置规则 AI 执行。配置保存在数据库、优先级高于后端 config.yaml，保存后立即生效（已开局的房间不受影响）。</p>
+    </div>
+    <!-- 全站AI模型选择 -->
+    <div class="panel provider-panel">
+      <h3 class="sec-head"><NavIcon name="robot" :size="16" /> 对战使用的 AI 模型</h3>
+      <div class="provider-list">
+        <button
+          v-for="p in providerOpts"
+          :key="p.code"
+          class="provider-opt"
+          :class="{ on: conf.provider === p.code }"
+          @click="conf.provider = p.code"
+        >
+          <span class="p-icon"><NavIcon :name="p.icon" :size="22" /></span>
+          <b>{{ p.name }}</b>
+          <span class="p-desc text-dim">{{ p.desc }}</span>
+          <span v-if="conf.provider === p.code" class="p-cur">使用中</span>
+        </button>
+      </div>
+    </div>
+    <div class="cards">
+      <!-- 讯飞星火 -->
+      <div class="panel ai-card">
+        <div class="ai-head">
+          <h3><NavIcon name="flame" :size="16" /> 讯飞星火 Lite</h3>
+          <span class="src" :class="{ ok: conf.spark.key_source !== '未配置' }">{{ conf.spark.key_source }}</span>
+        </div>
+        <p class="guide text-dim">{{ conf.guide.spark }}</p>
+        <label class="field">
+          <span>APIPassword</span>
+          <input v-model="conf.spark.api_key" class="input" placeholder="控制台复制的 APIPassword" />
+        </label>
+        <label class="field">
+          <span>接口地址</span>
+          <input v-model="conf.spark.base_url" class="input" placeholder="https://spark-api-open.xf-yun.com/v1" />
+        </label>
+        <label class="field">
+          <span>模型名</span>
+          <input v-model="conf.spark.model" class="input" placeholder="lite" />
+        </label>
+        <button class="btn btn-ghost btn-sm test-btn" :disabled="testing === 'spark'" @click="test('spark')">
+          <NavIcon name="plug" :size="14" />{{ testing === 'spark' ? '测试中…' : '测试连接' }}
+        </button>
+        <p v-if="testResult.spark" class="test-line" :class="testResult.spark.ok ? 'ok' : 'bad'">
+          {{ testResult.spark.text }}
+        </p>
+      </div>
+      <!-- DeepSeek -->
+      <div class="panel ai-card">
+        <div class="ai-head">
+          <h3><NavIcon name="whale" :size="16" /> DeepSeek</h3>
+          <span class="src" :class="{ ok: conf.deepseek.key_source !== '未配置' }">{{ conf.deepseek.key_source }}</span>
+        </div>
+        <p class="guide text-dim">{{ conf.guide.deepseek }}</p>
+        <label class="field">
+          <span>API Key</span>
+          <input v-model="conf.deepseek.api_key" class="input" placeholder="sk- 开头的密钥" />
+        </label>
+        <label class="field">
+          <span>接口地址</span>
+          <input v-model="conf.deepseek.base_url" class="input" placeholder="https://api.deepseek.com/v1" />
+        </label>
+        <label class="field">
+          <span>模型名</span>
+          <input v-model="conf.deepseek.model" class="input" placeholder="deepseek-chat" />
+        </label>
+        <button class="btn btn-ghost btn-sm test-btn" :disabled="testing === 'deepseek'" @click="test('deepseek')">
+          <NavIcon name="plug" :size="14" />{{ testing === 'deepseek' ? '测试中…' : '测试连接' }}
+        </button>
+        <p v-if="testResult.deepseek" class="test-line" :class="testResult.deepseek.ok ? 'ok' : 'bad'">
+          {{ testResult.deepseek.text }}
+        </p>
+      </div>
+    </div>
+    <button class="btn save-btn" :disabled="saving" @click="save">
+      <NavIcon name="save" :size="15" />{{ saving ? '保存中…' : '保存全部配置' }}
+    </button>
+    <p class="text-dim foot">提示：清空 Key 保存后会回退使用 config.yaml 里的值；两处都为空则该提供方不可用，对战自动使用规则AI。</p>
+  </div>
+</template>
+
+<style scoped>
+.intro {
+  padding: 14px 18px;
+  font-size: 13px;
+  line-height: 1.9;
+  margin-bottom: 16px;
+}
+.provider-panel {
+  padding: 16px 18px;
+  margin-bottom: 16px;
+}
+.sec-head {
+  font-size: 14px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.sec-head svg,
+.ai-head h3 svg {
+  color: var(--primary-2);
+  flex-shrink: 0;
+}
+.test-btn,
+.save-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: center;
+}
+.provider-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 10px;
+}
+.provider-opt {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text);
+  cursor: pointer;
+  font-size: 14px;
+  text-align: left;
+  transition: all 0.15s;
+}
+.provider-opt.on {
+  border-color: var(--accent);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
+}
+.p-icon {
+  color: var(--primary-2);
+  display: inline-flex;
+}
+.p-desc {
+  font-size: 12px;
+  line-height: 1.5;
+}
+.p-cur {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--accent);
+}
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 14px;
+}
+.ai-card {
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.ai-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.ai-head h3 {
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.src {
+  font-size: 11px;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+}
+.src.ok {
+  color: #4ade80;
+  border-color: #2f9e6e;
+}
+.guide {
+  font-size: 12px;
+  line-height: 1.7;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.test-line {
+  font-size: 12px;
+  line-height: 1.6;
+  word-break: break-all;
+}
+.test-line.ok {
+  color: #4ade80;
+}
+.test-line.bad {
+  color: #ff6b6b;
+}
+.save-btn {
+  margin-top: 16px;
+}
+.foot {
+  font-size: 12px;
+  margin-top: 10px;
+}
+</style>
diff --git a/src/views/admin/AdminDashboard.vue b/src/views/admin/AdminDashboard.vue
new file mode 100644
index 0000000..fdd4d26
--- /dev/null
+++ b/src/views/admin/AdminDashboard.vue
@@ -0,0 +1,358 @@
+<script setup>
+// 后台数据概览：核心指标卡片 + 运营分析（日活趋势/游玩时长/最火游戏）+ 站点信息设置
+import { ref, computed, onMounted } from 'vue'
+import http, { toast } from '../../api/http'
+import { useThemeStore } from '../../stores/theme'
+import GameIcon from '../../components/GameIcon.vue'
+import NavIcon from '../../components/NavIcon.vue'
+
+const theme = useThemeStore()
+const stats = ref(null)
+const ana = ref(null)
+const siteName = ref('')
+const announcement = ref('')
+const saving = ref(false)
+
+const cards = [
+  { key: 'user_count', name: '用户总数', icon: 'users' },
+  { key: 'game_count', name: '上架游戏', icon: 'lobby' },
+  { key: 'order_count', name: '订单总数', icon: 'orders' },
+  { key: 'today_plays', name: '今日游玩局数', icon: 'play' },
+  { key: 'today_signs', name: '今日签到人数', icon: 'signin' },
+  { key: 'today_points', name: '今日发放积分', icon: 'coin' },
+]
+
+// 秒 → 「x小时y分」/「y分z秒」可读文本
+function fmtDur(sec) {
+  sec = Math.max(0, Math.round(sec || 0))
+  if (sec >= 3600) return `${Math.floor(sec / 3600)}小时${Math.floor((sec % 3600) / 60)}分`
+  if (sec >= 60) return `${Math.floor(sec / 60)}分${sec % 60}秒`
+  return `${sec}秒`
+}
+
+// 日活对比昨日的变化标签
+const dauDelta = computed(() => {
+  if (!ana.value) return null
+  const t = ana.value.dau_today, y = ana.value.dau_yesterday
+  if (y === 0) return t > 0 ? { text: '新增', up: true } : null
+  const pct = Math.round(((t - y) / y) * 100)
+  return { text: `${pct >= 0 ? '+' : ''}${pct}% 较昨日`, up: pct >= 0 }
+})
+
+// 趋势图柱高（按最大值归一化，最矮保留 4% 便于看到有数据的日子）
+const trendMax = computed(() => Math.max(1, ...(ana.value?.dau_trend || []).map((d) => d.count)))
+function barH(n) {
+  return n === 0 ? 2 : Math.max(4, Math.round((n / trendMax.value) * 100))
+}
+
+async function load() {
+  stats.value = await http.get('/admin/stats')
+  siteName.value = theme.siteName
+  announcement.value = theme.announcement
+  ana.value = await http.get('/admin/analytics')
+}
+
+// 保存站点名与公告，保存后刷新全站配置
+async function saveSite() {
+  saving.value = true
+  try {
+    await http.put('/admin/site', { site_name: siteName.value, announcement: announcement.value })
+    toast('已保存', 'success')
+    await theme.fetchConfig()
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div>
+    <h2 class="page-title">数据概览</h2>
+    <div v-if="stats" class="stat-grid">
+      <div v-for="c in cards" :key="c.key" class="panel stat-card">
+        <span class="stat-icon"><NavIcon :name="c.icon" :size="30" /></span>
+        <div>
+          <div class="stat-num">{{ stats[c.key] }}</div>
+          <div class="stat-name text-dim">{{ c.name }}</div>
+        </div>
+      </div>
+    </div>
+    <!-- 运营分析 -->
+    <template v-if="ana">
+      <div class="stat-grid">
+        <div class="panel stat-card">
+          <span class="stat-icon"><NavIcon name="trend" :size="30" /></span>
+          <div>
+            <div class="stat-num">
+              {{ ana.dau_today }}
+              <small v-if="dauDelta" class="delta" :class="dauDelta.up ? 'up' : 'down'">{{ dauDelta.text }}</small>
+            </div>
+            <div class="stat-name text-dim">今日日活（去重用户）</div>
+          </div>
+        </div>
+        <div class="panel stat-card">
+          <span class="stat-icon online"><NavIcon name="pulse" :size="30" /></span>
+          <div>
+            <div class="stat-num">{{ ana.online_now }}</div>
+            <div class="stat-name text-dim">当前在线人数</div>
+          </div>
+        </div>
+        <div class="panel stat-card">
+          <span class="stat-icon"><NavIcon name="clock" :size="30" /></span>
+          <div>
+            <div class="stat-num">{{ fmtDur(ana.play_seconds_today) }}</div>
+            <div class="stat-name text-dim">今日游玩总时长（{{ ana.plays_today }} 局）</div>
+          </div>
+        </div>
+        <div class="panel stat-card">
+          <span class="stat-icon"><NavIcon name="hourglass" :size="30" /></span>
+          <div>
+            <div class="stat-num">{{ fmtDur(ana.avg_seconds) }}</div>
+            <div class="stat-name text-dim">平均单局时长（累计 {{ fmtDur(ana.play_seconds_total) }}）</div>
+          </div>
+        </div>
+      </div>
+      <div class="ana-row">
+        <!-- 日活趋势 -->
+        <div class="panel trend-panel">
+          <h3 class="form-title"><NavIcon name="trend" :size="16" /> 近 14 天日活趋势</h3>
+          <div class="trend-chart">
+            <div v-for="d in ana.dau_trend" :key="d.full" class="trend-col" :title="`${d.full}：${d.count} 人`">
+              <span class="trend-num" v-if="d.count">{{ d.count }}</span>
+              <span class="trend-bar" :style="{ height: barH(d.count) + '%' }"></span>
+              <span class="trend-date">{{ d.date }}</span>
+            </div>
+          </div>
+        </div>
+        <!-- 最火游戏 -->
+        <div class="panel hot-panel">
+          <h3 class="form-title"><NavIcon name="flame" :size="16" /> 最火游戏（近 7 天局数）</h3>
+          <div v-if="!ana.hot_games.length" class="text-dim hot-empty">近 7 天还没有游玩数据</div>
+          <div v-for="(g, i) in ana.hot_games" :key="g.game_id" class="hot-row">
+            <span class="hot-rank" :class="'r' + (i + 1)">{{ i + 1 }}</span>
+            <GameIcon class="hot-icon" :code="g.code" :icon="g.icon" :size="22" />
+            <span class="hot-mid">
+              <b>{{ g.name }}</b>
+              <small class="text-dim">{{ g.category }} · 平均 {{ fmtDur(g.avg_seconds) }}/局 · 历史 {{ g.play_count }} 局</small>
+            </span>
+            <span class="hot-plays">{{ g.plays_7d }} 局</span>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div class="panel site-form">
+      <h3 class="form-title"><NavIcon name="tag" :size="16" /> 站点信息</h3>
+      <div class="form-row">
+        <label>站点名称</label>
+        <input v-model="siteName" class="input" maxlength="20" placeholder="显示在导航栏与标题" />
+      </div>
+      <div class="form-row">
+        <label>大厅公告</label>
+        <textarea v-model="announcement" class="input" rows="3" maxlength="200" placeholder="显示在游戏大厅顶部"></textarea>
+      </div>
+      <button class="btn" :disabled="saving" @click="saveSite">{{ saving ? '保存中…' : '保存修改' }}</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 14px;
+  margin-bottom: 16px;
+}
+.stat-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 18px;
+}
+.stat-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--primary-2);
+  background: color-mix(in srgb, var(--primary) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
+}
+.stat-icon.online {
+  color: #4ade80;
+  background: rgba(74, 222, 128, 0.1);
+  border-color: rgba(74, 222, 128, 0.25);
+}
+.stat-num {
+  font-size: 26px;
+  font-weight: 800;
+  color: var(--primary-2);
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.stat-name {
+  font-size: 12px;
+}
+.delta {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 999px;
+}
+.delta.up {
+  color: #4ade80;
+  background: rgba(74, 222, 128, 0.12);
+}
+.delta.down {
+  color: #ff8a8e;
+  background: rgba(229, 72, 77, 0.12);
+}
+.ana-row {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: 14px;
+  margin-bottom: 16px;
+}
+@media (max-width: 1000px) {
+  .ana-row {
+    grid-template-columns: 1fr;
+  }
+}
+.trend-chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  height: 190px;
+  padding-top: 18px;
+}
+.trend-col {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  min-width: 0;
+}
+.trend-num {
+  font-size: 10px;
+  color: var(--text-dim);
+}
+.trend-bar {
+  width: 100%;
+  max-width: 26px;
+  border-radius: 4px 4px 0 0;
+  background: linear-gradient(180deg, var(--primary-2), var(--primary));
+  box-shadow: var(--glow);
+  transition: height 0.4s;
+}
+.trend-date {
+  font-size: 10px;
+  color: var(--text-dim);
+  white-space: nowrap;
+  transform: scale(0.9);
+}
+.hot-empty {
+  padding: 30px 0;
+  text-align: center;
+  font-size: 13px;
+}
+.hot-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--border);
+}
+.hot-row:last-child {
+  border-bottom: none;
+}
+.hot-rank {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: 12px;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.hot-rank.r1 {
+  background: linear-gradient(135deg, #f5c518, #e8940a);
+  color: #201500;
+  border-color: transparent;
+}
+.hot-rank.r2 {
+  background: linear-gradient(135deg, #d7dde4, #9aa7b5);
+  color: #1b222b;
+  border-color: transparent;
+}
+.hot-rank.r3 {
+  background: linear-gradient(135deg, #e0955c, #b06030);
+  color: #2b1200;
+  border-color: transparent;
+}
+.hot-icon {
+  font-size: 22px;
+}
+.hot-mid {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.hot-mid b {
+  font-size: 13px;
+}
+.hot-mid small {
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.hot-plays {
+  font-weight: 800;
+  color: var(--primary-2);
+  font-size: 14px;
+  flex-shrink: 0;
+}
+.site-form {
+  max-width: 560px;
+}
+.form-title {
+  font-size: 15px;
+  margin-bottom: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.form-title svg {
+  color: var(--primary-2);
+  flex-shrink: 0;
+}
+.form-row {
+  margin-bottom: 12px;
+}
+.form-row label {
+  display: block;
+  font-size: 13px;
+  color: var(--text-dim);
+  margin-bottom: 6px;
+}
+textarea.input {
+  resize: vertical;
+  font-family: inherit;
+}
+</style>
diff --git a/src/views/admin/AdminGames.vue b/src/views/admin/AdminGames.vue
new file mode 100644
index 0000000..7529f5d
--- /dev/null
+++ b/src/views/admin/AdminGames.vue
@@ -0,0 +1,439 @@
+<script setup>
+// 游戏管理：改价格、上下架、调排序、积分规则（换算比 + 单局上限）、大厅轮播配置
+// 支持名称搜索 + 分类/状态筛选（前端过滤），列表虚拟滚动限高
+import { ref, computed, onMounted } from 'vue'
+import http, { toast } from '../../api/http'
+import { useThemeStore } from '../../stores/theme'
+import NavIcon from '../../components/NavIcon.vue'
+import GameIcon from '../../components/GameIcon.vue'
+import VirtualList from '../../components/VirtualList.vue'
+
+const themeStore = useThemeStore()
+const list = ref([])
+const loading = ref(true)
+const loadError = ref('')
+const editing = ref(null) // 正在编辑的游戏（副本）
+
+// ---- 搜索与筛选（纯前端过滤，全量数据本来就一次拉回）----
+const keyword = ref('')
+const catFilter = ref('') // ''=全部分类
+const statusFilter = ref(0) // 0=全部 1=上架 2=下架
+const categoryNames = { casual: '休闲', puzzle: '益智', action: '动作', shooting: '射击', board: '棋牌', sport: '竞速' }
+const engineNames = { canvas: 'Canvas', three: '3D', online: '联机' }
+
+const categories = computed(() => {
+  const set = new Set(list.value.map((g) => g.category))
+  return [...set]
+})
+const filtered = computed(() =>
+  list.value.filter((g) => {
+    if (keyword.value && !g.name.toLowerCase().includes(keyword.value.trim().toLowerCase())) return false
+    if (catFilter.value && g.category !== catFilter.value) return false
+    if (statusFilter.value && g.status !== statusFilter.value) return false
+    return true
+  })
+)
+
+// ---- 大厅轮播全局设置（效果样式 + 自动播放间隔，存 site_configs）----
+const CAROUSEL_STYLES = [
+  { code: 'slide', name: '横向滑动', desc: '经典 banner 左右滑' },
+  { code: 'fade', name: '淡入淡出', desc: '原地渐隐切换' },
+  { code: 'coverflow', name: '封面流', desc: '中间大两侧 3D 倾斜' },
+  { code: 'cards', name: '卡片堆叠', desc: '切换时向左飞出' },
+]
+const carouselStyle = ref('slide')
+const carouselInterval = ref(5)
+const savingCarousel = ref(false)
+
+async function saveCarousel() {
+  savingCarousel.value = true
+  try {
+    await http.put('/admin/site', {
+      carousel_style: carouselStyle.value,
+      carousel_interval: Number(carouselInterval.value),
+    })
+    await themeStore.fetchConfig() // 立即拉回配置，大厅下次进入即生效
+    toast('轮播设置已保存', 'success')
+  } finally {
+    savingCarousel.value = false
+  }
+}
+
+async function load() {
+  loading.value = true
+  loadError.value = ''
+  try {
+    list.value = await http.get('/admin/games')
+  } catch (e) {
+    // 请求失败时给出页面内提示（比如后端没启动），而不是只留一张空表
+    loadError.value = '加载失败，请确认后端服务已启动后重试'
+  } finally {
+    loading.value = false
+  }
+}
+
+function openEdit(g) {
+  editing.value = {
+    id: g.id, name: g.name, price: g.price, sort: g.sort,
+    score_per_point: g.score_per_point, max_points_per_play: g.max_points_per_play,
+    carousel: g.carousel || 0,
+  }
+}
+async function saveEdit() {
+  await http.put(`/admin/games/${editing.value.id}`, {
+    price: Number(editing.value.price),
+    sort: Number(editing.value.sort),
+    score_per_point: Number(editing.value.score_per_point),
+    max_points_per_play: Number(editing.value.max_points_per_play),
+    carousel: Number(editing.value.carousel) || 0,
+  })
+  toast('已保存', 'success')
+  editing.value = null
+  load()
+}
+
+// 快捷切换轮播参与状态：开=排到当前最大值+1，关=0
+async function toggleCarousel(g) {
+  const value = g.carousel > 0 ? 0 : Math.max(0, ...list.value.map((x) => x.carousel || 0)) + 1
+  await http.put(`/admin/games/${g.id}`, { carousel: value })
+  toast(value > 0 ? `「${g.name}」已加入大厅轮播` : `「${g.name}」已移出轮播`, 'success')
+  load()
+}
+
+// 上/下架切换
+async function toggleStatus(g) {
+  await http.put(`/admin/games/${g.id}`, { status: g.status === 1 ? 2 : 1 })
+  toast(g.status === 1 ? `已下架「${g.name}」` : `已上架「${g.name}」`, 'success')
+  load()
+}
+
+onMounted(() => {
+  load()
+  // 轮播全局配置来自公开站点配置（themeStore 启动时已拉取）
+  carouselStyle.value = themeStore.carouselStyle
+  carouselInterval.value = themeStore.carouselInterval
+})
+</script>
+
+<template>
+  <div>
+    <h2 class="page-title">游戏管理</h2>
+    <!-- 大厅轮播设置：效果样式 + 自动播放间隔（参与的游戏在下方表格逐个开启） -->
+    <div class="panel carousel-conf">
+      <div class="cc-head">
+        <b class="cc-title"><NavIcon name="carousel" :size="16" /> 大厅轮播</b>
+        <span class="text-dim cc-tip">在下方表格给游戏开启轮播后，大厅顶部会出现轮播卡片，点击直接进入游戏</span>
+      </div>
+      <div class="cc-row">
+        <div class="cc-styles">
+          <button
+            v-for="s in CAROUSEL_STYLES"
+            :key="s.code"
+            class="chip"
+            :class="{ on: carouselStyle === s.code }"
+            :title="s.desc"
+            @click="carouselStyle = s.code"
+          >
+            {{ s.name }}
+          </button>
+        </div>
+        <label class="cc-interval">
+          间隔
+          <input v-model.number="carouselInterval" type="number" min="2" max="30" class="input" />
+          秒
+        </label>
+        <button class="btn btn-sm" :disabled="savingCarousel" @click="saveCarousel">
+          {{ savingCarousel ? '保存中…' : '保存轮播设置' }}
+        </button>
+      </div>
+    </div>
+    <!-- 搜索与筛选 -->
+    <div class="toolbar">
+      <input v-model="keyword" class="input" placeholder="搜索游戏名称" style="max-width: 220px" />
+      <div class="filter-tabs">
+        <button class="chip" :class="{ on: catFilter === '' }" @click="catFilter = ''">全部分类</button>
+        <button v-for="c in categories" :key="c" class="chip" :class="{ on: catFilter === c }" @click="catFilter = c">
+          {{ categoryNames[c] || c }}
+        </button>
+      </div>
+      <div class="filter-tabs">
+        <button class="chip" :class="{ on: statusFilter === 0 }" @click="statusFilter = 0">全部</button>
+        <button class="chip" :class="{ on: statusFilter === 1 }" @click="statusFilter = 1">上架</button>
+        <button class="chip" :class="{ on: statusFilter === 2 }" @click="statusFilter = 2">下架</button>
+      </div>
+      <span class="text-dim count">{{ filtered.length }} / {{ list.length }} 款</span>
+    </div>
+    <div class="panel list-wrap">
+      <div v-if="loading" class="state-tip text-dim">加载中…</div>
+      <div v-else-if="loadError" class="state-tip">
+        <span class="st-ban">{{ loadError }}</span>
+        <button class="btn btn-sm" style="margin-left: 10px" @click="load">重新加载</button>
+      </div>
+      <div v-else-if="!list.length" class="state-tip text-dim">
+        没有游戏数据，请确认已执行 sql/init.sql 初始化数据库
+      </div>
+      <div v-else class="hscroll">
+        <div class="tmin">
+          <div class="grow ghead text-dim">
+            <span>排序</span><span>游戏</span><span>分类</span><span>引擎</span><span>价格</span>
+            <span>积分规则</span><span>游玩次数</span><span>轮播</span><span>状态</span><span>操作</span>
+          </div>
+          <VirtualList :items="filtered" :item-height="46" :max-height="520">
+            <template #default="{ item: g }">
+              <div class="grow">
+                <span class="text-dim">{{ g.sort }}</span>
+                <span class="c-game">
+                  <GameIcon :code="g.code" :icon="g.icon" :size="20" />
+                  <b>{{ g.name }}</b>
+                </span>
+                <span class="text-dim">{{ categoryNames[g.category] || g.category }}</span>
+                <span class="text-dim">{{ engineNames[g.engine] || g.engine }}</span>
+                <span>
+                  <span v-if="g.price === 0" class="free">免费</span>
+                  <span v-else class="amount"><NavIcon name="coin" :size="13" /> {{ g.price }}</span>
+                </span>
+                <span class="text-dim rule">
+                  <template v-if="g.score_per_point > 0">{{ g.score_per_point }}分兑1积分 · 上限{{ g.max_points_per_play }}</template>
+                  <template v-else>不兑积分</template>
+                </span>
+                <span class="text-dim">{{ g.play_count }}</span>
+                <span>
+                  <button
+                    class="car-toggle"
+                    :class="{ on: g.carousel > 0 }"
+                    :title="g.carousel > 0 ? `轮播中（顺序 ${g.carousel}），点击移出` : '点击加入大厅轮播'"
+                    @click="toggleCarousel(g)"
+                  >
+                    <template v-if="g.carousel > 0"><NavIcon name="carousel" :size="13" /> #{{ g.carousel }}</template>
+                    <template v-else>－</template>
+                  </button>
+                </span>
+                <span :class="g.status === 1 ? 'st-ok' : 'st-ban'">{{ g.status === 1 ? '上架' : '下架' }}</span>
+                <span class="ops">
+                  <button class="btn btn-ghost btn-sm" @click="openEdit(g)">编辑</button>
+                  <button class="btn btn-sm" :class="g.status === 1 ? 'btn-danger' : ''" @click="toggleStatus(g)">
+                    {{ g.status === 1 ? '下架' : '上架' }}
+                  </button>
+                </span>
+              </div>
+            </template>
+            <template #empty><span class="text-dim">没有符合筛选条件的游戏</span></template>
+          </VirtualList>
+        </div>
+      </div>
+    </div>
+    <!-- 编辑弹窗 -->
+    <div v-if="editing" class="modal-mask" @click.self="editing = null">
+      <div class="modal panel">
+        <h3 style="margin-bottom: 14px">编辑「{{ editing.name }}」</h3>
+        <label class="lbl">价格（积分，0 为免费）</label>
+        <input v-model.number="editing.price" type="number" min="0" class="input" style="margin-bottom: 10px" />
+        <label class="lbl">积分换算（多少游戏得分兑 1 积分，0 = 该游戏不兑积分）</label>
+        <input v-model.number="editing.score_per_point" type="number" min="0" class="input" style="margin-bottom: 10px" />
+        <label class="lbl">单局积分上限（防刷分）</label>
+        <input v-model.number="editing.max_points_per_play" type="number" min="0" class="input" style="margin-bottom: 10px" />
+        <label class="lbl">排序（越小越靠前）</label>
+        <input v-model.number="editing.sort" type="number" class="input" style="margin-bottom: 10px" />
+        <label class="lbl">大厅轮播顺序（0 = 不参与轮播，数字越小越靠前）</label>
+        <input v-model.number="editing.carousel" type="number" min="0" class="input" style="margin-bottom: 14px" />
+        <div style="display: flex; gap: 10px">
+          <button class="btn" style="flex: 1" @click="saveEdit">保存</button>
+          <button class="btn btn-ghost" @click="editing = null">取消</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.carousel-conf {
+  margin-bottom: 14px;
+  padding: 14px 16px;
+}
+.cc-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.cc-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.cc-title svg {
+  color: var(--primary-2);
+}
+.cc-tip {
+  font-size: 12px;
+}
+.cc-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.cc-styles {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.chip {
+  padding: 6px 14px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+}
+.chip:hover {
+  color: var(--text);
+  border-color: var(--primary);
+}
+.chip.on {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+  border-color: transparent;
+}
+.cc-interval {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-dim);
+}
+.cc-interval .input {
+  width: 64px;
+}
+.toolbar {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.filter-tabs {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.count {
+  font-size: 12px;
+  margin-left: auto;
+  white-space: nowrap;
+}
+.list-wrap {
+  padding: 6px 14px 12px;
+}
+.hscroll {
+  overflow-x: auto;
+}
+.tmin {
+  min-width: 1000px;
+}
+.grow {
+  display: grid;
+  grid-template-columns: 46px 1.6fr 62px 66px 90px 1.6fr 72px 84px 48px 138px;
+  gap: 8px;
+  align-items: center;
+  height: 100%;
+  border-bottom: 1px dashed var(--border);
+  font-size: 13px;
+  padding: 0 2px;
+}
+.ghead {
+  height: 38px;
+  font-size: 12px;
+  border-bottom: 1px solid var(--border);
+}
+.c-game {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.c-game b {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.state-tip {
+  padding: 40px 0;
+  text-align: center;
+  font-size: 14px;
+}
+.rule {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.free {
+  color: #4ade80;
+}
+.amount {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--primary-2);
+}
+.st-ok {
+  color: #4ade80;
+}
+.st-ban {
+  color: #ff6b6b;
+}
+.car-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-dim);
+  border-radius: 999px;
+  padding: 3px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s;
+}
+.car-toggle:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+.car-toggle.on {
+  background: color-mix(in srgb, var(--primary) 18%, transparent);
+  border-color: var(--primary);
+  color: var(--primary);
+  font-weight: 700;
+}
+.ops {
+  display: flex;
+  gap: 6px;
+}
+.ops .btn {
+  white-space: nowrap;
+}
+.modal-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+.modal {
+  width: min(360px, 90vw);
+  padding: 22px;
+}
+.lbl {
+  display: block;
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-bottom: 6px;
+}
+</style>
diff --git a/src/views/admin/AdminLayout.vue b/src/views/admin/AdminLayout.vue
new file mode 100644
index 0000000..780fada
--- /dev/null
+++ b/src/views/admin/AdminLayout.vue
@@ -0,0 +1,106 @@
+<script setup>
+// 后台管理布局：左侧菜单 + 右侧内容区（菜单图标全部为手绘 SVG）
+import { useRoute } from 'vue-router'
+import NavIcon from '../../components/NavIcon.vue'
+
+const route = useRoute()
+const menus = [
+  { path: '/admin', name: '数据概览', icon: 'stats' },
+  { path: '/admin/themes', name: '主题设置', icon: 'palette' },
+  { path: '/admin/users', name: '用户管理', icon: 'users' },
+  { path: '/admin/games', name: '游戏管理', icon: 'lobby' },
+  { path: '/admin/orders', name: '订单管理', icon: 'orders' },
+  { path: '/admin/vip', name: 'VIP设置', icon: 'vip' },
+  { path: '/admin/ai', name: 'AI 设置', icon: 'robot' },
+  { path: '/admin/version', name: '桌面版本', icon: 'download' },
+]
+</script>
+
+<template>
+  <div class="admin-layout">
+    <aside class="admin-side panel">
+      <h3 class="admin-title"><NavIcon name="admin" :size="17" /> 管理后台</h3>
+      <nav class="admin-nav">
+        <RouterLink
+          v-for="m in menus"
+          :key="m.path"
+          :to="m.path"
+          class="admin-link"
+          :class="{ on: route.path === m.path }"
+        >
+          <NavIcon :name="m.icon" :size="18" />{{ m.name }}
+        </RouterLink>
+      </nav>
+    </aside>
+    <main class="admin-main">
+      <RouterView />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.admin-layout {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 16px;
+  align-items: start;
+}
+.admin-side {
+  padding: 16px 12px;
+  position: sticky;
+  top: 76px;
+}
+.admin-title {
+  font-size: 15px;
+  padding: 0 8px 12px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.admin-title svg {
+  color: var(--primary-2);
+  flex-shrink: 0;
+}
+.admin-link svg {
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+.admin-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.admin-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 10px;
+  border-radius: 10px;
+  color: var(--text-dim);
+  text-decoration: none;
+  font-size: 14px;
+  transition: all 0.15s;
+}
+.admin-link:hover {
+  background: var(--bg-card);
+  color: var(--text);
+}
+.admin-link.on {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+}
+@media (max-width: 800px) {
+  .admin-layout {
+    grid-template-columns: 1fr;
+  }
+  .admin-side {
+    position: static;
+  }
+  .admin-nav {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+</style>
diff --git a/src/views/admin/AdminOrders.vue b/src/views/admin/AdminOrders.vue
new file mode 100644
index 0000000..2fed032
--- /dev/null
+++ b/src/views/admin/AdminOrders.vue
@@ -0,0 +1,232 @@
+<script setup>
+// 订单管理：订单号 / 用户账号搜索 + 时间范围筛选 + 筛选结果积分合计
+// 列表「批量拉取 + 虚拟滚动」：一次拉 200 条只渲染可视行，滚动到底自动续拉
+import { ref, onMounted } from 'vue'
+import http from '../../api/http'
+import NavIcon from '../../components/NavIcon.vue'
+import VirtualList from '../../components/VirtualList.vue'
+
+const BATCH = 200
+const list = ref([])
+const total = ref(0)
+const sumPoints = ref(0) // 当前筛选条件下的订单积分合计（后端聚合）
+const orderNo = ref('')
+const userKw = ref('')
+const rangeKey = ref('') // ''=全部 today=今天 7d=近7天 30d=近30天
+const loading = ref(false)
+const listRef = ref(null)
+let nextPage = 1
+
+const RANGES = [
+  { value: '', label: '全部' },
+  { value: 'today', label: '今天' },
+  { value: '7d', label: '近 7 天' },
+  { value: '30d', label: '近 30 天' },
+]
+
+async function load(reset = false) {
+  if (loading.value) return
+  if (reset) nextPage = 1
+  else if (nextPage > 1 && list.value.length >= total.value) return
+  loading.value = true
+  try {
+    const data = await http.get('/admin/orders', {
+      params: {
+        page: nextPage,
+        size: BATCH,
+        order_no: orderNo.value.trim(),
+        user: userKw.value.trim(),
+        range: rangeKey.value,
+      },
+    })
+    list.value = reset ? data.list : [...list.value, ...data.list]
+    total.value = data.total
+    sumPoints.value = data.sum_points || 0
+    nextPage++
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  listRef.value?.scrollToTop()
+  load(true)
+}
+function resetSearch() {
+  orderNo.value = ''
+  userKw.value = ''
+  rangeKey.value = ''
+  search()
+}
+function setRange(r) {
+  rangeKey.value = r
+  search()
+}
+function fmtTime(ts) {
+  if (!ts) return '-'
+  return new Date(ts * 1000).toLocaleString('zh-CN', { hour12: false })
+}
+
+onMounted(() => load(true))
+</script>
+
+<template>
+  <div>
+    <h2 class="page-title">订单管理</h2>
+    <!-- 搜索 + 时间范围筛选 -->
+    <div class="toolbar">
+      <input v-model="orderNo" class="input" placeholder="搜索订单号" style="max-width: 220px" @keyup.enter="search" />
+      <input v-model="userKw" class="input" placeholder="搜索用户账号" style="max-width: 180px" @keyup.enter="search" />
+      <button class="btn btn-sm" @click="search">搜索</button>
+      <button v-if="orderNo || userKw || rangeKey" class="btn btn-ghost btn-sm" @click="resetSearch">重置</button>
+      <div class="range-tabs">
+        <button v-for="r in RANGES" :key="r.value" class="chip" :class="{ on: rangeKey === r.value }" @click="setRange(r.value)">
+          {{ r.label }}
+        </button>
+      </div>
+    </div>
+    <!-- 筛选结果汇总 -->
+    <div class="sum-bar text-dim">
+      筛选结果：<b>{{ total }}</b> 单，合计
+      <b class="sum-points"><NavIcon name="coin" :size="14" /> {{ sumPoints }}</b> 积分
+    </div>
+    <div class="panel list-wrap">
+      <div class="hscroll">
+        <div class="tmin">
+          <div class="orow ohead text-dim">
+            <span>订单号</span><span>用户</span><span>商品</span><span>金额（积分）</span><span>状态</span><span>下单时间</span>
+          </div>
+          <VirtualList ref="listRef" :items="list" :item-height="46" :max-height="560" @reach-end="load()">
+            <template #default="{ item: o }">
+              <div class="orow">
+                <span class="mono">{{ o.order_no }}</span>
+                <span class="c-user">
+                  {{ o.nickname }}
+                  <small class="text-dim">@{{ o.username }}</small>
+                </span>
+                <span class="text-dim remark" :title="o.remark">{{ o.remark }}</span>
+                <span class="amount"><NavIcon name="coin" :size="13" /> {{ o.total_points }}</span>
+                <span class="st-ok">已完成</span>
+                <span class="text-dim time">{{ fmtTime(o.created_at) }}</span>
+              </div>
+            </template>
+            <template #empty><span class="text-dim">暂无订单</span></template>
+          </VirtualList>
+        </div>
+      </div>
+      <div class="list-foot text-dim">
+        已加载 {{ list.length }} / {{ total }} 单<span v-if="loading"> · 加载中…</span>
+        <span v-else-if="list.length && list.length < total"> · 滚动到底部自动加载更多</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.range-tabs {
+  display: flex;
+  gap: 6px;
+}
+.chip {
+  padding: 6px 14px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+}
+.chip:hover {
+  color: var(--text);
+  border-color: var(--primary);
+}
+.chip.on {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+  border-color: transparent;
+}
+.sum-bar {
+  font-size: 13px;
+  margin-bottom: 10px;
+}
+.sum-bar b {
+  color: var(--text);
+}
+.sum-points {
+  color: var(--primary-2) !important;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+.list-wrap {
+  padding: 6px 14px 12px;
+}
+.hscroll {
+  overflow-x: auto;
+}
+.tmin {
+  min-width: 900px;
+}
+.orow {
+  display: grid;
+  grid-template-columns: 180px 1.2fr 1.8fr 110px 60px 150px;
+  gap: 8px;
+  align-items: center;
+  height: 100%;
+  border-bottom: 1px dashed var(--border);
+  font-size: 13px;
+  padding: 0 2px;
+}
+.ohead {
+  height: 38px;
+  font-size: 12px;
+  border-bottom: 1px solid var(--border);
+}
+.mono {
+  font-family: monospace;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.c-user {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.c-user small {
+  font-size: 11px;
+}
+.remark {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.amount {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--primary-2);
+  font-weight: 700;
+}
+.st-ok {
+  color: #4ade80;
+}
+.time {
+  font-size: 12px;
+  white-space: nowrap;
+}
+.list-foot {
+  font-size: 12px;
+  text-align: center;
+  padding-top: 10px;
+}
+</style>
diff --git a/src/views/admin/AdminThemes.vue b/src/views/admin/AdminThemes.vue
new file mode 100644
index 0000000..4f575f5
--- /dev/null
+++ b/src/views/admin/AdminThemes.vue
@@ -0,0 +1,164 @@
+<script setup>
+// 主题设置：预览全部主题，一键切换全站生效
+import { ref, onMounted } from 'vue'
+import http, { toast } from '../../api/http'
+import { useThemeStore } from '../../stores/theme'
+
+const themeStore = useThemeStore()
+const themes = ref([])
+const active = ref('')
+const switching = ref('')
+
+async function load() {
+  const data = await http.get('/admin/themes')
+  themes.value = data.list
+  active.value = data.active
+}
+
+// 切换主题：写库后重新拉配置，本端立即生效（其他用户刷新/下次拉取生效）
+async function switchTheme(code) {
+  if (code === active.value) return
+  switching.value = code
+  try {
+    await http.post('/admin/theme', { code })
+    active.value = code
+    await themeStore.fetchConfig()
+    toast('主题已切换，全站生效', 'success')
+  } finally {
+    switching.value = ''
+  }
+}
+
+// 解析主题的 CSS 变量 JSON 用于色卡预览
+function varsOf(t) {
+  try {
+    return JSON.parse(t.css_vars || '{}')
+  } catch (e) {
+    return {}
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div>
+    <h2 class="page-title">主题设置</h2>
+    <p class="text-dim" style="font-size: 13px; margin-bottom: 16px">
+      切换后立即写入站点配置，所有用户下次加载页面即应用新主题
+    </p>
+    <div class="theme-grid">
+      <div v-for="t in themes" :key="t.code" class="panel theme-card" :class="{ on: active === t.code }">
+        <!-- 色卡预览 -->
+        <div
+          class="preview"
+          :style="{
+            background: varsOf(t)['--bg'] || '#111',
+            borderColor: varsOf(t)['--border'] || '#333',
+          }"
+        >
+          <div class="pv-bar" :style="{ background: varsOf(t)['--bg-panel'] || '#222' }">
+            <span class="pv-dot" :style="{ background: varsOf(t)['--primary'] || '#4f8cff' }"></span>
+            <span class="pv-dot" :style="{ background: varsOf(t)['--accent'] || '#ffd500' }"></span>
+          </div>
+          <div class="pv-body">
+            <div class="pv-card" :style="{ background: varsOf(t)['--bg-card'] || '#1a1a2a' }">
+              <div class="pv-line" :style="{ background: varsOf(t)['--primary'] || '#4f8cff' }"></div>
+              <div class="pv-line short" :style="{ background: varsOf(t)['--text-dim'] || '#888' }"></div>
+            </div>
+            <div
+              class="pv-btn"
+              :style="{ background: `linear-gradient(135deg, ${varsOf(t)['--primary'] || '#4f8cff'}, ${varsOf(t)['--primary-2'] || '#8cb8ff'})` }"
+            ></div>
+          </div>
+        </div>
+        <div class="theme-info">
+          <div>
+            <b>{{ t.name }}</b>
+            <span class="text-dim code">{{ t.code }}</span>
+          </div>
+          <p class="text-dim desc">{{ t.description }}</p>
+          <button
+            class="btn btn-sm"
+            :class="{ 'btn-ghost': active !== t.code }"
+            :disabled="active === t.code || switching === t.code"
+            @click="switchTheme(t.code)"
+          >
+            {{ active === t.code ? '✓ 使用中' : switching === t.code ? '切换中…' : '启用主题' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.theme-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 14px;
+}
+.theme-card {
+  padding: 0;
+  overflow: hidden;
+  transition: box-shadow 0.2s;
+}
+.theme-card.on {
+  box-shadow: 0 0 0 2px var(--primary), var(--glow);
+}
+.preview {
+  height: 130px;
+  border-bottom: 1px solid;
+  padding: 8px;
+}
+.pv-bar {
+  height: 20px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 8px;
+  margin-bottom: 8px;
+}
+.pv-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.pv-body {
+  display: flex;
+  gap: 8px;
+}
+.pv-card {
+  flex: 1;
+  border-radius: 8px;
+  padding: 8px;
+}
+.pv-line {
+  height: 8px;
+  border-radius: 4px;
+  margin-bottom: 6px;
+}
+.pv-line.short {
+  width: 60%;
+  opacity: 0.5;
+}
+.pv-btn {
+  width: 46px;
+  height: 46px;
+  border-radius: 10px;
+  align-self: flex-end;
+}
+.theme-info {
+  padding: 12px 14px 14px;
+}
+.code {
+  font-size: 11px;
+  margin-left: 6px;
+}
+.desc {
+  font-size: 12px;
+  margin: 6px 0 10px;
+  min-height: 32px;
+}
+</style>
diff --git a/src/views/admin/AdminUsers.vue b/src/views/admin/AdminUsers.vue
new file mode 100644
index 0000000..b4b6d56
--- /dev/null
+++ b/src/views/admin/AdminUsers.vue
@@ -0,0 +1,596 @@
+<script setup>
+// 用户管理：关键词搜索 + 状态筛选、封禁二次确认、积分管理（充值/扣除/调整 + 完整流水）、VIP调整
+// 列表采用「批量拉取 + 虚拟滚动」：一次拉 200 条只渲染可视行，滚动到底自动续拉，数据再多也不卡
+import { ref, computed, onMounted } from 'vue'
+import http, { toast } from '../../api/http'
+import NavIcon from '../../components/NavIcon.vue'
+import VirtualList from '../../components/VirtualList.vue'
+import PixelAvatar from '../../components/PixelAvatar.vue'
+
+const BATCH = 200 // 每批拉取条数
+const list = ref([])
+const total = ref(0)
+const keyword = ref('')
+const statusFilter = ref(0) // 0=全部 1=正常 2=封禁
+const loading = ref(false)
+const listRef = ref(null)
+let nextPage = 1
+
+const STATUS_TABS = [
+  { value: 0, label: '全部' },
+  { value: 1, label: '正常' },
+  { value: 2, label: '封禁' },
+]
+
+// 拉取一批：reset=true 表示条件变化从头拉，否则触底续拉下一批
+async function load(reset = false) {
+  if (loading.value) return
+  if (reset) nextPage = 1
+  else if (nextPage > 1 && list.value.length >= total.value) return // 已全部加载
+  loading.value = true
+  try {
+    const data = await http.get('/admin/users', {
+      params: { page: nextPage, size: BATCH, keyword: keyword.value, status: statusFilter.value },
+    })
+    list.value = reset ? data.list : [...list.value, ...data.list]
+    total.value = data.total
+    nextPage++
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  listRef.value?.scrollToTop()
+  load(true)
+}
+function setStatus(s) {
+  statusFilter.value = s
+  search()
+}
+
+// ---- 封禁 / 解封（封禁需 3 秒内二次点击确认，防误点）----
+const confirmBanId = ref(0)
+let confirmTimer = 0
+
+function askToggleBan(u) {
+  if (u.status !== 1) {
+    doToggleBan(u) // 解封无破坏性，直接执行
+    return
+  }
+  if (confirmBanId.value === u.id) {
+    clearTimeout(confirmTimer)
+    confirmBanId.value = 0
+    doToggleBan(u)
+    return
+  }
+  confirmBanId.value = u.id
+  clearTimeout(confirmTimer)
+  confirmTimer = setTimeout(() => (confirmBanId.value = 0), 3000)
+}
+async function doToggleBan(u) {
+  const target = u.status === 1 ? 2 : 1
+  await http.put(`/admin/users/${u.id}`, { status: target })
+  toast(target === 2 ? `已封禁 ${u.nickname}` : `已解封 ${u.nickname}`, 'success')
+  u.status = target // 就地更新该行，保持滚动位置
+}
+
+// ---- 积分管理（弹窗 + 完整流水虚拟滚动）----
+const adjustTarget = ref(null)
+const adjustOp = ref('recharge')
+const adjustValue = ref(null)
+const adjustRemark = ref('')
+
+const OPS = [
+  { key: 'recharge', label: '充值积分', valLabel: '充值数量', hint: '为用户增加积分（正向流水，同时计入累计积分）' },
+  { key: 'deduct', label: '扣除积分', valLabel: '扣除数量', hint: '从用户余额中扣减，余额不足会被拒绝' },
+  { key: 'set', label: '调整积分', valLabel: '目标积分', hint: '直接把余额设定为目标值，按差额记一条流水' },
+]
+const curOp = computed(() => OPS.find((o) => o.key === adjustOp.value))
+const setDelta = computed(() => Number(adjustValue.value || 0) - (adjustTarget.value?.points ?? 0))
+
+// 流水同样批量拉取 + 虚拟滚动（替代翻页）
+const FLOW_BATCH = 300
+const flow = ref({ list: [], total: 0 })
+const flowLoading = ref(false)
+let flowPage = 1
+const pointTypeNames = { 1: '每日签到', 2: '游戏奖励', 3: '商城消费', 4: '对战奖励', 5: '道具使用', 6: '注册赠送', 7: '后台调整', 8: '开通VIP' }
+
+function openAdjust(u) {
+  adjustTarget.value = u
+  adjustOp.value = 'recharge'
+  adjustValue.value = null
+  adjustRemark.value = ''
+  loadFlow(true)
+}
+async function loadFlow(reset = false) {
+  if (flowLoading.value) return
+  if (reset) flowPage = 1
+  else if (flowPage > 1 && flow.value.list.length >= flow.value.total) return
+  flowLoading.value = true
+  try {
+    const data = await http.get(`/admin/users/${adjustTarget.value.id}/points`, {
+      params: { page: flowPage, size: FLOW_BATCH },
+    })
+    flow.value = {
+      list: reset ? data.list : [...flow.value.list, ...data.list],
+      total: data.total,
+    }
+    flowPage++
+  } finally {
+    flowLoading.value = false
+  }
+}
+
+async function doAdjust() {
+  const v = Number(adjustValue.value)
+  if (adjustOp.value === 'set') {
+    if (adjustValue.value === null || adjustValue.value === '' || Number.isNaN(v) || v < 0) {
+      toast('请输入不小于 0 的目标积分')
+      return
+    }
+  } else if (!v || v <= 0) {
+    toast(`请输入大于 0 的${curOp.value.valLabel}`)
+    return
+  }
+  await http.put(`/admin/users/${adjustTarget.value.id}`, {
+    points_op: adjustOp.value,
+    points_value: v,
+    remark: adjustRemark.value,
+  })
+  toast(`${curOp.value.label}成功`, 'success')
+  adjustValue.value = null
+  adjustRemark.value = ''
+  // 弹窗保持打开：重拉流水，用最新一条的余额同步弹窗头部与表格行（不整表重拉，保住滚动位置）
+  await loadFlow(true)
+  const balance = flow.value.list[0]?.balance
+  if (balance !== undefined) {
+    adjustTarget.value = { ...adjustTarget.value, points: balance }
+    const row = list.value.find((x) => x.id === adjustTarget.value.id)
+    if (row) row.points = balance
+  }
+}
+
+// ---- VIP 调整 ----
+const vipTarget = ref(null)
+const vipLevel = ref(0)
+const vipAddDays = ref(0)
+
+function openVip(u) {
+  vipTarget.value = u
+  vipLevel.value = u.vip_level || 0
+  vipAddDays.value = 0
+}
+async function doVip() {
+  await http.put(`/admin/users/${vipTarget.value.id}`, {
+    vip_level: Number(vipLevel.value),
+    vip_add_days: Number(vipAddDays.value) || 0,
+  })
+  toast('VIP已更新', 'success')
+  vipTarget.value = null
+  load(true) // 到期时间由后端计算，重拉保证显示准确
+}
+
+function vipText(u) {
+  if (!u.vip_level) return '-'
+  const expired = u.vip_expire * 1000 < Date.now()
+  const date = new Date(u.vip_expire * 1000).toLocaleDateString('zh-CN')
+  return expired ? `VIP${u.vip_level}（已过期）` : `VIP${u.vip_level} 至 ${date}`
+}
+function fmtTime(ts) {
+  if (!ts) return '-'
+  return new Date(ts * 1000).toLocaleString('zh-CN', { hour12: false })
+}
+
+onMounted(() => load(true))
+</script>
+
+<template>
+  <div>
+    <h2 class="page-title">用户管理</h2>
+    <div class="toolbar">
+      <input v-model="keyword" class="input" placeholder="搜索用户名 / 昵称" style="max-width: 260px" @keyup.enter="search" />
+      <button class="btn btn-sm" @click="search">搜索</button>
+      <div class="status-tabs">
+        <button
+          v-for="t in STATUS_TABS"
+          :key="t.value"
+          class="chip"
+          :class="{ on: statusFilter === t.value }"
+          @click="setStatus(t.value)"
+        >
+          {{ t.label }}
+        </button>
+      </div>
+      <span class="text-dim count">共 {{ total }} 人</span>
+    </div>
+    <div class="panel list-wrap">
+      <div class="hscroll">
+        <div class="tmin">
+          <!-- 表头固定在虚拟列表外 -->
+          <div class="urow uhead text-dim">
+            <span>ID</span><span>用户</span><span>角色</span><span>积分</span><span>累计积分</span>
+            <span>VIP</span><span>状态</span><span>注册时间</span><span>操作</span>
+          </div>
+          <VirtualList ref="listRef" :items="list" :item-height="50" :max-height="560" @reach-end="load()">
+            <template #default="{ item: u }">
+              <div class="urow">
+                <span class="text-dim">{{ u.id }}</span>
+                <span class="c-user">
+                  <i class="c-avatar"><PixelAvatar :code="u.avatar || 'px:01'" :size="22" /></i>
+                  <span class="c-names">
+                    <b>{{ u.nickname }}</b>
+                    <small class="text-dim">@{{ u.username }}</small>
+                  </span>
+                </span>
+                <span>
+                  <span v-if="u.role === 1" class="tag-admin">超管</span>
+                  <span v-else class="text-dim">普通</span>
+                </span>
+                <span>{{ u.points }}</span>
+                <span>{{ u.total_points }}</span>
+                <span class="vip-cell" :class="{ dim: !u.vip_level }">{{ vipText(u) }}</span>
+                <span :class="u.status === 1 ? 'st-ok' : 'st-ban'">{{ u.status === 1 ? '正常' : '封禁' }}</span>
+                <span class="text-dim time">{{ fmtTime(u.created_at) }}</span>
+                <span class="ops">
+                  <button class="btn btn-ghost btn-sm" @click="openAdjust(u)">积分管理</button>
+                  <button class="btn btn-ghost btn-sm" @click="openVip(u)">调VIP</button>
+                  <button
+                    v-if="u.role !== 1"
+                    class="btn btn-sm"
+                    :class="u.status === 1 ? 'btn-danger' : ''"
+                    @click="askToggleBan(u)"
+                  >
+                    {{ confirmBanId === u.id ? '确认封禁' : u.status === 1 ? '封禁' : '解封' }}
+                  </button>
+                </span>
+              </div>
+            </template>
+            <template #empty><span class="text-dim">暂无数据</span></template>
+          </VirtualList>
+        </div>
+      </div>
+      <div class="list-foot text-dim">
+        已加载 {{ list.length }} / {{ total }} 人<span v-if="loading"> · 加载中…</span>
+        <span v-else-if="list.length && list.length < total"> · 滚动到底部自动加载更多</span>
+      </div>
+    </div>
+    <!-- 积分管理弹窗：先选操作类型，下方虚拟滚动展示该用户完整积分流水 -->
+    <div v-if="adjustTarget" class="modal-mask" @click.self="adjustTarget = null">
+      <div class="modal panel adjust-modal">
+        <button class="modal-close" @click="adjustTarget = null">✕</button>
+        <h3 style="margin-bottom: 4px">积分管理</h3>
+        <p class="text-dim" style="font-size: 13px; margin-bottom: 12px">
+          {{ adjustTarget.nickname }}
+          <span style="font-size: 11px">@{{ adjustTarget.username }}</span>
+          ·当前余额 <b class="text-primary balance"><NavIcon name="coin" :size="14" /> {{ adjustTarget.points }}</b>
+        </p>
+        <div class="op-tabs">
+          <button v-for="op in OPS" :key="op.key" class="op-tab" :class="{ on: adjustOp === op.key }" @click="adjustOp = op.key">
+            {{ op.label }}
+          </button>
+        </div>
+        <p class="op-hint text-dim">{{ curOp.hint }}</p>
+        <div class="adjust-form">
+          <input v-model.number="adjustValue" type="number" min="0" class="input" :placeholder="curOp.valLabel" @keyup.enter="doAdjust" />
+          <input v-model="adjustRemark" class="input" placeholder="备注（选填，记入流水）" maxlength="50" @keyup.enter="doAdjust" />
+          <button class="btn" @click="doAdjust">确认{{ curOp.label.slice(0, 2) }}</button>
+        </div>
+        <p v-if="adjustOp === 'set' && adjustValue !== null && adjustValue !== ''" class="set-preview" :class="setDelta >= 0 ? 'gain' : 'cost'">
+          {{ adjustTarget.points }} → {{ adjustValue }}（变动 {{ setDelta >= 0 ? '+' : '' }}{{ setDelta }}）
+        </p>
+        <!-- 完整积分流水：虚拟滚动，滚动到底自动续拉 -->
+        <h4 class="flow-title">
+          积分流水
+          <span class="text-dim" style="font-weight: 400; font-size: 12px">
+            共 {{ flow.total }} 条<template v-if="flow.list.length < flow.total">（已加载 {{ flow.list.length }}）</template>
+          </span>
+        </h4>
+        <div class="flow-wrap">
+          <div class="frow fhead text-dim">
+            <span>时间</span><span>类型</span><span>说明</span><span class="num">变动</span><span class="num">余额</span>
+          </div>
+          <VirtualList :items="flow.list" :item-height="36" :max-height="288" @reach-end="loadFlow()">
+            <template #default="{ item: r }">
+              <div class="frow">
+                <span class="text-dim flow-time">{{ fmtTime(r.created_at) }}</span>
+                <span><span class="flow-tag">{{ pointTypeNames[r.type] || '其他' }}</span></span>
+                <span class="flow-remark" :title="r.remark">{{ r.remark }}</span>
+                <span class="num" :class="r.change_points >= 0 ? 'gain' : 'cost'">
+                  {{ r.change_points >= 0 ? '+' : '' }}{{ r.change_points }}
+                </span>
+                <span class="num text-dim">{{ r.balance }}</span>
+              </div>
+            </template>
+            <template #empty><span class="text-dim">暂无积分流水</span></template>
+          </VirtualList>
+        </div>
+      </div>
+    </div>
+    <!-- VIP调整弹窗 -->
+    <div v-if="vipTarget" class="modal-mask" @click.self="vipTarget = null">
+      <div class="modal panel">
+        <h3 style="margin-bottom: 4px">调整VIP</h3>
+        <p class="text-dim" style="font-size: 13px; margin-bottom: 14px">
+          {{ vipTarget.nickname }}（当前 {{ vipText(vipTarget) }}）
+        </p>
+        <label class="text-dim" style="font-size: 12px">VIP等级（0=取消VIP）</label>
+        <select v-model.number="vipLevel" class="input" style="margin: 6px 0 10px">
+          <option :value="0">0 - 非VIP</option>
+          <option v-for="n in 5" :key="n" :value="n">{{ n }} - VIP{{ n }}</option>
+        </select>
+        <label class="text-dim" style="font-size: 12px">增减天数（正加负减，设置新等级时默认已给30天）</label>
+        <input v-model.number="vipAddDays" type="number" class="input" placeholder="0" style="margin: 6px 0 14px" />
+        <div style="display: flex; gap: 10px">
+          <button class="btn" style="flex: 1" @click="doVip">确认更新</button>
+          <button class="btn btn-ghost" @click="vipTarget = null">取消</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 14px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.status-tabs {
+  display: flex;
+  gap: 6px;
+}
+.chip {
+  padding: 6px 14px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+}
+.chip:hover {
+  color: var(--text);
+  border-color: var(--primary);
+}
+.chip.on {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+  border-color: transparent;
+}
+.count {
+  font-size: 12px;
+  margin-left: auto;
+}
+.list-wrap {
+  padding: 6px 14px 12px;
+}
+.hscroll {
+  overflow-x: auto;
+}
+.tmin {
+  min-width: 950px;
+}
+/* 行式表格：表头与数据行共用同一 grid 模板，宽度天然对齐 */
+.urow {
+  display: grid;
+  grid-template-columns: 44px 1.6fr 54px 70px 78px 1.2fr 46px 126px 218px;
+  gap: 8px;
+  align-items: center;
+  height: 100%;
+  border-bottom: 1px dashed var(--border);
+  font-size: 13px;
+  padding: 0 2px;
+}
+.uhead {
+  height: 38px;
+  font-size: 12px;
+  border-bottom: 1px solid var(--border);
+}
+.c-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.c-avatar {
+  font-style: normal;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+.c-names {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: 1.3;
+}
+.c-names b {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.c-names small {
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tag-admin {
+  background: linear-gradient(135deg, #ffb800, #ff6a00);
+  color: #fff;
+  font-size: 11px;
+  padding: 1px 8px;
+  border-radius: 999px;
+}
+.st-ok {
+  color: #4ade80;
+}
+.st-ban {
+  color: #ff6b6b;
+}
+.vip-cell {
+  font-size: 12px;
+  color: var(--primary-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.vip-cell.dim {
+  color: var(--text-dim);
+}
+.time {
+  font-size: 11px;
+  white-space: nowrap;
+}
+.ops {
+  display: flex;
+  gap: 6px;
+}
+/* 操作列按钮较多，压紧内边距避免在像素字体主题下换行 */
+.ops .btn {
+  white-space: nowrap;
+  padding: 5px 8px;
+}
+.list-foot {
+  font-size: 12px;
+  text-align: center;
+  padding-top: 10px;
+}
+.balance {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+.modal-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+.modal {
+  width: min(360px, 90vw);
+  padding: 22px;
+}
+/* ---- 积分管理弹窗 ---- */
+.adjust-modal {
+  width: min(680px, 94vw);
+  position: relative;
+  max-height: 88vh;
+  overflow-y: auto;
+}
+.modal-close {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  border: 0;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 15px;
+  cursor: pointer;
+}
+.modal-close:hover {
+  color: var(--text);
+}
+.op-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.op-tab {
+  flex: 1;
+  padding: 8px 0;
+  border-radius: calc(var(--radius) / 1.5);
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+}
+.op-tab:hover {
+  color: var(--text);
+  border-color: var(--primary);
+}
+.op-tab.on {
+  background: linear-gradient(135deg, var(--primary), var(--primary-2));
+  color: #fff;
+  border-color: transparent;
+  font-weight: 700;
+}
+.op-hint {
+  font-size: 12px;
+  margin-bottom: 10px;
+}
+.adjust-form {
+  display: grid;
+  grid-template-columns: 130px 1fr auto;
+  gap: 8px;
+}
+.set-preview {
+  font-size: 12px;
+  margin-top: 8px;
+}
+.gain {
+  color: #4ade80;
+}
+.cost {
+  color: #ff6b6b;
+}
+.flow-title {
+  font-size: 14px;
+  margin: 16px 0 8px;
+}
+.flow-wrap {
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) / 1.5);
+  overflow: hidden;
+  padding: 0 10px 4px;
+}
+/* 流水行：5 列 grid */
+.frow {
+  display: grid;
+  grid-template-columns: 138px 84px 1fr 76px 70px;
+  gap: 8px;
+  align-items: center;
+  height: 100%;
+  font-size: 12px;
+  border-bottom: 1px dashed var(--border);
+}
+.fhead {
+  height: 32px;
+  font-size: 11px;
+  border-bottom: 1px solid var(--border);
+}
+.num {
+  text-align: right;
+}
+.flow-time {
+  white-space: nowrap;
+  font-size: 11px;
+}
+.flow-tag {
+  font-size: 11px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  white-space: nowrap;
+}
+.flow-remark {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@media (max-width: 560px) {
+  .adjust-form {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/views/admin/AdminVersion.vue b/src/views/admin/AdminVersion.vue
new file mode 100644
index 0000000..0298ce7
--- /dev/null
+++ b/src/views/admin/AdminVersion.vue
@@ -0,0 +1,228 @@
+<script setup>
+// 后台：桌面端版本管理 — 上传安装包（从文件名解析版本）、改更新说明、只保留最近 3 个包
+import { ref, onMounted, computed } from 'vue'
+import http, { toast, serverBase } from '../../api/http'
+import NavIcon from '../../components/NavIcon.vue'
+
+const data = ref(null)
+const notes = ref('')
+const force = ref(false)
+const saving = ref(false)
+const uploading = ref(false)
+const fileInput = ref(null)
+const pickedName = ref('')
+const progress = ref(0)
+
+const releases = computed(() => data.value?.releases || [])
+
+function fmtSize(n) {
+  if (!n && n !== 0) return '-'
+  if (n < 1024) return n + ' B'
+  if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB'
+  return (n / 1024 / 1024).toFixed(1) + ' MB'
+}
+
+function fmtTime(ts) {
+  if (!ts) return '-'
+  const d = new Date(ts * 1000)
+  const p = (x) => String(x).padStart(2, '0')
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
+}
+
+function absURL(u) {
+  if (!u) return ''
+  if (/^https?:\/\//i.test(u)) return u
+  const base = serverBase() || (typeof location !== 'undefined' ? location.origin : '')
+  return base.replace(/\/+$/, '') + (u.startsWith('/') ? u : '/' + u)
+}
+
+async function load() {
+  data.value = await http.get('/admin/version')
+  notes.value = data.value.release_notes || ''
+  force.value = Number(data.value.force) === 1
+}
+
+async function saveMeta() {
+  saving.value = true
+  try {
+    data.value = await http.put('/admin/version', {
+      release_notes: notes.value,
+      force: force.value ? 1 : 0,
+    })
+    toast('已保存', 'success')
+  } finally {
+    saving.value = false
+  }
+}
+
+function onPick(e) {
+  const f = e.target.files?.[0]
+  pickedName.value = f ? f.name : ''
+}
+
+async function upload() {
+  const f = fileInput.value?.files?.[0]
+  if (!f) {
+    toast('请先选择安装包')
+    return
+  }
+  uploading.value = true
+  progress.value = 0
+  try {
+    const fd = new FormData()
+    fd.append('file', f)
+    fd.append('release_notes', notes.value || '')
+    fd.append('force', force.value ? '1' : '0')
+    data.value = await http.post('/admin/version/upload', fd, {
+      timeout: 300000,
+      onUploadProgress: (ev) => {
+        if (ev.total) progress.value = Math.round((ev.loaded / ev.total) * 100)
+      },
+    })
+    notes.value = data.value.release_notes || ''
+    force.value = Number(data.value.force) === 1
+    pickedName.value = ''
+    if (fileInput.value) fileInput.value.value = ''
+    toast(`已发布 v${data.value.version}，自动保留最近 ${data.value.keep} 个包`, 'success')
+  } finally {
+    uploading.value = false
+    progress.value = 0
+  }
+}
+
+async function remove(item) {
+  if (!confirm(`确定删除 ${item.filename}？`)) return
+  data.value = await http.delete('/admin/version/' + encodeURIComponent(item.filename))
+  toast('已删除', 'success')
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div v-if="data">
+    <h2 class="page-title">桌面版本</h2>
+    <div class="panel intro">
+      <p>
+        上传 Electron 安装包（如 <code>PixelArcade-Setup-1.0.1.exe</code>），系统从<strong>文件名</strong>解析版本号，
+        写入公开接口 <code>/api/version/latest</code>，桌面端「检查更新」会引导下载。磁盘上<strong>只保留最近 {{ data.keep }} 个</strong>安装包。
+      </p>
+    </div>
+
+    <div class="panel cur">
+      <h3 class="sec-head"><NavIcon name="download" :size="16" /> 当前对外版本</h3>
+      <div class="cur-row">
+        <div class="kv"><span class="k">版本号</span><b class="v">{{ data.version || '-' }}</b></div>
+        <div class="kv grow">
+          <span class="k">下载地址</span>
+          <a v-if="data.download_url" class="v link" :href="absURL(data.download_url)" target="_blank" rel="noopener">{{ absURL(data.download_url) }}</a>
+          <span v-else class="v text-dim">尚未上传</span>
+        </div>
+      </div>
+      <label class="field">
+        <span>更新说明</span>
+        <textarea v-model="notes" rows="2" placeholder="一行简短文案，桌面端更新弹窗展示" />
+      </label>
+      <label class="force">
+        <input v-model="force" type="checkbox" />
+        强制更新（桌面端不允许跳过）
+      </label>
+      <div class="actions">
+        <button class="btn primary" :disabled="saving" @click="saveMeta">
+          <NavIcon name="save" :size="15" /> {{ saving ? '保存中…' : '保存说明' }}
+        </button>
+      </div>
+    </div>
+
+    <div class="panel upload">
+      <h3 class="sec-head"><NavIcon name="upload" :size="16" /> 上传安装包</h3>
+      <div class="pick">
+        <input ref="fileInput" type="file" accept=".exe,.msi,.dmg,.zip,.7z" @change="onPick" />
+        <span class="picked text-dim">{{ pickedName || '未选择文件' }}</span>
+      </div>
+      <div v-if="uploading" class="bar"><i :style="{ width: progress + '%' }" /></div>
+      <div class="actions">
+        <button class="btn primary" :disabled="uploading || !pickedName" @click="upload">
+          {{ uploading ? `上传中 ${progress}%` : '上传并发布' }}
+        </button>
+      </div>
+    </div>
+
+    <div class="panel list">
+      <h3 class="sec-head">已保留的安装包（{{ releases.length }} / {{ data.keep }}）</h3>
+      <table v-if="releases.length" class="tbl">
+        <thead>
+          <tr>
+            <th>版本</th>
+            <th>文件名</th>
+            <th>大小</th>
+            <th>上传时间</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="r in releases" :key="r.filename" :class="{ cur: r.is_current }">
+            <td>
+              <b>v{{ r.version || '?' }}</b>
+              <span v-if="r.is_current" class="badge">当前</span>
+            </td>
+            <td class="fn">
+              <a :href="absURL(r.url)" target="_blank" rel="noopener">{{ r.filename }}</a>
+            </td>
+            <td>{{ fmtSize(r.size) }}</td>
+            <td>{{ fmtTime(r.mod_time) }}</td>
+            <td class="ops">
+              <button class="btn ghost danger" @click="remove(r)">删除</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <p v-else class="text-dim empty">暂无安装包，请先上传。</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.intro { padding: 14px 16px; margin-bottom: 14px; line-height: 1.65; color: var(--text-dim); }
+.intro code { font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--bg-2, rgba(0,0,0,.06)); }
+.panel { padding: 16px; margin-bottom: 14px; }
+.sec-head { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 0 0 12px; }
+.cur-row { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-bottom: 12px; }
+.kv { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
+.kv.grow { flex: 1; min-width: 220px; }
+.k { font-size: 12px; color: var(--text-dim); }
+.v { font-size: 15px; word-break: break-all; }
+.link { color: var(--primary-2); text-decoration: none; }
+.link:hover { text-decoration: underline; }
+.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; font-size: 13px; }
+.field textarea {
+  resize: vertical; min-height: 56px; padding: 8px 10px; border-radius: 8px;
+  border: 1px solid var(--border); background: var(--bg, transparent); color: inherit; font: inherit;
+}
+.force { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; cursor: pointer; }
+.actions { display: flex; gap: 10px; }
+.btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  border: 0; border-radius: 8px; padding: 8px 16px; font-size: 13px; cursor: pointer;
+  background: var(--bg-2, #2a2e52); color: inherit;
+}
+.btn:disabled { opacity: .55; cursor: not-allowed; }
+.btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-2, var(--primary))); color: #fff; }
+.btn.ghost { background: transparent; border: 1px solid var(--border); }
+.btn.danger { color: #ff7b8a; }
+.pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
+.picked { font-size: 13px; }
+.bar { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; margin-bottom: 12px; }
+.bar i { display: block; height: 100%; background: var(--primary); transition: width .15s; }
+.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
+.tbl th, .tbl td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
+.tbl th { color: var(--text-dim); font-weight: 500; }
+.tbl tr.cur td { background: color-mix(in srgb, var(--primary) 8%, transparent); }
+.fn a { color: inherit; word-break: break-all; }
+.badge {
+  display: inline-block; margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: 99px;
+  background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary-2, var(--primary));
+}
+.ops { white-space: nowrap; }
+.empty { padding: 8px 0; }
+</style>
diff --git a/src/views/admin/AdminVip.vue b/src/views/admin/AdminVip.vue
new file mode 100644
index 0000000..40ce11b
--- /dev/null
+++ b/src/views/admin/AdminVip.vue
@@ -0,0 +1,100 @@
+<script setup>
+// 后台 VIP 设置：调整 5 个等级的价格、周免数量与签到加成
+import { ref, onMounted } from 'vue'
+import http, { toast } from '../../api/http'
+
+const list = ref([]) // 等级配置（本地可编辑副本）
+const saving = ref(0) // 正在保存的行 id
+
+async function load() {
+  list.value = await http.get('/admin/vip/levels')
+}
+
+// 保存单行配置
+async function save(row) {
+  if (row.price_points < 0 || row.weekly_free_quota < 0 || row.signin_bonus < 0) {
+    toast('数值不能为负')
+    return
+  }
+  saving.value = row.id
+  try {
+    await http.put(`/admin/vip/levels/${row.id}`, {
+      name: row.name,
+      price_points: Number(row.price_points),
+      weekly_free_quota: Number(row.weekly_free_quota),
+      signin_bonus: Number(row.signin_bonus),
+      description: row.description,
+    })
+    toast(`VIP${row.level} 配置已保存`, 'success')
+  } finally {
+    saving.value = 0
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div>
+    <h2 class="page-title">VIP 设置</h2>
+    <p class="text-dim intro">
+      周免规则：每周五中午 12:00 按「周期种子洗牌付费游戏」自动轮换一批周免，等级越高批次越大（高等级包含低等级全部周免）。
+      改动保存后立即生效，无需重启。
+    </p>
+    <div class="panel table-wrap">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>等级</th><th>名称</th><th>30天价格（积分）</th><th>周免数量（款/周）</th><th>签到加成（积分/日）</th><th>权益描述</th><th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in list" :key="row.id">
+            <td class="lv">{{ row.icon }} VIP{{ row.level }}</td>
+            <td><input v-model="row.name" class="input cell" maxlength="16" /></td>
+            <td><input v-model.number="row.price_points" type="number" min="0" class="input cell num" /></td>
+            <td><input v-model.number="row.weekly_free_quota" type="number" min="0" max="30" class="input cell num" /></td>
+            <td><input v-model.number="row.signin_bonus" type="number" min="0" class="input cell num" /></td>
+            <td><input v-model="row.description" class="input cell wide" maxlength="100" /></td>
+            <td>
+              <button class="btn btn-sm" :disabled="saving === row.id" @click="save(row)">
+                {{ saving === row.id ? '保存中…' : '保存' }}
+              </button>
+            </td>
+          </tr>
+          <tr v-if="!list.length">
+            <td colspan="7" class="text-dim" style="text-align: center; padding: 30px">
+              暂无数据（请先执行 sql/upgrade_vip_ai.sql 或最新 init.sql）
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.intro {
+  font-size: 12px;
+  margin-bottom: 14px;
+  line-height: 1.8;
+}
+.table-wrap {
+  padding: 6px 14px 14px;
+  overflow-x: auto;
+}
+.lv {
+  font-weight: 700;
+  white-space: nowrap;
+}
+.cell {
+  padding: 6px 8px;
+  font-size: 13px;
+}
+.num {
+  width: 90px;
+}
+.wide {
+  min-width: 220px;
+}
+</style>
diff --git a/starve2-boss.png b/starve2-boss.png
new file mode 100644
index 0000000..16e623d
Binary files /dev/null and b/starve2-boss.png differ
diff --git a/starve2-continue.png b/starve2-continue.png
new file mode 100644
index 0000000..27e1239
Binary files /dev/null and b/starve2-continue.png differ
diff --git a/starve2-craft.png b/starve2-craft.png
new file mode 100644
index 0000000..f0f3ad4
Binary files /dev/null and b/starve2-craft.png differ
diff --git a/starve2-day.png b/starve2-day.png
new file mode 100644
index 0000000..579622e
Binary files /dev/null and b/starve2-day.png differ
diff --git a/starve2-hound.png b/starve2-hound.png
new file mode 100644
index 0000000..077332c
Binary files /dev/null and b/starve2-hound.png differ
diff --git a/starve2-night.png b/starve2-night.png
new file mode 100644
index 0000000..4fc30e0
Binary files /dev/null and b/starve2-night.png differ
diff --git a/starve2-restored.png b/starve2-restored.png
new file mode 100644
index 0000000..74d0816
Binary files /dev/null and b/starve2-restored.png differ
diff --git a/starve2-spider.png b/starve2-spider.png
new file mode 100644
index 0000000..bb59f19
Binary files /dev/null and b/starve2-spider.png differ
diff --git a/test-starve.mjs b/test-starve.mjs
new file mode 100644
index 0000000..387dcb6
--- /dev/null
+++ b/test-starve.mjs
@@ -0,0 +1,181 @@
+// 临时冒烟测试：纯逻辑模块（不触 DOM）——世界生成 / 季节 / 烹饪锅 / 数据表一致性 / mod 注册表
+import { genIsland, planEntities, isLand, biomeAt, WORLD, GW, GH, findLandNear } from './src/games/starve/world.js'
+import { seasonOf, daySplit, phaseOf, ambientTemp, rollWeather } from './src/games/starve/climate.js'
+import { cookPot, RECIPES, ITEMS, MON, MOB_DROPS, RES, SEG_SPLIT, SEASONS } from './src/games/starve/data.js'
+import { activateMods, modMeta, callAllows, callHandled } from './src/games/starve/mods/registry.js'
+import { MODS } from './src/games/starve/mods/index.js'
+
+let fails = 0
+function ok(cond, msg) {
+  if (cond) console.log('  PASS', msg)
+  else { fails++; console.error('  FAIL', msg) }
+}
+
+console.log('== 世界生成 ==')
+for (let run = 0; run < 5; run++) {
+  const { tiles, road } = genIsland()
+  const landN = tiles.reduce((n, v) => n + (v > 0 ? 1 : 0), 0)
+  ok(landN > 300 && landN < 1000, `岛屿陆地占比合理 (${landN}/1200)`)
+  ok(isLand(tiles, WORLD.w / 2, WORLD.h / 2), '出生点在陆地上')
+  const biomes = new Set(Array.from(tiles).filter(Boolean))
+  ok(biomes.size >= 5, `群系种类 >=5 (${[...biomes].join(',')})`)
+  const roadN = road.reduce((a, b) => a + b, 0)
+  ok(roadN > 10, `道路瓦片存在 (${roadN})`)
+  const plan = planEntities(tiles, road)
+  const count = (t) => plan.placed.filter((p) => p.type === t).length
+  ok(count('tree') > 20, `树数量 (${count('tree')})`)
+  ok(count('spidernest') >= 2, `蜘蛛巢 >=2 (${count('spidernest')})`)
+  ok(count('beehive') >= 2, `蜂巢 >=2 (${count('beehive')})`)
+  ok(count('goldrock') >= 4, `金矿 >=4 (${count('goldrock')})`)
+  ok(count('rabbithole') >= 5, `兔子洞 >=5 (${count('rabbithole')})`)
+  ok(count('tentacle') >= 4, `触手 >=4 (${count('tentacle')})`)
+  ok(count('pighouse') >= 3, `猪屋 >=3 (${count('pighouse')})`)
+  ok(plan.herds.length >= 1, `牛群锚点 (${plan.herds.length})`)
+  ok(plan.frogs.length >= 4, `青蛙出生点 (${plan.frogs.length})`)
+  // 所有放置点都在陆地
+  const offLand = plan.placed.filter((p) => !isLand(tiles, p.x, p.y)).length
+  ok(offLand === 0, `没有实体落在海里 (${offLand})`)
+  // 最小间距抽查
+  let overlaps = 0
+  for (let i = 0; i < plan.placed.length; i++) {
+    for (let j = i + 1; j < plan.placed.length; j++) {
+      const a = plan.placed[i]
+      const b = plan.placed[j]
+      if (Math.hypot(a.x - b.x, a.y - b.y) < 24) overlaps++
+    }
+  }
+  ok(overlaps === 0, `实体间距无重叠 (${overlaps})`)
+  const spot = findLandNear(tiles, WORLD.w / 2, WORLD.h / 2, 400, 600)
+  ok(isLand(tiles, spot.x, spot.y), 'findLandNear 返回陆地')
+}
+
+console.log('== 季节与昼夜 ==')
+ok(seasonOf(1).code === 'autumn' && seasonOf(1).dayIn === 1, '第 1 天 = 秋 1')
+ok(seasonOf(20).code === 'autumn', '第 20 天仍是秋')
+ok(seasonOf(21).code === 'winter' && seasonOf(21).dayIn === 1, '第 21 天入冬（官方节奏）')
+ok(seasonOf(36).code === 'spring', '第 36 天入春')
+ok(seasonOf(56).code === 'summer', '第 56 天入夏')
+ok(seasonOf(71).code === 'autumn' && seasonOf(71).dayIn === 1, '第 71 天新一年秋')
+Object.entries(SEG_SPLIT).forEach(([code, [d, k, n]]) => {
+  ok(d + k + n === 16, `${code} 段数合计 16`)
+})
+const [duskAt, nightAt] = daySplit('winter')
+ok(duskAt === 50 && nightAt === 90, `冬季昼 50s / 夜起 90s (${duskAt},${nightAt})`)
+ok(phaseOf('winter', 100) === 'night', '冬季 100s 是夜')
+ok(phaseOf('summer', 100) === 'day', '夏季 100s 是昼')
+ok(ambientTemp('winter', 'night') < -15, `冬夜气温 ${ambientTemp('winter', 'night')}`)
+ok(rollWeather('winter').type === 'snow', '冬季必然飘雪')
+
+console.log('== 烹饪锅 ==')
+ok(cookPot(['meat', 'meat', 'meat', 'berry']) === 'meatystew', '3 大肉 = 炖肉汤')
+ok(cookPot(['morsel', 'berry', 'berry', 'berry']) === 'meatballs', '小肉+果 = 肉丸')
+ok(cookPot(['meat', 'meat', 'honey', 'berry']) === 'honeyham', '2 肉 1 蜜 = 蜜汁火腿')
+ok(cookPot(['morsel', 'honey', 'berry', 'berry']) === 'honeynuggets', '半肉 1 蜜 = 蜜糖块')
+ok(cookPot(['honey', 'honey', 'honey', 'berry']) === 'taffy', '3 蜜 = 太妃糖')
+ok(cookPot(['monstermeat', 'monstermeat', 'berry', 'berry']) === 'monsterlasagna', '2 怪物肉 = 千层饼')
+ok(cookPot(['berry', 'berry', 'berry', 'berry']) === 'wetgoop', '全果 = 湿哒哒糊糊')
+
+console.log('== 数据表一致性 ==')
+RECIPES.forEach((r) => {
+  Object.keys(r.cost).forEach((c) => ok(!!ITEMS[c], `配方 ${r.code} 材料 ${c} 存在`))
+  const isStruct = ['campfire', 'firepit', 'sciencemachine', 'alchemyengine', 'crockpot'].includes(r.code)
+  ok(isStruct || !!ITEMS[r.code], `配方产物 ${r.code} 在物品表或建筑`)
+})
+Object.entries(MOB_DROPS).forEach(([kind, drops]) => {
+  ok(!!MON[kind], `掉落表生物 ${kind} 存在`)
+  drops.forEach(([p, code]) => ok(!!ITEMS[code], `${kind} 掉落 ${code} 存在`))
+})
+Object.entries(RES).forEach(([type, conf]) => {
+  if (conf.drops) Object.keys(conf.drops).forEach((c) => ok(!!ITEMS[c], `资源 ${type} 产出 ${c} 存在`))
+})
+ok(SEASONS.reduce((n, s) => n + s.days, 0) === 70, '一年 70 天')
+
+console.log('== Mod 注册表 ==')
+ok(MODS.length === 8, `内置 8 个 mod (${MODS.length})`)
+ok(modMeta().every((m) => m.id && m.name && m.desc), '元数据齐全')
+// 空激活 = 基表原样
+const rt0 = activateMods([])
+ok(rt0.scoreFactor === 1, '无 mod 系数 1')
+ok(Object.keys(rt0.items).length === Object.keys(ITEMS).length, '无 mod 物品表与基表一致')
+ok(rt0.recipes.length === RECIPES.length, '无 mod 配方表与基表一致')
+// 全量激活
+const allIds = MODS.map((m) => m.id)
+const rt = activateMods(allIds)
+ok(rt.ids.length === 8, '全量激活 8 个')
+// 系数：0.7(便利包) * 0.7(和平) * 1.3(噩梦) = 0.637 → 0.64；夹在 0.5~1.5
+ok(rt.scoreFactor === 0.64, `全开系数 0.64 (${rt.scoreFactor})`)
+ok(activateMods(['qol']).scoreFactor === 0.7, '便利包 0.7')
+ok(activateMods(['nightmare']).scoreFactor === 1.3, '噩梦 1.3')
+ok(activateMods(['farm', 'chest', 'chester', 'revive', 'magic']).scoreFactor === 1, '内容 mod 不影响系数')
+ok(activateMods(['qol', 'peaceful']).scoreFactor === 0.5, '0.49 夹到下限 0.5')
+// 配方一致性：材料与产物都能解析
+rt.recipes.forEach((r) => {
+  Object.keys(r.cost).forEach((c) => ok(!!rt.items[c], `mod 配方 ${r.code} 材料 ${c} 存在`))
+  const isStruct = ['campfire', 'firepit', 'sciencemachine', 'alchemyengine', 'crockpot'].includes(r.code) || r.build
+  ok(isStruct ? !!rt.res[r.code] || !!rt.entKinds[r.code] || !rt.items[r.code] : !!rt.items[r.code], `mod 配方产物 ${r.code} 可解析`)
+})
+// 注册内容点名
+ok(['farmplot', 'chest', 'revivestatue', 'flamefx', 'boomerang'].every((t) => rt.entKinds[t] && rt.res[t]), '自定义实体齐全')
+ok(rt.mobKinds.chester && rt.mon.chester?.name === '切斯特', '切斯特生物注册')
+ok(rt.items.hoe && rt.items.eyebone && rt.items.firestaff && rt.items.boomerang && rt.items.carrot, 'mod 物品齐全')
+ok(rt.itemCodes.length === Object.keys(rt.items).length && rt.itemCodes.every((c, i) => rt.itemIdx[c] === i), '物品索引一致（联机打包用）')
+// 调参与旗标
+ok(rt.tune.stackMax === 99 && rt.tune.gatherMul === 0.5, '便利包调参生效')
+ok(rt.tune.houndGapMul === 0.7 && rt.tune.houndExtra === 1, '噩梦猎犬调参生效')
+ok(rt.flags.noFog === true, '无迷雾旗标')
+// 噩梦倍率只改运行时表，不污染基表
+ok(rt.mon.spider.hp === 150 && rt.mon.spider.dmg === 30, `噩梦蜘蛛 150/30 (${rt.mon.spider.hp}/${rt.mon.spider.dmg})`)
+ok(MON.spider.hp === 100 && MON.spider.dmg === 20, '基表蜘蛛不受污染')
+ok(activateMods(['farm']).mon.spider.hp === 100, '不开噩梦不缩放')
+// 合并顺序确定性（主客机一致）
+ok(JSON.stringify(activateMods([...allIds].reverse()).itemCodes) === JSON.stringify(rt.itemCodes), '激活顺序无关，物品索引确定')
+// 钩子语义
+ok(callAllows(rt, 'onSpawnWave', {}, 'hound') === false, '和平模式否决猎犬波')
+ok(callAllows(activateMods(['farm']), 'onSpawnWave', {}, 'hound') === true, '无和平模式放行')
+// 行为级：农田三阶段生长（纯函数拨表）
+{
+  const plot = { state: 'grow0', mx: { seed: 'carrot', t: 0 }, id: 1 }
+  const g = { season: 'autumn', markDirty() {}, tip() {} }
+  const farm = rt.entKinds.farmplot
+  farm.update(plot, 108, g)
+  ok(plot.state === 'grow1', `农田 108s 二阶段 (${plot.state})`)
+  farm.update(plot, 107, g)
+  ok(plot.state === 'grow2', `农田 215s 三阶段 (${plot.state})`)
+  farm.update(plot, 200, g)
+  ok(plot.state === 'ready', `农田 320s 成熟 (${plot.state})`)
+  const winterPlot = { state: 'grow0', mx: { seed: 'berry', t: 0 }, id: 2 }
+  farm.update(winterPlot, 500, { ...g, season: 'winter' })
+  ok(winterPlot.state === 'grow0' && winterPlot.mx.t === 0, '冬季生长暂停')
+}
+// 行为级：宝箱开箱按战利品表发放
+{
+  const got = []
+  const g = {
+    rand: (a, b) => a, addItem: (p, c, n) => got.push([c, n]), items: rt.items,
+    markDirty() {}, swing() {}, addScore() {}, ptip() {}, shake() {},
+  }
+  const box = { state: 'closed', id: 3 }
+  rt.entKinds.chest.interact({}, box, g)
+  ok(box.state === 'open' && got.length >= 2, `开箱得 ${got.length} 样`)
+  ok(got.every(([c]) => !!rt.items[c]), '战利品都在物品表内')
+  got.length = 0
+  rt.entKinds.chest.interact({}, box, g)
+  ok(got.length === 0, '空箱不再出货')
+}
+// 行为级：复活雕像拦截死亡并消耗
+{
+  const statue = { type: 'revivestatue', id: 9 }
+  const world = { entities: [statue] }
+  const g = {
+    get entities() { return world.entities },
+    removeEntity: (e) => { world.entities = world.entities.filter((x) => x !== e) },
+    ptip() {}, tip() {}, shake() {},
+  }
+  const p = { hp: 0, hunger: 3, san: 5, temp: -2, name: '测试' }
+  ok(callHandled(rt, 'onPlayerDeath', g, p) === true, '复活雕像拦截死亡')
+  ok(p.hp === 75 && world.entities.length === 0, `复活半血且雕像消耗 (hp=${p.hp})`)
+  ok(callHandled(rt, 'onPlayerDeath', g, p) === false, '没有雕像不再拦截')
+}
+
+console.log(fails ? `\n${fails} 项失败` : '\n全部通过')
+process.exit(fails ? 1 : 0)
diff --git a/theme-admin-list.png b/theme-admin-list.png
new file mode 100644
index 0000000..0fa7ca9
Binary files /dev/null and b/theme-admin-list.png differ
diff --git a/theme-ocean-center.png b/theme-ocean-center.png
new file mode 100644
index 0000000..7a0a7ac
Binary files /dev/null and b/theme-ocean-center.png differ
diff --git a/theme-ocean-lobby.png b/theme-ocean-lobby.png
new file mode 100644
index 0000000..f55114a
Binary files /dev/null and b/theme-ocean-lobby.png differ
diff --git a/theme-sakura-center.png b/theme-sakura-center.png
new file mode 100644
index 0000000..bcf3173
Binary files /dev/null and b/theme-sakura-center.png differ
diff --git a/theme-sakura-lobby.png b/theme-sakura-lobby.png
new file mode 100644
index 0000000..2672848
Binary files /dev/null and b/theme-sakura-lobby.png differ
diff --git a/theme-space-center.png b/theme-space-center.png
new file mode 100644
index 0000000..756627d
Binary files /dev/null and b/theme-space-center.png differ
diff --git a/theme-space-lobby.png b/theme-space-lobby.png
new file mode 100644
index 0000000..91e57c0
Binary files /dev/null and b/theme-space-lobby.png differ
diff --git a/theme-steampunk-center.png b/theme-steampunk-center.png
new file mode 100644
index 0000000..5e9c034
Binary files /dev/null and b/theme-steampunk-center.png differ
diff --git a/theme-steampunk-lobby.png b/theme-steampunk-lobby.png
new file mode 100644
index 0000000..94ff597
Binary files /dev/null and b/theme-steampunk-lobby.png differ
diff --git a/theme-terminal-center.png b/theme-terminal-center.png
new file mode 100644
index 0000000..8eb4398
Binary files /dev/null and b/theme-terminal-center.png differ
diff --git a/theme-terminal-lobby.png b/theme-terminal-lobby.png
new file mode 100644
index 0000000..3437dfd
Binary files /dev/null and b/theme-terminal-lobby.png differ
diff --git a/vite.config.js b/vite.config.js
index df31b24..091ba83 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,28 +1,16 @@
-import {defineConfig} from 'vite'
+// Vite 构建配置：Vue 插件 + 开发代理（API 与 WebSocket 转发到 Gin 后端 8080）
+import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import tailwindcss from "@tailwindcss/vite"
-import path from 'path'
 
-// https://vite.dev/config/
 export default defineConfig({
-    plugins: [
-        vue(),
-        tailwindcss()
-    ],
-    resolve: {
-        alias: {
-            '@': path.resolve(__dirname, './src')
-        }
+  plugins: [vue()],
+  server: {
+    port: 5173,
+    proxy: {
+      // REST 接口代理
+      '/api': { target: 'http://127.0.0.1:8080', changeOrigin: true },
+      // WebSocket 对战代理
+      '/ws': { target: 'ws://127.0.0.1:8080', ws: true },
     },
-    server: {
-        port: 8888,
-        proxy: {
-            '/api': {
-                // target: 'http://127.0.0.1:18007/api/',
-                target: 'http://127.0.0.1:18001/api/',
-                changeOrigin: true,
-                rewrite: (path) => path.replace(/^\/api/, '')
-            }
-        }
-    }
+  },
 })