/* ===================================================================
   三国·战略版  —  质感层 premium.css
   在 style.css 之后加载：绢帛材质 / 漆木嵌金 / 图标贴图 / 光影层次
   =================================================================== */

:root{
  --tex-paper:url("../assets/ui/tex_paper.jpg");
  --tex-wood:url("../assets/ui/tex_wood.jpg");
  --cast-1:0 6px 18px rgba(120,84,30,.35);
  --cast-2:0 14px 38px rgba(96,70,32,.5);
  --cast-3:0 26px 64px rgba(96,70,32,.5);
  --in-gold:inset 0 1px 0 rgba(255,236,192,.15);
  --in-dark:inset 0 2px 6px rgba(120,84,30,.35);
  --rim:1px solid rgba(224,192,118,.32);
  --rim-2:1px solid rgba(224,192,118,.55);
}

/* ============ 1. 全局材质 ============ */
body::before{opacity:.07;background-size:200px 200px}
body::after{content:'';position:fixed;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(ellipse 130% 80% at 50% -12%,rgba(224,192,118,.055),transparent 62%),
    radial-gradient(ellipse 110% 70% at 50% 118%,rgba(150,52,32,.06),transparent 60%)}
/* ⚠ #boot 不在这里！旧版把 #boot 一起改成 position:relative（ID 优先级压过
 * style.css 的 .boot{position:fixed;inset:0}），启动页因此塌成内容高度、
 * 视口下半屏露出 body 底色的一条硬边 —— 登录页「下面一半是黑的」的真凶。 */
#game{position:relative;z-index:10}

/* 图标通用微调 */
.ico{filter:drop-shadow(0 1px 2px rgba(120,84,30,.35)) brightness(1.1) saturate(1.04)}
.btn .ico,.chip .ico,.res-item .ico{filter:drop-shadow(0 1px 1px rgba(120,84,30,.35)) brightness(1.16)}
.hfit .ico{width:20px;height:20px;vertical-align:-5px;filter:brightness(1.15)}
/* 舞台上下暗角：让内容与顶栏/导航自然过渡 */
.stage::before,.stage::after{content:'';position:absolute;left:0;right:0;height:26px;z-index:6;pointer-events:none}
.stage::before{top:0;background:linear-gradient(180deg,rgba(250,240,214,0.55),transparent)}
.stage::after{bottom:0;background:linear-gradient(0deg,rgba(250,240,214,0.55),transparent)}

/* ============ 2. 通用组件：漆木金框 ============ */
.btn{border-radius:4px;border-color:rgba(224,192,118,.42);
  background-image:linear-gradient(180deg,rgba(255,252,240,.92) 0%,rgba(248,236,205,.93) 55%,rgba(240,220,175,.95) 100%),var(--tex-wood);
  background-size:auto,220px 220px;
  box-shadow:var(--in-gold),inset 0 -2px 0 rgba(120,84,30,.35),0 3px 0 rgba(120,84,30,.30),0 6px 14px rgba(120,84,30,.30);
  text-shadow:0 1px 1px rgba(120,84,30,.40)}
.btn:hover{background-image:linear-gradient(180deg,rgba(255,253,246,.95),rgba(244,228,192,.96)),var(--tex-wood)}
/* 金按钮：沉铜金（收敛版）——去掉旧版 !important 亮金，与「精修层」统一 */
.btn-gold{background-image:linear-gradient(180deg,#f0d894 0%,#dcb252 46%,#9c7430 100%);
  color:#2b1c05;border-color:#f0dca0;
  box-shadow:inset 0 1px 0 rgba(255,250,225,.6),inset 0 -2px 0 rgba(90,60,10,.45),0 2px 0 #5a4418,0 4px 14px rgba(224,192,118,.22)}
.btn-gold:hover{background-image:linear-gradient(180deg,#f8e3a2 0%,#dcb252 46%,#a07a36 100%)}

.panel{border-radius:6px;border:var(--rim);
  background-image:linear-gradient(165deg,rgba(255,252,240,.92),rgba(246,232,198,.95)),var(--tex-paper);
  background-size:auto,300px 300px;
  box-shadow:var(--cast-1),var(--in-gold)}

/* 印章：加一圈内描金 */
.seal{box-shadow:inset 0 1px 0 rgba(255,250,225,.65),inset 0 0 0 1px rgba(120,84,24,.35),0 2px 5px rgba(120,84,30,.35)}

/* ============ 3. 启动页 ============ */
.boot{align-items:center;justify-content:center;overflow-y:auto;padding:14px 0;
  background-image:
    radial-gradient(ellipse 78% 58% at 50% 34%,rgba(6,4,3,.12),rgba(120,84,30,0.46) 62%,rgba(250,240,214,0.60) 100%),
    linear-gradient(180deg,rgba(250,240,214,0.59) 0%,rgba(120,84,30,0.34) 42%,rgba(250,240,214,0.58) 100%),
    url("../assets/ui/boot_paper.jpg");
  background-size:cover,cover,cover;background-position:center,center,center 44%;
  background-repeat:no-repeat}
.boot-inner{max-width:900px;padding:14px 26px}

.boot-title{position:relative;display:inline-block;margin:0 0 4px;
  padding:8px clamp(14px,3vw,44px) 12px;white-space:nowrap;
  font-size:clamp(26px, min(6vw,8.4vh), 56px);
  letter-spacing:clamp(6px,1.5vw,18px);text-indent:clamp(6px,1.5vw,18px);
  background-image:linear-gradient(180deg,#fff9e6 0%,#f6dd9c 34%,#e0b556 58%,#b8893a 78%,#e8c66e 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 1px rgba(120,84,30,.55)) drop-shadow(0 0 30px rgba(224,192,118,.55))}
.boot-title::before,.boot-title::after{content:'';position:absolute;left:4%;right:4%;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(224,192,118,.35) 12%,rgba(248,236,192,.95) 50%,rgba(224,192,118,.35) 88%,transparent);
  box-shadow:0 0 12px rgba(224,192,118,.6)}
.boot-title::before{top:0}
.boot-title::after{bottom:0}
.boot-sub{margin:0 0 20px;font-size:13px;letter-spacing:12px;text-indent:12px;color:#cbb98f;
  text-shadow:0 2px 6px rgba(120,84,30,.55)}

.boot-form{gap:12px;padding:clamp(14px,2vh,24px) clamp(16px,2.4vw,30px) clamp(12px,1.8vh,22px);border-radius:8px;
  background-image:linear-gradient(180deg,rgba(255,250,236,.55),rgba(242,226,188,.68)),var(--tex-paper);
  background-size:auto,300px 300px;
  border:1px solid rgba(224,192,118,.26);
  box-shadow:var(--cast-3),var(--in-gold),inset 0 0 40px rgba(120,84,30,.35);
  backdrop-filter:blur(3px)}
.boot-input{border-radius:4px;border-color:rgba(224,192,118,.34);
  background-image:linear-gradient(180deg,rgba(252,244,226,.94),rgba(240,222,182,.94)),var(--tex-wood);
  background-size:auto,260px 260px;
  box-shadow:var(--in-dark),inset 0 0 0 1px rgba(120,84,30,.30)}
.boot-input:focus{border-color:#8a6215;
  box-shadow:var(--in-dark),0 0 0 3px rgba(224,192,118,.16),0 0 16px rgba(224,192,118,.22)}

/* 势力军旗卡 */
.boot-forces{gap:clamp(8px,1.4vw,16px)}
.force-card{width:clamp(112px,13vw,164px);padding:clamp(10px,1.6vh,16px) 10px clamp(9px,1.4vh,14px);
  border-radius:6px;overflow:hidden;
  background-image:linear-gradient(178deg,rgba(253,247,230,.9),rgba(242,226,190,.94)),var(--tex-paper);
  background-size:auto,280px 280px;
  border:1px solid rgba(224,192,118,.24);
  box-shadow:var(--cast-1),inset 0 1px 0 rgba(255,232,180,.07)}
.force-card::before{content:'';position:absolute;inset:4px;border:1px solid rgba(224,192,118,.13);
  border-radius:4px;pointer-events:none;transition:border-color .2s}
.force-card:hover{transform:translateY(-5px)}
.force-card.sel{border-color:#8a6215;transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(120,84,30,.40),0 0 26px rgba(224,192,118,.3),inset 0 0 26px rgba(224,192,118,.12)}
.force-card.sel::before{border-color:rgba(248,236,192,.45)}
.fc-char{font-size:0;line-height:0;margin-bottom:4px}
.fc-char .ico{width:clamp(44px,min(5.4vw,7.6vh),70px);height:clamp(44px,min(5.4vw,7.6vh),70px);vertical-align:middle;
  filter:drop-shadow(0 4px 10px rgba(120,84,30,.40))}
.force-card.sel .fc-char .ico{filter:drop-shadow(0 0 14px rgba(224,192,118,.6)) drop-shadow(0 4px 10px rgba(120,84,30,.40))}
.fc-name{font-size:clamp(13px,1.6vh,16px);letter-spacing:5px;margin-top:2px}
.fc-desc{font-size:10.5px;line-height:1.62;color:#a9977a}

.boot-srv{font-size:11.5px;color:#8a7a60;align-items:center}
.boot-status{min-height:18px;font-size:12.5px;margin-top:10px;letter-spacing:1px}
.boot-tip{color:#7d6f58;line-height:1.9;text-shadow:0 1px 4px rgba(120,84,30,.55)}
.big-btn{padding:clamp(9px,1.5vh,13px) clamp(30px,5vw,62px);font-size:clamp(14px,1.8vh,16px);
  letter-spacing:5px;border-radius:5px}

/* 矮屏（笔记本/小窗）压扁启动页，保证按钮在首屏内 */
@media (max-height:820px){
  .ba-title{font-size:11px;letter-spacing:4px}
  .lord-face.lg{width:52px;height:52px}
  .lord-face.lg .lf-ch{font-size:26px}
  .boot-avatars{grid-template-columns:repeat(16,1fr);width:min(520px,90vw);gap:4px}
  .entry-cards{margin:14px 0 10px;gap:9px}
  .entry-card{padding:11px 14px}
  .ec-ico{flex:0 0 38px;width:38px;height:38px;font-size:20px}
  .ec-ico svg{width:23px;height:23px}
  .bf-title{font-size:22px;letter-spacing:6px;text-indent:6px}
  .boot-rule{margin-bottom:10px}
}
@media (max-height:700px){
  .boot-tip{display:none}
  .boot-sub{margin-bottom:10px}
  .boot-title{padding-top:4px;padding-bottom:8px}
  .boot-srv{font-size:11px}
  .boot-ava{gap:5px}
  .entry-resume{padding:10px 14px;gap:7px;margin-top:10px}
  .br-ring{width:36px;height:36px;margin-bottom:10px}
}
@media (max-height:560px){
  .boot-sub{display:none}
  .fc-desc{font-size:10px;line-height:1.45}
  .ba-prev{display:none}
  .ec-txt i{display:none}
  .entry-card{padding:8px 12px}
  .bf-head{margin-bottom:10px}
}

/* ============ 4. 顶栏 ============ */
.topbar{height:58px;flex:0 0 58px;
  background-image:linear-gradient(180deg,rgba(255,252,240,.92) 0%,rgba(248,236,205,.93) 62%,rgba(240,222,182,.95) 100%),var(--tex-wood);
  background-size:auto,300px 300px;
  border-bottom:2px solid #1a1209;
  box-shadow:0 4px 20px rgba(96,70,32,.5),inset 0 1px 0 rgba(255,232,180,.13),
    inset 0 -14px 22px -14px rgba(224,192,118,.16)}
.topbar::after{bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(224,192,118,.3) 8%,#f4dd92 50%,rgba(224,192,118,.3) 92%,transparent);
  box-shadow:0 0 14px rgba(224,192,118,.55)}

.force-badge{width:38px;height:38px;font-size:0;line-height:0;border-radius:5px;
  background-color:transparent;background-image:url("../assets/ui/i/force-wei.png");
  background-size:86% 86%;background-position:center;background-repeat:no-repeat;
  border:1px solid rgba(224,192,118,.4);
  box-shadow:var(--in-gold),0 2px 8px rgba(120,84,30,.35)}
.tb-lord{padding-left:2px}
.tb-name{font-size:16px;letter-spacing:2.5px;
  filter:drop-shadow(0 1px 2px rgba(120,84,30,.45))}
.tb-power{font-size:11px;color:#9a8a6c}

.tb-res{gap:8px}
.res-item{font-size:12px;padding:2px 12px 2px 3px;border-radius:17px;
  background-image:linear-gradient(180deg,rgba(255,250,238,.6),rgba(243,227,190,.72)),var(--tex-wood);
  background-size:auto,200px 200px;
  border:1px solid rgba(224,192,118,.3);
  box-shadow:var(--in-gold),0 2px 7px rgba(120,84,30,0.42)}
.res-item i.ico{width:22px;height:22px;vertical-align:-6px;background-color:transparent;border:none;box-shadow:none;
  filter:drop-shadow(0 1px 2px rgba(120,84,30,.45))}
.res-item b{color:#f2e0b2;text-shadow:0 1px 2px rgba(120,84,30,.40)}
/* 仓储已满：金边转红，一眼看出「再攒就溢出、该花资源了」 */
.res-item.full{border-color:rgba(214,96,70,.72);
  box-shadow:var(--in-gold),0 0 0 1px rgba(214,96,70,.28),0 2px 7px rgba(120,84,30,0.42)}
.res-item.full b{color:#ffb59c}
/* 被俘提示：常驻顶栏，红底醒目 */
.res-item.cap-item{border-color:rgba(214,96,70,.8);color:#f0a08a;
  background-image:linear-gradient(180deg,rgba(205,76,56,.85),rgba(158,44,30,.92)),var(--tex-wood);
  background-size:auto,200px 200px}
.res-item.cap-item b{color:#ffcdbe}
.net-pill,.online-pill{background-image:linear-gradient(180deg,rgba(250,240,214,0.58),rgba(250,240,214,0.61));
  border-color:rgba(224,192,118,.26);box-shadow:var(--in-gold)}
.icon-btn{border-radius:5px;
  background-image:linear-gradient(180deg,rgba(253,246,228,.94),rgba(242,225,188,.95)),var(--tex-wood);
  background-size:auto,180px 180px;border-color:rgba(224,192,118,.34);
  box-shadow:var(--in-gold),0 2px 6px rgba(120,84,30,.32)}

/* ============ 5. 底部导航 ============ */
.tabbar{height:62px;flex:0 0 62px;
  background-image:linear-gradient(180deg,rgba(255,252,240,.93) 0%,rgba(247,234,201,.94) 58%,rgba(240,221,180,.96) 100%),var(--tex-wood);
  background-size:auto,300px 300px;
  border-top:2px solid #150f08;
  box-shadow:0 -6px 22px rgba(120,84,30,.40),inset 0 1px 0 rgba(255,232,180,.12),
    inset 0 16px 24px -16px rgba(224,192,118,.14)}
.tabbar::before{height:2px;top:-1px;
  background:linear-gradient(90deg,transparent,rgba(224,192,118,.3) 10%,#f4dd92 50%,rgba(224,192,118,.3) 90%,transparent);
  box-shadow:0 0 14px rgba(224,192,118,.5)}
.tab{font-size:10.5px;gap:5px}
.tab .tab-ico{width:30px;height:30px;line-height:0;font-size:0;border:none;background:none;border-radius:0;
  display:flex;align-items:center;justify-content:center;transition:transform .2s cubic-bezier(.2,.9,.3,1.6)}
/* ⚠ 「排行」没有 tab-rank.png（其余 8 个都有），用内联 SVG 兜底。
 *   选择器必须同时覆盖 .tab-svg，否则它拿不到 hover / 选中高亮，
 *   表现为「选中时不放大、不发光」，与其它 tab 明显不一致。 */
.tab .tab-ico.ico,.tab .ico,.tab .tab-svg{background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 2px 3px rgba(120,84,30,.40)) saturate(.55) brightness(.82)}
.tab .tab-svg svg{width:100%;height:100%;display:block}
.tab:hover .ico,.tab:hover .tab-svg{filter:drop-shadow(0 2px 3px rgba(120,84,30,.40)) saturate(.85) brightness(1)}
.tab.active{color:#8a6215}
.tab.active .ico,.tab.active .tab-svg{transform:translateY(-3px) scale(1.1);
  filter:drop-shadow(0 0 12px rgba(224,192,118,.7)) drop-shadow(0 2px 4px rgba(120,84,30,.40)) saturate(1.1) brightness(1.12)}
.tab.active::after{bottom:2px;left:22%;right:22%;height:2px;
  background:linear-gradient(90deg,transparent,#f8ecc0,transparent);box-shadow:0 0 10px rgba(248,236,192,.9)}

/* ============ 6. 内页绢面 ============ */
.view-city,.view-hero,.view-rank,.view-team,.view-recruit,.view-log,.view-world,.view-skill,.view-ally{
  background-image:
    radial-gradient(ellipse 95% 52% at 50% -6%,rgba(224,192,118,.10),transparent 60%),
    linear-gradient(180deg,rgba(252,244,222,0.85) 0%,rgba(252,244,222,0.90) 100%),
    var(--tex-paper);
  background-size:auto,auto,300px 300px;background-repeat:no-repeat,no-repeat,repeat}

/* ============ 7. 地图 HUD ============ */
.round-btn{border-radius:50%;border-color:rgba(224,192,118,.5);
  background-image:radial-gradient(circle at 38% 26%,rgba(96,74,44,.98),rgba(252,244,222,0.93) 58%,rgba(252,244,222,0.94)),var(--tex-wood);
  background-size:auto,140px 140px;
  box-shadow:var(--in-gold),inset 0 0 0 1px rgba(120,84,30,.32),0 4px 12px rgba(120,84,30,.35)}
.round-btn:hover{border-color:#f8ecc0;box-shadow:inset 0 1px 0 rgba(255,236,192,.3),0 0 16px rgba(224,192,118,.45),0 4px 12px rgba(120,84,30,.35)}
.round-btn .ico{width:62%;height:62%;vertical-align:middle;
  filter:brightness(1.5) saturate(1.15) drop-shadow(0 1px 2px rgba(120,84,30,.55))}

.hud-box{border-radius:6px;border-color:rgba(224,192,118,.44);
  background-image:linear-gradient(165deg,rgba(252,244,222,0.90),rgba(252,244,222,0.91)),var(--tex-paper);
  background-size:auto,280px 280px;
  box-shadow:var(--cast-2),var(--in-gold)}
.map-legend,.map-tip{background-image:linear-gradient(180deg,rgba(252,244,222,0.92),rgba(252,244,222,0.92)),var(--tex-paper);
  background-size:auto,280px 280px}
/* 图例：内容多，限制高度并允许滚动，避免被舞台裁掉 */
.map-legend{width:152px;max-height:calc(100% - 96px);overflow-y:auto;padding:9px 10px}
.map-legend .lg-row{padding:2px 0;font-size:11px}
.map-legend .lg-title{font-size:12px;margin-bottom:5px;padding-bottom:4px}
.map-legend .lg-ico{width:24px;height:24px;font-size:0;border:1px solid rgba(120,84,30,.35);
  border-radius:4px;background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:inset 0 0 8px rgba(120,84,30,.35),0 1px 3px rgba(120,84,30,.35)}
.map-legend .lg-ico.iconed{background-size:contain;background-color:transparent;border:none;
  filter:drop-shadow(0 1px 3px rgba(96,70,32,.5))}

.map-mini{padding:5px;border-radius:6px;
  background-image:linear-gradient(180deg,rgba(252,244,222,0.85),rgba(252,244,222,0.89)),var(--tex-wood);
  background-size:auto,200px 200px;
  border:1px solid rgba(224,192,118,.45);
  box-shadow:var(--cast-2),var(--in-gold)}
.map-mini canvas{border-radius:3px;box-shadow:inset 0 0 22px rgba(120,84,30,.50),0 0 0 1px rgba(120,84,30,.35)}
.mini-tip{color:#9a8a6c}

.map-search{padding:4px;border-radius:5px;
  background-image:linear-gradient(180deg,rgba(252,244,222,0.85),rgba(252,244,222,0.89)),var(--tex-wood);
  background-size:auto,180px 180px;border:1px solid rgba(224,192,118,.38);box-shadow:var(--cast-1),var(--in-gold)}

/* ============ 8. 内城建筑 ============ */
.bd-card{border-radius:6px;padding:13px 13px 11px;overflow:hidden;
  background-image:linear-gradient(172deg,rgba(252,244,222,0.87),rgba(252,244,222,0.90)),var(--tex-paper);
  background-size:auto,280px 280px;
  border:1px solid rgba(224,192,118,.22);
  box-shadow:var(--cast-1),inset 0 1px 0 rgba(255,232,180,.07)}
.bd-card::before{content:'';position:absolute;inset:4px;border:1px solid rgba(224,192,118,.11);
  border-radius:4px;pointer-events:none;transition:border-color .18s}
.bd-card:hover{border-color:rgba(224,192,118,.55);
  box-shadow:0 10px 26px rgba(120,84,30,.35),0 0 18px rgba(224,192,118,.14),inset 0 1px 0 rgba(255,232,180,.12)}
.bd-card:hover::before{border-color:rgba(224,192,118,.28)}
.bd-ico{width:0;height:0;display:none}
.bd-card>.bd-emblem{width:52px;height:52px;margin:0 auto 8px;position:relative;display:flex;
  align-items:center;justify-content:center;border-radius:9px;
  background:radial-gradient(circle at 50% 26%,rgba(224,192,118,.20),rgba(120,84,30,0.42) 72%);
  border:1px solid rgba(224,192,118,.34);
  box-shadow:inset 0 1px 0 rgba(255,236,192,.16),inset 0 -8px 14px rgba(120,84,30,.32),0 2px 8px rgba(120,84,30,.35)}
.bd-card>.bd-emblem .ico{width:48px;height:48px;filter:drop-shadow(0 2px 4px rgba(120,84,30,.40)) brightness(1.08)}
.bd-card.locked>.bd-emblem{filter:grayscale(.85) brightness(.7)}
.bd-name{font-size:14.5px;letter-spacing:1.5px}
/* 弹窗标题里的小徽标 */
.bd-emblem.inline-emblem{display:inline-flex;width:32px;height:32px;margin:0 9px 0 0;vertical-align:-9px;
  border-radius:7px;background:radial-gradient(circle at 50% 26%,rgba(224,192,118,.22),rgba(120,84,30,0.42) 74%)}
.bd-emblem.inline-emblem .ico{width:27px;height:27px}
.bd-eff{font-size:11px;color:#9d8c6e}
.bd-up{font-size:11px}
.bd-lv{border-radius:3px;box-shadow:0 1px 3px rgba(120,84,30,.35)}

/* ============ 9. 武将卡 ============ */
.hero-card{border-radius:6px;
  background-image:linear-gradient(178deg,rgba(252,244,222,0.87),rgba(252,244,222,0.90)),var(--tex-paper);
  background-size:auto,260px 260px;
  border:1px solid rgba(224,192,118,.2);
  box-shadow:var(--cast-1),inset 0 1px 0 rgba(255,232,180,.06)}
.hero-card:hover{border-color:rgba(224,192,118,.5);
  box-shadow:0 12px 28px rgba(120,84,30,.35),0 0 20px rgba(224,192,118,.14)}
.hero-card.q5{border-color:rgba(226,186,90,.6)}
.hero-card.q4{border-color:rgba(176,130,226,.5)}
.hero-card.q3{border-color:rgba(96,152,226,.4)}
.hface-img{border-radius:5px;overflow:hidden;box-shadow:0 3px 10px rgba(120,84,30,.35),inset 0 0 0 1px rgba(224,192,118,.25)}
.hero-card .hface-img{outline:1px solid rgba(224,192,118,.22);outline-offset:-1px}
.hero-card .star{letter-spacing:1px;text-shadow:0 1px 2px rgba(120,84,30,.45)}
.hero-card .hlv{color:#9d8c6e}

/* ============ 10. 部队 ============ */
.team-card{border-radius:6px;
  background-image:linear-gradient(172deg,rgba(252,244,222,0.87),rgba(252,244,222,0.90)),var(--tex-paper);
  background-size:auto,300px 300px;border:1px solid rgba(224,192,118,.24);
  box-shadow:var(--cast-1),inset 0 1px 0 rgba(255,232,180,.07)}
.tc-head h3{letter-spacing:3px}
.chip{border-radius:12px;background-image:linear-gradient(180deg,rgba(250,240,214,0.61),rgba(250,240,214,0.64));
  border-color:rgba(224,192,118,.28);box-shadow:var(--in-gold)}
.chip .ico{width:19px;height:19px;vertical-align:-5px}
.chip.on{color:#f4dd92;border-color:rgba(240,214,142,.45)}
/* 特殊兵种标签：部队编入兵种战法（白马义从 / 白毦亲卫 / 虎豹骑 …）时才出现，
 * 朱金底 + 深色字，与「待命 / 行军」这类状态 chip 明显区分。 */
.chip.tp{color:#3a1206;font-weight:700;border-color:#8a4a12;
  background-image:linear-gradient(180deg,#f2c67a,#c2842a);
  box-shadow:inset 0 1px 0 rgba(255,246,220,.7),0 2px 6px rgba(140,70,20,.32)}
.chip.tp .ico{width:17px;height:17px;vertical-align:-5px}
.slot{border-radius:6px;background-image:linear-gradient(180deg,rgba(250,240,214,0.61),rgba(250,240,214,0.61)),var(--tex-paper);
  background-size:auto,200px 200px;border:1px dashed rgba(224,192,118,.3)}
.slot.filled{border-style:solid;border-color:rgba(224,192,118,.42);
  background-image:linear-gradient(180deg,rgba(250,240,214,0.64),rgba(250,240,214,0.66)),var(--tex-paper)}
.slot:hover{border-color:var(--gold)}
.atk-seal{font-size:0;line-height:0;border-radius:8px;
  background:radial-gradient(circle at 50% 26%,rgba(224,192,118,.18),rgba(120,84,30,.30) 74%);
  border:1px solid rgba(224,192,118,.34);box-shadow:inset 0 1px 0 rgba(255,236,192,.14)}
.atk-seal .ico{width:34px;height:34px;margin:6px}

/* ============ 11. 弹窗 ============ */
.modal-layer{background-image:
  radial-gradient(ellipse 70% 50% at 50% 34%,rgba(250,240,214,0.62),rgba(120,84,30,.55)),
  var(--tex-paper);
  background-size:auto,320px 320px;backdrop-filter:blur(3px) saturate(.9)}
.modal-box{border-radius:8px;padding:22px 20px 20px;
  background-image:linear-gradient(168deg,rgba(252,244,222,0.90) 0%,rgba(252,244,222,0.92) 62%,rgba(252,244,222,0.93) 100%),var(--tex-paper);
  background-size:auto,300px 300px;
  border:1px solid rgba(224,192,118,.48);
  box-shadow:var(--cast-3),var(--in-gold),inset 0 0 0 1px rgba(120,84,30,.30),inset 0 0 60px rgba(120,84,30,.30)}
.modal-box::before,.modal-box::after{content:'';position:absolute;width:42px;height:42px;pointer-events:none;
  background:url("../assets/ui/i/cloud.png") center/contain no-repeat;opacity:.42;border:none}
.modal-box::before{left:4px;top:4px}
.modal-box::after{right:4px;bottom:4px;transform:rotate(180deg);left:auto;top:auto}
.modal-box h3{font-size:20px;letter-spacing:5px;
  filter:drop-shadow(0 2px 1px rgba(120,84,30,.45))}
.modal-box h3::after{width:190px;
  background:linear-gradient(90deg,transparent,rgba(224,192,118,.85) 50%,transparent)}
.m-sec{letter-spacing:3px;border-left-width:3px}
.m-row:hover{background:rgba(224,192,118,.05)}
.cost-tag i{display:inline-block}
.cost-tag i.ico{width:18px;height:18px;vertical-align:-4px;margin-right:3px;filter:brightness(1.15)}
#mUp,#mClose{letter-spacing:2px}

/* 战报 */
.br-track,.br-round,.br-res,.br-line{background-image:linear-gradient(180deg,rgba(250,240,214,0.61),rgba(250,240,214,0.64)),var(--tex-paper);
  background-size:auto,240px 240px}
.br-bonds{color:#f4dd92}

/* ============ 12. 记录 / 战法 / 同盟 / 天下 ============ */
.log-glyph{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  background:none!important;border:none!important}
.log-glyph .ico{width:25px;height:25px;vertical-align:0}
.log-item{border-radius:6px;background-image:linear-gradient(180deg,rgba(250,240,214,0.59),rgba(250,240,214,0.62));
  border-color:rgba(224,192,118,.16)}
.log-item:hover{background-image:linear-gradient(180deg,rgba(250,240,214,0.64),rgba(250,240,214,0.66))}
.log-item.win{border-left:3px solid rgba(95,158,121,.7)}
.log-item.lose{border-left:3px solid rgba(184,64,47,.7)}

.skill-card{border-radius:6px;
  background-image:linear-gradient(172deg,rgba(252,244,222,0.87),rgba(252,244,222,0.90)),var(--tex-paper);
  background-size:auto,280px 280px;border:1px solid rgba(224,192,118,.24);
  box-shadow:var(--cast-1),inset 0 1px 0 rgba(255,232,180,.06)}
.skill-card:hover{border-color:rgba(224,192,118,.55);box-shadow:0 12px 28px rgba(120,84,30,.35),0 0 18px rgba(224,192,118,.14)}

.ally-item{border-radius:6px;
  background-image:linear-gradient(180deg,rgba(250,240,214,0.61),rgba(250,240,214,0.64)),var(--tex-paper);
  background-size:auto,240px 240px;border:1px solid rgba(224,192,118,.18)}
.w-row{border-radius:6px;background-image:linear-gradient(180deg,rgba(250,240,214,0.58),rgba(250,240,214,0.61))}
.w-row.me{background-image:linear-gradient(180deg,rgba(250,240,214,0.62),rgba(250,240,214,0.64));border:1px solid rgba(224,192,118,.42)}
.w-flag{font-size:0;width:26px;height:26px;background-repeat:no-repeat;background-size:contain;background-position:center}

/* 星级 / 品质刻度 */
.bd-kind,.bd-tag,.own-tag{border-radius:9px}

/* ============ 13. 滚动条 ============ */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(120,84,30,.30)}
::-webkit-scrollbar-thumb{border-radius:5px;
  background-image:linear-gradient(180deg,rgba(120,92,48,.85),rgba(252,244,222,0.85));border:1px solid rgba(120,84,30,.30)}
::-webkit-scrollbar-thumb:hover{background-image:linear-gradient(180deg,rgba(160,124,62,.95),rgba(80,60,32,.95))}

/* ============ 13.5 君主立绘头像 ============ */
/* .lord-face = 通用头像框：图片未就绪 / 缺失时显示「君主名首字」印章，绝不出裂图 */
.lord-face{position:relative;display:inline-block;flex:0 0 auto;vertical-align:middle;
  width:38px;height:38px;border-radius:5px;overflow:hidden;background:#241b12;
  border:1px solid rgba(224,192,118,.42);background-size:cover;background-position:center top}
.lord-face .lf-ch{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-title);font-size:19px;font-style:normal;color:#f4dd92;letter-spacing:0;
  text-shadow:0 1px 3px rgba(120,84,30,.45)}
/* 立绘是 256×256 原图，必须撑满外框并按 cover 裁切，否则只会露出左上角一小块 */
.lord-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center center;display:block}
.lord-face.ok .lf-ch{display:none}
/* 已加载过的君主头像（avatarHtml 会打 .pre）：面板 900ms 重建时直接给最终态。
 * 现在 .lord-face img 没有 opacity 淡入，此规则是防御性的 —— 将来谁给它加了过渡也不会重演闪屏。 */
.lord-face.pre img{opacity:1;transition:none}
.lord-face.sm{width:24px;height:24px;border-radius:4px}
.lord-face.sm .lf-ch{font-size:13px}
.lord-face.xs{width:18px;height:18px;border-radius:3px}
.lord-face.xs .lf-ch{font-size:10px}
.lord-face.lg{width:66px;height:66px;border-radius:6px}
.lord-face.lg .lf-ch{font-size:33px}

/* 顶栏立绘：可点击更换 */
.lord-avatar{cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.lord-avatar:hover{transform:translateY(-2px);border-color:#8a6215;
  box-shadow:0 0 0 2px rgba(224,192,118,.22),0 6px 16px rgba(120,84,30,.35)}
.lord-avatar:active{transform:translateY(0)}

/* 登录页：立绘选择 */
.boot-ava{display:flex;flex-direction:column;align-items:center;gap:8px}
.ba-title{font-family:var(--f-title);font-size:12px;letter-spacing:6px;text-indent:6px;color:#8a6215}
.ba-prev{display:flex;align-items:center;justify-content:center}
.boot-avatars{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;width:min(440px,88vw)}
/* 选中态一律「不位移」：以前用 translateY(-3px) 会让格子浮起来，
   看起来就像选中的图和框对不上。改用 outline 外环，既不占布局也不裁切。 */
.av-cell{position:relative;aspect-ratio:1/1;border-radius:5px;overflow:hidden;cursor:pointer;
  box-sizing:border-box;background:#241b12;border:1px solid rgba(224,192,118,.2);
  outline:2px solid transparent;outline-offset:1px;
  transition:border-color .14s,box-shadow .14s,outline-color .14s}
.av-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center center;display:block}
.av-cell:hover{border-color:rgba(224,192,118,.72);box-shadow:0 4px 12px rgba(120,84,30,.32)}
.av-cell.sel{border-color:#8a6215;outline-color:#8a6215;
  box-shadow:0 0 10px rgba(224,192,118,.5),0 6px 18px rgba(120,84,30,.35)}
.av-cell.sel::after{content:'✓';position:absolute;right:0;top:0;min-width:14px;height:14px;
  display:flex;align-items:center;justify-content:center;padding:0 1px 1px;
  font-size:10px;line-height:1;color:#2a1d0a;font-weight:700;
  background:linear-gradient(160deg,#ffe9a8,#e0c076);border-radius:0 4px 0 6px;
  box-shadow:0 1px 3px rgba(120,84,30,.40)}
.ava-pick{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:10px 0 4px}

/* 名城一览（地图 HUD 的鼎形按钮） */
.city-find{display:flex;gap:6px;margin:10px 0 8px}
.cf-input{flex:1;padding:7px 11px;border-radius:4px;font-size:13px;color:var(--tx);
  background:rgba(120,84,30,0.34);border:1px solid rgba(224,192,118,.3);outline:none}
.cf-input:focus{border-color:#8a6215;box-shadow:0 0 0 3px rgba(224,192,118,.13)}
.chip-bar{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.chip-bar .chip{padding:3px 10px;font-size:11.5px;cursor:pointer}
.city-table{max-height:min(48vh,380px);overflow:auto;border:1px solid rgba(224,192,118,.16);border-radius:5px}
.ct-row{display:flex;align-items:center;gap:8px;padding:6px 9px;font-size:12.5px;cursor:pointer;
  border-bottom:1px solid rgba(224,192,118,.08);transition:background .13s}
.ct-row:last-child{border-bottom:none}
.ct-row:hover{background:rgba(224,192,118,.1)}
.ct-tier{flex:0 0 22px;height:22px;line-height:22px;text-align:center;border-radius:4px;
  font-weight:700;font-size:12px;color:#2b1c05;background:#c9924d}
.ct-tier.t10,.ct-tier.t9,.ct-tier.t8{background:#ffd76a}
.ct-tier.t6,.ct-tier.t7{background:#d2dae6}
.ct-nm{flex:1 1 auto;min-width:0;font-family:var(--f-title);letter-spacing:1px;color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-tag{font-style:normal;font-size:10px;letter-spacing:0;margin-left:5px;padding:1px 5px;border-radius:3px;
  color:#e7ca6a;border:1px solid rgba(224,192,118,.4);background:rgba(120,84,30,0.25)}
.ct-pv{flex:0 0 40px;text-align:center;color:var(--tx-3);font-size:11.5px}
.ct-own{flex:0 0 84px;text-align:right;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-xy{flex:0 0 62px;text-align:right;color:var(--tx-4);font-size:11px}
.ct-go{flex:0 0 auto;padding:2px 8px;border-radius:3px;font-size:11px;color:#f4dd92;
  border:1px solid rgba(224,192,118,.45);background:rgba(120,84,30,0.30)}
.ct-row:hover .ct-go{color:#fff3d6;border-color:#8a6215;background:rgba(224,192,118,.22)}

/* 十三州一览（地图 HUD 的「州」按钮）——与名城一览同构，多了地形性格一列 */
.pv-head{display:flex;align-items:center;gap:8px;padding:0 9px 5px;font-size:11px;color:var(--tx-4);
  border-bottom:1px solid rgba(224,192,118,.18)}
.pv-table{max-height:min(48vh,380px);overflow:auto;border:1px solid rgba(224,192,118,.16);border-radius:5px;
  border-top:none}
.pv-row{display:flex;align-items:center;gap:8px;padding:6px 9px;font-size:12.5px;cursor:pointer;
  border-bottom:1px solid rgba(224,192,118,.08);transition:background .13s}
.pv-row:last-child{border-bottom:none}
.pv-row:hover{background:rgba(224,192,118,.1)}
.pv-dot{flex:0 0 10px;height:10px;border-radius:2px;box-shadow:0 0 0 1px rgba(120,84,30,.32) inset}
.pv-nm{flex:1 1 auto;min-width:0;font-family:var(--f-title);letter-spacing:1px;color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-tt{font-style:normal;font-size:10px;letter-spacing:0;margin-left:6px;padding:1px 5px;border-radius:3px;
  color:#c9bda0;border:1px solid rgba(224,192,118,.28);background:rgba(120,84,30,0.25)}
.pv-bar{flex:0 0 88px;height:7px;border-radius:4px;overflow:hidden;background:rgba(120,84,30,0.42);
  box-shadow:inset 0 1px 2px rgba(120,84,30,.35)}
.pv-bar i{display:block;height:100%;border-radius:4px;opacity:.85}
.pv-pct{flex:0 0 40px;text-align:right;font-size:11.5px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.pv-ter{flex:0 0 104px;text-align:right;font-size:11px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.pv-mine{flex:0 0 56px;text-align:right;font-size:11.5px;color:#8a6215}
.pv-row:hover .ct-go{color:#fff3d6;border-color:#8a6215;background:rgba(224,192,118,.22)}
@media (max-width:760px){
  .pv-tt,.pv-ter{display:none}
  .pv-bar{flex:0 0 54px}
}

/* 小地图上的「回主城」按钮（世界地图点回主城没反应时的兜底入口） */
.mini-home{position:absolute;left:0;right:0;bottom:16px;margin:0 auto;width:78%;
  padding:4px 0;font-family:var(--f-title);font-size:11px;letter-spacing:2px;
  color:#f4dd92;border:1px solid rgba(224,192,118,.5);border-radius:4px;
  background:linear-gradient(180deg,rgba(252,244,222,0.89),rgba(252,244,222,0.89));cursor:pointer;
  transition:all .15s}
.mini-home:hover{color:#fff3d6;border-color:#8a6215;background:rgba(224,192,118,.24)}
.mini-home:active{transform:translateY(1px)}

/* 天下频道：头像 + 发言一行内对齐 */
.w-chat-item .lord-face{margin-right:4px;vertical-align:-5px}
.wd-body .w-row .lord-face{vertical-align:middle}

/* ============ 14. 响应式收敛 ============ */
@media (max-width:760px){
  .boot-title{font-size:40px;letter-spacing:12px;text-indent:12px;padding:8px 24px 10px}
  .boot-form{padding:18px 18px 16px}
  .force-card{width:140px}
  .fc-char .ico{width:56px;height:56px}
  .topbar{height:52px;flex:0 0 52px}
  .tabbar{height:58px;flex:0 0 58px}
}

/* 招募按钮内的小图标（跟随 11px 正文行高） */
.rc-btn .rd .ico{width:16px;height:16px;vertical-align:-4px;margin-right:2px}

/* ===== 战法标签（准备 / 控制 / 元素 / 反击 / 识破 …） ===== */
.sk-tags{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 3px}
.sk-tag{font-size:10.5px;line-height:1;padding:3px 7px;border-radius:9px;letter-spacing:.5px;
  color:#e6d3a3;border:1px solid rgba(216,178,94,.35);background:rgba(216,178,94,.10);
  white-space:nowrap}
.sk-tag:nth-child(3n+2){color:#a9c7ea;border-color:rgba(91,141,217,.35);background:rgba(91,141,217,.10)}
.sk-tag:nth-child(3n+3){color:#9bd9b6;border-color:rgba(122,195,159,.32);background:rgba(122,195,159,.10)}
.rc-skill .sk-tag{font-size:9.5px;padding:2px 5px;letter-spacing:0}

/* ===== 战报：新机制的字内高亮 ===== */
.br-line .crit{color:#ffd479;font-weight:700;text-shadow:0 0 8px rgba(255,212,121,.4)}
.br-line .ctrl{color:#c79bea;font-weight:700}
.br-line .dot{color:#8fd48a;font-weight:700}
.br-line .insight{color:#79e0d8;font-weight:700}
.br-line .elem-fire{color:#f0a06a;font-weight:700}
.br-line .elem-water{color:#7fb8e8;font-weight:700}
.br-line .elem-thunder{color:#c8a6ff;font-weight:700}
.br-line .elem-wind{color:#8ee0c0;font-weight:700}
.br-line .elem-rock{color:#d8c07a;font-weight:700}

/* ===== 战报：事件类型整行底色 ===== */
.br-line.ctrl{background:rgba(163,107,214,.12);border-left:2px solid rgba(163,107,214,.5);border-radius:4px;padding-left:7px}
.br-line.dot{background:rgba(122,195,159,.11);border-left:2px solid rgba(122,195,159,.5);border-radius:4px;padding-left:7px}
.br-line.counter{background:rgba(216,150,91,.12);border-left:2px solid rgba(216,150,91,.5);border-radius:4px;padding-left:7px}
.br-line.insight{background:rgba(91,201,199,.13);border-left:2px solid rgba(91,201,199,.55);border-radius:4px;padding-left:7px}
.br-line.buff{background:rgba(216,178,94,.09);border-left:2px solid rgba(216,178,94,.42);border-radius:4px;padding-left:7px}
.br-line.debuff{background:rgba(184,64,47,.11);border-left:2px solid rgba(184,64,47,.45);border-radius:4px;padding-left:7px}
.br-line.heal{border-left:2px solid rgba(122,195,159,.4);border-radius:4px;padding-left:7px}

/* ===== 战报：逐将战果表 ===== */
.br-stats{border:1px solid rgba(216,178,94,.22);border-radius:8px;overflow:hidden;background:rgba(120,84,30,0.24)}
.bs-head,.bs-row{display:grid;grid-template-columns:1.6fr 1fr 1fr .8fr 1fr;gap:4px;align-items:center;padding:5px 9px}
.bs-head{color:var(--tx-3);letter-spacing:1px;background:rgba(216,178,94,.10);font-size:11px}
.bs-head span+span{text-align:right}
.bs-head span:last-child{text-align:right}
.bs-row{border-top:1px solid rgba(216,178,94,.10);font-size:11.5px}
.bs-row span.n{color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-row b{font-weight:600;color:#e8916c;text-align:right;font-variant-numeric:tabular-nums}
.bs-row b.hl{color:#7fc39f}
.bs-row b.ct{color:#c79bea}
.bs-row b.lv{color:var(--tx-3)}
.bs-row.mine{background:rgba(91,141,217,.08)}
.bs-row.foe{background:rgba(184,64,47,.07)}
.bs-row.foe span.n{color:#e0a99c}


/* 战法卡内的机制标签 */
.sc-tags{margin:6px 0 4px}
.sc-tags .sk-tag{font-size:9.5px;padding:2px 6px}

/* ============ 15. 「天下」左侧抽屉 ============ */
.world-drawer{
  position:absolute;left:0;top:0;bottom:0;z-index:26;
  width:min(88vw,360px);display:flex;flex-direction:column;
  background-image:
    radial-gradient(ellipse 120% 44% at 0% 0%,rgba(224,192,118,.13),transparent 60%),
    linear-gradient(180deg,rgba(252,244,222,0.91) 0%,rgba(252,244,222,0.92) 100%),
    var(--tex-paper);
  background-size:auto,auto,300px 300px;background-repeat:no-repeat,no-repeat,repeat;
  border-right:1px solid rgba(224,192,118,.42);
  box-shadow:16px 0 42px rgba(96,70,32,.5),inset -1px 0 0 rgba(255,232,180,.06);
  transform:translateX(0);transition:transform .26s cubic-bezier(.4,0,.2,1)}
.world-drawer.collapsed{transform:translateX(-102%);box-shadow:none}
.wd-head{flex:0 0 46px;display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;
  border-bottom:1px solid rgba(224,192,118,.26);
  background-image:linear-gradient(180deg,rgba(250,240,214,0.63),rgba(250,240,214,0.57))}
.wd-ico{width:24px;height:24px}
.wd-title{font-family:var(--f-title);font-size:15px;font-weight:700;letter-spacing:7px;color:#8a6215;
  text-shadow:0 1px 3px rgba(120,84,30,.45)}
.wd-collapse{margin-left:auto;width:30px;height:30px;border-radius:50%;font-size:17px;line-height:1;
  color:#e6d3a3;border:1px solid rgba(224,192,118,.45);background:rgba(120,84,30,0.32);cursor:pointer;
  transition:all .16s}
.wd-collapse:hover{color:#fff3d6;border-color:rgba(255,215,106,.8);background:rgba(224,192,118,.2)}
.wd-body{flex:1;min-height:0;display:flex}
.wd-body .world-wrap{flex:1;flex-direction:column;height:auto;overflow:auto;padding:10px;gap:10px}
.wd-body .w-col{flex:0 0 auto;overflow:visible}
.wd-body .w-scroll{flex:0 0 auto;max-height:206px}
.wd-body .w-ev{flex:1 1 auto}
.wd-body .w-chat{height:auto;max-height:158px}
.w-row.dim,.w-chat-item.dim,.w-ev-item.dim{color:var(--tx-4);font-style:normal}

/* 抽屉里的行（原「势力排行」，现仅作通用窄条行样式备用）：抽屉较窄，改为两行 */
.wd-body .w-row{flex-wrap:wrap;row-gap:3px;padding:8px 7px;border-bottom:none;margin-bottom:6px;
  border:1px solid rgba(224,192,118,.14)}
.wd-body .w-row.me{border-color:rgba(224,192,118,.5)}
.wd-body .w-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;font-size:12.5px}
.wd-body .w-name .dot{width:6px;height:6px}
.wd-body .w-row .btn{flex:0 0 auto;padding:3px 9px;font-size:11px}
.wd-body .w-meta{flex:1 1 100%;display:flex;align-items:baseline;gap:10px;
  padding-left:31px;font-size:11px}
.wd-body .w-meta .w-pow{min-width:0;text-align:left;font-size:11.5px}
.wd-body .w-meta .w-land{min-width:0;text-align:left;color:var(--tx-3);font-size:11px}

/* 收起后左边缘的展开把手。
 * ⚠ 它是 absolute 定位、悬浮在内容之上的（left:0;top:50%），背景原本 ~0.9 不透明，
 *   窄屏时正好压在内容区中央（实测挡住部队页的武将卡左侧），很碍眼。
 *   改为默认半透明（仍可见、可点），悬停/聚焦时恢复到完全不透明。 */
.world-handle{
  position:absolute;left:0;top:50%;z-index:25;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:15px 8px;cursor:pointer;border-radius:0 13px 13px 0;
  color:#f4dd92;border:1px solid rgba(224,192,118,.5);border-left:none;
  background-image:linear-gradient(90deg,rgba(252,244,222,0.91),rgba(252,244,222,0.87));
  box-shadow:7px 0 20px rgba(120,84,30,.35),inset 0 1px 0 rgba(255,232,180,.1);
  transform:translateY(-50%);opacity:.58;
  transition:opacity .22s,padding .22s,background-image .2s}
.world-handle .ico{width:26px;height:26px}
.world-handle .wh-txt{writing-mode:vertical-rl;font-family:var(--f-title);font-size:12.5px;
  font-weight:700;letter-spacing:3px;color:#e6d3a3}
.world-handle:hover,.world-handle:focus-visible{opacity:1;padding-right:12px;
  background-image:linear-gradient(90deg,rgba(80,58,34,.99),rgba(252,244,222,0.91))}
.world-handle.hidden{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(-16px)}

/* ============ 16. 手机横竖屏自适应 ============ */

/* 平板 / 小笔电 */
@media (max-width:1024px){
  .world-drawer{width:min(76vw,340px)}
}

/* 手机竖屏 */
@media (max-width:760px){
  html,body{height:100dvh}   /* 移动端动态视口：地址栏收放时不出现空白 */
  .game{height:100dvh}
  .topbar{height:auto;flex:0 0 auto;flex-wrap:wrap;padding:6px 8px 5px;gap:5px}
  .tb-left{order:1;flex:1 1 auto;min-width:0}
  .tb-right{order:2;flex:0 0 auto}
  .tb-name{font-size:14px;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .net-pill,.online-pill{display:none}                 /* 窄屏省位：连接状态并入顶栏图标 */
  .tb-res{order:3;flex:1 1 100%;justify-content:space-between;flex-wrap:wrap;
    overflow:visible;gap:4px 1px;padding:3px 0 1px}
  .res-item{flex:0 1 auto;font-size:10.5px;padding:2px 5px 2px 1px;gap:1px}
  .res-item i.ico{width:16px;height:16px;vertical-align:-3px}
  .res-item b{font-size:10.5px}

  .tabbar{height:auto;flex:0 0 auto;flex-wrap:wrap;padding:3px 0 4px}
  /* 9 个栏位：按 25% 折行会变成「4 + 4 + 1」三行，太占地；改成 20% 恰好两行 5 + 4 */
  .tab{flex:1 1 20%;min-width:0;padding:8px 2px;font-size:10.5px;gap:3px;letter-spacing:0}
  .tab .tab-ico{width:24px;height:24px}

  .map-hud{padding:8px}
  .hud-box{left:8px;top:8px;min-width:0;width:min(78vw,258px);padding:10px 11px;font-size:12px}
  .hud-right{right:8px;bottom:8px;gap:7px}
  .round-btn{width:40px;height:40px}
  .round-btn .ico{width:22px;height:22px}
  .map-mini{width:106px;height:106px;top:8px;right:8px}
  .mini-tip{font-size:9px;letter-spacing:1px}
  .mini-home{width:90%;bottom:14px;font-size:10px;padding:3px 0;letter-spacing:1px}
  .map-legend{right:54px;bottom:8px;width:min(58vw,196px);max-height:min(52vh,320px);overflow:auto}
  .map-search{right:8px;top:120px;bottom:auto}
  .march-bar{left:8px;bottom:8px;right:56px;gap:6px}

  .world-drawer{width:min(92vw,336px);box-shadow:12px 0 34px rgba(96,70,32,.5)}
  /* 窄屏把手再收小一圈：它悬浮在内容之上，越小越不挡事 */
  .world-handle{padding:11px 6px;gap:5px}
  .world-handle .ico{width:22px;height:22px}
  .world-handle .wh-txt{font-size:11px;letter-spacing:2px}
  .wd-head{flex:0 0 44px;padding:0 8px 0 12px}
  .wd-body .world-wrap{padding:8px;gap:8px}
  .wd-body .w-scroll{max-height:172px}
  .chat-in input{font-size:15px;padding:10px 11px}     /* ≥16px 附近可防止 iOS 聚焦自动放大 */

  .city-wrap,.team-wrap,.log-list{padding:9px}
  .city-grid{grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:8px}
  .hero-grid{top:46px;padding:9px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  .hero-card{padding:9px 8px 8px}
  .hero-card .hn{font-size:14px}
  .list-bar{padding:7px 9px;gap:5px}
  .recruit-wrap{padding:14px 10px}
  .rc-pool{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px}
  .skill-wrap,.ally-wrap{padding:10px}

  .modal-layer{padding:8px}
  .modal-box{max-height:92vh;padding:16px 13px 14px}
  .modal-box.wide{max-width:100%}
  .modal-box h3{font-size:17px;letter-spacing:4px}
  .bs-row{font-size:11px}

  .boot-inner{padding:14px}
  .boot-input{width:min(86vw,300px)}
  .boot-forces{gap:10px}
  .force-card{width:min(43vw,146px)}
  .entry-card{width:min(92vw,360px);padding:12px 13px;gap:11px}
  .ec-ico{flex:0 0 38px;width:38px;height:38px;font-size:20px}
  .ec-ico svg{width:22px;height:22px}
  .ec-txt b{font-size:15px;letter-spacing:2px}
  .entry-resume{width:min(92vw,360px);padding:12px 13px}
  .bf-title{font-size:21px;letter-spacing:6px;text-indent:6px}
  .boot-avatars{grid-template-columns:repeat(8,1fr);gap:5px;width:min(92vw,340px)}
  .lord-face.lg{width:54px;height:54px}
  .lord-face.lg .lf-ch{font-size:27px}
  .lord-avatar{width:30px;height:30px}
  .lord-avatar .lf-ch{font-size:15px}
  .ava-pick{gap:5px}
}

/* 超窄屏（≤420px，如 iPhone SE / 折叠机外屏）：HUD 进一步瘦身，避免互相压盖 */
@media (max-width:420px){
  .tb-res{gap:3px}
  .res-item{font-size:10px;padding:2px 4px 2px 1px;gap:1px}

  .map-hud{padding:6px}
  .hud-box{left:6px;top:6px;width:min(64vw,224px);padding:9px 10px;font-size:11.5px;line-height:1.65}
  .hud-box h4{font-size:13.5px;letter-spacing:1px}
  .hud-right{right:6px;bottom:6px;gap:6px}
  .round-btn{width:36px;height:36px}
  .round-btn .ico{width:20px;height:20px}
  .map-legend{right:48px;bottom:6px;width:min(62vw,180px);max-height:min(46vh,260px);padding:8px 9px}
  .map-mini{width:92px;height:92px;top:6px;right:6px}
  .mini-tip{display:none}
  .mini-home{width:94%;bottom:8px;font-size:9px;padding:2px 0;letter-spacing:0}
  .map-search{right:6px;top:104px}
  .map-search .ms-input{width:74px;height:30px;font-size:12px}
  .map-search .ms-btn{width:32px;height:30px;font-size:11px}
  .march-bar{left:6px;bottom:6px;right:48px;gap:5px;max-height:34%;overflow:auto}

  /* 刘海屏 / 手势条安全区 */
  .tabbar{padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
  .march-bar{bottom:calc(6px + env(safe-area-inset-bottom,0px))}

  .city-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px}
  .hero-grid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:7px}
  .boot-avatars{grid-template-columns:repeat(6,1fr);gap:4px}
  .lord-face.lg{width:48px;height:48px}
  .lord-face.lg .lf-ch{font-size:24px}
  .modal-box{padding:14px 11px 12px}
}

/* 手机横屏（矮屏）：纵向压缩，抽屉内两列并排 */
@media (orientation:landscape) and (max-height:600px){
  .topbar{height:44px;flex:0 0 44px;flex-wrap:nowrap;padding:0 8px}
  .tb-name{font-size:13px}
  .tb-res{gap:6px}
  .res-item{font-size:11px;padding:1px 8px 1px 2px}
  .res-item i.ico{width:17px;height:17px;vertical-align:-4px}
  .tabbar{height:46px;flex:0 0 46px;flex-wrap:nowrap}
  .tab{flex-direction:row;gap:5px;padding:4px 0;font-size:11.5px}
  .tab .tab-ico{width:20px;height:20px}
  .tab.active .tab-ico{transform:none}

  .map-hud{padding:6px}
  .hud-box{left:6px;top:6px;max-height:calc(100% - 12px);overflow:auto;padding:8px 10px;font-size:11.5px}
  .map-mini{width:92px;height:92px;top:6px;right:6px}
  .map-legend{right:46px;bottom:6px;max-height:calc(100% - 24px);overflow:auto}
  .map-search{top:106px;bottom:auto;right:6px}
  .round-btn{width:34px;height:34px}
  .round-btn .ico{width:19px;height:19px}
  .march-bar{left:6px;bottom:6px;right:52px}

  .world-drawer{width:min(58vw,352px)}
  /* 抽屉里只剩「世界动态」一列，不必再并排；矮屏下靠滚动看全 */
  .wd-body .w-scroll{max-height:none;flex:1 1 auto}
  .wd-body .w-chat{max-height:104px}

  .modal-box{max-height:94vh}
  .hero-grid{top:42px}
}

/* ===================================================================
   战斗动画 / 战前布阵（暗色金边质感）
   =================================================================== */
.bf-modal{padding:0!important;overflow:hidden;border-radius:8px;
  background-image:linear-gradient(165deg,rgba(252,244,222,0.92),rgba(252,244,222,0.93)),var(--tex-paper);
  background-size:auto,300px 300px;box-shadow:var(--cast-2),var(--in-gold)}
.bf{display:flex;flex-direction:column;min-height:540px;color:#e9ddc4;font-family:inherit}
.bf-top{position:relative;display:flex;align-items:center;gap:10px;padding:12px 16px 8px;
  border-bottom:1px solid rgba(224,192,118,.22);
  background:linear-gradient(180deg,rgba(250,240,214,0.55),rgba(20,14,8,0))}
.bf-top h3{margin:0;font-size:20px;letter-spacing:6px;color:#f4e4b4;
  background-image:linear-gradient(180deg,#fff8e6,#efd58a 60%,#caa040);-webkit-background-clip:text;background-clip:text;color:transparent}
.bf-vs{font-size:18px;color:#e0c076;filter:drop-shadow(0 1px 2px #000)}
.bf-tile{margin-left:auto;font-size:12px;color:#b9a988;opacity:.85}

/* 战前面板 */
.bf-prep{padding:14px 18px 18px;display:flex;flex-direction:column;gap:12px;animation:bfIn .35s ease}
.bf-prept{font-size:14px;letter-spacing:4px;color:#efd58a;text-align:center;
  border-bottom:1px dashed rgba(224,192,118,.3);padding-bottom:8px;margin-bottom:2px}
.bf-chiprow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bf-chip{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:6px;
  background:rgba(250,240,214,0.55);border:1px solid rgba(224,192,118,.28);box-shadow:var(--in-dark)}
.bf-chip .bfc-l{font-size:12px;color:#c9b890;letter-spacing:1px}
.bf-chip .bfc-v{font-size:13px;font-weight:600;color:#f0e2bf}
.bf-chip.faction{border-color:rgba(224,192,118,.6);background:rgba(250,240,214,0.55)}
.bf-chip.faction .bfc-v{color:#ffd96b}
.bf-chip.good{border-color:rgba(127,191,95,.55)}
.bf-chip.good .bfc-v{color:#9ee06a}
.bf-chip.bad{border-color:rgba(224,122,95,.55)}
.bf-chip.bad .bfc-v{color:#f0a08a}
.bf-chip.flat .bfc-v{color:#cdd6e6}
.bf-chip.arm .bfc-v{color:#d7c3f0}

.bf-bonds-t{font-size:13px;color:#efd58a;letter-spacing:2px;text-align:center;margin-top:2px}
.bf-bonds{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.bf-nobond{text-align:center;font-size:12px;color:#a99a7c;opacity:.85}

.bf-roster{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 4px;margin-top:4px;border-top:1px solid rgba(224,192,118,.18)}
.bf-ro-col{display:flex;gap:8px;flex:1}
.bf-ro-col.foe{justify-content:flex-end}
.bf-ro{display:flex;flex-direction:column;align-items:center;gap:3px;width:54px}
.bf-ro b{font-size:11px;color:#d8cbac;font-weight:500}
/* 战前阵容速览里的武将头像 */
.bf-ro-face{width:40px;height:40px;border-radius:5px;overflow:hidden;position:relative;
  border:1px solid rgba(224,192,118,.4);background:rgba(120,84,30,0.30);box-shadow:0 2px 6px rgba(120,84,30,.30)}
.bf-ro-face .hface-img{position:absolute;inset:0;display:block}
.bf-ro-face .hface-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bf-ro-face .hface-ch{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:18px;font-weight:700;color:#efd58a;text-shadow:0 1px 2px #000}
.bf-ro-mid{font-size:13px;font-weight:700;color:#e0c076;letter-spacing:1px;padding:0 4px}
.big-btn{font-size:16px;letter-spacing:6px;padding:12px 0;width:100%}

/* 战场 */
.bf-field{flex:1;position:relative;display:flex;align-items:stretch;gap:0;
  padding:18px 14px;min-height:460px;overflow:hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% 40%,rgba(120,80,30,.12),transparent 70%),
    repeating-linear-gradient(180deg,rgba(0,0,0,.10) 0 2px,transparent 2px 26px),
    linear-gradient(180deg,rgba(252,244,222,0.87),rgba(252,244,222,0.91));
  border-radius:6px}

/* 战斗地形水墨画背景：服务端 rec.arena 决定（city/pass/plain/bandit），
 * 图片在 assets/ui/battle/arena-*.jpg。图片缺失时自动回退到下方暗墨底。 */
.bf-field.arena-city{--arena-img:url(../assets/ui/battle/arena-city.jpg)}
.bf-field.arena-pass{--arena-img:url(../assets/ui/battle/arena-pass.jpg)}
.bf-field.arena-plain{--arena-img:url(../assets/ui/battle/arena-plain.jpg)}
.bf-field.arena-bandit{--arena-img:url(../assets/ui/battle/arena-bandit.jpg)}
.bf-field.arena-city,.bf-field.arena-pass,.bf-field.arena-plain,.bf-field.arena-bandit{
  background-color:#14110c;
  background-image:linear-gradient(rgba(8,12,8,.5),rgba(8,12,8,.62)),var(--arena-img);
  background-size:cover;background-position:center;background-repeat:no-repeat}

/* 随机战争图：5 张 AI 生成的三国战争场景，每场随机读一张（battleFx::pickWarScene）。
 * rec.arena 仍可强制指定（city/pass/plain/bandit 或 warN）。图片缺失自动回退到暗墨底。 */
.bf-field.arena-war1{--arena-img:url(../assets/ui/battle/arena-war1.jpg)}
.bf-field.arena-war2{--arena-img:url(../assets/ui/battle/arena-war2.jpg)}
.bf-field.arena-war3{--arena-img:url(../assets/ui/battle/arena-war3.jpg)}
.bf-field.arena-war4{--arena-img:url(../assets/ui/battle/arena-war4.jpg)}
.bf-field.arena-war5{--arena-img:url(../assets/ui/battle/arena-war5.jpg)}
.bf-field.arena-war1,.bf-field.arena-war2,.bf-field.arena-war3,.bf-field.arena-war4,.bf-field.arena-war5{
  background-color:#0e0b08;
  background-image:linear-gradient(rgba(6,8,12,.42),rgba(6,8,12,.58)),var(--arena-img);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  animation:bfFieldDrift 52s ease-in-out infinite alternate}
@keyframes bfFieldDrift{0%{background-position:52% 46%}100%{background-position:48% 54%}}

.bf-side{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;z-index:2}
.bf-side.def{align-items:flex-end}
.bf-side-t{position:absolute;top:6px;font-size:13px;letter-spacing:3px;color:#cbb790;opacity:.8}
.bf-side.atk .bf-side-t{left:14px}
.bf-side.def .bf-side-t{right:14px}
.bf-fx{position:absolute;inset:0;pointer-events:none;z-index:5}
.bf-banner{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) scale(.8);
  font-size:26px;font-weight:800;letter-spacing:10px;color:#ffe9ad;opacity:0;pointer-events:none;z-index:8;
  text-shadow:0 2px 0 #6b4a12,0 0 22px rgba(255,200,90,.7);
  background-image:linear-gradient(180deg,#fff3cf,#e8b94e);-webkit-background-clip:text;background-clip:text;color:transparent}
.bf-banner.show{animation:bfBanner .9s ease;filter:drop-shadow(0 0 12px rgba(255,200,90,.55))}
@keyframes bfBanner{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}80%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}

/* 战法发动文本：中央 fx 区逐个弹出，让「发动战法」肉眼可见 */
.bf-skill{position:absolute;top:26%;left:50%;transform:translate(-50%,-50%);max-width:88%;
  padding:9px 16px;font-size:14px;font-weight:600;text-align:center;color:#f0e3c4;z-index:7;
  background:linear-gradient(180deg,rgba(252,244,222,0.89),rgba(252,244,222,0.89));
  border:1px solid rgba(224,192,118,.55);border-radius:8px;
  box-shadow:0 4px 18px rgba(120,84,30,.35),0 0 26px rgba(255,190,70,.18);
  animation:bfSkill .6s ease forwards;pointer-events:none;letter-spacing:.5px;line-height:1.55}
.bf-skill.mine{border-color:rgba(120,160,220,.55);box-shadow:0 4px 18px rgba(120,84,30,.35),0 0 26px rgba(120,160,220,.18)}
.bf-skill b{font-weight:700}
.bf-skill b.dmg{color:#ff8a6a}
.bf-skill b.heal{color:#7fe0a0}
.bf-skill b.ctrl{color:#c79bea}
.bf-skill b.dot{color:#8fd48a}
.bf-skill b.insight{color:#79e0d8}
.bf-skill b.crit{color:#ffd479}
.bf-skill b.elem-fire{color:#f0a06a}
.bf-skill b.elem-water{color:#7fb8e8}
.bf-skill b.elem-thunder{color:#c8a6ff}
@keyframes bfSkill{0%{opacity:0;transform:translate(-50%,-50%) scale(.72) translateY(6px)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* 施法武将卡闪光 + 暴击整场震动（增强打击感） */
.bunit.cast{animation:bfCast .46s ease}
@keyframes bfCast{0%{box-shadow:0 0 0 0 rgba(255,200,90,.75)}45%{box-shadow:0 0 0 7px rgba(255,200,90,.38),0 0 26px rgba(255,190,70,.85)}
  100%{box-shadow:0 0 0 0 rgba(255,200,90,0)}}
.bf-field.shake{animation:bfShake .3s ease}
@keyframes bfShake{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

.bf-skip{position:absolute;top:46px;right:10px;z-index:9;padding:6px 14px;font-size:12px;letter-spacing:2px;
  border-radius:5px;cursor:pointer;color:#e9d9a8;border:1px solid rgba(224,192,118,.4);
  background:rgba(250,240,214,0.61);box-shadow:var(--in-dark)}
.bf-skip:hover{background:rgba(250,240,214,0.66);color:#ffe9ad}

/* 节奏档位（0.5× / 1× / 2× / 4×）+ 跳过：演出快慢由玩家自己定，而不是替他把总时长写死。
 * ⚠ 「跳过」原来绝对定位在右上角，正好压住敌军第一张武将卡；统一收进这条底栏。 */
.bf-ctl{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:9;
  display:flex;align-items:center;gap:5px;padding:4px 7px 4px 9px;border-radius:16px;
  background:rgba(250,240,214,0.65);border:1px solid rgba(224,192,118,.32);box-shadow:var(--in-dark)}
.bf-ctl-t{font-size:11px;letter-spacing:1px;color:#b9a988;margin-right:3px}
.bf-ctl .bf-skip{position:static;top:auto;right:auto;margin-left:6px;
  padding:3px 11px;font-size:11px;line-height:1.5;letter-spacing:1px;border-radius:11px}
.bf-rate{min-width:38px;padding:3px 8px;font-size:11px;line-height:1.5;letter-spacing:.5px;
  border-radius:11px;cursor:pointer;font-family:inherit;
  color:#d9c9a4;border:1px solid rgba(224,192,118,.28);background:rgba(250,240,214,0.62);
  transition:background .15s,color .15s,border-color .15s}
.bf-rate:hover{background:rgba(252,244,222,0.90);color:#ffe9ad}
.bf-rate.on{color:#2b1c06;font-weight:700;border-color:#f0d79a;
  background:linear-gradient(180deg,#f0d79a,#c08f2c);box-shadow:0 0 10px rgba(240,200,110,.35)}

.bunit{position:relative;display:flex;align-items:center;gap:11px;width:320px;max-width:46vw;padding:9px 12px;
  border-radius:8px;background:linear-gradient(160deg,rgba(252,244,222,0.90),rgba(252,244,222,0.91));
  border:1px solid rgba(224,192,118,.32);box-shadow:var(--in-dark),0 3px 8px rgba(120,84,30,.30);
  /* 入场：武将卡整体利落淡入就位，不再逐个弹跳「跳武将图」。
   * 基础态保持可见（不设 opacity:0），入场靠这条自动播放的淡入；
   * ⚠ 故意不带 forwards/both 填充：否则结束后残留 fill 会锁住 opacity，
   *    后面 .dead{opacity:.32} 就失效；且 .acting/.hurt 覆盖 animation 时也不会把卡变没。 */
  animation:bfUnitIn .5s ease}
.bunit.in{opacity:1}
.bf-side.def .bunit{flex-direction:row-reverse;text-align:right}
@keyframes bfUnitIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bunit .bu-face{width:62px;height:62px;flex:0 0 62px;border-radius:7px;overflow:hidden;border:1px solid rgba(224,192,118,.5);
  background:rgba(120,84,30,.30);display:flex;align-items:center;justify-content:center}
.bunit .bu-face .hface-img{position:relative;display:block;width:100%;height:100%}
.bunit .bu-face .hface-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bunit .bu-face .hface-ch{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:26px;font-weight:700;color:#efd58a;text-shadow:0 1px 2px #000}
.bunit .bu-name{font-size:15px;font-weight:600;color:#f0e3c4;min-width:46px}
.bf-side.def .bu-name{text-align:right}
.bunit .bu-hp{position:relative;flex:1;height:16px;border-radius:8px;overflow:hidden;
  background:rgba(120,84,30,.35);border:1px solid rgba(120,84,30,.35);box-shadow:inset 0 1px 3px rgba(120,84,30,.40)}
.bunit .bhp-fill{position:absolute;left:0;top:0;bottom:0;width:100%;
  background:linear-gradient(180deg,#7fd1a3,#3f9c6b);transition:width .34s cubic-bezier(.2,.8,.2,1)}
.bf-side.def .bunit .bhp-fill{left:auto;right:0;background:linear-gradient(180deg,#e89b82,#c25a3e)}
.bunit .bhp-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;letter-spacing:.5px}
/* 出手方：整张卡放大并朝对手方向前压 —— 「谁在动手」是玩家最想看清的一件事 */
.bunit.acting{z-index:6;animation:bfAct .62s cubic-bezier(.2,.8,.2,1)}
.bf-side.atk .bunit.acting{animation-name:bfActA}
.bf-side.def .bunit.acting{animation-name:bfActD}
@keyframes bfActA{0%{transform:scale(1)}
  28%{transform:scale(1.13) translateX(10px)}
  55%{transform:scale(1.11) translateX(5px)}
  100%{transform:scale(1) translateX(0)}}
@keyframes bfActD{0%{transform:scale(1)}
  28%{transform:scale(1.13) translateX(-10px)}
  55%{transform:scale(1.11) translateX(-5px)}
  100%{transform:scale(1) translateX(0)}}
.bunit.acting .bu-face{box-shadow:0 0 0 2px rgba(255,214,110,.85),0 0 18px rgba(255,190,70,.55)}
.bunit.acting .bu-name{color:#ffe9ad}

/* 中招方：红闪 + 位移抖动 */
.bunit.hurt{animation:bfHurt .46s ease}
@keyframes bfHurt{0%,100%{filter:none;transform:none}
  22%{filter:brightness(1.7) saturate(1.4);box-shadow:0 0 0 2px #ff5a4a,0 0 16px rgba(255,70,50,.85)}
  45%{transform:translateX(-5px) rotate(-.6deg)}
  70%{transform:translateX(5px) rotate(.6deg)}
  88%{transform:translateX(-2px)}}
/* 命中接触感：立绘脸颊在命中点轻缩一下，让"打到了"比单纯红闪更有实体感
 * ⚠ 挂在 .bu-face 上（非 .bunit），与 .hurt 的整卡抖动是两层叠加、互不影响 */
.bu-face.hitpop{animation:bfFacePop .3s cubic-bezier(.3,.7,.3,1)}
@keyframes bfFacePop{0%{transform:scale(1)}24%{transform:scale(.86)}100%{transform:scale(1)}}
/* 被挂上负面状态时的一圈紫光（与掉血的红色区分开） */
.bunit.marked{animation:bfMark .7s ease}
@keyframes bfMark{0%{box-shadow:0 0 0 0 rgba(190,140,255,.8)}
  40%{box-shadow:0 0 0 6px rgba(190,140,255,.34),0 0 22px rgba(170,120,250,.7)}
  100%{box-shadow:0 0 0 0 rgba(190,140,255,0)}}
/* 震慑：整张卡筛糠，一眼看出「这回合他动不了」 */
.bunit.shudder{animation:bfShudder .46s ease}
@keyframes bfShudder{0%,100%{transform:none}
  15%{transform:translate(-4px,1px) rotate(-1deg)}35%{transform:translate(4px,-1px) rotate(1deg)}
  55%{transform:translate(-3px,0) rotate(-.7deg)}75%{transform:translate(3px,1px) rotate(.7deg)}
  90%{transform:translate(-1px,0)}}
.bunit.dead{opacity:.32;filter:grayscale(1);transition:opacity .5s,filter .5s}

/* 状态徽标：震慑 / 计穷 / 缴械 / 混乱（紫）· 中毒 / 灼烧（绿） */
.bu-badges{display:flex;flex:0 0 auto;gap:3px;max-width:104px;overflow:hidden}
.bu-badge{display:inline-flex;align-items:center;gap:2px;padding:1px 5px;border-radius:9px;
  font-size:10.5px;font-weight:700;line-height:1.5;letter-spacing:.3px;white-space:nowrap;
  animation:bfBadgeIn .34s cubic-bezier(.2,1.3,.4,1)}
.bu-badge i{font-style:normal;font-size:9.5px;opacity:.85;padding-left:1px}
.bu-badge.bc{color:#e6d4ff;background:linear-gradient(180deg,rgba(126,74,196,.95),rgba(74,38,124,.95));
  border:1px solid rgba(196,150,255,.6);box-shadow:0 0 9px rgba(150,100,230,.45)}
.bu-badge.bd{color:#d8f5cd;background:linear-gradient(180deg,rgba(74,132,60,.95),rgba(38,78,32,.95));
  border:1px solid rgba(150,220,120,.55);box-shadow:0 0 9px rgba(110,190,90,.4)}
.bu-badge.stun{color:#ffe0b0;background:linear-gradient(180deg,rgba(170,92,40,.95),rgba(104,50,18,.95));
  border-color:rgba(255,180,110,.6)}
@keyframes bfBadgeIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* 掉血残影：血条掉下去之前，先用浅色留住「掉之前的那一段」 */
.bhp-ghost{position:absolute;left:0;top:0;bottom:0;width:100%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,214,214,.75))}
.bf-side.def .bunit .bhp-ghost{left:auto;right:0}
.bhp-ghost.run{transition:width .52s cubic-bezier(.3,.7,.2,1) .06s}
.bunit .bhp-fill{z-index:1}

.dmgpop{position:absolute;top:1px;right:8px;z-index:9;pointer-events:none;
  display:flex;align-items:baseline;gap:3px;text-shadow:0 1px 3px #000,0 0 8px rgba(120,84,30,.45);
  animation:bfPop 1.25s ease forwards}
.dmgpop b{font-size:17px;font-weight:800;-webkit-text-stroke:.5px rgba(120,84,30,.35);paint-order:stroke fill;text-shadow:0 1px 4px #000,0 0 9px rgba(120,84,30,.45)}
.dmgpop i{font-style:normal;font-size:10px;font-weight:700;padding:0 3px;border-radius:6px;
  background:rgba(255,190,60,.9);color:#3a2600;letter-spacing:.5px}
.bf-side.def .dmgpop{right:auto;left:8px}
.dmgpop.hurt b{color:#ff7a5a}
.dmgpop.crit b{color:#ffd23a;font-size:22px;text-shadow:0 0 12px rgba(255,200,60,.95),0 1px 3px #000;animation:critPulse .42s ease}
.dmgpop.heal b{color:#7fe0a0}
@keyframes bfPop{0%{opacity:0;transform:translateY(8px) scale(.6)}
  14%{opacity:1;transform:translateY(-7px) scale(1.15)}
  30%{transform:translateY(-10px) scale(1)}
  72%{opacity:1}
  100%{opacity:0;transform:translateY(-34px) scale(.95)}}

/* 弹道：从出手方飞向中招方，把「对谁」连起来。
 * 挂 body + fixed：坐标与 getBoundingClientRect 同一坐标系，且不受弹窗 overflow 裁剪。 */
.bf-fly{position:fixed;z-index:1200;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  pointer-events:none;animation:bfFly .6s cubic-bezier(.3,.1,.7,.4) forwards}
.bf-fly.phys{background:radial-gradient(circle at 35% 35%,#fff6d8,#ffbe4a 55%,rgba(255,140,40,0) 72%);
  box-shadow:0 0 12px rgba(255,180,70,.9)}
.bf-fly.magic{background:radial-gradient(circle at 35% 35%,#f0e0ff,#b478ff 55%,rgba(150,80,255,0) 72%);
  box-shadow:0 0 14px rgba(170,110,255,.95)}
.bf-fly.heal{background:radial-gradient(circle at 35% 35%,#e2ffe9,#57d98a 55%,rgba(60,200,120,0) 72%);
  box-shadow:0 0 12px rgba(90,220,140,.9)}
@keyframes bfFly{0%{opacity:0;transform:translate(0,0) scale(.4)}
  18%{opacity:1;transform:translate(calc(var(--tx)*.18),calc(var(--ty)*.18)) scale(1.15)}
  80%{opacity:1}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.55)}}

/* 行动提示条：把「谁 → 对谁 干了什么」写在中央，飘字一闪而过也不怕漏看 */
/* ⚠ max-width 收紧到 62%：再宽就压住两侧武将卡（卡片宽 320px，弹窗 780px，中间只剩 ~110px 空隙），
 * 挡住正在放大的出手方 —— 那恰恰是玩家最需要看清的东西。 */
.bf-act{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);max-width:62%;
  display:flex;align-items:center;gap:5px;padding:5px 13px;border-radius:14px;white-space:nowrap;
  font-size:12.5px;color:#f2e6c8;z-index:7;pointer-events:none;letter-spacing:.3px;
  background:rgba(252,244,222,0.85);border:1px solid rgba(224,192,118,.42);
  box-shadow:0 3px 12px rgba(120,84,30,.35);animation:bfActTip .34s ease}
.bf-act b{color:#ffe9ad;font-weight:700}
.bf-act span{color:#e0c076;font-weight:700}
.bf-act em{font-style:normal;color:#c8b894}
.bf-act u{text-decoration:none;font-weight:800;color:#ff9a76}
.bf-act.heal u{color:#7fe0a0}
.bf-act.crit u{color:#ffd23a}
.bf-act.ctrl em,.bf-act.dot em{color:#d3b0ff}
.bf-act.ctrl u,.bf-act.dot u{display:none}
@keyframes bfActTip{from{opacity:0;transform:translateX(-50%) translateY(6px) scale(.94)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

@keyframes bfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* 结算 */
.bf-end{padding:14px 18px 18px;display:flex;flex-direction:column;gap:12px;animation:bfIn .35s ease}
.bf-cmp{display:flex;flex-direction:column;gap:7px}
.bf-cmp .br-cmp-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#cdbf9d}
.bf-cmp .br-cmp-row .lbl{width:38px;color:#b6a684}
.bf-cmp .br-track{flex:1;height:12px;border-radius:6px;background:rgba(120,84,30,.35);overflow:hidden;border:1px solid rgba(120,84,30,.35)}
.bf-cmp .br-track i{display:block;height:100%}
.bf-cmp .br-track i.atk{background:linear-gradient(90deg,#5b8dd9,#8fb8f0)}
.bf-cmp .br-track i.def{background:linear-gradient(90deg,#e07a5f,#f0a08a)}
.bf-cmp .br-cmp-row b{width:62px;text-align:right;color:#ecdcaf}
.bf-gain{text-align:center;font-size:13px;color:#9ee06a;letter-spacing:1px}
.bf-btns{display:flex;gap:10px;justify-content:center}
.bf-btns .btn{flex:1;max-width:200px}
/* 战报导出回退弹窗（复制失败时手动复制用） */
.m-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.m-btns .btn{flex:0 1 auto;min-width:80px}
.bf-export{background:rgba(120,84,30,.30);border:1px solid var(--line);border-radius:8px;color:#8a6215;
  font:12px/1.6 ui-monospace,Consolas,Menlo,monospace;padding:12px 14px;max-height:46vh;overflow:auto;
  white-space:pre-wrap;word-break:break-all;margin:0}
.bf-export::-webkit-scrollbar{width:8px}
.bf-export::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}

/* 战况 HUD（顶部兵力对比 + 回合 + 进度点） */
.bf-hud{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:4;width:min(560px,92%);
  display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;
  font-family:var(--f-title);text-shadow:0 1px 3px rgba(120,84,30,.55)}
.bfh-top{display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:1px}
.bfh-side{font-weight:700}
.bfh-side.mine{color:#9fc0f0}
.bfh-side.foe{color:#f0a890}
.bfh-round{font-size:13px;color:#efd58a;letter-spacing:2px;padding:1px 10px;border:1px solid rgba(224,192,118,.4);
  border-radius:10px;background:rgba(250,240,214,0.55)}
.bfh-bar{position:relative;width:100%;height:8px;border-radius:5px;overflow:hidden;
  background:rgba(120,84,30,.32);box-shadow:inset 0 0 0 1px rgba(224,192,118,.25)}
.bfh-bar i{position:absolute;top:0;bottom:0;display:block}
.bfh-atk{left:0;background:linear-gradient(90deg,#3f6db0,#7ba6e8)}
.bfh-def{right:0;background:linear-gradient(90deg,#c2553c,#f0906f)}
.bfh-pips{display:flex;gap:5px}
.bfh-pips i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(224,192,118,.2)}
.bfh-pips i.on{background:#ffd479;box-shadow:0 0 6px rgba(255,200,90,.9)}
/* 战前阵容：主将星标 + 势力描边（描边色由 JS 按势力注入） */
.bf-ro.lead .bf-ro-face{position:relative}
.bf-ro-lead{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);font-size:9px;line-height:1;
  font-family:var(--f-title);color:#2b1c06;background:linear-gradient(180deg,#ffe6a6,#e6b85a);
  padding:1px 4px;border-radius:4px;letter-spacing:1px;box-shadow:0 1px 3px rgba(120,84,30,.40);font-style:normal;z-index:2}
/* 结算统计：回合 / 折损 / 首功 */
.bf-stats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;font-size:12px;color:#cdbd99}
.bf-stats .st{display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:8px;
  background:rgba(120,84,30,0.40);border:1px solid rgba(224,192,118,.22)}
.bf-stats .st b{color:#efd58a;font-weight:700}
.bf-stats .st.mvp b{color:#ffd479}

@media (max-width:560px){
  .bunit{width:200px;max-width:42vw}
  .bf-hud{top:4px}
  .bfh-top{font-size:12px;gap:8px}
  .bfh-round{font-size:11px;padding:1px 7px}
  .bf-banner{font-size:20px;letter-spacing:6px}
  .bf-top h3{font-size:16px;letter-spacing:3px}
  .bf-act{font-size:11.5px;padding:4px 10px;bottom:12%;max-width:76%}
  .bf-act b{font-size:11.5px}
  .dmgpop b{font-size:14px}
  .bu-badge{font-size:9.5px;padding:1px 4px}
  .bu-badges{max-width:64px}
}

/* ===== 手机横屏（矮视口）字体放大：正文 10.5-12.5px 在横屏过小，整体抬到 13px 起 ===== */
@media (orientation:landscape) and (max-height:600px){
  body{font-size:13.5px}
  /* 弹窗与战报正文 */
  .m-desc,.m-row,.br-line,.sk-d,.sk-eff,.bd-desc,.rc-stat,.rc-skill,.bf-gain{font-size:13px;line-height:1.7}
  .m-sec{font-size:14.5px}
  .m-row b,.br-line b{font-size:13px}
  /* 天下抽屉：动态 / 聊天 */
  .w-name,.w-chat-item,.w-ev-item,.w-pow,.w-land{font-size:12.5px}
  .chat-in input{font-size:13px;padding:8px 10px}
  .w-row .btn-sm{font-size:11.5px;padding:5px 10px}
  /* 记录与列表 */
  .log-item{font-size:12.5px;line-height:1.7}
  /* 顶栏与导航 */
  .res-item{font-size:12px}
  .res-item b{font-size:12px}
  .tab{font-size:12.5px}
  .mini-tip,.tc-bonds{font-size:11.5px}
  /* 兵力条与徽标 */
  .hlv{font-size:11px}
  .bs-row{font-size:12px}
}

/* ---------- 「天下」抽屉展开时，让地图左上角的疆域面板让位 ----------
 * 抽屉是盖在画布上的浮层，展开时会整块压住 .hud-box（既看不见也点不到）。
 * 抽屉宽度随断点变化，所以由 JS 量出真实宽度写进 --wd-w，CSS 只负责平移。 */
.hud-box{left:calc(var(--wd-w,0px) + var(--hud-x,12px))}
@media (max-width:1024px){ .hud-box{left:calc(var(--wd-w,0px) + 8px)} }
@media (max-width:420px){ .hud-box{left:calc(var(--wd-w,0px) + 6px)} }
@media (orientation:landscape) and (max-height:600px){ .hud-box{left:calc(var(--wd-w,0px) + 6px)} }

/* ==================================================================
   排行栏（底部导航「排行」）：势力排行 / 战功排行 / 同盟排行
   ==================================================================
   行样式复用 .w-row 系列（style.css），但那一套是给「天下」抽屉的窄条写的
   （内容居中、列宽靠 min-width）。排行页有整屏宽，所以这里给每列钉死宽度，
   让「战功 / 势力值 / 领地」逐行对齐成一竖 —— 排行榜读的就是这一竖。 */
.rank-wrap{position:absolute;top:50px;left:0;right:0;bottom:0;overflow:auto;
  padding:13px;max-width:920px;margin:0 auto;
  /* 列宽集中在这里定义：数据行与列标题行必须用同一套值，否则整张表会错开半列。
   * 宽度写两遍迟早会改漏一处，所以提到变量上。 */
  --rk-no:26px; --rk-face:24px; --rk-flag:26px;
  --rk-kill:112px; --rk-pvp:92px; --rk-pow:110px; --rk-land:118px;
  --rk-leader:116px; --rk-mem:70px}
.rank-wrap .w-row{gap:10px;padding:9px 10px}
.rank-wrap .w-no{flex:0 0 var(--rk-no)}
.rank-wrap .lord-face{flex:0 0 var(--rk-face)}
.rank-wrap .w-flag{flex:0 0 var(--rk-flag)}
/* ⚠ 必须是 `flex:1 1 0` 而不是 `1 1 120px`：后者让每一行各自分配剩余空间，
 * 不同行算出的宽度会差 1px，右对齐的「战功 / 势力值 / 领地」就会逐行错开。
 * basis=0 时所有行的这一列宽度完全相同。 */
.rank-wrap .w-name{flex:1 1 0;min-width:0}
.rank-wrap .w-pow{flex:0 0 var(--rk-pow);min-width:0}
.rank-wrap .w-land{flex:0 0 var(--rk-land);min-width:0}
.rank-wrap .rk-kill{flex:0 0 var(--rk-kill);min-width:0;text-align:right;
  font-variant-numeric:tabular-nums}
.rank-wrap .w-kill{color:#e2a48f;font-weight:700}      /* 势力/同盟榜里顺带露出的战功 */
.rank-wrap .rk-pvp{flex:0 0 var(--rk-pvp);min-width:0;text-align:right;color:var(--tx-3);
  font-size:11.5px;font-variant-numeric:tabular-nums}
.rank-wrap .rk-leader{flex:0 0 var(--rk-leader);min-width:0;color:var(--tx-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-wrap .rk-mem{flex:0 0 var(--rk-mem);min-width:0;color:var(--tx-3);font-size:11.5px}
.rank-wrap .w-row .btn{flex:0 0 auto;padding:4px 11px;font-size:11.5px}
/* 每行的「身份段 / 数据段」分组。桌面端让这两个容器不生成盒子（display:contents），
 * 它们的子元素就直接成为 .w-row 的 flex item —— 列宽、顺序、对齐与不分组的写法
 * 逐像素相同，分组只在手机断点（下面媒体查询里改回 display:flex）才起作用。 */
.rk-main,.rk-data{display:contents}
/* 同盟榜没有君主立绘，但表头留着 rh-face 那一格，这里用空占位补齐列宽 */
.rank-wrap .rk-face{flex:0 0 var(--rk-face)}
/* ⚠ 高亮自己那一行时不能留边框（.w-row.me 默认带 1px 边框）：
 * 左边框会把整行内容右推 1px，于是「我」这一行的战功/势力值比别的行错开 1 格像素，
 * 整张表的数字列再也对不齐。改成 border:none + inset 描边，盒子尺寸与别行完全一致。 */
.rank-wrap .w-row.me{border:none;
  box-shadow:inset 0 0 0 1px rgba(224,192,118,.45), inset 2px 0 0 var(--gold)}
/* 同盟榜的徽记：没有立绘，用一方「盟」印代位 */
.rank-wrap .w-flag.ally{background:linear-gradient(165deg,#f4dd92,#a97c22);font-size:11px;
  box-shadow:inset 0 1px 0 rgba(255,250,225,.6), 0 1px 3px rgba(120,84,30,.30)}

/* 列标题行：窄屏隐藏（窄屏改用下面的 ::before 前缀），宽屏才对齐得上 */
.rank-head{display:none}
@media (min-width:761px){
  .rank-head{display:flex;align-items:center;gap:10px;padding:0 10px 7px;margin-bottom:8px;
    border-bottom:1px solid rgba(216,178,94,.2);color:var(--tx-4);
    font-size:11px;letter-spacing:1px}
  .rank-head .w-no{flex:0 0 var(--rk-no);width:auto;text-align:center;
    font-family:inherit;font-size:11px;font-weight:400;color:var(--tx-4)}
  .rank-head .rh-face{flex:0 0 var(--rk-face)}
  .rank-head .rh-flag{flex:0 0 var(--rk-flag)}
  .rank-head .w-name{flex:1 1 0;min-width:0;font-size:11px;font-weight:400;color:var(--tx-4)}
  .rank-head .rk-kill{flex:0 0 var(--rk-kill);min-width:0;text-align:right;
    font-size:11px;font-weight:400;color:var(--tx-4)}
  .rank-head .rk-pvp{flex:0 0 var(--rk-pvp);min-width:0;text-align:right;font-size:11px;color:var(--tx-4)}
  .rank-head .rk-leader{flex:0 0 var(--rk-leader);min-width:0}
  .rank-head .rk-mem{flex:0 0 var(--rk-mem);min-width:0;font-size:11px}
  .rank-head .w-pow{flex:0 0 var(--rk-pow);min-width:0;text-align:right;
    font-size:11px;font-weight:400;color:var(--tx-4)}
  .rank-head .w-land{flex:0 0 var(--rk-land);min-width:0;font-size:11px}
  /* 表头的定位占位：渲染成同样的按钮再隐藏，宽度自然与数据行一致 */
  .rank-head .rh-btn{visibility:hidden;pointer-events:none;padding:4px 11px;font-size:11.5px}
}
/* 「我的名次」条：翻到第 40 名时还能一眼看到自己排第几 */
.rank-self{padding:8px 12px;margin-bottom:10px;border-radius:var(--r-s);font-size:12px;
  color:var(--tx-3);letter-spacing:.5px;
  background-image:linear-gradient(90deg,rgba(224,192,118,.16),rgba(224,192,118,.03));
  border:1px solid rgba(224,192,118,.3);
  box-shadow:inset 2px 0 0 var(--gold)}
.rank-self b{color:#8a6215;font-weight:700;font-variant-numeric:tabular-nums}
.rank-hint{align-self:center;margin-left:auto;font-size:11.5px;color:var(--tx-4);letter-spacing:1px}
.rank-wrap .w-row.dim{padding:14px;text-align:center}

/* 手机竖屏：列宽放不下，改成「换行两段」——第一段人名 + 定位，第二段数据。
 * 表头在这一档是隐藏的，所以由 ::before 给裸数字补回「势力 / 战功 / 盟主」前缀。 */
@media (max-width:760px){
  /* 左侧「天下」把手宽约 42px（padding 8×2 + 图标 26）且垂直居中，会正好盖在
   * 列表中部的名次数字上。这里给它让出宽度；抽屉展开时 --wd-w 会变大，
   * max() 就把让位自动收回 9px，不会白挤一条。 */
  .rank-wrap{padding:9px;padding-left:max(9px,calc(44px - var(--wd-w,0px)))}
  .rank-wrap .w-row{flex-wrap:wrap;row-gap:4px;padding:8px 9px}
  /* 两个分组恢复成 flex 行：身份段与「定位」同处第一行，数据段独占第二行。
   * 上一版靠 .rk-kill{order:1} 想让数据折下去，但 flex-wrap 只在「真的放不下」
   * 时才折——第一行还有 w-name 的 grow 空间没分配，「战功 0」恰好塞得进，
   * 于是数据列被劈成两半。改成两个容器后折行是结构性的，与剩余空间无关。 */
  /* 三段显式排序：身份段与「定位」同在首行，数据段独占次行。
   * （DOM 顺序是 rk-main → rk-data → 按钮，而桌面端正是这个顺序；
   *  手机端要按钮留在首行，就得把数据段排到按钮后面。） */
  .rank-wrap .rk-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;order:0}
  .rank-wrap .w-row>.btn{order:1}
  .rank-wrap .rk-data{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 100%;order:2}
  .rank-wrap .rk-face{display:none}      /* 同盟榜的立绘占位：手机端表头本就隐藏 */
  .rank-wrap .w-name{flex:1 1 64px;font-size:12.5px}
  .rank-wrap .rk-kill,.rank-wrap .rk-pvp,.rank-wrap .rk-leader,.rank-wrap .rk-mem,
  .rank-wrap .w-pow,.rank-wrap .w-land{flex:0 1 auto;min-width:0;font-size:11px}
  .rank-wrap .w-pow::before{content:'势力 ';color:var(--tx-4)}
  .rank-wrap .rk-kill::before{content:'战功 ';color:var(--tx-4)}
  .rank-wrap .rk-leader::before{content:'盟主 ';color:var(--tx-4)}
  .rank-hint{display:none}
}
@media (max-width:420px){
  .rank-wrap .rk-pvp{display:none}     /* 超窄屏先舍胜负明细，保住战功数字 */
}

/* ---------- 底部导航：没有 tab-rank.png，用内联 SVG 顶位 ----------
 * 图标集里只有 9 张位图导览图（tab-map/tab-city/…），没有「排行」。
 * 与其塞一张风格对不上的图，不如画三根合阶立柱；currentColor 让它跟着
 * .tab / .tab.active 的文字色自动变金，也不必再挂滤镜。 */
.tab .tab-ico.tab-svg{color:inherit;background:none;border:none;border-radius:0;line-height:0}
.tab .tab-ico.tab-svg svg{display:block;width:100%;height:100%;
  filter:drop-shadow(0 1px 2px rgba(120,84,30,.35));
  transition:transform .2s cubic-bezier(.2,.9,.3,1.6)}
.tab:hover .tab-ico.tab-svg svg{filter:drop-shadow(0 1px 3px rgba(120,84,30,.40))}
.tab.active .tab-ico.tab-svg svg{transform:translateY(-3px) scale(1.1);
  filter:drop-shadow(0 0 9px rgba(224,192,118,.65)) drop-shadow(0 1px 3px rgba(120,84,30,.40))}
@media (orientation:landscape) and (max-height:600px){
  .tab.active .tab-ico.tab-svg svg{transform:scale(1.06)}
}

/* ---------- 个人面板（点顶栏头像）：君主档案 ---------- */
.pf-head{display:flex;align-items:center;gap:13px;padding:11px 12px;margin:2px 0 4px;
  border-radius:var(--r-m);
  background-image:linear-gradient(165deg,rgba(250,240,214,0.66),rgba(252,244,222,0.85));
  border:1px solid rgba(216,178,94,.26);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.08), 0 4px 14px rgba(120,84,30,.30)}
.pf-id{flex:1;min-width:0}
.pf-name{font-family:var(--f-title);font-size:19px;font-weight:700;letter-spacing:2px;
  color:#8a6215;line-height:1.2}
.pf-sub{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px;color:var(--tx-3)}
.pf-crest{flex:0 0 auto;width:19px;height:19px;background-size:contain;
  background-repeat:no-repeat;background-position:center}
.pf-idno{margin-left:auto;color:var(--tx-4);font-variant-numeric:tabular-nums}
.pf-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.pf-tags .role{font-size:10px;font-style:normal;color:var(--gold);letter-spacing:.5px;
  border:1px solid var(--gold-dk);border-radius:6px;padding:1px 6px}
.pf-tags .role.cap{color:#e8836b;border-color:#8a3a2a}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:0 22px;margin-top:6px}
.pf-grid .m-row{padding:7px 2px}
.pf-grid .m-row span,.pf-grid .m-row b{font-size:12.5px}
.pf-res{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 2px}
.pf-res-item{display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--r-s);
  font-size:12px;color:var(--tx-3);
  background-image:linear-gradient(180deg,rgba(250,240,214,0.58),rgba(250,240,214,0.61));
  border:1px solid rgba(216,178,94,.18)}
.pf-res-item b{color:var(--tx);font-weight:700;font-variant-numeric:tabular-nums}
.pf-res-item.full{border-color:rgba(224,192,118,.5)}
.pf-res-item.full b{color:#8a6215}
@media (max-width:420px){
  .pf-head{gap:10px;padding:9px 10px}
  .pf-name{font-size:17px}
  .pf-idno{display:none}
  .pf-grid{grid-template-columns:1fr}
}


/* ==================================================================
 * 精修层 · 高级感（全站体检后追加，集中放最后便于整体回退）
 * 原则：只动「层次 / 留白 / 过渡 / 数字」四个维度，不改布局结构
 * ================================================================== */

/* ---- 1. 数字等宽：所有数值纵向对齐，是精致感的地基 ---- */
body{font-variant-numeric: tabular-nums;}

/* ---- 2. 选区与滚动条：细节处的仪式感 ---- */
::selection{background:rgba(224,192,118,.32);color:#fff8e6;}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(120,84,30,0.25)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(138,107,47,.75),rgba(92,69,25,.75));
  border-radius:5px;border:2px solid rgba(120,84,30,0.25)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(224,192,118,.85),rgba(138,107,47,.85))}

/* ---- 3. 金色按钮：从「亮金大发光」收为「沉铜金 + 内高光」，
 *      hover 只提亮金线与光晕、active 有下压 —— 高级感来自克制 ---- */
.btn-gold{background:linear-gradient(180deg,#f0d894 0%,#dcb252 46%,#9c7430 100%);
  box-shadow:inset 0 1px 0 rgba(255,250,225,.6), inset 0 -1px 0 rgba(90,60,10,.45),
    0 1px 0 #5a4418, 0 3px 10px rgba(120,84,30,.30);
  transition:transform .12s, box-shadow .15s, filter .15s;}
.btn-gold:hover{filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,250,225,.7), inset 0 -1px 0 rgba(90,60,10,.45),
    0 1px 0 #5a4418, 0 4px 16px rgba(224,192,118,.28);}
.btn-gold:active{transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(250,240,214,0.55), 0 1px 4px rgba(120,84,30,.30)}
.btn:not(.btn-gold):hover{border-color:var(--line-2);filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}

/* ---- 4. 卡片体系：统一的 hover 浮起 —— 抬升 2px、金线提亮、阴影加深 ---- */
.bd-card,.hero-card,.team-card,.skill-card,.rc-btn,.ct-row,.ally-item,.m-list-item{will-change:transform}
.bd-card:hover,.hero-card:hover,.team-card:hover,.skill-card:hover,
.ally-item:hover,.m-list-item:hover{transform:translateY(-2px);
  border-color:rgba(224,192,118,.55);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.12), 0 10px 22px rgba(120,84,30,.35)}
.bd-card:active,.hero-card:active{transform:translateY(0)}

/* 内城卡：更深的墨底 + 顶部一线金光 + 角标精修 */
.bd-card{background:linear-gradient(172deg,#2a2015 0%,#191410 58%,#120e0a 100%)}
.bd-card::after{content:'';position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,192,118,.45),transparent);pointer-events:none}
.bd-lv{background:linear-gradient(180deg,#8a2f22,#5e1f16);
  border:1px solid rgba(255,180,140,.35);border-radius:3px;
  box-shadow:0 1px 3px rgba(120,84,30,.35), inset 0 1px 0 rgba(255,210,180,.25);
  font-size:10px;font-weight:700;padding:1px 6px}
.bd-card .bd-up{color:var(--tx-3);letter-spacing:.5px}
.bd-card:not(.locked) .bd-up{color:#d8c58e}
/* 「可升级」：金点呼吸提示 —— 不动卡片本体，一眼看到哪块能点 */
.bd-card .up-dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:4px;
  background:var(--gold);vertical-align:1px;
  box-shadow:0 0 6px rgba(224,192,118,.8);
  animation:upDot 1.6s ease-in-out infinite}
@keyframes upDot{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .bd-card .up-dot{animation:none;opacity:.9} }

/* 内城「产出来源」：城建 / 领地 占比条 */
.src-wrap{margin:7px 0 4px;padding:7px 9px;border-radius:5px;
  background:rgba(120,84,30,0.22);box-shadow:inset 0 0 0 1px rgba(224,192,118,.13)}
.src-cap{font-size:10.5px;color:#8d7d5f;letter-spacing:1px;margin-bottom:6px}
.src-row{display:flex;align-items:center;gap:7px;height:19px}
.src-row>*{flex:0 0 auto}
.src-row .sr-bar{flex:1 1 auto;height:4px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(120,84,30,.30)}
.src-row .sr-bar>i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,#7a5c22,#e0c076)}
.src-row .sr-v{font-size:10.5px;color:#9d8c6e;letter-spacing:.3px;min-width:132px;text-align:right}
.src-row .sr-v b{color:#ceb787;font-weight:600}
@media (max-width:520px){
  .src-row .sr-v{min-width:96px;font-size:10px}
  .src-row{gap:5px}
}

/* 城建等级进度条：lv / max 的完成度，一眼看出城建还差多少 */
.bd-card .bd-bar{position:relative;height:3px;margin:7px 0 2px;border-radius:2px;overflow:hidden;
  background:rgba(120,84,30,.32);box-shadow:inset 0 0 0 1px rgba(224,192,118,.14)}
.bd-card .bd-bar>i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,#8a6a2a,#e0c076);box-shadow:0 0 6px rgba(224,192,118,.45);
  transition:width .35s ease}
/* 卡面状态色：可升级=金 / 资源不足=赭红 / 已达上限或差主城=灰 */
.bd-card .bd-up.st-ok{color:#e6cf90;text-shadow:0 0 6px rgba(224,192,118,.3)}
.bd-card .bd-up.st-no{color:#c8826c}
.bd-card .bd-up.st-max{color:#7d7264}
.bd-card.can-up{border-color:rgba(224,192,118,.34)}
.bd-card .m-note,.m-note{font-size:11.5px;color:#a2916f;letter-spacing:.4px;margin:6px 0 0;
  padding:5px 9px;border-left:2px solid rgba(224,192,118,.4);background:rgba(224,192,118,.05)}
.m-note b{color:#e6cf90;font-weight:700}
.m-note.bad{border-left-color:rgba(184,64,47,.6);background:rgba(184,64,47,.07)}
.m-note.bad b{color:#e08a72}

/* ---- 5. 武将卡：立绘区加内衬金线与底部渐晕，星级带微光 ---- */
/* 立绘放大后底部渐晕要同步收窄减淡：原来 -18px/26px/.55 是按 68px 小图调的，
 * 图放大到 94~130px 后同样的数值会糊掉人物整个下半身。*/
.hero-card .hface{box-shadow:inset 0 0 0 1px rgba(224,192,118,.3), inset 0 -13px 18px rgba(120,84,30,0.30)}
.hero-card .star{color:#e9c05c;text-shadow:0 0 6px rgba(233,192,92,.45);letter-spacing:2px}
.hero-card.q5 .star{color:#f4dd92;text-shadow:0 0 8px rgba(240,214,142,.6)}
.hero-card.q4 .star{color:#cf9fe0;text-shadow:0 0 7px rgba(190,140,220,.5)}
.hero-card .hn{letter-spacing:2px}

/* ---- 5b. 立绘框放大：占满卡片内宽（1:1 铺开）----
 * 根因：卡片宽 128~150px，而立绘框写死 68px，左右各空约 30px 完全没用上
 *       —— 只调数字（52→68→…）永远觉得小，因为框根本没吃满卡片。
 * 立绘源图是 1:1 正方形（113 张 256² + 26 张 1024²），所以「满宽 + 1:1」既不裁切
 * 也不变形，展示面积约为原来的 3.5 倍。武将列表 / 招募图鉴 / 招募结果卡 / 选将卡
 * 都用 .hero-card 容器，故一并生效。
 * ⚠ .hd-hero（详情 112px）、.hface-sm（部队槽 26px）、.bu-face（战斗 62px）
 *   各有更具体的选择器，不受本规则影响。*/
.hero-card .hface{width:100%;height:auto;aspect-ratio:1/1;
  line-height:1;margin:0 0 8px;font-size:44px}

/* ---- 6. 顶栏：底部一条 1px 金渐变收边；资源格 hover 微亮 ---- */
.topbar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 2%,rgba(224,192,118,.4) 30%,rgba(224,192,118,.4) 70%,transparent 98%);
  pointer-events:none}
.tb-res > *{transition:background .15s, border-color .15s}
.tb-res > *:hover{background:rgba(224,192,118,.08);border-color:rgba(224,192,118,.5)}
.tb-power b{color:#8a6215}

/* ---- 7. 排行：前三名金银铜徽章（依赖 JS 行上的 r1/r2/r3）。
 *      ⚠ 不设 width —— 列宽由 --rk-no 统一控制，改宽度会把前三行的数据列挤歪 */
.rank-wrap .w-row.r1 .w-no,.rank-wrap .w-row.r2 .w-no,.rank-wrap .w-row.r3 .w-no{
  color:#1c1408;font-weight:800;border:none;height:24px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;align-self:center;
  text-shadow:0 1px 0 rgba(255,246,214,.5)}
.rank-wrap .w-row.r1 .w-no{background:linear-gradient(160deg,#ffe9a8,#e0c076 55%,#9c7430);
  box-shadow:0 0 10px rgba(224,192,118,.5), inset 0 1px 0 rgba(255,250,225,.8)}
.rank-wrap .w-row.r2 .w-no{background:linear-gradient(160deg,#e8eef5,#9fb2c8 55%,#5c6c80);
  box-shadow:0 2px 7px rgba(120,84,30,.32), inset 0 1px 0 rgba(255,255,255,.7)}
.rank-wrap .w-row.r3 .w-no{background:linear-gradient(160deg,#f0c9a0,#b87a4a 55%,#7a4a26);
  box-shadow:0 2px 7px rgba(120,84,30,.32), inset 0 1px 0 rgba(255,240,220,.7)}
.rank-wrap .w-row:not(.me):hover{background:rgba(224,192,118,.06)}
.rank-self{letter-spacing:.5px}

/* ---- 8. 部队：槽位立绘衬底 + 「编组新部队」从实心大金块改为描边金 ---- */
.tc-slots .slot.filled{background:linear-gradient(172deg,#2b2216 0%,#fdf6e2 100%);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.08), 0 2px 6px rgba(120,84,30,.30);
  transition:border-color .15s, transform .15s}
.tc-slots .slot.filled:hover{border-color:rgba(224,192,118,.55);transform:translateY(-1px)}
.tc-slots .hface-sm{box-shadow:inset 0 0 0 1px rgba(224,192,118,.3)}
#newTeam{background-image:none !important;background-color:rgba(224,192,118,.05);
  border:1px solid var(--gold-dk);color:#8a6215;
  box-shadow:none;text-shadow:none;font-weight:400;letter-spacing:3px;
  transition:border-color .15s, background .15s, transform .12s}
#newTeam:hover{border-color:var(--gold);background:rgba(224,192,118,.09)}
#newTeam:active{transform:translateY(1px)}

/* ---- 9. 弹窗：背板轻模糊 + 更深的层叠阴影，弹窗即「台面」 ---- */
.modal-layer{backdrop-filter:blur(3px) saturate(1.1);-webkit-backdrop-filter:blur(3px) saturate(1.1);
  background:rgba(96,70,32,.45)}
@media (prefers-reduced-motion: reduce){ .modal-layer{backdrop-filter:none;-webkit-backdrop-filter:none} }

/* ---- 10. 抽屉 / 内页容器：顶部一线金光统一「卷轴口」意象 ---- */
.wd-head::after,.list-bar::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,192,118,.5),transparent);pointer-events:none}
.wd-head,.list-bar{position:relative}

/* ---- 11. 空态：留白中的居中与呼吸感 ---- */
.log-empty,.ally-wrap-inner .empty{opacity:.85}

/* ---- 12. 底栏 tab：active 已有金线与图标动效（.tab.active::after），不重复叠加 ---- */
.tab:hover{color:var(--tx-2)}

/* ===================== 武将档案：属性 / 战法 / 养成 三栏 ===================== */
.hd-tabs{display:flex;gap:6px;margin:14px 0 4px;padding:4px;border-radius:10px;
  background:rgba(120,84,30,0.28);border:1px solid rgba(216,178,94,.18)}
.hd-tab{flex:1 1 0;text-align:center;padding:8px 0;border-radius:7px;cursor:pointer;
  font-family:var(--f-title);font-size:13.5px;letter-spacing:3px;color:var(--tx-3);
  transition:background .16s,color .16s,box-shadow .16s}
.hd-tab:hover{color:var(--tx-2)}
.hd-tab.on{color:#2a1c06;background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk));
  box-shadow:0 2px 8px rgba(224,192,118,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.hd-pane{margin-top:6px;animation:hdPane .2s ease-out}
@keyframes hdPane{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 可点立绘：右下角放大角标（悬停才出现，不干扰卡片观感） */
.face-zoom{cursor:zoom-in;position:relative}
.face-zoom-hint{position:absolute;right:4px;bottom:4px;z-index:3;
  width:17px;height:17px;line-height:17px;text-align:center;border-radius:5px;
  font-style:normal;font-size:11px;font-family:var(--f-body);color:#ffeccb;
  background:rgba(250,240,214,0.62);border:1px solid rgba(224,192,118,.45);
  opacity:0;transition:opacity .18s}
.face-zoom:hover .face-zoom-hint{opacity:1}
@media (hover:none){.face-zoom-hint{opacity:.85}}

/* ===================== 立绘大图 lightbox ===================== */
.face-lb{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:24px;
  background:radial-gradient(ellipse at 50% 38%,rgba(250,240,214,0.66),rgba(252,244,222,0.90));
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:flIn .2s ease-out}
@keyframes flIn{from{opacity:0}to{opacity:1}}
.fl-stage{position:relative;width:min(72vh,72vw,620px);height:min(72vh,72vw,620px);
  border-radius:12px;overflow:hidden;
  background:radial-gradient(circle at 50% 32%,#f0ddb0,#140f0a 72%);
  border:1px solid rgba(224,192,118,.42);
  box-shadow:0 24px 70px rgba(120,84,30,.50),inset 0 0 0 1px rgba(255,232,180,.06)}
.fl-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .3s}
.fl-stage img.ok{opacity:1}
.fl-stage img.miss{display:none}
.fl-ch{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-title);font-size:min(24vh,24vw,200px);font-weight:700;
  font-style:normal;color:#fff0cc;text-shadow:0 4px 18px rgba(120,84,30,.45)}
.fl-cap{font-family:var(--f-title);font-size:22px;letter-spacing:6px;color:#8a6215;
  text-shadow:0 2px 10px rgba(120,84,30,.45);text-align:center}
.fl-sub{display:block;margin-top:6px;font-family:var(--f-body);font-size:12px;
  letter-spacing:2px;color:var(--tx-3)}
.fl-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:9px;
  cursor:pointer;font-size:17px;line-height:1;color:#e9d9a8;
  background:rgba(250,240,214,0.64);border:1px solid rgba(224,192,118,.45);
  display:flex;align-items:center;justify-content:center;padding:0}
.fl-x:hover{background:rgba(252,244,222,0.85)}

/* ===================== 征兵面板 ===================== */
.con-team{font-size:12px;font-family:var(--f-body);letter-spacing:1px;color:var(--tx-3)}
.con-list{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.con-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-m);
  background:rgba(120,84,30,0.22);border:1px solid rgba(216,178,94,.16)}
.con-row .cr-n{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:7px;
  font-size:13px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ⚠ 必须显式给尺寸：.hface-sm 的 26px 只在 `.slot .sn` 下定义过，
 *   征兵弹窗的 .con-row 里没有这条规则时，会落到 .hface 的 68px 基础尺寸 —— 头像撑爆整行。 */
.con-row .cr-n .hface-sm{flex:0 0 auto;width:24px;height:24px;line-height:1;font-size:13px;border-radius:3px}
.con-row .cr-empty{font-size:12px;color:var(--tx-4)}
.con-row .cr-v{font-size:12.5px;font-weight:700;color:#8a6215;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.con-row .cr-v i{font-style:normal;font-weight:400;color:var(--tx-4);font-size:11px}
.con-row .cr-g{flex:0 0 auto;font-size:11px;color:var(--tx-3);min-width:54px;text-align:right}
.con-row .btn{flex:0 0 auto}

/* ===================== 城建升级反馈 ===================== */
.bd-card.just-up{border-color:var(--gold)!important;
  animation:bdUp 1.6s cubic-bezier(.2,.8,.2,1)}
@keyframes bdUp{
  0%{transform:translateY(0) scale(1);box-shadow:0 0 0 0 rgba(240,214,142,.6)}
  18%{transform:translateY(-4px) scale(1.035);box-shadow:0 0 26px 6px rgba(240,214,142,.45)}
  100%{transform:translateY(0) scale(1);box-shadow:0 0 0 0 rgba(240,214,142,0)}}
.bd-lv.lv-pop{animation:lvPop 1.4s cubic-bezier(.2,.8,.2,1)}
@keyframes lvPop{
  0%{transform:scale(1)}
  20%{transform:scale(1.55);color:#ffe9a8;text-shadow:0 0 16px rgba(240,214,142,.9)}
  100%{transform:scale(1)}}

/* ===================== 同盟页补充 ===================== */
.ally-buffs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.ab-chip{font-size:11.5px;padding:4px 10px;border-radius:11px;color:#8a6215;
  background:rgba(224,192,118,.09);border:1px solid rgba(224,192,118,.28)}
.ab-chip b{color:#ffe9a8}
.ally-notice{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 11px;border-radius:var(--r-m);margin-bottom:10px;
  background:rgba(91,141,217,.07);border-left:3px solid rgba(91,141,217,.55)}
.ally-notice .an-cap{font-family:var(--f-title);font-size:12px;letter-spacing:3px;
  color:var(--azure);flex:0 0 auto}
.ally-notice .an-txt{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--tx-2);
  line-height:1.6;word-break:break-all}
.ally-notice .an-txt.dim{color:var(--tx-4)}
/* 成员行按钮变多（定位/禅让/剔除），窄屏必须允许折行 */
.ally-mb{flex-wrap:wrap}
.ally-mb .role.me{color:var(--azure);border-color:rgba(91,141,217,.5)}
.ally-item{display:flex;align-items:center;gap:8px;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;color:var(--tx)}
.ally-item .ai-sub{flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--tx-3)}
.w-chat-item.sys{color:var(--tx-4);font-size:11.5px;letter-spacing:.5px;text-align:center}


/* ============================================================
 * ============ 99. 豪华层（2026-09-20 AI 素材升级） ============
 * 原则：只追加覆盖，不改上文任何规则；新图在 assets/ui/dlx/。
 * 生成器：工具/_prep_dlx_ui.py（原图 assets/ui/new/ 已移至项目外留存目录，勿删留存）。
 * ============================================================ */
:root{
  --tex-paper:url(../assets/ui/tex_paper.jpg);   /* 替换：暗绸纸纹 */
  --tex-wood:url(../assets/ui/tex_wood.jpg);    /* 替换：漆木纹 */
  --tex-gold:url(../assets/ui/dlx/tex_gold2.jpg);
  --orn-corner:url(../assets/ui/dlx/orn_corner_b.png);
  --orn-divider:url(../assets/ui/dlx/orn_divider_b.png);
  --frame-hero:url(../assets/ui/dlx/frame_hero.jpg);
  --seal-red:url(../assets/ui/dlx/seal_red_b.png);
}

/* ---- 启动页：新大图 + 更通透的压暗层 ---- */
.boot{background-image:
    radial-gradient(ellipse 80% 60% at 50% 36%,rgba(255,244,214,0),rgba(120,84,30,.12) 58%,rgba(90,60,20,.3) 100%),
    linear-gradient(180deg,rgba(186,140,80,.35) 0%,rgba(120,84,30,0.22) 45%,rgba(250,240,214,0.57) 100%),
    url(../assets/ui/boot_paper.jpg);
  background-size:cover,cover,cover;background-position:center,center,center 42%;background-repeat:no-repeat}
.boot-title{filter:drop-shadow(0 3px 12px rgba(120,84,30,.55)) drop-shadow(0 0 30px rgba(224,192,118,.25))}
.boot-rule{width:min(430px,86vw);height:30px;border:none;position:relative;
  background:var(--orn-divider) center/contain no-repeat}
.boot-rule::after{display:none}
#bootEntry::after{content:'';position:absolute;right:4%;top:20px;width:50px;height:50px;
  background:var(--seal-red) center/contain no-repeat;opacity:1;
  transform:rotate(7deg);pointer-events:none}
@media (max-width:760px){#bootEntry::after{display:none}}

/* ---- 金按钮：真金属纹理底板 ---- */
.btn-gold{background-image:linear-gradient(180deg,rgba(255,240,196,.52) 0%,rgba(224,175,72,.42) 46%,rgba(122,84,22,.62) 100%),var(--tex-gold);
  background-size:auto,230px 230px;text-shadow:0 1px 1px rgba(255,244,210,.5)}
.btn-gold:hover{background-image:linear-gradient(180deg,rgba(255,248,216,.62) 0%,rgba(238,192,88,.5) 46%,rgba(148,104,30,.64) 100%),var(--tex-gold);
  box-shadow:0 4px 18px rgba(224,192,118,.32),inset 0 1px 0 rgba(255,250,230,.9),inset 0 -2px 5px rgba(96,62,10,.7),inset 0 0 0 1px rgba(140,100,28,.72)}

/* ---- 弹窗：鎏金云纹角饰（screen 混合，黑底隐形） ---- */
.modal-box::before,.modal-box::after{width:66px;height:66px;opacity:.6;
  background:var(--orn-corner) center/contain no-repeat;mix-blend-mode:screen;filter:saturate(1.06)}
.modal-box::before{left:5px;top:5px}
.modal-box::after{right:5px;bottom:5px;left:auto;top:auto;transform:rotate(180deg)}
.modal-box{border-color:rgba(228,185,92,.55)}

/* ---- 面板小标题：云纹分隔线替代单线 ---- */
.hud-box h4,.city-side h3{position:relative;border-bottom:none;padding-bottom:13px}
.hud-box h4::after,.city-side h3::after{content:'';position:absolute;left:0;right:0;bottom:0;height:11px;
  background:var(--orn-divider) center left/100% 100% no-repeat;mix-blend-mode:screen;opacity:.85;pointer-events:none}

/* ---- 武将卡立绘：鎏金画框覆盖（框图中心纯黑，screen 后立绘透出） ---- */
.hero-card .hface-img::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:var(--frame-hero) center/100% 100% no-repeat;mix-blend-mode:screen;
  pointer-events:none;opacity:.96}

/* ---- 2 轮：内页水墨底图 ---- */
.view-city,.view-hero,.view-rank,.view-team,.view-recruit,.view-log,.view-skill,.view-ally{
  background-image:
    linear-gradient(180deg,rgba(250,240,214,0.55) 0%,rgba(250,240,214,0.58) 100%),
    url(../assets/ui/dlx/bg_ink.jpg);
  background-size:cover,cover;background-position:center,center 32%;background-repeat:no-repeat,no-repeat}

/* ---- 2 轮：资源胶囊金边立体 ---- */
.res-item{border-color:rgba(224,192,118,.42);
  background-image:linear-gradient(180deg,rgba(252,244,222,0.87),rgba(252,244,222,0.89)),var(--tex-wood);
  background-size:auto,260px 260px;
  box-shadow:inset 0 1px 0 rgba(255,236,192,.22),0 2px 7px rgba(120,84,30,.35),inset 0 0 0 1px rgba(120,84,30,.30)}

/* ---- 2 轮：激活页签光晕 ---- */
.tab.active{background-image:radial-gradient(ellipse 46% 80% at 50% 26%,rgba(224,192,118,.18),transparent 72%)}

/* ---- 2 轮：弹窗标题云纹下划 ---- */
#modalBox>h3{position:relative;padding-bottom:15px;border-bottom:none}
#modalBox>h3::after{content:'';position:absolute;left:12%;right:12%;bottom:0;height:15px;
  background:var(--orn-divider) center/contain no-repeat;opacity:1;pointer-events:none}

/* ---- 2 轮：天下抽屉标题分隔纹 ---- */
.world-drawer .wd-head{position:relative;border-bottom:none}
.world-drawer .wd-head::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:10px;
  background:var(--orn-divider) center/contain no-repeat;opacity:.7;pointer-events:none}

/* ---- 2 轮：地图圆形按钮 / 君主头像 / 武将卡悬停 ---- */
.round-btn{box-shadow:inset 0 1px 0 rgba(255,236,192,.2),0 2px 8px rgba(120,84,30,.35)}
.round-btn:hover{box-shadow:inset 0 1px 0 rgba(255,236,192,.32),0 0 14px rgba(224,192,118,.4)}
.lord-avatar{box-shadow:0 0 0 1px rgba(224,192,118,.45),0 2px 10px rgba(120,84,30,.35)}
.hero-card:hover{border-color:rgba(228,185,92,.55)}

/* ============================================================
 * ==== 100. 强化层（2026-09-20 下午）：把隐形的东西做显眼 ====
 * ============================================================ */

/* ---- 按钮金化（2026-10-06 修正）：整体 UI 已转米纸浅色，
 *      「米纸底+金字」在浅底上几乎隐形（出征/扫荡/行军小按钮尤甚）。
 *      统一恢复「真金渐变 + 深字」高对比，与战斗弹窗内的恢复版一致。 ---- */
.btn-gold{
  background-image:linear-gradient(180deg,#f4dd92 0%,#d8b04e 48%,#9c7a36 100%);
  background-size:auto;
  border-color:#f8ecc0;
  color:#2b1c05;text-shadow:0 1px 0 rgba(255,242,205,.55);
  box-shadow:inset 0 1px 0 rgba(255,250,225,.7),inset 0 -2px 0 rgba(90,60,10,.4),0 2px 0 #6b511f,0 4px 12px rgba(120,84,30,.32)}
.btn-gold:hover{
  background-image:linear-gradient(180deg,#fae6a8 0%,#dcb04a 48%,#a5761f 100%);
  color:#2b1c05;border-color:#fdf2cd;
  box-shadow:inset 0 1px 0 rgba(255,252,235,.85),0 3px 0 #6b511f,0 6px 16px rgba(224,192,118,.32)}
.btn-gold:active{transform:translateY(1px)}

/* ---- 标题：background-clip:text 元素上禁用 filter drop-shadow
   （Chrome 会以未裁剪的渐变矩形为形状画阴影 → 标题后面出现怪框）。
   改用 text-shadow，光晕跟随字形 ---- */
.boot-title{filter:none;
  text-shadow:0 2px 0 rgba(120,84,30,.45),0 4px 16px rgba(120,84,30,.55),0 0 26px rgba(224,192,118,.45)}

/* ---- 启动页入口卡：金边+木纹+常显金条 ---- */
.entry-card{border-color:rgba(224,192,118,.5);
  background-image:linear-gradient(165deg,rgba(252,244,222,0.89),rgba(252,244,222,0.91)),var(--tex-wood);
  background-size:auto,300px 300px;
  box-shadow:inset 0 1px 0 rgba(255,228,170,.12),0 3px 12px rgba(120,84,30,.35)}
.entry-card::before{opacity:1}
.entry-card:hover{border-color:rgba(240,196,102,.9);
  box-shadow:inset 0 1px 0 rgba(255,228,170,.2),0 0 20px rgba(224,192,118,.35),0 3px 12px rgba(120,84,30,.35)}

/* ---- 内页水墨底：遮罩减半，把山峦露出来 ---- */
.view-city,.view-hero,.view-rank,.view-team,.view-recruit,.view-log,.view-skill,.view-ally{
  background-image:
    linear-gradient(180deg,rgba(120,84,30,0.26) 0%,rgba(120,84,30,0.40) 100%),
    url(../assets/ui/dlx/bg_ink.jpg)}

/* ---- 面板：鎏金双线边框（明显可见） ---- */
.hud-box,.city-side,.panel{
  border:1px solid rgba(224,192,118,.55);
  box-shadow:inset 0 0 0 1px rgba(120,84,30,.35),inset 0 0 0 2px rgba(224,192,118,.18),0 3px 14px rgba(120,84,30,.35)}
.modal-box{border:1px solid rgba(228,185,92,.75);
  box-shadow:inset 0 0 0 1px rgba(120,84,30,.40),inset 0 0 0 2px rgba(224,192,118,.22),0 10px 44px rgba(96,70,32,.5),0 0 0 1px rgba(120,84,30,.40)}

/* ---- 顶栏：木纹+鎏金底线 ---- */
.topbar{
  background-image:linear-gradient(180deg,rgba(252,244,222,0.92),rgba(252,244,222,0.93)),var(--tex-wood);
  background-size:auto,300px 300px;
  border-bottom:1px solid rgba(224,192,118,.55);
  box-shadow:0 1px 0 rgba(120,84,30,.40),0 2px 4px rgba(120,84,30,.30),inset 0 -2px 0 rgba(224,192,118,.14)}

/* ---- 底栏：木纹+鎏金顶线 ---- */
.tabbar{
  background-image:linear-gradient(180deg,rgba(252,244,222,0.92),rgba(252,244,222,0.93)),var(--tex-wood);
  background-size:auto,300px 300px;
  border-top:1px solid rgba(224,192,118,.55);
  box-shadow:inset 0 1px 0 rgba(224,192,118,.14),0 -2px 8px rgba(120,84,30,.35)}

/* ---- 资源胶囊再亮一档 ---- */
.res-item{border-color:rgba(228,185,92,.65);box-shadow:inset 0 1px 0 rgba(255,236,192,.3),0 2px 8px rgba(120,84,30,.35),inset 0 0 0 1px rgba(120,84,30,.30)}

/* ---- 激活页签金字+光 ---- */
.tab.active{color:#f0cd7e;text-shadow:0 0 12px rgba(224,192,118,.55)}

/* ===== 战斗特效升级 2026-09-20 ===== */
/* 弹道光晕拖尾：能量球外裹柔光，出手→命中一路拖尾 */
.bf-fly::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.4),rgba(255,255,255,0) 70%);
  filter:blur(3px);opacity:.9;animation:bfTrail .5s ease forwards}
@keyframes bfTrail{0%{opacity:0;transform:scale(.4)}20%{opacity:.95}100%{opacity:0;transform:scale(1.3)}}

/* 落点火花：弹道命中处炸开一圈火星 */
.bf-spark{position:fixed;z-index:1201;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  pointer-events:none;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,240,200,.95),rgba(255,170,70,.6) 38%,rgba(255,120,40,0) 70%);
  box-shadow:0 0 22px rgba(255,180,70,.85);animation:bfSpark .42s cubic-bezier(.2,.7,.3,1) forwards}
.bf-spark.magic{background:radial-gradient(circle,rgba(245,225,255,.95),rgba(180,120,255,.6) 38%,rgba(150,80,255,0) 70%);
  box-shadow:0 0 24px rgba(180,120,255,.9)}
.bf-spark.heal{background:radial-gradient(circle,rgba(225,255,233,.95),rgba(90,220,140,.6) 38%,rgba(60,200,120,0) 70%);
  box-shadow:0 0 22px rgba(90,220,140,.85)}
@keyframes bfSpark{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  35%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}

/* 暴击冲击波：命中处一圈扩张金环 */
.bf-shock{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  pointer-events:none;z-index:6;border:3px solid rgba(255,210,90,.9);
  box-shadow:0 0 26px rgba(255,200,70,.8),inset 0 0 22px rgba(255,200,70,.5);
  animation:bfShock .62s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes bfShock{0%{opacity:0;transform:scale(.25)}25%{opacity:1}100%{opacity:0;transform:scale(1.5)}}

/* 暴击数字脉冲：伤害飘字放大时抖一下 */
@keyframes critPulse{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ===== 兵种专属攻击特效 2026-09-21 =====
 * 飞出的不再是通用「子弹圆点」，而是与兵种对应的兵器：
 *   枪兵=长枪突刺 / 弓兵=箭矢抛物线 / 骑兵=骏马冲锋 / 盾兵=盾牌砸击 / 器械=投石抛物线。
 * ⚠ 战场两列对阵（我军左、敌军右），弹道沿"出手方→中招方"；--rot 由 JS 按位移向量算出，
 *   内层 .bf-wpn 整体旋转使兵器始终指向目标；弓/械走抛物线（bfArc 中段上抬）。 */
.bf-fly.has-wpn{width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:0;
  background:none;box-shadow:none;animation:bfFly .6s cubic-bezier(.3,.1,.7,.4) forwards}
.bf-fly.has-wpn.arc{animation:bfArc .6s cubic-bezier(.3,.1,.7,.4) forwards}
.bf-fly.has-wpn::after{display:none}            /* 兵种特效不再套通用白光晕 */
.bf-wpn{width:100%;height:100%;display:block;
  filter:drop-shadow(0 2px 4px rgba(120,84,30,.35)) drop-shadow(0 0 5px rgba(224,192,118,.35))}
.bf-wpn>svg{width:100%;height:100%;display:block}
/* 投石飞行时自旋（转的是内层 svg，不动 .bf-wpn 的 rotate —— 否则朝向会被冲掉） */
.bf-fly.xie .bf-wpn>svg{animation:bfSpin .55s linear infinite}
@keyframes bfSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes bfArc{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  16%{opacity:1;transform:translate(calc(var(--tx)*.16),calc(var(--ty)*.16 - var(--arc)*.55)) scale(1.12)}
  50%{opacity:1;transform:translate(calc(var(--tx)*.5),calc(var(--ty)*.5 - var(--arc))) scale(1.05)}
  84%{opacity:1;transform:translate(calc(var(--tx)*.84),calc(var(--ty)*.84 - var(--arc)*.42)) scale(.9)}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.6)}}
/* 命中：投石 / 骑兵 砸出尘烟，其余维持金色火花 */
.bf-spark.dust{width:54px;height:54px;margin:-27px 0 0 -27px;
  background:radial-gradient(circle,rgba(220,202,172,.95),rgba(150,130,100,.62) 40%,rgba(120,100,70,0) 72%);
  box-shadow:0 0 18px rgba(185,165,125,.7)}

/* ===== 作战方式「三选一」列表 2026-09-20 =====
 * 原先三项挤在 .m-desc 里当行内文本，长提示被硬折行 → 参差不齐。
 * 改为每项一行：单选钮 | 名称 | 成功率（右对齐），说明另起一行与名称左对齐。 */
.am-list{margin:5px 0 2px;border:1px solid rgba(216,178,94,.2);border-radius:var(--r-s);
  background:rgba(120,84,30,0.30);box-shadow:inset 0 1px 0 rgba(255,228,170,.05);overflow:hidden}
.am-opt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:2px 9px;padding:8px 11px;cursor:pointer;transition:.14s;
  border-top:1px solid rgba(216,178,94,.1)}
.am-opt:first-child{border-top:none}
.am-opt:hover{background:rgba(216,178,94,.07)}
.am-opt input{grid-row:1 / span 2;width:14px;height:14px;margin:0;cursor:pointer;accent-color:#d8b25e}
.am-opt .am-name{font-family:var(--f-title);font-size:13px;letter-spacing:1px;color:var(--tx-2)}
.am-opt .am-rate{font-family:var(--f-title);font-size:12.5px;font-weight:700;
  color:#8a6215;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.am-opt .am-tip{grid-column:2 / 4;font-size:11px;color:var(--tx-3);line-height:1.45}
.am-opt.on{background:linear-gradient(90deg,rgba(216,178,94,.16),rgba(216,178,94,.02))}
.am-opt.on .am-name{color:#ffe9b0}
.am-opt.on .am-tip{color:var(--tx-2)}

/* ===== 主城「城防」进度条 + 作战条件说明 2026-09-20 ===== */
.dur-bar{height:5px;margin:4px 0 7px;border-radius:3px;overflow:hidden;
  background:rgba(120,84,30,.32);box-shadow:inset 0 1px 2px rgba(120,84,30,.40)}
.dur-bar i{display:block;height:100%;border-radius:3px;transition:width .3s;
  background:linear-gradient(90deg,#9c3a2e,#e0a05a);box-shadow:0 0 6px rgba(224,160,90,.5)}
.am-cond{margin-top:5px;font-size:11px;color:var(--tx-3);line-height:1.6}
.am-cond b{color:#8a6215}

/* ===== 12. 高级金框 / 对话框 / 底栏升级（2026-09-21） =====
 * 用户要求：所有边框、弹窗、底部栏更显高级。
 * 技法：圆角友好的「描金双框」= 外金线 + 墨色间隔 + 内描金细线，
 *       全部用 inset box-shadow 实现，不改 position、不引伪元素 → 零布局回归。
 *       对话框另加四角金角（L 形描金）+ 柔金外晕。 */
:root{
  --line:rgba(224,192,118,.34);
  --line-2:rgba(224,192,118,.6);
  --gold-bright:#fbeec4;
  --gold-deep:#c9a24b;
}

/* ---- 面板 / HUD / 小地图：描金双框 ---- */
.panel{
  border:1px solid rgba(224,192,118,.5);
  box-shadow:
    var(--cast-1), var(--in-gold),
    inset 0 0 0 1px rgba(255,238,196,.18),   /* 内描金细线 */
    inset 0 0 0 4px rgba(186,140,80,.35),          /* 墨色间隔 */
    inset 0 0 0 5px rgba(224,192,118,.32);    /* 外金线 */
}
.hud-box{
  border-color:rgba(224,192,118,.55);
  box-shadow:
    var(--cast-2), var(--in-gold),
    inset 0 0 0 1px rgba(255,238,196,.16),
    inset 0 0 0 4px rgba(186,140,80,.35),
    inset 0 0 0 5px rgba(224,192,118,.3);
}
.map-mini{
  border-color:rgba(224,192,118,.55);
  box-shadow:
    var(--cast-2), var(--in-gold),
    inset 0 0 0 1px rgba(255,238,196,.16),
    inset 0 0 0 3px rgba(186,140,80,.35),
    inset 0 0 0 4px rgba(224,192,118,.3);
}

/* ---- 弹窗：描金双框 + 四角金角 + 柔金外晕 ---- */
.modal-layer{background:radial-gradient(ellipse at 50% 38%,rgba(250,240,214,0.62),rgba(120,84,30,.55))}
.modal-box{
  border:1px solid rgba(224,192,118,.58);
  background-image:
    /* 四角金角（L 形描金；padding-box 内定位，避开边框） */
    linear-gradient(135deg,var(--gold-bright),var(--gold-deep)), linear-gradient(135deg,var(--gold-bright),var(--gold-deep)),
    linear-gradient(135deg,var(--gold-bright),var(--gold-deep)), linear-gradient(135deg,var(--gold-bright),var(--gold-deep)),
    linear-gradient(135deg,var(--gold-bright),var(--gold-deep)), linear-gradient(135deg,var(--gold-bright),var(--gold-deep)),
    linear-gradient(135deg,var(--gold-bright),var(--gold-deep)), linear-gradient(135deg,var(--gold-bright),var(--gold-deep)),
    /* 底图 */
    linear-gradient(168deg,#322619 0%,#16110c 100%);
  background-size:
    16px 2px, 2px 16px,
    16px 2px, 2px 16px,
    16px 2px, 2px 16px,
    16px 2px, 2px 16px,
    auto;
  background-position:
    left 7px top 7px, left 7px top 7px,
    right 7px top 7px, right 7px top 7px,
    left 7px bottom 7px, left 7px bottom 7px,
    right 7px bottom 7px, right 7px bottom 7px,
    0 0;
  background-repeat:no-repeat;
  background-clip:padding-box;
  box-shadow:
    0 0 0 1px rgba(224,192,118,.22),
    0 30px 70px rgba(120,84,30,.50),
    0 0 48px rgba(224,192,118,.14),
    inset 0 1px 0 rgba(255,236,192,.12),
    inset 0 0 0 1px rgba(255,238,196,.14),
    inset 0 0 0 5px rgba(224,192,118,.3);
  animation:min .26s cubic-bezier(.2,.9,.3,1.22);
}
/* 关掉旧的两角（::before/::after），改由背景画四角，避免重复 */
.modal-box::before,.modal-box::after{content:none}
/* 弹窗标题：居中描金分隔线更挺括，线心嵌金菱 */
.modal-box h3::after{width:168px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(224,192,118,.85),rgba(248,236,192,.95),rgba(224,192,118,.85),transparent);
  box-shadow:0 0 10px rgba(224,192,118,.45)}
.modal-box h3::before{content:'';position:absolute;left:50%;bottom:-1px;transform:translateX(-50%) rotate(45deg);
  width:7px;height:7px;border-radius:1px;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));
  box-shadow:0 0 8px rgba(224,192,118,.7)}
/* 关闭键：圆形金环 */
.modal-x{border:1px solid rgba(224,192,118,.6);border-radius:50%;
  background:radial-gradient(circle at 40% 30%,rgba(252,244,222,0.91),rgba(252,244,222,0.91));
  color:#ecd9a6;box-shadow:var(--in-gold),0 2px 7px rgba(120,84,30,.35)}
.modal-x:hover{background:radial-gradient(circle at 40% 30%,rgba(104,78,46,.98),rgba(252,244,222,0.93));
  color:#fff3d0;border-color:var(--gold-bright);box-shadow:0 0 16px rgba(224,192,118,.55)}
/* 对话框内分隔线更细腻 */
.m-row{border-bottom:1px solid rgba(216,178,94,.16)}
.m-sec{border-left:3px solid var(--gold);box-shadow:-1px 0 0 rgba(255,236,192,.25)}

/* ---- 底部导航：双线金顶边 + 漆木压暗 + 激活金座 ---- */
.tabbar{
  border-top:1px solid rgba(224,192,118,.5);
  box-shadow:
    0 -7px 24px rgba(96,70,32,.5),
    inset 0 1px 0 rgba(255,232,180,.16),
    inset 0 2px 0 rgba(224,192,118,.1),
    0 -1px 0 rgba(224,192,118,.5);
}
.tabbar::before{height:3px;top:0;
  background:linear-gradient(90deg,transparent,rgba(224,192,118,.45) 8%,#f6e3a6 50%,rgba(224,192,118,.45) 92%,transparent);
  box-shadow:0 0 16px rgba(224,192,118,.6),inset 0 -1px 0 rgba(120,84,30,.32)}
.tab.active{color:#8a6215;
  background:radial-gradient(ellipse 64% 120% at 50% 100%,rgba(224,192,118,.2),transparent 72%);
  text-shadow:0 0 12px rgba(224,192,118,.55)}
.tab.active::after{bottom:3px;left:24%;right:24%;height:2px;
  background:linear-gradient(90deg,transparent,#fbeec4,transparent);
  box-shadow:0 0 12px rgba(248,236,192,.95)}

/* ============================================================
 * === 101. 内政面板（策书 / 委任内政官 / 屯田 / 征税） ========
 * ============================================================ */
.ipanel{margin-top:14px;padding:12px 14px 14px;border:1px solid rgba(212,165,49,.5);border-radius:var(--r-m);
  background-image:linear-gradient(165deg,rgba(252,244,222,0.87),rgba(252,244,222,0.90)),var(--tex-wood);
  background-size:auto,300px 300px;
  box-shadow:inset 0 1px 0 rgba(255,228,170,.12),inset 0 0 0 1px rgba(120,84,30,.35),0 3px 12px rgba(120,84,30,.35)}
.ip-ce{float:right;font-size:12px;font-family:var(--f-body);letter-spacing:0;color:#8a6215;
  padding:2px 9px;border:1px solid rgba(212,165,49,.45);border-radius:10px;background:rgba(250,240,214,0.58)}
.ip-hint{font-size:11.5px;color:var(--tx-3);line-height:1.8;margin-top:6px}
.ip-offices{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.ip-off{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid rgba(212,165,49,.22);
  border-radius:var(--r-s);background:rgba(250,240,214,0.55)}
.io-n{flex:0 0 52px;font-family:var(--f-title);font-size:12.5px;color:var(--gold);letter-spacing:1px}
.io-h{flex:1;min-width:0;font-size:12px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.io-h.empty{color:var(--tx-4)}
.io-b{font-style:normal;color:#f0cd7e;font-weight:600}
.io-b.dim{color:var(--tx-4);font-weight:400}
.ip-off .btn{flex:0 0 auto;padding:5px 12px;font-size:12px}
.ip-acts{display:flex;gap:10px;margin-top:11px}
.ip-acts .btn{flex:1;padding:9px}

/* 屯田 / 征税 弹窗列表 */
.ft-list,.of-list{margin-top:4px;max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.ft-row,.of-row{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;
  border:1px solid rgba(212,165,49,.2);border-radius:var(--r-s);background:rgba(250,240,214,0.58);
  transition:border-color .15s,background .15s}
.ft-row:hover,.of-row:hover{border-color:rgba(240,196,102,.75);background:rgba(250,240,214,0.62)}
.of-row.on{border-color:rgba(240,196,102,.85);background:rgba(250,240,214,0.64)}
.ft-n,.of-n{flex:1;min-width:0;font-size:13px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-n i,.of-n i{font-style:normal;color:var(--tx-3)}
.of-used{font-size:11px;color:var(--tx-4)}
.ft-lv{flex:0 0 auto;font-size:12px;color:var(--gold)}
.ft-xy{flex:0 0 auto;font-size:11px;color:var(--tx-4)}
.ft-v,.of-b{flex:0 0 auto;font-size:13px;font-weight:600;color:#f0cd7e}
.of-s{flex:0 0 auto;font-size:11.5px;color:var(--tx-3)}
.of-b.dim{color:var(--tx-4);font-weight:400}

/* ================================================================
   战斗特效 · 高级层 2026-09-24
   ================================================================
   把「金球飞过去 + 一个圆点炸开」升级成有质感的中式战场：
     ① 氛围层 .bf-amb   ：鎏金浮尘 + 中轴楚河 + 暗角（一场战斗只建一次，最便宜的"贵气"）
     ② 兵器拖尾 .bf-trail：兵器后面拖一道金色残影（挂在 .bf-wpn 里，跟着朝向转）
     ③ 命中复合 .bf-hit ：白闪 + 金环 + 放射光(fx-burst) + 金墨飞溅(fx-ink) + 四向火星
     ④ 施法阵纹 .bf-rune：战法 / 治疗发动时，武将卡上旋开一枚鎏金法阵
     ⑤ 暴击：全屏金闪 .bf-critflash + 命中特效放大
     ⑥ 卡片流光 / 结算印章
   ⚠ 素材 assets/ui/battle/fx-*.png 一律**纯黑底** → 全部 mix-blend-mode:screen
     （黑=不可见）。换成浅底图会整块糊在战场上，必须黑底。
   ⚠ .bf-hit 是 0×0 定位点，子元素靠**负 margin** 居中（不要在 keyframes 里再
     translate(-50%,-50%)，会和 margin 叠加成双倍偏移，火花就飞到天边去了）。
   ================================================================ */

/* ① 氛围层 */
.bf-amb{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.bf-amb .bf-axis{position:absolute;left:50%;top:5%;bottom:9%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(224,192,118,.40) 20%,rgba(224,192,118,.40) 80%,transparent);
  box-shadow:0 0 16px rgba(224,192,118,.26)}
.bf-amb .bf-vig{position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 68% at 50% 46%,transparent 40%,rgba(250,240,214,0.58) 100%)}
/* 鎏金浮尘：一个元素用 box-shadow 画十几颗，整块缓慢上飘 —— 比十几颗粒子 DOM 便宜得多 */
.bf-amb .bf-motes{position:absolute;left:-8%;top:0;width:116%;height:100%;opacity:.5;
  animation:bfMotes 27s linear infinite}
.bf-amb .bf-motes.m2{opacity:.32;animation-duration:41s;animation-direction:reverse}
.bf-amb .bf-motes::before{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;
  background:rgba(255,226,158,.9);
  box-shadow:38px 128px 0 rgba(255,226,158,.85),96px 42px 0 rgba(255,226,158,.6),
    152px 236px 0 rgba(255,226,158,.8),214px 96px 0 rgba(255,226,158,.55),
    268px 318px 0 rgba(255,226,158,.75),322px 172px 0 rgba(255,226,158,.6),
    386px 62px 0 rgba(255,226,158,.8),438px 262px 0 rgba(255,226,158,.55),
    502px 148px 0 rgba(255,226,158,.75),566px 342px 0 rgba(255,226,158,.6),
    624px 88px 0 rgba(255,226,158,.8),688px 216px 0 rgba(255,226,158,.55),
    742px 358px 0 rgba(255,226,158,.7),806px 128px 0 rgba(255,226,158,.6)}
@keyframes bfMotes{0%{transform:translate(0,0)}100%{transform:translate(-6%,-108%)}}

/* ② 兵器拖尾（挂 .bf-wpn 内，跟着 --rot 一起转） */
.bf-wpn{position:relative}
.bf-wpn>.bf-trail{position:absolute;left:-64px;top:50%;width:66px;height:6px;margin-top:-3px;
  background:linear-gradient(to right,rgba(255,220,140,0),rgba(255,228,158,.92));
  border-radius:3px;filter:blur(1.1px);opacity:.92}

/* ③ 命中复合特效 */
.bf-hit{position:fixed;z-index:1202;pointer-events:none;width:0;height:0}
.bf-hit>i{position:absolute;left:0;top:0;display:block;border-radius:50%}
.bf-hit .bfh-burst{width:124px;height:124px;margin:-62px 0 0 -62px;
  background:url(../assets/ui/battle/fx-burst.png) center/contain no-repeat;
  mix-blend-mode:screen;opacity:0;animation:bfhBurst .46s cubic-bezier(.2,.8,.3,1) forwards}
.bf-hit .bfh-ink{width:158px;height:158px;margin:-79px 0 0 -79px;
  background:url(../assets/ui/battle/fx-ink.png) center/contain no-repeat;
  mix-blend-mode:screen;opacity:0;animation:bfhInk .54s ease-out forwards}
.bf-hit .bfh-ring{width:26px;height:26px;margin:-13px 0 0 -13px;
  border:2px solid rgba(255,214,120,.95);
  box-shadow:0 0 14px rgba(255,190,70,.6),inset 0 0 10px rgba(255,200,90,.35);
  animation:bfhRing .5s cubic-bezier(.2,.7,.3,1) forwards}
.bf-hit .bfh-flash{width:42px;height:42px;margin:-21px 0 0 -21px;mix-blend-mode:screen;
  background:radial-gradient(circle,#fff8e2,rgba(255,225,150,.7) 40%,rgba(255,190,80,0) 70%);
  animation:bfhFlash .3s ease-out forwards}
.bf-hit .bfh-sp{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  background:radial-gradient(circle,#fff6d8,rgba(255,190,80,.25) 70%);
  animation:bfhSp .5s cubic-bezier(.2,.7,.3,1) forwards}
.bf-hit .bfh-sp.s1{--dx:-30px;--dy:-24px}
.bf-hit .bfh-sp.s2{--dx:32px;--dy:-20px}
.bf-hit .bfh-sp.s3{--dx:-26px;--dy:26px}
.bf-hit .bfh-sp.s4{--dx:28px;--dy:28px}
.bf-hit.crit{transform:scale(1.45)}
@keyframes bfhBurst{0%{opacity:0;transform:scale(.35) rotate(-12deg)}
  22%{opacity:1;transform:scale(1.08) rotate(0)}
  100%{opacity:0;transform:scale(1.5) rotate(10deg)}}
@keyframes bfhInk{0%{opacity:0;transform:scale(.5)}18%{opacity:.95;transform:scale(1.06)}
  100%{opacity:0;transform:scale(1.28)}}
@keyframes bfhRing{0%{opacity:.95;transform:scale(.25)}70%{opacity:.6}
  100%{opacity:0;transform:scale(2.1)}}
@keyframes bfhFlash{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.1)}
  100%{opacity:0;transform:scale(1.7)}}
@keyframes bfhSp{0%{opacity:0;transform:translate(0,0) scale(.4)}
  25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.55)}}
/* 变体：尘烟（骑/械砸击）、战法（紫）、治疗（青碧） */
.bf-hit.dust .bfh-burst{display:none}
.bf-hit.dust .bfh-ink{width:112px;height:112px;margin:-56px 0 0 -56px;background-image:none;
  mix-blend-mode:normal;
  background:radial-gradient(circle,rgba(228,216,192,.95),rgba(152,132,102,.55) 42%,rgba(120,100,70,0) 72%)}
.bf-hit.dust .bfh-ring{border-color:rgba(216,200,172,.85);box-shadow:0 0 12px rgba(190,172,140,.5)}
.bf-hit.dust .bfh-sp{background:radial-gradient(circle,#efe4ca,rgba(160,140,110,.25) 70%)}
.bf-hit.magic .bfh-burst{filter:hue-rotate(-45deg) saturate(1.25)}
.bf-hit.magic .bfh-ink{filter:hue-rotate(-50deg) saturate(1.3)}
.bf-hit.magic .bfh-ring{border-color:rgba(198,150,255,.95);box-shadow:0 0 16px rgba(170,110,255,.7)}
.bf-hit.magic .bfh-flash{background:radial-gradient(circle,#f2e4ff,rgba(180,120,255,.7) 40%,rgba(150,80,255,0) 70%)}
.bf-hit.heal .bfh-burst{filter:hue-rotate(80deg) saturate(.9)}
.bf-hit.heal .bfh-ink{filter:hue-rotate(85deg) saturate(.85)}
.bf-hit.heal .bfh-ring{border-color:rgba(120,230,160,.95);box-shadow:0 0 14px rgba(90,220,140,.6)}
.bf-hit.heal .bfh-flash{background:radial-gradient(circle,#e8fff0,rgba(110,230,160,.7) 40%,rgba(60,200,120,0) 70%)}

/* ④ 施法阵纹 */
.bf-rune{position:fixed;z-index:1201;pointer-events:none;width:196px;height:196px;margin:-98px 0 0 -98px;
  background:url(../assets/ui/battle/fx-rune.png) center/contain no-repeat;
  mix-blend-mode:screen;opacity:0;animation:bfRune .95s cubic-bezier(.2,.7,.3,1) forwards}
.bf-rune.magic{filter:hue-rotate(-40deg) saturate(1.3)}
.bf-rune.heal{filter:hue-rotate(85deg) saturate(1.15)}
@keyframes bfRune{0%{opacity:0;transform:scale(.55) rotate(-42deg)}
  28%{opacity:.95}100%{opacity:0;transform:scale(1.35) rotate(38deg)}}

/* ⑤ 暴击全屏金闪 */
.bf-critflash{position:absolute;inset:0;z-index:8;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%,rgba(255,240,200,.26),rgba(255,200,90,.09) 45%,transparent 72%);
  animation:bfCritFlash .34s ease-out forwards}
@keyframes bfCritFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* ⑥ 卡片流光（用 background-position 扫，不靠 transform —— 免得溢出卡片把边框外也照亮） */
.bunit::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,236,180,.30) 50%,transparent 66%);
  background-size:230% 100%;background-position:-70% 0;opacity:0}
.bunit.in::after{animation:bfSheen 1.2s ease .12s}
.bunit.acting::after{animation:bfSheen .62s ease}
@keyframes bfSheen{0%{opacity:0;background-position:-70% 0}30%{opacity:1}
  100%{opacity:0;background-position:170% 0}}

/* ⑥ 结算印章：胜=朱红「勝」，败=墨色「敗」
 * ⚠ 不要用 position:absolute 钉在角上：结算面板下沿还有两排兵力对比条，
 *   绝对定位的印章会压在进度条右端上（看着像脏污）。改成与结果条同排的 flex 项。 */
.bf-resrow{display:flex;align-items:center;gap:14px}
.bf-resrow .br-res{flex:1;min-width:0}
.bf-seal{flex:0 0 auto;width:64px;height:64px;display:flex;
  align-items:center;justify-content:center;font-size:36px;font-weight:800;line-height:1;
  border:3px solid;border-radius:6px;transform:rotate(-9deg);opacity:.9;
  animation:bfSeal .5s cubic-bezier(.2,1.5,.4,1)}
.bf-seal.win{color:#e8563f;border-color:rgba(232,86,63,.85);text-shadow:0 0 14px rgba(232,86,63,.45)}
.bf-seal.lose{color:#8d8272;border-color:rgba(141,130,114,.8);text-shadow:0 0 12px rgba(120,84,30,.35)}
@keyframes bfSeal{0%{opacity:0;transform:rotate(-24deg) scale(1.9)}
  70%{opacity:1;transform:rotate(-6deg) scale(.94)}100%{opacity:.9;transform:rotate(-9deg) scale(1)}}

/* ================================================================
   战斗动画 · 界面升级 + 特效增强 2026-09-25
   ① 单位势力纹章（替代英雄立绘）  ② 氛围层增强（第三浮尘 + 余烬）
   ③ 战场高级内框 + 四角鎏金       ④ 标题鎏金描边
   ⑤ 命中 / 暴击视觉增强（更亮更厚）
   ================================================================ */

/* ① 单位势力纹章：鎏金圆章托住势力徽记（替代开战英雄立绘） */
.bunit .bu-face .bu-crest,.bf-ro .bu-crest{display:flex;align-items:center;justify-content:center}
.bu-crest{width:50px;height:50px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 50% 36%,rgba(252,244,222,0.91),rgba(252,244,222,0.93));
  border:2px solid rgba(224,192,118,.6);
  box-shadow:0 0 0 1px rgba(120,84,30,.35),0 0 16px rgba(255,190,70,.30),inset 0 1px 7px rgba(255,222,150,.25)}
.bu-crest .ico{width:32px;height:32px;filter:drop-shadow(0 1px 2px rgba(120,84,30,.40)) brightness(1.08) saturate(1.05)}
.bu-crest::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid rgba(255,225,150,.16);pointer-events:none}
.bu-crest-empty{background:radial-gradient(circle at 50% 36%,rgba(252,244,222,0.91),rgba(252,244,222,0.93))}
/* 战前阵容速览里的纹章 */
.bf-ro .bu-crest{width:38px;height:38px;margin-bottom:2px}
.bf-ro .bu-crest .ico{width:25px;height:25px}
/* 战场武将头像右下角的势力小徽章（与头像并排，保留阵营辨识） */
.bunit .bu-face .bu-crest{position:absolute;right:2px;bottom:2px;width:18px;height:18px;border-radius:4px;
  background:radial-gradient(circle at 50% 36%,rgba(252,244,222,0.85),rgba(252,244,222,0.90));
  border:1px solid rgba(224,192,118,.45);box-shadow:0 0 0 1px rgba(120,84,30,.35)}
.bunit .bu-face .bu-crest .ico{width:12px;height:12px}

/* ② 氛围层增强 */
.bf-amb .bf-motes.m3{opacity:.4;animation-duration:33s;animation-direction:reverse;filter:hue-rotate(-8deg)}
.bf-amb .bf-motes.m3::before{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;
  background:rgba(255,210,140,.9);
  box-shadow:
    54px 188px 0 rgba(255,210,140,.7),118px 92px 0 rgba(255,210,140,.5),
    186px 286px 0 rgba(255,210,140,.65),256px 146px 0 rgba(255,210,140,.45),
    308px 372px 0 rgba(255,210,140,.6),372px 202px 0 rgba(255,210,140,.45),
    422px 96px 0 rgba(255,210,140,.6),492px 322px 0 rgba(255,210,140,.45),
    548px 178px 0 rgba(255,210,140,.55),612px 262px 0 rgba(255,210,140,.45),
    672px 132px 0 rgba(255,210,140,.55),736px 388px 0 rgba(255,210,140,.4),
    792px 168px 0 rgba(255,210,140,.5)}
/* 上升余烬：暖色火星缓缓上浮，给战场"硝烟未散"的呼吸感 */
.bf-amb .bf-embers{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.55;
  animation:bfEmbers 14s linear infinite}
.bf-amb .bf-embers::before{content:"";position:absolute;left:0;bottom:0;width:3px;height:3px;border-radius:50%;
  background:rgba(255,170,80,.9);
  box-shadow:
    60px 40px 0 rgba(255,160,70,.7),140px 120px 0 rgba(255,180,90,.6),210px 60px 0 rgba(255,150,60,.7),
    280px 160px 0 rgba(255,170,80,.55),360px 90px 0 rgba(255,160,70,.65),430px 200px 0 rgba(255,185,95,.5),
    500px 70px 0 rgba(255,155,65,.7),580px 150px 0 rgba(255,170,80,.55),650px 50px 0 rgba(255,160,70,.6),
    720px 180px 0 rgba(255,180,90,.5),790px 110px 0 rgba(255,165,75,.6),860px 30px 0 rgba(255,150,60,.55)}
@keyframes bfEmbers{0%{transform:translateY(20px)}100%{transform:translateY(-120%)}}
/* 暗角加强，让中部战场更聚焦 */
.bf-amb .bf-vig{background:radial-gradient(ellipse 82% 70% at 50% 44%,transparent 34%,rgba(250,240,214,0.60) 100%)}

/* ③ 战场高级内框 + 四角鎏金（不铺满边框，只描四角） */
.bf-field::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(224,192,118,.30),inset 0 0 70px rgba(120,84,30,.35)}
.bf-field::before{content:"";position:absolute;inset:8px;pointer-events:none;z-index:3;border-radius:4px;
  background:
    linear-gradient(135deg,rgba(224,192,118,.6),transparent 22px) top left/22px 22px no-repeat,
    linear-gradient(-135deg,rgba(224,192,118,.6),transparent 22px) top right/22px 22px no-repeat,
    linear-gradient(45deg,rgba(224,192,118,.6),transparent 22px) bottom left/22px 22px no-repeat,
    linear-gradient(-45deg,rgba(224,192,118,.6),transparent 22px) bottom right/22px 22px no-repeat}

/* ④ 标题鎏金描边 */
.bf-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,192,118,.6) 18%,rgba(224,192,118,.6) 82%,transparent)}
.bf-top h3{text-shadow:0 2px 6px rgba(120,84,30,.35)}
.bf-banner{filter:drop-shadow(0 0 18px rgba(255,200,90,.55))}

/* ⑤ 命中 / 暴击视觉增强（更亮更厚） */
.bf-hit .bfh-burst{filter:drop-shadow(0 0 10px rgba(255,200,90,.5)) brightness(1.08)}
.bf-hit .bfh-ring{border-width:3px;box-shadow:0 0 20px rgba(255,190,70,.8),inset 0 0 14px rgba(255,200,90,.5)}
.bf-hit.crit .bfh-ring{border-color:rgba(255,225,150,1);box-shadow:0 0 30px rgba(255,210,110,.95),inset 0 0 18px rgba(255,215,120,.6)}
.bf-critflash{background:radial-gradient(circle at 50% 50%,rgba(255,244,210,.34),rgba(255,205,100,.12) 46%,transparent 74%)}
.bf-rune{filter:drop-shadow(0 0 12px rgba(255,200,90,.35))}

/* ===== 战斗演出 · 高级感增强 2026-09-27 =====
 * 新增 AI 素材（纯黑底 + mix-blend-mode:screen）：
 *   fx-sigil 符文阵 / fx-aura 光晕 / fx-splash 鎏金飞溅 / fx-dust 金沙尘烟
 * 三组增强：
 *   ① 仪式感：暗场聚焦 + 全屏符文阵 + 印章盖下 + 鎏金流光扫过 + 战场推近入镜
 *   ② 打击感：暴击顿帧（JS）×1.55 + 光晕 fx-aura + 飞溅换 fx-splash
 *   ③ 质感  ：武将卡鎏金描边 + 内阴影 + 死亡下沉消散
 * ⚠ 所有素材必须纯黑底（经 _prep_battle_fx.py 黑底收敛），否则 screen 混合下会浮出黑方块 */

/* ① 暗场聚焦：战法发动时压暗周围，让中央符文阵成为唯一焦点 */
.bf-side,.bf-hud{transition:filter .28s ease}
.bf-field.dim .bf-side{filter:brightness(.5) saturate(.75)}
.bf-field.dim .bf-hud{filter:brightness(.55)}

/* 全屏符文阵（战法 / 治疗发动） */
.bf-sigil{position:absolute;left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;
  pointer-events:none;z-index:6;mix-blend-mode:screen;opacity:0;
  background:url(../assets/ui/battle/fx-sigil.png) center/contain no-repeat;
  animation:bfSigil .86s cubic-bezier(.2,.8,.3,1) forwards}
.bf-sigil.heal{filter:hue-rotate(85deg) saturate(1.15)}
@keyframes bfSigil{0%{opacity:0;transform:scale(.5) rotate(-40deg)}
  28%{opacity:.95;transform:scale(1.04) rotate(0)}
  66%{opacity:.72;transform:scale(1.14) rotate(14deg)}
  100%{opacity:0;transform:scale(1.38) rotate(30deg)}}

/* 鎏金流光扫过（低频，纯氛围） */
.bf-amb .bf-sweep{position:absolute;top:0;left:-40%;width:38%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,214,130,.10) 50%,transparent);
  transform:skewX(-12deg);animation:bfSweep 9s linear infinite}
@keyframes bfSweep{0%{left:-45%}100%{left:118%}}

/* 战场入镜：轻微推近，开场就有"镜头感" */
.bf-field{animation:bfFieldIn .6s cubic-bezier(.2,.8,.3,1)}
@keyframes bfFieldIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}

/* 结算印章：盖下 + 冲击波扩散 */
.bf-seal{animation:bfSealStamp .55s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes bfSealStamp{0%{opacity:0;transform:scale(2.4) rotate(-22deg)}
  55%{opacity:1;transform:scale(.92) rotate(6deg)}
  76%{transform:scale(1.06) rotate(-2deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}}
.bf-seal::after{content:"";position:absolute;inset:-12px;border-radius:50%;
  border:2px solid currentColor;opacity:0;pointer-events:none;
  animation:bfSealRing .8s .28s ease-out forwards}
@keyframes bfSealRing{0%{opacity:.85;transform:scale(.5)}100%{opacity:0;transform:scale(1.7)}}

/* ② 暴击光晕 / 飞溅 / 尘烟换真实素材 */
.bf-hit .bfh-aura{display:none}
.bf-hit.crit .bfh-aura{display:block;position:absolute;left:0;top:0;
  width:210px;height:210px;margin:-105px 0 0 -105px;border-radius:50%;
  background:url(../assets/ui/battle/fx-aura.png) center/contain no-repeat;
  mix-blend-mode:screen;animation:bfhAura .62s ease-out forwards}
@keyframes bfhAura{0%{opacity:0;transform:scale(.4) rotate(-15deg)}
  25%{opacity:1;transform:scale(1.05) rotate(0)}100%{opacity:0;transform:scale(1.55) rotate(14deg)}}
.bf-hit.crit .bfh-ink{background-image:url(../assets/ui/battle/fx-splash.png);
  width:186px;height:186px;margin:-93px 0 0 -93px}
/* 尘烟放最后：骑/械砸击即使同时暴击，也应以尘烟为主（更符合物理） */
.bf-hit.dust .bfh-ink{width:150px;height:150px;margin:-75px 0 0 -75px;
  background-image:url(../assets/ui/battle/fx-dust.png);mix-blend-mode:screen}

/* ③ 质感：卡片鎏金描边 + 内阴影 + 死亡下沉消散 */
.bunit{box-shadow:var(--in-dark),0 3px 8px rgba(120,84,30,.30),inset 0 1px 0 rgba(255,226,160,.10)}
.bunit .bu-face{border:1px solid rgba(240,208,140,.55);
  box-shadow:inset 0 0 12px rgba(120,84,30,.40),0 0 0 1px rgba(120,84,30,0.30)}
.bunit .bu-hp{box-shadow:inset 0 1px 2px rgba(96,70,32,.5)}
.bunit.dead{opacity:.26;filter:grayscale(1) brightness(.78);transform:translateY(4px)}

/* ===== 战斗演出 · 高级感增强（第二轮）2026-09-27 =====
 * 新增 AI 素材（纯黑底 + mix-blend-mode:screen，经 _prep_battle_fx.py 收敛 + 去水印）：
 *   fx-slash 鎏金刀光 / fx-shock 冲击波环 / fx-heal 青玉莲华 / fx-flame 朱金烈焰
 * 设计原则：**不同性质的攻击用不同材质** —— 兵刃刀光、谋略烈焰、治疗莲华、投械尘烟、
 *   兜底金爆。只换主视觉层，白闪 / 金环 / 火星三层保持统一 → 风格一致但不重样。
 */

/* ① 分类命中主视觉层（尺寸略大于旧层，让"材质"看得清） */
.bf-hit .bfh-slash{width:210px;height:210px;margin:-105px 0 0 -105px;border-radius:0;
  background:url(../assets/ui/battle/fx-slash.png) center/contain no-repeat;
  mix-blend-mode:screen;opacity:0;filter:drop-shadow(0 0 14px rgba(255,205,105,.6));
  animation:bfhSlash .52s cubic-bezier(.2,.85,.3,1) forwards}
@keyframes bfhSlash{0%{opacity:0;transform:scale(.5) rotate(-42deg)}
  20%{opacity:1;transform:scale(1.06) rotate(-6deg)}
  100%{opacity:0;transform:scale(1.5) rotate(16deg)}}
.bf-hit .bfh-flame{width:224px;height:224px;margin:-112px 0 0 -112px;border-radius:0;
  background:url(../assets/ui/battle/fx-flame.png) center/contain no-repeat;
  mix-blend-mode:screen;opacity:0;filter:drop-shadow(0 0 18px rgba(255,140,50,.6));
  animation:bfhFlame .58s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes bfhFlame{0%{opacity:0;transform:scale(.45) rotate(-24deg)}
  22%{opacity:1;transform:scale(1.08) rotate(0)}
  100%{opacity:0;transform:scale(1.42) rotate(22deg)}}
/* 治疗：莲华自下而上浮起（"回春"的方向感） */
.bf-hit .bfh-lotus{width:214px;height:214px;margin:-107px 0 0 -107px;border-radius:0;
  background:url(../assets/ui/battle/fx-heal.png) center/contain no-repeat;
  mix-blend-mode:screen;opacity:0;filter:drop-shadow(0 0 16px rgba(110,235,160,.55));
  animation:bfhLotus .7s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes bfhLotus{0%{opacity:0;transform:scale(.6) translateY(16px)}
  26%{opacity:1;transform:scale(1) translateY(0)}
  100%{opacity:0;transform:scale(1.24) translateY(-22px)}}
.bf-hit .bfh-dust{width:186px;height:186px;margin:-93px 0 0 -93px;border-radius:0;
  background:url(../assets/ui/battle/fx-dust.png) center/contain no-repeat;
  mix-blend-mode:screen;opacity:0;animation:bfhDust .6s ease-out forwards}
@keyframes bfhDust{0%{opacity:0;transform:scale(.55)}20%{opacity:.92;transform:scale(1.05)}
  100%{opacity:0;transform:scale(1.45)}}
/* 暴击多叠一圈冲击波环：把"这一下特别重"从材质上再拉开一档 */
.bf-hit .bfh-shockring{width:280px;height:280px;margin:-140px 0 0 -140px;border-radius:0;
  background:url(../assets/ui/battle/fx-shock.png) center/contain no-repeat;
  mix-blend-mode:screen;opacity:0;animation:bfhShockRing .62s ease-out forwards}
@keyframes bfhShockRing{0%{opacity:0;transform:scale(.3) rotate(0)}
  18%{opacity:.95;transform:scale(.9) rotate(8deg)}
  100%{opacity:0;transform:scale(1.35) rotate(20deg)}}
/* 分类色调：环 / 闪 / 火星跟着主视觉层走，避免"刀光配紫环"的错位感 */
.bf-hit.slash .bfh-ring{border-color:rgba(255,222,140,1);
  box-shadow:0 0 18px rgba(255,200,90,.75),inset 0 0 12px rgba(255,208,110,.45)}
.bf-hit.magic .bfh-ring{border-color:rgba(255,166,96,.98);
  box-shadow:0 0 20px rgba(255,120,50,.7),inset 0 0 14px rgba(255,150,70,.45)}
.bf-hit.magic .bfh-flash{background:radial-gradient(circle,#ffe9d2,rgba(255,150,80,.7) 40%,rgba(255,90,30,0) 70%)}
.bf-hit.heal .bfh-ring{border-color:rgba(130,236,175,.98);
  box-shadow:0 0 18px rgba(90,220,140,.7),inset 0 0 12px rgba(120,230,160,.45)}
.bf-hit.heal .bfh-flash{background:radial-gradient(circle,#eafff3,rgba(110,230,160,.7) 40%,rgba(60,200,120,0) 70%)}
.bf-hit.slash .bfh-sp{background:radial-gradient(circle,#fff6d8,rgba(255,190,80,.3) 70%)}
.bf-hit.magic .bfh-sp{background:radial-gradient(circle,#fff0dc,rgba(255,150,70,.3) 70%)}
.bf-hit.heal .bfh-sp{background:radial-gradient(circle,#eafff3,rgba(110,230,160,.3) 70%)}
/* magic / heal 已改用专属材质，旧的 burst 兜底层不再出现，直接关掉避免叠加 */
.bf-hit.magic .bfh-burst,.bf-hit.heal .bfh-burst{display:none}

/* 战场级暴击冲击波：换真实冲击波素材（原来是纯 CSS 圆环，缺材质） */
.bf-shock{width:300px;height:300px;margin:-150px 0 0 -150px;border:0;border-radius:0;
  box-shadow:none;mix-blend-mode:screen;
  background:url(../assets/ui/battle/fx-shock.png) center/contain no-repeat;
  animation:bfShock .66s cubic-bezier(.2,.7,.2,1) forwards}

/* 符文阵配色：治疗青玉 / 术法朱金 / 其余鎏金 */
.bf-sigil.magic{filter:hue-rotate(-34deg) saturate(1.35) brightness(1.06)}

/* 大招镜头推近（与 .dim 同时加、同时撤） */
.bf-field{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.bf-field.focus{transform:scale(1.02)}

/* ② 点将横幅：发动战法时从侧翼推出鎏金横批（谁 · 何战法 · 何类别） */
.bf-cast{position:absolute;left:50%;top:15%;z-index:9;display:flex;align-items:center;gap:10px;
  padding:7px 16px 7px 10px;border-radius:6px;pointer-events:none;
  background:linear-gradient(100deg,rgba(120,84,30,0.25),rgba(252,244,222,0.90) 18%,rgba(252,244,222,0.91) 82%,rgba(120,84,30,0.25));
  border-top:1px solid rgba(240,208,132,.55);border-bottom:1px solid rgba(240,208,132,.55);
  box-shadow:0 6px 26px rgba(120,84,30,.35),0 0 30px rgba(255,196,80,.22);
  animation:bfCastL 1.15s cubic-bezier(.2,.85,.3,1) forwards}
.bf-cast.foe{animation-name:bfCastR}
@keyframes bfCastL{0%{opacity:0;transform:translate(-50%,-50%) translateX(-46px) scale(.92)}
  13%{opacity:1;transform:translate(-50%,-50%) translateX(3px) scale(1.03)}
  24%{transform:translate(-50%,-50%) translateX(0) scale(1)}
  78%{opacity:1;transform:translate(-50%,-50%) translateX(0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) translateX(0) scale(1.03)}}
@keyframes bfCastR{0%{opacity:0;transform:translate(-50%,-50%) translateX(46px) scale(.92)}
  13%{opacity:1;transform:translate(-50%,-50%) translateX(-3px) scale(1.03)}
  24%{transform:translate(-50%,-50%) translateX(0) scale(1)}
  78%{opacity:1;transform:translate(-50%,-50%) translateX(0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) translateX(0) scale(1.03)}}
.bf-cast .bfc-line{width:26px;height:1px;flex:0 0 26px;
  background:linear-gradient(90deg,transparent,rgba(240,208,132,.9))}
.bf-cast .bfc-line:last-child{background:linear-gradient(90deg,rgba(240,208,132,.9),transparent)}
.bf-cast .bfc-face{position:relative;width:38px;height:38px;flex:0 0 38px;border-radius:50%;overflow:hidden;
  border:1px solid rgba(240,208,132,.75);background:rgba(120,84,30,.30);
  box-shadow:inset 0 0 12px rgba(255,196,80,.3),0 0 10px rgba(255,196,80,.3)}
.bf-cast .bfc-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bf-cast .bfc-face .hface-ch{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:16px;font-weight:700;color:#efd58a}
.bf-cast .bfc-txt{display:flex;flex-direction:column;line-height:1.16;text-align:left}
.bf-cast .bfc-hero{font-size:12px;font-weight:600;color:#dcc9a2;letter-spacing:1px}
.bf-cast .bfc-skill{font-style:normal;font-size:19px;font-weight:800;letter-spacing:2px;
  background:linear-gradient(180deg,#fff8e2,#f0c46a 58%,#d0993c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(255,196,80,.5))}
.bf-cast .bfc-cat{font-size:11px;font-weight:700;letter-spacing:1px;padding:2px 7px;border-radius:3px;
  color:#20160a;background:linear-gradient(180deg,#f4d98c,#d8ab4e);box-shadow:0 1px 4px rgba(120,84,30,.30)}
.bf-cast.heal .bfc-cat{color:#0d2317;background:linear-gradient(180deg,#bff0cf,#69c48d)}
.bf-cast.magic .bfc-cat{color:#2a1206;background:linear-gradient(180deg,#ffc48c,#e0713a)}
.bf-cast.heal .bfc-skill{background:linear-gradient(180deg,#eafff3,#8fe6b4 58%,#4fae7c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(110,230,160,.5))}
.bf-cast.magic .bfc-skill{background:linear-gradient(180deg,#fff0dc,#ffb266 58%,#e0713a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(255,150,70,.5))}

/* ③ 连击角标：同一人连续出手累加 ×N */
.bu-combo{position:absolute;top:-9px;right:-8px;z-index:5;font-style:normal;font-size:13px;font-weight:800;
  padding:1px 6px;border-radius:9px;color:#20160a;pointer-events:none;
  background:linear-gradient(180deg,#ffe9a8,#e6b64c);border:1px solid rgba(255,236,180,.9);
  box-shadow:0 2px 8px rgba(120,84,30,.35),0 0 14px rgba(255,196,80,.55)}
.bu-combo.pop{animation:comboPop .34s cubic-bezier(.2,.9,.3,1)}
@keyframes comboPop{0%{transform:scale(.5) rotate(-10deg)}60%{transform:scale(1.22) rotate(3deg)}100%{transform:scale(1)}}

/* ④ 兵种角标（队伍级兵种，一眼看出我方带的是什么兵） */
.bu-arm{position:absolute;top:-7px;left:-7px;z-index:5;width:19px;height:19px;font-style:normal;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  border-radius:50%;color:#f6e6bb;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,rgba(88,66,38,.98),rgba(252,244,222,0.93));
  border:1px solid rgba(224,192,118,.7);box-shadow:0 2px 6px rgba(120,84,30,.35)}
.bu-arm.a-qiang{color:#f0c8c0;border-color:rgba(230,150,140,.75)}
.bu-arm.a-qi{color:#ffd9a0;border-color:rgba(255,180,90,.8)}
.bu-arm.a-gong{color:#cfe6b0;border-color:rgba(170,210,120,.75)}
.bu-arm.a-dun{color:#bcd6ea;border-color:rgba(140,190,230,.75)}
.bu-arm.a-xie{color:#e0cfae;border-color:rgba(200,180,140,.75)}

/* ⑤ 残血警示 / 阵亡：不用读数就知道谁快没了 */
.bunit .bu-face{position:relative}
.bunit.low .bhp-fill{background:linear-gradient(180deg,#ffd978,#e08a2a)}
.bf-side.def .bunit.low .bhp-fill{background:linear-gradient(180deg,#ffc07a,#d2601e)}
.bunit.low .bhp-val{animation:hpWarn 1.1s ease-in-out infinite}
@keyframes hpWarn{0%,100%{opacity:1}50%{opacity:.5}}
.bunit.critical .bhp-fill{background:linear-gradient(180deg,#ff9b6b,#d02a1c);
  animation:hpFire .62s ease-in-out infinite alternate}
@keyframes hpFire{from{filter:brightness(1)}to{filter:brightness(1.38)}}
.bunit.critical{box-shadow:var(--in-dark),0 3px 8px rgba(120,84,30,.30),
  0 0 0 1px rgba(255,90,60,.55),0 0 22px rgba(255,70,40,.3)}
.bunit.dead{opacity:.34}
.bunit.dead .bu-name{color:#8d8577;text-decoration:line-through;
  text-decoration-color:rgba(200,90,70,.75)}
.bunit.dead .bu-hp{filter:grayscale(.6) brightness(.7)}
/* 阵亡朱印：盖在头像上（grayscale 后仍留一枚压印感） */
.bunit.dead .bu-face::after{content:"陣";position:absolute;left:50%;top:50%;width:38px;height:38px;
  margin:-19px 0 0 -19px;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700;color:#ffd8cc;background:rgba(150,26,16,.9);
  border:2px solid rgba(255,196,170,.85);border-radius:3px;
  box-shadow:0 0 14px rgba(200,40,20,.6);animation:deadSeal .42s cubic-bezier(.2,.9,.3,1)}
@keyframes deadSeal{0%{opacity:0;transform:rotate(-13deg) scale(2.2)}
  100%{opacity:1;transform:rotate(-13deg) scale(1)}}

/* ⑥ 胜利金光雨（撒在战场上，不撒进结算面板） */
.bf-rain{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.bf-rain i{position:absolute;top:-14px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,#fff6d8,rgba(255,206,110,.85) 45%,rgba(255,180,60,0) 72%);
  box-shadow:0 0 10px rgba(255,208,110,.8);
  animation:bfRain var(--t) linear var(--d) forwards}
@keyframes bfRain{0%{opacity:0;transform:translateY(0) scale(.6) rotate(0)}
  12%{opacity:1}100%{opacity:0;transform:translateY(420px) scale(1) rotate(var(--rot,0deg))}}

/* ===== 储备兵总览条（部队页顶部） =====
 * 补兵的唯一来源必须看得见：数量 / 上限 / 征兵速度 / 招募消耗，一眼给全。 */
.pool-bar{position:relative;max-width:720px;margin:0 auto 12px;padding:10px 14px 11px;border-radius:8px;
  background:linear-gradient(180deg,rgba(252,244,222,0.87),rgba(252,244,222,0.87));
  border:1px solid rgba(224,192,118,.34);
  box-shadow:0 4px 14px rgba(120,84,30,.32),inset 0 1px 0 rgba(255,232,180,.12)}
.pool-bar.none{border-color:rgba(190,90,80,.5)}
.pb-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.pb-top>b{font-family:var(--f-title);font-size:14px;color:#f4dd92;letter-spacing:2px}
.pb-n{font-size:19px;font-weight:700;color:#ffe9b0}
.pb-n i{font-style:normal;font-size:12px;color:#b9a87c;font-weight:400}
.pb-r{margin-left:auto;font-size:11.5px;color:#c3b184}
.pb-r b{color:#f0d896}
.pb-track{position:relative;height:7px;border-radius:4px;overflow:hidden;
  background:rgba(120,84,30,.35);box-shadow:inset 0 0 0 1px rgba(224,192,118,.2)}
.pb-track>i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#8a6a24,#e8c265 60%,#ffe6a8);
  box-shadow:0 0 8px rgba(224,192,118,.55);transition:width .5s ease}
.pool-bar.none .pb-track>i{background:linear-gradient(90deg,#6b2a24,#c2503f)}
.pb-sub{margin-top:6px;font-size:11.5px;color:#9d8e6d;line-height:1.5}


/* ===================================================================
   无双卡牌层（指尖无双向）：阵营角标 / 品质描边卡 / 等级·觉醒徽章
   =================================================================== */

/* ---- 阵营角标（立绘左上角圆章） ---- */
.hf-fac{position:absolute;left:5px;top:5px;z-index:3;width:22px;height:22px;line-height:22px;
  text-align:center;font-style:normal;font-family:var(--f-title);font-size:13px;font-weight:700;
  color:#fff8e8;text-shadow:0 1px 1px rgba(40,20,0,.5);
  border-radius:50%;border:1.5px solid rgba(255,244,214,.85);
  box-shadow:0 1px 4px rgba(90,60,20,.45), inset 0 1px 0 rgba(255,255,240,.35)}
.hf-fac.fwei{background:linear-gradient(180deg,#6f9ee6,#3a6bb0)}
.hf-fac.fshu{background:linear-gradient(180deg,#8fce6f,#4e8f3a)}
.hf-fac.fwu{background:linear-gradient(180deg,#ef8a6c,#b04a32)}
.hf-fac.fqun{background:linear-gradient(180deg,#e2bd6c,#a07c2e)}

/* ---- 卡面：米纸卡 + 品质双描边 ---- */
.hero-card{background:linear-gradient(172deg,#fffdf2 0%,#f9efd6 58%,#f3e4bd 100%)!important;
  border:2px solid rgba(216,178,94,.45)!important;
  box-shadow:0 3px 10px rgba(120,84,30,.25), inset 0 0 0 1px rgba(255,252,240,.9)!important}
.hero-card::before{height:3px;border-radius:2px}
.hero-card.q5{border-color:#dcb04e!important;
  box-shadow:0 3px 12px rgba(160,116,36,.38), inset 0 0 0 1px rgba(255,248,222,.95), 0 0 14px rgba(224,192,118,.25)!important}
.hero-card.q5::before{background:linear-gradient(90deg,transparent,#e8bd55 18%,#fff0bd 50%,#e8bd55 82%,transparent)}
.hero-card.q4{border-color:#b082e2!important}
.hero-card.q4::before{background:linear-gradient(90deg,transparent,#b98ce8 20%,#e6d2f8 50%,#b98ce8 80%,transparent)}
.hero-card.q3{border-color:#6098e2!important}
.hero-card.q3::before{background:linear-gradient(90deg,transparent,#79a6e8 20%,#cfdff8 50%,#79a6e8 80%,transparent)}
.hero-card.q2{border-color:#5f9e79!important}
.hero-card.q2::before{background:linear-gradient(90deg,transparent,#7fc39f 20%,#cfeadd 50%,#7fc39f 80%,transparent)}
.hero-card:hover{transform:translateY(-3px)}

/* ---- 立绘框：金环 + 底部名字压条 ---- */
.hero-card .hface{border-radius:9px;
  box-shadow:0 0 0 2px rgba(224,192,118,.55), 0 3px 8px rgba(120,84,30,.30)!important}
.hero-card .hface-img img{object-position:50% 18%}
.hero-card .hn{margin-top:7px;font-size:17px;color:#4a3418;text-shadow:0 1px 0 rgba(255,252,240,.8)}

/* ---- 星级：金色实星 ---- */
.hero-card .star{font-size:13px;letter-spacing:2px;color:#c9992e;
  text-shadow:0 1px 0 rgba(255,248,222,.9)}
.hero-card.q5 .star{color:#cf9426}

/* ---- 等级 / 觉醒 徽章行 ---- */
.hero-card .hlv{display:flex;justify-content:center;gap:5px;margin-top:4px}
.lv-pill{display:inline-block;font-size:10.5px;font-weight:700;line-height:1;padding:3px 8px;border-radius:9px;
  color:#f8ecc0;background:linear-gradient(180deg,#6a5230,#453417);
  box-shadow:inset 0 1px 0 rgba(255,236,190,.25)}
.aw-pill{display:inline-block;font-size:10.5px;font-weight:700;line-height:1;padding:3px 8px;border-radius:9px;
  color:#f3e6ff;background:linear-gradient(180deg,#8a5cc0,#5a3786);
  box-shadow:inset 0 1px 0 rgba(240,220,255,.3)}

/* ===================================================================
   可读性修正（浅色底上的浅字残留）
   =================================================================== */
.pool-bar .pb-top>b,.pool-bar .pb-n{color:#7a5a1c;text-shadow:none}
.pool-bar .pb-n i,.pool-bar .pb-r{color:#9d8e6d}
.pool-bar .pb-r b{color:#8a6215}
.fit.S{color:#a07714;border-color:rgba(200,150,50,.55);background:rgba(224,192,118,.16)}
.fit.A{color:#7a4fa8;border-color:rgba(150,100,200,.45);background:rgba(166,120,216,.12)}
.fit.B{color:#3a6aa8;border-color:rgba(100,140,200,.45);background:rgba(91,141,217,.12)}
.bd-chip.on{color:#8a6215;background:rgba(224,192,118,.18)}
.sk-eff-line{color:#4a4030}
.sk-eff-line:before{color:#5b8dd9}
.m-sec{color:var(--gold-dk)}
.boot-rule::after{background:var(--ink-1)}
.br-log::-webkit-scrollbar-track{background:rgba(120,84,30,.12)}
.bf-back:hover{color:#8a6215}
.tt-row.on{background:rgba(224,192,118,.10)}


/* ---- 主城建筑卡：米纸卡（替换深色版） ---- */
.bd-card{background:linear-gradient(172deg,#fffdf2 0%,#f9efd6 58%,#f3e4bd 100%)!important;
  border:2px solid rgba(216,178,94,.40)!important;
  box-shadow:0 3px 10px rgba(120,84,30,.22), inset 0 0 0 1px rgba(255,252,240,.9)!important}
.bd-card .bd-name{color:#7a5a1c!important}
.bd-card .bd-eff{color:#8a7a5c!important}
.bd-card .bd-up,.bd-card:not(.locked) .bd-up{color:#8a6215!important}
.bd-card .bd-up.st-ok{color:#3e7a52!important;text-shadow:none}
.bd-card .bd-up.st-no{color:#b05a40!important}
.bd-card .bd-up.st-max{color:#9a8c6c!important}
.bd-card .bd-bar{background:rgba(120,84,30,.18)!important}
.bd-card .m-note{color:#8a7a5c!important}
.bd-card.can-up{border-color:#c9a24a!important;box-shadow:0 3px 12px rgba(160,116,36,.30), inset 0 0 0 1px rgba(255,248,222,.95)!important}
.bd-card.just-up{border-color:#dcb04e!important}
.bd-card .bd-emblem{background:radial-gradient(circle at 34% 26%,#fdf3d6,#efd9a4 70%);
  border:1px solid rgba(200,155,60,.45);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,252,240,.8), 0 2px 5px rgba(120,84,30,.22)}
.bd-card .bd-emblem .ico{filter:drop-shadow(0 1px 2px rgba(120,84,30,.35)) brightness(.92) saturate(1.05)}
.bd-card.locked>.bd-emblem{filter:grayscale(.85) brightness(.95)}

/* ===================================================================
   无双·战斗升级：让战斗单位卡 / 阵容 / 面板 与「无双卡牌层」同语言
   （米纸卡 + 品质描边 + 阵营角标 + 星级 + 等级·觉醒徽章；并修正米纸底上的浅字）
   =================================================================== */

/* ---- ① 单位卡：品质描边（与武将卡同色系） ---- */
.bunit.q5{border-color:#dcb04e;box-shadow:0 3px 12px rgba(160,116,36,.30),inset 0 0 0 1px rgba(255,248,222,.7),0 0 12px rgba(224,192,118,.22)}
.bunit.q4{border-color:#b082e2;box-shadow:0 3px 12px rgba(120,84,150,.26),inset 0 0 0 1px rgba(255,248,222,.7)}
.bunit.q3{border-color:#6098e2;box-shadow:0 3px 12px rgba(60,100,170,.24),inset 0 0 0 1px rgba(255,248,222,.7)}
.bunit.q2{border-color:#5f9e79;box-shadow:0 3px 12px rgba(60,120,90,.22),inset 0 0 0 1px rgba(255,248,222,.7)}
/* 单位立绘：金环（与武将卡一致），并把阵营角标挪到右上，避开左上兵种角标 */
.bunit .bu-face{border-color:rgba(240,208,140,.6);box-shadow:0 0 0 2px rgba(224,192,118,.5),0 2px 6px rgba(120,84,30,.30)}
.bunit .bu-face .hf-fac{left:auto;right:3px;top:3px}

/* ---- ② 单位卡信息列：姓名(深) / 星级 / 等级·觉醒徽章 / 血条 ---- */
.bunit .bu-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.bunit .bu-name{color:#5a3e18;font-weight:700;min-width:0}
.bunit.acting .bu-name{color:#8a5a14}
.bunit .bu-sub{display:flex;align-items:center;gap:6px;min-width:0}
.bunit .bu-star{font-size:11px;letter-spacing:1px;color:#c9992e;text-shadow:0 1px 0 rgba(255,248,222,.9);flex:0 0 auto}
.bunit.q5 .bu-star{color:#cf9426}
.bunit .bu-hlv{display:flex;align-items:center;gap:4px;flex:0 0 auto}
/* HP 条在 bu-main 列内回到「整行」而非被拉伸 */
.bunit .bu-main .bu-hp{flex:0 0 auto;width:100%}
.bunit .bu-badges{flex-wrap:wrap;max-width:none}
.bf-side.def .bu-main{align-items:flex-end}

/* ---- ③ 战前阵容速览（点将）：头像加阵营角标 + 文字转深 ---- */
.bf-ro .hf-fac{width:16px;height:16px;line-height:16px;font-size:10px;left:2px;top:2px}
.bf-ro b{color:#6a4e1e;font-weight:600}
.bf-ro-mid{color:#b8924a}
.bf-prept{color:#b8924a}
.bf-bonds-t{color:#b8924a}
.bf-nobond{color:#8a7a5c}
.bf-chip .bfc-l{color:#8a7a5c}
.bf-chip .bfc-v{color:#5a3e18}
.bf-chip.faction .bfc-v{color:#a8772a}
.bf-chip.good .bfc-v{color:#3e7a52}
.bf-chip.bad .bfc-v{color:#c2553c}
.bf-chip.flat .bfc-v{color:#5a6a86}
.bf-chip.arm .bfc-v{color:#7a5aa0}

/* ---- ④ 顶部信息 / 战报 / 结算 小字（米纸底上的浅字修正） ---- */
.bf-tile{color:#8a7a5c}
.bf-stats{color:#6a4e1e}
.bf-stats .st b{color:#8a6215}
.bf-stats .st.mvp b{color:#b8922a}
.bf-cmp .br-cmp-row{color:#6a4e1e}
.bf-cmp .br-cmp-row .lbl{color:#8a7a5c}
.bf-cmp .br-cmp-row b{color:#5a3e18}
.bf-gain{color:#3e7a52}

/* ---- ⑤ 中央战法 / 行动提示条：自身是米纸小卡，字转深（原浅金字在米纸上几乎看不见） ---- */
.bf-skill{color:#4a3418}
.bf-skill b.dmg{color:#d2553c}
.bf-skill b.heal{color:#3e7a52}
.bf-skill b.ctrl{color:#7a4fa8}
.bf-skill b.dot{color:#3e7a52}
.bf-skill b.insight{color:#2f8a82}
.bf-skill b.crit{color:#b8922a}
.bf-skill b.elem-fire{color:#c2553c}
.bf-skill b.elem-water{color:#3a6aa8}
.bf-skill b.elem-thunder{color:#7a4fa8}
.bf-act{color:#4a3418}
.bf-act b{color:#8a6215}
.bf-act span{color:#b8924a}
.bf-act em{color:#8a7a5c}
.bf-act u{color:#d2553c}
.bf-act.heal b,.bf-act.heal u{color:#3e7a52}
.bf-act.crit u{color:#b8922a}
.bf-act.ctrl em,.bf-act.dot em{color:#7a4fa8}
.bf-act.ctrl u,.bf-act.dot u{display:none}

/* ---- ⑥ 回合胶囊 / 底部节奏条：自身米纸底，字转深 ---- */
.bfh-round{color:#8a6215}
.bf-ctl-t{color:#8a6a2a}
.bf-rate{color:#6a4e1e}
.bf-skip{color:#6a4e1e}

/* ---- ⑦ 金按钮：全局 .btn-gold 已统一为「真金渐变 + 深字」，此处不再重复覆盖 ---- */

/* ---- ⑧ 掉血残影：只在掉血瞬间显形，播完淡出（常驻会把血条蒙成白粉色） ---- */
.bhp-ghost{opacity:0}
.bhp-ghost.run{opacity:1;transition:width .52s cubic-bezier(.3,.7,.2,1) .06s,opacity .12s}
.bhp-ghost.off{opacity:0;transition:opacity .5s .1s}

/* ---- ⑨ 纯文字战报（showReport）：米纸浅底上的配色修正。
 *   原调色板（浅金/浅蓝/浅橙）是暗底时代的遗留，放在米纸上对比度不足。
 *   只作用于 #modalBox 的 .br-line（战斗动画结算面板不含 .br-line，不受影响）。 ---- */
#modalBox .br-line{color:#4a3a22}
#modalBox .br-line.info{color:#8a7350}
#modalBox .br-line .dmg{color:#b3532a}
#modalBox .br-line .heal{color:#2e7d54}
#modalBox .br-line .sk{color:#2f5e9e}
#modalBox .br-line .crit{color:#8a5a00;text-shadow:none}
#modalBox .br-line .ctrl{color:#6d3fa3}
#modalBox .br-line .dot{color:#2f7d3a}
#modalBox .br-line .insight{color:#0f7d76}
#modalBox .br-line .elem-fire{color:#b05a1e}
#modalBox .br-line .elem-water{color:#2a5e9e}
#modalBox .br-line .elem-thunder{color:#6a3fb0}
#modalBox .br-line .elem-wind{color:#1e7d5e}
#modalBox .br-line .elem-rock{color:#8a6215}
#modalBox .br-cmp-row .lbl{color:#7a6640}
#modalBox .br-cmp-row b{color:#3a2c12}
#modalBox .br-restraint.good{color:#2e6b48}
#modalBox .br-restraint.bad{color:#9c3a24}
#modalBox .br-restraint.flat{color:#7a5a1a}

/* ============ 红星：升红后金星逐颗转红（SG.starRed 输出 <b class="sr">★</b>） ============ */
.star .sr,.stars .sr,.bu-star .sr{color:#ff4a38;font-weight:400;
  text-shadow:0 0 7px rgba(255,74,56,.55),0 1px 2px rgba(130,24,12,.5)}

/* ================================================================
   战斗演出 · 克制版 2026-10-08
   ================================================================
   用户反馈：太花、遮挡阵容与战报、质感不高级。
   新原则：**信息优先，动效只服务读数** —— 屏幕上同时最多两层视觉：
       一次攻击 = ① 一道材质（刀光 / 焰 / 莲 / 尘） ② 伤害飘字 + 一道细环
   删：鎏金浮尘×3 / 上升余烬 / 流光扫 / 全屏符文阵 / 暗场 + 镜头推近 /
       胜利金光雨 / 全屏金闪 / 暴击冲击波 / 命中白闪 / 四向火星 / 材质光晕 /
       卡片鎏金流光 / 战场四角描金。
   收敛：兵器拖尾更细更淡、命中材质层尺寸↓30% 且峰值不透明度↓、
       施法法阵↓到 118px、点将横幅改成顶部细条（不再压在阵容上）。
   ⚠ 本段**纯做覆盖**，不改动上面的旧规则 —— 想回滚把整段删掉即可。
   ⚠ 动效时长不要在这里改：.bf-fly 的 .6s 与 ui.js 里 600ms 的 setTimeout
     是配对的（ fluidFx 落点靠它触发），改 CSS 不改 JS 会让飞行动画被截断。
   ================================================================ */

/* ① 氛围层：只留暗角（聚焦）+ 一条极淡中轴（构图），浮尘 / 余烬 / 流光全灭 */
.bf-amb .bf-motes,.bf-amb .bf-embers,.bf-amb .bf-sweep{display:none!important}
.bf-amb .bf-axis{opacity:.20;box-shadow:none!important}
.bf-field::before{display:none}                       /* 四角描金 */
.bf-field::after{box-shadow:inset 0 0 0 1px rgba(224,192,118,.22)!important}

/* ② 弹道：核心表现保留，去掉廉价的光晕与厚拖尾 */
.bf-fly::after{opacity:.30;filter:blur(1.2px)}
.bf-fly.phys,.bf-fly.magic,.bf-fly.heal{box-shadow:none!important}
.bf-wpn>.bf-trail{width:40px;left:-40px;height:4px;margin-top:-2px;
  opacity:.45;filter:blur(.8px)}

/* ③ 命中：只留「材质层 + 一道细环」，白闪 / 火星 / 光晕 / 冲击波全灭 */
.bf-hit .bfh-flash,.bf-hit .bfh-sp,
.bf-hit .bfh-aura,.bf-hit .bfh-shockring{display:none!important}
.bf-hit.slash .bfh-ink{display:none!important}        /* 已有刀光，不再叠墨溅 */
.bf-hit.dust .bfh-burst{display:none!important}       /* 已有尘烟 */
.bf-hit .bfh-ring{width:22px;height:22px;margin:-11px 0 0 -11px;
  border-width:1.5px;box-shadow:none!important}
.bf-hit.crit{transform:scale(1.18)}
/* 材质层：去发光（廉价感来源）+ 尺寸与峰值不透明度各降一档。
 * ⚠ 2026-10-08 回调：第一版压到 150px / .8 太弱了，玩家反馈「技能打上去没感觉」，
 *   这里回调到 ~185px / .9 —— 仍比老版（210px + 三层叠加）克制，但打击看得分明。
 *   尺寸与峰值是「存在感」的两条主旋钮，要调就调这两个，别再往回加层。 */
.bf-hit .bfh-slash{width:184px;height:184px;margin:-92px 0 0 -92px;
  filter:none!important;animation:bfxMat .42s cubic-bezier(.2,.85,.3,1) forwards}
.bf-hit .bfh-flame{width:200px;height:200px;margin:-100px 0 0 -100px;
  filter:none!important;animation:bfxFlame .46s cubic-bezier(.2,.85,.3,1) forwards}
.bf-hit .bfh-lotus{width:184px;height:184px;margin:-92px 0 0 -92px;
  filter:none!important;animation:bfxLotus .56s cubic-bezier(.2,.8,.3,1) forwards}
.bf-hit .bfh-dust{width:170px;height:170px;margin:-85px 0 0 -85px;
  filter:none!important;animation:bfxDust .5s ease-out forwards}
.bf-hit .bfh-burst{width:124px;height:124px;margin:-62px 0 0 -62px;
  filter:none!important;animation:bfxBurst .42s cubic-bezier(.2,.8,.3,1) forwards}
.bf-hit .bfh-ink{width:136px;height:136px;margin:-68px 0 0 -68px;
  filter:none!important;animation:bfxInk .44s ease-out forwards}
@keyframes bfxMat{0%{opacity:0;transform:scale(.66) rotate(-16deg)}
  16%{opacity:.92;transform:scale(1.02) rotate(0)}100%{opacity:0;transform:scale(1.24) rotate(8deg)}}
@keyframes bfxFlame{0%{opacity:0;transform:scale(.58) rotate(-12deg)}
  20%{opacity:.94;transform:scale(1.04) rotate(0)}100%{opacity:0;transform:scale(1.3) rotate(10deg)}}
@keyframes bfxLotus{0%{opacity:0;transform:scale(.66) translateY(12px)}
  24%{opacity:.92;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(1.18) translateY(-14px)}}
@keyframes bfxDust{0%{opacity:0;transform:scale(.62)}
  22%{opacity:.88;transform:scale(1.02)}100%{opacity:0;transform:scale(1.32)}}
@keyframes bfxBurst{0%{opacity:0;transform:scale(.45)}
  18%{opacity:.9;transform:scale(1.04)}100%{opacity:0;transform:scale(1.34)}}
@keyframes bfxInk{0%{opacity:0;transform:scale(.6)}
  18%{opacity:.85;transform:scale(1.02)}100%{opacity:0;transform:scale(1.2)}}

/* ④ 全屏级演出（金光雨 / 全屏金闪 / 战场冲击波 / 全屏符文阵 / 暗场推近）全部取消：
   它们是"遮挡阵容和战报"的主犯，也最显廉价。JS 侧同步不再生成这些节点。 */
.bf-rain,.bf-critflash,.bf-shock,.bf-sigil{display:none!important}
.bf-field.dim .bf-side,.bf-field.dim .bf-hud{filter:none!important}
.bf-field.focus{transform:none!important}

/* ⑤ 施法法阵：保留"谁发动了战法"的信息，但缩到一枚小巧的印 */
.bf-rune{width:118px;height:118px;margin:-59px 0 0 -59px;filter:none!important;
  animation:bfxRune .58s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes bfxRune{0%{opacity:0;transform:scale(.62) rotate(-28deg)}
  30%{opacity:.66;transform:scale(1.02) rotate(0)}100%{opacity:0;transform:scale(1.22) rotate(20deg)}}

/* ⑥ 点将横幅：从「中央大鎏金横批」改成顶部细条（深墨底金字），不压阵容 */
.bf-cast{top:6px;gap:8px;padding:4px 13px 4px 6px;border-radius:4px;
  background:linear-gradient(100deg,rgba(22,16,7,0),rgba(22,16,7,.74) 16%,
    rgba(22,16,7,.74) 84%,rgba(22,16,7,0));
  border-top:1px solid rgba(224,192,118,.32);border-bottom:1px solid rgba(224,192,118,.32);
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.bf-cast .bfc-line{width:14px;flex:0 0 14px}
.bf-cast .bfc-face{width:24px;height:24px;flex:0 0 24px;box-shadow:none;
  border-color:rgba(224,192,118,.5)}
.bf-cast .bfc-hero{font-size:11px;letter-spacing:.5px}
.bf-cast .bfc-skill{font-size:15px;letter-spacing:1px;filter:none!important}
.bf-cast .bfc-cat{font-size:10px;padding:1px 5px;box-shadow:none}

/* ⑦ 单位卡：去鎏金描边光晕与卡面流光，保留必要的信息层
   （出手金环 / 受击抖动 / 残血 / 阵亡朱印 / 连击角标 / 兵种角标） */
.bunit{box-shadow:0 2px 6px rgba(0,0,0,.34)!important}
.bunit::after{display:none}
.bunit .bu-face{border-color:rgba(224,192,118,.42);box-shadow:none!important}
.bunit.acting .bu-face{box-shadow:0 0 0 2px rgba(255,214,110,.7)!important}
/* 出手动作收敛：1.13 倍弹跳太抢戏，1.06 的"探步"足够读出"轮到他了" */
.bunit.acting{animation-duration:.4s}
@keyframes bfActA{0%{transform:scale(1)}
  30%{transform:scale(1.06) translateX(6px)}
  100%{transform:scale(1) translateX(0)}}
@keyframes bfActD{0%{transform:scale(1)}
  30%{transform:scale(1.06) translateX(-6px)}
  100%{transform:scale(1) translateX(0)}}
.bunit.critical{box-shadow:0 2px 6px rgba(0,0,0,.34),0 0 0 1px rgba(255,90,60,.5)!important}
.bunit.critical .bhp-fill{animation:none}
/* 阵亡朱印略收：一枚小压印足够，不需要再去 grayscale 之外加光 */
.bunit.dead .bu-face::after{width:32px;height:32px;margin:-16px 0 0 -16px;
  font-size:16px;box-shadow:none}
/* 结算印章：保留盖印仪式感，去掉扩散冲击环 */
.bf-seal::after{display:none}

/* ================================================================
   战法演出 · 强化 2026-10-08
   ================================================================
   克制版把"花"减掉了，但顺手把**战法**的辨识度也削没了 —— 玩家反馈：
   「发动技能时字幕太小」「技能打到身上没感觉」。
   本段只做一件事：**把"战法"这一档从普攻里拉出来**，普攻维持克制。
     ① 战法字幕：中央放大 + 【战法名】提成 27px 鎏金大字（我方蓝金 / 敌方朱金）
     ② 战法落点：材质层再放大 1.22 倍 + 金环加粗（.bf-hit.skill）
     ③ 战法命中：受击卡沿边亮一圈（.bunit.skillhit）+ 飘字再大一档（.dmgpop.big）
     ④ 状态施加：灼烧 / 震慑 / 缴械 … 在对方卡上砸一个词（.markpop）
   ⚠ 字幕选择器一律带 `#bfFx` 限定：premium.css 中段还有一处「文字战报浅底主题」
     的 .bf-skill 重映射（color:#4a3418），不带限定的全局覆盖会把它整片改坏。
   ================================================================ */

/* ① 战法字幕：深墨底金字，中央放大 */
#bfFx .bf-skill{top:31%;max-width:92%;padding:13px 24px;font-size:19px;letter-spacing:1px;
  line-height:1.5;color:#f2e6c8;
  background:linear-gradient(180deg,rgba(20,14,6,.86),rgba(20,14,6,.90));
  border:1px solid rgba(224,192,118,.5);
  box-shadow:0 8px 26px rgba(0,0,0,.5)}
#bfFx .bf-skill .skbig{display:inline-block;margin:0 5px;font-size:27px;font-weight:800;
  letter-spacing:3px;vertical-align:-2px;
  background:linear-gradient(180deg,#fff8e2,#f0c46a 58%,#d0993c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}
#bfFx .bf-skill.mine .skbig{background:linear-gradient(180deg,#eef6ff,#9fc4f0 58%,#5f8cc8);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#bfFx .bf-skill.foe .skbig{background:linear-gradient(180deg,#fff0e4,#ffab74 58%,#cf6234);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#bfFx .bf-skill b.dmg{color:#ff9b7a}
#bfFx .bf-skill b.heal{color:#8fe8ae}
#bfFx .bf-skill b.crit{color:#ffdd8a}
/* 字幕入场：从下方推入并短暂停留在放大帧，字更大就要更「稳」一点 */
#bfFx .bf-skill{animation:bfxSkill .62s cubic-bezier(.2,.85,.3,1) forwards}
@keyframes bfxSkill{0%{opacity:0;transform:translate(-50%,-50%) scale(.8) translateY(10px)}
  16%{opacity:1;transform:translate(-50%,-50%) scale(1.04) translateY(0)}
  26%{transform:translate(-50%,-50%) scale(1) translateY(0)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) translateY(0)}}

/* ② 战法落点：在普攻档基础上再放大一档，环也加粗 */
.bf-hit.skill{transform:scale(1.22)}
.bf-hit.skill.crit{transform:scale(1.38)}
.bf-hit.skill .bfh-ring{width:30px;height:30px;margin:-15px 0 0 -15px;border-width:2px}
.bf-hit.skill .bfh-slash,.bf-hit.skill .bfh-flame,.bf-hit.skill .bfh-lotus,
.bf-hit.skill .bfh-dust,.bf-hit.skill .bfh-burst,.bf-hit.skill .bfh-ink{
  animation-duration:.58s}

/* ③ 战法命中：受击卡沿边亮一圈（普攻不亮） */
.bunit.skillhit{animation:bfxSkillHit .62s cubic-bezier(.2,.8,.3,1)}
@keyframes bfxSkillHit{0%{box-shadow:0 0 0 0 rgba(255,214,120,.9)}
  22%{box-shadow:0 0 0 3px rgba(255,214,120,.75),0 0 20px rgba(255,190,70,.55)}
  100%{box-shadow:0 0 0 0 rgba(255,214,120,0)}}
.bf-side.def .bunit.skillhit{animation-name:bfxSkillHitFoe}
@keyframes bfxSkillHitFoe{0%{box-shadow:0 0 0 0 rgba(255,140,90,.9)}
  22%{box-shadow:0 0 0 3px rgba(255,140,90,.75),0 0 20px rgba(230,90,50,.5)}
  100%{box-shadow:0 0 0 0 rgba(255,140,90,0)}}
/* 飘字：战法档更大（普攻 17px 不变） */
.dmgpop.big b{font-size:21px}
.dmgpop.big i{font-size:11px}

/* ④ 状态施加：在对方卡中央砸一个词（以前只有右下角小徽标，太容易被忽略） */
.markpop{position:absolute;left:50%;top:50%;z-index:9;pointer-events:none;
  transform:translate(-50%,-50%);padding:4px 12px;border-radius:4px;
  font-size:20px;font-weight:800;letter-spacing:3px;white-space:nowrap;
  background:rgba(20,14,6,.82);border:1px solid;animation:bfxMarkPop .9s cubic-bezier(.2,.9,.3,1) forwards}
.markpop.ctrl{color:#d9b8ff;border-color:rgba(160,110,235,.85);
  text-shadow:0 0 12px rgba(140,90,220,.7)}
.markpop.dot{color:#ffb079;border-color:rgba(230,120,60,.85);
  text-shadow:0 0 12px rgba(220,90,40,.65)}
@keyframes bfxMarkPop{0%{opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(-6deg)}
  16%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.08) translateY(-10px)}}

/* ===================================================================
   20. 启动页 · 宣纸鎏金（2026-10-16 二次改版）
   —— 上一版用暗调水墨关山，与游戏内「武将卡 = 宣纸底 + 鎏金边 + 暗褐墨字」
      的暖色材质不搭。这一版整套翻回宣纸暖色系：
      · 底：暖色宣纸水墨远山图（顶部装饰、下方留白）+ 纸纹兜底
      · 卡：直接复用 .hero-card 配方（cream 渐变 + --tex-paper + 鎏金边）
      · 字：暗铜鎏金（宣纸底上高对比）+ 鎏金双线卷轴外框
      规则一律 `.boot ` 前缀收口，不污染游戏内 UI。
   =================================================================== */
.boot{
  color:#3f2d14;
  background-color:#f0e2c2;
  background-image:
    radial-gradient(ellipse 62% 44% at 50% 42%,rgba(255,253,244,.66),rgba(255,253,244,0) 74%),
    linear-gradient(180deg,rgba(250,240,214,.26) 0%,rgba(250,240,214,.32) 56%,rgba(232,214,174,.56) 100%),
    url("../assets/ui/boot_paper.jpg"),
    var(--tex-paper);
  background-size:auto,cover,cover,300px 300px;
  background-position:center,center,center 26%,center;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  box-shadow:inset 0 0 120px rgba(120,84,30,.16),inset 0 0 34px rgba(120,84,30,.10)}
/* 卷轴装裱：鎏金双线外框（与武将卡的金边同族） */
.boot::before,.boot::after{content:'';position:absolute;pointer-events:none;border-radius:9px;z-index:0}
.boot::before{inset:14px;border:1px solid rgba(178,138,62,.52)}
.boot::after{inset:19px;border:1px solid rgba(178,138,62,.22)}
/* 竖屏（手机）：换竖构图底图 */
@media (orientation:portrait){
  .boot{background-image:
    radial-gradient(ellipse 76% 32% at 50% 36%,rgba(255,253,244,.58),rgba(255,253,244,0) 76%),
    linear-gradient(180deg,rgba(250,240,214,.22) 0%,rgba(250,240,214,.30) 56%,rgba(232,214,174,.54) 100%),
    url("../assets/ui/boot_paper_p.jpg"),
    var(--tex-paper);
    background-position:center,center,center 20%,center}
}
.boot .boot-inner{z-index:1;text-shadow:none}
.boot .boot-inner.hidden{z-index:0}

/* --- 标题：鎏金匾额（亮金渐层 + 暗铜描边，宣纸底上保证可读） --- */
.boot .boot-title{
  background-image:linear-gradient(180deg,#fff4cf 0%,#f0d27c 30%,#c69c3e 62%,#8a6520 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:none;
  -webkit-text-stroke:1.6px rgba(96,62,16,.90);
  text-shadow:0 2px 0 rgba(255,252,240,.55),0 3px 10px rgba(120,84,30,.26)}
.boot .boot-title::before,.boot .boot-title::after{
  background:linear-gradient(90deg,transparent,rgba(178,138,62,.40) 16%,rgba(150,110,45,.85) 50%,rgba(178,138,62,.40) 84%,transparent);
  box-shadow:none}
.boot .boot-sub{color:#7a6034;text-shadow:none}
.boot .boot-rule{
  background:linear-gradient(90deg,transparent,rgba(178,138,62,.45) 18%,rgba(150,110,45,.9) 50%,rgba(178,138,62,.45) 82%,transparent);
  box-shadow:none}
.boot .boot-rule::after{color:#a67c2c;background:#f2e6c8;text-shadow:none}

/* --- 入口卡：宣纸鎏金（= .hero-card 配方） --- */
.boot .entry-card{
  border:1px solid rgba(224,192,118,.55);
  background-image:linear-gradient(172deg,rgba(253,247,230,.94),rgba(243,228,193,.96)),var(--tex-paper);
  background-size:auto,260px 260px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 12px 28px rgba(120,84,30,.28),0 0 18px rgba(224,192,118,.12),inset 0 1px 0 rgba(255,240,200,.22)}
.boot .entry-card::after{content:'';position:absolute;inset:4px;border:1px solid rgba(196,156,78,.28);
  border-radius:12px;pointer-events:none;transition:border-color .18s}
.boot .entry-card:hover{border-color:#d8ab44;
  box-shadow:0 16px 34px rgba(120,84,30,.34),0 0 24px rgba(224,192,118,.24),inset 0 1px 0 rgba(255,240,200,.28)}
.boot .entry-card:hover::after{border-color:rgba(196,156,78,.5)}
.boot .entry-card::before{top:12%;bottom:12%;width:3px;
  background:linear-gradient(180deg,#f0d68c,#b8862c)}
.boot .ec-txt b{color:#3f2d14;text-shadow:none}
.boot .ec-txt i{color:#8a7350}
.boot .ec-arrow{color:#b8862c;opacity:.9;transition:transform .18s,opacity .18s}
.boot .entry-card:hover .ec-arrow{transform:translateX(3px);opacity:1}
.boot .ec-ico{background:radial-gradient(circle at 32% 28%,#fff6dc,#e6cf9a);
  border:1px solid rgba(178,138,62,.5);
  box-shadow:inset 0 1px 0 rgba(255,252,240,.85),0 2px 8px rgba(120,84,30,.24),0 0 16px rgba(224,192,118,.18)}
.boot .ec-new .ec-ico{border-color:rgba(210,160,60,.62);
  box-shadow:inset 0 1px 0 rgba(255,252,240,.85),0 2px 8px rgba(120,84,30,.24),0 0 20px rgba(224,180,80,.30)}
.boot .ec-old .ec-ico{background:radial-gradient(circle at 32% 28%,#eaf2fd,#bcd0ea);
  border-color:rgba(110,150,210,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 8px rgba(70,100,150,.24),0 0 20px rgba(120,160,220,.24)}

/* --- 续玩卡 --- */
.boot .entry-resume{
  border-color:rgba(196,156,78,.5);
  background-image:linear-gradient(168deg,rgba(253,247,230,.95),rgba(243,228,193,.96)),var(--tex-paper);
  background-size:auto,260px 260px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 10px 26px rgba(120,84,30,.26),inset 0 1px 0 rgba(255,242,206,.24)}
.boot .er-face{background:#f2e6c8;border-color:rgba(196,156,78,.55);box-shadow:0 3px 10px rgba(120,84,30,.24)}
.boot .er-name{color:#4a3418;text-shadow:none}
.boot .er-desc,.boot .er-forget{color:#8a7350}
.boot .er-forget:hover{color:#c0502e}

/* --- 表单卡：宣纸 + 鎏金双线 + 卷轴角标 --- */
.boot .boot-form{
  border:1px solid rgba(224,192,118,.6);
  background-image:linear-gradient(172deg,rgba(253,247,230,.95),rgba(243,228,193,.97)),var(--tex-paper);
  background-size:auto,300px 300px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 20px 46px rgba(120,84,30,.26),inset 0 0 0 1px rgba(196,156,78,.16),inset 0 1px 0 rgba(255,242,206,.30)}
.boot .boot-form{position:relative}
.boot .boot-form::before,.boot .boot-form::after{
  content:'';position:absolute;width:16px;height:16px;pointer-events:none;
  border:1px solid rgba(178,138,62,.7)}
.boot .boot-form::before{left:7px;top:7px;border-right:none;border-bottom:none;border-radius:4px 0 0 0}
.boot .boot-form::after{right:7px;bottom:7px;border-left:none;border-top:none;border-radius:0 0 4px 0}

.boot .boot-input{
  color:#3f2d14;border-color:rgba(196,156,78,.45);
  background-image:linear-gradient(180deg,#fffdf6,#f7efd8);
  box-shadow:inset 0 2px 6px rgba(120,84,30,.20),inset 0 0 0 1px rgba(224,192,118,.22);
  text-shadow:none}
.boot .boot-input:focus{border-color:#c99b3a;
  box-shadow:inset 0 2px 6px rgba(120,84,30,.18),0 0 0 3px rgba(224,192,118,.22),0 0 18px rgba(224,192,118,.30)}
.boot .boot-input::placeholder{color:#a99770}
.boot .boot-input.sm{color:#4a3418}
/* 表单里的输入框：比入口屏的服务器框更宽一点，桌面端更稳、手机端自适应 */
.boot .boot-form .boot-input{width:min(320px,82vw)}

/* --- 标题栏 / 返回 / 步骤 --- */
.boot .bf-title{
  background-image:linear-gradient(180deg,#7a5620 0%,#5f4112 58%,#8a6520 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:none;
  text-shadow:0 1px 0 rgba(255,252,240,.55)}
.boot .bf-sub{color:#7a6034}
.boot .bf-srv{color:#8a7350}
.boot .bf-srv b{color:#6b4d1c}
.boot .bf-note{color:#8a7350}
.boot .bf-note b{color:#a67c2c}
.boot .bf-back{
  color:#5a431f;
  background-image:linear-gradient(180deg,rgba(255,252,240,.94),rgba(246,232,198,.96)),var(--tex-wood);
  background-size:auto,240px 240px;
  border-color:rgba(178,138,62,.55);
  box-shadow:0 3px 10px rgba(120,84,30,.24),inset 0 1px 0 rgba(255,252,240,.75)}
.boot .bf-back:hover{color:#2b1c05;border-color:#c99b3a;
  background-image:linear-gradient(180deg,#f7e6b4,#e0c074)}
.boot .bf-step{color:#6b4d1c;border-color:rgba(178,138,62,.5);
  background-image:linear-gradient(180deg,rgba(255,252,240,.92),rgba(246,232,198,.94)),var(--tex-wood);
  background-size:auto,240px 240px;
  box-shadow:0 3px 10px rgba(120,84,30,.2),inset 0 1px 0 rgba(255,252,240,.75)}

/* --- 势力军旗卡 --- */
.boot .force-card{
  border:1px solid rgba(224,192,118,.4);
  background-image:linear-gradient(172deg,rgba(253,247,230,.94),rgba(243,228,193,.96)),var(--tex-paper);
  background-size:auto,260px 260px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 10px 24px rgba(120,84,30,.24),inset 0 1px 0 rgba(255,240,200,.22)}
.boot .force-card::before{border-color:rgba(196,156,78,.30)}
.boot .force-card.sel{border-color:#c99b3a;
  box-shadow:0 14px 30px rgba(120,84,30,.30),0 0 26px rgba(224,192,118,.36),inset 0 0 24px rgba(224,192,118,.12)}
.boot .force-card.sel::before{border-color:rgba(196,156,78,.6)}
.boot .fc-name{color:#4a3418;text-shadow:none}
.boot .fc-desc{color:#8a7350}
.boot .fc-desc b{color:#a67c2c!important}
.boot .force-wei .fc-char .ico{filter:drop-shadow(0 0 10px rgba(110,160,230,.32)) drop-shadow(0 2px 4px rgba(120,84,30,.30))}
.boot .force-shu .fc-char .ico{filter:drop-shadow(0 0 10px rgba(120,200,110,.32)) drop-shadow(0 2px 4px rgba(120,84,30,.30))}
.boot .force-wu .fc-char .ico{filter:drop-shadow(0 0 10px rgba(235,140,110,.32)) drop-shadow(0 2px 4px rgba(120,84,30,.30))}
.boot .force-qun .fc-char .ico{filter:drop-shadow(0 0 10px rgba(230,190,90,.32)) drop-shadow(0 2px 4px rgba(120,84,30,.30))}

/* --- 立绘选择 --- */
.boot .ba-title{color:#6b4d1c;text-shadow:none}
.boot .av-cell{background:#f7efd8;border-color:rgba(224,192,118,.42)}
.boot .av-cell:hover{border-color:#c99b3a;box-shadow:0 6px 16px rgba(120,84,30,.26),0 0 12px rgba(224,192,118,.25)}
.boot .av-cell.sel{border-color:#c99b3a;outline-color:rgba(224,192,118,.6);
  box-shadow:0 0 12px rgba(224,192,118,.5),0 6px 16px rgba(120,84,30,.26)}

/* --- 状态条 / 提示 --- */
.boot .boot-status{color:#7a6034;text-shadow:none}
.boot .boot-status.ok{color:#3f8f5e}
.boot .boot-status.bad{color:#c0502e}
.boot .boot-tip{color:#6f5a33}
.boot .boot-srv{color:#8a7350}
.boot .boot-srv .boot-input.sm{color:#4a3418}

/* --- 续玩中的转圈 --- */
.boot .br-ring{border-color:rgba(196,156,78,.22);border-top-color:#c99b3a;
  box-shadow:0 0 18px rgba(224,192,118,.22)}

/* --- 按钮：金按钮在宣纸底上加深一档；次按钮换米纸木纹 --- */
.boot .btn-gold{
  background-image:linear-gradient(180deg,#f6e0a0 0%,#d8ae4e 46%,#9c742a 100%);
  border-color:#fff0c4;color:#2b1c05;
  box-shadow:inset 0 1px 0 rgba(255,252,235,.78),inset 0 -2px 0 rgba(80,52,8,.5),0 3px 0 #6b511f,0 6px 16px rgba(120,84,30,.32)}
.boot .btn-gold:hover{background-image:linear-gradient(180deg,#fdebab 0%,#e0b656 46%,#a87c2e 100%);
  box-shadow:inset 0 1px 0 rgba(255,252,235,.88),0 3px 0 #6b511f,0 8px 20px rgba(120,84,30,.35)}
.boot .btn-gold:active{box-shadow:inset 0 2px 7px rgba(70,44,6,.5)}
.boot .btn:not(.btn-gold){
  color:#5a431f;border-color:rgba(178,138,62,.55);
  background-image:linear-gradient(180deg,rgba(255,252,240,.94),rgba(246,232,198,.96)),var(--tex-wood);
  background-size:auto,240px 240px;
  box-shadow:inset 0 1px 0 rgba(255,252,240,.78),0 2px 8px rgba(120,84,30,.22)}
.boot .btn:not(.btn-gold):hover{color:#2b1c05;border-color:#c99b3a;
  background-image:linear-gradient(180deg,#f7e6b4,#e0c074)}

/* --- 服务器行：容器是 flex 项，默认 flex-start 会左贴边（窄屏更明显）→ 居中 --- */
.boot .boot-srv{justify-content:center}

/* ===================================================================
   21. 启动页 · 窄屏横向收敛（2026-10-16）
   —— 实测 390×844：`.boot-inner` 被 nowrap 标题撑到 448+28=476px，
      超出视口 → 标题/底部提示/服务器行左右各被切 ~43px。
      标题含空格共 9 个字形，宽度≈9×(字号+字距)。这里按视口收敛。
   =================================================================== */
@media (max-width:560px){
  .boot .boot-inner{max-width:100%;padding:12px}
  .boot .boot-title{
    font-size:clamp(24px,7vw,32px);
    letter-spacing:clamp(2px,1.2vw,8px);
    text-indent:0;padding:6px 10px 8px}
  .boot .boot-title::before,.boot .boot-title::after{left:2%;right:2%}
  .boot .boot-tip{font-size:11px;line-height:1.85;padding:0 2px}
  .boot .boot-sub{letter-spacing:8px;text-indent:8px}
}