/* ============================================================================
   灵山掌门 · 视觉升级 v0.21.1（DeepSeek 美术方案落地版）
   来源：灵山掌门_v3_样式底稿.css §1~§13（预览段 §14~16 未采用）
   落地方式：token 并入 + 场景层 #ms-scene + 真实类名移植（.panel/#btn-breath/.modal-card/.hand-card/.map-canvas 等）
   夜色：--ms-* 一份变量表挂 html.night，切类即全变
   ============================================================================ */

/* ── §1 设计 Token（DeepSeek 原案） ── */
:root{
  --ms-ink-deep:#241f18;
  --ms-ink-mid:#4a4033;
  --ms-ink-3:rgba(58,50,38,.62);
  --ms-ink-4:rgba(58,50,38,.40);
  --ms-ink-5:rgba(58,50,38,.22);
  --ms-ink-6:rgba(58,50,38,.12);
  --ms-ink-7:rgba(58,50,38,.06);
  --ms-paper-lit:#fdf8ec;
  --ms-paper-warm:#faf3e4;
  --ms-paper-deep:#e8dcc2;
  --ms-jade:rgba(255,253,247,.80);
  --ms-jade-2:rgba(255,253,247,.56);
  --ms-jade-3:rgba(255,253,247,.28);
  --ms-vermilion-lit:#d4564a;
  --ms-vermilion-press:#8e2a1f;
  --ms-vermilion-ghost:rgba(192,57,43,.10);
  --ms-gold-lit:#f0d47c;
  --ms-gold-deep:#a8852a;
  --ms-gold-ghost:rgba(232,195,74,.14);
  --ms-dai-lit:#8ea6bd;
  --ms-dai:#5f7183;
  --ms-dai-2:rgba(95,113,131,.34);
  --ms-dai-3:rgba(95,113,131,.16);
  --ms-wuxing-mu:#5d8a63; --ms-wuxing-huo:#c0503f; --ms-wuxing-tu:#a8852a;
  --ms-wuxing-jin:#8a93a0; --ms-wuxing-shui:#4f7f9e;
  --ms-mist:rgba(255,252,244,.90);
  --ms-moon:#f2e6cc;
  --ms-glow:#fff6e0;
  --ms-r-s:6px; --ms-r-m:12px; --ms-r-l:18px; --ms-r-xl:26px; --ms-r-full:999px;
  --ms-sh-1:0 1px 2px rgba(58,50,38,.06), 0 2px 8px rgba(58,50,38,.05);
  --ms-sh-2:0 2px 6px rgba(58,50,38,.08), 0 10px 26px rgba(58,50,38,.08);
  --ms-sh-3:0 4px 14px rgba(58,50,38,.12), 0 24px 52px rgba(58,50,38,.14);
  --ms-sh-in:inset 0 1px 0 rgba(255,255,255,.70), inset 0 -1px 0 rgba(58,50,38,.05);
  --ms-sh-in-deep:inset 0 2px 6px rgba(58,50,38,.16), inset 0 -1px 0 rgba(255,255,255,.55);
  --ms-sh-seal:0 0 0 1px rgba(192,57,43,.30), 0 2px 10px rgba(192,57,43,.20);
  --ms-sh-gold:0 1px 0 rgba(255,255,255,.45) inset, 0 8px 20px rgba(168,133,42,.26), 0 0 30px var(--ms-gold-ghost);
  --ms-t-fast:.14s; --ms-t-mid:.22s; --ms-t-slow:.30s; --ms-t-lazy:.35s;
  --ms-ease:cubic-bezier(.22,.61,.36,1);
  --ms-ease-soft:cubic-bezier(.33,1,.68,1);
  --ms-fs-hero:44px; --ms-fs-h2:20px; --ms-fs-sub:16px; --ms-fs-body:14px; --ms-fs-cap:12px; --ms-fs-tiny:10px;
  --ms-lh:1.65; --ms-lh-tight:1.35;
  --ms-ls:.04em; --ms-ls-wide:.14em;
}
/* 夜色映射（DeepSeek §15 预览变量表 → html.night，原案一致） */
html.night{
  color-scheme:dark;
  --ms-ink-deep:#f6ecd8; --ms-ink-mid:#d9cbb0;
  --ms-ink-3:rgba(232,220,200,.66); --ms-ink-4:rgba(232,220,200,.44);
  --ms-ink-5:rgba(232,220,200,.24); --ms-ink-6:rgba(232,220,200,.13); --ms-ink-7:rgba(232,220,200,.07);
  --ms-paper-lit:#242c3a; --ms-paper-warm:#1b2130; --ms-paper-deep:#141922;
  --ms-jade:rgba(30,38,52,.78); --ms-jade-2:rgba(30,38,52,.54); --ms-jade-3:rgba(30,38,52,.26);
  --ms-vermilion-lit:#e0655a; --ms-vermilion-press:#6f2017; --ms-vermilion-ghost:rgba(224,101,90,.14);
  --ms-gold-lit:#f3d98a; --ms-gold-deep:#8a6d1f; --ms-gold-ghost:rgba(243,217,138,.12);
  --ms-dai-lit:#a8bed3; --ms-dai:#8ea6bd; --ms-dai-2:rgba(142,166,189,.32); --ms-dai-3:rgba(142,166,189,.14);
  --ms-mist:rgba(20,26,36,.90); --ms-moon:#dfe6f2; --ms-glow:#8fa8c8;
  --ms-sh-1:0 1px 2px rgba(0,0,0,.30), 0 2px 10px rgba(0,0,0,.24);
  --ms-sh-2:0 2px 8px rgba(0,0,0,.36), 0 12px 30px rgba(0,0,0,.34);
  --ms-sh-3:0 6px 18px rgba(0,0,0,.46), 0 28px 60px rgba(0,0,0,.50);
  --ms-sh-in:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.30);
  --ms-sh-in-deep:inset 0 2px 8px rgba(0,0,0,.50), inset 0 -1px 0 rgba(255,255,255,.05);
  --ms-sh-seal:0 0 0 1px rgba(224,101,90,.30), 0 2px 12px rgba(224,101,90,.22);
  --ms-sh-gold:0 1px 0 rgba(255,255,255,.10) inset, 0 8px 22px rgba(0,0,0,.40), 0 0 30px var(--ms-gold-ghost);
}

/* ── §2 全局质感 ── */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:var(--ms-ls);
  line-height:var(--ms-lh);
}

/* ── §3 场景层 #ms-scene（替代批一的 body::before/::after 三层，五层景深+月+竹+朱印） ── */
#ms-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#ms-scene .moon{
  position:absolute;top:6.5%;right:12%;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%, var(--ms-moon) 0%, rgba(242,230,204,.55) 62%, rgba(242,230,204,0) 72%);
  box-shadow:0 0 42px 15px rgba(242,230,204,.28); opacity:.85;
  animation:ms-moon 9s var(--ms-ease-soft) infinite;
}
html.night #ms-scene .moon{
  background:radial-gradient(circle at 38% 34%, var(--ms-moon) 0%, rgba(223,230,242,.42) 62%, rgba(223,230,242,0) 72%);
  box-shadow:0 0 48px 17px rgba(143,168,200,.24); opacity:.92;
}
#ms-scene .moon-halo{
  position:absolute;top:1%;right:6%;width:150px;height:150px;border-radius:50%;
  border:1px solid rgba(242,230,204,.16);
  animation:ms-moon 12s var(--ms-ease-soft) infinite;
}
html.night #ms-scene .moon-halo{border-color:rgba(143,168,200,.14)}
@keyframes ms-moon{0%,100%{opacity:.76}50%{opacity:.96}}
#ms-scene .range{position:absolute;left:-6%;width:112%;background-repeat:no-repeat;background-size:100% 100%}
#ms-scene .r1{height:30%;top:4%;opacity:.20;filter:blur(2.4px)}
#ms-scene .r2{height:30%;top:13%;opacity:.30;filter:blur(1.2px)}
#ms-scene .r3{height:28%;top:24%;opacity:.42}
#ms-scene .r4{height:24%;top:38%;opacity:.30;filter:blur(.8px)}
#ms-scene .r5{height:20%;top:52%;opacity:.20;filter:blur(1.6px)}
html.night #ms-scene .range{filter:brightness(.62) saturate(.7)}
html.night #ms-scene .range.r3{filter:brightness(.72)}
#ms-scene .foot{
  position:absolute;left:0;right:0;bottom:0;height:42%;
  background:radial-gradient(80% 60% at 50% 100%, var(--ms-glow) 0%, transparent 70%);
  opacity:.42;
}
html.night #ms-scene .foot{opacity:.22}
#ms-scene .mist{
  position:absolute;left:-25%;width:150%;height:150px;
  background:
    radial-gradient(60% 100% at 30% 55%, var(--ms-mist) 0%, transparent 70%),
    radial-gradient(48% 90% at 68% 45%, var(--ms-mist) 0%, transparent 72%);
  opacity:.62; filter:blur(10px);
}
#ms-scene .m1{top:26%;animation:ms-drift 44s linear infinite}
#ms-scene .m2{top:44%;opacity:.46;animation:ms-drift 62s linear infinite reverse}
#ms-scene .m3{top:60%;opacity:.34;animation:ms-drift 80s linear infinite}
html.night #ms-scene .mist{opacity:.40}
@keyframes ms-drift{from{transform:translate3d(-8%,0,0)}to{transform:translate3d(8%,0,0)}}
#ms-scene .grain{
  position:absolute;inset:0;opacity:.34;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.30'/></svg>");
}
html.night #ms-scene .grain{opacity:.20;mix-blend-mode:screen}
#ms-scene .bamboo{
  position:absolute;left:-10px;top:2%;width:120px;opacity:.16;
  transform-origin:0 0; animation:ms-sway 11s var(--ms-ease-soft) infinite;
}
html.night #ms-scene .bamboo{opacity:.14}
@keyframes ms-sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
#ms-scene .seal{
  position:absolute;right:5.5%;bottom:7%;
  width:54px;height:54px;border-radius:var(--ms-r-s);
  border:2px solid var(--cinnabar);color:var(--cinnabar);
  display:grid;place-items:center;text-align:center;
  font-size:11px;line-height:1.05;letter-spacing:.06em;
  opacity:.30;transform:rotate(-4deg);
  box-shadow:var(--ms-sh-seal);
}
html.night #ms-scene .seal{border-color:var(--ms-vermilion-lit);color:var(--ms-vermilion-lit);opacity:.34}

/* ── §4 面板卡片：三层描边玉白玻璃（移植到 .panel/#topbar） ── */
.panel, #topbar{
  background:linear-gradient(180deg, var(--ms-jade) 0%, var(--ms-jade-2) 100%) !important;
  border:1px solid var(--ms-dai-2);
  border-radius:var(--ms-r-l);
  box-shadow:var(--ms-sh-2), var(--ms-sh-in);
  backdrop-filter:blur(10px) saturate(1.08);
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
  position:relative;
}
.panel::before, #topbar::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border-top:1px solid rgba(255,255,255,.55);
}
html.night .panel::before, html.night #topbar::before{border-top-color:rgba(255,255,255,.10)}
.panel::after, #topbar::after{
  content:"";position:absolute;inset:4px;border-radius:calc(var(--ms-r-l) - 5px);
  border:1px solid var(--ms-dai-3);pointer-events:none;
}
html.night .panel, html.night #topbar{
  background:linear-gradient(180deg, var(--ms-jade) 0%, var(--ms-jade-2) 100%) !important;
}

/* ── §6 吐纳大钮：三层环+墨气旋+朱砂脉冲+朱砂实底呼吸 ── */
#breath-wrap{position:relative;display:grid;place-items:center}
#breath-wrap::before{ /* 外层三环（halo/halo2/halo3 合成） */
  content:"";position:absolute;width:212px;height:212px;border-radius:50%;
  border:1px solid var(--ms-dai-2);
  box-shadow:inset 0 0 30px var(--ms-dai-3), 0 0 40px rgba(58,50,38,.06);
  pointer-events:none;
}
#breath-wrap::after{ /* 虚线内环 */
  content:"";position:absolute;width:194px;height:194px;border-radius:50%;
  border:1px dashed var(--ms-ink-6); pointer-events:none;
}
#btn-breath{
  position:relative;width:168px;height:168px;border-radius:50%;
  font-family:inherit;color:#fff8ee;border:none;cursor:pointer;
  background:radial-gradient(circle at 34% 28%, var(--ms-vermilion-lit) 0%, var(--cinnabar) 52%, var(--ms-vermilion-press) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22) inset,
    0 10px 26px rgba(142,42,31,.28),
    0 0 46px rgba(192,57,43,.20) !important;
  transition:transform var(--ms-t-fast) var(--ms-ease), box-shadow var(--ms-t-mid) var(--ms-ease);
  animation:ms-breath 4.6s var(--ms-ease-soft) infinite;
}
#btn-breath .breath-label{
  font-size:var(--ms-fs-hero);letter-spacing:.16em;margin-left:.16em;
  text-shadow:0 2px 10px rgba(90,20,12,.42);
}
#btn-breath:active{
  transform:scale(.965);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 6px 16px rgba(142,42,31,.34), 0 0 60px rgba(192,57,43,.32) !important;
}
@keyframes ms-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}
/* 墨气旋两片 + 朱砂脉冲：用 #breath-wrap 追加子元素（index.html 提供） */
#breath-wrap .ms-qi, #breath-wrap .ms-qi2, #breath-wrap .ms-pulse{position:absolute;border-radius:50%;pointer-events:none}
#breath-wrap .ms-qi{
  inset:26px;
  background:conic-gradient(from 0deg, transparent 0deg, var(--ms-ink-6) 90deg, transparent 180deg, var(--ms-ink-5) 270deg, transparent 360deg);
  opacity:.9; animation:ms-spin 26s linear infinite;
}
#breath-wrap .ms-qi2{inset:40px;opacity:.55;animation:ms-spin 38s linear infinite reverse}
@keyframes ms-spin{to{transform:rotate(360deg)}}
#breath-wrap .ms-pulse{
  inset:14px; border:1px solid var(--ms-vermilion-ghost);
  animation:ms-pulse 4.6s var(--ms-ease-soft) infinite;
}
@keyframes ms-pulse{0%{transform:scale(.94);opacity:.9}70%{transform:scale(1.10);opacity:0}100%{opacity:0}}

/* 突破金钮 */
#btn-break{
  background:linear-gradient(180deg, var(--ms-gold-lit) 0%, var(--gold) 46%, #c9a238 100%) !important;
  border:1px solid var(--ms-gold-deep) !important;
  color:#4a3712 !important;
  box-shadow:var(--ms-sh-gold) !important;
  text-shadow:0 .5px 0 rgba(255,255,255,.35);
  letter-spacing:.18em;
}

/* ── §7 进度条：内凹轨道+双色填充+流光（太极小人保留现有） ── */
#xp-bar{
  height:16px;border-radius:var(--ms-r-full);
  background:linear-gradient(180deg, var(--ms-ink-7), var(--ms-ink-6));
  border:1px solid var(--ms-dai-2);
  box-shadow:var(--ms-sh-in-deep), 0 1px 0 rgba(255,255,255,.5);
}
#xp-fill{box-shadow:0 0 14px rgba(232,195,74,.34), inset 0 1px 0 rgba(255,255,255,.5)}
#xp-fill::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size:220% 100%;
  animation:ms-flow 3.6s linear infinite;
}
@keyframes ms-flow{from{background-position:180% 0}to{background-position:-80% 0}}

/* ── §9 按钮体系 ── */
.btn-primary{
  font-size:var(--ms-fs-body);letter-spacing:.12em;
  padding:11px 22px;border-radius:var(--ms-r-m);
  border:1px solid var(--ms-vermilion-press);color:#fff6f2;
  background:linear-gradient(180deg, var(--ms-vermilion-lit) 0%, var(--cinnabar) 58%, var(--ms-vermilion-press) 100%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 6px 16px rgba(142,42,31,.24);
  transition:transform var(--ms-t-fast) var(--ms-ease), box-shadow var(--ms-t-mid) var(--ms-ease);
}
.btn-primary:active{transform:translateY(1px) scale(.985)}
.icon-btn{
  min-width:36px;min-height:36px;display:inline-grid;place-items:center;cursor:pointer;
  border-radius:var(--ms-r-m);border:1px solid var(--ms-dai-2);color:var(--ms-ink-mid);
  background:linear-gradient(180deg, var(--ms-jade-2), transparent) !important;
  font-family:inherit;
  transition:transform var(--ms-t-fast) var(--ms-ease), border-color var(--ms-t-mid) var(--ms-ease), color var(--ms-t-mid) var(--ms-ease);
}
.icon-btn:active{transform:scale(.94);border-color:var(--cinnabar);color:var(--cinnabar)}

/* ── §10 弹窗：纸白渐变+双线描边+顶部瑞光+遮罩玻璃化 ── */
.modal-mask{background:rgba(58,50,38,.34) !important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
html.night .modal-mask{background:rgba(4,6,10,.62) !important}
.modal-card{
  border-radius:var(--ms-r-xl);
  background:linear-gradient(180deg, var(--ms-paper-lit) 0%, var(--paper) 100%) !important;
  border:1px solid var(--ms-dai-2);
  box-shadow:var(--ms-sh-3), var(--ms-sh-in) !important;
}
.modal-card::after{
  content:"";position:absolute;inset:6px;border-radius:calc(var(--ms-r-xl) - 7px);
  border:1px solid var(--ms-dai-3);pointer-events:none;
}
html.night .modal-card{background:linear-gradient(180deg, #1c2432 0%, #141a24 100%) !important}

/* ── §11 斗法：手牌纸白竖卡+意图横幅+战报内凹 ── */
.hand-card{
  border-radius:var(--ms-r-m);border:1px solid var(--ms-dai-2) !important;
  background:linear-gradient(180deg, var(--ms-paper-lit) 0%, var(--paper) 100%) !important;
  color:var(--ms-ink-deep);
  box-shadow:var(--ms-sh-2), var(--ms-sh-in) !important;
}
html.night .hand-card{background:linear-gradient(180deg, #1e2634 0%, #151b25 100%) !important}
.hand-card b{color:var(--ms-ink-deep)}
.hand-card .hc-el{color:var(--ms-dai)}
.hand-card .hc-eff{color:var(--ms-vermilion)}
.hand-card:disabled{opacity:.48;filter:grayscale(.5)}
#battle-intent{
  min-height:37px;                 /* 与显示态同高：回合切换不再牵动弹窗高度 */
  border-radius:var(--ms-r-m);
  border:1px solid rgba(192,57,43,.34);
  background:linear-gradient(90deg, var(--ms-vermilion-ghost) 0%, transparent 100%) !important;
  color:var(--ms-ink-deep);
}
#battle-intent.is-empty{visibility:hidden}   /* 空时只藏内容、不撤位置 */
#battle-log{
  background:linear-gradient(180deg, var(--ms-ink-7), transparent) !important;
  border:1px solid var(--ms-dai-3);
}

/* ── §12 舆图：朱印方块地点 ── */
.map-canvas{
  background:linear-gradient(180deg, var(--ms-paper-lit) 0%, var(--paper) 100%);
  border:1px solid var(--ms-dai-2);
  box-shadow:var(--ms-sh-2), var(--ms-sh-in);
}
html.night .map-canvas{background:linear-gradient(180deg, #1a2130 0%, #12171f 100%)}
.map-spot .ms-icon{
  width:26px;height:26px;border-radius:5px;
  border:1.5px solid var(--cinnabar);color:var(--cinnabar);
  background:rgba(255,253,247,.72);
  box-shadow:var(--ms-sh-seal);
  font-size:11px;
}
html.night .map-spot .ms-icon{background:rgba(20,26,36,.78);border-color:var(--ms-vermilion-lit);color:var(--ms-vermilion-lit)}
.map-spot.locked .ms-icon{background:none;border-color:transparent;box-shadow:none;order-color:var(--ms-ink-5);color:var(--ms-ink-5);box-shadow:none;background:var(--ms-ink-7)}
.map-spot span{background:rgba(243,234,216,.7);padding:1px 5px;border-radius:var(--ms-r-s)}
html.night .map-spot span{background:rgba(14,17,23,.7);color:#d9cbb0}

/* ── §16b 自适应与降级 ── */
@media (max-width:360px){
  :root{--ms-fs-hero:38px}
  #breath-wrap::before{width:186px;height:186px}
  #breath-wrap::after{width:170px;height:170px}
  #btn-breath{width:148px;height:148px}
}
@media (prefers-reduced-motion:reduce){
  #ms-scene *, #btn-breath, #xp-fill::after{animation:none !important}
}

/* ── 批一旧背景退役：场景层已由 #ms-scene 承载 ── */
body::before, body::after{content:none !important}
body{
  background:
    radial-gradient(120% 70% at 50% 0%, var(--ms-glow) 0%, transparent 58%),
    linear-gradient(180deg, var(--ms-paper-warm) 0%, var(--paper) 46%, var(--ms-paper-deep) 100%);
}
html.night body{
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(96,124,166,.22) 0%, transparent 58%),
    linear-gradient(180deg, #131a26 0%, #0e1117 52%, #0a0d13 100%);
}
/* #page-root 页面也垫场景底色（保持一致） */
#page-root.open{background:linear-gradient(180deg, var(--ms-paper-warm) 0%, var(--ms-paper) 46%, var(--ms-paper-deep) 100%)}
html.night #page-root.open{background:linear-gradient(180deg, #131a26 0%, #0e1117 52%, #0a0d13 100%)}

/* ── 手机窄屏：境界行防腰斩（心魔段不折行、整行紧凑） ── */
#dao-heart{font-size:12.5px;letter-spacing:.02em;line-height:1.7}
#dao-heart span{white-space:nowrap}

/* ── 页面转场：前进从右滑入 / 返回从左滑回（真页面切换感） ── */
/* v3 视图常驻制：每页一个 .page-view，切走 display:none 保留状态 */
#page-root{display:none;position:fixed;inset:0;z-index:900;overflow:hidden}
#page-root.open{display:block;overflow:hidden;padding:0;background:var(--paper)}
.page-view{
  position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 10px 30px;display:none;
  background:
    radial-gradient(120% 60% at 50% 0%, var(--ms-glow) 0%, transparent 55%),
    linear-gradient(180deg, var(--ms-paper-warm) 0%, var(--ms-paper) 46%, var(--ms-paper-deep) 100%);
}
html.night .page-view{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(96,124,166,.20) 0%, transparent 55%),
    linear-gradient(180deg, #131a26 0%, #0e1117 52%, #0a0d13 100%);
}
.page-view.open{display:block}
.page-view.page-in-fwd{animation:page-in-fwd .2s var(--ms-ease) 1}
.page-view.page-in-back{animation:page-in-back .2s var(--ms-ease) 1}
.page-view.page-out-left{animation:page-out-left .2s var(--ms-ease) 1 forwards}
.page-view.page-out-right{animation:page-out-right .2s var(--ms-ease) 1 forwards}
@keyframes page-in-fwd{from{transform:translateX(9%);opacity:0}to{transform:none;opacity:1}}
@keyframes page-in-back{from{transform:translateX(-9%);opacity:0}to{transform:none;opacity:1}}
@keyframes page-out-left{to{transform:translateX(-7%);opacity:0}}
@keyframes page-out-right{to{transform:translateX(7%);opacity:0}}
.page-body.page-in-fwd,.page-body.page-in-back{animation:none}
.page-topbar{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
/* ============================================================================
   灵山舆图 · 重绘（v0.21.2）——参照明清古舆图画法：
   ①山用「山峰折线」符号群（三层景深：远淡多雾/中实带皴/近景枯笔）；
   ②水路多层叠粗细变化、山道短划珠链虚线；③淡月/罗盘/云气/朱印「舆图」填留白；
   ④地点朱印方块（丹房/市场），「待开化」压缩为淡墨小记；
   ⑤地图下沿卷轴承接。旧内联波浪 SVG 以 .map-svg{display:none} 退役，结构不动。
   昼夜各一份内联 SVG（透明底，纸底由渐变承担）。替换段：css/ms-upgrade.css 的「§12 舆图」整段。
   ============================================================================ */

/* 旧波浪 SVG 与旧印章样式退役 */
.map-canvas .map-svg{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-canvas{position:relative;border-radius:var(--ms-r-l);overflow:hidden;
  display:flex;align-items:center;justify-content:center;}
/* 画卷：canvas 只居中，画面按 390:720 等比放进 .map-stage。
   2026-09-19 修 —— 之前用 preserveAspectRatio:none 直接拉伸，桌面宽屏(1580x790)
   会把竖幅画面压成一条；现在宽屏时居中留白（纸底 + 卷轴本来就不难看）。 */
.map-canvas .map-stage{position:relative;flex:0 0 auto;width:100%;aspect-ratio:390/720;
  box-shadow:0 0 0 1px var(--ms-dai-3), 0 10px 30px rgba(58,50,38,.10);}
html.night .map-canvas .map-stage{box-shadow:0 0 0 1px rgba(142,166,189,.22), 0 10px 30px rgba(0,0,0,.35)}

/* 昼版舆图（透明底·墨色系） */

/* 大舆图底纹（2026-09-19 重绘）：山水改由内联 .map-svg 画，这里只留纸底与右上柔光 */
.map-canvas::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(120% 62% at 78% 6%, rgba(255,252,244,.50), rgba(255,252,244,0) 62%),
    repeating-linear-gradient(0deg, rgba(120,102,74,.016) 0 1px, rgba(0,0,0,0) 1px 6px);
  background-repeat:no-repeat,repeat;background-size:cover,100% 100%;
}
/* 夜版舆图（深底·淡米墨线） */

html.night .map-canvas::before{
  background-image:
    radial-gradient(120% 62% at 78% 6%, rgba(178,200,226,.10), rgba(0,0,0,0) 62%),
    repeating-linear-gradient(0deg, rgba(232,220,200,.012) 0 1px, rgba(0,0,0,0) 1px 6px);
}

/* 云气漂移带（两条极淡横带缓移，只动 transform） */
.map-canvas .map-note::before{display:none}

/* 地点：朱印方块（已开=朱砂描边纸白底；未开=淡墨小记不占版面；当前=实心朱砂+涟漪） */
.map-spot{background:none;border:none;gap:2px}
.map-spot .ms-icon{
  width:30px;height:30px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  border:1.6px solid var(--cinnabar);
  background:linear-gradient(180deg, var(--ms-paper-lit), var(--ms-paper-deep));
  color:var(--cinnabar);font-size:13px;font-family:"Kaiti SC","KaiTi",serif;
  box-shadow:var(--ms-sh-seal);
}
html.night .map-spot .ms-icon{
  background:linear-gradient(180deg, #20283a, #151b25);
  border-color:var(--ms-vermilion-lit);color:var(--ms-vermilion-lit);
}
.map-spot span{
  font-size:10px;letter-spacing:.18em;color:var(--ms-ink-3);
  background:rgba(243,234,216,.66);padding:0 4px;border-radius:3px;
}
html.night .map-spot span{background:rgba(14,17,23,.6);color:#d9cbb0}
.map-spot i{font-size:9px;color:var(--ms-ink-5);font-style:normal}
/* 地点具象剪影（丹炉 / 幌子 / 擂台），颜色跟随 .ms-icon 的 currentColor */
.map-spot .ms-glyph{width:19px;height:19px;display:block}
.map-spot.locked .ms-glyph{width:20px;height:20px;filter:blur(.5px)}
.map-spot:active .ms-icon{transform:scale(.92)}
/* 当前所在（样式备好，待地点与玩家位置产生真实关联后由数据驱动启用） */
.map-spot.is-here .ms-icon{background:var(--cinnabar);color:#fff6f2;border-color:var(--ms-vermilion-press)}
.map-spot.is-here::after{
  content:"";position:absolute;left:50%;top:14px;width:30px;height:30px;margin-left:-15px;
  border-radius:50%;border:1px solid rgba(192,57,43,.5);
  animation:map-ping 2.6s var(--ms-ease-soft) infinite;
}
@keyframes map-ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}
/* 未开化：压缩为淡墨小记，不占三行 */
.map-spot.locked{opacity:.42;gap:0;width:38px;margin-left:-19px;margin-top:-21px}  /* 待开化点只有「待开化」三字，宽度 38px，负 margin 也要跟着取半 */
.map-spot.locked .ms-icon{
  width:16px;height:16px;border-radius:3px;font-size:9px;
  border:1px solid var(--ms-ink-5);color:var(--ms-ink-5);
  background:var(--ms-ink-7);box-shadow:none;
}
.map-spot.locked span{font-size:9px;letter-spacing:.1em;color:var(--ms-ink-5);background:none}
html.night .map-spot.locked .ms-icon{background:none;border-color:transparent;order-color:rgba(232,220,200,.24);color:rgba(232,220,200,.24);background:rgba(232,220,200,.05)}
html.night .map-spot.locked span{color:rgba(232,220,200,.24)}

/* 地图与列表承接：下沿卷轴（天杆+卷身），note 文字居卷上 */
.map-canvas .map-stage::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:-6px;height:26px;
  background:linear-gradient(180deg, var(--ms-paper-deep) 0%, var(--ms-paper) 30%, var(--ms-paper-deep) 100%);
  border-top:1px solid var(--ms-dai-2);
  box-shadow:0 -4px 10px rgba(58,50,38,.08), 0 2px 6px rgba(58,50,38,.14), inset 0 1px 0 rgba(255,255,255,.5);
  border-radius:4px;
}
html.night .map-canvas .map-stage::after{
  background:linear-gradient(180deg, #1c2432 0%, #12171f 30%, #1c2432 100%);
  border-top:1px solid rgba(142,166,189,.32);
  box-shadow:0 -4px 10px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.map-note{
  position:absolute;left:0;right:0;bottom:0;height:24px;line-height:24px;
  font-size:10px;color:var(--ms-ink-4);text-align:center;margin:0;z-index:2;
  letter-spacing:.14em;
}

/* 云气：地图上两条极淡漂移带（transform 循环，与全屏云雾同手法） */
.map-canvas .map-mist{position:absolute;pointer-events:none}
.map-canvas::before{z-index:0}
.map-spot{z-index:2}
.map-note{z-index:3}

/* ── §12b-2 舆图设色（2026-09-19 宋画风）：墨为主，极淡赭石与花青为辅 ──
   赭石（暖）点染山石、屋舍、舟帆；花青（冷）晕染远峰、流水、波纹。
   两色都做昼夜两套：夜间提亮降饱和，免得在深底上发脏、发跳。 */
.map-canvas,#map-mini{
  --map-ink-solid:#4a4033;               /* 实色墨：浓淡全靠 opacity 拿捏，别用半透明墨再叠 opacity */
  --map-zhe:rgba(168,107,60,.30);
  --map-qing:rgba(74,107,138,.28);
  --map-qing-lit:rgba(104,142,176,.26);
}
html.night .map-canvas,html.night #map-mini{
  --map-ink-solid:#d9cbb0;
  --map-zhe:rgba(196,148,108,.24);
  --map-qing:rgba(128,170,205,.28);
  --map-qing-lit:rgba(152,192,226,.24);
}

/* ── §12c 见闻区下方的舆图微缩（与见闻日志区同宽同高，底图复用 .map-canvas::before 的同一份 SVG） ── */

/* 微缩舆图（2026-09-19）：底图改由 js/mapart.js 的横版画提供（内联 SVG，昼夜共用），
   点位与大舆图同一套坐标 —— 这里只管定位与层级 */
#map-mini .map-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#map-mini .map-stage{position:relative;flex:0 0 auto;width:100%;height:100%}
#map-mini{display:flex;align-items:center;justify-content:center}

#map-mini{
  /* 2026-09-19 与大地图同步：容器比例跟地图页一致（竖屏 390:720、宽屏 1200:600），
     画面用同一份 SVG，因此微缩 = 同一幅画的缩小版，标记百分比也与大地图相同 */
  position:relative;flex:0 0 auto;width:min(100%,36%);aspect-ratio:390/720;height:auto;margin:10px auto;
  overflow:hidden;border-radius:var(--ms-r-l);
  background:linear-gradient(180deg, var(--ms-paper-lit) 0%, var(--paper) 100%);
  border:1px solid var(--ms-dai-2);
  box-shadow:var(--ms-sh-2), var(--ms-sh-in);
}
html.night #map-mini{background:linear-gradient(180deg, #1a2130 0%, #12171f 100%)}
@media (min-width:900px){ #map-mini{width:100%;aspect-ratio:1200/600} }
#map-mini span{position:absolute;z-index:2;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  border:1.4px solid var(--cinnabar);background:rgba(255,253,247,.72);box-shadow:0 1px 2px rgba(58,50,38,.18)}
#map-mini span b{position:absolute;top:13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:9px;font-weight:400;letter-spacing:.1em;line-height:13px;padding:0 4px;border-radius:3px;
  color:var(--ms-ink-3);background:rgba(243,234,216,.74)}
html.night #map-mini span b{background:rgba(14,17,23,.62);color:#d9cbb0}
html.night #map-mini span{border-color:var(--ms-vermilion-lit);background:rgba(20,26,36,.72)}
#map-mini span.locked{width:6px;height:6px;margin:-3px 0 0 -3px;border-style:dashed;border-color:var(--ms-ink-5);
  background:none;box-shadow:none;opacity:.6}
html.night #map-mini span.locked{border-color:rgba(232,220,200,.3)}
/* ── 画布高度（批二丢失段补回）：撑满视口减顶栏 ── */
.map-canvas{height:calc(100vh - 110px);min-height:470px}

/* ── 地点印章定位（批二丢失段补回）：绝对定位按画布百分比落位 ── */
.map-spot{position:absolute;width:74px;text-align:center;margin-left:-37px;margin-top:-30px}
/* 定位语义：left/top = 标记**正中**所在位置。
   实测盒 74×60px，负 margin 取其半(-37/-30)即正中；
   不用 transform 居中 —— :active 期间 transform 元素 hit-test 会穿透。
   改 marker 文案长度时要同步这两个值；见闻区微缩共用同一套百分比，会一起对上。 */

/* ── 地图页禁滚动：消除「手指微动=滚动取消点击」的误触（画布高度自适应视口） ── */
.page-view[data-view="map"]{overflow:hidden}
.page-view[data-view="map"] .page-body{padding-bottom:8px}
/* 实验禁用：active 缩放疑似触发 hit-test 穿透 */

/* ── 弹窗层级：视图路由（900）之上，战斗/面板弹窗在任何页面都可见 ── */
.modal-mask{z-index:1200 !important}
#toast-root{z-index:1180 !important}   /* 弹窗（.modal-mask 1200）在上：toast 不该压住向导/公告 */

/* ============================================================================
   突破爆发特效（v0.21.2）——把「整屏闪一下」换成「从吐纳钮向外扩散的一次爆发」
   触发：body.is-holding（屏息压暗 0.5s）→ body.is-breaking（炸亮 0.46s + 泥金尾巴）
   位置：替换 css/main.css 中 #breakthrough-overlay 的 fadeIn 硬切（该硬切已由 ui.js 时序取代）
   时间轴例外说明：突破为高光时刻，特效 0.46~0.52s 超出常规 0.12~0.35s 规范，其余交互动效不变
   ============================================================================ */
/* 屏息前置拍：整屏轻压暗（body::after 复用为特效层，常态隐藏） */
body.is-holding::after{
  content:"";position:fixed;inset:0;z-index:1150;pointer-events:none;
  background:rgba(36,31,24,.24);
  animation:ms-hold .5s linear 1;
}
html.night body.is-holding::after{background:rgba(0,0,0,.34)}
@keyframes ms-hold{from{opacity:0}to{opacity:1}}

/* 炸亮：光核 + 双道硬色标扩散环 + 三层错位墨爆，screen 增亮，飞白 mask，单次扩散 */
body.is-breaking::after{
  content:"";position:fixed;inset:0;z-index:1150;pointer-events:none;overflow:hidden;
  mix-blend-mode:screen;
  background:
    /* 墨爆三层：错位小圆叠出不规则边界 */
    radial-gradient(circle 210px at 47% 41%, rgba(58,50,38,.30) 0%, rgba(58,50,38,.12) 46%, transparent 68%),
    radial-gradient(circle 168px at 54% 47%, rgba(74,64,51,.24) 0%, rgba(74,64,51,.10) 48%, transparent 66%),
    radial-gradient(circle 132px at 44% 52%, rgba(36,31,24,.20) 0%, transparent 58%),
    /* 扩散双环：硬色标成环（外环泥金，内环朱砂） */
    radial-gradient(circle at 50% 50%, transparent 41.2%, rgba(232,195,74,.48) 42.0%, rgba(232,195,74,.10) 44.2%, transparent 46.2%),
    radial-gradient(circle at 50% 50%, transparent 30.2%, rgba(192,57,43,.42) 31.0%, rgba(192,57,43,.08) 34.0%, transparent 36.5%),
    /* 朱砂光核：亮纸白芯 → 朱砂 → 淡朱砂 → 透明 */
    radial-gradient(circle at 50% 50%, var(--ms-paper-lit) 0%, rgba(253,248,236,.92) 8%, rgba(212,86,74,.66) 15%, rgba(192,57,43,.30) 26%, rgba(192,57,43,.10) 40%, transparent 55%);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='1.6' intercept='-0.18'/></feComponentTransfer></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='1.6' intercept='-0.18'/></feComponentTransfer></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  -webkit-mask-size:240px;mask-size:240px;
  transform-origin:50% 52%;
  animation:ms-burst .46s cubic-bezier(.34,1.4,.64,1) 1 forwards;
}
html.night body.is-breaking::after{
  background:
    radial-gradient(circle 210px at 47% 41%, rgba(232,220,200,.20) 0%, rgba(232,220,200,.08) 46%, transparent 68%),
    radial-gradient(circle 168px at 54% 47%, rgba(232,220,200,.14) 0%, transparent 66%),
    radial-gradient(circle 132px at 44% 52%, rgba(0,0,0,.34) 0%, transparent 58%),
    radial-gradient(circle at 50% 50%, transparent 41.2%, rgba(243,217,138,.44) 42.0%, rgba(243,217,138,.10) 44.2%, transparent 46.2%),
    radial-gradient(circle at 50% 50%, transparent 30.2%, rgba(224,101,90,.40) 31.0%, rgba(224,101,90,.08) 34.0%, transparent 36.5%),
    radial-gradient(circle at 50% 50%, var(--ms-paper-lit) 0%, rgba(253,248,236,.90) 8%, rgba(224,101,90,.62) 15%, rgba(224,101,90,.28) 26%, rgba(224,101,90,.10) 40%, transparent 55%);
}
@keyframes ms-burst{
  0%{opacity:0;transform:scale(.18)}
  12%{opacity:1}
  46%{opacity:.95;transform:scale(1)}
  100%{opacity:0;transform:scale(1.58)}
}
/* 泥金尾巴：三粒金点缓沉 */
body.is-breaking::before{
  content:"";position:fixed;inset:0;z-index:1149;pointer-events:none;
  background:
    radial-gradient(circle 3px at 44% 50%, var(--ms-gold-lit) 0%, transparent 100%),
    radial-gradient(circle 2.4px at 52% 47%, var(--ms-gold-lit) 0%, transparent 100%),
    radial-gradient(circle 2px at 48% 53%, var(--ms-gold) 0%, transparent 100%);
  animation:ms-gold-dust 1.15s var(--ms-ease-soft) .3s 1 forwards;
  opacity:0;
}
@keyframes ms-gold-dust{
  0%{opacity:.95;transform:translateY(0)}
  100%{opacity:0;transform:translateY(52px)}
}
/* 按钮同步：蓄力 .93 → 弹 1.12 → 回 1；突破钮金圈扩散 */
body.is-holding #btn-breath{transform:scale(.93) !important;animation:none !important}
body.is-holding #btn-break{transform:scale(.96)}
body.is-breaking #btn-breath{animation:ms-btn-surge .52s cubic-bezier(.34,1.56,.64,1) 1 !important}
@keyframes ms-btn-surge{0%{transform:scale(.93)}38%{transform:scale(1.12)}100%{transform:scale(1)}}
body.is-breaking #btn-break{animation:ms-break-ring .52s var(--ms-ease) 1}
@keyframes ms-break-ring{
  0%{box-shadow:var(--ms-sh-gold)}
  40%{box-shadow:var(--ms-sh-gold), 0 0 0 14px rgba(232,195,74,.18), 0 0 46px var(--ms-gold-ghost)}
  100%{box-shadow:var(--ms-sh-gold), 0 0 0 26px rgba(232,195,74,0)}
}
/* 安全：单次触发由 JS 类的加/移保证；断残留兜底 */
body:not(.is-breaking)::after,body:not(.is-breaking)::before{animation:none;opacity:0}
body:not(.is-holding)::after{animation:none}
/* 过场画面本身：取消旧 fadeIn 硬切，改为爆发尾段柔和显影 */
#breakthrough-overlay{animation:bt-overlay-in .5s var(--ms-ease-soft) .12s 1}
@keyframes bt-overlay-in{from{opacity:0}to{opacity:1}}
/* 降级：关闪烁与位移，只留一次静态纸白浅光 */
@media (prefers-reduced-motion:reduce){
  body.is-holding::after,body.is-breaking::before{animation:none;opacity:0}
  body.is-breaking::after{
    animation:none;transform:none;opacity:.18;mix-blend-mode:normal;
    background:radial-gradient(circle at 50% 50%, var(--ms-paper-lit) 0%, rgba(192,57,43,.16) 30%, transparent 60%);
    -webkit-mask-image:none;mask-image:none;
  }
  body.is-breaking #btn-breath,body.is-breaking #btn-break{animation:none}
  #breakthrough-overlay{animation:none}
}

/* ── 自动吐纳拨钮（中央大区左上角小开关） ── */
#center{position:relative}
.auto-toggle{position:absolute;left:16px;top:12px;display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;z-index:4;padding:8px 11px 8px 7px;margin:0;border-radius:var(--ms-r-full);transition:background var(--ms-t-fast) var(--ms-ease)}
.auto-toggle:hover{background:rgba(243,234,216,.55)}
html.night .auto-toggle:hover{background:rgba(20,26,36,.45)}
.auto-toggle input{position:absolute;opacity:0;width:0;height:0}
.at-track{width:48px;height:25px;border-radius:999px;background:var(--ms-ink-6);border:1px solid var(--ms-dai-2);position:relative;transition:background var(--ms-t-fast) var(--ms-ease)}
.at-knob{position:absolute;top:1px;left:1px;width:20px;height:20px;border-radius:50%;background:var(--ms-paper-lit);box-shadow:0 1px 3px rgba(58,50,38,.3);transition:transform var(--ms-t-fast) var(--ms-ease)}
.auto-toggle input:checked + .at-track{background:var(--cinnabar)}
.auto-toggle input:checked + .at-track .at-knob{transform:translateX(23px)}
.at-label{font-size:13px;color:var(--ms-ink-4);letter-spacing:.12em}

/* 堆叠布局(≤1100px)下中央区变窄,开关与居中日期同一行会撞:整列内容下移让位 */
@media (max-width:1100px){
  #center{padding-top:62px}
}

/* 手机修炼页：压缩纵向间距与吐纳球尺寸，中央区锁定在视口内，避免上下拖动。 */
@media (max-width:640px){
  body[data-mobtab="center"]{overflow:hidden}
  #center{
    min-height:calc(100svh - 118px); height:calc(100svh - 118px);
    box-sizing:border-box; overflow:hidden; gap:8px; padding:48px 10px 14px;
    justify-content:center;
  }
  #btn-breath{width:136px;height:136px;font-size:30px;letter-spacing:5px}
  #breath-wrap{margin-top:8px}
  #breath-wrap::before{width:166px;height:166px}
  #breath-wrap::after{width:150px;height:150px}
  #realm-name{font-size:26px;letter-spacing:8px}
  #game-date{font-size:13px;letter-spacing:2px}
  #dao-heart{font-size:11px;letter-spacing:1px}
  #xp-bar{max-width:calc(100vw - 28px)}
}

/* ── 顶栏资源行悬停释义（新手速查，2026-09-13） ── */
#res-bar .res-row::after{left:0;transform:none}          /* 左对齐展开：最左的"灵气"行居中会被 body 的 overflow:hidden 截掉 */
[data-tip]:has([data-tip]:hover)::after{content:none}    /* 行内按钮（选丹/丹房）自带提示优先，不同时弹两个 */
#topbar{z-index:20}                                      /* 顶栏抬到面板(1)之上、弹窗(40)之下：否则向下弹的提示被下面的卡片盖住 */

/* 首次进入斗法的一次性须知（覆盖在斗法面板上，点「知道了」关闭） */
.battle-guide{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:center;
  padding:26px 30px;border-radius:inherit;box-sizing:border-box;max-height:100%;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,rgba(253,248,236,.97),rgba(246,238,222,.98));
  box-shadow:inset 0 0 40px rgba(58,50,38,.10);
  animation:fadeIn .22s ease-out}
html.night .battle-guide{background:linear-gradient(180deg,rgba(26,32,44,.97),rgba(16,20,28,.98))}
.battle-guide .bg-title{text-align:center;font-size:19px;letter-spacing:.34em;color:var(--cinnabar,#c0392b);
  margin-bottom:14px;font-weight:700}
.battle-guide .bg-list{margin:0;padding:0 0 0 4px;list-style:none}
.battle-guide .bg-list li{position:relative;padding-left:18px;margin-bottom:10px;font-size:13px;line-height:1.85;
  color:var(--ms-ink-deep)}
html.night .battle-guide .bg-list li{color:#d9cbb0}
.battle-guide .bg-list li::before{content:"○";position:absolute;left:0;top:0;color:var(--cinnabar,#c0392b);font-size:11px}
.battle-guide .bg-list b{color:var(--cinnabar,#c0392b)}
.battle-guide .bg-sub{margin:14px 0 8px;padding-top:10px;border-top:1px dashed var(--ms-dai-3);
  font-size:11.5px;letter-spacing:.24em;color:var(--ms-ink-4)}
html.night .battle-guide .bg-sub{color:rgba(233,224,204,.5)}
.battle-guide .bg-list-2 li{font-size:12px;margin-bottom:7px;line-height:1.7}
.battle-guide .bg-actions{text-align:center;margin-top:16px}
/* 斗法面板上的常驻小字（按钮/区域的用途） */
.battle-note{text-align:center;font-size:11px;color:var(--ms-ink-4);letter-spacing:.06em;margin:2px 0 6px}
html.night .battle-note{color:rgba(233,224,204,.45)}

/* ── §11c 斗法舞台：文字战报 → 两个小人对战（2026-09-13） ──────────────────
   方框沿用原 #battle-log 尺寸（高 132px），内里改为对战舞台：
   左我方、右对方各一修仙风卡通小人（道袍/发髻/飞剑），出招有起手与冲刺、
   命中对方有受击抖动、伤害以飘字呈现，招式按五行出不同飞影与爆点。 */
.battle-stage{
  position:relative;height:196px;overflow:hidden;margin-bottom:8px;
  border:1px solid var(--ms-dai-3);border-radius:var(--ms-r-m);
  background:linear-gradient(180deg,var(--ms-ink-7),transparent);
}
html.night .battle-stage{background:linear-gradient(180deg,rgba(0,0,0,.38),transparent)}
.bfx-stage{position:absolute;inset:0}
/* 水墨远山：让两位小人有"站在山中"的层次 */
.bfx-stage::before{
  content:"";position:absolute;left:-3%;right:-3%;bottom:42px;height:96px;pointer-events:none;
  background:
    radial-gradient(58% 100% at 20% 100%,rgba(95,113,131,.34),transparent 72%),
    radial-gradient(52% 100% at 52% 100%,rgba(95,113,131,.22),transparent 74%),
    radial-gradient(60% 100% at 82% 100%,rgba(95,113,131,.30),transparent 72%),
    linear-gradient(180deg,transparent 60%,rgba(95,113,131,.08) 100%);
  filter:blur(1.2px);
  }
html.night .bfx-stage::before{opacity:.55}
.bfx-ground{
  position:absolute;left:4%;right:4%;bottom:38px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(95,113,131,.5),transparent);
}
.bfx-fighter{
  position:absolute;bottom:26px;width:82px;height:133px;
  transition:transform var(--ms-t-slow) var(--ms-ease);
  will-change:transform;
}
.bfx-side-my{left:11%}
.bfx-side-op{right:11%}
.bfx-body{display:block;overflow:visible;animation:bfx-breathe 2.8s ease-in-out infinite;transform-origin:50% 100%}
.bfx-side-op .bfx-body{animation-delay:-1.2s}
@keyframes bfx-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
.bfx-aura{animation:bfx-pulse 2.4s ease-in-out infinite}
@keyframes bfx-pulse{0%,100%{opacity:.10}50%{opacity:.24}}
/* 出手：向对方冲刺一步 */
.bfx-fighter.bfx-lunge.bfx-side-my{transform:translateX(30px) scale(1.04)}
.bfx-fighter.bfx-lunge.bfx-side-op{transform:translateX(-30px) scale(1.04)}
.bfx-fighter.bfx-cast{transform:translateY(-4px) scale(1.05)}
/* 受击：抖动 + 红光一闪 */
.bfx-fighter.bfx-hurt .bfx-body{animation:bfx-shake .42s ease}
@keyframes bfx-shake{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-4px) rotate(-3.5deg)}
  40%{transform:translateX(4px) rotate(3deg)}
  65%{transform:translateX(-2px) rotate(-1.5deg)}
}
.bfx-fighter.bfx-hurt::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(200,60,40,.42),transparent 68%);
  animation:bfx-flash .42s ease-out;
}
@keyframes bfx-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.bfx-fighter.bfx-hurt-strong::after{background:radial-gradient(circle at 50% 42%,rgba(226,86,74,.62),transparent 70%)}
/* 受击后退半步（各自朝远离对手的方向） */
.bfx-fighter.bfx-hurt.bfx-side-my{transform:translateX(-9px)}
.bfx-fighter.bfx-hurt.bfx-side-op{transform:translateX(9px)}
/* 蓄势（对方亮意图时的一次轻抖） */
.bfx-fighter.bfx-ready .bfx-body{animation:bfx-ready .7s ease-in-out}
@keyframes bfx-ready{0%,100%{transform:translateY(0)}35%{transform:translateY(-3px) scale(1.03)}70%{transform:translateY(1px)}}
/* 落败倒下 */
.bfx-fighter.bfx-down{transform:rotate(76deg) translateY(8px);opacity:.5;transform-origin:50% 94%;transition:transform .6s ease-in,opacity .6s ease-in}
/* ── 招式飞影：五行各一形（2026-09-13 第二版） ──
   金＝斜切剑光  木＝弯藤带叶  水＝水箭带尾迹  火＝火球跳动  土＝双岩旋转  无相＝气浪圆环 */
.bfx-fx{position:absolute;inset:0;pointer-events:none}

/* Rebuilt layered skill language: orbit -> core -> bloom -> fragments. */
.bfx-cast-scene,.bfx-impact-scene{position:absolute;width:1px;height:1px;pointer-events:none;z-index:5;color:var(--scene-a)}
.bfx-cast-scene .scene-core,.bfx-impact-scene .scene-core{position:absolute;width:18px;height:18px;margin:-9px;border-radius:50%;background:radial-gradient(circle,#fff,var(--scene-a) 35%,var(--scene-b) 72%,transparent 74%);box-shadow:0 0 16px 5px var(--scene-b);animation:scene-core 1s ease-out both}
.bfx-cast-scene .scene-ring{position:absolute;width:58px;height:58px;margin:-29px;border:1px solid var(--scene-a);border-radius:50%;box-shadow:0 0 14px var(--scene-b),inset 0 0 10px var(--scene-b);animation:scene-charge .72s ease-out both}
.scene-orbit{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--scene-a);box-shadow:0 0 9px 3px var(--scene-b);animation:scene-orbit 1.2s linear both}
.scene-orbit.o1{transform:rotate(0) translateX(33px)} .scene-orbit.o2{transform:rotate(120deg) translateX(26px);animation-delay:.08s}
.scene-rune{position:absolute;font:16px serif;color:var(--scene-a);text-shadow:0 0 8px var(--scene-b);animation:scene-rune .7s ease-out both}
.scene-rune.r1{left:-42px;top:-9px}.scene-rune.r2{left:25px;top:-35px}.scene-rune.r3{left:18px;top:20px}
.bfx-impact-scene .scene-bloom{position:absolute;width:90px;height:90px;margin:-45px;border-radius:50%;background:radial-gradient(circle,var(--scene-a),color-mix(in srgb,var(--scene-b) 45%,transparent) 24%,transparent 70%);filter:blur(2px);animation:scene-bloom .72s ease-out both}
.bfx-impact-scene .scene-ring{position:absolute;border:2px solid var(--scene-a);border-radius:50%;animation:scene-impact-ring .8s cubic-bezier(.12,.75,.26,1) both}
.bfx-impact-scene .ir1{width:42px;height:42px;margin:-21px;border-color:var(--scene-a)}
.bfx-impact-scene .ir2{width:76px;height:32px;margin:-16px -38px;border-color:var(--scene-b);animation-delay:.1s}
.scene-cross{position:absolute;width:112px;height:3px;margin:-1.5px -56px;background:linear-gradient(90deg,transparent,var(--scene-a),transparent);animation:scene-cross .52s ease-out both}.scene-cross.c2{transform:rotate(90deg);background:linear-gradient(90deg,transparent,var(--scene-b),transparent);animation-delay:.05s}
.scene-shard{position:absolute;width:4px;height:15px;margin:-7px -2px;background:linear-gradient(var(--scene-a),transparent);transform:rotate(var(--a)) translateY(var(--d));transform-origin:2px 7px;animation:scene-shard .72s ease-out both}
@keyframes scene-charge{0%{opacity:0;transform:scale(.35) rotate(-30deg)}35%{opacity:1}100%{opacity:0;transform:scale(1.25) rotate(100deg)}}
@keyframes scene-core{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:scale(.8)}}
@keyframes scene-orbit{0%{opacity:0;transform:rotate(0) translateX(9px)}30%{opacity:1}100%{opacity:0;transform:rotate(300deg) translateX(38px)}}
@keyframes scene-rune{0%{opacity:0;transform:scale(.5) rotate(-30deg)}35%{opacity:1}100%{opacity:0;transform:scale(1.3) rotate(45deg)}}
@keyframes scene-bloom{0%{opacity:0;transform:scale(.2)}28%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
@keyframes scene-impact-ring{0%{opacity:0;transform:scale(.2)}24%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
@keyframes scene-cross{0%{opacity:0;transform:scaleX(.1)}30%{opacity:1}100%{opacity:0;transform:scaleX(1.2)}}
@keyframes scene-shard{0%{opacity:1;transform:rotate(var(--a)) translateY(5px) scale(.5)}100%{opacity:0;transform:rotate(var(--a)) translateY(var(--d)) scale(1)}}
html.lowfx .bfx-cast-scene,html.lowfx .bfx-impact-scene{filter:none}
@media (prefers-reduced-motion:reduce){.bfx-cast-scene,.bfx-impact-scene{animation:none}.bfx-cast-scene .scene-orbit,.bfx-cast-scene .scene-rune,.bfx-cast-scene .scene-ring,.bfx-impact-scene>*{animation-duration:.2s}}
.bfx-cast-telegraph{
  position:absolute;left:50%;top:43%;width:58px;height:58px;margin:-29px 0 0 -29px;
  border:1px solid var(--fx-accent);
  border-color:color-mix(in srgb,var(--fx-accent) 80%,white 20%);
  border-radius:50%;opacity:0;pointer-events:none;z-index:3;
  box-shadow:0 0 10px color-mix(in srgb,var(--fx-accent) 70%,transparent),inset 0 0 12px color-mix(in srgb,var(--fx-accent) 28%,transparent);
  animation:bfx-telegraph .62s ease-out forwards;
}
.bfx-cast-telegraph::before,.bfx-cast-telegraph::after{
  content:"";position:absolute;left:50%;top:50%;width:76px;height:1px;margin:-.5px 0 0 -38px;
  background:linear-gradient(90deg,transparent,var(--fx-accent),transparent);opacity:.72;
}
.bfx-cast-telegraph::after{transform:rotate(90deg)}
.bfx-cast-telegraph.fx-fire{filter:saturate(1.35)}
.bfx-cast-telegraph.fx-water{border-radius:44% 56% 50% 50%}
.bfx-cast-telegraph.fx-earth{border-radius:12px;transform:rotate(45deg)}
@keyframes bfx-telegraph{
  0%{opacity:0;transform:scale(.42) rotate(0)}
  28%{opacity:.95}
  100%{opacity:0;transform:scale(1.18) rotate(90deg)}
}
.bfx-stage.bfx-casting::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--fx-accent,#e8d7a2) 9%,transparent),transparent 58%);
  animation:bfx-cast-wash .62s ease-out forwards;
}
@keyframes bfx-cast-wash{0%,100%{opacity:0}35%{opacity:1}}
.bfx-proj{position:absolute;animation-name:bfx-fly;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.36,.03,.9,.62)}
@keyframes bfx-fly{0%{transform:translate(0,0) scale(.5);opacity:.35}55%{opacity:1}100%{transform:translate(var(--fx-to-x),var(--fx-to-y)) scale(1);opacity:1}}

/* 金：斜切剑光 */
.proj-metal{width:52px;height:52px;margin:-26px 0 0 -26px}
.proj-metal .blade-core{position:absolute;left:-3px;top:24px;width:58px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fffdf0 35%,#e8c96a 85%,rgba(232,201,106,0));
  transform:rotate(-18deg);box-shadow:0 0 12px 3px rgba(233,205,120,.72)}
.proj-metal .blade-glow{position:absolute;inset:5px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,214,.5),transparent 68%);filter:blur(4px)}

/* 木：弯藤带叶 */
.proj-wood{width:64px;height:26px;margin:-13px 0 0 -32px}
.proj-wood svg{display:block;width:64px;height:26px;filter:drop-shadow(0 0 7px rgba(120,190,120,.7))}

/* 水：水箭 + 尾迹波纹 */
.proj-water{width:60px;height:34px;margin:-17px 0 0 -30px}
.proj-water .water-tip{position:absolute;right:2px;top:6px;width:42px;height:23px;
  clip-path:polygon(100% 50%,86% 18%,52% 0,16% 12%,0 50%,16% 88%,52% 100%,86% 82%);
  background:linear-gradient(115deg,#f4fbff,#5fa0d2 55%,#3d76a6 100%);
  box-shadow:0 0 14px 4px rgba(96,160,210,.65)}
.proj-water .water-wake{position:absolute;left:0;top:11px;width:34px;height:13px;border-radius:50%;
  border-top:2px solid rgba(180,225,255,.75);border-bottom:2px solid rgba(120,180,220,.5);
  animation:water-wake .5s linear infinite}
@keyframes water-wake{0%{opacity:.35;transform:translateX(4px) scaleX(.8)}50%{opacity:.95}100%{opacity:.35;transform:translateX(-2px) scaleX(1.05)}}

/* 火：火球跳动 + 尾焰 */
.proj-fire{width:36px;height:36px;margin:-18px 0 0 -18px}
.proj-fire .fire-core{position:absolute;inset:5px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#fff3c4,#ff9d3c 45%,#d94b25 75%,rgba(217,75,37,0) 100%);
  box-shadow:0 0 16px 6px rgba(226,96,58,.5);animation:fire-flit .28s ease-in-out infinite}
@keyframes fire-flit{0%,100%{transform:scale(1)}50%{transform:scale(1.12) translateY(-1px)}}
.proj-fire .fire-tail{position:absolute;left:-14px;top:12px;width:18px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 70% 50%,rgba(255,170,80,.85),rgba(226,96,58,0) 70%);filter:blur(2px)}
.proj-fire .fire-spark{position:absolute;left:4px;top:0;width:5px;height:5px;border-radius:50%;background:#ffd68a;
  box-shadow:0 0 6px 2px rgba(255,180,90,.7);animation:fire-spark .5s linear infinite}
@keyframes fire-spark{0%{opacity:0;transform:translate(6px,10px) scale(.6)}40%{opacity:1}100%{opacity:0;transform:translate(-14px,-14px) scale(.3)}}

/* 土：双岩旋转 */
.proj-earth{width:70px;height:70px;margin:-35px 0 0 -35px}
.proj-earth .rock{position:absolute;background:linear-gradient(150deg,#d8b98a,#8a6b41);
  clip-path:polygon(30% 0,78% 12%,100% 55%,72% 100%,22% 88%,0 45%);box-shadow:0 0 10px 3px rgba(138,107,65,.6)}
.proj-earth .r1{left:8px;top:16px;width:34px;height:30px;animation:rock-spin 1s linear infinite}
.proj-earth .r2{left:38px;top:34px;width:23px;height:20px;animation:rock-spin 1s linear infinite reverse}
@keyframes rock-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* 无相：气浪圆环 */
.proj-qi{width:44px;height:44px;margin:-22px 0 0 -22px}
.proj-qi .qi-ring{position:absolute;inset:4px;border-radius:50%;border:2.5px solid rgba(255,255,255,.85);
  box-shadow:0 0 14px 4px rgba(255,255,255,.35),inset 0 0 10px rgba(255,255,255,.35);
  animation:qi-ring .7s ease-in-out infinite}
@keyframes qi-ring{0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.05);opacity:1}}
.proj-qi .qi-core{position:absolute;left:14px;top:14px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle,#ffffff,rgba(233,216,176,.2) 70%,transparent);filter:blur(1px)}

/* ── 命中特效：同样按五行分家 ── */
/* 金：斩痕 + 直线火星 */
.bfx-slash{position:absolute;width:3px;height:86px;margin:-43px 0 0 -1.5px;border-radius:2px;
  background:linear-gradient(180deg,transparent,#fffff0 28%,#fff3c0 68%,transparent);transform:rotate(38deg);
  box-shadow:0 0 16px 5px rgba(255,244,206,.8);animation:slash .45s ease-out forwards}
@keyframes slash{0%{opacity:0;transform:rotate(38deg) scaleY(.3)}25%{opacity:1}100%{opacity:0;transform:rotate(38deg) scaleY(1.15)}}
/* 木：藤蔓攀出 */
.bfx-vine{position:absolute;width:0;height:0;border-radius:50%;border:2.5px solid transparent;
  border-top-color:#6ea85f;border-right-color:#8cc47a;animation:vine .9s ease-out forwards}
.bfx-vine.v1{transform:rotate(120deg);animation-delay:.08s}
.bfx-vine.v2{transform:rotate(240deg);animation-delay:.16s}
@keyframes vine{0%{width:0;height:0;opacity:.9}70%{opacity:.85}100%{width:58px;height:58px;margin:-29px 0 0 -29px;opacity:0}}
/* 水：同心波纹 */
.bfx-ripple{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:2px solid rgba(150,210,245,.9);animation:ripple .85s ease-out forwards}
@keyframes ripple{0%{transform:scale(.4);opacity:.95}100%{transform:scale(4.2);opacity:0}}
/* 火：火苗上窜 */
.bfx-flame{position:absolute;width:17px;height:22px;margin:-22px 0 0 -8.5px;
  background:radial-gradient(ellipse at 50% 90%,#fff0b8,#ff9b3c 40%,#d9471f 70%,rgba(217,71,31,0) 82%);
  border-radius:50% 50% 45% 45%/60% 60% 40% 40%;animation:flame .85s ease-out forwards}
@keyframes flame{0%{opacity:0;transform:translateY(6px) scale(.5)}25%{opacity:1;transform:translateY(-3px) scale(1)}100%{opacity:0;transform:translateY(-22px) scale(.55)}}
/* 土：落尘 */
.bfx-dust{position:absolute;width:46px;height:12px;margin:-6px 0 0 -23px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(190,160,110,.6),transparent 72%);animation:dust .8s ease-out forwards}
@keyframes dust{0%{opacity:.8;transform:scale(.5)}100%{opacity:0;transform:scale(1.7)}}
/* 无相：冲击波 */
.bfx-wave{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  border:3px solid rgba(255,255,255,.85);box-shadow:0 0 16px 4px rgba(255,255,255,.35);
  animation:wave .65s ease-out forwards}
@keyframes wave{0%{transform:scale(.3);opacity:1}100%{transform:scale(5);opacity:0}}
/* ── 招牌招式的专属形态（按牌 id 指定；没指定的回退五行） ── */
/* 雷：雷球带电弧 */
.proj-thunder{width:44px;height:44px;margin:-22px 0 0 -22px}
.proj-thunder .th-cloud{position:absolute;inset:4px;border-radius:50%;
  background:radial-gradient(circle,#f0ecff,#8f7bdb 55%,rgba(143,123,219,0) 80%);
  box-shadow:0 0 16px 6px rgba(160,140,240,.6);animation:qi-ring .4s ease-in-out infinite}
.proj-thunder svg{position:absolute;left:10px;top:8px;filter:drop-shadow(0 0 4px rgba(220,210,255,.95))}
/* 飞刀 */
.proj-blade{width:46px;height:22px;margin:-11px 0 0 -23px}
.proj-blade .knife{position:absolute;left:8px;top:6px;width:32px;height:10px;transform:rotate(-12deg);
  background:linear-gradient(90deg,#f4f8fb,#a9bccb);clip-path:polygon(0 50%,16% 0,100% 32%,100% 68%,16% 100%);
  box-shadow:0 0 10px 3px rgba(205,225,245,.7)}
.proj-blade .knife-handle{position:absolute;left:-1px;top:8px;width:11px;height:5px;border-radius:2px;background:#6b4f33}
/* 星芒 */
.proj-star{width:40px;height:40px;margin:-20px 0 0 -20px}
.proj-star .star-core{position:absolute;inset:10px;border-radius:50%;
  background:radial-gradient(circle,#fffbe6,#e6c96a 60%,rgba(230,201,106,0) 82%);box-shadow:0 0 14px 6px rgba(240,220,150,.65)}
.proj-star .star-ray{position:absolute;left:50%;top:50%;width:36px;height:2.5px;margin:-1.25px 0 0 -18px;
  background:linear-gradient(90deg,transparent,#fff8dc 50%,transparent);animation:star-ray .45s ease-in-out infinite}
.proj-star .star-ray.v{transform:rotate(90deg)}
@keyframes star-ray{0%,100%{opacity:.45}50%{opacity:1}}
/* 拳/掌：气团 */
.proj-fist{width:38px;height:38px;margin:-19px 0 0 -19px}
.proj-fist .fist-core{position:absolute;inset:5px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.92),rgba(210,190,150,.45) 60%,transparent 80%);
  box-shadow:0 0 12px 5px rgba(235,220,180,.5)}
/* 燎原火：更大的火团 */
.proj-fireblast{width:54px;height:54px;margin:-27px 0 0 -27px}
/* 沧海吞：水漩涡 */
.proj-whirl{width:48px;height:48px;margin:-24px 0 0 -24px}
.proj-whirl .wh-ring{position:absolute;left:4px;top:11px;width:40px;height:26px;border-radius:50%;
  border:3px solid rgba(150,210,245,.85);border-right-color:transparent;border-left-color:transparent;
  animation:wh-spin .8s linear infinite}
.proj-whirl .wh-ring.b{left:1px;top:6px;width:46px;height:36px;opacity:.6;animation-direction:reverse}
.proj-whirl .wh-core{position:absolute;left:17px;top:17px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle,#eaf7ff,#4f8fc4);box-shadow:0 0 10px 3px rgba(96,160,210,.6)}
@keyframes wh-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
/* 混元爆炸：气团 */
.proj-burst{width:42px;height:42px;margin:-21px 0 0 -21px}
.proj-burst .bu-core{position:absolute;inset:7px;border-radius:50%;
  background:radial-gradient(circle,#ffffff,rgba(255,246,226,.55) 55%,transparent 80%);filter:blur(1px);
  animation:qi-ring .45s ease-in-out infinite}
/* 粒子（按五行上色/变形） */
.bfx-spark{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;animation:bfx-spark .6s ease-out forwards}
@keyframes bfx-spark{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--sx),var(--sy)) scale(.35);opacity:0}}
.bfx-spark.sp-metal{background:#fff6d0;box-shadow:0 0 6px 2px rgba(233,205,120,.7)}
.bfx-spark.sp-leaf{width:9px;height:6px;border-radius:60% 40% 55% 45%;background:#7fb96a}
.bfx-spark.sp-drop{width:6px;height:8px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:#a8d6f2}
.bfx-spark.sp-fire{background:#ffca7a;box-shadow:0 0 6px 2px rgba(255,150,70,.7)}
.bfx-spark.sp-rock{width:10px;height:9px;border-radius:2px;background:linear-gradient(150deg,#d8b98a,#7d6140)}
.bfx-spark.sp-qi{background:#fff6e2;box-shadow:0 0 6px 2px rgba(255,246,226,.6)}
.bfx-spark.sp-thunder{background:#eae4ff;box-shadow:0 0 7px 2px rgba(190,175,255,.85)}

/* ── 罡气护罩：升起 → 缓转符文 → 受击涟漪 → 碎裂 ── */
.bfx-guard{position:absolute;bottom:10px;width:82px;height:133px;pointer-events:none;opacity:0}
.guard-my{left:11%}
.guard-op{right:11%}
.bfx-guard.guard-up{animation:guard-rise .45s ease-out forwards}
@keyframes guard-rise{0%{opacity:0;transform:translateY(16px) scaleY(.55)}60%{opacity:.95;transform:translateY(0) scaleY(1.02)}100%{opacity:.9;transform:translateY(0) scaleY(1)}}
.bfx-guard .guard-dome{position:absolute;inset:2px 0 6px 0;border-radius:50% 50% 42% 42%/58% 58% 42% 42%;
  border:2px solid rgba(232,195,74,.85);border-bottom-color:rgba(232,195,74,.4);
  background:radial-gradient(ellipse at 50% 18%,rgba(255,240,190,.30),rgba(232,195,74,.10) 55%,transparent 78%),
    repeating-linear-gradient(60deg,rgba(240,212,124,.20) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(-60deg,rgba(240,212,124,.20) 0 1px,transparent 1px 12px);
  box-shadow:0 0 20px 5px rgba(232,195,74,.28),inset 0 0 24px rgba(240,212,124,.25)}
.bfx-guard .guard-hex{position:absolute;left:50%;top:46%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  border:1px solid rgba(240,212,124,.55);box-shadow:inset 0 0 18px rgba(240,212,124,.35);animation:guard-spin 7s linear infinite}
.bfx-guard .guard-hex::before{content:"";position:absolute;inset:7px;border-radius:50%;
  border:1px dashed rgba(240,212,124,.6);animation:guard-spin 5s linear infinite reverse}
@keyframes guard-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.bfx-guard .guard-runegrid{position:absolute;left:50%;top:44%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,236,170,.30) 0 6deg,transparent 6deg 45deg);opacity:.75;
  animation:guard-spin 11s linear infinite}
.bfx-guard .guard-base{position:absolute;left:50%;bottom:2px;width:70px;height:16px;margin-left:-35px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(232,195,74,.45),transparent 70%);filter:blur(1px)}
.bfx-guard.guard-hit .guard-dome{animation:guard-hitpulse .5s ease-out}
@keyframes guard-hitpulse{0%{border-color:rgba(255,255,255,.95);box-shadow:0 0 26px 8px rgba(255,240,190,.6)}100%{border-color:rgba(232,195,74,.85);box-shadow:0 0 20px 5px rgba(232,195,74,.28)}}
.bfx-guard.guard-hit::after{content:"";position:absolute;left:50%;top:48%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:2px solid rgba(255,248,210,.9);animation:ripple .5s ease-out forwards}
.bfx-guard.guard-bump .guard-dome{animation:guard-bump .34s ease-out}
@keyframes guard-bump{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.bfx-guard.guard-break{animation:guard-break .6s ease-out forwards}
/* 四面罡盾绕身缓转（盾随轨道转、自身反向转，保持不倒） */
.bfx-guard .guard-shields{position:absolute;left:50%;top:46%;width:126px;height:126px;margin:-63px 0 0 -63px;
  animation:guard-orbit 9s linear infinite}
.bfx-guard .gs{position:absolute;width:19px;height:23px;
  background:linear-gradient(160deg,#f7e7b0,#b8912e);
  clip-path:polygon(50% 0,100% 20%,100% 66%,50% 100%,0 66%,0 20%);
  box-shadow:0 0 11px 3px rgba(240,212,124,.75);animation:guard-orbit-fix 9s linear infinite}
.bfx-guard .gs.s0{left:53px;top:-9px}
.bfx-guard .gs.s1{right:-9px;top:52px}
.bfx-guard .gs.s2{left:53px;bottom:-9px}
.bfx-guard .gs.s3{left:-9px;top:52px}
@keyframes guard-orbit{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes guard-orbit-fix{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}
/* ── 守式：各技能独立动画（甲：护体罡气＝上面的罡气护罩，保持原样） ── */
.bfx-castfx{position:absolute;inset:0;pointer-events:none}

/* 金钟罩：金钟自天而降 → 落地金环 → 钟身轻摆（用户选定） */
.bfx-bell{position:absolute;left:50%;top:-14px;width:88px;height:130px;margin-left:-44px;
  background:linear-gradient(180deg,#f8e6ad,#cf9f30 42%,#a97c1e 100%);
  clip-path:polygon(50% 0,70% 7%,86% 32%,93% 100%,7% 100%,14% 32%,30% 7%);
  box-shadow:0 0 22px 6px rgba(240,212,124,.55);
  animation:bell-drop .7s cubic-bezier(.35,1.3,.5,1) forwards, bell-sway 3.4s ease-in-out .7s infinite}
@keyframes bell-drop{0%{transform:translateY(-110px) scale(1.18);opacity:0}55%{opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes bell-sway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.bfx-bell::after{content:"";position:absolute;left:8px;right:8px;bottom:12px;height:1.5px;
  background:repeating-linear-gradient(90deg,rgba(90,66,16,.55) 0 8px,transparent 8px 14px)}
.bfx-bell-ring{position:absolute;left:50%;bottom:8px;width:22px;height:11px;margin-left:-11px;border-radius:50%;
  border:2px solid rgba(248,230,173,.9);opacity:0;animation:bell-ring .65s ease-out .62s forwards}
@keyframes bell-ring{0%{opacity:.95;transform:scale(.35)}100%{opacity:0;transform:scale(5.2)}}

/* 铁布衫：全身铁灰金属光泽 + 铁砂绕身（用户选定） */
.bfx-iron{position:absolute;inset:-2px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 52%,rgba(158,166,174,.45),rgba(88,94,102,.20) 58%,transparent 78%);
  animation:iron-flash 1s ease-out forwards}
@keyframes iron-flash{0%{opacity:0;transform:scale(.96)}22%{opacity:1}100%{opacity:0;transform:scale(1.02)}}
.bfx-ironsand{position:absolute;width:7px;height:6px;border-radius:1.5px;background:linear-gradient(150deg,#dfe5ec,#7c848d);
  box-shadow:0 0 6px 2px rgba(215,225,235,.7);opacity:0;animation:ironsand 1.5s ease-out forwards}
@keyframes ironsand{0%{opacity:0;transform:translate(0,0)}25%{opacity:.95}100%{opacity:0;transform:translate(var(--sx),var(--sy)) rotate(200deg)}}

/* 玄武镇岳：脚下玄武虚影（龟蛇相缠）+ 龟甲纹护壁（用户选定） */
.bfx-xuanwu{position:absolute;left:50%;bottom:-8px;width:104px;height:48px;margin-left:-52px;opacity:0;
  animation:xuanwu-rise 1s ease-out forwards}
@keyframes xuanwu-rise{0%{opacity:0;transform:translateY(16px) scale(.78)}40%{opacity:.95}100%{opacity:.7;transform:translateY(0) scale(1)}}
.bfx-xuanwu svg{width:100%;height:100%;filter:drop-shadow(0 0 9px rgba(120,180,140,.6))}
.bfx-shell-wall{position:absolute;left:50%;top:50%;width:92px;height:112px;margin:-56px 0 0 -46px;opacity:0;
  border-radius:46% 46% 40% 40%/40% 40% 44% 44%;border:1.5px solid rgba(150,200,160,.6);
  background:repeating-linear-gradient(60deg,rgba(150,200,160,.22) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(-60deg,rgba(150,200,160,.22) 0 1px,transparent 1px 14px),
    radial-gradient(ellipse at 50% 50%,rgba(120,180,140,.18),transparent 72%);
  animation:shell-open .7s ease-out .15s forwards}
@keyframes shell-open{0%{opacity:0;transform:scale(.72)}100%{opacity:1;transform:scale(1)}}

/* 金刚不坏：一圈金色梵文绕身旋转 → 不坏金身（用户选定） */
.bfx-sutra{position:absolute;left:50%;top:48%;width:104px;height:104px;margin:-52px 0 0 -52px;opacity:0;
  animation:sutra-in .8s ease-out forwards, guard-spin 9s linear .8s infinite}
@keyframes sutra-in{0%{opacity:0;transform:scale(.6) rotate(-40deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.bfx-sutra span{position:absolute;font-size:15px;font-weight:700;color:#fff2c8;
  text-shadow:0 0 9px rgba(255,226,150,1),0 0 3px rgba(120,80,10,.9);transform:translate(-50%,-50%)}
.bfx-sutra::after{content:"";position:absolute;inset:11px;border-radius:50%;border:1.5px solid rgba(250,228,170,.7);
  background:radial-gradient(circle,rgba(255,232,170,.18),transparent 70%);
  box-shadow:inset 0 0 30px 9px rgba(248,226,168,.42)}

/* 周天星斗：头顶北斗星图 + 星光垂帘（用户选定） */
.bfx-starmap{position:absolute;left:50%;top:0;width:120px;height:64px;margin-left:-60px;opacity:0;
  animation:starmap-in .9s ease-out forwards}
@keyframes starmap-in{0%{opacity:0;transform:scale(.7) translateY(-6px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.bfx-starmap svg{width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(255,246,214,.8))}
.bfx-star-curtain{position:absolute;left:50%;top:20px;width:104px;height:128px;margin-left:-52px;opacity:0;
  background:repeating-linear-gradient(90deg,rgba(255,248,222,.85) 0 2.5px,transparent 2.5px 10px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),transparent);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),transparent);
  animation:curtain-in .9s ease-out .2s forwards}
@keyframes curtain-in{0%{opacity:0}100%{opacity:.95}}

/* 龟息功：缩身如龟、鼻息化雾、天地灵气吸入（用户选定） */
.bfx-crouch .bfx-body{animation:bfx-breathe 2.8s ease-in-out infinite, crouch .5s ease-out both}
@keyframes crouch{0%{transform:translateY(0) scaleY(1)}100%{transform:translateY(5px) scaleY(.9)}}
.bfx-turtle-mist{position:absolute;left:50%;top:42%;width:64px;height:42px;margin:-21px 0 0 -32px;opacity:0;
  background:radial-gradient(ellipse,rgba(232,242,246,.55),transparent 70%);filter:blur(3px);
  animation:mist .95s ease-out forwards}
@keyframes mist{0%{opacity:0;transform:translateY(6px) scale(.7)}35%{opacity:.9}100%{opacity:0;transform:translateY(-18px) scale(1.3)}}
.bfx-qi-in{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#e2f1f6;
  box-shadow:0 0 7px 2px rgba(200,232,242,.75);opacity:0;animation:qi-in 1.05s ease-in forwards}
@keyframes qi-in{0%{opacity:0;transform:translate(var(--ix),var(--iy)) scale(1)}20%{opacity:.95}100%{opacity:0;transform:translate(0,0) scale(.3)}}
/* ── 大招（5 费以上）逐张一套：飞行体 ── */
/* 大衍神雷：雷云团 */
.proj-leichi{width:48px;height:48px;margin:-24px 0 0 -24px}
.proj-leichi .lc-cloud{position:absolute;inset:2px;border-radius:50%;
  background:radial-gradient(circle,#4a3f7a,#2b2450 60%,rgba(43,36,80,0) 82%);
  box-shadow:0 0 18px 7px rgba(140,120,230,.55);animation:qi-ring .35s ease-in-out infinite}
.proj-leichi svg{position:absolute;left:12px;top:10px;filter:drop-shadow(0 0 5px rgba(220,210,255,.95))}
/* 天雷破：单雷云 */
.proj-giantbolt{width:40px;height:40px;margin:-20px 0 0 -20px}
.proj-giantbolt .gb-cloud{position:absolute;inset:4px;border-radius:50%;
  background:radial-gradient(circle,#e8e4ff,#7b6fd0 58%,rgba(123,111,208,0) 82%);
  box-shadow:0 0 16px 6px rgba(160,150,240,.6)}
/* 五雷正法：五行五色雷点 */
.proj-fivebolt{width:64px;height:24px;margin:-12px 0 0 -32px}
.proj-fivebolt i{position:absolute;top:6px;width:11px;height:11px;border-radius:50%;
  box-shadow:0 0 9px 3px currentColor;animation:qi-ring .4s ease-in-out infinite}
.proj-fivebolt i:nth-child(1){left:0;background:#f0e2a0;color:rgba(240,226,160,.7)}
.proj-fivebolt i:nth-child(2){left:13px;background:#9ed69a;color:rgba(158,214,154,.7)}
.proj-fivebolt i:nth-child(3){left:26px;background:#a8d8f0;color:rgba(168,216,240,.7)}
.proj-fivebolt i:nth-child(4){left:39px;background:#f0a87c;color:rgba(240,168,124,.7)}
.proj-fivebolt i:nth-child(5){left:52px;background:#d8bd8a;color:rgba(216,189,138,.7)}
/* 斩仙飞刀：白光刀气 */
.proj-flyingblade{width:60px;height:22px;margin:-11px 0 0 -30px}
.proj-flyingblade .fb-blade{position:absolute;left:4px;top:7px;width:52px;height:9px;transform:rotate(-9deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),#ffffff 30%,#dff0ff 70%,rgba(255,255,255,0));
  clip-path:polygon(0 50%,10% 0,100% 40%,100% 60%,10% 100%);
  box-shadow:0 0 14px 5px rgba(225,242,255,.85)}
/* 星辰指：星芒光点 */
.proj-starfingers{width:44px;height:44px;margin:-22px 0 0 -22px}
.proj-starfingers .sf-core{position:absolute;inset:12px;border-radius:50%;
  background:radial-gradient(circle,#fffdf0,#f0d478 60%,rgba(240,212,120,0) 82%);box-shadow:0 0 16px 7px rgba(250,232,160,.75)}
.proj-starfingers .sf-ray{position:absolute;left:50%;top:50%;width:44px;height:3px;margin:-1.5px 0 0 -22px;
  background:linear-gradient(90deg,transparent,#fffbe0 50%,transparent)}
.proj-starfingers .sf-ray.v{transform:rotate(90deg)}
/* 焚天劲：大火团 */
.proj-skyfire{width:60px;height:60px;margin:-30px 0 0 -30px}
/* 燎原火：小火团 */
.proj-prairiefire{width:38px;height:38px;margin:-19px 0 0 -19px}
/* 沧海吞：漩涡球 */
.proj-whirlpool{width:54px;height:54px;margin:-27px 0 0 -27px}
.proj-whirlpool .wp-ring{position:absolute;left:3px;top:12px;width:48px;height:30px;border-radius:50%;
  border:3.5px solid rgba(120,190,235,.9);border-right-color:transparent;border-left-color:transparent;
  animation:wh-spin .7s linear infinite}
.proj-whirlpool .wp-ring.b{left:0;top:6px;width:54px;height:42px;opacity:.55;animation-direction:reverse}
.proj-whirlpool .wp-core{position:absolute;left:18px;top:18px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle,#eaf7ff,#3d7fb0);box-shadow:0 0 12px 4px rgba(70,140,200,.65)}
/* 混元一气：太极气团 */
.proj-chaos{width:48px;height:48px;margin:-24px 0 0 -24px}
.proj-chaos .ch-core{position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffffff,rgba(240,230,190,.7) 45%,rgba(180,160,120,.3) 72%,transparent 86%);
  box-shadow:0 0 16px 6px rgba(240,230,190,.6);animation:ch-spin 1.1s linear infinite}
@keyframes ch-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

@keyframes guard-break{0%{opacity:.9;transform:scale(1)}30%{opacity:1;transform:scale(1.09)}100%{opacity:0;transform:scale(1.2)}}


/* ── 命中的专属特效 ── */
/* 雷：天雷劈落 + 白光闪 */
.bfx-bolt{position:absolute;width:28px;height:100px;margin:-100px 0 0 -14px;
  filter:drop-shadow(0 0 9px rgba(205,195,255,.95));animation:bolt .5s ease-out forwards}
@keyframes bolt{0%{opacity:0;transform:scaleY(.35)}18%{opacity:1}55%{opacity:1}100%{opacity:0;transform:scaleY(1)}}
.bfx-flashbig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--fx-x,50%) var(--fx-y,50%),rgba(215,205,255,.5),transparent 56%);
  animation:flashbig .38s ease-out forwards}
@keyframes flashbig{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
/* 星芒：十字爆开 */
.bfx-starburst{position:absolute;width:66px;height:66px;margin:-33px 0 0 -33px;animation:starburst .6s ease-out forwards;
  background:linear-gradient(0deg,transparent 46%,rgba(255,248,214,.95) 50%,transparent 54%),
    linear-gradient(90deg,transparent 46%,rgba(255,248,214,.95) 50%,transparent 54%);}
@keyframes starburst{0%{opacity:0;transform:scale(.35) rotate(0)}30%{opacity:1}100%{opacity:0;transform:scale(1.15) rotate(20deg)}}
/* 拳：舞台轻震 */
.bfx-quake{animation:quake .36s ease-out}
@keyframes quake{0%,100%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}75%{transform:translate(3px,-2px)}}
/* 漩涡：缠绕水环 */
.bfx-waterwrap{position:absolute;width:20px;height:12px;margin:-6px 0 0 -10px;border-radius:50%;
  border:2.5px solid rgba(150,210,245,.9);border-top-color:transparent;animation:waterwrap .9s ease-out forwards}
.bfx-waterwrap.w2{animation-delay:.12s;border-bottom-color:transparent;border-top-color:rgba(150,210,245,.9)}
@keyframes waterwrap{0%{width:12px;height:8px;opacity:.9}100%{width:64px;height:40px;margin:-20px 0 0 -32px;opacity:0}}

/* ── 大招命中特效 ── */
/* 大衍神雷：九雷连环 + 雷池 */
.bfx-leipool{position:absolute;bottom:14px;width:96px;height:22px;margin-left:-48px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(200,190,255,.55),transparent 70%);
  animation:leipool .7s ease-out forwards}
@keyframes leipool{0%{opacity:0;transform:scale(.5)}30%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
/* 五雷正法：五色雷柱 */
/* 粗雷柱：锯齿雷身 + 横向符纹带 */
.bfx-fivebolt-col{position:absolute;width:18px;height:104px;margin:-104px 0 0 -9px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.92) 0 2.5px,transparent 2.5px 11px),
    linear-gradient(180deg,currentColor,rgba(255,255,255,.25));
  clip-path:polygon(50% 0,88% 7%,70% 17%,96% 27%,68% 41%,92% 53%,66% 65%,88% 77%,60% 89%,74% 100%,26% 100%,40% 89%,12% 77%,34% 65%,8% 53%,32% 41%,4% 27%,30% 17%,12% 7%);
  filter:drop-shadow(0 0 10px currentColor);animation:fivecol .62s ease-out forwards}
@keyframes fivecol{0%{opacity:0;transform:scaleY(.25) scaleX(.5)}18%{opacity:1;transform:scaleY(1.02) scaleX(1)}100%{opacity:0;transform:scaleY(1.02) scaleX(.8)}}
/* 斩仙飞刀：贯穿血线 */
.bfx-bloodline{position:absolute;width:5px;height:108px;margin:-54px 0 0 -2.5px;border-radius:3px;
  background:linear-gradient(180deg,transparent,#ff6a55 26%,#ffb0a0 62%,transparent);transform:rotate(62deg);
  box-shadow:0 0 16px 6px rgba(230,90,74,.85);animation:slash .55s ease-out forwards}
/* 焚天劲：冲天火柱 */
.bfx-firepillar{position:absolute;width:40px;height:132px;margin:-132px 0 0 -20px;border-radius:40% 40% 30% 30%;
  background:linear-gradient(0deg,rgba(255,180,80,.85),rgba(240,110,50,.6) 45%,rgba(220,60,30,0));
  filter:blur(2px);animation:firepillar .8s ease-out forwards}
@keyframes firepillar{0%{opacity:0;transform:scaleY(.2) scaleX(.5)}25%{opacity:1;transform:scaleY(1.05) scaleX(1)}100%{opacity:0;transform:scaleY(1.1) scaleX(.85)}}
/* 燎原火：地面火线蔓延 */
.bfx-fireline{position:absolute;height:14px;width:0;border-radius:8px;
  background:linear-gradient(90deg,rgba(255,190,90,.9),rgba(230,90,40,.5),transparent);
  box-shadow:0 0 12px 4px rgba(240,130,60,.55);animation:fireline .8s ease-out forwards}
@keyframes fireline{0%{width:0;opacity:.95}100%{width:130px;opacity:0}}
/* 沧海吞：吞噬漩涡 + 血线回流 */
.bfx-devour{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  border:3px solid rgba(110,180,230,.9);border-left-color:transparent;border-bottom-color:transparent;
  animation:devour .9s ease-out forwards}
@keyframes devour{0%{opacity:.9;transform:scale(.4) rotate(0)}100%{opacity:0;transform:scale(3.4) rotate(220deg)}}
/* 混元一气：气旋爆 */
/* 斩仙飞刀：命中后在目标身上留下的渐隐刀痕 */
.bfx-scar{position:absolute;width:6px;height:78px;margin:-39px 0 0 -3px;border-radius:3px;transform-origin:50% 50%;
  background:linear-gradient(180deg,transparent,rgba(255,118,98,.92) 24%,rgba(255,196,176,.95) 58%,transparent);
  transform:rotate(52deg);box-shadow:0 0 13px 4px rgba(240,110,90,.6);animation:scar 2.6s ease-out forwards}
@keyframes scar{0%{opacity:0;transform:rotate(52deg) scaleY(.35)}12%{opacity:1;transform:rotate(52deg) scaleY(1)}68%{opacity:.85}100%{opacity:0;transform:rotate(52deg) scaleY(.95)}}
/* 太清造化：脚下灵泉涌出 */
.bfx-spring-pool{position:absolute;left:50%;bottom:-2px;width:92px;height:28px;margin-left:-46px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(160,225,240,.6),rgba(90,170,200,.28) 58%,transparent 78%);
  animation:spring-pool 1.5s ease-out forwards}
@keyframes spring-pool{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
.bfx-spring-jet{position:absolute;left:50%;bottom:10px;width:16px;height:0;margin-left:-8px;border-radius:9px;
  background:linear-gradient(0deg,rgba(190,240,248,.9),rgba(150,215,235,.5) 55%,transparent);
  box-shadow:0 0 12px 4px rgba(150,215,235,.45);animation:spring-jet 1.35s ease-out forwards}
@keyframes spring-jet{0%{height:0;opacity:0}22%{height:74px;opacity:1}70%{height:88px;opacity:.85}100%{height:100px;opacity:0}}
.bfx-spring-drop{position:absolute;width:5px;height:7px;margin:-3px 0 0 -2.5px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;
  background:#bfe8f4;box-shadow:0 0 6px 2px rgba(160,220,240,.6);opacity:0;
  animation:spring-drop 1.2s ease-out forwards}
@keyframes spring-drop{0%{opacity:0;transform:translate(0,0) scale(.6)}25%{opacity:.95}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1)}}
/* 御剑术：五剑绕身 → 齐射（用户指定） */
.bfx-swordring{position:absolute;left:50%;top:48%;width:132px;height:132px;margin:-66px 0 0 -66px;pointer-events:none;
  animation:swordring-spin 1s linear infinite}
@keyframes swordring-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.bfx-swordring i{position:absolute;left:50%;top:50%;width:9px;height:40px;margin:-20px 0 0 -4.5px;
  background:linear-gradient(180deg,#ffffff,#a8cbe4 55%,#6888a2);
  clip-path:polygon(50% 0,74% 20%,74% 100%,26% 100%,26% 20%);
  box-shadow:0 0 11px 3px rgba(185,225,255,.8)}
.bfx-swordring.fired i{animation:sword-fire .42s ease-out forwards}
@keyframes sword-fire{0%{opacity:1}100%{opacity:0;transform:rotate(var(--rot)) translateY(-118px) rotate(90deg) scale(.7)}}
/* 齐射的飞剑 */
.proj-swordblade{width:36px;height:36px;margin:-18px 0 0 -18px}
.proj-swordblade .sw{position:absolute;left:14.5px;top:1px;width:7px;height:34px;transform:rotate(90deg);
  background:linear-gradient(180deg,#ffffff,#a8cbe4 58%,#6888a2);
  clip-path:polygon(50% 0,74% 20%,74% 100%,26% 100%,26% 20%);
  box-shadow:0 0 11px 4px rgba(190,228,255,.85)}
/* 御剑术：五剑绕身 → 齐射（用户指定） */
.bfx-swordring{position:absolute;left:50%;top:48%;width:132px;height:132px;margin:-66px 0 0 -66px;pointer-events:none;
  animation:swordring-spin 1s linear infinite}
@keyframes swordring-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.bfx-swordring i{position:absolute;left:50%;top:50%;width:9px;height:40px;margin:-20px 0 0 -4.5px;
  background:linear-gradient(180deg,#ffffff,#a8cbe4 55%,#6888a2);
  clip-path:polygon(50% 0,74% 20%,74% 100%,26% 100%,26% 20%);
  box-shadow:0 0 11px 3px rgba(185,225,255,.8)}
.bfx-swordring.fired i{animation:sword-fire .42s ease-out forwards}
@keyframes sword-fire{0%{opacity:1}100%{opacity:0;transform:rotate(var(--rot)) translateY(-118px) rotate(90deg) scale(.7)}}
/* 齐射的飞剑 */
.proj-swordblade{width:36px;height:36px;margin:-18px 0 0 -18px}
.proj-swordblade .sw{position:absolute;left:14.5px;top:1px;width:7px;height:34px;transform:rotate(90deg);
  background:linear-gradient(180deg,#ffffff,#a8cbe4 58%,#6888a2);
  clip-path:polygon(50% 0,74% 20%,74% 100%,26% 100%,26% 20%);
  box-shadow:0 0 11px 4px rgba(190,228,255,.85)}
/* 星辰指：星芒贯穿光束 */
.bfx-starshot{position:absolute;width:130px;height:4px;margin:-2px 0 0 -130px;border-radius:2px;transform-origin:100% 50%;
  background:linear-gradient(90deg,transparent,rgba(255,250,222,.95));
  box-shadow:0 0 14px 5px rgba(255,244,190,.75);animation:starshot .5s ease-out forwards}
@keyframes starshot{0%{opacity:0;transform:scaleX(.15)}30%{opacity:1}100%{opacity:0;transform:scaleX(1)}}
.bfx-chaosburst{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:3px dashed rgba(250,240,200,.9);box-shadow:0 0 18px 6px rgba(240,230,190,.5);
  animation:chaosburst .75s ease-out forwards}
@keyframes chaosburst{0%{opacity:.95;transform:scale(.4) rotate(0)}100%{opacity:0;transform:scale(3.2) rotate(180deg)}}
/* 太清造化：青莲 + 生命光雨 */
.bfx-lotus{position:absolute;left:50%;bottom:-6px;width:96px;height:56px;margin-left:-48px;opacity:0;
  animation:lotus-in .9s ease-out forwards}
@keyframes lotus-in{0%{opacity:0;transform:translateY(12px) scale(.7)}35%{opacity:1}100%{opacity:.85;transform:translateY(0) scale(1)}}
.bfx-lotus svg{width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(140,220,160,.75))}
.bfx-healrain{position:absolute;width:4px;height:14px;border-radius:3px;
  background:linear-gradient(180deg,rgba(180,245,190,0),rgba(140,230,160,.9));
  animation:healrain 1.1s linear forwards}
@keyframes healrain{0%{opacity:0;transform:translateY(-14px)}25%{opacity:1}100%{opacity:0;transform:translateY(40px)}}
.bfx-healpillar{position:absolute;left:50%;bottom:0;width:56px;height:130px;margin-left:-28px;opacity:0;
  background:linear-gradient(0deg,rgba(150,230,170,.5),rgba(190,245,200,.15) 60%,transparent);
  animation:healpillar 1.2s ease-out forwards}
@keyframes healpillar{0%{opacity:0}30%{opacity:.85}100%{opacity:0}}
/* 回气光晕 */
.bfx-heal{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 60%,rgba(127,209,138,.42),transparent 68%);animation:bfx-heal 1s ease-out forwards}
@keyframes bfx-heal{0%{opacity:0;transform:translateY(8px) scale(.8)}30%{opacity:1}100%{opacity:0;transform:translateY(-14px) scale(1.05)}}
/* 飘字 */
.bfx-floats{position:absolute;inset:0;pointer-events:none}
.bfx-float{
  position:absolute;bottom:126px;transform:translateX(-50%);
  font-weight:700;font-size:20px;line-height:1;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  animation:bfx-rise 1.35s ease-out forwards;
}
@keyframes bfx-rise{
  0%{transform:translate(-50%,8px) scale(.75);opacity:0}
  16%{transform:translate(-50%,0) scale(1.08);opacity:1}
  70%{opacity:1}
  100%{transform:translate(-50%,-30px) scale(1);opacity:0}
}
.bfx-float-dmg{color:#e2564a}
.bfx-float-crit{color:#ffcf5c;font-size:22px}
.bfx-float-block{color:#9fb6c9}
.bfx-float-heal{color:#7fd18a}
.bfx-float-shield{color:#e8c34a}
.bfx-float-poison{color:#a97fd1}
.bfx-float-tag{font-size:11.5px;color:#f0dca0;bottom:150px;letter-spacing:.14em}
.bfx-float-tag-weak{font-size:11.5px;color:#b9c6d4;bottom:150px;letter-spacing:.14em}
/* 两侧名签 */
.bfx-name{position:absolute;bottom:5px;font-size:10px;color:var(--ms-ink-4);letter-spacing:.08em;max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.night .bfx-name{color:rgba(233,224,204,.45)}
.bfx-name-my{left:14px}
.bfx-name-op{right:14px}
/* 舞台内不滚动；窄屏缩一档 */
@media (max-width:480px){.battle-stage{height:168px}.bfx-fighter{width:66px;height:107px}.bfx-float{font-size:17px;bottom:108px}.bfx-float-tag,.bfx-float-tag-weak{bottom:116px}.bfx-stage::before{bottom:38px;height:74px}.bfx-ground{bottom:34px}}

/* ── 低性能模式（设置面板开关 / html.lowfx）：砍掉全屏模糊·混合层·常驻背景动画，显著降 GPU 占用 ── */
html.lowfx .panel,html.lowfx #topbar,html.lowfx .page-topbar,html.lowfx .modal-mask{
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
html.lowfx #ms-scene .mist,html.lowfx #ms-scene .grain,html.lowfx .cloud-band,html.lowfx #ambient{display:none !important}
html.lowfx #ms-scene .range{filter:none !important}
html.lowfx #ms-scene .moon,html.lowfx #ms-scene .moon-halo,html.lowfx #ms-scene .bamboo,
html.lowfx #ms-scene .ms-qi,html.lowfx #ms-scene .ms-qi2,html.lowfx #ms-scene .ms-pulse,
html.lowfx #ms-scene .seal,html.lowfx #btn-breath{animation:none !important}
html.lowfx #ms-scene .moon,html.lowfx #ms-scene .moon-halo{box-shadow:none !important}
html.lowfx .bfx-cast-telegraph{box-shadow:none;filter:none;animation-duration:.35s}
html.lowfx .bfx-stage.bfx-casting::after{display:none}

@media (prefers-reduced-motion:reduce){
  .bfx-cast-telegraph{animation:none;opacity:.65}
  .bfx-stage.bfx-casting::after{animation:none;opacity:.2}
}

/* ── 斗法中：提示条让位（原本 fixed 居中上方，会压住斗法弹窗的舞台/手牌） ──
   宽屏挪到弹窗右侧空白，窄屏落到底部，都不再盖住牌面 */
body:has(#battle-stage) #toast-root{
  left:auto; right:14px; transform:none; align-items:flex-end;
  max-width:min(34vw,300px); text-align:right;
}
body:has(#battle-stage) .toast{ max-width:min(34vw,300px); }
@media (max-width:1100px){
  body:has(#battle-stage) #toast-root{ left:14px; right:14px; top:auto !important; bottom:10px; align-items:center; text-align:center; max-width:none; }
  body:has(#battle-stage) .toast{ max-width:none; }
  [data-tip]:hover::after{
    position:fixed;left:12px;right:12px;top:auto !important;bottom:calc(70px + env(safe-area-inset-bottom)) !important;
    width:auto;max-width:none;transform:none;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;word-break:break-word;
  }
}
/* 桌面/移动双版本：触屏端减少悬停动画、扩大点击目标，避免切屏与滚动误触 */
@media (hover:none), (pointer:coarse){
  .wen-actions button,.top-right button,.icon-btn,.btn-primary{min-height:36px}
  #buff-bar .buff-chip{min-height:0;padding:2px 8px;line-height:1.3}
  .quest-card .modal-title{position:sticky;top:-15px;z-index:2;padding:4px 0 8px;background:var(--paper)}
  html.night .quest-card .modal-title{background:#141a24}
  #res-bar .res-row{min-height:30px}
}
/* 窄屏手牌缩一档：8 张也要两行放得下，不再被手牌区裁掉第三行 */
@media (max-width:480px){
  .battle-hands .hand-card{ width:62px; min-height:78px; padding:15px 3px 4px; }
  .battle-hands .hand-card b{ font-size:11px; }
  .battle-hands .hc-el, .battle-hands .hc-eff{ font-size:10px; }
  .battle-hands .hc-cost{ font-size:10px; width:20px; height:20px; line-height:18px; top:-6px; left:-6px; }
  .battle-hands{ gap:6px; height:172px; padding:10px 10px 0; }
  #battle-hands{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:5px;height:154px;padding:8px}
  #battle-hands .hand-card{width:100%;min-height:0;height:100%;padding:14px 3px 3px}
  #battle-hands .hand-card b{font-size:11px}
  #battle-hands .hc-el,#battle-hands .hc-eff{font-size:9.5px;line-height:1.15}
  .battle-disciple-skills{min-height:78px;max-height:158px;padding:5px 6px 6px}
  .battle-disciple-skills .hand-card{flex-basis:145px;width:145px;min-height:72px;padding:8px 6px 6px}
  .battle-disciple-skills .hand-card b{font-size:11.5px}
  .battle-disciple-skills .disciple-skill-desc{font-size:9.5px;line-height:1.3}
  .battle-disciple-skills .hc-eff{font-size:9px}
}

/* ── 手机端：首页三面板底部 Tab（方案一，2026-09-19） ──
   窄屏(≤1100px)堆叠布局下一步只显示一个面板，底部固定栏切换；桌面三栏不受影响。
   z-index:30 —— 高于面板(1)、低于弹窗遮罩(40)与整屏页 #page-root(900)，
   于是弹窗/页面打开时底栏自然被盖住，无需额外 JS 判断。 */
#mob-tabs{display:none}
@media (max-width:1100px){
  #mob-tabs{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding-bottom:env(safe-area-inset-bottom);
    background:linear-gradient(180deg,var(--ms-jade) 0%,var(--ms-jade-2) 100%);
    border-top:1px solid var(--ms-dai-2);
    box-shadow:0 -2px 12px rgba(58,50,38,.14);
    backdrop-filter:blur(10px) saturate(1.08);-webkit-backdrop-filter:blur(10px) saturate(1.08);
  }
  #mob-tabs button{
    flex:1;height:54px;background:none;border:0;border-top:2px solid transparent;
    font-family:inherit;font-size:14px;letter-spacing:.22em;color:var(--ms-ink-4);
    cursor:pointer;transition:color var(--ms-t-fast) var(--ms-ease),border-color var(--ms-t-fast) var(--ms-ease);
  }
  #mob-tabs button.on{color:var(--cinnabar);border-top-color:var(--cinnabar);font-weight:bold}
  /* 未设置属性时（JS 未跑）三块照旧堆叠，不会误隐藏 */
  body[data-mobtab] #left-panel,
  body[data-mobtab] #center,
  body[data-mobtab] #right-panel{display:none}
  /* 亮起的那块补齐底栏高度，内容不被压住 */
  body[data-mobtab="left"] #left-panel{display:block;padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  body[data-mobtab="center"] #center{display:flex;padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  body[data-mobtab="right"] #right-panel{display:flex;padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  /* 见闻日志下的微缩舆图在手机端紧贴并占满内容宽度 */
  #right-panel #map-mini { width:100%; aspect-ratio:1200/600; margin:0 0 4px; }
  #right-panel #log-list { margin-bottom:0; }
}


/* ── 手机端修正（2026-09-19）─────────────────────────────────────────────────
   ① 横向裁切：背景水墨层（#ms-scene 的 .mist/.range/.cloud-band）比视口宽
      51~142px，把文档一起撑宽（实测 390 视口下文档 532px），手机上手一动整页
      左右晃、WebView 还会自适应缩放，看起来就是「界面乱动」。overflow-x:clip
      只禁横向滚动；超出的部分本来就在屏幕外，画面零变化。
      注意必须挂在 html 上：只挂 body 实测无效(#center 内溢出仍把布局视口撑到 406~482，
      整页被 WebView 缩小 —— 就是手机上看到的「缩放」)。
   ② 斗法弹窗一屏内：原内容 651px，小屏 WebView 视口 570~780px，84vh 一压就
      出内部滚动条，且整屏还能上下拖 72px。这里收紧间距与舞台高度，max-height
      提到 92vh，弹窗开着时锁住背景滚动。舞台下限 142px（人物 107 + 上移 26 +
      名字 17）。 */
html,body{overflow-x:clip}

@media (max-width:1100px){
  html:has(.modal-mask){overflow:hidden}          /* 弹窗开着时背景不跟手指滚 */
  #topbar{min-width:0;overflow:hidden}
  #res-bar{width:100%;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px;align-items:start}
  #res-bar .res-row,#res-bar .equip-row{min-width:0;max-width:100%;width:100%;overflow:hidden}
  #res-bar .res-row{display:flex;flex-wrap:wrap;gap:2px 4px;line-height:1.25}
  #res-bar .res-name{flex:0 0 auto}
  #res-bar .res-val{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
  #res-bar .res-rate{flex:0 0 100%;padding-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
  #res-bar .res-row[data-res="danyao"]{grid-column:1/-1;flex-wrap:nowrap;align-items:center}
  #res-bar .res-row[data-res="danyao"] .res-rate{display:none}
  #res-bar .res-row[data-res="danyao"] .res-val{flex:1 1 auto}
  #res-bar #btn-pill{margin-left:auto}
  #res-bar #btn-pill,#res-bar #btn-pillhouse{flex:0 0 auto;min-height:28px;padding:3px 8px;font-size:11px}
  #res-bar .equip-row{padding:6px 0 0;border-left:0;border-top:1px solid rgba(122,106,85,.24);line-height:1.3}
  #res-bar .equip-name{flex:0 0 auto}
  #res-bar .equip-val{display:block;flex:1 1 0;min-width:0;font-size:12px}
  #buff-bar{min-width:0;max-width:calc(100% - 70px);flex-wrap:wrap}
  #top-right{flex:0 0 auto}
}
@media (max-width:480px){
  #top-right{gap:6px}
  #top-right .icon-btn{padding:5px 8px;font-size:12px}
}
@media (max-width:480px){
  body:has(#battle-hands) .modal-card{max-height:92vh;padding:14px 14px}
  body:has(#battle-hands) .battle-stage{height:150px;margin-bottom:5px}
  body:has(#battle-hands) #battle-intent{margin:3px 0;padding:5px 10px;min-height:32px}
  body:has(#battle-hands) .battle-qi{margin-bottom:2px}
  body:has(#battle-hands) .battle-hands{margin-bottom:6px}
  body:has(#battle-hands) .battle-note{margin:0 0 3px;font-size:10px;line-height:1.5}
  .battle-guide{justify-content:flex-start;padding:14px 15px calc(14px + env(safe-area-inset-bottom))}
  .battle-guide .bg-title{font-size:17px;margin-bottom:8px}
  .battle-guide .bg-list li{margin-bottom:6px;font-size:12px;line-height:1.55}
  .battle-guide .bg-sub{margin:8px 0 5px;padding-top:7px}
  .battle-guide .bg-list-2 li{font-size:11px;margin-bottom:4px;line-height:1.5}
  .battle-guide .bg-actions{position:sticky;bottom:calc(-14px - env(safe-area-inset-bottom));margin:8px -15px 0;padding:8px 15px calc(8px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid rgba(122,106,85,.28)}
  html.night .battle-guide .bg-actions{background:#10141c}
  .deck-order-item{grid-template-columns:24px minmax(0,1fr) 34px 30px 30px 30px;gap:3px}
  .deck-order-item .deck-move{width:30px;min-width:30px}
  .deck-login-actions{align-items:stretch;flex-direction:column}
  .deck-login-actions label{flex-wrap:wrap}
  .deck-login-actions #dk-skip{min-height:38px}
}
/* 矮视口（微信内置浏览器带工具栏时）再收一档 */
@media (max-width:480px) and (max-height:700px){
  body:has(#battle-hands) .modal-card{padding:11px 12px}
  body:has(#battle-hands) .battle-stage{height:142px}
  body:has(#battle-hands) .battle-hands{padding-top:8px}
  body:has(#battle-hands) .battle-note{font-size:9px}
}

/* ── 洞天福地「一键升级」（2026-09-19）───────────────────────────────────────
   放在标题行右侧，「一键升级」四字与「洞天福地」四字同宽，尺寸相当。
   .on = 有可建造/可升级的建筑（实心深色，强调）；无则淡底弱化。
   可升级态：青底米白字（var(--cyan) / var(--paper)），与建筑行「升级」按钮 .b-buy 同族。
   var(--cyan) 昼夜自翻转（白天 #3d5a6c / 夜间 #8fadc0），无需另写夜间规则；
   无可升级态仍用会翻转的淡墨变量弱化，夜间不会闪出一块固定亮灰。 */
.panel-title.with-action{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-title.with-action>span{letter-spacing:4px}
.buyall{
  font-family:inherit;font-size:13px;letter-spacing:.08em;line-height:1;
  padding:6px 9px;border-radius:var(--ms-r-s);cursor:pointer;
  border:1px solid var(--ms-dai-3);background:var(--ms-ink-7);color:var(--ms-ink-4);
  transition:background var(--ms-t-fast) var(--ms-ease),color var(--ms-t-fast) var(--ms-ease),
             border-color var(--ms-t-fast) var(--ms-ease),box-shadow var(--ms-t-fast) var(--ms-ease);
  -webkit-tap-highlight-color:transparent;
}
.buyall:active{transform:scale(.96)}
/* 2026-09-19 改：可升级态不再是深褐/朱红实心（在宣纸上像块墨砖），改用淡墨底，
   与右侧「选丹 / 丹房」那排小按钮同族。全用会翻转的语义变量，昼夜自动适配：
   底 ink-6、字 ink-deep、线 dai-2；与「无可升级」态（ink-7 / ink-4 / dai-3）差一档，
   能不能买仍然一眼看得出。 */
/* 2026-09-19 定案：跟建筑行的「升级」按钮（.b-buy）同一族 —— 青底米白字。
   即下方洞天福地里每个建筑右侧那个按钮的配色，一键升级只是它的「一键」版。 */
.buyall.on{background:var(--cyan);border-color:var(--cyan);color:var(--paper);box-shadow:none}
.buyall.on:hover{background:var(--cyan);border-color:var(--cyan);color:var(--paper);filter:brightness(.94)}
.buyall:focus-visible{outline:2px solid var(--cinnabar);outline-offset:2px}

/* ── 一键升级 · 齿轮设置菜单（2026-09-19）───────────────────────────────────
   齿轮在「一键升级」左侧，点开小面板设置升级方式与可消耗资源，写进 settings.buyall。
   面板用会翻转的 paper 变量底色，昼夜都成立；靠 .head-wrap{position:relative} 定位，
   菜单挂在标题行正下方。 */
.head-wrap{position:relative}
.panel-title.with-action .head-actions{display:flex;align-items:center;gap:6px}
.buyall-gear{
  width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ms-dai-3);border-radius:var(--ms-r-s);cursor:pointer;
  background:var(--ms-ink-7);color:var(--ms-ink-4);
  transition:background var(--ms-t-fast) var(--ms-ease),color var(--ms-t-fast) var(--ms-ease),
             border-color var(--ms-t-fast) var(--ms-ease);
  -webkit-tap-highlight-color:transparent;
}
.buyall-gear svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.buyall-gear:hover{color:var(--ms-ink-deep);border-color:var(--ms-dai-2)}
.buyall-gear:active{transform:scale(.94)}
.buyall-gear.on{background:var(--cyan);border-color:var(--cyan);color:var(--paper)}
.buyall-menu{
  position:absolute;right:0;top:calc(100% + 3px);z-index:20;
  min-width:170px;padding:6px 10px 9px;border-radius:var(--ms-r-m);
  border:1px solid var(--ms-dai-2);background:var(--ms-paper-lit);
  box-shadow:var(--ms-sh-3);
}
.buyall-menu[hidden]{display:none}
.bm-title{font-size:11px;color:var(--ms-ink-4);letter-spacing:.1em;margin:7px 0 3px}
.bm-opt{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ms-ink-deep);
  padding:5px 4px;border-radius:var(--ms-r-s);cursor:pointer;white-space:nowrap}
.bm-opt:hover{background:var(--ms-ink-7)}
.bm-opt input{margin:0;accent-color:var(--cinnabar);flex:0 0 auto}
.bm-hint{font-size:10px;color:var(--ms-ink-4);margin-top:8px;letter-spacing:.03em}

/* ══ 招式专属形态（批次一，2026-09-20 wkh 逐张选定）══════════════
   自带一套 class + keyframes，不改动原有 bfx-*；
   凡是需要角度的（斩痕/冰棱/根须）都用 --r 变量，免得被 keyframes 写死。 */

/* 吐纳掌：呼吸光环（吸气） */
.bfx-breathring{position:absolute;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;
  border:2px solid rgba(255,246,226,.5);box-shadow:inset 0 0 18px 4px rgba(255,246,226,.22);
  pointer-events:none;animation:bfxBreathRing .8s ease-out forwards}
@keyframes bfxBreathRing{
  0%{transform:scale(.16);opacity:0}
  35%{opacity:.85}
  100%{transform:scale(1);opacity:0}}

/* 吐纳掌：掌风（无声推出） */
.bfx-palmwave{position:absolute;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;
  background:radial-gradient(circle at 44% 46%,rgba(255,250,238,.40),rgba(255,250,238,0) 62%);
  pointer-events:none;animation:bfxPalmWave .62s ease-out forwards}
@keyframes bfxPalmWave{
  0%{transform:scale(.30);opacity:0}
  25%{opacity:.9}
  100%{transform:scale(1.18);opacity:0}}

/* 通用斩痕（角度由 --r 给，供十字斩/追风剑复用） */
.bfx-cut{position:absolute;width:3px;height:88px;margin:-44px 0 0 -1.5px;border-radius:2px;
  background:linear-gradient(180deg,transparent,#fffff0 28%,#fff3c0 68%,transparent);
  box-shadow:0 0 16px 5px rgba(255,244,206,.7);pointer-events:none;
  animation:bfxCut .45s ease-out forwards}
@keyframes bfxCut{
  0%{opacity:0;transform:rotate(var(--r,38deg)) scaleY(.3)}
  25%{opacity:1}
  100%{opacity:0;transform:rotate(var(--r,38deg)) scaleY(1.15)}}
.bfx-cut.thin{width:2px;height:112px;margin:-56px 0 0 -1px;
  background:linear-gradient(180deg,transparent,#f4fbf7 25%,#cfe9dd 70%,transparent);
  box-shadow:0 0 12px 4px rgba(214,232,225,.6)}

/* 追风剑：风痕 */
.bfx-gale{position:absolute;width:104px;height:26px;margin:-13px 0 0 -52px;border-radius:50%;
  background:linear-gradient(90deg,rgba(214,232,225,0),rgba(214,232,225,.40),rgba(214,232,225,0));
  filter:blur(3px);pointer-events:none;animation:bfxGale .5s ease-out forwards}
@keyframes bfxGale{
  0%{transform:translateX(-26px) scaleX(.5);opacity:0}
  40%{opacity:.8}
  100%{transform:translateX(22px) scaleX(1.15);opacity:0}}

/* 金刚拳：拳印（命中后残留、缓缓消退） */
.bfx-palmseal{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:12px;
  border:3px solid rgba(240,215,138,.85);
  box-shadow:inset 0 0 14px 3px rgba(240,215,138,.35),0 0 12px 2px rgba(240,215,138,.3);
  pointer-events:none;animation:bfxPalmSeal 1s ease-out forwards}
@keyframes bfxPalmSeal{
  0%{transform:scale(1.55) rotate(-8deg);opacity:.95}
  30%{transform:scale(1) rotate(0deg);opacity:.85}
  100%{transform:scale(.86);opacity:0}}

/* 重击泛光 */
.bfx-hitring{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  border:2px solid currentColor;color:#f0d78a;pointer-events:none;
  animation:bfxHitRing .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes bfxHitRing{
  0%{transform:scale(.35);opacity:.9}
  100%{transform:scale(1.6);opacity:0}}

/* 五行术：五行光柱（五色，自天而降） */
.bfx-fivecol{position:absolute;width:11px;height:120px;margin:-60px 0 0 -5.5px;border-radius:5px 5px 3px 3px;
  background:linear-gradient(180deg,rgba(255,255,255,0),currentColor 30%,currentColor 88%,rgba(255,255,255,.1));
  box-shadow:0 0 12px 2px currentColor;pointer-events:none;
  animation:bfxFiveCol .9s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes bfxFiveCol{
  0%{transform:scaleY(0);opacity:0}
  35%{transform:scaleY(1);opacity:.95}
  70%{opacity:.8}
  100%{transform:scaleY(1);opacity:0}}

/* 玄冰箭：冰花地纹（命中处结霜） */
.bfx-frost{position:absolute;width:92px;height:56px;margin:-28px 0 0 -46px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(226,244,255,.52),rgba(226,244,255,.12) 55%,rgba(226,244,255,0) 74%);
  box-shadow:inset 0 0 16px 4px rgba(200,232,255,.35);
  pointer-events:none;animation:bfxFrost 1.3s ease-out forwards}
@keyframes bfxFrost{
  0%{transform:scale(.25) rotate(-12deg);opacity:0}
  25%{transform:scale(.95) rotate(0deg);opacity:.9}
  60%{opacity:.72}
  100%{transform:scale(1.06);opacity:0}}

/* 玄冰箭：冰棱 */
.bfx-icespike{position:absolute;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:26px solid rgba(210,236,252,.8);transform-origin:50% 100%;pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(168,214,242,.7));animation:bfxIceSpike .7s ease-out forwards}
@keyframes bfxIceSpike{
  0%{transform:translateY(10px) scaleY(.2) rotate(var(--r,0deg));opacity:0}
  35%{opacity:.95}
  100%{transform:translateY(-6px) scaleY(1) rotate(var(--r,0deg));opacity:0}}

/* 青木缠：木根（自地面升起、收紧） */
.bfx-root{position:absolute;width:4px;height:44px;margin:0 0 0 -2px;border-radius:3px;
  background:linear-gradient(180deg,rgba(127,185,106,0),#7fb96a 40%,#4e7a3f);
  transform-origin:50% 100%;pointer-events:none;box-shadow:0 0 5px 1px rgba(127,185,106,.4);
  animation:bfxRoot 1.1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes bfxRoot{
  0%{transform:translateY(14px) scaleY(.15) rotate(var(--r,0deg));opacity:0}
  30%{opacity:.95}
  70%{transform:translateY(-2px) scaleY(1) rotate(var(--r,0deg))}
  100%{transform:translateY(-6px) scaleY(.86) rotate(var(--r,0deg));opacity:0}}

/* ══ 招式专属形态（批次二，2026-09-20 wkh 逐张选定）══════════════ */

/* 庚金锐：金屑迸散（泛光） */
.bfx-goldshine{position:absolute;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,246,208,.5),rgba(255,246,208,0) 66%);
  pointer-events:none;animation:bfxGoldShine .6s ease-out forwards}
@keyframes bfxGoldShine{0%{transform:scale(.3);opacity:0}30%{opacity:.9}100%{transform:scale(1.3);opacity:0}}

/* 厚土诀：地陷 + 碎石向内合拢 */
.bfx-sinkhole{position:absolute;width:104px;height:44px;margin:-22px 0 0 -52px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,rgba(30,22,14,.62),rgba(30,22,14,.28) 60%,rgba(30,22,14,0) 78%);
  box-shadow:inset 0 6px 12px rgba(0,0,0,.5);pointer-events:none;
  animation:bfxSinkhole 1s ease-out forwards}
@keyframes bfxSinkhole{
  0%{transform:scale(.4);opacity:0}
  30%{transform:scale(1);opacity:.95}
  80%{transform:scale(1.06);opacity:.7}
  100%{transform:scale(1.1);opacity:0}}

.bfx-rubble{position:absolute;width:9px;height:8px;margin:-4px 0 0 -4px;border-radius:2px;
  background:linear-gradient(150deg,#d8b98a,#7d6140);pointer-events:none;
  animation:bfxRubble .9s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes bfxRubble{
  0%{transform:translateX(0) translateY(4px) rotate(0deg);opacity:0}
  35%{opacity:.95}
  100%{transform:translateX(var(--dx,0px)) translateY(-8px) rotate(38deg);opacity:0}}

/* 周天运转：经脉光点 + 连线 */
.bfx-acupoint{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:#fff6e2;box-shadow:0 0 8px 3px rgba(255,246,226,.75);pointer-events:none;
  animation:bfxAcupoint 1.1s ease-out forwards}
@keyframes bfxAcupoint{
  0%{transform:scale(.4);opacity:0}
  30%{transform:scale(1.25);opacity:1}
  60%{transform:scale(1);opacity:.9}
  100%{transform:scale(.9);opacity:0}}

.bfx-meridian{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  border:1.5px solid rgba(255,246,226,.55);box-shadow:0 0 12px 2px rgba(255,246,226,.3);
  pointer-events:none;animation:bfxMeridian .85s ease-out forwards}
@keyframes bfxMeridian{
  0%{transform:scale(.6);opacity:0}
  35%{opacity:.85}
  100%{transform:scale(1.15);opacity:0}}

/* 春回诀：枯纹 → 新芽 */
.bfx-wither{position:absolute;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(90,74,54,.55) 0 3deg,rgba(0,0,0,0) 3deg 30deg);
  filter:blur(1px);pointer-events:none;animation:bfxWither .75s ease-out forwards}
@keyframes bfxWither{
  0%{transform:scale(1.2);opacity:0}
  25%{transform:scale(1);opacity:.8}
  100%{transform:scale(.86);opacity:0}}

.bfx-sprout{position:absolute;width:8px;height:16px;margin:0 0 0 -4px;
  border-radius:50% 50% 40% 40%/60% 60% 40% 40%;
  background:linear-gradient(180deg,#a8d693,#4e7a3f);transform-origin:50% 100%;pointer-events:none;
  box-shadow:0 0 6px 2px rgba(140,196,122,.45);
  animation:bfxSprout 1s cubic-bezier(.25,.85,.3,1) forwards}
@keyframes bfxSprout{
  0%{transform:translateY(8px) scaleY(.2) rotate(var(--rot,0deg));opacity:0}
  35%{opacity:1}
  70%{transform:translateY(0) scaleY(1.05) rotate(var(--rot,0deg))}
  100%{transform:translateY(-4px) scaleY(1) rotate(var(--rot,0deg));opacity:0}}

/* 本命飞剑：剑光绕弧 + 贯入 */
.bfx-swordarc{position:absolute;width:44px;height:44px;pointer-events:none;
  animation:bfxSwordArc .72s cubic-bezier(.35,.05,.25,1) forwards}
.bfx-swordarc::before{content:'';position:absolute;left:20px;top:0;width:3px;height:34px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#f6f2ff 40%,#cfe0ff);
  box-shadow:0 0 10px 3px rgba(190,205,255,.8);transform:rotate(38deg)}
@keyframes bfxSwordArc{
  0%{transform:translate(-44px,-16px) rotate(-40deg);opacity:0}
  25%{opacity:1}
  70%{transform:translate(18px,26px) rotate(28deg);opacity:1}
  100%{transform:translate(30px,34px) rotate(38deg);opacity:0}}

.bfx-swordpierce{position:absolute;width:4px;height:66px;margin:-33px 0 0 -2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#ffffff 35%,#d8e6ff);
  box-shadow:0 0 16px 5px rgba(200,216,255,.85);pointer-events:none;
  animation:bfxSwordPierce .5s ease-out forwards}
@keyframes bfxSwordPierce{
  0%{transform:scaleY(.3) rotate(24deg);opacity:0}
  30%{transform:scaleY(1.1) rotate(24deg);opacity:1}
  100%{transform:scaleY(1) rotate(24deg);opacity:0}}

/* 三昧真火：三簇螺旋 + 合一成柱 */
.bfx-flamespiral{position:absolute;width:22px;height:44px;margin:-22px 0 0 -11px;
  border-radius:50% 50% 30% 30%/60% 60% 40% 40%;
  background:linear-gradient(180deg,rgba(255,214,140,.95),rgba(255,120,60,.55),rgba(255,90,40,0));
  filter:blur(.6px);pointer-events:none;
  animation:bfxFlameSpiral .85s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes bfxFlameSpiral{
  0%{transform:translate(0,26px) scaleY(.35);opacity:0}
  35%{opacity:.95}
  70%{transform:translate(var(--sx,0px),-10px) scaleY(1.1)}
  100%{transform:translate(0,-26px) scaleY(.7);opacity:0}}

.bfx-flamepillar2{position:absolute;width:26px;height:96px;margin:-48px 0 0 -13px;
  border-radius:50% 50% 40% 40%/40% 40% 20% 20%;
  background:linear-gradient(180deg,rgba(255,236,180,.95),rgba(255,150,70,.7) 45%,rgba(255,90,40,0));
  filter:blur(1px);pointer-events:none;box-shadow:0 0 26px 8px rgba(255,140,60,.35);
  animation:bfxFlamePillar .8s ease-out forwards}
@keyframes bfxFlamePillar{
  0%{transform:scaleY(.2) scaleX(.6);opacity:0}
  30%{transform:scaleY(1) scaleX(1);opacity:.95}
  100%{transform:scaleY(1.1) scaleX(.8);opacity:0}}

/* 青藤缚：古藤成笼 */
.bfx-vinecage{position:absolute;width:6px;height:78px;margin:0 0 0 -3px;border-radius:4px;
  background:linear-gradient(180deg,rgba(110,168,95,0),#6ea85f 30%,#3f6634);
  transform-origin:50% 100%;pointer-events:none;box-shadow:0 0 7px 2px rgba(110,168,95,.4);
  animation:bfxVineCage .95s cubic-bezier(.25,.8,.3,1) forwards}
@keyframes bfxVineCage{
  0%{transform:translateY(22px) scaleY(.15) rotate(var(--rot,0deg));opacity:0}
  30%{opacity:.95}
  75%{transform:translateY(-4px) scaleY(1.02) rotate(var(--rot,0deg))}
  100%{transform:translateY(-6px) scaleY(1) rotate(var(--rot,0deg));opacity:.85}}

.bfx-vinecage-lid{position:absolute;width:74px;height:20px;margin:-10px 0 0 -37px;border-radius:50%;
  border-top:5px solid #6ea85f;border-left:3px solid rgba(110,168,95,.7);border-right:3px solid rgba(110,168,95,.7);
  box-shadow:0 -3px 10px 1px rgba(110,168,95,.35);pointer-events:none;
  animation:bfxVineLid .8s ease-out forwards}
@keyframes bfxVineLid{
  0%{transform:translateY(-16px) scaleX(.5);opacity:0}
  40%{transform:translateY(0) scaleX(1);opacity:.95}
  100%{transform:translateY(0) scaleX(1);opacity:0}}

/* 玉髓丹方：丹鼎虚影 + 药光滴落 */
.bfx-cauldron{position:absolute;width:56px;height:38px;margin:-19px 0 0 -28px;
  border-radius:6px 6px 22px 22px/6px 6px 26px 26px;
  border:2px solid rgba(232,220,200,.8);border-top-width:5px;background:rgba(232,220,200,.12);
  box-shadow:0 0 18px 4px rgba(232,220,200,.35),inset 0 -6px 12px rgba(232,220,200,.25);
  pointer-events:none;animation:bfxCauldron 1.4s ease-out forwards}
.bfx-cauldron::after{content:'';position:absolute;left:-22px;right:-22px;top:-3px;height:3px;border-radius:2px;
  background:rgba(232,220,200,.55)}
@keyframes bfxCauldron{
  0%{transform:scale(.7) rotate(-14deg);opacity:0}
  22%{transform:scale(1) rotate(0deg);opacity:.95}
  78%{transform:scale(1) rotate(0deg);opacity:.9}
  100%{transform:scale(1.05) rotate(6deg);opacity:0}}

.bfx-pilldrop{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:#f4ecdc;box-shadow:0 0 8px 3px rgba(244,236,220,.7);pointer-events:none;
  animation:bfxPillDrop .9s ease-in forwards}
@keyframes bfxPillDrop{
  0%{transform:translateY(0);opacity:0}
  25%{opacity:.95}
  100%{transform:translateY(40px);opacity:0}}
/* ── 留言板（设置页，2026-09-21）───────────────────────────────────────────────
   设置面板底部一块：输入框 + 递交按钮 + 一行标语。底色/线色全用会翻转的语义变量，
   昼夜自动适配；与上方「导入存档」那排表单同一族（dai 线、paper 底、ink 字）。 */
.fb-box{margin-top:14px;padding-top:10px;border-top:1px dashed var(--ms-dai-3)}
.fb-title{font-size:14px;letter-spacing:4px;color:var(--cinnabar);margin-bottom:4px}
.fb-textarea{height:84px;font-family:inherit;font-size:13px;line-height:1.8;resize:vertical}
.fb-slogan{text-align:center;font-size:13px;letter-spacing:1px;color:var(--cinnabar);margin-top:4px}
#fb-send:disabled{opacity:.5;cursor:default}

/* ── 奇遇「几件选一件」（2026-09-21）────────────────────────────────────────────
   候选卡沿用 .ev-option 的底/线/悬停，只改成左对齐两段式：标题 + 一行概要。
   概要字色用 ink-4（会翻转的淡墨），夜间不会糊成一片。 */
.ev-pick-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;text-align:left;padding:12px 14px}
.ev-pick-row b{font-size:16px;letter-spacing:1px}
.ev-pick-desc{font-size:12.5px;color:var(--ms-ink-4);line-height:1.7}

/* 市集新品行里的「已淬 / 现存」徽标 */
.rebirth-item .ev-badge{margin-left:6px}

/* ── 手机端同步（2026-09-21）─────────────────────────────────────────────────
   ① 留言板：小屏收一档高度，按钮撑满一行好点；
   ② 候选卡：字号各降一档，标题与概要分行，长文案不挤成一条；
   ③ 手牌：改成自配卡组后张数固定（最多 8 张），窄屏两行放得下就让它自然撑开，
      放不下才在区内滚动——不再固定 172px 把牌裁掉。 */
@media (max-width:480px){
  /* 设置页里的主按钮不许换行（「保存」曾被压成竖排两字） */
  .set-row .btn-primary{white-space:nowrap;flex:0 0 auto}
  #set-key{min-width:0}
  .fb-textarea{height:74px;font-size:12.5px}
  .fb-box .set-row{justify-content:stretch}
  .fb-box #fb-send{flex:1;padding:8px 0}
  .ev-pick-row{padding:10px 12px}
  .ev-pick-row b{font-size:14.5px}
  .ev-pick-desc{font-size:11.5px;flex-basis:100%}
  .battle-hands{height:auto;max-height:190px}
}