/* ===== 天龙八部 · 天佛降世 —— 视觉系统 =====
   风格基准：《放置江湖》文字 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)}

/* ============================================================
   战斗表现层 2.0（battle-ui 写作用域）
   三条 HUD（红气血 + 深灰上限缺口 / 青内力 / 金行动条）、多单位、
   BUFF 单字砖、招式名横幅、双段飘字、连击、冷却环、震屏/闪金/闪白、
   剧情杀分镜、结算面板、低血警示；深浅主题与时序降级都在本段内自洽。
   ============================================================ */

/* ---------- 战斗条：技能（冷却环）/ 恢复 / 自动 / 逃 ---------- */
.combatbar{
  flex:0 0 auto;width:min(880px,100%);margin:0 auto;padding:12px 20px 14px;
  display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;justify-content:center;
  border-top:1px solid var(--line);
}
.cb-skills{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;
  flex:1 1 480px;max-width:680px;min-width:0;
}
.cb-acts{display:flex;gap:8px;flex:0 0 auto;align-items:stretch;flex-wrap:wrap}
.skbtn{
  position:relative;overflow:hidden;height:56px;min-width:0;padding:0 6px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:border-color .15s,background .15s,color .15s,opacity .2s;color:var(--t1);
}
.skbtn .sk-nm{
  font-size:14.5px;font-weight:500;letter-spacing:.06em;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:.04em}
.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:var(--line2);background:var(--panel2)}
.skbtn:active:not(:disabled){background:var(--bg)}
.skbtn:disabled{opacity:.42;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.basic{background:var(--panel2)}
.skbtn.basic .sk-nm{color:var(--t1)}
.skbtn.wait .cdring{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:56px;display:flex;align-items:center;justify-content:center;padding:0 14px;white-space:nowrap}
.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:1 1 auto;min-height:0;display:flex;flex-direction:column;
  overflow:hidden;
  --hp:#b6433a;--hp2:#dd6f63;--mpc:#4f98a2;--mpc2:#7fc4cc;
  --cap:#463c33;--dmgblue:#86b3d6;--buffpos:#6a9e63;--buffneg:#b0554a;
  --slashcolor:#e0c082;
}
body.light .battle{
  --hp:#b6433a;--hp2:#cf6a5e;--mpc:#3f8b96;--mpc2:#69b4bd;
  --cap:#cfc4b2;--dmgblue:#3f739c;--buffpos:#4c8650;--buffneg:#a3453b;
  --slashcolor:#8d6a2f;
}
.scene.fighting .scene-desc{display:none}
.scene.fighting .mods{display:none}
.bt-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bt-bg i{position:absolute;inset:0;display:block;font-style:normal}
.bt-sky{background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.02) 58%)}
.bt-hills{
  background:
    radial-gradient(ellipse 58% 34% at 12% 96%, rgba(236,229,216,.055), transparent 68%),
    radial-gradient(ellipse 48% 28% at 88% 98%, rgba(236,229,216,.045), transparent 70%),
    radial-gradient(ellipse 40% 22% at 50% 104%, rgba(236,229,216,.035), transparent 72%);
}
.bt-ground{
  top:auto;bottom:0;height:26%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.36));
  border-top:1px solid var(--line);
}
body.light .bt-sky{background:linear-gradient(180deg,rgba(60,50,38,.10),rgba(60,50,38,0) 58%)}
body.light .bt-hills{
  background:
    radial-gradient(ellipse 58% 34% at 12% 96%, rgba(60,50,38,.07), transparent 68%),
    radial-gradient(ellipse 48% 28% at 88% 98%, rgba(60,50,38,.05), transparent 70%);
}
.battle.enter .bt-bg{animation:bgIn .6s ease-out both}
@keyframes bgIn{from{opacity:0}to{opacity:1}}

/* ---------- 三条 HUD：每单位一张卡 ---------- */
.bt-hud{
  position:relative;z-index:3;width:100%;max-width:940px;margin:0 auto;
  padding:22px 3% 0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:12px;align-items:start;
}
.bt-hud-side{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.bt-hud-side.me{justify-content:flex-start}
.bt-hud-side.foe{justify-content:flex-end}
.bt-hud-mid{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:36px;padding-top:2px;
}
.bt-hud-mid b{
  font-size:17px;font-weight:600;letter-spacing:.12em;color:var(--gold);
  text-shadow:0 0 14px rgba(201,164,92,.25);
}
.bt-hud-mid.scripted b{color:#c07a70}
.bt-round{font-size:9.5px;color:var(--t3);letter-spacing:.05em;white-space:nowrap}
.bt-unit{
  position:relative;width:172px;max-width:48%;padding:7px 9px 6px;
  background:rgba(34,27,22,.55);border:1px solid var(--line);border-radius:var(--r-sm);
}
body.light .bt-unit{background:rgba(250,245,234,.72)}
.bt-unit.me{width:190px}
.bt-hud-side.n2 .bt-unit{width:142px}
.bt-hud-side.n2 .bt-unit.me{width:150px}
.bt-hud-side.n3 .bt-unit{width:96px}
.bt-hud-side.n4 .bt-unit{width:84px}
.bt-hud-side.n5 .bt-unit{width:70px}
.bt-hud-side.n3 .bt-unit.me{width:106px}
.bt-hud-side.n4 .bt-unit.me{width:94px}
.bt-hud-side.n5 .bt-unit.me{width:80px}
.bt-hud-side.n4 .u-name,.bt-hud-side.n5 .u-name{font-size:11.5px}
.bt-hud-side.n4 .u-lv,.bt-hud-side.n5 .u-lv{font-size:9px}
.bt-unit.dead{opacity:.55;filter:grayscale(.55)}
.bt-unit.low .u-hp{box-shadow:0 0 0 1px rgba(221,111,99,.35)}
.bt-unit.crit .u-hp{animation:lowhpPulse 1s ease-in-out infinite}
.u-head{display:flex;align-items:baseline;gap:6px;padding-bottom:4px;min-width:0}
.u-tag{
  flex:0 0 auto;font-size:9.5px;font-weight:600;letter-spacing:.08em;line-height:1.45;
  color:var(--ink);background:var(--gold);border-radius:3px;padding:0 4px;
}
.bt-unit.foe .u-tag{background:var(--t3);color:var(--bg)}
.u-name{
  flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:600;letter-spacing:.06em;
  color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bt-unit.foe .u-name{text-align:right}
.u-lv{flex:0 0 auto;font-size:10.5px;color:var(--t3);white-space:nowrap}
.u-bars{display:flex;flex-direction:column;gap:3px}
.u-hp,.u-mp,.u-gauge{position:relative;height:10px;border-radius:2px;overflow:hidden;background:rgba(0,0,0,.42)}
body.light .u-hp,body.light .u-mp,body.light .u-gauge{background:rgba(60,50,38,.16)}
.u-mp,.u-gauge{height:6px}
.u-gauge{
  background-image:
    linear-gradient(90deg,rgba(0,0,0,0) calc(33.33% - 1px),rgba(0,0,0,.55) calc(33.33% - 1px),rgba(0,0,0,.55) 33.33%,rgba(0,0,0,0) 33.33%),
    linear-gradient(90deg,rgba(0,0,0,0) calc(66.66% - 1px),rgba(0,0,0,.55) calc(66.66% - 1px),rgba(0,0,0,.55) 66.66%,rgba(0,0,0,0) 66.66%);
}
.u-hp i,.u-mp i,.u-gauge i{position:absolute;top:0;bottom:0;left:0;width:0;display:block}
.u-hp .hp-fill{background:linear-gradient(90deg,var(--hp),var(--hp2));transition:width .28s ease}
.u-hp .hp-cap{left:auto;right:0;background:var(--cap)}
.u-mp .mp-fill{background:linear-gradient(90deg,var(--mpc),var(--mpc2));transition:width .3s ease}
.u-gauge .g-fill{background:linear-gradient(90deg,var(--gold),var(--gold2))}
.u-hp .hp-num,.u-mp .mp-num,.u-gauge .g-num{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:8.5px;line-height:1;letter-spacing:.02em;color:rgba(255,255,255,.86);
  text-shadow:0 1px 2px rgba(0,0,0,.85);pointer-events:none;
}
.u-hp .hp-num{font-size:9.5px;font-weight:600}
body.light .u-hp .hp-num,body.light .u-mp .mp-num,body.light .u-gauge .g-num{
  color:rgba(42,36,29,.82);text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.bt-unit.foe .hp-num,.bt-unit.foe .mp-num,.bt-unit.foe .g-num{right:auto;left:4px}
.u-buffs{display:flex;flex-wrap:wrap;gap:4px 6px;min-height:22px;margin-top:6px;padding-bottom:7px}
.u-buff{
  position:relative;flex:0 0 auto;width:14px;height:14px;
  border:1px solid var(--buffpos);border-radius:2px;background:rgba(0,0,0,.30);
  display:flex;align-items:center;justify-content:center;
}
.u-buff.neg{border-color:var(--buffneg)}
.u-buff .ub-char{font-style:normal;font-size:9.5px;line-height:1;font-weight:600;color:var(--buffpos)}
.u-buff.neg .ub-char{color:#cf8b82}
.u-buff .ub-stack{
  position:absolute;right:-4px;top:-6px;font-style:normal;font-size:8px;line-height:1.1;
  color:var(--t1);background:var(--panel2);border-radius:2px;padding:0 1px;
}
.u-buff .ub-t{
  position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  font-style:normal;font-size:7.5px;line-height:1;color:var(--t3);
}
.u-buff.new{animation:buffPop .35s ease-out}
@keyframes buffPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
.u-overhead{
  position:absolute;left:0;right:0;top:-16px;padding:0 1px;
  font-size:10.5px;letter-spacing:.05em;color:#d98a7f;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-align:left;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.bt-unit.foe .u-overhead{text-align:right}
.u-overhead.on{opacity:1}

/* ---------- 对峙舞台：多单位左右两列 ---------- */
.bt-arena{position:relative;flex:1 1 auto;min-height:176px;margin-top:2px;overflow:hidden}
.bt-fxlayer{position:absolute;inset:0;z-index:2;pointer-events:none}
.bt-fxlayer canvas{display:block;width:100%;height:100%}
.bt-line{
  position:absolute;bottom:14px;z-index:1;
  display:flex;align-items:flex-end;gap:clamp(8px,2.4vw,40px);
}
.bt-line.me{left:4%;right:50%;justify-content:flex-start}
.bt-line.foe{left:48%;right:4%;justify-content:flex-end}
.bt-fighter{
  position:relative;flex:0 0 auto;height:min(40vh,300px);min-height:108px;
  aspect-ratio:64/96;color:var(--t1);transform-origin:50% 100%;
  transition:opacity .45s;
}
/* 单位数量越多，剪影越矮/越窄：1v3 与多队友同场时也不互相叠压
   （舞台宽度上限 720px，多单位必须按左右半区宽度收着放） */
.bt-line[data-n="1"] .bt-fighter{height:min(42vh,316px)}
.bt-line[data-n="2"] .bt-fighter{height:min(30vh,232px);min-height:96px}
.bt-line[data-n="3"] .bt-fighter{height:min(22vh,156px);min-height:80px}
.bt-line[data-n="4"] .bt-fighter{height:min(18vh,116px);min-height:64px}
.bt-line[data-n="5"] .bt-fighter{height:min(15vh,92px);min-height:52px}
.bt-line[data-n="2"]{gap:clamp(6px,1.8vw,22px)}
.bt-line[data-n="3"]{gap:clamp(4px,1.2vw,12px)}
.bt-line[data-n="4"],.bt-line[data-n="5"]{gap:clamp(3px,0.8vw,8px)}
.bt-fighter.enter .fig-inner{animation:unitIn .52s cubic-bezier(.2,.8,.3,1) both}
.bt-fighter.ally{color:#cdbb96}
body.light .bt-fighter.ally{color:#8d7a55}
.bt-fighter.foe{transform:scaleX(-1);color:var(--t2)}
.bt-fighter svg{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.bt-fighter .f-shadow{
  position:absolute;left:50%;bottom:-5px;width:66%;height:8px;transform:translateX(-50%);
  border-radius:50%;background:rgba(0,0,0,.34);filter:blur(3px);
}
.bt-fighter .f-status{
  position:absolute;left:50%;top:0;transform:translate(-50%,-100%);
  font-size:11px;letter-spacing:.05em;color:#d98a7f;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.7);opacity:0;transition:opacity .2s;pointer-events:none;
}
.bt-fighter.foe .f-status{transform:translate(-50%,-100%) scaleX(-1)}
.bt-fighter .f-status.on{opacity:1}
.bt-fighter.flash .fig-inner{filter:brightness(2.6) saturate(.25)}
.bt-fighter.down{opacity:.4}
.bt-fighter.down .fig-inner{transform:translateY(18px) rotate(76deg);transition:transform .55s cubic-bezier(.3,.9,.4,1)}
.bt-fighter.stun .fig-inner{animation:stunSway 1.2s ease-in-out infinite}
@keyframes unitIn{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:translateY(0)}}
@keyframes stunSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.fig-inner{position:relative;width:100%;height:100%;will-change:transform;transform-origin:50% 100%}
@keyframes pWindup{0%{transform:translateX(0) rotate(0)}100%{transform:translateX(-7px) rotate(-4deg)}}
.fig-inner.p-windup{animation:pWindup .2s ease-out both}
@keyframes pHit{0%{transform:translateX(0)}26%{transform:translateX(40px)}52%{transform:translateX(34px)}100%{transform:translateX(0)}}
.fig-inner.p-hit{animation:pHit .32s cubic-bezier(.3,.9,.4,1)}
@keyframes pHurt{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}35%{transform:translateX(7px)}55%{transform:translateX(-5px)}75%{transform:translateX(4px)}}
.fig-inner.p-hurt{animation:pHurt .3s ease-in-out}
@keyframes pDodge{0%,100%{transform:translate(0,0)}40%{transform:translate(-24px,-8px)}}
.fig-inner.p-dodge{animation:pDodge .36s ease-out}
@keyframes pParry{0%{transform:translateX(0)}35%{transform:translateX(-9px) rotate(-3deg)}100%{transform:translateX(0)}}
.fig-inner.p-parry{animation:pParry .38s ease-out}
@keyframes pCast{0%{transform:scale(1);filter:brightness(1)}45%{transform:scale(1.04);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}
.fig-inner.p-cast{animation:pCast .46s ease-out}
@keyframes pKneel{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(12px) rotate(5deg)}}
.fig-inner.p-kneel{animation:pKneel .5s ease-out both}
@keyframes pWin{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}}
.fig-inner.p-win{animation:pWin 1.4s ease-in-out}

/* ---------- 飘字（双段伤害：主字 + 蓝色上限小字 + 部位小字） ---------- */
.bt-floats{position:absolute;inset:0;z-index:5;pointer-events:none}
.dmgnum{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  white-space:nowrap;font-weight:600;color:var(--t1);
  animation:dmgRise 1.05s ease-out forwards;
}
.dmgnum .dmg-main{font-size:20px;line-height:1.1;text-shadow:0 2px 5px rgba(0,0,0,.7)}
.dmgnum .dmg-cap{font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--dmgblue);text-shadow:0 1px 3px rgba(0,0,0,.65)}
.dmgnum .dmg-part{font-size:10px;font-weight:400;letter-spacing:.05em;color:var(--t3);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.dmgnum.crit .dmg-main{
  font-size:28px;color:var(--gold2);
  text-shadow:0 0 12px rgba(224,192,130,.5),0 2px 6px rgba(0,0,0,.75);
}
.dmgnum.miss .dmg-main,.dmgnum.parry .dmg-main{font-size:15px;font-weight:500;color:var(--t2)}
.dmgnum.parry .dmg-main{color:var(--gold2)}
.dmgnum.heal .dmg-main{font-size:17px;color:#7fbf8b}
.dmgnum.dot .dmg-main{font-size:16px;color:#9dc27a}
@keyframes dmgRise{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  14%{opacity:1;transform:translate(-50%,-84%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(1)}
}

/* ---------- 招式名横幅 / 连击 / 提示 ---------- */
.bt-banner{
  position:absolute;left:50%;top:13%;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  pointer-events:none;animation:bannerIn 1.2s ease-out forwards;
}
.bt-banner b{
  font-size:20px;font-weight:600;letter-spacing:.16em;color:var(--t1);
  padding:2px 20px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.35),transparent);
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.bt-banner small{font-size:10px;letter-spacing:.28em;color:var(--gold)}
.bt-banner.gold b{
  color:var(--gold2);
  text-shadow:0 0 16px rgba(224,192,130,.35),0 2px 8px rgba(0,0,0,.7);
}
.bt-banner.hit b{
  font-size:15px;letter-spacing:.12em;color:#e08a7e;
  border-color:rgba(224,138,126,.5);
}
.bt-banner.win b,.bt-banner.lose b{
  font-size:46px;letter-spacing:.3em;padding:0;border:none;background:none;
}
.bt-banner.win b{color:var(--gold2);text-shadow:0 0 28px rgba(224,192,130,.4),0 3px 14px rgba(0,0,0,.7)}
.bt-banner.lose b{color:#a5423a;text-shadow:0 0 28px rgba(165,66,58,.45),0 3px 14px rgba(0,0,0,.7)}
@keyframes bannerIn{
  0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.92)}
  15%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  72%{opacity:1}
  100%{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.98)}
}
.bt-combo{
  position:absolute;right:6%;top:10%;z-index:6;pointer-events:none;
  display:flex;align-items:baseline;gap:5px;color:var(--gold2);
}
.bt-combo b{font-size:34px;font-weight:700;line-height:1;text-shadow:0 0 16px rgba(224,192,130,.5),0 2px 6px rgba(0,0,0,.6)}
.bt-combo span{font-size:12px;letter-spacing:.18em;color:var(--gold)}
.bt-combo.pop b{animation:comboPop .3s ease-out}
@keyframes comboPop{0%{transform:scale(.6)}60%{transform:scale(1.22)}100%{transform:scale(1)}}
.bt-toast{
  position:absolute;left:50%;bottom:3%;transform:translateX(-50%);z-index:7;
  padding:5px 16px;border:1px solid var(--line2);border-radius:20px;
  background:rgba(20,15,11,.72);color:var(--t1);font-size:12.5px;letter-spacing:.04em;
  pointer-events:none;animation:toastIn .18s ease-out;
}
body.light .bt-toast{background:rgba(250,245,234,.92)}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ---------- 屏幕反馈：低血 / 红屏 / 闪白 / 震屏 / 刀光降级 ---------- */
.bt-lowhp{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s;
  box-shadow:inset 0 0 90px 22px rgba(150,26,20,.5);
}
.bt-lowhp.on{opacity:1;animation:lowhpPulse 1.6s ease-in-out infinite}
.bt-lowhp.crit{box-shadow:inset 0 0 120px 34px rgba(160,22,16,.62)}
body.light .bt-lowhp{box-shadow:inset 0 0 90px 22px rgba(180,40,30,.3)}
@keyframes lowhpPulse{0%,100%{opacity:.5}50%{opacity:1}}
.battle.defeat::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%,transparent 36%,rgba(120,18,14,.42) 100%);
  animation:vignetteIn .8s ease-out both;
}
@keyframes vignetteIn{from{opacity:0}to{opacity:1}}
.bt-flash{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;background:rgba(232,200,106,.25)}
.bt-flash.on{animation:flashOn .3s ease-out}
@keyframes flashOn{0%{opacity:.6}100%{opacity:0}}
.battle.bt-shake{animation:btShake .16s ease-in-out}
@keyframes btShake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-4px,2px)}
  40%{transform:translate(4px,-2px)}
  60%{transform:translate(-3px,-1px)}
  80%{transform:translate(2px,1px)}
}
.slash{
  position:absolute;height:2px;width:0;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--slashcolor,#e0c082),transparent);
  transform:translate(-50%,-50%) rotate(-18deg);
  animation:slashfx .36s ease-out forwards;
}
@keyframes slashfx{0%{opacity:0;width:0}30%{opacity:1;width:98px}100%{opacity:0;width:122px}}

/* ---------- 剧情杀全屏分镜 ---------- */
.bt-cinema{
  position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:6% 8%;
  overflow:hidden;background:rgba(8,6,5,.62);animation:cinIn .4s ease-out both;
}
body.light .bt-cinema{background:rgba(30,24,18,.7)}
.cin-vig{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 18%,rgba(0,0,0,.72) 100%);
}
.cin-flash{position:absolute;inset:0;pointer-events:none;background:#8b1a12;opacity:0}
.cin-flash.on{animation:cinFlash .55s ease-out}
@keyframes cinFlash{0%{opacity:0}10%{opacity:.85}100%{opacity:0}}
.cin-top{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:cinNameIn .7s cubic-bezier(.2,.8,.3,1) both;
}
.cin-by{font-size:12.5px;letter-spacing:.3em;color:var(--t2)}
.cin-name{
  font-size:clamp(30px,6vw,54px);font-weight:700;letter-spacing:.24em;color:var(--gold2);
  white-space:nowrap;
  text-shadow:0 0 30px rgba(224,192,130,.35),0 3px 12px rgba(0,0,0,.8);
}
.cin-lines{
  position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;
  align-items:center;max-width:660px;min-height:84px;
}
.cin-line{
  font-size:15px;line-height:2;letter-spacing:.04em;color:var(--t1);
  text-align:center;white-space:pre-wrap;opacity:0;
  animation:cinLineIn .6s ease-out forwards;
}
.cin-line.dim{font-size:13px;color:var(--t2)}
.cin-tip{
  position:absolute;left:0;right:0;bottom:6%;z-index:2;text-align:center;
  font-size:11px;letter-spacing:.3em;color:var(--t3);
  animation:cinTip 1.4s ease-in-out infinite;
}
@keyframes cinIn{from{opacity:0}to{opacity:1}}
@keyframes cinNameIn{
  0%{opacity:0;transform:scale(1.3);letter-spacing:.5em;filter:blur(6px)}
  100%{opacity:1;transform:scale(1);letter-spacing:.24em;filter:blur(0)}
}
@keyframes cinLineIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes cinTip{0%,100%{opacity:.25}50%{opacity:.75}}

/* ---------- 战斗结算面板 ---------- */
.bt-result{
  position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:24px;
  background:rgba(10,8,6,.84);animation:resultIn .35s ease-out both;
}
body.light .bt-result{background:rgba(244,236,221,.92)}
.rs-title{
  font-size:52px;font-weight:700;letter-spacing:.24em;line-height:1.25;color:var(--gold2);
  text-shadow:0 0 30px rgba(224,192,130,.3),0 3px 14px rgba(0,0,0,.7);
}
.bt-result.lose .rs-title{color:#a5423a;text-shadow:0 0 30px rgba(165,66,58,.35),0 3px 14px rgba(0,0,0,.7)}
.rs-sub{font-size:13px;letter-spacing:.3em;color:var(--t2)}
.rs-rewards{
  display:flex;flex-direction:column;gap:8px;min-width:250px;max-width:86%;
  padding:16px 22px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:rgba(34,27,22,.6);
}
body.light .rs-rewards{background:rgba(250,245,234,.72)}
.rs-row{display:flex;justify-content:space-between;gap:28px;font-size:13px;color:var(--t2);line-height:1.8}
.rs-row b{font-weight:600;color:var(--gold2);letter-spacing:.04em}
.rs-row.drops{flex-direction:column;gap:2px}
.rs-row.drops b{color:var(--t1)}
.rs-tip{font-size:12px;letter-spacing:.06em;color:var(--t3)}
.rs-close{height:42px;padding:0 44px;font-size:14px}
@keyframes resultIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}

/* ---------- 窄屏 ---------- */
@media (max-width:760px){
  .bt-hud{padding:16px 10px 0;gap:8px}
  .bt-unit{width:128px;padding:5px 6px 4px}
  .bt-unit.me{width:142px}
  .u-name{font-size:12px}
  .u-tag{font-size:8.5px}
  .bt-hud-mid b{font-size:13px}
  .bt-line.me{left:2%;right:46%}
  .bt-line.foe{left:46%;right:2%}
  .bt-fighter{height:min(30vh,200px);min-height:84px}
  .bt-line[data-n="2"] .bt-fighter{height:min(26vh,182px)}
  .bt-line[data-n="3"] .bt-fighter{height:min(20vh,148px)}
  .bt-line[data-n="4"] .bt-fighter{height:min(17vh,124px)}
  .bt-line[data-n="5"] .bt-fighter{height:min(15vh,110px)}
  .bt-hud-side.n2 .bt-unit{width:112px}
  .bt-hud-side.n2 .bt-unit.me{width:120px}
  .bt-hud-side.n3 .bt-unit,.bt-hud-side.n4 .bt-unit,.bt-hud-side.n5 .bt-unit{width:84px}
  .bt-hud-side.n3 .bt-unit.me,.bt-hud-side.n4 .bt-unit.me,.bt-hud-side.n5 .bt-unit.me{width:94px}
  .bt-banner b{font-size:17px;padding:2px 12px}
  .bt-banner.win b,.bt-banner.lose b{font-size:38px}
  .cin-name{font-size:26px;letter-spacing:.14em}
  .cin-line{font-size:13px}
  .combatbar{padding:10px 10px 12px;gap:8px}
  .cb-skills{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));flex-basis:100%}
  .skbtn{height:48px}
  .skbtn .sk-nm{font-size:13px}
  .skbtn .sk-sub{font-size:10px}
  .combatbar .act{height:44px;padding:0 10px}
  .rs-title{font-size:40px}
}
@media (max-height:660px){
  .bt-hud{padding-top:14px}
  .u-buffs{min-height:16px;padding-bottom:6px}
  .bt-arena{min-height:128px}
  .bt-fighter{height:min(28vh,210px);min-height:88px}
  .bt-line[data-n="2"] .bt-fighter{height:min(24vh,176px)}
  .bt-line[data-n="3"] .bt-fighter{height:min(18vh,142px)}
  .bt-line[data-n="4"] .bt-fighter{height:min(15vh,118px)}
  .bt-line[data-n="5"] .bt-fighter{height:min(13vh,104px)}
  .bt-unit{width:142px}
  .bt-unit.me{width:158px}
  .skbtn,.combatbar .act{height:44px}
  .bt-banner{top:8%}
}
/* ---------- prefers-reduced-motion：降级（不动 HUD/飘字信息，只关运动） ---------- */
@media (prefers-reduced-motion: reduce){
  .bt-fighter.enter .fig-inner,.fig-inner.p-windup,.fig-inner.p-hit,.fig-inner.p-hurt,
  .fig-inner.p-dodge,.fig-inner.p-parry,.fig-inner.p-cast,.fig-inner.p-kneel,
  .fig-inner.p-win,.bt-fighter.stun .fig-inner,.battle.bt-shake{
    animation:none !important;
  }
  .bt-banner{animation-duration:.6s}
  .dmgnum{animation-duration:.62s}
  .bt-lowhp.on,.bt-combo.pop b{animation:none}
  .bt-lowhp.on{opacity:.8}
  .bt-cinema,.cin-top,.cin-line{animation:none}
  .cin-line{opacity:1}
  .bt-unit.crit .u-hp{animation:none}
}

/* ============================================================
   战斗视觉打磨 v2（第二轮验收 A–G，覆盖上方同名规则）
   A 墨炭剪影 / B 更大 HUD / C 飘字约束 / D 横幅分层 / E 多敌人错位
   F 暗金胜负 / G 战斗日志模式
   ============================================================ */

/* ---------- A. 角色：黄铜小人（深色）/ 墨色剪影（浅色）+ 金色轮廓光 ---------- */
.bt-fighter{color:#e6c065}
.bt-fighter.ally{color:#d8bd85}
.bt-fighter.foe{color:#a89f92}
/* 身体竖向渐变：深色主题=暖金玩家 / 冷灰敌人；浅色主题=墨黑剪影 */
.bt-fighter .fg-a{stop-color:#f2d377}
.bt-fighter .fg-b{stop-color:#a9772e}
.bt-fighter.ally .fg-a{stop-color:#e0c893}
.bt-fighter.ally .fg-b{stop-color:#96763c}
.bt-fighter.foe .fg-a{stop-color:#b7afa2}
.bt-fighter.foe .fg-b{stop-color:#5f564d}
.bt-fighter .fig-outline{stroke:#120c07;opacity:.45}
.bt-fighter svg{
  filter:drop-shadow(0 0 6px rgba(201,164,92,.24))
         drop-shadow(0 8px 14px rgba(0,0,0,.55));
}
body.light .bt-fighter{color:#241d16}
body.light .bt-fighter.ally{color:#2c251d}
body.light .bt-fighter.foe{color:#1f1a14}
body.light .bt-fighter .fg-a{stop-color:#43382d}
body.light .bt-fighter .fg-b{stop-color:#1c1712}
body.light .bt-fighter.ally .fg-a{stop-color:#4d4133}
body.light .bt-fighter.ally .fg-b{stop-color:#2b241c}
body.light .bt-fighter.foe .fg-a{stop-color:#3a332b}
body.light .bt-fighter.foe .fg-b{stop-color:#1f1a14}
body.light .bt-fighter .fig-outline{stroke:#f7f0e3;opacity:.5}
body.light .bt-fighter svg{
  filter:drop-shadow(0 0 1px rgba(255,250,240,.55))
         drop-shadow(0 0 6px rgba(168,132,63,.20))
         drop-shadow(0 6px 10px rgba(60,50,38,.18));
}
/* 剧情杀时把角色提亮成白/金，火焰刀有视觉落点 */
.battle.cinematic .bt-fighter svg{
  filter:brightness(1.75) saturate(1.1)
         drop-shadow(0 0 16px rgba(255,150,60,.45))
         drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.bt-fighter .f-shadow{
  width:52%;height:6px;bottom:-3px;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.55),transparent 72%);
  filter:blur(2.5px);
}
.bt-line[data-n="1"] .bt-fighter{height:min(26vh,208px);min-height:132px}
.bt-line[data-n="2"] .bt-fighter{height:min(24vh,192px);min-height:124px}
.bt-line[data-n="3"] .bt-fighter{height:min(22vh,178px);min-height:116px}
.bt-line[data-n="4"] .bt-fighter{height:min(18vh,152px);min-height:96px}
.bt-line[data-n="5"] .bt-fighter{height:min(16vh,130px);min-height:82px}

/* E. 多敌人 / 多队友错位：主敌居中偏右，adds 左右各偏开、缩小、降透明度 */
.bt-fighter{transform:translateY(var(--dy,0px)) scale(var(--sc,1)) var(--flip,none)}
/* 旧 .bt-fighter.foe 的 transform 特异性更高，这里显式合成翻转+错位 */
.bt-fighter.foe{transform:translateY(var(--dy,0px)) scale(var(--sc,1)) scaleX(-1)}
.bt-line[data-n="3"]{gap:0}
.bt-line.foe[data-n="2"] .bt-fighter:nth-child(2){--sc:.88;--dy:12px;opacity:.86;margin-left:-22px}
.bt-line.foe[data-n="3"] .bt-fighter:nth-child(1){order:2;--sc:1;--dy:0;z-index:3;margin-right:4px}
.bt-line.foe[data-n="3"] .bt-fighter:nth-child(2){order:1;--sc:.86;--dy:15px;opacity:.84;z-index:2;margin-right:-30px}
.bt-line.foe[data-n="3"] .bt-fighter:nth-child(3){order:3;--sc:.82;--dy:-8px;opacity:.74;z-index:1;margin-left:-32px}
.bt-line.me[data-n="2"] .bt-fighter:nth-child(2){--sc:.88;--dy:8px;opacity:.92;margin-left:-18px}
.bt-line.me[data-n="3"] .bt-fighter:nth-child(2){--sc:.86;--dy:12px;opacity:.9;margin-left:-22px}
.bt-line.me[data-n="3"] .bt-fighter:nth-child(3){--sc:.8;--dy:-6px;opacity:.82;margin-left:-24px}

/* ---------- B. HUD：整体放大、左右对称、中间只做装饰 ---------- */
.bt-hud{
  position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-start;gap:8px;width:100%;max-width:940px;margin:0 auto;
  padding:38px 14px 0;z-index:3;
}
.bt-hud-side{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.bt-hud-side.me{justify-content:flex-start;max-width:48%}
.bt-hud-side.foe{justify-content:flex-end;max-width:60%}
.bt-hud-mid{
  position:absolute;left:50%;top:6px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:96px;pointer-events:none;opacity:.85;text-align:center;
}
.bt-hud-mid b{
  font-size:12.5px;font-weight:600;letter-spacing:.22em;color:var(--t3);
  text-shadow:none;
}
.bt-hud-mid.scripted b{color:#b8776a}
.bt-hud-mid .bt-round{font-size:10px;letter-spacing:.14em;color:var(--t3)}
.bt-unit{
  width:236px;max-width:100%;padding:10px 12px 8px;
  background:linear-gradient(180deg,rgba(36,29,23,.82),rgba(24,19,15,.68));
  border:1px solid var(--line);border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(236,229,216,.045);
}
body.light .bt-unit{
  background:linear-gradient(180deg,rgba(250,245,234,.94),rgba(244,236,221,.88));
  box-shadow:0 4px 14px rgba(60,50,38,.12);
}
.bt-hud-side.n1 .bt-unit{width:236px}
.bt-hud-side.n2 .bt-unit{width:160px}
.bt-hud-side.n3 .bt-unit{width:132px}
.bt-hud-side.n4 .bt-unit{width:112px}
.bt-hud-side.n5 .bt-unit{width:100px}
/* 旧的 .bt-unit.me 按数量写死过宽度，这里用同等特异性覆盖，保证玩家/敌人左右对称 */
.bt-hud-side.n1 .bt-unit.me{width:236px}
.bt-hud-side.n2 .bt-unit.me{width:160px}
.bt-hud-side.n3 .bt-unit.me{width:132px}
.bt-hud-side.n4 .bt-unit.me{width:112px}
.bt-hud-side.n5 .bt-unit.me{width:100px}
.u-head{gap:7px;padding-bottom:6px}
.u-tag{font-size:11px;padding:1px 5px;letter-spacing:.05em;border-radius:3px;line-height:1.5}
.u-name{font-size:14px}
.u-lv{font-size:11px}
.u-bars{gap:4px}
.u-hp{height:10px;border-radius:3px}
.u-mp{height:6px}
.u-gauge{height:7px}
.u-hp .hp-num{font-size:12px;font-weight:600;right:5px}
.u-mp .mp-num,.u-gauge .g-num{font-size:10px;right:5px}
.bt-unit.foe .hp-num,.bt-unit.foe .mp-num,.bt-unit.foe .g-num{left:5px;right:auto}
.u-buffs{height:24px;min-height:24px;margin-top:7px;padding-bottom:0;gap:4px 6px;overflow:visible}
.u-buff{width:16px;height:16px}
.u-buff .ub-char{font-size:10.5px}
.u-buff .ub-stack{font-size:8.5px}
.u-buff .ub-t{bottom:-8px;font-size:8px}
.u-overhead{top:-17px;font-size:11px}
.bt-hud-side.n3 .u-name,.bt-hud-side.n4 .u-name,.bt-hud-side.n5 .u-name{font-size:13px}
.bt-hud-side.n4 .u-lv,.bt-hud-side.n5 .u-lv{font-size:9.5px}

/* ---------- C. 飘字：夹在舞台内、不压 HUD ---------- */
.bt-floats{overflow:hidden}
.dmgnum{animation:dmgRise2 1.05s ease-out forwards}
.dmgnum .dmg-main{font-size:21px}
.dmgnum.crit .dmg-main{font-size:29px}
.dmgnum .dmg-cap{font-size:11.5px}
.dmgnum .dmg-part{font-size:10px}
@keyframes dmgRise2{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.74)}
  16%{opacity:1;transform:translate(-50%,-64%) scale(1.06)}
  100%{opacity:0;transform:translate(-50%,-126%) scale(1)}
}

/* ---------- D. 横幅分层：普通招式只留小角标，中央大字只给主动技/剧情杀/胜负 ---------- */
.bt-banner{top:18%;z-index:7}
.bt-banner b{
  font-size:19px;letter-spacing:.18em;padding:2px 22px;
  border-top:1px solid rgba(201,164,92,.35);border-bottom:1px solid rgba(201,164,92,.35);
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.42),transparent);
}
.bt-banner.gold b{color:var(--gold2)}
.bt-banner.win b,.bt-banner.lose b{font-size:54px;letter-spacing:.32em}
.bt-banner.win b{color:var(--gold2);text-shadow:0 0 34px rgba(224,192,130,.42),0 4px 18px rgba(0,0,0,.8)}
.bt-banner.lose b{color:#a1453c;text-shadow:0 0 30px rgba(140,36,28,.4),0 4px 18px rgba(0,0,0,.8)}
.bt-atk-tag{
  position:absolute;z-index:6;transform:translate(-50%,-100%);
  font-size:11.5px;letter-spacing:.08em;color:var(--t2);white-space:nowrap;
  padding:1px 9px;border-radius:10px;border:1px solid var(--line);
  background:rgba(20,16,13,.55);pointer-events:none;
  animation:atkTagIn .9s ease-out forwards;
}
body.light .bt-atk-tag{background:rgba(250,245,234,.82);color:var(--t2)}
@keyframes atkTagIn{
  0%{opacity:0;transform:translate(-50%,-82%)}
  18%{opacity:1;transform:translate(-50%,-100%)}
  100%{opacity:0;transform:translate(-50%,-124%)}
}

/* ---------- 背景：可读的水墨远山 + 月晕 + 地平金线 ---------- */
.bt-bg{background:linear-gradient(180deg,#1c1612 0%,#181310 62%,#14100d 100%)}
.bt-sky{
  background:
    radial-gradient(circle at 77% 12%, rgba(240,232,214,.15) 0 1.1%, rgba(240,232,214,.05) 2.4%, transparent 18%),
    radial-gradient(ellipse 66% 22% at 50% 102%, rgba(201,164,92,.10), transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,0) 62%);
}
.bt-hills{
  /* 远山略亮、近山墨黑：用大半径椭圆在舞台下半叠出 4~5 道山脊线 */
  background:
    radial-gradient(ellipse 110% 80% at 12% 122%, #0d0a08 0 72%, transparent 72.6%),
    radial-gradient(ellipse 120% 85% at 90% 126%, #090706 0 72%, transparent 72.6%),
    radial-gradient(ellipse 150% 95% at 60% 122%, #221a14 0 66%, transparent 66.6%),
    radial-gradient(ellipse 200% 60% at 50% 124%, #060504 0 82%, transparent 82.6%),
    radial-gradient(ellipse 180% 120% at 25% 120%, #352a20 0 62%, transparent 62.6%),
    radial-gradient(ellipse 170% 110% at 82% 118%, #2d231b 0 62%, transparent 62.6%);
}
.bt-hills::after{
  content:"";position:absolute;left:0;right:0;bottom:20%;height:18%;
  background:linear-gradient(180deg,transparent,rgba(236,229,216,.045) 50%,transparent);
  pointer-events:none;
}
.bt-ground{
  top:auto;bottom:0;height:22%;
  background:linear-gradient(180deg,transparent 0%,rgba(8,6,5,.45) 46%,rgba(6,5,4,.74) 100%);
  border-top:1px solid rgba(201,164,92,.22);
  box-shadow:0 -1px 0 rgba(130,36,26,.30),0 -22px 44px rgba(0,0,0,.28) inset;
}
body.light .bt-bg{background:linear-gradient(180deg,#f5eee1 0%,#f0e8d9 62%,#ece3d2 100%)}
body.light .bt-sky{
  background:
    radial-gradient(circle at 77% 12%, rgba(168,132,63,.20) 0 1.1%, rgba(168,132,63,.06) 2.4%, transparent 18%),
    radial-gradient(ellipse 66% 22% at 50% 102%, rgba(168,132,63,.12), transparent 72%),
    linear-gradient(180deg, rgba(60,50,38,.05), rgba(60,50,38,0) 62%);
}
body.light .bt-hills{
  background:
    radial-gradient(ellipse 110% 80% at 12% 122%, rgba(52,42,32,.34) 0 72%, transparent 72.6%),
    radial-gradient(ellipse 120% 85% at 90% 126%, rgba(52,42,32,.30) 0 72%, transparent 72.6%),
    radial-gradient(ellipse 150% 95% at 60% 122%, rgba(60,50,38,.20) 0 66%, transparent 66.6%),
    radial-gradient(ellipse 200% 60% at 50% 124%, rgba(45,36,28,.38) 0 82%, transparent 82.6%),
    radial-gradient(ellipse 180% 120% at 25% 120%, rgba(72,60,46,.13) 0 62%, transparent 62.6%),
    radial-gradient(ellipse 170% 110% at 82% 118%, rgba(72,60,46,.11) 0 62%, transparent 62.6%);
}
body.light .bt-hills::after{background:linear-gradient(180deg,transparent,rgba(255,250,240,.35) 50%,transparent)}
body.light .bt-ground{
  background:linear-gradient(180deg,transparent 0%,rgba(60,50,38,.10) 55%,rgba(60,50,38,.16) 100%);
  border-top:1px solid rgba(168,132,63,.30);
  box-shadow:0 -1px 0 rgba(168,132,63,.20);
}

/* ---------- 战斗条：无主动技=「自动普攻中」状态条；有技能时技能按钮为主角 ---------- */
.combatbar{
  width:min(880px,100%);padding:12px 20px 14px;display:flex;flex-wrap:nowrap;
  gap:10px;align-items:stretch;justify-content:center;border-top:1px solid var(--line);
}
.cb-skills{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;
  flex:1 1 auto;max-width:660px;min-width:0;
}
.cb-empty{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;
  flex:1 1 auto;max-width:660px;min-height:62px;padding:8px 16px;
  border:1px dashed var(--line2);border-radius:var(--r);
  background:linear-gradient(90deg,rgba(201,164,92,.06),transparent 72%);
}
.cb-state{display:flex;align-items:center;gap:8px;font-size:13.5px;letter-spacing:.08em;color:var(--t2)}
.cb-state .dot{
  width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 9px rgba(201,164,92,.65);animation:cbDot 1.4s ease-in-out infinite;
}
.cb-tip{font-size:11.5px;color:var(--t3);letter-spacing:.02em}
@keyframes cbDot{0%,100%{opacity:.45}50%{opacity:1}}
.cb-acts{display:flex;gap:8px;flex:0 0 auto;align-items:stretch}
.skbtn{
  height:62px;display:flex;align-items:center;gap:8px;padding:0 10px;text-align:left;
  position:relative;overflow:hidden;min-width:0;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel),rgba(24,19,15,.9));
  color:var(--t1);transition:border-color .15s,background .15s,opacity .2s;
}
body.light .skbtn{background:linear-gradient(180deg,var(--panel),rgba(244,236,221,.9))}
.skbtn .sk-ico{
  flex:0 0 30px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:15px;font-weight:600;border-radius:7px;
  border:1px solid rgba(201,164,92,.45);color:var(--gold2);
  background:radial-gradient(circle,rgba(201,164,92,.18),transparent 72%);
  text-shadow:0 0 10px rgba(201,164,92,.35);
}
.skbtn .sk-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.skbtn .sk-nm{
  font-size:14.5px;font-weight:500;letter-spacing:.04em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;color:var(--t1);
}
.skbtn .sk-sub{font-size:11px;font-weight:400;color:var(--t3);letter-spacing:.03em}
.skbtn.rel{
  border-color:rgba(201,164,92,.5);
  background:linear-gradient(180deg,rgba(201,164,92,.12),rgba(24,19,15,.9));
}
body.light .skbtn.rel{background:linear-gradient(180deg,rgba(201,164,92,.16),rgba(244,236,221,.9))}
.skbtn.rel .sk-nm{color:var(--gold2)}
.skbtn .cdring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .2s}
.skbtn .cdring.on{opacity:1}
.skbtn .sk-cd{
  position:absolute;right:8px;top:4px;font-size:12px;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:var(--line2);background:var(--panel2)}
.skbtn:active:not(:disabled){transform:translateY(1px)}
.skbtn:disabled{opacity:.42;cursor:not-allowed}
.skbtn.nomp .sk-sub{color:#c07a70}
.skbtn.cooling .sk-nm{color:var(--t2)}
.combatbar .act{height:62px;display:flex;align-items:center;justify-content:center;padding:0 16px;font-size:13.5px;white-space:nowrap}

/* ---------- F. 胜负：暗金 / 墨色，「胜/败」单独一层、红色减半 ---------- */
@keyframes victoryIn{from{opacity:0}to{opacity:1}}
.battle.victory::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at 50% 52%,transparent 44%,rgba(201,164,92,.16) 100%);
  animation:victoryIn .9s ease-out both;
}
.battle.defeat::after{
  background:radial-gradient(ellipse at 50% 55%,transparent 46%,rgba(110,22,18,.22) 100%);
  animation:victoryIn .9s ease-out both;
}
.bt-result{background:radial-gradient(ellipse at 50% 40%,rgba(30,24,18,.92),rgba(8,6,5,.94) 72%)}
body.light .bt-result{background:radial-gradient(ellipse at 50% 40%,rgba(250,245,234,.95),rgba(240,232,219,.96) 72%)}
.bt-result.win .rs-title{color:var(--gold2)}
.bt-result.lose .rs-title{color:#a1453c}

/* ---------- 剧情杀：红色收敛，人物仍可见 ---------- */
.bt-cinema{background:rgba(8,6,5,.52)}
body.light .bt-cinema{background:rgba(30,24,18,.58)}
@keyframes cinFlash{0%{opacity:0}10%{opacity:.5}100%{opacity:0}}

/* ---------- G. 战斗日志模式：紧凑、语义着色、分隔 ---------- */
.logwrap.battle-mode{
  height:clamp(116px,16vh,168px);
  border-top-color:rgba(201,164,92,.20);
  background:linear-gradient(180deg,#1d1713,#191410);
  transition:height .3s ease,background .3s ease;
}
body.light .logwrap.battle-mode{
  background:linear-gradient(180deg,#f6f0e4,#f2ece0);
  border-top-color:rgba(168,132,63,.22);
}
.logwrap.battle-mode .log{padding:10px 20px 12px}
.logwrap.battle-mode .ln{
  font-size:12.5px;line-height:1.72;margin-bottom:0;letter-spacing:.01em;color:var(--t2);
}
.logwrap.battle-mode .ln.dim{font-size:11px;letter-spacing:.14em;color:#8a7f71;margin:3px 0 1px}
.logwrap.battle-mode .ln.foe{color:#cf9f92}
.logwrap.battle-mode .ln.me{color:#d8c8a4}
.logwrap.battle-mode .ln.good{color:#9fbd8b}
.logwrap.battle-mode .ln.bad{color:#cf8377}
.logwrap.battle-mode .ln.sys{font-size:11px;color:var(--t3)}
.logwrap.battle-mode .ln.combat{color:#b9ae9d}
.logwrap.battle-mode .ln.quest,.logwrap.battle-mode .ln.title{
  font-size:11px;color:var(--t3);text-align:left;margin:0;letter-spacing:.04em;
}
.logwrap.battle-mode .ln.sys:empty{height:6px}
body.light .logwrap.battle-mode .ln.foe{color:#8d4a3e}
body.light .logwrap.battle-mode .ln.me{color:#6a5636}
body.light .logwrap.battle-mode .ln.good{color:#4c7a4e}
body.light .logwrap.battle-mode .ln.bad{color:#9c4438}
body.light .logwrap.battle-mode .ln.dim{color:#91867a}

/* ---------- 第三轮补丁：飘字槽位/短寿命、连击单行、剧情杀火焰 ---------- */
.dmgnum{animation:dmgRise3 .72s ease-out forwards}
@keyframes dmgRise3{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.76)}
  18%{opacity:1;transform:translate(-50%,-60%) scale(1.04)}
  100%{opacity:0;transform:translate(-50%,-112%) scale(1)}
}
.bt-combo{
  display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:baseline;
  gap:5px;white-space:nowrap;min-width:92px;justify-content:flex-end;
}
.bt-combo b,.bt-combo span{display:inline-block;white-space:nowrap}
/* 剧情杀：旧飘字/连击淡出，HUD 压暗，火焰刀有火 */
.battle.cinematic .bt-floats{opacity:0;transition:opacity .2s}
.battle.cinematic .bt-hud{opacity:.5;transition:opacity .3s}
.bt-cinema{background:rgba(8,6,5,.4)}
body.light .bt-cinema{background:rgba(30,24,18,.5)}
.cin-ember{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 46% at 50% 74%,rgba(224,90,42,.22),transparent 72%);
  animation:cinEmber 2.2s ease-in-out infinite;
}
@keyframes cinEmber{0%,100%{opacity:.5}50%{opacity:1}}
.cin-fire{
  position:absolute;z-index:1;width:170px;height:170px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;filter:blur(1px);
  background:radial-gradient(circle,
    rgba(255,232,180,.95) 0%,rgba(255,160,70,.78) 16%,
    rgba(224,90,42,.50) 40%,rgba(139,26,18,.14) 64%,transparent 72%);
  animation:cinFire 1.05s ease-in-out infinite alternate;
}
.cin-fire-hit{width:250px;height:250px;animation-duration:.78s;animation-delay:.12s}
@keyframes cinFire{
  0%{transform:translate(-50%,-50%) scale(.92);opacity:.82}
  50%{transform:translate(-50%,-53%) scale(1.06);opacity:1}
  100%{transform:translate(-50%,-47%) scale(.98);opacity:.88}
}
.bt-cinema .cin-name{
  color:#ffd08a;
  text-shadow:0 0 38px rgba(224,90,42,.55),0 0 16px rgba(255,200,120,.45),0 3px 12px rgba(0,0,0,.8);
}
.cin-flash.on{animation:cinFlash .6s ease-out}
@keyframes cinFlash{0%{opacity:0}8%{opacity:.7}100%{opacity:0}}

/* ---------- 响应式 / 降级补充 ---------- */
@media (max-width:760px){
  .bt-hud{padding:34px 8px 0;gap:6px}
  .bt-hud-side.me{max-width:48%}
  .bt-hud-side.foe{max-width:52%}
  .bt-hud-side.n1 .bt-unit{width:158px}
  .bt-hud-side.n2 .bt-unit{width:124px}
  .bt-hud-side.n3 .bt-unit{width:104px}
  .bt-hud-side.n4 .bt-unit,.bt-hud-side.n5 .bt-unit{width:92px}
  .u-name{font-size:12.5px}
  .u-lv{font-size:10px}
  .u-hp .hp-num{font-size:10.5px}
  .u-mp .mp-num,.u-gauge .g-num{font-size:9px}
  .bt-line[data-n="1"] .bt-fighter{height:min(24vh,170px);min-height:108px}
  .bt-line[data-n="2"] .bt-fighter{height:min(21vh,156px);min-height:100px}
  .bt-line[data-n="3"] .bt-fighter{height:min(18vh,140px);min-height:90px}
  .bt-line[data-n="4"] .bt-fighter{height:min(15vh,120px);min-height:78px}
  .bt-line[data-n="5"] .bt-fighter{height:min(13vh,104px);min-height:68px}
  .combatbar{padding:10px 10px 12px;gap:8px;flex-wrap:wrap}
  .cb-skills{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));flex-basis:100%}
  .skbtn{height:54px}
  .skbtn .sk-nm{font-size:13px}
  .skbtn .sk-ico{flex-basis:30px;width:30px;height:30px;font-size:14px}
  .combatbar .act{height:46px;padding:0 12px;font-size:12.5px}
  .bt-banner.win b,.bt-banner.lose b{font-size:40px}
}
@media (max-height:660px){
  .bt-hud{padding-top:32px}
  .bt-line[data-n="1"] .bt-fighter{height:min(22vh,168px);min-height:104px}
  .bt-line[data-n="2"] .bt-fighter{height:min(20vh,156px);min-height:98px}
  .bt-line[data-n="3"] .bt-fighter{height:min(17vh,136px);min-height:88px}
  .skbtn,.combatbar .act{height:48px}
  .logwrap.battle-mode{height:clamp(96px,14vh,132px)}
}
@media (prefers-reduced-motion: reduce){
  .cb-state .dot{animation:none;opacity:.8}
  .bt-atk-tag{animation:none;opacity:1}
}

/* ---------- 状态页 ---------- */
.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)}
.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-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)}
}