/* ===== 天龙八部 · 天佛降世 —— 视觉系统 =====
   风格基准：《放置江湖》文字 MUD 页
   · 平滑黑体，靠字号 / 字重分层次，不用颜色分层次
   · 纯色哑光深棕底，无纹理、无噪点、无渐变光晕
   · 圆角矩形控件，两套规范：主控件（导航/出口/物件）＋ 快捷控件（右侧常驻）
   · 选中态 = 整块金色填充
   · 日志单色纯文本，宽松行高
*/

:root{
  --bg:#1a1411;
  --panel:#221b16;
  --panel2:#2a221b;
  --line:rgba(236,229,216,.10);
  --line2:rgba(236,229,216,.22);
  --t1:#ece5d8;
  --t2:#b0a594;
  --t3:#7b7064;
  --gold:#c9a45c;
  --gold2:#e0c082;
  --ink:#241a0c;
  --r:10px;
  --r-sm:8px;
  --r-lg:12px;
  --shadow:0 18px 48px rgba(0,0,0,.46);
  --sans:"PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,sans-serif;
}
body.light{
  --bg:#f2ece0;
  --panel:#faf5ea;
  --panel2:#f4ecdd;
  --line:rgba(60,50,38,.14);
  --line2:rgba(60,50,38,.26);
  --t1:#2a241d;
  --t2:#6b6055;
  --t3:#91867a;
  --gold:#a8843f;
  --gold2:#8d6a2f;
  --ink:#fdf9f1;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--t1);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.8;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font-family:inherit}

#app{height:100%;height:100dvh;display:flex;flex-direction:column}
body.booting #stage{opacity:.2}

/* ---------- 顶部导航 ---------- */
#topbar{
  flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:11px max(20px, calc((100vw - 720px) / 2));
  border-bottom:1px solid var(--line);
}
.navbtn{
  font-size:14px;font-weight:500;letter-spacing:.12em;
  padding:7px 18px;border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--t2);transition:color .15s,border-color .15s,background .15s;
}
.navbtn:hover{color:var(--t1);border-color:var(--line2);background:var(--panel)}
.navbtn:active{background:var(--panel2)}
.navbtn:first-child{justify-self:start}
.navbtn:last-child{justify-self:end}
#roomName{
  font-size:19px;font-weight:600;letter-spacing:.18em;color:var(--t1);
  white-space:nowrap;text-align:center;
}

/* ---------- 舞台：主列 + 右侧快捷 ---------- */
#stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
/* 场景区必须是真正的 flex 子项：父层若用 block，.scene 的 overflow-y:auto 就拿不到
   高度约束，内容会溢出到日志层下面——手机上表现为日志盖住「这里有」按钮。 */
.stage-wrap{
  flex:1 1 auto;min-height:0;width:min(760px,100%);margin:0 auto;
  display:flex;flex-direction:column;padding:0 20px;
}
.scene{
  flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
  padding:26px 0 20px;
}
.scene::-webkit-scrollbar,.log::-webkit-scrollbar{width:8px}
.scene::-webkit-scrollbar-thumb,.log::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}

/* 场景描述：宽行距、大留白 */
.scene-desc{
  font-size:15px;line-height:2.1;letter-spacing:.02em;font-weight:400;
  color:var(--t1);white-space:pre-wrap;max-width:720px;
  min-height:calc(2.1em * 2);
}

/* 模块：之间用大面积留白隔开 */
.mods{
  display:flex;flex-direction:column;gap:30px;margin-top:30px;max-width:720px;
  --cw:calc(min(720px,100%) / 3);
  --ch:clamp(58px,8.5vh,88px);
}
.mod-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:14px;
}
.mod-head h2{font-size:13px;font-weight:600;letter-spacing:.22em;color:var(--t2)}
.link{
  font-size:13px;font-weight:400;letter-spacing:.04em;color:var(--t3);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:.15s;
}
.link:hover{color:var(--t1);border-bottom-color:var(--line2)}

/* ---------- 出口图（固定 3×3 画框） ---------- */
.localmap{
  position:relative;
  width:calc(var(--cw) * 3);
  height:calc(var(--ch) * 3);
  margin:0 auto;
}
.lmlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.lmlines line{stroke:var(--line2);stroke-width:1}

/* 主控件：出口 / 物件 / 导航同族 */
.lmnode{
  position:absolute;transform:translate(-50%,-50%);
  width:calc(var(--cw) - 26px);
  height:clamp(38px, calc(var(--ch) - 20px), 60px);
  display:flex;align-items:center;justify-content:center;
  padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  font-size:15px;font-weight:500;letter-spacing:.06em;color:var(--t1);
  transition:border-color .15s,background .15s,color .15s;
}
.lmnode:hover{border-color:var(--line2);background:var(--panel2);color:var(--t1)}
.lmnode:active{background:var(--bg)}
/* 选中态：整块金色填充 */
.lmnode.here{
  background:var(--gold);border-color:var(--gold);color:var(--ink);
  font-weight:600;cursor:default;
}
body.light .lmnode.here{background:var(--gold);border-color:var(--gold);color:#fffdf6}
.extra{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}

/* 这里有：等宽网格，同一套主控件 */
.here-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:12px;min-height:56px;
}
.chip{
  height:clamp(38px, calc(var(--ch) - 20px), 60px);width:100%;display:flex;align-items:center;justify-content:center;
  padding:0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  font-size:15px;font-weight:500;letter-spacing:.06em;color:var(--t1);
  transition:border-color .15s,background .15s;
}
.chip:hover{border-color:var(--line2);background:var(--panel2)}
.chip:active{background:var(--bg)}
.chip.hostile{color:#c07a70}
.empty{font-size:13px;color:var(--t3)}
.is-empty{visibility:hidden}

/* ---------- 日志：单色纯文本 ---------- */
.logwrap{
  flex:0 0 auto;height:clamp(132px,20vh,200px);
  border-top:1px solid var(--line);background:var(--panel);
}
.log{
  height:100%;overflow-y:auto;
  width:min(760px,100%);margin:0 auto;
  padding:18px 20px;
}
.log-inner{display:flex;flex-direction:column}
.ln{
  font-size:13.5px;line-height:2.05;letter-spacing:.02em;color:var(--t2);
  white-space:pre-wrap;word-break:break-word;margin-bottom:2px;
}
.ln.sys,.ln.cmd{font-size:12.5px;color:var(--t3)}
.ln.cmd::before{content:"› ";color:var(--t3)}
.ln.title{
  font-size:15px;font-weight:600;color:var(--t1);letter-spacing:.16em;
  text-align:center;margin:12px 0;
}
.ln.quest,.ln.hit{color:var(--t1)}
.ln.dim{color:var(--t3)}

/* ============================================================
   战斗表现层 · 实机拆帧（battle-ui 写作用域）
   舞台背景/人物/刀光全部由 canvas（TL.battleScene）绘制；
   本段只负责 HUD、战斗条、飘字/横幅、剧情杀分镜、结算、低血警示与响应式。
   ============================================================ */

/* ---------- 战斗态整页：舞台 → 日志 → 战斗条（竖排三段，整屏 #07080b） ----------
   只在 #stage.battle-mode 下生效，探索界面（无 battle-mode）保持原布局。 */
#stage.battle-mode{overflow:hidden;background:#07080b}
#stage.battle-mode .stage-wrap{
  order:0;flex:0 0 auto;width:100%;padding:0;margin:0 auto;
  display:flex;flex-direction:column;
}
#stage.battle-mode .scene.fighting{
  flex:0 0 auto;padding:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;
}
#stage.battle-mode #logwrap{order:1}
/* 战斗条贴视口底：日志吃满剩余高度；万一日志有上限，auto 上边距兜底不悬空 */
#stage.battle-mode #combatbar{order:2;margin:auto auto 0}

/* 支持 :has 的浏览器里顶栏也压成战斗黑（旧浏览器忽略这条，探索界面不受影响） */
body:has(#stage.battle-mode) #topbar{background:#07080b;border-bottom-color:rgba(228,214,190,.07)}
body:has(#stage.battle-mode) #roomName{color:#e6dfd2}
body:has(#stage.battle-mode) .navbtn{color:#a49a8b;border-color:rgba(228,214,190,.14)}

/* ---------- 战斗条：第一行 普攻 + 主动技（三列），第二行 恢复/自动/逃（三列） ---------- */
#stage.battle-mode .combatbar{
  flex:0 0 auto;width:min(1120px,100%);padding:8px 16px 14px;
  display:flex;flex-direction:column;gap:8px;align-items:stretch;
  border-top:0;background:#07080b;
}
#stage.battle-mode .cb-skills{
  /* 单行自适应：普攻 + 最多 4 门主动技（共 5 个）也排成一行；只有 1~2 门时自动变宽，
     与参考图「一排三招」同构。窄屏在下面的媒体查询里退回三列网格。 */
  display:flex;flex-wrap:nowrap;gap:8px;
  flex:0 0 auto;width:100%;max-width:none;min-width:0;
}
#stage.battle-mode .cb-skills > .skbtn{flex:1 1 0;min-width:0}
#stage.battle-mode .cb-skills > .cb-empty{flex:2 1 0;min-width:0}
#stage.battle-mode .cb-acts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  flex:0 0 auto;width:100%;align-items:stretch;
}
.skbtn{
  position:relative;overflow:hidden;height:54px;min-width:0;padding:0 14px;
  border:1px solid rgba(228,214,190,.18);border-radius:9px;
  background:linear-gradient(180deg,rgba(40,32,24,.9),rgba(20,16,12,.92));
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:9px;
  transition:border-color .15s,background .15s,color .15s,opacity .2s;color:var(--t1);
  box-shadow:inset 0 1px 0 rgba(255,240,210,.05);
}
.skbtn .sk-ico{
  flex:0 0 auto;font-size:11.5px;line-height:1;font-style:normal;letter-spacing:.1em;
  color:var(--gold2);border:1px solid rgba(201,164,92,.5);border-radius:3px;
  padding:1px 4px;margin-bottom:0;
}
.skbtn .sk-txt{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.skbtn .sk-nm{
  font-size:14px;font-weight:500;letter-spacing:.05em;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.skbtn .sk-sub{font-size:10.5px;font-weight:400;color:var(--t3);letter-spacing:.03em}
.skbtn .cdring{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s}
.skbtn .cdring.on{opacity:1}
.skbtn .sk-cd{
  position:absolute;right:6px;top:3px;font-size:11px;font-weight:600;
  color:var(--gold2);letter-spacing:.02em;pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.65);
}
.skbtn:hover:not(:disabled){border-color:rgba(228,214,190,.42);background:linear-gradient(180deg,rgba(54,43,31,.95),rgba(26,21,15,.95))}
.skbtn:active:not(:disabled){background:var(--bg)}
.skbtn:disabled{opacity:.4;cursor:not-allowed}
.skbtn.cooling .sk-nm{color:var(--t2)}
.skbtn.nomp .sk-sub{color:#c07a70}
.skbtn.rel{border-color:rgba(201,164,92,.55)}
.skbtn.rel .sk-nm{color:var(--gold2)}
.skbtn.wait .cdring{opacity:1}
/* 没有主动技时：占第 2-3 列，与普攻同一行的紧凑提示，不单独占一行 */
.cb-skills > .cb-empty{
  grid-column:2/-1;display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:12px;padding:0 10px;min-width:0;
  border:1px dashed rgba(228,214,190,.12);border-radius:9px;
}
.cb-skills > .cb-empty .cb-state{flex:0 0 auto}
.cb-skills > .cb-empty .cb-tip{flex:1 1 auto;min-width:0;font-size:11px}
.skbtn.basic{border-color:rgba(228,214,190,.22)}
.skbtn.basic .sk-ico{color:var(--t2);border-color:rgba(228,214,190,.34)}
.skbtn.basic .sk-nm{color:var(--t1);letter-spacing:.08em}
.cb-state{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t2);letter-spacing:.06em}
.cb-state .dot{
  width:5px;height:5px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 3px rgba(201,164,92,.14);animation:cbDot 1.6s ease-in-out infinite;
}
.cb-tip{font-size:10.5px;color:var(--t3);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes cbDot{0%,100%{opacity:.45}50%{opacity:1}}

.act{
  font-size:13px;font-weight:500;padding:8px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--t2);
  background:transparent;transition:.15s;
}
.act:hover{color:var(--t1);border-color:var(--line2);background:var(--panel)}
.combatbar .act{height:54px;font-size:15px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 14px;white-space:nowrap}
/* 结算 / 分镜：只做视觉隐身，绝不改高度——高度一变，上面的舞台就会重排缩放 */
.combatbar.done{opacity:.16;pointer-events:none;filter:grayscale(.6)}
.combatbar.off{visibility:hidden;pointer-events:none}
.act.primary{color:var(--ink);background:var(--gold);border-color:var(--gold);font-weight:600}
.act.primary:hover{background:var(--gold2);border-color:var(--gold2);color:var(--ink)}
.act:disabled{opacity:.35;cursor:not-allowed}
.price{color:var(--t2);font-size:12px}

/* ---------- 战斗容器：宽扁无卡片的沉浸舞台 ---------- */
.battle{
  position:relative;flex:0 0 auto;width:min(1120px,100%);
  height:clamp(320px,44vh,420px);max-height:none;
  margin:0 auto;display:flex;flex-direction:column;
  overflow:hidden;background:#07080b;
  border:0;border-radius:0;box-shadow:none;
  --hp:#a83a30;--hp2:#d76a58;--mpc:#4f8f9a;--mpc2:#7cc0c8;--cap:#3a332c;
  --dmgblue:#8fb9da;--buffpos:#6a9e63;--buffneg:#b0554a;
}
.battle.enter .bt-stage{animation:stageIn .5s ease-out both}
@keyframes stageIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
/* 战斗期压缩场景内边距（46px→10px）：把高度让给舞台，且整场高度恒定 */
.scene.fighting{justify-content:flex-start;overflow:hidden;padding:10px 0 0}
.scene.fighting .scene-desc{display:none}
.scene.fighting .mods{display:none}

/* ---------- HUD：绝对定位叠在舞台顶部，玩家靠左 / 敌人靠右 / 中间回合胶囊 ---------- */
.bt-hud{
  position:absolute;left:0;right:0;top:0;z-index:4;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;padding:12px 18px 30px;
  max-width:none;width:100%;margin:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,5,8,.9),rgba(4,5,8,.5) 52%,rgba(4,5,8,0));
}
.bt-hud-side{display:flex;flex-direction:column;gap:7px;min-width:0;flex:0 1 280px;align-items:flex-start}
.bt-hud-side.foe{align-items:flex-end}
.bt-hud-side.n1{flex:0 1 280px}
.bt-hud-side.n2{flex:0 1 250px}
.bt-hud-side.n3{flex:0 1 214px}
.bt-hud-side.n4{flex:0 1 186px}
.bt-hud-side.n5{flex:0 1 164px}
/* 3 个以上同侧单位：卡片压成紧凑行，给舞台留高度 */
.bt-hud-side.n3 .bt-unit,.bt-hud-side.n4 .bt-unit,.bt-hud-side.n5 .bt-unit{padding:3px 6px}
.bt-hud-side.n3 .u-mp,.bt-hud-side.n4 .u-mp,.bt-hud-side.n5 .u-mp,
.bt-hud-side.n3 .u-buffs,.bt-hud-side.n4 .u-buffs,.bt-hud-side.n5 .u-buffs,
.bt-hud-side.n3 .u-gauge,.bt-hud-side.n4 .u-gauge,.bt-hud-side.n5 .u-gauge{display:none}
.bt-hud-side.n3 .u-name,.bt-hud-side.n4 .u-name,.bt-hud-side.n5 .u-name{font-size:11px}
.bt-hud-side.n3 .u-hp,.bt-hud-side.n4 .u-hp,.bt-hud-side.n5 .u-hp{height:5px}
.bt-hud-mid{
  position:absolute;left:50%;top:12px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;
}
.bt-hud-mid b{font-size:11px;color:var(--gold2);letter-spacing:.22em;font-weight:500;white-space:nowrap}
.bt-hud-mid.scripted b{color:#d96a52}
.bt-round{font:10.5px/1.4 Consolas,monospace;color:var(--t3);letter-spacing:.08em}
/* 回合阶段：回气中 / 起手 / 交手中 / 收势 / 你的回合 / 结算 */
.bt-phase{
  font-size:10px;line-height:1.5;letter-spacing:.16em;color:var(--t3);
  padding:1px 7px;border:1px solid rgba(228,214,190,.14);border-radius:9px;
  white-space:nowrap;transition:color .18s,border-color .18s,background .18s;
}
.bt-phase.ready{color:var(--gold2);border-color:rgba(201,164,92,.32)}
.bt-phase.act{color:#e0b48a;border-color:rgba(201,164,92,.22)}
.bt-phase.settle{color:var(--t3)}
.bt-phase.ending{color:#d88c7c;border-color:rgba(168,58,48,.35)}
.bt-phase.await,.bt-phase.mine{
  color:#1c1408;font-weight:600;border-color:#f0cd8a;
  background:linear-gradient(180deg,#f3d69c,#c9a45c);
  animation:yourTurn 1.7s ease-in-out infinite;
}
@keyframes yourTurn{0%,100%{box-shadow:0 0 0 0 rgba(201,164,92,0)}50%{box-shadow:0 0 0 4px rgba(201,164,92,.16)}}
.battle.your-turn{box-shadow:inset 0 0 0 1px rgba(201,164,92,.34),inset 0 -22px 40px rgba(201,164,92,.05)}
/* your-turn 整条泛金：用 #stage 作用域压过战斗态底色，保留既有高亮语义 */
#stage.battle-mode .combatbar.your-turn{background:linear-gradient(180deg,#07080b 0%,rgba(201,164,92,.11) 100%)}
.combatbar.your-turn .skbtn.my-turn:not(:disabled),
.combatbar.your-turn .act.my-turn:not(:disabled){
  border-color:rgba(201,164,92,.72);
  box-shadow:0 0 0 1px rgba(201,164,92,.16),inset 0 1px 0 rgba(255,240,210,.09);
}

/* 参考图里名字和条直接浮在暗背景上：去掉卡片的边框 / 底色 / 阴影 */
.bt-unit{
  position:relative;width:100%;padding:3px 0 2px;
  border:0;border-radius:0;background:none;box-shadow:none;
  transition:opacity .2s;
}
.bt-unit.dead{opacity:.45;filter:grayscale(.5)}
/* 低血不再描卡片边：改成气血条外圈的红环，保留可读的警示 */
.bt-unit.low .u-hp{box-shadow:0 0 0 1px rgba(168,58,48,.55)}
.bt-unit.crit{animation:lowhpPulse 1.4s ease-in-out infinite}
.u-head{display:flex;align-items:baseline;gap:5px;min-width:0}
.u-tag{
  font:9px/1 Consolas,monospace;color:#1c1408;background:var(--gold);
  border-radius:2px;padding:1px 3px;letter-spacing:.06em;
}
.u-name{font-size:14.5px;color:var(--t1);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-style{
  flex:0 0 auto;font-size:8.5px;line-height:1.2;color:var(--gold2);
  border:1px solid rgba(201,164,92,.32);border-radius:2px;padding:0 3px;letter-spacing:.04em;
}
.u-lv{margin-left:auto;font-size:10px;color:var(--t3);letter-spacing:.02em;flex:0 0 auto}
.bt-unit.foe .u-lv{margin-left:0;margin-right:auto}
.bt-unit.foe .u-head{flex-direction:row-reverse}
.u-bars{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.u-hp,.u-mp,.u-gauge{position:relative;height:8px;border-radius:2px;background:rgba(0,0,0,.6);overflow:hidden}
.u-mp{height:4px}
.u-gauge{height:3px;opacity:.55;background:rgba(0,0,0,.5)}
.u-hp .hp-cap{position:absolute;right:0;top:0;bottom:0;width:0;background:var(--cap)}
.u-hp .hp-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,var(--hp),var(--hp2));transition:width .18s}
.u-mp .mp-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,var(--mpc),var(--mpc2));transition:width .18s}
.u-gauge .g-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#8a6a34,var(--gold2));transition:width .1s}
.u-hp .hp-num,.u-mp .mp-num,.u-gauge .g-num{
  position:absolute;right:3px;top:50%;transform:translateY(-50%);
  font:8.5px/1 Consolas,monospace;color:rgba(240,232,216,.82);
  text-shadow:0 1px 2px rgba(0,0,0,.9);letter-spacing:.01em;white-space:nowrap;
}
.u-mp .mp-num{font-size:8px;opacity:.72}
.u-gauge .g-num{color:rgba(236,208,152,.9)}
/* 固定一行高度：BUFF 增减绝不能把 HUD 撑高——HUD 一变高，canvas 就重算尺寸，
   整个人物/背景会跟着上下跳，看起来就像「场景在晃」。 */
.u-buffs{display:flex;flex-wrap:nowrap;gap:2px;margin-top:3px;height:15px;overflow:hidden}
.u-buff{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:2px;border:1px solid rgba(106,158,99,.7);
  background:rgba(34,48,30,.85);color:#cfe6c2;
}
.u-buff.neg{border-color:rgba(176,85,74,.75);background:rgba(52,26,22,.9);color:#f0c0b4}
.u-buff .ub-char{font-size:9px;line-height:1;font-style:normal}
.u-buff .ub-stack{position:absolute;right:-3px;top:-5px;font:8px/1 Consolas,monospace;color:var(--gold2)}
.u-buff .ub-t{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);font:7.5px/1 Consolas,monospace;color:var(--t3)}
.u-buff.new{animation:buffPop .28s ease-out}
@keyframes buffPop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
.u-overhead{
  display:none;position:absolute;left:0;top:calc(100% + 1px);z-index:2;
  font-size:10px;color:#e2a08f;letter-spacing:.04em;margin-top:2px;
  padding:1px 5px;border:1px solid rgba(168,58,48,.32);border-radius:3px;
  background:rgba(22,12,10,.94);
  pointer-events:none;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.u-overhead.on{display:block}

/* ---------- 舞台：绝对铺满 #battle（canvas 的 host 尺寸 = 整个舞台） ---------- */
.bt-arena{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.bt-stage{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  background:#07080b;z-index:1;
}
.bt-floats{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}

/* ---------- 飘字 ---------- */
.dmgnum{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  animation:dmgRise .78s ease-out both;will-change:transform,opacity;
}
.dmg-main{
  font-size:21px;font-weight:600;letter-spacing:.02em;color:#f2dfb4;
  text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 12px rgba(201,164,92,.35);
}
.dmgnum.crit .dmg-main{font-size:28px;color:#ffd27a;text-shadow:0 2px 0 #3a1408,0 0 20px rgba(255,160,60,.65)}
.dmgnum.miss .dmg-main{font-size:15px;color:#a9c6d6;font-weight:500}
.dmgnum.parry .dmg-main{font-size:16px;color:#d8c9a6}
.dmgnum.heal .dmg-main{color:#9fd3a4}
.dmgnum.dot .dmg-main{color:#b4d08a;font-size:16px}
.dmg-cap,.dmg-part{
  font:9.5px/1.2 Consolas,monospace;color:rgba(190,170,140,.8);
  letter-spacing:.05em;text-shadow:0 1px 2px #000;
}
.dmg-part{color:rgba(170,158,140,.65)}
@keyframes dmgRise{
  0%{opacity:0;transform:translate(-50%,-42%) scale(.8)}
  18%{opacity:1;transform:translate(-50%,-62%) scale(1.04)}
  100%{opacity:0;transform:translate(-50%,-118%) scale(.98)}
}

/* ---------- 横幅 / 招式角标 / 连击 / 提示 ---------- */
.bt-banner{
  position:absolute;left:50%;top:17%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  pointer-events:none;animation:bannerIn .5s ease-out both;
}
.bt-banner b{
  font-size:clamp(22px,3.4vw,34px);font-weight:600;letter-spacing:.32em;color:#f0dfba;
  text-shadow:0 2px 0 rgba(0,0,0,.65),0 0 26px rgba(201,164,92,.35);
  padding-left:.32em;
}
.bt-banner small{font-size:10.5px;letter-spacing:.3em;color:var(--t3);padding-left:.3em}
.bt-banner.gold b{color:var(--gold2)}
.bt-banner.hit b{color:#e08268;letter-spacing:.2em}
.bt-banner.win b{font-size:clamp(40px,7vw,64px);color:#ffe4a8}
.bt-banner.lose b{font-size:clamp(40px,7vw,64px);color:#d88c7c}
@keyframes bannerIn{
  0%{opacity:0;transform:translate(-50%,-46%) scale(1.04)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.bt-atk-tag{
  position:absolute;transform:translate(-50%,-50%);
  font-size:11px;letter-spacing:.1em;color:#e6d3a8;
  padding:2px 7px;border:1px solid rgba(201,164,92,.4);border-radius:3px;
  background:rgba(12,10,8,.72);white-space:nowrap;animation:atkTagIn .3s ease-out both;
}
@keyframes atkTagIn{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}
.bt-toast{
  position:absolute;left:50%;bottom:8%;transform:translateX(-50%);
  font-size:11.5px;letter-spacing:.08em;color:#e0cba6;
  background:rgba(10,8,6,.82);border:1px solid rgba(201,164,92,.28);
  border-radius:3px;padding:4px 10px;z-index:7;pointer-events:none;
  animation:toastIn .18s ease-out both;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- 低血 / 闪屏 / 震屏 / 胜负 ---------- */
.bt-lowhp{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at 50% 55%,transparent 48%,rgba(120,16,12,.36) 100%);
}
.bt-lowhp.on{opacity:1;animation:lowhpPulse 2.2s ease-in-out infinite}
.bt-lowhp.crit{opacity:1;animation:lowhpPulse .9s ease-in-out infinite;background:radial-gradient(circle at 50% 55%,transparent 42%,rgba(150,18,12,.5) 100%)}
@keyframes lowhpPulse{0%,100%{opacity:.55}50%{opacity:1}}
.bt-flash{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0}
.bt-flash.on{animation:flashOn .26s ease-out both}
@keyframes flashOn{0%{opacity:.8}100%{opacity:0}}
.battle.victory::after,.battle.defeat::after{
  content:'';position:absolute;inset:0;z-index:6;pointer-events:none;
}
.battle.victory::after{background:radial-gradient(circle at 50% 70%,rgba(255,210,130,.12),transparent 55%)}
.battle.defeat::after{background:radial-gradient(circle at 50% 60%,rgba(90,12,10,.28),transparent 62%)}
/* 注意：这里刻意不再提供整屏抖动。战斗背景/舞台永不位移，
   受击分量由人物帧、后仰、火星和顿帧承担。 */

/* ---------- 剧情杀分镜 ---------- */
.bt-cinema{
  position:absolute;inset:0;z-index:20;overflow:hidden;
  background:radial-gradient(circle at 50% 46%,rgba(40,8,6,.35),rgba(5,2,2,.9) 78%);
  animation:cinIn .35s ease-out both;
}
.bt-cinema[hidden]{display:none}
.cin-vig{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 28%,rgba(0,0,0,.78) 100%)}
.cin-ember{
  position:absolute;inset:0;opacity:.5;mix-blend-mode:screen;
  background:
    radial-gradient(circle at 18% 72%,rgba(255,110,50,.18),transparent 22%),
    radial-gradient(circle at 82% 30%,rgba(255,80,36,.12),transparent 26%),
    radial-gradient(circle at 50% 88%,rgba(255,150,70,.1),transparent 30%);
  animation:cinEmber 2.4s ease-in-out infinite;
}
@keyframes cinEmber{0%,100%{opacity:.35}50%{opacity:.7}}
.cin-flash{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen}
.cin-flash.on{animation:cinFlash .5s ease-out both}
@keyframes cinFlash{0%{opacity:0}12%{opacity:.8}100%{opacity:0}}
.cin-top{
  position:absolute;left:0;right:0;top:34%;display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:cinIn .5s ease-out both;
}
.cin-by{font-size:12px;letter-spacing:.4em;color:var(--t3);padding-left:.4em}
.cin-name{
  font-size:clamp(34px,6.4vw,58px);font-weight:600;letter-spacing:.2em;color:#f4dfb2;
  text-shadow:0 3px 0 #2a0c06,0 0 42px rgba(255,110,50,.55);padding-left:.2em;
  animation:cinNameIn .7s cubic-bezier(.16,.8,.3,1) both;
}
@keyframes cinNameIn{0%{opacity:0;transform:scale(1.14) translateY(8px);letter-spacing:.45em}100%{opacity:1;transform:none}}
.cin-lines{
  position:absolute;left:50%;bottom:17%;transform:translateX(-50%);
  width:min(640px,86%);display:flex;flex-direction:column;gap:5px;text-align:center;
}
.cin-line{
  font-size:14.5px;letter-spacing:.1em;color:#e8d8bc;line-height:1.7;
  text-shadow:0 2px 6px rgba(0,0,0,.8);animation:cinLineIn .4s ease-out both;
}
.cin-line.dim{color:var(--t2)}
@keyframes cinLineIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cin-tip{
  position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.5em;color:rgba(200,150,110,.5);padding-left:.5em;
  animation:cinTip 1.4s ease-in-out infinite;
}
@keyframes cinTip{0%,100%{opacity:.25}50%{opacity:.75}}
@keyframes cinIn{from{opacity:0}to{opacity:1}}
.battle.cinematic .bt-hud,.battle.cinematic .bt-floats{opacity:.25;transition:opacity .3s}

/* ---------- 结算 ---------- */
.bt-result{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;
  width:min(420px,86%);padding:22px 24px 18px;text-align:center;
  background:linear-gradient(180deg,rgba(26,21,15,.97),rgba(12,10,8,.97));
  border:1px solid rgba(201,164,92,.42);border-radius:8px;
  box-shadow:0 24px 70px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,240,210,.07);
  animation:resultIn .4s cubic-bezier(.16,.8,.3,1) both;
}
.bt-result.lose{border-color:rgba(168,58,48,.45)}
.rs-title{
  font-size:46px;font-weight:600;letter-spacing:.24em;line-height:1.1;color:#f0d9a4;
  text-shadow:0 3px 0 #2a1608,0 0 30px rgba(201,164,92,.35);padding-left:.24em;
}
.bt-result.lose .rs-title{color:#d68a7a;text-shadow:0 3px 0 #2a0c08}
.rs-sub{font-size:11px;letter-spacing:.28em;color:var(--t3);margin-top:4px;padding-left:.28em}
.rs-rewards{margin:16px 0 6px;display:flex;flex-direction:column;gap:5px;text-align:left}
.rs-row{display:flex;justify-content:space-between;gap:14px;font-size:12px;color:var(--t2);border-bottom:1px dashed rgba(228,214,190,.1);padding-bottom:4px}
.rs-row b{color:var(--gold2);font-weight:500}
.rs-row.drops b{color:#d9c9a6;font-size:11.5px;text-align:right}
.rs-tip{font-size:11px;color:var(--t3);letter-spacing:.04em;margin:14px 0 14px}
.rs-close{width:100%;height:40px}
@keyframes resultIn{from{opacity:0;transform:translate(-50%,-48%) scale(1.03)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.battle.enter .bt-result{animation:none}

/* ---------- 战斗日志：舞台之下、战斗条之上，吃掉剩余高度 ---------- */
.logwrap.battle-mode{
  order:1;flex:1 1 auto;height:auto;
  min-height:clamp(150px,21vh,210px);
  display:flex;flex-direction:column;
  border-top:1px solid rgba(201,164,92,.18);
  border-bottom:1px solid rgba(228,214,190,.08);
  background:#0a0908;
}
.logwrap.battle-mode .log{
  flex:1 1 auto;height:auto;min-height:0;
  width:min(1120px,100%);padding:12px 16px;
}
.logwrap.battle-mode .log-inner{font-size:13.5px;line-height:1.9}
.logwrap.battle-mode .ln{font-size:13.5px;line-height:1.9;margin-bottom:1px}

/* ---------- 响应式 / 降级 ---------- */
@media (max-width:760px){
  /* 手机：舞台略矮、HUD 化小，但保留中间回合胶囊 */
  #stage.battle-mode .stage-wrap{padding:0}
  .battle{width:100%;height:clamp(240px,38vh,340px)}
  .bt-hud{padding:8px 10px 26px;gap:6px}
  .bt-hud-mid{display:flex;top:auto;bottom:3px;flex-direction:row;gap:7px}
  .bt-hud-mid b{font-size:9.5px;letter-spacing:.14em}
  .bt-phase{font-size:9px;padding:0 6px;line-height:1.6}
  .bt-hud-side{gap:5px;flex:0 1 48%}
  .bt-hud-side.n1{flex:0 1 48%}
  .bt-hud-side.n2{flex:0 1 44%}
  .bt-hud-side.n3,.bt-hud-side.n4,.bt-hud-side.n5{flex:0 1 34%}
  .bt-unit{padding:2px 0 1px}
  .u-name{font-size:12px}
  .u-bars{gap:2px;margin-top:4px}
  .u-hp{height:7px}.u-mp{height:3px}.u-gauge{height:3px;opacity:.55}
  .u-style{display:none}
  /* 窄屏：招式退回三列网格（5 个按钮时折两行），与参考图手机端的格子感一致 */
  #stage.battle-mode .cb-skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .logwrap.battle-mode{min-height:clamp(120px,17vh,170px)}
  .logwrap.battle-mode .log{padding:10px 12px}
  #stage.battle-mode .combatbar{padding:6px 10px 10px;gap:6px}
  #stage.battle-mode .cb-skills,#stage.battle-mode .cb-acts{gap:6px}
  .skbtn{height:48px;padding:0 8px;gap:6px;border-radius:8px}
  .skbtn .sk-nm{font-size:13px}
  .skbtn .sk-sub{font-size:10px}
  .combatbar .act{height:48px;padding:0 10px;font-size:14px;border-radius:8px}
  .dmg-main{font-size:18px}
  .dmgnum.crit .dmg-main{font-size:23px}
  .cin-lines{bottom:15%;width:90%}
  .cin-line{font-size:13px}
  .bt-result{padding:18px 16px 14px;max-height:calc(100% - 10px);overflow-y:auto}
  .rs-title{font-size:38px}
}
@media (max-height:660px){
  /* 矮窗口：舞台/日志/按钮再压一档，保证两行按钮贴视口底、不被裁 */
  .battle{height:clamp(280px,42vh,360px)}
  .bt-hud{padding:8px 14px 24px}
  .u-buffs{display:none}
  .bt-banner{top:14%}
  .cin-top{top:28%}
  .logwrap.battle-mode{min-height:clamp(110px,16vh,150px)}
  #stage.battle-mode .combatbar{padding:6px 16px 8px;gap:6px}
  #stage.battle-mode .cb-skills,#stage.battle-mode .cb-acts{gap:6px}
  .skbtn{height:46px}
  .combatbar .act{height:46px}
  /* 矮窗口结算面板压紧：舞台只有 280px，别让奖励行把面板顶出 #battle 被裁 */
  .bt-result{padding:14px 18px 12px;max-height:calc(100% - 10px);overflow-y:auto}
  .rs-title{font-size:32px}
  .rs-sub{font-size:10px}
  .rs-rewards{margin:10px 0 4px;gap:3px}
  .rs-row{font-size:11px}
  .rs-tip{margin:8px 0 8px;font-size:10px}
  .rs-close{height:36px}
}
@media (prefers-reduced-motion: reduce){
  .battle.enter .bt-stage,.dmgnum,.bt-banner,.bt-flash.on,
  .bt-cinema,.cin-name,.cin-line,.cin-ember,.cin-tip,.bt-result,.bt-toast,
  .bt-atk-tag,.bt-lowhp.on{animation:none!important}
  .bt-flash.on{opacity:0}
}

/* ---------- 状态页 ---------- */
.statusview,.sysview{
  position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(12,9,7,.7);
}
body.light .statusview,body.light .sysview{background:rgba(60,50,38,.35)}
.status-shell{
  width:min(560px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.status-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line);
}
.status-head h3{font-size:16px;font-weight:600;letter-spacing:.2em;color:var(--t1)}
.status-body{padding:22px;overflow-y:auto}
.st-name{font-size:24px;font-weight:600;letter-spacing:.1em;color:var(--t1)}
.st-title{font-size:12.5px;color:var(--t3);letter-spacing:.1em;margin-top:6px}
.statrow{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;color:var(--t3);letter-spacing:.1em;margin:16px 0 6px}
.statrow b{font-weight:500;color:var(--t1);font-size:13px}
.bar{position:relative;height:6px;border-radius:3px;background:var(--panel2);overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;width:0;transition:width .3s;background:var(--t2)}
.st-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:22px 0 4px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
}
.st-grid div{background:var(--panel);padding:12px 4px;text-align:center;font-size:11.5px;color:var(--t3);letter-spacing:.1em}
.st-grid div span{display:block;font-size:18px;font-weight:600;color:var(--t1);margin-top:4px}
.st-sec{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.st-sec h4{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--t3);margin-bottom:10px}
.st-obj{font-size:14.5px;font-weight:500;line-height:2;color:var(--t1)}
.st-meta{font-size:12px;color:var(--t3);line-height:1.9}
.st-line{font-size:13px;color:var(--t2);line-height:2}
.st-line b{font-weight:600;color:var(--t1)}
.st-actions{display:flex;flex-wrap:wrap;gap:8px;padding:18px 22px;border-top:1px solid var(--line)}
.st-actions button{
  flex:1 1 auto;height:40px;font-size:13.5px;font-weight:500;
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--t2);transition:.15s;
}
.st-actions button:hover{color:var(--t1);border-color:var(--line2);background:var(--panel2)}
.st-actions button:active{background:var(--bg)}

/* ---------- 弹窗 ---------- */
.modal{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(12,9,7,.6);
}
body.light .modal{background:rgba(60,50,38,.3)}
.sheet{
  width:min(620px,100%);max-height:82vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.sheet header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.sheet header h3{font-size:16px;font-weight:600;letter-spacing:.14em;color:var(--t1)}
.sheet-body{padding:22px;overflow-y:auto;font-size:13.5px;line-height:1.9;color:var(--t2)}
.sheet-body .narr{font-size:15px;line-height:2.05;color:var(--t1)}
.ghost{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--t3);font-size:16px;transition:.15s;
}
.ghost:hover{color:var(--t1);border-color:var(--line2);background:var(--panel2)}

.dlg-text{font-size:15.5px;line-height:2.1;color:var(--t1);margin-bottom:20px;white-space:pre-wrap}
.dlg-who{font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--t3);margin-bottom:10px}
.dlg-choices{display:flex;flex-direction:column;gap:10px}
.dlg-choices button{
  text-align:left;font-size:14.5px;font-weight:500;padding:12px 16px;
  border:1px solid var(--line);border-radius:var(--r);color:var(--t1);transition:.15s;
}
.dlg-choices button:hover{border-color:var(--line2);background:var(--panel2)}
.dlg-choices button:active{background:var(--bg)}

.rowlist{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:var(--r-sm);overflow:hidden}
.rowlist .row{background:var(--panel);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.rowlist .row .l{display:flex;flex-direction:column;gap:3px}
.rowlist .row .nm{font-size:14.5px;font-weight:500;color:var(--t1)}
.rowlist .row .ds{font-size:12px;color:var(--t3);line-height:1.7}
.rowlist .row .r{display:flex;gap:8px;align-items:center;white-space:nowrap}
.note{font-size:12.5px;color:var(--t3);line-height:1.9}
.hr{height:1px;background:var(--line);margin:18px 0}
.center{text-align:center}
.big{font-size:26px;font-weight:600;letter-spacing:.24em;color:var(--t1)}
.tiny{font-size:11.5px;color:var(--t3);letter-spacing:.1em}
.dim{color:var(--t3)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- 舆图 ---------- */
.mapview{
  position:fixed;inset:0;z-index:58;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(12,9,7,.7);
}
body.light .mapview{background:rgba(60,50,38,.35)}
.map-shell{
  width:min(1040px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.map-head{display:flex;align-items:baseline;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.map-title{font-size:16px;font-weight:600;letter-spacing:.2em;color:var(--t1)}
.map-sub{font-size:12px;color:var(--t3);letter-spacing:.06em}
.map-close{margin-left:auto}
.map-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 22px;border-bottom:1px solid var(--line)}
.map-tab{
  font-size:13px;font-weight:500;padding:6px 14px;border:1px solid transparent;
  border-radius:var(--r-sm);color:var(--t3);transition:.15s;
}
.map-tab:hover{color:var(--t1);background:var(--panel2)}
.map-tab.on{color:var(--t1);border-color:var(--line2);background:var(--panel2)}
.map-canvas{flex:1 1 auto;min-height:220px;overflow:auto;padding:28px 22px;display:flex;align-items:center;justify-content:center}
.map-inner{position:relative;flex:0 0 auto}
.map-line{position:absolute;pointer-events:none;background:var(--line2)}
.map-line.h{height:1px;transform:translateY(-.5px)}
.map-line.v{width:1px;transform:translateX(-.5px)}
.map-line.spoke{height:1px;opacity:.6}
.map-block-label{
  position:absolute;pointer-events:none;font-size:10px;letter-spacing:.18em;
  color:var(--t3);opacity:.7;white-space:nowrap;
}
.mapnode{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:8px 12px;min-width:56px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--t1);line-height:1.3;
  white-space:nowrap;transition:.15s;
}
.mapnode .mt{font-size:9.5px;font-weight:400;letter-spacing:.16em;color:var(--t3)}
.mapnode:hover:not(:disabled){border-color:var(--line2);background:var(--panel2);z-index:3}
.mapnode.here{background:var(--gold);border-color:var(--gold);color:var(--ink);z-index:4}
.mapnode.here .mt{color:var(--ink);opacity:.7}
.mapnode.far{color:var(--t3);opacity:.45;cursor:not-allowed}
.mapnode.unseen{opacity:.65}
/* —— 天下图（第一级）：山河方位 + 区域大字 + 驿路线 —— */
.map-inner.world{
  background:
    radial-gradient(ellipse at 30% 20%, rgba(200,168,90,.06), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(120,160,150,.05), transparent 60%);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.map-region{
  position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  font-size:clamp(18px,3vw,30px);font-weight:600;letter-spacing:.32em;
  color:var(--t3);opacity:.16;white-space:nowrap;
}
.mapnode.world{
  min-width:44px;padding:5px 9px;font-size:12.5px;letter-spacing:.04em;
  background:var(--panel);border-color:var(--line2);
}
.mapnode.world .mt{font-size:9px;letter-spacing:.12em}
.mapnode.world.here{
  background:var(--gold);border-color:var(--gold);color:var(--ink);
  box-shadow:0 0 0 3px rgba(200,168,90,.18);
}
.mapnode.world.here .mt{color:var(--ink);opacity:.7}
.mapnode.world.unseen{opacity:.5}
.mapnode.world.next{border-color:var(--gold2);box-shadow:0 0 0 2px rgba(224,192,130,.12)}
.mapnode.world.far{opacity:.38}
.map-road{
  position:absolute;height:1px;pointer-events:none;
  background:var(--line2);opacity:.65;
}
.map-road.locked{
  background:repeating-linear-gradient(90deg,var(--line2) 0 7px,transparent 7px 14px);
  opacity:.35;
}
.map-back{flex:0 0 auto;white-space:nowrap}
.map-enter-city{
  flex:0 0 auto;white-space:nowrap;padding:4px 12px;border:1px solid var(--gold2);
  border-radius:var(--r-sm);color:var(--gold2);font-size:12px;
}
.map-enter-city:hover{background:rgba(224,192,130,.1)}
/* ---------- 城下问路 ---------- */
.map-enter{
  position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  background:rgba(12,9,7,.62);
}
.map-enter[hidden]{display:none}
.map-enter-box{
  width:min(360px,calc(100% - 40px));padding:22px 24px;background:var(--panel);
  border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--shadow);
}
.map-enter-title{font-size:15px;font-weight:600;letter-spacing:.16em;color:var(--t1)}
.map-enter-text{margin-top:12px;font-size:13px;line-height:1.9;color:var(--t2)}
.map-enter-acts{display:flex;gap:10px;margin-top:20px}
.map-enter-yes,.map-enter-no{
  flex:1;padding:9px 0;border-radius:var(--r-sm);font-size:13px;letter-spacing:.08em;transition:.15s;
}
.map-enter-yes{background:var(--gold);color:var(--ink);border:1px solid var(--gold)}
.map-enter-yes:hover{background:var(--gold2)}
.map-enter-no{border:1px solid var(--line2);color:var(--t2)}
.map-enter-no:hover{color:var(--t1);background:var(--panel2)}
.map-foot{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;padding:14px 22px;border-top:1px solid var(--line);font-size:12px}
.map-k{color:var(--t3);letter-spacing:.16em}
.map-v{color:var(--t2)}
.map-toast{
  position:absolute;left:50%;bottom:72px;transform:translateX(-50%) translateY(6px);
  padding:8px 18px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel2);color:var(--t1);font-size:13px;opacity:0;pointer-events:none;transition:.2s;
}
.map-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 窄屏 ---------- */
@media (max-width:760px){
  #topbar{padding:10px 14px}
  #roomName{font-size:17px;letter-spacing:.12em}
  .navbtn{font-size:13px;padding:6px 12px}
  .stage-wrap{padding:0 16px}
  .scene{padding:20px 0 16px}
  .scene-desc{font-size:14px;line-height:1.95}
  .mods{margin-top:24px;gap:24px}
  .localmap{--ch:clamp(50px,8vh,72px)}
  .lmnode,.chip{height:46px;font-size:14px}
  .here-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));min-height:46px}
  /* 手机给场景多留高度：日志压到 3~4 行，操作区（出口图 / 这里有）不再被挤到滚动区外 */
  .logwrap{height:clamp(104px,16vh,150px)}
  .log{padding:12px 16px}
  .ln{font-size:13px;line-height:1.9}
  .combatbar{padding:12px 16px}
  .mapview,.statusview,.sysview{padding:0;align-items:stretch}
  .map-shell,.status-shell{width:100%;max-height:100%;border:none;border-radius:0}
  .map-canvas{padding:18px 12px}
}

/* hidden 必须压过 display */
[hidden]{display:none !important}

/* ---------- 矮窗口（必须放在所有基础规则之后，否则会被后面的基础值覆盖） ---------- */
@media (max-height:660px){
  .scene{padding:14px 0 12px}
  .scene-desc{min-height:0;line-height:1.85}
  .mods{gap:16px;margin-top:16px}
  .localmap{--ch:clamp(46px,7.5vh,64px)}
  .mod-head{margin-bottom:8px}
  .lmnode,.chip{height:44px}
  .here-grid{min-height:44px}
  .logwrap{height:clamp(96px,15vh,140px)}
}