* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
html, body { width:100%; height:100%; overflow:hidden; background:#0a0812; touch-action:none; overscroll-behavior:none; }
body { font-family:"Microsoft YaHei", "PingFang SC", sans-serif; color:#d8d2c4; }

#game { position:fixed; inset:0; width:100vw; height:100vh; image-rendering:pixelated; image-rendering:crisp-edges; background:#000; }
/* 高清文字层:名字/伤害数字不再随像素画布放大而模糊 */
#textcanvas { position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:5; }

.hidden { display:none !important; }
.dim { color:#776f8a; font-size:11px; font-weight:normal; }

/* ============ 通用屏幕 ============ */
.screen { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 30%, #1a1426 0%, #0a0812 70%);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

.title-box { text-align:center; max-width:520px; width:92%; }
.game-title { font-size:56px; font-weight:900; letter-spacing:14px; color:#e8e0c8; text-shadow:0 0 24px #6b4ce6aa, 0 4px 0 #000; margin-bottom:6px; }
.game-sub { font-size:13px; letter-spacing:6px; color:#9a8fc0; margin-bottom:42px; }
.title-tip { margin-top:26px; font-size:12px; line-height:1.9; color:#776f8a; }

/* ============ 按钮 ============ */
.btn { display:inline-block; background:#241e36; color:#d8d2c4; border:2px solid #3d3558; padding:10px 22px; font-size:15px;
  font-family:inherit; cursor:pointer; box-shadow:0 3px 0 #000; border-radius:4px; margin:4px; }
.btn:active { transform:translateY(2px); box-shadow:0 1px 0 #000; }
.btn-big { font-size:18px; padding:13px 36px; }
.btn-gold { background:#4a3a14; border-color:#c9a227; color:#ffe9a8; text-shadow:0 1px 0 #000; }
.btn-red { background:#3d1420; border-color:#8a2438; color:#ff9aa8; }
.icon-btn { background:#241e36cc; border:2px solid #3d3558; color:#d8d2c4; font-size:17px; width:40px; height:40px; border-radius:6px; }

/* ============ 营地 ============ */
#screen-lobby { justify-content:flex-start; }
.lobby-head { width:100%; max-width:680px; display:flex; justify-content:space-between; align-items:center; padding:12px 16px 6px; }
.lobby-title { font-size:20px; font-weight:bold; color:#e8e0c8; }
.gold-chip { background:#2a2310; border:1px solid #c9a227; color:#ffd95e; padding:4px 12px; border-radius:20px; font-size:15px; font-weight:bold; }
.gold-chip.small { font-size:13px; padding:2px 10px; }
.lobby-scroll { width:100%; max-width:680px; flex:1; overflow-y:auto; padding:0 14px; touch-action:pan-y; }
/* 底栏工具条:每个工具按钮=「图标在上+文字在下」的等宽格,撑满排成整齐一行;进入地牢独占一行作主行动。
 * 旧版各按钮自然宽度 + flex-wrap 会参差换行(6+1 错位)且占 3 行,挤掉中间可滑动空间。 */
.lobby-foot { width:100%; max-width:680px; display:flex; flex-wrap:wrap; gap:6px; align-items:stretch;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom)); }
.lobby-foot .tb { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; margin:0; padding:7px 3px; font-size:11px; line-height:1.15; white-space:nowrap; position:relative; }
.lobby-foot .tb .tb-i { font-size:18px; line-height:1; }
.lobby-foot .tb .tb-l { font-size:11px; }
.lobby-foot .tb .badge { top:1px; right:1px; }
.lobby-foot .btn-big { flex:1 1 100%; order:9; font-size:17px; padding:13px; margin:2px 0 0; }
/* 宽屏:整备面板放宽,消除两侧大片留白 */
@media (min-width:900px) {
  .lobby-head, .lobby-scroll, .lobby-foot, .level-line { max-width:min(1080px, 94vw); }
  /* 宽屏:工具按钮定宽居中,进入地牢回到同一行(不必撑满) */
  .lobby-foot { justify-content:center; }
  .lobby-foot .tb { flex:0 1 100px; }
  .lobby-foot .btn-big { flex:0 1 auto; order:0; padding:13px 30px; }
}
/* 竖屏窄幅:工具按钮紧凑换行,进入地牢独占整行(主操作放大易点) */
@media (max-width:560px) {
  /* 顶部展示区:标题+货币第一行,账户控件第二行,避免挤压/溢出截断 */
  .lobby-head { flex-wrap:wrap; gap:5px 6px; padding:10px 12px 6px; }
  .lobby-head .lobby-title { order:1; flex:1 1 auto; font-size:17px; white-space:nowrap; }
  .lobby-head .gem-chip { order:2; }
  .lobby-head .gold-chip { order:3; }
  .lobby-head .gem-chip, .lobby-head .gold-chip { font-size:13px; padding:3px 10px; white-space:nowrap; }
  .lobby-head .lobby-account { order:4; flex:1 1 100%; justify-content:flex-start; flex-wrap:wrap; }
  /* 窄屏底栏:间距收紧(工具按钮的等宽图标格在基础样式里已处理) */
  .lobby-foot { gap:5px; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); }
}
/* 横屏手机(矮屏):工具条 + 进入地牢并到同一行,尽量省垂直高度给中间可滑动区 */
@media (orientation:landscape) and (max-height:560px) {
  .lobby-foot { gap:5px; padding:5px 8px calc(5px + env(safe-area-inset-bottom)); }
  .lobby-foot .tb { padding:4px 3px; }
  .lobby-foot .tb .tb-i { font-size:15px; }
  .lobby-foot .tb .tb-l { font-size:10px; }
  .lobby-foot .btn-big { flex:2 1 0; order:0; font-size:15px; padding:9px; margin:0; }
}

.panel { background:#171225cc; border:2px solid #2e2745; border-radius:6px; padding:10px 12px; margin:8px 0; }
.panel-title { font-size:13px; color:#b9a76a; margin-bottom:8px; font-weight:bold; letter-spacing:2px; }
.stat-summary { color:#8fc7ff; font-size:12px; font-weight:normal; margin-left:8px; }
/* v19 六维属性行 */
.attr-row { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:7px; font-size:12px; }
.attr-row .at { display:inline-flex; align-items:center; gap:2px; white-space:nowrap; }
.attr-row .at b { font-weight:600; }
#modal-char .attr-row { font-size:14px; gap:8px 14px; margin:10px 0; justify-content:center; }
.char-stats { margin-top:10px; font-size:13px; color:#cfd8e8; line-height:1.9; text-align:center; }
.char-stats b { color:#fff; }
.potion-line { margin-top:8px; font-size:13px; color:#ff9aa8; }

/* pan-x pan-y:横滑滚卡片、竖滑穿透给营地列表(只声明 pan-x 会拦掉竖滑导致列表卡顿) */
#class-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; touch-action:pan-x pan-y; }
.class-card { flex:0 0 108px; background:#1d1730; border:2px solid #3d3558; border-radius:6px; padding:8px 6px; text-align:center; cursor:pointer; position:relative; }
.class-card.locked img { filter:grayscale(0.85) brightness(0.55); }
.class-card.locked .cname { color:#8a86a0; }
.class-card .cls-lock { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:rgba(10,8,18,0.45); border-radius:6px; font-size:18px; color:#ffd95e; text-shadow:0 1px 3px #000; }
.class-card .cls-lock span { font-size:11px; color:#ffe9a8; font-weight:bold; }
.class-card .cls-lock .cls-boss { margin-top:5px; font-size:9px; font-weight:bold; line-height:1.35; color:#ff9e7a; text-shadow:0 1px 2px #000; padding:2px 5px; background:rgba(40,12,8,0.7); border:1px solid #7a3a2a; border-radius:8px; max-width:96%; }
.class-card.sel { border-color:#c9a227; background:#2a2310; box-shadow:0 0 12px #c9a22755; }
.class-card img { width:48px; height:52px; image-rendering:pixelated; }
.class-card .cname { font-size:14px; font-weight:bold; color:#e8e0c8; margin:2px 0; }
.class-card .cdesc { font-size:10px; color:#9a8fc0; line-height:1.5; min-height:42px; }
.class-card .cskill { font-size:10px; color:#6db1ff; line-height:1.5; }
/* v25.13 职业阵营 Tab + 难度徽章 */
#class-tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:7px; }
.cls-tab { flex:0 0 auto; padding:4px 9px; background:#1a1428; border:1px solid #3d3558; border-radius:6px;
  font-size:12px; color:#9a8fc0; cursor:pointer; user-select:none; white-space:nowrap; }
.cls-tab.on { background:#2a2310; border-color:#c9a227; color:#ffe9a8; box-shadow:0 0 8px #c9a22744; }
.cls-tab .cls-tab-n { font-size:9px; color:#776f8a; margin-left:3px; }
.cls-tab.on .cls-tab-n { color:#c9a227; }
.class-card .cls-diff { position:absolute; top:2px; right:2px; font-size:8px; font-weight:bold;
  background:rgba(10,8,18,0.62); padding:0 3px; border-radius:3px; pointer-events:none; z-index:2; }
/* v44 本季新增职业角标(左上,避开右上难度徽章) */
.class-card .cls-new { position:absolute; top:2px; left:2px; font-size:8px; font-weight:bold; color:#fff;
  background:linear-gradient(135deg,#ff5e7e,#ff9e3d); padding:1px 4px; border-radius:3px; letter-spacing:0.5px;
  pointer-events:none; z-index:3; box-shadow:0 0 6px rgba(255,94,126,0.7); animation:clsNewPulse 1.6s ease-in-out infinite; }
@keyframes clsNewPulse { 0%,100%{ opacity:1; } 50%{ opacity:0.6; } }
.class-card .cmech { font-size:9px; color:#ffcf6a; font-weight:bold; line-height:1.4; margin:1px 0 2px;
  background:rgba(201,162,39,0.12); border-radius:3px; padding:1px 2px; }

/* ============ 物品格子 ============ */
.slot-grid { display:grid; grid-template-columns:repeat(8, 1fr); gap:6px; }
.slot-row { display:flex; gap:8px; flex-wrap:wrap; }
.slot { aspect-ratio:1; min-width:40px; background:#0f0c1a; border:2px solid #2e2745; border-radius:4px; position:relative;
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.slot-row .slot { width:52px; flex:0 0 52px; }
.slot img { width:75%; height:75%; image-rendering:pixelated; }
.slot .slot-tag { position:absolute; top:1px; left:3px; font-size:9px; color:#776f8a; }
.slot .slot-cnt { position:absolute; bottom:1px; right:3px; font-size:10px; color:#ffd95e; }
.slot.r0 { border-color:#6a6f76; } .slot.r1 { border-color:#b9bdc4; } .slot.r2 { border-color:#4caf50; }
.slot.r3 { border-color:#42a5f5; box-shadow:0 0 6px #42a5f544; }
.slot.r4 { border-color:#ab47bc; box-shadow:0 0 8px #ab47bc55; }
.slot.r5 { border-color:#ffa726; box-shadow:0 0 10px #ffa72666; animation:legBreath 1.9s ease-in-out infinite; }
/* 传说:背包格子里呼吸微光(纯 CSS,只在静态网格,无逐帧 JS 重绘) */
@keyframes legBreath { 0%,100%{ box-shadow:0 0 6px #ffa72655; } 50%{ box-shadow:0 0 14px #ffa726bb, inset 0 0 5px #ffd95e55; } }

/* ============ v55 物品拖拽 ============ */
.slot.dnd-src { cursor:grab; }
.dnd-ghost { position:fixed; left:0; top:0; width:46px; height:46px; transform:translate(-50%,-50%);
  pointer-events:none; z-index:9999; background:#0f0c1a; border:2px solid #ffd95e; border-radius:5px;
  box-shadow:0 6px 16px #000b, 0 0 12px #ffd95e99; opacity:.96; display:flex; align-items:center; justify-content:center; }
.dnd-ghost img { width:76%; height:76%; image-rendering:pixelated; }
body.dnd-active { cursor:grabbing; -webkit-user-select:none; user-select:none; }
body.dnd-active .slot { cursor:grabbing; }
.slot.dnd-ok { border-color:#ffd95e !important; animation:dndPulse 1s ease-in-out infinite; }
.slot.dnd-over { background:#2a2440; border-color:#fff !important; box-shadow:0 0 14px #fff; transform:scale(1.07); }
@keyframes dndPulse { 0%,100%{ box-shadow:0 0 5px #ffd95e77; } 50%{ box-shadow:0 0 13px #ffd95edd; } }
.dnd-zone { margin-bottom:8px; padding:14px 10px; text-align:center; color:#8a82a6; font-size:13px;
  border:2px dashed #3d3558; border-radius:6px; background:#140f24; user-select:none; }
.dnd-zone.dnd-ok { border-color:#ffd95e; color:#ffd95e; animation:dndPulse 1s ease-in-out infinite; }
.dnd-zone.dnd-over { background:#2a2440; border-color:#fff; color:#fff; box-shadow:0 0 14px #fff; }
.dnd-zone.sell-zone { color:#cf8f8f; border-color:#523a3a; background:#1a1014; }
.panel-title .sort-btn, .modal-title .sort-btn { float:right; padding:3px 9px; font-size:12px; }
.modal-bag .panel-title .sort-btn { float:right; }

/* ============ 模态框 ============ */
.modal { position:fixed; inset:0; z-index:80; background:#000000b8; display:flex; align-items:center; justify-content:center; }
/* 物品/技能节点详情是二级弹窗,必须压在其他模态框(背包/商人/技能树)之上 */
#modal-item { z-index:85; }
.modal-box { background:#171225; border:2px solid #3d3558; border-radius:8px; padding:16px; width:92%; max-width:480px; max-height:86vh; overflow-y:auto; touch-action:pan-y; }
.small-box { max-width:340px; text-align:center; }
.modal-title { font-size:17px; font-weight:bold; color:#e8e0c8; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }
.item-name { font-size:17px; font-weight:bold; margin-bottom:6px; }
.item-stats { font-size:13px; color:#9a8fc0; line-height:1.8; margin-bottom:14px; white-space:pre-line; }
#item-actions { display:flex; flex-direction:column; gap:2px; }

/* v9.1 装备对比差值行 */
.cmp-line { margin-top:4px; font-size:11px; line-height:1.6; }
.cmp-up { color:#7ee08a; margin-right:4px; }
.cmp-down { color:#ff7a8a; margin-right:4px; }

.goods-row { display:flex; align-items:center; gap:10px; background:#0f0c1a; border:1px solid #2e2745; border-radius:4px; padding:6px 10px; margin:5px 0; }
.goods-row img { width:30px; height:30px; image-rendering:pixelated; }
.goods-coin { width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:22px; flex:0 0 30px; } /* v44 卖金币挂单图标 */
.goods-info { flex:1; font-size:13px; }
.goods-info .gstat { font-size:11px; color:#9a8fc0; }
.goods-buy { background:#2a2310; border:1px solid #c9a227; color:#ffd95e; padding:5px 12px; border-radius:4px; font-size:13px; font-family:inherit; }
.goods-buy:disabled { opacity:.4; }

/* ============ 结算 ============ */
.results-title { font-size:40px; font-weight:900; letter-spacing:8px; margin-bottom:8px; }
.results-title.win { color:#7ee08a; text-shadow:0 0 20px #2e8a3a; }
.results-title.dead { color:#e05a6a; text-shadow:0 0 20px #8a2438; }
.results-sub { font-size:13px; color:#9a8fc0; margin-bottom:18px; }
.results-list { max-height:34vh; overflow-y:auto; touch-action:pan-y; margin-bottom:12px; font-size:14px; line-height:2; }
.results-gold { font-size:18px; color:#ffd95e; margin-bottom:18px; }

/* ============ HUD ============ */
#hud { position:fixed; inset:0; z-index:60; pointer-events:none;
  padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 8px) 8px calc(env(safe-area-inset-left) + 8px); }
#hud button { pointer-events:auto; }
#hud-top-left { position:absolute; top:calc(env(safe-area-inset-top) + 8px); left:calc(env(safe-area-inset-left) + 10px); }
.hp-wrap { width:170px; height:20px; background:#1a0c10; border:2px solid #000; border-radius:3px; position:relative; box-shadow:0 0 0 1px #3d3558; }
#hp-fill { height:100%; width:100%; background:linear-gradient(#c43b4e, #8a2438); transition:width .15s; }
#hp-text { position:absolute; inset:0; text-align:center; font-size:11px; line-height:17px; color:#fff; text-shadow:0 1px 2px #000; }
#buff-row { margin-top:4px; font-size:11px; color:#ffd95e; text-shadow:0 1px 2px #000; }
#swarm-text { position:absolute; top:calc(env(safe-area-inset-top) + 10px); left:50%; transform:translateX(-50%);
  font-size:12px; color:#ff7a8a; text-shadow:0 1px 3px #000; background:#00000066; padding:3px 12px; border-radius:12px; white-space:nowrap; }
#hud-top-right { position:absolute; top:calc(env(safe-area-inset-top) + 8px); right:calc(env(safe-area-inset-right) + 10px); text-align:right; }
.hud-row { display:flex; gap:6px; align-items:center; justify-content:flex-end; margin-bottom:6px; }
#minimap { background:#0a0812cc; border:2px solid #2e2745; border-radius:4px; image-rendering:pixelated; width:114px; height:114px;
  pointer-events:auto; cursor:pointer; }
#minimap:active { border-color:#c9a227; }

/* 全屏大地图 */
.bigmap-box { text-align:center; }
#bigmap { width:min(86vw, 68vh); height:min(86vw, 68vh); image-rendering:pixelated; background:#0a0812;
  border:3px solid #3d3558; border-radius:8px; }
.bigmap-tip { font-size:12px; color:#776f8a; margin-top:10px; line-height:1.8; }

#bossbar { position:absolute; top:calc(env(safe-area-inset-top) + 44px); left:50%; transform:translateX(-50%); width:min(420px, 70vw); text-align:center; }
#bossbar-name { font-size:12px; color:#ffb3b3; text-shadow:0 1px 2px #000; margin-bottom:2px; }
.boss-hp-wrap { height:10px; background:#1a0c10; border:1px solid #000; border-radius:2px; }
#bossbar-fill { height:100%; width:100%; background:#a32638; }

#channel-wrap { position:absolute; bottom:34vh; left:50%; transform:translateX(-50%); width:200px; text-align:center; }
#channel-label { font-size:13px; color:#9fd7ff; text-shadow:0 1px 3px #000; margin-bottom:4px; }
.channel-bar { height:10px; background:#0f0c1a; border:1px solid #3d3558; border-radius:5px; overflow:hidden; }
#channel-fill { height:100%; width:0%; background:linear-gradient(90deg,#2e7fd4,#9fd7ff); }

/* ============ 触屏控制 ============ */
#touch-root { position:fixed; inset:0; z-index:55; }
#joy-zone { position:absolute; left:0; top:0; bottom:0; width:46%; }
#joy-base { position:absolute; width:104px; height:104px; border-radius:50%; background:#ffffff10; border:2px solid #ffffff2e;
  transform:translate(-50%,-50%); pointer-events:none; }
#joy-base.joy-idle { opacity:.4; } /* 待机时半透明提示位置 */
#joy-knob { position:absolute; width:46px; height:46px; border-radius:50%; background:#d8d2c455; border:2px solid #d8d2c488;
  left:50%; top:50%; transform:translate(-50%,-50%); }
#action-cluster { position:absolute; right:calc(env(safe-area-inset-right) + 14px); bottom:calc(env(safe-area-inset-bottom) + 16px);
  width:190px; height:190px; }
.act-btn { position:absolute; border-radius:50%; background:#241e36b8; border:2px solid #5a5270; color:#d8d2c4;
  font-family:inherit; display:flex; align-items:center; justify-content:center; overflow:hidden;
  touch-action:none; } /* v49 长按拖动瞄准:禁止浏览器把拖动当成滚动/缩放手势 */
.act-btn:active { background:#3d3558d8; }
.act-label { font-size:20px; pointer-events:none; z-index:2; text-shadow:0 1px 2px #000; }
.attack-btn { width:84px; height:84px; right:0; bottom:0; border-color:#c9a227; background:#4a3a14b8; }
.attack-btn .act-label { font-size:30px; }
/* 技1/技2/技3 绕攻击键(右下角)排成扇形弧:技1低→技2中→技3最上;药水移右上空位避让 */
#btn-skill1 { width:56px; height:56px; right:104px; bottom:16px; }
#btn-skill2 { width:56px; height:56px; right:88px; bottom:74px; }
#btn-skill3 { width:56px; height:56px; right:32px; bottom:114px; } /* 扇形最上端 */
#btn-potion { width:46px; height:46px; right:120px; bottom:138px; border-color:#a3526a; } /* 扇形右上空位,避让技3 */
#btn-potion .act-label { font-size:16px; }
#potion-count { position:absolute; bottom:2px; right:6px; font-size:11px; color:#ffd95e; z-index:2; }
/* 技能名换行自适应:中文短名单行,英文/外语长名按词换行不溢出(原 white-space:pre 致长名横向溢出裁切) */
.skill-btn .act-label { font-size:11px; line-height:1.1; white-space:normal; overflow-wrap:break-word; word-break:break-word; text-align:center; max-width:52px; }
/* v57 消耗品快捷栏:右下扇形上方一排可装配槽(点按=用/空格装配,长按=换);容器不挡摇杆,仅按钮可点 */
#quick-consum { position:absolute; right:6px; bottom:248px; display:flex; gap:6px; pointer-events:none; } /* 竖屏:抬到居中交互键(竖屏 bottom+216)之上错开;横屏/PC 各自媒体查询覆盖 */
.qc-btn { position:relative; width:42px; height:42px; border-color:#5a7a6a; background:#1c2620b8; pointer-events:auto; }
.qc-btn .qc-ico { font-size:19px; pointer-events:none; z-index:2; text-shadow:0 1px 2px #000; }
.qc-btn .qc-cnt { position:absolute; bottom:1px; right:4px; font-size:11px; font-weight:bold; color:#9fe0b0; z-index:3; text-shadow:0 1px 2px #000; pointer-events:none; }
.qc-btn.qc-empty { border-style:dashed; border-color:#4a5560; opacity:.72; }
.qc-btn.qc-empty .qc-ico { color:#8a93a0; font-size:22px; }
.qc-btn.qc-out { opacity:.45; }
.qc-btn.qc-out .qc-cnt { color:#d08a8a; }
/* 横屏(触屏):矮屏右上角小地图+扇形把右侧占满,竖排一排会顶到小地图→改为「扇形左侧竖排一列」:
   用竖向空间(各宽度都够)、避开小地图/居中交互键/左半摇杆区,右手拇指可达。pc-mode 规则特异性更高不受影响 */
/* 限定 body:not(.pc-mode):桌面也是 landscape,这里只针对触屏横屏,绝不泄漏进 PC 动作条(否则 flex-direction:column 会把 PC 横排变竖排) */
@media (orientation: landscape) {
  body:not(.pc-mode) #quick-consum { right:238px; bottom:16px; flex-direction:column; gap:9px; }
  body:not(.pc-mode) .qc-btn { width:36px; height:36px; } /* 横屏矮屏:缩小避开「居中交互键 ↔ 扇形乘骑技」之间的窄带,留足余量 */
  body:not(.pc-mode) .qc-btn .qc-ico { font-size:16px; }
}
.cd-mask { position:absolute; inset:0; background:#000000a8; transform-origin:bottom; transform:scaleY(0); pointer-events:none; }
.cd-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; z-index:3; pointer-events:none; }
/* v13.2 拾取键改底部居中悬浮:原 right:24/bottom:226 在横屏矮屏(≈375高)会顶进小地图被遮挡 */
#btn-interact { position:absolute; left:50%; right:auto; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom) + 112px);
  min-width:120px; padding:11px 18px; border-radius:24px; background:#10324ad8; border:2px solid #6db1ff; color:#cfe8ff;
  font-size:15px; font-family:inherit; box-shadow:0 0 14px #2e7fd466; z-index:30; }
/* 竖屏窄幅:底部被摇杆+技能簇占满,拾取键抬到操作区上方 */
@media (orientation: portrait) {
  #btn-interact { bottom:calc(env(safe-area-inset-bottom) + 216px); }
}
#btn-interact:active { background:#1a4a6ad8; }

/* ============ v9.2 双端操作适配 ============ */
/* PC 按键角标:触屏隐藏,键盘设备显示在按钮右上角 */
.kb { display:none; }
/* 键位角标画在按钮内部右下角(按钮 overflow:hidden,外挂定位会被裁掉) */
body.pc-mode .kb { display:flex; position:absolute; bottom:2px; right:2px; min-width:15px; height:15px; padding:0 3px;
  align-items:center; justify-content:center; background:#0f0c1add; border:1px solid #6b6347; border-radius:3px;
  font-size:10px; font-weight:bold; color:#ffd95e; z-index:4; pointer-events:none; }
body.pc-mode .kb-inline { position:static; display:inline-flex; margin-left:7px; vertical-align:middle; }
/* 操作说明弹窗 */
.ctrl-row { display:flex; gap:12px; align-items:baseline; padding:5px 0; border-bottom:1px solid #241e36; font-size:13px; text-align:left; }
.ctrl-row b { flex:0 0 124px; color:#ffd95e; text-align:right; font-size:12px; }
.ctrl-row span { color:#b9bdc4; }

/* ============ v9.3 PC 动作条(LoL 式) ============ */
/* 摇杆与圆形触屏布局仅触屏保留;PC 收纳为底部居中方形技能格 */
body.pc-mode #joy-zone, body.pc-mode #joy-base { display:none !important; }
body.pc-mode #action-cluster { right:auto; left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 12px); width:auto; height:auto;
  display:flex; gap:9px; align-items:flex-end; }
body.pc-mode .act-btn { position:relative; width:56px; height:56px; border-radius:9px;
  background:#131022b8; border:2px solid #3d3558; cursor:pointer; transition:border-color .12s; }
/* 压过 #btn-xxx/.mode-btn 规则的方位偏移(relative 下仍会生效) */
body.pc-mode #btn-attack, body.pc-mode #btn-skill1, body.pc-mode #btn-skill2, body.pc-mode #btn-skill3, body.pc-mode #btn-potion,
body.pc-mode #btn-mode {
  right:auto; bottom:auto; left:auto; top:auto; }
body.pc-mode .act-btn:hover { border-color:#c9a227; }
body.pc-mode .attack-btn { order:-1; border-color:#8a6e2e; background:#241c0cb8; }
body.pc-mode .attack-btn .act-label { font-size:26px; }
body.pc-mode #btn-potion { border-color:#7e4154; }
body.pc-mode #btn-potion .act-label { font-size:20px; }
body.pc-mode .act-btn .act-label { margin-bottom:8px; } /* 底部留给键位角标,文字不压字 */
body.pc-mode .skill-btn .act-label { font-size:9px; line-height:1.1; max-width:52px; }
body.pc-mode #potion-count { bottom:auto; top:2px; right:4px; }       /* 药水数量挪到右上,避让键位标 */
/* v57 消耗品快捷栏:PC 收进底部动作条(置于药水之后),内联三格 */
body.pc-mode #quick-consum { position:relative; right:auto; bottom:auto; display:flex; gap:9px; align-items:flex-end; pointer-events:auto; }
body.pc-mode .qc-btn { width:46px; height:46px; border-radius:9px; }
body.pc-mode .qc-btn .qc-cnt { top:2px; bottom:auto; right:4px; }
/* 交互提示与快捷短语:跟随动作条居中布局 */
body.pc-mode #btn-interact { left:auto; right:50%; transform:translateX(50%); bottom:calc(env(safe-area-inset-bottom) + 88px); }
/* v57 动作条加3消耗品快捷格后整条变宽(右沿 center+262,骑乘含 skill4 更到 +295),原贴着老 bar 右沿排的
   次级开关(💬说话+194 / ☯架势+244 / 🐴坐骑+290)会被压进 bar →统一收成「动作条右端上方一列竖排」
   (同 x:center+214,竖向 74/126/178),无论 bar 怎么变宽都压不到,~530px 窄窗也不出屏;横向避开拾取键(居中) */
body.pc-mode #btn-say { left:auto; right:auto; left:calc(50% + 214px); bottom:calc(env(safe-area-inset-bottom) + 74px);
  width:42px; height:42px; }
/* 快捷短语面板:从竖排左侧展开,不盖住开关列 */
body.pc-mode #phrase-panel { left:auto; right:calc(50% - 202px); bottom:calc(env(safe-area-inset-bottom) + 74px); }
/* v11 蓄力充能条(金色自下而上)与攻击形态按钮 */
.chg-mask { position:absolute; left:0; right:0; bottom:0; top:0; background:linear-gradient(0deg,#ffd95ecc,#ffd95e44);
  transform-origin:bottom; transform:scaleY(0); pointer-events:none; mix-blend-mode:screen; }
.mode-btn { width:40px; height:40px; right:150px; bottom:72px; border-color:#7e6a3e; } /* 触屏:技1左上空位,不与任何槽相交 */
.mode-btn .act-label { font-size:11px; }
body.pc-mode .mode-btn { width:44px; height:44px; }
/* v46 乘骑技按钮:扇形左上空位(right166/bottom120,经核与各槽零相交),仅骑乘时显示 */
#btn-skill4 { width:56px; height:56px; right:166px; bottom:120px; border-color:#caa86a; }
#btn-skill4 .act-label { color:#f0dcb0; }
/* v46 上/下骑切换按钮(左侧,架势键上方) */
#btn-mount { position:absolute; left:calc(env(safe-area-inset-left) + 14px); bottom:calc(env(safe-area-inset-bottom) + 258px); pointer-events:auto;
  width:auto; min-width:40px; height:38px; padding:0 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
#btn-mount.mounted { border-color:#c9a227; background:#4a3a14cc; }
#btn-mount .mount-cur { font-size:13px; font-weight:bold; white-space:nowrap; }
body.pc-mode #btn-mount { left:calc(50% + 214px); bottom:calc(env(safe-area-inset-bottom) + 126px); } /* v57 收进右端上方竖排(说话键之上) */
/* v46 坐骑血条(顶部居中,骑乘时显示) */
#mount-hp { position:absolute; left:50%; transform:translateX(-50%); top:calc(env(safe-area-inset-top) + 48px);
  width:148px; height:13px; background:#1a1626cc; border:1px solid #5a4a2e; border-radius:7px; overflow:hidden; pointer-events:none; z-index:6; }
#mount-hp .mh-fill { position:absolute; inset:0; width:100%; background:linear-gradient(90deg,#c98a3a,#e0b070); transition:width .12s linear; }
#mount-hp .mh-txt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff; text-shadow:0 1px 1px #000; }

/* 技能冷却剩余秒数(>1s 时显示,双端通用) */
.cd-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:bold; color:#fff; text-shadow:0 1px 3px #000; z-index:3; pointer-events:none; }

/* ============ 反馈 ============ */
#vignette { position:fixed; inset:0; z-index:70; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, transparent 55%, #a3263888 100%); transition:opacity .25s; }
#toast { position:fixed; top:18vh; left:50%; transform:translateX(-50%); z-index:90; pointer-events:none;
  background:#171225e8; border:1px solid #5a5270; color:#e8e0c8; padding:8px 20px; border-radius:20px; font-size:14px;
  opacity:0; transition:opacity .3s; white-space:nowrap; max-width:88vw; }

/* ============ 登录 ============ */
.login-box { margin-bottom:14px; }
.login-box input { display:block; width:240px; margin:6px auto; padding:10px 14px; background:#0f0c1a; border:2px solid #3d3558;
  color:#e8e0c8; border-radius:4px; font-size:15px; font-family:inherit; }
.login-box input:focus { outline:none; border-color:#c9a227; }
.login-msg { font-size:12px; color:#ff9aa8; min-height:18px; }
.lobby-account { font-size:12px; color:#9a8fc0; display:flex; align-items:center; gap:6px; }
.mini-btn { background:#241e36; border:1px solid #3d3558; color:#9a8fc0; font-size:11px; padding:2px 8px; border-radius:3px; font-family:inherit; }

/* ============ 等级条 ============ */
.level-line { width:100%; max-width:680px; display:flex; align-items:center; gap:8px; padding:0 16px 4px; }
.level-tag { color:#ffd95e; font-weight:bold; font-size:14px; white-space:nowrap; }
.xp-wrap { flex:1; height:12px; background:#0f0c1a; border:1px solid #3d3558; border-radius:6px; position:relative; overflow:hidden; }
#xp-fill { height:100%; width:0%; background:linear-gradient(90deg,#6b4ce6,#9fd7ff); transition:width .3s; }
#xp-text { position:absolute; inset:0; text-align:center; font-size:9px; line-height:12px; color:#d8d2c4; text-shadow:0 1px 2px #000; }

/* ============ 技能搭配 ============ */
#loadout-row { display:flex; flex-direction:column; gap:5px; }
.skill-chip { background:#1d1730; border:2px solid #3d3558; border-radius:5px; padding:6px 10px; cursor:pointer; font-size:12px; }
.skill-chip b { color:#d8d2c4; margin-right:8px; }
.skill-chip span { color:#776f8a; font-size:11px; }
.skill-chip.on { border-color:#c9a227; background:#2a2310; }
.skill-chip.on b { color:#ffe9a8; }
.skill-chip.tree-chip { border-style:dashed; }
.skill-chip.tree-chip.glow { border-color:#7ee08a; animation:treeGlow 1.6s ease-in-out infinite; }
.skill-chip.tree-chip.glow b { color:#7ee08a; }
@keyframes treeGlow { 0%,100% { box-shadow:0 0 2px #7ee08a33; } 50% { box-shadow:0 0 12px #7ee08a77; } }
.pts-tag { color:#7ee08a; font-size:11px; font-weight:bold; animation:treeGlow 1.6s ease-in-out infinite; border:1px solid #7ee08a66; border-radius:8px; padding:1px 7px; }

/* ============ 技能树(v8) ============ */
#tree-equip-row { display:flex; gap:8px; margin-bottom:10px; }
.tree-equip-slot { flex:1; background:#0f0c1a; border:1px solid #3d3558; border-radius:5px; padding:5px 9px; font-size:12px;
  display:flex; align-items:center; gap:7px; }
.tree-equip-slot b { color:#ffe9a8; }
#tree-tools { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin:2px 0 8px; }
#tree-grid { display:flex; flex-direction:column; gap:0; position:relative; }
#tree-links { position:absolute; left:0; top:0; pointer-events:none; }
/* v18 双脉络:固定 5 列网格(col0-2 主动 / col3-4 被动),节点按 gridColumn 对齐成两条竖向脉络 */
.tree-row { display:grid; grid-template-columns:repeat(5, 1fr); gap:5px; position:relative; padding-top:16px; }
.tree-row:first-child { padding-top:0; }
#tree-grid::after { content:''; position:absolute; top:18px; bottom:0; left:60%; width:0; border-left:2px dashed #3d3558; opacity:.45; pointer-events:none; z-index:0; }
.tree-branch-head { display:grid; grid-template-columns:3fr 2fr; gap:5px; margin-bottom:2px; font-size:11px; font-weight:bold; position:relative; z-index:1; }
.tree-branch-head .tbh-act { color:#ffd95e; }
.tree-branch-head .tbh-pas { color:#7ee08a; text-align:right; }
.tree-node { position:relative; z-index:1; min-width:0; background:#1d1730; border:2px solid #3d3558; border-radius:6px; padding:7px 3px 6px; text-align:center;
  cursor:pointer; transition:transform .08s; }
.tree-node:active { transform:scale(.96); }
/* 连接线由 #tree-links SVG 按真实父子位置绘制(v12 每层节点数>3,CSS 竖线会指空) */
.tree-node .tn-icon { font-size:19px; line-height:1.2; filter:grayscale(1) brightness(.6); }
.tree-node .tn-name { font-size:10px; color:#776f8a; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tree-node .tn-sub { font-size:9px; color:#5a5270; margin-top:1px; }
.tree-node.on { border-color:#c9a227; background:#2a2310; }
.tree-node.on .tn-icon { filter:none; }
.tree-node.on .tn-name { color:#ffe9a8; }
.tree-node.on .tn-sub { color:#c9a227; }
.tree-node.avail { border-color:#4f8a58; }
.tree-node.avail .tn-icon { filter:grayscale(.3); }
.tree-node.avail .tn-name { color:#b8d8bc; }
.tree-node.avail .tn-sub { color:#7ee08a; }
.tree-node.avail { animation:treeGlow 1.8s ease-in-out infinite; }
.tree-node.locked { opacity:.62; }
.tree-node.passive { border-radius:14px; }
.sk-ico { display:block; font-size:14px; line-height:1; }

/* ============ 地图选择 ============ */
#map-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; touch-action:pan-x pan-y; }
/* v13.1 死亡保险横条(独立于地图选择,整行可点) */
.insure-bar { display:flex; align-items:center; gap:8px; margin-top:6px; padding:7px 10px; background:#161d2a; border:2px solid #2c3a50;
  border-radius:6px; cursor:pointer; font-size:11px; color:#9aa6b8; }
.insure-bar b { color:#cfe2f0; font-size:12px; }
.insure-bar .ins-ico { font-size:16px; }
.insure-bar .ins-txt { flex:1; line-height:1.4; }
.insure-bar .ins-state { font-size:14px; }
.insure-bar.on { border-color:#7ec8e8; background:#12222e; box-shadow:0 0 8px #7ec8e833; }
/* v13.1 触屏整备紧凑化:地图卡略窄,职业卡描述行收紧 */
body.touch-mode .map-card { flex:0 0 150px; padding:6px; }
body.touch-mode .map-info span { font-size:9px; }
body.touch-mode .class-card .cdesc { min-height:32px; font-size:9px; }
.map-card { flex:0 0 168px; display:flex; align-items:center; gap:8px; background:#1d1730; border:2px solid #3d3558;
  border-radius:6px; padding:8px; cursor:pointer; }
.map-card.sel { border-color:#c9a227; background:#2a2310; box-shadow:0 0 10px #c9a22744; }
.map-card.locked { opacity:.45; cursor:default; }
.map-swatch { width:36px; height:36px; flex:0 0 36px; border:2px solid; border-radius:5px;
  display:flex; align-items:center; justify-content:center; font-size:17px; }
.map-info b { display:block; font-size:13px; color:#e8e0c8; }
.map-info span { font-size:10px; color:#776f8a; line-height:1.4; display:block; }
/* v48 每周地图轮换:本周开放提示条 + 未开放角标 */
.map-rot-label { font-size:11px; color:#9a8cc0; margin:0 0 6px; letter-spacing:.3px; }
.map-rot-label b { color:#c9a227; font-weight:600; }
.map-closed { display:inline; font-size:9px; color:#c98a8a; font-weight:600; margin-left:4px; }

/* ============ v25 场次分级选择 ============ */
#tier-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; touch-action:pan-x pan-y; flex-wrap:wrap; }
.tier-card { flex:1 1 150px; min-width:148px; background:#1a1626; border:2px solid #3d3558; border-radius:6px;
  padding:9px 10px; cursor:pointer; }
.tier-card.sel { border-color:#c9a227; background:#2a2310; box-shadow:0 0 10px #c9a22744; }
.tier-card.locked { opacity:.6; }
.tier-head { display:flex; align-items:center; gap:6px; }
.tier-head b { font-size:13px; color:#e8e0c8; }
.tier-ico { font-size:16px; }
.tier-desc { font-size:10px; color:#8a82a0; line-height:1.4; margin:3px 0; }
.tier-stat { font-size:10px; color:#9fb0c8; line-height:1.5; }
.tier-req { font-size:10px; color:#c9a227; margin-top:4px; line-height:1.4; }
.tier-req.bad { color:#e06a6a; }
.tier-keybar { flex:1 1 100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:4px; padding:7px 10px; background:#1d1326; border:2px solid #4a2c50; border-radius:6px; font-size:12px; color:#d8b8e0; }
.btn-sm { padding:5px 10px; font-size:12px; }
body.touch-mode .tier-card { flex:0 0 150px; }

/* ============ 组队 ============ */
.party-input { width:90px; padding:9px 12px; background:#0f0c1a; border:2px solid #3d3558; color:#e8e0c8;
  border-radius:4px; font-size:15px; font-family:inherit; text-transform:uppercase; }
.party-code-line { font-size:13px; color:#9a8fc0; margin-bottom:8px; }
.party-code-line b { color:#ffd95e; font-size:18px; letter-spacing:4px; margin:0 4px; }
.party-member { display:flex; align-items:center; gap:10px; background:#0f0c1a; border:1px solid #2e2745;
  border-radius:4px; padding:5px 10px; margin:4px 0; }
.party-member img { width:26px; height:28px; image-rendering:pixelated; }
.pm-info { flex:1; font-size:13px; }
.pm-info b { display:block; color:#e8e0c8; }
.pm-info span { font-size:11px; color:#776f8a; }
.pm-state { font-size:12px; color:#9a8fc0; }
/* v20.7 组队战利品分配 */
.party-loot { margin:6px 0; padding:6px 10px; background:#0f0c1a; border:1px solid #2e2745; border-radius:4px; font-size:12px; }
.party-loot .pl-cur { color:#d8d2c4; }
.party-loot .pl-cur b { color:#ffd95e; }
.party-loot .pl-vote { color:#9fd7ff; margin-top:4px; }
.party-loot .pl-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:5px; }
.party-loot .pl-row .btn { padding:3px 10px; font-size:12px; }
.loot-popup { position:fixed; left:50%; bottom:120px; transform:translateX(-50%); z-index:60;
  background:#1a1530ee; border:2px solid #c9a227; border-radius:10px; padding:12px 16px; text-align:center;
  box-shadow:0 4px 20px #000a; min-width:220px; }
.loot-popup .lp-title { font-size:13px; color:#b9a76a; letter-spacing:1px; }
.loot-popup .lp-item { font-size:16px; font-weight:bold; margin:6px 0 10px; }
.loot-popup .lp-btns { display:flex; gap:8px; justify-content:center; align-items:center; }
.loot-popup .lp-bid { width:70px; padding:5px; background:#0f0c1a; border:1px solid #5a5270; color:#fff; border-radius:5px; }

/* ============ 队友血条 ============ */
#hud-party { margin-top:6px; }
#hud-party .mate { margin-bottom:4px; }
#hud-party .mate span { font-size:10px; color:#8fe3a0; text-shadow:0 1px 2px #000; }
#hud-party .mate-bar { width:110px; height:6px; background:#1a0c10; border:1px solid #000; border-radius:2px; overflow:hidden; }
#hud-party .mate-bar i { display:block; height:100%; background:#4caf50; }

.results-xp { font-size:14px; color:#9fd7ff; margin-bottom:18px; }

/* ============ 悬赏板 ============ */
.quest-row { display:flex; align-items:center; gap:10px; background:#0f0c1a; border:1px solid #2e2745;
  border-radius:5px; padding:7px 10px; margin:5px 0; }
.quest-row.qdone { border-color:#c9a227; background:#1d1812; }
.q-info { flex:1; }
.q-info b { font-size:13px; color:#e8e0c8; display:block; margin-bottom:4px; }
.q-info span { font-size:11px; color:#776f8a; }
.q-bar { height:6px; background:#171225; border-radius:3px; overflow:hidden; margin-bottom:3px; }
.q-bar i { display:block; height:100%; background:linear-gradient(90deg,#6b4ce6,#9fd7ff); }
.qdone .q-bar i { background:linear-gradient(90deg,#c9a227,#ffe9a8); }

/* ============ 成就与图鉴 ============ */
.ach-row { display:flex; align-items:center; gap:10px; background:#0f0c1a; border:1px solid #2e2745;
  border-radius:4px; padding:6px 10px; margin:4px 0; opacity:.55; }
.ach-row.got { opacity:1; border-color:#c9a227; background:#1d1812; }
.ach-ico { font-size:16px; }
.ach-info { flex:1; }
.ach-info b { display:block; font-size:13px; color:#e8e0c8; }
.ach-info span { font-size:11px; color:#776f8a; }
.ach-prog { font-size:11px; color:#9fd7ff; }
.ach-gold { font-size:12px; color:#ffd95e; }
#codex-grid { display:flex; flex-wrap:wrap; gap:6px; }
.codex-chip { font-size:12px; padding:4px 10px; border-radius:12px; background:#0f0c1a; border:1px solid #2e2745; color:#554d6b; }
.codex-chip.got { color:#e8e0c8; border-color:#4caf50; }
.codex-chip.got.uniq { color:#ffd95e; border-color:#ffa726; }

/* ============ 排行榜 ============ */
.lb-row { display:flex; align-items:center; gap:10px; background:#0f0c1a; border:1px solid #2e2745;
  border-radius:4px; padding:7px 12px; margin:4px 0; font-size:14px; }
.lb-row.me { border-color:#c9a227; }
.lb-rank { width:34px; text-align:center; font-weight:bold; color:#ffd95e; }
.lb-name { flex:1; color:#e8e0c8; }
.lb-name i { font-style:normal; font-size:11px; color:#9a8fc0; }
.lb-val { color:#ffd95e; font-weight:bold; }
.lb-sub { font-size:11px; color:#776f8a; }

/* ============ 风华商店(M2) ============ */
.gem-chip { background:#101a2e; border:1px solid #4a8ad4; color:#9fd7ff; padding:4px 12px; border-radius:20px; font-size:15px; font-weight:bold; }
.gem-chip.small { font-size:13px; padding:2px 10px; }
.shop-tabs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
.shop-tab { background:#1d1730; border:2px solid #3d3558; color:#9a8fc0; padding:6px 12px; border-radius:5px; font-size:12px; font-family:inherit; cursor:pointer; }
.shop-tab.on { border-color:#c9a227; background:#2a2310; color:#ffe9a8; }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; }
.shop-card { background:#0f0c1a; border:2px solid #2e2745; border-radius:6px; padding:8px 6px; text-align:center; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; }
.shop-card img { width:40px; height:44px; image-rendering:pixelated; }
.shop-card b { font-size:12px; }
.shop-card.sel { box-shadow:0 0 10px #c9a22766; border-color:#c9a227 !important; }
.shop-card.r2 { border-color:#4caf50; } .shop-card.r3 { border-color:#42a5f5; } .shop-card.r4 { border-color:#ab47bc; }
.shop-tag { font-size:10px; color:#9a8fc0; }
.shop-tag.on { color:#7ee08a; }
.shop-card.topup { cursor:default; }
.shop-card.topup .gem-big { font-size:26px; }
.shop-card.topup .bonus { font-style:normal; font-size:10px; color:#7ee08a; }
.shop-card .btn { padding:5px 14px; font-size:13px; margin:2px 0 0; }
.shop-preview { display:flex; gap:12px; align-items:flex-start; background:#0f0c1a; border:1px solid #3d3558; border-radius:6px; padding:10px; margin-bottom:10px; }
.pv-big { width:72px; height:78px; image-rendering:pixelated; flex:0 0 72px; }
.pv-swatch { display:flex; gap:8px; flex:0 0 72px; padding-top:10px; justify-content:center; }
.pv-swatch i { width:24px; height:24px; border-radius:4px; }
.pv-info { flex:1; display:flex; flex-direction:column; gap:4px; font-size:12px; }
.pv-info b { font-size:15px; }
.pv-info span { color:#9a8fc0; font-size:11px; line-height:1.5; }
.pv-info .btn { align-self:flex-start; padding:6px 16px; font-size:13px; margin:4px 0 0; }
.pv-row { display:flex; gap:4px; }
.pv-row img { width:26px; height:28px; image-rendering:pixelated; }
.btn:disabled { opacity:.45; cursor:default; }
.btn-sm2 { padding:5px 12px; font-size:12px; margin:0; }
.title-row { display:flex; align-items:center; gap:10px; background:#0f0c1a; border:1px solid #2e2745; border-radius:4px; padding:7px 10px; margin:4px 0; }
.title-row .t-name { font-size:14px; font-weight:bold; }
.title-row .t-src { flex:1; }
.perk-card { display:flex; align-items:center; gap:10px; background:#0f0c1a; border:1px solid #2e2745; border-radius:6px; padding:10px 12px; margin:6px 0; }
.perk-card b { display:block; font-size:14px; color:#e8e0c8; }
.perk-card span { display:block; flex:1; font-size:11px; color:#9a8fc0; margin-top:2px; }
.perk-card > b { flex:0 0 auto; }
.perk-card .btn { margin-left:auto; flex:0 0 auto; }
.wfx-swatch { display:flex; gap:5px; height:30px; align-items:center; }
.wfx-swatch i { width:18px; height:18px; border-radius:3px; }

/* ============ 赛季通行证 ============ */
.pass-line { display:flex; align-items:center; gap:8px; }
.pass-line .btn { padding:5px 14px; font-size:12px; margin:0; flex:0 0 auto; }
#pass-fill { height:100%; width:0%; background:linear-gradient(90deg,#8a5ce6,#c792ff); transition:width .3s; }
#pass-xp-text { position:absolute; inset:0; text-align:center; font-size:9px; line-height:12px; color:#d8d2c4; text-shadow:0 1px 2px #000; }
.pass-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pass-head .xp-wrap { min-width:80px; }
#pass-fill2 { height:100%; background:linear-gradient(90deg,#8a5ce6,#c792ff); }
.pass-head .xp-wrap span { position:absolute; inset:0; text-align:center; font-size:9px; line-height:12px; color:#d8d2c4; text-shadow:0 1px 2px #000; }
.pass-head .btn { padding:6px 14px; font-size:12px; margin:0; flex:0 0 auto; }
.pass-badge { color:#ffd95e; font-size:12px; font-weight:bold; white-space:nowrap; }
.pass-track { display:flex; gap:6px; overflow-x:auto; padding:4px 2px 8px; touch-action:pan-x pan-y; }
.pass-col { flex:0 0 84px; display:flex; flex-direction:column; gap:5px; opacity:.55; }
.pass-col.reached { opacity:1; }
.pass-col.cur .pass-lvn { color:#ffe9a8; background:#4a3a14; border-color:#c9a227; }
.pass-lvn { text-align:center; font-size:11px; font-weight:bold; color:#9a8fc0; background:#1d1730; border:1px solid #3d3558; border-radius:4px; padding:2px 0; }
.pass-cell { position:relative; min-height:54px; background:#0f0c1a; border:1px solid #2e2745; border-radius:5px; padding:5px 4px;
  font-size:11px; line-height:1.5; text-align:center; color:#d8d2c4; display:flex; align-items:center; justify-content:center; }
.pass-cell.prem { border-color:#5a3a78; background:#160f22; }
.pass-cell.empty { color:#3d3558; }
.pass-cell.ready { border-color:#c9a227; box-shadow:0 0 8px #c9a22755; cursor:pointer; }
.pass-cell.ready:active { background:#2a2310; }
.pass-cell.claimed { opacity:.5; }
.pass-cell .pc-mark { position:absolute; top:1px; right:4px; font-style:normal; font-size:11px; color:#7ee08a; }

/* ============ M3:邮箱 / 好友 / 短语 / 引导 / 邀请 ============ */
#btn-mail { position:relative; }
.badge { position:absolute; top:-6px; right:-6px; background:#c43b4e; color:#fff; font-size:10px; min-width:16px; height:16px;
  line-height:16px; border-radius:8px; padding:0 4px; }
.mail-row { display:flex; align-items:center; gap:10px; background:#0f0c1a; border:1px solid #2e2745; border-radius:5px;
  padding:7px 10px; margin:5px 0; }
.mail-row.done { opacity:.6; }
.mail-info { flex:1; cursor:pointer; }
.mail-info b { display:block; font-size:13px; color:#e8e0c8; }
.mail-info .mail-body { display:block; font-size:12px; color:#9a8fc0; margin:4px 0; line-height:1.6; white-space:pre-line; }
.mail-info .dim { display:block; margin-top:2px; }
.q-section { font-size:11px; color:#b9a76a; margin:8px 0 2px; letter-spacing:1px; }
.quest-row.qweek { border-color:#5a3a78; background:#160f22; }
.quest-row.qclaimed { opacity:.5; }
.q-got { font-size:12px; color:#7ee08a; white-space:nowrap; }
.friend-add { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.friend-add .party-input { flex:1; max-width:180px; text-transform:none; }
.friend-row { display:flex; align-items:center; gap:8px; background:#0f0c1a; border:1px solid #2e2745; border-radius:4px;
  padding:5px 10px; margin:4px 0; font-size:13px; }
.friend-row .f-name { font-weight:bold; color:#e8e0c8; }
.friend-row .dim { flex:1; }
.friend-row .dot { width:8px; height:8px; border-radius:50%; background:#3d3558; flex:0 0 8px; }
.friend-row .dot.on { background:#7ee08a; box-shadow:0 0 6px #7ee08a88; }
.friend-row .dot.run { background:#ffa726; box-shadow:0 0 6px #ffa72688; }
.friend-row .f-uid { flex:0 0 auto; font-size:11px; }
.friend-row .has-unread { background:#c43b4e; border-color:#e0566a; color:#fff; }
/* ===== v32 世界频道 ===== */
.chat-log { max-height:180px; overflow-y:auto; background:#0c0a16; border:1px solid #2e2745; border-radius:5px;
  padding:6px 8px; margin:4px 0; font-size:13px; line-height:1.7; word-break:break-word; -webkit-overflow-scrolling:touch; }
/* 频道标签(世界/队伍) */
.chat-tabs { display:flex; gap:6px; margin-bottom:6px; }
.chat-tab { position:relative; flex:0 0 auto; padding:4px 12px; background:#1a1428; border:1px solid #3d3558; border-radius:6px;
  font-size:12px; color:#9a8fc0; cursor:pointer; font-family:inherit; }
.chat-tab.on { background:#2a2310; border-color:#c9a227; color:#ffe9a8; }
.chat-tab.has-new::after { content:''; position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#ff5e7e; box-shadow:0 0 6px #ff5e7e; }
.chat-row { margin:1px 0; }
.chat-row.mention { background:#2a2412; border-left:3px solid #ffd95e; padding:1px 6px; margin:2px -2px; border-radius:3px; }
.chat-row .chat-name { color:#9a8fd8; font-weight:bold; cursor:pointer; }
.chat-row .chat-name:hover { text-decoration:underline; }
.chat-row .chat-name.self { cursor:default; }
.chat-row .chat-name.self:hover { text-decoration:none; }
/* 发言冷却态:发送键变灰 + 显示倒计时 */
#btn-chat-send.cooling { opacity:.5; pointer-events:none; }
/* 底栏社交按钮徽标锚定到按钮自身(邮箱徽标同样受益) */
.lobby-foot .btn { position:relative; }
/* 通用确认弹层 */
.confirm-text { font-size:14px; line-height:1.7; color:#e8e0c8; padding:6px 2px; }
.confirm-btns { display:flex; gap:10px; margin-top:14px; justify-content:center; }
/* 底栏 💬 跳转高亮一闪 */
.panel.flash { animation:panelFlash .9s ease; }
@keyframes panelFlash { 0%,100% { box-shadow:none; } 30% { box-shadow:0 0 0 2px #c9a227, 0 0 14px #c9a22788; } }
.chat-row .chat-body { color:#d8d0bc; }
.chat-row.shout { background:#2a230fcc; border-left:3px solid #c9a227; padding:2px 6px; margin:3px -2px; border-radius:3px; }
.chat-row.shout .chat-name { color:#ffe066; }
.chat-row.shout .chat-body { color:#ffe9b8; }
.chat-input-row { display:flex; gap:6px; align-items:center; margin-top:4px; }
.chat-input-row .party-input { flex:1; max-width:none; text-transform:none; }
.chat-input-row .btn { flex:0 0 auto; }
/* ===== v32 好友私信 ===== */
.dm-thread { max-height:300px; min-height:160px; overflow-y:auto; background:#0c0a16; border:1px solid #2e2745;
  border-radius:5px; padding:8px; margin:6px 0; display:flex; flex-direction:column; gap:6px; -webkit-overflow-scrolling:touch; }
.dm-msg { display:flex; }
.dm-msg.mine { justify-content:flex-end; }
.dm-msg.theirs { justify-content:flex-start; }
.dm-bubble { max-width:75%; padding:6px 10px; border-radius:10px; font-size:13px; line-height:1.5; word-break:break-word; }
.dm-msg.mine .dm-bubble { background:#3a2f5e; color:#ece6ff; border-bottom-right-radius:3px; }
.dm-msg.theirs .dm-bubble { background:#1c1830; color:#d8d0bc; border:1px solid #2e2745; border-bottom-left-radius:3px; }
/* ===== v32 好友定向交易 ===== */
.trade-stash { display:flex; flex-wrap:wrap; gap:5px; max-height:130px; overflow-y:auto; margin:4px 0; -webkit-overflow-scrolling:touch; }
.trade-pick { font-size:12px; padding:4px 8px; background:#0f0c1a; border:1px solid #3d3558; border-radius:4px; cursor:pointer; color:#d8d0bc; }
.trade-pick.sel { background:#2a2310; border-color:#c9a227; box-shadow:0 0 8px #c9a22755; }
.trade-price-row { display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin:6px 0; }
.trade-price-row .party-input { flex:0 0 90px; max-width:90px; text-transform:none; }
.trade-price-row .cur-on { background:#2a2310; border-color:#c9a227; color:#ffe9a8; }
.trade-row { display:flex; align-items:center; gap:8px; background:#0f0c1a; border:1px solid #2e2745; border-radius:5px;
  padding:6px 10px; margin:4px 0; font-size:13px; }
.trade-row .trade-iname { flex:1; font-weight:bold; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trade-row .trade-iprice { color:#ffd95e; flex:0 0 auto; }
/* 私信收件箱列表 */
.inbox-row { display:flex; align-items:center; gap:10px; background:#0f0c1a; border:1px solid #2e2745; border-radius:5px;
  padding:8px 10px; margin:5px 0; cursor:pointer; }
.inbox-row:active { transform:translateY(1px); }
.inbox-row .dot { width:8px; height:8px; border-radius:50%; background:#3d3558; flex:0 0 8px; }
.inbox-row .dot.on { background:#7ee08a; box-shadow:0 0 6px #7ee08a88; }
.inbox-mid { flex:1; min-width:0; }
.inbox-name { font-size:13px; font-weight:bold; color:#e8e0c8; }
.inbox-prev { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inbox-badge { position:static; }
#btn-say { position:absolute; left:calc(env(safe-area-inset-left) + 14px); bottom:calc(env(safe-area-inset-bottom) + 210px);
  pointer-events:auto; }
/* v44 架势按钮:从无标小图标改成「架势」标签胶囊+金边,玩家一眼看懂是切换战斗架势 */
#btn-stance { position:absolute; left:calc(env(safe-area-inset-left) + 62px); bottom:calc(env(safe-area-inset-bottom) + 210px); pointer-events:auto;
  width:auto; min-width:54px; height:44px; padding:2px 10px; border-radius:10px; border:2px solid #c9a227; background:#2a2310e6; color:#ffe9a8;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; gap:1px; box-shadow:0 0 8px #c9a22744; }
#btn-stance .stance-cap { font-size:8px; opacity:0.8; letter-spacing:1px; font-weight:normal; }
#btn-stance .stance-cur { font-size:14px; font-weight:bold; white-space:nowrap; }
body.pc-mode #btn-stance { left:calc(50% + 214px); bottom:calc(env(safe-area-inset-bottom) + 178px); } /* v57 收进右端上方竖排(坐骑键之上) */
#phrase-panel { position:absolute; left:calc(env(safe-area-inset-left) + 14px); bottom:calc(env(safe-area-inset-bottom) + 256px);
  display:grid; grid-template-columns:1fr 1fr; gap:5px; background:#171225e8; border:2px solid #3d3558; border-radius:8px;
  padding:8px; pointer-events:auto; z-index:5; }
.phrase-btn { background:#241e36; border:1px solid #5a5270; color:#e8e0c8; padding:7px 12px; border-radius:14px;
  font-size:13px; font-family:inherit; white-space:nowrap; }
.phrase-btn:active { background:#3d3558; }
#tut-bar { position:absolute; top:calc(env(safe-area-inset-top) + 78px); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; background:#10324ad8; border:2px solid #6db1ff; border-radius:22px;
  padding:8px 16px; max-width:86vw; pointer-events:auto; }
#tut-text { font-size:13px; color:#cfe8ff; text-shadow:0 1px 2px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#btn-tut-skip { background:none; border:1px solid #6db1ff66; color:#9fd7ff; font-size:11px; padding:3px 10px;
  border-radius:10px; font-family:inherit; flex:0 0 auto; }
#invite-bar { position:fixed; top:26vh; left:50%; transform:translateX(-50%); z-index:95; display:flex; align-items:center;
  gap:8px; background:#171225f0; border:2px solid #c9a227; border-radius:10px; padding:10px 16px; box-shadow:0 6px 24px #000a; }
#invite-text { font-size:14px; color:#ffe9a8; }
#invite-bar .btn { padding:6px 14px; font-size:13px; margin:0; }

/* ============ v7 玩法与手感 ============ */
#vignette.boss-rage { opacity:.26 !important; animation: bossRage 1.5s ease-in-out infinite; }
@keyframes bossRage { 0%,100% { opacity:.26; } 50% { opacity:.1; } }
/* v43 着火屏幕反馈:本地玩家站烈焰/岩浆格时,橙红屏幕脉冲(优先级高于 boss-rage,故置其后) */
#vignette.on-fire { background:radial-gradient(ellipse at center, transparent 48%, #ff4d12cc 100%); opacity:.34 !important; animation: onFire .7s ease-in-out infinite; }
@keyframes onFire { 0%,100% { opacity:.36; } 50% { opacity:.16; } }
#downed-tip { position:absolute; top:38vh; left:50%; transform:translateX(-50%); background:#2a0d14e8;
  border:2px solid #8a2438; color:#ff9aa8; padding:10px 22px; border-radius:24px; font-size:15px;
  text-shadow:0 1px 2px #000; white-space:nowrap; }
#downed-tip span { color:#ffe9a8; font-weight:bold; }

@media (max-height:480px) {
  /* 横屏小屏适配 */
  .game-title { font-size:40px; }
  #action-cluster { transform:scale(.92); transform-origin:bottom right; }
  .lobby-scroll { padding:0 10px; }
}

@media (max-width:520px) {
  /* 竖屏:黑暗倒计时移到血条下方,避免与右上角重叠 */
  #swarm-text { top:calc(env(safe-area-inset-top) + 56px); left:calc(env(safe-area-inset-left) + 10px); transform:none; }
  #bossbar { top:calc(env(safe-area-inset-top) + 80px); }
  .hp-wrap { width:140px; }
}

/* ============ PWA 安装引导(pwa-install.js) ============ */
.pwa-banner { position:fixed; left:0; right:0; bottom:0; z-index:79;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  background:linear-gradient(180deg,#1b1530,#110d1e); border-top:2px solid #c9a227;
  box-shadow:0 -8px 26px #000b;
  transform:translateY(125%); transition:transform .32s cubic-bezier(.2,.9,.3,1); }
.pwa-banner.show { transform:translateY(0); }
.pwa-banner.hidden { display:none; }
.pwa-ico { width:46px; height:46px; flex:0 0 auto; border-radius:10px; border:1px solid #4a3f66; image-rendering:pixelated; }
.pwa-txt { flex:1 1 auto; min-width:0; }
.pwa-t1 { font-size:14px; font-weight:bold; color:#ffe9a8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pwa-t2 { font-size:11px; color:#9a92b0; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pwa-go { flex:0 0 auto; }
.pwa-x { flex:0 0 auto; background:none; border:none; color:#7a7290; font-size:18px; line-height:1;
  padding:6px 4px; cursor:pointer; font-family:inherit; }
.pwa-x:active { color:#fff; }
@media (min-width:560px) { .pwa-banner { left:auto; right:18px; bottom:18px; max-width:420px; border:2px solid #c9a227; border-radius:12px;
  padding:12px 14px; box-shadow:0 10px 34px #000c; } }

/* 图文教程步骤 */
.pwa-note { color:#ffc08a; font-size:12px; line-height:1.6; margin-bottom:10px;
  background:#2a1c12; border:1px solid #6a4326; border-radius:7px; padding:8px 10px; }
.pwa-steps { list-style:none; margin:4px 0 0; padding:0; }
.pwa-steps li { display:flex; align-items:center; gap:9px; padding:9px 9px; margin-bottom:8px;
  background:#1d1730; border:1px solid #3d3558; border-radius:8px; color:#d8d2c4; font-size:13px; line-height:1.4; }
.pwa-step-no { flex:0 0 auto; width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:bold; color:#0a0812; background:#c9a227; border-radius:50%; }
.pwa-step-ic { flex:0 0 auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  font-size:18px; background:#2a2240; border:1px solid #4a3f66; border-radius:7px; }
.pwa-step-tx { flex:1 1 auto; min-width:0; }
.pwa-benefit { color:#8fc98f; font-size:11.5px; line-height:1.6; margin-top:8px; text-align:center; }

/* 常驻入口 */
.pwa-title-btn { margin-top:12px; background:#241e36; border-color:#c9a227; color:#ffe9a8; }
.pwa-lobby-btn { padding:2px 7px; }