/* ============================================================================
 * 指尖奇迹 · H5 统一布局（唯一一套，不再区分桌面 / 手机）
 *
 * 原则：
 *   1. 只有一套规则，没有 @media、没有类名分支 —— 任何设备拿到的布局完全一致；
 *   2. 全部流式堆叠：容器宽度自适应，窄屏 360 与宽屏 1920 用同一个模板（宽屏居中限宽）；
 *   3. 禁止固定高度：所有格子用 min-height + 内部流式排版，避免窄屏时字压字；
 *   4. 所有文字块允许省略号，不靠横滑藏功能（练功区是唯一可横滑的条）。
 * ==========================================================================*/

/* ---------- 0. 画布与容器 ---------- */
html,body{height:auto!important;min-height:100%;overflow-x:hidden!important;overflow-y:auto!important;max-width:100vw}
body{display:block!important;width:100%}
#game{display:block!important;width:100%;max-width:680px!important;margin:0 auto!important;
  padding:8px 10px 20px!important;height:auto!important;min-height:0!important;box-sizing:border-box}
#auth{width:100%}
.layout-v10{display:block!important;width:100%;max-width:100%;height:auto!important;min-width:0!important;
  padding:0!important;gap:0!important}
.center-col,.side-col{display:block!important;width:100%!important;max-width:100%!important;
  height:auto!important;min-height:0!important;min-width:0!important}
.side-col{margin-top:10px}

/* 全局防重叠：所有元素允许收缩、文字不撑破容器 */
.box,.cpane,.stage-main,.stage-head,.hud,.actions,.skbar,.psub,.ctabs{min-width:0!important;max-width:100%!important;box-sizing:border-box}
.box{height:auto!important;max-height:none!important;overflow:visible!important}

/* ---------- 1. 顶部 HUD ---------- */
.hud{display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  gap:6px 8px!important;padding:8px 10px!important;height:auto!important;min-height:0!important}
.hud .hud-id{display:flex!important;align-items:center!important;gap:8px!important;
  flex:1 1 auto!important;min-width:0!important;max-width:none!important}
.hud .hud-id .who{min-width:0!important}
.hud .hud-id .nm{font-size:14px!important;line-height:1.25!important;white-space:nowrap!important;
  overflow:hidden!important;text-overflow:ellipsis!important}
.hud .hud-id .cl{font-size:10.5px!important;line-height:1.3!important;color:var(--dim);
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.hud .hud-tools{display:flex!important;flex:0 0 auto!important;gap:5px!important;order:2}
.hud .hud-tools .tb-btn{padding:5px 7px!important;font-size:11px!important;line-height:1.2!important}
.hud .hud-bars{flex:1 1 100%!important;order:3;display:flex!important;flex-direction:column!important;
  gap:4px!important;min-width:0!important}
.hud .hud-meta{flex:1 1 100%!important;order:4;display:flex!important;flex-wrap:wrap!important;
  align-items:center!important;gap:4px 10px!important;font-size:10.5px!important;line-height:1.25!important}
.hud .hud-bars .bar{display:flex!important;align-items:center!important;gap:6px!important;
  height:auto!important;min-width:0!important}
.hud .hud-bars .bar .k{flex:0 0 30px!important;width:30px!important;font-size:10px!important;line-height:1.2}
.hud .hud-bars .bar .track{flex:1 1 auto!important;min-width:0!important;height:10px!important}
.hud .hud-bars .bar .fill{height:100%}
.hud .hud-bars .bar .v{flex:0 0 auto!important;width:auto!important;min-width:62px!important;
  text-align:right!important;font-size:10px!important;font-variant-numeric:tabular-nums;line-height:1.2}
.hud .hud-meta .sync-dot{white-space:nowrap!important}
.hud .ava{flex:0 0 auto!important;width:38px!important;height:46px!important}
.hud .ava img{width:34px!important;height:42px!important;object-fit:contain}

/* ---------- 2. 练功区（唯一可横滑的条） ---------- */
.area-strip{padding:8px 10px 9px!important}
.area-strip .box-head{display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:8px!important;padding:0 0 6px!important}
.area-strip .box-head h3{font-size:12.5px!important;white-space:nowrap}
.area-strip .box-head .hint{font-size:10px!important;min-width:0!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.area-strip-list{display:flex!important;flex-wrap:nowrap!important;width:100%!important;max-width:100%!important;
  gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:2px 18px 2px 0!important;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to right,#000 88%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right,#000 88%,rgba(0,0,0,0) 100%)}
.area-strip-list .area{flex:0 0 auto!important;white-space:nowrap!important}

/* ---------- 3. 三页签 ---------- */
.ctabs{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;margin-top:8px!important}
.ctabs .ctab{flex:1 1 0!important;min-width:0!important;padding:8px 4px!important;
  font-size:12px!important;line-height:1.3!important;text-align:center!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* ---------- 4. 战斗面板 ---------- */
#cPaneBattle{display:block!important;height:auto!important;min-height:0!important;margin-top:8px}
.box-stage{padding:8px 10px 10px!important}
.stage-head{display:flex!important;flex-direction:column!important;gap:3px!important;
  padding-bottom:6px!important;align-items:flex-start!important}
.stage-head .stage-head-l{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
.stage-head h3{font-size:12.5px!important;line-height:1.3!important;white-space:normal!important}
.stage-head .hint{font-size:10px!important;line-height:1.3!important}
.stage-head .stage-head-r{font-size:10px!important;line-height:1.45!important;text-align:left!important;
  color:var(--dim);white-space:normal!important}
.stage{display:flex!important;align-items:center!important;justify-content:space-around!important;
  gap:6px!important;height:clamp(120px,24vh,200px)!important;min-height:120px!important;
  max-height:200px!important;padding:6px!important;box-sizing:border-box}
.stage .fighter{flex:1 1 0!important;min-width:0!important;max-width:46%!important}
.stage .vs{flex:0 0 auto!important;font-size:16px!important;opacity:.8}
.stage .fname{font-size:11px!important;line-height:1.3!important;
  white-space:normal!important;word-break:break-word!important;
  overflow:visible!important;text-overflow:clip!important;max-width:100%}
.stage .flv,.stage .v{font-size:10px!important;line-height:1.3!important}

/* ---------- 5. 控制坞：动作条 3 列、技能 3 列 ---------- */
.dock-c{display:block!important;position:static!important;margin-top:8px!important;
  background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important}
.actions{display:flex!important;flex-wrap:wrap!important;gap:6px!important;position:static!important;
  margin:0!important;padding:0!important;border:0!important;background:transparent!important;
  backdrop-filter:none!important;height:auto!important}
.actions .act{flex:1 1 calc(33.333% - 6px)!important;min-width:0!important;height:auto!important;
  min-height:38px!important;padding:8px 4px!important;font-size:11.5px!important;line-height:1.3!important;
  text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

.skbar{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin-top:6px!important;
  overflow:visible!important;height:auto!important}
.skbar .skchip{flex:0 0 calc(33.333% - 4px)!important;min-width:0!important;height:auto!important;
  min-height:50px!important;padding:6px 4px!important;white-space:normal!important;box-sizing:border-box}
.skbar .skchip .sic{height:auto!important;font-size:16px!important;line-height:1.15!important}
.skbar .skchip .sic img{max-width:100%;height:auto}
.skbar .skchip .snm{font-size:10.5px!important;line-height:1.3!important;margin-top:2px!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.skbar .skchip .smp{font-size:9px!important;line-height:1.35!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.skbar .sk-lock-note{flex:1 1 100%!important;width:auto!important;font-size:10px!important;
  line-height:1.45!important;white-space:normal!important;padding:2px 0!important;text-align:center}

/* ---------- 6. 药水行 ---------- */
.psub{display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;
  gap:6px!important;margin-top:8px!important;padding:0!important;overflow:visible!important;height:auto!important}
.psub .psub-k,.psub .psub-gap{display:none!important}
.psub .pbtn{flex:0 0 calc(25% - 5px)!important;min-width:0!important;height:auto!important;
  min-height:42px!important;padding:6px 3px!important;font-size:10.5px!important;line-height:1.35!important;
  white-space:normal!important;overflow:hidden!important;overflow-wrap:anywhere}
.psub .pbtn br{display:block!important}
.psub .pbtn i{display:block!important;margin:2px 0 0!important;font-size:8px!important;
  line-height:1.3!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere}
.psub .swchip{flex:0 0 calc(50% - 3px)!important;min-width:0!important;height:auto!important;
  min-height:34px!important;padding:6px 4px!important;font-size:11px!important;line-height:1.3!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.psub .cd,#potionCdText{flex:1 1 100%!important;font-size:10px!important;line-height:1.3!important;
  text-align:center!important;margin-top:2px}

/* ---------- 7. 右栏四页签：整宽堆叠 ---------- */
.side-nav{display:flex!important;flex-wrap:nowrap!important;gap:6px!important}
.side-nav .snav{flex:1 1 0!important;min-width:0!important;padding:8px 4px!important;
  font-size:12px!important;line-height:1.3!important;text-align:center!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.side-pane-v10{max-height:none!important;height:auto!important;margin-top:8px}
.side-pane-v10 .box{height:auto!important;max-height:none!important}

/* 属性列表：每行「名称 + 当前值 + 三个加点按钮」允许换行，永不重叠 */
.stat-list{display:flex!important;flex-direction:column!important;gap:8px!important}
.stat-list .stat{display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  gap:6px!important;padding:8px 10px!important;height:auto!important;min-height:0!important}
.stat-list .stat > span:first-child{flex:0 0 44px!important;font-size:12px!important;line-height:1.3}
.stat-list .stat .pts{display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  gap:5px!important;flex:1 1 auto!important;min-width:0!important}
.stat-list .stat .val{flex:0 0 auto!important;min-width:32px!important;font-size:12.5px!important;
  text-align:right!important;line-height:1.3}
.stat-list .stat .plus{flex:0 0 auto!important;min-width:30px!important;padding:5px 6px!important;
  font-size:11px!important;line-height:1.2}

.rec-build .rec-line{display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  gap:6px 8px!important;height:auto!important}
.rec-build .rec-title,.rec-build .rec-order{font-size:11px!important;line-height:1.4!important;
  white-space:normal!important}

/* ---------- 8. 战报 / 日志 ---------- */
.logmini{display:block!important;margin-top:8px!important;height:auto!important;min-height:0!important}
.log,.logmini .log{max-height:220px!important;overflow-y:auto!important}

/* ---------- 9. 数值与文案不溢出 ---------- */
.hud *,.box *,.skbar *,.psub *,.actions *,.side-col *{box-sizing:border-box}
.cd,.hint,.v,.k{overflow-wrap:anywhere}