/* ============================================================================
 * H5 单屏模式（body.h5-app）
 *   —— 登录后整页锁定一屏：不滚动，舞台吃掉剩余高度，底部固定一排图标按钮。
 *      技能 / 药水 / 属性·背包·BOSS / 更多（挂机·倍速·回城·逃跑·日志）全部走底部抽屉。
 * ==========================================================================*/

body.h5-app{overflow:hidden!important;height:100vh!important}
/* 站点顶栏（nav.site-nav）占掉 36px，再把 #game 写成 100vh 就等于整页溢出 36px：
   底部图标栏压在内容上、战斗操作条被压在栏下面看不全。扣掉顶栏真实高度。 */
body.h5-app #game{height:calc(100vh - var(--h5TopH,36px))!important;max-width:680px!important;margin:0 auto!important;
  padding:6px 8px var(--h5DockPad,60px)!important;
  display:flex!important;flex-direction:column!important;overflow:hidden!important;box-sizing:border-box}

/* 顶栏压缩：一屏里最贵的就是 HUD */
body.h5-app .hud{flex:0 0 auto!important;padding:6px 8px!important;gap:4px 6px!important}
body.h5-app .hud .ava{width:32px!important;height:40px!important}
body.h5-app .hud .ava img{width:28px!important;height:36px!important}
body.h5-app .hud .hud-id .nm{font-size:12.5px!important}
body.h5-app .hud .hud-id .cl{font-size:9.5px!important}
body.h5-app .hud .hud-bars{gap:3px!important}
body.h5-app .hud .hud-bars .bar .track{height:7px!important}
body.h5-app .hud .hud-bars .bar .k{flex:0 0 26px!important;width:26px!important;font-size:9px!important}
body.h5-app .hud .hud-bars .bar .v{min-width:54px!important;font-size:9px!important}
body.h5-app .hud .hud-meta{font-size:9.5px!important;gap:2px 8px!important}
body.h5-app .hud .hud-tools .tb-btn{padding:4px 6px!important;font-size:10px!important}

/* 练功区压成一行 */
body.h5-app .layout-v10{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;
  min-height:0!important;overflow:hidden!important}
body.h5-app .center-col{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;min-height:0!important}
body.h5-app .area-strip{flex:0 0 auto!important;padding:5px 8px 6px!important}
body.h5-app .area-strip .box-head{padding:0 0 4px!important}
body.h5-app .area-strip-list{padding:1px 16px 1px 0!important}
body.h5-app .area-strip-list .area{padding:4px 7px!important;font-size:10.5px!important}

/* 战斗面板：舞台吃掉剩余高度 */
body.h5-app .ctabs{display:none!important}
body.h5-app .logmini{display:none!important}
body.h5-app #cPaneBattle{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;
  min-height:0!important;margin-top:6px!important}
body.h5-app .box-stage{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;
  min-height:0!important;padding:6px 8px!important;overflow:hidden!important}
body.h5-app .stage-head{flex:0 0 auto!important;padding-bottom:4px!important}
body.h5-app .stage-head h3{font-size:11.5px!important}
body.h5-app .stage-head .stage-head-r{font-size:9.5px!important;line-height:1.35!important}
body.h5-app .stage{flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important}
body.h5-app .stage .fighter{max-width:47%!important}

/* 安全区：舞台上只有角色一个人，3D 立绘按舞台高度吃满，别再留一整块空地 */
body.h5-app .stage.city-mode,
body.h5-app .stage:has(#figM[style*="display: none"]){align-items:stretch!important;justify-content:center!important}
body.h5-app .stage.city-mode #figP,
body.h5-app .stage:has(#figM[style*="display: none"]) #figP{align-self:stretch!important;flex:1 1 auto!important;max-width:none!important}
body.h5-app .stage.city-mode #fig3d.is-3d,
body.h5-app .stage:has(#figM[style*="display: none"]) #fig3d.is-3d{flex:1 1 auto!important;height:auto!important;min-height:0!important;
  width:auto!important;max-width:100%!important;aspect-ratio:210/250!important;align-self:center!important}

/* 日志 / 快捷功能 页签撑满剩余高度（只在它们自己可见时生效，不能强制 display） */
body.h5-app #cPaneLog,body.h5-app #cPaneFunc{flex:1 1 auto!important;min-height:0!important;
  margin-top:6px!important;overflow:hidden!important}
body.h5-app #cPaneLog .box,body.h5-app #cPaneFunc .box{flex:1 1 auto!important;display:flex!important;
  flex-direction:column!important;min-height:0!important}
body.h5-app #cPaneLog .log{flex:1 1 auto!important;max-height:none!important;min-height:0!important;overflow-y:auto!important}

/* 这些在单屏模式下默认收起，只从抽屉出来（.dock-c 本身不隐藏，否则里面的技能栏出不来） */
body.h5-app .dock-c{display:block!important;position:static!important;margin:0!important;padding:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;height:auto!important}
body.h5-app .actions{display:none!important}
body.h5-app .skbar{display:none!important}
body.h5-app .psub{display:none!important}
body.h5-app .side-col{display:none!important}
body.h5-app #verChip{display:none!important}

/* ---------- 底部图标栏 ---------- */
#h5Dock{position:fixed;left:0;right:0;bottom:0;z-index:920;display:flex!important;
  justify-content:space-around;align-items:stretch;gap:2px;max-width:680px;margin:0 auto;
  padding:3px 4px 5px!important;
  background:rgba(12,10,18,.97);border-top:1px solid rgba(232,198,106,.22);
  box-shadow:0 -6px 18px rgba(0,0,0,.45)}
#h5Dock .dbtn{flex:1 1 0;min-width:0;min-height:46px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:1px;padding:4px 0 3px;background:none;border:0;color:#9a93b5;font-family:inherit;cursor:pointer;
  border-radius:8px;transition:.15s}
#h5Dock .dbtn:active{background:rgba(232,198,106,.12)}
#h5Dock .dbtn .di{font-size:20px;line-height:1.02}
#h5Dock .dbtn .dl{font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%;color:inherit}
#h5Dock .dbtn.on{color:#e8c66a;background:rgba(232,198,106,.12)}
#h5Dock .dbtn.atk{color:#f0b86a}
#h5Dock .dbtn.atk:active{background:rgba(240,184,106,.16)}

/* ---------- 底部抽屉 ---------- */
#h5Mask{position:fixed;left:0;right:0;top:0;bottom:0;z-index:880;display:none;
  background:rgba(0,0,0,.55)}
body.sheet-on #h5Mask{display:block}

body.h5-app .skbar.h5-sheet-box,
body.h5-app .psub.h5-sheet-box,
body.h5-app .actions.h5-sheet-box,
body.h5-app #h5More.h5-sheet-box{display:flex!important;flex-wrap:wrap!important;align-content:flex-start!important}
body.h5-app .side-col.h5-sheet-box{display:flex!important;flex-direction:column!important}

.h5-sheet-box{position:fixed!important;left:0;right:0!important;bottom:var(--h5SheetBottom,62px)!important;top:auto!important;z-index:900!important;
  max-width:680px!important;margin:0 auto!important;
  max-height:min(86vh,calc(100vh - 66px))!important;overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;
  background:#14111c!important;border:1px solid rgba(232,198,106,.22)!important;
  border-radius:14px 14px 0 0!important;padding:10px!important;
  box-shadow:0 -10px 30px rgba(0,0,0,.55)!important}
body.h5-app .skbar.h5-sheet-box{gap:6px!important}
body.h5-app .skbar.h5-sheet-box .skchip{flex:0 0 calc(33.333% - 4px)!important}
body.h5-app .psub.h5-sheet-box .pbtn{flex:0 0 calc(25% - 5px)!important}
body.h5-app .psub.h5-sheet-box .swchip{flex:0 0 calc(50% - 3px)!important}

/* 更多抽屉里的按钮（JS 生成） */
/* 「更多」抽屉：战斗操作 4 块 + 功能入口 8 块 + 日志一条，全部一屏放完、不需要滚。
   功能入口是方块磁贴（图标上、文字下），不是原先那种被拉扁的通栏长条。 */
#h5More .msec{flex:0 0 100%!important;width:100%!important;margin:0 0 8px}
#h5More .mtitle{width:100%!important;font-size:11px;color:#9a93b5;margin:2px 0 6px;text-align:left;letter-spacing:.5px}
#h5More .mgrid{display:grid!important;gap:6px!important;width:100%!important}
#h5More .mgrid.mg2{grid-template-columns:repeat(2,1fr)!important}
#h5More .mgrid.mg4{grid-template-columns:repeat(4,1fr)!important}
#h5More .mbtn{display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-width:0;min-height:54px;padding:7px 3px!important;border-radius:10px!important;
  border:1px solid var(--line,rgba(232,198,106,.2));background:var(--panel2,#1b1726);color:var(--txt,#eee);
  font-family:inherit;cursor:pointer;text-align:center;transition:.15s}
#h5More .mbtn:active{background:rgba(232,198,106,.14);border-color:rgba(232,198,106,.5)}
#h5More .mbtn b{font-size:20px;line-height:1.05;font-weight:400}
#h5More .mbtn s{font-size:11px;line-height:1.25;text-decoration:none;color:#cfc9df;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#h5More .mwide{flex:0 0 100%!important;width:100%!important;min-height:42px;padding:10px!important;
  border-radius:10px!important;border:1px solid var(--line,rgba(232,198,106,.2));
  background:var(--panel2,#1b1726);color:var(--txt,#eee);font:600 12.5px/1.3 inherit;cursor:pointer}
#h5More .mwide:active{background:rgba(232,198,106,.14)}

/* ---------- 功能弹窗（副本/爬塔/竞技/世界B/组队/拍卖/商城/许愿/存档/战绩）----------
   原来 .modal-mask 是 z-index:100，比底部图标栏(920)和抽屉(900)都低：
   弹窗一开，底部栏就压在弹窗的「关闭」按钮上，手机上点不到 ⇒ 表现为「打开就关不掉」。
   这里把弹窗抬到最上层，卡片限高并且自己可滚，右上角再挂一个常驻 ✕。 */
.modal-mask{position:fixed!important;inset:0!important;z-index:960!important;padding:8px!important;
  align-items:center!important;justify-content:center!important}
.modal-mask.show{display:flex!important}
.modal-mask .modal-card{max-height:calc(100vh - 16px)!important;overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-top:34px!important}
.modal-mask .modal-card>button.mini[onclick]{min-height:40px!important}
.h5-mx{position:absolute!important;top:10px;right:10px;z-index:3;
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(232,198,106,.45);
  background:rgba(20,17,28,.9);color:#e8c66a;font:600 15px/1 inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.h5-mx:active{background:rgba(232,198,106,.22)}

/* ---------- 装备强化光效（角色脚下光环 + 柔光，按最高强化等级分档）----------
   网页版原来强化 +1~+15 只有文字与数值，3D 舞台一点变化都没有。
   这里不引入新资源，用 CSS 径向渐变 + 环形脉冲按档位表现：
   +5 起微蓝、+8 亮蓝、+11 金、+13 起炽金偏红。 */
#h5Glow{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  width:220px;height:160px;pointer-events:none;z-index:2}
#h5Glow i{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);display:block;border-radius:50%}
#h5Glow .g-aura{width:168px;height:168px;opacity:var(--gi,0);
  background:radial-gradient(circle,rgba(var(--gc,232,198,106),.55) 0%,rgba(var(--gc,232,198,106),.16) 42%,rgba(var(--gc,232,198,106),0) 70%);
  filter:blur(5px);animation:gAura 3s ease-in-out infinite}
#h5Glow .g-ring{width:150px;height:46px;border:2px solid rgba(var(--gc,232,198,106),.75);
  box-shadow:0 0 18px rgba(var(--gc,232,198,106),.55),inset 0 0 14px rgba(var(--gc,232,198,106),.35);
  opacity:var(--gi,0);animation:gRing 2.6s ease-in-out infinite}
#h5Glow .g-ring2{width:96px;height:30px;border:1px solid rgba(var(--gc,232,198,106),.55);
  opacity:var(--gi,0);animation:gRing 2.6s ease-in-out infinite .5s}
/* 档位 → 颜色与强度（data-band 由 JS 每 0.7 秒同步一次）
   配色照 PC 原版 ZzzObject.cpp 10600-10680：+3 红 / +5 蓝 / +7 银白 / +9 亮银 / +13 炽金。
   原来 1~3 档都是蓝色系（+3 也显示成蓝），和原版对不上。 */
#h5Glow[data-band="0"]{--gi:0}
#h5Glow[data-band="1"]{--gc:240,90,80;--gi:.18}
#h5Glow[data-band="2"]{--gc:110,160,255;--gi:.32}
#h5Glow[data-band="3"]{--gc:215,235,255;--gi:.48}
#h5Glow[data-band="4"]{--gc:255,214,112;--gi:.66}
#h5Glow[data-band="5"]{--gc:255,236,190;--gi:.9}
@keyframes gAura{0%,100%{transform:translate(-50%,-50%) scale(.94)}50%{transform:translate(-50%,-50%) scale(1.06)}}
@keyframes gRing{0%,100%{transform:translate(-50%,-50%) scale(.92)}50%{transform:translate(-50%,-50%) scale(1.06)}}

/* 强化成功/失败瞬间的整屏闪光（不挡点击） */
#h5Fx{position:fixed;inset:0;pointer-events:none;z-index:950}
#h5Fx.fx-ok{background:radial-gradient(circle at 50% 62%,rgba(255,232,170,.55),rgba(255,232,170,0) 62%);
  animation:fxFlash .7s ease-out}
#h5Fx.fx-fail{background:radial-gradient(circle at 50% 62%,rgba(255,86,86,.45),rgba(255,86,86,0) 60%);
  animation:fxFlash .7s ease-out}
@keyframes fxFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* ---------- 战斗日志：不许占主屏 ----------
   页面原本是 setCenterTab('log') 把整块日志页换成主栏内容，舞台上下一缩到底、
   底部图标栏还压在日志上，看着就像「一点日志整个页面就废了」。
   单屏模式下日志只做抽屉：不参与主栏布局，点开时贴底弹出，日志区自己滚。 */
body.h5-app #cPaneLog{display:none!important}
body.h5-app #cPaneLog.h5-sheet-box{display:flex!important;flex-direction:column!important;
  height:min(74vh,calc(100vh - 84px))!important;max-height:min(74vh,calc(100vh - 84px))!important;
  padding:10px 10px 8px!important;overflow:hidden!important}
body.h5-app #cPaneLog .box-log{margin:0!important;border:0!important;background:transparent!important;
  box-shadow:none!important;display:flex!important;flex-direction:column!important;min-height:0!important;
  flex:1 1 auto!important;padding:0!important}
body.h5-app #cPaneLog .box-log .box-head{flex:0 0 auto!important;margin:0 0 6px!important}
body.h5-app #cPaneLog #log{flex:1 1 auto!important;min-height:0!important;height:auto!important;
  max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;
  touch-action:pan-y!important;font-size:12px!important;line-height:1.55!important}
body.h5-app #cPaneLog #log::-webkit-scrollbar{width:4px}
body.h5-app #cPaneLog #log::-webkit-scrollbar-thumb{background:rgba(232,198,106,.55);border-radius:2px}

/* ---------- 练功区：19 个区域挤成一行横向 chip 在手机上是看不清也点不准的。
   改成「当前区域 + 切换」一条，点开抽屉里 3 列区域网格（等级/锁定状态一目了然）。 ---------- */
body.h5-app .area-strip{padding:7px 9px!important;margin:0!important}
body.h5-app .area-strip .box-head{display:none!important}
body.h5-app .area-strip-list{display:none!important}
#h5AreaBar{display:flex;align-items:center;gap:8px;width:100%;min-height:42px;padding:7px 11px!important;
  border:1px solid rgba(232,198,106,.24)!important;border-radius:10px!important;background:#1b1726!important;
  color:#e9e4f4;font:600 13px/1.25 inherit;cursor:pointer;text-align:left}
#h5AreaBar:active{background:#241f33!important}
#h5AreaBar .ab-i{font-size:16px;line-height:1}
#h5AreaBar .ab-n{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#h5AreaBar .ab-lv{font:400 11px/1 inherit;color:#9a93b5}
#h5AreaBar .ab-go{font-size:12px;color:#e8c66a;white-space:nowrap}

#h5AreaSheet{display:none;padding:10px!important}
#h5AreaSheet.h5-sheet-box{display:block!important}
#h5AreaSheet .ah{font:600 13px/1.2 inherit;color:#e8c66a;margin:2px 0 10px;text-align:left}
#h5AreaSheet #areaList{display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;width:100%!important;max-height:none!important;overflow:visible!important;
  flex-wrap:nowrap!important;padding:0!important}
#h5AreaSheet .area{display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:60px;min-width:0;padding:8px 4px!important;border-radius:10px!important;
  border:1px solid rgba(232,198,106,.2)!important;background:#1b1726!important;color:#dbd5ea;
  font:600 12px/1.2 inherit;cursor:pointer;text-align:center}
#h5AreaSheet .area.active{border-color:#e8c66a!important;background:rgba(232,198,106,.16)!important;color:#ffe9a8}
#h5AreaSheet .area .an{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:12px}
#h5AreaSheet .area .alv{font:400 11px/1 inherit;color:#9fe3b6}
#h5AreaSheet .area .lk{font:400 11px/1 inherit;color:#8c86a2}
#h5AreaSheet .area.locked{opacity:.55}

/* ---------- 数据型抽屉（属性 / 装备 / 背包 / BOSS）----------
   数据面板内容比屏还高：如果整块抽屉一起滚，顶部的四个页签会被滚走，
   滚到一半想换面板就得先滚回顶部 —— 手机上这点最容易「划不动」。
   所以页签钉在顶部不动，只有下面的内容区滚动，并给出惯性滚动与金色细滚动条。 */
body.h5-app .side-col.h5-sheet-box{display:flex!important;flex-direction:column!important;
  overflow:hidden!important;padding:8px 10px 8px!important}
body.h5-app .side-col.h5-sheet-box .side-nav{display:none!important}
/* 角色抽屉顶部的「属性 / 装备」两栏：一级入口，不再是藏在功能抽屉里的二级磁贴 */
#h5RoleTabs{display:flex;flex:0 0 auto!important;gap:8px;padding:2px 40px 8px 0;position:relative;z-index:2;box-sizing:border-box}
#h5RoleTabs button{flex:1 1 0;min-height:36px;border-radius:9px;border:1px solid #3a3357;
  background:rgba(28,24,44,.92);color:#b7acd6;font:600 13px/1 inherit;cursor:pointer}
#h5RoleTabs button.on{background:linear-gradient(180deg,#4b3f7a,#2d2749);border-color:#8d76d8;color:#f2e9c8}
body.h5-app .side-col.h5-sheet-box .side-pane-v10{flex:1 1 auto!important;min-height:0!important;
  height:auto!important;max-height:none!important;margin:0!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;
  touch-action:pan-y!important;padding:0 3px 14px 0!important}
body.h5-app .side-col.h5-sheet-box .side-pane-v10::-webkit-scrollbar{width:4px}
body.h5-app .side-col.h5-sheet-box .side-pane-v10::-webkit-scrollbar-thumb{
  background:rgba(232,198,106,.55);border-radius:2px}
body.h5-app .side-col.h5-sheet-box .side-pane-v10::-webkit-scrollbar-track{background:transparent}
/* 触控友好：属性加减点从 26px 放大到 34px，手指点得准 */
body.h5-app .side-col.h5-sheet-box .plus{min-width:34px!important;min-height:34px!important;
  font-size:14px!important;line-height:1!important}

/* 抽屉抓手：竖向拖一下就能关，不用去找遮罩 */
.h5-handle{flex:0 0 auto!important;order:-99!important;width:100%;height:18px;min-height:18px;align-self:stretch;
  display:flex;align-items:center;
  justify-content:center;cursor:grab;touch-action:none;margin:-4px 0 2px}
.h5-handle i{display:block;width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.3)}

/* 战斗操作条：自动挂机 / 倍速 / 回城 / 逃跑 直接摆在战斗区（舞台正下方），
   不再藏进「功能」抽屉 —— 挂机、改倍速是每一场战斗都要摸的东西。 */
body.h5-app #h5BattleOps{display:flex;gap:6px;margin:8px 0 0;flex:0 0 auto}
body.h5-app #h5BattleOps button{flex:1 1 0;min-width:0;min-height:38px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;gap:4px;
  background:rgba(30,26,44,.86);color:#e8dcc4;
  border:1px solid rgba(232,198,106,.28);border-radius:8px;
  font-size:12px;line-height:1;white-space:nowrap}
body.h5-app #h5BattleOps button i{font-style:normal;font-size:14px;line-height:1}
body.h5-app #h5BattleOps button.on{border-color:rgba(232,198,106,.85);
  background:rgba(90,68,26,.85);color:#ffe9b0}
body.h5-app #h5BattleOps button:active{transform:translateY(1px)}
body.h5-app #h5BattleOps.bops-hide{display:none!important}

/* 抽屉右上角的常驻关闭键：数据面板能占 86vh，遮罩几乎被盖满，
   只靠抓手下拉不是所有人都知道，给一个看得见的 ✕ */
#h5SheetX{position:fixed;z-index:960;display:none;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;padding:0;
  background:rgba(20,17,28,.92);border:1px solid rgba(232,198,106,.55);color:#e8c66a;
  font:400 16px/1 inherit;cursor:pointer}
#h5SheetX:active{background:rgba(232,198,106,.22)}

/* ---------- 战斗区：头像 + 等级 + 血条的对拼条 ----------
   原来玩家血条横贯半屏、怪物血条被挤成小条、中间浮着一个 ⚔️；
   头像、名字、等级、血量分散在四个地方（HUD / 立绘下方 / 血条尾巴）。
   现在收成一条：左「头像+Lv」+「名字 / 血量 / 绿条」，中间 VS，右「红条 / 名字·血量 / 头像+Lv」。 */
#h5Vs{position:absolute;top:0;left:0;right:0;z-index:25;display:flex;align-items:center;gap:6px;
  padding:5px 6px 6px;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,16,.96) 0%,rgba(10,8,16,.86) 78%,rgba(10,8,16,0) 100%)}
#h5Vs.vs-hide{display:none!important}
#h5Vs .vsl,#h5Vs .vsr{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:7px}
#h5Vs .vside{flex:1 1 auto;min-width:0}
#h5Vs .vtop{display:flex;align-items:baseline;justify-content:flex-end;gap:5px;
  font:600 11.5px/1.2 inherit;color:#f2e9d2;margin-bottom:3px}
#h5Vs .vsr .vtop{justify-content:flex-start}
#h5Vs .vtop b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#h5Vs .vtop .vv{font:400 10px/1 inherit;color:#9fe3bf;white-space:nowrap}
#h5Vs .vsr .vtop .vv{color:#f5a999}
#h5Vs .vbar{height:7px;border-radius:4px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);overflow:hidden}
#h5Vs .vfill{display:block;height:100%;width:100%;transition:width .16s ease;
  background:linear-gradient(90deg,#3fae74,#8fe3b0)}
#h5Vs .vsr .vbar{transform:scaleX(-1)}
#h5Vs .vsr .vfill{background:linear-gradient(90deg,#f0866a,#b23c34)}
/* 圆头像 + 右下角等级徽章 */
#h5Vs .vface{position:relative;flex:0 0 38px;width:38px;height:38px;border-radius:50%;
  overflow:visible;background:#1a1526;border:1px solid rgba(232,198,106,.4)}
#h5Vs .vface img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
#h5Vs .vface .vlv{position:absolute;right:-4px;bottom:-4px;min-width:17px;height:17px;
  padding:0 3px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font:700 9.5px/1 inherit;color:#1b1526;background:linear-gradient(180deg,#ffe9a8,#e8c66a);
  box-shadow:0 1px 3px rgba(0,0,0,.5)}
#h5Vs .vsr .vface{border-color:rgba(240,134,106,.45)}
#h5Vs .vsr .vface .vlv{background:linear-gradient(180deg,#ffc2b0,#e07a63)}
#h5Vs .vsmid{flex:0 0 26px;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;font:700 9.5px/1 inherit;color:#e8c66a;
  background:rgba(20,17,28,.92);border:1px solid rgba(232,198,106,.5);
  text-shadow:0 0 6px rgba(232,198,106,.5)}

/* 原来的两条分立血条 / 中栏 ⚔️ / 怪物血值文字都收进对拼条，避免重复 */
body.h5-app #cPaneBattle .stage .fhp{display:none!important}
body.h5-app #cPaneBattle .stage #vs{display:none!important}
body.h5-app #cPaneBattle .stage #monHpVal{display:none!important}
/* 立绘下面的名字/等级/血量全部撤掉：这三样对拼条里已经有了，再挂一份就是三处重复 */
body.h5-app #cPaneBattle .stage #figPName,
body.h5-app #cPaneBattle .stage #monName,
body.h5-app #cPaneBattle .stage #monLv{display:none!important}

/* 战斗时顶部 HUD 收起 HP 行：这一场的血量由对拼条负责，屏顶只保留 MP/EXP；
   回到安全区（没有怪物、对拼条隐藏）时 HP 行自动回来 */
body.h5-app.h5-inbattle .hud-bars .bar.hp{display:none!important}
/* 战斗时连「头像+昵称+职业」那一行也收起：头像、昵称、等级已经在舞台上的对拼条里，
   屏顶只留 MP / EXP / 金币 / 战力 / 同步这些「账号全局」信息，同一份身份不写两遍 */
body.h5-app.h5-inbattle .hud .hud-id{display:none!important}

/* HUD 资源行：窄屏原本把 .v 直接 display:none，蓝条/经验条只剩一根光条看不出剩余多少；
   这里把数值放回来（等宽字形、贴右侧），条收细到 7px，货币/战力胶囊压成同高，位数变化不再抖 */
@media (max-width:760px){
  body.h5-app .hud .hud-bars .bar{grid-template-columns:26px minmax(0,1fr) 82px!important;gap:7px}
  body.h5-app .hud .hud-bars .bar .v{display:block!important;width:82px;font-size:10px;text-align:right;
    color:#cfc7b8;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.h5-app .hud .hud-bars .bar .k{width:26px;font-size:9.5px;letter-spacing:.4px;color:#9a9284}
  body.h5-app .hud .hud-bars .bar .track{height:7px!important}
  body.h5-app .hud .hud-bars{gap:5px}
  body.h5-app .hud .hud-meta{gap:6px}
  body.h5-app .hud .hud-meta .zen,
  body.h5-app .hud .hud-meta .power-chip{min-height:22px;line-height:1.45;font-size:11px}
  body.h5-app .hud .hud-meta .power-chip{border-color:rgba(232,198,106,.5);cursor:pointer;
    background:linear-gradient(180deg,rgba(232,198,106,.16),rgba(232,198,106,.06))}
  body.h5-app .hud .hud-meta .power-chip:active{transform:scale(.97)}
  body.h5-app .hud .hud-meta .power-chip b{font-size:12px;color:#ffd978}
}

/* 战斗态 HUD：工具图标行保持在资源条下方，不做合并（试过并到同一行会把 HUD 撑到 112px） */

/* 3D 宿主原来带一层方形渐变底，进入安全区（只站一个人）时会露出一个矩形色块；
   改成只留脚下径向光，方块边就散了，战斗页两个人并排时也更干净 */
body.h5-app #cPaneBattle .stage #fig3d,
body.h5-app #cPaneBattle .stage #mon3d{
  background:radial-gradient(72% 44% at 50% 92%,rgba(146,116,228,.26) 0%,rgba(96,74,164,.10) 54%,rgba(10,8,18,0) 78%)!important}

/* 名字名牌：悬在各自模型上方居中，血条里只留给数值，名字再长也不会被数值挤掉 */
body.h5-app #cPaneBattle .stage .h5-np{position:absolute;top:56px;z-index:3;
  transform:translateX(-50%);width:max-content;max-width:52%;padding:3px 9px 4px;border-radius:10px;
  font:600 11px/1.35 inherit;color:#f4ecd8;letter-spacing:.3px;
  white-space:normal;word-break:break-word;text-align:center;overflow:visible;
  pointer-events:none;background:rgba(12,10,20,.82);border:1px solid rgba(232,198,106,.26);
  box-shadow:0 4px 12px rgba(0,0,0,.45);text-shadow:0 1px 2px rgba(0,0,0,.8)}
body.h5-app #cPaneBattle .stage .h5-np.l{left:25%}
body.h5-app #cPaneBattle .stage .h5-np.r{left:75%}
/* 模型头顶称号牌：名字下一层，底板是独立 SVG 素材（按 tier 换色），
   文字仍是真实 DOM，长称号可读、不依赖图片里的字。 */
body.h5-app #cPaneBattle .stage .h5-np .np-n{display:block;line-height:1.25}
body.h5-app #cPaneBattle .stage .h5-np .np-title{
  display:inline-flex;align-items:center;justify-content:center;gap:3px;
  margin:3px auto 0;padding:2px 13px 3px;min-height:17px;
  font:700 10px/1.2 inherit;letter-spacing:.6px;color:#ffe9b0;
  background:url("../img/titles/plate_3.svg") center/100% 100% no-repeat;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));white-space:nowrap;
}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-tier="0"]{
  background-image:url("../img/titles/plate_0.svg");color:#cdc6b8;font-weight:600;
}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-tier="1"]{
  background-image:url("../img/titles/plate_1.svg");color:#f4c48a;
}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-tier="2"]{
  background-image:url("../img/titles/plate_2.svg");color:#e6efff;
}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-tier="3"]{
  background-image:url("../img/titles/plate_3.svg");color:#ffe9a8;
}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-tier="4"]{
  background-image:url("../img/titles/plate_4.svg");color:#ffd9d0;text-shadow:0 0 6px rgba(255,120,80,.55)
}

/* 给对拼条让出高度，立绘整体下移，不再被条压住头顶 */
body.h5-app #cPaneBattle .stage{padding-top:66px!important}

/* 伤害数字：抬离血条区、字号收一档，同目标已合并成一个，不会再糊成一团 */
body.h5-app #cPaneBattle .stage .dmg{top:32%!important;font-size:17px!important;letter-spacing:.5px}
body.h5-app #cPaneBattle .stage .dmg.crit,
body.h5-app #cPaneBattle .stage .dmg.skill{font-size:21px!important}

/* 怪物也补一圈接地影，和玩家脚下的光环对称，别像悬在半空 */
body.h5-app #cPaneBattle .stage #mon3d{position:relative}
body.h5-app #cPaneBattle .stage #mon3d::after{content:'';position:absolute;left:50%;bottom:-6px;
  width:62%;height:16px;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(238,120,96,.28),rgba(238,120,96,0) 70%)}

/* ===== 战斗区合成一张卡 =====
   卡头 = 区域条 + 金币 / 同步绿点 / 📊💾退出（原屏顶 HUD 的一半）
   卡身 = 怪物强度行 + 对拼条（头像带经验环，HP / MP 数值压在条里，战力在 MP 下）
   卡脚 = 自动 / 倍速 / 回城 / 逃跑
   原屏顶 HUD 的另一半（HP 条 / EXP 条 / 身份行）在战斗态整体收起，避免同一条血显示两次 */

/* 区域条在屏顶整条收起，卡头里再出现 */
body.h5-app .area-strip{display:none!important}
/* 战斗态不再单独留一条状态带：数值都进了对拼条与卡头 */
body.h5-app .hud{display:none!important}

body.h5-app #cPaneBattle .stage-main{
  border-radius:14px!important;overflow:hidden!important;
  border-color:rgba(232,198,106,.22)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.34)!important}

/* ---- 卡头：区域名 + 金币 + 同步绿点 + 工具 ---- */
body.h5-app .stage-main>#h5AreaBar{
  width:100%!important;min-height:40px!important;gap:6px!important;
  border:0!important;border-bottom:1px solid rgba(255,255,255,.07)!important;border-radius:0!important;
  background:linear-gradient(180deg,rgba(232,198,106,.11),rgba(232,198,106,.03))!important;
  padding:8px 11px!important;font-size:13px!important;text-align:left}
body.h5-app #h5AreaBar .ab-n{flex:0 1 auto;min-width:0}
body.h5-app #h5AreaBar .zen{
  margin-left:auto;min-height:0!important;padding:2px 6px!important;border-radius:6px;
  font:600 11px/1.3 inherit;gap:2px}
body.h5-app #h5AreaBar .sync-dot{
  flex:0 0 9px;width:9px;height:9px;min-width:9px;min-height:0!important;padding:0!important;
  border-radius:50%;background:#37d67a;box-shadow:0 0 0 2px rgba(55,214,122,.16);
  font-size:0!important;color:transparent;overflow:hidden;text-indent:-99px}
body.h5-app #h5AreaBar .sync-dot.bad{background:#ff6b6b;box-shadow:0 0 0 2px rgba(255,107,107,.16)}
body.h5-app #h5AreaBar .hud-tools{display:flex;gap:3px;margin:0!important}
body.h5-app #h5AreaBar .tb-btn{min-height:22px;min-width:22px;padding:1px 4px;border-radius:5px;font-size:10px;line-height:1}
/* 切换地图：紧贴地图名后面的显式小按钮（原来只留一个 › 太隐晦） */
body.h5-app #h5AreaBar .ab-go{
  font-size:10.5px!important;line-height:1;min-height:20px;padding:1px 6px;margin-left:1px;
  display:inline-flex;align-items:center;gap:2px;white-space:nowrap;
  border:1px solid rgba(232,198,106,.5);border-radius:6px;
  background:rgba(232,198,106,.10);color:#f0d89a;text-decoration:none}
body.h5-app #h5AreaBar .ab-go::after{content:none!important}

/* ---- 卡身：怪物强度压成一条 ---- */
body.h5-app .stage-main .stage-head{
  padding:6px 11px 5px!important;border-bottom:1px solid rgba(255,255,255,.05)!important}
body.h5-app .stage-main .stage-head h3,
body.h5-app .stage-main .stage-head .hint{display:none!important}
body.h5-app .stage-main .stage-head-r{
  text-align:left!important;font-size:10.5px!important;color:#9a93b5!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- 对拼条：数值压进条里，MP 在 HP 下，战力在 MP 下 ---- */
body.h5-app #h5Vs{padding:6px 8px 7px}
body.h5-app #h5Vs .vside{display:flex;flex-direction:column;gap:3px;position:relative}
body.h5-app #h5Vs .vbar{height:14px;border-radius:7px}
body.h5-app #h5Vs .vtop{
  position:absolute;top:0;left:0;right:0;height:14px;margin:0!important;z-index:2;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  font:600 9.5px/1 inherit;color:#f7fff9;text-shadow:0 1px 2px rgba(0,0,0,.85)}
body.h5-app #h5Vs .vsr .vtop{justify-content:center;color:#fff4f0}
body.h5-app #h5Vs .vtop .vv{font:600 9.5px/1 inherit;color:inherit!important}
body.h5-app #h5Vs .vside .bar.mp{
  display:block!important;position:relative;margin:0!important;padding:0!important;
  grid-template-columns:none!important;height:14px}
body.h5-app #h5Vs .vside .bar.mp .k{display:none!important}
body.h5-app #h5Vs .vside .bar.mp .track{
  height:14px!important;border-radius:7px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);overflow:hidden}
body.h5-app #h5Vs .vside .bar.mp .fill{height:100%;background:linear-gradient(90deg,#3f6fd8,#8fb8ff)}
body.h5-app #h5Vs .vside .bar.mp .v{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:600 9.5px/1 inherit;color:#eff6ff;text-shadow:0 1px 2px rgba(0,0,0,.85)}
body.h5-app #h5Vs .vside .power-chip{
  align-self:flex-start;margin-left:8px!important;min-height:0!important;padding:0!important;border:0!important;background:none!important;
  font:600 9.5px/1.4 inherit;color:#ffd978;gap:3px}
body.h5-app #h5Vs .vside .power-chip b{font-size:10.5px}

/* 经验环：绕玩家头像一圈，不显示数值，鼠标移到头像上看 EXP */
body.h5-app #h5Vs .vsl .vface{pointer-events:auto}
body.h5-app #h5Vs .vsl .vface::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;z-index:0;
  background:conic-gradient(from 0deg,#c79bff 0 var(--xp,0%),rgba(255,255,255,.16) var(--xp,0%) 100%);
  box-shadow:0 0 7px rgba(185,140,255,.45),inset 0 0 0 1px rgba(0,0,0,.45)}
body.h5-app #h5Vs .vsl .vface img{position:relative;z-index:1}
body.h5-app #h5Vs .vsl .vface .vlv{z-index:2}
body.h5-app #h5Vs .vsl .vface::after{
  content:attr(data-xp);position:absolute;left:calc(100% + 9px);top:50%;transform:translateY(-50%);
  padding:3px 7px;border-radius:6px;white-space:nowrap;z-index:9;display:none;
  background:rgba(12,9,20,.95);border:1px solid rgba(185,140,255,.5);
  font:400 10px/1.3 inherit;color:#d9c8ff;pointer-events:none}
body.h5-app #h5Vs .vsl .vface:hover::after,
body.h5-app #h5Vs .vsl .vface:active::after{display:block}

/* ---- 卡脚：操作条并进同一张卡 ---- */
body.h5-app #h5BattleOps{
  margin:0!important;padding:7px 10px!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
  background:rgba(255,255,255,.02)!important}
/* ===== 同一块地面 + 打击反馈 =====
   两个 3D 舞台各是独立渲染器，但底板拉平成一片场地，视觉上就是一整块场；
   命中时中间一记爆点 + 整块场地轻震，让"打到了"这个动作有反馈 */
body.h5-app #cPaneBattle .stage::before{
  content:'';position:absolute;left:1%;right:1%;bottom:0;height:52%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 100%,rgba(150,120,230,.22) 0%,rgba(96,74,164,.10) 44%,rgba(10,8,18,0) 78%)}
body.h5-app #cPaneBattle #fig3d,
body.h5-app #cPaneBattle #mon3d,
body.h5-app #cPaneBattle #figP,
body.h5-app #cPaneBattle #figM{background:none!important}
#h5Impact{position:absolute;left:50%;top:46%;width:0;height:0;z-index:6;pointer-events:none}
#h5Impact::before{
  content:'';position:absolute;left:-110px;top:-110px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,246,214,.9) 0%,rgba(255,198,110,.45) 30%,rgba(255,150,60,0) 62%);
  opacity:0;transform:scale(.35)}
#h5Impact::after{
  content:'';position:absolute;left:-90px;top:-90px;width:180px;height:180px;border-radius:50%;
  border:2px solid rgba(255,228,160,.75);opacity:0;transform:scale(.3)}
#h5Impact.hit::before{animation:impFlash .28s ease-out}
#h5Impact.hit::after{animation:impRing .34s ease-out}
@keyframes impFlash{0%{opacity:0;transform:scale(.35)}16%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
@keyframes impRing{0%{opacity:.85;transform:scale(.3)}100%{opacity:0;transform:scale(1.25)}}
@keyframes stageShake{0%{transform:translate(0,0)}22%{transform:translate(-3px,2px)}46%{transform:translate(3px,-2px)}72%{transform:translate(-2px,1px)}100%{transform:none}}
body.h5-app #cPaneBattle .stage.shake{animation:stageShake .24s ease-out}
@media (prefers-reduced-motion:reduce){
  #h5Impact.hit::before,#h5Impact.hit::after{animation:none}
  body.h5-app #cPaneBattle .stage.shake{animation:none}
}
/* ===== 怪物属性改悬停标签 + 金币落到角色脚下 ===== */
/* 常驻的怪物强度行整条去掉，卡片直接进入对拼条 */
body.h5-app .stage-main .stage-head{display:none!important}
/* 卡头只剩同步绿点与工具，靠右对齐 */
body.h5-app #h5AreaBar .sync-dot{margin-left:auto}
/* 金币挂在玩家模型下方居中，不再占卡头 */
body.h5-app #cPaneBattle .stage>.zen{
  position:absolute;left:0;bottom:6px;width:50%;margin:0!important;z-index:5;
  display:flex;justify-content:center;align-items:center;pointer-events:none;
  font:600 11px/1.3 inherit}
body.h5-app #cPaneBattle .stage>.zen>*{pointer-events:none}
/* 怪物属性标签：悬停/点按怪物头像与身体时浮出 */
#h5MonTip{
  position:absolute;right:12px;top:58px;z-index:8;display:none;max-width:200px;
  padding:6px 9px;border-radius:8px;white-space:pre-line;
  background:rgba(14,11,22,.96);border:1px solid rgba(232,198,106,.38);
  box-shadow:0 8px 20px rgba(0,0,0,.5);
  font:400 10.5px/1.55 inherit;color:#cfc7e0;pointer-events:none}
#h5MonTip::after{
  content:'';position:absolute;right:26px;top:-5px;width:8px;height:8px;transform:rotate(45deg);
  background:rgba(14,11,22,.98);border-left:1px solid rgba(232,198,106,.38);border-top:1px solid rgba(232,198,106,.38)}
body.h5-app #h5Vs .vsr .vface{pointer-events:auto}
/* ===== 安全区（回城）复用同一张卡 ===== */
/* 顶部 HUD 与屏顶区域条彻底退场，两种状态都只有卡头 + 对拼条 + 舞台 + 卡脚 */
body.h5-app .hud{display:none!important}
body.h5-app .area-strip{display:none!important}
/* 安全区没有对手：只留玩家一侧，VS 圆章收起，条拉满整宽 */
body.h5-app #h5Vs.solo .vsr,
body.h5-app #h5Vs.solo .vs{display:none!important}
body.h5-app #h5Vs.solo .vsl{flex:1 1 auto}
body.h5-app #h5Vs.solo{padding:7px 9px 8px}
/* 舞台上方的对拼条是浮层，安全区给模型留出顶部空间，别让条压住头 */
body.h5-app.h5-city #cPaneBattle .stage{padding-top:62px}/* 安全区里名字就挂在模型头顶（对拼条只放数值） */
body.h5-app.h5-city #cPaneBattle .stage .h5-np.l{top:66px}
body.h5-app.h5-city #cPaneBattle .stage .h5-np.r{display:none!important}
/* 安全区：中间 VS 圆章也收起，条只属于玩家 */
body.h5-app #h5Vs.solo .vsmid{display:none!important}
/* ===== 自动 / 倍速 / 回城 贴到角色脚下左下角 ===== */
body.h5-app #h5BattleOps{
  position:absolute;left:9px;bottom:9px;z-index:7;
  display:flex!important;align-items:center;gap:5px;
  margin:0!important;padding:0!important;width:auto!important;
  background:none!important;border:0!important;box-shadow:none!important}
body.h5-app #h5BattleOps.bops-hide{display:none!important}
body.h5-app #h5BattleOps>button{
  min-height:26px!important;padding:2px 9px!important;border-radius:7px!important;
  font-size:10.5px!important;line-height:1.1;gap:3px;
  border:1px solid rgba(232,198,106,.35)!important;
  background:rgba(16,12,26,.82)!important;color:#f0e3c0!important;
  backdrop-filter:blur(4px)}
body.h5-app #h5BattleOps>button i{font-style:normal;font-size:11px;opacity:.9}
body.h5-app #h5BattleOps>button[data-b="auto"].on{border-color:rgba(120,220,160,.55)!important;color:#bff0d0!important}
/* 逃跑按钮移除 */
body.h5-app #h5BattleOps>button[data-b="flee"]{display:none!important}
/* 金币让到中间，别和这排按钮撞 */
body.h5-app #cPaneBattle .stage>.zen{bottom:40px}
/* ===== 安全区「出城」按钮：角色模型正下方 ===== */
body.h5-app #h5OutWrap{
  position:absolute;left:0;bottom:12px;width:50%;z-index:7;
  display:none;justify-content:center;pointer-events:none}
body.h5-app.h5-city #h5OutWrap{display:flex}
body.h5-app #h5Out{
  pointer-events:auto;min-height:30px;padding:4px 18px;border-radius:8px;
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid rgba(232,198,106,.55);
  background:linear-gradient(180deg,rgba(232,198,106,.22),rgba(232,198,106,.07));
  color:#f6e6bb;font:600 12px/1 inherit;letter-spacing:.5px}
body.h5-app #h5Out i{font-style:normal;font-size:13px}
body.h5-app #h5Out:active{transform:translateY(1px)}
/* 金币让到出城按钮上方 */
body.h5-app.h5-city #cPaneBattle .stage>.zen{bottom:52px}
/* 城内底部图标栏不再重复放「出城」（战斗态仍恢复成攻击） */
body.h5-app.h5-city #h5Dock .dbtn[data-k="atk"]{display:none!important}
/* ===== 单场景竞技场（一套 renderer / 一台相机，两个模型同场） ===== */
body.h5-arena #fig3d,body.h5-arena #mon3d{display:none!important}
body.h5-arena #cPaneBattle .stage{position:relative}
body.h5-arena #arena3d{
  position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:auto}
body.h5-arena #arena3d canvas{width:100%!important;height:100%!important;display:block}
/* ===== 登录 / 注册 / 建角界面：任何情况下都要能滚到创建按钮 ===== */
html body.auth-on{overflow-y:auto!important;height:auto!important;min-height:100%!important}
body.auth-on #auth{
  align-items:flex-start!important;justify-content:center!important;
  height:auto!important;min-height:calc(100vh - 58px)!important;max-height:none!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  padding:18px 12px 40px!important;box-sizing:border-box}
body.auth-on .auth-card{max-height:none!important;overflow:visible!important;margin:0 auto}
body.auth-on .auth-card #authForm{padding:0 18px 22px!important}
/* 窄屏职业格压紧：3 列仍放得下六个职业，不再被挤出画面 */
@media (max-width:560px){
  body.auth-on .class-grid{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
  body.auth-on .cls{padding:6px 4px!important}
  body.auth-on .cls .ico{height:34px!important}
  body.auth-on .cls .ico img{max-height:34px!important}
  body.auth-on .cls .nm{font-size:11.5px!important}
  body.auth-on .cls .ti{font-size:9.5px!important}
  body.auth-on .cls .st{font-size:9px!important}
  body.auth-on .auth-keyart img{height:104px!important}
}
/* 建角 / 注册态：收起主视觉与站点链接，让角色名 + 六职业 + 创建按钮一屏可见 */
body.auth-on #h5Dock{display:none!important}
body.auth-create .auth-keyart{display:none!important}
body.auth-create .auth-card .logo{padding:16px 18px 0!important}
body.auth-create .auth-logo{width:44px!important;height:44px!important;margin-bottom:2px!important}
body.auth-create .auth-card .logo h1{font-size:22px!important;margin:2px 0 0!important}
body.auth-create .auth-card .logo p{display:none!important}
body.auth-create .auth-links{display:none!important}
body.auth-create .auth-card #authForm{padding:10px 18px 18px!important}
body.auth-create .auth-card label{margin-top:8px!important}
body.auth-create .auth-card input{height:38px!important}
body.auth-create .class-grid{gap:6px!important;margin-top:6px!important}
body.auth-create .cls{padding:6px 4px!important}
body.auth-create .cls .ico{height:40px!important}
body.auth-create .cls .ico img{max-height:40px!important}
body.auth-create .cls .nm{font-size:12px!important}
body.auth-create .cls .ti{font-size:9.5px!important}
body.auth-create .cls .st{font-size:9px!important;line-height:1.25!important}
/* 任何时候只允许一种主界面在场：游戏态强制隐藏登录层，认证态强制隐藏游戏层 */
body.h5-app #auth{display:none!important}
body.auth-on #game{display:none!important}
body.h5-app #h5Dock{display:flex}
body.auth-on #h5Dock{display:none!important}
/* 更多抽屉/功能入口：未打开时必须彻底不占位。
   它是 append 到 body 末尾的普通块，游戏态靠 100vh 溢出裁剪看不见，
   一到可滚动的登录/注册页就整块摊在登录卡片下面（副本/爬塔/…+战斗日志）。
   这里给出基础隐藏，只有 openSheet('more') 加上 .h5-sheet-box 才显示。 */
#h5More{display:none!important}
body.sheet-on #h5More.h5-sheet-box{display:flex!important}
body.auth-on #h5More,
body.auth-on #h5Dock,
body.auth-on #h5SheetX,
body.auth-on #h5Mask{display:none!important}
/* 安全区只有玩家一个模型且居中：名牌必须跟到 50%，不能停在半屏的 25% */
body.h5-app.h5-city #cPaneBattle .stage .h5-np.l{left:50%}

/* ===== 真机一屏适配：动态视口 + 底部安全区 =====
  100vh 在带浏览器工具栏/手势条的真机上等于「大视口」，底部图标栏和
  自动/倍速/回城、金币、出城会被顶出可见区。这里一律改用 dvh，
  并给底部一排按钮留出 iPhone 手势条的安全间距。 */
body.h5-app{height:100vh!important;height:100dvh!important;
  --h5DockPad:calc(60px + env(safe-area-inset-bottom,0px))}
body.h5-app #game{height:calc(100vh - var(--h5TopH,36px))!important;
  height:calc(100dvh - var(--h5TopH,36px))!important}
body.h5-app #h5Dock{padding-bottom:calc(5px + env(safe-area-inset-bottom,0px))!important}
/* 战斗操作行抬高到安全区之上，并和底部图标栏拉开距离 */
body.h5-app #h5BattleOps{bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}
body.h5-app #cPaneBattle .stage>.zen{bottom:calc(46px + env(safe-area-inset-bottom,0px))!important}
/* 安全区出城按钮同理 */
body.h5-app #h5OutWrap{bottom:calc(18px + env(safe-area-inset-bottom,0px))!important}
body.h5-app.h5-city #cPaneBattle .stage>.zen{bottom:calc(58px + env(safe-area-inset-bottom,0px))!important}
/* ===== h9q 战斗区按钮与光环归位 ===== */
/* 底部图标栏在战斗中不再放「攻击」：攻击统一进战斗操作条，
   安全区仍然只有底栏里的「出城」那一枚（它本来就在城内收起） */
body.h5-app:not(.h5-city) #h5Dock .dbtn[data-k="atk"]{display:none!important}
/* 强化光环改挂舞台后，锚点换成舞台底部：让光环落在角色脚下的地面圈上，
   而不是像之前挂在零高度的 #figP 里、跑到模型头顶上方 */
body.h5-app #h5Glow{position:absolute;left:50%;bottom:44px;transform:translateX(-50%)}

/* ===== h9r 按钮统一风格 =====
   原先每处按钮各写一套：底栏是无边框深底、操作条是细金边小胶囊、
   抽屉九宫格是扁长条、出城是另一种描边、弹窗按钮又一套。
   这里抽一套「深色玻璃底 + 金线描边 + 顶部高光 + 底下投影」的皮肤，
   全部按钮共用，只保留各自的尺寸与图标排版。 */
body.h5-app{
  --btn-r:10px;
  --btn-bd:rgba(232,198,106,.34);
  --btn-bd-on:rgba(255,214,120,.92);
  --btn-bg:linear-gradient(180deg,rgba(52,44,74,.94) 0%,rgba(24,20,36,.96) 100%);
  --btn-bg-on:linear-gradient(180deg,rgba(122,94,40,.96) 0%,rgba(62,46,20,.96) 100%);
  --btn-ink:#f1e6cc;
  --btn-ink-on:#fff3cc;
  --btn-sh:0 2px 8px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.09);
}
body.h5-app #h5Dock .dbtn,
body.h5-app #h5More .mbtn,
body.h5-app #h5More .mwide,
body.h5-app #h5Out,
body.h5-app #h5BattleOps>button,
body.h5-app #h5RoleTabs button,
body.h5-app #h5AreaSheet .area,
body.h5-app .modal-card .mini,
body.h5-app .modal-card button.mini,
body.h5-app #h5AreaBar,
body.h5-app #h5AreaBar .tb-btn{
  background:var(--btn-bg)!important;
  border:1px solid var(--btn-bd)!important;
  border-radius:var(--btn-r)!important;
  box-shadow:var(--btn-sh)!important;
  color:var(--btn-ink)!important;
  font-weight:500!important;
  letter-spacing:.02em;
  transition:transform .08s ease,filter .12s ease,border-color .12s ease}
/* 小号按钮（HUD 工具图标）圆角收一点，符合同一套语言 */
body.h5-app #h5AreaBar .tb-btn{border-radius:7px!important}
/* 选中 / 开启 / 当前区域：同一套金底高亮 */
body.h5-app #h5Dock .dbtn.on,
body.h5-app #h5More .mbtn.on,
body.h5-app #h5BattleOps>button.on,
body.h5-app #h5BattleOps>button[data-b="auto"].on,
body.h5-app #h5RoleTabs button.on,
body.h5-app #h5AreaSheet .area.active,
body.h5-app #h5AreaBar.on{
  background:var(--btn-bg-on)!important;
  border-color:var(--btn-bd-on)!important;
  color:var(--btn-ink-on)!important;
  box-shadow:0 2px 10px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(255,214,120,.18) inset!important}
/* 按下统一：整体轻下沉 + 提亮，不再各处各写一种 */
body.h5-app #h5Dock .dbtn:active,
body.h5-app #h5More .mbtn:active,
body.h5-app #h5More .mwide:active,
body.h5-app #h5Out:active,
body.h5-app #h5BattleOps>button:active,
body.h5-app #h5RoleTabs button:active,
body.h5-app #h5AreaSheet .area:active,
body.h5-app .modal-card .mini:active,
body.h5-app #h5AreaBar:active,
body.h5-app #h5AreaBar .tb-btn:active{
  transform:translateY(1px);
  filter:brightness(1.10)}
/* 抽屉关闭键仍是圆的，只换同一套金线 */
body.h5-app #h5SheetX{
  border-radius:50%!important;
  border:1px solid var(--btn-bd-on)!important;
  background:var(--btn-bg)!important;
  color:var(--btn-ink-on)!important;
  box-shadow:var(--btn-sh)!important}
/* 抽屉里的小控件也收进同一套：数字加点的主按钮走「金底主色」，
   批量加成/展开/推荐/转生这些次要按钮走「深玻璃 + 金线」副色。
   之前这套是实心金块 + 紫色块两套颜色，和新的按钮皮肤对不上。 */
body.h5-app .plus{
  background:var(--btn-bg-on)!important;
  border:1px solid var(--btn-bd-on)!important;
  border-radius:8px!important;
  color:#2a1e06!important;
  font-weight:700!important;
  box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35)!important}
body.h5-app .plus.bulk{
  background:var(--btn-bg)!important;
  border-color:var(--btn-bd)!important;
  color:var(--btn-ink-on)!important;
  box-shadow:var(--btn-sh)!important}
body.h5-app .plus:active,
body.h5-app .plus.bulk:active{transform:translateY(1px);filter:brightness(1.10)}
body.h5-app .mini-toggle,
body.h5-app .rec-btn,
body.h5-app .rebirth-btn,
body.h5-app #cPaneRole button.mini,
body.h5-app .modal-card button:not(#h5SheetX){
  background:var(--btn-bg)!important;
  border:1px solid var(--btn-bd)!important;
  border-radius:8px!important;
  color:var(--btn-ink)!important;
  box-shadow:var(--btn-sh)!important;
  font-weight:500!important}
body.h5-app .mini-toggle:active,
body.h5-app .rec-btn:active,
body.h5-app .rebirth-btn:active,
body.h5-app .modal-card button:not(#h5SheetX):active{
  transform:translateY(1px);filter:brightness(1.10)}
/* ===== h9u 人物装备栏（纸娃娃） =====
   原装备页是一长条列表，看不出穿在哪、也看不出空哪。改成客户端那种人物装备栏：
   角色立绘居中，7 个装备槽 + 翅膀 / 宠物围在四周，点槽位在下面展开该件详情与操作。 */
body.h5-app #equipList{padding:0!important;display:block!important}
body.h5-app #equipList .pdoll{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(142px,26vw,196px) minmax(0,1fr);
  grid-template-areas:"helm fig wpn" "armor fig off" "glove fig legs" "neck fig ring" "boots wing pet";
  gap:7px;padding:9px;border-radius:12px;
  background:radial-gradient(120% 90% at 50% 42%,rgba(76,60,120,.42) 0%,rgba(16,13,26,.94) 72%);
  border:1px solid rgba(232,198,106,.16)}
body.h5-app #equipList .pd-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:62px;padding:5px 3px;overflow:hidden;cursor:pointer;
  background:var(--btn-bg);border:1px solid var(--btn-bd);
  border-radius:9px;box-shadow:var(--btn-sh);
  transition:transform .08s ease,filter .12s ease,border-color .12s ease}
body.h5-app #equipList .pd-slot .pd-ico{font-size:19px;line-height:1.05}
body.h5-app #equipList .pd-slot .pd-nm{
  font-size:10.5px;line-height:1.15;color:#efe4c9;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.h5-app #equipList .pd-slot .pd-val{font-size:9.5px;line-height:1.1;color:#a9a1c4}
body.h5-app #equipList .pd-slot.empty{
  border-style:dashed;border-color:rgba(232,198,106,.20);
  background:rgba(19,16,28,.6);box-shadow:none}
body.h5-app #equipList .pd-slot.empty .pd-nm{color:#8b83a8}
body.h5-app #equipList .pd-slot.empty .pd-ico{opacity:.5}
body.h5-app #equipList .pd-slot.sel{
  border-color:var(--btn-bd-on);background:var(--btn-bg-on);
  box-shadow:0 2px 10px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.14)}
body.h5-app #equipList .pd-slot:active{transform:translateY(1px);filter:brightness(1.10)}
body.h5-app #equipList .pd-helm{grid-area:helm}
body.h5-app #equipList .pd-armor{grid-area:armor}
body.h5-app #equipList .pd-glove{grid-area:glove}
body.h5-app #equipList .pd-boots{grid-area:boots}
body.h5-app #equipList .pd-wpn{grid-area:wpn}
body.h5-app #equipList .pd-off{grid-area:off}
body.h5-app #equipList .pd-legs{grid-area:legs}
body.h5-app #equipList .pd-neck{grid-area:neck}
body.h5-app #equipList .pd-ring{grid-area:ring}
body.h5-app #equipList .pd-wing{grid-area:wing}
body.h5-app #equipList .pd-pet{grid-area:pet}
body.h5-app #equipList .pd-fig{
  grid-area:fig;position:relative;display:flex;align-items:flex-end;justify-content:center;
  min-height:206px;border-radius:10px;
  background:radial-gradient(58% 46% at 50% 82%,rgba(232,198,106,.20) 0%,rgba(232,198,106,0) 72%),
    linear-gradient(180deg,rgba(40,32,62,.35),rgba(12,10,20,.55))}
body.h5-app #equipList .pd-fig img{display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))}
body.h5-app #equipList .pd-fig .wingart{pointer-events:none}
body.h5-app #equipList .pd-fig-lv{
  position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
  padding:1px 7px;border-radius:20px;font-size:10px;color:#ffe9a8;
  background:rgba(12,10,20,.7);border:1px solid rgba(232,198,106,.35);white-space:nowrap}
body.h5-app #equipList .pd-detail{
  margin-top:8px;padding:9px 10px;border-radius:10px;
  background:var(--btn-bg);border:1px solid var(--btn-bd);box-shadow:var(--btn-sh)}
body.h5-app #equipList .pd-dh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
body.h5-app #equipList .pd-dh b{font-size:13px;color:#f6ecd2;font-weight:600}
body.h5-app #equipList .pd-dh s{font-size:10.5px;color:#9a93b5;text-decoration:none}
body.h5-app #equipList .pd-dinfo{margin-top:5px;font-size:11px;line-height:1.5;color:#c9c2dd}
body.h5-app #equipList .pd-dops{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
body.h5-app #equipList .pd-dops .eq{
  padding:4px 9px;border-radius:8px;font-size:11px;
  background:var(--btn-bg-on);border:1px solid var(--btn-bd-on);
  color:#fff3cc!important;cursor:pointer;white-space:nowrap}
body.h5-app #equipList .pd-dops .eq:active{transform:translateY(1px);filter:brightness(1.10)}
body.h5-app #equipList .pd-tip,
body.h5-app #equipList .pd-set{
  margin-top:8px;padding:6px 9px;border-radius:8px;font-size:11px;line-height:1.5;
  border:1px solid rgba(232,198,106,.22);background:rgba(19,16,28,.55);color:#b6adcd}
body.h5-app #equipList .pd-set{border-color:#6a4fb0;color:#c9a8ff}
body.h5-app #equipList .pd-tip .eq{color:#e8c66a!important;cursor:pointer;margin-left:6px}
/* ===== h9w 按钮反馈统一到屏幕中央 =====
   game.css 里的 .toast 是「屏顶 24px 一条细边小条」，和弹窗、战斗日志、原生 alert 各说各的。
   这里把提示条搬到屏幕正中：深色玻璃 + 金线，可叠 3 条，淡入淡出，永远不挡点击。 */
body.h5-app .toast,
.toast{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:auto!important;
  max-width:min(84vw,420px);
  padding:0!important;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  color:inherit!important;
  font-size:13px!important;
  opacity:1!important;
  pointer-events:none!important;
  z-index:1200!important}
.toast .toast-item{
  max-width:min(84vw,420px);
  padding:10px 18px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(46,38,68,.96) 0%,rgba(20,16,31,.97) 100%);
  border:1px solid rgba(255,214,120,.72);
  color:#fff3cc;
  font-size:13.5px;
  line-height:1.45;
  text-align:center;
  white-space:pre-wrap;
  word-break:break-word;
  box-shadow:0 10px 30px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(255,214,120,.12) inset;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transform:translateY(8px) scale(.96);
  transition:opacity .22s ease,transform .22s ease}
.toast .toast-item.in{opacity:1;transform:none}
.toast .toast-item.out{opacity:0;transform:translateY(-8px) scale(.98)}
body.h5-app #equipList .pd-fig img.pd-3d{
  width:auto;height:auto;max-width:100%;max-height:206px;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}

/* ============================================================
   h10c 确认 / 输入 / 选项弹窗统一皮肤
   原生 confirm/prompt 是系统白框，跟金线深玻璃界面完全两张皮。
   这里给 util.js 里的 h5Confirm / h5Prompt / h5Pick 统一外观：
   居中卡片 + 遮罩，按钮沿用按钮体系变量（--btn-*），危险动作走赤金。
   ============================================================ */
.h5a-ov{position:fixed;left:0;top:0;right:0;bottom:0;z-index:1400;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(6,5,10,.68);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .18s ease}
.h5a-ov.h5a-in{opacity:1}
.h5a-ov.h5a-out{opacity:0}
.h5a-card{width:min(84vw,338px);max-height:76vh;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:14px 14px 12px;border-radius:14px;
  background:linear-gradient(180deg,rgba(40,34,58,.98) 0%,rgba(15,12,24,.98) 100%);
  border:1px solid rgba(255,214,120,.52);
  box-shadow:0 18px 48px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.07);
  transform:translateY(10px) scale(.97);transition:transform .2s cubic-bezier(.2,.9,.3,1)}
.h5a-ov.h5a-in .h5a-card{transform:none}
.h5a-card-danger{border-color:rgba(224,99,90,.62)}
.h5a-ti{font:600 13px/1.4 system-ui,-apple-system,"PingFang SC",sans-serif;color:#ffe9b2;letter-spacing:.12em;
  margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(232,198,106,.18)}
.h5a-bd{font:13px/1.75 system-ui,-apple-system,"PingFang SC",sans-serif;color:#e7dcbf;
  white-space:pre-line;word-break:break-word}
.h5a-in{width:100%;box-sizing:border-box;margin-top:10px;padding:9px 10px;border-radius:9px;
  background:rgba(10,8,18,.92);border:1px solid rgba(232,198,106,.34);color:#f1e6cc;
  font:13px system-ui,-apple-system,"PingFang SC",sans-serif;outline:none}
.h5a-in:focus{border-color:rgba(255,214,120,.9);box-shadow:0 0 0 2px rgba(255,214,120,.16)}
.h5a-list{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.h5a-opt{padding:11px 12px;border-radius:10px;text-align:left;cursor:pointer;
  font:13px system-ui,-apple-system,"PingFang SC",sans-serif;color:var(--btn-ink,#f1e6cc);
  background:var(--btn-bg,linear-gradient(180deg,rgba(52,44,74,.94),rgba(24,20,36,.96)));
  border:1px solid var(--btn-bd,rgba(232,198,106,.34))}
.h5a-opt:active{transform:translateY(1px);filter:brightness(1.06)}
.h5a-opt-danger{color:#ffd9d2;border-color:rgba(224,73,75,.55);
  background:linear-gradient(180deg,rgba(96,30,32,.94),rgba(40,16,18,.96))}
.h5a-ft{display:flex;gap:9px;margin-top:14px}
.h5a-b,.h5a-a{flex:1;padding:11px 8px;border-radius:10px;cursor:pointer;
  font:13px system-ui,-apple-system,"PingFang SC",sans-serif;color:var(--btn-ink,#f1e6cc);
  background:var(--btn-bg,linear-gradient(180deg,rgba(52,44,74,.94),rgba(24,20,36,.96)));
  border:1px solid var(--btn-bd,rgba(232,198,106,.34))}
.h5a-a{font-weight:600;color:var(--btn-ink-on,#fff3cc);
  background:var(--btn-bg-on,linear-gradient(180deg,rgba(122,94,40,.96),rgba(62,46,20,.96)));
  border-color:var(--btn-bd-on,rgba(255,214,120,.92))}
.h5a-b:active,.h5a-a:active{transform:translateY(1px);filter:brightness(1.06)}
.h5a-danger{color:#ffe6df;
  background:linear-gradient(180deg,rgba(154,44,40,.96),rgba(72,18,18,.96));
  border-color:rgba(255,150,130,.74)}

/* ============================================================
   h10d 装备栏宽屏（iPad / 桌面 iPadOS Safari 等）修正
   原来 .pdoll 是 1fr + 固定中列 + 1fr：视口一宽，两侧槽位被拉成两三百像素、
   中间人物还只有 142px，人物小得像贴纸，槽位也散成一排。
   这里给整块内容一个上限并居中，中列随视口放大到 196px 封顶。
   ============================================================ */
body.h5-app #equipList .pdoll,
body.h5-app #equipList .pd-detail,
body.h5-app #equipList .pd-tip,
body.h5-app #equipList .pd-set{max-width:520px;margin-left:auto;margin-right:auto;box-sizing:border-box}
@media (min-width:600px){
  body.h5-app #equipList .pd-fig{min-height:240px}
  body.h5-app #equipList .pd-slot{min-height:74px}
  body.h5-app #equipList .pd-nm{font-size:12px}
  /* 宽屏别把「宝石」那一块也拉成一整行 */
  body.h5-app #jewelList{max-width:520px;margin-left:auto;margin-right:auto}
}
/* 2D 回退立绘：容器窄的时候整体等比缩，别横向溢出把槽位顶歪 */
body.h5-app #equipList .pd-fig img.clsart,
body.h5-app #equipList .pd-fig img.wingart{max-width:100%}

/* 3D 实拍还没好时，立绘下面挂一句加载提示，避免看着像「人物图裂了」 */
body.h5-app #equipList .pd-fig-tip{position:absolute;left:0;right:0;bottom:24px;
  text-align:center;font:10px/1 system-ui,-apple-system,"PingFang SC",sans-serif;
  color:#9c93b8;letter-spacing:.06em;pointer-events:none}

/* ============================================================
   h10f 角色抽屉（属性 / 装备）列宽对齐
   iPad 这类宽屏下 #game 被放大到 680：页签行铺满 680，而下面的 .box 因为
   父级 align-items:flex-start 变成「内容宽度」（只有 415），于是页签很长、
   内容缩在左边，中间人物被固定 142px 挤成小贴纸。
   统一成：内容列撑满并按 520 居中，页签同样限宽居中，✕ 与页签不再贴在一起。
   ============================================================ */
body.h5-app #paneEquip,
body.h5-app #paneStats{align-items:stretch!important}
body.h5-app #paneEquip>.box,
body.h5-app #paneStats>.box{width:100%!important;max-width:520px;
  margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
body.h5-app #h5RoleTabs{max-width:520px;margin-left:auto;margin-right:auto}

/* h10g 上面两条被 base 的 width/max-width 抢了优先级：直接给足 !important，
   页签与内容列都按「撑满 + 520 封顶 + 居中」落地 */
body.h5-app #paneEquip>.box,
body.h5-app #paneStats>.box{width:100%!important;max-width:520px!important;
  margin-left:auto!important;margin-right:auto!important}
body.h5-app #h5RoleTabs{width:100%!important;max-width:520px!important;
  margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
body.h5-app #equipList .pdoll{width:100%!important}

/* 没有副手槽（双手弓 / 双持）时，把空位挪到右下角，腿和宠物各上一行 */
body.h5-app #equipList .pdoll.pd-nooff{
  grid-template-areas:"helm fig wpn" "armor fig legs" "glove fig pet" "neck fig ring" "boots wing ."}

/* ============================================================
   h10r 拍卖行 / 组队排版 + 全站下拉框统一皮肤
   两个面板原来都是「靠 flex 抢宽度」：基础样式里 .mini{width:100%}，
   放进 flex 行以后按钮把整行吃掉 —— 拍卖的搜索框被压到 16px、
   组队的队伍名被压到 0px（实测 q.w=16 / pt-info.w=0）。这里改成
   grid 定列 + 按钮 width:auto，并把 select 收进同一套金线深玻璃皮肤。
   ============================================================ */

/* --- 下拉框：全站一套（原生箭头换成自绘金线小箭头） --- */
body.h5-app select,
body.h5-app .modal-card select{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:100%!important;
  box-sizing:border-box;
  height:32px;
  margin:0;
  padding:0 26px 0 10px;
  border-radius:9px!important;
  border:1px solid rgba(232,198,106,.34)!important;
  color:#f1e6cc!important;
  font:500 12px/30px system-ui,-apple-system,"PingFang SC",sans-serif;
  text-overflow:ellipsis;
  outline:none;
  cursor:pointer;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M0.5 0.5 L5.5 5.5 L10.5 0.5' fill='none' stroke='%23e8c66a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")
      no-repeat right 9px center/11px 7px,
    linear-gradient(180deg,rgba(38,32,56,.96) 0%,rgba(16,13,25,.98) 100%)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .12s ease,box-shadow .12s ease}
body.h5-app select:focus,
body.h5-app .modal-card select:focus{
  border-color:rgba(255,214,120,.92)!important;
  box-shadow:0 0 0 2px rgba(255,214,120,.16),0 2px 8px rgba(0,0,0,.34)}
body.h5-app select:disabled{opacity:.55;cursor:default}
body.h5-app select option{background:#15111f;color:#e8ddc4}
/* 面板里的输入框跟 select 同高同宽，避免一行里三种身高 */
body.h5-app .auc-sell-row input,
body.h5-app .auc-filter input{
  height:32px;box-sizing:border-box;margin:0;padding:0 10px;border-radius:9px!important;
  border:1px solid rgba(232,198,106,.34)!important;background:rgba(10,8,18,.92);
  color:#f1e6cc;font:500 12px/30px system-ui,-apple-system,"PingFang SC",sans-serif;outline:none}
body.h5-app .auc-sell-row input:focus,
body.h5-app .auc-filter input:focus{
  border-color:rgba(255,214,120,.92)!important;
  box-shadow:0 0 0 2px rgba(255,214,120,.16)}
body.h5-app .auc-sell-row input::placeholder,
body.h5-app .auc-filter input::placeholder{color:#8d85a6}

/* --- 拍卖行：挂单行 / 筛选行都改成 grid，按钮不再吃满整行 --- */
body.h5-app .auc-sell-row{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr) auto;
  gap:7px;align-items:center}
body.h5-app .auc-sell-row select,
body.h5-app .auc-sell-row input{width:100%!important;min-width:0}
body.h5-app .auc-sell-row .rec-btn{
  width:auto!important;flex:0 0 auto!important;margin:0!important;
  padding:0 14px!important;height:32px;border-radius:9px!important;white-space:nowrap}
body.h5-app .auc-filter{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) auto;
  gap:7px;align-items:center;margin-bottom:8px}
body.h5-app .auc-filter input,
body.h5-app .auc-filter select{width:100%!important;min-width:0}
body.h5-app .auc-filter .mini{
  width:auto!important;flex:0 0 auto!important;margin:0!important;
  padding:0 14px!important;height:32px;border-radius:9px!important;white-space:nowrap}

/* 页签收进同一套分段按钮语言（原来是一窄一宽的自绘胶囊） */
body.h5-app .auc-tabs{gap:8px;margin-bottom:9px}
body.h5-app .auc-tabs .tab{
  width:auto!important;flex:1 1 0!important;margin:0!important;
  min-height:34px;padding:0 10px;border-radius:9px!important;
  background:var(--btn-bg)!important;border:1px solid var(--btn-bd)!important;
  color:var(--btn-ink)!important;font-size:12px!important;font-weight:500!important;
  box-shadow:var(--btn-sh)!important;
  display:flex;align-items:center;justify-content:center;gap:4px;
  transition:transform .08s ease,filter .12s ease,border-color .12s ease}
body.h5-app .auc-tabs .tab.active{
  background:var(--btn-bg-on)!important;border-color:var(--btn-bd-on)!important;
  color:var(--btn-ink-on)!important;font-weight:600!important;
  box-shadow:0 2px 10px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.14)!important}
body.h5-app .auc-tabs .tab:active{transform:translateY(1px);filter:brightness(1.10)}
/* 挂单卡片与商品行：价格区不再被压成一条 */
body.h5-app .auc-sell{margin-bottom:9px}
body.h5-app .auc-row{gap:10px;padding:9px 2px}
body.h5-app .auc-buy{flex:0 0 auto;min-width:78px}
body.h5-app .auc-buy b{font-size:13px}
body.h5-app .auc-buy .mini{
  width:100%;margin-top:5px!important;padding:5px 10px!important;
  font-size:11px!important;border-radius:8px!important}

/* --- 组队：招募/成员行不再让按钮把队名挤没 --- */
body.h5-app .pt-row{gap:8px}
body.h5-app .pt-row .pt-ava,
body.h5-app .pt-row .pt-on,
body.h5-app .pt-row .pt-share,
body.h5-app .pt-row .pt-power,
body.h5-app .pt-row .pt-tag{flex:0 0 auto}
body.h5-app .pt-row .pt-info{flex:1 1 0%;min-width:0}
body.h5-app .pt-row .mini,
body.h5-app .pt-row button{
  width:auto!important;flex:0 0 auto!important;margin:0!important;
  padding:5px 12px!important;font-size:11px!important;border-radius:8px!important;
  white-space:nowrap}
body.h5-app .pt-row .pt-kick{padding:4px 9px!important;font-size:10.5px!important}
/* 目标副本那一行：标签不缩、下拉吃满剩余 */
body.h5-app .pt-dg-row{gap:8px}
body.h5-app .pt-dg-row>span{flex:0 0 auto;color:#cbbf9d;font-size:11.5px}
body.h5-app .pt-dg-row .pt-sel{flex:1 1 0;min-width:0;width:auto!important}
body.h5-app .pt-dg-row>b{flex:0 0 auto;color:#f1e6cc}
/* 创建区：输入框与下拉同高，按钮不再顶到两头 */
body.h5-app .pt-create input{height:32px;box-sizing:border-box;margin-bottom:7px}
body.h5-app .pt-create .pt-go{width:100%!important;height:34px;margin-top:2px!important}
body.h5-app .pt-btns{gap:8px}
body.h5-app .pt-btns .mini{
  flex:1 1 0!important;min-width:88px;margin:0!important;height:34px;
  display:flex;align-items:center;justify-content:center}
/* 面板整体的滚动区保持一致的内边距节奏 */
body.h5-app .party-body{padding-right:2px}

/* 商品价格与「金」不再被挤成两行（auction.js 已包一层 .auc-price） */
body.h5-app .auc-buy .auc-price{display:block;white-space:nowrap;line-height:1.25}
body.h5-app .auc-buy .auc-price b{display:inline!important}

/* 长列表（存档 / 战绩 / 副本）滚动条会压住右对齐的数值，
   实测「✔ 自动同步中」「Lv.32 · 0 转」的尾巴正好被滚动条盖掉，
   给滚动区留出一条滚动条宽度的右侧内边距。 */
body.h5-app #saveBody,
body.h5-app #statsBody,
body.h5-app .dg-body{padding-right:12px!important;box-sizing:border-box}

/* ============================================================
   h10s 其余面板的卡片 / 信息行收口
   拍卖行、组队、装备栏用的是「金线深玻璃卡片」，而商城、许愿、副本
   还是 --line 的淡紫细边，站在一起像两套 UI；存档中心的长值还会被
   卡片右边裁掉（「✔ 自动同步中」只露出前两个字）。这一块统一。
   ============================================================ */

/* 商城 / 许愿 / 副本：卡片统一成金线玻璃，内边距与圆角跟其它面板一致 */
body.h5-app .shop-item,
body.h5-app .dg-card{
  border:1px solid rgba(232,198,106,.22)!important;
  border-radius:11px!important;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(76,60,120,.28) 0%,rgba(16,13,26,0) 70%),
    linear-gradient(180deg,rgba(38,32,56,.94) 0%,rgba(15,12,24,.96) 100%)!important;
  box-shadow:0 3px 12px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05);
  padding:11px!important}
body.h5-app .dg-card.locked{opacity:.66}
body.h5-app .dg-card .dg-tier{
  border-color:rgba(232,198,106,.34)!important;color:#ffe9b2!important;
  background:rgba(10,8,18,.5)}
/* 卡片里的满宽按钮：与底部操作条同高，别一个 23px 一个 34px */
body.h5-app .shop-item button,
body.h5-app .dg-go{
  width:100%!important;height:32px;margin-top:7px!important;
  border-radius:9px!important;font-size:11.5px!important}
body.h5-app .dg-card .dg-h b{color:#f4e8cc}
body.h5-app .dg-card .dg-desc{color:#a9a1c4}

/* 存档中心这类「左标签右数值」行：长值换行而不是被卡片裁掉 */
body.h5-app .modal-card .row{gap:12px;align-items:flex-start}
body.h5-app .modal-card .row>span{flex:0 0 auto;color:#cbbf9d}
body.h5-app .modal-card .row>b{flex:1 1 auto;min-width:0;text-align:right;
  font-weight:600;color:#f1e6cc;white-space:normal;word-break:break-word;line-height:1.35}
body.h5-app .snap-row{gap:10px}
body.h5-app .snap-row .snap-meta{min-width:0}
body.h5-app .snap-row .mini{width:auto!important;flex:0 0 auto;margin:0!important;
  padding:5px 12px!important;font-size:11px!important}

/* ==========================================================================
   状态系统皮肤：战力数值下方的状态图标 + 悬浮说明
   技能特效：每种元素一套形态（火球 / 雷击 / 冰片 / 旋风 / 地裂 / 圣光 /
   虚空 / 锁链 / 箭雨 / 兽爪 / 吸魂），全部只做局部反馈，不移动整个舞台。
   ========================================================================== */
body.h5-app .power-chip{position:relative}
#h5St.pst{position:absolute;left:0;top:calc(100% + 3px);display:none;gap:3px;z-index:14;pointer-events:auto}
#h5St .pst-i{position:relative;display:inline-flex;align-items:center;gap:1px;height:17px;padding:0 3px;border-radius:5px;
  font:600 8.5px/1 inherit;background:rgba(12,16,28,.88);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 2px 8px rgba(0,0,0,.45);cursor:help;-webkit-user-select:none;user-select:none}
#h5St .pst-i i{font-style:normal;font-size:10px;line-height:1}
#h5St .pst-i b{font-weight:600;color:#cfd8ff;font-variant-numeric:tabular-nums}
#h5St .pst-i.up{border-color:rgba(120,220,160,.5);box-shadow:0 0 7px rgba(80,220,150,.22),0 2px 8px rgba(0,0,0,.45)}
#h5St .pst-i.dn{border-color:rgba(255,110,110,.5);box-shadow:0 0 7px rgba(255,90,90,.22),0 2px 8px rgba(0,0,0,.45)}
#h5STip{position:fixed;z-index:9999;display:none;max-width:250px;padding:8px 10px;border-radius:10px;
  background:linear-gradient(180deg,rgba(18,22,36,.98),rgba(10,13,22,.98));border:1px solid rgba(232,198,106,.55);
  box-shadow:0 12px 30px rgba(0,0,0,.6);color:#e8ecff;font:500 12px/1.55 inherit;pointer-events:none}
#h5STip .t-h{display:flex;align-items:center;gap:5px;font-weight:700;color:#ffd978;margin-bottom:3px}
#h5STip .t-h i{font-style:normal;font-size:14px}
#h5STip .t-h span{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:99px;font-weight:600}
#h5STip .t-h span.up{color:#9df0c0;background:rgba(80,220,150,.16)}
#h5STip .t-h span.dn{color:#ffb0b0;background:rgba(255,90,90,.16)}
#h5STip .t-d{color:#cfd6ee}
#h5STip .t-r{margin-top:4px;color:#9a93b5;font-size:11px}

/* ---- 技能特效元素 ---- */
.skx{position:absolute;pointer-events:none;z-index:9;transform:translate(-50%,-50%)}
.skx-ring{width:calc(var(--r,76px)*2);height:calc(var(--r,76px)*2);border-radius:50%;border:3px solid var(--c,#ffd27a);
  box-shadow:0 0 18px var(--c,#ffd27a),inset 0 0 12px var(--c,#ffd27a);animation:skxScale .48s ease-out forwards}
@keyframes skxScale{0%{transform:translate(-50%,-50%) scale(.3);opacity:.15}45%{opacity:.95}100%{transform:translate(-50%,-50%) scale(1.55);opacity:0}}
.skx-spark{width:7px;height:7px;border-radius:50%;background:var(--c2,#ffd27a);box-shadow:0 0 8px var(--c,#ffd27a);
  animation:skxSparkOut .48s ease-out forwards}
@keyframes skxSparkOut{0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(.2);opacity:0}}
.skx-orb{width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,var(--c2,#ffd27a),var(--c,#ff7a3c) 58%,rgba(0,0,0,0) 74%);
  box-shadow:0 0 30px var(--c,#ff7a3c),0 0 60px rgba(255,120,60,.45);animation:skxOrbFly .62s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes skxOrbFly{0%{transform:translate(-50%,-50%) scale(.55);opacity:.15}
  70%{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(1.15);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(1.7);opacity:0}}
.skx-bolt{width:26px;height:330px;border-radius:0;clip-path:polygon(52% 0,86% 34%,64% 38%,96% 68%,58% 66%,74% 100%,34% 58%,56% 56%,22% 24%,50% 26%);
  background:linear-gradient(180deg,transparent,var(--c2,#d8ccff) 40%,var(--c,#8f7bff) 62%,transparent);
  filter:drop-shadow(0 0 9px var(--c,#8f7bff));animation:skxBolt .33s ease-out forwards}
@keyframes skxBolt{0%{transform:translate(-50%,-50%) scaleY(.25);opacity:.2}22%{transform:translate(-50%,-50%) scaleY(1);opacity:1}
  100%{transform:translate(-50%,-50%) scaleY(1);opacity:0}}
.skx-flash{position:absolute;inset:0;background:var(--c,#8f7bff);opacity:0;mix-blend-mode:screen;z-index:8;
  animation:skxFlash .26s ease-out forwards;pointer-events:none}
@keyframes skxFlash{0%{opacity:0}25%{opacity:.3}100%{opacity:0}}
.skx-shard{width:16px;height:44px;background:linear-gradient(180deg,var(--c2,#d6f6ff),var(--c,#5fd8ff));
  clip-path:polygon(50% 0,100% 78%,50% 100%,0 78%);box-shadow:0 0 10px var(--c,#5fd8ff);
  animation:skxShardOut .52s ease-out forwards}
@keyframes skxShardOut{0%{transform:translate(-50%,-50%) rotate(0) scale(.5);opacity:.2}
  35%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) rotate(var(--rot,0deg)) scale(1);opacity:0}}
.skx-frost{position:absolute;inset:0;z-index:7;pointer-events:none;
  background:radial-gradient(circle at 50% 52%,rgba(95,216,255,.22),rgba(95,216,255,.06) 45%,transparent 72%);
  animation:skxFadeOut .52s ease-out forwards}
@keyframes skxFadeOut{0%{opacity:.1}30%{opacity:1}100%{opacity:0}}
.skx-arc{width:calc(var(--r,46px)*2);height:calc(var(--r,46px)*2);border-radius:50%;
  background:conic-gradient(from -40deg,transparent 0deg,var(--c2,#d6ffe9) 18deg,var(--c,#6ef0b4) 30deg,transparent 52deg,
    transparent 180deg,var(--c2,#d6ffe9) 198deg,var(--c,#6ef0b4) 210deg,transparent 232deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 62%,#000 82%,transparent 88%);
  mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 62%,#000 82%,transparent 88%);
  filter:drop-shadow(0 0 8px var(--c,#6ef0b4));animation:skxSpin .56s linear forwards}
@keyframes skxSpin{0%{transform:translate(-50%,-50%) rotate(0) scale(.85);opacity:.2}
  30%{opacity:1}100%{transform:translate(-50%,-50%) rotate(210deg) scale(1.12);opacity:0}}
.skx-seg{width:54px;height:12px;border-radius:3px;background:linear-gradient(90deg,var(--c,#d59a3c),var(--c2,#ffe3a8));
  box-shadow:0 0 12px var(--c,#d59a3c);animation:skxSeg .46s ease-out forwards}
@keyframes skxSeg{0%{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scaleX(.2);opacity:.2}
  35%{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scaleX(1);opacity:1}
  100%{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scaleX(1);opacity:0}}
.skx-beam{width:132px;height:340px;border-radius:12px;
  background:linear-gradient(180deg,transparent,var(--c,#ffe08a) 30%,var(--c2,#fffdf0) 55%,var(--c,#ffe08a) 78%,transparent);
  filter:blur(1px) drop-shadow(0 0 18px var(--c,#ffe08a));opacity:.9;animation:skxBeam .62s ease-out forwards}
@keyframes skxBeam{0%{transform:translate(-50%,-50%) scaleX(.25);opacity:.1}30%{transform:translate(-50%,-50%) scaleX(1);opacity:1}
  100%{transform:translate(-50%,-50%) scaleX(1.15);opacity:0}}
.skx-cross{width:210px;height:14px;background:var(--c2,#fffdf0);box-shadow:0 0 18px var(--c,#ffe08a);
  animation:skxCross .5s ease-out forwards}
.skx-cross::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:170px;margin:-85px 0 0 -7px;
  background:var(--c2,#fffdf0);box-shadow:0 0 18px var(--c,#ffe08a)}
@keyframes skxCross{0%{transform:translate(-50%,-50%) scale(.4);opacity:.2}40%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.2);opacity:0}}
.skx-void{width:196px;height:196px;border-radius:50%;
  background:radial-gradient(circle,var(--c2,#e3c8ff) 0%,var(--c,#a35cff) 28%,rgba(20,6,34,.9) 58%,transparent 74%);
  box-shadow:0 0 26px var(--c,#a35cff);animation:skxVoid .66s ease-out forwards}
@keyframes skxVoid{0%{transform:translate(-50%,-50%) scale(.25) rotate(0);opacity:.2}
  40%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.25) rotate(140deg);opacity:0}}
.skx-tendril{width:8px;height:76px;border-radius:3px;background:linear-gradient(180deg,var(--c,#a35cff),transparent);
  animation:skxTendril .54s ease-out forwards}
@keyframes skxTendril{0%{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scaleY(.2);opacity:.2}
  40%{opacity:.95}100%{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) rotate(var(--rot,0deg)) scaleY(1);opacity:0}}
.skx-chain{width:48px;height:10px;border-radius:4px;
  background:repeating-linear-gradient(90deg,var(--c,#a35cff) 0 5px,transparent 5px 8px);
  filter:drop-shadow(0 0 6px var(--c,#a35cff));animation:skxChainFly .46s ease-out forwards}
@keyframes skxChainFly{0%{transform:translate(-50%,-50%) scaleX(.2);opacity:.2}
  40%{opacity:1}100%{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scaleX(1);opacity:0}}
.skx-streak,.skx-streak-big{height:7px;border-radius:4px;
  background:linear-gradient(90deg,transparent,var(--c2,#fff) 40%,var(--c,#e8f2ff));
  filter:drop-shadow(0 0 6px var(--c,#fff));animation:skxStreak .36s ease-out forwards}
.skx-streak{width:50px}
.skx-streak-big{width:92px;height:14px}
@keyframes skxStreak{0%{transform:translate(-50%,-50%) scaleX(.3);opacity:.2}
  45%{opacity:1}100%{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scaleX(1);opacity:0}}
.skx-claw{width:10px;height:104px;border-radius:4px;
  background:linear-gradient(180deg,transparent,var(--c2,#ffe2b8),var(--c,#c98a4b));
  filter:drop-shadow(0 0 8px var(--c,#c98a4b));animation:skxClaw .46s ease-out forwards}
@keyframes skxClaw{0%{transform:translate(-50%,-50%) rotate(-12deg) scaleY(.2);opacity:.2}
  40%{transform:translate(-50%,-50%) rotate(-12deg) scaleY(1);opacity:1}
  100%{transform:translate(-50%,-50%) rotate(-12deg) scaleY(1);opacity:0}}
.skx-soul{width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle,var(--c2,#ffc2cc),var(--c,#ff4d6a) 65%,transparent 72%);
  box-shadow:0 0 22px var(--c,#ff4d6a);animation:skxSoul .7s ease-out forwards}
@keyframes skxSoul{0%{transform:translate(-50%,-50%) scale(.5);opacity:.3}
  30%{opacity:1}100%{transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(.95);opacity:0}}

/* ---- 抖动移除：命中反馈只保留爆点/环/火花，不再整块舞台或对拼条位移 ---- */
body.h5-app #cPaneBattle .stage.shake{animation:none!important}
body.h5-app #h5Vs.screenShake,body.h5-app .screenShake{animation:none!important}
/* H5 用悬在模型上方的 .h5-np 名牌，原生 fighter 里的旧标签不再显示 */
body.h5-app #monTags{display:none!important}
/* ---- 怪物名牌三层：名字在上，层数/等级与词缀在中下，各自换行不省略 ---- */
body.h5-app #cPaneBattle .stage .h5-np .np-n{display:block;line-height:1.35}
body.h5-app #cPaneBattle .stage .h5-np.r .np-lv{display:block;margin-top:2px;
  font:600 9.5px/1.35 inherit;letter-spacing:.2px;color:#e6c879;text-align:center}
body.h5-app #cPaneBattle .stage .h5-np.r .np-tags{display:block;margin-top:2px;
  font:500 9.5px/1.5 inherit;letter-spacing:.2px;color:#ffd9a8;text-align:center;
  white-space:normal;word-break:break-word}
body.h5-app #cPaneBattle .stage .h5-np.r .np-lv:empty{display:none}
body.h5-app #cPaneBattle .stage .h5-np.r .np-tags:empty{display:none}

/* ========== v12o 商城重排：金币头 + 页签 + 两列卡片 + 独立滚动区 ========== */
body.h5-app #shopModal .modal-card{max-width:440px!important}
body.h5-app .shp-wrap{display:flex;flex-direction:column;gap:9px}
body.h5-app .shp-head{padding:9px 11px;border-radius:12px;
  border:1px solid rgba(232,198,106,.28);
  background:radial-gradient(120% 90% at 50% 0%,rgba(76,60,120,.30),rgba(16,13,26,0) 70%),
    linear-gradient(180deg,rgba(38,32,56,.94),rgba(15,12,24,.96))}
body.h5-app .shp-bal{display:flex;align-items:baseline;gap:6px;color:#ffe9b2;font-size:17px;font-weight:700;line-height:1.2}
body.h5-app .shp-bal small{font-size:10.5px;font-weight:400;color:#bdb38f;letter-spacing:.06em}
body.h5-app .shp-note{margin-top:3px;font-size:10.5px;color:#a9a1c4;line-height:1.35}
body.h5-app .shp-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding-bottom:1px}
body.h5-app .shp-tabs::-webkit-scrollbar{height:3px}
body.h5-app .shp-tabs::-webkit-scrollbar-thumb{background:rgba(232,198,106,.35);border-radius:3px}
body.h5-app .shp-tab{height:29px;padding:0 4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:9px;cursor:pointer;
  border:1px solid rgba(232,198,106,.26);background:rgba(16,13,26,.62);color:#cdc3a6;font-size:12px;line-height:28px}
body.h5-app .shp-tab.on{background:linear-gradient(180deg,rgba(240,206,122,.94),rgba(188,146,60,.94));
  border-color:#f4dc9d;color:#241a06;font-weight:700}
body.h5-app .shp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px;
  overflow-y:auto;padding:2px 8px 6px 1px;max-height:min(56vh,470px)}
body.h5-app .shp-grid::-webkit-scrollbar{width:4px}
body.h5-app .shp-grid::-webkit-scrollbar-thumb{background:rgba(232,198,106,.35);border-radius:3px}
body.h5-app .shp-card{display:flex;flex-direction:column;gap:5px;padding:9px 10px 8px;border-radius:11px;
  border:1px solid rgba(232,198,106,.22);
  background:radial-gradient(120% 90% at 50% 0%,rgba(76,60,120,.28),rgba(16,13,26,0) 70%),
    linear-gradient(180deg,rgba(38,32,56,.94),rgba(15,12,24,.96))}
body.h5-app .shp-card.lack{opacity:.62}
body.h5-app .shp-h{display:flex;align-items:center;gap:6px;min-width:0}
body.h5-app .shp-ico{font-size:15px;line-height:1;flex:0 0 auto}
body.h5-app .shp-name{font-size:12.5px;font-weight:700;color:#f4e8cc;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.h5-app .shp-desc{font-size:10.5px;color:#a9a1c4;line-height:1.35;min-height:28px}
body.h5-app .shp-own{font-size:10px;color:#8ee07a;line-height:1.3}
body.h5-app .shp-foot{display:flex;align-items:center;gap:4px;margin-top:auto;padding-top:2px}
body.h5-app .shp-price{font-size:12px;font-weight:700;color:#ffe9b2}
body.h5-app .shp-price.lack{color:#ff8f8f}
body.h5-app .shp-coin{font-size:9.5px;color:#bdb38f;margin-right:2px}
body.h5-app .shp-buy{margin-left:auto;height:28px;min-width:54px;padding:0 9px;border-radius:8px;cursor:pointer;
  border:1px solid rgba(232,198,106,.42);
  background:linear-gradient(180deg,rgba(96,78,142,.92),rgba(46,36,74,.92));color:#f1e6cc;font-size:11px}
body.h5-app .shp-buy.five{margin-left:0;min-width:38px;padding:0 6px}
body.h5-app .shp-buy:disabled{opacity:.5;cursor:not-allowed}
body.h5-app .shp-buy:active{transform:translateY(1px)}
body.h5-app .shp-empty{grid-column:1/-1;font-size:11.5px;color:#a9a1c4;padding:10px 2px}
/* v12q 团本 BOSS 机制标签 */
body.h5-app .pb-aff{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;font-size:10px;
  border:1px solid rgba(232,198,106,.45);background:rgba(232,198,106,.14);color:#ffe9b2;vertical-align:middle}
body.h5-app .pb-rage{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:6px;font-size:10px;font-weight:700;
  border:1px solid rgba(255,120,120,.5);background:rgba(255,90,90,.16);color:#ff9a9a;vertical-align:middle}
/* ===== v15w 称号墙 / 佩戴 / 来源 / 动态特效 ===== */
/* 角色面板里的当前称号卡：入口放在「属性」页签，点整张卡进入称号墙 */
body.h5-app #titleCard{margin-top:10px;border-color:rgba(232,198,106,.38)}
body.h5-app #titleCard .box-head{margin-bottom:8px}
body.h5-app .title-current{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;cursor:pointer;
  background:linear-gradient(100deg,rgba(232,198,106,.10),rgba(128,96,210,.08));border:1px solid rgba(232,198,106,.22)}
body.h5-app .title-current:active{transform:translateY(1px)}
body.h5-app .tc-icon{font-size:27px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
body.h5-app .tc-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
body.h5-app .tc-main b{font-size:14px;color:#ffe9b2;letter-spacing:.5px}
body.h5-app .tc-main span{font-size:10.5px;line-height:1.45;color:#bdb5d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.h5-app .tc-more{font-size:10.5px;color:#e8c66a;white-space:nowrap}
body.h5-app #titleCard[data-fx]:not([data-fx=""]) .title-current{border-color:rgba(232,198,106,.5);box-shadow:0 0 14px rgba(232,198,106,.12)}

/* 称号墙弹窗：两列卡片，属性/来源/条件/特效分开写，避免又挤成一行 */
body.h5-app .title-wall-card{max-width:520px!important}
body.h5-app #titleWall{max-height:64vh;overflow-y:auto;padding-right:3px;scrollbar-width:thin}
body.h5-app .tw-sum{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px}
body.h5-app .tw-now{display:flex;flex-direction:column;gap:2px;min-width:0}
body.h5-app .tw-now b{font-size:13px;color:#ffe9b2}
body.h5-app .tw-now span{font-size:10.5px;color:#bdb5d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.h5-app .tw-count{font-size:10.5px;color:#8f88a8;white-space:nowrap}
body.h5-app .tw-actions{display:flex;gap:7px;margin:0 0 7px}
body.h5-app .tw-actions .mini{flex:1 1 0;width:auto!important;min-height:33px;margin:0!important}
body.h5-app .tw-tip{font-size:10px;line-height:1.55;color:#938bab;margin:0 0 9px}
body.h5-app .tw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
body.h5-app .title-item{position:relative;display:flex;flex-direction:column;gap:4px;padding:9px;border-radius:10px;
  background:rgba(16,13,27,.78);border:1px solid rgba(150,136,190,.24);min-height:128px}
body.h5-app .title-item[data-tier="3"]{border-color:rgba(232,198,106,.30)}
body.h5-app .title-item[data-tier="4"]{border-color:rgba(255,130,90,.36);box-shadow:inset 0 0 18px rgba(255,120,80,.06)}
body.h5-app .title-item.locked{opacity:.52;filter:saturate(.55)}
body.h5-app .title-item.on{border-color:rgba(232,198,106,.75);box-shadow:0 0 14px rgba(232,198,106,.16)}
body.h5-app .ti-head{display:flex;align-items:center;gap:5px;min-width:0}
body.h5-app .ti-ico{font-size:18px;line-height:1}
body.h5-app .ti-head b{font-size:12px;color:#f4ecd8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
body.h5-app .ti-src{font-size:9px;color:#9d94b8;white-space:nowrap;padding:1px 4px;border-radius:4px;background:rgba(150,136,190,.12)}
body.h5-app .ti-bonus{font-size:10.5px;line-height:1.5;color:#e9dfbd;min-height:31px}
body.h5-app .ti-cond{font-size:10px;line-height:1.45;color:#9c94b2}
body.h5-app .ti-fx{font-size:9.5px;color:#c7a7ff}
body.h5-app .ti-foot{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:auto}
body.h5-app .ti-btn{width:auto!important;min-width:52px;min-height:28px!important;padding:2px 9px!important;margin:0!important;font-size:10.5px!important}
body.h5-app .ti-on{font-size:10px;color:#e8c66a;margin-right:auto}
body.h5-app .ti-lock{font-size:10px;color:#8f88a8;margin-right:auto}
@media(max-width:380px){body.h5-app .tw-grid{grid-template-columns:1fr}body.h5-app .title-item{min-height:0}}

/* 高级称号动态特效：只作用于有 data-fx 的称号牌，底板 SVG 和文字保持原样 */
body.h5-app #cPaneBattle .stage .h5-np .np-title{position:relative;isolation:isolate;overflow:visible}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-fx="gold"]{--fx:255,207,102}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-fx="blood"]{--fx:255,90,74}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-fx="void"]{--fx:185,140,255}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-fx="star"]{--fx:143,231,255}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-fx="holy"]{--fx:255,233,168}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-fx]:not([data-fx=""]){animation:titleFxText 2.8s ease-in-out infinite}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-fx]:not([data-fx=""])::after{
  content:'';position:absolute;inset:-4px -8px;border-radius:9px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(var(--fx),.36),rgba(var(--fx),.12) 46%,rgba(var(--fx),0) 72%);
  animation:titleFxBreath 2.8s ease-in-out infinite;
}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-fx]:not([data-fx=""])::before{
  content:'';position:absolute;inset:-3px;border-radius:9px;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(var(--fx),0),rgba(var(--fx),.38),rgba(var(--fx),0) 42%);
  opacity:.35;animation:titleFxSpin 4.5s linear infinite;filter:blur(1px);
}
@keyframes titleFxBreath{0%,100%{opacity:.3;transform:scale(.97)}50%{opacity:.62;transform:scale(1.04)}}
@keyframes titleFxSpin{to{transform:rotate(360deg)}}
@keyframes titleFxText{0%,100%{text-shadow:0 0 4px rgba(0,0,0,.75)}50%{text-shadow:0 0 7px rgba(var(--fx),.65),0 0 2px rgba(0,0,0,.9)}}
/* 动态称号牌的可见光晕：SVG 底板不改，只在牌体周围做呼吸光圈 */
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-fx]:not([data-fx=""]){animation:titleFxText 2.8s ease-in-out infinite,titleFxGlow 2.8s ease-in-out infinite}
body.h5-app #cPaneBattle .stage .h5-np .np-title[data-fx]:not([data-fx=""])::after{inset:-6px -12px;opacity:.45}
@keyframes titleFxGlow{
  0%,100%{box-shadow:0 0 4px rgba(var(--fx),.16),0 2px 5px rgba(0,0,0,.55)}
  50%{box-shadow:0 0 12px rgba(var(--fx),.62),0 0 4px rgba(var(--fx),.42),0 2px 5px rgba(0,0,0,.6)}
}
/* ===== v15y 城内快捷装备栏 + 称号切换（只显示在安全区） ===== */
body.h5-app #cityQuick{position:absolute;left:12px;right:12px;top:104px;z-index:18;display:flex;align-items:stretch;gap:7px;
  pointer-events:auto;user-select:none}
body.h5-app:not(.h5-city) #cityQuick{display:none!important}
body.h5-app .cq-eq{display:flex;align-items:center;gap:3px;padding:4px 5px;border-radius:11px;
  background:linear-gradient(180deg,rgba(23,18,39,.78),rgba(13,10,24,.86));border:1px solid rgba(150,136,190,.28);
  box-shadow:0 4px 14px rgba(0,0,0,.35);backdrop-filter:blur(5px)}
body.h5-app .cq-slot{position:relative;width:30px;height:32px;padding:0;border-radius:8px;border:1px solid rgba(150,136,190,.22);
  background:rgba(255,255,255,.035);color:#c9c0df;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
body.h5-app .cq-slot.on{border-color:rgba(232,198,106,.46);background:rgba(232,198,106,.10);color:#ffe7a8}
body.h5-app .cq-slot.empty{opacity:.42;border-style:dashed}
body.h5-app .cq-slot:active{transform:translateY(1px)}
body.h5-app .cq-ico{font-size:15px;line-height:1}
body.h5-app .cq-lv{position:absolute;right:1px;bottom:-1px;font-size:8px;line-height:1;font-style:normal;color:#ffe9b2;
  text-shadow:0 1px 2px #000;background:rgba(12,9,20,.85);padding:1px 2px;border-radius:3px}
body.h5-app .cq-title{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px;padding:5px 6px 5px 9px;border-radius:11px;
  background:linear-gradient(100deg,rgba(232,198,106,.12),rgba(128,96,210,.10));border:1px solid rgba(232,198,106,.30);
  box-shadow:0 4px 14px rgba(0,0,0,.32);backdrop-filter:blur(5px)}
body.h5-app .cq-title[data-fx]:not([data-fx=""]){box-shadow:0 0 10px rgba(232,198,106,.22),0 4px 14px rgba(0,0,0,.32)}
body.h5-app .cq-t-ico{font-size:16px;line-height:1;flex:0 0 auto}
body.h5-app .cq-t-name{font-size:11.5px;color:#ffe9b2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
body.h5-app .cq-t-btn{flex:0 0 auto;height:27px;padding:0 9px;border-radius:8px;border:1px solid rgba(232,198,106,.55);
  background:rgba(232,198,106,.16);color:#ffe9b2;font-size:10.5px;cursor:pointer;white-space:nowrap}
body.h5-app .cq-t-btn:active{transform:translateY(1px)}
@media(max-width:400px){body.h5-app .cq-slot{width:27px;height:30px}body.h5-app .cq-t-name{font-size:10.5px}}
/* v16a 城内装备栏改为「装备页纸娃娃」布局：左防具、右武器/盾/护腿，围绕角色 */
body.h5-app #cityQuick{display:block;left:0;right:0;top:104px;bottom:0;padding:0;background:none;border:0;box-shadow:none;
  pointer-events:none;z-index:18}
body.h5-app .cq-col{position:absolute;top:154px;display:flex;flex-direction:column;gap:7px;pointer-events:auto}
body.h5-app .cq-left{left:10px}
body.h5-app .cq-right{right:10px}
body.h5-app .cq-slot{width:62px;height:58px;padding:3px 2px 2px;border-radius:10px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;overflow:hidden;background:linear-gradient(180deg,rgba(26,20,43,.88),rgba(13,10,24,.92));
  border:1px solid rgba(150,136,190,.30);box-shadow:0 3px 10px rgba(0,0,0,.32)}
body.h5-app .cq-slot.on{border-color:rgba(232,198,106,.55);background:linear-gradient(180deg,rgba(55,43,28,.88),rgba(20,15,25,.92));
  box-shadow:0 0 8px rgba(232,198,106,.12),0 3px 10px rgba(0,0,0,.32)}
body.h5-app .cq-slot.empty{opacity:.48;border-style:dashed}
body.h5-app .cq-ico{font-size:19px;line-height:1.05}
body.h5-app .cq-nm{max-width:58px;font-size:8.5px;line-height:1.25;color:#d8cfe8;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.h5-app .cq-slot.on .cq-nm{color:#ffe9b2}
body.h5-app .cq-lv{position:absolute;top:2px;right:2px;bottom:auto;font-size:8px;padding:1px 2px;border-radius:3px;
  background:rgba(12,9,20,.9);color:#ffe9b2;font-style:normal;line-height:1}
body.h5-app .cq-title{position:absolute;top:0;left:50%;transform:translateX(-50%);width:auto;min-width:218px;
  max-width:calc(100% - 140px);height:38px;flex:none;justify-content:center;padding:5px 6px 5px 10px;pointer-events:auto;
  background:linear-gradient(100deg,rgba(232,198,106,.13),rgba(128,96,210,.12));border:1px solid rgba(232,198,106,.34);
  box-shadow:0 4px 14px rgba(0,0,0,.34);backdrop-filter:blur(5px)}
body.h5-app .cq-title[data-fx]:not([data-fx=""]){box-shadow:0 0 12px rgba(232,198,106,.24),0 4px 14px rgba(0,0,0,.34)}
body.h5-app .cq-t-name{font-size:12px}
body.h5-app .cq-t-btn{height:28px;padding:0 10px;font-size:11px}
@media(max-width:400px){
  body.h5-app .cq-col{top:142px;gap:5px}
  body.h5-app .cq-slot{width:56px;height:53px}
  body.h5-app .cq-nm{max-width:52px;font-size:8px}
  body.h5-app .cq-title{min-width:190px;max-width:calc(100% - 128px);height:36px}
  body.h5-app .cq-t-name{font-size:11px}
}
/* v16b 出城按钮贴到角色脚下正中 */
body.h5-app #h5OutWrap{left:0;width:100%;bottom:10px}
body.h5-app.h5-city #h5OutWrap{display:flex}

/* v16b 城内点装备弹窗：属性 + 装配 / 强化 / 洗练 / 脱下 */
.city-item-mask{position:fixed;inset:0;z-index:75;display:none;align-items:center;justify-content:center;padding:14px;
  background:rgba(4,2,10,.68);backdrop-filter:blur(3px)}
.city-item-mask.show{display:flex}
.city-item-card{width:min(392px,100%);max-height:78vh;overflow:auto;border-radius:15px;padding:13px 14px 14px;
  background:linear-gradient(180deg,rgba(30,23,48,.98),rgba(12,9,22,.99));border:1px solid rgba(232,198,106,.42);
  box-shadow:0 18px 50px rgba(0,0,0,.62),inset 0 0 24px rgba(232,198,106,.06)}
.city-item-card .ci-head{display:flex;align-items:center;gap:9px;padding-right:26px;position:relative}
.city-item-card .ci-ico{font-size:30px;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.city-item-card .ci-tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.city-item-card .ci-tt b{font-size:15px;color:#ffe9b2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.city-item-card .ci-tt span{font-size:10.5px;color:#a9a0c0}
.city-item-card .ci-x{position:absolute;right:-8px;top:-7px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(232,198,106,.4);
  background:rgba(20,15,32,.9);color:#e8c66a;font-size:15px;line-height:1;cursor:pointer}
.city-item-card .ci-sub{font-size:11px;line-height:1.6;color:#cfc5e2;margin-top:8px}
.city-item-card .ci-stats{font-size:12.5px;line-height:1.75;color:#f0e5c8;margin-top:9px;padding:8px 10px;border-radius:9px;
  background:rgba(232,198,106,.08);border:1px solid rgba(232,198,106,.18)}
.city-item-card .ci-opts{font-size:11px;line-height:1.65;color:#cbb9ef;margin-top:7px;padding:7px 9px;border-radius:8px;
  background:rgba(150,110,230,.10);border:1px solid rgba(150,110,230,.22);white-space:pre-wrap}
.city-item-card .ci-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:11px}
.city-item-card .ci-act{min-height:36px;border-radius:9px;border:1px solid rgba(150,136,190,.38);background:rgba(255,255,255,.045);
  color:#e9e0f7;font:600 12px/1 inherit;cursor:pointer;padding:4px 8px}
.city-item-card .ci-act:active{transform:translateY(1px)}
.city-item-card .ci-act.primary{border-color:rgba(232,198,106,.66);background:rgba(232,198,106,.17);color:#ffe9b2}
.city-item-card .ci-act.danger{border-color:rgba(255,110,110,.5);background:rgba(255,80,80,.12);color:#ffb4b4}
/* 出城按钮再上移一档，贴到角色脚边（金币仍在它上方） */
body.h5-app #h5OutWrap{left:0;width:100%;bottom:calc(60px + env(safe-area-inset-bottom,0px))!important}
/* 装备页签已迁到城内，角色抽屉只留属性，避免双重装备栏 */
body.h5-app #snavEquip{display:none!important}
body.h5-app #h5RoleTabs{padding-right:40px}
/* 头顶称号行：称号牌右侧直接挂「切换」，城内显示，战斗隐藏；不再单独占用一条顶部称号条 */
body.h5-app #cPaneBattle .stage .h5-np.l .np-title-line{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:nowrap;margin-top:3px}
body.h5-app #cPaneBattle .stage .h5-np.l .np-title-line .np-title{margin:0}
body.h5-app #cPaneBattle .stage .h5-np.l .np-title-sw{
  display:none;pointer-events:auto;cursor:pointer;white-space:nowrap;
  min-height:18px;padding:2px 7px;border-radius:7px;
  border:1px solid rgba(232,198,106,.42);
  background:linear-gradient(180deg,rgba(58,48,84,.96),rgba(22,17,36,.96));
  color:#ffe9b0;font:700 9.5px/1 inherit;letter-spacing:.4px;
  box-shadow:0 2px 6px rgba(0,0,0,.45)}
body.h5-app.h5-city #cPaneBattle .stage .h5-np.l .np-title-sw{display:inline-flex;align-items:center}
body.h5-app #cPaneBattle .stage .h5-np.l .np-title-sw:active{transform:translateY(1px)}
/* 称号和名字拆成两个独立模块：外加大底框会显得笨重，现在名字单独小条、称号牌单独一条 */
body.h5-app #cPaneBattle .stage .h5-np.l{
  background:none!important;border:0!important;box-shadow:none!important;padding:0!important;
  text-shadow:none!important}
body.h5-app #cPaneBattle .stage .h5-np.l .np-n{
  display:inline-block;padding:2px 10px 3px;border-radius:8px;
  background:rgba(12,10,20,.82);border:1px solid rgba(232,198,106,.26);
  box-shadow:0 4px 12px rgba(0,0,0,.45);text-shadow:0 1px 2px rgba(0,0,0,.8)}
/* 角色名右侧 VIP 铭牌；等级越高，名字与铭牌的光效越明显 */
body.h5-app #cPaneBattle .stage .h5-np.l .np-name-row{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  max-width:100%;vertical-align:top}
body.h5-app #cPaneBattle .stage .h5-np.l .np-name-row .np-n{
  max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap}
body.h5-app #cPaneBattle .stage .h5-np.l .np-vip{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-height:15px;height:18px;padding:0 6px 1px;box-sizing:border-box;border-radius:999px;
  border:1px solid rgba(232,198,106,.54);
  background:linear-gradient(180deg,rgba(64,49,30,.98),rgba(24,18,14,.98));
  color:#ffe7ad;font-family:inherit;font-weight:800;font-size:8.5px;line-height:1;letter-spacing:.45px;white-space:nowrap;
  text-shadow:0 0 6px rgba(255,205,110,.45);
  box-shadow:0 2px 7px rgba(0,0,0,.45),0 0 9px rgba(232,198,106,.24)}
body.h5-app #cPaneBattle .stage .h5-np.l .np-vip[data-vip-tier="0"]{display:none}
body.h5-app #cPaneBattle .stage .h5-np.l .np-vip[data-vip-tier="1"]{
  border-color:rgba(232,198,106,.78);background:linear-gradient(180deg,rgba(92,68,34,.98),rgba(29,21,15,.98));
  color:#fff0bd;box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 12px rgba(232,198,106,.35)}
body.h5-app #cPaneBattle .stage .h5-np.l .np-vip[data-vip-tier="2"]{
  border-color:rgba(125,205,255,.7);background:linear-gradient(180deg,rgba(35,60,92,.98),rgba(15,23,40,.98));
  color:#dff4ff;text-shadow:0 0 7px rgba(120,200,255,.7);
  box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 14px rgba(100,190,255,.42)}
body.h5-app #cPaneBattle .stage .h5-np.l .np-vip[data-vip-tier="3"]{
  border-color:rgba(196,150,255,.75);background:linear-gradient(180deg,rgba(58,36,92,.98),rgba(21,14,38,.98));
  color:#f0e0ff;text-shadow:0 0 8px rgba(190,130,255,.8);
  box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 16px rgba(170,100,255,.5)}
body.h5-app #cPaneBattle .stage .h5-np.l .np-vip[data-vip-tier="4"]{
  border-color:rgba(255,142,88,.8);background:linear-gradient(180deg,rgba(100,43,26,.98),rgba(36,16,14,.98));
  color:#ffe0c2;text-shadow:0 0 9px rgba(255,130,70,.8);
  box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 18px rgba(255,110,60,.55)}
body.h5-app #cPaneBattle .stage .h5-np.l .np-vip[data-vip-tier="5"]{
  border-color:rgba(255,228,140,.9);
  background:linear-gradient(90deg,rgba(110,63,24,.98),rgba(74,20,64,.98),rgba(22,56,78,.98),rgba(96,70,20,.98));
  color:#fff9d9;text-shadow:0 0 8px rgba(255,255,255,.8),0 0 18px rgba(255,190,90,.75);
  box-shadow:0 2px 9px rgba(0,0,0,.5),0 0 22px rgba(255,210,120,.65);
  animation:vipBadgeShimmer 3.2s ease-in-out infinite}
body.h5-app #cPaneBattle .stage .h5-np.l .np-n[data-vip-tier="1"]{
  border-color:rgba(232,198,106,.5);color:#fff2c9;
  box-shadow:0 4px 12px rgba(0,0,0,.45),0 0 14px rgba(232,198,106,.23)}
body.h5-app #cPaneBattle .stage .h5-np.l .np-n[data-vip-tier="2"]{
  border-color:rgba(125,205,255,.5);color:#e5f7ff;
  box-shadow:0 4px 12px rgba(0,0,0,.45),0 0 16px rgba(100,190,255,.3)}
body.h5-app #cPaneBattle .stage .h5-np.l .np-n[data-vip-tier="3"]{
  border-color:rgba(196,150,255,.55);color:#f3e9ff;
  box-shadow:0 4px 12px rgba(0,0,0,.45),0 0 18px rgba(170,100,255,.34)}
body.h5-app #cPaneBattle .stage .h5-np.l .np-n[data-vip-tier="4"]{
  border-color:rgba(255,142,88,.6);color:#fff0df;
  box-shadow:0 4px 12px rgba(0,0,0,.45),0 0 20px rgba(255,110,60,.4)}
body.h5-app #cPaneBattle .stage .h5-np.l .np-n[data-vip-tier="5"]{
  border-color:rgba(255,228,140,.7);color:#fff9dc;
  box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 24px rgba(255,205,110,.5)}
@keyframes vipBadgeShimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.28)}}
body.h5-app #cPaneBattle .stage .h5-np.l .np-title-line{margin-top:4px}
/* 手机中间模块整体收紧：装备卡、名字/称号牌按视觉比例缩小，不是统一缩放整页 */
@media(max-width:560px){
  body.h5-app #cPaneBattle .stage .h5-np.l .np-vip{height:16px;padding:0 5px;font-size:8px;letter-spacing:.3px}
  body.h5-app .cq-col{top:132px;gap:4px}
  body.h5-app .cq-slot{width:52px;height:46px;padding:2px 1px 1px;border-radius:9px;gap:0}
  body.h5-app .cq-ico{font-size:16px}
  body.h5-app .cq-nm{max-width:48px;font-size:7.5px;line-height:1.2}
  body.h5-app .cq-lv{top:1px;right:1px;font-size:7px;padding:0 1px}
  body.h5-app #cPaneBattle .stage .h5-np.l .np-n{font-size:10px;padding:1px 8px 2px;border-radius:7px}
  body.h5-app #cPaneBattle .stage .h5-np.l .np-title{font-size:9px;padding:1px 9px 2px;min-height:15px}
  body.h5-app #cPaneBattle .stage .h5-np.l .np-title-sw{font-size:8.5px;padding:1px 7px;min-height:16px}
  body.h5-app #cPaneBattle .stage .h5-np.r .np-n{font-size:10px}
  body.h5-app #cPaneBattle .stage .h5-np.r .np-lv,
  body.h5-app #cPaneBattle .stage .h5-np.r .np-tags{font-size:9px}
  body.h5-app #h5Out{font-size:11px}
}
/* 套装状态：独立一条，不再塞进宝石材料条 */
body.h5-app #cqSet{position:absolute;left:50%;top:84px;transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;justify-content:center;pointer-events:none}
body.h5-app #cqSet:empty{display:none}
body.h5-app #cqSet .cq-set-chip{pointer-events:auto}
/* 城内宝石库存条：祝福 / 灵魂 / 玛雅，一直可见，不用逐个点装备才看得到 */
body.h5-app #cqGems{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;gap:10px;padding:4px 12px;border-radius:999px;
  background:linear-gradient(180deg,rgba(24,19,40,.8),rgba(13,10,24,.9));
  border:1px solid rgba(150,136,190,.32);box-shadow:0 3px 12px rgba(0,0,0,.3);
  backdrop-filter:blur(6px);font-size:10px;line-height:1.1;color:#cfc6e4;white-space:nowrap}
body.h5-app #cqGems span{display:inline-flex;align-items:center;gap:3px}
body.h5-app #cqGems b{font-weight:600;color:#ffe9b2;font-size:11px}
body.h5-app:not(.h5-city) #cqGems{display:none!important}
/* 多端紧凑档：手机浏览器带地址栏/工具栏时可视高度偏矮，卡头、装备卡、金币都收一档 */
body.h5-app #h5AreaBar .zen{white-space:nowrap;flex:0 0 auto}
body.h5-app .cq-col{top:var(--h5-cq-top,154px);gap:var(--h5-cq-gap,7px)}
body.h5-app .cq-slot{width:var(--h5-cq-w,62px);height:var(--h5-cq-h,58px)}
body.h5-compact #h5AreaBar{gap:4px!important;padding:5px 7px!important;min-height:34px!important;font-size:11px!important}
body.h5-compact #h5AreaBar .ab-i{font-size:14px}
body.h5-compact #h5AreaBar .ab-lv{font-size:9px}
body.h5-compact #h5AreaBar .ab-go{font-size:9px!important;padding:1px 4px;min-height:17px;gap:1px}
body.h5-compact #h5AreaBar .zen{font-size:9px!important;padding:1px 4px!important;gap:0;line-height:1.15}
body.h5-compact #h5AreaBar .sync-dot{flex-basis:7px;width:7px;height:7px;min-width:7px}
body.h5-compact #h5AreaBar .hud-tools{gap:2px}
body.h5-compact #h5AreaBar .tb-btn{min-height:19px;min-width:19px;padding:1px 3px;font-size:9px!important}
/* h16s 手机浏览器带地址栏：用更高优先级压掉桌面卡头尺寸，避免 2478万 换行 */
body.h5-app.h5-compact #h5AreaBar{gap:4px!important;padding:5px 7px!important;min-height:34px!important;font-size:11px!important}
body.h5-app.h5-compact #h5AreaBar .ab-n{flex:1 1 auto}
body.h5-app.h5-compact #h5AreaBar .ab-i{font-size:14px}
body.h5-app.h5-compact #h5AreaBar .ab-lv{font-size:9px}
body.h5-app.h5-compact #h5AreaBar .ab-go{font-size:9px!important;padding:1px 4px;min-height:17px;gap:1px}
body.h5-app.h5-compact #h5AreaBar .zen{font-size:9px!important;padding:1px 4px!important;gap:0;line-height:1.15}
body.h5-app.h5-compact #h5AreaBar .sync-dot{flex-basis:7px;width:7px;height:7px;min-width:7px}
body.h5-app.h5-compact #h5AreaBar .hud-tools{gap:2px}
body.h5-app.h5-compact #h5AreaBar .tb-btn{min-height:19px;min-width:19px;padding:1px 3px;font-size:9px!important}
/* 真机非全屏：用 visualViewport 的真实高度覆盖 100vh/100dvh，浏览器工具栏收起/展开都跟着变 */
body.h5-app{height:var(--h5VH,100dvh)!important}
body.h5-app #game{height:calc(var(--h5VH,100dvh) - var(--h5TopH,36px))!important}
/* ===== BOSS 自动开关：怪物右下角环形按钮 =====
   原来战斗条里第 4 个 BOSS 键、药水行“遇野Boss”、功能抽屉“挑战B”三处重复。
   统一收成怪物右下角一枚圆环按钮：点一下开启自动打 BOSS，再点一下取消。 */
#h5BossOrb{position:absolute;right:26px;bottom:18%;display:none;
  width:46px;height:46px;padding:0;border-radius:50%;z-index:8;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:0;
  color:#f0c96b;background:radial-gradient(circle at 35% 28%,#3b2a58 0,#20142f 48%,#110b1c 100%);
  border:1px solid rgba(240,201,107,.62);
  box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 0 10px rgba(240,201,107,.10);
  transition:transform .15s ease,border-color .2s ease,box-shadow .2s ease}
#h5BossOrb::before{content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(240,201,107,.24);pointer-events:none;transition:.2s ease}
#h5BossOrb .bo-ico{font-size:17px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
#h5BossOrb .bo-txt{font-size:8px;line-height:1.1;margin-top:1px;letter-spacing:.5px;color:#d9c9a0;font-weight:600}
#h5BossOrb.on{border-color:rgba(255,224,140,.95);color:#ffe6a8;
  box-shadow:0 0 0 2px rgba(240,201,107,.18),0 0 18px rgba(240,201,107,.34),0 5px 16px rgba(0,0,0,.5)}
#h5BossOrb.on::before{border-color:rgba(255,224,140,.72);box-shadow:0 0 14px rgba(240,201,107,.25)}
#h5BossOrb.on .bo-txt{color:#ffe6a8}
#h5BossOrb.boss-ready::after{content:'';position:absolute;right:5px;top:5px;width:7px;height:7px;
  border-radius:50%;background:#ff5a66;box-shadow:0 0 7px rgba(255,74,90,.9)}
#h5BossOrb:active{transform:scale(.93)}
body.h5-inbattle #h5BossOrb{display:flex}
body.h5-city #h5BossOrb,
body.h5-app.h5-city #h5BossOrb{display:none!important}
@media(max-width:820px){
  #h5BossOrb{width:48px;height:48px;right:26px;bottom:18%}
  #h5BossOrb .bo-ico{font-size:18px}
  #h5BossOrb .bo-txt{font-size:8px}
}

/* 头像框 VIP 入口：只保留这一个入口，不再放进功能抽屉；放在头像正下方，避免压住头像 */
#h5Vs .vface-vip{position:absolute;left:50%;top:52px;transform:translateX(-50%);z-index:7;
  min-width:50px;height:18px;padding:0 7px;border-radius:999px;
  border:1px solid rgba(232,198,106,.65);background:linear-gradient(180deg,rgba(232,198,106,.22),rgba(20,17,28,.96));
  color:#ffe6a6;font:700 9px/16px inherit;white-space:nowrap;cursor:pointer;
  pointer-events:auto;box-shadow:0 0 8px rgba(232,198,106,.22)}
#h5Vs .vface-vip:active{transform:translateX(-50%) scale(.95)}
/* 自动药水入口：贴在玩家头像正下方（#h5Vs 左头像），点开设置弹窗 */
#h5Vs .vface-wrap{position:relative;flex:0 0 38px;width:38px;height:38px}
#h5Vs .vface-potion{position:absolute;left:50%;top:82px;transform:translateX(-50%);z-index:6}
/* 视觉尺寸保持不变，给两个小按钮扩大透明命中区；手机上避免双击缩放延迟 */
#h5Vs .vface-vip,
#h5Vs .vface-potion{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* 独立透明命中层：比视觉按钮大一圈，避免小按钮多次点不中；不影响原按钮样式 */
#h5Vs .vface-wrap .vface-hit{position:absolute;left:50%;transform:translateX(-50%);
  z-index:20;pointer-events:auto;background:transparent;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
#h5Vs .vface-wrap .vip-hit{top:47px;width:66px;height:28px;border-radius:0}
#h5Vs .vface-wrap .potion-hit{top:77px;width:40px;height:34px;border-radius:0}
@media(max-width:820px){
  #h5Vs .vface-wrap .potion-hit{top:76px}
}
@media(max-width:820px){
  #h5Vs .vface-potion{top:81px}
}
/* 自动药水设置弹窗 */
#potionSetModal .potion-set-card{max-width:350px}
#potionSetModal .potion-set-status{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0 12px;border-bottom:1px dashed rgba(255,255,255,.12)}
#potionSetModal .potion-set-txt{display:flex;flex-direction:column;gap:3px;text-align:left}
#potionSetModal .potion-set-txt b{font-size:13px;color:#f2e9d2}
#potionSetModal .potion-set-txt small{font-size:10.5px;color:#9a9284}
#potionSetModal .potion-switch{flex:0 0 auto;min-width:76px;height:32px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#b9b1a0;
  font:700 11px/1 inherit;cursor:pointer;transition:.15s}
#potionSetModal .potion-switch.on{border-color:rgba(232,198,106,.8);background:rgba(232,198,106,.16);color:#ffe3a0}
#potionSetModal .potion-set-stock{padding:9px 0 2px;font-size:11px;color:#9a9284}
#potionSetModal .potion-set-stock span{color:#e8c66a;font-variant-numeric:tabular-nums}
#potionSetModal .potion-set-rule{display:flex;flex-direction:column;gap:5px;margin-top:8px;
  font-size:10.5px;line-height:1.65;color:#b9b1a0}
#potionSetModal .potion-set-rule div{text-align:left}
/* 状态说明浮层：点图标再次点击可收起，点其它地方/×/Esc 也能关闭 */
#h5STip .t-x{position:absolute;right:4px;top:3px;width:20px;height:20px;padding:0;
  border:0;background:transparent;color:#9a93b5;font:400 16px/18px inherit;cursor:pointer;
  pointer-events:auto}
#h5STip .t-x:hover,#h5STip .t-x:active{color:#ffd978}
#h5STip .t-h{padding-right:16px}
/* 固定后的状态说明要能接收 × 点击；悬停时仍由图标的 mouseleave 收起 */
#h5STip{pointer-events:auto}
/* 移动端点击战斗区域/自动BOSS时，浏览器默认的 tap-highlight 会在整个可点容器上铺一层高亮，
   在部分安卓浏览器会显示成大面积蓝色遮罩。战斗区统一关闭点击高亮，并禁用文本选择与长按菜单。 */
body.h5-app,
body.h5-app *{-webkit-tap-highlight-color:transparent!important}
body.h5-app .stage,
body.h5-app .stage *,
body.h5-app .stage-main,
body.h5-app .stage-main *,
body.h5-app #h5Vs,
body.h5-app #h5Vs *,
body.h5-app .hud,
body.h5-app .hud *{
  -webkit-user-select:none!important;user-select:none!important;
  -webkit-touch-callout:none!important;
  touch-action:manipulation}