/* 指尖奇迹 · 游戏界面样式（由单文件版原样式抽出） */
  :root{
    --bg:#0c0a14; --panel:#16121f; --panel2:#1f1830; --line:#332b4a;
    --gold:#e8c66a; --red:#e0494b; --blue:#5aa9e6; --green:#6fcf73;
    --txt:#e7e2f0; --dim:#9b93b3; --purple:#a472e0;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:radial-gradient(circle at 50% -10%,#241b36,#0c0a14 60%);color:var(--txt);min-height:100vh}
  h1,h2,h3{margin:0;font-weight:700}
  .center{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px;width:100%;max-width:560px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .logo{text-align:center;margin-bottom:18px}
  .logo h1{font-size:30px;letter-spacing:3px;background:linear-gradient(90deg,var(--gold),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
  .logo p{color:var(--dim);font-size:13px;margin-top:6px;letter-spacing:1px}
  label{display:block;font-size:13px;color:var(--dim);margin:14px 0 6px}
  input,select{width:100%;padding:11px 12px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:16px;outline:none}
  input:focus,select:focus{border-color:var(--gold)}
  .btn{display:block;width:100%;padding:12px;margin-top:18px;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:1px;transition:.15s}
  .btn-gold{background:linear-gradient(90deg,var(--gold),#caa24a);color:#1a1305}
  .btn-gold:hover{filter:brightness(1.1)}
  .btn-ghost{background:transparent;border:1px solid var(--line);color:var(--dim)}
  .btn-ghost:hover{border-color:var(--gold);color:var(--txt)}
  .switch{text-align:center;margin-top:14px;font-size:13px;color:var(--dim);cursor:pointer}
  .switch b{color:var(--gold)}
  .err{color:var(--red);font-size:12px;margin-top:8px;min-height:14px}
  .class-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
  .cls{border:1px solid var(--line);border-radius:10px;padding:12px 8px;text-align:center;cursor:pointer;background:var(--panel2);transition:.15s}
  .cls:hover{border-color:var(--gold)}
  .cls.active{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,198,106,.25) inset}
  .cls .ico{font-size:30px;height:58px;display:flex;align-items:center;justify-content:center}
  .cls .ico img{width:56px;height:56px;object-fit:cover;border-radius:8px;display:block;border:1px solid var(--line)}
  .cls.active .ico img{border-color:var(--gold)}
  .cls .nm{font-weight:700;margin-top:6px;font-size:15px}
  .cls .ti{font-size:11px;color:var(--dim)}
  .cls .st{font-size:10px;color:var(--dim);margin-top:6px;line-height:1.5}

  /* game layout */
  #game{display:none;max-width:1080px;margin:0 auto;padding:14px;gap:14px}
  .topbar{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .ava{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--panel2);border:1px solid var(--line)}
  .who{line-height:1.4}
  .who .nm{font-weight:700;font-size:16px}
  .who .cl{font-size:12px;color:var(--dim)}
  .bars{flex:1;min-width:260px}
  .bar{display:flex;align-items:center;gap:8px;font-size:12px;margin:3px 0}
  .bar .k{width:34px;color:var(--dim)}
  .track{flex:1;height:13px;background:var(--panel2);border-radius:7px;overflow:hidden;border:1px solid var(--line)}
  .fill{height:100%;transition:.25s}
  .hp .fill{background:linear-gradient(90deg,#e0494b,#ff7a6e)}
  .mp .fill{background:linear-gradient(90deg,#5aa9e6,#7fd0ff)}
  .xp .fill{background:linear-gradient(90deg,#a472e0,#c79bff)}
  .bar .v{width:96px;text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
  .zen{color:var(--gold);font-weight:700;font-size:15px}
  .layout{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:14px;margin-top:14px}
  @media(max-width:920px){.layout{grid-template-columns:1fr}}
  .box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
  .box h3{font-size:14px;color:var(--gold);letter-spacing:1px;margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:8px}
  .stat{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px dashed #241d33}
  .stat .pts{display:flex;align-items:center;gap:8px}
  .stat .val{color:var(--txt);font-weight:700;min-width:30px;text-align:right}
  .plus{cursor:pointer;background:var(--gold);color:#1a1305;border:none;border-radius:6px;width:22px;height:22px;font-weight:700;font-size:14px;line-height:1;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-touch-callout:none}
  .plus:disabled{opacity:.3;cursor:not-allowed}
.plus.bulk{width:auto;min-width:30px;height:21px;padding:0 4px;font-size:10px;border-radius:5px;background:#4a3d6b;color:#f0e6ff}
.plus.bulk:hover:not(:disabled){background:#5d4d85}
.stat .pts{gap:4px;flex-wrap:wrap;justify-content:flex-end}
  .free{color:var(--green);font-weight:700}
  .mon{text-align:center;padding:10px}
  .mon .ico{font-size:54px}
  .mon .nm{font-weight:700;font-size:17px;margin-top:4px}
  .mon .lv{color:var(--dim);font-size:12px}
  .mon .mhp{margin-top:10px}
  .actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
  .act{padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);cursor:pointer;font-size:13px;font-weight:700;transition:.15s}
  .act:hover{border-color:var(--gold)}
  .act:disabled{opacity:.4;cursor:not-allowed}
  .act.skill{color:var(--purple)}
  .act.auto{color:var(--green)}
  .skbar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
  .skchip{padding:6px 2px 7px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);cursor:pointer;font-weight:700;line-height:1.3;text-align:center;transition:.15s;font-family:inherit}
  .skchip:hover{border-color:var(--gold)}
  .skchip .sic{font-size:17px;line-height:1.15}
  .skchip .snm{font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .skchip .smp{font-size:9.5px;color:var(--dim);margin-top:2px}
  .skchip.ready{border-color:rgba(232,198,106,.55)}
  .skchip.nomp{opacity:.62}
  .skchip.nomp .smp{color:var(--red)}
  .skchip.lock{opacity:.42;cursor:not-allowed}
  .skchip.lock .sic{filter:grayscale(1)}
  .skchip.cool{opacity:.6;border-color:rgba(164,114,224,.45)}
  .skchip.cool .smp{color:var(--purple)}
  .skill-up-btn{display:inline-block;margin-left:3px;padding:0 4px;font-size:9px;font-weight:800;border:1px solid var(--gold);border-radius:4px;background:rgba(232,198,106,.18);color:var(--gold);cursor:pointer;vertical-align:middle;line-height:1.5}
  .skill-up-btn:hover{background:var(--gold);color:#1a1a1a}
  .act.cool{color:var(--purple);opacity:.75}
  .act.city{color:var(--gold)}
  .cityhint{grid-column:1/3;text-align:center;font-size:11px;color:var(--dim);padding:2px 0 0}
  .log{height:230px;overflow-y:auto;font-size:12.5px;line-height:1.7;background:#0a0810;border:1px solid var(--line);border-radius:8px;padding:10px}
  .log div{border-bottom:1px solid #18121f;padding:2px 0}
  .c-sys{color:var(--dim)} .c-me{color:var(--green)} .c-mon{color:var(--red)} .c-loot{color:var(--gold)} .c-lv{color:var(--blue)} .c-crit{color:var(--purple);font-weight:700}
  .inv{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
  .item{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:7px 10px}
  .item .r-common{color:#cfc8e0} .item .r-good{color:#6fcf73} .item .r-exc{color:#5aa9e6} .item .r-set{color:#e8c66a} .item .r-evil{color:#e0494b}
  .item .eq{cursor:pointer;color:var(--gold);font-size:11px;border:1px solid var(--line);border-radius:5px;padding:2px 7px}
  .equip{font-size:12.5px;line-height:1.9}
  .equip b{color:var(--gold)}
  #areaList{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .area{cursor:pointer;font-size:11.5px;padding:5px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);transition:.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .area:hover{border-color:var(--gold)}
  .area.active{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,198,106,.2) inset}
  .area .lk{color:var(--red);font-size:10px;margin-left:2px}
  .toast{position:fixed;left:50%;top:24px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--gold);color:var(--gold);padding:10px 18px;border-radius:8px;font-size:13px;opacity:0;transition:.3s;pointer-events:none;z-index:50}
  .toast.show{opacity:1}
  .modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.68);display:none;align-items:center;justify-content:center;z-index:100;padding:18px}
  .modal-mask.show{display:flex}
  .modal-card{background:var(--panel);border:1px solid var(--gold);border-radius:14px;padding:20px;width:100%;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
  .modal-card h3{color:var(--gold);font-size:16px;margin-bottom:12px;text-align:center;letter-spacing:1px}
  .modal-card .row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line)}
  .modal-card .row b{color:var(--gold);font-variant-numeric:tabular-nums}
  .modal-card .sub{color:var(--dim);font-size:11.5px;text-align:center;margin-top:10px;line-height:1.6}
  /* VIP：金色等级头 + 成长条 + 特权列表 */
  .vip-card{border-color:#d9b65a;background:linear-gradient(180deg,#2a2117,#15120e 62%)}
  .vip-hero{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 10px}
  .vip-hero .vip-lv{font-size:13px;color:#f2d78a;letter-spacing:1px}
  .vip-hero .vip-lv b{font-size:24px;line-height:1;margin-left:4px;color:#ffd76a;text-shadow:0 0 12px rgba(255,190,60,.45)}
  .vip-hero .vip-growth{font-size:11px;color:var(--dim);text-align:right;line-height:1.5}
  .vip-bar{height:9px;border:1px solid rgba(217,182,90,.4);border-radius:99px;background:#0c0a07;overflow:hidden;margin:0 0 12px}
  .vip-bar i{display:block;height:100%;background:linear-gradient(90deg,#8a6320,#ffd76a);border-radius:99px;min-width:2px}
  .vip-sec{font-size:11px;color:#c8a95d;letter-spacing:1px;margin:11px 0 2px}
  .vip-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.07);font-size:12px;color:var(--dim)}
  .vip-row b{color:#ffd76a;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
  .vip-claim{width:100%;margin-top:12px;border-color:#d9b65a!important;color:#ffd76a!important;background:rgba(185,135,35,.12)!important}
  .vip-claim[disabled]{opacity:.55}
  .logout{font-size:12px;color:var(--dim);cursor:pointer;margin-left:auto}
  .empty{color:var(--dim);font-size:12px;text-align:center;padding:14px}
  .tabs{display:flex;gap:6px;margin-bottom:8px}
  .tab{flex:1;text-align:center;font-size:12px;padding:5px 0;border:1px solid var(--line);border-radius:6px;cursor:pointer;background:var(--panel2);color:var(--dim);transition:.15s}
  .tab.active{border-color:var(--gold);color:var(--gold)}
  .mini{font-size:12px;padding:7px 10px;border-radius:7px;border:1px solid var(--gold);background:transparent;color:var(--gold);cursor:pointer;width:100%;margin-top:8px;font-weight:700;transition:.15s}
  .mini:hover{background:rgba(232,198,106,.12)}
  .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
  .chip{font-size:11px;padding:4px 9px;border-radius:6px;border:1px solid var(--line);cursor:pointer;background:var(--panel2);color:var(--dim);transition:.15s}
  .chip.active{border-color:var(--red);color:var(--red)}
  /* z136 回收分类改成「品质 / 类型 / 自动开关 / 等级上限」四行分组，
     每行用 .ch-row 自己换行，避免 7+3+2 个 chip 挤成一条看不清 */
  .ch-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
  .ch-row .chip{font-size:10.5px;padding:3px 8px}
  .chip.gray{opacity:.72}
  .chip.gray.active{border-color:var(--gold,#e8c66a);color:var(--gold,#e8c66a);opacity:1}

  /* 可视化对战场景 */
  .stage{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(180deg,#0a0810,#15101f);border:1px solid var(--line);border-radius:12px;padding:18px 14px;position:relative;overflow:hidden;min-height:150px}
  .stage::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(232,198,106,.06),transparent 60%);pointer-events:none}
  .fighter{position:relative;display:flex;flex-direction:column;align-items:center;width:calc(50% - 28px);min-width:0}
  .fighter .fhp{width:100%}
  .fighter .ava-big{font-size:54px;line-height:1;margin:8px 0;filter:drop-shadow(0 5px 8px rgba(0,0,0,.6));transition:transform .1s}
  .fighter .ava-big img{width:62px;height:62px;object-fit:contain;display:block;border-radius:8px;pointer-events:none}
  .fighter .s3d-load{position:absolute;inset:0;z-index:2;display:none;
    align-items:center;justify-content:center;pointer-events:none;
    font-size:10.5px;letter-spacing:1px;color:rgba(216,206,240,.66);
    text-shadow:0 1px 3px rgba(0,0,0,.8)}
  .fighter .s3d-load::after{content:'';position:absolute;left:50%;top:50%;
    width:16px;height:16px;margin:6px 0 0 10px;border-radius:50%;
    border:1px solid rgba(232,198,106,.35);border-top-color:rgba(232,198,106,.9);
    animation:s3dSpin .9s linear infinite}
  @keyframes s3dSpin{to{transform:rotate(360deg)}}
  .fighter .fname{font-size:13px;font-weight:700;text-align:center;white-space:normal;word-break:break-word;line-height:1.3}
  .fighter .flv{font-size:11px;color:var(--dim);text-align:center;white-space:normal;line-height:1.35}
  .fighter .mn-tags{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;max-width:100%}
  .fighter .mn-tag{font-size:9.5px;line-height:1.4;padding:0 4px;border-radius:4px;
    background:rgba(232,198,106,.10);border:1px solid rgba(232,198,106,.28);color:#ffd9a8;white-space:nowrap}
  .vs{font-size:22px;color:var(--dim);opacity:.55}
  .fighter.lunge-r{animation:lungeR .4s ease}
  .fighter.lunge-l{animation:lungeL .4s ease}
  /* 受击只做红闪，位移抖动已废弃（真正的受击改由骨骼序列帧承担，残留抖动会和动作帧重叠） */
  .fighter.hit .ava-big{filter:drop-shadow(0 0 8px var(--red)) brightness(1.4)}
  @keyframes lungeR{0%{transform:translateX(0)}40%{transform:translateX(30px)}100%{transform:translateX(0)}}
  @keyframes lungeL{0%{transform:translateX(0)}40%{transform:translateX(-30px)}100%{transform:translateX(0)}}
  @keyframes hitShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
  .fighter.crit-flash .ava-big{animation:critFlash .3s ease}
  @keyframes critFlash{0%{filter:brightness(1) drop-shadow(0 0 0 #fff)}30%{filter:brightness(2.5) drop-shadow(0 0 18px #e049ff)}100%{filter:brightness(1) drop-shadow(0 0 0 #fff)}}
  .fighter.cast .ava-big{animation:castGlow .35s ease}
  @keyframes castGlow{0%{filter:drop-shadow(0 0 0 #5aa9e6) brightness(1)}50%{filter:drop-shadow(0 0 16px #9fd0ff) brightness(1.6)}100%{filter:drop-shadow(0 0 0 #5aa9e6) brightness(1)}}
  .vs-screen{animation:screenShake .25s ease}
  @keyframes screenShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}}
  .dmg{position:absolute;top:6px;left:50%;font-weight:800;font-size:20px;pointer-events:none;animation:dmgFloat .8s ease forwards;text-shadow:0 2px 4px #000;z-index:5}
  .dmg.crit{color:var(--purple);font-size:27px;animation:dmgCrit .9s ease forwards}
  .dmg.norm{color:#ffd56b}
  .dmg.enemy{color:var(--red)}
  .dmg.combo{color:#7fd6a8;font-size:18px}
  @keyframes dmgFloat{0%{opacity:0;transform:translate(-50%,0)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-42px)}}
  @keyframes dmgCrit{0%{opacity:0;transform:translate(-50%,0) scale(.5)}20%{opacity:1;transform:translate(-50%,-10px) scale(1.3)}100%{opacity:0;transform:translate(-50%,-50px) scale(1)}}

  /* 药水商店 */
  .potion-row{display:flex;gap:6px;margin-top:10px;align-items:center;flex-wrap:wrap}
  .pbtn{flex:1;min-width:62px;padding:8px 4px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);cursor:pointer;font-size:11px;font-weight:700;line-height:1.5;text-align:center;transition:.15s}
  .pbtn:hover{border-color:var(--gold)}
  .pbtn.hp{border-color:rgba(224,73,75,.45)}
  .pbtn.mp{border-color:rgba(90,169,230,.45)}
  .pbtn:disabled{opacity:.4;cursor:not-allowed}
  .cd{font-size:12px;color:var(--red);margin-left:4px}

  /* 触屏优化 */
  button, .tab, .chip, .area, .cls, .eq{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

  /* 手机端适配 */
  @media (max-width:600px){
    .center{padding:12px}
    .card{padding:20px}
    #game{padding:8px;gap:8px}
    .layout{grid-template-columns:1fr;gap:8px}
    .box{padding:12px}
    .topbar{padding:10px 12px;gap:10px}
    .ava{width:38px;height:38px;font-size:22px}
    .actions{grid-template-columns:1fr 1fr;gap:8px}
    .act{padding:13px;font-size:14px}
    .potion-row{gap:5px;margin-top:8px}
    .pbtn{padding:10px 2px;font-size:12px}
    .stage{padding:14px 8px;min-height:120px}
    .fighter .ava-big{font-size:44px}
    .fighter .ava-big img{width:50px;height:50px}
    .log{height:180px}
    .logout{font-size:11px}
    .stat .val{min-width:26px}
    .plus{width:26px;height:26px;font-size:16px}
    .plus.bulk{height:26px;min-width:40px;padding:0 4px;font-size:11px}
    .class-grid{grid-template-columns:1fr 1fr 1fr;gap:6px}
    .cls .ico{height:44px}
    .cls .ico img{width:40px;height:40px}
  }

  /* ===== 新增功能样式 ===== */
  .title-display{font-size:12px;color:var(--gold);margin-left:8px;padding:2px 8px;background:rgba(232,198,106,.1);border-radius:6px;border:1px solid rgba(232,198,106,.3)}
  .rebirth-btn{display:block;width:100%;padding:10px;margin-top:8px;border:1px solid var(--gold);border-radius:8px;background:linear-gradient(135deg,rgba(232,198,106,.15),rgba(232,198,106,.05));color:var(--gold);font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
  .rebirth-btn:hover{background:rgba(232,198,106,.25)}
  .rebirth-btn:disabled{opacity:.4;cursor:not-allowed}
  .shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
  .shop-item{border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--panel2);font-size:12px;text-align:center}
  .shop-item .si-name{font-weight:700;color:var(--gold);margin-bottom:4px}
  .shop-item .si-desc{color:var(--dim);font-size:11px;margin-bottom:6px;line-height:1.4}
  .shop-item .si-price{color:var(--gold);font-weight:700}
  .shop-item button{margin-top:6px;width:100%;padding:5px;border:1px solid var(--gold);background:transparent;color:var(--gold);border-radius:5px;cursor:pointer;font-size:11px;font-weight:700}
  .shop-item button:hover{background:rgba(232,198,106,.15)}
  .tower-info{font-size:12px;line-height:1.8;color:var(--dim)}
  .tower-info b{color:var(--gold)}
  .worldboss-panel{border:1px solid #e0494b;border-radius:10px;padding:10px;margin-top:10px;background:rgba(224,73,75,.08)}
  .skill-up-btn{font-size:9px;padding:1px 5px;border:1px solid var(--gold);background:transparent;color:var(--gold);border-radius:4px;cursor:pointer;margin-left:2px}
  .socket-info{font-size:10px;color:var(--dim);margin-top:2px}
  .arena-stats{font-size:12px;line-height:1.8}

/* ===== 站点化新增：顶部导航 / 战力 / 存档中心 ===== */
.site-nav{max-width:1080px;margin:0 auto;padding:12px 14px 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.site-nav .brand{font-weight:800;letter-spacing:2px;color:var(--gold);font-size:15px}
.site-nav .brand small{color:var(--dim);font-weight:400;letter-spacing:0;margin-left:6px;font-size:11px}
.site-nav .links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.site-nav .links a{font-size:12px;color:var(--dim);text-decoration:none;padding:5px 10px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);transition:.15s}
.site-nav .links a:hover{border-color:var(--gold);color:var(--gold)}
.site-nav .links a.on{border-color:var(--gold);color:var(--gold);background:rgba(232,198,106,.1)}
/* 加了导航之后，登录页要减去导航高度，避免出现竖向滚动条 */
#auth.center{min-height:calc(100vh - 58px)}

.power-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:4px 10px;border-radius:20px;border:1px solid rgba(232,198,106,.35);background:rgba(232,198,106,.08);color:var(--gold);white-space:nowrap}
.power-chip b{font-variant-numeric:tabular-nums}
.vip-chip{color:#ffd76a;border-color:rgba(255,215,106,.5);background:rgba(185,135,35,.1)}
.tb-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.tb-tools .tb-btn{font-size:12px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--dim);cursor:pointer;transition:.15s;font-family:inherit}
.tb-tools .tb-btn:hover{border-color:var(--gold);color:var(--gold)}

/* 登录页附加入口 */
.auth-links{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.auth-links a{font-size:12px;color:var(--dim);text-decoration:none;padding:5px 10px;border:1px solid var(--line);border-radius:7px;background:var(--panel2)}
.auth-links a:hover{border-color:var(--gold);color:var(--gold)}

/* 快照列表 */
.save-help{margin-top:10px;padding:9px 10px 7px;border:1px solid rgba(232,198,106,.22);border-radius:9px;background:rgba(255,255,255,.03)}
.save-help-t{font-size:11.5px;font-weight:700;color:var(--gold);margin-top:5px;line-height:1.5}
.save-help-t:first-child{margin-top:0}
.save-help-sub{font-size:11px;color:var(--dim);line-height:1.6;margin-top:2px}
.snap-list{margin-top:6px;display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto}
.snap-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.snap-meta{display:flex;flex-direction:column;line-height:1.4}
.snap-meta b{font-size:12px;color:var(--txt);font-variant-numeric:tabular-nums}
.snap-meta span{font-size:11px;color:var(--dim)}
.mini.tiny{width:auto;margin:0;padding:5px 12px;font-size:11px}
.save-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.save-actions .mini{margin-top:0;font-size:11.5px}
.save-actions .danger{color:#ff7676;border-color:rgba(255,118,118,.34)}

/* 弹窗内部滚动 */
#saveBody,#statsBody{max-height:62vh;overflow-y:auto}

/* ============================================================
   v3 布局重构：信息分层 / 数字压缩 / 端游视觉资产接入
   ============================================================ */

/* 站点导航标志 */
.brand-mark{width:20px;height:20px;margin-right:7px;vertical-align:-4px;object-fit:contain}

/* 登录卡：端游启动器主视觉 */
.auth-card{padding:0;overflow:hidden;max-width:520px}
.auth-keyart{position:relative}
.auth-keyart img{width:100%;height:158px;object-fit:cover;display:block;opacity:.9}
.auth-keyart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,20,.1),rgba(12,10,20,.95))}
.auth-logo{width:62px;height:62px;display:block;margin:0 auto 6px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(232,198,106,.4))}
.auth-card .logo{padding:16px 26px 0}
.auth-card #authForm{padding:0 26px 26px}

/* 主容器 */
#game{max-width:1320px;padding:16px 18px 30px}
.layout{grid-template-columns:296px minmax(0,1fr) 322px;align-items:start;gap:14px}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.col-main{gap:14px}

/* 顶部状态条 */
.topbar{display:grid;grid-template-columns:auto minmax(260px,1fr) auto auto;gap:16px;align-items:center;padding:12px 16px}
.topbar .tb-id{display:flex;align-items:center;gap:10px}
.topbar .bars{display:flex;flex-direction:column;justify-content:center}
.topbar .tb-figures{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.topbar .tb-tools{margin-left:0}
.bar .v{width:112px;font-size:11.5px}
.zen{font-size:13px}
.power-chip{font-size:11.5px}

/* 面板统一头 */
.box-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.box-head h3{margin:0;padding:0;border:none;font-size:13px;letter-spacing:1.5px;color:var(--gold)}
.box-head .hint{font-size:11px;color:var(--dim);font-weight:400}
.box-head .hint b{color:var(--gold)}

/* 属性分配 */
.stat-list .stat{padding:6px 0}
.stat .val{min-width:46px}
.pts-tip{font-size:10.5px;color:var(--dim);line-height:1.6;margin:8px 0 0}
.rebirth-info{font-size:11px;color:var(--dim);margin-top:6px;line-height:1.6}

/* 派生属性表 */
.derived{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden;margin:10px 0 0;font-size:12px}
.derived .dv{background:#1a1528;padding:6px 9px;display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.derived .dv span{color:var(--dim);font-size:11px}
.derived .dv b{font-variant-numeric:tabular-nums;font-size:12.5px}
.derived .dv.full{grid-column:1/-1}

/* 装备列表：名称 / 数值 / 操作 三段对齐 */
.equip{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.45}
.eqrow{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 2px;border-bottom:1px dashed #241d33}
.eqrow .sico{font-size:14px;text-align:center;opacity:.9}
.eqrow .meta{min-width:0;line-height:1.35}
.eqrow .meta .nm{font-weight:700;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eqrow .meta .sub{font-size:10.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eqrow .val{font-size:11.5px;color:#cfc8e0;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.eqrow .ops{grid-column:2/-1;display:flex;gap:5px;flex-wrap:wrap;margin-top:1px}
.eqrow .ops .eq{padding:1px 7px}
.eqrow.empty{text-align:left;padding:5px 2px}
.eqrow.empty .nm{color:var(--dim);font-weight:400}
.eqopts{grid-column:2/-1;font-size:10px;color:#7fd6a8;line-height:1.5}
.eqset{grid-column:2/-1;font-size:10px;color:#c9a8ff}

/* 宝石 */
#jewelList .eqrow .val{color:var(--txt)}
.btn-row{display:flex;gap:6px;margin-top:8px}
.btn-row .mini{margin-top:0;font-size:11px;padding:6px 4px}

/* 战斗舞台 */
.stage{padding:16px 18px}
.fighter .rec{display:flex;align-items:center;gap:10px}
.fighter .fname{font-size:13px}

/* 药品按钮 */
.pbtn{padding:7px 4px;line-height:1.45}
.pbtn i{font-style:normal;font-size:10px;color:var(--dim);font-weight:400}

/* 自动化开关：两列卡片 */
.switches{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.sw{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11.5px;color:var(--dim);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px 9px}
.sw .tab{flex:0 0 auto;min-width:52px;padding:4px 0;font-weight:700}
.sw-note{grid-column:1/-1;font-size:10.5px;color:var(--dim);line-height:1.5;margin-top:2px}

/* 挑战BOSS 卡片 */
.challenge-card{border:1px solid #4a3a52;border-radius:11px;padding:12px;background:linear-gradient(180deg,rgba(224,73,75,.07),rgba(22,18,31,.4));margin-top:12px}
.ch-boss{font-size:13.5px;margin-bottom:4px;line-height:1.4}
.ch-boss b{color:var(--gold)}
.ch-note{font-size:10.5px;color:var(--dim);margin-top:6px;line-height:1.55}
.ch-mats{font-size:11.5px;margin-top:8px}
.ch-mats b{color:var(--gold);font-variant-numeric:tabular-nums}

/* 城市服务 */
.city-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.city-row .mini{margin-top:0}

/* 日志 */
.box-log{margin-top:0}
.log{height:190px}

/* 练功区：带端游地形缩略图 */
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.area{display:flex;align-items:center;gap:4px;padding:4px 6px}

.area .an{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px}
.area .lk{font-size:9px;flex:0 0 auto;margin-left:auto}

/* 背包 / 回收 */
.inv{max-height:340px}
.item{padding:6px 9px;gap:2px 8px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.item .il{display:flex;align-items:baseline;gap:6px;min-width:0;overflow:hidden}
.item .il .rcls{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.item .il small{flex:0 0 auto;font-size:10.5px;color:#b9a8d6}
.item .ir{display:flex;align-items:center;gap:4px;justify-content:flex-end;flex-wrap:nowrap}
.item .ir .eq{white-space:nowrap}
.item .iopts{grid-column:1/-1;font-size:10px;color:#7fd6a8;line-height:1.5;margin-top:1px}

/* 战斗舞台血条（.fill.hp 不在 .hp 后代里，需单独上色） */
.fill.hp{background:linear-gradient(90deg,#e0494b,#ff7a6e)}
/* BOSS 狂暴：血条转为橙红并带发光，和普通怪一眼区分 */
.fill.hp.enraged{background:linear-gradient(90deg,#ff3b1f,#ffb43b);box-shadow:0 0 10px rgba(255,90,20,.75);animation:enragePulse .9s ease-in-out infinite}
@keyframes enragePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.45)}}
.fill.mp{background:linear-gradient(90deg,#5aa9e6,#7fd0ff)}

/* 响应式 */
@media(max-width:1180px){
  .layout{grid-template-columns:270px minmax(0,1fr)}
  .col-side{display:none}
}
@media(max-width:980px){
  .layout{grid-template-columns:1fr}
  .topbar{grid-template-columns:1fr auto;gap:10px}
  .topbar .bars{grid-column:1/-1}
  .topbar .tb-figures{flex-direction:row;gap:10px;align-items:center}
}
@media(max-width:600px){
  #game{padding:8px}
  .auth-keyart img{height:110px}
  .area-grid{grid-template-columns:1fr}
  .potion-row{gap:5px}
}

/* ============ 服务端存档：同步状态 & 选角 ============ */
.sync-dot{
  margin-left:10px; padding:2px 8px; border-radius:10px; font-size:11.5px;
  border:1px solid var(--line); color:var(--dim); white-space:nowrap;
}
.sync-dot.ok{ color:#5fd48c; border-color:rgba(95,212,140,.35); background:rgba(95,212,140,.08); }
.sync-dot.err{ color:#ff8a8a; border-color:rgba(255,138,138,.35); background:rgba(255,138,138,.08); }

#pickWrap{ margin-top:6px; }
#pickList{ display:flex; flex-direction:column; gap:8px; margin:6px 0 4px; }
.pick-row{
  display:flex; align-items:center; gap:8px; padding:9px 10px;
  border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02);
}
.pick-row .pick-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pick-row .pick-info b{ font-size:14px; color:var(--gold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick-row .pick-info span{ font-size:11.5px; color:var(--dim); }
.pick-row .mini{ width:auto; margin-top:0; padding:5px 10px; font-size:11.5px; flex:0 0 auto; }


/* ============================================================
 * 推荐加点 / PC 攻击特效 / 副本 / 组队（20261108b）
 * ============================================================ */

/* ---- 推荐加点 ---- */
.rec-build{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:10px 11px;background:linear-gradient(180deg,#1b1626,#151120)}
.rec-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;margin-bottom:8px}
.rec-head b{color:var(--gold);font-size:12.5px}
.rec-head span{color:var(--dim);font-size:11px}
.rec-row{display:flex;align-items:center;gap:7px;margin:5px 0;font-size:11.5px}
.rec-k{width:34px;color:var(--txt);font-weight:700}
.rec-track{position:relative;flex:1;height:9px;border-radius:6px;background:#0e0b16;border:1px solid var(--line);overflow:hidden}
.rec-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,#5a4a1f,#e8c66a);transition:width .25s}
.rec-fill.s-str{background:linear-gradient(90deg,#5c2424,#e0494b)}
.rec-fill.s-agi{background:linear-gradient(90deg,#1f4a2e,#4fbf7a)}
.rec-fill.s-vit{background:linear-gradient(90deg,#4a3a1a,#e8c66a)}
.rec-fill.s-ene{background:linear-gradient(90deg,#1d3a5c,#5aa9e6)}
.rec-now{position:absolute;top:-2px;width:2px;height:13px;background:#fff;opacity:.85;box-shadow:0 0 6px #fff}
.rec-v{width:62px;text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
.rec-v small{display:block;font-size:9.5px;opacity:.8}
.rec-note,.rec-tip{font-size:11px;line-height:1.65;color:var(--dim);margin-top:7px}
.rec-tip{color:#9fd0ff}
.rec-btn{width:100%;margin-top:9px;border-color:var(--gold)!important;color:var(--gold)!important;font-weight:800}

/* ---- PC 攻击演出 ---- */
.fx-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.fx-ghost{position:absolute;display:flex;align-items:center;justify-content:center;opacity:.45;filter:blur(1px) drop-shadow(0 0 10px #7fa8ff);animation:ghostFade .38s ease forwards}
.fx-ghost img{width:100%;height:100%;object-fit:contain}
@keyframes ghostFade{0%{opacity:.5;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateX(26px) scale(1.06)}}
.fx-proj{position:absolute;font-size:19px;line-height:1;filter:drop-shadow(0 0 8px #ffef9f);transition:transform .28s cubic-bezier(.3,.7,.6,1),opacity .28s;z-index:7}
.fx-slash{position:absolute;width:76px;height:76px;background:conic-gradient(from -35deg,rgba(255,255,255,0) 0deg,rgba(255,246,210,.95) 22deg,rgba(255,255,255,0) 46deg);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 26%,#000 30%,#000 42%,transparent 50%);mask:radial-gradient(circle at 50% 50%,transparent 26%,#000 30%,#000 42%,transparent 50%);animation:slashCut .34s ease-out forwards;z-index:8}
.fx-slash.crit{width:104px;height:104px;background:conic-gradient(from -35deg,rgba(255,255,255,0) 0deg,rgba(224,73,255,.95) 24deg,rgba(255,255,255,0) 50deg)}
@keyframes slashCut{0%{opacity:0;transform:rotate(-26deg) scale(.4)}28%{opacity:1}100%{opacity:0;transform:rotate(12deg) scale(1.25)}}
.fx-ring{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid #ffe9a8;box-shadow:0 0 14px #ffd76b;animation:ringBurst .4s ease-out forwards;z-index:8}
.fx-ring.crit{border-color:#e049ff;box-shadow:0 0 20px #e049ff}
@keyframes ringBurst{0%{opacity:.9;transform:scale(.35)}100%{opacity:0;transform:scale(3.4)}}
.fx-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe9a8;box-shadow:0 0 6px #ffd76b;animation:sparkFly .46s ease-out forwards;z-index:9}
.fx-spark.crit{width:4px;height:4px;background:#f1a6ff;box-shadow:0 0 8px #e049ff}
@keyframes sparkFly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
/* 暴击击退位移同样废弃：暴击只保留变色 + 后仰由受击序列帧表达 */
.fighter.knock .ava-big{animation:none}
@keyframes knockBack{0%{transform:translateX(0)}35%{transform:translateX(12px) rotate(4deg)}100%{transform:translateX(0)}}
.screenShake{animation:screenShake .28s ease}
.dmg.skill{color:#8fd6ff;font-size:23px}
.dmg.norm,.dmg.crit,.dmg.skill{animation-fill-mode:forwards}

/* ---- 副本 ---- */
.dg-body{max-height:62vh;overflow-y:auto;padding-right:2px}
.dg-note{font-size:11px;color:var(--dim);line-height:1.6;margin-bottom:9px;border-left:2px solid var(--gold);padding-left:8px}
.dg-card{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:9px;background:linear-gradient(180deg,#1b1626,#141020)}
.dg-card.locked{opacity:.62}
.dg-h{display:flex;align-items:center;gap:9px}
.dg-ico{font-size:26px;line-height:1}
.dg-h b{font-size:13.5px}
.dg-h small{display:block;color:var(--dim);font-size:10.5px;margin-top:1px}
.dg-tier{margin-left:auto;font-size:10px;color:var(--gold);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.dg-desc{font-size:11px;color:var(--dim);margin:7px 0 4px;line-height:1.55}
.dg-meta{font-size:11px;color:#c9b3ff}
.dg-reward{font-size:11px;color:var(--gold);margin:6px 0 8px;line-height:1.5}
.dg-go{width:100%}
.dg-go:disabled{opacity:.55}

/* ---- 组队 ---- */
.party-body{max-height:64vh;overflow-y:auto}
.pt-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;margin-bottom:7px}
.pt-head span{color:var(--dim);font-size:11px}
.pt-members{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:9px}
.pt-row{display:flex;align-items:center;gap:9px;padding:8px 9px;background:#171225;border-bottom:1px solid var(--line);font-size:12px}
.pt-row:last-child{border-bottom:none}
.pt-row.lead{background:#1e1830}
.pt-ava{font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center}
.pt-ava img.pt-face{width:32px;height:42px;object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.pt-info{flex:1;min-width:0}
.pt-info b{display:block;font-size:12.5px}
.pt-info small{color:var(--dim);font-size:10.5px}
.pt-power{color:#ffd56b;font-size:11.5px;font-variant-numeric:tabular-nums}
.pt-tag{font-size:10px;color:var(--gold);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.pt-kick{font-size:10px;padding:2px 6px!important}
.pt-dg{border:1px solid var(--line);border-radius:10px;padding:9px;background:#141020;margin-bottom:9px}
.pt-dg-row{display:flex;align-items:center;gap:8px;font-size:12px}
.pt-sel{flex:1;background:#0e0b16;color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:6px;font-size:11.5px}
.pt-need{font-size:11px;color:var(--dim);margin-top:6px}
.pt-tip{font-size:10.5px;color:#9fd0ff;margin-top:5px;line-height:1.5}
.pt-btns{display:flex;gap:7px;flex-wrap:wrap}
.pt-btns .mini{flex:1;min-width:92px}
.pt-go{border-color:var(--gold)!important;color:var(--gold)!important;font-weight:800}
.pt-go:disabled{opacity:.5}
.pt-last{font-size:11px;color:var(--dim);margin-top:9px;border-top:1px dashed var(--line);padding-top:7px;line-height:1.5}
.pt-create{border:1px solid var(--line);border-radius:10px;padding:10px;background:#141020}
.pt-create label{display:block;font-size:11px;color:var(--dim);margin:5px 0 3px}
.pt-create input{width:100%;background:#0e0b16;color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:7px;font-size:12px;margin-bottom:5px}
.pt-empty{font-size:11.5px;color:var(--dim);text-align:center;padding:10px}
.party-err{color:var(--red);font-size:12px;text-align:center;padding:12px}
.pt-join{font-size:11px;padding:4px 10px!important}


/* ---- 推荐加点 v2：不重复四维，只做行内徽标 + 一行结论 ---- */
.stat .rec-tag{font-style:normal;font-size:9.5px;font-weight:700;color:#0d0a14;background:linear-gradient(90deg,#e8c66a,#c9a238);border-radius:5px;padding:1px 4px;margin-left:6px;vertical-align:1px}
.rec-build{margin-top:8px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:#161122}
.rec-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px}
.rec-title{color:var(--gold);font-weight:800}
.rec-order{color:var(--dim);flex:1;min-width:90px}
.rec-btn{font-size:10.5px;padding:3px 8px!important;border-color:var(--gold)!important;color:var(--gold)!important;font-weight:800}
.rec-tip{margin-top:5px;color:var(--dim);font-size:10.5px;line-height:1.5}
.rec-note-inline{display:none}


/* ---- 稀有度扩充：神话 / 暗金 ---- */
.r-divine{color:#ff8bd6;text-shadow:0 0 8px rgba(255,120,210,.55);font-weight:800}
.r-darkgold{color:#fff0b0;text-shadow:0 0 10px rgba(255,205,90,.75);font-weight:800;letter-spacing:.3px}
/* ---- 详细属性：职业成长行 ---- */
#derivedStats .dv-growth{grid-column:1/-1;line-height:1.5}
#derivedStats .dv-growth b{color:#e8c66a;font-weight:700;font-size:10.5px;text-align:left}


/* ---- 公共拍卖行 ---- */
.auc-tabs{display:flex;gap:6px;margin-bottom:8px}
.auc-tabs .tab{flex:1;background:#171226;border:1px solid var(--line);color:var(--dim);border-radius:8px;padding:5px;font-size:11.5px;cursor:pointer}
.auc-tabs .tab.active{border-color:var(--gold);color:var(--gold);background:#221a12}
.auc-sell{border:1px solid var(--line);border-radius:9px;padding:8px;background:#151020;margin-bottom:8px}
.auc-sell-row{display:flex;gap:6px;flex-wrap:wrap}
.auc-sell-row select,.auc-sell-row input{flex:1;min-width:96px;background:#0f0b17;border:1px solid var(--line);color:#ddd;border-radius:7px;padding:5px 7px;font-size:11px}
.auc-tip{color:var(--dim);font-size:10px;margin-top:5px;line-height:1.5}
.auc-filter{display:flex;gap:6px;margin-bottom:7px}
.auc-filter input,.auc-filter select{flex:1;background:#0f0b17;border:1px solid var(--line);color:#ddd;border-radius:7px;padding:5px 7px;font-size:11px}
.auc-row{display:flex;align-items:center;gap:8px;border-bottom:1px dashed #241c33;padding:7px 2px}
.auc-main{flex:1;min-width:0}
.auc-main span{font-size:12px;font-weight:700}
.auc-main small{display:block;color:var(--dim);font-size:10px;margin-top:2px}
.auc-opts{color:#8fd3ff;font-size:10px;margin-top:2px}
.auc-buy{text-align:right;font-size:10.5px;color:var(--gold);white-space:nowrap}
.auc-buy b{display:block;font-size:12.5px}
.auc-buy .mini{margin-top:3px}
.auc-done{color:var(--dim)}
.auc-empty{color:var(--dim);text-align:center;padding:18px 0;font-size:11.5px}


/* ---- PC 客户端技能图标（从 newui_skill.OZJ 切出） ---- */
.skchip .sic{position:relative}
.skchip .simg{width:36px;height:36px;border-radius:7px;display:block;object-fit:cover;
  box-shadow:0 0 0 1px #3a2f52 inset, 0 2px 6px rgba(0,0,0,.55)}
.skchip.lock .simg.dim{filter:grayscale(1) brightness(.78)}
.skchip.ready .simg{box-shadow:0 0 0 1px var(--gold) inset, 0 0 10px rgba(255,206,92,.55)}

.skill-up-max{position:absolute;top:3px;right:5px;font-size:8px;letter-spacing:.5px;color:var(--dim)}
#skillRow .skill-up-btn{position:absolute;top:2px;right:2px;margin:0;padding:0 3px;font-size:8.5px;line-height:1.35;
  border-radius:4px;background:rgba(232,198,106,.9);color:#151018;border:0;box-shadow:0 1px 3px rgba(0,0,0,.5)}
#skillRow .skill-up-btn:hover{background:#ffe9a8}
#skillRow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#skillRow .skchip{position:relative;flex:1 1 96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:66px;padding:5px 3px 6px}
#skillRow .skchip .sic{height:36px;display:flex;align-items:center;justify-content:center}
#skillRow .skchip .simg{width:34px;height:34px}
#skillRow .skchip .snm{max-width:100%;font-size:10.5px;padding:0 2px}
#skillRow .skchip .smp{max-width:100%;font-size:9px;line-height:1.25}

/* v7：未命中飘字 */
.dmg.miss{ color:#9fb0c0; font-weight:700; font-size:13px; letter-spacing:1px; }
/* 组队：在线点 + 贡献占比 */
.pt-on{ font-size:14px; color:#7a4a4a; margin-right:2px; }
.pt-on.on{ color:#57d07a; }
.pt-share{ font-size:12px; color:#c9b071; margin-right:6px; min-width:34px; text-align:right; }
/* v8：技能栏未解锁汇总 + 右栏背包/回收切换 */
.sk-lock-note{flex:0 0 100%;font-size:10.5px;color:var(--dim);text-align:center;padding:2px 0 0}
.side-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.side-tabs .tab{text-align:center;padding:6px 0;border-radius:7px;border:1px solid var(--line);background:var(--panel2);font-size:12px;cursor:pointer}
.side-tabs .tab.active{border-color:var(--gold);color:var(--gold);background:rgba(232,198,106,.12)}
.btn-row.tight{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}


/* ============================================================
 * v9 布局：战斗为主视觉 + 侧栏页签（重排整页结构）
 * ============================================================ */
#game{max-width:1480px;padding:14px 18px 32px}

/* 顶部 HUD：横向四段一体条。
   旧版是 4 列 grid + 每个子块内部竖排，窄视口下退化成 2×2，一个顶栏吃掉 195px，
   相当于首屏 22% 只用来显示头像和三根进度条。现在改成「身份 + 三条资源 + 货币组 + 工具栏」
   同一行横向排布，货币/战力/同步改成横排小胶囊，整条压到 ~86px。 */
.hud{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;
  background:linear-gradient(180deg,rgba(38,28,20,.92),rgba(22,17,14,.92));
  border:1px solid var(--line);border-radius:12px;padding:9px 13px;margin-bottom:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.28)}
.hud .hud-id{display:flex;align-items:center;gap:9px;min-width:0}
.hud .hud-id .nm{font-size:14px;font-weight:700;line-height:1.15}
.hud .hud-id .cl{font-size:11px;color:var(--dim);line-height:1.3}
.hud .hud-bars{display:flex;flex-direction:column;gap:3px;min-width:0}
.hud .hud-bars .bar{align-items:center;gap:6px;font-size:11px}
.hud .hud-bars .bar .k{width:26px;font-size:10px}
.hud .hud-bars .bar .track{height:9px}
.hud .hud-bars .bar .v{width:96px;font-size:10.5px;text-align:right;color:var(--dim)}
/* 货币 / 战力 / 同步：横排胶囊，不再竖着堆三行 */
.hud .hud-meta{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}
.hud .hud-meta .zen,.hud .hud-meta .power-chip{display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid var(--line);line-height:1.5}
.hud .hud-meta .sync-dot{padding:3px 8px;border-radius:999px;font-size:11px}
.hud .hud-tools{display:flex;gap:5px}
.hud .tb-btn{padding:5px 9px;border-radius:7px;border:1px solid var(--line);background:var(--panel2);
  color:var(--text);font-size:11.5px;cursor:pointer;white-space:nowrap}
.hud .tb-btn:hover{border-color:var(--gold);color:var(--gold)}
/* 窄屏（当前主力视口 895px）：身份+资源一行，货币组+工具栏第二行，仍然只有两行 */
@media (max-width:1120px){
  .hud{grid-template-columns:auto minmax(0,1fr);
       grid-template-areas:"id bars" "meta tools";gap:7px 10px}
  .hud .hud-id{grid-area:id}
  .hud .hud-bars{grid-area:bars}
  .hud .hud-meta{grid-area:meta}
  .hud .hud-tools{grid-area:tools;justify-self:end}
}
@media (max-width:560px){
  .hud{padding:8px 10px;gap:6px 8px}
  .hud .hud-bars .bar .v{display:none}
  .hud .hud-meta{font-size:11px;gap:5px}
  .hud .hud-meta .sync-dot{font-size:10px}
  .hud .hud-id .nm{font-size:13px}
}

.layout-v9{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:14px;align-items:start}
.stage-col,.side-col{display:flex;flex-direction:column;gap:14px;min-width:0}

/* 战斗主卡 */
.stage-main{padding:0;overflow:hidden}
.stage-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  padding:12px 16px 6px;border-bottom:1px solid rgba(255,255,255,.04)}
.stage-head h3{margin:0;font-size:16px;color:var(--gold);letter-spacing:.5px}
.stage-head .hint{font-size:11.5px;color:var(--dim)}
.stage-head-r{font-size:11.5px;color:var(--dim);text-align:right;line-height:1.6}
.stage-main .stage{min-height:216px;display:flex;align-items:center;justify-content:space-evenly;gap:22px;padding:10px 18px 16px;
  /* 舞台不再是一块纯黑：左右各给一团地面紫光（与两侧 3D 舞台脚下的 disc 呼应），
     上方压一层很淡的顶部提亮，形成「有场地」的纵深而不是空板 */
  background:
    radial-gradient(ellipse 46% 40% at 22% 86%, rgba(122,92,224,.20), rgba(10,8,18,0) 72%),
    radial-gradient(ellipse 46% 40% at 78% 86%, rgba(224,120,92,.14), rgba(10,8,18,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(0,0,0,0) 42%)}
.stage-main .ava-big{font-size:58px;line-height:1}
.stage-main .fighter{min-width:172px;text-align:center}
/* 对战分隔：原 22px 的 emoji 孤零零浮在半空，改成一枚带金环的圆徽，落在两角色中线 */
.stage-main .vs{font-size:19px;opacity:1;flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:1;
  background:radial-gradient(circle at 50% 38%, rgba(232,198,106,.22), rgba(12,10,20,.9) 74%);
  border:1px solid rgba(232,198,106,.28);
  box-shadow:0 0 20px rgba(232,198,106,.16), 0 0 0 4px rgba(255,255,255,.02) inset}
.stage-main .actions{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:0 16px}
.stage-main .skbar{padding:10px 16px 4px}
.stage-main .potion-row{padding:0 16px 4px}
.stage-main .switches{padding:6px 16px 10px}
.stage-main .city-row{padding:0 16px 14px}

/* 挑战 BOSS 横条 */
.ch-bar{display:grid;grid-template-columns:1.25fr 1fr auto;gap:16px;align-items:center;padding:12px 16px}
.ch-bar-l h3{margin:0 0 6px;font-size:14px;color:var(--gold)}
.ch-bar-m{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim)}
.ch-bar-r{display:flex;flex-direction:column;gap:6px;min-width:170px}

/* 日志卡 */
.box-log{padding:0}
.box-log .box-head{padding:12px 16px 8px;border-bottom:1px solid rgba(255,255,255,.04)}
.box-log .log{height:236px;padding:8px 14px}

/* 侧栏页签 */
.side-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.snav{padding:9px 0;border-radius:10px;border:1px solid var(--line);background:var(--panel2);
  color:var(--dim);font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.snav:hover{color:var(--text);border-color:rgba(232,198,106,.4)}
.snav.on{color:var(--gold);border-color:var(--gold);background:rgba(232,198,106,.12);
  box-shadow:0 0 0 1px rgba(232,198,106,.18) inset}
.side-pane-v9{display:flex;flex-direction:column;gap:14px}
.side-pane-v9 .box{min-width:0}

@media (max-width:1120px){
  .layout-v9{grid-template-columns:1fr}
  .stage-main .actions{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* ============================================================
 * 团队副本 · 真实战斗界面
 * ============================================================ */
.pb-head{padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel2)}
.pb-title{font-size:12.5px;color:var(--dim);margin-bottom:8px}
.pb-mon-n{display:flex;align-items:center;gap:8px;font-size:15px}
.pb-mon-n small{color:var(--dim);font-weight:400;font-size:12px}
.pb-mon-s{margin-left:auto;font-size:11.5px;color:var(--dim)}
.pb-mon-bar{height:14px;border-radius:8px;background:#241a14;border:1px solid var(--line);overflow:hidden;margin:7px 0 4px}
.pb-mon-bar .fill{height:100%;background:linear-gradient(90deg,#c0392b,#ff6b57);transition:width .25s}
.pb-mon-hp{font-size:11.5px;color:#ffb3a7;text-align:right}
.pb-mems{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.pb-mem{display:flex;gap:8px;align-items:center;padding:7px 9px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel2)}
.pb-mem.me{border-color:var(--gold);background:rgba(232,198,106,.08)}
.pb-mem.down{opacity:.5;filter:grayscale(.6)}
.pb-mem .pb-ava{font-size:20px;display:flex;align-items:center;justify-content:center}
.pb-mem .pb-ava img.pt-face{width:30px;height:40px;object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.pb-mem-i{flex:1;min-width:0}
.pb-mem-n{display:flex;align-items:center;gap:6px;font-size:12.5px}
.pb-you{font-style:normal;font-size:10px;padding:1px 5px;border-radius:5px;background:rgba(232,198,106,.2);color:var(--gold)}
.pb-ok{font-style:normal;font-size:10px;color:var(--dim)}
.pb-down{font-style:normal;font-size:10px;color:#ff6b6b}
.pb-mem .track{height:8px;margin:4px 0 3px}
.pb-mem-s{font-size:11px;color:var(--dim)}
.pb-mem-s b{color:var(--gold)}
.pb-btns{display:grid;grid-template-columns:1fr 1fr auto auto;gap:7px;margin:10px 0}
.pb-logs{max-height:170px;overflow:auto;border:1px solid var(--line);border-radius:10px;
  background:#140f0c;padding:8px 10px}
.pb-log{font-size:11.5px;line-height:1.75;color:#cfc4b4}
.pb-log b{color:#ffd27a}
.pb-log.mon{color:#ff9d8a}
.pb-log.dim{color:var(--dim)}
.pb-note{font-size:11px;color:var(--dim);margin-top:8px;line-height:1.7}
.pb-result{border-radius:12px;padding:14px;text-align:center;border:1px solid var(--line)}
.pb-result.ok{background:rgba(90,200,120,.10);border-color:rgba(90,200,120,.45)}
.pb-result.bad{background:rgba(220,80,80,.10);border-color:rgba(220,80,80,.45)}
.pb-res-t{font-size:14px;font-weight:700;margin-bottom:6px}
.pb-res-s{font-size:11.5px;color:var(--dim)}
.pb-rewards{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.pb-reward{display:grid;grid-template-columns:1.1fr 1.4fr auto auto;gap:8px;align-items:center;
  font-size:12px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.pb-reward b{color:var(--gold)}
.pb-reward span{color:var(--dim)}
.pb-zen{color:#ffd27a !important}
.pb-exp{color:#8fd3ff !important}


/* ============================================================
 * v10 三栏布局：左常驻角色 / 中战斗主区 / 右装备背包
 * ============================================================ */
.layout-v10{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:14px;align-items:start}
.char-col,.center-col,.side-col{display:flex;flex-direction:column;gap:12px;min-width:0}

/* 左：角色卡（常驻） */
.char-card{padding:0;overflow:hidden}
.char-card .box-head{padding:12px 14px 8px;border-bottom:1px solid rgba(255,255,255,.05)}
.char-card .box-head h3{margin:0;font-size:15px;color:var(--gold)}
.char-card .box-sub{padding:10px 14px 4px;font-size:11.5px;color:var(--dim);
  letter-spacing:1px;border-top:1px dashed rgba(255,255,255,.06);margin-top:10px}
.char-card #recBuild{padding:10px 12px 0}
.char-card .stat-list{padding:8px 12px 0}
.char-card .pts-tip{padding:6px 12px 0;font-size:10.5px;color:var(--dim);line-height:1.5}
.char-card #derivedStats{padding:0 12px}
.char-card #rebirthInfo{padding:0 12px}
.char-card .rebirth-btn{width:calc(100% - 24px);margin:10px 12px 12px}

/* 中：练功区横条 */
.area-strip{padding:0;overflow:hidden}
.area-strip .box-head{padding:10px 14px 6px;border-bottom:1px solid rgba(255,255,255,.05)}
.area-strip .box-head h3{margin:0;font-size:14px;color:var(--gold)}
.area-strip-list{display:flex;gap:6px;overflow-x:auto;padding:9px 12px 11px}
.area-strip-list .area{flex:0 0 auto;display:flex;align-items:center;gap:5px;
  padding:6px 11px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);
  font-size:12px;white-space:nowrap;cursor:pointer;transition:.15s;min-width:0}
.area-strip-list .area:hover{border-color:rgba(232,198,106,.45);color:var(--text)}
.area-strip-list .area.active{border-color:var(--gold);background:rgba(232,198,106,.12);color:var(--gold)}
.area-strip-list .area .lk{font-size:10.5px;color:#8a7a5a}

/* 中：战斗卡自适应宽度 */
.center-col .stage-main .stage{min-height:206px}

/* 右：两页签 */
.side-col .side-nav{grid-template-columns:repeat(3,1fr)}
.side-pane-v10{display:flex;flex-direction:column;gap:12px}
.side-pane-v10 .box{min-width:0}

/* 右：挑战 BOSS 卡 */
.ch-bar-v10{padding:0;overflow:hidden}
.ch-bar-v10 .box-head{padding:11px 14px 6px;border-bottom:1px solid rgba(255,255,255,.05)}
.ch-bar-v10 .box-head h3{margin:0;font-size:13.5px;color:var(--gold)}
.ch-bar-v10 .box-head .cd{font-size:12px}
.ch-bar-v10 #chBoss{padding:8px 14px 0;font-size:12.5px}
.ch-bar-v10 .ch-mats{padding:4px 14px 0;font-size:11.5px;color:var(--dim)}
.ch-bar-v10 .ch-note{padding:4px 14px 0;font-size:11px;color:var(--dim)}
.ch-bar-v10 .btn-row{padding:10px 14px 12px;display:flex;gap:8px}
.ch-bar-v10 .btn-row .act{flex:1}

/* ============ v44 布局精简：详细属性默认只留「输出」组，其余折叠 ============
   4 组共 20 余行、552px 高，是整页最占地方的板块，也是「设计不合理」最直观的一处。
   默认给一眼能用的数据，想看细节再展开——丰富但不堆砌。 */
.mini-toggle{
  margin-left:auto;flex:none;cursor:pointer;font:inherit;font-size:11px;line-height:1;
  padding:5px 9px;border-radius:8px;border:1px solid rgba(232,198,106,.45);
  background:rgba(232,198,106,.12);color:var(--gold);transition:.15s;
}
.mini-toggle:hover{background:rgba(232,198,106,.22)}
.derived-card:not(.expanded) #derivedStats > .dg:nth-child(n+2){display:none}
.derived-card:not(.expanded) .derived-hero{margin-bottom:2px}

/* ============ v44 紧凑：把「战斗工具 / 城服务 / 日志」压下来 ============
   实测这三块加起来 620px，比真正的战场（471px）还高——玩家一眼看到的多是设置项而不是战斗。
   战场优先、设置次级：统一收窄内边距，日志固定约 5 行可视高度。 */
.battle-tools,.city-serv,.box-log{padding:10px 12px 12px}
.battle-tools .potion-row{margin-bottom:6px}
.battle-tools .switches{gap:7px}
.city-serv .serv-row{padding:2px 0}
/* 快捷入口 8 个按钮原来每个占一整行、共 249px，比战场还高；收成 4 列小 chip，两行结束 */
.city-serv .serv-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.city-serv .serv-label{flex:0 0 56px;font-size:11.5px;color:var(--dim);white-space:nowrap}
.city-serv .serv-btns{flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.city-serv .serv-btns .mini{padding:7px 2px;font-size:11.5px;line-height:1.25;border-radius:7px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.city-serv .serv-btns{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 药水按钮：主文案一行 + 说明一行，别撑成 110px 高的大方块 */
.battle-tools .pbtn{padding:6px 4px;font-size:11.5px;line-height:1.35}
.battle-tools .pbtn i{display:block;font-size:9.5px;margin-top:1px}
.box-log .log{height:126px;font-size:12px;line-height:1.55}
.stage-main .stage{min-height:206px;padding:12px 14px}
/* 城内（没有怪物）时把角色居中：原来只有左边半个舞台有立绘，右半整块黑，
   一眼看过去就是「布局不合理」。 */
.stage-main .stage.city-mode{justify-content:center;gap:24px}
.stage-main .stage.city-mode #figP{flex:0 0 auto}
/* 战场头部（区域名 / 怪物名）也压一行，别把立绘挤下去 */
.stage-main .box-head{padding-bottom:6px}
/* 四维加点改成 2×2 网格：原本四行竖排、每行还挂三个按钮 + 一行说明，
   单这一块就吃掉 200px 高度。两列并排后同样的信息只占一半。 */
#statList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px}
#statList .stat{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.03)}
#statList .stat>span:first-child{font-size:12.5px;color:var(--dim);flex:0 0 auto}
#statList .pts{display:flex;align-items:center;gap:3px}
#pts-tip,.pts-tip{display:none}
@media (max-width:560px){
  #statList{grid-template-columns:1fr}
}
/* 空槽汇总行：仅次于已装备行的灰调，一眼区分「有的」和「没有的」 */
.eqrow.eqempty{opacity:.62}
.eqrow.eqempty .sub{white-space:normal;line-height:1.5}
/* 新手训练场这类「名字很萌、模型却是骑士」的怪，改用大号 emoji 立绘：
   名字和形象总算对得上，也比碎图好看。 */
.stage-main .monemo{display:inline-flex;align-items:center;justify-content:center;width:132px;height:132px;font-size:96px;line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}

@media (max-width:1240px){
  .layout-v10{grid-template-columns:1fr}
  /* 单列时顺序重排：先是战场（看图/出手），再是自身属性（看数），最后才是装备背包。
     原先属性面板排在装备背包之后，玩家要滚到页尾 2600px 才看得到自己的属性。 */
  .center-col{order:1}
  .char-col{order:2}
  .side-col{order:3}
  .stage-main .actions{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ================= v10-fix：练功区压成单行横滑 + 三栏视口内滚动 ================= */
#areaList.area-strip-list{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;gap:6px;
  padding:9px 12px 11px;align-items:center}
#areaList.area-strip-list .area{flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);
  font-size:12px;white-space:nowrap;cursor:pointer;transition:.15s;width:auto}
#areaList.area-strip-list .area.active{border-color:var(--gold);background:rgba(232,198,106,.12);color:var(--gold)}
#areaList.area-strip-list .area .lk{font-size:10.5px;color:#8a7a5a}

@media (min-width:1241px){
  .layout-v10{height:calc(100vh - 176px);min-height:560px;overflow:hidden}
  .char-col,.center-col,.side-col{height:100%;overflow-y:auto;overflow-x:hidden;padding-right:6px}
    .center-col .stage-main .stage{min-height:172px}
  .center-col .ava-big{font-size:52px}
  .box-log .log{height:190px}
  .center-col .stage-main .actions{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* 三栏内的卡片不允许被压缩（否则练功区横条、装备槽会被裁一半） */
.char-col>*,.center-col>*,.side-col>*{flex:0 0 auto}
.center-col .box-log{flex:1 1 auto;min-height:170px}
.center-col .box-log .log{height:auto;max-height:100%;flex:1 1 auto}

/* 练功区滚动条收敛 + 服务按钮 4×2 紧凑排布 */
#cityServices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#cityServices .mini{width:100%;text-align:center;white-space:nowrap;padding:7px 4px;font-size:12px}

/* ============ v11 按钮交互 ============ */
button, .tab, .snav, .act, .mini, .pbtn, .nd-btn{
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, opacity .12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:not(.is-disabled):not(:disabled):hover{ filter: brightness(1.10); }
button:active:not(.is-disabled):not(:disabled){ transform: translateY(1px); }
.ux-press{ transform: scale(.965) !important; filter: brightness(.9) !important; }
button.is-disabled, button:disabled{
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.35);
  box-shadow: none;
}
.act.skill{
  box-shadow: 0 0 0 1px rgba(255,208,96,.45), 0 4px 14px rgba(255,180,40,.16);
  font-weight: 800;
}
.act.auto{ font-weight: 800; letter-spacing: .5px; }
.ux-hint{
  margin-top: 6px; font-size: 11px; line-height: 1.5;
  color: var(--muted, #8b96a8);
  text-align: center;
  opacity: .85;
}

/* ============ v12 信息分层：战斗核心 / 战斗辅助 / 快捷入口 ============ */
/* 战斗卡只放舞台、出手按钮、技能栏 */
.stage-main{padding-bottom:14px}

/* 战斗辅助：药水 + 挂机策略 */
.battle-tools{padding:0;overflow:hidden}
.battle-tools .box-head{padding:11px 14px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.battle-tools .box-head h3{margin:0;font-size:13.5px;color:var(--gold)}
.battle-tools .potion-row{padding:12px 14px 0}
.battle-tools .switches{padding:10px 14px 13px}

/* 快捷入口：挑战 / 功能 两行分组 */
.city-serv{padding:0;overflow:hidden}
.city-serv .box-head{padding:11px 14px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.city-serv .box-head h3{margin:0;font-size:13.5px;color:var(--gold)}
.serv-row{display:flex;align-items:center;gap:8px;padding:10px 14px 0}
.serv-row:last-child{padding-bottom:12px}
.serv-label{flex:0 0 58px;font-size:11.5px;color:var(--dim);letter-spacing:.5px;white-space:nowrap}
.serv-btns{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.serv-btns .mini{width:100%;text-align:center;white-space:nowrap;padding:7px 4px;font-size:12px}

/* 右栏：挑战 BOSS 卡固定在最上，页签与内容在其下 */
.side-col .ch-bar-v10{margin-bottom:2px}

@media(max-width:1240px){
  /* 单列时宽度其实还很宽（实测视口 895px），快捷入口没必要改成纵向堆叠——
     原来 label 独占一行、按钮在中间缩成一团，反而更难看。保持「标签 + 4 列」横排。 */
  .serv-row{flex-direction:row;align-items:center;gap:8px}
  .serv-label{flex:0 0 58px}
  .serv-btns{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ============ v12b 窄屏 HUD：四段各占一行，血条拉满 ============ */
@media (max-width:760px){
  .hud{grid-template-columns:1fr;gap:9px;padding:12px 14px}
  .hud .hud-id{order:1;align-items:center;gap:9px}
  .hud .who{min-width:0}
  .hud .who .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
  .hud .who .cl{font-size:11px;color:var(--dim);margin-top:2px}
  .hud .hud-bars{order:2;gap:5px}
  .hud .hud-bars .bar{display:grid;grid-template-columns:32px minmax(0,1fr) 104px;
    gap:8px;align-items:center;padding:0}
  .hud .hud-bars .bar .k{font-size:10.5px;letter-spacing:.5px}
  .hud .hud-bars .bar .track{width:100%;min-width:0}
  .hud .hud-bars .bar .v{width:auto;font-size:11px;text-align:right}
  .hud .hud-meta{order:3;flex-wrap:wrap;align-items:center;gap:6px 8px;
    padding-top:2px;border-top:1px dashed rgba(255,255,255,.07)}
  .hud .hud-tools{order:4;justify-content:flex-end;gap:6px}
}

/* ============ v12c 战斗舞台：血条随列宽铺满，窄屏收紧高度 ============ */
.stage-main .stage .fighter .fhp{width:100%;max-width:230px;margin:0 auto}
.stage-main .stage .fighter .fhp .track{height:9px}
@media (max-width:760px){
  .stage-main .stage{min-height:0;padding:14px 12px 12px;gap:8px;align-items:stretch}
  .stage-main .fighter{min-width:0;flex:1 1 0;display:flex;flex-direction:column;justify-content:center}
  .stage-main .fighter .ava-big{font-size:42px;margin:7px 0}
  .stage-main .fighter .ava-big img{width:52px;height:52px}
  .stage-main .vs{font-size:17px;align-self:center;opacity:.7}
  .stage-main .fighter .fname{font-size:12.5px}
  .stage-main .fighter .flv,.stage-main .fighter .v{font-size:11px}
  .stage-main .stage-head{padding:10px 12px 4px}
}

/* ============ v12d 城内紧凑（figM 隐藏时舞台收缩）+ 血条贴合 ============ */
.stage-main .stage .fighter .fhp{margin:0 auto 6px}
.stage-main .stage .fighter .ava-big{margin:4px 0}
.stage-main .stage:has(#figM[style*="display: none"]){min-height:0;padding:12px 14px;justify-content:center}
.stage-main .stage:has(#figM[style*="display: none"]) .fighter{flex:0 0 auto}
.stage-main .stage:has(#figM[style*="display: none"]) .fighter .fhp{display:none}
.stage-main .stage:has(#figM[style*="display: none"]) .fighter .ava-big{font-size:46px;margin:0 0 4px}
.stage-main .stage:has(#figM[style*="display: none"]) .fighter .ava-big img{width:56px;height:56px}
.stage-main .stage:has(#figM[style*="display: none"]) .fighter .fname{font-size:12.5px}

/* ============ v12e 技能栏定宽小卡 ============ */
#skillRow.skbar{display:flex;flex-wrap:wrap;gap:7px;align-items:stretch;padding:10px 14px 8px}
#skillRow .skchip{flex:0 0 96px;width:96px;min-height:78px}
#skillRow .sk-lock-note{flex:0 0 100%;width:100%}
@media (max-width:760px){
  #skillRow.skbar{padding:8px 12px 6px;gap:6px}
  #skillRow .skchip{flex:0 0 84px;width:84px;min-height:72px}
}

/* ============ v13 详细属性卡（与加点分离，按分组阅读） ============ */
.char-card{padding-bottom:12px}
.derived-card{padding:0;overflow:hidden}
.derived-card .box-head{padding:12px 14px 8px;border-bottom:1px solid rgba(255,255,255,.05)}
.derived-card .box-head h3{margin:0;font-size:14px;color:var(--gold)}
.derived-hero{padding:12px 14px 11px;
  background:linear-gradient(180deg,rgba(232,198,106,.10),rgba(232,198,106,.02));
  border-bottom:1px solid rgba(255,255,255,.05)}
.derived-hero .dh-k{font-size:10.5px;color:var(--dim);letter-spacing:1px}
.derived-hero .dh-v{font-size:27px;font-weight:800;color:var(--gold);line-height:1.2;
  font-variant-numeric:tabular-nums}
.derived-hero .dh-s{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.45}
#derivedStats.grouped{display:block;padding:10px 12px 4px}
#derivedStats .dg{margin-bottom:10px}
#derivedStats .dg-t{font-size:10.5px;color:var(--gold);letter-spacing:1px;margin:0 0 5px 2px;opacity:.92}
#derivedStats .dg-rows{display:grid;grid-template-columns:1fr;gap:3px}
#derivedStats .dv{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.025);font-size:11.5px}
#derivedStats .dv span{color:var(--dim);white-space:nowrap}
#derivedStats .dv b{color:var(--text);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.derived-card .rebirth-info{padding:0 14px}
.derived-card .rebirth-btn{width:calc(100% - 28px);margin:10px 14px 13px}

/* ============ v15 城内技能栏 / 练功区标记 ============ */
.skchip.city{opacity:.5;filter:grayscale(.4);cursor:not-allowed}
.skchip.city .smp{color:var(--dim)}
.area .alv{margin-left:auto;font-size:10px;color:var(--dim);opacity:.8}
.area .lk{margin-left:auto}

/* ===== v17 真实立绘（PC 客户端模型离线渲染） ===== */
.monart{
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
  transition:transform .18s ease;
}
#monIco{ display:flex; align-items:center; justify-content:center; }
#monIco .monart{ width:100%; height:100%; max-width:150px; max-height:150px; }
.boss-card .monart{ filter:drop-shadow(0 0 18px rgba(255,170,60,.45)); }

/* ===== v19 角色立绘（PC 客户端 Player 模型离线渲染）===== */
.fighter .ava-big{font-size:0;margin:0 0 4px}
.fighter .ava-big img.clsart{
  width:auto;height:118px;object-fit:contain;border-radius:0;
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.62));
}
/* 角色在左、面向右侧的对手 */
#figP .ava-big img.clsart{transform:scaleX(1)}
@media(max-width:760px){
  .fighter .ava-big img.clsart{height:92px}
}
/* 顶栏小头像 */
#ava img.clsart{width:auto;height:36px;object-fit:contain;border-radius:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
/* 角色卡片里的大立绘（如果用到） */
.char-portrait img.clsart{height:130px;width:auto;object-fit:contain}

/* ===== v21 战斗舞台朝向（z41 修正）=====
   现在所有立绘与序列帧都是 3D 正视图（模型正对镜头），不存在「朝左/朝右」问题。
   早期为 2D 侧身怪物加的 scaleX(-1) 反而让静态图与动作图集方向相反，
   表现为「站着时朝一边、出招时朝另一边」= 用户说的朝向不对。统一取消镜像。 */
#monIco img.monart,
#figM .ava-big img,
#figP .ava-big img{transform:none}
/* 悬停放大单独写，不要用 transform 整体覆盖（否则会把上面的镜像/非镜像状态冲掉） */
#monIco img.monart:hover{transform:scale(1.06)}
/* 立绘底部接地阴影，避免悬空 */
.fighter .ava-big img{filter:drop-shadow(0 9px 10px rgba(0,0,0,.55)) saturate(1.05)}

/* ===== v22 战斗动作演出 ===== */
.fighter .ava-big{will-change:transform,filter}

/* 待机：轻微呼吸浮动，静图也活起来 */
.fighter .ava-big img.clsart,
.fighter #monIco img.monart{animation:idleBreath 2.8s ease-in-out infinite}
@keyframes idleBreath{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.015)}
}

/* 玩家出招：后仰前摇 → 前冲挥击 → 回位 */
.fighter.lunge-r{animation:lungeR22 .52s cubic-bezier(.32,.85,.35,1)}
@keyframes lungeR22{
  0%{transform:translateX(0) rotate(0deg) scale(1)}
  18%{transform:translateX(-9px) rotate(3deg) scale(.985)}
  46%{transform:translateX(46px) rotate(-8deg) scale(1.07)}
  72%{transform:translateX(14px) rotate(-2deg) scale(1.02)}
  100%{transform:translateX(0) rotate(0deg) scale(1)}
}

/* 怪物扑击：镜像 */
.fighter.lunge-l{animation:lungeL22 .52s cubic-bezier(.32,.85,.35,1)}
@keyframes lungeL22{
  0%{transform:translateX(0) rotate(0deg) scale(1)}
  18%{transform:translateX(9px) rotate(-3deg) scale(.985)}
  46%{transform:translateX(-46px) rotate(8deg) scale(1.12)}
  72%{transform:translateX(-14px) rotate(2deg) scale(1.04)}
  100%{transform:translateX(0) rotate(0deg) scale(1)}
}

/* 施法：上浮蓄力 + 强光 + 放大 */
.fighter.cast .ava-big{animation:castUp .54s ease}
@keyframes castUp{
  0%{transform:translateY(0) scale(1);filter:brightness(1)}
  32%{transform:translateY(-11px) scale(1.1);filter:brightness(1.55) drop-shadow(0 0 20px #9fd0ff)}
  70%{transform:translateY(-4px) scale(1.05);filter:brightness(1.3) drop-shadow(0 0 10px #9fd0ff)}
  100%{transform:translateY(0) scale(1);filter:brightness(1)}
}

/* 受击：只有红闪，不再对 .ava-big 做位移抖动。
   强调一次：角色挨打必须看得到「骨架动作」（a141 序列帧），
   任何额外的 translate/rotate 抖动都会和序列帧叠在一起，变成「动作和不明元素重叠」 */
.fighter.hit .ava-big{filter:drop-shadow(0 0 10px var(--red)) brightness(1.5)}
@keyframes hitShake22{
  0%,100%{transform:translateX(0) rotate(0deg)}
  15%{transform:translateX(-10px) rotate(-4deg)}
  35%{transform:translateX(8px) rotate(3deg) scale(.99)}
  55%{transform:translateX(-5px) rotate(-2deg)}
  75%{transform:translateX(3px)}
}
.fighter.crit-flash .ava-big{filter:brightness(2.6) drop-shadow(0 0 20px #e049ff)}

@keyframes dieFall{
  0%{opacity:1;transform:rotate(0deg) translateY(0)}
  100%{opacity:0;transform:rotate(18deg) translateY(18px)}
}

/* 施法法阵：脚下光圈扩散 */
.fighter.cast .fx-rune{
  position:absolute;left:50%;bottom:6px;width:120px;height:44px;margin-left:-60px;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(140,200,255,.55),rgba(140,200,255,0) 70%);
  box-shadow:0 0 26px rgba(140,200,255,.6) inset;
  animation:runePulse .54s ease-out forwards;
}
@keyframes runePulse{
  0%{opacity:0;transform:scale(.6)}
  35%{opacity:1;transform:scale(1.05)}
  100%{opacity:0;transform:scale(1.35)}
}

/* ===== z24：真实骨骼动作序列帧（player.bmd 离线渲染） ===== */
/* 立绘容器作为定位基准，序列帧在其上覆盖播放，结束后淡出回到静态立绘 */
#figPIco{position:relative}
#monIco{position:relative}
/* 翅膀：叠在立绘容器内、位于角色身后（z-index 更低）。立绘容器 118×148，
   翅膀按 202×202 绝对定位居中后略上提，让翼根落在后腰/背部 */
#figPIco .wingart{
  position:absolute;
  left:-42px;
  top:-6px;
  width:202px;
  height:202px;
  object-fit:contain;
  pointer-events:none;
  z-index:0;
  opacity:.92;
  filter:drop-shadow(0 0 10px rgba(120,190,255,.4));
}
#figPIco .clsart{position:relative;z-index:1}
/* 序列帧层：高度按容器高、宽度按帧数铺开，帧始终保持正方形并与静态立绘同尺寸，
   纵向居中（静态立绘是 object-fit:contain 居中显示的，两者必须重合） */
.anim-sheet{
  position:absolute;inset:0;
  background-repeat:no-repeat;
  background-position:0 center;
  opacity:0;
  pointer-events:none;
  transition:opacity .05s linear;
  z-index:2;
}
.anim-sheet.on{opacity:1}
/* 序列帧播放期间把同容器的静态图隐掉。帧是透明底 PNG，底图不隐藏会从空隙透出来，
   两个身体叠在一起就是「动作和不明元素重叠」。
   翅膀也必须一起隐掉：静态立绘是正面，动作帧是侧身/后仰，翅膀不跟着动就会变成
   「人已经转过去了、翅膀还正面贴在背上」的割裂感。 */
#figPIco.sheetplay .clsart,
#figPIco.sheetplay .wingart,
#monIco.sheetplay .monart{opacity:0}
.wingart{opacity:.9;transition:opacity .1s ease;animation:wingIdle 3.6s ease-in-out infinite}
@keyframes wingIdle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.015)}}
/* 整张 sheet 横向铺成 N 倍容器宽，位移一整个图宽 = 走完 N 格 */
@keyframes sheetPlay{
  from{background-position:0 center}
  to{background-position:100% center}
}

/* ============ v14 手机端：顶栏单排横滑 + HUD 并排压缩 ============ */
@media (max-width:560px){
  .site-nav{padding:9px 10px 0;gap:8px;flex-wrap:nowrap;overflow-x:auto}
  .site-nav::-webkit-scrollbar{display:none;width:0;height:0}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav .brand{font-size:13.5px;letter-spacing:1px;white-space:nowrap;flex:none}
  .site-nav .brand small{display:none}
  .site-nav .links{margin-left:auto;flex:none;flex-wrap:nowrap;gap:4px}
  .site-nav .links a{font-size:11.5px;padding:5px 8px;white-space:nowrap}
  /* 资源行与工具按钮并排，省掉一整行高度 */
  .hud .hud-meta{order:3;flex:1 1 auto;gap:5px 8px}
  .hud .hud-tools{order:3;flex:0 0 auto;align-self:center;justify-content:flex-end}
  .hud .hud-bars .bar{grid-template-columns:28px minmax(0,1fr) 92px}
  .hud .hud-bars .bar .v{font-size:10.5px}
  /* 舞台再压一点，让角色与怪物同屏可见 */
  .stage-main .stage{min-height:0;padding:10px}
  .stage-main .fighter .ava-big{font-size:38px;margin:5px 0}
  .stage-main .fighter .ava-big img{width:46px;height:46px}
  .box-head{padding:10px 11px 8px}
  .box-head h3{font-size:13px}
  #game{padding:6px;gap:6px}
  .layout{gap:6px}
  /* 手机端继承 1120 的两行 areas 布局，这里只收紧间距 */
  .hud{grid-template-columns:auto minmax(0,1fr);column-gap:8px}
  .hud .hud-meta{flex-wrap:wrap}
  .hud .hud-tools{justify-content:flex-end;flex-wrap:nowrap}
}
@media (max-width:400px){
  .site-nav .brand{font-size:12.5px}
  .site-nav .links a{font-size:11px;padding:4px 7px}
  .act,.pbtn{font-size:12.5px}
  .hud .hud-bars .bar{grid-template-columns:26px minmax(0,1fr) 0}
}

/* ============================================================
 * v64 布局重设计 · 战斗区底部 chip 行
 * 药水与挂机策略原来是独立一整块「战斗辅助」卡片（实测 198px），
 * 而它们每次出手都要用，属于战斗操作的一部分。收进舞台卡片底部一行横排 chip：
 * 药水 4 个 + 冷却 + Boss 策略 + 自动喝药，整行约 40px。
 * ============================================================ */
.stage-main .psub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:6px 16px 12px;border-top:1px solid rgba(255,255,255,.05)}
.stage-main .psub-k{font-size:11px;color:var(--dim);letter-spacing:.5px;flex:0 0 auto}
.stage-main .psub .pbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  min-width:0;width:auto;padding:4px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font-size:11.5px;font-weight:600;
  line-height:1.35;white-space:nowrap;text-align:center;cursor:pointer;transition:.15s}
.stage-main .psub .pbtn b{font-weight:700}
.stage-main .psub .pbtn i{font-style:normal;font-size:10.5px;font-weight:400;opacity:.75;margin:0}
.stage-main .psub .pbtn.hp:hover{border-color:rgba(224,73,75,.7);color:#ffd0d0}
.stage-main .psub .pbtn.mp:hover{border-color:rgba(90,169,230,.7);color:#d4e8ff}
.stage-main .psub .pbtn:hover{filter:brightness(1.15)}
.stage-main .psub .pbtn:disabled,.stage-main .psub .pbtn.is-disabled{opacity:.38;cursor:not-allowed;filter:none}
.stage-main .psub-gap{flex:1 1 auto;min-width:0}
.stage-main .psub .swchip{flex:0 0 auto;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--dim);
  font-size:11.5px;cursor:pointer;white-space:nowrap;line-height:1.35;transition:.15s}
.stage-main .psub .swchip.active{border-color:var(--gold);color:var(--gold);background:rgba(232,198,106,.12)}
.stage-main .psub .swchip:hover{filter:brightness(1.15)}
.stage-main .psub .cd{font-size:11px;color:var(--orange);flex:0 0 auto}
@media (max-width:560px){
  .stage-main .psub{padding:6px 10px 10px;gap:5px}
  .stage-main .psub .pbtn{padding:4px 8px;font-size:11px}
  .stage-main .psub .swchip{padding:4px 8px;font-size:11px}
  .stage-main .psub-gap{flex-basis:100%;height:0}
}

/* ============================================================
 * v64 布局重设计 · 快捷入口压缩成一行 icon-chip
 * 原来「卡头 + 两行分组」，147px 只为了摆 8 个按钮，占的比战场还多。
 * 现在图标在上、短名在下，一行 8 格，去掉卡头，整块约 52px。
 * ============================================================ */
.city-serv{padding:0;overflow:hidden}
.city-serv .serv-row{padding:5px 10px 7px;gap:6px}
.city-serv .serv-label{flex:0 0 auto;font-size:11px;padding-right:2px}
.city-serv .serv-btns{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
/* #cityServices 是 id 选择器（特异性 1,0,0），比 .city-serv .serv-btns 更高，
   旧的 repeat(4,1fr) 会把 8 格压成 4 格两行，这里用同等 id 优先级改回 8 列 */
#cityServices{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.city-serv .serv-btns .mini{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;padding:4px 2px;font-size:15px;line-height:1.15;border-radius:8px;min-width:0}
.city-serv .serv-btns .mini span{font-size:9.5px;line-height:1.25;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:0}
.city-serv .serv-btns .mini:hover{border-color:var(--gold)}
.city-serv .serv-btns .mini:hover span{color:var(--gold)}
@media (max-width:560px){
  .city-serv .serv-label{display:none}
  .city-serv .serv-row{padding:5px 8px}
  #cityServices,.city-serv .serv-btns{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px 6px}
  .city-serv .serv-btns .mini{font-size:14px;padding:4px 2px}
}

/* ============================================================
 * v64 布局重设计 · 战斗日志默认折叠成 4 行
 * 原来固定 126~170px，长期占据中栏又一屏。默认只留最新 4 行，
 * 想要完整记录点「展开」→ 240px。
 * ============================================================ */
.box-log .box-head .mini-toggle{margin-left:auto;flex:0 0 auto}
.box-log{padding:0;overflow:hidden}
/* 通用 .box-head 带 margin:0 0 10px，在 >1240 的宽屏下没有被任何媒体查询覆盖，
   日志卡头就是被这 10px 撑到 74px 的（窄屏分支里压过，宽屏漏了）。
   这里统一清零，并把 hint 收成单行省略，避免它折成两行把卡头再顶高。 */
.box-log .box-head{padding:9px 14px 7px;display:flex;align-items:center;gap:10px;margin:0}
.box-log .box-head .hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:none}
.box-log .log{height:96px;padding:7px 13px;overflow-y:auto}
.box-log.expanded .log{height:240px}
@media (max-width:560px){
  .box-log .box-head{padding:8px 10px 6px}
  .box-log .log{height:88px}
  .box-log.expanded .log{height:200px}
}

/* ============================================================
 * v64 布局重设计 · 窄屏左右栏重排
 * 895 视口下三栏退化成单列，角色区 646px、装备区 903px 各自占满一整行，
 * 页尾两屏全是数据面板。
 *   角色区：加点卡 | 详细属性卡  ← 两张同高（419），并排正好
 *   装备区：BOSS 卡满宽自然高度，下面装备卡内部「装备 9 槽 | 宝石 3 格 + 合成」
 * ============================================================ */
@media (max-width:1240px){
  .char-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:stretch}
  .char-col .char-card{min-width:0}
  .char-col .derived-card{min-width:0}
  /* 半宽后四维 2×2 会挤爆「+5/+20」，改成单列一行一条 */
  #statList{grid-template-columns:1fr;gap:4px}
  .char-col .derived-card #derivedStats{grid-template-columns:1fr}
  .char-col .derived-card .dg-rows .dv{font-size:11px}

  /* 装备区：不做「BOSS 卡硬拉高」，改成上下两段满宽，装备卡内部再左右分 */
  .side-col{display:flex;flex-direction:column;gap:10px}
  #paneEquip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
  #paneEquip #equipList{min-width:0}
  #paneEquip #jewelList{min-width:0}
  /* 半宽装备行：去掉「武器 / 未装备」灰色副标题，只留名字+数值+操作 */
  .side-col #paneEquip .eqrow{padding:4px 2px;gap:6px}
  .side-col #paneEquip .eqrow .sub{display:none}
  .side-col #paneEquip .equip{font-size:12px;line-height:1.45}
  .side-col #paneEquip .eqrow .val{font-size:11px;white-space:nowrap}
  .side-col #paneEquip .eqrow .sico{font-size:13px}
  /* 详细属性在窄屏只展开「输出」一组，其余点「展开全部」再看（z44 规则在更早的
     层级里被后面的媒体查询盖掉了，这里用窄屏专用规则再钉一次） */
  .derived-card:not(.expanded) #derivedStats>.dg:nth-child(n+2){display:none}

  /* 卡头统一收紧：练功区、舞台、详细属性三个卡头原来各 70px，
     合计 210px 只为显示一行标题 + 一句 hint，把整块压缩到 ~46px。 */
  .area-strip .box-head,.stage-main .stage-head{padding:7px 12px 5px}
  .area-strip .box-head h3,.stage-main .stage-head h3{font-size:13px}
  .area-strip .box-head .hint,.stage-main .stage-head .hint{font-size:10.5px}
  #areaList.area-strip-list{padding:6px 10px 8px}
  #areaList.area-strip-list .area{padding:5px 9px;font-size:11.5px}
  /* 装备操作按钮（强化 / 镶嵌 / 洗练）在半宽下会挤成第二行，改成贴右不换行 */
  .side-col #paneEquip .eqrow .ops{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
  .side-col #paneEquip .eqrow .ops .eq{white-space:nowrap;font-size:10.5px;padding:1px 5px}
  /* 日志卡头原来 74px（.box-head 还有一条 margin-bottom:10px 叠在上面），压到 40px */
  .box-log .box-head{margin:0;padding:6px 12px 6px;min-height:0}
  .box-log .box-head h3{font-size:12.5px;margin:0;letter-spacing:1px}
  .box-log .box-head .mini-toggle{font-size:10.5px;padding:2px 8px;line-height:1.5}
}
/* 手机竖屏（≤560）才真的没空间并排，退回上下堆叠 */
@media (max-width:560px){
  .char-col,.side-col{display:flex;flex-direction:column;gap:10px}
  #paneEquip{display:flex;flex-direction:column;gap:10px}
  #statList{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
 * v64 布局重设计 · 手机端（≤760）HUD 明确三行，不再被 1120 段的 areas 拖成 2×2
 * 行1：头像+名字 | 货币/战力/同步
 * 行2：HP / MP / EXP 三条血条铺满
 * 行3：三个工具按钮贴右
 * ============================================================ */
@media (max-width:760px){
  .hud{grid-template-columns:auto minmax(0,1fr);grid-template-areas:none;gap:8px;padding:10px 12px}
  .hud .hud-id{grid-column:1;grid-row:1}
  .hud .hud-meta{grid-column:2;grid-row:1;justify-content:flex-end;flex-wrap:wrap;
    border-top:none;padding-top:0}
  .hud .hud-bars{grid-column:1 / -1;grid-row:2}
  .hud .hud-tools{grid-column:1 / -1;grid-row:3;justify-content:flex-end}
  .hud .hud-bars .bar .v{font-size:10.5px}
}
@media (max-width:400px){
  .hud .hud-meta{gap:4px 6px}
  .hud .hud-bars .bar{grid-template-columns:28px minmax(0,1fr)}
  .hud .hud-bars .bar .v{display:none}
}

/* ===== 商城分组与加宽弹窗（v79）===== */
#shopModal .modal-card{max-width:660px;max-height:84vh;display:flex;flex-direction:column}
#shopBody{overflow-y:auto;flex:1;min-height:0;padding-right:2px}
.shop-group{margin-top:12px}
.shop-group:first-child{margin-top:0}
.sg-head{font-size:12px;font-weight:700;color:var(--gold);letter-spacing:1px;padding:0 0 5px;border-bottom:1px solid var(--line);margin-bottom:8px}
.shop-item.lack{opacity:.6}
.shop-item .si-price.lack{color:#e0494b;font-weight:700}
.shop-item button:disabled{cursor:not-allowed;opacity:.55;border-color:var(--line);color:var(--dim)}
@media(max-width:560px){
  #shopModal .modal-card{max-width:100%;padding:14px}
  .shop-grid{grid-template-columns:1fr}
}
/* ===== v82：日志卡高度真相 =====
 * 真正的压制来源是 865 行的 `.center-col .box-log{flex:1 1 auto;min-height:170px}`
 * —— 两层 class，压过任何单层 `.box-log` 覆盖。之前两轮只改卡头 padding/margin
 * （卡头本身才 35px），所以怎么改都还是 170。
 * 这里用同层级选择器覆盖：解除 min-height 与 flex 填充，改成「卡头 35 + 日志 112」。 */
.center-col .box-log{min-height:0;flex:0 0 auto}
.center-col .box-log .log{height:112px;max-height:none;flex:0 0 auto}
.box-log.collapsed .log{display:none}
@media(max-width:560px){
  .center-col .box-log .log{height:96px}
}
/* ===== z92：安全区 / 战斗舞台的立绘尺寸 =====
 * 老版本 `.ava-big{font-size:42px}` + `img{width:52px}` 是「emoji 当立绘」时代留下的，
 * 现在立绘是 512×512 的真实 PNG，代码里用 inline width 直接给尺寸（150/170），
 * 一旦进到 <=760px 的单列布局，inline 的 170px 就会把两个 fighter 挤爆。
 * 这里按断点用 !important 压回来，保证手机端「玩家 + VS + 怪物」三列还放得下。 */
@media(max-width:760px){
  .stage-main .stage{padding:10px 8px 10px;gap:4px}
  .stage-main .fighter{min-width:0}
  .stage-main .fighter .ava-big img{width:104px!important;height:104px!important}
  .stage-main .stage:has(#figM[style*="display: none"]) .fighter .ava-big img{width:140px!important;height:140px!important}
}
@media(max-width:560px){
  .stage-main .fighter .ava-big img{width:84px!important;height:84px!important}
  .stage-main .stage:has(#figM[style*="display: none"]) .fighter .ava-big img{width:124px!important;height:124px!important}
}
@media(max-width:400px){
  .stage-main .fighter .ava-big img{width:70px!important;height:70px!important}
  .stage-main .stage:has(#figM[style*="display: none"]) .fighter .ava-big img{width:108px!important;height:108px!important}
}
/* ===== z97：895~1240 视口回归「战场左 / 属性右」双栏 =====
 * 原先 <=1240 直接退化成单列，在 900px 宽的屏上玩家要滚 1200px 才看到角色属性 ——
 * 这就是「很多地方设计很不合理」的来源之一。这里改成：
 * 左列 = 练功区 + 战斗舞台 + 城市服务 + 日志；右列 = 角色属性 + 详细属性 + 装备栏。
 * 首屏因此能同时看到战斗画面和自己的属性，不用来回滚。 */
@media (min-width:761px) and (max-width:1240px){
  .layout-v10{grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}
  .center-col{grid-column:1;grid-row:1 / span 2}
  .char-col{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:12px}
  .side-col{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:12px}
  .char-col .char-card,.char-col .derived-card{min-width:0;width:100%}
  .char-col .derived-card #derivedStats{grid-template-columns:1fr}
  .stage-main .actions{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ===== z98：快捷功能区沉到左列底部 =====
 * 原来「副本/爬楼/竞技/世界B/组队/拍卖/商城/许愿」这一排夹在战斗舞台和日志之间，
 * 把「出手 → 看战报」这条信息流生生截断了。挪到日志下面，既不打断战斗阅读，
 * 也回到拇指/视线最自然的位置。 */
.center-col .city-serv{order:9}
/* ===== z99：技能条在窄栏里排成单行 =====
 * 技能卡原为定宽 96px，532px 的窄栏只放得下 4 张，剩下的折成第二行，白白吃掉 90px，
 * 把日志挤出首屏（战斗中看不到战报）。收到 76px 并压一点高度后 6 个技能一行排满，
 * 战斗舞台矮 90px，日志回到首屏。 */
@media (min-width:761px) and (max-width:1240px){
  #skillRow .skchip{flex:0 0 76px;width:76px;min-height:72px}
  #skillRow.skbar{gap:6px;padding:9px 12px 6px}
}
/* ===== z100：战斗态动作按钮并成单行 =====
 * 战斗时「普通攻击/技能/挂机 + 倍速/回城/逃跑」被拆成 3 列 2 行，占掉 130px，
 * 日志再次被挤出首屏。改成 6 列一行，战斗舞台矮 65px，出城挂机也能看到战报。 */
@media (min-width:761px) and (max-width:1240px){
  .stage-main .actions{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:0 12px}
  .stage-main .actions .act{font-size:11.5px;padding:9px 2px}
}
/* ===== z107 首屏纵向预算第一刀：HUD 121→60、练功区 92→36 =====
   895×883 视口下这两块吃掉 213px（屏高 24%），但内容只有「一行身份+三条血」和「一行 tab」。
   压掉之后日志与快捷功能才有机会进首屏。
   注意：1120px 断点用的是 grid-template-areas 两行排布，这里必须连 areas 一起重置，
   否则 4 列会被 areas 拆回两行。 */
@media (min-width:761px) and (max-width:1240px){
  .hud{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:none;
    gap:8px;padding:5px 11px;margin-bottom:8px}
  .hud .hud-id,.hud .hud-bars,.hud .hud-meta,.hud .hud-tools{grid-area:auto}
  .hud .hud-id{gap:7px}
  .hud .hud-id .nm{font-size:13px}
  .hud .hud-id .cl{font-size:10px}
  .hud #ava img{width:34px!important;height:42px!important}
  .hud .hud-bars{gap:2px}
  .hud .hud-bars .bar{font-size:10px;gap:5px}
  .hud .hud-bars .bar .k{width:23px;font-size:9.5px}
  .hud .hud-bars .bar .track{height:6px}
  .hud .hud-bars .bar .v{width:82px;font-size:10px}
  .hud .hud-meta{gap:6px;font-size:11.5px}
  .hud .hud-meta .zen,.hud .hud-meta .power-chip{padding:2px 7px}
  .hud .hud-meta .sync-dot{padding:2px 7px;font-size:10.5px}
  .hud .tb-btn{padding:3px 7px;font-size:11px}
  /* 练功区：标题条并入横滑列表 —— tab 的 active 高亮本身就标出了当前区，标题重复一遍是纯浪费 */
  .area-strip .box-head{display:none}
  .area-strip-list{padding:5px 10px 6px;gap:5px}
  .area-strip-list .area{padding:4px 9px;font-size:11.5px;border-radius:8px}
  .area-strip-list .area .alv,.area-strip-list .area .lk{font-size:10px}
}
/* ===== z108 左右等高：压右列 1342→~920，左列同步加高填平 =====
   病根：右列「角色291 + 详细属性434 + 挑战BOSS235 + 装备343 + tab39 = 1342」，
   左列只有 814 —— 页面下半截左半边全空，整页高度被右列一根柱子锁死。
   解法：挑战BOSS 的 5 行竖排并成 4 行紧凑排版；装备区限高内部滚动；
   详细属性只留「技能输出/普攻输出」两行明细；左列战斗画面加高去追平。 */
@media (min-width:761px) and (max-width:1240px){
  /* 挑战 BOSS 235→92 */
  .ch-bar-v10 .box-head{padding:5px 12px 3px}
  .ch-bar-v10 .box-head h3{font-size:12px}
  .ch-bar-v10 .cd{font-size:10px}
  .ch-bar-v10 .ch-boss{padding:2px 12px;font-size:11px}
  .ch-bar-v10 .ch-mats{padding:2px 12px;font-size:10px}
  .ch-bar-v10 .ch-note{padding:2px 12px;font-size:10px}
  .ch-bar-v10 .btn-row{padding:5px 12px 8px;gap:6px}
  .ch-bar-v10 .btn-row .act,.ch-bar-v10 .btn-row .mini{padding:5px 8px;font-size:11px}

  /* 装备/背包：限高 + 内部滚动，不再把整块撑到 343 */
  .side-pane-v10{max-height:238px;overflow-y:auto}

  /* 详细属性：只留两行明细（技能输出/普攻输出），其余收进「展开全部」 */
  .derived-hero{padding:7px 14px 6px}
  .derived-hero .dh-v{font-size:23px}
  .derived-card:not(.expanded) #derivedStats > .dg:first-child .dg-rows > .dv:nth-child(n+3){display:none}

  /* 左列战斗画面加高，去追平右列 */
  .stage-main .stage{min-height:340px}
}
/* ===== z109 右列再压 1138→~926，与左列 808 收窄到 120 以内 =====
   三处都是「信息重复占位」：角色卡四维行内边距过肥；
   详细属性里「未转生」与角色卡等级重复；挑战BOSS 里「尚未装备翅膀」在立绘上本来就能看见。 */
@media (min-width:761px) and (max-width:1240px){
  /* 角色卡四维行 52→~36 */
  .char-card .stat{padding:4px 12px;font-size:12px}
  .char-card .stat .pts{font-size:12px}
  .char-card .plus{padding:3px 7px;font-size:11px}
  .char-card .rec-build{padding:3px 12px 5px}
  .char-card .rec-line{font-size:11px;gap:6px}
  .char-card .rec-btn{padding:4px 8px;font-size:10.5px}
  /* 转生：删掉与等级重复的一行说明，按钮压紧 */
  .derived-card #rebirthInfo{display:none}
  .derived-card .rebirth-btn{margin:5px 14px 9px;padding:6px 10px;font-size:11.5px}
  /* 挑战BOSS：翅膀状态立绘上可见，省一行 */
  .ch-bar-v10 #wingInfo{display:none}
  /* 装备/背包再收 38px */
  .side-pane-v10{max-height:200px}
}
/* ===== z110 滚动条统一 + 折行修正 =====
   此前两套滚动条并存：内部块（日志/背包/商城/弹窗）走浏览器默认灰条（10px 带箭头），
   而练功区、侧栏是 6px 金线 —— 同一页面上两种手感，滚动时尤其割裂。
   统一为：竖向 8px / 横向 6px，金线深槽，hover 提亮，与整体金色暗色主题同源。 */
/* z122：此处原为 html{scrollbar-width:thin;scrollbar-color:...}，已整条移除。
   只要 CSS 里出现 scrollbar-width / scrollbar-color（值即使是 thin 或 auto），
   Chrome 就走「标准通道」，::-webkit-scrollbar 的 width 会被忽略，滚动条回落系统默认。
   滚动条改由下方 webkit 伪元素统一控制。 */

/* 覆盖早前写死的 6px 竖条，让所有竖滚统一 8px（横向条仍 6px） */

/* 详细属性标题被「实战口径：已含技能倍率与段数」挤成两行 —— 标题不折行，说明单行省略 */
.derived-card .box-head{display:flex;align-items:center;gap:8px}
.derived-card .box-head h3{flex:none;white-space:nowrap}
.derived-card .box-head .hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:10.5px}

/* 日志卡内层同样吃统一滚动条，并给它留出 8px 不吃字的余量 */
.box-log .log{padding-right:6px}
/* z122：此处原为 html,body,*{scrollbar-width:auto;scrollbar-color:auto}，已整条移除。
   显式 auto 同样会让 Chrome 切回标准通道、夺回滚动条控制权
   （实测注入 ::-webkit-scrollbar{width:20px} 后布局宽度纹丝不动 = webkitAlive:false）。
   滚动条只由下面的 ::-webkit-scrollbar 统一控制。 */
*::-webkit-scrollbar-thumb:active{background:rgba(232,198,106,.78)}
*::-webkit-scrollbar-corner{background:transparent}
/* ===== z113 修复加点「+」按钮被内边距挤成纯色圆点 =====
   原生 .plus 是 width:22/height:22 + border-radius:6 的定尺按钮，没有 padding；
   z109 为了压四维行高度给它加了 padding:3px 7px，22px 宽减去左右 14px 只剩 8px 内容区，
   「+」被裁掉只剩金色底 —— 截图里看到的就是两个纯色圆点。
   改法：不加内边距，只等比缩小按钮本身。 */
@media (min-width:761px) and (max-width:1240px){
  .char-card .plus{padding:0;width:20px;height:20px;font-size:12px;border-radius:5px;
    display:inline-flex;align-items:center;justify-content:center;line-height:1}
  .char-card .plus.bulk{width:auto;min-width:28px;padding:0 4px;height:20px;font-size:10px}
  .stat .pts{min-height:20px}
}
/* ===== z114 两处按钮文字收口 =====
   ① 加点「+」按 20px 框配 12px 字偏小，回到 14px（框仍 20，行高不变）。
   ② 挑战BOSS 按钮在 300px 栏里被压成「挑战 / BOSS」两行，改不换行 + 收内边距。 */
@media (min-width:761px) and (max-width:1240px){
  .char-card .plus{font-size:14px}
  .ch-bar-v10 .btn-row .act,.ch-bar-v10 .btn-row .mini{
    white-space:nowrap;padding:5px 6px;font-size:10.5px;letter-spacing:0}
}
/* ===== z115 装备/宝石改 3×3 网格竖排小卡 =====
   病根：.eqrow 是 grid「图标 20px | 名字 1fr | 数值 auto」三列横排，
   9 个槽位竖着排要 360px，塞进 300px 栏后被 max-height:200 裁掉 7 个 ——
   截图里只能看到「战士短…」「战士皮…」两条，名字还被省略号切掉，这是不可用的。
   装备槽位本来就该是网格（MMORPG 惯例）：改 3 列 × 3 行竖排小卡，9 个槽位一屏全见。
   宝石同样 3 列一行。腾出来的高度换可用性，不再靠裁切凑数。 */
@media (min-width:761px) and (max-width:1240px){
  #paneEquip #equipList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  #paneEquip #equipList .eqrow{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:6px 3px;min-height:58px;text-align:center;
    border-bottom:none;border:1px solid rgba(255,255,255,.07);border-radius:7px;
    background:rgba(255,255,255,.028);
  }
  #paneEquip #equipList .eqrow .sico{font-size:15px;line-height:1.1;text-align:center;opacity:1}
  #paneEquip #equipList .eqrow .meta{width:100%;text-align:center;line-height:1.3}
  #paneEquip #equipList .eqrow .meta .nm{font-size:10px;font-weight:700}
  #paneEquip #equipList .eqrow .meta .sub{font-size:8.5px}
  #paneEquip #equipList .eqrow .val{font-size:9.5px;text-align:center;white-space:nowrap}
  #paneEquip #equipList .eqrow .ops{grid-column:auto;justify-content:center;gap:2px;margin:0;flex-wrap:nowrap}
  #paneEquip #equipList .eqrow .ops .eq{font-size:8.5px;padding:0 4px}
  #paneEquip #equipList .eqrow .eqopts,
  #paneEquip #equipList .eqrow .eqset{grid-column:auto;font-size:8.5px;text-align:center}

  #paneEquip #jewelList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  #paneEquip #jewelList .eqrow{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:6px 3px;min-height:54px;text-align:center;
    border-bottom:none;border:1px solid rgba(255,255,255,.07);border-radius:7px;
    background:rgba(255,255,255,.028);
  }
  #paneEquip #jewelList .eqrow .sico{font-size:14px}
  #paneEquip #jewelList .eqrow .meta{width:100%;text-align:center;line-height:1.3}
  #paneEquip #jewelList .eqrow .meta .nm{font-size:9.5px}
  #paneEquip #jewelList .eqrow .meta .sub{font-size:8.5px}
  #paneEquip #jewelList .eqrow .val{font-size:10px;text-align:center}

  /* 网格已经把高度真降下来了，限高放到内容真实所需 */
  .side-pane-v10{max-height:352px}
  /* 左列底部空白交给日志吃掉，日志本身也更好用 */
  .box-log .log{height:180px}
}
/* ===== z116 装备区满宽 + 左列真正拉伸填满 =====
   ① #paneEquip 自 z72 起是「左右两列各 145px」，3 列槽位网格塞进去每格只剩 45px（实测 35px），
      卡片被压成竖条。装备槽位网格需要满宽，改回单列堆叠 已装备 / 宝石。
   ② .center-col 的 height:100% 在 grid 内没有确定高度可解析，等于 auto，
      所以左列一直是内容自然高度（946），而右列 1250 —— 左列下半截永远空着。
      改成 align-self:stretch，左列被拉到与右列等高，
      日志卡上的 .box-log{flex:1 1 auto} 会自动吃掉剩余空间（这也解释了为什么直接写死
      .log{height} 无效：它被 .center-col .box-log .log{height:auto} 更高特异性地覆盖了）。 */
@media (min-width:761px) and (max-width:1240px){
  #paneEquip{grid-template-columns:minmax(0,1fr)}
  #paneEquip #jewelList{margin-top:2px}

  .layout-v10{align-items:stretch}
  .center-col{height:auto;align-self:stretch}
  .char-col{align-self:start}
  .side-col{align-self:stretch}
}
/* ===== z117 右列按使用频率排序：装备上移，挑战BOSS 沉底 =====
   原来顺序是「角色卡 → 详细属性 → 挑战BOSS → 装备tab → 装备/背包」，
   低频的挑战BOSS（每日一次）占着 y748 的黄金位置，高频查看的装备被挤到 y952 首屏外。
   按频率重排：查看类（装备/背包）上移进首屏，操作类（挑战BOSS）沉底。 */
@media (min-width:761px) and (max-width:1240px){
  .side-col .ch-bar-v10{order:9}
}
/* ===== z118 左列真正填满：center-col 补成 flex 纵向容器 =====
   z116 把左列拉到了与右列等高（delta=0），但内容全堆在顶部、日志下到页底一片空白 ——
   因为 .center-col 从来就不是 flex 容器（853 行只设了 height:100%），
   所以 865 行那条 .center-col .box-log{flex:1 1 auto} 一直是死规则，日志只停在 112px。
   这里把 center-col 补成 flex column，让日志卡吃掉列内剩余空间：
   战斗日志本来就该显示更多行，用腾出来的空白换信息量，比留白合理。 */
@media (min-width:761px) and (max-width:1240px){
  .center-col{display:flex;flex-direction:column}
  .center-col .box-log{display:flex;flex-direction:column;flex:1 1 auto;min-height:150px}
  .center-col .box-log .box-head{flex:0 0 auto}
  .center-col .box-log .log{flex:1 1 auto;min-height:110px;max-height:none;overflow-y:auto}
  .center-col .city-serv{flex:0 0 auto}
}
/* ===== z119 日志不再无限拉伸 =====
   z118 让日志吃满后它变成 443px 高、里面只有 3 行字 —— 一个 400px 的深色空框比原来的留白更难看。
   改为封顶 320px（约 12 行，打起来就填满），快捷功能条贴底，中间只留一小段呼吸空隙。 */
@media (min-width:761px) and (max-width:1240px){
  .center-col .box-log{flex:0 1 auto;max-height:322px}
  .center-col .box-log .log{flex:1 1 auto;min-height:110px;max-height:280px}
  .center-col .city-serv{margin-top:auto}
}
/* ===== z120 日志卡固定成 322px（z119 的 flex:0 1 auto 让它停在内容高度 113，
   底下反而出现 342px 真空隙）。固定高度 + city-serv 贴底，间隙收到 190 以内。 */
@media (min-width:761px) and (max-width:1240px){
  .center-col .box-log{flex:0 0 auto;height:322px;max-height:322px}
  .center-col .box-log .log{flex:1 1 auto;min-height:100px;max-height:none}
}
/* ===== z121 日志放到 400px，把左列落差收到 80 以内 =====
 z120 日志 322 后仍留 170px 空隙。日志本来就是对战记录区，15 行才是合理可视量
 （安全区静止时只有 3 行是正常的，打起来立刻填满）。 */
/* ===== z138 把 400px 死高度改成自适应 =====
 400px 是在「右栏还没有回收面板」时为了追平左右列底部算出来的值；现在右栏多了
 回收分类三行 + 自动开关，两列落差已经不存在，而 400px 的固定高度在安全区只剩
 3 行内容，看上去就是一大块空框（用户报「日志卡占太高」）。改成按内容走，
 给一个上限，打起来仍能容纳十行以上。 */
@media (min-width:761px) and (max-width:1240px){
  .center-col .box-log{flex:0 0 auto;height:auto;max-height:none}
  .center-col .box-log .log{flex:0 0 auto;height:auto;min-height:150px;max-height:264px}
}
/* ===== z122 滚动条统一收口（配套上面 5 处标准属性清除） =====
   至此 CSS 中不含任何 scrollbar-width / scrollbar-color 声明，
   Chrome 不再走标准通道，::-webkit-scrollbar 的 8px 竖 / 6px 横 全部生效。 */
*::-webkit-scrollbar{width:8px;height:6px;background:transparent}
*::-webkit-scrollbar:vertical{width:8px}
*::-webkit-scrollbar:horizontal{height:6px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:4px;margin:2px 0}
*::-webkit-scrollbar-thumb{background:rgba(232,198,106,.32);border-radius:4px;min-height:28px}
*::-webkit-scrollbar-thumb:hover{background:rgba(232,198,106,.58)}
*::-webkit-scrollbar-thumb:active{background:rgba(232,198,106,.76)}
*::-webkit-scrollbar-corner{background:transparent}
/* ===== z123 滚动条最终解法：把滚动从 viewport 搬到 .game 容器 + HUD 常驻 =====
    排查结论：新版 Chrome 已把「viewport 滚动条」移出 ::-webkit-scrollbar 通道
    （实测 html::-webkit-scrollbar{width:20px} 注入后布局宽度纹丝不动 = webkitAlive:false），
    而 overflow 容器上的 ::-webkit-scrollbar 完全生效（#paneEquip 实测 gap=8）。
    所以清掉所有 scrollbar-width/color 也不够 —— 必须让滚动发生在容器里。
    顺带把 HUD 做成 sticky：网游 HUD 本来就该常驻，滚到哪儿都看得到血蓝和倍速。 */
@media (min-width:761px) and (max-width:1240px){
  .game{height:calc(100vh - 40px);overflow-y:auto;overflow-x:hidden}
  .game .hud{position:sticky;top:0;z-index:30;background:#0b0812;box-shadow:0 8px 20px rgba(0,0,0,.5)}
  .game::-webkit-scrollbar{width:8px;height:0}
  .game::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:4px}
  .game::-webkit-scrollbar-thumb{background:rgba(232,198,106,.32);border-radius:4px;min-height:32px}
  .game::-webkit-scrollbar-thumb:hover{background:rgba(232,198,106,.58)}
}
/* ===== z124 修正 z123 选择器：容器是 id="game" 不是 class .game =====
    上一版写成 .game 所以整段没生效（实测 .game 返回 NULL、HUD 仍 position:static）。
    改用 #game：滚动落到容器上，::-webkit-scrollbar 才能生效；HUD 同时 sticky 常驻。 */
@media (min-width:761px) and (max-width:1240px){
  #game{height:calc(100vh - 40px);overflow-y:auto;overflow-x:hidden}
  #game .hud{position:sticky;top:0;z-index:30;background:#0b0812;
    box-shadow:0 8px 20px rgba(0,0,0,.5);border-radius:0}
  #game::-webkit-scrollbar{width:8px;height:0}
  #game::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:4px}
  #game::-webkit-scrollbar-thumb{background:rgba(232,198,106,.32);border-radius:4px;min-height:32px}
  #game::-webkit-scrollbar-thumb:hover{background:rgba(232,198,106,.58)}
}
/* ===== z125 去掉列级嵌套滚动条：三列 overflow 改 visible =====
   853 行给 .char-col/.center-col/.side-col 设了 overflow-y:auto，
   而 #game 已经是滚动容器 —— 于是左右各多出一条独立滚动条，
   同一屏出现 3 条滚动条，正是「滚动条没有统一风格」的观感来源。
   整个页面只由 #game 一条 8px 金色条滚动，三个列改为 visible。
   （装备/背包子面板 .side-pane-v10 的滚动保留：它们是页内子区块，仍用同一套 8px 金条。） */
@media (min-width:761px) and (max-width:1240px){
  .char-col,.center-col,.side-col{overflow-y:visible;overflow-x:visible}
}
/* ============================================================================
 * z126 3D 战斗舞台：玩家角色用原版 BMD 转出的 glb 实时渲染
 * 为什么加这一段：旧舞台是 PNG 立绘 + 一张单独翅膀图硬贴，出招换帧时翅膀
 * 不跟帧，位置必然漂 → 「翅膀和角色看着别扭」。3D 版翅膀与铠甲同骨架蒙皮，
 * 任何动作都不会错位，所以这里把立绘位放大成一块真正的 3D 视口。
 * ==========================================================================*/
#fig3d{
  display:block;
  /* z176：宽度交给父级 .fighter 撑满（原来写死 210px，窄屏再压到 116px），
     两侧舞台各占 (50% - 28px)，中间只留 56px 给 ⚔️ —— 不再出现「两端各缩一小块、
     中间横跨半屏纯黑空场」。高度仍由下面的 aspect-ratio 推，canvas 由 setSize 跟随。 */
  width:100%;max-width:100%;
  flex:0 0 auto;
  height:0;overflow:hidden;
  margin:0 auto;
  position:relative;
  border-radius:10px;
  transition:height .28s ease;
  background:
    radial-gradient(ellipse 74% 48% at 50% 88%, rgba(146,116,228,.30), rgba(96,74,164,.12) 52%, rgba(10,8,18,0) 78%),
    linear-gradient(180deg, rgba(30,24,52,.42) 0%, rgba(15,12,26,.72) 58%, rgba(9,7,16,.90) 100%);
}
/* 尺寸由 three 的 setSize 写成 inline px，这里绝不能再用 100%!important 拉伸，
   否则 buffer 尺寸与显示尺寸不一致，画面会被压扁或拉成一条细线 */
#fig3d canvas{display:block;border-radius:10px;position:relative;z-index:1}
/* 接地影：canvas 提到 z-index:1 之后，影压在画布下方、背景上方，
   模型是透明底，所以影能透出来；又不会像 WebGL 里的底座那样把画面洗白。 */
#fig3d::after{
  content:"";position:absolute;left:50%;bottom:7%;
  width:56%;height:8%;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.58),rgba(0,0,0,.20) 52%,rgba(0,0,0,0) 78%);
}
#fig3d.is-3d{filter:drop-shadow(0 10px 20px rgba(0,0,0,.55))}


@media(max-width:760px){
  #fig3d{width:100%}
}
@media(max-width:560px){
  #fig3d{width:100%}
}
/* z131 3D 视口高度契约：宽度由 CSS 定（上限 210），高度按 210:250 推，
   与 stage3d.js 里的 applySize() 同一比例，避免「宽高独立写死」时被别处规则覆盖 */
#fig3d.is-3d{height:auto;aspect-ratio:210/250;overflow:visible}
@supports not (aspect-ratio: 210 / 250){
  #fig3d.is-3d{height:250px;overflow:visible}
  @media(max-width:760px){#fig3d.is-3d{height:167px}}
  @media(max-width:560px){#fig3d.is-3d{height:138px}}
}
/* z131b 防止 #fig3d 被 #figP 的 flex 拉伸成父宽（父宽随战斗态变化，会让渲染尺寸忽大忽小） */
#fig3d{align-self:center;flex:0 0 auto}

/* ============================================================================
 * z133 怪物 3D 视口：与玩家完全同一套尺寸契约
 *   宽度只由这里给（168px，断点 113 / 92），高度按 210:250 推，与
 *   stage3d.js 的 measure() 同源；canvas 尺寸由 setSize 写 inline，
 *   这里绝不再用 100%!important 拉伸（那就是角色被压成一条竖线的原因）。
 * ==========================================================================*/
#mon3d{
  display:block;
  /* z176：同 #fig3d，宽度撑满右侧 .fighter，不再固定 168px */
  width:100%;max-width:100%;
  flex:0 0 auto;
  height:0;overflow:hidden;
  margin:0 auto;
  position:relative;
  border-radius:10px;
  transition:height .28s ease;
  background:
    radial-gradient(ellipse 74% 48% at 50% 88%, rgba(150,104,208,.28), rgba(104,70,170,.12) 52%, rgba(10,8,18,0) 78%),
    linear-gradient(180deg, rgba(30,24,52,.42) 0%, rgba(15,12,26,.72) 58%, rgba(9,7,16,.90) 100%);
}
#mon3d canvas{display:block;border-radius:10px;position:relative;z-index:1}
/* 接地影，与 #fig3d 同一套层叠关系 */
#mon3d::after{
  content:"";position:absolute;left:50%;bottom:7%;
  width:58%;height:8%;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,.18) 52%,rgba(0,0,0,0) 78%);
}
#mon3d.is-3d{height:auto;aspect-ratio:210/250;overflow:visible;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
@media(max-width:760px){
  #mon3d{width:100%}
}
@media(max-width:560px){
  #mon3d{width:100%}
}
@supports not (aspect-ratio: 210 / 250){
  #mon3d.is-3d{height:200px;overflow:visible}
  @media(max-width:760px){#mon3d.is-3d{height:134px}}
  @media(max-width:560px){#mon3d.is-3d{height:110px}}
}
#mon3d{align-self:center;flex:0 0 auto}

/* ============================================================================
 * z144 右栏「属性」页签：原左栏的加点卡与详细属性整体并入右栏，
 * 三栏压成两栏（主视口独占左侧全部宽度），属性按需展开，首屏不再被一根竖长列吃掉。
 * ==========================================================================*/
#paneStats{display:flex;flex-direction:column;gap:12px;max-height:none;overflow:visible}
#paneStats .char-card,#paneStats .derived-card{padding:0;overflow:hidden}
#paneStats .stat-list{grid-template-columns:1fr;gap:6px}
#paneStats #derivedStats{grid-template-columns:1fr}
#paneStats .side-nav{margin:0}
/* ===== z148 一屏收口：HUD 定高，双列各吃剩余高度，日志常驻底部 =====
   实测 895×883 下中栏内容 925px > 可用 685px，战斗日志整卡被挤出屏外（只露 35px 卡头），
   右栏同样溢出。根因不是某一块过高，而是「整页一条流」：任何一块长高都会把日志顶出屏幕。
   改成：HUD 固定 → .layout-v10 吃满剩余 → 双列各自 overflow:hidden → 日志 flex:1 内部滚动。
   这样日志永远在屏内，且与商城/背包的滚动条统一走 overflow 容器通道。 */
#game{display:grid;grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}
#game > .hud{min-height:0}
/* 实测：#game clientHeight=883（padding 14+32），.hud 高 124 → 双列可用正好 745。
   grid 的 minmax(0,1fr) 在这一层拿不到 715 而按内容撑到 837（溢出 92），
   所以直接按实测的「hud 底边 138px」锁高，双列高度才能真的等于视口剩余。 */
.layout-v10{height:calc(100vh - 138px);height:calc(100dvh - 138px);min-height:0;align-items:stretch}
.center-col{min-height:0;display:flex;flex-direction:column;overflow:hidden}
.center-col > .area-strip,.center-col > .stage-main{flex:0 0 auto}
.center-col > .box-log{flex:1 1 auto;min-height:132px;overflow:hidden;display:flex;flex-direction:column}
.center-col > .box-log > #log{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.side-col{min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* 页签回到右栏顶部：属性/装备/背包是这一栏的「入口」，沉在底部会被 BOSS 卡挤出屏外 */
.side-col > .side-nav{flex:0 0 auto;order:-1;margin:0 0 8px}
#paneStats{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
.side-col > .ch-bar-v10{flex:0 0 auto;margin-top:auto}

/* ===== z151 日志区再挤出 46px：舞台内四块都是「留白肥」，不是内容需要 =====
   实测 .stage-main 内部 stage-head 39 / stage 307 / actions 37 / skbar 96 / psub 76，
   加起来把日志卡压到只剩 132（内容 95，两行就被裁）。
   这里只收各块的内边距，不动 3D 视口（210×250 是 z143 验证过的取景基准）。 */
.center-col .stage-main .stage-head{padding:5px 14px 4px}
.center-col .stage-main .stage{padding:8px 14px 10px}
.center-col .stage-main .actions{padding:5px 14px}
.center-col #skillRow.skbar{padding:7px 14px 5px;gap:6px}
.center-col .stage-main .psub{padding:6px 14px 7px;gap:6px}
.center-col > .box-log{min-height:80px}

/* ==========================================================================
 * z178 布局重排：中栏底部「日志 / 快捷功能」双页签 + 右栏「BOSS」第四页签
 * --------------------------------------------------------------------------
 * 实测（视口 895×883，z177 之后）：
 *   .center-col 盒 745 / 内容 834 → overflow:hidden 裁掉 89px，
 *   被裁的正是一整块「快捷入口」（副本/爬塔/竞技/世界B/组队/拍卖/商城/许愿），
 *   以及战斗日志的下沿 13px。右栏 char-card 裁 44、derived-card 裁 45，
 *   挑战 BOSS 被 margin-top:auto 顶到栏底，属性卡一长就出屏。
 * 处理原则：能收进页签的收进页签，每块都占满剩余高度、内容完整可见。
 * ==========================================================================*/

/* ---- 中栏底部页签条 ---- */
.center-col > .ctabs{flex:0 0 auto;display:flex;gap:6px;margin-top:2px}
.ctab{flex:1 1 0;min-width:0;padding:7px 0;border-radius:9px;border:1px solid var(--line);
  background:var(--panel2);color:var(--dim);font-size:12.5px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:.15s}
.ctab.on{border-color:var(--gold);background:rgba(232,198,106,.13);color:var(--gold)}

/* ---- 页签面板：各自吃满剩余高度，滚动发生在面板内部 ---- */
.center-col > .cpane{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.center-col > .cpane > .box{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* 日志：容器拉满，日志本体在内部滚动（不再被外层裁掉） */
.center-col > .cpane > .box-log .log{flex:1 1 auto;min-height:0;height:auto;max-height:none;
  overflow-y:auto;overscroll-behavior:contain}
.center-col > .cpane > .box-log .box-head{flex:0 0 auto}
/* 快捷功能：8 个入口给足高度，2 行 4 列全部完整显示 */
.center-col > .cpane > .city-serv{justify-content:center}
.center-col > .cpane .city-serv .serv-row{padding:6px 0}
.center-col > .cpane .city-serv .serv-btns{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.center-col > .cpane .city-serv .mini{padding:13px 4px;font-size:13px;line-height:1.5}
@media (max-width:560px){
  .center-col > .cpane .city-serv .serv-btns{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- 技能栏收成单行横滑：原来 96px 卡 6 个换行 + 整行解锁提示，实测 115px ---- */
#skillRow.skbar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;align-items:center;
  padding:6px 14px;gap:6px}
#skillRow .skchip{flex:0 0 92px;width:92px;min-height:60px;padding:4px 3px 5px}
#skillRow .skchip .sic{height:26px}
#skillRow .skchip .simg{width:24px;height:24px}
#skillRow .skchip .snm{font-size:10px}
#skillRow .skchip .smp{font-size:8.5px;margin-top:0}
#skillRow .sk-lock-note{flex:0 0 auto;width:auto;white-space:nowrap;font-size:10.5px;padding:0 4px}

/* ---- 药水行收一行 ---- */
.center-col .stage-main .psub{padding:5px 14px 6px;gap:5px}
.center-col .stage-main .psub .pbtn{padding:4px 6px;font-size:11px;line-height:1.25}
.center-col .stage-main .psub .pbtn br{display:none}
.center-col .stage-main .psub .pbtn i{display:inline;margin-left:3px;font-size:9.5px;opacity:.8}

/* ---- 右栏：属性面板四种卡不许被压缩，超出由面板自己滚 ---- */
#paneStats > *{flex:0 0 auto}
#paneStats .char-card,#paneStats .derived-card{overflow:visible}
/* 四维加点 2 列：单列 4 行会把「+5/+20」按钮行挤到裁切之外（实测缺 44px） */
#paneStats .stat-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px}
@media (max-width:560px){
  #paneStats .stat-list{grid-template-columns:1fr}
}

/* ---- 右栏 BOSS 页签 ---- */
#paneBoss{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:12px;
  overflow-y:auto;overscroll-behavior:contain}
#paneBoss > *{flex:0 0 auto}
#paneBoss .ch-bar-v10{margin-top:0}
/* 旧规则是 .side-col > .ch-bar-v10，改到页签里后不再命中，这里补一条并解除顶底 */
.side-col > .side-nav{order:-1}

/* ---- z178-fix：把舞台内的名字/等级/血量叠到画布上，把纵向空间还给日志 ----
   原来 fhp(9) + 画布(249) + fname(18) + flv(15) + 血量(16) 竖着叠 = 舞台 301px，
   日志只剩 63px（两行）。名字和血量在 HUD 里已有，这里改成画布底部的半透明叠层。 */
.center-col .stage-main .fighter{position:relative}
.center-col .stage-main .fighter .fhp{position:absolute;top:0;left:0;right:0;z-index:3;max-width:none}
.center-col .stage-main .fighter .fname,
.center-col .stage-main .fighter .flv,
.center-col .stage-main .fighter .v{
  position:absolute;left:0;right:0;z-index:3;text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.75);pointer-events:none}
.center-col .stage-main .fighter .fname{bottom:46px;font-size:12px}
.center-col .stage-main .fighter .flv{bottom:32px;font-size:10.5px}
.center-col .stage-main .fighter .mn-tags{position:absolute;left:0;right:0;z-index:3;bottom:17px}
.center-col .stage-main .fighter .v{bottom:1px;margin:0 !important;font-size:10.5px}
/* 2D 立绘兜底件在 3D 成功时不该占位（占位 170px 会把舞台顶高） */
.center-col .stage-main .fighter .ava-big{margin:0}

/* ---- 药水行强制单行横滑 ---- */
.center-col .stage-main .psub{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
.center-col .stage-main .psub .pbtn{white-space:nowrap;flex:0 0 auto}
.center-col .stage-main .psub .swchip{flex:0 0 auto}
.center-col .stage-main .psub .cd,.center-col .stage-main .psub .psub-gap{flex:0 0 auto}

/* ---- 舞台头部再收一行 ---- */
.center-col .stage-main .stage-head{padding:4px 14px 3px}

/* ---- 右栏页签 4 个必须一行，否则换行吃掉 80px（实测 2 行） ---- */
.side-col .side-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.side-col .snav{padding:8px 0;font-size:12.5px}

/* ---- z178-fix2：右栏四个页签统一「占满整栏 + 内部滚动」----
   原先只有 paneStats/paneBoss 有 overflow，paneEquip 装不下就整段被裁（实测缺 115px）。 */
.side-col .side-pane-v10{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.side-col .side-pane-v10 > *{flex:0 0 auto}
/* 装备页：槽位行收 2px，正文两行都保留（不靠隐藏副标题来省高度） */
#paneEquip .eqrow{padding:3px 2px}
#paneEquip .box .box-head{padding:8px 12px 6px}
/* 背包页：列表吃满页面高度并自己滚，别被 max-height 锁死 */
#paneBag .box{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#paneBag #paneInv,#paneBag #paneRec{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#paneBag #invList{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}

/* ---- 技能卡再压 16px，把高度让给日志（日志从 83 → 约 99）---- */
#skillRow .skchip{min-height:52px}
#skillRow .skchip .sic{height:22px}
#skillRow .skchip .simg{width:20px;height:20px}

/* ---- z178-fix3：装备槽改成单行（名称 + 副标题并排、强化按钮并入行尾）----
   11 行两行制实测需要 467px，页签只有 352px，会被裁 127px。 */
#paneEquip .eqrow{grid-template-columns:20px minmax(0,1fr) auto auto;gap:6px;padding:2px}
#paneEquip .eqrow .meta{display:flex;align-items:baseline;gap:6px;min-width:0;line-height:1.3}
#paneEquip .eqrow .meta .nm{flex:0 1 auto;min-width:0;font-size:12px}
#paneEquip .eqrow .meta .sub{flex:0 0 auto;font-size:9.5px;color:var(--dim)}
#paneEquip .eqrow .ops{grid-column:auto;margin:0;flex-wrap:nowrap}
#paneEquip .eqrow .ops .eq{padding:0 4px;font-size:9.5px}
#paneEquip .equip{gap:0}
#paneEquip .box{padding-bottom:8px}

/* ---- z178-critical：顶部站点导航占掉 40px，而 #game 仍按 100dvh 定高 ----
   实测：.site-nav 高 40，其后 #game top=40 h=883 → 底边 923，比视口多 40px，
   底部「战斗日志」整卡被推到屏幕外。这里改成页面级纵向分配：
   导航自动高 → #game 吃剩余 → .layout-v10 吃 #game 剩余，不再用视口硬减。 */
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.site-nav{flex:0 0 auto}
#game{flex:1 1 auto;min-height:0;height:auto !important}
#game > .hud{flex:0 0 auto}
.layout-v10{height:100% !important;min-height:0}
@media (max-width:1240px){
  /* 单列时不再一屏锁死，交给页面自然滚动（手机上堆叠阅读更合理） */
  body{height:auto;overflow:visible}
  #game{height:auto !important;min-height:100dvh}
  .layout-v10{height:auto !important}
}

/* ---- z178-fix4：断点冲突修正 ----
   上面那条 @media (max-width:1240px) 把 body 改成可滚动，
   但 895 宽下 .layout-v10 仍是双列（539 + 300），属于「一屏阅读」档，
   结果 #game 拿到 min-height:100dvh 又被顶出 40px。
   双列档一律锁一屏；真正的单列堆叠（≤760）才放开滚动。 */
@media (max-width:1240px){
  body{height:100dvh;overflow:hidden}
  #game{height:auto !important;min-height:0 !important}
  .layout-v10{height:100% !important;overflow:hidden}
}
@media (max-width:760px){
  body{height:auto;overflow-x:hidden;overflow-y:auto}
  #game{min-height:100dvh}
  .layout-v10{height:auto !important;overflow:visible}
}

/* ---- z178-final：中栏三页签（战斗 / 日志 / 快捷功能）----
   之前「战斗区 + 日志 + 快捷入口」挤在一条纵向流里，战斗区吃满后日志只剩两行。
   现在三块各自整栏：切到哪个哪个铺满，战斗页底部只留 3 行战报尾巴。 */
.center-col{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:hidden}
.center-col > .area-strip{flex:0 0 auto}
.center-col > .ctabs{flex:0 0 auto}
.center-col > .cpane{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:0;overflow:hidden}
/* 战斗页签：战斗区按内容、战报尾巴吃剩余高度 */
#cPaneBattle .stage-main{flex:0 0 auto}
#cPaneBattle .logmini{flex:1 1 auto;min-height:78px;display:flex;flex-direction:column;margin-top:8px}
#cPaneBattle .logmini .box-head{padding:6px 12px 4px;flex:0 0 auto}
#cPaneBattle .logmini .box-head h3{font-size:11.5px}
#cPaneBattle #logMini{flex:1 1 auto;min-height:0;height:auto;overflow-y:auto;font-size:11px;line-height:1.55;padding:6px 10px;background:#0a0810;border:1px solid var(--line);border-radius:8px}
/* 日志页签：整块铺满 */
#cPaneLog .box-log{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#cPaneLog .log{flex:1 1 auto;min-height:0;height:auto;overflow-y:auto}
/* 快捷页签：整块铺满并自己滚 */
#cPaneFunc .city-serv{flex:1 1 auto;min-height:0;overflow-y:auto}

/* ---- z178-final2：战报尾巴的卡头吃掉了一半高度（实测 81 的卡里内层只剩 15）----
   卡头原本按大卡片排版（12/8 padding + 大标题），尾巴只有 3 行正文却被卡头挤成 1 行。 */
#cPaneBattle .logmini{min-height:0}
#cPaneBattle .logmini .box-head{padding:4px 10px 3px;min-height:0;gap:8px;align-items:center}
#cPaneBattle .logmini .box-head h3{font-size:11.5px;line-height:1.2;margin:0}
#cPaneBattle .logmini .box-head .hint{font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cPaneBattle #logMini{font-size:11px;line-height:1.5;padding:5px 9px}

/* 3 行战报不需要卡头：卡头两级规则都被别处的 .box-head 覆盖，干脆去掉，把 81px 全给正文 */
#cPaneBattle .logmini .box-head{display:none !important}
#cPaneBattle .logmini{padding:0;border:0;background:transparent}
#cPaneBattle #logMini{border-radius:8px}

/* ---- z178-final3：快捷功能页改成铺满的宫格 ----
   8 个入口原来在一行里居中，切到该页签后上下各空一大片，看着像「没内容」。
   改成 2 列 × 4 行的宫格，行高自动均分整栏高度。 */
#cPaneFunc .city-serv{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:10px}
#cPaneFunc .serv-row{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:0}
#cPaneFunc .serv-label{font-size:11.5px;color:var(--dim);letter-spacing:.14em;flex:0 0 auto}
#cPaneFunc .serv-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);
  gap:10px;flex:1 1 auto;min-height:0;overflow-y:auto}
#cPaneFunc .serv-btns .mini{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;margin:0;font-size:15px;border-radius:12px;min-height:64px}
#cPaneFunc .serv-btns .mini span{font-size:12.5px;font-weight:600;letter-spacing:.04em}
@media (max-width:760px){
  #cPaneFunc .serv-btns{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto}
}

/* 宫格被外层 .serv-row 的居中/收缩约束压成 101 宽，按钮只剩 46px —— 强制铺满 */
#cPaneFunc .serv-row{align-items:stretch;justify-content:flex-start;width:100%}
#cPaneFunc .serv-btns{width:100%;align-self:stretch;justify-items:stretch;justify-content:stretch}
#cPaneFunc #cityServices{width:100%;max-width:none}

/* ---- z178-final4：装备页改回「单列列表」----
   某段窄屏规则把 #equipList 排成 3 列小方块（每格 76 高、名称/数值/强化挤在同一格里，
   副标题还被 display:none 藏掉），既难读又白占高度。这里统一成单列单行：
   11 个槽位 × 约 26px ≈ 286px，300 宽、546 高的装备页一屏放得下，不用滚动也不裁。 */
#paneEquip{display:flex;flex-direction:column;gap:8px}
#paneEquip #equipList,
#paneEquip #jewelList{display:flex !important;flex-direction:column !important;gap:0 !important;grid-template-columns:none !important}
#paneEquip #equipList .eqrow,
#paneEquip #jewelList .eqrow{
  display:grid !important;
  grid-template-columns:20px minmax(0,1fr) auto auto !important;
  gap:6px !important;padding:2px 3px !important;align-items:center !important}
#paneEquip #equipList .eqrow .meta,
#paneEquip #jewelList .eqrow .meta{
  display:flex !important;flex-direction:row !important;align-items:baseline !important;
  gap:6px !important;width:auto !important;text-align:left !important;min-width:0 !important}
#paneEquip #equipList .eqrow .meta .nm,
#paneEquip #jewelList .eqrow .meta .nm{font-size:12px !important;text-align:left !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#paneEquip #equipList .eqrow .meta .sub,
#paneEquip #jewelList .eqrow .meta .sub{display:inline !important;font-size:9.5px !important;text-align:left !important;white-space:nowrap}
#paneEquip #equipList .eqrow .val,
#paneEquip #jewelList .eqrow .val{font-size:11px !important;text-align:right !important;white-space:nowrap}
#paneEquip #equipList .eqrow .ops,
#paneEquip #jewelList .eqrow .ops{display:flex !important;justify-content:flex-end !important;gap:4px !important;margin:0 !important;flex-wrap:nowrap !important}
#paneEquip #equipList .eqrow .ops .eq{font-size:10px !important;padding:1px 5px !important}

/* 右栏没被拉伸（实测 443 vs 中栏 597），槽位行还带着窄屏块的 min-height:58 —— 复位 */
.side-col{align-self:stretch;height:100%;min-height:0;display:flex;flex-direction:column}
.side-col > .side-nav{flex:0 0 auto}
.side-col > .side-pane-v10{flex:1 1 auto;min-height:0}
#paneEquip #equipList .eqrow,
#paneEquip #jewelList .eqrow{min-height:0 !important;height:auto !important}
#paneEquip .box{flex:0 0 auto}

/* 装备页签没吃满整栏（352 vs 属性页 570），强制占满，让 11 个槽位一屏排开 */
#paneEquip{flex:1 1 auto !important;min-height:0 !important;align-self:stretch !important;height:auto !important}

/* 右栏整体被 align-self:end 底部对齐（起点 410 vs 中栏 254，高度只剩 443）—— 拉满整栏 */
.side-col{align-self:stretch !important;margin-top:0 !important;height:100% !important;min-height:0 !important}

/* 右栏残留的 justify-content:flex-end 把四个页签都压在栏底（装备 top 465 / BOSS 678）——
   旧版为把「挑战 BOSS」吊在栏底写过，页签化后必须改成从顶排起、每个页签吃满整栏。 */
.side-col{justify-content:flex-start !important}
.side-col .side-pane-v10{flex:1 1 auto !important;min-height:0 !important}

/* 右栏落在第二网格行（rows: 59.75 / 627.25，右侧比中栏高 30px、上沿越界）——
   收回单行，两栏同顶同底 */
.layout-v10{grid-template-rows:minmax(0,1fr) !important;grid-auto-rows:minmax(0,1fr);align-content:stretch !important;align-items:stretch !important}
.center-col{grid-row:1 !important;align-self:stretch !important}
.side-col{grid-row:1 !important}

/* 真正的根因：.side-pane-v10 带着 max-height:352px（旧版为压住 BOSS 卡写的），
   所以四个页签不管内容多少都只长到 352，装备页那 84px 就是这么被裁出来的。 */
.side-col .side-pane-v10{max-height:none !important}

/* ============================================================================
 * z182 多端多分辨率布局契约（1920×1032 / 1440×900 / 1280×800 / 1024×768 / 手机）
 *   目标：任何一档分辨率下，战斗区（舞台+操作条+技能栏+药水行+战报）都在首屏内，
 *   右栏页签整块可见，不靠裁切、不靠滚动条找内容。
 *   三条规则：
 *     1) 页面容器有上限宽（1680），超过部分两侧留白，避免元素被无限拉宽；
 *     2) 中栏是 flex 列：舞台 flex:1 吃掉剩余高度，操作条/技能栏/药水/战报固定占位；
 *     3) ≥1081 双列（中栏+右栏），≤1080 单列堆叠（右栏移到下面，页签横排铺满）。
 * ==========================================================================*/
.layout-v10{width:100%;max-width:1680px;margin:0 auto}
#cPaneBattle.stage-main,
#cPaneBattle .stage-main{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
#cPaneBattle .stage{flex:1 1 auto;min-height:180px;max-width:980px;margin:0 auto;width:100%;
  display:flex;align-items:stretch;justify-content:center;gap:0}
#cPaneBattle .stage .fighter{flex:1 1 0;min-width:0;max-width:480px;display:flex;align-items:center}
#cPaneBattle .stage .fighter #fig3d,
#cPaneBattle .stage .fighter #mon3d{width:100%;max-width:100%}
#cPaneBattle .actions,
#cPaneBattle .skbar,
#cPaneBattle .psub{flex:0 0 auto}
#cPaneBattle .logmini{flex:0 0 auto;min-height:76px}

/* 大屏（≥1681）：容器封顶 1680，两栏按 1fr + 400 分配，右栏加宽放得下四列属性 */
@media (min-width:1681px){
  .layout-v10{grid-template-columns:minmax(0,1fr) 400px;gap:18px}
}
/* 中屏（1441–1680）：右栏 360 */
@media (min-width:1441px) and (max-width:1680px){
  .layout-v10{grid-template-columns:minmax(0,1fr) 360px;gap:16px}
}
/* 小桌面（1081–1440）：右栏 320，舞台跟着收窄 */
@media (max-width:1440px){
  .layout-v10{max-width:1440px;grid-template-columns:minmax(0,1fr) 320px;gap:14px}
  #cPaneBattle .stage{max-width:860px}
}
/* 平板/窄窗（≤1080）：单列堆叠，右栏整块下移、页签横排铺满，页面允许纵向滚动 */
@media (max-width:1080px){
  body{height:auto !important;min-height:100dvh;overflow-y:auto !important}
  #game{height:auto !important;min-height:0 !important}
  .layout-v10{display:flex !important;flex-direction:column;height:auto !important;
    max-width:100%;gap:12px;padding-bottom:12px}
  .center-col{width:100%;min-height:0}
  .side-col{width:100%;height:auto !important;min-height:0 !important}
  .side-col > .side-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .side-col .side-pane-v10{max-height:none !important;min-height:0}
  #cPaneBattle .stage{max-width:100%;min-height:220px}
  #cPaneBattle .stage .fighter{max-width:none}
}
/* 手机（≤760）：舞台压到 46vh，操作条两行、技能栏横滑，药水行横滑 */
@media (max-width:760px){
  #cPaneBattle .stage{min-height:46vh}
  #cPaneBattle .actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .side-col > .side-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .side-col > .side-nav .snav{font-size:11px;padding:7px 2px}
}